@webiny/app-admin-ui 6.6.0-alpha.0 → 6.6.0-alpha.2

package/CommandPalette/components/ApprovalPlan.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette/components/ApprovalPlan.js","sources":["../../../src/CommandPalette/components/ApprovalPlan.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { cn } from \"@webiny/admin-ui\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as BoltIcon } from \"@webiny/icons/bolt.svg\";\nimport { ReactComponent as WarningIcon } from \"@webiny/icons/warning.svg\";\nimport type { AiChatPendingApproval } from \"@webiny/app-admin\";\n\nexport interface ApprovalPlanProps {\n    approvals: AiChatPendingApproval[];\n    busy: boolean;\n    onApprove: () => void;\n    onReject: () => void;\n}\n\n/**\n * The confirm gate for a proposed change.\n *\n * Arguments are shown as raw JSON on purpose. A prose summary would be the assistant describing its\n * own request — and the assistant is exactly what is not yet trusted here. What the user approves has\n * to be what actually runs.\n */\nexport const ApprovalPlan = ({ approvals, busy, onApprove, onReject }: ApprovalPlanProps) => {\n    if (approvals.length === 0) {\n        return null;\n    }\n\n    const destructive = approvals.some(approval => approval.destructive);\n\n    let heading = `Approve ${approvals.length} changes`;\n    if (approvals.length === 1) {\n        heading = `Approve: ${approvals[0].title ?? approvals[0].toolName}`;\n    }\n\n    return (\n        <div\n            className={cn(\n                \"mt-sm overflow-hidden rounded-md border border-neutral-dimmed\",\n                destructive ? \"bg-destructive-subtle\" : \"bg-warning-subtle\"\n            )}\n        >\n            <div className=\"flex items-center gap-sm border-b border-neutral-dimmed px-sm py-xs-plus\">\n                <Icon\n                    icon={destructive ? <WarningIcon /> : <BoltIcon />}\n                    size=\"sm\"\n                    label=\"\"\n                    color=\"inherit\"\n                    className={destructive ? \"text-destructive-primary\" : undefined}\n                />\n                <Text size=\"sm\" className=\"font-semibold text-neutral-primary\">\n                    {heading}\n                </Text>\n                {destructive ? (\n                    <Text size=\"sm\" className=\"ml-auto text-destructive-primary\">\n                        Cannot be undone\n                    </Text>\n                ) : null}\n            </div>\n\n            <div className=\"bg-neutral-base px-sm py-xs-plus\">\n                {approvals.map(approval => (\n                    <div key={approval.approvalId} className=\"mb-xs\">\n                        <Text as=\"div\" size=\"sm\" className=\"font-mono text-neutral-strong\">\n                            {approval.toolName}\n                        </Text>\n                        <pre className=\"mt-xxs overflow-x-auto rounded bg-neutral-subtle p-sm text-xs text-neutral-strong\">\n                            {JSON.stringify(approval.input, null, 2)}\n                        </pre>\n                    </div>\n                ))}\n\n                <div className=\"mt-sm flex items-center gap-sm\">\n                    <Button variant=\"primary\" text=\"Run\" disabled={busy} onClick={onApprove} />\n                    <Button variant=\"secondary\" text=\"Reject\" disabled={busy} onClick={onReject} />\n                    <Text size=\"sm\" className=\"text-neutral-muted\">\n                        Nothing runs until you confirm.\n                    </Text>\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"names":["ApprovalPlan","approvals","busy","onApprove","onReject","destructive","approval","heading","cn","Icon","WarningIcon","BoltIcon","undefined","Text","JSON","Button"],"mappings":";;;;AAuBO,MAAMA,eAAe,CAAC,EAAEC,SAAS,EAAEC,IAAI,EAAEC,SAAS,EAAEC,QAAQ,EAAqB;IACpF,IAAIH,AAAqB,MAArBA,UAAU,MAAM,EAChB,OAAO;IAGX,MAAMI,cAAcJ,UAAU,IAAI,CAACK,CAAAA,WAAYA,SAAS,WAAW;IAEnE,IAAIC,UAAU,CAAC,QAAQ,EAAEN,UAAU,MAAM,CAAC,QAAQ,CAAC;IACnD,IAAIA,AAAqB,MAArBA,UAAU,MAAM,EAChBM,UAAU,CAAC,SAAS,EAAEN,SAAS,CAAC,EAAE,CAAC,KAAK,IAAIA,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE;IAGvE,OAAO,WAAP,GACI,oBAAC;QACG,WAAWO,GACP,iEACAH,cAAc,0BAA0B;qBAG5C,oBAAC;QAAI,WAAU;qBACX,oBAACI,MAAIA;QACD,MAAMJ,cAAc,WAAdA,GAAc,oBAACK,4BAAWA,QAAAA,WAAAA,GAAM,oBAACC,gBAAQA;QAC/C,MAAK;QACL,OAAM;QACN,OAAM;QACN,WAAWN,cAAc,6BAA6BO;sBAE1D,oBAACC,MAAIA;QAAC,MAAK;QAAK,WAAU;OACrBN,UAEJF,cAAc,WAAdA,GACG,oBAACQ,MAAIA;QAAC,MAAK;QAAK,WAAU;OAAmC,sBAG7D,qBAGR,oBAAC;QAAI,WAAU;OACVZ,UAAU,GAAG,CAACK,CAAAA,WAAAA,WAAAA,GACX,oBAAC;YAAI,KAAKA,SAAS,UAAU;YAAE,WAAU;yBACrC,oBAACO,MAAIA;YAAC,IAAG;YAAM,MAAK;YAAK,WAAU;WAC9BP,SAAS,QAAQ,iBAEtB,oBAAC;YAAI,WAAU;WACVQ,KAAK,SAAS,CAACR,SAAS,KAAK,EAAE,MAAM,qBAKlD,oBAAC;QAAI,WAAU;qBACX,oBAACS,QAAMA;QAAC,SAAQ;QAAU,MAAK;QAAM,UAAUb;QAAM,SAASC;sBAC9D,oBAACY,QAAMA;QAAC,SAAQ;QAAY,MAAK;QAAS,UAAUb;QAAM,SAASE;sBACnE,oBAACS,MAAIA;QAAC,MAAK;QAAK,WAAU;OAAqB;AAOnE"}

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,41 @@
+import react from "react";
+import { Command, useCommandState } from "cmdk";
+import { Icon, Text, cn } 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);
+    let tile = "border-neutral-dimmed bg-neutral-subtle";
+    if (selected) tile = "border-primary bg-primary-subtle";
+    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: cn("grid size-xl shrink-0 place-items-center rounded-md border", tile)
+    }, 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 { cn } from \"@webiny/admin-ui\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { 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    let tile = \"border-neutral-dimmed bg-neutral-subtle\";\n    if (selected) {\n        tile = \"border-primary bg-primary-subtle\";\n    }\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 className={cn(\"grid size-xl shrink-0 place-items-center rounded-md border\", tile)}>\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","tile","Command","cn","Text","key","index","Kbd","Icon","ReturnIcon"],"mappings":";;;;;AASO,MAAMA,iBAAiB,CAAC,EAAEC,GAAG,EAAuB;IACvD,MAAMC,WAAWC,gBAAgBC,CAAAA,QAAUA,AAAAA,CAAAA,MAAM,KAAK,IAAI,EAAC,MAAOH,IAAI,KAAK;IAE3E,IAAII,OAAO;IACX,IAAIH,UACAG,OAAO;IAGX,OAAO,WAAP,GACI,oBAACC,QAAQ,IAAI;QACT,OAAOL,IAAI,KAAK;QAChB,UAAUA,IAAI,KAAK;QACnB,WAAU;qBAEV,oBAAC;QAAI,WAAWM,GAAG,8DAA8DF;OAC5EJ,IAAI,IAAI,IAAI,qBAEjB,oBAAC;QAAI,WAAU;qBACX,oBAACO,MAAIA;QAAC,IAAG;QAAM,MAAK;QAAK,WAAU;OAC9BP,IAAI,KAAK,GAEbA,IAAI,GAAG,GAAG,WAAH,GACJ,oBAACO,MAAIA;QAAC,IAAG;QAAM,MAAK;QAAK,WAAU;OAC9BP,IAAI,GAAG,IAEZ,qBAER,oBAAC;QAAI,WAAU;OACVA,IAAI,QAAQ,EAAE,IAAI,CAACQ,KAAKC,QAAAA,WAAAA,GACrB,oBAACC,KAAGA;YAAC,KAAKD;WAAQD,OAErBP,WAAW,WAAXA,GACG,oBAAC;QAAK,WAAU;OACXD,IAAI,IAAI,gBACT,oBAACW,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/NoResults.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+/**
+ * A dead end is the best moment to offer the assistant: the user has already expressed intent in
+ * words, so hand that exact query straight to AI rather than making them retype it.
+ */
+export interface NoResultsProps {
+    query: string;
+    onAskAi: () => void;
+}
+export declare const NoResults: ({ query, onAskAi }: NoResultsProps) => React.JSX.Element;

package/CommandPalette/components/NoResults.js

@@ -0,0 +1,33 @@
+import react from "react";
+import { Button, Icon, Text } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/search_off.svg";
+import { ReactComponent as auto_awesome_svg_ReactComponent } from "@webiny/icons/auto_awesome.svg";
+const NoResults = ({ query, onAskAi })=>/*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col items-center justify-center px-lg py-xxl text-center"
+    }, /*#__PURE__*/ react.createElement(Icon, {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        size: "lg",
+        label: "",
+        color: "neutral-strong-transparent"
+    }), /*#__PURE__*/ react.createElement(Text, {
+        as: "div",
+        size: "lg",
+        className: "mt-sm font-semibold text-neutral-strong"
+    }, `No results for “${query}”`), /*#__PURE__*/ react.createElement(Text, {
+        as: "div",
+        size: "sm",
+        className: "mb-md mt-xxs text-neutral-muted"
+    }, "No page or action matches. Ask the assistant instead."), /*#__PURE__*/ react.createElement(Button, {
+        variant: "secondary",
+        text: "Ask AI",
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(auto_awesome_svg_ReactComponent, null),
+            size: "sm",
+            label: "",
+            color: "inherit"
+        }),
+        onClick: onAskAi
+    }));
+export { NoResults };
+
+//# sourceMappingURL=NoResults.js.map

package/CommandPalette/components/NoResults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette/components/NoResults.js","sources":["../../../src/CommandPalette/components/NoResults.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button, Icon, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as SearchOffIcon } from \"@webiny/icons/search_off.svg\";\nimport { ReactComponent as AiIcon } from \"@webiny/icons/auto_awesome.svg\";\n\n/**\n * A dead end is the best moment to offer the assistant: the user has already expressed intent in\n * words, so hand that exact query straight to AI rather than making them retype it.\n */\nexport interface NoResultsProps {\n    query: string;\n    onAskAi: () => void;\n}\n\nexport const NoResults = ({ query, onAskAi }: NoResultsProps) => (\n    <div className=\"flex flex-col items-center justify-center px-lg py-xxl text-center\">\n        <Icon icon={<SearchOffIcon />} size=\"lg\" label=\"\" color=\"neutral-strong-transparent\" />\n        <Text as=\"div\" size=\"lg\" className=\"mt-sm font-semibold text-neutral-strong\">\n            {`No results for “${query}”`}\n        </Text>\n        <Text as=\"div\" size=\"sm\" className=\"mb-md mt-xxs text-neutral-muted\">\n            No page or action matches. Ask the assistant instead.\n        </Text>\n        <Button\n            variant=\"secondary\"\n            text=\"Ask AI\"\n            icon={<Icon icon={<AiIcon />} size=\"sm\" label=\"\" color=\"inherit\" />}\n            onClick={onAskAi}\n        />\n    </div>\n);\n"],"names":["NoResults","query","onAskAi","Icon","SearchOffIcon","Text","Button","AiIcon"],"mappings":";;;;AAcO,MAAMA,YAAY,CAAC,EAAEC,KAAK,EAAEC,OAAO,EAAkB,iBACxD,oBAAC;QAAI,WAAU;qBACX,oBAACC,MAAIA;QAAC,oBAAM,oBAACC,gBAAaA;QAAK,MAAK;QAAK,OAAM;QAAG,OAAM;sBACxD,oBAACC,MAAIA;QAAC,IAAG;QAAM,MAAK;QAAK,WAAU;OAC9B,CAAC,gBAAgB,EAAEJ,MAAM,CAAC,CAAC,iBAEhC,oBAACI,MAAIA;QAAC,IAAG;QAAM,MAAK;QAAK,WAAU;OAAkC,wEAGrE,oBAACC,QAAMA;QACH,SAAQ;QACR,MAAK;QACL,oBAAM,oBAACH,MAAIA;YAAC,oBAAM,oBAACI,iCAAMA;YAAK,MAAK;YAAK,OAAM;YAAG,OAAM;;QACvD,SAASL"}

package/CommandPalette/components/PaletteFooter.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface Hint {
+    keys: React.ReactNode;
+    label: string;
+}
+/**
+ * Hints are mode-specific: the shortcuts that matter while searching are not the ones that matter
+ * mid-conversation, and a static row would advertise keys that do nothing.
+ */
+export declare const PaletteFooter: ({ label, hints }: {
+    label: string;
+    hints: Hint[];
+}) => React.JSX.Element;

package/CommandPalette/components/PaletteFooter.js

@@ -0,0 +1,18 @@
+import react from "react";
+import { Text } from "@webiny/admin-ui";
+import { Kbd } from "./Kbd.js";
+const PaletteFooter = ({ label, hints })=>/*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-none items-center justify-between gap-sm border-t border-neutral-subtle bg-neutral-subtle px-sm py-xs-plus"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "truncate text-neutral-muted"
+    }, label), /*#__PURE__*/ react.createElement("div", {
+        className: "flex shrink-0 items-center gap-md"
+    }, hints.map((hint)=>/*#__PURE__*/ react.createElement(Text, {
+            key: hint.label,
+            size: "sm",
+            className: "inline-flex items-center gap-xs text-neutral-muted"
+        }, /*#__PURE__*/ react.createElement(Kbd, null, hint.keys), hint.label))));
+export { PaletteFooter };
+
+//# sourceMappingURL=PaletteFooter.js.map

package/CommandPalette/components/PaletteFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette/components/PaletteFooter.js","sources":["../../../src/CommandPalette/components/PaletteFooter.tsx"],"sourcesContent":["import React from \"react\";\nimport { Text } from \"@webiny/admin-ui\";\nimport { Kbd } from \"./Kbd.js\";\n\nexport interface Hint {\n    keys: React.ReactNode;\n    label: string;\n}\n\n/**\n * Hints are mode-specific: the shortcuts that matter while searching are not the ones that matter\n * mid-conversation, and a static row would advertise keys that do nothing.\n */\nexport const PaletteFooter = ({ label, hints }: { label: string; hints: Hint[] }) => (\n    <div className=\"flex flex-none items-center justify-between gap-sm border-t border-neutral-subtle bg-neutral-subtle px-sm py-xs-plus\">\n        <Text size=\"sm\" className=\"truncate text-neutral-muted\">\n            {label}\n        </Text>\n        <div className=\"flex shrink-0 items-center gap-md\">\n            {hints.map(hint => (\n                <Text\n                    key={hint.label}\n                    size=\"sm\"\n                    className=\"inline-flex items-center gap-xs text-neutral-muted\"\n                >\n                    <Kbd>{hint.keys}</Kbd>\n                    {hint.label}\n                </Text>\n            ))}\n        </div>\n    </div>\n);\n"],"names":["PaletteFooter","label","hints","Text","hint","Kbd"],"mappings":";;;AAaO,MAAMA,gBAAgB,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAoC,iBAC5E,oBAAC;QAAI,WAAU;qBACX,oBAACC,MAAIA;QAAC,MAAK;QAAK,WAAU;OACrBF,QAAAA,WAAAA,GAEL,oBAAC;QAAI,WAAU;OACVC,MAAM,GAAG,CAACE,CAAAA,OAAAA,WAAAA,GACP,oBAACD,MAAIA;YACD,KAAKC,KAAK,KAAK;YACf,MAAK;YACL,WAAU;yBAEV,oBAACC,KAAGA,MAAED,KAAK,IAAI,GACdA,KAAK,KAAK"}

package/CommandPalette/components/ToolChip.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface ToolChipProps {
+    name: string;
+    /** Done chips read as confirmed work, failed ones as a call the model has to recover from. */
+    state: "running" | "done" | "failed";
+}
+export declare const ToolChip: ({ name, state }: ToolChipProps) => React.JSX.Element;

package/CommandPalette/components/ToolChip.js

@@ -0,0 +1,32 @@
+import react from "react";
+import { Icon, Text, cn } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/check.svg";
+import { ReactComponent as autorenew_svg_ReactComponent } from "@webiny/icons/autorenew.svg";
+import { ReactComponent as error_svg_ReactComponent } from "@webiny/icons/error.svg";
+const toolIcon = (state)=>{
+    if ("done" === state) return /*#__PURE__*/ react.createElement(ReactComponent, null);
+    if ("failed" === state) return /*#__PURE__*/ react.createElement(error_svg_ReactComponent, null);
+    return /*#__PURE__*/ react.createElement(autorenew_svg_ReactComponent, null);
+};
+const ToolChip = ({ name, state })=>{
+    const done = "done" === state;
+    const failed = "failed" === state;
+    let tone = "border-neutral-dimmed bg-neutral-subtle text-neutral-strong";
+    if (done) tone = "border-success-subtle bg-success-subtle text-success";
+    else if (failed) tone = "border-destructive-subtle bg-destructive-subtle text-destructive-primary";
+    return /*#__PURE__*/ react.createElement("span", {
+        className: cn("inline-flex items-center gap-xs rounded-xl border px-sm py-xxs", tone)
+    }, /*#__PURE__*/ react.createElement(Icon, {
+        icon: toolIcon(state),
+        size: "xs",
+        label: "",
+        color: "inherit",
+        className: "running" === state ? "animate-spin" : void 0
+    }), /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "font-mono"
+    }, name));
+};
+export { ToolChip };
+
+//# sourceMappingURL=ToolChip.js.map

package/CommandPalette/components/ToolChip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette/components/ToolChip.js","sources":["../../../src/CommandPalette/components/ToolChip.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"@webiny/admin-ui\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as CheckIcon } from \"@webiny/icons/check.svg\";\nimport { ReactComponent as SpinnerIcon } from \"@webiny/icons/autorenew.svg\";\nimport { ReactComponent as ErrorIcon } from \"@webiny/icons/error.svg\";\n\nexport interface ToolChipProps {\n    name: string;\n    /** Done chips read as confirmed work, failed ones as a call the model has to recover from. */\n    state: \"running\" | \"done\" | \"failed\";\n}\n\n/**\n * One tool the assistant called. Icon colour comes from the parent because `Icon` only offers\n * neutral/accent variants — `inherit` lets the chip's own text colour drive it.\n */\n/*\n * Lower-case on purpose: this picks an element, it is not a component. `Icon` does\n * `cloneElement(icon, { className })` to apply size, colour and the spin animation, so the SVG\n * element itself has to be what reaches it. Wrapping this in a component would hand those classes to\n * the wrapper, which drops them, and the chips would silently lose their styling.\n */\nconst toolIcon = (state: ToolChipProps[\"state\"]) => {\n    if (state === \"done\") {\n        return <CheckIcon />;\n    }\n\n    if (state === \"failed\") {\n        return <ErrorIcon />;\n    }\n\n    return <SpinnerIcon />;\n};\n\nexport const ToolChip = ({ name, state }: ToolChipProps) => {\n    const done = state === \"done\";\n    const failed = state === \"failed\";\n\n    let tone = \"border-neutral-dimmed bg-neutral-subtle text-neutral-strong\";\n    if (done) {\n        tone = \"border-success-subtle bg-success-subtle text-success\";\n    } else if (failed) {\n        tone = \"border-destructive-subtle bg-destructive-subtle text-destructive-primary\";\n    }\n\n    return (\n        <span\n            className={cn(\"inline-flex items-center gap-xs rounded-xl border px-sm py-xxs\", tone)}\n        >\n            <Icon\n                icon={toolIcon(state)}\n                size=\"xs\"\n                label=\"\"\n                color=\"inherit\"\n                className={state === \"running\" ? \"animate-spin\" : undefined}\n            />\n            <Text size=\"sm\" className=\"font-mono\">\n                {name}\n            </Text>\n        </span>\n    );\n};\n"],"names":["toolIcon","state","CheckIcon","ErrorIcon","SpinnerIcon","ToolChip","name","done","failed","tone","cn","Icon","undefined","Text"],"mappings":";;;;;AAwBA,MAAMA,WAAW,CAACC;IACd,IAAIA,AAAU,WAAVA,OACA,OAAO,WAAP,GAAO,oBAACC,gBAASA;IAGrB,IAAID,AAAU,aAAVA,OACA,OAAO,WAAP,GAAO,oBAACE,0BAASA;IAGrB,OAAO,WAAP,GAAO,oBAACC,8BAAWA;AACvB;AAEO,MAAMC,WAAW,CAAC,EAAEC,IAAI,EAAEL,KAAK,EAAiB;IACnD,MAAMM,OAAON,AAAU,WAAVA;IACb,MAAMO,SAASP,AAAU,aAAVA;IAEf,IAAIQ,OAAO;IACX,IAAIF,MACAE,OAAO;SACJ,IAAID,QACPC,OAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QACG,WAAWC,GAAG,kEAAkED;qBAEhF,oBAACE,MAAIA;QACD,MAAMX,SAASC;QACf,MAAK;QACL,OAAM;QACN,OAAM;QACN,WAAWA,AAAU,cAAVA,QAAsB,iBAAiBW;sBAEtD,oBAACC,MAAIA;QAAC,MAAK;QAAK,WAAU;OACrBP;AAIjB"}

package/CommandPalette/components/index.d.ts

@@ -0,0 +1,13 @@
+export { CommandDetail } from "./CommandDetail.js";
+export { CommandItemRow } from "./CommandItemRow.js";
+export { GroupHeading } from "./GroupHeading.js";
+export { HintIcon } from "./HintIcon.js";
+export { Kbd } from "./Kbd.js";
+export { AiModeBadge } from "./AiModeBadge.js";
+export { AiSuggestions, AI_SUGGESTIONS } from "./AiSuggestions.js";
+export { AiTurn } from "./AiTurn.js";
+export { ApprovalPlan } from "./ApprovalPlan.js";
+export { AnswerSkeleton } from "./AnswerSkeleton.js";
+export { NoResults } from "./NoResults.js";
+export { PaletteFooter, type Hint } from "./PaletteFooter.js";
+export { ToolChip } from "./ToolChip.js";

package/CommandPalette/components/index.js

@@ -0,0 +1,13 @@
+export { CommandDetail } from "./CommandDetail.js";
+export { CommandItemRow } from "./CommandItemRow.js";
+export { GroupHeading } from "./GroupHeading.js";
+export { HintIcon } from "./HintIcon.js";
+export { Kbd } from "./Kbd.js";
+export { AiModeBadge } from "./AiModeBadge.js";
+export { AI_SUGGESTIONS, AiSuggestions } from "./AiSuggestions.js";
+export { AiTurn } from "./AiTurn.js";
+export { ApprovalPlan } from "./ApprovalPlan.js";
+export { AnswerSkeleton } from "./AnswerSkeleton.js";
+export { NoResults } from "./NoResults.js";
+export { PaletteFooter } from "./PaletteFooter.js";
+export { ToolChip } from "./ToolChip.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/modes/PaletteMode.d.ts

@@ -0,0 +1,73 @@
+import type React from "react";
+import type { Hint } from "../components/index.js";
+/**
+ * What a mode needs from the palette while it is handling a key.
+ *
+ * The palette owns the query and the input element, because there is ONE input row across every
+ * mode and switching must not move or remount it. A mode reads and writes the query through this
+ * rather than holding its own.
+ */
+export interface PaletteModeKeyContext {
+    query: string;
+    setQuery(value: string): void;
+    /** Leave this mode and return to the command list. */
+    exit(): void;
+}
+/** How the palette should present itself while this mode is active. */
+export interface PaletteModeAppearance {
+    /** Rendered in the input row, ahead of the input itself. */
+    icon: React.ReactNode;
+    iconColor: "accent" | "neutral-light";
+    iconLabel: string;
+    /** Optional marker beside the icon, e.g. a mode name pill. */
+    badge?: React.ReactNode;
+    placeholder: string;
+    footerLabel: string;
+    hints: Hint[];
+    /**
+     * Taller panel. A conversation grows and wants the room; a command list does not, and a list
+     * stretched to full height looks broken when it holds three items.
+     */
+    tall: boolean;
+}
+/**
+ * One way the palette can behave.
+ *
+ * A mode supplies its body, its keys and how the palette should look while it is active; the palette
+ * owns the shell, the query and the input. The point of the split is that adding a mode does not
+ * mean editing the palette: everything AI lives in `createAiMode`, and the palette only knows this
+ * interface.
+ *
+ * `appearance` and `body` are read during render, so an implementation can serve them from getters
+ * over observable state and let a reactive palette re-render on its own.
+ */
+export interface PaletteMode {
+    appearance: PaletteModeAppearance;
+    /** Rendered in the palette's scroll area, in place of the command list. */
+    body: React.ReactNode;
+    /**
+     * Enter the mode, optionally carrying what the user had already typed.
+     *
+     * The seed exists for ONE entry point: the "Ask AI" button in the no-results state. A command
+     * search that found nothing already holds a sentence the user typed, and the button turns it
+     * into the question instead of making them retype it. Every other way in (space on an empty
+     * query, `mod+k`, selecting the Ask AI command) passes nothing and leaves an empty input.
+     *
+     * The palette calls this; the mode decides what a seed means. Returning focus to the shared
+     * input is the palette's job, since the input is the palette's.
+     */
+    enter(seed?: string): void;
+    /** Drop any state. Called when the mode is left and when the palette closes. */
+    reset(): void;
+    /**
+     * Handle a key while this mode is active. Return true when the key was consumed, so the palette
+     * leaves it alone.
+     */
+    handleKey(event: React.KeyboardEvent, context: PaletteModeKeyContext): boolean;
+    /**
+     * Called after the palette renders this mode's body, with the scroll container it was rendered
+     * into. For a mode whose body grows, such as a conversation, this is where it keeps the newest
+     * content in view. The element belongs to the palette; a mode only reads or scrolls it.
+     */
+    afterRender?(scrollContainer: HTMLElement): void;
+}