form-page-builder 2.1.0 → 2.3.0

package/dist/index.js

@@ -1,8 +1,8 @@
 "use client";
 
 // src/FormBuilder.tsx
-import { forwardRef, useEffect as useEffect2, useImperativeHandle, useState as useState8 } from "react";
-import { Loader2 as Loader22, Menu, SlidersHorizontal } from "lucide-react";
+import { forwardRef, useEffect as useEffect4, useImperativeHandle, useMemo as useMemo2, useState as useState9 } from "react";
+import { Loader2 as Loader24, Menu, SlidersHorizontal } from "lucide-react";
 
 // src/constants/fieldTypes.ts
 import {
@@ -104,6 +104,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 = {
@@ -179,16 +180,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",
@@ -315,16 +333,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",
@@ -380,6 +415,7 @@ var CHROME = {
     spacingTicketPadding: "\u30D5\u30A3\u30FC\u30EB\u30C9\u5185\u4F59\u767D"
   }
 };
+CHROME.ja;
 
 // src/lib/bilingual.ts
 function bi(en = "", ja = "") {
@@ -522,12 +558,8 @@ function defaultSection(titleEn = "") {
   return { id: genSectionId(), title: bi(titleEn, ""), background: "", collapsed: false, fields: [] };
 }
 
-// src/lib/submittable.ts
-function sectionHasFormFields(section) {
-  return section.fields.some((f) => !getMeta(f.type).isContent);
-}
-
 // src/lib/migrate.ts
+var DOCUMENT_VERSION = 5;
 function migrateField(field) {
   let f = { ...field };
   if (LEGACY_INPUT_TYPES.includes(f.type)) f = { ...f, type: "input", inputType: f.type };
@@ -558,25 +590,6 @@ function migrateField(field) {
 function migrateFields(fields) {
   return (fields || []).map(migrateField);
 }
-function synthesizeButtonField(label, style, scope) {
-  const resolvedLabel = typeof label === "string" && label ? bi(label) : label && typeof label === "object" && (label.en || label.ja) ? label : bi("Submit", "");
-  return {
-    id: nextId(),
-    type: "button",
-    label: resolvedLabel,
-    hideLabel: false,
-    width: "1/1",
-    verticalAlign: "top",
-    labelPosition: "top",
-    showIcon: false,
-    displayIcon: "Type",
-    action: "submit",
-    submitScope: scope,
-    buttonStyle: style || { color: "", size: "md" },
-    href: "",
-    target: "_self"
-  };
-}
 function migrateDocument(raw) {
   if (!raw) return null;
   const title = typeof raw.title === "string" ? bi(raw.title) : raw.title || bi();
@@ -593,32 +606,36 @@ function migrateDocument(raw) {
   } else {
     sections = [{ ...defaultSection(), fields: migrateFields(raw.fields || []) }];
   }
-  const legacy = raw.version === void 0 || raw.version < 5;
-  if (legacy) {
-    resyncIdCounter(sections.flatMap((s) => s.fields));
-    const submitMode = raw.submitMode === "perSection" ? "perSection" : "combined";
-    const submitLabel = raw.submitLabel;
-    const submitStyle = raw.submitStyle || { color: "", size: "md" };
-    if (submitMode === "perSection" && raw.sections) {
-      sections = sections.map((s, i) => {
-        if (!sectionHasFormFields(s)) return s;
-        const rawSection = raw.sections[i] || {};
-        const label = rawSection.submitLabel || submitLabel;
-        const style = rawSection.submitStyle || submitStyle;
-        return { ...s, fields: [...s.fields, synthesizeButtonField(label, style, "section")] };
-      });
-    } else if (sections.some(sectionHasFormFields)) {
-      const lastIdx = sections.length - 1;
-      sections = sections.map((s, i) => i === lastIdx ? { ...s, fields: [...s.fields, synthesizeButtonField(submitLabel, submitStyle, "form")] } : s);
-    }
-  }
   return { title, themeOverrides, sections };
 }
 
+// src/lib/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,
+  formTitle: false,
+  templates: { enabled: true, manage: true, max: DEFAULT_MAX_TEMPLATES },
+  templateClipboard: true,
   newForm: true,
   autosave: true,
   jsonView: true,
@@ -629,15 +646,24 @@ var DEFAULT_FEATURES = {
   contentBlocks: true,
   fieldTypes: true,
   sections: 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) {
@@ -648,7 +674,7 @@ function isFieldTypeEnabled(features, type) {
 }
 
 // src/hooks/useTheme.ts
-import { useState } from "react";
+import { useMemo, useState } from "react";
 
 // src/theme/defaultTheme.ts
 var DEFAULT_THEME = {
@@ -667,17 +693,17 @@ var DEFAULT_THEME = {
 
 // src/hooks/useTheme.ts
 function useTheme(themeOverrideProp) {
-  const baseTheme = {
+  const [themeOverrides, setThemeOverrides] = useState({});
+  const baseTheme = useMemo(() => ({
     ...DEFAULT_THEME,
     ...themeOverrideProp || {},
     layout: { ...DEFAULT_THEME.layout, ...themeOverrideProp && themeOverrideProp.layout || {} }
-  };
-  const [themeOverrides, setThemeOverrides] = useState({});
-  const theme = {
+  }), [themeOverrideProp]);
+  const theme = useMemo(() => ({
     ...baseTheme,
     ...themeOverrides,
     layout: { ...baseTheme.layout, ...themeOverrides.layout || {} }
-  };
+  }), [baseTheme, themeOverrides]);
   function updateThemeColor(key, value) {
     setThemeOverrides((prev) => ({ ...prev, [key]: value }));
   }
@@ -876,35 +902,49 @@ import { useEffect, useRef, useState as useState3 } from "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] = useState3(null);
   const [loadingDraft, setLoadingDraft] = useState3(true);
   const [saveState, setSaveState] = useState3("idle");
+  const [templateState, setTemplateState] = useState3("idle");
   const [savedForms, setSavedForms] = useState3([]);
   const [saveAsPrompt, setSaveAsPrompt] = useState3(null);
+  const [notice, setNotice] = useState3(null);
   const autosaveTimer = useRef(null);
   const hasLoadedOnce = useRef(false);
+  const savedSnapshot = 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([]);
     }
   }
@@ -928,12 +968,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);
@@ -948,86 +997,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({ version: DOCUMENT_VERSION, ...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({ version: DOCUMENT_VERSION, ...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({ version: DOCUMENT_VERSION, ...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,
@@ -1035,15 +1123,64 @@ function usePersistence({
     refreshLibrary,
     newForm,
     saveAsPrompt,
-    dismissSaveAsPrompt
+    dismissSaveAsPrompt,
+    notice,
+    dismissNotice: () => setNotice(null)
   };
 }
 
+// src/hooks/useTemplateClipboard.ts
+import { useCallback, useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "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 = useRef2(clipboardKey);
+  keyRef.current = clipboardKey;
+  const [hasClipboard, setHasClipboard] = useState4(false);
+  const refresh = useCallback(() => {
+    setHasClipboard(parseTemplate(readKey(keyRef.current)) !== null);
+  }, []);
+  useEffect2(() => {
+    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 = useCallback((document2) => {
+    const str = serializeTemplate(document2);
+    try {
+      window.localStorage?.setItem(keyRef.current, str);
+    } catch {
+    }
+    notifySameTab();
+    refresh();
+  }, [refresh]);
+  const readTemplate = useCallback(() => {
+    return parseTemplate(readKey(keyRef.current));
+  }, []);
+  return { hasClipboard, copyTemplate, readTemplate };
+}
+
 // src/hooks/useDragReorder.ts
-import { useRef as useRef2, useState as useState4 } from "react";
+import { useRef as useRef3, useState as useState5 } from "react";
 function useDragReorder(reorderWithinSection) {
-  const dragRef = useRef2({ sectionId: null, index: null });
-  const [dragOverKey, setDragOverKey] = useState4(null);
+  const dragRef = useRef3({ sectionId: null, index: null });
+  const [dragOverKey, setDragOverKey] = useState5(null);
   function getDropZoneHandlers(sectionId, index) {
     const dragKey = `${sectionId}:${index}`;
     return {
@@ -1071,13 +1208,13 @@ function useDragReorder(reorderWithinSection) {
 }
 
 // src/components/Toolbar.tsx
-import { Loader2, AlertCircle, Pencil, Eye, FilePlus2, FolderOpen, Save, Code2 } from "lucide-react";
+import { Loader2, AlertCircle, Pencil, Eye, FilePlus2, FolderOpen, Save, Code2, ClipboardCopy, ClipboardPaste, Check } from "lucide-react";
 
 // src/styles/styles.ts
 var styles = {
   app: { fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif", background: "var(--fb-canvas)", borderRadius: 12, overflow: "hidden", border: "1px solid var(--fb-border)", color: "var(--fb-ink)", 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" },
@@ -1087,6 +1224,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 },
@@ -1223,21 +1362,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__ */ jsxs2("div", { style: styles.toolbar, children: [
     /* @__PURE__ */ jsxs2("div", { style: styles.toolbarLeft, children: [
       /* @__PURE__ */ jsx2("div", { style: styles.logoMark, children: "FB" }),
-      features.naming ? /* @__PURE__ */ jsx2("input", { value: t(title, language), onChange: (e) => onTitleChange(e.target.value), style: styles.titleInput, "aria-label": "Form title" }) : /* @__PURE__ */ jsx2("span", { style: styles.titleInput, children: t(title, language) })
+      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) }),
+      templateState === "loading" ? /* @__PURE__ */ jsxs2("span", { style: styles.saveStatus, children: [
+        /* @__PURE__ */ jsx2(Loader2, { size: 12, className: "spin" }),
+        " ",
+        chrome.templateLoading
+      ] }) : activeTemplateTitle && /* @__PURE__ */ jsxs2("span", { className: "fb-template-tag", style: styles.templateTag, title: chrome.templateLabel(activeTemplateTitle), children: [
+        /* @__PURE__ */ jsx2("span", { style: { overflow: "hidden", textOverflow: "ellipsis" }, children: chrome.templateLabel(activeTemplateTitle) }),
+        templateDirty && /* @__PURE__ */ jsx2("span", { style: styles.currentBadge, children: chrome.templateEdited })
+      ] })
     ] }),
     /* @__PURE__ */ jsxs2("div", { style: styles.toolbarRight, children: [
       /* @__PURE__ */ jsxs2("span", { style: styles.saveStatus, children: [
@@ -1270,20 +1424,20 @@ function Toolbar({
           chrome.preview
         ] })
       ] }),
-      (features.newForm || features.templates) && /* @__PURE__ */ jsx2("div", { style: styles.toolbarDivider }),
+      (features.newForm || features.templates.enabled) && /* @__PURE__ */ jsx2("div", { style: styles.toolbarDivider }),
       features.newForm && /* @__PURE__ */ jsxs2("button", { style: styles.ghostBtn, onClick: onNewForm, title: chrome.startNewForm, children: [
         /* @__PURE__ */ jsx2(FilePlus2, { size: 14 }),
         " ",
         chrome.newForm
       ] }),
-      features.templates && /* @__PURE__ */ jsxs2(Fragment, { children: [
+      features.templates.enabled && /* @__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: [
+        features.templates.manage && /* @__PURE__ */ jsxs2("button", { style: styles.primaryBtn, onClick: onSaveExisting, title: chrome.saveToLibraryTitle, children: [
           /* @__PURE__ */ jsx2(Save, { size: 14 }),
           " ",
           chrome.save
@@ -1293,13 +1447,17 @@ function Toolbar({
         /* @__PURE__ */ jsx2(Code2, { size: 14 }),
         " ",
         chrome.viewJson
+      ] }),
+      features.templateClipboard && /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx2("button", { style: styles.toolbarIconBtn, onClick: onCopyTemplate, title: chrome.copyTemplateTitle, "aria-label": chrome.copyTemplate, children: templateCopied ? /* @__PURE__ */ jsx2(Check, { size: 14 }) : /* @__PURE__ */ jsx2(ClipboardCopy, { size: 14 }) }),
+        /* @__PURE__ */ jsx2("button", { style: styles.toolbarIconBtn, onClick: onPasteTemplate, disabled: !clipboardReady, title: chrome.pasteTemplateTitle, "aria-label": chrome.pasteTemplate, children: /* @__PURE__ */ jsx2(ClipboardPaste, { size: 14 }) })
       ] })
     ] })
   ] });
 }
 
 // src/components/Palette.tsx
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 import { Plus } from "lucide-react";
 
 // src/components/Segmented.tsx
@@ -1397,7 +1555,7 @@ function Palette({
   resetTheme,
   fieldCount
 }) {
-  const [tab, setTab] = useState5("blocks");
+  const [tab, setTab] = useState6("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;
@@ -1710,6 +1868,8 @@ function FieldTicket({
     {
       ...dropZoneHandlers,
       onClick: onSelect,
+      className: `fb-field fb-field--${field.type} fb-field--${field.id}`,
+      "data-field-id": field.id,
       style: {
         ...styles.ticket,
         flex: `1 1 calc(${widthPct} - 10px)`,
@@ -1806,7 +1966,7 @@ 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: [
-            features.sections && !section.collapsed && /* @__PURE__ */ jsxs8("div", { style: styles.swatchRow, children: [
+            features.sectionBackground && !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 })
             ] }),
@@ -2127,7 +2287,7 @@ function InspectorBody({ selected, language, chrome, features, onUpdateField, on
 }
 
 // src/components/PreviewPane.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { PartyPopper, X as X2, CircleAlert as CircleAlert2 } from "lucide-react";
 
 // src/lib/validate.ts
@@ -2176,10 +2336,10 @@ 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, features, onSubmit }) {
-  const [device, setDevice] = useState6("laptop");
-  const [errors, setErrors] = useState6({});
-  const [submitted, setSubmitted] = useState6(null);
-  const [attemptedButtonId, setAttemptedButtonId] = useState6(null);
+  const [device, setDevice] = useState7("laptop");
+  const [errors, setErrors] = useState7({});
+  const [submitted, setSubmitted] = useState7(null);
+  const [attemptedButtonId, setAttemptedButtonId] = useState7(null);
   const deviceOptions = buildDeviceOptions(baseMaxWidth, chrome);
   const maxWidth = (deviceOptions.find((d) => d.value === device) || deviceOptions[0]).maxWidth;
   const allFields = sections.flatMap((s) => s.fields);
@@ -2239,16 +2399,16 @@ 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: [
       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) }),
+      /* @__PURE__ */ jsxs12("div", { className: "fb-form", style: { ...styles.previewCard, maxWidth, width: "100%" }, children: [
+        features.formTitle && /* @__PURE__ */ jsx14("h2", { style: styles.previewTitle, children: t(title, language) }),
         allFields.length === 0 && /* @__PURE__ */ jsx14("p", { style: { color: "var(--fb-muted)", fontSize: 14 }, children: strings.addFieldsHint }),
         sections.map((section) => {
-          return /* @__PURE__ */ jsxs12("div", { style: { background: section.background || "transparent", padding: section.background ? 16 : 0, borderRadius: section.background ? 10 : 0, marginBottom: "var(--fb-space-section)" }, children: [
+          return /* @__PURE__ */ jsxs12("div", { className: "fb-section", "data-section-id": section.id, style: { background: section.background || "transparent", padding: section.background ? 16 : 0, borderRadius: section.background ? 10 : 0, marginBottom: "var(--fb-space-section)" }, children: [
             t(section.title, language) && /* @__PURE__ */ jsx14("h3", { style: styles.sectionRuntimeTitle, children: t(section.title, language) }),
             /* @__PURE__ */ jsx14("div", { style: styles.previewGrid, children: section.fields.map((field) => {
               const width = effectiveWidth(field.width, device);
               const flexBasis = `1 1 calc(${WIDTH_PERCENT[width]} - 14px)`;
-              return /* @__PURE__ */ jsxs12("div", { style: { flex: flexBasis, minWidth: 0, alignSelf: ALIGN_MAP[field.verticalAlign || "top"] }, children: [
+              return /* @__PURE__ */ jsxs12("div", { className: `fb-field fb-field--${field.type} fb-field--${field.id}`, "data-field-id": field.id, style: { flex: flexBasis, minWidth: 0, alignSelf: ALIGN_MAP[field.verticalAlign || "top"] }, children: [
                 /* @__PURE__ */ jsx14(FieldBlock, { field, lang: language, onFieldChange, strings, chrome, error: errors[field.id], onButtonAction: handleButtonAction }),
                 field.type === "button" && field.id === attemptedButtonId && Object.keys(errors).length > 0 && /* @__PURE__ */ jsxs12("p", { style: styles.formErrorNote, children: [
                   /* @__PURE__ */ jsx14(CircleAlert2, { size: 13 }),
@@ -2283,18 +2443,67 @@ function PreviewPane({ title, sections, onFieldChange, language, strings, chrome
 }
 
 // src/components/modals/JsonModal.tsx
-import { Check, ClipboardCopy, X as X3 } from "lucide-react";
+import { Check as Check2, ClipboardCopy as ClipboardCopy2, X as X3 } from "lucide-react";
+
+// src/hooks/useModalA11y.ts
+import { useEffect as useEffect3, useRef as useRef4 } from "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 = useRef4(null);
+  const onCloseRef = useRef4(onClose);
+  onCloseRef.current = onClose;
+  useEffect3(() => {
+    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
 import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 function JsonModal({ chrome, jsonString, copied, onCopy, onClose }) {
-  return /* @__PURE__ */ jsx15("div", { style: styles.modalOverlay, onClick: onClose, children: /* @__PURE__ */ jsxs13("div", { style: styles.modal, onClick: (e) => e.stopPropagation(), children: [
+  const panelRef = useModalA11y(onClose);
+  return /* @__PURE__ */ jsx15("div", { style: styles.modalOverlay, onClick: onClose, children: /* @__PURE__ */ jsxs13("div", { ref: panelRef, style: styles.modal, role: "dialog", "aria-modal": "true", "aria-label": chrome.formJson, onClick: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ jsxs13("div", { style: styles.modalHeader, children: [
       /* @__PURE__ */ jsx15("span", { style: { fontWeight: 600, fontSize: 14 }, children: chrome.formJson }),
       /* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: 8 }, children: [
-        /* @__PURE__ */ jsxs13("button", { style: styles.ghostBtn, onClick: onCopy, children: [
-          copied ? /* @__PURE__ */ jsx15(Check, { size: 14 }) : /* @__PURE__ */ jsx15(ClipboardCopy, { size: 14 }),
+        /* @__PURE__ */ jsxs13("button", { type: "button", style: styles.ghostBtn, onClick: onCopy, children: [
+          copied ? /* @__PURE__ */ jsx15(Check2, { size: 14 }) : /* @__PURE__ */ jsx15(ClipboardCopy2, { size: 14 }),
           copied ? chrome.copied : chrome.copy
         ] }),
-        /* @__PURE__ */ jsx15("button", { style: styles.iconBtn, onClick: onClose, children: /* @__PURE__ */ jsx15(X3, { size: 16 }) })
+        /* @__PURE__ */ jsx15("button", { type: "button", style: styles.iconBtn, onClick: onClose, children: /* @__PURE__ */ jsx15(X3, { size: 16 }) })
       ] })
     ] }),
     /* @__PURE__ */ jsx15("pre", { style: styles.jsonPre, children: jsonString })
@@ -2302,57 +2511,99 @@ function JsonModal({ chrome, jsonString, copied, onCopy, onClose }) {
 }
 
 // src/components/modals/TemplatesModal.tsx
-import { Trash2 as Trash24, X as X4 } from "lucide-react";
+import { AlertCircle as AlertCircle2, Loader2 as Loader22, Trash2 as Trash24, X as X4 } from "lucide-react";
 import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
-function TemplatesModal({ chrome, savedForms, currentFormId, onOpen, onDelete, onClose }) {
-  return /* @__PURE__ */ jsx16("div", { style: styles.modalOverlay, onClick: onClose, children: /* @__PURE__ */ jsxs14("div", { style: styles.modal, onClick: (e) => e.stopPropagation(), children: [
+function TemplatesModal({ chrome, savedForms, currentFormId, manage, templateState, onOpen, onDelete, onClose }) {
+  const busy = templateState === "loading";
+  const panelRef = useModalA11y(onClose);
+  return /* @__PURE__ */ jsx16("div", { style: styles.modalOverlay, onClick: onClose, children: /* @__PURE__ */ jsxs14("div", { ref: panelRef, style: styles.modal, role: "dialog", "aria-modal": "true", "aria-label": chrome.templates, onClick: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ jsxs14("div", { style: styles.modalHeader, children: [
       /* @__PURE__ */ jsx16("span", { style: { fontWeight: 600, fontSize: 14 }, children: chrome.templates }),
-      /* @__PURE__ */ jsx16("button", { style: styles.iconBtn, onClick: onClose, children: /* @__PURE__ */ jsx16(X4, { size: 16 }) })
+      /* @__PURE__ */ jsx16("button", { type: "button", style: styles.iconBtn, onClick: onClose, children: /* @__PURE__ */ jsx16(X4, { size: 16 }) })
     ] }),
-    /* @__PURE__ */ jsx16("div", { style: styles.libraryBody, children: savedForms.length === 0 ? /* @__PURE__ */ jsx16("div", { style: styles.inspectorEmpty, children: chrome.noTemplates }) : savedForms.map((f) => /* @__PURE__ */ jsxs14("div", { style: styles.libraryRow, children: [
-      /* @__PURE__ */ jsxs14("div", { style: { minWidth: 0 }, children: [
-        /* @__PURE__ */ jsxs14("div", { style: styles.libraryRowTitle, children: [
-          f.title,
-          f.id === currentFormId && /* @__PURE__ */ jsx16("span", { style: styles.currentBadge, children: chrome.current })
+    /* @__PURE__ */ jsxs14("div", { style: styles.libraryBody, children: [
+      savedForms.length === 0 ? /* @__PURE__ */ jsx16("div", { style: styles.inspectorEmpty, children: manage ? chrome.noTemplates : chrome.noTemplatesReadonly }) : savedForms.map((f) => /* @__PURE__ */ jsxs14("div", { style: styles.libraryRow, children: [
+        /* @__PURE__ */ jsxs14("div", { style: { minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxs14("div", { style: styles.libraryRowTitle, children: [
+            f.title,
+            f.id === currentFormId && /* @__PURE__ */ jsx16("span", { style: styles.currentBadge, children: chrome.current })
+          ] }),
+          /* @__PURE__ */ jsxs14("div", { style: styles.libraryRowMeta, children: [
+            chrome.updated,
+            " ",
+            new Date(f.updatedAt).toLocaleString()
+          ] })
         ] }),
-        /* @__PURE__ */ jsxs14("div", { style: styles.libraryRowMeta, children: [
-          chrome.updated,
-          " ",
-          new Date(f.updatedAt).toLocaleString()
+        /* @__PURE__ */ jsxs14("div", { style: { display: "flex", gap: 6, flexShrink: 0 }, children: [
+          /* @__PURE__ */ jsxs14("button", { type: "button", style: styles.ghostBtn, disabled: busy, onClick: () => onOpen(f.id), children: [
+            busy && /* @__PURE__ */ jsx16(Loader22, { size: 12, className: "spin" }),
+            " ",
+            manage ? chrome.open : chrome.applyTemplate
+          ] }),
+          manage && /* @__PURE__ */ jsx16("button", { type: "button", style: { ...styles.iconBtn, ...styles.iconBtnDanger }, disabled: busy, title: chrome.delete, onClick: () => onDelete(f.id), children: /* @__PURE__ */ jsx16(Trash24, { size: 13 }) })
         ] })
-      ] }),
-      /* @__PURE__ */ jsxs14("div", { style: { display: "flex", gap: 6, flexShrink: 0 }, children: [
-        /* @__PURE__ */ jsx16("button", { style: styles.ghostBtn, onClick: () => onOpen(f.id), children: chrome.open }),
-        /* @__PURE__ */ jsx16("button", { style: { ...styles.iconBtn, ...styles.iconBtnDanger }, title: chrome.delete, onClick: () => onDelete(f.id), children: /* @__PURE__ */ jsx16(Trash24, { size: 13 }) })
+      ] }, f.id)),
+      templateState === "error" && /* @__PURE__ */ jsxs14("div", { style: { ...styles.libraryRowMeta, color: "var(--fb-danger)", display: "flex", alignItems: "center", gap: 5, marginTop: 4 }, children: [
+        /* @__PURE__ */ jsx16(AlertCircle2, { size: 12 }),
+        " ",
+        chrome.templateLoadFailed
       ] })
-    ] }, f.id)) })
+    ] })
   ] }) });
 }
 
 // src/components/modals/SaveAsModal.tsx
-import { useState as useState7 } from "react";
-import { Save as Save2, X as X5 } from "lucide-react";
+import { useState as useState8 } from "react";
+import { AlertCircle as AlertCircle3, Loader2 as Loader23, 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, maxWidth: 380 }, onClick: (e) => e.stopPropagation(), children: [
+function SaveAsModal({ chrome, suggestedName, templateState, onSave, onClose }) {
+  const [name, setName] = useState8(suggestedName);
+  const saving = templateState === "saving";
+  const canSave = !!name.trim() && !saving;
+  const panelRef = useModalA11y(onClose);
+  return /* @__PURE__ */ jsx17("div", { style: styles.modalOverlay, onClick: onClose, children: /* @__PURE__ */ jsxs15("div", { ref: panelRef, style: { ...styles.modal, maxWidth: 380 }, role: "dialog", "aria-modal": "true", "aria-label": chrome.saveForm, onClick: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ jsxs15("div", { style: styles.modalHeader, children: [
       /* @__PURE__ */ jsx17("span", { style: { fontWeight: 600, fontSize: 14 }, children: chrome.saveForm }),
-      /* @__PURE__ */ jsx17("button", { style: styles.iconBtn, onClick: onClose, children: /* @__PURE__ */ jsx17(X5, { size: 16 }) })
+      /* @__PURE__ */ jsx17("button", { type: "button", style: styles.iconBtn, onClick: onClose, children: /* @__PURE__ */ jsx17(X5, { size: 16 }) })
     ] }),
     /* @__PURE__ */ jsxs15("div", { style: { padding: 16 }, children: [
       /* @__PURE__ */ jsx17("label", { style: styles.propLabel, children: chrome.formName }),
-      /* @__PURE__ */ jsx17("input", { autoFocus: true, style: styles.propInput, value: name, onChange: (e) => setName(e.target.value), onKeyDown: (e) => e.key === "Enter" && name.trim() && onSave(name.trim()) }),
-      /* @__PURE__ */ jsxs15("button", { style: { ...styles.primaryBtn, width: "100%", justifyContent: "center", marginTop: 14 }, disabled: !name.trim(), onClick: () => onSave(name.trim()), children: [
-        /* @__PURE__ */ jsx17(Save2, { size: 14 }),
+      /* @__PURE__ */ jsx17("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__ */ jsxs15("button", { type: "button", style: { ...styles.primaryBtn, width: "100%", justifyContent: "center", marginTop: 14 }, disabled: !canSave, onClick: () => onSave(name.trim()), children: [
+        saving ? /* @__PURE__ */ jsx17(Loader23, { size: 14, className: "spin" }) : /* @__PURE__ */ jsx17(Save2, { size: 14 }),
         " ",
         chrome.saveToLibrary
+      ] }),
+      templateState === "error" && /* @__PURE__ */ jsxs15("div", { style: { fontSize: 12, color: "var(--fb-danger)", display: "flex", alignItems: "center", gap: 5, marginTop: 10 }, children: [
+        /* @__PURE__ */ jsx17(AlertCircle3, { size: 12 }),
+        " ",
+        chrome.templateSaveFailed
       ] })
     ] })
   ] }) });
 }
 
+// src/components/modals/ConfirmModal.tsx
+import { X as X6 } from "lucide-react";
+import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs16 } from "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__ */ jsx18("div", { style: styles.modalOverlay, onClick: onClose, children: /* @__PURE__ */ jsxs16("div", { ref: panelRef, style: { ...styles.modal, maxWidth: 380 }, role: "alertdialog", "aria-modal": "true", "aria-label": title, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs16("div", { style: styles.modalHeader, children: [
+      /* @__PURE__ */ jsx18("span", { style: { fontWeight: 600, fontSize: 14 }, children: title }),
+      /* @__PURE__ */ jsx18("button", { type: "button", style: styles.iconBtn, onClick: onClose, children: /* @__PURE__ */ jsx18(X6, { size: 16 }) })
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { style: { padding: 16 }, children: [
+      /* @__PURE__ */ jsx18("p", { style: { margin: 0, fontSize: 13, lineHeight: 1.5, color: "var(--fb-ink)" }, children: message }),
+      /* @__PURE__ */ jsx18("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }, children: onConfirm ? /* @__PURE__ */ jsxs16(Fragment6, { children: [
+        /* @__PURE__ */ jsx18("button", { type: "button", autoFocus: true, style: styles.ghostBtn, onClick: onClose, children: chrome.cancel }),
+        /* @__PURE__ */ jsx18("button", { type: "button", style: confirmStyle, onClick: onConfirm, children: confirmLabel ?? chrome.confirm })
+      ] }) : /* @__PURE__ */ jsx18("button", { type: "button", autoFocus: true, style: styles.primaryBtn, onClick: onClose, children: chrome.dismiss }) })
+    ] })
+  ] }) });
+}
+
 // src/styles/globalCss.ts
 var css = `
   * { box-sizing: border-box; }
@@ -2360,20 +2611,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); }
@@ -2399,7 +2644,7 @@ var css = `
 `;
 
 // src/FormBuilder.tsx
-import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
 var FormBuilder = forwardRef(function FormBuilder2({
   theme: themeOverrideProp,
   language: languageOverride,
@@ -2411,31 +2656,38 @@ var FormBuilder = forwardRef(function FormBuilder2({
   onSubmit,
   initialDocument,
   initialMode,
-  onModeChange
+  onModeChange,
+  onTemplateChange,
+  templateClipboardKey
 }, 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");
+  const [language, setLanguage] = useState9(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, setModeState] = useState8(initialMode ?? "build");
+  const [mode, setModeState] = useState9(initialMode ?? "build");
   const setMode = (next) => {
     setModeState(next);
     onModeChange?.(next);
   };
-  useEffect2(() => {
+  useEffect4(() => {
     onModeChange?.(mode);
   }, []);
-  const [showJson, setShowJson] = useState8(false);
-  const [showLibrary, setShowLibrary] = useState8(false);
-  const [copied, setCopied] = useState8(false);
-  const [mobilePanel, setMobilePanel] = useState8("none");
+  const [showJson, setShowJson] = useState9(false);
+  const [showLibrary, setShowLibrary] = useState9(false);
+  const [copied, setCopied] = useState9(false);
+  const [templateCopied, setTemplateCopied] = useState9(false);
+  const [pastePrompt, setPastePrompt] = useState9(false);
+  const clipboard = useTemplateClipboard(templateClipboardKey);
+  const [mobilePanel, setMobilePanel] = useState9("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 },
@@ -2447,16 +2699,17 @@ var FormBuilder = forwardRef(function FormBuilder2({
       doc.resetToBlank();
       resetTheme();
     },
+    onTemplateChange,
     ensureActiveSection: () => doc.setActiveSectionId((prev) => prev ?? doc.sections[0]?.id ?? null)
   });
-  const jsonDoc = {
-    version: 5,
+  const jsonDoc = useMemo2(() => ({
+    version: DOCUMENT_VERSION,
     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 = useMemo2(() => JSON.stringify(jsonDoc, null, 2), [jsonDoc]);
   function copyJson() {
     navigator.clipboard.writeText(jsonString).then(() => {
       setCopied(true);
@@ -2464,15 +2717,28 @@ var FormBuilder = forwardRef(function FormBuilder2({
     }).catch(() => {
     });
   }
+  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);
+  }
   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);
@@ -2499,9 +2765,9 @@ var FormBuilder = forwardRef(function FormBuilder2({
     "--fb-space-panel": `${theme.layout.panelPadding}px`,
     "--fb-space-ticket": `${theme.layout.ticketPadding}px`
   };
-  return /* @__PURE__ */ jsxs16("div", { className: "fb-root", style: rootStyle, children: [
-    /* @__PURE__ */ jsx18("style", { children: css }),
-    /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsxs17("div", { className: "fb-root", style: rootStyle, children: [
+    /* @__PURE__ */ jsx19("style", { children: css }),
+    /* @__PURE__ */ jsx19(
       Toolbar,
       {
         title: doc.title,
@@ -2509,24 +2775,31 @@ var FormBuilder = 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__ */ 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", { className: "fb-work-area", style: styles.workArea, "data-mobile-panel": mobilePanel, children: [
-      /* @__PURE__ */ jsxs16("div", { className: "fb-mobile-bar", children: [
-        /* @__PURE__ */ jsxs16(
+    persistence.loadingDraft ? /* @__PURE__ */ jsxs17("div", { style: styles.loadingScreen, children: [
+      /* @__PURE__ */ jsx19(Loader24, { size: 20, className: "spin" }),
+      /* @__PURE__ */ jsx19("span", { style: { marginTop: 8, fontSize: 13, color: "var(--fb-muted)" }, children: chrome.loadingDraft })
+    ] }) : mode === "build" ? /* @__PURE__ */ jsxs17("div", { className: "fb-work-area", style: styles.workArea, "data-mobile-panel": mobilePanel, children: [
+      /* @__PURE__ */ jsxs17("div", { className: "fb-mobile-bar", children: [
+        /* @__PURE__ */ jsxs17(
           "button",
           {
             type: "button",
@@ -2534,13 +2807,13 @@ var FormBuilder = forwardRef(function FormBuilder2({
             "aria-pressed": mobilePanel === "palette",
             onClick: () => setMobilePanel((p) => p === "palette" ? "none" : "palette"),
             children: [
-              /* @__PURE__ */ jsx18(Menu, { size: 14 }),
+              /* @__PURE__ */ jsx19(Menu, { size: 14 }),
               " ",
               chrome.paletteTabBlocks
             ]
           }
         ),
-        /* @__PURE__ */ jsxs16(
+        /* @__PURE__ */ jsxs17(
           "button",
           {
             type: "button",
@@ -2548,16 +2821,16 @@ var FormBuilder = forwardRef(function FormBuilder2({
             "aria-pressed": mobilePanel === "inspector",
             onClick: () => setMobilePanel((p) => p === "inspector" ? "none" : "inspector"),
             children: [
-              /* @__PURE__ */ jsx18(SlidersHorizontal, { size: 14 }),
+              /* @__PURE__ */ jsx19(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(
+      /* @__PURE__ */ jsxs17("div", { className: "fb-canvas-area", style: styles.workArea, children: [
+        mobilePanel !== "none" && /* @__PURE__ */ jsx19("div", { className: "fb-mobile-backdrop", onClick: () => setMobilePanel("none") }),
+        /* @__PURE__ */ jsx19(
           Palette,
           {
             activeSectionLabel,
@@ -2574,7 +2847,7 @@ var FormBuilder = forwardRef(function FormBuilder2({
             resetTheme
           }
         ),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(
           Canvas,
           {
             sections: doc.sections,
@@ -2606,7 +2879,7 @@ var FormBuilder = forwardRef(function FormBuilder2({
             getDragHandleProps: drag.getDragHandleProps
           }
         ),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(
           Inspector,
           {
             selected: doc.selected,
@@ -2621,7 +2894,7 @@ var FormBuilder = forwardRef(function FormBuilder2({
           }
         )
       ] })
-    ] }) : /* @__PURE__ */ jsx18(
+    ] }) : /* @__PURE__ */ jsx19(
       PreviewPane,
       {
         title: doc.title,
@@ -2635,29 +2908,55 @@ var FormBuilder = forwardRef(function FormBuilder2({
         onSubmit
       }
     ),
-    showJson && /* @__PURE__ */ jsx18(JsonModal, { chrome, jsonString, copied, onCopy: copyJson, onClose: () => setShowJson(false) }),
-    showLibrary && /* @__PURE__ */ jsx18(
+    showJson && /* @__PURE__ */ jsx19(JsonModal, { chrome, jsonString, copied, onCopy: copyJson, onClose: () => setShowJson(false) }),
+    showLibrary && /* @__PURE__ */ jsx19(
       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__ */ jsx18(
+    persistence.saveAsPrompt && /* @__PURE__ */ jsx19(
       SaveAsModal,
       {
         chrome,
         suggestedName: persistence.saveAsPrompt.suggestedName,
+        templateState: persistence.templateState,
         onSave: persistence.saveAs,
         onClose: persistence.dismissSaveAsPrompt
       }
+    ),
+    pastePrompt && /* @__PURE__ */ jsx19(
+      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__ */ jsx19(
+      ConfirmModal,
+      {
+        chrome,
+        title: persistence.notice.title,
+        message: persistence.notice.message,
+        onClose: persistence.dismissNotice
+      }
     )
   ] });
 });
@@ -2678,10 +2977,18 @@ var DARK_THEME = {
   layout: DEFAULT_THEME.layout
 };
 export {
+  CLIPBOARD_KEY,
   DARK_THEME,
   DEFAULT_THEME,
+  DOCUMENT_VERSION,
+  DRAFT_KEY,
   FormBuilder_default as FormBuilder,
+  INDEX_KEY,
   FormBuilder_default as default,
-  localStorageAdapter
+  formKey,
+  localStorageAdapter,
+  parseTemplate,
+  savedFormId,
+  serializeTemplate
 };
 //# sourceMappingURL=index.js.map