form-page-builder 1.0.0 → 2.1.0

package/dist/index.js

@@ -1,8 +1,69 @@
 "use client";
 
 // src/FormBuilder.tsx
-import { forwardRef, useImperativeHandle, useState as useState8 } from "react";
-import { Loader2 as Loader22 } from "lucide-react";
+import { forwardRef, useEffect as useEffect2, useImperativeHandle, useState as useState8 } from "react";
+import { Loader2 as Loader22, Menu, SlidersHorizontal } from "lucide-react";
+
+// src/constants/fieldTypes.ts
+import {
+  Type,
+  AlignLeft,
+  ChevronDown,
+  Circle,
+  ListChecks,
+  CheckSquare,
+  ToggleLeft,
+  FileText,
+  Image as ImageIcon,
+  MousePointerClick
+} from "lucide-react";
+var FIELD_TYPES = [
+  { type: "paragraph", icon: FileText, isContent: true, defaultIcon: "FileText" },
+  { type: "image", icon: ImageIcon, isContent: true, isImage: true, defaultIcon: "Type" },
+  { type: "button", icon: MousePointerClick, isContent: true, defaultIcon: "Type" },
+  { type: "input", icon: Type, placeholder: true, hasSubtype: true, defaultIcon: "Type" },
+  { type: "textarea", icon: AlignLeft, placeholder: true, defaultIcon: "AlignLeft" },
+  { type: "select", icon: ChevronDown, options: true, defaultIcon: "ChevronDown" },
+  { type: "radio", icon: Circle, options: true, defaultIcon: "Circle" },
+  { type: "checkboxGroup", icon: ListChecks, options: true, multiValue: true, defaultIcon: "ListChecks" },
+  { type: "checkbox", icon: CheckSquare, boolean: true, defaultIcon: "CheckSquare" },
+  { type: "toggle", icon: ToggleLeft, boolean: true, defaultIcon: "ToggleLeft" }
+];
+var TYPE_MAP = Object.fromEntries(FIELD_TYPES.map((f) => [f.type, f]));
+var CONTENT_TYPES = FIELD_TYPES.filter((f) => f.isContent);
+var FORM_TYPES = FIELD_TYPES.filter((f) => !f.isContent);
+function getMeta(type) {
+  return TYPE_MAP[type] || TYPE_MAP.input;
+}
+var LEGACY_INPUT_TYPES = ["text", "email", "phone", "number", "password", "date"];
+var INPUT_SUBTYPES = ["text", "email", "phone", "number", "password", "date", "time"];
+var IMAGE_SHAPES = ["square", "circle", "banner"];
+var FIELD_TYPE_CHROME_KEY = {
+  paragraph: "fieldTypeParagraph",
+  image: "fieldTypeImage",
+  button: "fieldTypeButton",
+  input: "fieldTypeInput",
+  textarea: "fieldTypeTextarea",
+  select: "fieldTypeSelect",
+  radio: "fieldTypeRadio",
+  checkboxGroup: "fieldTypeCheckboxGroup",
+  checkbox: "fieldTypeCheckbox",
+  toggle: "fieldTypeToggle"
+};
+var INPUT_SUBTYPE_CHROME_KEY = {
+  text: "subtypeText",
+  email: "subtypeEmail",
+  phone: "subtypePhone",
+  number: "subtypeNumber",
+  password: "subtypePassword",
+  date: "subtypeDate",
+  time: "subtypeTime"
+};
+var IMAGE_SHAPE_CHROME_KEY = {
+  square: "shapeSquare",
+  circle: "shapeCircle",
+  banner: "shapeBanner"
+};
 
 // src/i18n/languages.ts
 var DEFAULT_LANGUAGES = [
@@ -333,6 +394,22 @@ function withLang(val, lang, value) {
   return { ...base, [lang]: value };
 }
 
+// src/lib/color.ts
+function mixHex(a, b, t2) {
+  const pa = parseHex(a);
+  const pb = parseHex(b);
+  if (!pa || !pb) return a;
+  const mix = (x, y) => Math.round(x + (y - x) * t2);
+  const toHex = (n) => n.toString(16).padStart(2, "0");
+  return `#${toHex(mix(pa[0], pb[0]))}${toHex(mix(pa[1], pb[1]))}${toHex(mix(pa[2], pb[2]))}`;
+}
+function parseHex(hex) {
+  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return null;
+  const n = parseInt(m[1], 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+}
+
 // src/lib/storage/compress.ts
 import { compressToUTF16, decompressFromUTF16 } from "lz-string";
 function compress(raw) {
@@ -375,67 +452,6 @@ var localStorageAdapter = {
   }
 };
 
-// src/constants/fieldTypes.ts
-import {
-  Type,
-  AlignLeft,
-  ChevronDown,
-  Circle,
-  ListChecks,
-  CheckSquare,
-  ToggleLeft,
-  FileText,
-  Image as ImageIcon,
-  MousePointerClick
-} from "lucide-react";
-var FIELD_TYPES = [
-  { type: "paragraph", icon: FileText, isContent: true, defaultIcon: "FileText" },
-  { type: "image", icon: ImageIcon, isContent: true, isImage: true, defaultIcon: "Type" },
-  { type: "button", icon: MousePointerClick, isContent: true, defaultIcon: "Type" },
-  { type: "input", icon: Type, placeholder: true, hasSubtype: true, defaultIcon: "Type" },
-  { type: "textarea", icon: AlignLeft, placeholder: true, defaultIcon: "AlignLeft" },
-  { type: "select", icon: ChevronDown, options: true, defaultIcon: "ChevronDown" },
-  { type: "radio", icon: Circle, options: true, defaultIcon: "Circle" },
-  { type: "checkboxGroup", icon: ListChecks, options: true, multiValue: true, defaultIcon: "ListChecks" },
-  { type: "checkbox", icon: CheckSquare, boolean: true, defaultIcon: "CheckSquare" },
-  { type: "toggle", icon: ToggleLeft, boolean: true, defaultIcon: "ToggleLeft" }
-];
-var TYPE_MAP = Object.fromEntries(FIELD_TYPES.map((f) => [f.type, f]));
-var CONTENT_TYPES = FIELD_TYPES.filter((f) => f.isContent);
-var FORM_TYPES = FIELD_TYPES.filter((f) => !f.isContent);
-function getMeta(type) {
-  return TYPE_MAP[type] || TYPE_MAP.input;
-}
-var LEGACY_INPUT_TYPES = ["text", "email", "phone", "number", "password", "date"];
-var INPUT_SUBTYPES = ["text", "email", "phone", "number", "password", "date", "time"];
-var IMAGE_SHAPES = ["square", "circle", "banner"];
-var FIELD_TYPE_CHROME_KEY = {
-  paragraph: "fieldTypeParagraph",
-  image: "fieldTypeImage",
-  button: "fieldTypeButton",
-  input: "fieldTypeInput",
-  textarea: "fieldTypeTextarea",
-  select: "fieldTypeSelect",
-  radio: "fieldTypeRadio",
-  checkboxGroup: "fieldTypeCheckboxGroup",
-  checkbox: "fieldTypeCheckbox",
-  toggle: "fieldTypeToggle"
-};
-var INPUT_SUBTYPE_CHROME_KEY = {
-  text: "subtypeText",
-  email: "subtypeEmail",
-  phone: "subtypePhone",
-  number: "subtypeNumber",
-  password: "subtypePassword",
-  date: "subtypeDate",
-  time: "subtypeTime"
-};
-var IMAGE_SHAPE_CHROME_KEY = {
-  square: "shapeSquare",
-  circle: "shapeCircle",
-  banner: "shapeBanner"
-};
-
 // src/lib/id.ts
 var genFormId = () => `form_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 7)}`;
 var genSectionId = () => `section_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 7)}`;
@@ -599,6 +615,38 @@ function migrateDocument(raw) {
   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,
+  deviceToggle: true
+};
+function resolveFeatures(features) {
+  return {
+    ...DEFAULT_FEATURES,
+    ...features,
+    contentBlocks: Array.isArray(features?.contentBlocks) ? new Set(features.contentBlocks) : features?.contentBlocks ?? DEFAULT_FEATURES.contentBlocks,
+    fieldTypes: Array.isArray(features?.fieldTypes) ? new Set(features.fieldTypes) : features?.fieldTypes ?? DEFAULT_FEATURES.fieldTypes
+  };
+}
+function isContentBlockEnabled(features, type) {
+  return features.contentBlocks === true || features.contentBlocks instanceof Set && features.contentBlocks.has(type);
+}
+function isFieldTypeEnabled(features, type) {
+  return features.fieldTypes === true || features.fieldTypes instanceof Set && features.fieldTypes.has(type);
+}
+
 // src/hooks/useTheme.ts
 import { useState } from "react";
 
@@ -833,6 +881,7 @@ var formKey = (id) => `form-page-builder:saved:${id}`;
 var MAX_TEMPLATES = 5;
 function usePersistence({
   storage,
+  autosave,
   language,
   chrome,
   document,
@@ -894,7 +943,7 @@ function usePersistence({
     refreshLibrary();
   }, []);
   useEffect(() => {
-    if (!hasLoadedOnce.current) return;
+    if (!hasLoadedOnce.current || !autosave) return;
     setSaveState("saving");
     if (autosaveTimer.current) clearTimeout(autosaveTimer.current);
     autosaveTimer.current = setTimeout(async () => {
@@ -1033,15 +1082,15 @@ var styles = {
   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 },
@@ -1050,7 +1099,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" },
@@ -1060,7 +1109,7 @@ var styles = {
   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 },
   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)" },
@@ -1069,56 +1118,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" },
-  langToggleTrack: { position: "relative", display: "flex", gap: 3, background: "#F0F1F4", padding: 3, borderRadius: 20 },
+  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: "#6B6E79", fontSize: 12.5, fontWeight: 600, whiteSpace: "nowrap" },
+  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: "#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)" },
+  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)" },
@@ -1128,13 +1177,13 @@ 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%" },
   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/LanguageToggle.tsx
@@ -1175,6 +1224,7 @@ function Toolbar({
   mode,
   saveState,
   chrome,
+  features,
   savedFormsCount,
   onTitleChange,
   onLanguageChange,
@@ -1187,7 +1237,7 @@ function Toolbar({
   return /* @__PURE__ */ jsxs2("div", { style: styles.toolbar, children: [
     /* @__PURE__ */ jsxs2("div", { style: styles.toolbarLeft, children: [
       /* @__PURE__ */ jsx2("div", { style: styles.logoMark, children: "FB" }),
-      /* @__PURE__ */ jsx2("input", { value: t(title, language), onChange: (e) => onTitleChange(e.target.value), style: styles.titleInput, "aria-label": "Form title" })
+      features.naming ? /* @__PURE__ */ jsx2("input", { value: t(title, language), onChange: (e) => onTitleChange(e.target.value), style: styles.titleInput, "aria-label": "Form title" }) : /* @__PURE__ */ jsx2("span", { style: styles.titleInput, children: t(title, language) })
     ] }),
     /* @__PURE__ */ jsxs2("div", { style: styles.toolbarRight, children: [
       /* @__PURE__ */ jsxs2("span", { style: styles.saveStatus, children: [
@@ -1203,37 +1253,43 @@ function Toolbar({
           chrome.saveFailed
         ] })
       ] }),
-      /* @__PURE__ */ jsx2("div", { style: styles.toolbarDivider }),
-      /* @__PURE__ */ jsx2(LanguageToggle, { languages, value: language, onChange: onLanguageChange }),
-      /* @__PURE__ */ jsx2("div", { style: styles.toolbarDivider }),
-      /* @__PURE__ */ jsxs2("button", { style: mode === "build" ? styles.tabBtnActive : styles.tabBtn, onClick: () => onModeChange("build"), children: [
-        /* @__PURE__ */ jsx2(Pencil, { size: 14 }),
-        " ",
-        chrome.build
+      features.languageSwitcher && /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx2("div", { style: styles.toolbarDivider }),
+        /* @__PURE__ */ jsx2(LanguageToggle, { languages, value: language, onChange: onLanguageChange })
       ] }),
-      /* @__PURE__ */ jsxs2("button", { style: mode === "preview" ? styles.tabBtnActive : styles.tabBtn, onClick: () => onModeChange("preview"), children: [
-        /* @__PURE__ */ jsx2(Eye, { size: 14 }),
-        " ",
-        chrome.preview
+      features.previewMode && /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx2("div", { style: styles.toolbarDivider }),
+        /* @__PURE__ */ jsxs2("button", { style: mode === "build" ? styles.tabBtnActive : styles.tabBtn, onClick: () => onModeChange("build"), children: [
+          /* @__PURE__ */ jsx2(Pencil, { size: 14 }),
+          " ",
+          chrome.build
+        ] }),
+        /* @__PURE__ */ jsxs2("button", { style: mode === "preview" ? styles.tabBtnActive : styles.tabBtn, onClick: () => onModeChange("preview"), children: [
+          /* @__PURE__ */ jsx2(Eye, { size: 14 }),
+          " ",
+          chrome.preview
+        ] })
       ] }),
-      /* @__PURE__ */ jsx2("div", { style: styles.toolbarDivider }),
-      /* @__PURE__ */ jsxs2("button", { style: styles.ghostBtn, onClick: onNewForm, title: chrome.startNewForm, children: [
+      (features.newForm || features.templates) && /* @__PURE__ */ jsx2("div", { style: styles.toolbarDivider }),
+      features.newForm && /* @__PURE__ */ jsxs2("button", { style: styles.ghostBtn, onClick: onNewForm, title: chrome.startNewForm, children: [
         /* @__PURE__ */ jsx2(FilePlus2, { size: 14 }),
         " ",
         chrome.newForm
       ] }),
-      /* @__PURE__ */ jsxs2("button", { style: styles.ghostBtn, onClick: onOpenLibrary, title: chrome.openTemplatesTitle, children: [
-        /* @__PURE__ */ jsx2(FolderOpen, { size: 14 }),
-        " ",
-        chrome.templates,
-        savedFormsCount > 0 && /* @__PURE__ */ jsx2("span", { style: styles.countBadge, children: savedFormsCount })
-      ] }),
-      /* @__PURE__ */ jsxs2("button", { style: styles.primaryBtn, onClick: onSaveExisting, title: chrome.saveToLibraryTitle, children: [
-        /* @__PURE__ */ jsx2(Save, { size: 14 }),
-        " ",
-        chrome.save
+      features.templates && /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsxs2("button", { style: styles.ghostBtn, onClick: onOpenLibrary, title: chrome.openTemplatesTitle, children: [
+          /* @__PURE__ */ jsx2(FolderOpen, { size: 14 }),
+          " ",
+          chrome.templates,
+          savedFormsCount > 0 && /* @__PURE__ */ jsx2("span", { style: styles.countBadge, children: savedFormsCount })
+        ] }),
+        /* @__PURE__ */ jsxs2("button", { style: styles.primaryBtn, onClick: onSaveExisting, title: chrome.saveToLibraryTitle, children: [
+          /* @__PURE__ */ jsx2(Save, { size: 14 }),
+          " ",
+          chrome.save
+        ] })
       ] }),
-      /* @__PURE__ */ jsxs2("button", { style: styles.ghostBtn, onClick: onOpenJson, children: [
+      features.jsonView && /* @__PURE__ */ jsxs2("button", { style: styles.ghostBtn, onClick: onOpenJson, children: [
         /* @__PURE__ */ jsx2(Code2, { size: 14 }),
         " ",
         chrome.viewJson
@@ -1334,15 +1390,19 @@ function Palette({
   activeSectionLabel,
   chrome,
   onAddField,
-  themeEditable,
+  features,
   theme,
   updateThemeColor,
   updateThemeLayout,
-  resetTheme
+  resetTheme,
+  fieldCount
 }) {
   const [tab, setTab] = useState5("blocks");
-  return /* @__PURE__ */ jsxs5("div", { style: styles.palette, children: [
-    themeEditable && /* @__PURE__ */ jsx5("div", { style: { marginBottom: 14 }, children: /* @__PURE__ */ jsx5(
+  const contentTypes = CONTENT_TYPES.filter((f) => isContentBlockEnabled(features, f.type));
+  const formTypes = FORM_TYPES.filter((f) => isFieldTypeEnabled(features, f.type));
+  const atFieldCap = typeof features.maxFields === "number" && fieldCount >= features.maxFields;
+  return /* @__PURE__ */ jsxs5("div", { className: "fb-palette", style: styles.palette, children: [
+    features.design && /* @__PURE__ */ jsx5("div", { style: { marginBottom: 14 }, children: /* @__PURE__ */ jsx5(
       Segmented,
       {
         options: [
@@ -1353,7 +1413,7 @@ function Palette({
         onChange: setTab
       }
     ) }),
-    tab === "design" && themeEditable ? /* @__PURE__ */ jsx5(
+    tab === "design" && features.design ? /* @__PURE__ */ jsx5(
       DesignPanel,
       {
         chrome,
@@ -1368,24 +1428,29 @@ function Palette({
         " ",
         /* @__PURE__ */ jsx5("strong", { children: activeSectionLabel })
       ] }),
-      /* @__PURE__ */ jsx5("div", { style: styles.panelHeading, children: chrome.contentBlocks }),
-      /* @__PURE__ */ jsx5("div", { style: styles.paletteList, children: CONTENT_TYPES.map((f) => {
-        const Icon = f.icon;
-        return /* @__PURE__ */ jsxs5("button", { style: styles.paletteItem, onClick: () => onAddField(f.type), children: [
-          /* @__PURE__ */ jsx5(Icon, { size: 16, color: "var(--fb-primary)" }),
-          /* @__PURE__ */ jsx5("span", { children: chrome[FIELD_TYPE_CHROME_KEY[f.type]] }),
-          /* @__PURE__ */ jsx5(Plus, { size: 13, color: "#A6A8B3", style: { marginLeft: "auto" } })
-        ] }, f.type);
-      }) }),
-      /* @__PURE__ */ jsx5("div", { style: { ...styles.panelHeading, marginTop: 16 }, children: chrome.formFields }),
-      /* @__PURE__ */ jsx5("div", { style: styles.paletteList, children: FORM_TYPES.map((f) => {
-        const Icon = f.icon;
-        return /* @__PURE__ */ jsxs5("button", { style: styles.paletteItem, onClick: () => onAddField(f.type), children: [
-          /* @__PURE__ */ jsx5(Icon, { size: 16, color: "var(--fb-primary)" }),
-          /* @__PURE__ */ jsx5("span", { children: chrome[FIELD_TYPE_CHROME_KEY[f.type]] }),
-          /* @__PURE__ */ jsx5(Plus, { size: 13, color: "#A6A8B3", style: { marginLeft: "auto" } })
-        ] }, f.type);
-      }) })
+      contentTypes.length > 0 && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+        /* @__PURE__ */ jsx5("div", { style: styles.panelHeading, children: chrome.contentBlocks }),
+        /* @__PURE__ */ jsx5("div", { style: styles.paletteList, children: contentTypes.map((f) => {
+          const Icon = f.icon;
+          return /* @__PURE__ */ jsxs5("button", { style: styles.paletteItem, onClick: () => onAddField(f.type), children: [
+            /* @__PURE__ */ jsx5(Icon, { size: 16, color: "var(--fb-primary)" }),
+            /* @__PURE__ */ jsx5("span", { children: chrome[FIELD_TYPE_CHROME_KEY[f.type]] }),
+            /* @__PURE__ */ jsx5(Plus, { size: 13, color: "var(--fb-muted)", style: { marginLeft: "auto" } })
+          ] }, f.type);
+        }) })
+      ] }),
+      formTypes.length > 0 && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+        /* @__PURE__ */ jsx5("div", { style: { ...styles.panelHeading, marginTop: 16 }, children: chrome.formFields }),
+        /* @__PURE__ */ jsx5("div", { style: styles.paletteList, children: formTypes.map((f) => {
+          const Icon = f.icon;
+          const itemStyle = atFieldCap ? { ...styles.paletteItem, opacity: 0.45, cursor: "not-allowed" } : styles.paletteItem;
+          return /* @__PURE__ */ jsxs5("button", { type: "button", disabled: atFieldCap, style: itemStyle, onClick: () => onAddField(f.type), children: [
+            /* @__PURE__ */ jsx5(Icon, { size: 16, color: "var(--fb-primary)" }),
+            /* @__PURE__ */ jsx5("span", { children: chrome[FIELD_TYPE_CHROME_KEY[f.type]] }),
+            /* @__PURE__ */ jsx5(Plus, { size: 13, color: "var(--fb-muted)", style: { marginLeft: "auto" } })
+          ] }, f.type);
+        }) })
+      ] })
     ] })
   ] });
 }
@@ -1538,7 +1603,7 @@ function FieldBlock({ field, lang, onFieldChange, strings, chrome, error, isBuil
   return /* @__PURE__ */ jsxs6("div", { children: [
     /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: isInline ? "row" : "column", alignItems: isInline ? "center" : "stretch", gap: isInline ? 10 : 6 }, children: [
       showLabel && /* @__PURE__ */ jsxs6("label", { style: { ...styles.previewLabel, marginBottom: isInline ? 0 : 6, flexShrink: 0, width: isInline ? 120 : "auto", display: "flex", alignItems: "center", gap: 6 }, children: [
-        IconComp && /* @__PURE__ */ jsx8(IconComp, { size: 14, color: "#6B6E79" }),
+        IconComp && /* @__PURE__ */ jsx8(IconComp, { size: 14, color: "var(--fb-muted)" }),
         labelText || (isBuild ? /* @__PURE__ */ jsx8("span", { style: { fontStyle: "italic", color: "var(--fb-muted)" }, children: chrome?.untitledField || "Untitled field" }) : ""),
         field.required && /* @__PURE__ */ jsx8("span", { style: { color: "var(--fb-danger)" }, children: " *" })
       ] }),
@@ -1603,14 +1668,14 @@ function renderInteractive(field, lang, onFieldChange, IconComp, hasError, strin
     case "checkbox":
       return /* @__PURE__ */ jsxs6("label", { style: styles.previewRadio, children: [
         /* @__PURE__ */ jsx8("input", { type: "checkbox", checked: !!value, onChange: (e) => set(e.target.checked), style: { accentColor: "var(--fb-primary)" } }),
-        IconComp && /* @__PURE__ */ jsx8(IconComp, { size: 14, color: "#6B6E79" }),
+        IconComp && /* @__PURE__ */ jsx8(IconComp, { size: 14, color: "var(--fb-muted)" }),
         t(field.label, lang),
         field.required && /* @__PURE__ */ jsx8("span", { style: { color: "var(--fb-danger)" }, children: " *" })
       ] });
     case "toggle":
       return /* @__PURE__ */ jsxs6("label", { style: styles.previewRadio, children: [
         /* @__PURE__ */ jsx8("input", { type: "checkbox", checked: !!value, onChange: (e) => set(e.target.checked), style: { accentColor: "var(--fb-primary)" } }),
-        IconComp && /* @__PURE__ */ jsx8(IconComp, { size: 14, color: "#6B6E79" }),
+        IconComp && /* @__PURE__ */ jsx8(IconComp, { size: 14, color: "var(--fb-muted)" }),
         t(field.label, lang)
       ] });
     default:
@@ -1628,6 +1693,7 @@ function FieldTicket({
   chrome,
   strings,
   language,
+  dragEnabled,
   onSelect,
   onFieldChange,
   onMoveField,
@@ -1657,7 +1723,7 @@ function FieldTicket({
         /* @__PURE__ */ jsx9("div", { style: styles.ticketPerforation }),
         /* @__PURE__ */ jsxs7("div", { style: styles.ticketBody, children: [
           /* @__PURE__ */ jsxs7("div", { style: styles.ticketTop, children: [
-            /* @__PURE__ */ jsx9("span", { ...dragHandleProps, style: { cursor: "grab", display: "flex" }, children: /* @__PURE__ */ jsx9(GripVertical, { size: 14, color: "#C4C6D0" }) }),
+            dragEnabled && /* @__PURE__ */ jsx9("span", { ...dragHandleProps, style: { cursor: "grab", display: "flex" }, children: /* @__PURE__ */ jsx9(GripVertical, { size: 14, color: "var(--fb-muted)" }) }),
             /* @__PURE__ */ jsx9(Icon, { size: 13, color: "var(--fb-primary)" }),
             /* @__PURE__ */ jsxs7("span", { style: styles.typeBadge, children: [
               chrome[FIELD_TYPE_CHROME_KEY[field.type]] || field.type,
@@ -1689,7 +1755,7 @@ function FieldTicket({
 }
 
 // src/components/SectionCard.tsx
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 function SectionCard({
   section,
   sIdx,
@@ -1700,6 +1766,7 @@ function SectionCard({
   chrome,
   strings,
   language,
+  features,
   onActivate,
   onToggleCollapse,
   onUpdateTitle,
@@ -1739,14 +1806,16 @@ function SectionCard({
           ),
           section.collapsed && /* @__PURE__ */ jsx10("span", { style: styles.miniBadge, children: chrome.fieldsCount(section.fields.length) }),
           /* @__PURE__ */ jsxs8("div", { style: styles.sectionHeaderActions, onClick: (e) => e.stopPropagation(), children: [
-            !section.collapsed && /* @__PURE__ */ jsxs8("div", { style: styles.swatchRow, children: [
+            features.sections && !section.collapsed && /* @__PURE__ */ jsxs8("div", { style: styles.swatchRow, children: [
               SECTION_BG_SWATCHES.map((c) => /* @__PURE__ */ jsx10("button", { type: "button", title: c || chrome.none, style: { ...styles.swatchBtn, background: c || "var(--fb-canvas)", ...section.background === c ? styles.swatchBtnActive : {} }, onClick: () => onUpdateBackground(c) }, c || "none")),
               /* @__PURE__ */ jsx10("input", { type: "color", title: chrome.customColor, value: /^#/.test(section.background) ? section.background : "#ffffff", onChange: (e) => onUpdateBackground(e.target.value), style: styles.colorPickerInput })
             ] }),
-            /* @__PURE__ */ jsx10("button", { style: styles.iconBtn, title: chrome.duplicate, onClick: onDuplicateSection, children: /* @__PURE__ */ jsx10(Copy2, { size: 13 }) }),
-            /* @__PURE__ */ jsx10("button", { style: styles.iconBtn, title: chrome.moveUp, disabled: sIdx === 0, onClick: () => onMoveSection(-1), children: /* @__PURE__ */ jsx10(ArrowUp2, { size: 13 }) }),
-            /* @__PURE__ */ jsx10("button", { style: styles.iconBtn, title: chrome.moveDown, disabled: sIdx === sectionsLength - 1, onClick: () => onMoveSection(1), children: /* @__PURE__ */ jsx10(ArrowDown2, { size: 13 }) }),
-            /* @__PURE__ */ jsx10("button", { style: { ...styles.iconBtn, ...styles.iconBtnDanger }, title: chrome.deleteSection, disabled: sectionsLength <= 1, onClick: onDeleteSection, children: /* @__PURE__ */ jsx10(Trash22, { size: 13 }) })
+            features.sections && /* @__PURE__ */ jsxs8(Fragment3, { children: [
+              /* @__PURE__ */ jsx10("button", { style: styles.iconBtn, title: chrome.duplicate, onClick: onDuplicateSection, children: /* @__PURE__ */ jsx10(Copy2, { size: 13 }) }),
+              /* @__PURE__ */ jsx10("button", { style: styles.iconBtn, title: chrome.moveUp, disabled: sIdx === 0, onClick: () => onMoveSection(-1), children: /* @__PURE__ */ jsx10(ArrowUp2, { size: 13 }) }),
+              /* @__PURE__ */ jsx10("button", { style: styles.iconBtn, title: chrome.moveDown, disabled: sIdx === sectionsLength - 1, onClick: () => onMoveSection(1), children: /* @__PURE__ */ jsx10(ArrowDown2, { size: 13 }) }),
+              /* @__PURE__ */ jsx10("button", { style: { ...styles.iconBtn, ...styles.iconBtnDanger }, title: chrome.deleteSection, disabled: sectionsLength <= 1, onClick: onDeleteSection, children: /* @__PURE__ */ jsx10(Trash22, { size: 13 }) })
+            ] })
           ] })
         ] }),
         !section.collapsed && (section.fields.length === 0 ? /* @__PURE__ */ jsx10("div", { style: styles.sectionEmpty, children: chrome.noFieldsInSection }) : /* @__PURE__ */ jsx10("div", { style: styles.fieldList, children: section.fields.map((field, idx) => /* @__PURE__ */ jsx10(
@@ -1760,6 +1829,7 @@ function SectionCard({
             chrome,
             strings,
             language,
+            dragEnabled: features.dragReorder,
             onSelect: () => onSelectField(field.id),
             onFieldChange,
             onMoveField,
@@ -1785,6 +1855,7 @@ function Canvas({
   chrome,
   strings,
   language,
+  features,
   onActivateSection,
   onToggleSectionCollapse,
   onUpdateSectionTitle,
@@ -1801,7 +1872,7 @@ function Canvas({
   getDropZoneHandlers,
   getDragHandleProps
 }) {
-  return /* @__PURE__ */ jsxs9("div", { style: styles.canvas, children: [
+  return /* @__PURE__ */ jsxs9("div", { className: "fb-canvas", style: styles.canvas, children: [
     sections.map((section, sIdx) => /* @__PURE__ */ jsx11(
       SectionCard,
       {
@@ -1814,6 +1885,7 @@ function Canvas({
         chrome,
         strings,
         language,
+        features,
         onActivate: () => onActivateSection(section.id),
         onToggleCollapse: () => onToggleSectionCollapse(section.id),
         onUpdateTitle: (value) => onUpdateSectionTitle(section.id, value),
@@ -1831,7 +1903,7 @@ function Canvas({
       },
       section.id
     )),
-    /* @__PURE__ */ jsxs9("button", { style: styles.addSectionBtn, onClick: onAddSection, children: [
+    features.sections && /* @__PURE__ */ jsxs9("button", { style: styles.addSectionBtn, onClick: onAddSection, children: [
       /* @__PURE__ */ jsx11(Layers, { size: 14 }),
       " ",
       chrome.addSection
@@ -1843,22 +1915,22 @@ function Canvas({
 import { Bold, Italic, X, Plus as Plus2, Trash2 as Trash23 } from "lucide-react";
 
 // src/components/fields/DefaultValueEditor.tsx
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 function DefaultValueEditor({ field, meta, lang, chrome, onChange }) {
   if (meta.isContent) return null;
   const f = field;
   if (meta.boolean) {
-    return /* @__PURE__ */ jsxs10(Fragment3, { children: [
+    return /* @__PURE__ */ jsxs10(Fragment4, { children: [
       /* @__PURE__ */ jsx12("label", { style: styles.propLabel, children: chrome.defaultValue }),
       /* @__PURE__ */ jsxs10("button", { style: styles.toggleRow, onClick: () => onChange({ defaultValue: !f.defaultValue }), children: [
         /* @__PURE__ */ jsx12("span", { style: { ...styles.toggleTrack, background: f.defaultValue ? "var(--fb-primary)" : "var(--fb-border)" }, children: /* @__PURE__ */ jsx12("span", { style: { ...styles.toggleThumb, transform: f.defaultValue ? "translateX(16px)" : "translateX(0)" } }) }),
-        /* @__PURE__ */ jsx12("span", { style: { fontSize: 13, color: "#4A4D57" }, children: f.defaultValue ? chrome.checked : chrome.unchecked })
+        /* @__PURE__ */ jsx12("span", { style: { fontSize: 13, color: "var(--fb-ink)" }, children: f.defaultValue ? chrome.checked : chrome.unchecked })
       ] })
     ] });
   }
   if (meta.multiValue) {
     const selectedVals = f.defaultValue || [];
-    return /* @__PURE__ */ jsxs10(Fragment3, { children: [
+    return /* @__PURE__ */ jsxs10(Fragment4, { children: [
       /* @__PURE__ */ jsx12("label", { style: styles.propLabel, children: chrome.defaultChecked }),
       /* @__PURE__ */ jsx12("div", { style: styles.optionList, children: (f.options || []).map((o) => {
         const checked = selectedVals.includes(o.value);
@@ -1873,7 +1945,7 @@ function DefaultValueEditor({ field, meta, lang, chrome, onChange }) {
     ] });
   }
   if (meta.options) {
-    return /* @__PURE__ */ jsxs10(Fragment3, { children: [
+    return /* @__PURE__ */ jsxs10(Fragment4, { children: [
       /* @__PURE__ */ jsx12("label", { style: styles.propLabel, children: chrome.defaultValue }),
       /* @__PURE__ */ jsxs10("select", { style: styles.propInput, value: f.defaultValue || "", onChange: (e) => onChange({ defaultValue: e.target.value }), children: [
         /* @__PURE__ */ jsx12("option", { value: "", children: chrome.none }),
@@ -1882,16 +1954,16 @@ function DefaultValueEditor({ field, meta, lang, chrome, onChange }) {
     ] });
   }
   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__ */ jsxs10(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs10(Fragment4, { children: [
     /* @__PURE__ */ jsx12("label", { style: styles.propLabel, children: chrome.defaultValue }),
     /* @__PURE__ */ jsx12("input", { type: htmlType, style: styles.propInput, value: f.defaultValue || "", onChange: (e) => onChange({ defaultValue: e.target.value }) })
   ] });
 }
 
 // src/components/Inspector.tsx
-import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
-function Inspector({ selected, language, chrome, onUpdateField, onDeleteField, onUpdateOption, onAddOption, onRemoveOption }) {
-  return /* @__PURE__ */ jsxs11("div", { style: styles.inspector, children: [
+import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+function Inspector({ selected, language, chrome, features, onUpdateField, onDeleteField, onUpdateOption, onAddOption, onRemoveOption }) {
+  return /* @__PURE__ */ jsxs11("div", { className: "fb-inspector", style: styles.inspector, children: [
     /* @__PURE__ */ jsx13("div", { style: styles.panelHeading, children: chrome.properties }),
     !selected ? /* @__PURE__ */ jsx13("div", { style: styles.inspectorEmpty, children: chrome.selectFieldHint }) : /* @__PURE__ */ jsx13(
       InspectorBody,
@@ -1899,6 +1971,7 @@ function Inspector({ selected, language, chrome, onUpdateField, onDeleteField, o
         selected,
         language,
         chrome,
+        features,
         onUpdateField,
         onDeleteField,
         onUpdateOption,
@@ -1908,45 +1981,47 @@ 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__ */ jsxs11("div", { style: styles.inspectorBody, children: [
-    (!meta.isContent || selected.type === "button") && /* @__PURE__ */ jsxs11(Fragment4, { children: [
+    (!meta.isContent || selected.type === "button") && /* @__PURE__ */ jsxs11(Fragment5, { children: [
       /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: selected.type === "button" ? chrome.buttonText : chrome.label }),
       /* @__PURE__ */ jsx13("input", { style: styles.propInput, value: t(selected.label, language), onChange: (e) => onUpdateField({ label: withLang(selected.label, language, e.target.value) }) }),
       !meta.isContent && /* @__PURE__ */ jsxs11("label", { style: styles.toggleRow, children: [
         /* @__PURE__ */ jsx13("input", { type: "checkbox", checked: !!selected.hideLabel, onChange: (e) => onUpdateField({ hideLabel: e.target.checked }), style: { width: 15, height: 15, accentColor: "var(--fb-primary)" } }),
-        /* @__PURE__ */ jsx13("span", { style: { fontSize: 13, color: "#4A4D57" }, children: chrome.hideLabel })
+        /* @__PURE__ */ jsx13("span", { style: { fontSize: 13, color: "var(--fb-ink)" }, children: chrome.hideLabel })
       ] })
     ] }),
-    meta.hasSubtype && /* @__PURE__ */ jsxs11(Fragment4, { children: [
+    meta.hasSubtype && /* @__PURE__ */ jsxs11(Fragment5, { children: [
       /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.inputType }),
       /* @__PURE__ */ jsx13("select", { style: styles.propInput, value: f.inputType || "text", onChange: (e) => onUpdateField({ inputType: e.target.value }), children: INPUT_SUBTYPES.map((s) => /* @__PURE__ */ jsx13("option", { value: s, children: chrome[INPUT_SUBTYPE_CHROME_KEY[s]] }, s)) })
     ] }),
-    selected.type === "paragraph" && /* @__PURE__ */ jsxs11(Fragment4, { children: [
+    selected.type === "paragraph" && /* @__PURE__ */ jsxs11(Fragment5, { children: [
       /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.content }),
       /* @__PURE__ */ jsx13("textarea", { style: { ...styles.propInput, minHeight: 70, resize: "vertical" }, value: t(selected.content, language), onChange: (e) => onUpdateField({ content: withLang(selected.content, language, e.target.value) }) }),
-      /* @__PURE__ */ jsx13("div", { style: styles.inspectorDivider }),
-      /* @__PURE__ */ jsx13("div", { style: styles.panelHeading, children: chrome.typography }),
-      /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.headingStyle }),
-      /* @__PURE__ */ jsx13(Segmented, { options: PARAGRAPH_TAG_OPTIONS.map((v) => ({ value: v, label: TAG_CHROME_KEY[v] ? chrome[TAG_CHROME_KEY[v]] : v.toUpperCase() })), value: selected.tag || "p", onChange: (v) => onUpdateField({ tag: v, ...TAG_PRESETS[v] }) }),
-      /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.width }),
-      /* @__PURE__ */ jsx13(Segmented, { options: FONT_SIZE_OPTIONS, value: selected.fontSize || "md", onChange: (v) => onUpdateField({ fontSize: v }) }),
-      /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.style }),
-      /* @__PURE__ */ jsxs11("div", { style: styles.styleToggleRow, children: [
-        /* @__PURE__ */ jsx13("button", { type: "button", style: selected.fontWeight === "bold" ? styles.styleToggleActive : styles.styleToggle, onClick: () => onUpdateField({ fontWeight: selected.fontWeight === "bold" ? "normal" : "bold" }), children: /* @__PURE__ */ jsx13(Bold, { size: 14 }) }),
-        /* @__PURE__ */ jsx13("button", { type: "button", style: selected.fontStyle === "italic" ? styles.styleToggleActive : styles.styleToggle, onClick: () => onUpdateField({ fontStyle: selected.fontStyle === "italic" ? "normal" : "italic" }), children: /* @__PURE__ */ jsx13(Italic, { size: 14 }) })
-      ] }),
-      /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.align }),
-      /* @__PURE__ */ jsx13(Segmented, { options: TEXT_ALIGN_OPTIONS, value: selected.textAlign || "left", onChange: (v) => onUpdateField({ textAlign: v }) }),
-      /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.color }),
-      /* @__PURE__ */ jsxs11("div", { style: styles.swatchRow, children: [
-        COLOR_SWATCHES.map((c) => /* @__PURE__ */ jsx13("button", { type: "button", title: c || chrome.none, style: { ...styles.swatchBtn, background: c || "var(--fb-ink)", ...selected.color === c ? styles.swatchBtnActive : {} }, onClick: () => onUpdateField({ color: c }) }, c || "default")),
-        /* @__PURE__ */ jsx13("input", { type: "color", value: selected.color || "#1B1E24", onChange: (e) => onUpdateField({ color: e.target.value }), style: styles.colorPickerInput })
+      features.blockStyling && /* @__PURE__ */ jsxs11(Fragment5, { children: [
+        /* @__PURE__ */ jsx13("div", { style: styles.inspectorDivider }),
+        /* @__PURE__ */ jsx13("div", { style: styles.panelHeading, children: chrome.typography }),
+        /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.headingStyle }),
+        /* @__PURE__ */ jsx13(Segmented, { options: PARAGRAPH_TAG_OPTIONS.map((v) => ({ value: v, label: TAG_CHROME_KEY[v] ? chrome[TAG_CHROME_KEY[v]] : v.toUpperCase() })), value: selected.tag || "p", onChange: (v) => onUpdateField({ tag: v, ...TAG_PRESETS[v] }) }),
+        /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.width }),
+        /* @__PURE__ */ jsx13(Segmented, { options: FONT_SIZE_OPTIONS, value: selected.fontSize || "md", onChange: (v) => onUpdateField({ fontSize: v }) }),
+        /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.style }),
+        /* @__PURE__ */ jsxs11("div", { style: styles.styleToggleRow, children: [
+          /* @__PURE__ */ jsx13("button", { type: "button", style: selected.fontWeight === "bold" ? styles.styleToggleActive : styles.styleToggle, onClick: () => onUpdateField({ fontWeight: selected.fontWeight === "bold" ? "normal" : "bold" }), children: /* @__PURE__ */ jsx13(Bold, { size: 14 }) }),
+          /* @__PURE__ */ jsx13("button", { type: "button", style: selected.fontStyle === "italic" ? styles.styleToggleActive : styles.styleToggle, onClick: () => onUpdateField({ fontStyle: selected.fontStyle === "italic" ? "normal" : "italic" }), children: /* @__PURE__ */ jsx13(Italic, { size: 14 }) })
+        ] }),
+        /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.align }),
+        /* @__PURE__ */ jsx13(Segmented, { options: TEXT_ALIGN_OPTIONS, value: selected.textAlign || "left", onChange: (v) => onUpdateField({ textAlign: v }) }),
+        /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.color }),
+        /* @__PURE__ */ jsxs11("div", { style: styles.swatchRow, children: [
+          COLOR_SWATCHES.map((c) => /* @__PURE__ */ jsx13("button", { type: "button", title: c || chrome.none, style: { ...styles.swatchBtn, background: c || "var(--fb-ink)", ...selected.color === c ? styles.swatchBtnActive : {} }, onClick: () => onUpdateField({ color: c }) }, c || "default")),
+          /* @__PURE__ */ jsx13("input", { type: "color", value: selected.color || "#1B1E24", onChange: (e) => onUpdateField({ color: e.target.value }), style: styles.colorPickerInput })
+        ] })
       ] })
     ] }),
-    selected.type === "image" && /* @__PURE__ */ jsxs11(Fragment4, { children: [
+    selected.type === "image" && /* @__PURE__ */ jsxs11(Fragment5, { children: [
       /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.imageUrl }),
       /* @__PURE__ */ jsx13("input", { style: styles.propInput, placeholder: "https://...", value: selected.src || "", onChange: (e) => onUpdateField({ src: e.target.value }) }),
       /* @__PURE__ */ jsx13("p", { style: styles.helperText, children: chrome.imageUrlHelper }),
@@ -1958,47 +2033,49 @@ function InspectorBody({ selected, language, chrome, onUpdateField, onDeleteFiel
       /* @__PURE__ */ jsx13(Segmented, { options: IMAGE_SHAPES.map((v) => ({ value: v, label: chrome[IMAGE_SHAPE_CHROME_KEY[v]] })), value: selected.shape || "square", onChange: (v) => onUpdateField({ shape: v }) }),
       /* @__PURE__ */ jsx13("p", { style: styles.helperText, children: "Fills the field's own width (set below under Layout) and scales height automatically \u2014 always responsive, never overflows." })
     ] }),
-    selected.type === "button" && /* @__PURE__ */ jsxs11(Fragment4, { children: [
+    selected.type === "button" && /* @__PURE__ */ jsxs11(Fragment5, { children: [
       /* @__PURE__ */ jsx13("div", { style: styles.inspectorDivider }),
       /* @__PURE__ */ jsx13("div", { style: styles.panelHeading, children: chrome.buttonActionTitle }),
       /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.buttonAction }),
       /* @__PURE__ */ jsx13(Segmented, { options: [{ value: "link", label: chrome.actionLink }, { value: "submit", label: chrome.actionSubmit }], value: selected.action || "submit", onChange: (v) => onUpdateField({ action: v }) }),
-      selected.action === "link" ? /* @__PURE__ */ jsxs11(Fragment4, { children: [
+      selected.action === "link" ? /* @__PURE__ */ jsxs11(Fragment5, { children: [
         /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.linkOptional }),
         /* @__PURE__ */ jsx13("input", { style: styles.propInput, placeholder: "https://...", value: selected.href || "", onChange: (e) => onUpdateField({ href: e.target.value }) }),
         /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.openIn }),
         /* @__PURE__ */ jsx13(Segmented, { options: [{ value: "_self", label: chrome.sameTab }, { value: "_blank", label: chrome.newTab }], value: selected.target || "_self", onChange: (v) => onUpdateField({ target: v }) })
-      ] }) : /* @__PURE__ */ jsxs11(Fragment4, { children: [
+      ] }) : /* @__PURE__ */ jsxs11(Fragment5, { children: [
         /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.submitScope }),
         /* @__PURE__ */ jsx13(Segmented, { options: [{ value: "section", label: chrome.thisSection }, { value: "form", label: chrome.wholeForm }], value: selected.submitScope || "form", onChange: (v) => onUpdateField({ submitScope: v }) })
       ] }),
-      /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.color }),
-      /* @__PURE__ */ jsxs11("div", { style: styles.swatchRow, children: [
-        BUTTON_COLOR_SWATCHES.map((c) => /* @__PURE__ */ jsx13("button", { type: "button", title: c || chrome.none, style: { ...styles.swatchBtn, background: c || "var(--fb-primary)", ...(selected.buttonStyle?.color || "") === c ? styles.swatchBtnActive : {} }, onClick: () => onUpdateField({ buttonStyle: { ...selected.buttonStyle, color: c } }) }, c || "default")),
-        /* @__PURE__ */ jsx13("input", { type: "color", value: selected.buttonStyle?.color || "#5B5FEF", onChange: (e) => onUpdateField({ buttonStyle: { ...selected.buttonStyle, color: e.target.value } }), style: styles.colorPickerInput })
-      ] }),
-      /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.buttonSize }),
-      /* @__PURE__ */ jsx13(Segmented, { options: SUBMIT_SIZE_OPTIONS, value: selected.buttonStyle?.size || "md", onChange: (v) => onUpdateField({ buttonStyle: { ...selected.buttonStyle, size: v } }) })
+      features.blockStyling && /* @__PURE__ */ jsxs11(Fragment5, { children: [
+        /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.color }),
+        /* @__PURE__ */ jsxs11("div", { style: styles.swatchRow, children: [
+          BUTTON_COLOR_SWATCHES.map((c) => /* @__PURE__ */ jsx13("button", { type: "button", title: c || chrome.none, style: { ...styles.swatchBtn, background: c || "var(--fb-primary)", ...(selected.buttonStyle?.color || "") === c ? styles.swatchBtnActive : {} }, onClick: () => onUpdateField({ buttonStyle: { ...selected.buttonStyle, color: c } }) }, c || "default")),
+          /* @__PURE__ */ jsx13("input", { type: "color", value: selected.buttonStyle?.color || "#5B5FEF", onChange: (e) => onUpdateField({ buttonStyle: { ...selected.buttonStyle, color: e.target.value } }), style: styles.colorPickerInput })
+        ] }),
+        /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.buttonSize }),
+        /* @__PURE__ */ jsx13(Segmented, { options: SUBMIT_SIZE_OPTIONS, value: selected.buttonStyle?.size || "md", onChange: (v) => onUpdateField({ buttonStyle: { ...selected.buttonStyle, size: v } }) })
+      ] })
     ] }),
-    meta.placeholder && /* @__PURE__ */ jsxs11(Fragment4, { children: [
+    meta.placeholder && /* @__PURE__ */ jsxs11(Fragment5, { children: [
       /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.placeholder }),
       /* @__PURE__ */ jsx13("input", { style: styles.propInput, value: t(f.placeholder, language), onChange: (e) => onUpdateField({ placeholder: withLang(f.placeholder, language, e.target.value) }) })
     ] }),
-    selected.type === "input" && (selected.inputType === "text" || selected.inputType === "password" || !selected.inputType) && /* @__PURE__ */ jsxs11(Fragment4, { children: [
+    selected.type === "input" && (selected.inputType === "text" || selected.inputType === "password" || !selected.inputType) && /* @__PURE__ */ jsxs11(Fragment5, { children: [
       /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.maxLength }),
       /* @__PURE__ */ jsx13("input", { type: "number", style: styles.propInput, placeholder: chrome.noLimit, value: selected.maxLength || "", onChange: (e) => onUpdateField({ maxLength: e.target.value ? Number(e.target.value) : null }) })
     ] }),
-    selected.type === "input" && selected.inputType === "number" && /* @__PURE__ */ jsxs11(Fragment4, { children: [
+    selected.type === "input" && selected.inputType === "number" && /* @__PURE__ */ jsxs11(Fragment5, { children: [
       /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.minValue }),
       /* @__PURE__ */ jsx13("input", { type: "number", style: styles.propInput, value: selected.min ?? "", onChange: (e) => onUpdateField({ min: e.target.value === "" ? null : Number(e.target.value) }) }),
       /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.maxValue }),
       /* @__PURE__ */ jsx13("input", { type: "number", style: styles.propInput, value: selected.max ?? "", onChange: (e) => onUpdateField({ max: e.target.value === "" ? null : Number(e.target.value) }) })
     ] }),
-    selected.type === "textarea" && /* @__PURE__ */ jsxs11(Fragment4, { children: [
+    selected.type === "textarea" && /* @__PURE__ */ jsxs11(Fragment5, { children: [
       /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.maxLength }),
       /* @__PURE__ */ jsx13("input", { type: "number", style: styles.propInput, placeholder: chrome.noLimit, value: selected.maxLength || "", onChange: (e) => onUpdateField({ maxLength: e.target.value ? Number(e.target.value) : null }) })
     ] }),
-    meta.options && /* @__PURE__ */ jsxs11(Fragment4, { children: [
+    meta.options && /* @__PURE__ */ jsxs11(Fragment5, { children: [
       /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.options }),
       /* @__PURE__ */ jsxs11("div", { style: styles.optionList, children: [
         (f.options || []).map((opt, i) => /* @__PURE__ */ jsxs11("div", { style: styles.optionRow, children: [
@@ -2015,7 +2092,7 @@ function InspectorBody({ selected, language, chrome, onUpdateField, onDeleteFiel
     /* @__PURE__ */ jsx13(DefaultValueEditor, { field: selected, meta, lang: language, chrome, onChange: onUpdateField }),
     !meta.isContent && /* @__PURE__ */ jsxs11("label", { style: styles.toggleRow, children: [
       /* @__PURE__ */ jsx13("input", { type: "checkbox", checked: !!selected.required, onChange: (e) => onUpdateField({ required: e.target.checked }), style: { width: 15, height: 15, accentColor: "var(--fb-primary)" } }),
-      /* @__PURE__ */ jsx13("span", { style: { fontSize: 13, color: "#4A4D57" }, children: chrome.requiredField })
+      /* @__PURE__ */ jsx13("span", { style: { fontSize: 13, color: "var(--fb-ink)" }, children: chrome.requiredField })
     ] }),
     /* @__PURE__ */ jsx13("div", { style: styles.inspectorDivider }),
     /* @__PURE__ */ jsx13("div", { style: styles.panelHeading, children: chrome.layout }),
@@ -2023,16 +2100,16 @@ function InspectorBody({ selected, language, chrome, onUpdateField, onDeleteFiel
     /* @__PURE__ */ jsx13(Segmented, { options: WIDTH_OPTIONS.map((o) => ({ ...o, label: o.labelKey ? chrome[o.labelKey] : o.label || "" })), value: selected.width || "1/1", onChange: (v) => onUpdateField({ width: v }) }),
     /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.verticalAlign }),
     /* @__PURE__ */ jsx13(Segmented, { options: [{ value: "top", label: chrome.top }, { value: "middle", label: chrome.middle }, { value: "bottom", label: chrome.bottom }], value: selected.verticalAlign || "top", onChange: (v) => onUpdateField({ verticalAlign: v }) }),
-    !meta.boolean && !meta.isContent && /* @__PURE__ */ jsxs11(Fragment4, { children: [
+    !meta.boolean && !meta.isContent && /* @__PURE__ */ jsxs11(Fragment5, { children: [
       /* @__PURE__ */ jsx13("label", { style: styles.propLabel, children: chrome.labelPosition }),
       /* @__PURE__ */ jsx13(Segmented, { options: [{ value: "top", label: chrome.above }, { value: "inline", label: chrome.inline }], value: selected.labelPosition || "top", onChange: (v) => onUpdateField({ labelPosition: v }) })
     ] }),
-    !meta.isContent && /* @__PURE__ */ jsxs11(Fragment4, { children: [
+    !meta.isContent && /* @__PURE__ */ jsxs11(Fragment5, { children: [
       /* @__PURE__ */ jsx13("div", { style: styles.inspectorDivider }),
       /* @__PURE__ */ jsx13("div", { style: styles.panelHeading, children: chrome.icon }),
       /* @__PURE__ */ jsxs11("label", { style: styles.toggleRow, children: [
         /* @__PURE__ */ jsx13("input", { type: "checkbox", checked: !!selected.showIcon, onChange: (e) => onUpdateField({ showIcon: e.target.checked }), style: { width: 15, height: 15, accentColor: "var(--fb-primary)" } }),
-        /* @__PURE__ */ jsx13("span", { style: { fontSize: 13, color: "#4A4D57" }, children: chrome.showIcon })
+        /* @__PURE__ */ jsx13("span", { style: { fontSize: 13, color: "var(--fb-ink)" }, children: chrome.showIcon })
       ] }),
       selected.showIcon && /* @__PURE__ */ jsx13("div", { style: styles.iconGrid, children: Object.keys(ICON_LIBRARY).map((key) => {
         const IconComp = ICON_LIBRARY[key];
@@ -2098,7 +2175,7 @@ function collectFieldValues(fields) {
 
 // src/components/PreviewPane.tsx
 import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
-function PreviewPane({ title, sections, onFieldChange, language, strings, chrome, baseMaxWidth, onSubmit }) {
+function PreviewPane({ title, sections, onFieldChange, language, strings, chrome, baseMaxWidth, features, onSubmit }) {
   const [device, setDevice] = useState6("laptop");
   const [errors, setErrors] = useState6({});
   const [submitted, setSubmitted] = useState6(null);
@@ -2161,7 +2238,7 @@ function PreviewPane({ title, sections, onFieldChange, language, strings, chrome
   }
   return /* @__PURE__ */ jsxs12("div", { style: styles.previewWrap, children: [
     /* @__PURE__ */ jsxs12("div", { style: { width: "100%", maxWidth, display: "flex", flexDirection: "column", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx14("div", { style: styles.previewToolbar, children: /* @__PURE__ */ jsx14(Segmented, { options: deviceOptions, value: device, onChange: setDevice }) }),
+      features.deviceToggle && /* @__PURE__ */ jsx14("div", { style: styles.previewToolbar, children: /* @__PURE__ */ jsx14(Segmented, { options: deviceOptions, value: device, onChange: setDevice }) }),
       /* @__PURE__ */ jsxs12("div", { style: { ...styles.previewCard, maxWidth, width: "100%" }, children: [
         /* @__PURE__ */ jsx14("h2", { style: styles.previewTitle, children: t(title, language) }),
         allFields.length === 0 && /* @__PURE__ */ jsx14("p", { style: { color: "var(--fb-muted)", fontSize: 14 }, children: strings.addFieldsHint }),
@@ -2184,7 +2261,7 @@ function PreviewPane({ title, sections, onFieldChange, language, strings, chrome
         })
       ] })
     ] }),
-    submitted && /* @__PURE__ */ jsx14("div", { style: styles.modalOverlay, onClick: () => setSubmitted(null), children: /* @__PURE__ */ jsxs12("div", { style: { ...styles.modal, width: 420 }, onClick: (e) => e.stopPropagation(), children: [
+    submitted && /* @__PURE__ */ jsx14("div", { style: styles.modalOverlay, onClick: () => setSubmitted(null), children: /* @__PURE__ */ jsxs12("div", { style: { ...styles.modal, maxWidth: 420 }, onClick: (e) => e.stopPropagation(), children: [
       /* @__PURE__ */ jsxs12("div", { style: styles.modalHeader, children: [
         /* @__PURE__ */ jsxs12("span", { style: { fontWeight: 600, fontSize: 14, display: "flex", alignItems: "center", gap: 7 }, children: [
           /* @__PURE__ */ jsx14(PartyPopper, { size: 15, color: "var(--fb-primary)" }),
@@ -2259,7 +2336,7 @@ import { Save as Save2, X as X5 } from "lucide-react";
 import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 function SaveAsModal({ chrome, suggestedName, onSave, onClose }) {
   const [name, setName] = useState7(suggestedName);
-  return /* @__PURE__ */ jsx17("div", { style: styles.modalOverlay, onClick: onClose, children: /* @__PURE__ */ jsxs15("div", { style: { ...styles.modal, width: 380 }, onClick: (e) => e.stopPropagation(), children: [
+  return /* @__PURE__ */ jsx17("div", { style: styles.modalOverlay, onClick: onClose, children: /* @__PURE__ */ jsxs15("div", { style: { ...styles.modal, maxWidth: 380 }, onClick: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ jsxs15("div", { style: styles.modalHeader, children: [
       /* @__PURE__ */ jsx17("span", { style: { fontWeight: 600, fontSize: 14 }, children: chrome.saveForm }),
       /* @__PURE__ */ jsx17("button", { style: styles.iconBtn, onClick: onClose, children: /* @__PURE__ */ jsx17(X5, { size: 16 }) })
@@ -2289,6 +2366,36 @@ var css = `
      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
@@ -2299,11 +2406,14 @@ var FormBuilder = forwardRef(function FormBuilder2({
   languages = DEFAULT_LANGUAGES,
   strings: stringsOverride,
   chrome: chromeOverride,
-  themeEditable = false,
+  features: featuresProp,
   storage: storageProp,
   onSubmit,
-  initialDocument
+  initialDocument,
+  initialMode,
+  onModeChange
 }, ref) {
+  const features = resolveFeatures(featuresProp);
   const storage = storageProp ?? localStorageAdapter;
   const { theme, updateThemeColor, updateThemeLayout, resetTheme, replaceThemeOverrides, themeOverrides } = useTheme(themeOverrideProp);
   const [language, setLanguage] = useState8(languageOverride || languages[0]?.code || "en");
@@ -2311,12 +2421,21 @@ var FormBuilder = forwardRef(function FormBuilder2({
   const chrome = { ...CHROME[language] || CHROME.en, ...chromeOverride && chromeOverride[language] || {} };
   const doc = useFormDocument({ language, chrome });
   const drag = useDragReorder(doc.reorderWithinSection);
-  const [mode, setMode] = useState8("build");
+  const [mode, setModeState] = useState8(initialMode ?? "build");
+  const setMode = (next) => {
+    setModeState(next);
+    onModeChange?.(next);
+  };
+  useEffect2(() => {
+    onModeChange?.(mode);
+  }, []);
   const [showJson, setShowJson] = useState8(false);
   const [showLibrary, setShowLibrary] = useState8(false);
   const [copied, setCopied] = useState8(false);
+  const [mobilePanel, setMobilePanel] = useState8("none");
   const persistence = usePersistence({
     storage,
+    autosave: features.autosave,
     language,
     chrome,
     document: { title: doc.title, themeOverrides, sections: doc.sections },
@@ -2356,6 +2475,7 @@ var FormBuilder = forwardRef(function FormBuilder2({
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }), [jsonDoc, jsonString]);
+  const fieldCount = doc.sections.reduce((n, s) => n + s.fields.filter((f) => !getMeta(f.type).isContent).length, 0);
   const activeSectionIdx = doc.sections.findIndex((s) => s.id === doc.activeSection?.id);
   const activeSectionLabel = t(doc.activeSection?.title, language) || `#${activeSectionIdx + 1}`;
   const rootStyle = {
@@ -2370,6 +2490,7 @@ var FormBuilder = forwardRef(function FormBuilder2({
     "--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`,
@@ -2389,6 +2510,7 @@ var FormBuilder = forwardRef(function FormBuilder2({
         mode,
         saveState: persistence.saveState,
         chrome,
+        features,
         savedFormsCount: persistence.savedForms.length,
         onTitleChange: doc.updateTitle,
         onLanguageChange: setLanguage,
@@ -2402,63 +2524,103 @@ var FormBuilder = forwardRef(function FormBuilder2({
     persistence.loadingDraft ? /* @__PURE__ */ jsxs16("div", { style: styles.loadingScreen, children: [
       /* @__PURE__ */ jsx18(Loader22, { size: 20, className: "spin" }),
       /* @__PURE__ */ jsx18("span", { style: { marginTop: 8, fontSize: 13, color: "var(--fb-muted)" }, children: chrome.loadingDraft })
-    ] }) : mode === "build" ? /* @__PURE__ */ jsxs16("div", { style: styles.workArea, children: [
-      /* @__PURE__ */ jsx18(
-        Palette,
-        {
-          activeSectionLabel,
-          chrome,
-          onAddField: doc.addField,
-          themeEditable,
-          theme,
-          updateThemeColor,
-          updateThemeLayout,
-          resetTheme
-        }
-      ),
-      /* @__PURE__ */ jsx18(
-        Canvas,
-        {
-          sections: doc.sections,
-          activeSectionId: doc.activeSectionId,
-          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,
-          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__ */ jsx18(
-        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)
-        }
-      )
+    ] }) : mode === "build" ? /* @__PURE__ */ jsxs16("div", { className: "fb-work-area", style: styles.workArea, "data-mobile-panel": mobilePanel, children: [
+      /* @__PURE__ */ jsxs16("div", { className: "fb-mobile-bar", children: [
+        /* @__PURE__ */ jsxs16(
+          "button",
+          {
+            type: "button",
+            className: "fb-mobile-btn",
+            "aria-pressed": mobilePanel === "palette",
+            onClick: () => setMobilePanel((p) => p === "palette" ? "none" : "palette"),
+            children: [
+              /* @__PURE__ */ jsx18(Menu, { size: 14 }),
+              " ",
+              chrome.paletteTabBlocks
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs16(
+          "button",
+          {
+            type: "button",
+            className: "fb-mobile-btn",
+            "aria-pressed": mobilePanel === "inspector",
+            onClick: () => setMobilePanel((p) => p === "inspector" ? "none" : "inspector"),
+            children: [
+              /* @__PURE__ */ jsx18(SlidersHorizontal, { size: 14 }),
+              " ",
+              chrome.properties
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs16("div", { className: "fb-canvas-area", style: styles.workArea, children: [
+        mobilePanel !== "none" && /* @__PURE__ */ jsx18("div", { className: "fb-mobile-backdrop", onClick: () => setMobilePanel("none") }),
+        /* @__PURE__ */ jsx18(
+          Palette,
+          {
+            activeSectionLabel,
+            chrome,
+            onAddField: (type) => {
+              doc.addField(type);
+              setMobilePanel("none");
+            },
+            features,
+            fieldCount,
+            theme,
+            updateThemeColor,
+            updateThemeLayout,
+            resetTheme
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          Canvas,
+          {
+            sections: doc.sections,
+            activeSectionId: doc.activeSectionId,
+            selectedId: doc.selectedId,
+            dragOverKey: drag.dragOverKey,
+            chrome,
+            strings,
+            language,
+            features,
+            onActivateSection: doc.setActiveSectionId,
+            onToggleSectionCollapse: doc.toggleSectionCollapse,
+            onUpdateSectionTitle: doc.updateSectionTitle,
+            onUpdateSectionBackground: doc.updateSectionBackground,
+            onDuplicateSection: doc.duplicateSection,
+            onMoveSection: doc.moveSection,
+            onDeleteSection: doc.deleteSection,
+            onAddSection: doc.addSection,
+            onSelectField: (sectionId, fieldId) => {
+              doc.setSelectedId(fieldId);
+              doc.setActiveSectionId(sectionId);
+              setMobilePanel("inspector");
+            },
+            onFieldChange: doc.updateField,
+            onMoveField: doc.moveField,
+            onDuplicateField: doc.duplicateField,
+            onDeleteField: doc.deleteField,
+            getDropZoneHandlers: drag.getDropZoneHandlers,
+            getDragHandleProps: drag.getDragHandleProps
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          Inspector,
+          {
+            selected: doc.selected,
+            language,
+            chrome,
+            features,
+            onUpdateField: (patch) => doc.selected && doc.updateField(doc.selected.id, patch),
+            onDeleteField: () => doc.selected && doc.deleteField(doc.selected.id),
+            onUpdateOption: (optIdx, patch) => doc.selected && doc.updateOption(doc.selected.id, optIdx, patch),
+            onAddOption: () => doc.selected && doc.addOption(doc.selected.id),
+            onRemoveOption: (optIdx) => doc.selected && doc.removeOption(doc.selected.id, optIdx)
+          }
+        )
+      ] })
     ] }) : /* @__PURE__ */ jsx18(
       PreviewPane,
       {
@@ -2469,6 +2631,7 @@ var FormBuilder = forwardRef(function FormBuilder2({
         strings,
         chrome,
         baseMaxWidth: theme.layout.maxWidth,
+        features,
         onSubmit
       }
     ),
@@ -2499,7 +2662,24 @@ var FormBuilder = forwardRef(function FormBuilder2({
   ] });
 });
 var FormBuilder_default = FormBuilder;
+
+// src/theme/darkTheme.ts
+var DARK_THEME = {
+  primary: "#8B8FF5",
+  primarySoft: "#262A45",
+  danger: "#F0715B",
+  dangerSoft: "#3A2420",
+  ink: "#EDEEF2",
+  muted: "#9096A8",
+  border: "#2E313D",
+  surface: "#1A1B23",
+  canvas: "#121319",
+  pageBackground: "#1A1B23",
+  layout: DEFAULT_THEME.layout
+};
 export {
+  DARK_THEME,
+  DEFAULT_THEME,
   FormBuilder_default as FormBuilder,
   FormBuilder_default as default,
   localStorageAdapter