@hanzo/ui 5.3.38 → 5.3.39

package/dist/src/navigation/hanzo-shell/HanzoCommandPalette.js

@@ -0,0 +1,124 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { DEFAULT_HANZO_APPS } from './types';
+// ---------------------------------------------------------------------------
+// Built-in cross-app commands derived from DEFAULT_HANZO_APPS
+// ---------------------------------------------------------------------------
+function buildCrossAppCommands(apps, currentAppId) {
+    return apps
+        .filter((app) => app.id !== currentAppId)
+        .map((app) => ({
+        id: `app-${app.id}`,
+        title: app.label,
+        description: app.description,
+        href: app.href,
+        category: 'Hanzo Apps',
+        external: true,
+        keywords: [app.id, app.label.toLowerCase()],
+    }));
+}
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export function HanzoCommandPalette({ commands: appCommands = [], apps, currentAppId, open: controlledOpen, onOpenChange, onNavigate, }) {
+    var _a;
+    const [internalOpen, setInternalOpen] = useState(false);
+    const open = controlledOpen ?? internalOpen;
+    const setOpen = useCallback((v) => {
+        if (onOpenChange)
+            onOpenChange(v);
+        else
+            setInternalOpen(v);
+    }, [onOpenChange]);
+    const [search, setSearch] = useState('');
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const inputRef = useRef(null);
+    const listRef = useRef(null);
+    // Merge cross-app + app-specific commands
+    const crossApp = buildCrossAppCommands(apps ?? DEFAULT_HANZO_APPS, currentAppId);
+    const allCommands = [...appCommands, ...crossApp];
+    // Filter
+    const q = search.toLowerCase();
+    const filtered = q
+        ? allCommands.filter((cmd) => cmd.title.toLowerCase().includes(q) ||
+            cmd.description?.toLowerCase().includes(q) ||
+            cmd.keywords?.some((k) => k.includes(q)))
+        : allCommands;
+    // Group by category
+    const grouped = {};
+    for (const cmd of filtered) {
+        ;
+        (grouped[_a = cmd.category] ?? (grouped[_a] = [])).push(cmd);
+    }
+    const flat = Object.values(grouped).flat();
+    // Reset on search change
+    useEffect(() => setSelectedIndex(0), [search]);
+    // Focus on open
+    useEffect(() => {
+        if (open) {
+            setSearch('');
+            setSelectedIndex(0);
+            requestAnimationFrame(() => inputRef.current?.focus());
+        }
+    }, [open]);
+    // Global Cmd+K
+    useEffect(() => {
+        const handler = (e) => {
+            if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+                e.preventDefault();
+                setOpen(!open);
+            }
+        };
+        document.addEventListener('keydown', handler);
+        return () => document.removeEventListener('keydown', handler);
+    }, [open, setOpen]);
+    // Navigate helper
+    const go = useCallback((cmd) => {
+        if (cmd.action) {
+            cmd.action();
+        }
+        else if (cmd.href) {
+            if (onNavigate) {
+                onNavigate(cmd.href, cmd.external);
+            }
+            else if (cmd.external) {
+                window.open(cmd.href, '_blank');
+            }
+            else {
+                window.location.href = cmd.href;
+            }
+        }
+        setOpen(false);
+    }, [onNavigate, setOpen]);
+    // Keyboard nav
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setSelectedIndex((i) => (i + 1) % (flat.length || 1));
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            setSelectedIndex((i) => (i - 1 + (flat.length || 1)) % (flat.length || 1));
+        }
+        else if (e.key === 'Enter' && flat[selectedIndex]) {
+            e.preventDefault();
+            go(flat[selectedIndex]);
+        }
+        else if (e.key === 'Escape') {
+            setOpen(false);
+        }
+    }, [flat, selectedIndex, go, setOpen]);
+    // Scroll selected into view
+    useEffect(() => {
+        const el = listRef.current?.querySelector(`[data-idx="${selectedIndex}"]`);
+        el?.scrollIntoView({ block: 'nearest' });
+    }, [selectedIndex]);
+    if (!open)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 bg-black/60 backdrop-blur-sm z-[100]", onClick: () => setOpen(false) }), _jsx("div", { className: "fixed top-[15%] left-1/2 -translate-x-1/2 w-full max-w-xl z-[101]", children: _jsxs("div", { className: "bg-[#111113] border border-white/[0.08] rounded-xl shadow-2xl overflow-hidden", children: [_jsxs("div", { className: "flex items-center gap-3 px-4 py-3 border-b border-white/[0.07]", children: [_jsx("svg", { className: "w-4 h-4 text-white/30", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }), _jsx("input", { ref: inputRef, type: "text", value: search, onChange: (e) => setSearch(e.target.value), onKeyDown: handleKeyDown, placeholder: "Search commands...", className: "flex-1 bg-transparent text-white text-[13px] placeholder-white/30 outline-none" }), _jsx("kbd", { className: "px-1.5 py-0.5 text-[10px] font-mono bg-white/[0.06] rounded text-white/30", children: "ESC" })] }), _jsx("div", { ref: listRef, className: "max-h-[400px] overflow-y-auto py-1", children: flat.length === 0 ? (_jsxs("div", { className: "px-4 py-8 text-center text-white/30 text-[13px]", children: ["No results for \u201C", search, "\u201D"] })) : (Object.entries(grouped).map(([category, items]) => (_jsxs("div", { children: [_jsx("div", { className: "px-4 py-2 text-[10px] font-semibold text-white/25 uppercase tracking-widest", children: category }), items.map((cmd) => {
+                                        const idx = flat.indexOf(cmd);
+                                        const selected = idx === selectedIndex;
+                                        return (_jsxs("button", { "data-idx": idx, onClick: () => go(cmd), onMouseEnter: () => setSelectedIndex(idx), className: `w-full flex items-center gap-3 px-4 py-2 text-left transition-colors ${selected ? 'bg-white/[0.06] text-white' : 'text-white/50 hover:bg-white/[0.03]'}`, children: [cmd.icon && (_jsx("span", { className: `w-5 h-5 flex items-center justify-center ${selected ? 'text-white/70' : 'text-white/25'}`, children: cmd.icon })), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("span", { className: "text-[13px] font-medium truncate block", children: cmd.title }), cmd.description && (_jsx("span", { className: "text-[11px] text-white/25 truncate block", children: cmd.description }))] }), selected && (_jsx("span", { className: "text-white/25 text-[11px]", children: "\u21B5" }))] }, cmd.id));
+                                    })] }, category)))) }), _jsxs("div", { className: "px-4 py-2 border-t border-white/[0.07] flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-4 text-[10px] text-white/20", children: [_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("kbd", { className: "px-1 py-0.5 bg-white/[0.06] rounded text-[9px]", children: "\u2191" }), _jsx("kbd", { className: "px-1 py-0.5 bg-white/[0.06] rounded text-[9px]", children: "\u2193" }), "navigate"] }), _jsxs("span", { className: "flex items-center gap-1", children: [_jsx("kbd", { className: "px-1 py-0.5 bg-white/[0.06] rounded text-[9px]", children: "\u21B5" }), "select"] })] }), _jsx("span", { className: "text-[10px] text-white/20", children: "\u2318K" })] })] }) })] }));
+}

package/dist/src/navigation/hanzo-shell/HanzoHeader.d.ts

@@ -0,0 +1,37 @@
+import { type HanzoShellProps } from './types';
+/**
+ * HanzoHeader — shared top navigation bar for all Hanzo properties.
+ *
+ * Style: monochrome #09090b / white, same as hanzo.ai docs & console.
+ *
+ * Features:
+ * - Official Hanzo H-mark (animates on hover, brand context menu on right-click)
+ * - Current app breadcrumb
+ * - App switcher (billing, console, chat, platform, account)
+ * - User + org dropdown (orgs from IAM, sign-out)
+ *
+ * Usage:
+ * ```tsx
+ * import { HanzoHeader, useHanzoAuth } from '@hanzo/ui/navigation'
+ *
+ * export default function Layout({ children }) {
+ *   const { user, organizations, currentOrgId, switchOrg, signOut } = useHanzoAuth()
+ *   return (
+ *     <>
+ *       <HanzoHeader
+ *         currentApp="Billing"
+ *         currentAppId="billing"
+ *         user={user}
+ *         organizations={organizations}
+ *         currentOrgId={currentOrgId}
+ *         onOrgSwitch={switchOrg}
+ *         onSignOut={signOut}
+ *       />
+ *       <main>{children}</main>
+ *     </>
+ *   )
+ * }
+ * ```
+ */
+export declare function HanzoHeader({ currentApp, currentAppId, user, organizations, currentOrgId, onOrgSwitch, onSignOut, apps, headerRight, }: Omit<HanzoShellProps, 'children'>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=HanzoHeader.d.ts.map

package/dist/src/navigation/hanzo-shell/HanzoHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HanzoHeader.d.ts","sourceRoot":"","sources":["../../../../src/navigation/hanzo-shell/HanzoHeader.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAsB,KAAK,eAAe,EAAE,MAAM,SAAS,CAAA;AAElE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,UAAU,EACV,YAAY,EACZ,IAAI,EACJ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,SAAS,EACT,IAAyB,EACzB,WAAW,GACZ,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,2CAoCnC"}

package/dist/src/navigation/hanzo-shell/HanzoHeader.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HanzoMark } from './HanzoMark';
+import { AppSwitcher } from './AppSwitcher';
+import { UserOrgDropdown } from './UserOrgDropdown';
+import { DEFAULT_HANZO_APPS } from './types';
+/**
+ * HanzoHeader — shared top navigation bar for all Hanzo properties.
+ *
+ * Style: monochrome #09090b / white, same as hanzo.ai docs & console.
+ *
+ * Features:
+ * - Official Hanzo H-mark (animates on hover, brand context menu on right-click)
+ * - Current app breadcrumb
+ * - App switcher (billing, console, chat, platform, account)
+ * - User + org dropdown (orgs from IAM, sign-out)
+ *
+ * Usage:
+ * ```tsx
+ * import { HanzoHeader, useHanzoAuth } from '@hanzo/ui/navigation'
+ *
+ * export default function Layout({ children }) {
+ *   const { user, organizations, currentOrgId, switchOrg, signOut } = useHanzoAuth()
+ *   return (
+ *     <>
+ *       <HanzoHeader
+ *         currentApp="Billing"
+ *         currentAppId="billing"
+ *         user={user}
+ *         organizations={organizations}
+ *         currentOrgId={currentOrgId}
+ *         onOrgSwitch={switchOrg}
+ *         onSignOut={signOut}
+ *       />
+ *       <main>{children}</main>
+ *     </>
+ *   )
+ * }
+ * ```
+ */
+export function HanzoHeader({ currentApp, currentAppId, user, organizations, currentOrgId, onOrgSwitch, onSignOut, apps = DEFAULT_HANZO_APPS, headerRight, }) {
+    return (_jsxs("header", { className: "sticky top-0 z-50 flex h-14 w-full items-center justify-between border-b border-white/[0.07] bg-[#09090b]/90 px-4 backdrop-blur-xl", role: "banner", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2.5", children: [_jsx("a", { href: "https://hanzo.id/account", className: "flex-shrink-0 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20", "aria-label": "Hanzo Account", children: _jsx(HanzoMark, { size: 22, brandMenu: true, animate: true }) }), _jsx("span", { className: "select-none text-white/[0.15]", children: "/" }), _jsx("span", { className: "truncate text-[13px] font-medium text-white/50", children: currentApp }), _jsx(AppSwitcher, { apps: apps, currentAppId: currentAppId })] }), _jsxs("div", { className: "flex flex-shrink-0 items-center gap-2", children: [headerRight, _jsx(UserOrgDropdown, { user: user, organizations: organizations, currentOrgId: currentOrgId, onOrgSwitch: onOrgSwitch, onSignOut: onSignOut })] })] }));
+}

package/dist/src/navigation/hanzo-shell/HanzoMark.d.ts

@@ -0,0 +1,17 @@
+export interface HanzoMarkProps {
+    size?: number;
+    className?: string;
+    /** Whether to show brand context menu on right-click */
+    brandMenu?: boolean;
+    /** Animate on hover (origami-style scale + slight 3D tilt) */
+    animate?: boolean;
+}
+/**
+ * Official Hanzo H-mark logo.
+ *
+ * - White fill paths with subtle shadow details
+ * - Hover: origami-style 3D perspective tilt + scale
+ * - Right-click: brand context menu (guidelines, press, download, copy SVG)
+ */
+export declare function HanzoMark({ size, className, brandMenu, animate, }: HanzoMarkProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=HanzoMark.d.ts.map

package/dist/src/navigation/hanzo-shell/HanzoMark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HanzoMark.d.ts","sourceRoot":"","sources":["../../../../src/navigation/hanzo-shell/HanzoMark.tsx"],"names":[],"mappings":"AA8EA,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAS,EACT,SAAc,EACd,SAAgB,EAChB,OAAc,GACf,EAAE,cAAc,2CAkDhB"}

package/dist/src/navigation/hanzo-shell/HanzoMark.js

@@ -0,0 +1,57 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback } from 'react';
+function BrandContextMenu({ x, y, onClose }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const handler = (e) => {
+            if (ref.current && !ref.current.contains(e.target))
+                onClose();
+        };
+        const escape = (e) => { if (e.key === 'Escape')
+            onClose(); };
+        document.addEventListener('mousedown', handler);
+        document.addEventListener('keydown', escape);
+        return () => {
+            document.removeEventListener('mousedown', handler);
+            document.removeEventListener('keydown', escape);
+        };
+    }, [onClose]);
+    const items = [
+        { label: 'Brand Guidelines', href: 'https://hanzo.ai/brand' },
+        { label: 'Press Kit', href: 'https://hanzo.ai/press' },
+        { label: 'Download Logo', href: 'https://hanzo.ai/brand#download' },
+        { label: 'Copy SVG', action: 'copy-svg' },
+        { label: 'hanzo.ai →', href: 'https://hanzo.ai' },
+    ];
+    const LOGO_SVG = `<svg viewBox="0 0 67 67" xmlns="http://www.w3.org/2000/svg"><path d="M22.21 67V44.6369H0V67H22.21Z" fill="#ffffff"/><path d="M0 44.6369L22.21 46.8285V44.6369H0Z" fill="#DDDDDD"/><path d="M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z" fill="#ffffff"/><path d="M22.21 0H0V22.3184H22.21V0Z" fill="#ffffff"/><path d="M66.7198 0H44.5098V22.3184H66.7198V0Z" fill="#ffffff"/><path d="M66.6753 22.3185L44.5098 20.0822V22.3185H66.6753Z" fill="#DDDDDD"/><path d="M66.7198 67V44.6369H44.5098V67H66.7198Z" fill="#ffffff"/></svg>`;
+    return (_jsxs("div", { ref: ref, role: "menu", className: "fixed z-[9999] min-w-[180px] rounded-xl border border-white/[0.08] bg-[#111113] py-1.5 shadow-2xl shadow-black/60", style: { top: y, left: x }, children: [_jsx("div", { className: "border-b border-white/[0.06] px-3 pb-2 pt-1", children: _jsx("p", { className: "text-[10px] font-semibold uppercase tracking-widest text-white/30", children: "Hanzo Brand" }) }), items.map((item) => (item.action === 'copy-svg' ? (_jsx("button", { type: "button", role: "menuitem", onClick: () => {
+                    navigator.clipboard.writeText(LOGO_SVG).catch(() => { });
+                    onClose();
+                }, className: "flex w-full items-center px-3 py-2 text-[13px] text-white/60 hover:bg-white/[0.05] hover:text-white/90 transition-colors text-left", children: "Copy SVG" }, "copy")) : (_jsx("a", { href: item.href, role: "menuitem", target: item.href?.startsWith('https') ? '_blank' : undefined, rel: "noopener noreferrer", onClick: onClose, className: "flex items-center px-3 py-2 text-[13px] text-white/60 hover:bg-white/[0.05] hover:text-white/90 transition-colors", children: item.label }, item.label))))] }));
+}
+/**
+ * Official Hanzo H-mark logo.
+ *
+ * - White fill paths with subtle shadow details
+ * - Hover: origami-style 3D perspective tilt + scale
+ * - Right-click: brand context menu (guidelines, press, download, copy SVG)
+ */
+export function HanzoMark({ size = 22, className = '', brandMenu = true, animate = true, }) {
+    const [menu, setMenu] = useState(null);
+    const [hovered, setHovered] = useState(false);
+    const handleContextMenu = useCallback((e) => {
+        if (!brandMenu)
+            return;
+        e.preventDefault();
+        setMenu({ x: e.clientX, y: e.clientY });
+    }, [brandMenu]);
+    const style = animate ? {
+        transition: 'transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease',
+        transform: hovered
+            ? 'scale(1.12) perspective(80px) rotateY(-6deg)'
+            : 'scale(1) perspective(80px) rotateY(0deg)',
+        transformOrigin: 'center center',
+    } : {};
+    return (_jsxs(_Fragment, { children: [_jsxs("svg", { width: size, height: size, viewBox: "0 0 67 67", xmlns: "http://www.w3.org/2000/svg", "aria-label": "Hanzo", className: className, style: style, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), onContextMenu: handleContextMenu, children: [_jsx("path", { d: "M22.21 67V44.6369H0V67H22.21Z", fill: "#ffffff" }), _jsx("path", { d: "M0 44.6369L22.21 46.8285V44.6369H0Z", fill: "#DDDDDD" }), _jsx("path", { d: "M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z", fill: "#ffffff" }), _jsx("path", { d: "M22.21 0H0V22.3184H22.21V0Z", fill: "#ffffff" }), _jsx("path", { d: "M66.7198 0H44.5098V22.3184H66.7198V0Z", fill: "#ffffff" }), _jsx("path", { d: "M66.6753 22.3185L44.5098 20.0822V22.3185H66.6753Z", fill: "#DDDDDD" }), _jsx("path", { d: "M66.7198 67V44.6369H44.5098V67H66.7198Z", fill: "#ffffff" })] }), menu && (_jsx(BrandContextMenu, { x: menu.x, y: menu.y, onClose: () => setMenu(null) }))] }));
+}

package/dist/src/navigation/hanzo-shell/UserAvatar.d.ts

@@ -0,0 +1,15 @@
+export interface UserAvatarProps {
+    /** Direct image URL (uploaded photo) */
+    src?: string;
+    /** Email for Gravatar lookup */
+    email?: string;
+    /** Name for generative fallback seed */
+    name?: string;
+    /** Size in px */
+    size?: number;
+    /** Custom colors for generative avatar */
+    colors?: string[];
+    className?: string;
+}
+export declare function UserAvatar({ src, email, name, size, colors, className, }: UserAvatarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=UserAvatar.d.ts.map

package/dist/src/navigation/hanzo-shell/UserAvatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserAvatar.d.ts","sourceRoot":"","sources":["../../../../src/navigation/hanzo-shell/UserAvatar.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,eAAe;IAC9B,wCAAwC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA4BD,wBAAgB,UAAU,CAAC,EACzB,GAAG,EACH,KAAK,EACL,IAAI,EACJ,IAAS,EACT,MAAM,EACN,SAAS,GACV,EAAE,eAAe,2CA4CjB"}

package/dist/src/navigation/hanzo-shell/UserAvatar.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { BeamAvatar } from './BeamAvatar';
+async function sha256(message) {
+    const encoder = new TextEncoder();
+    const data = encoder.encode(message);
+    const hashBuffer = await crypto.subtle.digest('SHA-256', data);
+    return Array.from(new Uint8Array(hashBuffer))
+        .map((b) => b.toString(16).padStart(2, '0'))
+        .join('');
+}
+function useGravatarUrl(email, size) {
+    const [url, setUrl] = useState(null);
+    useMemo(() => {
+        if (!email) {
+            setUrl(null);
+            return;
+        }
+        const trimmed = email.trim().toLowerCase();
+        sha256(trimmed).then((hash) => {
+            setUrl(`https://www.gravatar.com/avatar/${hash}?s=${size || 80}&d=404`);
+        });
+    }, [email, size]);
+    return url;
+}
+export function UserAvatar({ src, email, name, size = 40, colors, className, }) {
+    const [photoFailed, setPhotoFailed] = useState(false);
+    const [gravatarFailed, setGravatarFailed] = useState(false);
+    const gravatarUrl = useGravatarUrl(email, size * 2);
+    const imgClass = `rounded-full object-cover ${className || ''}`;
+    const style = { width: size, height: size };
+    // Tier 1: uploaded/provided photo
+    if (src && !photoFailed) {
+        return (_jsx("img", { src: src, alt: name || email || 'avatar', className: imgClass, style: style, onError: () => setPhotoFailed(true) }));
+    }
+    // Tier 2: Gravatar
+    if (gravatarUrl && !gravatarFailed) {
+        return (_jsx("img", { src: gravatarUrl, alt: name || email || 'avatar', className: imgClass, style: style, onError: () => setGravatarFailed(true) }));
+    }
+    // Tier 3: generative beam avatar
+    const seed = name || email || 'user';
+    return (_jsx(BeamAvatar, { name: seed, size: size, colors: colors, className: className }));
+}

package/dist/src/navigation/hanzo-shell/UserOrgDropdown.d.ts

@@ -0,0 +1,11 @@
+import type { HanzoUser, HanzoOrg } from './types';
+interface UserOrgDropdownProps {
+    user?: HanzoUser;
+    organizations?: HanzoOrg[];
+    currentOrgId?: string;
+    onOrgSwitch?: (orgId: string) => void;
+    onSignOut?: () => void;
+}
+export declare function UserOrgDropdown({ user, organizations, currentOrgId, onOrgSwitch, onSignOut, }: UserOrgDropdownProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=UserOrgDropdown.d.ts.map

package/dist/src/navigation/hanzo-shell/UserOrgDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserOrgDropdown.d.ts","sourceRoot":"","sources":["../../../../src/navigation/hanzo-shell/UserOrgDropdown.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAGlD,UAAU,oBAAoB;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,aAAkB,EAClB,YAAY,EACZ,WAAW,EACX,SAAS,GACV,EAAE,oBAAoB,kDA8HtB"}

package/dist/src/navigation/hanzo-shell/UserOrgDropdown.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { UserAvatar } from './UserAvatar';
+export function UserOrgDropdown({ user, organizations = [], currentOrgId, onOrgSwitch, onSignOut, }) {
+    const [open, setOpen] = useState(false);
+    const ref = useRef(null);
+    useEffect(() => {
+        const handler = (e) => {
+            if (ref.current && !ref.current.contains(e.target))
+                setOpen(false);
+        };
+        document.addEventListener('mousedown', handler);
+        return () => document.removeEventListener('mousedown', handler);
+    }, []);
+    if (!user)
+        return null;
+    const currentOrg = organizations.find((o) => o.id === currentOrgId);
+    return (_jsxs("div", { ref: ref, className: "relative", children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), className: "flex items-center gap-2 rounded-lg px-2 py-1.5 hover:bg-white/[0.06] transition-colors", children: [_jsx(UserAvatar, { src: user.avatar, email: user.email, name: user.name, size: 28 }), _jsxs("div", { className: "hidden flex-col items-start sm:flex", children: [user.name && (_jsx("span", { className: "text-[12px] font-medium text-white/70 leading-none", children: user.name })), _jsx("span", { className: "text-[11px] text-white/30 leading-none mt-0.5", children: user.email })] }), _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-white/30 hidden sm:block", children: _jsx("path", { d: "M6 9l6 6 6-6" }) })] }), open && (_jsxs("div", { className: "absolute right-0 top-10 z-50 w-64 rounded-xl border border-white/[0.08] bg-[#0e0e13] shadow-2xl", children: [_jsxs("div", { className: "border-b border-white/[0.06] px-4 py-3", children: [_jsx("p", { className: "text-[13px] font-medium text-white/80", children: user.name || 'User' }), _jsx("p", { className: "text-[11px] text-white/40", children: user.email })] }), organizations.length > 0 && (_jsxs("div", { className: "border-b border-white/[0.06] p-2", children: [_jsx("p", { className: "px-2 pb-1 pt-0.5 text-[10px] font-medium uppercase tracking-wider text-white/30", children: "Organizations" }), organizations.map((org) => (_jsxs("button", { type: "button", onClick: () => {
+                                    onOrgSwitch?.(org.id);
+                                    setOpen(false);
+                                }, className: "flex w-full items-center justify-between rounded-lg px-3 py-2 text-left hover:bg-white/[0.06] transition-colors", children: [_jsx("span", { className: "text-[13px] text-white/70", children: org.name }), org.id === currentOrgId && (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", className: "text-white/50", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }))] }, org.id)))] })), _jsxs("div", { className: "p-2", children: [_jsx("a", { href: "https://hanzo.id/account", className: "flex items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] text-white/60 hover:bg-white/[0.06] hover:text-white/80 transition-colors", onClick: () => setOpen(false), children: "Account settings" }), _jsx("a", { href: "https://billing.hanzo.ai", className: "flex items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] text-white/60 hover:bg-white/[0.06] hover:text-white/80 transition-colors", onClick: () => setOpen(false), children: "Billing" }), _jsx("button", { type: "button", onClick: () => {
+                                    setOpen(false);
+                                    onSignOut?.();
+                                }, className: "flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] text-white/40 hover:bg-white/[0.06] hover:text-red-400/70 transition-colors", children: "Sign out" })] })] }))] }));
+}

package/dist/src/navigation/hanzo-shell/index.d.ts

@@ -0,0 +1,14 @@
+export { HanzoHeader } from './HanzoHeader';
+export { HanzoMark } from './HanzoMark';
+export { AppSwitcher } from './AppSwitcher';
+export { UserOrgDropdown } from './UserOrgDropdown';
+export { UserAvatar } from './UserAvatar';
+export type { UserAvatarProps } from './UserAvatar';
+export { BeamAvatar } from './BeamAvatar';
+export type { BeamAvatarProps } from './BeamAvatar';
+export { useHanzoAuth } from './useHanzoAuth';
+export { HanzoCommandPalette } from './HanzoCommandPalette';
+export type { CommandItem as HanzoCommandItem, HanzoCommandPaletteProps } from './HanzoCommandPalette';
+export type { HanzoApp, HanzoOrg, HanzoUser, HanzoShellProps, HanzoMarkProps } from './types';
+export { DEFAULT_HANZO_APPS } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/navigation/hanzo-shell/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/navigation/hanzo-shell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,YAAY,EAAE,WAAW,IAAI,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAA;AACtG,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAC7F,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA"}

package/dist/src/navigation/hanzo-shell/index.js

@@ -0,0 +1,9 @@
+export { HanzoHeader } from './HanzoHeader';
+export { HanzoMark } from './HanzoMark';
+export { AppSwitcher } from './AppSwitcher';
+export { UserOrgDropdown } from './UserOrgDropdown';
+export { UserAvatar } from './UserAvatar';
+export { BeamAvatar } from './BeamAvatar';
+export { useHanzoAuth } from './useHanzoAuth';
+export { HanzoCommandPalette } from './HanzoCommandPalette';
+export { DEFAULT_HANZO_APPS } from './types';

package/dist/src/navigation/hanzo-shell/types.d.ts

@@ -0,0 +1,49 @@
+export type HanzoApp = {
+    id: string;
+    label: string;
+    href: string;
+    icon?: React.ReactNode;
+    description?: string;
+};
+export type HanzoOrg = {
+    id: string;
+    name: string;
+    slug: string;
+    role?: string;
+};
+export type HanzoUser = {
+    id?: string;
+    name?: string;
+    email: string;
+    avatar?: string;
+};
+export type HanzoMarkProps = {
+    size?: number;
+    className?: string;
+    brandMenu?: boolean;
+    animate?: boolean;
+};
+export type HanzoShellProps = {
+    /** Current app name shown in breadcrumb */
+    currentApp: string;
+    /** Current app id – used to suppress showing current app in switcher */
+    currentAppId?: string;
+    /** User from IAM */
+    user?: HanzoUser;
+    /** Orgs the user belongs to */
+    organizations?: HanzoOrg[];
+    /** Currently active org id */
+    currentOrgId?: string;
+    /** Called when user selects a different org */
+    onOrgSwitch?: (orgId: string) => void;
+    /** Called when user clicks sign out */
+    onSignOut?: () => void;
+    /** Override the default Hanzo apps list */
+    apps?: HanzoApp[];
+    /** Extra content rendered in header right-side */
+    headerRight?: React.ReactNode;
+    /** Sidebar content */
+    children?: React.ReactNode;
+};
+export declare const DEFAULT_HANZO_APPS: HanzoApp[];
+//# sourceMappingURL=types.d.ts.map

package/dist/src/navigation/hanzo-shell/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/navigation/hanzo-shell/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,2CAA2C;IAC3C,UAAU,EAAE,MAAM,CAAA;IAClB,wEAAwE;IACxE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,oBAAoB;IACpB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,+BAA+B;IAC/B,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAA;IAC1B,8BAA8B;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAA;IACjB,kDAAkD;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,sBAAsB;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,QAAQ,EA+BxC,CAAA"}

package/dist/src/navigation/hanzo-shell/types.js

@@ -0,0 +1,32 @@
+export const DEFAULT_HANZO_APPS = [
+    {
+        id: 'account',
+        label: 'Account',
+        href: 'https://hanzo.id/account',
+        description: 'Profile, orgs & referrals',
+    },
+    {
+        id: 'billing',
+        label: 'Billing',
+        href: 'https://billing.hanzo.ai',
+        description: 'Subscriptions & usage',
+    },
+    {
+        id: 'console',
+        label: 'Console',
+        href: 'https://console.hanzo.ai',
+        description: 'API keys & projects',
+    },
+    {
+        id: 'chat',
+        label: 'Chat',
+        href: 'https://chat.hanzo.ai',
+        description: 'AI chat & models',
+    },
+    {
+        id: 'platform',
+        label: 'Platform',
+        href: 'https://platform.hanzo.ai',
+        description: 'Deploy & scale services',
+    },
+];

package/dist/src/navigation/hanzo-shell/useHanzoAuth.d.ts

@@ -0,0 +1,16 @@
+import type { HanzoUser, HanzoOrg } from './types';
+/**
+ * Reads IAM auth from localStorage (shared across all hanzo.* apps) and fetches
+ * current user info + orgs from iam.hanzo.ai. Zero-dependency hook — works in
+ * billing.hanzo.ai, hanzo.id/account, console.hanzo.ai, etc.
+ */
+export declare function useHanzoAuth(): {
+    user: HanzoUser | undefined;
+    organizations: HanzoOrg[];
+    currentOrgId: string | undefined;
+    token: string | null;
+    loading: boolean;
+    signOut: () => void;
+    switchOrg: (orgId: string) => void;
+};
+//# sourceMappingURL=useHanzoAuth.d.ts.map

package/dist/src/navigation/hanzo-shell/useHanzoAuth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHanzoAuth.d.ts","sourceRoot":"","sources":["../../../../src/navigation/hanzo-shell/useHanzoAuth.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAclD;;;;GAIG;AACH,wBAAgB,YAAY;;;;;;;uBAgFY,MAAM;EAK7C"}

package/dist/src/navigation/hanzo-shell/useHanzoAuth.js

@@ -0,0 +1,93 @@
+'use client';
+import { useState, useEffect, useCallback } from 'react';
+const TOKEN_KEY = 'hanzo-auth-token';
+const USER_KEY = 'hanzo-user';
+const EXPIRES_KEY = 'hanzo-auth-expires';
+const IAM_ENDPOINT = 'https://iam.hanzo.ai';
+const ORG_MAP = {
+    hanzo: { name: 'Hanzo AI', slug: 'hanzo' },
+    lux: { name: 'Lux Network', slug: 'lux' },
+    zoo: { name: 'Zoo Labs', slug: 'zoo' },
+    pars: { name: 'Pars', slug: 'pars' },
+};
+/**
+ * Reads IAM auth from localStorage (shared across all hanzo.* apps) and fetches
+ * current user info + orgs from iam.hanzo.ai. Zero-dependency hook — works in
+ * billing.hanzo.ai, hanzo.id/account, console.hanzo.ai, etc.
+ */
+export function useHanzoAuth() {
+    const [user, setUser] = useState(undefined);
+    const [organizations, setOrganizations] = useState([]);
+    const [currentOrgId, setCurrentOrgId] = useState(undefined);
+    const [token, setToken] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const load = useCallback(async () => {
+        try {
+            const storedToken = localStorage.getItem(TOKEN_KEY);
+            const expires = localStorage.getItem(EXPIRES_KEY);
+            if (!storedToken || (expires && Date.now() > Number(expires))) {
+                setLoading(false);
+                return;
+            }
+            setToken(storedToken);
+            // Try to get from cache first for instant render
+            const cached = localStorage.getItem(USER_KEY);
+            if (cached) {
+                try {
+                    const u = JSON.parse(cached);
+                    if (u?.email) {
+                        setUser({ id: u.id, name: u.displayName || u.name, email: u.email, avatar: u.avatar });
+                    }
+                }
+                catch { /* ignore */ }
+            }
+            // Fetch fresh from IAM
+            const res = await fetch(`${IAM_ENDPOINT}/api/userinfo`, {
+                headers: { Authorization: `Bearer ${storedToken}` },
+            });
+            if (res.ok) {
+                const info = await res.json();
+                const u = {
+                    id: info.sub || info.id,
+                    name: info.name || info.displayName,
+                    email: info.email,
+                    avatar: info.picture || info.avatar,
+                };
+                setUser(u);
+                localStorage.setItem(USER_KEY, JSON.stringify(info));
+                // Build orgs from IAM groups
+                const groups = info.groups || [];
+                const orgs = groups
+                    .map((g) => {
+                    const slug = g.toLowerCase().replace(/^\//, '');
+                    const meta = ORG_MAP[slug];
+                    return meta ? { id: slug, name: meta.name, slug: meta.slug } : null;
+                })
+                    .filter(Boolean);
+                // Default: always include at least a personal org
+                if (orgs.length === 0 && u.email) {
+                    orgs.push({ id: 'personal', name: 'Personal', slug: 'personal' });
+                }
+                setOrganizations(orgs);
+                setCurrentOrgId(orgs[0]?.id);
+            }
+        }
+        catch { /* silently fail */ }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    useEffect(() => {
+        load();
+    }, [load]);
+    const signOut = useCallback(() => {
+        localStorage.removeItem(TOKEN_KEY);
+        localStorage.removeItem(USER_KEY);
+        localStorage.removeItem(EXPIRES_KEY);
+        window.location.href = 'https://hanzo.id';
+    }, []);
+    const switchOrg = useCallback((orgId) => {
+        setCurrentOrgId(orgId);
+    }, []);
+    return { user, organizations, currentOrgId, token, loading, signOut, switchOrg };
+}