form-page-builder 0.1.0 → 2.0.0

package/dist/index.js

@@ -1,8 +1,8 @@
 "use client";
 
 // src/FormBuilder.tsx
-import { useState as useState8 } from "react";
-import { Loader2 as Loader22 } from "lucide-react";
+import { forwardRef, useImperativeHandle, useState as useState8 } from "react";
+import { Loader2 as Loader22, Menu, SlidersHorizontal } from "lucide-react";
 
 // src/i18n/languages.ts
 var DEFAULT_LANGUAGES = [
@@ -50,6 +50,8 @@ var CHROME = {
     contentBlocks: "Content",
     formFields: "Form Fields",
     addingTo: "Adding to",
+    paletteTabBlocks: "Blocks",
+    paletteTabDesign: "Design",
     properties: "Properties",
     selectFieldHint: "Select a field to edit its properties.",
     label: "Label",
@@ -95,15 +97,15 @@ var CHROME = {
     build: "Build",
     preview: "Preview",
     newForm: "New",
-    myForms: "My forms",
+    templates: "Templates",
     save: "Save",
     viewJson: "View JSON",
     saving: "Saving...",
     saved: "Saved",
     saveFailed: "Save failed",
     startNewForm: "Start a new form",
-    openSavedForm: "Open a saved form",
-    saveToLibraryTitle: "Save this form to your library",
+    openTemplatesTitle: "Open a saved template",
+    saveToLibraryTitle: "Save this form as a template",
     sectionTitlePlaceholder: (n) => `Section ${n} title (optional)`,
     noFieldsInSection: "No fields in this section yet \u2014 pick a field type on the left.",
     addSection: "Add section",
@@ -116,22 +118,17 @@ var CHROME = {
     formJson: "Form JSON",
     copy: "Copy",
     copied: "Copied",
-    nothingSaved: 'Nothing saved yet. Click "Save" in the toolbar to store this form here.',
+    noTemplates: 'No templates saved yet. Click "Save" in the toolbar to store this form here.',
     updated: "Updated",
     open: "Open",
-    saveForm: "Save form",
-    formName: "Form name",
-    saveToLibrary: "Save to library",
+    saveForm: "Save as template",
+    formName: "Template name",
+    saveToLibrary: "Save template",
     loadingDraft: "Loading your draft...",
+    templatesLimitReached: "You can save up to 5 templates. Delete one to save another.",
     current: "current",
     customColor: "Custom color",
     fieldsCount: (n) => `${n} field${n === 1 ? "" : "s"}`,
-    formSettings: "Form settings",
-    submitLabel: "Submit button text",
-    submitMode: "Submit button",
-    combined: "Combined (one button)",
-    perSection: "Per section",
-    settings: "Form settings",
     fieldTypeInput: "Input",
     fieldTypeTextarea: "Textarea",
     fieldTypeSelect: "Select",
@@ -141,6 +138,7 @@ var CHROME = {
     fieldTypeToggle: "Toggle",
     fieldTypeParagraph: "Paragraph",
     fieldTypeImage: "Image",
+    fieldTypeButton: "Button",
     subtypeText: "Text",
     subtypeEmail: "Email",
     subtypePhone: "Phone",
@@ -153,8 +151,17 @@ var CHROME = {
     shapeBanner: "Banner",
     tagBody: "Body",
     tagCaption: "Caption",
-    submitSectionTitle: "Submit",
-    submitStyle: "Submit button style",
+    buttonText: "Button text",
+    buttonActionTitle: "Action",
+    buttonAction: "When clicked",
+    actionLink: "Open link",
+    actionSubmit: "Submit",
+    openIn: "Open in",
+    sameTab: "Same tab",
+    newTab: "New tab",
+    submitScope: "Submits",
+    thisSection: "This section",
+    wholeForm: "Whole form",
     buttonSize: "Size",
     theme: "Theme",
     primaryColor: "Primary color",
@@ -179,6 +186,8 @@ var CHROME = {
     contentBlocks: "\u30B3\u30F3\u30C6\u30F3\u30C4",
     formFields: "\u30D5\u30A9\u30FC\u30E0\u9805\u76EE",
     addingTo: "\u8FFD\u52A0\u5148",
+    paletteTabBlocks: "\u30D6\u30ED\u30C3\u30AF",
+    paletteTabDesign: "\u30C7\u30B6\u30A4\u30F3",
     properties: "\u30D7\u30ED\u30D1\u30C6\u30A3",
     selectFieldHint: "\u7DE8\u96C6\u3059\u308B\u30D5\u30A3\u30FC\u30EB\u30C9\u3092\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
     label: "\u30E9\u30D9\u30EB",
@@ -224,15 +233,15 @@ var CHROME = {
     build: "\u4F5C\u6210",
     preview: "\u30D7\u30EC\u30D3\u30E5\u30FC",
     newForm: "\u65B0\u898F",
-    myForms: "\u30DE\u30A4\u30D5\u30A9\u30FC\u30E0",
+    templates: "\u30C6\u30F3\u30D7\u30EC\u30FC\u30C8",
     save: "\u4FDD\u5B58",
     viewJson: "JSON\u3092\u8868\u793A",
     saving: "\u4FDD\u5B58\u4E2D...",
     saved: "\u4FDD\u5B58\u6E08\u307F",
     saveFailed: "\u4FDD\u5B58\u306B\u5931\u6557\u3057\u307E\u3057\u305F",
     startNewForm: "\u65B0\u3057\u3044\u30D5\u30A9\u30FC\u30E0\u3092\u4F5C\u6210",
-    openSavedForm: "\u4FDD\u5B58\u6E08\u307F\u30D5\u30A9\u30FC\u30E0\u3092\u958B\u304F",
-    saveToLibraryTitle: "\u3053\u306E\u30D5\u30A9\u30FC\u30E0\u3092\u30E9\u30A4\u30D6\u30E9\u30EA\u306B\u4FDD\u5B58",
+    openTemplatesTitle: "\u4FDD\u5B58\u6E08\u307F\u30C6\u30F3\u30D7\u30EC\u30FC\u30C8\u3092\u958B\u304F",
+    saveToLibraryTitle: "\u3053\u306E\u30D5\u30A9\u30FC\u30E0\u3092\u30C6\u30F3\u30D7\u30EC\u30FC\u30C8\u3068\u3057\u3066\u4FDD\u5B58",
     sectionTitlePlaceholder: (n) => `\u30BB\u30AF\u30B7\u30E7\u30F3${n}\u306E\u30BF\u30A4\u30C8\u30EB\uFF08\u4EFB\u610F\uFF09`,
     noFieldsInSection: "\u3053\u306E\u30BB\u30AF\u30B7\u30E7\u30F3\u306B\u306F\u307E\u3060\u30D5\u30A3\u30FC\u30EB\u30C9\u304C\u3042\u308A\u307E\u305B\u3093\u3002\u5DE6\u306E\u30D1\u30CD\u30EB\u304B\u3089\u30D5\u30A3\u30FC\u30EB\u30C9\u3092\u9078\u3093\u3067\u304F\u3060\u3055\u3044\u3002",
     addSection: "\u30BB\u30AF\u30B7\u30E7\u30F3\u3092\u8FFD\u52A0",
@@ -245,22 +254,17 @@ var CHROME = {
     formJson: "\u30D5\u30A9\u30FC\u30E0JSON",
     copy: "\u30B3\u30D4\u30FC",
     copied: "\u30B3\u30D4\u30FC\u3057\u307E\u3057\u305F",
-    nothingSaved: "\u307E\u3060\u4FDD\u5B58\u3055\u308C\u3066\u3044\u307E\u305B\u3093\u3002\u30C4\u30FC\u30EB\u30D0\u30FC\u306E\u300C\u4FDD\u5B58\u300D\u3092\u30AF\u30EA\u30C3\u30AF\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
+    noTemplates: "\u307E\u3060\u30C6\u30F3\u30D7\u30EC\u30FC\u30C8\u304C\u3042\u308A\u307E\u305B\u3093\u3002\u30C4\u30FC\u30EB\u30D0\u30FC\u306E\u300C\u4FDD\u5B58\u300D\u3092\u30AF\u30EA\u30C3\u30AF\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
     updated: "\u66F4\u65B0\u65E5\u6642",
     open: "\u958B\u304F",
-    saveForm: "\u30D5\u30A9\u30FC\u30E0\u3092\u4FDD\u5B58",
-    formName: "\u30D5\u30A9\u30FC\u30E0\u540D",
-    saveToLibrary: "\u30E9\u30A4\u30D6\u30E9\u30EA\u306B\u4FDD\u5B58",
+    saveForm: "\u30C6\u30F3\u30D7\u30EC\u30FC\u30C8\u3068\u3057\u3066\u4FDD\u5B58",
+    formName: "\u30C6\u30F3\u30D7\u30EC\u30FC\u30C8\u540D",
+    saveToLibrary: "\u30C6\u30F3\u30D7\u30EC\u30FC\u30C8\u3092\u4FDD\u5B58",
     loadingDraft: "\u4E0B\u66F8\u304D\u3092\u8AAD\u307F\u8FBC\u3093\u3067\u3044\u307E\u3059...",
+    templatesLimitReached: "\u30C6\u30F3\u30D7\u30EC\u30FC\u30C8\u306F5\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",
     current: "\u73FE\u5728\u7DE8\u96C6\u4E2D",
     customColor: "\u30AB\u30B9\u30BF\u30E0\u30AB\u30E9\u30FC",
     fieldsCount: (n) => `${n}\u4EF6\u306E\u30D5\u30A3\u30FC\u30EB\u30C9`,
-    formSettings: "\u30D5\u30A9\u30FC\u30E0\u8A2D\u5B9A",
-    submitLabel: "\u9001\u4FE1\u30DC\u30BF\u30F3\u306E\u30C6\u30AD\u30B9\u30C8",
-    submitMode: "\u9001\u4FE1\u30DC\u30BF\u30F3\u306E\u8868\u793A",
-    combined: "\u307E\u3068\u3081\u30661\u3064",
-    perSection: "\u30BB\u30AF\u30B7\u30E7\u30F3\u3054\u3068",
-    settings: "\u30D5\u30A9\u30FC\u30E0\u8A2D\u5B9A",
     fieldTypeInput: "\u5165\u529B",
     fieldTypeTextarea: "\u30C6\u30AD\u30B9\u30C8\u30A8\u30EA\u30A2",
     fieldTypeSelect: "\u30BB\u30EC\u30AF\u30C8",
@@ -270,6 +274,7 @@ var CHROME = {
     fieldTypeToggle: "\u30C8\u30B0\u30EB",
     fieldTypeParagraph: "\u6BB5\u843D",
     fieldTypeImage: "\u753B\u50CF",
+    fieldTypeButton: "\u30DC\u30BF\u30F3",
     subtypeText: "\u30C6\u30AD\u30B9\u30C8",
     subtypeEmail: "\u30E1\u30FC\u30EB",
     subtypePhone: "\u96FB\u8A71\u756A\u53F7",
@@ -282,8 +287,17 @@ var CHROME = {
     shapeBanner: "\u30D0\u30CA\u30FC",
     tagBody: "\u672C\u6587",
     tagCaption: "\u30AD\u30E3\u30D7\u30B7\u30E7\u30F3",
-    submitSectionTitle: "\u9001\u4FE1",
-    submitStyle: "\u9001\u4FE1\u30DC\u30BF\u30F3\u306E\u30B9\u30BF\u30A4\u30EB",
+    buttonText: "\u30DC\u30BF\u30F3\u306E\u30C6\u30AD\u30B9\u30C8",
+    buttonActionTitle: "\u30A2\u30AF\u30B7\u30E7\u30F3",
+    buttonAction: "\u30AF\u30EA\u30C3\u30AF\u6642\u306E\u52D5\u4F5C",
+    actionLink: "\u30EA\u30F3\u30AF\u3092\u958B\u304F",
+    actionSubmit: "\u9001\u4FE1",
+    openIn: "\u958B\u304D\u65B9",
+    sameTab: "\u540C\u3058\u30BF\u30D6",
+    newTab: "\u65B0\u3057\u3044\u30BF\u30D6",
+    submitScope: "\u9001\u4FE1\u7BC4\u56F2",
+    thisSection: "\u3053\u306E\u30BB\u30AF\u30B7\u30E7\u30F3",
+    wholeForm: "\u30D5\u30A9\u30FC\u30E0\u5168\u4F53",
     buttonSize: "\u30B5\u30A4\u30BA",
     theme: "\u30C6\u30FC\u30DE",
     primaryColor: "\u30E1\u30A4\u30F3\u30AB\u30E9\u30FC",
@@ -319,6 +333,35 @@ function withLang(val, lang, value) {
   return { ...base, [lang]: value };
 }
 
+// src/lib/color.ts
+function mixHex(a, b, t2) {
+  const pa = parseHex(a);
+  const pb = parseHex(b);
+  if (!pa || !pb) return a;
+  const mix = (x, y) => Math.round(x + (y - x) * t2);
+  const toHex = (n) => n.toString(16).padStart(2, "0");
+  return `#${toHex(mix(pa[0], pb[0]))}${toHex(mix(pa[1], pb[1]))}${toHex(mix(pa[2], pb[2]))}`;
+}
+function parseHex(hex) {
+  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return null;
+  const n = parseInt(m[1], 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+}
+
+// src/lib/storage/compress.ts
+import { compressToUTF16, decompressFromUTF16 } from "lz-string";
+function compress(raw) {
+  return compressToUTF16(raw);
+}
+function decompress(value) {
+  try {
+    return decompressFromUTF16(value);
+  } catch {
+    return null;
+  }
+}
+
 // src/lib/storage/localStorageAdapter.ts
 function hasLocalStorage() {
   return typeof window !== "undefined" && !!window.localStorage;
@@ -326,11 +369,21 @@ function hasLocalStorage() {
 var localStorageAdapter = {
   async get(key) {
     if (!hasLocalStorage()) return null;
-    return window.localStorage.getItem(key);
+    const raw = window.localStorage.getItem(key);
+    if (raw == null) return null;
+    const decompressed = decompress(raw);
+    if (decompressed != null) {
+      try {
+        JSON.parse(decompressed);
+        return decompressed;
+      } catch {
+      }
+    }
+    return raw;
   },
   async set(key, value) {
     if (!hasLocalStorage()) return;
-    window.localStorage.setItem(key, value);
+    window.localStorage.setItem(key, compress(value));
   },
   async delete(key) {
     if (!hasLocalStorage()) return;
@@ -338,55 +391,6 @@ var localStorageAdapter = {
   }
 };
 
-// src/hooks/useTheme.ts
-import { useState } from "react";
-
-// src/theme/defaultTheme.ts
-var DEFAULT_THEME = {
-  primary: "#5B5FEF",
-  primarySoft: "#EEF0FF",
-  danger: "#C4432E",
-  dangerSoft: "#FDECE4",
-  ink: "#1B1E24",
-  muted: "#9296A3",
-  border: "#E2E4E9",
-  surface: "#FFFFFF",
-  canvas: "#F5F6F8",
-  pageBackground: "#FFFFFF",
-  layout: { maxWidth: 640, pagePadding: 28, canvasPadding: 20, sectionGap: 20, fieldGap: 16, toolbarPadding: 10, panelPadding: 14, ticketPadding: 14 }
-};
-
-// src/hooks/useTheme.ts
-function useTheme(themeOverrideProp) {
-  const baseTheme = {
-    ...DEFAULT_THEME,
-    ...themeOverrideProp || {},
-    layout: { ...DEFAULT_THEME.layout, ...themeOverrideProp && themeOverrideProp.layout || {} }
-  };
-  const [themeOverrides, setThemeOverrides] = useState({});
-  const theme = {
-    ...baseTheme,
-    ...themeOverrides,
-    layout: { ...baseTheme.layout, ...themeOverrides.layout || {} }
-  };
-  function updateThemeColor(key, value) {
-    setThemeOverrides((prev) => ({ ...prev, [key]: value }));
-  }
-  function updateThemeLayout(key, value) {
-    setThemeOverrides((prev) => ({ ...prev, layout: { ...prev.layout, [key]: value } }));
-  }
-  function resetTheme() {
-    setThemeOverrides({});
-  }
-  function replaceThemeOverrides(overrides) {
-    setThemeOverrides(overrides);
-  }
-  return { theme, themeOverrides, updateThemeColor, updateThemeLayout, resetTheme, replaceThemeOverrides };
-}
-
-// src/hooks/useFormDocument.ts
-import { useState as useState2 } from "react";
-
 // src/constants/fieldTypes.ts
 import {
   Type,
@@ -397,11 +401,13 @@ import {
   CheckSquare,
   ToggleLeft,
   FileText,
-  Image as ImageIcon
+  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" },
@@ -422,6 +428,7 @@ var IMAGE_SHAPES = ["square", "circle", "banner"];
 var FIELD_TYPE_CHROME_KEY = {
   paragraph: "fieldTypeParagraph",
   image: "fieldTypeImage",
+  button: "fieldTypeButton",
   input: "fieldTypeInput",
   textarea: "fieldTypeTextarea",
   select: "fieldTypeSelect",
@@ -500,21 +507,195 @@ function defaultFieldFor(type, language, chrome) {
     base.fontStyle = "normal";
     base.textAlign = "left";
     base.color = "";
+  } else if (type === "button") {
+    base.action = "submit";
+    base.submitScope = "form";
+    base.buttonStyle = { color: "", size: "md" };
+    base.href = "";
+    base.target = "_self";
   } else {
     base.defaultValue = "";
   }
   return base;
 }
 function defaultSection(titleEn = "") {
-  return { id: genSectionId(), title: bi(titleEn, ""), background: "", collapsed: false, submitStyle: null, fields: [] };
+  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
+function migrateField(field) {
+  let f = { ...field };
+  if (LEGACY_INPUT_TYPES.includes(f.type)) f = { ...f, type: "input", inputType: f.type };
+  f.label = typeof f.label === "string" ? bi(f.label) : f.label || bi();
+  f.hideLabel = !!f.hideLabel;
+  if ("placeholder" in f) f.placeholder = typeof f.placeholder === "string" ? bi(f.placeholder) : f.placeholder || bi();
+  if ("content" in f) f.content = typeof f.content === "string" ? bi(f.content) : f.content || bi();
+  if ("alt" in f) f.alt = typeof f.alt === "string" ? bi(f.alt) : f.alt || bi();
+  if (f.options) f.options = f.options.map((o) => ({ ...o, label: typeof o.label === "string" ? bi(o.label) : o.label || bi() }));
+  if (f.type === "paragraph") {
+    f.tag = f.tag || "p";
+    f.fontSize = f.fontSize || "md";
+    f.fontWeight = f.fontWeight || "normal";
+    f.fontStyle = f.fontStyle || "normal";
+    f.textAlign = f.textAlign || "left";
+    f.color = f.color || "";
+  }
+  if (f.type === "button") {
+    f.action = f.action === "link" ? "link" : "submit";
+    f.buttonStyle = f.buttonStyle || { color: "", size: "md" };
+    f.href = f.href || "";
+    f.target = f.target === "_blank" ? "_blank" : "_self";
+    f.submitScope = f.submitScope === "section" ? "section" : "form";
+  }
+  f.verticalAlign = f.verticalAlign || "top";
+  return f;
+}
+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();
+  const themeOverrides = raw.themeOverrides || {};
+  let sections;
+  if (raw.sections) {
+    sections = raw.sections.map((s) => ({
+      id: s.id || genSectionId(),
+      title: typeof s.title === "string" ? bi(s.title) : s.title || bi(),
+      background: s.background || "",
+      collapsed: !!s.collapsed,
+      fields: migrateFields(s.fields || [])
+    }));
+  } 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 };
+}
+
+// src/lib/features.ts
+var DEFAULT_FEATURES = {
+  naming: true,
+  templates: true,
+  newForm: true,
+  autosave: true,
+  jsonView: true,
+  previewMode: true,
+  languageSwitcher: true,
+  design: false,
+  blockStyling: true,
+  contentBlocks: true,
+  fieldTypes: true,
+  sections: true,
+  dragReorder: true
+};
+function resolveFeatures(features) {
+  return {
+    ...DEFAULT_FEATURES,
+    ...features,
+    contentBlocks: Array.isArray(features?.contentBlocks) ? new Set(features.contentBlocks) : features?.contentBlocks ?? DEFAULT_FEATURES.contentBlocks,
+    fieldTypes: Array.isArray(features?.fieldTypes) ? new Set(features.fieldTypes) : features?.fieldTypes ?? DEFAULT_FEATURES.fieldTypes
+  };
+}
+function isContentBlockEnabled(features, type) {
+  return features.contentBlocks === true || features.contentBlocks instanceof Set && features.contentBlocks.has(type);
+}
+function isFieldTypeEnabled(features, type) {
+  return features.fieldTypes === true || features.fieldTypes instanceof Set && features.fieldTypes.has(type);
+}
+
+// src/hooks/useTheme.ts
+import { useState } from "react";
+
+// src/theme/defaultTheme.ts
+var DEFAULT_THEME = {
+  primary: "#5B5FEF",
+  primarySoft: "#EEF0FF",
+  danger: "#C4432E",
+  dangerSoft: "#FDECE4",
+  ink: "#1B1E24",
+  muted: "#9296A3",
+  border: "#E2E4E9",
+  surface: "#FFFFFF",
+  canvas: "#F5F6F8",
+  pageBackground: "#FFFFFF",
+  layout: { maxWidth: 1200, pagePadding: 28, canvasPadding: 20, sectionGap: 20, fieldGap: 16, toolbarPadding: 10, panelPadding: 14, ticketPadding: 14 }
+};
+
+// src/hooks/useTheme.ts
+function useTheme(themeOverrideProp) {
+  const baseTheme = {
+    ...DEFAULT_THEME,
+    ...themeOverrideProp || {},
+    layout: { ...DEFAULT_THEME.layout, ...themeOverrideProp && themeOverrideProp.layout || {} }
+  };
+  const [themeOverrides, setThemeOverrides] = useState({});
+  const theme = {
+    ...baseTheme,
+    ...themeOverrides,
+    layout: { ...baseTheme.layout, ...themeOverrides.layout || {} }
+  };
+  function updateThemeColor(key, value) {
+    setThemeOverrides((prev) => ({ ...prev, [key]: value }));
+  }
+  function updateThemeLayout(key, value) {
+    setThemeOverrides((prev) => ({ ...prev, layout: { ...prev.layout, [key]: value } }));
+  }
+  function resetTheme() {
+    setThemeOverrides({});
+  }
+  function replaceThemeOverrides(overrides) {
+    setThemeOverrides(overrides);
+  }
+  return { theme, themeOverrides, updateThemeColor, updateThemeLayout, resetTheme, replaceThemeOverrides };
 }
 
 // src/hooks/useFormDocument.ts
+import { useState as useState2 } from "react";
 function useFormDocument({ language, chrome }) {
   const [title, setTitle] = useState2(bi("Untitled form", ""));
-  const [submitLabel, setSubmitLabelState] = useState2(bi());
-  const [submitMode, setSubmitMode] = useState2("combined");
-  const [submitStyle, setSubmitStyleState] = useState2({ color: "", size: "md" });
   const [sections, setSections] = useState2([defaultSection()]);
   const [activeSectionId, setActiveSectionId] = useState2(null);
   const [selectedId, setSelectedId] = useState2(null);
@@ -524,12 +705,6 @@ function useFormDocument({ language, chrome }) {
   function updateTitle(value) {
     setTitle((prev) => withLang(prev, language, value));
   }
-  function updateSubmitLabel(value) {
-    setSubmitLabelState((prev) => withLang(prev, language, value));
-  }
-  function updateSubmitStyle(patch) {
-    setSubmitStyleState((prev) => ({ ...prev, ...patch }));
-  }
   function addSection() {
     const s = defaultSection();
     setSections((prev) => [...prev, s]);
@@ -574,12 +749,6 @@ function useFormDocument({ language, chrome }) {
   function toggleSectionCollapse(sectionId) {
     setSections((prev) => prev.map((s) => s.id === sectionId ? { ...s, collapsed: !s.collapsed } : s));
   }
-  function updateSectionSubmitStyle(sectionId, patch) {
-    setSections((prev) => prev.map((s) => s.id === sectionId ? { ...s, submitStyle: { ...s.submitStyle || submitStyle, ...patch } } : s));
-  }
-  function clearSectionSubmitStyle(sectionId) {
-    setSections((prev) => prev.map((s) => s.id === sectionId ? { ...s, submitStyle: null } : s));
-  }
   function addField(type) {
     const field = defaultFieldFor(type, language, chrome);
     const targetId = activeSectionId || sections[0]?.id;
@@ -657,9 +826,6 @@ function useFormDocument({ language, chrome }) {
     setSections(doc.sections);
     setActiveSectionId(doc.sections[0]?.id || null);
     setTitle(doc.title);
-    setSubmitLabelState(doc.submitLabel);
-    setSubmitMode(doc.submitMode);
-    setSubmitStyleState(doc.submitStyle);
     setSelectedId(null);
   }
   function resetToBlank() {
@@ -667,16 +833,10 @@ function useFormDocument({ language, chrome }) {
     setSections([s]);
     setActiveSectionId(s.id);
     setTitle(bi("Untitled form", ""));
-    setSubmitLabelState(bi());
-    setSubmitMode("combined");
-    setSubmitStyleState({ color: "", size: "md" });
     setSelectedId(null);
   }
   return {
     title,
-    submitLabel,
-    submitMode,
-    submitStyle,
     sections,
     activeSectionId,
     selectedId,
@@ -685,11 +845,8 @@ function useFormDocument({ language, chrome }) {
     activeSection,
     setActiveSectionId,
     setSelectedId,
-    setSubmitMode,
     setTitle,
     updateTitle,
-    updateSubmitLabel,
-    updateSubmitStyle,
     addSection,
     duplicateSection,
     deleteSection,
@@ -697,8 +854,6 @@ function useFormDocument({ language, chrome }) {
     updateSectionTitle,
     updateSectionBackground,
     toggleSectionCollapse,
-    updateSectionSubmitStyle,
-    clearSectionSubmitStyle,
     addField,
     updateField,
     deleteField,
@@ -721,62 +876,15 @@ var DRAFT_KEY = "form-page-builder:draft";
 var INDEX_KEY = "form-page-builder:index";
 var formKey = (id) => `form-page-builder:saved:${id}`;
 
-// src/lib/migrate.ts
-function migrateField(field) {
-  let f = { ...field };
-  if (LEGACY_INPUT_TYPES.includes(f.type)) f = { ...f, type: "input", inputType: f.type };
-  f.label = typeof f.label === "string" ? bi(f.label) : f.label || bi();
-  f.hideLabel = !!f.hideLabel;
-  if ("placeholder" in f) f.placeholder = typeof f.placeholder === "string" ? bi(f.placeholder) : f.placeholder || bi();
-  if ("content" in f) f.content = typeof f.content === "string" ? bi(f.content) : f.content || bi();
-  if ("alt" in f) f.alt = typeof f.alt === "string" ? bi(f.alt) : f.alt || bi();
-  if (f.options) f.options = f.options.map((o) => ({ ...o, label: typeof o.label === "string" ? bi(o.label) : o.label || bi() }));
-  if (f.type === "paragraph") {
-    f.tag = f.tag || "p";
-    f.fontSize = f.fontSize || "md";
-    f.fontWeight = f.fontWeight || "normal";
-    f.fontStyle = f.fontStyle || "normal";
-    f.textAlign = f.textAlign || "left";
-    f.color = f.color || "";
-  }
-  f.verticalAlign = f.verticalAlign || "top";
-  return f;
-}
-function migrateFields(fields) {
-  return (fields || []).map(migrateField);
-}
-function migrateDocument(raw) {
-  if (!raw) return null;
-  const title = typeof raw.title === "string" ? bi(raw.title) : raw.title || bi();
-  const submitLabel = typeof raw.submitLabel === "string" ? bi(raw.submitLabel) : raw.submitLabel || bi();
-  const submitMode = raw.submitMode === "perSection" ? "perSection" : "combined";
-  const submitStyle = raw.submitStyle || { color: "", size: "md" };
-  const themeOverrides = raw.themeOverrides || {};
-  if (raw.sections) {
-    return {
-      title,
-      submitLabel,
-      submitMode,
-      submitStyle,
-      themeOverrides,
-      sections: raw.sections.map((s) => ({
-        id: s.id || genSectionId(),
-        title: typeof s.title === "string" ? bi(s.title) : s.title || bi(),
-        background: s.background || "",
-        collapsed: !!s.collapsed,
-        submitStyle: s.submitStyle || null,
-        fields: migrateFields(s.fields || [])
-      }))
-    };
-  }
-  return { title, submitLabel, submitMode, submitStyle, themeOverrides, sections: [{ ...defaultSection(), fields: migrateFields(raw.fields || []) }] };
-}
-
 // src/hooks/usePersistence.ts
+var MAX_TEMPLATES = 5;
 function usePersistence({
   storage,
+  autosave,
   language,
+  chrome,
   document,
+  initialDocument,
   onLoadDocument,
   onLoadThemeOverrides,
   onTitleChange,
@@ -802,17 +910,27 @@ function usePersistence({
   useEffect(() => {
     (async () => {
       try {
-        const raw = await storage.get(DRAFT_KEY);
-        if (raw) {
-          const parsed = JSON.parse(raw);
-          const doc = migrateDocument(parsed);
+        if (initialDocument) {
+          const doc = migrateDocument(initialDocument);
           if (doc) {
             onLoadDocument(doc);
             onLoadThemeOverrides(doc.themeOverrides);
+          } else {
+            ensureActiveSection();
           }
-          if (parsed.currentFormId) setCurrentFormId(parsed.currentFormId);
         } else {
-          ensureActiveSection();
+          const raw = await storage.get(DRAFT_KEY);
+          if (raw) {
+            const parsed = JSON.parse(raw);
+            const doc = migrateDocument(parsed);
+            if (doc) {
+              onLoadDocument(doc);
+              onLoadThemeOverrides(doc.themeOverrides);
+            }
+            if (parsed.currentFormId) setCurrentFormId(parsed.currentFormId);
+          } else {
+            ensureActiveSection();
+          }
         }
       } catch (err) {
         ensureActiveSection();
@@ -824,7 +942,7 @@ function usePersistence({
     refreshLibrary();
   }, []);
   useEffect(() => {
-    if (!hasLoadedOnce.current) return;
+    if (!hasLoadedOnce.current || !autosave) return;
     setSaveState("saving");
     if (autosaveTimer.current) clearTimeout(autosaveTimer.current);
     autosaveTimer.current = setTimeout(async () => {
@@ -838,8 +956,12 @@ function usePersistence({
     return () => {
       if (autosaveTimer.current) clearTimeout(autosaveTimer.current);
     };
-  }, [document.title, document.submitLabel, document.submitMode, document.submitStyle, document.themeOverrides, document.sections, currentFormId]);
+  }, [document.title, document.themeOverrides, document.sections, currentFormId]);
   async function saveAs(name) {
+    if (savedForms.length >= MAX_TEMPLATES) {
+      alert(chrome.templatesLimitReached);
+      return;
+    }
     const id = genFormId();
     const now = Date.now();
     try {
@@ -948,26 +1070,26 @@ function useDragReorder(reorderWithinSection) {
 }
 
 // src/components/Toolbar.tsx
-import { Loader2, AlertCircle, Languages, Pencil, Eye, Settings, FilePlus2, FolderOpen, Save, Code2 } from "lucide-react";
+import { Loader2, AlertCircle, Pencil, Eye, FilePlus2, FolderOpen, Save, Code2 } from "lucide-react";
 
 // src/styles/styles.ts
 var styles = {
-  app: { fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif", background: "var(--fb-canvas)", borderRadius: 12, overflow: "hidden", border: "1px solid var(--fb-border)", color: "var(--fb-ink)", minHeight: 640, maxHeight: "100vh", display: "flex", flexDirection: "column" },
+  app: { fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif", background: "var(--fb-canvas)", borderRadius: 12, overflow: "hidden", border: "1px solid var(--fb-border)", color: "var(--fb-ink)", display: "flex", flexDirection: "column" },
   toolbar: { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "var(--fb-space-toolbar) 16px", borderBottom: "1px solid var(--fb-border)", background: "var(--fb-surface)", flexWrap: "wrap", gap: 8, position: "relative" },
   toolbarLeft: { display: "flex", alignItems: "center", gap: 10 },
   logoMark: { width: 26, height: 26, borderRadius: 7, background: "var(--fb-primary)", color: "#fff", fontSize: 11, fontWeight: 700, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "'JetBrains Mono', monospace", letterSpacing: "-0.5px" },
   titleInput: { border: "none", outline: "none", fontSize: 14, fontWeight: 600, background: "transparent", color: "var(--fb-ink)", padding: "4px 6px", borderRadius: 6, minWidth: 160 },
   toolbarRight: { display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap" },
   toolbarDivider: { width: 1, height: 20, background: "var(--fb-border)", margin: "0 4px" },
-  tabBtn: { display: "flex", alignItems: "center", gap: 6, padding: "6px 12px", borderRadius: 7, border: "1px solid transparent", background: "transparent", color: "#6B6E79", fontSize: 13, fontWeight: 500 },
+  tabBtn: { display: "flex", alignItems: "center", gap: 6, padding: "6px 12px", borderRadius: 7, border: "1px solid transparent", background: "transparent", color: "var(--fb-muted)", fontSize: 13, fontWeight: 500 },
   tabBtnActive: { display: "flex", alignItems: "center", gap: 6, padding: "6px 12px", borderRadius: 7, border: "1px solid var(--fb-border)", background: "var(--fb-primary-soft)", color: "var(--fb-primary)", fontSize: 13, fontWeight: 600 },
-  ghostBtn: { display: "flex", alignItems: "center", gap: 6, padding: "6px 12px", borderRadius: 7, border: "1px solid var(--fb-border)", background: "var(--fb-surface)", color: "#4A4D57", fontSize: 13, fontWeight: 500 },
+  ghostBtn: { display: "flex", alignItems: "center", gap: 6, padding: "6px 12px", borderRadius: 7, border: "1px solid var(--fb-border)", background: "var(--fb-surface)", color: "var(--fb-ink)", fontSize: 13, fontWeight: 500 },
   primaryBtn: { display: "flex", alignItems: "center", gap: 6, padding: "6px 13px", borderRadius: 7, border: "1px solid var(--fb-primary)", background: "var(--fb-primary)", color: "#fff", fontSize: 13, fontWeight: 600 },
   saveStatus: { display: "flex", alignItems: "center", gap: 5, fontSize: 12, color: "var(--fb-muted)", minWidth: 60 },
   countBadge: { fontSize: 10.5, fontWeight: 700, background: "var(--fb-primary-soft)", color: "var(--fb-primary)", borderRadius: 9, padding: "1px 6px", marginLeft: 2 },
   loadingScreen: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", color: "var(--fb-muted)" },
   libraryBody: { padding: "var(--fb-space-panel)", overflowY: "auto", display: "flex", flexDirection: "column", gap: 4 },
-  libraryRow: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10, padding: "10px 8px", borderRadius: 8, border: "1px solid #F0F1F4" },
+  libraryRow: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10, padding: "10px 8px", borderRadius: 8, border: "1px solid var(--fb-border)" },
   libraryRowTitle: { fontSize: 13.5, fontWeight: 600, color: "var(--fb-ink)", display: "flex", alignItems: "center", gap: 8, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
   libraryRowMeta: { fontSize: 11.5, color: "var(--fb-muted)", marginTop: 2 },
   currentBadge: { fontSize: 10, fontWeight: 700, color: "var(--fb-primary)", background: "var(--fb-primary-soft)", padding: "2px 6px", borderRadius: 5, flexShrink: 0 },
@@ -976,7 +1098,7 @@ var styles = {
   panelHeading: { fontSize: 11, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--fb-muted)", marginBottom: 10 },
   activeSectionHint: { fontSize: 11.5, color: "var(--fb-muted)", marginBottom: 14, lineHeight: 1.4 },
   paletteList: { display: "flex", flexDirection: "column", gap: 4 },
-  paletteItem: { display: "flex", alignItems: "center", gap: 9, padding: "8px 9px", borderRadius: 8, border: "1px solid transparent", background: "transparent", fontSize: 13, color: "#33353E", textAlign: "left" },
+  paletteItem: { display: "flex", alignItems: "center", gap: 9, padding: "8px 9px", borderRadius: 8, border: "1px solid transparent", background: "transparent", fontSize: 13, color: "var(--fb-ink)", textAlign: "left" },
   canvas: { flex: 1, padding: "var(--fb-space-canvas)", overflowY: "auto", background: "var(--fb-canvas)" },
   sectionBlock: { borderRadius: 12, padding: "var(--fb-space-panel)", marginBottom: "var(--fb-space-section)", transition: "border-color 0.12s" },
   sectionHeader: { display: "flex", alignItems: "center", gap: 8, marginBottom: 12, flexWrap: "wrap" },
@@ -985,10 +1107,8 @@ var styles = {
   sectionTitleInput: { border: "none", outline: "none", background: "transparent", fontSize: 14, fontWeight: 700, color: "var(--fb-ink)", padding: "2px 0", minWidth: 120, flex: 1 },
   sectionHeaderActions: { display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap", marginLeft: "auto" },
   sectionEmpty: { fontSize: 12.5, color: "var(--fb-muted)", padding: "18px 4px", textAlign: "center", border: "1px dashed var(--fb-border)", borderRadius: 8 },
-  submitStyleRow: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", background: "#F7F8FA", border: "1px solid #F0F1F4", borderRadius: 8, padding: "6px 10px", marginBottom: 12 },
-  miniLabel: { fontSize: 11, fontWeight: 600, color: "var(--fb-muted)" },
   resetLinkBtn: { display: "flex", alignItems: "center", gap: 3, fontSize: 11, color: "var(--fb-muted)", background: "transparent", border: "none", padding: "2px 4px" },
-  addSectionBtn: { display: "flex", alignItems: "center", justifyContent: "center", gap: 6, width: "100%", padding: "10px", borderRadius: 10, border: "1px dashed #C7C9D6", background: "transparent", color: "var(--fb-primary)", fontSize: 13, fontWeight: 600 },
+  addSectionBtn: { display: "flex", alignItems: "center", justifyContent: "center", gap: 6, width: "100%", padding: "10px", borderRadius: 10, border: "1px dashed var(--fb-border)", background: "transparent", color: "var(--fb-primary)", fontSize: 13, fontWeight: 600 },
   swatchRow: { display: "flex", alignItems: "center", gap: 5, flexWrap: "wrap" },
   swatchBtn: { width: 20, height: 20, borderRadius: "50%", border: "1px solid var(--fb-border)", padding: 0 },
   swatchBtnActive: { border: "2px solid var(--fb-primary)" },
@@ -997,52 +1117,56 @@ var styles = {
   ticket: { display: "flex", alignItems: "stretch", background: "var(--fb-surface)", border: "1px solid var(--fb-border)", borderRadius: 10, position: "relative", transition: "border-color 0.12s, box-shadow 0.12s" },
   ticketSelected: { borderColor: "var(--fb-primary)", boxShadow: "0 0 0 3px var(--fb-primary-soft)" },
   ticketDragOver: { borderColor: "var(--fb-muted)" },
-  ticketIndex: { fontFamily: "'JetBrains Mono', monospace", fontSize: 13, fontWeight: 700, color: "#C7C9D6", width: 34, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 },
+  ticketIndex: { fontFamily: "'JetBrains Mono', monospace", fontSize: 13, fontWeight: 700, color: "var(--fb-border)", width: 34, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 },
   ticketPerforation: { width: 0, borderLeft: "1px dashed var(--fb-border)" },
   ticketBody: { flex: 1, padding: "10px var(--fb-space-ticket)", minWidth: 0 },
   ticketTop: { display: "flex", alignItems: "center", gap: 7, marginBottom: 4 },
   typeBadge: { fontSize: 10.5, fontFamily: "'JetBrains Mono', monospace", color: "var(--fb-muted)" },
-  requiredBadge: { fontSize: 10, fontWeight: 700, color: "#B4522F", background: "var(--fb-danger-soft)", padding: "2px 6px", borderRadius: 5, letterSpacing: "0.02em", marginLeft: "auto" },
+  requiredBadge: { fontSize: 10, fontWeight: 700, color: "var(--fb-danger)", background: "var(--fb-danger-soft)", padding: "2px 6px", borderRadius: 5, letterSpacing: "0.02em", marginLeft: "auto" },
   chipRow: { display: "flex", gap: 5, marginBottom: 7, flexWrap: "wrap" },
   miniBadge: { fontSize: 10, fontWeight: 600, color: "var(--fb-primary)", background: "var(--fb-primary-soft)", padding: "2px 6px", borderRadius: 5, letterSpacing: "0.02em" },
-  segmented: { display: "flex", gap: 3, background: "#F0F1F4", padding: 3, borderRadius: 8, marginBottom: 4 },
-  segmentedBtn: { flex: 1, display: "flex", alignItems: "center", justifyContent: "center", gap: 5, padding: "6px 8px", borderRadius: 6, border: "none", background: "transparent", color: "#6B6E79", fontSize: 12.5, fontWeight: 500 },
-  segmentedBtnActive: { flex: 1, display: "flex", alignItems: "center", justifyContent: "center", gap: 5, padding: "6px 8px", borderRadius: 6, border: "none", background: "#fff", color: "var(--fb-ink)", fontSize: 12.5, fontWeight: 600, boxShadow: "0 1px 2px rgba(0,0,0,0.08)" },
+  langToggleTrack: { position: "relative", display: "flex", gap: 3, background: "var(--fb-surface-2)", padding: 3, borderRadius: 20 },
+  langToggleThumb: { position: "absolute", top: 3, left: 3, bottom: 3, background: "var(--fb-primary)", borderRadius: 17, transition: "transform 0.18s ease" },
+  langToggleBtn: { position: "relative", zIndex: 1, padding: "5px 12px", borderRadius: 17, border: "none", background: "transparent", color: "var(--fb-muted)", fontSize: 12.5, fontWeight: 600, whiteSpace: "nowrap" },
+  langToggleBtnActive: { position: "relative", zIndex: 1, padding: "5px 12px", borderRadius: 17, border: "none", background: "transparent", color: "#fff", fontSize: 12.5, fontWeight: 600, whiteSpace: "nowrap" },
+  segmented: { display: "flex", gap: 3, background: "var(--fb-surface-2)", padding: 3, borderRadius: 8, marginBottom: 4 },
+  segmentedBtn: { flex: 1, display: "flex", alignItems: "center", justifyContent: "center", gap: 5, padding: "6px 8px", borderRadius: 6, border: "none", background: "transparent", color: "var(--fb-muted)", fontSize: 12.5, fontWeight: 500 },
+  segmentedBtnActive: { flex: 1, display: "flex", alignItems: "center", justifyContent: "center", gap: 5, padding: "6px 8px", borderRadius: 6, border: "none", background: "var(--fb-surface)", color: "var(--fb-ink)", fontSize: 12.5, fontWeight: 600, boxShadow: "0 1px 2px rgba(0,0,0,0.08)" },
   iconGrid: { display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 5, marginTop: 6 },
-  iconGridBtn: { width: 30, height: 30, borderRadius: 7, border: "1px solid var(--fb-border)", background: "#fff", display: "flex", alignItems: "center", justifyContent: "center", color: "#6B6E79" },
+  iconGridBtn: { width: 30, height: 30, borderRadius: 7, border: "1px solid var(--fb-border)", background: "var(--fb-surface)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--fb-muted)" },
   iconGridBtnActive: { width: 30, height: 30, borderRadius: 7, border: "1px solid var(--fb-primary)", background: "var(--fb-primary-soft)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--fb-primary)" },
   styleToggleRow: { display: "flex", gap: 5, marginBottom: 4 },
-  styleToggle: { width: 30, height: 30, borderRadius: 7, border: "1px solid var(--fb-border)", background: "#fff", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--fb-muted)" },
+  styleToggle: { width: 30, height: 30, borderRadius: 7, border: "1px solid var(--fb-border)", background: "var(--fb-surface)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--fb-muted)" },
   styleToggleActive: { width: 30, height: 30, borderRadius: 7, border: "1px solid var(--fb-primary)", background: "var(--fb-primary-soft)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--fb-primary)" },
-  previewInput: { border: "1px solid #E9EAEE", borderRadius: 7, padding: "7px 10px", fontSize: 13, color: "var(--fb-muted)", background: "#FBFBFD", display: "flex", alignItems: "center", justifyContent: "space-between" },
-  previewRadio: { display: "flex", alignItems: "center", gap: 6, fontSize: 13, color: "#4A4D57" },
-  ticketActions: { display: "flex", flexDirection: "column", gap: 3, padding: 8, borderLeft: "1px solid #F0F1F4" },
-  iconBtn: { width: 24, height: 24, borderRadius: 6, border: "1px solid #E9EAEE", background: "#fff", display: "flex", alignItems: "center", justifyContent: "center", color: "#6B6E79" },
+  previewInput: { border: "1px solid var(--fb-border)", borderRadius: 7, padding: "7px 10px", fontSize: 13, color: "var(--fb-muted)", background: "var(--fb-surface-2)", display: "flex", alignItems: "center", justifyContent: "space-between" },
+  previewRadio: { display: "flex", alignItems: "center", gap: 6, fontSize: 13, color: "var(--fb-ink)" },
+  ticketActions: { display: "flex", flexDirection: "column", gap: 3, padding: 8, borderLeft: "1px solid var(--fb-border)" },
+  iconBtn: { width: 24, height: 24, borderRadius: 6, border: "1px solid var(--fb-border)", background: "var(--fb-surface)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--fb-muted)" },
   iconBtnDanger: { color: "var(--fb-danger)" },
   inspector: { width: 270, borderLeft: "1px solid var(--fb-border)", background: "var(--fb-surface)", padding: "var(--fb-space-panel)", overflowY: "auto" },
   inspectorEmpty: { fontSize: 13, color: "var(--fb-muted)", lineHeight: 1.5, marginTop: 6 },
   inspectorBody: { display: "flex", flexDirection: "column", gap: 4 },
   helperText: { fontSize: 11, color: "var(--fb-muted)", lineHeight: 1.4, margin: "2px 0 4px" },
-  propLabel: { fontSize: 11.5, fontWeight: 600, color: "#6B6E79", marginTop: 12, marginBottom: 5 },
-  propInput: { border: "1px solid var(--fb-border)", borderRadius: 7, padding: "7px 9px", fontSize: 13, color: "var(--fb-ink)", outline: "none", width: "100%", boxSizing: "border-box" },
+  propLabel: { fontSize: 11.5, fontWeight: 600, color: "var(--fb-muted)", marginTop: 12, marginBottom: 5 },
+  propInput: { border: "1px solid var(--fb-border)", borderRadius: 7, padding: "7px 9px", fontSize: 13, color: "var(--fb-ink)", background: "var(--fb-surface)", outline: "none", width: "100%", boxSizing: "border-box" },
   optionList: { display: "flex", flexDirection: "column", gap: 6 },
   optionRow: { display: "flex", gap: 6, alignItems: "center" },
-  optionInput: { flex: 1, border: "1px solid var(--fb-border)", borderRadius: 6, padding: "6px 8px", fontSize: 12.5, outline: "none", minWidth: 0, boxSizing: "border-box" },
-  addOptionBtn: { display: "flex", alignItems: "center", gap: 5, fontSize: 12.5, color: "var(--fb-primary)", background: "transparent", border: "1px dashed #C7C9D6", borderRadius: 7, padding: "6px 8px", justifyContent: "center", marginTop: 2 },
+  optionInput: { flex: 1, border: "1px solid var(--fb-border)", borderRadius: 6, padding: "6px 8px", fontSize: 12.5, color: "var(--fb-ink)", background: "var(--fb-surface)", outline: "none", minWidth: 0, boxSizing: "border-box" },
+  addOptionBtn: { display: "flex", alignItems: "center", gap: 5, fontSize: 12.5, color: "var(--fb-primary)", background: "transparent", border: "1px dashed var(--fb-border)", borderRadius: 7, padding: "6px 8px", justifyContent: "center", marginTop: 2 },
   toggleRow: { display: "flex", alignItems: "center", gap: 8, background: "transparent", border: "none", padding: "8px 0" },
   toggleTrack: { width: 30, height: 17, borderRadius: 20, position: "relative", transition: "background 0.15s", display: "inline-block" },
   toggleThumb: { position: "absolute", top: 2, left: 2, width: 13, height: 13, borderRadius: "50%", background: "#fff", transition: "transform 0.15s", boxShadow: "0 1px 2px rgba(0,0,0,0.2)" },
   inspectorDivider: { height: 1, background: "var(--fb-border)", margin: "14px 0 10px" },
   deleteFieldBtn: { display: "flex", alignItems: "center", gap: 6, fontSize: 12.5, color: "var(--fb-danger)", background: "var(--fb-danger-soft)", border: "none", borderRadius: 7, padding: "8px 10px", justifyContent: "center" },
-  modalOverlay: { position: "fixed", inset: 0, background: "rgba(20,22,28,0.45)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 50 },
-  modal: { background: "#fff", borderRadius: 12, width: 520, maxHeight: "70vh", display: "flex", flexDirection: "column", overflow: "hidden", boxShadow: "0 20px 60px rgba(0,0,0,0.25)" },
+  modalOverlay: { position: "fixed", inset: 0, background: "rgba(20,22,28,0.45)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 50, padding: 16, boxSizing: "border-box" },
+  modal: { background: "var(--fb-surface)", borderRadius: 12, width: "100%", maxWidth: 520, maxHeight: "70vh", display: "flex", flexDirection: "column", overflow: "hidden", boxShadow: "0 20px 60px rgba(0,0,0,0.25)", boxSizing: "border-box" },
   modalHeader: { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "12px 16px", borderBottom: "1px solid var(--fb-border)" },
   jsonPre: { margin: 0, padding: 16, fontSize: 12, lineHeight: 1.6, overflow: "auto", background: "#14171C", color: "#D6D8E0", fontFamily: "'JetBrains Mono', monospace" },
   previewWrap: { flex: 1, display: "flex", justifyContent: "center", padding: "var(--fb-space-page) 20px", overflowY: "auto", background: "var(--fb-canvas)" },
   previewToolbar: { width: "100%", display: "flex", gap: 10, marginBottom: 16, justifyContent: "center" },
   previewCard: { width: "100%", maxWidth: 480, background: "var(--fb-page-bg)", border: "1px solid var(--fb-border)", borderRadius: 12, padding: "var(--fb-space-page)" },
   previewTitle: { fontSize: 19, fontWeight: 700, margin: "0 0 20px" },
-  previewLabel: { display: "block", fontSize: 13, fontWeight: 600, color: "#33353E", marginBottom: 6 },
+  previewLabel: { display: "block", fontSize: 13, fontWeight: 600, color: "var(--fb-ink)", marginBottom: 6 },
   previewGrid: { display: "flex", flexWrap: "wrap", gap: "var(--fb-space-field)" },
   sectionRuntimeTitle: { fontSize: 15, fontWeight: 700, margin: "0 0 12px", color: "var(--fb-ink)" },
   imagePlaceholder: { display: "flex", alignItems: "center", justifyContent: "center", border: "1px dashed var(--fb-border)" },
@@ -1052,32 +1176,146 @@ var styles = {
   submittedRow: { display: "flex", justifyContent: "space-between", gap: 12, fontSize: 13, padding: "6px 0", borderBottom: "1px solid var(--fb-border)" },
   submittedLabel: { color: "var(--fb-muted)", flexShrink: 0 },
   submittedValue: { color: "var(--fb-ink)", fontWeight: 600, textAlign: "right" },
-  realInput: { width: "100%", border: "1px solid var(--fb-border)", borderRadius: 8, padding: "9px 11px", fontSize: 13.5, outline: "none", color: "var(--fb-ink)", boxSizing: "border-box" },
+  realInput: { width: "100%", border: "1px solid var(--fb-border)", borderRadius: 8, padding: "9px 11px", fontSize: 13.5, outline: "none", color: "var(--fb-ink)", background: "var(--fb-surface)", boxSizing: "border-box" },
   realInputError: { borderColor: "var(--fb-danger)" },
   submitBtn: { marginTop: 8, color: "#fff", border: "none", borderRadius: 8, fontWeight: 600, width: "100%" },
-  layoutPanel: { position: "absolute", top: "calc(100% + 6px)", right: 0, width: 260, background: "#fff", border: "1px solid var(--fb-border)", borderRadius: 10, boxShadow: "0 12px 32px rgba(0,0,0,0.18)", padding: 14, zIndex: 60, maxHeight: "70vh", overflowY: "auto" },
   layoutPanelHeader: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 4 },
   spacingRow: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, padding: "4px 0" },
-  spacingLabel: { fontSize: 12, color: "#4A4D57" },
-  spacingInput: { width: 60, border: "1px solid var(--fb-border)", borderRadius: 6, padding: "4px 6px", fontSize: 12, textAlign: "right", outline: "none" }
+  spacingLabel: { fontSize: 12, color: "var(--fb-ink)" },
+  spacingInput: { width: 60, border: "1px solid var(--fb-border)", borderRadius: 6, padding: "4px 6px", fontSize: 12, textAlign: "right", color: "var(--fb-ink)", background: "var(--fb-surface)", outline: "none" }
 };
 
-// src/components/Segmented.tsx
+// src/components/LanguageToggle.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
+function LanguageToggle({ languages, value, onChange }) {
+  const activeIdx = Math.max(0, languages.findIndex((l) => l.code === value));
+  const n = languages.length || 1;
+  return /* @__PURE__ */ jsxs("div", { style: styles.langToggleTrack, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          ...styles.langToggleThumb,
+          width: `calc(${100 / n}% - 3px)`,
+          transform: `translateX(calc(${activeIdx * 100}% + ${activeIdx * 3}px))`
+        }
+      }
+    ),
+    languages.map((l) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        style: l.code === value ? styles.langToggleBtnActive : styles.langToggleBtn,
+        onClick: () => onChange(l.code),
+        children: l.label
+      },
+      l.code
+    ))
+  ] });
+}
+
+// src/components/Toolbar.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Toolbar({
+  title,
+  language,
+  languages,
+  mode,
+  saveState,
+  chrome,
+  features,
+  savedFormsCount,
+  onTitleChange,
+  onLanguageChange,
+  onModeChange,
+  onNewForm,
+  onOpenLibrary,
+  onSaveExisting,
+  onOpenJson
+}) {
+  return /* @__PURE__ */ jsxs2("div", { style: styles.toolbar, children: [
+    /* @__PURE__ */ jsxs2("div", { style: styles.toolbarLeft, children: [
+      /* @__PURE__ */ jsx2("div", { style: styles.logoMark, children: "FB" }),
+      features.naming ? /* @__PURE__ */ jsx2("input", { value: t(title, language), onChange: (e) => onTitleChange(e.target.value), style: styles.titleInput, "aria-label": "Form title" }) : /* @__PURE__ */ jsx2("span", { style: styles.titleInput, children: t(title, language) })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { style: styles.toolbarRight, children: [
+      /* @__PURE__ */ jsxs2("span", { style: styles.saveStatus, children: [
+        saveState === "saving" && /* @__PURE__ */ jsxs2(Fragment, { children: [
+          /* @__PURE__ */ jsx2(Loader2, { size: 12, className: "spin" }),
+          " ",
+          chrome.saving
+        ] }),
+        saveState === "saved" && chrome.saved,
+        saveState === "error" && /* @__PURE__ */ jsxs2("span", { style: { color: "var(--fb-danger)", display: "flex", alignItems: "center", gap: 4 }, children: [
+          /* @__PURE__ */ jsx2(AlertCircle, { size: 12 }),
+          " ",
+          chrome.saveFailed
+        ] })
+      ] }),
+      features.languageSwitcher && /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx2("div", { style: styles.toolbarDivider }),
+        /* @__PURE__ */ jsx2(LanguageToggle, { languages, value: language, onChange: onLanguageChange })
+      ] }),
+      features.previewMode && /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx2("div", { style: styles.toolbarDivider }),
+        /* @__PURE__ */ jsxs2("button", { style: mode === "build" ? styles.tabBtnActive : styles.tabBtn, onClick: () => onModeChange("build"), children: [
+          /* @__PURE__ */ jsx2(Pencil, { size: 14 }),
+          " ",
+          chrome.build
+        ] }),
+        /* @__PURE__ */ jsxs2("button", { style: mode === "preview" ? styles.tabBtnActive : styles.tabBtn, onClick: () => onModeChange("preview"), children: [
+          /* @__PURE__ */ jsx2(Eye, { size: 14 }),
+          " ",
+          chrome.preview
+        ] })
+      ] }),
+      (features.newForm || features.templates) && /* @__PURE__ */ jsx2("div", { style: styles.toolbarDivider }),
+      features.newForm && /* @__PURE__ */ jsxs2("button", { style: styles.ghostBtn, onClick: onNewForm, title: chrome.startNewForm, children: [
+        /* @__PURE__ */ jsx2(FilePlus2, { size: 14 }),
+        " ",
+        chrome.newForm
+      ] }),
+      features.templates && /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsxs2("button", { style: styles.ghostBtn, onClick: onOpenLibrary, title: chrome.openTemplatesTitle, children: [
+          /* @__PURE__ */ jsx2(FolderOpen, { size: 14 }),
+          " ",
+          chrome.templates,
+          savedFormsCount > 0 && /* @__PURE__ */ jsx2("span", { style: styles.countBadge, children: savedFormsCount })
+        ] }),
+        /* @__PURE__ */ jsxs2("button", { style: styles.primaryBtn, onClick: onSaveExisting, title: chrome.saveToLibraryTitle, children: [
+          /* @__PURE__ */ jsx2(Save, { size: 14 }),
+          " ",
+          chrome.save
+        ] })
+      ] }),
+      features.jsonView && /* @__PURE__ */ jsxs2("button", { style: styles.ghostBtn, onClick: onOpenJson, children: [
+        /* @__PURE__ */ jsx2(Code2, { size: 14 }),
+        " ",
+        chrome.viewJson
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/Palette.tsx
+import { useState as useState5 } from "react";
+import { Plus } from "lucide-react";
+
+// src/components/Segmented.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function Segmented({ options, value, onChange }) {
-  return /* @__PURE__ */ jsx("div", { style: styles.segmented, children: options.map((opt) => {
+  return /* @__PURE__ */ jsx3("div", { style: styles.segmented, children: options.map((opt) => {
     const Icon = opt.icon;
     const active = value === opt.value;
-    return /* @__PURE__ */ jsxs("button", { type: "button", style: active ? styles.segmentedBtnActive : styles.segmentedBtn, onClick: () => onChange(opt.value), children: [
-      Icon && /* @__PURE__ */ jsx(Icon, { size: 13 }),
+    return /* @__PURE__ */ jsxs3("button", { type: "button", style: active ? styles.segmentedBtnActive : styles.segmentedBtn, onClick: () => onChange(opt.value), children: [
+      Icon && /* @__PURE__ */ jsx3(Icon, { size: 13 }),
       opt.label
     ] }, opt.value);
   }) });
 }
 
-// src/components/LayoutPopover.tsx
-import { useState as useState5 } from "react";
-import { Ruler, RotateCcw } from "lucide-react";
+// src/components/DesignPanel.tsx
+import { RotateCcw } from "lucide-react";
 
 // src/constants/colors.ts
 var COLOR_SWATCHES = ["", "#1B1E24", "#5B5FEF", "#C4432E", "#0EA5A4", "#D97706"];
@@ -1100,12 +1338,8 @@ function effectiveWidth(width, device) {
 }
 var SPACING_FIELDS = [
   { key: "pagePadding", labelKey: "spacingPagePadding" },
-  { key: "canvasPadding", labelKey: "spacingCanvasPadding" },
   { key: "sectionGap", labelKey: "spacingSectionGap" },
-  { key: "fieldGap", labelKey: "spacingFieldGap" },
-  { key: "toolbarPadding", labelKey: "spacingToolbarPadding" },
-  { key: "panelPadding", labelKey: "spacingPanelPadding" },
-  { key: "ticketPadding", labelKey: "spacingTicketPadding" }
+  { key: "fieldGap", labelKey: "spacingFieldGap" }
 ];
 function buildDeviceOptions(baseMaxWidth, chrome) {
   const mw = Number(baseMaxWidth) > 0 ? baseMaxWidth : DEFAULT_THEME.layout.maxWidth;
@@ -1116,184 +1350,112 @@ function buildDeviceOptions(baseMaxWidth, chrome) {
   ];
 }
 
-// src/components/LayoutPopover.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function LayoutPopover({ chrome, theme, updateThemeColor, updateThemeLayout, resetTheme }) {
-  const [open, setOpen] = useState5(false);
-  return /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx2("button", { style: styles.iconBtn, title: chrome.spacing, onClick: () => setOpen((v) => !v), children: /* @__PURE__ */ jsx2(Ruler, { size: 14 }) }),
-    open && /* @__PURE__ */ jsxs2("div", { style: styles.layoutPanel, children: [
-      /* @__PURE__ */ jsxs2("div", { style: styles.layoutPanelHeader, children: [
-        /* @__PURE__ */ jsxs2("span", { style: { fontWeight: 600, fontSize: 13 }, children: [
-          chrome.theme,
-          " / ",
-          chrome.spacing
-        ] }),
-        /* @__PURE__ */ jsxs2("button", { type: "button", style: styles.resetLinkBtn, onClick: resetTheme, children: [
-          /* @__PURE__ */ jsx2(RotateCcw, { size: 11 }),
-          " ",
-          chrome.reset
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx2("label", { style: styles.propLabel, children: chrome.primaryColor }),
-      /* @__PURE__ */ jsxs2("div", { style: styles.swatchRow, children: [
-        BUTTON_COLOR_SWATCHES.slice(1).map((c) => /* @__PURE__ */ jsx2("button", { type: "button", title: c, style: { ...styles.swatchBtn, background: c, ...theme.primary === c ? styles.swatchBtnActive : {} }, onClick: () => updateThemeColor("primary", c) }, c)),
-        /* @__PURE__ */ jsx2("input", { type: "color", value: theme.primary, onChange: (e) => updateThemeColor("primary", e.target.value), style: styles.colorPickerInput })
-      ] }),
-      /* @__PURE__ */ jsx2("label", { style: styles.propLabel, children: chrome.pageBackground }),
-      /* @__PURE__ */ jsxs2("div", { style: styles.swatchRow, children: [
-        SECTION_BG_SWATCHES.filter(Boolean).map((c) => /* @__PURE__ */ jsx2("button", { type: "button", title: c, style: { ...styles.swatchBtn, background: c, ...theme.pageBackground === c ? styles.swatchBtnActive : {} }, onClick: () => updateThemeColor("pageBackground", c) }, c)),
-        /* @__PURE__ */ jsx2("input", { type: "color", value: theme.pageBackground, onChange: (e) => updateThemeColor("pageBackground", e.target.value), style: styles.colorPickerInput })
-      ] }),
-      /* @__PURE__ */ jsx2("label", { style: styles.propLabel, children: chrome.maxWidthPx }),
-      /* @__PURE__ */ jsx2("input", { type: "number", style: styles.propInput, value: theme.layout.maxWidth, onChange: (e) => updateThemeLayout("maxWidth", Number(e.target.value) || DEFAULT_THEME.layout.maxWidth) }),
-      /* @__PURE__ */ jsx2("div", { style: styles.inspectorDivider }),
-      /* @__PURE__ */ jsx2("div", { style: styles.panelHeading, children: chrome.spacing }),
-      SPACING_FIELDS.map(({ key, labelKey }) => /* @__PURE__ */ jsxs2("div", { style: styles.spacingRow, children: [
-        /* @__PURE__ */ jsx2("span", { style: styles.spacingLabel, children: chrome[labelKey] }),
-        /* @__PURE__ */ jsx2("input", { type: "number", style: styles.spacingInput, value: theme.layout[key], onChange: (e) => updateThemeLayout(key, Number(e.target.value) || 0) })
-      ] }, key))
-    ] })
+// src/components/DesignPanel.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function DesignPanel({ chrome, theme, updateThemeColor, updateThemeLayout, resetTheme }) {
+  return /* @__PURE__ */ jsxs4("div", { children: [
+    /* @__PURE__ */ jsxs4("div", { style: styles.layoutPanelHeader, children: [
+      /* @__PURE__ */ jsx4("span", { style: { fontWeight: 600, fontSize: 13 }, children: chrome.theme }),
+      /* @__PURE__ */ jsxs4("button", { type: "button", style: styles.resetLinkBtn, onClick: resetTheme, children: [
+        /* @__PURE__ */ jsx4(RotateCcw, { size: 11 }),
+        " ",
+        chrome.reset
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx4("label", { style: styles.propLabel, children: chrome.primaryColor }),
+    /* @__PURE__ */ jsxs4("div", { style: styles.swatchRow, children: [
+      BUTTON_COLOR_SWATCHES.slice(1).map((c) => /* @__PURE__ */ jsx4("button", { type: "button", title: c, style: { ...styles.swatchBtn, background: c, ...theme.primary === c ? styles.swatchBtnActive : {} }, onClick: () => updateThemeColor("primary", c) }, c)),
+      /* @__PURE__ */ jsx4("input", { type: "color", value: theme.primary, onChange: (e) => updateThemeColor("primary", e.target.value), style: styles.colorPickerInput })
+    ] }),
+    /* @__PURE__ */ jsx4("label", { style: styles.propLabel, children: chrome.pageBackground }),
+    /* @__PURE__ */ jsxs4("div", { style: styles.swatchRow, children: [
+      SECTION_BG_SWATCHES.filter(Boolean).map((c) => /* @__PURE__ */ jsx4("button", { type: "button", title: c, style: { ...styles.swatchBtn, background: c, ...theme.pageBackground === c ? styles.swatchBtnActive : {} }, onClick: () => updateThemeColor("pageBackground", c) }, c)),
+      /* @__PURE__ */ jsx4("input", { type: "color", value: theme.pageBackground, onChange: (e) => updateThemeColor("pageBackground", e.target.value), style: styles.colorPickerInput })
+    ] }),
+    /* @__PURE__ */ jsx4("label", { style: styles.propLabel, children: chrome.maxWidthPx }),
+    /* @__PURE__ */ jsx4("input", { type: "number", style: styles.propInput, value: theme.layout.maxWidth, onChange: (e) => updateThemeLayout("maxWidth", Number(e.target.value) || DEFAULT_THEME.layout.maxWidth) }),
+    /* @__PURE__ */ jsx4("div", { style: styles.inspectorDivider }),
+    /* @__PURE__ */ jsx4("div", { style: styles.panelHeading, children: chrome.spacing }),
+    SPACING_FIELDS.map(({ key, labelKey }) => /* @__PURE__ */ jsxs4("div", { style: styles.spacingRow, children: [
+      /* @__PURE__ */ jsx4("span", { style: styles.spacingLabel, children: chrome[labelKey] }),
+      /* @__PURE__ */ jsx4("input", { type: "number", style: styles.spacingInput, value: theme.layout[key], onChange: (e) => updateThemeLayout(key, Number(e.target.value) || 0) })
+    ] }, key))
   ] });
 }
 
-// src/components/Toolbar.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function Toolbar({
-  title,
-  language,
-  languages,
-  mode,
-  saveState,
+// src/components/Palette.tsx
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function Palette({
+  activeSectionLabel,
   chrome,
-  themeEditable,
+  onAddField,
+  features,
   theme,
-  savedFormsCount,
-  onTitleChange,
-  onLanguageChange,
-  onModeChange,
-  onOpenSettings,
-  onNewForm,
-  onOpenLibrary,
-  onSaveExisting,
-  onOpenJson,
   updateThemeColor,
   updateThemeLayout,
   resetTheme
 }) {
-  return /* @__PURE__ */ jsxs3("div", { style: styles.toolbar, children: [
-    /* @__PURE__ */ jsxs3("div", { style: styles.toolbarLeft, children: [
-      /* @__PURE__ */ jsx3("div", { style: styles.logoMark, children: "FB" }),
-      /* @__PURE__ */ jsx3("input", { value: t(title, language), onChange: (e) => onTitleChange(e.target.value), style: styles.titleInput, "aria-label": "Form title" })
-    ] }),
-    /* @__PURE__ */ jsxs3("div", { style: styles.toolbarRight, children: [
-      /* @__PURE__ */ jsxs3("span", { style: styles.saveStatus, children: [
-        saveState === "saving" && /* @__PURE__ */ jsxs3(Fragment, { children: [
-          /* @__PURE__ */ jsx3(Loader2, { size: 12, className: "spin" }),
-          " ",
-          chrome.saving
-        ] }),
-        saveState === "saved" && chrome.saved,
-        saveState === "error" && /* @__PURE__ */ jsxs3("span", { style: { color: "var(--fb-danger)", display: "flex", alignItems: "center", gap: 4 }, children: [
-          /* @__PURE__ */ jsx3(AlertCircle, { size: 12 }),
-          " ",
-          chrome.saveFailed
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx3("div", { style: styles.toolbarDivider }),
-      /* @__PURE__ */ jsx3(Languages, { size: 14, color: "var(--fb-muted)" }),
-      /* @__PURE__ */ jsx3(Segmented, { options: languages.map((l) => ({ value: l.code, label: l.label })), value: language, onChange: onLanguageChange }),
-      /* @__PURE__ */ jsx3("div", { style: styles.toolbarDivider }),
-      /* @__PURE__ */ jsxs3("button", { style: mode === "build" ? styles.tabBtnActive : styles.tabBtn, onClick: () => onModeChange("build"), children: [
-        /* @__PURE__ */ jsx3(Pencil, { size: 14 }),
-        " ",
-        chrome.build
-      ] }),
-      /* @__PURE__ */ jsxs3("button", { style: mode === "preview" ? styles.tabBtnActive : styles.tabBtn, onClick: () => onModeChange("preview"), children: [
-        /* @__PURE__ */ jsx3(Eye, { size: 14 }),
-        " ",
-        chrome.preview
-      ] }),
-      /* @__PURE__ */ jsx3("div", { style: styles.toolbarDivider }),
-      themeEditable && /* @__PURE__ */ jsx3(LayoutPopover, { chrome, theme, updateThemeColor, updateThemeLayout, resetTheme }),
-      /* @__PURE__ */ jsx3("button", { style: styles.iconBtn, title: chrome.settings, onClick: onOpenSettings, children: /* @__PURE__ */ jsx3(Settings, { size: 14 }) }),
-      /* @__PURE__ */ jsxs3("button", { style: styles.ghostBtn, onClick: onNewForm, title: chrome.startNewForm, children: [
-        /* @__PURE__ */ jsx3(FilePlus2, { size: 14 }),
-        " ",
-        chrome.newForm
-      ] }),
-      /* @__PURE__ */ jsxs3("button", { style: styles.ghostBtn, onClick: onOpenLibrary, title: chrome.openSavedForm, children: [
-        /* @__PURE__ */ jsx3(FolderOpen, { size: 14 }),
+  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));
+  return /* @__PURE__ */ jsxs5("div", { className: "fb-palette", style: styles.palette, children: [
+    features.design && /* @__PURE__ */ jsx5("div", { style: { marginBottom: 14 }, children: /* @__PURE__ */ jsx5(
+      Segmented,
+      {
+        options: [
+          { value: "blocks", label: chrome.paletteTabBlocks },
+          { value: "design", label: chrome.paletteTabDesign }
+        ],
+        value: tab,
+        onChange: setTab
+      }
+    ) }),
+    tab === "design" && features.design ? /* @__PURE__ */ jsx5(
+      DesignPanel,
+      {
+        chrome,
+        theme,
+        updateThemeColor,
+        updateThemeLayout,
+        resetTheme
+      }
+    ) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
+      /* @__PURE__ */ jsxs5("div", { style: styles.activeSectionHint, children: [
+        chrome.addingTo,
         " ",
-        chrome.myForms,
-        savedFormsCount > 0 && /* @__PURE__ */ jsx3("span", { style: styles.countBadge, children: savedFormsCount })
+        /* @__PURE__ */ jsx5("strong", { children: activeSectionLabel })
       ] }),
-      /* @__PURE__ */ jsxs3("button", { style: styles.primaryBtn, onClick: onSaveExisting, title: chrome.saveToLibraryTitle, children: [
-        /* @__PURE__ */ jsx3(Save, { size: 14 }),
-        " ",
-        chrome.save
+      contentTypes.length > 0 && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+        /* @__PURE__ */ jsx5("div", { style: styles.panelHeading, children: chrome.contentBlocks }),
+        /* @__PURE__ */ jsx5("div", { style: styles.paletteList, children: contentTypes.map((f) => {
+          const Icon = f.icon;
+          return /* @__PURE__ */ jsxs5("button", { style: styles.paletteItem, 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" } })
+          ] }, f.type);
+        }) })
       ] }),
-      /* @__PURE__ */ jsxs3("button", { style: styles.ghostBtn, onClick: onOpenJson, children: [
-        /* @__PURE__ */ jsx3(Code2, { size: 14 }),
-        " ",
-        chrome.viewJson
+      formTypes.length > 0 && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+        /* @__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: [
+            /* @__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" } })
+          ] }, f.type);
+        }) })
       ] })
     ] })
   ] });
 }
 
-// src/components/Palette.tsx
-import { Plus } from "lucide-react";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-function Palette({ activeSectionLabel, chrome, onAddField }) {
-  return /* @__PURE__ */ jsxs4("div", { style: styles.palette, children: [
-    /* @__PURE__ */ jsxs4("div", { style: styles.activeSectionHint, children: [
-      chrome.addingTo,
-      " ",
-      /* @__PURE__ */ jsx4("strong", { children: activeSectionLabel })
-    ] }),
-    /* @__PURE__ */ jsx4("div", { style: styles.panelHeading, children: chrome.contentBlocks }),
-    /* @__PURE__ */ jsx4("div", { style: styles.paletteList, children: CONTENT_TYPES.map((f) => {
-      const Icon = f.icon;
-      return /* @__PURE__ */ jsxs4("button", { style: styles.paletteItem, onClick: () => onAddField(f.type), children: [
-        /* @__PURE__ */ jsx4(Icon, { size: 16, color: "var(--fb-primary)" }),
-        /* @__PURE__ */ jsx4("span", { children: chrome[FIELD_TYPE_CHROME_KEY[f.type]] }),
-        /* @__PURE__ */ jsx4(Plus, { size: 13, color: "#A6A8B3", style: { marginLeft: "auto" } })
-      ] }, f.type);
-    }) }),
-    /* @__PURE__ */ jsx4("div", { style: { ...styles.panelHeading, marginTop: 16 }, children: chrome.formFields }),
-    /* @__PURE__ */ jsx4("div", { style: styles.paletteList, children: FORM_TYPES.map((f) => {
-      const Icon = f.icon;
-      return /* @__PURE__ */ jsxs4("button", { style: styles.paletteItem, onClick: () => onAddField(f.type), children: [
-        /* @__PURE__ */ jsx4(Icon, { size: 16, color: "var(--fb-primary)" }),
-        /* @__PURE__ */ jsx4("span", { children: chrome[FIELD_TYPE_CHROME_KEY[f.type]] }),
-        /* @__PURE__ */ jsx4(Plus, { size: 13, color: "#A6A8B3", style: { marginLeft: "auto" } })
-      ] }, f.type);
-    }) })
-  ] });
-}
-
 // src/components/Canvas.tsx
 import { Layers } from "lucide-react";
 
 // src/components/SectionCard.tsx
-import { ChevronDown as ChevronDown3, ChevronRight, Copy as Copy2, ArrowUp as ArrowUp2, ArrowDown as ArrowDown2, Trash2 as Trash22, RotateCcw as RotateCcw2 } from "lucide-react";
-
-// src/constants/submitStyle.ts
-var SUBMIT_SIZE_OPTIONS = [
-  { value: "sm", label: "S" },
-  { value: "md", label: "M" },
-  { value: "lg", label: "L" }
-];
-var SUBMIT_SIZE_STYLES = {
-  sm: { padding: "7px 12px", fontSize: 12.5 },
-  md: { padding: "10px 16px", fontSize: 13.5 },
-  lg: { padding: "13px 22px", fontSize: 15 }
-};
-function resolveSubmitStyle(style) {
-  const sizeStyle = SUBMIT_SIZE_STYLES[style?.size || "md"] || SUBMIT_SIZE_STYLES.md;
-  return { ...sizeStyle, background: style?.color || "var(--fb-primary)" };
-}
+import { ChevronDown as ChevronDown3, ChevronRight, Copy as Copy2, ArrowUp as ArrowUp2, ArrowDown as ArrowDown2, Trash2 as Trash22 } from "lucide-react";
 
 // src/components/FieldTicket.tsx
 import { ArrowUp, ArrowDown, Copy, Trash2, GripVertical } from "lucide-react";
@@ -1379,7 +1541,7 @@ var ICON_LIBRARY = {
 
 // src/components/fields/ImageBlock.tsx
 import { Image as ImageIcon2 } from "lucide-react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function buildImageStyle(field) {
   const aspectRatio = field.shape === "banner" ? "16 / 5" : "1 / 1";
   return {
@@ -1393,35 +1555,58 @@ function buildImageStyle(field) {
 }
 function ImageBlock({ field, lang }) {
   const shapeStyle = buildImageStyle(field);
-  const img = field.src ? /* @__PURE__ */ jsx5("img", { src: field.src, alt: t(field.alt, lang || "en"), style: shapeStyle }) : /* @__PURE__ */ jsx5("div", { style: { ...shapeStyle, ...styles.imagePlaceholder }, children: /* @__PURE__ */ jsx5(ImageIcon2, { size: 20, color: "var(--fb-muted)" }) });
-  return field.link ? /* @__PURE__ */ jsx5("a", { href: field.link, target: "_blank", rel: "noreferrer", style: { display: "block" }, children: img }) : img;
+  const img = field.src ? /* @__PURE__ */ jsx6("img", { src: field.src, alt: t(field.alt, lang || "en"), style: shapeStyle }) : /* @__PURE__ */ jsx6("div", { style: { ...shapeStyle, ...styles.imagePlaceholder }, children: /* @__PURE__ */ jsx6(ImageIcon2, { size: 20, color: "var(--fb-muted)" }) });
+  return field.link ? /* @__PURE__ */ jsx6("a", { href: field.link, target: "_blank", rel: "noreferrer", style: { display: "block" }, children: img }) : img;
+}
+
+// src/constants/submitStyle.ts
+var SUBMIT_SIZE_OPTIONS = [
+  { value: "sm", label: "S" },
+  { value: "md", label: "M" },
+  { value: "lg", label: "L" }
+];
+var SUBMIT_SIZE_STYLES = {
+  sm: { padding: "7px 12px", fontSize: 12.5 },
+  md: { padding: "10px 16px", fontSize: 13.5 },
+  lg: { padding: "13px 22px", fontSize: 15 }
+};
+function resolveSubmitStyle(style) {
+  const sizeStyle = SUBMIT_SIZE_STYLES[style?.size || "md"] || SUBMIT_SIZE_STYLES.md;
+  return { ...sizeStyle, background: style?.color || "var(--fb-primary)" };
+}
+
+// src/components/fields/ButtonBlock.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function ButtonBlock({ field, lang, onAction }) {
+  return /* @__PURE__ */ jsx7("button", { type: "button", style: { ...styles.submitBtn, ...resolveSubmitStyle(field.buttonStyle) }, onClick: () => onAction?.(field), children: t(field.label, lang) || "..." });
 }
 
 // src/components/fields/FieldBlock.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-function FieldBlock({ field, lang, onFieldChange, strings, chrome, error, isBuild }) {
-  if (field.type === "image") return /* @__PURE__ */ jsx6(ImageBlock, { field, lang });
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function FieldBlock({ field, lang, onFieldChange, strings, chrome, error, isBuild, onButtonAction }) {
+  if (field.type === "image") return /* @__PURE__ */ jsx8(ImageBlock, { field, lang });
+  if (field.type === "button") return /* @__PURE__ */ jsx8(ButtonBlock, { field, lang, onAction: onButtonAction });
   if (field.type === "paragraph") {
     const fontPx = FONT_SIZE_OPTIONS.find((f) => f.value === field.fontSize)?.px || 14;
     const Tag = TAG_TO_ELEMENT[field.tag] || "p";
-    return /* @__PURE__ */ jsx6(Tag, { style: { margin: 0, whiteSpace: "pre-wrap", fontSize: fontPx, fontWeight: field.fontWeight === "bold" ? 700 : 400, fontStyle: field.fontStyle === "italic" ? "italic" : "normal", textAlign: field.textAlign || "left", color: field.color || "var(--fb-ink)", lineHeight: 1.6 }, children: t(field.content, lang) || "..." });
+    return /* @__PURE__ */ jsx8(Tag, { style: { margin: 0, whiteSpace: "pre-wrap", fontSize: fontPx, fontWeight: field.fontWeight === "bold" ? 700 : 400, fontStyle: field.fontStyle === "italic" ? "italic" : "normal", textAlign: field.textAlign || "left", color: field.color || "var(--fb-ink)", lineHeight: 1.6 }, children: t(field.content, lang) || "..." });
   }
   const meta = getMeta(field.type);
   const IconComp = field.showIcon && field.displayIcon ? ICON_LIBRARY[field.displayIcon] : null;
   const isInline = field.labelPosition === "inline" && !meta.boolean;
   const labelText = t(field.label, lang);
   const showLabel = !meta.boolean && !field.hideLabel;
-  return /* @__PURE__ */ jsxs5("div", { children: [
-    /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: isInline ? "row" : "column", alignItems: isInline ? "center" : "stretch", gap: isInline ? 10 : 6 }, children: [
-      showLabel && /* @__PURE__ */ jsxs5("label", { style: { ...styles.previewLabel, marginBottom: isInline ? 0 : 6, flexShrink: 0, width: isInline ? 120 : "auto", display: "flex", alignItems: "center", gap: 6 }, children: [
-        IconComp && /* @__PURE__ */ jsx6(IconComp, { size: 14, color: "#6B6E79" }),
-        labelText || (isBuild ? /* @__PURE__ */ jsx6("span", { style: { fontStyle: "italic", color: "var(--fb-muted)" }, children: chrome?.untitledField || "Untitled field" }) : ""),
-        field.required && /* @__PURE__ */ jsx6("span", { style: { color: "var(--fb-danger)" }, children: " *" })
+  return /* @__PURE__ */ jsxs6("div", { children: [
+    /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: isInline ? "row" : "column", alignItems: isInline ? "center" : "stretch", gap: isInline ? 10 : 6 }, children: [
+      showLabel && /* @__PURE__ */ jsxs6("label", { style: { ...styles.previewLabel, marginBottom: isInline ? 0 : 6, flexShrink: 0, width: isInline ? 120 : "auto", display: "flex", alignItems: "center", gap: 6 }, children: [
+        IconComp && /* @__PURE__ */ jsx8(IconComp, { size: 14, color: "var(--fb-muted)" }),
+        labelText || (isBuild ? /* @__PURE__ */ jsx8("span", { style: { fontStyle: "italic", color: "var(--fb-muted)" }, children: chrome?.untitledField || "Untitled field" }) : ""),
+        field.required && /* @__PURE__ */ jsx8("span", { style: { color: "var(--fb-danger)" }, children: " *" })
       ] }),
-      /* @__PURE__ */ jsx6("div", { style: { flex: 1, minWidth: 0 }, children: renderInteractive(field, lang, onFieldChange, IconComp, !!error, strings) })
+      /* @__PURE__ */ jsx8("div", { style: { flex: 1, minWidth: 0 }, children: renderInteractive(field, lang, onFieldChange, IconComp, !!error, strings) })
     ] }),
-    error && /* @__PURE__ */ jsxs5("div", { style: styles.fieldError, children: [
-      /* @__PURE__ */ jsx6(CircleAlert, { size: 12 }),
+    error && /* @__PURE__ */ jsxs6("div", { style: styles.fieldError, children: [
+      /* @__PURE__ */ jsx8(CircleAlert, { size: 12 }),
       " ",
       error
     ] })
@@ -1435,40 +1620,40 @@ function renderInteractive(field, lang, onFieldChange, IconComp, hasError, strin
   if (field.type === "input") {
     switch (field.inputType) {
       case "number":
-        return /* @__PURE__ */ jsx6("input", { type: "number", ...common, min: field.min ?? void 0, max: field.max ?? void 0 });
+        return /* @__PURE__ */ jsx8("input", { type: "number", ...common, min: field.min ?? void 0, max: field.max ?? void 0 });
       case "email":
-        return /* @__PURE__ */ jsx6("input", { type: "email", ...common });
+        return /* @__PURE__ */ jsx8("input", { type: "email", ...common });
       case "password":
-        return /* @__PURE__ */ jsx6("input", { type: "password", ...common, maxLength: field.maxLength || void 0 });
+        return /* @__PURE__ */ jsx8("input", { type: "password", ...common, maxLength: field.maxLength || void 0 });
       case "phone":
-        return /* @__PURE__ */ jsx6("input", { type: "tel", ...common });
+        return /* @__PURE__ */ jsx8("input", { type: "tel", ...common });
       case "date":
-        return /* @__PURE__ */ jsx6("input", { type: "date", ...common });
+        return /* @__PURE__ */ jsx8("input", { type: "date", ...common });
       case "time":
-        return /* @__PURE__ */ jsx6("input", { type: "time", ...common });
+        return /* @__PURE__ */ jsx8("input", { type: "time", ...common });
       default:
-        return /* @__PURE__ */ jsx6("input", { type: "text", ...common, maxLength: field.maxLength || void 0 });
+        return /* @__PURE__ */ jsx8("input", { type: "text", ...common, maxLength: field.maxLength || void 0 });
     }
   }
   switch (field.type) {
     case "textarea":
-      return /* @__PURE__ */ jsx6("textarea", { ...common, rows: 3, maxLength: field.maxLength || void 0 });
+      return /* @__PURE__ */ jsx8("textarea", { ...common, rows: 3, maxLength: field.maxLength || void 0 });
     case "select":
-      return /* @__PURE__ */ jsxs5("select", { style: inputStyle, value: value || "", onChange: (e) => set(e.target.value), children: [
-        /* @__PURE__ */ jsx6("option", { value: "", children: strings.selectPlaceholder }),
-        (field.options || []).map((o) => /* @__PURE__ */ jsx6("option", { value: o.value, children: t(o.label, lang) }, o.value))
+      return /* @__PURE__ */ jsxs6("select", { style: inputStyle, value: value || "", onChange: (e) => set(e.target.value), children: [
+        /* @__PURE__ */ jsx8("option", { value: "", children: strings.selectPlaceholder }),
+        (field.options || []).map((o) => /* @__PURE__ */ jsx8("option", { value: o.value, children: t(o.label, lang) }, o.value))
       ] });
     case "radio":
-      return /* @__PURE__ */ jsx6("div", { style: { display: "flex", gap: 16, flexWrap: "wrap", marginTop: 4 }, children: (field.options || []).map((o) => /* @__PURE__ */ jsxs5("label", { style: styles.previewRadio, children: [
-        /* @__PURE__ */ jsx6("input", { type: "radio", name: field.id, value: o.value, checked: value === o.value, onChange: (e) => set(e.target.value) }),
+      return /* @__PURE__ */ jsx8("div", { style: { display: "flex", gap: 16, flexWrap: "wrap", marginTop: 4 }, children: (field.options || []).map((o) => /* @__PURE__ */ jsxs6("label", { style: styles.previewRadio, children: [
+        /* @__PURE__ */ jsx8("input", { type: "radio", name: field.id, value: o.value, checked: value === o.value, onChange: (e) => set(e.target.value) }),
         t(o.label, lang)
       ] }, o.value)) });
     case "checkboxGroup": {
       const vals = Array.isArray(value) ? value : [];
-      return /* @__PURE__ */ jsx6("div", { style: { display: "flex", gap: 16, flexWrap: "wrap", marginTop: 4 }, children: (field.options || []).map((o) => {
+      return /* @__PURE__ */ jsx8("div", { style: { display: "flex", gap: 16, flexWrap: "wrap", marginTop: 4 }, children: (field.options || []).map((o) => {
         const checked = vals.includes(o.value);
-        return /* @__PURE__ */ jsxs5("label", { style: styles.previewRadio, children: [
-          /* @__PURE__ */ jsx6("input", { type: "checkbox", checked, onChange: (e) => {
+        return /* @__PURE__ */ jsxs6("label", { style: styles.previewRadio, children: [
+          /* @__PURE__ */ jsx8("input", { type: "checkbox", checked, onChange: (e) => {
             const next = e.target.checked ? [...vals, o.value] : vals.filter((v) => v !== o.value);
             set(next);
           }, style: { accentColor: "var(--fb-primary)" } }),
@@ -1477,25 +1662,25 @@ function renderInteractive(field, lang, onFieldChange, IconComp, hasError, strin
       }) });
     }
     case "checkbox":
-      return /* @__PURE__ */ jsxs5("label", { style: styles.previewRadio, children: [
-        /* @__PURE__ */ jsx6("input", { type: "checkbox", checked: !!value, onChange: (e) => set(e.target.checked), style: { accentColor: "var(--fb-primary)" } }),
-        IconComp && /* @__PURE__ */ jsx6(IconComp, { size: 14, color: "#6B6E79" }),
+      return /* @__PURE__ */ jsxs6("label", { style: styles.previewRadio, children: [
+        /* @__PURE__ */ jsx8("input", { type: "checkbox", checked: !!value, onChange: (e) => set(e.target.checked), style: { accentColor: "var(--fb-primary)" } }),
+        IconComp && /* @__PURE__ */ jsx8(IconComp, { size: 14, color: "var(--fb-muted)" }),
         t(field.label, lang),
-        field.required && /* @__PURE__ */ jsx6("span", { style: { color: "var(--fb-danger)" }, children: " *" })
+        field.required && /* @__PURE__ */ jsx8("span", { style: { color: "var(--fb-danger)" }, children: " *" })
       ] });
     case "toggle":
-      return /* @__PURE__ */ jsxs5("label", { style: styles.previewRadio, children: [
-        /* @__PURE__ */ jsx6("input", { type: "checkbox", checked: !!value, onChange: (e) => set(e.target.checked), style: { accentColor: "var(--fb-primary)" } }),
-        IconComp && /* @__PURE__ */ jsx6(IconComp, { size: 14, color: "#6B6E79" }),
+      return /* @__PURE__ */ jsxs6("label", { style: styles.previewRadio, children: [
+        /* @__PURE__ */ jsx8("input", { type: "checkbox", checked: !!value, onChange: (e) => set(e.target.checked), style: { accentColor: "var(--fb-primary)" } }),
+        IconComp && /* @__PURE__ */ jsx8(IconComp, { size: 14, color: "var(--fb-muted)" }),
         t(field.label, lang)
       ] });
     default:
-      return /* @__PURE__ */ jsx6("input", { type: "text", ...common });
+      return /* @__PURE__ */ jsx8("input", { type: "text", ...common });
   }
 }
 
 // src/components/FieldTicket.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function FieldTicket({
   field,
   idx,
@@ -1504,6 +1689,7 @@ function FieldTicket({
   chrome,
   strings,
   language,
+  dragEnabled,
   onSelect,
   onFieldChange,
   onMoveField,
@@ -1515,7 +1701,7 @@ function FieldTicket({
   const meta = getMeta(field.type);
   const Icon = meta.icon;
   const widthPct = WIDTH_PERCENT[field.width || "1/1"];
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       ...dropZoneHandlers,
@@ -1529,35 +1715,35 @@ function FieldTicket({
         ...isDragOver ? styles.ticketDragOver : {}
       },
       children: [
-        /* @__PURE__ */ jsx7("div", { style: styles.ticketIndex, children: String(idx + 1).padStart(2, "0") }),
-        /* @__PURE__ */ jsx7("div", { style: styles.ticketPerforation }),
-        /* @__PURE__ */ jsxs6("div", { style: styles.ticketBody, children: [
-          /* @__PURE__ */ jsxs6("div", { style: styles.ticketTop, children: [
-            /* @__PURE__ */ jsx7("span", { ...dragHandleProps, style: { cursor: "grab", display: "flex" }, children: /* @__PURE__ */ jsx7(GripVertical, { size: 14, color: "#C4C6D0" }) }),
-            /* @__PURE__ */ jsx7(Icon, { size: 13, color: "var(--fb-primary)" }),
-            /* @__PURE__ */ jsxs6("span", { style: styles.typeBadge, children: [
+        /* @__PURE__ */ jsx9("div", { style: styles.ticketIndex, children: String(idx + 1).padStart(2, "0") }),
+        /* @__PURE__ */ jsx9("div", { style: styles.ticketPerforation }),
+        /* @__PURE__ */ jsxs7("div", { style: styles.ticketBody, children: [
+          /* @__PURE__ */ jsxs7("div", { style: styles.ticketTop, children: [
+            dragEnabled && /* @__PURE__ */ jsx9("span", { ...dragHandleProps, style: { cursor: "grab", display: "flex" }, children: /* @__PURE__ */ jsx9(GripVertical, { size: 14, color: "var(--fb-muted)" }) }),
+            /* @__PURE__ */ jsx9(Icon, { size: 13, color: "var(--fb-primary)" }),
+            /* @__PURE__ */ jsxs7("span", { style: styles.typeBadge, children: [
               chrome[FIELD_TYPE_CHROME_KEY[field.type]] || field.type,
               field.type === "input" && field.inputType && field.inputType !== "text" ? ` \xB7 ${chrome[INPUT_SUBTYPE_CHROME_KEY[field.inputType]]}` : ""
             ] }),
-            field.required && /* @__PURE__ */ jsx7("span", { style: styles.requiredBadge, children: chrome.required })
+            field.required && /* @__PURE__ */ jsx9("span", { style: styles.requiredBadge, children: chrome.required })
           ] }),
-          field.width && field.width !== "1/1" || field.labelPosition === "inline" || field.verticalAlign !== "top" || field.hideLabel ? /* @__PURE__ */ jsxs6("div", { style: styles.chipRow, children: [
-            field.width && field.width !== "1/1" && /* @__PURE__ */ jsxs6("span", { style: styles.miniBadge, children: [
+          field.width && field.width !== "1/1" || field.labelPosition === "inline" || field.verticalAlign !== "top" || field.hideLabel ? /* @__PURE__ */ jsxs7("div", { style: styles.chipRow, children: [
+            field.width && field.width !== "1/1" && /* @__PURE__ */ jsxs7("span", { style: styles.miniBadge, children: [
               chrome.width,
               " ",
               field.width
             ] }),
-            field.labelPosition === "inline" && /* @__PURE__ */ jsx7("span", { style: styles.miniBadge, children: chrome.inline }),
-            field.verticalAlign !== "top" && /* @__PURE__ */ jsx7("span", { style: styles.miniBadge, children: chrome[field.verticalAlign] }),
-            field.hideLabel && /* @__PURE__ */ jsx7("span", { style: styles.miniBadge, children: chrome.hideLabel })
+            field.labelPosition === "inline" && /* @__PURE__ */ jsx9("span", { style: styles.miniBadge, children: chrome.inline }),
+            field.verticalAlign !== "top" && /* @__PURE__ */ jsx9("span", { style: styles.miniBadge, children: chrome[field.verticalAlign] }),
+            field.hideLabel && /* @__PURE__ */ jsx9("span", { style: styles.miniBadge, children: chrome.hideLabel })
           ] }) : null,
-          /* @__PURE__ */ jsx7("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ jsx7(FieldBlock, { field, lang: language, onFieldChange, strings, chrome, isBuild: true }) })
+          /* @__PURE__ */ jsx9("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ jsx9(FieldBlock, { field, lang: language, onFieldChange, strings, chrome, isBuild: true }) })
         ] }),
-        /* @__PURE__ */ jsxs6("div", { style: styles.ticketActions, onClick: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ jsx7("button", { style: styles.iconBtn, title: chrome.moveUp, onClick: () => onMoveField(field.id, -1), children: /* @__PURE__ */ jsx7(ArrowUp, { size: 13 }) }),
-          /* @__PURE__ */ jsx7("button", { style: styles.iconBtn, title: chrome.moveDown, onClick: () => onMoveField(field.id, 1), children: /* @__PURE__ */ jsx7(ArrowDown, { size: 13 }) }),
-          /* @__PURE__ */ jsx7("button", { style: styles.iconBtn, title: chrome.duplicate, onClick: () => onDuplicateField(field.id), children: /* @__PURE__ */ jsx7(Copy, { size: 13 }) }),
-          /* @__PURE__ */ jsx7("button", { style: { ...styles.iconBtn, ...styles.iconBtnDanger }, title: chrome.delete, onClick: () => onDeleteField(field.id), children: /* @__PURE__ */ jsx7(Trash2, { size: 13 }) })
+        /* @__PURE__ */ jsxs7("div", { style: styles.ticketActions, onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsx9("button", { style: styles.iconBtn, title: chrome.moveUp, onClick: () => onMoveField(field.id, -1), children: /* @__PURE__ */ jsx9(ArrowUp, { size: 13 }) }),
+          /* @__PURE__ */ jsx9("button", { style: styles.iconBtn, title: chrome.moveDown, onClick: () => onMoveField(field.id, 1), children: /* @__PURE__ */ jsx9(ArrowDown, { size: 13 }) }),
+          /* @__PURE__ */ jsx9("button", { style: styles.iconBtn, title: chrome.duplicate, onClick: () => onDuplicateField(field.id), children: /* @__PURE__ */ jsx9(Copy, { size: 13 }) }),
+          /* @__PURE__ */ jsx9("button", { style: { ...styles.iconBtn, ...styles.iconBtnDanger }, title: chrome.delete, onClick: () => onDeleteField(field.id), children: /* @__PURE__ */ jsx9(Trash2, { size: 13 }) })
         ] })
       ]
     }
@@ -1565,19 +1751,18 @@ function FieldTicket({
 }
 
 // src/components/SectionCard.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 function SectionCard({
   section,
   sIdx,
   sectionsLength,
   isActive,
-  submitMode,
-  submitStyle,
   selectedId,
   dragOverKey,
   chrome,
   strings,
   language,
+  features,
   onActivate,
   onToggleCollapse,
   onUpdateTitle,
@@ -1585,8 +1770,6 @@ function SectionCard({
   onDuplicateSection,
   onMoveSection,
   onDeleteSection,
-  onUpdateSectionSubmitStyle,
-  onClearSectionSubmitStyle,
   onSelectField,
   onFieldChange,
   onMoveField,
@@ -1595,19 +1778,19 @@ function SectionCard({
   getDropZoneHandlers,
   getDragHandleProps
 }) {
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       style: { ...styles.sectionBlock, background: section.background || "transparent", border: isActive ? "1px solid var(--fb-primary)" : "1px dashed var(--fb-border)" },
       onClick: onActivate,
       children: [
-        /* @__PURE__ */ jsxs7("div", { style: styles.sectionHeader, children: [
-          /* @__PURE__ */ jsx8("button", { style: styles.chevronBtn, onClick: (e) => {
+        /* @__PURE__ */ jsxs8("div", { style: styles.sectionHeader, children: [
+          /* @__PURE__ */ jsx10("button", { style: styles.chevronBtn, onClick: (e) => {
             e.stopPropagation();
             onToggleCollapse();
-          }, children: section.collapsed ? /* @__PURE__ */ jsx8(ChevronRight, { size: 15 }) : /* @__PURE__ */ jsx8(ChevronDown3, { size: 15 }) }),
-          /* @__PURE__ */ jsx8("span", { style: { ...styles.colorDot, background: section.background || "var(--fb-canvas)" } }),
-          /* @__PURE__ */ jsx8(
+          }, children: section.collapsed ? /* @__PURE__ */ jsx10(ChevronRight, { size: 15 }) : /* @__PURE__ */ jsx10(ChevronDown3, { size: 15 }) }),
+          /* @__PURE__ */ jsx10("span", { style: { ...styles.colorDot, background: section.background || "var(--fb-canvas)" } }),
+          /* @__PURE__ */ jsx10(
             "input",
             {
               style: styles.sectionTitleInput,
@@ -1617,29 +1800,21 @@ function SectionCard({
               onClick: (e) => e.stopPropagation()
             }
           ),
-          section.collapsed && /* @__PURE__ */ jsx8("span", { style: styles.miniBadge, children: chrome.fieldsCount(section.fields.length) }),
-          /* @__PURE__ */ jsxs7("div", { style: styles.sectionHeaderActions, onClick: (e) => e.stopPropagation(), children: [
-            !section.collapsed && /* @__PURE__ */ jsxs7("div", { style: styles.swatchRow, children: [
-              SECTION_BG_SWATCHES.map((c) => /* @__PURE__ */ jsx8("button", { type: "button", title: c || chrome.none, style: { ...styles.swatchBtn, background: c || "var(--fb-canvas)", ...section.background === c ? styles.swatchBtnActive : {} }, onClick: () => onUpdateBackground(c) }, c || "none")),
-              /* @__PURE__ */ jsx8("input", { type: "color", title: chrome.customColor, value: /^#/.test(section.background) ? section.background : "#ffffff", onChange: (e) => onUpdateBackground(e.target.value), style: styles.colorPickerInput })
+          section.collapsed && /* @__PURE__ */ jsx10("span", { style: styles.miniBadge, children: chrome.fieldsCount(section.fields.length) }),
+          /* @__PURE__ */ jsxs8("div", { style: styles.sectionHeaderActions, onClick: (e) => e.stopPropagation(), children: [
+            features.sections && !section.collapsed && /* @__PURE__ */ jsxs8("div", { style: styles.swatchRow, children: [
+              SECTION_BG_SWATCHES.map((c) => /* @__PURE__ */ jsx10("button", { type: "button", title: c || chrome.none, style: { ...styles.swatchBtn, background: c || "var(--fb-canvas)", ...section.background === c ? styles.swatchBtnActive : {} }, onClick: () => onUpdateBackground(c) }, c || "none")),
+              /* @__PURE__ */ jsx10("input", { type: "color", title: chrome.customColor, value: /^#/.test(section.background) ? section.background : "#ffffff", onChange: (e) => onUpdateBackground(e.target.value), style: styles.colorPickerInput })
             ] }),
-            /* @__PURE__ */ jsx8("button", { style: styles.iconBtn, title: chrome.duplicate, onClick: onDuplicateSection, children: /* @__PURE__ */ jsx8(Copy2, { size: 13 }) }),
-            /* @__PURE__ */ jsx8("button", { style: styles.iconBtn, title: chrome.moveUp, disabled: sIdx === 0, onClick: () => onMoveSection(-1), children: /* @__PURE__ */ jsx8(ArrowUp2, { size: 13 }) }),
-            /* @__PURE__ */ jsx8("button", { style: styles.iconBtn, title: chrome.moveDown, disabled: sIdx === sectionsLength - 1, onClick: () => onMoveSection(1), children: /* @__PURE__ */ jsx8(ArrowDown2, { size: 13 }) }),
-            /* @__PURE__ */ jsx8("button", { style: { ...styles.iconBtn, ...styles.iconBtnDanger }, title: chrome.deleteSection, disabled: sectionsLength <= 1, onClick: onDeleteSection, children: /* @__PURE__ */ jsx8(Trash22, { size: 13 }) })
-          ] })
-        ] }),
-        !section.collapsed && submitMode === "perSection" && /* @__PURE__ */ jsxs7("div", { style: styles.submitStyleRow, onClick: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ jsx8("span", { style: styles.miniLabel, children: chrome.submitStyle }),
-          /* @__PURE__ */ jsx8("div", { style: styles.swatchRow, children: BUTTON_COLOR_SWATCHES.map((c) => /* @__PURE__ */ jsx8("button", { type: "button", title: c || chrome.none, style: { ...styles.swatchBtn, background: c || "var(--fb-primary)", ...(section.submitStyle?.color || "") === c ? styles.swatchBtnActive : {} }, onClick: () => onUpdateSectionSubmitStyle({ color: c }) }, c || "inherit")) }),
-          /* @__PURE__ */ jsx8(Segmented, { options: SUBMIT_SIZE_OPTIONS, value: section.submitStyle?.size || submitStyle.size, onChange: (v) => onUpdateSectionSubmitStyle({ size: v }) }),
-          section.submitStyle && /* @__PURE__ */ jsxs7("button", { type: "button", style: styles.resetLinkBtn, onClick: onClearSectionSubmitStyle, children: [
-            /* @__PURE__ */ jsx8(RotateCcw2, { size: 11 }),
-            " ",
-            chrome.reset
+            features.sections && /* @__PURE__ */ jsxs8(Fragment3, { children: [
+              /* @__PURE__ */ jsx10("button", { style: styles.iconBtn, title: chrome.duplicate, onClick: onDuplicateSection, children: /* @__PURE__ */ jsx10(Copy2, { size: 13 }) }),
+              /* @__PURE__ */ jsx10("button", { style: styles.iconBtn, title: chrome.moveUp, disabled: sIdx === 0, onClick: () => onMoveSection(-1), children: /* @__PURE__ */ jsx10(ArrowUp2, { size: 13 }) }),
+              /* @__PURE__ */ jsx10("button", { style: styles.iconBtn, title: chrome.moveDown, disabled: sIdx === sectionsLength - 1, onClick: () => onMoveSection(1), children: /* @__PURE__ */ jsx10(ArrowDown2, { size: 13 }) }),
+              /* @__PURE__ */ jsx10("button", { style: { ...styles.iconBtn, ...styles.iconBtnDanger }, title: chrome.deleteSection, disabled: sectionsLength <= 1, onClick: onDeleteSection, children: /* @__PURE__ */ jsx10(Trash22, { size: 13 }) })
+            ] })
           ] })
         ] }),
-        !section.collapsed && (section.fields.length === 0 ? /* @__PURE__ */ jsx8("div", { style: styles.sectionEmpty, children: chrome.noFieldsInSection }) : /* @__PURE__ */ jsx8("div", { style: styles.fieldList, children: section.fields.map((field, idx) => /* @__PURE__ */ jsx8(
+        !section.collapsed && (section.fields.length === 0 ? /* @__PURE__ */ jsx10("div", { style: styles.sectionEmpty, children: chrome.noFieldsInSection }) : /* @__PURE__ */ jsx10("div", { style: styles.fieldList, children: section.fields.map((field, idx) => /* @__PURE__ */ jsx10(
           FieldTicket,
           {
             field,
@@ -1650,6 +1825,7 @@ function SectionCard({
             chrome,
             strings,
             language,
+            dragEnabled: features.dragReorder,
             onSelect: () => onSelectField(field.id),
             onFieldChange,
             onMoveField,
@@ -1666,17 +1842,16 @@ function SectionCard({
 }
 
 // src/components/Canvas.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 function Canvas({
   sections,
   activeSectionId,
-  submitMode,
-  submitStyle,
   selectedId,
   dragOverKey,
   chrome,
   strings,
   language,
+  features,
   onActivateSection,
   onToggleSectionCollapse,
   onUpdateSectionTitle,
@@ -1684,8 +1859,6 @@ function Canvas({
   onDuplicateSection,
   onMoveSection,
   onDeleteSection,
-  onUpdateSectionSubmitStyle,
-  onClearSectionSubmitStyle,
   onAddSection,
   onSelectField,
   onFieldChange,
@@ -1695,21 +1868,20 @@ function Canvas({
   getDropZoneHandlers,
   getDragHandleProps
 }) {
-  return /* @__PURE__ */ jsxs8("div", { style: styles.canvas, children: [
-    sections.map((section, sIdx) => /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs9("div", { className: "fb-canvas", style: styles.canvas, children: [
+    sections.map((section, sIdx) => /* @__PURE__ */ jsx11(
       SectionCard,
       {
         section,
         sIdx,
         sectionsLength: sections.length,
         isActive: activeSectionId === section.id,
-        submitMode,
-        submitStyle,
         selectedId,
         dragOverKey,
         chrome,
         strings,
         language,
+        features,
         onActivate: () => onActivateSection(section.id),
         onToggleCollapse: () => onToggleSectionCollapse(section.id),
         onUpdateTitle: (value) => onUpdateSectionTitle(section.id, value),
@@ -1717,8 +1889,6 @@ function Canvas({
         onDuplicateSection: () => onDuplicateSection(section.id),
         onMoveSection: (dir) => onMoveSection(section.id, dir),
         onDeleteSection: () => onDeleteSection(section.id),
-        onUpdateSectionSubmitStyle: (patch) => onUpdateSectionSubmitStyle(section.id, patch),
-        onClearSectionSubmitStyle: () => onClearSectionSubmitStyle(section.id),
         onSelectField: (fieldId) => onSelectField(section.id, fieldId),
         onFieldChange,
         onMoveField,
@@ -1729,8 +1899,8 @@ function Canvas({
       },
       section.id
     )),
-    /* @__PURE__ */ jsxs8("button", { style: styles.addSectionBtn, onClick: onAddSection, children: [
-      /* @__PURE__ */ jsx9(Layers, { size: 14 }),
+    features.sections && /* @__PURE__ */ jsxs9("button", { style: styles.addSectionBtn, onClick: onAddSection, children: [
+      /* @__PURE__ */ jsx11(Layers, { size: 14 }),
       " ",
       chrome.addSection
     ] })
@@ -1741,27 +1911,27 @@ function Canvas({
 import { Bold, Italic, X, Plus as Plus2, Trash2 as Trash23 } from "lucide-react";
 
 // src/components/fields/DefaultValueEditor.tsx
-import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 function DefaultValueEditor({ field, meta, lang, chrome, onChange }) {
   if (meta.isContent) return null;
   const f = field;
   if (meta.boolean) {
-    return /* @__PURE__ */ jsxs9(Fragment2, { children: [
-      /* @__PURE__ */ jsx10("label", { style: styles.propLabel, children: chrome.defaultValue }),
-      /* @__PURE__ */ jsxs9("button", { style: styles.toggleRow, onClick: () => onChange({ defaultValue: !f.defaultValue }), children: [
-        /* @__PURE__ */ jsx10("span", { style: { ...styles.toggleTrack, background: f.defaultValue ? "var(--fb-primary)" : "var(--fb-border)" }, children: /* @__PURE__ */ jsx10("span", { style: { ...styles.toggleThumb, transform: f.defaultValue ? "translateX(16px)" : "translateX(0)" } }) }),
-        /* @__PURE__ */ jsx10("span", { style: { fontSize: 13, color: "#4A4D57" }, children: f.defaultValue ? chrome.checked : chrome.unchecked })
+    return /* @__PURE__ */ jsxs10(Fragment4, { children: [
+      /* @__PURE__ */ jsx12("label", { style: styles.propLabel, children: chrome.defaultValue }),
+      /* @__PURE__ */ jsxs10("button", { style: styles.toggleRow, onClick: () => onChange({ defaultValue: !f.defaultValue }), children: [
+        /* @__PURE__ */ jsx12("span", { style: { ...styles.toggleTrack, background: f.defaultValue ? "var(--fb-primary)" : "var(--fb-border)" }, children: /* @__PURE__ */ jsx12("span", { style: { ...styles.toggleThumb, transform: f.defaultValue ? "translateX(16px)" : "translateX(0)" } }) }),
+        /* @__PURE__ */ jsx12("span", { style: { fontSize: 13, color: "var(--fb-ink)" }, children: f.defaultValue ? chrome.checked : chrome.unchecked })
       ] })
     ] });
   }
   if (meta.multiValue) {
     const selectedVals = f.defaultValue || [];
-    return /* @__PURE__ */ jsxs9(Fragment2, { children: [
-      /* @__PURE__ */ jsx10("label", { style: styles.propLabel, children: chrome.defaultChecked }),
-      /* @__PURE__ */ jsx10("div", { style: styles.optionList, children: (f.options || []).map((o) => {
+    return /* @__PURE__ */ jsxs10(Fragment4, { children: [
+      /* @__PURE__ */ jsx12("label", { style: styles.propLabel, children: chrome.defaultChecked }),
+      /* @__PURE__ */ jsx12("div", { style: styles.optionList, children: (f.options || []).map((o) => {
         const checked = selectedVals.includes(o.value);
-        return /* @__PURE__ */ jsxs9("label", { style: { ...styles.previewRadio, cursor: "pointer" }, children: [
-          /* @__PURE__ */ jsx10("input", { type: "checkbox", checked, onChange: (e) => {
+        return /* @__PURE__ */ jsxs10("label", { style: { ...styles.previewRadio, cursor: "pointer" }, children: [
+          /* @__PURE__ */ jsx12("input", { type: "checkbox", checked, onChange: (e) => {
             const next = e.target.checked ? [...selectedVals, o.value] : selectedVals.filter((v) => v !== o.value);
             onChange({ defaultValue: next });
           }, style: { accentColor: "var(--fb-primary)" } }),
@@ -1771,32 +1941,33 @@ function DefaultValueEditor({ field, meta, lang, chrome, onChange }) {
     ] });
   }
   if (meta.options) {
-    return /* @__PURE__ */ jsxs9(Fragment2, { children: [
-      /* @__PURE__ */ jsx10("label", { style: styles.propLabel, children: chrome.defaultValue }),
-      /* @__PURE__ */ jsxs9("select", { style: styles.propInput, value: f.defaultValue || "", onChange: (e) => onChange({ defaultValue: e.target.value }), children: [
-        /* @__PURE__ */ jsx10("option", { value: "", children: chrome.none }),
-        (f.options || []).map((o) => /* @__PURE__ */ jsx10("option", { value: o.value, children: t(o.label, lang) }, o.value))
+    return /* @__PURE__ */ jsxs10(Fragment4, { children: [
+      /* @__PURE__ */ jsx12("label", { style: styles.propLabel, children: chrome.defaultValue }),
+      /* @__PURE__ */ jsxs10("select", { style: styles.propInput, value: f.defaultValue || "", onChange: (e) => onChange({ defaultValue: e.target.value }), children: [
+        /* @__PURE__ */ jsx12("option", { value: "", children: chrome.none }),
+        (f.options || []).map((o) => /* @__PURE__ */ jsx12("option", { value: o.value, children: t(o.label, lang) }, o.value))
       ] })
     ] });
   }
   const htmlType = field.type === "input" && field.inputType === "number" ? "number" : field.type === "input" && field.inputType === "date" ? "date" : field.type === "input" && field.inputType === "time" ? "time" : "text";
-  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
-    /* @__PURE__ */ jsx10("label", { style: styles.propLabel, children: chrome.defaultValue }),
-    /* @__PURE__ */ jsx10("input", { type: htmlType, style: styles.propInput, value: f.defaultValue || "", onChange: (e) => onChange({ defaultValue: e.target.value }) })
+  return /* @__PURE__ */ jsxs10(Fragment4, { children: [
+    /* @__PURE__ */ jsx12("label", { style: styles.propLabel, children: chrome.defaultValue }),
+    /* @__PURE__ */ jsx12("input", { type: htmlType, style: styles.propInput, value: f.defaultValue || "", onChange: (e) => onChange({ defaultValue: e.target.value }) })
   ] });
 }
 
 // src/components/Inspector.tsx
-import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
-function Inspector({ selected, language, chrome, onUpdateField, onDeleteField, onUpdateOption, onAddOption, onRemoveOption }) {
-  return /* @__PURE__ */ jsxs10("div", { style: styles.inspector, children: [
-    /* @__PURE__ */ jsx11("div", { style: styles.panelHeading, children: chrome.properties }),
-    !selected ? /* @__PURE__ */ jsx11("div", { style: styles.inspectorEmpty, children: chrome.selectFieldHint }) : /* @__PURE__ */ jsx11(
+import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+function Inspector({ selected, language, chrome, features, onUpdateField, onDeleteField, onUpdateOption, onAddOption, onRemoveOption }) {
+  return /* @__PURE__ */ jsxs11("div", { className: "fb-inspector", style: styles.inspector, children: [
+    /* @__PURE__ */ jsx13("div", { style: styles.panelHeading, children: chrome.properties }),
+    !selected ? /* @__PURE__ */ jsx13("div", { style: styles.inspectorEmpty, children: chrome.selectFieldHint }) : /* @__PURE__ */ jsx13(
       InspectorBody,
       {
         selected,
         language,
         chrome,
+        features,
         onUpdateField,
         onDeleteField,
         onUpdateOption,
@@ -1806,119 +1977,145 @@ function Inspector({ selected, language, chrome, onUpdateField, onDeleteField, o
     )
   ] });
 }
-function InspectorBody({ selected, language, chrome, onUpdateField, onDeleteField, onUpdateOption, onAddOption, onRemoveOption }) {
+function InspectorBody({ selected, language, chrome, features, onUpdateField, onDeleteField, onUpdateOption, onAddOption, onRemoveOption }) {
   const meta = getMeta(selected.type);
   const f = selected;
-  return /* @__PURE__ */ jsxs10("div", { style: styles.inspectorBody, children: [
-    !meta.isContent && /* @__PURE__ */ jsxs10(Fragment3, { children: [
-      /* @__PURE__ */ jsx11("label", { style: styles.propLabel, children: chrome.label }),
-      /* @__PURE__ */ jsx11("input", { style: styles.propInput, value: t(selected.label, language), onChange: (e) => onUpdateField({ label: withLang(selected.label, language, e.target.value) }) }),
-      /* @__PURE__ */ jsxs10("label", { style: styles.toggleRow, children: [
-        /* @__PURE__ */ jsx11("input", { type: "checkbox", checked: !!selected.hideLabel, onChange: (e) => onUpdateField({ hideLabel: e.target.checked }), style: { width: 15, height: 15, accentColor: "var(--fb-primary)" } }),
-        /* @__PURE__ */ jsx11("span", { style: { fontSize: 13, color: "#4A4D57" }, children: chrome.hideLabel })
+  return /* @__PURE__ */ jsxs11("div", { style: styles.inspectorBody, children: [
+    (!meta.isContent || selected.type === "button") && /* @__PURE__ */ jsxs11(Fragment5, { children: [
+      /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: selected.type === "button" ? chrome.buttonText : chrome.label }),
+      /* @__PURE__ */ jsx13("input", { style: styles.propInput, value: t(selected.label, language), onChange: (e) => onUpdateField({ label: withLang(selected.label, language, e.target.value) }) }),
+      !meta.isContent && /* @__PURE__ */ jsxs11("label", { style: styles.toggleRow, children: [
+        /* @__PURE__ */ jsx13("input", { type: "checkbox", checked: !!selected.hideLabel, onChange: (e) => onUpdateField({ hideLabel: e.target.checked }), style: { width: 15, height: 15, accentColor: "var(--fb-primary)" } }),
+        /* @__PURE__ */ jsx13("span", { style: { fontSize: 13, color: "var(--fb-ink)" }, children: chrome.hideLabel })
       ] })
     ] }),
-    meta.hasSubtype && /* @__PURE__ */ jsxs10(Fragment3, { children: [
-      /* @__PURE__ */ jsx11("label", { style: styles.propLabel, children: chrome.inputType }),
-      /* @__PURE__ */ jsx11("select", { style: styles.propInput, value: f.inputType || "text", onChange: (e) => onUpdateField({ inputType: e.target.value }), children: INPUT_SUBTYPES.map((s) => /* @__PURE__ */ jsx11("option", { value: s, children: chrome[INPUT_SUBTYPE_CHROME_KEY[s]] }, s)) })
+    meta.hasSubtype && /* @__PURE__ */ jsxs11(Fragment5, { children: [
+      /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.inputType }),
+      /* @__PURE__ */ jsx13("select", { style: styles.propInput, value: f.inputType || "text", onChange: (e) => onUpdateField({ inputType: e.target.value }), children: INPUT_SUBTYPES.map((s) => /* @__PURE__ */ jsx13("option", { value: s, children: chrome[INPUT_SUBTYPE_CHROME_KEY[s]] }, s)) })
     ] }),
-    selected.type === "paragraph" && /* @__PURE__ */ jsxs10(Fragment3, { children: [
-      /* @__PURE__ */ jsx11("label", { style: styles.propLabel, children: chrome.content }),
-      /* @__PURE__ */ jsx11("textarea", { style: { ...styles.propInput, minHeight: 70, resize: "vertical" }, value: t(selected.content, language), onChange: (e) => onUpdateField({ content: withLang(selected.content, language, e.target.value) }) }),
-      /* @__PURE__ */ jsx11("div", { style: styles.inspectorDivider }),
-      /* @__PURE__ */ jsx11("div", { style: styles.panelHeading, children: chrome.typography }),
-      /* @__PURE__ */ jsx11("label", { style: styles.propLabel, children: chrome.headingStyle }),
-      /* @__PURE__ */ jsx11(Segmented, { options: PARAGRAPH_TAG_OPTIONS.map((v) => ({ value: v, label: TAG_CHROME_KEY[v] ? chrome[TAG_CHROME_KEY[v]] : v.toUpperCase() })), value: selected.tag || "p", onChange: (v) => onUpdateField({ tag: v, ...TAG_PRESETS[v] }) }),
-      /* @__PURE__ */ jsx11("label", { style: styles.propLabel, children: chrome.width }),
-      /* @__PURE__ */ jsx11(Segmented, { options: FONT_SIZE_OPTIONS, value: selected.fontSize || "md", onChange: (v) => onUpdateField({ fontSize: v }) }),
-      /* @__PURE__ */ jsx11("label", { style: styles.propLabel, children: chrome.style }),
-      /* @__PURE__ */ jsxs10("div", { style: styles.styleToggleRow, children: [
-        /* @__PURE__ */ jsx11("button", { type: "button", style: selected.fontWeight === "bold" ? styles.styleToggleActive : styles.styleToggle, onClick: () => onUpdateField({ fontWeight: selected.fontWeight === "bold" ? "normal" : "bold" }), children: /* @__PURE__ */ jsx11(Bold, { size: 14 }) }),
-        /* @__PURE__ */ jsx11("button", { type: "button", style: selected.fontStyle === "italic" ? styles.styleToggleActive : styles.styleToggle, onClick: () => onUpdateField({ fontStyle: selected.fontStyle === "italic" ? "normal" : "italic" }), children: /* @__PURE__ */ jsx11(Italic, { size: 14 }) })
-      ] }),
-      /* @__PURE__ */ jsx11("label", { style: styles.propLabel, children: chrome.align }),
-      /* @__PURE__ */ jsx11(Segmented, { options: TEXT_ALIGN_OPTIONS, value: selected.textAlign || "left", onChange: (v) => onUpdateField({ textAlign: v }) }),
-      /* @__PURE__ */ jsx11("label", { style: styles.propLabel, children: chrome.color }),
-      /* @__PURE__ */ jsxs10("div", { style: styles.swatchRow, children: [
-        COLOR_SWATCHES.map((c) => /* @__PURE__ */ jsx11("button", { type: "button", title: c || chrome.none, style: { ...styles.swatchBtn, background: c || "var(--fb-ink)", ...selected.color === c ? styles.swatchBtnActive : {} }, onClick: () => onUpdateField({ color: c }) }, c || "default")),
-        /* @__PURE__ */ jsx11("input", { type: "color", value: selected.color || "#1B1E24", onChange: (e) => onUpdateField({ color: e.target.value }), style: styles.colorPickerInput })
+    selected.type === "paragraph" && /* @__PURE__ */ jsxs11(Fragment5, { children: [
+      /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.content }),
+      /* @__PURE__ */ jsx13("textarea", { style: { ...styles.propInput, minHeight: 70, resize: "vertical" }, value: t(selected.content, language), onChange: (e) => onUpdateField({ content: withLang(selected.content, language, e.target.value) }) }),
+      features.blockStyling && /* @__PURE__ */ jsxs11(Fragment5, { children: [
+        /* @__PURE__ */ jsx13("div", { style: styles.inspectorDivider }),
+        /* @__PURE__ */ jsx13("div", { style: styles.panelHeading, children: chrome.typography }),
+        /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.headingStyle }),
+        /* @__PURE__ */ jsx13(Segmented, { options: PARAGRAPH_TAG_OPTIONS.map((v) => ({ value: v, label: TAG_CHROME_KEY[v] ? chrome[TAG_CHROME_KEY[v]] : v.toUpperCase() })), value: selected.tag || "p", onChange: (v) => onUpdateField({ tag: v, ...TAG_PRESETS[v] }) }),
+        /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.width }),
+        /* @__PURE__ */ jsx13(Segmented, { options: FONT_SIZE_OPTIONS, value: selected.fontSize || "md", onChange: (v) => onUpdateField({ fontSize: v }) }),
+        /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.style }),
+        /* @__PURE__ */ jsxs11("div", { style: styles.styleToggleRow, children: [
+          /* @__PURE__ */ jsx13("button", { type: "button", style: selected.fontWeight === "bold" ? styles.styleToggleActive : styles.styleToggle, onClick: () => onUpdateField({ fontWeight: selected.fontWeight === "bold" ? "normal" : "bold" }), children: /* @__PURE__ */ jsx13(Bold, { size: 14 }) }),
+          /* @__PURE__ */ jsx13("button", { type: "button", style: selected.fontStyle === "italic" ? styles.styleToggleActive : styles.styleToggle, onClick: () => onUpdateField({ fontStyle: selected.fontStyle === "italic" ? "normal" : "italic" }), children: /* @__PURE__ */ jsx13(Italic, { size: 14 }) })
+        ] }),
+        /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.align }),
+        /* @__PURE__ */ jsx13(Segmented, { options: TEXT_ALIGN_OPTIONS, value: selected.textAlign || "left", onChange: (v) => onUpdateField({ textAlign: v }) }),
+        /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.color }),
+        /* @__PURE__ */ jsxs11("div", { style: styles.swatchRow, children: [
+          COLOR_SWATCHES.map((c) => /* @__PURE__ */ jsx13("button", { type: "button", title: c || chrome.none, style: { ...styles.swatchBtn, background: c || "var(--fb-ink)", ...selected.color === c ? styles.swatchBtnActive : {} }, onClick: () => onUpdateField({ color: c }) }, c || "default")),
+          /* @__PURE__ */ jsx13("input", { type: "color", value: selected.color || "#1B1E24", onChange: (e) => onUpdateField({ color: e.target.value }), style: styles.colorPickerInput })
+        ] })
       ] })
     ] }),
-    selected.type === "image" && /* @__PURE__ */ jsxs10(Fragment3, { children: [
-      /* @__PURE__ */ jsx11("label", { style: styles.propLabel, children: chrome.imageUrl }),
-      /* @__PURE__ */ jsx11("input", { style: styles.propInput, placeholder: "https://...", value: selected.src || "", onChange: (e) => onUpdateField({ src: e.target.value }) }),
-      /* @__PURE__ */ jsx11("p", { style: styles.helperText, children: chrome.imageUrlHelper }),
-      /* @__PURE__ */ jsx11("label", { style: styles.propLabel, children: chrome.altText }),
-      /* @__PURE__ */ jsx11("input", { style: styles.propInput, value: t(selected.alt, language), onChange: (e) => onUpdateField({ alt: withLang(selected.alt, language, e.target.value) }) }),
-      /* @__PURE__ */ jsx11("label", { style: styles.propLabel, children: chrome.linkOptional }),
-      /* @__PURE__ */ jsx11("input", { style: styles.propInput, placeholder: "https://...", value: selected.link || "", onChange: (e) => onUpdateField({ link: e.target.value }) }),
-      /* @__PURE__ */ jsx11("label", { style: styles.propLabel, children: chrome.shape }),
-      /* @__PURE__ */ jsx11(Segmented, { options: IMAGE_SHAPES.map((v) => ({ value: v, label: chrome[IMAGE_SHAPE_CHROME_KEY[v]] })), value: selected.shape || "square", onChange: (v) => onUpdateField({ shape: v }) }),
-      /* @__PURE__ */ jsx11("p", { style: styles.helperText, children: "Fills the field's own width (set below under Layout) and scales height automatically \u2014 always responsive, never overflows." })
+    selected.type === "image" && /* @__PURE__ */ jsxs11(Fragment5, { children: [
+      /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.imageUrl }),
+      /* @__PURE__ */ jsx13("input", { style: styles.propInput, placeholder: "https://...", value: selected.src || "", onChange: (e) => onUpdateField({ src: e.target.value }) }),
+      /* @__PURE__ */ jsx13("p", { style: styles.helperText, children: chrome.imageUrlHelper }),
+      /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.altText }),
+      /* @__PURE__ */ jsx13("input", { style: styles.propInput, value: t(selected.alt, language), onChange: (e) => onUpdateField({ alt: withLang(selected.alt, language, e.target.value) }) }),
+      /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.linkOptional }),
+      /* @__PURE__ */ jsx13("input", { style: styles.propInput, placeholder: "https://...", value: selected.link || "", onChange: (e) => onUpdateField({ link: e.target.value }) }),
+      /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.shape }),
+      /* @__PURE__ */ jsx13(Segmented, { options: IMAGE_SHAPES.map((v) => ({ value: v, label: chrome[IMAGE_SHAPE_CHROME_KEY[v]] })), value: selected.shape || "square", onChange: (v) => onUpdateField({ shape: v }) }),
+      /* @__PURE__ */ jsx13("p", { style: styles.helperText, children: "Fills the field's own width (set below under Layout) and scales height automatically \u2014 always responsive, never overflows." })
     ] }),
-    meta.placeholder && /* @__PURE__ */ jsxs10(Fragment3, { children: [
-      /* @__PURE__ */ jsx11("label", { style: styles.propLabel, children: chrome.placeholder }),
-      /* @__PURE__ */ jsx11("input", { style: styles.propInput, value: t(f.placeholder, language), onChange: (e) => onUpdateField({ placeholder: withLang(f.placeholder, language, e.target.value) }) })
+    selected.type === "button" && /* @__PURE__ */ jsxs11(Fragment5, { children: [
+      /* @__PURE__ */ jsx13("div", { style: styles.inspectorDivider }),
+      /* @__PURE__ */ jsx13("div", { style: styles.panelHeading, children: chrome.buttonActionTitle }),
+      /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.buttonAction }),
+      /* @__PURE__ */ jsx13(Segmented, { options: [{ value: "link", label: chrome.actionLink }, { value: "submit", label: chrome.actionSubmit }], value: selected.action || "submit", onChange: (v) => onUpdateField({ action: v }) }),
+      selected.action === "link" ? /* @__PURE__ */ jsxs11(Fragment5, { children: [
+        /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.linkOptional }),
+        /* @__PURE__ */ jsx13("input", { style: styles.propInput, placeholder: "https://...", value: selected.href || "", onChange: (e) => onUpdateField({ href: e.target.value }) }),
+        /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.openIn }),
+        /* @__PURE__ */ jsx13(Segmented, { options: [{ value: "_self", label: chrome.sameTab }, { value: "_blank", label: chrome.newTab }], value: selected.target || "_self", onChange: (v) => onUpdateField({ target: v }) })
+      ] }) : /* @__PURE__ */ jsxs11(Fragment5, { children: [
+        /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.submitScope }),
+        /* @__PURE__ */ jsx13(Segmented, { options: [{ value: "section", label: chrome.thisSection }, { value: "form", label: chrome.wholeForm }], value: selected.submitScope || "form", onChange: (v) => onUpdateField({ submitScope: v }) })
+      ] }),
+      features.blockStyling && /* @__PURE__ */ jsxs11(Fragment5, { children: [
+        /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.color }),
+        /* @__PURE__ */ jsxs11("div", { style: styles.swatchRow, children: [
+          BUTTON_COLOR_SWATCHES.map((c) => /* @__PURE__ */ jsx13("button", { type: "button", title: c || chrome.none, style: { ...styles.swatchBtn, background: c || "var(--fb-primary)", ...(selected.buttonStyle?.color || "") === c ? styles.swatchBtnActive : {} }, onClick: () => onUpdateField({ buttonStyle: { ...selected.buttonStyle, color: c } }) }, c || "default")),
+          /* @__PURE__ */ jsx13("input", { type: "color", value: selected.buttonStyle?.color || "#5B5FEF", onChange: (e) => onUpdateField({ buttonStyle: { ...selected.buttonStyle, color: e.target.value } }), style: styles.colorPickerInput })
+        ] }),
+        /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.buttonSize }),
+        /* @__PURE__ */ jsx13(Segmented, { options: SUBMIT_SIZE_OPTIONS, value: selected.buttonStyle?.size || "md", onChange: (v) => onUpdateField({ buttonStyle: { ...selected.buttonStyle, size: v } }) })
+      ] })
     ] }),
-    selected.type === "input" && (selected.inputType === "text" || selected.inputType === "password" || !selected.inputType) && /* @__PURE__ */ jsxs10(Fragment3, { children: [
-      /* @__PURE__ */ jsx11("label", { style: styles.propLabel, children: chrome.maxLength }),
-      /* @__PURE__ */ jsx11("input", { type: "number", style: styles.propInput, placeholder: chrome.noLimit, value: selected.maxLength || "", onChange: (e) => onUpdateField({ maxLength: e.target.value ? Number(e.target.value) : null }) })
+    meta.placeholder && /* @__PURE__ */ jsxs11(Fragment5, { children: [
+      /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.placeholder }),
+      /* @__PURE__ */ jsx13("input", { style: styles.propInput, value: t(f.placeholder, language), onChange: (e) => onUpdateField({ placeholder: withLang(f.placeholder, language, e.target.value) }) })
     ] }),
-    selected.type === "input" && selected.inputType === "number" && /* @__PURE__ */ jsxs10(Fragment3, { children: [
-      /* @__PURE__ */ jsx11("label", { style: styles.propLabel, children: chrome.minValue }),
-      /* @__PURE__ */ jsx11("input", { type: "number", style: styles.propInput, value: selected.min ?? "", onChange: (e) => onUpdateField({ min: e.target.value === "" ? null : Number(e.target.value) }) }),
-      /* @__PURE__ */ jsx11("label", { style: styles.propLabel, children: chrome.maxValue }),
-      /* @__PURE__ */ jsx11("input", { type: "number", style: styles.propInput, value: selected.max ?? "", onChange: (e) => onUpdateField({ max: e.target.value === "" ? null : Number(e.target.value) }) })
+    selected.type === "input" && (selected.inputType === "text" || selected.inputType === "password" || !selected.inputType) && /* @__PURE__ */ jsxs11(Fragment5, { children: [
+      /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.maxLength }),
+      /* @__PURE__ */ jsx13("input", { type: "number", style: styles.propInput, placeholder: chrome.noLimit, value: selected.maxLength || "", onChange: (e) => onUpdateField({ maxLength: e.target.value ? Number(e.target.value) : null }) })
     ] }),
-    selected.type === "textarea" && /* @__PURE__ */ jsxs10(Fragment3, { children: [
-      /* @__PURE__ */ jsx11("label", { style: styles.propLabel, children: chrome.maxLength }),
-      /* @__PURE__ */ jsx11("input", { type: "number", style: styles.propInput, placeholder: chrome.noLimit, value: selected.maxLength || "", onChange: (e) => onUpdateField({ maxLength: e.target.value ? Number(e.target.value) : null }) })
+    selected.type === "input" && selected.inputType === "number" && /* @__PURE__ */ jsxs11(Fragment5, { children: [
+      /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.minValue }),
+      /* @__PURE__ */ jsx13("input", { type: "number", style: styles.propInput, value: selected.min ?? "", onChange: (e) => onUpdateField({ min: e.target.value === "" ? null : Number(e.target.value) }) }),
+      /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.maxValue }),
+      /* @__PURE__ */ jsx13("input", { type: "number", style: styles.propInput, value: selected.max ?? "", onChange: (e) => onUpdateField({ max: e.target.value === "" ? null : Number(e.target.value) }) })
     ] }),
-    meta.options && /* @__PURE__ */ jsxs10(Fragment3, { children: [
-      /* @__PURE__ */ jsx11("label", { style: styles.propLabel, children: chrome.options }),
-      /* @__PURE__ */ jsxs10("div", { style: styles.optionList, children: [
-        (f.options || []).map((opt, i) => /* @__PURE__ */ jsxs10("div", { style: styles.optionRow, children: [
-          /* @__PURE__ */ jsx11("input", { style: styles.optionInput, value: t(opt.label, language), onChange: (e) => onUpdateOption(i, { label: withLang(opt.label, language, e.target.value) }) }),
-          /* @__PURE__ */ jsx11("button", { style: styles.iconBtn, onClick: () => onRemoveOption(i), disabled: (f.options || []).length <= 1, children: /* @__PURE__ */ jsx11(X, { size: 13 }) })
+    selected.type === "textarea" && /* @__PURE__ */ jsxs11(Fragment5, { children: [
+      /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.maxLength }),
+      /* @__PURE__ */ jsx13("input", { type: "number", style: styles.propInput, placeholder: chrome.noLimit, value: selected.maxLength || "", onChange: (e) => onUpdateField({ maxLength: e.target.value ? Number(e.target.value) : null }) })
+    ] }),
+    meta.options && /* @__PURE__ */ jsxs11(Fragment5, { children: [
+      /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.options }),
+      /* @__PURE__ */ jsxs11("div", { style: styles.optionList, children: [
+        (f.options || []).map((opt, i) => /* @__PURE__ */ jsxs11("div", { style: styles.optionRow, children: [
+          /* @__PURE__ */ jsx13("input", { style: styles.optionInput, value: t(opt.label, language), onChange: (e) => onUpdateOption(i, { label: withLang(opt.label, language, e.target.value) }) }),
+          /* @__PURE__ */ jsx13("button", { style: styles.iconBtn, onClick: () => onRemoveOption(i), disabled: (f.options || []).length <= 1, children: /* @__PURE__ */ jsx13(X, { size: 13 }) })
         ] }, i)),
-        /* @__PURE__ */ jsxs10("button", { style: styles.addOptionBtn, onClick: onAddOption, children: [
-          /* @__PURE__ */ jsx11(Plus2, { size: 13 }),
+        /* @__PURE__ */ jsxs11("button", { style: styles.addOptionBtn, onClick: onAddOption, children: [
+          /* @__PURE__ */ jsx13(Plus2, { size: 13 }),
           " ",
           chrome.addOption
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx11(DefaultValueEditor, { field: selected, meta, lang: language, chrome, onChange: onUpdateField }),
-    !meta.isContent && /* @__PURE__ */ jsxs10("label", { style: styles.toggleRow, children: [
-      /* @__PURE__ */ jsx11("input", { type: "checkbox", checked: !!selected.required, onChange: (e) => onUpdateField({ required: e.target.checked }), style: { width: 15, height: 15, accentColor: "var(--fb-primary)" } }),
-      /* @__PURE__ */ jsx11("span", { style: { fontSize: 13, color: "#4A4D57" }, children: chrome.requiredField })
+    /* @__PURE__ */ jsx13(DefaultValueEditor, { field: selected, meta, lang: language, chrome, onChange: onUpdateField }),
+    !meta.isContent && /* @__PURE__ */ jsxs11("label", { style: styles.toggleRow, children: [
+      /* @__PURE__ */ jsx13("input", { type: "checkbox", checked: !!selected.required, onChange: (e) => onUpdateField({ required: e.target.checked }), style: { width: 15, height: 15, accentColor: "var(--fb-primary)" } }),
+      /* @__PURE__ */ jsx13("span", { style: { fontSize: 13, color: "var(--fb-ink)" }, children: chrome.requiredField })
     ] }),
-    /* @__PURE__ */ jsx11("div", { style: styles.inspectorDivider }),
-    /* @__PURE__ */ jsx11("div", { style: styles.panelHeading, children: chrome.layout }),
-    /* @__PURE__ */ jsx11("label", { style: styles.propLabel, children: chrome.width }),
-    /* @__PURE__ */ jsx11(Segmented, { options: WIDTH_OPTIONS.map((o) => ({ ...o, label: o.labelKey ? chrome[o.labelKey] : o.label || "" })), value: selected.width || "1/1", onChange: (v) => onUpdateField({ width: v }) }),
-    /* @__PURE__ */ jsx11("label", { style: styles.propLabel, children: chrome.verticalAlign }),
-    /* @__PURE__ */ jsx11(Segmented, { options: [{ value: "top", label: chrome.top }, { value: "middle", label: chrome.middle }, { value: "bottom", label: chrome.bottom }], value: selected.verticalAlign || "top", onChange: (v) => onUpdateField({ verticalAlign: v }) }),
-    !meta.boolean && !meta.isContent && /* @__PURE__ */ jsxs10(Fragment3, { children: [
-      /* @__PURE__ */ jsx11("label", { style: styles.propLabel, children: chrome.labelPosition }),
-      /* @__PURE__ */ jsx11(Segmented, { options: [{ value: "top", label: chrome.above }, { value: "inline", label: chrome.inline }], value: selected.labelPosition || "top", onChange: (v) => onUpdateField({ labelPosition: v }) })
+    /* @__PURE__ */ jsx13("div", { style: styles.inspectorDivider }),
+    /* @__PURE__ */ jsx13("div", { style: styles.panelHeading, children: chrome.layout }),
+    /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.width }),
+    /* @__PURE__ */ jsx13(Segmented, { options: WIDTH_OPTIONS.map((o) => ({ ...o, label: o.labelKey ? chrome[o.labelKey] : o.label || "" })), value: selected.width || "1/1", onChange: (v) => onUpdateField({ width: v }) }),
+    /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.verticalAlign }),
+    /* @__PURE__ */ jsx13(Segmented, { options: [{ value: "top", label: chrome.top }, { value: "middle", label: chrome.middle }, { value: "bottom", label: chrome.bottom }], value: selected.verticalAlign || "top", onChange: (v) => onUpdateField({ verticalAlign: v }) }),
+    !meta.boolean && !meta.isContent && /* @__PURE__ */ jsxs11(Fragment5, { children: [
+      /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.labelPosition }),
+      /* @__PURE__ */ jsx13(Segmented, { options: [{ value: "top", label: chrome.above }, { value: "inline", label: chrome.inline }], value: selected.labelPosition || "top", onChange: (v) => onUpdateField({ labelPosition: v }) })
     ] }),
-    !meta.isContent && /* @__PURE__ */ jsxs10(Fragment3, { children: [
-      /* @__PURE__ */ jsx11("div", { style: styles.inspectorDivider }),
-      /* @__PURE__ */ jsx11("div", { style: styles.panelHeading, children: chrome.icon }),
-      /* @__PURE__ */ jsxs10("label", { style: styles.toggleRow, children: [
-        /* @__PURE__ */ jsx11("input", { type: "checkbox", checked: !!selected.showIcon, onChange: (e) => onUpdateField({ showIcon: e.target.checked }), style: { width: 15, height: 15, accentColor: "var(--fb-primary)" } }),
-        /* @__PURE__ */ jsx11("span", { style: { fontSize: 13, color: "#4A4D57" }, children: chrome.showIcon })
+    !meta.isContent && /* @__PURE__ */ jsxs11(Fragment5, { children: [
+      /* @__PURE__ */ jsx13("div", { style: styles.inspectorDivider }),
+      /* @__PURE__ */ jsx13("div", { style: styles.panelHeading, children: chrome.icon }),
+      /* @__PURE__ */ jsxs11("label", { style: styles.toggleRow, children: [
+        /* @__PURE__ */ jsx13("input", { type: "checkbox", checked: !!selected.showIcon, onChange: (e) => onUpdateField({ showIcon: e.target.checked }), style: { width: 15, height: 15, accentColor: "var(--fb-primary)" } }),
+        /* @__PURE__ */ jsx13("span", { style: { fontSize: 13, color: "var(--fb-ink)" }, children: chrome.showIcon })
       ] }),
-      selected.showIcon && /* @__PURE__ */ jsx11("div", { style: styles.iconGrid, children: Object.keys(ICON_LIBRARY).map((key) => {
+      selected.showIcon && /* @__PURE__ */ jsx13("div", { style: styles.iconGrid, children: Object.keys(ICON_LIBRARY).map((key) => {
         const IconComp = ICON_LIBRARY[key];
         const active = selected.displayIcon === key;
-        return /* @__PURE__ */ jsx11("button", { type: "button", title: key, style: active ? styles.iconGridBtnActive : styles.iconGridBtn, onClick: () => onUpdateField({ displayIcon: key }), children: /* @__PURE__ */ jsx11(IconComp, { size: 15 }) }, key);
+        return /* @__PURE__ */ jsx13("button", { type: "button", title: key, style: active ? styles.iconGridBtnActive : styles.iconGridBtn, onClick: () => onUpdateField({ displayIcon: key }), children: /* @__PURE__ */ jsx13(IconComp, { size: 15 }) }, key);
       }) })
     ] }),
-    /* @__PURE__ */ jsx11("div", { style: styles.inspectorDivider }),
-    /* @__PURE__ */ jsxs10("button", { style: styles.deleteFieldBtn, onClick: onDeleteField, children: [
-      /* @__PURE__ */ jsx11(Trash23, { size: 13 }),
+    /* @__PURE__ */ jsx13("div", { style: styles.inspectorDivider }),
+    /* @__PURE__ */ jsxs11("button", { style: styles.deleteFieldBtn, onClick: onDeleteField, children: [
+      /* @__PURE__ */ jsx13(Trash23, { size: 13 }),
       " ",
       chrome.deleteField
     ] })
@@ -1962,17 +2159,26 @@ function formatValue(field, lang) {
   return String(v);
 }
 
+// src/lib/collectSubmission.ts
+function collectFieldValues(fields) {
+  const values = {};
+  fields.forEach((f) => {
+    if (getMeta(f.type).isContent) return;
+    values[f.id] = f.defaultValue;
+  });
+  return values;
+}
+
 // src/components/PreviewPane.tsx
-import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
-function PreviewPane({ title, sections, onFieldChange, language, strings, chrome, baseMaxWidth, submitLabel, submitMode, submitStyle }) {
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+function PreviewPane({ title, sections, onFieldChange, language, strings, chrome, baseMaxWidth, onSubmit }) {
   const [device, setDevice] = useState6("laptop");
   const [errors, setErrors] = useState6({});
   const [submitted, setSubmitted] = useState6(null);
+  const [attemptedButtonId, setAttemptedButtonId] = useState6(null);
   const deviceOptions = buildDeviceOptions(baseMaxWidth, chrome);
   const maxWidth = (deviceOptions.find((d) => d.value === device) || deviceOptions[0]).maxWidth;
   const allFields = sections.flatMap((s) => s.fields);
-  const submitText = t(submitLabel, language) || strings.submit;
-  const overallHasFormFields = allFields.some((f) => !getMeta(f.type).isContent);
   function runValidation(fields) {
     const errs = {};
     fields.forEach((f) => {
@@ -1981,78 +2187,92 @@ function PreviewPane({ title, sections, onFieldChange, language, strings, chrome
     });
     return errs;
   }
-  function handleSubmitAll() {
+  function buildSectionsBreakdown() {
+    return sections.map((s) => ({ sectionId: s.id, values: collectFieldValues(s.fields) }));
+  }
+  function handleSubmitAll(buttonId) {
     const errs = runValidation(allFields);
     setErrors(errs);
+    setAttemptedButtonId(buttonId);
     if (Object.keys(errs).length > 0) {
       setSubmitted(null);
       return;
     }
     setSubmitted(allFields.filter((f) => !getMeta(f.type).isContent).map((f) => ({ label: t(f.label, language), value: formatValue(f, language) })));
+    const sectionsBreakdown = buildSectionsBreakdown();
+    const all = collectFieldValues(allFields);
+    onSubmit?.({ buttonId, scope: "form", values: all, sections: sectionsBreakdown, all });
   }
-  function handleSubmitSection(section) {
+  function handleSubmitSection(section, buttonId) {
     const errs = runValidation(section.fields);
     setErrors((prev) => {
       const next = { ...prev };
       section.fields.forEach((f) => delete next[f.id]);
       return { ...next, ...errs };
     });
+    setAttemptedButtonId(buttonId);
     if (Object.keys(errs).length > 0) {
       setSubmitted(null);
       return;
     }
     setSubmitted(section.fields.filter((f) => !getMeta(f.type).isContent).map((f) => ({ label: t(f.label, language), value: formatValue(f, language) })));
+    const sectionsBreakdown = buildSectionsBreakdown();
+    const all = collectFieldValues(allFields);
+    onSubmit?.({ buttonId, scope: "section", sectionId: section.id, values: collectFieldValues(section.fields), sections: sectionsBreakdown, all });
+  }
+  function handleButtonAction(field) {
+    if (field.action === "link") {
+      if (field.href) window.open(field.href, field.target === "_blank" ? "_blank" : "_self", field.target === "_blank" ? "noopener,noreferrer" : void 0);
+      return;
+    }
+    if (field.submitScope === "section") {
+      const section = sections.find((s) => s.fields.some((f) => f.id === field.id));
+      if (section) handleSubmitSection(section, field.id);
+    } else {
+      handleSubmitAll(field.id);
+    }
   }
-  return /* @__PURE__ */ jsxs11("div", { style: styles.previewWrap, children: [
-    /* @__PURE__ */ jsxs11("div", { style: { width: "100%", maxWidth, display: "flex", flexDirection: "column", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx12("div", { style: styles.previewToolbar, children: /* @__PURE__ */ jsx12(Segmented, { options: deviceOptions, value: device, onChange: setDevice }) }),
-      /* @__PURE__ */ jsxs11("div", { style: { ...styles.previewCard, maxWidth, width: "100%" }, children: [
-        /* @__PURE__ */ jsx12("h2", { style: styles.previewTitle, children: t(title, language) }),
-        allFields.length === 0 && /* @__PURE__ */ jsx12("p", { style: { color: "var(--fb-muted)", fontSize: 14 }, children: strings.addFieldsHint }),
+  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 }) }),
+      /* @__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 }),
         sections.map((section) => {
-          const sectionHasFormFields = section.fields.some((f) => !getMeta(f.type).isContent);
-          const sectionHasErrors = section.fields.some((f) => errors[f.id]);
-          return /* @__PURE__ */ jsxs11("div", { 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__ */ jsx12("h3", { style: styles.sectionRuntimeTitle, children: t(section.title, language) }),
-            /* @__PURE__ */ jsx12("div", { style: styles.previewGrid, children: section.fields.map((field) => {
+          return /* @__PURE__ */ jsxs12("div", { 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__ */ jsx14("h3", { style: styles.sectionRuntimeTitle, children: t(section.title, language) }),
+            /* @__PURE__ */ jsx14("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__ */ jsx12("div", { style: { flex: flexBasis, minWidth: 0, alignSelf: ALIGN_MAP[field.verticalAlign || "top"] }, children: /* @__PURE__ */ jsx12(FieldBlock, { field, lang: language, onFieldChange, strings, chrome, error: errors[field.id] }) }, field.id);
-            }) }),
-            submitMode === "perSection" && sectionHasFormFields && /* @__PURE__ */ jsxs11(Fragment4, { children: [
-              /* @__PURE__ */ jsx12("button", { style: { ...styles.submitBtn, ...resolveSubmitStyle(section.submitStyle || submitStyle) }, onClick: () => handleSubmitSection(section), children: submitText }),
-              sectionHasErrors && /* @__PURE__ */ jsxs11("p", { style: styles.formErrorNote, children: [
-                /* @__PURE__ */ jsx12(CircleAlert2, { size: 13 }),
-                " ",
-                strings.fixErrors
-              ] })
-            ] })
+              return /* @__PURE__ */ jsxs12("div", { style: { flex: flexBasis, minWidth: 0, alignSelf: ALIGN_MAP[field.verticalAlign || "top"] }, children: [
+                /* @__PURE__ */ jsx14(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__ */ jsxs12("p", { style: styles.formErrorNote, children: [
+                  /* @__PURE__ */ jsx14(CircleAlert2, { size: 13 }),
+                  " ",
+                  strings.fixErrors
+                ] })
+              ] }, field.id);
+            }) })
           ] }, section.id);
-        }),
-        submitMode === "combined" && overallHasFormFields && /* @__PURE__ */ jsx12("button", { style: { ...styles.submitBtn, ...resolveSubmitStyle(submitStyle) }, onClick: handleSubmitAll, children: submitText }),
-        submitMode === "combined" && Object.keys(errors).length > 0 && /* @__PURE__ */ jsxs11("p", { style: styles.formErrorNote, children: [
-          /* @__PURE__ */ jsx12(CircleAlert2, { size: 13 }),
-          " ",
-          strings.fixErrors
-        ] })
+        })
       ] })
     ] }),
-    submitted && /* @__PURE__ */ jsx12("div", { style: styles.modalOverlay, onClick: () => setSubmitted(null), children: /* @__PURE__ */ jsxs11("div", { style: { ...styles.modal, width: 420 }, onClick: (e) => e.stopPropagation(), children: [
-      /* @__PURE__ */ jsxs11("div", { style: styles.modalHeader, children: [
-        /* @__PURE__ */ jsxs11("span", { style: { fontWeight: 600, fontSize: 14, display: "flex", alignItems: "center", gap: 7 }, children: [
-          /* @__PURE__ */ jsx12(PartyPopper, { size: 15, color: "var(--fb-primary)" }),
+    submitted && /* @__PURE__ */ jsx14("div", { style: styles.modalOverlay, onClick: () => setSubmitted(null), children: /* @__PURE__ */ jsxs12("div", { style: { ...styles.modal, maxWidth: 420 }, onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsxs12("div", { style: styles.modalHeader, children: [
+        /* @__PURE__ */ jsxs12("span", { style: { fontWeight: 600, fontSize: 14, display: "flex", alignItems: "center", gap: 7 }, children: [
+          /* @__PURE__ */ jsx14(PartyPopper, { size: 15, color: "var(--fb-primary)" }),
           " ",
           strings.submittedTitle
         ] }),
-        /* @__PURE__ */ jsx12("button", { style: styles.iconBtn, onClick: () => setSubmitted(null), children: /* @__PURE__ */ jsx12(X2, { size: 16 }) })
+        /* @__PURE__ */ jsx14("button", { style: styles.iconBtn, onClick: () => setSubmitted(null), children: /* @__PURE__ */ jsx14(X2, { size: 16 }) })
       ] }),
-      /* @__PURE__ */ jsxs11("div", { style: { padding: 16 }, children: [
-        /* @__PURE__ */ jsx12("p", { style: { fontSize: 12.5, color: "var(--fb-muted)", marginTop: 0 }, children: strings.submittedBody }),
-        /* @__PURE__ */ jsx12("div", { style: styles.submittedList, children: submitted.map((row, i) => /* @__PURE__ */ jsxs11("div", { style: styles.submittedRow, children: [
-          /* @__PURE__ */ jsx12("span", { style: styles.submittedLabel, children: row.label }),
-          /* @__PURE__ */ jsx12("span", { style: styles.submittedValue, children: row.value })
+      /* @__PURE__ */ jsxs12("div", { style: { padding: 16 }, children: [
+        /* @__PURE__ */ jsx14("p", { style: { fontSize: 12.5, color: "var(--fb-muted)", marginTop: 0 }, children: strings.submittedBody }),
+        /* @__PURE__ */ jsx14("div", { style: styles.submittedList, children: submitted.map((row, i) => /* @__PURE__ */ jsxs12("div", { style: styles.submittedRow, children: [
+          /* @__PURE__ */ jsx14("span", { style: styles.submittedLabel, children: row.label }),
+          /* @__PURE__ */ jsx14("span", { style: styles.submittedValue, children: row.value })
         ] }, i)) }),
-        /* @__PURE__ */ jsx12("button", { style: { ...styles.primaryBtn, width: "100%", justifyContent: "center", marginTop: 14 }, onClick: () => setSubmitted(null), children: strings.close })
+        /* @__PURE__ */ jsx14("button", { style: { ...styles.primaryBtn, width: "100%", justifyContent: "center", marginTop: 14 }, onClick: () => setSubmitted(null), children: strings.close })
       ] })
     ] }) })
   ] });
@@ -2060,47 +2280,47 @@ function PreviewPane({ title, sections, onFieldChange, language, strings, chrome
 
 // src/components/modals/JsonModal.tsx
 import { Check, ClipboardCopy, X as X3 } from "lucide-react";
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 function JsonModal({ chrome, jsonString, copied, onCopy, onClose }) {
-  return /* @__PURE__ */ jsx13("div", { style: styles.modalOverlay, onClick: onClose, children: /* @__PURE__ */ jsxs12("div", { style: styles.modal, onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ jsxs12("div", { style: styles.modalHeader, children: [
-      /* @__PURE__ */ jsx13("span", { style: { fontWeight: 600, fontSize: 14 }, children: chrome.formJson }),
-      /* @__PURE__ */ jsxs12("div", { style: { display: "flex", gap: 8 }, children: [
-        /* @__PURE__ */ jsxs12("button", { style: styles.ghostBtn, onClick: onCopy, children: [
-          copied ? /* @__PURE__ */ jsx13(Check, { size: 14 }) : /* @__PURE__ */ jsx13(ClipboardCopy, { size: 14 }),
+  return /* @__PURE__ */ jsx15("div", { style: styles.modalOverlay, onClick: onClose, children: /* @__PURE__ */ jsxs13("div", { style: styles.modal, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs13("div", { style: styles.modalHeader, children: [
+      /* @__PURE__ */ jsx15("span", { style: { fontWeight: 600, fontSize: 14 }, children: chrome.formJson }),
+      /* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: 8 }, children: [
+        /* @__PURE__ */ jsxs13("button", { style: styles.ghostBtn, onClick: onCopy, children: [
+          copied ? /* @__PURE__ */ jsx15(Check, { size: 14 }) : /* @__PURE__ */ jsx15(ClipboardCopy, { size: 14 }),
           copied ? chrome.copied : chrome.copy
         ] }),
-        /* @__PURE__ */ jsx13("button", { style: styles.iconBtn, onClick: onClose, children: /* @__PURE__ */ jsx13(X3, { size: 16 }) })
+        /* @__PURE__ */ jsx15("button", { style: styles.iconBtn, onClick: onClose, children: /* @__PURE__ */ jsx15(X3, { size: 16 }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx13("pre", { style: styles.jsonPre, children: jsonString })
+    /* @__PURE__ */ jsx15("pre", { style: styles.jsonPre, children: jsonString })
   ] }) });
 }
 
-// src/components/modals/LibraryModal.tsx
+// src/components/modals/TemplatesModal.tsx
 import { Trash2 as Trash24, X as X4 } from "lucide-react";
-import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
-function LibraryModal({ chrome, savedForms, currentFormId, onOpen, onDelete, onClose }) {
-  return /* @__PURE__ */ jsx14("div", { style: styles.modalOverlay, onClick: onClose, children: /* @__PURE__ */ jsxs13("div", { style: styles.modal, onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ jsxs13("div", { style: styles.modalHeader, children: [
-      /* @__PURE__ */ jsx14("span", { style: { fontWeight: 600, fontSize: 14 }, children: chrome.myForms }),
-      /* @__PURE__ */ jsx14("button", { style: styles.iconBtn, onClick: onClose, children: /* @__PURE__ */ jsx14(X4, { size: 16 }) })
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+function TemplatesModal({ chrome, savedForms, currentFormId, onOpen, onDelete, onClose }) {
+  return /* @__PURE__ */ jsx16("div", { style: styles.modalOverlay, onClick: onClose, children: /* @__PURE__ */ jsxs14("div", { style: styles.modal, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs14("div", { style: styles.modalHeader, children: [
+      /* @__PURE__ */ jsx16("span", { style: { fontWeight: 600, fontSize: 14 }, children: chrome.templates }),
+      /* @__PURE__ */ jsx16("button", { style: styles.iconBtn, onClick: onClose, children: /* @__PURE__ */ jsx16(X4, { size: 16 }) })
     ] }),
-    /* @__PURE__ */ jsx14("div", { style: styles.libraryBody, children: savedForms.length === 0 ? /* @__PURE__ */ jsx14("div", { style: styles.inspectorEmpty, children: chrome.nothingSaved }) : savedForms.map((f) => /* @__PURE__ */ jsxs13("div", { style: styles.libraryRow, children: [
-      /* @__PURE__ */ jsxs13("div", { style: { minWidth: 0 }, children: [
-        /* @__PURE__ */ jsxs13("div", { style: styles.libraryRowTitle, children: [
+    /* @__PURE__ */ jsx16("div", { style: styles.libraryBody, children: savedForms.length === 0 ? /* @__PURE__ */ jsx16("div", { style: styles.inspectorEmpty, children: chrome.noTemplates }) : savedForms.map((f) => /* @__PURE__ */ jsxs14("div", { style: styles.libraryRow, children: [
+      /* @__PURE__ */ jsxs14("div", { style: { minWidth: 0 }, children: [
+        /* @__PURE__ */ jsxs14("div", { style: styles.libraryRowTitle, children: [
           f.title,
-          f.id === currentFormId && /* @__PURE__ */ jsx14("span", { style: styles.currentBadge, children: chrome.current })
+          f.id === currentFormId && /* @__PURE__ */ jsx16("span", { style: styles.currentBadge, children: chrome.current })
         ] }),
-        /* @__PURE__ */ jsxs13("div", { style: styles.libraryRowMeta, children: [
+        /* @__PURE__ */ jsxs14("div", { style: styles.libraryRowMeta, children: [
           chrome.updated,
           " ",
           new Date(f.updatedAt).toLocaleString()
         ] })
       ] }),
-      /* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: 6, flexShrink: 0 }, children: [
-        /* @__PURE__ */ jsx14("button", { style: styles.ghostBtn, onClick: () => onOpen(f.id), children: chrome.open }),
-        /* @__PURE__ */ jsx14("button", { style: { ...styles.iconBtn, ...styles.iconBtnDanger }, title: chrome.delete, onClick: () => onDelete(f.id), children: /* @__PURE__ */ jsx14(Trash24, { size: 13 }) })
+      /* @__PURE__ */ jsxs14("div", { style: { display: "flex", gap: 6, flexShrink: 0 }, children: [
+        /* @__PURE__ */ jsx16("button", { style: styles.ghostBtn, onClick: () => onOpen(f.id), children: chrome.open }),
+        /* @__PURE__ */ jsx16("button", { style: { ...styles.iconBtn, ...styles.iconBtnDanger }, title: chrome.delete, onClick: () => onDelete(f.id), children: /* @__PURE__ */ jsx16(Trash24, { size: 13 }) })
       ] })
     ] }, f.id)) })
   ] }) });
@@ -2109,19 +2329,19 @@ function LibraryModal({ chrome, savedForms, currentFormId, onOpen, onDelete, onC
 // src/components/modals/SaveAsModal.tsx
 import { useState as useState7 } from "react";
 import { Save as Save2, X as X5 } from "lucide-react";
-import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 function SaveAsModal({ chrome, suggestedName, onSave, onClose }) {
   const [name, setName] = useState7(suggestedName);
-  return /* @__PURE__ */ jsx15("div", { style: styles.modalOverlay, onClick: onClose, children: /* @__PURE__ */ jsxs14("div", { style: { ...styles.modal, width: 380 }, onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ jsxs14("div", { style: styles.modalHeader, children: [
-      /* @__PURE__ */ jsx15("span", { style: { fontWeight: 600, fontSize: 14 }, children: chrome.saveForm }),
-      /* @__PURE__ */ jsx15("button", { style: styles.iconBtn, onClick: onClose, children: /* @__PURE__ */ jsx15(X5, { size: 16 }) })
+  return /* @__PURE__ */ jsx17("div", { style: styles.modalOverlay, onClick: onClose, children: /* @__PURE__ */ jsxs15("div", { style: { ...styles.modal, maxWidth: 380 }, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs15("div", { style: styles.modalHeader, children: [
+      /* @__PURE__ */ jsx17("span", { style: { fontWeight: 600, fontSize: 14 }, children: chrome.saveForm }),
+      /* @__PURE__ */ jsx17("button", { style: styles.iconBtn, onClick: onClose, children: /* @__PURE__ */ jsx17(X5, { size: 16 }) })
     ] }),
-    /* @__PURE__ */ jsxs14("div", { style: { padding: 16 }, children: [
-      /* @__PURE__ */ jsx15("label", { style: styles.propLabel, children: chrome.formName }),
-      /* @__PURE__ */ jsx15("input", { autoFocus: true, style: styles.propInput, value: name, onChange: (e) => setName(e.target.value), onKeyDown: (e) => e.key === "Enter" && name.trim() && onSave(name.trim()) }),
-      /* @__PURE__ */ jsxs14("button", { style: { ...styles.primaryBtn, width: "100%", justifyContent: "center", marginTop: 14 }, disabled: !name.trim(), onClick: () => onSave(name.trim()), children: [
-        /* @__PURE__ */ jsx15(Save2, { size: 14 }),
+    /* @__PURE__ */ jsxs15("div", { style: { padding: 16 }, children: [
+      /* @__PURE__ */ jsx17("label", { style: styles.propLabel, children: chrome.formName }),
+      /* @__PURE__ */ jsx17("input", { autoFocus: true, style: styles.propInput, value: name, onChange: (e) => setName(e.target.value), onKeyDown: (e) => e.key === "Enter" && name.trim() && onSave(name.trim()) }),
+      /* @__PURE__ */ jsxs15("button", { style: { ...styles.primaryBtn, width: "100%", justifyContent: "center", marginTop: 14 }, disabled: !name.trim(), onClick: () => onSave(name.trim()), children: [
+        /* @__PURE__ */ jsx17(Save2, { size: 14 }),
         " ",
         chrome.saveToLibrary
       ] })
@@ -2129,45 +2349,6 @@ function SaveAsModal({ chrome, suggestedName, onSave, onClose }) {
   ] }) });
 }
 
-// src/components/modals/SettingsModal.tsx
-import { X as X6 } from "lucide-react";
-import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
-function SettingsModal({
-  chrome,
-  strings,
-  submitLabel,
-  language,
-  submitMode,
-  submitStyle,
-  onSubmitLabelChange,
-  onSubmitModeChange,
-  onSubmitStyleChange,
-  onClose
-}) {
-  return /* @__PURE__ */ jsx16("div", { style: styles.modalOverlay, onClick: onClose, children: /* @__PURE__ */ jsxs15("div", { style: { ...styles.modal, width: 400 }, onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ jsxs15("div", { style: styles.modalHeader, children: [
-      /* @__PURE__ */ jsx16("span", { style: { fontWeight: 600, fontSize: 14 }, children: chrome.formSettings }),
-      /* @__PURE__ */ jsx16("button", { style: styles.iconBtn, onClick: onClose, children: /* @__PURE__ */ jsx16(X6, { size: 16 }) })
-    ] }),
-    /* @__PURE__ */ jsxs15("div", { style: { padding: 16 }, children: [
-      /* @__PURE__ */ jsx16("div", { style: styles.panelHeading, children: chrome.submitSectionTitle }),
-      /* @__PURE__ */ jsx16("label", { style: styles.propLabel, children: chrome.submitLabel }),
-      /* @__PURE__ */ jsx16("input", { style: styles.propInput, placeholder: strings.submit, value: t(submitLabel, language), onChange: (e) => onSubmitLabelChange(e.target.value) }),
-      /* @__PURE__ */ jsx16("label", { style: styles.propLabel, children: chrome.submitMode }),
-      /* @__PURE__ */ jsx16(Segmented, { options: [{ value: "combined", label: chrome.combined }, { value: "perSection", label: chrome.perSection }], value: submitMode, onChange: onSubmitModeChange }),
-      /* @__PURE__ */ jsx16("div", { style: styles.inspectorDivider }),
-      /* @__PURE__ */ jsx16("div", { style: styles.panelHeading, children: chrome.submitStyle }),
-      /* @__PURE__ */ jsx16("label", { style: styles.propLabel, children: chrome.color }),
-      /* @__PURE__ */ jsxs15("div", { style: styles.swatchRow, children: [
-        BUTTON_COLOR_SWATCHES.map((c) => /* @__PURE__ */ jsx16("button", { type: "button", title: c || chrome.none, style: { ...styles.swatchBtn, background: c || "var(--fb-primary)", ...(submitStyle.color || "") === c ? styles.swatchBtnActive : {} }, onClick: () => onSubmitStyleChange({ color: c }) }, c || "default")),
-        /* @__PURE__ */ jsx16("input", { type: "color", value: submitStyle.color || "#5B5FEF", onChange: (e) => onSubmitStyleChange({ color: e.target.value }), style: styles.colorPickerInput })
-      ] }),
-      /* @__PURE__ */ jsx16("label", { style: styles.propLabel, children: chrome.buttonSize }),
-      /* @__PURE__ */ jsx16(Segmented, { options: SUBMIT_SIZE_OPTIONS, value: submitStyle.size, onChange: (v) => onSubmitStyleChange({ size: v }) })
-    ] })
-  ] }) });
-}
-
 // src/styles/globalCss.ts
 var css = `
   * { box-sizing: border-box; }
@@ -2175,19 +2356,58 @@ var css = `
   input, textarea, select { font-family: inherit; }
   @keyframes fb-spin { to { transform: rotate(360deg); } }
   .spin { animation: fb-spin 0.8s linear infinite; }
+  /* Caps the widget at the viewport height so it scrolls internally rather
+     than growing past whatever space its host container gives it; the
+     second declaration upgrades to the dynamic viewport unit on browsers
+     that support it (mobile browser chrome resizing the viewport), and is
+     simply ignored by ones that don't. */
+  .fb-root { max-height: 100vh; max-height: 100dvh; }
+
+  /* Below this width the fixed 200px Palette + 270px Inspector columns
+     don't leave room for a usable Canvas, so instead of stacking all
+     three in flow (which buries Canvas under a tall Palette), Palette
+     and Inspector become narrow drawers over Canvas (which stays
+     partially visible behind them), toggled by .fb-mobile-bar's two
+     buttons, tracked by .fb-work-area's data-mobile-panel attribute,
+     and dismissible via .fb-mobile-backdrop. */
+  .fb-mobile-bar { display: none; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--fb-border); background: var(--fb-surface); flex-shrink: 0; }
+  .fb-mobile-btn { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 7px; border: 1px solid var(--fb-border); background: var(--fb-surface); color: var(--fb-muted); font-size: 12.5px; font-weight: 600; }
+  .fb-mobile-btn[aria-pressed="true"] { border-color: var(--fb-primary); background: var(--fb-primary-soft); color: var(--fb-primary); }
+  .fb-mobile-backdrop { display: none; }
+  @media (max-width: 720px) {
+    .fb-mobile-bar { display: flex; }
+    .fb-work-area { flex-direction: column !important; min-height: 0; }
+    .fb-canvas-area { position: relative; overflow: hidden; }
+    .fb-canvas { width: 100%; }
+    .fb-mobile-backdrop { display: block; position: absolute; inset: 0; z-index: 6; background: rgba(15,16,20,0.35); }
+    .fb-palette, .fb-inspector {
+      position: absolute; top: 0; bottom: 0; z-index: 7;
+      width: min(260px, 80vw) !important; max-height: none !important;
+      border: none !important;
+      box-shadow: 0 0 24px rgba(0,0,0,0.18);
+      transition: transform 0.18s ease;
+    }
+    .fb-palette { left: 0; transform: translateX(-100%); }
+    .fb-inspector { right: 0; transform: translateX(100%); }
+    .fb-work-area[data-mobile-panel="palette"] .fb-palette,
+    .fb-work-area[data-mobile-panel="inspector"] .fb-inspector { transform: translateX(0); }
+  }
 `;
 
 // src/FormBuilder.tsx
-import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
-function FormBuilder({
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+var FormBuilder = forwardRef(function FormBuilder2({
   theme: themeOverrideProp,
   language: languageOverride,
   languages = DEFAULT_LANGUAGES,
   strings: stringsOverride,
   chrome: chromeOverride,
-  themeEditable = false,
-  storage: storageProp
-} = {}) {
+  features: featuresProp,
+  storage: storageProp,
+  onSubmit,
+  initialDocument
+}, ref) {
+  const features = resolveFeatures(featuresProp);
   const storage = storageProp ?? localStorageAdapter;
   const { theme, updateThemeColor, updateThemeLayout, resetTheme, replaceThemeOverrides, themeOverrides } = useTheme(themeOverrideProp);
   const [language, setLanguage] = useState8(languageOverride || languages[0]?.code || "en");
@@ -2197,20 +2417,16 @@ function FormBuilder({
   const drag = useDragReorder(doc.reorderWithinSection);
   const [mode, setMode] = useState8("build");
   const [showJson, setShowJson] = useState8(false);
-  const [showSettings, setShowSettings] = useState8(false);
   const [showLibrary, setShowLibrary] = useState8(false);
   const [copied, setCopied] = useState8(false);
+  const [mobilePanel, setMobilePanel] = useState8("none");
   const persistence = usePersistence({
     storage,
+    autosave: features.autosave,
     language,
-    document: {
-      title: doc.title,
-      submitLabel: doc.submitLabel,
-      submitMode: doc.submitMode,
-      submitStyle: doc.submitStyle,
-      themeOverrides,
-      sections: doc.sections
-    },
+    chrome,
+    document: { title: doc.title, themeOverrides, sections: doc.sections },
+    initialDocument,
     onLoadDocument: doc.loadDocument,
     onLoadThemeOverrides: replaceThemeOverrides,
     onTitleChange: doc.setTitle,
@@ -2221,13 +2437,11 @@ function FormBuilder({
     ensureActiveSection: () => doc.setActiveSectionId((prev) => prev ?? doc.sections[0]?.id ?? null)
   });
   const jsonDoc = {
-    version: 4,
+    version: 5,
     title: doc.title,
-    submitLabel: doc.submitLabel,
-    submitMode: doc.submitMode,
-    submitStyle: doc.submitStyle,
+    theme,
     themeOverrides,
-    sections: doc.sections.map((s) => ({ id: s.id, title: s.title, background: s.background, collapsed: s.collapsed, submitStyle: s.submitStyle, fields: s.fields }))
+    sections: doc.sections.map((s) => ({ id: s.id, title: s.title, background: s.background, collapsed: s.collapsed, fields: s.fields }))
   };
   const jsonString = JSON.stringify(jsonDoc, null, 2);
   function copyJson() {
@@ -2237,6 +2451,17 @@ function FormBuilder({
     }).catch(() => {
     });
   }
+  useImperativeHandle(ref, () => ({
+    getDocument: () => jsonDoc,
+    exportJson: () => jsonString,
+    loadDocument: (raw) => {
+      const migrated = migrateDocument(raw);
+      if (!migrated) return;
+      doc.loadDocument(migrated);
+      replaceThemeOverrides(migrated.themeOverrides);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), [jsonDoc, jsonString]);
   const activeSectionIdx = doc.sections.findIndex((s) => s.id === doc.activeSection?.id);
   const activeSectionLabel = t(doc.activeSection?.title, language) || `#${activeSectionIdx + 1}`;
   const rootStyle = {
@@ -2251,6 +2476,7 @@ function FormBuilder({
     "--fb-surface": theme.surface,
     "--fb-canvas": theme.canvas,
     "--fb-page-bg": theme.pageBackground,
+    "--fb-surface-2": mixHex(theme.surface, theme.ink, 0.06),
     "--fb-space-page": `${theme.layout.pagePadding}px`,
     "--fb-space-canvas": `${theme.layout.canvasPadding}px`,
     "--fb-space-section": `${theme.layout.sectionGap}px`,
@@ -2259,9 +2485,9 @@ function FormBuilder({
     "--fb-space-panel": `${theme.layout.panelPadding}px`,
     "--fb-space-ticket": `${theme.layout.ticketPadding}px`
   };
-  return /* @__PURE__ */ jsxs16("div", { style: rootStyle, children: [
-    /* @__PURE__ */ jsx17("style", { children: css }),
-    /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsxs16("div", { className: "fb-root", style: rootStyle, children: [
+    /* @__PURE__ */ jsx18("style", { children: css }),
+    /* @__PURE__ */ jsx18(
       Toolbar,
       {
         title: doc.title,
@@ -2270,75 +2496,117 @@ function FormBuilder({
         mode,
         saveState: persistence.saveState,
         chrome,
-        themeEditable,
-        theme,
+        features,
         savedFormsCount: persistence.savedForms.length,
         onTitleChange: doc.updateTitle,
         onLanguageChange: setLanguage,
         onModeChange: setMode,
-        onOpenSettings: () => setShowSettings(true),
         onNewForm: persistence.newForm,
         onOpenLibrary: () => setShowLibrary(true),
         onSaveExisting: persistence.saveExisting,
-        onOpenJson: () => setShowJson(true),
-        updateThemeColor,
-        updateThemeLayout,
-        resetTheme
+        onOpenJson: () => setShowJson(true)
       }
     ),
     persistence.loadingDraft ? /* @__PURE__ */ jsxs16("div", { style: styles.loadingScreen, children: [
-      /* @__PURE__ */ jsx17(Loader22, { size: 20, className: "spin" }),
-      /* @__PURE__ */ jsx17("span", { style: { marginTop: 8, fontSize: 13, color: "var(--fb-muted)" }, children: chrome.loadingDraft })
-    ] }) : mode === "build" ? /* @__PURE__ */ jsxs16("div", { style: styles.workArea, children: [
-      /* @__PURE__ */ jsx17(Palette, { activeSectionLabel, chrome, onAddField: doc.addField }),
-      /* @__PURE__ */ jsx17(
-        Canvas,
-        {
-          sections: doc.sections,
-          activeSectionId: doc.activeSectionId,
-          submitMode: doc.submitMode,
-          submitStyle: doc.submitStyle,
-          selectedId: doc.selectedId,
-          dragOverKey: drag.dragOverKey,
-          chrome,
-          strings,
-          language,
-          onActivateSection: doc.setActiveSectionId,
-          onToggleSectionCollapse: doc.toggleSectionCollapse,
-          onUpdateSectionTitle: doc.updateSectionTitle,
-          onUpdateSectionBackground: doc.updateSectionBackground,
-          onDuplicateSection: doc.duplicateSection,
-          onMoveSection: doc.moveSection,
-          onDeleteSection: doc.deleteSection,
-          onUpdateSectionSubmitStyle: doc.updateSectionSubmitStyle,
-          onClearSectionSubmitStyle: doc.clearSectionSubmitStyle,
-          onAddSection: doc.addSection,
-          onSelectField: (sectionId, fieldId) => {
-            doc.setSelectedId(fieldId);
-            doc.setActiveSectionId(sectionId);
-          },
-          onFieldChange: doc.updateField,
-          onMoveField: doc.moveField,
-          onDuplicateField: doc.duplicateField,
-          onDeleteField: doc.deleteField,
-          getDropZoneHandlers: drag.getDropZoneHandlers,
-          getDragHandleProps: drag.getDragHandleProps
-        }
-      ),
-      /* @__PURE__ */ jsx17(
-        Inspector,
-        {
-          selected: doc.selected,
-          language,
-          chrome,
-          onUpdateField: (patch) => doc.selected && doc.updateField(doc.selected.id, patch),
-          onDeleteField: () => doc.selected && doc.deleteField(doc.selected.id),
-          onUpdateOption: (optIdx, patch) => doc.selected && doc.updateOption(doc.selected.id, optIdx, patch),
-          onAddOption: () => doc.selected && doc.addOption(doc.selected.id),
-          onRemoveOption: (optIdx) => doc.selected && doc.removeOption(doc.selected.id, optIdx)
-        }
-      )
-    ] }) : /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx18(Loader22, { size: 20, className: "spin" }),
+      /* @__PURE__ */ jsx18("span", { style: { marginTop: 8, fontSize: 13, color: "var(--fb-muted)" }, children: chrome.loadingDraft })
+    ] }) : mode === "build" ? /* @__PURE__ */ jsxs16("div", { className: "fb-work-area", style: styles.workArea, "data-mobile-panel": mobilePanel, children: [
+      /* @__PURE__ */ jsxs16("div", { className: "fb-mobile-bar", children: [
+        /* @__PURE__ */ jsxs16(
+          "button",
+          {
+            type: "button",
+            className: "fb-mobile-btn",
+            "aria-pressed": mobilePanel === "palette",
+            onClick: () => setMobilePanel((p) => p === "palette" ? "none" : "palette"),
+            children: [
+              /* @__PURE__ */ jsx18(Menu, { size: 14 }),
+              " ",
+              chrome.paletteTabBlocks
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs16(
+          "button",
+          {
+            type: "button",
+            className: "fb-mobile-btn",
+            "aria-pressed": mobilePanel === "inspector",
+            onClick: () => setMobilePanel((p) => p === "inspector" ? "none" : "inspector"),
+            children: [
+              /* @__PURE__ */ jsx18(SlidersHorizontal, { size: 14 }),
+              " ",
+              chrome.properties
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs16("div", { className: "fb-canvas-area", style: styles.workArea, children: [
+        mobilePanel !== "none" && /* @__PURE__ */ jsx18("div", { className: "fb-mobile-backdrop", onClick: () => setMobilePanel("none") }),
+        /* @__PURE__ */ jsx18(
+          Palette,
+          {
+            activeSectionLabel,
+            chrome,
+            onAddField: (type) => {
+              doc.addField(type);
+              setMobilePanel("none");
+            },
+            features,
+            theme,
+            updateThemeColor,
+            updateThemeLayout,
+            resetTheme
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          Canvas,
+          {
+            sections: doc.sections,
+            activeSectionId: doc.activeSectionId,
+            selectedId: doc.selectedId,
+            dragOverKey: drag.dragOverKey,
+            chrome,
+            strings,
+            language,
+            features,
+            onActivateSection: doc.setActiveSectionId,
+            onToggleSectionCollapse: doc.toggleSectionCollapse,
+            onUpdateSectionTitle: doc.updateSectionTitle,
+            onUpdateSectionBackground: doc.updateSectionBackground,
+            onDuplicateSection: doc.duplicateSection,
+            onMoveSection: doc.moveSection,
+            onDeleteSection: doc.deleteSection,
+            onAddSection: doc.addSection,
+            onSelectField: (sectionId, fieldId) => {
+              doc.setSelectedId(fieldId);
+              doc.setActiveSectionId(sectionId);
+              setMobilePanel("inspector");
+            },
+            onFieldChange: doc.updateField,
+            onMoveField: doc.moveField,
+            onDuplicateField: doc.duplicateField,
+            onDeleteField: doc.deleteField,
+            getDropZoneHandlers: drag.getDropZoneHandlers,
+            getDragHandleProps: drag.getDragHandleProps
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          Inspector,
+          {
+            selected: doc.selected,
+            language,
+            chrome,
+            features,
+            onUpdateField: (patch) => doc.selected && doc.updateField(doc.selected.id, patch),
+            onDeleteField: () => doc.selected && doc.deleteField(doc.selected.id),
+            onUpdateOption: (optIdx, patch) => doc.selected && doc.updateOption(doc.selected.id, optIdx, patch),
+            onAddOption: () => doc.selected && doc.addOption(doc.selected.id),
+            onRemoveOption: (optIdx) => doc.selected && doc.removeOption(doc.selected.id, optIdx)
+          }
+        )
+      ] })
+    ] }) : /* @__PURE__ */ jsx18(
       PreviewPane,
       {
         title: doc.title,
@@ -2348,14 +2616,12 @@ function FormBuilder({
         strings,
         chrome,
         baseMaxWidth: theme.layout.maxWidth,
-        submitLabel: doc.submitLabel,
-        submitMode: doc.submitMode,
-        submitStyle: doc.submitStyle
+        onSubmit
       }
     ),
-    showJson && /* @__PURE__ */ jsx17(JsonModal, { chrome, jsonString, copied, onCopy: copyJson, onClose: () => setShowJson(false) }),
-    showLibrary && /* @__PURE__ */ jsx17(
-      LibraryModal,
+    showJson && /* @__PURE__ */ jsx18(JsonModal, { chrome, jsonString, copied, onCopy: copyJson, onClose: () => setShowJson(false) }),
+    showLibrary && /* @__PURE__ */ jsx18(
+      TemplatesModal,
       {
         chrome,
         savedForms: persistence.savedForms,
@@ -2368,7 +2634,7 @@ function FormBuilder({
         onClose: () => setShowLibrary(false)
       }
     ),
-    persistence.saveAsPrompt && /* @__PURE__ */ jsx17(
+    persistence.saveAsPrompt && /* @__PURE__ */ jsx18(
       SaveAsModal,
       {
         chrome,
@@ -2376,27 +2642,30 @@ function FormBuilder({
         onSave: persistence.saveAs,
         onClose: persistence.dismissSaveAsPrompt
       }
-    ),
-    showSettings && /* @__PURE__ */ jsx17(
-      SettingsModal,
-      {
-        chrome,
-        strings,
-        submitLabel: doc.submitLabel,
-        language,
-        submitMode: doc.submitMode,
-        submitStyle: doc.submitStyle,
-        onSubmitLabelChange: doc.updateSubmitLabel,
-        onSubmitModeChange: doc.setSubmitMode,
-        onSubmitStyleChange: doc.updateSubmitStyle,
-        onClose: () => setShowSettings(false)
-      }
     )
   ] });
-}
+});
+var FormBuilder_default = FormBuilder;
+
+// src/theme/darkTheme.ts
+var DARK_THEME = {
+  primary: "#8B8FF5",
+  primarySoft: "#262A45",
+  danger: "#F0715B",
+  dangerSoft: "#3A2420",
+  ink: "#EDEEF2",
+  muted: "#9096A8",
+  border: "#2E313D",
+  surface: "#1A1B23",
+  canvas: "#121319",
+  pageBackground: "#1A1B23",
+  layout: DEFAULT_THEME.layout
+};
 export {
-  FormBuilder,
-  FormBuilder as default,
+  DARK_THEME,
+  DEFAULT_THEME,
+  FormBuilder_default as FormBuilder,
+  FormBuilder_default as default,
   localStorageAdapter
 };
 //# sourceMappingURL=index.js.map