form-page-builder 2.3.0 → 2.4.0

package/README.md

@@ -123,7 +123,7 @@ Every optional UI surface can be switched on or off independently through one `f
 | `sectionBackground` | `boolean` | inherits `sections` | Per-section background-color swatches + custom-color picker in the section header. Independent of `sections` — set it `false` to lock section backgrounds while keeping the structural controls, or leave it unset and it follows whatever `sections` is. |
 | `dragReorder` | `boolean` | `true` | Drag-to-reorder fields within a section. |
 | `deviceToggle` | `boolean` | `true` | The Laptop/Tablet/Mobile width switcher above the Preview canvas. When `false`, Preview always renders at the Laptop (full) width. |
-| `maxFields` | `number` | `undefined` (unlimited) | Caps the total number of input-type fields (not content blocks) addable across the whole document. Once reached, the Form Fields palette buttons disable until a field is removed. |
+| `maxFields` | `number` | `undefined` (unlimited) | Caps the total number of input-type fields (not content blocks) addable across the whole document. The palette shows a live "Fields: n / max" count; once reached, the Form Fields buttons disable and a limit message replaces the count until a field is removed. |
 
 Disabling `contentBlocks`/`fieldTypes` for a given type only hides it from the palette going forward — if a document loaded via `initialDocument` (or a saved template) already contains fields of a now-disabled type, they still render and remain editable in Build mode; nothing is stripped or hidden.
 
@@ -273,6 +273,20 @@ const json = serializeTemplate(ref.current.getDocument());
 const doc = parseTemplate(json);               // also accepts bare "View JSON" output; null if not a document
 ```
 
+### Smaller stored documents
+
+Drafts and saved templates written through `storage` are compacted automatically: props equal to their default (`hideLabel`, `width`, `verticalAlign`, `labelPosition`, `showIcon`, `required`, the type's default icon, empty placeholders/default values, empty non-`en` translations) are omitted and the document is stamped `compact: 1`. Loading restores them, so older full documents still load unchanged.
+
+`getDocument()` still returns the full document. If you store it yourself, compact it first:
+
+```tsx
+import { compactDocument } from "form-page-builder";
+
+await save(JSON.stringify(compactDocument(ref.current.getDocument())));
+```
+
+Documents saved in the compact form need this package version (or newer) to be read back correctly, so upgrade every app that reads them together.
+
 ## Using in a plain HTML page (no bundler)
 
 There's intentionally no UMD/IIFE global-script build (see below), but you don't need a bundler to use this package — a browser-native ES module setup works too, via an [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) and a CDN like [esm.sh](https://esm.sh/):

package/dist/index.cjs

@@ -28,6 +28,7 @@ __export(index_exports, {
   DRAFT_KEY: () => DRAFT_KEY,
   FormBuilder: () => FormBuilder_default,
   INDEX_KEY: () => INDEX_KEY,
+  compactDocument: () => compactDocument,
   default: () => FormBuilder_default,
   formKey: () => formKey,
   localStorageAdapter: () => localStorageAdapter,
@@ -222,6 +223,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",
@@ -375,6 +378,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",
@@ -611,6 +616,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) {
@@ -863,7 +878,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}` }] };
       })
     })));
@@ -871,7 +888,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) {
@@ -931,6 +955,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 });
@@ -1023,7 +1092,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");
@@ -1046,7 +1115,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);
@@ -1069,7 +1138,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));
@@ -1085,11 +1154,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;
       }
@@ -1101,7 +1172,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;
     }
@@ -1109,6 +1181,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);
@@ -1118,6 +1191,7 @@ function usePersistence({
         setCurrentFormId(null);
         savedSnapshot.current = null;
       }
+      setTemplateState("idle");
       onTemplateChange?.({ id: currentFormId === id ? null : id, title: removed?.title ?? "", source: "deleted" });
     } catch {
       setTemplateState("error");
@@ -1625,6 +1699,7 @@ function Palette({
       ] }),
       formTypes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { ...styles.panelHeading, marginTop: 16 }, children: chrome.formFields }),
+        typeof features.maxFields === "number" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsx)("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;
@@ -2987,6 +3062,7 @@ var DARK_THEME = {
   DRAFT_KEY,
   FormBuilder,
   INDEX_KEY,
+  compactDocument,
   formKey,
   localStorageAdapter,
   parseTemplate,