form-page-builder 2.0.0 → 2.1.0

package/dist/index.d.cts

@@ -592,6 +592,10 @@ interface FormBuilderFeatures {
     sections?: boolean;
     /** Drag-to-reorder fields within a section. Default true. */
     dragReorder?: boolean;
+    /** Laptop/Tablet/Mobile width switcher above the Preview canvas. Default true. */
+    deviceToggle?: boolean;
+    /** Caps the number of input-type fields (not content blocks) addable across the whole document. Default undefined (unlimited). */
+    maxFields?: number;
 }
 interface FormBuilderProps {
     theme?: Partial<Theme>;
@@ -605,6 +609,10 @@ interface FormBuilderProps {
     onSubmit?: (payload: SubmitPayload) => void;
     /** Seeds the builder with this document on mount instead of the autosaved draft — e.g. a template fetched from your own backend. */
     initialDocument?: FormDocument;
+    /** Which mode the widget mounts into. Default "build". Pair with `features.previewMode: false` to lock a consumer to just one mode with no tabs. */
+    initialMode?: "build" | "preview";
+    /** Fires on mount and on every Build/Preview toggle — lets a host mirror the current mode without its own tab UI. */
+    onModeChange?: (mode: "build" | "preview") => void;
 }
 
 declare const FormBuilder: react.ForwardRefExoticComponent<FormBuilderProps & react.RefAttributes<FormBuilderHandle>>;

package/dist/index.d.ts

@@ -592,6 +592,10 @@ interface FormBuilderFeatures {
     sections?: boolean;
     /** Drag-to-reorder fields within a section. Default true. */
     dragReorder?: boolean;
+    /** Laptop/Tablet/Mobile width switcher above the Preview canvas. Default true. */
+    deviceToggle?: boolean;
+    /** Caps the number of input-type fields (not content blocks) addable across the whole document. Default undefined (unlimited). */
+    maxFields?: number;
 }
 interface FormBuilderProps {
     theme?: Partial<Theme>;
@@ -605,6 +609,10 @@ interface FormBuilderProps {
     onSubmit?: (payload: SubmitPayload) => void;
     /** Seeds the builder with this document on mount instead of the autosaved draft — e.g. a template fetched from your own backend. */
     initialDocument?: FormDocument;
+    /** Which mode the widget mounts into. Default "build". Pair with `features.previewMode: false` to lock a consumer to just one mode with no tabs. */
+    initialMode?: "build" | "preview";
+    /** Fires on mount and on every Build/Preview toggle — lets a host mirror the current mode without its own tab UI. */
+    onModeChange?: (mode: "build" | "preview") => void;
 }
 
 declare const FormBuilder: react.ForwardRefExoticComponent<FormBuilderProps & react.RefAttributes<FormBuilderHandle>>;

package/dist/index.js

@@ -1,9 +1,70 @@
 "use client";
 
 // src/FormBuilder.tsx
-import { forwardRef, useImperativeHandle, useState as useState8 } from "react";
+import { forwardRef, useEffect as useEffect2, useImperativeHandle, useState as useState8 } from "react";
 import { Loader2 as Loader22, Menu, SlidersHorizontal } from "lucide-react";
 
+// src/constants/fieldTypes.ts
+import {
+  Type,
+  AlignLeft,
+  ChevronDown,
+  Circle,
+  ListChecks,
+  CheckSquare,
+  ToggleLeft,
+  FileText,
+  Image as ImageIcon,
+  MousePointerClick
+} from "lucide-react";
+var FIELD_TYPES = [
+  { type: "paragraph", icon: FileText, isContent: true, defaultIcon: "FileText" },
+  { type: "image", icon: ImageIcon, isContent: true, isImage: true, defaultIcon: "Type" },
+  { type: "button", icon: MousePointerClick, isContent: true, defaultIcon: "Type" },
+  { type: "input", icon: Type, placeholder: true, hasSubtype: true, defaultIcon: "Type" },
+  { type: "textarea", icon: AlignLeft, placeholder: true, defaultIcon: "AlignLeft" },
+  { type: "select", icon: ChevronDown, options: true, defaultIcon: "ChevronDown" },
+  { type: "radio", icon: Circle, options: true, defaultIcon: "Circle" },
+  { type: "checkboxGroup", icon: ListChecks, options: true, multiValue: true, defaultIcon: "ListChecks" },
+  { type: "checkbox", icon: CheckSquare, boolean: true, defaultIcon: "CheckSquare" },
+  { type: "toggle", icon: 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" },
@@ -391,67 +452,6 @@ var localStorageAdapter = {
   }
 };
 
-// src/constants/fieldTypes.ts
-import {
-  Type,
-  AlignLeft,
-  ChevronDown,
-  Circle,
-  ListChecks,
-  CheckSquare,
-  ToggleLeft,
-  FileText,
-  Image as ImageIcon,
-  MousePointerClick
-} from "lucide-react";
-var FIELD_TYPES = [
-  { type: "paragraph", icon: FileText, isContent: true, defaultIcon: "FileText" },
-  { type: "image", icon: ImageIcon, isContent: true, isImage: true, defaultIcon: "Type" },
-  { type: "button", icon: MousePointerClick, isContent: true, defaultIcon: "Type" },
-  { type: "input", icon: Type, placeholder: true, hasSubtype: true, defaultIcon: "Type" },
-  { type: "textarea", icon: AlignLeft, placeholder: true, defaultIcon: "AlignLeft" },
-  { type: "select", icon: ChevronDown, options: true, defaultIcon: "ChevronDown" },
-  { type: "radio", icon: Circle, options: true, defaultIcon: "Circle" },
-  { type: "checkboxGroup", icon: ListChecks, options: true, multiValue: true, defaultIcon: "ListChecks" },
-  { type: "checkbox", icon: CheckSquare, boolean: true, defaultIcon: "CheckSquare" },
-  { type: "toggle", icon: 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)}`;
@@ -629,7 +629,8 @@ var DEFAULT_FEATURES = {
   contentBlocks: true,
   fieldTypes: true,
   sections: true,
-  dragReorder: true
+  dragReorder: true,
+  deviceToggle: true
 };
 function resolveFeatures(features) {
   return {
@@ -1393,11 +1394,13 @@ function Palette({
   theme,
   updateThemeColor,
   updateThemeLayout,
-  resetTheme
+  resetTheme,
+  fieldCount
 }) {
   const [tab, setTab] = useState5("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__ */ jsxs5("div", { className: "fb-palette", style: styles.palette, children: [
     features.design && /* @__PURE__ */ jsx5("div", { style: { marginBottom: 14 }, children: /* @__PURE__ */ jsx5(
       Segmented,
@@ -1440,7 +1443,8 @@ function Palette({
         /* @__PURE__ */ jsx5("div", { style: { ...styles.panelHeading, marginTop: 16 }, children: chrome.formFields }),
         /* @__PURE__ */ jsx5("div", { style: styles.paletteList, children: formTypes.map((f) => {
           const Icon = f.icon;
-          return /* @__PURE__ */ jsxs5("button", { style: styles.paletteItem, onClick: () => onAddField(f.type), children: [
+          const itemStyle = atFieldCap ? { ...styles.paletteItem, opacity: 0.45, cursor: "not-allowed" } : styles.paletteItem;
+          return /* @__PURE__ */ jsxs5("button", { type: "button", disabled: atFieldCap, style: itemStyle, onClick: () => onAddField(f.type), children: [
             /* @__PURE__ */ jsx5(Icon, { size: 16, color: "var(--fb-primary)" }),
             /* @__PURE__ */ jsx5("span", { children: chrome[FIELD_TYPE_CHROME_KEY[f.type]] }),
             /* @__PURE__ */ jsx5(Plus, { size: 13, color: "var(--fb-muted)", style: { marginLeft: "auto" } })
@@ -2171,7 +2175,7 @@ function collectFieldValues(fields) {
 
 // src/components/PreviewPane.tsx
 import { jsx as jsx14, jsxs as jsxs12 } from "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] = useState6("laptop");
   const [errors, setErrors] = useState6({});
   const [submitted, setSubmitted] = useState6(null);
@@ -2234,7 +2238,7 @@ 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: [
-      /* @__PURE__ */ jsx14("div", { style: styles.previewToolbar, children: /* @__PURE__ */ jsx14(Segmented, { options: deviceOptions, value: device, onChange: setDevice }) }),
+      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) }),
         allFields.length === 0 && /* @__PURE__ */ jsx14("p", { style: { color: "var(--fb-muted)", fontSize: 14 }, children: strings.addFieldsHint }),
@@ -2405,7 +2409,9 @@ var FormBuilder = forwardRef(function FormBuilder2({
   features: featuresProp,
   storage: storageProp,
   onSubmit,
-  initialDocument
+  initialDocument,
+  initialMode,
+  onModeChange
 }, ref) {
   const features = resolveFeatures(featuresProp);
   const storage = storageProp ?? localStorageAdapter;
@@ -2415,7 +2421,14 @@ var FormBuilder = 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] = useState8("build");
+  const [mode, setModeState] = useState8(initialMode ?? "build");
+  const setMode = (next) => {
+    setModeState(next);
+    onModeChange?.(next);
+  };
+  useEffect2(() => {
+    onModeChange?.(mode);
+  }, []);
   const [showJson, setShowJson] = useState8(false);
   const [showLibrary, setShowLibrary] = useState8(false);
   const [copied, setCopied] = useState8(false);
@@ -2462,6 +2475,7 @@ var FormBuilder = 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 = {
@@ -2553,6 +2567,7 @@ var FormBuilder = forwardRef(function FormBuilder2({
               setMobilePanel("none");
             },
             features,
+            fieldCount,
             theme,
             updateThemeColor,
             updateThemeLayout,
@@ -2616,6 +2631,7 @@ var FormBuilder = forwardRef(function FormBuilder2({
         strings,
         chrome,
         baseMaxWidth: theme.layout.maxWidth,
+        features,
         onSubmit
       }
     ),