@open-mercato/core 0.8.1-develop.7297.1.67605e74f9 → 0.9.0

package/dist/modules/forms/backend/forms/[id]/studio/preview/PreviewSurface.js

@@ -0,0 +1,1200 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { Alert } from "@open-mercato/ui/primitives/alert";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { CheckboxField } from "@open-mercato/ui/primitives/checkbox-field";
+import { Input } from "@open-mercato/ui/primitives/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@open-mercato/ui/primitives/select";
+import { Separator } from "@open-mercato/ui/primitives/separator";
+import { SwitchField } from "@open-mercato/ui/primitives/switch-field";
+import { Tag } from "@open-mercato/ui/primitives/tag";
+import { Textarea } from "@open-mercato/ui/primitives/textarea";
+import { DatePicker } from "@open-mercato/ui/backend/inputs/DatePicker";
+import { DateTimePicker } from "@open-mercato/ui/backend/inputs/DateTimePicker";
+import { resolveLucideIcon } from "../lucide-icons.js";
+import { RankingField } from "../../../../../runner/RankingField.js";
+import { MatrixField } from "../../../../../runner/MatrixField.js";
+import { ScaleField } from "../../../../../runner/ScaleField.js";
+import {
+  COUNTRY_OPTIONS,
+  resolveCountryName
+} from "../../../../../schema/address-countries.js";
+import {
+  compileFieldValidationRules,
+  validateFieldValue
+} from "../../../../../services/field-validation-service.js";
+import {
+  partitionPages,
+  resolveFieldStyle,
+  resolveFormLabelPosition,
+  resolveFormStyle,
+  resolveFormTheme,
+  resolvePageMode,
+  resolveSectionStyle,
+  resolveSectionViews,
+  resolveShowProgress
+} from "../../../../../services/form-version-compiler.js";
+import {
+  compileFieldStyle,
+  compileFormTheme,
+  compileSectionStyle
+} from "../../../../../services/style-compiler.js";
+import { styleProps } from "../../../../../ui/public/style/applyStyle.js";
+import { LogoHeader } from "../../../../../ui/public/style/LogoHeader.js";
+import { evaluateFormLogic } from "../../../../../services/form-logic-evaluator.js";
+const SPACE_BY_DENSITY = {
+  default: "space-y-4",
+  compact: "space-y-2",
+  spacious: "space-y-6"
+};
+const GAP_BY_DENSITY = {
+  default: "gap-4",
+  compact: "gap-2",
+  spacious: "gap-6"
+};
+const COLUMNS_TO_GRID_CLASS = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4"
+};
+const SPAN_TO_CLASS = {
+  1: "col-span-1",
+  2: "col-span-2",
+  3: "col-span-3",
+  4: "col-span-4"
+};
+const ALIGN_TO_CLASS = {
+  start: "text-left",
+  center: "text-center",
+  end: "text-right"
+};
+function readPersistedSpan(value) {
+  if (value === 2 || value === 3 || value === 4) return value;
+  return 1;
+}
+function readAlign(value) {
+  return value === "center" || value === "end" ? value : "start";
+}
+const padPreview2 = (input) => String(input).padStart(2, "0");
+function parsePreviewDateOnly(value) {
+  const match = /^(\d{4})-(\d{2})-(\d{2})/.exec(value);
+  if (!match) return null;
+  const date = new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]));
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+function formatPreviewDateOnly(date) {
+  if (!date) return "";
+  return `${date.getFullYear()}-${padPreview2(date.getMonth() + 1)}-${padPreview2(date.getDate())}`;
+}
+function parsePreviewDateTimeLocal(value) {
+  const match = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/.exec(value);
+  if (!match) return null;
+  const date = new Date(
+    Number(match[1]),
+    Number(match[2]) - 1,
+    Number(match[3]),
+    Number(match[4]),
+    Number(match[5])
+  );
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+function formatPreviewDateTimeLocal(date) {
+  if (!date) return "";
+  return `${date.getFullYear()}-${padPreview2(date.getMonth() + 1)}-${padPreview2(date.getDate())}T${padPreview2(date.getHours())}:${padPreview2(date.getMinutes())}`;
+}
+function effectiveColumns(persisted, viewport) {
+  if (viewport === "mobile") return 1;
+  if (viewport === "tablet") return persisted >= 2 ? 2 : persisted;
+  return persisted;
+}
+function effectiveSpan(persisted, columns) {
+  return persisted <= columns ? persisted : columns;
+}
+function PreviewSurface({
+  schema,
+  viewport,
+  previewRole,
+  t
+}) {
+  const sections = React.useMemo(
+    () => resolveSectionViews(schema),
+    [schema]
+  );
+  const pages = React.useMemo(() => partitionPages(sections), [sections]);
+  const pageMode = resolvePageMode(schema);
+  const [answers, setAnswers] = React.useState({});
+  const logicState = React.useMemo(
+    () => evaluateFormLogic(schema, {
+      answers,
+      hidden: {},
+      locale: "en"
+    }),
+    [schema, answers]
+  );
+  const handleAnswerChange = React.useCallback((fieldKey, value) => {
+    setAnswers((current) => ({ ...current, [fieldKey]: value }));
+  }, []);
+  const isPaginated = pageMode === "paginated" && pages.length >= 1;
+  const density = resolveFormStyle(schema);
+  const persistedLabelPosition = resolveFormLabelPosition(schema);
+  const labelPosition = viewport === "mobile" ? "top" : persistedLabelPosition;
+  const showProgress = resolveShowProgress(schema);
+  const progressActive = isPaginated && pages.length >= 2 && showProgress;
+  const [activePageIndex, setActivePageIndex] = React.useState(0);
+  const [activeEndingKey, setActiveEndingKey] = React.useState(null);
+  React.useEffect(() => {
+    if (!isPaginated) return;
+    if (activePageIndex >= pages.length) {
+      setActivePageIndex(Math.max(0, pages.length - 1));
+    }
+  }, [pages.length, isPaginated, activePageIndex]);
+  React.useEffect(() => {
+    setActiveEndingKey(null);
+  }, [pages.length]);
+  const sectionsByKey = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const section of sections) map.set(section.key, section);
+    return map;
+  }, [sections]);
+  const rawSectionsByKey = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    const raw = schema["x-om-sections"];
+    if (Array.isArray(raw)) {
+      for (const entry of raw) {
+        if (entry && typeof entry === "object" && !Array.isArray(entry)) {
+          const candidate = entry;
+          if (typeof candidate.key === "string") map.set(candidate.key, candidate);
+        }
+      }
+    }
+    return map;
+  }, [schema]);
+  const formTheme = React.useMemo(
+    () => styleProps(compileFormTheme(resolveFormTheme(schema))),
+    [schema]
+  );
+  const themeLogo = React.useMemo(
+    () => resolveFormTheme(schema)?.logo,
+    [schema]
+  );
+  const renderSection = (section, pageIndex) => {
+    const columns = effectiveColumns(section.columns, viewport);
+    return /* @__PURE__ */ jsx(
+      SectionPreview,
+      {
+        section,
+        rawSection: rawSectionsByKey.get(section.key),
+        schema,
+        previewRole,
+        viewport,
+        density,
+        labelPosition,
+        renderColumns: columns,
+        pageIndex,
+        showPageChip: pages.length > 1 && !isPaginated,
+        logicState,
+        onAnswerChange: handleAnswerChange,
+        answers,
+        t
+      },
+      section.key
+    );
+  };
+  const themeStyle = formTheme.style;
+  const hasThemeBackground = typeof themeStyle.background === "string" || typeof themeStyle.backgroundImage === "string";
+  const wrapInTheme = (children) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("om-form-theme", hasThemeBackground ? "rounded-lg p-4" : void 0, formTheme.className),
+      style: formTheme.style,
+      children: [
+        themeLogo ? /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx(LogoHeader, { logo: themeLogo }) }) : null,
+        children
+      ]
+    }
+  );
+  const visibleSections = sections.filter((section) => logicState.visibleSectionKeys.has(section.key) && section.kind !== "ending");
+  const stackedBody = /* @__PURE__ */ jsxs("div", { className: SPACE_BY_DENSITY[density], children: [
+    visibleSections.map((section) => {
+      const pageIndex = pages.findIndex((page) => page.sectionKeys.includes(section.key));
+      const isFirstOfPage = pageIndex >= 0 && pages[pageIndex]?.sectionKeys[0] === section.key;
+      return renderSection(section, isFirstOfPage ? pageIndex : null);
+    }),
+    visibleSections.length === 0 ? /* @__PURE__ */ jsx("p", { className: "rounded-md border border-dashed border-border bg-muted/30 p-3 text-sm text-muted-foreground", children: t("forms.studio.canvas.empty.copy") }) : null
+  ] });
+  if (activeEndingKey) {
+    const endingSection = sections.find((entry) => entry.key === activeEndingKey);
+    if (endingSection) {
+      const title = logicState.resolveRecall(endingSection.title, "en");
+      const bodyFieldKeys = endingSection.fieldKeys;
+      return wrapInTheme(
+        /* @__PURE__ */ jsxs("div", { className: "space-y-4 rounded-lg border border-border bg-card p-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx(Tag, { variant: "neutral", dot: true, children: t("forms.studio.canvas.ending.chip") }),
+            /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: title || endingSection.key })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: bodyFieldKeys.map((fieldKey) => {
+            const node = schema.properties[fieldKey];
+            if (!node) return null;
+            const label = logicState.resolveRecall(
+              node["x-om-label"] ?? void 0,
+              "en"
+            );
+            const help = logicState.resolveRecall(
+              node["x-om-help"] ?? void 0,
+              "en"
+            );
+            return /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border bg-muted/30 p-3", children: [
+              label ? /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: label }) : null,
+              help ? /* @__PURE__ */ jsx("p", { className: "mt-1 whitespace-pre-line text-xs text-muted-foreground", children: help }) : null
+            ] }, fieldKey);
+          }) }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              onClick: () => {
+                setActiveEndingKey(null);
+                setActivePageIndex(0);
+                setAnswers({});
+              },
+              children: t("forms.runner.ending.restart")
+            }
+          )
+        ] })
+      );
+    }
+  }
+  if (!isPaginated) {
+    return wrapInTheme(stackedBody);
+  }
+  const activePage = pages[activePageIndex];
+  const activeSections = activePage ? activePage.sectionKeys.map((key) => sectionsByKey.get(key)).filter(
+    (section) => Boolean(section) && logicState.visibleSectionKeys.has(section.key) && section.kind !== "ending"
+  ) : [];
+  const isLastPage = activePageIndex >= pages.length - 1;
+  const isFirstPage = activePageIndex === 0;
+  return wrapInTheme(
+    /* @__PURE__ */ jsxs("div", { className: SPACE_BY_DENSITY[density], children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": t("forms.studio.preview.ariaLabel"), className: "flex flex-wrap gap-1", children: pages.map((page, index) => {
+          const isActive = index === activePageIndex;
+          const firstSectionKey = page.sectionKeys[0] ?? null;
+          const firstSection = firstSectionKey ? sectionsByKey.get(firstSectionKey) : null;
+          const localizedTitle = firstSection?.title?.en;
+          const tabLabel = localizedTitle && localizedTitle.length > 0 ? localizedTitle : t("forms.studio.canvas.page.chipLabel", { n: String(index + 1) });
+          return /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              role: "tab",
+              "aria-selected": isActive,
+              onClick: () => setActivePageIndex(index),
+              className: "h-auto px-3 py-1 text-xs font-medium transition-colors duration-150 " + (isActive ? "bg-muted text-foreground" : "border border-border bg-background text-muted-foreground hover:bg-muted/30"),
+              children: tabLabel
+            },
+            firstSectionKey ?? index
+          );
+        }) }),
+        progressActive ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("forms.runner.section.label", {
+          current: String(activePageIndex + 1),
+          total: String(pages.length)
+        }) }) : null
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: SPACE_BY_DENSITY[density], children: [
+        activeSections.map((section) => {
+          const isFirstOfPage = activePage?.sectionKeys[0] === section.key;
+          return renderSection(section, isFirstOfPage ? activePageIndex : null);
+        }),
+        activeSections.length === 0 ? /* @__PURE__ */ jsx("p", { className: "rounded-md border border-dashed border-border bg-muted/30 p-3 text-sm text-muted-foreground", children: t("forms.studio.canvas.empty.copy") }) : null
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            disabled: isFirstPage,
+            onClick: () => setActivePageIndex((current) => Math.max(0, current - 1)),
+            children: t("forms.studio.preview.paginated.back")
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: isLastPage ? t("forms.studio.preview.paginated.submitNote") : null }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            disabled: isLastPage,
+            onClick: () => {
+              const currentPageKey = activePage?.sectionKeys.find(
+                (key) => sectionsByKey.get(key)?.kind === "page"
+              ) ?? activePage?.sectionKeys[0];
+              if (currentPageKey) {
+                const target = logicState.nextTarget(currentPageKey);
+                if (target.type === "ending") {
+                  setActiveEndingKey(target.endingKey);
+                  return;
+                }
+                if (target.type === "page") {
+                  const pageIndex = pages.findIndex((page) => page.sectionKeys.includes(target.pageKey));
+                  if (pageIndex >= 0) {
+                    setActivePageIndex(pageIndex);
+                    return;
+                  }
+                }
+                if (target.type === "submit") {
+                  setActivePageIndex(pages.length - 1);
+                  return;
+                }
+              }
+              setActivePageIndex((current) => Math.min(pages.length - 1, current + 1));
+            },
+            children: t("forms.studio.preview.paginated.next")
+          }
+        )
+      ] })
+    ] })
+  );
+}
+function SectionPreview({
+  section,
+  rawSection,
+  schema,
+  previewRole,
+  viewport,
+  density,
+  labelPosition,
+  renderColumns,
+  pageIndex,
+  showPageChip,
+  logicState,
+  answers,
+  onAnswerChange,
+  t
+}) {
+  void answers;
+  const title = section.title?.en ?? "";
+  const sectionStyle = styleProps(
+    compileSectionStyle(rawSection ? resolveSectionStyle(rawSection) : void 0),
+    "rounded-lg border border-border bg-card p-4"
+  );
+  return /* @__PURE__ */ jsxs("section", { className: sectionStyle.className, style: sectionStyle.style, children: [
+    showPageChip && pageIndex !== null ? /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx(Tag, { variant: "neutral", dot: true, children: t("forms.studio.canvas.page.chipLabel", { n: String(pageIndex + 1) }) }) }) : null,
+    !section.hideTitle && title.length > 0 ? /* @__PURE__ */ jsx("h3", { className: "mb-3 text-sm font-semibold text-foreground", children: title }) : null,
+    section.divider ? /* @__PURE__ */ jsx(Separator, { className: "mb-3" }) : null,
+    /* @__PURE__ */ jsx("div", { className: `grid ${COLUMNS_TO_GRID_CLASS[renderColumns]} ${GAP_BY_DENSITY[density]}`, children: section.fieldKeys.map((fieldKey) => {
+      const node = schema.properties[fieldKey];
+      if (!node) return null;
+      if (!logicState.visibleFieldKeys.has(fieldKey)) return null;
+      const visibleTo = node["x-om-visible-to"] ?? Array.from(
+        /* @__PURE__ */ new Set([
+          ...node["x-om-editable-by"] ?? ["admin"],
+          "admin"
+        ])
+      );
+      if (!visibleTo.includes(previewRole)) return null;
+      const omType = String(node["x-om-type"] ?? "text");
+      const editableBy = node["x-om-editable-by"] ?? ["admin"];
+      const canEdit = editableBy.includes(previewRole);
+      const persistedSpan = readPersistedSpan(node["x-om-grid-span"]);
+      const isInfoBlock = omType === "info_block";
+      const renderSpan = isInfoBlock ? renderColumns : effectiveSpan(persistedSpan, renderColumns);
+      const align = readAlign(node["x-om-align"]);
+      const hideOnMobile = node["x-om-hide-mobile"] === true;
+      if (hideOnMobile && viewport === "mobile") return null;
+      const required = (schema.required ?? []).includes(fieldKey);
+      const fieldStyle = styleProps(compileFieldStyle(resolveFieldStyle(node)));
+      const fieldRow = /* @__PURE__ */ jsx(
+        FieldPreviewRow,
+        {
+          fieldKey,
+          node,
+          omType,
+          canEdit,
+          required,
+          renderSpan,
+          align,
+          labelPosition,
+          value: answers[fieldKey],
+          onChange: (value) => onAnswerChange(fieldKey, value),
+          logicState,
+          t
+        }
+      );
+      if (fieldStyle.className.length === 0 && Object.keys(fieldStyle.style).length === 0) {
+        return React.cloneElement(fieldRow, { key: fieldKey });
+      }
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(SPAN_TO_CLASS[renderSpan], fieldStyle.className),
+          style: fieldStyle.style,
+          children: fieldRow
+        },
+        fieldKey
+      );
+    }) })
+  ] });
+}
+function FieldPreviewRow({
+  fieldKey,
+  node,
+  omType,
+  canEdit,
+  required,
+  renderSpan,
+  align,
+  labelPosition,
+  value,
+  onChange,
+  logicState,
+  t
+}) {
+  const rawLabel = node["x-om-label"];
+  const rawHelp = node["x-om-help"];
+  const label = (rawLabel ? logicState.resolveRecall(rawLabel, "en") : "") || fieldKey;
+  const help = rawHelp ? logicState.resolveRecall(rawHelp, "en") : "";
+  if (omType === "info_block") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${SPAN_TO_CLASS[renderSpan]} ${ALIGN_TO_CLASS[align]} rounded-md border border-border bg-muted/30 p-3`,
+        children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: label }),
+          help && /* @__PURE__ */ jsx("p", { className: "mt-1 whitespace-pre-line text-xs text-muted-foreground", children: help })
+        ]
+      }
+    );
+  }
+  if (omType === "boolean" || omType === "yes_no" || omType === "yes_no_buttons") {
+    const requiredMark = required ? /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-status-error-text", "aria-hidden": "true", children: "*" }) : null;
+    const fieldLabel = /* @__PURE__ */ jsxs(Fragment, { children: [
+      label,
+      requiredMark
+    ] });
+    return /* @__PURE__ */ jsx("div", { className: `${SPAN_TO_CLASS[renderSpan]} ${ALIGN_TO_CLASS[align]}`, children: omType === "boolean" ? /* @__PURE__ */ jsx(
+      CheckboxField,
+      {
+        id: `preview-${fieldKey}`,
+        disabled: !canEdit,
+        checked: value === true,
+        onCheckedChange: (next) => onChange(next === true),
+        label: fieldLabel,
+        description: help || void 0
+      }
+    ) : omType === "yes_no" ? /* @__PURE__ */ jsx(
+      SwitchField,
+      {
+        id: `preview-${fieldKey}`,
+        disabled: !canEdit,
+        checked: value === true,
+        onCheckedChange: (next) => onChange(Boolean(next)),
+        label: fieldLabel,
+        description: help || void 0
+      }
+    ) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 text-sm font-medium text-foreground", children: fieldLabel }),
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 gap-1", role: "group", "aria-label": label, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: value === true ? "default" : "outline",
+              size: "sm",
+              "aria-pressed": value === true,
+              disabled: !canEdit,
+              onClick: () => onChange(true),
+              children: t("forms.runner.yesNo.yes", "Yes")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: value === false ? "default" : "outline",
+              size: "sm",
+              "aria-pressed": value === false,
+              disabled: !canEdit,
+              onClick: () => onChange(false),
+              children: t("forms.runner.yesNo.no", "No")
+            }
+          )
+        ] })
+      ] }),
+      help ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: help }) : null
+    ] }) });
+  }
+  const labelNode = /* @__PURE__ */ jsxs("label", { className: "block text-sm font-medium text-foreground", htmlFor: `preview-${fieldKey}`, children: [
+    label,
+    required ? /* @__PURE__ */ jsx("span", { className: "ml-1 text-status-error-text", "aria-hidden": "true", children: "*" }) : null
+  ] });
+  const helpNode = help ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: help }) : null;
+  const inputNode = /* @__PURE__ */ jsx(
+    FieldPreviewInput,
+    {
+      fieldKey,
+      node,
+      omType,
+      canEdit,
+      label,
+      value,
+      onChange,
+      t
+    }
+  );
+  const baseClass = `${SPAN_TO_CLASS[renderSpan]} ${ALIGN_TO_CLASS[align]}`;
+  if (labelPosition === "left") {
+    return /* @__PURE__ */ jsxs("div", { className: `${baseClass} flex items-start gap-3`, children: [
+      /* @__PURE__ */ jsx("div", { className: "min-w-32 pt-2", children: labelNode }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1", children: [
+        helpNode,
+        inputNode,
+        !canEdit ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("forms.runner.encrypted_label") }) : null
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `${baseClass} space-y-1`, children: [
+    labelNode,
+    helpNode,
+    inputNode
+  ] });
+}
+function FieldPreviewInput({
+  fieldKey,
+  node,
+  omType,
+  canEdit,
+  label,
+  value,
+  onChange,
+  t
+}) {
+  const id = `preview-${fieldKey}`;
+  const options = Array.isArray(node["x-om-options"]) ? node["x-om-options"].filter(
+    (entry) => typeof entry?.value === "string"
+  ) : [];
+  const optionLabel = (option) => option.label?.en ?? option.value;
+  const stringValue = typeof value === "string" ? value : value === void 0 || value === null ? "" : String(value);
+  switch (omType) {
+    case "textarea":
+      return /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          id,
+          readOnly: !canEdit,
+          rows: 3,
+          "aria-label": label,
+          value: stringValue,
+          onChange: (event) => onChange(event.target.value)
+        }
+      );
+    case "number":
+      return /* @__PURE__ */ jsx(
+        Input,
+        {
+          id,
+          readOnly: !canEdit,
+          type: "number",
+          step: "any",
+          "aria-label": label,
+          value: stringValue,
+          onChange: (event) => {
+            const next = event.target.value;
+            onChange(next === "" ? "" : Number(next));
+          }
+        }
+      );
+    case "integer":
+      return /* @__PURE__ */ jsx(
+        Input,
+        {
+          id,
+          readOnly: !canEdit,
+          type: "number",
+          step: 1,
+          "aria-label": label,
+          value: stringValue,
+          onChange: (event) => {
+            const next = event.target.value;
+            onChange(next === "" ? "" : Math.trunc(Number(next)));
+          }
+        }
+      );
+    case "date":
+      return /* @__PURE__ */ jsx(
+        DatePicker,
+        {
+          readOnly: !canEdit,
+          value: parsePreviewDateOnly(stringValue),
+          onChange: (date) => onChange(formatPreviewDateOnly(date))
+        }
+      );
+    case "datetime":
+      return /* @__PURE__ */ jsx(
+        DateTimePicker,
+        {
+          readOnly: !canEdit,
+          value: parsePreviewDateTimeLocal(stringValue),
+          onChange: (date) => onChange(formatPreviewDateTimeLocal(date))
+        }
+      );
+    case "select_one":
+      return /* @__PURE__ */ jsxs(
+        Select,
+        {
+          disabled: !canEdit,
+          value: typeof value === "string" ? value : void 0,
+          onValueChange: (next) => onChange(next),
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { id, children: /* @__PURE__ */ jsx(
+              SelectValue,
+              {
+                placeholder: options.length === 0 ? `\u2014 ${t("forms.runner.field.noOptions")} \u2014` : t("forms.runner.field.selectPlaceholder")
+              }
+            ) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: optionLabel(option) }, option.value)) })
+          ]
+        }
+      );
+    case "select_many":
+      if (options.length === 0) {
+        return /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+          "\u2014 ",
+          t("forms.runner.field.noOptions"),
+          " \u2014"
+        ] });
+      }
+      return /* @__PURE__ */ jsx("div", { className: "space-y-2.5", children: options.map((option) => {
+        const selected = Array.isArray(value) && value.includes(option.value);
+        return /* @__PURE__ */ jsx(
+          CheckboxField,
+          {
+            label: optionLabel(option),
+            disabled: !canEdit,
+            checked: selected,
+            onCheckedChange: (next) => {
+              const current = Array.isArray(value) ? [...value] : [];
+              if (next) {
+                if (!current.includes(option.value)) current.push(option.value);
+              } else {
+                const idx = current.indexOf(option.value);
+                if (idx >= 0) current.splice(idx, 1);
+              }
+              onChange(current);
+            }
+          },
+          option.value
+        );
+      }) });
+    case "scale": {
+      const minRaw = node["x-om-min"];
+      const maxRaw = node["x-om-max"];
+      const min = typeof minRaw === "number" ? minRaw : 0;
+      const max = typeof maxRaw === "number" ? maxRaw : 10;
+      const currentValue = typeof value === "number" ? value : null;
+      return /* @__PURE__ */ jsx(
+        ScaleField,
+        {
+          id,
+          min,
+          max,
+          value: currentValue,
+          onChange: (next) => onChange(next),
+          disabled: !canEdit,
+          ariaLabel: label
+        }
+      );
+    }
+    case "nps":
+      return /* @__PURE__ */ jsx(
+        NpsPreviewInput,
+        {
+          node,
+          canEdit,
+          value,
+          onChange
+        }
+      );
+    case "opinion_scale":
+      return /* @__PURE__ */ jsx(
+        OpinionScalePreviewInput,
+        {
+          node,
+          canEdit,
+          value,
+          onChange
+        }
+      );
+    case "email":
+      return /* @__PURE__ */ jsx(
+        FormatPreviewInput,
+        {
+          id,
+          format: "email",
+          inputType: "email",
+          inputMode: "email",
+          autoComplete: "email",
+          autoCapitalize: "off",
+          iconName: "mail",
+          readOnly: !canEdit,
+          label,
+          value: stringValue,
+          onChange: (next) => onChange(next),
+          node,
+          t
+        }
+      );
+    case "phone":
+      return /* @__PURE__ */ jsx(
+        FormatPreviewInput,
+        {
+          id,
+          format: "phone",
+          inputType: "tel",
+          inputMode: "tel",
+          autoComplete: "tel",
+          iconName: "phone",
+          readOnly: !canEdit,
+          label,
+          value: stringValue,
+          onChange: (next) => onChange(next),
+          node,
+          t
+        }
+      );
+    case "website":
+      return /* @__PURE__ */ jsx(
+        FormatPreviewInput,
+        {
+          id,
+          format: "website",
+          inputType: "url",
+          inputMode: "url",
+          autoCapitalize: "off",
+          iconName: "globe",
+          readOnly: !canEdit,
+          label,
+          value: stringValue,
+          onChange: (next) => onChange(next),
+          node,
+          t
+        }
+      );
+    case "address":
+      return /* @__PURE__ */ jsx(
+        AddressPreviewInput,
+        {
+          idPrefix: id,
+          canEdit,
+          value,
+          onChange,
+          t
+        }
+      );
+    case "ranking": {
+      const rankingOptions = options.map((option) => ({
+        value: option.value,
+        label: optionLabel(option)
+      }));
+      const rankingValue = Array.isArray(value) ? value.filter((entry) => typeof entry === "string") : [];
+      return /* @__PURE__ */ jsx(
+        RankingField,
+        {
+          idPrefix: id,
+          options: rankingOptions,
+          value: rankingValue,
+          onChange: (next) => onChange(next),
+          canEdit,
+          t
+        }
+      );
+    }
+    case "matrix": {
+      const rawRows = Array.isArray(node["x-om-matrix-rows"]) ? node["x-om-matrix-rows"] : [];
+      const rawColumns = Array.isArray(node["x-om-matrix-columns"]) ? node["x-om-matrix-columns"] : [];
+      return /* @__PURE__ */ jsx(
+        MatrixField,
+        {
+          idPrefix: id,
+          rows: rawRows,
+          columns: rawColumns,
+          value,
+          onChange: (next) => onChange(next),
+          locale: "en",
+          readOnly: !canEdit,
+          t
+        }
+      );
+    }
+    case "group": {
+      const groupItems = node.items;
+      const groupProps = groupItems && typeof groupItems === "object" && !Array.isArray(groupItems) ? groupItems.properties : void 0;
+      const subLabels = groupProps ? Object.values(groupProps).map((subNode) => {
+        const subLabel = subNode["x-om-label"];
+        return subLabel?.en ?? subNode["x-om-type"] ?? "\u2014";
+      }) : [];
+      return /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-dashed border-border bg-muted/30 p-3 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("p", { children: subLabels.length > 0 ? subLabels.join(" \u2014 ") : t("forms.studio.field.group.empty") }),
+        /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs", children: [
+          "+ ",
+          t("forms.studio.field.group.addSubField")
+        ] })
+      ] });
+    }
+    case "text":
+    default:
+      return /* @__PURE__ */ jsx(
+        Input,
+        {
+          id,
+          readOnly: !canEdit,
+          type: "text",
+          "aria-label": label,
+          value: stringValue,
+          onChange: (event) => onChange(event.target.value)
+        }
+      );
+  }
+}
+function FormatPreviewInput({
+  id,
+  format,
+  inputType,
+  inputMode,
+  autoComplete,
+  autoCapitalize,
+  iconName,
+  readOnly,
+  label,
+  value,
+  onChange,
+  node,
+  t
+}) {
+  const [error, setError] = React.useState(null);
+  const Icon = resolveLucideIcon(iconName);
+  const rules = React.useMemo(
+    () => compileFieldValidationRules(node, format),
+    [node, format]
+  );
+  const handleBlur = React.useCallback(() => {
+    if (!value) {
+      setError(null);
+      return;
+    }
+    const result = validateFieldValue(value, rules, "en", void 0, node);
+    if (result.valid) {
+      setError(null);
+      return;
+    }
+    if (result.rule === "format" || result.rule === "pattern") {
+      const localizedKey = format === "email" ? "forms.runner.validation.email.default" : format === "phone" ? "forms.runner.validation.phone.default" : "forms.runner.validation.website.default";
+      const localized = t(localizedKey);
+      setError(localized && localized !== localizedKey ? localized : result.message);
+      return;
+    }
+    setError(result.message);
+  }, [value, rules, format, node, t]);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        id,
+        type: inputType,
+        inputMode,
+        autoComplete,
+        autoCapitalize,
+        readOnly,
+        "aria-label": label,
+        "aria-invalid": error ? true : void 0,
+        leftIcon: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }),
+        value,
+        onChange: (event) => onChange(event.target.value),
+        onFocus: () => setError(null),
+        onBlur: handleBlur
+      }
+    ),
+    error ? /* @__PURE__ */ jsx(Alert, { status: "error", style: "light", className: "px-3 py-2 text-xs", children: error }) : null
+  ] });
+}
+function npsBandClass(entry) {
+  if (entry <= 6) {
+    return "bg-status-error-bg text-status-error-text border-status-error-border";
+  }
+  if (entry <= 8) {
+    return "bg-status-warning-bg text-status-warning-text border-status-warning-border";
+  }
+  return "bg-status-success-bg text-status-success-text border-status-success-border";
+}
+function readNpsAnchorCaption(node, anchor) {
+  const raw = node["x-om-nps-anchors"];
+  if (!raw || typeof raw !== "object" || Array.isArray(raw)) return "";
+  const target = raw[anchor];
+  if (!target || typeof target !== "object" || Array.isArray(target)) return "";
+  const map = target;
+  const en = map.en;
+  if (typeof en === "string" && en.length > 0) return en;
+  for (const value of Object.values(map)) {
+    if (typeof value === "string" && value.length > 0) return value;
+  }
+  return "";
+}
+function NpsPreviewInput({ node, canEdit, value, onChange }) {
+  const lowCaption = readNpsAnchorCaption(node, "low");
+  const highCaption = readNpsAnchorCaption(node, "high");
+  const currentValue = typeof value === "number" && Number.isInteger(value) ? value : null;
+  const entries = [];
+  for (let i = 0; i <= 10; i += 1) entries.push(i);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: entries.map((entry) => {
+      const selected = currentValue === entry;
+      const baseBand = npsBandClass(entry);
+      const ringClass = selected ? " ring-2 ring-primary" : "";
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          disabled: !canEdit,
+          onClick: () => onChange(entry),
+          "aria-pressed": selected,
+          className: "h-11 w-11 px-0 text-sm font-medium tabular-nums " + baseBand + ringClass,
+          children: entry
+        },
+        entry
+      );
+    }) }),
+    lowCaption || highCaption ? /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-xs text-muted-foreground mt-1", children: [
+      /* @__PURE__ */ jsx("span", { children: lowCaption }),
+      /* @__PURE__ */ jsx("span", { children: highCaption })
+    ] }) : null
+  ] });
+}
+function readOpinionIconChoice(node) {
+  const raw = node["x-om-opinion-icon"];
+  if (raw === "star" || raw === "thumb") return raw;
+  return "dot";
+}
+function OpinionScalePreviewInput({
+  node,
+  canEdit,
+  value,
+  onChange
+}) {
+  const icon = readOpinionIconChoice(node);
+  const minRaw = node["x-om-min"];
+  const maxRaw = node["x-om-max"];
+  const min = typeof minRaw === "number" && Number.isInteger(minRaw) ? minRaw : 1;
+  const maxResolved = typeof maxRaw === "number" && Number.isInteger(maxRaw) ? maxRaw : 5;
+  const max = maxResolved < min ? min : maxResolved;
+  const entries = [];
+  for (let i = min; i <= max; i += 1) entries.push(i);
+  const currentValue = typeof value === "number" && Number.isInteger(value) ? value : null;
+  const StarIcon = resolveLucideIcon("star");
+  const CircleIcon = resolveLucideIcon("circle");
+  const ThumbIcon = resolveLucideIcon("thumbs-up");
+  return /* @__PURE__ */ jsx("div", { className: "space-y-1", children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: entries.map((entry) => {
+    const filled = icon === "star" ? currentValue !== null && entry <= currentValue : currentValue === entry;
+    const iconClass = filled ? "fill-current text-primary" : "text-muted-foreground";
+    const IconComponent = icon === "star" ? StarIcon : icon === "thumb" ? ThumbIcon : CircleIcon;
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        disabled: !canEdit,
+        onClick: () => onChange(entry),
+        "aria-pressed": filled,
+        className: "h-11 w-11 px-0 " + (filled ? "border-primary" : "hover:border-primary"),
+        children: /* @__PURE__ */ jsx(IconComponent, { "aria-hidden": "true", className: `size-6 ${iconClass}` })
+      },
+      entry
+    );
+  }) }) });
+}
+function readAddressSubValue(value, key) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return "";
+  const entry = value[key];
+  return typeof entry === "string" ? entry : "";
+}
+function AddressPreviewInput({
+  idPrefix,
+  canEdit,
+  value,
+  onChange,
+  t
+}) {
+  const street1 = readAddressSubValue(value, "street1");
+  const street2 = readAddressSubValue(value, "street2");
+  const city = readAddressSubValue(value, "city");
+  const region = readAddressSubValue(value, "region");
+  const postalCode = readAddressSubValue(value, "postalCode");
+  const country = readAddressSubValue(value, "country");
+  const labels = {
+    street1: t("forms.studio.field.address.street1"),
+    street2: t("forms.studio.field.address.street2"),
+    city: t("forms.studio.field.address.city"),
+    region: t("forms.studio.field.address.region"),
+    postalCode: t("forms.studio.field.address.postalCode"),
+    country: t("forms.studio.field.address.country")
+  };
+  const update = (key) => (next) => {
+    const current = value && typeof value === "object" && !Array.isArray(value) ? { ...value } : {};
+    current[key] = next;
+    onChange(current);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          className: "block text-xs font-medium text-muted-foreground",
+          htmlFor: `${idPrefix}-street1`,
+          children: labels.street1
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: `${idPrefix}-street1`,
+          readOnly: !canEdit,
+          type: "text",
+          "aria-label": labels.street1,
+          value: street1,
+          onChange: (event) => update("street1")(event.target.value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          className: "block text-xs font-medium text-muted-foreground",
+          htmlFor: `${idPrefix}-street2`,
+          children: labels.street2
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: `${idPrefix}-street2`,
+          readOnly: !canEdit,
+          type: "text",
+          "aria-label": labels.street2,
+          value: street2,
+          onChange: (event) => update("street2")(event.target.value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(
+          "label",
+          {
+            className: "block text-xs font-medium text-muted-foreground",
+            htmlFor: `${idPrefix}-city`,
+            children: labels.city
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: `${idPrefix}-city`,
+            readOnly: !canEdit,
+            type: "text",
+            "aria-label": labels.city,
+            value: city,
+            onChange: (event) => update("city")(event.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(
+          "label",
+          {
+            className: "block text-xs font-medium text-muted-foreground",
+            htmlFor: `${idPrefix}-region`,
+            children: labels.region
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: `${idPrefix}-region`,
+            readOnly: !canEdit,
+            type: "text",
+            "aria-label": labels.region,
+            value: region,
+            onChange: (event) => update("region")(event.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(
+          "label",
+          {
+            className: "block text-xs font-medium text-muted-foreground",
+            htmlFor: `${idPrefix}-postalCode`,
+            children: labels.postalCode
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: `${idPrefix}-postalCode`,
+            readOnly: !canEdit,
+            type: "text",
+            "aria-label": labels.postalCode,
+            value: postalCode,
+            onChange: (event) => update("postalCode")(event.target.value)
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          className: "block text-xs font-medium text-muted-foreground",
+          htmlFor: `${idPrefix}-country`,
+          children: labels.country
+        }
+      ),
+      canEdit ? /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: country.length > 0 ? country : void 0,
+          onValueChange: (next) => update("country")(next),
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { id: `${idPrefix}-country`, "aria-label": labels.country, children: /* @__PURE__ */ jsx(SelectValue, { placeholder: labels.country }) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: COUNTRY_OPTIONS.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.code, children: option.name }, option.code)) })
+          ]
+        }
+      ) : /* @__PURE__ */ jsx(
+        "span",
+        {
+          id: `${idPrefix}-country`,
+          className: "block rounded-md border border-border bg-muted/30 px-3 py-2 text-sm text-muted-foreground",
+          "aria-label": labels.country,
+          children: country ? resolveCountryName(country) : ""
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  PreviewSurface
+};
+//# sourceMappingURL=PreviewSurface.js.map