form-page-builder 2.2.0 → 2.4.0

package/dist/index.d.cts

@@ -119,6 +119,8 @@ declare const CHROME: {
         loadingDraft: string;
         templatesLimitReached: (max: number) => string;
         templatesLimitTitle: string;
+        fieldCount: (n: number, max: number) => string;
+        fieldLimitReached: (max: number) => string;
         confirm: string;
         cancel: string;
         dismiss: string;
@@ -272,6 +274,8 @@ declare const CHROME: {
         loadingDraft: string;
         templatesLimitReached: (max: number) => string;
         templatesLimitTitle: string;
+        fieldCount: (n: number, max: number) => string;
+        fieldLimitReached: (max: number) => string;
         confirm: string;
         cancel: string;
         dismiss: string;
@@ -619,6 +623,8 @@ interface TemplateChange {
 interface FormBuilderFeatures {
     /** Editable form title input in the Toolbar. Default true. */
     naming?: boolean;
+    /** Render the form title as a heading above the fields in Preview. Default false — the host usually shows the form name in its own chrome. */
+    formTitle?: boolean;
     /**
      * Templates library. `true` (default) = full CRUD + toolbar "Save"; `false` = hidden.
      * `{ manage: false }` = pick-and-apply only (no save/overwrite/delete). `{ max }` caps the count (default 5).
@@ -698,6 +704,25 @@ declare function serializeTemplate(document: FormDocument): string;
 /** Accepts a `serializeTemplate` envelope or a bare document (e.g. "View JSON" output); `null` if not a document. */
 declare function parseTemplate(raw: string | null | undefined): DocumentFields | null;
 
+/** Current document schema version — stamped on everything persisted. */
+declare const DOCUMENT_VERSION: 5;
+
+/**
+ * Drops every field/section prop that equals its default, so persisted documents are smaller.
+ * Lossless: `migrateDocument` restores the defaults, so `migrateDocument(compactDocument(d))` equals `migrateDocument(d)`.
+ * Empty non-`en` translations are dropped too, and the result carries `compact: COMPACT_VERSION`.
+ * Extra top-level keys (`version`, `theme`, `themeOverrides`, …) pass through untouched.
+ */
+declare function compactDocument<T extends {
+    title?: unknown;
+    sections: {
+        title?: unknown;
+        fields: FormField[];
+        background?: string;
+        collapsed?: boolean;
+    }[];
+}>(doc: T): T;
+
 declare const DRAFT_KEY = "form-page-builder:draft";
 declare const INDEX_KEY = "form-page-builder:index";
 declare const formKey: (id: string) => string;
@@ -706,4 +731,4 @@ declare const savedFormId: (key: string) => string | null;
 /** Copy/paste-template scratch slot — always localStorage, never the StorageAdapter. */
 declare const CLIPBOARD_KEY = "form-page-builder:clipboard";
 
-export { CLIPBOARD_KEY, type CheckboxField, type CheckboxGroupField, type ChromeShape, type ContentBlockType, DARK_THEME, DEFAULT_THEME, DRAFT_KEY, type DocumentFields, type FieldPatch, type FieldType, FormBuilder, type FormBuilderFeatures, type FormBuilderHandle, type FormBuilderProps, type FormDocument, type FormField, type FormTemplate, INDEX_KEY, type ImageField, type InputField, type InputFieldType, type LanguageOption, type LocalizedString, type Option, type ParagraphField, type RadioField, type SavedFormMeta, type Section, type SelectField, type StorageAdapter, type StringsShape, type SubmitPayload, type SubmitStyle, type TemplateChange, type TextareaField, type Theme, type ThemeLayout, type ThemeOverrides, type ToggleField, FormBuilder as default, formKey, localStorageAdapter, parseTemplate, savedFormId, serializeTemplate };
+export { CLIPBOARD_KEY, type CheckboxField, type CheckboxGroupField, type ChromeShape, type ContentBlockType, DARK_THEME, DEFAULT_THEME, DOCUMENT_VERSION, DRAFT_KEY, type DocumentFields, type FieldPatch, type FieldType, FormBuilder, type FormBuilderFeatures, type FormBuilderHandle, type FormBuilderProps, type FormDocument, type FormField, type FormTemplate, INDEX_KEY, type ImageField, type InputField, type InputFieldType, type LanguageOption, type LocalizedString, type Option, type ParagraphField, type RadioField, type SavedFormMeta, type Section, type SelectField, type StorageAdapter, type StringsShape, type SubmitPayload, type SubmitStyle, type TemplateChange, type TextareaField, type Theme, type ThemeLayout, type ThemeOverrides, type ToggleField, compactDocument, FormBuilder as default, formKey, localStorageAdapter, parseTemplate, savedFormId, serializeTemplate };

package/dist/index.d.ts

@@ -119,6 +119,8 @@ declare const CHROME: {
         loadingDraft: string;
         templatesLimitReached: (max: number) => string;
         templatesLimitTitle: string;
+        fieldCount: (n: number, max: number) => string;
+        fieldLimitReached: (max: number) => string;
         confirm: string;
         cancel: string;
         dismiss: string;
@@ -272,6 +274,8 @@ declare const CHROME: {
         loadingDraft: string;
         templatesLimitReached: (max: number) => string;
         templatesLimitTitle: string;
+        fieldCount: (n: number, max: number) => string;
+        fieldLimitReached: (max: number) => string;
         confirm: string;
         cancel: string;
         dismiss: string;
@@ -619,6 +623,8 @@ interface TemplateChange {
 interface FormBuilderFeatures {
     /** Editable form title input in the Toolbar. Default true. */
     naming?: boolean;
+    /** Render the form title as a heading above the fields in Preview. Default false — the host usually shows the form name in its own chrome. */
+    formTitle?: boolean;
     /**
      * Templates library. `true` (default) = full CRUD + toolbar "Save"; `false` = hidden.
      * `{ manage: false }` = pick-and-apply only (no save/overwrite/delete). `{ max }` caps the count (default 5).
@@ -698,6 +704,25 @@ declare function serializeTemplate(document: FormDocument): string;
 /** Accepts a `serializeTemplate` envelope or a bare document (e.g. "View JSON" output); `null` if not a document. */
 declare function parseTemplate(raw: string | null | undefined): DocumentFields | null;
 
+/** Current document schema version — stamped on everything persisted. */
+declare const DOCUMENT_VERSION: 5;
+
+/**
+ * Drops every field/section prop that equals its default, so persisted documents are smaller.
+ * Lossless: `migrateDocument` restores the defaults, so `migrateDocument(compactDocument(d))` equals `migrateDocument(d)`.
+ * Empty non-`en` translations are dropped too, and the result carries `compact: COMPACT_VERSION`.
+ * Extra top-level keys (`version`, `theme`, `themeOverrides`, …) pass through untouched.
+ */
+declare function compactDocument<T extends {
+    title?: unknown;
+    sections: {
+        title?: unknown;
+        fields: FormField[];
+        background?: string;
+        collapsed?: boolean;
+    }[];
+}>(doc: T): T;
+
 declare const DRAFT_KEY = "form-page-builder:draft";
 declare const INDEX_KEY = "form-page-builder:index";
 declare const formKey: (id: string) => string;
@@ -706,4 +731,4 @@ declare const savedFormId: (key: string) => string | null;
 /** Copy/paste-template scratch slot — always localStorage, never the StorageAdapter. */
 declare const CLIPBOARD_KEY = "form-page-builder:clipboard";
 
-export { CLIPBOARD_KEY, type CheckboxField, type CheckboxGroupField, type ChromeShape, type ContentBlockType, DARK_THEME, DEFAULT_THEME, DRAFT_KEY, type DocumentFields, type FieldPatch, type FieldType, FormBuilder, type FormBuilderFeatures, type FormBuilderHandle, type FormBuilderProps, type FormDocument, type FormField, type FormTemplate, INDEX_KEY, type ImageField, type InputField, type InputFieldType, type LanguageOption, type LocalizedString, type Option, type ParagraphField, type RadioField, type SavedFormMeta, type Section, type SelectField, type StorageAdapter, type StringsShape, type SubmitPayload, type SubmitStyle, type TemplateChange, type TextareaField, type Theme, type ThemeLayout, type ThemeOverrides, type ToggleField, FormBuilder as default, formKey, localStorageAdapter, parseTemplate, savedFormId, serializeTemplate };
+export { CLIPBOARD_KEY, type CheckboxField, type CheckboxGroupField, type ChromeShape, type ContentBlockType, DARK_THEME, DEFAULT_THEME, DOCUMENT_VERSION, DRAFT_KEY, type DocumentFields, type FieldPatch, type FieldType, FormBuilder, type FormBuilderFeatures, type FormBuilderHandle, type FormBuilderProps, type FormDocument, type FormField, type FormTemplate, INDEX_KEY, type ImageField, type InputField, type InputFieldType, type LanguageOption, type LocalizedString, type Option, type ParagraphField, type RadioField, type SavedFormMeta, type Section, type SelectField, type StorageAdapter, type StringsShape, type SubmitPayload, type SubmitStyle, type TemplateChange, type TextareaField, type Theme, type ThemeLayout, type ThemeOverrides, type ToggleField, compactDocument, FormBuilder as default, formKey, localStorageAdapter, parseTemplate, savedFormId, serializeTemplate };

package/dist/index.js

@@ -196,6 +196,8 @@ var CHROME = {
     loadingDraft: "Loading your draft...",
     templatesLimitReached: (max) => `You can save up to ${max} template${max === 1 ? "" : "s"}. Delete one to save another.`,
     templatesLimitTitle: "Template limit reached",
+    fieldCount: (n, max) => `Fields: ${n} / ${max}`,
+    fieldLimitReached: (max) => `Field limit reached (${max}). Delete a field to add another.`,
     confirm: "Confirm",
     cancel: "Cancel",
     dismiss: "OK",
@@ -349,6 +351,8 @@ var CHROME = {
     loadingDraft: "\u4E0B\u66F8\u304D\u3092\u8AAD\u307F\u8FBC\u3093\u3067\u3044\u307E\u3059...",
     templatesLimitReached: (max) => `\u30C6\u30F3\u30D7\u30EC\u30FC\u30C8\u306F${max}\u4EF6\u307E\u3067\u4FDD\u5B58\u3067\u304D\u307E\u3059\u30021\u4EF6\u524A\u9664\u3057\u3066\u304B\u3089\u4FDD\u5B58\u3057\u3066\u304F\u3060\u3055\u3044\u3002`,
     templatesLimitTitle: "\u30C6\u30F3\u30D7\u30EC\u30FC\u30C8\u306E\u4E0A\u9650\u306B\u9054\u3057\u307E\u3057\u305F",
+    fieldCount: (n, max) => `\u9805\u76EE\u6570: ${n} / ${max}`,
+    fieldLimitReached: (max) => `\u9805\u76EE\u6570\u306E\u4E0A\u9650\uFF08${max}\u4EF6\uFF09\u306B\u9054\u3057\u307E\u3057\u305F\u3002\u8FFD\u52A0\u3059\u308B\u306B\u306F\u9805\u76EE\u3092\u524A\u9664\u3057\u3066\u304F\u3060\u3055\u3044\u3002`,
     confirm: "\u78BA\u5B9A",
     cancel: "\u30AD\u30E3\u30F3\u30BB\u30EB",
     dismiss: "OK",
@@ -558,12 +562,8 @@ function defaultSection(titleEn = "") {
   return { id: genSectionId(), title: bi(titleEn, ""), background: "", collapsed: false, fields: [] };
 }
 
-// src/lib/submittable.ts
-function sectionHasFormFields(section) {
-  return section.fields.some((f) => !getMeta(f.type).isContent);
-}
-
 // src/lib/migrate.ts
+var DOCUMENT_VERSION = 5;
 function migrateField(field) {
   let f = { ...field };
   if (LEGACY_INPUT_TYPES.includes(f.type)) f = { ...f, type: "input", inputType: f.type };
@@ -589,30 +589,21 @@ function migrateField(field) {
     f.submitScope = f.submitScope === "section" ? "section" : "form";
   }
   f.verticalAlign = f.verticalAlign || "top";
+  const meta = getMeta(f.type);
+  f.width = f.width || "1/1";
+  f.labelPosition = f.labelPosition || "top";
+  f.showIcon = !!f.showIcon;
+  f.displayIcon = f.displayIcon || meta.defaultIcon;
+  if (!meta.isContent) {
+    f.required = !!f.required;
+    if (meta.placeholder && !f.placeholder) f.placeholder = bi();
+    if (f.defaultValue === void 0) f.defaultValue = meta.boolean ? false : meta.multiValue ? [] : "";
+  }
   return f;
 }
 function migrateFields(fields) {
   return (fields || []).map(migrateField);
 }
-function synthesizeButtonField(label, style, scope) {
-  const resolvedLabel = typeof label === "string" && label ? bi(label) : label && typeof label === "object" && (label.en || label.ja) ? label : bi("Submit", "");
-  return {
-    id: nextId(),
-    type: "button",
-    label: resolvedLabel,
-    hideLabel: false,
-    width: "1/1",
-    verticalAlign: "top",
-    labelPosition: "top",
-    showIcon: false,
-    displayIcon: "Type",
-    action: "submit",
-    submitScope: scope,
-    buttonStyle: style || { color: "", size: "md" },
-    href: "",
-    target: "_self"
-  };
-}
 function migrateDocument(raw) {
   if (!raw) return null;
   const title = typeof raw.title === "string" ? bi(raw.title) : raw.title || bi();
@@ -629,25 +620,6 @@ function migrateDocument(raw) {
   } else {
     sections = [{ ...defaultSection(), fields: migrateFields(raw.fields || []) }];
   }
-  const legacy = raw.version === void 0 || raw.version < 5;
-  if (legacy) {
-    resyncIdCounter(sections.flatMap((s) => s.fields));
-    const submitMode = raw.submitMode === "perSection" ? "perSection" : "combined";
-    const submitLabel = raw.submitLabel;
-    const submitStyle = raw.submitStyle || { color: "", size: "md" };
-    if (submitMode === "perSection" && raw.sections) {
-      sections = sections.map((s, i) => {
-        if (!sectionHasFormFields(s)) return s;
-        const rawSection = raw.sections[i] || {};
-        const label = rawSection.submitLabel || submitLabel;
-        const style = rawSection.submitStyle || submitStyle;
-        return { ...s, fields: [...s.fields, synthesizeButtonField(label, style, "section")] };
-      });
-    } else if (sections.some(sectionHasFormFields)) {
-      const lastIdx = sections.length - 1;
-      sections = sections.map((s, i) => i === lastIdx ? { ...s, fields: [...s.fields, synthesizeButtonField(submitLabel, submitStyle, "form")] } : s);
-    }
-  }
   return { title, themeOverrides, sections };
 }
 
@@ -675,6 +647,7 @@ function parseTemplate(raw) {
 var DEFAULT_MAX_TEMPLATES = 5;
 var DEFAULT_FEATURES = {
   naming: true,
+  formTitle: false,
   templates: { enabled: true, manage: true, max: DEFAULT_MAX_TEMPLATES },
   templateClipboard: true,
   newForm: true,
@@ -878,7 +851,9 @@ function useFormDocument({ language, chrome }) {
       ...s,
       fields: s.fields.map((f) => {
         if (f.id !== fieldId || !("options" in f) || !f.options) return f;
-        const n = f.options.length + 1;
+        const used = new Set(f.options.map((o) => o.value));
+        let n = f.options.length + 1;
+        while (used.has(`option_${n}`)) n++;
         return { ...f, options: [...f.options, { label: withLang(bi(), language, chrome.optionSeed(n)), value: `option_${n}` }] };
       })
     })));
@@ -886,7 +861,14 @@ function useFormDocument({ language, chrome }) {
   function removeOption(fieldId, optIdx) {
     setSections((prev) => prev.map((s) => ({
       ...s,
-      fields: s.fields.map((f) => f.id !== fieldId || !("options" in f) || !f.options ? f : { ...f, options: f.options.filter((_, i) => i !== optIdx) })
+      fields: s.fields.map((f) => {
+        if (f.id !== fieldId || !("options" in f) || !f.options) return f;
+        const removed = f.options[optIdx]?.value;
+        const options = f.options.filter((_, i) => i !== optIdx);
+        if (f.type === "checkboxGroup") return { ...f, options, defaultValue: f.defaultValue.filter((v) => v !== removed) };
+        if ((f.type === "select" || f.type === "radio") && f.defaultValue === removed) return { ...f, options, defaultValue: "" };
+        return { ...f, options };
+      })
     })));
   }
   function loadDocument(doc) {
@@ -946,6 +928,51 @@ var formKey = (id) => `form-page-builder:saved:${id}`;
 var savedFormId = (key) => key.startsWith("form-page-builder:saved:") ? key.slice("form-page-builder:saved:".length) : null;
 var CLIPBOARD_KEY = "form-page-builder:clipboard";
 
+// src/lib/compact.ts
+var BASE_DEFAULTS = {
+  hideLabel: false,
+  width: "1/1",
+  verticalAlign: "top",
+  labelPosition: "top",
+  showIcon: false,
+  required: false
+};
+var COMPACT_VERSION = 1;
+var slimLocalized = (v) => v && typeof v === "object" ? Object.fromEntries(Object.entries(v).filter(([lang, s]) => lang === "en" || s !== "")) : v;
+var isEmptyLocalized = (v) => !!v && typeof v === "object" && Object.values(v).every((s) => !s);
+var isEmptyDefault = (v) => v === "" || v === false || Array.isArray(v) && v.length === 0;
+function compactField(field) {
+  const out = {};
+  const meta = getMeta(field.type);
+  for (const [key, value] of Object.entries(field)) {
+    if (key in BASE_DEFAULTS && value === BASE_DEFAULTS[key]) continue;
+    if (key === "displayIcon" && value === meta.defaultIcon) continue;
+    if (key === "placeholder" && isEmptyLocalized(value)) continue;
+    if (key === "defaultValue" && !meta.isContent && isEmptyDefault(value)) continue;
+    if (key === "label" || key === "placeholder" || key === "content" || key === "alt") out[key] = slimLocalized(value);
+    else if (key === "options" && Array.isArray(value)) out[key] = value.map((o) => ({ ...o, label: slimLocalized(o.label) }));
+    else out[key] = value;
+  }
+  return out;
+}
+function compactDocument(doc) {
+  return {
+    ...doc,
+    compact: COMPACT_VERSION,
+    ...doc.title !== void 0 ? { title: slimLocalized(doc.title) } : {},
+    sections: doc.sections.map((s) => {
+      const { background, collapsed, fields, ...rest } = s;
+      return {
+        ...rest,
+        ...s.title !== void 0 ? { title: slimLocalized(s.title) } : {},
+        ...background ? { background } : {},
+        ...collapsed ? { collapsed } : {},
+        fields: fields.map(compactField)
+      };
+    })
+  };
+}
+
 // src/hooks/usePersistence.ts
 function snapshotOf(d) {
   return JSON.stringify({ title: d.title, themeOverrides: d.themeOverrides, sections: d.sections });
@@ -1038,7 +1065,7 @@ function usePersistence({
     if (autosaveTimer.current) clearTimeout(autosaveTimer.current);
     autosaveTimer.current = setTimeout(async () => {
       try {
-        await storage.set(DRAFT_KEY, JSON.stringify({ ...document2, currentFormId }));
+        await storage.set(DRAFT_KEY, JSON.stringify({ version: DOCUMENT_VERSION, ...compactDocument(document2), currentFormId }));
         setSaveState("saved");
       } catch {
         setSaveState("error");
@@ -1061,7 +1088,7 @@ function usePersistence({
     try {
       const newTitle = bi(name, "");
       const docToSave = { ...document2, title: newTitle };
-      await storage.set(formKey(id), JSON.stringify({ ...docToSave, id, updatedAt: now }));
+      await storage.set(formKey(id), JSON.stringify({ version: DOCUMENT_VERSION, ...compactDocument(docToSave), id, updatedAt: now }));
       const next = [...savedForms, { id, title: name, updatedAt: now }];
       await storage.set(INDEX_KEY, JSON.stringify(next));
       setSavedForms(next);
@@ -1084,7 +1111,7 @@ function usePersistence({
     const now = Date.now();
     setTemplateState("saving");
     try {
-      await storage.set(formKey(currentFormId), JSON.stringify({ ...document2, id: currentFormId, updatedAt: now }));
+      await storage.set(formKey(currentFormId), JSON.stringify({ version: DOCUMENT_VERSION, ...compactDocument(document2), id: currentFormId, updatedAt: now }));
       const next = savedForms.map((f) => f.id === currentFormId ? { ...f, title: t(document2.title, "en"), updatedAt: now } : f);
       setSavedForms(next);
       await storage.set(INDEX_KEY, JSON.stringify(next));
@@ -1100,11 +1127,13 @@ function usePersistence({
     try {
       const raw = await storage.get(formKey(id));
       if (!raw) {
+        console.error(`[form-page-builder] loadForm(${id}): storage returned no data for this id`);
         setTemplateState("error");
         return false;
       }
       const doc = migrateDocument(JSON.parse(raw));
       if (!doc) {
+        console.error(`[form-page-builder] loadForm(${id}): stored data failed migrateDocument()`, raw);
         setTemplateState("error");
         return false;
       }
@@ -1116,7 +1145,8 @@ function usePersistence({
       setTemplateState("idle");
       onTemplateChange?.({ id, title: t(doc.title, language), source: "applied" });
       return true;
-    } catch {
+    } catch (err) {
+      console.error(`[form-page-builder] loadForm(${id}) threw`, err);
       setTemplateState("error");
       return false;
     }
@@ -1124,6 +1154,7 @@ function usePersistence({
   async function deleteForm(id) {
     if (!templateManage) return;
     const removed = savedForms.find((f) => f.id === id);
+    setTemplateState("loading");
     try {
       await storage.delete(formKey(id));
       const next = savedForms.filter((f) => f.id !== id);
@@ -1133,6 +1164,7 @@ function usePersistence({
         setCurrentFormId(null);
         savedSnapshot.current = null;
       }
+      setTemplateState("idle");
       onTemplateChange?.({ id: currentFormId === id ? null : id, title: removed?.title ?? "", source: "deleted" });
     } catch {
       setTemplateState("error");
@@ -1640,6 +1672,7 @@ function Palette({
       ] }),
       formTypes.length > 0 && /* @__PURE__ */ jsxs5(Fragment2, { children: [
         /* @__PURE__ */ jsx5("div", { style: { ...styles.panelHeading, marginTop: 16 }, children: chrome.formFields }),
+        typeof features.maxFields === "number" && /* @__PURE__ */ jsx5("div", { role: "status", style: { ...styles.activeSectionHint, marginBottom: 8, ...atFieldCap ? { color: "var(--fb-danger)" } : {} }, children: atFieldCap ? chrome.fieldLimitReached(features.maxFields) : chrome.fieldCount(fieldCount, features.maxFields) }),
         /* @__PURE__ */ jsx5("div", { style: styles.paletteList, children: formTypes.map((f) => {
           const Icon = f.icon;
           const itemStyle = atFieldCap ? { ...styles.paletteItem, opacity: 0.45, cursor: "not-allowed" } : styles.paletteItem;
@@ -1909,6 +1942,8 @@ function FieldTicket({
     {
       ...dropZoneHandlers,
       onClick: onSelect,
+      className: `fb-field fb-field--${field.type} fb-field--${field.id}`,
+      "data-field-id": field.id,
       style: {
         ...styles.ticket,
         flex: `1 1 calc(${widthPct} - 10px)`,
@@ -2438,16 +2473,16 @@ function PreviewPane({ title, sections, onFieldChange, language, strings, chrome
   return /* @__PURE__ */ jsxs12("div", { style: styles.previewWrap, children: [
     /* @__PURE__ */ jsxs12("div", { style: { width: "100%", maxWidth, display: "flex", flexDirection: "column", alignItems: "center" }, children: [
       features.deviceToggle && /* @__PURE__ */ jsx14("div", { style: styles.previewToolbar, children: /* @__PURE__ */ jsx14(Segmented, { options: deviceOptions, value: device, onChange: setDevice }) }),
-      /* @__PURE__ */ jsxs12("div", { style: { ...styles.previewCard, maxWidth, width: "100%" }, children: [
-        /* @__PURE__ */ jsx14("h2", { style: styles.previewTitle, children: t(title, language) }),
+      /* @__PURE__ */ jsxs12("div", { className: "fb-form", style: { ...styles.previewCard, maxWidth, width: "100%" }, children: [
+        features.formTitle && /* @__PURE__ */ jsx14("h2", { style: styles.previewTitle, children: t(title, language) }),
         allFields.length === 0 && /* @__PURE__ */ jsx14("p", { style: { color: "var(--fb-muted)", fontSize: 14 }, children: strings.addFieldsHint }),
         sections.map((section) => {
-          return /* @__PURE__ */ jsxs12("div", { style: { background: section.background || "transparent", padding: section.background ? 16 : 0, borderRadius: section.background ? 10 : 0, marginBottom: "var(--fb-space-section)" }, children: [
+          return /* @__PURE__ */ jsxs12("div", { className: "fb-section", "data-section-id": section.id, style: { background: section.background || "transparent", padding: section.background ? 16 : 0, borderRadius: section.background ? 10 : 0, marginBottom: "var(--fb-space-section)" }, children: [
             t(section.title, language) && /* @__PURE__ */ jsx14("h3", { style: styles.sectionRuntimeTitle, children: t(section.title, language) }),
             /* @__PURE__ */ jsx14("div", { style: styles.previewGrid, children: section.fields.map((field) => {
               const width = effectiveWidth(field.width, device);
               const flexBasis = `1 1 calc(${WIDTH_PERCENT[width]} - 14px)`;
-              return /* @__PURE__ */ jsxs12("div", { style: { flex: flexBasis, minWidth: 0, alignSelf: ALIGN_MAP[field.verticalAlign || "top"] }, children: [
+              return /* @__PURE__ */ jsxs12("div", { className: `fb-field fb-field--${field.type} fb-field--${field.id}`, "data-field-id": field.id, style: { flex: flexBasis, minWidth: 0, alignSelf: ALIGN_MAP[field.verticalAlign || "top"] }, children: [
                 /* @__PURE__ */ jsx14(FieldBlock, { field, lang: language, onFieldChange, strings, chrome, error: errors[field.id], onButtonAction: handleButtonAction }),
                 field.type === "button" && field.id === attemptedButtonId && Object.keys(errors).length > 0 && /* @__PURE__ */ jsxs12("p", { style: styles.formErrorNote, children: [
                   /* @__PURE__ */ jsx14(CircleAlert2, { size: 13 }),
@@ -2742,7 +2777,7 @@ var FormBuilder = forwardRef(function FormBuilder2({
     ensureActiveSection: () => doc.setActiveSectionId((prev) => prev ?? doc.sections[0]?.id ?? null)
   });
   const jsonDoc = useMemo2(() => ({
-    version: 5,
+    version: DOCUMENT_VERSION,
     title: doc.title,
     theme,
     themeOverrides,
@@ -3019,9 +3054,11 @@ export {
   CLIPBOARD_KEY,
   DARK_THEME,
   DEFAULT_THEME,
+  DOCUMENT_VERSION,
   DRAFT_KEY,
   FormBuilder_default as FormBuilder,
   INDEX_KEY,
+  compactDocument,
   FormBuilder_default as default,
   formKey,
   localStorageAdapter,