pixelize-design-library 2.4.2-beta.5 → 2.4.2-beta.50

package/dist/Components/AppSwitcher/AppSwitcher.js

@@ -0,0 +1,273 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const chartColorsFromTheme_1 = require("../../Theme/tokens/builders/chartColorsFromTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
+const AppMark_1 = __importStar(require("./AppMark"));
+const AppSwitcherProps_1 = require("./AppSwitcherProps");
+const useAppSwitcherShortcut_1 = require("./useAppSwitcherShortcut");
+const COLUMNS = 2;
+const HEADING = "Your apps";
+const s = { trigger: "36px", mark: "32px", icon: 17, name: "0.875rem", sub: "0.75rem", row: "52px" };
+const warned = new Set();
+const warnOnce = (key, message) => {
+    if (process.env.NODE_ENV === "production" || warned.has(key))
+        return;
+    warned.add(key);
+    console.error(`[AppSwitcher] ${message}`);
+};
+const validate = (apps) => {
+    const seen = new Set();
+    apps.forEach((app, i) => {
+        var _a;
+        if (!app.id)
+            warnOnce(`id-${i}`, `apps[${i}] ("${(_a = app.name) !== null && _a !== void 0 ? _a : "unnamed"}") has no id.`);
+        else if (seen.has(app.id))
+            warnOnce(`dup-${app.id}`, `duplicate app id "${app.id}".`);
+        else
+            seen.add(app.id);
+        if (!app.url && !app.locked)
+            warnOnce(`url-${app.id || i}`, `app "${app.name}" has no url; it cannot be opened.`);
+    });
+};
+// Flip back to true to restore `searchThreshold` opening the field on its own.
+const SEARCH_OPENS_BY_COUNT = false;
+const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable, searchThreshold = 8, shortcut = null, showShortcutHint = true, hideWhenAlone = true, emptyMessage = "No app matches that name.", footer, ariaLabel = "Switch app", panelWidth, maxHeight = "24rem", isLoading = false, }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
+    const requestExclusiveOpen = (0, useExclusiveOverlay_1.useExclusiveOverlay)(isOpen, onClose);
+    const [query, setQuery] = (0, react_1.useState)("");
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
+    const searchRef = (0, react_1.useRef)(null);
+    const triggerRef = (0, react_1.useRef)(null);
+    const itemRefs = (0, react_1.useRef)([]);
+    const typeahead = (0, react_1.useRef)({ buffer: "", at: 0 });
+    (0, react_1.useEffect)(() => validate(apps), [apps]);
+    // Search is off while the panel's design settles: the app count alone no longer opens it. An
+    // explicit `isSearchable` still wins, so nothing about the prop changed.
+    const showSearch = isSearchable !== null && isSearchable !== void 0 ? isSearchable : (SEARCH_OPENS_BY_COUNT && apps.length >= searchThreshold);
+    const hues = (0, react_1.useMemo)(() => (0, AppMark_1.assignAppHues)(apps, (0, chartColorsFromTheme_1.chartMode)(theme.colors)), [apps, theme.colors]);
+    const visible = (0, react_1.useMemo)(() => (0, AppSwitcherProps_1.filterApps)(apps, query), [apps, query]);
+    const setOpen = (0, react_1.useCallback)((next) => {
+        if (next) {
+            requestExclusiveOpen();
+            onOpen();
+        }
+        else {
+            onClose();
+        }
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+    }, [onOpen, onClose, onOpenChange, requestExclusiveOpen]);
+    const closeAndRefocus = (0, react_1.useCallback)(() => {
+        var _a;
+        setOpen(false);
+        setQuery("");
+        (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [setOpen]);
+    (0, useAppSwitcherShortcut_1.useAppSwitcherShortcut)(shortcut, () => setOpen(true), !isOpen);
+    (0, react_1.useEffect)(() => {
+        if (!isOpen)
+            setQuery("");
+        setActiveIndex(0);
+    }, [isOpen]);
+    (0, react_1.useEffect)(() => setActiveIndex(0), [query]);
+    const focusItem = (0, react_1.useCallback)((next) => {
+        var _a;
+        setActiveIndex(next);
+        (_a = itemRefs.current[next]) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    // Read the focused row, not state: two keydowns in one React batch would both compute from a
+    // stale activeIndex, so holding an arrow key silently dropped moves.
+    const currentIndex = (0, react_1.useCallback)(() => {
+        const focused = itemRefs.current.findIndex((el) => el === document.activeElement);
+        return focused === -1 ? activeIndex : focused;
+    }, [activeIndex]);
+    const step = (0, react_1.useCallback)((delta) => {
+        const count = visible.length;
+        if (count === 0)
+            return;
+        focusItem(((currentIndex() + delta) % count + count) % count);
+    }, [currentIndex, visible.length, focusItem]);
+    const jumpToLetter = (0, react_1.useCallback)((char) => {
+        const now = Date.now();
+        const buffer = now - typeahead.current.at < 600 ? typeahead.current.buffer + char : char;
+        typeahead.current = { buffer, at: now };
+        const at = currentIndex();
+        const from = buffer.length > 1 ? at : at + 1;
+        const order = visible.map((_, i) => (from + i) % visible.length);
+        const hit = order.find((i) => visible[i].name.toLowerCase().startsWith(buffer));
+        if (hit !== undefined)
+            focusItem(hit);
+    }, [visible, currentIndex, focusItem]);
+    // Chakra parks focus on the panel itself, where no arrow handler lives; route the first press in.
+    const handlePanelKeyDown = (0, react_1.useCallback)((e) => {
+        if (itemRefs.current.includes(document.activeElement))
+            return;
+        if (visible.length === 0)
+            return;
+        if (["ArrowDown", "ArrowRight", "Home"].includes(e.key)) {
+            e.preventDefault();
+            focusItem(0);
+        }
+        else if (["ArrowUp", "ArrowLeft", "End"].includes(e.key)) {
+            e.preventDefault();
+            focusItem(visible.length - 1);
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            closeAndRefocus();
+        }
+    }, [visible.length, focusItem, closeAndRefocus]);
+    const handleItemKeyDown = (0, react_1.useCallback)((e, app) => {
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            step(COLUMNS);
+        }
+        else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            step(-COLUMNS);
+        }
+        else if (e.key === "ArrowRight") {
+            e.preventDefault();
+            step(1);
+        }
+        else if (e.key === "ArrowLeft") {
+            e.preventDefault();
+            step(-1);
+        }
+        else if (e.key === "Home") {
+            e.preventDefault();
+            focusItem(0);
+        }
+        else if (e.key === "End") {
+            e.preventDefault();
+            focusItem(visible.length - 1);
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            closeAndRefocus();
+        }
+        else if (e.key === " " && !app.locked) {
+            e.preventDefault();
+            e.currentTarget.click();
+        }
+        else if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey)
+            jumpToLetter(e.key.toLowerCase());
+    }, [step, focusItem, visible.length, closeAndRefocus, jumpToLetter]);
+    const handleSelect = (app, e) => {
+        if (app.locked) {
+            e.preventDefault();
+            return;
+        }
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(app, e);
+        if (!e.defaultPrevented)
+            setOpen(false);
+    };
+    const nothingToSwitchTo = apps.length === 0 || (hideWhenAlone && apps.every((a) => a.id === currentAppId));
+    if (nothingToSwitchTo)
+        return null;
+    const rowHoverBg = (0, rowStates_1.listRowBackgrounds)(theme.colors).active;
+    const footerRule = (0, outlineRung_1.ruleInk)(theme.colors.boxborder[200], [theme.colors.backgroundColor.subtle], outlineRung_1.CHROME_RULE);
+    // NOTE: neutral, not backgroundColor.tertiary — that rung is brand-tinted and lifting it painted a saturated block.
+    const currentBg = (0, outlineRung_1.neutralStep)(theme.colors.backgroundColor.light, outlineRung_1.MIN_PERCEPTIBLE_STEP);
+    const currentBar = (0, outlineRung_1.liftToContrast)(theme.colors.accentText, currentBg, outlineRung_1.AA_NON_TEXT);
+    // NOTE: a derived surface is outside what withSurfaceRungs settled, so its ink is resolved here.
+    const currentName = (0, outlineRung_1.liftToContrast)(theme.colors.text[900], currentBg, accentText_1.AA_NORMAL_TEXT);
+    const currentSub = (0, outlineRung_1.liftToContrast)(theme.colors.textMuted, currentBg, accentText_1.AA_NORMAL_TEXT);
+    const width = panelWidth !== null && panelWidth !== void 0 ? panelWidth : "28rem";
+    const hint = shortcut && showShortcutHint ? (0, AppSwitcherProps_1.formatShortcut)(shortcut) : null;
+    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onOpen: () => setOpen(true), onClose: () => { setOpen(false); setQuery(""); }, placement: "bottom-end", initialFocusRef: showSearch ? searchRef : undefined, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Flex, { ref: triggerRef, as: "button", type: "button", "aria-label": ariaLabel, align: "center", justify: "center", boxSize: s.trigger, borderRadius: "lg", border: "1px solid", borderColor: isOpen ? theme.colors.boxborder[500] : theme.colors.boxborder[200], bg: isOpen ? theme.colors.backgroundColor.tertiary : "transparent", color: isOpen ? theme.colors.text[900] : theme.colors.textMuted, cursor: "pointer", transition: "background 0.15s ease, border-color 0.15s ease", _hover: { bg: rowHoverBg, color: theme.colors.text[900] }, onKeyDown: (e) => {
+                        if (!isOpen) {
+                            if (e.key === "ArrowDown") {
+                                e.preventDefault();
+                                setOpen(true);
+                            }
+                            return;
+                        }
+                        handlePanelKeyDown(e);
+                    }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Grip, { size: s.icon + 1 }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: width, maxW: "calc(100vw - 1.5rem)", textAlign: "start", onKeyDown: handlePanelKeyDown, bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, px: 3, pt: 3, pb: showSearch ? 2 : 1, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.6875rem", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: theme.colors.textMuted, children: HEADING }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1" }), hint && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "kbd", fontSize: "0.6875rem", fontFamily: "inherit", color: theme.colors.textMuted, border: "1px solid", borderRadius: "full", px: 1.5, py: 0.5, children: hint }))] }), showSearch && ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 3, pb: 2, children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, color: theme.colors.textMuted }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: searchRef, value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search apps", borderRadius: "lg", "aria-label": "Search apps", onKeyDown: (e) => {
+                                            if (e.key === "ArrowDown" && visible.length > 0) {
+                                                e.preventDefault();
+                                                focusItem(0);
+                                            }
+                                            else if (e.key === "Escape") {
+                                                e.preventDefault();
+                                                if (query)
+                                                    setQuery("");
+                                                else
+                                                    closeAndRefocus();
+                                            }
+                                        } })] }) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { role: "menu", "aria-label": HEADING, maxH: maxHeight, overflowY: "auto", px: 2, pb: 2, display: "grid", gridTemplateColumns: `repeat(${COLUMNS}, minmax(0, 1fr))`, gap: "2px", children: [isLoading
+                                    ? [0, 1, 2, 3].map((i) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, px: 2, py: 2, minH: s.row, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { boxSize: s.mark, borderRadius: "lg" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: "0.75rem", flex: "1", borderRadius: "lg" })] }, i)))
+                                    : visible.map((app, idx) => {
+                                        var _a;
+                                        const isCurrent = app.id === currentAppId;
+                                        const interactive = !isCurrent && !app.locked;
+                                        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: interactive ? "a" : "div", role: "menuitem", ref: (el) => { itemRefs.current[idx] = el; }, tabIndex: idx === activeIndex ? 0 : -1, "aria-current": isCurrent ? "true" : undefined, "aria-disabled": app.locked ? true : undefined, title: app.locked ? ((_a = app.lockedReason) !== null && _a !== void 0 ? _a : `${app.name} is not available on your plan`) : undefined, ...(interactive
+                                                ? {
+                                                    href: app.url,
+                                                    target: "_blank",
+                                                    rel: "noopener noreferrer",
+                                                }
+                                                : {}), align: "center", gap: 3, minH: s.row, px: 2, py: 2, borderRadius: "lg", textDecoration: "none", cursor: interactive ? "pointer" : "default", bg: isCurrent ? currentBg : "transparent", position: "relative", 
+                                            // Full height, taking the row's own `lg` radius on its outer corners so the
+                                            // rail follows the row's curve instead of cutting across it.
+                                            _before: isCurrent
+                                                ? {
+                                                    content: '""',
+                                                    position: "absolute",
+                                                    insetInlineStart: 0,
+                                                    insetBlock: 0,
+                                                    width: "3px",
+                                                    borderStartStartRadius: "lg",
+                                                    borderEndStartRadius: "lg",
+                                                    bg: currentBar,
+                                                }
+                                                : undefined, transition: "background 0.12s ease", _hover: interactive ? { bg: rowHoverBg } : undefined, onClick: (e) => handleSelect(app, e), onKeyDown: (e) => handleItemKeyDown(e, app), children: [(0, jsx_runtime_1.jsx)(AppMark_1.default, { app: app, hue: hues[apps.indexOf(app)], boxSize: s.mark, iconSize: s.icon, muted: app.locked }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1.5, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.name, fontWeight: 600, color: app.locked
+                                                                        ? theme.colors.textMuted
+                                                                        : isCurrent
+                                                                            ? currentName
+                                                                            : theme.colors.text[900], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: app.name }), app.badge !== undefined && !isCurrent && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.625rem", fontWeight: 600, color: theme.colors.semanticText.info, flexShrink: 0, children: app.badge }))] }), app.description && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.sub, color: isCurrent ? currentSub : theme.colors.textMuted, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: app.description }))] }), app.locked && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Lock, size: 14, color: theme.colors.textMuted, flexShrink: 0 }))] }, app.id || app.name));
+                                    }), !isLoading && visible.length === 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { gridColumn: `span ${COLUMNS}`, px: 2, py: 6, textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.name, color: theme.colors.textMuted, children: emptyMessage }) }))] }), footer && ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", gap: 1.5, px: 3, py: 2.5, borderTop: "1px solid", borderTopColor: footerRule, bg: theme.colors.backgroundColor.subtle, children: footer }))] }) })] }));
+};
+exports.default = AppSwitcher;

package/dist/Components/AppSwitcher/AppSwitcherProps.d.ts

@@ -0,0 +1,70 @@
+import type { ComponentType, ReactNode } from "react";
+/** Icon component signature AppMark renders with size+color — matches lucide-react's icon shape exactly. */
+export type AppIconComponent = ComponentType<{
+    size?: number | string;
+    color?: string;
+}>;
+/** A lucide-style component, a ready node, or nothing — then the mark falls back to initials. */
+export type AppIcon = AppIconComponent | ReactNode;
+/** One app in the switcher's grid; missing/duplicate `id` or a missing `url` (without `locked`) warn once in dev only. */
+export interface AppOption {
+    id: string;
+    name: string;
+    url: string;
+    description?: string;
+    icon?: AppIcon;
+    iconUrl?: string;
+    color?: string;
+    badge?: string | number;
+    /** Listed but not openable — renders locked with `lockedReason` as its title. */
+    locked?: boolean;
+    lockedReason?: string;
+    /** Extra terms the search should match, e.g. "helpdesk" for Tickets. */
+    keywords?: string[];
+}
+/** Fixed top-bar control: two columns, md density, bottom-end anchor, "Your apps", new tab. */
+export interface AppSwitcherProps {
+    apps: AppOption[];
+    /** id of the app this UI is running inside. Its row is marked and never navigates. */
+    currentAppId?: string;
+    /** Called instead of following the link. Call `event.preventDefault()` to keep the panel's own navigation. */
+    onSelect?: (app: AppOption, event: React.MouseEvent | React.KeyboardEvent) => void;
+    onOpenChange?: (isOpen: boolean) => void;
+    /** The only thing that shows the search box — searchThreshold below is currently inert (kept for API compat). */
+    isSearchable?: boolean;
+    searchThreshold?: number;
+    /** Keyboard shortcut that opens the panel, e.g. "mod+shift+a". `null` disables it. */
+    shortcut?: string | null;
+    showShortcutHint?: boolean;
+    /** Renders nothing when there is no other app to switch to. */
+    hideWhenAlone?: boolean;
+    emptyMessage?: string;
+    footer?: ReactNode;
+    ariaLabel?: string;
+    panelWidth?: string;
+    maxHeight?: string;
+    isLoading?: boolean;
+}
+/** Up to two initials, so a mark stays legible without an icon. */
+export declare const appInitials: (name: string) => string;
+export declare const filterApps: (apps: AppOption[], query: string) => AppOption[];
+/** Minimal keyboard-event shape `matchesShortcut` needs, so callers can test a shortcut without a real KeyboardEvent. */
+export type ShortcutEvent = Pick<KeyboardEvent, "key" | "altKey" | "ctrlKey" | "metaKey" | "shiftKey">;
+/** "mod" is Cmd on Apple platforms and Ctrl everywhere else. */
+export declare const matchesShortcut: (event: ShortcutEvent, shortcut: string, isApple?: boolean) => boolean;
+export declare const formatShortcut: (shortcut: string, isApple?: boolean) => string;
+/** Input to `buildSuiteApps`: an `AppOption` keyed by its subdomain label, with `url` optional since it can be derived. */
+export interface SuiteAppSource extends Omit<AppOption, "url"> {
+    subdomain: string;
+    url?: string;
+}
+/** The consumer's own absolute origin, plus which hostname label identifies it — `buildSuiteApps` swaps that label per app. */
+export interface SuiteUrlOptions {
+    baseUrl: string;
+    baseSubdomain: string;
+}
+/**
+ * Derives every app's origin from the host the consumer is already served on, so one deployment
+ * variable keeps dev, test and prod in step. An app may still carry its own `url`, which wins.
+ */
+export declare const buildSuiteApps: (apps: SuiteAppSource[], { baseUrl, baseSubdomain }: SuiteUrlOptions) => AppOption[];

package/dist/Components/AppSwitcher/AppSwitcherProps.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildSuiteApps = exports.formatShortcut = exports.matchesShortcut = exports.filterApps = exports.appInitials = void 0;
+const NON_WORD = /[^\p{L}\p{N}]+/u;
+/** Up to two initials, so a mark stays legible without an icon. */
+const appInitials = (name) => {
+    const words = name.trim().split(NON_WORD).filter(Boolean);
+    if (words.length === 0)
+        return "?";
+    if (words.length === 1)
+        return words[0].slice(0, 2).toUpperCase();
+    return (words[0][0] + words[1][0]).toUpperCase();
+};
+exports.appInitials = appInitials;
+const filterApps = (apps, query) => {
+    const q = query.trim().toLowerCase();
+    if (!q)
+        return apps;
+    return apps.filter((app) => {
+        var _a, _b;
+        return [app.name, (_a = app.description) !== null && _a !== void 0 ? _a : "", ...((_b = app.keywords) !== null && _b !== void 0 ? _b : [])]
+            .join(" ")
+            .toLowerCase()
+            .includes(q);
+    });
+};
+exports.filterApps = filterApps;
+/** "mod" is Cmd on Apple platforms and Ctrl everywhere else. */
+const matchesShortcut = (event, shortcut, isApple = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform)) => {
+    const parts = shortcut.toLowerCase().split("+").map((p) => p.trim()).filter(Boolean);
+    if (parts.length === 0)
+        return false;
+    const key = parts[parts.length - 1];
+    const mods = new Set(parts.slice(0, -1));
+    const wantsMod = mods.has("mod");
+    const wantsCtrl = mods.has("ctrl") || (wantsMod && !isApple);
+    const wantsMeta = mods.has("cmd") || mods.has("meta") || (wantsMod && isApple);
+    if (event.ctrlKey !== wantsCtrl)
+        return false;
+    if (event.metaKey !== wantsMeta)
+        return false;
+    if (event.shiftKey !== mods.has("shift"))
+        return false;
+    if (event.altKey !== mods.has("alt"))
+        return false;
+    return event.key.toLowerCase() === key;
+};
+exports.matchesShortcut = matchesShortcut;
+const APPLE_SYMBOLS = { mod: "⌘", cmd: "⌘", meta: "⌘", ctrl: "⌃", shift: "⇧", alt: "⌥" };
+const OTHER_LABELS = { mod: "Ctrl", cmd: "Win", meta: "Win", ctrl: "Ctrl", shift: "Shift", alt: "Alt" };
+const formatShortcut = (shortcut, isApple = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform)) => {
+    const parts = shortcut.toLowerCase().split("+").map((p) => p.trim()).filter(Boolean);
+    const table = isApple ? APPLE_SYMBOLS : OTHER_LABELS;
+    const rendered = parts.map((p, i) => { var _a; return i === parts.length - 1 ? p.toUpperCase() : ((_a = table[p]) !== null && _a !== void 0 ? _a : p.toUpperCase()); });
+    return isApple ? rendered.join("") : rendered.join("+");
+};
+exports.formatShortcut = formatShortcut;
+/**
+ * Derives every app's origin from the host the consumer is already served on, so one deployment
+ * variable keeps dev, test and prod in step. An app may still carry its own `url`, which wins.
+ */
+const buildSuiteApps = (apps, { baseUrl, baseSubdomain }) => {
+    let base;
+    try {
+        base = new URL(baseUrl.trim());
+    }
+    catch {
+        throw new Error(`[AppSwitcher] buildSuiteApps: baseUrl ${JSON.stringify(baseUrl)} is not an absolute URL.`);
+    }
+    const labels = base.hostname.split(".");
+    const at = labels.indexOf(baseSubdomain);
+    return apps.map(({ subdomain, url, ...app }) => {
+        if (url)
+            return { ...app, url: url.trim() };
+        // Without the label there is nothing to swap, and every app would silently share one origin.
+        if (at === -1) {
+            throw new Error(`[AppSwitcher] buildSuiteApps: ${JSON.stringify(baseSubdomain)} is not a label in ` +
+                `"${base.hostname}", so ${JSON.stringify(app.name)} has no derivable url. ` +
+                `Give that app an explicit url, or pass a baseUrl that contains the label.`);
+        }
+        const next = new URL(base.toString());
+        next.hostname = labels.map((l, i) => (i === at ? subdomain : l)).join(".");
+        return { ...app, url: next.origin };
+    });
+};
+exports.buildSuiteApps = buildSuiteApps;

package/dist/Components/AppSwitcher/useAppSwitcherShortcut.d.ts

@@ -0,0 +1,3 @@
+/** Fires `onTrigger` on the shortcut. Inert when `shortcut` is null, and never in SSR. */
+export declare const useAppSwitcherShortcut: (shortcut: string | null | undefined, onTrigger: () => void, enabled?: boolean) => void;
+export default useAppSwitcherShortcut;

package/dist/Components/AppSwitcher/useAppSwitcherShortcut.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAppSwitcherShortcut = void 0;
+const react_1 = require("react");
+const AppSwitcherProps_1 = require("./AppSwitcherProps");
+const isTypingTarget = (target) => {
+    if (!(target instanceof HTMLElement))
+        return false;
+    if (target.isContentEditable)
+        return true;
+    return ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName);
+};
+/** Fires `onTrigger` on the shortcut. Inert when `shortcut` is null, and never in SSR. */
+const useAppSwitcherShortcut = (shortcut, onTrigger, enabled = true) => {
+    (0, react_1.useEffect)(() => {
+        if (!shortcut || !enabled || typeof window === "undefined")
+            return undefined;
+        const handler = (event) => {
+            if (event.defaultPrevented || isTypingTarget(event.target))
+                return;
+            if (!(0, AppSwitcherProps_1.matchesShortcut)(event, shortcut))
+                return;
+            event.preventDefault();
+            onTrigger();
+        };
+        window.addEventListener("keydown", handler);
+        return () => window.removeEventListener("keydown", handler);
+    }, [shortcut, enabled, onTrigger]);
+};
+exports.useAppSwitcherShortcut = useAppSwitcherShortcut;
+exports.default = exports.useAppSwitcherShortcut;

package/dist/Components/AppearanceSettings/AppearanceSettings.js

@@ -11,13 +11,14 @@ const Theme_1 = require("../../Theme");
 const provider_1 = require("../../Theme/provider");
 const fontSize_1 = require("../../Theme/provider/fontSize");
 const brands_1 = require("../../Theme/tokens/brands");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const SelectV2_1 = __importDefault(require("../SelectV2/SelectV2"));
 const FieldLabel = ({ children }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     return ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: "medium", color: colors.textMuted, mb: 2, children: children }));
 };
-const brandSwatch = (name, colors) => ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "14px", h: "14px", borderRadius: "full", bg: brands_1.lightPalettes[name].primary[500], border: "1px solid", borderColor: colors.boxborder[500] }));
+const brandSwatch = (name, colors) => ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "14px", h: "14px", borderRadius: "full", bg: brands_1.lightPalettes[name].primary[500], border: "1px solid", borderColor: (0, outlineRung_1.ruleInk)(colors.boxborder[200], [colors.backgroundColor.light, colors.backgroundColor.tertiary], outlineRung_1.CHROME_RULE) }));
 const AppearanceSettings = ({ brand, fontSize, onBrandChange, onFontSizeChange, showBrand = true, showColorMode = true, showFontSize = true, size = "sm", labels, }) => {
     var _a, _b, _c;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();

package/dist/Components/AppearanceSettings/AppearanceSettingsProps.d.ts

@@ -1,9 +1,11 @@
 import type { SelectV2Size } from "../SelectV2/SelectV2Props";
+/** i18n overrides for this panel's field labels; any key left out keeps the library's English default. */
 export type AppearanceSettingsLabels = {
     theme?: string;
     colorMode?: string;
     fontSize?: string;
 };
+/** Controlled brand/font-size pickers; the color-mode switch is uncontrolled and reads/writes theme context directly. */
 export type AppearanceSettingsProps = {
     brand?: string;
     fontSize?: string;

package/dist/Components/Avatar/Avatar.d.ts

@@ -0,0 +1,3 @@
+import type { AvatarProps } from "./AvatarProps";
+declare const Avatar: ({ name, src, size, status, ariaLabel, getInitials, "data-testid": testId }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+export default Avatar;

package/dist/Components/Avatar/Avatar.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const avatarColorway_1 = require("./avatarColorway");
+const avatarSizing_1 = require("./avatarSizing");
+const STATUS_TONE = {
+    online: "success", away: "warning", busy: "error", offline: "neutral",
+};
+const STATUS_LABEL = {
+    online: "Online", away: "Away", busy: "Busy", offline: "Offline",
+};
+const Avatar = ({ name, src, size = "md", status, ariaLabel, getInitials, "data-testid": testId }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const [imageFailed, setImageFailed] = (0, react_1.useState)(false);
+    const px = avatarSizing_1.SIZE_PX[size];
+    const showImage = Boolean(src) && !imageFailed;
+    const { bg, color } = (0, avatarColorway_1.resolveAvatarColorway)(name, colors);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", boxSize: `${px}px`, flexShrink: 0, "data-testid": testId, children: [showImage ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: src, alt: name, boxSize: `${px}px`, borderRadius: "full", objectFit: "cover", onError: () => setImageFailed(true) })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { role: "img", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name, align: "center", justify: "center", boxSize: `${px}px`, borderRadius: "full", bg: bg, color: color, fontSize: avatarSizing_1.FONT_SIZE[size], fontWeight: 600, userSelect: "none", children: (getInitials !== null && getInitials !== void 0 ? getInitials : avatarColorway_1.initialsFor)(name) })), status ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", bottom: "0", right: "0", boxSize: avatarSizing_1.DOT_SIZE[size], borderRadius: "full", bg: (0, tone_1.toneInk)(colors, STATUS_TONE[status]), border: "2px solid", borderColor: colors.background[50] }), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { children: STATUS_LABEL[status] })] })) : null] }));
+};
+exports.default = Avatar;

package/dist/Components/Avatar/AvatarGroup.d.ts

@@ -0,0 +1,3 @@
+import type { AvatarGroupProps } from "./AvatarGroupProps";
+declare const AvatarGroup: ({ people, max, size, ariaLabel, "data-testid": testId }: AvatarGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default AvatarGroup;

package/dist/Components/Avatar/AvatarGroup.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const Avatar_1 = __importDefault(require("./Avatar"));
+const avatarSizing_1 = require("./avatarSizing");
+const summarize = (names, overflow) => {
+    if (overflow <= 0)
+        return names.join(", ");
+    return `${names.join(", ")} and ${overflow} more`;
+};
+const AvatarGroup = ({ people, max = 4, size = "md", ariaLabel, "data-testid": testId }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const shown = people.slice(0, max);
+    const overflow = people.length - shown.length;
+    const px = avatarSizing_1.SIZE_PX[size];
+    const ring = { border: "2px solid", borderColor: colors.background[50] };
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { role: "group", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : summarize(people.map((p) => p.name), overflow), "data-testid": testId, children: [shown.map((person, i) => ((0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": true, ml: i === 0 ? 0 : `-${avatarSizing_1.OVERLAP[size]}`, borderRadius: "full", ...ring, children: (0, jsx_runtime_1.jsx)(Avatar_1.default, { name: person.name, src: person.src, size: size }) }, `${person.name}-${i}`))), overflow > 0 ? ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "aria-hidden": true, ml: `-${avatarSizing_1.OVERLAP[size]}`, align: "center", justify: "center", boxSize: `${px}px`, borderRadius: "full", bg: colors.backgroundColor.secondary, color: colors.text[700], fontSize: avatarSizing_1.FONT_SIZE[size], fontWeight: 600, ...ring, children: ["+", overflow] })) : null] }));
+};
+exports.default = AvatarGroup;

package/dist/Components/Avatar/AvatarGroupProps.d.ts

@@ -0,0 +1,19 @@
+import type { AvatarSize } from "./AvatarProps";
+/** One member of an AvatarGroup stack. */
+export type AvatarGroupMember = {
+    name: string;
+    src?: string;
+};
+/** Overlapping stack of Avatars with a "+N" overflow chip past `max`. */
+export interface AvatarGroupProps {
+    /** Rendered left to right; only the first `max` show as avatars. */
+    people: AvatarGroupMember[];
+    /** Default 4. */
+    max?: number;
+    /** Applies to every avatar and the overflow chip. Default "md". */
+    size?: AvatarSize;
+    /** Overrides the auto-generated group `aria-label`. */
+    ariaLabel?: string;
+    /** Test hook on the root. */
+    "data-testid"?: string;
+}

package/dist/Components/Avatar/AvatarProps.d.ts

@@ -0,0 +1,22 @@
+import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+/** ControlSize plus "2xs" for a badge-sized overlay and "xl" for a profile header. */
+export type AvatarSize = ControlSize | "2xs" | "xl";
+/** Presence indicator; the dot color and its accessible label both follow this. */
+export type AvatarStatus = "online" | "away" | "busy" | "offline";
+/** Image with graceful initials fallback, a deterministic per-name fill, and an optional presence dot. */
+export interface AvatarProps {
+    /** Used for initials, alt text, the deterministic fill color, and the status label prefix. */
+    name: string;
+    /** Image URL. Falls back to initials on a missing src or a failed load. */
+    src?: string;
+    /** Default "md". */
+    size?: AvatarSize;
+    /** Presence dot in the bottom-right corner; omitted entirely when unset. */
+    status?: AvatarStatus;
+    /** Overrides the auto-generated `aria-label` (defaults to `name`). */
+    ariaLabel?: string;
+    /** Replaces the built-in two-letter initials derivation. */
+    getInitials?: (name: string) => string;
+    /** Test hook on the root. */
+    "data-testid"?: string;
+}

package/dist/Components/Avatar/AvatarProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Avatar/avatarColorway.d.ts

@@ -0,0 +1,11 @@
+import type { PaletteProps } from "../../Theme/tokens/types";
+declare const AVATAR_SCALE_KEYS: readonly ["red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink"];
+export type AvatarScaleKey = (typeof AVATAR_SCALE_KEYS)[number];
+export declare const avatarScaleKeyFor: (seed: string) => AvatarScaleKey;
+export type AvatarColorway = {
+    bg: string;
+    color: string;
+};
+export declare const resolveAvatarColorway: (seed: string, colors: PaletteProps) => AvatarColorway;
+export declare const initialsFor: (name: string) => string;
+export {};