@btst/stack 2.0.1 → 2.1.0

package/dist/node_modules/.pnpm/{react-day-picker@9.13.0_react@19.2.0 → react-day-picker@9.13.2_react@19.2.0}/node_modules/react-day-picker/dist/esm/UI.cjs

@@ -68,7 +68,7 @@ exports.UI = void 0;
     /** The dropdown with the years. */
     UI["YearsDropdown"] = "years_dropdown";
 })(exports.UI || (exports.UI = {}));
-/** Enum representing flags for the {@link UI.Day} element. */
+/** Enum representing flags for the {@link UI | UI.Day} element. */
 exports.DayFlag = void 0;
 (function (DayFlag) {
     /** The day is disabled. */
@@ -83,7 +83,7 @@ exports.DayFlag = void 0;
     DayFlag["today"] = "today";
 })(exports.DayFlag || (exports.DayFlag = {}));
 /**
- * Enum representing selection states that can be applied to the {@link UI.Day}
+ * Enum representing selection states that can be applied to the {@link UI | UI.Day}
  * element in selection mode.
  */
 exports.SelectionState = void 0;

package/dist/node_modules/.pnpm/{react-day-picker@9.13.0_react@19.2.0 → react-day-picker@9.13.2_react@19.2.0}/node_modules/react-day-picker/dist/esm/UI.mjs

@@ -66,7 +66,7 @@ var UI;
     /** The dropdown with the years. */
     UI["YearsDropdown"] = "years_dropdown";
 })(UI || (UI = {}));
-/** Enum representing flags for the {@link UI.Day} element. */
+/** Enum representing flags for the {@link UI | UI.Day} element. */
 var DayFlag;
 (function (DayFlag) {
     /** The day is disabled. */
@@ -81,7 +81,7 @@ var DayFlag;
     DayFlag["today"] = "today";
 })(DayFlag || (DayFlag = {}));
 /**
- * Enum representing selection states that can be applied to the {@link UI.Day}
+ * Enum representing selection states that can be applied to the {@link UI | UI.Day}
  * element in selection mode.
  */
 var SelectionState;

package/dist/packages/ui/src/components/calendar.cjs

@@ -6,8 +6,8 @@ const React = require('react');
 const LucideIcons = require('lucide-react');
 const utils = require('../lib/utils.cjs');
 const button = require('./button.cjs');
-const getDefaultClassNames = require('../../../../node_modules/.pnpm/react-day-picker@9.13.0_react@19.2.0/node_modules/react-day-picker/dist/esm/helpers/getDefaultClassNames.cjs');
-const DayPicker = require('../../../../node_modules/.pnpm/react-day-picker@9.13.0_react@19.2.0/node_modules/react-day-picker/dist/esm/DayPicker.cjs');
+const getDefaultClassNames = require('../../../../node_modules/.pnpm/react-day-picker@9.13.2_react@19.2.0/node_modules/react-day-picker/dist/esm/helpers/getDefaultClassNames.cjs');
+const DayPicker = require('../../../../node_modules/.pnpm/react-day-picker@9.13.2_react@19.2.0/node_modules/react-day-picker/dist/esm/DayPicker.cjs');
 
 function _interopNamespaceCompat(e) {
   if (e && typeof e === 'object' && 'default' in e) return e;

package/dist/packages/ui/src/components/calendar.mjs

@@ -4,8 +4,8 @@ import * as React from 'react';
 import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from 'lucide-react';
 import { cn } from '../lib/utils.mjs';
 import { buttonVariants, Button } from './button.mjs';
-import { getDefaultClassNames } from '../../../../node_modules/.pnpm/react-day-picker@9.13.0_react@19.2.0/node_modules/react-day-picker/dist/esm/helpers/getDefaultClassNames.mjs';
-import { DayPicker } from '../../../../node_modules/.pnpm/react-day-picker@9.13.0_react@19.2.0/node_modules/react-day-picker/dist/esm/DayPicker.mjs';
+import { getDefaultClassNames } from '../../../../node_modules/.pnpm/react-day-picker@9.13.2_react@19.2.0/node_modules/react-day-picker/dist/esm/helpers/getDefaultClassNames.mjs';
+import { DayPicker } from '../../../../node_modules/.pnpm/react-day-picker@9.13.2_react@19.2.0/node_modules/react-day-picker/dist/esm/DayPicker.mjs';
 
 function Calendar({
   className,

package/dist/packages/ui/src/components/sonner.cjs

@@ -0,0 +1,34 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const LucideIcons = require('lucide-react');
+const index = require('../../../../node_modules/.pnpm/next-themes@0.4.6_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/next-themes/dist/index.cjs');
+const sonner = require('sonner');
+
+const Toaster = ({ ...props }) => {
+  const { theme = "system" } = index.useTheme();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    sonner.Toaster,
+    {
+      theme,
+      className: "toaster group",
+      icons: {
+        success: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.CircleCheckIcon, { className: "size-4" }),
+        info: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.InfoIcon, { className: "size-4" }),
+        warning: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.TriangleAlertIcon, { className: "size-4" }),
+        error: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.OctagonXIcon, { className: "size-4" }),
+        loading: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Loader2Icon, { className: "size-4 animate-spin" })
+      },
+      style: {
+        "--normal-bg": "var(--popover)",
+        "--normal-text": "var(--popover-foreground)",
+        "--normal-border": "var(--border)",
+        "--border-radius": "var(--radius)"
+      },
+      ...props
+    }
+  );
+};
+
+exports.Toaster = Toaster;

package/dist/packages/ui/src/components/sonner.mjs

@@ -0,0 +1,32 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Loader2Icon, OctagonXIcon, TriangleAlertIcon, InfoIcon, CircleCheckIcon } from 'lucide-react';
+import { useTheme as z } from '../../../../node_modules/.pnpm/next-themes@0.4.6_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/next-themes/dist/index.mjs';
+import { Toaster as Toaster$1 } from 'sonner';
+
+const Toaster = ({ ...props }) => {
+  const { theme = "system" } = z();
+  return /* @__PURE__ */ jsx(
+    Toaster$1,
+    {
+      theme,
+      className: "toaster group",
+      icons: {
+        success: /* @__PURE__ */ jsx(CircleCheckIcon, { className: "size-4" }),
+        info: /* @__PURE__ */ jsx(InfoIcon, { className: "size-4" }),
+        warning: /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "size-4" }),
+        error: /* @__PURE__ */ jsx(OctagonXIcon, { className: "size-4" }),
+        loading: /* @__PURE__ */ jsx(Loader2Icon, { className: "size-4 animate-spin" })
+      },
+      style: {
+        "--normal-bg": "var(--popover)",
+        "--normal-text": "var(--popover-foreground)",
+        "--normal-border": "var(--border)",
+        "--border-radius": "var(--radius)"
+      },
+      ...props
+    }
+  );
+};
+
+export { Toaster };

package/dist/packages/ui/src/components/ui-builder/components/code-panel.cjs

@@ -12,6 +12,7 @@ const label = require('../../label.cjs');
 
 function CodePanel({ className }) {
   const componentRegistry = editorStore.useEditorStore((state) => state.registry);
+  const functionRegistry = editorStore.useEditorStore((state) => state.functionRegistry);
   const selectedPageId = layerStore.useLayerStore((state) => state.selectedPageId);
   const findLayerById = layerStore.useLayerStore((state) => state.findLayerById);
   const variables = layerStore.useLayerStore((state) => state.variables);
@@ -24,7 +25,7 @@ function CodePanel({ className }) {
       defaultValue: v.defaultValue
     }));
     return {
-      react: templates.pageLayerToCode(page, componentRegistry, variables),
+      react: templates.pageLayerToCode(page, componentRegistry, variables, functionRegistry),
       variables: JSON.stringify(
         serializedVariables,
         (key, value) => typeof value === "function" ? void 0 : value,
@@ -36,7 +37,7 @@ function CodePanel({ className }) {
         2
       )
     };
-  }, [page, componentRegistry, variables]);
+  }, [page, componentRegistry, variables, functionRegistry]);
   return /* @__PURE__ */ jsxRuntime.jsx(CodeContent, { codeBlocks, className });
 }
 const CodeContent = ({

package/dist/packages/ui/src/components/ui-builder/components/code-panel.mjs

@@ -10,6 +10,7 @@ import { Label } from '../../label.mjs';
 
 function CodePanel({ className }) {
   const componentRegistry = useEditorStore((state) => state.registry);
+  const functionRegistry = useEditorStore((state) => state.functionRegistry);
   const selectedPageId = useLayerStore((state) => state.selectedPageId);
   const findLayerById = useLayerStore((state) => state.findLayerById);
   const variables = useLayerStore((state) => state.variables);
@@ -22,7 +23,7 @@ function CodePanel({ className }) {
       defaultValue: v.defaultValue
     }));
     return {
-      react: pageLayerToCode(page, componentRegistry, variables),
+      react: pageLayerToCode(page, componentRegistry, variables, functionRegistry),
       variables: JSON.stringify(
         serializedVariables,
         (key, value) => typeof value === "function" ? void 0 : value,
@@ -34,7 +35,7 @@ function CodePanel({ className }) {
         2
       )
     };
-  }, [page, componentRegistry, variables]);
+  }, [page, componentRegistry, variables, functionRegistry]);
   return /* @__PURE__ */ jsx(CodeContent, { codeBlocks, className });
 }
 const CodeContent = ({

package/dist/packages/ui/src/components/ui-builder/index.cjs

@@ -20,6 +20,7 @@ const tailwindThemePanel = require('./internal/tailwind-theme-panel.cjs');
 const configPanel = require('./internal/config-panel.cjs');
 const variablesPanel = require('./internal/variables-panel.cjs');
 const tooltip = require('../tooltip.cjs');
+const sonner = require('../sonner.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
@@ -39,7 +40,8 @@ const UIBuilder = ({
   navLeftChildren,
   navRightChildren,
   showExport = true,
-  blocks
+  blocks,
+  functionRegistry
 }) => {
   const layerStore$1 = useStore.useStore(layerStore.useLayerStore, (state) => state);
   const editorStore$1 = useStore.useStore(editorStore.useEditorStore, (state) => state);
@@ -58,7 +60,7 @@ const UIBuilder = ({
   }, [userPanelConfig, memoizedDefaultTabsContent, navLeftChildren, navRightChildren, showExport]);
   React.useEffect(() => {
     if (editorStore$1 && componentRegistry && !editorStoreInitialized) {
-      editorStore$1.initialize(componentRegistry, persistLayerStore, allowPagesCreation, allowPagesDeletion, allowVariableEditing, blocks);
+      editorStore$1.initialize(componentRegistry, persistLayerStore, allowPagesCreation, allowPagesDeletion, allowVariableEditing, blocks, functionRegistry);
       setEditorStoreInitialized(true);
     }
   }, [
@@ -69,7 +71,8 @@ const UIBuilder = ({
     allowPagesCreation,
     allowPagesDeletion,
     allowVariableEditing,
-    blocks
+    blocks,
+    functionRegistry
   ]);
   React.useEffect(() => {
     if (layerStore$1 && editorStore$1) {
@@ -110,7 +113,10 @@ const UIBuilder = ({
       defaultTheme: "system",
       enableSystem: true,
       disableTransitionOnChange: true,
-      children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipProvider, { children: layout })
+      children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.TooltipProvider, { children: [
+        layout,
+        /* @__PURE__ */ jsxRuntime.jsx(sonner.Toaster, { position: "bottom-right" })
+      ] })
     }
   );
 };

package/dist/packages/ui/src/components/ui-builder/index.mjs

@@ -16,6 +16,7 @@ import { TailwindThemePanel } from './internal/tailwind-theme-panel.mjs';
 import { ConfigPanel } from './internal/config-panel.mjs';
 import { VariablesPanel } from './internal/variables-panel.mjs';
 import { TooltipProvider } from '../tooltip.mjs';
+import { Toaster } from '../sonner.mjs';
 
 const UIBuilder = ({
   initialLayers,
@@ -31,7 +32,8 @@ const UIBuilder = ({
   navLeftChildren,
   navRightChildren,
   showExport = true,
-  blocks
+  blocks,
+  functionRegistry
 }) => {
   const layerStore = useStore(useLayerStore, (state) => state);
   const editorStore = useStore(useEditorStore, (state) => state);
@@ -50,7 +52,7 @@ const UIBuilder = ({
   }, [userPanelConfig, memoizedDefaultTabsContent, navLeftChildren, navRightChildren, showExport]);
   useEffect(() => {
     if (editorStore && componentRegistry && !editorStoreInitialized) {
-      editorStore.initialize(componentRegistry, persistLayerStore, allowPagesCreation, allowPagesDeletion, allowVariableEditing, blocks);
+      editorStore.initialize(componentRegistry, persistLayerStore, allowPagesCreation, allowPagesDeletion, allowVariableEditing, blocks, functionRegistry);
       setEditorStoreInitialized(true);
     }
   }, [
@@ -61,7 +63,8 @@ const UIBuilder = ({
     allowPagesCreation,
     allowPagesDeletion,
     allowVariableEditing,
-    blocks
+    blocks,
+    functionRegistry
   ]);
   useEffect(() => {
     if (layerStore && editorStore) {
@@ -102,7 +105,10 @@ const UIBuilder = ({
       defaultTheme: "system",
       enableSystem: true,
       disableTransitionOnChange: true,
-      children: /* @__PURE__ */ jsx(TooltipProvider, { children: layout })
+      children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+        layout,
+        /* @__PURE__ */ jsx(Toaster, { position: "bottom-right" })
+      ] })
     }
   );
 };

package/dist/packages/ui/src/components/ui-builder/internal/components/element-selector.cjs

@@ -18,6 +18,7 @@ const utils = require('../../../../lib/utils.cjs');
 const floatingUi_react = require('../../../../../../../node_modules/.pnpm/@floating-ui_react@0.27.16_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@floating-ui/react/dist/floating-ui.react.cjs');
 const getScrollParent = require('../../../../lib/ui-builder/utils/get-scroll-parent.cjs');
 const autoFrame = require('../canvas/auto-frame.cjs');
+const layerContextMenu = require('./layer-context-menu.cjs');
 const floatingUi_reactDom = require('../../../../../../../node_modules/.pnpm/@floating-ui_react-dom@2.1.6_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs');
 const floatingUi_dom = require('../../../../../../../node_modules/.pnpm/@floating-ui_dom@1.7.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.cjs');
 
@@ -29,8 +30,6 @@ const ElementSelector = ({
   isSelected,
   zIndex,
   onSelectElement,
-  onDuplicateLayer,
-  onDeleteLayer,
   children,
   isPageLayer = false
 }) => {
@@ -86,34 +85,34 @@ const ElementSelector = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(MeasureRange, { debug: false, onChange: handleBoundingRectChange, children }),
     boundingRect && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+      layerContextMenu.LayerContextMenu,
       {
-        onClick: handleClick,
-        onMouseDown: handlePointerEvent,
-        onMouseUp: handlePointerEvent,
-        onDoubleClick: handlePointerEvent,
-        onContextMenu: handlePointerEvent,
-        ref: refs.setReference,
-        className: utils.cn(
-          "fixed box-border hover:border-blue-300 hover:border-2 hover:bg-blue-300/20 hover:shadow-md hover:shadow-blue-500/20 cursor-default",
-          isBeingDragged ? "border-2 border-green-500 border-dashed shadow-lg opacity-70 bg-orange-50/20" : isSelected ? "border-2 border-blue-500 hover:border-blue-500 hover:bg-transparent  hover:shadow-none" : ""
-        ),
-        style: overlayStyle
+        layerId: layer.id,
+        isSelected,
+        onSelect: onSelectElement,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            onClick: handleClick,
+            onMouseDown: handlePointerEvent,
+            onMouseUp: handlePointerEvent,
+            onDoubleClick: handlePointerEvent,
+            ref: refs.setReference,
+            className: utils.cn(
+              "fixed box-border hover:border-blue-300 hover:border-2 hover:bg-blue-300/20 hover:shadow-md hover:shadow-blue-500/20 cursor-default",
+              isBeingDragged ? "border-2 border-green-500 border-dashed shadow-lg opacity-70 bg-orange-50/20" : isSelected ? "border-2 border-blue-500 hover:border-blue-500 hover:bg-transparent  hover:shadow-none" : ""
+            ),
+            style: overlayStyle
+          }
+        )
       }
     ),
     isSelected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "z-[9999]", ref: refs.setFloating, style: floatingStyles, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center bg-blue-500", children: [
       !isPageLayer && isSelected && /* @__PURE__ */ jsxRuntime.jsx(dragHandle.DragHandle, { layerId: layer.id, layerType: layer.type }),
       !isBeingDragged && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-white  px-[1px] whitespace-nowrap cursor-default", children: layer.name?.toLowerCase().startsWith(layer.type.toLowerCase()) ? layer.type.replaceAll("_", "") : `${layer.name} (${layer.type.replaceAll("_", "")})` }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-white px-[1px] whitespace-nowrap cursor-default", children: layer.name?.toLowerCase().startsWith(layer.type.toLowerCase()) ? layer.type.replaceAll("_", "") : `${layer.name} (${layer.type.replaceAll("_", "")})` }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-white/20 ml-1" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          layerMenu.LayerMenu,
-          {
-            layerId: layer.id,
-            handleDuplicateComponent: onDuplicateLayer,
-            handleDeleteComponent: onDeleteLayer
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsx(layerMenu.LayerMenu, { layerId: layer.id })
       ] })
     ] }) })
   ] });

package/dist/packages/ui/src/components/ui-builder/internal/components/element-selector.mjs

@@ -16,6 +16,7 @@ import { cn } from '../../../../lib/utils.mjs';
 import { useFloating } from '../../../../../../../node_modules/.pnpm/@floating-ui_react@0.27.16_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@floating-ui/react/dist/floating-ui.react.mjs';
 import { getScrollParent } from '../../../../lib/ui-builder/utils/get-scroll-parent.mjs';
 import { useFrame } from '../canvas/auto-frame.mjs';
+import { LayerContextMenu } from './layer-context-menu.mjs';
 import { offset, shift, limitShift } from '../../../../../../../node_modules/.pnpm/@floating-ui_react-dom@2.1.6_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs';
 import { autoUpdate } from '../../../../../../../node_modules/.pnpm/@floating-ui_dom@1.7.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs';
 
@@ -27,8 +28,6 @@ const ElementSelector = ({
   isSelected,
   zIndex,
   onSelectElement,
-  onDuplicateLayer,
-  onDeleteLayer,
   children,
   isPageLayer = false
 }) => {
@@ -84,34 +83,34 @@ const ElementSelector = ({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(MeasureRange, { debug: false, onChange: handleBoundingRectChange, children }),
     boundingRect && /* @__PURE__ */ jsx(
-      "div",
+      LayerContextMenu,
       {
-        onClick: handleClick,
-        onMouseDown: handlePointerEvent,
-        onMouseUp: handlePointerEvent,
-        onDoubleClick: handlePointerEvent,
-        onContextMenu: handlePointerEvent,
-        ref: refs.setReference,
-        className: cn(
-          "fixed box-border hover:border-blue-300 hover:border-2 hover:bg-blue-300/20 hover:shadow-md hover:shadow-blue-500/20 cursor-default",
-          isBeingDragged ? "border-2 border-green-500 border-dashed shadow-lg opacity-70 bg-orange-50/20" : isSelected ? "border-2 border-blue-500 hover:border-blue-500 hover:bg-transparent  hover:shadow-none" : ""
-        ),
-        style: overlayStyle
+        layerId: layer.id,
+        isSelected,
+        onSelect: onSelectElement,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            onClick: handleClick,
+            onMouseDown: handlePointerEvent,
+            onMouseUp: handlePointerEvent,
+            onDoubleClick: handlePointerEvent,
+            ref: refs.setReference,
+            className: cn(
+              "fixed box-border hover:border-blue-300 hover:border-2 hover:bg-blue-300/20 hover:shadow-md hover:shadow-blue-500/20 cursor-default",
+              isBeingDragged ? "border-2 border-green-500 border-dashed shadow-lg opacity-70 bg-orange-50/20" : isSelected ? "border-2 border-blue-500 hover:border-blue-500 hover:bg-transparent  hover:shadow-none" : ""
+            ),
+            style: overlayStyle
+          }
+        )
       }
     ),
     isSelected && /* @__PURE__ */ jsx("div", { className: "z-[9999]", ref: refs.setFloating, style: floatingStyles, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center bg-blue-500", children: [
       !isPageLayer && isSelected && /* @__PURE__ */ jsx(DragHandle, { layerId: layer.id, layerType: layer.type }),
       !isBeingDragged && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("span", { className: "text-xs text-white  px-[1px] whitespace-nowrap cursor-default", children: layer.name?.toLowerCase().startsWith(layer.type.toLowerCase()) ? layer.type.replaceAll("_", "") : `${layer.name} (${layer.type.replaceAll("_", "")})` }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-white px-[1px] whitespace-nowrap cursor-default", children: layer.name?.toLowerCase().startsWith(layer.type.toLowerCase()) ? layer.type.replaceAll("_", "") : `${layer.name} (${layer.type.replaceAll("_", "")})` }),
         /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-white/20 ml-1" }),
-        /* @__PURE__ */ jsx(
-          LayerMenu,
-          {
-            layerId: layer.id,
-            handleDuplicateComponent: onDuplicateLayer,
-            handleDeleteComponent: onDeleteLayer
-          }
-        )
+        /* @__PURE__ */ jsx(LayerMenu, { layerId: layer.id })
       ] })
     ] }) })
   ] });