@webiny/app-admin-ui 6.4.11 → 6.6.0-alpha.1

package/CommandPalette/modes/createAiMode.d.ts

@@ -0,0 +1,13 @@
+import type { AiChatPresenter } 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 `AiChatPresenter`.
+ *
+ * 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: AiChatPresenter.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 your content…",
+                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 { AiChatPresenter } 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 `AiChatPresenter`.\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: AiChatPresenter.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 your content…\",\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,YAAuD;QAChF,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/types.d.ts

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

package/CommandPalette/usePaletteHotkeys.d.ts

@@ -0,0 +1,14 @@
+import { type CommandPalettePresenter } from "@webiny/app-admin";
+interface PaletteHotkeysParams {
+    presenter: CommandPalettePresenter.Interface;
+    close: () => void;
+}
+/**
+ * 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 }: PaletteHotkeysParams) => void;
+export {};

package/CommandPalette/usePaletteHotkeys.js

@@ -0,0 +1,35 @@
+import { useMemo } from "react";
+import { useHotkeys } from "@webiny/app-admin";
+import { PALETTE_HOTKEY_ZINDEX } from "./constants.js";
+const usePaletteHotkeys = ({ presenter, close })=>{
+    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 (!aiModeActive) return void presenter.enterAiMode();
+                close();
+            },
+            backspace: (e)=>{
+                if (e.target instanceof HTMLInputElement) return;
+                e.preventDefault();
+                presenter.cancelCommand();
+            },
+            ...presenter.shortcutKeys
+        }), [
+        presenter,
+        presenter.shortcutKeys,
+        isOpen,
+        activeCommand,
+        aiModeActive,
+        close
+    ]);
+    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}\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 }: 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 (!aiModeActive) {\n                    presenter.enterAiMode();\n                    return;\n                }\n\n                close();\n            },\n            backspace: (e: KeyboardEvent) => {\n                if (e.target instanceof HTMLInputElement) {\n                    return;\n                }\n                e.preventDefault();\n                presenter.cancelCommand();\n            },\n            ...presenter.shortcutKeys\n        }),\n        [presenter, presenter.shortcutKeys, isOpen, activeCommand, aiModeActive, close]\n    );\n\n    useHotkeys({ zIndex: PALETTE_HOTKEY_ZINDEX, keys });\n};\n"],"names":["usePaletteHotkeys","presenter","close","isOpen","activeCommand","aiModeActive","keys","useMemo","e","HTMLInputElement","useHotkeys","PALETTE_HOTKEY_ZINDEX"],"mappings":";;;AAiBO,MAAMA,oBAAoB,CAAC,EAAEC,SAAS,EAAEC,KAAK,EAAwB;IACxE,MAAM,EAAEC,MAAM,EAAEC,aAAa,EAAEC,YAAY,EAAE,GAAGJ,UAAU,EAAE;IAQ5D,MAAMK,OAAOC,QACT,IAAO;YACH,SAAS,CAACC;gBACNA,EAAE,cAAc;gBAEhB,IAAI,CAACL,QAAQ,YACTF,UAAU,IAAI;gBAQlB,IAAIG,eAAe,YACfH,UAAU,aAAa;gBAI3B,IAAI,CAACI,cAAc,YACfJ,UAAU,WAAW;gBAIzBC;YACJ;YACA,WAAW,CAACM;gBACR,IAAIA,EAAE,MAAM,YAAYC,kBACpB;gBAEJD,EAAE,cAAc;gBAChBP,UAAU,aAAa;YAC3B;YACA,GAAGA,UAAU,YAAY;QAC7B,IACA;QAACA;QAAWA,UAAU,YAAY;QAAEE;QAAQC;QAAeC;QAAcH;KAAM;IAGnFQ,WAAW;QAAE,QAAQC;QAAuBL;IAAK;AACrD"}

package/Layout.js

@@ -1,25 +1,53 @@
-import react from "react";
+import react, { useCallback, useMemo, useRef } from "react";
 import react_helmet from "react-helmet";
 import { LayoutRenderer, Navigation, TenantSelector, UserMenu } from "@webiny/app-admin";
-import { HeaderBar, cn, useSidebar } from "@webiny/admin-ui";
-const Layout_Layout = LayoutRenderer.createDecorator(()=>function({ title, startElement = null, hideNavigation = false, children }) {
-        const { pinned } = useSidebar();
-        const widthClassNames = {
-            "max-w-[calc(100%-(var(--spacing-sidebar-expanded)))] ": pinned,
-            "max-w-[calc(100%-(var(--spacing-sidebar-collapsed)))] ": !pinned
-        };
-        return /*#__PURE__*/ react.createElement(react.Fragment, null, title ? /*#__PURE__*/ react.createElement(react_helmet, {
-            title: title
-        }) : null, hideNavigation ? null : /*#__PURE__*/ react.createElement(Navigation, null), /*#__PURE__*/ react.createElement("div", {
-            className: cn("ml-auto bg-neutral-base transition-[max-width,min-width] ease-linear w-full", hideNavigation ? void 0 : widthClassNames)
-        }, /*#__PURE__*/ react.createElement(HeaderBar, {
-            start: startElement,
-            end: /*#__PURE__*/ react.createElement("div", {
-                className: "flex gap-x-sm items-center justify-end"
-            }, /*#__PURE__*/ react.createElement(TenantSelector, null), /*#__PURE__*/ react.createElement(UserMenu, null))
-        }), /*#__PURE__*/ react.createElement("main", {
-            className: "relative overflow-y-auto h-main-content"
-        }, children)));
+import { HeaderBar, SidebarProvider, cn, useSidebar } from "@webiny/admin-ui";
+import { useLocalStorage, useLocalStorageValue } from "@webiny/app";
+import { CommandPalette } from "./CommandPalette/CommandPalette.js";
+import { Breadcrumbs } from "./Breadcrumbs/Breadcrumbs.js";
+const SIDEBAR_STATE_KEY = "navigation/state";
+const parseSidebarState = (raw)=>{
+    try {
+        if ("object" == typeof raw && null !== raw) return raw;
+        if ("string" == typeof raw) return JSON.parse(raw);
+    } catch  {}
+};
+const LayoutContent = ({ title, startElement = null, hideNavigation = false, children })=>{
+    const { pinned } = useSidebar();
+    const widthClassNames = {
+        "max-w-[calc(100%-(var(--spacing-sidebar-expanded)))] ": pinned,
+        "max-w-[calc(100%-(var(--spacing-sidebar-collapsed)))] ": !pinned
+    };
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, title ? /*#__PURE__*/ react.createElement(react_helmet, {
+        title: title
+    }) : null, /*#__PURE__*/ react.createElement(CommandPalette, null), hideNavigation ? null : /*#__PURE__*/ react.createElement(Navigation, null), /*#__PURE__*/ react.createElement("div", {
+        className: cn("ml-auto bg-neutral-base transition-[max-width,min-width] ease-linear w-full", hideNavigation ? void 0 : widthClassNames)
+    }, /*#__PURE__*/ react.createElement(HeaderBar, {
+        start: /*#__PURE__*/ react.createElement("div", {
+            className: "flex items-center gap-sm"
+        }, /*#__PURE__*/ react.createElement(Breadcrumbs, null), startElement),
+        end: /*#__PURE__*/ react.createElement("div", {
+            className: "flex gap-x-sm items-center justify-end"
+        }, /*#__PURE__*/ react.createElement(TenantSelector, null), /*#__PURE__*/ react.createElement(UserMenu, null))
+    }), /*#__PURE__*/ react.createElement("main", {
+        className: "relative overflow-y-auto h-main-content"
+    }, children)));
+};
+const Layout_Layout = LayoutRenderer.createDecorator(()=>function(props) {
+        const localStorage = useLocalStorage();
+        const localStorageRef = useRef(localStorage);
+        localStorageRef.current = localStorage;
+        const rawState = useLocalStorageValue(SIDEBAR_STATE_KEY);
+        const cachedState = useMemo(()=>parseSidebarState(rawState), [
+            rawState
+        ]);
+        const onChangeState = useCallback((newState)=>{
+            localStorageRef.current.set(SIDEBAR_STATE_KEY, JSON.stringify(newState));
+        }, []);
+        return /*#__PURE__*/ react.createElement(SidebarProvider, {
+            state: cachedState,
+            onChangeState: onChangeState
+        }, /*#__PURE__*/ react.createElement(LayoutContent, props));
     });
 export { Layout_Layout as Layout };
 

package/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","sources":["../src/Layout.tsx"],"sourcesContent":["import React from \"react\";\nimport Helmet from \"react-helmet\";\nimport type { LayoutProps } from \"@webiny/app-admin\";\nimport { LayoutRenderer, Navigation, TenantSelector, UserMenu } from \"@webiny/app-admin\";\nimport { HeaderBar, cn, useSidebar } from \"@webiny/admin-ui\";\n\nexport const Layout = LayoutRenderer.createDecorator(() => {\n    return function Layout({\n        title,\n        startElement = null,\n        hideNavigation = false,\n        children\n    }: LayoutProps) {\n        const { pinned } = useSidebar();\n\n        const widthClassNames = {\n            \"max-w-[calc(100%-(var(--spacing-sidebar-expanded)))] \": pinned,\n            \"max-w-[calc(100%-(var(--spacing-sidebar-collapsed)))] \": !pinned\n        };\n\n        return (\n            <>\n                {title ? <Helmet title={title} /> : null}\n                {hideNavigation ? null : <Navigation />}\n                <div\n                    className={cn(\n                        \"ml-auto bg-neutral-base transition-[max-width,min-width] ease-linear w-full\",\n                        hideNavigation ? undefined : widthClassNames\n                    )}\n                >\n                    <HeaderBar\n                        start={startElement}\n                        end={\n                            <div className={\"flex gap-x-sm items-center justify-end\"}>\n                                <TenantSelector />\n                                <UserMenu />\n                            </div>\n                        }\n                    />\n                    <main className={\"relative overflow-y-auto h-main-content\"}>{children}</main>\n                </div>\n            </>\n        );\n    };\n});\n"],"names":["Layout","LayoutRenderer","title","startElement","hideNavigation","children","pinned","useSidebar","widthClassNames","Helmet","Navigation","cn","undefined","HeaderBar","TenantSelector","UserMenu"],"mappings":";;;;AAMO,MAAMA,gBAASC,eAAe,eAAe,CAAC,IAC1C,SAAgB,EACnBC,KAAK,EACLC,eAAe,IAAI,EACnBC,iBAAiB,KAAK,EACtBC,QAAQ,EACE;QACV,MAAM,EAAEC,MAAM,EAAE,GAAGC;QAEnB,MAAMC,kBAAkB;YACpB,yDAAyDF;YACzD,0DAA0D,CAACA;QAC/D;QAEA,OAAO,WAAP,GACI,0CACKJ,QAAQ,WAARA,GAAQ,oBAACO,cAAMA;YAAC,OAAOP;aAAY,MACnCE,iBAAiB,OAAO,WAAP,GAAO,oBAACM,YAAUA,OAAAA,WAAAA,GACpC,oBAAC;YACG,WAAWC,GACP,+EACAP,iBAAiBQ,SAAYJ;yBAGjC,oBAACK,WAASA;YACN,OAAOV;YACP,mBACI,oBAAC;gBAAI,WAAW;6BACZ,oBAACW,gBAAcA,OAAAA,WAAAA,GACf,oBAACC,UAAQA;0BAIrB,oBAAC;YAAK,WAAW;WAA4CV;IAI7E"}
+{"version":3,"file":"Layout.js","sources":["../src/Layout.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef } from \"react\";\nimport Helmet from \"react-helmet\";\nimport type { LayoutProps } from \"@webiny/app-admin\";\nimport { LayoutRenderer, Navigation, TenantSelector, UserMenu } from \"@webiny/app-admin\";\nimport { HeaderBar, SidebarProvider, cn, useSidebar } from \"@webiny/admin-ui\";\nimport { useLocalStorage, useLocalStorageValue } from \"@webiny/app\";\nimport { CommandPalette } from \"./CommandPalette/CommandPalette.js\";\nimport { Breadcrumbs } from \"./Breadcrumbs/Breadcrumbs.js\";\n\nconst SIDEBAR_STATE_KEY = \"navigation/state\";\n\ntype SidebarCachedState = {\n    pinned: boolean;\n    expandedSections: string[];\n    pinnedItems: string[];\n};\n\nconst parseSidebarState = (raw: unknown): SidebarCachedState | undefined => {\n    try {\n        if (typeof raw === \"object\" && raw !== null) {\n            return raw as SidebarCachedState;\n        }\n        if (typeof raw === \"string\") {\n            return JSON.parse(raw) as SidebarCachedState;\n        }\n    } catch {\n        // Ignore parse errors\n    }\n    return undefined;\n};\n\nconst LayoutContent = ({\n    title,\n    startElement = null,\n    hideNavigation = false,\n    children\n}: LayoutProps) => {\n    const { pinned } = useSidebar();\n\n    const widthClassNames = {\n        \"max-w-[calc(100%-(var(--spacing-sidebar-expanded)))] \": pinned,\n        \"max-w-[calc(100%-(var(--spacing-sidebar-collapsed)))] \": !pinned\n    };\n\n    return (\n        <>\n            {title ? <Helmet title={title} /> : null}\n            <CommandPalette />\n            {hideNavigation ? null : <Navigation />}\n            <div\n                className={cn(\n                    \"ml-auto bg-neutral-base transition-[max-width,min-width] ease-linear w-full\",\n                    hideNavigation ? undefined : widthClassNames\n                )}\n            >\n                <HeaderBar\n                    start={\n                        <div className=\"flex items-center gap-sm\">\n                            <Breadcrumbs />\n                            {startElement}\n                        </div>\n                    }\n                    end={\n                        <div className={\"flex gap-x-sm items-center justify-end\"}>\n                            <TenantSelector />\n                            <UserMenu />\n                        </div>\n                    }\n                />\n                <main className={\"relative overflow-y-auto h-main-content\"}>{children}</main>\n            </div>\n        </>\n    );\n};\n\nexport const Layout = LayoutRenderer.createDecorator(() => {\n    return function Layout(props: LayoutProps) {\n        const localStorage = useLocalStorage();\n        const localStorageRef = useRef(localStorage);\n        localStorageRef.current = localStorage;\n\n        const rawState = useLocalStorageValue(SIDEBAR_STATE_KEY);\n        const cachedState = useMemo(() => parseSidebarState(rawState), [rawState]);\n\n        const onChangeState = useCallback((newState: SidebarCachedState) => {\n            localStorageRef.current.set(SIDEBAR_STATE_KEY, JSON.stringify(newState));\n        }, []);\n\n        return (\n            <SidebarProvider state={cachedState} onChangeState={onChangeState}>\n                <LayoutContent {...props} />\n            </SidebarProvider>\n        );\n    };\n});\n"],"names":["SIDEBAR_STATE_KEY","parseSidebarState","raw","JSON","LayoutContent","title","startElement","hideNavigation","children","pinned","useSidebar","widthClassNames","Helmet","CommandPalette","Navigation","cn","undefined","HeaderBar","Breadcrumbs","TenantSelector","UserMenu","Layout","LayoutRenderer","props","localStorage","useLocalStorage","localStorageRef","useRef","rawState","useLocalStorageValue","cachedState","useMemo","onChangeState","useCallback","newState","SidebarProvider"],"mappings":";;;;;;;AASA,MAAMA,oBAAoB;AAQ1B,MAAMC,oBAAoB,CAACC;IACvB,IAAI;QACA,IAAI,AAAe,YAAf,OAAOA,OAAoBA,AAAQ,SAARA,KAC3B,OAAOA;QAEX,IAAI,AAAe,YAAf,OAAOA,KACP,OAAOC,KAAK,KAAK,CAACD;IAE1B,EAAE,OAAM,CAER;AAEJ;AAEA,MAAME,gBAAgB,CAAC,EACnBC,KAAK,EACLC,eAAe,IAAI,EACnBC,iBAAiB,KAAK,EACtBC,QAAQ,EACE;IACV,MAAM,EAAEC,MAAM,EAAE,GAAGC;IAEnB,MAAMC,kBAAkB;QACpB,yDAAyDF;QACzD,0DAA0D,CAACA;IAC/D;IAEA,OAAO,WAAP,GACI,0CACKJ,QAAQ,WAARA,GAAQ,oBAACO,cAAMA;QAAC,OAAOP;SAAY,oBACpC,oBAACQ,gBAAcA,OACdN,iBAAiB,OAAO,WAAP,GAAO,oBAACO,YAAUA,OAAAA,WAAAA,GACpC,oBAAC;QACG,WAAWC,GACP,+EACAR,iBAAiBS,SAAYL;qBAGjC,oBAACM,WAASA;QACN,qBACI,oBAAC;YAAI,WAAU;yBACX,oBAACC,aAAWA,OACXZ;QAGT,mBACI,oBAAC;YAAI,WAAW;yBACZ,oBAACa,gBAAcA,OAAAA,WAAAA,GACf,oBAACC,UAAQA;sBAIrB,oBAAC;QAAK,WAAW;OAA4CZ;AAI7E;AAEO,MAAMa,gBAASC,eAAe,eAAe,CAAC,IAC1C,SAAgBC,KAAkB;QACrC,MAAMC,eAAeC;QACrB,MAAMC,kBAAkBC,OAAOH;QAC/BE,gBAAgB,OAAO,GAAGF;QAE1B,MAAMI,WAAWC,qBAAqB7B;QACtC,MAAM8B,cAAcC,QAAQ,IAAM9B,kBAAkB2B,WAAW;YAACA;SAAS;QAEzE,MAAMI,gBAAgBC,YAAY,CAACC;YAC/BR,gBAAgB,OAAO,CAAC,GAAG,CAAC1B,mBAAmBG,KAAK,SAAS,CAAC+B;QAClE,GAAG,EAAE;QAEL,OAAO,WAAP,GACI,oBAACC,iBAAeA;YAAC,OAAOL;YAAa,eAAeE;yBAChD,oBAAC5B,eAAkBmB;IAG/B"}

package/index.js

@@ -1,7 +1,7 @@
 import react from "react";
 import { AdminConfig } from "@webiny/app-admin";
 import { Layout } from "./Layout.js";
-import { Navigation } from "./Navigation.js";
+import { Navigation } from "./Navigation/Navigation.js";
 import { UserMenu } from "./UserMenu.js";
 import { Dialog } from "./Dialog.js";
 import { NotFound } from "./NotFound.js";

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { AdminConfig } from \"@webiny/app-admin\";\nimport { Layout } from \"./Layout.js\";\nimport { Navigation } from \"./Navigation.js\";\nimport { UserMenu } from \"~/UserMenu.js\";\nimport { Dialog } from \"./Dialog.js\";\nimport { NotFound } from \"./NotFound.js\";\nimport { Dashboard } from \"./Dashboard.js\";\nimport { Logo } from \"./Logo.js\";\nimport { AssistanceWidget, CommunityWidget } from \"./Dashboard/components/index.js\";\n\nexport const AdminUI = () => {\n    return (\n        <>\n            <AdminConfig>\n                <AdminConfig.Dashboard.Widget\n                    name=\"admin.assistance\"\n                    column=\"right\"\n                    pin=\"last\"\n                    element={<AssistanceWidget />}\n                />\n                <AdminConfig.Dashboard.Widget\n                    name=\"admin.community\"\n                    pin=\"last\"\n                    column=\"right\"\n                    element={<CommunityWidget />}\n                />\n            </AdminConfig>\n            <Dashboard />\n            <Dialog />\n            <Layout />\n            <Navigation />\n            <NotFound />\n            <UserMenu />\n            <Logo />\n        </>\n    );\n};\n"],"names":["AdminUI","AdminConfig","AssistanceWidget","CommunityWidget","Dashboard","Dialog","Layout","Navigation","NotFound","UserMenu","Logo"],"mappings":";;;;;;;;;;AAWO,MAAMA,UAAU,IACZ,WAAP,GACI,wDACI,oBAACC,aAAWA,MAAAA,WAAAA,GACR,oBAACA,YAAY,SAAS,CAAC,MAAM;QACzB,MAAK;QACL,QAAO;QACP,KAAI;QACJ,uBAAS,oBAACC,kBAAgBA;sBAE9B,oBAACD,YAAY,SAAS,CAAC,MAAM;QACzB,MAAK;QACL,KAAI;QACJ,QAAO;QACP,uBAAS,oBAACE,iBAAeA;uBAGjC,oBAACC,WAASA,OAAAA,WAAAA,GACV,oBAACC,QAAMA,OAAAA,WAAAA,GACP,oBAACC,QAAMA,OAAAA,WAAAA,GACP,oBAACC,YAAUA,OAAAA,WAAAA,GACX,oBAACC,UAAQA,OAAAA,WAAAA,GACT,oBAACC,UAAQA,OAAAA,WAAAA,GACT,oBAACC,MAAIA"}
+{"version":3,"file":"index.js","sources":["../src/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { AdminConfig } from \"@webiny/app-admin\";\nimport { Layout } from \"./Layout.js\";\nimport { Navigation } from \"./Navigation/Navigation.js\";\nimport { UserMenu } from \"~/UserMenu.js\";\nimport { Dialog } from \"./Dialog.js\";\nimport { NotFound } from \"./NotFound.js\";\nimport { Dashboard } from \"./Dashboard.js\";\nimport { Logo } from \"./Logo.js\";\nimport { AssistanceWidget, CommunityWidget } from \"./Dashboard/components/index.js\";\n\nexport const AdminUI = () => {\n    return (\n        <>\n            <AdminConfig>\n                <AdminConfig.Dashboard.Widget\n                    name=\"admin.assistance\"\n                    column=\"right\"\n                    pin=\"last\"\n                    element={<AssistanceWidget />}\n                />\n                <AdminConfig.Dashboard.Widget\n                    name=\"admin.community\"\n                    pin=\"last\"\n                    column=\"right\"\n                    element={<CommunityWidget />}\n                />\n            </AdminConfig>\n            <Dashboard />\n            <Dialog />\n            <Layout />\n            <Navigation />\n            <NotFound />\n            <UserMenu />\n            <Logo />\n        </>\n    );\n};\n"],"names":["AdminUI","AdminConfig","AssistanceWidget","CommunityWidget","Dashboard","Dialog","Layout","Navigation","NotFound","UserMenu","Logo"],"mappings":";;;;;;;;;;AAWO,MAAMA,UAAU,IACZ,WAAP,GACI,wDACI,oBAACC,aAAWA,MAAAA,WAAAA,GACR,oBAACA,YAAY,SAAS,CAAC,MAAM;QACzB,MAAK;QACL,QAAO;QACP,KAAI;QACJ,uBAAS,oBAACC,kBAAgBA;sBAE9B,oBAACD,YAAY,SAAS,CAAC,MAAM;QACzB,MAAK;QACL,KAAI;QACJ,QAAO;QACP,uBAAS,oBAACE,iBAAeA;uBAGjC,oBAACC,WAASA,OAAAA,WAAAA,GACV,oBAACC,QAAMA,OAAAA,WAAAA,GACP,oBAACC,QAAMA,OAAAA,WAAAA,GACP,oBAACC,YAAUA,OAAAA,WAAAA,GACX,oBAACC,UAAQA,OAAAA,WAAAA,GACT,oBAACC,UAAQA,OAAAA,WAAAA,GACT,oBAACC,MAAIA"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/app-admin-ui",
-	"version": "6.4.11",
+	"version": "6.6.0-alpha.1",
 	"type": "module",
 	"exports": {
 		".": "./index.js",
@@ -14,19 +14,20 @@
 	"license": "MIT",
 	"dependencies": {
 		"@types/react": "18.3.31",
-		"@webiny/admin-ui": "6.4.11",
-		"@webiny/app": "6.4.11",
-		"@webiny/app-admin": "6.4.11",
-		"@webiny/icons": "6.4.11",
+		"@webiny/admin-ui": "6.6.0-alpha.1",
+		"@webiny/app": "6.6.0-alpha.1",
+		"@webiny/app-admin": "6.6.0-alpha.1",
+		"@webiny/icons": "6.6.0-alpha.1",
+		"cmdk": "1.1.1",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"react-helmet": "6.1.0"
 	},
 	"devDependencies": {
 		"@types/react-helmet": "6.1.11",
-		"@webiny/build-tools": "6.4.11",
+		"@webiny/build-tools": "6.6.0-alpha.1",
 		"rimraf": "6.1.3",
-		"typescript": "6.0.3"
+		"typescript": "7.0.2"
 	},
 	"publishConfig": {
 		"access": "public"

package/Navigation/SidebarProvider.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-interface NavigationProviderProps {
-    children?: React.ReactNode;
-}
-export declare const SidebarProvider: (Component: React.ComponentType<NavigationProviderProps>) => (props: NavigationProviderProps) => React.JSX.Element;
-export {};

package/Navigation/SidebarProvider.js

@@ -1,26 +0,0 @@
-import react, { useMemo } from "react";
-import { SidebarProvider as admin_ui_SidebarProvider } from "@webiny/admin-ui";
-import { useLocalStorage, useLocalStorageValue } from "@webiny/app";
-const SIDEBAR_STATE_KEY = "navigation/state";
-const SidebarProvider_SidebarProvider = (Component)=>function(props) {
-        const rawState = useLocalStorageValue(SIDEBAR_STATE_KEY);
-        const { set } = useLocalStorage();
-        const state = useMemo(()=>{
-            try {
-                if ("object" == typeof rawState && null !== rawState) return rawState;
-                if ("string" == typeof rawState) return JSON.parse(rawState);
-            } catch  {}
-        }, [
-            rawState
-        ]);
-        const onChangeState = (newState)=>{
-            set(SIDEBAR_STATE_KEY, JSON.stringify(newState));
-        };
-        return /*#__PURE__*/ react.createElement(admin_ui_SidebarProvider, {
-            state: state,
-            onChangeState: onChangeState
-        }, /*#__PURE__*/ react.createElement(Component, props));
-    };
-export { SidebarProvider_SidebarProvider as SidebarProvider };
-
-//# sourceMappingURL=SidebarProvider.js.map

package/Navigation/SidebarProvider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Navigation/SidebarProvider.js","sources":["../../src/Navigation/SidebarProvider.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { SidebarProvider as AdminUiSidebar } from \"@webiny/admin-ui\";\nimport { useLocalStorage, useLocalStorageValue } from \"@webiny/app\";\n\ninterface NavigationProviderProps {\n    children?: React.ReactNode;\n}\n\nconst SIDEBAR_STATE_KEY = \"navigation/state\";\n\ntype SidebarState = {\n    pinned: boolean;\n    expandedSections: string[];\n    pinnedItems: string[];\n};\n\nexport const SidebarProvider = (Component: React.ComponentType<NavigationProviderProps>) => {\n    return function SidebarProvider(props: NavigationProviderProps) {\n        const rawState = useLocalStorageValue(SIDEBAR_STATE_KEY);\n        const { set } = useLocalStorage();\n\n        const state = useMemo(() => {\n            try {\n                if (typeof rawState === \"object\" && rawState !== null) {\n                    return rawState as SidebarState;\n                }\n                if (typeof rawState === \"string\") {\n                    return JSON.parse(rawState) as SidebarState;\n                }\n            } catch {\n                // Ignore parse errors\n            }\n            return undefined;\n        }, [rawState]);\n\n        const onChangeState = (newState: SidebarState) => {\n            set(SIDEBAR_STATE_KEY, JSON.stringify(newState));\n        };\n\n        return (\n            <AdminUiSidebar state={state} onChangeState={onChangeState}>\n                <Component {...props} />\n            </AdminUiSidebar>\n        );\n    };\n};\n"],"names":["SIDEBAR_STATE_KEY","SidebarProvider","Component","props","rawState","useLocalStorageValue","set","useLocalStorage","state","useMemo","JSON","onChangeState","newState","AdminUiSidebar"],"mappings":";;;AAQA,MAAMA,oBAAoB;AAQnB,MAAMC,kCAAkB,CAACC,YACrB,SAAyBC,KAA8B;QAC1D,MAAMC,WAAWC,qBAAqBL;QACtC,MAAM,EAAEM,GAAG,EAAE,GAAGC;QAEhB,MAAMC,QAAQC,QAAQ;YAClB,IAAI;gBACA,IAAI,AAAoB,YAApB,OAAOL,YAAyBA,AAAa,SAAbA,UAChC,OAAOA;gBAEX,IAAI,AAAoB,YAApB,OAAOA,UACP,OAAOM,KAAK,KAAK,CAACN;YAE1B,EAAE,OAAM,CAER;QAEJ,GAAG;YAACA;SAAS;QAEb,MAAMO,gBAAgB,CAACC;YACnBN,IAAIN,mBAAmBU,KAAK,SAAS,CAACE;QAC1C;QAEA,OAAO,WAAP,GACI,oBAACC,0BAAcA;YAAC,OAAOL;YAAO,eAAeG;yBACzC,oBAACT,WAAcC;IAG3B"}

package/Navigation.d.ts

@@ -1,2 +0,0 @@
-import React from "react";
-export declare const Navigation: () => React.JSX.Element;

package/Navigation.js

@@ -1,10 +0,0 @@
-import react from "react";
-import { Provider } from "@webiny/app-admin";
-import { SidebarProvider } from "./Navigation/SidebarProvider.js";
-import { Navigation } from "./Navigation/Navigation.js";
-const Navigation_Navigation = ()=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Provider, {
-        hoc: SidebarProvider
-    }), /*#__PURE__*/ react.createElement(Navigation, null));
-export { Navigation_Navigation as Navigation };
-
-//# sourceMappingURL=Navigation.js.map

package/Navigation.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Navigation.js","sources":["../src/Navigation.tsx"],"sourcesContent":["import React from \"react\";\nimport { Provider } from \"@webiny/app-admin\";\nimport { SidebarProvider } from \"./Navigation/SidebarProvider.js\";\nimport { Navigation as DecoratedNavigation } from \"./Navigation/Navigation.js\";\n\nexport const Navigation = () => {\n    return (\n        <>\n            <Provider hoc={SidebarProvider} />\n            <DecoratedNavigation />\n        </>\n    );\n};\n"],"names":["Navigation","Provider","SidebarProvider","DecoratedNavigation"],"mappings":";;;;AAKO,MAAMA,wBAAa,IACf,WAAP,GACI,wDACI,oBAACC,UAAQA;QAAC,KAAKC;sBACf,oBAACC,YAAmBA"}