@squaredr/fieldcraft-pro 1.3.0 → 1.4.0

package/dist/chunk-22T5PY6L.mjs

@@ -0,0 +1,1081 @@
+import { requireLicense } from './chunk-VECQKSWS.mjs';
+import { createContext, useState, useRef, useEffect, useCallback, useMemo, useContext } from 'react';
+import { playfulPreset, clinicalPreset, highContrastPreset, modernPreset, darkPreset, cleanPreset, FormEngineRenderer } from '@squaredr/fieldcraft-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/theme-editor/preview-schema.ts
+var PREVIEW_SCHEMA = {
+  id: "theme-preview",
+  version: "1.0.0",
+  title: "Theme Preview",
+  description: "See how your theme looks on a real form.",
+  sections: [
+    {
+      id: "s1",
+      title: "Contact Information",
+      questions: [
+        {
+          id: "name",
+          type: "short_text",
+          label: "Full Name",
+          required: true,
+          placeholder: "Jane Doe"
+        },
+        {
+          id: "email",
+          type: "email",
+          label: "Email Address",
+          required: true,
+          placeholder: "jane@example.com"
+        },
+        {
+          id: "department",
+          type: "dropdown",
+          label: "Department",
+          options: [
+            { label: "Engineering", value: "engineering" },
+            { label: "Design", value: "design" },
+            { label: "Marketing", value: "marketing" }
+          ]
+        },
+        {
+          id: "rating",
+          type: "rating",
+          label: "How would you rate this experience?",
+          config: { type: "rating", max: 5 }
+        },
+        {
+          id: "notes",
+          type: "long_text",
+          label: "Additional Notes",
+          placeholder: "Any other feedback..."
+        }
+      ]
+    }
+  ],
+  submitAction: { type: "adapter" }
+};
+
+// src/theme-editor/css-utils.ts
+var COLOR_MAP = {
+  primary: "--fc-primary",
+  primaryForeground: "--fc-primary-foreground",
+  secondary: "--fc-secondary",
+  secondaryForeground: "--fc-secondary-foreground",
+  error: "--fc-error",
+  errorForeground: "--fc-error-foreground",
+  warning: "--fc-warning",
+  success: "--fc-success",
+  surface: "--fc-surface",
+  background: "--fc-background",
+  text: "--fc-text",
+  textMuted: "--fc-text-muted",
+  textDisabled: "--fc-text-disabled",
+  border: "--fc-border",
+  borderFocus: "--fc-border-focus",
+  inputBackground: "--fc-input-background"
+};
+var TYPOGRAPHY_MAP = {
+  fontFamily: "--fc-font-family",
+  scale: "--fc-scale",
+  questionSize: "--fc-question-size",
+  labelSize: "--fc-label-size",
+  helpTextSize: "--fc-help-text-size",
+  bodySize: "--fc-body-size"
+};
+var SHAPE_MAP = {
+  radius: "--fc-radius",
+  inputRadius: "--fc-input-radius",
+  buttonRadius: "--fc-button-radius",
+  cardRadius: "--fc-card-radius"
+};
+var SPACING_MAP = {
+  base: "--fc-spacing-base",
+  sectionGap: "--fc-section-gap",
+  fieldGap: "--fc-field-gap",
+  inputPaddingX: "--fc-input-padding-x",
+  inputPaddingY: "--fc-input-padding-y"
+};
+var LAYOUT_MAP = {
+  maxWidth: "--fc-max-width",
+  alignment: "--fc-alignment",
+  progressPosition: "--fc-progress-position",
+  sectionLayout: "--fc-section-layout"
+};
+function themeToCss(theme) {
+  const lines = [];
+  function addSection(obj, map, comment) {
+    if (!obj) return;
+    const entries = [];
+    for (const [key, cssVar] of Object.entries(map)) {
+      const val = obj[key];
+      if (val == null) continue;
+      if (typeof val === "number") {
+        entries.push(`  ${cssVar}: ${val}px;`);
+      } else {
+        entries.push(`  ${cssVar}: ${String(val)};`);
+      }
+    }
+    if (entries.length > 0) {
+      lines.push(`  /* ${comment} */`);
+      lines.push(...entries);
+      lines.push("");
+    }
+  }
+  lines.push(":root {");
+  addSection(theme.colors, COLOR_MAP, "Colors");
+  addSection(theme.typography, TYPOGRAPHY_MAP, "Typography");
+  addSection(theme.shape, SHAPE_MAP, "Shape");
+  addSection(theme.spacing, SPACING_MAP, "Spacing");
+  addSection(theme.layout, LAYOUT_MAP, "Layout");
+  if (lines.length > 1 && lines[lines.length - 1] === "") {
+    lines.pop();
+  }
+  lines.push("}");
+  return lines.join("\n") + "\n";
+}
+var REVERSE_MAP = {};
+function buildReverseMap() {
+  if (Object.keys(REVERSE_MAP).length > 0) return;
+  const sections = [
+    ["colors", COLOR_MAP],
+    ["typography", TYPOGRAPHY_MAP],
+    ["shape", SHAPE_MAP],
+    ["spacing", SPACING_MAP],
+    ["layout", LAYOUT_MAP]
+  ];
+  for (const [sectionKey, map] of sections) {
+    for (const [propKey, cssVar] of Object.entries(map)) {
+      REVERSE_MAP[cssVar] = [sectionKey, propKey];
+    }
+  }
+}
+var NUMERIC_PROPS = /* @__PURE__ */ new Set([
+  "base",
+  "sectionGap",
+  "fieldGap",
+  "inputPaddingX",
+  "inputPaddingY"
+]);
+function cssToTheme(css) {
+  buildReverseMap();
+  const theme = {};
+  const varRegex = /(--fc-[\w-]+)\s*:\s*([^;]+);/g;
+  let match;
+  while ((match = varRegex.exec(css)) !== null) {
+    const cssVar = match[1];
+    let value = match[2].trim();
+    const mapping = REVERSE_MAP[cssVar];
+    if (!mapping) continue;
+    const [sectionKey, propKey] = mapping;
+    if (NUMERIC_PROPS.has(propKey)) {
+      const num = parseFloat(value);
+      if (!isNaN(num)) {
+        value = num;
+      }
+    }
+    if (!theme[sectionKey]) {
+      theme[sectionKey] = {};
+    }
+    theme[sectionKey][propKey] = value;
+  }
+  return theme;
+}
+function exportCssFile(theme, filename = "fieldcraft-theme.css") {
+  const css = themeToCss(theme);
+  const blob = new Blob([css], { type: "text/css" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+function importCssFile(baseTheme, onImport) {
+  const input = document.createElement("input");
+  input.type = "file";
+  input.accept = ".css";
+  input.onchange = () => {
+    const file = input.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = () => {
+      const cssText = reader.result;
+      const partial = cssToTheme(cssText);
+      const merged = deepMerge(baseTheme, partial);
+      onImport(merged);
+    };
+    reader.readAsText(file);
+  };
+  input.click();
+}
+function deepMerge(base, partial) {
+  const result = { ...base };
+  for (const key of Object.keys(partial)) {
+    const partialSection = partial[key];
+    if (partialSection && typeof partialSection === "object") {
+      result[key] = {
+        ...base[key],
+        ...partialSection
+      };
+    }
+  }
+  return result;
+}
+
+// src/theme-editor/palette-generator.ts
+function generatePalette(baseHex) {
+  const [h, s, l] = hexToHsl(baseHex);
+  const secH = (h + 180) % 360;
+  const isLightBase = l > 50;
+  return {
+    // Primary
+    primary: hslToHex(h, s, clamp(l, 30, 60)),
+    primaryForeground: isLightBase ? "#ffffff" : "#ffffff",
+    // Secondary (complementary)
+    secondary: hslToHex(secH, Math.max(s - 15, 10), clamp(l, 35, 55)),
+    secondaryForeground: "#ffffff",
+    // Surfaces
+    surface: hslToHex(h, Math.max(s - 35, 3), 97),
+    background: "#F4F7F8",
+    inputBackground: hslToHex(h, Math.max(s - 40, 2), 99),
+    // Text
+    text: hslToHex(h, Math.max(s - 30, 5), 12),
+    textMuted: hslToHex(h, Math.max(s - 30, 5), 45),
+    textDisabled: hslToHex(h, Math.max(s - 35, 3), 65),
+    // Borders
+    border: hslToHex(h, Math.max(s - 30, 5), 85),
+    borderFocus: hslToHex(h, s, clamp(l, 35, 55)),
+    // Semantic — Drafting Teal palette
+    error: "#B04A3C",
+    errorForeground: "#FFFFFF",
+    warning: "#C98A2E",
+    success: "#2E7D5B"
+  };
+}
+function applyPaletteToTheme(theme, palette) {
+  return {
+    ...theme,
+    colors: {
+      ...theme.colors,
+      ...palette
+    }
+  };
+}
+function hexToHsl(hex) {
+  const rgb = hexToRgb(hex);
+  const r = rgb[0] / 255;
+  const g = rgb[1] / 255;
+  const b = rgb[2] / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  if (max === min) {
+    return [0, 0, Math.round(l * 100)];
+  }
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  let h = 0;
+  if (max === r) {
+    h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+  } else if (max === g) {
+    h = ((b - r) / d + 2) / 6;
+  } else {
+    h = ((r - g) / d + 4) / 6;
+  }
+  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
+}
+function hslToHex(h, s, l) {
+  const sNorm = s / 100;
+  const lNorm = l / 100;
+  const c = (1 - Math.abs(2 * lNorm - 1)) * sNorm;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = lNorm - c / 2;
+  let r = 0, g = 0, b = 0;
+  if (h < 60) {
+    r = c;
+    g = x;
+    b = 0;
+  } else if (h < 120) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (h < 180) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (h < 240) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (h < 300) {
+    r = x;
+    g = 0;
+    b = c;
+  } else {
+    r = c;
+    g = 0;
+    b = x;
+  }
+  return rgbToHex(
+    Math.round((r + m) * 255),
+    Math.round((g + m) * 255),
+    Math.round((b + m) * 255)
+  );
+}
+function hexToRgb(hex) {
+  const cleaned = hex.replace("#", "");
+  const full = cleaned.length === 3 ? cleaned[0] + cleaned[0] + cleaned[1] + cleaned[1] + cleaned[2] + cleaned[2] : cleaned;
+  return [
+    parseInt(full.substring(0, 2), 16),
+    parseInt(full.substring(2, 4), 16),
+    parseInt(full.substring(4, 6), 16)
+  ];
+}
+function rgbToHex(r, g, b) {
+  return "#" + [r, g, b].map((v) => v.toString(16).padStart(2, "0")).join("");
+}
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+var SWATCH_KEYS = [
+  { key: "primary", label: "Primary" },
+  { key: "secondary", label: "Secondary" },
+  { key: "surface", label: "Surface" },
+  { key: "background", label: "Background" },
+  { key: "text", label: "Text" },
+  { key: "textMuted", label: "Muted" },
+  { key: "border", label: "Border" },
+  { key: "error", label: "Error" },
+  { key: "warning", label: "Warning" },
+  { key: "success", label: "Success" }
+];
+function PaletteGenerator({ theme, onApply, onClose }) {
+  const [baseColor, setBaseColor] = useState(theme.colors?.primary ?? "#3b82f6");
+  const palette = useMemo(() => generatePalette(baseColor), [baseColor]);
+  return /* @__PURE__ */ jsxs("div", { className: "fcte-palette", children: [
+    /* @__PURE__ */ jsxs("div", { className: "fcte-palette__header", children: [
+      /* @__PURE__ */ jsx("span", { className: "fcte-palette__title", children: "Generate Palette" }),
+      /* @__PURE__ */ jsx("button", { className: "fcte-btn fcte-btn--secondary fcte-btn--sm", onClick: onClose, children: "Close" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "fcte-palette__body", children: [
+      /* @__PURE__ */ jsxs("div", { className: "fcte-palette__picker", children: [
+        /* @__PURE__ */ jsx("label", { className: "fcte-palette__label", children: "Base Color" }),
+        /* @__PURE__ */ jsxs("div", { className: "fcte-palette__input-row", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "color",
+              value: baseColor,
+              onChange: (e) => setBaseColor(e.target.value),
+              className: "fcte-field__swatch"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: baseColor,
+              onChange: (e) => setBaseColor(e.target.value),
+              className: "fcte-field__text",
+              spellCheck: false
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "fcte-palette__swatches", children: SWATCH_KEYS.map(({ key, label }) => /* @__PURE__ */ jsxs("div", { className: "fcte-palette__swatch", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "fcte-palette__swatch-color",
+            style: { backgroundColor: palette[key] }
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "fcte-palette__swatch-label", children: label }),
+        /* @__PURE__ */ jsx("div", { className: "fcte-palette__swatch-hex", children: palette[key] })
+      ] }, key)) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "fcte-btn fcte-btn--primary",
+          onClick: () => onApply(applyPaletteToTheme(theme, palette)),
+          children: "Apply to Theme"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/theme-editor/presets.ts
+var draftingTealDarkPreset = {
+  colors: {
+    primary: "#63BDB4",
+    primaryForeground: "#0F1A1F",
+    secondary: "#2F4F4C",
+    secondaryForeground: "#E8EFF1",
+    error: "#E08072",
+    errorForeground: "#0F1A1F",
+    warning: "#E0A94F",
+    success: "#63BDB4",
+    surface: "#16242A",
+    background: "#0F1A1F",
+    text: "#E8EFF1",
+    textMuted: "#8CA1A9",
+    textDisabled: "#3D5259",
+    border: "#2A3B42",
+    borderFocus: "#63BDB4",
+    inputBackground: "#16242A"
+  },
+  typography: {
+    fontFamily: "'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif",
+    scale: "comfortable",
+    questionSize: "1.1875rem",
+    labelSize: "0.8125rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "0.9375rem"
+  },
+  shape: {
+    radius: "none",
+    inputRadius: "0px",
+    buttonRadius: "0px",
+    cardRadius: "0px"
+  },
+  spacing: {
+    base: 16,
+    sectionGap: 32,
+    fieldGap: 24,
+    inputPaddingX: 12,
+    inputPaddingY: 10
+  },
+  layout: {
+    maxWidth: "640px",
+    alignment: "left",
+    progressPosition: "top",
+    sectionLayout: "flat"
+  }
+};
+var draftingTealPreset = {
+  colors: {
+    primary: "#1F6B6E",
+    primaryForeground: "#FFFFFF",
+    secondary: "#B9D1CF",
+    secondaryForeground: "#12222A",
+    error: "#B04A3C",
+    errorForeground: "#FFFFFF",
+    warning: "#C98A2E",
+    success: "#2E7D5B",
+    surface: "#FFFFFF",
+    background: "#F4F7F8",
+    text: "#12222A",
+    textMuted: "#6A7B85",
+    textDisabled: "#B9D1CF",
+    border: "#DCE4E8",
+    borderFocus: "#1F6B6E",
+    inputBackground: "#FFFFFF"
+  },
+  typography: {
+    fontFamily: "'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif",
+    scale: "comfortable",
+    questionSize: "1.1875rem",
+    labelSize: "0.8125rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "0.9375rem"
+  },
+  shape: {
+    radius: "none",
+    inputRadius: "0px",
+    buttonRadius: "0px",
+    cardRadius: "0px"
+  },
+  spacing: {
+    base: 16,
+    sectionGap: 32,
+    fieldGap: 24,
+    inputPaddingX: 12,
+    inputPaddingY: 10
+  },
+  layout: {
+    maxWidth: "640px",
+    alignment: "left",
+    progressPosition: "top",
+    sectionLayout: "flat"
+  }
+};
+var COMPARISON_PRESETS = {
+  "drafting-teal": { label: "Drafting Teal", theme: draftingTealPreset },
+  clean: { label: "Clean", theme: cleanPreset },
+  dark: { label: "Dark", theme: darkPreset },
+  modern: { label: "Modern", theme: modernPreset },
+  "high-contrast": { label: "High Contrast", theme: highContrastPreset },
+  clinical: { label: "Clinical", theme: clinicalPreset },
+  playful: { label: "Playful", theme: playfulPreset }
+};
+function ThemeComparison({ currentTheme, onClose }) {
+  const [compareKey, setCompareKey] = useState("clean");
+  const compareTheme = COMPARISON_PRESETS[compareKey]?.theme ?? cleanPreset;
+  const diffs = getColorDiffs(currentTheme, compareTheme);
+  return /* @__PURE__ */ jsxs("div", { className: "fcte-compare", children: [
+    /* @__PURE__ */ jsxs("div", { className: "fcte-compare__header", children: [
+      /* @__PURE__ */ jsx("span", { className: "fcte-compare__title", children: "Theme Comparison" }),
+      /* @__PURE__ */ jsxs("div", { className: "fcte-compare__controls", children: [
+        /* @__PURE__ */ jsx("label", { className: "fcte-compare__label", children: "Compare with:" }),
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            value: compareKey,
+            onChange: (e) => setCompareKey(e.target.value),
+            className: "fcte-toolbar__preset",
+            children: Object.entries(COMPARISON_PRESETS).map(([key, { label }]) => /* @__PURE__ */ jsx("option", { value: key, children: label }, key))
+          }
+        ),
+        /* @__PURE__ */ jsx("button", { className: "fcte-btn fcte-btn--secondary fcte-btn--sm", onClick: onClose, children: "Close" })
+      ] })
+    ] }),
+    diffs.length > 0 && /* @__PURE__ */ jsxs("div", { className: "fcte-compare__diffs", children: [
+      /* @__PURE__ */ jsxs("span", { className: "fcte-compare__diff-count", children: [
+        diffs.length,
+        " color",
+        diffs.length !== 1 ? "s" : "",
+        " differ"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "fcte-compare__diff-list", children: [
+        diffs.slice(0, 8).map((d) => /* @__PURE__ */ jsxs("div", { className: "fcte-compare__diff-item", children: [
+          /* @__PURE__ */ jsx("span", { className: "fcte-compare__diff-label", children: d.key }),
+          /* @__PURE__ */ jsxs("div", { className: "fcte-compare__diff-swatches", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "fcte-compare__diff-swatch",
+                style: { backgroundColor: d.current },
+                title: `Current: ${d.current}`
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "fcte-compare__diff-arrow", children: "\u2192" }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "fcte-compare__diff-swatch",
+                style: { backgroundColor: d.compare },
+                title: `${COMPARISON_PRESETS[compareKey]?.label}: ${d.compare}`
+              }
+            )
+          ] })
+        ] }, d.key)),
+        diffs.length > 8 && /* @__PURE__ */ jsxs("span", { className: "fcte-compare__diff-more", children: [
+          "+",
+          diffs.length - 8,
+          " more"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "fcte-compare__panels", children: [
+      /* @__PURE__ */ jsxs("div", { className: "fcte-compare__panel", children: [
+        /* @__PURE__ */ jsx("div", { className: "fcte-compare__panel-label", children: "Current Theme" }),
+        /* @__PURE__ */ jsx("div", { className: "fcte-compare__panel-preview", children: /* @__PURE__ */ jsx(
+          FormEngineRenderer,
+          {
+            schema: PREVIEW_SCHEMA,
+            theme: currentTheme,
+            onSubmit: () => {
+            }
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "fcte-compare__panel", children: [
+        /* @__PURE__ */ jsx("div", { className: "fcte-compare__panel-label", children: COMPARISON_PRESETS[compareKey]?.label ?? "Preset" }),
+        /* @__PURE__ */ jsx("div", { className: "fcte-compare__panel-preview", children: /* @__PURE__ */ jsx(
+          FormEngineRenderer,
+          {
+            schema: PREVIEW_SCHEMA,
+            theme: compareTheme,
+            onSubmit: () => {
+            }
+          }
+        ) })
+      ] })
+    ] })
+  ] });
+}
+function getColorDiffs(a, b) {
+  const diffs = [];
+  const aColors = a.colors ?? {};
+  const bColors = b.colors ?? {};
+  const allKeys = /* @__PURE__ */ new Set([...Object.keys(aColors), ...Object.keys(bColors)]);
+  for (const key of allKeys) {
+    const aVal = aColors[key] ?? "";
+    const bVal = bColors[key] ?? "";
+    if (aVal.toLowerCase() !== bVal.toLowerCase() && (aVal || bVal)) {
+      diffs.push({ key, current: aVal || "(unset)", compare: bVal || "(unset)" });
+    }
+  }
+  return diffs;
+}
+var ThemeCtx = createContext({});
+function useEditorTheme() {
+  return useContext(ThemeCtx);
+}
+function themeToCssVars(theme) {
+  const vars = {};
+  if (theme.background) vars["--fcte-bg"] = theme.background;
+  if (theme.surface) vars["--fcte-surface"] = theme.surface;
+  if (theme.surfaceHover) vars["--fcte-surface-hover"] = theme.surfaceHover;
+  if (theme.text) vars["--fcte-text"] = theme.text;
+  if (theme.textMuted) vars["--fcte-text-muted"] = theme.textMuted;
+  if (theme.textDim) vars["--fcte-text-dim"] = theme.textDim;
+  if (theme.border) vars["--fcte-border"] = theme.border;
+  if (theme.borderStrong) vars["--fcte-border-strong"] = theme.borderStrong;
+  if (theme.inputBackground) vars["--fcte-input-bg"] = theme.inputBackground;
+  if (theme.accent) vars["--fcte-accent"] = theme.accent;
+  if (theme.accentForeground) vars["--fcte-accent-text"] = theme.accentForeground;
+  return vars;
+}
+function ThemeEditorThemeProvider({ theme, children }) {
+  const resolved = theme ?? {};
+  const cssVars = useMemo(() => themeToCssVars(resolved), [resolved]);
+  return /* @__PURE__ */ jsx(ThemeCtx.Provider, { value: resolved, children: /* @__PURE__ */ jsx("div", { "data-fcte-root": "", style: cssVars, className: "fcte-provider-root", children }) });
+}
+var PRESETS = {
+  "drafting-teal": draftingTealPreset,
+  clean: cleanPreset,
+  dark: darkPreset,
+  modern: modernPreset,
+  "high-contrast": highContrastPreset,
+  clinical: clinicalPreset,
+  playful: playfulPreset
+};
+var SECTIONS = [
+  {
+    id: "colors",
+    label: "Colors",
+    themeKey: "colors",
+    fields: [
+      { kind: "color", key: "primary", label: "Primary" },
+      { kind: "color", key: "primaryForeground", label: "Primary Foreground" },
+      { kind: "color", key: "secondary", label: "Secondary" },
+      { kind: "color", key: "secondaryForeground", label: "Secondary Foreground" },
+      { kind: "color", key: "error", label: "Error" },
+      { kind: "color", key: "errorForeground", label: "Error Foreground" },
+      { kind: "color", key: "warning", label: "Warning" },
+      { kind: "color", key: "success", label: "Success" },
+      { kind: "color", key: "surface", label: "Surface" },
+      { kind: "color", key: "background", label: "Background" },
+      { kind: "color", key: "text", label: "Text" },
+      { kind: "color", key: "textMuted", label: "Text Muted" },
+      { kind: "color", key: "textDisabled", label: "Text Disabled" },
+      { kind: "color", key: "border", label: "Border" },
+      { kind: "color", key: "borderFocus", label: "Border Focus" },
+      { kind: "color", key: "inputBackground", label: "Input Background" }
+    ]
+  },
+  {
+    id: "typography",
+    label: "Typography",
+    themeKey: "typography",
+    fields: [
+      { kind: "text", key: "fontFamily", label: "Font Family", placeholder: "Inter, system-ui, sans-serif" },
+      {
+        kind: "select",
+        key: "scale",
+        label: "Scale",
+        options: [
+          { label: "Compact", value: "compact" },
+          { label: "Comfortable", value: "comfortable" },
+          { label: "Spacious", value: "spacious" }
+        ]
+      },
+      { kind: "text", key: "questionSize", label: "Question Size", placeholder: "1.125rem" },
+      { kind: "text", key: "labelSize", label: "Label Size", placeholder: "0.875rem" },
+      { kind: "text", key: "helpTextSize", label: "Help Text Size", placeholder: "0.8125rem" },
+      { kind: "text", key: "bodySize", label: "Body Size", placeholder: "0.9375rem" }
+    ]
+  },
+  {
+    id: "shape",
+    label: "Shape",
+    themeKey: "shape",
+    fields: [
+      {
+        kind: "select",
+        key: "radius",
+        label: "Radius",
+        options: [
+          { label: "None", value: "none" },
+          { label: "Small", value: "sm" },
+          { label: "Medium", value: "md" },
+          { label: "Large", value: "lg" },
+          { label: "Full", value: "full" }
+        ]
+      },
+      { kind: "text", key: "inputRadius", label: "Input Radius", placeholder: "8px" },
+      { kind: "text", key: "buttonRadius", label: "Button Radius", placeholder: "8px" },
+      { kind: "text", key: "cardRadius", label: "Card Radius", placeholder: "12px" }
+    ]
+  },
+  {
+    id: "spacing",
+    label: "Spacing",
+    themeKey: "spacing",
+    fields: [
+      { kind: "number", key: "base", label: "Base", min: 4, max: 32, suffix: "px" },
+      { kind: "number", key: "sectionGap", label: "Section Gap", min: 0, max: 64, suffix: "px" },
+      { kind: "number", key: "fieldGap", label: "Field Gap", min: 0, max: 64, suffix: "px" },
+      { kind: "number", key: "inputPaddingX", label: "Input Padding X", min: 0, max: 32, suffix: "px" },
+      { kind: "number", key: "inputPaddingY", label: "Input Padding Y", min: 0, max: 32, suffix: "px" }
+    ]
+  },
+  {
+    id: "layout",
+    label: "Layout",
+    themeKey: "layout",
+    fields: [
+      { kind: "text", key: "maxWidth", label: "Max Width", placeholder: "640px" },
+      {
+        kind: "select",
+        key: "alignment",
+        label: "Alignment",
+        options: [
+          { label: "Left", value: "left" },
+          { label: "Center", value: "center" }
+        ]
+      },
+      {
+        kind: "select",
+        key: "progressPosition",
+        label: "Progress Position",
+        options: [
+          { label: "Top", value: "top" },
+          { label: "Bottom", value: "bottom" },
+          { label: "None", value: "none" }
+        ]
+      },
+      {
+        kind: "select",
+        key: "sectionLayout",
+        label: "Section Layout",
+        options: [
+          { label: "Card", value: "card" },
+          { label: "Flat", value: "flat" },
+          { label: "Bordered", value: "bordered" }
+        ]
+      }
+    ]
+  }
+];
+function ThemeEditorInner({
+  initialTheme,
+  onChange,
+  onSave,
+  theme: chromeTheme,
+  height,
+  width,
+  className,
+  toolbarExtra,
+  showPreview = true
+}) {
+  const [theme, setTheme] = useState(initialTheme ?? draftingTealPreset);
+  const [activeSection, setActiveSection] = useState("colors");
+  const [presetKey, setPresetKey] = useState(initialTheme ? "custom" : "drafting-teal");
+  const [showPalette, setShowPalette] = useState(false);
+  const [showComparison, setShowComparison] = useState(false);
+  const themeRef = useRef(theme);
+  themeRef.current = theme;
+  useEffect(() => {
+    function handleKeyDown(e) {
+      if ((e.metaKey || e.ctrlKey) && e.key === "s") {
+        e.preventDefault();
+        onSave?.(themeRef.current);
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [onSave]);
+  const updateField = useCallback(
+    (section, key, value) => {
+      setTheme((prev) => {
+        const next = {
+          ...prev,
+          [section]: { ...prev[section], [key]: value }
+        };
+        onChange?.(next);
+        return next;
+      });
+      setPresetKey("custom");
+    },
+    [onChange]
+  );
+  const loadPreset = useCallback(
+    (key) => {
+      const preset = PRESETS[key];
+      if (preset) {
+        setTheme(preset);
+        setPresetKey(key);
+        onChange?.(preset);
+      }
+    },
+    [onChange]
+  );
+  const exportJson = useCallback(() => {
+    const blob = new Blob([JSON.stringify(theme, null, 2)], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "fieldcraft-theme.json";
+    a.click();
+    URL.revokeObjectURL(url);
+  }, [theme]);
+  const importJson = useCallback(() => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = ".json";
+    input.onchange = () => {
+      const file = input.files?.[0];
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = () => {
+        try {
+          const parsed = JSON.parse(reader.result);
+          setTheme(parsed);
+          setPresetKey("custom");
+          onChange?.(parsed);
+        } catch {
+        }
+      };
+      reader.readAsText(file);
+    };
+    input.click();
+  }, [onChange]);
+  const exportCss = useCallback(() => {
+    exportCssFile(theme);
+  }, [theme]);
+  const importCss = useCallback(() => {
+    importCssFile(theme, (merged) => {
+      setTheme(merged);
+      setPresetKey("custom");
+      onChange?.(merged);
+    });
+  }, [theme, onChange]);
+  const currentSection = useMemo(
+    () => SECTIONS.find((s) => s.id === activeSection),
+    [activeSection]
+  );
+  const sectionValues = theme[currentSection.themeKey] ?? {};
+  return /* @__PURE__ */ jsx(ThemeEditorThemeProvider, { theme: chromeTheme, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `fcte-root${className ? ` ${className}` : ""}`,
+      style: {
+        height: height ?? "100%",
+        width: width ?? "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "fcte-toolbar", children: [
+          /* @__PURE__ */ jsxs("div", { className: "fcte-toolbar__left", children: [
+            /* @__PURE__ */ jsx("span", { className: "fcte-toolbar__title", children: "Theme Editor" }),
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                value: presetKey,
+                onChange: (e) => loadPreset(e.target.value),
+                className: "fcte-toolbar__preset",
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "custom", disabled: true, children: "Custom" }),
+                  Object.keys(PRESETS).map((k) => /* @__PURE__ */ jsx("option", { value: k, children: k.charAt(0).toUpperCase() + k.slice(1).replace("-", " ") }, k))
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "fcte-toolbar__right", children: [
+            toolbarExtra,
+            /* @__PURE__ */ jsx("button", { onClick: importJson, className: "fcte-btn fcte-btn--secondary", children: "Import JSON" }),
+            /* @__PURE__ */ jsx("button", { onClick: exportJson, className: "fcte-btn fcte-btn--secondary", children: "Export JSON" }),
+            /* @__PURE__ */ jsx("button", { onClick: importCss, className: "fcte-btn fcte-btn--secondary", children: "Import CSS" }),
+            /* @__PURE__ */ jsx("button", { onClick: exportCss, className: "fcte-btn fcte-btn--secondary", children: "Export CSS" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => {
+                  setShowPalette((v) => !v);
+                  setShowComparison(false);
+                },
+                className: `fcte-btn ${showPalette ? "fcte-btn--primary" : "fcte-btn--secondary"}`,
+                children: "Palette"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => {
+                  setShowComparison((v) => !v);
+                  setShowPalette(false);
+                },
+                className: `fcte-btn ${showComparison ? "fcte-btn--primary" : "fcte-btn--secondary"}`,
+                children: "Compare"
+              }
+            ),
+            onSave && /* @__PURE__ */ jsx("button", { onClick: () => onSave(theme), className: "fcte-btn fcte-btn--primary", children: "Save" })
+          ] })
+        ] }),
+        showPalette && /* @__PURE__ */ jsx(
+          PaletteGenerator,
+          {
+            theme,
+            onApply: (newTheme) => {
+              setTheme(newTheme);
+              setPresetKey("custom");
+              onChange?.(newTheme);
+              setShowPalette(false);
+            },
+            onClose: () => setShowPalette(false)
+          }
+        ),
+        showComparison ? /* @__PURE__ */ jsx(
+          ThemeComparison,
+          {
+            currentTheme: theme,
+            onClose: () => setShowComparison(false)
+          }
+        ) : /* @__PURE__ */ jsxs("div", { className: "fcte-body", children: [
+          /* @__PURE__ */ jsxs("div", { className: "fcte-editor", children: [
+            /* @__PURE__ */ jsx("div", { className: "fcte-section-select", children: /* @__PURE__ */ jsx(
+              "select",
+              {
+                value: activeSection,
+                onChange: (e) => setActiveSection(e.target.value),
+                className: "fcte-field__select",
+                children: SECTIONS.map((s) => /* @__PURE__ */ jsx("option", { value: s.id, children: s.label }, s.id))
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { className: "fcte-fields", children: currentSection.fields.map((field) => {
+              const val = sectionValues[field.key];
+              if (field.kind === "color") {
+                return /* @__PURE__ */ jsxs("div", { className: "fcte-field", children: [
+                  /* @__PURE__ */ jsx("label", { className: "fcte-field__label", children: field.label }),
+                  /* @__PURE__ */ jsxs("div", { className: "fcte-field__color-row", children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "color",
+                        value: typeof val === "string" ? val : "#000000",
+                        onChange: (e) => updateField(currentSection.themeKey, field.key, e.target.value),
+                        className: "fcte-field__swatch"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "text",
+                        value: typeof val === "string" ? val : "",
+                        onChange: (e) => updateField(currentSection.themeKey, field.key, e.target.value),
+                        className: "fcte-field__text",
+                        spellCheck: false
+                      }
+                    )
+                  ] })
+                ] }, field.key);
+              }
+              if (field.kind === "select") {
+                return /* @__PURE__ */ jsxs("div", { className: "fcte-field", children: [
+                  /* @__PURE__ */ jsx("label", { className: "fcte-field__label", children: field.label }),
+                  /* @__PURE__ */ jsx(
+                    "select",
+                    {
+                      value: typeof val === "string" ? val : "",
+                      onChange: (e) => updateField(currentSection.themeKey, field.key, e.target.value),
+                      className: "fcte-field__select",
+                      children: field.options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+                    }
+                  )
+                ] }, field.key);
+              }
+              if (field.kind === "number") {
+                return /* @__PURE__ */ jsxs("div", { className: "fcte-field", children: [
+                  /* @__PURE__ */ jsx("label", { className: "fcte-field__label", children: field.label }),
+                  /* @__PURE__ */ jsxs("div", { className: "fcte-field__number-row", children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "number",
+                        value: typeof val === "number" ? val : 0,
+                        onChange: (e) => updateField(currentSection.themeKey, field.key, Number(e.target.value)),
+                        min: field.min,
+                        max: field.max,
+                        className: "fcte-field__number"
+                      }
+                    ),
+                    field.suffix && /* @__PURE__ */ jsx("span", { className: "fcte-field__suffix", children: field.suffix })
+                  ] })
+                ] }, field.key);
+              }
+              return /* @__PURE__ */ jsxs("div", { className: "fcte-field", children: [
+                /* @__PURE__ */ jsx("label", { className: "fcte-field__label", children: field.label }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "text",
+                    value: typeof val === "string" ? val : "",
+                    onChange: (e) => updateField(currentSection.themeKey, field.key, e.target.value),
+                    placeholder: field.placeholder,
+                    className: "fcte-field__text",
+                    spellCheck: false
+                  }
+                )
+              ] }, field.key);
+            }) })
+          ] }),
+          showPreview && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "fcte-preview",
+              style: {
+                background: theme.colors?.background || void 0,
+                color: theme.colors?.text || void 0
+              },
+              children: /* @__PURE__ */ jsx("div", { className: "fcte-preview__inner", children: /* @__PURE__ */ jsx(
+                FormEngineRenderer,
+                {
+                  schema: PREVIEW_SCHEMA,
+                  theme,
+                  onSubmit: () => {
+                  }
+                }
+              ) })
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+
+// src/theme-editor/ThemeEditor.tsx
+var ThemeEditor = requireLicense(ThemeEditorInner, "ThemeEditor");
+
+// src/theme-editor/theme/presets.ts
+var themeEditorLightPreset = {
+  background: "#F4F7F8",
+  surface: "#FFFFFF",
+  surfaceHover: "#EDF3F2",
+  text: "#12222A",
+  textMuted: "#6A7B85",
+  textDim: "#96A5AD",
+  border: "#DCE4E8",
+  borderStrong: "#B9D1CF",
+  inputBackground: "#FAFCFC",
+  accent: "#1F6B6E",
+  accentForeground: "#FFFFFF"
+};
+var themeEditorDarkPreset = {
+  background: "#0F1A1F",
+  surface: "#16242A",
+  surfaceHover: "#182F31",
+  text: "#E8EFF1",
+  textMuted: "#8CA1A9",
+  textDim: "#5E7680",
+  border: "#2A3B42",
+  borderStrong: "#2F4F4C",
+  inputBackground: "#12222A",
+  accent: "#63BDB4",
+  accentForeground: "#0F1A1F"
+};
+
+export { PREVIEW_SCHEMA, ThemeEditor, ThemeEditorInner, ThemeEditorThemeProvider, draftingTealDarkPreset, draftingTealPreset, themeEditorDarkPreset, themeEditorLightPreset, useEditorTheme };