@pure-ds/storybook 0.4.6 → 0.4.7

package/.storybook/preview.js

@@ -287,7 +287,7 @@ const withGlobalsHandler = (story, context) => {
 const DEFAULT_STORY_TAGS = new Set(['dev', 'test', 'story', 'stories', 'autodocs', 'example', 'examples']);
 
 const TAG_SYNONYMS = new Map([
-  ['padding', 'spacing'],
+  ['padding', 'spacing', 'space'],
   ['gap', 'spacing'],
   ['grid', 'layout'],
   ['flex', 'layout'],

package/.storybook/shiki.js

@@ -1,105 +1,14 @@
 /**
  * Shared Shiki syntax highlighter for PDS Storybook
  * Provides consistent code highlighting across all stories and previews
+ * 
+ * Re-exports from stories/utils/shiki.js to maintain a single source of truth
  */
 
-let shikiInstance = null;
-let shikiLoading = false;
-let shikiLoadPromise = null;
-
-/**
- * Load and initialize Shiki highlighter
- * @returns {Promise<import('shiki').Highlighter|null>}
- */
-export async function loadShiki() {
-  if (shikiInstance) return shikiInstance;
-  
-  if (shikiLoading) {
-    return shikiLoadPromise;
-  }
-
-  shikiLoading = true;
-  shikiLoadPromise = (async () => {
-    try {
-      const shiki = await import('https://esm.sh/shiki@1.0.0');
-      shikiInstance = await shiki.getHighlighter({
-        themes: ['github-dark', 'github-light'],
-        langs: ['html', 'css', 'javascript', 'typescript', 'json', 'bash', 'shell']
-      });
-      return shikiInstance;
-    } catch (error) {
-      console.error('Failed to load Shiki:', error);
-      return null;
-    } finally {
-      shikiLoading = false;
-    }
-  })();
-
-  return shikiLoadPromise;
-}
-
-/**
- * Highlight code with Shiki
- * @param {string} code - The code to highlight
- * @param {string} lang - The language (html, css, js, json, etc.)
- * @param {string} theme - The theme to use (github-dark or github-light)
- * @returns {Promise<string>} - Highlighted HTML
- */
-export async function highlight(code, lang = 'html', theme = 'github-dark') {
-  const highlighter = await loadShiki();
-  
-  if (!highlighter) {
-    return escapeHtml(code);
-  }
-
-  try {
-    // Map common aliases
-    const langMap = {
-      'js': 'javascript',
-      'ts': 'typescript',
-      'sh': 'shell'
-    };
-    const resolvedLang = langMap[lang] || lang;
-
-    const html = highlighter.codeToHtml(code, {
-      lang: resolvedLang,
-      theme
-    });
-    return html;
-  } catch (error) {
-    console.error('Shiki highlighting failed:', error);
-    return `<pre><code>${escapeHtml(code)}</code></pre>`;
-  }
-}
-
-/**
- * Get the current theme based on document/storybook theme
- * @returns {string}
- */
-export function getCurrentTheme() {
-  const isDark = document.documentElement.getAttribute('data-theme') === 'dark' ||
-                 document.body.classList.contains('dark') ||
-                 window.matchMedia('(prefers-color-scheme: dark)').matches;
-  return isDark ? 'github-dark' : 'github-light';
-}
-
-/**
- * Escape HTML special characters
- * @param {string} text
- * @returns {string}
- */
-export function escapeHtml(text) {
-  return text
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#039;');
-}
-
-/**
- * Pre-load Shiki in the background for faster first highlight
- */
-export function preloadShiki() {
-  loadShiki();
-}
+export { 
+  loadShiki, 
+  highlight, 
+  getCurrentTheme, 
+  escapeHtml, 
+  preloadShiki 
+} from '../stories/utils/shiki.js';

package/dist/pds-reference.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2025-12-24T14:47:35.045Z",
+  "generatedAt": "2025-12-30T11:12:24.605Z",
   "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.4.6",
+  "version": "0.4.7",
   "description": "Storybook showcase for Pure Design System with live configuration",
   "type": "module",
   "private": false,
@@ -35,7 +35,7 @@
     "storybook:build": "npm run build-storybook"
   },
   "peerDependencies": {
-    "@pure-ds/core": "^0.4.6"
+    "@pure-ds/core": "^0.4.7"
   },
   "dependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",

package/stories/reference/reference-helpers.js

@@ -3,7 +3,7 @@ import { addons } from '@storybook/preview-api';
 import { SELECT_STORY } from '@storybook/core-events';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import showdown from 'showdown';
-import { highlight as shikiHighlight, escapeHtml as shikiEscapeHtml } from '../../.storybook/shiki.js';
+import { highlight as shikiHighlight, escapeHtml as shikiEscapeHtml } from '../utils/shiki.js';
 
 const REF_HELPER_STYLE_ID = 'pds-reference-helper-styles';
 const REF_HELPER_STYLE_CONTENT = `

package/stories/utils/markdown.js

@@ -4,7 +4,7 @@
  */
 
 import Showdown from 'showdown';
-import { loadShiki, highlight, getCurrentTheme, escapeHtml, preloadShiki } from '../../.storybook/shiki.js';
+import { loadShiki, highlight, getCurrentTheme, escapeHtml, preloadShiki } from './shiki.js';
 
 // Pre-load Shiki in background
 preloadShiki();

package/stories/utils/shiki.js

@@ -0,0 +1,108 @@
+/**
+ * Shared Shiki syntax highlighter for PDS Storybook stories
+ * Provides consistent code highlighting across all stories
+ * 
+ * This file is located within the stories folder so it remains available
+ * when stories are copied or cached to other locations.
+ */
+
+let shikiInstance = null;
+let shikiLoading = false;
+let shikiLoadPromise = null;
+
+/**
+ * Load and initialize Shiki highlighter
+ * @returns {Promise<import('shiki').Highlighter|null>}
+ */
+export async function loadShiki() {
+  if (shikiInstance) return shikiInstance;
+  
+  if (shikiLoading) {
+    return shikiLoadPromise;
+  }
+
+  shikiLoading = true;
+  shikiLoadPromise = (async () => {
+    try {
+      const shiki = await import('https://esm.sh/shiki@1.0.0');
+      shikiInstance = await shiki.getHighlighter({
+        themes: ['github-dark', 'github-light'],
+        langs: ['html', 'css', 'javascript', 'typescript', 'json', 'bash', 'shell']
+      });
+      return shikiInstance;
+    } catch (error) {
+      console.error('Failed to load Shiki:', error);
+      return null;
+    } finally {
+      shikiLoading = false;
+    }
+  })();
+
+  return shikiLoadPromise;
+}
+
+/**
+ * Highlight code with Shiki
+ * @param {string} code - The code to highlight
+ * @param {string} lang - The language (html, css, js, json, etc.)
+ * @param {string} theme - The theme to use (github-dark or github-light)
+ * @returns {Promise<string>} - Highlighted HTML
+ */
+export async function highlight(code, lang = 'html', theme = 'github-dark') {
+  const highlighter = await loadShiki();
+  
+  if (!highlighter) {
+    return escapeHtml(code);
+  }
+
+  try {
+    // Map common aliases
+    const langMap = {
+      'js': 'javascript',
+      'ts': 'typescript',
+      'sh': 'shell'
+    };
+    const resolvedLang = langMap[lang] || lang;
+
+    const html = highlighter.codeToHtml(code, {
+      lang: resolvedLang,
+      theme
+    });
+    return html;
+  } catch (error) {
+    console.error('Shiki highlighting failed:', error);
+    return `<pre><code>${escapeHtml(code)}</code></pre>`;
+  }
+}
+
+/**
+ * Get the current theme based on document/storybook theme
+ * @returns {string}
+ */
+export function getCurrentTheme() {
+  const isDark = document.documentElement.getAttribute('data-theme') === 'dark' ||
+                 document.body.classList.contains('dark') ||
+                 window.matchMedia('(prefers-color-scheme: dark)').matches;
+  return isDark ? 'github-dark' : 'github-light';
+}
+
+/**
+ * Escape HTML special characters
+ * @param {string} text
+ * @returns {string}
+ */
+export function escapeHtml(text) {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
+/**
+ * Pre-load Shiki in the background for faster first highlight
+ */
+export function preloadShiki() {
+  loadShiki();
+}