kyd-shared-badge 0.3.35 → 0.3.36

package/src/components/CategoryBars.tsx

@@ -67,11 +67,21 @@ const CategoryBars: React.FC<CategoryBarsProps> = ({
           const hasTarget = typeof targetRaw === 'number' && isFinite(targetRaw);
           const targetClamp = hasTarget ? Math.max(0, Math.min(100, Math.round(targetRaw as number))) : 0;
           const targetWidth = targetClamp / 2; // same scale as fillWidth
+          const handleClick = (e: React.MouseEvent) => {
+            // Navigate to Appendix -> Skills category anchor
+            try {
+              if (typeof window !== 'undefined') {
+                const anchor = `#appendix-skills-cat-${encodeURIComponent(category.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, ''))}`;
+                const url = `#appendix${anchor}`;
+                window.location.hash = url;
+              }
+            } catch {}
+          };
           return (
             <div key={category} className="first:pt-0 group relative">
-              <div className={'font-semibold mb-1'} style={{ color: 'var(--text-main)' }}>
+              <button type="button" onClick={handleClick} className={'font-semibold mb-1 underline-offset-2 hover:underline text-left'} style={{ color: 'var(--text-main)' }}>
                 {category}
-              </div>
+              </button>
               <div className="relative">
                 <div
                   className="w-full rounded-full overflow-hidden relative"
@@ -80,6 +90,9 @@ const CategoryBars: React.FC<CategoryBarsProps> = ({
                     background: 'transparent',
                     outline: '1px solid var(--icon-button-secondary)',
                   }}
+                  onClick={handleClick}
+                  role={'button'}
+                  aria-label={`Jump to ${category} in Appendix`}
                 >
                   {/* signed fill originating from center */}
                   <div className="absolute top-0 h-full" style={{ left, width: `${fillWidth}%`, backgroundColor: isNegative ? `var(--status-negative, ${red})` : `var(--status-positive, ${green})` }} />

package/src/components/Skills.tsx

@@ -335,10 +335,19 @@ const Skills = ({ skillsCategoryRadar, headless }: { skillsMatrix?: SkillsMatrix
               <div ref={footprintLegendRef} className={'kyd-avoid-break'} style={{ position: 'relative', breakInside: 'avoid', pageBreakInside: 'avoid' as unknown as undefined }}>
                 <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-1">
                   {legendData.map((item, idx) => (
-                    <div
+                    <button
                       key={idx}
-                      className="flex items-center gap-2 text-xs"
-                      style={{ color: 'var(--text-secondary)' }}
+                      className="flex items-center gap-2 text-xs text-left hover:underline underline-offset-2"
+                      style={{ color: 'var(--text-secondary)', background: 'transparent' }}
+                      onClick={() => {
+                        try {
+                          if (typeof window !== 'undefined') {
+                            const anchor = `#appendix-skills-cat-${encodeURIComponent(item.label.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, ''))}`;
+                            const url = `#appendix${anchor}`;
+                            window.location.hash = url;
+                          }
+                        } catch {}
+                      }}
                       onMouseEnter={(e) => {
                         const rect = footprintLegendRef.current?.getBoundingClientRect();
                         if (!rect) return;
@@ -362,7 +371,7 @@ const Skills = ({ skillsCategoryRadar, headless }: { skillsMatrix?: SkillsMatrix
                       <span className={'inline-block h-2 w-2 rounded-full'} style={{ backgroundColor: 'var(--text-secondary)', flexShrink: 0 }} />
                       <span className="truncate">{item.label}</span>
                       <span className="ml-auto opacity-80">{item.percent}%</span>
-                    </div>
+                    </button>
                   ))}
                 </div>
                 {!headless && <TooltipBox state={footprintLegendTooltip} />}

package/src/components/SkillsAppendixTable.tsx

@@ -15,8 +15,9 @@ const SkillsAppendixTable = ({ skillsAll }: { skillsAll?: SkillsAll }) => {
   useEffect(() => {
     const flash = () => {
       const hash = typeof window !== 'undefined' ? window.location.hash : '';
-      if (!hash || !hash.startsWith('#appendix-skills-')) return;
-      const id = hash.slice(1);
+      if (!hash) return;
+      // Support skill rows and category headers
+      const id = hash.startsWith('#') ? hash.slice(1) : hash;
       const el = document.getElementById(id) as HTMLElement | null;
       if (!el) return;
       const originalBg = el.style.backgroundColor;
@@ -32,48 +33,70 @@ const SkillsAppendixTable = ({ skillsAll }: { skillsAll?: SkillsAll }) => {
   }, []);
 
   if (!rows.length) return null;
+  // Group rows by category; skills can be in multiple categories
+  const groupMap: Record<string, SkillRow[]> = {};
+  const UNCATEGORIZED = 'Uncategorized';
+  for (const r of rows) {
+    const cats = Array.isArray((r as any).categories) && (r as any).categories.length > 0 ? (r as any).categories as string[] : [UNCATEGORIZED];
+    for (const c of cats) {
+      const key = c || UNCATEGORIZED;
+      if (!groupMap[key]) groupMap[key] = [];
+      groupMap[key].push(r);
+    }
+  }
+  const orderedCategories = Object.keys(groupMap).sort((a, b) => {
+    if (a === UNCATEGORIZED) return 1;
+    if (b === UNCATEGORIZED) return -1;
+    return a.localeCompare(b);
+  });
+
   return (
-    <div id="appendix-skills" className="mt-4">
-      <div className={'overflow-auto rounded-lg border'} style={{ borderColor: 'var(--icon-button-secondary)' }}>
-        <table className="min-w-full text-sm">
-          <thead>
-            <tr style={{ backgroundColor: 'var(--content-card-background)' }}>
-              <th className="text-left p-3" style={{ color: 'var(--text-secondary)' }}>Skill</th>
-              <th className="text-left p-3" style={{ color: 'var(--text-secondary)' }}>Observed</th>
-              <th className="text-left p-3" style={{ color: 'var(--text-secondary)' }}>Self-reported</th>
-              <th className="text-left p-3" style={{ color: 'var(--text-secondary)' }}>Certified</th>
-            </tr>
-          </thead>
-          <tbody>
-            {rows.map((row, idx: number) => (
-              <tr id={`appendix-skills-${slugify(row.name)}`} key={idx} className="border-t" style={{ borderColor: 'var(--icon-button-secondary)' }}>
-                <td className="p-3" style={{ color: 'var(--text-main)' }}>{row.name}</td>
-                {(['observed','self_reported','certified'] as const).map((b) => {
-                  const bucket = row[b];
-                  const present = !!bucket.present;
-                  const dot = present ? green : 'var(--icon-button-secondary)';
-                  const ev = bucket.evidence;
-                  const sources = (bucket.sources || []).slice(0,4);
-                  return (
-                    <td key={b} className="p-3 align-top" style={{ color: 'var(--text-secondary)' }}>
-                      <div className="flex items-start gap-2">
-                        <div className={'mt-1 rounded-full'} style={{ backgroundColor: dot, minHeight: '8px', minWidth: '8px', height: '8px', width: '8px', flexShrink: 0 }} />
-                        <div>
-                          {(ev || (sources && sources.length > 0)) && (
-                            <div className={'text-xs mt-1'} style={{ color: 'var(--text-secondary)' }}>
-                              {ev ? <div>{ev}</div> : null}
+    <div id="appendix-skills" className="mt-4 space-y-8">
+      {orderedCategories.map((cat) => (
+        <div key={cat}>
+          <h5 id={`appendix-skills-cat-${slugify(cat)}`} className={'text-base font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>{cat}</h5>
+          <div className={'overflow-auto rounded-lg border'} style={{ borderColor: 'var(--icon-button-secondary)' }}>
+            <table className="min-w-full text-sm">
+              <thead>
+                <tr style={{ backgroundColor: 'var(--content-card-background)' }}>
+                  <th className="text-left p-3" style={{ color: 'var(--text-secondary)' }}>Skill</th>
+                  <th className="text-left p-3" style={{ color: 'var(--text-secondary)' }}>Observed</th>
+                  <th className="text-left p-3" style={{ color: 'var(--text-secondary)' }}>Self-reported</th>
+                  <th className="text-left p-3" style={{ color: 'var(--text-secondary)' }}>Certified</th>
+                </tr>
+              </thead>
+              <tbody>
+                {groupMap[cat].map((row, idx: number) => (
+                  <tr id={`appendix-skills-${slugify(row.name)}`} key={`${cat}-${idx}`} className="border-t" style={{ borderColor: 'var(--icon-button-secondary)' }}>
+                    <td className="p-3" style={{ color: 'var(--text-main)' }}>{row.name}</td>
+                    {(['observed','self_reported','certified'] as const).map((b) => {
+                      const bucket = row[b];
+                      const present = !!bucket.present;
+                      const dot = present ? green : 'var(--icon-button-secondary)';
+                      const ev = bucket.evidence;
+                      const sources = (bucket.sources || []).slice(0,4);
+                      return (
+                        <td key={b} className="p-3 align-top" style={{ color: 'var(--text-secondary)' }}>
+                          <div className="flex items-start gap-2">
+                            <div className={'mt-1 rounded-full'} style={{ backgroundColor: dot, minHeight: '8px', minWidth: '8px', height: '8px', width: '8px', flexShrink: 0 }} />
+                            <div>
+                              {(ev || (sources && sources.length > 0)) && (
+                                <div className={'text-xs mt-1'} style={{ color: 'var(--text-secondary)' }}>
+                                  {ev ? <div>{ev}</div> : null}
+                                </div>
+                              )}
                             </div>
-                          )}
-                        </div>
-                      </div>
-                    </td>
-                  );
-                })}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
+                          </div>
+                        </td>
+                      );
+                    })}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      ))}
     </div>
   );
 };

package/src/index.ts

@@ -1,5 +1,6 @@
 export * from './types';
 export { default as SharedBadgeDisplay } from './SharedBadgeDisplay';
+export { default as PrintableBadgeDisplay } from './PrintableBadgeDisplay';
 export { default as ChatWindowStreaming } from './chat/ChatWindowStreaming';
 export { default as ChatWidget } from './chat/ChatWidget';
 export * from './utils/date';

package/src/types.ts

@@ -416,6 +416,8 @@ export interface SkillRow {
   observed: SkillBucket;
   self_reported: SkillBucket;
   certified: SkillBucket;
+  // optional list of skill categories from backend
+  categories?: string[];
 }
 
 export interface SkillsMatrix {