@hanzo/ui 8.0.7 → 8.0.8

package/package.json

@@ -1,69 +1,90 @@
 {
   "name": "@hanzo/ui",
-  "version": "8.0.7",
+  "version": "8.0.8",
   "type": "module",
   "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": "./types/index.d.ts",
-      "default": "./src/index.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
     },
     "./product": {
-      "types": "./types/product/index.d.ts",
-      "default": "./src/product/index.ts"
+      "types": "./dist/product/index.d.ts",
+      "import": "./dist/product/index.js",
+      "require": "./dist/product/index.cjs",
+      "default": "./dist/product/index.js"
     },
     "./data": {
-      "types": "./types/data.d.ts",
-      "default": "./src/data.ts"
+      "types": "./dist/data.d.ts",
+      "import": "./dist/data.js",
+      "require": "./dist/data.cjs",
+      "default": "./dist/data.js"
     },
     "./primitives/bases/data": {
-      "types": "./types/primitives/bases/data/index.d.ts",
-      "default": "./src/primitives/bases/data/index.ts"
+      "types": "./dist/primitives/bases/data/index.d.ts",
+      "import": "./dist/primitives/bases/data/index.js",
+      "require": "./dist/primitives/bases/data/index.cjs",
+      "default": "./dist/primitives/bases/data/index.js"
     },
     "./gitops": {
-      "types": "./types/gitops.d.ts",
-      "default": "./src/gitops.ts"
+      "types": "./dist/gitops.d.ts",
+      "import": "./dist/gitops.js",
+      "require": "./dist/gitops.cjs",
+      "default": "./dist/gitops.js"
     },
     "./canvas": {
-      "types": "./types/canvas.d.ts",
-      "default": "./src/canvas.ts"
+      "types": "./dist/canvas.d.ts",
+      "import": "./dist/canvas.js",
+      "require": "./dist/canvas.cjs",
+      "default": "./dist/canvas.js"
     },
     "./wallet": {
-      "types": "./types/wallet.d.ts",
-      "default": "./src/wallet.ts"
+      "types": "./dist/wallet.d.ts",
+      "import": "./dist/wallet.js",
+      "require": "./dist/wallet.cjs",
+      "default": "./dist/wallet.js"
     },
     "./network": {
-      "types": "./types/network.d.ts",
-      "default": "./src/network.ts"
+      "types": "./dist/network.d.ts",
+      "import": "./dist/network.js",
+      "require": "./dist/network.cjs",
+      "default": "./dist/network.js"
     },
     "./billing": {
-      "types": "./types/billing.d.ts",
-      "default": "./src/billing.ts"
+      "types": "./dist/billing.d.ts",
+      "import": "./dist/billing.js",
+      "require": "./dist/billing.cjs",
+      "default": "./dist/billing.js"
     },
     "./dashboard": {
-      "types": "./types/dashboard.d.ts",
-      "default": "./src/dashboard.ts"
+      "types": "./dist/dashboard.d.ts",
+      "import": "./dist/dashboard.js",
+      "require": "./dist/dashboard.cjs",
+      "default": "./dist/dashboard.js"
     },
     "./usage": {
-      "types": "./types/usage.d.ts",
-      "default": "./src/usage.ts"
+      "types": "./dist/usage.d.ts",
+      "import": "./dist/usage.js",
+      "require": "./dist/usage.cjs",
+      "default": "./dist/usage.js"
     },
-    "./styles/motion.css": "./src/styles/hanzo-motion.css",
+    "./styles/motion.css": "./dist/styles/hanzo-motion.css",
     "./package.json": "./package.json"
   },
-  "main": "./src/index.ts",
-  "module": "./src/index.ts",
-  "types": "./types/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "sideEffects": [
     "**/*.css"
   ],
   "files": [
-    "src",
-    "types"
+    "dist"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.build.json",
-    "clean": "rm -rf types",
+    "build": "tsup && tsc -p tsconfig.build.json && mkdir -p dist/styles && cp src/styles/hanzo-motion.css dist/styles/hanzo-motion.css && node scripts/add-use-client.mjs",
+    "clean": "rm -rf dist types",
     "prepack": "pnpm run build",
     "tc": "tsc --noEmit",
     "typecheck": "tsc --noEmit",
@@ -120,7 +141,8 @@
     "react-dom": "^19.0.0",
     "typescript": "^5.7.2",
     "vitest": "^4.1.8",
-    "react-native-web": "^0.21.2"
+    "react-native-web": "^0.21.2",
+    "tsup": "^8.5.1"
   },
   "publishConfig": {
     "access": "public"

package/src/billing.ts

@@ -1,9 +0,0 @@
-// @hanzo/ui/billing — the shared billing surface, re-exported from its home
-// module @hanzo/ui-shadcn/billing. `CreditModal` presents trial + prepaid credit
-// buckets with an injected top-up handler (no payment logic in the component).
-// Thin subpath so every console shows the same credit UI:
-//
-//   import { CreditModal } from '@hanzo/ui/billing'
-//
-// Optional peer — only pulled when the subpath is used.
-export * from '@hanzo/ui-shadcn/billing'

package/src/canvas.ts

@@ -1,11 +0,0 @@
-// @hanzo/ui/canvas — the PaaS project canvas, re-exported from its home package
-// @hanzo/canvas (a Railway-grade pannable/zoomable board of service nodes with
-// live status, metric sparklines, deploy timelines, an environment switcher and
-// a service detail drawer). Kept as a thin subpath so a console can
-//
-//   import { ProjectCanvas, ServiceNode, ServiceStatusBadge, DeployTimeline,
-//            EnvSwitcher, ServiceDetailDrawer } from '@hanzo/ui/canvas'
-//
-// while the code lives once in @hanzo/canvas. Optional peer — only pulled when
-// the subpath is used.
-export * from '@hanzo/canvas'

package/src/cd/layout.ts

@@ -1,184 +0,0 @@
-/**
- * Deterministic layered graph layout — pure, no React, no DOM, unit-tested. This
- * is the dependency-free equivalent of the GitOps engine UI's dagre `rankdir:LR`
- * pass: resources flow left→right by ownership depth, each tier a clean column.
- *
- * Three folds:
- *   1. columns — longest-path layering (Kahn topological order). A root (no
- *      incoming edge) sits in column 0; every other node one column right of its
- *      deepest parent. Cycles degrade gracefully (a child keeps its best column),
- *      so a malformed graph can never wedge the layout.
- *   2. order — within a column, nodes are ordered by the barycentre of their
- *      parents' rows (then name), so children cluster under their owner and edge
- *      crossings stay low — dagre's crossing-reduction, cheaply.
- *   3. place — nodes stack top-to-bottom at their own height (pods are taller
- *      than controllers) with a fixed gap, and each column is vertically centred
- *      on a shared axis so tiers read as balanced columns.
- *
- * The same graph always yields byte-identical positions.
- */
-
-export interface LayoutNode {
-  id: string
-  /** Rendered height in px (pods are taller than controllers). */
-  h: number
-}
-
-export interface LayoutEdge {
-  source: string
-  target: string
-}
-
-export interface LayoutOptions {
-  /** Uniform node width in px (x is placed on a fixed column pitch). */
-  nodeWidth?: number
-  /** Horizontal gap between a column's right edge and the next column. */
-  columnGap?: number
-  /** Vertical gap between stacked nodes in a column. */
-  rowGap?: number
-}
-
-export interface PositionedNode {
-  id: string
-  /** Top-left corner, px. */
-  x: number
-  y: number
-  w: number
-  h: number
-  col: number
-}
-
-export interface GraphLayout {
-  nodes: PositionedNode[]
-  /** Content bounds — the transformed layer's intrinsic size. */
-  width: number
-  height: number
-}
-
-const DEFAULTS = { nodeWidth: 260, columnGap: 68, rowGap: 22 } as const
-
-/**
- * Assign each node a column via longest-path layering over the edges. Processes
- * nodes in Kahn topological order; an edge into an unknown/cyclic parent is
- * skipped so a cycle never wedges the pass.
- */
-function assignColumns(ids: string[], edges: LayoutEdge[]): Map<string, number> {
-  const present = new Set(ids)
-  const outgoing = new Map<string, string[]>()
-  const indeg = new Map<string, number>()
-  for (const id of ids) {
-    outgoing.set(id, [])
-    indeg.set(id, 0)
-  }
-  for (const e of edges) {
-    if (!present.has(e.source) || !present.has(e.target) || e.source === e.target) continue
-    outgoing.get(e.source)!.push(e.target)
-    indeg.set(e.target, (indeg.get(e.target) ?? 0) + 1)
-  }
-
-  const column = new Map<string, number>()
-  for (const id of ids) column.set(id, 0)
-
-  const remaining = new Map(indeg)
-  const queue = ids.filter((id) => (remaining.get(id) ?? 0) === 0).sort()
-  const seen = new Set<string>()
-  while (queue.length) {
-    const u = queue.shift()!
-    if (seen.has(u)) continue
-    seen.add(u)
-    const cu = column.get(u) ?? 0
-    for (const v of outgoing.get(u) ?? []) {
-      if (cu + 1 > (column.get(v) ?? 0)) column.set(v, cu + 1)
-      const left = (remaining.get(v) ?? 0) - 1
-      remaining.set(v, left)
-      if (left <= 0 && !seen.has(v)) queue.push(v)
-    }
-    queue.sort()
-  }
-  return column
-}
-
-/**
- * Lay a resource graph out into centred LR columns. Returns one positioned node
- * per input node (input order preserved in the result array) plus content bounds.
- */
-export function layoutTree(
-  nodes: LayoutNode[],
-  edges: LayoutEdge[],
-  opts: LayoutOptions = {}
-): GraphLayout {
-  const nodeWidth = opts.nodeWidth ?? DEFAULTS.nodeWidth
-  const columnGap = opts.columnGap ?? DEFAULTS.columnGap
-  const rowGap = opts.rowGap ?? DEFAULTS.rowGap
-
-  const ids = nodes.map((n) => n.id)
-  const heightOf = new Map(nodes.map((n) => [n.id, n.h]))
-  const column = assignColumns(ids, edges)
-
-  // Parents per node (for the barycentre ordering).
-  const parents = new Map<string, string[]>()
-  for (const id of ids) parents.set(id, [])
-  const present = new Set(ids)
-  for (const e of edges) {
-    if (!present.has(e.source) || !present.has(e.target) || e.source === e.target) continue
-    parents.get(e.target)!.push(e.source)
-  }
-
-  // Group ids by column, preserving input order as the stable tie-break.
-  const inputOrder = new Map(ids.map((id, i) => [id, i]))
-  const byColumn = new Map<number, string[]>()
-  for (const id of ids) {
-    const c = column.get(id) ?? 0
-    const list = byColumn.get(c)
-    if (list) list.push(id)
-    else byColumn.set(c, [id])
-  }
-
-  // Order each column left→right by the barycentre of parents' rows in the
-  // previous column, so children sit under their owner.
-  const rowOrder = new Map<string, number>()
-  const sortedColumns = Array.from(byColumn.keys()).sort((a, b) => a - b)
-  for (const c of sortedColumns) {
-    const list = byColumn.get(c)!
-    list.sort((a, b) => {
-      const key = (id: string): number => {
-        const ps = parents.get(id) ?? []
-        const rows = ps.map((p) => rowOrder.get(p)).filter((r): r is number => r != null)
-        return rows.length ? rows.reduce((s, r) => s + r, 0) / rows.length : Number.POSITIVE_INFINITY
-      }
-      const ka = key(a)
-      const kb = key(b)
-      if (ka !== kb) return ka - kb
-      return (inputOrder.get(a) ?? 0) - (inputOrder.get(b) ?? 0)
-    })
-    list.forEach((id, i) => rowOrder.set(id, i))
-  }
-
-  // Column heights → the shared vertical axis (tallest column centred).
-  const columnHeight = new Map<number, number>()
-  for (const [c, list] of byColumn) {
-    const total = list.reduce((s, id) => s + (heightOf.get(id) ?? 0), 0) + Math.max(0, list.length - 1) * rowGap
-    columnHeight.set(c, total)
-  }
-  const axis = Math.max(0, ...Array.from(columnHeight.values())) / 2
-
-  const pos = new Map<string, { x: number; y: number }>()
-  for (const c of sortedColumns) {
-    const list = byColumn.get(c)!
-    const x = c * (nodeWidth + columnGap)
-    let y = axis - (columnHeight.get(c) ?? 0) / 2
-    for (const id of list) {
-      pos.set(id, { x, y })
-      y += (heightOf.get(id) ?? 0) + rowGap
-    }
-  }
-
-  const positioned: PositionedNode[] = nodes.map((n) => {
-    const p = pos.get(n.id) ?? { x: 0, y: 0 }
-    return { id: n.id, x: p.x, y: p.y, w: nodeWidth, h: n.h, col: column.get(n.id) ?? 0 }
-  })
-
-  const width = positioned.reduce((m, n) => Math.max(m, n.x + n.w), 0)
-  const height = positioned.reduce((m, n) => Math.max(m, n.y + n.h), 0)
-  return { nodes: positioned, width, height }
-}

package/src/cd/status.ts

@@ -1,158 +0,0 @@
-/**
- * CD status → colour, tone, label, priority — the ONE semantic mapping, pure and
- * unit-tested. Everything visual reads from here so a health/sync verdict looks
- * identical in a pill, a tree node's accent, a mini-bar, and the minimap.
- *
- * The hues keep the GitOps meaning (green = healthy/synced, amber = out-of-sync /
- * missing, red = degraded, blue = progressing, purple = suspended, grey =
- * unknown) but are re-tuned for a dark-first surface so they stay legible on
- * near-black without the washed-out look of the light-theme originals.
- */
-import type { HealthStatus, OperationPhase, PodPhase, SyncStatus } from './types'
-
-/** A coarse tone bucket, shared with the rest of @hanzo/ui's tag vocabulary. */
-export type StatusTone = 'green' | 'yellow' | 'red' | 'blue' | 'purple' | 'neutral'
-
-/** The concrete swatch a status renders in: dot/text hue + a soft chip fill. */
-export interface StatusColor {
-  /** The saturated hue — the dot, the accent bar, the pill text. */
-  hue: string
-  tone: StatusTone
-}
-
-// Dark-tuned semantic hues. Bright enough to read as the pill's own text on a
-// near-black surface; the soft chip fill is derived from these at low alpha.
-const HUES: Record<StatusTone, string> = {
-  green: '#22c55e',
-  yellow: '#f5b544',
-  red: '#f4636e',
-  blue: '#38a0f5',
-  purple: '#a684f5',
-  neutral: '#8b96a5',
-}
-
-const HEALTH_TONE: Record<HealthStatus, StatusTone> = {
-  Healthy: 'green',
-  Progressing: 'blue',
-  Degraded: 'red',
-  Suspended: 'purple',
-  Missing: 'yellow',
-  Unknown: 'neutral',
-}
-
-const SYNC_TONE: Record<SyncStatus, StatusTone> = {
-  Synced: 'green',
-  OutOfSync: 'yellow',
-  Unknown: 'neutral',
-}
-
-const OPERATION_TONE: Record<OperationPhase, StatusTone> = {
-  Succeeded: 'green',
-  Running: 'blue',
-  Pending: 'blue',
-  Terminating: 'red',
-  Failed: 'red',
-  Error: 'red',
-}
-
-const POD_TONE: Record<PodPhase, StatusTone> = {
-  Running: 'green',
-  Succeeded: 'green',
-  Pending: 'blue',
-  Failed: 'red',
-  Unknown: 'neutral',
-}
-
-/**
- * Worst-first ordering (lower = worse), so a rollup surfaces the most broken
- * verdict and a sort puts problems on top — matching the GitOps engine's own
- * health precedence.
- */
-export const HEALTH_PRIORITY: Record<HealthStatus, number> = {
-  Missing: 0,
-  Degraded: 1,
-  Unknown: 2,
-  Progressing: 3,
-  Suspended: 4,
-  Healthy: 5,
-}
-
-export const SYNC_PRIORITY: Record<SyncStatus, number> = {
-  OutOfSync: 0,
-  Unknown: 1,
-  Synced: 2,
-}
-
-const HEALTH_SET = new Set<string>(Object.keys(HEALTH_TONE))
-const SYNC_SET = new Set<string>(Object.keys(SYNC_TONE))
-
-/** Coerce a free-form backend string into a known health code (fails to Unknown). */
-export function normalizeHealth(s?: string): HealthStatus {
-  return s && HEALTH_SET.has(s) ? (s as HealthStatus) : 'Unknown'
-}
-
-/** Coerce a free-form backend string into a known sync code (fails to Unknown). */
-export function normalizeSync(s?: string): SyncStatus {
-  return s && SYNC_SET.has(s) ? (s as SyncStatus) : 'Unknown'
-}
-
-export function healthColor(status: HealthStatus): StatusColor {
-  const tone = HEALTH_TONE[status] ?? 'neutral'
-  return { hue: HUES[tone], tone }
-}
-
-export function syncColor(status: SyncStatus): StatusColor {
-  const tone = SYNC_TONE[status] ?? 'neutral'
-  return { hue: HUES[tone], tone }
-}
-
-export function operationColor(phase: OperationPhase): StatusColor {
-  const tone = OPERATION_TONE[phase] ?? 'neutral'
-  return { hue: HUES[tone], tone }
-}
-
-export function podColor(phase: PodPhase): StatusColor {
-  const tone = POD_TONE[phase] ?? 'neutral'
-  return { hue: HUES[tone], tone }
-}
-
-/** The saturated hue for a tone (for callers that already have a tone). */
-export function toneHue(tone: StatusTone): string {
-  return HUES[tone]
-}
-
-/**
- * Roll a set of resource healths up to the single verdict that best describes
- * the whole — the worst one present. Empty ⇒ `Unknown` (honest, never `Healthy`).
- */
-export function worstHealth(statuses: HealthStatus[]): HealthStatus {
-  if (statuses.length === 0) return 'Unknown'
-  return statuses.reduce((worst, s) =>
-    HEALTH_PRIORITY[s] < HEALTH_PRIORITY[worst] ? s : worst
-  )
-}
-
-/** Roll a set of sync verdicts up to one — OutOfSync wins, then Unknown. */
-export function worstSync(statuses: SyncStatus[]): SyncStatus {
-  if (statuses.length === 0) return 'Unknown'
-  return statuses.reduce((worst, s) =>
-    SYNC_PRIORITY[s] < SYNC_PRIORITY[worst] ? s : worst
-  )
-}
-
-/**
- * Parse a `#rgb`/`#rrggbb` hue into an `rgba()` at the given alpha — for the
- * soft chip fills and translucent accents. Non-hex input passes through (so a
- * caller may hand a hue that's already `rgba(...)`).
- */
-export function withAlpha(hex: string, alpha: number): string {
-  const m = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.exec(hex)
-  if (!m) return hex
-  let h = m[1]
-  if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2]
-  const r = parseInt(h.slice(0, 2), 16)
-  const g = parseInt(h.slice(2, 4), 16)
-  const b = parseInt(h.slice(4, 6), 16)
-  const a = Math.max(0, Math.min(1, alpha))
-  return `rgba(${r}, ${g}, ${b}, ${a})`
-}

package/src/cd/time.ts

@@ -1,52 +0,0 @@
-/**
- * Compact relative time — pure and deterministic given `now`. Future or invalid
- * timestamps degrade honestly (`—` / `now`), never a fabricated duration. Shared
- * by the tile's last-synced, the drawer's created/age, and the history rows.
- */
-export function relativeTime(
-  epochMs: number | undefined | null,
-  now: number = Date.now()
-): string {
-  if (epochMs == null || !Number.isFinite(epochMs) || epochMs <= 0) return '—'
-  const diff = now - epochMs
-  if (diff < 0) return 'now'
-  const s = Math.floor(diff / 1000)
-  if (s < 5) return 'now'
-  if (s < 60) return `${s}s ago`
-  const m = Math.floor(s / 60)
-  if (m < 60) return `${m}m ago`
-  const h = Math.floor(m / 60)
-  if (h < 24) return `${h}h ago`
-  const d = Math.floor(h / 24)
-  if (d < 7) return `${d}d ago`
-  const w = Math.floor(d / 7)
-  if (w < 5) return `${w}w ago`
-  const mo = Math.floor(d / 30)
-  if (mo < 12) return `${mo}mo ago`
-  const y = Math.floor(d / 365)
-  return `${y}y ago`
-}
-
-/**
- * Parse an ISO-8601 (or any `Date`-parseable) timestamp to epoch **ms**, or
- * `undefined` when absent/unparseable — so the contract's string timestamps
- * (`createdAt`, event times) flow into `relativeTime` without throwing.
- */
-export function toEpochMs(v: string | number | undefined | null): number | undefined {
-  if (v == null) return undefined
-  if (typeof v === 'number') {
-    if (!Number.isFinite(v) || v <= 0) return undefined
-    // Hanzo `/v1` rows may report epoch seconds; scale sub-2001 values to ms.
-    return v < 1e12 ? Math.round(v * 1000) : Math.round(v)
-  }
-  const t = Date.parse(v)
-  return Number.isFinite(t) && t > 0 ? t : undefined
-}
-
-/** Relative time for a string/number timestamp (parses, then formats). */
-export function relativeTimeOf(
-  v: string | number | undefined | null,
-  now: number = Date.now()
-): string {
-  return relativeTime(toEpochMs(v), now)
-}