@pure-ds/storybook 0.4.15 → 0.4.17

package/.storybook/addons/html-preview/Panel.jsx

@@ -2,7 +2,7 @@ import React, { useState, useCallback, useEffect, useRef } from 'react';
 import { useChannel } from '@storybook/manager-api';
 import { IconButton } from '@storybook/components';
 import { EVENTS } from './constants.js';
-import { styled } from '@storybook/theming';
+import { styled, useTheme } from '@storybook/theming';
 import { loadShiki, escapeHtml } from '../../shiki.js';
 
 const Container = styled.div`
@@ -16,9 +16,9 @@ const CodeBlock = styled.pre`
   margin: 0;
   padding: 16px;
   padding-bottom: ${props => (props.$compact ? '24px' : '60px')}; /* Space for fixed button */
-  font-family: ${props => props.theme.typography.fonts.mono};
-  font-size: 13px;
-  line-height: 1.6;
+  font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
+  font-size: 13.6px;
+  line-height: 24px;
   color: ${props => props.theme.color.defaultText};
   background: transparent;
   tab-size: 2;
@@ -32,6 +32,7 @@ const CodeBlock = styled.pre`
 
   .shiki code {
     background: transparent;
+    font-family: inherit !important;
   }
 `;
 
@@ -111,7 +112,12 @@ export const Panel = ({ active }) => {
   const [source, setSource] = useState({ markup: '', jsonForms: [] });
   const [copied, setCopied] = useState(false);
   const [highlightedMarkup, setHighlightedMarkup] = useState('');
+  const [highlightedJsonForms, setHighlightedJsonForms] = useState([]);
   const shikiRef = useRef(null);
+  
+  // Get Storybook theme to detect light/dark mode
+  const storybookTheme = useTheme();
+  const shikiTheme = storybookTheme.base === 'dark' ? 'github-dark' : 'github-light';
 
   // Load Shiki once on mount
   useEffect(() => {
@@ -120,7 +126,7 @@ export const Panel = ({ active }) => {
     });
   }, []);
 
-  // Highlight markup when source changes
+  // Highlight markup when source or theme changes
   useEffect(() => {
     if (!source.markup) {
       setHighlightedMarkup('');
@@ -132,7 +138,7 @@ export const Panel = ({ active }) => {
       try {
         const html = highlighter.codeToHtml(source.markup, {
           lang: 'html',
-          theme: 'github-dark'
+          theme: shikiTheme
         });
         setHighlightedMarkup(html);
       } catch (err) {
@@ -145,7 +151,7 @@ export const Panel = ({ active }) => {
       loadShiki().then(hl => {
         if (hl && source.markup) {
           try {
-            const html = hl.codeToHtml(source.markup, { lang: 'html', theme: 'github-dark' });
+            const html = hl.codeToHtml(source.markup, { lang: 'html', theme: shikiTheme });
             setHighlightedMarkup(html);
           } catch (err) {
             // Keep fallback
@@ -153,7 +159,43 @@ export const Panel = ({ active }) => {
         }
       });
     }
-  }, [source.markup]);
+  }, [source.markup, shikiTheme]);
+
+  // Highlight jsonForms schemas when source or theme changes
+  useEffect(() => {
+    if (!source.jsonForms || source.jsonForms.length === 0) {
+      setHighlightedJsonForms([]);
+      return;
+    }
+
+    const highlightJsonCode = async (code) => {
+      if (!code) return '';
+      const highlighter = shikiRef.current || await loadShiki();
+      if (highlighter) {
+        try {
+          return highlighter.codeToHtml(code, { lang: 'json', theme: shikiTheme });
+        } catch (err) {
+          return `<pre><code>${escapeHtml(code)}</code></pre>`;
+        }
+      }
+      return `<pre><code>${escapeHtml(code)}</code></pre>`;
+    };
+
+    const processJsonForms = async () => {
+      const highlighted = await Promise.all(
+        source.jsonForms.map(async (form, index) => ({
+          id: form.id ?? index,
+          label: form.label,
+          jsonSchema: await highlightJsonCode(form.jsonSchema),
+          uiSchema: await highlightJsonCode(form.uiSchema),
+          options: await highlightJsonCode(form.options)
+        }))
+      );
+      setHighlightedJsonForms(highlighted);
+    };
+
+    processJsonForms();
+  }, [source.jsonForms, shikiTheme]);
 
   useChannel({
     [EVENTS.UPDATE_HTML]: (payload) => {
@@ -224,38 +266,48 @@ export const Panel = ({ active }) => {
         </SectionWrapper>
       )}
 
-      {hasJsonForms && source.jsonForms.map((form, index) => {
-        const key = form.id ?? index;
-        const heading = source.jsonForms.length > 1 ? (form.label || `Form ${index + 1}`) : 'pds-jsonform';
+      {hasJsonForms && source.jsonForms.map((sourceForm, index) => {
+        const key = sourceForm.id ?? index;
+        const highlightedForm = highlightedJsonForms[index];
+        const heading = source.jsonForms.length > 1 ? (sourceForm.label || `Form ${index + 1}`) : 'pds-jsonform';
 
         return (
           <SectionWrapper key={key}>
             <SectionHeading>{heading}</SectionHeading>
 
-            {form.jsonSchema && (
+            {sourceForm.jsonSchema && (
               <>
                 <Subheading>jsonSchema</Subheading>
-                <CodeBlock $compact>
-                  <code>{form.jsonSchema}</code>
-                </CodeBlock>
+                <CodeBlock 
+                  $compact 
+                  dangerouslySetInnerHTML={{ 
+                    __html: highlightedForm?.jsonSchema || `<pre><code>${escapeHtml(sourceForm.jsonSchema)}</code></pre>` 
+                  }} 
+                />
               </>
             )}
 
-            {form.uiSchema && (
+            {sourceForm.uiSchema && (
               <>
                 <Subheading>uiSchema</Subheading>
-                <CodeBlock $compact>
-                  <code>{form.uiSchema}</code>
-                </CodeBlock>
+                <CodeBlock 
+                  $compact 
+                  dangerouslySetInnerHTML={{ 
+                    __html: highlightedForm?.uiSchema || `<pre><code>${escapeHtml(sourceForm.uiSchema)}</code></pre>` 
+                  }} 
+                />
               </>
             )}
 
-            {form.options && (
+            {sourceForm.options && (
               <>
                 <Subheading>options</Subheading>
-                <CodeBlock $compact>
-                  <code>{form.options}</code>
-                </CodeBlock>
+                <CodeBlock 
+                  $compact 
+                  dangerouslySetInnerHTML={{ 
+                    __html: highlightedForm?.options || `<pre><code>${escapeHtml(sourceForm.options)}</code></pre>` 
+                  }} 
+                />
               </>
             )}
           </SectionWrapper>

package/.storybook/addons/html-preview/preview.js

@@ -59,6 +59,29 @@ function extractHTML(element) {
   return clone.innerHTML || '';
 }
 
+/**
+ * Strip Lit template comments from rendered HTML
+ * Removes markers like <!--?lit$641514976$-->, <!---->, etc.
+ */
+function stripLitComments(html) {
+  if (!html) return '';
+  
+  // Remove Lit binding markers: <!--?lit$...$-->
+  html = html.replace(/<!--\?lit\$[^$]+\$-->/g, '');
+  
+  // Remove empty Lit comments: <!---->
+  html = html.replace(/<!---->/g, '');
+  
+  // Remove Lit template marker comments: <!--lit-part...-->
+  html = html.replace(/<!--lit-part[^>]*-->/g, '');
+  html = html.replace(/<!--\/lit-part-->/g, '');
+  
+  // Clean up any resulting multiple whitespace/newlines
+  html = html.replace(/\n\s*\n\s*\n/g, '\n\n');
+  
+  return html;
+}
+
 /**
  * Transform Lit template result to HTML string
  */
@@ -72,7 +95,10 @@ async function litToHTML(templateResult) {
   
   await new Promise(resolve => setTimeout(resolve, 50));
   
-  return formatHTML(temp.innerHTML);
+  // Strip Lit comments before formatting
+  const cleanedHTML = stripLitComments(temp.innerHTML);
+  
+  return formatHTML(cleanedHTML);
 }
 
 function serializeForDisplay(value) {

package/.storybook/docs.css

@@ -1,5 +1,12 @@
 /* Custom Docs page styling - hide all examples, show only description */
 
+/* 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;
+}
+
 /* Hide ALL story previews and interactive elements in Docs */
 .docs-story,
 .sbdocs-preview,

package/.storybook/htmlPreview.css

@@ -39,13 +39,13 @@
   padding: var(--spacing-4, 1rem);
   border-radius: var(--radius-md, 4px);
   overflow-x: auto;
-  font-size: 0.875rem;
-  line-height: 1.6;
+  font-size: 13.6px;
+  line-height: 24px;
   tab-size: 2;
 }
 
 .html-source-content pre code {
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
+  font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 }
 
 /* Fallback pre styling (before Shiki loads) */
@@ -54,9 +54,9 @@
   padding: var(--spacing-4, 1rem);
   border-radius: var(--radius-md, 4px);
   overflow-x: auto;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
-  font-size: 0.875rem;
-  line-height: 1.6;
+  font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 13.6px;
+  line-height: 24px;
   tab-size: 2;
   background: var(--color-surface-raised, #282c34);
   color: var(--color-text-primary, #abb2bf);

package/.storybook/htmlPreview.js

@@ -67,6 +67,29 @@ export function extractHTML(element) {
   return clone.innerHTML || '';
 }
 
+/**
+ * Strip Lit template comments from rendered HTML
+ * Removes markers like <!--?lit$641514976$-->, <!---->, etc.
+ */
+export function stripLitComments(html) {
+  if (!html) return '';
+  
+  // Remove Lit binding markers: <!--?lit$...$-->
+  html = html.replace(/<!--\?lit\$[^$]+\$-->/g, '');
+  
+  // Remove empty Lit comments: <!---->
+  html = html.replace(/<!---->/g, '');
+  
+  // Remove Lit template marker comments: <!--lit-part...-->
+  html = html.replace(/<!--lit-part[^>]*-->/g, '');
+  html = html.replace(/<!--\/lit-part-->/g, '');
+  
+  // Clean up any resulting multiple whitespace/newlines
+  html = html.replace(/\n\s*\n\s*\n/g, '\n\n');
+  
+  return html;
+}
+
 /**
  * Transform Lit template result to HTML string
  */
@@ -81,7 +104,10 @@ export async function litToHTML(templateResult) {
   // Wait for any custom elements to upgrade
   await new Promise(resolve => setTimeout(resolve, 50));
   
-  return formatHTML(temp.innerHTML);
+  // Strip Lit comments before formatting
+  const cleanedHTML = stripLitComments(temp.innerHTML);
+  
+  return formatHTML(cleanedHTML);
 }
 
 /**

package/.storybook/manager-head.html

@@ -0,0 +1,13 @@
+<!-- Source Code Pro font for code panel readability (like React.dev) -->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500;600&display=swap" rel="stylesheet">
+
+<!-- Override Storybook's default monospace font in the manager frame -->
+<style>
+  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;
+  }
+</style>

package/.storybook/preview-head.html

@@ -1,5 +1,10 @@
 <!-- PDS runs in LIVE mode - styles are generated dynamically by Generator.applyStyles() -->
 
+<!-- Source Code Pro font for code readability (like React.dev) -->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500;600&display=swap" rel="stylesheet">
+
 <!-- Import map for pds-jsonform and other components that use #pds/lit -->
 <script type="importmap">
 {

package/.storybook/preview.js

@@ -1304,7 +1304,7 @@ const preview = {
       ]
     },
     docs: {
-      page: DocsPage
+      page: DocsPage,
     },
     options: {
       storySort: {

package/dist/pds-reference.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-01-09T09:26:50.541Z",
+  "generatedAt": "2026-01-11T20:07:09.310Z",
   "sources": {
     "customElements": "custom-elements.json",
     "ontology": "src\\js\\pds-core\\pds-ontology.js",
@@ -3603,12 +3603,7 @@
           ".text-right"
         ],
         "color": [
-          ".text-muted",
-          ".text-primary",
-          ".text-success",
-          ".text-warning",
-          ".text-danger",
-          ".text-info"
+          ".text-muted"
         ],
         "overflow": [
           ".truncate"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pure-ds/storybook",
-  "version": "0.4.15",
+  "version": "0.4.17",
   "description": "Storybook showcase for Pure Design System with live configuration",
   "type": "module",
   "private": false,
@@ -37,7 +37,7 @@
     "pds:build-icons": "pds-build-icons"
   },
   "peerDependencies": {
-    "@pure-ds/core": "^0.4.15"
+    "@pure-ds/core": "^0.4.17"
   },
   "dependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",