@pure-ds/storybook 0.1.5 → 0.1.7

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

@@ -77,7 +77,7 @@ async function loadConfigForm() {
       configFormLoaded = true;
 
       // Listen for design updates from the form
-      const PDS = (await import('../../../../../src/js/pds.js')).PDS;
+      const PDS = (await import('@pds-src/js/pds.js')).PDS;
       PDS.addEventListener('pds:design:updated', async (e) => {
         console.log('Design updated in configurator:', e.detail);
         
@@ -135,7 +135,7 @@ if (typeof window !== 'undefined') {
 
   channel.on(EVENTS.QUERY_EXECUTED, async ({ query }) => {
     try {
-      const PDS = (await import('../../../../../src/js/pds.js')).PDS;
+      const PDS = (await import('@pds-src/js/pds.js')).PDS;
       const results = await PDS.query(query);
       
       // Send results back to manager

package/dist/pds-reference.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pure-ds/storybook",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Storybook showcase for Pure Design System with live configuration",
   "type": "module",
   "private": false,
@@ -24,8 +24,8 @@
     "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"

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