@squaredr/fieldcraft-pro 1.3.0 → 1.5.0

package/dist/theme-editor/index.js

@@ -379,7 +379,587 @@ var PREVIEW_SCHEMA = {
   ],
   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] = react.useState(theme.colors?.primary ?? "#3b82f6");
+  const palette = react.useMemo(() => generatePalette(baseColor), [baseColor]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-palette", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-palette__header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fcte-palette__title", children: "Generate Palette" }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { className: "fcte-btn fcte-btn--secondary fcte-btn--sm", onClick: onClose, children: "Close" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-palette__body", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-palette__picker", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "fcte-palette__label", children: "Base Color" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-palette__input-row", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "color",
+              value: baseColor,
+              onChange: (e) => setBaseColor(e.target.value),
+              className: "fcte-field__swatch"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              value: baseColor,
+              onChange: (e) => setBaseColor(e.target.value),
+              className: "fcte-field__text",
+              spellCheck: false
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fcte-palette__swatches", children: SWATCH_KEYS.map(({ key, label }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-palette__swatch", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "fcte-palette__swatch-color",
+            style: { backgroundColor: palette[key] }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fcte-palette__swatch-label", children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fcte-palette__swatch-hex", children: palette[key] })
+      ] }, key)) }),
+      /* @__PURE__ */ jsxRuntime.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: fieldcraftReact.cleanPreset },
+  dark: { label: "Dark", theme: fieldcraftReact.darkPreset },
+  modern: { label: "Modern", theme: fieldcraftReact.modernPreset },
+  "high-contrast": { label: "High Contrast", theme: fieldcraftReact.highContrastPreset },
+  clinical: { label: "Clinical", theme: fieldcraftReact.clinicalPreset },
+  playful: { label: "Playful", theme: fieldcraftReact.playfulPreset }
+};
+function ThemeComparison({ currentTheme, onClose }) {
+  const [compareKey, setCompareKey] = react.useState("clean");
+  const compareTheme = COMPARISON_PRESETS[compareKey]?.theme ?? fieldcraftReact.cleanPreset;
+  const diffs = getColorDiffs(currentTheme, compareTheme);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-compare", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-compare__header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fcte-compare__title", children: "Theme Comparison" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-compare__controls", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "fcte-compare__label", children: "Compare with:" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "select",
+          {
+            value: compareKey,
+            onChange: (e) => setCompareKey(e.target.value),
+            className: "fcte-toolbar__preset",
+            children: Object.entries(COMPARISON_PRESETS).map(([key, { label }]) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: key, children: label }, key))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "fcte-btn fcte-btn--secondary fcte-btn--sm", onClick: onClose, children: "Close" })
+      ] })
+    ] }),
+    diffs.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-compare__diffs", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "fcte-compare__diff-count", children: [
+        diffs.length,
+        " color",
+        diffs.length !== 1 ? "s" : "",
+        " differ"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-compare__diff-list", children: [
+        diffs.slice(0, 8).map((d) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-compare__diff-item", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fcte-compare__diff-label", children: d.key }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-compare__diff-swatches", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "fcte-compare__diff-swatch",
+                style: { backgroundColor: d.current },
+                title: `Current: ${d.current}`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fcte-compare__diff-arrow", children: "\u2192" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "fcte-compare__diff-swatch",
+                style: { backgroundColor: d.compare },
+                title: `${COMPARISON_PRESETS[compareKey]?.label}: ${d.compare}`
+              }
+            )
+          ] })
+        ] }, d.key)),
+        diffs.length > 8 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "fcte-compare__diff-more", children: [
+          "+",
+          diffs.length - 8,
+          " more"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-compare__panels", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-compare__panel", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fcte-compare__panel-label", children: "Current Theme" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fcte-compare__panel-preview", children: /* @__PURE__ */ jsxRuntime.jsx(
+          fieldcraftReact.FormEngineRenderer,
+          {
+            schema: PREVIEW_SCHEMA,
+            theme: currentTheme,
+            onSubmit: () => {
+            }
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-compare__panel", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fcte-compare__panel-label", children: COMPARISON_PRESETS[compareKey]?.label ?? "Preset" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fcte-compare__panel-preview", children: /* @__PURE__ */ jsxRuntime.jsx(
+          fieldcraftReact.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 = react.createContext({});
+function useEditorTheme() {
+  return react.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 = react.useMemo(() => themeToCssVars(resolved), [resolved]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeCtx.Provider, { value: resolved, children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-fcte-root": "", style: cssVars, className: "fcte-provider-root", children }) });
+}
 var PRESETS = {
+  "drafting-teal": draftingTealPreset,
   clean: fieldcraftReact.cleanPreset,
   dark: fieldcraftReact.darkPreset,
   modern: fieldcraftReact.modernPreset,
@@ -509,15 +1089,18 @@ function ThemeEditorInner({
   initialTheme,
   onChange,
   onSave,
+  theme: chromeTheme,
   height,
   width,
   className,
   toolbarExtra,
   showPreview = true
 }) {
-  const [theme, setTheme] = react.useState(initialTheme ?? fieldcraftReact.cleanPreset);
+  const [theme, setTheme] = react.useState(initialTheme ?? draftingTealPreset);
   const [activeSection, setActiveSection] = react.useState("colors");
-  const [presetKey, setPresetKey] = react.useState("custom");
+  const [presetKey, setPresetKey] = react.useState(initialTheme ? "custom" : "drafting-teal");
+  const [showPalette, setShowPalette] = react.useState(false);
+  const [showComparison, setShowComparison] = react.useState(false);
   const themeRef = react.useRef(theme);
   themeRef.current = theme;
   react.useEffect(() => {
@@ -585,12 +1168,22 @@ function ThemeEditorInner({
     };
     input.click();
   }, [onChange]);
+  const exportCss = react.useCallback(() => {
+    exportCssFile(theme);
+  }, [theme]);
+  const importCss = react.useCallback(() => {
+    importCssFile(theme, (merged) => {
+      setTheme(merged);
+      setPresetKey("custom");
+      onChange?.(merged);
+    });
+  }, [theme, onChange]);
   const currentSection = react.useMemo(
     () => SECTIONS.find((s) => s.id === activeSection),
     [activeSection]
   );
   const sectionValues = theme[currentSection.themeKey] ?? {};
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeEditorThemeProvider, { theme: chromeTheme, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: `fcte-root${className ? ` ${className}` : ""}`,
@@ -617,22 +1210,65 @@ function ThemeEditorInner({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-toolbar__right", children: [
             toolbarExtra,
-            /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: importJson, className: "fcte-btn fcte-btn--secondary", children: "Import" }),
-            /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: exportJson, className: "fcte-btn fcte-btn--secondary", children: "Export" }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: importJson, className: "fcte-btn fcte-btn--secondary", children: "Import JSON" }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: exportJson, className: "fcte-btn fcte-btn--secondary", children: "Export JSON" }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: importCss, className: "fcte-btn fcte-btn--secondary", children: "Import CSS" }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: exportCss, className: "fcte-btn fcte-btn--secondary", children: "Export CSS" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => {
+                  setShowPalette((v) => !v);
+                  setShowComparison(false);
+                },
+                className: `fcte-btn ${showPalette ? "fcte-btn--primary" : "fcte-btn--secondary"}`,
+                children: "Palette"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => {
+                  setShowComparison((v) => !v);
+                  setShowPalette(false);
+                },
+                className: `fcte-btn ${showComparison ? "fcte-btn--primary" : "fcte-btn--secondary"}`,
+                children: "Compare"
+              }
+            ),
             onSave && /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => onSave(theme), className: "fcte-btn fcte-btn--primary", children: "Save" })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-body", children: [
+        showPalette && /* @__PURE__ */ jsxRuntime.jsx(
+          PaletteGenerator,
+          {
+            theme,
+            onApply: (newTheme) => {
+              setTheme(newTheme);
+              setPresetKey("custom");
+              onChange?.(newTheme);
+              setShowPalette(false);
+            },
+            onClose: () => setShowPalette(false)
+          }
+        ),
+        showComparison ? /* @__PURE__ */ jsxRuntime.jsx(
+          ThemeComparison,
+          {
+            currentTheme: theme,
+            onClose: () => setShowComparison(false)
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-body", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-editor", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fcte-tabs", children: SECTIONS.map((s) => /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fcte-section-select", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "select",
               {
-                className: `fcte-tab${activeSection === s.id ? " fcte-tab--active" : ""}`,
-                onClick: () => setActiveSection(s.id),
-                children: s.label
-              },
-              s.id
-            )) }),
+                value: activeSection,
+                onChange: (e) => setActiveSection(e.target.value),
+                className: "fcte-field__select",
+                children: SECTIONS.map((s) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: s.id, children: s.label }, s.id))
+              }
+            ) }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fcte-fields", children: currentSection.fields.map((field) => {
               const val = sectionValues[field.key];
               if (field.kind === "color") {
@@ -710,24 +1346,68 @@ function ThemeEditorInner({
               ] }, field.key);
             }) })
           ] }),
-          showPreview && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fcte-preview", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fcte-preview__inner", children: /* @__PURE__ */ jsxRuntime.jsx(
-            fieldcraftReact.FormEngineRenderer,
+          showPreview && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
             {
-              schema: PREVIEW_SCHEMA,
-              theme,
-              onSubmit: () => {
-              }
+              className: "fcte-preview",
+              style: {
+                background: theme.colors?.background || void 0,
+                color: theme.colors?.text || void 0
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fcte-preview__inner", children: /* @__PURE__ */ jsxRuntime.jsx(
+                fieldcraftReact.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"
+};
+
 exports.PREVIEW_SCHEMA = PREVIEW_SCHEMA;
 exports.ThemeEditor = ThemeEditor;
 exports.ThemeEditorInner = ThemeEditorInner;
+exports.ThemeEditorThemeProvider = ThemeEditorThemeProvider;
+exports.draftingTealDarkPreset = draftingTealDarkPreset;
+exports.draftingTealPreset = draftingTealPreset;
+exports.themeEditorDarkPreset = themeEditorDarkPreset;
+exports.themeEditorLightPreset = themeEditorLightPreset;
+exports.useEditorTheme = useEditorTheme;