'use strict';

const jsxRuntime = require('react/jsx-runtime');
const form = require('../../../components/form.cjs');
const childrenSearchableSelect = require('../../../components/ui-builder/internal/form-fields/children-searchable-select.cjs');
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');
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');
const label = require('../../../components/label.cjs');
const badge = require('../../../components/badge.cjs');
const select = require('../../../components/select.cjs');

const classNameFieldOverrides = (layer) => {
  return {
    fieldType: ({
      label,
      isRequired,
      field,
      fieldConfigItem
    }) => /* @__PURE__ */ jsxRuntime.jsx(
      FormFieldWrapper,
      {
        label,
        isRequired,
        fieldConfigItem,
        children: /* @__PURE__ */ jsxRuntime.jsx(
          breakpointClassnameControl.BreakpointClassNameControl,
          {
            value: field.value,
            onChange: field.onChange
          }
        )
      }
    )
  };
};
const childrenFieldOverrides = (layer, allowVariableBinding = true) => {
  return {
    renderParent: allowVariableBinding ? ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(ChildrenVariableBindingWrapper, { children }) : void 0,
    fieldType: ({
      label,
      isRequired,
      fieldConfigItem,
      field,
      fieldProps
    }) => /* @__PURE__ */ jsxRuntime.jsx(
      FormFieldWrapper,
      {
        label,
        isRequired,
        fieldConfigItem,
        children: /* @__PURE__ */ jsxRuntime.jsx(
          childrenSearchableSelect.ChildrenSearchableSelect,
          {
            layer,
            onChange: field.onChange,
            ...fieldProps
          }
        )
      }
    )
  };
};
const iconNameFieldOverrides = (layer) => {
  return {
    fieldType: ({
      label,
      isRequired,
      field,
      fieldProps
    }) => /* @__PURE__ */ jsxRuntime.jsx(
      iconnameField,
      {
        label,
        isRequired,
        value: layer.props.iconName,
        onChange: field.onChange,
        ...fieldProps
      }
    )
  };
};
const childrenAsTextareaFieldOverrides = (layer, allowVariableBinding = true) => {
  return {
    renderParent: allowVariableBinding ? ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(ChildrenVariableBindingWrapper, { children }) : void 0,
    fieldType: ({
      label,
      isRequired,
      fieldConfigItem,
      field,
      fieldProps
    }) => /* @__PURE__ */ jsxRuntime.jsx(
      FormFieldWrapper,
      {
        label,
        isRequired,
        fieldConfigItem,
        children: /* @__PURE__ */ jsxRuntime.jsx(
          textarea.Textarea,
          {
            value: typeof layer.children === "string" ? layer.children : "",
            onChange: field.onChange,
            ...fieldProps
          }
        )
      }
    )
  };
};
const childrenAsTipTapFieldOverrides = (layer, allowVariableBinding = true) => {
  return {
    renderParent: allowVariableBinding ? ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(ChildrenVariableBindingWrapper, { children }) : void 0,
    fieldType: ({
      label,
      isRequired,
      fieldConfigItem,
      field,
      fieldProps
    }) => /* @__PURE__ */ jsxRuntime.jsx(
      FormFieldWrapper,
      {
        label,
        isRequired,
        fieldConfigItem,
        children: /* @__PURE__ */ jsxRuntime.jsx(
          minimalTiptap.MinimalTiptapEditor,
          {
            immediatelyRender: false,
            output: "markdown",
            editable: true,
            value: typeof layer.children === "string" ? layer.children : "",
            editorClassName: "focus:outline-none px-4 py-2 h-full",
            onChange: (content) => {
              if (typeof content === "string") {
                field.onChange(content);
              } else {
                console.warn("Tiptap content is not a string");
              }
            },
            ...fieldProps
          }
        )
      }
    )
  };
};
const memoizedCommonFieldOverrides = /* @__PURE__ */ new Map();
const commonFieldOverrides = (allowBinding = true) => {
  if (memoizedCommonFieldOverrides.has(allowBinding)) {
    return memoizedCommonFieldOverrides.get(allowBinding);
  }
  const overrides = {
    className: (layer) => classNameFieldOverrides(),
    children: (layer) => childrenFieldOverrides(layer, allowBinding)
  };
  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,
  fieldConfigItem,
  children
}) {
  return /* @__PURE__ */ jsxRuntime.jsxs(form.FormItem, { className: "flex flex-col", children: [
    /* @__PURE__ */ jsxRuntime.jsxs(form.FormLabel, { children: [
      label,
      isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive", children: " *" })
    ] }),
    /* @__PURE__ */ jsxRuntime.jsx(form.FormControl, { children }),
    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 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-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",
              "data-testid": "unbind-children-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-children-button", 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.VariableBindingWrapper = VariableBindingWrapper;
exports.childrenAsTextareaFieldOverrides = childrenAsTextareaFieldOverrides;
exports.childrenAsTipTapFieldOverrides = childrenAsTipTapFieldOverrides;
exports.childrenFieldOverrides = childrenFieldOverrides;
exports.classNameFieldOverrides = classNameFieldOverrides;
exports.commonFieldOverrides = commonFieldOverrides;
exports.functionPropFieldOverrides = functionPropFieldOverrides;
exports.iconNameFieldOverrides = iconNameFieldOverrides;
