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

package/dist/esm/Components/Apexcharts/ApexAreaChart/ApexAreaChart.js

@@ -1,16 +1,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import ReactApexChart from "react-apexcharts";
+import { Suspense, useId, useMemo } from "react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { baseAxisLabels, baseChart, baseGrid, baseLegend, baseTooltip } from "../chartBase.js";
+import LazyReactApexChart from "../LazyReactApexChart.js";
+import ApexChartFallback from "../ApexChartFallback.js";
+/** Filled line chart (basic/stacked/gradient/sparkline); unlike `ApexLineChart`, `data`/`series` are read fresh via `useMemo` every render, not frozen at mount. */
 const ApexAreaChart = ({ variant = "basic", data, series, labels, title, titlePosition = "left", height = 320, width = "100%", colors, showLegend = true, legendPosition = "bottom", yAxisFormatter, }) => {
     const { colors: palette } = useCustomTheme();
+    const chartId = `apex-area-${useId().replace(/:/g, "")}`;
     const seriesColors = useMemo(() => colors !== null && colors !== void 0 ? colors : getDefaultSeriesColors(palette), [colors, palette]);
     const resolvedSeries = useMemo(() => series !== null && series !== void 0 ? series : [{ name: title !== null && title !== void 0 ? title : "Series 1", data: data !== null && data !== void 0 ? data : [] }], [series, data, title]);
     const isSpark = variant === "sparkline";
     const options = useMemo(() => ({
         chart: baseChart(palette, {
+            id: chartId,
             type: "area",
             stacked: variant === "stacked",
             sparkline: { enabled: isSpark },
@@ -49,6 +53,7 @@ const ApexAreaChart = ({ variant = "basic", data, series, labels, title, titlePo
         tooltip: baseTooltip(palette),
     }), [
         palette,
+        chartId,
         variant,
         isSpark,
         seriesColors,
@@ -60,6 +65,6 @@ const ApexAreaChart = ({ variant = "basic", data, series, labels, title, titlePo
         resolvedSeries.length,
         yAxisFormatter,
     ]);
-    return (_jsx("div", { children: _jsx(ReactApexChart, { options: options, series: resolvedSeries, type: "area", height: height, width: width }) }));
+    return (_jsx("div", { children: _jsx(Suspense, { fallback: _jsx(ApexChartFallback, { height: height, width: width }), children: _jsx(LazyReactApexChart, { options: options, series: resolvedSeries, type: "area", height: height, width: width }) }) }));
 };
 export default ApexAreaChart;

package/dist/esm/Components/Apexcharts/ApexBarChart/ApexBarChart.js

@@ -1,12 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import ReactApexChart from "react-apexcharts";
+import { Suspense, useId, useMemo } from "react";
 import { useTheme } from "@chakra-ui/react";
 import { chartAxisLabelColor, getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { baseAxisLabels, baseChart, baseGrid, baseLegend, baseTooltip } from "../chartBase.js";
+import LazyReactApexChart from "../LazyReactApexChart.js";
+import ApexChartFallback from "../ApexChartFallback.js";
+/** Bar chart wrapper around react-apexcharts (horizontal/stacked/distributed via props), themed via chartColorsFromTheme + chartBase. */
 export default function ApexBarChart({ data, labels, title, titlePosition, height = 400, width = 500, barColor, xAxisStyle, yAxisStyle, titleStyle, horizontal = false, distributed = false, seriesName = "Data", series, stacked = false, showLegend, legendPosition = "bottom", }) {
     const theme = useTheme();
     const palette = theme.colors;
+    const chartId = `apex-bar-${useId().replace(/:/g, "")}`;
     const seriesColors = useMemo(() => getDefaultSeriesColors(palette), [palette]);
     const resolvedBarColors = useMemo(() => barColor !== null && barColor !== void 0 ? barColor : (distributed ? seriesColors : [seriesColors[1]]), [barColor, distributed, seriesColors]);
     const axisColor = chartAxisLabelColor(palette);
@@ -14,7 +17,7 @@ export default function ApexBarChart({ data, labels, title, titlePosition, heigh
     const mergedYAxis = useMemo(() => { var _a; return ({ ...baseAxisLabels(palette), ...yAxisStyle, colors: (_a = yAxisStyle === null || yAxisStyle === void 0 ? void 0 : yAxisStyle.color) !== null && _a !== void 0 ? _a : axisColor }); }, [palette, axisColor, yAxisStyle]);
     const mergedTitleStyle = useMemo(() => mergeChartTitleStyle(palette, titleStyle), [palette, titleStyle]);
     const options = useMemo(() => ({
-        chart: baseChart(palette, { type: "bar", stacked }),
+        chart: baseChart(palette, { id: chartId, type: "bar", stacked }),
         plotOptions: {
             bar: {
                 borderRadius: 4,
@@ -43,6 +46,7 @@ export default function ApexBarChart({ data, labels, title, titlePosition, heigh
         colors: resolvedBarColors,
     }), [
         palette,
+        chartId,
         labels,
         mergedXAxis,
         mergedYAxis,
@@ -57,6 +61,6 @@ export default function ApexBarChart({ data, labels, title, titlePosition, heigh
         legendPosition,
         series,
     ]);
-    const resolvedSeries = series !== null && series !== void 0 ? series : [{ name: seriesName, data: data !== null && data !== void 0 ? data : [] }];
-    return (_jsx("div", { children: _jsx(ReactApexChart, { options: options, series: resolvedSeries, type: "bar", height: height, width: width }) }));
+    const resolvedSeries = useMemo(() => series !== null && series !== void 0 ? series : [{ name: seriesName, data: data !== null && data !== void 0 ? data : [] }], [series, seriesName, data]);
+    return (_jsx("div", { children: _jsx(Suspense, { fallback: _jsx(ApexChartFallback, { height: height, width: width }), children: _jsx(LazyReactApexChart, { options: options, series: resolvedSeries, type: "bar", height: height, width: width }) }) }));
 }

package/dist/esm/Components/Apexcharts/ApexChartFallback.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Skeletons from "../Skeletons/Skeletons.js";
+/** Suspense fallback while the lazy react-apexcharts chunk loads — reserves the chart's own footprint. */
+const ApexChartFallback = ({ height = "320px", width = "100%" }) => (_jsx(Skeletons, { type: "skeleton", height: height, width: width, borderRadius: "lg" }));
+export default ApexChartFallback;

package/dist/esm/Components/Apexcharts/ApexLineChart/ApexLineChart.js

@@ -1,13 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from "react";
-import ReactApexChart from "react-apexcharts";
+import { Suspense, useEffect, useId, useMemo, useRef, useState } from "react";
 import { useTheme } from "@chakra-ui/react";
 import ToolTip from "../../ToolTip/ToolTip.js";
 import { getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { baseAxisLabels, baseChart, baseGrid, baseTooltip } from "../chartBase.js";
+import LazyReactApexChart from "../LazyReactApexChart.js";
+import ApexChartFallback from "../ApexChartFallback.js";
+/** Line chart wrapper around react-apexcharts, themed via chartColorsFromTheme + chartBase. */
 const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePosition = "center", titleStyle, compact = false, toolbarBreakpointPct = 0.6, titleClampLines, showTitleEllipsis = true, showSeries = true, series: seriesNames, variant = "basic", }) => {
     const theme = useTheme();
     const palette = theme.colors;
+    const chartId = `apex-line-${useId().replace(/:/g, "")}`;
     const resolvedLineColors = lineColors !== null && lineColors !== void 0 ? lineColors : getDefaultSeriesColors(palette);
     const resolvedTitleStyle = useMemo(() => mergeChartTitleStyle(palette, titleStyle), [palette, titleStyle]);
     const initialName = Array.isArray(seriesNames) && seriesNames.length ? seriesNames[0] : "Series 1";
@@ -81,6 +84,7 @@ const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePo
     const showToolbar = !isSmall && ratio >= toolbarBreakpointPct;
     const options = useMemo(() => ({
         chart: baseChart(palette, {
+            id: chartId,
             type: "line",
             animations: variant === "realtime"
                 ? { enabled: true, speed: 1000, dynamicAnimation: { speed: 1000 } }
@@ -117,6 +121,7 @@ const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePo
         },
     }), [
         variant,
+        chartId,
         showToolbar,
         resolvedLineColors,
         labels,
@@ -148,6 +153,6 @@ const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePo
                         wordBreak: clampLines > 1 ? "break-word" : undefined,
                         lineHeight: clampLines > 1 ? "1.2em" : undefined,
                         maxHeight: clampLines > 1 ? `${1.2 * clampLines}em` : undefined,
-                    }, children: title }) })), _jsx(ReactApexChart, { options: options, series: apexSeries, type: "line", height: height, width: width })] }));
+                    }, children: title }) })), _jsx(Suspense, { fallback: _jsx(ApexChartFallback, { height: height, width: width }), children: _jsx(LazyReactApexChart, { options: options, series: apexSeries, type: "line", height: height, width: width }) })] }));
 };
 export default ApexLineChart;

package/dist/esm/Components/Apexcharts/ApexPieChart/ApexPieChart.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import ReactApexChart from "react-apexcharts";
+import { Suspense, useId, useMemo } from "react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { chartInk, chartMode, getDefaultSeriesColors, labelOnSeries, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { baseChart, baseLegend, baseTooltip } from "../chartBase.js";
+import LazyReactApexChart from "../LazyReactApexChart.js";
+import ApexChartFallback from "../ApexChartFallback.js";
 const getValidLegendPosition = (position) => {
     const validPositions = ["left", "right", "top", "bottom"];
     if (validPositions.includes(position)) {
@@ -12,11 +13,13 @@ const getValidLegendPosition = (position) => {
     console.warn(`Invalid legend position: ${position}. Defaulting to 'bottom'.`);
     return "bottom";
 };
+/** Pie/donut chart wrapper around react-apexcharts, themed via chartColorsFromTheme + chartBase. */
 const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutColors, chartColor, titlePosition = "center", titleStyle, legendPosition = "bottom", legendStyle, variant = "pie", showDataLabels = true, minLabelPercent = 8, surfaceColor, donutSize = "68%", totalLabel = "Total", labelPlacement = "auto", }) => {
     var _a;
     const { colors: palette } = useCustomTheme();
     const ink = chartInk(palette);
     const gap = surfaceColor !== null && surfaceColor !== void 0 ? surfaceColor : ink.surface;
+    const chartId = `apex-pie-${useId().replace(/:/g, "")}`;
     const mergedTitleStyle = useMemo(() => mergeChartTitleStyle(palette, titleStyle), [palette, titleStyle]);
     const seriesColors = useMemo(() => { var _a; return (_a = chartColor !== null && chartColor !== void 0 ? chartColor : donutColors) !== null && _a !== void 0 ? _a : getDefaultSeriesColors(palette); }, [chartColor, donutColors, palette]);
     const labelInks = useMemo(() => seriesColors.map((c) => labelOnSeries(c, palette)), [seriesColors, palette]);
@@ -142,6 +145,7 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
             states: { hover: { filter: { type: "lighten", value: 0.08 } } },
             ...extraOptions,
             chart: baseChart(palette, {
+                id: chartId,
                 type: isDonut ? "donut" : "pie",
                 ...((_a = extraOptions.chart) !== null && _a !== void 0 ? _a : {}),
             }),
@@ -159,6 +163,7 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
         };
     }, [
         variant,
+        chartId,
         labels,
         seriesColors,
         legend,
@@ -176,6 +181,6 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
         ink.muted,
         ink.text,
     ]);
-    return (_jsx("div", { children: _jsx(ReactApexChart, { options: options, series: data, type: (_a = options.chart) === null || _a === void 0 ? void 0 : _a.type, height: height, width: width }) }));
+    return (_jsx("div", { children: _jsx(Suspense, { fallback: _jsx(ApexChartFallback, { height: height, width: width }), children: _jsx(LazyReactApexChart, { options: options, series: data, type: (_a = options.chart) === null || _a === void 0 ? void 0 : _a.type, height: height, width: width }) }) }));
 };
 export default ApexPieChart;

package/dist/esm/Components/Apexcharts/ApexPolarCharts/ApexPolarCharts.js

@@ -1,22 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import ReactApexChart from "react-apexcharts";
+import { Suspense, useId, useMemo } from "react";
 import { useTheme } from "@chakra-ui/react";
 import { chartInk, chartMode, getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { baseChart, baseLegend, baseTooltip } from "../chartBase.js";
+import LazyReactApexChart from "../LazyReactApexChart.js";
+import ApexChartFallback from "../ApexChartFallback.js";
+/** Polar-area chart wrapper around react-apexcharts, themed via chartColorsFromTheme + chartBase. */
 const ApexPolarChart = ({ data, labels, title, height = 400, width = 500, chartColors, titlePosition = "center", titleStyle, legendStyle, variant = "basic", }) => {
     const theme = useTheme();
     const palette = theme.colors;
     const ink = chartInk(palette);
+    const chartId = `apex-polar-${useId().replace(/:/g, "")}`;
     const mergedTitleStyle = useMemo(() => mergeChartTitleStyle(palette, titleStyle), [palette, titleStyle]);
     const mergedLegendStyle = useMemo(() => {
         const defaults = {
-            colors: palette.text[900],
+            colors: ink.text,
             position: "bottom",
             useSeriesColors: false,
         };
         return { ...defaults, ...legendStyle };
-    }, [palette, legendStyle]);
+    }, [legendStyle, ink.text]);
     const resolvedChartColors = useMemo(() => chartColors !== null && chartColors !== void 0 ? chartColors : getDefaultSeriesColors(palette), [chartColors, palette]);
     const options = useMemo(() => {
         let extraOptions = {};
@@ -44,7 +47,7 @@ const ApexPolarChart = ({ data, labels, title, height = 400, width = 500, chartC
                 break;
         }
         return {
-            chart: baseChart(palette, { type: "polarArea" }),
+            chart: baseChart(palette, { id: chartId, type: "polarArea" }),
             labels,
             colors: resolvedChartColors,
             legend: {
@@ -73,6 +76,7 @@ const ApexPolarChart = ({ data, labels, title, height = 400, width = 500, chartC
         };
     }, [
         variant,
+        chartId,
         labels,
         resolvedChartColors,
         mergedLegendStyle,
@@ -83,6 +87,6 @@ const ApexPolarChart = ({ data, labels, title, height = 400, width = 500, chartC
         ink.surface,
         ink.grid,
     ]);
-    return (_jsx("div", { children: _jsx(ReactApexChart, { options: options, series: data, type: "polarArea", height: height, width: width }) }));
+    return (_jsx("div", { children: _jsx(Suspense, { fallback: _jsx(ApexChartFallback, { height: height, width: width }), children: _jsx(LazyReactApexChart, { options: options, series: data, type: "polarArea", height: height, width: width }) }) }));
 };
 export default ApexPolarChart;

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

@@ -1,15 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import ReactApexChart from "react-apexcharts";
+import { Suspense, useId, useMemo } from "react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { chartInk, getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { baseChart, baseLegend } from "../chartBase.js";
+import LazyReactApexChart from "../LazyReactApexChart.js";
+import ApexChartFallback from "../ApexChartFallback.js";
+/** 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 } = useCustomTheme();
     const ink = chartInk(palette);
+    const chartId = `apex-radial-${useId().replace(/:/g, "")}`;
     const seriesColors = useMemo(() => colors !== null && colors !== void 0 ? colors : getDefaultSeriesColors(palette), [colors, palette]);
     const options = useMemo(() => ({
-        chart: baseChart(palette, { type: "radialBar" }),
+        chart: baseChart(palette, { id: chartId, type: "radialBar" }),
         colors: seriesColors,
         labels: labels !== null && labels !== void 0 ? labels : [],
         stroke: { lineCap: "round" },
@@ -50,7 +53,7 @@ const ApexRadialChart = ({ variant = "gauge", data, labels, title, titlePosition
         },
         title: { text: title, align: titlePosition, style: mergeChartTitleStyle(palette) },
         legend: { ...baseLegend(palette, "bottom"), show: variant === "multi" },
-    }), [palette, variant, seriesColors, labels, title, titlePosition, totalLabel, trackColor, hollowSize, ink.muted, ink.text]);
-    return (_jsx("div", { children: _jsx(ReactApexChart, { options: options, series: data, type: "radialBar", height: height, width: width }) }));
+    }), [palette, chartId, variant, seriesColors, labels, title, titlePosition, totalLabel, trackColor, hollowSize, ink.muted, ink.text]);
+    return (_jsx("div", { children: _jsx(Suspense, { fallback: _jsx(ApexChartFallback, { height: height, width: width }), children: _jsx(LazyReactApexChart, { options: options, series: data, type: "radialBar", height: height, width: width }) }) }));
 };
 export default ApexRadialChart;

package/dist/esm/Components/Apexcharts/LazyReactApexChart.js

@@ -0,0 +1,5 @@
+import { lazyWithRetry } from "../../Utils/lazyWithRetry.js";
+// 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 = lazyWithRetry(() => import("react-apexcharts"));
+export default LazyReactApexChart;

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

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