@pure-ds/storybook 0.5.44 → 0.5.46

package/.storybook/addons/description/register.cjs

@@ -0,0 +1,61 @@
+const React = require('react');
+const { addons, types } = require('@storybook/manager-api');
+const { AddonPanel } = require('@storybook/components');
+const { Markdown } = require('@storybook/blocks');
+
+const ADDON_ID = 'pds-description';
+const PANEL_ID = `${ADDON_ID}/panel`;
+
+const DescriptionPanel = () => {
+  const [description, setDescription] = React.useState('');
+  const [title, setTitle] = React.useState('');
+
+  React.useEffect(() => {
+    const channel = addons.getChannel();
+
+    const updateDescription = (data) => {
+      setTitle(data.title || '');
+      setDescription(data.description || 'No description available.');
+    };
+
+    channel.on('pds-description/update', updateDescription);
+
+    return () => {
+      channel.removeListener('pds-description/update', updateDescription);
+    };
+  }, []);
+
+  return React.createElement(
+    'div',
+    {
+      style: {
+        padding: '1rem',
+        height: '100%',
+        overflow: 'auto'
+      }
+    },
+    React.createElement(
+      'div',
+      { style: { marginBottom: '0.5rem' } },
+      React.createElement(
+        'strong',
+        { style: { fontSize: '1rem' } },
+        title
+      )
+    ),
+    React.createElement(Markdown, null, description)
+  );
+};
+
+addons.register(ADDON_ID, () => {
+  addons.add(PANEL_ID, {
+    type: types.PANEL,
+    title: 'Description',
+    render: ({ active }) =>
+      React.createElement(
+        AddonPanel,
+        { active },
+        React.createElement(DescriptionPanel)
+      )
+  });
+});

package/.storybook/addons/description/register.js

@@ -1,18 +1,18 @@
-import { addons, types } from '@storybook/manager-api';
-import { AddonPanel } from '@storybook/components';
-import React, { useEffect, useState } from 'react';
-import { Markdown } from '@storybook/blocks';
+const React = require('react');
+const { addons, types } = require('@storybook/manager-api');
+const { AddonPanel } = require('@storybook/components');
+const { Markdown } = require('@storybook/blocks');
 
 const ADDON_ID = 'pds-description';
 const PANEL_ID = `${ADDON_ID}/panel`;
 
 const DescriptionPanel = () => {
-  const [description, setDescription] = useState('');
-  const [title, setTitle] = useState('');
+  const [description, setDescription] = React.useState('');
+  const [title, setTitle] = React.useState('');
 
-  useEffect(() => {
+  React.useEffect(() => {
     const channel = addons.getChannel();
-    
+
     const updateDescription = (data) => {
       setTitle(data.title || '');
       setDescription(data.description || 'No description available.');
@@ -25,23 +25,23 @@ const DescriptionPanel = () => {
     };
   }, []);
 
-  return React.createElement('div', {
-    style: {
-      padding: '1rem',
-      height: '100%',
-      overflow: 'auto'
-    }
-  },
-    React.createElement('div', {
+  return React.createElement(
+    'div',
+    {
       style: {
-        marginBottom: '0.5rem'
+        padding: '1rem',
+        height: '100%',
+        overflow: 'auto'
       }
     },
-      React.createElement('strong', {
-        style: {
-          fontSize: '1rem'
-        }
-      }, title)
+    React.createElement(
+      'div',
+      { style: { marginBottom: '0.5rem' } },
+      React.createElement(
+        'strong',
+        { style: { fontSize: '1rem' } },
+        title
+      )
     ),
     React.createElement(Markdown, null, description)
   );
@@ -51,10 +51,11 @@ addons.register(ADDON_ID, () => {
   addons.add(PANEL_ID, {
     type: types.PANEL,
     title: 'Description',
-    render: ({ active }) => {
-      return React.createElement(AddonPanel, { active },
+    render: ({ active }) =>
+      React.createElement(
+        AddonPanel,
+        { active },
         React.createElement(DescriptionPanel)
-      );
-    }
+      )
   });
 });

package/.storybook/addons/html-preview/constants.cjs

@@ -0,0 +1,12 @@
+const ADDON_ID = 'html-preview';
+const PANEL_ID = `${ADDON_ID}/panel`;
+
+const EVENTS = {
+  UPDATE_HTML: `${ADDON_ID}/updateHtml`
+};
+
+module.exports = {
+  ADDON_ID,
+  PANEL_ID,
+  EVENTS,
+};

package/.storybook/addons/html-preview/register.cjs

@@ -0,0 +1,41 @@
+const React = require('react');
+const { addons, types } = require('@storybook/manager-api');
+const { ADDON_ID, PANEL_ID } = require('./constants.cjs');
+
+const PanelLoader = ({ active }) => {
+  const [PanelComponent, setPanelComponent] = React.useState(null);
+
+  React.useEffect(() => {
+    let mounted = true;
+
+    import('./Panel.jsx')
+      .then((mod) => {
+        if (!mounted) return;
+        const Resolved = mod.Panel || mod.default || null;
+        if (Resolved) setPanelComponent(() => Resolved);
+      })
+      .catch((error) => {
+        console.error('Failed to load html-preview Panel:', error);
+      });
+
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  if (!PanelComponent) return null;
+  return React.createElement(PanelComponent, { active });
+};
+
+addons.register(ADDON_ID, () => {
+  addons.add(PANEL_ID, {
+    type: types.PANEL,
+    title: 'Code',
+    render: ({ active, key }) =>
+      React.createElement(
+        'div',
+        { style: { display: active ? 'block' : 'none', height: '100%' } },
+        React.createElement(PanelLoader, { key, active })
+      )
+  });
+});

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

@@ -1,7 +1,31 @@
-import React from 'react';
-import { addons, types } from '@storybook/manager-api';
-import { ADDON_ID, PANEL_ID } from './constants.js';
-import { Panel } from './Panel.jsx';
+const React = require('react');
+const { addons, types } = require('@storybook/manager-api');
+const { ADDON_ID, PANEL_ID } = require('./constants.cjs');
+
+const PanelLoader = ({ active }) => {
+  const [PanelComponent, setPanelComponent] = React.useState(null);
+
+  React.useEffect(() => {
+    let mounted = true;
+
+    import('./Panel.jsx')
+      .then((mod) => {
+        if (!mounted) return;
+        const Resolved = mod.Panel || mod.default || null;
+        if (Resolved) setPanelComponent(() => Resolved);
+      })
+      .catch((error) => {
+        console.error('Failed to load html-preview Panel:', error);
+      });
+
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  if (!PanelComponent) return null;
+  return React.createElement(PanelComponent, { active });
+};
 
 addons.register(ADDON_ID, () => {
   addons.add(PANEL_ID, {
@@ -11,7 +35,7 @@ addons.register(ADDON_ID, () => {
       React.createElement(
         'div',
         { style: { display: active ? 'block' : 'none', height: '100%' } },
-        React.createElement(Panel, { key, active })
+        React.createElement(PanelLoader, { key, active })
       )
   });
 });

package/.storybook/addons/package.json

@@ -1,3 +1,3 @@
 {
-  "type": "commonjs"
+  "type": "module"
 }

package/.storybook/addons/pds-configurator/SearchTool.cjs

@@ -0,0 +1,47 @@
+const React = require('react');
+const { useChannel } = require('@storybook/manager-api');
+const { IconButton } = require('@storybook/components');
+const { EVENTS } = require('./constants.cjs');
+
+const SearchTool = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const channel = useChannel({
+    [EVENTS.QUERY_EXECUTED + '_RESPONSE']: (data) => {
+      console.log('Query response received:', data);
+    }
+  });
+
+  const toggleSearch = React.useCallback(() => {
+    const newState = !isOpen;
+    console.log('Toggle search - current isOpen:', isOpen, 'newState:', newState);
+
+    if (newState) {
+      const searchQuery = prompt('Enter search query (e.g., "primary color", "spacing", "button"):');
+      if (searchQuery) {
+        console.log('Executing search query:', searchQuery);
+        channel.emit(EVENTS.QUERY_EXECUTED, { query: searchQuery });
+      }
+    }
+
+    setIsOpen(newState);
+  }, [isOpen, channel]);
+
+  return React.createElement(
+    IconButton,
+    {
+      key: 'search-tool',
+      active: isOpen,
+      title: 'Quick Search PDS',
+      onClick: toggleSearch
+    },
+    React.createElement(
+      'svg',
+      { width: '14', height: '14', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2' },
+      React.createElement('circle', { cx: '11', cy: '11', r: '8' }),
+      React.createElement('path', { d: 'm21 21-4.35-4.35' })
+    )
+  );
+};
+
+module.exports = { SearchTool };

package/.storybook/addons/pds-configurator/Tool.cjs

@@ -0,0 +1,36 @@
+const React = require('react');
+const { useChannel } = require('@storybook/manager-api');
+const { IconButton } = require('@storybook/components');
+const { EVENTS } = require('./constants.cjs');
+
+const Tool = () => {
+  const emit = useChannel({
+    [EVENTS.DESIGN_UPDATED]: (data) => {
+      console.log('Design updated in addon:', data);
+    }
+  });
+
+  const openConfigurator = React.useCallback(() => {
+    console.log('Opening PDS Configurator');
+    emit(EVENTS.OPEN_CONFIGURATOR);
+  }, [emit]);
+
+  return React.createElement(
+    IconButton,
+    {
+      key: 'configurator-toggle',
+      title: 'Open PDS Configurator',
+      onClick: openConfigurator
+    },
+    React.createElement(
+      'svg',
+      { width: '14', height: '14', viewBox: '0 0 24 24', fill: 'currentColor' },
+      React.createElement('path', {
+        d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'
+      }),
+      React.createElement('circle', { cx: '12', cy: '12', r: '3' })
+    )
+  );
+};
+
+module.exports = { Tool };

package/.storybook/addons/pds-configurator/constants.cjs

@@ -0,0 +1,16 @@
+const ADDON_ID = 'pds-configurator';
+const TOOL_ID = `${ADDON_ID}/tool`;
+const PANEL_ID = `${ADDON_ID}/panel`;
+
+const EVENTS = {
+  OPEN_CONFIGURATOR: `${ADDON_ID}/openConfigurator`,
+  DESIGN_UPDATED: `${ADDON_ID}/designUpdated`,
+  QUERY_EXECUTED: `${ADDON_ID}/queryExecuted`,
+};
+
+module.exports = {
+  ADDON_ID,
+  TOOL_ID,
+  PANEL_ID,
+  EVENTS,
+};

package/.storybook/addons/pds-configurator/register.cjs

@@ -0,0 +1,12 @@
+const { addons, types } = require('@storybook/manager-api');
+const { ADDON_ID, TOOL_ID } = require('./constants.cjs');
+const { Tool } = require('./Tool.cjs');
+
+addons.register(ADDON_ID, () => {
+  addons.add(TOOL_ID, {
+    type: types.TOOL,
+    title: 'PDS Configurator',
+    match: ({ viewMode, tabId }) => !tabId && (viewMode === 'story' || viewMode === 'docs'),
+    render: Tool
+  });
+});

package/.storybook/addons/pds-configurator/register.js

@@ -1,9 +1,8 @@
-import { addons, types } from '@storybook/manager-api';
-import { ADDON_ID, TOOL_ID } from './constants.js';
-import { Tool } from './Tool.js';
+const { addons, types } = require('@storybook/manager-api');
+const { ADDON_ID, TOOL_ID } = require('./constants.cjs');
+const { Tool } = require('./Tool.cjs');
 
 addons.register(ADDON_ID, () => {
-  // Register PDS Configurator button
   addons.add(TOOL_ID, {
     type: types.TOOL,
     title: 'PDS Configurator',

package/.storybook/main.js

@@ -29,9 +29,9 @@ const config = {
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    './addons/pds-configurator/register.js',
-    './addons/html-preview/register.js',
-    './addons/description/register.js'
+    './addons/pds-configurator/register.cjs',
+    './addons/html-preview/register.cjs',
+    './addons/description/register.cjs'
   ],
   framework: {
     name: '@storybook/web-components-vite',

package/dist/pds-reference.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-02-04T07:31:00.131Z",
+  "generatedAt": "2026-02-04T08:03:20.323Z",
   "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.5.44",
+  "version": "0.5.46",
   "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.44"
+    "@pure-ds/core": "^0.5.46"
   },
   "dependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",