@arkcit/engine 0.3.0

package/dist/preview/index.js

@@ -0,0 +1,1514 @@
+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/preview/react/index.ts
+import {
+  configurePreviewLinkBehavior,
+  materializeBoundTable,
+  resolveBoundTableData
+} 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/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/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, jsxs } from "react/jsx-runtime";
+var materializePreviewForm = ({
+  node,
+  componentProps,
+  visibleChildren,
+  runtime,
+  onInlineTextEdit,
+  captureFieldFocus,
+  renderSafeNode
+}) => {
+  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__ */ jsxs("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__ */ jsx("div", { className: "mb-6 text-center", children: renderSafeNode(__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__ */ jsx("h3", { className: "mb-6 text-center text-2xl font-semibold text-foreground", children: String((_c = componentProps.title) != null ? _c : "Form") }),
+    /* @__PURE__ */ jsxs(
+      "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__ */ jsx("div", { className: "contents", children: /* @__PURE__ */ jsx("div", { style: { flex: `0 0 ${fieldBasis}`, maxWidth: fieldBasis }, children: /* @__PURE__ */ jsx("div", { className: "min-w-0", children: renderSafeNode(patchedFieldNode) }) }) }, child.id);
+          }),
+          submitNode || resetNode ? /* @__PURE__ */ jsxs("div", { className: "basis-full flex flex-wrap justify-end gap-3 py-4", children: [
+            submitNode ? renderSafeNode(__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 ? renderSafeNode(__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__ */ jsxs("div", { className: "basis-full flex flex-wrap justify-end gap-3 py-4", children: [
+            componentProps.onSubmit ? /* @__PURE__ */ jsx(
+              "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__ */ jsx(
+              "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__ */ jsx(React.Fragment, { children: renderSafeNode(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
+}) => {
+  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 : normalizeRenderableChild(item.content)
+    });
+  });
+};
+var resolveStudioTabsProps = ({
+  componentProps,
+  tabItems,
+  rawChildren,
+  runtime,
+  renderChild,
+  normalizeRenderableChild
+}) => {
+  const normalizedProps = normalizeStudioTabsProps(componentProps);
+  const resolvedTabs = resolveStudioTabsContent({
+    tabItems: Array.isArray(normalizedProps.tabs) ? normalizedProps.tabs : tabItems,
+    rawChildren,
+    runtime,
+    renderChild,
+    normalizeRenderableChild
+  });
+  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
+}) => {
+  const items = buildAccordionItems(accordionChildren, renderSafeNode);
+  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
+}) => {
+  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, renderSafeNode);
+  if (panelContent) {
+    componentProps.children = panelContent;
+  }
+};
+var configurePreviewTabs = ({
+  componentProps,
+  tabItems,
+  rawChildren,
+  runtime,
+  renderSafeNode,
+  normalizeRenderableChild
+}) => {
+  const { normalizedProps, resolvedTabs } = resolveStudioTabsProps({
+    componentProps,
+    tabItems,
+    rawChildren,
+    runtime,
+    renderChild: renderSafeNode,
+    normalizeRenderableChild
+  });
+  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,
+  captureFieldFocus,
+  onInlineTextEdit
+}) => {
+  if (step.contentType === "content") {
+    if (step.contentNode) {
+      return renderSafeNode(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" },
+          renderSafeNode(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 }
+        },
+        renderSafeNode(patchedNode)
+      );
+    })
+  );
+};
+var materializeStudioWizardSteps = ({
+  nodeId,
+  currentSteps,
+  existingFormConfig,
+  rawWizardValues,
+  stepIdToNode,
+  runtime,
+  renderSafeNode,
+  captureFieldFocus,
+  onInlineTextEdit
+}) => currentSteps.map((step) => ({
+  id: step.id,
+  title: step.title,
+  description: step.description,
+  titleNode: step.titleNode ? renderSafeNode(step.titleNode) : void 0,
+  descriptionNode: step.descriptionNode ? renderSafeNode(step.descriptionNode) : void 0,
+  isValid: step.isValid,
+  content: renderStudioWizardStepContent({
+    step,
+    nodeId,
+    currentSteps,
+    existingFormConfig,
+    rawWizardValues,
+    stepIdToNode,
+    runtime,
+    renderSafeNode,
+    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,
+  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,
+    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 {
+  configurePreviewAccordion,
+  configurePreviewExpandablePanel,
+  configurePreviewFormWizard,
+  configurePreviewLinkBehavior,
+  configurePreviewTabs,
+  materializeBoundTable,
+  materializePreviewForm,
+  resolveBoundTableData
+};