@squaredr/fieldcraft-pro 1.7.0 → 1.9.0

package/dist/theme-editor/index.js

@@ -309,18 +309,23 @@ var PREVIEW_SCHEMA = {
   id: "theme-preview",
   version: "1.0.0",
   title: "Theme Preview",
-  description: "See how your theme looks on a real form.",
+  description: "See how your theme looks across every field type.",
+  settings: {
+    displayMode: "classic",
+    showProgress: false
+  },
   sections: [
     {
-      id: "s1",
-      title: "Contact Information",
+      id: "s-text",
+      title: "Text Inputs",
       questions: [
         {
           id: "name",
           type: "short_text",
           label: "Full Name",
           required: true,
-          placeholder: "Jane Doe"
+          placeholder: "Jane Doe",
+          helpText: "Enter your full legal name."
         },
         {
           id: "email",
@@ -329,6 +334,31 @@ var PREVIEW_SCHEMA = {
           required: true,
           placeholder: "jane@example.com"
         },
+        {
+          id: "phone",
+          type: "phone",
+          label: "Phone Number",
+          placeholder: "(555) 123-4567"
+        },
+        {
+          id: "website",
+          type: "url",
+          label: "Website",
+          placeholder: "https://example.com"
+        },
+        {
+          id: "bio",
+          type: "long_text",
+          label: "Bio / Notes",
+          placeholder: "Tell us about yourself...",
+          helpText: "Markdown is supported."
+        }
+      ]
+    },
+    {
+      id: "s-selection",
+      title: "Selection Fields",
+      questions: [
         {
           id: "department",
           type: "dropdown",
@@ -336,20 +366,184 @@ var PREVIEW_SCHEMA = {
           options: [
             { label: "Engineering", value: "engineering" },
             { label: "Design", value: "design" },
-            { label: "Marketing", value: "marketing" }
+            { label: "Marketing", value: "marketing" },
+            { label: "Sales", value: "sales" }
           ]
         },
+        {
+          id: "role",
+          type: "single_select",
+          label: "Role",
+          helpText: "Select one option.",
+          options: [
+            { label: "Individual Contributor", value: "ic" },
+            { label: "Team Lead", value: "lead" },
+            { label: "Manager", value: "manager" },
+            { label: "Director", value: "director" }
+          ],
+          config: { type: "single_select", layout: "vertical" }
+        },
+        {
+          id: "skills",
+          type: "multi_select",
+          label: "Skills",
+          helpText: "Select all that apply.",
+          options: [
+            { label: "JavaScript", value: "js" },
+            { label: "TypeScript", value: "ts" },
+            { label: "Python", value: "py" },
+            { label: "Rust", value: "rust" },
+            { label: "Go", value: "go" }
+          ],
+          config: { type: "multi_select", layout: "vertical" }
+        },
+        {
+          id: "newsletter",
+          type: "boolean",
+          label: "Subscribe to newsletter?",
+          config: { type: "boolean", style: "toggle" }
+        }
+      ]
+    },
+    {
+      id: "s-numeric",
+      title: "Numeric & Rating",
+      questions: [
+        {
+          id: "age",
+          type: "number",
+          label: "Age",
+          placeholder: "25",
+          config: { type: "number", min: 0, max: 150 }
+        },
+        {
+          id: "satisfaction",
+          type: "slider",
+          label: "Satisfaction Level",
+          config: { type: "slider", min: 0, max: 100, step: 5 }
+        },
         {
           id: "rating",
           type: "rating",
-          label: "How would you rate this experience?",
+          label: "Overall Rating",
           config: { type: "rating", max: 5 }
         },
         {
-          id: "notes",
-          type: "long_text",
-          label: "Additional Notes",
-          placeholder: "Any other feedback..."
+          id: "nps",
+          type: "nps",
+          label: "How likely are you to recommend us?"
+        },
+        {
+          id: "opinion",
+          type: "opinion_scale",
+          label: "How do you feel about the onboarding?",
+          config: {
+            type: "opinion_scale",
+            min: 1,
+            max: 5,
+            minLabel: "Very Poor",
+            maxLabel: "Excellent"
+          }
+        }
+      ]
+    },
+    {
+      id: "s-datetime",
+      title: "Date & Time",
+      questions: [
+        {
+          id: "dob",
+          type: "date",
+          label: "Date of Birth",
+          config: { type: "date", disableFuture: true }
+        },
+        {
+          id: "preferred_time",
+          type: "time",
+          label: "Preferred Time",
+          config: { type: "time", format: "12h" }
+        },
+        {
+          id: "travel_dates",
+          type: "date_range",
+          label: "Travel Dates"
+        }
+      ]
+    },
+    {
+      id: "s-media",
+      title: "Media & Files",
+      questions: [
+        {
+          id: "resume",
+          type: "file_upload",
+          label: "Upload Resume",
+          helpText: "PDF or DOCX, max 10 MB.",
+          config: { type: "file_upload", maxFiles: 1, maxSizeMb: 10, accept: [".pdf", ".docx"] }
+        },
+        {
+          id: "signature",
+          type: "signature",
+          label: "Signature",
+          helpText: "Draw your signature below."
+        }
+      ]
+    },
+    {
+      id: "s-advanced",
+      title: "Advanced Fields",
+      questions: [
+        {
+          id: "experience",
+          type: "likert",
+          label: "Rate the following aspects:",
+          config: {
+            type: "likert",
+            labels: ["Strongly Disagree", "Disagree", "Neutral", "Agree", "Strongly Agree"]
+          }
+        },
+        {
+          id: "country",
+          type: "country_select",
+          label: "Country",
+          config: { type: "country_select", showFlags: true }
+        },
+        {
+          id: "consent",
+          type: "consent",
+          label: "Terms & Conditions",
+          config: {
+            type: "consent",
+            text: "I agree to the Terms of Service and Privacy Policy.",
+            checkboxLabel: "I agree"
+          }
+        }
+      ]
+    },
+    {
+      id: "s-content",
+      title: "Content & Visual",
+      questions: [
+        {
+          id: "info",
+          type: "info_block",
+          label: "This is an informational message block. It can be used to display important notices."
+        },
+        {
+          id: "warning_info",
+          type: "info_block",
+          label: "Please double-check all information before submitting."
+        },
+        {
+          id: "divider",
+          type: "divider",
+          label: ""
+        },
+        {
+          id: "section_head",
+          type: "section_header",
+          label: "Section Header Example",
+          config: { type: "section_header", level: "h3", showDivider: true }
         }
       ]
     }
@@ -526,16 +720,20 @@ function deepMerge(base, partial) {
 
 // src/theme-editor/palette-generator.ts
 function generatePalette(baseHex) {
+  const cleaned = baseHex.replace("#", "");
+  if (!/^[0-9a-fA-F]{3}$|^[0-9a-fA-F]{6}$/.test(cleaned)) {
+    return generatePalette("#6B7280");
+  }
   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",
+    primaryForeground: isLightBase ? "#ffffff" : "#000000",
     // Secondary (complementary)
     secondary: hslToHex(secH, Math.max(s - 15, 10), clamp(l, 35, 55)),
-    secondaryForeground: "#ffffff",
+    secondaryForeground: isLightBase ? "#ffffff" : "#000000",
     // Surfaces
     surface: hslToHex(h, Math.max(s - 35, 3), 97),
     background: "#F4F7F8",
@@ -708,148 +906,458 @@ function PaletteGenerator({ theme, onApply, onClose }) {
 }
 
 // src/theme-editor/presets.ts
-var cleanPreset = {
+var cleanLight = {
   colors: {
-    primary: "#1F6B6E",
+    primary: "#2563EB",
     primaryForeground: "#FFFFFF",
-    secondary: "#B9D1CF",
-    secondaryForeground: "#12222A",
-    error: "#B04A3C",
+    secondary: "#DBEAFE",
+    secondaryForeground: "#1E3A5F",
+    error: "#DC2626",
     errorForeground: "#FFFFFF",
-    warning: "#C98A2E",
-    success: "#2E7D5B",
+    warning: "#D97706",
+    success: "#16A34A",
     surface: "#FFFFFF",
-    background: "#F4F7F8",
-    text: "#12222A",
-    textMuted: "#6A7B85",
-    textDisabled: "#B9D1CF",
-    border: "#DCE4E8",
-    borderFocus: "#1F6B6E",
+    background: "#F8FAFC",
+    text: "#0F172A",
+    textMuted: "#64748B",
+    textDisabled: "#CBD5E1",
+    border: "#E2E8F0",
+    borderFocus: "#2563EB",
     inputBackground: "#FFFFFF"
   },
   typography: {
     fontFamily: "Inter, system-ui, sans-serif",
     scale: "comfortable",
-    questionSize: "1.125rem",
+    questionSize: "1.0625rem",
     labelSize: "0.875rem",
     helpTextSize: "0.8125rem",
     bodySize: "0.9375rem"
   },
-  shape: { radius: "none", inputRadius: "0px", buttonRadius: "0px", cardRadius: "0px" },
+  shape: { radius: "sm", inputRadius: "6px", buttonRadius: "6px", cardRadius: "8px" },
   spacing: { base: 16, sectionGap: 32, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
-  layout: { maxWidth: "640px", alignment: "left", progressPosition: "top", sectionLayout: "card" }
+  layout: { maxWidth: "640px", alignment: "left", progressPosition: "top", sectionLayout: "flat" }
 };
-var cleanDarkPreset = {
+var cleanDark = {
   colors: {
-    primary: "#63BDB4",
-    primaryForeground: "#0F1A1F",
-    secondary: "#2F4F4C",
-    secondaryForeground: "#E8EFF1",
-    error: "#E08072",
-    errorForeground: "#0F1A1F",
-    warning: "#E0A94F",
-    success: "#5DB89A",
-    surface: "#16242A",
-    background: "#0F1A1F",
-    text: "#E8EFF1",
-    textMuted: "#8CA1A9",
-    textDisabled: "#3D5259",
-    border: "#2A3B42",
-    borderFocus: "#63BDB4",
-    inputBackground: "#16242A"
+    primary: "#60A5FA",
+    primaryForeground: "#0C1929",
+    secondary: "#1E3A5F",
+    secondaryForeground: "#DBEAFE",
+    error: "#F87171",
+    errorForeground: "#1C1917",
+    warning: "#FBBF24",
+    success: "#4ADE80",
+    surface: "#1E293B",
+    background: "#0F172A",
+    text: "#F1F5F9",
+    textMuted: "#94A3B8",
+    textDisabled: "#334155",
+    border: "#334155",
+    borderFocus: "#60A5FA",
+    inputBackground: "#1E293B"
   },
   typography: {
     fontFamily: "Inter, system-ui, sans-serif",
     scale: "comfortable",
-    questionSize: "1.125rem",
+    questionSize: "1.0625rem",
     labelSize: "0.875rem",
     helpTextSize: "0.8125rem",
     bodySize: "0.9375rem"
   },
-  shape: { radius: "none", inputRadius: "0px", buttonRadius: "0px", cardRadius: "0px" },
+  shape: { radius: "sm", inputRadius: "6px", buttonRadius: "6px", cardRadius: "8px" },
+  spacing: { base: 16, sectionGap: 32, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
+  layout: { maxWidth: "640px", alignment: "left", progressPosition: "top", sectionLayout: "flat" }
+};
+var stripeLight = {
+  colors: {
+    primary: "#635BFF",
+    primaryForeground: "#FFFFFF",
+    secondary: "#E8E6FF",
+    secondaryForeground: "#32297D",
+    error: "#DF1B41",
+    errorForeground: "#FFFFFF",
+    warning: "#D97706",
+    success: "#30B130",
+    surface: "#FFFFFF",
+    background: "#F6F9FC",
+    text: "#1A1F36",
+    textMuted: "#697386",
+    textDisabled: "#C1C9D2",
+    border: "#E3E8EE",
+    borderFocus: "#635BFF",
+    inputBackground: "#FFFFFF"
+  },
+  typography: {
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    scale: "comfortable",
+    questionSize: "1rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "0.9375rem"
+  },
+  shape: { radius: "md", inputRadius: "8px", buttonRadius: "8px", cardRadius: "12px" },
   spacing: { base: 16, sectionGap: 32, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
   layout: { maxWidth: "640px", alignment: "left", progressPosition: "top", sectionLayout: "card" }
 };
-var modernPreset = {
+var stripeDark = {
+  colors: {
+    primary: "#7A73FF",
+    primaryForeground: "#FFFFFF",
+    secondary: "#2D2A5E",
+    secondaryForeground: "#CBC8FF",
+    error: "#F93A5E",
+    errorForeground: "#FFFFFF",
+    warning: "#FBBF24",
+    success: "#4ADE80",
+    surface: "#1C2033",
+    background: "#0A0E1A",
+    text: "#E3E5EA",
+    textMuted: "#8992A7",
+    textDisabled: "#3C4257",
+    border: "#2C3046",
+    borderFocus: "#7A73FF",
+    inputBackground: "#1C2033"
+  },
+  typography: {
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    scale: "comfortable",
+    questionSize: "1rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "0.9375rem"
+  },
+  shape: { radius: "md", inputRadius: "8px", buttonRadius: "8px", cardRadius: "12px" },
+  spacing: { base: 16, sectionGap: 32, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
+  layout: { maxWidth: "640px", alignment: "left", progressPosition: "top", sectionLayout: "card" }
+};
+var githubLight = {
+  colors: {
+    primary: "#1F6FEB",
+    primaryForeground: "#FFFFFF",
+    secondary: "#DDF4FF",
+    secondaryForeground: "#0550AE",
+    error: "#CF222E",
+    errorForeground: "#FFFFFF",
+    warning: "#9A6700",
+    success: "#1A7F37",
+    surface: "#FFFFFF",
+    background: "#F6F8FA",
+    text: "#1F2328",
+    textMuted: "#656D76",
+    textDisabled: "#B1BAC4",
+    border: "#D0D7DE",
+    borderFocus: "#1F6FEB",
+    inputBackground: "#FFFFFF"
+  },
+  typography: {
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif",
+    scale: "comfortable",
+    questionSize: "1rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.75rem",
+    bodySize: "0.875rem"
+  },
+  shape: { radius: "md", inputRadius: "6px", buttonRadius: "6px", cardRadius: "6px" },
+  spacing: { base: 16, sectionGap: 28, fieldGap: 20, inputPaddingX: 12, inputPaddingY: 8 },
+  layout: { maxWidth: "640px", alignment: "left", progressPosition: "top", sectionLayout: "bordered" }
+};
+var githubDark = {
+  colors: {
+    primary: "#58A6FF",
+    primaryForeground: "#0D1117",
+    secondary: "#172B4D",
+    secondaryForeground: "#A5D6FF",
+    error: "#F85149",
+    errorForeground: "#0D1117",
+    warning: "#E3B341",
+    success: "#3FB950",
+    surface: "#161B22",
+    background: "#0D1117",
+    text: "#E6EDF3",
+    textMuted: "#8B949E",
+    textDisabled: "#3D444D",
+    border: "#30363D",
+    borderFocus: "#58A6FF",
+    inputBackground: "#161B22"
+  },
+  typography: {
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif",
+    scale: "comfortable",
+    questionSize: "1rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.75rem",
+    bodySize: "0.875rem"
+  },
+  shape: { radius: "md", inputRadius: "6px", buttonRadius: "6px", cardRadius: "6px" },
+  spacing: { base: 16, sectionGap: 28, fieldGap: 20, inputPaddingX: 12, inputPaddingY: 8 },
+  layout: { maxWidth: "640px", alignment: "left", progressPosition: "top", sectionLayout: "bordered" }
+};
+var vercelLight = {
   colors: {
-    primary: "#6366F1",
-    primaryForeground: "#ffffff",
-    secondary: "#8B5CF6",
-    secondaryForeground: "#ffffff",
-    error: "#F43F5E",
-    errorForeground: "#ffffff",
-    warning: "#F59E0B",
-    success: "#22C55E",
-    surface: "#ffffff",
+    primary: "#000000",
+    primaryForeground: "#FFFFFF",
+    secondary: "#F5F5F5",
+    secondaryForeground: "#171717",
+    error: "#E5484D",
+    errorForeground: "#FFFFFF",
+    warning: "#F5A623",
+    success: "#45A557",
+    surface: "#FFFFFF",
     background: "#FAFAFA",
-    text: "#18181B",
-    textMuted: "#71717A",
-    textDisabled: "#D4D4D8",
-    border: "#E4E4E7",
-    borderFocus: "#6366F1",
-    inputBackground: "#FAFAFA"
+    text: "#171717",
+    textMuted: "#666666",
+    textDisabled: "#C7C7C7",
+    border: "#EAEAEA",
+    borderFocus: "#000000",
+    inputBackground: "#FFFFFF"
   },
   typography: {
-    fontFamily: "'Plus Jakarta Sans', Inter, system-ui, sans-serif",
+    fontFamily: "'Geist', Inter, -apple-system, sans-serif",
     scale: "comfortable",
-    questionSize: "1.25rem",
+    questionSize: "1rem",
     labelSize: "0.875rem",
     helpTextSize: "0.8125rem",
-    bodySize: "1rem"
+    bodySize: "0.875rem"
   },
-  shape: { radius: "lg", inputRadius: "12px", buttonRadius: "12px", cardRadius: "16px" },
-  spacing: { base: 16, sectionGap: 40, fieldGap: 28, inputPaddingX: 16, inputPaddingY: 12 },
-  layout: { maxWidth: "680px", alignment: "center", progressPosition: "top", sectionLayout: "card" }
+  shape: { radius: "md", inputRadius: "8px", buttonRadius: "8px", cardRadius: "12px" },
+  spacing: { base: 16, sectionGap: 32, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
+  layout: { maxWidth: "600px", alignment: "left", progressPosition: "top", sectionLayout: "flat" }
+};
+var vercelDark = {
+  colors: {
+    primary: "#FFFFFF",
+    primaryForeground: "#000000",
+    secondary: "#1A1A1A",
+    secondaryForeground: "#EDEDED",
+    error: "#E5484D",
+    errorForeground: "#FFFFFF",
+    warning: "#F5A623",
+    success: "#45A557",
+    surface: "#111111",
+    background: "#000000",
+    text: "#EDEDED",
+    textMuted: "#888888",
+    textDisabled: "#444444",
+    border: "#333333",
+    borderFocus: "#FFFFFF",
+    inputBackground: "#111111"
+  },
+  typography: {
+    fontFamily: "'Geist', Inter, -apple-system, sans-serif",
+    scale: "comfortable",
+    questionSize: "1rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "0.875rem"
+  },
+  shape: { radius: "md", inputRadius: "8px", buttonRadius: "8px", cardRadius: "12px" },
+  spacing: { base: 16, sectionGap: 32, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
+  layout: { maxWidth: "600px", alignment: "left", progressPosition: "top", sectionLayout: "flat" }
+};
+var shopifyLight = {
+  colors: {
+    primary: "#008060",
+    primaryForeground: "#FFFFFF",
+    secondary: "#E3F1DF",
+    secondaryForeground: "#1A4D2E",
+    error: "#D72C0D",
+    errorForeground: "#FFFFFF",
+    warning: "#B98900",
+    success: "#008060",
+    surface: "#FFFFFF",
+    background: "#F6F6F7",
+    text: "#202223",
+    textMuted: "#6D7175",
+    textDisabled: "#BABEC3",
+    border: "#C9CCCF",
+    borderFocus: "#008060",
+    inputBackground: "#FFFFFF"
+  },
+  typography: {
+    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    scale: "comfortable",
+    questionSize: "1rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "0.9375rem"
+  },
+  shape: { radius: "md", inputRadius: "8px", buttonRadius: "8px", cardRadius: "12px" },
+  spacing: { base: 16, sectionGap: 32, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
+  layout: { maxWidth: "640px", alignment: "left", progressPosition: "top", sectionLayout: "card" }
+};
+var shopifyDark = {
+  colors: {
+    primary: "#36D399",
+    primaryForeground: "#0D2818",
+    secondary: "#1A3A2A",
+    secondaryForeground: "#B5E4CA",
+    error: "#FE6B6B",
+    errorForeground: "#1C1110",
+    warning: "#FFD60A",
+    success: "#36D399",
+    surface: "#1A1C1E",
+    background: "#111213",
+    text: "#E3E5E7",
+    textMuted: "#8C9196",
+    textDisabled: "#44474A",
+    border: "#333638",
+    borderFocus: "#36D399",
+    inputBackground: "#1A1C1E"
+  },
+  typography: {
+    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    scale: "comfortable",
+    questionSize: "1rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "0.9375rem"
+  },
+  shape: { radius: "md", inputRadius: "8px", buttonRadius: "8px", cardRadius: "12px" },
+  spacing: { base: 16, sectionGap: 32, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
+  layout: { maxWidth: "640px", alignment: "left", progressPosition: "top", sectionLayout: "card" }
+};
+var slackLight = {
+  colors: {
+    primary: "#611F69",
+    primaryForeground: "#FFFFFF",
+    secondary: "#F3E8F5",
+    secondaryForeground: "#4A154B",
+    error: "#E01E5A",
+    errorForeground: "#FFFFFF",
+    warning: "#ECB22E",
+    success: "#2EB67D",
+    surface: "#FFFFFF",
+    background: "#F8F8F8",
+    text: "#1D1C1D",
+    textMuted: "#616061",
+    textDisabled: "#B9B9B9",
+    border: "#DDDDDD",
+    borderFocus: "#611F69",
+    inputBackground: "#FFFFFF"
+  },
+  typography: {
+    fontFamily: "'Lato', 'Helvetica Neue', Helvetica, sans-serif",
+    scale: "comfortable",
+    questionSize: "1.0625rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "0.9375rem"
+  },
+  shape: { radius: "md", inputRadius: "8px", buttonRadius: "8px", cardRadius: "10px" },
+  spacing: { base: 16, sectionGap: 32, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
+  layout: { maxWidth: "640px", alignment: "left", progressPosition: "top", sectionLayout: "card" }
 };
-var modernDarkPreset = {
+var slackDark = {
+  colors: {
+    primary: "#D4A8DB",
+    primaryForeground: "#1A0A1E",
+    secondary: "#2C1332",
+    secondaryForeground: "#E2C6E9",
+    error: "#F5638B",
+    errorForeground: "#1C0E14",
+    warning: "#F0CA4D",
+    success: "#4FCEA2",
+    surface: "#1A1D21",
+    background: "#0F1114",
+    text: "#D1D2D3",
+    textMuted: "#9B9C9E",
+    textDisabled: "#4D4D4F",
+    border: "#383A3E",
+    borderFocus: "#D4A8DB",
+    inputBackground: "#1A1D21"
+  },
+  typography: {
+    fontFamily: "'Lato', 'Helvetica Neue', Helvetica, sans-serif",
+    scale: "comfortable",
+    questionSize: "1.0625rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "0.9375rem"
+  },
+  shape: { radius: "md", inputRadius: "8px", buttonRadius: "8px", cardRadius: "10px" },
+  spacing: { base: 16, sectionGap: 32, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
+  layout: { maxWidth: "640px", alignment: "left", progressPosition: "top", sectionLayout: "card" }
+};
+var tailwindLight = {
+  colors: {
+    primary: "#4F46E5",
+    primaryForeground: "#FFFFFF",
+    secondary: "#EEF2FF",
+    secondaryForeground: "#3730A3",
+    error: "#DC2626",
+    errorForeground: "#FFFFFF",
+    warning: "#D97706",
+    success: "#059669",
+    surface: "#FFFFFF",
+    background: "#F9FAFB",
+    text: "#111827",
+    textMuted: "#6B7280",
+    textDisabled: "#D1D5DB",
+    border: "#E5E7EB",
+    borderFocus: "#4F46E5",
+    inputBackground: "#FFFFFF"
+  },
+  typography: {
+    fontFamily: "Inter, system-ui, sans-serif",
+    scale: "comfortable",
+    questionSize: "1rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "0.875rem"
+  },
+  shape: { radius: "md", inputRadius: "8px", buttonRadius: "8px", cardRadius: "12px" },
+  spacing: { base: 16, sectionGap: 32, fieldGap: 24, inputPaddingX: 14, inputPaddingY: 10 },
+  layout: { maxWidth: "640px", alignment: "left", progressPosition: "top", sectionLayout: "card" }
+};
+var tailwindDark = {
   colors: {
     primary: "#818CF8",
     primaryForeground: "#1E1B4B",
-    secondary: "#A78BFA",
-    secondaryForeground: "#1E1B4B",
-    error: "#FB7185",
-    errorForeground: "#1E1B4B",
+    secondary: "#1E1B4B",
+    secondaryForeground: "#C7D2FE",
+    error: "#F87171",
+    errorForeground: "#1C1917",
     warning: "#FBBF24",
-    success: "#4ADE80",
-    surface: "#1E1B4B",
-    background: "#13111C",
-    text: "#E8E6F0",
-    textMuted: "#A1A1AA",
-    textDisabled: "#3F3F46",
-    border: "#2E2B4A",
+    success: "#34D399",
+    surface: "#1F2937",
+    background: "#111827",
+    text: "#F9FAFB",
+    textMuted: "#9CA3AF",
+    textDisabled: "#374151",
+    border: "#374151",
     borderFocus: "#818CF8",
-    inputBackground: "#1E1B4B"
+    inputBackground: "#1F2937"
   },
   typography: {
-    fontFamily: "'Plus Jakarta Sans', Inter, system-ui, sans-serif",
+    fontFamily: "Inter, system-ui, sans-serif",
     scale: "comfortable",
-    questionSize: "1.25rem",
+    questionSize: "1rem",
     labelSize: "0.875rem",
     helpTextSize: "0.8125rem",
-    bodySize: "1rem"
+    bodySize: "0.875rem"
   },
-  shape: { radius: "lg", inputRadius: "12px", buttonRadius: "12px", cardRadius: "16px" },
-  spacing: { base: 16, sectionGap: 40, fieldGap: 28, inputPaddingX: 16, inputPaddingY: 12 },
-  layout: { maxWidth: "680px", alignment: "center", progressPosition: "top", sectionLayout: "card" }
+  shape: { radius: "md", inputRadius: "8px", buttonRadius: "8px", cardRadius: "12px" },
+  spacing: { base: 16, sectionGap: 32, fieldGap: 24, inputPaddingX: 14, inputPaddingY: 10 },
+  layout: { maxWidth: "640px", alignment: "left", progressPosition: "top", sectionLayout: "card" }
 };
-var clinicalPreset = {
+var clinicalLight = {
   colors: {
-    primary: "#0284C7",
-    primaryForeground: "#ffffff",
-    secondary: "#0891B2",
-    secondaryForeground: "#ffffff",
-    error: "#DC2626",
-    errorForeground: "#ffffff",
-    warning: "#D97706",
-    success: "#16A34A",
-    surface: "#ffffff",
+    primary: "#0369A1",
+    primaryForeground: "#FFFFFF",
+    secondary: "#E0F2FE",
+    secondaryForeground: "#0C4A6E",
+    error: "#B91C1C",
+    errorForeground: "#FFFFFF",
+    warning: "#B45309",
+    success: "#15803D",
+    surface: "#FFFFFF",
     background: "#F0F9FF",
     text: "#0C4A6E",
-    textMuted: "#64748B",
-    textDisabled: "#CBD5E1",
+    textMuted: "#4B6B82",
+    textDisabled: "#BAD6E9",
     border: "#BAE6FD",
-    borderFocus: "#0284C7",
-    inputBackground: "#ffffff"
+    borderFocus: "#0369A1",
+    inputBackground: "#FFFFFF"
   },
   typography: {
     fontFamily: "'Source Sans 3', 'Segoe UI', system-ui, sans-serif",
@@ -863,22 +1371,22 @@ var clinicalPreset = {
   spacing: { base: 16, sectionGap: 28, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
   layout: { maxWidth: "680px", alignment: "left", progressPosition: "top", sectionLayout: "bordered" }
 };
-var clinicalDarkPreset = {
+var clinicalDark = {
   colors: {
     primary: "#38BDF8",
     primaryForeground: "#0C1929",
-    secondary: "#22D3EE",
-    secondaryForeground: "#0C1929",
-    error: "#F87171",
-    errorForeground: "#0C1929",
-    warning: "#FBBF24",
-    success: "#34D399",
+    secondary: "#0C3554",
+    secondaryForeground: "#BAE6FD",
+    error: "#FCA5A5",
+    errorForeground: "#1C1110",
+    warning: "#FCD34D",
+    success: "#6EE7B7",
     surface: "#0F2438",
-    background: "#0C1929",
+    background: "#0B1929",
     text: "#E0F2FE",
-    textMuted: "#7DD3FC",
+    textMuted: "#7DC4E8",
     textDisabled: "#1E3A5F",
-    border: "#1E3A5F",
+    border: "#1C3A5A",
     borderFocus: "#38BDF8",
     inputBackground: "#0F2438"
   },
@@ -894,86 +1402,210 @@ var clinicalDarkPreset = {
   spacing: { base: 16, sectionGap: 28, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
   layout: { maxWidth: "680px", alignment: "left", progressPosition: "top", sectionLayout: "bordered" }
 };
-var playfulPreset = {
+var notionLight = {
   colors: {
-    primary: "#EC4899",
-    primaryForeground: "#ffffff",
-    secondary: "#8B5CF6",
-    secondaryForeground: "#ffffff",
-    error: "#EF4444",
-    errorForeground: "#ffffff",
-    warning: "#F59E0B",
-    success: "#10B981",
-    surface: "#ffffff",
-    background: "#FFF7ED",
-    text: "#1C1917",
+    primary: "#2383E2",
+    primaryForeground: "#FFFFFF",
+    secondary: "#EBF5FB",
+    secondaryForeground: "#1B4F7B",
+    error: "#EB5757",
+    errorForeground: "#FFFFFF",
+    warning: "#CB912F",
+    success: "#0F7B6C",
+    surface: "#FFFFFF",
+    background: "#FFFFFF",
+    text: "#37352F",
+    textMuted: "#787774",
+    textDisabled: "#C3C2BF",
+    border: "#E3E2E0",
+    borderFocus: "#2383E2",
+    inputBackground: "#F7F6F3"
+  },
+  typography: {
+    fontFamily: "'Lyon Text', Georgia, 'Times New Roman', serif",
+    scale: "comfortable",
+    questionSize: "1.0625rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "1rem"
+  },
+  shape: { radius: "sm", inputRadius: "4px", buttonRadius: "4px", cardRadius: "4px" },
+  spacing: { base: 16, sectionGap: 32, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
+  layout: { maxWidth: "680px", alignment: "left", progressPosition: "top", sectionLayout: "flat" }
+};
+var notionDark = {
+  colors: {
+    primary: "#529CCA",
+    primaryForeground: "#FFFFFF",
+    secondary: "#143046",
+    secondaryForeground: "#9ECBEB",
+    error: "#FF6B6B",
+    errorForeground: "#1C1210",
+    warning: "#E0AD50",
+    success: "#4DAB9A",
+    surface: "#2F3437",
+    background: "#191919",
+    text: "#E6E3DD",
+    textMuted: "#9B9A97",
+    textDisabled: "#4F4F4F",
+    border: "#434343",
+    borderFocus: "#529CCA",
+    inputBackground: "#2F3437"
+  },
+  typography: {
+    fontFamily: "'Lyon Text', Georgia, 'Times New Roman', serif",
+    scale: "comfortable",
+    questionSize: "1.0625rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "1rem"
+  },
+  shape: { radius: "sm", inputRadius: "4px", buttonRadius: "4px", cardRadius: "4px" },
+  spacing: { base: 16, sectionGap: 32, fieldGap: 24, inputPaddingX: 12, inputPaddingY: 10 },
+  layout: { maxWidth: "680px", alignment: "left", progressPosition: "top", sectionLayout: "flat" }
+};
+var sunsetLight = {
+  colors: {
+    primary: "#C2410C",
+    primaryForeground: "#FFFFFF",
+    secondary: "#FFF7ED",
+    secondaryForeground: "#7C2D12",
+    error: "#B91C1C",
+    errorForeground: "#FFFFFF",
+    warning: "#A16207",
+    success: "#15803D",
+    surface: "#FFFFFF",
+    background: "#FFFBF5",
+    text: "#292524",
     textMuted: "#78716C",
     textDisabled: "#D6D3D1",
-    border: "#FDE68A",
-    borderFocus: "#EC4899",
-    inputBackground: "#FFFBEB"
+    border: "#E7E5E4",
+    borderFocus: "#C2410C",
+    inputBackground: "#FFFFFF"
   },
   typography: {
-    fontFamily: "'Nunito', 'Comic Neue', system-ui, sans-serif",
-    scale: "spacious",
-    questionSize: "1.25rem",
-    labelSize: "0.9375rem",
-    helpTextSize: "0.875rem",
-    bodySize: "1rem"
+    fontFamily: "'DM Sans', Inter, system-ui, sans-serif",
+    scale: "comfortable",
+    questionSize: "1.125rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "0.9375rem"
   },
-  shape: { radius: "full", inputRadius: "9999px", buttonRadius: "9999px", cardRadius: "20px" },
-  spacing: { base: 18, sectionGap: 36, fieldGap: 28, inputPaddingX: 18, inputPaddingY: 12 },
-  layout: { maxWidth: "600px", alignment: "center", progressPosition: "top", sectionLayout: "card" }
+  shape: { radius: "lg", inputRadius: "10px", buttonRadius: "10px", cardRadius: "14px" },
+  spacing: { base: 16, sectionGap: 36, fieldGap: 26, inputPaddingX: 14, inputPaddingY: 11 },
+  layout: { maxWidth: "640px", alignment: "center", progressPosition: "top", sectionLayout: "card" }
 };
-var playfulDarkPreset = {
+var sunsetDark = {
   colors: {
-    primary: "#F472B6",
-    primaryForeground: "#1A0A14",
-    secondary: "#A78BFA",
-    secondaryForeground: "#1A0A14",
+    primary: "#FB923C",
+    primaryForeground: "#1C1210",
+    secondary: "#3D1F0E",
+    secondaryForeground: "#FED7AA",
     error: "#FCA5A5",
-    errorForeground: "#1A0A14",
+    errorForeground: "#1C1210",
     warning: "#FCD34D",
     success: "#6EE7B7",
-    surface: "#2D1F2B",
-    background: "#1A0F19",
-    text: "#FDF2F8",
-    textMuted: "#D4A9C4",
-    textDisabled: "#4A3248",
-    border: "#5C3D56",
-    borderFocus: "#F472B6",
-    inputBackground: "#2D1F2B"
+    surface: "#292019",
+    background: "#1C1510",
+    text: "#F5F0EB",
+    textMuted: "#B0A89E",
+    textDisabled: "#4A413A",
+    border: "#3D352D",
+    borderFocus: "#FB923C",
+    inputBackground: "#292019"
+  },
+  typography: {
+    fontFamily: "'DM Sans', Inter, system-ui, sans-serif",
+    scale: "comfortable",
+    questionSize: "1.125rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "0.9375rem"
+  },
+  shape: { radius: "lg", inputRadius: "10px", buttonRadius: "10px", cardRadius: "14px" },
+  spacing: { base: 16, sectionGap: 36, fieldGap: 26, inputPaddingX: 14, inputPaddingY: 11 },
+  layout: { maxWidth: "640px", alignment: "center", progressPosition: "top", sectionLayout: "card" }
+};
+var roseLight = {
+  colors: {
+    primary: "#BE185D",
+    primaryForeground: "#FFFFFF",
+    secondary: "#FFF1F2",
+    secondaryForeground: "#881337",
+    error: "#DC2626",
+    errorForeground: "#FFFFFF",
+    warning: "#D97706",
+    success: "#059669",
+    surface: "#FFFFFF",
+    background: "#FFFBFB",
+    text: "#1C1917",
+    textMuted: "#737373",
+    textDisabled: "#D4D4D4",
+    border: "#FECDD3",
+    borderFocus: "#BE185D",
+    inputBackground: "#FFFFFF"
   },
   typography: {
-    fontFamily: "'Nunito', 'Comic Neue', system-ui, sans-serif",
+    fontFamily: "'Plus Jakarta Sans', Inter, system-ui, sans-serif",
     scale: "spacious",
-    questionSize: "1.25rem",
-    labelSize: "0.9375rem",
-    helpTextSize: "0.875rem",
-    bodySize: "1rem"
+    questionSize: "1.1875rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "0.9375rem"
   },
-  shape: { radius: "full", inputRadius: "9999px", buttonRadius: "9999px", cardRadius: "20px" },
-  spacing: { base: 18, sectionGap: 36, fieldGap: 28, inputPaddingX: 18, inputPaddingY: 12 },
-  layout: { maxWidth: "600px", alignment: "center", progressPosition: "top", sectionLayout: "card" }
+  shape: { radius: "lg", inputRadius: "12px", buttonRadius: "12px", cardRadius: "16px" },
+  spacing: { base: 18, sectionGap: 36, fieldGap: 28, inputPaddingX: 16, inputPaddingY: 12 },
+  layout: { maxWidth: "640px", alignment: "center", progressPosition: "top", sectionLayout: "card" }
 };
-var highContrastPreset = {
+var roseDark = {
   colors: {
-    primary: "#0000EE",
-    primaryForeground: "#ffffff",
-    secondary: "#6B21A8",
-    secondaryForeground: "#ffffff",
+    primary: "#FB7185",
+    primaryForeground: "#1C0A12",
+    secondary: "#3B0A22",
+    secondaryForeground: "#FECDD3",
+    error: "#F87171",
+    errorForeground: "#1C1210",
+    warning: "#FBBF24",
+    success: "#34D399",
+    surface: "#1F1318",
+    background: "#150D11",
+    text: "#FAF0F2",
+    textMuted: "#C9A4AE",
+    textDisabled: "#4A3039",
+    border: "#3D2030",
+    borderFocus: "#FB7185",
+    inputBackground: "#1F1318"
+  },
+  typography: {
+    fontFamily: "'Plus Jakarta Sans', Inter, system-ui, sans-serif",
+    scale: "spacious",
+    questionSize: "1.1875rem",
+    labelSize: "0.875rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "0.9375rem"
+  },
+  shape: { radius: "lg", inputRadius: "12px", buttonRadius: "12px", cardRadius: "16px" },
+  spacing: { base: 18, sectionGap: 36, fieldGap: 28, inputPaddingX: 16, inputPaddingY: 12 },
+  layout: { maxWidth: "640px", alignment: "center", progressPosition: "top", sectionLayout: "card" }
+};
+var highContrastLight = {
+  colors: {
+    primary: "#0000CC",
+    primaryForeground: "#FFFFFF",
+    secondary: "#E6E6FF",
+    secondaryForeground: "#000066",
     error: "#B91C1C",
-    errorForeground: "#ffffff",
-    warning: "#92400E",
+    errorForeground: "#FFFFFF",
+    warning: "#854D0E",
     success: "#166534",
-    surface: "#ffffff",
-    background: "#ffffff",
+    surface: "#FFFFFF",
+    background: "#FFFFFF",
     text: "#000000",
-    textMuted: "#374151",
-    textDisabled: "#9CA3AF",
+    textMuted: "#333333",
+    textDisabled: "#888888",
     border: "#000000",
-    borderFocus: "#0000EE",
-    inputBackground: "#ffffff"
+    borderFocus: "#0000CC",
+    inputBackground: "#FFFFFF"
   },
   typography: {
     fontFamily: "Arial, Helvetica, sans-serif",
@@ -987,24 +1619,24 @@ var highContrastPreset = {
   spacing: { base: 20, sectionGap: 40, fieldGap: 32, inputPaddingX: 14, inputPaddingY: 12 },
   layout: { maxWidth: "720px", alignment: "left", progressPosition: "top", sectionLayout: "bordered" }
 };
-var highContrastDarkPreset = {
+var highContrastDark = {
   colors: {
-    primary: "#93C5FD",
+    primary: "#6CB4FF",
     primaryForeground: "#000000",
-    secondary: "#C084FC",
-    secondaryForeground: "#000000",
-    error: "#FCA5A5",
+    secondary: "#002255",
+    secondaryForeground: "#99CCFF",
+    error: "#FF8A8A",
     errorForeground: "#000000",
-    warning: "#FCD34D",
-    success: "#86EFAC",
-    surface: "#000000",
+    warning: "#FFD54F",
+    success: "#69F0AE",
+    surface: "#0A0A0A",
     background: "#000000",
     text: "#FFFFFF",
-    textMuted: "#D1D5DB",
-    textDisabled: "#6B7280",
+    textMuted: "#CCCCCC",
+    textDisabled: "#666666",
     border: "#FFFFFF",
-    borderFocus: "#93C5FD",
-    inputBackground: "#000000"
+    borderFocus: "#6CB4FF",
+    inputBackground: "#0A0A0A"
   },
   typography: {
     fontFamily: "Arial, Helvetica, sans-serif",
@@ -1019,11 +1651,18 @@ var highContrastDarkPreset = {
   layout: { maxWidth: "720px", alignment: "left", progressPosition: "top", sectionLayout: "bordered" }
 };
 var PRESET_FAMILIES = {
-  clean: { light: cleanPreset, dark: cleanDarkPreset, label: "Clean" },
-  modern: { light: modernPreset, dark: modernDarkPreset, label: "Modern" },
-  clinical: { light: clinicalPreset, dark: clinicalDarkPreset, label: "Clinical" },
-  playful: { light: playfulPreset, dark: playfulDarkPreset, label: "Playful" },
-  "high-contrast": { light: highContrastPreset, dark: highContrastDarkPreset, label: "High contrast" }
+  clean: { light: cleanLight, dark: cleanDark, label: "Clean" },
+  stripe: { light: stripeLight, dark: stripeDark, label: "Stripe" },
+  github: { light: githubLight, dark: githubDark, label: "GitHub" },
+  vercel: { light: vercelLight, dark: vercelDark, label: "Vercel" },
+  shopify: { light: shopifyLight, dark: shopifyDark, label: "Shopify" },
+  slack: { light: slackLight, dark: slackDark, label: "Slack" },
+  tailwind: { light: tailwindLight, dark: tailwindDark, label: "Tailwind" },
+  clinical: { light: clinicalLight, dark: clinicalDark, label: "Clinical" },
+  notion: { light: notionLight, dark: notionDark, label: "Notion" },
+  sunset: { light: sunsetLight, dark: sunsetDark, label: "Sunset" },
+  rose: { light: roseLight, dark: roseDark, label: "Rose" },
+  "high-contrast": { light: highContrastLight, dark: highContrastDark, label: "High contrast" }
 };
 var COMPARISON_PRESETS = Object.fromEntries(
   Object.entries(PRESET_FAMILIES).map(([key, family]) => [
@@ -1140,6 +1779,12 @@ function resolveThemeFromDOM() {
     const val = styles.getPropertyValue(prop).trim();
     return val || void 0;
   };
+  const getNumber = (prop) => {
+    const val = get(prop);
+    if (val == null) return void 0;
+    const num = parseFloat(val);
+    return isNaN(num) ? void 0 : num;
+  };
   return {
     colors: {
       primary: get("--primary"),
@@ -1172,6 +1817,17 @@ function resolveThemeFromDOM() {
       inputRadius: get("--fc-radius-input"),
       buttonRadius: get("--fc-radius-button"),
       cardRadius: get("--fc-radius-card")
+    },
+    spacing: {
+      base: getNumber("--fc-spacing-base"),
+      sectionGap: getNumber("--fc-section-gap"),
+      fieldGap: getNumber("--fc-field-gap"),
+      inputPaddingX: getNumber("--fc-input-padding-x"),
+      inputPaddingY: getNumber("--fc-input-padding-y")
+    },
+    layout: {
+      maxWidth: get("--fc-max-width")
+      // alignment, progressPosition, sectionLayout are enums — not resolvable from CSS
     }
   };
 }
@@ -1201,13 +1857,34 @@ function ThemeEditorThemeProvider({ theme, children }) {
 }
 function isDarkTheme(theme) {
   const bg = theme.colors?.background ?? "#FFFFFF";
-  const hex = bg.replace("#", "");
+  let hex = bg.replace("#", "");
+  if (hex.length === 3) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  }
   if (hex.length < 6) return false;
   const r = parseInt(hex.slice(0, 2), 16);
   const g = parseInt(hex.slice(2, 4), 16);
   const b = parseInt(hex.slice(4, 6), 16);
   return 0.299 * r + 0.587 * g + 0.114 * b < 128;
 }
+function detectPresetFamily(theme) {
+  const c = theme.colors;
+  if (!c) return null;
+  for (const [key, family] of Object.entries(PRESET_FAMILIES)) {
+    for (const variant of ["light", "dark"]) {
+      const preset = family[variant];
+      const pc = preset.colors;
+      if (!pc) continue;
+      if (c.primary?.toLowerCase() === pc.primary?.toLowerCase() && c.background?.toLowerCase() === pc.background?.toLowerCase() && c.surface?.toLowerCase() === pc.surface?.toLowerCase()) {
+        return key;
+      }
+    }
+  }
+  return null;
+}
+function isValidHex(value) {
+  return /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(value);
+}
 var SECTIONS = [
   {
     id: "colors",
@@ -1328,6 +2005,7 @@ var SECTIONS = [
 ];
 function ThemeEditorInner({
   initialTheme,
+  initialPreset,
   onChange,
   onSave,
   theme: chromeTheme,
@@ -1339,39 +2017,82 @@ function ThemeEditorInner({
 }) {
   const resolvedInitial = react.useMemo(
     () => initialTheme ?? resolveThemeFromDOM(),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
+    [initialTheme]
   );
   const [theme, setTheme] = react.useState(resolvedInitial);
   const [activeSection, setActiveSection] = react.useState("colors");
-  const [presetKey, setPresetKey] = react.useState("custom");
+  const resolvedPresetInit = initialPreset ?? detectPresetFamily(resolvedInitial) ?? "custom";
+  const [presetKey, setPresetKey] = react.useState(resolvedPresetInit);
+  const presetKeyRef = react.useRef(presetKey);
+  presetKeyRef.current = presetKey;
   const [showPalette, setShowPalette] = react.useState(false);
   const [showComparison, setShowComparison] = react.useState(false);
   const themeRef = react.useRef(theme);
   themeRef.current = theme;
-  const hasInitialTheme = react.useRef(initialTheme != null);
+  const prevInitialRef = react.useRef(initialTheme);
+  const prevPresetRef = react.useRef(initialPreset);
+  react.useEffect(() => {
+    if (!initialTheme) return;
+    const themeChanged = JSON.stringify(initialTheme) !== JSON.stringify(prevInitialRef.current);
+    const presetChanged = initialPreset !== prevPresetRef.current;
+    if (!themeChanged && !presetChanged) return;
+    prevInitialRef.current = initialTheme;
+    prevPresetRef.current = initialPreset;
+    setTheme(initialTheme);
+    const resolvedPreset = initialPreset ?? detectPresetFamily(initialTheme) ?? "custom";
+    setPresetKey(resolvedPreset);
+  }, [initialTheme, initialPreset]);
+  const mountReadyRef = react.useRef(false);
   react.useEffect(() => {
-    if (hasInitialTheme.current) return;
     if (typeof window === "undefined") return;
+    const initialAttr = document.documentElement.getAttribute("data-theme");
+    const lastAttrRef = { current: initialAttr };
+    const readyTimer = setTimeout(() => {
+      mountReadyRef.current = true;
+    }, 500);
     const observer = new MutationObserver(() => {
+      if (!mountReadyRef.current) return;
+      const currentAttr = document.documentElement.getAttribute("data-theme");
+      if (currentAttr === lastAttrRef.current) return;
+      lastAttrRef.current = currentAttr;
       requestAnimationFrame(() => {
-        const resolved = resolveThemeFromDOM();
-        setTheme(resolved);
-        setPresetKey("custom");
-        onChange?.(resolved);
+        const variant = currentAttr === "dark" ? "dark" : "light";
+        let key = presetKeyRef.current;
+        if (key === "custom") {
+          const detected = detectPresetFamily(themeRef.current);
+          if (detected) {
+            key = detected;
+            setPresetKey(detected);
+          }
+        }
+        if (key !== "custom") {
+          const family = PRESET_FAMILIES[key];
+          if (family) {
+            const preset = family[variant];
+            setTheme(preset);
+            onChange?.(preset, key);
+          }
+        } else {
+          const resolved = resolveThemeFromDOM();
+          setTheme(resolved);
+          onChange?.(resolved, "custom");
+        }
       });
     });
     observer.observe(document.documentElement, {
       attributes: true,
       attributeFilter: ["data-theme", "class"]
     });
-    return () => observer.disconnect();
+    return () => {
+      clearTimeout(readyTimer);
+      observer.disconnect();
+    };
   }, [onChange]);
   react.useEffect(() => {
     function handleKeyDown(e) {
       if ((e.metaKey || e.ctrlKey) && e.key === "s") {
         e.preventDefault();
-        onSave?.(themeRef.current);
+        onSave?.(themeRef.current, presetKeyRef.current);
       }
     }
     window.addEventListener("keydown", handleKeyDown);
@@ -1384,7 +2105,7 @@ function ThemeEditorInner({
           ...prev,
           [section]: { ...prev[section], [key]: value }
         };
-        onChange?.(next);
+        onChange?.(next, "custom");
         return next;
       });
       setPresetKey("custom");
@@ -1395,11 +2116,12 @@ function ThemeEditorInner({
     (key) => {
       const family = PRESET_FAMILIES[key];
       if (family) {
-        const variant = isDarkTheme(theme) ? "dark" : "light";
+        const htmlTheme = typeof document !== "undefined" ? document.documentElement.getAttribute("data-theme") : null;
+        const variant = htmlTheme === "dark" ? "dark" : htmlTheme === "light" ? "light" : isDarkTheme(theme) ? "dark" : "light";
         const preset = family[variant];
         setTheme(preset);
         setPresetKey(key);
-        onChange?.(preset);
+        onChange?.(preset, key);
       }
     },
     [onChange, theme]
@@ -1413,6 +2135,7 @@ function ThemeEditorInner({
     a.click();
     URL.revokeObjectURL(url);
   }, [theme]);
+  const [importError, setImportError] = react.useState(null);
   const importJson = react.useCallback(() => {
     const input = document.createElement("input");
     input.type = "file";
@@ -1424,10 +2147,16 @@ function ThemeEditorInner({
       reader.onload = () => {
         try {
           const parsed = JSON.parse(reader.result);
+          if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed) || !("colors" in parsed || "typography" in parsed || "shape" in parsed || "spacing" in parsed || "layout" in parsed)) {
+            setImportError("Invalid theme file: expected an object with colors, typography, shape, spacing, or layout.");
+            return;
+          }
+          setImportError(null);
           setTheme(parsed);
           setPresetKey("custom");
-          onChange?.(parsed);
+          onChange?.(parsed, "custom");
         } catch {
+          setImportError("Failed to parse JSON file. Please check the file format.");
         }
       };
       reader.readAsText(file);
@@ -1441,7 +2170,7 @@ function ThemeEditorInner({
     importCssFile(theme, (merged) => {
       setTheme(merged);
       setPresetKey("custom");
-      onChange?.(merged);
+      onChange?.(merged, "custom");
     });
   }, [theme, onChange]);
   const currentSection = react.useMemo(
@@ -1502,9 +2231,13 @@ function ThemeEditorInner({
                 children: "Compare"
               }
             ),
-            onSave && /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => onSave(theme), className: "fcte-btn fcte-btn--primary", children: "Save" })
+            onSave && /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => onSave(theme, presetKey), className: "fcte-btn fcte-btn--primary", children: "Save" })
           ] })
         ] }),
+        importError && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-import-error", role: "alert", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: importError }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => setImportError(null), className: "fcte-import-error__close", children: "\xD7" })
+        ] }),
         showPalette && /* @__PURE__ */ jsxRuntime.jsx(
           PaletteGenerator,
           {
@@ -1512,7 +2245,7 @@ function ThemeEditorInner({
             onApply: (newTheme) => {
               setTheme(newTheme);
               setPresetKey("custom");
-              onChange?.(newTheme);
+              onChange?.(newTheme, "custom");
               setShowPalette(false);
             },
             onClose: () => setShowPalette(false)
@@ -1538,6 +2271,8 @@ function ThemeEditorInner({
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fcte-fields", children: currentSection.fields.map((field) => {
               const val = sectionValues[field.key];
               if (field.kind === "color") {
+                const colorVal = typeof val === "string" ? val : "#000000";
+                const isInvalid = colorVal.length > 0 && !isValidHex(colorVal);
                 return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-field", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("label", { className: "fcte-field__label", children: field.label }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-field__color-row", children: [
@@ -1545,7 +2280,7 @@ function ThemeEditorInner({
                       "input",
                       {
                         type: "color",
-                        value: typeof val === "string" ? val : "#000000",
+                        value: isValidHex(colorVal) ? colorVal : "#000000",
                         onChange: (e) => updateField(currentSection.themeKey, field.key, e.target.value),
                         className: "fcte-field__swatch"
                       }
@@ -1554,10 +2289,24 @@ function ThemeEditorInner({
                       "input",
                       {
                         type: "text",
-                        value: typeof val === "string" ? val : "",
-                        onChange: (e) => updateField(currentSection.themeKey, field.key, e.target.value),
-                        className: "fcte-field__text",
-                        spellCheck: false
+                        value: colorVal,
+                        onChange: (e) => {
+                          const v = e.target.value;
+                          if (isValidHex(v)) {
+                            updateField(currentSection.themeKey, field.key, v);
+                          } else {
+                            setTheme((prev) => ({
+                              ...prev,
+                              [currentSection.themeKey]: {
+                                ...prev[currentSection.themeKey],
+                                [field.key]: v
+                              }
+                            }));
+                          }
+                        },
+                        className: `fcte-field__text${isInvalid ? " fcte-field__text--invalid" : ""}`,
+                        spellCheck: false,
+                        placeholder: "#RRGGBB"
                       }
                     )
                   ] })
@@ -1586,9 +2335,16 @@ function ThemeEditorInner({
                       {
                         type: "number",
                         value: typeof val === "number" ? val : 0,
-                        onChange: (e) => updateField(currentSection.themeKey, field.key, Number(e.target.value)),
+                        onChange: (e) => {
+                          let n = Math.round(Number(e.target.value));
+                          if (isNaN(n)) n = 0;
+                          if (field.min != null) n = Math.max(field.min, n);
+                          if (field.max != null) n = Math.min(field.max, n);
+                          updateField(currentSection.themeKey, field.key, n);
+                        },
                         min: field.min,
                         max: field.max,
+                        step: 1,
                         className: "fcte-field__number"
                       }
                     ),
@@ -1606,7 +2362,8 @@ function ThemeEditorInner({
                     onChange: (e) => updateField(currentSection.themeKey, field.key, e.target.value),
                     placeholder: field.placeholder,
                     className: "fcte-field__text",
-                    spellCheck: false
+                    spellCheck: false,
+                    maxLength: 200
                   }
                 )
               ] }, field.key);