@hanzo/ui 8.0.26 → 8.0.28

package/dist/styles/hanzo-motion.css

@@ -0,0 +1,188 @@
+/* @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;
+  }
+}
+
+/* ── Typography + surface classes the product layer's components reference ──────
+   DataTable/Metric typeset numeric cells with `hz-mono`/`hz-tnum`; ComboBox and
+   SelectMenu paint their popovers with `hz-paper hz-menu-in`; DataTable rows use
+   `hz-row`. They travel WITH the components (this is the package's one stylesheet)
+   so any host that imports `@hanzo/ui/styles/motion.css` renders them correctly.
+   The elevation/ring variables fall back to sane values, so a host that defines its
+   own `--hz-*` theme tokens (the console does) still wins. */
+
+.hz-tnum {
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: 'tnum' 1;
+}
+
+/* Data/numeric face — Geist Mono + tabular figures for metric values, prices, IDs
+   and counts, so numbers read as precise, column-aligned data. */
+.hz-mono {
+  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: 'tnum' 1;
+  letter-spacing: -0.01em;
+}
+
+.hz-paper {
+  box-shadow: var(--hz-ring, inset 0 0 0 1px rgba(255, 255, 255, 0.08)),
+    var(--hz-paper-highlight, inset 0 1px 0 0 rgba(255, 255, 255, 0.05)),
+    var(--hz-elevation-3, 0 8px 24px rgba(0, 0, 0, 0.36));
+}
+
+@keyframes hz-menu-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.hz-menu-in {
+  animation: hz-menu-in 140ms ease-out both;
+  will-change: opacity;
+}
+
+.hz-row {
+  transition: background-color 140ms ease-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hz-menu-in {
+    animation: none;
+  }
+}

package/dist/telemetry.cjs

@@ -1,14 +1,31 @@
-'use strict';
-
-var telemetry = require('@hanzogui/telemetry');
-
-
-
-Object.keys(telemetry).forEach(function (k) {
-	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
-		enumerable: true,
-		get: function () { return telemetry[k]; }
-	});
-});
-//# sourceMappingURL=telemetry.cjs.map
-//# sourceMappingURL=telemetry.cjs.map
+'use client';"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// @hanzo/ui/telemetry — the ONE telemetry surface, re-exported from its home in
+// the framework layer (@hanzogui/telemetry) so an app that already depends on
+// @hanzo/ui adds no new dependency and nothing is defined twice:
+//
+//   import { TelemetryProvider } from '@hanzo/ui/telemetry'
+//   <TelemetryProvider>{children}</TelemetryProvider>
+//
+// That is the whole setup. With no configuration it wires all three planes —
+// errors + session capture (sentry.hanzo.ai), pageviews (analytics.hanzo.ai),
+// and product events incl. analytics_errors (insights.hanzo.ai) — through the
+// ONE front door, POST api.hanzo.ai/v1/event. Honors DNT/GPC, consent-aware,
+// SSR-safe, fail-soft, no CDN script.
+//
+// Optional peer — only pulled when the subpath is used.
+__exportStar(require("@hanzogui/telemetry"), exports);

package/dist/telemetry.d.ts

@@ -1 +1,2 @@
 export * from '@hanzogui/telemetry';
+//# sourceMappingURL=telemetry.d.ts.map

package/dist/telemetry.d.ts.map

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

package/dist/telemetry.js

@@ -1,3 +1,16 @@
+'use client';// @hanzo/ui/telemetry — the ONE telemetry surface, re-exported from its home in
+// the framework layer (@hanzogui/telemetry) so an app that already depends on
+// @hanzo/ui adds no new dependency and nothing is defined twice:
+//
+//   import { TelemetryProvider } from '@hanzo/ui/telemetry'
+//   <TelemetryProvider>{children}</TelemetryProvider>
+//
+// That is the whole setup. With no configuration it wires all three planes —
+// errors + session capture (sentry.hanzo.ai), pageviews (analytics.hanzo.ai),
+// and product events incl. analytics_errors (insights.hanzo.ai) — through the
+// ONE front door, POST api.hanzo.ai/v1/event. Honors DNT/GPC, consent-aware,
+// SSR-safe, fail-soft, no CDN script.
+//
+// Optional peer — only pulled when the subpath is used.
 export * from '@hanzogui/telemetry';
-//# sourceMappingURL=telemetry.js.map
 //# sourceMappingURL=telemetry.js.map

package/dist/telemetry.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"telemetry.js","sourcesContent":[]}
+{"version":3,"file":"telemetry.js","sourceRoot":"","sources":["../src/telemetry.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,8EAA8E;AAC9E,iEAAiE;AACjE,EAAE;AACF,4DAA4D;AAC5D,sDAAsD;AACtD,EAAE;AACF,6EAA6E;AAC7E,8EAA8E;AAC9E,8EAA8E;AAC9E,6EAA6E;AAC7E,sCAAsC;AACtC,EAAE;AACF,wDAAwD;AACxD,cAAc,qBAAqB,CAAA"}

package/dist/theme.css

@@ -0,0 +1,185 @@
+/**
+ * @hanzo/ui — the Hanzo visual identity, self-contained.
+ *
+ *   import '@hanzo/ui/theme.css'
+ *
+ * Defines EVERY standard design token the components reference, so `@hanzo/ui`
+ * never depends on a consumer having pre-declared them (the bug this rework
+ * fixes: components that reached for tokens the host didn't define rendered
+ * transparent). Values originate in `@hanzo/tokens` (dark/light theme sets) —
+ * the same source `@hanzo/ui/tokens` exposes to code — so CSS and runtime agree.
+ *
+ * Dark-first Hanzo identity: neutral zinc-on-black, calm, high-contrast. Add
+ * `class="dark"` on <html> for the canonical dark look; `:root` is the light
+ * counterpart. Typography is Geist Sans (UI/body) + Geist Mono (code) — bound
+ * through `--font-geist-sans` / `--font-geist-mono`; a host that loads Geist
+ * (next/font, @fontsource, CDN) binds those variables and everything inherits
+ * it. No Inter, no system-stack default anywhere.
+ *
+ * Plain CSS, nothing else: `:root`/`.dark` custom properties plus the base font
+ * and the touch/elevation rules the components name. The Tailwind v4 `@theme
+ * inline` block that used to map these onto utilities is gone with Tailwind.
+ */
+
+
+/* Geist family fallbacks — a host that binds --font-geist-sans/-mono (e.g. via
+   next/font) overrides these; otherwise the named Geist families are used if
+   installed, with a final generic fallback. Never Inter. */
+:root {
+  --font-geist-sans: var(--font-geist-sans-provided, 'Geist');
+  --font-geist-mono: var(--font-geist-mono-provided, 'Geist Mono');
+}
+
+/* Light identity (the counterpart to dark-first). */
+:root {
+  --radius: 0.5rem;
+
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+/* Dark-first Hanzo identity — neutral zinc-on-black. */
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.269 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.371 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+/* Geist by default — UI/body inherits Geist Sans; code/mono surfaces get Geist
+   Mono. Components never hard-code a family; they inherit this or bind
+   `font-sans`/`font-mono` (which resolve to Geist above). */
+:where(html, body) {
+  font-family: var(--font-geist-sans), sans-serif;
+}
+
+:where(code, kbd, samp, pre) {
+  font-family: var(--font-geist-mono), monospace;
+}
+
+/* ── Touch targets ────────────────────────────────────────────────────────────
+   The 44px floor on web/Tauri. gui drops `hitSlop` on web (it is a native-only
+   prop), so `touch()` in the gui backend emits data-touch-x / data-touch-y and
+   these rules expand the hit box with a transparent ::after overlay — no layout
+   shift, no padding hack. Native takes hitSlop instead and ignores all of this. */
+[data-touch-x]::after,
+[data-touch-y]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: auto;
+}
+[data-touch-x="1"]::after { left: -1px; right: -1px; }
+[data-touch-x="2"]::after { left: -2px; right: -2px; }
+[data-touch-x="3"]::after { left: -3px; right: -3px; }
+[data-touch-x="4"]::after { left: -4px; right: -4px; }
+[data-touch-x="5"]::after { left: -5px; right: -5px; }
+[data-touch-x="6"]::after { left: -6px; right: -6px; }
+[data-touch-x="7"]::after { left: -7px; right: -7px; }
+[data-touch-x="8"]::after { left: -8px; right: -8px; }
+[data-touch-x="9"]::after { left: -9px; right: -9px; }
+[data-touch-x="10"]::after { left: -10px; right: -10px; }
+[data-touch-x="11"]::after { left: -11px; right: -11px; }
+[data-touch-x="12"]::after { left: -12px; right: -12px; }
+[data-touch-x="13"]::after { left: -13px; right: -13px; }
+[data-touch-x="14"]::after { left: -14px; right: -14px; }
+[data-touch-x="15"]::after { left: -15px; right: -15px; }
+[data-touch-x="16"]::after { left: -16px; right: -16px; }
+[data-touch-x="17"]::after { left: -17px; right: -17px; }
+[data-touch-x="18"]::after { left: -18px; right: -18px; }
+[data-touch-x="19"]::after { left: -19px; right: -19px; }
+[data-touch-x="20"]::after { left: -20px; right: -20px; }
+[data-touch-x="21"]::after { left: -21px; right: -21px; }
+[data-touch-x="22"]::after { left: -22px; right: -22px; }
+[data-touch-x="23"]::after { left: -23px; right: -23px; }
+[data-touch-x="24"]::after { left: -24px; right: -24px; }
+[data-touch-y="1"]::after { top: -1px; bottom: -1px; }
+[data-touch-y="2"]::after { top: -2px; bottom: -2px; }
+[data-touch-y="3"]::after { top: -3px; bottom: -3px; }
+[data-touch-y="4"]::after { top: -4px; bottom: -4px; }
+[data-touch-y="5"]::after { top: -5px; bottom: -5px; }
+[data-touch-y="6"]::after { top: -6px; bottom: -6px; }
+[data-touch-y="7"]::after { top: -7px; bottom: -7px; }
+[data-touch-y="8"]::after { top: -8px; bottom: -8px; }
+[data-touch-y="9"]::after { top: -9px; bottom: -9px; }
+[data-touch-y="10"]::after { top: -10px; bottom: -10px; }
+[data-touch-y="11"]::after { top: -11px; bottom: -11px; }
+[data-touch-y="12"]::after { top: -12px; bottom: -12px; }
+[data-touch-y="13"]::after { top: -13px; bottom: -13px; }
+[data-touch-y="14"]::after { top: -14px; bottom: -14px; }
+[data-touch-y="15"]::after { top: -15px; bottom: -15px; }
+[data-touch-y="16"]::after { top: -16px; bottom: -16px; }
+[data-touch-y="17"]::after { top: -17px; bottom: -17px; }
+[data-touch-y="18"]::after { top: -18px; bottom: -18px; }
+[data-touch-y="19"]::after { top: -19px; bottom: -19px; }
+[data-touch-y="20"]::after { top: -20px; bottom: -20px; }
+[data-touch-y="21"]::after { top: -21px; bottom: -21px; }
+[data-touch-y="22"]::after { top: -22px; bottom: -22px; }
+[data-touch-y="23"]::after { top: -23px; bottom: -23px; }
+[data-touch-y="24"]::after { top: -24px; bottom: -24px; }
+
+/* Elevation ladder — the shadow steps components name by class. */
+.hz-elevation-1 { box-shadow: var(--hz-elevation-1, 0 1px 2px rgba(0, 0, 0, 0.16)); }
+.hz-elevation-2 { box-shadow: var(--hz-elevation-2, 0 4px 12px rgba(0, 0, 0, 0.24)); }
+.hz-elevation-3 { box-shadow: var(--hz-elevation-3, 0 8px 24px rgba(0, 0, 0, 0.36)); }
+.hz-elevation-4 { box-shadow: var(--hz-elevation-4, 0 16px 48px rgba(0, 0, 0, 0.44)); }

package/dist/usage.cjs

@@ -1,14 +1,24 @@
-'use strict';
-
-var usage = require('@hanzo/usage');
-
-
-
-Object.keys(usage).forEach(function (k) {
-	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
-		enumerable: true,
-		get: function () { return usage[k]; }
-	});
-});
-//# sourceMappingURL=usage.cjs.map
-//# sourceMappingURL=usage.cjs.map
+'use client';"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// @hanzo/ui/usage — the shared AI-usage surface (the meter bar → provider card →
+// dashboard progression), re-exported from its home package @hanzo/usage. Thin
+// subpath so every console shows the same quota UI:
+//
+//   import { UsageMeter, UsageProviderCard, UsageDashboard } from '@hanzo/ui/usage'
+//
+// Optional peer — only pulled when the subpath is used.
+__exportStar(require("@hanzo/usage"), exports);

package/dist/usage.d.ts

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

package/dist/usage.d.ts.map

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

package/dist/usage.js

@@ -1,3 +1,9 @@
+'use client';// @hanzo/ui/usage — the shared AI-usage surface (the meter bar → provider card →
+// dashboard progression), re-exported from its home package @hanzo/usage. Thin
+// subpath so every console shows the same quota UI:
+//
+//   import { UsageMeter, UsageProviderCard, UsageDashboard } from '@hanzo/ui/usage'
+//
+// Optional peer — only pulled when the subpath is used.
 export * from '@hanzo/usage';
-//# sourceMappingURL=usage.js.map
 //# sourceMappingURL=usage.js.map

package/dist/usage.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"usage.js","sourcesContent":[]}
+{"version":3,"file":"usage.js","sourceRoot":"","sources":["../src/usage.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,+EAA+E;AAC/E,oDAAoD;AACpD,EAAE;AACF,oFAAoF;AACpF,EAAE;AACF,wDAAwD;AACxD,cAAc,cAAc,CAAA"}