@hanzo/ui 8.0.61 → 8.0.62

package/dist/product/tone.cjs

@@ -0,0 +1,105 @@
+"use strict";
+/**
+ * What a status string MEANS, and how a monochrome ladder says it.
+ *
+ * Provisioned things report free-form lifecycle strings — a cluster is
+ * `provisioning`, an invoice is `past_due`, a deploy is `succeeded` — and every
+ * list that renders them invented its own vocabulary. This is the one mapping.
+ *
+ * There are four tones and they are named for the STATE, not for a colour,
+ * because this system has no colour to spend: the pills are rungs of the grey
+ * ladder. `settled` is the steady state, `moving` is in flight, `stopped` will
+ * not proceed without you, `quiet` has nothing to report.
+ *
+ * `stopped` is set apart by an EDGE rather than a heavier fill, which is the
+ * same choice `Fieldset` makes for its destructive register: with hue
+ * unavailable, an outline is what distinguishes "this one" from its neighbours.
+ * Every tone therefore carries a border — transparent on three of them — so
+ * turning one on shifts no layout in a table of fifty rows.
+ *
+ * Pure data and one pure function: `@hanzo/ui/product/pure` exports both, so a
+ * billing surface can assert that `past_due` reads as an alarm without mounting
+ * a pill.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tone = exports.TONE = void 0;
+/** The gui tokens each tone paints with. `as const` keeps the literal types the
+ *  `bg`/`color`/`borderColor` unions require. */
+exports.TONE = {
+    settled: { bg: '$color5', color: '$color12', borderColor: 'transparent' },
+    moving: { bg: '$color4', color: '$color12', borderColor: 'transparent' },
+    stopped: { bg: '$color4', color: '$color12', borderColor: '$color9' },
+    quiet: { bg: '$color3', color: '$color11', borderColor: 'transparent' },
+};
+/** `Past Due`, `past-due` and `PAST_DUE` are the same status. Fold the shapes a
+ *  dozen backends spell it in down to one key before looking it up. */
+const key = (status) => status.trim().toLowerCase().replace(/[^a-z0-9]+/g, '_');
+const OF = {
+    // Platform health verdicts arrive as the traffic-light words themselves (the
+    // apps inventory reports green/yellow/red directly), so they are inputs here
+    // even though nothing downstream is coloured.
+    green: 'settled',
+    yellow: 'moving',
+    red: 'stopped',
+    // Resources and deploys — reached a steady state.
+    ready: 'settled',
+    active: 'settled',
+    running: 'settled',
+    available: 'settled',
+    ok: 'settled',
+    live: 'settled',
+    succeeded: 'settled',
+    connected: 'settled',
+    synced: 'settled',
+    imported: 'settled',
+    // Resources and deploys — in flight.
+    creating: 'moving',
+    provisioning: 'moving',
+    pending: 'moving',
+    updating: 'moving',
+    attaching: 'moving',
+    building: 'moving',
+    deploying: 'moving',
+    queued: 'moving',
+    importing: 'moving',
+    // Resources and deploys — stopped.
+    error: 'stopped',
+    failed: 'stopped',
+    degraded: 'stopped',
+    down: 'stopped',
+    canceled: 'stopped',
+    conflict: 'stopped',
+    // Money. An invoice, a charge or a subscription reports its own lifecycle and
+    // every billing surface in the fleet re-derived it: `paid` is done, `open` is
+    // waiting on the customer, `past_due` is waiting on someone to act, and a
+    // `draft` or a `void` invoice is a record of something that never happened.
+    paid: 'settled',
+    settled: 'settled',
+    complete: 'settled',
+    completed: 'settled',
+    fulfilled: 'settled',
+    trialing: 'settled',
+    open: 'moving',
+    processing: 'moving',
+    scheduled: 'moving',
+    incomplete: 'moving',
+    authorized: 'moving',
+    past_due: 'stopped',
+    overdue: 'stopped',
+    unpaid: 'stopped',
+    uncollectible: 'stopped',
+    disputed: 'stopped',
+    chargeback: 'stopped',
+    declined: 'stopped',
+    expired: 'stopped',
+    draft: 'quiet',
+    void: 'quiet',
+    voided: 'quiet',
+    refunded: 'quiet',
+    paused: 'quiet',
+    archived: 'quiet',
+};
+/** The tone a status reports in. Anything unrecognised is `quiet` — a status
+ *  this table has never seen is not an alarm, it is an unknown. */
+const tone = (status) => OF[key(status)] ?? 'quiet';
+exports.tone = tone;

package/dist/product/tone.d.ts

@@ -0,0 +1,52 @@
+/**
+ * What a status string MEANS, and how a monochrome ladder says it.
+ *
+ * Provisioned things report free-form lifecycle strings — a cluster is
+ * `provisioning`, an invoice is `past_due`, a deploy is `succeeded` — and every
+ * list that renders them invented its own vocabulary. This is the one mapping.
+ *
+ * There are four tones and they are named for the STATE, not for a colour,
+ * because this system has no colour to spend: the pills are rungs of the grey
+ * ladder. `settled` is the steady state, `moving` is in flight, `stopped` will
+ * not proceed without you, `quiet` has nothing to report.
+ *
+ * `stopped` is set apart by an EDGE rather than a heavier fill, which is the
+ * same choice `Fieldset` makes for its destructive register: with hue
+ * unavailable, an outline is what distinguishes "this one" from its neighbours.
+ * Every tone therefore carries a border — transparent on three of them — so
+ * turning one on shifts no layout in a table of fifty rows.
+ *
+ * Pure data and one pure function: `@hanzo/ui/product/pure` exports both, so a
+ * billing surface can assert that `past_due` reads as an alarm without mounting
+ * a pill.
+ */
+/** The register a status reports in. */
+export type Tone = 'settled' | 'moving' | 'stopped' | 'quiet';
+/** The gui tokens each tone paints with. `as const` keeps the literal types the
+ *  `bg`/`color`/`borderColor` unions require. */
+export declare const TONE: {
+    readonly settled: {
+        readonly bg: "$color5";
+        readonly color: "$color12";
+        readonly borderColor: "transparent";
+    };
+    readonly moving: {
+        readonly bg: "$color4";
+        readonly color: "$color12";
+        readonly borderColor: "transparent";
+    };
+    readonly stopped: {
+        readonly bg: "$color4";
+        readonly color: "$color12";
+        readonly borderColor: "$color9";
+    };
+    readonly quiet: {
+        readonly bg: "$color3";
+        readonly color: "$color11";
+        readonly borderColor: "transparent";
+    };
+};
+/** The tone a status reports in. Anything unrecognised is `quiet` — a status
+ *  this table has never seen is not an alarm, it is an unknown. */
+export declare const tone: (status: string) => Tone;
+//# sourceMappingURL=tone.d.ts.map

package/dist/product/tone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tone.d.ts","sourceRoot":"","sources":["../../src/product/tone.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,wCAAwC;AACxC,MAAM,MAAM,IAAI,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAA;AAE7D;iDACiD;AACjD,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;CAKP,CAAA;AA+EV;mEACmE;AACnE,eAAO,MAAM,IAAI,GAAI,QAAQ,MAAM,KAAG,IAAkC,CAAA"}

package/dist/product/tone.js

@@ -0,0 +1,102 @@
+/**
+ * What a status string MEANS, and how a monochrome ladder says it.
+ *
+ * Provisioned things report free-form lifecycle strings — a cluster is
+ * `provisioning`, an invoice is `past_due`, a deploy is `succeeded` — and every
+ * list that renders them invented its own vocabulary. This is the one mapping.
+ *
+ * There are four tones and they are named for the STATE, not for a colour,
+ * because this system has no colour to spend: the pills are rungs of the grey
+ * ladder. `settled` is the steady state, `moving` is in flight, `stopped` will
+ * not proceed without you, `quiet` has nothing to report.
+ *
+ * `stopped` is set apart by an EDGE rather than a heavier fill, which is the
+ * same choice `Fieldset` makes for its destructive register: with hue
+ * unavailable, an outline is what distinguishes "this one" from its neighbours.
+ * Every tone therefore carries a border — transparent on three of them — so
+ * turning one on shifts no layout in a table of fifty rows.
+ *
+ * Pure data and one pure function: `@hanzo/ui/product/pure` exports both, so a
+ * billing surface can assert that `past_due` reads as an alarm without mounting
+ * a pill.
+ */
+/** The gui tokens each tone paints with. `as const` keeps the literal types the
+ *  `bg`/`color`/`borderColor` unions require. */
+export const TONE = {
+    settled: { bg: '$color5', color: '$color12', borderColor: 'transparent' },
+    moving: { bg: '$color4', color: '$color12', borderColor: 'transparent' },
+    stopped: { bg: '$color4', color: '$color12', borderColor: '$color9' },
+    quiet: { bg: '$color3', color: '$color11', borderColor: 'transparent' },
+};
+/** `Past Due`, `past-due` and `PAST_DUE` are the same status. Fold the shapes a
+ *  dozen backends spell it in down to one key before looking it up. */
+const key = (status) => status.trim().toLowerCase().replace(/[^a-z0-9]+/g, '_');
+const OF = {
+    // Platform health verdicts arrive as the traffic-light words themselves (the
+    // apps inventory reports green/yellow/red directly), so they are inputs here
+    // even though nothing downstream is coloured.
+    green: 'settled',
+    yellow: 'moving',
+    red: 'stopped',
+    // Resources and deploys — reached a steady state.
+    ready: 'settled',
+    active: 'settled',
+    running: 'settled',
+    available: 'settled',
+    ok: 'settled',
+    live: 'settled',
+    succeeded: 'settled',
+    connected: 'settled',
+    synced: 'settled',
+    imported: 'settled',
+    // Resources and deploys — in flight.
+    creating: 'moving',
+    provisioning: 'moving',
+    pending: 'moving',
+    updating: 'moving',
+    attaching: 'moving',
+    building: 'moving',
+    deploying: 'moving',
+    queued: 'moving',
+    importing: 'moving',
+    // Resources and deploys — stopped.
+    error: 'stopped',
+    failed: 'stopped',
+    degraded: 'stopped',
+    down: 'stopped',
+    canceled: 'stopped',
+    conflict: 'stopped',
+    // Money. An invoice, a charge or a subscription reports its own lifecycle and
+    // every billing surface in the fleet re-derived it: `paid` is done, `open` is
+    // waiting on the customer, `past_due` is waiting on someone to act, and a
+    // `draft` or a `void` invoice is a record of something that never happened.
+    paid: 'settled',
+    settled: 'settled',
+    complete: 'settled',
+    completed: 'settled',
+    fulfilled: 'settled',
+    trialing: 'settled',
+    open: 'moving',
+    processing: 'moving',
+    scheduled: 'moving',
+    incomplete: 'moving',
+    authorized: 'moving',
+    past_due: 'stopped',
+    overdue: 'stopped',
+    unpaid: 'stopped',
+    uncollectible: 'stopped',
+    disputed: 'stopped',
+    chargeback: 'stopped',
+    declined: 'stopped',
+    expired: 'stopped',
+    draft: 'quiet',
+    void: 'quiet',
+    voided: 'quiet',
+    refunded: 'quiet',
+    paused: 'quiet',
+    archived: 'quiet',
+};
+/** The tone a status reports in. Anything unrecognised is `quiet` — a status
+ *  this table has never seen is not an alarm, it is an unknown. */
+export const tone = (status) => OF[key(status)] ?? 'quiet';
+//# sourceMappingURL=tone.js.map

package/dist/product/tone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tone.js","sourceRoot":"","sources":["../../src/product/tone.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAKH;iDACiD;AACjD,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,OAAO,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE;IACzE,MAAM,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE;IACxE,OAAO,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE;IACrE,KAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE;CAC/D,CAAA;AAEV;uEACuE;AACvE,MAAM,GAAG,GAAG,CAAC,MAAc,EAAU,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,aAAa,EAAE,GAAG,CAAC,CAAA;AAE/F,MAAM,EAAE,GAAyB;IAC/B,6EAA6E;IAC7E,6EAA6E;IAC7E,8CAA8C;IAC9C,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,QAAQ;IAChB,GAAG,EAAE,SAAS;IAEd,kDAAkD;IAClD,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,SAAS;IACpB,EAAE,EAAE,SAAS;IACb,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,SAAS;IAEnB,qCAAqC;IACrC,QAAQ,EAAE,QAAQ;IAClB,YAAY,EAAE,QAAQ;IACtB,OAAO,EAAE,QAAQ;IACjB,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,QAAQ;IACnB,MAAM,EAAE,QAAQ;IAChB,SAAS,EAAE,QAAQ;IAEnB,mCAAmC;IACnC,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,SAAS;IACnB,IAAI,EAAE,SAAS;IACf,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IAEnB,8EAA8E;IAC9E,8EAA8E;IAC9E,0EAA0E;IAC1E,4EAA4E;IAC5E,IAAI,EAAE,SAAS;IACf,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE,SAAS;IAEnB,IAAI,EAAE,QAAQ;IACd,UAAU,EAAE,QAAQ;IACpB,SAAS,EAAE,QAAQ;IACnB,UAAU,EAAE,QAAQ;IACpB,UAAU,EAAE,QAAQ;IAEpB,QAAQ,EAAE,SAAS;IACnB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,SAAS;IACjB,aAAa,EAAE,SAAS;IACxB,QAAQ,EAAE,SAAS;IACnB,UAAU,EAAE,SAAS;IACrB,QAAQ,EAAE,SAAS;IACnB,OAAO,EAAE,SAAS;IAElB,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,OAAO;IACb,MAAM,EAAE,OAAO;IACf,QAAQ,EAAE,OAAO;IACjB,MAAM,EAAE,OAAO;IACf,QAAQ,EAAE,OAAO;CAClB,CAAA;AAED;mEACmE;AACnE,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,MAAc,EAAQ,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,IAAI,OAAO,CAAA"}

package/dist/product/useCommandK.cjs

@@ -0,0 +1,46 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCommandK = useCommandK;
+/**
+ * useCommandK — the ONE keybinding for the command palette.
+ *
+ * ⌘K / Ctrl-K always toggles (even from a text field — it is the universal
+ * palette shortcut and nothing else may claim it). `/` also opens it, but ONLY
+ * when the user is NOT typing in a field, so a slash inside an input, a textarea
+ * or a contenteditable types a slash. Pass `slash: false` to bind ⌘K alone.
+ *
+ * That second rule is why chat needs no exception written for it. Its composer is
+ * a TEXTAREA, so the global `/` never fires there and the composer's own prompts
+ * popover keeps the key it has. The same rule makes a `/` typed into the palette's
+ * own input a literal slash. There is no precedence to encode — the one condition
+ * already answers all three, and the instinct to add an exception would be adding
+ * dead code.
+ *
+ * One hook, so every surface that hosts the palette shares identical behaviour
+ * instead of a divergent inline listener each. It moved here from hanzo.app,
+ * which is where it was already correct.
+ */
+const react_1 = require("react");
+function isEditable(target) {
+    const el = target;
+    if (!el || typeof HTMLElement === "undefined" || !(el instanceof HTMLElement))
+        return false;
+    const tag = el.tagName;
+    return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || el.isContentEditable;
+}
+function useCommandK(onTrigger, opts) {
+    const slash = opts?.slash !== false;
+    (0, react_1.useEffect)(() => {
+        const onKey = (e) => {
+            const cmdK = (e.metaKey || e.ctrlKey) && !e.altKey && e.key.toLowerCase() === "k";
+            const slashKey = slash && e.key === "/" && !e.metaKey && !e.ctrlKey && !e.altKey && !isEditable(e.target);
+            if (cmdK || slashKey) {
+                e.preventDefault();
+                onTrigger();
+            }
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [onTrigger, slash]);
+}

package/dist/product/useCommandK.d.ts

@@ -0,0 +1,4 @@
+export declare function useCommandK(onTrigger: () => void, opts?: {
+    slash?: boolean;
+}): void;
+//# sourceMappingURL=useCommandK.d.ts.map

package/dist/product/useCommandK.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCommandK.d.ts","sourceRoot":"","sources":["../../src/product/useCommandK.ts"],"names":[],"mappings":"AA8BA,wBAAgB,WAAW,CAAC,SAAS,EAAE,MAAM,IAAI,EAAE,IAAI,CAAC,EAAE;IAAE,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,IAAI,CAenF"}

package/dist/product/useCommandK.js

@@ -0,0 +1,44 @@
+'use client';
+/**
+ * useCommandK — the ONE keybinding for the command palette.
+ *
+ * ⌘K / Ctrl-K always toggles (even from a text field — it is the universal
+ * palette shortcut and nothing else may claim it). `/` also opens it, but ONLY
+ * when the user is NOT typing in a field, so a slash inside an input, a textarea
+ * or a contenteditable types a slash. Pass `slash: false` to bind ⌘K alone.
+ *
+ * That second rule is why chat needs no exception written for it. Its composer is
+ * a TEXTAREA, so the global `/` never fires there and the composer's own prompts
+ * popover keeps the key it has. The same rule makes a `/` typed into the palette's
+ * own input a literal slash. There is no precedence to encode — the one condition
+ * already answers all three, and the instinct to add an exception would be adding
+ * dead code.
+ *
+ * One hook, so every surface that hosts the palette shares identical behaviour
+ * instead of a divergent inline listener each. It moved here from hanzo.app,
+ * which is where it was already correct.
+ */
+import { useEffect } from "react";
+function isEditable(target) {
+    const el = target;
+    if (!el || typeof HTMLElement === "undefined" || !(el instanceof HTMLElement))
+        return false;
+    const tag = el.tagName;
+    return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || el.isContentEditable;
+}
+export function useCommandK(onTrigger, opts) {
+    const slash = opts?.slash !== false;
+    useEffect(() => {
+        const onKey = (e) => {
+            const cmdK = (e.metaKey || e.ctrlKey) && !e.altKey && e.key.toLowerCase() === "k";
+            const slashKey = slash && e.key === "/" && !e.metaKey && !e.ctrlKey && !e.altKey && !isEditable(e.target);
+            if (cmdK || slashKey) {
+                e.preventDefault();
+                onTrigger();
+            }
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [onTrigger, slash]);
+}
+//# sourceMappingURL=useCommandK.js.map

package/dist/product/useCommandK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCommandK.js","sourceRoot":"","sources":["../../src/product/useCommandK.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,SAAS,UAAU,CAAC,MAA0B;IAC5C,MAAM,EAAE,GAAG,MAA4B,CAAA;IACvC,IAAI,CAAC,EAAE,IAAI,OAAO,WAAW,KAAK,WAAW,IAAI,CAAC,CAAC,EAAE,YAAY,WAAW,CAAC;QAAE,OAAO,KAAK,CAAA;IAC3F,MAAM,GAAG,GAAG,EAAE,CAAC,OAAO,CAAA;IACtB,OAAO,GAAG,KAAK,OAAO,IAAI,GAAG,KAAK,UAAU,IAAI,GAAG,KAAK,QAAQ,IAAI,EAAE,CAAC,iBAAiB,CAAA;AAC1F,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,SAAqB,EAAE,IAA0B;IAC3E,MAAM,KAAK,GAAG,IAAI,EAAE,KAAK,KAAK,KAAK,CAAA;IACnC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,CAAC,CAAgB,EAAE,EAAE;YACjC,MAAM,IAAI,GAAG,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,GAAG,CAAA;YACjF,MAAM,QAAQ,GACZ,KAAK,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;YAC1F,IAAI,IAAI,IAAI,QAAQ,EAAE,CAAC;gBACrB,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,SAAS,EAAE,CAAA;YACb,CAAC;QACH,CAAC,CAAA;QACD,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAA;QACzC,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAA;IAC3D,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAA;AACxB,CAAC"}

package/dist/styles/motion.css

@@ -4,11 +4,25 @@
    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'  */
+   Import once at the app root:  import '@hanzo/ui/styles/motion.css'
+
+   ── EVERY CLASS HERE IS `hz-` PREFIXED, and it was not always ────────────────
+   This sheet used to claim `.row`, `.skeleton`, `.fade`, `.mono`, `.drag` and
+   `.tnum` — six of the most ordinary words in anyone's CSS — at the document
+   level, in a package an app imports once at its root. An app with its own
+   `.row` did not get a warning; it got whichever rule the cascade preferred, in
+   a stylesheet it never opened. A library's utility classes are its namespace,
+   so they carry its name.
+
+   The unprefixed selectors are kept as aliases on the SAME rule for one minor
+   version so nothing breaks mid-flight, and are REMOVED IN 8.1.0. Nothing in
+   this package emits them any more — they exist only for a consumer who typed
+   `className="skeleton"` against the old sheet. Keyframe names are prefixed too
+   and have no alias: nothing outside this file ever referenced them.  */
 
 /* 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 fade-up {
+@keyframes hz-fade-up {
   from {
     opacity: 0;
     transform: translateY(10px);
@@ -19,12 +33,14 @@
   }
 }
 
+.hz-fade-up,
 .fade-up {
-  animation: fade-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
+  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,
   .fade-up {
     animation: none;
   }
@@ -32,27 +48,32 @@
 
 /* Shell chrome motion — sidebar collapse (width) and the Linear-style two-level
    nav slide (transform); backdrop cross-fade behind a SlideOver / dialog. */
+.hz-collapse,
 .collapse {
   transition: width 220ms cubic-bezier(0.16, 1, 0.3, 1);
   will-change: width;
 }
 
+.hz-slide,
 .slide {
   transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
   will-change: transform;
 }
 
+.hz-fade,
 .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 `.slide`. */
+   lifted row gets a subtle lift; siblings ease into place via `.hz-slide`. */
+.hz-drag,
 .drag {
   touch-action: none;
   transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
 }
+.hz-drag[data-dragging='true'],
 .drag[data-dragging='true'] {
   transition: none;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
@@ -61,9 +82,13 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
+  .hz-collapse,
   .collapse,
+  .hz-slide,
   .slide,
+  .hz-fade,
   .fade,
+  .hz-drag,
   .drag {
     transition: none;
   }
@@ -75,7 +100,7 @@
    a brief highlight when a freshly-arrived row lands. */
 
 /* Skeleton shimmer — an honest "loading", never fabricated content. */
-@keyframes shimmer {
+@keyframes hz-shimmer {
   0% {
     background-position: -160px 0;
   }
@@ -84,6 +109,7 @@
   }
 }
 
+.hz-skeleton,
 .skeleton {
   background-color: var(--color3, rgba(148, 163, 184, 0.14));
   background-image: linear-gradient(
@@ -94,11 +120,11 @@
   );
   background-size: 160px 100%;
   background-repeat: no-repeat;
-  animation: shimmer 1.2s ease-in-out infinite;
+  animation: hz-shimmer 1.2s ease-in-out infinite;
 }
 
 /* Live-feed pulse — the "Live" dot on a streaming panel. */
-@keyframes pulse {
+@keyframes hz-pulse {
   0%,
   100% {
     opacity: 1;
@@ -111,7 +137,7 @@
 }
 
 /* Entrance for a freshly-arrived activity row (staggerless — one row at a time). */
-@keyframes row-in {
+@keyframes hz-row-in {
   from {
     opacity: 0;
     transform: translateY(-6px);
@@ -122,27 +148,31 @@
   }
 }
 
+.hz-row-in,
 .row-in {
-  animation: row-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
+  animation: hz-row-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
 }
 
 @media (prefers-reduced-motion: reduce) {
+  .hz-skeleton,
   .skeleton {
     animation: none;
   }
+  .hz-row-in,
   .row-in {
     animation: none;
   }
 }
 
 /* ── Typography + surface classes the product layer's components reference ──────
-   DataTable/Metric typeset numeric cells with `mono`/`tnum`; ComboBox and
-   SelectMenu paint their popovers with `paper menu-in`; DataTable rows use
-   `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. */
+   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,
 .tnum {
   font-variant-numeric: tabular-nums;
   font-feature-settings: 'tnum' 1;
@@ -150,6 +180,7 @@
 
 /* Data/numeric face — Geist Mono + tabular figures for metric values, prices, IDs
    and counts, so numbers read as precise, column-aligned data. */
+.hz-mono,
 .mono {
   font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-variant-numeric: tabular-nums;
@@ -170,13 +201,14 @@
    order — so paper lost its drop on dark exactly the way the rungs did. The
    fallback stays because this sheet ships on its own: a host that imports
    motion.css without glass.css has no ladder to read. */
+.hz-paper,
 .paper {
   box-shadow: var(--shadow-inset-hairline, inset 0 0 0 1px rgb(255 255 255 / .10)),
     var(--edge-highlight, inset 0 1px 0 0 rgb(255 255 255 / .10)),
     var(--glass-shadow-2, 0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55));
 }
 
-@keyframes menu-in {
+@keyframes hz-menu-in {
   from {
     opacity: 0;
   }
@@ -185,16 +217,19 @@
   }
 }
 
+.hz-menu-in,
 .menu-in {
-  animation: menu-in 140ms ease-out both;
+  animation: hz-menu-in 140ms ease-out both;
   will-change: opacity;
 }
 
+.hz-row,
 .row {
   transition: background-color 140ms ease-out;
 }
 
 @media (prefers-reduced-motion: reduce) {
+  .hz-menu-in,
   .menu-in {
     animation: none;
   }