form-page-builder 2.2.0 → 2.3.0

package/README.md

@@ -107,6 +107,7 @@ Every optional UI surface can be switched on or off independently through one `f
 | Key | Type | Default | Controls |
 |---|---|---|---|
 | `naming` | `boolean` | `true` | The editable form-title input in the toolbar. |
+| `formTitle` | `boolean` | `false` | Renders the form title as an `<h2>` heading above the fields in Preview. Off by default — the host app usually shows the form's name in its own chrome, so leave this off to avoid a duplicate. |
 | `templates` | `boolean \| { manage?: boolean; max?: number }` | `true` | The Templates library and the "Save" button. `true` = full library (browse / apply / save / overwrite / delete). `false` = no template UI. `{ manage: false }` = pick-and-apply only: the library lists templates and the user can apply one as a starting point, but can't create, overwrite, or delete them and the "Save" button is hidden. `{ max: n }` caps how many templates can be stored (default 5). |
 | `newForm` | `boolean` | `true` | The "New Form" reset button. |
 | `autosave` | `boolean` | `true` | Autosaving the draft to `storage`. The initial draft *load* always happens regardless — this only gates the write path. |
@@ -126,6 +127,20 @@ Every optional UI surface can be switched on or off independently through one `f
 
 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.
 
+### Styling hooks
+
+The widget styles itself with inline styles and CSS custom properties (see theming below), but the rendered form also carries stable, rule-free class names so a host stylesheet can target it:
+
+| Class | On |
+|---|---|
+| `.fb-form` | The Preview form container. |
+| `.fb-section` | Each section wrapper (also `data-section-id`). |
+| `.fb-field` | Every field wrapper, in Preview and on the Build canvas (also `data-field-id`). |
+| `.fb-field--<type>` | Same wrapper, by field type — `fb-field--input`, `fb-field--select`, `fb-field--button`, … |
+| `.fb-field--<id>` | Same wrapper, by field id (`fb-field--field_1`). Field ids are sequential (`field_1`, `field_2`, …) and stable across reloads. |
+
+These are additive hooks only — the package ships no rules for them, so anything you write wins without `!important`.
+
 ### Features vs. theming
 
 `features` and `theme` are separate, composable concerns: `features.design` decides whether the Design tab's color/spacing *controls* are shown at all, while `theme` (and the Design tab, when shown) decide what those colors/spacing values *are*. You can, for instance, pass a fixed `theme` with `features.design` and `features.blockStyling` both `false` to lock a form to your brand's colors with zero styling UI exposed to the builder's user.

package/dist/index.cjs

@@ -24,6 +24,7 @@ __export(index_exports, {
   CLIPBOARD_KEY: () => CLIPBOARD_KEY,
   DARK_THEME: () => DARK_THEME,
   DEFAULT_THEME: () => DEFAULT_THEME,
+  DOCUMENT_VERSION: () => DOCUMENT_VERSION,
   DRAFT_KEY: () => DRAFT_KEY,
   FormBuilder: () => FormBuilder_default,
   INDEX_KEY: () => INDEX_KEY,
@@ -583,12 +584,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 };
@@ -619,25 +616,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();
@@ -654,25 +632,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 };
 }
 
@@ -700,6 +659,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,
@@ -1063,7 +1023,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");
@@ -1086,7 +1046,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);
@@ -1109,7 +1069,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));
@@ -1910,6 +1870,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)`,
@@ -2439,16 +2401,16 @@ function PreviewPane({ title, sections, onFieldChange, language, strings, chrome
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: styles.previewWrap, children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { width: "100%", maxWidth, display: "flex", flexDirection: "column", alignItems: "center" }, children: [
       features.deviceToggle && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: styles.previewToolbar, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Segmented, { options: deviceOptions, value: device, onChange: setDevice }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { ...styles.previewCard, maxWidth, width: "100%" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h2", { style: styles.previewTitle, children: t(title, language) }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "fb-form", style: { ...styles.previewCard, maxWidth, width: "100%" }, children: [
+        features.formTitle && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h2", { style: styles.previewTitle, children: t(title, language) }),
         allFields.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { style: { color: "var(--fb-muted)", fontSize: 14 }, children: strings.addFieldsHint }),
         sections.map((section) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { background: section.background || "transparent", padding: section.background ? 16 : 0, borderRadius: section.background ? 10 : 0, marginBottom: "var(--fb-space-section)" }, children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("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__ */ (0, import_jsx_runtime14.jsx)("h3", { style: styles.sectionRuntimeTitle, children: t(section.title, language) }),
             /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("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__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { flex: flexBasis, minWidth: 0, alignSelf: ALIGN_MAP[field.verticalAlign || "top"] }, children: [
+              return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("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__ */ (0, import_jsx_runtime14.jsx)(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__ */ (0, import_jsx_runtime14.jsxs)("p", { style: styles.formErrorNote, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react14.CircleAlert, { size: 13 }),
@@ -2743,7 +2705,7 @@ var FormBuilder = (0, import_react10.forwardRef)(function FormBuilder2({
     ensureActiveSection: () => doc.setActiveSectionId((prev) => prev ?? doc.sections[0]?.id ?? null)
   });
   const jsonDoc = (0, import_react10.useMemo)(() => ({
-    version: 5,
+    version: DOCUMENT_VERSION,
     title: doc.title,
     theme,
     themeOverrides,
@@ -3021,6 +2983,7 @@ var DARK_THEME = {
   CLIPBOARD_KEY,
   DARK_THEME,
   DEFAULT_THEME,
+  DOCUMENT_VERSION,
   DRAFT_KEY,
   FormBuilder,
   INDEX_KEY,