form-page-builder 0.1.0

package/dist/index.cjs

@@ -0,0 +1,2395 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  FormBuilder: () => FormBuilder,
+  default: () => FormBuilder,
+  localStorageAdapter: () => localStorageAdapter
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/FormBuilder.tsx
+var import_react8 = require("react");
+var import_lucide_react19 = require("lucide-react");
+
+// src/i18n/languages.ts
+var DEFAULT_LANGUAGES = [
+  { code: "en", label: "EN" },
+  { code: "ja", label: "\u65E5\u672C\u8A9E" }
+];
+
+// src/i18n/strings.ts
+var DEFAULT_STRINGS = {
+  en: {
+    submit: "Submit",
+    selectPlaceholder: "Select...",
+    requiredError: "This field is required.",
+    invalidEmail: "Enter a valid email address.",
+    invalidPhone: "Enter a valid phone number.",
+    fixErrors: "Please fix the highlighted fields before submitting.",
+    submittedTitle: "Form submitted",
+    submittedBody: "Here's what would be sent to your backend:",
+    addFieldsHint: "Add fields in Build mode to see them here.",
+    close: "Close",
+    tooLong: (n) => `Must be ${n} characters or fewer.`,
+    tooSmall: (n) => `Must be at least ${n}.`,
+    tooLarge: (n) => `Must be at most ${n}.`
+  },
+  ja: {
+    submit: "\u9001\u4FE1",
+    selectPlaceholder: "\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044",
+    requiredError: "\u3053\u306E\u9805\u76EE\u306F\u5FC5\u9808\u3067\u3059\u3002",
+    invalidEmail: "\u6709\u52B9\u306A\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9\u3092\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
+    invalidPhone: "\u6709\u52B9\u306A\u96FB\u8A71\u756A\u53F7\u3092\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
+    fixErrors: "\u5165\u529B\u5185\u5BB9\u3092\u3054\u78BA\u8A8D\u306E\u3046\u3048\u3001\u518D\u5EA6\u9001\u4FE1\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
+    submittedTitle: "\u9001\u4FE1\u5B8C\u4E86",
+    submittedBody: "\u30D0\u30C3\u30AF\u30A8\u30F3\u30C9\u306B\u9001\u4FE1\u3055\u308C\u308B\u5185\u5BB9\u306F\u4EE5\u4E0B\u306E\u901A\u308A\u3067\u3059\uFF1A",
+    addFieldsHint: "\u30D3\u30EB\u30C9\u30E2\u30FC\u30C9\u3067\u30D5\u30A3\u30FC\u30EB\u30C9\u3092\u8FFD\u52A0\u3059\u308B\u3068\u3001\u3053\u3053\u306B\u8868\u793A\u3055\u308C\u307E\u3059\u3002",
+    close: "\u9589\u3058\u308B",
+    tooLong: (n) => `${n}\u6587\u5B57\u4EE5\u5185\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044\u3002`,
+    tooSmall: (n) => `${n}\u4EE5\u4E0A\u306E\u5024\u3092\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044\u3002`,
+    tooLarge: (n) => `${n}\u4EE5\u4E0B\u306E\u5024\u3092\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044\u3002`
+  }
+};
+
+// src/i18n/chrome.ts
+var CHROME = {
+  en: {
+    contentBlocks: "Content",
+    formFields: "Form Fields",
+    addingTo: "Adding to",
+    properties: "Properties",
+    selectFieldHint: "Select a field to edit its properties.",
+    label: "Label",
+    hideLabel: "Hide label",
+    inputType: "Input type",
+    content: "Content",
+    headingStyle: "Heading style",
+    typography: "Typography",
+    style: "Style",
+    align: "Align",
+    color: "Color",
+    imageUrl: "Image URL",
+    imageUrlHelper: "Upload the image on your own end (Drive, CDN, S3...) and paste the link here \u2014 this package doesn't host images.",
+    altText: "Alt text",
+    linkOptional: "Link (optional)",
+    shape: "Shape",
+    placeholder: "Placeholder",
+    maxLength: "Max length",
+    noLimit: "No limit",
+    minValue: "Min value",
+    maxValue: "Max value",
+    options: "Options",
+    addOption: "Add option",
+    defaultValue: "Default value",
+    defaultChecked: "Default checked",
+    checked: "Checked",
+    unchecked: "Unchecked",
+    none: "None",
+    requiredField: "Required field",
+    layout: "Layout",
+    width: "Width",
+    full: "Full",
+    labelPosition: "Label position",
+    above: "Above",
+    inline: "Inline",
+    verticalAlign: "Vertical align",
+    top: "Top",
+    middle: "Middle",
+    bottom: "Bottom",
+    icon: "Icon",
+    showIcon: "Show icon next to label",
+    deleteField: "Delete field",
+    build: "Build",
+    preview: "Preview",
+    newForm: "New",
+    myForms: "My forms",
+    save: "Save",
+    viewJson: "View JSON",
+    saving: "Saving...",
+    saved: "Saved",
+    saveFailed: "Save failed",
+    startNewForm: "Start a new form",
+    openSavedForm: "Open a saved form",
+    saveToLibraryTitle: "Save this form to your library",
+    sectionTitlePlaceholder: (n) => `Section ${n} title (optional)`,
+    noFieldsInSection: "No fields in this section yet \u2014 pick a field type on the left.",
+    addSection: "Add section",
+    moveUp: "Move up",
+    moveDown: "Move down",
+    duplicate: "Duplicate",
+    delete: "Delete",
+    deleteSection: "Delete section",
+    required: "required",
+    formJson: "Form JSON",
+    copy: "Copy",
+    copied: "Copied",
+    nothingSaved: 'Nothing saved yet. Click "Save" in the toolbar to store this form here.',
+    updated: "Updated",
+    open: "Open",
+    saveForm: "Save form",
+    formName: "Form name",
+    saveToLibrary: "Save to library",
+    loadingDraft: "Loading your draft...",
+    current: "current",
+    customColor: "Custom color",
+    fieldsCount: (n) => `${n} field${n === 1 ? "" : "s"}`,
+    formSettings: "Form settings",
+    submitLabel: "Submit button text",
+    submitMode: "Submit button",
+    combined: "Combined (one button)",
+    perSection: "Per section",
+    settings: "Form settings",
+    fieldTypeInput: "Input",
+    fieldTypeTextarea: "Textarea",
+    fieldTypeSelect: "Select",
+    fieldTypeRadio: "Radio group",
+    fieldTypeCheckboxGroup: "Checkbox group",
+    fieldTypeCheckbox: "Checkbox",
+    fieldTypeToggle: "Toggle",
+    fieldTypeParagraph: "Paragraph",
+    fieldTypeImage: "Image",
+    subtypeText: "Text",
+    subtypeEmail: "Email",
+    subtypePhone: "Phone",
+    subtypeNumber: "Number",
+    subtypePassword: "Password",
+    subtypeDate: "Date",
+    subtypeTime: "Time",
+    shapeSquare: "Square",
+    shapeCircle: "Circle",
+    shapeBanner: "Banner",
+    tagBody: "Body",
+    tagCaption: "Caption",
+    submitSectionTitle: "Submit",
+    submitStyle: "Submit button style",
+    buttonSize: "Size",
+    theme: "Theme",
+    primaryColor: "Primary color",
+    pageBackground: "Page background",
+    maxWidthPx: "Max width (px)",
+    reset: "Reset",
+    deviceLaptop: "Laptop",
+    deviceTablet: "Tablet",
+    deviceMobile: "Mobile",
+    untitledField: "Untitled field",
+    optionSeed: (n) => `Option ${n}`,
+    spacing: "Spacing",
+    spacingPagePadding: "Page padding",
+    spacingCanvasPadding: "Canvas padding",
+    spacingSectionGap: "Section gap",
+    spacingFieldGap: "Field gap",
+    spacingToolbarPadding: "Toolbar padding",
+    spacingPanelPadding: "Panel padding",
+    spacingTicketPadding: "Field padding"
+  },
+  ja: {
+    contentBlocks: "\u30B3\u30F3\u30C6\u30F3\u30C4",
+    formFields: "\u30D5\u30A9\u30FC\u30E0\u9805\u76EE",
+    addingTo: "\u8FFD\u52A0\u5148",
+    properties: "\u30D7\u30ED\u30D1\u30C6\u30A3",
+    selectFieldHint: "\u7DE8\u96C6\u3059\u308B\u30D5\u30A3\u30FC\u30EB\u30C9\u3092\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
+    label: "\u30E9\u30D9\u30EB",
+    hideLabel: "\u30E9\u30D9\u30EB\u3092\u975E\u8868\u793A",
+    inputType: "\u5165\u529B\u30BF\u30A4\u30D7",
+    content: "\u5185\u5BB9",
+    headingStyle: "\u898B\u51FA\u3057\u30B9\u30BF\u30A4\u30EB",
+    typography: "\u6587\u5B57\u30B9\u30BF\u30A4\u30EB",
+    style: "\u30B9\u30BF\u30A4\u30EB",
+    align: "\u914D\u7F6E",
+    color: "\u8272",
+    imageUrl: "\u753B\u50CFURL",
+    imageUrlHelper: "\u753B\u50CF\u306F\u5404\u81EA\u3067\u30A2\u30C3\u30D7\u30ED\u30FC\u30C9\uFF08Drive\u3001CDN\u3001S3\u306A\u3069\uFF09\u3057\u3001\u305D\u306EURL\u3092\u3053\u3053\u306B\u8CBC\u308A\u4ED8\u3051\u3066\u304F\u3060\u3055\u3044\u3002\u672C\u30D1\u30C3\u30B1\u30FC\u30B8\u306F\u753B\u50CF\u3092\u4FDD\u5B58\u3057\u307E\u305B\u3093\u3002",
+    altText: "\u4EE3\u66FF\u30C6\u30AD\u30B9\u30C8",
+    linkOptional: "\u30EA\u30F3\u30AF\uFF08\u4EFB\u610F\uFF09",
+    shape: "\u5F62\u72B6",
+    placeholder: "\u30D7\u30EC\u30FC\u30B9\u30DB\u30EB\u30C0\u30FC",
+    maxLength: "\u6700\u5927\u6587\u5B57\u6570",
+    noLimit: "\u5236\u9650\u306A\u3057",
+    minValue: "\u6700\u5C0F\u5024",
+    maxValue: "\u6700\u5927\u5024",
+    options: "\u9078\u629E\u80A2",
+    addOption: "\u9078\u629E\u80A2\u3092\u8FFD\u52A0",
+    defaultValue: "\u521D\u671F\u5024",
+    defaultChecked: "\u521D\u671F\u9078\u629E",
+    checked: "\u30AA\u30F3",
+    unchecked: "\u30AA\u30D5",
+    none: "\u306A\u3057",
+    requiredField: "\u5FC5\u9808\u9805\u76EE",
+    layout: "\u30EC\u30A4\u30A2\u30A6\u30C8",
+    width: "\u5E45",
+    full: "\u5168\u5E45",
+    labelPosition: "\u30E9\u30D9\u30EB\u4F4D\u7F6E",
+    above: "\u4E0A",
+    inline: "\u6A2A\u4E26\u3073",
+    verticalAlign: "\u5782\u76F4\u4F4D\u7F6E",
+    top: "\u4E0A",
+    middle: "\u4E2D\u592E",
+    bottom: "\u4E0B",
+    icon: "\u30A2\u30A4\u30B3\u30F3",
+    showIcon: "\u30E9\u30D9\u30EB\u6A2A\u306B\u30A2\u30A4\u30B3\u30F3\u3092\u8868\u793A",
+    deleteField: "\u30D5\u30A3\u30FC\u30EB\u30C9\u3092\u524A\u9664",
+    build: "\u4F5C\u6210",
+    preview: "\u30D7\u30EC\u30D3\u30E5\u30FC",
+    newForm: "\u65B0\u898F",
+    myForms: "\u30DE\u30A4\u30D5\u30A9\u30FC\u30E0",
+    save: "\u4FDD\u5B58",
+    viewJson: "JSON\u3092\u8868\u793A",
+    saving: "\u4FDD\u5B58\u4E2D...",
+    saved: "\u4FDD\u5B58\u6E08\u307F",
+    saveFailed: "\u4FDD\u5B58\u306B\u5931\u6557\u3057\u307E\u3057\u305F",
+    startNewForm: "\u65B0\u3057\u3044\u30D5\u30A9\u30FC\u30E0\u3092\u4F5C\u6210",
+    openSavedForm: "\u4FDD\u5B58\u6E08\u307F\u30D5\u30A9\u30FC\u30E0\u3092\u958B\u304F",
+    saveToLibraryTitle: "\u3053\u306E\u30D5\u30A9\u30FC\u30E0\u3092\u30E9\u30A4\u30D6\u30E9\u30EA\u306B\u4FDD\u5B58",
+    sectionTitlePlaceholder: (n) => `\u30BB\u30AF\u30B7\u30E7\u30F3${n}\u306E\u30BF\u30A4\u30C8\u30EB\uFF08\u4EFB\u610F\uFF09`,
+    noFieldsInSection: "\u3053\u306E\u30BB\u30AF\u30B7\u30E7\u30F3\u306B\u306F\u307E\u3060\u30D5\u30A3\u30FC\u30EB\u30C9\u304C\u3042\u308A\u307E\u305B\u3093\u3002\u5DE6\u306E\u30D1\u30CD\u30EB\u304B\u3089\u30D5\u30A3\u30FC\u30EB\u30C9\u3092\u9078\u3093\u3067\u304F\u3060\u3055\u3044\u3002",
+    addSection: "\u30BB\u30AF\u30B7\u30E7\u30F3\u3092\u8FFD\u52A0",
+    moveUp: "\u4E0A\u3078\u79FB\u52D5",
+    moveDown: "\u4E0B\u3078\u79FB\u52D5",
+    duplicate: "\u8907\u88FD",
+    delete: "\u524A\u9664",
+    deleteSection: "\u30BB\u30AF\u30B7\u30E7\u30F3\u3092\u524A\u9664",
+    required: "\u5FC5\u9808",
+    formJson: "\u30D5\u30A9\u30FC\u30E0JSON",
+    copy: "\u30B3\u30D4\u30FC",
+    copied: "\u30B3\u30D4\u30FC\u3057\u307E\u3057\u305F",
+    nothingSaved: "\u307E\u3060\u4FDD\u5B58\u3055\u308C\u3066\u3044\u307E\u305B\u3093\u3002\u30C4\u30FC\u30EB\u30D0\u30FC\u306E\u300C\u4FDD\u5B58\u300D\u3092\u30AF\u30EA\u30C3\u30AF\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
+    updated: "\u66F4\u65B0\u65E5\u6642",
+    open: "\u958B\u304F",
+    saveForm: "\u30D5\u30A9\u30FC\u30E0\u3092\u4FDD\u5B58",
+    formName: "\u30D5\u30A9\u30FC\u30E0\u540D",
+    saveToLibrary: "\u30E9\u30A4\u30D6\u30E9\u30EA\u306B\u4FDD\u5B58",
+    loadingDraft: "\u4E0B\u66F8\u304D\u3092\u8AAD\u307F\u8FBC\u3093\u3067\u3044\u307E\u3059...",
+    current: "\u73FE\u5728\u7DE8\u96C6\u4E2D",
+    customColor: "\u30AB\u30B9\u30BF\u30E0\u30AB\u30E9\u30FC",
+    fieldsCount: (n) => `${n}\u4EF6\u306E\u30D5\u30A3\u30FC\u30EB\u30C9`,
+    formSettings: "\u30D5\u30A9\u30FC\u30E0\u8A2D\u5B9A",
+    submitLabel: "\u9001\u4FE1\u30DC\u30BF\u30F3\u306E\u30C6\u30AD\u30B9\u30C8",
+    submitMode: "\u9001\u4FE1\u30DC\u30BF\u30F3\u306E\u8868\u793A",
+    combined: "\u307E\u3068\u3081\u30661\u3064",
+    perSection: "\u30BB\u30AF\u30B7\u30E7\u30F3\u3054\u3068",
+    settings: "\u30D5\u30A9\u30FC\u30E0\u8A2D\u5B9A",
+    fieldTypeInput: "\u5165\u529B",
+    fieldTypeTextarea: "\u30C6\u30AD\u30B9\u30C8\u30A8\u30EA\u30A2",
+    fieldTypeSelect: "\u30BB\u30EC\u30AF\u30C8",
+    fieldTypeRadio: "\u30E9\u30B8\u30AA\u30DC\u30BF\u30F3",
+    fieldTypeCheckboxGroup: "\u30C1\u30A7\u30C3\u30AF\u30DC\u30C3\u30AF\u30B9\u30B0\u30EB\u30FC\u30D7",
+    fieldTypeCheckbox: "\u30C1\u30A7\u30C3\u30AF\u30DC\u30C3\u30AF\u30B9",
+    fieldTypeToggle: "\u30C8\u30B0\u30EB",
+    fieldTypeParagraph: "\u6BB5\u843D",
+    fieldTypeImage: "\u753B\u50CF",
+    subtypeText: "\u30C6\u30AD\u30B9\u30C8",
+    subtypeEmail: "\u30E1\u30FC\u30EB",
+    subtypePhone: "\u96FB\u8A71\u756A\u53F7",
+    subtypeNumber: "\u6570\u5024",
+    subtypePassword: "\u30D1\u30B9\u30EF\u30FC\u30C9",
+    subtypeDate: "\u65E5\u4ED8",
+    subtypeTime: "\u6642\u523B",
+    shapeSquare: "\u6B63\u65B9\u5F62",
+    shapeCircle: "\u5186\u5F62",
+    shapeBanner: "\u30D0\u30CA\u30FC",
+    tagBody: "\u672C\u6587",
+    tagCaption: "\u30AD\u30E3\u30D7\u30B7\u30E7\u30F3",
+    submitSectionTitle: "\u9001\u4FE1",
+    submitStyle: "\u9001\u4FE1\u30DC\u30BF\u30F3\u306E\u30B9\u30BF\u30A4\u30EB",
+    buttonSize: "\u30B5\u30A4\u30BA",
+    theme: "\u30C6\u30FC\u30DE",
+    primaryColor: "\u30E1\u30A4\u30F3\u30AB\u30E9\u30FC",
+    pageBackground: "\u30DA\u30FC\u30B8\u80CC\u666F\u8272",
+    maxWidthPx: "\u6700\u5927\u5E45\uFF08px\uFF09",
+    reset: "\u30EA\u30BB\u30C3\u30C8",
+    deviceLaptop: "\u30D1\u30BD\u30B3\u30F3",
+    deviceTablet: "\u30BF\u30D6\u30EC\u30C3\u30C8",
+    deviceMobile: "\u30E2\u30D0\u30A4\u30EB",
+    untitledField: "\u540D\u79F0\u672A\u8A2D\u5B9A\u306E\u30D5\u30A3\u30FC\u30EB\u30C9",
+    optionSeed: (n) => `\u9078\u629E\u80A2${n}`,
+    spacing: "\u4F59\u767D\u8A2D\u5B9A",
+    spacingPagePadding: "\u30DA\u30FC\u30B8\u4F59\u767D",
+    spacingCanvasPadding: "\u30AD\u30E3\u30F3\u30D0\u30B9\u4F59\u767D",
+    spacingSectionGap: "\u30BB\u30AF\u30B7\u30E7\u30F3\u9593\u9694",
+    spacingFieldGap: "\u30D5\u30A3\u30FC\u30EB\u30C9\u9593\u9694",
+    spacingToolbarPadding: "\u30C4\u30FC\u30EB\u30D0\u30FC\u4F59\u767D",
+    spacingPanelPadding: "\u30D1\u30CD\u30EB\u4F59\u767D",
+    spacingTicketPadding: "\u30D5\u30A3\u30FC\u30EB\u30C9\u5185\u4F59\u767D"
+  }
+};
+
+// src/lib/bilingual.ts
+function bi(en = "", ja = "") {
+  return { en, ja };
+}
+function t(val, lang) {
+  if (val && typeof val === "object") return val[lang] || val.en || "";
+  return val || "";
+}
+function withLang(val, lang, value) {
+  const base = val && typeof val === "object" ? val : bi(typeof val === "string" ? val : "");
+  return { ...base, [lang]: value };
+}
+
+// src/lib/storage/localStorageAdapter.ts
+function hasLocalStorage() {
+  return typeof window !== "undefined" && !!window.localStorage;
+}
+var localStorageAdapter = {
+  async get(key) {
+    if (!hasLocalStorage()) return null;
+    return window.localStorage.getItem(key);
+  },
+  async set(key, value) {
+    if (!hasLocalStorage()) return;
+    window.localStorage.setItem(key, value);
+  },
+  async delete(key) {
+    if (!hasLocalStorage()) return;
+    window.localStorage.removeItem(key);
+  }
+};
+
+// src/hooks/useTheme.ts
+var import_react = require("react");
+
+// src/theme/defaultTheme.ts
+var DEFAULT_THEME = {
+  primary: "#5B5FEF",
+  primarySoft: "#EEF0FF",
+  danger: "#C4432E",
+  dangerSoft: "#FDECE4",
+  ink: "#1B1E24",
+  muted: "#9296A3",
+  border: "#E2E4E9",
+  surface: "#FFFFFF",
+  canvas: "#F5F6F8",
+  pageBackground: "#FFFFFF",
+  layout: { maxWidth: 640, pagePadding: 28, canvasPadding: 20, sectionGap: 20, fieldGap: 16, toolbarPadding: 10, panelPadding: 14, ticketPadding: 14 }
+};
+
+// src/hooks/useTheme.ts
+function useTheme(themeOverrideProp) {
+  const baseTheme = {
+    ...DEFAULT_THEME,
+    ...themeOverrideProp || {},
+    layout: { ...DEFAULT_THEME.layout, ...themeOverrideProp && themeOverrideProp.layout || {} }
+  };
+  const [themeOverrides, setThemeOverrides] = (0, import_react.useState)({});
+  const theme = {
+    ...baseTheme,
+    ...themeOverrides,
+    layout: { ...baseTheme.layout, ...themeOverrides.layout || {} }
+  };
+  function updateThemeColor(key, value) {
+    setThemeOverrides((prev) => ({ ...prev, [key]: value }));
+  }
+  function updateThemeLayout(key, value) {
+    setThemeOverrides((prev) => ({ ...prev, layout: { ...prev.layout, [key]: value } }));
+  }
+  function resetTheme() {
+    setThemeOverrides({});
+  }
+  function replaceThemeOverrides(overrides) {
+    setThemeOverrides(overrides);
+  }
+  return { theme, themeOverrides, updateThemeColor, updateThemeLayout, resetTheme, replaceThemeOverrides };
+}
+
+// src/hooks/useFormDocument.ts
+var import_react2 = require("react");
+
+// src/constants/fieldTypes.ts
+var import_lucide_react = require("lucide-react");
+var FIELD_TYPES = [
+  { type: "paragraph", icon: import_lucide_react.FileText, isContent: true, defaultIcon: "FileText" },
+  { type: "image", icon: import_lucide_react.Image, isContent: true, isImage: true, defaultIcon: "Type" },
+  { type: "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",
+  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)}`;
+var idCounter = 1;
+var nextId = () => `field_${idCounter++}`;
+function resyncIdCounter(fields) {
+  let max = 0;
+  fields.forEach((f) => {
+    const m = /^field_(\d+)$/.exec(f.id);
+    if (m) max = Math.max(max, parseInt(m[1], 10));
+  });
+  idCounter = Math.max(idCounter, max + 1);
+}
+
+// src/lib/fieldDefaults.ts
+function defaultFieldFor(type, language, chrome) {
+  const meta = getMeta(type);
+  const seedLabel = chrome[FIELD_TYPE_CHROME_KEY[type]] || type;
+  const base = {
+    id: nextId(),
+    type,
+    label: withLang(bi(), language, seedLabel),
+    hideLabel: false,
+    width: "1/1",
+    verticalAlign: "top",
+    labelPosition: "top",
+    showIcon: false,
+    displayIcon: meta.defaultIcon
+  };
+  if (!meta.isContent) base.required = false;
+  if (meta.hasSubtype) base.inputType = "text";
+  if (meta.placeholder) base.placeholder = bi();
+  if (meta.options) {
+    base.options = [
+      { label: withLang(bi(), language, chrome.optionSeed(1)), value: "option_1" },
+      { label: withLang(bi(), language, chrome.optionSeed(2)), value: "option_2" }
+    ];
+  }
+  if (meta.isImage) {
+    base.src = "";
+    base.alt = bi();
+    base.link = "";
+    base.shape = "square";
+  } else if (meta.boolean) {
+    base.defaultValue = false;
+  } else if (meta.multiValue) {
+    base.defaultValue = [];
+  } else if (type === "paragraph") {
+    base.content = bi();
+    base.tag = "p";
+    base.fontSize = "md";
+    base.fontWeight = "normal";
+    base.fontStyle = "normal";
+    base.textAlign = "left";
+    base.color = "";
+  } else {
+    base.defaultValue = "";
+  }
+  return base;
+}
+function defaultSection(titleEn = "") {
+  return { id: genSectionId(), title: bi(titleEn, ""), background: "", collapsed: false, submitStyle: null, fields: [] };
+}
+
+// src/hooks/useFormDocument.ts
+function useFormDocument({ language, chrome }) {
+  const [title, setTitle] = (0, import_react2.useState)(bi("Untitled form", ""));
+  const [submitLabel, setSubmitLabelState] = (0, import_react2.useState)(bi());
+  const [submitMode, setSubmitMode] = (0, import_react2.useState)("combined");
+  const [submitStyle, setSubmitStyleState] = (0, import_react2.useState)({ color: "", size: "md" });
+  const [sections, setSections] = (0, import_react2.useState)([defaultSection()]);
+  const [activeSectionId, setActiveSectionId] = (0, import_react2.useState)(null);
+  const [selectedId, setSelectedId] = (0, import_react2.useState)(null);
+  const allFields = sections.flatMap((s) => s.fields);
+  const selected = allFields.find((f) => f.id === selectedId) || null;
+  const activeSection = sections.find((s) => s.id === activeSectionId) || sections[0] || defaultSection();
+  function updateTitle(value) {
+    setTitle((prev) => withLang(prev, language, value));
+  }
+  function updateSubmitLabel(value) {
+    setSubmitLabelState((prev) => withLang(prev, language, value));
+  }
+  function updateSubmitStyle(patch) {
+    setSubmitStyleState((prev) => ({ ...prev, ...patch }));
+  }
+  function addSection() {
+    const s = defaultSection();
+    setSections((prev) => [...prev, s]);
+    setActiveSectionId(s.id);
+  }
+  function duplicateSection(sectionId) {
+    const newSectionId = genSectionId();
+    setSections((prev) => {
+      const idx = prev.findIndex((s) => s.id === sectionId);
+      if (idx === -1) return prev;
+      const copy = { ...prev[idx], id: newSectionId, fields: prev[idx].fields.map((f) => ({ ...f, id: nextId() })) };
+      const next = [...prev];
+      next.splice(idx + 1, 0, copy);
+      return next;
+    });
+    setActiveSectionId(newSectionId);
+  }
+  function deleteSection(sectionId) {
+    setSections((prev) => {
+      if (prev.length <= 1) return prev;
+      const next = prev.filter((s) => s.id !== sectionId);
+      setActiveSectionId((curr) => curr === sectionId ? next[0].id : curr);
+      return next;
+    });
+  }
+  function moveSection(sectionId, dir) {
+    setSections((prev) => {
+      const idx = prev.findIndex((s) => s.id === sectionId);
+      const swap = idx + dir;
+      if (swap < 0 || swap >= prev.length) return prev;
+      const next = [...prev];
+      [next[idx], next[swap]] = [next[swap], next[idx]];
+      return next;
+    });
+  }
+  function updateSectionTitle(sectionId, value) {
+    setSections((prev) => prev.map((s) => s.id === sectionId ? { ...s, title: withLang(s.title, language, value) } : s));
+  }
+  function updateSectionBackground(sectionId, color) {
+    setSections((prev) => prev.map((s) => s.id === sectionId ? { ...s, background: color } : s));
+  }
+  function toggleSectionCollapse(sectionId) {
+    setSections((prev) => prev.map((s) => s.id === sectionId ? { ...s, collapsed: !s.collapsed } : s));
+  }
+  function updateSectionSubmitStyle(sectionId, patch) {
+    setSections((prev) => prev.map((s) => s.id === sectionId ? { ...s, submitStyle: { ...s.submitStyle || submitStyle, ...patch } } : s));
+  }
+  function clearSectionSubmitStyle(sectionId) {
+    setSections((prev) => prev.map((s) => s.id === sectionId ? { ...s, submitStyle: null } : s));
+  }
+  function addField(type) {
+    const field = defaultFieldFor(type, language, chrome);
+    const targetId = activeSectionId || sections[0]?.id;
+    if (!targetId) return;
+    setSections((prev) => prev.map((s) => s.id === targetId ? { ...s, fields: [...s.fields, field] } : s));
+    setSelectedId(field.id);
+  }
+  function updateField(fieldId, patch) {
+    setSections((prev) => prev.map((s) => ({ ...s, fields: s.fields.map((f) => f.id === fieldId ? { ...f, ...patch } : f) })));
+  }
+  function deleteField(fieldId) {
+    setSections((prev) => prev.map((s) => ({ ...s, fields: s.fields.filter((f) => f.id !== fieldId) })));
+    if (selectedId === fieldId) setSelectedId(null);
+  }
+  function duplicateField(fieldId) {
+    const newId = nextId();
+    setSections((prev) => prev.map((s) => {
+      const idx = s.fields.findIndex((f) => f.id === fieldId);
+      if (idx === -1) return s;
+      const copy = { ...s.fields[idx], id: newId };
+      const fields = [...s.fields];
+      fields.splice(idx + 1, 0, copy);
+      return { ...s, fields };
+    }));
+    setSelectedId(newId);
+  }
+  function moveField(fieldId, dir) {
+    setSections((prev) => prev.map((s) => {
+      const idx = s.fields.findIndex((f) => f.id === fieldId);
+      if (idx === -1) return s;
+      const swap = idx + dir;
+      if (swap < 0 || swap >= s.fields.length) return s;
+      const fields = [...s.fields];
+      [fields[idx], fields[swap]] = [fields[swap], fields[idx]];
+      return { ...s, fields };
+    }));
+  }
+  function reorderWithinSection(sectionId, fromIdx, toIdx) {
+    if (fromIdx === toIdx || fromIdx == null || toIdx == null) return;
+    setSections((prev) => prev.map((s) => {
+      if (s.id !== sectionId) return s;
+      const fields = [...s.fields];
+      const [moved] = fields.splice(fromIdx, 1);
+      fields.splice(toIdx, 0, moved);
+      return { ...s, fields };
+    }));
+  }
+  function updateOption(fieldId, optIdx, patch) {
+    setSections((prev) => prev.map((s) => ({
+      ...s,
+      fields: s.fields.map((f) => {
+        if (f.id !== fieldId || !("options" in f) || !f.options) return f;
+        return { ...f, options: f.options.map((o, i) => i === optIdx ? { ...o, ...patch } : o) };
+      })
+    })));
+  }
+  function addOption(fieldId) {
+    setSections((prev) => prev.map((s) => ({
+      ...s,
+      fields: s.fields.map((f) => {
+        if (f.id !== fieldId || !("options" in f) || !f.options) return f;
+        const n = f.options.length + 1;
+        return { ...f, options: [...f.options, { label: withLang(bi(), language, chrome.optionSeed(n)), value: `option_${n}` }] };
+      })
+    })));
+  }
+  function removeOption(fieldId, optIdx) {
+    setSections((prev) => prev.map((s) => ({
+      ...s,
+      fields: s.fields.map((f) => f.id !== fieldId || !("options" in f) || !f.options ? f : { ...f, options: f.options.filter((_, i) => i !== optIdx) })
+    })));
+  }
+  function loadDocument(doc) {
+    resyncIdCounter(doc.sections.flatMap((s) => s.fields));
+    setSections(doc.sections);
+    setActiveSectionId(doc.sections[0]?.id || null);
+    setTitle(doc.title);
+    setSubmitLabelState(doc.submitLabel);
+    setSubmitMode(doc.submitMode);
+    setSubmitStyleState(doc.submitStyle);
+    setSelectedId(null);
+  }
+  function resetToBlank() {
+    const s = defaultSection();
+    setSections([s]);
+    setActiveSectionId(s.id);
+    setTitle(bi("Untitled form", ""));
+    setSubmitLabelState(bi());
+    setSubmitMode("combined");
+    setSubmitStyleState({ color: "", size: "md" });
+    setSelectedId(null);
+  }
+  return {
+    title,
+    submitLabel,
+    submitMode,
+    submitStyle,
+    sections,
+    activeSectionId,
+    selectedId,
+    allFields,
+    selected,
+    activeSection,
+    setActiveSectionId,
+    setSelectedId,
+    setSubmitMode,
+    setTitle,
+    updateTitle,
+    updateSubmitLabel,
+    updateSubmitStyle,
+    addSection,
+    duplicateSection,
+    deleteSection,
+    moveSection,
+    updateSectionTitle,
+    updateSectionBackground,
+    toggleSectionCollapse,
+    updateSectionSubmitStyle,
+    clearSectionSubmitStyle,
+    addField,
+    updateField,
+    deleteField,
+    duplicateField,
+    moveField,
+    reorderWithinSection,
+    updateOption,
+    addOption,
+    removeOption,
+    loadDocument,
+    resetToBlank
+  };
+}
+
+// src/hooks/usePersistence.ts
+var import_react3 = require("react");
+
+// src/lib/storage/keys.ts
+var DRAFT_KEY = "form-page-builder:draft";
+var INDEX_KEY = "form-page-builder:index";
+var formKey = (id) => `form-page-builder:saved:${id}`;
+
+// src/lib/migrate.ts
+function migrateField(field) {
+  let f = { ...field };
+  if (LEGACY_INPUT_TYPES.includes(f.type)) f = { ...f, type: "input", inputType: f.type };
+  f.label = typeof f.label === "string" ? bi(f.label) : f.label || bi();
+  f.hideLabel = !!f.hideLabel;
+  if ("placeholder" in f) f.placeholder = typeof f.placeholder === "string" ? bi(f.placeholder) : f.placeholder || bi();
+  if ("content" in f) f.content = typeof f.content === "string" ? bi(f.content) : f.content || bi();
+  if ("alt" in f) f.alt = typeof f.alt === "string" ? bi(f.alt) : f.alt || bi();
+  if (f.options) f.options = f.options.map((o) => ({ ...o, label: typeof o.label === "string" ? bi(o.label) : o.label || bi() }));
+  if (f.type === "paragraph") {
+    f.tag = f.tag || "p";
+    f.fontSize = f.fontSize || "md";
+    f.fontWeight = f.fontWeight || "normal";
+    f.fontStyle = f.fontStyle || "normal";
+    f.textAlign = f.textAlign || "left";
+    f.color = f.color || "";
+  }
+  f.verticalAlign = f.verticalAlign || "top";
+  return f;
+}
+function migrateFields(fields) {
+  return (fields || []).map(migrateField);
+}
+function migrateDocument(raw) {
+  if (!raw) return null;
+  const title = typeof raw.title === "string" ? bi(raw.title) : raw.title || bi();
+  const submitLabel = typeof raw.submitLabel === "string" ? bi(raw.submitLabel) : raw.submitLabel || bi();
+  const submitMode = raw.submitMode === "perSection" ? "perSection" : "combined";
+  const submitStyle = raw.submitStyle || { color: "", size: "md" };
+  const themeOverrides = raw.themeOverrides || {};
+  if (raw.sections) {
+    return {
+      title,
+      submitLabel,
+      submitMode,
+      submitStyle,
+      themeOverrides,
+      sections: raw.sections.map((s) => ({
+        id: s.id || genSectionId(),
+        title: typeof s.title === "string" ? bi(s.title) : s.title || bi(),
+        background: s.background || "",
+        collapsed: !!s.collapsed,
+        submitStyle: s.submitStyle || null,
+        fields: migrateFields(s.fields || [])
+      }))
+    };
+  }
+  return { title, submitLabel, submitMode, submitStyle, themeOverrides, sections: [{ ...defaultSection(), fields: migrateFields(raw.fields || []) }] };
+}
+
+// src/hooks/usePersistence.ts
+function usePersistence({
+  storage,
+  language,
+  document,
+  onLoadDocument,
+  onLoadThemeOverrides,
+  onTitleChange,
+  onNewForm,
+  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 [savedForms, setSavedForms] = (0, import_react3.useState)([]);
+  const [saveAsPrompt, setSaveAsPrompt] = (0, import_react3.useState)(null);
+  const autosaveTimer = (0, import_react3.useRef)(null);
+  const hasLoadedOnce = (0, import_react3.useRef)(false);
+  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) {
+      setSavedForms([]);
+    }
+  }
+  (0, import_react3.useEffect)(() => {
+    (async () => {
+      try {
+        const raw = await storage.get(DRAFT_KEY);
+        if (raw) {
+          const parsed = JSON.parse(raw);
+          const doc = migrateDocument(parsed);
+          if (doc) {
+            onLoadDocument(doc);
+            onLoadThemeOverrides(doc.themeOverrides);
+          }
+          if (parsed.currentFormId) setCurrentFormId(parsed.currentFormId);
+        } else {
+          ensureActiveSection();
+        }
+      } catch (err) {
+        ensureActiveSection();
+      } finally {
+        setLoadingDraft(false);
+        hasLoadedOnce.current = true;
+      }
+    })();
+    refreshLibrary();
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    if (!hasLoadedOnce.current) return;
+    setSaveState("saving");
+    if (autosaveTimer.current) clearTimeout(autosaveTimer.current);
+    autosaveTimer.current = setTimeout(async () => {
+      try {
+        await storage.set(DRAFT_KEY, JSON.stringify({ ...document, currentFormId }));
+        setSaveState("saved");
+      } catch (err) {
+        setSaveState("error");
+      }
+    }, 600);
+    return () => {
+      if (autosaveTimer.current) clearTimeout(autosaveTimer.current);
+    };
+  }, [document.title, document.submitLabel, document.submitMode, document.submitStyle, document.themeOverrides, document.sections, currentFormId]);
+  async function saveAs(name) {
+    const id = genFormId();
+    const now = Date.now();
+    try {
+      const newTitle = bi(name, "");
+      await storage.set(formKey(id), JSON.stringify({ ...document, title: newTitle, 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.");
+    }
+  }
+  async function saveExisting() {
+    if (!currentFormId) {
+      setSaveAsPrompt({ open: true, suggestedName: t(document.title, language) });
+      return;
+    }
+    const now = Date.now();
+    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);
+      setSavedForms(next);
+      await storage.set(INDEX_KEY, JSON.stringify(next));
+    } catch (err) {
+      alert("Couldn't save the form. Please try again.");
+    }
+  }
+  async function loadForm(id) {
+    try {
+      const raw = await storage.get(formKey(id));
+      if (!raw) return;
+      const doc = migrateDocument(JSON.parse(raw));
+      if (!doc) return;
+      onLoadDocument(doc);
+      onLoadThemeOverrides(doc.themeOverrides);
+      setCurrentFormId(id);
+    } catch (err) {
+      alert("Couldn't load that form.");
+    }
+  }
+  async function deleteForm(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) {
+    }
+  }
+  function newForm() {
+    onNewForm();
+    setCurrentFormId(null);
+  }
+  function dismissSaveAsPrompt() {
+    setSaveAsPrompt(null);
+  }
+  return {
+    loadingDraft,
+    saveState,
+    savedForms,
+    currentFormId,
+    saveAs,
+    saveExisting,
+    loadForm,
+    deleteForm,
+    refreshLibrary,
+    newForm,
+    saveAsPrompt,
+    dismissSaveAsPrompt
+  };
+}
+
+// src/hooks/useDragReorder.ts
+var import_react4 = require("react");
+function useDragReorder(reorderWithinSection) {
+  const dragRef = (0, import_react4.useRef)({ sectionId: null, index: null });
+  const [dragOverKey, setDragOverKey] = (0, import_react4.useState)(null);
+  function getDropZoneHandlers(sectionId, index) {
+    const dragKey = `${sectionId}:${index}`;
+    return {
+      onDragOver: (e) => {
+        e.preventDefault();
+        setDragOverKey(dragKey);
+      },
+      onDragLeave: () => setDragOverKey(null),
+      onDrop: () => {
+        if (dragRef.current.sectionId === sectionId) reorderWithinSection(sectionId, dragRef.current.index, index);
+        dragRef.current = { sectionId: null, index: null };
+        setDragOverKey(null);
+      }
+    };
+  }
+  function getDragHandleProps(sectionId, index) {
+    return {
+      draggable: true,
+      onDragStart: () => {
+        dragRef.current = { sectionId, index };
+      }
+    };
+  }
+  return { dragOverKey, getDropZoneHandlers, getDragHandleProps };
+}
+
+// src/components/Toolbar.tsx
+var import_lucide_react4 = require("lucide-react");
+
+// src/styles/styles.ts
+var styles = {
+  app: { fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif", background: "var(--fb-canvas)", borderRadius: 12, overflow: "hidden", border: "1px solid var(--fb-border)", color: "var(--fb-ink)", minHeight: 640, maxHeight: "100vh", display: "flex", flexDirection: "column" },
+  toolbar: { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "var(--fb-space-toolbar) 16px", borderBottom: "1px solid var(--fb-border)", background: "var(--fb-surface)", flexWrap: "wrap", gap: 8, position: "relative" },
+  toolbarLeft: { display: "flex", alignItems: "center", gap: 10 },
+  logoMark: { width: 26, height: 26, borderRadius: 7, background: "var(--fb-primary)", color: "#fff", fontSize: 11, fontWeight: 700, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "'JetBrains Mono', monospace", letterSpacing: "-0.5px" },
+  titleInput: { border: "none", outline: "none", fontSize: 14, fontWeight: 600, background: "transparent", color: "var(--fb-ink)", padding: "4px 6px", borderRadius: 6, minWidth: 160 },
+  toolbarRight: { display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap" },
+  toolbarDivider: { width: 1, height: 20, background: "var(--fb-border)", margin: "0 4px" },
+  tabBtn: { display: "flex", alignItems: "center", gap: 6, padding: "6px 12px", borderRadius: 7, border: "1px solid transparent", background: "transparent", color: "#6B6E79", fontSize: 13, fontWeight: 500 },
+  tabBtnActive: { display: "flex", alignItems: "center", gap: 6, padding: "6px 12px", borderRadius: 7, border: "1px solid var(--fb-border)", background: "var(--fb-primary-soft)", color: "var(--fb-primary)", fontSize: 13, fontWeight: 600 },
+  ghostBtn: { display: "flex", alignItems: "center", gap: 6, padding: "6px 12px", borderRadius: 7, border: "1px solid var(--fb-border)", background: "var(--fb-surface)", color: "#4A4D57", fontSize: 13, fontWeight: 500 },
+  primaryBtn: { display: "flex", alignItems: "center", gap: 6, padding: "6px 13px", borderRadius: 7, border: "1px solid var(--fb-primary)", background: "var(--fb-primary)", color: "#fff", fontSize: 13, fontWeight: 600 },
+  saveStatus: { display: "flex", alignItems: "center", gap: 5, fontSize: 12, color: "var(--fb-muted)", minWidth: 60 },
+  countBadge: { fontSize: 10.5, fontWeight: 700, background: "var(--fb-primary-soft)", color: "var(--fb-primary)", borderRadius: 9, padding: "1px 6px", marginLeft: 2 },
+  loadingScreen: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", color: "var(--fb-muted)" },
+  libraryBody: { padding: "var(--fb-space-panel)", overflowY: "auto", display: "flex", flexDirection: "column", gap: 4 },
+  libraryRow: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10, padding: "10px 8px", borderRadius: 8, border: "1px solid #F0F1F4" },
+  libraryRowTitle: { fontSize: 13.5, fontWeight: 600, color: "var(--fb-ink)", display: "flex", alignItems: "center", gap: 8, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+  libraryRowMeta: { fontSize: 11.5, color: "var(--fb-muted)", marginTop: 2 },
+  currentBadge: { fontSize: 10, fontWeight: 700, color: "var(--fb-primary)", background: "var(--fb-primary-soft)", padding: "2px 6px", borderRadius: 5, flexShrink: 0 },
+  workArea: { display: "flex", flex: 1, minHeight: 0 },
+  palette: { width: 200, borderRight: "1px solid var(--fb-border)", background: "var(--fb-surface)", padding: "var(--fb-space-panel)", overflowY: "auto" },
+  panelHeading: { fontSize: 11, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--fb-muted)", marginBottom: 10 },
+  activeSectionHint: { fontSize: 11.5, color: "var(--fb-muted)", marginBottom: 14, lineHeight: 1.4 },
+  paletteList: { display: "flex", flexDirection: "column", gap: 4 },
+  paletteItem: { display: "flex", alignItems: "center", gap: 9, padding: "8px 9px", borderRadius: 8, border: "1px solid transparent", background: "transparent", fontSize: 13, color: "#33353E", textAlign: "left" },
+  canvas: { flex: 1, padding: "var(--fb-space-canvas)", overflowY: "auto", background: "var(--fb-canvas)" },
+  sectionBlock: { borderRadius: 12, padding: "var(--fb-space-panel)", marginBottom: "var(--fb-space-section)", transition: "border-color 0.12s" },
+  sectionHeader: { display: "flex", alignItems: "center", gap: 8, marginBottom: 12, flexWrap: "wrap" },
+  chevronBtn: { width: 22, height: 22, display: "flex", alignItems: "center", justifyContent: "center", border: "none", background: "transparent", color: "var(--fb-muted)", flexShrink: 0 },
+  colorDot: { width: 10, height: 10, borderRadius: "50%", border: "1px solid var(--fb-border)", flexShrink: 0 },
+  sectionTitleInput: { border: "none", outline: "none", background: "transparent", fontSize: 14, fontWeight: 700, color: "var(--fb-ink)", padding: "2px 0", minWidth: 120, flex: 1 },
+  sectionHeaderActions: { display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap", marginLeft: "auto" },
+  sectionEmpty: { fontSize: 12.5, color: "var(--fb-muted)", padding: "18px 4px", textAlign: "center", border: "1px dashed var(--fb-border)", borderRadius: 8 },
+  submitStyleRow: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", background: "#F7F8FA", border: "1px solid #F0F1F4", borderRadius: 8, padding: "6px 10px", marginBottom: 12 },
+  miniLabel: { fontSize: 11, fontWeight: 600, color: "var(--fb-muted)" },
+  resetLinkBtn: { display: "flex", alignItems: "center", gap: 3, fontSize: 11, color: "var(--fb-muted)", background: "transparent", border: "none", padding: "2px 4px" },
+  addSectionBtn: { display: "flex", alignItems: "center", justifyContent: "center", gap: 6, width: "100%", padding: "10px", borderRadius: 10, border: "1px dashed #C7C9D6", background: "transparent", color: "var(--fb-primary)", fontSize: 13, fontWeight: 600 },
+  swatchRow: { display: "flex", alignItems: "center", gap: 5, flexWrap: "wrap" },
+  swatchBtn: { width: 20, height: 20, borderRadius: "50%", border: "1px solid var(--fb-border)", padding: 0 },
+  swatchBtnActive: { border: "2px solid var(--fb-primary)" },
+  colorPickerInput: { width: 22, height: 22, padding: 0, border: "none", borderRadius: "50%", overflow: "hidden", background: "none", cursor: "pointer" },
+  fieldList: { display: "flex", flexWrap: "wrap", gap: "var(--fb-space-field)" },
+  ticket: { display: "flex", alignItems: "stretch", background: "var(--fb-surface)", border: "1px solid var(--fb-border)", borderRadius: 10, position: "relative", transition: "border-color 0.12s, box-shadow 0.12s" },
+  ticketSelected: { borderColor: "var(--fb-primary)", boxShadow: "0 0 0 3px var(--fb-primary-soft)" },
+  ticketDragOver: { borderColor: "var(--fb-muted)" },
+  ticketIndex: { fontFamily: "'JetBrains Mono', monospace", fontSize: 13, fontWeight: 700, color: "#C7C9D6", width: 34, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 },
+  ticketPerforation: { width: 0, borderLeft: "1px dashed var(--fb-border)" },
+  ticketBody: { flex: 1, padding: "10px var(--fb-space-ticket)", minWidth: 0 },
+  ticketTop: { display: "flex", alignItems: "center", gap: 7, marginBottom: 4 },
+  typeBadge: { fontSize: 10.5, fontFamily: "'JetBrains Mono', monospace", color: "var(--fb-muted)" },
+  requiredBadge: { fontSize: 10, fontWeight: 700, color: "#B4522F", background: "var(--fb-danger-soft)", padding: "2px 6px", borderRadius: 5, letterSpacing: "0.02em", marginLeft: "auto" },
+  chipRow: { display: "flex", gap: 5, marginBottom: 7, flexWrap: "wrap" },
+  miniBadge: { fontSize: 10, fontWeight: 600, color: "var(--fb-primary)", background: "var(--fb-primary-soft)", padding: "2px 6px", borderRadius: 5, letterSpacing: "0.02em" },
+  segmented: { display: "flex", gap: 3, background: "#F0F1F4", padding: 3, borderRadius: 8, marginBottom: 4 },
+  segmentedBtn: { flex: 1, display: "flex", alignItems: "center", justifyContent: "center", gap: 5, padding: "6px 8px", borderRadius: 6, border: "none", background: "transparent", color: "#6B6E79", fontSize: 12.5, fontWeight: 500 },
+  segmentedBtnActive: { flex: 1, display: "flex", alignItems: "center", justifyContent: "center", gap: 5, padding: "6px 8px", borderRadius: 6, border: "none", background: "#fff", color: "var(--fb-ink)", fontSize: 12.5, fontWeight: 600, boxShadow: "0 1px 2px rgba(0,0,0,0.08)" },
+  iconGrid: { display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 5, marginTop: 6 },
+  iconGridBtn: { width: 30, height: 30, borderRadius: 7, border: "1px solid var(--fb-border)", background: "#fff", display: "flex", alignItems: "center", justifyContent: "center", color: "#6B6E79" },
+  iconGridBtnActive: { width: 30, height: 30, borderRadius: 7, border: "1px solid var(--fb-primary)", background: "var(--fb-primary-soft)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--fb-primary)" },
+  styleToggleRow: { display: "flex", gap: 5, marginBottom: 4 },
+  styleToggle: { width: 30, height: 30, borderRadius: 7, border: "1px solid var(--fb-border)", background: "#fff", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--fb-muted)" },
+  styleToggleActive: { width: 30, height: 30, borderRadius: 7, border: "1px solid var(--fb-primary)", background: "var(--fb-primary-soft)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--fb-primary)" },
+  previewInput: { border: "1px solid #E9EAEE", borderRadius: 7, padding: "7px 10px", fontSize: 13, color: "var(--fb-muted)", background: "#FBFBFD", display: "flex", alignItems: "center", justifyContent: "space-between" },
+  previewRadio: { display: "flex", alignItems: "center", gap: 6, fontSize: 13, color: "#4A4D57" },
+  ticketActions: { display: "flex", flexDirection: "column", gap: 3, padding: 8, borderLeft: "1px solid #F0F1F4" },
+  iconBtn: { width: 24, height: 24, borderRadius: 6, border: "1px solid #E9EAEE", background: "#fff", display: "flex", alignItems: "center", justifyContent: "center", color: "#6B6E79" },
+  iconBtnDanger: { color: "var(--fb-danger)" },
+  inspector: { width: 270, borderLeft: "1px solid var(--fb-border)", background: "var(--fb-surface)", padding: "var(--fb-space-panel)", overflowY: "auto" },
+  inspectorEmpty: { fontSize: 13, color: "var(--fb-muted)", lineHeight: 1.5, marginTop: 6 },
+  inspectorBody: { display: "flex", flexDirection: "column", gap: 4 },
+  helperText: { fontSize: 11, color: "var(--fb-muted)", lineHeight: 1.4, margin: "2px 0 4px" },
+  propLabel: { fontSize: 11.5, fontWeight: 600, color: "#6B6E79", marginTop: 12, marginBottom: 5 },
+  propInput: { border: "1px solid var(--fb-border)", borderRadius: 7, padding: "7px 9px", fontSize: 13, color: "var(--fb-ink)", outline: "none", width: "100%", boxSizing: "border-box" },
+  optionList: { display: "flex", flexDirection: "column", gap: 6 },
+  optionRow: { display: "flex", gap: 6, alignItems: "center" },
+  optionInput: { flex: 1, border: "1px solid var(--fb-border)", borderRadius: 6, padding: "6px 8px", fontSize: 12.5, outline: "none", minWidth: 0, boxSizing: "border-box" },
+  addOptionBtn: { display: "flex", alignItems: "center", gap: 5, fontSize: 12.5, color: "var(--fb-primary)", background: "transparent", border: "1px dashed #C7C9D6", borderRadius: 7, padding: "6px 8px", justifyContent: "center", marginTop: 2 },
+  toggleRow: { display: "flex", alignItems: "center", gap: 8, background: "transparent", border: "none", padding: "8px 0" },
+  toggleTrack: { width: 30, height: 17, borderRadius: 20, position: "relative", transition: "background 0.15s", display: "inline-block" },
+  toggleThumb: { position: "absolute", top: 2, left: 2, width: 13, height: 13, borderRadius: "50%", background: "#fff", transition: "transform 0.15s", boxShadow: "0 1px 2px rgba(0,0,0,0.2)" },
+  inspectorDivider: { height: 1, background: "var(--fb-border)", margin: "14px 0 10px" },
+  deleteFieldBtn: { display: "flex", alignItems: "center", gap: 6, fontSize: 12.5, color: "var(--fb-danger)", background: "var(--fb-danger-soft)", border: "none", borderRadius: 7, padding: "8px 10px", justifyContent: "center" },
+  modalOverlay: { position: "fixed", inset: 0, background: "rgba(20,22,28,0.45)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 50 },
+  modal: { background: "#fff", borderRadius: 12, width: 520, maxHeight: "70vh", display: "flex", flexDirection: "column", overflow: "hidden", boxShadow: "0 20px 60px rgba(0,0,0,0.25)" },
+  modalHeader: { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "12px 16px", borderBottom: "1px solid var(--fb-border)" },
+  jsonPre: { margin: 0, padding: 16, fontSize: 12, lineHeight: 1.6, overflow: "auto", background: "#14171C", color: "#D6D8E0", fontFamily: "'JetBrains Mono', monospace" },
+  previewWrap: { flex: 1, display: "flex", justifyContent: "center", padding: "var(--fb-space-page) 20px", overflowY: "auto", background: "var(--fb-canvas)" },
+  previewToolbar: { width: "100%", display: "flex", gap: 10, marginBottom: 16, justifyContent: "center" },
+  previewCard: { width: "100%", maxWidth: 480, background: "var(--fb-page-bg)", border: "1px solid var(--fb-border)", borderRadius: 12, padding: "var(--fb-space-page)" },
+  previewTitle: { fontSize: 19, fontWeight: 700, margin: "0 0 20px" },
+  previewLabel: { display: "block", fontSize: 13, fontWeight: 600, color: "#33353E", marginBottom: 6 },
+  previewGrid: { display: "flex", flexWrap: "wrap", gap: "var(--fb-space-field)" },
+  sectionRuntimeTitle: { fontSize: 15, fontWeight: 700, margin: "0 0 12px", color: "var(--fb-ink)" },
+  imagePlaceholder: { display: "flex", alignItems: "center", justifyContent: "center", border: "1px dashed var(--fb-border)" },
+  fieldError: { display: "flex", alignItems: "center", gap: 5, fontSize: 12, color: "var(--fb-danger)", marginTop: 5 },
+  formErrorNote: { display: "flex", alignItems: "center", gap: 6, fontSize: 12.5, color: "var(--fb-danger)", marginTop: 10, justifyContent: "center" },
+  submittedList: { display: "flex", flexDirection: "column", gap: 8, marginTop: 4 },
+  submittedRow: { display: "flex", justifyContent: "space-between", gap: 12, fontSize: 13, padding: "6px 0", borderBottom: "1px solid var(--fb-border)" },
+  submittedLabel: { color: "var(--fb-muted)", flexShrink: 0 },
+  submittedValue: { color: "var(--fb-ink)", fontWeight: 600, textAlign: "right" },
+  realInput: { width: "100%", border: "1px solid var(--fb-border)", borderRadius: 8, padding: "9px 11px", fontSize: 13.5, outline: "none", color: "var(--fb-ink)", boxSizing: "border-box" },
+  realInputError: { borderColor: "var(--fb-danger)" },
+  submitBtn: { marginTop: 8, color: "#fff", border: "none", borderRadius: 8, fontWeight: 600, width: "100%" },
+  layoutPanel: { position: "absolute", top: "calc(100% + 6px)", right: 0, width: 260, background: "#fff", border: "1px solid var(--fb-border)", borderRadius: 10, boxShadow: "0 12px 32px rgba(0,0,0,0.18)", padding: 14, zIndex: 60, maxHeight: "70vh", overflowY: "auto" },
+  layoutPanelHeader: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 4 },
+  spacingRow: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, padding: "4px 0" },
+  spacingLabel: { fontSize: 12, color: "#4A4D57" },
+  spacingInput: { width: 60, border: "1px solid var(--fb-border)", borderRadius: 6, padding: "4px 6px", fontSize: 12, textAlign: "right", outline: "none" }
+};
+
+// src/components/Segmented.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Segmented({ options, value, onChange }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.segmented, children: options.map((opt) => {
+    const Icon = opt.icon;
+    const active = value === opt.value;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { type: "button", style: active ? styles.segmentedBtnActive : styles.segmentedBtn, onClick: () => onChange(opt.value), children: [
+      Icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: 13 }),
+      opt.label
+    ] }, opt.value);
+  }) });
+}
+
+// src/components/LayoutPopover.tsx
+var import_react5 = require("react");
+var import_lucide_react3 = require("lucide-react");
+
+// src/constants/colors.ts
+var COLOR_SWATCHES = ["", "#1B1E24", "#5B5FEF", "#C4432E", "#0EA5A4", "#D97706"];
+var SECTION_BG_SWATCHES = ["", "#FFFFFF", "#F5F6F8", "#EEF0FF", "#FDF4E7", "#E9F7EF", "#FDECEC"];
+var BUTTON_COLOR_SWATCHES = ["", "#5B5FEF", "#0EA5A4", "#D97706", "#C4432E", "#1B1E24"];
+
+// src/constants/layout.ts
+var import_lucide_react2 = require("lucide-react");
+var WIDTH_OPTIONS = [
+  { value: "1/3", label: "1/3" },
+  { value: "1/2", label: "1/2" },
+  { value: "1/1", labelKey: "full" }
+];
+var WIDTH_PERCENT = { "1/3": "33.3333%", "1/2": "50%", "1/1": "100%" };
+var ALIGN_MAP = { top: "flex-start", middle: "center", bottom: "flex-end" };
+function effectiveWidth(width, device) {
+  if (device === "mobile") return "1/1";
+  if (device === "tablet" && width === "1/3") return "1/2";
+  return width || "1/1";
+}
+var SPACING_FIELDS = [
+  { key: "pagePadding", labelKey: "spacingPagePadding" },
+  { key: "canvasPadding", labelKey: "spacingCanvasPadding" },
+  { key: "sectionGap", labelKey: "spacingSectionGap" },
+  { key: "fieldGap", labelKey: "spacingFieldGap" },
+  { key: "toolbarPadding", labelKey: "spacingToolbarPadding" },
+  { key: "panelPadding", labelKey: "spacingPanelPadding" },
+  { key: "ticketPadding", labelKey: "spacingTicketPadding" }
+];
+function buildDeviceOptions(baseMaxWidth, chrome) {
+  const mw = Number(baseMaxWidth) > 0 ? baseMaxWidth : DEFAULT_THEME.layout.maxWidth;
+  return [
+    { value: "laptop", label: chrome.deviceLaptop, icon: import_lucide_react2.Monitor, maxWidth: mw },
+    { value: "tablet", label: chrome.deviceTablet, icon: import_lucide_react2.Tablet, maxWidth: Math.min(mw, 480) },
+    { value: "mobile", label: chrome.deviceMobile, icon: import_lucide_react2.Smartphone, maxWidth: Math.min(mw, 340) }
+  ];
+}
+
+// src/components/LayoutPopover.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function LayoutPopover({ chrome, theme, updateThemeColor, updateThemeLayout, resetTheme }) {
+  const [open, setOpen] = (0, import_react5.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { style: styles.iconBtn, title: chrome.spacing, onClick: () => setOpen((v) => !v), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react3.Ruler, { size: 14 }) }),
+    open && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: styles.layoutPanel, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: styles.layoutPanelHeader, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { fontWeight: 600, fontSize: 13 }, children: [
+          chrome.theme,
+          " / ",
+          chrome.spacing
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", { type: "button", style: styles.resetLinkBtn, onClick: resetTheme, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react3.RotateCcw, { size: 11 }),
+          " ",
+          chrome.reset
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { style: styles.propLabel, children: chrome.primaryColor }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: styles.swatchRow, children: [
+        BUTTON_COLOR_SWATCHES.slice(1).map((c) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", title: c, style: { ...styles.swatchBtn, background: c, ...theme.primary === c ? styles.swatchBtnActive : {} }, onClick: () => updateThemeColor("primary", c) }, c)),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "color", value: theme.primary, onChange: (e) => updateThemeColor("primary", e.target.value), style: styles.colorPickerInput })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { style: styles.propLabel, children: chrome.pageBackground }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: styles.swatchRow, children: [
+        SECTION_BG_SWATCHES.filter(Boolean).map((c) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", title: c, style: { ...styles.swatchBtn, background: c, ...theme.pageBackground === c ? styles.swatchBtnActive : {} }, onClick: () => updateThemeColor("pageBackground", c) }, c)),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "color", value: theme.pageBackground, onChange: (e) => updateThemeColor("pageBackground", e.target.value), style: styles.colorPickerInput })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { style: styles.propLabel, children: chrome.maxWidthPx }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "number", style: styles.propInput, value: theme.layout.maxWidth, onChange: (e) => updateThemeLayout("maxWidth", Number(e.target.value) || DEFAULT_THEME.layout.maxWidth) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: styles.inspectorDivider }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: styles.panelHeading, children: chrome.spacing }),
+      SPACING_FIELDS.map(({ key, labelKey }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: styles.spacingRow, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: styles.spacingLabel, children: chrome[labelKey] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "number", style: styles.spacingInput, value: theme.layout[key], onChange: (e) => updateThemeLayout(key, Number(e.target.value) || 0) })
+      ] }, key))
+    ] })
+  ] });
+}
+
+// src/components/Toolbar.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Toolbar({
+  title,
+  language,
+  languages,
+  mode,
+  saveState,
+  chrome,
+  themeEditable,
+  theme,
+  savedFormsCount,
+  onTitleChange,
+  onLanguageChange,
+  onModeChange,
+  onOpenSettings,
+  onNewForm,
+  onOpenLibrary,
+  onSaveExisting,
+  onOpenJson,
+  updateThemeColor,
+  updateThemeLayout,
+  resetTheme
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles.toolbar, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles.toolbarLeft, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles.logoMark, children: "FB" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { value: t(title, language), onChange: (e) => onTitleChange(e.target.value), style: styles.titleInput, "aria-label": "Form title" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles.toolbarRight, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: styles.saveStatus, children: [
+        saveState === "saving" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react4.Loader2, { size: 12, className: "spin" }),
+          " ",
+          chrome.saving
+        ] }),
+        saveState === "saved" && chrome.saved,
+        saveState === "error" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: { color: "var(--fb-danger)", display: "flex", alignItems: "center", gap: 4 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react4.AlertCircle, { size: 12 }),
+          " ",
+          chrome.saveFailed
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles.toolbarDivider }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react4.Languages, { size: 14, color: "var(--fb-muted)" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Segmented, { options: languages.map((l) => ({ value: l.code, label: l.label })), value: language, onChange: onLanguageChange }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles.toolbarDivider }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { style: mode === "build" ? styles.tabBtnActive : styles.tabBtn, onClick: () => onModeChange("build"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react4.Pencil, { size: 14 }),
+        " ",
+        chrome.build
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { style: mode === "preview" ? styles.tabBtnActive : styles.tabBtn, onClick: () => onModeChange("preview"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react4.Eye, { size: 14 }),
+        " ",
+        chrome.preview
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles.toolbarDivider }),
+      themeEditable && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LayoutPopover, { chrome, theme, updateThemeColor, updateThemeLayout, resetTheme }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { style: styles.iconBtn, title: chrome.settings, onClick: onOpenSettings, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react4.Settings, { size: 14 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { style: styles.ghostBtn, onClick: onNewForm, title: chrome.startNewForm, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react4.FilePlus2, { size: 14 }),
+        " ",
+        chrome.newForm
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { style: styles.ghostBtn, onClick: onOpenLibrary, title: chrome.openSavedForm, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react4.FolderOpen, { size: 14 }),
+        " ",
+        chrome.myForms,
+        savedFormsCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: styles.countBadge, children: savedFormsCount })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { style: styles.primaryBtn, onClick: onSaveExisting, title: chrome.saveToLibraryTitle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react4.Save, { size: 14 }),
+        " ",
+        chrome.save
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { style: styles.ghostBtn, onClick: onOpenJson, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react4.Code2, { size: 14 }),
+        " ",
+        chrome.viewJson
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/Palette.tsx
+var import_lucide_react5 = require("lucide-react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Palette({ activeSectionLabel, chrome, onAddField }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles.palette, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles.activeSectionHint, children: [
+      chrome.addingTo,
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: activeSectionLabel })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles.panelHeading, children: chrome.contentBlocks }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles.paletteList, children: CONTENT_TYPES.map((f) => {
+      const Icon = f.icon;
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("button", { style: styles.paletteItem, onClick: () => onAddField(f.type), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: 16, color: "var(--fb-primary)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: chrome[FIELD_TYPE_CHROME_KEY[f.type]] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react5.Plus, { size: 13, color: "#A6A8B3", style: { marginLeft: "auto" } })
+      ] }, f.type);
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { ...styles.panelHeading, marginTop: 16 }, children: chrome.formFields }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles.paletteList, children: FORM_TYPES.map((f) => {
+      const Icon = f.icon;
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("button", { style: styles.paletteItem, onClick: () => onAddField(f.type), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: 16, color: "var(--fb-primary)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: chrome[FIELD_TYPE_CHROME_KEY[f.type]] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react5.Plus, { size: 13, color: "#A6A8B3", style: { marginLeft: "auto" } })
+      ] }, f.type);
+    }) })
+  ] });
+}
+
+// src/components/Canvas.tsx
+var import_lucide_react12 = require("lucide-react");
+
+// src/components/SectionCard.tsx
+var import_lucide_react11 = require("lucide-react");
+
+// src/constants/submitStyle.ts
+var SUBMIT_SIZE_OPTIONS = [
+  { value: "sm", label: "S" },
+  { value: "md", label: "M" },
+  { value: "lg", label: "L" }
+];
+var SUBMIT_SIZE_STYLES = {
+  sm: { padding: "7px 12px", fontSize: 12.5 },
+  md: { padding: "10px 16px", fontSize: 13.5 },
+  lg: { padding: "13px 22px", fontSize: 15 }
+};
+function resolveSubmitStyle(style) {
+  const sizeStyle = SUBMIT_SIZE_STYLES[style?.size || "md"] || SUBMIT_SIZE_STYLES.md;
+  return { ...sizeStyle, background: style?.color || "var(--fb-primary)" };
+}
+
+// src/components/FieldTicket.tsx
+var import_lucide_react10 = require("lucide-react");
+
+// src/components/fields/FieldBlock.tsx
+var import_lucide_react9 = require("lucide-react");
+
+// src/constants/typography.ts
+var import_lucide_react6 = require("lucide-react");
+var FONT_SIZE_OPTIONS = [
+  { value: "sm", label: "S", px: 12 },
+  { value: "md", label: "M", px: 14 },
+  { value: "lg", label: "L", px: 18 },
+  { value: "xl", label: "XL", px: 24 }
+];
+var TEXT_ALIGN_OPTIONS = [
+  { value: "left", label: "", icon: import_lucide_react6.AlignLeft },
+  { value: "center", label: "", icon: import_lucide_react6.AlignCenter },
+  { value: "right", label: "", icon: import_lucide_react6.AlignRight }
+];
+var PARAGRAPH_TAG_OPTIONS = ["h1", "h2", "h3", "p", "caption"];
+var TAG_PRESETS = {
+  h1: { fontSize: "xl", fontWeight: "bold" },
+  h2: { fontSize: "lg", fontWeight: "bold" },
+  h3: { fontSize: "md", fontWeight: "bold" },
+  p: { fontSize: "md", fontWeight: "normal" },
+  caption: { fontSize: "sm", fontWeight: "normal" }
+};
+var TAG_TO_ELEMENT = { h1: "h1", h2: "h2", h3: "h3", p: "p", caption: "span" };
+var TAG_CHROME_KEY = { p: "tagBody", caption: "tagCaption" };
+
+// src/constants/icons.ts
+var import_lucide_react7 = require("lucide-react");
+var ICON_LIBRARY = {
+  Type: import_lucide_react7.Type,
+  Mail: import_lucide_react7.Mail,
+  Phone: import_lucide_react7.Phone,
+  Hash: import_lucide_react7.Hash,
+  Lock: import_lucide_react7.Lock,
+  AlignLeft: import_lucide_react7.AlignLeft,
+  ChevronDown: import_lucide_react7.ChevronDown,
+  Circle: import_lucide_react7.Circle,
+  CheckSquare: import_lucide_react7.CheckSquare,
+  ListChecks: import_lucide_react7.ListChecks,
+  ToggleLeft: import_lucide_react7.ToggleLeft,
+  Calendar: import_lucide_react7.Calendar,
+  Clock: import_lucide_react7.Clock,
+  User: import_lucide_react7.User,
+  MapPin: import_lucide_react7.MapPin,
+  Building2: import_lucide_react7.Building2,
+  Globe: import_lucide_react7.Globe,
+  CreditCard: import_lucide_react7.CreditCard,
+  FileText: import_lucide_react7.FileText,
+  Star: import_lucide_react7.Star,
+  Flag: import_lucide_react7.Flag,
+  Home: import_lucide_react7.Home,
+  Briefcase: import_lucide_react7.Briefcase
+};
+
+// src/components/fields/ImageBlock.tsx
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function buildImageStyle(field) {
+  const aspectRatio = field.shape === "banner" ? "16 / 5" : "1 / 1";
+  return {
+    width: "100%",
+    aspectRatio,
+    objectFit: "cover",
+    display: "block",
+    borderRadius: field.shape === "circle" ? "50%" : 8,
+    background: "var(--fb-canvas)"
+  };
+}
+function ImageBlock({ field, lang }) {
+  const shapeStyle = buildImageStyle(field);
+  const img = field.src ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: field.src, alt: t(field.alt, lang || "en"), style: shapeStyle }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { ...shapeStyle, ...styles.imagePlaceholder }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react8.Image, { size: 20, color: "var(--fb-muted)" }) });
+  return field.link ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { href: field.link, target: "_blank", rel: "noreferrer", style: { display: "block" }, children: img }) : img;
+}
+
+// src/components/fields/FieldBlock.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function FieldBlock({ field, lang, onFieldChange, strings, chrome, error, isBuild }) {
+  if (field.type === "image") return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ImageBlock, { field, lang });
+  if (field.type === "paragraph") {
+    const fontPx = FONT_SIZE_OPTIONS.find((f) => f.value === field.fontSize)?.px || 14;
+    const Tag = TAG_TO_ELEMENT[field.tag] || "p";
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Tag, { style: { margin: 0, whiteSpace: "pre-wrap", fontSize: fontPx, fontWeight: field.fontWeight === "bold" ? 700 : 400, fontStyle: field.fontStyle === "italic" ? "italic" : "normal", textAlign: field.textAlign || "left", color: field.color || "var(--fb-ink)", lineHeight: 1.6 }, children: t(field.content, lang) || "..." });
+  }
+  const meta = getMeta(field.type);
+  const IconComp = field.showIcon && field.displayIcon ? ICON_LIBRARY[field.displayIcon] : null;
+  const isInline = field.labelPosition === "inline" && !meta.boolean;
+  const labelText = t(field.label, lang);
+  const showLabel = !meta.boolean && !field.hideLabel;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: isInline ? "row" : "column", alignItems: isInline ? "center" : "stretch", gap: isInline ? 10 : 6 }, children: [
+      showLabel && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { style: { ...styles.previewLabel, marginBottom: isInline ? 0 : 6, flexShrink: 0, width: isInline ? 120 : "auto", display: "flex", alignItems: "center", gap: 6 }, children: [
+        IconComp && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconComp, { size: 14, color: "#6B6E79" }),
+        labelText || (isBuild ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontStyle: "italic", color: "var(--fb-muted)" }, children: chrome?.untitledField || "Untitled field" }) : ""),
+        field.required && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { color: "var(--fb-danger)" }, children: " *" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1, minWidth: 0 }, children: renderInteractive(field, lang, onFieldChange, IconComp, !!error, strings) })
+    ] }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: styles.fieldError, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react9.CircleAlert, { size: 12 }),
+      " ",
+      error
+    ] })
+  ] });
+}
+function renderInteractive(field, lang, onFieldChange, IconComp, hasError, strings) {
+  const value = field.defaultValue;
+  const set = (v) => onFieldChange(field.id, { defaultValue: v });
+  const inputStyle = hasError ? { ...styles.realInput, ...styles.realInputError } : styles.realInput;
+  const common = { style: inputStyle, placeholder: t("placeholder" in field ? field.placeholder : void 0, lang), value: value || "", onChange: (e) => set(e.target.value) };
+  if (field.type === "input") {
+    switch (field.inputType) {
+      case "number":
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "number", ...common, min: field.min ?? void 0, max: field.max ?? void 0 });
+      case "email":
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "email", ...common });
+      case "password":
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "password", ...common, maxLength: field.maxLength || void 0 });
+      case "phone":
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "tel", ...common });
+      case "date":
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "date", ...common });
+      case "time":
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "time", ...common });
+      default:
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "text", ...common, maxLength: field.maxLength || void 0 });
+    }
+  }
+  switch (field.type) {
+    case "textarea":
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("textarea", { ...common, rows: 3, maxLength: field.maxLength || void 0 });
+    case "select":
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("select", { style: inputStyle, value: value || "", onChange: (e) => set(e.target.value), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "", children: strings.selectPlaceholder }),
+        (field.options || []).map((o) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: o.value, children: t(o.label, lang) }, o.value))
+      ] });
+    case "radio":
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { display: "flex", gap: 16, flexWrap: "wrap", marginTop: 4 }, children: (field.options || []).map((o) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { style: styles.previewRadio, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "radio", name: field.id, value: o.value, checked: value === o.value, onChange: (e) => set(e.target.value) }),
+        t(o.label, lang)
+      ] }, o.value)) });
+    case "checkboxGroup": {
+      const vals = Array.isArray(value) ? value : [];
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { display: "flex", gap: 16, flexWrap: "wrap", marginTop: 4 }, children: (field.options || []).map((o) => {
+        const checked = vals.includes(o.value);
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { style: styles.previewRadio, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "checkbox", checked, onChange: (e) => {
+            const next = e.target.checked ? [...vals, o.value] : vals.filter((v) => v !== o.value);
+            set(next);
+          }, style: { accentColor: "var(--fb-primary)" } }),
+          t(o.label, lang)
+        ] }, o.value);
+      }) });
+    }
+    case "checkbox":
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { style: styles.previewRadio, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "checkbox", checked: !!value, onChange: (e) => set(e.target.checked), style: { accentColor: "var(--fb-primary)" } }),
+        IconComp && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconComp, { size: 14, color: "#6B6E79" }),
+        t(field.label, lang),
+        field.required && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { color: "var(--fb-danger)" }, children: " *" })
+      ] });
+    case "toggle":
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { style: styles.previewRadio, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "checkbox", checked: !!value, onChange: (e) => set(e.target.checked), style: { accentColor: "var(--fb-primary)" } }),
+        IconComp && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconComp, { size: 14, color: "#6B6E79" }),
+        t(field.label, lang)
+      ] });
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "text", ...common });
+  }
+}
+
+// src/components/FieldTicket.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function FieldTicket({
+  field,
+  idx,
+  isSelected,
+  isDragOver,
+  chrome,
+  strings,
+  language,
+  onSelect,
+  onFieldChange,
+  onMoveField,
+  onDuplicateField,
+  onDeleteField,
+  dropZoneHandlers,
+  dragHandleProps
+}) {
+  const meta = getMeta(field.type);
+  const Icon = meta.icon;
+  const widthPct = WIDTH_PERCENT[field.width || "1/1"];
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      ...dropZoneHandlers,
+      onClick: onSelect,
+      style: {
+        ...styles.ticket,
+        flex: `1 1 calc(${widthPct} - 10px)`,
+        minWidth: 230,
+        alignSelf: ALIGN_MAP[field.verticalAlign || "top"],
+        ...isSelected ? styles.ticketSelected : {},
+        ...isDragOver ? styles.ticketDragOver : {}
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: styles.ticketIndex, children: String(idx + 1).padStart(2, "0") }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: styles.ticketPerforation }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: styles.ticketBody, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: styles.ticketTop, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { ...dragHandleProps, style: { cursor: "grab", display: "flex" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react10.GripVertical, { size: 14, color: "#C4C6D0" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: 13, color: "var(--fb-primary)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { style: styles.typeBadge, children: [
+              chrome[FIELD_TYPE_CHROME_KEY[field.type]] || field.type,
+              field.type === "input" && field.inputType && field.inputType !== "text" ? ` \xB7 ${chrome[INPUT_SUBTYPE_CHROME_KEY[field.inputType]]}` : ""
+            ] }),
+            field.required && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: styles.requiredBadge, children: chrome.required })
+          ] }),
+          field.width && field.width !== "1/1" || field.labelPosition === "inline" || field.verticalAlign !== "top" || field.hideLabel ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: styles.chipRow, children: [
+            field.width && field.width !== "1/1" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { style: styles.miniBadge, children: [
+              chrome.width,
+              " ",
+              field.width
+            ] }),
+            field.labelPosition === "inline" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: styles.miniBadge, children: chrome.inline }),
+            field.verticalAlign !== "top" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: styles.miniBadge, children: chrome[field.verticalAlign] }),
+            field.hideLabel && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: styles.miniBadge, children: chrome.hideLabel })
+          ] }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FieldBlock, { field, lang: language, onFieldChange, strings, chrome, isBuild: true }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: styles.ticketActions, onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { style: styles.iconBtn, title: chrome.moveUp, onClick: () => onMoveField(field.id, -1), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react10.ArrowUp, { size: 13 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { style: styles.iconBtn, title: chrome.moveDown, onClick: () => onMoveField(field.id, 1), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react10.ArrowDown, { size: 13 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { style: styles.iconBtn, title: chrome.duplicate, onClick: () => onDuplicateField(field.id), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react10.Copy, { size: 13 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { style: { ...styles.iconBtn, ...styles.iconBtnDanger }, title: chrome.delete, onClick: () => onDeleteField(field.id), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react10.Trash2, { size: 13 }) })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/SectionCard.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function SectionCard({
+  section,
+  sIdx,
+  sectionsLength,
+  isActive,
+  submitMode,
+  submitStyle,
+  selectedId,
+  dragOverKey,
+  chrome,
+  strings,
+  language,
+  onActivate,
+  onToggleCollapse,
+  onUpdateTitle,
+  onUpdateBackground,
+  onDuplicateSection,
+  onMoveSection,
+  onDeleteSection,
+  onUpdateSectionSubmitStyle,
+  onClearSectionSubmitStyle,
+  onSelectField,
+  onFieldChange,
+  onMoveField,
+  onDuplicateField,
+  onDeleteField,
+  getDropZoneHandlers,
+  getDragHandleProps
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      style: { ...styles.sectionBlock, background: section.background || "transparent", border: isActive ? "1px solid var(--fb-primary)" : "1px dashed var(--fb-border)" },
+      onClick: onActivate,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: styles.sectionHeader, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { style: styles.chevronBtn, onClick: (e) => {
+            e.stopPropagation();
+            onToggleCollapse();
+          }, children: section.collapsed ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react11.ChevronRight, { size: 15 }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react11.ChevronDown, { size: 15 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { ...styles.colorDot, background: section.background || "var(--fb-canvas)" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "input",
+            {
+              style: styles.sectionTitleInput,
+              placeholder: chrome.sectionTitlePlaceholder(sIdx + 1),
+              value: t(section.title, language),
+              onChange: (e) => onUpdateTitle(e.target.value),
+              onClick: (e) => e.stopPropagation()
+            }
+          ),
+          section.collapsed && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: styles.miniBadge, children: chrome.fieldsCount(section.fields.length) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: styles.sectionHeaderActions, onClick: (e) => e.stopPropagation(), children: [
+            !section.collapsed && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: styles.swatchRow, children: [
+              SECTION_BG_SWATCHES.map((c) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", title: c || chrome.none, style: { ...styles.swatchBtn, background: c || "var(--fb-canvas)", ...section.background === c ? styles.swatchBtnActive : {} }, onClick: () => onUpdateBackground(c) }, c || "none")),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { type: "color", title: chrome.customColor, value: /^#/.test(section.background) ? section.background : "#ffffff", onChange: (e) => onUpdateBackground(e.target.value), style: styles.colorPickerInput })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { style: styles.iconBtn, title: chrome.duplicate, onClick: onDuplicateSection, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react11.Copy, { size: 13 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { style: styles.iconBtn, title: chrome.moveUp, disabled: sIdx === 0, onClick: () => onMoveSection(-1), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react11.ArrowUp, { size: 13 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { style: styles.iconBtn, title: chrome.moveDown, disabled: sIdx === sectionsLength - 1, onClick: () => onMoveSection(1), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react11.ArrowDown, { size: 13 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { style: { ...styles.iconBtn, ...styles.iconBtnDanger }, title: chrome.deleteSection, disabled: sectionsLength <= 1, onClick: onDeleteSection, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react11.Trash2, { size: 13 }) })
+          ] })
+        ] }),
+        !section.collapsed && submitMode === "perSection" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: styles.submitStyleRow, onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: styles.miniLabel, children: chrome.submitStyle }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: styles.swatchRow, children: BUTTON_COLOR_SWATCHES.map((c) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", title: c || chrome.none, style: { ...styles.swatchBtn, background: c || "var(--fb-primary)", ...(section.submitStyle?.color || "") === c ? styles.swatchBtnActive : {} }, onClick: () => onUpdateSectionSubmitStyle({ color: c }) }, c || "inherit")) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Segmented, { options: SUBMIT_SIZE_OPTIONS, value: section.submitStyle?.size || submitStyle.size, onChange: (v) => onUpdateSectionSubmitStyle({ size: v }) }),
+          section.submitStyle && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { type: "button", style: styles.resetLinkBtn, onClick: onClearSectionSubmitStyle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react11.RotateCcw, { size: 11 }),
+            " ",
+            chrome.reset
+          ] })
+        ] }),
+        !section.collapsed && (section.fields.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: styles.sectionEmpty, children: chrome.noFieldsInSection }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: styles.fieldList, children: section.fields.map((field, idx) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          FieldTicket,
+          {
+            field,
+            idx,
+            sectionId: section.id,
+            isSelected: field.id === selectedId,
+            isDragOver: dragOverKey === `${section.id}:${idx}`,
+            chrome,
+            strings,
+            language,
+            onSelect: () => onSelectField(field.id),
+            onFieldChange,
+            onMoveField,
+            onDuplicateField,
+            onDeleteField,
+            dropZoneHandlers: getDropZoneHandlers(section.id, idx),
+            dragHandleProps: getDragHandleProps(section.id, idx)
+          },
+          field.id
+        )) }))
+      ]
+    }
+  );
+}
+
+// src/components/Canvas.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function Canvas({
+  sections,
+  activeSectionId,
+  submitMode,
+  submitStyle,
+  selectedId,
+  dragOverKey,
+  chrome,
+  strings,
+  language,
+  onActivateSection,
+  onToggleSectionCollapse,
+  onUpdateSectionTitle,
+  onUpdateSectionBackground,
+  onDuplicateSection,
+  onMoveSection,
+  onDeleteSection,
+  onUpdateSectionSubmitStyle,
+  onClearSectionSubmitStyle,
+  onAddSection,
+  onSelectField,
+  onFieldChange,
+  onMoveField,
+  onDuplicateField,
+  onDeleteField,
+  getDropZoneHandlers,
+  getDragHandleProps
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: styles.canvas, children: [
+    sections.map((section, sIdx) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      SectionCard,
+      {
+        section,
+        sIdx,
+        sectionsLength: sections.length,
+        isActive: activeSectionId === section.id,
+        submitMode,
+        submitStyle,
+        selectedId,
+        dragOverKey,
+        chrome,
+        strings,
+        language,
+        onActivate: () => onActivateSection(section.id),
+        onToggleCollapse: () => onToggleSectionCollapse(section.id),
+        onUpdateTitle: (value) => onUpdateSectionTitle(section.id, value),
+        onUpdateBackground: (color) => onUpdateSectionBackground(section.id, color),
+        onDuplicateSection: () => onDuplicateSection(section.id),
+        onMoveSection: (dir) => onMoveSection(section.id, dir),
+        onDeleteSection: () => onDeleteSection(section.id),
+        onUpdateSectionSubmitStyle: (patch) => onUpdateSectionSubmitStyle(section.id, patch),
+        onClearSectionSubmitStyle: () => onClearSectionSubmitStyle(section.id),
+        onSelectField: (fieldId) => onSelectField(section.id, fieldId),
+        onFieldChange,
+        onMoveField,
+        onDuplicateField,
+        onDeleteField,
+        getDropZoneHandlers,
+        getDragHandleProps
+      },
+      section.id
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("button", { style: styles.addSectionBtn, onClick: onAddSection, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react12.Layers, { size: 14 }),
+      " ",
+      chrome.addSection
+    ] })
+  ] });
+}
+
+// src/components/Inspector.tsx
+var import_lucide_react13 = require("lucide-react");
+
+// src/components/fields/DefaultValueEditor.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function DefaultValueEditor({ field, meta, lang, chrome, onChange }) {
+  if (meta.isContent) return null;
+  const f = field;
+  if (meta.boolean) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { style: styles.propLabel, children: chrome.defaultValue }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { style: styles.toggleRow, onClick: () => onChange({ defaultValue: !f.defaultValue }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { ...styles.toggleTrack, background: f.defaultValue ? "var(--fb-primary)" : "var(--fb-border)" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { ...styles.toggleThumb, transform: f.defaultValue ? "translateX(16px)" : "translateX(0)" } }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { fontSize: 13, color: "#4A4D57" }, children: f.defaultValue ? chrome.checked : chrome.unchecked })
+      ] })
+    ] });
+  }
+  if (meta.multiValue) {
+    const selectedVals = f.defaultValue || [];
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { style: styles.propLabel, children: chrome.defaultChecked }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: styles.optionList, children: (f.options || []).map((o) => {
+        const checked = selectedVals.includes(o.value);
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { style: { ...styles.previewRadio, cursor: "pointer" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("input", { type: "checkbox", checked, onChange: (e) => {
+            const next = e.target.checked ? [...selectedVals, o.value] : selectedVals.filter((v) => v !== o.value);
+            onChange({ defaultValue: next });
+          }, style: { accentColor: "var(--fb-primary)" } }),
+          t(o.label, lang)
+        ] }, o.value);
+      }) })
+    ] });
+  }
+  if (meta.options) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { style: styles.propLabel, children: chrome.defaultValue }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("select", { style: styles.propInput, value: f.defaultValue || "", onChange: (e) => onChange({ defaultValue: e.target.value }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "", children: chrome.none }),
+        (f.options || []).map((o) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: o.value, children: t(o.label, lang) }, o.value))
+      ] })
+    ] });
+  }
+  const htmlType = field.type === "input" && field.inputType === "number" ? "number" : field.type === "input" && field.inputType === "date" ? "date" : field.type === "input" && field.inputType === "time" ? "time" : "text";
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { style: styles.propLabel, children: chrome.defaultValue }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("input", { type: htmlType, style: styles.propInput, value: f.defaultValue || "", onChange: (e) => onChange({ defaultValue: e.target.value }) })
+  ] });
+}
+
+// src/components/Inspector.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function Inspector({ selected, language, chrome, onUpdateField, onDeleteField, onUpdateOption, onAddOption, onRemoveOption }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: styles.inspector, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: styles.panelHeading, children: chrome.properties }),
+    !selected ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: styles.inspectorEmpty, children: chrome.selectFieldHint }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      InspectorBody,
+      {
+        selected,
+        language,
+        chrome,
+        onUpdateField,
+        onDeleteField,
+        onUpdateOption,
+        onAddOption,
+        onRemoveOption
+      }
+    )
+  ] });
+}
+function InspectorBody({ selected, language, chrome, onUpdateField, onDeleteField, onUpdateOption, onAddOption, onRemoveOption }) {
+  const meta = getMeta(selected.type);
+  const f = selected;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: styles.inspectorBody, children: [
+    !meta.isContent && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { style: styles.propInput, value: t(selected.label, language), onChange: (e) => onUpdateField({ label: withLang(selected.label, language, e.target.value) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { style: styles.toggleRow, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { type: "checkbox", checked: !!selected.hideLabel, onChange: (e) => onUpdateField({ hideLabel: e.target.checked }), style: { width: 15, height: 15, accentColor: "var(--fb-primary)" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: { fontSize: 13, color: "#4A4D57" }, children: chrome.hideLabel })
+      ] })
+    ] }),
+    meta.hasSubtype && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.inputType }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("select", { style: styles.propInput, value: f.inputType || "text", onChange: (e) => onUpdateField({ inputType: e.target.value }), children: INPUT_SUBTYPES.map((s) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: s, children: chrome[INPUT_SUBTYPE_CHROME_KEY[s]] }, s)) })
+    ] }),
+    selected.type === "paragraph" && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.content }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("textarea", { style: { ...styles.propInput, minHeight: 70, resize: "vertical" }, value: t(selected.content, language), onChange: (e) => onUpdateField({ content: withLang(selected.content, language, e.target.value) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: styles.inspectorDivider }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: styles.panelHeading, children: chrome.typography }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.headingStyle }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Segmented, { options: PARAGRAPH_TAG_OPTIONS.map((v) => ({ value: v, label: TAG_CHROME_KEY[v] ? chrome[TAG_CHROME_KEY[v]] : v.toUpperCase() })), value: selected.tag || "p", onChange: (v) => onUpdateField({ tag: v, ...TAG_PRESETS[v] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.width }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Segmented, { options: FONT_SIZE_OPTIONS, value: selected.fontSize || "md", onChange: (v) => onUpdateField({ fontSize: v }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.style }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: styles.styleToggleRow, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", style: selected.fontWeight === "bold" ? styles.styleToggleActive : styles.styleToggle, onClick: () => onUpdateField({ fontWeight: selected.fontWeight === "bold" ? "normal" : "bold" }), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react13.Bold, { size: 14 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", style: selected.fontStyle === "italic" ? styles.styleToggleActive : styles.styleToggle, onClick: () => onUpdateField({ fontStyle: selected.fontStyle === "italic" ? "normal" : "italic" }), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react13.Italic, { size: 14 }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.align }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Segmented, { options: TEXT_ALIGN_OPTIONS, value: selected.textAlign || "left", onChange: (v) => onUpdateField({ textAlign: v }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.color }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: styles.swatchRow, children: [
+        COLOR_SWATCHES.map((c) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", title: c || chrome.none, style: { ...styles.swatchBtn, background: c || "var(--fb-ink)", ...selected.color === c ? styles.swatchBtnActive : {} }, onClick: () => onUpdateField({ color: c }) }, c || "default")),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { type: "color", value: selected.color || "#1B1E24", onChange: (e) => onUpdateField({ color: e.target.value }), style: styles.colorPickerInput })
+      ] })
+    ] }),
+    selected.type === "image" && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.imageUrl }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { style: styles.propInput, placeholder: "https://...", value: selected.src || "", onChange: (e) => onUpdateField({ src: e.target.value }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { style: styles.helperText, children: chrome.imageUrlHelper }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.altText }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { style: styles.propInput, value: t(selected.alt, language), onChange: (e) => onUpdateField({ alt: withLang(selected.alt, language, e.target.value) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.linkOptional }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { style: styles.propInput, placeholder: "https://...", value: selected.link || "", onChange: (e) => onUpdateField({ link: e.target.value }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.shape }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Segmented, { options: IMAGE_SHAPES.map((v) => ({ value: v, label: chrome[IMAGE_SHAPE_CHROME_KEY[v]] })), value: selected.shape || "square", onChange: (v) => onUpdateField({ shape: v }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { style: styles.helperText, children: "Fills the field's own width (set below under Layout) and scales height automatically \u2014 always responsive, never overflows." })
+    ] }),
+    meta.placeholder && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.placeholder }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { style: styles.propInput, value: t(f.placeholder, language), onChange: (e) => onUpdateField({ placeholder: withLang(f.placeholder, language, e.target.value) }) })
+    ] }),
+    selected.type === "input" && (selected.inputType === "text" || selected.inputType === "password" || !selected.inputType) && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.maxLength }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { type: "number", style: styles.propInput, placeholder: chrome.noLimit, value: selected.maxLength || "", onChange: (e) => onUpdateField({ maxLength: e.target.value ? Number(e.target.value) : null }) })
+    ] }),
+    selected.type === "input" && selected.inputType === "number" && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.minValue }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { type: "number", style: styles.propInput, value: selected.min ?? "", onChange: (e) => onUpdateField({ min: e.target.value === "" ? null : Number(e.target.value) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.maxValue }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { type: "number", style: styles.propInput, value: selected.max ?? "", onChange: (e) => onUpdateField({ max: e.target.value === "" ? null : Number(e.target.value) }) })
+    ] }),
+    selected.type === "textarea" && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.maxLength }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { type: "number", style: styles.propInput, placeholder: chrome.noLimit, value: selected.maxLength || "", onChange: (e) => onUpdateField({ maxLength: e.target.value ? Number(e.target.value) : null }) })
+    ] }),
+    meta.options && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.options }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: styles.optionList, children: [
+        (f.options || []).map((opt, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: styles.optionRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { style: styles.optionInput, value: t(opt.label, language), onChange: (e) => onUpdateOption(i, { label: withLang(opt.label, language, e.target.value) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { style: styles.iconBtn, onClick: () => onRemoveOption(i), disabled: (f.options || []).length <= 1, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react13.X, { size: 13 }) })
+        ] }, i)),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("button", { style: styles.addOptionBtn, onClick: onAddOption, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react13.Plus, { size: 13 }),
+          " ",
+          chrome.addOption
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DefaultValueEditor, { field: selected, meta, lang: language, chrome, onChange: onUpdateField }),
+    !meta.isContent && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { style: styles.toggleRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { type: "checkbox", checked: !!selected.required, onChange: (e) => onUpdateField({ required: e.target.checked }), style: { width: 15, height: 15, accentColor: "var(--fb-primary)" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: { fontSize: 13, color: "#4A4D57" }, children: chrome.requiredField })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: styles.inspectorDivider }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: styles.panelHeading, children: chrome.layout }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.width }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Segmented, { options: WIDTH_OPTIONS.map((o) => ({ ...o, label: o.labelKey ? chrome[o.labelKey] : o.label || "" })), value: selected.width || "1/1", onChange: (v) => onUpdateField({ width: v }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.verticalAlign }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Segmented, { options: [{ value: "top", label: chrome.top }, { value: "middle", label: chrome.middle }, { value: "bottom", label: chrome.bottom }], value: selected.verticalAlign || "top", onChange: (v) => onUpdateField({ verticalAlign: v }) }),
+    !meta.boolean && !meta.isContent && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { style: styles.propLabel, children: chrome.labelPosition }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Segmented, { options: [{ value: "top", label: chrome.above }, { value: "inline", label: chrome.inline }], value: selected.labelPosition || "top", onChange: (v) => onUpdateField({ labelPosition: v }) })
+    ] }),
+    !meta.isContent && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: styles.inspectorDivider }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: styles.panelHeading, children: chrome.icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { style: styles.toggleRow, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { type: "checkbox", checked: !!selected.showIcon, onChange: (e) => onUpdateField({ showIcon: e.target.checked }), style: { width: 15, height: 15, accentColor: "var(--fb-primary)" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: { fontSize: 13, color: "#4A4D57" }, children: chrome.showIcon })
+      ] }),
+      selected.showIcon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: styles.iconGrid, children: Object.keys(ICON_LIBRARY).map((key) => {
+        const IconComp = ICON_LIBRARY[key];
+        const active = selected.displayIcon === key;
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", title: key, style: active ? styles.iconGridBtnActive : styles.iconGridBtn, onClick: () => onUpdateField({ displayIcon: key }), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconComp, { size: 15 }) }, key);
+      }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: styles.inspectorDivider }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("button", { style: styles.deleteFieldBtn, onClick: onDeleteField, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react13.Trash2, { size: 13 }),
+      " ",
+      chrome.deleteField
+    ] })
+  ] });
+}
+
+// src/components/PreviewPane.tsx
+var import_react6 = require("react");
+var import_lucide_react14 = require("lucide-react");
+
+// src/lib/validate.ts
+function validateField(field, value, strings) {
+  const meta = getMeta(field.type);
+  if (meta.isContent) return null;
+  const isEmpty = value === void 0 || value === null || value === "" || Array.isArray(value) && value.length === 0 || !!meta.boolean && !!field.required && value !== true;
+  if (field.required && isEmpty) return strings.requiredError;
+  if (isEmpty) return null;
+  if (field.type === "input" && field.inputType === "email" && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(value))) return strings.invalidEmail;
+  if (field.type === "input" && field.inputType === "phone" && !/^[0-9+\-\s()]{7,20}$/.test(String(value))) return strings.invalidPhone;
+  if (field.type === "input" && field.inputType === "number") {
+    const num = Number(value);
+    if (field.min !== void 0 && field.min !== null && field.min !== "" && num < Number(field.min)) return strings.tooSmall(field.min);
+    if (field.max !== void 0 && field.max !== null && field.max !== "" && num > Number(field.max)) return strings.tooLarge(field.max);
+  }
+  if ((field.type === "textarea" || field.type === "input" && !["number", "date", "time"].includes(field.inputType)) && field.maxLength && String(value).length > field.maxLength) {
+    return strings.tooLong(field.maxLength);
+  }
+  return null;
+}
+
+// src/lib/format.ts
+function formatValue(field, lang) {
+  const v = field.defaultValue;
+  if (Array.isArray(v)) {
+    if (v.length === 0) return "\u2014";
+    return v.map((val) => t(field.options?.find((o) => o.value === val)?.label, lang) || val).join(", ");
+  }
+  if (typeof v === "boolean") return v ? "Yes" : "No";
+  if (field.options && v) return t(field.options.find((o) => o.value === v)?.label, lang) || v;
+  if (v === void 0 || v === null || v === "") return "\u2014";
+  return String(v);
+}
+
+// src/components/PreviewPane.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function PreviewPane({ title, sections, onFieldChange, language, strings, chrome, baseMaxWidth, submitLabel, submitMode, submitStyle }) {
+  const [device, setDevice] = (0, import_react6.useState)("laptop");
+  const [errors, setErrors] = (0, import_react6.useState)({});
+  const [submitted, setSubmitted] = (0, import_react6.useState)(null);
+  const deviceOptions = buildDeviceOptions(baseMaxWidth, chrome);
+  const maxWidth = (deviceOptions.find((d) => d.value === device) || deviceOptions[0]).maxWidth;
+  const allFields = sections.flatMap((s) => s.fields);
+  const submitText = t(submitLabel, language) || strings.submit;
+  const overallHasFormFields = allFields.some((f) => !getMeta(f.type).isContent);
+  function runValidation(fields) {
+    const errs = {};
+    fields.forEach((f) => {
+      const e = validateField(f, f.defaultValue, strings);
+      if (e) errs[f.id] = e;
+    });
+    return errs;
+  }
+  function handleSubmitAll() {
+    const errs = runValidation(allFields);
+    setErrors(errs);
+    if (Object.keys(errs).length > 0) {
+      setSubmitted(null);
+      return;
+    }
+    setSubmitted(allFields.filter((f) => !getMeta(f.type).isContent).map((f) => ({ label: t(f.label, language), value: formatValue(f, language) })));
+  }
+  function handleSubmitSection(section) {
+    const errs = runValidation(section.fields);
+    setErrors((prev) => {
+      const next = { ...prev };
+      section.fields.forEach((f) => delete next[f.id]);
+      return { ...next, ...errs };
+    });
+    if (Object.keys(errs).length > 0) {
+      setSubmitted(null);
+      return;
+    }
+    setSubmitted(section.fields.filter((f) => !getMeta(f.type).isContent).map((f) => ({ label: t(f.label, language), value: formatValue(f, language) })));
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: styles.previewWrap, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { width: "100%", maxWidth, display: "flex", flexDirection: "column", alignItems: "center" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: styles.previewToolbar, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Segmented, { options: deviceOptions, value: device, onChange: setDevice }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { ...styles.previewCard, maxWidth, width: "100%" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h2", { style: styles.previewTitle, children: t(title, language) }),
+        allFields.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { style: { color: "var(--fb-muted)", fontSize: 14 }, children: strings.addFieldsHint }),
+        sections.map((section) => {
+          const sectionHasFormFields = section.fields.some((f) => !getMeta(f.type).isContent);
+          const sectionHasErrors = section.fields.some((f) => errors[f.id]);
+          return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { background: section.background || "transparent", padding: section.background ? 16 : 0, borderRadius: section.background ? 10 : 0, marginBottom: "var(--fb-space-section)" }, children: [
+            t(section.title, language) && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { style: styles.sectionRuntimeTitle, children: t(section.title, language) }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: styles.previewGrid, children: section.fields.map((field) => {
+              const width = effectiveWidth(field.width, device);
+              const flexBasis = `1 1 calc(${WIDTH_PERCENT[width]} - 14px)`;
+              return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { flex: flexBasis, minWidth: 0, alignSelf: ALIGN_MAP[field.verticalAlign || "top"] }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FieldBlock, { field, lang: language, onFieldChange, strings, chrome, error: errors[field.id] }) }, field.id);
+            }) }),
+            submitMode === "perSection" && sectionHasFormFields && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { style: { ...styles.submitBtn, ...resolveSubmitStyle(section.submitStyle || submitStyle) }, onClick: () => handleSubmitSection(section), children: submitText }),
+              sectionHasErrors && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { style: styles.formErrorNote, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react14.CircleAlert, { size: 13 }),
+                " ",
+                strings.fixErrors
+              ] })
+            ] })
+          ] }, section.id);
+        }),
+        submitMode === "combined" && overallHasFormFields && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { style: { ...styles.submitBtn, ...resolveSubmitStyle(submitStyle) }, onClick: handleSubmitAll, children: submitText }),
+        submitMode === "combined" && Object.keys(errors).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { style: styles.formErrorNote, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react14.CircleAlert, { size: 13 }),
+          " ",
+          strings.fixErrors
+        ] })
+      ] })
+    ] }),
+    submitted && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: styles.modalOverlay, onClick: () => setSubmitted(null), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { ...styles.modal, width: 420 }, onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: styles.modalHeader, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { style: { fontWeight: 600, fontSize: 14, display: "flex", alignItems: "center", gap: 7 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react14.PartyPopper, { size: 15, color: "var(--fb-primary)" }),
+          " ",
+          strings.submittedTitle
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { style: styles.iconBtn, onClick: () => setSubmitted(null), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react14.X, { size: 16 }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { padding: 16 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { style: { fontSize: 12.5, color: "var(--fb-muted)", marginTop: 0 }, children: strings.submittedBody }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: styles.submittedList, children: submitted.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: styles.submittedRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: styles.submittedLabel, children: row.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: styles.submittedValue, children: row.value })
+        ] }, i)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { style: { ...styles.primaryBtn, width: "100%", justifyContent: "center", marginTop: 14 }, onClick: () => setSubmitted(null), children: strings.close })
+      ] })
+    ] }) })
+  ] });
+}
+
+// src/components/modals/JsonModal.tsx
+var import_lucide_react15 = require("lucide-react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function JsonModal({ chrome, jsonString, copied, onCopy, onClose }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: styles.modalOverlay, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: styles.modal, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: styles.modalHeader, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { fontWeight: 600, fontSize: 14 }, children: chrome.formJson }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", gap: 8 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("button", { style: styles.ghostBtn, onClick: onCopy, children: [
+          copied ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react15.Check, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react15.ClipboardCopy, { size: 14 }),
+          copied ? chrome.copied : chrome.copy
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { style: styles.iconBtn, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react15.X, { size: 16 }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("pre", { style: styles.jsonPre, children: jsonString })
+  ] }) });
+}
+
+// src/components/modals/LibraryModal.tsx
+var import_lucide_react16 = require("lucide-react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function LibraryModal({ chrome, savedForms, currentFormId, onOpen, onDelete, onClose }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: styles.modalOverlay, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: styles.modal, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: styles.modalHeader, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { fontWeight: 600, fontSize: 14 }, children: chrome.myForms }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { style: styles.iconBtn, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react16.X, { size: 16 }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: styles.libraryBody, children: savedForms.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: styles.inspectorEmpty, children: chrome.nothingSaved }) : savedForms.map((f) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: styles.libraryRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { minWidth: 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: styles.libraryRowTitle, children: [
+          f.title,
+          f.id === currentFormId && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: styles.currentBadge, children: chrome.current })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: styles.libraryRowMeta, children: [
+          chrome.updated,
+          " ",
+          new Date(f.updatedAt).toLocaleString()
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", gap: 6, flexShrink: 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { style: styles.ghostBtn, onClick: () => onOpen(f.id), children: chrome.open }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { style: { ...styles.iconBtn, ...styles.iconBtnDanger }, title: chrome.delete, onClick: () => onDelete(f.id), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react16.Trash2, { size: 13 }) })
+      ] })
+    ] }, f.id)) })
+  ] }) });
+}
+
+// src/components/modals/SaveAsModal.tsx
+var import_react7 = require("react");
+var import_lucide_react17 = require("lucide-react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function SaveAsModal({ chrome, suggestedName, onSave, onClose }) {
+  const [name, setName] = (0, import_react7.useState)(suggestedName);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: styles.modalOverlay, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { ...styles.modal, width: 380 }, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: styles.modalHeader, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { style: { fontWeight: 600, fontSize: 14 }, children: chrome.saveForm }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { style: styles.iconBtn, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react17.X, { size: 16 }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { padding: 16 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", { style: styles.propLabel, children: chrome.formName }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("input", { autoFocus: true, style: styles.propInput, value: name, onChange: (e) => setName(e.target.value), onKeyDown: (e) => e.key === "Enter" && name.trim() && onSave(name.trim()) }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("button", { style: { ...styles.primaryBtn, width: "100%", justifyContent: "center", marginTop: 14 }, disabled: !name.trim(), onClick: () => onSave(name.trim()), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react17.Save, { size: 14 }),
+        " ",
+        chrome.saveToLibrary
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/components/modals/SettingsModal.tsx
+var import_lucide_react18 = require("lucide-react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function SettingsModal({
+  chrome,
+  strings,
+  submitLabel,
+  language,
+  submitMode,
+  submitStyle,
+  onSubmitLabelChange,
+  onSubmitModeChange,
+  onSubmitStyleChange,
+  onClose
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: styles.modalOverlay, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { ...styles.modal, width: 400 }, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: styles.modalHeader, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { fontWeight: 600, fontSize: 14 }, children: chrome.formSettings }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { style: styles.iconBtn, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react18.X, { size: 16 }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { padding: 16 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: styles.panelHeading, children: chrome.submitSectionTitle }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { style: styles.propLabel, children: chrome.submitLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("input", { style: styles.propInput, placeholder: strings.submit, value: t(submitLabel, language), onChange: (e) => onSubmitLabelChange(e.target.value) }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { style: styles.propLabel, children: chrome.submitMode }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Segmented, { options: [{ value: "combined", label: chrome.combined }, { value: "perSection", label: chrome.perSection }], value: submitMode, onChange: onSubmitModeChange }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: styles.inspectorDivider }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: styles.panelHeading, children: chrome.submitStyle }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { style: styles.propLabel, children: chrome.color }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: styles.swatchRow, children: [
+        BUTTON_COLOR_SWATCHES.map((c) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", title: c || chrome.none, style: { ...styles.swatchBtn, background: c || "var(--fb-primary)", ...(submitStyle.color || "") === c ? styles.swatchBtnActive : {} }, onClick: () => onSubmitStyleChange({ color: c }) }, c || "default")),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("input", { type: "color", value: submitStyle.color || "#5B5FEF", onChange: (e) => onSubmitStyleChange({ color: e.target.value }), style: styles.colorPickerInput })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { style: styles.propLabel, children: chrome.buttonSize }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Segmented, { options: SUBMIT_SIZE_OPTIONS, value: submitStyle.size, onChange: (v) => onSubmitStyleChange({ size: v }) })
+    ] })
+  ] }) });
+}
+
+// src/styles/globalCss.ts
+var css = `
+  * { box-sizing: border-box; }
+  button { font-family: inherit; cursor: pointer; }
+  input, textarea, select { font-family: inherit; }
+  @keyframes fb-spin { to { transform: rotate(360deg); } }
+  .spin { animation: fb-spin 0.8s linear infinite; }
+`;
+
+// src/FormBuilder.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function FormBuilder({
+  theme: themeOverrideProp,
+  language: languageOverride,
+  languages = DEFAULT_LANGUAGES,
+  strings: stringsOverride,
+  chrome: chromeOverride,
+  themeEditable = false,
+  storage: storageProp
+} = {}) {
+  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 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 [showSettings, setShowSettings] = (0, import_react8.useState)(false);
+  const [showLibrary, setShowLibrary] = (0, import_react8.useState)(false);
+  const [copied, setCopied] = (0, import_react8.useState)(false);
+  const persistence = usePersistence({
+    storage,
+    language,
+    document: {
+      title: doc.title,
+      submitLabel: doc.submitLabel,
+      submitMode: doc.submitMode,
+      submitStyle: doc.submitStyle,
+      themeOverrides,
+      sections: doc.sections
+    },
+    onLoadDocument: doc.loadDocument,
+    onLoadThemeOverrides: replaceThemeOverrides,
+    onTitleChange: doc.setTitle,
+    onNewForm: () => {
+      doc.resetToBlank();
+      resetTheme();
+    },
+    ensureActiveSection: () => doc.setActiveSectionId((prev) => prev ?? doc.sections[0]?.id ?? null)
+  });
+  const jsonDoc = {
+    version: 4,
+    title: doc.title,
+    submitLabel: doc.submitLabel,
+    submitMode: doc.submitMode,
+    submitStyle: doc.submitStyle,
+    themeOverrides,
+    sections: doc.sections.map((s) => ({ id: s.id, title: s.title, background: s.background, collapsed: s.collapsed, submitStyle: s.submitStyle, fields: s.fields }))
+  };
+  const jsonString = JSON.stringify(jsonDoc, null, 2);
+  function copyJson() {
+    navigator.clipboard.writeText(jsonString).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    }).catch(() => {
+    });
+  }
+  const activeSectionIdx = doc.sections.findIndex((s) => s.id === doc.activeSection?.id);
+  const activeSectionLabel = t(doc.activeSection?.title, language) || `#${activeSectionIdx + 1}`;
+  const rootStyle = {
+    ...styles.app,
+    "--fb-primary": theme.primary,
+    "--fb-primary-soft": theme.primarySoft,
+    "--fb-danger": theme.danger,
+    "--fb-danger-soft": theme.dangerSoft,
+    "--fb-ink": theme.ink,
+    "--fb-muted": theme.muted,
+    "--fb-border": theme.border,
+    "--fb-surface": theme.surface,
+    "--fb-canvas": theme.canvas,
+    "--fb-page-bg": theme.pageBackground,
+    "--fb-space-page": `${theme.layout.pagePadding}px`,
+    "--fb-space-canvas": `${theme.layout.canvasPadding}px`,
+    "--fb-space-section": `${theme.layout.sectionGap}px`,
+    "--fb-space-field": `${theme.layout.fieldGap}px`,
+    "--fb-space-toolbar": `${theme.layout.toolbarPadding}px`,
+    "--fb-space-panel": `${theme.layout.panelPadding}px`,
+    "--fb-space-ticket": `${theme.layout.ticketPadding}px`
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: rootStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("style", { children: css }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      Toolbar,
+      {
+        title: doc.title,
+        language,
+        languages,
+        mode,
+        saveState: persistence.saveState,
+        chrome,
+        themeEditable,
+        theme,
+        savedFormsCount: persistence.savedForms.length,
+        onTitleChange: doc.updateTitle,
+        onLanguageChange: setLanguage,
+        onModeChange: setMode,
+        onOpenSettings: () => setShowSettings(true),
+        onNewForm: persistence.newForm,
+        onOpenLibrary: () => setShowLibrary(true),
+        onSaveExisting: persistence.saveExisting,
+        onOpenJson: () => setShowJson(true),
+        updateThemeColor,
+        updateThemeLayout,
+        resetTheme
+      }
+    ),
+    persistence.loadingDraft ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: styles.loadingScreen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react19.Loader2, { size: 20, className: "spin" }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { marginTop: 8, fontSize: 13, color: "var(--fb-muted)" }, children: chrome.loadingDraft })
+    ] }) : mode === "build" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: styles.workArea, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Palette, { activeSectionLabel, chrome, onAddField: doc.addField }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        Canvas,
+        {
+          sections: doc.sections,
+          activeSectionId: doc.activeSectionId,
+          submitMode: doc.submitMode,
+          submitStyle: doc.submitStyle,
+          selectedId: doc.selectedId,
+          dragOverKey: drag.dragOverKey,
+          chrome,
+          strings,
+          language,
+          onActivateSection: doc.setActiveSectionId,
+          onToggleSectionCollapse: doc.toggleSectionCollapse,
+          onUpdateSectionTitle: doc.updateSectionTitle,
+          onUpdateSectionBackground: doc.updateSectionBackground,
+          onDuplicateSection: doc.duplicateSection,
+          onMoveSection: doc.moveSection,
+          onDeleteSection: doc.deleteSection,
+          onUpdateSectionSubmitStyle: doc.updateSectionSubmitStyle,
+          onClearSectionSubmitStyle: doc.clearSectionSubmitStyle,
+          onAddSection: doc.addSection,
+          onSelectField: (sectionId, fieldId) => {
+            doc.setSelectedId(fieldId);
+            doc.setActiveSectionId(sectionId);
+          },
+          onFieldChange: doc.updateField,
+          onMoveField: doc.moveField,
+          onDuplicateField: doc.duplicateField,
+          onDeleteField: doc.deleteField,
+          getDropZoneHandlers: drag.getDropZoneHandlers,
+          getDragHandleProps: drag.getDragHandleProps
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        Inspector,
+        {
+          selected: doc.selected,
+          language,
+          chrome,
+          onUpdateField: (patch) => doc.selected && doc.updateField(doc.selected.id, patch),
+          onDeleteField: () => doc.selected && doc.deleteField(doc.selected.id),
+          onUpdateOption: (optIdx, patch) => doc.selected && doc.updateOption(doc.selected.id, optIdx, patch),
+          onAddOption: () => doc.selected && doc.addOption(doc.selected.id),
+          onRemoveOption: (optIdx) => doc.selected && doc.removeOption(doc.selected.id, optIdx)
+        }
+      )
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      PreviewPane,
+      {
+        title: doc.title,
+        sections: doc.sections,
+        onFieldChange: doc.updateField,
+        language,
+        strings,
+        chrome,
+        baseMaxWidth: theme.layout.maxWidth,
+        submitLabel: doc.submitLabel,
+        submitMode: doc.submitMode,
+        submitStyle: doc.submitStyle
+      }
+    ),
+    showJson && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(JsonModal, { chrome, jsonString, copied, onCopy: copyJson, onClose: () => setShowJson(false) }),
+    showLibrary && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      LibraryModal,
+      {
+        chrome,
+        savedForms: persistence.savedForms,
+        currentFormId: persistence.currentFormId,
+        onOpen: async (id) => {
+          await persistence.loadForm(id);
+          setShowLibrary(false);
+        },
+        onDelete: persistence.deleteForm,
+        onClose: () => setShowLibrary(false)
+      }
+    ),
+    persistence.saveAsPrompt && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      SaveAsModal,
+      {
+        chrome,
+        suggestedName: persistence.saveAsPrompt.suggestedName,
+        onSave: persistence.saveAs,
+        onClose: persistence.dismissSaveAsPrompt
+      }
+    ),
+    showSettings && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      SettingsModal,
+      {
+        chrome,
+        strings,
+        submitLabel: doc.submitLabel,
+        language,
+        submitMode: doc.submitMode,
+        submitStyle: doc.submitStyle,
+        onSubmitLabelChange: doc.updateSubmitLabel,
+        onSubmitModeChange: doc.setSubmitMode,
+        onSubmitStyleChange: doc.updateSubmitStyle,
+        onClose: () => setShowSettings(false)
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FormBuilder,
+  localStorageAdapter
+});
+//# sourceMappingURL=index.cjs.map