@enerjisaformlibrary/formbuilder-react 1.0.0 → 1.0.1

package/index.js

@@ -1,6 +1,7 @@
-import * as React from 'react';
-import React__default, { useState, useEffect, useMemo, useCallback, useRef } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useDroppable, useDraggable } from '@dnd-kit/core';
+import * as React from 'react';
+import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -26,1378 +27,15 @@ import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
-var jsxRuntime = {exports: {}};
-
-var reactJsxRuntime_production_min = {};
-
-/**
- * @license React
- * react-jsx-runtime.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredReactJsxRuntime_production_min;
-
-function requireReactJsxRuntime_production_min () {
-	if (hasRequiredReactJsxRuntime_production_min) return reactJsxRuntime_production_min;
-	hasRequiredReactJsxRuntime_production_min = 1;
-var f=React__default,k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:true,ref:true,__self:true,__source:true};
-	function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a) void 0===d[b]&&(d[b]=a[b]);return {$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}reactJsxRuntime_production_min.Fragment=l;reactJsxRuntime_production_min.jsx=q;reactJsxRuntime_production_min.jsxs=q;
-	return reactJsxRuntime_production_min;
-}
-
-var reactJsxRuntime_development = {};
-
-/**
- * @license React
- * react-jsx-runtime.development.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredReactJsxRuntime_development;
-
-function requireReactJsxRuntime_development () {
-	if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
-	hasRequiredReactJsxRuntime_development = 1;
-
-	if (process.env.NODE_ENV !== "production") {
-	  (function() {
-
-	var React = React__default;
-
-	// ATTENTION
-	// When adding new symbols to this file,
-	// Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
-	// The Symbol used to tag the ReactElement-like types.
-	var REACT_ELEMENT_TYPE = Symbol.for('react.element');
-	var REACT_PORTAL_TYPE = Symbol.for('react.portal');
-	var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
-	var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
-	var REACT_PROFILER_TYPE = Symbol.for('react.profiler');
-	var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
-	var REACT_CONTEXT_TYPE = Symbol.for('react.context');
-	var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
-	var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
-	var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
-	var REACT_MEMO_TYPE = Symbol.for('react.memo');
-	var REACT_LAZY_TYPE = Symbol.for('react.lazy');
-	var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
-	var MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
-	var FAUX_ITERATOR_SYMBOL = '@@iterator';
-	function getIteratorFn(maybeIterable) {
-	  if (maybeIterable === null || typeof maybeIterable !== 'object') {
-	    return null;
-	  }
-
-	  var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL];
-
-	  if (typeof maybeIterator === 'function') {
-	    return maybeIterator;
-	  }
-
-	  return null;
-	}
-
-	var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-
-	function error(format) {
-	  {
-	    {
-	      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-	        args[_key2 - 1] = arguments[_key2];
-	      }
-
-	      printWarning('error', format, args);
-	    }
-	  }
-	}
-
-	function printWarning(level, format, args) {
-	  // When changing this logic, you might want to also
-	  // update consoleWithStackDev.www.js as well.
-	  {
-	    var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
-	    var stack = ReactDebugCurrentFrame.getStackAddendum();
-
-	    if (stack !== '') {
-	      format += '%s';
-	      args = args.concat([stack]);
-	    } // eslint-disable-next-line react-internal/safe-string-coercion
-
-
-	    var argsWithFormat = args.map(function (item) {
-	      return String(item);
-	    }); // Careful: RN currently depends on this prefix
-
-	    argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
-	    // breaks IE9: https://github.com/facebook/react/issues/13610
-	    // eslint-disable-next-line react-internal/no-production-logging
-
-	    Function.prototype.apply.call(console[level], console, argsWithFormat);
-	  }
-	}
-
-	// -----------------------------------------------------------------------------
-
-	var enableScopeAPI = false; // Experimental Create Event Handle API.
-	var enableCacheElement = false;
-	var enableTransitionTracing = false; // No known bugs, but needs performance testing
-
-	var enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber
-	// stuff. Intended to enable React core members to more easily debug scheduling
-	// issues in DEV builds.
-
-	var enableDebugTracing = false; // Track which Fiber(s) schedule render work.
-
-	var REACT_MODULE_REFERENCE;
-
-	{
-	  REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');
-	}
-
-	function isValidElementType(type) {
-	  if (typeof type === 'string' || typeof type === 'function') {
-	    return true;
-	  } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
-
-
-	  if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing  || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden  || type === REACT_OFFSCREEN_TYPE || enableScopeAPI  || enableCacheElement  || enableTransitionTracing ) {
-	    return true;
-	  }
-
-	  if (typeof type === 'object' && type !== null) {
-	    if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object
-	    // types supported by any Flight configuration anywhere since
-	    // we don't know which Flight build this will end up being used
-	    // with.
-	    type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== undefined) {
-	      return true;
-	    }
-	  }
-
-	  return false;
-	}
-
-	function getWrappedName(outerType, innerType, wrapperName) {
-	  var displayName = outerType.displayName;
-
-	  if (displayName) {
-	    return displayName;
-	  }
-
-	  var functionName = innerType.displayName || innerType.name || '';
-	  return functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName;
-	} // Keep in sync with react-reconciler/getComponentNameFromFiber
-
-
-	function getContextName(type) {
-	  return type.displayName || 'Context';
-	} // Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead.
-
-
-	function getComponentNameFromType(type) {
-	  if (type == null) {
-	    // Host root, text node or just invalid type.
-	    return null;
-	  }
-
-	  {
-	    if (typeof type.tag === 'number') {
-	      error('Received an unexpected object in getComponentNameFromType(). ' + 'This is likely a bug in React. Please file an issue.');
-	    }
-	  }
-
-	  if (typeof type === 'function') {
-	    return type.displayName || type.name || null;
-	  }
-
-	  if (typeof type === 'string') {
-	    return type;
-	  }
-
-	  switch (type) {
-	    case REACT_FRAGMENT_TYPE:
-	      return 'Fragment';
-
-	    case REACT_PORTAL_TYPE:
-	      return 'Portal';
-
-	    case REACT_PROFILER_TYPE:
-	      return 'Profiler';
-
-	    case REACT_STRICT_MODE_TYPE:
-	      return 'StrictMode';
-
-	    case REACT_SUSPENSE_TYPE:
-	      return 'Suspense';
-
-	    case REACT_SUSPENSE_LIST_TYPE:
-	      return 'SuspenseList';
-
-	  }
-
-	  if (typeof type === 'object') {
-	    switch (type.$$typeof) {
-	      case REACT_CONTEXT_TYPE:
-	        var context = type;
-	        return getContextName(context) + '.Consumer';
-
-	      case REACT_PROVIDER_TYPE:
-	        var provider = type;
-	        return getContextName(provider._context) + '.Provider';
-
-	      case REACT_FORWARD_REF_TYPE:
-	        return getWrappedName(type, type.render, 'ForwardRef');
-
-	      case REACT_MEMO_TYPE:
-	        var outerName = type.displayName || null;
-
-	        if (outerName !== null) {
-	          return outerName;
-	        }
-
-	        return getComponentNameFromType(type.type) || 'Memo';
-
-	      case REACT_LAZY_TYPE:
-	        {
-	          var lazyComponent = type;
-	          var payload = lazyComponent._payload;
-	          var init = lazyComponent._init;
-
-	          try {
-	            return getComponentNameFromType(init(payload));
-	          } catch (x) {
-	            return null;
-	          }
-	        }
-
-	      // eslint-disable-next-line no-fallthrough
-	    }
-	  }
-
-	  return null;
-	}
-
-	var assign = Object.assign;
-
-	// Helpers to patch console.logs to avoid logging during side-effect free
-	// replaying on render function. This currently only patches the object
-	// lazily which won't cover if the log function was extracted eagerly.
-	// We could also eagerly patch the method.
-	var disabledDepth = 0;
-	var prevLog;
-	var prevInfo;
-	var prevWarn;
-	var prevError;
-	var prevGroup;
-	var prevGroupCollapsed;
-	var prevGroupEnd;
-
-	function disabledLog() {}
-
-	disabledLog.__reactDisabledLog = true;
-	function disableLogs() {
-	  {
-	    if (disabledDepth === 0) {
-	      /* eslint-disable react-internal/no-production-logging */
-	      prevLog = console.log;
-	      prevInfo = console.info;
-	      prevWarn = console.warn;
-	      prevError = console.error;
-	      prevGroup = console.group;
-	      prevGroupCollapsed = console.groupCollapsed;
-	      prevGroupEnd = console.groupEnd; // https://github.com/facebook/react/issues/19099
-
-	      var props = {
-	        configurable: true,
-	        enumerable: true,
-	        value: disabledLog,
-	        writable: true
-	      }; // $FlowFixMe Flow thinks console is immutable.
-
-	      Object.defineProperties(console, {
-	        info: props,
-	        log: props,
-	        warn: props,
-	        error: props,
-	        group: props,
-	        groupCollapsed: props,
-	        groupEnd: props
-	      });
-	      /* eslint-enable react-internal/no-production-logging */
-	    }
-
-	    disabledDepth++;
-	  }
-	}
-	function reenableLogs() {
-	  {
-	    disabledDepth--;
-
-	    if (disabledDepth === 0) {
-	      /* eslint-disable react-internal/no-production-logging */
-	      var props = {
-	        configurable: true,
-	        enumerable: true,
-	        writable: true
-	      }; // $FlowFixMe Flow thinks console is immutable.
-
-	      Object.defineProperties(console, {
-	        log: assign({}, props, {
-	          value: prevLog
-	        }),
-	        info: assign({}, props, {
-	          value: prevInfo
-	        }),
-	        warn: assign({}, props, {
-	          value: prevWarn
-	        }),
-	        error: assign({}, props, {
-	          value: prevError
-	        }),
-	        group: assign({}, props, {
-	          value: prevGroup
-	        }),
-	        groupCollapsed: assign({}, props, {
-	          value: prevGroupCollapsed
-	        }),
-	        groupEnd: assign({}, props, {
-	          value: prevGroupEnd
-	        })
-	      });
-	      /* eslint-enable react-internal/no-production-logging */
-	    }
-
-	    if (disabledDepth < 0) {
-	      error('disabledDepth fell below zero. ' + 'This is a bug in React. Please file an issue.');
-	    }
-	  }
-	}
-
-	var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
-	var prefix;
-	function describeBuiltInComponentFrame(name, source, ownerFn) {
-	  {
-	    if (prefix === undefined) {
-	      // Extract the VM specific prefix used by each line.
-	      try {
-	        throw Error();
-	      } catch (x) {
-	        var match = x.stack.trim().match(/\n( *(at )?)/);
-	        prefix = match && match[1] || '';
-	      }
-	    } // We use the prefix to ensure our stacks line up with native stack frames.
-
-
-	    return '\n' + prefix + name;
-	  }
-	}
-	var reentry = false;
-	var componentFrameCache;
-
-	{
-	  var PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
-	  componentFrameCache = new PossiblyWeakMap();
-	}
-
-	function describeNativeComponentFrame(fn, construct) {
-	  // If something asked for a stack inside a fake render, it should get ignored.
-	  if ( !fn || reentry) {
-	    return '';
-	  }
-
-	  {
-	    var frame = componentFrameCache.get(fn);
-
-	    if (frame !== undefined) {
-	      return frame;
-	    }
-	  }
-
-	  var control;
-	  reentry = true;
-	  var previousPrepareStackTrace = Error.prepareStackTrace; // $FlowFixMe It does accept undefined.
-
-	  Error.prepareStackTrace = undefined;
-	  var previousDispatcher;
-
-	  {
-	    previousDispatcher = ReactCurrentDispatcher.current; // Set the dispatcher in DEV because this might be call in the render function
-	    // for warnings.
-
-	    ReactCurrentDispatcher.current = null;
-	    disableLogs();
-	  }
-
-	  try {
-	    // This should throw.
-	    if (construct) {
-	      // Something should be setting the props in the constructor.
-	      var Fake = function () {
-	        throw Error();
-	      }; // $FlowFixMe
-
-
-	      Object.defineProperty(Fake.prototype, 'props', {
-	        set: function () {
-	          // We use a throwing setter instead of frozen or non-writable props
-	          // because that won't throw in a non-strict mode function.
-	          throw Error();
-	        }
-	      });
-
-	      if (typeof Reflect === 'object' && Reflect.construct) {
-	        // We construct a different control for this case to include any extra
-	        // frames added by the construct call.
-	        try {
-	          Reflect.construct(Fake, []);
-	        } catch (x) {
-	          control = x;
-	        }
-
-	        Reflect.construct(fn, [], Fake);
-	      } else {
-	        try {
-	          Fake.call();
-	        } catch (x) {
-	          control = x;
-	        }
-
-	        fn.call(Fake.prototype);
-	      }
-	    } else {
-	      try {
-	        throw Error();
-	      } catch (x) {
-	        control = x;
-	      }
-
-	      fn();
-	    }
-	  } catch (sample) {
-	    // This is inlined manually because closure doesn't do it for us.
-	    if (sample && control && typeof sample.stack === 'string') {
-	      // This extracts the first frame from the sample that isn't also in the control.
-	      // Skipping one frame that we assume is the frame that calls the two.
-	      var sampleLines = sample.stack.split('\n');
-	      var controlLines = control.stack.split('\n');
-	      var s = sampleLines.length - 1;
-	      var c = controlLines.length - 1;
-
-	      while (s >= 1 && c >= 0 && sampleLines[s] !== controlLines[c]) {
-	        // We expect at least one stack frame to be shared.
-	        // Typically this will be the root most one. However, stack frames may be
-	        // cut off due to maximum stack limits. In this case, one maybe cut off
-	        // earlier than the other. We assume that the sample is longer or the same
-	        // and there for cut off earlier. So we should find the root most frame in
-	        // the sample somewhere in the control.
-	        c--;
-	      }
-
-	      for (; s >= 1 && c >= 0; s--, c--) {
-	        // Next we find the first one that isn't the same which should be the
-	        // frame that called our sample function and the control.
-	        if (sampleLines[s] !== controlLines[c]) {
-	          // In V8, the first line is describing the message but other VMs don't.
-	          // If we're about to return the first line, and the control is also on the same
-	          // line, that's a pretty good indicator that our sample threw at same line as
-	          // the control. I.e. before we entered the sample frame. So we ignore this result.
-	          // This can happen if you passed a class to function component, or non-function.
-	          if (s !== 1 || c !== 1) {
-	            do {
-	              s--;
-	              c--; // We may still have similar intermediate frames from the construct call.
-	              // The next one that isn't the same should be our match though.
-
-	              if (c < 0 || sampleLines[s] !== controlLines[c]) {
-	                // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier.
-	                var _frame = '\n' + sampleLines[s].replace(' at new ', ' at '); // If our component frame is labeled "<anonymous>"
-	                // but we have a user-provided "displayName"
-	                // splice it in to make the stack more readable.
-
-
-	                if (fn.displayName && _frame.includes('<anonymous>')) {
-	                  _frame = _frame.replace('<anonymous>', fn.displayName);
-	                }
-
-	                {
-	                  if (typeof fn === 'function') {
-	                    componentFrameCache.set(fn, _frame);
-	                  }
-	                } // Return the line we found.
-
-
-	                return _frame;
-	              }
-	            } while (s >= 1 && c >= 0);
-	          }
-
-	          break;
-	        }
-	      }
-	    }
-	  } finally {
-	    reentry = false;
-
-	    {
-	      ReactCurrentDispatcher.current = previousDispatcher;
-	      reenableLogs();
-	    }
-
-	    Error.prepareStackTrace = previousPrepareStackTrace;
-	  } // Fallback to just using the name if we couldn't make it throw.
-
-
-	  var name = fn ? fn.displayName || fn.name : '';
-	  var syntheticFrame = name ? describeBuiltInComponentFrame(name) : '';
-
-	  {
-	    if (typeof fn === 'function') {
-	      componentFrameCache.set(fn, syntheticFrame);
-	    }
-	  }
-
-	  return syntheticFrame;
-	}
-	function describeFunctionComponentFrame(fn, source, ownerFn) {
-	  {
-	    return describeNativeComponentFrame(fn, false);
-	  }
-	}
-
-	function shouldConstruct(Component) {
-	  var prototype = Component.prototype;
-	  return !!(prototype && prototype.isReactComponent);
-	}
-
-	function describeUnknownElementTypeFrameInDEV(type, source, ownerFn) {
-
-	  if (type == null) {
-	    return '';
-	  }
-
-	  if (typeof type === 'function') {
-	    {
-	      return describeNativeComponentFrame(type, shouldConstruct(type));
-	    }
-	  }
-
-	  if (typeof type === 'string') {
-	    return describeBuiltInComponentFrame(type);
-	  }
-
-	  switch (type) {
-	    case REACT_SUSPENSE_TYPE:
-	      return describeBuiltInComponentFrame('Suspense');
-
-	    case REACT_SUSPENSE_LIST_TYPE:
-	      return describeBuiltInComponentFrame('SuspenseList');
-	  }
-
-	  if (typeof type === 'object') {
-	    switch (type.$$typeof) {
-	      case REACT_FORWARD_REF_TYPE:
-	        return describeFunctionComponentFrame(type.render);
-
-	      case REACT_MEMO_TYPE:
-	        // Memo may contain any component type so we recursively resolve it.
-	        return describeUnknownElementTypeFrameInDEV(type.type, source, ownerFn);
-
-	      case REACT_LAZY_TYPE:
-	        {
-	          var lazyComponent = type;
-	          var payload = lazyComponent._payload;
-	          var init = lazyComponent._init;
-
-	          try {
-	            // Lazy may contain any component type so we recursively resolve it.
-	            return describeUnknownElementTypeFrameInDEV(init(payload), source, ownerFn);
-	          } catch (x) {}
-	        }
-	    }
-	  }
-
-	  return '';
-	}
-
-	var hasOwnProperty = Object.prototype.hasOwnProperty;
-
-	var loggedTypeFailures = {};
-	var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
-
-	function setCurrentlyValidatingElement(element) {
-	  {
-	    if (element) {
-	      var owner = element._owner;
-	      var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null);
-	      ReactDebugCurrentFrame.setExtraStackFrame(stack);
-	    } else {
-	      ReactDebugCurrentFrame.setExtraStackFrame(null);
-	    }
-	  }
-	}
-
-	function checkPropTypes(typeSpecs, values, location, componentName, element) {
-	  {
-	    // $FlowFixMe This is okay but Flow doesn't know it.
-	    var has = Function.call.bind(hasOwnProperty);
-
-	    for (var typeSpecName in typeSpecs) {
-	      if (has(typeSpecs, typeSpecName)) {
-	        var error$1 = void 0; // Prop type validation may throw. In case they do, we don't want to
-	        // fail the render phase where it didn't fail before. So we log it.
-	        // After these have been cleaned up, we'll let them throw.
-
-	        try {
-	          // This is intentionally an invariant that gets caught. It's the same
-	          // behavior as without this statement except with a better message.
-	          if (typeof typeSpecs[typeSpecName] !== 'function') {
-	            // eslint-disable-next-line react-internal/prod-error-codes
-	            var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.');
-	            err.name = 'Invariant Violation';
-	            throw err;
-	          }
-
-	          error$1 = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED');
-	        } catch (ex) {
-	          error$1 = ex;
-	        }
-
-	        if (error$1 && !(error$1 instanceof Error)) {
-	          setCurrentlyValidatingElement(element);
-
-	          error('%s: type specification of %s' + ' `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', location, typeSpecName, typeof error$1);
-
-	          setCurrentlyValidatingElement(null);
-	        }
-
-	        if (error$1 instanceof Error && !(error$1.message in loggedTypeFailures)) {
-	          // Only monitor this failure once because there tends to be a lot of the
-	          // same error.
-	          loggedTypeFailures[error$1.message] = true;
-	          setCurrentlyValidatingElement(element);
-
-	          error('Failed %s type: %s', location, error$1.message);
-
-	          setCurrentlyValidatingElement(null);
-	        }
-	      }
-	    }
-	  }
-	}
-
-	var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare
-
-	function isArray(a) {
-	  return isArrayImpl(a);
-	}
-
-	/*
-	 * The `'' + value` pattern (used in in perf-sensitive code) throws for Symbol
-	 * and Temporal.* types. See https://github.com/facebook/react/pull/22064.
-	 *
-	 * The functions in this module will throw an easier-to-understand,
-	 * easier-to-debug exception with a clear errors message message explaining the
-	 * problem. (Instead of a confusing exception thrown inside the implementation
-	 * of the `value` object).
-	 */
-	// $FlowFixMe only called in DEV, so void return is not possible.
-	function typeName(value) {
-	  {
-	    // toStringTag is needed for namespaced types like Temporal.Instant
-	    var hasToStringTag = typeof Symbol === 'function' && Symbol.toStringTag;
-	    var type = hasToStringTag && value[Symbol.toStringTag] || value.constructor.name || 'Object';
-	    return type;
-	  }
-	} // $FlowFixMe only called in DEV, so void return is not possible.
-
-
-	function willCoercionThrow(value) {
-	  {
-	    try {
-	      testStringCoercion(value);
-	      return false;
-	    } catch (e) {
-	      return true;
-	    }
-	  }
-	}
-
-	function testStringCoercion(value) {
-	  // If you ended up here by following an exception call stack, here's what's
-	  // happened: you supplied an object or symbol value to React (as a prop, key,
-	  // DOM attribute, CSS property, string ref, etc.) and when React tried to
-	  // coerce it to a string using `'' + value`, an exception was thrown.
-	  //
-	  // The most common types that will cause this exception are `Symbol` instances
-	  // and Temporal objects like `Temporal.Instant`. But any object that has a
-	  // `valueOf` or `[Symbol.toPrimitive]` method that throws will also cause this
-	  // exception. (Library authors do this to prevent users from using built-in
-	  // numeric operators like `+` or comparison operators like `>=` because custom
-	  // methods are needed to perform accurate arithmetic or comparison.)
-	  //
-	  // To fix the problem, coerce this object or symbol value to a string before
-	  // passing it to React. The most reliable way is usually `String(value)`.
-	  //
-	  // To find which value is throwing, check the browser or debugger console.
-	  // Before this exception was thrown, there should be `console.error` output
-	  // that shows the type (Symbol, Temporal.PlainDate, etc.) that caused the
-	  // problem and how that type was used: key, atrribute, input value prop, etc.
-	  // In most cases, this console output also shows the component and its
-	  // ancestor components where the exception happened.
-	  //
-	  // eslint-disable-next-line react-internal/safe-string-coercion
-	  return '' + value;
-	}
-	function checkKeyStringCoercion(value) {
-	  {
-	    if (willCoercionThrow(value)) {
-	      error('The provided key is an unsupported type %s.' + ' This value must be coerced to a string before before using it here.', typeName(value));
-
-	      return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
-	    }
-	  }
-	}
-
-	var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
-	var RESERVED_PROPS = {
-	  key: true,
-	  ref: true,
-	  __self: true,
-	  __source: true
-	};
-	var specialPropKeyWarningShown;
-	var specialPropRefWarningShown;
-
-	function hasValidRef(config) {
-	  {
-	    if (hasOwnProperty.call(config, 'ref')) {
-	      var getter = Object.getOwnPropertyDescriptor(config, 'ref').get;
-
-	      if (getter && getter.isReactWarning) {
-	        return false;
-	      }
-	    }
-	  }
-
-	  return config.ref !== undefined;
-	}
-
-	function hasValidKey(config) {
-	  {
-	    if (hasOwnProperty.call(config, 'key')) {
-	      var getter = Object.getOwnPropertyDescriptor(config, 'key').get;
-
-	      if (getter && getter.isReactWarning) {
-	        return false;
-	      }
-	    }
-	  }
-
-	  return config.key !== undefined;
-	}
-
-	function warnIfStringRefCannotBeAutoConverted(config, self) {
-	  {
-	    if (typeof config.ref === 'string' && ReactCurrentOwner.current && self) ;
-	  }
-	}
-
-	function defineKeyPropWarningGetter(props, displayName) {
-	  {
-	    var warnAboutAccessingKey = function () {
-	      if (!specialPropKeyWarningShown) {
-	        specialPropKeyWarningShown = true;
-
-	        error('%s: `key` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://reactjs.org/link/special-props)', displayName);
-	      }
-	    };
-
-	    warnAboutAccessingKey.isReactWarning = true;
-	    Object.defineProperty(props, 'key', {
-	      get: warnAboutAccessingKey,
-	      configurable: true
-	    });
-	  }
-	}
-
-	function defineRefPropWarningGetter(props, displayName) {
-	  {
-	    var warnAboutAccessingRef = function () {
-	      if (!specialPropRefWarningShown) {
-	        specialPropRefWarningShown = true;
-
-	        error('%s: `ref` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://reactjs.org/link/special-props)', displayName);
-	      }
-	    };
-
-	    warnAboutAccessingRef.isReactWarning = true;
-	    Object.defineProperty(props, 'ref', {
-	      get: warnAboutAccessingRef,
-	      configurable: true
-	    });
-	  }
-	}
-	/**
-	 * Factory method to create a new React element. This no longer adheres to
-	 * the class pattern, so do not use new to call it. Also, instanceof check
-	 * will not work. Instead test $$typeof field against Symbol.for('react.element') to check
-	 * if something is a React Element.
-	 *
-	 * @param {*} type
-	 * @param {*} props
-	 * @param {*} key
-	 * @param {string|object} ref
-	 * @param {*} owner
-	 * @param {*} self A *temporary* helper to detect places where `this` is
-	 * different from the `owner` when React.createElement is called, so that we
-	 * can warn. We want to get rid of owner and replace string `ref`s with arrow
-	 * functions, and as long as `this` and owner are the same, there will be no
-	 * change in behavior.
-	 * @param {*} source An annotation object (added by a transpiler or otherwise)
-	 * indicating filename, line number, and/or other information.
-	 * @internal
-	 */
-
-
-	var ReactElement = function (type, key, ref, self, source, owner, props) {
-	  var element = {
-	    // This tag allows us to uniquely identify this as a React Element
-	    $$typeof: REACT_ELEMENT_TYPE,
-	    // Built-in properties that belong on the element
-	    type: type,
-	    key: key,
-	    ref: ref,
-	    props: props,
-	    // Record the component responsible for creating this element.
-	    _owner: owner
-	  };
-
-	  {
-	    // The validation flag is currently mutative. We put it on
-	    // an external backing store so that we can freeze the whole object.
-	    // This can be replaced with a WeakMap once they are implemented in
-	    // commonly used development environments.
-	    element._store = {}; // To make comparing ReactElements easier for testing purposes, we make
-	    // the validation flag non-enumerable (where possible, which should
-	    // include every environment we run tests in), so the test framework
-	    // ignores it.
-
-	    Object.defineProperty(element._store, 'validated', {
-	      configurable: false,
-	      enumerable: false,
-	      writable: true,
-	      value: false
-	    }); // self and source are DEV only properties.
-
-	    Object.defineProperty(element, '_self', {
-	      configurable: false,
-	      enumerable: false,
-	      writable: false,
-	      value: self
-	    }); // Two elements created in two different places should be considered
-	    // equal for testing purposes and therefore we hide it from enumeration.
-
-	    Object.defineProperty(element, '_source', {
-	      configurable: false,
-	      enumerable: false,
-	      writable: false,
-	      value: source
-	    });
-
-	    if (Object.freeze) {
-	      Object.freeze(element.props);
-	      Object.freeze(element);
-	    }
-	  }
-
-	  return element;
-	};
-	/**
-	 * https://github.com/reactjs/rfcs/pull/107
-	 * @param {*} type
-	 * @param {object} props
-	 * @param {string} key
-	 */
-
-	function jsxDEV(type, config, maybeKey, source, self) {
-	  {
-	    var propName; // Reserved names are extracted
-
-	    var props = {};
-	    var key = null;
-	    var ref = null; // Currently, key can be spread in as a prop. This causes a potential
-	    // issue if key is also explicitly declared (ie. <div {...props} key="Hi" />
-	    // or <div key="Hi" {...props} /> ). We want to deprecate key spread,
-	    // but as an intermediary step, we will use jsxDEV for everything except
-	    // <div {...props} key="Hi" />, because we aren't currently able to tell if
-	    // key is explicitly declared to be undefined or not.
-
-	    if (maybeKey !== undefined) {
-	      {
-	        checkKeyStringCoercion(maybeKey);
-	      }
-
-	      key = '' + maybeKey;
-	    }
-
-	    if (hasValidKey(config)) {
-	      {
-	        checkKeyStringCoercion(config.key);
-	      }
-
-	      key = '' + config.key;
-	    }
-
-	    if (hasValidRef(config)) {
-	      ref = config.ref;
-	      warnIfStringRefCannotBeAutoConverted(config, self);
-	    } // Remaining properties are added to a new props object
-
-
-	    for (propName in config) {
-	      if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
-	        props[propName] = config[propName];
-	      }
-	    } // Resolve default props
-
-
-	    if (type && type.defaultProps) {
-	      var defaultProps = type.defaultProps;
-
-	      for (propName in defaultProps) {
-	        if (props[propName] === undefined) {
-	          props[propName] = defaultProps[propName];
-	        }
-	      }
-	    }
-
-	    if (key || ref) {
-	      var displayName = typeof type === 'function' ? type.displayName || type.name || 'Unknown' : type;
-
-	      if (key) {
-	        defineKeyPropWarningGetter(props, displayName);
-	      }
-
-	      if (ref) {
-	        defineRefPropWarningGetter(props, displayName);
-	      }
-	    }
-
-	    return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props);
-	  }
-	}
-
-	var ReactCurrentOwner$1 = ReactSharedInternals.ReactCurrentOwner;
-	var ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame;
-
-	function setCurrentlyValidatingElement$1(element) {
-	  {
-	    if (element) {
-	      var owner = element._owner;
-	      var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null);
-	      ReactDebugCurrentFrame$1.setExtraStackFrame(stack);
-	    } else {
-	      ReactDebugCurrentFrame$1.setExtraStackFrame(null);
-	    }
-	  }
-	}
-
-	var propTypesMisspellWarningShown;
-
-	{
-	  propTypesMisspellWarningShown = false;
-	}
-	/**
-	 * Verifies the object is a ReactElement.
-	 * See https://reactjs.org/docs/react-api.html#isvalidelement
-	 * @param {?object} object
-	 * @return {boolean} True if `object` is a ReactElement.
-	 * @final
-	 */
-
-
-	function isValidElement(object) {
-	  {
-	    return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
-	  }
-	}
-
-	function getDeclarationErrorAddendum() {
-	  {
-	    if (ReactCurrentOwner$1.current) {
-	      var name = getComponentNameFromType(ReactCurrentOwner$1.current.type);
-
-	      if (name) {
-	        return '\n\nCheck the render method of `' + name + '`.';
-	      }
-	    }
-
-	    return '';
-	  }
-	}
-
-	function getSourceInfoErrorAddendum(source) {
-	  {
-
-	    return '';
-	  }
-	}
-	/**
-	 * Warn if there's no key explicitly set on dynamic arrays of children or
-	 * object keys are not valid. This allows us to keep track of children between
-	 * updates.
-	 */
-
-
-	var ownerHasKeyUseWarning = {};
-
-	function getCurrentComponentErrorInfo(parentType) {
-	  {
-	    var info = getDeclarationErrorAddendum();
-
-	    if (!info) {
-	      var parentName = typeof parentType === 'string' ? parentType : parentType.displayName || parentType.name;
-
-	      if (parentName) {
-	        info = "\n\nCheck the top-level render call using <" + parentName + ">.";
-	      }
-	    }
-
-	    return info;
-	  }
-	}
-	/**
-	 * Warn if the element doesn't have an explicit key assigned to it.
-	 * This element is in an array. The array could grow and shrink or be
-	 * reordered. All children that haven't already been validated are required to
-	 * have a "key" property assigned to it. Error statuses are cached so a warning
-	 * will only be shown once.
-	 *
-	 * @internal
-	 * @param {ReactElement} element Element that requires a key.
-	 * @param {*} parentType element's parent's type.
-	 */
-
-
-	function validateExplicitKey(element, parentType) {
-	  {
-	    if (!element._store || element._store.validated || element.key != null) {
-	      return;
-	    }
-
-	    element._store.validated = true;
-	    var currentComponentErrorInfo = getCurrentComponentErrorInfo(parentType);
-
-	    if (ownerHasKeyUseWarning[currentComponentErrorInfo]) {
-	      return;
-	    }
-
-	    ownerHasKeyUseWarning[currentComponentErrorInfo] = true; // Usually the current owner is the offender, but if it accepts children as a
-	    // property, it may be the creator of the child that's responsible for
-	    // assigning it a key.
-
-	    var childOwner = '';
-
-	    if (element && element._owner && element._owner !== ReactCurrentOwner$1.current) {
-	      // Give the component that originally created this child.
-	      childOwner = " It was passed a child from " + getComponentNameFromType(element._owner.type) + ".";
-	    }
-
-	    setCurrentlyValidatingElement$1(element);
-
-	    error('Each child in a list should have a unique "key" prop.' + '%s%s See https://reactjs.org/link/warning-keys for more information.', currentComponentErrorInfo, childOwner);
-
-	    setCurrentlyValidatingElement$1(null);
-	  }
-	}
-	/**
-	 * Ensure that every element either is passed in a static location, in an
-	 * array with an explicit keys property defined, or in an object literal
-	 * with valid key property.
-	 *
-	 * @internal
-	 * @param {ReactNode} node Statically passed child of any type.
-	 * @param {*} parentType node's parent's type.
-	 */
-
-
-	function validateChildKeys(node, parentType) {
-	  {
-	    if (typeof node !== 'object') {
-	      return;
-	    }
-
-	    if (isArray(node)) {
-	      for (var i = 0; i < node.length; i++) {
-	        var child = node[i];
-
-	        if (isValidElement(child)) {
-	          validateExplicitKey(child, parentType);
-	        }
-	      }
-	    } else if (isValidElement(node)) {
-	      // This element was passed in a valid location.
-	      if (node._store) {
-	        node._store.validated = true;
-	      }
-	    } else if (node) {
-	      var iteratorFn = getIteratorFn(node);
-
-	      if (typeof iteratorFn === 'function') {
-	        // Entry iterators used to provide implicit keys,
-	        // but now we print a separate warning for them later.
-	        if (iteratorFn !== node.entries) {
-	          var iterator = iteratorFn.call(node);
-	          var step;
-
-	          while (!(step = iterator.next()).done) {
-	            if (isValidElement(step.value)) {
-	              validateExplicitKey(step.value, parentType);
-	            }
-	          }
-	        }
-	      }
-	    }
-	  }
-	}
-	/**
-	 * Given an element, validate that its props follow the propTypes definition,
-	 * provided by the type.
-	 *
-	 * @param {ReactElement} element
-	 */
-
-
-	function validatePropTypes(element) {
-	  {
-	    var type = element.type;
-
-	    if (type === null || type === undefined || typeof type === 'string') {
-	      return;
-	    }
-
-	    var propTypes;
-
-	    if (typeof type === 'function') {
-	      propTypes = type.propTypes;
-	    } else if (typeof type === 'object' && (type.$$typeof === REACT_FORWARD_REF_TYPE || // Note: Memo only checks outer props here.
-	    // Inner props are checked in the reconciler.
-	    type.$$typeof === REACT_MEMO_TYPE)) {
-	      propTypes = type.propTypes;
-	    } else {
-	      return;
-	    }
-
-	    if (propTypes) {
-	      // Intentionally inside to avoid triggering lazy initializers:
-	      var name = getComponentNameFromType(type);
-	      checkPropTypes(propTypes, element.props, 'prop', name, element);
-	    } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
-	      propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers:
-
-	      var _name = getComponentNameFromType(type);
-
-	      error('Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?', _name || 'Unknown');
-	    }
-
-	    if (typeof type.getDefaultProps === 'function' && !type.getDefaultProps.isReactClassApproved) {
-	      error('getDefaultProps is only used on classic React.createClass ' + 'definitions. Use a static property named `defaultProps` instead.');
-	    }
-	  }
-	}
-	/**
-	 * Given a fragment, validate that it can only be provided with fragment props
-	 * @param {ReactElement} fragment
-	 */
-
-
-	function validateFragmentProps(fragment) {
-	  {
-	    var keys = Object.keys(fragment.props);
-
-	    for (var i = 0; i < keys.length; i++) {
-	      var key = keys[i];
-
-	      if (key !== 'children' && key !== 'key') {
-	        setCurrentlyValidatingElement$1(fragment);
-
-	        error('Invalid prop `%s` supplied to `React.Fragment`. ' + 'React.Fragment can only have `key` and `children` props.', key);
-
-	        setCurrentlyValidatingElement$1(null);
-	        break;
-	      }
-	    }
-
-	    if (fragment.ref !== null) {
-	      setCurrentlyValidatingElement$1(fragment);
-
-	      error('Invalid attribute `ref` supplied to `React.Fragment`.');
-
-	      setCurrentlyValidatingElement$1(null);
-	    }
-	  }
-	}
-
-	var didWarnAboutKeySpread = {};
-	function jsxWithValidation(type, props, key, isStaticChildren, source, self) {
-	  {
-	    var validType = isValidElementType(type); // We warn in this case but don't throw. We expect the element creation to
-	    // succeed and there will likely be errors in render.
-
-	    if (!validType) {
-	      var info = '';
-
-	      if (type === undefined || typeof type === 'object' && type !== null && Object.keys(type).length === 0) {
-	        info += ' You likely forgot to export your component from the file ' + "it's defined in, or you might have mixed up default and named imports.";
-	      }
-
-	      var sourceInfo = getSourceInfoErrorAddendum();
-
-	      if (sourceInfo) {
-	        info += sourceInfo;
-	      } else {
-	        info += getDeclarationErrorAddendum();
-	      }
-
-	      var typeString;
-
-	      if (type === null) {
-	        typeString = 'null';
-	      } else if (isArray(type)) {
-	        typeString = 'array';
-	      } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
-	        typeString = "<" + (getComponentNameFromType(type.type) || 'Unknown') + " />";
-	        info = ' Did you accidentally export a JSX literal instead of a component?';
-	      } else {
-	        typeString = typeof type;
-	      }
-
-	      error('React.jsx: type is invalid -- expected a string (for ' + 'built-in components) or a class/function (for composite ' + 'components) but got: %s.%s', typeString, info);
-	    }
-
-	    var element = jsxDEV(type, props, key, source, self); // The result can be nullish if a mock or a custom function is used.
-	    // TODO: Drop this when these are no longer allowed as the type argument.
-
-	    if (element == null) {
-	      return element;
-	    } // Skip key warning if the type isn't valid since our key validation logic
-	    // doesn't expect a non-string/function type and can throw confusing errors.
-	    // We don't want exception behavior to differ between dev and prod.
-	    // (Rendering will throw with a helpful message and as soon as the type is
-	    // fixed, the key warnings will appear.)
-
-
-	    if (validType) {
-	      var children = props.children;
-
-	      if (children !== undefined) {
-	        if (isStaticChildren) {
-	          if (isArray(children)) {
-	            for (var i = 0; i < children.length; i++) {
-	              validateChildKeys(children[i], type);
-	            }
-
-	            if (Object.freeze) {
-	              Object.freeze(children);
-	            }
-	          } else {
-	            error('React.jsx: Static children should always be an array. ' + 'You are likely explicitly calling React.jsxs or React.jsxDEV. ' + 'Use the Babel transform instead.');
-	          }
-	        } else {
-	          validateChildKeys(children, type);
-	        }
-	      }
-	    }
-
-	    {
-	      if (hasOwnProperty.call(props, 'key')) {
-	        var componentName = getComponentNameFromType(type);
-	        var keys = Object.keys(props).filter(function (k) {
-	          return k !== 'key';
-	        });
-	        var beforeExample = keys.length > 0 ? '{key: someKey, ' + keys.join(': ..., ') + ': ...}' : '{key: someKey}';
-
-	        if (!didWarnAboutKeySpread[componentName + beforeExample]) {
-	          var afterExample = keys.length > 0 ? '{' + keys.join(': ..., ') + ': ...}' : '{}';
-
-	          error('A props object containing a "key" prop is being spread into JSX:\n' + '  let props = %s;\n' + '  <%s {...props} />\n' + 'React keys must be passed directly to JSX without using spread:\n' + '  let props = %s;\n' + '  <%s key={someKey} {...props} />', beforeExample, componentName, afterExample, componentName);
-
-	          didWarnAboutKeySpread[componentName + beforeExample] = true;
-	        }
-	      }
-	    }
-
-	    if (type === REACT_FRAGMENT_TYPE) {
-	      validateFragmentProps(element);
-	    } else {
-	      validatePropTypes(element);
-	    }
-
-	    return element;
-	  }
-	} // These two functions exist to still get child warnings in dev
-	// even with the prod transform. This means that jsxDEV is purely
-	// opt-in behavior for better messages but that we won't stop
-	// giving you warnings if you use production apis.
-
-	function jsxWithValidationStatic(type, props, key) {
-	  {
-	    return jsxWithValidation(type, props, key, true);
-	  }
-	}
-	function jsxWithValidationDynamic(type, props, key) {
-	  {
-	    return jsxWithValidation(type, props, key, false);
-	  }
-	}
-
-	var jsx =  jsxWithValidationDynamic ; // we may want to special case jsxs internally to take advantage of static children.
-	// for now we can ship identical prod functions
-
-	var jsxs =  jsxWithValidationStatic ;
-
-	reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
-	reactJsxRuntime_development.jsx = jsx;
-	reactJsxRuntime_development.jsxs = jsxs;
-	  })();
-	}
-	return reactJsxRuntime_development;
-}
-
-var hasRequiredJsxRuntime;
-
-function requireJsxRuntime () {
-	if (hasRequiredJsxRuntime) return jsxRuntime.exports;
-	hasRequiredJsxRuntime = 1;
-
-	if (process.env.NODE_ENV === 'production') {
-	  jsxRuntime.exports = requireReactJsxRuntime_production_min();
-	} else {
-	  jsxRuntime.exports = requireReactJsxRuntime_development();
-	}
-	return jsxRuntime.exports;
-}
-
-var jsxRuntimeExports = requireJsxRuntime();
-
 function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
 
-const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => (jsxRuntimeExports.jsxs(ScrollAreaPrimitive.Root, { ref: ref, className: cn("relative overflow-hidden", className), ...props, children: [jsxRuntimeExports.jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children: children }), jsxRuntimeExports.jsx(ScrollBar, {}), jsxRuntimeExports.jsx(ScrollAreaPrimitive.Corner, {})] })));
+const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => (jsxs(ScrollAreaPrimitive.Root, { ref: ref, className: cn("relative overflow-hidden", className), ...props, children: [jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children: children }), jsx(ScrollBar, {}), jsx(ScrollAreaPrimitive.Corner, {})] })));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => (jsxRuntimeExports.jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { ref: ref, orientation: orientation, className: cn("flex touch-none select-none transition-colors", orientation === "vertical" &&
+const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => (jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { ref: ref, orientation: orientation, className: cn("flex touch-none select-none transition-colors", orientation === "vertical" &&
         "h-full w-2.5 border-l border-l-transparent p-[1px]", orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]", className), ...props, children: jsxRuntimeExports.jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" }) })));
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]", className), ...props, children: jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" }) })));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0" +
@@ -1431,11 +69,11 @@ const buttonVariants = cva("inline-flex items-center justify-center gap-2 whites
 });
 const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
-    return (jsxRuntimeExports.jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref: ref, ...props }));
+    return (jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref: ref, ...props }));
 });
 Button.displayName = "Button";
 
-const Progress = React.forwardRef(({ className, value, ...props }, ref) => (jsxRuntimeExports.jsx(ProgressPrimitive.Root, { ref: ref, className: cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className), ...props, children: jsxRuntimeExports.jsx(ProgressPrimitive.Indicator, { className: "h-full w-full flex-1 bg-primary transition-all", style: { transform: `translateX(-${100 - (value || 0)}%)` } }) })));
+const Progress = React.forwardRef(({ className, value, ...props }, ref) => (jsx(ProgressPrimitive.Root, { ref: ref, className: cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className), ...props, children: jsx(ProgressPrimitive.Indicator, { className: "h-full w-full flex-1 bg-primary transition-all", style: { transform: `translateX(-${100 - (value || 0)}%)` } }) })));
 Progress.displayName = ProgressPrimitive.Root.displayName;
 
 const createEmptyColumn = (width = 12) => ({
@@ -2469,35 +1107,35 @@ const useFormStore = create((set, get) => ({
 
 const Input = React.forwardRef(({ className, type, ...props }, ref) => {
     // h-9 to match icon buttons and default buttons.
-    return (jsxRuntimeExports.jsx("input", { type: type, className: cn("flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", className), ref: ref, ...props }));
+    return (jsx("input", { type: type, className: cn("flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", className), ref: ref, ...props }));
 });
 Input.displayName = "Input";
 
 const Textarea = React.forwardRef(({ className, ...props }, ref) => {
-    return (jsxRuntimeExports.jsx("textarea", { className: cn("flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", className), ref: ref, ...props }));
+    return (jsx("textarea", { className: cn("flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", className), ref: ref, ...props }));
 });
 Textarea.displayName = "Textarea";
 
-const Checkbox = React.forwardRef(({ className, ...props }, ref) => (jsxRuntimeExports.jsx(CheckboxPrimitive.Root, { ref: ref, className: cn("peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", className), ...props, children: jsxRuntimeExports.jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: jsxRuntimeExports.jsx(Check, { className: "h-4 w-4" }) }) })));
+const Checkbox = React.forwardRef(({ className, ...props }, ref) => (jsx(CheckboxPrimitive.Root, { ref: ref, className: cn("peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", className), ...props, children: jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: jsx(Check, { className: "h-4 w-4" }) }) })));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-const Switch = React.forwardRef(({ className, ...props }, ref) => (jsxRuntimeExports.jsx(SwitchPrimitives.Root, { className: cn("peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input", className), ...props, ref: ref, children: jsxRuntimeExports.jsx(SwitchPrimitives.Thumb, { className: cn("pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0") }) })));
+const Switch = React.forwardRef(({ className, ...props }, ref) => (jsx(SwitchPrimitives.Root, { className: cn("peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input", className), ...props, ref: ref, children: jsx(SwitchPrimitives.Thumb, { className: cn("pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0") }) })));
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
-const Label = React.forwardRef(({ className, ...props }, ref) => (jsxRuntimeExports.jsx(LabelPrimitive.Root, { ref: ref, className: cn(labelVariants(), className), ...props })));
+const Label = React.forwardRef(({ className, ...props }, ref) => (jsx(LabelPrimitive.Root, { ref: ref, className: cn(labelVariants(), className), ...props })));
 Label.displayName = LabelPrimitive.Root.displayName;
 
 const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
-    return (jsxRuntimeExports.jsx(RadioGroupPrimitive.Root, { className: cn("grid gap-2", className), ...props, ref: ref }));
+    return (jsx(RadioGroupPrimitive.Root, { className: cn("grid gap-2", className), ...props, ref: ref }));
 });
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => {
-    return (jsxRuntimeExports.jsx(RadioGroupPrimitive.Item, { ref: ref, className: cn("aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", className), ...props, children: jsxRuntimeExports.jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: jsxRuntimeExports.jsx(Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) }) }));
+    return (jsx(RadioGroupPrimitive.Item, { ref: ref, className: cn("aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", className), ...props, children: jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: jsx(Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) }) }));
 });
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
-const Slider = React.forwardRef(({ className, ...props }, ref) => (jsxRuntimeExports.jsxs(SliderPrimitive.Root, { ref: ref, className: cn("relative flex w-full touch-none select-none items-center", className), ...props, children: [jsxRuntimeExports.jsx(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: jsxRuntimeExports.jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }), jsxRuntimeExports.jsx(SliderPrimitive.Thumb, { className: "block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" })] })));
+const Slider = React.forwardRef(({ className, ...props }, ref) => (jsxs(SliderPrimitive.Root, { ref: ref, className: cn("relative flex w-full touch-none select-none items-center", className), ...props, children: [jsx(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }), jsx(SliderPrimitive.Thumb, { className: "block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" })] })));
 Slider.displayName = SliderPrimitive.Root.displayName;
 
 const badgeVariants = cva(
@@ -2517,35 +1155,35 @@ const badgeVariants = cva(
     },
 });
 function Badge({ className, variant, ...props }) {
-    return (jsxRuntimeExports.jsx("div", { className: cn(badgeVariants({ variant }), className), ...props }));
+    return (jsx("div", { className: cn(badgeVariants({ variant }), className), ...props }));
 }
 
 const Tooltip = TooltipPrimitive.Root;
 const TooltipTrigger = TooltipPrimitive.Trigger;
-const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (jsxRuntimeExports.jsx(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]", className), ...props })));
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (jsx(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]", className), ...props })));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 const Select = SelectPrimitive.Root;
 const SelectValue = SelectPrimitive.Value;
-const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (jsxRuntimeExports.jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn("flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className), ...props, children: [children, jsxRuntimeExports.jsx(SelectPrimitive.Icon, { asChild: true, children: jsxRuntimeExports.jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })] })));
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn("flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className), ...props, children: [children, jsx(SelectPrimitive.Icon, { asChild: true, children: jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })] })));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (jsxRuntimeExports.jsx(SelectPrimitive.ScrollUpButton, { ref: ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: jsxRuntimeExports.jsx(ChevronUp, { className: "h-4 w-4" }) })));
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (jsx(SelectPrimitive.ScrollUpButton, { ref: ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: jsx(ChevronUp, { className: "h-4 w-4" }) })));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (jsxRuntimeExports.jsx(SelectPrimitive.ScrollDownButton, { ref: ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: jsxRuntimeExports.jsx(ChevronDown, { className: "h-4 w-4" }) })));
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (jsx(SelectPrimitive.ScrollDownButton, { ref: ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: jsx(ChevronDown, { className: "h-4 w-4" }) })));
 SelectScrollDownButton.displayName =
     SelectPrimitive.ScrollDownButton.displayName;
-const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => (jsxRuntimeExports.jsx(SelectPrimitive.Portal, { children: jsxRuntimeExports.jsxs(SelectPrimitive.Content, { ref: ref, className: cn("relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]", position === "popper" &&
-            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, ...props, children: [jsxRuntimeExports.jsx(SelectScrollUpButton, {}), jsxRuntimeExports.jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" &&
-                    "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"), children: children }), jsxRuntimeExports.jsx(SelectScrollDownButton, {})] }) })));
+const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => (jsx(SelectPrimitive.Portal, { children: jsxs(SelectPrimitive.Content, { ref: ref, className: cn("relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]", position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, ...props, children: [jsx(SelectScrollUpButton, {}), jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" &&
+                    "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"), children: children }), jsx(SelectScrollDownButton, {})] }) })));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (jsxRuntimeExports.jsx(SelectPrimitive.Label, { ref: ref, className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className), ...props })));
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (jsx(SelectPrimitive.Label, { ref: ref, className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className), ...props })));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (jsxRuntimeExports.jsxs(SelectPrimitive.Item, { ref: ref, className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [jsxRuntimeExports.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: jsxRuntimeExports.jsx(SelectPrimitive.ItemIndicator, { children: jsxRuntimeExports.jsx(Check, { className: "h-4 w-4" }) }) }), jsxRuntimeExports.jsx(SelectPrimitive.ItemText, { children: children })] })));
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (jsxs(SelectPrimitive.Item, { ref: ref, className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: jsx(SelectPrimitive.ItemIndicator, { children: jsx(Check, { className: "h-4 w-4" }) }) }), jsx(SelectPrimitive.ItemText, { children: children })] })));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (jsxRuntimeExports.jsx(SelectPrimitive.Separator, { ref: ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })));
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (jsx(SelectPrimitive.Separator, { ref: ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
-const Separator = React.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (jsxRuntimeExports.jsx(SeparatorPrimitive.Root, { ref: ref, decorative: decorative, orientation: orientation, className: cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className), ...props })));
+const Separator = React.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (jsx(SeparatorPrimitive.Root, { ref: ref, decorative: decorative, orientation: orientation, className: cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className), ...props })));
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 
 function DroppableContainer({ rowId, columnId, containerFieldId, isPreviewMode, getFieldValue, setFieldValue, fields, gap, padding, hasBorder, direction, background, flexWrap = 'wrap', justifyContent = 'flex-start', alignItems = 'stretch', fieldSize = 'normal', }) {
@@ -2580,7 +1218,7 @@ function DroppableContainer({ rowId, columnId, containerFieldId, isPreviewMode,
     // In preview mode, remove container padding/gap for consistent alignment with rows
     const effectivePadding = isPreviewMode ? 0 : padding * 4;
     const effectiveGap = isPreviewMode ? 0 : gap * 4;
-    return (jsxRuntimeExports.jsx("div", { ref: setNodeRef, className: `rounded-lg transition-all ${!isPreviewMode ? 'border-2 border-dashed border-primary/40 bg-primary/5' : ''} ${hasBorder ? 'border border-solid border-border' : ''} ${isOver ? 'border-primary bg-primary/15' : ''}`, style: {
+    return (jsx("div", { ref: setNodeRef, className: `rounded-lg transition-all ${!isPreviewMode ? 'border-2 border-dashed border-primary/40 bg-primary/5' : ''} ${hasBorder ? 'border border-solid border-border' : ''} ${isOver ? 'border-primary bg-primary/15' : ''}`, style: {
             display: 'flex',
             flexDirection: direction,
             flexWrap: flexWrap,
@@ -2590,14 +1228,14 @@ function DroppableContainer({ rowId, columnId, containerFieldId, isPreviewMode,
             padding: `${effectivePadding}px`,
             background: background || (isPreviewMode ? 'transparent' : undefined),
             minHeight: isPreviewMode ? undefined : '100px',
-        }, children: fields.length === 0 && !isPreviewMode ? (jsxRuntimeExports.jsxs("div", { className: "flex-1 flex flex-col items-center justify-center gap-2 py-4", children: [jsxRuntimeExports.jsx("div", { className: "w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center", children: jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6 text-primary/60", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 6v6m0 0v6m0-6h6m-6 0H6" }) }) }), jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-primary/70", children: "Drop fields here" }), jsxRuntimeExports.jsx("span", { className: "text-xs text-muted-foreground", children: "Drag inputs, dropdowns, or other fields" })] })) : (fields.map((field) => {
+        }, children: fields.length === 0 && !isPreviewMode ? (jsxs("div", { className: "flex-1 flex flex-col items-center justify-center gap-2 py-4", children: [jsx("div", { className: "w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center", children: jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6 text-primary/60", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 6v6m0 0v6m0-6h6m-6 0H6" }) }) }), jsx("span", { className: "text-sm font-medium text-primary/70", children: "Drop fields here" }), jsx("span", { className: "text-xs text-muted-foreground", children: "Drag inputs, dropdowns, or other fields" })] })) : (fields.map((field) => {
             const fieldWidth = getFieldWidth(field);
-            return (jsxRuntimeExports.jsx("div", { className: "relative", style: {
+            return (jsx("div", { className: "relative", style: {
                     zIndex: 20,
                     width: fieldWidth,
                     flexGrow: fieldWidth === 'auto' ? 1 : 0,
                     flexShrink: fieldWidth === 'auto' ? 1 : 0,
-                }, children: jsxRuntimeExports.jsx(CanvasField, { field: field, rowId: rowId, columnId: columnId, isPreviewMode: isPreviewMode, getFieldValue: getFieldValue, setFieldValue: setFieldValue, isInsideContainer: true, fieldSize: fieldSize }) }, field.id));
+                }, children: jsx(CanvasField, { field: field, rowId: rowId, columnId: columnId, isPreviewMode: isPreviewMode, getFieldValue: getFieldValue, setFieldValue: setFieldValue, isInsideContainer: true, fieldSize: fieldSize }) }, field.id));
         })) }));
 }
 function parseCssString(css) {
@@ -2669,7 +1307,7 @@ function validateField(value, validation, fieldType) {
 }
 function RatingField({ value, onChange, maxRating = 5, disabled, className }) {
     const [hoverValue, setHoverValue] = useState(0);
-    return (jsxRuntimeExports.jsx("div", { className: `flex gap-1 ${className || ''}`, children: Array.from({ length: maxRating }, (_, i) => i + 1).map((star) => (jsxRuntimeExports.jsx("button", { type: "button", disabled: disabled, className: "p-0.5 transition-colors disabled:opacity-50", onMouseEnter: () => !disabled && setHoverValue(star), onMouseLeave: () => setHoverValue(0), onClick: () => !disabled && onChange(star), children: jsxRuntimeExports.jsx(Star, { className: `h-4 w-4 ${star <= (hoverValue || value)
+    return (jsx("div", { className: `flex gap-1 ${className || ''}`, children: Array.from({ length: maxRating }, (_, i) => i + 1).map((star) => (jsx("button", { type: "button", disabled: disabled, className: "p-0.5 transition-colors disabled:opacity-50", onMouseEnter: () => !disabled && setHoverValue(star), onMouseLeave: () => setHoverValue(0), onClick: () => !disabled && onChange(star), children: jsx(Star, { className: `h-4 w-4 ${star <= (hoverValue || value)
                     ? 'fill-yellow-400 text-yellow-400'
                     : 'text-muted-foreground'}` }) }, star))) }));
 }
@@ -2741,7 +1379,7 @@ function SignatureField({ value, onChange, disabled, width = 400, height = 150,
         ctx.fillRect(0, 0, canvas.width, canvas.height);
         onChange('');
     };
-    return (jsxRuntimeExports.jsxs("div", { className: `space-y-2 ${className || ''}`, children: [jsxRuntimeExports.jsx("canvas", { ref: canvasRef, width: width, height: height, className: "border border-border rounded-md cursor-crosshair", onMouseDown: startDrawing, onMouseMove: draw, onMouseUp: stopDrawing, onMouseLeave: stopDrawing }), jsxRuntimeExports.jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: clearSignature, disabled: disabled, children: "Clear Signature" })] }));
+    return (jsxs("div", { className: `space-y-2 ${className || ''}`, children: [jsx("canvas", { ref: canvasRef, width: width, height: height, className: "border border-border rounded-md cursor-crosshair", onMouseDown: startDrawing, onMouseMove: draw, onMouseUp: stopDrawing, onMouseLeave: stopDrawing }), jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: clearSignature, disabled: disabled, children: "Clear Signature" })] }));
 }
 function MultiSelectField({ value, onChange, options, disabled, maxItems, className }) {
     const addItem = (item) => {
@@ -2754,9 +1392,9 @@ function MultiSelectField({ value, onChange, options, disabled, maxItems, classN
     const removeItem = (item) => {
         onChange(value.filter(v => v !== item));
     };
-    return (jsxRuntimeExports.jsxs("div", { className: `space-y-2 ${className || ''}`, children: [jsxRuntimeExports.jsx("div", { className: "flex flex-wrap gap-2 min-h-[36px] p-2 border border-border rounded-md bg-background", children: value.map((item, i) => (jsxRuntimeExports.jsxs(Badge, { variant: "secondary", className: "gap-1", children: [item, !disabled && (jsxRuntimeExports.jsx("button", { type: "button", onClick: () => removeItem(item), className: "ml-1 hover:text-destructive", children: jsxRuntimeExports.jsx(X, { className: "h-3 w-3" }) }))] }, i))) }), jsxRuntimeExports.jsxs(Select, { disabled: disabled || (maxItems !== undefined && value.length >= maxItems), onValueChange: addItem, children: [jsxRuntimeExports.jsx(SelectTrigger, { children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Add item..." }) }), jsxRuntimeExports.jsx(SelectContent, { children: options
+    return (jsxs("div", { className: `space-y-2 ${className || ''}`, children: [jsx("div", { className: "flex flex-wrap gap-2 min-h-[36px] p-2 border border-border rounded-md bg-background", children: value.map((item, i) => (jsxs(Badge, { variant: "secondary", className: "gap-1", children: [item, !disabled && (jsx("button", { type: "button", onClick: () => removeItem(item), className: "ml-1 hover:text-destructive", children: jsx(X, { className: "h-3 w-3" }) }))] }, i))) }), jsxs(Select, { disabled: disabled || (maxItems !== undefined && value.length >= maxItems), onValueChange: addItem, children: [jsx(SelectTrigger, { children: jsx(SelectValue, { placeholder: "Add item..." }) }), jsx(SelectContent, { children: options
                             .filter(opt => !value.includes(opt))
-                            .map((option, i) => (jsxRuntimeExports.jsx(SelectItem, { value: option, children: option }, i))) })] })] }));
+                            .map((option, i) => (jsx(SelectItem, { value: option, children: option }, i))) })] })] }));
 }
 function CanvasField({ field, rowId, columnId, isPreviewMode: externalPreviewMode, getFieldValue: externalGetFieldValue, setFieldValue: externalSetFieldValue, isInsideContainer = false, fieldSize = 'normal' }) {
     const store = useFormStore();
@@ -2866,27 +1504,27 @@ function CanvasField({ field, rowId, columnId, isPreviewMode: externalPreviewMod
         const errorClass = hasError ? 'border-destructive focus-visible:ring-destructive' : '';
         switch (field.type) {
             case 'input':
-                return (jsxRuntimeExports.jsx(Input, { placeholder: field.props.placeholder, disabled: isFieldDisabled, readOnly: field.props.readOnly, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
+                return (jsx(Input, { placeholder: field.props.placeholder, disabled: isFieldDisabled, readOnly: field.props.readOnly, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
                         ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                         ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
                     }, "data-testid": `field-input-${field.id}` }));
             case 'password':
-                return (jsxRuntimeExports.jsx(Input, { type: "password", placeholder: field.props.placeholder, disabled: isFieldDisabled, value: isPreviewMode ? localValue : '', onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
+                return (jsx(Input, { type: "password", placeholder: field.props.placeholder, disabled: isFieldDisabled, value: isPreviewMode ? localValue : '', onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
                         ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                         ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
                     }, "data-testid": `field-password-${field.id}` }));
             case 'phone':
-                return (jsxRuntimeExports.jsx(Input, { type: "tel", placeholder: field.props.placeholder || '+1 (555) 000-0000', disabled: isFieldDisabled, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
+                return (jsx(Input, { type: "tel", placeholder: field.props.placeholder || '+1 (555) 000-0000', disabled: isFieldDisabled, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
                         ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                         ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
                     }, "data-testid": `field-phone-${field.id}` }));
             case 'url':
-                return (jsxRuntimeExports.jsx(Input, { type: "url", placeholder: field.props.placeholder || 'https://example.com', disabled: isFieldDisabled, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
+                return (jsx(Input, { type: "url", placeholder: field.props.placeholder || 'https://example.com', disabled: isFieldDisabled, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
                         ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                         ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
                     }, "data-testid": `field-url-${field.id}` }));
             case 'textarea':
-                return (jsxRuntimeExports.jsx(Textarea, { placeholder: field.props.placeholder, disabled: isFieldDisabled, readOnly: field.props.readOnly, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `min-h-[80px] ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
+                return (jsx(Textarea, { placeholder: field.props.placeholder, disabled: isFieldDisabled, readOnly: field.props.readOnly, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `min-h-[80px] ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
                         ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                         ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
                     }, "data-testid": `field-textarea-${field.id}` }));
@@ -2894,140 +1532,140 @@ function CanvasField({ field, rowId, columnId, isPreviewMode: externalPreviewMod
                 const dropdownOptions = typeof field.props.optionsString === 'string'
                     ? field.props.optionsString.split('\n').filter((o) => o.trim())
                     : (field.props.optionsString || []);
-                return (jsxRuntimeExports.jsxs(Select, { disabled: isFieldDisabled, value: isPreviewMode ? localValue : undefined, onValueChange: (v) => isPreviewMode && handleChange(v), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
+                return (jsxs(Select, { disabled: isFieldDisabled, value: isPreviewMode ? localValue : undefined, onValueChange: (v) => isPreviewMode && handleChange(v), children: [jsx(SelectTrigger, { className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
                                 ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                                 ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
-                            }, "data-testid": `field-dropdown-${field.id}`, children: jsxRuntimeExports.jsx(SelectValue, { placeholder: field.props.placeholder || 'Select...' }) }), jsxRuntimeExports.jsx(SelectContent, { children: dropdownOptions.map((option, i) => (jsxRuntimeExports.jsx(SelectItem, { value: option, children: option }, i))) })] }));
+                            }, "data-testid": `field-dropdown-${field.id}`, children: jsx(SelectValue, { placeholder: field.props.placeholder || 'Select...' }) }), jsx(SelectContent, { children: dropdownOptions.map((option, i) => (jsx(SelectItem, { value: option, children: option }, i))) })] }));
             case 'checkbox':
-                return (jsxRuntimeExports.jsxs("div", { className: `flex items-center gap-2 ${field.customStyle?.inputClassName || ''}`, children: [jsxRuntimeExports.jsx(Checkbox, { disabled: isFieldDisabled, "data-testid": `field-checkbox-${field.id}` }), jsxRuntimeExports.jsx("span", { className: "text-sm text-foreground", style: {
+                return (jsxs("div", { className: `flex items-center gap-2 ${field.customStyle?.inputClassName || ''}`, children: [jsx(Checkbox, { disabled: isFieldDisabled, "data-testid": `field-checkbox-${field.id}` }), jsx("span", { className: "text-sm text-foreground", style: {
                                 ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                             }, children: field.props.label })] }));
             case 'radio':
                 const radioOptions = typeof field.props.optionsString === 'string'
                     ? field.props.optionsString.split('\n').filter((o) => o.trim())
                     : (field.props.optionsString || []);
-                return (jsxRuntimeExports.jsx(RadioGroup, { disabled: isFieldDisabled, className: field.customStyle?.inputClassName || '', children: radioOptions.map((option, i) => (jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(RadioGroupItem, { value: option, id: `${field.id}-${i}`, "data-testid": `field-radio-${field.id}-${i}` }), jsxRuntimeExports.jsx(Label, { htmlFor: `${field.id}-${i}`, className: "text-sm", style: {
+                return (jsx(RadioGroup, { disabled: isFieldDisabled, className: field.customStyle?.inputClassName || '', children: radioOptions.map((option, i) => (jsxs("div", { className: "flex items-center gap-2", children: [jsx(RadioGroupItem, { value: option, id: `${field.id}-${i}`, "data-testid": `field-radio-${field.id}-${i}` }), jsx(Label, { htmlFor: `${field.id}-${i}`, className: "text-sm", style: {
                                     ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                                 }, children: option })] }, i))) }));
             case 'toggle':
-                return (jsxRuntimeExports.jsxs("div", { className: `flex items-center gap-2 ${field.customStyle?.inputClassName || ''}`, children: [jsxRuntimeExports.jsx(Switch, { disabled: isFieldDisabled, "data-testid": `field-toggle-${field.id}` }), jsxRuntimeExports.jsx("span", { className: "text-sm text-foreground", style: {
+                return (jsxs("div", { className: `flex items-center gap-2 ${field.customStyle?.inputClassName || ''}`, children: [jsx(Switch, { disabled: isFieldDisabled, "data-testid": `field-toggle-${field.id}` }), jsx("span", { className: "text-sm text-foreground", style: {
                                 ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                             }, children: field.props.label })] }));
             case 'multiselect':
-                return (jsxRuntimeExports.jsx(MultiSelectField, { value: multiSelectValue, onChange: (v) => {
+                return (jsx(MultiSelectField, { value: multiSelectValue, onChange: (v) => {
                         setMultiSelectValue(v);
                         setFieldValue(field.props.key, v);
                     }, options: field.props.optionsString || [], disabled: isFieldDisabled, maxItems: field.props.multiSelectConfig?.maxItems, className: field.customStyle?.inputClassName }));
             case 'date':
-                return (jsxRuntimeExports.jsx(Input, { type: "date", disabled: isFieldDisabled, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
+                return (jsx(Input, { type: "date", disabled: isFieldDisabled, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
                         ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                         ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
                     }, "data-testid": `field-date-${field.id}` }));
             case 'time':
-                return (jsxRuntimeExports.jsx(Input, { type: "time", disabled: isFieldDisabled, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
+                return (jsx(Input, { type: "time", disabled: isFieldDisabled, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
                         ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                         ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
                     }, "data-testid": `field-time-${field.id}` }));
             case 'daterange':
-                return (jsxRuntimeExports.jsxs("div", { className: `flex gap-2 items-center ${field.customStyle?.inputClassName || ''}`, children: [jsxRuntimeExports.jsx(Input, { type: "date", disabled: isFieldDisabled, className: inputSize, style: {
+                return (jsxs("div", { className: `flex gap-2 items-center ${field.customStyle?.inputClassName || ''}`, children: [jsx(Input, { type: "date", disabled: isFieldDisabled, className: inputSize, style: {
                                 ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
-                            }, "data-testid": `field-daterange-start-${field.id}` }), jsxRuntimeExports.jsx("span", { className: "text-muted-foreground", style: {
+                            }, "data-testid": `field-daterange-start-${field.id}` }), jsx("span", { className: "text-muted-foreground", style: {
                                 ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
-                            }, children: "to" }), jsxRuntimeExports.jsx(Input, { type: "date", disabled: isFieldDisabled, className: inputSize, style: {
+                            }, children: "to" }), jsx(Input, { type: "date", disabled: isFieldDisabled, className: inputSize, style: {
                                 ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
                             }, "data-testid": `field-daterange-end-${field.id}` })] }));
             case 'number':
-                return (jsxRuntimeExports.jsx(Input, { type: "number", placeholder: field.props.placeholder, disabled: isFieldDisabled, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
+                return (jsx(Input, { type: "number", placeholder: field.props.placeholder, disabled: isFieldDisabled, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
                         ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                         ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
                     }, "data-testid": `field-number-${field.id}` }));
             case 'email':
-                return (jsxRuntimeExports.jsx(Input, { type: "email", placeholder: field.props.placeholder, disabled: isFieldDisabled, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
+                return (jsx(Input, { type: "email", placeholder: field.props.placeholder, disabled: isFieldDisabled, value: isPreviewMode ? localValue : (field.props.defaultValue || ''), onChange: (e) => isPreviewMode && handleChange(e.target.value), onBlur: handleBlur, tabIndex: tabIndexValue, className: `${inputSize} ${errorClass} ${field.customStyle?.inputClassName || ''}`, style: {
                         ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                         ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
                     }, "data-testid": `field-email-${field.id}` }));
             case 'file':
-                return (jsxRuntimeExports.jsxs("div", { className: `space-y-2 ${field.customStyle?.inputClassName || ''}`, children: [jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center w-full", children: jsxRuntimeExports.jsxs("label", { className: `flex flex-col items-center justify-center w-full h-32 border-2 border-border border-dashed rounded-lg cursor-pointer bg-muted/30 hover:bg-muted/50 ${isFieldDisabled ? 'opacity-50 cursor-not-allowed' : ''}`, style: {
+                return (jsxs("div", { className: `space-y-2 ${field.customStyle?.inputClassName || ''}`, children: [jsx("div", { className: "flex items-center justify-center w-full", children: jsxs("label", { className: `flex flex-col items-center justify-center w-full h-32 border-2 border-border border-dashed rounded-lg cursor-pointer bg-muted/30 hover:bg-muted/50 ${isFieldDisabled ? 'opacity-50 cursor-not-allowed' : ''}`, style: {
                                     ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
-                                }, children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center pt-5 pb-6", children: [jsxRuntimeExports.jsx(Upload, { className: "w-8 h-8 mb-2 text-muted-foreground" }), jsxRuntimeExports.jsxs("p", { className: "mb-1 text-sm text-muted-foreground", style: {
+                                }, children: [jsxs("div", { className: "flex flex-col items-center justify-center pt-5 pb-6", children: [jsx(Upload, { className: "w-8 h-8 mb-2 text-muted-foreground" }), jsxs("p", { className: "mb-1 text-sm text-muted-foreground", style: {
                                                     ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
-                                                }, children: [jsxRuntimeExports.jsx("span", { className: "font-semibold", children: "Click to upload" }), " or drag and drop"] }), jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: field.props.fileConfig?.accept || 'Any file type' })] }), jsxRuntimeExports.jsx("input", { type: "file", className: "hidden", disabled: isFieldDisabled, multiple: field.props.fileConfig?.multiple, accept: field.props.fileConfig?.accept, "data-testid": `field-file-${field.id}` })] }) }), filesValue.length > 0 && (jsxRuntimeExports.jsx("div", { className: "space-y-1", children: filesValue.map((file, i) => (jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between p-2 bg-muted rounded", children: [jsxRuntimeExports.jsx("span", { className: "text-sm truncate", children: file.name }), jsxRuntimeExports.jsx(Button, { size: "icon", variant: "ghost", onClick: () => setFilesValue(filesValue.filter((_, idx) => idx !== i)), children: jsxRuntimeExports.jsx(X, { className: "h-4 w-4" }) })] }, i))) }))] }));
+                                                }, children: [jsx("span", { className: "font-semibold", children: "Click to upload" }), " or drag and drop"] }), jsx("p", { className: "text-xs text-muted-foreground", children: field.props.fileConfig?.accept || 'Any file type' })] }), jsx("input", { type: "file", className: "hidden", disabled: isFieldDisabled, multiple: field.props.fileConfig?.multiple, accept: field.props.fileConfig?.accept, "data-testid": `field-file-${field.id}` })] }) }), filesValue.length > 0 && (jsx("div", { className: "space-y-1", children: filesValue.map((file, i) => (jsxs("div", { className: "flex items-center justify-between p-2 bg-muted rounded", children: [jsx("span", { className: "text-sm truncate", children: file.name }), jsx(Button, { size: "icon", variant: "ghost", onClick: () => setFilesValue(filesValue.filter((_, idx) => idx !== i)), children: jsx(X, { className: "h-4 w-4" }) })] }, i))) }))] }));
             case 'signature':
-                return (jsxRuntimeExports.jsx(SignatureField, { value: signatureValue, onChange: (v) => {
+                return (jsx(SignatureField, { value: signatureValue, onChange: (v) => {
                         setSignatureValue(v);
                         setFieldValue(field.props.key, v);
                     }, disabled: isFieldDisabled, width: field.props.signatureConfig?.width, height: field.props.signatureConfig?.height, className: field.customStyle?.inputClassName }));
             case 'rating':
-                return (jsxRuntimeExports.jsx(RatingField, { value: ratingValue, onChange: (v) => {
+                return (jsx(RatingField, { value: ratingValue, onChange: (v) => {
                         setRatingValue(v);
                         setFieldValue(field.props.key, v);
                     }, maxRating: field.props.ratingConfig?.maxRating || 5, disabled: isFieldDisabled, className: field.customStyle?.inputClassName }));
             case 'richtext':
-                return (jsxRuntimeExports.jsx(Textarea, { placeholder: field.props.placeholder || 'Enter rich text content...', disabled: isFieldDisabled, value: isPreviewMode ? localValue : '', onChange: (e) => isPreviewMode && handleChange(e.target.value), className: `min-h-[120px] ${field.customStyle?.inputClassName || ''}`, style: {
+                return (jsx(Textarea, { placeholder: field.props.placeholder || 'Enter rich text content...', disabled: isFieldDisabled, value: isPreviewMode ? localValue : '', onChange: (e) => isPreviewMode && handleChange(e.target.value), className: `min-h-[120px] ${field.customStyle?.inputClassName || ''}`, style: {
                         ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                         ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
                     }, "data-testid": `field-richtext-${field.id}` }));
             case 'autocomplete':
-                return (jsxRuntimeExports.jsx("div", { className: `relative ${field.customStyle?.inputClassName || ''}`, children: jsxRuntimeExports.jsx(Input, { placeholder: field.props.placeholder || 'Start typing...', disabled: isFieldDisabled, value: isPreviewMode ? localValue : '', onChange: (e) => isPreviewMode && handleChange(e.target.value), className: `${inputSize} ${errorClass}`, style: {
+                return (jsx("div", { className: `relative ${field.customStyle?.inputClassName || ''}`, children: jsx(Input, { placeholder: field.props.placeholder || 'Start typing...', disabled: isFieldDisabled, value: isPreviewMode ? localValue : '', onChange: (e) => isPreviewMode && handleChange(e.target.value), className: `${inputSize} ${errorClass}`, style: {
                             ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                             ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
                         }, "data-testid": `field-autocomplete-${field.id}` }) }));
             case 'slider':
-                return (jsxRuntimeExports.jsxs("div", { className: `space-y-2 ${field.customStyle?.inputClassName || ''}`, children: [jsxRuntimeExports.jsx(Slider, { value: sliderValue, onValueChange: (v) => {
+                return (jsxs("div", { className: `space-y-2 ${field.customStyle?.inputClassName || ''}`, children: [jsx(Slider, { value: sliderValue, onValueChange: (v) => {
                                 setSliderValue(v);
                                 setFieldValue(field.props.key, v[0]);
-                            }, min: field.validation?.min || 0, max: field.validation?.max || 100, step: 1, disabled: isFieldDisabled, "data-testid": `field-slider-${field.id}` }), jsxRuntimeExports.jsxs("div", { className: "flex justify-between text-xs text-muted-foreground", children: [jsxRuntimeExports.jsx("span", { children: field.validation?.min || 0 }), jsxRuntimeExports.jsx("span", { className: "font-medium text-foreground", style: {
+                            }, min: field.validation?.min || 0, max: field.validation?.max || 100, step: 1, disabled: isFieldDisabled, "data-testid": `field-slider-${field.id}` }), jsxs("div", { className: "flex justify-between text-xs text-muted-foreground", children: [jsx("span", { children: field.validation?.min || 0 }), jsx("span", { className: "font-medium text-foreground", style: {
                                         ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
-                                    }, children: sliderValue[0] }), jsxRuntimeExports.jsx("span", { children: field.validation?.max || 100 })] })] }));
+                                    }, children: sliderValue[0] }), jsx("span", { children: field.validation?.max || 100 })] })] }));
             case 'header':
-                return (jsxRuntimeExports.jsx("h2", { className: `text-2xl font-bold text-foreground ${field.customStyle?.inputClassName || ''}`, style: {
+                return (jsx("h2", { className: `text-2xl font-bold text-foreground ${field.customStyle?.inputClassName || ''}`, style: {
                         ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                         ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
                     }, children: field.props.label }));
             case 'subheader':
-                return (jsxRuntimeExports.jsx("h3", { className: `text-lg font-semibold text-foreground ${field.customStyle?.inputClassName || ''}`, style: {
+                return (jsx("h3", { className: `text-lg font-semibold text-foreground ${field.customStyle?.inputClassName || ''}`, style: {
                         ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                         ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
                     }, children: field.props.label }));
             case 'label':
-                return (jsxRuntimeExports.jsx("span", { className: `text-sm font-medium text-foreground ${field.customStyle?.inputClassName || ''}`, style: {
+                return (jsx("span", { className: `text-sm font-medium text-foreground ${field.customStyle?.inputClassName || ''}`, style: {
                         ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                         ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
                     }, children: field.props.label }));
             case 'paragraph':
-                return (jsxRuntimeExports.jsx("p", { className: `text-sm text-muted-foreground ${field.customStyle?.inputClassName || ''}`, style: {
+                return (jsx("p", { className: `text-sm text-muted-foreground ${field.customStyle?.inputClassName || ''}`, style: {
                         ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                         ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
                     }, children: field.props.label }));
             case 'divider':
                 const dividerMargin = field.props.dividerMargin ?? 16;
-                return (jsxRuntimeExports.jsx(Separator, { className: field.customStyle?.inputClassName || '', style: {
+                return (jsx(Separator, { className: field.customStyle?.inputClassName || '', style: {
                         marginTop: dividerMargin,
                         marginBottom: dividerMargin,
                         ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
                     } }));
             case 'spacer':
                 const spacerHeight = field.props.spacerHeight ?? 24;
-                return (jsxRuntimeExports.jsx("div", { className: field.customStyle?.inputClassName || '', style: {
+                return (jsx("div", { className: field.customStyle?.inputClassName || '', style: {
                         height: spacerHeight,
                         ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
                     } }));
             case 'alert':
-                return (jsxRuntimeExports.jsxs("div", { className: `flex items-start gap-3 p-4 bg-muted rounded-md border border-border ${field.customStyle?.inputClassName || ''}`, style: {
+                return (jsxs("div", { className: `flex items-start gap-3 p-4 bg-muted rounded-md border border-border ${field.customStyle?.inputClassName || ''}`, style: {
                         ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                         ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
-                    }, children: [jsxRuntimeExports.jsx(AlertCircle, { className: "h-5 w-5 text-muted-foreground shrink-0 mt-0.5" }), jsxRuntimeExports.jsx("p", { className: "text-sm text-foreground", children: field.props.label })] }));
+                    }, children: [jsx(AlertCircle, { className: "h-5 w-5 text-muted-foreground shrink-0 mt-0.5" }), jsx("p", { className: "text-sm text-foreground", children: field.props.label })] }));
             case 'image':
                 const imageUrl = field.props.imageUrl;
                 const imageWidth = field.props.imageWidth || '100%';
                 const imageHeight = field.props.imageHeight || 'auto';
-                return (jsxRuntimeExports.jsx("div", { className: `w-full ${field.customStyle?.inputClassName || ''}`, style: {
+                return (jsx("div", { className: `w-full ${field.customStyle?.inputClassName || ''}`, style: {
                         ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
-                    }, children: imageUrl ? (jsxRuntimeExports.jsx("img", { src: imageUrl, alt: field.props.label || 'Image', style: { width: imageWidth, height: imageHeight, objectFit: 'cover' }, className: "rounded-md" })) : (jsxRuntimeExports.jsx("div", { className: "w-full h-32 bg-muted rounded-md flex items-center justify-center", children: jsxRuntimeExports.jsx("span", { className: "text-sm text-muted-foreground", children: "Image placeholder" }) })) }));
+                    }, children: imageUrl ? (jsx("img", { src: imageUrl, alt: field.props.label || 'Image', style: { width: imageWidth, height: imageHeight, objectFit: 'cover' }, className: "rounded-md" })) : (jsx("div", { className: "w-full h-32 bg-muted rounded-md flex items-center justify-center", children: jsx("span", { className: "text-sm text-muted-foreground", children: "Image placeholder" }) })) }));
             case 'button':
                 const buttonVariant = field.props.buttonConfig?.variant || 'default';
                 const buttonAction = field.props.buttonConfig?.action || 'submit';
-                return (jsxRuntimeExports.jsx(Button, { variant: buttonVariant, disabled: isFieldDisabled, className: field.customStyle?.inputClassName || '', style: {
+                return (jsx(Button, { variant: buttonVariant, disabled: isFieldDisabled, className: field.customStyle?.inputClassName || '', style: {
                         ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                         ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
                     }, onClick: () => {
@@ -3063,7 +1701,7 @@ function CanvasField({ field, rowId, columnId, isPreviewMode: externalPreviewMod
                     }
                     return result;
                 };
-                return (jsxRuntimeExports.jsx(Input, { value: formatPatternValue(localValue), onChange: (e) => {
+                return (jsx(Input, { value: formatPatternValue(localValue), onChange: (e) => {
                         const digits = e.target.value.replace(/\D/g, '');
                         handleChange(digits);
                     }, placeholder: field.props.placeholder, disabled: isFieldDisabled, className: `${inputSize} ${field.customStyle?.inputClassName || ''}`, style: {
@@ -3073,11 +1711,11 @@ function CanvasField({ field, rowId, columnId, isPreviewMode: externalPreviewMod
             case 'qrcode':
                 const qrValue = field.props.qrCodeConfig?.value || 'https://example.com';
                 const qrSize = field.props.qrCodeConfig?.size || 128;
-                return (jsxRuntimeExports.jsx("div", { className: `flex items-center justify-center p-4 bg-white rounded-md border border-border ${field.customStyle?.inputClassName || ''}`, style: {
+                return (jsx("div", { className: `flex items-center justify-center p-4 bg-white rounded-md border border-border ${field.customStyle?.inputClassName || ''}`, style: {
                         width: qrSize + 32,
                         height: qrSize + 32,
                         ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
-                    }, children: jsxRuntimeExports.jsx(QRCodeSVG, { value: qrValue, size: qrSize, level: "M", "data-testid": `field-qrcode-${field.id}` }) }));
+                    }, children: jsx(QRCodeSVG, { value: qrValue, size: qrSize, level: "M", "data-testid": `field-qrcode-${field.id}` }) }));
             case 'container':
                 const containerGap = field.props.containerConfig?.gap ?? 4;
                 const containerPadding = field.props.containerConfig?.padding ?? 4;
@@ -3088,7 +1726,7 @@ function CanvasField({ field, rowId, columnId, isPreviewMode: externalPreviewMod
                 const containerJustifyContent = field.props.containerConfig?.justifyContent || 'flex-start';
                 const containerAlignItems = field.props.containerConfig?.alignItems || 'stretch';
                 const containerFieldSize = field.props.containerConfig?.fieldSize || 'normal';
-                return (jsxRuntimeExports.jsx(DroppableContainer, { rowId: rowId, columnId: columnId, containerFieldId: field.id, isPreviewMode: isPreviewMode, getFieldValue: getFieldValue, setFieldValue: setFieldValue, fields: containerFields, gap: containerGap, padding: containerPadding, hasBorder: hasBorder, direction: containerDirection, background: field.props.containerConfig?.background, flexWrap: containerFlexWrap, justifyContent: containerJustifyContent, alignItems: containerAlignItems, fieldSize: containerFieldSize }));
+                return (jsx(DroppableContainer, { rowId: rowId, columnId: columnId, containerFieldId: field.id, isPreviewMode: isPreviewMode, getFieldValue: getFieldValue, setFieldValue: setFieldValue, fields: containerFields, gap: containerGap, padding: containerPadding, hasBorder: hasBorder, direction: containerDirection, background: field.props.containerConfig?.background, flexWrap: containerFlexWrap, justifyContent: containerJustifyContent, alignItems: containerAlignItems, fieldSize: containerFieldSize }));
             case 'table':
                 const tableColumns = field.props.tableConfig?.columns || [
                     { key: 'col1', label: 'Column 1', type: 'text' },
@@ -3142,15 +1780,15 @@ function CanvasField({ field, rowId, columnId, isPreviewMode: externalPreviewMod
                         setFieldValue(field.props.key, currentRows);
                     }
                 };
-                return (jsxRuntimeExports.jsxs("div", { className: `w-full overflow-x-auto ${field.customStyle?.inputClassName || ''}`, children: [jsxRuntimeExports.jsxs("table", { className: `w-full ${tableFontClass} ${isBordered ? 'border border-border' : ''}`, children: [jsxRuntimeExports.jsx("thead", { className: "bg-muted/50", children: jsxRuntimeExports.jsxs("tr", { children: [showRowNumbers && (jsxRuntimeExports.jsx("th", { className: `${isCompact ? 'px-2 py-1' : 'px-3 py-2'} text-left font-medium text-muted-foreground w-12 ${isBordered ? 'border border-border' : ''}`, children: "#" })), tableColumns.map((col) => (jsxRuntimeExports.jsxs("th", { className: `${isCompact ? 'px-2 py-1' : 'px-3 py-2'} text-left font-medium ${isBordered ? 'border border-border' : ''}`, style: { width: col.width }, children: [col.label, col.required && jsxRuntimeExports.jsx("span", { className: "text-destructive ml-1", children: "*" })] }, col.key))), allowDeleteRows && (jsxRuntimeExports.jsx("th", { className: `${isCompact ? 'px-2 py-1' : 'px-3 py-2'} w-12 ${isBordered ? 'border border-border' : ''}` }))] }) }), jsxRuntimeExports.jsx("tbody", { children: tableRows.map((row, rowIndex) => (jsxRuntimeExports.jsxs("tr", { className: isStriped && rowIndex % 2 === 1 ? 'bg-muted/30' : '', children: [showRowNumbers && (jsxRuntimeExports.jsx("td", { className: `${isCompact ? 'px-2 py-1' : 'px-3 py-2'} text-muted-foreground ${isBordered ? 'border border-border' : ''}`, children: rowIndex + 1 })), tableColumns.map((col) => (jsxRuntimeExports.jsx("td", { className: `${isCompact ? 'px-1 py-1' : 'px-2 py-1'} ${isBordered ? 'border border-border' : ''}`, children: col.type === 'checkbox' ? (jsxRuntimeExports.jsx("input", { type: "checkbox", checked: row[col.key] || false, onChange: (e) => handleTableCellChange(rowIndex, col.key, e.target.checked), disabled: !isPreviewMode, className: "h-4 w-4" })) : col.type === 'select' ? (jsxRuntimeExports.jsxs("select", { value: row[col.key] || '', onChange: (e) => handleTableCellChange(rowIndex, col.key, e.target.value), disabled: !isPreviewMode, className: `w-full ${isCompact ? 'h-6 text-xs' : 'h-8 text-sm'} px-2 rounded border border-input bg-background`, children: [jsxRuntimeExports.jsx("option", { value: "", children: col.placeholder || 'Select...' }), col.options?.map((opt) => (jsxRuntimeExports.jsx("option", { value: opt.value, children: opt.label }, opt.value)))] })) : (jsxRuntimeExports.jsx("input", { type: col.type === 'number' ? 'number' : col.type === 'email' ? 'email' : col.type === 'date' ? 'date' : 'text', value: row[col.key] || '', onChange: (e) => handleTableCellChange(rowIndex, col.key, e.target.value), disabled: !isPreviewMode, placeholder: col.placeholder, className: `w-full ${isCompact ? 'h-6 text-xs' : 'h-8 text-sm'} px-2 rounded border border-input bg-background focus:outline-none focus:ring-1 focus:ring-ring` })) }, col.key))), allowDeleteRows && tableRows.length > minRows && (jsxRuntimeExports.jsx("td", { className: `${isCompact ? 'px-2 py-1' : 'px-3 py-2'} ${isBordered ? 'border border-border' : ''}`, children: jsxRuntimeExports.jsx("button", { onClick: () => deleteTableRow(rowIndex), disabled: !isPreviewMode, className: "text-muted-foreground hover:text-destructive transition-colors", children: jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsxRuntimeExports.jsx("path", { d: "M18 6L6 18M6 6l12 12" }) }) }) }))] }, rowIndex))) })] }), allowAddRows && tableRows.length < maxRows && (jsxRuntimeExports.jsxs("button", { onClick: addTableRow, disabled: !isPreviewMode, className: `mt-2 flex items-center gap-1 text-sm text-primary hover:underline ${!isPreviewMode ? 'opacity-50 cursor-not-allowed' : ''}`, children: [jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsxRuntimeExports.jsx("path", { d: "M12 5v14M5 12h14" }) }), "Add Row"] }))] }));
+                return (jsxs("div", { className: `w-full overflow-x-auto ${field.customStyle?.inputClassName || ''}`, children: [jsxs("table", { className: `w-full ${tableFontClass} ${isBordered ? 'border border-border' : ''}`, children: [jsx("thead", { className: "bg-muted/50", children: jsxs("tr", { children: [showRowNumbers && (jsx("th", { className: `${isCompact ? 'px-2 py-1' : 'px-3 py-2'} text-left font-medium text-muted-foreground w-12 ${isBordered ? 'border border-border' : ''}`, children: "#" })), tableColumns.map((col) => (jsxs("th", { className: `${isCompact ? 'px-2 py-1' : 'px-3 py-2'} text-left font-medium ${isBordered ? 'border border-border' : ''}`, style: { width: col.width }, children: [col.label, col.required && jsx("span", { className: "text-destructive ml-1", children: "*" })] }, col.key))), allowDeleteRows && (jsx("th", { className: `${isCompact ? 'px-2 py-1' : 'px-3 py-2'} w-12 ${isBordered ? 'border border-border' : ''}` }))] }) }), jsx("tbody", { children: tableRows.map((row, rowIndex) => (jsxs("tr", { className: isStriped && rowIndex % 2 === 1 ? 'bg-muted/30' : '', children: [showRowNumbers && (jsx("td", { className: `${isCompact ? 'px-2 py-1' : 'px-3 py-2'} text-muted-foreground ${isBordered ? 'border border-border' : ''}`, children: rowIndex + 1 })), tableColumns.map((col) => (jsx("td", { className: `${isCompact ? 'px-1 py-1' : 'px-2 py-1'} ${isBordered ? 'border border-border' : ''}`, children: col.type === 'checkbox' ? (jsx("input", { type: "checkbox", checked: row[col.key] || false, onChange: (e) => handleTableCellChange(rowIndex, col.key, e.target.checked), disabled: !isPreviewMode, className: "h-4 w-4" })) : col.type === 'select' ? (jsxs("select", { value: row[col.key] || '', onChange: (e) => handleTableCellChange(rowIndex, col.key, e.target.value), disabled: !isPreviewMode, className: `w-full ${isCompact ? 'h-6 text-xs' : 'h-8 text-sm'} px-2 rounded border border-input bg-background`, children: [jsx("option", { value: "", children: col.placeholder || 'Select...' }), col.options?.map((opt) => (jsx("option", { value: opt.value, children: opt.label }, opt.value)))] })) : (jsx("input", { type: col.type === 'number' ? 'number' : col.type === 'email' ? 'email' : col.type === 'date' ? 'date' : 'text', value: row[col.key] || '', onChange: (e) => handleTableCellChange(rowIndex, col.key, e.target.value), disabled: !isPreviewMode, placeholder: col.placeholder, className: `w-full ${isCompact ? 'h-6 text-xs' : 'h-8 text-sm'} px-2 rounded border border-input bg-background focus:outline-none focus:ring-1 focus:ring-ring` })) }, col.key))), allowDeleteRows && tableRows.length > minRows && (jsx("td", { className: `${isCompact ? 'px-2 py-1' : 'px-3 py-2'} ${isBordered ? 'border border-border' : ''}`, children: jsx("button", { onClick: () => deleteTableRow(rowIndex), disabled: !isPreviewMode, className: "text-muted-foreground hover:text-destructive transition-colors", children: jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsx("path", { d: "M18 6L6 18M6 6l12 12" }) }) }) }))] }, rowIndex))) })] }), allowAddRows && tableRows.length < maxRows && (jsxs("button", { onClick: addTableRow, disabled: !isPreviewMode, className: `mt-2 flex items-center gap-1 text-sm text-primary hover:underline ${!isPreviewMode ? 'opacity-50 cursor-not-allowed' : ''}`, children: [jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsx("path", { d: "M12 5v14M5 12h14" }) }), "Add Row"] }))] }));
             default:
-                return (jsxRuntimeExports.jsxs("div", { className: "p-3 bg-muted rounded-md text-sm text-muted-foreground", children: ["Unknown field type: ", field.type] }));
+                return (jsxs("div", { className: "p-3 bg-muted rounded-md text-sm text-muted-foreground", children: ["Unknown field type: ", field.type] }));
         }
     };
     const showLabel = !['checkbox', 'toggle', 'header', 'subheader', 'label', 'paragraph', 'divider', 'spacer', 'alert', 'button', 'qrcode', 'container', 'table', 'image'].includes(field.type);
     // For container fields, render with minimal wrapper to allow drop zone to work
     if (field.type === 'container') {
-        return (jsxRuntimeExports.jsxs("div", { className: `
+        return (jsxs("div", { className: `
           relative group rounded-md transition-all duration-150
           ${isSelected && !isPreviewMode ? 'ring-2 ring-primary ring-offset-2 ring-offset-background' : ''}
           ${field.props.hidden && !isPreviewMode ? 'opacity-50' : ''}
@@ -3165,10 +1803,10 @@ function CanvasField({ field, rowId, columnId, isPreviewMode: externalPreviewMod
                 ...(field.customStyle?.marginLeft ? { marginLeft: field.customStyle.marginLeft } : {}),
                 ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
                 ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
-            }, "data-testid": `canvas-field-${field.id}`, children: [!isPreviewMode && (jsxRuntimeExports.jsxs("div", { className: "absolute top-0 left-0 right-0 h-8 cursor-pointer z-30 flex items-center justify-between px-3 bg-primary/10 rounded-t-md border-b border-primary/20", onClick: handleClick, "data-testid": `container-header-${field.id}`, children: [jsxRuntimeExports.jsx("span", { className: "text-xs font-medium text-primary", children: field.props.label || 'Container' }), jsxRuntimeExports.jsx("button", { onClick: (e) => {
+            }, "data-testid": `canvas-field-${field.id}`, children: [!isPreviewMode && (jsxs("div", { className: "absolute top-0 left-0 right-0 h-8 cursor-pointer z-30 flex items-center justify-between px-3 bg-primary/10 rounded-t-md border-b border-primary/20", onClick: handleClick, "data-testid": `container-header-${field.id}`, children: [jsx("span", { className: "text-xs font-medium text-primary", children: field.props.label || 'Container' }), jsx("button", { onClick: (e) => {
                                 e.stopPropagation();
                                 deleteField(rowId, columnId, field.id);
-                            }, className: "p-1 rounded hover:bg-destructive/20 text-destructive", "data-testid": `delete-container-${field.id}`, children: jsxRuntimeExports.jsx(Trash2, { className: "h-3 w-3" }) })] })), jsxRuntimeExports.jsx("div", { className: !isPreviewMode ? 'pt-8' : '', children: renderFieldContent() })] }));
+                            }, className: "p-1 rounded hover:bg-destructive/20 text-destructive", "data-testid": `delete-container-${field.id}`, children: jsx(Trash2, { className: "h-3 w-3" }) })] })), jsx("div", { className: !isPreviewMode ? 'pt-8' : '', children: renderFieldContent() })] }));
     }
     // Calculate dynamic classes based on fieldSize (from container or row)
     // When fieldSize is provided (from row or container), always use the size-specific styles
@@ -3204,7 +1842,7 @@ function CanvasField({ field, rowId, columnId, isPreviewMode: externalPreviewMod
             default: return `text-xs font-medium ${base}`;
         }
     };
-    return (jsxRuntimeExports.jsxs("div", { onClick: handleClick, className: `
+    return (jsxs("div", { onClick: handleClick, className: `
         relative group rounded-md transition-all duration-150 ${getPaddingClass()}
         ${isSelected && !isPreviewMode ? 'ring-2 ring-primary ring-offset-2 ring-offset-background bg-primary/5' : 'bg-transparent'}
         ${!isPreviewMode ? 'hover:bg-muted/30 cursor-pointer' : ''}
@@ -3220,16 +1858,16 @@ function CanvasField({ field, rowId, columnId, isPreviewMode: externalPreviewMod
             ...(field.customStyle?.marginLeft ? { marginLeft: field.customStyle.marginLeft } : {}),
             ...(field.customStyle?.color ? { color: field.customStyle.color } : {}),
             ...(field.customStyle?.backgroundColor ? { backgroundColor: field.customStyle.backgroundColor } : {}),
-        }, "data-testid": `canvas-field-${field.id}`, children: [!isPreviewMode && (jsxRuntimeExports.jsx("button", { onClick: (e) => {
+        }, "data-testid": `canvas-field-${field.id}`, children: [!isPreviewMode && (jsx("button", { onClick: (e) => {
                     e.stopPropagation();
                     deleteField(rowId, columnId, field.id);
-                }, className: "absolute -top-2 -right-2 z-30 p-1 rounded-full bg-destructive text-destructive-foreground opacity-0 group-hover:opacity-100 transition-opacity shadow-md", "data-testid": `button-delete-field-${field.id}`, children: jsxRuntimeExports.jsx(Trash2, { className: "h-3 w-3" }) })), !isPreviewMode && field.conditionalLogic?.enabled && (jsxRuntimeExports.jsx("div", { className: "absolute -top-2 -left-2 p-1 rounded-full bg-blue-500 text-white opacity-0 group-hover:opacity-100 transition-opacity shadow-md", title: "Has conditional logic", children: jsxRuntimeExports.jsx(Info, { className: "h-3 w-3" }) })), !isPreviewMode && field.type !== 'container' && (jsxRuntimeExports.jsx("div", { className: "absolute inset-0 z-10 cursor-pointer", onClick: handleClick, "data-testid": `field-click-overlay-${field.id}` })), jsxRuntimeExports.jsxs("div", { className: `${getSpacingClass()} relative ${field.type === 'container' ? 'z-20' : 'z-0'}`, children: [showLabel && (jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-0.5", children: [jsxRuntimeExports.jsxs(Label, { className: getLabelClass(), children: [field.props.label, isFieldRequired && (jsxRuntimeExports.jsx("span", { className: "text-destructive ml-0.5", children: "*" }))] }), field.props.tooltip && (jsxRuntimeExports.jsxs(Tooltip, { children: [jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: jsxRuntimeExports.jsx(HelpCircle, { className: `${fieldSize === 'compact' ? 'h-2.5 w-2.5' : fieldSize === 'comfortable' ? 'h-4 w-4' : 'h-3.5 w-3.5'} text-muted-foreground cursor-help` }) }), jsxRuntimeExports.jsx(TooltipContent, { children: jsxRuntimeExports.jsx("p", { className: "max-w-xs", children: field.props.tooltip }) })] }))] })), field.props.helpText && !isInsideContainer && (jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: field.props.helpText })), jsxRuntimeExports.jsx("div", { className: `${field.customStyle?.inputClassName || ''} ${fieldSize === 'compact'
+                }, className: "absolute -top-2 -right-2 z-30 p-1 rounded-full bg-destructive text-destructive-foreground opacity-0 group-hover:opacity-100 transition-opacity shadow-md", "data-testid": `button-delete-field-${field.id}`, children: jsx(Trash2, { className: "h-3 w-3" }) })), !isPreviewMode && field.conditionalLogic?.enabled && (jsx("div", { className: "absolute -top-2 -left-2 p-1 rounded-full bg-blue-500 text-white opacity-0 group-hover:opacity-100 transition-opacity shadow-md", title: "Has conditional logic", children: jsx(Info, { className: "h-3 w-3" }) })), !isPreviewMode && field.type !== 'container' && (jsx("div", { className: "absolute inset-0 z-10 cursor-pointer", onClick: handleClick, "data-testid": `field-click-overlay-${field.id}` })), jsxs("div", { className: `${getSpacingClass()} relative ${field.type === 'container' ? 'z-20' : 'z-0'}`, children: [showLabel && (jsxs("div", { className: "flex items-center gap-0.5", children: [jsxs(Label, { className: getLabelClass(), children: [field.props.label, isFieldRequired && (jsx("span", { className: "text-destructive ml-0.5", children: "*" }))] }), field.props.tooltip && (jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx(HelpCircle, { className: `${fieldSize === 'compact' ? 'h-2.5 w-2.5' : fieldSize === 'comfortable' ? 'h-4 w-4' : 'h-3.5 w-3.5'} text-muted-foreground cursor-help` }) }), jsx(TooltipContent, { children: jsx("p", { className: "max-w-xs", children: field.props.tooltip }) })] }))] })), field.props.helpText && !isInsideContainer && (jsx("p", { className: "text-xs text-muted-foreground", children: field.props.helpText })), jsx("div", { className: `${field.customStyle?.inputClassName || ''} ${fieldSize === 'compact'
                             ? '[&_input]:h-7 [&_input]:text-xs [&_select]:h-7 [&_textarea]:text-xs [&_textarea]:min-h-[60px]'
                             : fieldSize === 'comfortable'
                                 ? '[&_input]:h-11 [&_input]:text-base [&_select]:h-11 [&_textarea]:text-base [&_textarea]:min-h-[120px] [&_input]:px-4 [&_select]:px-4'
                                 : fieldSize === 'normal'
                                     ? '[&_input]:h-8 [&_input]:text-sm [&_select]:h-8 [&_textarea]:text-sm [&_textarea]:min-h-[80px]'
-                                    : ''}`, children: renderFieldContent() }), hasError && (jsxRuntimeExports.jsx("p", { className: `${fieldSize === 'compact' ? 'text-[10px]' : fieldSize === 'comfortable' ? 'text-base' : 'text-sm'} text-destructive`, "data-testid": `field-error-${field.id}`, children: error }))] })] }));
+                                    : ''}`, children: renderFieldContent() }), hasError && (jsx("p", { className: `${fieldSize === 'compact' ? 'text-[10px]' : fieldSize === 'comfortable' ? 'text-base' : 'text-sm'} text-destructive`, "data-testid": `field-error-${field.id}`, children: error }))] })] }));
 }
 
 function DroppableColumn({ row, column, }) {
@@ -3281,13 +1919,13 @@ function DroppableColumn({ row, column, }) {
             default: return 'text-xs';
         }
     };
-    return (jsxRuntimeExports.jsx("div", { ref: setNodeRef, onClick: handleClick, className: `
+    return (jsx("div", { ref: setNodeRef, onClick: handleClick, className: `
         ${getMinHeight()} rounded-md transition-all duration-150
         ${isPreviewMode ? '' : 'border border-dashed'}
         ${isOver ? 'bg-primary/10 border-primary' : isPreviewMode ? '' : 'border-border'}
         ${isSelected && !isPreviewMode ? 'ring-2 ring-primary ring-offset-2 ring-offset-background' : ''}
         ${!isPreviewMode ? 'hover:border-muted-foreground cursor-pointer' : ''}
-      `, style: { width: `${gridWidth}%` }, "data-testid": `column-${column.id}`, children: column.fields.length === 0 ? (!isPreviewMode && (jsxRuntimeExports.jsx("div", { className: `flex items-center justify-center h-full ${getEmptyMinHeight()} ${getTextSize()} text-muted-foreground`, children: "Drop here" }))) : (jsxRuntimeExports.jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: `${getColumnGap()}px`, padding: `${getColumnPadding()}px` }, children: column.fields.map((field, index) => (jsxRuntimeExports.jsx(CanvasField, { field: field, rowId: row.id, columnId: column.id, index: index, fieldSize: row.fieldSize }, field.id))) })) }));
+      `, style: { width: `${gridWidth}%` }, "data-testid": `column-${column.id}`, children: column.fields.length === 0 ? (!isPreviewMode && (jsx("div", { className: `flex items-center justify-center h-full ${getEmptyMinHeight()} ${getTextSize()} text-muted-foreground`, children: "Drop here" }))) : (jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: `${getColumnGap()}px`, padding: `${getColumnPadding()}px` }, children: column.fields.map((field, index) => (jsx(CanvasField, { field: field, rowId: row.id, columnId: column.id, index: index, fieldSize: row.fieldSize }, field.id))) })) }));
 }
 function CanvasRow({ row, index }) {
     const { selection, setSelection, deleteRow, addColumn, isPreviewMode, evaluateCondition } = useFormStore();
@@ -3359,47 +1997,47 @@ function CanvasRow({ row, index }) {
     // If this is a container-only row, render with minimal wrapper
     if (isSingleContainerRow) {
         const containerField = row.columns[0].fields[0];
-        return (jsxRuntimeExports.jsxs("div", { onClick: handleContainerClick, className: `
+        return (jsxs("div", { onClick: handleContainerClick, className: `
           relative group rounded-lg transition-all duration-150 overflow-visible
           ${!isPreviewMode ? 'hover:ring-2 hover:ring-primary/30' : ''}
           ${isSelected && !isPreviewMode ? 'ring-2 ring-primary ring-offset-2 ring-offset-background' : ''}
-        `, "data-testid": `row-${row.id}`, children: [!isPreviewMode && (jsxRuntimeExports.jsx("button", { onClick: (e) => {
+        `, "data-testid": `row-${row.id}`, children: [!isPreviewMode && (jsx("button", { onClick: (e) => {
                         e.stopPropagation();
                         deleteRow(row.id);
-                    }, className: "absolute -top-2 -right-2 z-20 p-1 rounded-full bg-destructive text-destructive-foreground opacity-0 group-hover:opacity-100 transition-opacity shadow-md", title: "Delete container", "data-testid": `button-delete-row-${row.id}`, children: jsxRuntimeExports.jsx(Trash2, { className: "h-3 w-3" }) })), jsxRuntimeExports.jsx(CanvasField, { field: containerField, rowId: row.id, columnId: row.columns[0].id })] }));
+                    }, className: "absolute -top-2 -right-2 z-20 p-1 rounded-full bg-destructive text-destructive-foreground opacity-0 group-hover:opacity-100 transition-opacity shadow-md", title: "Delete container", "data-testid": `button-delete-row-${row.id}`, children: jsx(Trash2, { className: "h-3 w-3" }) })), jsx(CanvasField, { field: containerField, rowId: row.id, columnId: row.columns[0].id })] }));
     }
-    return (jsxRuntimeExports.jsxs("div", { onClick: handleContainerClick, className: `
+    return (jsxs("div", { onClick: handleContainerClick, className: `
         relative group rounded-lg transition-all duration-150 overflow-visible
         ${isPreviewMode ? '' : 'border bg-card'}
         ${isSelected && !isPreviewMode ? 'border-primary bg-primary/5 ring-2 ring-primary ring-offset-2 ring-offset-background' : isPreviewMode ? '' : 'border-border'}
         ${!isPreviewMode ? 'hover:border-muted-foreground' : ''}
-      `, "data-testid": `row-${row.id}`, children: [!isPreviewMode && (jsxRuntimeExports.jsxs("div", { onClick: handleRowHeaderClick, className: `flex items-center justify-between ${getHeaderClass()} border-b border-border cursor-pointer hover-elevate`, "data-testid": `row-header-${row.id}`, children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(GripVertical, { className: `${getIconSize()} text-muted-foreground cursor-grab` }), jsxRuntimeExports.jsxs("span", { className: `${getRowTextSize()} font-medium text-muted-foreground uppercase tracking-wide`, children: ["Row (", row.columns.length, " ", row.columns.length === 1 ? 'column' : 'columns', ")"] }), row.conditionalLogic?.enabled && (jsxRuntimeExports.jsx("span", { className: `${getRowTextSize()} text-blue-500 font-medium`, children: "Conditional" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1", children: [jsxRuntimeExports.jsx("button", { onClick: (e) => {
+      `, "data-testid": `row-${row.id}`, children: [!isPreviewMode && (jsxs("div", { onClick: handleRowHeaderClick, className: `flex items-center justify-between ${getHeaderClass()} border-b border-border cursor-pointer hover-elevate`, "data-testid": `row-header-${row.id}`, children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx(GripVertical, { className: `${getIconSize()} text-muted-foreground cursor-grab` }), jsxs("span", { className: `${getRowTextSize()} font-medium text-muted-foreground uppercase tracking-wide`, children: ["Row (", row.columns.length, " ", row.columns.length === 1 ? 'column' : 'columns', ")"] }), row.conditionalLogic?.enabled && (jsx("span", { className: `${getRowTextSize()} text-blue-500 font-medium`, children: "Conditional" }))] }), jsxs("div", { className: "flex items-center gap-1", children: [jsx("button", { onClick: (e) => {
                                     e.stopPropagation();
                                     addColumn(row.id);
-                                }, className: "p-1 text-muted-foreground hover:text-foreground rounded", title: "Add column", "data-testid": `button-add-column-inline-${row.id}`, children: jsxRuntimeExports.jsx(Plus, { className: getIconSize() }) }), jsxRuntimeExports.jsx("button", { onClick: (e) => {
+                                }, className: "p-1 text-muted-foreground hover:text-foreground rounded", title: "Add column", "data-testid": `button-add-column-inline-${row.id}`, children: jsx(Plus, { className: getIconSize() }) }), jsx("button", { onClick: (e) => {
                                     e.stopPropagation();
                                     deleteRow(row.id);
-                                }, className: "p-1 text-muted-foreground hover:text-destructive rounded", title: "Delete row", "data-testid": `button-delete-row-${row.id}`, children: jsxRuntimeExports.jsx(Trash2, { className: getIconSize() }) })] })] })), jsxRuntimeExports.jsx("div", { className: "flex", style: {
+                                }, className: "p-1 text-muted-foreground hover:text-destructive rounded", title: "Delete row", "data-testid": `button-delete-row-${row.id}`, children: jsx(Trash2, { className: getIconSize() }) })] })] })), jsx("div", { className: "flex", style: {
                     gap: isPreviewMode ? 0 : `${(row.spacing ?? getRowSpacingMultiplier()) * 4}px`,
                     padding: isPreviewMode ? 0 : `${(row.padding ?? getRowPaddingMultiplier()) * 4}px`,
-                }, children: row.columns.map((column) => (jsxRuntimeExports.jsx(DroppableColumn, { row: row, column: column }, column.id))) })] }));
+                }, children: row.columns.map((column) => (jsx(DroppableColumn, { row: row, column: column }, column.id))) })] }));
 }
 function StepIndicator() {
     const { form, currentStepIndex, setCurrentStep, isPreviewMode } = useFormStore();
     if (!form.isMultiStep || !form.steps?.length)
         return null;
     const progress = ((currentStepIndex + 1) / form.steps.length) * 100;
-    return (jsxRuntimeExports.jsxs("div", { className: "mb-6 space-y-4", children: [jsxRuntimeExports.jsx(Progress, { value: progress, className: "h-2" }), jsxRuntimeExports.jsx("div", { className: "flex justify-between", children: form.steps.map((step, index) => (jsxRuntimeExports.jsxs("button", { onClick: () => !isPreviewMode && setCurrentStep(index), className: `
+    return (jsxs("div", { className: "mb-6 space-y-4", children: [jsx(Progress, { value: progress, className: "h-2" }), jsx("div", { className: "flex justify-between", children: form.steps.map((step, index) => (jsxs("button", { onClick: () => !isPreviewMode && setCurrentStep(index), className: `
               flex flex-col items-center gap-2 transition-all
               ${!isPreviewMode ? 'cursor-pointer' : ''}
-            `, disabled: isPreviewMode && index > currentStepIndex, children: [jsxRuntimeExports.jsx("div", { className: `
+            `, disabled: isPreviewMode && index > currentStepIndex, children: [jsx("div", { className: `
                 w-10 h-10 rounded-full flex items-center justify-center font-medium text-sm border-2 transition-all
                 ${index < currentStepIndex
                                 ? 'bg-primary border-primary text-primary-foreground'
                                 : index === currentStepIndex
                                     ? 'border-primary text-primary bg-primary/10'
                                     : 'border-muted text-muted-foreground bg-muted/30'}
-              `, children: index < currentStepIndex ? (jsxRuntimeExports.jsx(Check, { className: "h-5 w-5" })) : (index + 1) }), jsxRuntimeExports.jsx("span", { className: `text-xs font-medium ${index <= currentStepIndex ? 'text-foreground' : 'text-muted-foreground'}`, children: step.title })] }, step.id))) })] }));
+              `, children: index < currentStepIndex ? (jsx(Check, { className: "h-5 w-5" })) : (index + 1) }), jsx("span", { className: `text-xs font-medium ${index <= currentStepIndex ? 'text-foreground' : 'text-muted-foreground'}`, children: step.title })] }, step.id))) })] }));
 }
 function StepNavigation() {
     const { form, currentStepIndex, nextStep, prevStep, isPreviewMode } = useFormStore();
@@ -3407,7 +2045,7 @@ function StepNavigation() {
         return null;
     const isFirstStep = currentStepIndex === 0;
     const isLastStep = currentStepIndex === form.steps.length - 1;
-    return (jsxRuntimeExports.jsxs("div", { className: "flex justify-between mt-6 pt-6 border-t border-border", children: [jsxRuntimeExports.jsxs(Button, { variant: "outline", onClick: prevStep, disabled: isFirstStep, className: "gap-2", children: [jsxRuntimeExports.jsx(ChevronLeft, { className: "h-4 w-4" }), "Previous"] }), isLastStep ? (jsxRuntimeExports.jsxs(Button, { className: "gap-2", children: [jsxRuntimeExports.jsx(Check, { className: "h-4 w-4" }), "Submit"] })) : (jsxRuntimeExports.jsxs(Button, { onClick: nextStep, className: "gap-2", children: ["Next", jsxRuntimeExports.jsx(ChevronRight, { className: "h-4 w-4" })] }))] }));
+    return (jsxs("div", { className: "flex justify-between mt-6 pt-6 border-t border-border", children: [jsxs(Button, { variant: "outline", onClick: prevStep, disabled: isFirstStep, className: "gap-2", children: [jsx(ChevronLeft, { className: "h-4 w-4" }), "Previous"] }), isLastStep ? (jsxs(Button, { className: "gap-2", children: [jsx(Check, { className: "h-4 w-4" }), "Submit"] })) : (jsxs(Button, { onClick: nextStep, className: "gap-2", children: ["Next", jsx(ChevronRight, { className: "h-4 w-4" })] }))] }));
 }
 const canvasWidthClasses = {
     compact: 'max-w-2xl',
@@ -3426,23 +2064,23 @@ function MultiStepCanvas() {
             accepts: 'field',
         },
     });
-    return (jsxRuntimeExports.jsx("div", { ref: setNodeRef, className: `
+    return (jsx("div", { ref: setNodeRef, className: `
         min-h-full p-8
         ${isOver ? 'bg-primary/5' : ''}
       `, style: {
             backgroundImage: 'radial-gradient(circle, hsl(var(--muted-foreground) / 0.15) 1px, transparent 1px)',
             backgroundSize: '24px 24px',
-        }, children: jsxRuntimeExports.jsxs("div", { className: `${canvasWidthClasses[canvasWidth]} mx-auto`, children: [jsxRuntimeExports.jsx(StepIndicator, {}), !isPreviewMode && currentStep && (jsxRuntimeExports.jsx("div", { className: "mb-4 p-4 bg-card rounded-lg border border-border", children: jsxRuntimeExports.jsxs("button", { onClick: (e) => {
+        }, children: jsxs("div", { className: `${canvasWidthClasses[canvasWidth]} mx-auto`, children: [jsx(StepIndicator, {}), !isPreviewMode && currentStep && (jsx("div", { className: "mb-4 p-4 bg-card rounded-lg border border-border", children: jsxs("button", { onClick: (e) => {
                             e.stopPropagation();
                             setSelection({ type: 'step', stepId: currentStep.id });
-                        }, className: "text-left w-full", "data-testid": "button-step-header", children: [jsxRuntimeExports.jsx("h3", { className: "font-semibold text-lg", children: currentStep.title }), currentStep.description && (jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground mt-1", children: currentStep.description }))] }) })), isPreviewMode && currentStep && (jsxRuntimeExports.jsxs("div", { className: "mb-6", children: [jsxRuntimeExports.jsx("h2", { className: "text-2xl font-bold", children: currentStep.title }), currentStep.description && (jsxRuntimeExports.jsx("p", { className: "text-muted-foreground mt-2", children: currentStep.description }))] })), rows.length === 0 ? (jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center min-h-[200px] text-center border-2 border-dashed border-border rounded-lg", children: [jsxRuntimeExports.jsx("p", { className: "text-muted-foreground mb-4", children: "This step has no fields yet" }), !isPreviewMode && (jsxRuntimeExports.jsxs(Button, { onClick: () => addRow(1), className: "gap-2", children: [jsxRuntimeExports.jsx(Plus, { className: "h-4 w-4" }), "Add Row"] }))] })) : (jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [rows.map((row, index) => (jsxRuntimeExports.jsx(CanvasRow, { row: row, index: index }, row.id))), !isPreviewMode && (jsxRuntimeExports.jsx("div", { className: "flex justify-center pt-4", children: jsxRuntimeExports.jsxs(Button, { variant: "outline", onClick: () => addRow(1), className: "gap-2", children: [jsxRuntimeExports.jsx(Plus, { className: "h-4 w-4" }), "Add Row"] }) }))] })), jsxRuntimeExports.jsx(StepNavigation, {}), !isPreviewMode && (jsxRuntimeExports.jsx("div", { className: "mt-8 pt-8 border-t border-border", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap gap-2", children: [form.steps?.map((step, index) => (jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1", children: [jsxRuntimeExports.jsxs(Button, { variant: index === currentStepIndex ? 'default' : 'outline', size: "sm", onClick: (e) => {
+                        }, className: "text-left w-full", "data-testid": "button-step-header", children: [jsx("h3", { className: "font-semibold text-lg", children: currentStep.title }), currentStep.description && (jsx("p", { className: "text-sm text-muted-foreground mt-1", children: currentStep.description }))] }) })), isPreviewMode && currentStep && (jsxs("div", { className: "mb-6", children: [jsx("h2", { className: "text-2xl font-bold", children: currentStep.title }), currentStep.description && (jsx("p", { className: "text-muted-foreground mt-2", children: currentStep.description }))] })), rows.length === 0 ? (jsxs("div", { className: "flex flex-col items-center justify-center min-h-[200px] text-center border-2 border-dashed border-border rounded-lg", children: [jsx("p", { className: "text-muted-foreground mb-4", children: "This step has no fields yet" }), !isPreviewMode && (jsxs(Button, { onClick: () => addRow(1), className: "gap-2", children: [jsx(Plus, { className: "h-4 w-4" }), "Add Row"] }))] })) : (jsxs("div", { className: "space-y-4", children: [rows.map((row, index) => (jsx(CanvasRow, { row: row, index: index }, row.id))), !isPreviewMode && (jsx("div", { className: "flex justify-center pt-4", children: jsxs(Button, { variant: "outline", onClick: () => addRow(1), className: "gap-2", children: [jsx(Plus, { className: "h-4 w-4" }), "Add Row"] }) }))] })), jsx(StepNavigation, {}), !isPreviewMode && (jsx("div", { className: "mt-8 pt-8 border-t border-border", children: jsxs("div", { className: "flex flex-wrap gap-2", children: [form.steps?.map((step, index) => (jsxs("div", { className: "flex items-center gap-1", children: [jsxs(Button, { variant: index === currentStepIndex ? 'default' : 'outline', size: "sm", onClick: (e) => {
                                             e.stopPropagation();
                                             setCurrentStep(index);
                                             setSelection({ type: 'step', stepId: step.id });
-                                        }, "data-testid": `button-step-${index + 1}`, children: ["Step ", index + 1] }), (form.steps?.length || 0) > 1 && (jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6 text-muted-foreground hover:text-destructive", onClick: (e) => {
+                                        }, "data-testid": `button-step-${index + 1}`, children: ["Step ", index + 1] }), (form.steps?.length || 0) > 1 && (jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6 text-muted-foreground hover:text-destructive", onClick: (e) => {
                                             e.stopPropagation();
                                             deleteStep(step.id);
-                                        }, "data-testid": `button-delete-step-${index}`, children: jsxRuntimeExports.jsx(Trash2, { className: "h-3 w-3" }) }))] }, step.id))), jsxRuntimeExports.jsxs(Button, { variant: "outline", size: "sm", onClick: addStep, className: "gap-1", children: [jsxRuntimeExports.jsx(Plus, { className: "h-3 w-3" }), "Add Step"] })] }) }))] }) }));
+                                        }, "data-testid": `button-delete-step-${index}`, children: jsx(Trash2, { className: "h-3 w-3" }) }))] }, step.id))), jsxs(Button, { variant: "outline", size: "sm", onClick: addStep, className: "gap-1", children: [jsx(Plus, { className: "h-3 w-3" }), "Add Step"] })] }) }))] }) }));
 }
 function SingleFormCanvas() {
     const { form, addRow, clearSelection, isPreviewMode, canvasWidth } = useFormStore();
@@ -3456,20 +2094,20 @@ function SingleFormCanvas() {
     const handleCanvasClick = () => {
         clearSelection();
     };
-    return (jsxRuntimeExports.jsx("div", { ref: setNodeRef, onClick: handleCanvasClick, className: `
+    return (jsx("div", { ref: setNodeRef, onClick: handleCanvasClick, className: `
         min-h-full p-8
         ${isOver ? 'bg-primary/5' : ''}
       `, style: {
             backgroundImage: 'radial-gradient(circle, hsl(var(--muted-foreground) / 0.15) 1px, transparent 1px)',
             backgroundSize: '24px 24px',
-        }, children: form.rows.length === 0 ? (jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center min-h-[400px] text-center", children: [jsxRuntimeExports.jsx("div", { className: "w-20 h-20 rounded-full bg-muted/50 flex items-center justify-center mb-4", children: jsxRuntimeExports.jsx(Plus, { className: "h-10 w-10 text-muted-foreground" }) }), jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold text-foreground mb-2", children: "Start building your form" }), jsxRuntimeExports.jsx("p", { className: "text-muted-foreground mb-6 max-w-md", children: "Drag components from the left sidebar to get started" })] })) : (jsxRuntimeExports.jsxs("div", { className: `space-y-4 ${canvasWidthClasses[canvasWidth]} mx-auto`, children: [form.rows.map((row, index) => (jsxRuntimeExports.jsx(CanvasRow, { row: row, index: index }, row.id))), !isPreviewMode && (jsxRuntimeExports.jsx("div", { className: "flex justify-center pt-4", children: jsxRuntimeExports.jsxs(Button, { variant: "outline", onClick: () => addRow(1), className: "gap-2", "data-testid": "button-add-row", children: [jsxRuntimeExports.jsx(Plus, { className: "h-4 w-4" }), "Add Row"] }) }))] })) }));
+        }, children: form.rows.length === 0 ? (jsxs("div", { className: "flex flex-col items-center justify-center min-h-[400px] text-center", children: [jsx("div", { className: "w-20 h-20 rounded-full bg-muted/50 flex items-center justify-center mb-4", children: jsx(Plus, { className: "h-10 w-10 text-muted-foreground" }) }), jsx("h2", { className: "text-xl font-semibold text-foreground mb-2", children: "Start building your form" }), jsx("p", { className: "text-muted-foreground mb-6 max-w-md", children: "Drag components from the left sidebar to get started" })] })) : (jsxs("div", { className: `space-y-4 ${canvasWidthClasses[canvasWidth]} mx-auto`, children: [form.rows.map((row, index) => (jsx(CanvasRow, { row: row, index: index }, row.id))), !isPreviewMode && (jsx("div", { className: "flex justify-center pt-4", children: jsxs(Button, { variant: "outline", onClick: () => addRow(1), className: "gap-2", "data-testid": "button-add-row", children: [jsx(Plus, { className: "h-4 w-4" }), "Add Row"] }) }))] })) }));
 }
 function FormCanvas() {
     const { form, clearSelection } = useFormStore();
     const handleCanvasClick = () => {
         clearSelection();
     };
-    return (jsxRuntimeExports.jsx("main", { className: "flex-1 bg-background overflow-hidden", onClick: handleCanvasClick, children: jsxRuntimeExports.jsx(ScrollArea, { className: "h-full", children: form.isMultiStep ? jsxRuntimeExports.jsx(MultiStepCanvas, {}) : jsxRuntimeExports.jsx(SingleFormCanvas, {}) }) }));
+    return (jsx("main", { className: "flex-1 bg-background overflow-hidden", onClick: handleCanvasClick, children: jsx(ScrollArea, { className: "h-full", children: form.isMultiStep ? jsx(MultiStepCanvas, {}) : jsx(SingleFormCanvas, {}) }) }));
 }
 
 const Collapsible = CollapsiblePrimitive.Root;
@@ -3477,11 +2115,11 @@ const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
 const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
 
 const Tabs = TabsPrimitive.Root;
-const TabsList = React.forwardRef(({ className, ...props }, ref) => (jsxRuntimeExports.jsx(TabsPrimitive.List, { ref: ref, className: cn("inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground", className), ...props })));
+const TabsList = React.forwardRef(({ className, ...props }, ref) => (jsx(TabsPrimitive.List, { ref: ref, className: cn("inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground", className), ...props })));
 TabsList.displayName = TabsPrimitive.List.displayName;
-const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (jsxRuntimeExports.jsx(TabsPrimitive.Trigger, { ref: ref, className: cn("inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm", className), ...props })));
+const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (jsx(TabsPrimitive.Trigger, { ref: ref, className: cn("inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm", className), ...props })));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-const TabsContent = React.forwardRef(({ className, ...props }, ref) => (jsxRuntimeExports.jsx(TabsPrimitive.Content, { ref: ref, className: cn("mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className), ...props })));
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => (jsx(TabsPrimitive.Content, { ref: ref, className: cn("mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className), ...props })));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 function RowProperties() {
@@ -3490,7 +2128,7 @@ function RowProperties() {
     const row = getSelectedRow();
     if (!row)
         return null;
-    return (jsxRuntimeExports.jsx("div", { className: "p-4 space-y-6", children: jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("h3", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-4", children: "Row Properties" }), jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx("span", { className: "text-sm text-foreground", children: "Columns" }), jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-foreground", children: row.columns.length })] }), jsxRuntimeExports.jsx("div", { className: "flex gap-2", children: jsxRuntimeExports.jsxs(Button, { variant: "outline", size: "sm", onClick: () => addColumn(row.id), className: "flex-1 gap-2", "data-testid": "button-add-column", children: [jsxRuntimeExports.jsx(Plus, { className: "h-4 w-4" }), "Add Column"] }) }), row.columns.length > 0 && (jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs text-muted-foreground", children: "Column Management" }), jsxRuntimeExports.jsx("div", { className: "space-y-1", children: row.columns.map((col, idx) => (jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 p-2 bg-muted/50 rounded-md", children: [jsxRuntimeExports.jsxs("span", { className: "text-xs font-medium flex-1", children: ["Col ", idx + 1, " ", jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground", children: ["(", col.width, "/12)"] })] }), jsxRuntimeExports.jsxs("span", { className: "text-xs text-muted-foreground", children: [col.fields.length, " field", col.fields.length !== 1 ? 's' : ''] }), jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => deleteColumn(row.id, col.id), disabled: row.columns.length <= 1, title: row.columns.length <= 1 ? "Cannot delete last column" : "Delete column", "data-testid": `button-delete-col-${idx}`, children: jsxRuntimeExports.jsx(Trash2, { className: "h-3 w-3 text-destructive" }) })] }, col.id))) })] })), jsxRuntimeExports.jsx(Separator, {}), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Inner Field Size (Density)" }), jsxRuntimeExports.jsxs(Select, { value: row.fieldSize || 'normal', onValueChange: (value) => updateRow(row.id, { fieldSize: value }), children: [jsxRuntimeExports.jsx(SelectTrigger, { "data-testid": "row-field-size", children: jsxRuntimeExports.jsx(SelectValue, {}) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "compact", children: "Compact (Minimal)" }), jsxRuntimeExports.jsx(SelectItem, { value: "normal", children: "Normal" }), jsxRuntimeExports.jsx(SelectItem, { value: "comfortable", children: "Comfortable (Spacious)" })] })] }), jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Controls padding and font sizes for all fields in this row" })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Spacing (Gap between fields)" }), jsxRuntimeExports.jsx(Input, { type: "number", value: row.spacing ?? 3, onChange: (e) => updateRow(row.id, { spacing: parseFloat(e.target.value) || 0 }), min: 0, max: 16, step: 0.5, "data-testid": "row-spacing" }), jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "0 = no gap, higher = more space" })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Padding (Inner space)" }), jsxRuntimeExports.jsx(Input, { type: "number", value: row.padding ?? 3, onChange: (e) => updateRow(row.id, { padding: parseFloat(e.target.value) || 0 }), min: 0, max: 16, step: 0.5, "data-testid": "row-padding" }), jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "0 = no padding, higher = more space" })] }), jsxRuntimeExports.jsx(Separator, {}), jsxRuntimeExports.jsxs(Collapsible, { open: conditionalOpen, onOpenChange: setConditionalOpen, children: [jsxRuntimeExports.jsxs(CollapsibleTrigger, { className: "flex items-center justify-between w-full", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(Zap, { className: "h-4 w-4 text-muted-foreground" }), jsxRuntimeExports.jsx("span", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Conditional Logic" })] }), jsxRuntimeExports.jsx(ChevronDown, { className: `h-4 w-4 text-muted-foreground transition-transform ${conditionalOpen ? 'rotate-180' : ''}` })] }), jsxRuntimeExports.jsx(CollapsibleContent, { className: "pt-4", children: jsxRuntimeExports.jsx("div", { className: "space-y-4", children: jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Enable" }), jsxRuntimeExports.jsx(Switch, { checked: row.conditionalLogic?.enabled || false, onCheckedChange: (checked) => updateRow(row.id, {
+    return (jsx("div", { className: "p-4 space-y-6", children: jsxs("div", { children: [jsx("h3", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-4", children: "Row Properties" }), jsxs("div", { className: "space-y-4", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsx("span", { className: "text-sm text-foreground", children: "Columns" }), jsx("span", { className: "text-sm font-medium text-foreground", children: row.columns.length })] }), jsx("div", { className: "flex gap-2", children: jsxs(Button, { variant: "outline", size: "sm", onClick: () => addColumn(row.id), className: "flex-1 gap-2", "data-testid": "button-add-column", children: [jsx(Plus, { className: "h-4 w-4" }), "Add Column"] }) }), row.columns.length > 0 && (jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-xs text-muted-foreground", children: "Column Management" }), jsx("div", { className: "space-y-1", children: row.columns.map((col, idx) => (jsxs("div", { className: "flex items-center gap-2 p-2 bg-muted/50 rounded-md", children: [jsxs("span", { className: "text-xs font-medium flex-1", children: ["Col ", idx + 1, " ", jsxs("span", { className: "text-muted-foreground", children: ["(", col.width, "/12)"] })] }), jsxs("span", { className: "text-xs text-muted-foreground", children: [col.fields.length, " field", col.fields.length !== 1 ? 's' : ''] }), jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => deleteColumn(row.id, col.id), disabled: row.columns.length <= 1, title: row.columns.length <= 1 ? "Cannot delete last column" : "Delete column", "data-testid": `button-delete-col-${idx}`, children: jsx(Trash2, { className: "h-3 w-3 text-destructive" }) })] }, col.id))) })] })), jsx(Separator, {}), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Inner Field Size (Density)" }), jsxs(Select, { value: row.fieldSize || 'normal', onValueChange: (value) => updateRow(row.id, { fieldSize: value }), children: [jsx(SelectTrigger, { "data-testid": "row-field-size", children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "compact", children: "Compact (Minimal)" }), jsx(SelectItem, { value: "normal", children: "Normal" }), jsx(SelectItem, { value: "comfortable", children: "Comfortable (Spacious)" })] })] }), jsx("p", { className: "text-xs text-muted-foreground", children: "Controls padding and font sizes for all fields in this row" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Spacing (Gap between fields)" }), jsx(Input, { type: "number", value: row.spacing ?? 3, onChange: (e) => updateRow(row.id, { spacing: parseFloat(e.target.value) || 0 }), min: 0, max: 16, step: 0.5, "data-testid": "row-spacing" }), jsx("p", { className: "text-xs text-muted-foreground", children: "0 = no gap, higher = more space" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Padding (Inner space)" }), jsx(Input, { type: "number", value: row.padding ?? 3, onChange: (e) => updateRow(row.id, { padding: parseFloat(e.target.value) || 0 }), min: 0, max: 16, step: 0.5, "data-testid": "row-padding" }), jsx("p", { className: "text-xs text-muted-foreground", children: "0 = no padding, higher = more space" })] }), jsx(Separator, {}), jsxs(Collapsible, { open: conditionalOpen, onOpenChange: setConditionalOpen, children: [jsxs(CollapsibleTrigger, { className: "flex items-center justify-between w-full", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx(Zap, { className: "h-4 w-4 text-muted-foreground" }), jsx("span", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Conditional Logic" })] }), jsx(ChevronDown, { className: `h-4 w-4 text-muted-foreground transition-transform ${conditionalOpen ? 'rotate-180' : ''}` })] }), jsx(CollapsibleContent, { className: "pt-4", children: jsx("div", { className: "space-y-4", children: jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label, { className: "text-sm", children: "Enable" }), jsx(Switch, { checked: row.conditionalLogic?.enabled || false, onCheckedChange: (checked) => updateRow(row.id, {
                                                         conditionalLogic: {
                                                             ...row.conditionalLogic,
                                                             enabled: checked,
@@ -3498,7 +2136,7 @@ function RowProperties() {
                                                             logicType: row.conditionalLogic?.logicType || 'all',
                                                             conditions: row.conditionalLogic?.conditions || [],
                                                         }
-                                                    }) })] }) }) })] }), jsxRuntimeExports.jsx(Separator, {}), jsxRuntimeExports.jsxs(Button, { variant: "outline", size: "sm", onClick: () => deleteRow(row.id), className: "w-full gap-2 text-destructive hover:text-destructive", "data-testid": "button-delete-row", children: [jsxRuntimeExports.jsx(Trash2, { className: "h-4 w-4" }), "Delete Row"] })] })] }) }));
+                                                    }) })] }) }) })] }), jsx(Separator, {}), jsxs(Button, { variant: "outline", size: "sm", onClick: () => deleteRow(row.id), className: "w-full gap-2 text-destructive hover:text-destructive", "data-testid": "button-delete-row", children: [jsx(Trash2, { className: "h-4 w-4" }), "Delete Row"] })] })] }) }));
 }
 function ColumnProperties() {
     const { getSelectedColumn, updateColumn, deleteColumn, duplicateColumn } = useFormStore();
@@ -3507,33 +2145,33 @@ function ColumnProperties() {
     if (!result)
         return null;
     const { row, column } = result;
-    return (jsxRuntimeExports.jsx("div", { className: "p-4 space-y-6", children: jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("h3", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-4", children: "Column Properties" }), jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Width (1-12)" }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(Button, { variant: "outline", size: "icon", onClick: () => {
+    return (jsx("div", { className: "p-4 space-y-6", children: jsxs("div", { children: [jsx("h3", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-4", children: "Column Properties" }), jsxs("div", { className: "space-y-4", children: [jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Width (1-12)" }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(Button, { variant: "outline", size: "icon", onClick: () => {
                                                 if (column.width > 1) {
                                                     updateColumn(row.id, column.id, { width: column.width - 1 });
                                                 }
-                                            }, disabled: column.width <= 1, "data-testid": "button-decrease-width", children: jsxRuntimeExports.jsx(Minus, { className: "h-4 w-4" }) }), jsxRuntimeExports.jsx(Input, { type: "number", min: 1, max: 12, value: column.width, onChange: (e) => {
+                                            }, disabled: column.width <= 1, "data-testid": "button-decrease-width", children: jsx(Minus, { className: "h-4 w-4" }) }), jsx(Input, { type: "number", min: 1, max: 12, value: column.width, onChange: (e) => {
                                                 const width = Math.min(12, Math.max(1, parseInt(e.target.value) || 1));
                                                 updateColumn(row.id, column.id, { width });
-                                            }, className: "w-20 text-center", "data-testid": "input-column-width" }), jsxRuntimeExports.jsx(Button, { variant: "outline", size: "icon", onClick: () => {
+                                            }, className: "w-20 text-center", "data-testid": "input-column-width" }), jsx(Button, { variant: "outline", size: "icon", onClick: () => {
                                                 if (column.width < 12) {
                                                     updateColumn(row.id, column.id, { width: column.width + 1 });
                                                 }
-                                            }, disabled: column.width >= 12, "data-testid": "button-increase-width", children: jsxRuntimeExports.jsx(Plus, { className: "h-4 w-4" }) })] }), jsxRuntimeExports.jsxs("p", { className: "text-xs text-muted-foreground", children: [Math.round((column.width / 12) * 100), "% of row width"] })] }), jsxRuntimeExports.jsx(Separator, {}), jsxRuntimeExports.jsxs(Collapsible, { open: responsiveOpen, onOpenChange: setResponsiveOpen, children: [jsxRuntimeExports.jsxs(CollapsibleTrigger, { className: "flex items-center justify-between w-full", children: [jsxRuntimeExports.jsx("span", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Responsive Widths" }), jsxRuntimeExports.jsx(ChevronDown, { className: `h-4 w-4 text-muted-foreground transition-transform ${responsiveOpen ? 'rotate-180' : ''}` })] }), jsxRuntimeExports.jsx(CollapsibleContent, { className: "pt-4", children: jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Mobile (1-12)" }), jsxRuntimeExports.jsx(Input, { type: "number", min: 1, max: 12, value: column.responsiveWidth?.mobile || '', placeholder: "12", onChange: (e) => {
+                                            }, disabled: column.width >= 12, "data-testid": "button-increase-width", children: jsx(Plus, { className: "h-4 w-4" }) })] }), jsxs("p", { className: "text-xs text-muted-foreground", children: [Math.round((column.width / 12) * 100), "% of row width"] })] }), jsx(Separator, {}), jsxs(Collapsible, { open: responsiveOpen, onOpenChange: setResponsiveOpen, children: [jsxs(CollapsibleTrigger, { className: "flex items-center justify-between w-full", children: [jsx("span", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Responsive Widths" }), jsx(ChevronDown, { className: `h-4 w-4 text-muted-foreground transition-transform ${responsiveOpen ? 'rotate-180' : ''}` })] }), jsx(CollapsibleContent, { className: "pt-4", children: jsxs("div", { className: "space-y-3", children: [jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Mobile (1-12)" }), jsx(Input, { type: "number", min: 1, max: 12, value: column.responsiveWidth?.mobile || '', placeholder: "12", onChange: (e) => {
                                                             const val = e.target.value ? parseInt(e.target.value) : undefined;
                                                             updateColumn(row.id, column.id, {
                                                                 responsiveWidth: { ...column.responsiveWidth, mobile: val },
                                                             });
-                                                        } })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Tablet (1-12)" }), jsxRuntimeExports.jsx(Input, { type: "number", min: 1, max: 12, value: column.responsiveWidth?.tablet || '', placeholder: "6", onChange: (e) => {
+                                                        } })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Tablet (1-12)" }), jsx(Input, { type: "number", min: 1, max: 12, value: column.responsiveWidth?.tablet || '', placeholder: "6", onChange: (e) => {
                                                             const val = e.target.value ? parseInt(e.target.value) : undefined;
                                                             updateColumn(row.id, column.id, {
                                                                 responsiveWidth: { ...column.responsiveWidth, tablet: val },
                                                             });
-                                                        } })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Desktop (1-12)" }), jsxRuntimeExports.jsx(Input, { type: "number", min: 1, max: 12, value: column.responsiveWidth?.desktop || '', placeholder: String(column.width), onChange: (e) => {
+                                                        } })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Desktop (1-12)" }), jsx(Input, { type: "number", min: 1, max: 12, value: column.responsiveWidth?.desktop || '', placeholder: String(column.width), onChange: (e) => {
                                                             const val = e.target.value ? parseInt(e.target.value) : undefined;
                                                             updateColumn(row.id, column.id, {
                                                                 responsiveWidth: { ...column.responsiveWidth, desktop: val },
                                                             });
-                                                        } })] })] }) })] }), jsxRuntimeExports.jsx(Separator, {}), jsxRuntimeExports.jsx("div", { className: "flex gap-2", children: jsxRuntimeExports.jsxs(Button, { variant: "outline", size: "sm", onClick: () => duplicateColumn(row.id, column.id), className: "flex-1 gap-2", "data-testid": "button-duplicate-column", children: [jsxRuntimeExports.jsx(Copy, { className: "h-4 w-4" }), "Duplicate"] }) }), jsxRuntimeExports.jsxs(Button, { variant: "outline", size: "sm", onClick: () => deleteColumn(row.id, column.id), className: "w-full gap-2 text-destructive hover:text-destructive", disabled: row.columns.length <= 1, "data-testid": "button-delete-column", children: [jsxRuntimeExports.jsx(Trash2, { className: "h-4 w-4" }), "Delete Column"] })] })] }) }));
+                                                        } })] })] }) })] }), jsx(Separator, {}), jsx("div", { className: "flex gap-2", children: jsxs(Button, { variant: "outline", size: "sm", onClick: () => duplicateColumn(row.id, column.id), className: "flex-1 gap-2", "data-testid": "button-duplicate-column", children: [jsx(Copy, { className: "h-4 w-4" }), "Duplicate"] }) }), jsxs(Button, { variant: "outline", size: "sm", onClick: () => deleteColumn(row.id, column.id), className: "w-full gap-2 text-destructive hover:text-destructive", disabled: row.columns.length <= 1, "data-testid": "button-delete-column", children: [jsx(Trash2, { className: "h-4 w-4" }), "Delete Column"] })] })] }) }));
 }
 function FieldProperties() {
     const { getSelectedField, updateField, deleteField, getAllFields } = useFormStore();
@@ -3632,38 +2270,38 @@ function FieldProperties() {
         const currentActions = (field.events?.[eventType] || []).filter((_, i) => i !== index);
         handleUpdateEvents(eventType, currentActions);
     };
-    return (jsxRuntimeExports.jsx("div", { className: "p-4", children: jsxRuntimeExports.jsxs(Tabs, { defaultValue: "main", className: "w-full", children: [jsxRuntimeExports.jsxs(TabsList, { className: "grid w-full grid-cols-4 mb-4", children: [jsxRuntimeExports.jsx(TabsTrigger, { value: "main", className: "text-xs", children: "Main" }), jsxRuntimeExports.jsx(TabsTrigger, { value: "style", className: "text-xs", children: "Style" }), jsxRuntimeExports.jsx(TabsTrigger, { value: "actions", className: "text-xs", children: "Actions" }), jsxRuntimeExports.jsx(TabsTrigger, { value: "rules", className: "text-xs", children: "Rules" })] }), jsxRuntimeExports.jsxs(TabsContent, { value: "main", className: "space-y-4 mt-0", children: [(() => {
+    return (jsx("div", { className: "p-4", children: jsxs(Tabs, { defaultValue: "main", className: "w-full", children: [jsxs(TabsList, { className: "grid w-full grid-cols-4 mb-4", children: [jsx(TabsTrigger, { value: "main", className: "text-xs", children: "Main" }), jsx(TabsTrigger, { value: "style", className: "text-xs", children: "Style" }), jsx(TabsTrigger, { value: "actions", className: "text-xs", children: "Actions" }), jsx(TabsTrigger, { value: "rules", className: "text-xs", children: "Rules" })] }), jsxs(TabsContent, { value: "main", className: "space-y-4 mt-0", children: [(() => {
                             const staticDisplayTypes = ['spacer', 'divider', 'header', 'subheader', 'label', 'paragraph', 'alert', 'image', 'qrcode'];
                             const textOnlyTypes = ['header', 'subheader', 'label', 'paragraph', 'alert'];
                             const isStaticDisplay = staticDisplayTypes.includes(field.type);
                             const isTextOnly = textOnlyTypes.includes(field.type);
-                            return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [isTextOnly && (jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Text" }), jsxRuntimeExports.jsx(Input, { value: field.props.label, onChange: (e) => handleUpdateProp('label', e.target.value), "data-testid": "input-field-label" })] })), field.type === 'spacer' && (jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Height (px)" }), jsxRuntimeExports.jsx(Input, { type: "number", value: field.props.spacerHeight || 24, onChange: (e) => handleUpdateProp('spacerHeight', parseInt(e.target.value) || 24), min: 4, max: 200 })] })), field.type === 'divider' && (jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Margin (px)" }), jsxRuntimeExports.jsx(Input, { type: "number", value: field.props.dividerMargin || 16, onChange: (e) => handleUpdateProp('dividerMargin', parseInt(e.target.value) || 16), min: 0, max: 100 })] })), field.type === 'image' && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Alt Text" }), jsxRuntimeExports.jsx(Input, { value: field.props.label, onChange: (e) => handleUpdateProp('label', e.target.value), placeholder: "Image description..." })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Image URL" }), jsxRuntimeExports.jsx(Input, { value: field.props.imageUrl || '', onChange: (e) => handleUpdateProp('imageUrl', e.target.value), placeholder: "https://example.com/image.jpg" })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Width" }), jsxRuntimeExports.jsx(Input, { value: field.props.imageWidth || '', onChange: (e) => handleUpdateProp('imageWidth', e.target.value), placeholder: "100% or 200px" })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Height" }), jsxRuntimeExports.jsx(Input, { value: field.props.imageHeight || '', onChange: (e) => handleUpdateProp('imageHeight', e.target.value), placeholder: "auto or 150px" })] })] })), !isStaticDisplay && field.type !== 'button' && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Key" }), jsxRuntimeExports.jsx(Input, { value: field.props.key, onChange: (e) => handleUpdateProp('key', e.target.value), className: "font-mono text-sm", "data-testid": "input-field-key" })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Label" }), jsxRuntimeExports.jsx(Input, { value: field.props.label, onChange: (e) => handleUpdateProp('label', e.target.value), "data-testid": "input-field-label" })] })] })), field.type === 'button' && (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Button Text" }), jsxRuntimeExports.jsx(Input, { value: field.props.label, onChange: (e) => handleUpdateProp('label', e.target.value), "data-testid": "input-field-label" })] }) })), !isStaticDisplay && field.type !== 'button' && field.type !== 'table' && field.type !== 'container' && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Placeholder" }), jsxRuntimeExports.jsx(Input, { value: field.props.placeholder || '', onChange: (e) => handleUpdateProp('placeholder', e.target.value), "data-testid": "input-field-placeholder" })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Help Text" }), jsxRuntimeExports.jsx(Input, { value: field.props.helpText || '', onChange: (e) => handleUpdateProp('helpText', e.target.value), placeholder: "Additional instructions..." })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Tooltip" }), jsxRuntimeExports.jsx(Input, { value: field.props.tooltip || '', onChange: (e) => handleUpdateProp('tooltip', e.target.value), placeholder: "Hover tooltip text..." }), jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Shows a help icon next to the label" })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Default Value" }), jsxRuntimeExports.jsx(Input, { value: field.props.defaultValue || '', onChange: (e) => handleUpdateProp('defaultValue', e.target.value) })] })] })), !isInsideContainer && !isStaticDisplay && field.type !== 'button' && field.type !== 'container' && field.type !== 'table' && (jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Size" }), jsxRuntimeExports.jsxs(Select, { value: field.props.size || 'medium', onValueChange: (value) => handleUpdateProp('size', value), children: [jsxRuntimeExports.jsx(SelectTrigger, { "data-testid": "select-field-size", children: jsxRuntimeExports.jsx(SelectValue, {}) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "small", children: "Small" }), jsxRuntimeExports.jsx(SelectItem, { value: "medium", children: "Medium" }), jsxRuntimeExports.jsx(SelectItem, { value: "large", children: "Large" })] })] })] }))] }));
-                        })(), isInsideContainer && (jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Width" }), jsxRuntimeExports.jsxs(Select, { value: field.props.containerWidth || 'auto', onValueChange: (value) => handleUpdateProp('containerWidth', value), children: [jsxRuntimeExports.jsx(SelectTrigger, { "data-testid": "select-container-width", children: jsxRuntimeExports.jsx(SelectValue, {}) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "auto", children: "Auto (flexible)" }), jsxRuntimeExports.jsx(SelectItem, { value: "25", children: "25%" }), jsxRuntimeExports.jsx(SelectItem, { value: "33", children: "33% (1/3)" }), jsxRuntimeExports.jsx(SelectItem, { value: "50", children: "50% (1/2)" }), jsxRuntimeExports.jsx(SelectItem, { value: "66", children: "66% (2/3)" }), jsxRuntimeExports.jsx(SelectItem, { value: "75", children: "75%" }), jsxRuntimeExports.jsx(SelectItem, { value: "100", children: "100% (full width)" })] })] })] })), (() => {
+                            return (jsxs(Fragment, { children: [isTextOnly && (jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Text" }), jsx(Input, { value: field.props.label, onChange: (e) => handleUpdateProp('label', e.target.value), "data-testid": "input-field-label" })] })), field.type === 'spacer' && (jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Height (px)" }), jsx(Input, { type: "number", value: field.props.spacerHeight || 24, onChange: (e) => handleUpdateProp('spacerHeight', parseInt(e.target.value) || 24), min: 4, max: 200 })] })), field.type === 'divider' && (jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Margin (px)" }), jsx(Input, { type: "number", value: field.props.dividerMargin || 16, onChange: (e) => handleUpdateProp('dividerMargin', parseInt(e.target.value) || 16), min: 0, max: 100 })] })), field.type === 'image' && (jsxs(Fragment, { children: [jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Alt Text" }), jsx(Input, { value: field.props.label, onChange: (e) => handleUpdateProp('label', e.target.value), placeholder: "Image description..." })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Image URL" }), jsx(Input, { value: field.props.imageUrl || '', onChange: (e) => handleUpdateProp('imageUrl', e.target.value), placeholder: "https://example.com/image.jpg" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Width" }), jsx(Input, { value: field.props.imageWidth || '', onChange: (e) => handleUpdateProp('imageWidth', e.target.value), placeholder: "100% or 200px" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Height" }), jsx(Input, { value: field.props.imageHeight || '', onChange: (e) => handleUpdateProp('imageHeight', e.target.value), placeholder: "auto or 150px" })] })] })), !isStaticDisplay && field.type !== 'button' && (jsxs(Fragment, { children: [jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Key" }), jsx(Input, { value: field.props.key, onChange: (e) => handleUpdateProp('key', e.target.value), className: "font-mono text-sm", "data-testid": "input-field-key" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Label" }), jsx(Input, { value: field.props.label, onChange: (e) => handleUpdateProp('label', e.target.value), "data-testid": "input-field-label" })] })] })), field.type === 'button' && (jsx(Fragment, { children: jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Button Text" }), jsx(Input, { value: field.props.label, onChange: (e) => handleUpdateProp('label', e.target.value), "data-testid": "input-field-label" })] }) })), !isStaticDisplay && field.type !== 'button' && field.type !== 'table' && field.type !== 'container' && (jsxs(Fragment, { children: [jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Placeholder" }), jsx(Input, { value: field.props.placeholder || '', onChange: (e) => handleUpdateProp('placeholder', e.target.value), "data-testid": "input-field-placeholder" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Help Text" }), jsx(Input, { value: field.props.helpText || '', onChange: (e) => handleUpdateProp('helpText', e.target.value), placeholder: "Additional instructions..." })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Tooltip" }), jsx(Input, { value: field.props.tooltip || '', onChange: (e) => handleUpdateProp('tooltip', e.target.value), placeholder: "Hover tooltip text..." }), jsx("p", { className: "text-xs text-muted-foreground", children: "Shows a help icon next to the label" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Default Value" }), jsx(Input, { value: field.props.defaultValue || '', onChange: (e) => handleUpdateProp('defaultValue', e.target.value) })] })] })), !isInsideContainer && !isStaticDisplay && field.type !== 'button' && field.type !== 'container' && field.type !== 'table' && (jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Size" }), jsxs(Select, { value: field.props.size || 'medium', onValueChange: (value) => handleUpdateProp('size', value), children: [jsx(SelectTrigger, { "data-testid": "select-field-size", children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "small", children: "Small" }), jsx(SelectItem, { value: "medium", children: "Medium" }), jsx(SelectItem, { value: "large", children: "Large" })] })] })] }))] }));
+                        })(), isInsideContainer && (jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Width" }), jsxs(Select, { value: field.props.containerWidth || 'auto', onValueChange: (value) => handleUpdateProp('containerWidth', value), children: [jsx(SelectTrigger, { "data-testid": "select-container-width", children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "auto", children: "Auto (flexible)" }), jsx(SelectItem, { value: "25", children: "25%" }), jsx(SelectItem, { value: "33", children: "33% (1/3)" }), jsx(SelectItem, { value: "50", children: "50% (1/2)" }), jsx(SelectItem, { value: "66", children: "66% (2/3)" }), jsx(SelectItem, { value: "75", children: "75%" }), jsx(SelectItem, { value: "100", children: "100% (full width)" })] })] })] })), (() => {
                             const staticDisplayTypes = ['spacer', 'divider', 'header', 'subheader', 'label', 'paragraph', 'alert', 'image', 'qrcode', 'button'];
                             const showFocusProps = !staticDisplayTypes.includes(field.type) && field.type !== 'table' && field.type !== 'container';
                             if (!showFocusProps)
                                 return null;
-                            return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Separator, {}), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Auto Focus" }), jsxRuntimeExports.jsx(Switch, { checked: field.props.autoFocus || false, onCheckedChange: (checked) => handleUpdateProp('autoFocus', checked) })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Tab Index" }), jsxRuntimeExports.jsx(Input, { type: "number", value: field.props.tabIndex ?? '', onChange: (e) => handleUpdateProp('tabIndex', e.target.value ? parseInt(e.target.value) : undefined), placeholder: "Auto" })] })] }));
-                        })(), jsxRuntimeExports.jsxs(Collapsible, { children: [jsxRuntimeExports.jsxs(CollapsibleTrigger, { className: "flex items-center justify-between w-full py-2", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(Code, { className: "h-4 w-4 text-muted-foreground" }), jsxRuntimeExports.jsx("span", { className: "text-sm font-medium", children: "HTML Attributes" })] }), jsxRuntimeExports.jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground" })] }), jsxRuntimeExports.jsxs(CollapsibleContent, { className: "space-y-3 pt-2", children: [jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Add custom HTML attributes to this field (e.g., data-*, aria-*)" }), Object.entries(field.props.htmlAttributes || {}).map(([key, value], i) => (jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [jsxRuntimeExports.jsx(Input, { value: key, placeholder: "Attribute", className: "flex-1 font-mono text-xs", onChange: (e) => {
+                            return (jsxs(Fragment, { children: [jsx(Separator, {}), jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label, { className: "text-sm", children: "Auto Focus" }), jsx(Switch, { checked: field.props.autoFocus || false, onCheckedChange: (checked) => handleUpdateProp('autoFocus', checked) })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Tab Index" }), jsx(Input, { type: "number", value: field.props.tabIndex ?? '', onChange: (e) => handleUpdateProp('tabIndex', e.target.value ? parseInt(e.target.value) : undefined), placeholder: "Auto" })] })] }));
+                        })(), jsxs(Collapsible, { children: [jsxs(CollapsibleTrigger, { className: "flex items-center justify-between w-full py-2", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx(Code, { className: "h-4 w-4 text-muted-foreground" }), jsx("span", { className: "text-sm font-medium", children: "HTML Attributes" })] }), jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground" })] }), jsxs(CollapsibleContent, { className: "space-y-3 pt-2", children: [jsx("p", { className: "text-xs text-muted-foreground", children: "Add custom HTML attributes to this field (e.g., data-*, aria-*)" }), Object.entries(field.props.htmlAttributes || {}).map(([key, value], i) => (jsxs("div", { className: "flex gap-2", children: [jsx(Input, { value: key, placeholder: "Attribute", className: "flex-1 font-mono text-xs", onChange: (e) => {
                                                         const attrs = { ...field.props.htmlAttributes };
                                                         delete attrs[key];
                                                         attrs[e.target.value] = value;
                                                         handleUpdateProp('htmlAttributes', attrs);
-                                                    } }), jsxRuntimeExports.jsx(Input, { value: value, placeholder: "Value", className: "flex-1 font-mono text-xs", onChange: (e) => {
+                                                    } }), jsx(Input, { value: value, placeholder: "Value", className: "flex-1 font-mono text-xs", onChange: (e) => {
                                                         handleUpdateProp('htmlAttributes', {
                                                             ...field.props.htmlAttributes,
                                                             [key]: e.target.value,
                                                         });
-                                                    } }), jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", onClick: () => {
+                                                    } }), jsx(Button, { variant: "ghost", size: "icon", onClick: () => {
                                                         const attrs = { ...field.props.htmlAttributes };
                                                         delete attrs[key];
                                                         handleUpdateProp('htmlAttributes', Object.keys(attrs).length > 0 ? attrs : undefined);
-                                                    }, children: jsxRuntimeExports.jsx(Trash2, { className: "h-4 w-4" }) })] }, i))), jsxRuntimeExports.jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
+                                                    }, children: jsx(Trash2, { className: "h-4 w-4" }) })] }, i))), jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
                                                 handleUpdateProp('htmlAttributes', {
                                                     ...field.props.htmlAttributes,
                                                     '': '',
                                                 });
-                                            }, className: "w-full gap-2", children: [jsxRuntimeExports.jsx(Plus, { className: "h-4 w-4" }), "Add Attribute"] })] })] }), jsxRuntimeExports.jsx(Separator, {}), hasOptions && (jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Options" }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [getOptionsArray().map((option, i) => (jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [jsxRuntimeExports.jsx(Input, { value: option, onChange: (e) => handleUpdateOption(i, e.target.value), className: "flex-1", "data-testid": `input-option-${i}` }), jsxRuntimeExports.jsx(Button, { variant: "outline", size: "icon", onClick: () => handleRemoveOption(i), "data-testid": `button-remove-option-${i}`, children: jsxRuntimeExports.jsx(Trash2, { className: "h-4 w-4" }) })] }, i))), jsxRuntimeExports.jsxs(Button, { variant: "outline", size: "sm", onClick: handleAddOption, className: "w-full gap-2", "data-testid": "button-add-option", children: [jsxRuntimeExports.jsx(Plus, { className: "h-4 w-4" }), "Add Option"] })] })] })), field.type === 'button' && (jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsx(Separator, {}), jsxRuntimeExports.jsx("h4", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Button Settings" }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Action" }), jsxRuntimeExports.jsxs(Select, { value: field.props.buttonConfig?.action || 'submit', onValueChange: (value) => handleUpdateProp('buttonConfig', { ...field.props.buttonConfig, action: value }), children: [jsxRuntimeExports.jsx(SelectTrigger, { children: jsxRuntimeExports.jsx(SelectValue, {}) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "submit", children: "Submit Form" }), jsxRuntimeExports.jsx(SelectItem, { value: "reset", children: "Reset Form" }), jsxRuntimeExports.jsx(SelectItem, { value: "custom", children: "Custom Action" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Variant" }), jsxRuntimeExports.jsxs(Select, { value: field.props.buttonConfig?.variant || 'default', onValueChange: (value) => handleUpdateProp('buttonConfig', { ...field.props.buttonConfig, variant: value }), children: [jsxRuntimeExports.jsx(SelectTrigger, { children: jsxRuntimeExports.jsx(SelectValue, {}) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "default", children: "Default" }), jsxRuntimeExports.jsx(SelectItem, { value: "outline", children: "Outline" }), jsxRuntimeExports.jsx(SelectItem, { value: "secondary", children: "Secondary" }), jsxRuntimeExports.jsx(SelectItem, { value: "destructive", children: "Destructive" }), jsxRuntimeExports.jsx(SelectItem, { value: "ghost", children: "Ghost" })] })] })] })] })), field.type === 'pattern' && (jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsx(Separator, {}), jsxRuntimeExports.jsx("h4", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Pattern Format" }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Format Pattern" }), jsxRuntimeExports.jsx(Input, { value: field.props.patternConfig?.format || '(###) ###-####', onChange: (e) => handleUpdateProp('patternConfig', { ...field.props.patternConfig, format: e.target.value }), placeholder: "(###) ###-####" }), jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Use # for digit placeholders" })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Mask Character" }), jsxRuntimeExports.jsx(Input, { value: field.props.patternConfig?.mask || '_', onChange: (e) => handleUpdateProp('patternConfig', { ...field.props.patternConfig, mask: e.target.value }), maxLength: 1 })] })] })), field.type === 'qrcode' && (jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsx(Separator, {}), jsxRuntimeExports.jsx("h4", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "QR Code Settings" }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "QR Value" }), jsxRuntimeExports.jsx(Input, { value: field.props.qrCodeConfig?.value || 'https://example.com', onChange: (e) => handleUpdateProp('qrCodeConfig', { ...field.props.qrCodeConfig, value: e.target.value }), placeholder: "https://example.com" })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Size (px)" }), jsxRuntimeExports.jsx(Input, { type: "number", value: field.props.qrCodeConfig?.size || 128, onChange: (e) => handleUpdateProp('qrCodeConfig', { ...field.props.qrCodeConfig, size: parseInt(e.target.value) }), min: 64, max: 512 })] })] })), field.type === 'container' && (jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsx(Separator, {}), jsxRuntimeExports.jsx("h4", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Container Settings" }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Direction" }), jsxRuntimeExports.jsxs(Select, { value: field.props.containerConfig?.direction || 'row', onValueChange: (value) => handleUpdateProp('containerConfig', { ...field.props.containerConfig, direction: value }), children: [jsxRuntimeExports.jsx(SelectTrigger, { "data-testid": "select-container-direction", children: jsxRuntimeExports.jsx(SelectValue, {}) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "row", children: "Row (Horizontal)" }), jsxRuntimeExports.jsx(SelectItem, { value: "column", children: "Column (Vertical)" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Inner Field Size (Density)" }), jsxRuntimeExports.jsxs(Select, { value: field.props.containerConfig?.fieldSize || 'normal', onValueChange: (value) => handleUpdateProp('containerConfig', { ...field.props.containerConfig, fieldSize: value }), children: [jsxRuntimeExports.jsx(SelectTrigger, { "data-testid": "container-field-size", children: jsxRuntimeExports.jsx(SelectValue, {}) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "compact", "data-testid": "field-size-compact", children: "Compact (Minimal)" }), jsxRuntimeExports.jsx(SelectItem, { value: "normal", "data-testid": "field-size-normal", children: "Normal" }), jsxRuntimeExports.jsx(SelectItem, { value: "comfortable", "data-testid": "field-size-comfortable", children: "Comfortable (Spacious)" })] })] }), jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Controls padding and font sizes for fields inside this container" })] }), jsxRuntimeExports.jsx(Separator, {}), jsxRuntimeExports.jsx("h5", { className: "text-xs font-medium text-muted-foreground", children: "Spacing & Layout" }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Gap (between items)" }), jsxRuntimeExports.jsx(Input, { type: "number", value: field.props.containerConfig?.gap ?? 4, onChange: (e) => handleUpdateProp('containerConfig', { ...field.props.containerConfig, gap: parseInt(e.target.value) }), min: 0, max: 16 }), jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Space between child elements (0-16)" })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Padding (inner space)" }), jsxRuntimeExports.jsx(Input, { type: "number", value: field.props.containerConfig?.padding ?? 4, onChange: (e) => handleUpdateProp('containerConfig', { ...field.props.containerConfig, padding: parseInt(e.target.value) }), min: 0, max: 16 }), jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Inner spacing around content (0-16)" })] }), jsxRuntimeExports.jsx(Separator, {}), jsxRuntimeExports.jsx("h5", { className: "text-xs font-medium text-muted-foreground", children: "Flex Properties" }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Justify Content" }), jsxRuntimeExports.jsxs(Select, { value: field.props.containerConfig?.justifyContent || 'flex-start', onValueChange: (value) => handleUpdateProp('containerConfig', { ...field.props.containerConfig, justifyContent: value }), children: [jsxRuntimeExports.jsx(SelectTrigger, { "data-testid": "select-justify-content", children: jsxRuntimeExports.jsx(SelectValue, {}) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "flex-start", children: "Start" }), jsxRuntimeExports.jsx(SelectItem, { value: "flex-end", children: "End" }), jsxRuntimeExports.jsx(SelectItem, { value: "center", children: "Center" }), jsxRuntimeExports.jsx(SelectItem, { value: "space-between", children: "Space Between" }), jsxRuntimeExports.jsx(SelectItem, { value: "space-around", children: "Space Around" }), jsxRuntimeExports.jsx(SelectItem, { value: "space-evenly", children: "Space Evenly" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Align Items" }), jsxRuntimeExports.jsxs(Select, { value: field.props.containerConfig?.alignItems || 'stretch', onValueChange: (value) => handleUpdateProp('containerConfig', { ...field.props.containerConfig, alignItems: value }), children: [jsxRuntimeExports.jsx(SelectTrigger, { "data-testid": "select-align-items", children: jsxRuntimeExports.jsx(SelectValue, {}) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "flex-start", children: "Start" }), jsxRuntimeExports.jsx(SelectItem, { value: "flex-end", children: "End" }), jsxRuntimeExports.jsx(SelectItem, { value: "center", children: "Center" }), jsxRuntimeExports.jsx(SelectItem, { value: "stretch", children: "Stretch" }), jsxRuntimeExports.jsx(SelectItem, { value: "baseline", children: "Baseline" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Flex Wrap" }), jsxRuntimeExports.jsxs(Select, { value: field.props.containerConfig?.flexWrap || 'wrap', onValueChange: (value) => handleUpdateProp('containerConfig', { ...field.props.containerConfig, flexWrap: value }), children: [jsxRuntimeExports.jsx(SelectTrigger, { "data-testid": "select-flex-wrap", children: jsxRuntimeExports.jsx(SelectValue, {}) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "wrap", children: "Wrap" }), jsxRuntimeExports.jsx(SelectItem, { value: "nowrap", children: "No Wrap" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Show Border" }), jsxRuntimeExports.jsx(Switch, { checked: field.props.containerConfig?.border || false, onCheckedChange: (checked) => handleUpdateProp('containerConfig', { ...field.props.containerConfig, border: checked }) })] }), jsxRuntimeExports.jsx(Separator, {}), jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx("h5", { className: "text-sm font-medium", children: "Container Fields" }), jsxRuntimeExports.jsxs("span", { className: "text-xs text-muted-foreground", children: [(field.props.containerConfig?.fields || []).length, " field(s)"] })] }), jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Drag fields onto the container. Set each field's width in its properties." })] })] })), field.type === 'table' && (jsxRuntimeExports.jsxs("div", { className: "space-y-4 p-3 bg-muted/30 rounded-md", children: [jsxRuntimeExports.jsx("h4", { className: "text-sm font-medium", children: "Table Configuration" }), jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Show Row Numbers" }), jsxRuntimeExports.jsx(Switch, { checked: field.props.tableConfig?.showRowNumbers ?? true, onCheckedChange: (checked) => handleUpdateProp('tableConfig', { ...field.props.tableConfig, showRowNumbers: checked }) })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Allow Add Rows" }), jsxRuntimeExports.jsx(Switch, { checked: field.props.tableConfig?.allowAddRows ?? true, onCheckedChange: (checked) => handleUpdateProp('tableConfig', { ...field.props.tableConfig, allowAddRows: checked }) })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Allow Delete Rows" }), jsxRuntimeExports.jsx(Switch, { checked: field.props.tableConfig?.allowDeleteRows ?? false, onCheckedChange: (checked) => handleUpdateProp('tableConfig', { ...field.props.tableConfig, allowDeleteRows: checked }) })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Striped Rows" }), jsxRuntimeExports.jsx(Switch, { checked: field.props.tableConfig?.striped ?? false, onCheckedChange: (checked) => handleUpdateProp('tableConfig', { ...field.props.tableConfig, striped: checked }) })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Bordered" }), jsxRuntimeExports.jsx(Switch, { checked: field.props.tableConfig?.bordered ?? true, onCheckedChange: (checked) => handleUpdateProp('tableConfig', { ...field.props.tableConfig, bordered: checked }) })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Compact" }), jsxRuntimeExports.jsx(Switch, { checked: field.props.tableConfig?.compact ?? false, onCheckedChange: (checked) => handleUpdateProp('tableConfig', { ...field.props.tableConfig, compact: checked }) })] })] }), jsxRuntimeExports.jsx(Separator, {}), jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Min Rows" }), jsxRuntimeExports.jsx(Input, { type: "number", value: field.props.tableConfig?.minRows ?? 1, onChange: (e) => handleUpdateProp('tableConfig', { ...field.props.tableConfig, minRows: parseInt(e.target.value) || 1 }), min: 1, max: 100 })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Max Rows" }), jsxRuntimeExports.jsx(Input, { type: "number", value: field.props.tableConfig?.maxRows ?? 100, onChange: (e) => handleUpdateProp('tableConfig', { ...field.props.tableConfig, maxRows: parseInt(e.target.value) || 100 }), min: 1, max: 1000 })] })] }), jsxRuntimeExports.jsx(Separator, {}), jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx("h5", { className: "text-sm font-medium", children: "Columns" }), jsxRuntimeExports.jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
+                                            }, className: "w-full gap-2", children: [jsx(Plus, { className: "h-4 w-4" }), "Add Attribute"] })] })] }), jsx(Separator, {}), hasOptions && (jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Options" }), jsxs("div", { className: "space-y-2", children: [getOptionsArray().map((option, i) => (jsxs("div", { className: "flex gap-2", children: [jsx(Input, { value: option, onChange: (e) => handleUpdateOption(i, e.target.value), className: "flex-1", "data-testid": `input-option-${i}` }), jsx(Button, { variant: "outline", size: "icon", onClick: () => handleRemoveOption(i), "data-testid": `button-remove-option-${i}`, children: jsx(Trash2, { className: "h-4 w-4" }) })] }, i))), jsxs(Button, { variant: "outline", size: "sm", onClick: handleAddOption, className: "w-full gap-2", "data-testid": "button-add-option", children: [jsx(Plus, { className: "h-4 w-4" }), "Add Option"] })] })] })), field.type === 'button' && (jsxs("div", { className: "space-y-4", children: [jsx(Separator, {}), jsx("h4", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Button Settings" }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Action" }), jsxs(Select, { value: field.props.buttonConfig?.action || 'submit', onValueChange: (value) => handleUpdateProp('buttonConfig', { ...field.props.buttonConfig, action: value }), children: [jsx(SelectTrigger, { children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "submit", children: "Submit Form" }), jsx(SelectItem, { value: "reset", children: "Reset Form" }), jsx(SelectItem, { value: "custom", children: "Custom Action" })] })] })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Variant" }), jsxs(Select, { value: field.props.buttonConfig?.variant || 'default', onValueChange: (value) => handleUpdateProp('buttonConfig', { ...field.props.buttonConfig, variant: value }), children: [jsx(SelectTrigger, { children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "default", children: "Default" }), jsx(SelectItem, { value: "outline", children: "Outline" }), jsx(SelectItem, { value: "secondary", children: "Secondary" }), jsx(SelectItem, { value: "destructive", children: "Destructive" }), jsx(SelectItem, { value: "ghost", children: "Ghost" })] })] })] })] })), field.type === 'pattern' && (jsxs("div", { className: "space-y-4", children: [jsx(Separator, {}), jsx("h4", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Pattern Format" }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Format Pattern" }), jsx(Input, { value: field.props.patternConfig?.format || '(###) ###-####', onChange: (e) => handleUpdateProp('patternConfig', { ...field.props.patternConfig, format: e.target.value }), placeholder: "(###) ###-####" }), jsx("p", { className: "text-xs text-muted-foreground", children: "Use # for digit placeholders" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Mask Character" }), jsx(Input, { value: field.props.patternConfig?.mask || '_', onChange: (e) => handleUpdateProp('patternConfig', { ...field.props.patternConfig, mask: e.target.value }), maxLength: 1 })] })] })), field.type === 'qrcode' && (jsxs("div", { className: "space-y-4", children: [jsx(Separator, {}), jsx("h4", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "QR Code Settings" }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "QR Value" }), jsx(Input, { value: field.props.qrCodeConfig?.value || 'https://example.com', onChange: (e) => handleUpdateProp('qrCodeConfig', { ...field.props.qrCodeConfig, value: e.target.value }), placeholder: "https://example.com" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Size (px)" }), jsx(Input, { type: "number", value: field.props.qrCodeConfig?.size || 128, onChange: (e) => handleUpdateProp('qrCodeConfig', { ...field.props.qrCodeConfig, size: parseInt(e.target.value) }), min: 64, max: 512 })] })] })), field.type === 'container' && (jsxs("div", { className: "space-y-4", children: [jsx(Separator, {}), jsx("h4", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Container Settings" }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Direction" }), jsxs(Select, { value: field.props.containerConfig?.direction || 'row', onValueChange: (value) => handleUpdateProp('containerConfig', { ...field.props.containerConfig, direction: value }), children: [jsx(SelectTrigger, { "data-testid": "select-container-direction", children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "row", children: "Row (Horizontal)" }), jsx(SelectItem, { value: "column", children: "Column (Vertical)" })] })] })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Inner Field Size (Density)" }), jsxs(Select, { value: field.props.containerConfig?.fieldSize || 'normal', onValueChange: (value) => handleUpdateProp('containerConfig', { ...field.props.containerConfig, fieldSize: value }), children: [jsx(SelectTrigger, { "data-testid": "container-field-size", children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "compact", "data-testid": "field-size-compact", children: "Compact (Minimal)" }), jsx(SelectItem, { value: "normal", "data-testid": "field-size-normal", children: "Normal" }), jsx(SelectItem, { value: "comfortable", "data-testid": "field-size-comfortable", children: "Comfortable (Spacious)" })] })] }), jsx("p", { className: "text-xs text-muted-foreground", children: "Controls padding and font sizes for fields inside this container" })] }), jsx(Separator, {}), jsx("h5", { className: "text-xs font-medium text-muted-foreground", children: "Spacing & Layout" }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Gap (between items)" }), jsx(Input, { type: "number", value: field.props.containerConfig?.gap ?? 4, onChange: (e) => handleUpdateProp('containerConfig', { ...field.props.containerConfig, gap: parseInt(e.target.value) }), min: 0, max: 16 }), jsx("p", { className: "text-xs text-muted-foreground", children: "Space between child elements (0-16)" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Padding (inner space)" }), jsx(Input, { type: "number", value: field.props.containerConfig?.padding ?? 4, onChange: (e) => handleUpdateProp('containerConfig', { ...field.props.containerConfig, padding: parseInt(e.target.value) }), min: 0, max: 16 }), jsx("p", { className: "text-xs text-muted-foreground", children: "Inner spacing around content (0-16)" })] }), jsx(Separator, {}), jsx("h5", { className: "text-xs font-medium text-muted-foreground", children: "Flex Properties" }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Justify Content" }), jsxs(Select, { value: field.props.containerConfig?.justifyContent || 'flex-start', onValueChange: (value) => handleUpdateProp('containerConfig', { ...field.props.containerConfig, justifyContent: value }), children: [jsx(SelectTrigger, { "data-testid": "select-justify-content", children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "flex-start", children: "Start" }), jsx(SelectItem, { value: "flex-end", children: "End" }), jsx(SelectItem, { value: "center", children: "Center" }), jsx(SelectItem, { value: "space-between", children: "Space Between" }), jsx(SelectItem, { value: "space-around", children: "Space Around" }), jsx(SelectItem, { value: "space-evenly", children: "Space Evenly" })] })] })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Align Items" }), jsxs(Select, { value: field.props.containerConfig?.alignItems || 'stretch', onValueChange: (value) => handleUpdateProp('containerConfig', { ...field.props.containerConfig, alignItems: value }), children: [jsx(SelectTrigger, { "data-testid": "select-align-items", children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "flex-start", children: "Start" }), jsx(SelectItem, { value: "flex-end", children: "End" }), jsx(SelectItem, { value: "center", children: "Center" }), jsx(SelectItem, { value: "stretch", children: "Stretch" }), jsx(SelectItem, { value: "baseline", children: "Baseline" })] })] })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Flex Wrap" }), jsxs(Select, { value: field.props.containerConfig?.flexWrap || 'wrap', onValueChange: (value) => handleUpdateProp('containerConfig', { ...field.props.containerConfig, flexWrap: value }), children: [jsx(SelectTrigger, { "data-testid": "select-flex-wrap", children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "wrap", children: "Wrap" }), jsx(SelectItem, { value: "nowrap", children: "No Wrap" })] })] })] }), jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label, { className: "text-sm", children: "Show Border" }), jsx(Switch, { checked: field.props.containerConfig?.border || false, onCheckedChange: (checked) => handleUpdateProp('containerConfig', { ...field.props.containerConfig, border: checked }) })] }), jsx(Separator, {}), jsxs("div", { className: "space-y-3", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsx("h5", { className: "text-sm font-medium", children: "Container Fields" }), jsxs("span", { className: "text-xs text-muted-foreground", children: [(field.props.containerConfig?.fields || []).length, " field(s)"] })] }), jsx("p", { className: "text-xs text-muted-foreground", children: "Drag fields onto the container. Set each field's width in its properties." })] })] })), field.type === 'table' && (jsxs("div", { className: "space-y-4 p-3 bg-muted/30 rounded-md", children: [jsx("h4", { className: "text-sm font-medium", children: "Table Configuration" }), jsxs("div", { className: "space-y-3", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label, { className: "text-sm", children: "Show Row Numbers" }), jsx(Switch, { checked: field.props.tableConfig?.showRowNumbers ?? true, onCheckedChange: (checked) => handleUpdateProp('tableConfig', { ...field.props.tableConfig, showRowNumbers: checked }) })] }), jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label, { className: "text-sm", children: "Allow Add Rows" }), jsx(Switch, { checked: field.props.tableConfig?.allowAddRows ?? true, onCheckedChange: (checked) => handleUpdateProp('tableConfig', { ...field.props.tableConfig, allowAddRows: checked }) })] }), jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label, { className: "text-sm", children: "Allow Delete Rows" }), jsx(Switch, { checked: field.props.tableConfig?.allowDeleteRows ?? false, onCheckedChange: (checked) => handleUpdateProp('tableConfig', { ...field.props.tableConfig, allowDeleteRows: checked }) })] }), jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label, { className: "text-sm", children: "Striped Rows" }), jsx(Switch, { checked: field.props.tableConfig?.striped ?? false, onCheckedChange: (checked) => handleUpdateProp('tableConfig', { ...field.props.tableConfig, striped: checked }) })] }), jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label, { className: "text-sm", children: "Bordered" }), jsx(Switch, { checked: field.props.tableConfig?.bordered ?? true, onCheckedChange: (checked) => handleUpdateProp('tableConfig', { ...field.props.tableConfig, bordered: checked }) })] }), jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label, { className: "text-sm", children: "Compact" }), jsx(Switch, { checked: field.props.tableConfig?.compact ?? false, onCheckedChange: (checked) => handleUpdateProp('tableConfig', { ...field.props.tableConfig, compact: checked }) })] })] }), jsx(Separator, {}), jsxs("div", { className: "grid grid-cols-2 gap-3", children: [jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Min Rows" }), jsx(Input, { type: "number", value: field.props.tableConfig?.minRows ?? 1, onChange: (e) => handleUpdateProp('tableConfig', { ...field.props.tableConfig, minRows: parseInt(e.target.value) || 1 }), min: 1, max: 100 })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Max Rows" }), jsx(Input, { type: "number", value: field.props.tableConfig?.maxRows ?? 100, onChange: (e) => handleUpdateProp('tableConfig', { ...field.props.tableConfig, maxRows: parseInt(e.target.value) || 100 }), min: 1, max: 1000 })] })] }), jsx(Separator, {}), jsxs("div", { className: "space-y-3", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsx("h5", { className: "text-sm font-medium", children: "Columns" }), jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
                                                         const currentColumns = field.props.tableConfig?.columns || [];
                                                         const newColumn = {
                                                             key: `col_${Date.now()}`,
@@ -3671,102 +2309,102 @@ function FieldProperties() {
                                                             type: 'text',
                                                         };
                                                         handleUpdateProp('tableConfig', { ...field.props.tableConfig, columns: [...currentColumns, newColumn] });
-                                                    }, children: [jsxRuntimeExports.jsx(Plus, { className: "h-4 w-4 mr-1" }), "Add Column"] })] }), (field.props.tableConfig?.columns || []).map((col, colIndex) => (jsxRuntimeExports.jsxs("div", { className: "p-3 bg-background rounded-md border border-border space-y-3", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsxs("span", { className: "text-xs font-medium text-muted-foreground", children: ["Column ", colIndex + 1] }), jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => {
+                                                    }, children: [jsx(Plus, { className: "h-4 w-4 mr-1" }), "Add Column"] })] }), (field.props.tableConfig?.columns || []).map((col, colIndex) => (jsxs("div", { className: "p-3 bg-background rounded-md border border-border space-y-3", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsxs("span", { className: "text-xs font-medium text-muted-foreground", children: ["Column ", colIndex + 1] }), jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => {
                                                                 const currentColumns = [...(field.props.tableConfig?.columns || [])];
                                                                 currentColumns.splice(colIndex, 1);
                                                                 handleUpdateProp('tableConfig', { ...field.props.tableConfig, columns: currentColumns });
-                                                            }, children: jsxRuntimeExports.jsx(Trash2, { className: "h-3 w-3 text-destructive" }) })] }), jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Key" }), jsxRuntimeExports.jsx(Input, { value: col.key, onChange: (e) => {
+                                                            }, children: jsx(Trash2, { className: "h-3 w-3 text-destructive" }) })] }), jsxs("div", { className: "grid grid-cols-2 gap-2", children: [jsxs("div", { className: "space-y-1", children: [jsx(Label, { className: "text-xs", children: "Key" }), jsx(Input, { value: col.key, onChange: (e) => {
                                                                         const currentColumns = [...(field.props.tableConfig?.columns || [])];
                                                                         currentColumns[colIndex] = { ...col, key: e.target.value };
                                                                         handleUpdateProp('tableConfig', { ...field.props.tableConfig, columns: currentColumns });
-                                                                    }, placeholder: "column_key", className: "text-xs h-8" })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Label" }), jsxRuntimeExports.jsx(Input, { value: col.label, onChange: (e) => {
+                                                                    }, placeholder: "column_key", className: "text-xs h-8" })] }), jsxs("div", { className: "space-y-1", children: [jsx(Label, { className: "text-xs", children: "Label" }), jsx(Input, { value: col.label, onChange: (e) => {
                                                                         const currentColumns = [...(field.props.tableConfig?.columns || [])];
                                                                         currentColumns[colIndex] = { ...col, label: e.target.value };
                                                                         handleUpdateProp('tableConfig', { ...field.props.tableConfig, columns: currentColumns });
-                                                                    }, placeholder: "Column Label", className: "text-xs h-8" })] })] }), jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-3 gap-2", children: [jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Type" }), jsxRuntimeExports.jsxs(Select, { value: col.type || 'text', onValueChange: (value) => {
+                                                                    }, placeholder: "Column Label", className: "text-xs h-8" })] })] }), jsxs("div", { className: "grid grid-cols-3 gap-2", children: [jsxs("div", { className: "space-y-1", children: [jsx(Label, { className: "text-xs", children: "Type" }), jsxs(Select, { value: col.type || 'text', onValueChange: (value) => {
                                                                         const currentColumns = [...(field.props.tableConfig?.columns || [])];
                                                                         currentColumns[colIndex] = { ...col, type: value };
                                                                         handleUpdateProp('tableConfig', { ...field.props.tableConfig, columns: currentColumns });
-                                                                    }, children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8 text-xs", children: jsxRuntimeExports.jsx(SelectValue, {}) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "text", children: "Text" }), jsxRuntimeExports.jsx(SelectItem, { value: "number", children: "Number" }), jsxRuntimeExports.jsx(SelectItem, { value: "email", children: "Email" }), jsxRuntimeExports.jsx(SelectItem, { value: "date", children: "Date" }), jsxRuntimeExports.jsx(SelectItem, { value: "select", children: "Select" }), jsxRuntimeExports.jsx(SelectItem, { value: "checkbox", children: "Checkbox" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Width" }), jsxRuntimeExports.jsx(Input, { value: col.width || '', onChange: (e) => {
+                                                                    }, children: [jsx(SelectTrigger, { className: "h-8 text-xs", children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "text", children: "Text" }), jsx(SelectItem, { value: "number", children: "Number" }), jsx(SelectItem, { value: "email", children: "Email" }), jsx(SelectItem, { value: "date", children: "Date" }), jsx(SelectItem, { value: "select", children: "Select" }), jsx(SelectItem, { value: "checkbox", children: "Checkbox" })] })] })] }), jsxs("div", { className: "space-y-1", children: [jsx(Label, { className: "text-xs", children: "Width" }), jsx(Input, { value: col.width || '', onChange: (e) => {
                                                                         const currentColumns = [...(field.props.tableConfig?.columns || [])];
                                                                         currentColumns[colIndex] = { ...col, width: e.target.value };
                                                                         handleUpdateProp('tableConfig', { ...field.props.tableConfig, columns: currentColumns });
-                                                                    }, placeholder: "auto", className: "text-xs h-8" })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Required" }), jsxRuntimeExports.jsx("div", { className: "flex items-center h-8", children: jsxRuntimeExports.jsx(Switch, { checked: col.required || false, onCheckedChange: (checked) => {
+                                                                    }, placeholder: "auto", className: "text-xs h-8" })] }), jsxs("div", { className: "space-y-1", children: [jsx(Label, { className: "text-xs", children: "Required" }), jsx("div", { className: "flex items-center h-8", children: jsx(Switch, { checked: col.required || false, onCheckedChange: (checked) => {
                                                                             const currentColumns = [...(field.props.tableConfig?.columns || [])];
                                                                             currentColumns[colIndex] = { ...col, required: checked };
                                                                             handleUpdateProp('tableConfig', { ...field.props.tableConfig, columns: currentColumns });
-                                                                        } }) })] })] }), col.type === 'select' && (jsxRuntimeExports.jsxs("div", { className: "space-y-2 pt-2 border-t border-border", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs font-medium", children: "Select Options" }), jsxRuntimeExports.jsxs(Button, { variant: "outline", size: "sm", className: "h-6 text-xs", onClick: () => {
+                                                                        } }) })] })] }), col.type === 'select' && (jsxs("div", { className: "space-y-2 pt-2 border-t border-border", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label, { className: "text-xs font-medium", children: "Select Options" }), jsxs(Button, { variant: "outline", size: "sm", className: "h-6 text-xs", onClick: () => {
                                                                         const currentColumns = [...(field.props.tableConfig?.columns || [])];
                                                                         const currentOptions = col.options || [];
                                                                         const newOption = { label: `Option ${currentOptions.length + 1}`, value: `option_${currentOptions.length + 1}` };
                                                                         currentColumns[colIndex] = { ...col, options: [...currentOptions, newOption] };
                                                                         handleUpdateProp('tableConfig', { ...field.props.tableConfig, columns: currentColumns });
-                                                                    }, children: [jsxRuntimeExports.jsx(Plus, { className: "h-3 w-3 mr-1" }), "Add"] })] }), jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-[1fr_1fr_auto] gap-1 text-[10px] text-muted-foreground px-1", children: [jsxRuntimeExports.jsx("span", { children: "Label" }), jsxRuntimeExports.jsx("span", { children: "Value" }), jsxRuntimeExports.jsx("span", { className: "w-6" })] }), (col.options || []).map((opt, optIndex) => (jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-[1fr_1fr_auto] gap-1 items-center", children: [jsxRuntimeExports.jsx(Input, { value: opt.label, onChange: (e) => {
+                                                                    }, children: [jsx(Plus, { className: "h-3 w-3 mr-1" }), "Add"] })] }), jsxs("div", { className: "grid grid-cols-[1fr_1fr_auto] gap-1 text-[10px] text-muted-foreground px-1", children: [jsx("span", { children: "Label" }), jsx("span", { children: "Value" }), jsx("span", { className: "w-6" })] }), (col.options || []).map((opt, optIndex) => (jsxs("div", { className: "grid grid-cols-[1fr_1fr_auto] gap-1 items-center", children: [jsx(Input, { value: opt.label, onChange: (e) => {
                                                                         const currentColumns = [...(field.props.tableConfig?.columns || [])];
                                                                         const currentOptions = [...(col.options || [])];
                                                                         currentOptions[optIndex] = { ...opt, label: e.target.value };
                                                                         currentColumns[colIndex] = { ...col, options: currentOptions };
                                                                         handleUpdateProp('tableConfig', { ...field.props.tableConfig, columns: currentColumns });
-                                                                    }, placeholder: "Evet", className: "text-xs h-7" }), jsxRuntimeExports.jsx(Input, { value: opt.value, onChange: (e) => {
+                                                                    }, placeholder: "Evet", className: "text-xs h-7" }), jsx(Input, { value: opt.value, onChange: (e) => {
                                                                         const currentColumns = [...(field.props.tableConfig?.columns || [])];
                                                                         const currentOptions = [...(col.options || [])];
                                                                         currentOptions[optIndex] = { ...opt, value: e.target.value };
                                                                         currentColumns[colIndex] = { ...col, options: currentOptions };
                                                                         handleUpdateProp('tableConfig', { ...field.props.tableConfig, columns: currentColumns });
-                                                                    }, placeholder: "yes", className: "text-xs h-7" }), jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => {
+                                                                    }, placeholder: "yes", className: "text-xs h-7" }), jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => {
                                                                         const currentColumns = [...(field.props.tableConfig?.columns || [])];
                                                                         const currentOptions = [...(col.options || [])];
                                                                         currentOptions.splice(optIndex, 1);
                                                                         currentColumns[colIndex] = { ...col, options: currentOptions };
                                                                         handleUpdateProp('tableConfig', { ...field.props.tableConfig, columns: currentColumns });
-                                                                    }, children: jsxRuntimeExports.jsx(Trash2, { className: "h-3 w-3 text-destructive" }) })] }, optIndex))), (!col.options || col.options.length === 0) && (jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "Hen\u00FCz se\u00E7enek eklenmedi" }))] }))] }, col.key)))] })] })), (() => {
+                                                                    }, children: jsx(Trash2, { className: "h-3 w-3 text-destructive" }) })] }, optIndex))), (!col.options || col.options.length === 0) && (jsx("p", { className: "text-xs text-muted-foreground italic", children: "Hen\u00FCz se\u00E7enek eklenmedi" }))] }))] }, col.key)))] })] })), (() => {
                             const staticDisplayTypes = ['spacer', 'divider', 'header', 'subheader', 'label', 'paragraph', 'alert', 'image', 'qrcode', 'button'];
                             if (staticDisplayTypes.includes(field.type))
                                 return null;
-                            return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Separator, {}), jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Required" }), jsxRuntimeExports.jsx(Switch, { checked: field.validation?.required || false, onCheckedChange: (checked) => handleUpdateValidation('required', checked), "data-testid": "switch-required" })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Disabled" }), jsxRuntimeExports.jsx(Switch, { checked: field.props.disabled || false, onCheckedChange: (checked) => handleUpdateProp('disabled', checked), "data-testid": "switch-disabled" })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Read Only" }), jsxRuntimeExports.jsx(Switch, { checked: field.props.readOnly || false, onCheckedChange: (checked) => handleUpdateProp('readOnly', checked), "data-testid": "switch-readonly" })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Hidden" }), jsxRuntimeExports.jsx(Switch, { checked: field.props.hidden || false, onCheckedChange: (checked) => handleUpdateProp('hidden', checked) })] })] })] }));
-                        })(), jsxRuntimeExports.jsx(Separator, {}), jsxRuntimeExports.jsxs(Button, { variant: "outline", size: "sm", onClick: () => deleteField(row.id, column.id, field.id), className: "w-full gap-2 text-destructive hover:text-destructive", "data-testid": "button-delete-field", children: [jsxRuntimeExports.jsx(Trash2, { className: "h-4 w-4" }), "Delete Field"] })] }), jsxRuntimeExports.jsx(TabsContent, { value: "rules", className: "space-y-4 mt-0", children: (() => {
+                            return (jsxs(Fragment, { children: [jsx(Separator, {}), jsxs("div", { className: "space-y-3", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label, { className: "text-sm", children: "Required" }), jsx(Switch, { checked: field.validation?.required || false, onCheckedChange: (checked) => handleUpdateValidation('required', checked), "data-testid": "switch-required" })] }), jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label, { className: "text-sm", children: "Disabled" }), jsx(Switch, { checked: field.props.disabled || false, onCheckedChange: (checked) => handleUpdateProp('disabled', checked), "data-testid": "switch-disabled" })] }), jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label, { className: "text-sm", children: "Read Only" }), jsx(Switch, { checked: field.props.readOnly || false, onCheckedChange: (checked) => handleUpdateProp('readOnly', checked), "data-testid": "switch-readonly" })] }), jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label, { className: "text-sm", children: "Hidden" }), jsx(Switch, { checked: field.props.hidden || false, onCheckedChange: (checked) => handleUpdateProp('hidden', checked) })] })] })] }));
+                        })(), jsx(Separator, {}), jsxs(Button, { variant: "outline", size: "sm", onClick: () => deleteField(row.id, column.id, field.id), className: "w-full gap-2 text-destructive hover:text-destructive", "data-testid": "button-delete-field", children: [jsx(Trash2, { className: "h-4 w-4" }), "Delete Field"] })] }), jsx(TabsContent, { value: "rules", className: "space-y-4 mt-0", children: (() => {
                         const staticDisplayTypes = ['spacer', 'divider', 'header', 'subheader', 'label', 'paragraph', 'alert', 'image', 'qrcode', 'button'];
                         if (staticDisplayTypes.includes(field.type)) {
-                            return (jsxRuntimeExports.jsx("div", { className: "text-center py-8 text-muted-foreground", children: jsxRuntimeExports.jsx("p", { className: "text-sm", children: "Bu bile\u015Fen i\u00E7in do\u011Frulama kurallar\u0131 gerekli de\u011Fil." }) }));
+                            return (jsx("div", { className: "text-center py-8 text-muted-foreground", children: jsx("p", { className: "text-sm", children: "Bu bile\u015Fen i\u00E7in do\u011Frulama kurallar\u0131 gerekli de\u011Fil." }) }));
                         }
-                        return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 mb-4", children: [jsxRuntimeExports.jsx(Settings2, { className: "h-4 w-4 text-muted-foreground" }), jsxRuntimeExports.jsx("span", { className: "text-sm font-medium", children: "Validation Rules" })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-3 pb-4", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Auto Validate" }), jsxRuntimeExports.jsx(Switch, { checked: field.validation?.autoValidate || false, onCheckedChange: (checked) => handleUpdateValidation('autoValidate', checked) })] }), jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Validate while typing" }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Validate on Blur" }), jsxRuntimeExports.jsx(Switch, { checked: field.validation?.validateOnBlur ?? true, onCheckedChange: (checked) => handleUpdateValidation('validateOnBlur', checked) })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Validate on Change" }), jsxRuntimeExports.jsx(Switch, { checked: field.validation?.validateOnChange || false, onCheckedChange: (checked) => handleUpdateValidation('validateOnChange', checked) })] })] }), jsxRuntimeExports.jsx(Separator, {}), jsxRuntimeExports.jsxs("div", { className: "space-y-2 pt-4", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Validation Type" }), jsxRuntimeExports.jsxs(Select, { value: field.validation?.validationType || '', onValueChange: (value) => handleUpdateValidation('validationType', value || undefined), children: [jsxRuntimeExports.jsx(SelectTrigger, { children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "None" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "email", children: "Email" }), jsxRuntimeExports.jsx(SelectItem, { value: "url", children: "URL" }), jsxRuntimeExports.jsx(SelectItem, { value: "phone", children: "Phone" }), jsxRuntimeExports.jsx(SelectItem, { value: "custom", children: "Custom" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Min Length" }), jsxRuntimeExports.jsx(Input, { type: "number", min: 0, value: field.validation?.minLength || '', onChange: (e) => handleUpdateValidation('minLength', e.target.value ? parseInt(e.target.value) : undefined), "data-testid": "input-min-length" })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Max Length" }), jsxRuntimeExports.jsx(Input, { type: "number", min: 0, value: field.validation?.maxLength || '', onChange: (e) => handleUpdateValidation('maxLength', e.target.value ? parseInt(e.target.value) : undefined), "data-testid": "input-max-length" })] }), ['number', 'slider'].includes(field.type) && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Min Value" }), jsxRuntimeExports.jsx(Input, { type: "number", value: field.validation?.min ?? '', onChange: (e) => handleUpdateValidation('min', e.target.value ? parseFloat(e.target.value) : undefined), "data-testid": "input-min-value" })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Max Value" }), jsxRuntimeExports.jsx(Input, { type: "number", value: field.validation?.max ?? '', onChange: (e) => handleUpdateValidation('max', e.target.value ? parseFloat(e.target.value) : undefined), "data-testid": "input-max-value" })] })] })), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Pattern (Regex)" }), jsxRuntimeExports.jsx(Input, { value: field.validation?.pattern || '', onChange: (e) => handleUpdateValidation('pattern', e.target.value || undefined), placeholder: "^[a-zA-Z]+$", className: "font-mono text-sm", "data-testid": "input-pattern" })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Custom Error Message" }), jsxRuntimeExports.jsx(Input, { value: field.validation?.errorMessage || '', onChange: (e) => handleUpdateValidation('errorMessage', e.target.value || undefined), placeholder: "Please enter a valid value", "data-testid": "input-error-message" })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Custom Validation (JS)" }), jsxRuntimeExports.jsx(Textarea, { value: field.validation?.customValidation || '', onChange: (e) => handleUpdateValidation('customValidation', e.target.value || undefined), placeholder: "return value.length > 5;", className: "font-mono text-sm min-h-[80px]" }), jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Write JavaScript that returns true for valid values" })] }), jsxRuntimeExports.jsx(Separator, {}), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(Zap, { className: "h-4 w-4 text-muted-foreground" }), jsxRuntimeExports.jsx(Label, { className: "text-sm font-medium", children: "Conditional Logic" })] }), jsxRuntimeExports.jsx(Switch, { checked: field.conditionalLogic?.enabled || false, onCheckedChange: (checked) => handleUpdateConditionalLogic({ enabled: checked }) })] }), field.conditionalLogic?.enabled && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Action" }), jsxRuntimeExports.jsxs(Select, { value: field.conditionalLogic?.action || 'show', onValueChange: (value) => handleUpdateConditionalLogic({ action: value }), children: [jsxRuntimeExports.jsx(SelectTrigger, { children: jsxRuntimeExports.jsx(SelectValue, {}) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "show", children: "Show this field" }), jsxRuntimeExports.jsx(SelectItem, { value: "hide", children: "Hide this field" }), jsxRuntimeExports.jsx(SelectItem, { value: "enable", children: "Enable this field" }), jsxRuntimeExports.jsx(SelectItem, { value: "disable", children: "Disable this field" }), jsxRuntimeExports.jsx(SelectItem, { value: "require", children: "Make required" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "When" }), jsxRuntimeExports.jsxs(Select, { value: field.conditionalLogic?.logicType || 'all', onValueChange: (value) => handleUpdateConditionalLogic({ logicType: value }), children: [jsxRuntimeExports.jsx(SelectTrigger, { children: jsxRuntimeExports.jsx(SelectValue, {}) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "all", children: "All conditions are met" }), jsxRuntimeExports.jsx(SelectItem, { value: "any", children: "Any condition is met" })] })] })] }), jsxRuntimeExports.jsx(Separator, {}), jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm font-medium", children: "Conditions" }), (field.conditionalLogic?.conditions || []).map((condition, index) => (jsxRuntimeExports.jsxs("div", { className: "p-3 border border-border rounded-md space-y-3", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsxs(Badge, { variant: "secondary", children: ["Condition ", index + 1] }), jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", onClick: () => removeCondition(index), children: jsxRuntimeExports.jsx(Trash2, { className: "h-4 w-4" }) })] }), jsxRuntimeExports.jsxs(Select, { value: condition.fieldKey, onValueChange: (value) => updateCondition(index, { fieldKey: value }), children: [jsxRuntimeExports.jsx(SelectTrigger, { children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select field..." }) }), jsxRuntimeExports.jsx(SelectContent, { children: allFields.map((f) => (jsxRuntimeExports.jsxs(SelectItem, { value: f.props.key, children: [f.props.label, " (", f.props.key, ")"] }, f.id))) })] }), jsxRuntimeExports.jsxs(Select, { value: condition.operator, onValueChange: (value) => updateCondition(index, { operator: value }), children: [jsxRuntimeExports.jsx(SelectTrigger, { children: jsxRuntimeExports.jsx(SelectValue, {}) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "equals", children: "Equals" }), jsxRuntimeExports.jsx(SelectItem, { value: "notEquals", children: "Not equals" }), jsxRuntimeExports.jsx(SelectItem, { value: "contains", children: "Contains" }), jsxRuntimeExports.jsx(SelectItem, { value: "notContains", children: "Does not contain" }), jsxRuntimeExports.jsx(SelectItem, { value: "greaterThan", children: "Greater than" }), jsxRuntimeExports.jsx(SelectItem, { value: "lessThan", children: "Less than" }), jsxRuntimeExports.jsx(SelectItem, { value: "isEmpty", children: "Is empty" }), jsxRuntimeExports.jsx(SelectItem, { value: "isNotEmpty", children: "Is not empty" }), jsxRuntimeExports.jsx(SelectItem, { value: "startsWith", children: "Starts with" }), jsxRuntimeExports.jsx(SelectItem, { value: "endsWith", children: "Ends with" })] })] }), !['isEmpty', 'isNotEmpty'].includes(condition.operator) && (jsxRuntimeExports.jsx(Input, { value: condition.value || '', onChange: (e) => updateCondition(index, { value: e.target.value }), placeholder: "Value..." }))] }, index))), jsxRuntimeExports.jsxs(Button, { variant: "outline", size: "sm", onClick: addCondition, className: "w-full gap-2", children: [jsxRuntimeExports.jsx(Plus, { className: "h-4 w-4" }), "Add Condition"] })] })] }))] }));
-                    })() }), jsxRuntimeExports.jsxs(TabsContent, { value: "actions", className: "space-y-4 mt-0", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 mb-4", children: [jsxRuntimeExports.jsx(MousePointerClick, { className: "h-4 w-4 text-muted-foreground" }), jsxRuntimeExports.jsx("span", { className: "text-sm font-medium", children: "Event Handlers" })] }), jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground mb-4", children: "Add actions that trigger on specific events like click, change, focus, or blur." }), ['onClick', 'onChange', 'onFocus', 'onBlur'].map((eventType) => (jsxRuntimeExports.jsxs(Collapsible, { className: "border border-border rounded-md", children: [jsxRuntimeExports.jsxs(CollapsibleTrigger, { className: "flex items-center justify-between w-full p-3 hover:bg-muted/50", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(Play, { className: "h-3 w-3 text-muted-foreground" }), jsxRuntimeExports.jsx("span", { className: "text-sm font-medium", children: eventType }), (field.events?.[eventType]?.length || 0) > 0 && (jsxRuntimeExports.jsx(Badge, { variant: "secondary", className: "text-xs", children: field.events?.[eventType]?.length }))] }), jsxRuntimeExports.jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground" })] }), jsxRuntimeExports.jsxs(CollapsibleContent, { className: "p-3 pt-0 space-y-3", children: [(field.events?.[eventType] || []).map((action, index) => (jsxRuntimeExports.jsxs("div", { className: "p-3 border border-border rounded-md space-y-3 bg-muted/30", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsxs(Badge, { variant: "outline", children: ["Action ", index + 1] }), jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", onClick: () => removeEventAction(eventType, index), children: jsxRuntimeExports.jsx(Trash2, { className: "h-4 w-4" }) })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Type" }), jsxRuntimeExports.jsxs(Select, { value: action.type, onValueChange: (value) => updateEventAction(eventType, index, { type: value }), children: [jsxRuntimeExports.jsx(SelectTrigger, { children: jsxRuntimeExports.jsx(SelectValue, {}) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "common", children: "Common Action" }), jsxRuntimeExports.jsx(SelectItem, { value: "code", children: "Code Action" }), jsxRuntimeExports.jsx(SelectItem, { value: "custom", children: "Custom Action" })] })] })] }), action.type === 'common' && (jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Action" }), jsxRuntimeExports.jsxs(Select, { value: action.name, onValueChange: (value) => updateEventAction(eventType, index, { name: value }), children: [jsxRuntimeExports.jsx(SelectTrigger, { children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select action..." }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "validate", children: "Validate Form" }), jsxRuntimeExports.jsx(SelectItem, { value: "reset", children: "Reset Form" }), jsxRuntimeExports.jsx(SelectItem, { value: "submit", children: "Submit Form" }), jsxRuntimeExports.jsx(SelectItem, { value: "clearField", children: "Clear This Field" }), jsxRuntimeExports.jsx(SelectItem, { value: "focusField", children: "Focus Field" }), jsxRuntimeExports.jsx(SelectItem, { value: "showMessage", children: "Show Message" })] })] })] })), action.type === 'code' && (jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "JavaScript Code" }), jsxRuntimeExports.jsx(Textarea, { value: action.code || '', onChange: (e) => updateEventAction(eventType, index, { code: e.target.value }), placeholder: "console.log('Action triggered');", className: "font-mono text-xs min-h-[60px]" })] })), action.type === 'custom' && (jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Custom Action Name" }), jsxRuntimeExports.jsx(Input, { value: action.name, onChange: (e) => updateEventAction(eventType, index, { name: e.target.value }), placeholder: "myCustomAction", className: "font-mono text-sm" }), jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "This will call the custom action passed to FormViewer" })] }))] }, index))), jsxRuntimeExports.jsxs(Button, { variant: "outline", size: "sm", onClick: () => addEventAction(eventType), className: "w-full gap-2", children: [jsxRuntimeExports.jsx(Plus, { className: "h-4 w-4" }), "Add Action"] })] })] }, eventType)))] }), jsxRuntimeExports.jsxs(TabsContent, { value: "style", className: "space-y-4 mt-0", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-4", children: [jsxRuntimeExports.jsx("span", { className: "text-sm font-medium", children: "For device" }), jsxRuntimeExports.jsxs(Select, { value: field.customStyle?.deviceTarget || 'any', onValueChange: (value) => handleUpdateCustomStyle('deviceTarget', value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "w-32", children: jsxRuntimeExports.jsx(SelectValue, {}) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "any", children: "Any" }), jsxRuntimeExports.jsx(SelectItem, { value: "mobile", children: "Mobile" }), jsxRuntimeExports.jsx(SelectItem, { value: "tablet", children: "Tablet" }), jsxRuntimeExports.jsx(SelectItem, { value: "desktop", children: "Desktop" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsx("h4", { className: "text-sm font-semibold", children: "Component" }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(Paintbrush, { className: "h-4 w-4 text-muted-foreground" }), jsxRuntimeExports.jsx(Label, { className: "text-sm w-24", children: "Class Name" }), jsxRuntimeExports.jsx(Input, { value: field.customStyle?.inputClassName || '', onChange: (e) => handleUpdateCustomStyle('inputClassName', e.target.value), placeholder: "", className: "font-mono text-sm flex-1" }), field.customStyle?.inputClassName && (jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", onClick: () => handleUpdateCustomStyle('inputClassName', ''), children: jsxRuntimeExports.jsx(Trash2, { className: "h-4 w-4" }) }))] })] }), jsxRuntimeExports.jsx(Separator, {}), jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsx("h4", { className: "text-sm font-semibold", children: "Wrapper" }), jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Width" }), jsxRuntimeExports.jsxs("div", { className: "flex gap-1", children: [jsxRuntimeExports.jsx(Input, { type: "number", value: field.customStyle?.width?.value ?? 100, onChange: (e) => handleUpdateCustomStyle('width', {
+                        return (jsxs(Fragment, { children: [jsxs("div", { className: "flex items-center gap-2 mb-4", children: [jsx(Settings2, { className: "h-4 w-4 text-muted-foreground" }), jsx("span", { className: "text-sm font-medium", children: "Validation Rules" })] }), jsxs("div", { className: "space-y-3 pb-4", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label, { className: "text-sm", children: "Auto Validate" }), jsx(Switch, { checked: field.validation?.autoValidate || false, onCheckedChange: (checked) => handleUpdateValidation('autoValidate', checked) })] }), jsx("p", { className: "text-xs text-muted-foreground", children: "Validate while typing" }), jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label, { className: "text-sm", children: "Validate on Blur" }), jsx(Switch, { checked: field.validation?.validateOnBlur ?? true, onCheckedChange: (checked) => handleUpdateValidation('validateOnBlur', checked) })] }), jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label, { className: "text-sm", children: "Validate on Change" }), jsx(Switch, { checked: field.validation?.validateOnChange || false, onCheckedChange: (checked) => handleUpdateValidation('validateOnChange', checked) })] })] }), jsx(Separator, {}), jsxs("div", { className: "space-y-2 pt-4", children: [jsx(Label, { className: "text-sm", children: "Validation Type" }), jsxs(Select, { value: field.validation?.validationType || '', onValueChange: (value) => handleUpdateValidation('validationType', value || undefined), children: [jsx(SelectTrigger, { children: jsx(SelectValue, { placeholder: "None" }) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "email", children: "Email" }), jsx(SelectItem, { value: "url", children: "URL" }), jsx(SelectItem, { value: "phone", children: "Phone" }), jsx(SelectItem, { value: "custom", children: "Custom" })] })] })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Min Length" }), jsx(Input, { type: "number", min: 0, value: field.validation?.minLength || '', onChange: (e) => handleUpdateValidation('minLength', e.target.value ? parseInt(e.target.value) : undefined), "data-testid": "input-min-length" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Max Length" }), jsx(Input, { type: "number", min: 0, value: field.validation?.maxLength || '', onChange: (e) => handleUpdateValidation('maxLength', e.target.value ? parseInt(e.target.value) : undefined), "data-testid": "input-max-length" })] }), ['number', 'slider'].includes(field.type) && (jsxs(Fragment, { children: [jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Min Value" }), jsx(Input, { type: "number", value: field.validation?.min ?? '', onChange: (e) => handleUpdateValidation('min', e.target.value ? parseFloat(e.target.value) : undefined), "data-testid": "input-min-value" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Max Value" }), jsx(Input, { type: "number", value: field.validation?.max ?? '', onChange: (e) => handleUpdateValidation('max', e.target.value ? parseFloat(e.target.value) : undefined), "data-testid": "input-max-value" })] })] })), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Pattern (Regex)" }), jsx(Input, { value: field.validation?.pattern || '', onChange: (e) => handleUpdateValidation('pattern', e.target.value || undefined), placeholder: "^[a-zA-Z]+$", className: "font-mono text-sm", "data-testid": "input-pattern" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Custom Error Message" }), jsx(Input, { value: field.validation?.errorMessage || '', onChange: (e) => handleUpdateValidation('errorMessage', e.target.value || undefined), placeholder: "Please enter a valid value", "data-testid": "input-error-message" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Custom Validation (JS)" }), jsx(Textarea, { value: field.validation?.customValidation || '', onChange: (e) => handleUpdateValidation('customValidation', e.target.value || undefined), placeholder: "return value.length > 5;", className: "font-mono text-sm min-h-[80px]" }), jsx("p", { className: "text-xs text-muted-foreground", children: "Write JavaScript that returns true for valid values" })] }), jsx(Separator, {}), jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx(Zap, { className: "h-4 w-4 text-muted-foreground" }), jsx(Label, { className: "text-sm font-medium", children: "Conditional Logic" })] }), jsx(Switch, { checked: field.conditionalLogic?.enabled || false, onCheckedChange: (checked) => handleUpdateConditionalLogic({ enabled: checked }) })] }), field.conditionalLogic?.enabled && (jsxs(Fragment, { children: [jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Action" }), jsxs(Select, { value: field.conditionalLogic?.action || 'show', onValueChange: (value) => handleUpdateConditionalLogic({ action: value }), children: [jsx(SelectTrigger, { children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "show", children: "Show this field" }), jsx(SelectItem, { value: "hide", children: "Hide this field" }), jsx(SelectItem, { value: "enable", children: "Enable this field" }), jsx(SelectItem, { value: "disable", children: "Disable this field" }), jsx(SelectItem, { value: "require", children: "Make required" })] })] })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "When" }), jsxs(Select, { value: field.conditionalLogic?.logicType || 'all', onValueChange: (value) => handleUpdateConditionalLogic({ logicType: value }), children: [jsx(SelectTrigger, { children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "all", children: "All conditions are met" }), jsx(SelectItem, { value: "any", children: "Any condition is met" })] })] })] }), jsx(Separator, {}), jsxs("div", { className: "space-y-3", children: [jsx(Label, { className: "text-sm font-medium", children: "Conditions" }), (field.conditionalLogic?.conditions || []).map((condition, index) => (jsxs("div", { className: "p-3 border border-border rounded-md space-y-3", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsxs(Badge, { variant: "secondary", children: ["Condition ", index + 1] }), jsx(Button, { variant: "ghost", size: "icon", onClick: () => removeCondition(index), children: jsx(Trash2, { className: "h-4 w-4" }) })] }), jsxs(Select, { value: condition.fieldKey, onValueChange: (value) => updateCondition(index, { fieldKey: value }), children: [jsx(SelectTrigger, { children: jsx(SelectValue, { placeholder: "Select field..." }) }), jsx(SelectContent, { children: allFields.map((f) => (jsxs(SelectItem, { value: f.props.key, children: [f.props.label, " (", f.props.key, ")"] }, f.id))) })] }), jsxs(Select, { value: condition.operator, onValueChange: (value) => updateCondition(index, { operator: value }), children: [jsx(SelectTrigger, { children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "equals", children: "Equals" }), jsx(SelectItem, { value: "notEquals", children: "Not equals" }), jsx(SelectItem, { value: "contains", children: "Contains" }), jsx(SelectItem, { value: "notContains", children: "Does not contain" }), jsx(SelectItem, { value: "greaterThan", children: "Greater than" }), jsx(SelectItem, { value: "lessThan", children: "Less than" }), jsx(SelectItem, { value: "isEmpty", children: "Is empty" }), jsx(SelectItem, { value: "isNotEmpty", children: "Is not empty" }), jsx(SelectItem, { value: "startsWith", children: "Starts with" }), jsx(SelectItem, { value: "endsWith", children: "Ends with" })] })] }), !['isEmpty', 'isNotEmpty'].includes(condition.operator) && (jsx(Input, { value: condition.value || '', onChange: (e) => updateCondition(index, { value: e.target.value }), placeholder: "Value..." }))] }, index))), jsxs(Button, { variant: "outline", size: "sm", onClick: addCondition, className: "w-full gap-2", children: [jsx(Plus, { className: "h-4 w-4" }), "Add Condition"] })] })] }))] }));
+                    })() }), jsxs(TabsContent, { value: "actions", className: "space-y-4 mt-0", children: [jsxs("div", { className: "flex items-center gap-2 mb-4", children: [jsx(MousePointerClick, { className: "h-4 w-4 text-muted-foreground" }), jsx("span", { className: "text-sm font-medium", children: "Event Handlers" })] }), jsx("p", { className: "text-xs text-muted-foreground mb-4", children: "Add actions that trigger on specific events like click, change, focus, or blur." }), ['onClick', 'onChange', 'onFocus', 'onBlur'].map((eventType) => (jsxs(Collapsible, { className: "border border-border rounded-md", children: [jsxs(CollapsibleTrigger, { className: "flex items-center justify-between w-full p-3 hover:bg-muted/50", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx(Play, { className: "h-3 w-3 text-muted-foreground" }), jsx("span", { className: "text-sm font-medium", children: eventType }), (field.events?.[eventType]?.length || 0) > 0 && (jsx(Badge, { variant: "secondary", className: "text-xs", children: field.events?.[eventType]?.length }))] }), jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground" })] }), jsxs(CollapsibleContent, { className: "p-3 pt-0 space-y-3", children: [(field.events?.[eventType] || []).map((action, index) => (jsxs("div", { className: "p-3 border border-border rounded-md space-y-3 bg-muted/30", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsxs(Badge, { variant: "outline", children: ["Action ", index + 1] }), jsx(Button, { variant: "ghost", size: "icon", onClick: () => removeEventAction(eventType, index), children: jsx(Trash2, { className: "h-4 w-4" }) })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-xs", children: "Type" }), jsxs(Select, { value: action.type, onValueChange: (value) => updateEventAction(eventType, index, { type: value }), children: [jsx(SelectTrigger, { children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "common", children: "Common Action" }), jsx(SelectItem, { value: "code", children: "Code Action" }), jsx(SelectItem, { value: "custom", children: "Custom Action" })] })] })] }), action.type === 'common' && (jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-xs", children: "Action" }), jsxs(Select, { value: action.name, onValueChange: (value) => updateEventAction(eventType, index, { name: value }), children: [jsx(SelectTrigger, { children: jsx(SelectValue, { placeholder: "Select action..." }) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "validate", children: "Validate Form" }), jsx(SelectItem, { value: "reset", children: "Reset Form" }), jsx(SelectItem, { value: "submit", children: "Submit Form" }), jsx(SelectItem, { value: "clearField", children: "Clear This Field" }), jsx(SelectItem, { value: "focusField", children: "Focus Field" }), jsx(SelectItem, { value: "showMessage", children: "Show Message" })] })] })] })), action.type === 'code' && (jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-xs", children: "JavaScript Code" }), jsx(Textarea, { value: action.code || '', onChange: (e) => updateEventAction(eventType, index, { code: e.target.value }), placeholder: "console.log('Action triggered');", className: "font-mono text-xs min-h-[60px]" })] })), action.type === 'custom' && (jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-xs", children: "Custom Action Name" }), jsx(Input, { value: action.name, onChange: (e) => updateEventAction(eventType, index, { name: e.target.value }), placeholder: "myCustomAction", className: "font-mono text-sm" }), jsx("p", { className: "text-xs text-muted-foreground", children: "This will call the custom action passed to FormViewer" })] }))] }, index))), jsxs(Button, { variant: "outline", size: "sm", onClick: () => addEventAction(eventType), className: "w-full gap-2", children: [jsx(Plus, { className: "h-4 w-4" }), "Add Action"] })] })] }, eventType)))] }), jsxs(TabsContent, { value: "style", className: "space-y-4 mt-0", children: [jsxs("div", { className: "flex items-center justify-between mb-4", children: [jsx("span", { className: "text-sm font-medium", children: "For device" }), jsxs(Select, { value: field.customStyle?.deviceTarget || 'any', onValueChange: (value) => handleUpdateCustomStyle('deviceTarget', value), children: [jsx(SelectTrigger, { className: "w-32", children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "any", children: "Any" }), jsx(SelectItem, { value: "mobile", children: "Mobile" }), jsx(SelectItem, { value: "tablet", children: "Tablet" }), jsx(SelectItem, { value: "desktop", children: "Desktop" })] })] })] }), jsxs("div", { className: "space-y-4", children: [jsx("h4", { className: "text-sm font-semibold", children: "Component" }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(Paintbrush, { className: "h-4 w-4 text-muted-foreground" }), jsx(Label, { className: "text-sm w-24", children: "Class Name" }), jsx(Input, { value: field.customStyle?.inputClassName || '', onChange: (e) => handleUpdateCustomStyle('inputClassName', e.target.value), placeholder: "", className: "font-mono text-sm flex-1" }), field.customStyle?.inputClassName && (jsx(Button, { variant: "ghost", size: "icon", onClick: () => handleUpdateCustomStyle('inputClassName', ''), children: jsx(Trash2, { className: "h-4 w-4" }) }))] })] }), jsx(Separator, {}), jsxs("div", { className: "space-y-4", children: [jsx("h4", { className: "text-sm font-semibold", children: "Wrapper" }), jsxs("div", { className: "grid grid-cols-2 gap-3", children: [jsxs("div", { className: "space-y-1", children: [jsx(Label, { className: "text-xs", children: "Width" }), jsxs("div", { className: "flex gap-1", children: [jsx(Input, { type: "number", value: field.customStyle?.width?.value ?? 100, onChange: (e) => handleUpdateCustomStyle('width', {
                                                                 ...field.customStyle?.width,
                                                                 value: parseInt(e.target.value) || 100
-                                                            }), className: "w-16" }), jsxRuntimeExports.jsxs(Select, { value: field.customStyle?.width?.unit || '%', onValueChange: (value) => handleUpdateCustomStyle('width', {
+                                                            }), className: "w-16" }), jsxs(Select, { value: field.customStyle?.width?.unit || '%', onValueChange: (value) => handleUpdateCustomStyle('width', {
                                                                 ...field.customStyle?.width,
                                                                 unit: value
-                                                            }), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "w-14", children: jsxRuntimeExports.jsx(SelectValue, {}) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "%", children: "%" }), jsxRuntimeExports.jsx(SelectItem, { value: "px", children: "px" }), jsxRuntimeExports.jsx(SelectItem, { value: "rem", children: "rem" })] })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Height" }), jsxRuntimeExports.jsxs(Select, { value: field.customStyle?.height || 'auto', onValueChange: (value) => handleUpdateCustomStyle('height', value), children: [jsxRuntimeExports.jsx(SelectTrigger, { children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "auto", children: "Auto" }), jsxRuntimeExports.jsx(SelectItem, { value: "100%", children: "100%" }), jsxRuntimeExports.jsx(SelectItem, { value: "50%", children: "50%" }), jsxRuntimeExports.jsx(SelectItem, { value: "200px", children: "200px" }), jsxRuntimeExports.jsx(SelectItem, { value: "300px", children: "300px" })] })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Margin Top" }), jsxRuntimeExports.jsxs(Select, { value: field.customStyle?.marginTop || '', onValueChange: (value) => handleUpdateCustomStyle('marginTop', value), children: [jsxRuntimeExports.jsx(SelectTrigger, { children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "0", children: "0" }), jsxRuntimeExports.jsx(SelectItem, { value: "4px", children: "4px" }), jsxRuntimeExports.jsx(SelectItem, { value: "8px", children: "8px" }), jsxRuntimeExports.jsx(SelectItem, { value: "16px", children: "16px" }), jsxRuntimeExports.jsx(SelectItem, { value: "24px", children: "24px" }), jsxRuntimeExports.jsx(SelectItem, { value: "32px", children: "32px" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Margin Right" }), jsxRuntimeExports.jsxs(Select, { value: field.customStyle?.marginRight || '', onValueChange: (value) => handleUpdateCustomStyle('marginRight', value), children: [jsxRuntimeExports.jsx(SelectTrigger, { children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "0", children: "0" }), jsxRuntimeExports.jsx(SelectItem, { value: "4px", children: "4px" }), jsxRuntimeExports.jsx(SelectItem, { value: "8px", children: "8px" }), jsxRuntimeExports.jsx(SelectItem, { value: "16px", children: "16px" }), jsxRuntimeExports.jsx(SelectItem, { value: "24px", children: "24px" }), jsxRuntimeExports.jsx(SelectItem, { value: "32px", children: "32px" })] })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Margin Bottom" }), jsxRuntimeExports.jsxs(Select, { value: field.customStyle?.marginBottom || '', onValueChange: (value) => handleUpdateCustomStyle('marginBottom', value), children: [jsxRuntimeExports.jsx(SelectTrigger, { children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "0", children: "0" }), jsxRuntimeExports.jsx(SelectItem, { value: "4px", children: "4px" }), jsxRuntimeExports.jsx(SelectItem, { value: "8px", children: "8px" }), jsxRuntimeExports.jsx(SelectItem, { value: "16px", children: "16px" }), jsxRuntimeExports.jsx(SelectItem, { value: "24px", children: "24px" }), jsxRuntimeExports.jsx(SelectItem, { value: "32px", children: "32px" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Margin Left" }), jsxRuntimeExports.jsxs(Select, { value: field.customStyle?.marginLeft || '', onValueChange: (value) => handleUpdateCustomStyle('marginLeft', value), children: [jsxRuntimeExports.jsx(SelectTrigger, { children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "0", children: "0" }), jsxRuntimeExports.jsx(SelectItem, { value: "4px", children: "4px" }), jsxRuntimeExports.jsx(SelectItem, { value: "8px", children: "8px" }), jsxRuntimeExports.jsx(SelectItem, { value: "16px", children: "16px" }), jsxRuntimeExports.jsx(SelectItem, { value: "24px", children: "24px" }), jsxRuntimeExports.jsx(SelectItem, { value: "32px", children: "32px" })] })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Color" }), jsxRuntimeExports.jsxs("div", { className: "flex gap-1", children: [jsxRuntimeExports.jsx(Input, { type: "color", value: field.customStyle?.color || '#000000', onChange: (e) => handleUpdateCustomStyle('color', e.target.value), className: "w-10 h-9 p-1" }), jsxRuntimeExports.jsx(Input, { value: field.customStyle?.color || '', onChange: (e) => handleUpdateCustomStyle('color', e.target.value), placeholder: "#000000", className: "flex-1 font-mono text-xs" }), field.customStyle?.color && (jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", onClick: () => handleUpdateCustomStyle('color', ''), children: jsxRuntimeExports.jsx(Trash2, { className: "h-4 w-4" }) }))] })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Background Color" }), jsxRuntimeExports.jsxs("div", { className: "flex gap-1", children: [jsxRuntimeExports.jsx(Input, { type: "color", value: field.customStyle?.backgroundColor || '#ffffff', onChange: (e) => handleUpdateCustomStyle('backgroundColor', e.target.value), className: "w-10 h-9 p-1" }), jsxRuntimeExports.jsx(Input, { value: field.customStyle?.backgroundColor || '', onChange: (e) => handleUpdateCustomStyle('backgroundColor', e.target.value), placeholder: "#ffffff", className: "flex-1 font-mono text-xs" }), field.customStyle?.backgroundColor && (jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", onClick: () => handleUpdateCustomStyle('backgroundColor', ''), children: jsxRuntimeExports.jsx(Trash2, { className: "h-4 w-4" }) }))] })] })] })] }), jsxRuntimeExports.jsx(Separator, {}), jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsx("h4", { className: "text-sm font-semibold", children: "Styles for className" }), jsxRuntimeExports.jsxs(Tabs, { defaultValue: "component", className: "w-full", children: [jsxRuntimeExports.jsxs(TabsList, { className: "w-full grid grid-cols-2", children: [jsxRuntimeExports.jsx(TabsTrigger, { value: "component", className: "text-xs", children: "Component" }), jsxRuntimeExports.jsx(TabsTrigger, { value: "wrapper", className: "text-xs", children: "Wrapper" })] }), jsxRuntimeExports.jsx(TabsContent, { value: "component", className: "mt-3", children: jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsxs(Label, { className: "text-xs text-primary", children: ["element.style ", '{'] }), jsxRuntimeExports.jsx(Textarea, { value: field.customStyle?.css || '', onChange: (e) => handleUpdateCustomStyle('css', e.target.value), placeholder: "color: #333;\nfont-size: 14px;", className: "font-mono text-xs min-h-[100px] bg-muted/30" }), jsxRuntimeExports.jsx(Label, { className: "text-xs text-primary", children: '}' })] }) }), jsxRuntimeExports.jsx(TabsContent, { value: "wrapper", className: "mt-3", children: jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsxs(Label, { className: "text-xs text-primary", children: ["wrapper.style ", '{'] }), jsxRuntimeExports.jsx(Textarea, { value: field.customStyle?.wrapperCss || '', onChange: (e) => handleUpdateCustomStyle('wrapperCss', e.target.value), placeholder: "padding: 8px;\nborder-radius: 4px;", className: "font-mono text-xs min-h-[100px] bg-muted/30" }), jsxRuntimeExports.jsx(Label, { className: "text-xs text-primary", children: '}' })] }) })] })] }), jsxRuntimeExports.jsx(Separator, {}), jsxRuntimeExports.jsxs(Collapsible, { children: [jsxRuntimeExports.jsxs(CollapsibleTrigger, { className: "flex items-center justify-between w-full py-2", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(Globe, { className: "h-4 w-4 text-muted-foreground" }), jsxRuntimeExports.jsx("span", { className: "text-sm font-medium", children: "Responsive Grid" })] }), jsxRuntimeExports.jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground" })] }), jsxRuntimeExports.jsxs(CollapsibleContent, { className: "space-y-4 pt-2", children: [jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Override column width for different screen sizes (1-12 grid)" }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsxs(Label, { className: "text-xs flex items-center gap-2", children: [jsxRuntimeExports.jsx("span", { className: "w-16", children: "Mobile" }), jsxRuntimeExports.jsx("span", { className: "text-muted-foreground", children: "(<640px)" })] }), jsxRuntimeExports.jsx(Input, { type: "number", min: 1, max: 12, value: field.responsiveWidth?.mobile ?? '', onChange: (e) => {
+                                                            }), children: [jsx(SelectTrigger, { className: "w-14", children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "%", children: "%" }), jsx(SelectItem, { value: "px", children: "px" }), jsx(SelectItem, { value: "rem", children: "rem" })] })] })] })] }), jsxs("div", { className: "space-y-1", children: [jsx(Label, { className: "text-xs", children: "Height" }), jsxs(Select, { value: field.customStyle?.height || 'auto', onValueChange: (value) => handleUpdateCustomStyle('height', value), children: [jsx(SelectTrigger, { children: jsx(SelectValue, { placeholder: "Select" }) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "auto", children: "Auto" }), jsx(SelectItem, { value: "100%", children: "100%" }), jsx(SelectItem, { value: "50%", children: "50%" }), jsx(SelectItem, { value: "200px", children: "200px" }), jsx(SelectItem, { value: "300px", children: "300px" })] })] })] })] }), jsxs("div", { className: "grid grid-cols-2 gap-3", children: [jsxs("div", { className: "space-y-1", children: [jsx(Label, { className: "text-xs", children: "Margin Top" }), jsxs(Select, { value: field.customStyle?.marginTop || '', onValueChange: (value) => handleUpdateCustomStyle('marginTop', value), children: [jsx(SelectTrigger, { children: jsx(SelectValue, { placeholder: "Select" }) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "0", children: "0" }), jsx(SelectItem, { value: "4px", children: "4px" }), jsx(SelectItem, { value: "8px", children: "8px" }), jsx(SelectItem, { value: "16px", children: "16px" }), jsx(SelectItem, { value: "24px", children: "24px" }), jsx(SelectItem, { value: "32px", children: "32px" })] })] })] }), jsxs("div", { className: "space-y-1", children: [jsx(Label, { className: "text-xs", children: "Margin Right" }), jsxs(Select, { value: field.customStyle?.marginRight || '', onValueChange: (value) => handleUpdateCustomStyle('marginRight', value), children: [jsx(SelectTrigger, { children: jsx(SelectValue, { placeholder: "Select" }) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "0", children: "0" }), jsx(SelectItem, { value: "4px", children: "4px" }), jsx(SelectItem, { value: "8px", children: "8px" }), jsx(SelectItem, { value: "16px", children: "16px" }), jsx(SelectItem, { value: "24px", children: "24px" }), jsx(SelectItem, { value: "32px", children: "32px" })] })] })] })] }), jsxs("div", { className: "grid grid-cols-2 gap-3", children: [jsxs("div", { className: "space-y-1", children: [jsx(Label, { className: "text-xs", children: "Margin Bottom" }), jsxs(Select, { value: field.customStyle?.marginBottom || '', onValueChange: (value) => handleUpdateCustomStyle('marginBottom', value), children: [jsx(SelectTrigger, { children: jsx(SelectValue, { placeholder: "Select" }) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "0", children: "0" }), jsx(SelectItem, { value: "4px", children: "4px" }), jsx(SelectItem, { value: "8px", children: "8px" }), jsx(SelectItem, { value: "16px", children: "16px" }), jsx(SelectItem, { value: "24px", children: "24px" }), jsx(SelectItem, { value: "32px", children: "32px" })] })] })] }), jsxs("div", { className: "space-y-1", children: [jsx(Label, { className: "text-xs", children: "Margin Left" }), jsxs(Select, { value: field.customStyle?.marginLeft || '', onValueChange: (value) => handleUpdateCustomStyle('marginLeft', value), children: [jsx(SelectTrigger, { children: jsx(SelectValue, { placeholder: "Select" }) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "0", children: "0" }), jsx(SelectItem, { value: "4px", children: "4px" }), jsx(SelectItem, { value: "8px", children: "8px" }), jsx(SelectItem, { value: "16px", children: "16px" }), jsx(SelectItem, { value: "24px", children: "24px" }), jsx(SelectItem, { value: "32px", children: "32px" })] })] })] })] }), jsxs("div", { className: "grid grid-cols-2 gap-3", children: [jsxs("div", { className: "space-y-1", children: [jsx(Label, { className: "text-xs", children: "Color" }), jsxs("div", { className: "flex gap-1", children: [jsx(Input, { type: "color", value: field.customStyle?.color || '#000000', onChange: (e) => handleUpdateCustomStyle('color', e.target.value), className: "w-10 h-9 p-1" }), jsx(Input, { value: field.customStyle?.color || '', onChange: (e) => handleUpdateCustomStyle('color', e.target.value), placeholder: "#000000", className: "flex-1 font-mono text-xs" }), field.customStyle?.color && (jsx(Button, { variant: "ghost", size: "icon", onClick: () => handleUpdateCustomStyle('color', ''), children: jsx(Trash2, { className: "h-4 w-4" }) }))] })] }), jsxs("div", { className: "space-y-1", children: [jsx(Label, { className: "text-xs", children: "Background Color" }), jsxs("div", { className: "flex gap-1", children: [jsx(Input, { type: "color", value: field.customStyle?.backgroundColor || '#ffffff', onChange: (e) => handleUpdateCustomStyle('backgroundColor', e.target.value), className: "w-10 h-9 p-1" }), jsx(Input, { value: field.customStyle?.backgroundColor || '', onChange: (e) => handleUpdateCustomStyle('backgroundColor', e.target.value), placeholder: "#ffffff", className: "flex-1 font-mono text-xs" }), field.customStyle?.backgroundColor && (jsx(Button, { variant: "ghost", size: "icon", onClick: () => handleUpdateCustomStyle('backgroundColor', ''), children: jsx(Trash2, { className: "h-4 w-4" }) }))] })] })] })] }), jsx(Separator, {}), jsxs("div", { className: "space-y-4", children: [jsx("h4", { className: "text-sm font-semibold", children: "Styles for className" }), jsxs(Tabs, { defaultValue: "component", className: "w-full", children: [jsxs(TabsList, { className: "w-full grid grid-cols-2", children: [jsx(TabsTrigger, { value: "component", className: "text-xs", children: "Component" }), jsx(TabsTrigger, { value: "wrapper", className: "text-xs", children: "Wrapper" })] }), jsx(TabsContent, { value: "component", className: "mt-3", children: jsxs("div", { className: "space-y-2", children: [jsxs(Label, { className: "text-xs text-primary", children: ["element.style ", '{'] }), jsx(Textarea, { value: field.customStyle?.css || '', onChange: (e) => handleUpdateCustomStyle('css', e.target.value), placeholder: "color: #333;\nfont-size: 14px;", className: "font-mono text-xs min-h-[100px] bg-muted/30" }), jsx(Label, { className: "text-xs text-primary", children: '}' })] }) }), jsx(TabsContent, { value: "wrapper", className: "mt-3", children: jsxs("div", { className: "space-y-2", children: [jsxs(Label, { className: "text-xs text-primary", children: ["wrapper.style ", '{'] }), jsx(Textarea, { value: field.customStyle?.wrapperCss || '', onChange: (e) => handleUpdateCustomStyle('wrapperCss', e.target.value), placeholder: "padding: 8px;\nborder-radius: 4px;", className: "font-mono text-xs min-h-[100px] bg-muted/30" }), jsx(Label, { className: "text-xs text-primary", children: '}' })] }) })] })] }), jsx(Separator, {}), jsxs(Collapsible, { children: [jsxs(CollapsibleTrigger, { className: "flex items-center justify-between w-full py-2", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx(Globe, { className: "h-4 w-4 text-muted-foreground" }), jsx("span", { className: "text-sm font-medium", children: "Responsive Grid" })] }), jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground" })] }), jsxs(CollapsibleContent, { className: "space-y-4 pt-2", children: [jsx("p", { className: "text-xs text-muted-foreground", children: "Override column width for different screen sizes (1-12 grid)" }), jsxs("div", { className: "space-y-2", children: [jsxs(Label, { className: "text-xs flex items-center gap-2", children: [jsx("span", { className: "w-16", children: "Mobile" }), jsx("span", { className: "text-muted-foreground", children: "(<640px)" })] }), jsx(Input, { type: "number", min: 1, max: 12, value: field.responsiveWidth?.mobile ?? '', onChange: (e) => {
                                                         const val = e.target.value ? parseInt(e.target.value) : undefined;
                                                         updateField(row.id, column.id, field.id, {
                                                             responsiveWidth: { ...field.responsiveWidth, mobile: val },
                                                         });
-                                                    }, placeholder: "Auto" })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsxs(Label, { className: "text-xs flex items-center gap-2", children: [jsxRuntimeExports.jsx("span", { className: "w-16", children: "Tablet" }), jsxRuntimeExports.jsx("span", { className: "text-muted-foreground", children: "(640-1024px)" })] }), jsxRuntimeExports.jsx(Input, { type: "number", min: 1, max: 12, value: field.responsiveWidth?.tablet ?? '', onChange: (e) => {
+                                                    }, placeholder: "Auto" })] }), jsxs("div", { className: "space-y-2", children: [jsxs(Label, { className: "text-xs flex items-center gap-2", children: [jsx("span", { className: "w-16", children: "Tablet" }), jsx("span", { className: "text-muted-foreground", children: "(640-1024px)" })] }), jsx(Input, { type: "number", min: 1, max: 12, value: field.responsiveWidth?.tablet ?? '', onChange: (e) => {
                                                         const val = e.target.value ? parseInt(e.target.value) : undefined;
                                                         updateField(row.id, column.id, field.id, {
                                                             responsiveWidth: { ...field.responsiveWidth, tablet: val },
                                                         });
-                                                    }, placeholder: "Auto" })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsxs(Label, { className: "text-xs flex items-center gap-2", children: [jsxRuntimeExports.jsx("span", { className: "w-16", children: "Desktop" }), jsxRuntimeExports.jsx("span", { className: "text-muted-foreground", children: "(>1024px)" })] }), jsxRuntimeExports.jsx(Input, { type: "number", min: 1, max: 12, value: field.responsiveWidth?.desktop ?? '', onChange: (e) => {
+                                                    }, placeholder: "Auto" })] }), jsxs("div", { className: "space-y-2", children: [jsxs(Label, { className: "text-xs flex items-center gap-2", children: [jsx("span", { className: "w-16", children: "Desktop" }), jsx("span", { className: "text-muted-foreground", children: "(>1024px)" })] }), jsx(Input, { type: "number", min: 1, max: 12, value: field.responsiveWidth?.desktop ?? '', onChange: (e) => {
                                                         const val = e.target.value ? parseInt(e.target.value) : undefined;
                                                         updateField(row.id, column.id, field.id, {
                                                             responsiveWidth: { ...field.responsiveWidth, desktop: val },
                                                         });
-                                                    }, placeholder: "Auto" })] })] })] }), jsxRuntimeExports.jsx(Separator, {}), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsxRuntimeExports.jsx(Globe, { className: "h-4 w-4 text-muted-foreground" }), jsxRuntimeExports.jsx("span", { className: "text-sm font-medium", children: "Localization" })] }), jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Configure translations for this field in different languages. Translations can be managed at the form level in Form Settings." })] })] }) }));
+                                                    }, placeholder: "Auto" })] })] })] }), jsx(Separator, {}), jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsx(Globe, { className: "h-4 w-4 text-muted-foreground" }), jsx("span", { className: "text-sm font-medium", children: "Localization" })] }), jsx("p", { className: "text-xs text-muted-foreground", children: "Configure translations for this field in different languages. Translations can be managed at the form level in Form Settings." })] })] }) }));
 }
 function StepProperties() {
     const { getSelectedStep, updateStep, deleteStep, form } = useFormStore();
     const step = getSelectedStep();
     if (!step)
         return null;
-    return (jsxRuntimeExports.jsx("div", { className: "p-4 space-y-6", children: jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("h3", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-4", children: "Step Properties" }), jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Title" }), jsxRuntimeExports.jsx(Input, { value: step.title, onChange: (e) => updateStep(step.id, { title: e.target.value }) })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Description" }), jsxRuntimeExports.jsx(Textarea, { value: step.description || '', onChange: (e) => updateStep(step.id, { description: e.target.value }), placeholder: "Optional step description..." })] }), jsxRuntimeExports.jsx(Separator, {}), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Validate on Next" }), jsxRuntimeExports.jsx(Switch, { checked: step.validation?.validateOnNext || false, onCheckedChange: (checked) => updateStep(step.id, {
+    return (jsx("div", { className: "p-4 space-y-6", children: jsxs("div", { children: [jsx("h3", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-4", children: "Step Properties" }), jsxs("div", { className: "space-y-4", children: [jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Title" }), jsx(Input, { value: step.title, onChange: (e) => updateStep(step.id, { title: e.target.value }) })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { className: "text-sm", children: "Description" }), jsx(Textarea, { value: step.description || '', onChange: (e) => updateStep(step.id, { description: e.target.value }), placeholder: "Optional step description..." })] }), jsx(Separator, {}), jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label, { className: "text-sm", children: "Validate on Next" }), jsx(Switch, { checked: step.validation?.validateOnNext || false, onCheckedChange: (checked) => updateStep(step.id, {
                                         validation: { ...step.validation, validateOnNext: checked }
-                                    }) })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx(Label, { className: "text-sm", children: "Allow Skip" }), jsxRuntimeExports.jsx(Switch, { checked: step.validation?.allowSkip || false, onCheckedChange: (checked) => updateStep(step.id, {
+                                    }) })] }), jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label, { className: "text-sm", children: "Allow Skip" }), jsx(Switch, { checked: step.validation?.allowSkip || false, onCheckedChange: (checked) => updateStep(step.id, {
                                         validation: { ...step.validation, allowSkip: checked }
-                                    }) })] }), jsxRuntimeExports.jsx(Separator, {}), jsxRuntimeExports.jsxs(Button, { variant: "outline", size: "sm", onClick: () => deleteStep(step.id), className: "w-full gap-2 text-destructive hover:text-destructive", disabled: (form.steps?.length || 0) <= 1, children: [jsxRuntimeExports.jsx(Trash2, { className: "h-4 w-4" }), "Delete Step"] })] })] }) }));
+                                    }) })] }), jsx(Separator, {}), jsxs(Button, { variant: "outline", size: "sm", onClick: () => deleteStep(step.id), className: "w-full gap-2 text-destructive hover:text-destructive", disabled: (form.steps?.length || 0) <= 1, children: [jsx(Trash2, { className: "h-4 w-4" }), "Delete Step"] })] })] }) }));
 }
 function PropertiesPanel() {
     const { selection } = useFormStore();
-    return (jsxRuntimeExports.jsx("aside", { className: "w-[320px] border-l border-border bg-card shrink-0", children: jsxRuntimeExports.jsxs(ScrollArea, { className: "h-full", children: [selection.type === null && (jsxRuntimeExports.jsx("div", { className: "p-4 text-center text-muted-foreground", children: jsxRuntimeExports.jsx("p", { className: "text-sm", children: "Select an element to edit its properties" }) })), selection.type === 'row' && jsxRuntimeExports.jsx(RowProperties, {}), selection.type === 'column' && jsxRuntimeExports.jsx(ColumnProperties, {}), selection.type === 'field' && jsxRuntimeExports.jsx(FieldProperties, {}), selection.type === 'step' && jsxRuntimeExports.jsx(StepProperties, {})] }) }));
+    return (jsx("aside", { className: "w-[320px] border-l border-border bg-card shrink-0", children: jsxs(ScrollArea, { className: "h-full", children: [selection.type === null && (jsx("div", { className: "p-4 text-center text-muted-foreground", children: jsx("p", { className: "text-sm", children: "Select an element to edit its properties" }) })), selection.type === 'row' && jsx(RowProperties, {}), selection.type === 'column' && jsx(ColumnProperties, {}), selection.type === 'field' && jsx(FieldProperties, {}), selection.type === 'step' && jsx(StepProperties, {})] }) }));
 }
 
 const conditionOperatorSchema = z.enum([
@@ -4140,11 +2778,11 @@ const SUPPORTED_LANGUAGES = [
 ];
 
 const Accordion = AccordionPrimitive.Root;
-const AccordionItem = React.forwardRef(({ className, ...props }, ref) => (jsxRuntimeExports.jsx(AccordionPrimitive.Item, { ref: ref, className: cn("border-b", className), ...props })));
+const AccordionItem = React.forwardRef(({ className, ...props }, ref) => (jsx(AccordionPrimitive.Item, { ref: ref, className: cn("border-b", className), ...props })));
 AccordionItem.displayName = "AccordionItem";
-const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => (jsxRuntimeExports.jsx(AccordionPrimitive.Header, { className: "flex", children: jsxRuntimeExports.jsxs(AccordionPrimitive.Trigger, { ref: ref, className: cn("flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180", className), ...props, children: [children, jsxRuntimeExports.jsx(ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-200" })] }) })));
+const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => (jsx(AccordionPrimitive.Header, { className: "flex", children: jsxs(AccordionPrimitive.Trigger, { ref: ref, className: cn("flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180", className), ...props, children: [children, jsx(ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-200" })] }) })));
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => (jsxRuntimeExports.jsx(AccordionPrimitive.Content, { ref: ref, className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", ...props, children: jsxRuntimeExports.jsx("div", { className: cn("pb-4 pt-0", className), children: children }) })));
+const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => (jsx(AccordionPrimitive.Content, { ref: ref, className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", ...props, children: jsx("div", { className: cn("pb-4 pt-0", className), children: children }) })));
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
 const iconMap$1 = {
@@ -4199,17 +2837,17 @@ function DraggableComponent({ type, label, icon, isCollapsed }) {
     });
     const IconComponent = iconMap$1[icon] || Type;
     if (isCollapsed) {
-        return (jsxRuntimeExports.jsxs(Tooltip, { children: [jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: jsxRuntimeExports.jsx("div", { ref: setNodeRef, ...listeners, ...attributes, className: `
+        return (jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("div", { ref: setNodeRef, ...listeners, ...attributes, className: `
               flex items-center justify-center p-2 rounded-md border border-border
               bg-card cursor-grab hover-elevate active-elevate-2 transition-all duration-150
               ${isDragging ? 'opacity-50' : 'opacity-100'}
-            `, "data-testid": `draggable-${type}`, children: jsxRuntimeExports.jsx(IconComponent, { className: "h-4 w-4 text-muted-foreground" }) }) }), jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: jsxRuntimeExports.jsx("p", { children: label }) })] }));
+            `, "data-testid": `draggable-${type}`, children: jsx(IconComponent, { className: "h-4 w-4 text-muted-foreground" }) }) }), jsx(TooltipContent, { side: "right", children: jsx("p", { children: label }) })] }));
     }
-    return (jsxRuntimeExports.jsxs(Tooltip, { children: [jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: jsxRuntimeExports.jsxs("div", { ref: setNodeRef, ...listeners, ...attributes, className: `
+    return (jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsxs("div", { ref: setNodeRef, ...listeners, ...attributes, className: `
             flex items-center gap-2 px-2 py-2 rounded-md border border-border
             bg-card cursor-grab hover-elevate active-elevate-2 transition-all duration-150
             ${isDragging ? 'opacity-50' : 'opacity-100'}
-          `, "data-testid": `draggable-${type}`, children: [jsxRuntimeExports.jsx(IconComponent, { className: "h-4 w-4 text-muted-foreground shrink-0" }), jsxRuntimeExports.jsx("span", { className: "text-xs text-foreground truncate leading-tight", children: label })] }) }), jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: jsxRuntimeExports.jsx("p", { children: label }) })] }));
+          `, "data-testid": `draggable-${type}`, children: [jsx(IconComponent, { className: "h-4 w-4 text-muted-foreground shrink-0" }), jsx("span", { className: "text-xs text-foreground truncate leading-tight", children: label })] }) }), jsx(TooltipContent, { side: "right", children: jsx("p", { children: label }) })] }));
 }
 const fieldCategories = {
     basic: { label: 'Basic Fields', types: FIELD_TYPES.filter(f => f.category === 'basic') },
@@ -4218,9 +2856,9 @@ const fieldCategories = {
 };
 function ComponentLibrary({ isCollapsed = false, onToggleCollapse }) {
     if (isCollapsed) {
-        return (jsxRuntimeExports.jsxs("aside", { className: "w-[60px] border-r border-border bg-card shrink-0 flex flex-col", children: [jsxRuntimeExports.jsx("div", { className: "p-2 border-b border-border", children: jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", onClick: onToggleCollapse, "data-testid": "button-expand-sidebar", children: jsxRuntimeExports.jsx(PanelLeft, { className: "h-4 w-4" }) }) }), jsxRuntimeExports.jsx(ScrollArea, { className: "flex-1", children: jsxRuntimeExports.jsxs("div", { className: "p-2 space-y-4", children: [jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [jsxRuntimeExports.jsxs(Tooltip, { children: [jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: jsxRuntimeExports.jsx("p", { className: "text-[10px] font-semibold uppercase text-muted-foreground text-center cursor-default", children: "LY" }) }), jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: "Layout" })] }), jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 gap-1", children: STRUCTURE_TYPES.map((item) => (jsxRuntimeExports.jsx(DraggableComponent, { type: item.type, label: item.label, icon: item.icon, isCollapsed: true }, item.type))) })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [jsxRuntimeExports.jsxs(Tooltip, { children: [jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: jsxRuntimeExports.jsx("p", { className: "text-[10px] font-semibold uppercase text-muted-foreground text-center cursor-default", children: "BF" }) }), jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: "Basic Fields" })] }), jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 gap-1", children: fieldCategories.basic.types.map((item) => (jsxRuntimeExports.jsx(DraggableComponent, { type: item.type, label: item.label, icon: item.icon, isCollapsed: true }, item.type))) })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [jsxRuntimeExports.jsxs(Tooltip, { children: [jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: jsxRuntimeExports.jsx("p", { className: "text-[10px] font-semibold uppercase text-muted-foreground text-center cursor-default", children: "SF" }) }), jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: "Selection Fields" })] }), jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 gap-1", children: fieldCategories.selection.types.map((item) => (jsxRuntimeExports.jsx(DraggableComponent, { type: item.type, label: item.label, icon: item.icon, isCollapsed: true }, item.type))) })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [jsxRuntimeExports.jsxs(Tooltip, { children: [jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: jsxRuntimeExports.jsx("p", { className: "text-[10px] font-semibold uppercase text-muted-foreground text-center cursor-default", children: "AD" }) }), jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: "Advanced Fields" })] }), jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 gap-1", children: fieldCategories.advanced.types.map((item) => (jsxRuntimeExports.jsx(DraggableComponent, { type: item.type, label: item.label, icon: item.icon, isCollapsed: true }, item.type))) })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [jsxRuntimeExports.jsxs(Tooltip, { children: [jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: jsxRuntimeExports.jsx("p", { className: "text-[10px] font-semibold uppercase text-muted-foreground text-center cursor-default", children: "EL" }) }), jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: "Static Elements" })] }), jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 gap-1", children: STATIC_TYPES.map((item) => (jsxRuntimeExports.jsx(DraggableComponent, { type: item.type, label: item.label, icon: item.icon, isCollapsed: true }, item.type))) })] })] }) })] }));
+        return (jsxs("aside", { className: "w-[60px] border-r border-border bg-card shrink-0 flex flex-col", children: [jsx("div", { className: "p-2 border-b border-border", children: jsx(Button, { variant: "ghost", size: "icon", onClick: onToggleCollapse, "data-testid": "button-expand-sidebar", children: jsx(PanelLeft, { className: "h-4 w-4" }) }) }), jsx(ScrollArea, { className: "flex-1", children: jsxs("div", { className: "p-2 space-y-4", children: [jsxs("div", { className: "space-y-1", children: [jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("p", { className: "text-[10px] font-semibold uppercase text-muted-foreground text-center cursor-default", children: "LY" }) }), jsx(TooltipContent, { side: "right", children: "Layout" })] }), jsx("div", { className: "grid grid-cols-1 gap-1", children: STRUCTURE_TYPES.map((item) => (jsx(DraggableComponent, { type: item.type, label: item.label, icon: item.icon, isCollapsed: true }, item.type))) })] }), jsxs("div", { className: "space-y-1", children: [jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("p", { className: "text-[10px] font-semibold uppercase text-muted-foreground text-center cursor-default", children: "BF" }) }), jsx(TooltipContent, { side: "right", children: "Basic Fields" })] }), jsx("div", { className: "grid grid-cols-1 gap-1", children: fieldCategories.basic.types.map((item) => (jsx(DraggableComponent, { type: item.type, label: item.label, icon: item.icon, isCollapsed: true }, item.type))) })] }), jsxs("div", { className: "space-y-1", children: [jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("p", { className: "text-[10px] font-semibold uppercase text-muted-foreground text-center cursor-default", children: "SF" }) }), jsx(TooltipContent, { side: "right", children: "Selection Fields" })] }), jsx("div", { className: "grid grid-cols-1 gap-1", children: fieldCategories.selection.types.map((item) => (jsx(DraggableComponent, { type: item.type, label: item.label, icon: item.icon, isCollapsed: true }, item.type))) })] }), jsxs("div", { className: "space-y-1", children: [jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("p", { className: "text-[10px] font-semibold uppercase text-muted-foreground text-center cursor-default", children: "AD" }) }), jsx(TooltipContent, { side: "right", children: "Advanced Fields" })] }), jsx("div", { className: "grid grid-cols-1 gap-1", children: fieldCategories.advanced.types.map((item) => (jsx(DraggableComponent, { type: item.type, label: item.label, icon: item.icon, isCollapsed: true }, item.type))) })] }), jsxs("div", { className: "space-y-1", children: [jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("p", { className: "text-[10px] font-semibold uppercase text-muted-foreground text-center cursor-default", children: "EL" }) }), jsx(TooltipContent, { side: "right", children: "Static Elements" })] }), jsx("div", { className: "grid grid-cols-1 gap-1", children: STATIC_TYPES.map((item) => (jsx(DraggableComponent, { type: item.type, label: item.label, icon: item.icon, isCollapsed: true }, item.type))) })] })] }) })] }));
     }
-    return (jsxRuntimeExports.jsxs("aside", { className: "w-[200px] border-r border-border bg-card shrink-0 flex flex-col", children: [jsxRuntimeExports.jsxs("div", { className: "p-2 border-b border-border flex items-center justify-between gap-2", children: [jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-foreground pl-1", children: "Components" }), jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6 shrink-0", onClick: onToggleCollapse, "data-testid": "button-collapse-sidebar", children: jsxRuntimeExports.jsx(PanelLeftClose, { className: "h-3.5 w-3.5" }) })] }), jsxRuntimeExports.jsx(ScrollArea, { className: "flex-1", children: jsxRuntimeExports.jsx("div", { className: "p-2", children: jsxRuntimeExports.jsxs(Accordion, { type: "multiple", defaultValue: ['structure', 'basic', 'selection', 'advanced', 'static'], className: "w-full", children: [jsxRuntimeExports.jsxs(AccordionItem, { value: "structure", className: "border-b-0 bg-muted/50 rounded-md mb-1 px-2", children: [jsxRuntimeExports.jsxs(AccordionTrigger, { className: "py-1.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground hover:no-underline", children: ["Layout (", STRUCTURE_TYPES.length, ")"] }), jsxRuntimeExports.jsx(AccordionContent, { children: jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 gap-1 pb-2", children: STRUCTURE_TYPES.map((item) => (jsxRuntimeExports.jsx(DraggableComponent, { type: item.type, label: item.label, icon: item.icon }, item.type))) }) })] }), Object.entries(fieldCategories).map(([key, category]) => (jsxRuntimeExports.jsxs(AccordionItem, { value: key, className: "border-b-0 bg-background dark:bg-card rounded-md mb-1 px-2", children: [jsxRuntimeExports.jsxs(AccordionTrigger, { className: "py-1.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground hover:no-underline", children: [category.label.split(' ')[0], " (", category.types.length, ")"] }), jsxRuntimeExports.jsx(AccordionContent, { children: jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 gap-1 pb-2", children: category.types.map((item) => (jsxRuntimeExports.jsx(DraggableComponent, { type: item.type, label: item.label, icon: item.icon }, item.type))) }) })] }, key))), jsxRuntimeExports.jsxs(AccordionItem, { value: "static", className: "border-b-0 bg-background dark:bg-card rounded-md mb-1 px-2", children: [jsxRuntimeExports.jsxs(AccordionTrigger, { className: "py-1.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground hover:no-underline", children: ["Attributes (", STATIC_TYPES.length, ")"] }), jsxRuntimeExports.jsx(AccordionContent, { children: jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 gap-1 pb-2", children: STATIC_TYPES.map((item) => (jsxRuntimeExports.jsx(DraggableComponent, { type: item.type, label: item.label, icon: item.icon }, item.type))) }) })] })] }) }) })] }));
+    return (jsxs("aside", { className: "w-[200px] border-r border-border bg-card shrink-0 flex flex-col", children: [jsxs("div", { className: "p-2 border-b border-border flex items-center justify-between gap-2", children: [jsx("span", { className: "text-sm font-medium text-foreground pl-1", children: "Components" }), jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6 shrink-0", onClick: onToggleCollapse, "data-testid": "button-collapse-sidebar", children: jsx(PanelLeftClose, { className: "h-3.5 w-3.5" }) })] }), jsx(ScrollArea, { className: "flex-1", children: jsx("div", { className: "p-2", children: jsxs(Accordion, { type: "multiple", defaultValue: ['structure', 'basic', 'selection', 'advanced', 'static'], className: "w-full", children: [jsxs(AccordionItem, { value: "structure", className: "border-b-0 bg-muted/50 rounded-md mb-1 px-2", children: [jsxs(AccordionTrigger, { className: "py-1.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground hover:no-underline", children: ["Layout (", STRUCTURE_TYPES.length, ")"] }), jsx(AccordionContent, { children: jsx("div", { className: "grid grid-cols-2 gap-1 pb-2", children: STRUCTURE_TYPES.map((item) => (jsx(DraggableComponent, { type: item.type, label: item.label, icon: item.icon }, item.type))) }) })] }), Object.entries(fieldCategories).map(([key, category]) => (jsxs(AccordionItem, { value: key, className: "border-b-0 bg-background dark:bg-card rounded-md mb-1 px-2", children: [jsxs(AccordionTrigger, { className: "py-1.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground hover:no-underline", children: [category.label.split(' ')[0], " (", category.types.length, ")"] }), jsx(AccordionContent, { children: jsx("div", { className: "grid grid-cols-2 gap-1 pb-2", children: category.types.map((item) => (jsx(DraggableComponent, { type: item.type, label: item.label, icon: item.icon }, item.type))) }) })] }, key))), jsxs(AccordionItem, { value: "static", className: "border-b-0 bg-background dark:bg-card rounded-md mb-1 px-2", children: [jsxs(AccordionTrigger, { className: "py-1.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground hover:no-underline", children: ["Attributes (", STATIC_TYPES.length, ")"] }), jsx(AccordionContent, { children: jsx("div", { className: "grid grid-cols-2 gap-1 pb-2", children: STATIC_TYPES.map((item) => (jsx(DraggableComponent, { type: item.type, label: item.label, icon: item.icon }, item.type))) }) })] })] }) }) })] }));
 }
 
 const TOAST_LIMIT = 1;
@@ -6148,39 +4786,39 @@ new QueryClient({
 const Dialog = DialogPrimitive.Root;
 const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = DialogPrimitive.Portal;
-const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (jsxRuntimeExports.jsx(DialogPrimitive.Overlay, { ref: ref, className: cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props })));
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (jsx(DialogPrimitive.Overlay, { ref: ref, className: cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props })));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (jsxRuntimeExports.jsxs(DialogPortal, { children: [jsxRuntimeExports.jsx(DialogOverlay, {}), jsxRuntimeExports.jsxs(DialogPrimitive.Content, { ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", className), ...props, children: [children, jsxRuntimeExports.jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [jsxRuntimeExports.jsx(X, { className: "h-4 w-4" }), jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Close" })] })] })] })));
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (jsxs(DialogPortal, { children: [jsx(DialogOverlay, {}), jsxs(DialogPrimitive.Content, { ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", className), ...props, children: [children, jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [jsx(X, { className: "h-4 w-4" }), jsx("span", { className: "sr-only", children: "Close" })] })] })] })));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-const DialogHeader = ({ className, ...props }) => (jsxRuntimeExports.jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props }));
+const DialogHeader = ({ className, ...props }) => (jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props }));
 DialogHeader.displayName = "DialogHeader";
-const DialogFooter = ({ className, ...props }) => (jsxRuntimeExports.jsx("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props }));
+const DialogFooter = ({ className, ...props }) => (jsx("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props }));
 DialogFooter.displayName = "DialogFooter";
-const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (jsxRuntimeExports.jsx(DialogPrimitive.Title, { ref: ref, className: cn("text-lg font-semibold leading-none tracking-tight", className), ...props })));
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (jsx(DialogPrimitive.Title, { ref: ref, className: cn("text-lg font-semibold leading-none tracking-tight", className), ...props })));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (jsxRuntimeExports.jsx(DialogPrimitive.Description, { ref: ref, className: cn("text-sm text-muted-foreground", className), ...props })));
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (jsx(DialogPrimitive.Description, { ref: ref, className: cn("text-sm text-muted-foreground", className), ...props })));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (jsxRuntimeExports.jsxs(DropdownMenuPrimitive.SubTrigger, { ref: ref, className: cn("flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", inset && "pl-8", className), ...props, children: [children, jsxRuntimeExports.jsx(ChevronRight, { className: "ml-auto" })] })));
+const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (jsxs(DropdownMenuPrimitive.SubTrigger, { ref: ref, className: cn("flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", inset && "pl-8", className), ...props, children: [children, jsx(ChevronRight, { className: "ml-auto" })] })));
 DropdownMenuSubTrigger.displayName =
     DropdownMenuPrimitive.SubTrigger.displayName;
-const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (jsxRuntimeExports.jsx(DropdownMenuPrimitive.SubContent, { ref: ref, className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]", className), ...props })));
+const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (jsx(DropdownMenuPrimitive.SubContent, { ref: ref, className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]", className), ...props })));
 DropdownMenuSubContent.displayName =
     DropdownMenuPrimitive.SubContent.displayName;
-const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (jsxRuntimeExports.jsx(DropdownMenuPrimitive.Portal, { children: jsxRuntimeExports.jsx(DropdownMenuPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]", className), ...props }) })));
+const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (jsx(DropdownMenuPrimitive.Portal, { children: jsx(DropdownMenuPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]", className), ...props }) })));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (jsxRuntimeExports.jsx(DropdownMenuPrimitive.Item, { ref: ref, className: cn("relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", inset && "pl-8", className), ...props })));
+const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (jsx(DropdownMenuPrimitive.Item, { ref: ref, className: cn("relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", inset && "pl-8", className), ...props })));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (jsxRuntimeExports.jsxs(DropdownMenuPrimitive.CheckboxItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), checked: checked, ...props, children: [jsxRuntimeExports.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: jsxRuntimeExports.jsx(DropdownMenuPrimitive.ItemIndicator, { children: jsxRuntimeExports.jsx(Check, { className: "h-4 w-4" }) }) }), children] })));
+const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (jsxs(DropdownMenuPrimitive.CheckboxItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), checked: checked, ...props, children: [jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: jsx(DropdownMenuPrimitive.ItemIndicator, { children: jsx(Check, { className: "h-4 w-4" }) }) }), children] })));
 DropdownMenuCheckboxItem.displayName =
     DropdownMenuPrimitive.CheckboxItem.displayName;
-const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (jsxRuntimeExports.jsxs(DropdownMenuPrimitive.RadioItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [jsxRuntimeExports.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: jsxRuntimeExports.jsx(DropdownMenuPrimitive.ItemIndicator, { children: jsxRuntimeExports.jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }), children] })));
+const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (jsxs(DropdownMenuPrimitive.RadioItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: jsx(DropdownMenuPrimitive.ItemIndicator, { children: jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }), children] })));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (jsxRuntimeExports.jsx(DropdownMenuPrimitive.Label, { ref: ref, className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className), ...props })));
+const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (jsx(DropdownMenuPrimitive.Label, { ref: ref, className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className), ...props })));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (jsxRuntimeExports.jsx(DropdownMenuPrimitive.Separator, { ref: ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })));
+const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (jsx(DropdownMenuPrimitive.Separator, { ref: ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
 function Toolbar({ onOpenJsonViewer }) {
@@ -6290,10 +4928,10 @@ function Toolbar({ onOpenJsonViewer }) {
             setIsEditing(false);
         }
     };
-    return (jsxRuntimeExports.jsxs("header", { className: "h-14 border-b border-border bg-card px-6 flex items-center justify-between gap-4 shrink-0", children: [jsxRuntimeExports.jsx("div", { className: "flex items-center gap-3", children: isEditing ? (jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(Input, { value: tempName, onChange: (e) => setTempName(e.target.value), onKeyDown: handleKeyDown, onBlur: handleSaveName, className: "h-8 w-64 text-sm font-medium", autoFocus: true, "data-testid": "input-form-name" }), jsxRuntimeExports.jsx(Button, { size: "icon", variant: "ghost", onClick: handleSaveName, "data-testid": "button-save-name", children: jsxRuntimeExports.jsx(Check, { className: "h-4 w-4" }) })] })) : (jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx("h1", { className: "text-lg font-semibold text-foreground", children: form.name }), jsxRuntimeExports.jsx(Button, { size: "icon", variant: "ghost", onClick: () => {
+    return (jsxs("header", { className: "h-14 border-b border-border bg-card px-6 flex items-center justify-between gap-4 shrink-0", children: [jsx("div", { className: "flex items-center gap-3", children: isEditing ? (jsxs("div", { className: "flex items-center gap-2", children: [jsx(Input, { value: tempName, onChange: (e) => setTempName(e.target.value), onKeyDown: handleKeyDown, onBlur: handleSaveName, className: "h-8 w-64 text-sm font-medium", autoFocus: true, "data-testid": "input-form-name" }), jsx(Button, { size: "icon", variant: "ghost", onClick: handleSaveName, "data-testid": "button-save-name", children: jsx(Check, { className: "h-4 w-4" }) })] })) : (jsxs("div", { className: "flex items-center gap-2", children: [jsx("h1", { className: "text-lg font-semibold text-foreground", children: form.name }), jsx(Button, { size: "icon", variant: "ghost", onClick: () => {
                                 setTempName(form.name);
                                 setIsEditing(true);
-                            }, "data-testid": "button-edit-name", children: jsxRuntimeExports.jsx(Edit3, { className: "h-4 w-4" }) }), form.isMultiStep && (jsxRuntimeExports.jsx(Badge, { variant: "secondary", className: "text-xs", children: "Multi-Step" })), form.currentVersion && (jsxRuntimeExports.jsxs(Badge, { variant: "outline", className: "text-xs", children: ["v", form.currentVersion] }))] })) }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsxs(Tooltip, { children: [jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", onClick: undo, disabled: !canUndo(), "data-testid": "button-undo", children: jsxRuntimeExports.jsx(Undo2, { className: "h-4 w-4" }) }) }), jsxRuntimeExports.jsx(TooltipContent, { children: "Undo" })] }), jsxRuntimeExports.jsxs(Tooltip, { children: [jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", onClick: redo, disabled: !canRedo(), "data-testid": "button-redo", children: jsxRuntimeExports.jsx(Redo2, { className: "h-4 w-4" }) }) }), jsxRuntimeExports.jsx(TooltipContent, { children: "Redo" })] }), jsxRuntimeExports.jsxs(DropdownMenu, { children: [jsxRuntimeExports.jsxs(Tooltip, { children: [jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: jsxRuntimeExports.jsx(DropdownMenuTrigger, { asChild: true, children: jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", "data-testid": "button-canvas-width", children: jsxRuntimeExports.jsx(Maximize2, { className: "h-4 w-4" }) }) }) }), jsxRuntimeExports.jsx(TooltipContent, { children: "Canvas Width" })] }), jsxRuntimeExports.jsxs(DropdownMenuContent, { align: "end", children: [jsxRuntimeExports.jsx(DropdownMenuLabel, { children: "Canvas Width" }), jsxRuntimeExports.jsx(DropdownMenuSeparator, {}), widthOptions.map((option) => (jsxRuntimeExports.jsxs(DropdownMenuItem, { onClick: () => setCanvasWidth(option.value), className: "flex justify-between gap-4", "data-testid": `menu-width-${option.value}`, children: [jsxRuntimeExports.jsx("span", { children: option.label }), jsxRuntimeExports.jsx("span", { className: "text-muted-foreground text-xs", children: option.description }), canvasWidth === option.value && jsxRuntimeExports.jsx(Check, { className: "h-4 w-4 ml-2" })] }, option.value)))] })] }), jsxRuntimeExports.jsx("div", { className: "w-px h-6 bg-border mx-1" }), jsxRuntimeExports.jsxs(Button, { variant: "default", size: "sm", onClick: handleSaveForm, disabled: isSaving, className: "gap-2", "data-testid": "button-save-form", children: [isSaving ? (jsxRuntimeExports.jsx(Loader2, { className: "h-4 w-4 animate-spin" })) : (jsxRuntimeExports.jsx(Save, { className: "h-4 w-4" })), jsxRuntimeExports.jsx("span", { children: "Save" })] }), jsxRuntimeExports.jsx(Button, { variant: isPreviewMode ? 'default' : 'outline', size: "sm", onClick: togglePreviewMode, className: "gap-2", "data-testid": "button-toggle-preview", children: isPreviewMode ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(EyeOff, { className: "h-4 w-4" }), jsxRuntimeExports.jsx("span", { children: "Edit" })] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Eye, { className: "h-4 w-4" }), jsxRuntimeExports.jsx("span", { children: "Preview" })] })) }), jsxRuntimeExports.jsx(Button, { variant: form.isMultiStep ? 'default' : 'outline', size: "sm", onClick: toggleMultiStep, className: "gap-2", title: form.isMultiStep ? 'Switch to single page' : 'Switch to multi-step wizard', "data-testid": "button-toggle-multistep", children: jsxRuntimeExports.jsx(Layers, { className: "h-4 w-4" }) }), jsxRuntimeExports.jsxs(Dialog, { open: versionDialogOpen, onOpenChange: setVersionDialogOpen, children: [jsxRuntimeExports.jsx(DialogTrigger, { asChild: true, children: jsxRuntimeExports.jsx(Button, { variant: "outline", size: "sm", className: "gap-2", "data-testid": "button-version", children: jsxRuntimeExports.jsx(History, { className: "h-4 w-4" }) }) }), jsxRuntimeExports.jsxs(DialogContent, { className: "max-w-md", children: [jsxRuntimeExports.jsxs(DialogHeader, { children: [jsxRuntimeExports.jsx(DialogTitle, { children: "Version History" }), jsxRuntimeExports.jsx(DialogDescription, { children: "Save snapshots and restore previous versions of your form." })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { children: "Save New Version" }), jsxRuntimeExports.jsx(Textarea, { value: changelog, onChange: (e) => setChangelog(e.target.value), placeholder: "What changed in this version?", className: "min-h-[60px]" }), jsxRuntimeExports.jsxs(Button, { onClick: handleSaveVersion, className: "w-full gap-2", size: "sm", children: [jsxRuntimeExports.jsx(Save, { className: "h-4 w-4" }), "Save Version ", (form.currentVersion || 0) + 1] })] }), form.versions && form.versions.length > 0 && (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsxs("div", { className: "border-t pt-4", children: [jsxRuntimeExports.jsx(Label, { className: "mb-2 block", children: "Previous Versions" }), jsxRuntimeExports.jsx(ScrollArea, { className: "h-[200px]", children: jsxRuntimeExports.jsx("div", { className: "space-y-2", children: [...form.versions].reverse().map((version) => (jsxRuntimeExports.jsxs("div", { className: "p-3 border rounded-md space-y-2", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsxs("span", { className: "font-medium", children: ["Version ", version.version] }), jsxRuntimeExports.jsx(Button, { variant: "outline", size: "sm", onClick: () => handleRestoreVersion(version.id, version.version), children: "Restore" })] }), version.changelog && (jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground", children: version.changelog })), jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: new Date(version.createdAt).toLocaleString() })] }, version.id))) }) })] }) }))] })] })] }), jsxRuntimeExports.jsxs(Dialog, { open: settingsDialogOpen, onOpenChange: setSettingsDialogOpen, children: [jsxRuntimeExports.jsx(DialogTrigger, { asChild: true, children: jsxRuntimeExports.jsx(Button, { variant: "outline", size: "sm", className: "gap-2", "data-testid": "button-settings", children: jsxRuntimeExports.jsx(Settings, { className: "h-4 w-4" }) }) }), jsxRuntimeExports.jsxs(DialogContent, { className: "max-w-lg", children: [jsxRuntimeExports.jsxs(DialogHeader, { children: [jsxRuntimeExports.jsx(DialogTitle, { children: "Form Settings" }), jsxRuntimeExports.jsx(DialogDescription, { children: "Configure submission, webhooks, and other form settings." })] }), jsxRuntimeExports.jsx("div", { className: "space-y-6", children: jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsx("h4", { className: "font-medium", children: "Submission Settings" }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx(Label, { children: "Enable Submission Handler" }), jsxRuntimeExports.jsx(Switch, { checked: form.submissionConfig?.enabled || false, onCheckedChange: (checked) => updateSubmissionConfig({ enabled: checked }) })] }), form.submissionConfig?.enabled && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { children: "Webhook URL" }), jsxRuntimeExports.jsx(Input, { value: form.submissionConfig?.webhookUrl || '', onChange: (e) => updateSubmissionConfig({ webhookUrl: e.target.value }), placeholder: "https://your-api.com/webhook" })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { children: "Success Message" }), jsxRuntimeExports.jsx(Input, { value: form.submissionConfig?.successMessage || '', onChange: (e) => updateSubmissionConfig({ successMessage: e.target.value }), placeholder: "Thank you for your submission!" })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { children: "Redirect URL (optional)" }), jsxRuntimeExports.jsx(Input, { value: form.submissionConfig?.redirectUrl || '', onChange: (e) => updateSubmissionConfig({ redirectUrl: e.target.value }), placeholder: "https://your-site.com/thank-you" })] })] }))] }) }), jsxRuntimeExports.jsx(DialogFooter, { children: jsxRuntimeExports.jsx(Button, { onClick: () => setSettingsDialogOpen(false), children: "Done" }) })] })] }), jsxRuntimeExports.jsxs(DropdownMenu, { children: [jsxRuntimeExports.jsx(DropdownMenuTrigger, { asChild: true, children: jsxRuntimeExports.jsx(Button, { variant: "outline", size: "sm", className: "gap-2", "data-testid": "button-more", children: jsxRuntimeExports.jsx(FileJson, { className: "h-4 w-4" }) }) }), jsxRuntimeExports.jsxs(DropdownMenuContent, { align: "end", children: [jsxRuntimeExports.jsx(DropdownMenuLabel, { children: "Export / Import" }), jsxRuntimeExports.jsx(DropdownMenuSeparator, {}), jsxRuntimeExports.jsxs(DropdownMenuItem, { onClick: onOpenJsonViewer, children: [jsxRuntimeExports.jsx(FileJson, { className: "h-4 w-4 mr-2" }), "View JSON Schema"] }), jsxRuntimeExports.jsxs(DropdownMenuItem, { onClick: handleExportJson, children: [jsxRuntimeExports.jsx(Download, { className: "h-4 w-4 mr-2" }), "Download JSON"] }), jsxRuntimeExports.jsx(DropdownMenuItem, { asChild: true, children: jsxRuntimeExports.jsxs("label", { className: "cursor-pointer flex items-center", children: [jsxRuntimeExports.jsx(Upload, { className: "h-4 w-4 mr-2" }), "Import JSON", jsxRuntimeExports.jsx("input", { type: "file", accept: ".json", onChange: handleImportJson, className: "hidden" })] }) })] })] }), jsxRuntimeExports.jsx(Button, { variant: "outline", size: "sm", onClick: clearForm, className: "gap-2 text-destructive hover:text-destructive", "data-testid": "button-clear-form", children: jsxRuntimeExports.jsx(Trash2, { className: "h-4 w-4" }) }), jsxRuntimeExports.jsx("div", { className: "w-px h-6 bg-border mx-1" }), jsxRuntimeExports.jsxs(Tooltip, { children: [jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", onClick: toggleTheme, "data-testid": "button-toggle-theme", children: isDarkMode ? jsxRuntimeExports.jsx(Sun, { className: "h-4 w-4" }) : jsxRuntimeExports.jsx(Moon, { className: "h-4 w-4" }) }) }), jsxRuntimeExports.jsx(TooltipContent, { children: isDarkMode ? 'Light Mode' : 'Dark Mode' })] })] })] }));
+                            }, "data-testid": "button-edit-name", children: jsx(Edit3, { className: "h-4 w-4" }) }), form.isMultiStep && (jsx(Badge, { variant: "secondary", className: "text-xs", children: "Multi-Step" })), form.currentVersion && (jsxs(Badge, { variant: "outline", className: "text-xs", children: ["v", form.currentVersion] }))] })) }), jsxs("div", { className: "flex items-center gap-2", children: [jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx(Button, { variant: "ghost", size: "icon", onClick: undo, disabled: !canUndo(), "data-testid": "button-undo", children: jsx(Undo2, { className: "h-4 w-4" }) }) }), jsx(TooltipContent, { children: "Undo" })] }), jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx(Button, { variant: "ghost", size: "icon", onClick: redo, disabled: !canRedo(), "data-testid": "button-redo", children: jsx(Redo2, { className: "h-4 w-4" }) }) }), jsx(TooltipContent, { children: "Redo" })] }), jsxs(DropdownMenu, { children: [jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx(DropdownMenuTrigger, { asChild: true, children: jsx(Button, { variant: "ghost", size: "icon", "data-testid": "button-canvas-width", children: jsx(Maximize2, { className: "h-4 w-4" }) }) }) }), jsx(TooltipContent, { children: "Canvas Width" })] }), jsxs(DropdownMenuContent, { align: "end", children: [jsx(DropdownMenuLabel, { children: "Canvas Width" }), jsx(DropdownMenuSeparator, {}), widthOptions.map((option) => (jsxs(DropdownMenuItem, { onClick: () => setCanvasWidth(option.value), className: "flex justify-between gap-4", "data-testid": `menu-width-${option.value}`, children: [jsx("span", { children: option.label }), jsx("span", { className: "text-muted-foreground text-xs", children: option.description }), canvasWidth === option.value && jsx(Check, { className: "h-4 w-4 ml-2" })] }, option.value)))] })] }), jsx("div", { className: "w-px h-6 bg-border mx-1" }), jsxs(Button, { variant: "default", size: "sm", onClick: handleSaveForm, disabled: isSaving, className: "gap-2", "data-testid": "button-save-form", children: [isSaving ? (jsx(Loader2, { className: "h-4 w-4 animate-spin" })) : (jsx(Save, { className: "h-4 w-4" })), jsx("span", { children: "Save" })] }), jsx(Button, { variant: isPreviewMode ? 'default' : 'outline', size: "sm", onClick: togglePreviewMode, className: "gap-2", "data-testid": "button-toggle-preview", children: isPreviewMode ? (jsxs(Fragment, { children: [jsx(EyeOff, { className: "h-4 w-4" }), jsx("span", { children: "Edit" })] })) : (jsxs(Fragment, { children: [jsx(Eye, { className: "h-4 w-4" }), jsx("span", { children: "Preview" })] })) }), jsx(Button, { variant: form.isMultiStep ? 'default' : 'outline', size: "sm", onClick: toggleMultiStep, className: "gap-2", title: form.isMultiStep ? 'Switch to single page' : 'Switch to multi-step wizard', "data-testid": "button-toggle-multistep", children: jsx(Layers, { className: "h-4 w-4" }) }), jsxs(Dialog, { open: versionDialogOpen, onOpenChange: setVersionDialogOpen, children: [jsx(DialogTrigger, { asChild: true, children: jsx(Button, { variant: "outline", size: "sm", className: "gap-2", "data-testid": "button-version", children: jsx(History, { className: "h-4 w-4" }) }) }), jsxs(DialogContent, { className: "max-w-md", children: [jsxs(DialogHeader, { children: [jsx(DialogTitle, { children: "Version History" }), jsx(DialogDescription, { children: "Save snapshots and restore previous versions of your form." })] }), jsxs("div", { className: "space-y-4", children: [jsxs("div", { className: "space-y-2", children: [jsx(Label, { children: "Save New Version" }), jsx(Textarea, { value: changelog, onChange: (e) => setChangelog(e.target.value), placeholder: "What changed in this version?", className: "min-h-[60px]" }), jsxs(Button, { onClick: handleSaveVersion, className: "w-full gap-2", size: "sm", children: [jsx(Save, { className: "h-4 w-4" }), "Save Version ", (form.currentVersion || 0) + 1] })] }), form.versions && form.versions.length > 0 && (jsx(Fragment, { children: jsxs("div", { className: "border-t pt-4", children: [jsx(Label, { className: "mb-2 block", children: "Previous Versions" }), jsx(ScrollArea, { className: "h-[200px]", children: jsx("div", { className: "space-y-2", children: [...form.versions].reverse().map((version) => (jsxs("div", { className: "p-3 border rounded-md space-y-2", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsxs("span", { className: "font-medium", children: ["Version ", version.version] }), jsx(Button, { variant: "outline", size: "sm", onClick: () => handleRestoreVersion(version.id, version.version), children: "Restore" })] }), version.changelog && (jsx("p", { className: "text-sm text-muted-foreground", children: version.changelog })), jsx("p", { className: "text-xs text-muted-foreground", children: new Date(version.createdAt).toLocaleString() })] }, version.id))) }) })] }) }))] })] })] }), jsxs(Dialog, { open: settingsDialogOpen, onOpenChange: setSettingsDialogOpen, children: [jsx(DialogTrigger, { asChild: true, children: jsx(Button, { variant: "outline", size: "sm", className: "gap-2", "data-testid": "button-settings", children: jsx(Settings, { className: "h-4 w-4" }) }) }), jsxs(DialogContent, { className: "max-w-lg", children: [jsxs(DialogHeader, { children: [jsx(DialogTitle, { children: "Form Settings" }), jsx(DialogDescription, { children: "Configure submission, webhooks, and other form settings." })] }), jsx("div", { className: "space-y-6", children: jsxs("div", { className: "space-y-4", children: [jsx("h4", { className: "font-medium", children: "Submission Settings" }), jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label, { children: "Enable Submission Handler" }), jsx(Switch, { checked: form.submissionConfig?.enabled || false, onCheckedChange: (checked) => updateSubmissionConfig({ enabled: checked }) })] }), form.submissionConfig?.enabled && (jsxs(Fragment, { children: [jsxs("div", { className: "space-y-2", children: [jsx(Label, { children: "Webhook URL" }), jsx(Input, { value: form.submissionConfig?.webhookUrl || '', onChange: (e) => updateSubmissionConfig({ webhookUrl: e.target.value }), placeholder: "https://your-api.com/webhook" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { children: "Success Message" }), jsx(Input, { value: form.submissionConfig?.successMessage || '', onChange: (e) => updateSubmissionConfig({ successMessage: e.target.value }), placeholder: "Thank you for your submission!" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { children: "Redirect URL (optional)" }), jsx(Input, { value: form.submissionConfig?.redirectUrl || '', onChange: (e) => updateSubmissionConfig({ redirectUrl: e.target.value }), placeholder: "https://your-site.com/thank-you" })] })] }))] }) }), jsx(DialogFooter, { children: jsx(Button, { onClick: () => setSettingsDialogOpen(false), children: "Done" }) })] })] }), jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsx(Button, { variant: "outline", size: "sm", className: "gap-2", "data-testid": "button-more", children: jsx(FileJson, { className: "h-4 w-4" }) }) }), jsxs(DropdownMenuContent, { align: "end", children: [jsx(DropdownMenuLabel, { children: "Export / Import" }), jsx(DropdownMenuSeparator, {}), jsxs(DropdownMenuItem, { onClick: onOpenJsonViewer, children: [jsx(FileJson, { className: "h-4 w-4 mr-2" }), "View JSON Schema"] }), jsxs(DropdownMenuItem, { onClick: handleExportJson, children: [jsx(Download, { className: "h-4 w-4 mr-2" }), "Download JSON"] }), jsx(DropdownMenuItem, { asChild: true, children: jsxs("label", { className: "cursor-pointer flex items-center", children: [jsx(Upload, { className: "h-4 w-4 mr-2" }), "Import JSON", jsx("input", { type: "file", accept: ".json", onChange: handleImportJson, className: "hidden" })] }) })] })] }), jsx(Button, { variant: "outline", size: "sm", onClick: clearForm, className: "gap-2 text-destructive hover:text-destructive", "data-testid": "button-clear-form", children: jsx(Trash2, { className: "h-4 w-4" }) }), jsx("div", { className: "w-px h-6 bg-border mx-1" }), jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx(Button, { variant: "ghost", size: "icon", onClick: toggleTheme, "data-testid": "button-toggle-theme", children: isDarkMode ? jsx(Sun, { className: "h-4 w-4" }) : jsx(Moon, { className: "h-4 w-4" }) }) }), jsx(TooltipContent, { children: isDarkMode ? 'Light Mode' : 'Dark Mode' })] })] })] }));
 }
 
 const iconMap = {
@@ -6347,7 +4985,7 @@ const labelMap = {
 function DragOverlayContent({ type }) {
     const IconComponent = iconMap[type] || Type;
     const label = labelMap[type] || type;
-    return (jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 px-4 py-3 rounded-md border border-primary bg-card shadow-xl cursor-grabbing", children: [jsxRuntimeExports.jsx(IconComponent, { className: "h-4 w-4 text-primary" }), jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-foreground", children: label })] }));
+    return (jsxs("div", { className: "flex items-center gap-3 px-4 py-3 rounded-md border border-primary bg-card shadow-xl cursor-grabbing", children: [jsx(IconComponent, { className: "h-4 w-4 text-primary" }), jsx("span", { className: "text-sm font-medium text-foreground", children: label })] }));
 }
 
 function JsonViewerModal({ isOpen, onClose, schema }) {
@@ -6358,7 +4996,7 @@ function JsonViewerModal({ isOpen, onClose, schema }) {
         setCopied(true);
         setTimeout(() => setCopied(false), 2000);
     };
-    return (jsxRuntimeExports.jsx(Dialog, { open: isOpen, onOpenChange: onClose, children: jsxRuntimeExports.jsxs(DialogContent, { className: "max-w-3xl max-h-[80vh] flex flex-col", children: [jsxRuntimeExports.jsxs(DialogHeader, { className: "flex flex-row items-center justify-between pr-8", children: [jsxRuntimeExports.jsx(DialogTitle, { children: "Form Schema (JSON)" }), jsxRuntimeExports.jsx(Button, { variant: "outline", size: "sm", onClick: handleCopy, className: "gap-2", "data-testid": "button-copy-json", children: copied ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Check, { className: "h-4 w-4" }), "Copied"] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Copy, { className: "h-4 w-4" }), "Copy"] })) })] }), jsxRuntimeExports.jsx("div", { className: "flex-1 min-h-0 h-[60vh] border rounded-md bg-muted/30 overflow-auto", children: jsxRuntimeExports.jsx("pre", { className: "p-4 text-sm font-mono text-foreground whitespace-pre", children: jsonString }) })] }) }));
+    return (jsx(Dialog, { open: isOpen, onOpenChange: onClose, children: jsxs(DialogContent, { className: "max-w-3xl max-h-[80vh] flex flex-col", children: [jsxs(DialogHeader, { className: "flex flex-row items-center justify-between pr-8", children: [jsx(DialogTitle, { children: "Form Schema (JSON)" }), jsx(Button, { variant: "outline", size: "sm", onClick: handleCopy, className: "gap-2", "data-testid": "button-copy-json", children: copied ? (jsxs(Fragment, { children: [jsx(Check, { className: "h-4 w-4" }), "Copied"] })) : (jsxs(Fragment, { children: [jsx(Copy, { className: "h-4 w-4" }), "Copy"] })) })] }), jsx("div", { className: "flex-1 min-h-0 h-[60vh] border rounded-md bg-muted/30 overflow-auto", children: jsx("pre", { className: "p-4 text-sm font-mono text-foreground whitespace-pre", children: jsonString }) })] }) }));
 }
 
 export { CanvasField, ComponentLibrary, DragOverlayContent, FIELD_TYPES, FormCanvas, JsonViewerModal, PropertiesPanel, STATIC_TYPES, STRUCTURE_TYPES, SUPPORTED_LANGUAGES, Toolbar, autocompleteConfigSchema, computedFieldSchema, conditionOperatorSchema, conditionSchema, conditionalLogicSchema, customStyleSchema, eventActionSchema, fieldEventsSchema, fieldPropsSchema, fileUploadConfigSchema, formColumnSchema, formFieldSchema, formRowSchema, formSchemaObject, formSettingsSchema, formVersionSchema, localizationSchema, ratingConfigSchema, responsiveWidthSchema, stepSchema, submissionConfigSchema, useFormStore, validationSchema };