@hanzo/ui 8.0.27 → 8.0.31

package/dist/product/AnimatedLogo.js

@@ -0,0 +1,100 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AnimatedLogo — the ONE animated brand logo across every Hanzo surface.
+ *
+ * On mount the full wordmark shows ("Hanzo {surface}", e.g. "Hanzo Cloud"), then
+ * collapses INTO just the brand mark; hover or keyboard-focus expands it back to
+ * the full name. This is the shared brand-identity primitive — the behavior that
+ * ships on hanzo.ai and cloud.hanzo.ai, made one component, white-label aware.
+ *
+ *   <AnimatedLogo surface="Cloud" />                    // Hanzo Cloud → H
+ *   <AnimatedLogo surface="Studio" />                   // Hanzo Studio → H
+ *   <AnimatedLogo surface="Cloud" brand={LUX} />        // Lux Cloud → Lux mark
+ *
+ * Presentational + host-agnostic (plain React + inline SVG, no @hanzo/gui, no
+ * framer): drops into any surface — the Tamagui console, the Next marketing site,
+ * a desktop shell. Theme-aware (the mark is `currentColor`), and accessible: the
+ * accessible name is always the full "Hanzo {surface}" regardless of the visual
+ * collapse, and `prefers-reduced-motion` yields a static mark with no animation.
+ */
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { HANZO } from './brand.js';
+import { DEFAULT_DURATION_MS, DEFAULT_GAP, DEFAULT_INTRO_MS, HOUSE_EASE, isExpanded, wordmarkStyle, wordmarkText, } from './animatedLogo.logic.js';
+/** SSR-safe prefers-reduced-motion. Starts false (server), corrects on mount. */
+function usePrefersReducedMotion() {
+    const [reduce, setReduce] = useState(false);
+    useEffect(() => {
+        if (typeof window === 'undefined' || !window.matchMedia)
+            return;
+        const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+        const sync = () => setReduce(mq.matches);
+        sync();
+        mq.addEventListener('change', sync);
+        return () => mq.removeEventListener('change', sync);
+    }, []);
+    return reduce;
+}
+export function AnimatedLogo({ surface, brand = HANZO, size = 22, gap = DEFAULT_GAP, introMs = DEFAULT_INTRO_MS, durationMs = DEFAULT_DURATION_MS, easing = HOUSE_EASE, href, onClick, component, className, style, 'aria-label': ariaLabel, }) {
+    const reduce = usePrefersReducedMotion();
+    const label = ariaLabel ?? wordmarkText(brand.name, surface);
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+    // Show the full wordmark on first paint (name shows on load), then collapse.
+    const [introShowing, setIntroShowing] = useState(introMs > 0);
+    const [naturalWidth, setNaturalWidth] = useState(undefined);
+    const wordRef = useRef(null);
+    // Mount intro: hold the name, then tuck it into the mark. Reduced motion skips
+    // the timeline entirely (static mark), so there is no animation.
+    useEffect(() => {
+        if (introMs <= 0)
+            return;
+        if (reduce) {
+            setIntroShowing(false);
+            return;
+        }
+        const t = setTimeout(() => setIntroShowing(false), introMs);
+        return () => clearTimeout(t);
+    }, [introMs, reduce]);
+    // Measure the wordmark's natural width so it can animate to/from an exact px
+    // width (auto is not animatable). `scrollWidth` reports the full content width
+    // in every state (the wrapper is overflow-hidden + nowrap). Re-measure when the
+    // text changes and once the webfont has settled.
+    useLayoutEffect(() => {
+        const el = wordRef.current;
+        if (!el)
+            return;
+        const measure = () => setNaturalWidth(el.scrollWidth);
+        measure();
+        const fonts = (typeof document !== 'undefined' && document.fonts) || null;
+        if (fonts?.ready)
+            fonts.ready.then(measure).catch(() => { });
+    }, [brand.name, surface]);
+    const expanded = isExpanded({ hovered, focused, introShowing });
+    const ws = wordmarkStyle({ expanded, naturalWidth, gap, durationMs, easing, reduce });
+    const Root = component ?? 'a';
+    const isAnchor = Root === 'a';
+    return (_jsxs(Root, { ...(isAnchor ? { href: href ?? brand.href ?? '/' } : { href: href ?? brand.href }), onClick: onClick, "aria-label": label, title: label, className: className, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), onFocus: () => setFocused(true), onBlur: () => setFocused(false), style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            textDecoration: 'none',
+            color: 'inherit',
+            cursor: 'pointer',
+            ...style,
+        }, children: [_jsx("svg", { width: size, height: size, viewBox: brand.viewBox, "aria-hidden": "true", focusable: "false", fill: brand.fullColor ? undefined : 'currentColor', style: { display: 'block', flexShrink: 0 }, 
+                // `content` is a build-time-trusted constant (see ./brand), never user input.
+                dangerouslySetInnerHTML: { __html: brand.content } }), _jsx("span", { ref: wordRef, "aria-hidden": "true", style: {
+                    display: 'inline-block',
+                    overflow: 'hidden',
+                    whiteSpace: 'nowrap',
+                    fontWeight: 600,
+                    fontSize: 15,
+                    letterSpacing: '-0.01em',
+                    lineHeight: 1,
+                    width: ws.width,
+                    opacity: ws.opacity,
+                    marginLeft: ws.marginLeft,
+                    transition: ws.transition,
+                }, children: label })] }));
+}
+//# sourceMappingURL=AnimatedLogo.js.map

package/dist/product/AnimatedLogo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedLogo.js","sourceRoot":"","sources":["../../src/product/AnimatedLogo.tsx"],"names":[],"mappings":"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"}

package/dist/product/AppHeader.cjs

@@ -0,0 +1,55 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppHeader = AppHeader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * AppHeader — the shared shell header every Hanzo surface renders: the brand
+ * mark top-left (from @hanzo/logo, white-label via `wordmark`/`brand`), an
+ * org/project slot (usually `<OrgSwitcher/>`), an app switcher listing the
+ * Hanzo surfaces (modeled on the console's AppLauncher), and an identity menu
+ * (Profile · Theme · Team settings · Billing · Sign out).
+ *
+ * Host-agnostic: every action is an injected handler; a row renders only when
+ * its handler is provided (honest — no dead menu items). Mobile-first: fluid
+ * flex + truncation, the wordmark collapse is the brand motion itself.
+ */
+const react_1 = require("react");
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const BrandMark_1 = require("./BrandMark.cjs");
+const ThemeToggle_1 = require("./ThemeToggle.cjs");
+const surfaces_data_1 = require("./surfaces.data.cjs");
+/** The per-surface glyph — keyed by `Surface.id`, so each surface reads distinctly. */
+const SURFACE_ICON = {
+    ai: lucide_icons_2_1.Sparkles,
+    console: lucide_icons_2_1.LayoutGrid,
+    app: lucide_icons_2_1.AppWindow,
+    chat: lucide_icons_2_1.MessageCircle,
+    bot: lucide_icons_2_1.Bot,
+    team: lucide_icons_2_1.Users,
+    billing: lucide_icons_2_1.CreditCard,
+};
+const openHref = (href) => {
+    if (typeof window !== 'undefined')
+        window.open(href, '_blank', 'noopener');
+};
+function MenuRow({ icon, label, onPress }) {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { onPress: onPress, cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$2", rounded: "$3", hoverStyle: { bg: '$color5' }, children: [icon, (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$color12", children: label })] }));
+}
+function AppHeader({ brand, wordmark = 'Hanzo', onBrand, org, children, current, surfaces, open, user, menu, theme, onProfile, onTeam, onBilling, onSignOut, }) {
+    const [appsOpen, setAppsOpen] = (0, react_1.useState)(false);
+    const [menuOpen, setMenuOpen] = (0, react_1.useState)(false);
+    const items = surfaces ?? (0, surfaces_data_1.otherSurfaces)(current);
+    const launch = (s) => {
+        setAppsOpen(false);
+        if (open)
+            open(s);
+        else
+            openHref(s.href);
+    };
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", px: "$3", height: 52, borderBottomWidth: 1, borderColor: "$borderColor", bg: "$background", children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { items: "center", cursor: onBrand ? 'pointer' : undefined, onPress: onBrand, children: brand ?? (0, jsx_runtime_1.jsx)(BrandMark_1.BrandMark, { wordmark: wordmark }) }), org ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { items: "center", minW: 0, children: org })) : null, (0, jsx_runtime_1.jsx)(gui_1.XStack, { flex: 1, items: "center", minW: 0, children: children }), items.length > 0 ? ((0, jsx_runtime_1.jsxs)(gui_1.Popover, { open: appsOpen, onOpenChange: setAppsOpen, placement: "bottom-end", children: [(0, jsx_runtime_1.jsx)(gui_1.Popover.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$2", chromeless: true, icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Grip, { size: 16 }), "aria-label": "Apps" }) }), (0, jsx_runtime_1.jsx)(gui_1.Popover.Content, { bordered: true, elevate: true, p: "$2", width: 230, bg: "$color2", borderColor: "$borderColor", children: (0, jsx_runtime_1.jsx)(gui_1.YStack, { gap: "$1", children: items.map((s) => {
+                                const Icon = SURFACE_ICON[s.id];
+                                return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { onPress: () => launch(s), cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$2", rounded: "$3", hoverStyle: { bg: '$color5' }, children: [(0, jsx_runtime_1.jsx)(Icon, { size: 16 }), (0, jsx_runtime_1.jsx)(gui_1.Text, { flex: 1, fontSize: "$2", fontWeight: "600", color: "$color12", children: s.label }), s.hint ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$1", color: "$color10", children: s.hint })) : null] }, s.id));
+                            }) }) })] })) : null, (0, jsx_runtime_1.jsxs)(gui_1.Popover, { open: menuOpen, onOpenChange: setMenuOpen, placement: "bottom-end", children: [(0, jsx_runtime_1.jsx)(gui_1.Popover.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$2", chromeless: true, icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.UserRound, { size: 16 }), "aria-label": "Account", children: user ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$color12", numberOfLines: 1, maxW: 140, children: user })) : null }) }), (0, jsx_runtime_1.jsx)(gui_1.Popover.Content, { bordered: true, elevate: true, p: "$2", width: 220, bg: "$color2", borderColor: "$borderColor", children: menu ?? ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$1", children: [onProfile ? (0, jsx_runtime_1.jsx)(MenuRow, { icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.UserRound, { size: 15 }), label: "Profile", onPress: () => (setMenuOpen(false), onProfile()) }) : null, theme !== null ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2.5", px: "$2", py: "$1", rounded: "$3", children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { flex: 1, fontSize: "$2", color: "$color12", children: "Theme" }), theme ?? (0, jsx_runtime_1.jsx)(ThemeToggle_1.ThemeToggle, {})] })) : null, onTeam ? (0, jsx_runtime_1.jsx)(MenuRow, { icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Settings2, { size: 15 }), label: "Team settings", onPress: () => (setMenuOpen(false), onTeam()) }) : null, onBilling ? (0, jsx_runtime_1.jsx)(MenuRow, { icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.CreditCard, { size: 15 }), label: "Billing", onPress: () => (setMenuOpen(false), onBilling()) }) : null, onSignOut ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(gui_1.Separator, { borderColor: "$borderColor", my: "$1" }), (0, jsx_runtime_1.jsx)(MenuRow, { icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.LogOut, { size: 15 }), label: "Sign out", onPress: () => (setMenuOpen(false), onSignOut()) })] })) : null] })) })] })] }));
+}

package/dist/product/AppHeader.d.ts

@@ -10,7 +10,7 @@
  * flex + truncation, the wordmark collapse is the brand motion itself.
  */
 import { type ReactNode } from 'react';
-import { type Surface, type SurfaceId } from './surfaces.data';
+import { type Surface, type SurfaceId } from './surfaces.data.js';
 export type AppHeaderProps = {
     /** Brand slot — defaults to the animated `<BrandMark/>`. */
     brand?: ReactNode;
@@ -40,3 +40,4 @@ export type AppHeaderProps = {
     onSignOut?: () => void;
 };
 export declare function AppHeader({ brand, wordmark, onBrand, org, children, current, surfaces, open, user, menu, theme, onProfile, onTeam, onBilling, onSignOut, }: AppHeaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AppHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../src/product/AppHeader.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAMhD,OAAO,EAAiB,KAAK,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAA;AA4B7E,MAAM,MAAM,cAAc,GAAG;IAC3B,4DAA4D;IAC5D,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,0EAA0E;IAC1E,GAAG,CAAC,EAAE,SAAS,CAAA;IACf,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,qFAAqF;IACrF,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,mFAAmF;IACnF,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAA;IACpB,wDAAwD;IACxD,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACjC,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,+CAA+C;IAC/C,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,wEAAwE;IACxE,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB,CAAA;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAkB,EAClB,OAAO,EACP,GAAG,EACH,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,SAAS,EACT,MAAM,EACN,SAAS,EACT,SAAS,GACV,EAAE,cAAc,2CA0FhB"}

package/dist/product/AppHeader.js

@@ -0,0 +1,53 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * AppHeader — the shared shell header every Hanzo surface renders: the brand
+ * mark top-left (from @hanzo/logo, white-label via `wordmark`/`brand`), an
+ * org/project slot (usually `<OrgSwitcher/>`), an app switcher listing the
+ * Hanzo surfaces (modeled on the console's AppLauncher), and an identity menu
+ * (Profile · Theme · Team settings · Billing · Sign out).
+ *
+ * Host-agnostic: every action is an injected handler; a row renders only when
+ * its handler is provided (honest — no dead menu items). Mobile-first: fluid
+ * flex + truncation, the wordmark collapse is the brand motion itself.
+ */
+import { useState } from 'react';
+import { Button, Popover, Separator, Text, XStack, YStack } from '@hanzo/gui';
+import { AppWindow, Bot, CreditCard, Grip, LayoutGrid, LogOut, MessageCircle, Settings2, Sparkles, UserRound, Users } from '@hanzogui/lucide-icons-2';
+import { BrandMark } from './BrandMark.js';
+import { ThemeToggle } from './ThemeToggle.js';
+import { otherSurfaces } from './surfaces.data.js';
+/** The per-surface glyph — keyed by `Surface.id`, so each surface reads distinctly. */
+const SURFACE_ICON = {
+    ai: Sparkles,
+    console: LayoutGrid,
+    app: AppWindow,
+    chat: MessageCircle,
+    bot: Bot,
+    team: Users,
+    billing: CreditCard,
+};
+const openHref = (href) => {
+    if (typeof window !== 'undefined')
+        window.open(href, '_blank', 'noopener');
+};
+function MenuRow({ icon, label, onPress }) {
+    return (_jsxs(XStack, { onPress: onPress, cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$2", rounded: "$3", hoverStyle: { bg: '$color5' }, children: [icon, _jsx(Text, { fontSize: "$2", color: "$color12", children: label })] }));
+}
+export function AppHeader({ brand, wordmark = 'Hanzo', onBrand, org, children, current, surfaces, open, user, menu, theme, onProfile, onTeam, onBilling, onSignOut, }) {
+    const [appsOpen, setAppsOpen] = useState(false);
+    const [menuOpen, setMenuOpen] = useState(false);
+    const items = surfaces ?? otherSurfaces(current);
+    const launch = (s) => {
+        setAppsOpen(false);
+        if (open)
+            open(s);
+        else
+            openHref(s.href);
+    };
+    return (_jsxs(XStack, { items: "center", gap: "$2", px: "$3", height: 52, borderBottomWidth: 1, borderColor: "$borderColor", bg: "$background", children: [_jsx(XStack, { items: "center", cursor: onBrand ? 'pointer' : undefined, onPress: onBrand, children: brand ?? _jsx(BrandMark, { wordmark: wordmark }) }), org ? (_jsx(XStack, { items: "center", minW: 0, children: org })) : null, _jsx(XStack, { flex: 1, items: "center", minW: 0, children: children }), items.length > 0 ? (_jsxs(Popover, { open: appsOpen, onOpenChange: setAppsOpen, placement: "bottom-end", children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx(Button, { size: "$2", chromeless: true, icon: _jsx(Grip, { size: 16 }), "aria-label": "Apps" }) }), _jsx(Popover.Content, { bordered: true, elevate: true, p: "$2", width: 230, bg: "$color2", borderColor: "$borderColor", children: _jsx(YStack, { gap: "$1", children: items.map((s) => {
+                                const Icon = SURFACE_ICON[s.id];
+                                return (_jsxs(XStack, { onPress: () => launch(s), cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$2", rounded: "$3", hoverStyle: { bg: '$color5' }, children: [_jsx(Icon, { size: 16 }), _jsx(Text, { flex: 1, fontSize: "$2", fontWeight: "600", color: "$color12", children: s.label }), s.hint ? (_jsx(Text, { fontSize: "$1", color: "$color10", children: s.hint })) : null] }, s.id));
+                            }) }) })] })) : null, _jsxs(Popover, { open: menuOpen, onOpenChange: setMenuOpen, placement: "bottom-end", children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx(Button, { size: "$2", chromeless: true, icon: _jsx(UserRound, { size: 16 }), "aria-label": "Account", children: user ? (_jsx(Text, { fontSize: "$2", color: "$color12", numberOfLines: 1, maxW: 140, children: user })) : null }) }), _jsx(Popover.Content, { bordered: true, elevate: true, p: "$2", width: 220, bg: "$color2", borderColor: "$borderColor", children: menu ?? (_jsxs(YStack, { gap: "$1", children: [onProfile ? _jsx(MenuRow, { icon: _jsx(UserRound, { size: 15 }), label: "Profile", onPress: () => (setMenuOpen(false), onProfile()) }) : null, theme !== null ? (_jsxs(XStack, { items: "center", gap: "$2.5", px: "$2", py: "$1", rounded: "$3", children: [_jsx(Text, { flex: 1, fontSize: "$2", color: "$color12", children: "Theme" }), theme ?? _jsx(ThemeToggle, {})] })) : null, onTeam ? _jsx(MenuRow, { icon: _jsx(Settings2, { size: 15 }), label: "Team settings", onPress: () => (setMenuOpen(false), onTeam()) }) : null, onBilling ? _jsx(MenuRow, { icon: _jsx(CreditCard, { size: 15 }), label: "Billing", onPress: () => (setMenuOpen(false), onBilling()) }) : null, onSignOut ? (_jsxs(_Fragment, { children: [_jsx(Separator, { borderColor: "$borderColor", my: "$1" }), _jsx(MenuRow, { icon: _jsx(LogOut, { size: 15 }), label: "Sign out", onPress: () => (setMenuOpen(false), onSignOut()) })] })) : null] })) })] })] }));
+}
+//# sourceMappingURL=AppHeader.js.map

package/dist/product/AppHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../src/product/AppHeader.tsx"],"names":[],"mappings":"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"}

package/dist/product/BackendState.cjs

@@ -0,0 +1,80 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.classifyBackend = classifyBackend;
+exports.classifyRead = classifyRead;
+exports.BackendStateCard = BackendStateCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const host_1 = require("./host.cjs");
+/**
+ * Classify a thrown `/v1` error into an honest kind + raw message.
+ *
+ * 401 and 403 are DISTINCT for a signed-in user: 401 = the session is expired /
+ * not recognized (re-auth fixes it → `signin`), 403 = the account IS signed in
+ * but this surface isn't authorized/enabled for its org (`access`). A signed-in
+ * user is NEVER told to "sign in" for a 403 — that would be a false instruction.
+ */
+function classifyBackend(e) {
+    const status = typeof e?.status === 'number' ? e.status : 0;
+    const message = e instanceof Error ? e.message : String(e);
+    if (status === 503)
+        return { kind: 'not-initialized', message };
+    if (status === 404 || status === 405)
+        return { kind: 'unavailable', message };
+    // 501 — the route EXISTS and answers honestly that its body ships later (the
+    // Cloudflare R2/KV/D1 Phase-2 seams). Distinct from 404 (not mounted here): the
+    // capability is real and planned, so say that rather than "not available yet".
+    if (status === 501)
+        return { kind: 'not-implemented', message };
+    if (status === 402)
+        return { kind: 'billing', message };
+    if (status === 401)
+        return { kind: 'signin', message };
+    if (status === 403)
+        return { kind: 'access', message };
+    return { kind: 'error', message };
+}
+/**
+ * Classify a READ (GET/list) failure. Identical to `classifyBackend` EXCEPT a 402
+ * is NOT a wall: listing/reading a resource is never credit-gated, so a 402 on a
+ * read means "nothing is provisioned yet" — the caller shows its honest EMPTY
+ * state (e.g. "No buckets yet · Create one"), never an "add credits" paywall
+ * (that belongs only on a paid WRITE). Returns `null` for a 402 → treat as empty.
+ */
+function classifyRead(e) {
+    const s = classifyBackend(e);
+    return s.kind === 'billing' ? null : s;
+}
+const TITLES = {
+    'not-initialized': 'Backend not initialized',
+    unavailable: 'Not available on this deployment yet',
+    'not-implemented': 'Not yet available',
+    access: 'Not enabled for your account',
+    signin: 'Your session expired',
+    billing: 'Add credits to continue',
+    error: 'Could not reach the backend',
+};
+const BODIES = {
+    'not-initialized': 'The /v1 route is mounted but its runtime (or the console API key it proxies to) is not configured on this deployment yet. Real data appears here once it is — no placeholder data is shown.',
+    unavailable: 'This endpoint is not mounted at the gateway on this host yet. The view lights up automatically once the route is live.',
+    // 501 — a real, planned capability whose body ships in a later phase.
+    'not-implemented': 'This capability is planned but not wired yet. The backend answers honestly rather than pretending it worked — nothing here is fabricated, and the view lights up automatically once it ships.',
+    // 403 for a SIGNED-IN user — never "sign in".
+    access: "You're signed in, but this isn't enabled for your organization on this deployment, or it's an admin-only surface. It appears here automatically once your account has access — nothing is fabricated.",
+    // 401 — the session itself lapsed; re-auth returns to this exact page.
+    signin: 'Your session has expired or isn’t recognized here. Sign in again to continue where you left off.',
+    // Empty → the card shows the backend's own message (the honest "Insufficient
+    // balance. Please add credits…" from the gateway billing gate).
+    billing: '',
+    error: '',
+};
+/** A truthful state card for a `/v1` load failure, with an optional retry + hint. */
+function BackendStateCard({ state, onRetry, hint, }) {
+    const { signIn, addCredits } = (0, host_1.useHost)();
+    return ((0, jsx_runtime_1.jsxs)(gui_1.Card, { borderWidth: 1, borderColor: "$borderColor", p: "$4", gap: "$2", maxWidth: 640, children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$2", items: "center", children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.TriangleAlert, { size: 16 }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$4", fontWeight: "700", children: TITLES[state.kind] })] }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$3", color: "$color11", children: BODIES[state.kind] || state.message }), hint ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$color10", children: hint })) : null, state.kind === 'signin' && signIn ? ((0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$2", theme: "light", self: "flex-start", onPress: signIn, children: "Sign in again" })) : state.kind === 'billing' && addCredits ? (
+            // 402 — the org has no funded balance. Offer a top-up CTA (and keep Retry so
+            // a returning, funded caller can reload in place).
+            (0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$2", items: "center", flexWrap: "wrap", children: [(0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$2", theme: "light", self: "flex-start", icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.CreditCard, { size: 14 }), onPress: addCredits, children: "Add credits" }), onRetry ? ((0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$2", self: "flex-start", onPress: onRetry, children: "Retry" })) : null] })) : onRetry ? ((0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$2", self: "flex-start", onPress: onRetry, children: "Retry" })) : null] }));
+}

package/dist/product/BackendState.d.ts

@@ -40,3 +40,4 @@ export declare function BackendStateCard({ state, onRetry, hint, }: {
     onRetry?: () => void;
     hint?: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BackendState.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackendState.d.ts","sourceRoot":"","sources":["../../src/product/BackendState.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,MAAM,MAAM,gBAAgB,GACxB,iBAAiB,GACjB,aAAa,GACb,iBAAiB,GACjB,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,OAAO,CAAA;AAEX,MAAM,MAAM,YAAY,GAAG;IAAE,IAAI,EAAE,gBAAgB,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAA;AAEtE;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,OAAO,GAAG,YAAY,CAaxD;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,CAAC,EAAE,OAAO,GAAG,YAAY,GAAG,IAAI,CAG5D;AA+BD,qFAAqF;AACrF,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,OAAO,EACP,IAAI,GACL,EAAE;IACD,KAAK,EAAE,YAAY,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB,2CA0CA"}

package/dist/product/BackendState.js

@@ -0,0 +1,76 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Card, Text, XStack } from '@hanzo/gui';
+import { TriangleAlert, CreditCard } from '@hanzogui/lucide-icons-2';
+import { useHost } from './host.js';
+/**
+ * Classify a thrown `/v1` error into an honest kind + raw message.
+ *
+ * 401 and 403 are DISTINCT for a signed-in user: 401 = the session is expired /
+ * not recognized (re-auth fixes it → `signin`), 403 = the account IS signed in
+ * but this surface isn't authorized/enabled for its org (`access`). A signed-in
+ * user is NEVER told to "sign in" for a 403 — that would be a false instruction.
+ */
+export function classifyBackend(e) {
+    const status = typeof e?.status === 'number' ? e.status : 0;
+    const message = e instanceof Error ? e.message : String(e);
+    if (status === 503)
+        return { kind: 'not-initialized', message };
+    if (status === 404 || status === 405)
+        return { kind: 'unavailable', message };
+    // 501 — the route EXISTS and answers honestly that its body ships later (the
+    // Cloudflare R2/KV/D1 Phase-2 seams). Distinct from 404 (not mounted here): the
+    // capability is real and planned, so say that rather than "not available yet".
+    if (status === 501)
+        return { kind: 'not-implemented', message };
+    if (status === 402)
+        return { kind: 'billing', message };
+    if (status === 401)
+        return { kind: 'signin', message };
+    if (status === 403)
+        return { kind: 'access', message };
+    return { kind: 'error', message };
+}
+/**
+ * Classify a READ (GET/list) failure. Identical to `classifyBackend` EXCEPT a 402
+ * is NOT a wall: listing/reading a resource is never credit-gated, so a 402 on a
+ * read means "nothing is provisioned yet" — the caller shows its honest EMPTY
+ * state (e.g. "No buckets yet · Create one"), never an "add credits" paywall
+ * (that belongs only on a paid WRITE). Returns `null` for a 402 → treat as empty.
+ */
+export function classifyRead(e) {
+    const s = classifyBackend(e);
+    return s.kind === 'billing' ? null : s;
+}
+const TITLES = {
+    'not-initialized': 'Backend not initialized',
+    unavailable: 'Not available on this deployment yet',
+    'not-implemented': 'Not yet available',
+    access: 'Not enabled for your account',
+    signin: 'Your session expired',
+    billing: 'Add credits to continue',
+    error: 'Could not reach the backend',
+};
+const BODIES = {
+    'not-initialized': 'The /v1 route is mounted but its runtime (or the console API key it proxies to) is not configured on this deployment yet. Real data appears here once it is — no placeholder data is shown.',
+    unavailable: 'This endpoint is not mounted at the gateway on this host yet. The view lights up automatically once the route is live.',
+    // 501 — a real, planned capability whose body ships in a later phase.
+    'not-implemented': 'This capability is planned but not wired yet. The backend answers honestly rather than pretending it worked — nothing here is fabricated, and the view lights up automatically once it ships.',
+    // 403 for a SIGNED-IN user — never "sign in".
+    access: "You're signed in, but this isn't enabled for your organization on this deployment, or it's an admin-only surface. It appears here automatically once your account has access — nothing is fabricated.",
+    // 401 — the session itself lapsed; re-auth returns to this exact page.
+    signin: 'Your session has expired or isn’t recognized here. Sign in again to continue where you left off.',
+    // Empty → the card shows the backend's own message (the honest "Insufficient
+    // balance. Please add credits…" from the gateway billing gate).
+    billing: '',
+    error: '',
+};
+/** A truthful state card for a `/v1` load failure, with an optional retry + hint. */
+export function BackendStateCard({ state, onRetry, hint, }) {
+    const { signIn, addCredits } = useHost();
+    return (_jsxs(Card, { borderWidth: 1, borderColor: "$borderColor", p: "$4", gap: "$2", maxWidth: 640, children: [_jsxs(XStack, { gap: "$2", items: "center", children: [_jsx(TriangleAlert, { size: 16 }), _jsx(Text, { fontSize: "$4", fontWeight: "700", children: TITLES[state.kind] })] }), _jsx(Text, { fontSize: "$3", color: "$color11", children: BODIES[state.kind] || state.message }), hint ? (_jsx(Text, { fontSize: "$2", color: "$color10", children: hint })) : null, state.kind === 'signin' && signIn ? (_jsx(Button, { size: "$2", theme: "light", self: "flex-start", onPress: signIn, children: "Sign in again" })) : state.kind === 'billing' && addCredits ? (
+            // 402 — the org has no funded balance. Offer a top-up CTA (and keep Retry so
+            // a returning, funded caller can reload in place).
+            _jsxs(XStack, { gap: "$2", items: "center", flexWrap: "wrap", children: [_jsx(Button, { size: "$2", theme: "light", self: "flex-start", icon: _jsx(CreditCard, { size: 14 }), onPress: addCredits, children: "Add credits" }), onRetry ? (_jsx(Button, { size: "$2", self: "flex-start", onPress: onRetry, children: "Retry" })) : null] })) : onRetry ? (_jsx(Button, { size: "$2", self: "flex-start", onPress: onRetry, children: "Retry" })) : null] }));
+}
+//# sourceMappingURL=BackendState.js.map

package/dist/product/BackendState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackendState.js","sourceRoot":"","sources":["../../src/product/BackendState.tsx"],"names":[],"mappings":"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"}

package/dist/product/BrandMark.cjs

@@ -0,0 +1,19 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BrandMark = BrandMark;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * BrandMark — the canonical brand lockup for an app header, from @hanzo/logo
+ * (the ONE home of the mark geometry + motion). Animated by default: intro
+ * flip + idle breathing + a wordmark that slides in, holds, then collapses
+ * (returns on hover). Pure CSS, reduced-motion-safe; the mark inherits
+ * `currentColor` so it themes for free. White-label via `wordmark`.
+ */
+const react_1 = require("@hanzo/logo/react");
+const HanzoMark_1 = require("./HanzoMark.cjs");
+function BrandMark({ size = 20, wordmark = 'Hanzo', animated = true, }) {
+    if (!animated)
+        return (0, jsx_runtime_1.jsx)(HanzoMark_1.HanzoMark, { size: size });
+    return (0, jsx_runtime_1.jsx)(react_1.HanzoLogo, { animated: true, size: size, wordmark: wordmark });
+}

package/dist/product/BrandMark.d.ts

@@ -5,3 +5,4 @@ export declare function BrandMark({ size, wordmark, animated, }: {
     /** false = the static mark alone (no motion shell, no wordmark). */
     animated?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BrandMark.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BrandMark.d.ts","sourceRoot":"","sources":["../../src/product/BrandMark.tsx"],"names":[],"mappings":"AAaA,wBAAgB,SAAS,CAAC,EACxB,IAAS,EACT,QAAkB,EAClB,QAAe,GAChB,EAAE;IACD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,2CAGA"}

package/dist/product/BrandMark.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * BrandMark — the canonical brand lockup for an app header, from @hanzo/logo
+ * (the ONE home of the mark geometry + motion). Animated by default: intro
+ * flip + idle breathing + a wordmark that slides in, holds, then collapses
+ * (returns on hover). Pure CSS, reduced-motion-safe; the mark inherits
+ * `currentColor` so it themes for free. White-label via `wordmark`.
+ */
+import { HanzoLogo } from '@hanzo/logo/react';
+import { HanzoMark } from './HanzoMark.js';
+export function BrandMark({ size = 20, wordmark = 'Hanzo', animated = true, }) {
+    if (!animated)
+        return _jsx(HanzoMark, { size: size });
+    return _jsx(HanzoLogo, { animated: true, size: size, wordmark: wordmark });
+}
+//# sourceMappingURL=BrandMark.js.map

package/dist/product/BrandMark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrandMark.js","sourceRoot":"","sources":["../../src/product/BrandMark.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;GAMG;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAE7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,MAAM,UAAU,SAAS,CAAC,EACxB,IAAI,GAAG,EAAE,EACT,QAAQ,GAAG,OAAO,EAClB,QAAQ,GAAG,IAAI,GAOhB;IACC,IAAI,CAAC,QAAQ;QAAE,OAAO,KAAC,SAAS,IAAC,IAAI,EAAE,IAAI,GAAI,CAAA;IAC/C,OAAO,KAAC,SAAS,IAAC,QAAQ,QAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAA;AAC/D,CAAC"}