@webiny/app-admin 0.0.0-unstable.7be00a75a9 → 0.0.0-unstable.7c2def32a7

package/presentation/banners/components/Banner.js

@@ -0,0 +1,32 @@
+import { useEffect } from "react";
+import { useBanner } from "../useBanner.js";
+const Banner = (props)=>{
+    const { showBanner, hideBanner } = useBanner();
+    const { id, variant, title, message, dismissible, action } = props;
+    useEffect(()=>{
+        showBanner({
+            id,
+            variant,
+            title,
+            message,
+            dismissible,
+            action
+        });
+    }, [
+        id,
+        variant,
+        title,
+        message,
+        dismissible,
+        action?.label,
+        action?.disabled,
+        action?.onClick
+    ]);
+    useEffect(()=>()=>hideBanner(id), [
+        id
+    ]);
+    return null;
+};
+export { Banner };
+
+//# sourceMappingURL=Banner.js.map

package/presentation/banners/components/Banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/banners/components/Banner.js","sources":["../../../../src/presentation/banners/components/Banner.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport type { Banners } from \"~/features/banners/abstractions.js\";\nimport { useBanner } from \"../useBanner.js\";\n\nexport type BannerProps = Banners.Banner;\n\n/**\n * Shows a banner for as long as this component is mounted, and hides it on unmount. Renders\n * nothing itself; the Layout's bar does the drawing.\n *\n * To show a banner from an event handler, use `useBanner()`. Outside React, inject `Banners`\n * and call `show()` and `hide()` directly.\n */\nexport const Banner = (props: BannerProps) => {\n    const { showBanner, hideBanner } = useBanner();\n    const { id, variant, title, message, dismissible, action } = props;\n\n    useEffect(() => {\n        showBanner({ id, variant, title, message, dismissible, action });\n    }, [\n        id,\n        variant,\n        title,\n        message,\n        dismissible,\n        action?.label,\n        action?.disabled,\n        action?.onClick\n    ]);\n\n    useEffect(() => {\n        return () => hideBanner(id);\n    }, [id]);\n\n    return null;\n};\n"],"names":["Banner","props","showBanner","hideBanner","useBanner","id","variant","title","message","dismissible","action","useEffect"],"mappings":";;AAaO,MAAMA,SAAS,CAACC;IACnB,MAAM,EAAEC,UAAU,EAAEC,UAAU,EAAE,GAAGC;IACnC,MAAM,EAAEC,EAAE,EAAEC,OAAO,EAAEC,KAAK,EAAEC,OAAO,EAAEC,WAAW,EAAEC,MAAM,EAAE,GAAGT;IAE7DU,UAAU;QACNT,WAAW;YAAEG;YAAIC;YAASC;YAAOC;YAASC;YAAaC;QAAO;IAClE,GAAG;QACCL;QACAC;QACAC;QACAC;QACAC;QACAC,QAAQ;QACRA,QAAQ;QACRA,QAAQ;KACX;IAEDC,UAAU,IACC,IAAMR,WAAWE,KACzB;QAACA;KAAG;IAEP,OAAO;AACX"}

package/presentation/banners/components/BannerBar.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+/**
+ * The bar across the top of the content column, above the header. Rendered once, by the Layout.
+ *
+ * It is always exactly `--spacing-banner` tall, and the text is cut to one line, with the full text
+ * in the tooltip. A known height is what lets the Layout take the bar out of `h-main-content` with
+ * plain CSS, instead of measuring the bar at runtime.
+ */
+export declare const BannerBar: (() => React.JSX.Element | null) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element | null;
+};

package/presentation/banners/components/BannerBar.js

@@ -0,0 +1,51 @@
+import react from "react";
+import { useFeature } from "@webiny/app";
+import { Button, IconButton, Text, cn } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/close.svg";
+import { createReactiveComponent } from "../../createReactiveComponent.js";
+import { BannersPresenterFeature } from "../feature.js";
+const VARIANT_CLASS_NAMES = {
+    info: "bg-neutral-dimmed",
+    success: "bg-success-subtle",
+    warning: "bg-warning",
+    error: "bg-destructive-subtle"
+};
+function fullText(banner) {
+    if (!banner.title) return banner.message;
+    return `${banner.title} ${banner.message}`;
+}
+const BannerBar = createReactiveComponent(()=>{
+    const { presenter } = useFeature(BannersPresenterFeature);
+    const { banner } = presenter.vm;
+    if (!banner) return null;
+    let action = null;
+    if (banner.actionLabel) action = /*#__PURE__*/ react.createElement(Button, {
+        variant: "ghost",
+        size: "sm",
+        text: banner.actionLabel,
+        disabled: banner.actionDisabled,
+        onClick: ()=>presenter.runAction()
+    });
+    let close = null;
+    if (banner.dismissible) close = /*#__PURE__*/ react.createElement(IconButton, {
+        variant: "ghost",
+        size: "sm",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        "aria-label": "Dismiss banner",
+        onClick: ()=>presenter.dismiss()
+    });
+    return /*#__PURE__*/ react.createElement("div", {
+        className: cn("grid h-banner grid-cols-[1fr_minmax(0,max-content)_1fr] items-center gap-sm px-sm", VARIANT_CLASS_NAMES[banner.variant]),
+        "data-admin-banner": banner.variant,
+        "data-testid": "admin-banner"
+    }, /*#__PURE__*/ react.createElement("span", null), /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "truncate text-center text-neutral-primary",
+        title: fullText(banner)
+    }, banner.title ? /*#__PURE__*/ react.createElement("strong", null, `${banner.title} `) : null, banner.message), /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center justify-self-end gap-xs"
+    }, action, close));
+});
+export { BannerBar };
+
+//# sourceMappingURL=BannerBar.js.map

package/presentation/banners/components/BannerBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/banners/components/BannerBar.js","sources":["../../../../src/presentation/banners/components/BannerBar.tsx"],"sourcesContent":["import React from \"react\";\nimport { useFeature } from \"@webiny/app\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { IconButton } from \"@webiny/admin-ui\";\nimport { Text } from \"@webiny/admin-ui\";\nimport { cn } from \"@webiny/admin-ui\";\nimport { ReactComponent as CloseIcon } from \"@webiny/icons/close.svg\";\nimport { createReactiveComponent } from \"~/presentation/createReactiveComponent.js\";\nimport { BannersPresenterFeature } from \"../feature.js\";\nimport type { BannersPresenter } from \"../abstractions.js\";\n\nconst VARIANT_CLASS_NAMES: Record<BannersPresenter.Banner[\"variant\"], string> = {\n    info: \"bg-neutral-dimmed\",\n    success: \"bg-success-subtle\",\n    warning: \"bg-warning\",\n    error: \"bg-destructive-subtle\"\n};\n\nfunction fullText(banner: BannersPresenter.Banner): string {\n    if (!banner.title) {\n        return banner.message;\n    }\n    return `${banner.title} ${banner.message}`;\n}\n\n/**\n * The bar across the top of the content column, above the header. Rendered once, by the Layout.\n *\n * It is always exactly `--spacing-banner` tall, and the text is cut to one line, with the full text\n * in the tooltip. A known height is what lets the Layout take the bar out of `h-main-content` with\n * plain CSS, instead of measuring the bar at runtime.\n */\nexport const BannerBar = createReactiveComponent(() => {\n    const { presenter } = useFeature(BannersPresenterFeature);\n    const { banner } = presenter.vm;\n\n    if (!banner) {\n        return null;\n    }\n\n    let action = null;\n    if (banner.actionLabel) {\n        action = (\n            <Button\n                variant={\"ghost\"}\n                size={\"sm\"}\n                text={banner.actionLabel}\n                disabled={banner.actionDisabled}\n                onClick={() => presenter.runAction()}\n            />\n        );\n    }\n\n    let close = null;\n    if (banner.dismissible) {\n        close = (\n            <IconButton\n                variant={\"ghost\"}\n                size={\"sm\"}\n                icon={<CloseIcon />}\n                aria-label={\"Dismiss banner\"}\n                onClick={() => presenter.dismiss()}\n            />\n        );\n    }\n\n    return (\n        <div\n            className={cn(\n                \"grid h-banner grid-cols-[1fr_minmax(0,max-content)_1fr] items-center gap-sm px-sm\",\n                VARIANT_CLASS_NAMES[banner.variant]\n            )}\n            data-admin-banner={banner.variant}\n            data-testid={\"admin-banner\"}\n        >\n            <span />\n            <Text\n                size={\"sm\"}\n                className={\"truncate text-center text-neutral-primary\"}\n                title={fullText(banner)}\n            >\n                {banner.title ? <strong>{`${banner.title} `}</strong> : null}\n                {banner.message}\n            </Text>\n            <div className={\"flex items-center justify-self-end gap-xs\"}>\n                {action}\n                {close}\n            </div>\n        </div>\n    );\n});\n"],"names":["VARIANT_CLASS_NAMES","fullText","banner","BannerBar","createReactiveComponent","presenter","useFeature","BannersPresenterFeature","action","Button","close","IconButton","CloseIcon","cn","Text"],"mappings":";;;;;;AAWA,MAAMA,sBAA0E;IAC5E,MAAM;IACN,SAAS;IACT,SAAS;IACT,OAAO;AACX;AAEA,SAASC,SAASC,MAA+B;IAC7C,IAAI,CAACA,OAAO,KAAK,EACb,OAAOA,OAAO,OAAO;IAEzB,OAAO,GAAGA,OAAO,KAAK,CAAC,CAAC,EAAEA,OAAO,OAAO,EAAE;AAC9C;AASO,MAAMC,YAAYC,wBAAwB;IAC7C,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAWC;IACjC,MAAM,EAAEL,MAAM,EAAE,GAAGG,UAAU,EAAE;IAE/B,IAAI,CAACH,QACD,OAAO;IAGX,IAAIM,SAAS;IACb,IAAIN,OAAO,WAAW,EAClBM,SAAS,WAATA,GACI,oBAACC,QAAMA;QACH,SAAS;QACT,MAAM;QACN,MAAMP,OAAO,WAAW;QACxB,UAAUA,OAAO,cAAc;QAC/B,SAAS,IAAMG,UAAU,SAAS;;IAK9C,IAAIK,QAAQ;IACZ,IAAIR,OAAO,WAAW,EAClBQ,QAAQ,WAARA,GACI,oBAACC,YAAUA;QACP,SAAS;QACT,MAAM;QACN,oBAAM,oBAACC,gBAASA;QAChB,cAAY;QACZ,SAAS,IAAMP,UAAU,OAAO;;IAK5C,OAAO,WAAP,GACI,oBAAC;QACG,WAAWQ,GACP,qFACAb,mBAAmB,CAACE,OAAO,OAAO,CAAC;QAEvC,qBAAmBA,OAAO,OAAO;QACjC,eAAa;qBAEb,oBAAC,6BACD,oBAACY,MAAIA;QACD,MAAM;QACN,WAAW;QACX,OAAOb,SAASC;OAEfA,OAAO,KAAK,GAAG,WAAH,GAAG,oBAAC,gBAAQ,GAAGA,OAAO,KAAK,CAAC,CAAC,CAAC,IAAa,MACvDA,OAAO,OAAO,iBAEnB,oBAAC;QAAI,WAAW;OACXM,QACAE;AAIjB"}

package/presentation/banners/feature.d.ts

@@ -0,0 +1,3 @@
+export declare const BannersPresenterFeature: import("@webiny/feature/admin").FeatureDefinition<{
+    presenter: import("./abstractions.js").IBannersPresenter;
+}, []>;

package/presentation/banners/feature.js

@@ -0,0 +1,17 @@
+import { createFeature } from "@webiny/feature/admin";
+import { BannersPresenter } from "./abstractions.js";
+import { BannersPresenter as external_BannersPresenter_js_BannersPresenter } from "./BannersPresenter.js";
+const BannersPresenterFeature = createFeature({
+    name: "BannersPresenter",
+    register (container) {
+        container.register(external_BannersPresenter_js_BannersPresenter).inSingletonScope();
+    },
+    resolve (container) {
+        return {
+            presenter: container.resolve(BannersPresenter)
+        };
+    }
+});
+export { BannersPresenterFeature };
+
+//# sourceMappingURL=feature.js.map

package/presentation/banners/feature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/banners/feature.js","sources":["../../../src/presentation/banners/feature.ts"],"sourcesContent":["import { createFeature } from \"@webiny/feature/admin\";\nimport { BannersPresenter as Abstraction } from \"./abstractions.js\";\nimport { BannersPresenter } from \"./BannersPresenter.js\";\n\nexport const BannersPresenterFeature = createFeature({\n    name: \"BannersPresenter\",\n    register(container) {\n        // Singleton so every mount of the bar reads the same state.\n        container.register(BannersPresenter).inSingletonScope();\n    },\n    resolve(container) {\n        return {\n            presenter: container.resolve(Abstraction)\n        };\n    }\n});\n"],"names":["BannersPresenterFeature","createFeature","container","BannersPresenter","Abstraction"],"mappings":";;;AAIO,MAAMA,0BAA0BC,cAAc;IACjD,MAAM;IACN,UAASC,SAAS;QAEdA,UAAU,QAAQ,CAACC,+CAAkB,gBAAgB;IACzD;IACA,SAAQD,SAAS;QACb,OAAO;YACH,WAAWA,UAAU,OAAO,CAACE;QACjC;IACJ;AACJ"}

package/presentation/banners/index.d.ts

@@ -0,0 +1,6 @@
+export { BannersPresenterFeature } from "./feature.js";
+export { BannerBar } from "./components/BannerBar.js";
+export { Banner } from "./components/Banner.js";
+export type { BannerProps } from "./components/Banner.js";
+export { useBanner } from "./useBanner.js";
+export type { UseBannerResponse } from "./useBanner.js";

package/presentation/banners/index.js

@@ -0,0 +1,4 @@
+export { BannersPresenterFeature } from "./feature.js";
+export { BannerBar } from "./components/BannerBar.js";
+export { Banner } from "./components/Banner.js";
+export { useBanner } from "./useBanner.js";

package/presentation/banners/useBanner.d.ts

@@ -0,0 +1,10 @@
+import type { Banners } from "../../features/banners/abstractions.js";
+export interface UseBannerResponse {
+    showBanner(banner: Banners.Banner): void;
+    hideBanner(id: string): void;
+}
+/**
+ * Shows banners from event handlers, the way `useToast` shows toasts. For a banner that should show
+ * for as long as a component is mounted, render `<Banner>` instead.
+ */
+export declare const useBanner: () => UseBannerResponse;

package/presentation/banners/useBanner.js

@@ -0,0 +1,15 @@
+import { useMemo } from "react";
+import { useFeature } from "@webiny/app";
+import { BannersFeature } from "../../features/banners/feature.js";
+const useBanner = ()=>{
+    const { banners } = useFeature(BannersFeature);
+    return useMemo(()=>({
+            showBanner: (banner)=>banners.show(banner),
+            hideBanner: (id)=>banners.hide(id)
+        }), [
+        banners
+    ]);
+};
+export { useBanner };
+
+//# sourceMappingURL=useBanner.js.map

package/presentation/banners/useBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/banners/useBanner.js","sources":["../../../src/presentation/banners/useBanner.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useFeature } from \"@webiny/app\";\nimport { BannersFeature } from \"~/features/banners/feature.js\";\nimport type { Banners } from \"~/features/banners/abstractions.js\";\n\nexport interface UseBannerResponse {\n    // Shows the banner, or updates it in place if one with the same `id` is already showing.\n    showBanner(banner: Banners.Banner): void;\n    hideBanner(id: string): void;\n}\n\n/**\n * Shows banners from event handlers, the way `useToast` shows toasts. For a banner that should show\n * for as long as a component is mounted, render `<Banner>` instead.\n */\nexport const useBanner = (): UseBannerResponse => {\n    const { banners } = useFeature(BannersFeature);\n\n    return useMemo(() => {\n        return {\n            showBanner: (banner: Banners.Banner) => banners.show(banner),\n            hideBanner: (id: string) => banners.hide(id)\n        };\n    }, [banners]);\n};\n"],"names":["useBanner","banners","useFeature","BannersFeature","useMemo","banner","id"],"mappings":";;;AAeO,MAAMA,YAAY;IACrB,MAAM,EAAEC,OAAO,EAAE,GAAGC,WAAWC;IAE/B,OAAOC,QAAQ,IACJ;YACH,YAAY,CAACC,SAA2BJ,QAAQ,IAAI,CAACI;YACrD,YAAY,CAACC,KAAeL,QAAQ,IAAI,CAACK;QAC7C,IACD;QAACL;KAAQ;AAChB"}

package/presentation/commandPalette/CommandPalettePresenter.d.ts

@@ -0,0 +1,21 @@
+import { Command, CommandPalettePresenter as Abstraction, type CommandPaletteViewModel } from "./abstractions.js";
+export declare class CommandPalettePresenter implements Abstraction.Interface {
+    private getCommands;
+    private isOpen;
+    private activeCommandName;
+    private aiModeActive;
+    private query;
+    private resolvedCommands;
+    constructor(getCommands: () => Command.Interface[]);
+    init(): void;
+    get shortcutKeys(): Record<string, (e: KeyboardEvent) => void>;
+    get vm(): CommandPaletteViewModel;
+    open(): void;
+    close(): void;
+    enterAiMode(): void;
+    exitAiMode(): void;
+    setQuery(query: string): void;
+    toggle(): void;
+    useCommand(name: string): void;
+    cancelCommand(): void;
+}

package/presentation/commandPalette/CommandPalettePresenter.js

@@ -0,0 +1,92 @@
+import { makeAutoObservable } from "mobx";
+class CommandPalettePresenter {
+    constructor(getCommands){
+        this.getCommands = getCommands;
+        this.isOpen = false;
+        this.activeCommandName = null;
+        this.aiModeActive = false;
+        this.query = "";
+        this.resolvedCommands = [];
+        makeAutoObservable(this);
+    }
+    init() {
+        this.resolvedCommands = this.getCommands();
+    }
+    get shortcutKeys() {
+        const keys = {};
+        for (const cmd of this.resolvedCommands)if (cmd.shortcut) keys[cmd.shortcut] = (e)=>{
+            e.preventDefault();
+            this.useCommand(cmd.name);
+        };
+        return keys;
+    }
+    get vm() {
+        const activeCmd = null !== this.activeCommandName ? this.resolvedCommands.find((c)=>c.name === this.activeCommandName) : null;
+        return {
+            isOpen: this.isOpen,
+            aiModeActive: this.aiModeActive,
+            query: this.query,
+            commands: this.resolvedCommands.map((cmd)=>({
+                    name: cmd.name,
+                    label: cmd.label,
+                    description: cmd.description,
+                    icon: cmd.icon,
+                    category: cmd.category,
+                    keywords: cmd.keywords,
+                    shortcut: cmd.shortcut,
+                    hasDetailView: Boolean(cmd.detailView),
+                    entersAiMode: Boolean(cmd.entersAiMode)
+                })),
+            activeCommand: activeCmd && activeCmd.detailView ? {
+                command: activeCmd,
+                DetailView: activeCmd.detailView
+            } : null
+        };
+    }
+    open() {
+        this.resolvedCommands = this.getCommands();
+        this.activeCommandName = null;
+        this.aiModeActive = false;
+        this.query = "";
+        this.isOpen = true;
+    }
+    close() {
+        this.isOpen = false;
+        this.activeCommandName = null;
+        this.aiModeActive = false;
+        this.query = "";
+    }
+    enterAiMode() {
+        this.aiModeActive = true;
+        this.query = "";
+    }
+    exitAiMode() {
+        this.aiModeActive = false;
+        this.query = "";
+    }
+    setQuery(query) {
+        this.query = query;
+    }
+    toggle() {
+        if (this.isOpen) this.close();
+        else this.open();
+    }
+    useCommand(name) {
+        const cmd = this.resolvedCommands.find((c)=>c.name === name);
+        if (!cmd) return;
+        if (cmd.entersAiMode) return void this.enterAiMode();
+        if (cmd.detailView) {
+            this.activeCommandName = name;
+            this.isOpen = true;
+            return;
+        }
+        cmd.execute?.();
+        this.close();
+    }
+    cancelCommand() {
+        this.activeCommandName = null;
+    }
+}
+export { CommandPalettePresenter };
+
+//# sourceMappingURL=CommandPalettePresenter.js.map

package/presentation/commandPalette/CommandPalettePresenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/commandPalette/CommandPalettePresenter.js","sources":["../../../src/presentation/commandPalette/CommandPalettePresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport {\n    Command,\n    CommandPalettePresenter as Abstraction,\n    type CommandPaletteViewModel\n} from \"./abstractions.js\";\n\nexport class CommandPalettePresenter implements Abstraction.Interface {\n    private isOpen = false;\n    private activeCommandName: string | null = null;\n    private aiModeActive = false;\n    private query = \"\";\n    private resolvedCommands: Command.Interface[] = [];\n\n    constructor(private getCommands: () => Command.Interface[]) {\n        makeAutoObservable(this);\n    }\n\n    init(): void {\n        this.resolvedCommands = this.getCommands();\n    }\n\n    get shortcutKeys(): Record<string, (e: KeyboardEvent) => void> {\n        const keys: Record<string, (e: KeyboardEvent) => void> = {};\n        for (const cmd of this.resolvedCommands) {\n            if (cmd.shortcut) {\n                keys[cmd.shortcut] = (e: KeyboardEvent) => {\n                    e.preventDefault();\n                    this.useCommand(cmd.name);\n                };\n            }\n        }\n        return keys;\n    }\n\n    get vm(): CommandPaletteViewModel {\n        const activeCmd =\n            this.activeCommandName !== null\n                ? this.resolvedCommands.find(c => c.name === this.activeCommandName)\n                : null;\n\n        return {\n            isOpen: this.isOpen,\n            aiModeActive: this.aiModeActive,\n            query: this.query,\n            commands: this.resolvedCommands.map(cmd => ({\n                name: cmd.name,\n                label: cmd.label,\n                description: cmd.description,\n                icon: cmd.icon,\n                category: cmd.category,\n                keywords: cmd.keywords,\n                shortcut: cmd.shortcut,\n                hasDetailView: Boolean(cmd.detailView),\n                entersAiMode: Boolean(cmd.entersAiMode)\n            })),\n            activeCommand:\n                activeCmd && activeCmd.detailView\n                    ? {\n                          command: activeCmd,\n                          DetailView: activeCmd.detailView\n                      }\n                    : null\n        };\n    }\n\n    open(): void {\n        this.resolvedCommands = this.getCommands();\n        this.activeCommandName = null;\n        this.aiModeActive = false;\n        this.query = \"\";\n        this.isOpen = true;\n    }\n\n    close(): void {\n        this.isOpen = false;\n        this.activeCommandName = null;\n        this.aiModeActive = false;\n        this.query = \"\";\n    }\n\n    enterAiMode(): void {\n        this.aiModeActive = true;\n        this.query = \"\";\n    }\n\n    exitAiMode(): void {\n        this.aiModeActive = false;\n        this.query = \"\";\n    }\n\n    setQuery(query: string): void {\n        this.query = query;\n    }\n\n    toggle(): void {\n        if (this.isOpen) {\n            this.close();\n        } else {\n            this.open();\n        }\n    }\n\n    useCommand(name: string): void {\n        const cmd = this.resolvedCommands.find(c => c.name === name);\n        if (!cmd) {\n            return;\n        }\n\n        if (cmd.entersAiMode) {\n            // A mode replaces the command list and keeps the input row, so the palette stays open.\n            this.enterAiMode();\n            return;\n        }\n\n        if (cmd.detailView) {\n            this.activeCommandName = name;\n            this.isOpen = true;\n            return;\n        }\n\n        cmd.execute?.();\n        this.close();\n    }\n\n    cancelCommand(): void {\n        this.activeCommandName = null;\n    }\n}\n"],"names":["CommandPalettePresenter","getCommands","makeAutoObservable","keys","cmd","e","activeCmd","c","Boolean","query","name"],"mappings":";AAOO,MAAMA;IAOT,YAAoBC,WAAsC,CAAE;aAAxCA,WAAW,GAAXA;aANZ,MAAM,GAAG;aACT,iBAAiB,GAAkB;aACnC,YAAY,GAAG;aACf,KAAK,GAAG;aACR,gBAAgB,GAAwB,EAAE;QAG9CC,mBAAmB,IAAI;IAC3B;IAEA,OAAa;QACT,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW;IAC5C;IAEA,IAAI,eAA2D;QAC3D,MAAMC,OAAmD,CAAC;QAC1D,KAAK,MAAMC,OAAO,IAAI,CAAC,gBAAgB,CACnC,IAAIA,IAAI,QAAQ,EACZD,IAAI,CAACC,IAAI,QAAQ,CAAC,GAAG,CAACC;YAClBA,EAAE,cAAc;YAChB,IAAI,CAAC,UAAU,CAACD,IAAI,IAAI;QAC5B;QAGR,OAAOD;IACX;IAEA,IAAI,KAA8B;QAC9B,MAAMG,YACF,AAA2B,SAA3B,IAAI,CAAC,iBAAiB,GAChB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAACC,CAAAA,IAAKA,EAAE,IAAI,KAAK,IAAI,CAAC,iBAAiB,IACjE;QAEV,OAAO;YACH,QAAQ,IAAI,CAAC,MAAM;YACnB,cAAc,IAAI,CAAC,YAAY;YAC/B,OAAO,IAAI,CAAC,KAAK;YACjB,UAAU,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAACH,CAAAA,MAAQ;oBACxC,MAAMA,IAAI,IAAI;oBACd,OAAOA,IAAI,KAAK;oBAChB,aAAaA,IAAI,WAAW;oBAC5B,MAAMA,IAAI,IAAI;oBACd,UAAUA,IAAI,QAAQ;oBACtB,UAAUA,IAAI,QAAQ;oBACtB,UAAUA,IAAI,QAAQ;oBACtB,eAAeI,QAAQJ,IAAI,UAAU;oBACrC,cAAcI,QAAQJ,IAAI,YAAY;gBAC1C;YACA,eACIE,aAAaA,UAAU,UAAU,GAC3B;gBACI,SAASA;gBACT,YAAYA,UAAU,UAAU;YACpC,IACA;QACd;IACJ;IAEA,OAAa;QACT,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW;QACxC,IAAI,CAAC,iBAAiB,GAAG;QACzB,IAAI,CAAC,YAAY,GAAG;QACpB,IAAI,CAAC,KAAK,GAAG;QACb,IAAI,CAAC,MAAM,GAAG;IAClB;IAEA,QAAc;QACV,IAAI,CAAC,MAAM,GAAG;QACd,IAAI,CAAC,iBAAiB,GAAG;QACzB,IAAI,CAAC,YAAY,GAAG;QACpB,IAAI,CAAC,KAAK,GAAG;IACjB;IAEA,cAAoB;QAChB,IAAI,CAAC,YAAY,GAAG;QACpB,IAAI,CAAC,KAAK,GAAG;IACjB;IAEA,aAAmB;QACf,IAAI,CAAC,YAAY,GAAG;QACpB,IAAI,CAAC,KAAK,GAAG;IACjB;IAEA,SAASG,KAAa,EAAQ;QAC1B,IAAI,CAAC,KAAK,GAAGA;IACjB;IAEA,SAAe;QACX,IAAI,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,KAAK;aAEV,IAAI,CAAC,IAAI;IAEjB;IAEA,WAAWC,IAAY,EAAQ;QAC3B,MAAMN,MAAM,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAACG,CAAAA,IAAKA,EAAE,IAAI,KAAKG;QACvD,IAAI,CAACN,KACD;QAGJ,IAAIA,IAAI,YAAY,EAAE,YAElB,IAAI,CAAC,WAAW;QAIpB,IAAIA,IAAI,UAAU,EAAE;YAChB,IAAI,CAAC,iBAAiB,GAAGM;YACzB,IAAI,CAAC,MAAM,GAAG;YACd;QACJ;QAEAN,IAAI,OAAO;QACX,IAAI,CAAC,KAAK;IACd;IAEA,gBAAsB;QAClB,IAAI,CAAC,iBAAiB,GAAG;IAC7B;AACJ"}

package/presentation/commandPalette/abstractions.d.ts

@@ -0,0 +1,78 @@
+import type React from "react";
+import { Abstraction } from "@webiny/di";
+export interface CommandDetailProps {
+    command: ICommand;
+    onClose: () => void;
+    onBack: () => void;
+}
+/**
+ * A command registered with the command palette via dependency injection. Register an
+ * implementation with `Command.createImplementation(...)` and add it to the container;
+ * the palette resolves all of them with `container.resolveAll(Command)`.
+ */
+export interface ICommand {
+    name: string;
+    label: string;
+    description?: string;
+    icon?: React.ReactNode;
+    category?: string;
+    keywords?: string[];
+    shortcut?: string;
+    execute?(params?: unknown): void | Promise<void>;
+    detailView?: React.ComponentType<CommandDetailProps>;
+    entersAiMode?: boolean;
+}
+export declare const Command: Abstraction<ICommand>;
+export declare namespace Command {
+    type Interface = ICommand;
+    type DetailProps = CommandDetailProps;
+}
+export interface CommandItemVm {
+    name: string;
+    label: string;
+    description?: string;
+    icon?: React.ReactNode;
+    category?: string;
+    keywords?: string[];
+    shortcut?: string;
+    hasDetailView: boolean;
+    /** Selecting this switches the palette into AI mode. Lets a caller hide it when AI is off. */
+    entersAiMode: boolean;
+}
+export interface ActiveCommandVm {
+    command: ICommand;
+    DetailView: React.ComponentType<CommandDetailProps>;
+}
+export interface CommandPaletteViewModel {
+    isOpen: boolean;
+    /**
+     * A mode is showing instead of the command list. The palette keeps ONE input row across every
+     * mode, so this is the palette's state rather than the mode's.
+     */
+    aiModeActive: boolean;
+    /**
+     * What the user has typed. Owned here rather than by the component because it is cleared
+     * whenever the palette opens, closes, or enters or leaves a mode.
+     */
+    query: string;
+    commands: CommandItemVm[];
+    activeCommand: ActiveCommandVm | null;
+}
+export interface ICommandPalettePresenter {
+    vm: CommandPaletteViewModel;
+    shortcutKeys: Record<string, (e: KeyboardEvent) => void>;
+    init(): void;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    useCommand(name: string): void;
+    cancelCommand(): void;
+    enterAiMode(): void;
+    exitAiMode(): void;
+    setQuery(query: string): void;
+}
+export declare const CommandPalettePresenter: Abstraction<ICommandPalettePresenter>;
+export declare namespace CommandPalettePresenter {
+    type Interface = ICommandPalettePresenter;
+    type ViewModel = CommandPaletteViewModel;
+}

package/presentation/commandPalette/abstractions.js

@@ -0,0 +1,7 @@
+import { createAbstraction } from "@webiny/feature/admin";
+import { Abstraction } from "@webiny/di";
+const Command = createAbstraction("Command");
+const CommandPalettePresenter = new Abstraction("CommandPalettePresenter");
+export { Command, CommandPalettePresenter };
+
+//# sourceMappingURL=abstractions.js.map

package/presentation/commandPalette/abstractions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/commandPalette/abstractions.js","sources":["../../../src/presentation/commandPalette/abstractions.ts"],"sourcesContent":["import type React from \"react\";\nimport { createAbstraction } from \"@webiny/feature/admin\";\nimport { Abstraction } from \"@webiny/di\";\n\nexport interface CommandDetailProps {\n    command: ICommand;\n    onClose: () => void;\n    onBack: () => void;\n}\n\n/**\n * A command registered with the command palette via dependency injection. Register an\n * implementation with `Command.createImplementation(...)` and add it to the container;\n * the palette resolves all of them with `container.resolveAll(Command)`.\n */\nexport interface ICommand {\n    name: string;\n    label: string;\n    description?: string;\n    icon?: React.ReactNode;\n    category?: string;\n    keywords?: string[];\n    /* Global hotkey (is-hotkey syntax, e.g. \"cmd+shift+m\") that runs this command. */\n    shortcut?: string;\n    /* Omitted by a command that only selects a mode; there is no action to run. */\n    execute?(params?: unknown): void | Promise<void>;\n    /* Optional React view rendered inside the palette when the command is selected. */\n    detailView?: React.ComponentType<CommandDetailProps>;\n    /*\n     * Selecting this command switches the palette into AI mode rather than doing something. A mode\n     * needs the shared input row, so the palette stays open and `execute` is never called.\n     *\n     * Named after the one mode that exists. If a second one ever arrives, this becomes\n     * `entersMode: \"adminAssistant\"` and the palette looks the mode up by name instead of hardcoding it.\n     */\n    entersAiMode?: boolean;\n}\n\nexport const Command = createAbstraction<ICommand>(\"Command\");\n\nexport namespace Command {\n    export type Interface = ICommand;\n    export type DetailProps = CommandDetailProps;\n}\n\nexport interface CommandItemVm {\n    name: string;\n    label: string;\n    description?: string;\n    icon?: React.ReactNode;\n    category?: string;\n    keywords?: string[];\n    shortcut?: string;\n    hasDetailView: boolean;\n    /** Selecting this switches the palette into AI mode. Lets a caller hide it when AI is off. */\n    entersAiMode: boolean;\n}\n\nexport interface ActiveCommandVm {\n    command: ICommand;\n    DetailView: React.ComponentType<CommandDetailProps>;\n}\n\nexport interface CommandPaletteViewModel {\n    isOpen: boolean;\n    /**\n     * A mode is showing instead of the command list. The palette keeps ONE input row across every\n     * mode, so this is the palette's state rather than the mode's.\n     */\n    aiModeActive: boolean;\n    /**\n     * What the user has typed. Owned here rather than by the component because it is cleared\n     * whenever the palette opens, closes, or enters or leaves a mode.\n     */\n    query: string;\n    commands: CommandItemVm[];\n    activeCommand: ActiveCommandVm | null;\n}\n\nexport interface ICommandPalettePresenter {\n    vm: CommandPaletteViewModel;\n    shortcutKeys: Record<string, (e: KeyboardEvent) => void>;\n    init(): void;\n    open(): void;\n    close(): void;\n    toggle(): void;\n    useCommand(name: string): void;\n    cancelCommand(): void;\n    enterAiMode(): void;\n    exitAiMode(): void;\n    setQuery(query: string): void;\n}\n\nexport const CommandPalettePresenter = new Abstraction<ICommandPalettePresenter>(\n    \"CommandPalettePresenter\"\n);\n\nexport namespace CommandPalettePresenter {\n    export type Interface = ICommandPalettePresenter;\n    export type ViewModel = CommandPaletteViewModel;\n}\n"],"names":["Command","createAbstraction","CommandPalettePresenter","Abstraction"],"mappings":";;AAsCO,MAAMA,UAAUC,kBAA4B;AAuD5C,MAAMC,0BAA0B,IAAIC,YACvC"}

package/presentation/commandPalette/commands/AskAiCommand.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { Command } from "../abstractions.js";
+/**
+ * Discoverable entry point for the palette's AI mode.
+ *
+ * `entersAiMode` rather than `execute`: the design keeps one input row across every mode, so selecting
+ * this switches the palette instead of running an action, and the palette stays open. A command
+ * without a `detailView` is otherwise executed and then closed, which a mode cannot survive.
+ *
+ * It exists as a command at all so it stays searchable ("ai", "ask", "assistant") for people who
+ * never learn the space shortcut.
+ */
+declare class AskAiCommandImpl implements Command.Interface {
+    name: string;
+    label: string;
+    description: string;
+    category: string;
+    keywords: string[];
+    icon: React.JSX.Element;
+    entersAiMode: boolean;
+}
+export declare const AskAiCommand: typeof AskAiCommandImpl & {
+    __abstraction: import("@webiny/di").Abstraction<import("../abstractions.js").ICommand>;
+};
+export {};

package/presentation/commandPalette/commands/AskAiCommand.js

@@ -0,0 +1,33 @@
+import react from "react";
+import { Icon } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/auto_awesome.svg";
+import { Command } from "../abstractions.js";
+class AskAiCommandImpl {
+    constructor(){
+        this.name = "admin.ai.ask";
+        this.label = "Ask AI";
+        this.description = "Ask about this project, or ask for a change, in plain language";
+        this.category = "Assistant";
+        this.keywords = [
+            "ai",
+            "ask",
+            "assistant",
+            "chat",
+            "search"
+        ];
+        this.icon = /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            size: "sm",
+            color: "neutral-strong",
+            label: ""
+        });
+        this.entersAiMode = true;
+    }
+}
+const AskAiCommand = Command.createImplementation({
+    implementation: AskAiCommandImpl,
+    dependencies: []
+});
+export { AskAiCommand };
+
+//# sourceMappingURL=AskAiCommand.js.map

package/presentation/commandPalette/commands/AskAiCommand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/commandPalette/commands/AskAiCommand.js","sources":["../../../../src/presentation/commandPalette/commands/AskAiCommand.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { ReactComponent as AiIcon } from \"@webiny/icons/auto_awesome.svg\";\nimport { Command } from \"../abstractions.js\";\n\n/**\n * Discoverable entry point for the palette's AI mode.\n *\n * `entersAiMode` rather than `execute`: the design keeps one input row across every mode, so selecting\n * this switches the palette instead of running an action, and the palette stays open. A command\n * without a `detailView` is otherwise executed and then closed, which a mode cannot survive.\n *\n * It exists as a command at all so it stays searchable (\"ai\", \"ask\", \"assistant\") for people who\n * never learn the space shortcut.\n */\nclass AskAiCommandImpl implements Command.Interface {\n    name = \"admin.ai.ask\";\n    label = \"Ask AI\";\n    description = \"Ask about this project, or ask for a change, in plain language\";\n    category = \"Assistant\";\n    keywords = [\"ai\", \"ask\", \"assistant\", \"chat\", \"search\"];\n    icon = <Icon icon={<AiIcon />} size=\"sm\" color=\"neutral-strong\" label=\"\" />;\n    entersAiMode = true;\n}\n\nexport const AskAiCommand = Command.createImplementation({\n    implementation: AskAiCommandImpl,\n    dependencies: []\n});\n"],"names":["AskAiCommandImpl","Icon","AiIcon","AskAiCommand","Command"],"mappings":";;;;AAeA,MAAMA;;aACF,IAAI,GAAG;aACP,KAAK,GAAG;aACR,WAAW,GAAG;aACd,QAAQ,GAAG;aACX,QAAQ,GAAG;YAAC;YAAM;YAAO;YAAa;YAAQ;SAAS;aACvD,IAAI,GAAG,WAAP,GAAO,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,gBAAMA;YAAK,MAAK;YAAK,OAAM;YAAiB,OAAM;;aACtE,YAAY,GAAG;;AACnB;AAEO,MAAMC,eAAeC,QAAQ,oBAAoB,CAAC;IACrD,gBAAgBJ;IAChB,cAAc,EAAE;AACpB"}

package/presentation/commandPalette/commands/CopyCurrentUrlCommand.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { Command } from "../abstractions.js";
+declare class CopyCurrentUrlCommandImpl implements Command.Interface {
+    name: string;
+    label: string;
+    description: string;
+    category: string;
+    keywords: string[];
+    icon: React.JSX.Element;
+    execute(): void;
+}
+export declare const CopyCurrentUrlCommand: typeof CopyCurrentUrlCommandImpl & {
+    __abstraction: import("@webiny/di").Abstraction<import("../abstractions.js").ICommand>;
+};
+export {};

package/presentation/commandPalette/commands/CopyCurrentUrlCommand.js

@@ -0,0 +1,33 @@
+import react from "react";
+import { Icon } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/content_copy.svg";
+import { Command } from "../abstractions.js";
+class CopyCurrentUrlCommandImpl {
+    execute() {
+        navigator.clipboard?.writeText(window.location.href);
+    }
+    constructor(){
+        this.name = "admin.copyCurrentUrl";
+        this.label = "Copy current URL";
+        this.description = "Copy this page's link to the clipboard";
+        this.category = "Actions";
+        this.keywords = [
+            "clipboard",
+            "share",
+            "link"
+        ];
+        this.icon = /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            size: "sm",
+            color: "neutral-strong",
+            label: ""
+        });
+    }
+}
+const CopyCurrentUrlCommand = Command.createImplementation({
+    implementation: CopyCurrentUrlCommandImpl,
+    dependencies: []
+});
+export { CopyCurrentUrlCommand };
+
+//# sourceMappingURL=CopyCurrentUrlCommand.js.map

package/presentation/commandPalette/commands/CopyCurrentUrlCommand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/commandPalette/commands/CopyCurrentUrlCommand.js","sources":["../../../../src/presentation/commandPalette/commands/CopyCurrentUrlCommand.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { ReactComponent as CopyIcon } from \"@webiny/icons/content_copy.svg\";\nimport { Command } from \"../abstractions.js\";\n\nclass CopyCurrentUrlCommandImpl implements Command.Interface {\n    name = \"admin.copyCurrentUrl\";\n    label = \"Copy current URL\";\n    description = \"Copy this page's link to the clipboard\";\n    category = \"Actions\";\n    keywords = [\"clipboard\", \"share\", \"link\"];\n    icon = <Icon icon={<CopyIcon />} size=\"sm\" color=\"neutral-strong\" label=\"\" />;\n\n    execute() {\n        void navigator.clipboard?.writeText(window.location.href);\n    }\n}\n\nexport const CopyCurrentUrlCommand = Command.createImplementation({\n    implementation: CopyCurrentUrlCommandImpl,\n    dependencies: []\n});\n"],"names":["CopyCurrentUrlCommandImpl","navigator","window","Icon","CopyIcon","CopyCurrentUrlCommand","Command"],"mappings":";;;;AAKA,MAAMA;IAQF,UAAU;QACDC,UAAU,SAAS,EAAE,UAAUC,OAAO,QAAQ,CAAC,IAAI;IAC5D;;aATA,IAAI,GAAG;aACP,KAAK,GAAG;aACR,WAAW,GAAG;aACd,QAAQ,GAAG;aACX,QAAQ,GAAG;YAAC;YAAa;YAAS;SAAO;aACzC,IAAI,GAAG,WAAP,GAAO,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,gBAAQA;YAAK,MAAK;YAAK,OAAM;YAAiB,OAAM;;;AAK5E;AAEO,MAAMC,wBAAwBC,QAAQ,oBAAoB,CAAC;IAC9D,gBAAgBN;IAChB,cAAc,EAAE;AACpB"}

package/presentation/commandPalette/commands/SendMessageCommand.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { Command } from "../abstractions.js";
+/**
+ * DEMO command showcasing a `detailView`: selecting it opens a form inside the palette,
+ * and submitting calls `execute(data)`. Safe to remove — kept as a live example of the
+ * detail-view capability.
+ */
+declare const SendMessageDetailView: ({ command, onClose }: Command.DetailProps) => React.JSX.Element;
+declare class SendMessageCommandImpl implements Command.Interface {
+    name: string;
+    label: string;
+    description: string;
+    category: string;
+    keywords: string[];
+    shortcut: string;
+    icon: React.JSX.Element;
+    detailView: typeof SendMessageDetailView;
+    execute(params?: unknown): void;
+}
+export declare const SendMessageCommand: typeof SendMessageCommandImpl & {
+    __abstraction: import("@webiny/di").Abstraction<import("../abstractions.js").ICommand>;
+};
+export {};

package/presentation/commandPalette/commands/SendMessageCommand.js

@@ -0,0 +1,66 @@
+import react, { useState } from "react";
+import { Button, Icon, Input } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/send.svg";
+import { Command } from "../abstractions.js";
+const SendMessageDetailView = ({ command, onClose })=>{
+    const [recipient, setRecipient] = useState("");
+    const [message, setMessage] = useState("");
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-sm p-md"
+    }, /*#__PURE__*/ react.createElement(Input, {
+        label: "Recipient",
+        value: recipient,
+        onChange: setRecipient,
+        placeholder: "Enter recipient",
+        autoFocus: true
+    }), /*#__PURE__*/ react.createElement(Input, {
+        label: "Message",
+        value: message,
+        onChange: setMessage,
+        placeholder: "Enter your message"
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "flex justify-end pt-sm"
+    }, /*#__PURE__*/ react.createElement(Button, {
+        variant: "primary",
+        text: "Send",
+        onClick: ()=>{
+            command.execute?.({
+                recipient,
+                message
+            });
+            onClose();
+        }
+    })));
+};
+class SendMessageCommandImpl {
+    execute(params) {
+        const data = params;
+        window.alert(`Message to ${data?.recipient || "?"}: ${data?.message || ""}`);
+    }
+    constructor(){
+        this.name = "admin.demo.sendMessage";
+        this.label = "Send message";
+        this.description = "Demo — a form rendered inside the palette";
+        this.category = "Demo";
+        this.keywords = [
+            "demo",
+            "form",
+            "message"
+        ];
+        this.shortcut = "cmd+shift+m";
+        this.icon = /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            size: "sm",
+            color: "neutral-strong",
+            label: ""
+        });
+        this.detailView = SendMessageDetailView;
+    }
+}
+const SendMessageCommand = Command.createImplementation({
+    implementation: SendMessageCommandImpl,
+    dependencies: []
+});
+export { SendMessageCommand };
+
+//# sourceMappingURL=SendMessageCommand.js.map