@pure-ds/storybook 0.7.41 → 0.7.50

package/.storybook/docs.css

@@ -2,9 +2,12 @@
 
 /* Override Storybook's default mono font for code panels */
 pre, code, .docblock-source pre, .docblock-source code {
-  font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
-  font-size: 13.6px;
-  line-height: 24px;
+  font-family: var(--pds-shiki-font-family, 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace) !important;
+  font-size: var(--pds-shiki-font-size, 13.6px);
+  line-height: var(--pds-shiki-line-height, 24px);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: geometricPrecision;
 }
 
 /* Hide ALL story previews and interactive elements in Docs */

package/.storybook/htmlPreview.css

@@ -39,13 +39,16 @@
   padding: var(--spacing-4, 1rem);
   border-radius: var(--radius-md, 4px);
   overflow-x: auto;
-  font-size: 13.6px;
-  line-height: 24px;
-  tab-size: 2;
+  font-size: var(--pds-shiki-font-size, 13.6px);
+  line-height: var(--pds-shiki-line-height, 24px);
+  tab-size: var(--pds-shiki-tab-size, 2);
 }
 
 .html-source-content pre code {
-  font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-family: var(--pds-shiki-font-family, 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: geometricPrecision;
 }
 
 /* Fallback pre styling (before Shiki loads) */
@@ -54,10 +57,13 @@
   padding: var(--spacing-4, 1rem);
   border-radius: var(--radius-md, 4px);
   overflow-x: auto;
-  font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  font-size: 13.6px;
-  line-height: 24px;
-  tab-size: 2;
+  font-family: var(--pds-shiki-font-family, 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+  font-size: var(--pds-shiki-font-size, 13.6px);
+  line-height: var(--pds-shiki-line-height, 24px);
+  tab-size: var(--pds-shiki-tab-size, 2);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: geometricPrecision;
   background: var(--color-surface-raised, #282c34);
   color: var(--color-text-primary, #abb2bf);
 }

package/.storybook/preview.js

@@ -11,10 +11,14 @@ import { stripFunctions } from '@pds-src/js/pds-core/pds-start-helpers.js';
 import { config as userConfig } from '@user/pds-config';
 import { withHTMLExtractor } from './addons/html-preview/preview.js';
 import { withDescription } from './addons/description/preview.js';
+import { ensureSharedShikiStyles, preloadShiki } from './shiki.js';
 import './htmlPreview.css';
 import './docs.css';
 import { toastFormData } from '../stories/utils/toast-utils.js';
 
+ensureSharedShikiStyles();
+preloadShiki();
+
 // Expose toastFormData globally for inline event handlers
 window.toastFormData = toastFormData;
 
@@ -35,7 +39,7 @@ async function ensurePdsCodeLoaded() {
 
       for (const specifier of candidates) {
         try {
-          await import(specifier);
+          await import(/* @vite-ignore */ specifier);
           if (typeof customElements !== 'undefined' && customElements.get('pds-code')) {
             return true;
           }
@@ -209,14 +213,22 @@ function isDocsPage() {
   }
 }
 
-function inferCodeLanguage(codeEl) {
-  if (!codeEl) return 'html';
-  const className = codeEl.className || '';
+function inferCodeLanguage(codeEl, preEl) {
+  if (!codeEl && !preEl) 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';
+
+  const preClassName = preEl?.className || '';
+  const preLanguageMatch = preClassName.match(/(?:language|lang)-([a-z0-9-]+)/i);
+  if (preLanguageMatch?.[1]) {
+    return preLanguageMatch[1].toLowerCase();
+  }
+
+  return codeEl?.getAttribute('data-lang') || preEl?.getAttribute('data-lang') || 'html';
 }
 
 function upgradeLegacyCodeBlocks(root) {
@@ -228,10 +240,19 @@ function upgradeLegacyCodeBlocks(root) {
     const preEl = codeEl.parentElement;
     if (!preEl || preEl.closest('pds-code')) return;
 
+    // Keep Shiki-rendered blocks intact; they already carry correct language + theme.
+    if (
+      preEl.classList.contains('shiki') ||
+      preEl.classList.contains('pds-shiki-block') ||
+      preEl.hasAttribute('data-pds-shiki')
+    ) {
+      return;
+    }
+
     const content = codeEl.textContent || '';
     if (!content.trim()) return;
 
-    const lang = inferCodeLanguage(codeEl);
+    const lang = inferCodeLanguage(codeEl, preEl);
     const pdsCode = document.createElement('pds-code');
     pdsCode.setAttribute('lang', lang);
     pdsCode.code = content;
@@ -239,6 +260,37 @@ function upgradeLegacyCodeBlocks(root) {
   });
 }
 
+const observeCodeBlocks = (() => {
+  const observedRoots = new WeakSet();
+  return (root) => {
+    if (!root || observedRoots.has(root)) return;
+
+    const observer = new MutationObserver(() => {
+      upgradeLegacyCodeBlocks(root);
+    });
+
+    observer.observe(root, { childList: true, subtree: true });
+    observedRoots.add(root);
+  };
+})();
+
+function scheduleCodeBlockUpgrade(root) {
+  if (!root) return;
+
+  const runUpgrade = () => upgradeLegacyCodeBlocks(root);
+  runUpgrade();
+  requestAnimationFrame(runUpgrade);
+  setTimeout(runUpgrade, 60);
+  setTimeout(runUpgrade, 220);
+
+  void ensurePdsCodeLoaded().then(() => {
+    runUpgrade();
+    observeCodeBlocks(root);
+  });
+
+  observeCodeBlocks(root);
+}
+
 let liveGenerator = null;
 const setLiveGenerator = (generator) => {
   if (generator && typeof generator === 'object') {
@@ -414,7 +466,13 @@ const withPDS = (story, context) => {
       const nonPdsSheets = document.adoptedStyleSheets.filter(s => !s._pds);
       document.adoptedStyleSheets = nonPdsSheets;
     }
-    return story();
+    const docsStory = story();
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        scheduleCodeBlockUpgrade(document.getElementById('docs-root'));
+      });
+    });
+    return docsStory;
   }
   
   console.log('🎬 withPDS decorator called for:', context.title);
@@ -514,7 +572,7 @@ const withPDS = (story, context) => {
   
   // Initial adoption - run multiple times to catch lazy components
   setTimeout(() => {
-    upgradeLegacyCodeBlocks(document.querySelector('#storybook-root'));
+    scheduleCodeBlockUpgrade(document.querySelector('#storybook-root'));
   }, 0);
   setTimeout(adoptAllShadowStyles, 0);
   setTimeout(adoptAllShadowStyles, 100);
@@ -1581,6 +1639,7 @@ const withRelatedStories = (story, context) => {
     requestAnimationFrame(() => {
       if (context.viewMode === 'docs') {
         pruneDocsStories();
+        scheduleCodeBlockUpgrade(document.getElementById('docs-root'));
         renderRelatedFooter(context);
         removeRelatedOverlay();
         return;
@@ -1712,19 +1771,6 @@ const preview = {
         dynamicTitle: true
       }
     },
-    locale: {
-      name: 'Locale',
-      description: 'PDS locale',
-      defaultValue: initialLocale,
-      toolbar: {
-        icon: 'globe',
-        items: storybookLocales.map((locale) => ({
-          value: locale,
-          title: formatLocaleTitle(locale)
-        })),
-        dynamicTitle: true
-      }
-    },
     preset: {
       name: 'Preset',
       description: 'Design preset',
@@ -1756,6 +1802,19 @@ const preview = {
           })),
         dynamicTitle: true
       }
+    },
+    locale: {
+      name: 'Locale',
+      description: 'PDS locale',
+      defaultValue: initialLocale,
+      toolbar: {
+        icon: 'globe',
+        items: storybookLocales.map((locale) => ({
+          value: locale,
+          title: formatLocaleTitle(locale)
+        })),
+        dynamicTitle: true
+      }
     }
   }
 };

package/.storybook/shiki.js

@@ -6,10 +6,12 @@
  */
 
 export { 
+  SHIKI_CODE_THEME,
   loadShiki, 
   highlight, 
   renderCodeBlock,
   getCurrentTheme, 
   escapeHtml, 
-  preloadShiki 
+  preloadShiki,
+  ensureSharedShikiStyles
 } from '../stories/utils/shiki.js';