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

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

@@ -3,6 +3,8 @@ import react_helmet from "react-helmet";
 import { LayoutRenderer, Navigation, TenantSelector, UserMenu } from "@webiny/app-admin";
 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 {
@@ -18,10 +20,12 @@ const LayoutContent = ({ title, startElement = null, hideNavigation = false, chi
     };
     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", {
+    }) : 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: startElement,
+        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))

package/Layout.js.map

@@ -1 +1 @@
-{"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\";\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            {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\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","Navigation","cn","undefined","HeaderBar","TenantSelector","UserMenu","Layout","LayoutRenderer","props","localStorage","useLocalStorage","localStorageRef","useRef","rawState","useLocalStorageValue","cachedState","useMemo","onChangeState","useCallback","newState","SidebarProvider"],"mappings":";;;;;AAOA,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,MACnCE,iBAAiB,OAAO,WAAP,GAAO,oBAACM,YAAUA,OAAAA,WAAAA,GACpC,oBAAC;QACG,WAAWC,GACP,+EACAP,iBAAiBQ,SAAYJ;qBAGjC,oBAACK,WAASA;QACN,OAAOV;QACP,mBACI,oBAAC;YAAI,WAAW;yBACZ,oBAACW,gBAAcA,OAAAA,WAAAA,GACf,oBAACC,UAAQA;sBAIrB,oBAAC;QAAK,WAAW;OAA4CV;AAI7E;AAEO,MAAMW,gBAASC,eAAe,eAAe,CAAC,IAC1C,SAAgBC,KAAkB;QACrC,MAAMC,eAAeC;QACrB,MAAMC,kBAAkBC,OAAOH;QAC/BE,gBAAgB,OAAO,GAAGF;QAE1B,MAAMI,WAAWC,qBAAqB3B;QACtC,MAAM4B,cAAcC,QAAQ,IAAM5B,kBAAkByB,WAAW;YAACA;SAAS;QAEzE,MAAMI,gBAAgBC,YAAY,CAACC;YAC/BR,gBAAgB,OAAO,CAAC,GAAG,CAACxB,mBAAmBG,KAAK,SAAS,CAAC6B;QAClE,GAAG,EAAE;QAEL,OAAO,WAAP,GACI,oBAACC,iBAAeA;YAAC,OAAOL;YAAa,eAAeE;yBAChD,oBAAC1B,eAAkBiB;IAG/B"}
+{"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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/app-admin-ui",
-	"version": "6.6.0-alpha.0",
+	"version": "6.6.0-alpha.2",
 	"type": "module",
 	"exports": {
 		".": "./index.js",
@@ -14,17 +14,18 @@
 	"license": "MIT",
 	"dependencies": {
 		"@types/react": "18.3.31",
-		"@webiny/admin-ui": "6.6.0-alpha.0",
-		"@webiny/app": "6.6.0-alpha.0",
-		"@webiny/app-admin": "6.6.0-alpha.0",
-		"@webiny/icons": "6.6.0-alpha.0",
+		"@webiny/admin-ui": "6.6.0-alpha.2",
+		"@webiny/app": "6.6.0-alpha.2",
+		"@webiny/app-admin": "6.6.0-alpha.2",
+		"@webiny/icons": "6.6.0-alpha.2",
+		"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.6.0-alpha.0",
+		"@webiny/build-tools": "6.6.0-alpha.2",
 		"rimraf": "6.1.3",
 		"typescript": "7.0.2"
 	},