@pure-ds/storybook 0.5.33 → 0.5.34

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

@@ -109,10 +109,11 @@ const CheckIcon = () => (
 );
 
 export const Panel = ({ active }) => {
-  const [source, setSource] = useState({ markup: '', forms: [] });
+  const [source, setSource] = useState({ markup: '', forms: [], omniboxes: [] });
   const [copied, setCopied] = useState(false);
   const [highlightedMarkup, setHighlightedMarkup] = useState('');
   const [highlightedforms, setHighlightedforms] = useState([]);
+  const [highlightedOmniboxes, setHighlightedOmniboxes] = useState([]);
   const shikiRef = useRef(null);
   
   // Get Storybook theme to detect light/dark mode
@@ -197,28 +198,63 @@ export const Panel = ({ active }) => {
     processforms();
   }, [source.forms, shikiTheme]);
 
+  // Highlight omnibox settings when source or theme changes
+  useEffect(() => {
+    if (!source.omniboxes || source.omniboxes.length === 0) {
+      setHighlightedOmniboxes([]);
+      return;
+    }
+
+    const highlightCode = async (code) => {
+      if (!code) return '';
+      const highlighter = shikiRef.current || await loadShiki();
+      if (highlighter) {
+        try {
+          return highlighter.codeToHtml(code, { lang: 'javascript', theme: shikiTheme });
+        } catch (err) {
+          return `<pre><code>${escapeHtml(code)}</code></pre>`;
+        }
+      }
+      return `<pre><code>${escapeHtml(code)}</code></pre>`;
+    };
+
+    const processOmniboxes = async () => {
+      const highlighted = await Promise.all(
+        source.omniboxes.map(async (omnibox, index) => ({
+          id: omnibox.id ?? index,
+          label: omnibox.label,
+          settings: await highlightCode(omnibox.settings)
+        }))
+      );
+      setHighlightedOmniboxes(highlighted);
+    };
+
+    processOmniboxes();
+  }, [source.omniboxes, shikiTheme]);
+
   useChannel({
     [EVENTS.UPDATE_HTML]: (payload) => {
       if (typeof payload === 'string') {
-        setSource({ markup: payload || '', forms: [] });
+        setSource({ markup: payload || '', forms: [], omniboxes: [] });
         return;
       }
 
       if (payload && typeof payload === 'object') {
         setSource({
           markup: payload.markup || '',
-          forms: Array.isArray(payload.forms) ? payload.forms : []
+          forms: Array.isArray(payload.forms) ? payload.forms : [],
+          omniboxes: Array.isArray(payload.omniboxes) ? payload.omniboxes : []
         });
         return;
       }
 
-      setSource({ markup: '', forms: [] });
+      setSource({ markup: '', forms: [], omniboxes: [] });
     }
   });
 
   // Request HTML update when panel becomes active
   React.useEffect(() => {
-    if (active && !source.markup && source.forms.length === 0) {
+    if (active && !source.markup && source.forms.length === 0 && source.omniboxes.length === 0) {
       // Trigger a re-extraction by emitting a request event
       // The decorator will pick this up on the next render cycle
       const container = document.querySelector('#storybook-root');
@@ -230,7 +266,7 @@ export const Panel = ({ active }) => {
         }, 100);
       }
     }
-  }, [active, source.markup, source.forms.length]);
+  }, [active, source.markup, source.forms.length, source.omniboxes.length]);
 
   const copyToClipboard = useCallback(async () => {
     try {
@@ -245,8 +281,9 @@ export const Panel = ({ active }) => {
 
   const hasMarkup = Boolean(source.markup);
   const hasforms = source.forms.length > 0;
+  const hasOmniboxes = source.omniboxes.length > 0;
 
-  if (!hasMarkup && !hasforms) {
+  if (!hasMarkup && !hasforms && !hasOmniboxes) {
     return (
       <Container>
         <EmptyState>
@@ -314,6 +351,30 @@ export const Panel = ({ active }) => {
         );
       })}
 
+      {hasOmniboxes && source.omniboxes.map((sourceOmnibox, index) => {
+        const key = sourceOmnibox.id ?? index;
+        const highlightedOmnibox = highlightedOmniboxes[index];
+        const heading = source.omniboxes.length > 1 ? (sourceOmnibox.label || `Omnibox ${index + 1}`) : 'pds-omnibox';
+
+        return (
+          <SectionWrapper key={key}>
+            <SectionHeading>{heading}</SectionHeading>
+
+            {sourceOmnibox.settings && (
+              <>
+                <Subheading>settings</Subheading>
+                <CodeBlock
+                  $compact
+                  dangerouslySetInnerHTML={{
+                    __html: highlightedOmnibox?.settings || `<pre><code>${escapeHtml(sourceOmnibox.settings)}</code></pre>`
+                  }}
+                />
+              </>
+            )}
+          </SectionWrapper>
+        );
+      })}
+
       {hasMarkup && (
         <CopyButton
           onClick={copyToClipboard}

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

@@ -197,6 +197,39 @@ function generatePdsFormMarkup(formElement) {
   return `<pds-form${formattedAttrs}>${slotContent}</pds-form>`;
 }
 
+/**
+ * Generate realistic source code for pds-omnibox elements
+ */
+function generatePdsOmniboxMarkup(omniboxElement) {
+  const attrs = [];
+
+  const stringAttrs = ['name', 'placeholder', 'value', 'autocomplete'];
+  stringAttrs.forEach((attr) => {
+    const value = omniboxElement.getAttribute(attr);
+    if (value !== null && value !== undefined && value !== '') {
+      attrs.push(`${attr}="${value}"`);
+    }
+  });
+
+  if (omniboxElement.hasAttribute('required')) {
+    attrs.push('required');
+  }
+
+  if (omniboxElement.hasAttribute('disabled')) {
+    attrs.push('disabled');
+  }
+
+  if (omniboxElement.settings) {
+    attrs.push('.settings=${settings}');
+  }
+
+  const formattedAttrs = attrs.length > 0
+    ? '\n  ' + attrs.join('\n  ') + '\n'
+    : '';
+
+  return `<pds-omnibox${formattedAttrs}></pds-omnibox>`;
+}
+
 /**
  * Global decorator that extracts and sends HTML to the panel
  */
@@ -211,14 +244,16 @@ export const withHTMLExtractor = (storyFn, context) => {
     // Try to get HTML from the story container
     const container = document.querySelector('#storybook-root');
     if (container) {
-      // Check if this story has pds-form elements
+      // Check if this story has pds-form or pds-omnibox elements
       const pdsFormElements = Array.from(container.querySelectorAll('pds-form'));
-      
-      if (pdsFormElements.length > 0) {
-        // Generate realistic markup for pds-form stories
+      const pdsOmniboxElements = Array.from(container.querySelectorAll('pds-omnibox'));
+      const hasSpecialElements = pdsFormElements.length > 0 || pdsOmniboxElements.length > 0;
+
+      if (hasSpecialElements) {
+        // Generate realistic markup for pds-form / pds-omnibox stories
         const alerts = Array.from(container.querySelectorAll('.callout'));
         let markup = '';
-        
+
         // Include any alert/info boxes before the form
         if (alerts.length > 0) {
           alerts.forEach(alert => {
@@ -227,12 +262,17 @@ export const withHTMLExtractor = (storyFn, context) => {
             markup += `</div>\n\n`;
           });
         }
-        
+
         // Add pds-form markup
         pdsFormElements.forEach(form => {
           markup += generatePdsFormMarkup(form);
         });
-        
+
+        // Add pds-omnibox markup
+        pdsOmniboxElements.forEach(omnibox => {
+          markup += generatePdsOmniboxMarkup(omnibox);
+        });
+
         html = markup;
       } else {
         // No pds-form elements, use standard extraction
@@ -264,9 +304,32 @@ export const withHTMLExtractor = (storyFn, context) => {
         })
         .filter((entry) => entry.jsonSchema || entry.uiSchema || entry.options);
 
+      const omniboxes = pdsOmniboxElements
+        .map((omnibox, index) => {
+          const label =
+            omnibox.getAttribute?.('id') ||
+            omnibox.getAttribute?.('name') ||
+            (pdsOmniboxElements.length > 1 ? `Omnibox ${index + 1}` : 'Omnibox');
+
+          const settingsSource =
+            omnibox.getAttribute?.('data-settings-source') ||
+            omnibox.dataset?.settingsSource ||
+            null;
+
+          const settings = settingsSource || serializeForDisplay(omnibox.settings);
+
+          return {
+            id: index,
+            label,
+            settings
+          };
+        })
+        .filter((entry) => entry.settings);
+
       channel.emit(EVENTS.UPDATE_HTML, {
         markup: html || '',
-        forms
+        forms,
+        omniboxes
       });
     }
   };

package/dist/pds-reference.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-01-28T14:26:25.662Z",
+  "generatedAt": "2026-01-29T12:10:11.322Z",
   "sources": {
     "customElements": "custom-elements.json",
     "ontology": "src\\js\\pds-core\\pds-ontology.js",
@@ -2723,6 +2723,14 @@
       ],
       "ontology": null,
       "stories": [
+        {
+          "exportName": "CombinedCategories",
+          "name": "CombinedCategories",
+          "id": "components-pds-omnibox--combined-categories",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\components\\PdsOmnibox.stories.js"
+        },
         {
           "exportName": "Default",
           "name": "Default",
@@ -2730,6 +2738,14 @@
           "tags": [],
           "description": null,
           "source": "packages\\pds-storybook\\stories\\components\\PdsOmnibox.stories.js"
+        },
+        {
+          "exportName": "InForm",
+          "name": "InForm",
+          "id": "components-pds-omnibox--in-form",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\components\\PdsOmnibox.stories.js"
         }
       ],
       "sourceModule": "public/assets/pds/components/pds-omnibox.js",
@@ -2836,6 +2852,12 @@
           "parameters": [],
           "return": "void"
         },
+        {
+          "name": "disconnectedCallback",
+          "description": null,
+          "parameters": [],
+          "return": "void"
+        },
         {
           "name": "formAssociatedCallback",
           "description": null,
@@ -5584,6 +5606,14 @@
         ]
       },
       "stories": [
+        {
+          "exportName": "CombinedCategories",
+          "name": "CombinedCategories",
+          "id": "components-pds-omnibox--combined-categories",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\components\\PdsOmnibox.stories.js"
+        },
         {
           "exportName": "Default",
           "name": "Default",
@@ -5591,6 +5621,14 @@
           "tags": [],
           "description": null,
           "source": "packages\\pds-storybook\\stories\\components\\PdsOmnibox.stories.js"
+        },
+        {
+          "exportName": "InForm",
+          "name": "InForm",
+          "id": "components-pds-omnibox--in-form",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\components\\PdsOmnibox.stories.js"
         }
       ],
       "files": [

package/package.json

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