@pure-ds/storybook 0.4.16 → 0.4.19

package/.storybook/manager.js

@@ -25,6 +25,67 @@ let categoryIndex = new Map();
 /** @type {Map<string, Set<string>>} Tag to items that have that tag */
 let tagIndex = new Map();
 
+/** @type {Set<string>} All searchable words from ontology (for prefix matching) */
+let allWords = new Set();
+
+/** @type {Map<string, string[]>} Story ID to its pds.tags (extracted from story parameters) */
+let storyTagsIndex = new Map();
+
+/**
+ * Build story tags index from the storyIndex in pds-reference.json
+ * This is populated during loadOntology() from the pre-built reference data
+ */
+function buildStoryTagsIndex() {
+  if (!referenceData?.storyIndex) return;
+  
+  let tagCount = 0;
+  
+  // Helper to convert title to Storybook ID format
+  // "About PDS/What Is PDS" → "about-pds-what-is-pds"
+  const titleToId = (title) => {
+    return title
+      .toLowerCase()
+      .replace(/[^a-z0-9/\s-]/g, '')
+      .replace(/[\s/]+/g, '-')
+      .replace(/-+/g, '-')
+      .replace(/^-|-$/g, '');
+  };
+  
+  Object.entries(referenceData.storyIndex).forEach(([slug, entry]) => {
+    if (!Array.isArray(entry.tags) || entry.tags.length === 0) return;
+    
+    const normalizedTags = entry.tags.map(t => String(t).toLowerCase());
+    
+    // Compute the Storybook component ID from the title
+    const componentId = entry.storyTitle ? titleToId(entry.storyTitle) : slug;
+    
+    // Index by multiple possible ID formats
+    const idsToIndex = [
+      slug.toLowerCase(),
+      componentId,
+      // Also add story variant IDs if we have story names
+      ...(entry.stories || []).map(s => s.id?.toLowerCase()).filter(Boolean)
+    ];
+    
+    idsToIndex.forEach(id => {
+      if (id) {
+        storyTagsIndex.set(id, normalizedTags);
+      }
+    });
+    
+    // Add tags to allWords for prefix matching
+    normalizedTags.forEach(tag => {
+      allWords.add(tag);
+      // Add individual words from multi-word tags
+      tag.split(/\s+/).forEach(word => {
+        if (word.length >= 2) allWords.add(word);
+      });
+    });
+    
+    tagCount += normalizedTags.length;
+  });
+}
+
 /**
  * Load ontology data from pds-reference.json
  * This file is generated by build-pds-reference.mjs from the SSoT (pds-ontology.js)
@@ -38,16 +99,11 @@ async function loadOntology() {
     if (!response.ok) throw new Error(`HTTP ${response.status}`);
     referenceData = await response.json();
     buildIndices();
-    console.log('%c🎨 PDS Ontology loaded from SSoT', 'color: #029cfd; font-weight: bold', {
-      searchRelations: Object.keys(referenceData.ontologyData?.searchRelations || {}).length,
-      primitives: referenceData.ontologyData?.primitives?.length || 0,
-      components: referenceData.ontologyData?.components?.length || 0,
-      enhancements: referenceData.ontologyData?.enhancements?.length || 0
-    });
+    buildStoryTagsIndex();
     return referenceData;
   } catch (err) {
     console.warn('PDS Ontology: Failed to load pds-reference.json', err);
-    referenceData = { components: {}, ontologyData: {}, enhancements: [], tokens: {} };
+    referenceData = { components: {}, ontologyData: {}, enhancements: [], tokens: {}, storyIndex: {} };
     return referenceData;
   }
 }
@@ -202,13 +258,122 @@ function buildIndices() {
     });
   });
   
-  console.log('%c📚 Ontology indices built', 'color: #10b981', {
-    relations: relationIndex.size,
-    categories: categoryIndex.size,
-    tags: tagIndex.size
+  // ═══════════════════════════════════════════════════════════════════════════
+  // 6. Build allWords set for prefix matching
+  // Collect ALL words from all indices for comprehensive prefix search
+  // ═══════════════════════════════════════════════════════════════════════════
+  relationIndex.forEach((related, key) => {
+    allWords.add(key);
+    related.forEach(r => allWords.add(r));
+  });
+  categoryIndex.forEach((members, cat) => {
+    allWords.add(cat);
+    members.forEach(m => allWords.add(m));
+  });
+  tagIndex.forEach((items, tag) => {
+    allWords.add(tag);
+    items.forEach(i => allWords.add(i));
+  });
+  
+  // Add words from components
+  Object.values(referenceData.components || {}).forEach(comp => {
+    if (comp.tag) allWords.add(comp.tag.toLowerCase());
+    if (comp.displayName) allWords.add(comp.displayName.toLowerCase());
+    (comp.pdsTags || comp.ontology?.tags || []).forEach(t => allWords.add(t.toLowerCase()));
+  });
+  
+  // Add words from primitives
+  (od.primitives || []).forEach(p => {
+    if (p.id) allWords.add(p.id.toLowerCase());
+    if (p.name) allWords.add(p.name.toLowerCase());
+    (p.tags || []).forEach(t => allWords.add(t.toLowerCase()));
+  });
+  
+  // Add words from enhancements
+  (od.enhancements || []).forEach(e => {
+    if (e.id) allWords.add(e.id.toLowerCase());
+    if (e.name) allWords.add(e.name.toLowerCase());
+    if (e.selector) allWords.add(e.selector.replace(/[[\]]/g, '').toLowerCase());
+    (e.tags || []).forEach(t => allWords.add(t.toLowerCase()));
   });
 }
 
+/**
+ * Normalize a word to its singular form (simple English rules)
+ * Also returns the plural form so both directions match
+ * @param {string} word - Word to normalize
+ * @returns {string[]} - Array of [singular, plural] forms
+ */
+function normalizePlural(word) {
+  const w = word.toLowerCase();
+  const forms = new Set([w]);
+  
+  // Common irregular plurals
+  const irregulars = {
+    'children': 'child', 'child': 'children',
+    'people': 'person', 'person': 'people',
+    'men': 'man', 'man': 'men',
+    'women': 'woman', 'woman': 'women',
+    'mice': 'mouse', 'mouse': 'mice',
+    'feet': 'foot', 'foot': 'feet',
+    'teeth': 'tooth', 'tooth': 'teeth',
+    'geese': 'goose', 'goose': 'geese',
+    'indices': 'index', 'index': 'indices',
+    'matrices': 'matrix', 'matrix': 'matrices',
+    'vertices': 'vertex', 'vertex': 'vertices',
+    'data': 'datum', 'datum': 'data',
+    'media': 'medium', 'medium': 'media'
+  };
+  
+  if (irregulars[w]) {
+    forms.add(irregulars[w]);
+    return [...forms];
+  }
+  
+  // -ies → -y (e.g., utilities → utility)
+  if (w.endsWith('ies')) {
+    forms.add(w.slice(0, -3) + 'y');
+  }
+  // -y → -ies (e.g., utility → utilities)
+  if (w.endsWith('y') && !['ay', 'ey', 'oy', 'uy'].some(v => w.endsWith(v))) {
+    forms.add(w.slice(0, -1) + 'ies');
+  }
+  
+  // -es → base (e.g., boxes → box, classes → class)
+  if (w.endsWith('ses') || w.endsWith('xes') || w.endsWith('zes') || 
+      w.endsWith('ches') || w.endsWith('shes')) {
+    forms.add(w.slice(0, -2));
+  }
+  // Add -es for words ending in s, x, z, ch, sh
+  if (w.endsWith('s') || w.endsWith('x') || w.endsWith('z') || 
+      w.endsWith('ch') || w.endsWith('sh')) {
+    forms.add(w + 'es');
+  }
+  
+  // -ves → -f/-fe (e.g., leaves → leaf)
+  if (w.endsWith('ves')) {
+    forms.add(w.slice(0, -3) + 'f');
+    forms.add(w.slice(0, -3) + 'fe');
+  }
+  // -f/-fe → -ves
+  if (w.endsWith('f')) {
+    forms.add(w.slice(0, -1) + 'ves');
+  }
+  if (w.endsWith('fe')) {
+    forms.add(w.slice(0, -2) + 'ves');
+  }
+  
+  // Simple -s rule (most common)
+  if (w.endsWith('s') && w.length > 2 && !w.endsWith('ss')) {
+    forms.add(w.slice(0, -1)); // Remove trailing s
+  }
+  if (!w.endsWith('s')) {
+    forms.add(w + 's'); // Add trailing s
+  }
+  
+  return [...forms];
+}
+
 /**
  * Expand a search query using ontology indices
  * @param {string} query - User's search term
@@ -220,31 +385,69 @@ function expandQuery(query) {
   
   const terms = new Set([q]);
   
-  // 1. Check searchRelations (primary SSoT for relationships)
-  if (relationIndex.has(q)) {
-    relationIndex.get(q).forEach(t => terms.add(t));
-  }
+  // Add singular/plural forms of the query
+  const queryVariants = normalizePlural(q);
+  queryVariants.forEach(form => terms.add(form));
   
-  // 2. Check if query matches a category - expand to all category members
-  if (categoryIndex.has(q)) {
-    categoryIndex.get(q).forEach(t => terms.add(t));
-  }
+  // Helper: check index with all variants of a term
+  const checkIndexWithVariants = (index, variants, addRelated = true) => {
+    variants.forEach(variant => {
+      if (index.has(variant)) {
+        terms.add(variant);
+        if (addRelated) {
+          index.get(variant).forEach(t => {
+            terms.add(t);
+            // Also add plural/singular of related terms
+            normalizePlural(t).forEach(form => terms.add(form));
+          });
+        }
+      }
+    });
+  };
   
-  // 3. Check if query is a tag - expand to items with that tag
-  if (tagIndex.has(q)) {
-    tagIndex.get(q).forEach(t => terms.add(t));
-  }
+  // 1. Check searchRelations with all variants (primary SSoT for relationships)
+  checkIndexWithVariants(relationIndex, queryVariants);
+  
+  // 2. Check categories with all variants
+  checkIndexWithVariants(categoryIndex, queryVariants);
+  
+  // 3. Check tags with all variants
+  checkIndexWithVariants(tagIndex, queryVariants);
   
-  // 4. Partial matches: only for longer queries (3+ chars) to avoid over-matching
-  // Only add the matched key - NOT its relations (that would cause transitive pollution)
+  // 4. Partial/prefix matches for queries 3+ chars
+  // Find any indexed term that STARTS WITH the query (e.g., "notif" → "notification")
   if (q.length >= 3) {
+    // Check relation keys for prefix matches
     relationIndex.forEach((related, key) => {
-      // Only match if query is a prefix/suffix of key or vice versa
-      const isPrefix = key.startsWith(q) || q.startsWith(key);
-      const isSuffix = key.endsWith(q) || q.endsWith(key);
-      if (isPrefix || isSuffix) {
+      if (key.startsWith(q)) {
         terms.add(key);
-        // Don't add related terms here - that causes transitive expansion pollution
+        // Also add plural/singular variants of matched key
+        normalizePlural(key).forEach(form => terms.add(form));
+      }
+    });
+    
+    // Check category keys for prefix matches
+    categoryIndex.forEach((members, cat) => {
+      if (cat.startsWith(q)) {
+        terms.add(cat);
+        normalizePlural(cat).forEach(form => terms.add(form));
+      }
+      // Also check category members for prefix matches
+      members.forEach(member => {
+        if (member.startsWith(q)) {
+          terms.add(member);
+          normalizePlural(member).forEach(form => terms.add(form));
+        }
+      });
+    });
+    
+    // Check tag keys for prefix matches
+    tagIndex.forEach((items, tag) => {
+      if (tag.startsWith(q)) {
+        terms.add(tag);
+        normalizePlural(tag).forEach(form => terms.add(form));
+        // Also add the items that have this tag
+        items.forEach(item => terms.add(item));
       }
     });
   }
@@ -257,27 +460,65 @@ function expandQuery(query) {
       const name = comp.displayName?.toLowerCase();
       const tagWithoutPrefix = tag?.replace('pds-', '');
       
-      // Match if query equals or closely matches the component
-      if (tag === q || name === q || tagWithoutPrefix === q || 
-          tag?.includes(q) || name?.includes(q)) {
+      // Match if query equals, is prefix of, or closely matches the component
+      const matchesComponent = 
+        tag === q || name === q || tagWithoutPrefix === q ||
+        tag?.startsWith(q) || name?.startsWith(q) || tagWithoutPrefix?.startsWith(q) ||
+        tag?.includes(q) || name?.includes(q);
+        
+      if (matchesComponent) {
         terms.add(tag);
         terms.add(tagWithoutPrefix);
         terms.add(name);
-        // Don't add pdsTags - they're too generic and cause over-matching
       }
     });
   }
   
-  // 6. Enhancement selectors
+  // 6. Enhancement selectors - also check prefix matches
   (referenceData?.enhancements || []).forEach(e => {
     const sel = e.selector?.toLowerCase();
     const id = e.id?.toLowerCase();
-    if (sel?.includes(q) || id?.includes(q)) {
+    const name = e.name?.toLowerCase();
+    if (sel?.startsWith(q) || sel?.includes(q) || 
+        id?.startsWith(q) || id?.includes(q) ||
+        name?.startsWith(q) || name?.includes(q)) {
       terms.add(sel);
       terms.add(id);
+      terms.add(name);
     }
   });
   
+  // 7. Primitives - check for prefix matches in IDs and tags
+  (referenceData?.ontologyData?.primitives || []).forEach(p => {
+    const id = p.id?.toLowerCase();
+    const pTags = p.tags || [];
+    
+    if (id?.startsWith(q) || id?.includes(q)) {
+      terms.add(id);
+      normalizePlural(id).forEach(form => terms.add(form));
+    }
+    
+    pTags.forEach(t => {
+      const tLower = t.toLowerCase();
+      if (tLower.startsWith(q) || tLower.includes(q)) {
+        terms.add(tLower);
+        normalizePlural(tLower).forEach(form => terms.add(form));
+      }
+    });
+  });
+  
+  // 8. Global prefix matching against ALL indexed words
+  // This catches anything we might have missed above
+  if (q.length >= 3) {
+    allWords.forEach(word => {
+      if (word.startsWith(q) || word.includes(q)) {
+        terms.add(word);
+        // Also add plural/singular variants
+        normalizePlural(word).forEach(form => terms.add(form));
+      }
+    });
+  }
+  
   return Array.from(terms).filter(Boolean);
 }
 
@@ -291,15 +532,70 @@ function matchesOntology(item, expandedTerms) {
   if (!expandedTerms.length) return true;
   
   // Build searchable text from item properties
-  const searchableText = [
+  const searchableParts = [
     item.name,
     item.title,
     item.id,
     item.importPath
-  ].filter(Boolean).join(' ').toLowerCase();
+  ];
+  
+  // Include pre-indexed pds.tags for this story (from storyTagsIndex)
+  const storyId = item.id?.toLowerCase();
+  let foundTags = false;
+  
+  if (storyId) {
+    // Try exact match
+    if (storyTagsIndex.has(storyId)) {
+      searchableParts.push(...storyTagsIndex.get(storyId));
+      foundTags = true;
+    }
+    
+    // Try parent ID (for story variants like "about-pds-what-is-pds--whatispds")
+    const parentId = storyId.replace(/--[^-]+$/, '');
+    if (parentId !== storyId && storyTagsIndex.has(parentId)) {
+      searchableParts.push(...storyTagsIndex.get(parentId));
+      foundTags = true;
+    }
+    
+    // Try partial match - check if any indexed ID is contained in this story ID
+    if (!foundTags) {
+      for (const [indexedId, tags] of storyTagsIndex.entries()) {
+        if (storyId.includes(indexedId) || indexedId.includes(storyId)) {
+          searchableParts.push(...tags);
+          foundTags = true;
+          break; // Found a match, no need to continue
+        }
+      }
+    }
+  }
+  
+  const searchableText = searchableParts.filter(Boolean).join(' ').toLowerCase();
+  
+  // Split searchable text into words for prefix matching
+  // Include both space-separated and path-separated words (for IDs like "components-pds-icon")
+  const searchableWords = searchableText.split(/[\s\-_/]+/).filter(w => w.length > 0);
   
   // Match if ANY expanded term is found in the searchable text
-  return expandedTerms.some(term => searchableText.includes(term));
+  // Also check plural/singular variants of each term
+  return expandedTerms.some(term => {
+    // Direct substring match
+    if (searchableText.includes(term)) return true;
+    
+    // Check plural/singular variants
+    const variants = normalizePlural(term);
+    if (variants.some(variant => searchableText.includes(variant))) return true;
+    
+    // Prefix matching for terms 3+ chars (e.g., "notif" matches "notification")
+    if (term.length >= 3) {
+      if (searchableWords.some(word => word.startsWith(term))) return true;
+      // Also check variants as prefixes
+      if (variants.some(variant => 
+        variant.length >= 3 && searchableWords.some(word => word.startsWith(variant))
+      )) return true;
+    }
+    
+    return false;
+  });
 }
 
 // ═══════════════════════════════════════════════════════════════════════════
@@ -457,9 +753,6 @@ addons.register(ADDON_ID, (api) => {
     if (searchField.dataset.pdsHooked) return;
     searchField.dataset.pdsHooked = 'true';
     
-    console.log('%c🎨 PDS Ontology Search Active', 'color: #029cfd; font-weight: bold; font-size: 14px');
-    console.log('%cSearch expands via ontology relations. Try: "text", "form", "modal"', 'color: #999');
-    
     let debounceTimer;
     searchField.addEventListener('input', (e) => {
       clearTimeout(debounceTimer);
@@ -524,7 +817,7 @@ addons.register(ADDON_ID, (api) => {
   });
   mutationObserver.observe(document.body, { childList: true, subtree: true });
 
-  // Debug API
+  // Public API for programmatic search
   window.pdsOntology = {
     search: (query) => {
       const field = document.getElementById('storybook-explorer-searchfield');
@@ -542,12 +835,7 @@ addons.register(ADDON_ID, (api) => {
         field.dispatchEvent(new Event('input', { bubbles: true }));
       }
       applyFilter('');
-    },
-    data: () => referenceData,
-    relations: () => Object.fromEntries([...relationIndex].map(([k, v]) => [k, [...v]])),
-    categories: () => Object.fromEntries([...categoryIndex].map(([k, v]) => [k, [...v]])),
-    tags: () => Object.fromEntries([...tagIndex].map(([k, v]) => [k, [...v]])),
-    currentQuery: () => currentQuery
+    }
   };
 
   // ═══════════════════════════════════════════════════════════════════════════

package/.storybook/preview-head.html

@@ -1,11 +1,11 @@
-<!-- PDS runs in LIVE mode - styles are generated dynamically by Generator.applyStyles() -->
+<!-- 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 -->
+<!-- Import map for pds-form and other components that use #pds/lit -->
 <script type="importmap">
 {
   "imports": {

package/.storybook/preview.js

@@ -1328,7 +1328,7 @@ const preview = {
             'Enhancements',
             ['Mesh Gradients', 'Interactive States', 'Toggles', 'Dropdowns', 'Range Sliders', 'Required Fields'],
             'Components',
-            ['Pds Jsonform', 'Pds Icon', 'Pds Drawer', 'Pds Toaster', 'Pds Tabstrip', 'Pds Splitpanel', 'Pds Scrollrow', 'Pds Richtext', 'Pds Upload'],
+            ['pds-form', 'Pds Icon', 'Pds Drawer', 'Pds Toaster', 'Pds Tabstrip', 'Pds Splitpanel', 'Pds Scrollrow', 'Pds Richtext', 'Pds Upload'],
             'Reference'
           ],
           'About PDS',
@@ -1346,7 +1346,7 @@ const preview = {
           'Enhancements',
           ['Mesh Gradients', 'Interactive States', 'Toggles', 'Dropdowns', 'Range Sliders', 'Required Fields'],
           'Components',
-          ['Pds Jsonform', 'Pds Icon', 'Pds Drawer', 'Pds Toaster', 'Pds Tabstrip', 'Pds Splitpanel', 'Pds Scrollrow', 'Pds Richtext', 'Pds Upload'],
+          ['pds-form', 'Pds Icon', 'Pds Drawer', 'Pds Toaster', 'Pds Tabstrip', 'Pds Splitpanel', 'Pds Scrollrow', 'Pds Richtext', 'Pds Upload'],
           'Reference',
           '*'
         ]

package/README.md

@@ -1,4 +1,4 @@
-# PDS Storybook
+# PDS Storybook
 
 **Pure Design System** Storybook showcase with live configuration capabilities.
 
@@ -58,7 +58,7 @@ Web Components (`<pds-*>`):
 - `pds-upload` - File upload with preview
 - `pds-toaster` - Toast notifications
 - `pds-richtext` - Rich text editor (prefers `#showdown` import map; set `format="markdown"` to submit Markdown)
-- `pds-jsonform` - JSON Schema forms
+- `pds-form` - JSON Schema forms
 - `pds-splitpanel` - Resizable panes
 - `pds-scrollrow` - Horizontal scroll