@btst/stack 2.5.3 → 2.5.5

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/blog/api/index.d.cts

@@ -1,5 +1,5 @@
-export { B as BLOG_QUERY_KEYS, h as BlogApiContext, k as BlogApiRouter, i as BlogBackendHooks, e as BlogRouteKey, N as NextPreviousPostsQuerySchema, P as PostListParams, f as PostListQuerySchema, c as PostListResult, j as blogBackendPlugin, d as createBlogQueryKeys, g as getAllPosts, b as getAllTags, a as getPostBySlug } from '../../../shared/stack.DaZM10cp.cjs';
-import { P as Post, T as Tag, S as SerializedPost, a as SerializedTag } from '../../../shared/stack.BQmuNl5p.cjs';
+export { B as BLOG_QUERY_KEYS, h as BlogApiContext, k as BlogApiRouter, i as BlogBackendHooks, e as BlogRouteKey, N as NextPreviousPostsQuerySchema, P as PostListParams, f as PostListQuerySchema, c as PostListResult, j as blogBackendPlugin, d as createBlogQueryKeys, g as getAllPosts, b as getAllTags, a as getPostBySlug } from '../../../shared/stack.C21-LFX8.cjs';
+import { P as Post, T as Tag, S as SerializedPost, a as SerializedTag } from '../../../shared/stack.BWp0hcm9.cjs';
 import '@tanstack/react-query';
 import '@btst/stack/plugins/client';
 import '@btst/stack/plugins/api';

package/dist/plugins/blog/api/index.d.mts

@@ -1,5 +1,5 @@
-export { B as BLOG_QUERY_KEYS, h as BlogApiContext, k as BlogApiRouter, i as BlogBackendHooks, e as BlogRouteKey, N as NextPreviousPostsQuerySchema, P as PostListParams, f as PostListQuerySchema, c as PostListResult, j as blogBackendPlugin, d as createBlogQueryKeys, g as getAllPosts, b as getAllTags, a as getPostBySlug } from '../../../shared/stack.cfCkioTe.mjs';
-import { P as Post, T as Tag, S as SerializedPost, a as SerializedTag } from '../../../shared/stack.BQmuNl5p.mjs';
+export { B as BLOG_QUERY_KEYS, h as BlogApiContext, k as BlogApiRouter, i as BlogBackendHooks, e as BlogRouteKey, N as NextPreviousPostsQuerySchema, P as PostListParams, f as PostListQuerySchema, c as PostListResult, j as blogBackendPlugin, d as createBlogQueryKeys, g as getAllPosts, b as getAllTags, a as getPostBySlug } from '../../../shared/stack.CL4mKxe7.mjs';
+import { P as Post, T as Tag, S as SerializedPost, a as SerializedTag } from '../../../shared/stack.BWp0hcm9.mjs';
 import '@tanstack/react-query';
 import '@btst/stack/plugins/client';
 import '@btst/stack/plugins/api';

package/dist/plugins/blog/api/index.d.ts

@@ -1,5 +1,5 @@
-export { B as BLOG_QUERY_KEYS, h as BlogApiContext, k as BlogApiRouter, i as BlogBackendHooks, e as BlogRouteKey, N as NextPreviousPostsQuerySchema, P as PostListParams, f as PostListQuerySchema, c as PostListResult, j as blogBackendPlugin, d as createBlogQueryKeys, g as getAllPosts, b as getAllTags, a as getPostBySlug } from '../../../shared/stack.DXnclTG7.js';
-import { P as Post, T as Tag, S as SerializedPost, a as SerializedTag } from '../../../shared/stack.BQmuNl5p.js';
+export { B as BLOG_QUERY_KEYS, h as BlogApiContext, k as BlogApiRouter, i as BlogBackendHooks, e as BlogRouteKey, N as NextPreviousPostsQuerySchema, P as PostListParams, f as PostListQuerySchema, c as PostListResult, j as blogBackendPlugin, d as createBlogQueryKeys, g as getAllPosts, b as getAllTags, a as getPostBySlug } from '../../../shared/stack.B8_74ror.js';
+import { P as Post, T as Tag, S as SerializedPost, a as SerializedTag } from '../../../shared/stack.BWp0hcm9.js';
 import '@tanstack/react-query';
 import '@btst/stack/plugins/client';
 import '@btst/stack/plugins/api';

package/dist/plugins/blog/client/hooks/index.d.cts

@@ -1,5 +1,5 @@
 import * as _tanstack_react_query from '@tanstack/react-query';
-import { S as SerializedPost, c as createPostSchema, u as updatePostSchema, a as SerializedTag } from '../../../../shared/stack.BQmuNl5p.cjs';
+import { S as SerializedPost, c as createPostSchema, u as updatePostSchema, a as SerializedTag } from '../../../../shared/stack.BWp0hcm9.cjs';
 import { z } from 'zod';
 
 /**
@@ -135,14 +135,14 @@ declare function useCreatePost(): _tanstack_react_query.UseMutationResult<Serial
         name: string;
         slug: string;
     })[];
+    published: boolean;
     title: string;
     content: string;
     excerpt: string;
-    published: boolean;
     slug?: string | undefined;
+    publishedAt?: Date | undefined;
     createdAt?: Date | undefined;
     updatedAt?: Date | undefined;
-    publishedAt?: Date | undefined;
     image?: string | undefined;
 }, unknown>;
 /** Update an existing post by id */

package/dist/plugins/blog/client/hooks/index.d.mts

@@ -1,5 +1,5 @@
 import * as _tanstack_react_query from '@tanstack/react-query';
-import { S as SerializedPost, c as createPostSchema, u as updatePostSchema, a as SerializedTag } from '../../../../shared/stack.BQmuNl5p.mjs';
+import { S as SerializedPost, c as createPostSchema, u as updatePostSchema, a as SerializedTag } from '../../../../shared/stack.BWp0hcm9.mjs';
 import { z } from 'zod';
 
 /**
@@ -135,14 +135,14 @@ declare function useCreatePost(): _tanstack_react_query.UseMutationResult<Serial
         name: string;
         slug: string;
     })[];
+    published: boolean;
     title: string;
     content: string;
     excerpt: string;
-    published: boolean;
     slug?: string | undefined;
+    publishedAt?: Date | undefined;
     createdAt?: Date | undefined;
     updatedAt?: Date | undefined;
-    publishedAt?: Date | undefined;
     image?: string | undefined;
 }, unknown>;
 /** Update an existing post by id */

package/dist/plugins/blog/client/hooks/index.d.ts

@@ -1,5 +1,5 @@
 import * as _tanstack_react_query from '@tanstack/react-query';
-import { S as SerializedPost, c as createPostSchema, u as updatePostSchema, a as SerializedTag } from '../../../../shared/stack.BQmuNl5p.js';
+import { S as SerializedPost, c as createPostSchema, u as updatePostSchema, a as SerializedTag } from '../../../../shared/stack.BWp0hcm9.js';
 import { z } from 'zod';
 
 /**
@@ -135,14 +135,14 @@ declare function useCreatePost(): _tanstack_react_query.UseMutationResult<Serial
         name: string;
         slug: string;
     })[];
+    published: boolean;
     title: string;
     content: string;
     excerpt: string;
-    published: boolean;
     slug?: string | undefined;
+    publishedAt?: Date | undefined;
     createdAt?: Date | undefined;
     updatedAt?: Date | undefined;
-    publishedAt?: Date | undefined;
     image?: string | undefined;
 }, unknown>;
 /** Update an existing post by id */

package/dist/plugins/blog/client/index.d.cts

@@ -3,7 +3,7 @@ import * as react from 'react';
 import { ComponentType } from 'react';
 import * as _btst_yar from '@btst/yar';
 import { QueryClient } from '@tanstack/react-query';
-import { P as Post, S as SerializedPost } from '../../../shared/stack.BQmuNl5p.cjs';
+import { P as Post, S as SerializedPost } from '../../../shared/stack.BWp0hcm9.cjs';
 export { UsePostsOptions, UsePostsResult } from './hooks/index.cjs';
 import 'zod';
 

package/dist/plugins/blog/client/index.d.mts

@@ -3,7 +3,7 @@ import * as react from 'react';
 import { ComponentType } from 'react';
 import * as _btst_yar from '@btst/yar';
 import { QueryClient } from '@tanstack/react-query';
-import { P as Post, S as SerializedPost } from '../../../shared/stack.BQmuNl5p.mjs';
+import { P as Post, S as SerializedPost } from '../../../shared/stack.BWp0hcm9.mjs';
 export { UsePostsOptions, UsePostsResult } from './hooks/index.mjs';
 import 'zod';
 

package/dist/plugins/blog/client/index.d.ts

@@ -3,7 +3,7 @@ import * as react from 'react';
 import { ComponentType } from 'react';
 import * as _btst_yar from '@btst/yar';
 import { QueryClient } from '@tanstack/react-query';
-import { P as Post, S as SerializedPost } from '../../../shared/stack.BQmuNl5p.js';
+import { P as Post, S as SerializedPost } from '../../../shared/stack.BWp0hcm9.js';
 export { UsePostsOptions, UsePostsResult } from './hooks/index.js';
 import 'zod';
 

package/dist/plugins/blog/query-keys.d.cts

@@ -1,7 +1,7 @@
 import '@tanstack/react-query';
-export { d as createBlogQueryKeys } from '../../shared/stack.DaZM10cp.cjs';
+export { d as createBlogQueryKeys } from '../../shared/stack.C21-LFX8.cjs';
 import '@btst/stack/plugins/client';
-import '../../shared/stack.BQmuNl5p.cjs';
+import '../../shared/stack.BWp0hcm9.cjs';
 import '@btst/stack/plugins/api';
 import 'better-call';
 import '@btst/db';

package/dist/plugins/blog/query-keys.d.mts

@@ -1,7 +1,7 @@
 import '@tanstack/react-query';
-export { d as createBlogQueryKeys } from '../../shared/stack.cfCkioTe.mjs';
+export { d as createBlogQueryKeys } from '../../shared/stack.CL4mKxe7.mjs';
 import '@btst/stack/plugins/client';
-import '../../shared/stack.BQmuNl5p.mjs';
+import '../../shared/stack.BWp0hcm9.mjs';
 import '@btst/stack/plugins/api';
 import 'better-call';
 import '@btst/db';

package/dist/plugins/blog/query-keys.d.ts

@@ -1,7 +1,7 @@
 import '@tanstack/react-query';
-export { d as createBlogQueryKeys } from '../../shared/stack.DXnclTG7.js';
+export { d as createBlogQueryKeys } from '../../shared/stack.B8_74ror.js';
 import '@btst/stack/plugins/client';
-import '../../shared/stack.BQmuNl5p.js';
+import '../../shared/stack.BWp0hcm9.js';
 import '@btst/stack/plugins/api';
 import 'better-call';
 import '@btst/db';

package/dist/plugins/kanban/api/index.d.cts

@@ -1,4 +1,4 @@
-export { B as BoardListResult, C as CreateKanbanTaskInput, i as KANBAN_QUERY_KEYS, b as KanbanApiContext, K as KanbanApiRouter, c as KanbanBackendHooks, a as KanbanRouteKey, e as createKanbanTask, f as findOrCreateKanbanBoard, g as getAllBoards, d as getBoardById, h as getKanbanColumnsByBoardId, k as kanbanBackendPlugin } from '../../../shared/stack.CFqqZUes.cjs';
+export { B as BoardListResult, C as CreateKanbanTaskInput, i as KANBAN_QUERY_KEYS, b as KanbanApiContext, K as KanbanApiRouter, c as KanbanBackendHooks, a as KanbanRouteKey, e as createKanbanTask, f as findOrCreateKanbanBoard, g as getAllBoards, d as getBoardById, h as getKanbanColumnsByBoardId, k as kanbanBackendPlugin } from '../../../shared/stack.DSxTDZBQ.cjs';
 import { B as BoardWithColumns, S as SerializedBoardWithColumns, C as ColumnWithTasks, a as SerializedColumn, T as Task, b as SerializedTask } from '../../../shared/stack.DJaKVY7v.cjs';
 import '@btst/stack/plugins/api';
 import 'better-call';

package/dist/plugins/kanban/api/index.d.mts

@@ -1,4 +1,4 @@
-export { B as BoardListResult, C as CreateKanbanTaskInput, i as KANBAN_QUERY_KEYS, b as KanbanApiContext, K as KanbanApiRouter, c as KanbanBackendHooks, a as KanbanRouteKey, e as createKanbanTask, f as findOrCreateKanbanBoard, g as getAllBoards, d as getBoardById, h as getKanbanColumnsByBoardId, k as kanbanBackendPlugin } from '../../../shared/stack.Ba_Ks8qi.mjs';
+export { B as BoardListResult, C as CreateKanbanTaskInput, i as KANBAN_QUERY_KEYS, b as KanbanApiContext, K as KanbanApiRouter, c as KanbanBackendHooks, a as KanbanRouteKey, e as createKanbanTask, f as findOrCreateKanbanBoard, g as getAllBoards, d as getBoardById, h as getKanbanColumnsByBoardId, k as kanbanBackendPlugin } from '../../../shared/stack.CxNeGV2z.mjs';
 import { B as BoardWithColumns, S as SerializedBoardWithColumns, C as ColumnWithTasks, a as SerializedColumn, T as Task, b as SerializedTask } from '../../../shared/stack.DJaKVY7v.mjs';
 import '@btst/stack/plugins/api';
 import 'better-call';

package/dist/plugins/kanban/api/index.d.ts

@@ -1,4 +1,4 @@
-export { B as BoardListResult, C as CreateKanbanTaskInput, i as KANBAN_QUERY_KEYS, b as KanbanApiContext, K as KanbanApiRouter, c as KanbanBackendHooks, a as KanbanRouteKey, e as createKanbanTask, f as findOrCreateKanbanBoard, g as getAllBoards, d as getBoardById, h as getKanbanColumnsByBoardId, k as kanbanBackendPlugin } from '../../../shared/stack.DMobugrZ.js';
+export { B as BoardListResult, C as CreateKanbanTaskInput, i as KANBAN_QUERY_KEYS, b as KanbanApiContext, K as KanbanApiRouter, c as KanbanBackendHooks, a as KanbanRouteKey, e as createKanbanTask, f as findOrCreateKanbanBoard, g as getAllBoards, d as getBoardById, h as getKanbanColumnsByBoardId, k as kanbanBackendPlugin } from '../../../shared/stack.BFcg0tDz.js';
 import { B as BoardWithColumns, S as SerializedBoardWithColumns, C as ColumnWithTasks, a as SerializedColumn, T as Task, b as SerializedTask } from '../../../shared/stack.DJaKVY7v.js';
 import '@btst/stack/plugins/api';
 import 'better-call';