@hanzo/ui 5.7.1 → 8.0.1

package/src/product/ComboBox.tsx

@@ -0,0 +1,147 @@
+'use client'
+
+/**
+ * ComboBox — a typeable select: a text input the user can type any value into,
+ * PLUS a popover of LIVE options (filtered by what's typed) they can pick from.
+ * The value is always exactly the input text, so a custom id is inherently
+ * supported — selecting an option just fills the input. This is the ONE way the
+ * console offers "pick from a live list OR type your own" (the model field, the
+ * tool field). Prop-driven + self-contained (options/loading/error injected by the
+ * caller), so it is orthogonal to the data source and lifts into `@hanzo/ui`.
+ *
+ * Idiom: the same @hanzo/gui Popover shell as OrgSwitcher/SelectMenu (bordered,
+ * elevate, `$color2`). Options render in a portal above the DetailPane SlideOver.
+ */
+import { useMemo, useState } from 'react'
+import { Button, Input, Popover, Spinner, Text, XStack, YStack } from '@hanzo/gui'
+import { Check, ChevronDown, RefreshCw } from '@hanzogui/lucide-icons-2'
+
+import { filterOptions, type ComboOption } from './combobox/filter'
+
+export type { ComboOption } from './combobox/filter'
+
+export function ComboBox({
+  value,
+  onChange,
+  options,
+  loading = false,
+  error = null,
+  onRetry,
+  placeholder,
+  disabled,
+  emptyText = 'No matches — press to use what you typed.',
+  minWidth = 240,
+}: {
+  value: string
+  onChange: (v: string) => void
+  /** The live option list. Filtered against the typed text. */
+  options: ComboOption[]
+  /** True while the caller is loading the option list (shows a spinner row). */
+  loading?: boolean
+  /** A human message when the option list failed to load (list still typeable). */
+  error?: string | null
+  /** Retry the option load (shown next to the error). */
+  onRetry?: () => void
+  placeholder?: string
+  disabled?: boolean
+  /** Row shown when the filter matches nothing (the typed value is still usable). */
+  emptyText?: string
+  minWidth?: number
+}) {
+  const [open, setOpen] = useState(false)
+  const filtered = useMemo(() => filterOptions(options, value), [options, value])
+
+  const pick = (v: string) => {
+    onChange(v)
+    setOpen(false)
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen} placement="bottom-start" allowFlip>
+      <XStack items="center" gap="$2" minW={minWidth}>
+        <Input
+          flex={1}
+          value={value}
+          onChangeText={(v) => {
+            onChange(v)
+            if (!open) setOpen(true)
+          }}
+          onFocus={() => setOpen(true)}
+          disabled={disabled}
+          placeholder={placeholder}
+          autoCapitalize="none"
+        />
+        <Popover.Trigger asChild>
+          <Button
+            size="$2"
+            chromeless
+            disabled={disabled}
+            icon={<ChevronDown size={16} opacity={0.7} />}
+            onPress={() => setOpen((o) => !o)}
+            aria-label="Show options"
+          />
+        </Popover.Trigger>
+      </XStack>
+
+      <Popover.Content bordered elevate p="$1.5" minW={minWidth} bg="$color2" borderColor="$borderColor">
+        <YStack gap="$0.5" minW={minWidth} maxH={300} overflow="scroll">
+          {loading ? (
+            <XStack items="center" gap="$2" px="$2.5" py="$2">
+              <Spinner size="small" color="$color11" />
+              <Text fontSize="$2" color="$color10">
+                Loading options…
+              </Text>
+            </XStack>
+          ) : error ? (
+            <XStack items="center" gap="$2" px="$2.5" py="$2">
+              <Text fontSize="$2" color="$color10" flex={1} numberOfLines={2}>
+                {error}
+              </Text>
+              {onRetry ? (
+                <Button size="$1" chromeless icon={<RefreshCw size={12} />} onPress={onRetry} aria-label="Retry" />
+              ) : null}
+            </XStack>
+          ) : filtered.length === 0 ? (
+            <Text fontSize="$2" color="$color10" px="$2.5" py="$2">
+              {emptyText}
+            </Text>
+          ) : (
+            filtered.map((o) => (
+              <Row key={o.value} option={o} active={o.value === value} onPress={() => pick(o.value)} />
+            ))
+          )}
+        </YStack>
+      </Popover.Content>
+    </Popover>
+  )
+}
+
+function Row({ option, active, onPress }: { option: ComboOption; 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>
+      <YStack flex={1} minW={0}>
+        <Text fontSize="$2" color="$color12" numberOfLines={1}>
+          {option.label ?? option.value}
+        </Text>
+        {option.hint ? (
+          <Text fontSize="$1" color="$color10" numberOfLines={1}>
+            {option.hint}
+          </Text>
+        ) : null}
+      </YStack>
+    </XStack>
+  )
+}

package/src/product/DataTable.tsx

@@ -0,0 +1,99 @@
+'use client'
+
+/**
+ * Generic data table — the shared list primitive for every product module.
+ *
+ * Rows are typed `<T>`; columns declare a key, header, and optional cell
+ * renderer. Built on Hanzo GUI Stacks (shorthand style props per the v5 config)
+ * so it adapts across platforms. Loading and empty states are first-class.
+ */
+import type { ReactNode } from 'react'
+import { Spinner, Text, XStack, YStack } from '@hanzo/gui'
+
+export type Column<T> = {
+  key: string
+  header: string
+  /** Cell renderer; defaults to `String(row[key])`. */
+  render?: (row: T) => ReactNode
+  /** Fixed width (px) for the column; otherwise flexes. */
+  width?: number
+}
+
+export function DataTable<T>({
+  columns,
+  rows,
+  loading,
+  empty = 'Nothing here yet.',
+  rowKey,
+  onRowPress,
+}: {
+  columns: Column<T>[]
+  rows: T[]
+  loading?: boolean
+  empty?: string
+  rowKey: (row: T) => string
+  onRowPress?: (row: T) => void
+}) {
+  if (loading) {
+    return (
+      <XStack p="$6" justify="center">
+        <Spinner size="large" color="$color11" />
+      </XStack>
+    )
+  }
+
+  if (rows.length === 0) {
+    return (
+      <YStack p="$6" items="center" borderWidth={1} borderColor="$borderColor" rounded="$4">
+        <Text color="$color11">{empty}</Text>
+      </YStack>
+    )
+  }
+
+  return (
+    <YStack borderWidth={1} borderColor="$borderColor" rounded="$4" overflow="hidden">
+      <XStack bg="$color2" py="$2.5" px="$3" gap="$3">
+        {columns.map((c) => (
+          <Text
+            key={c.key}
+            width={c.width}
+            flex={c.width ? undefined : 1}
+            fontSize="$2"
+            fontWeight="700"
+            color="$color11"
+          >
+            {c.header}
+          </Text>
+        ))}
+      </XStack>
+      <YStack>
+        {rows.map((row) => (
+          <XStack
+            key={rowKey(row)}
+            py="$2.5"
+            px="$3"
+            gap="$3"
+            borderTopWidth={1}
+            borderColor="$borderColor"
+            items="center"
+            hoverStyle={onRowPress ? { bg: '$color2' } : undefined}
+            cursor={onRowPress ? 'pointer' : undefined}
+            onPress={onRowPress ? () => onRowPress(row) : undefined}
+          >
+            {columns.map((c) => (
+              <YStack key={c.key} width={c.width} flex={c.width ? undefined : 1}>
+                {c.render ? (
+                  c.render(row)
+                ) : (
+                  <Text fontSize="$3" numberOfLines={1}>
+                    {String((row as Record<string, unknown>)[c.key] ?? '')}
+                  </Text>
+                )}
+              </YStack>
+            ))}
+          </XStack>
+        ))}
+      </YStack>
+    </YStack>
+  )
+}

package/src/product/Donut.tsx

@@ -0,0 +1,83 @@
+'use client'
+
+/**
+ * Donut — a tiny dependency-free SVG ring for a categorical breakdown
+ * (e.g. machines by status). Standard library first: no chart dependency for a
+ * single ring. It renders ONLY the real segments it is given and returns `null`
+ * when the total is zero, so the caller shows an honest empty state instead of an
+ * empty circle. Purely presentational — all values come from the caller.
+ */
+export type DonutSegment = { label: string; value: number; color: string }
+
+export function Donut({
+  segments,
+  size = 160,
+  thickness = 18,
+  centerValue,
+  centerLabel,
+  trackColor = '#2a2d2e',
+  valueColor = '#ecedee',
+  labelColor = '#9ba1a6',
+}: {
+  segments: DonutSegment[]
+  size?: number
+  thickness?: number
+  /** Big number in the middle (e.g. total). */
+  centerValue?: string
+  /** Caption under the center value. */
+  centerLabel?: string
+  /** Unfilled-ring color (explicit hex so it never depends on theme var names). */
+  trackColor?: string
+  valueColor?: string
+  labelColor?: string
+}) {
+  const total = segments.reduce((n, s) => n + Math.max(0, s.value), 0)
+  if (total <= 0) return null
+
+  const r = (size - thickness) / 2
+  const cx = size / 2
+  const cy = size / 2
+  const circ = 2 * Math.PI * r
+
+  let offset = 0
+  const arcs = segments
+    .filter((s) => s.value > 0)
+    .map((s) => {
+      const frac = s.value / total
+      const dash = frac * circ
+      const node = (
+        <circle
+          key={s.label}
+          cx={cx}
+          cy={cy}
+          r={r}
+          fill="none"
+          stroke={s.color}
+          strokeWidth={thickness}
+          strokeDasharray={`${dash} ${circ - dash}`}
+          strokeDashoffset={-offset}
+        />
+      )
+      offset += dash
+      return node
+    })
+
+  return (
+    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} role="img" aria-label="Donut chart">
+      {/* track */}
+      <circle cx={cx} cy={cy} r={r} fill="none" stroke={trackColor} strokeWidth={thickness} />
+      {/* segments, drawn from 12 o'clock */}
+      <g transform={`rotate(-90 ${cx} ${cy})`}>{arcs}</g>
+      {centerValue ? (
+        <text x={cx} y={cy - 2} textAnchor="middle" fontSize={size * 0.2} fontWeight="800" fill={valueColor}>
+          {centerValue}
+        </text>
+      ) : null}
+      {centerLabel ? (
+        <text x={cx} y={cy + size * 0.13} textAnchor="middle" fontSize={size * 0.08} fill={labelColor}>
+          {centerLabel}
+        </text>
+      ) : null}
+    </svg>
+  )
+}

package/src/product/EmptyState.tsx

@@ -0,0 +1,129 @@
+'use client'
+
+/**
+ * Rich empty state — the ONE way the console turns a real, honest "nothing here
+ * yet" into a helpful onboarding moment (DigitalOcean / Vercel class) instead of
+ * a dead screen.
+ *
+ * It is NOT a fabricated-data fallback: callers render it only when a load
+ * genuinely succeeded with zero rows (or a resource has no surface yet). It shows
+ * the product icon, a one-line "what this is", a couple of guidance bullets, a
+ * single primary call-to-action (Deploy / Create / Connect …) and an optional
+ * secondary link (Docs / CLI). Orthogonal to `BackendStateCard` (failures) and
+ * `DataTable`'s thin inline empty (in-table) — this is the full-bleed first-run
+ * surface a module shows in place of its table.
+ */
+import type { ReactElement, ReactNode } from 'react'
+import { Button, Card, Text, XStack, YStack } from '@hanzo/gui'
+import { ArrowRight, Check, ExternalLink } from '@hanzogui/lucide-icons-2'
+
+import type { IconLike } from './color'
+import { PrimaryButton } from './PrimaryButton'
+
+/** A single call-to-action — primary (filled) or a secondary/external link. */
+export type EmptyAction = {
+  label: string
+  /** In-app navigation / handler. */
+  onPress?: () => void
+  /** External URL — opens in a new tab with an external-link affordance. */
+  href?: string
+  icon?: ReactElement
+}
+
+/** Open an external URL in a new tab (no-opener), guarded for SSR. */
+function openHref(href: string): void {
+  if (typeof window !== 'undefined') window.open(href, '_blank', 'noopener')
+}
+
+export function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  bullets,
+  primary,
+  secondary,
+}: {
+  /** Product/section icon — any lucide/Gui icon component (size + optional color). */
+  icon: IconLike
+  title: string
+  description: string
+  /** Optional "here's how to get started" guidance bullets. */
+  bullets?: string[]
+  /** The single high-emphasis action (Deploy / Create / Connect). */
+  primary?: EmptyAction
+  /** An optional lower-emphasis action (Docs / CLI / Learn more). */
+  secondary?: EmptyAction
+}) {
+  return (
+    <Card
+      borderWidth={1}
+      borderColor="$borderColor"
+      borderStyle="dashed"
+      p="$6"
+      gap="$4"
+      items="center"
+      maxWidth={640}
+      self="center"
+      width="100%"
+    >
+      <YStack
+        width={48}
+        height={48}
+        items="center"
+        justify="center"
+        rounded="$4"
+        bg="$color3"
+      >
+        <Icon size={24} />
+      </YStack>
+
+      <YStack gap="$2" items="center" maxW={480}>
+        <Text fontSize="$6" fontWeight="800" text="center">
+          {title}
+        </Text>
+        <Text fontSize="$3" color="$color11" text="center">
+          {description}
+        </Text>
+      </YStack>
+
+      {bullets && bullets.length ? (
+        <YStack gap="$2" self="stretch" maxW={420} mx="auto">
+          {bullets.map((b) => (
+            <XStack key={b} gap="$2" items="flex-start">
+              <YStack pt="$1">
+                <Check size={14} color="$color10" />
+              </YStack>
+              <Text fontSize="$3" color="$color11" flex={1}>
+                {b}
+              </Text>
+            </XStack>
+          ))}
+        </YStack>
+      ) : null}
+
+      {primary || secondary ? (
+        <XStack gap="$2" items="center" flexWrap="wrap" justify="center">
+          {primary ? (
+            <PrimaryButton
+              icon={primary.icon}
+              iconAfter={primary.href ? <ExternalLink size={15} /> : <ArrowRight size={15} />}
+              onPress={() => (primary.href ? openHref(primary.href) : primary.onPress?.())}
+            >
+              {primary.label}
+            </PrimaryButton>
+          ) : null}
+          {secondary ? (
+            <Button
+              chromeless
+              icon={secondary.icon}
+              iconAfter={secondary.href ? <ExternalLink size={14} /> : undefined}
+              onPress={() => (secondary.href ? openHref(secondary.href) : secondary.onPress?.())}
+            >
+              {secondary.label}
+            </Button>
+          ) : null}
+        </XStack>
+      ) : null}
+    </Card>
+  )
+}

package/src/product/FadeIn.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+/**
+ * FadeIn — the ONE entrance animation for the console.
+ *
+ * A thin wrapper that applies the shared `.hz-fade-up` keyframe (defined once in
+ * globals.css) plus an optional stagger delay, so sections and cards rise in the
+ * way the hanzo.ai marketing surface does. Framework-free (no animation driver,
+ * no JS observers) so it works under static export and honors
+ * `prefers-reduced-motion` (handled in the CSS). Pass `index` to stagger a list
+ * (delay = index * step), or `delayMs` for an explicit delay.
+ */
+import type { CSSProperties, ReactNode } from 'react'
+
+export function FadeIn({
+  children,
+  index = 0,
+  step = 50,
+  delayMs,
+  style,
+}: {
+  children: ReactNode
+  /** Position in a list — staggers the entrance by `index * step` ms. */
+  index?: number
+  /** Per-index stagger in ms (default 50). */
+  step?: number
+  /** Explicit delay in ms; overrides the index-based stagger. */
+  delayMs?: number
+  /** Extra styles for the wrapper (e.g. layout/centering). */
+  style?: CSSProperties
+}) {
+  const delay = delayMs ?? index * step
+  return (
+    <div className="hz-fade-up" style={{ animationDelay: `${delay}ms`, ...style }}>
+      {children}
+    </div>
+  )
+}

package/src/product/Field.tsx

@@ -0,0 +1,160 @@
+'use client'
+
+/**
+ * Form field primitives — labeled rows over Hanzo GUI inputs.
+ *
+ * One way to render a labeled control. Every editor field goes through these, so
+ * spacing, disabled styling, and the label column stay consistent. Style props
+ * use the v5 shorthand set (p/px/items/justify/...).
+ */
+import type { ReactNode } from 'react'
+import {
+  Input,
+  Label,
+  Select,
+  Switch,
+  TextArea,
+  Slider,
+  Text,
+  XStack,
+  YStack,
+} from '@hanzo/gui'
+import { ChevronDown } from '@hanzogui/lucide-icons-2'
+
+/** Labeled row: fixed label column + flexing control. */
+export function FieldRow({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <XStack gap="$3" items="flex-start" flexWrap="wrap">
+      <Label width={180} pt="$2" color="$color11" fontSize="$3">
+        {label}
+      </Label>
+      <YStack flex={1} minW={240}>
+        {children}
+      </YStack>
+    </XStack>
+  )
+}
+
+export function FieldText({
+  value,
+  onChange,
+  disabled,
+  secure,
+  placeholder,
+}: {
+  value: string
+  onChange: (v: string) => void
+  disabled?: boolean
+  secure?: boolean
+  placeholder?: string
+}) {
+  return (
+    <Input
+      value={value}
+      onChangeText={onChange}
+      disabled={disabled}
+      secureTextEntry={secure}
+      placeholder={placeholder}
+      autoCapitalize="none"
+    />
+  )
+}
+
+export function FieldTextArea({
+  value,
+  onChange,
+  disabled,
+  rows = 6,
+}: {
+  value: string
+  onChange: (v: string) => void
+  disabled?: boolean
+  rows?: number
+}) {
+  return (
+    <TextArea value={value} onChangeText={onChange} disabled={disabled} numberOfLines={rows} />
+  )
+}
+
+export function FieldSwitch({
+  checked,
+  onChange,
+  disabled,
+}: {
+  checked: boolean
+  onChange: (v: boolean) => void
+  disabled?: boolean
+}) {
+  return (
+    <Switch checked={checked} onCheckedChange={onChange} disabled={disabled} size="$3">
+      <Switch.Thumb />
+    </Switch>
+  )
+}
+
+export function FieldSelect({
+  value,
+  options,
+  onChange,
+  disabled,
+}: {
+  value: string
+  options: string[]
+  onChange: (v: string) => void
+  disabled?: boolean
+}) {
+  return (
+    <Select value={value} onValueChange={onChange} disablePreventBodyScroll native>
+      <Select.Trigger disabled={disabled} iconAfter={<ChevronDown size={16} />}>
+        <Select.Value placeholder="Select…" />
+      </Select.Trigger>
+      <Select.Content>
+        <Select.Viewport>
+          {options.map((opt, i) => (
+            <Select.Item key={opt} index={i} value={opt}>
+              <Select.ItemText>{opt}</Select.ItemText>
+            </Select.Item>
+          ))}
+        </Select.Viewport>
+      </Select.Content>
+    </Select>
+  )
+}
+
+export function FieldSlider({
+  value,
+  min,
+  max,
+  step,
+  onChange,
+  disabled,
+}: {
+  value: number
+  min: number
+  max: number
+  step: number
+  onChange: (v: number) => void
+  disabled?: boolean
+}) {
+  return (
+    <XStack gap="$3" items="center">
+      <Text width={56} fontSize="$3" color="$color11">
+        {value}
+      </Text>
+      <Slider
+        flex={1}
+        min={min}
+        max={max}
+        step={step}
+        value={[value]}
+        onValueChange={(v) => onChange(v[0] ?? min)}
+        disabled={disabled}
+      >
+        <Slider.Track>
+          <Slider.TrackActive />
+        </Slider.Track>
+        <Slider.Thumb index={0} circular />
+      </Slider>
+    </XStack>
+  )
+}

package/src/product/HanzoMark.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+/**
+ * The Hanzo "H" mark — the canonical brand glyph (same geometry as app/icon.svg).
+ *
+ * Rendered as inline SVG with `fill: currentColor`, so it inherits the
+ * surrounding text color and adapts to the dark/light theme with no per-theme
+ * asset. ONE source for the mark across the chrome (sidebar + header).
+ */
+export function HanzoMark({ size = 22, color = 'currentColor' }: { size?: number; color?: string }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 67 67"
+      role="img"
+      aria-label="Hanzo"
+      fill={color}
+      style={{ display: 'block', flexShrink: 0 }}
+    >
+      <path d="M22.21 67V44.6369H0V67H22.21Z" />
+      <path d="M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z" />
+      <path d="M22.21 0H0V22.3184H22.21V0Z" />
+      <path d="M66.7198 0H44.5098V22.3184H66.7198V0Z" />
+      <path d="M66.7198 67V44.6369H44.5098V67H66.7198Z" />
+    </svg>
+  )
+}