kyd-shared-badge 0.3.106 → 0.3.108

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.106",
+  "version": "0.3.108",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/components/SkillsBubble.tsx

@@ -251,136 +251,143 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
 
   const columnComponent = (entry: { label: string; years?: number; presence?: string; presenceTypes?: Array<'certified' | 'observed' | 'self-reported'>; sources?: string[] } | '', idx: number, isLeft: boolean) => {
     return (
-      <div key={idx} className="flex items-stretch justify-between gap-3 min-w-0">
-        <div className="flex flex-col min-w-0 justify-center">
-          <div className="flex items-center gap-2 min-w-0 text-lg text-[var(--text-main)]">
-            {entry ? <span className="shrink-0 opacity-70 ">{idx + (isLeft ? 1 : 6)}.</span> : <span className="opacity-0 whitespace-nowrap">\u00A0</span>}
-            {entry && typeof entry !== 'string' ? (
-              <span className="truncate" title={entry.label}>
-                {entry.label}
-                {/* Evidence count bullet */}
-                {(() => {
-                  const meta = skillsMeta?.[entry.label];
-                  const count = Number((meta as any)?.evidenceCount || 0);
-                  return count > 0 ? (
-                    <>
-                      {' '}<span className="opacity-60">•</span>{' '}
-                      <span
-                        className="underline decoration-dotted underline-offset-2 cursor-help opacity-80"
-                        onMouseEnter={(e) =>
-                          showLegendTooltipAt(
-                            e.currentTarget,
-                            'Evidence count',
-                            'Total number of sources across observed, certified, and self-reported evidence for this skill.'
-                          )
+      <div key={idx} className="flex justify-between gap-3 min-w-0">
+        <div className="flex flex-row w-1/2 items-start gap-8">
+          {entry ? <span className="shrink-0 opacity-70 text-base items-center flex h-full">{idx + (isLeft ? 1 : 6)}.</span> : <span className="opacity-0 whitespace-nowrap">\u00A0</span>}
+
+          <div className="flex flex-col min-w-0 justify-center leading-tight">
+            <div className="flex items-center gap-2 min-w-0 text-lg text-[var(--text-main)]">
+              {entry && typeof entry !== 'string' ? (
+                <span className="truncate font-semibold" title={entry.label}>
+                  {entry.label}
+                  {/* Evidence count bullet */}
+                  {(() => {
+                    console.log('entry', entry);
+                    const meta = skillsMeta?.[entry.label];
+                    const count = Number((meta as any)?.evidenceCount || 0);
+                    return count > 0 ? (
+                      <>
+                        {' '}<span className="opacity-60">•</span>{' '}
+                        <span
+                          className="cursor-help opacity-80"
+                          onMouseEnter={(e) =>
+                            showLegendTooltipAt(
+                              e.currentTarget,
+                              'Evidence count',
+                              'Total number of sources across observed, certified, and self-reported evidence for this skill.'
+                            )
+                          }
+                          onMouseLeave={hideLegendTooltip}
+                        >
+                          {count}
+                        </span>
+                      </>
+                    ) : null;
+                  })()}
+                </span>
+              ) : (
+                <span className="truncate">{typeof entry === 'string' ? entry : '\u00A0'}</span>
+              )}
+            </div>
+            <span className="text-xs text-[var(--text-secondary)] flex flex-wrap items-center gap-1">
+              {entry && typeof entry !== 'string' ? (
+                <>
+                  <span
+                    className="cursor-help"
+                    onMouseEnter={(e) => showLegendTooltipAt(e.currentTarget, 'Sources', 'The source where we observed this skill.')}
+                    onMouseLeave={hideLegendTooltip}
+                  >
+                    Sources:
+                  </span>
+                  {Array.isArray((entry as any).sources) && (entry as any).sources.length > 0 ? (
+                    (() => {
+                      const sourceProviders: string[] = ((entry as any).sources as string[]).map((src: string) => {
+                        const str = String(src);
+                        let provider = str.split(':')[0] || '';
+                        if (!provider || provider === str) {
+                          // If split(':')[0] didn't find a delimiter or provider (i.e., no ':'), try split('.')
+                          provider = str.split('.')[0] || '';
                         }
-                        onMouseLeave={hideLegendTooltip}
-                      >
-                        {count}
-                      </span>
-                    </>
-                  ) : null;
-                })()}
+                        return provider.toLowerCase();
+                      });
+                      const uniqueProviders = Array.from(new Set<string>(sourceProviders));
+                      const filteredProviders = uniqueProviders.filter((provider) =>
+                        providers.includes(provider.toLowerCase())
+                      );
+                      return filteredProviders.map((provider) => (
+                        <span
+                          key={provider}
+                          onMouseEnter={(e) =>
+                            showLegendTooltipAt(
+                              e.currentTarget,
+                              undefined,
+                              getProviderDisplayName(provider)
+                            )
+                          }
+                          onMouseLeave={hideLegendTooltip}
+                          className="inline-flex items-center"
+                        >
+                          <ProviderIcon name={provider} />
+                        </span>
+                      ));
+                    })()
+                  ) : null}
+                </>
+              ) : (
+                <span className="opacity-0 whitespace-nowrap">'\u00A0'</span>
+              )}
+            </span>
+          </div>
+        </div>
+        <div 
+          className="flex flex-col items-end leading-tight h-full justify-start text-base"
+        >
+          <div className="pb-1">
+            {entry && typeof entry !== 'string' && entry.years ? (
+              <span
+                className="whitespace-nowrap text-[var(--text-secondary)] cursor-help"
+                onMouseEnter={(e) => {
+                  const copy = experienceLegendTooltip();
+                  showLegendTooltipAt(e.currentTarget, copy.title, copy.body);
+                }}
+                onMouseLeave={hideLegendTooltip}
+              >
+                {`${entry.years} Years`}
               </span>
             ) : (
-              <span className="truncate">{typeof entry === 'string' ? entry : '\u00A0'}</span>
+              <span className="opacity-0 whitespace-nowrap text-[var(--text-secondary)]">0 Years</span>
             )}
           </div>
-          <span className="text-xs text-[var(--text-secondary)] flex flex-wrap items-center gap-1">
-            {entry && typeof entry !== 'string' ? (
-              <>
-                <span
-                  className="cursor-help"
-                  onMouseEnter={(e) => showLegendTooltipAt(e.currentTarget, 'Sources', 'The source where we observed this skill.')}
-                  onMouseLeave={hideLegendTooltip}
-                >
-                  Sources:
-                </span>
-                {Array.isArray((entry as any).sources) && (entry as any).sources.length > 0 ? (
-                  (() => {
-                    const sourceProviders: string[] = ((entry as any).sources as string[]).map((src: string) => {
-                      const str = String(src);
-                      let provider = str.split(':')[0] || '';
-                      if (!provider || provider === str) {
-                        // If split(':')[0] didn't find a delimiter or provider (i.e., no ':'), try split('.')
-                        provider = str.split('.')[0] || '';
-                      }
-                      return provider.toLowerCase();
-                    });
-                    const uniqueProviders = Array.from(new Set<string>(sourceProviders));
-                    const filteredProviders = uniqueProviders.filter((provider) =>
-                      providers.includes(provider.toLowerCase())
-                    );
-                    return filteredProviders.map((provider) => (
-                      <span
-                        key={provider}
-                        onMouseEnter={(e) =>
-                          showLegendTooltipAt(
-                            e.currentTarget,
-                            undefined,
-                            getProviderDisplayName(provider)
-                          )
-                        }
-                        onMouseLeave={hideLegendTooltip}
-                        className="inline-flex items-center"
-                      >
-                        <ProviderIcon name={provider} />
-                      </span>
-                    ));
-                  })()
-                ) : null}
-              </>
-            ) : (
-              <span className="opacity-0 whitespace-nowrap">'\u00A0'</span>
-            )}
-          </span>
-        </div>
-        {entry && typeof entry !== 'string' ? (
-          <div 
-            className="flex flex-col items-end leading-tight h-full justify-start text-base"
-          >
-            <div className="pb-1">
-              {entry.years ? (
-                <span
-                  className="whitespace-nowrap text-[var(--text-secondary)] cursor-help"
-                  onMouseEnter={(e) => {
-                    const copy = experienceLegendTooltip();
-                    showLegendTooltipAt(e.currentTarget, copy.title, copy.body);
-                  }}
-                  onMouseLeave={hideLegendTooltip}
-                >
-                  {`${entry.years} Years`}
-                </span>
-              ) : (
-                <span className="opacity-0 whitespace-nowrap text-[var(--text-secondary)]">0 Years</span>
-              )}
-            </div>
-            <div
-              onMouseEnter={(e) => {
+          <div
+            onMouseEnter={(e) => {
+              if (entry && typeof entry !== 'string') {
                 const copy = presenceLegendTooltip();
                 showLegendTooltipAt(e.currentTarget, undefined, copy.body);
-              }}
-              onMouseLeave={hideLegendTooltip}
-              className="pt-1"
-            >
-              {(() => {
-              const types = Array.isArray(entry.presenceTypes) ? entry.presenceTypes : (entry.presence ? [String(entry.presence) as any] : []);
-              const hasAny = types.length > 0;
-              return hasAny ? (
-                <div
-                  className="flex items-center gap-1"
-                  
-                >
-                  {types.map((t) => (
-                    <span key={t} className="inline-block h-2 w-2 rounded-full" style={{ background: presenceColor(t) }} />
-                  ))}
-                </div>
-              ) : <span className="opacity-0 whitespace-nowrap">.</span>;
+              }
+            }}
+            onMouseLeave={(e) => {
+              if (entry && typeof entry !== 'string') hideLegendTooltip();
+            }}
+            className="pt-1"
+          >
+            {(() => {
+              if (entry && typeof entry !== 'string') {
+                const types = Array.isArray(entry.presenceTypes) ? entry.presenceTypes : (entry.presence ? [String(entry.presence) as any] : []);
+                const hasAny = types.length > 0;
+                return hasAny ? (
+                  <div
+                    className="flex items-center gap-1"
+                  >
+                    {types.map((t) => (
+                      <span key={t} className="inline-block h-2 w-2 rounded-full" style={{ background: presenceColor(t) }} />
+                    ))}
+                  </div>
+                ) : <span className="opacity-0 whitespace-nowrap">.</span>;
+              }
+              return <span className="opacity-0 whitespace-nowrap">.</span>;
             })()}
-            
-            </div>
           </div>
-        ) : null}
+        </div>
       </div>
     )
   }
@@ -474,7 +481,7 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
               </span>
             ) : null}
           </div>
-          <div className="grid grid-cols-2 gap-x-8 text-xs" style={{ color: 'var(--text-secondary)', minHeight: 250 }}>
+          <div className="grid grid-cols-2 gap-x-20 text-xs" style={{ color: 'var(--text-secondary)', minHeight: 250 }}>
             <div className="grid gap-3">
               {leftColumnGrid.map((entry, idx) => (
                 columnComponent(entry, idx, true)