form-page-builder 0.1.0 → 2.0.0

package/dist/index.cjs

@@ -21,15 +21,17 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  FormBuilder: () => FormBuilder,
-  default: () => FormBuilder,
+  DARK_THEME: () => DARK_THEME,
+  DEFAULT_THEME: () => DEFAULT_THEME,
+  FormBuilder: () => FormBuilder_default,
+  default: () => FormBuilder_default,
   localStorageAdapter: () => localStorageAdapter
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/FormBuilder.tsx
 var import_react8 = require("react");
-var import_lucide_react19 = require("lucide-react");
+var import_lucide_react18 = require("lucide-react");
 
 // src/i18n/languages.ts
 var DEFAULT_LANGUAGES = [
@@ -77,6 +79,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",
@@ -122,15 +126,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",
@@ -143,22 +147,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",
@@ -168,6 +167,7 @@ var CHROME = {
     fieldTypeToggle: "Toggle",
     fieldTypeParagraph: "Paragraph",
     fieldTypeImage: "Image",
+    fieldTypeButton: "Button",
     subtypeText: "Text",
     subtypeEmail: "Email",
     subtypePhone: "Phone",
@@ -180,8 +180,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",
@@ -206,6 +215,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",
@@ -251,15 +262,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",
@@ -272,22 +283,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",
@@ -297,6 +303,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",
@@ -309,8 +316,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",
@@ -346,6 +362,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
+var import_lz_string = require("lz-string");
+function compress(raw) {
+  return (0, import_lz_string.compressToUTF16)(raw);
+}
+function decompress(value) {
+  try {
+    return (0, import_lz_string.decompressFromUTF16)(value);
+  } catch {
+    return null;
+  }
+}
+
 // src/lib/storage/localStorageAdapter.ts
 function hasLocalStorage() {
   return typeof window !== "undefined" && !!window.localStorage;
@@ -353,11 +398,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;
@@ -365,60 +420,12 @@ var localStorageAdapter = {
   }
 };
 
-// src/hooks/useTheme.ts
-var import_react = require("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] = (0, import_react.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
-var import_react2 = require("react");
-
 // src/constants/fieldTypes.ts
 var import_lucide_react = require("lucide-react");
 var FIELD_TYPES = [
   { type: "paragraph", icon: import_lucide_react.FileText, isContent: true, defaultIcon: "FileText" },
   { type: "image", icon: import_lucide_react.Image, isContent: true, isImage: true, defaultIcon: "Type" },
+  { type: "button", icon: import_lucide_react.MousePointerClick, isContent: true, defaultIcon: "Type" },
   { type: "input", icon: import_lucide_react.Type, placeholder: true, hasSubtype: true, defaultIcon: "Type" },
   { type: "textarea", icon: import_lucide_react.AlignLeft, placeholder: true, defaultIcon: "AlignLeft" },
   { type: "select", icon: import_lucide_react.ChevronDown, options: true, defaultIcon: "ChevronDown" },
@@ -439,6 +446,7 @@ var IMAGE_SHAPES = ["square", "circle", "banner"];
 var FIELD_TYPE_CHROME_KEY = {
   paragraph: "fieldTypeParagraph",
   image: "fieldTypeImage",
+  button: "fieldTypeButton",
   input: "fieldTypeInput",
   textarea: "fieldTypeTextarea",
   select: "fieldTypeSelect",
@@ -517,21 +525,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
+var import_react = require("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] = (0, import_react.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
+var import_react2 = require("react");
 function useFormDocument({ language, chrome }) {
   const [title, setTitle] = (0, import_react2.useState)(bi("Untitled form", ""));
-  const [submitLabel, setSubmitLabelState] = (0, import_react2.useState)(bi());
-  const [submitMode, setSubmitMode] = (0, import_react2.useState)("combined");
-  const [submitStyle, setSubmitStyleState] = (0, import_react2.useState)({ color: "", size: "md" });
   const [sections, setSections] = (0, import_react2.useState)([defaultSection()]);
   const [activeSectionId, setActiveSectionId] = (0, import_react2.useState)(null);
   const [selectedId, setSelectedId] = (0, import_react2.useState)(null);
@@ -541,12 +723,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]);
@@ -591,12 +767,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;
@@ -674,9 +844,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() {
@@ -684,16 +851,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,
@@ -702,11 +863,8 @@ function useFormDocument({ language, chrome }) {
     activeSection,
     setActiveSectionId,
     setSelectedId,
-    setSubmitMode,
     setTitle,
     updateTitle,
-    updateSubmitLabel,
-    updateSubmitStyle,
     addSection,
     duplicateSection,
     deleteSection,
@@ -714,8 +872,6 @@ function useFormDocument({ language, chrome }) {
     updateSectionTitle,
     updateSectionBackground,
     toggleSectionCollapse,
-    updateSectionSubmitStyle,
-    clearSectionSubmitStyle,
     addField,
     updateField,
     deleteField,
@@ -738,62 +894,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,
@@ -819,17 +928,27 @@ function usePersistence({
   (0, import_react3.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();
@@ -841,7 +960,7 @@ function usePersistence({
     refreshLibrary();
   }, []);
   (0, import_react3.useEffect)(() => {
-    if (!hasLoadedOnce.current) return;
+    if (!hasLoadedOnce.current || !autosave) return;
     setSaveState("saving");
     if (autosaveTimer.current) clearTimeout(autosaveTimer.current);
     autosaveTimer.current = setTimeout(async () => {
@@ -855,8 +974,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 {
@@ -965,26 +1088,26 @@ function useDragReorder(reorderWithinSection) {
 }
 
 // src/components/Toolbar.tsx
-var import_lucide_react4 = require("lucide-react");
+var import_lucide_react2 = require("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 },
@@ -993,7 +1116,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" },
@@ -1002,10 +1125,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)" },
@@ -1014,52 +1135,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)" },
@@ -1069,32 +1194,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
 var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.langToggleTrack, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        style: {
+          ...styles.langToggleThumb,
+          width: `calc(${100 / n}% - 3px)`,
+          transform: `translateX(calc(${activeIdx * 100}% + ${activeIdx * 3}px))`
+        }
+      }
+    ),
+    languages.map((l) => /* @__PURE__ */ (0, import_jsx_runtime.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
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Toolbar({
+  title,
+  language,
+  languages,
+  mode,
+  saveState,
+  chrome,
+  features,
+  savedFormsCount,
+  onTitleChange,
+  onLanguageChange,
+  onModeChange,
+  onNewForm,
+  onOpenLibrary,
+  onSaveExisting,
+  onOpenJson
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: styles.toolbar, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: styles.toolbarLeft, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: styles.logoMark, children: "FB" }),
+      features.naming ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { value: t(title, language), onChange: (e) => onTitleChange(e.target.value), style: styles.titleInput, "aria-label": "Form title" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: styles.titleInput, children: t(title, language) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: styles.toolbarRight, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: styles.saveStatus, children: [
+        saveState === "saving" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Loader2, { size: 12, className: "spin" }),
+          " ",
+          chrome.saving
+        ] }),
+        saveState === "saved" && chrome.saved,
+        saveState === "error" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { color: "var(--fb-danger)", display: "flex", alignItems: "center", gap: 4 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.AlertCircle, { size: 12 }),
+          " ",
+          chrome.saveFailed
+        ] })
+      ] }),
+      features.languageSwitcher && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: styles.toolbarDivider }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LanguageToggle, { languages, value: language, onChange: onLanguageChange })
+      ] }),
+      features.previewMode && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: styles.toolbarDivider }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", { style: mode === "build" ? styles.tabBtnActive : styles.tabBtn, onClick: () => onModeChange("build"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Pencil, { size: 14 }),
+          " ",
+          chrome.build
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", { style: mode === "preview" ? styles.tabBtnActive : styles.tabBtn, onClick: () => onModeChange("preview"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Eye, { size: 14 }),
+          " ",
+          chrome.preview
+        ] })
+      ] }),
+      (features.newForm || features.templates) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: styles.toolbarDivider }),
+      features.newForm && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", { style: styles.ghostBtn, onClick: onNewForm, title: chrome.startNewForm, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.FilePlus2, { size: 14 }),
+        " ",
+        chrome.newForm
+      ] }),
+      features.templates && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", { style: styles.ghostBtn, onClick: onOpenLibrary, title: chrome.openTemplatesTitle, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.FolderOpen, { size: 14 }),
+          " ",
+          chrome.templates,
+          savedFormsCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: styles.countBadge, children: savedFormsCount })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", { style: styles.primaryBtn, onClick: onSaveExisting, title: chrome.saveToLibraryTitle, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Save, { size: 14 }),
+          " ",
+          chrome.save
+        ] })
+      ] }),
+      features.jsonView && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", { style: styles.ghostBtn, onClick: onOpenJson, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Code2, { size: 14 }),
+        " ",
+        chrome.viewJson
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/Palette.tsx
+var import_react5 = require("react");
+var import_lucide_react5 = require("lucide-react");
+
+// src/components/Segmented.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function Segmented({ options, value, onChange }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.segmented, children: options.map((opt) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles.segmented, children: options.map((opt) => {
     const Icon = opt.icon;
     const active = value === opt.value;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { type: "button", style: active ? styles.segmentedBtnActive : styles.segmentedBtn, onClick: () => onChange(opt.value), children: [
-      Icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: 13 }),
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { type: "button", style: active ? styles.segmentedBtnActive : styles.segmentedBtn, onClick: () => onChange(opt.value), children: [
+      Icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { size: 13 }),
       opt.label
     ] }, opt.value);
   }) });
 }
 
-// src/components/LayoutPopover.tsx
-var import_react5 = require("react");
-var import_lucide_react3 = require("lucide-react");
+// src/components/DesignPanel.tsx
+var import_lucide_react4 = require("lucide-react");
 
 // src/constants/colors.ts
 var COLOR_SWATCHES = ["", "#1B1E24", "#5B5FEF", "#C4432E", "#0EA5A4", "#D97706"];
@@ -1102,7 +1341,7 @@ var SECTION_BG_SWATCHES = ["", "#FFFFFF", "#F5F6F8", "#EEF0FF", "#FDF4E7", "#E9F
 var BUTTON_COLOR_SWATCHES = ["", "#5B5FEF", "#0EA5A4", "#D97706", "#C4432E", "#1B1E24"];
 
 // src/constants/layout.ts
-var import_lucide_react2 = require("lucide-react");
+var import_lucide_react3 = require("lucide-react");
 var WIDTH_OPTIONS = [
   { value: "1/3", label: "1/3" },
   { value: "1/2", label: "1/2" },
@@ -1117,201 +1356,125 @@ 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;
   return [
-    { value: "laptop", label: chrome.deviceLaptop, icon: import_lucide_react2.Monitor, maxWidth: mw },
-    { value: "tablet", label: chrome.deviceTablet, icon: import_lucide_react2.Tablet, maxWidth: Math.min(mw, 480) },
-    { value: "mobile", label: chrome.deviceMobile, icon: import_lucide_react2.Smartphone, maxWidth: Math.min(mw, 340) }
+    { value: "laptop", label: chrome.deviceLaptop, icon: import_lucide_react3.Monitor, maxWidth: mw },
+    { value: "tablet", label: chrome.deviceTablet, icon: import_lucide_react3.Tablet, maxWidth: Math.min(mw, 480) },
+    { value: "mobile", label: chrome.deviceMobile, icon: import_lucide_react3.Smartphone, maxWidth: Math.min(mw, 340) }
   ];
 }
 
-// src/components/LayoutPopover.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function LayoutPopover({ chrome, theme, updateThemeColor, updateThemeLayout, resetTheme }) {
-  const [open, setOpen] = (0, import_react5.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { style: styles.iconBtn, title: chrome.spacing, onClick: () => setOpen((v) => !v), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react3.Ruler, { size: 14 }) }),
-    open && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: styles.layoutPanel, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: styles.layoutPanelHeader, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { fontWeight: 600, fontSize: 13 }, children: [
-          chrome.theme,
-          " / ",
-          chrome.spacing
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", { type: "button", style: styles.resetLinkBtn, onClick: resetTheme, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react3.RotateCcw, { size: 11 }),
-          " ",
-          chrome.reset
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { style: styles.propLabel, children: chrome.primaryColor }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: styles.swatchRow, children: [
-        BUTTON_COLOR_SWATCHES.slice(1).map((c) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", title: c, style: { ...styles.swatchBtn, background: c, ...theme.primary === c ? styles.swatchBtnActive : {} }, onClick: () => updateThemeColor("primary", c) }, c)),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "color", value: theme.primary, onChange: (e) => updateThemeColor("primary", e.target.value), style: styles.colorPickerInput })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { style: styles.propLabel, children: chrome.pageBackground }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: styles.swatchRow, children: [
-        SECTION_BG_SWATCHES.filter(Boolean).map((c) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", title: c, style: { ...styles.swatchBtn, background: c, ...theme.pageBackground === c ? styles.swatchBtnActive : {} }, onClick: () => updateThemeColor("pageBackground", c) }, c)),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "color", value: theme.pageBackground, onChange: (e) => updateThemeColor("pageBackground", e.target.value), style: styles.colorPickerInput })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { style: styles.propLabel, children: chrome.maxWidthPx }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "number", style: styles.propInput, value: theme.layout.maxWidth, onChange: (e) => updateThemeLayout("maxWidth", Number(e.target.value) || DEFAULT_THEME.layout.maxWidth) }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: styles.inspectorDivider }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: styles.panelHeading, children: chrome.spacing }),
-      SPACING_FIELDS.map(({ key, labelKey }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: styles.spacingRow, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: styles.spacingLabel, children: chrome[labelKey] }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "number", style: styles.spacingInput, value: theme.layout[key], onChange: (e) => updateThemeLayout(key, Number(e.target.value) || 0) })
-      ] }, key))
-    ] })
+// src/components/DesignPanel.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function DesignPanel({ chrome, theme, updateThemeColor, updateThemeLayout, resetTheme }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles.layoutPanelHeader, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontWeight: 600, fontSize: 13 }, children: chrome.theme }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("button", { type: "button", style: styles.resetLinkBtn, onClick: resetTheme, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react4.RotateCcw, { size: 11 }),
+        " ",
+        chrome.reset
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { style: styles.propLabel, children: chrome.primaryColor }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles.swatchRow, children: [
+      BUTTON_COLOR_SWATCHES.slice(1).map((c) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", title: c, style: { ...styles.swatchBtn, background: c, ...theme.primary === c ? styles.swatchBtnActive : {} }, onClick: () => updateThemeColor("primary", c) }, c)),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "color", value: theme.primary, onChange: (e) => updateThemeColor("primary", e.target.value), style: styles.colorPickerInput })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { style: styles.propLabel, children: chrome.pageBackground }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles.swatchRow, children: [
+      SECTION_BG_SWATCHES.filter(Boolean).map((c) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", title: c, style: { ...styles.swatchBtn, background: c, ...theme.pageBackground === c ? styles.swatchBtnActive : {} }, onClick: () => updateThemeColor("pageBackground", c) }, c)),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "color", value: theme.pageBackground, onChange: (e) => updateThemeColor("pageBackground", e.target.value), style: styles.colorPickerInput })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { style: styles.propLabel, children: chrome.maxWidthPx }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "number", style: styles.propInput, value: theme.layout.maxWidth, onChange: (e) => updateThemeLayout("maxWidth", Number(e.target.value) || DEFAULT_THEME.layout.maxWidth) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles.inspectorDivider }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles.panelHeading, children: chrome.spacing }),
+    SPACING_FIELDS.map(({ key, labelKey }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles.spacingRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: styles.spacingLabel, children: chrome[labelKey] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "number", style: styles.spacingInput, value: theme.layout[key], onChange: (e) => updateThemeLayout(key, Number(e.target.value) || 0) })
+    ] }, key))
   ] });
 }
 
-// src/components/Toolbar.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function Toolbar({
-  title,
-  language,
-  languages,
-  mode,
-  saveState,
+// src/components/Palette.tsx
+var import_jsx_runtime5 = require("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__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles.toolbar, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles.toolbarLeft, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles.logoMark, children: "FB" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { value: t(title, language), onChange: (e) => onTitleChange(e.target.value), style: styles.titleInput, "aria-label": "Form title" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles.toolbarRight, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: styles.saveStatus, children: [
-        saveState === "saving" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react4.Loader2, { size: 12, className: "spin" }),
-          " ",
-          chrome.saving
-        ] }),
-        saveState === "saved" && chrome.saved,
-        saveState === "error" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: { color: "var(--fb-danger)", display: "flex", alignItems: "center", gap: 4 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react4.AlertCircle, { size: 12 }),
-          " ",
-          chrome.saveFailed
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles.toolbarDivider }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react4.Languages, { size: 14, color: "var(--fb-muted)" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Segmented, { options: languages.map((l) => ({ value: l.code, label: l.label })), value: language, onChange: onLanguageChange }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles.toolbarDivider }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { style: mode === "build" ? styles.tabBtnActive : styles.tabBtn, onClick: () => onModeChange("build"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react4.Pencil, { size: 14 }),
-        " ",
-        chrome.build
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { style: mode === "preview" ? styles.tabBtnActive : styles.tabBtn, onClick: () => onModeChange("preview"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react4.Eye, { size: 14 }),
-        " ",
-        chrome.preview
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles.toolbarDivider }),
-      themeEditable && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LayoutPopover, { chrome, theme, updateThemeColor, updateThemeLayout, resetTheme }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { style: styles.iconBtn, title: chrome.settings, onClick: onOpenSettings, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react4.Settings, { size: 14 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { style: styles.ghostBtn, onClick: onNewForm, title: chrome.startNewForm, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react4.FilePlus2, { size: 14 }),
-        " ",
-        chrome.newForm
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { style: styles.ghostBtn, onClick: onOpenLibrary, title: chrome.openSavedForm, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react4.FolderOpen, { size: 14 }),
+  const [tab, setTab] = (0, import_react5.useState)("blocks");
+  const contentTypes = CONTENT_TYPES.filter((f) => isContentBlockEnabled(features, f.type));
+  const formTypes = FORM_TYPES.filter((f) => isFieldTypeEnabled(features, f.type));
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "fb-palette", style: styles.palette, children: [
+    features.design && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { marginBottom: 14 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      Segmented,
+      {
+        options: [
+          { value: "blocks", label: chrome.paletteTabBlocks },
+          { value: "design", label: chrome.paletteTabDesign }
+        ],
+        value: tab,
+        onChange: setTab
+      }
+    ) }),
+    tab === "design" && features.design ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      DesignPanel,
+      {
+        chrome,
+        theme,
+        updateThemeColor,
+        updateThemeLayout,
+        resetTheme
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles.activeSectionHint, children: [
+        chrome.addingTo,
         " ",
-        chrome.myForms,
-        savedFormsCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: styles.countBadge, children: savedFormsCount })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: activeSectionLabel })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { style: styles.primaryBtn, onClick: onSaveExisting, title: chrome.saveToLibraryTitle, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react4.Save, { size: 14 }),
-        " ",
-        chrome.save
+      contentTypes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles.panelHeading, children: chrome.contentBlocks }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles.paletteList, children: contentTypes.map((f) => {
+          const Icon = f.icon;
+          return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("button", { style: styles.paletteItem, onClick: () => onAddField(f.type), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { size: 16, color: "var(--fb-primary)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: chrome[FIELD_TYPE_CHROME_KEY[f.type]] }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react5.Plus, { size: 13, color: "var(--fb-muted)", style: { marginLeft: "auto" } })
+          ] }, f.type);
+        }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { style: styles.ghostBtn, onClick: onOpenJson, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react4.Code2, { size: 14 }),
-        " ",
-        chrome.viewJson
+      formTypes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { ...styles.panelHeading, marginTop: 16 }, children: chrome.formFields }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles.paletteList, children: formTypes.map((f) => {
+          const Icon = f.icon;
+          return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("button", { style: styles.paletteItem, onClick: () => onAddField(f.type), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { size: 16, color: "var(--fb-primary)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: chrome[FIELD_TYPE_CHROME_KEY[f.type]] }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react5.Plus, { size: 13, color: "var(--fb-muted)", style: { marginLeft: "auto" } })
+          ] }, f.type);
+        }) })
       ] })
     ] })
   ] });
 }
 
-// src/components/Palette.tsx
-var import_lucide_react5 = require("lucide-react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function Palette({ activeSectionLabel, chrome, onAddField }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles.palette, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles.activeSectionHint, children: [
-      chrome.addingTo,
-      " ",
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: activeSectionLabel })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles.panelHeading, children: chrome.contentBlocks }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles.paletteList, children: CONTENT_TYPES.map((f) => {
-      const Icon = f.icon;
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("button", { style: styles.paletteItem, onClick: () => onAddField(f.type), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: 16, color: "var(--fb-primary)" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: chrome[FIELD_TYPE_CHROME_KEY[f.type]] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react5.Plus, { size: 13, color: "#A6A8B3", style: { marginLeft: "auto" } })
-      ] }, f.type);
-    }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { ...styles.panelHeading, marginTop: 16 }, children: chrome.formFields }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles.paletteList, children: FORM_TYPES.map((f) => {
-      const Icon = f.icon;
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("button", { style: styles.paletteItem, onClick: () => onAddField(f.type), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: 16, color: "var(--fb-primary)" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: chrome[FIELD_TYPE_CHROME_KEY[f.type]] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react5.Plus, { size: 13, color: "#A6A8B3", style: { marginLeft: "auto" } })
-      ] }, f.type);
-    }) })
-  ] });
-}
-
 // src/components/Canvas.tsx
 var import_lucide_react12 = require("lucide-react");
 
 // src/components/SectionCard.tsx
 var import_lucide_react11 = require("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)" };
-}
-
 // src/components/FieldTicket.tsx
 var import_lucide_react10 = require("lucide-react");
 
@@ -1372,7 +1535,7 @@ var ICON_LIBRARY = {
 
 // src/components/fields/ImageBlock.tsx
 var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function buildImageStyle(field) {
   const aspectRatio = field.shape === "banner" ? "16 / 5" : "1 / 1";
   return {
@@ -1386,35 +1549,58 @@ function buildImageStyle(field) {
 }
 function ImageBlock({ field, lang }) {
   const shapeStyle = buildImageStyle(field);
-  const img = field.src ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: field.src, alt: t(field.alt, lang || "en"), style: shapeStyle }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { ...shapeStyle, ...styles.imagePlaceholder }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react8.Image, { size: 20, color: "var(--fb-muted)" }) });
-  return field.link ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { href: field.link, target: "_blank", rel: "noreferrer", style: { display: "block" }, children: img }) : img;
+  const img = field.src ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { src: field.src, alt: t(field.alt, lang || "en"), style: shapeStyle }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { ...shapeStyle, ...styles.imagePlaceholder }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react8.Image, { size: 20, color: "var(--fb-muted)" }) });
+  return field.link ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function ButtonBlock({ field, lang, onAction }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", style: { ...styles.submitBtn, ...resolveSubmitStyle(field.buttonStyle) }, onClick: () => onAction?.(field), children: t(field.label, lang) || "..." });
 }
 
 // src/components/fields/FieldBlock.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-function FieldBlock({ field, lang, onFieldChange, strings, chrome, error, isBuild }) {
-  if (field.type === "image") return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ImageBlock, { field, lang });
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function FieldBlock({ field, lang, onFieldChange, strings, chrome, error, isBuild, onButtonAction }) {
+  if (field.type === "image") return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ImageBlock, { field, lang });
+  if (field.type === "button") return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(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__ */ (0, import_jsx_runtime6.jsx)(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__ */ (0, import_jsx_runtime8.jsx)(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__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: isInline ? "row" : "column", alignItems: isInline ? "center" : "stretch", gap: isInline ? 10 : 6 }, children: [
-      showLabel && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { style: { ...styles.previewLabel, marginBottom: isInline ? 0 : 6, flexShrink: 0, width: isInline ? 120 : "auto", display: "flex", alignItems: "center", gap: 6 }, children: [
-        IconComp && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconComp, { size: 14, color: "#6B6E79" }),
-        labelText || (isBuild ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontStyle: "italic", color: "var(--fb-muted)" }, children: chrome?.untitledField || "Untitled field" }) : ""),
-        field.required && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { color: "var(--fb-danger)" }, children: " *" })
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", flexDirection: isInline ? "row" : "column", alignItems: isInline ? "center" : "stretch", gap: isInline ? 10 : 6 }, children: [
+      showLabel && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { style: { ...styles.previewLabel, marginBottom: isInline ? 0 : 6, flexShrink: 0, width: isInline ? 120 : "auto", display: "flex", alignItems: "center", gap: 6 }, children: [
+        IconComp && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(IconComp, { size: 14, color: "var(--fb-muted)" }),
+        labelText || (isBuild ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { fontStyle: "italic", color: "var(--fb-muted)" }, children: chrome?.untitledField || "Untitled field" }) : ""),
+        field.required && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: "var(--fb-danger)" }, children: " *" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1, minWidth: 0 }, children: renderInteractive(field, lang, onFieldChange, IconComp, !!error, strings) })
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { flex: 1, minWidth: 0 }, children: renderInteractive(field, lang, onFieldChange, IconComp, !!error, strings) })
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: styles.fieldError, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react9.CircleAlert, { size: 12 }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: styles.fieldError, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react9.CircleAlert, { size: 12 }),
       " ",
       error
     ] })
@@ -1428,40 +1614,40 @@ function renderInteractive(field, lang, onFieldChange, IconComp, hasError, strin
   if (field.type === "input") {
     switch (field.inputType) {
       case "number":
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "number", ...common, min: field.min ?? void 0, max: field.max ?? void 0 });
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { type: "number", ...common, min: field.min ?? void 0, max: field.max ?? void 0 });
       case "email":
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "email", ...common });
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { type: "email", ...common });
       case "password":
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "password", ...common, maxLength: field.maxLength || void 0 });
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { type: "password", ...common, maxLength: field.maxLength || void 0 });
       case "phone":
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "tel", ...common });
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { type: "tel", ...common });
       case "date":
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "date", ...common });
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { type: "date", ...common });
       case "time":
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "time", ...common });
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { type: "time", ...common });
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "text", ...common, maxLength: field.maxLength || void 0 });
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { type: "text", ...common, maxLength: field.maxLength || void 0 });
     }
   }
   switch (field.type) {
     case "textarea":
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("textarea", { ...common, rows: 3, maxLength: field.maxLength || void 0 });
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("textarea", { ...common, rows: 3, maxLength: field.maxLength || void 0 });
     case "select":
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("select", { style: inputStyle, value: value || "", onChange: (e) => set(e.target.value), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "", children: strings.selectPlaceholder }),
-        (field.options || []).map((o) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: o.value, children: t(o.label, lang) }, o.value))
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("select", { style: inputStyle, value: value || "", onChange: (e) => set(e.target.value), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "", children: strings.selectPlaceholder }),
+        (field.options || []).map((o) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: o.value, children: t(o.label, lang) }, o.value))
       ] });
     case "radio":
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { display: "flex", gap: 16, flexWrap: "wrap", marginTop: 4 }, children: (field.options || []).map((o) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { style: styles.previewRadio, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "radio", name: field.id, value: o.value, checked: value === o.value, onChange: (e) => set(e.target.value) }),
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { display: "flex", gap: 16, flexWrap: "wrap", marginTop: 4 }, children: (field.options || []).map((o) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { style: styles.previewRadio, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime6.jsx)("div", { style: { display: "flex", gap: 16, flexWrap: "wrap", marginTop: 4 }, children: (field.options || []).map((o) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { display: "flex", gap: 16, flexWrap: "wrap", marginTop: 4 }, children: (field.options || []).map((o) => {
         const checked = vals.includes(o.value);
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { style: styles.previewRadio, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "checkbox", checked, onChange: (e) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { style: styles.previewRadio, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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)" } }),
@@ -1470,25 +1656,25 @@ function renderInteractive(field, lang, onFieldChange, IconComp, hasError, strin
       }) });
     }
     case "checkbox":
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { style: styles.previewRadio, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "checkbox", checked: !!value, onChange: (e) => set(e.target.checked), style: { accentColor: "var(--fb-primary)" } }),
-        IconComp && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconComp, { size: 14, color: "#6B6E79" }),
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { style: styles.previewRadio, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { type: "checkbox", checked: !!value, onChange: (e) => set(e.target.checked), style: { accentColor: "var(--fb-primary)" } }),
+        IconComp && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(IconComp, { size: 14, color: "var(--fb-muted)" }),
         t(field.label, lang),
-        field.required && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { color: "var(--fb-danger)" }, children: " *" })
+        field.required && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: "var(--fb-danger)" }, children: " *" })
       ] });
     case "toggle":
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { style: styles.previewRadio, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "checkbox", checked: !!value, onChange: (e) => set(e.target.checked), style: { accentColor: "var(--fb-primary)" } }),
-        IconComp && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconComp, { size: 14, color: "#6B6E79" }),
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { style: styles.previewRadio, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { type: "checkbox", checked: !!value, onChange: (e) => set(e.target.checked), style: { accentColor: "var(--fb-primary)" } }),
+        IconComp && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(IconComp, { size: 14, color: "var(--fb-muted)" }),
         t(field.label, lang)
       ] });
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "text", ...common });
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { type: "text", ...common });
   }
 }
 
 // src/components/FieldTicket.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function FieldTicket({
   field,
   idx,
@@ -1497,6 +1683,7 @@ function FieldTicket({
   chrome,
   strings,
   language,
+  dragEnabled,
   onSelect,
   onFieldChange,
   onMoveField,
@@ -1508,7 +1695,7 @@ function FieldTicket({
   const meta = getMeta(field.type);
   const Icon = meta.icon;
   const widthPct = WIDTH_PERCENT[field.width || "1/1"];
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       ...dropZoneHandlers,
@@ -1522,35 +1709,35 @@ function FieldTicket({
         ...isDragOver ? styles.ticketDragOver : {}
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: styles.ticketIndex, children: String(idx + 1).padStart(2, "0") }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: styles.ticketPerforation }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: styles.ticketBody, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: styles.ticketTop, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { ...dragHandleProps, style: { cursor: "grab", display: "flex" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react10.GripVertical, { size: 14, color: "#C4C6D0" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: 13, color: "var(--fb-primary)" }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { style: styles.typeBadge, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: styles.ticketIndex, children: String(idx + 1).padStart(2, "0") }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: styles.ticketPerforation }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: styles.ticketBody, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: styles.ticketTop, children: [
+            dragEnabled && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { ...dragHandleProps, style: { cursor: "grab", display: "flex" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react10.GripVertical, { size: 14, color: "var(--fb-muted)" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { size: 13, color: "var(--fb-primary)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("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__ */ (0, import_jsx_runtime7.jsx)("span", { style: styles.requiredBadge, children: chrome.required })
+            field.required && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: styles.requiredBadge, children: chrome.required })
           ] }),
-          field.width && field.width !== "1/1" || field.labelPosition === "inline" || field.verticalAlign !== "top" || field.hideLabel ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: styles.chipRow, children: [
-            field.width && field.width !== "1/1" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { style: styles.miniBadge, children: [
+          field.width && field.width !== "1/1" || field.labelPosition === "inline" || field.verticalAlign !== "top" || field.hideLabel ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: styles.chipRow, children: [
+            field.width && field.width !== "1/1" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: styles.miniBadge, children: [
               chrome.width,
               " ",
               field.width
             ] }),
-            field.labelPosition === "inline" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: styles.miniBadge, children: chrome.inline }),
-            field.verticalAlign !== "top" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: styles.miniBadge, children: chrome[field.verticalAlign] }),
-            field.hideLabel && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: styles.miniBadge, children: chrome.hideLabel })
+            field.labelPosition === "inline" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: styles.miniBadge, children: chrome.inline }),
+            field.verticalAlign !== "top" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: styles.miniBadge, children: chrome[field.verticalAlign] }),
+            field.hideLabel && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: styles.miniBadge, children: chrome.hideLabel })
           ] }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FieldBlock, { field, lang: language, onFieldChange, strings, chrome, isBuild: true }) })
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FieldBlock, { field, lang: language, onFieldChange, strings, chrome, isBuild: true }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: styles.ticketActions, onClick: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { style: styles.iconBtn, title: chrome.moveUp, onClick: () => onMoveField(field.id, -1), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react10.ArrowUp, { size: 13 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { style: styles.iconBtn, title: chrome.moveDown, onClick: () => onMoveField(field.id, 1), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react10.ArrowDown, { size: 13 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { style: styles.iconBtn, title: chrome.duplicate, onClick: () => onDuplicateField(field.id), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react10.Copy, { size: 13 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { style: { ...styles.iconBtn, ...styles.iconBtnDanger }, title: chrome.delete, onClick: () => onDeleteField(field.id), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react10.Trash2, { size: 13 }) })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: styles.ticketActions, onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { style: styles.iconBtn, title: chrome.moveUp, onClick: () => onMoveField(field.id, -1), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react10.ArrowUp, { size: 13 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { style: styles.iconBtn, title: chrome.moveDown, onClick: () => onMoveField(field.id, 1), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react10.ArrowDown, { size: 13 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { style: styles.iconBtn, title: chrome.duplicate, onClick: () => onDuplicateField(field.id), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react10.Copy, { size: 13 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { style: { ...styles.iconBtn, ...styles.iconBtnDanger }, title: chrome.delete, onClick: () => onDeleteField(field.id), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react10.Trash2, { size: 13 }) })
         ] })
       ]
     }
@@ -1558,19 +1745,18 @@ function FieldTicket({
 }
 
 // src/components/SectionCard.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function SectionCard({
   section,
   sIdx,
   sectionsLength,
   isActive,
-  submitMode,
-  submitStyle,
   selectedId,
   dragOverKey,
   chrome,
   strings,
   language,
+  features,
   onActivate,
   onToggleCollapse,
   onUpdateTitle,
@@ -1578,8 +1764,6 @@ function SectionCard({
   onDuplicateSection,
   onMoveSection,
   onDeleteSection,
-  onUpdateSectionSubmitStyle,
-  onClearSectionSubmitStyle,
   onSelectField,
   onFieldChange,
   onMoveField,
@@ -1588,19 +1772,19 @@ function SectionCard({
   getDropZoneHandlers,
   getDragHandleProps
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       style: { ...styles.sectionBlock, background: section.background || "transparent", border: isActive ? "1px solid var(--fb-primary)" : "1px dashed var(--fb-border)" },
       onClick: onActivate,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: styles.sectionHeader, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { style: styles.chevronBtn, onClick: (e) => {
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: styles.sectionHeader, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { style: styles.chevronBtn, onClick: (e) => {
             e.stopPropagation();
             onToggleCollapse();
-          }, children: section.collapsed ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react11.ChevronRight, { size: 15 }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react11.ChevronDown, { size: 15 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { ...styles.colorDot, background: section.background || "var(--fb-canvas)" } }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          }, children: section.collapsed ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react11.ChevronRight, { size: 15 }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react11.ChevronDown, { size: 15 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { ...styles.colorDot, background: section.background || "var(--fb-canvas)" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "input",
             {
               style: styles.sectionTitleInput,
@@ -1610,29 +1794,21 @@ function SectionCard({
               onClick: (e) => e.stopPropagation()
             }
           ),
-          section.collapsed && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: styles.miniBadge, children: chrome.fieldsCount(section.fields.length) }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: styles.sectionHeaderActions, onClick: (e) => e.stopPropagation(), children: [
-            !section.collapsed && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: styles.swatchRow, children: [
-              SECTION_BG_SWATCHES.map((c) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime10.jsx)("span", { style: styles.miniBadge, children: chrome.fieldsCount(section.fields.length) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: styles.sectionHeaderActions, onClick: (e) => e.stopPropagation(), children: [
+            features.sections && !section.collapsed && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: styles.swatchRow, children: [
+              SECTION_BG_SWATCHES.map((c) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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__ */ (0, import_jsx_runtime10.jsx)("input", { type: "color", title: chrome.customColor, value: /^#/.test(section.background) ? section.background : "#ffffff", onChange: (e) => onUpdateBackground(e.target.value), style: styles.colorPickerInput })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { style: styles.iconBtn, title: chrome.duplicate, onClick: onDuplicateSection, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react11.Copy, { size: 13 }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { style: styles.iconBtn, title: chrome.moveUp, disabled: sIdx === 0, onClick: () => onMoveSection(-1), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react11.ArrowUp, { size: 13 }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { style: styles.iconBtn, title: chrome.moveDown, disabled: sIdx === sectionsLength - 1, onClick: () => onMoveSection(1), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react11.ArrowDown, { size: 13 }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { style: { ...styles.iconBtn, ...styles.iconBtnDanger }, title: chrome.deleteSection, disabled: sectionsLength <= 1, onClick: onDeleteSection, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react11.Trash2, { size: 13 }) })
-          ] })
-        ] }),
-        !section.collapsed && submitMode === "perSection" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: styles.submitStyleRow, onClick: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: styles.miniLabel, children: chrome.submitStyle }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: styles.swatchRow, children: BUTTON_COLOR_SWATCHES.map((c) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsx)(Segmented, { options: SUBMIT_SIZE_OPTIONS, value: section.submitStyle?.size || submitStyle.size, onChange: (v) => onUpdateSectionSubmitStyle({ size: v }) }),
-          section.submitStyle && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { type: "button", style: styles.resetLinkBtn, onClick: onClearSectionSubmitStyle, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react11.RotateCcw, { size: 11 }),
-            " ",
-            chrome.reset
+            features.sections && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { style: styles.iconBtn, title: chrome.duplicate, onClick: onDuplicateSection, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react11.Copy, { size: 13 }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { style: styles.iconBtn, title: chrome.moveUp, disabled: sIdx === 0, onClick: () => onMoveSection(-1), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react11.ArrowUp, { size: 13 }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { style: styles.iconBtn, title: chrome.moveDown, disabled: sIdx === sectionsLength - 1, onClick: () => onMoveSection(1), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react11.ArrowDown, { size: 13 }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { style: { ...styles.iconBtn, ...styles.iconBtnDanger }, title: chrome.deleteSection, disabled: sectionsLength <= 1, onClick: onDeleteSection, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react11.Trash2, { size: 13 }) })
+            ] })
           ] })
         ] }),
-        !section.collapsed && (section.fields.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: styles.sectionEmpty, children: chrome.noFieldsInSection }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: styles.fieldList, children: section.fields.map((field, idx) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        !section.collapsed && (section.fields.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: styles.sectionEmpty, children: chrome.noFieldsInSection }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: styles.fieldList, children: section.fields.map((field, idx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           FieldTicket,
           {
             field,
@@ -1643,6 +1819,7 @@ function SectionCard({
             chrome,
             strings,
             language,
+            dragEnabled: features.dragReorder,
             onSelect: () => onSelectField(field.id),
             onFieldChange,
             onMoveField,
@@ -1659,17 +1836,16 @@ function SectionCard({
 }
 
 // src/components/Canvas.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function Canvas({
   sections,
   activeSectionId,
-  submitMode,
-  submitStyle,
   selectedId,
   dragOverKey,
   chrome,
   strings,
   language,
+  features,
   onActivateSection,
   onToggleSectionCollapse,
   onUpdateSectionTitle,
@@ -1677,8 +1853,6 @@ function Canvas({
   onDuplicateSection,
   onMoveSection,
   onDeleteSection,
-  onUpdateSectionSubmitStyle,
-  onClearSectionSubmitStyle,
   onAddSection,
   onSelectField,
   onFieldChange,
@@ -1688,21 +1862,20 @@ function Canvas({
   getDropZoneHandlers,
   getDragHandleProps
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: styles.canvas, children: [
-    sections.map((section, sIdx) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "fb-canvas", style: styles.canvas, children: [
+    sections.map((section, sIdx) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       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),
@@ -1710,8 +1883,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,
@@ -1722,8 +1893,8 @@ function Canvas({
       },
       section.id
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("button", { style: styles.addSectionBtn, onClick: onAddSection, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react12.Layers, { size: 14 }),
+    features.sections && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("button", { style: styles.addSectionBtn, onClick: onAddSection, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react12.Layers, { size: 14 }),
       " ",
       chrome.addSection
     ] })
@@ -1734,27 +1905,27 @@ function Canvas({
 var import_lucide_react13 = require("lucide-react");
 
 // src/components/fields/DefaultValueEditor.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function DefaultValueEditor({ field, meta, lang, chrome, onChange }) {
   if (meta.isContent) return null;
   const f = field;
   if (meta.boolean) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { style: styles.propLabel, children: chrome.defaultValue }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { style: styles.toggleRow, onClick: () => onChange({ defaultValue: !f.defaultValue }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { ...styles.toggleTrack, background: f.defaultValue ? "var(--fb-primary)" : "var(--fb-border)" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { ...styles.toggleThumb, transform: f.defaultValue ? "translateX(16px)" : "translateX(0)" } }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { fontSize: 13, color: "#4A4D57" }, children: f.defaultValue ? chrome.checked : chrome.unchecked })
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { style: styles.propLabel, children: chrome.defaultValue }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("button", { style: styles.toggleRow, onClick: () => onChange({ defaultValue: !f.defaultValue }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { ...styles.toggleTrack, background: f.defaultValue ? "var(--fb-primary)" : "var(--fb-border)" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { ...styles.toggleThumb, transform: f.defaultValue ? "translateX(16px)" : "translateX(0)" } }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { fontSize: 13, color: "var(--fb-ink)" }, children: f.defaultValue ? chrome.checked : chrome.unchecked })
       ] })
     ] });
   }
   if (meta.multiValue) {
     const selectedVals = f.defaultValue || [];
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { style: styles.propLabel, children: chrome.defaultChecked }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: styles.optionList, children: (f.options || []).map((o) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { style: styles.propLabel, children: chrome.defaultChecked }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: styles.optionList, children: (f.options || []).map((o) => {
         const checked = selectedVals.includes(o.value);
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { style: { ...styles.previewRadio, cursor: "pointer" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("input", { type: "checkbox", checked, onChange: (e) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { style: { ...styles.previewRadio, cursor: "pointer" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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)" } }),
@@ -1764,32 +1935,33 @@ function DefaultValueEditor({ field, meta, lang, chrome, onChange }) {
     ] });
   }
   if (meta.options) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { style: styles.propLabel, children: chrome.defaultValue }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("select", { style: styles.propInput, value: f.defaultValue || "", onChange: (e) => onChange({ defaultValue: e.target.value }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "", children: chrome.none }),
-        (f.options || []).map((o) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: o.value, children: t(o.label, lang) }, o.value))
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { style: styles.propLabel, children: chrome.defaultValue }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("select", { style: styles.propInput, value: f.defaultValue || "", onChange: (e) => onChange({ defaultValue: e.target.value }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: "", children: chrome.none }),
+        (f.options || []).map((o) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { style: styles.propLabel, children: chrome.defaultValue }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("input", { type: htmlType, style: styles.propInput, value: f.defaultValue || "", onChange: (e) => onChange({ defaultValue: e.target.value }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { style: styles.propLabel, children: chrome.defaultValue }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { type: htmlType, style: styles.propInput, value: f.defaultValue || "", onChange: (e) => onChange({ defaultValue: e.target.value }) })
   ] });
 }
 
 // src/components/Inspector.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-function Inspector({ selected, language, chrome, onUpdateField, onDeleteField, onUpdateOption, onAddOption, onRemoveOption }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: styles.inspector, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: styles.panelHeading, children: chrome.properties }),
-    !selected ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: styles.inspectorEmpty, children: chrome.selectFieldHint }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Inspector({ selected, language, chrome, features, onUpdateField, onDeleteField, onUpdateOption, onAddOption, onRemoveOption }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "fb-inspector", style: styles.inspector, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: styles.panelHeading, children: chrome.properties }),
+    !selected ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: styles.inspectorEmpty, children: chrome.selectFieldHint }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       InspectorBody,
       {
         selected,
         language,
         chrome,
+        features,
         onUpdateField,
         onDeleteField,
         onUpdateOption,
@@ -1799,119 +1971,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__ */ (0, import_jsx_runtime11.jsxs)("div", { style: styles.inspectorBody, children: [
-    !meta.isContent && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.label }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { style: styles.propInput, value: t(selected.label, language), onChange: (e) => onUpdateField({ label: withLang(selected.label, language, e.target.value) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { style: styles.toggleRow, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { type: "checkbox", checked: !!selected.hideLabel, onChange: (e) => onUpdateField({ hideLabel: e.target.checked }), style: { width: 15, height: 15, accentColor: "var(--fb-primary)" } }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: { fontSize: 13, color: "#4A4D57" }, children: chrome.hideLabel })
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: styles.inspectorBody, children: [
+    (!meta.isContent || selected.type === "button") && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: styles.propLabel, children: selected.type === "button" ? chrome.buttonText : chrome.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", { style: styles.propInput, value: t(selected.label, language), onChange: (e) => onUpdateField({ label: withLang(selected.label, language, e.target.value) }) }),
+      !meta.isContent && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { style: styles.toggleRow, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", { type: "checkbox", checked: !!selected.hideLabel, onChange: (e) => onUpdateField({ hideLabel: e.target.checked }), style: { width: 15, height: 15, accentColor: "var(--fb-primary)" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { fontSize: 13, color: "var(--fb-ink)" }, children: chrome.hideLabel })
       ] })
     ] }),
-    meta.hasSubtype && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.inputType }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("select", { style: styles.propInput, value: f.inputType || "text", onChange: (e) => onUpdateField({ inputType: e.target.value }), children: INPUT_SUBTYPES.map((s) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: s, children: chrome[INPUT_SUBTYPE_CHROME_KEY[s]] }, s)) })
+    meta.hasSubtype && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: styles.propLabel, children: chrome.inputType }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("select", { style: styles.propInput, value: f.inputType || "text", onChange: (e) => onUpdateField({ inputType: e.target.value }), children: INPUT_SUBTYPES.map((s) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: s, children: chrome[INPUT_SUBTYPE_CHROME_KEY[s]] }, s)) })
     ] }),
-    selected.type === "paragraph" && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.content }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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__ */ (0, import_jsx_runtime11.jsx)("div", { style: styles.inspectorDivider }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: styles.panelHeading, children: chrome.typography }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.headingStyle }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(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__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.width }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Segmented, { options: FONT_SIZE_OPTIONS, value: selected.fontSize || "md", onChange: (v) => onUpdateField({ fontSize: v }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.style }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: styles.styleToggleRow, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", style: selected.fontWeight === "bold" ? styles.styleToggleActive : styles.styleToggle, onClick: () => onUpdateField({ fontWeight: selected.fontWeight === "bold" ? "normal" : "bold" }), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react13.Bold, { size: 14 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", style: selected.fontStyle === "italic" ? styles.styleToggleActive : styles.styleToggle, onClick: () => onUpdateField({ fontStyle: selected.fontStyle === "italic" ? "normal" : "italic" }), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react13.Italic, { size: 14 }) })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.align }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Segmented, { options: TEXT_ALIGN_OPTIONS, value: selected.textAlign || "left", onChange: (v) => onUpdateField({ textAlign: v }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.color }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: styles.swatchRow, children: [
-        COLOR_SWATCHES.map((c) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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__ */ (0, import_jsx_runtime11.jsx)("input", { type: "color", value: selected.color || "#1B1E24", onChange: (e) => onUpdateField({ color: e.target.value }), style: styles.colorPickerInput })
+    selected.type === "paragraph" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: styles.propLabel, children: chrome.content }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: styles.inspectorDivider }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: styles.panelHeading, children: chrome.typography }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: styles.propLabel, children: chrome.headingStyle }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(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__ */ (0, import_jsx_runtime13.jsx)("label", { style: styles.propLabel, children: chrome.width }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Segmented, { options: FONT_SIZE_OPTIONS, value: selected.fontSize || "md", onChange: (v) => onUpdateField({ fontSize: v }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: styles.propLabel, children: chrome.style }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: styles.styleToggleRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", style: selected.fontWeight === "bold" ? styles.styleToggleActive : styles.styleToggle, onClick: () => onUpdateField({ fontWeight: selected.fontWeight === "bold" ? "normal" : "bold" }), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react13.Bold, { size: 14 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", style: selected.fontStyle === "italic" ? styles.styleToggleActive : styles.styleToggle, onClick: () => onUpdateField({ fontStyle: selected.fontStyle === "italic" ? "normal" : "italic" }), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react13.Italic, { size: 14 }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: styles.propLabel, children: chrome.align }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Segmented, { options: TEXT_ALIGN_OPTIONS, value: selected.textAlign || "left", onChange: (v) => onUpdateField({ textAlign: v }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: styles.propLabel, children: chrome.color }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: styles.swatchRow, children: [
+          COLOR_SWATCHES.map((c) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsx)("input", { type: "color", value: selected.color || "#1B1E24", onChange: (e) => onUpdateField({ color: e.target.value }), style: styles.colorPickerInput })
+        ] })
       ] })
     ] }),
-    selected.type === "image" && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.imageUrl }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { style: styles.propInput, placeholder: "https://...", value: selected.src || "", onChange: (e) => onUpdateField({ src: e.target.value }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { style: styles.helperText, children: chrome.imageUrlHelper }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.altText }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { style: styles.propInput, value: t(selected.alt, language), onChange: (e) => onUpdateField({ alt: withLang(selected.alt, language, e.target.value) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.linkOptional }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { style: styles.propInput, placeholder: "https://...", value: selected.link || "", onChange: (e) => onUpdateField({ link: e.target.value }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.shape }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(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__ */ (0, import_jsx_runtime11.jsx)("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__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: styles.propLabel, children: chrome.imageUrl }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", { style: styles.propInput, placeholder: "https://...", value: selected.src || "", onChange: (e) => onUpdateField({ src: e.target.value }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { style: styles.helperText, children: chrome.imageUrlHelper }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: styles.propLabel, children: chrome.altText }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", { style: styles.propInput, value: t(selected.alt, language), onChange: (e) => onUpdateField({ alt: withLang(selected.alt, language, e.target.value) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: styles.propLabel, children: chrome.linkOptional }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", { style: styles.propInput, placeholder: "https://...", value: selected.link || "", onChange: (e) => onUpdateField({ link: e.target.value }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: styles.propLabel, children: chrome.shape }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(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__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.placeholder }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { style: styles.propInput, value: t(f.placeholder, language), onChange: (e) => onUpdateField({ placeholder: withLang(f.placeholder, language, e.target.value) }) })
+    selected.type === "button" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: styles.inspectorDivider }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: styles.panelHeading, children: chrome.buttonActionTitle }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: styles.propLabel, children: chrome.buttonAction }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(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__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: styles.propLabel, children: chrome.linkOptional }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", { style: styles.propInput, placeholder: "https://...", value: selected.href || "", onChange: (e) => onUpdateField({ href: e.target.value }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: styles.propLabel, children: chrome.openIn }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Segmented, { options: [{ value: "_self", label: chrome.sameTab }, { value: "_blank", label: chrome.newTab }], value: selected.target || "_self", onChange: (v) => onUpdateField({ target: v }) })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: styles.propLabel, children: chrome.submitScope }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Segmented, { options: [{ value: "section", label: chrome.thisSection }, { value: "form", label: chrome.wholeForm }], value: selected.submitScope || "form", onChange: (v) => onUpdateField({ submitScope: v }) })
+      ] }),
+      features.blockStyling && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: styles.propLabel, children: chrome.color }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: styles.swatchRow, children: [
+          BUTTON_COLOR_SWATCHES.map((c) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsx)("input", { type: "color", value: selected.buttonStyle?.color || "#5B5FEF", onChange: (e) => onUpdateField({ buttonStyle: { ...selected.buttonStyle, color: e.target.value } }), style: styles.colorPickerInput })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: styles.propLabel, children: chrome.buttonSize }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Segmented, { options: SUBMIT_SIZE_OPTIONS, value: selected.buttonStyle?.size || "md", onChange: (v) => onUpdateField({ buttonStyle: { ...selected.buttonStyle, size: v } }) })
+      ] })
+    ] }),
+    meta.placeholder && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: styles.propLabel, children: chrome.placeholder }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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 === "text" || selected.inputType === "password" || !selected.inputType) && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.maxLength }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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 === "text" || selected.inputType === "password" || !selected.inputType) && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: styles.propLabel, children: chrome.maxLength }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.minValue }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { type: "number", style: styles.propInput, value: selected.min ?? "", onChange: (e) => onUpdateField({ min: e.target.value === "" ? null : Number(e.target.value) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.maxValue }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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 === "number" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: styles.propLabel, children: chrome.minValue }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", { type: "number", style: styles.propInput, value: selected.min ?? "", onChange: (e) => onUpdateField({ min: e.target.value === "" ? null : Number(e.target.value) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: styles.propLabel, children: chrome.maxValue }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", { type: "number", style: styles.propInput, value: selected.max ?? "", onChange: (e) => onUpdateField({ max: e.target.value === "" ? null : Number(e.target.value) }) })
     ] }),
-    selected.type === "textarea" && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.maxLength }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: styles.propLabel, children: chrome.maxLength }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.options }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: styles.optionList, children: [
-        (f.options || []).map((opt, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: styles.optionRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { style: styles.optionInput, value: t(opt.label, language), onChange: (e) => onUpdateOption(i, { label: withLang(opt.label, language, e.target.value) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { style: styles.iconBtn, onClick: () => onRemoveOption(i), disabled: (f.options || []).length <= 1, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react13.X, { size: 13 }) })
+    meta.options && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: styles.propLabel, children: chrome.options }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: styles.optionList, children: [
+        (f.options || []).map((opt, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: styles.optionRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", { style: styles.optionInput, value: t(opt.label, language), onChange: (e) => onUpdateOption(i, { label: withLang(opt.label, language, e.target.value) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { style: styles.iconBtn, onClick: () => onRemoveOption(i), disabled: (f.options || []).length <= 1, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react13.X, { size: 13 }) })
         ] }, i)),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("button", { style: styles.addOptionBtn, onClick: onAddOption, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react13.Plus, { size: 13 }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("button", { style: styles.addOptionBtn, onClick: onAddOption, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react13.Plus, { size: 13 }),
           " ",
           chrome.addOption
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DefaultValueEditor, { field: selected, meta, lang: language, chrome, onChange: onUpdateField }),
-    !meta.isContent && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { style: styles.toggleRow, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { type: "checkbox", checked: !!selected.required, onChange: (e) => onUpdateField({ required: e.target.checked }), style: { width: 15, height: 15, accentColor: "var(--fb-primary)" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: { fontSize: 13, color: "#4A4D57" }, children: chrome.requiredField })
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DefaultValueEditor, { field: selected, meta, lang: language, chrome, onChange: onUpdateField }),
+    !meta.isContent && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { style: styles.toggleRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", { type: "checkbox", checked: !!selected.required, onChange: (e) => onUpdateField({ required: e.target.checked }), style: { width: 15, height: 15, accentColor: "var(--fb-primary)" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { fontSize: 13, color: "var(--fb-ink)" }, children: chrome.requiredField })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: styles.inspectorDivider }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: styles.panelHeading, children: chrome.layout }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.width }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(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__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.verticalAlign }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(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__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.labelPosition }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Segmented, { options: [{ value: "top", label: chrome.above }, { value: "inline", label: chrome.inline }], value: selected.labelPosition || "top", onChange: (v) => onUpdateField({ labelPosition: v }) })
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: styles.inspectorDivider }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: styles.panelHeading, children: chrome.layout }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: styles.propLabel, children: chrome.width }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(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__ */ (0, import_jsx_runtime13.jsx)("label", { style: styles.propLabel, children: chrome.verticalAlign }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(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__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: styles.propLabel, children: chrome.labelPosition }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Segmented, { options: [{ value: "top", label: chrome.above }, { value: "inline", label: chrome.inline }], value: selected.labelPosition || "top", onChange: (v) => onUpdateField({ labelPosition: v }) })
     ] }),
-    !meta.isContent && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: styles.inspectorDivider }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: styles.panelHeading, children: chrome.icon }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { style: styles.toggleRow, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { type: "checkbox", checked: !!selected.showIcon, onChange: (e) => onUpdateField({ showIcon: e.target.checked }), style: { width: 15, height: 15, accentColor: "var(--fb-primary)" } }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: { fontSize: 13, color: "#4A4D57" }, children: chrome.showIcon })
+    !meta.isContent && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: styles.inspectorDivider }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: styles.panelHeading, children: chrome.icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { style: styles.toggleRow, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", { type: "checkbox", checked: !!selected.showIcon, onChange: (e) => onUpdateField({ showIcon: e.target.checked }), style: { width: 15, height: 15, accentColor: "var(--fb-primary)" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { fontSize: 13, color: "var(--fb-ink)" }, children: chrome.showIcon })
       ] }),
-      selected.showIcon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: styles.iconGrid, children: Object.keys(ICON_LIBRARY).map((key) => {
+      selected.showIcon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: styles.iconGrid, children: Object.keys(ICON_LIBRARY).map((key) => {
         const IconComp = ICON_LIBRARY[key];
         const active = selected.displayIcon === key;
-        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", title: key, style: active ? styles.iconGridBtnActive : styles.iconGridBtn, onClick: () => onUpdateField({ displayIcon: key }), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconComp, { size: 15 }) }, key);
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", title: key, style: active ? styles.iconGridBtnActive : styles.iconGridBtn, onClick: () => onUpdateField({ displayIcon: key }), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconComp, { size: 15 }) }, key);
       }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: styles.inspectorDivider }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("button", { style: styles.deleteFieldBtn, onClick: onDeleteField, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react13.Trash2, { size: 13 }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: styles.inspectorDivider }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("button", { style: styles.deleteFieldBtn, onClick: onDeleteField, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react13.Trash2, { size: 13 }),
       " ",
       chrome.deleteField
     ] })
@@ -1955,17 +2153,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
-var import_jsx_runtime12 = require("react/jsx-runtime");
-function PreviewPane({ title, sections, onFieldChange, language, strings, chrome, baseMaxWidth, submitLabel, submitMode, submitStyle }) {
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function PreviewPane({ title, sections, onFieldChange, language, strings, chrome, baseMaxWidth, onSubmit }) {
   const [device, setDevice] = (0, import_react6.useState)("laptop");
   const [errors, setErrors] = (0, import_react6.useState)({});
   const [submitted, setSubmitted] = (0, import_react6.useState)(null);
+  const [attemptedButtonId, setAttemptedButtonId] = (0, import_react6.useState)(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) => {
@@ -1974,78 +2181,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__ */ (0, import_jsx_runtime12.jsxs)("div", { style: styles.previewWrap, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { width: "100%", maxWidth, display: "flex", flexDirection: "column", alignItems: "center" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: styles.previewToolbar, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Segmented, { options: deviceOptions, value: device, onChange: setDevice }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { ...styles.previewCard, maxWidth, width: "100%" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h2", { style: styles.previewTitle, children: t(title, language) }),
-        allFields.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { style: { color: "var(--fb-muted)", fontSize: 14 }, children: strings.addFieldsHint }),
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: styles.previewWrap, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { width: "100%", maxWidth, display: "flex", flexDirection: "column", alignItems: "center" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: styles.previewToolbar, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Segmented, { options: deviceOptions, value: device, onChange: setDevice }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { ...styles.previewCard, maxWidth, width: "100%" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h2", { style: styles.previewTitle, children: t(title, language) }),
+        allFields.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { style: { color: "var(--fb-muted)", fontSize: 14 }, children: strings.addFieldsHint }),
         sections.map((section) => {
-          const sectionHasFormFields = section.fields.some((f) => !getMeta(f.type).isContent);
-          const sectionHasErrors = section.fields.some((f) => errors[f.id]);
-          return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("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__ */ (0, import_jsx_runtime12.jsx)("h3", { style: styles.sectionRuntimeTitle, children: t(section.title, language) }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: styles.previewGrid, children: section.fields.map((field) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { background: section.background || "transparent", padding: section.background ? 16 : 0, borderRadius: section.background ? 10 : 0, marginBottom: "var(--fb-space-section)" }, children: [
+            t(section.title, language) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { style: styles.sectionRuntimeTitle, children: t(section.title, language) }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: styles.previewGrid, children: section.fields.map((field) => {
               const width = effectiveWidth(field.width, device);
               const flexBasis = `1 1 calc(${WIDTH_PERCENT[width]} - 14px)`;
-              return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { flex: flexBasis, minWidth: 0, alignSelf: ALIGN_MAP[field.verticalAlign || "top"] }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FieldBlock, { field, lang: language, onFieldChange, strings, chrome, error: errors[field.id] }) }, field.id);
-            }) }),
-            submitMode === "perSection" && sectionHasFormFields && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { style: { ...styles.submitBtn, ...resolveSubmitStyle(section.submitStyle || submitStyle) }, onClick: () => handleSubmitSection(section), children: submitText }),
-              sectionHasErrors && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { style: styles.formErrorNote, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react14.CircleAlert, { size: 13 }),
-                " ",
-                strings.fixErrors
-              ] })
-            ] })
+              return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { flex: flexBasis, minWidth: 0, alignSelf: ALIGN_MAP[field.verticalAlign || "top"] }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FieldBlock, { field, lang: language, onFieldChange, strings, chrome, error: errors[field.id], onButtonAction: handleButtonAction }),
+                field.type === "button" && field.id === attemptedButtonId && Object.keys(errors).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { style: styles.formErrorNote, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react14.CircleAlert, { size: 13 }),
+                  " ",
+                  strings.fixErrors
+                ] })
+              ] }, field.id);
+            }) })
           ] }, section.id);
-        }),
-        submitMode === "combined" && overallHasFormFields && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { style: { ...styles.submitBtn, ...resolveSubmitStyle(submitStyle) }, onClick: handleSubmitAll, children: submitText }),
-        submitMode === "combined" && Object.keys(errors).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { style: styles.formErrorNote, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react14.CircleAlert, { size: 13 }),
-          " ",
-          strings.fixErrors
-        ] })
+        })
       ] })
     ] }),
-    submitted && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: styles.modalOverlay, onClick: () => setSubmitted(null), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { ...styles.modal, width: 420 }, onClick: (e) => e.stopPropagation(), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: styles.modalHeader, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { style: { fontWeight: 600, fontSize: 14, display: "flex", alignItems: "center", gap: 7 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react14.PartyPopper, { size: 15, color: "var(--fb-primary)" }),
+    submitted && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: styles.modalOverlay, onClick: () => setSubmitted(null), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { ...styles.modal, maxWidth: 420 }, onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: styles.modalHeader, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { style: { fontWeight: 600, fontSize: 14, display: "flex", alignItems: "center", gap: 7 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react14.PartyPopper, { size: 15, color: "var(--fb-primary)" }),
           " ",
           strings.submittedTitle
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { style: styles.iconBtn, onClick: () => setSubmitted(null), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react14.X, { size: 16 }) })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { style: styles.iconBtn, onClick: () => setSubmitted(null), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react14.X, { size: 16 }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { padding: 16 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { style: { fontSize: 12.5, color: "var(--fb-muted)", marginTop: 0 }, children: strings.submittedBody }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: styles.submittedList, children: submitted.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: styles.submittedRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: styles.submittedLabel, children: row.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: styles.submittedValue, children: row.value })
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { padding: 16 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { style: { fontSize: 12.5, color: "var(--fb-muted)", marginTop: 0 }, children: strings.submittedBody }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: styles.submittedList, children: submitted.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: styles.submittedRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: styles.submittedLabel, children: row.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: styles.submittedValue, children: row.value })
         ] }, i)) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { style: { ...styles.primaryBtn, width: "100%", justifyContent: "center", marginTop: 14 }, onClick: () => setSubmitted(null), children: strings.close })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { style: { ...styles.primaryBtn, width: "100%", justifyContent: "center", marginTop: 14 }, onClick: () => setSubmitted(null), children: strings.close })
       ] })
     ] }) })
   ] });
@@ -2053,47 +2274,47 @@ function PreviewPane({ title, sections, onFieldChange, language, strings, chrome
 
 // src/components/modals/JsonModal.tsx
 var import_lucide_react15 = require("lucide-react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function JsonModal({ chrome, jsonString, copied, onCopy, onClose }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: styles.modalOverlay, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: styles.modal, onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: styles.modalHeader, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { fontWeight: 600, fontSize: 14 }, children: chrome.formJson }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", gap: 8 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("button", { style: styles.ghostBtn, onClick: onCopy, children: [
-          copied ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react15.Check, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react15.ClipboardCopy, { size: 14 }),
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: styles.modalOverlay, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: styles.modal, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: styles.modalHeader, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { style: { fontWeight: 600, fontSize: 14 }, children: chrome.formJson }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { display: "flex", gap: 8 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("button", { style: styles.ghostBtn, onClick: onCopy, children: [
+          copied ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react15.Check, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react15.ClipboardCopy, { size: 14 }),
           copied ? chrome.copied : chrome.copy
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { style: styles.iconBtn, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react15.X, { size: 16 }) })
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { style: styles.iconBtn, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react15.X, { size: 16 }) })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("pre", { style: styles.jsonPre, children: jsonString })
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("pre", { style: styles.jsonPre, children: jsonString })
   ] }) });
 }
 
-// src/components/modals/LibraryModal.tsx
+// src/components/modals/TemplatesModal.tsx
 var import_lucide_react16 = require("lucide-react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-function LibraryModal({ chrome, savedForms, currentFormId, onOpen, onDelete, onClose }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: styles.modalOverlay, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: styles.modal, onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: styles.modalHeader, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { fontWeight: 600, fontSize: 14 }, children: chrome.myForms }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { style: styles.iconBtn, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react16.X, { size: 16 }) })
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function TemplatesModal({ chrome, savedForms, currentFormId, onOpen, onDelete, onClose }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: styles.modalOverlay, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: styles.modal, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: styles.modalHeader, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { fontWeight: 600, fontSize: 14 }, children: chrome.templates }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { style: styles.iconBtn, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react16.X, { size: 16 }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: styles.libraryBody, children: savedForms.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: styles.inspectorEmpty, children: chrome.nothingSaved }) : savedForms.map((f) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: styles.libraryRow, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { minWidth: 0 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: styles.libraryRowTitle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: styles.libraryBody, children: savedForms.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: styles.inspectorEmpty, children: chrome.noTemplates }) : savedForms.map((f) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: styles.libraryRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { minWidth: 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: styles.libraryRowTitle, children: [
           f.title,
-          f.id === currentFormId && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: styles.currentBadge, children: chrome.current })
+          f.id === currentFormId && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: styles.currentBadge, children: chrome.current })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: styles.libraryRowMeta, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: styles.libraryRowMeta, children: [
           chrome.updated,
           " ",
           new Date(f.updatedAt).toLocaleString()
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", gap: 6, flexShrink: 0 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { style: styles.ghostBtn, onClick: () => onOpen(f.id), children: chrome.open }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { style: { ...styles.iconBtn, ...styles.iconBtnDanger }, title: chrome.delete, onClick: () => onDelete(f.id), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react16.Trash2, { size: 13 }) })
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", gap: 6, flexShrink: 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { style: styles.ghostBtn, onClick: () => onOpen(f.id), children: chrome.open }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { style: { ...styles.iconBtn, ...styles.iconBtnDanger }, title: chrome.delete, onClick: () => onDelete(f.id), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react16.Trash2, { size: 13 }) })
       ] })
     ] }, f.id)) })
   ] }) });
@@ -2102,19 +2323,19 @@ function LibraryModal({ chrome, savedForms, currentFormId, onOpen, onDelete, onC
 // src/components/modals/SaveAsModal.tsx
 var import_react7 = require("react");
 var import_lucide_react17 = require("lucide-react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function SaveAsModal({ chrome, suggestedName, onSave, onClose }) {
   const [name, setName] = (0, import_react7.useState)(suggestedName);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: styles.modalOverlay, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { ...styles.modal, width: 380 }, onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: styles.modalHeader, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { style: { fontWeight: 600, fontSize: 14 }, children: chrome.saveForm }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { style: styles.iconBtn, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react17.X, { size: 16 }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: styles.modalOverlay, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { ...styles.modal, maxWidth: 380 }, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: styles.modalHeader, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { fontWeight: 600, fontSize: 14 }, children: chrome.saveForm }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { style: styles.iconBtn, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react17.X, { size: 16 }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { padding: 16 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", { style: styles.propLabel, children: chrome.formName }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime15.jsxs)("button", { style: { ...styles.primaryBtn, width: "100%", justifyContent: "center", marginTop: 14 }, disabled: !name.trim(), onClick: () => onSave(name.trim()), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react17.Save, { size: 14 }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { padding: 16 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("label", { style: styles.propLabel, children: chrome.formName }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("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__ */ (0, import_jsx_runtime17.jsxs)("button", { style: { ...styles.primaryBtn, width: "100%", justifyContent: "center", marginTop: 14 }, disabled: !name.trim(), onClick: () => onSave(name.trim()), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react17.Save, { size: 14 }),
         " ",
         chrome.saveToLibrary
       ] })
@@ -2122,45 +2343,6 @@ function SaveAsModal({ chrome, suggestedName, onSave, onClose }) {
   ] }) });
 }
 
-// src/components/modals/SettingsModal.tsx
-var import_lucide_react18 = require("lucide-react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-function SettingsModal({
-  chrome,
-  strings,
-  submitLabel,
-  language,
-  submitMode,
-  submitStyle,
-  onSubmitLabelChange,
-  onSubmitModeChange,
-  onSubmitStyleChange,
-  onClose
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: styles.modalOverlay, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { ...styles.modal, width: 400 }, onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: styles.modalHeader, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { fontWeight: 600, fontSize: 14 }, children: chrome.formSettings }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { style: styles.iconBtn, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react18.X, { size: 16 }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { padding: 16 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: styles.panelHeading, children: chrome.submitSectionTitle }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { style: styles.propLabel, children: chrome.submitLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("input", { style: styles.propInput, placeholder: strings.submit, value: t(submitLabel, language), onChange: (e) => onSubmitLabelChange(e.target.value) }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { style: styles.propLabel, children: chrome.submitMode }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Segmented, { options: [{ value: "combined", label: chrome.combined }, { value: "perSection", label: chrome.perSection }], value: submitMode, onChange: onSubmitModeChange }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: styles.inspectorDivider }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: styles.panelHeading, children: chrome.submitStyle }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { style: styles.propLabel, children: chrome.color }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: styles.swatchRow, children: [
-        BUTTON_COLOR_SWATCHES.map((c) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime16.jsx)("input", { type: "color", value: submitStyle.color || "#5B5FEF", onChange: (e) => onSubmitStyleChange({ color: e.target.value }), style: styles.colorPickerInput })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { style: styles.propLabel, children: chrome.buttonSize }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Segmented, { options: SUBMIT_SIZE_OPTIONS, value: submitStyle.size, onChange: (v) => onSubmitStyleChange({ size: v }) })
-    ] })
-  ] }) });
-}
-
 // src/styles/globalCss.ts
 var css = `
   * { box-sizing: border-box; }
@@ -2168,19 +2350,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
-var import_jsx_runtime17 = require("react/jsx-runtime");
-function FormBuilder({
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var FormBuilder = (0, import_react8.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] = (0, import_react8.useState)(languageOverride || languages[0]?.code || "en");
@@ -2190,20 +2411,16 @@ function FormBuilder({
   const drag = useDragReorder(doc.reorderWithinSection);
   const [mode, setMode] = (0, import_react8.useState)("build");
   const [showJson, setShowJson] = (0, import_react8.useState)(false);
-  const [showSettings, setShowSettings] = (0, import_react8.useState)(false);
   const [showLibrary, setShowLibrary] = (0, import_react8.useState)(false);
   const [copied, setCopied] = (0, import_react8.useState)(false);
+  const [mobilePanel, setMobilePanel] = (0, import_react8.useState)("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,
@@ -2214,13 +2431,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() {
@@ -2230,6 +2445,17 @@ function FormBuilder({
     }).catch(() => {
     });
   }
+  (0, import_react8.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 = {
@@ -2244,6 +2470,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`,
@@ -2252,9 +2479,9 @@ function FormBuilder({
     "--fb-space-panel": `${theme.layout.panelPadding}px`,
     "--fb-space-ticket": `${theme.layout.ticketPadding}px`
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: rootStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("style", { children: css }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "fb-root", style: rootStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("style", { children: css }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       Toolbar,
       {
         title: doc.title,
@@ -2263,75 +2490,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__ */ (0, import_jsx_runtime17.jsxs)("div", { style: styles.loadingScreen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react19.Loader2, { size: 20, className: "spin" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { marginTop: 8, fontSize: 13, color: "var(--fb-muted)" }, children: chrome.loadingDraft })
-    ] }) : mode === "build" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: styles.workArea, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Palette, { activeSectionLabel, chrome, onAddField: doc.addField }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        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__ */ (0, import_jsx_runtime17.jsx)(
-        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__ */ (0, import_jsx_runtime17.jsx)(
+    persistence.loadingDraft ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: styles.loadingScreen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react18.Loader2, { size: 20, className: "spin" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { marginTop: 8, fontSize: 13, color: "var(--fb-muted)" }, children: chrome.loadingDraft })
+    ] }) : mode === "build" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "fb-work-area", style: styles.workArea, "data-mobile-panel": mobilePanel, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "fb-mobile-bar", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+          "button",
+          {
+            type: "button",
+            className: "fb-mobile-btn",
+            "aria-pressed": mobilePanel === "palette",
+            onClick: () => setMobilePanel((p) => p === "palette" ? "none" : "palette"),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react18.Menu, { size: 14 }),
+              " ",
+              chrome.paletteTabBlocks
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+          "button",
+          {
+            type: "button",
+            className: "fb-mobile-btn",
+            "aria-pressed": mobilePanel === "inspector",
+            onClick: () => setMobilePanel((p) => p === "inspector" ? "none" : "inspector"),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react18.SlidersHorizontal, { size: 14 }),
+              " ",
+              chrome.properties
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "fb-canvas-area", style: styles.workArea, children: [
+        mobilePanel !== "none" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "fb-mobile-backdrop", onClick: () => setMobilePanel("none") }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          Palette,
+          {
+            activeSectionLabel,
+            chrome,
+            onAddField: (type) => {
+              doc.addField(type);
+              setMobilePanel("none");
+            },
+            features,
+            theme,
+            updateThemeColor,
+            updateThemeLayout,
+            resetTheme
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          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__ */ (0, import_jsx_runtime18.jsx)(
+          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__ */ (0, import_jsx_runtime18.jsx)(
       PreviewPane,
       {
         title: doc.title,
@@ -2341,14 +2610,12 @@ function FormBuilder({
         strings,
         chrome,
         baseMaxWidth: theme.layout.maxWidth,
-        submitLabel: doc.submitLabel,
-        submitMode: doc.submitMode,
-        submitStyle: doc.submitStyle
+        onSubmit
       }
     ),
-    showJson && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(JsonModal, { chrome, jsonString, copied, onCopy: copyJson, onClose: () => setShowJson(false) }),
-    showLibrary && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      LibraryModal,
+    showJson && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(JsonModal, { chrome, jsonString, copied, onCopy: copyJson, onClose: () => setShowJson(false) }),
+    showLibrary && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      TemplatesModal,
       {
         chrome,
         savedForms: persistence.savedForms,
@@ -2361,7 +2628,7 @@ function FormBuilder({
         onClose: () => setShowLibrary(false)
       }
     ),
-    persistence.saveAsPrompt && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    persistence.saveAsPrompt && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       SaveAsModal,
       {
         chrome,
@@ -2369,26 +2636,29 @@ function FormBuilder({
         onSave: persistence.saveAs,
         onClose: persistence.dismissSaveAsPrompt
       }
-    ),
-    showSettings && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      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
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  DARK_THEME,
+  DEFAULT_THEME,
   FormBuilder,
   localStorageAdapter
 });