@uipath/apollo-wind 0.9.1 → 0.10.0-pr219.eea0372

package/dist/components/custom/toolbar-canvas.cjs

@@ -0,0 +1,121 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    FlowCanvasToolbar: ()=>FlowCanvasToolbar
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+require("react");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const index_cjs_namespaceObject = require("../../lib/index.cjs");
+function ToolbarSeparator() {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "h-8 w-px bg-future-border-subtle"
+    });
+}
+function ToolbarButton({ icon, label, onClick }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+        className: "flex h-8 w-8 items-center justify-center rounded-lg text-future-foreground-muted transition-colors hover:text-future-foreground",
+        onClick: onClick,
+        "aria-label": label,
+        children: icon
+    });
+}
+function FlowCanvasToolbar({ className, activeMode = 'build', onModeChange }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: (0, index_cjs_namespaceObject.cn)('flex h-[60px] items-center gap-2 rounded-3xl border border-future-border bg-future-surface-raised px-2.5', className),
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex h-10 items-center rounded-xl border border-future-border-deep bg-future-surface-overlay p-1",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
+                        className: (0, index_cjs_namespaceObject.cn)('flex h-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5 transition-colors', 'build' === activeMode ? 'border border-future-border bg-future-surface text-future-foreground' : 'text-future-foreground-subtle hover:text-future-foreground-hover'),
+                        onClick: ()=>onModeChange?.('build'),
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Workflow, {
+                                className: "h-5 w-5"
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                children: "Build"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
+                        className: (0, index_cjs_namespaceObject.cn)('flex h-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5 transition-colors', 'evaluate' === activeMode ? 'border border-future-border bg-future-surface text-future-foreground' : 'text-future-foreground-subtle hover:text-future-foreground-hover'),
+                        onClick: ()=>onModeChange?.('evaluate'),
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ListChecks, {
+                                className: "h-5 w-5"
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                children: "Evaluate"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarSeparator, {}),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarButton, {
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Undo2, {
+                    className: "h-5 w-5"
+                }),
+                label: "Undo"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarButton, {
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Redo2, {
+                    className: "h-5 w-5"
+                }),
+                label: "Redo"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarSeparator, {}),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarButton, {
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Play, {
+                    className: "h-5 w-5"
+                }),
+                label: "Run"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarSeparator, {}),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarButton, {
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Plus, {
+                    className: "h-5 w-5"
+                }),
+                label: "Add node"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarButton, {
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.StickyNote, {
+                    className: "h-5 w-5"
+                }),
+                label: "Add note"
+            })
+        ]
+    });
+}
+exports.FlowCanvasToolbar = __webpack_exports__.FlowCanvasToolbar;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "FlowCanvasToolbar"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/custom/toolbar-canvas.d.ts

@@ -0,0 +1,15 @@
+export interface CanvasToolbarProps {
+    className?: string;
+    /** Active mode: 'build' | 'evaluate' */
+    activeMode?: 'build' | 'evaluate';
+    /** Callback when mode changes */
+    onModeChange?: (mode: 'build' | 'evaluate') => void;
+}
+/**
+ * Bottom-center toolbar for the Flow canvas.
+ *
+ * Contains a Build/Evaluate toggle, undo/redo, play, add, and sticky note
+ * buttons. Anchored to bottom-center via absolute positioning in the
+ * parent layout.
+ */
+export declare function FlowCanvasToolbar({ className, activeMode, onModeChange, }: CanvasToolbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/custom/toolbar-canvas.js

@@ -0,0 +1,87 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { ListChecks, Play, Plus, Redo2, StickyNote, Undo2, Workflow } from "lucide-react";
+import { cn } from "../../lib/index.js";
+function ToolbarSeparator() {
+    return /*#__PURE__*/ jsx("div", {
+        className: "h-8 w-px bg-future-border-subtle"
+    });
+}
+function ToolbarButton({ icon, label, onClick }) {
+    return /*#__PURE__*/ jsx("button", {
+        className: "flex h-8 w-8 items-center justify-center rounded-lg text-future-foreground-muted transition-colors hover:text-future-foreground",
+        onClick: onClick,
+        "aria-label": label,
+        children: icon
+    });
+}
+function FlowCanvasToolbar({ className, activeMode = 'build', onModeChange }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn('flex h-[60px] items-center gap-2 rounded-3xl border border-future-border bg-future-surface-raised px-2.5', className),
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex h-10 items-center rounded-xl border border-future-border-deep bg-future-surface-overlay p-1",
+                children: [
+                    /*#__PURE__*/ jsxs("button", {
+                        className: cn('flex h-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5 transition-colors', 'build' === activeMode ? 'border border-future-border bg-future-surface text-future-foreground' : 'text-future-foreground-subtle hover:text-future-foreground-hover'),
+                        onClick: ()=>onModeChange?.('build'),
+                        children: [
+                            /*#__PURE__*/ jsx(Workflow, {
+                                className: "h-5 w-5"
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                children: "Build"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("button", {
+                        className: cn('flex h-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5 transition-colors', 'evaluate' === activeMode ? 'border border-future-border bg-future-surface text-future-foreground' : 'text-future-foreground-subtle hover:text-future-foreground-hover'),
+                        onClick: ()=>onModeChange?.('evaluate'),
+                        children: [
+                            /*#__PURE__*/ jsx(ListChecks, {
+                                className: "h-5 w-5"
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                children: "Evaluate"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(ToolbarSeparator, {}),
+            /*#__PURE__*/ jsx(ToolbarButton, {
+                icon: /*#__PURE__*/ jsx(Undo2, {
+                    className: "h-5 w-5"
+                }),
+                label: "Undo"
+            }),
+            /*#__PURE__*/ jsx(ToolbarButton, {
+                icon: /*#__PURE__*/ jsx(Redo2, {
+                    className: "h-5 w-5"
+                }),
+                label: "Redo"
+            }),
+            /*#__PURE__*/ jsx(ToolbarSeparator, {}),
+            /*#__PURE__*/ jsx(ToolbarButton, {
+                icon: /*#__PURE__*/ jsx(Play, {
+                    className: "h-5 w-5"
+                }),
+                label: "Run"
+            }),
+            /*#__PURE__*/ jsx(ToolbarSeparator, {}),
+            /*#__PURE__*/ jsx(ToolbarButton, {
+                icon: /*#__PURE__*/ jsx(Plus, {
+                    className: "h-5 w-5"
+                }),
+                label: "Add node"
+            }),
+            /*#__PURE__*/ jsx(ToolbarButton, {
+                icon: /*#__PURE__*/ jsx(StickyNote, {
+                    className: "h-5 w-5"
+                }),
+                label: "Add note"
+            })
+        ]
+    });
+}
+export { FlowCanvasToolbar };

package/dist/components/custom/toolbar-view.cjs

@@ -0,0 +1,119 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    FlowViewToolbar: ()=>FlowViewToolbar
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+require("react");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const index_cjs_namespaceObject = require("../../lib/index.cjs");
+function ViewButton({ icon, label, isActive, onClick }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+        className: (0, index_cjs_namespaceObject.cn)('flex h-8 w-8 items-center justify-center rounded-lg text-future-foreground-muted transition-colors hover:text-future-foreground', isActive && 'rounded-2xl border border-future-border bg-future-surface text-future-foreground'),
+        onClick: onClick,
+        "aria-label": label,
+        children: icon
+    });
+}
+function NodeSizeIcon({ size, isActive }) {
+    const label = {
+        s: 'S',
+        m: 'M',
+        l: 'L'
+    }[size];
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+        className: (0, index_cjs_namespaceObject.cn)('flex h-8 w-8 items-center justify-center rounded-2xl text-xs font-bold text-future-foreground-muted transition-colors hover:text-future-foreground', isActive && 'border border-future-border bg-future-surface text-future-foreground'),
+        "aria-label": `Node size ${label}`,
+        children: label
+    });
+}
+function FlowViewToolbar({ className, activeNodeSize = 's', onAction }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: (0, index_cjs_namespaceObject.cn)('flex flex-col gap-4', className),
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex w-10 flex-col items-center gap-1 rounded-xl bg-future-surface-raised p-1",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ViewButton, {
+                        icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ZoomIn, {
+                            className: "h-5 w-5"
+                        }),
+                        label: "Zoom in",
+                        onClick: ()=>onAction?.('zoom-in')
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ViewButton, {
+                        icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ZoomOut, {
+                            className: "h-5 w-5"
+                        }),
+                        label: "Zoom out",
+                        onClick: ()=>onAction?.('zoom-out')
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "h-px w-6 bg-future-border-subtle"
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ViewButton, {
+                        icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Maximize2, {
+                            className: "h-5 w-5"
+                        }),
+                        label: "Fit to screen",
+                        onClick: ()=>onAction?.('fit')
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ViewButton, {
+                        icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.LayoutGrid, {
+                            className: "h-5 w-5"
+                        }),
+                        label: "Toggle grid",
+                        onClick: ()=>onAction?.('grid')
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex w-10 flex-col items-center gap-2 rounded-[20px] border border-future-border-deep bg-future-surface-raised p-1",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(NodeSizeIcon, {
+                        size: "s",
+                        isActive: 's' === activeNodeSize
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(NodeSizeIcon, {
+                        size: "m",
+                        isActive: 'm' === activeNodeSize
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(NodeSizeIcon, {
+                        size: "l",
+                        isActive: 'l' === activeNodeSize
+                    })
+                ]
+            })
+        ]
+    });
+}
+exports.FlowViewToolbar = __webpack_exports__.FlowViewToolbar;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "FlowViewToolbar"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/custom/toolbar-view.d.ts

@@ -0,0 +1,14 @@
+export interface ViewToolbarProps {
+    className?: string;
+    /** Active node size: 's' | 'm' | 'l' */
+    activeNodeSize?: 's' | 'm' | 'l';
+    /** Callback for zoom/view actions */
+    onAction?: (action: string) => void;
+}
+/**
+ * Bottom-right view controls for the Flow canvas.
+ *
+ * Contains zoom in/out, fit-to-screen, grid toggle, and node size selector.
+ * Anchored to bottom-right via absolute positioning in the parent layout.
+ */
+export declare function FlowViewToolbar({ className, activeNodeSize, onAction, }: ViewToolbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/custom/toolbar-view.js

@@ -0,0 +1,85 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { LayoutGrid, Maximize2, ZoomIn, ZoomOut } from "lucide-react";
+import { cn } from "../../lib/index.js";
+function ViewButton({ icon, label, isActive, onClick }) {
+    return /*#__PURE__*/ jsx("button", {
+        className: cn('flex h-8 w-8 items-center justify-center rounded-lg text-future-foreground-muted transition-colors hover:text-future-foreground', isActive && 'rounded-2xl border border-future-border bg-future-surface text-future-foreground'),
+        onClick: onClick,
+        "aria-label": label,
+        children: icon
+    });
+}
+function NodeSizeIcon({ size, isActive }) {
+    const label = {
+        s: 'S',
+        m: 'M',
+        l: 'L'
+    }[size];
+    return /*#__PURE__*/ jsx("button", {
+        className: cn('flex h-8 w-8 items-center justify-center rounded-2xl text-xs font-bold text-future-foreground-muted transition-colors hover:text-future-foreground', isActive && 'border border-future-border bg-future-surface text-future-foreground'),
+        "aria-label": `Node size ${label}`,
+        children: label
+    });
+}
+function FlowViewToolbar({ className, activeNodeSize = 's', onAction }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn('flex flex-col gap-4', className),
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex w-10 flex-col items-center gap-1 rounded-xl bg-future-surface-raised p-1",
+                children: [
+                    /*#__PURE__*/ jsx(ViewButton, {
+                        icon: /*#__PURE__*/ jsx(ZoomIn, {
+                            className: "h-5 w-5"
+                        }),
+                        label: "Zoom in",
+                        onClick: ()=>onAction?.('zoom-in')
+                    }),
+                    /*#__PURE__*/ jsx(ViewButton, {
+                        icon: /*#__PURE__*/ jsx(ZoomOut, {
+                            className: "h-5 w-5"
+                        }),
+                        label: "Zoom out",
+                        onClick: ()=>onAction?.('zoom-out')
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "h-px w-6 bg-future-border-subtle"
+                    }),
+                    /*#__PURE__*/ jsx(ViewButton, {
+                        icon: /*#__PURE__*/ jsx(Maximize2, {
+                            className: "h-5 w-5"
+                        }),
+                        label: "Fit to screen",
+                        onClick: ()=>onAction?.('fit')
+                    }),
+                    /*#__PURE__*/ jsx(ViewButton, {
+                        icon: /*#__PURE__*/ jsx(LayoutGrid, {
+                            className: "h-5 w-5"
+                        }),
+                        label: "Toggle grid",
+                        onClick: ()=>onAction?.('grid')
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex w-10 flex-col items-center gap-2 rounded-[20px] border border-future-border-deep bg-future-surface-raised p-1",
+                children: [
+                    /*#__PURE__*/ jsx(NodeSizeIcon, {
+                        size: "s",
+                        isActive: 's' === activeNodeSize
+                    }),
+                    /*#__PURE__*/ jsx(NodeSizeIcon, {
+                        size: "m",
+                        isActive: 'm' === activeNodeSize
+                    }),
+                    /*#__PURE__*/ jsx(NodeSizeIcon, {
+                        size: "l",
+                        isActive: 'l' === activeNodeSize
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { FlowViewToolbar };

package/dist/components/custom/viewport-guard.cjs

@@ -0,0 +1,92 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    ViewportGuard: ()=>ViewportGuard,
+    useViewportAtOrAbove: ()=>useViewportAtOrAbove
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const index_cjs_namespaceObject = require("../../lib/index.cjs");
+function useViewportBelow(minWidthPx) {
+    const [isBelow, setIsBelow] = external_react_namespaceObject.useState(false);
+    external_react_namespaceObject.useEffect(()=>{
+        const mql = window.matchMedia(`(max-width: ${minWidthPx - 1}px)`);
+        const handler = ()=>setIsBelow(mql.matches);
+        handler();
+        mql.addEventListener('change', handler);
+        return ()=>mql.removeEventListener('change', handler);
+    }, [
+        minWidthPx
+    ]);
+    return isBelow;
+}
+function useViewportAtOrAbove(minWidthPx) {
+    const [isAtOrAbove, setIsAtOrAbove] = external_react_namespaceObject.useState(false);
+    external_react_namespaceObject.useEffect(()=>{
+        const mql = window.matchMedia(`(min-width: ${minWidthPx}px)`);
+        const handler = ()=>setIsAtOrAbove(mql.matches);
+        handler();
+        mql.addEventListener('change', handler);
+        return ()=>mql.removeEventListener('change', handler);
+    }, [
+        minWidthPx
+    ]);
+    return isAtOrAbove;
+}
+const DEFAULT_MESSAGE = 'This view is not available at this screen size. Please use a larger viewport.';
+function ViewportGuard({ minWidth = 769, message = DEFAULT_MESSAGE, className, children }) {
+    const isBelow = useViewportBelow(minWidth);
+    if (!isBelow) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
+        children: children
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: (0, index_cjs_namespaceObject.cn)('fixed inset-0 z-50 flex items-center justify-center', className),
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "absolute inset-0 bg-future-surface backdrop-blur-xl",
+                "aria-hidden": "true"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "relative mx-4 max-w-sm rounded-2xl border border-future-border bg-future-surface-raised px-6 py-5 text-center shadow-xl",
+                role: "status",
+                "aria-live": "polite",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                    className: "text-sm font-medium leading-5 text-future-foreground",
+                    children: message
+                })
+            })
+        ]
+    });
+}
+exports.ViewportGuard = __webpack_exports__.ViewportGuard;
+exports.useViewportAtOrAbove = __webpack_exports__.useViewportAtOrAbove;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "ViewportGuard",
+    "useViewportAtOrAbove"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/custom/viewport-guard.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+/**
+ * Returns true when viewport width is >= minWidthPx (e.g. for "expanded above 1024").
+ */
+export declare function useViewportAtOrAbove(minWidthPx: number): boolean;
+export interface ViewportGuardProps {
+    /** Minimum viewport width (px) at which content is shown. Below this, the overlay is shown. Default 769 (so 768px and below get the overlay). */
+    minWidth?: number;
+    /** Overlay message. Default explains the view is not available at this screen size. */
+    message?: string;
+    /** Optional class for the overlay container. */
+    className?: string;
+    /** Content to guard; hidden behind the overlay when viewport is too narrow. */
+    children?: React.ReactNode;
+}
+/**
+ * Renders children when viewport is at or above `minWidth`, and a full-screen
+ * blurred overlay with a message when viewport is below that width.
+ *
+ * Use for templates or layouts that are not designed for small screens
+ * (e.g. Delegate templates at 540px / 768px).
+ */
+export declare function ViewportGuard({ minWidth, message, className, children, }: ViewportGuardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/custom/viewport-guard.js

@@ -0,0 +1,55 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { cn } from "../../lib/index.js";
+function useViewportBelow(minWidthPx) {
+    const [isBelow, setIsBelow] = useState(false);
+    useEffect(()=>{
+        const mql = window.matchMedia(`(max-width: ${minWidthPx - 1}px)`);
+        const handler = ()=>setIsBelow(mql.matches);
+        handler();
+        mql.addEventListener('change', handler);
+        return ()=>mql.removeEventListener('change', handler);
+    }, [
+        minWidthPx
+    ]);
+    return isBelow;
+}
+function useViewportAtOrAbove(minWidthPx) {
+    const [isAtOrAbove, setIsAtOrAbove] = useState(false);
+    useEffect(()=>{
+        const mql = window.matchMedia(`(min-width: ${minWidthPx}px)`);
+        const handler = ()=>setIsAtOrAbove(mql.matches);
+        handler();
+        mql.addEventListener('change', handler);
+        return ()=>mql.removeEventListener('change', handler);
+    }, [
+        minWidthPx
+    ]);
+    return isAtOrAbove;
+}
+const DEFAULT_MESSAGE = 'This view is not available at this screen size. Please use a larger viewport.';
+function ViewportGuard({ minWidth = 769, message = DEFAULT_MESSAGE, className, children }) {
+    const isBelow = useViewportBelow(minWidth);
+    if (!isBelow) return /*#__PURE__*/ jsx(Fragment, {
+        children: children
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn('fixed inset-0 z-50 flex items-center justify-center', className),
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "absolute inset-0 bg-future-surface backdrop-blur-xl",
+                "aria-hidden": "true"
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "relative mx-4 max-w-sm rounded-2xl border border-future-border bg-future-surface-raised px-6 py-5 text-center shadow-xl",
+                role: "status",
+                "aria-live": "polite",
+                children: /*#__PURE__*/ jsx("p", {
+                    className: "text-sm font-medium leading-5 text-future-foreground",
+                    children: message
+                })
+            })
+        ]
+    });
+}
+export { ViewportGuard, useViewportAtOrAbove };

package/dist/components/ui/button.cjs

@@ -32,7 +32,7 @@ const react_slot_namespaceObject = require("@radix-ui/react-slot");
 const external_class_variance_authority_namespaceObject = require("class-variance-authority");
 const external_react_namespaceObject = require("react");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
-const buttonVariants = (0, external_class_variance_authority_namespaceObject.cva)('inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer', {
+const buttonVariants = (0, external_class_variance_authority_namespaceObject.cva)('inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer', {
     variants: {
         variant: {
             default: 'bg-primary text-primary-foreground hover:bg-primary/90',
@@ -44,8 +44,8 @@ const buttonVariants = (0, external_class_variance_authority_namespaceObject.cva
         },
         size: {
             default: 'h-10 px-4 py-2',
-            sm: 'h-9 rounded-md px-3',
-            lg: 'h-11 rounded-md px-8',
+            sm: 'h-9 px-3',
+            lg: 'h-11 px-8',
             icon: 'h-10 w-10'
         }
     },

package/dist/components/ui/button.js

@@ -3,7 +3,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
 import { cn } from "../../lib/index.js";
-const buttonVariants = cva('inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer', {
+const buttonVariants = cva('inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer', {
     variants: {
         variant: {
             default: 'bg-primary text-primary-foreground hover:bg-primary/90',
@@ -15,8 +15,8 @@ const buttonVariants = cva('inline-flex items-center justify-center gap-2 whites
         },
         size: {
             default: 'h-10 px-4 py-2',
-            sm: 'h-9 rounded-md px-3',
-            lg: 'h-11 rounded-md px-8',
+            sm: 'h-9 px-3',
+            lg: 'h-11 px-8',
             icon: 'h-10 w-10'
         }
     },