@pure-ds/storybook 0.7.19 → 0.7.25

package/.storybook/htmlPreview.css

@@ -75,3 +75,11 @@ pds-config-form {
     right: 0;
   }
 }
+
+#storybook-root {
+  header:has(.text-muted){
+    margin-bottom: var(--spacing-6, 1rem);
+    border-bottom: 1px solid var(--color-border);
+    border-radius: 0;
+  }
+}

package/.storybook/htmlPreview.js

@@ -5,7 +5,7 @@
  */
 
 import { render as litRender } from 'lit';
-import { highlight, getCurrentTheme, escapeHtml, preloadShiki } from './shiki.js';
+import { renderCodeBlock, getCurrentTheme, preloadShiki } from './shiki.js';
 
 // Pre-load Shiki in the background
 preloadShiki();
@@ -174,15 +174,10 @@ export const withHTMLSource = (storyFn, context) => {
         html = formatHTML(extractHTML(storyContainer));
       }
       
-      const codeEl = sourceSection.querySelector('.html-source-code');
       const preEl = sourceSection.querySelector('.html-source-pre');
       if (preEl && html) {
-        // Use Shiki for syntax highlighting
         const theme = getCurrentTheme();
-        const highlighted = await highlight(html, 'html', theme);
-        
-        // Shiki returns complete <pre><code>...</code></pre>, replace the whole pre element
-        preEl.outerHTML = highlighted;
+        await renderCodeBlock(preEl, html, 'html', theme);
       }
       
       // Setup copy button

package/.storybook/main.js

@@ -78,6 +78,7 @@ const config = {
     const aliases = [
       { find: '#pds/lit', replacement: resolve(pdsSrcPath, 'js/lit.js') },
       { find: /^#pds$/, replacement: resolve(pdsSrcPath, 'js/pds.js') },
+      { find: /^#shiki$/, replacement: resolve(pdsSrcPath, 'js/external/shiki.js') },
       ...existingAliases,
     ];
 

package/.storybook/preview-head.html

@@ -11,6 +11,7 @@
   "imports": {
     "#pds": "/assets/pds/core.js",
     "#pds/lit": "/assets/pds/external/lit.js",
+    "#shiki": "/assets/pds/external/shiki.js",
     "#showdown": "https://cdn.jsdelivr.net/npm/showdown@2.1.0/dist/showdown.mjs"
   }
 }

package/.storybook/preview.js

@@ -1,6 +1,7 @@
 import { addons } from '@storybook/preview-api';
 import { SELECT_STORY, UPDATE_GLOBALS } from '@storybook/core-events';
 import React from 'react';
+import { html } from 'lit';
 import { Title, Subtitle, Description as DocsDescription, Controls } from '@storybook/blocks';
 import { PDS } from '@pds-src/js/pds.js';
 import { presets } from '@pds-src/js/pds-core/pds-config.js';
@@ -16,6 +17,42 @@ import { toastFormData } from '../stories/utils/toast-utils.js';
 // Expose toastFormData globally for inline event handlers
 window.toastFormData = toastFormData;
 
+let pdsCodeLoadPromise = null;
+
+async function ensurePdsCodeLoaded() {
+  if (typeof customElements !== 'undefined' && customElements.get('pds-code')) {
+    return true;
+  }
+
+  if (!pdsCodeLoadPromise) {
+    pdsCodeLoadPromise = (async () => {
+      const candidates = [
+        '@pds-src/js/components/pds-code.js',
+        '/assets/pds/components/pds-code.js',
+        '/pds/components/pds-code.js',
+      ];
+
+      for (const specifier of candidates) {
+        try {
+          await import(specifier);
+          if (typeof customElements !== 'undefined' && customElements.get('pds-code')) {
+            return true;
+          }
+        } catch {
+          // try next candidate
+        }
+      }
+
+      console.warn('Failed to load pds-code component from known locations.');
+      return false;
+    })();
+  }
+
+  return pdsCodeLoadPromise;
+}
+
+void ensurePdsCodeLoaded();
+
 // Get initial preset from storage or URL or default
 const getInitialPreset = () => {
   try {
@@ -52,6 +89,36 @@ function isDocsPage() {
   }
 }
 
+function inferCodeLanguage(codeEl) {
+  if (!codeEl) return 'html';
+  const className = codeEl.className || '';
+  const languageMatch = className.match(/(?:language|lang)-([a-z0-9-]+)/i);
+  if (languageMatch?.[1]) {
+    return languageMatch[1].toLowerCase();
+  }
+  return codeEl.getAttribute('data-lang') || 'html';
+}
+
+function upgradeLegacyCodeBlocks(root) {
+  if (!root) return;
+  if (typeof customElements !== 'undefined' && !customElements.get('pds-code')) return;
+
+  const blocks = root.querySelectorAll('pre > code');
+  blocks.forEach((codeEl) => {
+    const preEl = codeEl.parentElement;
+    if (!preEl || preEl.closest('pds-code')) return;
+
+    const content = codeEl.textContent || '';
+    if (!content.trim()) return;
+
+    const lang = inferCodeLanguage(codeEl);
+    const pdsCode = document.createElement('pds-code');
+    pdsCode.setAttribute('lang', lang);
+    pdsCode.code = content;
+    preEl.replaceWith(pdsCode);
+  });
+}
+
 let liveGenerator = null;
 const setLiveGenerator = (generator) => {
   if (generator && typeof generator === 'object') {
@@ -216,6 +283,8 @@ const withPDS = (story, context) => {
   const adoptAllShadowStyles = async () => {
     const container = document.querySelector('#storybook-root');
     if (!container) return;
+
+    upgradeLegacyCodeBlocks(container);
     
     const walker = document.createTreeWalker(
       container,
@@ -283,6 +352,9 @@ const withPDS = (story, context) => {
   };
   
   // Initial adoption - run multiple times to catch lazy components
+  setTimeout(() => {
+    upgradeLegacyCodeBlocks(document.querySelector('#storybook-root'));
+  }, 0);
   setTimeout(adoptAllShadowStyles, 0);
   setTimeout(adoptAllShadowStyles, 100);
   setTimeout(adoptAllShadowStyles, 300);
@@ -1353,6 +1425,26 @@ const withRelatedStories = (story, context) => {
   return result;
 };
 
+const withComponentStoryHeader = (story, context) => {
+  if (context.viewMode !== 'story') return story();
+
+  const titlePath = context.title || '';
+  if (!titlePath.startsWith('Components/')) return story();
+
+  const tagName = titlePath.split('/').pop() || 'component';
+  const storyTitle = context.name || 'Story';
+
+  return html`
+    <div class="stack-md">
+      <header>
+        <h2>${tagName}</h2>
+        <small class="text-muted">${storyTitle}</small>
+      </header>
+      ${story()}
+    </div>
+  `;
+};
+
 const DocsPage = () => React.createElement(
   React.Fragment,
   null,
@@ -1364,7 +1456,7 @@ const DocsPage = () => React.createElement(
 
 /** @type { import('@storybook/web-components').Preview } */
 const preview = {
-  decorators: [withGlobalsHandler, withPDS, withHTMLExtractor, withDescription, withRelatedStories],
+  decorators: [withGlobalsHandler, withPDS, withHTMLExtractor, withDescription, withComponentStoryHeader, withRelatedStories],
   parameters: {
     controls: {
       matchers: {

package/.storybook/shiki.js

@@ -8,6 +8,7 @@
 export { 
   loadShiki, 
   highlight, 
+  renderCodeBlock,
   getCurrentTheme, 
   escapeHtml, 
   preloadShiki