@btst/stack 2.5.4 → 2.5.6

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

@@ -20,6 +20,7 @@ const card = require('../../../components/card.cjs');
 const breakpointClassnameControl = require('../../../components/ui-builder/internal/form-fields/classname-control/breakpoint-classname-control.cjs');
 const label = require('../../../components/label.cjs');
 const badge = require('../../../components/badge.cjs');
+const select = require('../../../components/select.cjs');
 
 const classNameFieldOverrides = (layer) => {
   return {
@@ -167,6 +168,210 @@ const commonFieldOverrides = (allowBinding = true) => {
   memoizedCommonFieldOverrides.set(allowBinding, overrides);
   return overrides;
 };
+function FunctionPropField({
+  propName,
+  label,
+  isRequired,
+  fieldConfigItem
+}) {
+  const selectedLayerId = layerStore.useLayerStore((state) => state.selectedLayerId);
+  const findLayerById = layerStore.useLayerStore((state) => state.findLayerById);
+  const updateLayer = layerStore.useLayerStore((state) => state.updateLayer);
+  const incrementRevision = editorStore.useEditorStore((state) => state.incrementRevision);
+  const functionRegistry = editorStore.useEditorStore((state) => state.functionRegistry);
+  const unbindPropFromVariable = layerStore.useLayerStore(
+    (state) => state.unbindPropFromVariable
+  );
+  const selectedLayer = findLayerById(selectedLayerId);
+  if (!selectedLayer || !functionRegistry) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      FormFieldWrapper,
+      {
+        label,
+        isRequired,
+        fieldConfigItem,
+        children: /* @__PURE__ */ jsxRuntime.jsx(select.Select, { disabled: true, children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, { placeholder: "No function registry available" }) }) })
+      }
+    );
+  }
+  const functionEntries = Object.entries(functionRegistry);
+  const getCurrentFunctionId = () => {
+    const directFuncId = selectedLayer.props[`__function_${propName}`];
+    if (typeof directFuncId === "string") {
+      return directFuncId;
+    }
+    return "";
+  };
+  const handleValueChange = (value) => {
+    if (value === "__none__") {
+      unbindPropFromVariable(selectedLayer.id, propName);
+      updateLayer(selectedLayer.id, {
+        [`__function_${propName}`]: void 0,
+        [propName]: void 0
+      });
+      incrementRevision();
+      return;
+    }
+    const funcDef = functionRegistry[value];
+    if (funcDef) {
+      unbindPropFromVariable(selectedLayer.id, propName);
+      updateLayer(selectedLayer.id, {
+        [propName]: funcDef.fn,
+        [`__function_${propName}`]: value
+      });
+      incrementRevision();
+    }
+  };
+  const currentFunctionId = getCurrentFunctionId();
+  const getDisplayText = () => {
+    if (currentFunctionId) {
+      const funcDef = functionRegistry[currentFunctionId];
+      return funcDef?.name || currentFunctionId;
+    }
+    return "Select a function...";
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FormFieldWrapper,
+    {
+      label,
+      isRequired,
+      fieldConfigItem,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        select.Select,
+        {
+          value: currentFunctionId,
+          onValueChange: handleValueChange,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { className: "w-full mb-0", children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, { placeholder: "Select a function...", children: getDisplayText() }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(select.SelectContent, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "__none__", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "None (clear)" }) }),
+              functionEntries.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: functionEntries.map(([id, funcDef]) => /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: id, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: funcDef.name }),
+                funcDef.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: funcDef.description })
+              ] }) }, id)) })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+const functionPropFieldOverrides = (propName) => {
+  return {
+    renderParent: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(VariableBindingWrapper, { propName, isFunctionProp: true, children }),
+    fieldType: (props) => /* @__PURE__ */ jsxRuntime.jsx(FunctionPropField, { propName, ...props })
+  };
+};
+function VariableBindingWrapper({
+  propName,
+  children,
+  isFunctionProp = false
+}) {
+  const variables = layerStore.useLayerStore((state) => state.variables);
+  const selectedLayerId = layerStore.useLayerStore((state) => state.selectedLayerId);
+  const findLayerById = layerStore.useLayerStore((state) => state.findLayerById);
+  const isBindingImmutable = layerStore.useLayerStore((state) => state.isBindingImmutable);
+  const incrementRevision = editorStore.useEditorStore((state) => state.incrementRevision);
+  const functionRegistry = editorStore.useEditorStore((state) => state.functionRegistry);
+  const unbindPropFromVariable = layerStore.useLayerStore(
+    (state) => state.unbindPropFromVariable
+  );
+  const bindPropToVariable = layerStore.useLayerStore((state) => state.bindPropToVariable);
+  const selectedLayer = findLayerById(selectedLayerId);
+  if (!selectedLayer) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  }
+  const filteredVariables = variables.filter(
+    (v) => isFunctionProp ? v.type === "function" : v.type !== "function"
+  );
+  const currentValue = selectedLayer.props[propName];
+  const isCurrentlyBound = types.isVariableReference(currentValue);
+  const boundVariable = isCurrentlyBound ? variables.find((v) => v.id === currentValue.__variableRef) : null;
+  const isImmutable = isBindingImmutable(selectedLayer.id, propName);
+  const getFunctionDisplayValue = (variable) => {
+    if (variable.type === "function" && functionRegistry) {
+      const funcId = String(variable.defaultValue);
+      const funcDef = functionRegistry[funcId];
+      return funcDef ? funcDef.name : funcId;
+    }
+    return String(variable.defaultValue);
+  };
+  const handleBindToVariable = (variableId) => {
+    bindPropToVariable(selectedLayer.id, propName, variableId);
+    incrementRevision();
+  };
+  const handleUnbind = () => {
+    unbindPropFromVariable(selectedLayer.id, propName);
+    incrementRevision();
+  };
+  const emptyMessage = isFunctionProp ? "No function variables defined" : "No variables defined";
+  const bindLabel = isFunctionProp ? "Bind to Function Variable" : "Bind to Variable";
+  const tooltipLabel = isFunctionProp ? "Bind Function" : "Bind Variable";
+  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: propName.charAt(0).toUpperCase() + propName.slice(1) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-2 w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(card.Card, { className: "w-full overflow-hidden min-w-0", 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-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: getFunctionDisplayValue(boundVariable) })
+          ] })
+        ] }) }) }),
+        !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",
+              "data-testid": "unbind-variable-button",
+              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", "data-testid": "bind-variable-button", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Link, { className: "h-4 w-4 my-1" }) }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: tooltipLabel })
+        ] }),
+        /* @__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: bindLabel }),
+          filteredVariables.length > 0 ? filteredVariables.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: getFunctionDisplayValue(variable) })
+                ] })
+              ] })
+            },
+            variable.id
+          )) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-xs text-muted-foreground", children: emptyMessage })
+        ] })
+      ] }) })
+    ] })
+  ) });
+}
 function FormFieldWrapper({
   label,
   isRequired,
@@ -278,9 +483,11 @@ function ChildrenVariableBindingWrapper({
 
 exports.ChildrenVariableBindingWrapper = ChildrenVariableBindingWrapper;
 exports.FormFieldWrapper = FormFieldWrapper;
+exports.VariableBindingWrapper = VariableBindingWrapper;
 exports.childrenAsTextareaFieldOverrides = childrenAsTextareaFieldOverrides;
 exports.childrenAsTipTapFieldOverrides = childrenAsTipTapFieldOverrides;
 exports.childrenFieldOverrides = childrenFieldOverrides;
 exports.classNameFieldOverrides = classNameFieldOverrides;
 exports.commonFieldOverrides = commonFieldOverrides;
+exports.functionPropFieldOverrides = functionPropFieldOverrides;
 exports.iconNameFieldOverrides = iconNameFieldOverrides;

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

@@ -18,6 +18,7 @@ import { Card, CardContent } from '../../../components/card.mjs';
 import { BreakpointClassNameControl } from '../../../components/ui-builder/internal/form-fields/classname-control/breakpoint-classname-control.mjs';
 import { Label } from '../../../components/label.mjs';
 import { Badge } from '../../../components/badge.mjs';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../../../components/select.mjs';
 
 const classNameFieldOverrides = (layer) => {
   return {
@@ -165,6 +166,210 @@ const commonFieldOverrides = (allowBinding = true) => {
   memoizedCommonFieldOverrides.set(allowBinding, overrides);
   return overrides;
 };
+function FunctionPropField({
+  propName,
+  label,
+  isRequired,
+  fieldConfigItem
+}) {
+  const selectedLayerId = useLayerStore((state) => state.selectedLayerId);
+  const findLayerById = useLayerStore((state) => state.findLayerById);
+  const updateLayer = useLayerStore((state) => state.updateLayer);
+  const incrementRevision = useEditorStore((state) => state.incrementRevision);
+  const functionRegistry = useEditorStore((state) => state.functionRegistry);
+  const unbindPropFromVariable = useLayerStore(
+    (state) => state.unbindPropFromVariable
+  );
+  const selectedLayer = findLayerById(selectedLayerId);
+  if (!selectedLayer || !functionRegistry) {
+    return /* @__PURE__ */ jsx(
+      FormFieldWrapper,
+      {
+        label,
+        isRequired,
+        fieldConfigItem,
+        children: /* @__PURE__ */ jsx(Select, { disabled: true, children: /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "No function registry available" }) }) })
+      }
+    );
+  }
+  const functionEntries = Object.entries(functionRegistry);
+  const getCurrentFunctionId = () => {
+    const directFuncId = selectedLayer.props[`__function_${propName}`];
+    if (typeof directFuncId === "string") {
+      return directFuncId;
+    }
+    return "";
+  };
+  const handleValueChange = (value) => {
+    if (value === "__none__") {
+      unbindPropFromVariable(selectedLayer.id, propName);
+      updateLayer(selectedLayer.id, {
+        [`__function_${propName}`]: void 0,
+        [propName]: void 0
+      });
+      incrementRevision();
+      return;
+    }
+    const funcDef = functionRegistry[value];
+    if (funcDef) {
+      unbindPropFromVariable(selectedLayer.id, propName);
+      updateLayer(selectedLayer.id, {
+        [propName]: funcDef.fn,
+        [`__function_${propName}`]: value
+      });
+      incrementRevision();
+    }
+  };
+  const currentFunctionId = getCurrentFunctionId();
+  const getDisplayText = () => {
+    if (currentFunctionId) {
+      const funcDef = functionRegistry[currentFunctionId];
+      return funcDef?.name || currentFunctionId;
+    }
+    return "Select a function...";
+  };
+  return /* @__PURE__ */ jsx(
+    FormFieldWrapper,
+    {
+      label,
+      isRequired,
+      fieldConfigItem,
+      children: /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: currentFunctionId,
+          onValueChange: handleValueChange,
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { className: "w-full mb-0", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select a function...", children: getDisplayText() }) }),
+            /* @__PURE__ */ jsxs(SelectContent, { children: [
+              /* @__PURE__ */ jsx(SelectItem, { value: "__none__", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "None (clear)" }) }),
+              functionEntries.length > 0 && /* @__PURE__ */ jsx(Fragment, { children: functionEntries.map(([id, funcDef]) => /* @__PURE__ */ jsx(SelectItem, { value: id, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                /* @__PURE__ */ jsx("span", { children: funcDef.name }),
+                funcDef.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: funcDef.description })
+              ] }) }, id)) })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+const functionPropFieldOverrides = (propName) => {
+  return {
+    renderParent: ({ children }) => /* @__PURE__ */ jsx(VariableBindingWrapper, { propName, isFunctionProp: true, children }),
+    fieldType: (props) => /* @__PURE__ */ jsx(FunctionPropField, { propName, ...props })
+  };
+};
+function VariableBindingWrapper({
+  propName,
+  children,
+  isFunctionProp = false
+}) {
+  const variables = useLayerStore((state) => state.variables);
+  const selectedLayerId = useLayerStore((state) => state.selectedLayerId);
+  const findLayerById = useLayerStore((state) => state.findLayerById);
+  const isBindingImmutable = useLayerStore((state) => state.isBindingImmutable);
+  const incrementRevision = useEditorStore((state) => state.incrementRevision);
+  const functionRegistry = useEditorStore((state) => state.functionRegistry);
+  const unbindPropFromVariable = useLayerStore(
+    (state) => state.unbindPropFromVariable
+  );
+  const bindPropToVariable = useLayerStore((state) => state.bindPropToVariable);
+  const selectedLayer = findLayerById(selectedLayerId);
+  if (!selectedLayer) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  const filteredVariables = variables.filter(
+    (v) => isFunctionProp ? v.type === "function" : v.type !== "function"
+  );
+  const currentValue = selectedLayer.props[propName];
+  const isCurrentlyBound = isVariableReference(currentValue);
+  const boundVariable = isCurrentlyBound ? variables.find((v) => v.id === currentValue.__variableRef) : null;
+  const isImmutable = isBindingImmutable(selectedLayer.id, propName);
+  const getFunctionDisplayValue = (variable) => {
+    if (variable.type === "function" && functionRegistry) {
+      const funcId = String(variable.defaultValue);
+      const funcDef = functionRegistry[funcId];
+      return funcDef ? funcDef.name : funcId;
+    }
+    return String(variable.defaultValue);
+  };
+  const handleBindToVariable = (variableId) => {
+    bindPropToVariable(selectedLayer.id, propName, variableId);
+    incrementRevision();
+  };
+  const handleUnbind = () => {
+    unbindPropFromVariable(selectedLayer.id, propName);
+    incrementRevision();
+  };
+  const emptyMessage = isFunctionProp ? "No function variables defined" : "No variables defined";
+  const bindLabel = isFunctionProp ? "Bind to Function Variable" : "Bind to Variable";
+  const tooltipLabel = isFunctionProp ? "Bind Function" : "Bind Variable";
+  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: propName.charAt(0).toUpperCase() + propName.slice(1) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2 w-full", children: [
+        /* @__PURE__ */ jsx(Card, { className: "w-full overflow-hidden min-w-0", 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-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: getFunctionDisplayValue(boundVariable) })
+          ] })
+        ] }) }) }),
+        !isImmutable && /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              onClick: handleUnbind,
+              className: "px-3 h-10",
+              "data-testid": "unbind-variable-button",
+              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", "data-testid": "bind-variable-button", children: /* @__PURE__ */ jsx(Link, { className: "h-4 w-4 my-1" }) }) }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: tooltipLabel })
+        ] }),
+        /* @__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: bindLabel }),
+          filteredVariables.length > 0 ? filteredVariables.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: getFunctionDisplayValue(variable) })
+                ] })
+              ] })
+            },
+            variable.id
+          )) : /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-xs text-muted-foreground", children: emptyMessage })
+        ] })
+      ] }) })
+    ] })
+  ) });
+}
 function FormFieldWrapper({
   label,
   isRequired,
@@ -274,4 +479,4 @@ function ChildrenVariableBindingWrapper({
   ) });
 }
 
-export { ChildrenVariableBindingWrapper, FormFieldWrapper, childrenAsTextareaFieldOverrides, childrenAsTipTapFieldOverrides, childrenFieldOverrides, classNameFieldOverrides, commonFieldOverrides, iconNameFieldOverrides };
+export { ChildrenVariableBindingWrapper, FormFieldWrapper, VariableBindingWrapper, childrenAsTextareaFieldOverrides, childrenAsTipTapFieldOverrides, childrenFieldOverrides, classNameFieldOverrides, commonFieldOverrides, functionPropFieldOverrides, iconNameFieldOverrides };

package/dist/plugins/ui-builder/client/index.d.cts

@@ -4,7 +4,7 @@ import react__default, { ComponentType } from 'react';
 import * as _btst_yar from '@btst/yar';
 import { QueryClient } from '@tanstack/react-query';
 import { c as UIBuilderClientHooks } from '../../../shared/stack.Cl7ok_cY.cjs';
-import { a as ComponentRegistry, b as FieldConfigFunction, C as ComponentLayer } from '../../../shared/stack.C5ZSOJGJ.cjs';
+import { a as ComponentRegistry, b as FieldConfigFunction, C as ComponentLayer, F as FunctionRegistry } from '../../../shared/stack.C5ZSOJGJ.cjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { A as AutoFormInputComponentProps, F as FieldConfigItem } from '../../../shared/stack.8nldKomx.cjs';
 export { PageBuilderPage, PageListPage, PageRenderer, PageRendererProps, SuspensePageRenderer } from './components/index.cjs';
@@ -342,6 +342,11 @@ interface UIBuilderPluginOverrides {
      * Component registry for the UI Builder
      */
     componentRegistry?: ComponentRegistry;
+    /**
+     * Function registry for resolving bindable event handlers (onClick, onSubmit, etc.)
+     * in the preview modal and layer renderer.
+     */
+    functionRegistry?: FunctionRegistry;
     /**
      * Base path for UI Builder admin pages (default: /pages/ui-builder)
      */

package/dist/plugins/ui-builder/client/index.d.mts

@@ -4,7 +4,7 @@ import react__default, { ComponentType } from 'react';
 import * as _btst_yar from '@btst/yar';
 import { QueryClient } from '@tanstack/react-query';
 import { c as UIBuilderClientHooks } from '../../../shared/stack.VMmQdbsJ.mjs';
-import { a as ComponentRegistry, b as FieldConfigFunction, C as ComponentLayer } from '../../../shared/stack.Dq4qVr1F.mjs';
+import { a as ComponentRegistry, b as FieldConfigFunction, C as ComponentLayer, F as FunctionRegistry } from '../../../shared/stack.Dq4qVr1F.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { A as AutoFormInputComponentProps, F as FieldConfigItem } from '../../../shared/stack.8nldKomx.mjs';
 export { PageBuilderPage, PageListPage, PageRenderer, PageRendererProps, SuspensePageRenderer } from './components/index.mjs';
@@ -342,6 +342,11 @@ interface UIBuilderPluginOverrides {
      * Component registry for the UI Builder
      */
     componentRegistry?: ComponentRegistry;
+    /**
+     * Function registry for resolving bindable event handlers (onClick, onSubmit, etc.)
+     * in the preview modal and layer renderer.
+     */
+    functionRegistry?: FunctionRegistry;
     /**
      * Base path for UI Builder admin pages (default: /pages/ui-builder)
      */

package/dist/plugins/ui-builder/client/index.d.ts

@@ -4,7 +4,7 @@ import react__default, { ComponentType } from 'react';
 import * as _btst_yar from '@btst/yar';
 import { QueryClient } from '@tanstack/react-query';
 import { c as UIBuilderClientHooks } from '../../../shared/stack.B2DwzF3r.js';
-import { a as ComponentRegistry, b as FieldConfigFunction, C as ComponentLayer } from '../../../shared/stack.D0QupDcQ.js';
+import { a as ComponentRegistry, b as FieldConfigFunction, C as ComponentLayer, F as FunctionRegistry } from '../../../shared/stack.D0QupDcQ.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { A as AutoFormInputComponentProps, F as FieldConfigItem } from '../../../shared/stack.8nldKomx.js';
 export { PageBuilderPage, PageListPage, PageRenderer, PageRendererProps, SuspensePageRenderer } from './components/index.js';
@@ -342,6 +342,11 @@ interface UIBuilderPluginOverrides {
      * Component registry for the UI Builder
      */
     componentRegistry?: ComponentRegistry;
+    /**
+     * Function registry for resolving bindable event handlers (onClick, onSubmit, etc.)
+     * in the preview modal and layer renderer.
+     */
+    functionRegistry?: FunctionRegistry;
     /**
      * Base path for UI Builder admin pages (default: /pages/ui-builder)
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@btst/stack",
-  "version": "2.5.4",
+  "version": "2.5.6",
   "description": "A composable, plugin-based library for building full-stack applications.",
   "repository": {
     "type": "git",

package/src/plugins/ui-builder/client/components/pages/page-builder-page.internal.tsx

@@ -215,6 +215,7 @@ function PageBuilderPageContent({
 		navigate,
 		Link,
 		componentRegistry: customRegistry,
+		functionRegistry,
 	} = usePluginOverrides<UIBuilderPluginOverrides>("ui-builder");
 	const basePath = useBasePath();
 
@@ -463,6 +464,7 @@ function PageBuilderPageContent({
 				}
 				onVariablesChange={handleVariablesChange}
 				componentRegistry={componentRegistry}
+				functionRegistry={functionRegistry}
 				persistLayerStore={false}
 				allowVariableEditing={true}
 				allowPagesCreation={false}

package/src/plugins/ui-builder/client/overrides.ts

@@ -1,5 +1,8 @@
 import type { ComponentType } from "react";
-import type { ComponentRegistry } from "@workspace/ui/components/ui-builder/types";
+import type {
+	ComponentRegistry,
+	FunctionRegistry,
+} from "@workspace/ui/components/ui-builder/types";
 import type { UIBuilderClientHooks } from "../types";
 
 /**
@@ -63,6 +66,12 @@ export interface UIBuilderPluginOverrides {
 	 */
 	componentRegistry?: ComponentRegistry;
 
+	/**
+	 * Function registry for resolving bindable event handlers (onClick, onSubmit, etc.)
+	 * in the preview modal and layer renderer.
+	 */
+	functionRegistry?: FunctionRegistry;
+
 	/**
 	 * Base path for UI Builder admin pages (default: /pages/ui-builder)
 	 */