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

package/Dashboard/components/dnd/DashboardWidgetCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/dnd/DashboardWidgetCard.js","sources":["../../../../src/Dashboard/components/dnd/DashboardWidgetCard.tsx"],"sourcesContent":["import React from \"react\";\nimport { useRef } from \"react\";\nimport { useDrag } from \"react-dnd\";\nimport { DragPreviewImage } from \"react-dnd\";\nimport { IconButton } from \"@webiny/admin-ui\";\nimport { Tooltip } from \"@webiny/admin-ui\";\nimport { cn } from \"@webiny/admin-ui\";\nimport { ReactComponent as RemoveIcon } from \"@webiny/icons/delete.svg\";\nimport type { DashboardLayoutPresenter } from \"../../dashboardLayout/presenter/abstractions.js\";\nimport { DASHBOARD_WIDGET_DND_TYPE } from \"./dragItem.js\";\nimport type { DashboardWidgetDragItem } from \"./dragItem.js\";\n\n// Transparent 1px gif. Hides the browser's drag preview so DashboardDragLayer's card is the only one.\nconst EMPTY_DRAG_IMAGE =\n    \"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\";\n\ninterface DashboardWidgetCardProps {\n    name: string;\n    title: string;\n    isDragging: boolean;\n    presenter: DashboardLayoutPresenter.Interface;\n    /** Reports the card's DOM node to the column so it can measure drop slots. */\n    registerRef: (name: string, node: HTMLElement | null) => void;\n    children: React.ReactNode;\n}\n\n/*\n * A widget in Customize mode. The whole card is the drag target: an overlay covers the widget, so\n * its own links and buttons can't catch the pointer, and a remove button sits in the corner.\n */\nexport const DashboardWidgetCard = ({\n    name,\n    title,\n    isDragging,\n    presenter,\n    registerRef,\n    children\n}: DashboardWidgetCardProps) => {\n    const cardRef = useRef<HTMLElement | null>(null);\n\n    const [, drag, preview] = useDrag({\n        type: DASHBOARD_WIDGET_DND_TYPE,\n        item: () => {\n            presenter.beginDrag(name);\n            const height = cardRef.current?.getBoundingClientRect().height ?? 0;\n            return { name, title, height } satisfies DashboardWidgetDragItem;\n        },\n        end: () => {\n            presenter.endDrag();\n        }\n    });\n\n    return (\n        <>\n            <DragPreviewImage connect={preview} src={EMPTY_DRAG_IMAGE} />\n            <div\n                ref={node => {\n                    cardRef.current = node;\n                    registerRef(name, node);\n                }}\n                className={cn(\n                    // A named group: a plain `group` here would also trigger `group-hover:` styles inside the\n                    // widget (e.g. every Tabs trigger at once), since those match any `.group` ancestor.\n                    \"group/card relative rounded-xl transition-opacity\",\n                    isDragging && \"opacity-50\"\n                )}\n            >\n                {/*\n                    `inert` keeps the widget out of the tab order and away from clicks. It's set\n                    through a ref because React 18's types don't know the attribute yet.\n                */}\n                <div ref={node => node?.setAttribute(\"inert\", \"\")} className={\"select-none\"}>\n                    {children}\n                </div>\n                <div\n                    ref={node => {\n                        drag(node);\n                    }}\n                    role={\"button\"}\n                    aria-label={`Drag ${title} to move it`}\n                    data-testid={`dashboard-card-${name}`}\n                    className={cn(\n                        // `rounded-xl` matches the DS Widget, so the outline follows its corners.\n                        \"absolute inset-0 z-10 cursor-grab rounded-xl active:cursor-grabbing\",\n                        \"ring-2 ring-inset ring-primary/30 transition-colors\",\n                        \"hover:bg-primary/5 hover:ring-primary/60\"\n                    )}\n                />\n                {/*\n                    On the corner, half outside the card, so it never covers the widget's own\n                    actions. Only the card under the pointer (or with focus) shows it, so six cards\n                    don't mean six buttons.\n                */}\n                <div\n                    className={cn(\n                        \"absolute -right-sm -top-sm z-20 opacity-0 transition-opacity\",\n                        \"group-hover/card:opacity-100 focus-within:opacity-100\"\n                    )}\n                >\n                    <Tooltip\n                        content={\"Remove from dashboard\"}\n                        trigger={\n                            <IconButton\n                                variant={\"tertiary\"}\n                                size={\"sm\"}\n                                icon={<RemoveIcon />}\n                                aria-label={`Remove ${title} from the dashboard`}\n                                onClick={() => presenter.removeWidget(name)}\n                            />\n                        }\n                    />\n                </div>\n            </div>\n        </>\n    );\n};\n"],"names":["EMPTY_DRAG_IMAGE","DashboardWidgetCard","name","title","isDragging","presenter","registerRef","children","cardRef","useRef","drag","preview","useDrag","DASHBOARD_WIDGET_DND_TYPE","height","DragPreviewImage","node","cn","Tooltip","IconButton","RemoveIcon"],"mappings":";;;;;AAaA,MAAMA,mBACF;AAgBG,MAAMC,sBAAsB,CAAC,EAChCC,IAAI,EACJC,KAAK,EACLC,UAAU,EACVC,SAAS,EACTC,WAAW,EACXC,QAAQ,EACe;IACvB,MAAMC,UAAUC,OAA2B;IAE3C,MAAM,GAAGC,MAAMC,QAAQ,GAAGC,QAAQ;QAC9B,MAAMC;QACN,MAAM;YACFR,UAAU,SAAS,CAACH;YACpB,MAAMY,SAASN,QAAQ,OAAO,EAAE,wBAAwB,UAAU;YAClE,OAAO;gBAAEN;gBAAMC;gBAAOW;YAAO;QACjC;QACA,KAAK;YACDT,UAAU,OAAO;QACrB;IACJ;IAEA,OAAO,WAAP,GACI,wDACI,oBAACU,kBAAgBA;QAAC,SAASJ;QAAS,KAAKX;sBACzC,oBAAC;QACG,KAAKgB,CAAAA;YACDR,QAAQ,OAAO,GAAGQ;YAClBV,YAAYJ,MAAMc;QACtB;QACA,WAAWC,GAGP,qDACAb,cAAc;qBAOlB,oBAAC;QAAI,KAAKY,CAAAA,OAAQA,MAAM,aAAa,SAAS;QAAK,WAAW;OACzDT,WAAAA,WAAAA,GAEL,oBAAC;QACG,KAAKS,CAAAA;YACDN,KAAKM;QACT;QACA,MAAM;QACN,cAAY,CAAC,KAAK,EAAEb,MAAM,WAAW,CAAC;QACtC,eAAa,CAAC,eAAe,EAAED,MAAM;QACrC,WAAWe,GAEP,uEACA,uDACA;sBAQR,oBAAC;QACG,WAAWA,GACP,gEACA;qBAGJ,oBAACC,SAAOA;QACJ,SAAS;QACT,uBACI,oBAACC,YAAUA;YACP,SAAS;YACT,MAAM;YACN,oBAAM,oBAACC,gBAAUA;YACjB,cAAY,CAAC,OAAO,EAAEjB,MAAM,mBAAmB,CAAC;YAChD,SAAS,IAAME,UAAU,YAAY,CAACH;;;AAQtE"}

package/Dashboard/components/dnd/DashboardWidgetColumn.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import type { DashboardDropTarget } from "../../dashboardLayout/presenter/abstractions.js";
+import type { DashboardLayoutPresenter } from "../../dashboardLayout/presenter/abstractions.js";
+interface DashboardWidgetColumnProps {
+    columnIndex: number;
+    /** Ordered widget names for this column (from the presenter's view model). */
+    names: string[];
+    draggingName: string | null;
+    dropTarget: DashboardDropTarget | null;
+    canRemoveColumn: boolean;
+    elements: Map<string, React.ReactElement>;
+    titles: Map<string, {
+        title: string;
+    }>;
+    presenter: DashboardLayoutPresenter.Interface;
+    onBrowseWidgets: () => void;
+}
+export declare const DashboardWidgetColumn: ({ columnIndex, names, draggingName, dropTarget, canRemoveColumn, elements, titles, presenter, onBrowseWidgets }: DashboardWidgetColumnProps) => React.JSX.Element;
+export {};

package/Dashboard/components/dnd/DashboardWidgetColumn.js

@@ -0,0 +1,72 @@
+import react, { useRef } from "react";
+import { useDrop } from "react-dnd";
+import { DASHBOARD_WIDGET_DND_TYPE } from "./dragItem.js";
+import { DashboardWidgetCard } from "./DashboardWidgetCard.js";
+import { WidgetDropIndicator } from "./WidgetDropIndicator.js";
+import { ColumnEmptyState } from "./ColumnEmptyState.js";
+const DashboardWidgetColumn = ({ columnIndex, names, draggingName, dropTarget, canRemoveColumn, elements, titles, presenter, onBrowseWidgets })=>{
+    const cardRefs = useRef(new Map());
+    const registerRef = (name, node)=>{
+        if (node) cardRefs.current.set(name, node);
+        else cardRefs.current.delete(name);
+    };
+    const [{ item }, drop] = useDrop({
+        accept: DASHBOARD_WIDGET_DND_TYPE,
+        collect: (monitor)=>({
+                item: monitor.getItem()
+            }),
+        hover: (_item, monitor)=>{
+            const pointer = monitor.getClientOffset();
+            if (!pointer) return;
+            let beforeName = null;
+            for (const name of names){
+                const node = cardRefs.current.get(name);
+                if (!node) continue;
+                const rect = node.getBoundingClientRect();
+                if (pointer.y < rect.top + rect.height / 2) {
+                    beforeName = name;
+                    break;
+                }
+            }
+            presenter.hoverSlot(columnIndex, beforeName);
+        },
+        drop: ()=>{
+            presenter.drop();
+        }
+    });
+    const isDragging = null !== draggingName;
+    const showIndicatorBefore = (name)=>isDragging && null !== dropTarget && dropTarget.column === columnIndex && dropTarget.beforeName === name;
+    let indicator = null;
+    if (item) indicator = /*#__PURE__*/ react.createElement(WidgetDropIndicator, {
+        title: item.title,
+        height: item.height
+    });
+    return /*#__PURE__*/ react.createElement("div", {
+        ref: (node)=>{
+            drop(node);
+        },
+        className: "relative flex min-h-[120px] flex-1 flex-col gap-lg",
+        "data-testid": `dashboard-column-${columnIndex}`
+    }, names.map((name)=>{
+        const element = elements.get(name);
+        if (!element) return null;
+        return /*#__PURE__*/ react.createElement(react.Fragment, {
+            key: name
+        }, showIndicatorBefore(name) ? indicator : null, /*#__PURE__*/ react.createElement(DashboardWidgetCard, {
+            name: name,
+            title: titles.get(name)?.title ?? name,
+            isDragging: name === draggingName,
+            presenter: presenter,
+            registerRef: registerRef
+        }, element));
+    }), names.length > 0 && showIndicatorBefore(null) && indicator, 0 === names.length && /*#__PURE__*/ react.createElement(ColumnEmptyState, {
+        canRemove: canRemoveColumn,
+        onRemove: ()=>presenter.removeColumn(columnIndex),
+        onBrowse: onBrowseWidgets,
+        dragging: isDragging,
+        active: showIndicatorBefore(null)
+    }));
+};
+export { DashboardWidgetColumn };
+
+//# sourceMappingURL=DashboardWidgetColumn.js.map

package/Dashboard/components/dnd/DashboardWidgetColumn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/dnd/DashboardWidgetColumn.js","sources":["../../../../src/Dashboard/components/dnd/DashboardWidgetColumn.tsx"],"sourcesContent":["import React from \"react\";\nimport { useRef } from \"react\";\nimport { useDrop } from \"react-dnd\";\nimport { DASHBOARD_WIDGET_DND_TYPE } from \"./dragItem.js\";\nimport type { DashboardWidgetDragItem } from \"./dragItem.js\";\nimport { DashboardWidgetCard } from \"./DashboardWidgetCard.js\";\nimport { WidgetDropIndicator } from \"./WidgetDropIndicator.js\";\nimport { ColumnEmptyState } from \"./ColumnEmptyState.js\";\nimport type { DashboardDropTarget } from \"../../dashboardLayout/presenter/abstractions.js\";\nimport type { DashboardLayoutPresenter } from \"../../dashboardLayout/presenter/abstractions.js\";\n\ninterface DashboardWidgetColumnProps {\n    columnIndex: number;\n    /** Ordered widget names for this column (from the presenter's view model). */\n    names: string[];\n    draggingName: string | null;\n    dropTarget: DashboardDropTarget | null;\n    canRemoveColumn: boolean;\n    elements: Map<string, React.ReactElement>;\n    titles: Map<string, { title: string }>;\n    presenter: DashboardLayoutPresenter.Interface;\n    onBrowseWidgets: () => void;\n}\n\nexport const DashboardWidgetColumn = ({\n    columnIndex,\n    names,\n    draggingName,\n    dropTarget,\n    canRemoveColumn,\n    elements,\n    titles,\n    presenter,\n    onBrowseWidgets\n}: DashboardWidgetColumnProps) => {\n    // The whole column is one drop target. On hover we measure each card's midpoint to decide\n    // which slot the pointer is nearest, so gaps (and the indicator itself) never miss a drop.\n    const cardRefs = useRef(new Map<string, HTMLElement>());\n\n    const registerRef = (name: string, node: HTMLElement | null) => {\n        if (node) {\n            cardRefs.current.set(name, node);\n        } else {\n            cardRefs.current.delete(name);\n        }\n    };\n\n    const [{ item }, drop] = useDrop({\n        accept: DASHBOARD_WIDGET_DND_TYPE,\n        collect: monitor => ({ item: monitor.getItem<DashboardWidgetDragItem | null>() }),\n        hover: (_item, monitor) => {\n            const pointer = monitor.getClientOffset();\n            if (!pointer) {\n                return;\n            }\n            let beforeName: string | null = null;\n            for (const name of names) {\n                const node = cardRefs.current.get(name);\n                if (!node) {\n                    continue;\n                }\n                const rect = node.getBoundingClientRect();\n                if (pointer.y < rect.top + rect.height / 2) {\n                    beforeName = name;\n                    break;\n                }\n            }\n            presenter.hoverSlot(columnIndex, beforeName);\n        },\n        drop: () => {\n            presenter.drop();\n        }\n    });\n\n    const isDragging = draggingName !== null;\n    const showIndicatorBefore = (name: string | null) =>\n        isDragging &&\n        dropTarget !== null &&\n        dropTarget.column === columnIndex &&\n        dropTarget.beforeName === name;\n\n    // The slot takes the dragged card's size and names it, so it shows exactly what lands there.\n    let indicator = null;\n    if (item) {\n        indicator = <WidgetDropIndicator title={item.title} height={item.height} />;\n    }\n\n    return (\n        <div\n            ref={node => {\n                drop(node);\n            }}\n            className={\"relative flex min-h-[120px] flex-1 flex-col gap-lg\"}\n            data-testid={`dashboard-column-${columnIndex}`}\n        >\n            {names.map(name => {\n                const element = elements.get(name);\n                if (!element) {\n                    return null;\n                }\n                return (\n                    <React.Fragment key={name}>\n                        {showIndicatorBefore(name) ? indicator : null}\n                        <DashboardWidgetCard\n                            name={name}\n                            title={titles.get(name)?.title ?? name}\n                            isDragging={name === draggingName}\n                            presenter={presenter}\n                            registerRef={registerRef}\n                        >\n                            {element}\n                        </DashboardWidgetCard>\n                    </React.Fragment>\n                );\n            })}\n            {names.length > 0 && showIndicatorBefore(null) && indicator}\n            {/* An empty column stays put and becomes the target itself, like the editor's empty slots. */}\n            {names.length === 0 && (\n                <ColumnEmptyState\n                    canRemove={canRemoveColumn}\n                    onRemove={() => presenter.removeColumn(columnIndex)}\n                    onBrowse={onBrowseWidgets}\n                    dragging={isDragging}\n                    active={showIndicatorBefore(null)}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["DashboardWidgetColumn","columnIndex","names","draggingName","dropTarget","canRemoveColumn","elements","titles","presenter","onBrowseWidgets","cardRefs","useRef","Map","registerRef","name","node","item","drop","useDrop","DASHBOARD_WIDGET_DND_TYPE","monitor","_item","pointer","beforeName","rect","isDragging","showIndicatorBefore","indicator","WidgetDropIndicator","element","React","DashboardWidgetCard","ColumnEmptyState"],"mappings":";;;;;;AAwBO,MAAMA,wBAAwB,CAAC,EAClCC,WAAW,EACXC,KAAK,EACLC,YAAY,EACZC,UAAU,EACVC,eAAe,EACfC,QAAQ,EACRC,MAAM,EACNC,SAAS,EACTC,eAAe,EACU;IAGzB,MAAMC,WAAWC,OAAO,IAAIC;IAE5B,MAAMC,cAAc,CAACC,MAAcC;QAC/B,IAAIA,MACAL,SAAS,OAAO,CAAC,GAAG,CAACI,MAAMC;aAE3BL,SAAS,OAAO,CAAC,MAAM,CAACI;IAEhC;IAEA,MAAM,CAAC,EAAEE,IAAI,EAAE,EAAEC,KAAK,GAAGC,QAAQ;QAC7B,QAAQC;QACR,SAASC,CAAAA,UAAY;gBAAE,MAAMA,QAAQ,OAAO;YAAmC;QAC/E,OAAO,CAACC,OAAOD;YACX,MAAME,UAAUF,QAAQ,eAAe;YACvC,IAAI,CAACE,SACD;YAEJ,IAAIC,aAA4B;YAChC,KAAK,MAAMT,QAAQZ,MAAO;gBACtB,MAAMa,OAAOL,SAAS,OAAO,CAAC,GAAG,CAACI;gBAClC,IAAI,CAACC,MACD;gBAEJ,MAAMS,OAAOT,KAAK,qBAAqB;gBACvC,IAAIO,QAAQ,CAAC,GAAGE,KAAK,GAAG,GAAGA,KAAK,MAAM,GAAG,GAAG;oBACxCD,aAAaT;oBACb;gBACJ;YACJ;YACAN,UAAU,SAAS,CAACP,aAAasB;QACrC;QACA,MAAM;YACFf,UAAU,IAAI;QAClB;IACJ;IAEA,MAAMiB,aAAatB,AAAiB,SAAjBA;IACnB,MAAMuB,sBAAsB,CAACZ,OACzBW,cACArB,AAAe,SAAfA,cACAA,WAAW,MAAM,KAAKH,eACtBG,WAAW,UAAU,KAAKU;IAG9B,IAAIa,YAAY;IAChB,IAAIX,MACAW,YAAY,WAAZA,GAAY,oBAACC,qBAAmBA;QAAC,OAAOZ,KAAK,KAAK;QAAE,QAAQA,KAAK,MAAM;;IAG3E,OAAO,WAAP,GACI,oBAAC;QACG,KAAKD,CAAAA;YACDE,KAAKF;QACT;QACA,WAAW;QACX,eAAa,CAAC,iBAAiB,EAAEd,aAAa;OAE7CC,MAAM,GAAG,CAACY,CAAAA;QACP,MAAMe,UAAUvB,SAAS,GAAG,CAACQ;QAC7B,IAAI,CAACe,SACD,OAAO;QAEX,OAAO,WAAP,GACI,oBAACC,MAAAA,QAAc;YAAC,KAAKhB;WAChBY,oBAAoBZ,QAAQa,YAAY,oBACzC,oBAACI,qBAAmBA;YAChB,MAAMjB;YACN,OAAOP,OAAO,GAAG,CAACO,OAAO,SAASA;YAClC,YAAYA,SAASX;YACrB,WAAWK;YACX,aAAaK;WAEZgB;IAIjB,IACC3B,MAAM,MAAM,GAAG,KAAKwB,oBAAoB,SAASC,WAEjDzB,AAAiB,MAAjBA,MAAM,MAAM,IAAU,WAAL,GACd,oBAAC8B,kBAAgBA;QACb,WAAW3B;QACX,UAAU,IAAMG,UAAU,YAAY,CAACP;QACvC,UAAUQ;QACV,UAAUgB;QACV,QAAQC,oBAAoB;;AAKhD"}

package/Dashboard/components/dnd/WidgetDropIndicator.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface WidgetDropIndicatorProps {
+    title: string;
+    height: number;
+}
+/**
+ * The slot a dragged widget would drop into: an empty card the size of the dragged one, titled
+ * like it. It grows from nothing when it appears, so the cards below slide instead of jump.
+ */
+export declare const WidgetDropIndicator: ({ title, height }: WidgetDropIndicatorProps) => React.JSX.Element;
+export {};

package/Dashboard/components/dnd/WidgetDropIndicator.js

@@ -0,0 +1,29 @@
+import react, { useEffect, useState } from "react";
+import { Text, cn } from "@webiny/admin-ui";
+const FALLBACK_HEIGHT = 80;
+const WidgetDropIndicator = ({ title, height })=>{
+    const [grown, setGrown] = useState(false);
+    useEffect(()=>{
+        const frame = requestAnimationFrame(()=>setGrown(true));
+        return ()=>cancelAnimationFrame(frame);
+    }, []);
+    let targetHeight = FALLBACK_HEIGHT;
+    if (height > 0) targetHeight = height;
+    return /*#__PURE__*/ react.createElement("div", {
+        "aria-hidden": true,
+        "data-testid": "dashboard-widget-drop-indicator",
+        className: cn("pointer-events-none w-full flex-none overflow-hidden", "rounded-xl border-2 border-dashed", "motion-safe:transition-[height] motion-safe:duration-200 motion-safe:ease-out"),
+        style: {
+            height: grown ? targetHeight : 0,
+            borderColor: "var(--color-primary-400)",
+            backgroundColor: "color-mix(in srgb, var(--color-primary-500) 6%, transparent)"
+        }
+    }, /*#__PURE__*/ react.createElement(Text, {
+        as: "div",
+        size: "md",
+        className: "px-lg pt-md-plus font-semibold text-accent-primary"
+    }, title));
+};
+export { WidgetDropIndicator };
+
+//# sourceMappingURL=WidgetDropIndicator.js.map

package/Dashboard/components/dnd/WidgetDropIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/dnd/WidgetDropIndicator.js","sources":["../../../../src/Dashboard/components/dnd/WidgetDropIndicator.tsx"],"sourcesContent":["import React from \"react\";\nimport { useEffect } from \"react\";\nimport { useState } from \"react\";\nimport { Text } from \"@webiny/admin-ui\";\nimport { cn } from \"@webiny/admin-ui\";\n\n// Used when the dragged card couldn't be measured.\nconst FALLBACK_HEIGHT = 80;\n\ninterface WidgetDropIndicatorProps {\n    // The dragged widget's title, shown in the slot.\n    title: string;\n    // The dragged card's height, so the slot reserves exactly the space the widget will take.\n    height: number;\n}\n\n/**\n * The slot a dragged widget would drop into: an empty card the size of the dragged one, titled\n * like it. It grows from nothing when it appears, so the cards below slide instead of jump.\n */\nexport const WidgetDropIndicator = ({ title, height }: WidgetDropIndicatorProps) => {\n    const [grown, setGrown] = useState(false);\n\n    useEffect(() => {\n        // One frame at zero height first, so the browser has something to transition from.\n        const frame = requestAnimationFrame(() => setGrown(true));\n        return () => cancelAnimationFrame(frame);\n    }, []);\n\n    let targetHeight = FALLBACK_HEIGHT;\n    if (height > 0) {\n        targetHeight = height;\n    }\n\n    return (\n        <div\n            aria-hidden\n            data-testid={\"dashboard-widget-drop-indicator\"}\n            className={cn(\n                \"pointer-events-none w-full flex-none overflow-hidden\",\n                // `rounded-xl` and the 2px border match the cards' outline in Customize mode.\n                \"rounded-xl border-2 border-dashed\",\n                \"motion-safe:transition-[height] motion-safe:duration-200 motion-safe:ease-out\"\n            )}\n            style={{\n                height: grown ? targetHeight : 0,\n                borderColor: \"var(--color-primary-400)\",\n                backgroundColor: \"color-mix(in srgb, var(--color-primary-500) 6%, transparent)\"\n            }}\n        >\n            {/* Where the card's own title sits, and out of the way of the drag chip under the pointer. */}\n            <Text\n                as={\"div\"}\n                size={\"md\"}\n                className={\"px-lg pt-md-plus font-semibold text-accent-primary\"}\n            >\n                {title}\n            </Text>\n        </div>\n    );\n};\n"],"names":["FALLBACK_HEIGHT","WidgetDropIndicator","title","height","grown","setGrown","useState","useEffect","frame","requestAnimationFrame","cancelAnimationFrame","targetHeight","cn","Text"],"mappings":";;AAOA,MAAMA,kBAAkB;AAajB,MAAMC,sBAAsB,CAAC,EAAEC,KAAK,EAAEC,MAAM,EAA4B;IAC3E,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAS;IAEnCC,UAAU;QAEN,MAAMC,QAAQC,sBAAsB,IAAMJ,SAAS;QACnD,OAAO,IAAMK,qBAAqBF;IACtC,GAAG,EAAE;IAEL,IAAIG,eAAeX;IACnB,IAAIG,SAAS,GACTQ,eAAeR;IAGnB,OAAO,WAAP,GACI,oBAAC;QACG;QACA,eAAa;QACb,WAAWS,GACP,wDAEA,qCACA;QAEJ,OAAO;YACH,QAAQR,QAAQO,eAAe;YAC/B,aAAa;YACb,iBAAiB;QACrB;qBAGA,oBAACE,MAAIA;QACD,IAAI;QACJ,MAAM;QACN,WAAW;OAEVX;AAIjB"}

package/Dashboard/components/dnd/WidgetSlot.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface WidgetSlotProps {
+    host: HTMLDivElement;
+}
+export declare const WidgetSlot: ({ host }: WidgetSlotProps) => React.JSX.Element;
+export {};

package/Dashboard/components/dnd/WidgetSlot.js

@@ -0,0 +1,9 @@
+import react from "react";
+const WidgetSlot = ({ host })=>/*#__PURE__*/ react.createElement("div", {
+        ref: (node)=>{
+            if (node && host.parentNode !== node) node.appendChild(host);
+        }
+    });
+export { WidgetSlot };
+
+//# sourceMappingURL=WidgetSlot.js.map

package/Dashboard/components/dnd/WidgetSlot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/dnd/WidgetSlot.js","sources":["../../../../src/Dashboard/components/dnd/WidgetSlot.tsx"],"sourcesContent":["import React from \"react\";\n\ninterface WidgetSlotProps {\n    // The widget's container from `useWidgetHosts`.\n    host: HTMLDivElement;\n}\n\n// Marks where a widget sits and moves the widget's container here. See `useWidgetHosts`.\nexport const WidgetSlot = ({ host }: WidgetSlotProps) => {\n    return (\n        <div\n            ref={node => {\n                if (node && host.parentNode !== node) {\n                    node.appendChild(host);\n                }\n            }}\n        />\n    );\n};\n"],"names":["WidgetSlot","host","node"],"mappings":";AAQO,MAAMA,aAAa,CAAC,EAAEC,IAAI,EAAmB,GACzC,WAAP,GACI,oBAAC;QACG,KAAKC,CAAAA;YACD,IAAIA,QAAQD,KAAK,UAAU,KAAKC,MAC5BA,KAAK,WAAW,CAACD;QAEzB"}

package/Dashboard/components/dnd/dragItem.d.ts

@@ -0,0 +1,6 @@
+export declare const DASHBOARD_WIDGET_DND_TYPE = "dashboard-widget";
+export interface DashboardWidgetDragItem {
+    name: string;
+    title: string;
+    height: number;
+}

package/Dashboard/components/dnd/dragItem.js

@@ -0,0 +1,4 @@
+const DASHBOARD_WIDGET_DND_TYPE = "dashboard-widget";
+export { DASHBOARD_WIDGET_DND_TYPE };
+
+//# sourceMappingURL=dragItem.js.map

package/Dashboard/components/dnd/dragItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/dnd/dragItem.js","sources":["../../../../src/Dashboard/components/dnd/dragItem.ts"],"sourcesContent":["export const DASHBOARD_WIDGET_DND_TYPE = \"dashboard-widget\";\n\n// What a dragged widget carries, so any column can size and label the slot it would drop into.\nexport interface DashboardWidgetDragItem {\n    name: string;\n    title: string;\n    // The card's height when the drag started, in pixels.\n    height: number;\n}\n"],"names":["DASHBOARD_WIDGET_DND_TYPE"],"mappings":"AAAO,MAAMA,4BAA4B"}

package/Dashboard/components/dnd/useWidgetHosts.d.ts

@@ -0,0 +1 @@
+export declare const useWidgetHosts: () => (name: string) => HTMLDivElement;

package/Dashboard/components/dnd/useWidgetHosts.js

@@ -0,0 +1,16 @@
+import { useCallback, useRef } from "react";
+const useWidgetHosts = ()=>{
+    const hosts = useRef(new Map());
+    return useCallback((name)=>{
+        let host = hosts.current.get(name);
+        if (!host) {
+            host = document.createElement("div");
+            host.dataset.widgetHost = name;
+            hosts.current.set(name, host);
+        }
+        return host;
+    }, []);
+};
+export { useWidgetHosts };
+
+//# sourceMappingURL=useWidgetHosts.js.map

package/Dashboard/components/dnd/useWidgetHosts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/dnd/useWidgetHosts.js","sources":["../../../../src/Dashboard/components/dnd/useWidgetHosts.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useRef } from \"react\";\n\n/*\n * One detached container per widget, created once and kept for the life of the dashboard.\n *\n * Each widget renders into its container through a portal, and `WidgetSlot` moves the container\n * to wherever the widget currently sits. The portal's container never changes, so React never\n * remounts the widget: switching Customize mode or dropping a widget into another column doesn't\n * reload it.\n */\nexport const useWidgetHosts = () => {\n    const hosts = useRef(new Map<string, HTMLDivElement>());\n\n    return useCallback((name: string): HTMLDivElement => {\n        let host = hosts.current.get(name);\n        if (!host) {\n            host = document.createElement(\"div\");\n            host.dataset.widgetHost = name;\n            hosts.current.set(name, host);\n        }\n        return host;\n    }, []);\n};\n"],"names":["useWidgetHosts","hosts","useRef","Map","useCallback","name","host","document"],"mappings":";AAWO,MAAMA,iBAAiB;IAC1B,MAAMC,QAAQC,OAAO,IAAIC;IAEzB,OAAOC,YAAY,CAACC;QAChB,IAAIC,OAAOL,MAAM,OAAO,CAAC,GAAG,CAACI;QAC7B,IAAI,CAACC,MAAM;YACPA,OAAOC,SAAS,aAAa,CAAC;YAC9BD,KAAK,OAAO,CAAC,UAAU,GAAGD;YAC1BJ,MAAM,OAAO,CAAC,GAAG,CAACI,MAAMC;QAC5B;QACA,OAAOA;IACX,GAAG,EAAE;AACT"}

package/Dashboard/components/layout/EditableColumns.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { DashboardLayoutPresenter } from "../../dashboardLayout/presenter/abstractions.js";
+interface EditableColumnsProps {
+    vm: DashboardLayoutPresenter.ViewModel;
+    slots: Map<string, React.ReactElement>;
+    titles: Map<string, {
+        title: string;
+    }>;
+    presenter: DashboardLayoutPresenter.Interface;
+    onBrowseWidgets: () => void;
+}
+export declare const EditableColumns: ({ vm, slots, titles, presenter, onBrowseWidgets }: EditableColumnsProps) => React.JSX.Element;
+export {};

package/Dashboard/components/layout/EditableColumns.js

@@ -0,0 +1,25 @@
+import react from "react";
+import { DashboardDragLayer } from "../dnd/DashboardDragLayer.js";
+import { DashboardWidgetColumn } from "../dnd/DashboardWidgetColumn.js";
+import { MIN_COLUMN_COUNT } from "../../dashboardLayout/types.js";
+import { DASHBOARD_MAX_WIDTH } from "./layoutConstants.js";
+const EditableColumns = ({ vm, slots, titles, presenter, onBrowseWidgets })=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(DashboardDragLayer, null), /*#__PURE__*/ react.createElement("div", {
+        className: "flex gap-lg",
+        style: {
+            maxWidth: DASHBOARD_MAX_WIDTH
+        }
+    }, vm.columns.map((names, index)=>/*#__PURE__*/ react.createElement(DashboardWidgetColumn, {
+            key: index,
+            columnIndex: index,
+            names: names,
+            draggingName: vm.draggingName,
+            dropTarget: vm.dropTarget,
+            canRemoveColumn: vm.columnCount > MIN_COLUMN_COUNT,
+            elements: slots,
+            titles: titles,
+            presenter: presenter,
+            onBrowseWidgets: onBrowseWidgets
+        }))));
+export { EditableColumns };
+
+//# sourceMappingURL=EditableColumns.js.map

package/Dashboard/components/layout/EditableColumns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/layout/EditableColumns.js","sources":["../../../../src/Dashboard/components/layout/EditableColumns.tsx"],"sourcesContent":["import React from \"react\";\nimport { DashboardDragLayer } from \"../dnd/DashboardDragLayer.js\";\nimport { DashboardWidgetColumn } from \"../dnd/DashboardWidgetColumn.js\";\nimport { MIN_COLUMN_COUNT } from \"../../dashboardLayout/types.js\";\nimport type { DashboardLayoutPresenter } from \"../../dashboardLayout/presenter/abstractions.js\";\nimport { DASHBOARD_MAX_WIDTH } from \"./layoutConstants.js\";\n\ninterface EditableColumnsProps {\n    vm: DashboardLayoutPresenter.ViewModel;\n    slots: Map<string, React.ReactElement>;\n    titles: Map<string, { title: string }>;\n    presenter: DashboardLayoutPresenter.Interface;\n    onBrowseWidgets: () => void;\n}\n\n// Customize mode: every column is a drop target and every widget can be dragged or removed.\nexport const EditableColumns = ({\n    vm,\n    slots,\n    titles,\n    presenter,\n    onBrowseWidgets\n}: EditableColumnsProps) => {\n    return (\n        <>\n            <DashboardDragLayer />\n            <div className={\"flex gap-lg\"} style={{ maxWidth: DASHBOARD_MAX_WIDTH }}>\n                {vm.columns.map((names, index) => (\n                    <DashboardWidgetColumn\n                        key={index}\n                        columnIndex={index}\n                        names={names}\n                        draggingName={vm.draggingName}\n                        dropTarget={vm.dropTarget}\n                        canRemoveColumn={vm.columnCount > MIN_COLUMN_COUNT}\n                        elements={slots}\n                        titles={titles}\n                        presenter={presenter}\n                        onBrowseWidgets={onBrowseWidgets}\n                    />\n                ))}\n            </div>\n        </>\n    );\n};\n"],"names":["EditableColumns","vm","slots","titles","presenter","onBrowseWidgets","DashboardDragLayer","DASHBOARD_MAX_WIDTH","names","index","DashboardWidgetColumn","MIN_COLUMN_COUNT"],"mappings":";;;;;AAgBO,MAAMA,kBAAkB,CAAC,EAC5BC,EAAE,EACFC,KAAK,EACLC,MAAM,EACNC,SAAS,EACTC,eAAe,EACI,GACZ,WAAP,GACI,wDACI,oBAACC,oBAAkBA,OAAAA,WAAAA,GACnB,oBAAC;QAAI,WAAW;QAAe,OAAO;YAAE,UAAUC;QAAoB;OACjEN,GAAG,OAAO,CAAC,GAAG,CAAC,CAACO,OAAOC,QAAAA,WAAAA,GACpB,oBAACC,uBAAqBA;YAClB,KAAKD;YACL,aAAaA;YACb,OAAOD;YACP,cAAcP,GAAG,YAAY;YAC7B,YAAYA,GAAG,UAAU;YACzB,iBAAiBA,GAAG,WAAW,GAAGU;YAClC,UAAUT;YACV,QAAQC;YACR,WAAWC;YACX,iBAAiBC"}

package/Dashboard/components/layout/StaticColumns.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface StaticColumnsProps {
+    columns: string[][];
+    visibleCount: number;
+    slots: Map<string, React.ReactElement>;
+}
+export declare const StaticColumns: ({ columns, visibleCount, slots }: StaticColumnsProps) => React.JSX.Element;
+export {};

package/Dashboard/components/layout/StaticColumns.js

@@ -0,0 +1,20 @@
+import react from "react";
+import { collapseColumns } from "./collapseColumns.js";
+import { DASHBOARD_MAX_WIDTH } from "./layoutConstants.js";
+const StaticColumns = ({ columns, visibleCount, slots })=>{
+    const collapsed = collapseColumns(columns, visibleCount);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex gap-lg",
+        style: {
+            maxWidth: DASHBOARD_MAX_WIDTH
+        }
+    }, collapsed.map((names, index)=>/*#__PURE__*/ react.createElement("div", {
+            key: index,
+            className: "flex flex-1 flex-col gap-lg"
+        }, names.map((name)=>/*#__PURE__*/ react.createElement(react.Fragment, {
+                key: name
+            }, slots.get(name))))));
+};
+export { StaticColumns };
+
+//# sourceMappingURL=StaticColumns.js.map

package/Dashboard/components/layout/StaticColumns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/layout/StaticColumns.js","sources":["../../../../src/Dashboard/components/layout/StaticColumns.tsx"],"sourcesContent":["import React from \"react\";\nimport { collapseColumns } from \"./collapseColumns.js\";\nimport { DASHBOARD_MAX_WIDTH } from \"./layoutConstants.js\";\n\ninterface StaticColumnsProps {\n    columns: string[][];\n    // How many columns fit on screen; fewer than `columns.length` folds them together.\n    visibleCount: number;\n    slots: Map<string, React.ReactElement>;\n}\n\n// The everyday dashboard: widgets laid out in their columns, nothing to drag.\nexport const StaticColumns = ({ columns, visibleCount, slots }: StaticColumnsProps) => {\n    const collapsed = collapseColumns(columns, visibleCount);\n    return (\n        <div className={\"flex gap-lg\"} style={{ maxWidth: DASHBOARD_MAX_WIDTH }}>\n            {collapsed.map((names, index) => (\n                <div key={index} className={\"flex flex-1 flex-col gap-lg\"}>\n                    {names.map(name => (\n                        <React.Fragment key={name}>{slots.get(name)}</React.Fragment>\n                    ))}\n                </div>\n            ))}\n        </div>\n    );\n};\n"],"names":["StaticColumns","columns","visibleCount","slots","collapsed","collapseColumns","DASHBOARD_MAX_WIDTH","names","index","name","React"],"mappings":";;;AAYO,MAAMA,gBAAgB,CAAC,EAAEC,OAAO,EAAEC,YAAY,EAAEC,KAAK,EAAsB;IAC9E,MAAMC,YAAYC,gBAAgBJ,SAASC;IAC3C,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;QAAe,OAAO;YAAE,UAAUI;QAAoB;OACjEF,UAAU,GAAG,CAAC,CAACG,OAAOC,QAAAA,WAAAA,GACnB,oBAAC;YAAI,KAAKA;YAAO,WAAW;WACvBD,MAAM,GAAG,CAACE,CAAAA,OAAAA,WAAAA,GACP,oBAACC,MAAAA,QAAc;gBAAC,KAAKD;eAAON,MAAM,GAAG,CAACM;AAM9D"}

package/Dashboard/components/layout/collapseColumns.d.ts

@@ -0,0 +1 @@
+export declare const collapseColumns: (columns: string[][], count: number) => string[][];

package/Dashboard/components/layout/collapseColumns.js

@@ -0,0 +1,16 @@
+const collapseColumns = (columns, count)=>{
+    const result = Array.from({
+        length: count
+    }, ()=>[]);
+    const perColumn = Math.ceil(columns.length / count);
+    const groupSize = Math.max(1, perColumn);
+    columns.forEach((column, index)=>{
+        const group = Math.floor(index / groupSize);
+        const target = Math.min(group, count - 1);
+        result[target].push(...column);
+    });
+    return result;
+};
+export { collapseColumns };
+
+//# sourceMappingURL=collapseColumns.js.map

package/Dashboard/components/layout/collapseColumns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/layout/collapseColumns.js","sources":["../../../../src/Dashboard/components/layout/collapseColumns.ts"],"sourcesContent":["// Folds `columns` into `count` visual columns, keeping neighbors together and reading order intact.\nexport const collapseColumns = (columns: string[][], count: number): string[][] => {\n    const result: string[][] = Array.from({ length: count }, () => []);\n    const perColumn = Math.ceil(columns.length / count);\n    const groupSize = Math.max(1, perColumn);\n    columns.forEach((column, index) => {\n        const group = Math.floor(index / groupSize);\n        const target = Math.min(group, count - 1);\n        result[target].push(...column);\n    });\n    return result;\n};\n"],"names":["collapseColumns","columns","count","result","Array","perColumn","Math","groupSize","column","index","group","target"],"mappings":"AACO,MAAMA,kBAAkB,CAACC,SAAqBC;IACjD,MAAMC,SAAqBC,MAAM,IAAI,CAAC;QAAE,QAAQF;IAAM,GAAG,IAAM,EAAE;IACjE,MAAMG,YAAYC,KAAK,IAAI,CAACL,QAAQ,MAAM,GAAGC;IAC7C,MAAMK,YAAYD,KAAK,GAAG,CAAC,GAAGD;IAC9BJ,QAAQ,OAAO,CAAC,CAACO,QAAQC;QACrB,MAAMC,QAAQJ,KAAK,KAAK,CAACG,QAAQF;QACjC,MAAMI,SAASL,KAAK,GAAG,CAACI,OAAOR,QAAQ;QACvCC,MAAM,CAACQ,OAAO,CAAC,IAAI,IAAIH;IAC3B;IACA,OAAOL;AACX"}

package/Dashboard/components/layout/layoutConstants.d.ts

@@ -0,0 +1,2 @@
+export declare const DASHBOARD_MAX_WIDTH = 1600;
+export declare const MIN_COLUMN_WIDTH = 360;

package/Dashboard/components/layout/layoutConstants.js

@@ -0,0 +1,5 @@
+const DASHBOARD_MAX_WIDTH = 1600;
+const MIN_COLUMN_WIDTH = 360;
+export { DASHBOARD_MAX_WIDTH, MIN_COLUMN_WIDTH };
+
+//# sourceMappingURL=layoutConstants.js.map

package/Dashboard/components/layout/layoutConstants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/layout/layoutConstants.js","sources":["../../../../src/Dashboard/components/layout/layoutConstants.ts"],"sourcesContent":["// One width for every column count, so switching columns doesn't move the toolbar or the cards.\nexport const DASHBOARD_MAX_WIDTH = 1600;\n\n// Minimum width a column needs before the dashboard folds into fewer columns.\nexport const MIN_COLUMN_WIDTH = 360;\n"],"names":["DASHBOARD_MAX_WIDTH","MIN_COLUMN_WIDTH"],"mappings":"AACO,MAAMA,sBAAsB;AAG5B,MAAMC,mBAAmB"}

package/Dashboard/components/layout/useColumnsThatFit.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export declare const useColumnsThatFit: (columnCount: number) => {
+    ref: React.RefObject<HTMLDivElement>;
+    visibleCount: number;
+    allFit: boolean;
+};

package/Dashboard/components/layout/useColumnsThatFit.js

@@ -0,0 +1,30 @@
+import react, { useEffect, useState } from "react";
+import { MIN_COLUMN_WIDTH } from "./layoutConstants.js";
+const useColumnsThatFit = (columnCount)=>{
+    const ref = react.useRef(null);
+    const [width, setWidth] = useState(0);
+    useEffect(()=>{
+        const node = ref.current;
+        if (!node) return;
+        setWidth(node.clientWidth);
+        const observer = new ResizeObserver((entries)=>{
+            setWidth(entries[0].contentRect.width);
+        });
+        observer.observe(node);
+        return ()=>observer.disconnect();
+    }, []);
+    let fitCount = columnCount;
+    if (width > 0) {
+        const columnsThatFit = Math.floor(width / MIN_COLUMN_WIDTH);
+        fitCount = Math.max(1, columnsThatFit);
+    }
+    const visibleCount = Math.min(columnCount, fitCount);
+    return {
+        ref,
+        visibleCount,
+        allFit: visibleCount === columnCount
+    };
+};
+export { useColumnsThatFit };
+
+//# sourceMappingURL=useColumnsThatFit.js.map

package/Dashboard/components/layout/useColumnsThatFit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/layout/useColumnsThatFit.js","sources":["../../../../src/Dashboard/components/layout/useColumnsThatFit.ts"],"sourcesContent":["import React from \"react\";\nimport { useEffect } from \"react\";\nimport { useState } from \"react\";\nimport { MIN_COLUMN_WIDTH } from \"./layoutConstants.js\";\n\n/*\n * Measures the dashboard and works out how many of the chosen columns fit. When fewer fit, the\n * dashboard shows `visibleCount` columns and `allFit` is false (Customize mode needs all of them).\n */\nexport const useColumnsThatFit = (columnCount: number) => {\n    const ref = React.useRef<HTMLDivElement>(null);\n    const [width, setWidth] = useState(0);\n\n    useEffect(() => {\n        const node = ref.current;\n        if (!node) {\n            return;\n        }\n        setWidth(node.clientWidth);\n        const observer = new ResizeObserver(entries => {\n            setWidth(entries[0].contentRect.width);\n        });\n        observer.observe(node);\n        return () => observer.disconnect();\n    }, []);\n\n    let fitCount = columnCount;\n    if (width > 0) {\n        const columnsThatFit = Math.floor(width / MIN_COLUMN_WIDTH);\n        fitCount = Math.max(1, columnsThatFit);\n    }\n    const visibleCount = Math.min(columnCount, fitCount);\n\n    return { ref, visibleCount, allFit: visibleCount === columnCount };\n};\n"],"names":["useColumnsThatFit","columnCount","ref","React","width","setWidth","useState","useEffect","node","observer","ResizeObserver","entries","fitCount","columnsThatFit","Math","MIN_COLUMN_WIDTH","visibleCount"],"mappings":";;AASO,MAAMA,oBAAoB,CAACC;IAC9B,MAAMC,MAAMC,MAAAA,MAAY,CAAiB;IACzC,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAS;IAEnCC,UAAU;QACN,MAAMC,OAAON,IAAI,OAAO;QACxB,IAAI,CAACM,MACD;QAEJH,SAASG,KAAK,WAAW;QACzB,MAAMC,WAAW,IAAIC,eAAeC,CAAAA;YAChCN,SAASM,OAAO,CAAC,EAAE,CAAC,WAAW,CAAC,KAAK;QACzC;QACAF,SAAS,OAAO,CAACD;QACjB,OAAO,IAAMC,SAAS,UAAU;IACpC,GAAG,EAAE;IAEL,IAAIG,WAAWX;IACf,IAAIG,QAAQ,GAAG;QACX,MAAMS,iBAAiBC,KAAK,KAAK,CAACV,QAAQW;QAC1CH,WAAWE,KAAK,GAAG,CAAC,GAAGD;IAC3B;IACA,MAAMG,eAAeF,KAAK,GAAG,CAACb,aAAaW;IAE3C,OAAO;QAAEV;QAAKc;QAAc,QAAQA,iBAAiBf;IAAY;AACrE"}

package/Dashboard/components/layout/useWidgetPortals.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare const useWidgetPortals: (placed: string[], elements: Map<string, React.ReactElement>) => {
+    slots: Map<string, React.ReactElement<any, string | React.JSXElementConstructor<any>>>;
+    portals: React.ReactNode[];
+};

package/Dashboard/components/layout/useWidgetPortals.js

@@ -0,0 +1,26 @@
+import react from "react";
+import { createPortal } from "react-dom";
+import { WidgetSlot } from "../dnd/WidgetSlot.js";
+import { useWidgetHosts } from "../dnd/useWidgetHosts.js";
+const useWidgetPortals = (placed, elements)=>{
+    const getHost = useWidgetHosts();
+    const slots = new Map();
+    const portals = [];
+    for (const name of placed){
+        const element = elements.get(name);
+        if (!element) continue;
+        const host = getHost(name);
+        slots.set(name, /*#__PURE__*/ react.createElement(WidgetSlot, {
+            host: host
+        }));
+        const portal = /*#__PURE__*/ createPortal(element, host, name);
+        portals.push(portal);
+    }
+    return {
+        slots,
+        portals
+    };
+};
+export { useWidgetPortals };
+
+//# sourceMappingURL=useWidgetPortals.js.map

package/Dashboard/components/layout/useWidgetPortals.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/layout/useWidgetPortals.js","sources":["../../../../src/Dashboard/components/layout/useWidgetPortals.tsx"],"sourcesContent":["import React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { WidgetSlot } from \"../dnd/WidgetSlot.js\";\nimport { useWidgetHosts } from \"../dnd/useWidgetHosts.js\";\n\n/*\n * Renders every placed widget once, into its own container, and returns a slot per widget for the\n * layouts to place. Moving a slot moves the widget without remounting it; see `useWidgetHosts`.\n * Render `portals` once, anywhere stable; render `slots.get(name)` wherever the widget goes.\n */\nexport const useWidgetPortals = (placed: string[], elements: Map<string, React.ReactElement>) => {\n    const getHost = useWidgetHosts();\n    const slots = new Map<string, React.ReactElement>();\n    const portals: React.ReactNode[] = [];\n\n    for (const name of placed) {\n        const element = elements.get(name);\n        if (!element) {\n            continue;\n        }\n        const host = getHost(name);\n        slots.set(name, <WidgetSlot host={host} />);\n        const portal = createPortal(element, host, name);\n        portals.push(portal);\n    }\n\n    return { slots, portals };\n};\n"],"names":["useWidgetPortals","placed","elements","getHost","useWidgetHosts","slots","Map","portals","name","element","host","WidgetSlot","portal","createPortal"],"mappings":";;;;AAUO,MAAMA,mBAAmB,CAACC,QAAkBC;IAC/C,MAAMC,UAAUC;IAChB,MAAMC,QAAQ,IAAIC;IAClB,MAAMC,UAA6B,EAAE;IAErC,KAAK,MAAMC,QAAQP,OAAQ;QACvB,MAAMQ,UAAUP,SAAS,GAAG,CAACM;QAC7B,IAAI,CAACC,SACD;QAEJ,MAAMC,OAAOP,QAAQK;QACrBH,MAAM,GAAG,CAACG,MAAM,WAANA,GAAM,oBAACG,YAAUA;YAAC,MAAMD;;QAClC,MAAME,SAAS,WAATA,GAASC,aAAaJ,SAASC,MAAMF;QAC3CD,QAAQ,IAAI,CAACK;IACjB;IAEA,OAAO;QAAEP;QAAOE;IAAQ;AAC5B"}

package/Dashboard/dashboardLayout/loadLayout/FetchDashboardLayoutUseCase.d.ts

@@ -0,0 +1,12 @@
+import { DashboardLayoutRepository } from "../repository/abstractions.js";
+import { FetchDashboardLayoutUseCase as UseCaseAbstraction } from "./abstractions.js";
+import type { DashboardLayoutData } from "../types.js";
+declare class FetchDashboardLayoutUseCaseImpl implements UseCaseAbstraction.Interface {
+    private repository;
+    constructor(repository: DashboardLayoutRepository.Interface);
+    execute(userId: string): Promise<DashboardLayoutData | null>;
+}
+export declare const FetchDashboardLayoutUseCase: typeof FetchDashboardLayoutUseCaseImpl & {
+    __abstraction: import("@webiny/di").Abstraction<import("./abstractions.js").IFetchDashboardLayoutUseCase>;
+};
+export {};

package/Dashboard/dashboardLayout/loadLayout/FetchDashboardLayoutUseCase.js

@@ -0,0 +1,19 @@
+import { DashboardLayoutRepository } from "../repository/abstractions.js";
+import { FetchDashboardLayoutUseCase } from "./abstractions.js";
+class FetchDashboardLayoutUseCaseImpl {
+    constructor(repository){
+        this.repository = repository;
+    }
+    async execute(userId) {
+        return await this.repository.fetch(userId);
+    }
+}
+const FetchDashboardLayoutUseCase_FetchDashboardLayoutUseCase = FetchDashboardLayoutUseCase.createImplementation({
+    implementation: FetchDashboardLayoutUseCaseImpl,
+    dependencies: [
+        DashboardLayoutRepository
+    ]
+});
+export { FetchDashboardLayoutUseCase_FetchDashboardLayoutUseCase as FetchDashboardLayoutUseCase };
+
+//# sourceMappingURL=FetchDashboardLayoutUseCase.js.map

package/Dashboard/dashboardLayout/loadLayout/FetchDashboardLayoutUseCase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/dashboardLayout/loadLayout/FetchDashboardLayoutUseCase.js","sources":["../../../../src/Dashboard/dashboardLayout/loadLayout/FetchDashboardLayoutUseCase.ts"],"sourcesContent":["import { DashboardLayoutRepository } from \"../repository/abstractions.js\";\nimport { FetchDashboardLayoutUseCase as UseCaseAbstraction } from \"./abstractions.js\";\nimport type { DashboardLayoutData } from \"../types.js\";\n\nclass FetchDashboardLayoutUseCaseImpl implements UseCaseAbstraction.Interface {\n    constructor(private repository: DashboardLayoutRepository.Interface) {}\n\n    async execute(userId: string): Promise<DashboardLayoutData | null> {\n        return await this.repository.fetch(userId);\n    }\n}\n\nexport const FetchDashboardLayoutUseCase = UseCaseAbstraction.createImplementation({\n    implementation: FetchDashboardLayoutUseCaseImpl,\n    dependencies: [DashboardLayoutRepository]\n});\n"],"names":["FetchDashboardLayoutUseCaseImpl","repository","userId","FetchDashboardLayoutUseCase","UseCaseAbstraction","DashboardLayoutRepository"],"mappings":";;AAIA,MAAMA;IACF,YAAoBC,UAA+C,CAAE;aAAjDA,UAAU,GAAVA;IAAkD;IAEtE,MAAM,QAAQC,MAAc,EAAuC;QAC/D,OAAO,MAAM,IAAI,CAAC,UAAU,CAAC,KAAK,CAACA;IACvC;AACJ;AAEO,MAAMC,0DAA8BC,4BAAAA,oBAAuC,CAAC;IAC/E,gBAAgBJ;IAChB,cAAc;QAACK;KAA0B;AAC7C"}

package/Dashboard/dashboardLayout/loadLayout/GetCachedDashboardLayoutUseCase.d.ts

@@ -0,0 +1,12 @@
+import { DashboardLayoutRepository } from "../repository/abstractions.js";
+import { GetCachedDashboardLayoutUseCase as UseCaseAbstraction } from "./abstractions.js";
+import type { DashboardLayoutData } from "../types.js";
+declare class GetCachedDashboardLayoutUseCaseImpl implements UseCaseAbstraction.Interface {
+    private repository;
+    constructor(repository: DashboardLayoutRepository.Interface);
+    execute(userId: string): DashboardLayoutData | null;
+}
+export declare const GetCachedDashboardLayoutUseCase: typeof GetCachedDashboardLayoutUseCaseImpl & {
+    __abstraction: import("@webiny/di").Abstraction<import("./abstractions.js").IGetCachedDashboardLayoutUseCase>;
+};
+export {};

package/Dashboard/dashboardLayout/loadLayout/GetCachedDashboardLayoutUseCase.js

@@ -0,0 +1,19 @@
+import { DashboardLayoutRepository } from "../repository/abstractions.js";
+import { GetCachedDashboardLayoutUseCase } from "./abstractions.js";
+class GetCachedDashboardLayoutUseCaseImpl {
+    constructor(repository){
+        this.repository = repository;
+    }
+    execute(userId) {
+        return this.repository.getCached(userId);
+    }
+}
+const GetCachedDashboardLayoutUseCase_GetCachedDashboardLayoutUseCase = GetCachedDashboardLayoutUseCase.createImplementation({
+    implementation: GetCachedDashboardLayoutUseCaseImpl,
+    dependencies: [
+        DashboardLayoutRepository
+    ]
+});
+export { GetCachedDashboardLayoutUseCase_GetCachedDashboardLayoutUseCase as GetCachedDashboardLayoutUseCase };
+
+//# sourceMappingURL=GetCachedDashboardLayoutUseCase.js.map

package/Dashboard/dashboardLayout/loadLayout/GetCachedDashboardLayoutUseCase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/dashboardLayout/loadLayout/GetCachedDashboardLayoutUseCase.js","sources":["../../../../src/Dashboard/dashboardLayout/loadLayout/GetCachedDashboardLayoutUseCase.ts"],"sourcesContent":["import { DashboardLayoutRepository } from \"../repository/abstractions.js\";\nimport { GetCachedDashboardLayoutUseCase as UseCaseAbstraction } from \"./abstractions.js\";\nimport type { DashboardLayoutData } from \"../types.js\";\n\nclass GetCachedDashboardLayoutUseCaseImpl implements UseCaseAbstraction.Interface {\n    constructor(private repository: DashboardLayoutRepository.Interface) {}\n\n    execute(userId: string): DashboardLayoutData | null {\n        return this.repository.getCached(userId);\n    }\n}\n\nexport const GetCachedDashboardLayoutUseCase = UseCaseAbstraction.createImplementation({\n    implementation: GetCachedDashboardLayoutUseCaseImpl,\n    dependencies: [DashboardLayoutRepository]\n});\n"],"names":["GetCachedDashboardLayoutUseCaseImpl","repository","userId","GetCachedDashboardLayoutUseCase","UseCaseAbstraction","DashboardLayoutRepository"],"mappings":";;AAIA,MAAMA;IACF,YAAoBC,UAA+C,CAAE;aAAjDA,UAAU,GAAVA;IAAkD;IAEtE,QAAQC,MAAc,EAA8B;QAChD,OAAO,IAAI,CAAC,UAAU,CAAC,SAAS,CAACA;IACrC;AACJ;AAEO,MAAMC,kEAAkCC,gCAAAA,oBAAuC,CAAC;IACnF,gBAAgBJ;IAChB,cAAc;QAACK;KAA0B;AAC7C"}

package/Dashboard/dashboardLayout/loadLayout/abstractions.d.ts

@@ -0,0 +1,15 @@
+import type { DashboardLayoutData } from "../types.js";
+export interface IGetCachedDashboardLayoutUseCase {
+    execute(userId: string): DashboardLayoutData | null;
+}
+export declare const GetCachedDashboardLayoutUseCase: import("@webiny/di").Abstraction<IGetCachedDashboardLayoutUseCase>;
+export declare namespace GetCachedDashboardLayoutUseCase {
+    type Interface = IGetCachedDashboardLayoutUseCase;
+}
+export interface IFetchDashboardLayoutUseCase {
+    execute(userId: string): Promise<DashboardLayoutData | null>;
+}
+export declare const FetchDashboardLayoutUseCase: import("@webiny/di").Abstraction<IFetchDashboardLayoutUseCase>;
+export declare namespace FetchDashboardLayoutUseCase {
+    type Interface = IFetchDashboardLayoutUseCase;
+}

package/Dashboard/dashboardLayout/loadLayout/abstractions.js

@@ -0,0 +1,6 @@
+import { createAbstraction } from "@webiny/feature/admin";
+const GetCachedDashboardLayoutUseCase = createAbstraction("GetCachedDashboardLayoutUseCase");
+const FetchDashboardLayoutUseCase = createAbstraction("FetchDashboardLayoutUseCase");
+export { FetchDashboardLayoutUseCase, GetCachedDashboardLayoutUseCase };
+
+//# sourceMappingURL=abstractions.js.map

package/Dashboard/dashboardLayout/loadLayout/abstractions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/dashboardLayout/loadLayout/abstractions.js","sources":["../../../../src/Dashboard/dashboardLayout/loadLayout/abstractions.ts"],"sourcesContent":["import { createAbstraction } from \"@webiny/feature/admin\";\nimport type { DashboardLayoutData } from \"../types.js\";\n\n// Returns the cached layout without a request, so the dashboard can render it straight away.\nexport interface IGetCachedDashboardLayoutUseCase {\n    execute(userId: string): DashboardLayoutData | null;\n}\n\nexport const GetCachedDashboardLayoutUseCase = createAbstraction<IGetCachedDashboardLayoutUseCase>(\n    \"GetCachedDashboardLayoutUseCase\"\n);\n\nexport namespace GetCachedDashboardLayoutUseCase {\n    export type Interface = IGetCachedDashboardLayoutUseCase;\n}\n\n// Fetches the stored layout from the API. `null` means the user never customized their dashboard.\nexport interface IFetchDashboardLayoutUseCase {\n    execute(userId: string): Promise<DashboardLayoutData | null>;\n}\n\nexport const FetchDashboardLayoutUseCase = createAbstraction<IFetchDashboardLayoutUseCase>(\n    \"FetchDashboardLayoutUseCase\"\n);\n\nexport namespace FetchDashboardLayoutUseCase {\n    export type Interface = IFetchDashboardLayoutUseCase;\n}\n"],"names":["GetCachedDashboardLayoutUseCase","createAbstraction","FetchDashboardLayoutUseCase"],"mappings":";AAQO,MAAMA,kCAAkCC,kBAC3C;AAYG,MAAMC,8BAA8BD,kBACvC"}

package/Dashboard/dashboardLayout/loadLayout/feature.d.ts

@@ -0,0 +1 @@
+export declare const LoadDashboardLayoutFeature: import("@webiny/feature/admin").FeatureDefinition<any, []>;

package/Dashboard/dashboardLayout/loadLayout/feature.js

@@ -0,0 +1,13 @@
+import { createFeature } from "@webiny/feature/admin";
+import { GetCachedDashboardLayoutUseCase } from "./GetCachedDashboardLayoutUseCase.js";
+import { FetchDashboardLayoutUseCase } from "./FetchDashboardLayoutUseCase.js";
+const LoadDashboardLayoutFeature = createFeature({
+    name: "AdminUI/LoadDashboardLayout",
+    register (container) {
+        container.register(GetCachedDashboardLayoutUseCase);
+        container.register(FetchDashboardLayoutUseCase);
+    }
+});
+export { LoadDashboardLayoutFeature };
+
+//# sourceMappingURL=feature.js.map

package/Dashboard/dashboardLayout/loadLayout/feature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/dashboardLayout/loadLayout/feature.js","sources":["../../../../src/Dashboard/dashboardLayout/loadLayout/feature.ts"],"sourcesContent":["import { createFeature } from \"@webiny/feature/admin\";\nimport { GetCachedDashboardLayoutUseCase } from \"./GetCachedDashboardLayoutUseCase.js\";\nimport { FetchDashboardLayoutUseCase } from \"./FetchDashboardLayoutUseCase.js\";\n\nexport const LoadDashboardLayoutFeature = createFeature({\n    name: \"AdminUI/LoadDashboardLayout\",\n    register(container) {\n        container.register(GetCachedDashboardLayoutUseCase);\n        container.register(FetchDashboardLayoutUseCase);\n    }\n});\n"],"names":["LoadDashboardLayoutFeature","createFeature","container","GetCachedDashboardLayoutUseCase","FetchDashboardLayoutUseCase"],"mappings":";;;AAIO,MAAMA,6BAA6BC,cAAc;IACpD,MAAM;IACN,UAASC,SAAS;QACdA,UAAU,QAAQ,CAACC;QACnBD,UAAU,QAAQ,CAACE;IACvB;AACJ"}