form-page-builder 2.0.0 → 2.2.0

package/dist/index.cjs

@@ -21,17 +21,74 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  CLIPBOARD_KEY: () => CLIPBOARD_KEY,
   DARK_THEME: () => DARK_THEME,
   DEFAULT_THEME: () => DEFAULT_THEME,
+  DRAFT_KEY: () => DRAFT_KEY,
   FormBuilder: () => FormBuilder_default,
+  INDEX_KEY: () => INDEX_KEY,
   default: () => FormBuilder_default,
-  localStorageAdapter: () => localStorageAdapter
+  formKey: () => formKey,
+  localStorageAdapter: () => localStorageAdapter,
+  parseTemplate: () => parseTemplate,
+  savedFormId: () => savedFormId,
+  serializeTemplate: () => serializeTemplate
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/FormBuilder.tsx
-var import_react8 = require("react");
-var import_lucide_react18 = require("lucide-react");
+var import_react10 = require("react");
+var import_lucide_react19 = require("lucide-react");
+
+// src/constants/fieldTypes.ts
+var import_lucide_react = require("lucide-react");
+var FIELD_TYPES = [
+  { type: "paragraph", icon: import_lucide_react.FileText, isContent: true, defaultIcon: "FileText" },
+  { type: "image", icon: import_lucide_react.Image, isContent: true, isImage: true, defaultIcon: "Type" },
+  { type: "button", icon: import_lucide_react.MousePointerClick, isContent: true, defaultIcon: "Type" },
+  { type: "input", icon: import_lucide_react.Type, placeholder: true, hasSubtype: true, defaultIcon: "Type" },
+  { type: "textarea", icon: import_lucide_react.AlignLeft, placeholder: true, defaultIcon: "AlignLeft" },
+  { type: "select", icon: import_lucide_react.ChevronDown, options: true, defaultIcon: "ChevronDown" },
+  { type: "radio", icon: import_lucide_react.Circle, options: true, defaultIcon: "Circle" },
+  { type: "checkboxGroup", icon: import_lucide_react.ListChecks, options: true, multiValue: true, defaultIcon: "ListChecks" },
+  { type: "checkbox", icon: import_lucide_react.CheckSquare, boolean: true, defaultIcon: "CheckSquare" },
+  { type: "toggle", icon: import_lucide_react.ToggleLeft, boolean: true, defaultIcon: "ToggleLeft" }
+];
+var TYPE_MAP = Object.fromEntries(FIELD_TYPES.map((f) => [f.type, f]));
+var CONTENT_TYPES = FIELD_TYPES.filter((f) => f.isContent);
+var FORM_TYPES = FIELD_TYPES.filter((f) => !f.isContent);
+function getMeta(type) {
+  return TYPE_MAP[type] || TYPE_MAP.input;
+}
+var LEGACY_INPUT_TYPES = ["text", "email", "phone", "number", "password", "date"];
+var INPUT_SUBTYPES = ["text", "email", "phone", "number", "password", "date", "time"];
+var IMAGE_SHAPES = ["square", "circle", "banner"];
+var FIELD_TYPE_CHROME_KEY = {
+  paragraph: "fieldTypeParagraph",
+  image: "fieldTypeImage",
+  button: "fieldTypeButton",
+  input: "fieldTypeInput",
+  textarea: "fieldTypeTextarea",
+  select: "fieldTypeSelect",
+  radio: "fieldTypeRadio",
+  checkboxGroup: "fieldTypeCheckboxGroup",
+  checkbox: "fieldTypeCheckbox",
+  toggle: "fieldTypeToggle"
+};
+var INPUT_SUBTYPE_CHROME_KEY = {
+  text: "subtypeText",
+  email: "subtypeEmail",
+  phone: "subtypePhone",
+  number: "subtypeNumber",
+  password: "subtypePassword",
+  date: "subtypeDate",
+  time: "subtypeTime"
+};
+var IMAGE_SHAPE_CHROME_KEY = {
+  square: "shapeSquare",
+  circle: "shapeCircle",
+  banner: "shapeBanner"
+};
 
 // src/i18n/languages.ts
 var DEFAULT_LANGUAGES = [
@@ -72,6 +129,7 @@ var DEFAULT_STRINGS = {
     tooLarge: (n) => `${n}\u4EE5\u4E0B\u306E\u5024\u3092\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044\u3002`
   }
 };
+DEFAULT_STRINGS.ja;
 
 // src/i18n/chrome.ts
 var CHROME = {
@@ -147,16 +205,33 @@ var CHROME = {
     formJson: "Form JSON",
     copy: "Copy",
     copied: "Copied",
+    copyTemplate: "Copy template",
+    pasteTemplate: "Paste template",
+    copyTemplateTitle: "Copy this form as a template you can paste into another builder",
+    pasteTemplateTitle: "Replace this form with the copied template",
+    pasteTemplateConfirm: "Replace the current form with the copied template? This can't be undone.",
     noTemplates: 'No templates saved yet. Click "Save" in the toolbar to store this form here.',
+    noTemplatesReadonly: "No templates available yet.",
     updated: "Updated",
     open: "Open",
+    applyTemplate: "Apply",
     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.",
+    templatesLimitReached: (max) => `You can save up to ${max} template${max === 1 ? "" : "s"}. Delete one to save another.`,
+    templatesLimitTitle: "Template limit reached",
+    confirm: "Confirm",
+    cancel: "Cancel",
+    dismiss: "OK",
+    confirmReplace: "Replace",
     current: "current",
     customColor: "Custom color",
+    templateLabel: (name) => `Template: ${name}`,
+    templateEdited: "Edited",
+    templateLoading: "Loading template...",
+    templateLoadFailed: "Couldn't load that template.",
+    templateSaveFailed: "Couldn't save the template.",
     fieldsCount: (n) => `${n} field${n === 1 ? "" : "s"}`,
     fieldTypeInput: "Input",
     fieldTypeTextarea: "Textarea",
@@ -283,16 +358,33 @@ var CHROME = {
     formJson: "\u30D5\u30A9\u30FC\u30E0JSON",
     copy: "\u30B3\u30D4\u30FC",
     copied: "\u30B3\u30D4\u30FC\u3057\u307E\u3057\u305F",
+    copyTemplate: "\u30C6\u30F3\u30D7\u30EC\u30FC\u30C8\u3092\u30B3\u30D4\u30FC",
+    pasteTemplate: "\u30C6\u30F3\u30D7\u30EC\u30FC\u30C8\u3092\u8CBC\u308A\u4ED8\u3051",
+    copyTemplateTitle: "\u3053\u306E\u30D5\u30A9\u30FC\u30E0\u3092\u30C6\u30F3\u30D7\u30EC\u30FC\u30C8\u3068\u3057\u3066\u30B3\u30D4\u30FC\u3057\u3001\u4ED6\u306E\u30D3\u30EB\u30C0\u30FC\u306B\u8CBC\u308A\u4ED8\u3051\u307E\u3059",
+    pasteTemplateTitle: "\u30B3\u30D4\u30FC\u3057\u305F\u30C6\u30F3\u30D7\u30EC\u30FC\u30C8\u3067\u3053\u306E\u30D5\u30A9\u30FC\u30E0\u3092\u7F6E\u304D\u63DB\u3048\u307E\u3059",
+    pasteTemplateConfirm: "\u73FE\u5728\u306E\u30D5\u30A9\u30FC\u30E0\u3092\u30B3\u30D4\u30FC\u3057\u305F\u30C6\u30F3\u30D7\u30EC\u30FC\u30C8\u3067\u7F6E\u304D\u63DB\u3048\u307E\u3059\u304B\uFF1F\u3053\u306E\u64CD\u4F5C\u306F\u53D6\u308A\u6D88\u305B\u307E\u305B\u3093\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",
+    noTemplatesReadonly: "\u5229\u7528\u3067\u304D\u308B\u30C6\u30F3\u30D7\u30EC\u30FC\u30C8\u304C\u307E\u3060\u3042\u308A\u307E\u305B\u3093\u3002",
     updated: "\u66F4\u65B0\u65E5\u6642",
     open: "\u958B\u304F",
+    applyTemplate: "\u9069\u7528",
     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",
+    templatesLimitReached: (max) => `\u30C6\u30F3\u30D7\u30EC\u30FC\u30C8\u306F${max}\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`,
+    templatesLimitTitle: "\u30C6\u30F3\u30D7\u30EC\u30FC\u30C8\u306E\u4E0A\u9650\u306B\u9054\u3057\u307E\u3057\u305F",
+    confirm: "\u78BA\u5B9A",
+    cancel: "\u30AD\u30E3\u30F3\u30BB\u30EB",
+    dismiss: "OK",
+    confirmReplace: "\u7F6E\u304D\u63DB\u3048\u308B",
     current: "\u73FE\u5728\u7DE8\u96C6\u4E2D",
     customColor: "\u30AB\u30B9\u30BF\u30E0\u30AB\u30E9\u30FC",
+    templateLabel: (name) => `\u30C6\u30F3\u30D7\u30EC\u30FC\u30C8: ${name}`,
+    templateEdited: "\u7DE8\u96C6\u6E08\u307F",
+    templateLoading: "\u30C6\u30F3\u30D7\u30EC\u30FC\u30C8\u3092\u8AAD\u307F\u8FBC\u307F\u4E2D...",
+    templateLoadFailed: "\u30C6\u30F3\u30D7\u30EC\u30FC\u30C8\u3092\u8AAD\u307F\u8FBC\u3081\u307E\u305B\u3093\u3067\u3057\u305F\u3002",
+    templateSaveFailed: "\u30C6\u30F3\u30D7\u30EC\u30FC\u30C8\u3092\u4FDD\u5B58\u3067\u304D\u307E\u305B\u3093\u3067\u3057\u305F\u3002",
     fieldsCount: (n) => `${n}\u4EF6\u306E\u30D5\u30A3\u30FC\u30EB\u30C9`,
     fieldTypeInput: "\u5165\u529B",
     fieldTypeTextarea: "\u30C6\u30AD\u30B9\u30C8\u30A8\u30EA\u30A2",
@@ -348,6 +440,7 @@ var CHROME = {
     spacingTicketPadding: "\u30D5\u30A3\u30FC\u30EB\u30C9\u5185\u4F59\u767D"
   }
 };
+CHROME.ja;
 
 // src/lib/bilingual.ts
 function bi(en = "", ja = "") {
@@ -420,56 +513,6 @@ var localStorageAdapter = {
   }
 };
 
-// src/constants/fieldTypes.ts
-var import_lucide_react = require("lucide-react");
-var FIELD_TYPES = [
-  { type: "paragraph", icon: import_lucide_react.FileText, isContent: true, defaultIcon: "FileText" },
-  { type: "image", icon: import_lucide_react.Image, isContent: true, isImage: true, defaultIcon: "Type" },
-  { type: "button", icon: import_lucide_react.MousePointerClick, isContent: true, defaultIcon: "Type" },
-  { type: "input", icon: import_lucide_react.Type, placeholder: true, hasSubtype: true, defaultIcon: "Type" },
-  { type: "textarea", icon: import_lucide_react.AlignLeft, placeholder: true, defaultIcon: "AlignLeft" },
-  { type: "select", icon: import_lucide_react.ChevronDown, options: true, defaultIcon: "ChevronDown" },
-  { type: "radio", icon: import_lucide_react.Circle, options: true, defaultIcon: "Circle" },
-  { type: "checkboxGroup", icon: import_lucide_react.ListChecks, options: true, multiValue: true, defaultIcon: "ListChecks" },
-  { type: "checkbox", icon: import_lucide_react.CheckSquare, boolean: true, defaultIcon: "CheckSquare" },
-  { type: "toggle", icon: import_lucide_react.ToggleLeft, boolean: true, defaultIcon: "ToggleLeft" }
-];
-var TYPE_MAP = Object.fromEntries(FIELD_TYPES.map((f) => [f.type, f]));
-var CONTENT_TYPES = FIELD_TYPES.filter((f) => f.isContent);
-var FORM_TYPES = FIELD_TYPES.filter((f) => !f.isContent);
-function getMeta(type) {
-  return TYPE_MAP[type] || TYPE_MAP.input;
-}
-var LEGACY_INPUT_TYPES = ["text", "email", "phone", "number", "password", "date"];
-var INPUT_SUBTYPES = ["text", "email", "phone", "number", "password", "date", "time"];
-var IMAGE_SHAPES = ["square", "circle", "banner"];
-var FIELD_TYPE_CHROME_KEY = {
-  paragraph: "fieldTypeParagraph",
-  image: "fieldTypeImage",
-  button: "fieldTypeButton",
-  input: "fieldTypeInput",
-  textarea: "fieldTypeTextarea",
-  select: "fieldTypeSelect",
-  radio: "fieldTypeRadio",
-  checkboxGroup: "fieldTypeCheckboxGroup",
-  checkbox: "fieldTypeCheckbox",
-  toggle: "fieldTypeToggle"
-};
-var INPUT_SUBTYPE_CHROME_KEY = {
-  text: "subtypeText",
-  email: "subtypeEmail",
-  phone: "subtypePhone",
-  number: "subtypeNumber",
-  password: "subtypePassword",
-  date: "subtypeDate",
-  time: "subtypeTime"
-};
-var IMAGE_SHAPE_CHROME_KEY = {
-  square: "shapeSquare",
-  circle: "shapeCircle",
-  banner: "shapeBanner"
-};
-
 // src/lib/id.ts
 var genFormId = () => `form_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 7)}`;
 var genSectionId = () => `section_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 7)}`;
@@ -633,10 +676,32 @@ function migrateDocument(raw) {
   return { title, themeOverrides, sections };
 }
 
+// src/lib/template.ts
+var TEMPLATE_FORMAT = 1;
+function serializeTemplate(document2) {
+  const envelope = { __fpb: "template", v: TEMPLATE_FORMAT, document: document2 };
+  return JSON.stringify(envelope);
+}
+function parseTemplate(raw) {
+  if (!raw) return null;
+  let parsed;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    return null;
+  }
+  if (!parsed || typeof parsed !== "object") return null;
+  const obj = parsed;
+  const candidate = obj.__fpb === "template" && obj.document ? obj.document : obj;
+  return migrateDocument(candidate);
+}
+
 // src/lib/features.ts
+var DEFAULT_MAX_TEMPLATES = 5;
 var DEFAULT_FEATURES = {
   naming: true,
-  templates: true,
+  templates: { enabled: true, manage: true, max: DEFAULT_MAX_TEMPLATES },
+  templateClipboard: true,
   newForm: true,
   autosave: true,
   jsonView: true,
@@ -647,14 +712,24 @@ var DEFAULT_FEATURES = {
   contentBlocks: true,
   fieldTypes: true,
   sections: true,
-  dragReorder: true
+  sectionBackground: true,
+  dragReorder: true,
+  deviceToggle: true
 };
+function resolveTemplates(t2) {
+  if (t2 === false) return { enabled: false, manage: false, max: DEFAULT_MAX_TEMPLATES };
+  if (t2 === void 0 || t2 === true) return { enabled: true, manage: true, max: DEFAULT_MAX_TEMPLATES };
+  return { enabled: true, manage: t2.manage ?? true, max: t2.max ?? DEFAULT_MAX_TEMPLATES };
+}
 function resolveFeatures(features) {
   return {
     ...DEFAULT_FEATURES,
     ...features,
+    templates: resolveTemplates(features?.templates),
     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
+    fieldTypes: Array.isArray(features?.fieldTypes) ? new Set(features.fieldTypes) : features?.fieldTypes ?? DEFAULT_FEATURES.fieldTypes,
+    // Unset → follow `sections`, so an existing `sections: false` still hides the picker.
+    sectionBackground: features?.sectionBackground ?? features?.sections ?? DEFAULT_FEATURES.sectionBackground
   };
 }
 function isContentBlockEnabled(features, type) {
@@ -684,17 +759,17 @@ var DEFAULT_THEME = {
 
 // src/hooks/useTheme.ts
 function useTheme(themeOverrideProp) {
-  const baseTheme = {
+  const [themeOverrides, setThemeOverrides] = (0, import_react.useState)({});
+  const baseTheme = (0, import_react.useMemo)(() => ({
     ...DEFAULT_THEME,
     ...themeOverrideProp || {},
     layout: { ...DEFAULT_THEME.layout, ...themeOverrideProp && themeOverrideProp.layout || {} }
-  };
-  const [themeOverrides, setThemeOverrides] = (0, import_react.useState)({});
-  const theme = {
+  }), [themeOverrideProp]);
+  const theme = (0, import_react.useMemo)(() => ({
     ...baseTheme,
     ...themeOverrides,
     layout: { ...baseTheme.layout, ...themeOverrides.layout || {} }
-  };
+  }), [baseTheme, themeOverrides]);
   function updateThemeColor(key, value) {
     setThemeOverrides((prev) => ({ ...prev, [key]: value }));
   }
@@ -893,35 +968,49 @@ var import_react3 = require("react");
 var DRAFT_KEY = "form-page-builder:draft";
 var INDEX_KEY = "form-page-builder:index";
 var formKey = (id) => `form-page-builder:saved:${id}`;
+var savedFormId = (key) => key.startsWith("form-page-builder:saved:") ? key.slice("form-page-builder:saved:".length) : null;
+var CLIPBOARD_KEY = "form-page-builder:clipboard";
 
 // src/hooks/usePersistence.ts
-var MAX_TEMPLATES = 5;
+function snapshotOf(d) {
+  return JSON.stringify({ title: d.title, themeOverrides: d.themeOverrides, sections: d.sections });
+}
 function usePersistence({
   storage,
   autosave,
+  templateMax,
+  templateManage,
   language,
   chrome,
-  document,
+  document: document2,
   initialDocument,
   onLoadDocument,
   onLoadThemeOverrides,
   onTitleChange,
   onNewForm,
+  onTemplateChange,
   ensureActiveSection
 }) {
   const [currentFormId, setCurrentFormId] = (0, import_react3.useState)(null);
   const [loadingDraft, setLoadingDraft] = (0, import_react3.useState)(true);
   const [saveState, setSaveState] = (0, import_react3.useState)("idle");
+  const [templateState, setTemplateState] = (0, import_react3.useState)("idle");
   const [savedForms, setSavedForms] = (0, import_react3.useState)([]);
   const [saveAsPrompt, setSaveAsPrompt] = (0, import_react3.useState)(null);
+  const [notice, setNotice] = (0, import_react3.useState)(null);
   const autosaveTimer = (0, import_react3.useRef)(null);
   const hasLoadedOnce = (0, import_react3.useRef)(false);
+  const savedSnapshot = (0, import_react3.useRef)(null);
+  function flashSaved() {
+    setTemplateState("saved");
+    setTimeout(() => setTemplateState((s) => s === "saved" ? "idle" : s), 1500);
+  }
   async function refreshLibrary() {
     try {
       const raw = await storage.get(INDEX_KEY);
       const list = raw ? JSON.parse(raw) : [];
       setSavedForms(list.sort((a, b) => b.updatedAt - a.updatedAt));
-    } catch (err) {
+    } catch {
       setSavedForms([]);
     }
   }
@@ -945,12 +1034,21 @@ function usePersistence({
               onLoadDocument(doc);
               onLoadThemeOverrides(doc.themeOverrides);
             }
-            if (parsed.currentFormId) setCurrentFormId(parsed.currentFormId);
+            if (parsed.currentFormId && templateManage) {
+              setCurrentFormId(parsed.currentFormId);
+              try {
+                const tplRaw = await storage.get(formKey(parsed.currentFormId));
+                const tplDoc = tplRaw ? migrateDocument(JSON.parse(tplRaw)) : null;
+                savedSnapshot.current = tplDoc ? snapshotOf(tplDoc) : null;
+              } catch {
+                savedSnapshot.current = null;
+              }
+            }
           } else {
             ensureActiveSection();
           }
         }
-      } catch (err) {
+      } catch {
         ensureActiveSection();
       } finally {
         setLoadingDraft(false);
@@ -965,86 +1063,125 @@ function usePersistence({
     if (autosaveTimer.current) clearTimeout(autosaveTimer.current);
     autosaveTimer.current = setTimeout(async () => {
       try {
-        await storage.set(DRAFT_KEY, JSON.stringify({ ...document, currentFormId }));
+        await storage.set(DRAFT_KEY, JSON.stringify({ ...document2, currentFormId }));
         setSaveState("saved");
-      } catch (err) {
+      } catch {
         setSaveState("error");
       }
     }, 600);
     return () => {
       if (autosaveTimer.current) clearTimeout(autosaveTimer.current);
     };
-  }, [document.title, document.themeOverrides, document.sections, currentFormId]);
+  }, [document2.title, document2.themeOverrides, document2.sections, currentFormId]);
   async function saveAs(name) {
-    if (savedForms.length >= MAX_TEMPLATES) {
-      alert(chrome.templatesLimitReached);
+    if (!templateManage) return;
+    if (savedForms.length >= templateMax) {
+      setSaveAsPrompt(null);
+      setNotice({ title: chrome.templatesLimitTitle, message: chrome.templatesLimitReached(templateMax) });
       return;
     }
     const id = genFormId();
     const now = Date.now();
+    setTemplateState("saving");
     try {
       const newTitle = bi(name, "");
-      await storage.set(formKey(id), JSON.stringify({ ...document, title: newTitle, id, updatedAt: now }));
+      const docToSave = { ...document2, title: newTitle };
+      await storage.set(formKey(id), JSON.stringify({ ...docToSave, id, updatedAt: now }));
       const next = [...savedForms, { id, title: name, updatedAt: now }];
       await storage.set(INDEX_KEY, JSON.stringify(next));
       setSavedForms(next);
       setCurrentFormId(id);
       onTitleChange(newTitle);
       setSaveAsPrompt(null);
-    } catch (err) {
-      alert("Couldn't save the form. Please try again.");
+      savedSnapshot.current = snapshotOf(docToSave);
+      flashSaved();
+      onTemplateChange?.({ id, title: name, source: "new" });
+    } catch {
+      setTemplateState("error");
     }
   }
   async function saveExisting() {
+    if (!templateManage) return;
     if (!currentFormId) {
-      setSaveAsPrompt({ open: true, suggestedName: t(document.title, language) });
+      setSaveAsPrompt({ open: true, suggestedName: t(document2.title, language) });
       return;
     }
     const now = Date.now();
+    setTemplateState("saving");
     try {
-      await storage.set(formKey(currentFormId), JSON.stringify({ ...document, id: currentFormId, updatedAt: now }));
-      const next = savedForms.map((f) => f.id === currentFormId ? { ...f, title: t(document.title, "en"), updatedAt: now } : f);
+      await storage.set(formKey(currentFormId), JSON.stringify({ ...document2, id: currentFormId, updatedAt: now }));
+      const next = savedForms.map((f) => f.id === currentFormId ? { ...f, title: t(document2.title, "en"), updatedAt: now } : f);
       setSavedForms(next);
       await storage.set(INDEX_KEY, JSON.stringify(next));
-    } catch (err) {
-      alert("Couldn't save the form. Please try again.");
+      savedSnapshot.current = snapshotOf(document2);
+      flashSaved();
+      onTemplateChange?.({ id: currentFormId, title: t(document2.title, language), source: "saved" });
+    } catch {
+      setTemplateState("error");
     }
   }
   async function loadForm(id) {
+    setTemplateState("loading");
     try {
       const raw = await storage.get(formKey(id));
-      if (!raw) return;
+      if (!raw) {
+        setTemplateState("error");
+        return false;
+      }
       const doc = migrateDocument(JSON.parse(raw));
-      if (!doc) return;
+      if (!doc) {
+        setTemplateState("error");
+        return false;
+      }
       onLoadDocument(doc);
       onLoadThemeOverrides(doc.themeOverrides);
-      setCurrentFormId(id);
-    } catch (err) {
-      alert("Couldn't load that form.");
+      const boundId = templateManage ? id : null;
+      setCurrentFormId(boundId);
+      savedSnapshot.current = boundId ? snapshotOf(doc) : null;
+      setTemplateState("idle");
+      onTemplateChange?.({ id, title: t(doc.title, language), source: "applied" });
+      return true;
+    } catch {
+      setTemplateState("error");
+      return false;
     }
   }
   async function deleteForm(id) {
+    if (!templateManage) return;
+    const removed = savedForms.find((f) => f.id === id);
     try {
       await storage.delete(formKey(id));
       const next = savedForms.filter((f) => f.id !== id);
       setSavedForms(next);
       await storage.set(INDEX_KEY, JSON.stringify(next));
-      if (currentFormId === id) setCurrentFormId(null);
-    } catch (err) {
+      if (currentFormId === id) {
+        setCurrentFormId(null);
+        savedSnapshot.current = null;
+      }
+      onTemplateChange?.({ id: currentFormId === id ? null : id, title: removed?.title ?? "", source: "deleted" });
+    } catch {
+      setTemplateState("error");
     }
   }
   function newForm() {
     onNewForm();
     setCurrentFormId(null);
+    savedSnapshot.current = null;
+    setTemplateState("idle");
   }
+  const activeTemplate = currentFormId ? savedForms.find((f) => f.id === currentFormId) ?? null : null;
+  const isTemplateDirty = savedSnapshot.current !== null && snapshotOf(document2) !== savedSnapshot.current;
   function dismissSaveAsPrompt() {
     setSaveAsPrompt(null);
   }
   return {
     loadingDraft,
     saveState,
+    templateState,
     savedForms,
     currentFormId,
+    activeTemplateTitle: activeTemplate?.title ?? null,
+    isTemplateDirty,
     saveAs,
     saveExisting,
     loadForm,
@@ -1052,15 +1189,64 @@ function usePersistence({
     refreshLibrary,
     newForm,
     saveAsPrompt,
-    dismissSaveAsPrompt
+    dismissSaveAsPrompt,
+    notice,
+    dismissNotice: () => setNotice(null)
   };
 }
 
-// src/hooks/useDragReorder.ts
+// src/hooks/useTemplateClipboard.ts
 var import_react4 = require("react");
+var sameTabListeners = /* @__PURE__ */ new Set();
+function notifySameTab() {
+  sameTabListeners.forEach((fn) => fn());
+}
+function readKey(key) {
+  try {
+    return typeof window !== "undefined" && window.localStorage ? window.localStorage.getItem(key) : null;
+  } catch {
+    return null;
+  }
+}
+function useTemplateClipboard(clipboardKey = CLIPBOARD_KEY) {
+  const keyRef = (0, import_react4.useRef)(clipboardKey);
+  keyRef.current = clipboardKey;
+  const [hasClipboard, setHasClipboard] = (0, import_react4.useState)(false);
+  const refresh = (0, import_react4.useCallback)(() => {
+    setHasClipboard(parseTemplate(readKey(keyRef.current)) !== null);
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    refresh();
+    const onStorage = (e) => {
+      if (e.key === null || e.key === keyRef.current) refresh();
+    };
+    sameTabListeners.add(refresh);
+    window.addEventListener("storage", onStorage);
+    return () => {
+      sameTabListeners.delete(refresh);
+      window.removeEventListener("storage", onStorage);
+    };
+  }, [refresh]);
+  const copyTemplate = (0, import_react4.useCallback)((document2) => {
+    const str = serializeTemplate(document2);
+    try {
+      window.localStorage?.setItem(keyRef.current, str);
+    } catch {
+    }
+    notifySameTab();
+    refresh();
+  }, [refresh]);
+  const readTemplate = (0, import_react4.useCallback)(() => {
+    return parseTemplate(readKey(keyRef.current));
+  }, []);
+  return { hasClipboard, copyTemplate, readTemplate };
+}
+
+// src/hooks/useDragReorder.ts
+var import_react5 = require("react");
 function useDragReorder(reorderWithinSection) {
-  const dragRef = (0, import_react4.useRef)({ sectionId: null, index: null });
-  const [dragOverKey, setDragOverKey] = (0, import_react4.useState)(null);
+  const dragRef = (0, import_react5.useRef)({ sectionId: null, index: null });
+  const [dragOverKey, setDragOverKey] = (0, import_react5.useState)(null);
   function getDropZoneHandlers(sectionId, index) {
     const dragKey = `${sectionId}:${index}`;
     return {
@@ -1094,7 +1280,7 @@ var import_lucide_react2 = require("lucide-react");
 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)", 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 },
+  toolbarLeft: { display: "flex", alignItems: "center", gap: 10, minWidth: 0, flexShrink: 1 },
   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" },
@@ -1104,6 +1290,8 @@ var styles = {
   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 },
+  templateTag: { display: "flex", alignItems: "center", gap: 6, fontSize: 12, color: "var(--fb-muted)", minWidth: 0, flexShrink: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+  toolbarIconBtn: { display: "flex", alignItems: "center", justifyContent: "center", padding: "6px 9px", borderRadius: 7, border: "1px solid var(--fb-border)", background: "var(--fb-surface)", color: "var(--fb-ink)" },
   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 },
@@ -1240,21 +1428,36 @@ function Toolbar({
   languages,
   mode,
   saveState,
+  templateState,
+  activeTemplateTitle,
+  templateDirty,
   chrome,
   features,
   savedFormsCount,
+  clipboardReady,
+  templateCopied,
   onTitleChange,
   onLanguageChange,
   onModeChange,
   onNewForm,
   onOpenLibrary,
   onSaveExisting,
-  onOpenJson
+  onOpenJson,
+  onCopyTemplate,
+  onPasteTemplate
 }) {
   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) })
+      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) }),
+      templateState === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: styles.saveStatus, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Loader2, { size: 12, className: "spin" }),
+        " ",
+        chrome.templateLoading
+      ] }) : activeTemplateTitle && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "fb-template-tag", style: styles.templateTag, title: chrome.templateLabel(activeTemplateTitle), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { overflow: "hidden", textOverflow: "ellipsis" }, children: chrome.templateLabel(activeTemplateTitle) }),
+        templateDirty && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: styles.currentBadge, children: chrome.templateEdited })
+      ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: styles.toolbarRight, children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: styles.saveStatus, children: [
@@ -1287,20 +1490,20 @@ function Toolbar({
           chrome.preview
         ] })
       ] }),
-      (features.newForm || features.templates) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: styles.toolbarDivider }),
+      (features.newForm || features.templates.enabled) && /* @__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: [
+      features.templates.enabled && /* @__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: [
+        features.templates.manage && /* @__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
@@ -1310,13 +1513,17 @@ function Toolbar({
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Code2, { size: 14 }),
         " ",
         chrome.viewJson
+      ] }),
+      features.templateClipboard && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { style: styles.toolbarIconBtn, onClick: onCopyTemplate, title: chrome.copyTemplateTitle, "aria-label": chrome.copyTemplate, children: templateCopied ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Check, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.ClipboardCopy, { size: 14 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { style: styles.toolbarIconBtn, onClick: onPasteTemplate, disabled: !clipboardReady, title: chrome.pasteTemplateTitle, "aria-label": chrome.pasteTemplate, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.ClipboardPaste, { size: 14 }) })
       ] })
     ] })
   ] });
 }
 
 // src/components/Palette.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_lucide_react5 = require("lucide-react");
 
 // src/components/Segmented.tsx
@@ -1411,11 +1618,13 @@ function Palette({
   theme,
   updateThemeColor,
   updateThemeLayout,
-  resetTheme
+  resetTheme,
+  fieldCount
 }) {
-  const [tab, setTab] = (0, import_react5.useState)("blocks");
+  const [tab, setTab] = (0, import_react6.useState)("blocks");
   const contentTypes = CONTENT_TYPES.filter((f) => isContentBlockEnabled(features, f.type));
   const formTypes = FORM_TYPES.filter((f) => isFieldTypeEnabled(features, f.type));
+  const atFieldCap = typeof features.maxFields === "number" && fieldCount >= features.maxFields;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "fb-palette", style: styles.palette, children: [
     features.design && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { marginBottom: 14 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       Segmented,
@@ -1458,7 +1667,8 @@ function Palette({
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { ...styles.panelHeading, marginTop: 16 }, children: chrome.formFields }),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles.paletteList, children: formTypes.map((f) => {
           const Icon = f.icon;
-          return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("button", { style: styles.paletteItem, onClick: () => onAddField(f.type), children: [
+          const itemStyle = atFieldCap ? { ...styles.paletteItem, opacity: 0.45, cursor: "not-allowed" } : styles.paletteItem;
+          return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("button", { type: "button", disabled: atFieldCap, style: itemStyle, onClick: () => onAddField(f.type), children: [
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { size: 16, color: "var(--fb-primary)" }),
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: chrome[FIELD_TYPE_CHROME_KEY[f.type]] }),
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react5.Plus, { size: 13, color: "var(--fb-muted)", style: { marginLeft: "auto" } })
@@ -1796,7 +2006,7 @@ function SectionCard({
           ),
           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: [
+            features.sectionBackground && !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 })
             ] }),
@@ -2117,7 +2327,7 @@ function InspectorBody({ selected, language, chrome, features, onUpdateField, on
 }
 
 // src/components/PreviewPane.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_lucide_react14 = require("lucide-react");
 
 // src/lib/validate.ts
@@ -2165,11 +2375,11 @@ function collectFieldValues(fields) {
 
 // src/components/PreviewPane.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
-function PreviewPane({ title, sections, onFieldChange, language, strings, chrome, baseMaxWidth, onSubmit }) {
-  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);
+function PreviewPane({ title, sections, onFieldChange, language, strings, chrome, baseMaxWidth, features, onSubmit }) {
+  const [device, setDevice] = (0, import_react7.useState)("laptop");
+  const [errors, setErrors] = (0, import_react7.useState)({});
+  const [submitted, setSubmitted] = (0, import_react7.useState)(null);
+  const [attemptedButtonId, setAttemptedButtonId] = (0, import_react7.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);
@@ -2228,7 +2438,7 @@ function PreviewPane({ title, sections, onFieldChange, language, strings, chrome
   }
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: styles.previewWrap, children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { width: "100%", maxWidth, display: "flex", flexDirection: "column", alignItems: "center" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: styles.previewToolbar, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Segmented, { options: deviceOptions, value: device, onChange: setDevice }) }),
+      features.deviceToggle && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: styles.previewToolbar, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Segmented, { options: deviceOptions, value: device, onChange: setDevice }) }),
       /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { ...styles.previewCard, maxWidth, width: "100%" }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h2", { style: styles.previewTitle, children: t(title, language) }),
         allFields.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { style: { color: "var(--fb-muted)", fontSize: 14 }, children: strings.addFieldsHint }),
@@ -2274,17 +2484,66 @@ function PreviewPane({ title, sections, onFieldChange, language, strings, chrome
 
 // src/components/modals/JsonModal.tsx
 var import_lucide_react15 = require("lucide-react");
+
+// src/hooks/useModalA11y.ts
+var import_react8 = require("react");
+var FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+function useModalA11y(onClose) {
+  const panelRef = (0, import_react8.useRef)(null);
+  const onCloseRef = (0, import_react8.useRef)(onClose);
+  onCloseRef.current = onClose;
+  (0, import_react8.useEffect)(() => {
+    const opener = document.activeElement;
+    const panel = panelRef.current;
+    const focusables = () => Array.from(panel?.querySelectorAll(FOCUSABLE) ?? []);
+    if (panel && !panel.contains(document.activeElement)) {
+      (panel.querySelector("[autofocus]") ?? focusables()[0] ?? panel).focus();
+    }
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        onCloseRef.current();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const items = focusables();
+      if (items.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = items[0];
+      const last = items[items.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey && (active === first || !panel?.contains(active))) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && active === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown, true);
+      opener?.focus?.();
+    };
+  }, []);
+  return panelRef;
+}
+
+// src/components/modals/JsonModal.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function JsonModal({ chrome, jsonString, copied, onCopy, onClose }) {
-  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: [
+  const panelRef = useModalA11y(onClose);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: styles.modalOverlay, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ref: panelRef, style: styles.modal, role: "dialog", "aria-modal": "true", "aria-label": chrome.formJson, 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: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("button", { type: "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_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_runtime15.jsx)("button", { type: "button", style: styles.iconBtn, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react15.X, { size: 16 }) })
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("pre", { style: styles.jsonPre, children: jsonString })
@@ -2294,55 +2553,97 @@ function JsonModal({ chrome, jsonString, copied, onCopy, onClose }) {
 // src/components/modals/TemplatesModal.tsx
 var import_lucide_react16 = require("lucide-react");
 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: [
+function TemplatesModal({ chrome, savedForms, currentFormId, manage, templateState, onOpen, onDelete, onClose }) {
+  const busy = templateState === "loading";
+  const panelRef = useModalA11y(onClose);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: styles.modalOverlay, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { ref: panelRef, style: styles.modal, role: "dialog", "aria-modal": "true", "aria-label": chrome.templates, 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_runtime16.jsx)("button", { type: "button", style: styles.iconBtn, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react16.X, { size: 16 }) })
     ] }),
-    /* @__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_runtime16.jsx)("span", { style: styles.currentBadge, children: chrome.current })
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: styles.libraryBody, children: [
+      savedForms.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: styles.inspectorEmpty, children: manage ? chrome.noTemplates : chrome.noTemplatesReadonly }) : 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_runtime16.jsx)("span", { style: styles.currentBadge, children: chrome.current })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: styles.libraryRowMeta, children: [
+            chrome.updated,
+            " ",
+            new Date(f.updatedAt).toLocaleString()
+          ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: styles.libraryRowMeta, children: [
-          chrome.updated,
-          " ",
-          new Date(f.updatedAt).toLocaleString()
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", gap: 6, flexShrink: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("button", { type: "button", style: styles.ghostBtn, disabled: busy, onClick: () => onOpen(f.id), children: [
+            busy && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react16.Loader2, { size: 12, className: "spin" }),
+            " ",
+            manage ? chrome.open : chrome.applyTemplate
+          ] }),
+          manage && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", style: { ...styles.iconBtn, ...styles.iconBtnDanger }, disabled: busy, title: chrome.delete, onClick: () => onDelete(f.id), children: /* @__PURE__ */ (0, import_jsx_runtime16.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)),
+      templateState === "error" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { ...styles.libraryRowMeta, color: "var(--fb-danger)", display: "flex", alignItems: "center", gap: 5, marginTop: 4 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react16.AlertCircle, { size: 12 }),
+        " ",
+        chrome.templateLoadFailed
       ] })
-    ] }, f.id)) })
+    ] })
   ] }) });
 }
 
 // src/components/modals/SaveAsModal.tsx
-var import_react7 = require("react");
+var import_react9 = require("react");
 var import_lucide_react17 = require("lucide-react");
 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_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: [
+function SaveAsModal({ chrome, suggestedName, templateState, onSave, onClose }) {
+  const [name, setName] = (0, import_react9.useState)(suggestedName);
+  const saving = templateState === "saving";
+  const canSave = !!name.trim() && !saving;
+  const panelRef = useModalA11y(onClose);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: styles.modalOverlay, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { ref: panelRef, style: { ...styles.modal, maxWidth: 380 }, role: "dialog", "aria-modal": "true", "aria-label": chrome.saveForm, 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_runtime17.jsx)("button", { type: "button", style: styles.iconBtn, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react17.X, { size: 16 }) })
     ] }),
     /* @__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 }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("input", { autoFocus: true, "aria-label": chrome.formName, style: styles.propInput, value: name, onChange: (e) => setName(e.target.value), onKeyDown: (e) => e.key === "Enter" && canSave && onSave(name.trim()) }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("button", { type: "button", style: { ...styles.primaryBtn, width: "100%", justifyContent: "center", marginTop: 14 }, disabled: !canSave, onClick: () => onSave(name.trim()), children: [
+        saving ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react17.Loader2, { size: 14, className: "spin" }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react17.Save, { size: 14 }),
         " ",
         chrome.saveToLibrary
+      ] }),
+      templateState === "error" && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { fontSize: 12, color: "var(--fb-danger)", display: "flex", alignItems: "center", gap: 5, marginTop: 10 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react17.AlertCircle, { size: 12 }),
+        " ",
+        chrome.templateSaveFailed
       ] })
     ] })
   ] }) });
 }
 
+// src/components/modals/ConfirmModal.tsx
+var import_lucide_react18 = require("lucide-react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function ConfirmModal({ chrome, title, message, onConfirm, confirmLabel, tone = "default", onClose }) {
+  const panelRef = useModalA11y(onClose);
+  const confirmStyle = tone === "danger" ? { ...styles.primaryBtn, background: "var(--fb-danger)", borderColor: "var(--fb-danger)" } : styles.primaryBtn;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: styles.modalOverlay, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { ref: panelRef, style: { ...styles.modal, maxWidth: 380 }, role: "alertdialog", "aria-modal": "true", "aria-label": title, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: styles.modalHeader, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { fontWeight: 600, fontSize: 14 }, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", style: styles.iconBtn, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react18.X, { size: 16 }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { padding: 16 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { style: { margin: 0, fontSize: 13, lineHeight: 1.5, color: "var(--fb-ink)" }, children: message }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }, children: onConfirm ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", autoFocus: true, style: styles.ghostBtn, onClick: onClose, children: chrome.cancel }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", style: confirmStyle, onClick: onConfirm, children: confirmLabel ?? chrome.confirm })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", autoFocus: true, style: styles.primaryBtn, onClick: onClose, children: chrome.dismiss }) })
+    ] })
+  ] }) });
+}
+
 // src/styles/globalCss.ts
 var css = `
   * { box-sizing: border-box; }
@@ -2350,20 +2651,14 @@ 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. */
+  /* Cap at viewport height so the widget scrolls internally; dvh upgrade is ignored where unsupported. */
   .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. */
+  /* Toolbar's active-template label is nice-to-have \u2014 drop it first when width is tight. */
+  @media (max-width: 600px) { .fb-template-tag { display: none; } }
+
+  /* Under 720px: Palette/Inspector become drawers over Canvas, toggled by .fb-mobile-bar,
+     tracked by .fb-work-area[data-mobile-panel], dismissed 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); }
@@ -2389,8 +2684,8 @@ var css = `
 `;
 
 // src/FormBuilder.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var FormBuilder = (0, import_react8.forwardRef)(function FormBuilder2({
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var FormBuilder = (0, import_react10.forwardRef)(function FormBuilder2({
   theme: themeOverrideProp,
   language: languageOverride,
   languages = DEFAULT_LANGUAGES,
@@ -2399,24 +2694,40 @@ var FormBuilder = (0, import_react8.forwardRef)(function FormBuilder2({
   features: featuresProp,
   storage: storageProp,
   onSubmit,
-  initialDocument
+  initialDocument,
+  initialMode,
+  onModeChange,
+  onTemplateChange,
+  templateClipboardKey
 }, 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");
+  const [language, setLanguage] = (0, import_react10.useState)(languageOverride || languages[0]?.code || "en");
   const strings = { ...DEFAULT_STRINGS[language] || DEFAULT_STRINGS.en, ...stringsOverride && stringsOverride[language] || {} };
   const chrome = { ...CHROME[language] || CHROME.en, ...chromeOverride && chromeOverride[language] || {} };
   const doc = useFormDocument({ language, chrome });
   const drag = useDragReorder(doc.reorderWithinSection);
-  const [mode, setMode] = (0, import_react8.useState)("build");
-  const [showJson, setShowJson] = (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 [mode, setModeState] = (0, import_react10.useState)(initialMode ?? "build");
+  const setMode = (next) => {
+    setModeState(next);
+    onModeChange?.(next);
+  };
+  (0, import_react10.useEffect)(() => {
+    onModeChange?.(mode);
+  }, []);
+  const [showJson, setShowJson] = (0, import_react10.useState)(false);
+  const [showLibrary, setShowLibrary] = (0, import_react10.useState)(false);
+  const [copied, setCopied] = (0, import_react10.useState)(false);
+  const [templateCopied, setTemplateCopied] = (0, import_react10.useState)(false);
+  const [pastePrompt, setPastePrompt] = (0, import_react10.useState)(false);
+  const clipboard = useTemplateClipboard(templateClipboardKey);
+  const [mobilePanel, setMobilePanel] = (0, import_react10.useState)("none");
   const persistence = usePersistence({
     storage,
     autosave: features.autosave,
+    templateMax: features.templates.max,
+    templateManage: features.templates.manage,
     language,
     chrome,
     document: { title: doc.title, themeOverrides, sections: doc.sections },
@@ -2428,16 +2739,17 @@ var FormBuilder = (0, import_react8.forwardRef)(function FormBuilder2({
       doc.resetToBlank();
       resetTheme();
     },
+    onTemplateChange,
     ensureActiveSection: () => doc.setActiveSectionId((prev) => prev ?? doc.sections[0]?.id ?? null)
   });
-  const jsonDoc = {
+  const jsonDoc = (0, import_react10.useMemo)(() => ({
     version: 5,
     title: doc.title,
     theme,
     themeOverrides,
     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);
+  }), [doc.title, doc.sections, theme, themeOverrides]);
+  const jsonString = (0, import_react10.useMemo)(() => JSON.stringify(jsonDoc, null, 2), [jsonDoc]);
   function copyJson() {
     navigator.clipboard.writeText(jsonString).then(() => {
       setCopied(true);
@@ -2445,17 +2757,31 @@ var FormBuilder = (0, import_react8.forwardRef)(function FormBuilder2({
     }).catch(() => {
     });
   }
-  (0, import_react8.useImperativeHandle)(ref, () => ({
+  function applyDocument(migrated) {
+    if (!migrated) return false;
+    doc.loadDocument(migrated);
+    replaceThemeOverrides(migrated.themeOverrides);
+    return true;
+  }
+  function copyTemplate() {
+    clipboard.copyTemplate(jsonDoc);
+    setTemplateCopied(true);
+    setTimeout(() => setTemplateCopied(false), 1500);
+  }
+  function pasteTemplate() {
+    if (clipboard.readTemplate()) setPastePrompt(true);
+  }
+  (0, import_react10.useImperativeHandle)(ref, () => ({
     getDocument: () => jsonDoc,
     exportJson: () => jsonString,
     loadDocument: (raw) => {
-      const migrated = migrateDocument(raw);
-      if (!migrated) return;
-      doc.loadDocument(migrated);
-      replaceThemeOverrides(migrated.themeOverrides);
-    }
+      applyDocument(migrateDocument(raw));
+    },
+    getTemplate: () => ({ __fpb: "template", v: TEMPLATE_FORMAT, document: jsonDoc }),
+    loadTemplate: (input) => applyDocument(parseTemplate(typeof input === "string" ? input : JSON.stringify(input)))
     // 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 = {
@@ -2479,9 +2805,9 @@ var FormBuilder = (0, import_react8.forwardRef)(function FormBuilder2({
     "--fb-space-panel": `${theme.layout.panelPadding}px`,
     "--fb-space-ticket": `${theme.layout.ticketPadding}px`
   };
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "fb-root", style: rootStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("style", { children: css }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       Toolbar,
       {
         title: doc.title,
@@ -2489,24 +2815,31 @@ var FormBuilder = (0, import_react8.forwardRef)(function FormBuilder2({
         languages,
         mode,
         saveState: persistence.saveState,
+        templateState: persistence.templateState,
+        activeTemplateTitle: persistence.activeTemplateTitle,
+        templateDirty: persistence.isTemplateDirty,
         chrome,
         features,
         savedFormsCount: persistence.savedForms.length,
+        clipboardReady: clipboard.hasClipboard,
+        templateCopied,
         onTitleChange: doc.updateTitle,
         onLanguageChange: setLanguage,
         onModeChange: setMode,
         onNewForm: persistence.newForm,
         onOpenLibrary: () => setShowLibrary(true),
         onSaveExisting: persistence.saveExisting,
-        onOpenJson: () => setShowJson(true)
+        onOpenJson: () => setShowJson(true),
+        onCopyTemplate: copyTemplate,
+        onPasteTemplate: pasteTemplate
       }
     ),
-    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)(
+    persistence.loadingDraft ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: styles.loadingScreen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react19.Loader2, { size: 20, className: "spin" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { style: { marginTop: 8, fontSize: 13, color: "var(--fb-muted)" }, children: chrome.loadingDraft })
+    ] }) : mode === "build" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "fb-work-area", style: styles.workArea, "data-mobile-panel": mobilePanel, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "fb-mobile-bar", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
           "button",
           {
             type: "button",
@@ -2514,13 +2847,13 @@ var FormBuilder = (0, import_react8.forwardRef)(function FormBuilder2({
             "aria-pressed": mobilePanel === "palette",
             onClick: () => setMobilePanel((p) => p === "palette" ? "none" : "palette"),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react18.Menu, { size: 14 }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react19.Menu, { size: 14 }),
               " ",
               chrome.paletteTabBlocks
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
           "button",
           {
             type: "button",
@@ -2528,16 +2861,16 @@ var FormBuilder = (0, import_react8.forwardRef)(function FormBuilder2({
             "aria-pressed": mobilePanel === "inspector",
             onClick: () => setMobilePanel((p) => p === "inspector" ? "none" : "inspector"),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react18.SlidersHorizontal, { size: 14 }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react19.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)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "fb-canvas-area", style: styles.workArea, children: [
+        mobilePanel !== "none" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "fb-mobile-backdrop", onClick: () => setMobilePanel("none") }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           Palette,
           {
             activeSectionLabel,
@@ -2547,13 +2880,14 @@ var FormBuilder = (0, import_react8.forwardRef)(function FormBuilder2({
               setMobilePanel("none");
             },
             features,
+            fieldCount,
             theme,
             updateThemeColor,
             updateThemeLayout,
             resetTheme
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           Canvas,
           {
             sections: doc.sections,
@@ -2585,7 +2919,7 @@ var FormBuilder = (0, import_react8.forwardRef)(function FormBuilder2({
             getDragHandleProps: drag.getDragHandleProps
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           Inspector,
           {
             selected: doc.selected,
@@ -2600,7 +2934,7 @@ var FormBuilder = (0, import_react8.forwardRef)(function FormBuilder2({
           }
         )
       ] })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       PreviewPane,
       {
         title: doc.title,
@@ -2610,32 +2944,59 @@ var FormBuilder = (0, import_react8.forwardRef)(function FormBuilder2({
         strings,
         chrome,
         baseMaxWidth: theme.layout.maxWidth,
+        features,
         onSubmit
       }
     ),
-    showJson && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(JsonModal, { chrome, jsonString, copied, onCopy: copyJson, onClose: () => setShowJson(false) }),
-    showLibrary && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    showJson && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(JsonModal, { chrome, jsonString, copied, onCopy: copyJson, onClose: () => setShowJson(false) }),
+    showLibrary && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       TemplatesModal,
       {
         chrome,
         savedForms: persistence.savedForms,
         currentFormId: persistence.currentFormId,
+        manage: features.templates.manage,
+        templateState: persistence.templateState,
         onOpen: async (id) => {
-          await persistence.loadForm(id);
-          setShowLibrary(false);
+          if (await persistence.loadForm(id)) setShowLibrary(false);
         },
         onDelete: persistence.deleteForm,
         onClose: () => setShowLibrary(false)
       }
     ),
-    persistence.saveAsPrompt && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    persistence.saveAsPrompt && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       SaveAsModal,
       {
         chrome,
         suggestedName: persistence.saveAsPrompt.suggestedName,
+        templateState: persistence.templateState,
         onSave: persistence.saveAs,
         onClose: persistence.dismissSaveAsPrompt
       }
+    ),
+    pastePrompt && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      ConfirmModal,
+      {
+        chrome,
+        title: chrome.pasteTemplate,
+        message: chrome.pasteTemplateConfirm,
+        confirmLabel: chrome.confirmReplace,
+        tone: "danger",
+        onConfirm: () => {
+          applyDocument(clipboard.readTemplate());
+          setPastePrompt(false);
+        },
+        onClose: () => setPastePrompt(false)
+      }
+    ),
+    persistence.notice && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      ConfirmModal,
+      {
+        chrome,
+        title: persistence.notice.title,
+        message: persistence.notice.message,
+        onClose: persistence.dismissNotice
+      }
     )
   ] });
 });
@@ -2657,9 +3018,16 @@ var DARK_THEME = {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CLIPBOARD_KEY,
   DARK_THEME,
   DEFAULT_THEME,
+  DRAFT_KEY,
   FormBuilder,
-  localStorageAdapter
+  INDEX_KEY,
+  formKey,
+  localStorageAdapter,
+  parseTemplate,
+  savedFormId,
+  serializeTemplate
 });
 //# sourceMappingURL=index.cjs.map