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

package/dist/Theme/tokens/builders/resolvedRungs.js

@@ -6,9 +6,14 @@ exports.withTableHoverRung = withTableHoverRung;
 const outlineRung_1 = require("./outlineRung");
 Object.defineProperty(exports, "AA_NON_TEXT", { enumerable: true, get: function () { return outlineRung_1.AA_NON_TEXT; } });
 const accentText_1 = require("./accentText");
-/** Placeholder text measured 4.32:1 on a card for 8 of 9 brands — text, so held to 4.5:1. */
+const surfaceRungs_1 = require("./surfaceRungs");
+/**
+ * A hint is floored at 3:1, not 4.5:1. Held to body-text contrast it stopped reading as a hint —
+ * an empty field looked like one already typed into — and the published library ships this rung
+ * as the brand authored it. See CHROME-CONSISTENCY.md.
+ */
 function withPlaceholderRung(palette) {
-    const resolved = (0, outlineRung_1.liftToContrast)(palette.placeholder[500], palette.background[50], accentText_1.AA_NORMAL_TEXT);
+    const resolved = (0, outlineRung_1.liftToContrast)(palette.placeholder[500], palette.background[50], surfaceRungs_1.PLACEHOLDER_TEXT);
     if (resolved === palette.placeholder[500])
         return palette;
     return { ...palette, placeholder: { ...palette.placeholder, 500: resolved } };

package/dist/Theme/tokens/builders/rowStates.d.ts

@@ -0,0 +1,13 @@
+import type { PaletteProps } from "../types";
+export interface RowStateBackgrounds {
+    active: string;
+    selected: string;
+    selectedActive: string;
+}
+/**
+ * The three backgrounds a selectable list row can rest on. Every rung is NEUTRAL and pale, so a
+ * row's ink stays the canvas ink `withSurfaceRungs` already settled. Seeding a row state from
+ * `primary[500]` instead — the filled-button rung — is what painted SelectV2's hovered rows a
+ * solid brand fill under unreadable text.
+ */
+export declare const listRowBackgrounds: (colors: PaletteProps) => RowStateBackgrounds;

package/dist/Theme/tokens/builders/rowStates.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.listRowBackgrounds = void 0;
+const outlineRung_1 = require("./outlineRung");
+/**
+ * The three backgrounds a selectable list row can rest on. Every rung is NEUTRAL and pale, so a
+ * row's ink stays the canvas ink `withSurfaceRungs` already settled. Seeding a row state from
+ * `primary[500]` instead — the filled-button rung — is what painted SelectV2's hovered rows a
+ * solid brand fill under unreadable text.
+ */
+const listRowBackgrounds = (colors) => {
+    const selected = colors.backgroundColor.tertiary;
+    return {
+        active: (0, outlineRung_1.resolveHoverTint)(colors.gray[50], colors.backgroundColor.light),
+        selected,
+        selectedActive: (0, outlineRung_1.resolveHoverTint)(selected, selected),
+    };
+};
+exports.listRowBackgrounds = listRowBackgrounds;

package/dist/Theme/tokens/builders/scrollbar.d.ts

@@ -0,0 +1,12 @@
+import type { PaletteProps } from "../types";
+export type ScrollbarStyle = Record<string, unknown>;
+/** One width everywhere. The 3px, 4px, 5px and 10px bars in use were all accidents. */
+export declare const SCROLLBAR_WIDTH = "6px";
+export type ScrollbarVariant = "default" | "overlay" | "hover";
+/**
+ * The single source of scrollbar chrome. `overlay` drops the track for bars that float over a
+ * card; `hover` keeps the thumb invisible until the region is hovered.
+ */
+export declare function scrollbarStyles(palette: PaletteProps, variant?: ScrollbarVariant): ScrollbarStyle;
+/** The same chrome for the document itself, where `&` selectors do not apply. */
+export declare function globalScrollbarStyles(palette: PaletteProps): ScrollbarStyle;

package/dist/Theme/tokens/builders/scrollbar.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SCROLLBAR_WIDTH = void 0;
+exports.scrollbarStyles = scrollbarStyles;
+exports.globalScrollbarStyles = globalScrollbarStyles;
+/** One width everywhere. The 3px, 4px, 5px and 10px bars in use were all accidents. */
+exports.SCROLLBAR_WIDTH = "6px";
+const RADIUS = "6px";
+/**
+ * The single source of scrollbar chrome. `overlay` drops the track for bars that float over a
+ * card; `hover` keeps the thumb invisible until the region is hovered.
+ */
+function scrollbarStyles(palette, variant = "default") {
+    const { gray } = palette;
+    const track = variant === "default" ? gray[100] : "transparent";
+    const thumb = variant === "hover" ? "transparent" : gray[400];
+    return {
+        scrollbarWidth: "thin",
+        scrollbarColor: `${thumb} ${track}`,
+        "&::-webkit-scrollbar": {
+            width: exports.SCROLLBAR_WIDTH,
+            height: exports.SCROLLBAR_WIDTH,
+        },
+        "&::-webkit-scrollbar-track": {
+            background: track,
+            borderRadius: RADIUS,
+        },
+        "&::-webkit-scrollbar-thumb": {
+            background: thumb,
+            borderRadius: RADIUS,
+            transition: "background 0.2s ease",
+        },
+        "&::-webkit-scrollbar-thumb:hover": {
+            background: gray[500],
+        },
+        "&::-webkit-scrollbar-corner": {
+            background: track,
+        },
+        ...(variant === "hover"
+            ? {
+                "&:hover": { scrollbarColor: `${gray[400]} ${track}` },
+                "&:hover::-webkit-scrollbar-thumb": { background: gray[400] },
+            }
+            : {}),
+    };
+}
+/** The same chrome for the document itself, where `&` selectors do not apply. */
+function globalScrollbarStyles(palette) {
+    const { gray } = palette;
+    return {
+        "::-webkit-scrollbar": { width: exports.SCROLLBAR_WIDTH, height: exports.SCROLLBAR_WIDTH },
+        "::-webkit-scrollbar-track": { background: gray[100] },
+        "::-webkit-scrollbar-thumb": { background: gray[400], borderRadius: RADIUS },
+        "::-webkit-scrollbar-thumb:hover": { background: gray[500] },
+        "::-webkit-scrollbar-corner": { background: gray[100] },
+    };
+}

package/dist/Theme/tokens/builders/solidFillRung.d.ts

@@ -0,0 +1,4 @@
+import type { ColorScale, BrandScale } from "../types";
+export type Rung = keyof ColorScale;
+export declare const solidRung: (scale: ColorScale | BrandScale, white: string) => Rung;
+export declare const darkerFillRung: (scale: ColorScale | BrandScale, white: string, isDark: boolean, step: 0 | 1) => Rung;

package/dist/Theme/tokens/builders/solidFillRung.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.darkerFillRung = exports.solidRung = void 0;
+const color_1 = require("./color");
+const AA_NORMAL_TEXT = 4.5;
+const RUNGS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+const FILL_STEP_RUNGS = { light: [600, 700], dark: [400, 300] };
+const hasOpacity = (scale) => "opacity" in scale;
+// Brand scales keep [500]; utility scales (red, green, …) step to the closest passing rung.
+const solidRung = (scale, white) => {
+    if (hasOpacity(scale))
+        return 500;
+    if ((0, color_1.contrastRatio)(scale[500], white) >= AA_NORMAL_TEXT)
+        return 500;
+    const passing = RUNGS.filter((r) => scale[r] && (0, color_1.contrastRatio)(scale[r], white) >= AA_NORMAL_TEXT);
+    if (!passing.length)
+        return 500;
+    return passing.reduce((a, b) => (0, color_1.contrastRatio)(scale[a], white) <= (0, color_1.contrastRatio)(scale[b], white) ? a : b);
+};
+exports.solidRung = solidRung;
+const steppedRung = (base, step, isDark) => {
+    const dir = isDark ? -100 : 100;
+    return Math.min(900, Math.max(50, base + dir * step));
+};
+const darkerFillRung = (scale, white, isDark, step) => {
+    const base = (0, exports.solidRung)(scale, white);
+    if (base === 500) {
+        const mode = isDark ? "dark" : "light";
+        return FILL_STEP_RUNGS[mode][step];
+    }
+    return steppedRung(base, step === 0 ? 1 : 2, isDark);
+};
+exports.darkerFillRung = darkerFillRung;

package/dist/Theme/tokens/builders/surfaceRungs.d.ts

@@ -1,4 +1,9 @@
 import type { PaletteProps } from "../types";
+/**
+ * A hint is held to the non-text floor, not the body-text one. Deliberate: at 4.5 an empty field
+ * reads as one already typed into. See CHROME-CONSISTENCY.md.
+ */
+export declare const PLACEHOLDER_TEXT = 3;
 export declare const namedSurfaces: (palette: PaletteProps) => string[];
 /** The surface an ink is closest to — clearing it clears every other one. */
 export declare const hardestSurface: (ink: string, surfaces: string[]) => string;

package/dist/Theme/tokens/builders/surfaceRungs.js

@@ -1,11 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.hardestSurface = exports.namedSurfaces = void 0;
+exports.hardestSurface = exports.namedSurfaces = exports.PLACEHOLDER_TEXT = void 0;
 exports.withSurfaceRungs = withSurfaceRungs;
 const color_1 = require("./color");
 const outlineRung_1 = require("./outlineRung");
 const accentText_1 = require("./accentText");
 const semanticText_1 = require("./semanticText");
+/**
+ * A hint is held to the non-text floor, not the body-text one. Deliberate: at 4.5 an empty field
+ * reads as one already typed into. See CHROME-CONSISTENCY.md.
+ */
+exports.PLACEHOLDER_TEXT = outlineRung_1.AA_NON_TEXT;
 const namedSurfaces = (palette) => [
     ...Object.values(palette.backgroundColor),
     palette.background[50],
@@ -19,6 +24,8 @@ exports.hardestSurface = hardestSurface;
 function withSurfaceRungs(palette) {
     const surfaces = (0, exports.namedSurfaces)(palette);
     const lift = (ink, target) => (0, outlineRung_1.liftToContrast)(ink, (0, exports.hardestSurface)(ink, surfaces), target);
+    const settle = (ink, target) => (0, outlineRung_1.settleAcross)(ink, surfaces, target);
+    const rule = (ink) => (0, outlineRung_1.ruleInk)(ink, [palette.backgroundColor.main, palette.background[50]], outlineRung_1.CHROME_RULE);
     const semanticText = semanticText_1.SEMANTIC_TONES.reduce((acc, tone) => {
         acc[tone] = lift(palette.semanticText[tone], accentText_1.AA_NORMAL_TEXT);
         return acc;
@@ -30,10 +37,18 @@ function withSurfaceRungs(palette) {
         semanticText,
         text: { ...palette.text, 500: lift(palette.text[500], accentText_1.AA_NORMAL_TEXT) },
         header: { ...palette.header, 500: lift(palette.header[500], accentText_1.AA_NORMAL_TEXT) },
-        placeholder: {
-            ...palette.placeholder,
-            500: lift(palette.placeholder[500], accentText_1.AA_NORMAL_TEXT),
+        // `placeholder` is deliberately absent: the brand authors that rung and the published
+        // library ships it untouched. Its floor is enforced in `placeholderInk`, against the
+        // surfaces a FIELD renders on — not `table.hover`, which no field sits on.
+        // Settled, not lifted: this rung already passed through `withOutlineRung`, and lifting it
+        // again here to AA_NON_TEXT is what shipped 3.85-4.95:1 outlines. See CHROME_BORDER.
+        boxborder: {
+            ...palette.boxborder,
+            200: rule(palette.boxborder[200]),
+            500: settle(palette.boxborder[500], outlineRung_1.CHROME_BORDER),
         },
-        boxborder: { ...palette.boxborder, 500: lift(palette.boxborder[500], outlineRung_1.AA_NON_TEXT) },
+        // The 200 rung of both ramps is the same job under two names; settle them together or an
+        // app picking `border` gets a heavier rule than one picking `boxborder`.
+        border: { ...palette.border, 200: rule(palette.border[200]) },
     };
 }

package/dist/Theme/tokens/types.d.ts

@@ -65,6 +65,24 @@ export type SidebarTokens = {
     /** Status ink resolved against the RAIL. `semanticText` is canvas-relative, not rail. */
     semanticText: SemanticTextTokens;
 };
+/**
+ * The two-tone focus indicator. `ring` is the brand-toned band that carries WCAG 1.4.11
+ * against whatever is BEHIND the control; `halo` is the inner band drawn between the ring
+ * and the control's own fill, so the indicator stays visible on a filled button too.
+ *
+ * Two tones because one band cannot own both adjacencies. `ring` is resolved against three
+ * backdrops (canvas, card, `primary[500]`) and clears all three on every brand — but a button
+ * can be filled by any `colorScheme`, and widening the ring to cover the mid-tone named surfaces
+ * as well leaves `skyline` and `storefront` with no solution at any hue (contrast is luminance
+ * alone, and their bands come out empty). `halo` takes the fill-side adjacency instead, so the
+ * pair holds whatever the button is filled with and whatever it sits on.
+ */
+export type FocusRingTokens = {
+    /** Outer band. >=3:1 against the canvas, a card surface, and the control's own fill. */
+    ring: string;
+    /** Inner band, in the surface tone. >=3:1 against the fill it hugs and against `ring`. */
+    halo: string;
+};
 export type BoxShadowTokens = {
     primary: string;
     error: string;
@@ -102,6 +120,8 @@ export type PaletteProps = {
     header: ColorScale;
     placeholder: ColorScale;
     boxShadow: BoxShadowTokens;
+    /** Two-tone `:focus-visible` indicator, resolved to 3:1 (WCAG 1.4.11). Never hand-written. */
+    focusRing: FocusRingTokens;
     sidebar: SidebarTokens;
     boxborder: ColorScale;
     border: ColorScale;
@@ -125,7 +145,7 @@ export type PaletteProps = {
 };
 /** What a brand writes by hand; every token required, so a gap is a compile error. */
 /** Derived tokens are excluded — `finalizeLightPalette` resolves them per brand. */
-export type BrandPaletteSource = Omit<PaletteProps, "accentText" | "textMuted" | "semanticText" | "sidebar" | "onPrimary" | "onSemantic"> & {
+export type BrandPaletteSource = Omit<PaletteProps, "accentText" | "textMuted" | "semanticText" | "sidebar" | "onPrimary" | "onSemantic" | "focusRing"> & {
     sidebar: {
         background: ColorScale;
     };

package/dist/esm/Components/Accordion/Accordion.js

@@ -4,21 +4,23 @@ import { Accordion as ChakraAccordian, AccordionItem, AccordionButton, Accordion
 import { ChevronDown } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { liftToContrast, AA_NON_TEXT } from "../../Theme/tokens/builders/outlineRung.js";
 import { getAccordionHoverColors } from "./accordionColors.js";
 const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }) => {
     const { colors } = useCustomTheme();
     const isDark = 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 } = useMemo(() => getAccordionHoverColors(colors, isDark), [colors, isDark]);
+    const focusRing = useMemo(() => liftToContrast(colors.primary[300], colors.background[50], AA_NON_TEXT), [colors]);
     return (_jsx(ChakraAccordian, { allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion, ...rest, children: items.map((item, idx) => {
             var _a;
-            return (_jsx(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 (_jsx(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 (_jsxs(_Fragment, { children: [_jsx("h2", { children: _jsxs(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/esm/Components/AppSwitcher/AppMark.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isValidElement } from "react";
+import { Box, Flex, Image } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { mix } from "../../Theme/tokens/builders/color.js";
+import { onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
+import { CATEGORICAL_SERIES } from "../../Theme/tokens/builders/chartColorsFromTheme.js";
+import { resolveAvatarFill } from "../../Theme/tokens/builders/statusTone.js";
+import { avatarColor } from "../OrgSwitcher/OrgSwitcherProps.js";
+import { appInitials } from "./AppSwitcherProps.js";
+// 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.
+ */
+export const assignAppHues = (apps, mode) => {
+    const ramp = CATEGORICAL_SERIES[mode].map(resolveAvatarFill);
+    const taken = new Set(apps.flatMap((a) => (a.color ? [a.color] : [])));
+    return apps.map((app) => {
+        if (app.color)
+            return app.color;
+        const seed = 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;
+    });
+};
+// 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.
+export const appTint = (hue, surface, white) => liftToContrast(mix(hue, surface, 1 - FILL_STRENGTH), white, AA_NORMAL_TEXT);
+export const appTintInk = (fill, white, black) => onFilled(fill, white, black);
+const AppMark = ({ app, hue, boxSize, iconSize, muted = false, }) => {
+    const { colors } = useCustomTheme();
+    if (app.iconUrl) {
+        return (_jsx(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 : appTint(hue, surface, colors.white);
+    const ink = muted ? colors.textMuted : appTintInk(fill, colors.white, colors.black);
+    // lucide icons are forwardRef objects, not functions — a typeof check silently drops them.
+    const isElement = isValidElement(app.icon);
+    const Icon = !isElement && app.icon ? app.icon : null;
+    return (_jsx(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 ? (_jsx(Icon, { size: iconSize, color: ink })) : isValidElement(app.icon) ? (_jsx(Box, { display: "flex", color: ink, children: app.icon })) : (appInitials(app.name)) }));
+};
+export default AppMark;

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

@@ -0,0 +1,280 @@
+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, resolveHoverTint, ruleInk, AA_NON_TEXT, CHROME_RULE, MIN_PERCEPTIBLE_STEP, } from "../../Theme/tokens/builders/outlineRung.js";
+import AppMark, { assignAppHues } from "./AppMark.js";
+import { filterApps, formatShortcut, } from "./AppSwitcherProps.js";
+import { useAppSwitcherShortcut } from "./useAppSwitcherShortcut.js";
+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 = useCustomTheme();
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const [query, setQuery] = useState("");
+    const [activeIndex, setActiveIndex] = useState(0);
+    const searchRef = useRef(null);
+    const triggerRef = useRef(null);
+    const panelRef = useRef(null);
+    const itemRefs = useRef([]);
+    const typeahead = useRef({ buffer: "", at: 0 });
+    const hoverTimer = useRef();
+    const openedByHover = useRef(false);
+    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)
+            onOpen();
+        else
+            onClose();
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+    }, [onOpen, onClose, onOpenChange]);
+    const cancelHoverTimer = useCallback(() => {
+        if (hoverTimer.current)
+            clearTimeout(hoverTimer.current);
+        hoverTimer.current = undefined;
+    }, []);
+    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 = 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 = 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 = 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 = resolveHoverTint(theme.colors.gray[50], theme.colors.backgroundColor.light);
+    const footerRule = ruleInk(theme.colors.boxborder[200], [theme.colors.backgroundColor.subtle], 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 = neutralStep(theme.colors.backgroundColor.light, 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 = liftToContrast(theme.colors.accentText, currentBg, AA_NON_TEXT);
+    // 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 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: _jsx(Grip, { size: s.icon + 1 }) }) }), _jsx(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: _jsxs(PopoverBody, { p: 0, children: [_jsxs(Flex, { align: "center", gap: 2, px: 3, pt: 3, pb: showSearch ? 2 : 1, children: [_jsx(Text, { fontSize: "0.6875rem", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: theme.colors.textMuted, children: HEADING }), _jsx(Box, { flex: "1" }), hint && (_jsx(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 && (_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: "base" })] }, 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 0.12s ease", _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;