@hanzo/ui 8.0.5 → 8.0.7

package/src/product/menu/ContextMenu.tsx

@@ -0,0 +1,114 @@
+'use client'
+
+/**
+ * ContextMenu — a right-click menu that renders the SAME shared item spec as
+ * DropdownMenu, so every menu in the fleet is identical. Built on the @hanzo/gui
+ * Portal with the SAME portal-theme fix as the dropdown: the menu is portaled to the
+ * root, escaping any nested `<Theme>`, so it re-applies the captured theme via
+ * <PortalTheme>. Web/desktop right-click (`onContextMenu`); on native — which has no
+ * right-click — the wrapped child renders untouched.
+ *
+ *   <ContextMenu items={[{ key:'copy', label:'Copy', icon:<Copy size={16}/>, onSelect:copy }]}>
+ *     <YStack>right-click me</YStack>
+ *   </ContextMenu>
+ */
+import type { ReactElement, MouseEvent } from 'react'
+import { cloneElement, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { Portal } from '@hanzo/gui'
+import { MenuPanel, renderMenuItems, type MenuItemSpec } from './items'
+import { PortalTheme, useThemeName } from './portal-theme'
+import { menuKeyDown } from './roving'
+
+const EDGE = 8 // keep this far from the viewport edge
+
+export type ContextMenuProps = {
+  /** The right-clickable target. Its `onContextMenu` is composed, not replaced. */
+  children: ReactElement
+  items: MenuItemSpec[]
+  disabled?: boolean
+  minWidth?: number
+  maxHeight?: number
+}
+
+export function ContextMenu({ children, items, disabled, minWidth = 200, maxHeight }: ContextMenuProps) {
+  const themeName = useThemeName()
+  const [state, setState] = useState<{ open: boolean; x: number; y: number }>({ open: false, x: 0, y: 0 })
+  const panelRef = useRef<HTMLElement | null>(null)
+
+  const close = useCallback(() => setState((s) => (s.open ? { ...s, open: false } : s)), [])
+
+  const openAt = (e: MouseEvent) => {
+    if (disabled) return
+    e.preventDefault()
+    e.stopPropagation()
+    setState({ open: true, x: e.clientX, y: e.clientY })
+  }
+
+  // Edge-flip before paint: clamp so the panel stays fully in the viewport.
+  useLayoutEffect(() => {
+    if (!state.open || typeof window === 'undefined') return
+    const node = panelRef.current
+    if (!node) return
+    const r = node.getBoundingClientRect()
+    let x = state.x
+    let y = state.y
+    if (x + r.width > window.innerWidth - EDGE) x = Math.max(EDGE, window.innerWidth - r.width - EDGE)
+    if (y + r.height > window.innerHeight - EDGE) y = Math.max(EDGE, window.innerHeight - r.height - EDGE)
+    if (x !== state.x || y !== state.y) setState((s) => ({ ...s, x, y }))
+    // Focus the panel so keyboard nav works immediately.
+    node.focus?.()
+  }, [state.open, state.x, state.y])
+
+  // Dismiss on outside pointer, Escape, scroll, resize, blur.
+  useEffect(() => {
+    if (!state.open || typeof document === 'undefined') return
+    const onPointerDown = (e: PointerEvent) => {
+      if (panelRef.current && !panelRef.current.contains(e.target as Node)) close()
+    }
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') close()
+    }
+    document.addEventListener('pointerdown', onPointerDown, true)
+    document.addEventListener('keydown', onKey, true)
+    window.addEventListener('scroll', close, true)
+    window.addEventListener('resize', close)
+    window.addEventListener('blur', close)
+    return () => {
+      document.removeEventListener('pointerdown', onPointerDown, true)
+      document.removeEventListener('keydown', onKey, true)
+      window.removeEventListener('scroll', close, true)
+      window.removeEventListener('resize', close)
+      window.removeEventListener('blur', close)
+    }
+  }, [state.open, close])
+
+  const childOnContextMenu = (children.props as { onContextMenu?: (e: MouseEvent) => void }).onContextMenu
+  const target = cloneElement(children, {
+    onContextMenu: (e: MouseEvent) => {
+      childOnContextMenu?.(e)
+      openAt(e)
+    },
+  } as Partial<typeof children.props>)
+
+  return (
+    <>
+      {target}
+      {state.open ? (
+        <Portal>
+          <PortalTheme name={themeName}>
+            <MenuPanel
+              panelRef={(n) => (panelRef.current = n)}
+              minWidth={minWidth}
+              maxHeight={maxHeight}
+              tabIndex={-1}
+              onKeyDown={(e) => menuKeyDown(e, close)}
+              style={{ position: 'fixed', left: state.x, top: state.y, zIndex: 100000 }}
+            >
+              {renderMenuItems(items, close)}
+            </MenuPanel>
+          </PortalTheme>
+        </Portal>
+      ) : null}
+    </>
+  )
+}

package/src/product/menu/DropdownMenu.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+/**
+ * DropdownMenu — a portal-theme-safe dropdown on the @hanzo/gui Popover (the proven
+ * console idiom, same shell as SelectMenu/ComboBox). Declarative `items`; renders the
+ * ONE shared menu-item spec so it is pixel-identical to every other menu. Opens under
+ * a nested `<Theme>` correctly because the portaled content re-applies the captured
+ * theme (see PortalTheme).
+ *
+ *   <DropdownMenu
+ *     trigger={<Button>Actions</Button>}
+ *     items={[
+ *       { key: 'rename', label: 'Rename', icon: <Pencil size={16} />, onSelect: rename },
+ *       { type: 'separator' },
+ *       { key: 'del', label: 'Delete', destructive: true, onSelect: del },
+ *     ]}
+ *   />
+ */
+import type { ReactElement } from 'react'
+import { Popover, useControllableState } from '@hanzo/gui'
+import { MenuPanel, renderMenuItems, type MenuItemSpec } from './items'
+import { PortalTheme, useThemeName } from './portal-theme'
+import { menuKeyDown } from './roving'
+
+export type DropdownMenuProps = {
+  /** The clickable element. Cloned as the Popover trigger (`asChild`). */
+  trigger: ReactElement
+  items: MenuItemSpec[]
+  /** Controlled open state. Omit for uncontrolled. */
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  /** Popover placement (default `bottom-start`). */
+  placement?: React.ComponentProps<typeof Popover>['placement']
+  minWidth?: number
+  maxHeight?: number
+}
+
+export function DropdownMenu({
+  trigger,
+  items,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  placement = 'bottom-start',
+  minWidth = 200,
+  maxHeight,
+}: DropdownMenuProps) {
+  const [isOpen, setOpen] = useControllableState({
+    prop: open,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+  })
+  // Capture the resolved theme HERE, where theme context is still available; the
+  // Popover.Content portals out of it and re-applies it via <PortalTheme>.
+  const themeName = useThemeName()
+
+  return (
+    <Popover open={isOpen} onOpenChange={setOpen} placement={placement} allowFlip>
+      <Popover.Trigger asChild>{trigger}</Popover.Trigger>
+      <Popover.Content
+        // The visible surface is our MenuPanel — keep Content a transparent shell.
+        bg="transparent"
+        borderWidth={0}
+        p={0}
+        elevation={0}
+      >
+        <PortalTheme name={themeName}>
+          <MenuPanel minWidth={minWidth} maxHeight={maxHeight} onKeyDown={(e) => menuKeyDown(e, () => setOpen(false))}>
+            {renderMenuItems(items, () => setOpen(false))}
+          </MenuPanel>
+        </PortalTheme>
+      </Popover.Content>
+    </Popover>
+  )
+}

package/src/product/menu/index.ts

@@ -0,0 +1,15 @@
+// @hanzo/ui/product menu — ONE menu system. Portal-theme-safe DropdownMenu (click)
+// and ContextMenu (right-click) both render the SAME item spec, so every menu across
+// the fleet is pixel-identical. See items.tsx for the shared spec.
+
+export { DropdownMenu, type DropdownMenuProps } from './DropdownMenu'
+export { ContextMenu, type ContextMenuProps } from './ContextMenu'
+export {
+  MenuPanel,
+  MenuItemView,
+  MenuSeparatorView,
+  MenuLabelView,
+  renderMenuItems,
+  type MenuItemSpec,
+} from './items'
+export { PortalTheme } from './portal-theme'

package/src/product/menu/items.tsx

@@ -0,0 +1,230 @@
+'use client'
+
+/**
+ * The ONE menu-item spec — every menu across the fleet renders through these
+ * presentational primitives, so DropdownMenu, ContextMenu, SelectMenu and ComboBox
+ * are pixel-identical. Geometry is literal px on a strict 8-grid (never random);
+ * colour is theme-adaptive tokens ($color2/$color11/$color12/$borderColor) so light
+ * and dark both work, with the single purple accent supplied by the brand CSS vars.
+ *
+ * Style props use the @hanzo/gui config shorthands (bg/items/justify/px/py/p/mx/my/
+ * minW/maxH/rounded/select/shrink) — the config omits the longhand aliases.
+ *
+ * Panel   — bg $color2 (#111 dark), hairline border, radius 12, inner pad 4, subtle
+ *           border+ambient elevation.
+ * Item    — height 30 (28–32 band), px 8, gap 8, radius 7; icon in a fixed 16px slot
+ *           on the left; label 13px $color12; right affordance (shortcut / check /
+ *           chevron) right-aligned. States: hover/active/focus → accent-soft, focus
+ *           visible; selected → check + purple; disabled → muted, no hover.
+ * Separator — 1px hairline, 4px vertical margin.
+ * Label     — 11px uppercase muted section header, px 8.
+ */
+import type { ReactNode, KeyboardEvent } from 'react'
+import { Text, XStack, YStack } from '@hanzo/gui'
+import { Check, ChevronRight } from '@hanzogui/lucide-icons-2'
+
+// ── Geometry — literal px, 8-grid ──────────────────────────────────────────────
+const ITEM_MIN_HEIGHT = 30
+const ITEM_RADIUS = 7
+const ITEM_PX = 8
+const ITEM_GAP = 8
+const ICON_SLOT = 16
+export const PANEL_RADIUS = 12
+export const PANEL_PAD = 4
+const PANEL_GAP = 2
+const SEP_MARGIN = 4
+const FONT_LABEL = 13
+const FONT_MUTED = 11
+const FONT_SHORTCUT = 12
+
+// ── Colour — brand purple accent via CSS vars (fallbacks keep it correct even when
+//    @hanzo/brand is not loaded, e.g. a bare Vite/Tauri host); everything else uses
+//    theme-adaptive Tamagui tokens. ──────────────────────────────────────────────
+const ACCENT = 'var(--hanzo-accent, #8b5cf6)'
+const ACCENT_SOFT = 'var(--hanzo-accent-soft, rgba(139,92,246,0.16))'
+const DANGER = 'var(--hanzo-danger, #ef4444)'
+
+// ── Declarative item model ──────────────────────────────────────────────────────
+export type MenuItemSpec =
+  | {
+      type?: 'item'
+      /** Stable key. */
+      key: string
+      label: string
+      /** Leading Lucide icon (16px, unfilled) in the fixed left slot. */
+      icon?: ReactNode
+      /** Second muted line under the label (e.g. an id or hint). */
+      description?: string
+      /** Right-aligned shortcut / hint text (e.g. "⌘K"). */
+      shortcut?: string
+      /** Renders a right check + purple tint. */
+      selected?: boolean
+      disabled?: boolean
+      /** Danger styling (red label/icon). */
+      destructive?: boolean
+      /** Renders a right chevron (submenu / drill-in affordance). */
+      hasSubmenu?: boolean
+      onSelect: () => void
+      /** Keep the menu open after selecting (default: close). */
+      closeOnSelect?: boolean
+    }
+  | { type: 'separator'; key?: string }
+  | { type: 'label'; key?: string; label: string }
+
+// ── Surface ───────────────────────────────────────────────────────────────────
+export function MenuPanel({
+  children,
+  minWidth = 200,
+  maxHeight = 360,
+  onKeyDown,
+  panelRef,
+  ...rest
+}: {
+  children: ReactNode
+  minWidth?: number
+  maxHeight?: number
+  onKeyDown?: (e: KeyboardEvent) => void
+  /** Web DOM node of the panel (for measuring / edge-flip). */
+  panelRef?: (node: HTMLElement | null) => void
+  [key: string]: unknown
+}) {
+  return (
+    <YStack
+      // Web DOM ref; Gui forwards it to the underlying node. Cast (not @ts-expect-error)
+      // so it is env-agnostic — the ref type is strict under the pkg build, loose here.
+      ref={panelRef as never}
+      role="menu"
+      bg="$color2"
+      borderColor="$borderColor"
+      borderWidth={1}
+      rounded={PANEL_RADIUS}
+      p={PANEL_PAD}
+      gap={PANEL_GAP}
+      minW={minWidth}
+      maxH={maxHeight}
+      overflow="scroll"
+      // Subtle border + ambient elevation, minimal shadow.
+      shadowColor="rgba(0,0,0,0.45)"
+      shadowRadius={20}
+      shadowOffset={{ width: 0, height: 10 }}
+      onKeyDown={onKeyDown as never}
+      {...rest}
+    >
+      {children}
+    </YStack>
+  )
+}
+
+// ── Item — the ONE row ──────────────────────────────────────────────────────────
+export function MenuItemView({
+  icon,
+  label,
+  description,
+  shortcut,
+  selected = false,
+  disabled = false,
+  destructive = false,
+  hasSubmenu = false,
+  onSelect,
+}: Omit<Extract<MenuItemSpec, { type?: 'item' }>, 'key' | 'type' | 'closeOnSelect'>) {
+  const press = () => {
+    if (!disabled) onSelect()
+  }
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (disabled) return
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      onSelect()
+    }
+  }
+  const labelColor = destructive ? DANGER : '$color12'
+  return (
+    <XStack
+      role="menuitem"
+      tabIndex={disabled ? -1 : 0}
+      aria-disabled={disabled || undefined}
+      items="center"
+      gap={ITEM_GAP}
+      px={ITEM_PX}
+      minH={ITEM_MIN_HEIGHT}
+      rounded={ITEM_RADIUS}
+      cursor={disabled ? 'default' : 'pointer'}
+      opacity={disabled ? 0.4 : 1}
+      select="none"
+      style={{ outline: 'none' }}
+      hoverStyle={disabled ? {} : { bg: ACCENT_SOFT as never }}
+      pressStyle={disabled ? {} : { bg: ACCENT_SOFT as never }}
+      focusStyle={disabled ? {} : { bg: ACCENT_SOFT as never }}
+      onPress={press}
+      onKeyDown={onKeyDown as never}
+    >
+      <XStack width={ICON_SLOT} height={ICON_SLOT} items="center" justify="center" shrink={0}>
+        {icon ? (
+          <XStack items="center" justify="center" opacity={destructive ? 1 : 0.9} style={destructive ? { color: DANGER } : undefined}>
+            {icon}
+          </XStack>
+        ) : null}
+      </XStack>
+
+      <YStack flex={1} minW={0}>
+        <Text fontSize={FONT_LABEL} lineHeight={18} color={labelColor as never} numberOfLines={1}>
+          {label}
+        </Text>
+        {description ? (
+          <Text fontSize={FONT_MUTED} lineHeight={14} color="$color11" numberOfLines={1}>
+            {description}
+          </Text>
+        ) : null}
+      </YStack>
+
+      {shortcut ? (
+        <Text fontSize={FONT_SHORTCUT} color="$color11" shrink={0}>
+          {shortcut}
+        </Text>
+      ) : null}
+      {selected ? <Check size={14} color={ACCENT} /> : null}
+      {hasSubmenu ? <ChevronRight size={14} color="var(--hanzo-muted, currentColor)" opacity={0.6} /> : null}
+    </XStack>
+  )
+}
+
+// ── Separator ───────────────────────────────────────────────────────────────────
+export function MenuSeparatorView() {
+  return <YStack height={1} bg="$borderColor" my={SEP_MARGIN} mx={SEP_MARGIN} role="separator" />
+}
+
+// ── Section label ────────────────────────────────────────────────────────────────
+export function MenuLabelView({ children }: { children: ReactNode }) {
+  return (
+    <Text
+      fontSize={FONT_MUTED}
+      color="$color11"
+      px={ITEM_PX}
+      py={SEP_MARGIN}
+      textTransform="uppercase"
+      letterSpacing={0.4}
+      select="none"
+    >
+      {children}
+    </Text>
+  )
+}
+
+// ── The single render path shared by every menu ──────────────────────────────────
+export function renderMenuItems(items: MenuItemSpec[], close?: () => void): ReactNode {
+  return items.map((it, i) => {
+    if (it.type === 'separator') return <MenuSeparatorView key={it.key ?? `sep-${i}`} />
+    if (it.type === 'label') return <MenuLabelView key={it.key ?? `lbl-${i}`}>{it.label}</MenuLabelView>
+    const { key, onSelect, closeOnSelect = true, ...rest } = it
+    return (
+      <MenuItemView
+        key={key}
+        {...rest}
+        onSelect={() => {
+          onSelect()
+          if (closeOnSelect) close?.()
+        }}
+      />
+    )
+  })
+}

package/src/product/menu/portal-theme.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+/**
+ * PortalTheme — the ONE fix for "themed content escapes its theme through a portal".
+ *
+ * @hanzo/gui's `Popover.Content` and `Portal` render their children in a SEPARATE
+ * React subtree (a Gorhom-style portal host mounted at the app root), NOT via
+ * `ReactDOM.createPortal`. React context therefore does NOT flow from the trigger's
+ * location to the host. Under a nested `<Theme name="dark">` the portaled content
+ * lands OUTSIDE that theme context and Tamagui throws "Missing theme" (or renders
+ * unthemed).
+ *
+ * The fix is two-part and must stay two-part:
+ *   1. At the TRIGGER site (theme context still available) capture the resolved
+ *      theme name with `useThemeName()`.
+ *   2. INSIDE the portaled content re-apply it: `<PortalTheme name={captured}>`.
+ *
+ * Every portal-backed menu in this package (DropdownMenu, ContextMenu, SelectMenu,
+ * ComboBox) uses this so a menu renders identically whether it is opened under the
+ * root theme or under any nested `<Theme>`, light or dark.
+ */
+import type { ReactNode } from 'react'
+import { Theme, useThemeName } from '@hanzo/gui'
+
+/** Capture the current resolved theme name at the trigger site. Re-exported so the
+ *  capture + re-apply pair reads from one module. */
+export { useThemeName }
+
+export function PortalTheme({ name, children }: { name: string; children: ReactNode }) {
+  // `name` is the resolved theme name (e.g. "dark", or a compound "dark_purple").
+  // Tamagui's `Theme` accepts the resolved name and reconstructs the context.
+  return <Theme name={name as never}>{children}</Theme>
+}

package/src/product/menu/roving.ts

@@ -0,0 +1,34 @@
+'use client'
+
+/**
+ * Roving keyboard focus for a menu panel — ArrowUp/Down move focus between enabled
+ * `[role="menuitem"]` children, Home/End jump to ends, Escape closes. Web/desktop
+ * only (guards on `document`); native menus have no pointer-keyboard nav. Shared by
+ * DropdownMenu and ContextMenu so navigation is identical.
+ */
+import type { KeyboardEvent } from 'react'
+
+export function menuKeyDown(e: KeyboardEvent, onClose?: () => void): void {
+  if (e.key === 'Escape') {
+    onClose?.()
+    return
+  }
+  if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp' && e.key !== 'Home' && e.key !== 'End') return
+  if (typeof document === 'undefined') return
+
+  const panel = e.currentTarget as HTMLElement
+  const items = Array.from(
+    panel.querySelectorAll<HTMLElement>('[role="menuitem"]:not([aria-disabled="true"])'),
+  )
+  if (items.length === 0) return
+  e.preventDefault()
+
+  const active = document.activeElement as HTMLElement | null
+  const current = active ? items.indexOf(active) : -1
+  let next: number
+  if (e.key === 'Home') next = 0
+  else if (e.key === 'End') next = items.length - 1
+  else if (e.key === 'ArrowDown') next = current < 0 ? 0 : (current + 1) % items.length
+  else next = current <= 0 ? items.length - 1 : current - 1
+  items[next]?.focus()
+}

package/src/product/surfaces.data.ts

@@ -0,0 +1,42 @@
+// The ONE canonical list of Hanzo product surfaces the cross-surface app switcher
+// offers — consumed by EVERY surface's launcher so the set never diverges.
+//
+// Framework-agnostic (plain TS, zero imports): React consumers (the @hanzo/ui
+// `AppHeader`, the console `AppLauncher`) import it directly; a surface that
+// cannot resolve THIS package — the Svelte Huly-fork `team` (whose own `@hanzo/ui`
+// is the workbench UI framework, a name clash) and the shadcn-aliased `app` — keeps
+// a byte-identical MIRROR that points back here. Add or reorder a surface HERE and
+// every launcher moves together (mirrors are updated in the same change).
+//
+// `id` is the stable key AND the icon key: each framework maps it to its own glyph
+// (React → lucide, Svelte → SurfaceIcon), so the DATA itself stays glyph-free.
+
+export type SurfaceId = 'ai' | 'console' | 'app' | 'chat' | 'bot' | 'team' | 'billing'
+
+/** One Hanzo surface the app switcher offers. */
+export type Surface = {
+  /** Stable id; also the per-surface icon key. */
+  id: SurfaceId
+  /** Menu label. */
+  label: string
+  /** Absolute product URL (opened in a new tab). */
+  href: string
+  /** The domain, shown as the tile subtitle. */
+  hint: string
+}
+
+/** The seven Hanzo surfaces (`console` opens the cloud AI console). */
+export const SURFACES: Surface[] = [
+  { id: 'ai', label: 'Hanzo AI', href: 'https://hanzo.ai', hint: 'hanzo.ai' },
+  { id: 'console', label: 'Console', href: 'https://console.hanzo.ai', hint: 'console.hanzo.ai' },
+  { id: 'app', label: 'App', href: 'https://hanzo.app', hint: 'hanzo.app' },
+  { id: 'chat', label: 'Chat', href: 'https://hanzo.chat', hint: 'hanzo.chat' },
+  { id: 'bot', label: 'Bot', href: 'https://hanzo.bot', hint: 'hanzo.bot' },
+  { id: 'team', label: 'Team', href: 'https://hanzo.team', hint: 'hanzo.team' },
+  { id: 'billing', label: 'Billing', href: 'https://billing.hanzo.ai', hint: 'billing.hanzo.ai' },
+]
+
+/** Every surface except `current` — a launcher never links to itself. */
+export function otherSurfaces(current?: SurfaceId): Surface[] {
+  return current ? SURFACES.filter((s) => s.id !== current) : SURFACES
+}

package/types/product/AppHeader.d.ts

@@ -10,15 +10,7 @@
  * flex + truncation, the wordmark collapse is the brand motion itself.
  */
 import { type ReactNode } from 'react';
-/** One Hanzo surface the app switcher offers. */
-export type Surface = {
-    id: string;
-    label: string;
-    href: string;
-    hint?: string;
-};
-/** The five Hanzo surfaces (cloud opens the console). */
-export declare const SURFACES: Surface[];
+import { type Surface, type SurfaceId } from './surfaces.data';
 export type AppHeaderProps = {
     /** Brand slot — defaults to the animated `<BrandMark/>`. */
     brand?: ReactNode;
@@ -30,7 +22,9 @@ export type AppHeaderProps = {
     org?: ReactNode;
     /** Free slot between the org slot and the right cluster. */
     children?: ReactNode;
-    /** App-switcher surfaces; [] hides the switcher. */
+    /** The surface this header renders on — omitted from the switcher (no self-link). */
+    current?: SurfaceId;
+    /** App-switcher surfaces; defaults to every surface but `current`. [] hides it. */
     surfaces?: Surface[];
     /** Open a surface — default `window.open` (new tab). */
     open?: (surface: Surface) => void;
@@ -45,5 +39,5 @@ export type AppHeaderProps = {
     onBilling?: () => void;
     onSignOut?: () => void;
 };
-export declare function AppHeader({ brand, wordmark, onBrand, org, children, surfaces, open, user, menu, theme, onProfile, onTeam, onBilling, onSignOut, }: AppHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppHeader({ brand, wordmark, onBrand, org, children, current, surfaces, open, user, menu, theme, onProfile, onTeam, onBilling, onSignOut, }: AppHeaderProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AppHeader.d.ts.map

package/types/product/AppHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../src/product/AppHeader.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAOhD,iDAAiD;AACjD,MAAM,MAAM,OAAO,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAEhF,yDAAyD;AACzD,eAAO,MAAM,QAAQ,EAAE,OAAO,EAM7B,CAAA;AAiBD,MAAM,MAAM,cAAc,GAAG;IAC3B,4DAA4D;IAC5D,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,0EAA0E;IAC1E,GAAG,CAAC,EAAE,SAAS,CAAA;IACf,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAA;IACpB,wDAAwD;IACxD,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACjC,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,+CAA+C;IAC/C,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,wEAAwE;IACxE,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB,CAAA;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAkB,EAClB,OAAO,EACP,GAAG,EACH,QAAQ,EACR,QAAmB,EACnB,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,SAAS,EACT,MAAM,EACN,SAAS,EACT,SAAS,GACV,EAAE,cAAc,2CAqFhB"}
+{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../src/product/AppHeader.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAMhD,OAAO,EAAiB,KAAK,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAA;AA4B7E,MAAM,MAAM,cAAc,GAAG;IAC3B,4DAA4D;IAC5D,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,0EAA0E;IAC1E,GAAG,CAAC,EAAE,SAAS,CAAA;IACf,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,qFAAqF;IACrF,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,mFAAmF;IACnF,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAA;IACpB,wDAAwD;IACxD,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACjC,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,+CAA+C;IAC/C,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,wEAAwE;IACxE,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB,CAAA;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAkB,EAClB,OAAO,EACP,GAAG,EACH,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,SAAS,EACT,MAAM,EACN,SAAS,EACT,SAAS,GACV,EAAE,cAAc,2CA0FhB"}

package/types/product/ComboBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../src/product/ComboBox.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEnE,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEpD,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAe,EACf,KAAY,EACZ,OAAO,EACP,WAAW,EACX,QAAQ,EACR,SAAuD,EACvD,QAAc,GACf,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,6DAA6D;IAC7D,OAAO,EAAE,WAAW,EAAE,CAAA;IACtB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,iFAAiF;IACjF,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,2CAmEA"}
+{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../src/product/ComboBox.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAKnE,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEpD,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAe,EACf,KAAY,EACZ,OAAO,EACP,WAAW,EACX,QAAQ,EACR,SAAuD,EACvD,QAAc,GACf,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,6DAA6D;IAC7D,OAAO,EAAE,WAAW,EAAE,CAAA;IACtB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,iFAAiF;IACjF,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,2CA4EA"}

package/types/product/SelectMenu.d.ts

@@ -1,9 +1,12 @@
 /**
- * SelectMenu — a compact, reusable dropdown select on @hanzo/gui Popover (the
- * console's proven dropdown idiom, same as OrgSwitcher/ScopeSwitcher). Renders a
- * labelled trigger ("All types", or the chosen option) and a popover list with a
- * check on the active option. Prop-driven + self-contained so it lifts into
- * `@hanzo/ui`. `value === null` is the "all"/unfiltered state.
+ * SelectMenu — a compact, reusable dropdown select on @hanzo/gui Popover. Renders a
+ * labelled trigger ("All types", or the chosen option) and a menu list with a check on
+ * the active option. Prop-driven + self-contained. `value === null` is the
+ * "all"/unfiltered state.
+ *
+ * Uses the ONE shared menu spec (MenuPanel + MenuItemView) so it is pixel-identical to
+ * DropdownMenu/ContextMenu, and the SAME portal-theme fix (PortalTheme) so it renders
+ * correctly through the portal under a nested `<Theme>`, light or dark.
  */
 import type { ReactElement } from 'react';
 export type SelectOption<T extends string> = {

package/types/product/SelectMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenu.d.ts","sourceRoot":"","sources":["../../src/product/SelectMenu.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAKzC,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,IAAI;IAAE,GAAG,EAAE,CAAC,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAEtE,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,EAC3C,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,IAAI,EACJ,QAAc,GACf,EAAE;IACD,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAA;IAC1B,KAAK,EAAE,CAAC,GAAG,IAAI,CAAA;IACf,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAA;IAC/B,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,2CAsCA"}
+{"version":3,"file":"SelectMenu.d.ts","sourceRoot":"","sources":["../../src/product/SelectMenu.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAQzC,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,IAAI;IAAE,GAAG,EAAE,CAAC,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAEtE,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,EAC3C,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,IAAI,EACJ,QAAc,GACf,EAAE;IACD,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAA;IAC1B,KAAK,EAAE,CAAC,GAAG,IAAI,CAAA;IACf,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAA;IAC/B,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,2CAyCA"}

package/types/product/ThemeToggle.d.ts

@@ -1,2 +1,22 @@
-export declare function ThemeToggle(): import("react/jsx-runtime").JSX.Element;
+export type ThemeMode = 'light' | 'dark';
+export type ThemeToggleProps = {
+    /** Controlled theme. Pair with `onToggle`/`onThemeChange` to fully control it. */
+    theme?: ThemeMode;
+    /** Seed for uncontrolled mode (default: read from the DOM `.dark` class, else 'dark'). */
+    defaultTheme?: ThemeMode;
+    /** Called with the next theme on toggle (alias of `onThemeChange`). */
+    onToggle?: (next: ThemeMode) => void;
+    /** Called with the next theme on toggle. */
+    onThemeChange?: (next: ThemeMode) => void;
+    /** @hanzo/gui Button size token (default "$2"). */
+    size?: string;
+    /** aria-label override. */
+    label?: string;
+};
+/**
+ * The framework-agnostic toggle button. Controlled when `theme` is provided; otherwise
+ * self-managed via the DOM `.dark` class. No framework dependency — safe on any host.
+ */
+export declare function AgnosticThemeToggle({ theme, defaultTheme, onToggle, onThemeChange, size, label, }: ThemeToggleProps): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeToggle(props: ThemeToggleProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ThemeToggle.d.ts.map

package/types/product/ThemeToggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["../../src/product/ThemeToggle.tsx"],"names":[],"mappings":"AAYA,wBAAgB,WAAW,4CAY1B"}
+{"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["../../src/product/ThemeToggle.tsx"],"names":[],"mappings":"AAoBA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AAExC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,kFAAkF;IAClF,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,0FAA0F;IAC1F,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACpC,4CAA4C;IAC5C,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACzC,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AA+BD;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,IAAW,EACX,KAAK,GACN,EAAE,gBAAgB,2CAyBlB;AAiBD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAelD"}

package/types/product/ThemeToggleNext.d.ts

@@ -0,0 +1,5 @@
+import { type ThemeToggleProps } from './ThemeToggle';
+declare function ThemeToggleNext({ size, label }: Pick<ThemeToggleProps, 'size' | 'label'>): import("react/jsx-runtime").JSX.Element;
+export default ThemeToggleNext;
+export { ThemeToggleNext };
+//# sourceMappingURL=ThemeToggleNext.d.ts.map