form-page-builder 2.2.0 → 2.3.0

package/dist/index.d.cts

@@ -619,6 +619,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 +700,9 @@ 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;
+
 declare const DRAFT_KEY = "form-page-builder:draft";
 declare const INDEX_KEY = "form-page-builder:index";
 declare const formKey: (id: string) => string;
@@ -706,4 +711,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, FormBuilder as default, formKey, localStorageAdapter, parseTemplate, savedFormId, serializeTemplate };

package/dist/index.d.ts

@@ -619,6 +619,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 +700,9 @@ 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;
+
 declare const DRAFT_KEY = "form-page-builder:draft";
 declare const INDEX_KEY = "form-page-builder:index";
 declare const formKey: (id: string) => string;
@@ -706,4 +711,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, FormBuilder as default, formKey, localStorageAdapter, parseTemplate, savedFormId, serializeTemplate };

package/dist/index.js

@@ -558,12 +558,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 };
@@ -594,25 +590,6 @@ function migrateField(field) {
 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 +606,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 +633,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,
@@ -1038,7 +997,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, ...document2, currentFormId }));
         setSaveState("saved");
       } catch {
         setSaveState("error");
@@ -1061,7 +1020,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, ...docToSave, id, updatedAt: now }));
       const next = [...savedForms, { id, title: name, updatedAt: now }];
       await storage.set(INDEX_KEY, JSON.stringify(next));
       setSavedForms(next);
@@ -1084,7 +1043,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, ...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));
@@ -1909,6 +1868,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 +2399,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 +2703,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,6 +2980,7 @@ export {
   CLIPBOARD_KEY,
   DARK_THEME,
   DEFAULT_THEME,
+  DOCUMENT_VERSION,
   DRAFT_KEY,
   FormBuilder_default as FormBuilder,
   INDEX_KEY,