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

package/CommandPalette/modes/PaletteMode.d.ts

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

package/CommandPalette/modes/createAiMode.d.ts

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

package/CommandPalette/modes/createAiMode.js

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

package/CommandPalette/modes/createAiMode.js.map

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

package/CommandPalette/modes/index.d.ts

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

package/CommandPalette/modes/index.js

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

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

package/CommandPalette/usePaletteHotkeys.js

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

package/CommandPalette/usePaletteHotkeys.js.map

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

package/Dashboard/Welcome.d.ts

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

package/Dashboard/Welcome.js

@@ -1,32 +1,119 @@
-import react from "react";
-import { Grid, Heading } from "@webiny/admin-ui";
-import { useAdminConfig, useSecurity } from "@webiny/app-admin";
-const Welcome = ()=>{
+import react, { useEffect, useMemo, useState } from "react";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { Heading, Text } from "@webiny/admin-ui";
+import { createReactiveComponent, useAdminConfig, useSecurity } from "@webiny/app-admin";
+import { useDashboardLayoutPresenter } from "./dashboardLayout/presenter/useDashboardLayoutPresenter.js";
+import { toColumnIndex } from "./dashboardLayout/toColumnIndex.js";
+import { AddWidgetDrawer } from "./components/addWidgetDrawer/AddWidgetDrawer.js";
+import { DashboardToolbar } from "./components/DashboardToolbar.js";
+import { EditableColumns } from "./components/layout/EditableColumns.js";
+import { StaticColumns } from "./components/layout/StaticColumns.js";
+import { useColumnsThatFit } from "./components/layout/useColumnsThatFit.js";
+import { useWidgetPortals } from "./components/layout/useWidgetPortals.js";
+import { DASHBOARD_MAX_WIDTH } from "./components/layout/layoutConstants.js";
+const WelcomeBase = ()=>{
     const { identity } = useSecurity();
     const { widgets } = useAdminConfig();
-    return /*#__PURE__*/ react.createElement("div", {
-        className: "my-xxl"
+    const presenter = useDashboardLayoutPresenter();
+    const elements = useMemo(()=>{
+        const map = new Map();
+        widgets.forEach((widget)=>map.set(widget.name, widget.element));
+        return map;
+    }, [
+        widgets
+    ]);
+    const titles = useMemo(()=>{
+        const map = new Map();
+        widgets.forEach((widget)=>map.set(widget.name, {
+                title: widget.title ?? widget.name
+            }));
+        return map;
+    }, [
+        widgets
+    ]);
+    const widgetsKey = widgets.map((w)=>`${w.name}:${toColumnIndex(w.column)}`).join("|");
+    useEffect(()=>{
+        const inputs = widgets.map((widget)=>({
+                name: widget.name,
+                column: toColumnIndex(widget.column)
+            }));
+        presenter.init(identity.id, inputs);
+    }, [
+        identity?.id,
+        widgetsKey
+    ]);
+    useEffect(()=>()=>presenter.dispose(), [
+        presenter
+    ]);
+    const { vm } = presenter;
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    const openDrawer = ()=>setDrawerOpen(true);
+    const drawerWidgets = widgets.map((widget)=>{
+        const registeredColumn = toColumnIndex(widget.column);
+        return {
+            name: widget.name,
+            title: widget.title ?? widget.name,
+            description: widget.description,
+            group: widget.group,
+            preview: widget.preview,
+            added: !vm.hidden.includes(widget.name),
+            defaultColumn: Math.min(registeredColumn, vm.columnCount - 1)
+        };
+    });
+    const { ref: containerRef, visibleCount, allFit } = useColumnsThatFit(vm.columnCount);
+    const placed = vm.columns.flat();
+    const { slots, portals } = useWidgetPortals(placed, elements);
+    const editing = vm.editing && allFit;
+    let subtitle = "Your dashboard. Arrange the widgets however you work best.";
+    let columns = /*#__PURE__*/ react.createElement(StaticColumns, {
+        columns: vm.columns,
+        visibleCount: visibleCount,
+        slots: slots
+    });
+    if (editing) {
+        subtitle = "Drag widgets to rearrange them, and click Done when you're finished.";
+        columns = /*#__PURE__*/ react.createElement(EditableColumns, {
+            vm: vm,
+            slots: slots,
+            titles: titles,
+            presenter: presenter,
+            onBrowseWidgets: openDrawer
+        });
+    }
+    return /*#__PURE__*/ react.createElement(DndProvider, {
+        backend: HTML5Backend
     }, /*#__PURE__*/ react.createElement("div", {
-        className: "mb-3xl"
-    }, /*#__PURE__*/ react.createElement(Heading, {
+        className: "my-xxl",
+        ref: containerRef
+    }, portals, /*#__PURE__*/ react.createElement("div", {
+        className: "mb-xl flex items-center justify-between gap-lg",
+        style: {
+            maxWidth: DASHBOARD_MAX_WIDTH
+        }
+    }, /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Heading, {
         level: 3
-    }, `Hi ${identity.displayName}, what are we doing today?`)), /*#__PURE__*/ react.createElement(Grid, {
-        gap: "spacious",
-        className: "max-w-[1200px]"
-    }, /*#__PURE__*/ react.createElement(Grid.Column, {
-        span: 6
-    }, /*#__PURE__*/ react.createElement("div", {
-        className: "flex flex-col gap-lg"
-    }, widgets.filter((w)=>"left" === w.column).map((widget)=>/*#__PURE__*/ react.createElement(react.Fragment, {
-            key: widget.name
-        }, widget.element)))), /*#__PURE__*/ react.createElement(Grid.Column, {
-        span: 6
-    }, /*#__PURE__*/ react.createElement("div", {
-        className: "flex flex-col gap-lg"
-    }, widgets.filter((w)=>"right" === w.column).map((widget)=>/*#__PURE__*/ react.createElement(react.Fragment, {
-            key: widget.name
-        }, widget.element))))));
+    }, `Hi ${identity.displayName}, what are we doing today?`), /*#__PURE__*/ react.createElement(Text, {
+        as: "div",
+        size: "md",
+        className: "mt-xs text-neutral-strong"
+    }, subtitle)), /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-none items-center gap-sm"
+    }, /*#__PURE__*/ react.createElement(DashboardToolbar, {
+        vm: vm,
+        editing: editing,
+        canCustomize: allFit,
+        presenter: presenter,
+        onAddWidget: openDrawer
+    }))), columns, /*#__PURE__*/ react.createElement(AddWidgetDrawer, {
+        open: drawerOpen,
+        onOpenChange: setDrawerOpen,
+        widgets: drawerWidgets,
+        columnCount: vm.columnCount,
+        presenter: presenter
+    })));
 };
+const Welcome = createReactiveComponent(WelcomeBase);
 const Dashboard_Welcome = Welcome;
 export default Dashboard_Welcome;
 

package/Dashboard/Welcome.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dashboard/Welcome.js","sources":["../../src/Dashboard/Welcome.tsx"],"sourcesContent":["import React from \"react\";\nimport { Grid, Heading } from \"@webiny/admin-ui\";\nimport { useSecurity } from \"@webiny/app-admin\";\nimport { useAdminConfig } from \"@webiny/app-admin\";\n\nconst Welcome = () => {\n    const { identity } = useSecurity();\n    const { widgets } = useAdminConfig();\n\n    return (\n        <div className={\"my-xxl\"}>\n            <div className={\"mb-3xl\"}>\n                <Heading\n                    level={3}\n                >{`Hi ${identity!.displayName}, what are we doing today?`}</Heading>\n            </div>\n            <Grid gap={\"spacious\"} className={\"max-w-[1200px]\"}>\n                <Grid.Column span={6}>\n                    <div className={\"flex flex-col gap-lg\"}>\n                        {widgets\n                            .filter(w => w.column === \"left\")\n                            .map(widget => (\n                                <React.Fragment key={widget.name}>{widget.element}</React.Fragment>\n                            ))}\n                    </div>\n                </Grid.Column>\n                <Grid.Column span={6}>\n                    <div className={\"flex flex-col gap-lg\"}>\n                        {widgets\n                            .filter(w => w.column === \"right\")\n                            .map(widget => (\n                                <React.Fragment key={widget.name}>{widget.element}</React.Fragment>\n                            ))}\n                    </div>\n                </Grid.Column>\n            </Grid>\n        </div>\n    );\n};\n\nexport default Welcome;\n"],"names":["Welcome","identity","useSecurity","widgets","useAdminConfig","Heading","Grid","w","widget","React"],"mappings":";;;AAKA,MAAMA,UAAU;IACZ,MAAM,EAAEC,QAAQ,EAAE,GAAGC;IACrB,MAAM,EAAEC,OAAO,EAAE,GAAGC;IAEpB,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACC,SAAOA;QACJ,OAAO;OACT,CAAC,GAAG,EAAEJ,SAAU,WAAW,CAAC,0BAA0B,CAAC,kBAE7D,oBAACK,MAAIA;QAAC,KAAK;QAAY,WAAW;qBAC9B,oBAACA,KAAK,MAAM;QAAC,MAAM;qBACf,oBAAC;QAAI,WAAW;OACXH,QACI,MAAM,CAACI,CAAAA,IAAKA,AAAa,WAAbA,EAAE,MAAM,EACpB,GAAG,CAACC,CAAAA,SAAAA,WAAAA,GACD,oBAACC,MAAAA,QAAc;YAAC,KAAKD,OAAO,IAAI;WAAGA,OAAO,OAAO,oBAIjE,oBAACF,KAAK,MAAM;QAAC,MAAM;qBACf,oBAAC;QAAI,WAAW;OACXH,QACI,MAAM,CAACI,CAAAA,IAAKA,AAAa,YAAbA,EAAE,MAAM,EACpB,GAAG,CAACC,CAAAA,SAAAA,WAAAA,GACD,oBAACC,MAAAA,QAAc;YAAC,KAAKD,OAAO,IAAI;WAAGA,OAAO,OAAO;AAOjF;AAEA,0BAAeR"}
+{"version":3,"file":"Dashboard/Welcome.js","sources":["../../src/Dashboard/Welcome.tsx"],"sourcesContent":["import React from \"react\";\nimport { useEffect } from \"react\";\nimport { useMemo } from \"react\";\nimport { useState } from \"react\";\nimport { DndProvider } from \"react-dnd\";\nimport { HTML5Backend } from \"react-dnd-html5-backend\";\nimport { Heading } from \"@webiny/admin-ui\";\nimport { Text } from \"@webiny/admin-ui\";\nimport { useSecurity } from \"@webiny/app-admin\";\nimport { useAdminConfig } from \"@webiny/app-admin\";\nimport { createReactiveComponent } from \"@webiny/app-admin\";\nimport { useDashboardLayoutPresenter } from \"./dashboardLayout/presenter/useDashboardLayoutPresenter.js\";\nimport { toColumnIndex } from \"./dashboardLayout/toColumnIndex.js\";\nimport { AddWidgetDrawer } from \"./components/addWidgetDrawer/AddWidgetDrawer.js\";\nimport type { DrawerWidget } from \"./components/addWidgetDrawer/types.js\";\nimport { DashboardToolbar } from \"./components/DashboardToolbar.js\";\nimport { EditableColumns } from \"./components/layout/EditableColumns.js\";\nimport { StaticColumns } from \"./components/layout/StaticColumns.js\";\nimport { useColumnsThatFit } from \"./components/layout/useColumnsThatFit.js\";\nimport { useWidgetPortals } from \"./components/layout/useWidgetPortals.js\";\nimport { DASHBOARD_MAX_WIDTH } from \"./components/layout/layoutConstants.js\";\n\nconst WelcomeBase = () => {\n    const { identity } = useSecurity();\n    const { widgets } = useAdminConfig();\n    const presenter = useDashboardLayoutPresenter();\n\n    // Map of widget name -> React element, so the presenter can deal purely in names.\n    const elements = useMemo(() => {\n        const map = new Map<string, React.ReactElement>();\n        widgets.forEach(widget => map.set(widget.name, widget.element));\n        return map;\n    }, [widgets]);\n\n    // Widget titles, for the cards' labels while customizing.\n    const titles = useMemo(() => {\n        const map = new Map<string, { title: string }>();\n        widgets.forEach(widget => map.set(widget.name, { title: widget.title ?? widget.name }));\n        return map;\n    }, [widgets]);\n\n    // Re-initialize the presenter when the user or the set of registered widgets changes.\n    const widgetsKey = widgets.map(w => `${w.name}:${toColumnIndex(w.column)}`).join(\"|\");\n    useEffect(() => {\n        const inputs = widgets.map(widget => ({\n            name: widget.name,\n            column: toColumnIndex(widget.column)\n        }));\n        presenter.init(identity!.id, inputs);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [identity?.id, widgetsKey]);\n\n    // The presenter is a singleton; leaving the dashboard resets per-visit state like Customize mode.\n    useEffect(() => {\n        return () => presenter.dispose();\n    }, [presenter]);\n\n    // A reactive component re-renders when anything it reads from `vm` changes.\n    const { vm } = presenter;\n\n    const [drawerOpen, setDrawerOpen] = useState(false);\n    const openDrawer = () => setDrawerOpen(true);\n    const drawerWidgets: DrawerWidget[] = widgets.map(widget => {\n        // Same clamping the presenter applies, so \"(default)\" marks the column it would pick.\n        const registeredColumn = toColumnIndex(widget.column);\n        return {\n            name: widget.name,\n            title: widget.title ?? widget.name,\n            description: widget.description,\n            group: widget.group,\n            preview: widget.preview,\n            added: !vm.hidden.includes(widget.name),\n            defaultColumn: Math.min(registeredColumn, vm.columnCount - 1)\n        };\n    });\n\n    const { ref: containerRef, visibleCount, allFit } = useColumnsThatFit(vm.columnCount);\n    const placed = vm.columns.flat();\n    const { slots, portals } = useWidgetPortals(placed, elements);\n\n    // Customize mode needs every chosen column on screen; too narrow, and it isn't offered.\n    const editing = vm.editing && allFit;\n\n    let subtitle = \"Your dashboard. Arrange the widgets however you work best.\";\n    let columns = <StaticColumns columns={vm.columns} visibleCount={visibleCount} slots={slots} />;\n    if (editing) {\n        subtitle = \"Drag widgets to rearrange them, and click Done when you're finished.\";\n        columns = (\n            <EditableColumns\n                vm={vm}\n                slots={slots}\n                titles={titles}\n                presenter={presenter}\n                onBrowseWidgets={openDrawer}\n            />\n        );\n    }\n\n    return (\n        <DndProvider backend={HTML5Backend}>\n            <div className={\"my-xxl\"} ref={containerRef}>\n                {portals}\n                <div\n                    className={\"mb-xl flex items-center justify-between gap-lg\"}\n                    style={{ maxWidth: DASHBOARD_MAX_WIDTH }}\n                >\n                    <div>\n                        <Heading\n                            level={3}\n                        >{`Hi ${identity!.displayName}, what are we doing today?`}</Heading>\n                        <Text as={\"div\"} size={\"md\"} className={\"mt-xs text-neutral-strong\"}>\n                            {subtitle}\n                        </Text>\n                    </div>\n                    <div className={\"flex flex-none items-center gap-sm\"}>\n                        <DashboardToolbar\n                            vm={vm}\n                            editing={editing}\n                            canCustomize={allFit}\n                            presenter={presenter}\n                            onAddWidget={openDrawer}\n                        />\n                    </div>\n                </div>\n                {columns}\n                <AddWidgetDrawer\n                    open={drawerOpen}\n                    onOpenChange={setDrawerOpen}\n                    widgets={drawerWidgets}\n                    columnCount={vm.columnCount}\n                    presenter={presenter}\n                />\n            </div>\n        </DndProvider>\n    );\n};\n\nconst Welcome = createReactiveComponent(WelcomeBase);\n\nexport default Welcome;\n"],"names":["WelcomeBase","identity","useSecurity","widgets","useAdminConfig","presenter","useDashboardLayoutPresenter","elements","useMemo","map","Map","widget","titles","widgetsKey","w","toColumnIndex","useEffect","inputs","vm","drawerOpen","setDrawerOpen","useState","openDrawer","drawerWidgets","registeredColumn","Math","containerRef","visibleCount","allFit","useColumnsThatFit","placed","slots","portals","useWidgetPortals","editing","subtitle","columns","StaticColumns","EditableColumns","DndProvider","HTML5Backend","DASHBOARD_MAX_WIDTH","Heading","Text","DashboardToolbar","AddWidgetDrawer","Welcome","createReactiveComponent"],"mappings":"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"}

package/Dashboard/components/DashboardToolbar.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { DashboardLayoutPresenter } from "../dashboardLayout/presenter/abstractions.js";
+interface DashboardToolbarProps {
+    vm: DashboardLayoutPresenter.ViewModel;
+    editing: boolean;
+    canCustomize: boolean;
+    presenter: DashboardLayoutPresenter.Interface;
+    onAddWidget: () => void;
+}
+export declare const DashboardToolbar: ({ vm, editing, canCustomize, presenter, onAddWidget }: DashboardToolbarProps) => React.JSX.Element;
+export {};

package/Dashboard/components/DashboardToolbar.js

@@ -0,0 +1,48 @@
+import react from "react";
+import { Button, IconButton, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/restart_alt.svg";
+import { ReactComponent as add_svg_ReactComponent } from "@webiny/icons/add.svg";
+import { ReactComponent as dashboard_customize_svg_ReactComponent } from "@webiny/icons/dashboard_customize.svg";
+import { ReactComponent as check_svg_ReactComponent } from "@webiny/icons/check.svg";
+import { ColumnCountControl } from "./dnd/ColumnCountControl.js";
+const DashboardToolbar = ({ vm, editing, canCustomize, presenter, onAddWidget })=>{
+    if (editing) return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(ColumnCountControl, {
+        columnCount: vm.columnCount,
+        disabled: null !== vm.draggingName,
+        presenter: presenter
+    }), /*#__PURE__*/ react.createElement(Tooltip, {
+        content: "Reset to default layout",
+        trigger: /*#__PURE__*/ react.createElement(IconButton, {
+            variant: "tertiary",
+            size: "md",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            "aria-label": "Reset to default layout",
+            onClick: ()=>presenter.resetToDefault()
+        })
+    }), /*#__PURE__*/ react.createElement(Button, {
+        variant: "tertiary",
+        text: "Add widget",
+        icon: /*#__PURE__*/ react.createElement(add_svg_ReactComponent, null),
+        onClick: onAddWidget
+    }), /*#__PURE__*/ react.createElement(Button, {
+        variant: "primary",
+        text: "Done",
+        icon: /*#__PURE__*/ react.createElement(check_svg_ReactComponent, null),
+        onClick: ()=>presenter.stopEditing()
+    }));
+    let hint = "Rearrange, add or remove widgets";
+    if (!canCustomize) hint = "Make the window wider to customize the dashboard";
+    return /*#__PURE__*/ react.createElement(Tooltip, {
+        content: hint,
+        trigger: /*#__PURE__*/ react.createElement(Button, {
+            variant: "tertiary",
+            text: "Customize",
+            icon: /*#__PURE__*/ react.createElement(dashboard_customize_svg_ReactComponent, null),
+            disabled: !canCustomize,
+            onClick: ()=>presenter.startEditing()
+        })
+    });
+};
+export { DashboardToolbar };
+
+//# sourceMappingURL=DashboardToolbar.js.map

package/Dashboard/components/DashboardToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/DashboardToolbar.js","sources":["../../../src/Dashboard/components/DashboardToolbar.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { IconButton } from \"@webiny/admin-ui\";\nimport { Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as RestartAltIcon } from \"@webiny/icons/restart_alt.svg\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as DashboardCustomizeIcon } from \"@webiny/icons/dashboard_customize.svg\";\nimport { ReactComponent as CheckIcon } from \"@webiny/icons/check.svg\";\nimport { ColumnCountControl } from \"./dnd/ColumnCountControl.js\";\nimport type { DashboardLayoutPresenter } from \"../dashboardLayout/presenter/abstractions.js\";\n\ninterface DashboardToolbarProps {\n    vm: DashboardLayoutPresenter.ViewModel;\n    // Customize mode is on and every chosen column fits on screen.\n    editing: boolean;\n    // Every chosen column fits on screen, so Customize mode can be offered.\n    canCustomize: boolean;\n    presenter: DashboardLayoutPresenter.Interface;\n    onAddWidget: () => void;\n}\n\n// Top-right controls: one \"Customize\" button normally, the full editing set in Customize mode.\nexport const DashboardToolbar = ({\n    vm,\n    editing,\n    canCustomize,\n    presenter,\n    onAddWidget\n}: DashboardToolbarProps) => {\n    if (editing) {\n        return (\n            <>\n                <ColumnCountControl\n                    columnCount={vm.columnCount}\n                    disabled={vm.draggingName !== null}\n                    presenter={presenter}\n                />\n                <Tooltip\n                    content={\"Reset to default layout\"}\n                    trigger={\n                        <IconButton\n                            variant={\"tertiary\"}\n                            size={\"md\"}\n                            icon={<RestartAltIcon />}\n                            aria-label={\"Reset to default layout\"}\n                            onClick={() => presenter.resetToDefault()}\n                        />\n                    }\n                />\n                <Button\n                    variant={\"tertiary\"}\n                    text={\"Add widget\"}\n                    icon={<AddIcon />}\n                    onClick={onAddWidget}\n                />\n                <Button\n                    variant={\"primary\"}\n                    text={\"Done\"}\n                    icon={<CheckIcon />}\n                    onClick={() => presenter.stopEditing()}\n                />\n            </>\n        );\n    }\n\n    let hint = \"Rearrange, add or remove widgets\";\n    if (!canCustomize) {\n        hint = \"Make the window wider to customize the dashboard\";\n    }\n\n    return (\n        <Tooltip\n            content={hint}\n            trigger={\n                <Button\n                    variant={\"tertiary\"}\n                    text={\"Customize\"}\n                    icon={<DashboardCustomizeIcon />}\n                    disabled={!canCustomize}\n                    onClick={() => presenter.startEditing()}\n                />\n            }\n        />\n    );\n};\n"],"names":["DashboardToolbar","vm","editing","canCustomize","presenter","onAddWidget","ColumnCountControl","Tooltip","IconButton","RestartAltIcon","Button","AddIcon","CheckIcon","hint","DashboardCustomizeIcon"],"mappings":";;;;;;;AAsBO,MAAMA,mBAAmB,CAAC,EAC7BC,EAAE,EACFC,OAAO,EACPC,YAAY,EACZC,SAAS,EACTC,WAAW,EACS;IACpB,IAAIH,SACA,OAAO,WAAP,GACI,wDACI,oBAACI,oBAAkBA;QACf,aAAaL,GAAG,WAAW;QAC3B,UAAUA,AAAoB,SAApBA,GAAG,YAAY;QACzB,WAAWG;sBAEf,oBAACG,SAAOA;QACJ,SAAS;QACT,uBACI,oBAACC,YAAUA;YACP,SAAS;YACT,MAAM;YACN,oBAAM,oBAACC,gBAAcA;YACrB,cAAY;YACZ,SAAS,IAAML,UAAU,cAAc;;sBAInD,oBAACM,QAAMA;QACH,SAAS;QACT,MAAM;QACN,oBAAM,oBAACC,wBAAOA;QACd,SAASN;sBAEb,oBAACK,QAAMA;QACH,SAAS;QACT,MAAM;QACN,oBAAM,oBAACE,0BAASA;QAChB,SAAS,IAAMR,UAAU,WAAW;;IAMpD,IAAIS,OAAO;IACX,IAAI,CAACV,cACDU,OAAO;IAGX,OAAO,WAAP,GACI,oBAACN,SAAOA;QACJ,SAASM;QACT,uBACI,oBAACH,QAAMA;YACH,SAAS;YACT,MAAM;YACN,oBAAM,oBAACI,wCAAsBA;YAC7B,UAAU,CAACX;YACX,SAAS,IAAMC,UAAU,YAAY;;;AAKzD"}

package/Dashboard/components/addWidgetDrawer/AddToColumnMenu.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { DashboardLayoutPresenter } from "../../dashboardLayout/presenter/abstractions.js";
+import type { DrawerWidget } from "./types.js";
+interface AddToColumnMenuProps {
+    widget: DrawerWidget;
+    columnCount: number;
+    presenter: DashboardLayoutPresenter.Interface;
+}
+export declare const AddToColumnMenu: ({ widget, columnCount, presenter }: AddToColumnMenuProps) => React.JSX.Element;
+export {};

package/Dashboard/components/addWidgetDrawer/AddToColumnMenu.js

@@ -0,0 +1,30 @@
+import react from "react";
+import { Button, DropdownMenu } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/expand_more.svg";
+const AddToColumnMenu = ({ widget, columnCount, presenter })=>{
+    const columns = Array.from({
+        length: columnCount
+    }, (_, index)=>index);
+    return /*#__PURE__*/ react.createElement(DropdownMenu, {
+        trigger: /*#__PURE__*/ react.createElement(Button, {
+            size: "sm",
+            variant: "tertiary",
+            text: "Add",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            iconPosition: "end"
+        })
+    }, /*#__PURE__*/ react.createElement(DropdownMenu.Label, {
+        text: "Add to"
+    }), columns.map((index)=>{
+        let text = `Column ${index + 1}`;
+        if (index === widget.defaultColumn) text = `${text} (default)`;
+        return /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+            key: index,
+            text: text,
+            onClick: ()=>presenter.addWidget(widget.name, index)
+        });
+    }));
+};
+export { AddToColumnMenu };
+
+//# sourceMappingURL=AddToColumnMenu.js.map

package/Dashboard/components/addWidgetDrawer/AddToColumnMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/addWidgetDrawer/AddToColumnMenu.js","sources":["../../../../src/Dashboard/components/addWidgetDrawer/AddToColumnMenu.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { DropdownMenu } from \"@webiny/admin-ui\";\nimport { ReactComponent as ExpandMoreIcon } from \"@webiny/icons/expand_more.svg\";\nimport type { DashboardLayoutPresenter } from \"../../dashboardLayout/presenter/abstractions.js\";\nimport type { DrawerWidget } from \"./types.js\";\n\ninterface AddToColumnMenuProps {\n    widget: DrawerWidget;\n    columnCount: number;\n    presenter: DashboardLayoutPresenter.Interface;\n}\n\n// One item per current column; the widget lands at the bottom of the chosen one.\nexport const AddToColumnMenu = ({ widget, columnCount, presenter }: AddToColumnMenuProps) => {\n    const columns = Array.from({ length: columnCount }, (_, index) => index);\n\n    return (\n        <DropdownMenu\n            trigger={\n                <Button\n                    size={\"sm\"}\n                    variant={\"tertiary\"}\n                    text={\"Add\"}\n                    icon={<ExpandMoreIcon />}\n                    iconPosition={\"end\"}\n                />\n            }\n        >\n            <DropdownMenu.Label text={\"Add to\"} />\n            {columns.map(index => {\n                let text = `Column ${index + 1}`;\n                if (index === widget.defaultColumn) {\n                    text = `${text} (default)`;\n                }\n                return (\n                    <DropdownMenu.Item\n                        key={index}\n                        text={text}\n                        onClick={() => presenter.addWidget(widget.name, index)}\n                    />\n                );\n            })}\n        </DropdownMenu>\n    );\n};\n"],"names":["AddToColumnMenu","widget","columnCount","presenter","columns","Array","_","index","DropdownMenu","Button","ExpandMoreIcon","text"],"mappings":";;;AAcO,MAAMA,kBAAkB,CAAC,EAAEC,MAAM,EAAEC,WAAW,EAAEC,SAAS,EAAwB;IACpF,MAAMC,UAAUC,MAAM,IAAI,CAAC;QAAE,QAAQH;IAAY,GAAG,CAACI,GAAGC,QAAUA;IAElE,OAAO,WAAP,GACI,oBAACC,cAAYA;QACT,uBACI,oBAACC,QAAMA;YACH,MAAM;YACN,SAAS;YACT,MAAM;YACN,oBAAM,oBAACC,gBAAcA;YACrB,cAAc;;qBAItB,oBAACF,aAAa,KAAK;QAAC,MAAM;QACzBJ,QAAQ,GAAG,CAACG,CAAAA;QACT,IAAII,OAAO,CAAC,OAAO,EAAEJ,QAAQ,GAAG;QAChC,IAAIA,UAAUN,OAAO,aAAa,EAC9BU,OAAO,GAAGA,KAAK,UAAU,CAAC;QAE9B,OAAO,WAAP,GACI,oBAACH,aAAa,IAAI;YACd,KAAKD;YACL,MAAMI;YACN,SAAS,IAAMR,UAAU,SAAS,CAACF,OAAO,IAAI,EAAEM;;IAG5D;AAGZ"}

package/Dashboard/components/addWidgetDrawer/AddWidgetDrawer.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { DashboardLayoutPresenter } from "../../dashboardLayout/presenter/abstractions.js";
+import type { DrawerWidget } from "./types.js";
+interface AddWidgetDrawerProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    widgets: DrawerWidget[];
+    columnCount: number;
+    presenter: DashboardLayoutPresenter.Interface;
+}
+export declare const AddWidgetDrawer: ({ open, onOpenChange, widgets, columnCount, presenter }: AddWidgetDrawerProps) => React.JSX.Element;
+export {};