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

package/CommandPalette/components/AnswerSkeleton.js

@@ -0,0 +1,20 @@
+import react from "react";
+import { Skeleton } from "@webiny/admin-ui";
+const AnswerSkeleton = ()=>/*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-xs"
+    }, /*#__PURE__*/ react.createElement(Skeleton, {
+        type: "text",
+        size: "xs",
+        className: "w-[78%]"
+    }), /*#__PURE__*/ react.createElement(Skeleton, {
+        type: "text",
+        size: "xs",
+        className: "w-[92%]"
+    }), /*#__PURE__*/ react.createElement(Skeleton, {
+        type: "text",
+        size: "xs",
+        className: "w-[54%]"
+    }));
+export { AnswerSkeleton };
+
+//# sourceMappingURL=AnswerSkeleton.js.map

package/CommandPalette/components/AnswerSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette/components/AnswerSkeleton.js","sources":["../../../src/CommandPalette/components/AnswerSkeleton.tsx"],"sourcesContent":["import React from \"react\";\nimport { Skeleton } from \"@webiny/admin-ui\";\n\n/**\n * Stands in for the answer while the request is in flight. Staggered widths read as prose rather\n * than as a progress bar, which is honest: we cannot show real progress without streaming.\n */\nexport const AnswerSkeleton = () => (\n    <div className=\"flex flex-col gap-xs\">\n        <Skeleton type=\"text\" size=\"xs\" className=\"w-[78%]\" />\n        <Skeleton type=\"text\" size=\"xs\" className=\"w-[92%]\" />\n        <Skeleton type=\"text\" size=\"xs\" className=\"w-[54%]\" />\n    </div>\n);\n"],"names":["AnswerSkeleton","Skeleton"],"mappings":";;AAOO,MAAMA,iBAAiB,kBAC1B,oBAAC;QAAI,WAAU;qBACX,oBAACC,UAAQA;QAAC,MAAK;QAAO,MAAK;QAAK,WAAU;sBAC1C,oBAACA,UAAQA;QAAC,MAAK;QAAO,MAAK;QAAK,WAAU;sBAC1C,oBAACA,UAAQA;QAAC,MAAK;QAAO,MAAK;QAAK,WAAU"}

package/CommandPalette/components/ApprovalPlan.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import type { AdminAssistantPendingApproval } from "@webiny/app-admin";
+export interface ApprovalPlanProps {
+    approvals: AdminAssistantPendingApproval[];
+    busy: boolean;
+    onApprove: () => void;
+    onReject: () => void;
+}
+/**
+ * The confirm gate for a proposed change.
+ *
+ * Arguments are shown as raw JSON on purpose. A prose summary would be the assistant describing its
+ * own request — and the assistant is exactly what is not yet trusted here. What the user approves has
+ * to be what actually runs.
+ */
+export declare const ApprovalPlan: ({ approvals, busy, onApprove, onReject }: ApprovalPlanProps) => React.JSX.Element | null;

package/CommandPalette/components/ApprovalPlan.js

@@ -0,0 +1,56 @@
+import react from "react";
+import { Button, Icon, Text, cn } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/bolt.svg";
+import { ReactComponent as warning_svg_ReactComponent } from "@webiny/icons/warning.svg";
+const ApprovalPlan = ({ approvals, busy, onApprove, onReject })=>{
+    if (0 === approvals.length) return null;
+    const destructive = approvals.some((approval)=>approval.destructive);
+    let heading = `Approve ${approvals.length} changes`;
+    if (1 === approvals.length) heading = `Approve: ${approvals[0].title ?? approvals[0].toolName}`;
+    return /*#__PURE__*/ react.createElement("div", {
+        className: cn("mt-sm overflow-hidden rounded-md border border-neutral-dimmed", destructive ? "bg-destructive-subtle" : "bg-warning-subtle")
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-sm border-b border-neutral-dimmed px-sm py-xs-plus"
+    }, /*#__PURE__*/ react.createElement(Icon, {
+        icon: destructive ? /*#__PURE__*/ react.createElement(warning_svg_ReactComponent, null) : /*#__PURE__*/ react.createElement(ReactComponent, null),
+        size: "sm",
+        label: "",
+        color: "inherit",
+        className: destructive ? "text-destructive-primary" : void 0
+    }), /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "font-semibold text-neutral-primary"
+    }, heading), destructive ? /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "ml-auto text-destructive-primary"
+    }, "Cannot be undone") : null), /*#__PURE__*/ react.createElement("div", {
+        className: "bg-neutral-base px-sm py-xs-plus"
+    }, approvals.map((approval)=>/*#__PURE__*/ react.createElement("div", {
+            key: approval.approvalId,
+            className: "mb-xs"
+        }, /*#__PURE__*/ react.createElement(Text, {
+            as: "div",
+            size: "sm",
+            className: "font-mono text-neutral-strong"
+        }, approval.toolName), /*#__PURE__*/ react.createElement("pre", {
+            className: "mt-xxs overflow-x-auto rounded bg-neutral-subtle p-sm text-xs text-neutral-strong"
+        }, JSON.stringify(approval.input, null, 2)))), /*#__PURE__*/ react.createElement("div", {
+        className: "mt-sm flex items-center gap-sm"
+    }, /*#__PURE__*/ react.createElement(Button, {
+        variant: "primary",
+        text: "Run",
+        disabled: busy,
+        onClick: onApprove
+    }), /*#__PURE__*/ react.createElement(Button, {
+        variant: "secondary",
+        text: "Reject",
+        disabled: busy,
+        onClick: onReject
+    }), /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "text-neutral-muted"
+    }, "Nothing runs until you confirm."))));
+};
+export { ApprovalPlan };
+
+//# sourceMappingURL=ApprovalPlan.js.map

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 { AdminAssistantPendingApproval } from \"@webiny/app-admin\";\n\nexport interface ApprovalPlanProps {\n    approvals: AdminAssistantPendingApproval[];\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/CommandItemRow.js

@@ -1,16 +1,18 @@
 import react from "react";
 import { Command, useCommandState } from "cmdk";
-import { Icon, Text } from "@webiny/admin-ui";
+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: "grid size-xl shrink-0 place-items-center rounded-md border " + (selected ? "border-primary bg-primary-subtle" : "border-neutral-dimmed bg-neutral-subtle")
+        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, {

package/CommandPalette/components/CommandItemRow.js.map

@@ -1 +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"}
+{"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/NoResults.d.ts

@@ -0,0 +1,13 @@
+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.
+ *
+ * `onAskAi` is optional because the assistant is licensed separately. Without it this is a plain
+ * "nothing matched" state rather than an offer the project cannot accept.
+ */
+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"
+    }, onAskAi ? "No page or action matches. Ask the assistant instead." : "No page or action matches."), onAskAi ? /*#__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
+    }) : null);
+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 *\n * `onAskAi` is optional because the assistant is licensed separately. Without it this is a plain\n * \"nothing matched\" state rather than an offer the project cannot accept.\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            {onAskAi\n                ? \"No page or action matches. Ask the assistant instead.\"\n                : \"No page or action matches.\"}\n        </Text>\n        {onAskAi ? (\n            <Button\n                variant=\"secondary\"\n                text=\"Ask AI\"\n                icon={<Icon icon={<AiIcon />} size=\"sm\" label=\"\" color=\"inherit\" />}\n                onClick={onAskAi}\n            />\n        ) : null}\n    </div>\n);\n"],"names":["NoResults","query","onAskAi","Icon","SearchOffIcon","Text","Button","AiIcon"],"mappings":";;;;AAiBO,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;OAC9BH,UACK,0DACA,+BAETA,UAAU,WAAVA,GACG,oBAACI,QAAMA;QACH,SAAQ;QACR,MAAK;QACL,oBAAM,oBAACH,MAAIA;YAAC,oBAAM,oBAACI,iCAAMA;YAAK,MAAK;YAAK,OAAM;YAAG,OAAM;;QACvD,SAASL;SAEb"}

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

@@ -1,5 +1,13 @@
-export * from "./Kbd.js";
-export * from "./HintIcon.js";
-export * from "./GroupHeading.js";
-export * from "./CommandItemRow.js";
-export * from "./CommandDetail.js";
+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

@@ -1,5 +1,13 @@
-export * from "./Kbd.js";
-export * from "./HintIcon.js";
-export * from "./GroupHeading.js";
-export * from "./CommandItemRow.js";
-export * from "./CommandDetail.js";
+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/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;
+}

package/CommandPalette/modes/createAiMode.d.ts

@@ -0,0 +1,13 @@
+import type { AdminAssistantPresenter } from "@webiny/app-admin";
+import type { PaletteMode } from "./PaletteMode.js";
+/**
+ * The assistant, as a palette mode.
+ *
+ * Everything specific to it lives here: what the input row shows, what Enter and Backspace do, and
+ * what fills the panel. The conversation itself belongs to `AdminAssistantPresenter`.
+ *
+ * A plain object rather than a hook. `appearance` and `body` are getters, so reading them during a
+ * reactive component's render tracks the presenter's observables and re-renders on a new turn, with
+ * no dependency arrays to keep honest.
+ */
+export declare const createAiMode: (presenter: AdminAssistantPresenter.Interface) => PaletteMode;

package/CommandPalette/modes/createAiMode.js

@@ -0,0 +1,80 @@
+import react from "react";
+import { ReactComponent } from "@webiny/icons/auto_awesome.svg";
+import { ReactComponent as keyboard_return_svg_ReactComponent } from "@webiny/icons/keyboard_return.svg";
+import { ReactComponent as backspace_svg_ReactComponent } from "@webiny/icons/backspace.svg";
+import { AiModeBadge, AiSuggestions, AiTurn, HintIcon } from "../components/index.js";
+const HINTS = [
+    {
+        keys: /*#__PURE__*/ react.createElement(HintIcon, {
+            element: /*#__PURE__*/ react.createElement(keyboard_return_svg_ReactComponent, null)
+        }),
+        label: "Ask"
+    },
+    {
+        keys: /*#__PURE__*/ react.createElement(HintIcon, {
+            element: /*#__PURE__*/ react.createElement(backspace_svg_ReactComponent, null)
+        }),
+        label: "Commands"
+    },
+    {
+        keys: "esc",
+        label: "Close"
+    }
+];
+const createAiMode = (presenter)=>({
+        get appearance () {
+            const started = presenter.vm.turns.length > 0;
+            return {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                iconColor: "accent",
+                iconLabel: "Ask AI",
+                badge: /*#__PURE__*/ react.createElement(AiModeBadge, null),
+                placeholder: started ? "Ask a follow-up…" : "Ask about this project…",
+                footerLabel: "Webiny AI",
+                hints: HINTS,
+                tall: true
+            };
+        },
+        get body () {
+            const { turns, busy } = presenter.vm;
+            if (0 === turns.length) return /*#__PURE__*/ react.createElement(AiSuggestions, {
+                onAsk: (question)=>presenter.ask(question)
+            });
+            return turns.map((turn, index)=>/*#__PURE__*/ react.createElement(AiTurn, {
+                    key: index,
+                    turn: turn,
+                    initials: "You",
+                    busy: busy,
+                    onApprove: ()=>presenter.decide(index, true),
+                    onReject: ()=>presenter.decide(index, false)
+                }));
+        },
+        enter (seed) {
+            if (seed?.trim()) presenter.ask(seed);
+        },
+        reset () {
+            presenter.reset();
+        },
+        handleKey (event, context) {
+            if ("Enter" === event.key) {
+                event.preventDefault();
+                presenter.ask(context.query);
+                context.setQuery("");
+                return true;
+            }
+            if ("Backspace" === event.key && "" === context.query) {
+                event.preventDefault();
+                context.exit();
+                return true;
+            }
+            return false;
+        },
+        afterRender (container) {
+            container.scrollTo({
+                top: container.scrollHeight
+            });
+        }
+    });
+export { createAiMode };
+
+//# sourceMappingURL=createAiMode.js.map

package/CommandPalette/modes/createAiMode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette/modes/createAiMode.js","sources":["../../../src/CommandPalette/modes/createAiMode.tsx"],"sourcesContent":["import React from \"react\";\nimport type { AdminAssistantPresenter } from \"@webiny/app-admin\";\nimport { ReactComponent as AiIcon } from \"@webiny/icons/auto_awesome.svg\";\nimport { ReactComponent as ReturnIcon } from \"@webiny/icons/keyboard_return.svg\";\nimport { ReactComponent as BackspaceIcon } from \"@webiny/icons/backspace.svg\";\nimport { AiModeBadge, AiSuggestions, AiTurn, HintIcon, type Hint } from \"../components/index.js\";\nimport type { PaletteMode, PaletteModeKeyContext } from \"./PaletteMode.js\";\n\nconst HINTS: Hint[] = [\n    { keys: <HintIcon element={<ReturnIcon />} />, label: \"Ask\" },\n    { keys: <HintIcon element={<BackspaceIcon />} />, label: \"Commands\" },\n    { keys: \"esc\", label: \"Close\" }\n];\n\n/**\n * The assistant, as a palette mode.\n *\n * Everything specific to it lives here: what the input row shows, what Enter and Backspace do, and\n * what fills the panel. The conversation itself belongs to `AdminAssistantPresenter`.\n *\n * A plain object rather than a hook. `appearance` and `body` are getters, so reading them during a\n * reactive component's render tracks the presenter's observables and re-renders on a new turn, with\n * no dependency arrays to keep honest.\n */\nexport const createAiMode = (presenter: AdminAssistantPresenter.Interface): PaletteMode => ({\n    get appearance() {\n        const started = presenter.vm.turns.length > 0;\n\n        return {\n            icon: <AiIcon />,\n            iconColor: \"accent\" as const,\n            iconLabel: \"Ask AI\",\n            badge: <AiModeBadge />,\n            placeholder: started ? \"Ask a follow-up…\" : \"Ask about this project…\",\n            footerLabel: \"Webiny AI\",\n            hints: HINTS,\n            tall: true\n        };\n    },\n\n    get body() {\n        const { turns, busy } = presenter.vm;\n\n        if (turns.length === 0) {\n            return <AiSuggestions onAsk={question => presenter.ask(question)} />;\n        }\n\n        return turns.map((turn, index) => (\n            <AiTurn\n                key={index}\n                turn={turn}\n                initials=\"You\"\n                busy={busy}\n                onApprove={() => presenter.decide(index, true)}\n                onReject={() => presenter.decide(index, false)}\n            />\n        ));\n    },\n\n    // A seed only arrives from the no-results \"Ask AI\" button; see `PaletteMode.enter`.\n    enter(seed?: string) {\n        if (seed?.trim()) {\n            presenter.ask(seed);\n        }\n    },\n\n    reset() {\n        presenter.reset();\n    },\n\n    handleKey(event: React.KeyboardEvent, context: PaletteModeKeyContext) {\n        if (event.key === \"Enter\") {\n            event.preventDefault();\n            presenter.ask(context.query);\n            context.setQuery(\"\");\n            return true;\n        }\n\n        // Backspace on an empty input leaves the mode, mirroring how space entered it.\n        if (event.key === \"Backspace\" && context.query === \"\") {\n            event.preventDefault();\n            context.exit();\n            return true;\n        }\n\n        return false;\n    },\n\n    // Answers are long enough to push earlier turns off-screen, so keep the newest one visible.\n    afterRender(container: HTMLElement) {\n        container.scrollTo({ top: container.scrollHeight });\n    }\n});\n"],"names":["HINTS","HintIcon","ReturnIcon","BackspaceIcon","createAiMode","presenter","started","AiIcon","AiModeBadge","turns","busy","AiSuggestions","question","turn","index","AiTurn","seed","event","context","container"],"mappings":";;;;;AAQA,MAAMA,QAAgB;IAClB;QAAE,MAAM,WAAN,GAAM,oBAACC,UAAQA;YAAC,uBAAS,oBAACC,oCAAUA;;QAAS,OAAO;IAAM;IAC5D;QAAE,MAAM,WAAN,GAAM,oBAACD,UAAQA;YAAC,uBAAS,oBAACE,8BAAaA;;QAAS,OAAO;IAAW;IACpE;QAAE,MAAM;QAAO,OAAO;IAAQ;CACjC;AAYM,MAAMC,eAAe,CAACC,YAA+D;QACxF,IAAI,cAAa;YACb,MAAMC,UAAUD,UAAU,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG;YAE5C,OAAO;gBACH,MAAM,WAAN,GAAM,oBAACE,gBAAMA;gBACb,WAAW;gBACX,WAAW;gBACX,OAAO,WAAP,GAAO,oBAACC,aAAWA;gBACnB,aAAaF,UAAU,qBAAqB;gBAC5C,aAAa;gBACb,OAAON;gBACP,MAAM;YACV;QACJ;QAEA,IAAI,QAAO;YACP,MAAM,EAAES,KAAK,EAAEC,IAAI,EAAE,GAAGL,UAAU,EAAE;YAEpC,IAAII,AAAiB,MAAjBA,MAAM,MAAM,EACZ,OAAO,WAAP,GAAO,oBAACE,eAAaA;gBAAC,OAAOC,CAAAA,WAAYP,UAAU,GAAG,CAACO;;YAG3D,OAAOH,MAAM,GAAG,CAAC,CAACI,MAAMC,QAAAA,WAAAA,GACpB,oBAACC,QAAMA;oBACH,KAAKD;oBACL,MAAMD;oBACN,UAAS;oBACT,MAAMH;oBACN,WAAW,IAAML,UAAU,MAAM,CAACS,OAAO;oBACzC,UAAU,IAAMT,UAAU,MAAM,CAACS,OAAO;;QAGpD;QAGA,OAAME,IAAa;YACf,IAAIA,MAAM,QACNX,UAAU,GAAG,CAACW;QAEtB;QAEA;YACIX,UAAU,KAAK;QACnB;QAEA,WAAUY,KAA0B,EAAEC,OAA8B;YAChE,IAAID,AAAc,YAAdA,MAAM,GAAG,EAAc;gBACvBA,MAAM,cAAc;gBACpBZ,UAAU,GAAG,CAACa,QAAQ,KAAK;gBAC3BA,QAAQ,QAAQ,CAAC;gBACjB,OAAO;YACX;YAGA,IAAID,AAAc,gBAAdA,MAAM,GAAG,IAAoBC,AAAkB,OAAlBA,QAAQ,KAAK,EAAS;gBACnDD,MAAM,cAAc;gBACpBC,QAAQ,IAAI;gBACZ,OAAO;YACX;YAEA,OAAO;QACX;QAGA,aAAYC,SAAsB;YAC9BA,UAAU,QAAQ,CAAC;gBAAE,KAAKA,UAAU,YAAY;YAAC;QACrD;IACJ"}

package/CommandPalette/modes/index.d.ts

@@ -0,0 +1,2 @@
+export { createAiMode } from "./createAiMode.js";
+export type { PaletteMode, PaletteModeAppearance, PaletteModeKeyContext } from "./PaletteMode.js";

package/CommandPalette/modes/index.js

@@ -0,0 +1 @@
+export { createAiMode } from "./createAiMode.js";

package/CommandPalette/usePaletteHotkeys.d.ts

@@ -0,0 +1,16 @@
+import { type CommandPalettePresenter } from "@webiny/app-admin";
+interface PaletteHotkeysParams {
+    presenter: CommandPalettePresenter.Interface;
+    close: () => void;
+    /** False when the license blocks the assistant, so mod+k must not cycle into it. */
+    aiEnabled: boolean;
+}
+/**
+ * The palette's global keys: the ones that work while it is closed, or while focus is not in the
+ * input. Keys that only mean something while typing stay on the input's `onKeyDown`.
+ *
+ * Reads the view model during render, so a reactive component calling this still re-renders when
+ * the palette opens, a detail view appears, or AI mode is entered.
+ */
+export declare const usePaletteHotkeys: ({ presenter, close, aiEnabled }: PaletteHotkeysParams) => void;
+export {};

package/CommandPalette/usePaletteHotkeys.js

@@ -0,0 +1,38 @@
+import { useMemo } from "react";
+import { useHotkeys } from "@webiny/app-admin";
+import { PALETTE_HOTKEY_ZINDEX } from "./constants.js";
+const usePaletteHotkeys = ({ presenter, close, aiEnabled })=>{
+    const { isOpen, activeCommand, aiModeActive } = presenter.vm;
+    const keys = useMemo(()=>({
+            "mod+k": (e)=>{
+                e.preventDefault();
+                if (!isOpen) return void presenter.open();
+                if (activeCommand) return void presenter.cancelCommand();
+                if (aiEnabled && !aiModeActive) return void presenter.enterAiMode();
+                close();
+            },
+            backspace: (e)=>{
+                const target = e.target;
+                const editable = target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target?.isContentEditable;
+                if (!isOpen || !activeCommand || editable) return;
+                e.preventDefault();
+                presenter.cancelCommand();
+            },
+            ...presenter.shortcutKeys
+        }), [
+        presenter,
+        presenter.shortcutKeys,
+        isOpen,
+        activeCommand,
+        aiModeActive,
+        close,
+        aiEnabled
+    ]);
+    useHotkeys({
+        zIndex: PALETTE_HOTKEY_ZINDEX,
+        keys
+    });
+};
+export { usePaletteHotkeys };
+
+//# sourceMappingURL=usePaletteHotkeys.js.map

package/CommandPalette/usePaletteHotkeys.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette/usePaletteHotkeys.js","sources":["../../src/CommandPalette/usePaletteHotkeys.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useHotkeys, type CommandPalettePresenter } from \"@webiny/app-admin\";\nimport { PALETTE_HOTKEY_ZINDEX } from \"./constants.js\";\n\ninterface PaletteHotkeysParams {\n    presenter: CommandPalettePresenter.Interface;\n    /* Not `presenter.close`: closing also resets the mode, which is the palette's business. */\n    close: () => void;\n    /** False when the license blocks the assistant, so mod+k must not cycle into it. */\n    aiEnabled: boolean;\n}\n\n/**\n * The palette's global keys: the ones that work while it is closed, or while focus is not in the\n * input. Keys that only mean something while typing stay on the input's `onKeyDown`.\n *\n * Reads the view model during render, so a reactive component calling this still re-renders when\n * the palette opens, a detail view appears, or AI mode is entered.\n */\nexport const usePaletteHotkeys = ({ presenter, close, aiEnabled }: PaletteHotkeysParams) => {\n    const { isOpen, activeCommand, aiModeActive } = presenter.vm;\n\n    /*\n     * mod+k cycles closed -> commands -> AI -> closed, so the same key that opens the palette also\n     * reaches the assistant without the user having to know about the space shortcut. Closing from AI\n     * mode keeps mod+k a way OUT of the palette, which is what it does everywhere else.\n     * Backspace backs out of a detail view; command shortcuts run directly.\n     */\n    const keys = useMemo(\n        () => ({\n            \"mod+k\": (e: KeyboardEvent) => {\n                e.preventDefault();\n\n                if (!isOpen) {\n                    presenter.open();\n                    return;\n                }\n\n                /*\n                 * A detail view renders in place of the command list, so switching to AI mode from\n                 * there would put the user in a mode they cannot see. Back out to the list instead.\n                 */\n                if (activeCommand) {\n                    presenter.cancelCommand();\n                    return;\n                }\n\n                if (aiEnabled && !aiModeActive) {\n                    presenter.enterAiMode();\n                    return;\n                }\n\n                close();\n            },\n            backspace: (e: KeyboardEvent) => {\n                /*\n                 * This listener is global and stays registered while the palette is closed, so it\n                 * must leave Backspace alone unless there is a detail view to back out of, and never\n                 * touch it inside an input, textarea or rich text editor.\n                 */\n                const target = e.target as HTMLElement | null;\n                const editable =\n                    target instanceof HTMLInputElement ||\n                    target instanceof HTMLTextAreaElement ||\n                    target?.isContentEditable;\n                if (!isOpen || !activeCommand || editable) {\n                    return;\n                }\n                e.preventDefault();\n                presenter.cancelCommand();\n            },\n            ...presenter.shortcutKeys\n        }),\n        [presenter, presenter.shortcutKeys, isOpen, activeCommand, aiModeActive, close, aiEnabled]\n    );\n\n    useHotkeys({ zIndex: PALETTE_HOTKEY_ZINDEX, keys });\n};\n"],"names":["usePaletteHotkeys","presenter","close","aiEnabled","isOpen","activeCommand","aiModeActive","keys","useMemo","e","target","editable","HTMLInputElement","HTMLTextAreaElement","useHotkeys","PALETTE_HOTKEY_ZINDEX"],"mappings":";;;AAmBO,MAAMA,oBAAoB,CAAC,EAAEC,SAAS,EAAEC,KAAK,EAAEC,SAAS,EAAwB;IACnF,MAAM,EAAEC,MAAM,EAAEC,aAAa,EAAEC,YAAY,EAAE,GAAGL,UAAU,EAAE;IAQ5D,MAAMM,OAAOC,QACT,IAAO;YACH,SAAS,CAACC;gBACNA,EAAE,cAAc;gBAEhB,IAAI,CAACL,QAAQ,YACTH,UAAU,IAAI;gBAQlB,IAAII,eAAe,YACfJ,UAAU,aAAa;gBAI3B,IAAIE,aAAa,CAACG,cAAc,YAC5BL,UAAU,WAAW;gBAIzBC;YACJ;YACA,WAAW,CAACO;gBAMR,MAAMC,SAASD,EAAE,MAAM;gBACvB,MAAME,WACFD,kBAAkBE,oBAClBF,kBAAkBG,uBAClBH,QAAQ;gBACZ,IAAI,CAACN,UAAU,CAACC,iBAAiBM,UAC7B;gBAEJF,EAAE,cAAc;gBAChBR,UAAU,aAAa;YAC3B;YACA,GAAGA,UAAU,YAAY;QAC7B,IACA;QAACA;QAAWA,UAAU,YAAY;QAAEG;QAAQC;QAAeC;QAAcJ;QAAOC;KAAU;IAG9FW,WAAW;QAAE,QAAQC;QAAuBR;IAAK;AACrD"}

package/Dashboard/Welcome.d.ts

@@ -1,3 +1,6 @@
 import React from "react";
-declare const Welcome: () => React.JSX.Element;
+declare const WelcomeBase: () => React.JSX.Element;
+declare const Welcome: typeof WelcomeBase & React.NamedExoticComponent<unknown> & {
+    readonly type: typeof WelcomeBase;
+};
 export default Welcome;