@pure-ds/storybook 0.1.6 → 0.1.8

package/.storybook/preview.js

@@ -42,6 +42,7 @@ console.log('🎨 Starting PDS initialization with preset:', initialPreset);
 
 // Wrap top-level await in IIFE for production build compatibility
 (async () => {
+  window.__pdsInitializing = true;
   const pdsOptions = {
     mode: 'live',
     preset: initialPreset,
@@ -69,6 +70,7 @@ console.log('🎨 Starting PDS initialization with preset:', initialPreset);
   }
 
   await PDS.start(pdsOptions);
+  window.__pdsInitializing = false;
 
   console.log('✨ PDS initialized in live mode for Storybook');
   console.log('📦 AutoDefiner active at:', PDS.autoDefiner?.config?.baseURL);
@@ -112,7 +114,7 @@ const withPDS = (story, context) => {
     // Check again after applying
     const afterSheets = document.adoptedStyleSheets || [];
     const afterPdsSheets = afterSheets.filter(s => s._pds === true);
-  } else {
+  } else if (!window.__pdsInitializing) {
     console.warn('⚠️ No designer found!');
   }
   
@@ -358,41 +360,6 @@ const expandSemanticTags = (input) => {
   return expanded;
 };
 
-const getStoryStore = () => {
-  if (typeof window === 'undefined') return null;
-  return window.__STORYBOOK_STORY_STORE__ || null;
-};
-
-const collectStoryIndexTags = (storyId) => {
-  if (!storyId) return undefined;
-  const storyStore = getStoryStore();
-  const index = storyStore?.storyIndex;
-  if (!index) return undefined;
-
-  const entries = index.entries || index;
-  const entry = entries?.[storyId];
-  return entry?.tags;
-};
-
-const collectStoryStoreEntryTags = (storyId) => {
-  const storyStore = getStoryStore();
-  if (!storyStore?.fromId || !storyId) return undefined;
-
-  try {
-    const entry = storyStore.fromId(storyId);
-    if (!entry) return undefined;
-
-    return mergeTagSets(
-      entry.meta?.tags,
-      entry.parameters?.tags,
-      entry.moduleExport?.default?.tags,
-      entry.moduleExport?.tags
-    );
-  } catch {
-    return undefined;
-  }
-};
-
 const ensureRelatedStyles = (() => {
   let injected = false;
   return () => {
@@ -964,27 +931,14 @@ const getContextTags = (context) => {
     context.moduleExport?.parameters?.pds?.tags,
     context.moduleExport?.pds?.tags,
     context.parameters?.pdsTags,
-    context.moduleExport?.tags,
-    collectStoryIndexTags(storyId),
-    collectStoryStoreEntryTags(storyId)
+    context.moduleExport?.tags
   );
 
   if (initial.size > 0) {
     return expandSemanticTags(initial);
   }
 
-  const fallback = new Set();
-  const clientApi = typeof window !== 'undefined' ? window.__STORYBOOK_CLIENT_API__ : null;
-  if (!clientApi?.raw) return fallback;
-
-  clientApi
-    .raw()
-    .filter((story) => story?.title === context.title)
-    .forEach((story) => {
-      getStoryTags(story).forEach((tag) => fallback.add(tag));
-    });
-
-  return expandSemanticTags(fallback);
+  return expandSemanticTags(new Set());
 };
 
 const getStoryTags = (story) => {
@@ -999,24 +953,13 @@ const getStoryTags = (story) => {
     story.moduleExport?.pds?.tags,
     story.parameters?.pdsTags,
     story.moduleExport?.default?.tags,
-    story.moduleExport?.tags,
-    collectStoryIndexTags(story.id),
-    collectStoryStoreEntryTags(story.id)
+    story.moduleExport?.tags
   );
 
   if (collected.size > 0) {
     return expandSemanticTags(collected);
   }
 
-  const storyStore = getStoryStore();
-  const storyIndex = storyStore?.storyIndex;
-  if (storyIndex?.entries) {
-    const entry = storyIndex.entries[story.id];
-    if (entry?.tags) {
-      return expandSemanticTags(mergeTagSets(entry.tags));
-    }
-  }
-
   return expandSemanticTags(collected);
 };
 
@@ -1029,37 +972,6 @@ const getAllStoriesForRelated = () => {
     return stories;
   }
 
-  const storyStore = getStoryStore();
-  const indexEntries = storyStore?.storyIndex?.entries;
-  if (!indexEntries) return stories;
-
-  Object.entries(indexEntries).forEach(([storyId, entry]) => {
-    if (!entry || entry.type !== 'story') return;
-
-    let storeEntry;
-    if (storyStore?.fromId) {
-      try {
-        storeEntry = storyStore.fromId(storyId);
-      } catch {}
-    }
-
-    const parameters = storeEntry?.parameters || storeEntry?.story?.parameters || entry.parameters || {};
-    const meta = storeEntry?.meta || { title: entry.title };
-    const moduleExport = storeEntry?.moduleExport;
-    const tags = mergeTagSets(entry.tags, storeEntry?.tags);
-
-    stories.push({
-      id: storyId,
-      title: storeEntry?.story?.title || entry.title,
-      name: entry.name,
-      importPath: entry.importPath,
-      parameters,
-      meta,
-      moduleExport,
-      tags
-    });
-  });
-
   return stories;
 };
 

package/dist/pds-reference.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2025-12-16T13:36:16.421Z",
+  "generatedAt": "2025-12-16T13:39:44.048Z",
   "sources": {
     "customElements": "custom-elements.json",
     "ontology": "src\\js\\pds-core\\pds-ontology.js",

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "@pure-ds/storybook",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Storybook showcase for Pure Design System with live configuration",
   "type": "module",
   "private": false,
   "bin": {
     "pds-storybook": "./bin/index.js"
+  },
+   "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
   },
   "files": [
     "bin",
@@ -24,11 +28,11 @@
     "package-build": "node scripts/package-build.js",
     "storybook": "npm run build-reference && storybook dev -p 6006",
     "build-storybook": "npm run build-reference && storybook build --output-dir storybook-static",
-    "storybook:dev": "npm run generate-stories && npm run storybook",
-    "storybook:build": "npm run generate-stories && npm run build-storybook"
+    "storybook:dev": "npm run storybook",
+    "storybook:build": "npm run build-storybook"
   },
   "peerDependencies": {
-    "@pure-ds/core": "^0.3.0"
+    "@pure-ds/core": "^0.3.1"
   },
   "dependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",

package/scripts/package-build.js

@@ -44,10 +44,8 @@ console.log('Copying custom-elements.json...');
 cpSync(join(monorepoRoot, 'custom-elements.json'), join(packageRoot, 'custom-elements.json'));
 
 // 3. Run Generation Scripts
-console.log('Generating stories...');
-// We run the scripts. They will generate stories into `stories/`.
-// These scripts use `../../../src` to READ data. That is fine as long as we are in the monorepo during build.
-execSync('node scripts/generate-stories.js', { cwd: packageRoot, stdio: 'inherit' });
+// console.log('Generating stories...');
+// execSync('node scripts/generate-stories.js', { cwd: packageRoot, stdio: 'inherit' });
 
 console.log('Building reference...');
 execSync('node scripts/build-pds-reference.mjs', { cwd: packageRoot, stdio: 'inherit' });

package/stories/GettingStarted.md

@@ -1,96 +1,96 @@
-# Getting Started with PDS Storybook
-
-Welcome to the **Pure Design System** Storybook! This is a comprehensive showcase of the configuration-driven design system that generates complete design systems from JavaScript configuration.
-
-## 🎨 What You're Looking At
-
-This Storybook instance demonstrates:
-
-- **Live Configuration** - Use the PDS Configurator button in the toolbar to change the design in real-time
-- **Multiple Presets** - Switch between design presets using the toolbar
-- **Theme Switching** - Toggle between light and dark themes
-- **Quick Search** - Use the search icon to query tokens and components
-
-## 🚀 Quick Start
-
-### 1. Try the Configurator
-
-Click the **PDS Configurator** button in the toolbar (circle icon) to open the configuration panel at the bottom of the screen. From there you can:
-
-- Change colors, typography, spacing
-- Toggle effects like liquid glass
-- Export your configuration
-- See changes applied instantly across all stories
-
-### 2. Browse Stories
-
-Stories are organized by best practices:
-
-- **Foundations** - Design tokens (colors, typography, spacing, icons)
-- **Primitives** - Basic UI elements (buttons, forms, cards, badges)
-- **Components** - Web Components (pds-icon, pds-drawer, pds-tabstrip, etc.)
-- **Patterns** - Layout patterns and utilities
-- **Enhancements** - Progressive enhancements for semantic HTML
-
-### 3. Use Quick Search
-
-Click the search icon in the toolbar to query the design system:
-
-- "what is the focus border color on inputs?"
-- "button hover color"
-- "how do I create a card?"
-
-## 📚 Story Features
-
-Each story includes:
-
-- **Interactive controls** - Use the Controls panel to customize
-- **Preset selection** - Try different design presets
-- **Color overrides** - Override primary/secondary colors per story
-- **Live updates** - Changes apply immediately
-
-## 🎯 Key Features
-
-### Configuration-Driven
-
-```javascript
-await PDS.start({
-  design: {
-    colors: { primary: '#007acc', secondary: '#5c2d91' },
-    typography: { baseFontSize: 16, fontScale: 1.25 },
-    spatialRhythm: { baseUnit: 8, scaleRatio: 1.5 }
-  }
-});
-```
-
-### Live Mode
-
-This Storybook runs PDS in **live mode**, meaning:
-- Styles are generated at runtime
-- Configuration changes apply instantly
-- Full access to `PDS.compiled` object model
-- Automatic font loading from Google Fonts
-
-### Framework Agnostic
-
-While this Storybook uses Vite + Web Components, PDS works with:
-- Vanilla JavaScript
-- Lit
-- React
-- Vue
-- Svelte
-- Next.js
-
-## 🔗 Resources
-
-- [GitHub](https://github.com/mvneerven/pure-ds)
-- [NPM Package](https://www.npmjs.com/package/@pure-ds/core)
-- [Documentation](https://puredesignsystem.z6.web.core.windows.net/)
-
-## 💡 Tips
-
-1. **Start with Foundations** - Understand the token system first
-2. **Experiment with Presets** - See how different designs look
-3. **Open the Configurator** - Try changing values live
-4. **Use Quick Search** - Find tokens and components quickly
-5. **Check Controls** - Each story has customizable parameters
+# Getting Started with PDS Storybook
+
+Welcome to the **Pure Design System** Storybook! This is a comprehensive showcase of the configuration-driven design system that generates complete design systems from JavaScript configuration.
+
+## 🎨 What You're Looking At
+
+This Storybook instance demonstrates:
+
+- **Live Configuration** - Use the PDS Configurator button in the toolbar to change the design in real-time
+- **Multiple Presets** - Switch between design presets using the toolbar
+- **Theme Switching** - Toggle between light and dark themes
+- **Quick Search** - Use the search icon to query tokens and components
+
+## 🚀 Quick Start
+
+### 1. Try the Configurator
+
+Click the **PDS Configurator** button in the toolbar (circle icon) to open the configuration panel at the bottom of the screen. From there you can:
+
+- Change colors, typography, spacing
+- Toggle effects like liquid glass
+- Export your configuration
+- See changes applied instantly across all stories
+
+### 2. Browse Stories
+
+Stories are organized by best practices:
+
+- **Foundations** - Design tokens (colors, typography, spacing, icons)
+- **Primitives** - Basic UI elements (buttons, forms, cards, badges)
+- **Components** - Web Components (pds-icon, pds-drawer, pds-tabstrip, etc.)
+- **Patterns** - Layout patterns and utilities
+- **Enhancements** - Progressive enhancements for semantic HTML
+
+### 3. Use Quick Search
+
+Click the search icon in the toolbar to query the design system:
+
+- "what is the focus border color on inputs?"
+- "button hover color"
+- "how do I create a card?"
+
+## 📚 Story Features
+
+Each story includes:
+
+- **Interactive controls** - Use the Controls panel to customize
+- **Preset selection** - Try different design presets
+- **Color overrides** - Override primary/secondary colors per story
+- **Live updates** - Changes apply immediately
+
+## 🎯 Key Features
+
+### Configuration-Driven
+
+```javascript
+await PDS.start({
+  design: {
+    colors: { primary: '#007acc', secondary: '#5c2d91' },
+    typography: { baseFontSize: 16, fontScale: 1.25 },
+    spatialRhythm: { baseUnit: 8, scaleRatio: 1.5 }
+  }
+});
+```
+
+### Live Mode
+
+This Storybook runs PDS in **live mode**, meaning:
+- Styles are generated at runtime
+- Configuration changes apply instantly
+- Full access to `PDS.compiled` object model
+- Automatic font loading from Google Fonts
+
+### Framework Agnostic
+
+While this Storybook uses Vite + Web Components, PDS works with:
+- Vanilla JavaScript
+- Lit
+- React
+- Vue
+- Svelte
+- Next.js
+
+## 🔗 Resources
+
+- [GitHub](https://github.com/mvneerven/pure-ds)
+- [NPM Package](https://www.npmjs.com/package/pure-ds)
+- [Documentation](https://puredesignsystem.z6.web.core.windows.net/)
+
+## 💡 Tips
+
+1. **Start with Foundations** - Understand the token system first
+2. **Experiment with Presets** - See how different designs look
+3. **Open the Configurator** - Try changing values live
+4. **Use Quick Search** - Find tokens and components quickly
+5. **Check Controls** - Each story has customizable parameters