form-page-builder 2.3.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;
@@ -703,6 +707,22 @@ declare function parseTemplate(raw: string | null | undefined): DocumentFields |
 /** 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;
@@ -711,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, 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 };
+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;
@@ -703,6 +707,22 @@ declare function parseTemplate(raw: string | null | undefined): DocumentFields |
 /** 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;
@@ -711,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, 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 };
+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",
@@ -585,6 +589,16 @@ 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) {
@@ -837,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}` }] };
       })
     })));
@@ -845,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) {
@@ -905,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 });
@@ -997,7 +1065,7 @@ function usePersistence({
     if (autosaveTimer.current) clearTimeout(autosaveTimer.current);
     autosaveTimer.current = setTimeout(async () => {
       try {
-        await storage.set(DRAFT_KEY, JSON.stringify({ version: DOCUMENT_VERSION, ...document2, currentFormId }));
+        await storage.set(DRAFT_KEY, JSON.stringify({ version: DOCUMENT_VERSION, ...compactDocument(document2), currentFormId }));
         setSaveState("saved");
       } catch {
         setSaveState("error");
@@ -1020,7 +1088,7 @@ function usePersistence({
     try {
       const newTitle = bi(name, "");
       const docToSave = { ...document2, title: newTitle };
-      await storage.set(formKey(id), JSON.stringify({ version: DOCUMENT_VERSION, ...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);
@@ -1043,7 +1111,7 @@ function usePersistence({
     const now = Date.now();
     setTemplateState("saving");
     try {
-      await storage.set(formKey(currentFormId), JSON.stringify({ version: DOCUMENT_VERSION, ...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));
@@ -1059,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;
       }
@@ -1075,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;
     }
@@ -1083,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);
@@ -1092,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");
@@ -1599,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;
@@ -2984,6 +3058,7 @@ export {
   DRAFT_KEY,
   FormBuilder_default as FormBuilder,
   INDEX_KEY,
+  compactDocument,
   FormBuilder_default as default,
   formKey,
   localStorageAdapter,