pixelize-design-library 2.4.2-beta.3 → 2.4.2-beta.30

package/dist/Components/Accordion/Accordion.js

@@ -6,21 +6,23 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const accordionColors_1 = require("./accordionColors");
 const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const isDark = (0, accentText_1.isDarkCanvas)(colors.backgroundColor.main);
-    const border = colors.boxborder[300];
+    const border = colors.boxborder[200];
     const headingColor = colors.text[800];
     const bodyColor = colors.text[600];
     const { expandedBg, softHover } = (0, react_1.useMemo)(() => (0, accordionColors_1.getAccordionHoverColors)(colors, isDark), [colors, isDark]);
+    const focusRing = (0, react_1.useMemo)(() => (0, outlineRung_1.liftToContrast)(colors.primary[300], colors.background[50], outlineRung_1.AA_NON_TEXT), [colors]);
     return ((0, jsx_runtime_1.jsx)(react_2.Accordion, { allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion, ...rest, children: items.map((item, idx) => {
             var _a;
-            return ((0, jsx_runtime_1.jsx)(react_2.AccordionItem, { border: `0.063rem solid ${border}`, borderRadius: "xl", bg: colors.background[50], mb: 3, overflow: "hidden", transition: "border-color 0.15s ease, box-shadow 0.15s ease", _last: { mb: 0 }, _hover: { borderColor: colors.boxborder[400] }, ...item.itemProps, sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle, children: ({ isExpanded }) => {
+            return ((0, jsx_runtime_1.jsx)(react_2.AccordionItem, { border: `0.063rem solid ${border}`, borderRadius: "xl", bg: colors.background[50], mb: 3, overflow: "hidden", transition: "border-color 0.15s ease, box-shadow 0.15s ease", _last: { mb: 0 }, _hover: { borderColor: colors.boxborder[200] }, ...item.itemProps, sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle, children: ({ isExpanded }) => {
                     var _a, _b, _c;
                     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { children: (0, jsx_runtime_1.jsxs)(react_2.AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "0.875rem", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: "background 0.15s ease", _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: {
                                         boxShadow: "none",
-                                        outline: `0.125rem solid ${colors.primary[300]}`,
+                                        outline: `0.125rem solid ${focusRing}`,
                                         outlineOffset: "-0.125rem",
                                     }, ...item.buttonProps, sx: {
                                         ...(_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.buttonStyle,

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { chartMode } from "../../Theme/tokens/builders/chartColorsFromTheme";
+import { type AppOption } from "./AppSwitcherProps";
+/**
+ * One hue per app. `avatarColor` hashes into an 8-hue series, so six apps collide more often than
+ * not — Billing and Account shipped identical marks. Assigned over the WHOLE list, never the
+ * filtered one, so searching cannot repaint a mark.
+ */
+export declare const assignAppHues: (apps: readonly AppOption[], mode: ReturnType<typeof chartMode>) => string[];
+export declare const appTint: (hue: string, surface: string, white: string) => string;
+export declare const appTintInk: (fill: string, white: string, black: string) => string;
+declare const AppMark: React.FC<{
+    app: AppOption;
+    hue: string;
+    boxSize: string;
+    iconSize: number;
+    muted?: boolean;
+}>;
+export default AppMark;

package/dist/Components/AppSwitcher/AppMark.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.appTintInk = exports.appTint = exports.assignAppHues = void 0;
+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 color_1 = require("../../Theme/tokens/builders/color");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const accentText_2 = require("../../Theme/tokens/builders/accentText");
+const chartColorsFromTheme_1 = require("../../Theme/tokens/builders/chartColorsFromTheme");
+const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
+const OrgSwitcherProps_1 = require("../OrgSwitcher/OrgSwitcherProps");
+const AppSwitcherProps_1 = require("./AppSwitcherProps");
+// The app's own hue at 85% strength — the solid mark, softened just off full saturation.
+const FILL_STRENGTH = 0.85;
+/**
+ * One hue per app. `avatarColor` hashes into an 8-hue series, so six apps collide more often than
+ * not — Billing and Account shipped identical marks. Assigned over the WHOLE list, never the
+ * filtered one, so searching cannot repaint a mark.
+ */
+const assignAppHues = (apps, mode) => {
+    const ramp = chartColorsFromTheme_1.CATEGORICAL_SERIES[mode].map(statusTone_1.resolveAvatarFill);
+    const taken = new Set(apps.flatMap((a) => (a.color ? [a.color] : [])));
+    return apps.map((app) => {
+        if (app.color)
+            return app.color;
+        const seed = (0, OrgSwitcherProps_1.avatarColor)(app.id || app.name, mode);
+        const start = Math.max(0, ramp.indexOf(seed));
+        for (let i = 0; i < ramp.length; i += 1) {
+            const next = ramp[(start + i) % ramp.length];
+            if (!taken.has(next)) {
+                taken.add(next);
+                return next;
+            }
+        }
+        // More apps than the series has hues; past this point a repeat is unavoidable.
+        return seed;
+    });
+};
+exports.assignAppHues = assignAppHues;
+// Softening costs the fill contrast, so it is walked back until a WHITE glyph clears AA — every
+// mark keeps the same white icon instead of some flipping to black.
+const appTint = (hue, surface, white) => (0, outlineRung_1.liftToContrast)((0, color_1.mix)(hue, surface, 1 - FILL_STRENGTH), white, accentText_2.AA_NORMAL_TEXT);
+exports.appTint = appTint;
+const appTintInk = (fill, white, black) => (0, accentText_1.onFilled)(fill, white, black);
+exports.appTintInk = appTintInk;
+const AppMark = ({ app, hue, boxSize, iconSize, muted = false, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    if (app.iconUrl) {
+        return ((0, jsx_runtime_1.jsx)(react_2.Image, { src: app.iconUrl, alt: "", boxSize: boxSize, borderRadius: "lg", objectFit: "cover", flexShrink: 0, opacity: muted ? 0.55 : 1 }));
+    }
+    const surface = colors.backgroundColor.light;
+    const fill = muted ? colors.backgroundColor.quaternary : (0, exports.appTint)(hue, surface, colors.white);
+    const ink = muted ? colors.textMuted : (0, exports.appTintInk)(fill, colors.white, colors.black);
+    // lucide icons are forwardRef objects, not functions — a typeof check silently drops them.
+    const isElement = (0, react_1.isValidElement)(app.icon);
+    const Icon = !isElement && app.icon ? app.icon : null;
+    return ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: boxSize, borderRadius: "lg", flexShrink: 0, bg: fill, color: ink, fontSize: `${Math.round(iconSize * 0.72)}px`, fontWeight: 700, "aria-hidden": true, children: Icon ? ((0, jsx_runtime_1.jsx)(Icon, { size: iconSize, color: ink })) : (0, react_1.isValidElement)(app.icon) ? ((0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", color: ink, children: app.icon })) : ((0, AppSwitcherProps_1.appInitials)(app.name)) }));
+};
+exports.default = AppMark;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { type AppSwitcherProps } from "./AppSwitcherProps";
+declare const AppSwitcher: React.FC<AppSwitcherProps>;
+export default AppSwitcher;

package/dist/Components/AppSwitcher/AppSwitcher.js

@@ -0,0 +1,315 @@
+"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 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.`);
+    });
+};
+// Past a pointer's pause threshold, so crossing the launcher on the way elsewhere does not open it,
+// but short enough that deliberately resting on it feels instant.
+const HOVER_OPEN_DELAY = 450;
+// Long enough to travel the gap between the launcher and the panel below it.
+const HOVER_CLOSE_GRACE = 250;
+// 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 [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 panelRef = (0, react_1.useRef)(null);
+    const itemRefs = (0, react_1.useRef)([]);
+    const typeahead = (0, react_1.useRef)({ buffer: "", at: 0 });
+    const hoverTimer = (0, react_1.useRef)();
+    const openedByHover = (0, react_1.useRef)(false);
+    (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)
+            onOpen();
+        else
+            onClose();
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+    }, [onOpen, onClose, onOpenChange]);
+    const cancelHoverTimer = (0, react_1.useCallback)(() => {
+        if (hoverTimer.current)
+            clearTimeout(hoverTimer.current);
+        hoverTimer.current = undefined;
+    }, []);
+    (0, react_1.useEffect)(() => cancelHoverTimer, [cancelHoverTimer]);
+    // Touch and stylus report no hover; a timer there would open the panel on a tap-and-hold.
+    const pointerHovers = () => {
+        var _a;
+        return typeof window !== "undefined" &&
+            ((_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, "(hover: hover) and (pointer: fine)").matches);
+    };
+    const handleHoverStart = (0, react_1.useCallback)(() => {
+        if (isOpen || !pointerHovers())
+            return;
+        cancelHoverTimer();
+        hoverTimer.current = setTimeout(() => {
+            openedByHover.current = true;
+            setOpen(true);
+        }, HOVER_OPEN_DELAY);
+    }, [isOpen, cancelHoverTimer, setOpen]);
+    // A click-opened panel is sticky, and a keyboard user inside it is not "hovering away".
+    const handleHoverEnd = (0, react_1.useCallback)(() => {
+        cancelHoverTimer();
+        if (!isOpen || !openedByHover.current)
+            return;
+        hoverTimer.current = setTimeout(() => {
+            var _a;
+            if ((_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement))
+                return;
+            openedByHover.current = false;
+            setOpen(false);
+            setQuery("");
+        }, HOVER_CLOSE_GRACE);
+    }, [isOpen, cancelHoverTimer, setOpen]);
+    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, outlineRung_1.resolveHoverTint)(theme.colors.gray[50], theme.colors.backgroundColor.light);
+    const footerRule = (0, outlineRung_1.ruleInk)(theme.colors.boxborder[200], [theme.colors.backgroundColor.subtle], outlineRung_1.CHROME_RULE);
+    // Neutral, not `backgroundColor.tertiary`: that rung is brand-tinted in the hand-authored light
+    // palettes, so lifting it painted the row a saturated block. The rail identifies the row, so the
+    // fill only has to be perceptible — pushed further it is a mid-grey slab that reads disabled.
+    const currentBg = (0, outlineRung_1.neutralStep)(theme.colors.backgroundColor.light, outlineRung_1.MIN_PERCEPTIBLE_STEP);
+    // The brand rail is the whole marker — no ring, no badge. `accentText` already clears AA as ink
+    // on the canvas; lifting it to AA_NON_TEXT here guarantees it on the row's own fill too, for a
+    // brand whose accent is pale.
+    const currentBar = (0, outlineRung_1.liftToContrast)(theme.colors.accentText, currentBg, outlineRung_1.AA_NON_TEXT);
+    // 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] }, onMouseEnter: handleHoverStart, onMouseLeave: handleHoverEnd, onClick: () => { openedByHover.current = false; cancelHoverTimer(); }, 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, { ref: panelRef, onMouseEnter: cancelHoverTimer, onMouseLeave: handleHoverEnd, w: width, maxW: "calc(100vw - 1.5rem)", textAlign: "start", onKeyDown: handlePanelKeyDown, bg: theme.colors.backgroundColor.light, 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: "base", 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: "base" })] }, 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,64 @@
+import type { ComponentType, ReactNode } from "react";
+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;
+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;
+    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[];
+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;
+export interface SuiteAppSource extends Omit<AppOption, "url"> {
+    subdomain: string;
+    url?: string;
+}
+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)();