@pure-ds/storybook 0.4.12 → 0.4.13

package/.storybook/docs.css

@@ -17,19 +17,19 @@
   display: none !important;
 }
 
-/* Show only the description block */
+/* Docs pages use Storybook defaults - no PDS tokens */
 .sbdocs-wrapper {
-  background: var(--surface-bg);
-  color: var(--color-text-primary);
+  background: #ffffff;
+  color: #333333;
 }
 
 .sbdocs .sbdocs-title,
 .sbdocs .sbdocs-subtitle {
-  color: var(--color-text-primary);
+  color: #333333;
 }
 
 .sbdocs-description,
 .sbdocs .sbdocs-p {
-  color: var(--color-text-secondary);
+  color: #666666;
   line-height: 1.6;
 }

package/.storybook/manager.js

@@ -3,6 +3,7 @@
 // Uses experimental_setFilter API to enrich search with PDS ontology concepts
 // ALL DATA IS LOADED FROM pds-reference.json (Single Source of Truth from pds-ontology.js)
 import { addons } from '@storybook/manager-api';
+import { STORY_CHANGED } from '@storybook/core-events';
 
 const ADDON_ID = 'pds-ontology-filter';
 const FILTER_ID = 'pds-ontology';
@@ -548,4 +549,30 @@ addons.register(ADDON_ID, (api) => {
     tags: () => Object.fromEntries([...tagIndex].map(([k, v]) => [k, [...v]])),
     currentQuery: () => currentQuery
   };
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // AUTO-SELECT CODE PANEL FOR ENHANCEMENT STORIES
+  // Switch to the "Code" panel when navigating to Enhancement stories
+  // ═══════════════════════════════════════════════════════════════════════════
+  const CODE_PANEL_ID = 'html-preview/panel';
+  
+  // Listen for story changes and auto-switch panel based on story parameters
+  api.on(STORY_CHANGED, (storyId) => {
+    if (!storyId) return;
+    
+    // Get the story data to check its parameters
+    const story = api.getData(storyId);
+    if (!story) return;
+    
+    // Check if this is an Enhancement story (by title path)
+    const isEnhancement = story.title?.startsWith('Enhancements/');
+    
+    // Also check parameters.options.selectedPanel
+    const selectedPanel = story.parameters?.options?.selectedPanel;
+    
+    if (isEnhancement || selectedPanel === CODE_PANEL_ID) {
+      // Switch to Code panel
+      api.setSelectedPanel(CODE_PANEL_ID);
+    }
+  });
 });

package/.storybook/preview.js

@@ -40,9 +40,23 @@ const getInitialPreset = () => {
 const initialPreset = getInitialPreset();
 console.log('🎨 Starting PDS initialization with preset:', initialPreset);
 
+// Helper to detect docs pages - used to prevent PDS from interfering
+function isDocsPage() {
+  try {
+    return window.location.search.includes('/docs/') || 
+           window.location.search.includes('viewMode=docs') ||
+           window.parent?.location?.search?.includes('/docs/');
+  } catch {
+    return false;
+  }
+}
+
 // Wrap top-level await in IIFE for production build compatibility
 (async () => {
   PDS.initializing = true;
+  
+  // NEVER apply global styles on init - only apply in story decorator
+  // This prevents PDS from affecting docs pages
   const pdsOptions = {
     mode: 'live',
     preset: initialPreset,
@@ -53,8 +67,8 @@ console.log('🎨 Starting PDS initialization with preset:', initialPreset);
       observeShadows: true,
       patchAttachShadow: true
     },
-    applyGlobalStyles: true,
-    manageTheme: true
+    applyGlobalStyles: false, // Never apply on init - decorator handles this
+    manageTheme: false // Never manage on init - decorator handles this
   };
 
   // Merge user config
@@ -79,25 +93,28 @@ console.log('🎨 Starting PDS initialization with preset:', initialPreset);
   PDS.currentPreset = initialPreset;
 })();
 
-// Set up persistent style protection - monitor and restore PDS sheets if cleared
-let protectionActive = false;
-function ensurePDSStyles() {
-  const sheets = document.adoptedStyleSheets || [];
-  const hasPDS = sheets.some(s => s._pds === true);
-  
-  if (!hasPDS && PDS.Generator.instance) {
-    console.log('🛡️ PDS sheets missing - restoring...');
-    PDS.Generator.applyStyles();
-  }
-}
-
-// Check periodically
-setInterval(ensurePDSStyles, 100);
+// Style protection disabled - decorator controls when PDS styles are applied
+// This prevents PDS from affecting docs pages
 
 /**
  * Global decorator to ensure Shadow DOM components get PDS styles and run enhancers
  */
+// Track current view mode globally for other code to check
+let currentViewMode = 'story';
+
 const withPDS = (story, context) => {
+  currentViewMode = context.viewMode;
+  
+  // For docs pages - actively REMOVE PDS styles and skip decorator
+  if (context.viewMode === 'docs') {
+    // Clear any PDS adopted stylesheets
+    if (document.adoptedStyleSheets?.length > 0) {
+      const nonPdsSheets = document.adoptedStyleSheets.filter(s => !s._pds);
+      document.adoptedStyleSheets = nonPdsSheets;
+    }
+    return story();
+  }
+  
   console.log('🎬 withPDS decorator called for:', context.title);
   
   // Check adoptedStyleSheets status