@hanzo/ui 8.0.7 → 8.0.11

package/src/product/Donut.tsx

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

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

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

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

@@ -1,31 +0,0 @@
-'use client'
-
-/**
- * The Hanzo "H" mark — the canonical 7-path shaded glyph: five body blocks +
- * two shade slivers (geometry canon: @hanzo/logo `MARK_PATHS`).
- *
- * Rendered as inline SVG with `fill: currentColor` (shade at reduced opacity),
- * 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.
- */
-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 opacity={0.55} d="M0 44.6369L22.21 46.8285V44.6369H0Z" />
-      <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 opacity={0.55} d="M66.6753 22.3185L44.5098 20.0822V22.3185H66.6753Z" />
-      <path d="M66.7198 67V44.6369H44.5098V67H66.7198Z" />
-    </svg>
-  )
-}

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>
-  )
-}