@hanzo/ui 8.30.3 → 8.31.0

package/dist/product/BusinessHeader.cjs

@@ -0,0 +1,347 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BUSINESS_APPS = void 0;
+exports.buildSeamlessAppUrl = buildSeamlessAppUrl;
+exports.BusinessHeader = BusinessHeader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * BusinessHeader — the universal global header for every Hanzo Business application
+ * (`hanzo.team`, `crm.hanzo.ai`, `cms.hanzo.ai`, `marketing.hanzo.ai`, `ads.hanzo.ai`,
+ * `social.hanzo.ai`, `console.hanzo.ai`, `platform.hanzo.ai`, etc.).
+ *
+ * Layout & Behavior:
+ *  - Top Left:
+ *      1. Product identity + App Switcher trigger (`Hanzo CRM ▾`, `Hanzo Team ▾`, etc.)
+ *         Opening the App Switcher lists CRM, Work (Team), CMS, Email, Ads, Cal, Bots,
+ *         Social, Chat, Dev, Commerce, Analytics, Data Room, Sign, Billing, Console, Platform.
+ *      2. Current organization beneath the product identity (e.g. `Hanzo AI`), clickable
+ *         to switch organizations.
+ *  - Center:
+ *      Breadcrumbs / Command Search (`children`).
+ *  - Top Right:
+ *      Signed-in user's avatar + display name + Account Menu:
+ *        - Identity card showing Display Name, Email, and `Current account` indicator
+ *        - Switch account (choose between authenticated identities on this browser,
+ *          never confused with organizations)
+ *        - Add another account (`prompt=login` without ending existing sessions)
+ *        - Switch organization (choose between organizations the user belongs to)
+ *        - Settings & Theme
+ *        - Sign out
+ */
+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 name_1 = require("./name.cjs");
+const OrgMark_1 = require("./OrgMark.cjs");
+exports.BUSINESS_APPS = [
+    {
+        id: 'crm',
+        label: 'CRM',
+        productTitle: 'Hanzo CRM',
+        description: 'Pipeline, contacts, investors & deals',
+        href: 'https://crm.hanzo.ai',
+        supportsFreshAuth: true,
+    },
+    {
+        id: 'team',
+        label: 'Work',
+        productTitle: 'Hanzo Team',
+        description: 'Shared workspace, docs, tasks & drive',
+        href: 'https://hanzo.team',
+        supportsFreshAuth: false,
+    },
+    {
+        id: 'cms',
+        label: 'CMS',
+        productTitle: 'Hanzo CMS',
+        description: 'Content, pages, collections & media',
+        href: 'https://cms.hanzo.ai/admin',
+        supportsFreshAuth: false,
+    },
+    {
+        id: 'email',
+        label: 'Email',
+        productTitle: 'Hanzo Email',
+        description: 'Campaigns, journeys & broadcasts',
+        href: 'https://marketing.hanzo.ai',
+        supportsFreshAuth: true,
+    },
+    {
+        id: 'ads',
+        label: 'Ads',
+        productTitle: 'Hanzo Ads',
+        description: 'Ad spend, ROAS & attribution',
+        href: 'https://ads.hanzo.ai',
+        supportsFreshAuth: true,
+    },
+    {
+        id: 'cal',
+        label: 'Cal',
+        productTitle: 'Hanzo Cal',
+        description: 'Scheduling, bookings & availability',
+        href: 'https://hanzo.team/cal',
+        supportsFreshAuth: false,
+    },
+    {
+        id: 'bots',
+        label: 'Bots',
+        productTitle: 'Hanzo Bots',
+        description: 'Autonomous AI agents & workflows',
+        href: 'https://hanzo.bot',
+        supportsFreshAuth: false,
+    },
+    {
+        id: 'social',
+        label: 'Social',
+        productTitle: 'Hanzo Publish',
+        description: 'Social scheduling, inbox & listening',
+        href: 'https://social.hanzo.ai',
+        supportsFreshAuth: true,
+    },
+    {
+        id: 'chat',
+        label: 'Chat',
+        productTitle: 'Hanzo Chat',
+        description: 'AI assistant, models & playground',
+        href: 'https://hanzo.ai/chat',
+        supportsFreshAuth: false,
+    },
+    {
+        id: 'dev',
+        label: 'Dev',
+        productTitle: 'Hanzo Dev',
+        description: 'Coding agents & cloud workspaces',
+        href: 'https://hanzo.ai/dev',
+        supportsFreshAuth: false,
+    },
+    {
+        id: 'commerce',
+        label: 'Commerce',
+        productTitle: 'Hanzo Commerce',
+        description: 'Store, products, orders & subscriptions',
+        href: 'https://commerce-admin.hanzo.ai/admin/',
+        supportsFreshAuth: false,
+    },
+    {
+        id: 'analytics',
+        label: 'Analytics',
+        productTitle: 'Hanzo Analytics',
+        description: 'Web traffic, funnels & retention',
+        href: 'https://analytics.hanzo.ai',
+        supportsFreshAuth: false,
+    },
+    {
+        id: 'dataroom',
+        label: 'Data Room',
+        productTitle: 'Hanzo Data Room',
+        description: 'Secure investor & deal data rooms',
+        href: 'https://dataroom.hanzo.ai',
+        supportsFreshAuth: false,
+    },
+    {
+        id: 'sign',
+        label: 'Sign',
+        productTitle: 'Hanzo Sign',
+        description: 'Document e-signatures & agreements',
+        href: 'https://esign.hanzo.ai',
+        supportsFreshAuth: false,
+    },
+    {
+        id: 'billing',
+        label: 'Billing',
+        productTitle: 'Hanzo Billing',
+        description: 'Usage, balance, invoices & payment methods',
+        href: 'https://billing.hanzo.ai',
+        supportsFreshAuth: false,
+    },
+    {
+        id: 'console',
+        label: 'Console',
+        productTitle: 'Hanzo Console',
+        description: 'Cloud, AI infrastructure & IAM',
+        href: 'https://console.hanzo.ai',
+        supportsFreshAuth: true,
+    },
+    {
+        id: 'platform',
+        label: 'Platform',
+        productTitle: 'Hanzo Platform',
+        description: 'PaaS deployments, clusters & containers',
+        href: 'https://platform.hanzo.ai',
+        supportsFreshAuth: true,
+    },
+];
+function AppIcon({ id, size = 16 }) {
+    switch (id) {
+        case 'crm':
+            return (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Briefcase, { size: size });
+        case 'team':
+        case 'work':
+            return (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Users, { size: size });
+        case 'cms':
+            return (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Globe, { size: size });
+        case 'email':
+        case 'marketing':
+            return (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Mail, { size: size });
+        case 'ads':
+            return (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Megaphone, { size: size });
+        case 'cal':
+            return (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Calendar, { size: size });
+        case 'bots':
+            return (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Bot, { size: size });
+        case 'social':
+            return (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Share2, { size: size });
+        case 'chat':
+            return (0, jsx_runtime_1.jsx)(lucide_icons_2_1.MessageCircle, { size: size });
+        case 'dev':
+            return (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Terminal, { size: size });
+        case 'commerce':
+            return (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ShoppingBag, { size: size });
+        case 'analytics':
+            return (0, jsx_runtime_1.jsx)(lucide_icons_2_1.BarChart3, { size: size });
+        case 'dataroom':
+            return (0, jsx_runtime_1.jsx)(lucide_icons_2_1.FolderLock, { size: size });
+        case 'sign':
+            return (0, jsx_runtime_1.jsx)(lucide_icons_2_1.FileSignature, { size: size });
+        case 'billing':
+            return (0, jsx_runtime_1.jsx)(lucide_icons_2_1.CreditCard, { size: size });
+        case 'console':
+            return (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Sparkles, { size: size });
+        case 'platform':
+            return (0, jsx_runtime_1.jsx)(lucide_icons_2_1.LayoutGrid, { size: size });
+        default:
+            return (0, jsx_runtime_1.jsx)(lucide_icons_2_1.AppWindow, { size: size });
+    }
+}
+/** Build a session-preserving destination URL when switching between Hanzo Business apps. */
+function buildSeamlessAppUrl(app, opts) {
+    try {
+        const u = new URL(app.href);
+        if (app.supportsFreshAuth && opts?.who) {
+            const nextPath = opts?.org ? `/?org=${encodeURIComponent(opts.org)}` : '/';
+            return `${u.origin}/auth/fresh?next=${encodeURIComponent(nextPath)}&who=${encodeURIComponent(opts.who)}`;
+        }
+        if (opts?.org && !u.searchParams.has('org')) {
+            u.searchParams.set('org', opts.org);
+        }
+        return u.toString();
+    }
+    catch {
+        return app.href;
+    }
+}
+function BusinessHeader({ appId = 'crm', appTitle, showAppTitle = false, apps = exports.BUSINESS_APPS, onSelectApp, brandMark, currentOrg, orgs = [], onSelectOrg, onAllOrgs, onCreateOrg, leftSlot, children, rightSlot, user, accounts = [], onSwitchAccount, onAddAccount, onSettings, onOrgSettings, onBilling, theme, onSignOut, }) {
+    const [appMenuOpen, setAppMenuOpen] = (0, react_1.useState)(false);
+    const [orgMenuOpen, setOrgMenuOpen] = (0, react_1.useState)(false);
+    const [accountMenuOpen, setAccountMenuOpen] = (0, react_1.useState)(false);
+    const activeApp = apps.find((a) => a.id === appId) ?? apps[0];
+    const resolvedAppTitle = appTitle || activeApp?.productTitle || 'Hanzo CRM';
+    const orgDisplay = currentOrg?.displayName?.trim() || currentOrg?.name || 'Hanzo AI';
+    const userName = (0, name_1.displayName)(user?.name, user?.email) || 'Account';
+    const userEmail = user?.email || '';
+    const userSub = user?.sub || '';
+    // Deduplicate accounts list while keeping current user identifiable
+    const knownAccounts = (() => {
+        const list = [];
+        const seen = new Set();
+        if (userSub) {
+            seen.add(userSub);
+            list.push({
+                sub: userSub,
+                owner: user?.owner || currentOrg?.name || 'hanzo',
+                name: userName,
+                email: userEmail || undefined,
+                avatar: user?.avatar,
+            });
+        }
+        for (const acc of accounts) {
+            if (acc.sub && !seen.has(acc.sub)) {
+                seen.add(acc.sub);
+                list.push(acc);
+            }
+        }
+        return list;
+    })();
+    const handleLaunchApp = (app) => {
+        setAppMenuOpen(false);
+        if (onSelectApp) {
+            onSelectApp(app);
+            return;
+        }
+        if (typeof window !== 'undefined') {
+            const targetUrl = buildSeamlessAppUrl(app, {
+                who: userSub || undefined,
+                org: currentOrg?.name || undefined,
+            });
+            window.location.assign(targetUrl);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { render: "header", height: 52, px: "$3", gap: "$3", items: "center", justify: "space-between", borderBottomWidth: 1, borderColor: "$borderColor", bg: "$background", shrink: 0, "data-slot": "bar", "data-testid": "hanzo-business-header", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", minW: 0, shrink: 0, children: [leftSlot, (0, jsx_runtime_1.jsxs)(gui_1.Popover, { open: appMenuOpen, onOpenChange: setAppMenuOpen, placement: "bottom-start", allowFlip: true, stayInFrame: true, children: [(0, jsx_runtime_1.jsx)(gui_1.Popover.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)(gui_1.XStack, { role: "button", tabIndex: 0, cursor: "pointer", items: "center", gap: "$1.5", height: 34, px: "$2", rounded: "$3", borderWidth: 0, outlineWidth: 0, hoverStyle: { bg: '$color3' }, "aria-label": `${resolvedAppTitle} — Switch application`, "aria-haspopup": "menu", "aria-expanded": appMenuOpen, "data-testid": "business-app-switcher-trigger", onKeyDown: (e) => {
+                                        if (e?.key === 'Enter' || e?.key === ' ') {
+                                            e.preventDefault?.();
+                                            setAppMenuOpen(!appMenuOpen);
+                                        }
+                                    }, children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { items: "center", justify: "center", width: 24, height: 24, shrink: 0, children: brandMark ?? (0, jsx_runtime_1.jsx)(BrandMark_1.BrandMark, { size: 20, wordmark: "" }) }), showAppTitle ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$3", fontWeight: "700", color: "$color12", numberOfLines: 1, children: resolvedAppTitle })) : null, (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: 13, color: "$color10" })] }) }), (0, jsx_runtime_1.jsx)(gui_1.Popover.Content, { role: "menu", "aria-label": "Hanzo Business Applications", borderWidth: 1, elevation: "$4", p: "$2.5", width: 360, bg: "$background", borderColor: "$borderColor", rounded: "$4", style: { zIndex: 100000 }, children: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$2", width: "100%", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", justify: "space-between", px: "$2", pt: "$1", children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$1", fontWeight: "700", color: "$color10", textTransform: "uppercase", letterSpacing: 0.6, children: "Hanzo Business Suite" }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$1", color: "$color10", children: orgDisplay })] }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { gap: "$0.5", maxH: 420, style: { overflowY: 'auto' }, children: apps.map((app) => {
+                                                const isCurrent = app.id === appId;
+                                                return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { role: "menuitem", tabIndex: 0, cursor: "pointer", items: "center", gap: "$2.5", px: "$2.5", py: "$2", rounded: "$3", bg: isCurrent ? '$color3' : 'transparent', hoverStyle: { bg: '$color3' }, onPress: () => handleLaunchApp(app), "data-testid": `app-switcher-item-${app.id}`, children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { width: 32, height: 32, rounded: "$3", bg: isCurrent ? '$color4' : '$color2', items: "center", justify: "center", shrink: 0, children: (0, jsx_runtime_1.jsx)(AppIcon, { id: app.id, size: 16 }) }), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { flex: 1, minW: 0, gap: 1, children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$1.5", children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", fontWeight: "600", color: "$color12", numberOfLines: 1, children: app.label }), isCurrent ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: 10, fontWeight: "600", color: "$color10", px: "$1.5", py: 1, rounded: "$2", bg: "$color4", children: "Current" })) : null] }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$1", color: "$color10", numberOfLines: 1, children: app.description })] }), isCurrent ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 14, color: "$color12" }) : null] }, app.id));
+                                            }) })] }) })] }), (0, jsx_runtime_1.jsxs)(gui_1.Popover, { open: orgMenuOpen, onOpenChange: setOrgMenuOpen, placement: "bottom-start", allowFlip: true, stayInFrame: true, children: [(0, jsx_runtime_1.jsx)(gui_1.Popover.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)(gui_1.XStack, { role: "button", tabIndex: 0, cursor: "pointer", items: "center", gap: "$2", height: 34, px: "$2.5", rounded: "$3", borderWidth: 0, outlineWidth: 0, hoverStyle: { bg: '$color3' }, "aria-label": `Current organization: ${orgDisplay}. Click to switch organization.`, "data-testid": "business-org-subtitle-trigger", onKeyDown: (e) => {
+                                        if (e?.key === 'Enter' || e?.key === ' ') {
+                                            e.preventDefault?.();
+                                            setOrgMenuOpen(!orgMenuOpen);
+                                        }
+                                    }, children: [(0, jsx_runtime_1.jsx)(OrgMark_1.OrgMark, { org: { name: orgDisplay, logo: currentOrg?.logo }, size: 22 }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", fontWeight: "600", color: "$color12", numberOfLines: 1, maxW: 220, children: orgDisplay }), (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: 13, color: "$color10" })] }) }), (0, jsx_runtime_1.jsx)(gui_1.Popover.Content, { role: "menu", "aria-label": "Switch organization", borderWidth: 1, elevation: "$4", p: "$2", width: 280, bg: "$background", borderColor: "$borderColor", rounded: "$4", style: { zIndex: 100000 }, children: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$1", width: "100%", children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { px: "$2", py: "$1", items: "center", justify: "space-between", children: (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$1", fontWeight: "700", color: "$color10", textTransform: "uppercase", letterSpacing: 0.5, children: "Switch organization" }) }), orgs.map((o) => {
+                                            const active = o.name === currentOrg?.name;
+                                            const label = o.displayName?.trim() || o.name;
+                                            return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { role: "menuitem", "aria-checked": active, tabIndex: 0, cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$1.5", rounded: "$3", bg: active ? '$color3' : 'transparent', hoverStyle: { bg: '$color3' }, onPress: () => {
+                                                    setOrgMenuOpen(false);
+                                                    onSelectOrg?.(o.name);
+                                                }, children: [(0, jsx_runtime_1.jsx)(OrgMark_1.OrgMark, { org: { name: label, logo: o.logo }, size: 22 }), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", fontWeight: active ? '600' : '500', color: "$color12", numberOfLines: 1, children: label }), o.displayName && o.displayName !== o.name ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$1", color: "$color10", numberOfLines: 1, children: o.name })) : null] }), active ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 14, color: "$color12" }) : null] }, o.name));
+                                        }), (onAllOrgs || onCreateOrg) ? (0, jsx_runtime_1.jsx)(gui_1.Separator, { borderColor: "$borderColor", my: "$1" }) : null, onAllOrgs ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { role: "menuitem", tabIndex: 0, cursor: "pointer", items: "center", gap: "$2", px: "$2", py: "$1.5", rounded: "$3", hoverStyle: { bg: '$color3' }, onPress: () => {
+                                                setOrgMenuOpen(false);
+                                                onAllOrgs();
+                                            }, children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.Building2, { size: 14, color: "$color10" }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$color12", children: "All organizations\u2026" })] })) : null, onCreateOrg ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { role: "menuitem", tabIndex: 0, cursor: "pointer", items: "center", gap: "$2", px: "$2", py: "$1.5", rounded: "$3", hoverStyle: { bg: '$color3' }, onPress: () => {
+                                                setOrgMenuOpen(false);
+                                                onCreateOrg();
+                                            }, children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.Plus, { size: 14, color: "$color10" }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$color12", children: "Create organization" })] })) : null] }) })] })] }), (0, jsx_runtime_1.jsx)(gui_1.XStack, { flex: 1, items: "center", justify: "center", minW: 0, px: "$2", children: children }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", shrink: 0, children: [rightSlot, (0, jsx_runtime_1.jsxs)(gui_1.Popover, { open: accountMenuOpen, onOpenChange: setAccountMenuOpen, placement: "bottom-end", allowFlip: true, stayInFrame: true, children: [(0, jsx_runtime_1.jsx)(gui_1.Popover.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)(gui_1.XStack, { role: "button", tabIndex: 0, cursor: "pointer", items: "center", gap: "$2", height: 40, px: "$2.5", rounded: "$3", hoverStyle: { bg: '$color3' }, "aria-label": `${userName} · Account menu`, "aria-haspopup": "menu", "aria-expanded": accountMenuOpen, "data-testid": "business-account-menu-trigger", onKeyDown: (e) => {
+                                        if (e?.key === 'Enter' || e?.key === ' ') {
+                                            e.preventDefault?.();
+                                            setAccountMenuOpen(!accountMenuOpen);
+                                        }
+                                    }, children: [user?.avatar || userName ? ((0, jsx_runtime_1.jsx)(OrgMark_1.OrgMark, { org: { name: userName, logo: user?.avatar }, size: 28 })) : ((0, jsx_runtime_1.jsx)(lucide_icons_2_1.UserRound, { size: 18 })), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { minW: 0, justify: "center", display: "none", $sm: { display: 'flex' }, children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", fontWeight: "600", color: "$color12", numberOfLines: 1, maxW: 160, style: { lineHeight: '16px' }, children: userName }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: 11, color: "$color10", numberOfLines: 1, maxW: 160, style: { lineHeight: '13px' }, children: "Current account" })] }), (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: 14, color: "$color10" })] }) }), (0, jsx_runtime_1.jsx)(gui_1.Popover.Content, { role: "menu", "aria-label": "Account menu", borderWidth: 1, elevation: "$4", p: "$2", width: 310, bg: "$background", borderColor: "$borderColor", rounded: "$4", style: { zIndex: 100000 }, children: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$1", width: "100%", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2.5", px: "$2", py: "$2", rounded: "$3", bg: "$color2", children: [(0, jsx_runtime_1.jsx)(OrgMark_1.OrgMark, { org: { name: userName, logo: user?.avatar }, size: 36 }), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { flex: 1, minW: 0, gap: 1, children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$3", fontWeight: "700", color: "$color12", numberOfLines: 1, children: userName }), userEmail && userEmail !== userName ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$1", color: "$color10", numberOfLines: 1, children: userEmail })) : null, (0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$1.5", mt: 2, children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { width: 6, height: 6, rounded: 999, bg: "#10b981" }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: 11, fontWeight: "600", color: "$color10", children: "Current account" })] })] })] }), (0, jsx_runtime_1.jsx)(gui_1.Separator, { borderColor: "$borderColor", my: "$1" }), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$0.5", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { px: "$2", py: "$1", items: "center", justify: "space-between", children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$1", fontWeight: "700", color: "$color10", textTransform: "uppercase", letterSpacing: 0.5, children: "Switch account" }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: 11, color: "$color9", children: "Identities" })] }), knownAccounts.map((acc) => {
+                                                    const isCurrent = Boolean(userSub && acc.sub === userSub);
+                                                    const accName = acc.name || acc.email || acc.sub;
+                                                    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { role: "menuitem", "aria-checked": isCurrent, tabIndex: 0, cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$1.5", rounded: "$3", bg: isCurrent ? '$color3' : 'transparent', hoverStyle: { bg: '$color3' }, onPress: () => {
+                                                            setAccountMenuOpen(false);
+                                                            if (!isCurrent)
+                                                                onSwitchAccount?.(acc);
+                                                        }, "data-testid": `switch-account-${acc.sub}`, children: [(0, jsx_runtime_1.jsx)(OrgMark_1.OrgMark, { org: { name: accName, logo: acc.avatar }, size: 24 }), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", fontWeight: isCurrent ? '600' : '500', color: "$color12", numberOfLines: 1, children: accName }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$1", color: "$color10", numberOfLines: 1, children: acc.email && acc.email !== accName ? acc.email : isCurrent ? 'Current account' : `Identity · ${acc.owner}` })] }), isCurrent ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 14, color: "$color12" }) : null] }, acc.sub));
+                                                }), onAddAccount ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { role: "menuitem", tabIndex: 0, cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$1.5", rounded: "$3", hoverStyle: { bg: '$color3' }, onPress: () => {
+                                                        setAccountMenuOpen(false);
+                                                        onAddAccount();
+                                                    }, "data-testid": "add-another-account", children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { width: 24, height: 24, rounded: 999, bg: "$color3", items: "center", justify: "center", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.UserPlus, { size: 13, color: "$color11" }) }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", fontWeight: "500", color: "$color12", children: "Add another account" })] })) : null] }), (0, jsx_runtime_1.jsx)(gui_1.Separator, { borderColor: "$borderColor", my: "$1" }), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$0.5", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { px: "$2", py: "$1", items: "center", justify: "space-between", children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$1", fontWeight: "700", color: "$color10", textTransform: "uppercase", letterSpacing: 0.5, children: "Switch organization" }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: 11, color: "$color9", children: orgDisplay })] }), orgs.slice(0, 5).map((o) => {
+                                                    const active = o.name === currentOrg?.name;
+                                                    const label = o.displayName?.trim() || o.name;
+                                                    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { role: "menuitem", "aria-checked": active, tabIndex: 0, cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$1.5", rounded: "$3", bg: active ? '$color3' : 'transparent', hoverStyle: { bg: '$color3' }, onPress: () => {
+                                                            setAccountMenuOpen(false);
+                                                            if (!active)
+                                                                onSelectOrg?.(o.name);
+                                                        }, "data-testid": `switch-org-${o.name}`, children: [(0, jsx_runtime_1.jsx)(OrgMark_1.OrgMark, { org: { name: label, logo: o.logo }, size: 22 }), (0, jsx_runtime_1.jsx)(gui_1.Text, { flex: 1, fontSize: "$2", fontWeight: active ? '600' : '500', color: "$color12", numberOfLines: 1, children: label }), active ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 14, color: "$color12" }) : null] }, o.name));
+                                                }), onAllOrgs ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { role: "menuitem", tabIndex: 0, cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$1.5", rounded: "$3", hoverStyle: { bg: '$color3' }, onPress: () => {
+                                                        setAccountMenuOpen(false);
+                                                        onAllOrgs();
+                                                    }, "data-testid": "switch-org-all", children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.Building2, { size: 14, color: "$color10" }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$color12", children: "Switch organization\u2026" })] })) : null] }), (0, jsx_runtime_1.jsx)(gui_1.Separator, { borderColor: "$borderColor", my: "$1" }), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$0.5", children: [onSettings ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { role: "menuitem", tabIndex: 0, cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$1.5", rounded: "$3", hoverStyle: { bg: '$color3' }, onPress: () => {
+                                                        setAccountMenuOpen(false);
+                                                        onSettings();
+                                                    }, "data-testid": "account-menu-settings", children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.Settings, { size: 14, color: "$color10" }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$color12", children: "Settings" })] })) : null, onOrgSettings && onOrgSettings !== onSettings ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { role: "menuitem", tabIndex: 0, cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$1.5", rounded: "$3", hoverStyle: { bg: '$color3' }, onPress: () => {
+                                                        setAccountMenuOpen(false);
+                                                        onOrgSettings();
+                                                    }, children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.Building2, { size: 14, color: "$color10" }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$color12", children: "Organization settings" })] })) : null, onBilling ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { role: "menuitem", tabIndex: 0, cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$1.5", rounded: "$3", hoverStyle: { bg: '$color3' }, onPress: () => {
+                                                        setAccountMenuOpen(false);
+                                                        onBilling();
+                                                    }, children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.CreditCard, { size: 14, color: "$color10" }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$color12", children: "Billing" })] })) : null, theme != null ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", justify: "space-between", px: "$2", py: "$1.5", rounded: "$3", children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$color12", children: "Theme" }), theme] })) : 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.jsxs)(gui_1.XStack, { role: "menuitem", tabIndex: 0, cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$1.5", rounded: "$3", hoverStyle: { bg: '$color3' }, onPress: () => {
+                                                        setAccountMenuOpen(false);
+                                                        onSignOut();
+                                                    }, "data-testid": "account-menu-signout", children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.LogOut, { size: 14, color: "#ef4444" }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", fontWeight: "500", color: "#ef4444", children: "Sign out" })] })] })) : null] }) })] })] })] }));
+}

package/dist/product/BusinessHeader.d.ts

@@ -0,0 +1,113 @@
+/**
+ * BusinessHeader — the universal global header for every Hanzo Business application
+ * (`hanzo.team`, `crm.hanzo.ai`, `cms.hanzo.ai`, `marketing.hanzo.ai`, `ads.hanzo.ai`,
+ * `social.hanzo.ai`, `console.hanzo.ai`, `platform.hanzo.ai`, etc.).
+ *
+ * Layout & Behavior:
+ *  - Top Left:
+ *      1. Product identity + App Switcher trigger (`Hanzo CRM ▾`, `Hanzo Team ▾`, etc.)
+ *         Opening the App Switcher lists CRM, Work (Team), CMS, Email, Ads, Cal, Bots,
+ *         Social, Chat, Dev, Commerce, Analytics, Data Room, Sign, Billing, Console, Platform.
+ *      2. Current organization beneath the product identity (e.g. `Hanzo AI`), clickable
+ *         to switch organizations.
+ *  - Center:
+ *      Breadcrumbs / Command Search (`children`).
+ *  - Top Right:
+ *      Signed-in user's avatar + display name + Account Menu:
+ *        - Identity card showing Display Name, Email, and `Current account` indicator
+ *        - Switch account (choose between authenticated identities on this browser,
+ *          never confused with organizations)
+ *        - Add another account (`prompt=login` without ending existing sessions)
+ *        - Switch organization (choose between organizations the user belongs to)
+ *        - Settings & Theme
+ *        - Sign out
+ */
+import { type ReactNode } from 'react';
+export type BusinessAppId = 'crm' | 'team' | 'work' | 'cms' | 'email' | 'marketing' | 'ads' | 'cal' | 'bots' | 'social' | 'chat' | 'dev' | 'commerce' | 'analytics' | 'dataroom' | 'sign' | 'billing' | 'console' | 'platform';
+export type BusinessAppItem = {
+    id: BusinessAppId;
+    /** Short name in the app switcher grid/list, e.g. 'CRM', 'CMS', 'Email', 'Work'. */
+    label: string;
+    /** Full product title when active at top-left, e.g. 'Hanzo CRM', 'Hanzo Team'. */
+    productTitle: string;
+    /** Subtitle explaining what the app does. */
+    description: string;
+    /** Canonical destination URL. */
+    href: string;
+    /** Whether the surface supports `/auth/fresh?next=/&who=<sub>` session handoff. */
+    supportsFreshAuth?: boolean;
+};
+export declare const BUSINESS_APPS: readonly BusinessAppItem[];
+export type BusinessHeaderAccount = {
+    sub: string;
+    owner: string;
+    name: string;
+    email?: string;
+    avatar?: string;
+};
+export type BusinessHeaderOrg = {
+    name: string;
+    displayName?: string;
+    logo?: string;
+};
+export type BusinessHeaderProps = {
+    /** Current application ID (`'crm'`, `'team'`, `'cms'`, `'email'`, `'ads'`, `'console'`, etc.). */
+    appId?: BusinessAppId;
+    /** Explicit product title override, e.g. `'Hanzo CRM'`. */
+    appTitle?: string;
+    /** Whether to show the product title text next to the brand mark when in the app (default: `false`). */
+    showAppTitle?: boolean;
+    /** Available business apps in the app switcher. Defaults to `BUSINESS_APPS`. */
+    apps?: readonly BusinessAppItem[];
+    /** Custom handler when an app is selected from the switcher. */
+    onSelectApp?: (app: BusinessAppItem) => void;
+    /** Custom brand mark icon at the far left. */
+    brandMark?: ReactNode;
+    /** Current organization shown beneath the product title and in Switch organization. */
+    currentOrg?: BusinessHeaderOrg;
+    /** All organizations the user can switch between. */
+    orgs?: readonly BusinessHeaderOrg[];
+    /** Called when the user selects an organization. */
+    onSelectOrg?: (orgName: string) => void;
+    /** Called when the user clicks "All organizations" / "Switch organization" modal. */
+    onAllOrgs?: () => void;
+    /** Called when the user clicks "Create organization". */
+    onCreateOrg?: () => void;
+    /** Optional left-side slot before the app identity (e.g. mobile drawer hamburger). */
+    leftSlot?: ReactNode;
+    /** Center slot (e.g. breadcrumbs, global search `⌘K`). */
+    children?: ReactNode;
+    /** Optional right-side slot before the user account menu. */
+    rightSlot?: ReactNode;
+    /** Currently signed-in user identity. */
+    user?: {
+        sub?: string;
+        name?: string;
+        email?: string;
+        avatar?: string;
+        owner?: string;
+    } | null;
+    /** Authenticated identities available in this browser session (`Switch account`). */
+    accounts?: readonly BusinessHeaderAccount[];
+    /** Switch to another authenticated identity (`login_hint: account.sub`). */
+    onSwitchAccount?: (account: BusinessHeaderAccount) => void;
+    /** Authenticate an additional identity (`prompt=login`). */
+    onAddAccount?: () => void;
+    /** Open user/account settings. */
+    onSettings?: () => void;
+    /** Open organization settings. */
+    onOrgSettings?: () => void;
+    /** Open billing. */
+    onBilling?: () => void;
+    /** Theme toggle control rendered inside the account menu. */
+    theme?: ReactNode;
+    /** Sign out of the session. */
+    onSignOut?: () => void;
+};
+/** Build a session-preserving destination URL when switching between Hanzo Business apps. */
+export declare function buildSeamlessAppUrl(app: BusinessAppItem, opts?: {
+    who?: string;
+    org?: string;
+}): string;
+export declare function BusinessHeader({ appId, appTitle, showAppTitle, apps, onSelectApp, brandMark, currentOrg, orgs, onSelectOrg, onAllOrgs, onCreateOrg, leftSlot, children, rightSlot, user, accounts, onSwitchAccount, onAddAccount, onSettings, onOrgSettings, onBilling, theme, onSignOut, }: BusinessHeaderProps): import("react").JSX.Element;
+//# sourceMappingURL=BusinessHeader.d.ts.map

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

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