@pure-ds/storybook 0.1.11 → 0.1.13

package/.storybook/addons/pds-configurator/preview.js

@@ -85,7 +85,7 @@ async function loadConfigForm() {
           // The event detail contains both config and designer from pds-config-form
           if (e.detail.designer) {
             // Apply the styles from the designer that was already created by pds-config-form
-            await PDS.Generator.applyStyles(e.detail.designer);
+            await PDS.Generator.applyStyles();
           }
           
           // Notify manager

package/.storybook/preview.js

@@ -87,7 +87,7 @@ function ensurePDSStyles() {
   
   if (!hasPDS && PDS.Generator.instance) {
     console.log('🛡️ PDS sheets missing - restoring...');
-    PDS.Generator.applyStyles(PDS.Generator.instance);
+    PDS.Generator.applyStyles();
   }
 }
 
@@ -108,7 +108,7 @@ const withPDS = (story, context) => {
   // ALWAYS reapply PDS styles before each story render
   const designer = PDS.Generator.instance;
   if (designer) {
-    PDS.Generator.applyStyles(designer);
+    PDS.Generator.applyStyles();
     
     // Check again after applying
     const afterSheets = document.adoptedStyleSheets || [];
@@ -264,7 +264,7 @@ const withGlobalsHandler = (story, context) => {
           if (PDS.theme) generatorOptions.theme = PDS.theme;
           
           const newDesigner = new PDS.Generator(generatorOptions);
-          await PDS.Generator.applyStyles(newDesigner);
+          await PDS.Generator.applyStyles();
           
           console.log(`✅ Preset applied via decorator: ${globals.preset}`);
         }
@@ -1446,7 +1446,7 @@ if (typeof window !== 'undefined') {
             console.log('✅ Generator created');
             
             console.log('🎨 Applying styles to document...');
-            await PDS.Generator.applyStyles(newDesigner);
+            await PDS.Generator.applyStyles();
             console.log('✅ Styles applied to document');
             
             // Update global reference

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pure-ds/storybook",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "Storybook showcase for Pure Design System with live configuration",
   "type": "module",
   "private": false,

package/src/js/pds-core/pds-generator.js

@@ -1,8 +1,17 @@
+import { registry as pdsRegistry } from "./pds-registry.js";
+
 /**
  * Generator - A JS-config-first design system
  * Generates comprehensive CSS variables and styles from a minimal configuration
  */
 export class Generator {
+  // Singleton instance
+  static #instance;
+
+  static get instance() {
+    return this.#instance;
+  }
+
   // Private internal fields
   #layers;
   #stylesheets;
@@ -22,6 +31,10 @@ export class Generator {
     if (this.options.debug) {
       this.options.log?.("debug", "Generator options:", this.options);
     }
+
+    // Set singleton instance
+    Generator.#instance = this;
+
     this.tokens = this.generateTokens();
     if (this.options.debug) {
       this.options.log?.("debug", "Generated tokens:", this.tokens);
@@ -5113,23 +5126,23 @@ export const ${name}CSS = \`${escapedCSS}\`;
   /**
    * Static method to apply styles to document
    * Creates a link element with BLOB URL
-   * @param {Generator} generator - The Generator instance with generated styles
+   * @param {Generator} [generator] - Optional Generator instance (defaults to singleton)
    */
   static applyStyles(generator) {
+    // Use provided generator or singleton instance
+    const target = generator || Generator.instance;
+
     // Validate parameter
-    if (!generator || typeof generator !== "object") {
-      generator?.options?.log?.(
-        "error",
-        "[Generator] applyStyles requires a generator object"
-      );
+    if (!target || typeof target !== "object") {
+      console.error("[Generator] applyStyles requires a generator object or active singleton");
       return;
     }
 
     // Preferred: apply layered CSS so tokens + primitives + components + utilities
     // are available in light DOM (ensures primitives like :where(button):active apply)
-    const cssText = generator.layeredCSS || generator.css || "";
+    const cssText = target.layeredCSS || target.css || "";
     if (!cssText) {
-      generator?.options?.log?.(
+      target.options?.log?.(
         "warn",
         "[Generator] No CSS available on designer to apply"
       );
@@ -5266,7 +5279,25 @@ export async function adoptLayers(
   try {
     // Get all requested stylesheets
     const stylesheets = await Promise.all(
-      layers.map((layer) => PDS.registry.getStylesheet(layer))
+      layers.map(async (layer) => {
+        // In live mode, get stylesheets directly from the Generator singleton
+        if (Generator.instance) {
+          switch (layer) {
+            case "tokens":
+              return Generator.instance.tokensStylesheet;
+            case "primitives":
+              return Generator.instance.primitivesStylesheet;
+            case "components":
+              return Generator.instance.componentsStylesheet;
+            case "utilities":
+              return Generator.instance.utilitiesStylesheet;
+            default:
+              // Fall through to registry for unknown layers or static fallback
+              break;
+          }
+        }
+        return pdsRegistry.getStylesheet(layer);
+      })
     );
 
     // Filter out any null results
@@ -5311,7 +5342,7 @@ export function createStylesheet(css) {
  * @returns {boolean}
  */
 export function isLiveMode() {
-  return window.PDS?.registry?.isLive;
+  return pdsRegistry.isLive;
 }
 import { enums } from "./pds-enums.js";
 import { ontology } from "./pds-ontology.js";

package/src/js/pds-core/pds-registry.js

@@ -6,7 +6,6 @@
 class PDSRegistry {
   constructor() {
     this._mode = "static"; // Default to static mode
-    this._designer = null;
     this._staticPaths = {
       tokens: "/assets/pds/styles/pds-tokens.css.js",
       primitives: "/assets/pds/styles/pds-primitives.css.js",
@@ -17,17 +16,10 @@ class PDSRegistry {
   }
 
   /**
-   * Set the designer instance and switch to live mode
+   * Switch to live mode
    */
-  setDesigner(designer, meta = {}) {
-    this._designer = designer;
+  setLiveMode() {
     this._mode = "live";
-    const presetName = meta?.presetName;
-    if (presetName) {
-      designer?.options?.log?.("log", `PDS live with preset "${presetName}"`);
-    } else {
-      designer?.options?.log?.("log", "PDS live with custom config");
-    }
   }
 
   /**
@@ -46,21 +38,10 @@ class PDSRegistry {
    * Returns CSSStyleSheet object (constructable stylesheet)
    */
   async getStylesheet(layer) {
-    if (this._mode === "live" && this._designer) {
-      // Return constructable stylesheet from live designer
-      switch (layer) {
-        case "tokens":
-          return this._designer.tokensStylesheet;
-        case "primitives":
-          return this._designer.primitivesStylesheet;
-        case "components":
-          return this._designer.componentsStylesheet;
-        case "utilities":
-          return this._designer.utilitiesStylesheet;
-        default:
-          this._designer?.options?.log?.("warn", `[PDS Registry] Unknown layer: ${layer}`);
-          return null;
-      }
+    if (this._mode === "live") {
+      // In live mode, stylesheets should be retrieved from Generator.instance
+      // If we are here, it means adoptLayers fell back or something is wrong
+      return null;
     } else {
       // Import from static path
       try {
@@ -90,14 +71,7 @@ class PDSRegistry {
    * Check if in live mode
    */
   get isLive() {
-    return this._mode === "live" && this._designer !== null;
-  }
-
-  /**
-   * Check if designer is available
-   */
-  get hasDesigner() {
-    return this._designer !== null;
+    return this._mode === "live";
   }
 }
 

package/src/js/pds.js

@@ -40,6 +40,10 @@ class PDSBase extends EventTarget {}
 /** @type {PDSAPI & PDSBase} */
 const PDS = new PDSBase();
 
+// State properties
+PDS.initializing = false;
+PDS.currentPreset = null;
+
 import {
   Generator,
   adoptLayers,
@@ -64,7 +68,7 @@ import { loadTypographyFonts } from "./common/font-loader.js";
 /** Generator class — use to programmatically create design system assets from a config */
 PDS.Generator = Generator;
 
-/** Singleton runtime registry. Use `registry.setDesigner()` to enable live mode or `registry.setStaticMode()` for static assets */
+/** Singleton runtime registry. Use `registry.setLiveMode()` to enable live mode or `registry.setStaticMode()` for static assets */
 PDS.registry = registry;
 
 /** Ontology and metadata about components and tokens */
@@ -163,8 +167,8 @@ Object.defineProperty(PDS, "currentConfig", {
 Object.defineProperty(PDS, "compiled", {
   get() {
     // Only available in live mode when we have a generator
-    if (PDS.registry?.isLive && PDS.registry?._designer) {
-      return PDS.registry._designer.compiled;
+    if (PDS.registry?.isLive && Generator.instance) {
+      return Generator.instance.compiled;
     }
     return null;
   },
@@ -1150,14 +1154,19 @@ async function live(config) {
       }
     }
 
-    // Set the registry to use this designer
-    PDS.registry.setDesigner(generator, {
-      presetName: normalized.presetInfo?.name,
-    });
+    // Set the registry to live mode
+    PDS.registry.setLiveMode();
+
+    // Log preset info if available
+    if (normalized.presetInfo?.name) {
+      generatorConfig?.log?.("log", `PDS live with preset "${normalized.presetInfo.name}"`);
+    } else {
+      generatorConfig?.log?.("log", "PDS live with custom config");
+    }
 
     // Apply styles globally if requested (default behavior)
     if (applyGlobalStyles) {
-      await PDS.Generator.applyStyles(generator);
+      await PDS.Generator.applyStyles();
 
       // Clean up critical styles after adoptedStyleSheets are applied
       if (typeof window !== "undefined") {
@@ -1459,19 +1468,19 @@ async function setTheme(theme, options = {}) {
   }
 
   // If we're in live mode, regenerate styles with new theme
-  if (PDS.registry.isLive && PDS.registry.hasDesigner) {
+  if (PDS.registry.isLive && Generator.instance) {
     try {
-      const currentDesigner = PDS.registry._designer; // Access internal designer
-      if (currentDesigner && currentDesigner.configure) {
-        // Update the designer's config with new theme
-        const newConfig = { ...currentDesigner.config, theme: resolvedTheme };
-        currentDesigner.configure(newConfig);
+      const currentGenerator = Generator.instance;
+      if (currentGenerator && currentGenerator.configure) {
+        // Update the generator's config with new theme
+        const newConfig = { ...currentGenerator.config, theme: resolvedTheme };
+        currentGenerator.configure(newConfig);
 
         // Reapply styles
-        await PDS.Generator.applyStyles(currentDesigner);
+        await PDS.Generator.applyStyles();
       }
     } catch (error) {
-      currentDesigner?.options?.log?.("warn", "Failed to update styles for new theme:", error);
+      console.warn("Failed to update styles for new theme:", error);
     }
   }