@btst/stack 1.10.0 → 1.11.0

package/dist/packages/ui/src/lib/ui-builder/registry/form-field-overrides.cjs

@@ -6,16 +6,20 @@ const childrenSearchableSelect = require('../../../components/ui-builder/interna
 const iconnameField = require('../../../components/ui-builder/internal/form-fields/iconname-field.cjs');
 const textarea = require('../../../components/textarea.cjs');
 const minimalTiptap = require('../../../components/minimal-tiptap/minimal-tiptap.cjs');
+const tooltip = require('../../../components/tooltip.cjs');
+const layerStore = require('../store/layer-store.cjs');
+require('react');
+const types = require('../../../components/ui-builder/types.cjs');
+const LucideIcons = require('lucide-react');
+const button = require('../../../components/button.cjs');
+const dropdownMenu = require('../../../components/dropdown-menu.cjs');
 require('clsx');
 require('tailwind-merge');
-require('../store/layer-store.cjs');
-require('react');
-require('lucide-react');
-require('../../../components/button.cjs');
-require('../store/editor-store.cjs');
+const editorStore = require('../store/editor-store.cjs');
+const card = require('../../../components/card.cjs');
 const breakpointClassnameControl = require('../../../components/ui-builder/internal/form-fields/classname-control/breakpoint-classname-control.cjs');
-require('@radix-ui/react-label');
-require('../../../components/badge.cjs');
+const label = require('../../../components/label.cjs');
+const badge = require('../../../components/badge.cjs');
 
 const classNameFieldOverrides = (layer) => {
   return {
@@ -86,8 +90,9 @@ const iconNameFieldOverrides = (layer) => {
     )
   };
 };
-const childrenAsTextareaFieldOverrides = (layer) => {
+const childrenAsTextareaFieldOverrides = (layer, allowVariableBinding = false) => {
   return {
+    renderParent: allowVariableBinding ? ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(ChildrenVariableBindingWrapper, { children }) : void 0,
     fieldType: ({
       label,
       isRequired,
@@ -103,7 +108,7 @@ const childrenAsTextareaFieldOverrides = (layer) => {
         children: /* @__PURE__ */ jsxRuntime.jsx(
           textarea.Textarea,
           {
-            value: layer.children,
+            value: typeof layer.children === "string" ? layer.children : "",
             onChange: field.onChange,
             ...fieldProps
           }
@@ -112,8 +117,9 @@ const childrenAsTextareaFieldOverrides = (layer) => {
     )
   };
 };
-const childrenAsTipTapFieldOverrides = (layer) => {
+const childrenAsTipTapFieldOverrides = (layer, allowVariableBinding = false) => {
   return {
+    renderParent: allowVariableBinding ? ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(ChildrenVariableBindingWrapper, { children }) : void 0,
     fieldType: ({
       label,
       isRequired,
@@ -132,7 +138,7 @@ const childrenAsTipTapFieldOverrides = (layer) => {
             immediatelyRender: false,
             output: "markdown",
             editable: true,
-            value: layer.children,
+            value: typeof layer.children === "string" ? layer.children : "",
             editorClassName: "focus:outline-none px-4 py-2 h-full",
             onChange: (content) => {
               if (typeof content === "string") {
@@ -175,7 +181,100 @@ function FormFieldWrapper({
     fieldConfigItem?.description && /* @__PURE__ */ jsxRuntime.jsx(form.FormDescription, { children: fieldConfigItem.description })
   ] });
 }
+function ChildrenVariableBindingWrapper({
+  children
+}) {
+  const variables = layerStore.useLayerStore((state) => state.variables);
+  const selectedLayerId = layerStore.useLayerStore((state) => state.selectedLayerId);
+  const findLayerById = layerStore.useLayerStore((state) => state.findLayerById);
+  const isChildrenBindingImmutable = layerStore.useLayerStore((state) => state.isChildrenBindingImmutable);
+  const incrementRevision = editorStore.useEditorStore((state) => state.incrementRevision);
+  const unbindChildrenFromVariable = layerStore.useLayerStore(
+    (state) => state.unbindChildrenFromVariable
+  );
+  const bindChildrenToVariable = layerStore.useLayerStore((state) => state.bindChildrenToVariable);
+  const selectedLayer = findLayerById(selectedLayerId);
+  if (!selectedLayer) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  }
+  const currentValue = selectedLayer.children;
+  const isCurrentlyBound = types.isVariableReference(currentValue);
+  const boundVariable = isCurrentlyBound ? variables.find((v) => v.id === currentValue.__variableRef) : null;
+  const isImmutable = isChildrenBindingImmutable(selectedLayer.id);
+  const handleBindToVariable = (variableId) => {
+    bindChildrenToVariable(selectedLayer.id, variableId);
+    incrementRevision();
+  };
+  const handleUnbind = () => {
+    unbindChildrenFromVariable(selectedLayer.id);
+    incrementRevision();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full gap-2 items-end", children: isCurrentlyBound && boundVariable ? (
+    // Bound state - show variable info and unbind button
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(label.Label, { children: "Children" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-2 w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(card.Card, { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(card.CardContent, { className: "py-1 px-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Link, { className: "h-4 w-4 flex-shrink-0" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 w-full", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: boundVariable.name }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-1.5 py-0.5 bg-muted rounded text-xs font-mono", children: boundVariable.type }),
+              isImmutable && /* @__PURE__ */ jsxRuntime.jsx(badge.Badge, { "data-testid": "immutable-children-badge", className: "rounded", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.LockKeyhole, { strokeWidth: 3, className: "w-3 h-3" }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground truncate", children: String(boundVariable.defaultValue) })
+          ] })
+        ] }) }) }),
+        !isImmutable && /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              variant: "outline",
+              onClick: handleUnbind,
+              className: "px-3 h-10",
+              children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Unlink, { className: "h-4 w-4" })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: "Unbind Variable" })
+        ] })
+      ] })
+    ] })
+  ) : (
+    // Unbound state - show normal field with bind button
+    /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "outline", size: "sm", className: "px-3 h-10", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Link, { className: "h-4 w-4 my-1" }) }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: "Bind Children to Variable" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { align: "end", className: "w-56", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground border-b", children: "Bind Children to Variable" }),
+          variables.filter((v) => v.type === "string").length > 0 ? variables.filter((v) => v.type === "string").map((variable) => /* @__PURE__ */ jsxRuntime.jsx(
+            dropdownMenu.DropdownMenuItem,
+            {
+              onClick: () => handleBindToVariable(variable.id),
+              className: "flex flex-col items-start p-3",
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 w-full", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Link, { className: "h-4 w-4 flex-shrink-0" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 ", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: variable.name }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-1.5 py-0.5 bg-muted rounded text-xs font-mono", children: variable.type })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground truncate", children: String(variable.defaultValue) })
+                ] })
+              ] })
+            },
+            variable.id
+          )) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-xs text-muted-foreground", children: "No string variables defined" })
+        ] })
+      ] }) })
+    ] })
+  ) });
+}
 
+exports.ChildrenVariableBindingWrapper = ChildrenVariableBindingWrapper;
 exports.FormFieldWrapper = FormFieldWrapper;
 exports.childrenAsTextareaFieldOverrides = childrenAsTextareaFieldOverrides;
 exports.childrenAsTipTapFieldOverrides = childrenAsTipTapFieldOverrides;

package/dist/packages/ui/src/lib/ui-builder/registry/form-field-overrides.mjs

@@ -1,19 +1,23 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { FormItem, FormLabel, FormControl, FormDescription } from '../../../components/form.mjs';
 import { ChildrenSearchableSelect } from '../../../components/ui-builder/internal/form-fields/children-searchable-select.mjs';
 import IconNameField from '../../../components/ui-builder/internal/form-fields/iconname-field.mjs';
 import { Textarea } from '../../../components/textarea.mjs';
 import { MinimalTiptapEditor } from '../../../components/minimal-tiptap/minimal-tiptap.mjs';
+import { Tooltip, TooltipTrigger, TooltipContent } from '../../../components/tooltip.mjs';
+import { useLayerStore } from '../store/layer-store.mjs';
+import 'react';
+import { isVariableReference } from '../../../components/ui-builder/types.mjs';
+import { Link, LockKeyhole, Unlink } from 'lucide-react';
+import { Button } from '../../../components/button.mjs';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '../../../components/dropdown-menu.mjs';
 import 'clsx';
 import 'tailwind-merge';
-import '../store/layer-store.mjs';
-import 'react';
-import 'lucide-react';
-import '../../../components/button.mjs';
-import '../store/editor-store.mjs';
+import { useEditorStore } from '../store/editor-store.mjs';
+import { Card, CardContent } from '../../../components/card.mjs';
 import { BreakpointClassNameControl } from '../../../components/ui-builder/internal/form-fields/classname-control/breakpoint-classname-control.mjs';
-import '@radix-ui/react-label';
-import '../../../components/badge.mjs';
+import { Label } from '../../../components/label.mjs';
+import { Badge } from '../../../components/badge.mjs';
 
 const classNameFieldOverrides = (layer) => {
   return {
@@ -84,8 +88,9 @@ const iconNameFieldOverrides = (layer) => {
     )
   };
 };
-const childrenAsTextareaFieldOverrides = (layer) => {
+const childrenAsTextareaFieldOverrides = (layer, allowVariableBinding = false) => {
   return {
+    renderParent: allowVariableBinding ? ({ children }) => /* @__PURE__ */ jsx(ChildrenVariableBindingWrapper, { children }) : void 0,
     fieldType: ({
       label,
       isRequired,
@@ -101,7 +106,7 @@ const childrenAsTextareaFieldOverrides = (layer) => {
         children: /* @__PURE__ */ jsx(
           Textarea,
           {
-            value: layer.children,
+            value: typeof layer.children === "string" ? layer.children : "",
             onChange: field.onChange,
             ...fieldProps
           }
@@ -110,8 +115,9 @@ const childrenAsTextareaFieldOverrides = (layer) => {
     )
   };
 };
-const childrenAsTipTapFieldOverrides = (layer) => {
+const childrenAsTipTapFieldOverrides = (layer, allowVariableBinding = false) => {
   return {
+    renderParent: allowVariableBinding ? ({ children }) => /* @__PURE__ */ jsx(ChildrenVariableBindingWrapper, { children }) : void 0,
     fieldType: ({
       label,
       isRequired,
@@ -130,7 +136,7 @@ const childrenAsTipTapFieldOverrides = (layer) => {
             immediatelyRender: false,
             output: "markdown",
             editable: true,
-            value: layer.children,
+            value: typeof layer.children === "string" ? layer.children : "",
             editorClassName: "focus:outline-none px-4 py-2 h-full",
             onChange: (content) => {
               if (typeof content === "string") {
@@ -173,5 +179,97 @@ function FormFieldWrapper({
     fieldConfigItem?.description && /* @__PURE__ */ jsx(FormDescription, { children: fieldConfigItem.description })
   ] });
 }
+function ChildrenVariableBindingWrapper({
+  children
+}) {
+  const variables = useLayerStore((state) => state.variables);
+  const selectedLayerId = useLayerStore((state) => state.selectedLayerId);
+  const findLayerById = useLayerStore((state) => state.findLayerById);
+  const isChildrenBindingImmutable = useLayerStore((state) => state.isChildrenBindingImmutable);
+  const incrementRevision = useEditorStore((state) => state.incrementRevision);
+  const unbindChildrenFromVariable = useLayerStore(
+    (state) => state.unbindChildrenFromVariable
+  );
+  const bindChildrenToVariable = useLayerStore((state) => state.bindChildrenToVariable);
+  const selectedLayer = findLayerById(selectedLayerId);
+  if (!selectedLayer) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  const currentValue = selectedLayer.children;
+  const isCurrentlyBound = isVariableReference(currentValue);
+  const boundVariable = isCurrentlyBound ? variables.find((v) => v.id === currentValue.__variableRef) : null;
+  const isImmutable = isChildrenBindingImmutable(selectedLayer.id);
+  const handleBindToVariable = (variableId) => {
+    bindChildrenToVariable(selectedLayer.id, variableId);
+    incrementRevision();
+  };
+  const handleUnbind = () => {
+    unbindChildrenFromVariable(selectedLayer.id);
+    incrementRevision();
+  };
+  return /* @__PURE__ */ jsx("div", { className: "flex w-full gap-2 items-end", children: isCurrentlyBound && boundVariable ? (
+    // Bound state - show variable info and unbind button
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 w-full", children: [
+      /* @__PURE__ */ jsx(Label, { children: "Children" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2 w-full", children: [
+        /* @__PURE__ */ jsx(Card, { className: "w-full", children: /* @__PURE__ */ jsx(CardContent, { className: "py-1 px-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full", children: [
+          /* @__PURE__ */ jsx(Link, { className: "h-4 w-4 flex-shrink-0" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-medium", children: boundVariable.name }),
+              /* @__PURE__ */ jsx("span", { className: "px-1.5 py-0.5 bg-muted rounded text-xs font-mono", children: boundVariable.type }),
+              isImmutable && /* @__PURE__ */ jsx(Badge, { "data-testid": "immutable-children-badge", className: "rounded", children: /* @__PURE__ */ jsx(LockKeyhole, { strokeWidth: 3, className: "w-3 h-3" }) })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground truncate", children: String(boundVariable.defaultValue) })
+          ] })
+        ] }) }) }),
+        !isImmutable && /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              onClick: handleUnbind,
+              className: "px-3 h-10",
+              children: /* @__PURE__ */ jsx(Unlink, { className: "h-4 w-4" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: "Unbind Variable" })
+        ] })
+      ] })
+    ] })
+  ) : (
+    // Unbound state - show normal field with bind button
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1", children }),
+      /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+        /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", className: "px-3 h-10", children: /* @__PURE__ */ jsx(Link, { className: "h-4 w-4 my-1" }) }) }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: "Bind Children to Variable" })
+        ] }),
+        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [
+          /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground border-b", children: "Bind Children to Variable" }),
+          variables.filter((v) => v.type === "string").length > 0 ? variables.filter((v) => v.type === "string").map((variable) => /* @__PURE__ */ jsx(
+            DropdownMenuItem,
+            {
+              onClick: () => handleBindToVariable(variable.id),
+              className: "flex flex-col items-start p-3",
+              children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full", children: [
+                /* @__PURE__ */ jsx(Link, { className: "h-4 w-4 flex-shrink-0" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 ", children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-medium", children: variable.name }),
+                    /* @__PURE__ */ jsx("span", { className: "px-1.5 py-0.5 bg-muted rounded text-xs font-mono", children: variable.type })
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground truncate", children: String(variable.defaultValue) })
+                ] })
+              ] })
+            },
+            variable.id
+          )) : /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-xs text-muted-foreground", children: "No string variables defined" })
+        ] })
+      ] }) })
+    ] })
+  ) });
+}
 
-export { FormFieldWrapper, childrenAsTextareaFieldOverrides, childrenAsTipTapFieldOverrides, childrenFieldOverrides, classNameFieldOverrides, commonFieldOverrides, iconNameFieldOverrides };
+export { ChildrenVariableBindingWrapper, FormFieldWrapper, childrenAsTextareaFieldOverrides, childrenAsTipTapFieldOverrides, childrenFieldOverrides, classNameFieldOverrides, commonFieldOverrides, iconNameFieldOverrides };

package/dist/packages/ui/src/lib/ui-builder/store/editor-store.cjs

@@ -6,8 +6,9 @@ const store = (set, get) => ({
   previewMode: "responsive",
   setPreviewMode: (mode) => set({ previewMode: mode }),
   registry: {},
-  initialize: (registry, persistLayerStoreConfig, allowPagesCreation, allowPagesDeletion, allowVariableEditing) => {
-    set((state) => ({ ...state, registry, persistLayerStoreConfig, allowPagesCreation, allowPagesDeletion, allowVariableEditing }));
+  blocks: void 0,
+  initialize: (registry, persistLayerStoreConfig, allowPagesCreation, allowPagesDeletion, allowVariableEditing, blocks) => {
+    set((state) => ({ ...state, registry, persistLayerStoreConfig, allowPagesCreation, allowPagesDeletion, allowVariableEditing, blocks }));
   },
   getComponentDefinition: (type) => {
     const { registry } = get();

package/dist/packages/ui/src/lib/ui-builder/store/editor-store.mjs

@@ -4,8 +4,9 @@ const store = (set, get) => ({
   previewMode: "responsive",
   setPreviewMode: (mode) => set({ previewMode: mode }),
   registry: {},
-  initialize: (registry, persistLayerStoreConfig, allowPagesCreation, allowPagesDeletion, allowVariableEditing) => {
-    set((state) => ({ ...state, registry, persistLayerStoreConfig, allowPagesCreation, allowPagesDeletion, allowVariableEditing }));
+  blocks: void 0,
+  initialize: (registry, persistLayerStoreConfig, allowPagesCreation, allowPagesDeletion, allowVariableEditing, blocks) => {
+    set((state) => ({ ...state, registry, persistLayerStoreConfig, allowPagesCreation, allowPagesDeletion, allowVariableEditing, blocks }));
   },
   getComponentDefinition: (type) => {
     const { registry } = get();

package/dist/packages/ui/src/lib/ui-builder/store/layer-store.cjs

@@ -33,7 +33,7 @@ const store = (set, get) => ({
   initialize: (pages, selectedPageId, selectedLayerId, variables) => {
     set(immer.produce((state) => {
       state.pages = pages;
-      state.selectedPageId = selectedPageId || (pages.length > 0 ? pages[0].id : "");
+      state.selectedPageId = selectedPageId || (pages.length > 0 && pages[0] ? pages[0].id : "");
       state.selectedLayerId = selectedLayerId || null;
       state.variables = variables || [];
       const { registry } = editorStore.useEditorStore.getState();
@@ -47,7 +47,10 @@ const store = (set, get) => ({
               if (!state.immutableBindings[layer.id]) {
                 state.immutableBindings[layer.id] = {};
               }
-              state.immutableBindings[layer.id][binding.propName] = true;
+              const bindings = state.immutableBindings[layer.id];
+              if (bindings) {
+                bindings[binding.propName] = true;
+              }
             }
           }
         }
@@ -86,20 +89,29 @@ const store = (set, get) => ({
       applyVariableBindings: true,
       variables: state.variables
     });
-    const defaultVariableBindings = registry[layerType].defaultVariableBindings || [];
+    const registryEntry = registry[layerType];
+    const defaultVariableBindings = registryEntry?.defaultVariableBindings || [];
     for (const binding of defaultVariableBindings) {
       const variable = state.variables.find((v) => v.id === binding.variableId);
       if (variable && binding.immutable) {
         if (!state.immutableBindings[newLayer.id]) {
           state.immutableBindings[newLayer.id] = {};
         }
-        state.immutableBindings[newLayer.id][binding.propName] = true;
+        const bindings = state.immutableBindings[newLayer.id];
+        if (bindings) {
+          bindings[binding.propName] = true;
+        }
       }
     }
     const updatedPages = layerUtils.addLayer(state.pages, newLayer, parentId, parentPosition);
     state.pages = updatedPages;
     state.selectedLayerId = newLayer.id;
   })),
+  addLayerDirect: (layer, parentId, parentPosition) => set(immer.produce((state) => {
+    const updatedPages = layerUtils.addLayer(state.pages, layer, parentId, parentPosition);
+    state.pages = updatedPages;
+    state.selectedLayerId = layer.id;
+  })),
   addPageLayer: (pageName) => set(immer.produce((state) => {
     const newPage = {
       id: layerUtils.createId(),
@@ -155,10 +167,11 @@ const store = (set, get) => ({
     const isPage = state.pages.some((page) => page.id === layerId);
     if (isPage && pages.length > 1) {
       const newPages = state.pages.filter((page) => page.id !== layerId);
+      const firstPage = newPages[0];
       return {
         ...state,
         pages: newPages,
-        selectedPageId: newPages[0].id
+        selectedPageId: firstPage ? firstPage.id : ""
       };
     }
     const updatedPages = pages.map(
@@ -256,6 +269,7 @@ const store = (set, get) => ({
     const cleanVariableReferences = (layer) => {
       const updatedProps = { ...layer.props };
       let hasChanges = false;
+      let updatedChildren = layer.children;
       Object.entries(updatedProps).forEach(([propName, propValue]) => {
         if (types.isVariableReference(propValue) && propValue.__variableRef === variableId) {
           const layerSchema = registry[layer.type]?.schema;
@@ -269,7 +283,14 @@ const store = (set, get) => ({
           }
         }
       });
-      return hasChanges ? { ...layer, props: updatedProps } : layer;
+      if (types.isVariableReference(layer.children) && layer.children.__variableRef === variableId) {
+        updatedChildren = "";
+        hasChanges = true;
+      }
+      if (hasChanges) {
+        return { ...layer, props: updatedProps, children: updatedChildren };
+      }
+      return layer;
     };
     state.pages = state.pages.map(
       (page) => layerUtils.visitLayer(page, null, cleanVariableReferences)
@@ -302,18 +323,43 @@ const store = (set, get) => ({
     }
     get().updateLayer(layerId, { [propName]: defaultValue });
   },
+  // Bind layer children to a variable reference
+  bindChildrenToVariable: (layerId, variableId) => {
+    get().updateLayer(layerId, {}, { children: { __variableRef: variableId } });
+  },
+  // Unbind layer children from a variable reference and reset to empty string
+  unbindChildrenFromVariable: (layerId) => {
+    if (get().isChildrenBindingImmutable(layerId)) {
+      console.warn(`Cannot unbind immutable children variable binding on layer ${layerId}`);
+      return;
+    }
+    const layer = get().findLayerById(layerId);
+    if (!layer) {
+      console.warn(`Layer with ID ${layerId} not found.`);
+      return;
+    }
+    get().updateLayer(layerId, {}, { children: "" });
+  },
   // Check if a binding is immutable
   isBindingImmutable: (layerId, propName) => {
     const { immutableBindings } = get();
     return immutableBindings[layerId]?.[propName] === true;
   },
+  // Check if children binding is immutable (uses special key '__children__')
+  isChildrenBindingImmutable: (layerId) => {
+    const { immutableBindings } = get();
+    return immutableBindings[layerId]?.["__children__"] === true;
+  },
   // Test helper
   setImmutableBinding: (layerId, propName, isImmutable) => {
     set(immer.produce((state) => {
       if (!state.immutableBindings[layerId]) {
         state.immutableBindings[layerId] = {};
       }
-      state.immutableBindings[layerId][propName] = isImmutable;
+      const bindings = state.immutableBindings[layerId];
+      if (bindings) {
+        bindings[propName] = isImmutable;
+      }
     }));
   },
   moveLayer: (sourceLayerId, targetParentId, targetPosition) => {

package/dist/packages/ui/src/lib/ui-builder/store/layer-store.mjs

@@ -3,7 +3,7 @@ import { persist, createJSONStorage } from '../../../../../../node_modules/.pnpm
 import { produce } from '../../../../../../node_modules/.pnpm/immer@11.1.3/node_modules/immer/dist/immer.mjs';
 import { temporal } from '../../../../../../node_modules/.pnpm/zundo@2.3.0_zustand@4.5.5_@types_react@19.2.6_immer@11.1.3_react@19.2.0_/node_modules/zundo/dist/index.mjs';
 import isDeepEqual from '../../../../../../_virtual/index.mjs';
-import { migrateV1ToV2, migrateV2ToV3, migrateV5ToV6, moveLayer, visitLayer, createId, findLayerRecursive, createComponentLayer, addLayer, hasLayerChildren, duplicateWithNewIdsAndName } from './layer-utils.mjs';
+import { migrateV1ToV2, migrateV2ToV3, migrateV5ToV6, moveLayer, visitLayer, createId, findLayerRecursive, addLayer, createComponentLayer, hasLayerChildren, duplicateWithNewIdsAndName } from './layer-utils.mjs';
 export { countLayers, findAllParentLayersRecursive } from './layer-utils.mjs';
 import { getDefaultProps } from './schema-utils.mjs';
 import { useEditorStore } from './editor-store.mjs';
@@ -32,7 +32,7 @@ const store = (set, get) => ({
   initialize: (pages, selectedPageId, selectedLayerId, variables) => {
     set(produce((state) => {
       state.pages = pages;
-      state.selectedPageId = selectedPageId || (pages.length > 0 ? pages[0].id : "");
+      state.selectedPageId = selectedPageId || (pages.length > 0 && pages[0] ? pages[0].id : "");
       state.selectedLayerId = selectedLayerId || null;
       state.variables = variables || [];
       const { registry } = useEditorStore.getState();
@@ -46,7 +46,10 @@ const store = (set, get) => ({
               if (!state.immutableBindings[layer.id]) {
                 state.immutableBindings[layer.id] = {};
               }
-              state.immutableBindings[layer.id][binding.propName] = true;
+              const bindings = state.immutableBindings[layer.id];
+              if (bindings) {
+                bindings[binding.propName] = true;
+              }
             }
           }
         }
@@ -85,20 +88,29 @@ const store = (set, get) => ({
       applyVariableBindings: true,
       variables: state.variables
     });
-    const defaultVariableBindings = registry[layerType].defaultVariableBindings || [];
+    const registryEntry = registry[layerType];
+    const defaultVariableBindings = registryEntry?.defaultVariableBindings || [];
     for (const binding of defaultVariableBindings) {
       const variable = state.variables.find((v) => v.id === binding.variableId);
       if (variable && binding.immutable) {
         if (!state.immutableBindings[newLayer.id]) {
           state.immutableBindings[newLayer.id] = {};
         }
-        state.immutableBindings[newLayer.id][binding.propName] = true;
+        const bindings = state.immutableBindings[newLayer.id];
+        if (bindings) {
+          bindings[binding.propName] = true;
+        }
       }
     }
     const updatedPages = addLayer(state.pages, newLayer, parentId, parentPosition);
     state.pages = updatedPages;
     state.selectedLayerId = newLayer.id;
   })),
+  addLayerDirect: (layer, parentId, parentPosition) => set(produce((state) => {
+    const updatedPages = addLayer(state.pages, layer, parentId, parentPosition);
+    state.pages = updatedPages;
+    state.selectedLayerId = layer.id;
+  })),
   addPageLayer: (pageName) => set(produce((state) => {
     const newPage = {
       id: createId(),
@@ -154,10 +166,11 @@ const store = (set, get) => ({
     const isPage = state.pages.some((page) => page.id === layerId);
     if (isPage && pages.length > 1) {
       const newPages = state.pages.filter((page) => page.id !== layerId);
+      const firstPage = newPages[0];
       return {
         ...state,
         pages: newPages,
-        selectedPageId: newPages[0].id
+        selectedPageId: firstPage ? firstPage.id : ""
       };
     }
     const updatedPages = pages.map(
@@ -255,6 +268,7 @@ const store = (set, get) => ({
     const cleanVariableReferences = (layer) => {
       const updatedProps = { ...layer.props };
       let hasChanges = false;
+      let updatedChildren = layer.children;
       Object.entries(updatedProps).forEach(([propName, propValue]) => {
         if (isVariableReference(propValue) && propValue.__variableRef === variableId) {
           const layerSchema = registry[layer.type]?.schema;
@@ -268,7 +282,14 @@ const store = (set, get) => ({
           }
         }
       });
-      return hasChanges ? { ...layer, props: updatedProps } : layer;
+      if (isVariableReference(layer.children) && layer.children.__variableRef === variableId) {
+        updatedChildren = "";
+        hasChanges = true;
+      }
+      if (hasChanges) {
+        return { ...layer, props: updatedProps, children: updatedChildren };
+      }
+      return layer;
     };
     state.pages = state.pages.map(
       (page) => visitLayer(page, null, cleanVariableReferences)
@@ -301,18 +322,43 @@ const store = (set, get) => ({
     }
     get().updateLayer(layerId, { [propName]: defaultValue });
   },
+  // Bind layer children to a variable reference
+  bindChildrenToVariable: (layerId, variableId) => {
+    get().updateLayer(layerId, {}, { children: { __variableRef: variableId } });
+  },
+  // Unbind layer children from a variable reference and reset to empty string
+  unbindChildrenFromVariable: (layerId) => {
+    if (get().isChildrenBindingImmutable(layerId)) {
+      console.warn(`Cannot unbind immutable children variable binding on layer ${layerId}`);
+      return;
+    }
+    const layer = get().findLayerById(layerId);
+    if (!layer) {
+      console.warn(`Layer with ID ${layerId} not found.`);
+      return;
+    }
+    get().updateLayer(layerId, {}, { children: "" });
+  },
   // Check if a binding is immutable
   isBindingImmutable: (layerId, propName) => {
     const { immutableBindings } = get();
     return immutableBindings[layerId]?.[propName] === true;
   },
+  // Check if children binding is immutable (uses special key '__children__')
+  isChildrenBindingImmutable: (layerId) => {
+    const { immutableBindings } = get();
+    return immutableBindings[layerId]?.["__children__"] === true;
+  },
   // Test helper
   setImmutableBinding: (layerId, propName, isImmutable) => {
     set(produce((state) => {
       if (!state.immutableBindings[layerId]) {
         state.immutableBindings[layerId] = {};
       }
-      state.immutableBindings[layerId][propName] = isImmutable;
+      const bindings = state.immutableBindings[layerId];
+      if (bindings) {
+        bindings[propName] = isImmutable;
+      }
     }));
   },
   moveLayer: (sourceLayerId, targetParentId, targetPosition) => {