@hanzo/ui 5.7.1 → 8.0.0

package/src/product/SelectMenu.tsx

@@ -0,0 +1,94 @@
+'use client'
+
+/**
+ * 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.
+ */
+import type { ReactElement } from 'react'
+import { useState } from 'react'
+import { Button, Popover, Text, XStack, YStack } from '@hanzo/gui'
+import { ChevronDown, Check } from '@hanzogui/lucide-icons-2'
+
+export type SelectOption<T extends string> = { key: T; label: string }
+
+export function SelectMenu<T extends string>({
+  options,
+  value,
+  onChange,
+  allLabel = 'All',
+  icon,
+  minWidth = 130,
+}: {
+  options: SelectOption<T>[]
+  value: T | null
+  onChange: (v: T | null) => void
+  /** Label shown (and first menu row) for the unfiltered `null` state. */
+  allLabel?: string
+  /** Optional leading icon in the trigger. */
+  icon?: ReactElement
+  minWidth?: number
+}) {
+  const [open, setOpen] = useState(false)
+  const active = value === null ? null : options.find((o) => o.key === value) ?? null
+  const triggerLabel = active ? active.label : allLabel
+
+  const pick = (v: T | null) => {
+    onChange(v)
+    setOpen(false)
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen} placement="bottom-start">
+      <Popover.Trigger asChild>
+        <Button
+          size="$2"
+          minW={minWidth}
+          justify="space-between"
+          borderWidth={1}
+          borderColor="$borderColor"
+          bg={value !== null ? '$color5' : 'transparent'}
+          icon={icon}
+          iconAfter={<ChevronDown size={14} opacity={0.6} />}
+        >
+          <Text fontSize="$2" color="$color12" numberOfLines={1} flex={1}>
+            {triggerLabel}
+          </Text>
+        </Button>
+      </Popover.Trigger>
+      <Popover.Content bordered elevate p="$1.5" minW={minWidth} bg="$color2" borderColor="$borderColor">
+        <YStack gap="$0.5" minW={minWidth} maxH={320} overflow="scroll">
+          <Row label={allLabel} active={value === null} onPress={() => pick(null)} />
+          {options.map((o) => (
+            <Row key={o.key} label={o.label} active={value === o.key} onPress={() => pick(o.key)} />
+          ))}
+        </YStack>
+      </Popover.Content>
+    </Popover>
+  )
+}
+
+function Row({ label, active, onPress }: { label: string; active: boolean; onPress: () => void }) {
+  return (
+    <XStack
+      items="center"
+      gap="$2"
+      px="$2.5"
+      py="$1.5"
+      rounded="$3"
+      cursor="pointer"
+      hoverStyle={{ bg: '$color4' }}
+      bg={active ? '$color4' : 'transparent'}
+      onPress={onPress}
+    >
+      <XStack width={14} items="center" justify="center">
+        {active ? <Check size={13} /> : null}
+      </XStack>
+      <Text fontSize="$2" color="$color12" flex={1} numberOfLines={1}>
+        {label}
+      </Text>
+    </XStack>
+  )
+}

package/src/product/SlideOver.tsx

@@ -0,0 +1,197 @@
+'use client'
+
+/**
+ * SlideOver — the ONE right-side (or left) slide-out overlay for the console.
+ *
+ * It is the single mechanism behind every off-canvas surface: the mobile nav
+ * drawer, the item DetailPane, and the account/settings menu. One definition, many
+ * mounts (DRY) — so every drawer slides, dims, traps, and closes identically.
+ *
+ * Smoothness is CSS-transform driven (never a JS layout branch): the panel is
+ * ALWAYS mounted and toggles `translateX(0) ↔ translateX(±100%)` via the shared
+ * `.hz-slide` class, and the backdrop cross-fades via `.hz-fade`. Because it never
+ * unmounts, the EXIT animates too (a `Dialog` that unmounts on close cannot). Both
+ * classes are reduced-motion-aware in `globals.css`, so the whole thing snaps
+ * instantly for users who ask for that — no bespoke logic here.
+ *
+ * Responsive by construction: FULL-WIDTH (full-screen) below `lg`, a fixed-width
+ * pane at `lg+` (`size`). Uses `100dvh` so the mobile browser chrome never clips it.
+ *
+ * A11y: `role="dialog" aria-modal`, Escape to close, backdrop click to close, body
+ * scroll lock while open (ref-counted so stacked overlays don't fight), and focus
+ * moves into the panel on open and returns to the opener on close.
+ */
+import { useEffect, useRef, type ReactNode } from 'react'
+import { Button, ScrollView, Text, XStack, YStack } from '@hanzo/gui'
+import { X } from '@hanzogui/lucide-icons-2'
+
+import { asColor, type IconLike } from './color'
+
+/** The lg breakpoint (px) — matches the shell's one responsive threshold. */
+const LG = 1024
+
+// ── Body scroll lock, ref-counted so nested/stacked overlays don't clobber it ──
+let lockCount = 0
+let savedOverflow = ''
+function lockScroll() {
+  if (typeof document === 'undefined') return
+  if (lockCount === 0) {
+    savedOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+  }
+  lockCount++
+}
+function unlockScroll() {
+  if (typeof document === 'undefined') return
+  lockCount = Math.max(0, lockCount - 1)
+  if (lockCount === 0) document.body.style.overflow = savedOverflow
+}
+
+export type SlideOverProps = {
+  open: boolean
+  onClose: () => void
+  /** Which edge the panel slides from. Default right. */
+  side?: 'right' | 'left'
+  /** Panel width at lg+ (px). Below lg it is always full-screen. Default 420. */
+  size?: number
+  /** Optional header title — when set, SlideOver renders a header + a scroll body. */
+  title?: ReactNode
+  /** Optional header icon (tinted with `iconColor`). */
+  icon?: IconLike
+  iconColor?: string
+  /** Extra header content, right-aligned before the close button. */
+  headerRight?: ReactNode
+  /** Accessible label when no visible title is given. */
+  ariaLabel?: string
+  /** z-index for stacking (a pane opened over a drawer passes a higher value). */
+  zIndex?: number
+  children: ReactNode
+}
+
+export function SlideOver({
+  open,
+  onClose,
+  side = 'right',
+  size = 420,
+  title,
+  icon: Icon,
+  iconColor,
+  headerRight,
+  ariaLabel,
+  zIndex = 1000,
+  children,
+}: SlideOverProps) {
+  const panelRef = useRef<HTMLElement | null>(null)
+  const openerRef = useRef<Element | null>(null)
+
+  // Body scroll lock + focus management, driven by `open`.
+  useEffect(() => {
+    if (!open) return
+    openerRef.current = typeof document !== 'undefined' ? document.activeElement : null
+    lockScroll()
+    // Move focus into the panel (next frame so it is laid out + on-screen).
+    const t = window.setTimeout(() => {
+      const el = panelRef.current
+      if (el && typeof el.focus === 'function') el.focus()
+    }, 0)
+    return () => {
+      window.clearTimeout(t)
+      unlockScroll()
+      const opener = openerRef.current
+      if (opener && opener instanceof HTMLElement && typeof opener.focus === 'function') opener.focus()
+    }
+  }, [open])
+
+  // Escape closes.
+  useEffect(() => {
+    if (!open) return
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation()
+        onClose()
+      }
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [open, onClose])
+
+  const offscreen = side === 'right' ? 'translateX(100%)' : 'translateX(-100%)'
+  const edge = side === 'right' ? { r: 0 } : { l: 0 }
+
+  return (
+    <YStack
+      // Fixed to the viewport; overflow hidden so the off-screen panel (absolute
+      // child) is CLIPPED and never adds a horizontal scrollbar.
+      overflow="hidden"
+      pointerEvents={open ? 'auto' : 'none'}
+      aria-hidden={!open}
+      style={{ position: 'fixed', inset: 0, zIndex }}
+    >
+      {/* Backdrop — cross-fades; click to dismiss. */}
+      <YStack
+        position="absolute"
+        t={0}
+        l={0}
+        r={0}
+        b={0}
+        bg="rgba(0,0,0,0.55)"
+        className="hz-fade"
+        style={{ opacity: open ? 1 : 0 }}
+        onPress={onClose}
+      />
+
+      {/* Panel — slides in from the edge. Full-screen below lg, fixed width at lg+. */}
+      <YStack
+        // @ts-expect-error — web DOM ref; Gui forwards it to the underlying node.
+        ref={panelRef}
+        tabIndex={-1}
+        role="dialog"
+        aria-modal={open ? true : undefined}
+        aria-label={typeof title === 'string' ? title : ariaLabel}
+        position="absolute"
+        t={0}
+        b={0}
+        {...edge}
+        width="100%"
+        $lg={{ width: size, maxW: '100vw' }}
+        bg="$color1"
+        borderLeftWidth={side === 'right' ? 1 : 0}
+        borderRightWidth={side === 'left' ? 1 : 0}
+        borderColor="$borderColor"
+        className="hz-slide"
+        style={{ transform: open ? 'translateX(0)' : offscreen, height: '100dvh' }}
+      >
+        {title !== undefined ? (
+          <>
+            <XStack
+              items="center"
+              gap="$2.5"
+              px="$4"
+              height={56}
+              borderBottomWidth={1}
+              borderColor="$borderColor"
+            >
+              {Icon ? <Icon size={18} color={iconColor ? asColor(iconColor) : undefined} /> : null}
+              <Text flex={1} fontSize="$5" fontWeight="700" color="$color12" numberOfLines={1}>
+                {title}
+              </Text>
+              {headerRight}
+              <Button size="$2" chromeless icon={<X size={18} />} onPress={onClose} aria-label="Close" />
+            </XStack>
+            <ScrollView flex={1}>
+              <YStack flex={1} p="$4" gap="$3">
+                {children}
+              </YStack>
+            </ScrollView>
+          </>
+        ) : (
+          // Bare mode — the caller owns the full panel layout (e.g. the nav drawer
+          // renders its own header + scroll + footer).
+          children
+        )}
+      </YStack>
+    </YStack>
+  )
+}
+
+export { LG as SLIDEOVER_LG }

package/src/product/StatusTag.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+/**
+ * Status pill — maps a resource/cluster status string to a tone, one place.
+ *
+ * Provisioned things (managed resources, clusters) report free-form lifecycle
+ * strings; this normalizes them to green/yellow/red/neutral so every list reads
+ * the same. Style props use the v5 shorthand set.
+ */
+import { Text } from '@hanzo/gui'
+
+type Tone = 'green' | 'yellow' | 'red' | 'neutral'
+
+const toneOf = (status: string): Tone => {
+  const s = status.toLowerCase()
+  // Platform health verdicts map straight to a tone (the apps inventory reports
+  // green/yellow/red directly).
+  if (s === 'green') return 'green'
+  if (s === 'yellow') return 'yellow'
+  if (s === 'red') return 'red'
+  if (['ready', 'active', 'running', 'available', 'ok'].includes(s)) return 'green'
+  if (['creating', 'provisioning', 'pending', 'updating', 'attaching'].includes(s)) return 'yellow'
+  if (['error', 'failed', 'degraded', 'down'].includes(s)) return 'red'
+  return 'neutral'
+}
+
+// `as const` keeps the literal token types (not widened to `string`) so they
+// satisfy the GUI `bg`/`color` token unions.
+const TONE_BG = {
+  green: '$color5',
+  yellow: '$color4',
+  red: '$color4',
+  neutral: '$color3',
+} as const
+const TONE_FG = {
+  green: '$color12',
+  yellow: '$color12',
+  red: '$color12',
+  neutral: '$color11',
+} as const
+
+export function StatusTag({ status }: { status?: string }) {
+  const tone = toneOf(status ?? '')
+  return (
+    <Text fontSize="$1" px="$2" py="$1" rounded="$2" bg={TONE_BG[tone]} color={TONE_FG[tone]}>
+      {status || 'unknown'}
+    </Text>
+  )
+}

package/src/product/ThemeToggle.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+/**
+ * Theme toggle — flips the console between dark and light via next-theme. The
+ * provider already wires `NextThemeProvider` → `GuiProvider`, so setting the
+ * theme here re-themes the whole tree. Shows the action's target icon (a sun in
+ * dark mode, a moon in light mode).
+ */
+import { Button } from '@hanzo/gui'
+import { useThemeSetting } from '@hanzogui/next-theme'
+import { Moon, Sun } from '@hanzogui/lucide-icons-2'
+
+export function ThemeToggle() {
+  const { current, resolvedTheme, set } = useThemeSetting()
+  const isDark = (resolvedTheme ?? current ?? 'dark') !== 'light'
+  return (
+    <Button
+      size="$2"
+      chromeless
+      icon={isDark ? <Sun size={16} /> : <Moon size={16} />}
+      onPress={() => set(isDark ? 'light' : 'dark')}
+      aria-label={isDark ? 'Switch to light theme' : 'Switch to dark theme'}
+    />
+  )
+}

package/src/product/Toast.tsx

@@ -0,0 +1,166 @@
+'use client'
+
+/**
+ * Toast — the ONE feedback primitive. Every mutation reports through `useToast()`
+ * so success/failure looks and behaves the same everywhere. A single provider
+ * holds the queue and renders the viewport (portalled top-right); there is no
+ * per-call markup. Built from GUI primitives only.
+ *
+ * Mount `<ToastProvider>` once (the dashboard layout does). Call:
+ *   const toast = useToast()
+ *   toast.success('Created my-db')
+ *   toast.error(err instanceof ApiError ? err.message : 'Failed to create')
+ */
+import { createContext, useCallback, useContext, useEffect, useRef, useState, type ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+import { Button, Card, Text, XStack, YStack } from '@hanzo/gui'
+import { CircleCheck, CircleX, Info, X } from '@hanzogui/lucide-icons-2'
+
+export type ToastKind = 'success' | 'error' | 'info'
+
+export type ToastInput = {
+  title: string
+  description?: string
+  kind?: ToastKind
+  /** Auto-dismiss after this many ms; 0 keeps it until dismissed. */
+  durationMs?: number
+}
+
+type Toast = Required<Omit<ToastInput, 'description'>> & { id: number; description?: string }
+
+type ToastApi = {
+  toast: (t: ToastInput) => void
+  success: (title: string, description?: string) => void
+  error: (title: string, description?: string) => void
+  info: (title: string, description?: string) => void
+  dismiss: (id: number) => void
+}
+
+const ToastContext = createContext<ToastApi | null>(null)
+
+/** Theme-aware accent per kind (adapts to light/dark). */
+const ACCENT = {
+  success: '$green10',
+  error: '$red10',
+  info: '$color11',
+} as const
+
+const ICON: Record<ToastKind, typeof Info> = {
+  success: CircleCheck,
+  error: CircleX,
+  info: Info,
+}
+
+function ToastCard({ t, onClose }: { t: Toast; onClose: () => void }) {
+  const Icon = ICON[t.kind]
+  const accent = ACCENT[t.kind]
+  return (
+    <Card
+      width={360}
+      maxWidth="90%"
+      p="$3"
+      gap="$2"
+      bg="$color2"
+      borderWidth={1}
+      borderColor="$borderColor"
+      borderLeftWidth={3}
+      borderLeftColor={accent}
+      rounded="$4"
+      elevation="$2"
+    >
+      <XStack gap="$2.5" items="flex-start">
+        <YStack pt={1}>
+          <Icon size={18} color={accent} />
+        </YStack>
+        <YStack flex={1} gap="$1">
+          <Text fontSize="$3" fontWeight="700" color="$color12">
+            {t.title}
+          </Text>
+          {t.description ? (
+            <Text fontSize="$2" color="$color11">
+              {t.description}
+            </Text>
+          ) : null}
+        </YStack>
+        <Button size="$1" chromeless icon={<X size={14} />} onPress={onClose} aria-label="Dismiss" />
+      </XStack>
+    </Card>
+  )
+}
+
+/** Portalled, fixed top-right stack. Rendered only after mount (SSR-safe). */
+function ToastViewport({ toasts, dismiss }: { toasts: Toast[]; dismiss: (id: number) => void }) {
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => setMounted(true), [])
+  if (!mounted || typeof document === 'undefined') return null
+  return createPortal(
+    <div style={{ position: 'fixed', top: 16, right: 16, zIndex: 100000, pointerEvents: 'none' }}>
+      <YStack gap="$2" items="flex-end">
+        {toasts.map((t) => (
+          <YStack key={t.id} pointerEvents="auto">
+            <ToastCard t={t} onClose={() => dismiss(t.id)} />
+          </YStack>
+        ))}
+      </YStack>
+    </div>,
+    document.body,
+  )
+}
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([])
+  const timers = useRef(new Map<number, ReturnType<typeof setTimeout>>())
+  const seq = useRef(0)
+
+  const dismiss = useCallback((id: number) => {
+    setToasts((ts) => ts.filter((t) => t.id !== id))
+    const timer = timers.current.get(id)
+    if (timer) {
+      clearTimeout(timer)
+      timers.current.delete(id)
+    }
+  }, [])
+
+  const toast = useCallback(
+    (input: ToastInput) => {
+      const id = ++seq.current
+      const kind = input.kind ?? 'info'
+      const durationMs = input.durationMs ?? (kind === 'error' ? 6000 : 3500)
+      setToasts((ts) => [...ts, { id, kind, title: input.title, description: input.description, durationMs }])
+      if (durationMs > 0) {
+        timers.current.set(
+          id,
+          setTimeout(() => dismiss(id), durationMs),
+        )
+      }
+    },
+    [dismiss],
+  )
+
+  // Clear any pending timers on unmount.
+  useEffect(() => {
+    const map = timers.current
+    return () => map.forEach((t) => clearTimeout(t))
+  }, [])
+
+  const api: ToastApi = {
+    toast,
+    success: (title, description) => toast({ title, description, kind: 'success' }),
+    error: (title, description) => toast({ title, description, kind: 'error' }),
+    info: (title, description) => toast({ title, description, kind: 'info' }),
+    dismiss,
+  }
+
+  return (
+    <ToastContext.Provider value={api}>
+      {children}
+      <ToastViewport toasts={toasts} dismiss={dismiss} />
+    </ToastContext.Provider>
+  )
+}
+
+export function useToast(): ToastApi {
+  const ctx = useContext(ToastContext)
+  if (!ctx) throw new Error('useToast must be used within <ToastProvider>')
+  return ctx
+}

package/src/product/color.ts

@@ -0,0 +1,17 @@
+import type { ComponentType } from 'react'
+import type { GetThemeValueForKey } from '@hanzo/gui'
+
+/**
+ * Bridge between raw CSS colors (product hex accents) and Gui's typed `color`
+ * prop. Gui types `color` as a theme-token template (`$color12`, …), but ANY CSS
+ * color is valid at runtime — so tinting an icon with a product hex needs one
+ * sanctioned cast, in ONE place, rather than `as any` scattered around.
+ */
+export type IconColor = GetThemeValueForKey<'color'>
+
+/** Cast a raw CSS color (e.g. `#5E6AD2`) to Gui's `color` prop type. */
+export const asColor = (hex: string): IconColor => hex as unknown as IconColor
+
+/** A lucide/Gui icon component that accepts a size + a (token-or-cast) color —
+ *  the shape the shell passes around for product/nav icons. */
+export type IconLike = ComponentType<{ size?: number; color?: IconColor }>

package/src/product/combobox/filter.test.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest'
+
+import { filterOptions, isKnownOption, type ComboOption } from './filter'
+
+const opts: ComboOption[] = [
+  { value: 'zen-omni', label: 'Zen Omni', hint: 'hanzo' },
+  { value: 'gpt-4o-mini', label: 'GPT-4o mini', hint: 'openai' },
+  { value: 'claude-sonnet-4-5', hint: 'anthropic' },
+]
+
+describe('filterOptions', () => {
+  it('returns every option for an empty / whitespace query', () => {
+    expect(filterOptions(opts, '')).toHaveLength(3)
+    expect(filterOptions(opts, '   ')).toHaveLength(3)
+  })
+
+  it('matches on value (case-insensitive substring)', () => {
+    expect(filterOptions(opts, 'ZEN').map((o) => o.value)).toEqual(['zen-omni'])
+    expect(filterOptions(opts, 'sonnet').map((o) => o.value)).toEqual(['claude-sonnet-4-5'])
+  })
+
+  it('matches on label', () => {
+    expect(filterOptions(opts, 'GPT-4o').map((o) => o.value)).toEqual(['gpt-4o-mini'])
+  })
+
+  it('matches on hint (the provider)', () => {
+    expect(filterOptions(opts, 'anthropic').map((o) => o.value)).toEqual(['claude-sonnet-4-5'])
+    expect(filterOptions(opts, 'openai').map((o) => o.value)).toEqual(['gpt-4o-mini'])
+  })
+
+  it('returns nothing when nothing matches (the typed value is still usable by the caller)', () => {
+    expect(filterOptions(opts, 'llama')).toEqual([])
+  })
+
+  it('treats the query as a LITERAL string, never a regex (no ReDoS / injection)', () => {
+    // A regex-special query must match literally (or not at all) — never be compiled.
+    expect(filterOptions(opts, '.*')).toEqual([]) // no option literally contains ".*"
+    expect(filterOptions(opts, '(')).toEqual([]) // an unbalanced paren would throw if compiled
+    expect(filterOptions(opts, '[a-z')).toEqual([]) // an invalid char class would throw if compiled
+    // A literal hyphen (regex-benign but proves substring semantics):
+    expect(filterOptions(opts, '4o-mini').map((o) => o.value)).toEqual(['gpt-4o-mini'])
+  })
+})
+
+describe('isKnownOption', () => {
+  it('is true only for an exact value match (case-sensitive)', () => {
+    expect(isKnownOption(opts, 'zen-omni')).toBe(true)
+    expect(isKnownOption(opts, 'ZEN-OMNI')).toBe(false)
+    expect(isKnownOption(opts, 'custom-model')).toBe(false)
+  })
+})

package/src/product/combobox/filter.ts

@@ -0,0 +1,39 @@
+/**
+ * Combobox option filtering — pure, unit-tested.
+ *
+ * The ONE matcher the ComboBox uses to narrow a live option list against typed
+ * text. Matching is a LITERAL, case-insensitive substring over the option's
+ * value + label + hint — NEVER a compiled RegExp of user input (that would be a
+ * ReDoS / injection surface; the whole codebase filters with literal `includes`,
+ * e.g. marketplace/logic + filterOrgs). Kept dependency-free so it lifts into
+ * `@hanzo/ui` alongside the ComboBox.
+ */
+
+/** One option in a combobox list. `value` is what gets committed; label/hint are display. */
+export type ComboOption = {
+  /** The value committed to the field when this option is chosen. */
+  value: string
+  /** Display label (defaults to `value`). */
+  label?: string
+  /** Optional secondary text (e.g. a provider, a description) — also searched. */
+  hint?: string
+}
+
+/** The searchable haystack for one option (value + label + hint), lowercased. */
+const hay = (o: ComboOption): string => `${o.value} ${o.label ?? ''} ${o.hint ?? ''}`.toLowerCase()
+
+/**
+ * Filter `options` by `query` — a literal, case-insensitive substring over
+ * value/label/hint. An empty/whitespace query returns every option (no filter).
+ * PURE. The input is treated as a plain string, never a pattern.
+ */
+export function filterOptions(options: ComboOption[], query: string): ComboOption[] {
+  const q = query.trim().toLowerCase()
+  if (!q) return options
+  return options.filter((o) => hay(o).includes(q))
+}
+
+/** True iff `value` exactly matches an option's `value` (case-sensitive). */
+export function isKnownOption(options: ComboOption[], value: string): boolean {
+  return options.some((o) => o.value === value)
+}