mirror of
https://github.com/hanzoai/rfc.git
synced 2026-10-30 18:23:14 +00:00
zeekayandHanzo Dev
2e72393bf6
SEARCH. components/search.tsx hand-rolled a command palette — modality, focus,
a cursor, arrow-key traversal, wrap-around, an empty state, a footer of key
hints — next to `Command` from @hanzo/ui, which is all of that already and is
gui-native (no cmdk), so it is the same palette on web, native and desktop.
~200 lines of TSX and 97 lines of CSS become composition.
What stays local is the part that is about proposals: which rows exist and where
each goes. `shouldFilter={false}` is deliberate, not a workaround — Command keeps
filtered-out items MOUNTED, which is right at menu scale and wrong for an index
of hundreds of proposals, so matching stays a capped substring scan.
Driven in Chromium against the static export:
Ctrl+K -> dialog open, 3 rows
type "net" -> "1 RESULTS / Networking"
ArrowDown, Enter -> /docs/category/networking/
0 console errors, First Load 170 kB -> 172 kB
CTA. `.rfc-cta` paints `--foreground` on `--background`, so it is always the
inverse of the page; the deleted `.rfc-cta .rfc-btn[…]` rules were how the old
buttons kept up. A gui Button does not read that CSS, and came out rgb(5,5,5) on
an oklch(0.145) panel — a black button on a black card.
<Inverted> gives the CONTROLS the inverted gui theme. Not the panel: `--background`
is the one token gui also owns, so inverting the whole panel flipped the panel's
own `color: var(--background)` and the heading vanished instead — verified, then
narrowed. Measured after:
LIGHT panel oklch(0.145) heading rgb(247,247,247) buttons #fff/#0a0a0a, #242424/#fff
DARK panel oklch(0.985) heading rgb(20,20,20) buttons #050505/#fff, #d9d9d9/#050505
`<Theme inverse>` would have been shorter and does nothing: gui 8's ThemeProps
has no `inverse` key, so it type-checks, renders, and inverts nothing.
$ pnpm build
✓ Compiled successfully in 18.2s
✓ Generating static pages (11/11)
✓ Exporting (2/2)
$ pnpm typecheck # exit 0
Co-authored-by: Hanzo Dev <[email protected]>
32 lines
1.5 KiB
TypeScript
32 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import type { ReactNode } from 'react';
|
|
import { Theme } from '@hanzo/gui';
|
|
import { useThemeSetting } from '@hanzogui/next-theme';
|
|
|
|
/**
|
|
* The gui theme for controls sitting on a surface that inverts the page.
|
|
*
|
|
* `.rfc-cta` paints itself `--foreground` on `--background`, so it is always the
|
|
* opposite of the page around it. Its own CSS tokens flip with the page; gui
|
|
* components do not, because they resolve `$color…` through the gui theme, which
|
|
* is still the page's. Measured, without this: a solid Button on the CTA came
|
|
* out `rgb(5,5,5)` on an `oklch(0.145)` panel — a black button on a black card.
|
|
*
|
|
* Wraps the CONTROLS, not the panel. `--background` is the one token gui also
|
|
* owns, so an inverted theme around the whole panel flips it for the panel's own
|
|
* `color: var(--background)` too, and the heading disappears into the card —
|
|
* traded one invisible element for another. The panel keeps its CSS; only the
|
|
* things that read the gui theme get the inverted gui theme.
|
|
*
|
|
* `<Theme inverse>` is NOT this. gui 8's `ThemeProps` is
|
|
* `{className, name, componentName, children, reset, debug, forceClassName,
|
|
* shallow}` — there is no `inverse`, so that prop type-checks, renders, and
|
|
* inverts nothing. The theme has to be named.
|
|
*/
|
|
export function Inverted({ children }: { children: ReactNode }) {
|
|
const { resolvedTheme } = useThemeSetting();
|
|
|
|
return <Theme name={resolvedTheme === 'dark' ? 'light' : 'dark'}>{children}</Theme>;
|
|
}
|