@hanzo/ui 8.0.0 → 8.0.1

package/package.json

@@ -1,23 +1,23 @@
 {
   "name": "@hanzo/ui",
-  "version": "8.0.0",
+  "version": "8.0.1",
   "type": "module",
-  "description": "Hanzo UI — the one cross-platform component library on @hanzo/gui. The product/app layer (charts, metrics, page headers, status tags, rich empty states, combobox, slide-over, toasts, drag-reorder, labeled field rows, provider/product marks) + the metadata-driven record layer (@hanzo/data: RecordsView, DataTable, board, typed field editors) + the calm dark-first tokens and motion. Presentational, host-agnostic (data/effects injected), clean-room. Web + native (iOS) + desktop.",
+  "description": "Hanzo UI \u2014 the one cross-platform component library on @hanzo/gui. The product/app layer (charts, metrics, page headers, status tags, rich empty states, combobox, slide-over, toasts, drag-reorder, labeled field rows, provider/product marks) + the metadata-driven record layer (@hanzo/data: RecordsView, DataTable, board, typed field editors) + the calm dark-first tokens and motion. Presentational, host-agnostic (data/effects injected), clean-room. Web + native (iOS) + desktop.",
   "exports": {
     ".": {
-      "types": "./src/index.ts",
+      "types": "./types/index.d.ts",
       "default": "./src/index.ts"
     },
     "./product": {
-      "types": "./src/product/index.ts",
+      "types": "./types/product/index.d.ts",
       "default": "./src/product/index.ts"
     },
     "./data": {
-      "types": "./src/data.ts",
+      "types": "./types/data.d.ts",
       "default": "./src/data.ts"
     },
     "./primitives/bases/data": {
-      "types": "./src/primitives/bases/data/index.ts",
+      "types": "./types/primitives/bases/data/index.d.ts",
       "default": "./src/primitives/bases/data/index.ts"
     },
     "./styles/motion.css": "./src/styles/hanzo-motion.css",
@@ -25,14 +25,18 @@
   },
   "main": "./src/index.ts",
   "module": "./src/index.ts",
-  "types": "./src/index.ts",
+  "types": "./types/index.d.ts",
   "sideEffects": [
     "**/*.css"
   ],
   "files": [
-    "src"
+    "src",
+    "types"
   ],
   "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "clean": "rm -rf types",
+    "prepack": "pnpm run build",
     "tc": "tsc --noEmit",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
@@ -44,12 +48,15 @@
     "react": ">=19"
   },
   "devDependencies": {
-    "@hanzo/data": "1.2.0",
+    "@hanzo/data": "1.2.1",
     "@hanzo/gui": "7.3.0",
     "@hanzogui/config": "7.3.0",
+    "@hanzogui/core": "7.3.0",
     "@hanzogui/lucide-icons-2": "7.3.0",
     "@hanzogui/next-theme": "7.3.0",
+    "@hanzogui/web": "7.3.0",
     "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "typescript": "^5.7.2",

package/src/gui-env.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Registers this package's @hanzo/gui config with the type system so the
+ * shorthand style props (bg / px / py / items / justify / gap / rounded …) that
+ * the components author against resolve to their concrete types DURING THIS
+ * PACKAGE'S OWN COMPILATION.
+ *
+ * Because the resolution happens here, the emitted `.d.ts` (see
+ * `tsconfig.build.json`) bakes in the concrete prop types — a consumer type-checks
+ * against the compiled declarations and never has to re-declare this augmentation
+ * (nor descend into our `.tsx` internals). Ambient + type-only; never emitted.
+ *
+ * `GuiCustomConfig` is the extension point declared by @hanzogui/web and re-declared
+ * by @hanzogui/core; `InferGuiConfig<typeof defaultConfig>` (the return type of
+ * `createGui(defaultConfig)`) is the exact config the components are written for.
+ */
+import type { createGui } from '@hanzo/gui'
+import type { defaultConfig } from '@hanzogui/config/v5'
+
+type Conf = ReturnType<typeof createGui<typeof defaultConfig>>
+
+declare module '@hanzogui/web' {
+  interface GuiCustomConfig extends Conf {}
+}
+
+declare module '@hanzogui/core' {
+  interface GuiCustomConfig extends Conf {}
+}

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":"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"}

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

package/types/product/PrimaryButton.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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 declare function PrimaryButton(props: ComponentProps<typeof Button>): import("react").JSX.Element;
+//# sourceMappingURL=PrimaryButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../src/product/PrimaryButton.tsx"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAEnC,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,+BAEjE"}

package/types/product/ProductIcon.d.ts

@@ -0,0 +1,8 @@
+import { type IconLike } from './color';
+export declare function ProductIcon({ icon: Icon, color, size, }: {
+    icon: IconLike;
+    /** The product's resolved accent hex (e.g. `#5E6AD2`). Omit for the neutral chip. */
+    color?: string;
+    size?: number;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ProductIcon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProductIcon.d.ts","sourceRoot":"","sources":["../../src/product/ProductIcon.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAAW,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEhD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EAAE,IAAI,EACV,KAAK,EACL,IAAS,GACV,EAAE;IACD,IAAI,EAAE,QAAQ,CAAA;IACd,qFAAqF;IACrF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,+BA2BA"}

package/types/product/ProviderLogo.d.ts

@@ -0,0 +1,13 @@
+import { Boxes } from '@hanzogui/lucide-icons-2';
+/** 1–2 uppercase initials from a provider name: words→first letters, else first 2 chars. */
+export declare function providerInitials(provider: string): string;
+export declare function ProviderLogo({ provider, size }: {
+    provider: string;
+    size?: number;
+}): import("react").JSX.Element;
+/** A generic fallback mark for an unspecified provider (used sparingly). */
+export declare function GenericLogo({ size }: {
+    size?: number;
+}): import("react").JSX.Element;
+export { Boxes as CustomModelMark };
+//# sourceMappingURL=ProviderLogo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProviderLogo.d.ts","sourceRoot":"","sources":["../../src/product/ProviderLogo.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAE,KAAK,EAAsB,MAAM,0BAA0B,CAAA;AA0CpE,4FAA4F;AAC5F,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAMzD;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,IAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BAqDxF;AAED,4EAA4E;AAC5E,wBAAgB,WAAW,CAAC,EAAE,IAAS,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BAM3D;AAID,OAAO,EAAE,KAAK,IAAI,eAAe,EAAE,CAAA"}

package/types/product/Reorder.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Reorder — a tiny pointer-driven drag-to-reorder list. No dependency: it uses
+ * Pointer Events (so it works with mouse AND touch) and CSS transforms, matching
+ * the shell's transform-driven motion. Rows are a FIXED height (all pinned rows
+ * are), which keeps the "where does it drop?" math exact and pure (`targetIndex`)
+ * and the reflow buttery — the lifted row follows the pointer 1:1 while its
+ * displaced siblings ease into place.
+ *
+ * The list is controlled: `onReorder(from, to)` fires once on drop; the parent
+ * owns the data (here, the account-backed pins model). `renderItem` gets a
+ * `handle` to spread on the drag affordance so the rest of the row stays
+ * interactive (tap to open, etc.).
+ */
+import { type ReactNode } from 'react';
+/** Final index for a drag: start + rounded rows travelled, clamped. PURE. */
+export declare function targetIndex(from: number, dy: number, rowH: number, count: number): number;
+/** Vertical shift for row `i` during a drag from `from`→`to` (the dragged row
+ *  follows the pointer; rows between them make room). PURE. */
+export declare function rowShift(i: number, from: number, to: number, dy: number, rowH: number): number;
+export type DragHandle = {
+    onPointerDown: (e: {
+        clientY?: number;
+        pointerId?: number;
+        nativeEvent?: {
+            clientY?: number;
+        };
+    }) => void;
+};
+export declare function Reorder<T>({ items, keyOf, rowHeight, onReorder, renderItem, }: {
+    items: T[];
+    keyOf: (t: T) => string;
+    rowHeight?: number;
+    onReorder: (from: number, to: number) => void;
+    renderItem: (item: T, handle: DragHandle, dragging: boolean) => ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=Reorder.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Reorder.d.ts","sourceRoot":"","sources":["../../src/product/Reorder.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAiC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAGrE,6EAA6E;AAC7E,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAIzF;AAED;+DAC+D;AAC/D,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAK9F;AAED,MAAM,MAAM,UAAU,GAAG;IAAE,aAAa,EAAE,CAAC,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE;YAAE,OAAO,CAAC,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,KAAK,IAAI,CAAA;CAAE,CAAA;AAErI,wBAAgB,OAAO,CAAC,CAAC,EAAE,EACzB,KAAK,EACL,KAAK,EACL,SAAc,EACd,SAAS,EACT,UAAU,GACX,EAAE;IACD,KAAK,EAAE,CAAC,EAAE,CAAA;IACV,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,KAAK,SAAS,CAAA;CAC1E,+BA6DA"}

package/types/product/SelectMenu.d.ts

@@ -0,0 +1,23 @@
+/**
+ * SelectMenu — a compact, reusable dropdown select on @hanzo/gui Popover (the
+ * console's proven dropdown idiom, same as OrgSwitcher/ScopeSwitcher). Renders a
+ * labelled trigger ("All types", or the chosen option) and a popover list with a
+ * check on the active option. Prop-driven + self-contained so it lifts into
+ * `@hanzo/ui`. `value === null` is the "all"/unfiltered state.
+ */
+import type { ReactElement } from 'react';
+export type SelectOption<T extends string> = {
+    key: T;
+    label: string;
+};
+export declare function SelectMenu<T extends string>({ options, value, onChange, allLabel, icon, minWidth, }: {
+    options: SelectOption<T>[];
+    value: T | null;
+    onChange: (v: T | null) => void;
+    /** Label shown (and first menu row) for the unfiltered `null` state. */
+    allLabel?: string;
+    /** Optional leading icon in the trigger. */
+    icon?: ReactElement;
+    minWidth?: number;
+}): import("react").JSX.Element;
+//# sourceMappingURL=SelectMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMenu.d.ts","sourceRoot":"","sources":["../../src/product/SelectMenu.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAKzC,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,IAAI;IAAE,GAAG,EAAE,CAAC,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAEtE,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,EAC3C,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,IAAI,EACJ,QAAc,GACf,EAAE;IACD,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAA;IAC1B,KAAK,EAAE,CAAC,GAAG,IAAI,CAAA;IACf,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAA;IAC/B,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,+BAsCA"}

package/types/product/SlideOver.d.ts

@@ -0,0 +1,48 @@
+/**
+ * SlideOver — the ONE right-side (or left) slide-out overlay for the console.
+ *
+ * It is the single mechanism behind every off-canvas surface: the mobile nav
+ * drawer, the item DetailPane, and the account/settings menu. One definition, many
+ * mounts (DRY) — so every drawer slides, dims, traps, and closes identically.
+ *
+ * Smoothness is CSS-transform driven (never a JS layout branch): the panel is
+ * ALWAYS mounted and toggles `translateX(0) ↔ translateX(±100%)` via the shared
+ * `.hz-slide` class, and the backdrop cross-fades via `.hz-fade`. Because it never
+ * unmounts, the EXIT animates too (a `Dialog` that unmounts on close cannot). Both
+ * classes are reduced-motion-aware in `globals.css`, so the whole thing snaps
+ * instantly for users who ask for that — no bespoke logic here.
+ *
+ * Responsive by construction: FULL-WIDTH (full-screen) below `lg`, a fixed-width
+ * pane at `lg+` (`size`). Uses `100dvh` so the mobile browser chrome never clips it.
+ *
+ * A11y: `role="dialog" aria-modal`, Escape to close, backdrop click to close, body
+ * scroll lock while open (ref-counted so stacked overlays don't fight), and focus
+ * moves into the panel on open and returns to the opener on close.
+ */
+import { type ReactNode } from 'react';
+import { type IconLike } from './color';
+/** The lg breakpoint (px) — matches the shell's one responsive threshold. */
+declare const LG = 1024;
+export type SlideOverProps = {
+    open: boolean;
+    onClose: () => void;
+    /** Which edge the panel slides from. Default right. */
+    side?: 'right' | 'left';
+    /** Panel width at lg+ (px). Below lg it is always full-screen. Default 420. */
+    size?: number;
+    /** Optional header title — when set, SlideOver renders a header + a scroll body. */
+    title?: ReactNode;
+    /** Optional header icon (tinted with `iconColor`). */
+    icon?: IconLike;
+    iconColor?: string;
+    /** Extra header content, right-aligned before the close button. */
+    headerRight?: ReactNode;
+    /** Accessible label when no visible title is given. */
+    ariaLabel?: string;
+    /** z-index for stacking (a pane opened over a drawer passes a higher value). */
+    zIndex?: number;
+    children: ReactNode;
+};
+export declare function SlideOver({ open, onClose, side, size, title, icon: Icon, iconColor, headerRight, ariaLabel, zIndex, children, }: SlideOverProps): import("react").JSX.Element;
+export { LG as SLIDEOVER_LG };
+//# sourceMappingURL=SlideOver.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SlideOver.d.ts","sourceRoot":"","sources":["../../src/product/SlideOver.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAIzD,OAAO,EAAW,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEhD,6EAA6E;AAC7E,QAAA,MAAM,EAAE,OAAO,CAAA;AAmBf,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,uDAAuD;IACvD,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACvB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,oFAAoF;IACpF,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,sDAAsD;IACtD,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mEAAmE;IACnE,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gFAAgF;IAChF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,OAAO,EACP,IAAc,EACd,IAAU,EACV,KAAK,EACL,IAAI,EAAE,IAAI,EACV,SAAS,EACT,WAAW,EACX,SAAS,EACT,MAAa,EACb,QAAQ,GACT,EAAE,cAAc,+BAgHhB;AAED,OAAO,EAAE,EAAE,IAAI,YAAY,EAAE,CAAA"}

package/types/product/StatusTag.d.ts

@@ -0,0 +1,4 @@
+export declare function StatusTag({ status }: {
+    status?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=StatusTag.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusTag.d.ts","sourceRoot":"","sources":["../../src/product/StatusTag.tsx"],"names":[],"mappings":"AAyCA,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,+BAOxD"}

package/types/product/ThemeToggle.d.ts

@@ -0,0 +1,2 @@
+export declare function ThemeToggle(): import("react").JSX.Element;
+//# sourceMappingURL=ThemeToggle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["../../src/product/ThemeToggle.tsx"],"names":[],"mappings":"AAYA,wBAAgB,WAAW,gCAY1B"}

package/types/product/Toast.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Toast — the ONE feedback primitive. Every mutation reports through `useToast()`
+ * so success/failure looks and behaves the same everywhere. A single provider
+ * holds the queue and renders the viewport (portalled top-right); there is no
+ * per-call markup. Built from GUI primitives only.
+ *
+ * Mount `<ToastProvider>` once (the dashboard layout does). Call:
+ *   const toast = useToast()
+ *   toast.success('Created my-db')
+ *   toast.error(err instanceof ApiError ? err.message : 'Failed to create')
+ */
+import { type ReactNode } from 'react';
+export type ToastKind = 'success' | 'error' | 'info';
+export type ToastInput = {
+    title: string;
+    description?: string;
+    kind?: ToastKind;
+    /** Auto-dismiss after this many ms; 0 keeps it until dismissed. */
+    durationMs?: number;
+};
+type ToastApi = {
+    toast: (t: ToastInput) => void;
+    success: (title: string, description?: string) => void;
+    error: (title: string, description?: string) => void;
+    info: (title: string, description?: string) => void;
+    dismiss: (id: number) => void;
+};
+export declare function ToastProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useToast(): ToastApi;
+export {};
+//# sourceMappingURL=Toast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../src/product/Toast.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,EAAuE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAK3G,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AAEpD,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAID,KAAK,QAAQ,GAAG;IACd,KAAK,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;IAC9B,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACtD,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACpD,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACnD,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9B,CAAA;AAyED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAkDlE;AAED,wBAAgB,QAAQ,IAAI,QAAQ,CAInC"}

package/types/product/color.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentType } from 'react';
+import type { GetThemeValueForKey } from '@hanzo/gui';
+/**
+ * Bridge between raw CSS colors (product hex accents) and Gui's typed `color`
+ * prop. Gui types `color` as a theme-token template (`$color12`, …), but ANY CSS
+ * color is valid at runtime — so tinting an icon with a product hex needs one
+ * sanctioned cast, in ONE place, rather than `as any` scattered around.
+ */
+export type IconColor = GetThemeValueForKey<'color'>;
+/** Cast a raw CSS color (e.g. `#5E6AD2`) to Gui's `color` prop type. */
+export declare const asColor: (hex: string) => IconColor;
+/** A lucide/Gui icon component that accepts a size + a (token-or-cast) color —
+ *  the shape the shell passes around for product/nav icons. */
+export type IconLike = ComponentType<{
+    size?: number;
+    color?: IconColor;
+}>;
+//# sourceMappingURL=color.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/product/color.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAErD;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GAAG,mBAAmB,CAAC,OAAO,CAAC,CAAA;AAEpD,wEAAwE;AACxE,eAAO,MAAM,OAAO,GAAI,KAAK,MAAM,KAAG,SAAwC,CAAA;AAE9E;+DAC+D;AAC/D,MAAM,MAAM,QAAQ,GAAG,aAAa,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC,CAAA"}

package/types/product/combobox/filter.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Combobox option filtering — pure, unit-tested.
+ *
+ * The ONE matcher the ComboBox uses to narrow a live option list against typed
+ * text. Matching is a LITERAL, case-insensitive substring over the option's
+ * value + label + hint — NEVER a compiled RegExp of user input (that would be a
+ * ReDoS / injection surface; the whole codebase filters with literal `includes`,
+ * e.g. marketplace/logic + filterOrgs). Kept dependency-free so it lifts into
+ * `@hanzo/ui` alongside the ComboBox.
+ */
+/** One option in a combobox list. `value` is what gets committed; label/hint are display. */
+export type ComboOption = {
+    /** The value committed to the field when this option is chosen. */
+    value: string;
+    /** Display label (defaults to `value`). */
+    label?: string;
+    /** Optional secondary text (e.g. a provider, a description) — also searched. */
+    hint?: string;
+};
+/**
+ * Filter `options` by `query` — a literal, case-insensitive substring over
+ * value/label/hint. An empty/whitespace query returns every option (no filter).
+ * PURE. The input is treated as a plain string, never a pattern.
+ */
+export declare function filterOptions(options: ComboOption[], query: string): ComboOption[];
+/** True iff `value` exactly matches an option's `value` (case-sensitive). */
+export declare function isKnownOption(options: ComboOption[], value: string): boolean;
+//# sourceMappingURL=filter.d.ts.map

package/types/product/combobox/filter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter.d.ts","sourceRoot":"","sources":["../../../src/product/combobox/filter.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,6FAA6F;AAC7F,MAAM,MAAM,WAAW,GAAG;IACxB,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAA;IACb,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gFAAgF;IAChF,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAKD;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,WAAW,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG,WAAW,EAAE,CAIlF;AAED,6EAA6E;AAC7E,wBAAgB,aAAa,CAAC,OAAO,EAAE,WAAW,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAE5E"}

package/types/product/index.d.ts

@@ -0,0 +1,22 @@
+export * from './Charts';
+export { SERIES, colorForIndex, utilColor, Sparkline as MetricSparkline, MiniBars, UtilBar, LegendDot, MetricCard, HintButton, Panel, } from './Metric';
+export { Donut as DonutRing, type DonutSegment } from './Donut';
+export { ComboBox } from './ComboBox';
+export * from './combobox/filter';
+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';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/product/index.ts"],"names":[],"mappings":"AAaA,cAAc,UAAU,CAAA;AAKxB,OAAO,EACL,MAAM,EACN,aAAa,EACb,SAAS,EACT,SAAS,IAAI,eAAe,EAC5B,QAAQ,EACR,OAAO,EACP,SAAS,EACT,UAAU,EACV,UAAU,EACV,KAAK,GACN,MAAM,UAAU,CAAA;AAGjB,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,SAAS,CAAA;AAK/D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,cAAc,mBAAmB,CAAA;AAGjC,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA"}