@hanzo/ui 8.0.27 → 8.0.28

package/dist/product/OrgMark.cjs

@@ -0,0 +1,50 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.monogram = monogram;
+exports.OrgMark = OrgMark;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * OrgMark — the ONE organization identity treatment.
+ *
+ * An org shows its OWN logo when IAM carries one; when it does not, it shows its
+ * MONOGRAM on a neutral tile — the same treatment the account widget gives a
+ * person, so a workspace and a user read as peers. It is never a house mark: a
+ * customer's console must show the customer's identity, not ours.
+ *
+ * Monochrome by construction (`$color4` tile, `$color12` glyph) so it belongs to
+ * the chrome; colour stays with content.
+ */
+const gui_1 = require("@hanzo/gui");
+/**
+ * The monogram for a name: the first letter of each of the first two words,
+ * uppercased — the SAME rule @hanzo/iam's account widget applies to a person, so
+ * a workspace and a user wear one treatment. Words break on whitespace and on the
+ * separators an org id carries (`.`, `_`, `-`, `/`), so `acme-labs` reads AL
+ * while a single word reads its one initial.
+ */
+function monogram(name) {
+    const words = name.trim().split(/[\s._/-]+/).filter(Boolean);
+    const letters = words
+        .slice(0, 2)
+        .map((w) => w[0] ?? '')
+        .join('');
+    return (letters || name.trim().slice(0, 2)).toUpperCase();
+}
+function OrgMark({ org, size = 22, maxW }) {
+    if (org.logo) {
+        // An arbitrary tenant-supplied URL — a raw <img>, since next/image would need
+        // a remote allow-list per customer domain.
+        // eslint-disable-next-line @next/next/no-img-element
+        return ((0, jsx_runtime_1.jsx)("img", { src: org.logo, alt: "", style: {
+                height: size,
+                width: maxW ? 'auto' : size,
+                maxWidth: maxW ?? size,
+                objectFit: 'contain',
+                display: 'block',
+                borderRadius: 6,
+                flexShrink: 0,
+            } }));
+    }
+    return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { width: size, height: size, rounded: "$3", bg: "$color4", items: "center", justify: "center", style: { flexShrink: 0 }, children: (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: Math.round(size * 0.4), fontWeight: "800", color: "$color12", children: monogram(org.displayName || org.name) }) }));
+}

package/dist/product/OrgMark.d.ts

@@ -1,4 +1,4 @@
-import type { Org } from './scope';
+import type { Org } from './scope.js';
 /**
  * The monogram for a name: the first letter of each of the first two words,
  * uppercased — the SAME rule @hanzo/iam's account widget applies to a person, so
@@ -19,3 +19,4 @@ export type OrgMarkProps = {
     maxW?: number;
 };
 export declare function OrgMark({ org, size, maxW }: OrgMarkProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=OrgMark.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OrgMark.d.ts","sourceRoot":"","sources":["../../src/product/OrgMark.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,SAAS,CAAA;AAElC;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAO7C;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,gFAAgF;IAChF,GAAG,EAAE,GAAG,CAAA;IACR,gEAAgE;IAChE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,wBAAgB,OAAO,CAAC,EAAE,GAAG,EAAE,IAAS,EAAE,IAAI,EAAE,EAAE,YAAY,2CAoC7D"}

package/dist/product/OrgMark.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * OrgMark — the ONE organization identity treatment.
+ *
+ * An org shows its OWN logo when IAM carries one; when it does not, it shows its
+ * MONOGRAM on a neutral tile — the same treatment the account widget gives a
+ * person, so a workspace and a user read as peers. It is never a house mark: a
+ * customer's console must show the customer's identity, not ours.
+ *
+ * Monochrome by construction (`$color4` tile, `$color12` glyph) so it belongs to
+ * the chrome; colour stays with content.
+ */
+import { Text, YStack } from '@hanzo/gui';
+/**
+ * The monogram for a name: the first letter of each of the first two words,
+ * uppercased — the SAME rule @hanzo/iam's account widget applies to a person, so
+ * a workspace and a user wear one treatment. Words break on whitespace and on the
+ * separators an org id carries (`.`, `_`, `-`, `/`), so `acme-labs` reads AL
+ * while a single word reads its one initial.
+ */
+export function monogram(name) {
+    const words = name.trim().split(/[\s._/-]+/).filter(Boolean);
+    const letters = words
+        .slice(0, 2)
+        .map((w) => w[0] ?? '')
+        .join('');
+    return (letters || name.trim().slice(0, 2)).toUpperCase();
+}
+export function OrgMark({ org, size = 22, maxW }) {
+    if (org.logo) {
+        // An arbitrary tenant-supplied URL — a raw <img>, since next/image would need
+        // a remote allow-list per customer domain.
+        // eslint-disable-next-line @next/next/no-img-element
+        return (_jsx("img", { src: org.logo, alt: "", style: {
+                height: size,
+                width: maxW ? 'auto' : size,
+                maxWidth: maxW ?? size,
+                objectFit: 'contain',
+                display: 'block',
+                borderRadius: 6,
+                flexShrink: 0,
+            } }));
+    }
+    return (_jsx(YStack, { width: size, height: size, rounded: "$3", bg: "$color4", items: "center", justify: "center", style: { flexShrink: 0 }, children: _jsx(Text, { fontSize: Math.round(size * 0.4), fontWeight: "800", color: "$color12", children: monogram(org.displayName || org.name) }) }));
+}
+//# sourceMappingURL=OrgMark.js.map

package/dist/product/OrgMark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrgMark.js","sourceRoot":"","sources":["../../src/product/OrgMark.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;GAUG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAIzC;;;;;;GAMG;AACH,MAAM,UAAU,QAAQ,CAAC,IAAY;IACnC,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;IAC5D,MAAM,OAAO,GAAG,KAAK;SAClB,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;SACX,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;SACtB,IAAI,CAAC,EAAE,CAAC,CAAA;IACX,OAAO,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAA;AAC3D,CAAC;AAcD,MAAM,UAAU,OAAO,CAAC,EAAE,GAAG,EAAE,IAAI,GAAG,EAAE,EAAE,IAAI,EAAgB;IAC5D,IAAI,GAAG,CAAC,IAAI,EAAE,CAAC;QACb,8EAA8E;QAC9E,2CAA2C;QAC3C,qDAAqD;QACrD,OAAO,CACL,cACE,GAAG,EAAE,GAAG,CAAC,IAAI,EACb,GAAG,EAAC,EAAE,EACN,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI;gBACZ,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;gBAC3B,QAAQ,EAAE,IAAI,IAAI,IAAI;gBACtB,SAAS,EAAE,SAAS;gBACpB,OAAO,EAAE,OAAO;gBAChB,YAAY,EAAE,CAAC;gBACf,UAAU,EAAE,CAAC;aACd,GACD,CACH,CAAA;IACH,CAAC;IACD,OAAO,CACL,KAAC,MAAM,IACL,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,OAAO,EAAC,IAAI,EACZ,EAAE,EAAC,SAAS,EACZ,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,YAExB,KAAC,IAAI,IAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC,EAAE,UAAU,EAAC,KAAK,EAAC,KAAK,EAAC,UAAU,YACtE,QAAQ,CAAC,GAAG,CAAC,WAAW,IAAI,GAAG,CAAC,IAAI,CAAC,GACjC,GACA,CACV,CAAA;AACH,CAAC"}

package/dist/product/OrgSwitcher.cjs

@@ -0,0 +1,140 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OrgSwitcher = OrgSwitcher;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * OrgSwitcher — the Vercel-style org/team switcher, hoisted from the console
+ * (hanzoai/ui#36) onto @hanzo/gui primitives. Shows the org the surface is
+ * scoped to, switches between the orgs the caller can see, and creates one.
+ *
+ * Host-agnostic: the LIST is a lazy, paged loader the host injects (IAM
+ * `get-organizations` behind its own proxy) — one page at a time, the search
+ * term pushed to the server, more on demand (scroll + "Load more"), so it
+ * scales to thousands of orgs. No loader → the current org alone, synthesized
+ * from the scope (never fabricated). Selecting re-scopes IN PLACE via
+ * `scope.switchOrg` (persist + reload → every module refetches under the new
+ * `X-Org-Id`). Create posts through the injected hook, then scopes into the
+ * new org.
+ */
+const react_1 = require("react");
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const instrument_1 = require("./instrument.cjs");
+const OrgMark_1 = require("./OrgMark.cjs");
+const scope_1 = require("./scope.cjs");
+const titleCase = (s) => (s ? s[0].toUpperCase() + s.slice(1) : s);
+function OrgSwitcher({ scope, orgs, pageSize = 20, current: given, create, picker = false }) {
+    const currentId = scope.currentOrg();
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [query, setQuery] = (0, react_1.useState)('');
+    const [debounced, setDebounced] = (0, react_1.useState)('');
+    const [rows, setRows] = (0, react_1.useState)([]);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [loadingMore, setLoadingMore] = (0, react_1.useState)(false);
+    const [hasMore, setHasMore] = (0, react_1.useState)(false);
+    const [creating, setCreating] = (0, react_1.useState)(false);
+    const [newName, setNewName] = (0, react_1.useState)('');
+    const [busy, setBusy] = (0, react_1.useState)(false);
+    const [err, setErr] = (0, react_1.useState)(null);
+    const pageRef = (0, react_1.useRef)(0);
+    const reqRef = (0, react_1.useRef)(0); // race token — a newer request supersedes older ones
+    // Debounce the search so type-as-you-search re-hits the server at most ~4×/s.
+    (0, react_1.useEffect)(() => {
+        const id = setTimeout(() => setDebounced(query.trim()), 250);
+        return () => clearTimeout(id);
+    }, [query]);
+    const fetchPage = (0, react_1.useCallback)(async (page, q, append) => {
+        if (!orgs)
+            return;
+        const token = ++reqRef.current;
+        append ? setLoadingMore(true) : setLoading(true);
+        try {
+            const incoming = await orgs(page, q);
+            if (token !== reqRef.current)
+                return;
+            pageRef.current = page;
+            setRows((prev) => {
+                const merged = append ? [...prev] : [];
+                const seen = new Set(merged.map((o) => o.name));
+                for (const o of incoming)
+                    if (!seen.has(o.name))
+                        merged.push(o);
+                return merged;
+            });
+            setHasMore(incoming.length >= pageSize);
+        }
+        catch {
+            // Honest empty / keep what's shown — never a fabricated list.
+            if (token !== reqRef.current)
+                return;
+            if (!append)
+                setRows([]);
+            setHasMore(false);
+        }
+        finally {
+            if (token === reqRef.current) {
+                setLoading(false);
+                setLoadingMore(false);
+            }
+        }
+    }, [orgs, pageSize]);
+    // (Re)load page 0 when the popover opens or the debounced query changes.
+    (0, react_1.useEffect)(() => {
+        if (!open || !orgs)
+            return;
+        void fetchPage(0, debounced, false);
+    }, [open, debounced, fetchPage, orgs]);
+    const loadMore = (0, react_1.useCallback)(() => {
+        if (loading || loadingMore || !hasMore)
+            return;
+        void fetchPage(pageRef.current + 1, debounced, true);
+    }, [loading, loadingMore, hasMore, debounced, fetchPage]);
+    // Rows to render — the loaded list (client-filtered too), else the current
+    // org synthesized from the scope.
+    const visible = (0, react_1.useMemo)(() => {
+        if (orgs)
+            return (0, scope_1.filterOrgs)(rows, query);
+        return [{ name: currentId, displayName: titleCase(currentId) }];
+    }, [orgs, rows, query, currentId]);
+    // The host's resolved org wins (it alone can carry the logo), then the loaded
+    // row, then a name synthesized from the scope id — never nothing.
+    const current = (0, react_1.useMemo)(() => {
+        if (given && given.name === currentId)
+            return given;
+        return rows.find((o) => o.name === currentId) ?? { name: currentId, displayName: titleCase(currentId) };
+    }, [given, rows, currentId]);
+    const currentLabel = current.displayName || titleCase(current.name);
+    const track = (0, instrument_1.useEmit)();
+    const select = (0, react_1.useCallback)((org) => {
+        track({ component: 'OrgSwitcher', action: 'select', id: org });
+        setOpen(false);
+        scope.switchOrg(org);
+    }, [scope, track]);
+    const submitCreate = async () => {
+        const name = newName.trim();
+        if (!name || !create)
+            return;
+        setBusy(true);
+        setErr(null);
+        try {
+            const org = await create(name);
+            scope.switchOrg(org);
+        }
+        catch (e) {
+            setErr(e instanceof Error ? e.message : 'Could not create the organization.');
+            setBusy(false);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(gui_1.Popover, { open: open, onOpenChange: setOpen, placement: "bottom-start", children: [(0, jsx_runtime_1.jsx)(gui_1.Popover.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(gui_1.Button, { chromeless: true, height: 44, px: "$2", justify: "flex-start", "aria-label": `${currentLabel} · switch organization`, children: (0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2.5", flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(OrgMark_1.OrgMark, { org: current, size: 30 }), (0, jsx_runtime_1.jsx)(gui_1.Text, { flex: 1, minW: 0, fontSize: "$4", fontWeight: "800", color: "$color12", numberOfLines: 1, children: currentLabel }), (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronsUpDown, { size: 15, color: "$color9" })] }) }) }), (0, jsx_runtime_1.jsx)(gui_1.Popover.Content, { bordered: true, elevate: true, p: "$2", width: 300, bg: "$color2", borderColor: "$borderColor", children: creating ? ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$2", children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$color12", fontWeight: "700", children: "Create organization" }), (0, jsx_runtime_1.jsx)(gui_1.Input, { size: "$3", placeholder: "Organization name", value: newName, onChangeText: setNewName, autoCapitalize: "words", onSubmitEditing: () => void submitCreate() }), err ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$1", color: "$red10", children: err })) : null, (0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$2", justify: "flex-end", children: [(0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$2", chromeless: true, onPress: () => setCreating(false), disabled: busy, children: "Cancel" }), (0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$2", onPress: () => void submitCreate(), disabled: busy || !newName.trim(), icon: busy ? (0, jsx_runtime_1.jsx)(gui_1.Spinner, { size: "small" }) : (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Plus, { size: 14 }), children: "Create" })] })] })) : ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$1", children: [orgs ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", px: "$2", py: "$1", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.Search, { size: 13, opacity: 0.6 }), (0, jsx_runtime_1.jsx)(gui_1.Input, { flex: 1, size: "$2", borderWidth: 0, bg: "transparent", placeholder: "Find organization\u2026", value: query, onChangeText: setQuery, autoCapitalize: "none", autoCorrect: false })] })) : null, (0, jsx_runtime_1.jsxs)("div", { style: { maxHeight: 300, overflowY: 'auto', display: 'flex', flexDirection: 'column' }, onScroll: (e) => {
+                                const el = e.currentTarget;
+                                if (el.scrollHeight - el.scrollTop - el.clientHeight < 48)
+                                    loadMore();
+                            }, children: [loading ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", px: "$2", py: "$3", children: [(0, jsx_runtime_1.jsx)(gui_1.Spinner, { size: "small", color: "$color11" }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$color10", children: "Loading organizations\u2026" })] })) : visible.length === 0 ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { px: "$2", py: "$2", fontSize: "$2", color: "$color10", children: query.trim() ? `No organizations match “${query.trim()}”.` : 'No organizations yet.' })) : (visible.map((org) => ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { onPress: () => select(org.name), cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$2", rounded: "$3", bg: org.name === currentId ? '$color4' : 'transparent', hoverStyle: { bg: '$color5' }, children: [(0, jsx_runtime_1.jsx)(OrgMark_1.OrgMark, { org: org }), (0, jsx_runtime_1.jsx)(gui_1.Text, { flex: 1, fontSize: "$2", color: "$color12", numberOfLines: 1, children: org.displayName || org.name }), org.name === currentId ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 15 }) : null] }, org.name)))), loadingMore ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", px: "$2", py: "$2", children: [(0, jsx_runtime_1.jsx)(gui_1.Spinner, { size: "small", color: "$color11" }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$1", color: "$color10", children: "Loading more\u2026" })] })) : hasMore ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { onPress: loadMore, cursor: "pointer", items: "center", justify: "center", px: "$2", py: "$1.5", rounded: "$3", hoverStyle: { bg: '$color4' }, children: (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$1", color: "$color11", fontWeight: "600", children: "Load more" }) })) : null] }), create ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { onPress: () => {
+                                setCreating(true);
+                                setErr(null);
+                            }, cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$2", mt: "$1", rounded: "$3", borderTopWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$color5' }, children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { width: 22, height: 22, rounded: "$3", bg: "$color3", items: "center", justify: "center", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Plus, { size: 14 }) }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$color12", children: "Create organization" })] })) : null, picker ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { onPress: () => {
+                                setOpen(false);
+                                scope.leaveOrg();
+                            }, cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$2", rounded: "$3", hoverStyle: { bg: '$color5' }, children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { width: 22, height: 22, rounded: "$3", bg: "$color3", items: "center", justify: "center", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.LayoutGrid, { size: 14 }) }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$color12", children: "All organizations" })] })) : null] })) })] }));
+}

package/dist/product/OrgSwitcher.d.ts

@@ -1,4 +1,4 @@
-import { type Org, type OrgScope } from './scope';
+import { type Org, type OrgScope } from './scope.js';
 export type OrgSwitcherProps = {
     /** The active-org contract (see `orgScope`). */
     scope: OrgScope;
@@ -23,3 +23,4 @@ export type OrgSwitcherProps = {
     picker?: boolean;
 };
 export declare function OrgSwitcher({ scope, orgs, pageSize, current: given, create, picker }: OrgSwitcherProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=OrgSwitcher.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OrgSwitcher.d.ts","sourceRoot":"","sources":["../../src/product/OrgSwitcher.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAAc,KAAK,GAAG,EAAE,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAA;AAI7D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,gDAAgD;IAChD,KAAK,EAAE,QAAQ,CAAA;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,EAAE,CAAC,CAAA;IACtD,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,GAAG,CAAA;IACb,2EAA2E;IAC3E,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAA;IAC1C,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAa,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAc,EAAE,EAAE,gBAAgB,2CA2RnH"}

package/dist/product/OrgSwitcher.js

@@ -0,0 +1,138 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * OrgSwitcher — the Vercel-style org/team switcher, hoisted from the console
+ * (hanzoai/ui#36) onto @hanzo/gui primitives. Shows the org the surface is
+ * scoped to, switches between the orgs the caller can see, and creates one.
+ *
+ * Host-agnostic: the LIST is a lazy, paged loader the host injects (IAM
+ * `get-organizations` behind its own proxy) — one page at a time, the search
+ * term pushed to the server, more on demand (scroll + "Load more"), so it
+ * scales to thousands of orgs. No loader → the current org alone, synthesized
+ * from the scope (never fabricated). Selecting re-scopes IN PLACE via
+ * `scope.switchOrg` (persist + reload → every module refetches under the new
+ * `X-Org-Id`). Create posts through the injected hook, then scopes into the
+ * new org.
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Button, Input, Popover, Spinner, Text, XStack, YStack } from '@hanzo/gui';
+import { Check, ChevronsUpDown, LayoutGrid, Plus, Search } from '@hanzogui/lucide-icons-2';
+import { useEmit } from './instrument.js';
+import { OrgMark } from './OrgMark.js';
+import { filterOrgs } from './scope.js';
+const titleCase = (s) => (s ? s[0].toUpperCase() + s.slice(1) : s);
+export function OrgSwitcher({ scope, orgs, pageSize = 20, current: given, create, picker = false }) {
+    const currentId = scope.currentOrg();
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const [debounced, setDebounced] = useState('');
+    const [rows, setRows] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [loadingMore, setLoadingMore] = useState(false);
+    const [hasMore, setHasMore] = useState(false);
+    const [creating, setCreating] = useState(false);
+    const [newName, setNewName] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [err, setErr] = useState(null);
+    const pageRef = useRef(0);
+    const reqRef = useRef(0); // race token — a newer request supersedes older ones
+    // Debounce the search so type-as-you-search re-hits the server at most ~4×/s.
+    useEffect(() => {
+        const id = setTimeout(() => setDebounced(query.trim()), 250);
+        return () => clearTimeout(id);
+    }, [query]);
+    const fetchPage = useCallback(async (page, q, append) => {
+        if (!orgs)
+            return;
+        const token = ++reqRef.current;
+        append ? setLoadingMore(true) : setLoading(true);
+        try {
+            const incoming = await orgs(page, q);
+            if (token !== reqRef.current)
+                return;
+            pageRef.current = page;
+            setRows((prev) => {
+                const merged = append ? [...prev] : [];
+                const seen = new Set(merged.map((o) => o.name));
+                for (const o of incoming)
+                    if (!seen.has(o.name))
+                        merged.push(o);
+                return merged;
+            });
+            setHasMore(incoming.length >= pageSize);
+        }
+        catch {
+            // Honest empty / keep what's shown — never a fabricated list.
+            if (token !== reqRef.current)
+                return;
+            if (!append)
+                setRows([]);
+            setHasMore(false);
+        }
+        finally {
+            if (token === reqRef.current) {
+                setLoading(false);
+                setLoadingMore(false);
+            }
+        }
+    }, [orgs, pageSize]);
+    // (Re)load page 0 when the popover opens or the debounced query changes.
+    useEffect(() => {
+        if (!open || !orgs)
+            return;
+        void fetchPage(0, debounced, false);
+    }, [open, debounced, fetchPage, orgs]);
+    const loadMore = useCallback(() => {
+        if (loading || loadingMore || !hasMore)
+            return;
+        void fetchPage(pageRef.current + 1, debounced, true);
+    }, [loading, loadingMore, hasMore, debounced, fetchPage]);
+    // Rows to render — the loaded list (client-filtered too), else the current
+    // org synthesized from the scope.
+    const visible = useMemo(() => {
+        if (orgs)
+            return filterOrgs(rows, query);
+        return [{ name: currentId, displayName: titleCase(currentId) }];
+    }, [orgs, rows, query, currentId]);
+    // The host's resolved org wins (it alone can carry the logo), then the loaded
+    // row, then a name synthesized from the scope id — never nothing.
+    const current = useMemo(() => {
+        if (given && given.name === currentId)
+            return given;
+        return rows.find((o) => o.name === currentId) ?? { name: currentId, displayName: titleCase(currentId) };
+    }, [given, rows, currentId]);
+    const currentLabel = current.displayName || titleCase(current.name);
+    const track = useEmit();
+    const select = useCallback((org) => {
+        track({ component: 'OrgSwitcher', action: 'select', id: org });
+        setOpen(false);
+        scope.switchOrg(org);
+    }, [scope, track]);
+    const submitCreate = async () => {
+        const name = newName.trim();
+        if (!name || !create)
+            return;
+        setBusy(true);
+        setErr(null);
+        try {
+            const org = await create(name);
+            scope.switchOrg(org);
+        }
+        catch (e) {
+            setErr(e instanceof Error ? e.message : 'Could not create the organization.');
+            setBusy(false);
+        }
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, placement: "bottom-start", children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx(Button, { chromeless: true, height: 44, px: "$2", justify: "flex-start", "aria-label": `${currentLabel} · switch organization`, children: _jsxs(XStack, { items: "center", gap: "$2.5", flex: 1, minW: 0, children: [_jsx(OrgMark, { org: current, size: 30 }), _jsx(Text, { flex: 1, minW: 0, fontSize: "$4", fontWeight: "800", color: "$color12", numberOfLines: 1, children: currentLabel }), _jsx(ChevronsUpDown, { size: 15, color: "$color9" })] }) }) }), _jsx(Popover.Content, { bordered: true, elevate: true, p: "$2", width: 300, bg: "$color2", borderColor: "$borderColor", children: creating ? (_jsxs(YStack, { gap: "$2", children: [_jsx(Text, { fontSize: "$2", color: "$color12", fontWeight: "700", children: "Create organization" }), _jsx(Input, { size: "$3", placeholder: "Organization name", value: newName, onChangeText: setNewName, autoCapitalize: "words", onSubmitEditing: () => void submitCreate() }), err ? (_jsx(Text, { fontSize: "$1", color: "$red10", children: err })) : null, _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "$2", chromeless: true, onPress: () => setCreating(false), disabled: busy, children: "Cancel" }), _jsx(Button, { size: "$2", onPress: () => void submitCreate(), disabled: busy || !newName.trim(), icon: busy ? _jsx(Spinner, { size: "small" }) : _jsx(Plus, { size: 14 }), children: "Create" })] })] })) : (_jsxs(YStack, { gap: "$1", children: [orgs ? (_jsxs(XStack, { items: "center", gap: "$2", px: "$2", py: "$1", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(Search, { size: 13, opacity: 0.6 }), _jsx(Input, { flex: 1, size: "$2", borderWidth: 0, bg: "transparent", placeholder: "Find organization\u2026", value: query, onChangeText: setQuery, autoCapitalize: "none", autoCorrect: false })] })) : null, _jsxs("div", { style: { maxHeight: 300, overflowY: 'auto', display: 'flex', flexDirection: 'column' }, onScroll: (e) => {
+                                const el = e.currentTarget;
+                                if (el.scrollHeight - el.scrollTop - el.clientHeight < 48)
+                                    loadMore();
+                            }, children: [loading ? (_jsxs(XStack, { items: "center", gap: "$2", px: "$2", py: "$3", children: [_jsx(Spinner, { size: "small", color: "$color11" }), _jsx(Text, { fontSize: "$2", color: "$color10", children: "Loading organizations\u2026" })] })) : visible.length === 0 ? (_jsx(Text, { px: "$2", py: "$2", fontSize: "$2", color: "$color10", children: query.trim() ? `No organizations match “${query.trim()}”.` : 'No organizations yet.' })) : (visible.map((org) => (_jsxs(XStack, { onPress: () => select(org.name), cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$2", rounded: "$3", bg: org.name === currentId ? '$color4' : 'transparent', hoverStyle: { bg: '$color5' }, children: [_jsx(OrgMark, { org: org }), _jsx(Text, { flex: 1, fontSize: "$2", color: "$color12", numberOfLines: 1, children: org.displayName || org.name }), org.name === currentId ? _jsx(Check, { size: 15 }) : null] }, org.name)))), loadingMore ? (_jsxs(XStack, { items: "center", gap: "$2", px: "$2", py: "$2", children: [_jsx(Spinner, { size: "small", color: "$color11" }), _jsx(Text, { fontSize: "$1", color: "$color10", children: "Loading more\u2026" })] })) : hasMore ? (_jsx(XStack, { onPress: loadMore, cursor: "pointer", items: "center", justify: "center", px: "$2", py: "$1.5", rounded: "$3", hoverStyle: { bg: '$color4' }, children: _jsx(Text, { fontSize: "$1", color: "$color11", fontWeight: "600", children: "Load more" }) })) : null] }), create ? (_jsxs(XStack, { onPress: () => {
+                                setCreating(true);
+                                setErr(null);
+                            }, cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$2", mt: "$1", rounded: "$3", borderTopWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$color5' }, children: [_jsx(YStack, { width: 22, height: 22, rounded: "$3", bg: "$color3", items: "center", justify: "center", children: _jsx(Plus, { size: 14 }) }), _jsx(Text, { fontSize: "$2", color: "$color12", children: "Create organization" })] })) : null, picker ? (_jsxs(XStack, { onPress: () => {
+                                setOpen(false);
+                                scope.leaveOrg();
+                            }, cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$2", rounded: "$3", hoverStyle: { bg: '$color5' }, children: [_jsx(YStack, { width: 22, height: 22, rounded: "$3", bg: "$color3", items: "center", justify: "center", children: _jsx(LayoutGrid, { size: 14 }) }), _jsx(Text, { fontSize: "$2", color: "$color12", children: "All organizations" })] })) : null] })) })] }));
+}
+//# sourceMappingURL=OrgSwitcher.js.map

package/dist/product/OrgSwitcher.js.map

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

package/dist/product/PageHeader.cjs

@@ -0,0 +1,15 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageHeader = PageHeader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const gui_1 = require("@hanzo/gui");
+/** Section title + optional subtitle and right-aligned actions. */
+function PageHeader({ title, subtitle, actions, }) {
+    return (
+    // flexWrap lets the actions drop below the title on narrow screens; flex={1}
+    // minW={0} lets the title column shrink so a long subtitle WRAPS instead of
+    // running off the viewport (a flex child defaults to min-width:auto = content
+    // width, which would overflow on mobile).
+    (0, jsx_runtime_1.jsxs)(gui_1.XStack, { justify: "space-between", items: "flex-start", gap: "$3", flexWrap: "wrap", children: [(0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$1", flex: 1, minW: 200, children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$7", fontWeight: "500", letterSpacing: -0.4, children: title }), subtitle ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$3", color: "$color11", children: subtitle })) : null] }), actions ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { gap: "$2", items: "center", flexWrap: "wrap", width: "100%", "$md": { width: 'auto', justify: 'flex-end' }, children: actions })) : null] }));
+}

package/dist/product/PageHeader.d.ts

@@ -5,3 +5,4 @@ export declare function PageHeader({ title, subtitle, actions, }: {
     subtitle?: string;
     actions?: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PageHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../src/product/PageHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,mEAAmE;AACnE,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,OAAO,GACR,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB,2CA4BA"}

package/dist/product/PageHeader.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, XStack, YStack } from '@hanzo/gui';
+/** Section title + optional subtitle and right-aligned actions. */
+export function PageHeader({ title, subtitle, actions, }) {
+    return (
+    // flexWrap lets the actions drop below the title on narrow screens; flex={1}
+    // minW={0} lets the title column shrink so a long subtitle WRAPS instead of
+    // running off the viewport (a flex child defaults to min-width:auto = content
+    // width, which would overflow on mobile).
+    _jsxs(XStack, { justify: "space-between", items: "flex-start", gap: "$3", flexWrap: "wrap", children: [_jsxs(YStack, { gap: "$1", flex: 1, minW: 200, children: [_jsx(Text, { fontSize: "$7", fontWeight: "500", letterSpacing: -0.4, children: title }), subtitle ? (_jsx(Text, { fontSize: "$3", color: "$color11", children: subtitle })) : null] }), actions ? (_jsx(XStack, { gap: "$2", items: "center", flexWrap: "wrap", width: "100%", "$md": { width: 'auto', justify: 'flex-end' }, children: actions })) : null] }));
+}
+//# sourceMappingURL=PageHeader.js.map

package/dist/product/PageHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.js","sourceRoot":"","sources":["../../src/product/PageHeader.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAGZ,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAEjD,mEAAmE;AACnE,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,OAAO,GAKR;IACC,OAAO;IACL,6EAA6E;IAC7E,4EAA4E;IAC5E,8EAA8E;IAC9E,0CAA0C;IAC1C,MAAC,MAAM,IAAC,OAAO,EAAC,eAAe,EAAC,KAAK,EAAC,YAAY,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,MAAM,aACzE,MAAC,MAAM,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,aACjC,KAAC,IAAI,IAAC,QAAQ,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,aAAa,EAAE,CAAC,GAAG,YACrD,KAAK,GACD,EACN,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,IAAI,IAAC,QAAQ,EAAC,IAAI,EAAC,KAAK,EAAC,UAAU,YACjC,QAAQ,GACJ,CACR,CAAC,CAAC,CAAC,IAAI,IACD,EAKR,OAAO,CAAC,CAAC,CAAC,CACT,KAAC,MAAM,IAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,SAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,YACrG,OAAO,GACD,CACV,CAAC,CAAC,CAAC,IAAI,IACD,CACV,CAAA;AACH,CAAC"}

package/dist/product/PrimaryButton.cjs

@@ -0,0 +1,31 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PrimaryButton = PrimaryButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const gui_1 = require("@hanzo/gui");
+const accent_1 = require("./accent.cjs");
+const instrument_1 = require("./instrument.cjs");
+function PrimaryButton({ onPress, ...rest }) {
+    const { accent, contrast } = (0, accent_1.useAccent)();
+    const track = (0, instrument_1.useEmit)();
+    // DESTRUCTURE the caller's handler out first. Wrapping it while still reading it
+    // off a rebound `props` makes the wrapper call ITSELF — an unbounded recursion
+    // that a real browser click turns into "Maximum call stack size exceeded".
+    const press = (e) => {
+        // The label IS the identity of a primary action — no app has to name it.
+        track({
+            component: 'PrimaryButton',
+            action: 'click',
+            id: (0, instrument_1.labelOf)(rest.children) ?? rest['aria-label'],
+        });
+        onPress?.(e);
+    };
+    const handler = press;
+    // Accent set → a filled accent button (bg + readable text, via inline style Tamagui
+    // forwards to the DOM). No accent → the default monochrome white (theme="light").
+    if (accent) {
+        return (0, jsx_runtime_1.jsx)(gui_1.Button, { style: { backgroundColor: accent, color: contrast, borderColor: accent }, onPress: handler, ...rest });
+    }
+    return (0, jsx_runtime_1.jsx)(gui_1.Button, { theme: "light", onPress: handler, ...rest });
+}

package/dist/product/PrimaryButton.d.ts

@@ -15,3 +15,4 @@
 import type { ComponentProps } from 'react';
 import { Button } from '@hanzo/gui';
 export declare function PrimaryButton({ onPress, ...rest }: ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PrimaryButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../src/product/PrimaryButton.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAKnC,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,2CAsBhF"}

package/dist/product/PrimaryButton.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@hanzo/gui';
+import { useAccent } from './accent.js';
+import { labelOf, useEmit } from './instrument.js';
+export function PrimaryButton({ onPress, ...rest }) {
+    const { accent, contrast } = useAccent();
+    const track = useEmit();
+    // DESTRUCTURE the caller's handler out first. Wrapping it while still reading it
+    // off a rebound `props` makes the wrapper call ITSELF — an unbounded recursion
+    // that a real browser click turns into "Maximum call stack size exceeded".
+    const press = (e) => {
+        // The label IS the identity of a primary action — no app has to name it.
+        track({
+            component: 'PrimaryButton',
+            action: 'click',
+            id: labelOf(rest.children) ?? rest['aria-label'],
+        });
+        onPress?.(e);
+    };
+    const handler = press;
+    // Accent set → a filled accent button (bg + readable text, via inline style Tamagui
+    // forwards to the DOM). No accent → the default monochrome white (theme="light").
+    if (accent) {
+        return _jsx(Button, { style: { backgroundColor: accent, color: contrast, borderColor: accent }, onPress: handler, ...rest });
+    }
+    return _jsx(Button, { theme: "light", onPress: handler, ...rest });
+}
+//# sourceMappingURL=PrimaryButton.js.map

package/dist/product/PrimaryButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrimaryButton.js","sourceRoot":"","sources":["../../src/product/PrimaryButton.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAiBZ,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAEnC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AACpC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAE/C,MAAM,UAAU,aAAa,CAAC,EAAE,OAAO,EAAE,GAAG,IAAI,EAAiC;IAC/E,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,CAAA;IACxC,MAAM,KAAK,GAAG,OAAO,EAAE,CAAA;IACvB,iFAAiF;IACjF,+EAA+E;IAC/E,2EAA2E;IAC3E,MAAM,KAAK,GAAG,CAAC,CAAU,EAAE,EAAE;QAC3B,yEAAyE;QACzE,KAAK,CAAC;YACJ,SAAS,EAAE,eAAe;YAC1B,MAAM,EAAE,OAAO;YACf,EAAE,EAAE,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC;SACjD,CAAC,CACD;QAAC,OAA8C,EAAE,CAAC,CAAC,CAAC,CAAA;IACvD,CAAC,CAAA;IACD,MAAM,OAAO,GAAG,KAAiD,CAAA;IACjE,oFAAoF;IACpF,kFAAkF;IAClF,IAAI,MAAM,EAAE,CAAC;QACX,OAAO,KAAC,MAAM,IAAC,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,OAAO,KAAM,IAAI,GAAI,CAAA;IACzH,CAAC;IACD,OAAO,KAAC,MAAM,IAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,OAAO,KAAM,IAAI,GAAI,CAAA;AAC7D,CAAC"}

package/dist/product/ProductIcon.cjs

@@ -0,0 +1,36 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductIcon = ProductIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * ProductIcon — the Linear-style product tile: a rounded-square block filled with
+ * the product's accent color, with the product glyph knocked out in near-white so
+ * it reads "cut out" of the color. This is the ONE way a product icon renders in
+ * the console chrome (sidebar nav, command palette, product overview header) — a
+ * bare tinted glyph is replaced everywhere by this tile.
+ *
+ * Prop-driven and pure: the accent hex is resolved by the caller (registry-curated
+ * → per-user override → stable hash, via `useProductColors().colorOf`) and passed
+ * in as `color`, so this component owns only the look, never the palette. With no
+ * color it falls back to a tasteful neutral chip ($color12 fill + $color1 glyph) —
+ * never a random hue — matching the first-party `ProviderLogo` mark, so first-party
+ * marks and product tiles read as one family.
+ *
+ * The knock-out is the same technique the color-swatch button uses (a raw-hex
+ * `backgroundColor` fill + a `#ffffff` glyph) so an arbitrary product accent tints
+ * cleanly outside Gui's token palette, in the ONE sanctioned place.
+ */
+const gui_1 = require("@hanzo/gui");
+const color_1 = require("./color.cjs");
+function ProductIcon({ icon: Icon, color, size = 24, }) {
+    const radius = Math.round(size * 0.28);
+    const glyph = Math.round(size * 0.58);
+    const tinted = typeof color === 'string' && color.trim() !== '';
+    // Accent tile — product color fill + near-white glyph (the Linear "cut out").
+    if (tinted) {
+        return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { width: size, height: size, items: "center", justify: "center", rounded: radius, style: { backgroundColor: color }, children: (0, jsx_runtime_1.jsx)(Icon, { size: glyph, color: (0, color_1.asColor)('#ffffff') }) }));
+    }
+    // No accent — a tasteful neutral chip (consistent with ProviderLogo's mark).
+    return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { width: size, height: size, items: "center", justify: "center", rounded: radius, bg: "$color12", children: (0, jsx_runtime_1.jsx)(Icon, { size: glyph, color: "$color1" }) }));
+}

package/dist/product/ProductIcon.d.ts

@@ -1,7 +1,8 @@
-import { type IconLike } from './color';
+import { type IconLike } from './color.js';
 export declare function ProductIcon({ icon: Icon, color, size, }: {
     icon: IconLike;
     /** The product's resolved accent hex (e.g. `#5E6AD2`). Omit for the neutral chip. */
     color?: string;
     size?: number;
 }): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProductIcon.d.ts.map