@squaredr/fieldcraft-pro 1.6.1 → 1.6.3

package/dist/{chunk-IKGS2ZXV.mjs → chunk-AXCQWATI.mjs}

@@ -1044,13 +1044,28 @@ function ThemeEditorInner({
   const [theme, setTheme] = useState(resolvedInitial);
   const [activeSection, setActiveSection] = useState("colors");
   const [presetKey, setPresetKey] = useState("custom");
-  const [mode, setMode] = useState(
-    () => isDarkTheme(resolvedInitial) ? "dark" : "light"
-  );
   const [showPalette, setShowPalette] = useState(false);
   const [showComparison, setShowComparison] = useState(false);
   const themeRef = useRef(theme);
   themeRef.current = theme;
+  const hasInitialTheme = useRef(initialTheme != null);
+  useEffect(() => {
+    if (hasInitialTheme.current) return;
+    if (typeof window === "undefined") return;
+    const observer = new MutationObserver(() => {
+      requestAnimationFrame(() => {
+        const resolved = resolveThemeFromDOM();
+        setTheme(resolved);
+        setPresetKey("custom");
+        onChange?.(resolved);
+      });
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme", "class"]
+    });
+    return () => observer.disconnect();
+  }, [onChange]);
   useEffect(() => {
     function handleKeyDown(e) {
       if ((e.metaKey || e.ctrlKey) && e.key === "s") {
@@ -1076,30 +1091,18 @@ function ThemeEditorInner({
     [onChange]
   );
   const loadPreset = useCallback(
-    (key, forceMode) => {
+    (key) => {
       const family = PRESET_FAMILIES[key];
       if (family) {
-        const m = forceMode ?? mode;
-        const preset = family[m];
+        const variant = isDarkTheme(theme) ? "dark" : "light";
+        const preset = family[variant];
         setTheme(preset);
         setPresetKey(key);
         onChange?.(preset);
       }
     },
-    [onChange, mode]
+    [onChange, theme]
   );
-  const toggleMode = useCallback(() => {
-    setMode((prev) => {
-      const next = prev === "light" ? "dark" : "light";
-      const family = PRESET_FAMILIES[presetKey];
-      if (family) {
-        const preset = family[next];
-        setTheme(preset);
-        onChange?.(preset);
-      }
-      return next;
-    });
-  }, [presetKey, onChange]);
   const exportJson = useCallback(() => {
     const blob = new Blob([JSON.stringify(theme, null, 2)], { type: "application/json" });
     const url = URL.createObjectURL(blob);
@@ -1168,15 +1171,6 @@ function ThemeEditorInner({
                   Object.entries(PRESET_FAMILIES).map(([k, fam]) => /* @__PURE__ */ jsx("option", { value: k, children: fam.label }, k))
                 ]
               }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: toggleMode,
-                className: "fcte-btn fcte-btn--secondary fcte-toolbar__mode",
-                title: mode === "light" ? "Switch to dark mode" : "Switch to light mode",
-                children: mode === "light" ? "\u2600" : "\u263E"
-              }
             )
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "fcte-toolbar__right", children: [

package/dist/index.js

@@ -8540,13 +8540,28 @@ function ThemeEditorInner({
   const [theme, setTheme] = react.useState(resolvedInitial);
   const [activeSection, setActiveSection] = react.useState("colors");
   const [presetKey, setPresetKey] = react.useState("custom");
-  const [mode, setMode] = react.useState(
-    () => isDarkTheme(resolvedInitial) ? "dark" : "light"
-  );
   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);
+  react.useEffect(() => {
+    if (hasInitialTheme.current) return;
+    if (typeof window === "undefined") return;
+    const observer = new MutationObserver(() => {
+      requestAnimationFrame(() => {
+        const resolved = resolveThemeFromDOM();
+        setTheme(resolved);
+        setPresetKey("custom");
+        onChange?.(resolved);
+      });
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme", "class"]
+    });
+    return () => observer.disconnect();
+  }, [onChange]);
   react.useEffect(() => {
     function handleKeyDown(e) {
       if ((e.metaKey || e.ctrlKey) && e.key === "s") {
@@ -8572,30 +8587,18 @@ function ThemeEditorInner({
     [onChange]
   );
   const loadPreset = react.useCallback(
-    (key, forceMode) => {
+    (key) => {
       const family = PRESET_FAMILIES[key];
       if (family) {
-        const m = forceMode ?? mode;
-        const preset = family[m];
+        const variant = isDarkTheme(theme) ? "dark" : "light";
+        const preset = family[variant];
         setTheme(preset);
         setPresetKey(key);
         onChange?.(preset);
       }
     },
-    [onChange, mode]
+    [onChange, theme]
   );
-  const toggleMode = react.useCallback(() => {
-    setMode((prev) => {
-      const next = prev === "light" ? "dark" : "light";
-      const family = PRESET_FAMILIES[presetKey];
-      if (family) {
-        const preset = family[next];
-        setTheme(preset);
-        onChange?.(preset);
-      }
-      return next;
-    });
-  }, [presetKey, onChange]);
   const exportJson = react.useCallback(() => {
     const blob = new Blob([JSON.stringify(theme, null, 2)], { type: "application/json" });
     const url = URL.createObjectURL(blob);
@@ -8664,15 +8667,6 @@ function ThemeEditorInner({
                   Object.entries(PRESET_FAMILIES).map(([k, fam]) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: k, children: fam.label }, k))
                 ]
               }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                onClick: toggleMode,
-                className: "fcte-btn fcte-btn--secondary fcte-toolbar__mode",
-                title: mode === "light" ? "Switch to dark mode" : "Switch to light mode",
-                children: mode === "light" ? "\u2600" : "\u263E"
-              }
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-toolbar__right", children: [
@@ -8872,7 +8866,7 @@ var themeEditorDarkPreset = {
 // src/index.ts
 if (typeof globalThis !== "undefined" && typeof globalThis.process !== "undefined" && globalThis.process.env?.NODE_ENV !== "production") {
   const _fc_banner = `
-%c FieldCraft Pro %c v1.6.1 
+%c FieldCraft Pro %c v1.6.3 
 
 %cForm Builder \xB7 Response Viewer \xB7 Theme Editor
 

package/dist/index.mjs

@@ -1,7 +1,7 @@
 export { DEFAULT_PALETTE, DEFAULT_SCHEMA, FormBuilder, FormBuilderThemeProvider, QUESTION_TYPE_INFO, addOption, addQuestion, addSection, duplicateQuestion, duplicateSection, findQuestion, findSection, generateId, generateOptionId, generateQuestionId, generateSectionId, moveOption, moveQuestion, moveSection, removeOption, removeQuestion, removeSection, updateOption, updateQuestion, updateSection, useBuilderState, useBuilderTheme, useDragDrop, useUndoRedo } from './chunk-ANBMT5AW.mjs';
 export { ResponseViewer } from './chunk-5LKGCZAW.mjs';
 export { cn } from './chunk-QQ4JZGTD.mjs';
-export { PRESET_FAMILIES, PREVIEW_SCHEMA, ThemeEditor, ThemeEditorInner, ThemeEditorThemeProvider, resolveThemeFromDOM, themeEditorDarkPreset, themeEditorLightPreset, useEditorTheme } from './chunk-IKGS2ZXV.mjs';
+export { PRESET_FAMILIES, PREVIEW_SCHEMA, ThemeEditor, ThemeEditorInner, ThemeEditorThemeProvider, resolveThemeFromDOM, themeEditorDarkPreset, themeEditorLightPreset, useEditorTheme } from './chunk-AXCQWATI.mjs';
 export { FieldCraftProProvider, UnlicensedOverlay, isProductionEnvironment, requireLicense, useLicense, validateLicense } from './chunk-VECQKSWS.mjs';
 import { useState, useEffect, Suspense } from 'react';
 import { FieldWrapper } from '@squaredr/fieldcraft-react';
@@ -277,7 +277,7 @@ var PRO_FIELD_OVERRIDES = {
 // src/index.ts
 if (typeof globalThis !== "undefined" && typeof globalThis.process !== "undefined" && globalThis.process.env?.NODE_ENV !== "production") {
   const _fc_banner = `
-%c FieldCraft Pro %c v1.6.1 
+%c FieldCraft Pro %c v1.6.3 
 
 %cForm Builder \xB7 Response Viewer \xB7 Theme Editor
 

package/dist/theme-editor/index.js

@@ -1368,13 +1368,28 @@ function ThemeEditorInner({
   const [theme, setTheme] = react.useState(resolvedInitial);
   const [activeSection, setActiveSection] = react.useState("colors");
   const [presetKey, setPresetKey] = react.useState("custom");
-  const [mode, setMode] = react.useState(
-    () => isDarkTheme(resolvedInitial) ? "dark" : "light"
-  );
   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);
+  react.useEffect(() => {
+    if (hasInitialTheme.current) return;
+    if (typeof window === "undefined") return;
+    const observer = new MutationObserver(() => {
+      requestAnimationFrame(() => {
+        const resolved = resolveThemeFromDOM();
+        setTheme(resolved);
+        setPresetKey("custom");
+        onChange?.(resolved);
+      });
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme", "class"]
+    });
+    return () => observer.disconnect();
+  }, [onChange]);
   react.useEffect(() => {
     function handleKeyDown(e) {
       if ((e.metaKey || e.ctrlKey) && e.key === "s") {
@@ -1400,30 +1415,18 @@ function ThemeEditorInner({
     [onChange]
   );
   const loadPreset = react.useCallback(
-    (key, forceMode) => {
+    (key) => {
       const family = PRESET_FAMILIES[key];
       if (family) {
-        const m = forceMode ?? mode;
-        const preset = family[m];
+        const variant = isDarkTheme(theme) ? "dark" : "light";
+        const preset = family[variant];
         setTheme(preset);
         setPresetKey(key);
         onChange?.(preset);
       }
     },
-    [onChange, mode]
+    [onChange, theme]
   );
-  const toggleMode = react.useCallback(() => {
-    setMode((prev) => {
-      const next = prev === "light" ? "dark" : "light";
-      const family = PRESET_FAMILIES[presetKey];
-      if (family) {
-        const preset = family[next];
-        setTheme(preset);
-        onChange?.(preset);
-      }
-      return next;
-    });
-  }, [presetKey, onChange]);
   const exportJson = react.useCallback(() => {
     const blob = new Blob([JSON.stringify(theme, null, 2)], { type: "application/json" });
     const url = URL.createObjectURL(blob);
@@ -1492,15 +1495,6 @@ function ThemeEditorInner({
                   Object.entries(PRESET_FAMILIES).map(([k, fam]) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: k, children: fam.label }, k))
                 ]
               }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                onClick: toggleMode,
-                className: "fcte-btn fcte-btn--secondary fcte-toolbar__mode",
-                title: mode === "light" ? "Switch to dark mode" : "Switch to light mode",
-                children: mode === "light" ? "\u2600" : "\u263E"
-              }
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-toolbar__right", children: [

package/dist/theme-editor/index.mjs

@@ -1,2 +1,2 @@
-export { PRESET_FAMILIES, PREVIEW_SCHEMA, ThemeEditor, ThemeEditorInner, ThemeEditorThemeProvider, resolveThemeFromDOM, themeEditorDarkPreset, themeEditorLightPreset, useEditorTheme } from '../chunk-IKGS2ZXV.mjs';
+export { PRESET_FAMILIES, PREVIEW_SCHEMA, ThemeEditor, ThemeEditorInner, ThemeEditorThemeProvider, resolveThemeFromDOM, themeEditorDarkPreset, themeEditorLightPreset, useEditorTheme } from '../chunk-AXCQWATI.mjs';
 import '../chunk-VECQKSWS.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squaredr/fieldcraft-pro",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "description": "Pro components for FieldCraft — visual drag-and-drop Form Builder, Response Viewer, and Theme Editor for React",
   "keywords": [
     "fieldcraft",

package/theme-editor/styles.css

@@ -1,8 +1,10 @@
 /* FieldCraft Pro Theme Editor
-   Chrome theming follows the FormBuilder pattern:
+   Chrome theming uses shadcn variable names (--background, --foreground, etc.)
+   matching FormBuilder and ResponseViewer for consistent host page inheritance.
+
    1. ThemeEditorThemeProvider wraps children in <div data-fcte-root="" style={cssVars}>
-   2. :where([data-fcte-root]) defines zero-specificity fallback defaults
-   3. Host page :root variables naturally cascade through (higher specificity)
+   2. --fcte-* variables reference shadcn vars via var(--shadcn-var, fallback)
+   3. Host page :root variables naturally cascade through
    4. Provider inline styles override everything when a theme prop is passed
    5. All editor chrome references var(--fcte-*) — fully themeable
 */
@@ -13,23 +15,22 @@
   height: 100%;
 }
 
-/* ─── Default theme variables (zero specificity) ───────────────── */
-/* :where() gives these zero specificity so host page :root
-   variables naturally override them. When no host defines
-   these vars, the fallback values apply. Inline styles from
-   ThemeEditorThemeProvider override everything. */
-:where([data-fcte-root]) {
-  --fcte-bg: var(--bg, #F4F7F8);
-  --fcte-surface: var(--surface, #FFFFFF);
-  --fcte-surface-hover: var(--wash, #EDF3F2);
-  --fcte-text: var(--ink, #12222A);
-  --fcte-text-muted: var(--muted-text, #6A7B85);
-  --fcte-text-dim: var(--placeholder, #96A5AD);
-  --fcte-border: var(--rule, #DCE4E8);
-  --fcte-border-strong: var(--teal-border, #B9D1CF);
-  --fcte-input-bg: var(--surface2, #FAFCFC);
-  --fcte-accent: var(--teal, #1F6B6E);
-  --fcte-accent-text: var(--teal-on, #FFFFFF);
+/* ─── Default theme variables ──────────────────────────────────── */
+/* References shadcn variable names so the chrome inherits from any
+   host page that defines --background, --foreground, --card, etc.
+   Fallback values are Drafting Teal light defaults. */
+[data-fcte-root] {
+  --fcte-bg: var(--background, #F4F7F8);
+  --fcte-surface: var(--card, #FFFFFF);
+  --fcte-surface-hover: var(--accent, #EDF3F2);
+  --fcte-text: var(--foreground, #12222A);
+  --fcte-text-muted: var(--muted-foreground, #6A7B85);
+  --fcte-text-dim: var(--muted-foreground, #96A5AD);
+  --fcte-border: var(--border, #DCE4E8);
+  --fcte-border-strong: var(--border, #B9D1CF);
+  --fcte-input-bg: var(--card, #FAFCFC);
+  --fcte-accent: var(--primary, #1F6B6E);
+  --fcte-accent-text: var(--primary-foreground, #FFFFFF);
 }
 
 /* ─── Root element ──────────────────────────────────────────────── */
@@ -83,16 +84,6 @@
   cursor: pointer;
 }
 
-.fcte-toolbar__mode {
-  padding: 4px 8px;
-  font-size: 14px;
-  line-height: 1;
-  min-width: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 /* ─── Buttons ───────────────────────────────────────────────────── */
 .fcte-btn {
   padding: 5px 12px;