@hanzo/ui 5.7.1 → 8.0.1

package/src/product/index.ts

@@ -0,0 +1,57 @@
+// @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 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 * from './Toast'
+export * from './color'

package/src/styles/hanzo-motion.css

@@ -0,0 +1,136 @@
+/* @hanzo/ui motion primitives — the calm, restrained animation vocabulary the
+   Hanzo surfaces share. One place defines the easing; components apply the class.
+   `className` forwards to the underlying DOM node on web, so the browser
+   transitions the Gui-driven inline width/transform/opacity. Every animation is
+   guarded by `prefers-reduced-motion: reduce`.
+
+   Import once at the app root:  import '@hanzo/ui/styles/motion.css'  */
+
+/* Fade-up entrance — <FadeIn> applies the class + a per-item stagger delay.
+   ~0.4s ease-out, small upward travel (matches the hanzo.ai marketing feel). */
+@keyframes hz-fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.hz-fade-up {
+  animation: hz-fade-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
+  will-change: transform, opacity;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hz-fade-up {
+    animation: none;
+  }
+}
+
+/* Shell chrome motion — sidebar collapse (width) and the Linear-style two-level
+   nav slide (transform); backdrop cross-fade behind a SlideOver / dialog. */
+.hz-collapse {
+  transition: width 220ms cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: width;
+}
+
+.hz-slide {
+  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform;
+}
+
+.hz-fade {
+  transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: opacity;
+}
+
+/* Drag-to-reorder — a pinned row while it is being dragged (pointer DnD). The
+   lifted row gets a subtle lift; siblings ease into place via `.hz-slide`. */
+.hz-drag-item {
+  touch-action: none;
+  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.hz-drag-item[data-dragging='true'] {
+  transition: none;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
+  opacity: 0.96;
+  cursor: grabbing;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hz-collapse,
+  .hz-slide,
+  .hz-fade,
+  .hz-drag-item {
+    transition: none;
+  }
+}
+
+/* Living-overview motion — the "videogame-like" living dashboard. The count-up +
+   live sparkline are driven in JS (rAF, gated by prefers-reduced-motion in the
+   hooks); these are the pure-CSS bits: a loading shimmer, a live-feed pulse, and
+   a brief highlight when a freshly-arrived row lands. */
+
+/* Skeleton shimmer — an honest "loading", never fabricated content. */
+@keyframes hz-shimmer {
+  0% {
+    background-position: -160px 0;
+  }
+  100% {
+    background-position: 160px 0;
+  }
+}
+
+.hz-skeleton {
+  background-color: var(--color3, rgba(148, 163, 184, 0.14));
+  background-image: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--color4, rgba(148, 163, 184, 0.22)) 50%,
+    transparent 100%
+  );
+  background-size: 160px 100%;
+  background-repeat: no-repeat;
+  animation: hz-shimmer 1.2s ease-in-out infinite;
+}
+
+/* Live-feed pulse — the "Live" dot on a streaming panel. */
+@keyframes hz-pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.45;
+    transform: scale(0.82);
+  }
+}
+
+/* Entrance for a freshly-arrived activity row (staggerless — one row at a time). */
+@keyframes hz-row-in {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.hz-row-in {
+  animation: hz-row-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hz-skeleton {
+    animation: none;
+  }
+  .hz-row-in {
+    animation: none;
+  }
+}

package/types/data.d.ts

@@ -0,0 +1,2 @@
+export * from '@hanzo/data';
+//# sourceMappingURL=data.d.ts.map

package/types/data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../src/data.ts"],"names":[],"mappings":"AAWA,cAAc,aAAa,CAAA"}

package/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './product';
+export { tokens, TAG_TONES, tagTone, type TagTone } from '@hanzo/data';
+//# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAgBA,cAAc,WAAW,CAAA;AAKzB,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,aAAa,CAAA"}

package/types/primitives/bases/data/index.d.ts

@@ -0,0 +1,2 @@
+export * from '@hanzo/data';
+//# sourceMappingURL=index.d.ts.map

package/types/primitives/bases/data/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/primitives/bases/data/index.ts"],"names":[],"mappings":"AAYA,cAAc,aAAa,CAAA"}

package/types/product/Charts.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Charts — the ONE way the console draws a trend, a series, a share, or a
+ * distribution. Dependency-free: inline SVG for the data-dense temporal charts
+ * (Sparkline / LineChart / BarChart) and @hanzo/gui primitives for the
+ * token-native ones (BarRows, and the Donut's optional legend), so everything
+ * themes to the shell.
+ *
+ * Color is data-driven, not a mode flag: a `Slice` is drawn in its own `color`
+ * when it has one (categorical/polychrome — e.g. spend-by-model) and in a
+ * monochrome opacity ramp off the foreground token when it doesn't (on-brand —
+ * e.g. collections-by-model). One Donut serves both; a consumer that needs a
+ * richer legend (amounts, click targets) leaves `legend` off and composes its own.
+ *
+ * Honest by construction: a Sparkline with fewer than two points renders nothing
+ * (no invented trend); Donut / BarRows with no positive value render an em-dash.
+ * Callers pass REAL series — these never fabricate data.
+ *
+ * SVG marks can't read Tamagui tokens, so concrete colors for SVG come from the
+ * live theme (`useTheme().<token>.get()` → `var(--token)` on web, stays reactive).
+ */
+import { type ReactNode } from 'react';
+/** Distinct hues for categorical series (e.g. spend-by-model donut), dark-tuned. */
+export declare const CHART_PALETTE: string[];
+export declare const CHART_OTHER = "#64748b";
+/** A point on a temporal/sequential axis (LineChart / BarChart). */
+export type ChartPoint = {
+    label: string;
+    value: number;
+};
+/** A labelled magnitude in a categorical chart (Donut / BarRows). */
+export type Slice = {
+    label: string;
+    value: number;
+    color?: string;
+    hint?: string;
+};
+export declare function Sparkline({ values, width, height, color, }: {
+    values: number[];
+    width?: number;
+    height?: number;
+    color?: string;
+}): import("react").JSX.Element | null;
+export declare function LineChart({ data, height, color, formatValue, }: {
+    data: ChartPoint[];
+    height?: number;
+    color?: string;
+    formatValue?: (v: number) => string;
+}): import("react").JSX.Element;
+export declare function BarChart({ data, height, color, formatValue, }: {
+    data: ChartPoint[];
+    height?: number;
+    color?: string;
+    formatValue?: (v: number) => string;
+}): import("react").JSX.Element;
+export declare function Donut({ slices, size, thickness, center, legend, }: {
+    slices: Slice[];
+    size?: number;
+    thickness?: number;
+    /** Rendered, centered, inside the ring (a number, a label+sub, anything). */
+    center?: ReactNode;
+    /**
+     * Render a built-in label/percentage legend beside the ring. Off by default so
+     * a consumer can compose a richer legend (amounts, click targets) itself.
+     */
+    legend?: boolean;
+}): import("react").JSX.Element;
+export declare function BarRows({ bars }: {
+    bars: Slice[];
+}): import("react").JSX.Element;
+//# sourceMappingURL=Charts.d.ts.map

package/types/product/Charts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Charts.d.ts","sourceRoot":"","sources":["../../src/product/Charts.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAGnE,oFAAoF;AACpF,eAAO,MAAM,aAAa,UASzB,CAAA;AACD,eAAO,MAAM,WAAW,YAAY,CAAA;AAMpC,oEAAoE;AACpE,MAAM,MAAM,UAAU,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAEzD,qEAAqE;AACrE,MAAM,MAAM,KAAK,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AA+BnF,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,KAAW,EACX,MAAW,EACX,KAAK,GACN,EAAE;IACD,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,sCAmBA;AA8DD,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,MAAY,EACZ,KAAc,EACd,WAA8B,GAC/B,EAAE;IACD,IAAI,EAAE,UAAU,EAAE,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;CACpC,+BAmDA;AAID,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,MAAY,EACZ,KAAc,EACd,WAA8B,GAC/B,EAAE;IACD,IAAI,EAAE,UAAU,EAAE,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;CACpC,+BA4DA;AAID,wBAAgB,KAAK,CAAC,EACpB,MAAM,EACN,IAAU,EACV,SAAc,EACd,MAAM,EACN,MAAc,GACf,EAAE;IACD,MAAM,EAAE,KAAK,EAAE,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,+BAmFA;AAqCD,wBAAgB,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,KAAK,EAAE,CAAA;CAAE,+BA0BlD"}

package/types/product/ComboBox.d.ts

@@ -0,0 +1,20 @@
+import { type ComboOption } from './combobox/filter';
+export type { ComboOption } from './combobox/filter';
+export declare function ComboBox({ value, onChange, options, loading, error, onRetry, placeholder, disabled, emptyText, minWidth, }: {
+    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;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ComboBox.d.ts.map

package/types/product/ComboBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../src/product/ComboBox.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEnE,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEpD,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAe,EACf,KAAY,EACZ,OAAO,EACP,WAAW,EACX,QAAQ,EACR,SAAuD,EACvD,QAAc,GACf,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,6DAA6D;IAC7D,OAAO,EAAE,WAAW,EAAE,CAAA;IACtB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,iFAAiF;IACjF,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,+BAmEA"}

package/types/product/DataTable.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 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';
+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 declare function DataTable<T>({ columns, rows, loading, empty, rowKey, onRowPress, }: {
+    columns: Column<T>[];
+    rows: T[];
+    loading?: boolean;
+    empty?: string;
+    rowKey: (row: T) => string;
+    onRowPress?: (row: T) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=DataTable.d.ts.map

package/types/product/DataTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../src/product/DataTable.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,MAAM,MAAM,MAAM,CAAC,CAAC,IAAI;IACtB,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,MAAM,CAAA;IACd,qDAAqD;IACrD,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,SAAS,CAAA;IAC9B,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,EAC3B,OAAO,EACP,IAAI,EACJ,OAAO,EACP,KAA2B,EAC3B,MAAM,EACN,UAAU,GACX,EAAE;IACD,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAA;IACpB,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAA;IAC1B,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAA;CAC9B,+BA+DA"}

package/types/product/Donut.d.ts

@@ -0,0 +1,26 @@
+/**
+ * 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 declare function Donut({ segments, size, thickness, centerValue, centerLabel, trackColor, valueColor, labelColor, }: {
+    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;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=Donut.d.ts.map

package/types/product/Donut.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Donut.d.ts","sourceRoot":"","sources":["../../src/product/Donut.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,MAAM,MAAM,YAAY,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAE1E,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,IAAU,EACV,SAAc,EACd,WAAW,EACX,WAAW,EACX,UAAsB,EACtB,UAAsB,EACtB,UAAsB,GACvB,EAAE;IACD,QAAQ,EAAE,YAAY,EAAE,CAAA;IACxB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iFAAiF;IACjF,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,sCAkDA"}

package/types/product/EmptyState.d.ts

@@ -0,0 +1,37 @@
+/**
+ * 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 } from 'react';
+import type { IconLike } from './color';
+/** 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;
+};
+export declare 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;
+}): import("react").JSX.Element;
+//# sourceMappingURL=EmptyState.d.ts.map

package/types/product/EmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/product/EmptyState.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,EAAE,YAAY,EAAa,MAAM,OAAO,CAAA;AAIpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAGvC,+EAA+E;AAC/E,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB,CAAA;AAOD,wBAAgB,UAAU,CAAC,EACzB,IAAI,EAAE,IAAI,EACV,KAAK,EACL,WAAW,EACX,OAAO,EACP,OAAO,EACP,SAAS,GACV,EAAE;IACD,oFAAoF;IACpF,IAAI,EAAE,QAAQ,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,mEAAmE;IACnE,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,mEAAmE;IACnE,SAAS,CAAC,EAAE,WAAW,CAAA;CACxB,+BAyEA"}

package/types/product/FadeIn.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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 declare function FadeIn({ children, index, step, 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;
+}): import("react").JSX.Element;
+//# sourceMappingURL=FadeIn.d.ts.map

package/types/product/FadeIn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FadeIn.d.ts","sourceRoot":"","sources":["../../src/product/FadeIn.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAErD,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,KAAS,EACT,IAAS,EACT,OAAO,EACP,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,SAAS,CAAA;IACnB,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,+BAOA"}

package/types/product/Field.d.ts

@@ -0,0 +1,46 @@
+/**
+ * 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';
+/** Labeled row: fixed label column + flexing control. */
+export declare function FieldRow({ label, children }: {
+    label: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function FieldText({ value, onChange, disabled, secure, placeholder, }: {
+    value: string;
+    onChange: (v: string) => void;
+    disabled?: boolean;
+    secure?: boolean;
+    placeholder?: string;
+}): import("react").JSX.Element;
+export declare function FieldTextArea({ value, onChange, disabled, rows, }: {
+    value: string;
+    onChange: (v: string) => void;
+    disabled?: boolean;
+    rows?: number;
+}): import("react").JSX.Element;
+export declare function FieldSwitch({ checked, onChange, disabled, }: {
+    checked: boolean;
+    onChange: (v: boolean) => void;
+    disabled?: boolean;
+}): import("react").JSX.Element;
+export declare function FieldSelect({ value, options, onChange, disabled, }: {
+    value: string;
+    options: string[];
+    onChange: (v: string) => void;
+    disabled?: boolean;
+}): import("react").JSX.Element;
+export declare function FieldSlider({ value, min, max, step, onChange, disabled, }: {
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    onChange: (v: number) => void;
+    disabled?: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=Field.d.ts.map

package/types/product/Field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/product/Field.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AActC,yDAAyD;AACzD,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAWnF;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,WAAW,GACZ,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,+BAWA;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,+BAIA;AAED,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,+BAMA;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,+BAiBA;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,+BAsBA"}

package/types/product/HanzoMark.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 declare function HanzoMark({ size, color }: {
+    size?: number;
+    color?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=HanzoMark.d.ts.map

package/types/product/HanzoMark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HanzoMark.d.ts","sourceRoot":"","sources":["../../src/product/HanzoMark.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,EAAE,IAAS,EAAE,KAAsB,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,+BAkBjG"}

package/types/product/Metric.d.ts

@@ -0,0 +1,103 @@
+/**
+ * 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';
+/** Distinct, theme-neutral series colors (mid-saturation reads on dark + light). */
+export declare const SERIES: readonly ["#6ea8fe", "#7ee787", "#f0a868", "#c792ea", "#56d4c4", "#e879a6", "#d6c15a", "#8b9bb4"];
+export declare const colorForIndex: (i: number) => string;
+/** Tone for a utilization/temperature value (green calm → red hot). */
+export declare function utilColor(pct: number): string;
+/**
+ * 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 declare function Sparkline({ points, width, height, color, }: {
+    points: number[];
+    width?: number;
+    height?: number;
+    color?: string;
+}): ReactElement | null;
+/** A small vertical-bar chart (e.g. cost per day). One bar per real datum. */
+export declare function MiniBars({ bars, width, height, color, }: {
+    bars: {
+        label: string;
+        value: number;
+    }[];
+    width?: number;
+    height?: number;
+    color?: string;
+}): ReactElement | null;
+/**
+ * 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 declare function UtilBar({ value, width, color }: {
+    value: number;
+    width?: number;
+    color?: string;
+}): ReactElement;
+/** A legend row: color swatch + label + value. */
+export declare function LegendDot({ color, label, value }: {
+    color: string;
+    label: string;
+    value?: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * 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 declare function MetricCard({ icon, label, value, caption, spark, sparkColor, delta, }: {
+    icon: ReactElement;
+    label: string;
+    value: string;
+    caption?: string;
+    spark?: number[];
+    sparkColor?: string;
+    delta?: {
+        pct: number;
+    };
+}): import("react").JSX.Element;
+/**
+ * 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 declare 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';
+}): import("react").JSX.Element;
+/**
+ * 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 declare function Panel({ title, right, children, minW, grow, }: {
+    title: string;
+    right?: ReactNode;
+    children: ReactNode;
+    minW?: number;
+    grow?: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=Metric.d.ts.map

package/types/product/Metric.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Metric.d.ts","sourceRoot":"","sources":["../../src/product/Metric.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGpD,oFAAoF;AACpF,eAAO,MAAM,MAAM,mGAAoG,CAAA;AACvH,eAAO,MAAM,aAAa,GAAI,GAAG,MAAM,KAAG,MAAmC,CAAA;AAG7E,uEAAuE;AACvE,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAI7C;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,KAAW,EACX,MAAW,EACX,KAAiB,GAClB,EAAE;IACD,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,YAAY,GAAG,IAAI,CAatB;AAED,8EAA8E;AAC9E,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,KAAW,EACX,MAAW,EACX,KAAiB,GAClB,EAAE;IACD,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,YAAY,GAAG,IAAI,CAiBtB;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,KAAW,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,YAAY,CAQtH;AAED,kDAAkD;AAClD,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,+BAgBrG;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,OAAO,EACP,KAAK,EACL,UAAU,EACV,KAAK,GACN,EAAE;IACD,IAAI,EAAE,YAAY,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;CACxB,+BA8BA;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,KAAK,GACN,EAAE;IACD,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,SAAS,CAAC,EAAE,YAAY,CAAA;IACxB,QAAQ,EAAE,SAAS,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,+BAmBA;AAED;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,IAAU,EACV,IAAW,GACZ,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,EAAE,SAAS,CAAA;IACnB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,+BAYA"}

package/types/product/PageHeader.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+/** Section title + optional subtitle and right-aligned actions. */
+export declare function PageHeader({ title, subtitle, actions, }: {
+    title: string;
+    subtitle?: string;
+    actions?: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=PageHeader.d.ts.map

package/types/product/PageHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../src/product/PageHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,mEAAmE;AACnE,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,OAAO,GACR,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB,+BAgBA"}