pixelize-design-library 3.0.1-beta.1 → 3.1.1

package/dist/Components/Apexcharts/ApexRadialChart/ApexRadialChart.js

@@ -0,0 +1,64 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const chartColorsFromTheme_1 = require("../../../Theme/tokens/builders/chartColorsFromTheme");
+const chartBase_1 = require("../chartBase");
+const LazyReactApexChart_1 = __importDefault(require("../LazyReactApexChart"));
+const ApexChartFallback_1 = __importDefault(require("../ApexChartFallback"));
+/** Radial/gauge chart (gauge/multi/semi); `hollowSize` is silently overridden to a fixed `"52%"` whenever `variant="multi"`. */
+const ApexRadialChart = ({ variant = "gauge", data, labels, title, titlePosition = "left", height = 320, width = "100%", colors, totalLabel = "Total", trackColor, hollowSize = "62%", }) => {
+    const { colors: palette } = (0, useCustomTheme_1.useCustomTheme)();
+    const ink = (0, chartColorsFromTheme_1.chartInk)(palette);
+    const chartId = `apex-radial-${(0, react_1.useId)().replace(/:/g, "")}`;
+    const seriesColors = (0, react_1.useMemo)(() => colors !== null && colors !== void 0 ? colors : (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette), [colors, palette]);
+    const options = (0, react_1.useMemo)(() => ({
+        chart: (0, chartBase_1.baseChart)(palette, { id: chartId, type: "radialBar" }),
+        colors: seriesColors,
+        labels: labels !== null && labels !== void 0 ? labels : [],
+        stroke: { lineCap: "round" },
+        plotOptions: {
+            radialBar: {
+                startAngle: variant === "semi" ? -90 : 0,
+                endAngle: variant === "semi" ? 90 : 360,
+                hollow: { size: variant === "multi" ? "52%" : hollowSize },
+                track: {
+                    background: trackColor !== null && trackColor !== void 0 ? trackColor : palette.backgroundColor.quaternary,
+                    strokeWidth: "100%",
+                    margin: variant === "multi" ? 6 : 0,
+                },
+                dataLabels: {
+                    name: { fontSize: "12px", fontFamily: "inherit", color: ink.muted, offsetY: variant === "semi" ? -8 : -4 },
+                    value: {
+                        fontSize: "22px",
+                        fontFamily: "inherit",
+                        fontWeight: 600,
+                        color: ink.text,
+                        offsetY: variant === "semi" ? -2 : 4,
+                        formatter: (val) => `${Math.round(val)}%`,
+                    },
+                    total: {
+                        show: variant === "multi",
+                        label: totalLabel,
+                        color: ink.muted,
+                        fontSize: "12px",
+                        formatter: (w) => {
+                            const totals = w.globals.seriesTotals;
+                            if (!totals.length)
+                                return "0%";
+                            return `${Math.round(totals.reduce((a, b) => a + b, 0) / totals.length)}%`;
+                        },
+                    },
+                },
+            },
+        },
+        title: { text: title, align: titlePosition, style: (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette) },
+        legend: { ...(0, chartBase_1.baseLegend)(palette, "bottom"), show: variant === "multi" },
+    }), [palette, chartId, variant, seriesColors, labels, title, titlePosition, totalLabel, trackColor, hollowSize, ink.muted, ink.text]);
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(ApexChartFallback_1.default, { height: height, width: width }), children: (0, jsx_runtime_1.jsx)(LazyReactApexChart_1.default, { options: options, series: data, type: "radialBar", height: height, width: width }) }) }));
+};
+exports.default = ApexRadialChart;

package/dist/Components/Apexcharts/ApexRadialChart/ApexRadialChartProps.d.ts

@@ -0,0 +1,27 @@
+/** "semi" draws a half-circle gauge; "multi" stacks several bars and forces its own hollow size (see `hollowSize`). */
+export type RadialChartVariant = "gauge" | "multi" | "semi";
+/** Props for the radial/gauge chart; `totalLabel` only renders when `variant="multi"`, which also ignores `hollowSize`. */
+export type ApexRadialChartProps = {
+    /** Defaults to "gauge"; see RadialChartVariant. */
+    variant?: RadialChartVariant;
+    /** One value per ring as a percentage (0-100); the centre label shows it as a rounded percent. */
+    data: number[];
+    /** Ring names, one per `data` value; shown in the gauge centre and in the "multi" legend. */
+    labels?: string[];
+    /** Heading above the chart, aligned by `titlePosition`. */
+    title?: string;
+    /** Horizontal alignment of the title. Defaults to "left". */
+    titlePosition?: "left" | "center" | "right";
+    /** Chart height as a px number or CSS string. Defaults to 320; also sizes the loading skeleton. */
+    height?: number | string;
+    /** Chart width as a px number or CSS string. Defaults to "100%"; also sizes the loading skeleton. */
+    width?: number | string;
+    /** Ring colours in order. Defaults to the theme's categorical palette. */
+    colors?: string[];
+    /** Caption for the centre average in the "multi" variant. Defaults to "Total". */
+    totalLabel?: string;
+    /** Colour of the unfilled ring track. Defaults to the theme's quaternary background. */
+    trackColor?: string;
+    /** Ignored when `variant="multi"` — the ring width is hardcoded to `"52%"` in that variant. */
+    hollowSize?: string;
+};

package/dist/Components/Apexcharts/LazyReactApexChart.d.ts

@@ -0,0 +1,2 @@
+declare const LazyReactApexChart: import("react").LazyExoticComponent<typeof import("react-apexcharts").default>;
+export default LazyReactApexChart;

package/dist/Components/Apexcharts/LazyReactApexChart.js

@@ -0,0 +1,40 @@
+"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 lazyWithRetry_1 = require("../../Utils/lazyWithRetry");
+// Keeps apexcharts/react-apexcharts (99% of the wrapper's weight) out of the main
+// bundle; shared so all six chart wrappers resolve the same dynamic chunk once.
+const LazyReactApexChart = (0, lazyWithRetry_1.lazyWithRetry)(() => Promise.resolve().then(() => __importStar(require("react-apexcharts"))));
+exports.default = LazyReactApexChart;

package/dist/Components/Apexcharts/chartBase.d.ts

@@ -0,0 +1,20 @@
+import type { ApexOptions } from "apexcharts";
+import type { CustomThemeProps } from "../../Theme/themeProps";
+type Palette = CustomThemeProps["colors"];
+/**
+ * Animations are the single biggest cost on a weak device, and ApexCharts re-runs them on
+ * every data change. Gate them on the same signals a browser already exposes rather than
+ * shipping a prop nobody sets: reduced-motion intent, core count, and device memory.
+ */
+export declare function prefersLightweightRendering(): boolean;
+export declare function baseChart(palette: Palette, overrides?: ApexOptions["chart"]): NonNullable<ApexOptions["chart"]>;
+export declare function baseGrid(palette: Palette, horizontal?: boolean): NonNullable<ApexOptions["grid"]>;
+export declare function baseLegend(palette: Palette, position?: ApexLegendPosition): NonNullable<ApexOptions["legend"]>;
+export declare function baseTooltip(palette: Palette): NonNullable<ApexOptions["tooltip"]>;
+export declare function baseAxisLabels(palette: Palette): {
+    colors: string;
+    fontSize: string;
+    fontFamily: string;
+};
+export type ApexLegendPosition = "top" | "right" | "bottom" | "left";
+export {};

package/dist/Components/Apexcharts/chartBase.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.prefersLightweightRendering = prefersLightweightRendering;
+exports.baseChart = baseChart;
+exports.baseGrid = baseGrid;
+exports.baseLegend = baseLegend;
+exports.baseTooltip = baseTooltip;
+exports.baseAxisLabels = baseAxisLabels;
+const chartColorsFromTheme_1 = require("../../Theme/tokens/builders/chartColorsFromTheme");
+const FONT = "inherit";
+/**
+ * Animations are the single biggest cost on a weak device, and ApexCharts re-runs them on
+ * every data change. Gate them on the same signals a browser already exposes rather than
+ * shipping a prop nobody sets: reduced-motion intent, core count, and device memory.
+ */
+function prefersLightweightRendering() {
+    var _a, _b;
+    if (typeof window === "undefined")
+        return true;
+    const reduced = (_b = (_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, "(prefers-reduced-motion: reduce)")) === null || _b === void 0 ? void 0 : _b.matches;
+    if (reduced)
+        return true;
+    const nav = window.navigator;
+    if (typeof nav.deviceMemory === "number" && nav.deviceMemory <= 4)
+        return true;
+    return typeof nav.hardwareConcurrency === "number" && nav.hardwareConcurrency <= 4;
+}
+function baseChart(palette, overrides = {}) {
+    const ink = (0, chartColorsFromTheme_1.chartInk)(palette);
+    const lightweight = prefersLightweightRendering();
+    return {
+        fontFamily: FONT,
+        foreColor: ink.muted,
+        background: "transparent",
+        toolbar: { show: false },
+        zoom: { enabled: false },
+        animations: lightweight
+            ? { enabled: false }
+            : { enabled: true, speed: 320, animateGradually: { enabled: false } },
+        redrawOnParentResize: true,
+        redrawOnWindowResize: true,
+        ...overrides,
+    };
+}
+function baseGrid(palette, horizontal = false) {
+    const ink = (0, chartColorsFromTheme_1.chartInk)(palette);
+    return {
+        borderColor: ink.grid,
+        strokeDashArray: 4,
+        xaxis: { lines: { show: horizontal } },
+        yaxis: { lines: { show: !horizontal } },
+        padding: { top: 8, right: 12, bottom: 0, left: 8 },
+    };
+}
+function baseLegend(palette, position = "bottom") {
+    const ink = (0, chartColorsFromTheme_1.chartInk)(palette);
+    return {
+        position,
+        horizontalAlign: position === "bottom" || position === "top" ? "center" : "left",
+        fontSize: "12px",
+        fontFamily: FONT,
+        labels: { colors: ink.muted, useSeriesColors: false },
+        markers: { size: 6, strokeWidth: 0, shape: "circle", offsetX: -3 },
+        itemMargin: { horizontal: 10, vertical: 4 },
+    };
+}
+function baseTooltip(palette) {
+    return {
+        theme: (0, chartColorsFromTheme_1.chartMode)(palette),
+        style: { fontSize: "12px", fontFamily: FONT },
+        fillSeriesColor: false,
+    };
+}
+function baseAxisLabels(palette) {
+    const ink = (0, chartColorsFromTheme_1.chartInk)(palette);
+    return { colors: ink.axis, fontSize: "12px", fontFamily: FONT };
+}

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

@@ -0,0 +1,14 @@
+import React from "react";
+import { chartMode } from "../../Theme/tokens/builders/chartColorsFromTheme";
+import { type AppOption } from "./AppSwitcherProps";
+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,58 @@
+"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;
+// NOTE: assigned over the WHOLE app list, never the filtered one, so searching can't 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,5 @@
+import React from "react";
+import { type AppSwitcherProps } from "./AppSwitcherProps";
+/** Top-bar grid button that opens a panel of suite apps to jump between, with optional search and keyboard shortcut. */
+declare const AppSwitcher: React.FC<AppSwitcherProps>;
+export default AppSwitcher;

package/dist/Components/AppSwitcher/AppSwitcher.js

@@ -0,0 +1,281 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const chartColorsFromTheme_1 = require("../../Theme/tokens/builders/chartColorsFromTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
+const Kbd_1 = __importDefault(require("../Kbd/Kbd"));
+const AppMark_1 = __importStar(require("./AppMark"));
+const AppSwitcherProps_1 = require("./AppSwitcherProps");
+const useAppSwitcherShortcut_1 = require("./useAppSwitcherShortcut");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const BACKGROUND_BORDER_COLOR_TRANSITION = (0, motion_1.transitionFor)(["background", "border-color"]);
+const BACKGROUND_TRANSITION = (0, motion_1.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 = (0, useCustomTheme_1.useCustomTheme)();
+    const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
+    const requestExclusiveOpen = (0, useExclusiveOverlay_1.useExclusiveOverlay)(isOpen, onClose);
+    const [query, setQuery] = (0, react_1.useState)("");
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
+    const searchRef = (0, react_1.useRef)(null);
+    const triggerRef = (0, react_1.useRef)(null);
+    const itemRefs = (0, react_1.useRef)([]);
+    const typeahead = (0, react_1.useRef)({ buffer: "", at: 0 });
+    (0, react_1.useEffect)(() => validate(apps), [apps]);
+    // Search is off while the panel's design settles: the app count alone no longer opens it. An
+    // explicit `isSearchable` still wins, so nothing about the prop changed.
+    const showSearch = isSearchable !== null && isSearchable !== void 0 ? isSearchable : (SEARCH_OPENS_BY_COUNT && apps.length >= searchThreshold);
+    const hues = (0, react_1.useMemo)(() => (0, AppMark_1.assignAppHues)(apps, (0, chartColorsFromTheme_1.chartMode)(theme.colors)), [apps, theme.colors]);
+    const visible = (0, react_1.useMemo)(() => (0, AppSwitcherProps_1.filterApps)(apps, query), [apps, query]);
+    const setOpen = (0, react_1.useCallback)((next) => {
+        if (next) {
+            requestExclusiveOpen();
+            onOpen();
+        }
+        else {
+            onClose();
+        }
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+    }, [onOpen, onClose, onOpenChange, requestExclusiveOpen]);
+    const closeAndRefocus = (0, react_1.useCallback)(() => {
+        var _a;
+        setOpen(false);
+        setQuery("");
+        (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [setOpen]);
+    (0, useAppSwitcherShortcut_1.useAppSwitcherShortcut)(shortcut, () => setOpen(true), !isOpen);
+    (0, react_1.useEffect)(() => {
+        if (!isOpen)
+            setQuery("");
+        setActiveIndex(0);
+    }, [isOpen]);
+    (0, react_1.useEffect)(() => setActiveIndex(0), [query]);
+    const focusItem = (0, react_1.useCallback)((next) => {
+        var _a;
+        setActiveIndex(next);
+        (_a = itemRefs.current[next]) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    // Read the focused row, not state: two keydowns in one React batch would both compute from a
+    // stale activeIndex, so holding an arrow key silently dropped moves.
+    const currentIndex = (0, react_1.useCallback)(() => {
+        const focused = itemRefs.current.findIndex((el) => el === document.activeElement);
+        return focused === -1 ? activeIndex : focused;
+    }, [activeIndex]);
+    const step = (0, react_1.useCallback)((delta) => {
+        const count = visible.length;
+        if (count === 0)
+            return;
+        focusItem(((currentIndex() + delta) % count + count) % count);
+    }, [currentIndex, visible.length, focusItem]);
+    const jumpToLetter = (0, react_1.useCallback)((char) => {
+        const now = Date.now();
+        const buffer = now - typeahead.current.at < 600 ? typeahead.current.buffer + char : char;
+        typeahead.current = { buffer, at: now };
+        const at = currentIndex();
+        const from = buffer.length > 1 ? at : at + 1;
+        const order = visible.map((_, i) => (from + i) % visible.length);
+        const hit = order.find((i) => visible[i].name.toLowerCase().startsWith(buffer));
+        if (hit !== undefined)
+            focusItem(hit);
+    }, [visible, currentIndex, focusItem]);
+    // Chakra parks focus on the panel itself, where no arrow handler lives; route the first press in.
+    const handlePanelKeyDown = (0, react_1.useCallback)((e) => {
+        if (itemRefs.current.includes(document.activeElement))
+            return;
+        if (visible.length === 0)
+            return;
+        if (["ArrowDown", "ArrowRight", "Home"].includes(e.key)) {
+            e.preventDefault();
+            focusItem(0);
+        }
+        else if (["ArrowUp", "ArrowLeft", "End"].includes(e.key)) {
+            e.preventDefault();
+            focusItem(visible.length - 1);
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            closeAndRefocus();
+        }
+    }, [visible.length, focusItem, closeAndRefocus]);
+    const handleItemKeyDown = (0, react_1.useCallback)((e, app) => {
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            step(COLUMNS);
+        }
+        else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            step(-COLUMNS);
+        }
+        else if (e.key === "ArrowRight") {
+            e.preventDefault();
+            step(1);
+        }
+        else if (e.key === "ArrowLeft") {
+            e.preventDefault();
+            step(-1);
+        }
+        else if (e.key === "Home") {
+            e.preventDefault();
+            focusItem(0);
+        }
+        else if (e.key === "End") {
+            e.preventDefault();
+            focusItem(visible.length - 1);
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            closeAndRefocus();
+        }
+        else if (e.key === " " && !app.locked) {
+            e.preventDefault();
+            e.currentTarget.click();
+        }
+        else if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey)
+            jumpToLetter(e.key.toLowerCase());
+    }, [step, focusItem, visible.length, closeAndRefocus, jumpToLetter]);
+    const handleSelect = (app, e) => {
+        if (app.locked) {
+            e.preventDefault();
+            return;
+        }
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(app, e);
+        if (!e.defaultPrevented)
+            setOpen(false);
+    };
+    const nothingToSwitchTo = apps.length === 0 || (hideWhenAlone && apps.every((a) => a.id === currentAppId));
+    if (nothingToSwitchTo)
+        return null;
+    const rowHoverBg = (0, rowStates_1.listRowBackgrounds)(theme.colors).active;
+    const footerRule = (0, outlineRung_1.ruleInk)(theme.colors.boxborder[200], [theme.colors.backgroundColor.subtle], outlineRung_1.CHROME_RULE);
+    // NOTE: neutral, not backgroundColor.tertiary — that rung is brand-tinted and lifting it painted a saturated block.
+    const currentBg = (0, outlineRung_1.neutralStep)(theme.colors.backgroundColor.light, outlineRung_1.MIN_PERCEPTIBLE_STEP);
+    const currentBar = (0, outlineRung_1.liftToContrast)(theme.colors.accentText, currentBg, outlineRung_1.AA_NON_TEXT);
+    // NOTE: a derived surface is outside what withSurfaceRungs settled, so its ink is resolved here.
+    const currentName = (0, outlineRung_1.liftToContrast)(theme.colors.text[900], currentBg, accentText_1.AA_NORMAL_TEXT);
+    const currentSub = (0, outlineRung_1.liftToContrast)(theme.colors.textMuted, currentBg, accentText_1.AA_NORMAL_TEXT);
+    const width = panelWidth !== null && panelWidth !== void 0 ? panelWidth : "28rem";
+    const hint = shortcut && showShortcutHint ? (0, AppSwitcherProps_1.formatShortcut)(shortcut) : null;
+    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onOpen: () => setOpen(true), onClose: () => { setOpen(false); setQuery(""); }, placement: "bottom-end", initialFocusRef: showSearch ? searchRef : undefined, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Flex, { ref: triggerRef, as: "button", type: "button", "aria-label": ariaLabel, align: "center", justify: "center", boxSize: s.trigger, borderRadius: "lg", border: "1px solid", borderColor: isOpen ? theme.colors.boxborder[500] : theme.colors.boxborder[200], bg: isOpen ? theme.colors.backgroundColor.tertiary : "transparent", color: isOpen ? theme.colors.text[900] : theme.colors.textMuted, cursor: "pointer", transition: BACKGROUND_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: (0, jsx_runtime_1.jsx)(lucide_react_1.Grip, { size: s.icon + 1 }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: width, maxW: "calc(100vw - 1.5rem)", textAlign: "start", onKeyDown: handlePanelKeyDown, bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", boxShadow: "float", _focus: { outline: "none", boxShadow: "float" }, 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: "xs-minus", 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)(Kbd_1.default, { size: "xs", children: hint })] }), showSearch && ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 3, pb: 2, children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, color: theme.colors.textMuted }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: searchRef, value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search apps", borderRadius: "lg", "aria-label": "Search apps", onKeyDown: (e) => {
+                                            if (e.key === "ArrowDown" && visible.length > 0) {
+                                                e.preventDefault();
+                                                focusItem(0);
+                                            }
+                                            else if (e.key === "Escape") {
+                                                e.preventDefault();
+                                                if (query)
+                                                    setQuery("");
+                                                else
+                                                    closeAndRefocus();
+                                            }
+                                        } })] }) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { role: "menu", "aria-label": HEADING, maxH: maxHeight, overflowY: "auto", px: 2, pb: 2, display: "grid", gridTemplateColumns: `repeat(${COLUMNS}, minmax(0, 1fr))`, gap: "2px", children: [isLoading
+                                    ? [0, 1, 2, 3].map((i) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, px: 2, py: 2, minH: s.row, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { boxSize: s.mark, borderRadius: "lg" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: "0.75rem", flex: "1", borderRadius: "lg" })] }, i)))
+                                    : visible.map((app, idx) => {
+                                        var _a;
+                                        const isCurrent = app.id === currentAppId;
+                                        const interactive = !isCurrent && !app.locked;
+                                        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: interactive ? "a" : "div", role: "menuitem", ref: (el) => { itemRefs.current[idx] = el; }, tabIndex: idx === activeIndex ? 0 : -1, "aria-current": isCurrent ? "true" : undefined, "aria-disabled": app.locked ? true : undefined, title: app.locked ? ((_a = app.lockedReason) !== null && _a !== void 0 ? _a : `${app.name} is not available on your plan`) : undefined, ...(interactive
+                                                ? {
+                                                    href: app.url,
+                                                    target: "_blank",
+                                                    rel: "noopener noreferrer",
+                                                }
+                                                : {}), align: "center", gap: 3, minH: s.row, px: 2, py: 2, borderRadius: "lg", textDecoration: "none", cursor: interactive ? "pointer" : "default", bg: isCurrent ? currentBg : "transparent", position: "relative", 
+                                            // Full height, taking the row's own `lg` radius on its outer corners so the
+                                            // rail follows the row's curve instead of cutting across it.
+                                            _before: isCurrent
+                                                ? {
+                                                    content: '""',
+                                                    position: "absolute",
+                                                    insetInlineStart: 0,
+                                                    insetBlock: 0,
+                                                    width: "3px",
+                                                    borderStartStartRadius: "lg",
+                                                    borderEndStartRadius: "lg",
+                                                    bg: currentBar,
+                                                }
+                                                : undefined, transition: BACKGROUND_TRANSITION, _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;