shru-design-system 0.1.4 → 0.1.6

package/dist/index.d.mts

@@ -152,6 +152,22 @@ declare function getThemesForCategory(category: string): Promise<Record<string,
  */
 declare function getTheme(category: string, themeId: string): Promise<ThemeMetadata | null>;
 
+/**
+ * Theme Utilities
+ * Pure utility functions for theme management
+ * Note: generateAndApplyTheme has side effects (modifies DOM) but is the main theme application utility
+ */
+
+/**
+ * Debug helper: Enable debug mode to see all CSS variables in console
+ * Call this in browser console: window.__DESIGN_SYSTEM_DEBUG__ = true
+ */
+declare function enableDebugMode(): void;
+/**
+ * Debug helper: Get all current CSS variables
+ */
+declare function getCurrentCSSVariables(): Record<string, string>;
+
 /**
  * Synchronous theme application for blocking script execution
  * This runs before React hydrates to prevent theme flash
@@ -162,4 +178,4 @@ declare function getTheme(category: string, themeId: string): Promise<ThemeMetad
  */
 declare function applyThemeSync(): void;
 
-export { Badge, Button, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, type ThemeMetadata$1 as ThemeMetadata, type ThemeSelection, ThemeToggle, type ThemeToggleProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, applyThemeSync, badgeVariants, buttonVariants, getTheme, getThemeCategories, getThemeFilePath, getThemesForCategory, registerTheme, useTheme, useThemeToggle };
+export { Badge, Button, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, type ThemeMetadata$1 as ThemeMetadata, type ThemeSelection, ThemeToggle, type ThemeToggleProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, applyThemeSync, badgeVariants, buttonVariants, enableDebugMode, getCurrentCSSVariables, getTheme, getThemeCategories, getThemeFilePath, getThemesForCategory, registerTheme, useTheme, useThemeToggle };

package/dist/index.d.ts

@@ -152,6 +152,22 @@ declare function getThemesForCategory(category: string): Promise<Record<string,
  */
 declare function getTheme(category: string, themeId: string): Promise<ThemeMetadata | null>;
 
+/**
+ * Theme Utilities
+ * Pure utility functions for theme management
+ * Note: generateAndApplyTheme has side effects (modifies DOM) but is the main theme application utility
+ */
+
+/**
+ * Debug helper: Enable debug mode to see all CSS variables in console
+ * Call this in browser console: window.__DESIGN_SYSTEM_DEBUG__ = true
+ */
+declare function enableDebugMode(): void;
+/**
+ * Debug helper: Get all current CSS variables
+ */
+declare function getCurrentCSSVariables(): Record<string, string>;
+
 /**
  * Synchronous theme application for blocking script execution
  * This runs before React hydrates to prevent theme flash
@@ -162,4 +178,4 @@ declare function getTheme(category: string, themeId: string): Promise<ThemeMetad
  */
 declare function applyThemeSync(): void;
 
-export { Badge, Button, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, type ThemeMetadata$1 as ThemeMetadata, type ThemeSelection, ThemeToggle, type ThemeToggleProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, applyThemeSync, badgeVariants, buttonVariants, getTheme, getThemeCategories, getThemeFilePath, getThemesForCategory, registerTheme, useTheme, useThemeToggle };
+export { Badge, Button, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, type ThemeMetadata$1 as ThemeMetadata, type ThemeSelection, ThemeToggle, type ThemeToggleProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, applyThemeSync, badgeVariants, buttonVariants, enableDebugMode, getCurrentCSSVariables, getTheme, getThemeCategories, getThemeFilePath, getThemesForCategory, registerTheme, useTheme, useThemeToggle };

package/dist/index.js

@@ -524,26 +524,11 @@ var baseThemeCategories = {
         description: "Fast, brisk animations"
       }
     }
-  },
-  custom: {
-    name: "Custom",
-    order: 10,
-    // Highest priority
-    themes: {
-      brand: {
-        name: "Brand",
-        file: "custom/brand.json",
-        icon: "\u{1F3AF}",
-        description: "Brand-specific theme"
-      },
-      minimal: {
-        name: "Minimal",
-        file: "custom/minimal.json",
-        icon: "\u{1F3AA}",
-        description: "Minimal theme"
-      }
-    }
   }
+  // Custom themes are not included in base config
+  // They should be discovered dynamically or registered by users
+  // Users can add custom themes by creating files in /tokens/themes/custom/
+  // and registering them using registerTheme()
 };
 var discoveredThemesCache = null;
 async function discoverThemes() {
@@ -560,7 +545,9 @@ async function discoverThemes() {
     discoveredThemesCache = discovered;
     return discovered;
   } catch (error) {
-    console.warn("Error discovering themes:", error);
+    if (typeof window !== "undefined" && window.__DESIGN_SYSTEM_DEBUG__) {
+      console.warn("Error discovering themes:", error);
+    }
     return baseThemeCategories;
   }
 }
@@ -672,14 +659,23 @@ async function loadTokenFile(path) {
   try {
     const response = await fetch(path);
     if (!response.ok) {
+      if (response.status === 404) {
+        return null;
+      }
       throw new Error(`Failed to load ${path}: ${response.statusText}`);
     }
+    const contentType = response.headers.get("content-type");
+    if (!contentType || !contentType.includes("application/json")) {
+      return null;
+    }
     const data = await response.json();
     tokenCache.set(path, data);
     return deepClone(data);
   } catch (error) {
-    console.error(`Error loading token file ${path}:`, error);
-    throw error;
+    if (typeof window !== "undefined" && window.__DESIGN_SYSTEM_DEBUG__) {
+      console.warn(`Error loading token file ${path}:`, error);
+    }
+    return null;
   }
 }
 function resolveReferences(tokens, palette) {
@@ -694,7 +690,9 @@ function resolveReferences(tokens, palette) {
       if (current && typeof current === "object" && key in current) {
         current = current[key];
       } else {
-        console.warn(`Token reference not found: {${match[1]}}`);
+        if (typeof window !== "undefined" && window.__DESIGN_SYSTEM_DEBUG__) {
+          console.warn(`Token reference not found: {${match[1]}}`);
+        }
         return value;
       }
     }
@@ -779,49 +777,31 @@ function flattenToCSS(tokens, prefix = "", result = {}, isColorContext = false)
 }
 function mapToTailwindVars(cssVars) {
   const mapped = { ...cssVars };
-  if (cssVars["--radius-button"]) {
+  if (cssVars["--radius-button"] && !cssVars["--radius"]) {
     mapped["--radius"] = cssVars["--radius-button"];
   }
-  if (cssVars["--radius-card"]) {
+  if (cssVars["--radius-card"] && !cssVars["--radius-lg"]) {
     mapped["--radius-lg"] = cssVars["--radius-card"];
   }
-  if (cssVars["--font-body"]) {
+  if (cssVars["--font-body"] && !cssVars["--font-sans"]) {
     mapped["--font-sans"] = cssVars["--font-body"];
   }
-  if (cssVars["--spacing-base"]) {
+  if (cssVars["--spacing-base"] && !cssVars["--spacing"]) {
     mapped["--spacing"] = cssVars["--spacing-base"];
-  } else if (cssVars["--spacing-component-md"]) {
+  } else if (cssVars["--spacing-component-md"] && !cssVars["--spacing"]) {
     mapped["--spacing"] = cssVars["--spacing-component-md"];
   }
-  if (cssVars["--spacing-component-xs"]) {
-    mapped["--spacing-component-xs"] = cssVars["--spacing-component-xs"];
-  }
-  if (cssVars["--spacing-component-sm"]) {
-    mapped["--spacing-component-sm"] = cssVars["--spacing-component-sm"];
-  }
-  if (cssVars["--spacing-component-md"]) {
-    mapped["--spacing-component-md"] = cssVars["--spacing-component-md"];
-  }
-  if (cssVars["--spacing-component-lg"]) {
-    mapped["--spacing-component-lg"] = cssVars["--spacing-component-lg"];
-  }
-  if (cssVars["--spacing-component-xl"]) {
-    mapped["--spacing-component-xl"] = cssVars["--spacing-component-xl"];
-  }
-  if (cssVars["--duration-fast"]) {
-    mapped["--duration-fast"] = cssVars["--duration-fast"];
-  }
-  if (cssVars["--duration-normal"]) {
-    mapped["--duration-normal"] = cssVars["--duration-normal"];
-  }
-  if (cssVars["--duration-slow"]) {
-    mapped["--duration-slow"] = cssVars["--duration-slow"];
-  }
   return mapped;
 }
 function generateCSSString(cssVars) {
   const mappedVars = mapToTailwindVars(cssVars);
-  const vars = Object.entries(mappedVars).map(([key, value]) => `  ${key}: ${value};`).join("\n");
+  const vars = Object.entries(mappedVars).sort(([a], [b]) => a.localeCompare(b)).map(([key, value]) => `  ${key}: ${value};`).join("\n");
+  if (typeof window !== "undefined" && window.__DESIGN_SYSTEM_DEBUG__) {
+    console.group("\u{1F3A8} Design System CSS Variables");
+    console.table(mappedVars);
+    console.log("Total variables:", Object.keys(mappedVars).length);
+    console.groupEnd();
+  }
   return `:root {
 ${vars}
 }`;
@@ -835,16 +815,49 @@ function applyThemeCSS(css) {
   }
   styleTag.textContent = css;
 }
+function enableDebugMode() {
+  if (typeof window !== "undefined") {
+    window.__DESIGN_SYSTEM_DEBUG__ = true;
+    console.log("\u{1F50D} Design System debug mode enabled");
+    console.log("CSS variables will be logged when themes change");
+  }
+}
+function getCurrentCSSVariables() {
+  if (typeof window === "undefined") return {};
+  const styleTag = document.getElementById("dynamic-theme");
+  if (!styleTag) return {};
+  const cssText = styleTag.textContent || "";
+  const vars = {};
+  const matches = cssText.matchAll(/--([^:]+):\s*([^;]+);/g);
+  for (const match of matches) {
+    vars[`--${match[1].trim()}`] = match[2].trim();
+  }
+  return vars;
+}
 async function generateAndApplyTheme(selectedThemes = {}) {
   try {
     const themeCategories = await getThemeCategories();
     const validation = validateThemeSelection(selectedThemes, themeCategories);
     if (!validation.valid) {
-      console.error("Invalid theme selection:", validation.errors);
-      throw new Error(`Invalid theme selection: ${validation.errors.join(", ")}`);
+      const nonCustomErrors = validation.errors.filter((err) => !err.includes("custom"));
+      if (nonCustomErrors.length > 0) {
+        if (typeof window !== "undefined" && window.__DESIGN_SYSTEM_DEBUG__) {
+          console.error("Invalid theme selection:", nonCustomErrors);
+        }
+        throw new Error(`Invalid theme selection: ${nonCustomErrors.join(", ")}`);
+      }
+      if (typeof window !== "undefined" && window.__DESIGN_SYSTEM_DEBUG__) {
+        console.warn("Custom theme files not found, continuing without them:", validation.errors);
+      }
     }
     const base = await loadTokenFile("/tokens/base.json");
+    if (!base) {
+      throw new Error("Failed to load base tokens from /tokens/base.json");
+    }
     const palettes = await loadTokenFile("/tokens/palettes.json");
+    if (!palettes || !palettes.palette) {
+      throw new Error("Failed to load palette from /tokens/palettes.json");
+    }
     const palette = palettes.palette;
     let merged = deepMerge(base, { palette });
     const categoryOrder = Object.values(themeCategories).sort((a, b) => a.order - b.order).map((cat) => cat.name.toLowerCase());
@@ -854,18 +867,30 @@ async function generateAndApplyTheme(selectedThemes = {}) {
       if (!themeId) continue;
       const themePath = `/tokens/themes/${category}/${themeId}.json`;
       const themeData = await loadTokenFile(themePath);
-      merged = deepMerge(merged, themeData);
+      if (themeData) {
+        merged = deepMerge(merged, themeData);
+      } else if (typeof window !== "undefined" && window.__DESIGN_SYSTEM_DEBUG__) {
+        console.warn(`Theme file not found: ${themePath}`);
+      }
     }
     if (selectedThemes.custom) {
       const customPath = `/tokens/themes/custom/${selectedThemes.custom}.json`;
       const customData = await loadTokenFile(customPath);
-      merged = deepMerge(merged, customData);
+      if (customData) {
+        merged = deepMerge(merged, customData);
+      } else if (typeof window !== "undefined" && window.__DESIGN_SYSTEM_DEBUG__) {
+        console.warn(`Custom theme file not found: ${customPath} (this is normal if you haven't created it yet)`);
+      }
     }
     const resolved = resolveReferences(merged, palette);
     const cssVars = flattenToCSS(resolved);
     const css = generateCSSString(cssVars);
     if (typeof document !== "undefined") {
       applyThemeCSS(css);
+      if (window.__DESIGN_SYSTEM_DEBUG__) {
+        window.__DESIGN_SYSTEM_VARS__ = cssVars;
+        console.log("\u{1F4A1} Access CSS variables via: window.__DESIGN_SYSTEM_VARS__");
+      }
     }
     return {
       success: true,
@@ -873,7 +898,9 @@ async function generateAndApplyTheme(selectedThemes = {}) {
       cssVars
     };
   } catch (error) {
-    console.error("Error generating theme:", error);
+    if (typeof window !== "undefined" && window.__DESIGN_SYSTEM_DEBUG__) {
+      console.error("Error generating theme:", error);
+    }
     throw error;
   }
 }
@@ -895,7 +922,9 @@ function useTheme() {
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : "Failed to apply theme";
       setError(errorMessage);
-      console.error("Theme application error:", err);
+      if (typeof window !== "undefined" && window.__DESIGN_SYSTEM_DEBUG__) {
+        console.error("Theme application error:", err);
+      }
     } finally {
       setIsLoading(false);
     }
@@ -1303,28 +1332,25 @@ function applyThemeSync() {
   }
   try {
     const base = loadJSONSync("/tokens/base.json");
+    if (!base) {
+      return;
+    }
     const palettes = loadJSONSync("/tokens/palettes.json");
     const palette = palettes?.palette || {};
-    let merged = deepMergeSync(base || {}, { palette });
+    let merged = deepMergeSync(base, { palette });
     const categoryOrder = ["color", "typography", "shape", "density", "animation"];
     for (const category of categoryOrder) {
       const themeId = selectedThemes[category];
       if (!themeId) continue;
-      try {
-        const themeData = loadJSONSync(`/tokens/themes/${category}/${themeId}.json`);
-        if (themeData) {
-          merged = deepMergeSync(merged, themeData);
-        }
-      } catch {
+      const themeData = loadJSONSync(`/tokens/themes/${category}/${themeId}.json`);
+      if (themeData) {
+        merged = deepMergeSync(merged, themeData);
       }
     }
     if (selectedThemes.custom) {
-      try {
-        const customData = loadJSONSync(`/tokens/themes/custom/${selectedThemes.custom}.json`);
-        if (customData) {
-          merged = deepMergeSync(merged, customData);
-        }
-      } catch {
+      const customData = loadJSONSync(`/tokens/themes/custom/${selectedThemes.custom}.json`);
+      if (customData) {
+        merged = deepMergeSync(merged, customData);
       }
     }
     const resolved = resolveReferencesSync(merged, palette);
@@ -1341,7 +1367,9 @@ ${Object.entries(mappedVars).map(([key, value]) => `  ${key}: ${value};`).join("
     }
     styleTag.textContent = css;
   } catch (error) {
-    console.warn("Sync theme application failed, will apply via React:", error);
+    if (typeof window !== "undefined" && window.__DESIGN_SYSTEM_DEBUG__) {
+      console.warn("Sync theme application failed, will apply via React:", error);
+    }
   }
 }
 function loadJSONSync(path) {
@@ -1349,8 +1377,15 @@ function loadJSONSync(path) {
     const xhr = new XMLHttpRequest();
     xhr.open("GET", path, false);
     xhr.send(null);
+    if (xhr.status === 404) {
+      return null;
+    }
     if (xhr.status === 200 || xhr.status === 0) {
-      return JSON.parse(xhr.responseText);
+      const contentType = xhr.getResponseHeader("content-type");
+      if (contentType && contentType.includes("application/json")) {
+        return JSON.parse(xhr.responseText);
+      }
+      return null;
     }
   } catch {
   }
@@ -1472,44 +1507,20 @@ function flattenToCSSSync(tokens, prefix = "", result = {}, isColorContext = fal
 }
 function mapToTailwindVarsSync(cssVars) {
   const mapped = { ...cssVars };
-  if (cssVars["--radius-button"]) {
+  if (cssVars["--radius-button"] && !cssVars["--radius"]) {
     mapped["--radius"] = cssVars["--radius-button"];
   }
-  if (cssVars["--radius-card"]) {
+  if (cssVars["--radius-card"] && !cssVars["--radius-lg"]) {
     mapped["--radius-lg"] = cssVars["--radius-card"];
   }
-  if (cssVars["--font-body"]) {
+  if (cssVars["--font-body"] && !cssVars["--font-sans"]) {
     mapped["--font-sans"] = cssVars["--font-body"];
   }
-  if (cssVars["--spacing-base"]) {
+  if (cssVars["--spacing-base"] && !cssVars["--spacing"]) {
     mapped["--spacing"] = cssVars["--spacing-base"];
-  } else if (cssVars["--spacing-component-md"]) {
+  } else if (cssVars["--spacing-component-md"] && !cssVars["--spacing"]) {
     mapped["--spacing"] = cssVars["--spacing-component-md"];
   }
-  if (cssVars["--spacing-component-xs"]) {
-    mapped["--spacing-component-xs"] = cssVars["--spacing-component-xs"];
-  }
-  if (cssVars["--spacing-component-sm"]) {
-    mapped["--spacing-component-sm"] = cssVars["--spacing-component-sm"];
-  }
-  if (cssVars["--spacing-component-md"]) {
-    mapped["--spacing-component-md"] = cssVars["--spacing-component-md"];
-  }
-  if (cssVars["--spacing-component-lg"]) {
-    mapped["--spacing-component-lg"] = cssVars["--spacing-component-lg"];
-  }
-  if (cssVars["--spacing-component-xl"]) {
-    mapped["--spacing-component-xl"] = cssVars["--spacing-component-xl"];
-  }
-  if (cssVars["--duration-fast"]) {
-    mapped["--duration-fast"] = cssVars["--duration-fast"];
-  }
-  if (cssVars["--duration-normal"]) {
-    mapped["--duration-normal"] = cssVars["--duration-normal"];
-  }
-  if (cssVars["--duration-slow"]) {
-    mapped["--duration-slow"] = cssVars["--duration-slow"];
-  }
   return mapped;
 }
 
@@ -1543,6 +1554,8 @@ exports.TooltipTrigger = TooltipTrigger;
 exports.applyThemeSync = applyThemeSync;
 exports.badgeVariants = badgeVariants;
 exports.buttonVariants = buttonVariants;
+exports.enableDebugMode = enableDebugMode;
+exports.getCurrentCSSVariables = getCurrentCSSVariables;
 exports.getTheme = getTheme;
 exports.getThemeCategories = getThemeCategories;
 exports.getThemeFilePath = getThemeFilePath;