pixelize-design-library 2.4.2-beta.9 → 3.0.0

package/dist/esm/Components/AppSwitcher/AppSwitcher.js

@@ -0,0 +1,243 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Box, Flex, Input, InputGroup, InputLeftElement, Popover, PopoverBody, PopoverContent, PopoverTrigger, Skeleton, Text, useDisclosure, } from "@chakra-ui/react";
+import { Grip, Lock, Search } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { chartMode } from "../../Theme/tokens/builders/chartColorsFromTheme.js";
+import { AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
+import { liftToContrast, neutralStep, ruleInk, AA_NON_TEXT, CHROME_RULE, MIN_PERCEPTIBLE_STEP, } from "../../Theme/tokens/builders/outlineRung.js";
+import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
+import Kbd from "../Kbd/Kbd.js";
+import AppMark, { assignAppHues } from "./AppMark.js";
+import { filterApps, formatShortcut, } from "./AppSwitcherProps.js";
+import { useAppSwitcherShortcut } from "./useAppSwitcherShortcut.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+const BACKGROUND_BORDER_COLOR_TRANSITION = transitionFor(["background", "border-color"]);
+const BACKGROUND_TRANSITION = transitionFor(["background"]);
+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;
+/** Top-bar grid button that opens a panel of suite apps to jump between, with optional search and keyboard shortcut. */
+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 = useCustomTheme();
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const requestExclusiveOpen = useExclusiveOverlay(isOpen, onClose);
+    const [query, setQuery] = useState("");
+    const [activeIndex, setActiveIndex] = useState(0);
+    const searchRef = useRef(null);
+    const triggerRef = useRef(null);
+    const itemRefs = useRef([]);
+    const typeahead = useRef({ buffer: "", at: 0 });
+    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 = useMemo(() => assignAppHues(apps, chartMode(theme.colors)), [apps, theme.colors]);
+    const visible = useMemo(() => filterApps(apps, query), [apps, query]);
+    const setOpen = useCallback((next) => {
+        if (next) {
+            requestExclusiveOpen();
+            onOpen();
+        }
+        else {
+            onClose();
+        }
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+    }, [onOpen, onClose, onOpenChange, requestExclusiveOpen]);
+    const closeAndRefocus = useCallback(() => {
+        var _a;
+        setOpen(false);
+        setQuery("");
+        (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [setOpen]);
+    useAppSwitcherShortcut(shortcut, () => setOpen(true), !isOpen);
+    useEffect(() => {
+        if (!isOpen)
+            setQuery("");
+        setActiveIndex(0);
+    }, [isOpen]);
+    useEffect(() => setActiveIndex(0), [query]);
+    const focusItem = 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 = useCallback(() => {
+        const focused = itemRefs.current.findIndex((el) => el === document.activeElement);
+        return focused === -1 ? activeIndex : focused;
+    }, [activeIndex]);
+    const step = useCallback((delta) => {
+        const count = visible.length;
+        if (count === 0)
+            return;
+        focusItem(((currentIndex() + delta) % count + count) % count);
+    }, [currentIndex, visible.length, focusItem]);
+    const jumpToLetter = 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 = 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 = 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 = listRowBackgrounds(theme.colors).active;
+    const footerRule = ruleInk(theme.colors.boxborder[200], [theme.colors.backgroundColor.subtle], CHROME_RULE);
+    // NOTE: neutral, not backgroundColor.tertiary — that rung is brand-tinted and lifting it painted a saturated block.
+    const currentBg = neutralStep(theme.colors.backgroundColor.light, MIN_PERCEPTIBLE_STEP);
+    const currentBar = liftToContrast(theme.colors.accentText, currentBg, AA_NON_TEXT);
+    // NOTE: a derived surface is outside what withSurfaceRungs settled, so its ink is resolved here.
+    const currentName = liftToContrast(theme.colors.text[900], currentBg, AA_NORMAL_TEXT);
+    const currentSub = liftToContrast(theme.colors.textMuted, currentBg, AA_NORMAL_TEXT);
+    const width = panelWidth !== null && panelWidth !== void 0 ? panelWidth : "28rem";
+    const hint = shortcut && showShortcutHint ? formatShortcut(shortcut) : null;
+    return (_jsxs(Popover, { isOpen: isOpen, onOpen: () => setOpen(true), onClose: () => { setOpen(false); setQuery(""); }, placement: "bottom-end", initialFocusRef: showSearch ? searchRef : undefined, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsx(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_BORDER_COLOR_TRANSITION, _hover: { bg: rowHoverBg, color: theme.colors.text[900] }, onKeyDown: (e) => {
+                        if (!isOpen) {
+                            if (e.key === "ArrowDown") {
+                                e.preventDefault();
+                                setOpen(true);
+                            }
+                            return;
+                        }
+                        handlePanelKeyDown(e);
+                    }, children: _jsx(Grip, { size: s.icon + 1 }) }) }), _jsx(PopoverContent, { w: width, maxW: "calc(100vw - 1.5rem)", textAlign: "start", onKeyDown: handlePanelKeyDown, bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", boxShadow: "float", _focus: { outline: "none", boxShadow: "float" }, children: _jsxs(PopoverBody, { p: 0, children: [_jsxs(Flex, { align: "center", gap: 2, px: 3, pt: 3, pb: showSearch ? 2 : 1, children: [_jsx(Text, { fontSize: "xs-minus", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: theme.colors.textMuted, children: HEADING }), _jsx(Box, { flex: "1" }), hint && _jsx(Kbd, { size: "xs", children: hint })] }), showSearch && (_jsx(Box, { px: 3, pb: 2, children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(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();
+                                            }
+                                        } })] }) })), _jsxs(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) => (_jsxs(Flex, { align: "center", gap: 3, px: 2, py: 2, minH: s.row, children: [_jsx(Skeleton, { boxSize: s.mark, borderRadius: "lg" }), _jsx(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 (_jsxs(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_TRANSITION, _hover: interactive ? { bg: rowHoverBg } : undefined, onClick: (e) => handleSelect(app, e), onKeyDown: (e) => handleItemKeyDown(e, app), children: [_jsx(AppMark, { app: app, hue: hues[apps.indexOf(app)], boxSize: s.mark, iconSize: s.icon, muted: app.locked }), _jsxs(Box, { flex: "1", minW: 0, children: [_jsxs(Flex, { align: "center", gap: 1.5, children: [_jsx(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 && (_jsx(Text, { fontSize: "0.625rem", fontWeight: 600, color: theme.colors.semanticText.info, flexShrink: 0, children: app.badge }))] }), app.description && (_jsx(Text, { fontSize: s.sub, color: isCurrent ? currentSub : theme.colors.textMuted, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: app.description }))] }), app.locked && (_jsx(Box, { as: Lock, size: 14, color: theme.colors.textMuted, flexShrink: 0 }))] }, app.id || app.name));
+                                    }), !isLoading && visible.length === 0 && (_jsx(Box, { gridColumn: `span ${COLUMNS}`, px: 2, py: 6, textAlign: "center", children: _jsx(Text, { fontSize: s.name, color: theme.colors.textMuted, children: emptyMessage }) }))] }), footer && (_jsx(Flex, { align: "center", gap: 1.5, px: 3, py: 2.5, borderTop: "1px solid", borderTopColor: footerRule, bg: theme.colors.backgroundColor.subtle, children: footer }))] }) })] }));
+};
+export default AppSwitcher;

package/dist/esm/Components/AppSwitcher/AppSwitcherProps.js

@@ -0,0 +1,87 @@
+const NON_WORD = /[^\p{L}\p{N}]+/u;
+/** Up to two initials, so a mark stays legible without an icon. */
+export 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();
+};
+export 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);
+    });
+};
+/** "mod" is Cmd on Apple platforms and Ctrl everywhere else. */
+export 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;
+};
+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 isAppleNow = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
+/** One label per key in a chord, so a named key such as `enter` stays a single cap. */
+export const shortcutKeys = (shortcut, isApple = isAppleNow()) => {
+    const parts = shortcut.toLowerCase().split("+").map((p) => p.trim()).filter(Boolean);
+    const table = isApple ? APPLE_SYMBOLS : OTHER_LABELS;
+    return parts.map((p, i) => { var _a; return (i === parts.length - 1 ? p.toUpperCase() : ((_a = table[p]) !== null && _a !== void 0 ? _a : p.toUpperCase())); });
+};
+export const formatShortcut = (shortcut, isApple = isAppleNow()) => shortcutKeys(shortcut, isApple).join(isApple ? "" : "+");
+const parseAbsolute = (option, raw) => {
+    try {
+        return new URL(raw.trim());
+    }
+    catch {
+        throw new Error(`[AppSwitcher] buildSuiteApps: ${option} ${JSON.stringify(raw)} is not an absolute URL.`);
+    }
+};
+/**
+ * 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 const buildSuiteApps = (apps, { baseUrl, baseSubdomain, devFallbackBaseUrl }) => {
+    const base = parseAbsolute("baseUrl", baseUrl);
+    const hostHasLabel = base.hostname.split(".").includes(baseSubdomain);
+    const useFallback = !hostHasLabel && devFallbackBaseUrl !== undefined;
+    const source = useFallback ? parseAbsolute("devFallbackBaseUrl", devFallbackBaseUrl) : base;
+    const labels = source.hostname.split(".");
+    const at = labels.indexOf(baseSubdomain);
+    return apps.map(({ subdomain, url, ...app }) => {
+        if (url)
+            return { ...app, url: url.trim() };
+        if (useFallback && subdomain === baseSubdomain)
+            return { ...app, url: base.origin };
+        // 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 ` +
+                `"${source.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(source.toString());
+        next.hostname = labels.map((l, i) => (i === at ? subdomain : l)).join(".");
+        return { ...app, url: next.origin };
+    });
+};

package/dist/esm/Components/AppSwitcher/pixelizeSuite.js

@@ -0,0 +1,67 @@
+import { Building2, Headphones, LayoutGrid, Megaphone, Receipt, Users } from "lucide-react";
+import { buildSuiteApps } from "./AppSwitcherProps.js";
+/** The default Pixelize app list; `resolveSuiteApps` `overrides` change a single app without forking it. */
+export const PIXELIZE_SUITE = [
+    {
+        id: "crm",
+        subdomain: "crm",
+        name: "CRM",
+        description: "Leads, deals and pipeline",
+        icon: LayoutGrid,
+        keywords: ["leads", "deals", "pipeline", "contacts", "sales"],
+    },
+    {
+        id: "account",
+        subdomain: "account",
+        name: "Account",
+        description: "Organization and members",
+        icon: Building2,
+        keywords: ["organization", "members", "roles", "settings", "profile"],
+    },
+    {
+        id: "tickets",
+        subdomain: "tickets",
+        name: "Tickets",
+        description: "Support requests and queues",
+        icon: Headphones,
+        keywords: ["support", "helpdesk", "issues", "sla"],
+    },
+    {
+        id: "billing",
+        subdomain: "billing",
+        name: "Billing",
+        description: "Invoices and plans",
+        icon: Receipt,
+        keywords: ["invoices", "plans", "payments", "subscription"],
+        preRelease: true,
+    },
+    {
+        id: "hrms",
+        subdomain: "hrms",
+        name: "HRMS",
+        description: "People, leave and payroll",
+        icon: Users,
+        keywords: ["people", "employees", "leave", "attendance", "payroll"],
+        preRelease: true,
+    },
+    {
+        id: "social",
+        subdomain: "social",
+        name: "Social",
+        description: "Campaigns and inbox",
+        icon: Megaphone,
+        keywords: ["campaigns", "posts", "inbox", "marketing"],
+        preRelease: true,
+    },
+];
+/** The catalogue as a ready `AppSwitcher` list: pre-release filtering, per-app `urls` and `overrides`, then `buildSuiteApps`. */
+export const resolveSuiteApps = ({ currentAppId, isProduction, urls, overrides, ...urlOptions }) => {
+    const sources = PIXELIZE_SUITE.flatMap((entry) => {
+        const { preRelease, ...app } = { ...entry, ...overrides === null || overrides === void 0 ? void 0 : overrides[entry.id] };
+        if (isProduction && preRelease && app.id !== currentAppId)
+            return [];
+        const url = urls === null || urls === void 0 ? void 0 : urls[app.id];
+        return [url ? { ...app, url } : app];
+    });
+    return buildSuiteApps(sources, urlOptions);
+};

package/dist/esm/Components/AppSwitcher/useAppSwitcherShortcut.js

@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+import { matchesShortcut } from "./AppSwitcherProps.js";
+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. */
+export const useAppSwitcherShortcut = (shortcut, onTrigger, enabled = true) => {
+    useEffect(() => {
+        if (!shortcut || !enabled || typeof window === "undefined")
+            return undefined;
+        const handler = (event) => {
+            if (event.defaultPrevented || isTypingTarget(event.target))
+                return;
+            if (!matchesShortcut(event, shortcut))
+                return;
+            event.preventDefault();
+            onTrigger();
+        };
+        window.addEventListener("keydown", handler);
+        return () => window.removeEventListener("keydown", handler);
+    }, [shortcut, enabled, onTrigger]);
+};
+export default useAppSwitcherShortcut;

package/dist/esm/Components/AppearanceSettings/AppearanceSettings.js

@@ -5,13 +5,15 @@ import { ThemesList } from "../../Theme/index.js";
 import { ThemeSwitcher } from "../../Theme/provider/index.js";
 import { FONT_SIZE_OPTIONS } from "../../Theme/provider/fontSize.js";
 import { lightPalettes } from "../../Theme/tokens/brands/index.js";
+import { CHROME_RULE, ruleInk } from "../../Theme/tokens/builders/outlineRung.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import SelectV2 from "../SelectV2/SelectV2.js";
+import Select from "../Select/Select.js";
 const FieldLabel = ({ children }) => {
     const { colors } = useCustomTheme();
-    return (_jsx(Text, { fontSize: "sm", fontWeight: "medium", color: colors.textMuted, mb: 2, children: children }));
+    return (_jsx(Text, { fontSize: "sm", fontWeight: 500, color: colors.textMuted, mb: 2, children: children }));
 };
-const brandSwatch = (name, colors) => (_jsx(Box, { w: "14px", h: "14px", borderRadius: "full", bg: lightPalettes[name].primary[500], border: "1px solid", borderColor: colors.boxborder[500] }));
+const brandSwatch = (name, colors) => (_jsx(Box, { w: "14px", h: "14px", borderRadius: "full", bg: lightPalettes[name].primary[500], border: "1px solid", borderColor: ruleInk(colors.boxborder[200], [colors.backgroundColor.light, colors.backgroundColor.tertiary], CHROME_RULE) }));
+/** Settings panel with brand, light/dark mode and root font-size pickers; each section can be hidden. */
 export const AppearanceSettings = ({ brand, fontSize, onBrandChange, onFontSizeChange, showBrand = true, showColorMode = true, showFontSize = true, size = "sm", labels, }) => {
     var _a, _b, _c;
     const { colors } = useCustomTheme();
@@ -23,11 +25,11 @@ export const AppearanceSettings = ({ brand, fontSize, onBrandChange, onFontSizeC
     const themeLabel = (_a = labels === null || labels === void 0 ? void 0 : labels.theme) !== null && _a !== void 0 ? _a : "Theme";
     const colorModeLabel = (_b = labels === null || labels === void 0 ? void 0 : labels.colorMode) !== null && _b !== void 0 ? _b : "Color mode";
     const fontSizeLabel = (_c = labels === null || labels === void 0 ? void 0 : labels.fontSize) !== null && _c !== void 0 ? _c : "Font Size";
-    return (_jsxs(VStack, { align: "stretch", spacing: 4, children: [showBrand && (_jsxs(Box, { children: [_jsx(FieldLabel, { children: themeLabel }), _jsx(SelectV2, { options: brandOptions, value: brand, isSearchable: false, size: size, "aria-label": themeLabel, "data-testid": "appearance-brand-select", onChange: (option) => {
+    return (_jsxs(VStack, { align: "stretch", spacing: 4, children: [showBrand && (_jsxs(Box, { children: [_jsx(FieldLabel, { children: themeLabel }), _jsx(Select, { native: false, options: brandOptions, value: brand, isSearchable: false, size: size, "aria-label": themeLabel, "data-testid": "appearance-brand-select", onChange: (option) => {
                             if (!option)
                                 return;
                             onBrandChange === null || onBrandChange === void 0 ? void 0 : onBrandChange(String(option.id));
-                        } })] })), showColorMode && (_jsxs(Box, { children: [_jsx(FieldLabel, { children: colorModeLabel }), _jsx(Box, { "data-testid": "appearance-mode-switcher", children: _jsx(ThemeSwitcher, { variant: "segmented", showBrandPicker: false, size: size, "aria-label": colorModeLabel }) })] })), showFontSize && (_jsxs(Box, { children: [_jsx(FieldLabel, { children: fontSizeLabel }), _jsx(SelectV2, { options: FONT_SIZE_OPTIONS, value: fontSize, isSearchable: false, size: size, "aria-label": fontSizeLabel, "data-testid": "appearance-font-size-select", 
+                        } })] })), showColorMode && (_jsxs(Box, { children: [_jsx(FieldLabel, { children: colorModeLabel }), _jsx(Box, { "data-testid": "appearance-mode-switcher", children: _jsx(ThemeSwitcher, { variant: "segmented", showBrandPicker: false, size: size, "aria-label": colorModeLabel }) })] })), showFontSize && (_jsxs(Box, { children: [_jsx(FieldLabel, { children: fontSizeLabel }), _jsx(Select, { native: false, options: FONT_SIZE_OPTIONS, value: fontSize, isSearchable: false, size: size, "aria-label": fontSizeLabel, "data-testid": "appearance-font-size-select", 
                         // Each row previews the size it sets, so the list is self-explaining.
                         renderOption: (option) => (_jsx(Text, { as: "span", style: { fontSize: String(option.id) }, children: option.label })), onChange: (option) => {
                             if (!option)

package/dist/esm/Components/AudioRecorder/AudioRecorder.js

@@ -0,0 +1,163 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Box, Flex, Text, VisuallyHidden } from "@chakra-ui/react";
+import Button from "../Button/Button.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
+const DEFAULT_LABELS = {
+    start: "Start recording",
+    stop: "Stop recording",
+    recording: "Recording",
+    recorded: "Recorded",
+    permissionDenied: "Microphone access was denied. Allow it in your browser settings and try again.",
+    unsupported: "Audio recording is not supported in this browser.",
+};
+const PREFERRED_MIME = "audio/webm";
+const TICK_MS = 250;
+const EXTENSIONS = {
+    "audio/webm": "webm",
+    "audio/wav": "wav",
+    "audio/wave": "wav",
+    "audio/x-wav": "wav",
+    "audio/ogg": "ogg",
+    "audio/mp4": "m4a",
+    "audio/mpeg": "mp3",
+};
+export const formatElapsed = (ms) => {
+    const total = Math.floor(ms / 1000);
+    return `${String(Math.floor(total / 60)).padStart(2, "0")}:${String(total % 60).padStart(2, "0")}`;
+};
+export const recordingFileName = (mime, now) => {
+    var _a, _b;
+    const type = mime.split(";")[0].trim().toLowerCase() || PREFERRED_MIME;
+    return { type, name: `recording-${now}.${(_a = EXTENSIONS[type]) !== null && _a !== void 0 ? _a : (((_b = type.split("/")[1]) === null || _b === void 0 ? void 0 : _b.replace(/^x-/, "")) || "webm")}` };
+};
+const isSupported = () => { var _a; return typeof navigator !== "undefined" && !!((_a = navigator.mediaDevices) === null || _a === void 0 ? void 0 : _a.getUserMedia) && typeof MediaRecorder !== "undefined"; };
+/** Microphone recorder: a toggle button and timer that hands a `File` to `onRecorded` on stop. */
+const AudioRecorder = ({ onRecorded, maxDurationSec, isDisabled = false, labels }) => {
+    const { colors } = useCustomTheme();
+    const text = { ...DEFAULT_LABELS, ...labels };
+    const [status, setStatus] = useState("idle");
+    const [elapsedMs, setElapsedMs] = useState(0);
+    const [announcement, setAnnouncement] = useState("");
+    const recorderRef = useRef(null);
+    const streamRef = useRef(null);
+    const chunksRef = useRef([]);
+    const timerRef = useRef(null);
+    const startedAtRef = useRef(0);
+    const mountedRef = useRef(true);
+    const startingRef = useRef(false);
+    const onRecordedRef = useRef(onRecorded);
+    const textRef = useRef(text);
+    onRecordedRef.current = onRecorded;
+    textRef.current = text;
+    const release = useCallback(() => {
+        var _a;
+        if (timerRef.current !== null)
+            clearInterval(timerRef.current);
+        timerRef.current = null;
+        (_a = streamRef.current) === null || _a === void 0 ? void 0 : _a.getTracks().forEach((track) => track.stop());
+        streamRef.current = null;
+        recorderRef.current = null;
+    }, []);
+    useEffect(() => {
+        mountedRef.current = true;
+        if (!isSupported())
+            setStatus("unsupported");
+        return () => {
+            mountedRef.current = false;
+            const recorder = recorderRef.current;
+            if (recorder) {
+                recorder.ondataavailable = null;
+                recorder.onstop = null;
+                recorder.onerror = null;
+                if (recorder.state !== "inactive") {
+                    try {
+                        recorder.stop();
+                    }
+                    catch {
+                        // NOTE: a recorder the browser already tore down throws on stop.
+                    }
+                }
+            }
+            release();
+        };
+    }, [release]);
+    const stop = useCallback(() => {
+        const recorder = recorderRef.current;
+        if (recorder && recorder.state !== "inactive")
+            recorder.stop();
+    }, []);
+    const start = useCallback(async () => {
+        var _a, _b;
+        if (startingRef.current)
+            return;
+        if (!isSupported()) {
+            setStatus("unsupported");
+            return;
+        }
+        startingRef.current = true;
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            if (!mountedRef.current) {
+                stream.getTracks().forEach((track) => track.stop());
+                return;
+            }
+            streamRef.current = stream;
+            chunksRef.current = [];
+            const useWebm = (_b = (_a = MediaRecorder.isTypeSupported) === null || _a === void 0 ? void 0 : _a.call(MediaRecorder, PREFERRED_MIME)) !== null && _b !== void 0 ? _b : false;
+            const recorder = new MediaRecorder(stream, useWebm ? { mimeType: PREFERRED_MIME } : undefined);
+            recorderRef.current = recorder;
+            recorder.ondataavailable = (event) => {
+                if (event.data.size > 0)
+                    chunksRef.current.push(event.data);
+            };
+            recorder.onerror = () => {
+                release();
+                setStatus("idle");
+            };
+            recorder.onstop = () => {
+                const duration = Date.now() - startedAtRef.current;
+                const { type, name } = recordingFileName(recorder.mimeType || PREFERRED_MIME, Date.now());
+                const file = new File(chunksRef.current, name, { type });
+                release();
+                setStatus("idle");
+                setElapsedMs(duration);
+                setAnnouncement(`${textRef.current.recorded} ${formatElapsed(duration)}`);
+                if (file.size > 0)
+                    onRecordedRef.current(file);
+            };
+            recorder.start();
+            startedAtRef.current = Date.now();
+            setElapsedMs(0);
+            setStatus("recording");
+            setAnnouncement(textRef.current.recording);
+            timerRef.current = setInterval(() => {
+                const elapsed = Date.now() - startedAtRef.current;
+                if (maxDurationSec !== undefined && elapsed >= maxDurationSec * 1000) {
+                    setElapsedMs(maxDurationSec * 1000);
+                    stop();
+                    return;
+                }
+                setElapsedMs(elapsed);
+            }, TICK_MS);
+        }
+        catch (error) {
+            release();
+            if (!mountedRef.current)
+                return;
+            const name = error === null || error === void 0 ? void 0 : error.name;
+            setStatus(name === "NotFoundError" ? "unsupported" : "denied");
+        }
+        finally {
+            startingRef.current = false;
+        }
+    }, [maxDurationSec, release, stop]);
+    const isRecording = status === "recording";
+    const blocked = status === "unsupported";
+    return (_jsxs(Box, { children: [_jsxs(Flex, { align: "center", gap: 3, children: [_jsx(Button, { label: isRecording ? text.stop : text.start, size: "sm", colorScheme: isRecording ? "red" : undefined, variant: isRecording ? "solid" : "outline", "aria-pressed": isRecording, isDisabled: isRecording ? false : isDisabled || blocked, onClick: isRecording ? stop : () => void start() }), isRecording ? (_jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Box, { "data-testid": "audio-recorder-dot", boxSize: "0.5rem", borderRadius: "full", bg: colors.semanticText.error, "aria-hidden": true, sx: {
+                                    "@media (prefers-reduced-motion: no-preference)": { animation: "audio-recorder-pulse 1.2s ease-in-out infinite" },
+                                    "@keyframes audio-recorder-pulse": { "0%, 100%": { opacity: 1 }, "50%": { opacity: 0.35 } },
+                                } }), _jsx(Text, { as: "span", role: "timer", fontSize: "sm", color: colors.header[900], sx: NUMERIC_TEXT, children: formatElapsed(elapsedMs) })] })) : null] }), _jsx(VisuallyHidden, { role: "status", "aria-live": "polite", children: announcement }), status === "denied" || status === "unsupported" ? (_jsx(Text, { role: "alert", mt: 1, fontSize: "xs", color: colors.semanticText.error, children: status === "denied" ? text.permissionDenied : text.unsupported })) : null] }));
+};
+export default AudioRecorder;