@arkcit/engine 0.3.0

package/dist/studio-bridge/index.js

@@ -0,0 +1,2840 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/studio-bridge/inline/forceFullWidth.ts
+var shouldForceStudioNodeFullWidth = ({
+  widthPct,
+  nodeType,
+  isStudioRendererContext,
+  colSpan
+}) => widthPct === null && (nodeType === "Container" || nodeType === "Grid" || colSpan !== void 0 || isStudioRendererContext && (nodeType === "Form" || nodeType === "FormWizard"));
+
+// src/studio-bridge/inline/inlineText.ts
+var getEditableTextValue = ({
+  node,
+  nodeProps,
+  propName,
+  runtime,
+  resolveTranslationValue
+}) => {
+  var _a;
+  let value = nodeProps[propName];
+  if (node.type === "FormField" && (propName === "label" || propName === "name")) {
+    const fieldObject = nodeProps.field && typeof nodeProps.field === "object" && !Array.isArray(nodeProps.field) ? nodeProps.field : null;
+    if (value === void 0 && fieldObject) {
+      value = fieldObject[propName];
+    }
+  }
+  if (typeof value === "string") return { value, mode: "primitive" };
+  if (typeof value === "number" || typeof value === "boolean") {
+    return { value: String(value), mode: "primitive" };
+  }
+  if (value && typeof value === "object") {
+    if ("$t" in value && typeof value.$t === "string") {
+      const translationValue = value;
+      const resolvedValue = resolveTranslationValue(translationValue, runtime);
+      return {
+        value: typeof resolvedValue === "string" ? resolvedValue : (_a = translationValue.defaultValue) != null ? _a : translationValue.$t,
+        mode: "translation"
+      };
+    }
+    try {
+      return {
+        value: JSON.stringify(value, null, 2),
+        mode: "json"
+      };
+    } catch (e) {
+      return null;
+    }
+  }
+  return null;
+};
+var selectCandidateInlineProp = ({
+  node,
+  isWizardStepNode,
+  orderedEditableTextProps,
+  getTextValue
+}) => {
+  var _a, _b;
+  if (node.type === "FormField") {
+    if (getTextValue("label")) return "label";
+    if (getTextValue("name")) return "name";
+  }
+  if (node.type === "Button") {
+    if (getTextValue("children")) return "children";
+  }
+  if (node.type === "Form") {
+    if (getTextValue("title")) return "title";
+  }
+  if (isWizardStepNode) {
+    if (getTextValue("title")) return "title";
+    if (getTextValue("description")) return "description";
+  }
+  const blockedTypes = /* @__PURE__ */ new Set(["Form", "FormWizard", "Accordion", "ExpandablePanel"]);
+  if (node.type === "Cover") {
+    const coverTextProps = ["eyebrow", "title", "subtitle", "description", "children"];
+    return (_a = coverTextProps.find((propName) => getTextValue(propName) !== null)) != null ? _a : null;
+  }
+  const sourceProps = blockedTypes.has(node.type) ? [] : orderedEditableTextProps;
+  return (_b = sourceProps.find((propName) => getTextValue(propName) !== null)) != null ? _b : null;
+};
+var selectEffectiveInlineProp = ({
+  node,
+  isWizardStepNode,
+  hasRenderableChildren,
+  childrenInlineEntry,
+  candidateInlineProp
+}) => {
+  if (isWizardStepNode) return candidateInlineProp;
+  if (node.type === "FormField") return candidateInlineProp;
+  if (node.type === "ScrollReveal") {
+    if (hasRenderableChildren) return null;
+    return childrenInlineEntry ? "children" : null;
+  }
+  if (node.type === "Cover") return candidateInlineProp;
+  if (node.type === "Dropdown" || node.type === "Tooltip" || node.type === "Popin" || node.type === "Drawer") {
+    return candidateInlineProp;
+  }
+  if (hasRenderableChildren) {
+    return childrenInlineEntry ? "children" : null;
+  }
+  return candidateInlineProp;
+};
+
+// src/studio-bridge/inline/inlineEditing.ts
+var getValueAtPropPath = (source, propPath) => propPath.split(".").filter(Boolean).reduce((current, segment) => {
+  if (!current || typeof current !== "object" || Array.isArray(current)) return void 0;
+  return current[segment];
+}, source);
+var computeInlineEditorStyle = ({
+  wrapperElement,
+  targetElementForEditor
+}) => {
+  if (!targetElementForEditor) return { inset: 0 };
+  const wrapperRect = wrapperElement.getBoundingClientRect();
+  const targetRect = targetElementForEditor.getBoundingClientRect();
+  return {
+    top: Math.max(0, targetRect.top - wrapperRect.top - 2),
+    left: Math.max(0, targetRect.left - wrapperRect.left - 2),
+    width: Math.max(48, targetRect.width + 4),
+    height: Math.max(32, targetRect.height + 4)
+  };
+};
+var shouldUseMultilineInlineEditor = ({
+  mode,
+  value
+}) => mode === "json" || value.length > 64;
+var applyInlineEditingValue = ({
+  editingState,
+  rawValue,
+  schemaNodes,
+  onInlineTextEdit,
+  findNodeById: findNodeById2
+}) => {
+  var _a;
+  if (!onInlineTextEdit) return;
+  const isFormFieldLabelOrName = editingState.propName === "label" || editingState.propName === "name";
+  const applyFormFieldValue = (nextValue) => {
+    var _a2;
+    const targetNode2 = findNodeById2(editingState.nodeId, schemaNodes);
+    const targetProps2 = (_a2 = targetNode2 == null ? void 0 : targetNode2.props) != null ? _a2 : {};
+    const currentField = targetProps2.field && typeof targetProps2.field === "object" && !Array.isArray(targetProps2.field) ? targetProps2.field : {};
+    if ((targetNode2 == null ? void 0 : targetNode2.type) === "FormField" && isFormFieldLabelOrName) {
+      onInlineTextEdit(editingState.nodeId, "field", __spreadProps(__spreadValues({}, currentField), {
+        [editingState.propName]: nextValue
+      }));
+    }
+  };
+  const targetNode = findNodeById2(editingState.nodeId, schemaNodes);
+  const targetProps = (_a = targetNode == null ? void 0 : targetNode.props) != null ? _a : {};
+  const currentValue = getValueAtPropPath(targetProps, editingState.propName);
+  if (editingState.mode === "translation" && currentValue && typeof currentValue === "object" && !Array.isArray(currentValue) && typeof currentValue.$t === "string") {
+    onInlineTextEdit(editingState.nodeId, editingState.propName, __spreadProps(__spreadValues({}, currentValue), {
+      $t: rawValue,
+      defaultValue: rawValue
+    }));
+    return;
+  }
+  if (editingState.mode === "json") {
+    try {
+      const parsed = JSON.parse(rawValue);
+      applyFormFieldValue(parsed);
+      onInlineTextEdit(editingState.nodeId, editingState.propName, parsed);
+      return;
+    } catch (e) {
+      applyFormFieldValue(rawValue);
+      onInlineTextEdit(editingState.nodeId, editingState.propName, rawValue);
+      return;
+    }
+  }
+  const trimmed = rawValue.trim();
+  if (trimmed.startsWith("{") && trimmed.endsWith("}") || trimmed.startsWith("[") && trimmed.endsWith("]")) {
+    try {
+      const parsed = JSON.parse(trimmed);
+      applyFormFieldValue(parsed);
+      onInlineTextEdit(editingState.nodeId, editingState.propName, parsed);
+      return;
+    } catch (e) {
+    }
+  }
+  applyFormFieldValue(rawValue);
+  onInlineTextEdit(editingState.nodeId, editingState.propName, rawValue);
+};
+
+// src/studio-bridge/inline/inlineEditorOpening.ts
+var openInlineEditorFromDoubleClick = ({
+  event,
+  nodeId,
+  nodeType,
+  effectiveCandidateInlineProp,
+  getTextValue,
+  setInlineEditing
+}) => {
+  var _a;
+  const targetElement = event.target;
+  const targetInlineProp = (_a = targetElement == null ? void 0 : targetElement.closest("[data-inline-prop]")) == null ? void 0 : _a.getAttribute("data-inline-prop");
+  const chosenProp = nodeType === "Cover" && targetInlineProp ? targetInlineProp : targetInlineProp && targetInlineProp !== "children" ? targetInlineProp : effectiveCandidateInlineProp;
+  if (!chosenProp) return false;
+  const initialEntry = getTextValue(chosenProp);
+  if (initialEntry === null) return false;
+  const targetElementForEditor = targetInlineProp ? targetElement == null ? void 0 : targetElement.closest("[data-inline-prop]") : null;
+  const wrapperElement = event.currentTarget;
+  const editorStyle = computeInlineEditorStyle({
+    wrapperElement,
+    targetElementForEditor
+  });
+  event.preventDefault();
+  event.stopPropagation();
+  setInlineEditing({
+    nodeId,
+    propName: chosenProp,
+    value: initialEntry.value,
+    multiline: shouldUseMultilineInlineEditor({
+      mode: initialEntry.mode,
+      value: initialEntry.value
+    }),
+    mode: initialEntry.mode,
+    editorStyle
+  });
+  return true;
+};
+
+// src/studio-bridge/inline/resolveInlineEditingTarget.ts
+var INLINE_TECHNICAL_TEXT_PROPS = /* @__PURE__ */ new Set(["className", "rootMargin"]);
+var PREFERRED_INLINE_TEXT_PROPS = [
+  "children",
+  "label",
+  "title",
+  "description",
+  "placeholder",
+  "name",
+  "text"
+];
+var resolveInlineEditingTarget = ({
+  node,
+  nodeProps,
+  runtime,
+  editableTextProps,
+  resolveTranslationValue
+}) => {
+  var _a, _b, _c, _d, _e;
+  const isWizardStepNode = node.type === "Container" && String((_a = nodeProps.cardSection) != null ? _a : "") !== "header" && String((_b = nodeProps.cardSection) != null ? _b : "") !== "body" && String((_c = nodeProps.cardSection) != null ? _c : "") !== "footer" && (nodeProps.layout && typeof nodeProps.layout === "object" && !Array.isArray(nodeProps.layout) ? Boolean(nodeProps.layout.wizardStep) : false);
+  const canResolveInlineText = isWizardStepNode || editableTextProps.length > 0;
+  const orderedEditableTextProps = canResolveInlineText ? [
+    ...PREFERRED_INLINE_TEXT_PROPS.filter((prop) => editableTextProps.includes(prop)),
+    ...editableTextProps.filter(
+      (prop) => !PREFERRED_INLINE_TEXT_PROPS.includes(prop) && !INLINE_TECHNICAL_TEXT_PROPS.has(prop)
+    )
+  ] : [];
+  const getTextValue = canResolveInlineText ? (propName) => getEditableTextValue({
+    node,
+    nodeProps,
+    propName,
+    runtime,
+    resolveTranslationValue
+  }) : () => null;
+  const candidateInlineProp = canResolveInlineText ? selectCandidateInlineProp({
+    node,
+    isWizardStepNode,
+    orderedEditableTextProps,
+    getTextValue
+  }) : null;
+  const effectiveCandidateInlineProp = canResolveInlineText ? selectEffectiveInlineProp({
+    node,
+    isWizardStepNode,
+    hasRenderableChildren: ((_e = (_d = node.children) == null ? void 0 : _d.length) != null ? _e : 0) > 0,
+    childrenInlineEntry: getTextValue("children"),
+    candidateInlineProp
+  }) : null;
+  return {
+    canResolveInlineText,
+    isWizardStepNode,
+    orderedEditableTextProps,
+    getTextValue,
+    effectiveCandidateInlineProp
+  };
+};
+
+// src/studio-bridge/inline/InlineTextEditor.tsx
+import { jsx } from "react/jsx-runtime";
+var InlineTextEditor = ({
+  editing,
+  onChange,
+  onCancel,
+  onCommit
+}) => editing.multiline ? /* @__PURE__ */ jsx(
+  "textarea",
+  {
+    className: "absolute z-[260] h-full w-full resize-none rounded-md border border-primary/70 bg-background/95 px-2 py-1 text-sm text-foreground outline-none ring-0 cursor-text shadow-lg",
+    style: editing.editorStyle,
+    value: editing.value,
+    autoFocus: true,
+    "aria-label": "Inline text editor",
+    onChange: (event) => onChange(event.target.value),
+    onBlur: onCommit,
+    onKeyDown: (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onCancel();
+        return;
+      }
+      if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        onCommit();
+      }
+    }
+  }
+) : /* @__PURE__ */ jsx(
+  "input",
+  {
+    className: "absolute z-[260] h-full w-full rounded-md border border-primary/70 bg-background/95 px-2 text-sm text-foreground outline-none ring-0 cursor-text shadow-lg",
+    style: editing.editorStyle,
+    value: editing.value,
+    autoFocus: true,
+    "aria-label": "Inline text editor",
+    onChange: (event) => onChange(event.target.value),
+    onBlur: onCommit,
+    onKeyDown: (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onCancel();
+        return;
+      }
+      if (event.key === "Enter") {
+        event.preventDefault();
+        onCommit();
+      }
+    }
+  }
+);
+
+// src/studio-bridge/interactions/studioClick.ts
+var isInteractiveSelectionTarget = ({
+  targetElement,
+  nodeType,
+  isFormInteractiveTarget
+}) => isFormInteractiveTarget(targetElement) && nodeType !== "Button" && nodeType !== "Link";
+var resolveButtonOverlayTarget = ({
+  clickEvent,
+  boundTargetNodeId,
+  overlayCandidates
+}) => {
+  var _a, _b, _c;
+  const actionLabel = clickEvent && typeof clickEvent === "object" ? "id" in clickEvent ? String((_a = clickEvent.id) != null ? _a : "") : "type" in clickEvent ? String((_b = clickEvent.type) != null ? _b : "") : "" : "";
+  const payload = clickEvent && typeof clickEvent === "object" && "payload" in clickEvent && clickEvent.payload && typeof clickEvent.payload === "object" ? clickEvent.payload : null;
+  const requestedTargetNodeId = String((_c = payload == null ? void 0 : payload.targetNodeId) != null ? _c : boundTargetNodeId).trim();
+  const targetNodeId = requestedTargetNodeId || (overlayCandidates.length === 1 ? overlayCandidates[0] : "");
+  return {
+    actionLabel,
+    payload,
+    targetNodeId
+  };
+};
+var buildNormalizedActionRef = ({
+  clickEvent,
+  payload,
+  targetNodeId
+}) => {
+  const basePayload = payload && typeof payload === "object" ? payload : {};
+  const normalizedPayload = targetNodeId && !("targetNodeId" in basePayload) ? __spreadProps(__spreadValues({}, basePayload), { targetNodeId }) : basePayload;
+  return clickEvent && typeof clickEvent === "object" && "id" in clickEvent ? __spreadProps(__spreadValues({}, clickEvent), { payload: normalizedPayload }) : clickEvent && typeof clickEvent === "object" && "type" in clickEvent ? __spreadProps(__spreadValues({}, clickEvent), { payload: normalizedPayload }) : clickEvent;
+};
+var syncOverlayStateFromAction = ({
+  targetNodeId,
+  actionLabel,
+  runtime,
+  onInlineTextEdit,
+  findNodeById: findNodeById2,
+  schemaNodes
+}) => {
+  if (!targetNodeId || !onInlineTextEdit) return;
+  const targetNode = findNodeById2(targetNodeId, schemaNodes);
+  if (!targetNode) return;
+  const overlaysRaw = runtime.get("overlays.byNodeId");
+  const overlaysByNodeId = overlaysRaw && typeof overlaysRaw === "object" ? overlaysRaw : {};
+  if (!actionLabel) {
+    if (targetNode.type === "Popin") {
+      onInlineTextEdit(targetNodeId, "displayedPopin", true);
+    } else if (targetNode.type === "Drawer") {
+      onInlineTextEdit(targetNodeId, "open", true);
+    }
+    runtime.dispatch({
+      id: "overlay.open",
+      payload: { targetNodeId }
+    });
+    return;
+  }
+  if (targetNode.type === "Popin") {
+    if (actionLabel === "overlay.open") {
+      onInlineTextEdit(targetNodeId, "displayedPopin", true);
+    } else if (actionLabel === "overlay.close") {
+      onInlineTextEdit(targetNodeId, "displayedPopin", false);
+    } else if (actionLabel === "overlay.toggle") {
+      const current = Boolean(overlaysByNodeId[targetNodeId]);
+      onInlineTextEdit(targetNodeId, "displayedPopin", !current);
+    }
+  }
+  if (targetNode.type === "Drawer") {
+    if (actionLabel === "overlay.open") {
+      onInlineTextEdit(targetNodeId, "open", true);
+    } else if (actionLabel === "overlay.close") {
+      onInlineTextEdit(targetNodeId, "open", false);
+    } else if (actionLabel === "overlay.toggle") {
+      const current = Boolean(overlaysByNodeId[targetNodeId]);
+      onInlineTextEdit(targetNodeId, "open", !current);
+    }
+  }
+};
+var resolveClickedNodeId = ({
+  targetElement,
+  fallbackNodeId
+}) => {
+  var _a;
+  const closestNode = targetElement == null ? void 0 : targetElement.closest("[data-node-id]");
+  return (_a = closestNode == null ? void 0 : closestNode.dataset.nodeId) != null ? _a : fallbackNodeId;
+};
+
+// src/studio-bridge/nodes/studioNodeEditing.ts
+var suppressStudioClickUntil = 0;
+var markSuppressStudioClick = (durationMs = 220) => {
+  suppressStudioClickUntil = Date.now() + Math.max(0, durationMs);
+};
+var shouldSuppressStudioClick = () => Date.now() <= suppressStudioClickUntil;
+
+// src/utils/schemaTraversal.ts
+var findNodeById = (nodeId, nodes) => {
+  var _a;
+  for (const candidate of nodes) {
+    if (candidate.id === nodeId) return candidate;
+    const nested = findNodeById(nodeId, (_a = candidate.children) != null ? _a : []);
+    if (nested) return nested;
+  }
+  return null;
+};
+var collectOverlayNodeIds = (nodes) => {
+  const ids = [];
+  const walk = (items) => {
+    var _a;
+    for (const item of items) {
+      if (item.type === "Popin" || item.type === "Drawer") ids.push(item.id);
+      if ((_a = item.children) == null ? void 0 : _a.length) walk(item.children);
+    }
+  };
+  walk(nodes);
+  return ids;
+};
+
+// src/studio-bridge/interactions/resizeStudio.ts
+var computeMouseResizeSize = ({
+  state,
+  clientX,
+  clientY,
+  minWidthPct,
+  minHeightPct,
+  minHeightPx
+}) => {
+  const deltaX = clientX - state.startX;
+  const deltaY = clientY - state.startY;
+  const nextWidth = state.startWidthPct + deltaX / state.containerWidth * 100;
+  const nextHeight = state.startHeightPct + deltaY / state.containerHeight * 100;
+  const nextHeightPx = state.startHeightPx + deltaY;
+  return {
+    widthPct: Math.max(minWidthPct, Math.min(100, Number(nextWidth.toFixed(2)))),
+    heightPct: Math.max(minHeightPct, Math.min(100, Number(nextHeight.toFixed(2)))),
+    heightPx: Math.max(minHeightPx, Number(nextHeightPx.toFixed(0)))
+  };
+};
+var computePinchResizeSize = ({
+  state,
+  distance,
+  minWidthPct,
+  minHeightPct
+}) => {
+  if (!state.startDistance) return null;
+  const scale = distance / state.startDistance;
+  const nextWidth = state.startWidthPct * scale;
+  const nextHeight = state.startHeightPct * scale;
+  return {
+    widthPct: Math.max(minWidthPct, Math.min(100, Number(nextWidth.toFixed(2)))),
+    heightPct: Math.max(minHeightPct, Math.min(100, Number(nextHeight.toFixed(2))))
+  };
+};
+var createMouseResizeState = ({
+  nodeId,
+  clientX,
+  clientY,
+  widthPct,
+  heightPct,
+  heightPx,
+  elementRect,
+  parentRect,
+  minHeightPx
+}) => ({
+  nodeId,
+  startX: clientX,
+  startY: clientY,
+  startWidthPct: widthPct != null ? widthPct : elementRect.width / Math.max(parentRect.width, 1) * 100,
+  startHeightPct: heightPct != null ? heightPct : elementRect.height / Math.max(parentRect.height, 1) * 100,
+  startHeightPx: heightPx != null ? heightPx : Math.max(minHeightPx, elementRect.height),
+  containerWidth: Math.max(parentRect.width, 1),
+  containerHeight: Math.max(parentRect.height, 1)
+});
+var createPinchResizeState = ({
+  nodeId,
+  widthPct,
+  heightPct,
+  distance
+}) => ({
+  nodeId,
+  startDistance: distance,
+  startWidthPct: widthPct != null ? widthPct : 100,
+  startHeightPct: heightPct != null ? heightPct : 100
+});
+
+// src/studio-bridge/nodes/nodeWrapperHandlers.ts
+var createTouchResizeHandlers = ({
+  node,
+  widthPct,
+  heightPct,
+  onNodeResize,
+  onNodeResizeStart,
+  onNodeResizeEnd,
+  pinchStateRef,
+  minWidthPct,
+  minHeightPct
+}) => ({
+  onTouchStart: (event) => {
+    if (!onNodeResize) return;
+    if (event.touches.length < 2) return;
+    onNodeResizeStart == null ? void 0 : onNodeResizeStart(node.id);
+    const [firstTouch, secondTouch] = [event.touches[0], event.touches[1]];
+    const dx = secondTouch.clientX - firstTouch.clientX;
+    const dy = secondTouch.clientY - firstTouch.clientY;
+    const distance = Math.hypot(dx, dy);
+    pinchStateRef.current = createPinchResizeState({
+      nodeId: node.id,
+      widthPct,
+      heightPct,
+      distance
+    });
+  },
+  onTouchMove: (event) => {
+    if (!onNodeResize) return;
+    const state = pinchStateRef.current;
+    if (!state || state.nodeId !== node.id) return;
+    if (event.touches.length < 2) return;
+    const [firstTouch, secondTouch] = [event.touches[0], event.touches[1]];
+    const dx = secondTouch.clientX - firstTouch.clientX;
+    const dy = secondTouch.clientY - firstTouch.clientY;
+    const distance = Math.hypot(dx, dy);
+    const nextSize = computePinchResizeSize({
+      state,
+      distance,
+      minWidthPct,
+      minHeightPct
+    });
+    if (!nextSize) return;
+    pinchStateRef.current = __spreadProps(__spreadValues({}, state), {
+      lastSize: nextSize
+    });
+    onNodeResize(node.id, nextSize);
+  },
+  onTouchEnd: () => {
+    const state = pinchStateRef.current;
+    if (state == null ? void 0 : state.lastSize) {
+      onNodeResizeEnd == null ? void 0 : onNodeResizeEnd(node.id, state.lastSize);
+    }
+    pinchStateRef.current = null;
+  }
+});
+var createMouseResizeHandler = ({
+  node,
+  widthPct,
+  heightPct,
+  heightPx,
+  onNodeResize,
+  onNodeResizeStart,
+  resizeStateRef,
+  minHeightPx
+}) => onNodeResize ? (event) => {
+  event.preventDefault();
+  event.stopPropagation();
+  const element = event.currentTarget.closest("[data-node-id]");
+  if (!element) return;
+  const parent = element.parentElement;
+  if (!parent) return;
+  const parentRect = parent.getBoundingClientRect();
+  const elementRect = element.getBoundingClientRect();
+  onNodeResizeStart == null ? void 0 : onNodeResizeStart(node.id);
+  resizeStateRef.current = createMouseResizeState({
+    nodeId: node.id,
+    clientX: event.clientX,
+    clientY: event.clientY,
+    widthPct,
+    heightPct,
+    heightPx,
+    elementRect,
+    parentRect,
+    minHeightPx
+  });
+} : void 0;
+var createStudioNodeClickHandler = ({
+  node,
+  nodeProps,
+  schemaNodes,
+  runtime,
+  onNodeClick,
+  onInlineTextEdit,
+  isInlineEditingNode,
+  enableEventOnClick,
+  isFormInteractiveTarget
+}) => (event) => {
+  var _a, _b;
+  if (shouldSuppressStudioClick()) {
+    event.preventDefault();
+    event.stopPropagation();
+    return;
+  }
+  if (!onNodeClick) return;
+  if (isInlineEditingNode) return;
+  const targetElement = event.target;
+  if (node.type === "Button" && enableEventOnClick && Boolean(targetElement == null ? void 0 : targetElement.closest("button"))) {
+    const clickEvent = (_a = node.events) == null ? void 0 : _a.onClick;
+    const boundTargetNodeId = String((_b = nodeProps.buttonTargetNodeId) != null ? _b : "").trim();
+    const overlayCandidates = collectOverlayNodeIds(schemaNodes);
+    const { actionLabel, payload, targetNodeId } = resolveButtonOverlayTarget({
+      clickEvent,
+      boundTargetNodeId,
+      overlayCandidates
+    });
+    if (clickEvent) {
+      const normalizedActionRef = buildNormalizedActionRef({
+        clickEvent,
+        payload,
+        targetNodeId
+      });
+      runtime.dispatch(normalizedActionRef);
+    }
+    syncOverlayStateFromAction({
+      targetNodeId,
+      actionLabel: clickEvent ? actionLabel : "",
+      runtime,
+      onInlineTextEdit,
+      findNodeById,
+      schemaNodes
+    });
+    event.stopPropagation();
+    return;
+  }
+  if (isInteractiveSelectionTarget({
+    targetElement,
+    nodeType: node.type,
+    isFormInteractiveTarget
+  })) {
+    event.stopPropagation();
+    return;
+  }
+  const clickedNodeId = resolveClickedNodeId({
+    targetElement,
+    fallbackNodeId: node.id
+  });
+  if (clickedNodeId && clickedNodeId !== node.id) {
+    event.stopPropagation();
+    onNodeClick(clickedNodeId);
+    return;
+  }
+  event.stopPropagation();
+  onNodeClick(node.id);
+};
+var createStudioNodeDoubleClickHandler = ({
+  node,
+  onInlineTextEdit,
+  effectiveCandidateInlineProp,
+  getTextValue,
+  setInlineEditing
+}) => (event) => {
+  if (!onInlineTextEdit) return;
+  openInlineEditorFromDoubleClick({
+    event,
+    nodeId: node.id,
+    nodeType: node.type,
+    effectiveCandidateInlineProp,
+    getTextValue,
+    setInlineEditing
+  });
+};
+
+// src/studio-bridge/nodes/nodeWrapperStudio.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var getNodeWrapperPresentation = ({
+  isOpenStudioOverlayNode,
+  wrapperClassName,
+  widthPct,
+  shouldForceFullWidth
+}) => {
+  const wrapperStyle = isOpenStudioOverlayNode ? {
+    position: "absolute",
+    inset: 0,
+    width: "100%",
+    height: "100%"
+  } : widthPct !== null || shouldForceFullWidth ? { width: `${widthPct != null ? widthPct : 100}%` } : void 0;
+  const overlayWrapperClassName = isOpenStudioOverlayNode ? [wrapperClassName, "absolute inset-0 h-full w-full"].filter(Boolean).join(" ") : wrapperClassName;
+  return {
+    wrapperStyle,
+    overlayWrapperClassName,
+    requiresPlainWrapper: Boolean(overlayWrapperClassName) || Boolean(wrapperStyle)
+  };
+};
+var getStudioNodeInteractionState = ({
+  node,
+  selectedNodeId,
+  effectiveCandidateInlineProp,
+  isInlineEditingNode,
+  isOpenStudioOverlayNode,
+  isInsideForm,
+  isInsideFormWizard,
+  isInsideStepForm,
+  inlinePropName
+}) => {
+  var _a, _b, _c;
+  const nodeLayoutRecord = node.props && typeof node.props === "object" && !Array.isArray(node.props) && node.props.layout && typeof node.props.layout === "object" && !Array.isArray(node.props.layout) ? node.props.layout : {};
+  const isSelected = selectedNodeId === node.id;
+  const isFormFieldNode = node.type === "FormField" && String((_a = nodeLayoutRecord.formRole) != null ? _a : "field").trim() === "field";
+  const isTitleLikeInternalNode = String((_b = nodeLayoutRecord.formRole) != null ? _b : "").trim() === "title" || String((_c = nodeLayoutRecord.wizardStepRole) != null ? _c : "").trim() === "title" || ["H1", "H2", "H3", "H4", "H5", "H6"].includes(node.type);
+  const isActionButtonLikeNode = node.type === "Button" && (isInsideForm || isInsideFormWizard || isInsideStepForm);
+  const studioFormFieldWrapperClassName = isFormFieldNode ? "rounded-lg border-dashed border-sky-400/70 bg-sky-500/5 p-2 hover:border-sky-500 hover:bg-sky-500/10" : "";
+  const allowNodeHandles = (() => {
+    if (isInsideForm) return isFormFieldNode;
+    if (isInsideFormWizard || isInsideStepForm) {
+      if (isTitleLikeInternalNode) return false;
+      if (isActionButtonLikeNode) return false;
+      return true;
+    }
+    return true;
+  })();
+  return {
+    isSelected,
+    allowNodeHandles,
+    studioFormFieldWrapperClassName,
+    cursorClassName: effectiveCandidateInlineProp ? "cursor-text" : "cursor-pointer",
+    preserveContentWhileInlineEditing: isInlineEditingNode && isOpenStudioOverlayNode && (inlinePropName === "title" || inlinePropName === "closeText")
+  };
+};
+var renderPlainWrappedNode = ({
+  nodeId,
+  overlayWrapperClassName,
+  wrapperStyle,
+  nodeContent
+}) => /* @__PURE__ */ jsx2(
+  "div",
+  {
+    "data-node-id": nodeId,
+    className: ["relative min-w-0 max-w-full flex-none", overlayWrapperClassName].filter(Boolean).join(" "),
+    style: wrapperStyle,
+    children: nodeContent
+  },
+  nodeId
+);
+
+// src/studio-bridge/nodes/StudioNodeWrapper.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var StudioNodeWrapper = ({
+  nodeId,
+  wrapperClassName = "",
+  cursorClassName = "",
+  isSelected,
+  allowResizeHandle = true,
+  style,
+  onClick,
+  onDoubleClick,
+  onTouchStart,
+  onTouchMove,
+  onTouchEnd,
+  showResizeHandle,
+  onResizeMouseDown,
+  isInlineEditing,
+  preserveContentWhileInlineEditing = false,
+  children,
+  inlineEditor
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    "data-node-id": nodeId,
+    className: [
+      "relative block w-fit min-w-0 max-w-full rounded-md border border-transparent transition-colors",
+      wrapperClassName,
+      cursorClassName,
+      isSelected ? "border-dashed border-primary/60 bg-primary/5" : ""
+    ].filter(Boolean).join(" "),
+    style: __spreadValues({
+      position: "relative"
+    }, style != null ? style : {}),
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd,
+    onClick,
+    onDoubleClick,
+    children: [
+      allowResizeHandle && showResizeHandle && onResizeMouseDown ? /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: "absolute -right-2 -top-2 z-20 inline-flex h-7 w-7 cursor-nwse-resize items-center justify-center rounded-md border border-primary bg-primary text-xs text-primary-foreground shadow-sm transition-colors hover:bg-primary-hover hover:border-primary-hover",
+          "aria-label": "Resize node",
+          onMouseDown: onResizeMouseDown,
+          children: "\u2922"
+        }
+      ) : null,
+      /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: isInlineEditing && !preserveContentWhileInlineEditing ? "pointer-events-none opacity-0" : void 0,
+          children
+        }
+      ),
+      isInlineEditing ? inlineEditor : null
+    ]
+  },
+  nodeId
+);
+
+// src/render-layer/renderDirectives.ts
+var RENDER_BINDING_PROP_NAMES = /* @__PURE__ */ new Set([
+  "bindingEnabled",
+  "valueBindingKey",
+  "optionsBindingKey",
+  "useBindingData",
+  "entitiesBindingKey",
+  "videoBindingKey",
+  "mapBindingKey",
+  "productBindingKey",
+  "useTranslationKeys",
+  "tagContentTranslationKey",
+  "tagContentTranslationValue",
+  "hrefTranslationKey",
+  "hrefTranslationValue",
+  "mediaSource",
+  "mediaSrc",
+  "mediaAlt",
+  "rowsBindingKey",
+  "columnsBindingKey"
+]);
+var STUDIO_INTERNAL_PROP_NAMES = /* @__PURE__ */ new Set([
+  ...RENDER_BINDING_PROP_NAMES
+]);
+var getRenderBindingProps = (props) => {
+  if (!props || typeof props !== "object" || Array.isArray(props)) {
+    return {};
+  }
+  const source = props;
+  const embedded = source.__studio && typeof source.__studio === "object" && !Array.isArray(source.__studio) ? source.__studio : {};
+  const legacy = Array.from(RENDER_BINDING_PROP_NAMES).reduce(
+    (accumulator, key) => {
+      if (source[key] !== void 0) {
+        accumulator[key] = source[key];
+      }
+      return accumulator;
+    },
+    {}
+  );
+  return Array.from(RENDER_BINDING_PROP_NAMES).reduce((accumulator, key) => {
+    if (legacy[key] !== void 0) {
+      accumulator[key] = legacy[key];
+    } else if (embedded[key] !== void 0) {
+      accumulator[key] = embedded[key];
+    }
+    return accumulator;
+  }, {});
+};
+
+// src/utils/renderChildren.tsx
+import { normalizeRenderableChild, toBoolean } from "@arkcit/engine-react";
+
+// src/studio-bridge/overlay/overlayStudio.ts
+var toBoolean2 = (value) => {
+  if (typeof value === "boolean") return value;
+  if (typeof value === "string") return value.toLowerCase() === "true";
+  return Boolean(value);
+};
+var readOverlayState = (runtime) => {
+  const overlaysRaw = runtime.get("overlays.byNodeId");
+  return overlaysRaw && typeof overlaysRaw === "object" ? overlaysRaw : {};
+};
+var applyStudioOverlayComponentProps = ({
+  node,
+  componentProps,
+  runtime,
+  overlaysByNodeId,
+  renderBindingProps,
+  resolvedChildContent,
+  onInlineTextEdit,
+  isStudioRendererContext,
+  dropdownOpenByNodeId,
+  setDropdownOpenByNodeId
+}) => {
+  if (node.type === "Popin") {
+    const bindingEnabled = toBoolean2(renderBindingProps.bindingEnabled);
+    const rawOverlayOpen = overlaysByNodeId[node.id];
+    const fallbackOpen = Boolean(componentProps.displayedPopin);
+    const isOpen = bindingEnabled ? typeof rawOverlayOpen === "boolean" ? rawOverlayOpen : fallbackOpen : fallbackOpen;
+    componentProps.displayedPopin = isOpen;
+    componentProps.setDisplayedPopin = (next) => {
+      const nextOpen = typeof next === "function" ? next(isOpen) : next;
+      onInlineTextEdit == null ? void 0 : onInlineTextEdit(node.id, "displayedPopin", nextOpen);
+      if (bindingEnabled) {
+        runtime.dispatch({
+          id: nextOpen ? "overlay.open" : "overlay.close",
+          payload: { targetNodeId: node.id }
+        });
+      }
+    };
+    componentProps.children = resolvedChildContent !== null ? resolvedChildContent : normalizeRenderableChild(componentProps.children);
+  }
+  if (node.type === "Drawer") {
+    const bindingEnabled = toBoolean2(renderBindingProps.bindingEnabled);
+    const rawOverlayOpen = overlaysByNodeId[node.id];
+    const fallbackOpen = Boolean(componentProps.open);
+    const isOpen = bindingEnabled ? typeof rawOverlayOpen === "boolean" ? rawOverlayOpen : fallbackOpen : fallbackOpen;
+    componentProps.open = isOpen;
+    componentProps.onClose = () => {
+      onInlineTextEdit == null ? void 0 : onInlineTextEdit(node.id, "open", false);
+      if (bindingEnabled) {
+        runtime.dispatch({
+          id: "overlay.close",
+          payload: { targetNodeId: node.id }
+        });
+      }
+    };
+    componentProps.children = resolvedChildContent !== null ? resolvedChildContent : normalizeRenderableChild(componentProps.children);
+  }
+  if (node.type === "Dropdown") {
+    const fallbackOpen = Boolean(componentProps.open);
+    const isOpen = isStudioRendererContext && node.id in dropdownOpenByNodeId ? Boolean(dropdownOpenByNodeId[node.id]) : fallbackOpen;
+    componentProps.open = isOpen;
+    componentProps.onOpenChange = (nextOpen) => {
+      setDropdownOpenByNodeId((previous) => __spreadProps(__spreadValues({}, previous), {
+        [node.id]: Boolean(nextOpen)
+      }));
+      onInlineTextEdit == null ? void 0 : onInlineTextEdit(node.id, "open", Boolean(nextOpen));
+    };
+    if (resolvedChildContent !== null) {
+      componentProps.children = resolvedChildContent;
+    }
+  }
+  if (node.type === "Tooltip") {
+    componentProps.children = resolvedChildContent !== null ? resolvedChildContent : normalizeRenderableChild(componentProps.children);
+  }
+};
+var getOpenStudioOverlayState = ({
+  node,
+  nodeProps,
+  overlaysByNodeId
+}) => {
+  const renderBindingProps = getRenderBindingProps(nodeProps);
+  const bindingEnabled = toBoolean2(renderBindingProps.bindingEnabled);
+  return Boolean(
+    node.type === "Popin" && Boolean(bindingEnabled ? overlaysByNodeId[node.id] : nodeProps.displayedPopin) || node.type === "Drawer" && Boolean(bindingEnabled ? overlaysByNodeId[node.id] : nodeProps.open)
+  );
+};
+
+// src/studio-bridge/overlay/renderNodeFrame.tsx
+import { createPortal } from "react-dom";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var renderNodeFrame = ({
+  node,
+  nodeProps,
+  nodeContent,
+  selectedNodeId,
+  onNodeClick,
+  onInlineTextEdit,
+  onNodeResize,
+  onNodeResizeStart,
+  onNodeResizeEnd,
+  widthPct,
+  heightPct,
+  heightPx,
+  wrapperClassName,
+  isOpenStudioOverlayNode,
+  shouldForceFullWidth,
+  effectiveCandidateInlineProp,
+  inlineEditing,
+  isInlineEditingNode,
+  ancestorTypeMembership,
+  schemaNodes,
+  runtime,
+  enableEventOnClick,
+  isFormInteractiveTarget,
+  getTextValue,
+  setInlineEditing,
+  inlineEditor,
+  NodeWrapper,
+  overlaysByNodeId,
+  getOpenStudioOverlayState: getOpenStudioOverlayState2,
+  resizeStateRef,
+  pinchStateRef,
+  minWidthPct,
+  minHeightPct,
+  minHeightPx,
+  overlayRootId
+}) => {
+  var _a;
+  const { wrapperStyle, overlayWrapperClassName, requiresPlainWrapper } = getNodeWrapperPresentation({
+    isOpenStudioOverlayNode,
+    wrapperClassName,
+    widthPct,
+    shouldForceFullWidth
+  });
+  if (!onNodeClick && !selectedNodeId) {
+    if (!requiresPlainWrapper) return nodeContent;
+    return renderPlainWrappedNode({
+      nodeId: node.id,
+      overlayWrapperClassName,
+      wrapperStyle,
+      nodeContent
+    });
+  }
+  const {
+    isSelected,
+    allowNodeHandles,
+    studioFormFieldWrapperClassName,
+    cursorClassName,
+    preserveContentWhileInlineEditing
+  } = getStudioNodeInteractionState({
+    node,
+    selectedNodeId,
+    effectiveCandidateInlineProp,
+    isInlineEditingNode,
+    isOpenStudioOverlayNode,
+    isInsideForm: ancestorTypeMembership.Form.has(node.id),
+    isInsideFormWizard: ancestorTypeMembership.FormWizard.has(node.id),
+    isInsideStepForm: ancestorTypeMembership.StepForm.has(node.id),
+    inlinePropName: inlineEditing == null ? void 0 : inlineEditing.propName
+  });
+  const touchResizeHandlers = createTouchResizeHandlers({
+    node,
+    widthPct,
+    heightPct,
+    onNodeResize,
+    onNodeResizeStart,
+    onNodeResizeEnd,
+    pinchStateRef,
+    minWidthPct,
+    minHeightPct
+  });
+  const onResizeMouseDown = createMouseResizeHandler({
+    node,
+    widthPct,
+    heightPct,
+    heightPx,
+    onNodeResize,
+    onNodeResizeStart,
+    resizeStateRef,
+    minHeightPx
+  });
+  const onClick = createStudioNodeClickHandler({
+    node,
+    nodeProps,
+    schemaNodes,
+    runtime,
+    onNodeClick,
+    onInlineTextEdit,
+    isInlineEditingNode,
+    enableEventOnClick,
+    isFormInteractiveTarget
+  });
+  const onDoubleClick = createStudioNodeDoubleClickHandler({
+    node,
+    onInlineTextEdit,
+    effectiveCandidateInlineProp,
+    getTextValue,
+    setInlineEditing
+  });
+  const wrappedNode = /* @__PURE__ */ jsx4(
+    NodeWrapper,
+    {
+      nodeId: node.id,
+      wrapperClassName: [overlayWrapperClassName, studioFormFieldWrapperClassName].filter(Boolean).join(" "),
+      cursorClassName: onNodeClick ? cursorClassName : "",
+      isSelected,
+      allowDragHandle: allowNodeHandles,
+      allowResizeHandle: allowNodeHandles,
+      style: wrapperStyle,
+      onTouchStart: touchResizeHandlers.onTouchStart,
+      onTouchMove: touchResizeHandlers.onTouchMove,
+      onTouchEnd: touchResizeHandlers.onTouchEnd,
+      onClick,
+      onDoubleClick,
+      showResizeHandle: isSelected && Boolean(onNodeResize) && allowNodeHandles,
+      onResizeMouseDown,
+      isInlineEditing: isInlineEditingNode,
+      preserveContentWhileInlineEditing,
+      inlineEditor,
+      children: nodeContent
+    }
+  );
+  if (getOpenStudioOverlayState2({
+    node,
+    nodeProps,
+    overlaysByNodeId
+  })) {
+    const overlayRoot = (_a = globalThis.document) == null ? void 0 : _a.getElementById(overlayRootId);
+    if (overlayRoot) {
+      return createPortal(wrappedNode, overlayRoot);
+    }
+  }
+  return wrappedNode;
+};
+
+// src/react-web/engine/NodeErrorBoundary.tsx
+import { NodeErrorBoundary } from "@arkcit/engine-react";
+
+// src/layout/nodeLayout.ts
+var toPositiveNumber = (value) => {
+  const numeric = Number(value);
+  if (!Number.isFinite(numeric) || numeric <= 0) return void 0;
+  return numeric;
+};
+var toColSpan = (value) => {
+  const numeric = Number(value);
+  if (!Number.isInteger(numeric) || numeric < 1 || numeric > 12) return void 0;
+  return numeric;
+};
+var toCardSection = (value) => {
+  if (value === "header" || value === "body" || value === "footer") return value;
+  return void 0;
+};
+var readNodeLayout = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  if (!props) return {};
+  const rawLayout = props.layout && typeof props.layout === "object" && !Array.isArray(props.layout) ? props.layout : {};
+  return {
+    widthPct: toPositiveNumber((_a = rawLayout.widthPct) != null ? _a : props.__studioWidthPct),
+    heightPct: toPositiveNumber((_b = rawLayout.heightPct) != null ? _b : props.__studioHeightPct),
+    heightPx: toPositiveNumber((_c = rawLayout.heightPx) != null ? _c : props.__studioHeightPx),
+    colSpan: toColSpan((_d = rawLayout.colSpan) != null ? _d : props.__studioColSpan),
+    wrapperClassName: String(
+      (_f = (_e = rawLayout.wrapperClassName) != null ? _e : props.__studioWrapperClassName) != null ? _f : ""
+    ).trim(),
+    cardSection: toCardSection((_g = rawLayout.cardSection) != null ? _g : props.__studioCardSection)
+  };
+};
+
+// src/utils/nodeResetToken.ts
+import { buildNodeResetToken } from "@arkcit/engine-react";
+
+// src/runtime/bindings.ts
+var DANGEROUS_KEYS = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
+var MISSING_TRANSLATION_FALLBACK = "Lorem ipsum dolor sit amet. (fallback)";
+var MISSING_REF_FALLBACK = "Lorem ipsum dolor sit amet. (fallback)";
+var isPlainObject = (value) => {
+  if (typeof value !== "object" || value === null || Array.isArray(value)) return false;
+  const prototype = Object.getPrototypeOf(value);
+  return prototype === Object.prototype || prototype === null;
+};
+var isReactElementLike = (value) => isPlainObject(value) && typeof value.$$typeof === "symbol" && "props" in value;
+var isTranslationValue = (value) => isPlainObject(value) && typeof value.$t === "string";
+var isRefValue = (value) => isPlainObject(value) && typeof value.$ref === "string";
+var isExprValue = (value) => isPlainObject(value) && typeof value.$expr === "string";
+var parseStructuredString = (value) => {
+  if (typeof value !== "string") return value;
+  const trimmed = value.trim();
+  if (!trimmed.startsWith("{") || !trimmed.endsWith("}")) return value;
+  try {
+    const parsed = JSON.parse(trimmed);
+    if (!isPlainObject(parsed)) return value;
+    if ((typeof parsed.$ref === "string" || typeof parsed.$t === "string") && Object.keys(parsed).length >= 1) {
+      return parsed;
+    }
+    return value;
+  } catch (e) {
+    return value;
+  }
+};
+var resolveUIValue = (value, runtime) => {
+  const normalizedValue = parseStructuredString(value);
+  if (isTranslationValue(normalizedValue)) {
+    const fallback = typeof normalizedValue.defaultValue === "string" && normalizedValue.defaultValue.trim() ? normalizedValue.defaultValue : normalizedValue.$t;
+    if (!runtime.t) return fallback || MISSING_TRANSLATION_FALLBACK;
+    const translated = runtime.t(normalizedValue.$t, normalizedValue.values);
+    if (typeof translated !== "string") return fallback || MISSING_TRANSLATION_FALLBACK;
+    if (!translated.trim()) return fallback || MISSING_TRANSLATION_FALLBACK;
+    if (translated === normalizedValue.$t) return fallback || MISSING_TRANSLATION_FALLBACK;
+    return translated;
+  }
+  if (isRefValue(normalizedValue)) {
+    const resolved = runtime.get(normalizedValue.$ref);
+    if (resolved == null) return MISSING_REF_FALLBACK;
+    if (typeof resolved === "string" && !resolved.trim()) return MISSING_REF_FALLBACK;
+    return resolved;
+  }
+  if (isExprValue(normalizedValue)) {
+    return void 0;
+  }
+  if (Array.isArray(normalizedValue)) {
+    return normalizedValue.map((item) => resolveUIValue(item, runtime));
+  }
+  if (isReactElementLike(normalizedValue)) {
+    return normalizedValue;
+  }
+  if (isPlainObject(normalizedValue)) {
+    const next = {};
+    Object.entries(normalizedValue).forEach(([key, childValue]) => {
+      if (DANGEROUS_KEYS.has(key)) return;
+      next[key] = resolveUIValue(childValue, runtime);
+    });
+    return next;
+  }
+  return normalizedValue;
+};
+
+// src/studio-bridge/overlay/renderSafeNode.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var FallbackInlineTextEditor = ({
+  editing,
+  onChange,
+  onCancel,
+  onCommit
+}) => editing.multiline ? /* @__PURE__ */ jsx5(
+  "textarea",
+  {
+    style: editing.editorStyle,
+    value: editing.value,
+    autoFocus: true,
+    "aria-label": "Inline text editor",
+    onChange: (event) => onChange(event.target.value),
+    onBlur: onCommit,
+    onKeyDown: (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onCancel();
+        return;
+      }
+      if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        onCommit();
+      }
+    }
+  }
+) : /* @__PURE__ */ jsx5(
+  "input",
+  {
+    style: editing.editorStyle,
+    value: editing.value,
+    autoFocus: true,
+    "aria-label": "Inline text editor",
+    onChange: (event) => onChange(event.target.value),
+    onBlur: onCommit,
+    onKeyDown: (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onCancel();
+        return;
+      }
+      if (event.key === "Enter") {
+        event.preventDefault();
+        onCommit();
+      }
+    }
+  }
+);
+var renderSafeNode = ({
+  node,
+  registry,
+  runtime,
+  schemaNodes,
+  renderNode,
+  isStudioRendererContext,
+  overlaysByNodeId,
+  selectedNodeId,
+  onNodeClick,
+  onInlineTextEdit,
+  onNodeResize,
+  onNodeResizeStart,
+  onNodeResizeEnd,
+  inlineEditing,
+  setInlineEditing,
+  ancestorTypeMembership,
+  resizeStateRef,
+  pinchStateRef,
+  minWidthPct,
+  minHeightPct,
+  minHeightPx,
+  overlayRootId,
+  NodeWrapper,
+  InlineTextEditorComponent,
+  isFormInteractiveTarget
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const nodeProps = (_a = node.props) != null ? _a : {};
+  const nodeLayout = readNodeLayout(nodeProps);
+  const wrapperClassName = (_b = nodeLayout.wrapperClassName) != null ? _b : "";
+  const resetToken = buildNodeResetToken(node);
+  const widthPct = (_c = nodeLayout.widthPct) != null ? _c : null;
+  const heightPct = (_d = nodeLayout.heightPct) != null ? _d : null;
+  const heightPx = (_e = nodeLayout.heightPx) != null ? _e : null;
+  const isOpenStudioOverlayNode = isStudioRendererContext && getOpenStudioOverlayState({
+    node,
+    nodeProps,
+    overlaysByNodeId
+  });
+  const shouldForceFullWidth = shouldForceStudioNodeFullWidth({
+    widthPct,
+    nodeType: node.type,
+    isStudioRendererContext,
+    colSpan: nodeLayout.colSpan
+  });
+  const enableEventOnClick = toBoolean(nodeProps.buttonEnableEventOnClick);
+  const nodeRegistryMeta = (_f = registry[node.type]) == null ? void 0 : _f.meta;
+  const editableTextProps = ((_g = nodeRegistryMeta == null ? void 0 : nodeRegistryMeta.editableTextProps) != null ? _g : []).filter(
+    (propName) => propName !== "className"
+  );
+  const { getTextValue, effectiveCandidateInlineProp } = resolveInlineEditingTarget({
+    node,
+    nodeProps,
+    runtime,
+    editableTextProps,
+    resolveTranslationValue: resolveUIValue
+  });
+  const isInlineEditingNode = (inlineEditing == null ? void 0 : inlineEditing.nodeId) === node.id;
+  const nodeContent = /* @__PURE__ */ jsx5(NodeErrorBoundary, { nodeId: node.id, nodeType: node.type, resetToken, children: renderNode(node, { widthPct, heightPct, heightPx }) }, node.id);
+  const commitInlineEditing = () => {
+    if (!inlineEditing) return;
+    applyInlineEditingValue({
+      editingState: inlineEditing,
+      rawValue: inlineEditing.value,
+      schemaNodes,
+      onInlineTextEdit,
+      findNodeById
+    });
+    setInlineEditing(null);
+  };
+  const InlineEditorComponent = InlineTextEditorComponent != null ? InlineTextEditorComponent : FallbackInlineTextEditor;
+  const inlineEditor = isInlineEditingNode && inlineEditing ? /* @__PURE__ */ jsx5(
+    InlineEditorComponent,
+    {
+      editing: inlineEditing,
+      onChange: (value) => setInlineEditing((previous) => {
+        if (!previous) return previous;
+        return __spreadProps(__spreadValues({}, previous), {
+          value
+        });
+      }),
+      onCancel: () => setInlineEditing(null),
+      onCommit: commitInlineEditing
+    }
+  ) : null;
+  return renderNodeFrame({
+    node,
+    nodeProps,
+    nodeContent,
+    selectedNodeId,
+    onNodeClick,
+    onInlineTextEdit,
+    onNodeResize,
+    onNodeResizeStart,
+    onNodeResizeEnd,
+    widthPct,
+    heightPct,
+    heightPx,
+    wrapperClassName,
+    isOpenStudioOverlayNode,
+    shouldForceFullWidth,
+    effectiveCandidateInlineProp,
+    inlineEditing,
+    isInlineEditingNode,
+    ancestorTypeMembership,
+    schemaNodes,
+    runtime,
+    enableEventOnClick,
+    isFormInteractiveTarget,
+    getTextValue,
+    setInlineEditing,
+    inlineEditor,
+    NodeWrapper,
+    overlaysByNodeId,
+    getOpenStudioOverlayState,
+    resizeStateRef,
+    pinchStateRef,
+    minWidthPct,
+    minHeightPct,
+    minHeightPx,
+    overlayRootId
+  });
+};
+
+// src/studio-bridge/preview-form/previewFormRenderer.tsx
+import React from "react";
+
+// src/form/engineFormValidation.ts
+var EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+var isEmptyValue = (value) => {
+  if (value == null) return true;
+  if (typeof value === "string") return value.trim().length === 0;
+  if (Array.isArray(value)) return value.length === 0;
+  return false;
+};
+var toNumber = (value) => {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string") {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+  }
+  return null;
+};
+var defaultDeclarativeValidatorRegistry = {
+  required: (value) => isEmptyValue(value) ? { code: "required" } : null,
+  minLength: (value, params) => {
+    var _a;
+    if (isEmptyValue(value)) return null;
+    const min = toNumber((_a = params == null ? void 0 : params.min) != null ? _a : params == null ? void 0 : params.value);
+    if (min == null) return null;
+    return String(value).length < min ? { code: "minLength", params: { min } } : null;
+  },
+  maxLength: (value, params) => {
+    var _a;
+    if (isEmptyValue(value)) return null;
+    const max = toNumber((_a = params == null ? void 0 : params.max) != null ? _a : params == null ? void 0 : params.value);
+    if (max == null) return null;
+    return String(value).length > max ? { code: "maxLength", params: { max } } : null;
+  },
+  email: (value) => {
+    if (isEmptyValue(value)) return null;
+    return EMAIL_REGEX.test(String(value)) ? null : { code: "email" };
+  },
+  pattern: (value, params) => {
+    var _a, _b;
+    if (isEmptyValue(value)) return null;
+    const rawPattern = String((_b = (_a = params == null ? void 0 : params.pattern) != null ? _a : params == null ? void 0 : params.value) != null ? _b : "").trim();
+    if (!rawPattern) return null;
+    try {
+      const regex = new RegExp(rawPattern);
+      return regex.test(String(value)) ? null : { code: "pattern", params: { pattern: rawPattern } };
+    } catch (e) {
+      return { code: "pattern" };
+    }
+  }
+};
+var buildLegacyValidators = (field) => {
+  var _a, _b, _c;
+  const validators = [];
+  if (field.required) {
+    validators.push({
+      id: `${String((_a = field.name) != null ? _a : "field")}:required`,
+      type: "required",
+      stopOnFailure: true
+    });
+  }
+  if (String((_b = field.pattern) != null ? _b : "").trim()) {
+    validators.push({
+      id: `${String((_c = field.name) != null ? _c : "field")}:pattern`,
+      type: "pattern",
+      params: { pattern: String(field.pattern) }
+    });
+  }
+  return validators;
+};
+var normalizeValidators = (field, options) => {
+  const explicit = Array.isArray(field.validators) ? field.validators : [];
+  if (explicit.length > 0) return explicit;
+  if (!(options == null ? void 0 : options.useLegacyFieldConstraints)) return [];
+  return buildLegacyValidators(field);
+};
+var toIssueArray = (issue) => {
+  if (!issue) return [];
+  return Array.isArray(issue) ? issue : [issue];
+};
+var validateFieldWithConfig = (field, value, values, config, registry) => {
+  if (config.enabled === false) return [];
+  const validate = registry[config.type];
+  if (!validate) return [];
+  const baseIssues = toIssueArray(
+    validate(value, config.params, {
+      field,
+      values
+    })
+  );
+  return baseIssues.map((baseIssue) => {
+    var _a, _b, _c, _d, _e;
+    return {
+      field: String((_a = field.name) != null ? _a : ""),
+      validatorId: config.id || baseIssue.validatorId,
+      code: baseIssue.code,
+      messageKey: (_b = baseIssue.messageKey) != null ? _b : config.messageKey,
+      message: (_c = baseIssue.message) != null ? _c : config.message,
+      params: __spreadValues(__spreadValues({}, (_d = config.params) != null ? _d : {}), (_e = baseIssue.params) != null ? _e : {})
+    };
+  });
+};
+var resolveIssueMessage = (issue, t) => {
+  const defaultMessageByCode = () => {
+    var _a, _b, _c, _d, _e, _f;
+    switch (issue.code) {
+      case "required":
+        return "This field is required";
+      case "email":
+        return "Invalid email address";
+      case "pattern":
+        return "Invalid format";
+      case "minLength": {
+        const min = (_c = (_a = issue.params) == null ? void 0 : _a.min) != null ? _c : (_b = issue.params) == null ? void 0 : _b.value;
+        return min != null ? `Minimum ${String(min)} characters` : "Value is too short";
+      }
+      case "maxLength": {
+        const max = (_f = (_d = issue.params) == null ? void 0 : _d.max) != null ? _f : (_e = issue.params) == null ? void 0 : _e.value;
+        return max != null ? `Maximum ${String(max)} characters` : "Value is too long";
+      }
+      default:
+        return void 0;
+    }
+  };
+  if (issue.messageKey && t) {
+    const translated = t(issue.messageKey, issue.params);
+    if (typeof translated === "string" && translated.trim().length > 0) {
+      return translated;
+    }
+  }
+  if (issue.message && issue.message.trim().length > 0) return issue.message;
+  if (issue.messageKey && issue.messageKey.trim().length > 0) return issue.messageKey;
+  return defaultMessageByCode();
+};
+var validateFormValues = (fields, values, options) => {
+  var _a;
+  const mergedRegistry = __spreadValues(__spreadValues({}, defaultDeclarativeValidatorRegistry), (_a = options == null ? void 0 : options.registry) != null ? _a : {});
+  const issues = [];
+  fields.forEach((field) => {
+    var _a2;
+    const fieldName = String((_a2 = field.name) != null ? _a2 : "").trim();
+    if (!fieldName) return;
+    const fieldValue = values[fieldName];
+    const validators = normalizeValidators(field, options);
+    if (validators.length === 0) return;
+    for (const validatorConfig of validators) {
+      const fieldIssues = validateFieldWithConfig(
+        field,
+        fieldValue,
+        values,
+        validatorConfig,
+        mergedRegistry
+      );
+      if (fieldIssues.length > 0) {
+        issues.push(...fieldIssues);
+        if (validatorConfig.stopOnFailure) break;
+      }
+    }
+  });
+  const errors = {};
+  issues.forEach((issue) => {
+    if (errors[issue.field]) return;
+    errors[issue.field] = resolveIssueMessage(issue, options == null ? void 0 : options.t);
+  });
+  return { issues, errors };
+};
+
+// src/utils/formStudio.ts
+var getLayoutRecord = (props) => {
+  if (!props) return {};
+  const layout = props.layout;
+  if (!layout || typeof layout !== "object" || Array.isArray(layout)) {
+    return {};
+  }
+  return layout;
+};
+var normalizeStudioFormChild = (child) => {
+  var _a, _b, _c, _d, _e;
+  const childProps = (_a = child.props) != null ? _a : {};
+  const childLayout = getLayoutRecord(childProps);
+  if (child.type === "__studio_form_field") {
+    return __spreadProps(__spreadValues({}, child), {
+      type: "FormField",
+      props: __spreadProps(__spreadValues({}, childProps), {
+        layout: __spreadProps(__spreadValues({}, childLayout), {
+          formRole: "field"
+        })
+      })
+    });
+  }
+  if (child.type === "__studio_form_title") {
+    return __spreadProps(__spreadValues({}, child), {
+      type: "Text",
+      props: __spreadProps(__spreadValues({}, childProps), {
+        layout: __spreadProps(__spreadValues({}, childLayout), {
+          formRole: "title"
+        })
+      })
+    });
+  }
+  if (child.type === "__studio_form_submit") {
+    return __spreadProps(__spreadValues({}, child), {
+      type: "Button",
+      props: __spreadProps(__spreadValues({}, childProps), {
+        intent: String((_b = childProps.intent) != null ? _b : "primary"),
+        variant: String((_c = childProps.variant) != null ? _c : "solid"),
+        layout: __spreadProps(__spreadValues({}, childLayout), {
+          formRole: "submit"
+        })
+      })
+    });
+  }
+  if (child.type === "__studio_form_reset") {
+    return __spreadProps(__spreadValues({}, child), {
+      type: "Button",
+      props: __spreadProps(__spreadValues({}, childProps), {
+        intent: String((_d = childProps.intent) != null ? _d : "neutral"),
+        variant: String((_e = childProps.variant) != null ? _e : "outline"),
+        layout: __spreadProps(__spreadValues({}, childLayout), {
+          formRole: "reset"
+        })
+      })
+    });
+  }
+  return child;
+};
+var getStudioFormChildRole = (child) => {
+  var _a, _b;
+  if (child.type === "__studio_form_field") return "field";
+  if (child.type === "__studio_form_title") return "title";
+  if (child.type === "__studio_form_submit") return "submit";
+  if (child.type === "__studio_form_reset") return "reset";
+  const layout = getLayoutRecord(
+    (_a = child.props) != null ? _a : {}
+  );
+  return String((_b = layout.formRole) != null ? _b : "").trim();
+};
+var buildFormFieldConfig = (rawProps, nestedField = {}) => {
+  var _a, _b, _c, _d;
+  const fieldName = String((_b = (_a = rawProps.name) != null ? _a : nestedField.name) != null ? _b : "").trim();
+  return __spreadProps(__spreadValues(__spreadValues({}, nestedField), rawProps), {
+    name: fieldName,
+    label: String((_d = (_c = rawProps.label) != null ? _c : nestedField.label) != null ? _d : fieldName)
+  });
+};
+var buildWizardFieldConfig = (rawProps, nestedField) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+  const name = String((_b = (_a = rawProps.name) != null ? _a : nestedField.name) != null ? _b : "").trim();
+  return {
+    name,
+    label: String((_d = (_c = rawProps.label) != null ? _c : nestedField.label) != null ? _d : name || "Field"),
+    type: (_e = rawProps.type) != null ? _e : nestedField.type,
+    required: Boolean((_g = (_f = rawProps.required) != null ? _f : nestedField.required) != null ? _g : false),
+    pattern: rawProps.pattern != null ? String(rawProps.pattern) : nestedField.pattern != null ? String(nestedField.pattern) : void 0,
+    placeholder: (_h = rawProps.placeholder) != null ? _h : nestedField.placeholder,
+    validators: Array.isArray(rawProps.validators) && rawProps.validators.length > 0 ? rawProps.validators : Array.isArray(nestedField.validators) && nestedField.validators.length > 0 ? nestedField.validators : void 0,
+    options: (_i = rawProps.options) != null ? _i : nestedField.options,
+    helperText: (_j = rawProps.helperText) != null ? _j : nestedField.helperText,
+    defaultValue: (_k = rawProps.defaultValue) != null ? _k : nestedField.defaultValue,
+    rows: (_l = rawProps.rows) != null ? _l : nestedField.rows,
+    accept: (_m = rawProps.accept) != null ? _m : nestedField.accept
+  };
+};
+
+// src/studio-bridge/preview-form/previewFormState.ts
+var resolveStudioFormNextValues = ({
+  formValues,
+  fieldName,
+  nextValue
+}) => __spreadProps(__spreadValues({}, formValues), {
+  [fieldName]: nextValue
+});
+var resolveStudioFormResetValues = (normalizedFormFields) => normalizedFormFields.reduce((accumulator, field) => {
+  var _a, _b;
+  const fieldName = String((_a = field.name) != null ? _a : "").trim();
+  if (!fieldName) return accumulator;
+  accumulator[fieldName] = (_b = field.defaultValue) != null ? _b : "";
+  return accumulator;
+}, {});
+var patchStudioFormFieldNode = ({
+  child,
+  formValues,
+  formErrors,
+  formDict,
+  formLoaderType,
+  fieldOnChange
+}) => {
+  var _a, _b, _c;
+  const rawChildProps = (_a = child.props) != null ? _a : {};
+  const childLayout = readNodeLayout(rawChildProps);
+  const rawLayout = rawChildProps.layout && typeof rawChildProps.layout === "object" && !Array.isArray(rawChildProps.layout) ? __spreadValues({}, rawChildProps.layout) : {};
+  const existingWrapperClassName = String((_b = rawLayout.wrapperClassName) != null ? _b : "").trim();
+  rawLayout.wrapperClassName = [existingWrapperClassName, "w-full", "max-w-full"].filter(Boolean).join(" ");
+  delete rawLayout.widthPct;
+  delete rawLayout.heightPct;
+  delete rawLayout.heightPx;
+  const fieldBasis = childLayout.widthPct !== null ? `${childLayout.widthPct}%` : "100%";
+  const nestedField = rawChildProps.field && typeof rawChildProps.field === "object" && !Array.isArray(rawChildProps.field) ? rawChildProps.field : {};
+  const fieldConfig = buildFormFieldConfig(rawChildProps, nestedField);
+  const fieldName = String((_c = fieldConfig.name) != null ? _c : "").trim();
+  const value = fieldName && fieldName in formValues ? formValues[fieldName] : rawChildProps.defaultValue;
+  const patchedFieldNode = __spreadProps(__spreadValues({}, child), {
+    props: __spreadValues(__spreadProps(__spreadValues({}, rawChildProps), {
+      layout: rawLayout,
+      field: fieldConfig,
+      value,
+      error: fieldName ? formErrors[fieldName] : void 0,
+      onChange: fieldOnChange,
+      dict: formDict
+    }), formLoaderType !== void 0 ? { loaderType: formLoaderType } : {})
+  });
+  return {
+    patchedFieldNode,
+    fieldBasis
+  };
+};
+
+// src/studio-bridge/preview-form/previewFormStructure.ts
+var DEFAULT_FORM_DICT = {
+  submit: "Submit",
+  reset: "Reset",
+  loading: "Loading...",
+  success: "Saved",
+  search: "Search...",
+  noResultToShow: "No result"
+};
+var resolveStudioFormStructure = ({
+  componentProps,
+  visibleChildren
+}) => {
+  const normalizedChildren = visibleChildren.map((child) => normalizeStudioFormChild(child));
+  const titleNode = normalizedChildren.find((child) => getStudioFormChildRole(child) === "title");
+  const fieldNodes = normalizedChildren.filter((child) => getStudioFormChildRole(child) === "field");
+  const submitNode = normalizedChildren.find((child) => getStudioFormChildRole(child) === "submit");
+  const resetNode = normalizedChildren.find((child) => getStudioFormChildRole(child) === "reset");
+  const externalChildren = normalizedChildren.filter((child) => {
+    const role = getStudioFormChildRole(child);
+    return role !== "title" && role !== "field" && role !== "submit" && role !== "reset";
+  });
+  const formValues = componentProps.values && typeof componentProps.values === "object" && !Array.isArray(componentProps.values) ? componentProps.values : {};
+  const formErrors = componentProps.errors && typeof componentProps.errors === "object" && !Array.isArray(componentProps.errors) ? componentProps.errors : {};
+  const formDict = componentProps.dict && typeof componentProps.dict === "object" && !Array.isArray(componentProps.dict) ? componentProps.dict : DEFAULT_FORM_DICT;
+  const normalizedFormFields = fieldNodes.map((child) => {
+    var _a;
+    const rawChildProps = (_a = child.props) != null ? _a : {};
+    const nestedField = rawChildProps.field && typeof rawChildProps.field === "object" && !Array.isArray(rawChildProps.field) ? rawChildProps.field : {};
+    return buildFormFieldConfig(rawChildProps, nestedField);
+  }).filter((field) => {
+    var _a;
+    return String((_a = field.name) != null ? _a : "").trim().length > 0;
+  });
+  return {
+    normalizedChildren,
+    titleNode,
+    fieldNodes,
+    submitNode,
+    resetNode,
+    externalChildren,
+    normalizedFormFields,
+    formValues,
+    formErrors,
+    formDict,
+    formLoaderType: componentProps.loaderType
+  };
+};
+
+// src/studio-bridge/preview-form/previewFormRenderer.tsx
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var materializePreviewForm = ({
+  node,
+  componentProps,
+  visibleChildren,
+  runtime,
+  onInlineTextEdit,
+  captureFieldFocus,
+  renderSafeNode: renderSafeNode2
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const {
+    titleNode,
+    fieldNodes,
+    submitNode,
+    resetNode,
+    externalChildren,
+    normalizedFormFields,
+    formValues,
+    formErrors,
+    formDict,
+    formLoaderType
+  } = resolveStudioFormStructure({
+    componentProps,
+    visibleChildren
+  });
+  if (!(fieldNodes.length > 0 || titleNode || submitNode || resetNode)) {
+    return null;
+  }
+  const validateAndSetErrors = (nextValues) => {
+    const validation = validateFormValues(normalizedFormFields, nextValues, {
+      t: runtime.t,
+      useLegacyFieldConstraints: true
+    });
+    onInlineTextEdit == null ? void 0 : onInlineTextEdit(node.id, "errors", validation.errors);
+    return validation;
+  };
+  const fieldOnChange = (event) => {
+    var _a2;
+    captureFieldFocus(event.target);
+    const fieldName = String((_a2 = event.target.name) != null ? _a2 : "").trim();
+    if (!fieldName) return;
+    const target = event.target;
+    const nextValue = target.type === "checkbox" ? Boolean(target.checked) : event.target.value;
+    const nextValues = resolveStudioFormNextValues({
+      formValues,
+      fieldName,
+      nextValue
+    });
+    onInlineTextEdit == null ? void 0 : onInlineTextEdit(node.id, "values", nextValues);
+    validateAndSetErrors(nextValues);
+  };
+  const openInlineEditorForFormDictProp = (propName, fallbackValue) => {
+    onInlineTextEdit == null ? void 0 : onInlineTextEdit(node.id, propName, fallbackValue);
+  };
+  const openInlineEditorForFormNodeProp = (targetNodeId, fallbackValue) => {
+    onInlineTextEdit == null ? void 0 : onInlineTextEdit(targetNodeId, "children", fallbackValue);
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: "mx-auto mt-10 w-full min-w-0 rounded-2xl border border-border bg-background p-6 shadow-sm", children: [
+    titleNode ? /* @__PURE__ */ jsx6("div", { className: "mb-6 text-center", children: renderSafeNode2(__spreadProps(__spreadValues({}, titleNode), {
+      type: "H3",
+      props: __spreadProps(__spreadValues({}, (_a = titleNode.props) != null ? _a : {}), {
+        className: "text-center text-2xl font-semibold text-foreground",
+        layout: __spreadProps(__spreadValues({}, getLayoutRecord(
+          (_b = titleNode.props) != null ? _b : {}
+        )), {
+          formRole: "title"
+        })
+      })
+    })) }) : /* @__PURE__ */ jsx6("h3", { className: "mb-6 text-center text-2xl font-semibold text-foreground", children: String((_c = componentProps.title) != null ? _c : "Form") }),
+    /* @__PURE__ */ jsxs2(
+      "form",
+      {
+        className: "flex flex-wrap items-start gap-x-3 gap-y-3",
+        role: "form",
+        onSubmit: (event) => {
+          event.preventDefault();
+          const validation = validateAndSetErrors(formValues);
+          if (Object.keys(validation.errors).length > 0) return;
+        },
+        children: [
+          fieldNodes.map((child) => {
+            const { patchedFieldNode, fieldBasis } = patchStudioFormFieldNode({
+              child,
+              formValues,
+              formErrors,
+              formDict,
+              formLoaderType,
+              fieldOnChange
+            });
+            return /* @__PURE__ */ jsx6("div", { className: "contents", children: /* @__PURE__ */ jsx6("div", { style: { flex: `0 0 ${fieldBasis}`, maxWidth: fieldBasis }, children: /* @__PURE__ */ jsx6("div", { className: "min-w-0", children: renderSafeNode2(patchedFieldNode) }) }) }, child.id);
+          }),
+          submitNode || resetNode ? /* @__PURE__ */ jsxs2("div", { className: "basis-full flex flex-wrap justify-end gap-3 py-4", children: [
+            submitNode ? renderSafeNode2(__spreadProps(__spreadValues({}, submitNode), {
+              props: __spreadProps(__spreadValues({}, (_d = submitNode.props) != null ? _d : {}), {
+                type: "submit",
+                onDoubleClick: (event) => {
+                  var _a2, _b2, _c2;
+                  event.preventDefault();
+                  event.stopPropagation();
+                  openInlineEditorForFormNodeProp(
+                    submitNode.id,
+                    String(
+                      (_c2 = (_b2 = (_a2 = submitNode.props) == null ? void 0 : _a2.children) != null ? _b2 : formDict.submit) != null ? _c2 : "Submit"
+                    )
+                  );
+                }
+              })
+            })) : null,
+            resetNode ? renderSafeNode2(__spreadProps(__spreadValues({}, resetNode), {
+              props: __spreadProps(__spreadValues({}, (_e = resetNode.props) != null ? _e : {}), {
+                type: "button",
+                onClick: () => {
+                  const resetValues = resolveStudioFormResetValues(normalizedFormFields);
+                  onInlineTextEdit == null ? void 0 : onInlineTextEdit(node.id, "values", resetValues);
+                  onInlineTextEdit == null ? void 0 : onInlineTextEdit(node.id, "errors", {});
+                },
+                onDoubleClick: (event) => {
+                  var _a2, _b2, _c2;
+                  event.preventDefault();
+                  event.stopPropagation();
+                  openInlineEditorForFormNodeProp(
+                    resetNode.id,
+                    String(
+                      (_c2 = (_b2 = (_a2 = resetNode.props) == null ? void 0 : _a2.children) != null ? _b2 : formDict.reset) != null ? _c2 : "Reset"
+                    )
+                  );
+                }
+              })
+            })) : null
+          ] }) : componentProps.onSubmit || componentProps.onReset ? /* @__PURE__ */ jsxs2("div", { className: "basis-full flex flex-wrap justify-end gap-3 py-4", children: [
+            componentProps.onSubmit ? /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "submit",
+                className: "inline-flex items-center justify-center rounded-md border border-primary bg-primary px-4 py-2 text-sm font-medium text-primary-foreground",
+                onDoubleClick: (event) => {
+                  var _a2;
+                  event.preventDefault();
+                  event.stopPropagation();
+                  openInlineEditorForFormDictProp("dict.submit", String((_a2 = formDict.submit) != null ? _a2 : "Submit"));
+                },
+                children: String((_f = formDict.submit) != null ? _f : "Submit")
+              }
+            ) : null,
+            componentProps.onReset ? /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                className: "inline-flex items-center justify-center rounded-md border border-border bg-background px-4 py-2 text-sm font-medium text-foreground",
+                onClick: () => {
+                  const resetValues = resolveStudioFormResetValues(normalizedFormFields);
+                  onInlineTextEdit == null ? void 0 : onInlineTextEdit(node.id, "values", resetValues);
+                  onInlineTextEdit == null ? void 0 : onInlineTextEdit(node.id, "errors", {});
+                },
+                onDoubleClick: (event) => {
+                  var _a2;
+                  event.preventDefault();
+                  event.stopPropagation();
+                  openInlineEditorForFormDictProp("dict.reset", String((_a2 = formDict.reset) != null ? _a2 : "Reset"));
+                },
+                children: String((_g = formDict.reset) != null ? _g : "Reset")
+              }
+            ) : null
+          ] }) : null,
+          externalChildren.map((child) => /* @__PURE__ */ jsx6(React.Fragment, { children: renderSafeNode2(child) }, child.id))
+        ]
+      }
+    )
+  ] });
+};
+
+// src/utils/navigationStudio.tsx
+import {
+  buildAccordionItems,
+  buildExpandablePanelChildren
+} from "@arkcit/engine-react";
+
+// src/studio-bridge/preview-navigation/previewTabs.ts
+var normalizeStudioTabsProps = (props) => {
+  var _a;
+  const rawTabs = Array.isArray(props.tabs) ? props.tabs : [];
+  const tabs = rawTabs.length ? rawTabs.map((tab, index) => {
+    var _a2, _b, _c;
+    const rawTab = tab && typeof tab === "object" && !Array.isArray(tab) ? tab : {};
+    const id = String((_a2 = rawTab.id) != null ? _a2 : `tab-${index + 1}`);
+    const title = (_c = (_b = rawTab.title) != null ? _b : rawTab.label) != null ? _c : `Tab ${index + 1}`;
+    return __spreadProps(__spreadValues({}, rawTab), {
+      id,
+      title,
+      label: title
+    });
+  }) : [
+    {
+      id: "overview",
+      title: "Overview",
+      label: "Overview",
+      content: "Overview content"
+    }
+  ];
+  const rawDict = props.dict && typeof props.dict === "object" && !Array.isArray(props.dict) ? props.dict : {};
+  const rawUrlSync = props.urlSync && typeof props.urlSync === "object" && !Array.isArray(props.urlSync) ? props.urlSync : null;
+  const rawNavigation = (rawUrlSync == null ? void 0 : rawUrlSync.navigation) && typeof rawUrlSync.navigation === "object" && !Array.isArray(rawUrlSync.navigation) ? rawUrlSync.navigation : null;
+  const normalizedUrlSync = rawNavigation && typeof rawNavigation.getSearch === "function" && typeof rawNavigation.replaceSearch === "function" ? __spreadProps(__spreadValues({}, rawUrlSync), {
+    navigation: rawNavigation
+  }) : void 0;
+  return __spreadProps(__spreadValues({}, props), {
+    tabs,
+    dict: __spreadProps(__spreadValues({}, rawDict), {
+      noContentYet: typeof rawDict.noContentYet === "string" && rawDict.noContentYet.trim().length > 0 ? rawDict.noContentYet : "No content yet"
+    }),
+    defaultActive: typeof props.defaultActive === "string" && props.defaultActive.trim().length > 0 ? props.defaultActive : String((_a = tabs[0].id) != null ? _a : "overview"),
+    keepMounted: typeof props.keepMounted === "boolean" ? props.keepMounted : true,
+    urlSync: normalizedUrlSync
+  });
+};
+var resolveStudioTabsContent = ({
+  tabItems,
+  rawChildren,
+  runtime,
+  renderChild,
+  normalizeRenderableChild: normalizeRenderableChild2
+}) => {
+  const childrenByTabId = /* @__PURE__ */ new Map();
+  const unassignedChildren = [];
+  rawChildren.forEach((child) => {
+    var _a, _b, _c;
+    const childProps = (_a = child.props) != null ? _a : {};
+    const rawLayout = childProps.layout && typeof childProps.layout === "object" && !Array.isArray(childProps.layout) ? childProps.layout : {};
+    const tabIdFromLayout = (_b = rawLayout.tabId) != null ? _b : childProps.__studioTabId;
+    const resolvedTabId = resolveUIValue(tabIdFromLayout, runtime);
+    const normalizedTabId = String(resolvedTabId != null ? resolvedTabId : "").trim();
+    if (!normalizedTabId) {
+      unassignedChildren.push(child);
+      return;
+    }
+    const existing = (_c = childrenByTabId.get(normalizedTabId)) != null ? _c : [];
+    existing.push(child);
+    childrenByTabId.set(normalizedTabId, existing);
+  });
+  return tabItems.map((item, index) => {
+    var _a, _b, _c, _d;
+    const rawId = (_a = item.id) != null ? _a : `tab-${index + 1}`;
+    const resolvedId = resolveUIValue(rawId, runtime);
+    const normalizedId = String(
+      resolvedId == null || String(resolvedId).trim().length === 0 ? rawId : resolvedId
+    );
+    const rawTitle = (_b = item.title) != null ? _b : item.label;
+    const resolvedTitle = resolveUIValue(rawTitle, runtime);
+    const normalizedTitle = (_c = resolvedTitle != null ? resolvedTitle : rawTitle) != null ? _c : `Tab ${index + 1}`;
+    const mappedChildren = (_d = childrenByTabId.get(normalizedId)) != null ? _d : [];
+    const fallbackChildren = index === 0 ? unassignedChildren : [];
+    const contentNodes = [...mappedChildren, ...fallbackChildren];
+    const contentFromChildren = contentNodes.length > 0 ? contentNodes.length === 1 ? renderChild(contentNodes[0]) : contentNodes.map((child) => renderChild(child)) : null;
+    return __spreadProps(__spreadValues({}, item), {
+      id: normalizedId,
+      title: normalizedTitle,
+      label: normalizedTitle,
+      content: contentFromChildren != null ? contentFromChildren : normalizeRenderableChild2(item.content)
+    });
+  });
+};
+var resolveStudioTabsProps = ({
+  componentProps,
+  tabItems,
+  rawChildren,
+  runtime,
+  renderChild,
+  normalizeRenderableChild: normalizeRenderableChild2
+}) => {
+  const normalizedProps = normalizeStudioTabsProps(componentProps);
+  const resolvedTabs = resolveStudioTabsContent({
+    tabItems: Array.isArray(normalizedProps.tabs) ? normalizedProps.tabs : tabItems,
+    rawChildren,
+    runtime,
+    renderChild,
+    normalizeRenderableChild: normalizeRenderableChild2
+  });
+  return {
+    normalizedProps,
+    resolvedTabs
+  };
+};
+
+// src/studio-bridge/preview-navigation/previewNavigationState.ts
+var findContainingNodeId = (targetNodeId, candidates, idResolver) => {
+  const containsNode = (candidate) => {
+    var _a;
+    if (candidate.id === targetNodeId) return true;
+    return ((_a = candidate.children) != null ? _a : []).some((nested) => containsNode(nested));
+  };
+  for (const candidate of candidates) {
+    if (containsNode(candidate)) {
+      return idResolver(candidate);
+    }
+  }
+  return null;
+};
+var resolveAccordionOpenIds = ({
+  itemIds,
+  persistedOpenIds,
+  selectedItemId,
+  allowMultiple
+}) => {
+  let effectiveOpenIds = persistedOpenIds.filter((id) => itemIds.includes(id));
+  if (selectedItemId) {
+    effectiveOpenIds = allowMultiple ? Array.from(/* @__PURE__ */ new Set([...effectiveOpenIds, selectedItemId])) : [selectedItemId];
+  } else if (effectiveOpenIds.length === 0 && itemIds[0]) {
+    effectiveOpenIds = [itemIds[0]];
+  }
+  return effectiveOpenIds;
+};
+var resolveStudioAccordionState = ({
+  nodeId,
+  accordionChildren,
+  itemIds,
+  selectedNodeId,
+  accordionOpenIdsByNodeId,
+  allowMultiple
+}) => {
+  var _a;
+  const validItemIds = new Set(itemIds);
+  const persistedOpenIds = ((_a = accordionOpenIdsByNodeId[nodeId]) != null ? _a : []).filter(
+    (id) => validItemIds.has(id)
+  );
+  const selectedItemId = selectedNodeId != null ? findContainingNodeId(
+    selectedNodeId,
+    accordionChildren,
+    (candidate) => {
+      var _a2, _b;
+      return String((_b = ((_a2 = candidate.props) != null ? _a2 : {}).id) != null ? _b : candidate.id);
+    }
+  ) : null;
+  const effectiveOpenIds = resolveAccordionOpenIds({
+    itemIds,
+    persistedOpenIds,
+    selectedItemId,
+    allowMultiple
+  });
+  return {
+    validItemIds,
+    effectiveOpenIds
+  };
+};
+var resolveStudioExpandablePanelState = ({
+  nodeId,
+  expandablePanelOpenByNodeId
+}) => {
+  var _a;
+  return {
+    controlledOpen: (_a = expandablePanelOpenByNodeId[nodeId]) != null ? _a : true,
+    defaultOpen: true,
+    disableAnimation: true
+  };
+};
+
+// src/studio-bridge/preview-navigation/previewNavigationConfigurators.tsx
+var configurePreviewAccordion = ({
+  node,
+  componentProps,
+  accordionChildren,
+  selectedNodeId,
+  accordionOpenIdsByNodeId,
+  setAccordionOpenIdsByNodeId,
+  renderSafeNode: renderSafeNode2
+}) => {
+  const items = buildAccordionItems(accordionChildren, renderSafeNode2);
+  componentProps.items = items;
+  const { validItemIds, effectiveOpenIds } = resolveStudioAccordionState({
+    nodeId: node.id,
+    accordionChildren,
+    itemIds: items.map((item) => item.id),
+    selectedNodeId,
+    accordionOpenIdsByNodeId,
+    allowMultiple: Boolean(componentProps.allowMultiple)
+  });
+  componentProps.openIds = effectiveOpenIds;
+  componentProps.defaultOpenIds = effectiveOpenIds;
+  componentProps.onOpenIdsChange = (nextOpenIds) => {
+    setAccordionOpenIdsByNodeId((previous) => __spreadProps(__spreadValues({}, previous), {
+      [node.id]: nextOpenIds.filter((id) => validItemIds.has(id))
+    }));
+  };
+};
+var configurePreviewExpandablePanel = ({
+  node,
+  componentProps,
+  panelChildren,
+  expandablePanelOpenByNodeId,
+  setExpandablePanelOpenByNodeId,
+  renderSafeNode: renderSafeNode2
+}) => {
+  const { controlledOpen, defaultOpen, disableAnimation } = resolveStudioExpandablePanelState({
+    nodeId: node.id,
+    expandablePanelOpenByNodeId
+  });
+  componentProps.open = controlledOpen;
+  componentProps.defaultOpen = defaultOpen;
+  componentProps.disableAnimation = disableAnimation;
+  componentProps.onOpenChange = (nextOpen) => {
+    setExpandablePanelOpenByNodeId((previous) => __spreadProps(__spreadValues({}, previous), {
+      [node.id]: Boolean(nextOpen)
+    }));
+  };
+  const panelContent = buildExpandablePanelChildren(panelChildren, renderSafeNode2);
+  if (panelContent) {
+    componentProps.children = panelContent;
+  }
+};
+var configurePreviewTabs = ({
+  componentProps,
+  tabItems,
+  rawChildren,
+  runtime,
+  renderSafeNode: renderSafeNode2,
+  normalizeRenderableChild: normalizeRenderableChild2
+}) => {
+  const { normalizedProps, resolvedTabs } = resolveStudioTabsProps({
+    componentProps,
+    tabItems,
+    rawChildren,
+    runtime,
+    renderChild: renderSafeNode2,
+    normalizeRenderableChild: normalizeRenderableChild2
+  });
+  Object.assign(componentProps, normalizedProps);
+  componentProps.tabs = resolvedTabs;
+  delete componentProps.children;
+};
+
+// src/studio-bridge/preview-wizard/previewWizardMaterialization.ts
+import React2 from "react";
+
+// src/studio-bridge/preview-wizard/previewWizardFormState.ts
+var resolveStudioWizardNextValues = ({
+  rawWizardValues,
+  fieldName,
+  nextValue
+}) => __spreadProps(__spreadValues({}, rawWizardValues), {
+  [fieldName]: nextValue
+});
+var resolveStudioWizardActiveStepFields = ({
+  stepId,
+  stepIdToNode
+}) => {
+  var _a;
+  const activeStepNode = stepIdToNode[stepId];
+  return ((_a = activeStepNode == null ? void 0 : activeStepNode.children) != null ? _a : []).filter((child) => child.type === "FormField").map((child) => {
+    var _a2;
+    const childProps = (_a2 = child.props) != null ? _a2 : {};
+    const childFieldObj = childProps.field && typeof childProps.field === "object" && !Array.isArray(childProps.field) ? childProps.field : {};
+    return buildWizardFieldConfig(childProps, childFieldObj);
+  }).filter((field) => {
+    var _a2;
+    return String((_a2 = field.name) != null ? _a2 : "").trim().length > 0;
+  });
+};
+var resolveStudioWizardNextErrors = ({
+  currentWizardErrors,
+  activeStepFields,
+  nextValues,
+  runtime
+}) => {
+  const validation = validateFormValues(activeStepFields, nextValues, {
+    t: runtime.t,
+    useLegacyFieldConstraints: true
+  });
+  const activeStepFieldNames = new Set(
+    activeStepFields.map((field) => {
+      var _a;
+      return String((_a = field.name) != null ? _a : "").trim();
+    }).filter(Boolean)
+  );
+  const nextErrors = Object.entries(currentWizardErrors).reduce(
+    (accumulator, [key, value]) => {
+      if (activeStepFieldNames.has(key)) return accumulator;
+      accumulator[key] = value;
+      return accumulator;
+    },
+    {}
+  );
+  Object.entries(validation.errors).forEach(([key, value]) => {
+    if (!value) return;
+    nextErrors[key] = value;
+  });
+  return nextErrors;
+};
+var patchStudioWizardFieldNode = ({
+  nested,
+  rawWizardValues,
+  currentWizardErrors,
+  fieldOnChange
+}) => {
+  var _a, _b, _c, _d, _e;
+  const nestedProps = (_a = nested.props) != null ? _a : {};
+  const fieldObj = nestedProps.field && typeof nestedProps.field === "object" && !Array.isArray(nestedProps.field) ? nestedProps.field : {};
+  const fieldName = String((_c = (_b = nestedProps.name) != null ? _b : fieldObj.name) != null ? _c : "").trim();
+  const fieldConfig = __spreadProps(__spreadValues(__spreadValues({}, fieldObj), nestedProps), {
+    name: fieldName,
+    label: String((_e = (_d = nestedProps.label) != null ? _d : fieldObj.label) != null ? _e : fieldName || "Field")
+  });
+  const patchedNode = __spreadProps(__spreadValues({}, nested), {
+    props: __spreadProps(__spreadValues({}, nestedProps), {
+      layout: (() => {
+        var _a2;
+        const rawLayout = nestedProps.layout && typeof nestedProps.layout === "object" && !Array.isArray(nestedProps.layout) ? __spreadValues({}, nestedProps.layout) : {};
+        const existingWrapperClassName = String((_a2 = rawLayout.wrapperClassName) != null ? _a2 : "").trim();
+        rawLayout.wrapperClassName = [existingWrapperClassName, "w-full", "max-w-full"].filter(Boolean).join(" ");
+        delete rawLayout.widthPct;
+        delete rawLayout.heightPct;
+        delete rawLayout.heightPx;
+        return rawLayout;
+      })(),
+      field: fieldConfig,
+      value: fieldName ? rawWizardValues[fieldName] : void 0,
+      error: fieldName ? currentWizardErrors[fieldName] : void 0,
+      onChange: fieldOnChange
+    })
+  });
+  const nestedLayout = readNodeLayout(nestedProps);
+  const fieldBasis = nestedLayout.widthPct !== null ? `${nestedLayout.widthPct}%` : "100%";
+  return {
+    patchedNode,
+    fieldBasis
+  };
+};
+
+// src/studio-bridge/preview-wizard/previewWizardMaterialization.ts
+var renderStudioWizardStepContent = ({
+  step,
+  nodeId,
+  existingFormConfig,
+  rawWizardValues,
+  stepIdToNode,
+  runtime,
+  renderSafeNode: renderSafeNode2,
+  captureFieldFocus,
+  onInlineTextEdit
+}) => {
+  if (step.contentType === "content") {
+    if (step.contentNode) {
+      return renderSafeNode2(step.contentNode);
+    }
+    return step.contentValue;
+  }
+  if (step.stepRenderableContent.length === 0) {
+    return step.contentValue;
+  }
+  return React2.createElement(
+    "div",
+    { className: "flex flex-wrap items-start gap-x-3 gap-y-3" },
+    step.stepRenderableContent.map((nested) => {
+      if (nested.type !== "FormField") {
+        return React2.createElement(
+          "div",
+          { key: nested.id, className: "basis-full" },
+          renderSafeNode2(nested)
+        );
+      }
+      const currentWizardErrors = existingFormConfig.errors && typeof existingFormConfig.errors === "object" && !Array.isArray(existingFormConfig.errors) ? existingFormConfig.errors : {};
+      const { patchedNode, fieldBasis } = patchStudioWizardFieldNode({
+        nested,
+        rawWizardValues,
+        currentWizardErrors,
+        fieldOnChange: (event) => {
+          var _a;
+          captureFieldFocus(event.target);
+          const nextFieldName = String((_a = event.target.name) != null ? _a : "").trim();
+          if (!nextFieldName) return;
+          const target = event.target;
+          const nextValue = target.type === "checkbox" ? Boolean(target.checked) : event.target.value;
+          const nextValues = resolveStudioWizardNextValues({
+            rawWizardValues,
+            fieldName: nextFieldName,
+            nextValue
+          });
+          const activeStepFields = resolveStudioWizardActiveStepFields({
+            stepId: step.id,
+            stepIdToNode
+          });
+          const nextErrors = resolveStudioWizardNextErrors({
+            currentWizardErrors,
+            activeStepFields,
+            nextValues,
+            runtime
+          });
+          onInlineTextEdit == null ? void 0 : onInlineTextEdit(nodeId, "form.values", nextValues);
+          onInlineTextEdit == null ? void 0 : onInlineTextEdit(nodeId, "form.errors", nextErrors);
+        }
+      });
+      return React2.createElement(
+        "div",
+        {
+          key: nested.id,
+          className: "min-w-0",
+          style: { flex: `0 0 ${fieldBasis}`, maxWidth: fieldBasis }
+        },
+        renderSafeNode2(patchedNode)
+      );
+    })
+  );
+};
+var materializeStudioWizardSteps = ({
+  nodeId,
+  currentSteps,
+  existingFormConfig,
+  rawWizardValues,
+  stepIdToNode,
+  runtime,
+  renderSafeNode: renderSafeNode2,
+  captureFieldFocus,
+  onInlineTextEdit
+}) => currentSteps.map((step) => ({
+  id: step.id,
+  title: step.title,
+  description: step.description,
+  titleNode: step.titleNode ? renderSafeNode2(step.titleNode) : void 0,
+  descriptionNode: step.descriptionNode ? renderSafeNode2(step.descriptionNode) : void 0,
+  isValid: step.isValid,
+  content: renderStudioWizardStepContent({
+    step,
+    nodeId,
+    currentSteps,
+    existingFormConfig,
+    rawWizardValues,
+    stepIdToNode,
+    runtime,
+    renderSafeNode: renderSafeNode2,
+    captureFieldFocus,
+    onInlineTextEdit
+  })
+}));
+
+// src/studio-bridge/preview-wizard/wizardEditingHandlers.ts
+var findWizardStepRoleNode = (stepNode, role) => {
+  var _a;
+  const nestedChildren = Array.isArray(stepNode.children) ? stepNode.children : [];
+  return (_a = nestedChildren.find((child) => {
+    var _a2, _b;
+    const childProps = (_a2 = child.props) != null ? _a2 : {};
+    return String((_b = getLayoutRecord(childProps).wizardStepRole) != null ? _b : "").trim() === role;
+  })) != null ? _a : null;
+};
+var createStudioWizardOnStepChange = ({
+  nodeId,
+  stepIdToNode,
+  setWizardActiveStepByNodeId,
+  existingOnStepChange,
+  onNodeClick
+}) => {
+  return (stepId) => {
+    setWizardActiveStepByNodeId((previous) => {
+      if (previous[nodeId] === stepId) return previous;
+      return __spreadProps(__spreadValues({}, previous), {
+        [nodeId]: stepId
+      });
+    });
+    if (typeof existingOnStepChange === "function") {
+      existingOnStepChange(stepId);
+    }
+    const stepNode = stepIdToNode[stepId];
+    if (stepNode && onNodeClick) {
+      onNodeClick(stepNode.id);
+    }
+  };
+};
+var attachStudioWizardEditingHandlers = ({
+  studioConfig,
+  node,
+  stepIdToNode,
+  openInlineEditorForNodeProp
+}) => {
+  studioConfig.onStepTitleDoubleClick = (stepId) => {
+    var _a, _b, _c, _d, _e;
+    const stepNode = stepIdToNode[stepId];
+    if (!stepNode) return;
+    const stepProps = (_a = stepNode.props) != null ? _a : {};
+    const titleNode = findWizardStepRoleNode(stepNode, "title");
+    if (titleNode) {
+      const titleNodeProps = (_b = titleNode.props) != null ? _b : {};
+      openInlineEditorForNodeProp(
+        titleNode.id,
+        "children",
+        (_d = (_c = titleNodeProps.children) != null ? _c : stepProps.title) != null ? _d : stepId
+      );
+      return;
+    }
+    openInlineEditorForNodeProp(stepNode.id, "title", (_e = stepProps.title) != null ? _e : stepId);
+  };
+  studioConfig.onStepDescriptionDoubleClick = (stepId) => {
+    var _a, _b, _c, _d, _e;
+    const stepNode = stepIdToNode[stepId];
+    if (!stepNode) return;
+    const stepProps = (_a = stepNode.props) != null ? _a : {};
+    const descriptionNode = findWizardStepRoleNode(stepNode, "description");
+    if (descriptionNode) {
+      const descriptionNodeProps = (_b = descriptionNode.props) != null ? _b : {};
+      openInlineEditorForNodeProp(
+        descriptionNode.id,
+        "children",
+        (_d = (_c = descriptionNodeProps.children) != null ? _c : stepProps.description) != null ? _d : ""
+      );
+      return;
+    }
+    openInlineEditorForNodeProp(stepNode.id, "description", (_e = stepProps.description) != null ? _e : "");
+  };
+  studioConfig.onBackLabelDoubleClick = () => {
+    var _a, _b, _c;
+    return openInlineEditorForNodeProp(
+      node.id,
+      "labels.back",
+      (_c = (_b = (_a = node.props) == null ? void 0 : _a.labels) == null ? void 0 : _b.back) != null ? _c : "Back"
+    );
+  };
+  studioConfig.onNextLabelDoubleClick = () => {
+    var _a, _b, _c;
+    return openInlineEditorForNodeProp(
+      node.id,
+      "labels.next",
+      (_c = (_b = (_a = node.props) == null ? void 0 : _a.labels) == null ? void 0 : _b.next) != null ? _c : "Next"
+    );
+  };
+  studioConfig.onFinishLabelDoubleClick = () => {
+    var _a, _b, _c;
+    return openInlineEditorForNodeProp(
+      node.id,
+      "labels.finish",
+      (_c = (_b = (_a = node.props) == null ? void 0 : _a.labels) == null ? void 0 : _b.finish) != null ? _c : "Finish"
+    );
+  };
+  return studioConfig;
+};
+
+// src/utils/wizardStudio.ts
+var getWizardStepRole = (node) => {
+  var _a, _b;
+  const props = (_a = node.props) != null ? _a : {};
+  const layout = getLayoutRecord(props);
+  return String((_b = layout.wizardStepRole) != null ? _b : "").trim();
+};
+var getWizardRenderableChildren = (nodes) => nodes.filter((nested) => {
+  const stepRole = getWizardStepRole(nested);
+  return stepRole !== "title" && stepRole !== "description";
+});
+var findSelectedWizardStepId = (stepChildren, selectedNodeId) => {
+  var _a, _b, _c;
+  if (!selectedNodeId) return null;
+  const selectedStep = stepChildren.find((stepChild) => {
+    var _a2;
+    if (stepChild.id === selectedNodeId) return true;
+    return ((_a2 = stepChild.children) != null ? _a2 : []).some((nested) => {
+      const stepRole = getWizardStepRole(nested);
+      return nested.id === selectedNodeId && (stepRole === "title" || stepRole === "description");
+    });
+  });
+  if (!selectedStep) return null;
+  const stepProps = (_a = selectedStep.props) != null ? _a : {};
+  return String((_c = (_b = stepProps.id) != null ? _b : selectedStep.id) != null ? _c : "").trim() || null;
+};
+var buildFieldsByStep = (stepIdToNode, currentSteps) => currentSteps.reduce((accumulator, step) => {
+  var _a, _b;
+  const stepId = String((_a = step.id) != null ? _a : "").trim();
+  if (!stepId) return accumulator;
+  const stepNode = stepIdToNode[stepId];
+  const stepRenderableChildren = getWizardRenderableChildren((_b = stepNode == null ? void 0 : stepNode.children) != null ? _b : []);
+  const fields = stepRenderableChildren.filter((nested) => nested.type === "FormField").map((nested) => {
+    var _a2;
+    const nestedProps = (_a2 = nested.props) != null ? _a2 : {};
+    const nestedField = nestedProps.field && typeof nestedProps.field === "object" && !Array.isArray(nestedProps.field) ? nestedProps.field : {};
+    return buildWizardFieldConfig(nestedProps, nestedField);
+  }).filter((field) => {
+    var _a2;
+    return String((_a2 = field.name) != null ? _a2 : "").trim().length > 0;
+  });
+  accumulator[stepId] = fields;
+  return accumulator;
+}, {});
+var resolveActiveWizardStepId = ({
+  selectedStepId,
+  stepIds,
+  activeStepFromProps,
+  activeStepFromMemory
+}) => {
+  var _a;
+  if (selectedStepId && stepIds.includes(selectedStepId)) return selectedStepId;
+  if (activeStepFromProps && stepIds.includes(activeStepFromProps)) {
+    return activeStepFromProps;
+  }
+  if (activeStepFromMemory && stepIds.includes(activeStepFromMemory)) {
+    return activeStepFromMemory;
+  }
+  return (_a = stepIds[0]) != null ? _a : "";
+};
+var validateWizardStepFields = ({
+  stepRenderableContent,
+  values,
+  runtime
+}) => {
+  const normalizedFields = stepRenderableContent.filter((nested) => nested.type === "FormField").map((nested) => {
+    var _a;
+    const nestedProps = (_a = nested.props) != null ? _a : {};
+    const fieldObject = nestedProps.field && typeof nestedProps.field === "object" && !Array.isArray(nestedProps.field) ? nestedProps.field : {};
+    return buildWizardFieldConfig(nestedProps, fieldObject);
+  });
+  const filteredFields = normalizedFields.filter((field) => field.name.length > 0);
+  const validation = validateFormValues(filteredFields, values, {
+    t: runtime.t,
+    useLegacyFieldConstraints: true
+  });
+  return validation.issues.length === 0;
+};
+
+// src/studio-bridge/preview-wizard/previewWizardStructure.ts
+var resolveStudioWizardStructure = ({
+  node,
+  componentProps,
+  selectedNodeId,
+  wizardActiveStepByNodeId,
+  runtime,
+  internalStudioNodeTypes
+}) => {
+  var _a, _b, _c, _d, _e, _f;
+  const existingFormConfig = componentProps.form && typeof componentProps.form === "object" && !Array.isArray(componentProps.form) ? __spreadValues({}, componentProps.form) : {};
+  const existingStudioConfig = componentProps.studio && typeof componentProps.studio === "object" && !Array.isArray(componentProps.studio) ? __spreadValues({}, componentProps.studio) : {};
+  const stepChildren = ((_a = node.children) != null ? _a : []).filter((child) => {
+    var _a2;
+    const childProps = (_a2 = child.props) != null ? _a2 : {};
+    const layout = getLayoutRecord(childProps);
+    const isWizardStepFlag = layout.wizardStep === true;
+    const isSupportedStepType = child.type === "Container" || child.type === "StepForm";
+    return isSupportedStepType && isWizardStepFlag;
+  });
+  const stepIdToNode = stepChildren.reduce(
+    (accumulator, stepChild) => {
+      var _a2, _b2, _c2;
+      const stepProps = (_a2 = stepChild.props) != null ? _a2 : {};
+      const stepId = String((_b2 = stepProps.id) != null ? _b2 : "").trim();
+      const fallbackId = String((_c2 = stepChild.id) != null ? _c2 : "").trim();
+      if (stepId) accumulator[stepId] = stepChild;
+      if (fallbackId) accumulator[fallbackId] = stepChild;
+      return accumulator;
+    },
+    {}
+  );
+  const selectedStepId = findSelectedWizardStepId(stepChildren, selectedNodeId);
+  const rawWizardValues = existingFormConfig.values && typeof existingFormConfig.values === "object" && !Array.isArray(existingFormConfig.values) ? existingFormConfig.values : {};
+  const currentSteps = stepChildren.map((stepChild) => {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g, _h, _i, _j, _k;
+    const stepProps = (_a2 = stepChild.props) != null ? _a2 : {};
+    const stepId = String((_b2 = stepProps.id) != null ? _b2 : "").trim() || stepChild.id;
+    const stepContent = ((_c2 = stepChild.children) != null ? _c2 : []).filter(
+      (nested) => !internalStudioNodeTypes.has(nested.type)
+    );
+    const stepTitleNode = stepContent.find(
+      (nested) => {
+        var _a3, _b3;
+        return String(
+          (_b3 = getLayoutRecord((_a3 = nested.props) != null ? _a3 : {}).wizardStepRole) != null ? _b3 : ""
+        ).trim() === "title";
+      }
+    );
+    const stepDescriptionNode = stepContent.find(
+      (nested) => {
+        var _a3, _b3;
+        return String(
+          (_b3 = getLayoutRecord((_a3 = nested.props) != null ? _a3 : {}).wizardStepRole) != null ? _b3 : ""
+        ).trim() === "description";
+      }
+    );
+    const stepTitleNodeValue = (_d2 = stepTitleNode == null ? void 0 : stepTitleNode.props) == null ? void 0 : _d2.children;
+    const stepDescriptionNodeValue = (_e2 = stepDescriptionNode == null ? void 0 : stepDescriptionNode.props) == null ? void 0 : _e2.children;
+    const title = resolveUIValue((_f2 = stepTitleNodeValue != null ? stepTitleNodeValue : stepProps.title) != null ? _f2 : stepId, runtime);
+    const description = resolveUIValue((_g = stepDescriptionNodeValue != null ? stepDescriptionNodeValue : stepProps.description) != null ? _g : "", runtime);
+    const rawContentType = String((_h = stepProps.contentType) != null ? _h : "content");
+    const stepRenderableContent = getWizardRenderableChildren(stepContent);
+    const hasFieldChildren = stepRenderableContent.some((nested) => {
+      var _a3, _b3;
+      if (nested.type !== "FormField") return false;
+      const nestedProps = (_a3 = nested.props) != null ? _a3 : {};
+      return String((_b3 = getLayoutRecord(nestedProps).formRole) != null ? _b3 : "field").trim() === "field";
+    });
+    const contentType = hasFieldChildren ? "form" : rawContentType;
+    const isValid = !hasFieldChildren ? stepProps.isValid !== false : validateWizardStepFields({
+      stepRenderableContent,
+      values: rawWizardValues,
+      runtime
+    });
+    const explicitContentNode = stepRenderableContent.find(
+      (nested) => {
+        var _a3;
+        return getLayoutRecord((_a3 = nested.props) != null ? _a3 : {}).wizardContent === true;
+      }
+    );
+    const contentNode = explicitContentNode != null ? explicitContentNode : contentType === "content" ? stepRenderableContent[0] : void 0;
+    return {
+      id: stepId,
+      title,
+      description,
+      titleNode: stepTitleNode,
+      descriptionNode: stepDescriptionNode,
+      contentNode,
+      isValid,
+      contentType,
+      stepRenderableContent,
+      contentValue: contentType === "content" ? resolveUIValue(
+        (_k = (_j = (_i = contentNode == null ? void 0 : contentNode.props) == null ? void 0 : _i.children) != null ? _j : stepProps.content) != null ? _k : title,
+        runtime
+      ) : null
+    };
+  });
+  const normalizedFieldsByStep = buildFieldsByStep(
+    stepIdToNode,
+    currentSteps
+  );
+  const stepIds = currentSteps.map((step) => step.id).filter(Boolean);
+  const activeStepFromMemory = String((_b = wizardActiveStepByNodeId[node.id]) != null ? _b : "").trim();
+  const activeStepFromProps = String(
+    (_f = (_e = (_c = node.props) == null ? void 0 : _c.activeStepId) != null ? _e : (_d = node.props) == null ? void 0 : _d.initialStepId) != null ? _f : ""
+  ).trim();
+  const resolvedActiveStepId = resolveActiveWizardStepId({
+    selectedStepId,
+    stepIds,
+    activeStepFromProps,
+    activeStepFromMemory
+  });
+  return {
+    stepChildren,
+    stepIdToNode,
+    selectedStepId,
+    currentSteps,
+    normalizedFieldsByStep,
+    resolvedActiveStepId,
+    existingFormConfig,
+    existingStudioConfig
+  };
+};
+
+// src/studio-bridge/preview-wizard/previewWizardConfigurator.ts
+var configurePreviewFormWizard = ({
+  node,
+  componentProps,
+  isStudioRendererContext,
+  selectedNodeId,
+  wizardActiveStepByNodeId,
+  runtime,
+  setWizardActiveStepByNodeId,
+  onNodeClick,
+  onInlineTextEdit,
+  renderSafeNode: renderSafeNode2,
+  captureFieldFocus,
+  openInlineEditorForNodeProp,
+  internalStudioNodeTypes
+}) => {
+  var _a;
+  if (isStudioRendererContext) {
+    const existingClassName = String((_a = componentProps.className) != null ? _a : "").trim();
+    componentProps.className = [
+      existingClassName,
+      "w-full",
+      "[&_[data-step-form-wrapper]>section]:max-w-full",
+      "[&_[data-step-form-wrapper]>section]:mx-0"
+    ].filter(Boolean).join(" ");
+  }
+  const {
+    existingFormConfig,
+    existingStudioConfig,
+    currentSteps,
+    normalizedFieldsByStep,
+    resolvedActiveStepId,
+    stepIdToNode
+  } = resolveStudioWizardStructure({
+    node,
+    componentProps,
+    selectedNodeId,
+    wizardActiveStepByNodeId,
+    runtime,
+    internalStudioNodeTypes
+  });
+  const rawWizardValues = existingFormConfig.values && typeof existingFormConfig.values === "object" && !Array.isArray(existingFormConfig.values) ? existingFormConfig.values : {};
+  const materializedSteps = materializeStudioWizardSteps({
+    nodeId: node.id,
+    currentSteps,
+    existingFormConfig,
+    rawWizardValues,
+    stepIdToNode,
+    runtime,
+    renderSafeNode: renderSafeNode2,
+    captureFieldFocus,
+    onInlineTextEdit
+  });
+  if (materializedSteps.length > 0) {
+    componentProps.steps = materializedSteps;
+  }
+  existingFormConfig.fieldsByStep = normalizedFieldsByStep;
+  if (resolvedActiveStepId) {
+    componentProps.activeStepId = resolvedActiveStepId;
+  }
+  componentProps.onStepChange = createStudioWizardOnStepChange({
+    nodeId: node.id,
+    stepIdToNode,
+    setWizardActiveStepByNodeId,
+    existingOnStepChange: componentProps.onStepChange,
+    onNodeClick
+  });
+  attachStudioWizardEditingHandlers({
+    studioConfig: existingStudioConfig,
+    node,
+    stepIdToNode,
+    openInlineEditorForNodeProp
+  });
+  componentProps.form = isStudioRendererContext ? void 0 : existingFormConfig;
+  componentProps.studio = existingStudioConfig;
+};
+export {
+  InlineTextEditor,
+  StudioNodeWrapper,
+  applyInlineEditingValue,
+  applyStudioOverlayComponentProps,
+  attachStudioWizardEditingHandlers,
+  buildNormalizedActionRef,
+  computeInlineEditorStyle,
+  computeMouseResizeSize,
+  computePinchResizeSize,
+  configurePreviewAccordion,
+  configurePreviewExpandablePanel,
+  configurePreviewFormWizard,
+  configurePreviewTabs,
+  createMouseResizeHandler,
+  createMouseResizeState,
+  createPinchResizeState,
+  createStudioNodeClickHandler,
+  createStudioNodeDoubleClickHandler,
+  createStudioWizardOnStepChange,
+  createTouchResizeHandlers,
+  getEditableTextValue,
+  getNodeWrapperPresentation,
+  getOpenStudioOverlayState,
+  getStudioNodeInteractionState,
+  isInteractiveSelectionTarget,
+  markSuppressStudioClick,
+  materializePreviewForm,
+  materializeStudioWizardSteps,
+  normalizeStudioTabsProps,
+  openInlineEditorFromDoubleClick,
+  patchStudioFormFieldNode,
+  patchStudioWizardFieldNode,
+  readOverlayState,
+  renderNodeFrame,
+  renderPlainWrappedNode,
+  renderSafeNode,
+  resolveButtonOverlayTarget,
+  resolveClickedNodeId,
+  resolveInlineEditingTarget,
+  resolveStudioAccordionState,
+  resolveStudioExpandablePanelState,
+  resolveStudioFormNextValues,
+  resolveStudioFormResetValues,
+  resolveStudioFormStructure,
+  resolveStudioTabsContent,
+  resolveStudioTabsProps,
+  resolveStudioWizardActiveStepFields,
+  resolveStudioWizardNextErrors,
+  resolveStudioWizardNextValues,
+  resolveStudioWizardStructure,
+  selectCandidateInlineProp,
+  selectEffectiveInlineProp,
+  shouldForceStudioNodeFullWidth,
+  shouldSuppressStudioClick,
+  shouldUseMultilineInlineEditor,
+  syncOverlayStateFromAction
+};