@hanzo/ui 8.0.6 → 8.0.8

package/src/product/Metric.tsx

@@ -1,253 +0,0 @@
-'use client'
-
-/**
- * Console metric primitives — the ONE shared set of stat tiles, panels, legend
- * rows, util bars, and "real action or honest-disabled" buttons that every
- * resource console (GPUs, Kubernetes, Containers, Training, Tasks) renders.
- *
- * These were first written for the GPU surface; promoted here so a sibling
- * product never reaches into `gpus/` for shell chrome (separation of concerns).
- * `gpus/charts.tsx` now re-exports them, so there is exactly one definition.
- *
- * Honest by construction: a `MetricCard` shows the pre-formatted `value` the
- * caller passes (an absent metric is an em-dash, never a fabricated number); a
- * `Sparkline`/`MiniBars` with no real series renders nothing; a `HintButton`
- * with no `onPress` is visibly disabled with a tooltip saying WHY. Inline SVG is
- * the house pattern (see ui/Loader, ui/HanzoMark); style props use the v5
- * shorthand set.
- */
-import type { ReactElement, ReactNode } from 'react'
-import { Button, Card, Text, XStack, YStack } from '@hanzo/gui'
-
-/** Distinct, theme-neutral series colors (mid-saturation reads on dark + light). */
-export const SERIES = ['#6ea8fe', '#7ee787', '#f0a868', '#c792ea', '#56d4c4', '#e879a6', '#d6c15a', '#8b9bb4'] as const
-export const colorForIndex = (i: number): string => SERIES[i % SERIES.length]
-const TRACK = 'rgba(128,128,128,0.18)'
-
-/** Tone for a utilization/temperature value (green calm → red hot). */
-export function utilColor(pct: number): string {
-  if (pct >= 90) return '#e5534b'
-  if (pct >= 70) return '#f0a868'
-  return '#7ee787'
-}
-
-/**
- * A single-series sparkline over real points. Renders nothing meaningful for <2
- * points (the caller shows `—` instead). The y-range is the data's own min/max.
- */
-export function Sparkline({
-  points,
-  width = 104,
-  height = 30,
-  color = SERIES[0],
-}: {
-  points: number[]
-  width?: number
-  height?: number
-  color?: string
-}): ReactElement | null {
-  if (!points || points.length < 2) return null
-  const min = Math.min(...points)
-  const max = Math.max(...points)
-  const span = max - min || 1
-  const stepX = width / (points.length - 1)
-  const y = (v: number) => height - 2 - ((v - min) / span) * (height - 4)
-  const d = points.map((p, i) => `${i === 0 ? 'M' : 'L'}${(i * stepX).toFixed(1)},${y(p).toFixed(1)}`).join(' ')
-  return (
-    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} role="img" aria-label="trend">
-      <path d={d} fill="none" stroke={color} strokeWidth={1.5} strokeLinejoin="round" strokeLinecap="round" />
-    </svg>
-  )
-}
-
-/** A small vertical-bar chart (e.g. cost per day). One bar per real datum. */
-export function MiniBars({
-  bars,
-  width = 320,
-  height = 96,
-  color = SERIES[0],
-}: {
-  bars: { label: string; value: number }[]
-  width?: number
-  height?: number
-  color?: string
-}): ReactElement | null {
-  if (!bars.length) return null
-  const max = Math.max(...bars.map((b) => b.value), 1)
-  const gap = 4
-  const bw = (width - gap * (bars.length - 1)) / bars.length
-  return (
-    <svg width="100%" height={height} viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none" role="img" aria-label="bars">
-      {bars.map((b, i) => {
-        const h = Math.max(1, (b.value / max) * (height - 2))
-        return (
-          <rect key={b.label + i} x={i * (bw + gap)} y={height - h} width={bw} height={h} rx={2} fill={color} opacity={0.85}>
-            <title>{`${b.label}: ${b.value}`}</title>
-          </rect>
-        )
-      })}
-    </svg>
-  )
-}
-
-/**
- * A thin horizontal bar (0–100). By default the fill tones by value (green→red,
- * for utilization/temperature). Pass a fixed `color` for a neutral meter like
- * training PROGRESS, where a high value is good, not "hot".
- */
-export function UtilBar({ value, width = 120, color }: { value: number; width?: number; color?: string }): ReactElement {
-  const v = Math.max(0, Math.min(100, value))
-  return (
-    <svg width={width} height={8} viewBox={`0 0 ${width} 8`} role="img" aria-label={`${Math.round(v)}%`}>
-      <rect x={0} y={1} width={width} height={6} rx={3} fill={TRACK} />
-      <rect x={0} y={1} width={(v / 100) * width} height={6} rx={3} fill={color ?? utilColor(v)} />
-    </svg>
-  )
-}
-
-/** A legend row: color swatch + label + value. */
-export function LegendDot({ color, label, value }: { color: string; label: string; value?: ReactNode }) {
-  return (
-    <XStack items="center" gap="$2" justify="space-between">
-      <XStack items="center" gap="$2">
-        <YStack width={10} height={10} rounded="$1" bg={color as never} />
-        <Text fontSize="$2" color="$color11">
-          {label}
-        </Text>
-      </XStack>
-      {value != null ? (
-        <Text fontSize="$2" color="$color12" fontWeight="600">
-          {value}
-        </Text>
-      ) : null}
-    </XStack>
-  )
-}
-
-/**
- * One overview metric tile. `value` is pre-formatted by the caller (so an absent
- * metric is an honest `—`, never a fabricated number). The sparkline only appears
- * when the caller has a REAL series; the delta only when a real comparison exists.
- */
-export function MetricCard({
-  icon,
-  label,
-  value,
-  caption,
-  spark,
-  sparkColor,
-  delta,
-}: {
-  icon: ReactElement
-  label: string
-  value: string
-  caption?: string
-  spark?: number[]
-  sparkColor?: string
-  delta?: { pct: number }
-}) {
-  const up = delta ? delta.pct >= 0 : false
-  return (
-    <Card p="$3.5" gap="$2" borderWidth={1} borderColor="$borderColor" flex={1} minW={172}>
-      <XStack items="center" gap="$2" justify="space-between">
-        <XStack items="center" gap="$2">
-          {icon}
-          <Text fontSize="$2" color="$color11" fontWeight="600">
-            {label}
-          </Text>
-        </XStack>
-        {delta ? (
-          <Text fontSize="$1" color={up ? '#7ee787' : '#e5534b'}>
-            {up ? '▲' : '▼'} {Math.abs(delta.pct)}%
-          </Text>
-        ) : null}
-      </XStack>
-      <XStack items="flex-end" justify="space-between" gap="$2">
-        <Text fontSize="$8" fontWeight="900" color="$color12" numberOfLines={1}>
-          {value}
-        </Text>
-        {spark && spark.length >= 2 ? <Sparkline points={spark} color={sparkColor ?? SERIES[0]} /> : null}
-      </XStack>
-      {caption ? (
-        <Text fontSize="$1" color="$color10" numberOfLines={1}>
-          {caption}
-        </Text>
-      ) : null}
-    </Card>
-  )
-}
-
-/**
- * A button that is either a real action (onPress) or HONESTLY disabled with a
- * native tooltip explaining why (the action has no backend yet). One way to
- * render the "real route or honest-disabled" affordance the consoles use.
- */
-export function HintButton({
-  icon,
-  iconAfter,
-  children,
-  onPress,
-  disabled,
-  hint,
-  theme,
-}: {
-  icon?: ReactElement
-  iconAfter?: ReactElement
-  children: ReactNode
-  onPress?: () => void
-  disabled?: boolean
-  /** Native tooltip text (shown on hover) — say WHY it is disabled. */
-  hint?: string
-  theme?: 'light'
-}) {
-  const btn = (
-    <Button
-      size="$2"
-      theme={theme}
-      icon={icon}
-      iconAfter={iconAfter}
-      disabled={disabled}
-      onPress={disabled ? undefined : onPress}
-    >
-      {children}
-    </Button>
-  )
-  if (!hint) return btn
-  return (
-    <span title={hint} style={{ display: 'inline-flex' }}>
-      {btn}
-    </span>
-  )
-}
-
-/**
- * A titled panel wrapper used across the consoles (chart + list cards). `grow`
- * (default true) sets `flex={1}` so panels SHARE width in a ROW; pass `grow={false}`
- * inside a vertical rail (a column YStack) so each panel sizes to its content and
- * stacks — flex-grow in a column with no fixed height collapses them onto each other.
- */
-export function Panel({
-  title,
-  right,
-  children,
-  minW = 280,
-  grow = true,
-}: {
-  title: string
-  right?: ReactNode
-  children: ReactNode
-  minW?: number
-  grow?: boolean
-}) {
-  return (
-    <Card p="$4" gap="$3" borderWidth={1} borderColor="$borderColor" flex={grow ? 1 : undefined} minW={minW} width={grow ? undefined : '100%'}>
-      <XStack items="center" justify="space-between" gap="$2">
-        <Text fontSize="$4" fontWeight="800" color="$color12">
-          {title}
-        </Text>
-        {right}
-      </XStack>
-      {children}
-    </Card>
-  )
-}

package/src/product/OrgSwitcher.tsx

@@ -1,332 +0,0 @@
-'use client'
-
-/**
- * OrgSwitcher — the Vercel-style org/team switcher, hoisted from the console
- * (hanzoai/ui#36) onto @hanzo/gui primitives. Shows the org the surface is
- * scoped to, switches between the orgs the caller can see, and creates one.
- *
- * Host-agnostic: the LIST is a lazy, paged loader the host injects (IAM
- * `get-organizations` behind its own proxy) — one page at a time, the search
- * term pushed to the server, more on demand (scroll + "Load more"), so it
- * scales to thousands of orgs. No loader → the current org alone, synthesized
- * from the scope (never fabricated). Selecting re-scopes IN PLACE via
- * `scope.switchOrg` (persist + reload → every module refetches under the new
- * `X-Org-Id`). Create posts through the injected hook, then scopes into the
- * new org.
- */
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Button, Input, Popover, Spinner, Text, XStack, YStack } from '@hanzo/gui'
-import { Check, ChevronsUpDown, LayoutGrid, Plus, Search } from '@hanzogui/lucide-icons-2'
-
-import { filterOrgs, type Org, type OrgScope } from './scope'
-
-const titleCase = (s: string) => (s ? s[0].toUpperCase() + s.slice(1) : s)
-const initialsOf = (o: Org) =>
-  (o.displayName || o.name)
-    .split(/\s+/)
-    .map((w) => w[0])
-    .join('')
-    .slice(0, 2)
-    .toUpperCase()
-
-/** An org's avatar — its logo when set, else a monogram tile. */
-function OrgAvatar({ org, size = 22 }: { org: Org; size?: number }) {
-  if (org.logo) {
-    // eslint-disable-next-line @next/next/no-img-element
-    return <img src={org.logo} alt="" style={{ height: size, width: size, objectFit: 'contain', display: 'block', borderRadius: 6 }} />
-  }
-  return (
-    <YStack width={size} height={size} rounded="$3" bg="$color4" items="center" justify="center">
-      <Text fontSize="$1" fontWeight="800" color="$color12">
-        {initialsOf(org)}
-      </Text>
-    </YStack>
-  )
-}
-
-export type OrgSwitcherProps = {
-  /** The active-org contract (see `orgScope`). */
-  scope: OrgScope
-  /**
-   * Lazy paged org list: 0-based page + server-pushed search → one page of
-   * rows. A full page (=== pageSize) implies another. Omit when the caller
-   * can only see its own org.
-   */
-  orgs?: (page: number, query: string) => Promise<Org[]>
-  /** Rows per page the loader returns. Default 20. */
-  pageSize?: number
-  /** Create-org hook → the created org's id; omit to hide the affordance. */
-  create?: (name: string) => Promise<string>
-  /** Show the "All organizations" de-scope row (`scope.leaveOrg`). */
-  picker?: boolean
-}
-
-export function OrgSwitcher({ scope, orgs, pageSize = 20, create, picker = false }: OrgSwitcherProps) {
-  const currentId = scope.currentOrg()
-
-  const [open, setOpen] = useState(false)
-  const [query, setQuery] = useState('')
-  const [debounced, setDebounced] = useState('')
-  const [rows, setRows] = useState<Org[]>([])
-  const [loading, setLoading] = useState(false)
-  const [loadingMore, setLoadingMore] = useState(false)
-  const [hasMore, setHasMore] = useState(false)
-  const [creating, setCreating] = useState(false)
-  const [newName, setNewName] = useState('')
-  const [busy, setBusy] = useState(false)
-  const [err, setErr] = useState<string | null>(null)
-  const pageRef = useRef(0)
-  const reqRef = useRef(0) // race token — a newer request supersedes older ones
-
-  // Debounce the search so type-as-you-search re-hits the server at most ~4×/s.
-  useEffect(() => {
-    const id = setTimeout(() => setDebounced(query.trim()), 250)
-    return () => clearTimeout(id)
-  }, [query])
-
-  const fetchPage = useCallback(
-    async (page: number, q: string, append: boolean) => {
-      if (!orgs) return
-      const token = ++reqRef.current
-      append ? setLoadingMore(true) : setLoading(true)
-      try {
-        const incoming = await orgs(page, q)
-        if (token !== reqRef.current) return
-        pageRef.current = page
-        setRows((prev) => {
-          const merged = append ? [...prev] : []
-          const seen = new Set(merged.map((o) => o.name))
-          for (const o of incoming) if (!seen.has(o.name)) merged.push(o)
-          return merged
-        })
-        setHasMore(incoming.length >= pageSize)
-      } catch {
-        // Honest empty / keep what's shown — never a fabricated list.
-        if (token !== reqRef.current) return
-        if (!append) setRows([])
-        setHasMore(false)
-      } finally {
-        if (token === reqRef.current) {
-          setLoading(false)
-          setLoadingMore(false)
-        }
-      }
-    },
-    [orgs, pageSize],
-  )
-
-  // (Re)load page 0 when the popover opens or the debounced query changes.
-  useEffect(() => {
-    if (!open || !orgs) return
-    void fetchPage(0, debounced, false)
-  }, [open, debounced, fetchPage, orgs])
-
-  const loadMore = useCallback(() => {
-    if (loading || loadingMore || !hasMore) return
-    void fetchPage(pageRef.current + 1, debounced, true)
-  }, [loading, loadingMore, hasMore, debounced, fetchPage])
-
-  // Rows to render — the loaded list (client-filtered too), else the current
-  // org synthesized from the scope.
-  const visible: Org[] = useMemo(() => {
-    if (orgs) return filterOrgs(rows, query)
-    return [{ name: currentId, displayName: titleCase(currentId) }]
-  }, [orgs, rows, query, currentId])
-
-  const current: Org = useMemo(
-    () => rows.find((o) => o.name === currentId) ?? { name: currentId, displayName: titleCase(currentId) },
-    [rows, currentId],
-  )
-
-  const select = useCallback(
-    (org: string) => {
-      setOpen(false)
-      scope.switchOrg(org)
-    },
-    [scope],
-  )
-
-  const submitCreate = async () => {
-    const name = newName.trim()
-    if (!name || !create) return
-    setBusy(true)
-    setErr(null)
-    try {
-      const org = await create(name)
-      scope.switchOrg(org)
-    } catch (e) {
-      setErr(e instanceof Error ? e.message : 'Could not create the organization.')
-      setBusy(false)
-    }
-  }
-
-  return (
-    <Popover open={open} onOpenChange={setOpen} placement="bottom-start">
-      <Popover.Trigger asChild>
-        <Button size="$2" chromeless icon={<OrgAvatar org={current} size={18} />} iconAfter={<ChevronsUpDown size={13} />}>
-          {current.displayName || titleCase(current.name)}
-        </Button>
-      </Popover.Trigger>
-      <Popover.Content bordered elevate p="$2" width={300} bg="$color2" borderColor="$borderColor">
-        {creating ? (
-          <YStack gap="$2">
-            <Text fontSize="$2" color="$color12" fontWeight="700">
-              Create organization
-            </Text>
-            <Input
-              size="$3"
-              placeholder="Organization name"
-              value={newName}
-              onChangeText={setNewName}
-              autoCapitalize="words"
-              onSubmitEditing={() => void submitCreate()}
-            />
-            {err ? (
-              <Text fontSize="$1" color="$red10">
-                {err}
-              </Text>
-            ) : null}
-            <XStack gap="$2" justify="flex-end">
-              <Button size="$2" chromeless onPress={() => setCreating(false)} disabled={busy}>
-                Cancel
-              </Button>
-              <Button
-                size="$2"
-                onPress={() => void submitCreate()}
-                disabled={busy || !newName.trim()}
-                icon={busy ? <Spinner size="small" /> : <Plus size={14} />}
-              >
-                Create
-              </Button>
-            </XStack>
-          </YStack>
-        ) : (
-          <YStack gap="$1">
-            {orgs ? (
-              <XStack items="center" gap="$2" px="$2" py="$1" rounded="$3" borderWidth={1} borderColor="$borderColor">
-                <Search size={13} opacity={0.6} />
-                <Input
-                  flex={1}
-                  size="$2"
-                  borderWidth={0}
-                  bg="transparent"
-                  placeholder="Find organization…"
-                  value={query}
-                  onChangeText={setQuery}
-                  autoCapitalize="none"
-                  autoCorrect={false}
-                />
-              </XStack>
-            ) : null}
-
-            <div
-              style={{ maxHeight: 300, overflowY: 'auto', display: 'flex', flexDirection: 'column' }}
-              onScroll={(e) => {
-                const el = e.currentTarget
-                if (el.scrollHeight - el.scrollTop - el.clientHeight < 48) loadMore()
-              }}
-            >
-              {loading ? (
-                <XStack items="center" gap="$2" px="$2" py="$3">
-                  <Spinner size="small" color="$color11" />
-                  <Text fontSize="$2" color="$color10">
-                    Loading organizations…
-                  </Text>
-                </XStack>
-              ) : visible.length === 0 ? (
-                <Text px="$2" py="$2" fontSize="$2" color="$color10">
-                  {query.trim() ? `No organizations match “${query.trim()}”.` : 'No organizations yet.'}
-                </Text>
-              ) : (
-                visible.map((org) => (
-                  <XStack
-                    key={org.name}
-                    onPress={() => select(org.name)}
-                    cursor="pointer"
-                    items="center"
-                    gap="$2.5"
-                    px="$2"
-                    py="$2"
-                    rounded="$3"
-                    bg={org.name === currentId ? '$color4' : 'transparent'}
-                    hoverStyle={{ bg: '$color5' }}
-                  >
-                    <OrgAvatar org={org} />
-                    <Text flex={1} fontSize="$2" color="$color12" numberOfLines={1}>
-                      {org.displayName || org.name}
-                    </Text>
-                    {org.name === currentId ? <Check size={15} /> : null}
-                  </XStack>
-                ))
-              )}
-
-              {loadingMore ? (
-                <XStack items="center" gap="$2" px="$2" py="$2">
-                  <Spinner size="small" color="$color11" />
-                  <Text fontSize="$1" color="$color10">
-                    Loading more…
-                  </Text>
-                </XStack>
-              ) : hasMore ? (
-                <XStack onPress={loadMore} cursor="pointer" items="center" justify="center" px="$2" py="$1.5" rounded="$3" hoverStyle={{ bg: '$color4' }}>
-                  <Text fontSize="$1" color="$color11" fontWeight="600">
-                    Load more
-                  </Text>
-                </XStack>
-              ) : null}
-            </div>
-
-            {create ? (
-              <XStack
-                onPress={() => {
-                  setCreating(true)
-                  setErr(null)
-                }}
-                cursor="pointer"
-                items="center"
-                gap="$2.5"
-                px="$2"
-                py="$2"
-                mt="$1"
-                rounded="$3"
-                borderTopWidth={1}
-                borderColor="$borderColor"
-                hoverStyle={{ bg: '$color5' }}
-              >
-                <YStack width={22} height={22} rounded="$3" bg="$color3" items="center" justify="center">
-                  <Plus size={14} />
-                </YStack>
-                <Text fontSize="$2" color="$color12">
-                  Create organization
-                </Text>
-              </XStack>
-            ) : null}
-
-            {picker ? (
-              <XStack
-                onPress={() => {
-                  setOpen(false)
-                  scope.leaveOrg()
-                }}
-                cursor="pointer"
-                items="center"
-                gap="$2.5"
-                px="$2"
-                py="$2"
-                rounded="$3"
-                hoverStyle={{ bg: '$color5' }}
-              >
-                <YStack width={22} height={22} rounded="$3" bg="$color3" items="center" justify="center">
-                  <LayoutGrid size={14} />
-                </YStack>
-                <Text fontSize="$2" color="$color12">
-                  All organizations
-                </Text>
-              </XStack>
-            ) : null}
-          </YStack>
-        )}
-      </Popover.Content>
-    </Popover>
-  )
-}

package/src/product/PageHeader.tsx

@@ -1,31 +0,0 @@
-'use client'
-
-import type { ReactNode } from 'react'
-import { Text, XStack, YStack } from '@hanzo/gui'
-
-/** Section title + optional subtitle and right-aligned actions. */
-export function PageHeader({
-  title,
-  subtitle,
-  actions,
-}: {
-  title: string
-  subtitle?: string
-  actions?: ReactNode
-}) {
-  return (
-    <XStack justify="space-between" items="flex-start" gap="$4">
-      <YStack gap="$1">
-        <Text fontSize="$7" fontWeight="800">
-          {title}
-        </Text>
-        {subtitle ? (
-          <Text fontSize="$3" color="$color11">
-            {subtitle}
-          </Text>
-        ) : null}
-      </YStack>
-      {actions ? <XStack gap="$2">{actions}</XStack> : null}
-    </XStack>
-  )
-}

package/src/product/PrimaryButton.tsx

@@ -1,17 +0,0 @@
-'use client'
-
-/**
- * Primary button — the one white, high-emphasis action for the console.
- *
- * Monochrome brand: `theme="light"` flips the button to the light theme inside
- * the dark console, giving a white fill with a near-black label and icon — no
- * hue accent. Use it for the single primary action in a view (sign in, save,
- * get started). Secondary and destructive actions use the default neutral
- * `Button`.
- */
-import type { ComponentProps } from 'react'
-import { Button } from '@hanzo/gui'
-
-export function PrimaryButton(props: ComponentProps<typeof Button>) {
-  return <Button theme="light" {...props} />
-}

package/src/product/ProductIcon.tsx

@@ -1,61 +0,0 @@
-'use client'
-
-/**
- * ProductIcon — the Linear-style product tile: a rounded-square block filled with
- * the product's accent color, with the product glyph knocked out in near-white so
- * it reads "cut out" of the color. This is the ONE way a product icon renders in
- * the console chrome (sidebar nav, command palette, product overview header) — a
- * bare tinted glyph is replaced everywhere by this tile.
- *
- * Prop-driven and pure: the accent hex is resolved by the caller (registry-curated
- * → per-user override → stable hash, via `useProductColors().colorOf`) and passed
- * in as `color`, so this component owns only the look, never the palette. With no
- * color it falls back to a tasteful neutral chip ($color12 fill + $color1 glyph) —
- * never a random hue — matching the first-party `ProviderLogo` mark, so first-party
- * marks and product tiles read as one family.
- *
- * The knock-out is the same technique the color-swatch button uses (a raw-hex
- * `backgroundColor` fill + a `#ffffff` glyph) so an arbitrary product accent tints
- * cleanly outside Gui's token palette, in the ONE sanctioned place.
- */
-import { XStack } from '@hanzo/gui'
-
-import { asColor, type IconLike } from './color'
-
-export function ProductIcon({
-  icon: Icon,
-  color,
-  size = 24,
-}: {
-  icon: IconLike
-  /** The product's resolved accent hex (e.g. `#5E6AD2`). Omit for the neutral chip. */
-  color?: string
-  size?: number
-}) {
-  const radius = Math.round(size * 0.28)
-  const glyph = Math.round(size * 0.58)
-  const tinted = typeof color === 'string' && color.trim() !== ''
-
-  // Accent tile — product color fill + near-white glyph (the Linear "cut out").
-  if (tinted) {
-    return (
-      <XStack
-        width={size}
-        height={size}
-        items="center"
-        justify="center"
-        rounded={radius}
-        style={{ backgroundColor: color }}
-      >
-        <Icon size={glyph} color={asColor('#ffffff')} />
-      </XStack>
-    )
-  }
-
-  // No accent — a tasteful neutral chip (consistent with ProviderLogo's mark).
-  return (
-    <XStack width={size} height={size} items="center" justify="center" rounded={radius} bg="$color12">
-      <Icon size={glyph} color="$color1" />
-    </XStack>
-  )
-}