kyd-shared-badge 0.3.23 → 0.3.24

package/package.json

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

package/src/SharedBadgeDisplay.tsx

@@ -317,7 +317,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
                 <div className="pt-8 border-t kyd-avoid-break" style={{ borderColor: 'var(--icon-button-secondary)'}}>
                   <h3 className={'text-xl font-bold mb-3 kyd-keep-with-next'} style={{ color: 'var(--text-main)' }}>KYD Technical - Skills Insights</h3>
                   <div className={'prose prose-sm max-w-none mb-6 space-y-4'} style={{ color: 'var(--text-secondary)' }}>
-                    <Skills skillsMatrix={skillsMatrix} skillsCategoryRadar={graphInsights?.skillsCategoryRadar} />
+                    <Skills skillsMatrix={skillsMatrix} skillsCategoryRadar={graphInsights?.skillsCategoryRadar} headless={isHeadless} />
                   </div>
                 </div>
               </Reveal>
@@ -515,6 +515,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
                       searchedAt={updatedAt}
                       developerName={developerName || 'this developer'}
                       genreMapping={genreMapping as Record<string, string[]>}
+                      headless={isHeadless}
                     />
                   </div>
                 </Reveal>
@@ -542,6 +543,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
                               sources={useDetailed ? detailed : dedup}
                               searchedAt={updatedAt}
                               developerName={developerName || 'this developer'}
+                              headless={isHeadless}
                           />
                       );
                   })()}

package/src/components/AppendixTables.tsx

@@ -39,6 +39,7 @@ interface AppendixTableProps {
     developerName: string;
     // Used for business_rules: map genres (e.g., Technical/Risk) to category arrays
     genreMapping?: Record<string, string[]>;
+    headless?: boolean;
 }
 
 const SanctionsRow = ({
@@ -48,6 +49,7 @@ const SanctionsRow = ({
     onToggle,
     expanded,
     colSpan,
+    headless,
 }: {
     source: SanctionSource;
     searchedAt: string;
@@ -55,13 +57,14 @@ const SanctionsRow = ({
     onToggle: () => void;
     expanded: boolean;
     colSpan: number;
+    headless?: boolean;
 }) => (
     <>
         <tr className={'transition-colors'} style={source.matched ? { backgroundColor: 'rgba(236,102,98,0.08)' } : undefined}>
             <td className={'px-4 py-4 whitespace-nowrap align-top text-sm font-medium'} style={{ color: 'var(--text-main)' }}>
                 <div className="flex flex-col gap-1">
                     <span>{source.issuingEntity}</span>
-                    {source.sublists && source.sublists.length > 0 && (
+                    {source.sublists && source.sublists.length > 0 && !headless && (
                         <button
                             type="button"
                             onClick={onToggle}
@@ -94,7 +97,7 @@ const SanctionsRow = ({
                     : (<span>No exact match for <strong style={{ color: 'var(--text-main)' }}>{developerName}</strong> was found on this list.</span>)}
             </td>
         </tr>
-        {expanded && source.sublists && source.sublists.length > 0 && (
+        {(headless || expanded) && source.sublists && source.sublists.length > 0 && (
             <tr>
                 <td colSpan={colSpan} className={'px-6 pb-4'}>
                     <div className={'mt-1 border-t pt-3'} style={{ borderColor: 'var(--icon-button-secondary)' }}>
@@ -128,7 +131,7 @@ const DomainRow = ({ source, searchedAt, developerName }: { source: DomainSource
 );
 
 
-const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedAt, developerName, genreMapping }) => {
+const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedAt, developerName, genreMapping, headless }) => {
     const [visibleCount, setVisibleCount] = useState(PAGE_SIZE);
     const [expanded, setExpanded] = useState<{ [k: number]: boolean }>({});
 
@@ -227,7 +230,7 @@ const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedA
 
     const visibleParsedSources = (type === 'business_rules')
         ? sortedParsedSources
-        : sortedParsedSources.slice(0, visibleCount);
+        : (headless ? sortedParsedSources : sortedParsedSources.slice(0, visibleCount));
 
     const handleLoadMore = () => {
         setVisibleCount(currentCount => currentCount + PAGE_SIZE);
@@ -238,8 +241,8 @@ const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedA
     }
 
     return (
-        <div>
-            <div className={'overflow-x-auto rounded-lg border'} style={{ borderColor: 'var(--icon-button-secondary)', backgroundColor: 'var(--content-card-background)' }}>
+        <div className={'kyd-avoid-break'}>
+            <div className={'overflow-x-auto rounded-lg border kyd-avoid-break'} style={{ borderColor: 'var(--icon-button-secondary)', backgroundColor: 'var(--content-card-background)', breakInside: 'avoid', pageBreakInside: 'avoid' as unknown as undefined }}>
                 <table className={'min-w-full'}>
                     <colgroup>
                         {headers.map((_, idx) => (
@@ -268,6 +271,7 @@ const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedA
                                         onToggle={() => setExpanded(prev => ({ ...prev, [index]: !prev[index] }))}
                                         expanded={!!expanded[index]}
                                         colSpan={headers.length}
+                                        headless={headless}
                                     />
                                 );
                             }
@@ -311,7 +315,7 @@ const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedA
                     </tbody>
                 </table>
             </div>
-            {type !== 'business_rules' && parsedSources.length > PAGE_SIZE && (
+            {type !== 'business_rules' && parsedSources.length > PAGE_SIZE && !headless && (
                 <div className={'mt-4 flex items-center justify-between text-sm'} style={{ color: 'var(--text-secondary)' }}>
                     <p>
                         Showing {Math.min(visibleCount, parsedSources.length)} of {parsedSources.length} entries

package/src/components/Skills.tsx

@@ -166,7 +166,7 @@ const TooltipBox = ({ state }: { state: HoverTooltipState }) => {
   );
 };
 
-const Skills = ({ skillsCategoryRadar }: { skillsMatrix?: SkillsMatrix; skillsCategoryRadar?: SkillsRadarPoint[] }) => {
+const Skills = ({ skillsCategoryRadar, headless }: { skillsMatrix?: SkillsMatrix; skillsCategoryRadar?: SkillsRadarPoint[]; headless?: boolean }) => {
   // const hasMatrix = !!(skillsMatrix && Array.isArray(skillsMatrix.skills) && skillsMatrix.skills.length > 0);
   const hasRadar = !!(skillsCategoryRadar && skillsCategoryRadar.length > 0);
 
@@ -180,6 +180,16 @@ const Skills = ({ skillsCategoryRadar }: { skillsMatrix?: SkillsMatrix; skillsCa
   const [footprintLegendTooltip, setFootprintLegendTooltip] = useState<HoverTooltipState>(null);
   const [barLegendTooltip, setBarLegendTooltip] = useState<HoverTooltipState>(null);
 
+  const disableAnimations = useMemo(() => {
+    if (headless) return true;
+    if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+      try {
+        return window.matchMedia('print').matches;
+      } catch {}
+    }
+    return false;
+  }, [headless]);
+
   useEffect(() => {
     const measure = () => setContainerWidth(containerRef.current?.clientWidth || 0);
     measure();
@@ -187,6 +197,16 @@ const Skills = ({ skillsCategoryRadar }: { skillsMatrix?: SkillsMatrix; skillsCa
     return () => window.removeEventListener('resize', measure);
   }, []);
 
+  // Nudge layout for headless/print contexts so responsive containers measure correctly
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const id = window.setTimeout(() => {
+        try { window.dispatchEvent(new Event('resize')); } catch {}
+      }, 0);
+      return () => window.clearTimeout(id);
+    }
+  }, []);
+
   const combinedBubbleData: BubbleDatum[] = useMemo(() => {
     return skillsRadarLimited.map((d) => {
       const vals = [Number(d.observed || 0), Number(d.self_reported || 0), Number(d.certified || 0)];
@@ -210,11 +230,11 @@ const Skills = ({ skillsCategoryRadar }: { skillsMatrix?: SkillsMatrix; skillsCa
 
       {/* Skills Coverage and Breakdown: two charts side-by-side */}
       {hasRadar && (
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div className={'rounded-lg p-4 border'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 kyd-avoid-break">
+          <div className={'rounded-lg p-4 border kyd-avoid-break'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)', breakInside: 'avoid', pageBreakInside: 'avoid' as unknown as undefined }}>
             <h4 className={'font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Skills Footprint</h4>
             <p className={'text-sm mb-4'} style={{ color: 'var(--text-secondary)' }}>The bubble chart visualizes individual skills, where bubble size reflects the weight of supporting evidence and placement indicates relative strength across the skill set.</p>
-            <div ref={containerRef} style={{ width: '100%', height: 340, position: 'relative' }}>
+            <div ref={containerRef} className={'kyd-avoid-break'} style={{ width: '100%', height: 340, position: 'relative', breakInside: 'avoid', pageBreakInside: 'avoid' as unknown as undefined }}>
               {(() => {
                 const width = containerWidth || 600;
                 const height = 300;
@@ -276,12 +296,12 @@ const Skills = ({ skillsCategoryRadar }: { skillsMatrix?: SkillsMatrix; skillsCa
                   </svg>
                 );
               })()}
-              <TooltipBox state={footprintChartTooltip} />
+              {!headless && <TooltipBox state={footprintChartTooltip} />}
             </div>
             {/* Legend */}
             <div className={'mt-3'}>
               {/* <div className={'text-xs mb-2'} style={{ color: 'var(--text-secondary)' }}>Legend</div> */}
-              <div ref={footprintLegendRef} style={{ position: 'relative' }}>
+              <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
@@ -314,11 +334,11 @@ const Skills = ({ skillsCategoryRadar }: { skillsMatrix?: SkillsMatrix; skillsCa
                     </div>
                   ))}
                 </div>
-                <TooltipBox state={footprintLegendTooltip} />
+                {!headless && <TooltipBox state={footprintLegendTooltip} />}
               </div>
             </div>
           </div>
-          <div className={'rounded-lg p-4 border'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
+          <div className={'rounded-lg p-4 border kyd-avoid-break'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)', breakInside: 'avoid', pageBreakInside: 'avoid' as unknown as undefined }}>
             <h4 className={'font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Skills by Validation Type</h4>
             <p className={'text-sm mb-4'} style={{ color: 'var(--text-secondary)' }}>The bar chart shows how each skill is supported by self-attested claims, observed practice, or certified evidence.</p>
             <div className="space-y-6 flex-col items-center" >
@@ -330,9 +350,9 @@ const Skills = ({ skillsCategoryRadar }: { skillsMatrix?: SkillsMatrix; skillsCa
                       <XAxis dataKey="axis" tick={{ fill: 'var(--text-secondary)', fontSize: 12 }} interval={0} angle={-20} textAnchor="end" height={50} />
                       <YAxis domain={[0, 100]} tick={{ fill: 'var(--text-secondary)' }} />
                       <Tooltip contentStyle={{ background: 'var(--content-card-background)', border: `1px solid var(--icon-button-secondary)`, color: 'var(--text-main)' }} />
-                      <Bar dataKey="observed" name="Observed" fill={'var(--bar-observed)'} />
-                      <Bar dataKey="self_reported" name="Self-reported" fill={'var(--bar-self-reported)'} />
-                      <Bar dataKey="certified" name="Certified" fill={'var(--bar-certified)'} />
+                      <Bar dataKey="observed" name="Observed" fill={'var(--bar-observed)'} isAnimationActive={!disableAnimations} />
+                      <Bar dataKey="self_reported" name="Self-reported" fill={'var(--bar-self-reported)'} isAnimationActive={!disableAnimations} />
+                      <Bar dataKey="certified" name="Certified" fill={'var(--bar-certified)'} isAnimationActive={!disableAnimations} />
                     </BarChart>
                   </ResponsiveContainer>
                 </div>
@@ -409,7 +429,7 @@ const Skills = ({ skillsCategoryRadar }: { skillsMatrix?: SkillsMatrix; skillsCa
                     <span>Certified</span>
                   </div>
                 </div>
-                <TooltipBox state={barLegendTooltip} />
+                {!headless && <TooltipBox state={barLegendTooltip} />}
               </div>
             </div>
           </div>