@hanzo/ui 8.0.7 → 8.0.11

package/src/product/Toast.tsx

@@ -1,166 +0,0 @@
-'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

@@ -1,17 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,39 +0,0 @@
-/**
- * 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)
-}

package/src/product/index.ts

@@ -1,76 +0,0 @@
-// @hanzo/ui/product — the product/app component layer on @hanzo/gui.
-//
-// Charts, metrics, page headers, status tags, rich empty states, combobox,
-// slide-over, toasts, drag-reorder, labeled field rows, provider/product marks,
-// theme toggle. Presentational + host-agnostic: data and effects are INJECTED as
-// props — nothing here imports an app's `~/lib`. Cross-platform (web + native +
-// desktop) because it builds only on @hanzo/gui primitives. Clean-room.
-//
-// Single collision-free namespace: where a name exists in two files the canonical
-// (Charts) keeps the name and the variant is aliased, so NOTHING is dropped.
-
-// Charts — the canonical Sparkline + Donut live here (dependency-free inline SVG:
-// hover tooltips, axis ticks, honest null under 2 real points).
-export * from './Charts'
-
-// Metric — resource-console stat tiles/panels/bars. Its own near-identical
-// Sparkline is preserved as `MetricSparkline` (zero loss; see CONSOLIDATION.md
-// for the eventual single-Sparkline dedup).
-export {
-  SERIES,
-  colorForIndex,
-  utilColor,
-  Sparkline as MetricSparkline,
-  MiniBars,
-  UtilBar,
-  LegendDot,
-  MetricCard,
-  HintButton,
-  Panel,
-} from './Metric'
-
-// Standalone dependency-free ring — aliased to avoid the Charts.Donut clash.
-export { Donut as DonutRing, type DonutSegment } from './Donut'
-
-// ComboBox — the typeable select. `ComboOption` comes from the ONE pure filter
-// module (ReDoS-safe literal substring), so export the component here and the
-// option type + matchers from there.
-export { ComboBox } from './ComboBox'
-export * from './combobox/filter'
-
-// The shared shell — brand mark, org scope + switcher, app header (the
-// console's org-scope contract + switcher hoisted here; hanzoai/ui#36).
-// `surfaces.data` is the ONE canonical cross-surface list every launcher consumes.
-export * from './surfaces.data'
-export * from './AppHeader'
-export * from './BrandMark'
-export * from './OrgSwitcher'
-export * from './scope'
-
-// Menu — the ONE menu system: portal-theme-safe DropdownMenu (click) + ContextMenu
-// (right-click), both rendering the SAME item spec (MenuPanel/MenuItemView) so every
-// menu across the fleet is pixel-identical. SelectMenu/ComboBox share the same spec.
-export * from './menu'
-
-// The rest — every exported name below is unique across the layer.
-export * from './DataTable'
-export * from './EmptyState'
-export * from './FadeIn'
-export * from './Field'
-export * from './HanzoMark'
-export * from './PageHeader'
-export * from './PrimaryButton'
-export * from './ProductIcon'
-export * from './ProviderLogo'
-export * from './Reorder'
-export * from './SelectMenu'
-export * from './SlideOver'
-export * from './StatusTag'
-export * from './ThemeToggle'
-export { ThemeToggleNext } from './ThemeToggleNext'
-export * from './Toast'
-export * from './color'
-
-// Usage — the canonical AI-usage surface (totals, chart, spend-by-model, activity)
-// now lives in ONE home: `@hanzo/usage/panel` (<UsagePanel>). The former meter/card/
-// dashboard kit here was orphaned (zero consumers) and folded into it.

package/src/product/menu/ContextMenu.tsx

@@ -1,114 +0,0 @@
-'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

@@ -1,76 +0,0 @@
-'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

@@ -1,15 +0,0 @@
-// @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'