@webiny/app-admin-ui 0.0.0-unstable.0156a4c312

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;YACA,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;YACA,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

@@ -0,0 +1,6 @@
+import React from "react";
+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

@@ -0,0 +1,120 @@
+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();
+    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: "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(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;
+
+//# sourceMappingURL=Welcome.js.map

package/Dashboard/Welcome.js.map

@@ -0,0 +1 @@
+{"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/AssistanceWidget.d.ts

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

package/Dashboard/components/AssistanceWidget.js

@@ -0,0 +1,54 @@
+import react from "react";
+import { Link, List, Text, Widget } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/help_outline.svg";
+import { ReactComponent as arrow_forward_svg_ReactComponent } from "@webiny/icons/arrow_forward.svg";
+import { SimpleLink } from "@webiny/app-admin";
+const AssistanceWidget = ()=>/*#__PURE__*/ react.createElement(Widget, {
+        variant: "light",
+        title: "Need some assistance?",
+        icon: /*#__PURE__*/ react.createElement(Widget.Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: "Need some assistance?"
+        }),
+        padding: "md"
+    }, /*#__PURE__*/ react.createElement(List, {
+        variant: "container",
+        className: "flex flex-col gap-y-sm"
+    }, /*#__PURE__*/ react.createElement(List.Item, {
+        title: "Documentation",
+        description: "Explore the Webiny documentation and check out code examples and guides.",
+        actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(SimpleLink, {
+            to: "https://www.webiny.com/docs",
+            target: "_blank",
+            rel: "noopener noreferrer"
+        }, /*#__PURE__*/ react.createElement(List.Item.Action, {
+            icon: /*#__PURE__*/ react.createElement(arrow_forward_svg_ReactComponent, null)
+        })))
+    }), /*#__PURE__*/ react.createElement(List.Item, {
+        title: "Contact us",
+        description: /*#__PURE__*/ react.createElement(Text, {
+            size: "sm",
+            className: "text-neutral-strong"
+        }, /*#__PURE__*/ react.createElement(Link, {
+            to: "https://www.webiny.com/forms/product-demo",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            variant: "secondary",
+            underline: true
+        }, "Contact Sales"), ",", " ", /*#__PURE__*/ react.createElement(Link, {
+            to: "https://www.webiny.com/partners",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            variant: "secondary",
+            underline: true
+        }, "Explore Partnerships"), " ", "or", " ", /*#__PURE__*/ react.createElement(Link, {
+            to: "https://www.webiny.com/slack",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            variant: "secondary",
+            underline: true
+        }, "Slack us"), ".")
+    })));
+export { AssistanceWidget };
+
+//# sourceMappingURL=AssistanceWidget.js.map

package/Dashboard/components/AssistanceWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/AssistanceWidget.js","sources":["../../../src/Dashboard/components/AssistanceWidget.tsx"],"sourcesContent":["import React from \"react\";\nimport { Widget, List, Link, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as HelpIcon } from \"@webiny/icons/help_outline.svg\";\nimport { ReactComponent as ArrowForwardIcon } from \"@webiny/icons/arrow_forward.svg\";\nimport { SimpleLink } from \"@webiny/app-admin\";\n\nexport const AssistanceWidget = () => {\n    return (\n        <Widget\n            variant=\"light\"\n            title=\"Need some assistance?\"\n            icon={<Widget.Icon icon={<HelpIcon />} label={\"Need some assistance?\"} />}\n            padding=\"md\"\n        >\n            <List variant=\"container\" className=\"flex flex-col gap-y-sm\">\n                <List.Item\n                    title=\"Documentation\"\n                    description=\"Explore the Webiny documentation and check out code examples and guides.\"\n                    actions={\n                        <>\n                            <SimpleLink\n                                to=\"https://www.webiny.com/docs\"\n                                target=\"_blank\"\n                                rel=\"noopener noreferrer\"\n                            >\n                                <List.Item.Action icon={<ArrowForwardIcon />} />\n                            </SimpleLink>\n                        </>\n                    }\n                />\n                <List.Item\n                    title=\"Contact us\"\n                    description={\n                        <Text size={\"sm\"} className={\"text-neutral-strong\"}>\n                            <Link\n                                to={\"https://www.webiny.com/forms/product-demo\"}\n                                target={\"_blank\"}\n                                rel={\"noopener noreferrer\"}\n                                variant={\"secondary\"}\n                                underline\n                            >\n                                Contact Sales\n                            </Link>\n                            ,{\" \"}\n                            <Link\n                                to={\"https://www.webiny.com/partners\"}\n                                target={\"_blank\"}\n                                rel={\"noopener noreferrer\"}\n                                variant={\"secondary\"}\n                                underline\n                            >\n                                Explore Partnerships\n                            </Link>{\" \"}\n                            or{\" \"}\n                            <Link\n                                to={\"https://www.webiny.com/slack\"}\n                                target={\"_blank\"}\n                                rel={\"noopener noreferrer\"}\n                                variant={\"secondary\"}\n                                underline\n                            >\n                                Slack us\n                            </Link>\n                            .\n                        </Text>\n                    }\n                />\n            </List>\n        </Widget>\n    );\n};\n"],"names":["AssistanceWidget","Widget","HelpIcon","List","SimpleLink","ArrowForwardIcon","Text","Link"],"mappings":";;;;;AAMO,MAAMA,mBAAmB,IACrB,WAAP,GACI,oBAACC,QAAMA;QACH,SAAQ;QACR,OAAM;QACN,oBAAM,oBAACA,OAAO,IAAI;YAAC,oBAAM,oBAACC,gBAAQA;YAAK,OAAO;;QAC9C,SAAQ;qBAER,oBAACC,MAAIA;QAAC,SAAQ;QAAY,WAAU;qBAChC,oBAACA,KAAK,IAAI;QACN,OAAM;QACN,aAAY;QACZ,uBACI,wDACI,oBAACC,YAAUA;YACP,IAAG;YACH,QAAO;YACP,KAAI;yBAEJ,oBAACD,KAAK,IAAI,CAAC,MAAM;YAAC,oBAAM,oBAACE,kCAAgBA;;sBAKzD,oBAACF,KAAK,IAAI;QACN,OAAM;QACN,2BACI,oBAACG,MAAIA;YAAC,MAAM;YAAM,WAAW;yBACzB,oBAACC,MAAIA;YACD,IAAI;YACJ,QAAQ;YACR,KAAK;YACL,SAAS;YACT;WACH,kBAEM,KACL,mBACF,oBAACA,MAAIA;YACD,IAAI;YACJ,QAAQ;YACR,KAAK;YACL,SAAS;YACT;WACH,yBAEO,KAAI,MACT,mBACH,oBAACA,MAAIA;YACD,IAAI;YACJ,QAAQ;YACR,KAAK;YACL,SAAS;YACT;WACH,aAEM"}

package/Dashboard/components/CommunityWidget.d.ts

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

package/Dashboard/components/CommunityWidget.js

@@ -0,0 +1,58 @@
+import react from "react";
+import { Icon, Text, Widget } from "@webiny/admin-ui";
+import { SimpleLink } from "@webiny/app-admin";
+import { ReactComponent } from "./assets/youtube.js";
+import { ReactComponent as github_js_ReactComponent } from "./assets/github.js";
+import { ReactComponent as slack_js_ReactComponent } from "./assets/slack.js";
+import { ReactComponent as x_twitter_js_ReactComponent } from "./assets/x-twitter.js";
+import { ReactComponent as people_alt_svg_ReactComponent } from "@webiny/icons/people_alt.svg";
+const SocialLink = ({ link, label, icon })=>/*#__PURE__*/ react.createElement("div", {
+        className: "w-3xl bg-neutral-base rounded-md hover:opacity-80 transition-opacity"
+    }, /*#__PURE__*/ react.createElement(SimpleLink, {
+        to: link,
+        className: "no-underline!",
+        target: "_blank",
+        rel: "noopener noreferrer"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "px-xs pt-sm-extra pb-sm text-center"
+    }, /*#__PURE__*/ react.createElement(Icon, {
+        label: `${label} icon`,
+        icon: icon,
+        size: "lg",
+        color: "inherit",
+        className: "mx-auto mb-sm"
+    }), /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "text-neutral-strong"
+    }, label))));
+const CommunityWidget = ()=>/*#__PURE__*/ react.createElement(Widget, {
+        icon: /*#__PURE__*/ react.createElement(Widget.Icon, {
+            icon: /*#__PURE__*/ react.createElement(people_alt_svg_ReactComponent, null),
+            label: "Join our community"
+        }),
+        variant: "light",
+        title: "Join our community",
+        description: "Get to know Webiny team members, discuss new ideas and get help:",
+        padding: "md"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex justify-start items-stretch gap-md"
+    }, /*#__PURE__*/ react.createElement(SocialLink, {
+        link: "https://github.com/webiny/webiny-js",
+        label: "GitHub",
+        icon: /*#__PURE__*/ react.createElement(github_js_ReactComponent, null)
+    }), /*#__PURE__*/ react.createElement(SocialLink, {
+        link: "https://www.webiny.com/slack",
+        label: "Slack",
+        icon: /*#__PURE__*/ react.createElement(slack_js_ReactComponent, null)
+    }), /*#__PURE__*/ react.createElement(SocialLink, {
+        link: "https://youtube.com/webiny",
+        label: "YouTube",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+    }), /*#__PURE__*/ react.createElement(SocialLink, {
+        link: "https://x.com/WebinyCMS",
+        label: "X.com",
+        icon: /*#__PURE__*/ react.createElement(x_twitter_js_ReactComponent, null)
+    })));
+export { CommunityWidget };
+
+//# sourceMappingURL=CommunityWidget.js.map

package/Dashboard/components/CommunityWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/CommunityWidget.js","sources":["../../../src/Dashboard/components/CommunityWidget.tsx"],"sourcesContent":["import React from \"react\";\nimport { Widget, Icon, Text } from \"@webiny/admin-ui\";\nimport { SimpleLink } from \"@webiny/app-admin\";\n// Icons\nimport { ReactComponent as YouTubeIcon } from \"./assets/youtube.svg\";\nimport { ReactComponent as GithubIcon } from \"./assets/github.svg\";\nimport { ReactComponent as SlackIcon } from \"./assets/slack.svg\";\nimport { ReactComponent as TwitterIcon } from \"./assets/x-twitter.svg\";\nimport { ReactComponent as PeopleAltIcon } from \"@webiny/icons/people_alt.svg\";\n\ninterface SocialLinkProps {\n    link: string;\n    label: string;\n    icon: React.ReactElement;\n}\n\nconst SocialLink = ({ link, label, icon }: SocialLinkProps) => {\n    return (\n        <div className={\"w-3xl bg-neutral-base rounded-md hover:opacity-80 transition-opacity\"}>\n            <SimpleLink\n                to={link}\n                className={\"no-underline!\"}\n                target={\"_blank\"}\n                rel={\"noopener noreferrer\"}\n            >\n                <div className={\"px-xs pt-sm-extra pb-sm text-center\"}>\n                    <Icon\n                        label={`${label} icon`}\n                        icon={icon}\n                        size={\"lg\"}\n                        color={\"inherit\"}\n                        className={\"mx-auto mb-sm\"}\n                    />\n                    <Text size={\"sm\"} className={\"text-neutral-strong\"}>\n                        {label}\n                    </Text>\n                </div>\n            </SimpleLink>\n        </div>\n    );\n};\n\nexport const CommunityWidget = () => {\n    return (\n        <Widget\n            icon={<Widget.Icon icon={<PeopleAltIcon />} label={\"Join our community\"} />}\n            variant=\"light\"\n            title=\"Join our community\"\n            description=\"Get to know Webiny team members, discuss new ideas and get help:\"\n            padding=\"md\"\n        >\n            <div className={\"flex justify-start items-stretch gap-md\"}>\n                <SocialLink\n                    link={\"https://github.com/webiny/webiny-js\"}\n                    label={\"GitHub\"}\n                    icon={<GithubIcon />}\n                />\n                <SocialLink\n                    link={\"https://www.webiny.com/slack\"}\n                    label={\"Slack\"}\n                    icon={<SlackIcon />}\n                />\n                <SocialLink\n                    link={\"https://youtube.com/webiny\"}\n                    label={\"YouTube\"}\n                    icon={<YouTubeIcon />}\n                />\n                <SocialLink\n                    link={\"https://x.com/WebinyCMS\"}\n                    label={\"X.com\"}\n                    icon={<TwitterIcon />}\n                />\n            </div>\n        </Widget>\n    );\n};\n"],"names":["SocialLink","link","label","icon","SimpleLink","Icon","Text","CommunityWidget","Widget","PeopleAltIcon","GithubIcon","SlackIcon","YouTubeIcon","TwitterIcon"],"mappings":";;;;;;;;AAgBA,MAAMA,aAAa,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAEC,IAAI,EAAmB,GAC/C,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,YAAUA;QACP,IAAIH;QACJ,WAAW;QACX,QAAQ;QACR,KAAK;qBAEL,oBAAC;QAAI,WAAW;qBACZ,oBAACI,MAAIA;QACD,OAAO,GAAGH,MAAM,KAAK,CAAC;QACtB,MAAMC;QACN,MAAM;QACN,OAAO;QACP,WAAW;sBAEf,oBAACG,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBJ;AAQlB,MAAMK,kBAAkB,IACpB,WAAP,GACI,oBAACC,QAAMA;QACH,oBAAM,oBAACA,OAAO,IAAI;YAAC,oBAAM,oBAACC,+BAAaA;YAAK,OAAO;;QACnD,SAAQ;QACR,OAAM;QACN,aAAY;QACZ,SAAQ;qBAER,oBAAC;QAAI,WAAW;qBACZ,oBAACT,YAAUA;QACP,MAAM;QACN,OAAO;QACP,oBAAM,oBAACU,0BAAUA;sBAErB,oBAACV,YAAUA;QACP,MAAM;QACN,OAAO;QACP,oBAAM,oBAACW,yBAASA;sBAEpB,oBAACX,YAAUA;QACP,MAAM;QACN,OAAO;QACP,oBAAM,oBAACY,gBAAWA;sBAEtB,oBAACZ,YAAUA;QACP,MAAM;QACN,OAAO;QACP,oBAAM,oBAACa,6BAAWA"}

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