form-page-builder 2.0.0 → 2.1.0

package/README.md

@@ -70,6 +70,8 @@ Above ~720px wide, Build mode is the usual three-column Palette/Canvas/Inspector
 | `storage` | `StorageAdapter` | Pluggable persistence backend for the builder's own draft/Templates library — see below. |
 | `onSubmit` | `(payload: SubmitPayload) => void` | Called when Preview mode's Submit button is clicked and validation passes — see below. |
 | `initialDocument` | `FormDocument` | Seeds the builder with this document on mount instead of the autosaved draft — see "Programmatic integration" below. |
+| `initialMode` | `"build" \| "preview"` | Which mode the widget mounts into (default `"build"`). Pair with `features.previewMode: false` to lock a consumer to just one mode with no tabs — e.g. a fill-only embed that never shows the Build canvas. Or leave `previewMode` on and pick `initialMode` per document (e.g. `"preview"` once a document already has saved data) so the widget opens on the right mode while still letting the built-in tabs switch it. |
+| `onModeChange` | `(mode: "build" \| "preview") => void` | Fires on mount and on every Build/Preview toggle. Lets a host mirror the current mode (e.g. to show its own Save button only in Build mode) without building a separate tab UI around the widget. |
 
 A `ref` on `<FormBuilder />` gives you a `FormBuilderHandle` (`getDocument()` / `loadDocument()` / `exportJson()`) — see "Programmatic integration" below.
 
@@ -106,7 +108,7 @@ Every optional UI surface can be switched on or off independently through one `f
 | `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. |
 | `jsonView` | `boolean` | `true` | The "View JSON" button and modal. |
-| `previewMode` | `boolean` | `true` | The Build/Preview tabs. When `false`, the builder stays in Build mode and the tabs are hidden. |
+| `previewMode` | `boolean` | `true` | The Build/Preview tabs. When `false`, the tabs are hidden and the builder stays in whichever mode it started in (`initialMode`, Build by default). |
 | `languageSwitcher` | `boolean` | `true` | The language-switcher pill in the toolbar. |
 | `design` | `boolean` | `false` | The global "Design" tab (colors/spacing), i.e. the old `themeEditable` prop. |
 | `blockStyling` | `boolean` | `true` | Per-field styling controls: paragraph heading/font/color, button color — independent of `design`. |
@@ -114,6 +116,8 @@ Every optional UI surface can be switched on or off independently through one `f
 | `fieldTypes` | `boolean \| ("input" \| "textarea" \| "select" \| "radio" \| "checkboxGroup" \| "checkbox" \| "toggle")[]` | `true` | Which form field types can be *added* from the palette. `true` = all, `false` = none, or an allowlist. |
 | `sections` | `boolean` | `true` | Add/duplicate/move/delete-section controls and the section background picker. |
 | `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. |
 
 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.
 

package/dist/index.cjs

@@ -33,6 +33,56 @@ module.exports = __toCommonJS(index_exports);
 var import_react8 = require("react");
 var import_lucide_react18 = require("lucide-react");
 
+// src/constants/fieldTypes.ts
+var import_lucide_react = require("lucide-react");
+var FIELD_TYPES = [
+  { type: "paragraph", icon: import_lucide_react.FileText, isContent: true, defaultIcon: "FileText" },
+  { type: "image", icon: import_lucide_react.Image, isContent: true, isImage: true, defaultIcon: "Type" },
+  { type: "button", icon: import_lucide_react.MousePointerClick, isContent: true, defaultIcon: "Type" },
+  { type: "input", icon: import_lucide_react.Type, placeholder: true, hasSubtype: true, defaultIcon: "Type" },
+  { type: "textarea", icon: import_lucide_react.AlignLeft, placeholder: true, defaultIcon: "AlignLeft" },
+  { type: "select", icon: import_lucide_react.ChevronDown, options: true, defaultIcon: "ChevronDown" },
+  { type: "radio", icon: import_lucide_react.Circle, options: true, defaultIcon: "Circle" },
+  { type: "checkboxGroup", icon: import_lucide_react.ListChecks, options: true, multiValue: true, defaultIcon: "ListChecks" },
+  { type: "checkbox", icon: import_lucide_react.CheckSquare, boolean: true, defaultIcon: "CheckSquare" },
+  { type: "toggle", icon: import_lucide_react.ToggleLeft, boolean: true, defaultIcon: "ToggleLeft" }
+];
+var TYPE_MAP = Object.fromEntries(FIELD_TYPES.map((f) => [f.type, f]));
+var CONTENT_TYPES = FIELD_TYPES.filter((f) => f.isContent);
+var FORM_TYPES = FIELD_TYPES.filter((f) => !f.isContent);
+function getMeta(type) {
+  return TYPE_MAP[type] || TYPE_MAP.input;
+}
+var LEGACY_INPUT_TYPES = ["text", "email", "phone", "number", "password", "date"];
+var INPUT_SUBTYPES = ["text", "email", "phone", "number", "password", "date", "time"];
+var IMAGE_SHAPES = ["square", "circle", "banner"];
+var FIELD_TYPE_CHROME_KEY = {
+  paragraph: "fieldTypeParagraph",
+  image: "fieldTypeImage",
+  button: "fieldTypeButton",
+  input: "fieldTypeInput",
+  textarea: "fieldTypeTextarea",
+  select: "fieldTypeSelect",
+  radio: "fieldTypeRadio",
+  checkboxGroup: "fieldTypeCheckboxGroup",
+  checkbox: "fieldTypeCheckbox",
+  toggle: "fieldTypeToggle"
+};
+var INPUT_SUBTYPE_CHROME_KEY = {
+  text: "subtypeText",
+  email: "subtypeEmail",
+  phone: "subtypePhone",
+  number: "subtypeNumber",
+  password: "subtypePassword",
+  date: "subtypeDate",
+  time: "subtypeTime"
+};
+var IMAGE_SHAPE_CHROME_KEY = {
+  square: "shapeSquare",
+  circle: "shapeCircle",
+  banner: "shapeBanner"
+};
+
 // src/i18n/languages.ts
 var DEFAULT_LANGUAGES = [
   { code: "en", label: "EN" },
@@ -420,56 +470,6 @@ var localStorageAdapter = {
   }
 };
 
-// src/constants/fieldTypes.ts
-var import_lucide_react = require("lucide-react");
-var FIELD_TYPES = [
-  { type: "paragraph", icon: import_lucide_react.FileText, isContent: true, defaultIcon: "FileText" },
-  { type: "image", icon: import_lucide_react.Image, isContent: true, isImage: true, defaultIcon: "Type" },
-  { type: "button", icon: import_lucide_react.MousePointerClick, isContent: true, defaultIcon: "Type" },
-  { type: "input", icon: import_lucide_react.Type, placeholder: true, hasSubtype: true, defaultIcon: "Type" },
-  { type: "textarea", icon: import_lucide_react.AlignLeft, placeholder: true, defaultIcon: "AlignLeft" },
-  { type: "select", icon: import_lucide_react.ChevronDown, options: true, defaultIcon: "ChevronDown" },
-  { type: "radio", icon: import_lucide_react.Circle, options: true, defaultIcon: "Circle" },
-  { type: "checkboxGroup", icon: import_lucide_react.ListChecks, options: true, multiValue: true, defaultIcon: "ListChecks" },
-  { type: "checkbox", icon: import_lucide_react.CheckSquare, boolean: true, defaultIcon: "CheckSquare" },
-  { type: "toggle", icon: import_lucide_react.ToggleLeft, boolean: true, defaultIcon: "ToggleLeft" }
-];
-var TYPE_MAP = Object.fromEntries(FIELD_TYPES.map((f) => [f.type, f]));
-var CONTENT_TYPES = FIELD_TYPES.filter((f) => f.isContent);
-var FORM_TYPES = FIELD_TYPES.filter((f) => !f.isContent);
-function getMeta(type) {
-  return TYPE_MAP[type] || TYPE_MAP.input;
-}
-var LEGACY_INPUT_TYPES = ["text", "email", "phone", "number", "password", "date"];
-var INPUT_SUBTYPES = ["text", "email", "phone", "number", "password", "date", "time"];
-var IMAGE_SHAPES = ["square", "circle", "banner"];
-var FIELD_TYPE_CHROME_KEY = {
-  paragraph: "fieldTypeParagraph",
-  image: "fieldTypeImage",
-  button: "fieldTypeButton",
-  input: "fieldTypeInput",
-  textarea: "fieldTypeTextarea",
-  select: "fieldTypeSelect",
-  radio: "fieldTypeRadio",
-  checkboxGroup: "fieldTypeCheckboxGroup",
-  checkbox: "fieldTypeCheckbox",
-  toggle: "fieldTypeToggle"
-};
-var INPUT_SUBTYPE_CHROME_KEY = {
-  text: "subtypeText",
-  email: "subtypeEmail",
-  phone: "subtypePhone",
-  number: "subtypeNumber",
-  password: "subtypePassword",
-  date: "subtypeDate",
-  time: "subtypeTime"
-};
-var IMAGE_SHAPE_CHROME_KEY = {
-  square: "shapeSquare",
-  circle: "shapeCircle",
-  banner: "shapeBanner"
-};
-
 // src/lib/id.ts
 var genFormId = () => `form_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 7)}`;
 var genSectionId = () => `section_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 7)}`;
@@ -647,7 +647,8 @@ var DEFAULT_FEATURES = {
   contentBlocks: true,
   fieldTypes: true,
   sections: true,
-  dragReorder: true
+  dragReorder: true,
+  deviceToggle: true
 };
 function resolveFeatures(features) {
   return {
@@ -1411,11 +1412,13 @@ function Palette({
   theme,
   updateThemeColor,
   updateThemeLayout,
-  resetTheme
+  resetTheme,
+  fieldCount
 }) {
   const [tab, setTab] = (0, import_react5.useState)("blocks");
   const contentTypes = CONTENT_TYPES.filter((f) => isContentBlockEnabled(features, f.type));
   const formTypes = FORM_TYPES.filter((f) => isFieldTypeEnabled(features, f.type));
+  const atFieldCap = typeof features.maxFields === "number" && fieldCount >= features.maxFields;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "fb-palette", style: styles.palette, children: [
     features.design && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { marginBottom: 14 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       Segmented,
@@ -1458,7 +1461,8 @@ function Palette({
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { ...styles.panelHeading, marginTop: 16 }, children: chrome.formFields }),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles.paletteList, children: formTypes.map((f) => {
           const Icon = f.icon;
-          return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("button", { style: styles.paletteItem, onClick: () => onAddField(f.type), children: [
+          const itemStyle = atFieldCap ? { ...styles.paletteItem, opacity: 0.45, cursor: "not-allowed" } : styles.paletteItem;
+          return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("button", { type: "button", disabled: atFieldCap, style: itemStyle, onClick: () => onAddField(f.type), children: [
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { size: 16, color: "var(--fb-primary)" }),
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: chrome[FIELD_TYPE_CHROME_KEY[f.type]] }),
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react5.Plus, { size: 13, color: "var(--fb-muted)", style: { marginLeft: "auto" } })
@@ -2165,7 +2169,7 @@ function collectFieldValues(fields) {
 
 // src/components/PreviewPane.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
-function PreviewPane({ title, sections, onFieldChange, language, strings, chrome, baseMaxWidth, onSubmit }) {
+function PreviewPane({ title, sections, onFieldChange, language, strings, chrome, baseMaxWidth, features, onSubmit }) {
   const [device, setDevice] = (0, import_react6.useState)("laptop");
   const [errors, setErrors] = (0, import_react6.useState)({});
   const [submitted, setSubmitted] = (0, import_react6.useState)(null);
@@ -2228,7 +2232,7 @@ 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: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: styles.previewToolbar, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Segmented, { options: deviceOptions, value: device, onChange: setDevice }) }),
+      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) }),
         allFields.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { style: { color: "var(--fb-muted)", fontSize: 14 }, children: strings.addFieldsHint }),
@@ -2399,7 +2403,9 @@ var FormBuilder = (0, import_react8.forwardRef)(function FormBuilder2({
   features: featuresProp,
   storage: storageProp,
   onSubmit,
-  initialDocument
+  initialDocument,
+  initialMode,
+  onModeChange
 }, ref) {
   const features = resolveFeatures(featuresProp);
   const storage = storageProp ?? localStorageAdapter;
@@ -2409,7 +2415,14 @@ var FormBuilder = (0, import_react8.forwardRef)(function FormBuilder2({
   const chrome = { ...CHROME[language] || CHROME.en, ...chromeOverride && chromeOverride[language] || {} };
   const doc = useFormDocument({ language, chrome });
   const drag = useDragReorder(doc.reorderWithinSection);
-  const [mode, setMode] = (0, import_react8.useState)("build");
+  const [mode, setModeState] = (0, import_react8.useState)(initialMode ?? "build");
+  const setMode = (next) => {
+    setModeState(next);
+    onModeChange?.(next);
+  };
+  (0, import_react8.useEffect)(() => {
+    onModeChange?.(mode);
+  }, []);
   const [showJson, setShowJson] = (0, import_react8.useState)(false);
   const [showLibrary, setShowLibrary] = (0, import_react8.useState)(false);
   const [copied, setCopied] = (0, import_react8.useState)(false);
@@ -2456,6 +2469,7 @@ var FormBuilder = (0, import_react8.forwardRef)(function FormBuilder2({
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }), [jsonDoc, jsonString]);
+  const fieldCount = doc.sections.reduce((n, s) => n + s.fields.filter((f) => !getMeta(f.type).isContent).length, 0);
   const activeSectionIdx = doc.sections.findIndex((s) => s.id === doc.activeSection?.id);
   const activeSectionLabel = t(doc.activeSection?.title, language) || `#${activeSectionIdx + 1}`;
   const rootStyle = {
@@ -2547,6 +2561,7 @@ var FormBuilder = (0, import_react8.forwardRef)(function FormBuilder2({
               setMobilePanel("none");
             },
             features,
+            fieldCount,
             theme,
             updateThemeColor,
             updateThemeLayout,
@@ -2610,6 +2625,7 @@ var FormBuilder = (0, import_react8.forwardRef)(function FormBuilder2({
         strings,
         chrome,
         baseMaxWidth: theme.layout.maxWidth,
+        features,
         onSubmit
       }
     ),