@webiny/app-admin-ui 0.0.0-unstable.a4637c5ce6 → 0.0.0-unstable.a4f3e4ea8b

package/CommandPalette/CommandPalette.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare const CommandPaletteBase: () => React.JSX.Element | null;
+export declare const CommandPalette: typeof CommandPaletteBase & {
+    displayName: string;
+};
+export {};

package/CommandPalette/CommandPalette.js

@@ -0,0 +1,171 @@
+import react, { useCallback, useEffect, useMemo, useState } from "react";
+import { Command } from "cmdk";
+import { CommandPaletteFeature, createReactiveComponent, useAdminConfig, useHotkeys } from "@webiny/app-admin";
+import { useContainer, useFeature } from "@webiny/app";
+import { RouterGateway } from "@webiny/app/features/router/abstractions.js";
+import { EmptyState, Icon, Text } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/search.svg";
+import { ReactComponent as keyboard_return_svg_ReactComponent } from "@webiny/icons/keyboard_return.svg";
+import { ReactComponent as keyboard_arrow_up_svg_ReactComponent } from "@webiny/icons/keyboard_arrow_up.svg";
+import { ReactComponent as keyboard_arrow_down_svg_ReactComponent } from "@webiny/icons/keyboard_arrow_down.svg";
+import { NAVIGATION_GROUP, PALETTE_HOTKEY_ZINDEX } from "./constants.js";
+import { commandVmsToGroups, deriveNavigationRows } from "./deriveRows.js";
+import { CommandDetail, CommandItemRow, GroupHeading, HintIcon, Kbd } from "./components/index.js";
+const CommandPaletteBase = ()=>{
+    const [query, setQuery] = useState("");
+    const { presenter } = useFeature(CommandPaletteFeature);
+    const { menus } = useAdminConfig();
+    const container = useContainer();
+    const { vm } = presenter;
+    useEffect(()=>{
+        presenter.init();
+    }, [
+        presenter
+    ]);
+    const close = useCallback(()=>{
+        presenter.close();
+        setQuery("");
+    }, [
+        presenter
+    ]);
+    const navigateTo = useCallback((to)=>{
+        container.resolve(RouterGateway).pushState(to);
+        close();
+    }, [
+        container,
+        close
+    ]);
+    const runCommand = useCallback((name)=>presenter.useCommand(name), [
+        presenter
+    ]);
+    const keys = useMemo(()=>({
+            "mod+k": (e)=>{
+                e.preventDefault();
+                presenter.toggle();
+                setQuery("");
+            },
+            backspace: (e)=>{
+                if (!presenter.vm.isOpen) return;
+                const target = e.target;
+                if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable) return;
+                e.preventDefault();
+                presenter.cancelCommand();
+            },
+            ...presenter.shortcutKeys
+        }), [
+        presenter,
+        presenter.shortcutKeys
+    ]);
+    useHotkeys({
+        zIndex: PALETTE_HOTKEY_ZINDEX,
+        keys
+    });
+    const groups = useMemo(()=>{
+        const result = [];
+        const navigationRows = deriveNavigationRows(menus, navigateTo);
+        if (navigationRows.length > 0) result.push({
+            title: NAVIGATION_GROUP,
+            rows: navigationRows
+        });
+        result.push(...commandVmsToGroups(vm.commands, runCommand));
+        return result;
+    }, [
+        menus,
+        vm.commands,
+        navigateTo,
+        runCommand
+    ]);
+    if (!vm.isOpen) return null;
+    const active = vm.activeCommand;
+    const onKeyDown = (e)=>{
+        if ("Escape" === e.key) {
+            e.preventDefault();
+            if (active) presenter.cancelCommand();
+            else close();
+        }
+    };
+    return /*#__PURE__*/ react.createElement("div", {
+        role: "presentation",
+        onClick: close,
+        className: "fixed inset-0 z-overlay flex items-start justify-center bg-neutral-dark/50",
+        style: {
+            padding: "13vh 16px 16px",
+            backdropFilter: "blur(2px)"
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        onClick: (e)=>e.stopPropagation(),
+        onKeyDown: onKeyDown,
+        className: "flex w-full flex-col overflow-hidden rounded-lg border border-neutral-dimmed bg-neutral-base shadow-xxl",
+        style: {
+            maxWidth: 660,
+            height: "45vh"
+        }
+    }, active ? /*#__PURE__*/ react.createElement(CommandDetail, {
+        active: active,
+        onBack: ()=>presenter.cancelCommand(),
+        onClose: close
+    }) : /*#__PURE__*/ react.createElement(Command, {
+        label: "Command palette",
+        style: {
+            display: "flex",
+            flexDirection: "column",
+            flex: 1,
+            minHeight: 0
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-sm border-b border-neutral-subtle px-md py-sm-plus"
+    }, /*#__PURE__*/ react.createElement(Icon, {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        color: "neutral-light",
+        size: "md",
+        label: "Search"
+    }), /*#__PURE__*/ react.createElement(Command.Input, {
+        autoFocus: true,
+        value: query,
+        onValueChange: setQuery,
+        spellCheck: false,
+        placeholder: "Search for pages and actions…",
+        className: "min-w-0 flex-1 border-0 bg-transparent text-lg text-neutral-primary outline-none"
+    }), /*#__PURE__*/ react.createElement(Kbd, null, "esc")), /*#__PURE__*/ react.createElement(Command.List, {
+        className: "p-xs-plus",
+        style: {
+            flex: 1,
+            minHeight: 0,
+            overflowY: "auto"
+        }
+    }, /*#__PURE__*/ react.createElement(Command.Empty, null, /*#__PURE__*/ react.createElement(EmptyState, {
+        type: "select",
+        title: `No results for “${query}”`,
+        description: "Try a page name, or an action like “new entry”."
+    })), groups.map((group)=>/*#__PURE__*/ react.createElement(Command.Group, {
+            key: group.title,
+            heading: /*#__PURE__*/ react.createElement(GroupHeading, {
+                title: group.title
+            })
+        }, group.rows.map((row)=>/*#__PURE__*/ react.createElement(CommandItemRow, {
+                key: row.key,
+                row: row
+            })))))), /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center justify-between gap-sm border-t border-neutral-subtle bg-neutral-subtle px-sm py-xs-plus text-neutral-muted"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm"
+    }, "Webiny command palette"), /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-md"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "inline-flex items-center gap-xs"
+    }, /*#__PURE__*/ react.createElement(Kbd, null, /*#__PURE__*/ react.createElement(HintIcon, {
+        element: /*#__PURE__*/ react.createElement(keyboard_arrow_up_svg_ReactComponent, null)
+    }), /*#__PURE__*/ react.createElement(HintIcon, {
+        element: /*#__PURE__*/ react.createElement(keyboard_arrow_down_svg_ReactComponent, null)
+    })), "Navigate"), /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "inline-flex items-center gap-xs"
+    }, /*#__PURE__*/ react.createElement(Kbd, null, /*#__PURE__*/ react.createElement(HintIcon, {
+        element: /*#__PURE__*/ react.createElement(keyboard_return_svg_ReactComponent, null)
+    })), "Select")))));
+};
+const CommandPalette = createReactiveComponent(CommandPaletteBase);
+export { CommandPalette };
+
+//# sourceMappingURL=CommandPalette.js.map

package/CommandPalette/CommandPalette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette/CommandPalette.js","sources":["../../src/CommandPalette/CommandPalette.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { Command } from \"cmdk\";\nimport {\n    CommandPaletteFeature,\n    createReactiveComponent,\n    useAdminConfig,\n    useHotkeys\n} from \"@webiny/app-admin\";\nimport { useContainer, useFeature } from \"@webiny/app\";\nimport { RouterGateway } from \"@webiny/app/features/router/abstractions.js\";\nimport { EmptyState, Icon, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { ReactComponent as ReturnIcon } from \"@webiny/icons/keyboard_return.svg\";\nimport { ReactComponent as ArrowUpIcon } from \"@webiny/icons/keyboard_arrow_up.svg\";\nimport { ReactComponent as ArrowDownIcon } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { NAVIGATION_GROUP, PALETTE_HOTKEY_ZINDEX } from \"./constants.js\";\nimport type { CommandGroup } from \"./types.js\";\nimport { commandVmsToGroups, deriveNavigationRows } from \"./deriveRows.js\";\nimport { CommandDetail, CommandItemRow, GroupHeading, HintIcon, Kbd } from \"./components/index.js\";\n\nconst CommandPaletteBase = () => {\n    const [query, setQuery] = useState(\"\");\n    const { presenter } = useFeature(CommandPaletteFeature);\n    const { menus } = useAdminConfig();\n    const container = useContainer();\n    const { vm } = presenter;\n\n    useEffect(() => {\n        presenter.init();\n    }, [presenter]);\n\n    const close = useCallback(() => {\n        presenter.close();\n        setQuery(\"\");\n    }, [presenter]);\n\n    const navigateTo = useCallback(\n        (to: string) => {\n            container.resolve(RouterGateway).pushState(to);\n            close();\n        },\n        [container, close]\n    );\n\n    const runCommand = useCallback((name: string) => presenter.useCommand(name), [presenter]);\n\n    // mod+k toggles; backspace backs out of a detail view; command shortcuts run directly.\n    const keys = useMemo(\n        () => ({\n            \"mod+k\": (e: KeyboardEvent) => {\n                e.preventDefault();\n                presenter.toggle();\n                setQuery(\"\");\n            },\n            backspace: (e: KeyboardEvent) => {\n                // This is a global (document-level) handler, so only act while the palette\n                // is actually open — otherwise it would swallow Backspace everywhere.\n                if (!presenter.vm.isOpen) {\n                    return;\n                }\n                // Never intercept Backspace while the user is editing text: <input>,\n                // <textarea>, or any contentEditable (e.g. rich-text/lexical) element.\n                const target = e.target;\n                if (\n                    target instanceof HTMLInputElement ||\n                    target instanceof HTMLTextAreaElement ||\n                    (target instanceof HTMLElement && target.isContentEditable)\n                ) {\n                    return;\n                }\n                e.preventDefault();\n                presenter.cancelCommand();\n            },\n            ...presenter.shortcutKeys\n        }),\n        [presenter, presenter.shortcutKeys]\n    );\n\n    useHotkeys({ zIndex: PALETTE_HOTKEY_ZINDEX, keys });\n\n    const groups = useMemo<CommandGroup[]>(() => {\n        const result: CommandGroup[] = [];\n        const navigationRows = deriveNavigationRows(menus, navigateTo);\n        if (navigationRows.length > 0) {\n            result.push({ title: NAVIGATION_GROUP, rows: navigationRows });\n        }\n        result.push(...commandVmsToGroups(vm.commands, runCommand));\n        return result;\n    }, [menus, vm.commands, navigateTo, runCommand]);\n\n    if (!vm.isOpen) {\n        return null;\n    }\n\n    const active = vm.activeCommand;\n\n    const onKeyDown = (e: React.KeyboardEvent) => {\n        if (e.key === \"Escape\") {\n            e.preventDefault();\n            if (active) {\n                presenter.cancelCommand();\n            } else {\n                close();\n            }\n        }\n    };\n\n    return (\n        <div\n            role=\"presentation\"\n            onClick={close}\n            className=\"fixed inset-0 z-overlay flex items-start justify-center bg-neutral-dark/50\"\n            style={{ padding: \"13vh 16px 16px\", backdropFilter: \"blur(2px)\" }}\n        >\n            <div\n                onClick={e => e.stopPropagation()}\n                onKeyDown={onKeyDown}\n                className=\"flex w-full flex-col overflow-hidden rounded-lg border border-neutral-dimmed bg-neutral-base shadow-xxl\"\n                style={{ maxWidth: 660, height: \"45vh\" }}\n            >\n                {active ? (\n                    <CommandDetail\n                        active={active}\n                        onBack={() => presenter.cancelCommand()}\n                        onClose={close}\n                    />\n                ) : (\n                    <Command\n                        label=\"Command palette\"\n                        style={{ display: \"flex\", flexDirection: \"column\", flex: 1, minHeight: 0 }}\n                    >\n                        <div className=\"flex items-center gap-sm border-b border-neutral-subtle px-md py-sm-plus\">\n                            <Icon\n                                icon={<SearchIcon />}\n                                color={\"neutral-light\"}\n                                size={\"md\"}\n                                label={\"Search\"}\n                            />\n                            <Command.Input\n                                autoFocus\n                                value={query}\n                                onValueChange={setQuery}\n                                spellCheck={false}\n                                placeholder=\"Search for pages and actions…\"\n                                className=\"min-w-0 flex-1 border-0 bg-transparent text-lg text-neutral-primary outline-none\"\n                            />\n                            <Kbd>esc</Kbd>\n                        </div>\n\n                        <Command.List\n                            className=\"p-xs-plus\"\n                            style={{ flex: 1, minHeight: 0, overflowY: \"auto\" }}\n                        >\n                            <Command.Empty>\n                                <EmptyState\n                                    type=\"select\"\n                                    title={`No results for “${query}”`}\n                                    description=\"Try a page name, or an action like “new entry”.\"\n                                />\n                            </Command.Empty>\n\n                            {groups.map(group => (\n                                <Command.Group\n                                    key={group.title}\n                                    heading={<GroupHeading title={group.title} />}\n                                >\n                                    {group.rows.map(row => (\n                                        <CommandItemRow key={row.key} row={row} />\n                                    ))}\n                                </Command.Group>\n                            ))}\n                        </Command.List>\n                    </Command>\n                )}\n\n                <div className=\"flex items-center justify-between gap-sm border-t border-neutral-subtle bg-neutral-subtle px-sm py-xs-plus text-neutral-muted\">\n                    <Text size=\"sm\">Webiny command palette</Text>\n                    <div className=\"flex items-center gap-md\">\n                        <Text size=\"sm\" className=\"inline-flex items-center gap-xs\">\n                            <Kbd>\n                                <HintIcon element={<ArrowUpIcon />} />\n                                <HintIcon element={<ArrowDownIcon />} />\n                            </Kbd>\n                            Navigate\n                        </Text>\n                        <Text size=\"sm\" className=\"inline-flex items-center gap-xs\">\n                            <Kbd>\n                                <HintIcon element={<ReturnIcon />} />\n                            </Kbd>\n                            Select\n                        </Text>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport const CommandPalette = createReactiveComponent(CommandPaletteBase);\n"],"names":["CommandPaletteBase","query","setQuery","useState","presenter","useFeature","CommandPaletteFeature","menus","useAdminConfig","container","useContainer","vm","useEffect","close","useCallback","navigateTo","to","RouterGateway","runCommand","name","keys","useMemo","e","target","HTMLInputElement","HTMLTextAreaElement","HTMLElement","useHotkeys","PALETTE_HOTKEY_ZINDEX","groups","result","navigationRows","deriveNavigationRows","NAVIGATION_GROUP","commandVmsToGroups","active","onKeyDown","CommandDetail","Command","Icon","SearchIcon","Kbd","EmptyState","group","GroupHeading","row","CommandItemRow","Text","HintIcon","ArrowUpIcon","ArrowDownIcon","ReturnIcon","CommandPalette","createReactiveComponent"],"mappings":";;;;;;;;;;;;;AAoBA,MAAMA,qBAAqB;IACvB,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAS;IACnC,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAWC;IACjC,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAMC,YAAYC;IAClB,MAAM,EAAEC,EAAE,EAAE,GAAGP;IAEfQ,UAAU;QACNR,UAAU,IAAI;IAClB,GAAG;QAACA;KAAU;IAEd,MAAMS,QAAQC,YAAY;QACtBV,UAAU,KAAK;QACfF,SAAS;IACb,GAAG;QAACE;KAAU;IAEd,MAAMW,aAAaD,YACf,CAACE;QACGP,UAAU,OAAO,CAACQ,eAAe,SAAS,CAACD;QAC3CH;IACJ,GACA;QAACJ;QAAWI;KAAM;IAGtB,MAAMK,aAAaJ,YAAY,CAACK,OAAiBf,UAAU,UAAU,CAACe,OAAO;QAACf;KAAU;IAGxF,MAAMgB,OAAOC,QACT,IAAO;YACH,SAAS,CAACC;gBACNA,EAAE,cAAc;gBAChBlB,UAAU,MAAM;gBAChBF,SAAS;YACb;YACA,WAAW,CAACoB;gBAGR,IAAI,CAAClB,UAAU,EAAE,CAAC,MAAM,EACpB;gBAIJ,MAAMmB,SAASD,EAAE,MAAM;gBACvB,IACIC,kBAAkBC,oBAClBD,kBAAkBE,uBACjBF,kBAAkBG,eAAeH,OAAO,iBAAiB,EAE1D;gBAEJD,EAAE,cAAc;gBAChBlB,UAAU,aAAa;YAC3B;YACA,GAAGA,UAAU,YAAY;QAC7B,IACA;QAACA;QAAWA,UAAU,YAAY;KAAC;IAGvCuB,WAAW;QAAE,QAAQC;QAAuBR;IAAK;IAEjD,MAAMS,SAASR,QAAwB;QACnC,MAAMS,SAAyB,EAAE;QACjC,MAAMC,iBAAiBC,qBAAqBzB,OAAOQ;QACnD,IAAIgB,eAAe,MAAM,GAAG,GACxBD,OAAO,IAAI,CAAC;YAAE,OAAOG;YAAkB,MAAMF;QAAe;QAEhED,OAAO,IAAI,IAAII,mBAAmBvB,GAAG,QAAQ,EAAEO;QAC/C,OAAOY;IACX,GAAG;QAACvB;QAAOI,GAAG,QAAQ;QAAEI;QAAYG;KAAW;IAE/C,IAAI,CAACP,GAAG,MAAM,EACV,OAAO;IAGX,MAAMwB,SAASxB,GAAG,aAAa;IAE/B,MAAMyB,YAAY,CAACd;QACf,IAAIA,AAAU,aAAVA,EAAE,GAAG,EAAe;YACpBA,EAAE,cAAc;YAChB,IAAIa,QACA/B,UAAU,aAAa;iBAEvBS;QAER;IACJ;IAEA,OAAO,WAAP,GACI,oBAAC;QACG,MAAK;QACL,SAASA;QACT,WAAU;QACV,OAAO;YAAE,SAAS;YAAkB,gBAAgB;QAAY;qBAEhE,oBAAC;QACG,SAASS,CAAAA,IAAKA,EAAE,eAAe;QAC/B,WAAWc;QACX,WAAU;QACV,OAAO;YAAE,UAAU;YAAK,QAAQ;QAAO;OAEtCD,SAAS,WAATA,GACG,oBAACE,eAAaA;QACV,QAAQF;QACR,QAAQ,IAAM/B,UAAU,aAAa;QACrC,SAASS;uBAGb,oBAACyB,SAAOA;QACJ,OAAM;QACN,OAAO;YAAE,SAAS;YAAQ,eAAe;YAAU,MAAM;YAAG,WAAW;QAAE;qBAEzE,oBAAC;QAAI,WAAU;qBACX,oBAACC,MAAIA;QACD,oBAAM,oBAACC,gBAAUA;QACjB,OAAO;QACP,MAAM;QACN,OAAO;sBAEX,oBAACF,QAAQ,KAAK;QACV;QACA,OAAOrC;QACP,eAAeC;QACf,YAAY;QACZ,aAAY;QACZ,WAAU;sBAEd,oBAACuC,KAAGA,MAAC,uBAGT,oBAACH,QAAQ,IAAI;QACT,WAAU;QACV,OAAO;YAAE,MAAM;YAAG,WAAW;YAAG,WAAW;QAAO;qBAElD,oBAACA,QAAQ,KAAK,sBACV,oBAACI,YAAUA;QACP,MAAK;QACL,OAAO,CAAC,gBAAgB,EAAEzC,MAAM,CAAC,CAAC;QAClC,aAAY;SAInB4B,OAAO,GAAG,CAACc,CAAAA,QAAAA,WAAAA,GACR,oBAACL,QAAQ,KAAK;YACV,KAAKK,MAAM,KAAK;YAChB,uBAAS,oBAACC,cAAYA;gBAAC,OAAOD,MAAM,KAAK;;WAExCA,MAAM,IAAI,CAAC,GAAG,CAACE,CAAAA,MAAAA,WAAAA,GACZ,oBAACC,gBAAcA;gBAAC,KAAKD,IAAI,GAAG;gBAAE,KAAKA;mCAQ3D,oBAAC;QAAI,WAAU;qBACX,oBAACE,MAAIA;QAAC,MAAK;OAAK,yCAChB,oBAAC;QAAI,WAAU;qBACX,oBAACA,MAAIA;QAAC,MAAK;QAAK,WAAU;qBACtB,oBAACN,KAAGA,MAAAA,WAAAA,GACA,oBAACO,UAAQA;QAAC,uBAAS,oBAACC,sCAAWA;sBAC/B,oBAACD,UAAQA;QAAC,uBAAS,oBAACE,wCAAaA;SAC/B,2BAGV,oBAACH,MAAIA;QAAC,MAAK;QAAK,WAAU;qBACtB,oBAACN,KAAGA,MAAAA,WAAAA,GACA,oBAACO,UAAQA;QAAC,uBAAS,oBAACG,oCAAUA;SAC5B;AAQlC;AAEO,MAAMC,iBAAiBC,wBAAwBrD"}

package/CommandPalette/components/CommandDetail.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { ActiveCommandVm } from "@webiny/app-admin";
+interface CommandDetailProps {
+    active: ActiveCommandVm;
+    onBack: () => void;
+    onClose: () => void;
+}
+/**
+ * Renders a command's detail view (e.g. a form) inside the palette. Back returns to the
+ * command list; the detail view itself calls onClose when it completes.
+ */
+export declare const CommandDetail: ({ active, onBack, onClose }: CommandDetailProps) => React.JSX.Element;
+export {};

package/CommandPalette/components/CommandDetail.js

@@ -0,0 +1,39 @@
+import react from "react";
+import { IconButton, Text } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/arrow_back.svg";
+import { Kbd } from "./Kbd.js";
+const CommandDetail = ({ active, onBack, onClose })=>{
+    const { command, DetailView } = active;
+    return /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            flexDirection: "column",
+            flex: 1,
+            minHeight: 0
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-sm border-b border-neutral-subtle px-md py-sm-plus"
+    }, /*#__PURE__*/ react.createElement(IconButton, {
+        variant: "ghost",
+        size: "sm",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        onClick: onBack,
+        "aria-label": "Back"
+    }), command.icon, /*#__PURE__*/ react.createElement(Text, {
+        size: "md",
+        className: "flex-1 font-medium text-neutral-primary"
+    }, command.label), /*#__PURE__*/ react.createElement(Kbd, null, "esc")), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            flex: 1,
+            minHeight: 0,
+            overflowY: "auto"
+        }
+    }, /*#__PURE__*/ react.createElement(DetailView, {
+        command: command,
+        onClose: onClose,
+        onBack: onBack
+    })));
+};
+export { CommandDetail };
+
+//# sourceMappingURL=CommandDetail.js.map

package/CommandPalette/components/CommandDetail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette/components/CommandDetail.js","sources":["../../../src/CommandPalette/components/CommandDetail.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconButton, Text } from \"@webiny/admin-ui\";\nimport type { ActiveCommandVm } from \"@webiny/app-admin\";\nimport { ReactComponent as BackIcon } from \"@webiny/icons/arrow_back.svg\";\nimport { Kbd } from \"./Kbd.js\";\n\ninterface CommandDetailProps {\n    active: ActiveCommandVm;\n    onBack: () => void;\n    onClose: () => void;\n}\n\n/**\n * Renders a command's detail view (e.g. a form) inside the palette. Back returns to the\n * command list; the detail view itself calls onClose when it completes.\n */\nexport const CommandDetail = ({ active, onBack, onClose }: CommandDetailProps) => {\n    const { command, DetailView } = active;\n\n    return (\n        <div style={{ display: \"flex\", flexDirection: \"column\", flex: 1, minHeight: 0 }}>\n            <div className=\"flex items-center gap-sm border-b border-neutral-subtle px-md py-sm-plus\">\n                <IconButton\n                    variant={\"ghost\"}\n                    size={\"sm\"}\n                    icon={<BackIcon />}\n                    onClick={onBack}\n                    aria-label=\"Back\"\n                />\n                {command.icon}\n                <Text size=\"md\" className=\"flex-1 font-medium text-neutral-primary\">\n                    {command.label}\n                </Text>\n                <Kbd>esc</Kbd>\n            </div>\n            <div style={{ flex: 1, minHeight: 0, overflowY: \"auto\" }}>\n                <DetailView command={command} onClose={onClose} onBack={onBack} />\n            </div>\n        </div>\n    );\n};\n"],"names":["CommandDetail","active","onBack","onClose","command","DetailView","IconButton","BackIcon","Text","Kbd"],"mappings":";;;;AAgBO,MAAMA,gBAAgB,CAAC,EAAEC,MAAM,EAAEC,MAAM,EAAEC,OAAO,EAAsB;IACzE,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGJ;IAEhC,OAAO,WAAP,GACI,oBAAC;QAAI,OAAO;YAAE,SAAS;YAAQ,eAAe;YAAU,MAAM;YAAG,WAAW;QAAE;qBAC1E,oBAAC;QAAI,WAAU;qBACX,oBAACK,YAAUA;QACP,SAAS;QACT,MAAM;QACN,oBAAM,oBAACC,gBAAQA;QACf,SAASL;QACT,cAAW;QAEdE,QAAQ,IAAI,gBACb,oBAACI,MAAIA;QAAC,MAAK;QAAK,WAAU;OACrBJ,QAAQ,KAAK,iBAElB,oBAACK,KAAGA,MAAC,uBAET,oBAAC;QAAI,OAAO;YAAE,MAAM;YAAG,WAAW;YAAG,WAAW;QAAO;qBACnD,oBAACJ,YAAAA;QAAW,SAASD;QAAS,SAASD;QAAS,QAAQD;;AAIxE"}

package/CommandPalette/components/CommandItemRow.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { CommandRow } from "../types.js";
+export declare const CommandItemRow: ({ row }: {
+    row: CommandRow;
+}) => React.JSX.Element;

package/CommandPalette/components/CommandItemRow.js

@@ -0,0 +1,39 @@
+import react from "react";
+import { Command, useCommandState } from "cmdk";
+import { Icon, Text } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/keyboard_return.svg";
+import { Kbd } from "./Kbd.js";
+const CommandItemRow = ({ row })=>{
+    const selected = useCommandState((state)=>(state.value || "") === row.value);
+    return /*#__PURE__*/ react.createElement(Command.Item, {
+        value: row.value,
+        onSelect: row.onRun,
+        className: "flex cursor-pointer items-center gap-sm rounded-md px-sm py-xs-plus data-[selected=true]:bg-neutral-dimmed"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "grid size-xl shrink-0 place-items-center rounded-md border " + (selected ? "border-primary bg-primary-subtle" : "border-neutral-dimmed bg-neutral-subtle")
+    }, row.icon ?? null), /*#__PURE__*/ react.createElement("div", {
+        className: "min-w-0 flex-1"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        as: "div",
+        size: "md",
+        className: "truncate font-medium text-neutral-primary"
+    }, row.label), row.sub ? /*#__PURE__*/ react.createElement(Text, {
+        as: "div",
+        size: "sm",
+        className: "truncate text-neutral-muted"
+    }, row.sub) : null), /*#__PURE__*/ react.createElement("div", {
+        className: "ml-auto flex shrink-0 items-center gap-xs"
+    }, row.shortcut?.map((key, index)=>/*#__PURE__*/ react.createElement(Kbd, {
+            key: index
+        }, key)), selected ? /*#__PURE__*/ react.createElement("span", {
+        className: "inline-flex items-center gap-xs rounded-sm bg-primary px-xs py-xs text-sm font-medium text-neutral-base"
+    }, row.verb, /*#__PURE__*/ react.createElement(Icon, {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        color: "neutral-base",
+        size: "xs",
+        label: ""
+    })) : null));
+};
+export { CommandItemRow };
+
+//# sourceMappingURL=CommandItemRow.js.map

package/CommandPalette/components/CommandItemRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette/components/CommandItemRow.js","sources":["../../../src/CommandPalette/components/CommandItemRow.tsx"],"sourcesContent":["import React from \"react\";\nimport { Command, useCommandState } from \"cmdk\";\nimport { Icon, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as ReturnIcon } from \"@webiny/icons/keyboard_return.svg\";\nimport type { CommandRow } from \"../types.js\";\nimport { Kbd } from \"./Kbd.js\";\n\nexport const CommandItemRow = ({ row }: { row: CommandRow }) => {\n    const selected = useCommandState(state => (state.value || \"\") === row.value);\n\n    return (\n        <Command.Item\n            value={row.value}\n            onSelect={row.onRun}\n            className=\"flex cursor-pointer items-center gap-sm rounded-md px-sm py-xs-plus data-[selected=true]:bg-neutral-dimmed\"\n        >\n            <div\n                className={\n                    \"grid size-xl shrink-0 place-items-center rounded-md border \" +\n                    (selected\n                        ? \"border-primary bg-primary-subtle\"\n                        : \"border-neutral-dimmed bg-neutral-subtle\")\n                }\n            >\n                {row.icon ?? null}\n            </div>\n            <div className=\"min-w-0 flex-1\">\n                <Text as=\"div\" size=\"md\" className=\"truncate font-medium text-neutral-primary\">\n                    {row.label}\n                </Text>\n                {row.sub ? (\n                    <Text as=\"div\" size=\"sm\" className=\"truncate text-neutral-muted\">\n                        {row.sub}\n                    </Text>\n                ) : null}\n            </div>\n            <div className=\"ml-auto flex shrink-0 items-center gap-xs\">\n                {row.shortcut?.map((key, index) => (\n                    <Kbd key={index}>{key}</Kbd>\n                ))}\n                {selected ? (\n                    <span className=\"inline-flex items-center gap-xs rounded-sm bg-primary px-xs py-xs text-sm font-medium text-neutral-base\">\n                        {row.verb}\n                        <Icon icon={<ReturnIcon />} color={\"neutral-base\"} size={\"xs\"} label={\"\"} />\n                    </span>\n                ) : null}\n            </div>\n        </Command.Item>\n    );\n};\n"],"names":["CommandItemRow","row","selected","useCommandState","state","Command","Text","key","index","Kbd","Icon","ReturnIcon"],"mappings":";;;;;AAOO,MAAMA,iBAAiB,CAAC,EAAEC,GAAG,EAAuB;IACvD,MAAMC,WAAWC,gBAAgBC,CAAAA,QAAUA,AAAAA,CAAAA,MAAM,KAAK,IAAI,EAAC,MAAOH,IAAI,KAAK;IAE3E,OAAO,WAAP,GACI,oBAACI,QAAQ,IAAI;QACT,OAAOJ,IAAI,KAAK;QAChB,UAAUA,IAAI,KAAK;QACnB,WAAU;qBAEV,oBAAC;QACG,WACI,gEACCC,CAAAA,WACK,qCACA,yCAAwC;OAGjDD,IAAI,IAAI,IAAI,qBAEjB,oBAAC;QAAI,WAAU;qBACX,oBAACK,MAAIA;QAAC,IAAG;QAAM,MAAK;QAAK,WAAU;OAC9BL,IAAI,KAAK,GAEbA,IAAI,GAAG,GAAG,WAAH,GACJ,oBAACK,MAAIA;QAAC,IAAG;QAAM,MAAK;QAAK,WAAU;OAC9BL,IAAI,GAAG,IAEZ,qBAER,oBAAC;QAAI,WAAU;OACVA,IAAI,QAAQ,EAAE,IAAI,CAACM,KAAKC,QAAAA,WAAAA,GACrB,oBAACC,KAAGA;YAAC,KAAKD;WAAQD,OAErBL,WAAW,WAAXA,GACG,oBAAC;QAAK,WAAU;OACXD,IAAI,IAAI,gBACT,oBAACS,MAAIA;QAAC,oBAAM,oBAACC,gBAAUA;QAAK,OAAO;QAAgB,MAAM;QAAM,OAAO;UAE1E;AAIpB"}

package/CommandPalette/components/GroupHeading.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const GroupHeading: ({ title }: {
+    title: string;
+}) => React.JSX.Element;

package/CommandPalette/components/GroupHeading.js

@@ -0,0 +1,10 @@
+import react from "react";
+const GroupHeading = ({ title })=>/*#__PURE__*/ react.createElement("span", {
+        className: "block px-sm pb-xs pt-sm text-xs font-semibold uppercase text-neutral-muted",
+        style: {
+            letterSpacing: ".06em"
+        }
+    }, title);
+export { GroupHeading };
+
+//# sourceMappingURL=GroupHeading.js.map

package/CommandPalette/components/GroupHeading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette/components/GroupHeading.js","sources":["../../../src/CommandPalette/components/GroupHeading.tsx"],"sourcesContent":["import React from \"react\";\n\nexport const GroupHeading = ({ title }: { title: string }) => (\n    <span\n        className=\"block px-sm pb-xs pt-sm text-xs font-semibold uppercase text-neutral-muted\"\n        style={{ letterSpacing: \".06em\" }}\n    >\n        {title}\n    </span>\n);\n"],"names":["GroupHeading","title"],"mappings":";AAEO,MAAMA,eAAe,CAAC,EAAEC,KAAK,EAAqB,iBACrD,oBAAC;QACG,WAAU;QACV,OAAO;YAAE,eAAe;QAAQ;OAE/BA"}

package/CommandPalette/components/HintIcon.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const HintIcon: ({ element }: {
+    element: React.ReactNode;
+}) => React.JSX.Element;

package/CommandPalette/components/HintIcon.js

@@ -0,0 +1,11 @@
+import react from "react";
+import { Icon } from "@webiny/admin-ui";
+const HintIcon = ({ element })=>/*#__PURE__*/ react.createElement(Icon, {
+        icon: element,
+        color: "neutral-light",
+        size: "xs",
+        label: ""
+    });
+export { HintIcon };
+
+//# sourceMappingURL=HintIcon.js.map

package/CommandPalette/components/HintIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette/components/HintIcon.js","sources":["../../../src/CommandPalette/components/HintIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@webiny/admin-ui\";\n\nexport const HintIcon = ({ element }: { element: React.ReactNode }) => (\n    <Icon icon={element} color={\"neutral-light\"} size={\"xs\"} label={\"\"} />\n);\n"],"names":["HintIcon","element","Icon"],"mappings":";;AAGO,MAAMA,WAAW,CAAC,EAAEC,OAAO,EAAgC,iBAC9D,oBAACC,MAAIA;QAAC,MAAMD;QAAS,OAAO;QAAiB,MAAM;QAAM,OAAO"}

package/CommandPalette/components/Kbd.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const Kbd: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;

package/CommandPalette/components/Kbd.js

@@ -0,0 +1,14 @@
+import react from "react";
+const Kbd = ({ children })=>/*#__PURE__*/ react.createElement("span", {
+        className: "inline-flex items-center justify-center rounded-sm border border-neutral-dimmed bg-neutral-base text-xs text-neutral-muted",
+        style: {
+            minWidth: 20,
+            height: 20,
+            padding: "0 6px",
+            gap: 2,
+            fontFamily: "var(--font-family-mono, monospace)"
+        }
+    }, children);
+export { Kbd };
+
+//# sourceMappingURL=Kbd.js.map

package/CommandPalette/components/Kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette/components/Kbd.js","sources":["../../../src/CommandPalette/components/Kbd.tsx"],"sourcesContent":["import React from \"react\";\n\nexport const Kbd = ({ children }: { children: React.ReactNode }) => (\n    <span\n        className=\"inline-flex items-center justify-center rounded-sm border border-neutral-dimmed bg-neutral-base text-xs text-neutral-muted\"\n        style={{\n            minWidth: 20,\n            height: 20,\n            padding: \"0 6px\",\n            gap: 2,\n            fontFamily: \"var(--font-family-mono, monospace)\"\n        }}\n    >\n        {children}\n    </span>\n);\n"],"names":["Kbd","children"],"mappings":";AAEO,MAAMA,MAAM,CAAC,EAAEC,QAAQ,EAAiC,iBAC3D,oBAAC;QACG,WAAU;QACV,OAAO;YACH,UAAU;YACV,QAAQ;YACR,SAAS;YACT,KAAK;YACL,YAAY;QAChB;OAECA"}

package/CommandPalette/components/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./Kbd.js";
+export * from "./HintIcon.js";
+export * from "./GroupHeading.js";
+export * from "./CommandItemRow.js";
+export * from "./CommandDetail.js";

package/CommandPalette/components/index.js

@@ -0,0 +1,5 @@
+export * from "./Kbd.js";
+export * from "./HintIcon.js";
+export * from "./GroupHeading.js";
+export * from "./CommandItemRow.js";
+export * from "./CommandDetail.js";

package/CommandPalette/constants.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Dedicated hotkey layer for the command palette. `useHotkeys` only fires handlers
+ * registered on the current top-most zIndex, so the palette owns its own layer.
+ * NOTE: components that register a higher zIndex while open will shadow `mod+k`.
+ * Layering interplay is revisited in a later phase.
+ */
+export declare const PALETTE_HOTKEY_ZINDEX = 90;
+export declare const NAVIGATION_GROUP = "Navigation";

package/CommandPalette/constants.js

@@ -0,0 +1,5 @@
+const PALETTE_HOTKEY_ZINDEX = 90;
+const NAVIGATION_GROUP = "Navigation";
+export { NAVIGATION_GROUP, PALETTE_HOTKEY_ZINDEX };
+
+//# sourceMappingURL=constants.js.map

package/CommandPalette/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette/constants.js","sources":["../../src/CommandPalette/constants.ts"],"sourcesContent":["/**\n * Dedicated hotkey layer for the command palette. `useHotkeys` only fires handlers\n * registered on the current top-most zIndex, so the palette owns its own layer.\n * NOTE: components that register a higher zIndex while open will shadow `mod+k`.\n * Layering interplay is revisited in a later phase.\n */\nexport const PALETTE_HOTKEY_ZINDEX = 90;\n\nexport const NAVIGATION_GROUP = \"Navigation\";\n"],"names":["PALETTE_HOTKEY_ZINDEX","NAVIGATION_GROUP"],"mappings":"AAMO,MAAMA,wBAAwB;AAE9B,MAAMC,mBAAmB"}

package/CommandPalette/deriveRows.d.ts

@@ -0,0 +1,19 @@
+import type { MenuConfig } from "@webiny/app-admin/config/AdminConfig/Menu.js";
+import type { CommandItemVm } from "@webiny/app-admin";
+import type { CommandGroup, CommandRow } from "./types.js";
+/**
+ * Turn an is-hotkey shortcut string ("cmd+shift+m") into display chips (["⌘","⇧","M"]).
+ */
+export declare const formatShortcut: (shortcut?: string) => string[] | undefined;
+/**
+ * Derive Navigation rows from the registered admin menus. A navigable menu is a leaf
+ * `Menu.Link` (carries a `to` path + string `text`); `Menu.Item` parents/groups have
+ * no `to` and are skipped, but their label/icon are used for the child's section/icon.
+ */
+export declare const deriveNavigationRows: (menus: MenuConfig[], navigateTo: (to: string) => void) => CommandRow[];
+/**
+ * Group DI commands (from the presenter view model) by their `category` (default
+ * "Actions"), preserving order. Commands with a detail view show "Open" (the palette
+ * stays open on a sub-view); the rest show "Run".
+ */
+export declare const commandVmsToGroups: (commands: CommandItemVm[], runCommand: (name: string) => void) => CommandGroup[];

package/CommandPalette/deriveRows.js

@@ -0,0 +1,100 @@
+import react from "react";
+const DEFAULT_COMMAND_GROUP = "Actions";
+const SHORTCUT_SYMBOLS = {
+    cmd: "⌘",
+    command: "⌘",
+    mod: "⌘",
+    ctrl: "⌃",
+    control: "⌃",
+    alt: "⌥",
+    option: "⌥",
+    shift: "⇧",
+    enter: "↵",
+    return: "↵"
+};
+const formatShortcut = (shortcut)=>{
+    if (!shortcut) return;
+    return shortcut.split("+").map((token)=>token.trim()).filter(Boolean).map((token)=>SHORTCUT_SYMBOLS[token.toLowerCase()] ?? token.toUpperCase());
+};
+const isNavigable = (element)=>{
+    if (!/*#__PURE__*/ react.isValidElement(element)) return false;
+    const props = element.props;
+    return "string" == typeof props.to && !!props.to && "string" == typeof props.text && !!props.text;
+};
+const deriveNavigationRows = (menus, navigateTo)=>{
+    const labelByName = new Map();
+    const iconByName = new Map();
+    const parentByName = new Map();
+    for (const menu of menus){
+        parentByName.set(menu.name, menu.parent ?? null);
+        const element = menu.element;
+        if (/*#__PURE__*/ react.isValidElement(element)) {
+            const props = element.props;
+            if ("string" == typeof props.text) labelByName.set(menu.name, props.text);
+            if (props.icon) iconByName.set(menu.name, props.icon);
+        }
+    }
+    const sectionFor = (name)=>{
+        const parts = [];
+        let parent = parentByName.get(name) ?? null;
+        for(let depth = 0; parent && depth < 10; depth++){
+            const label = labelByName.get(parent);
+            if (label) parts.unshift(label);
+            parent = parentByName.get(parent) ?? null;
+        }
+        return parts.length > 0 ? parts.join(" › ") : void 0;
+    };
+    const iconFor = (name, ownIcon)=>{
+        if (ownIcon) return ownIcon;
+        let parent = parentByName.get(name) ?? null;
+        for(let depth = 0; parent && depth < 10; depth++){
+            const icon = iconByName.get(parent);
+            if (icon) return icon;
+            parent = parentByName.get(parent) ?? null;
+        }
+    };
+    const rows = [];
+    const seenPaths = new Set();
+    for (const menu of menus){
+        if (!isNavigable(menu.element)) continue;
+        const { to, text, icon } = menu.element.props;
+        if (!seenPaths.has(to)) {
+            seenPaths.add(to);
+            rows.push({
+                key: menu.name,
+                value: `${text} ${menu.name}`.toLowerCase(),
+                label: text,
+                sub: sectionFor(menu.name),
+                icon: iconFor(menu.name, icon),
+                verb: "Open",
+                onRun: ()=>navigateTo(to)
+            });
+        }
+    }
+    return rows;
+};
+const commandVmsToGroups = (commands, runCommand)=>{
+    const groups = new Map();
+    for (const command of commands){
+        const category = command.category ?? DEFAULT_COMMAND_GROUP;
+        const rows = groups.get(category) ?? [];
+        rows.push({
+            key: command.name,
+            value: `${command.label} ${(command.keywords ?? []).join(" ")} ${command.name}`.toLowerCase(),
+            label: command.label,
+            sub: command.description,
+            icon: command.icon,
+            shortcut: formatShortcut(command.shortcut),
+            verb: command.hasDetailView ? "Open" : "Run",
+            onRun: ()=>runCommand(command.name)
+        });
+        groups.set(category, rows);
+    }
+    return Array.from(groups, ([title, rows])=>({
+            title,
+            rows
+        }));
+};
+export { commandVmsToGroups, deriveNavigationRows, formatShortcut };
+
+//# sourceMappingURL=deriveRows.js.map

package/CommandPalette/deriveRows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette/deriveRows.js","sources":["../../src/CommandPalette/deriveRows.tsx"],"sourcesContent":["import React from \"react\";\nimport type { MenuConfig } from \"@webiny/app-admin/config/AdminConfig/Menu.js\";\nimport type { CommandItemVm } from \"@webiny/app-admin\";\nimport type { CommandGroup, CommandRow } from \"./types.js\";\n\nconst DEFAULT_COMMAND_GROUP = \"Actions\";\n\nconst SHORTCUT_SYMBOLS: Record<string, string> = {\n    cmd: \"⌘\",\n    command: \"⌘\",\n    mod: \"⌘\",\n    ctrl: \"⌃\",\n    control: \"⌃\",\n    alt: \"⌥\",\n    option: \"⌥\",\n    shift: \"⇧\",\n    enter: \"↵\",\n    return: \"↵\"\n};\n\n/**\n * Turn an is-hotkey shortcut string (\"cmd+shift+m\") into display chips ([\"⌘\",\"⇧\",\"M\"]).\n */\nexport const formatShortcut = (shortcut?: string): string[] | undefined => {\n    if (!shortcut) {\n        return undefined;\n    }\n    return shortcut\n        .split(\"+\")\n        .map(token => token.trim())\n        .filter(Boolean)\n        .map(token => SHORTCUT_SYMBOLS[token.toLowerCase()] ?? token.toUpperCase());\n};\n\nconst isNavigable = (\n    element: unknown\n): element is React.ReactElement<{ to: string; text: string; icon?: React.ReactNode }> => {\n    if (!React.isValidElement(element)) {\n        return false;\n    }\n    const props = element.props as { to?: unknown; text?: unknown };\n    return (\n        typeof props.to === \"string\" && !!props.to && typeof props.text === \"string\" && !!props.text\n    );\n};\n\n/**\n * Derive Navigation rows from the registered admin menus. A navigable menu is a leaf\n * `Menu.Link` (carries a `to` path + string `text`); `Menu.Item` parents/groups have\n * no `to` and are skipped, but their label/icon are used for the child's section/icon.\n */\nexport const deriveNavigationRows = (\n    menus: MenuConfig[],\n    navigateTo: (to: string) => void\n): CommandRow[] => {\n    const labelByName = new Map<string, string>();\n    const iconByName = new Map<string, React.ReactNode>();\n    const parentByName = new Map<string, string | null>();\n    for (const menu of menus) {\n        parentByName.set(menu.name, menu.parent ?? null);\n        const element = menu.element;\n        if (React.isValidElement(element)) {\n            const props = element.props as { text?: unknown; icon?: React.ReactNode };\n            if (typeof props.text === \"string\") {\n                labelByName.set(menu.name, props.text);\n            }\n            if (props.icon) {\n                iconByName.set(menu.name, props.icon);\n            }\n        }\n    }\n\n    // Full ancestor breadcrumb (\"Settings › System\"), so same-named leaves under\n    // different sections (e.g. the File Manager app vs. its settings page) are\n    // distinguishable. Depth-guarded against malformed parent cycles.\n    const sectionFor = (name: string): string | undefined => {\n        const parts: string[] = [];\n        let parent = parentByName.get(name) ?? null;\n        for (let depth = 0; parent && depth < 10; depth++) {\n            const label = labelByName.get(parent);\n            if (label) {\n                parts.unshift(label);\n            }\n            parent = parentByName.get(parent) ?? null;\n        }\n        return parts.length > 0 ? parts.join(\" › \") : undefined;\n    };\n\n    // Leaf items often carry no icon of their own; walk up to the nearest ancestor\n    // that has one (a group may be icon-less, but the section root usually isn't).\n    const iconFor = (name: string, ownIcon?: React.ReactNode): React.ReactNode | undefined => {\n        if (ownIcon) {\n            return ownIcon;\n        }\n        let parent = parentByName.get(name) ?? null;\n        for (let depth = 0; parent && depth < 10; depth++) {\n            const icon = iconByName.get(parent);\n            if (icon) {\n                return icon;\n            }\n            parent = parentByName.get(parent) ?? null;\n        }\n        return undefined;\n    };\n\n    const rows: CommandRow[] = [];\n    const seenPaths = new Set<string>();\n    for (const menu of menus) {\n        if (!isNavigable(menu.element)) {\n            continue;\n        }\n        const { to, text, icon } = menu.element.props;\n        // Skip exact duplicate destinations (same path registered more than once).\n        if (seenPaths.has(to)) {\n            continue;\n        }\n        seenPaths.add(to);\n\n        rows.push({\n            key: menu.name,\n            value: `${text} ${menu.name}`.toLowerCase(),\n            label: text,\n            sub: sectionFor(menu.name),\n            icon: iconFor(menu.name, icon),\n            verb: \"Open\",\n            onRun: () => navigateTo(to)\n        });\n    }\n    return rows;\n};\n\n/**\n * Group DI commands (from the presenter view model) by their `category` (default\n * \"Actions\"), preserving order. Commands with a detail view show \"Open\" (the palette\n * stays open on a sub-view); the rest show \"Run\".\n */\nexport const commandVmsToGroups = (\n    commands: CommandItemVm[],\n    runCommand: (name: string) => void\n): CommandGroup[] => {\n    const groups = new Map<string, CommandRow[]>();\n    for (const command of commands) {\n        const category = command.category ?? DEFAULT_COMMAND_GROUP;\n        const rows = groups.get(category) ?? [];\n        rows.push({\n            key: command.name,\n            value: `${command.label} ${(command.keywords ?? []).join(\" \")} ${command.name}`.toLowerCase(),\n            label: command.label,\n            sub: command.description,\n            icon: command.icon,\n            shortcut: formatShortcut(command.shortcut),\n            verb: command.hasDetailView ? \"Open\" : \"Run\",\n            onRun: () => runCommand(command.name)\n        });\n        groups.set(category, rows);\n    }\n    return Array.from(groups, ([title, rows]) => ({ title, rows }));\n};\n"],"names":["DEFAULT_COMMAND_GROUP","SHORTCUT_SYMBOLS","formatShortcut","shortcut","token","Boolean","isNavigable","element","React","props","deriveNavigationRows","menus","navigateTo","labelByName","Map","iconByName","parentByName","menu","sectionFor","name","parts","parent","depth","label","undefined","iconFor","ownIcon","icon","rows","seenPaths","Set","to","text","commandVmsToGroups","commands","runCommand","groups","command","category","Array","title"],"mappings":"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"}

package/CommandPalette/types.d.ts

@@ -0,0 +1,15 @@
+import type React from "react";
+export interface CommandRow {
+    key: string;
+    value: string;
+    label: string;
+    sub?: string;
+    icon?: React.ReactNode;
+    shortcut?: string[];
+    verb: string;
+    onRun: () => void;
+}
+export interface CommandGroup {
+    title: string;
+    rows: CommandRow[];
+}

package/Dashboard/Welcome.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-declare const Welcome: () => React.JSX.Element | null;
+declare const Welcome: () => React.JSX.Element;
 export default Welcome;