@vamos-ui/react 0.0.0-stage → 0.3.0

package/dist/components/command.js

@@ -0,0 +1,498 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { Command as Cmdk } from "cmdk";
+import { ArrowLeft, ChevronRight, CornerDownLeft, Search } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useLocale } from "../lib/locale.js";
+import { useCan, useVamos } from "../lib/provider.js";
+import { cmdkFilter, highlightParts } from "../lib/text.js";
+import { useLatest } from "../lib/use-controllable-state.js";
+import { isApplePlatform, matchesShortcut, parseShortcut } from "../lib/use-hotkeys.js";
+import { itemSlots, itemVariants } from "../lib/variants.js";
+import { isAbsoluteHref } from "../lib/nav.js";
+import { Dialog, DialogContent, DialogTitle } from "./dialog.js";
+import { KbdGroup } from "./kbd.js";
+import { Badge } from "./badge.js";
+import { Spinner } from "./spinner.js";
+import { Progress } from "./progress.js";
+import { EmptyState } from "./empty-state.js";
+const commandLabels = {
+    label: "Command palette",
+    placeholder: "Type a command or search…",
+    empty: "No results found.",
+    noResultsFor: "No results for “{query}”",
+    results: "{count, plural, one {# result} other {# results}}",
+    recent: "Recent",
+    navigate: "navigate",
+    select: "select",
+    back: "back",
+    close: "close",
+    sourceError: "Couldn't load {group}.",
+    loading: "Searching…",
+};
+/**
+ * A searchable list of actions (WAI-ARIA combobox + listbox). Filtering folds text for the
+ * current locale, so "istanbul" finds "İstanbul" and "isik" finds "ışık".
+ *
+ * ```tsx
+ * <Command>
+ *   <CommandInput />
+ *   <CommandList>
+ *     <CommandEmpty />
+ *     <CommandGroup heading="Actions">
+ *       <CommandItem icon={<FilePlus2 />} shortcut="mod+shift+n" onSelect={newPost}>New post</CommandItem>
+ *     </CommandGroup>
+ *   </CommandList>
+ * </Command>
+ * ```
+ */
+export const Command = React.forwardRef(function Command({ className, filter, label, loop = true, vimBindings = false, labels, ...props }, ref) {
+    const { locale } = useLocale();
+    const t = useLabels("command", commandLabels, labels);
+    const defaultFilter = React.useMemo(() => cmdkFilter(locale), [locale]);
+    return (_jsx(Cmdk, { ref: ref, "data-slot": "command", label: label ?? t("label"), filter: filter ?? defaultFilter, loop: loop, vimBindings: vimBindings, className: cn("vui-command flex min-h-0 w-full flex-col overflow-hidden text-fg", className), ...props }));
+});
+/** The search field. Placeholder from the dictionary (`command.placeholder`). */
+export const CommandInput = React.forwardRef(function CommandInput({ className, chip, end, placeholder, labels, ...props }, ref) {
+    const t = useLabels("command", commandLabels, labels);
+    return (_jsxs("div", { "data-slot": "command-input", className: "flex items-center gap-2.5 border-b border-line px-4", children: [_jsx(Search, { "aria-hidden": true, className: "size-4 shrink-0 text-fg-subtle" }), chip ? (_jsx("span", { "data-slot": "command-chip", className: "inline-flex max-w-[40%] shrink-0 items-center gap-1 truncate rounded-ui-sm bg-selected px-2 py-0.5 text-xs font-medium text-fg-muted", children: chip })) : null, _jsx(Cmdk.Input, { ref: ref, placeholder: placeholder ?? t("placeholder"), className: cn("h-[calc(var(--control-h)+0.75rem)] min-w-0 flex-1 bg-transparent text-[15px] text-fg outline-none placeholder:text-fg-subtle", className), ...props }), end] }));
+});
+/** The scrolling listbox. */
+export const CommandList = React.forwardRef(function CommandList({ className, ...props }, ref) {
+    return (_jsx(Cmdk.List, { ref: ref, "data-slot": "command-list", className: cn("max-h-[min(26rem,60dvh)] min-h-0 scroll-py-2 overflow-y-auto overscroll-contain p-1.5 outline-none", className), ...props }));
+});
+/** Shown when nothing matches. Default text from the dictionary (`command.empty`). */
+export const CommandEmpty = React.forwardRef(function CommandEmpty({ className, children, labels, ...props }, ref) {
+    const t = useLabels("command", commandLabels, labels);
+    return (_jsx(Cmdk.Empty, { ref: ref, "data-slot": "command-empty", className: cn("px-3 py-8 text-center text-sm text-fg-muted", className), ...props, children: children ?? t("empty") }));
+});
+/** A loading row (async results). */
+export const CommandLoading = React.forwardRef(function CommandLoading({ className, children, labels, label, ...props }, ref) {
+    const t = useLabels("command", commandLabels, labels);
+    return (_jsx(Cmdk.Loading, { ref: ref, "data-slot": "command-loading", label: label ?? t("loading"), className: cn("flex items-center gap-2 px-3 py-2.5 text-[13px] text-fg-muted", className), ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "xs" }), " ", t("loading")] })) }));
+});
+/** A titled group of items. */
+export const CommandGroup = React.forwardRef(function CommandGroup({ className, ...props }, ref) {
+    return (_jsx(Cmdk.Group, { ref: ref, "data-slot": "command-group", className: cn("[&:not(:first-child)]:mt-1.5", "[&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:pt-2 [&_[cmdk-group-heading]]:pb-1.5", "[&_[cmdk-group-heading]]:text-[11px] [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:tracking-[0.04em] [&_[cmdk-group-heading]]:text-fg-subtle", className), ...props }));
+});
+/** A hairline between groups. */
+export const CommandSeparator = React.forwardRef(function CommandSeparator({ className, ...props }, ref) {
+    // Decorative: role="separator" is not an allowed child of the listbox (axe aria-required-children);
+    // the group headings already tell screen readers where a section starts.
+    return _jsx(Cmdk.Separator, { ref: ref, "aria-hidden": true, "data-slot": "command-separator", className: cn("-mx-1.5 my-1.5 h-px bg-line", className), ...props });
+});
+/** One selectable row. Highlighted with the arrow keys; Enter or click runs `onSelect`. */
+export const CommandItem = React.forwardRef(function CommandItem({ className, icon, description, shortcut, badge, chevron, loading, children, ...props }, ref) {
+    return (_jsxs(Cmdk.Item, { ref: ref, "data-slot": "command-item", "aria-busy": loading || undefined, className: cn(itemVariants({ size: "md" }), "min-h-[calc(var(--control-h)*0.95)] gap-2.5 px-2.5 data-[selected=true]:bg-selected", className), ...props, children: [loading ? (_jsx(Spinner, { size: "xs", className: "shrink-0" })) : icon ? (_jsx("span", { "aria-hidden": true, className: cn("flex shrink-0 items-center text-fg-muted", description && "self-start pt-0.5"), children: icon })) : null, _jsxs("span", { className: itemSlots.label, children: [children, description ? _jsx("span", { className: cn(itemSlots.description, "mt-0.5 truncate"), children: description }) : null] }), badge != null ? _jsx("span", { className: "ms-auto flex shrink-0 items-center ps-3", children: badge }) : null, shortcut ? _jsx(CommandShortcut, { keys: shortcut, className: badge == null ? "ms-auto" : undefined }) : null, chevron ? _jsx(ChevronRight, { "aria-hidden": true, className: cn("size-3.5! shrink-0 text-fg-subtle rtl:-scale-x-100", !shortcut && badge == null && "ms-auto") }) : null] }));
+});
+const MODIFIER_KEYS = /^(mod|ctrl|control|meta|cmd|command|alt|option|shift)$/i;
+/**
+ * Shortcut keycaps at the end of an item. A string or an array with modifiers is one combination
+ * (`"mod+k"`, `["mod","k"]`); an array of plain keys is a sequence (`["g","o"]` → G O).
+ */
+export function CommandShortcut({ keys, className }) {
+    const sequence = Array.isArray(keys) && keys.length > 1 && !keys.some((k) => MODIFIER_KEYS.test(k));
+    return (_jsx(KbdGroup, { keys: sequence ? keys : Array.isArray(keys) ? keys.join("+") : keys, size: "sm", variant: "ghost", className: cn("shrink-0 ps-3", className) }));
+}
+/**
+ * Command inside a top-anchored dialog (fullscreen on phones). Focus goes to the input; Esc closes
+ * and returns focus to whatever opened it.
+ *
+ * ```tsx
+ * const [open, setOpen] = React.useState(false);
+ * useHotkeys("mod+k", () => setOpen((o) => !o));
+ * <CommandDialog open={open} onOpenChange={setOpen}>
+ *   <CommandInput />
+ *   <CommandList>…</CommandList>
+ * </CommandDialog>
+ * ```
+ */
+export function CommandDialog({ size = "lg", title, commandProps, className, labels, children, ...dialogProps }) {
+    const t = useLabels("command", commandLabels, labels);
+    return (_jsx(Dialog, { ...dialogProps, children: _jsxs(DialogContent, { size: size === "md" ? "md" : "lg", mobile: "fullscreen", hideClose: true, "data-command-size": size, className: cn("vui-command-dialog p-0", className), children: [_jsx(DialogTitle, { className: "sr-only", children: title ?? t("label") }), _jsx(Command, { labels: labels, ...commandProps, children: children })] }) }));
+}
+/**
+ * A command store (`useSyncExternalStore`). App shells create one from their app definitions;
+ * pages add to it with `useRegisterCommands`.
+ */
+export function createCommandRegistry(init = {}) {
+    const regs = new Map();
+    const sources = new Map();
+    const listeners = new Set();
+    let actionsSnap = [];
+    let sourcesSnap = [];
+    const rebuild = () => {
+        const byId = new Map();
+        for (const list of regs.values())
+            for (const a of list)
+                byId.set(a.id, a);
+        actionsSnap = [...byId.values()];
+        const seen = new Map();
+        for (const s of sources.values())
+            seen.set(s.id, s);
+        sourcesSnap = [...seen.values()];
+        listeners.forEach((l) => l());
+    };
+    const registry = {
+        register(actions) {
+            const key = Symbol("commands");
+            regs.set(key, actions);
+            rebuild();
+            return () => {
+                if (regs.delete(key))
+                    rebuild();
+            };
+        },
+        registerSource(source) {
+            const key = Symbol("source");
+            sources.set(key, source);
+            rebuild();
+            return () => {
+                if (sources.delete(key))
+                    rebuild();
+            };
+        },
+        getActions: () => actionsSnap,
+        getSources: () => sourcesSnap,
+        subscribe(l) {
+            listeners.add(l);
+            return () => listeners.delete(l);
+        },
+    };
+    if (init.actions?.length)
+        registry.register(init.actions);
+    for (const s of init.sources ?? [])
+        registry.registerSource(s);
+    return registry;
+}
+const PaletteContext = React.createContext(null);
+const allowedBy = (a, can) => !a.permission || (Array.isArray(a.permission) ? a.permission : [a.permission]).every((p) => can(p));
+const toShortcut = (s) => (Array.isArray(s) ? s.join("+") : s);
+const RECENT_KEY = "ui-cmd-recent";
+function readRecents() {
+    try {
+        const raw = localStorage.getItem(RECENT_KEY);
+        const v = raw ? JSON.parse(raw) : [];
+        return Array.isArray(v) ? v.filter((x) => typeof x === "string").slice(0, 8) : [];
+    }
+    catch {
+        return [];
+    }
+}
+function pushRecent(id) {
+    try {
+        const next = [id, ...readRecents().filter((x) => x !== id)].slice(0, 8);
+        localStorage.setItem(RECENT_KEY, JSON.stringify(next));
+    }
+    catch {
+        /* storage unavailable */
+    }
+}
+function isTyping(el) {
+    const t = el;
+    if (!t?.tagName)
+        return false;
+    return t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT" || t.isContentEditable;
+}
+/**
+ * Holds the command registry, the palette's open state and the single global `keydown` listener
+ * (`mod+k` plus commands marked `global`). Inside inputs only shortcuts with `mod` fire. App shell
+ * mounts one; mount it yourself for a standalone palette.
+ */
+export function CommandProvider({ registry: registryProp, actions, sources, shortcut = "mod+k", open: openProp, defaultOpen = false, onOpenChange, children }) {
+    const [ownRegistry] = React.useState(() => createCommandRegistry());
+    const registry = registryProp ?? ownRegistry;
+    const [openState, setOpenState] = React.useState(defaultOpen);
+    const isOpen = openProp ?? openState;
+    const onOpenChangeRef = useLatest(onOpenChange);
+    const setOpen = React.useCallback((o) => {
+        if (openProp === undefined)
+            setOpenState(o);
+        onOpenChangeRef.current?.(o);
+    }, [openProp, onOpenChangeRef]);
+    const [initialPage, setInitialPage] = React.useState();
+    const vamos = useVamos();
+    const can = useCan();
+    const navigate = React.useCallback((href) => {
+        if (isAbsoluteHref(href) && typeof window !== "undefined") {
+            if (/^(mailto|tel):/i.test(href))
+                window.location.href = href;
+            else if (href.startsWith(window.location.origin))
+                window.location.assign(href);
+            else
+                window.open(href, "_blank", "noopener,noreferrer");
+        }
+        else
+            vamos.navigate(href);
+    }, [vamos]);
+    React.useEffect(() => (actions?.length ? registry.register(actions) : undefined), [registry, actions]);
+    React.useEffect(() => {
+        const off = (sources ?? []).map((s) => registry.registerSource(s));
+        return () => off.forEach((f) => f());
+    }, [registry, sources]);
+    const run = React.useCallback((a, query = "") => {
+        const ctx = { navigate, close: () => setOpen(false), query, can };
+        const result = a.perform?.(ctx);
+        if (a.href)
+            navigate(a.href);
+        return result;
+    }, [navigate, setOpen, can]);
+    const latest = useLatest({ isOpen, setOpen, run, can });
+    React.useEffect(() => {
+        if (typeof document === "undefined")
+            return;
+        const toggle = shortcut ? parseShortcut(shortcut) : null;
+        const onKey = (e) => {
+            if (e.defaultPrevented || e.isComposing)
+                return;
+            const mac = isApplePlatform();
+            const { isOpen: o, setOpen: so, run: r, can: c } = latest.current;
+            if (toggle && matchesShortcut(e, toggle, mac)) {
+                e.preventDefault();
+                so(!o);
+                return;
+            }
+            if (o)
+                return;
+            for (const a of registry.getActions()) {
+                if (!a.global || !a.shortcut)
+                    continue;
+                const parsed = parseShortcut(toShortcut(a.shortcut));
+                if (!matchesShortcut(e, parsed, mac))
+                    continue;
+                if (isTyping(e.target) && !(parsed.mod || parsed.meta || parsed.ctrl))
+                    return;
+                if (!allowedBy(a, c))
+                    continue;
+                e.preventDefault();
+                void r(a);
+                return;
+            }
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [registry, shortcut, latest]);
+    const value = React.useMemo(() => ({ registry, isOpen, setOpen, initialPage, setInitialPage, run, can, navigate }), [registry, isOpen, setOpen, initialPage, run, can, navigate]);
+    return _jsx(PaletteContext.Provider, { value: value, children: children });
+}
+/** The registry of the nearest `CommandProvider` (or `null`). */
+export function useCommandRegistry() {
+    return React.useContext(PaletteContext)?.registry ?? null;
+}
+/**
+ * Adds commands while the calling component is mounted (page-scoped: "Publish" only exists in the
+ * editor). `perform` always calls the latest closure. Re-registers when ids / titles change or `deps` change.
+ *
+ * ```tsx
+ * useRegisterCommands([{ id: "cms.post.publish", title: "Publish post", group: "This post", perform: publish }]);
+ * ```
+ */
+export function useRegisterCommands(actions, deps) {
+    const registry = useCommandRegistry();
+    const latest = useLatest(actions);
+    const key = actions.map((a) => `${a.id}\u0001${a.title}\u0001${a.subtitle ?? ""}\u0001${a.group ?? ""}\u0001${a.href ?? ""}`).join("\u0002");
+    React.useEffect(() => {
+        if (!registry)
+            return;
+        const wrapped = latest.current.map((a) => ({
+            ...a,
+            perform: a.perform ? (ctx) => (latest.current.find((x) => x.id === a.id)?.perform ?? a.perform)(ctx) : undefined,
+            when: a.when ? (ctx) => (latest.current.find((x) => x.id === a.id)?.when ?? a.when)(ctx) : undefined,
+        }));
+        return registry.register(wrapped);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [registry, key, ...(deps ?? [])]);
+}
+/** Adds an async search source (record search) while mounted. */
+export function useCommandSource(source) {
+    const registry = useCommandRegistry();
+    const latest = useLatest(source);
+    const id = source?.id;
+    const group = source?.group;
+    React.useEffect(() => {
+        if (!registry || !latest.current)
+            return;
+        const s = latest.current;
+        return registry.registerSource({ ...s, search: (q, o) => (latest.current ?? s).search(q, o) });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [registry, id, group]);
+}
+/** Open / close the palette from anywhere (a search button, an empty state). */
+export function useCommandPalette() {
+    const ctx = React.useContext(PaletteContext);
+    return React.useMemo(() => ctx
+        ? {
+            open: (pageId) => {
+                ctx.setInitialPage(pageId);
+                ctx.setOpen(true);
+            },
+            close: () => ctx.setOpen(false),
+            toggle: () => ctx.setOpen(!ctx.isOpen),
+            isOpen: ctx.isOpen,
+            available: true,
+        }
+        : { open: () => { }, close: () => { }, toggle: () => { }, isOpen: false, available: false }, [ctx]);
+}
+function ActionIcon({ icon }) {
+    if (!icon)
+        return null;
+    if (React.isValidElement(icon))
+        return icon;
+    if (typeof icon === "function" || (typeof icon === "object" && icon !== null && "$$typeof" in icon)) {
+        const Icon = icon;
+        return _jsx(Icon, { className: "size-4" });
+    }
+    return _jsx(_Fragment, { children: icon });
+}
+function Highlight({ text, query, locale }) {
+    if (!query.trim())
+        return _jsx(_Fragment, { children: text });
+    return (_jsx(_Fragment, { children: highlightParts(text, query, locale).map((p, i) => p.match ? (_jsx("mark", { className: "rounded-[3px] bg-accent-soft text-fg", children: p.text }, i)) : (_jsx(React.Fragment, { children: p.text }, i))) }));
+}
+/**
+ * The ready-made ⌘K palette wired to the nearest `CommandProvider`: ranked local commands,
+ * recents, async sources (debounced, aborted on every keystroke), sub-pages with a breadcrumb chip
+ * (Backspace on an empty input goes back), a spinner while an action runs, and a polite result count.
+ * App shell mounts one for you.
+ */
+export function CommandPalette({ size = "lg", placeholder, recents: showRecents = true, footer = true, groupOrder, labels }) {
+    const ctx = React.useContext(PaletteContext);
+    if (!ctx)
+        throw new Error("CommandPalette must be used inside <CommandProvider> (App shell provides one).");
+    const { registry, isOpen, setOpen, initialPage, setInitialPage, run, can, navigate } = ctx;
+    const t = useLabels("command", commandLabels, labels);
+    const { locale } = useLocale();
+    const actions = React.useSyncExternalStore(registry.subscribe, registry.getActions, registry.getActions);
+    const sources = React.useSyncExternalStore(registry.subscribe, registry.getSources, registry.getSources);
+    const [query, setQuery] = React.useState("");
+    const [pages, setPages] = React.useState([]);
+    const [running, setRunning] = React.useState(null);
+    const [recentIds, setRecentIds] = React.useState([]);
+    const [sourceState, setSourceState] = React.useState({});
+    const page = pages[pages.length - 1];
+    const filter = React.useMemo(() => cmdkFilter(locale), [locale]);
+    const ctxFor = React.useCallback((q) => ({ navigate, close: () => setOpen(false), query: q, can }), [navigate, setOpen, can]);
+    const pushPage = React.useCallback(async (a) => {
+        if (!a.children)
+            return;
+        setQuery("");
+        if (Array.isArray(a.children)) {
+            setPages((p) => [...p, { id: a.id, title: a.title, actions: a.children, status: "ready" }]);
+            return;
+        }
+        setPages((p) => [...p, { id: a.id, title: a.title, actions: [], status: "loading" }]);
+        try {
+            const list = await a.children();
+            setPages((p) => p.map((x) => (x.id === a.id ? { ...x, actions: list, status: "ready" } : x)));
+        }
+        catch {
+            setPages((p) => p.map((x) => (x.id === a.id ? { ...x, status: "error" } : x)));
+        }
+    }, []);
+    // Reset on open; honour open(pageId).
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        setQuery("");
+        setRunning(null);
+        setRecentIds(showRecents ? readRecents() : []);
+        const target = initialPage ? registry.getActions().find((a) => a.id === initialPage) : undefined;
+        setPages([]);
+        if (target)
+            void pushPage(target);
+        if (initialPage)
+            setInitialPage(undefined);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isOpen]);
+    const visible = React.useMemo(() => {
+        const c = ctxFor(query);
+        const list = page ? page.actions : actions;
+        return list.filter((a) => allowedBy(a, can) && (!a.when || a.when(c)));
+    }, [page, actions, can, ctxFor, query]);
+    // Async sources (root page only).
+    const activeSources = React.useMemo(() => (page ? [] : sources.filter((s) => query.trim().length >= (s.minQuery ?? 2))), [page, sources, query]);
+    React.useEffect(() => {
+        const q = query.trim();
+        if (!activeSources.length) {
+            setSourceState({});
+            return;
+        }
+        const controllers = [];
+        const timers = [];
+        setSourceState((prev) => Object.fromEntries(activeSources.map((s) => [s.id, { status: "loading", items: prev[s.id]?.items ?? [] }])));
+        for (const s of activeSources) {
+            const ac = new AbortController();
+            controllers.push(ac);
+            timers.push(setTimeout(() => {
+                s.search(q, { signal: ac.signal }).then((items) => !ac.signal.aborted && setSourceState((prev) => ({ ...prev, [s.id]: { status: "ready", items } })), () => !ac.signal.aborted && setSourceState((prev) => ({ ...prev, [s.id]: { status: "error", items: [] } })));
+            }, s.debounce ?? 200));
+        }
+        return () => {
+            timers.forEach(clearTimeout);
+            controllers.forEach((c) => c.abort());
+        };
+    }, [activeSources, query]);
+    const groups = React.useMemo(() => {
+        const q = query.trim();
+        let ranked;
+        if (q) {
+            ranked = visible
+                .map((a) => ({ a, s: filter(a.title, q, [...(a.keywords ?? []), a.subtitle ?? "", a.group ?? "", a.app ?? ""]) }))
+                .filter((x) => x.s > 0)
+                .sort((x, y) => y.s - x.s || (y.a.priority ?? 0) - (x.a.priority ?? 0))
+                .map((x) => x.a);
+        }
+        else
+            ranked = [...visible].sort((x, y) => (y.priority ?? 0) - (x.priority ?? 0));
+        const map = new Map();
+        const defaultGroup = page ? page.title : "Actions";
+        for (const a of ranked) {
+            const g = page ? defaultGroup : (a.group ?? defaultGroup);
+            if (!map.has(g))
+                map.set(g, []);
+            map.get(g).push(a);
+        }
+        let entries = [...map.entries()];
+        if (groupOrder && !q)
+            entries = entries.sort(([a], [b]) => (groupOrder.indexOf(a) + 1 || 999) - (groupOrder.indexOf(b) + 1 || 999));
+        return entries;
+    }, [visible, query, filter, page, groupOrder]);
+    const recentActions = React.useMemo(() => {
+        if (page || query.trim() || !showRecents)
+            return [];
+        const byId = new Map(visible.map((a) => [a.id, a]));
+        return recentIds.map((id) => byId.get(id)).filter((a) => Boolean(a)).slice(0, 5);
+    }, [page, query, showRecents, recentIds, visible]);
+    const sourceGroups = activeSources.map((s) => ({ source: s, state: sourceState[s.id] ?? { status: "loading", items: [] } }));
+    const count = groups.reduce((n, [, l]) => n + l.length, 0) + sourceGroups.reduce((n, g) => n + g.state.items.length, 0);
+    const searching = sourceGroups.some((g) => g.state.status === "loading");
+    const select = async (a) => {
+        if (running)
+            return;
+        if (a.children)
+            return void pushPage(a);
+        pushRecent(a.id);
+        const result = run(a, query);
+        if (result && typeof result.then === "function") {
+            setRunning(a.id);
+            try {
+                await result;
+            }
+            finally {
+                setRunning(null);
+            }
+        }
+        setOpen(false);
+    };
+    const renderItem = (a, valuePrefix = "") => (_jsx(CommandItem, { value: valuePrefix + a.id, onSelect: () => void select(a), icon: _jsx(ActionIcon, { icon: a.icon }), description: a.subtitle, shortcut: a.shortcut, chevron: Boolean(a.children), loading: running === a.id, badge: a.app ? _jsx(Badge, { size: "sm", tone: "outline", shape: "square", children: a.app }) : undefined, children: _jsx(Highlight, { text: a.title, query: query, locale: locale }) }, valuePrefix + a.id));
+    const onKeyDown = (e) => {
+        if (e.key === "Backspace" && !query && pages.length) {
+            e.preventDefault();
+            setPages((p) => p.slice(0, -1));
+        }
+    };
+    const nothing = count === 0 && !searching && !(page?.status === "loading");
+    return (_jsxs(CommandDialog, { open: isOpen, onOpenChange: setOpen, size: size, labels: labels, commandProps: { shouldFilter: false, className: "max-h-[inherit]" }, children: [_jsx(CommandInput, { value: query, onValueChange: setQuery, onKeyDown: onKeyDown, placeholder: placeholder, labels: labels, chip: page ? (_jsxs(_Fragment, { children: [_jsx(ArrowLeft, { "aria-hidden": true, className: "size-3 rtl:-scale-x-100" }), page.title] })) : undefined, end: searching ? _jsx(Spinner, { size: "xs", className: "text-fg-subtle" }) : undefined }), searching ? _jsx(Progress, { "aria-label": t("loading"), value: null, size: "xs", className: "-mt-px rounded-none" }) : null, _jsxs(CommandList, { children: [page?.status === "loading" ? _jsx(CommandLoading, { labels: labels }) : null, page?.status === "error" ? _jsx("p", { className: "px-3 py-2.5 text-[13px] text-danger", children: t("sourceError", { group: page.title }) }) : null, nothing && page?.status !== "error" ? (_jsx(EmptyState, { size: "sm", kind: "no-results", role: "presentation", title: query.trim() ? t("noResultsFor", { query: query.trim() }) : t("empty"), className: "py-8" })) : null, recentActions.length ? _jsx(CommandGroup, { heading: t("recent"), children: recentActions.map((a) => renderItem(a, "recent:")) }) : null, groups.map(([g, list]) => (_jsx(CommandGroup, { heading: g, children: list.map((a) => renderItem(a)) }, g))), sourceGroups.map(({ source, state }) => state.status === "error" ? (_jsx(CommandGroup, { heading: source.group, forceMount: true, children: _jsx("p", { className: "px-2.5 py-1.5 text-[13px] text-danger", children: t("sourceError", { group: source.group }) }) }, source.id)) : state.items.length ? (_jsx(CommandGroup, { heading: source.group, children: state.items.map((a) => renderItem(a, `${source.id}:`)) }, source.id)) : null)] }), _jsx("div", { "aria-live": "polite", className: "sr-only", children: query.trim() && !searching ? t("results", { count }) : "" }), footer ? (_jsxs("div", { "data-slot": "command-footer", className: "flex items-center gap-4 border-t border-line px-4 py-2 text-[11.5px] text-fg-subtle max-sm:hidden", children: [_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx(KbdGroup, { keys: ["up", "down"], size: "sm" }), " ", t("navigate")] }), _jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx(CornerDownLeft, { "aria-hidden": true, className: "size-3" }), " ", t("select")] }), pages.length ? (_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx(KbdGroup, { keys: ["backspace"], size: "sm" }), " ", t("back")] })) : null, _jsxs("span", { className: "ms-auto flex items-center gap-1.5", children: [_jsx(KbdGroup, { keys: ["esc"], size: "sm" }), " ", t("close")] })] })) : null] }));
+}