kyd-shared-badge 0.3.22 → 0.3.24

package/package.json

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

package/src/SharedBadgeDisplay.tsx

@@ -40,7 +40,7 @@ type ChatWidgetProps = Partial<{
 //   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 // };
 
-const SharedBadgeDisplay = ({ badgeData, chatProps }: { badgeData: PublicBadgeData, chatProps?: ChatWidgetProps }) => {
+const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: PublicBadgeData, chatProps?: ChatWidgetProps, headless?: boolean }) => {
   const { 
     badgeId, 
     developerName, 
@@ -61,6 +61,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps }: { badgeData: PublicBadgeDa
   
 
   const wrapperMaxWidth = 'max-w-5xl';
+  const isHeadless = !!headless;
 
   // Overall and genre scores
   const overallFinalPercent = assessmentResult?.final_percent || 0;
@@ -145,6 +146,19 @@ const SharedBadgeDisplay = ({ badgeData, chatProps }: { badgeData: PublicBadgeDa
   return (
     <BusinessRulesProvider items={graphInsights?.business_rules_all}>
     <div className={`${wrapperMaxWidth} mx-auto`}>
+      {isHeadless && (
+        <style>
+          {`@page { margin: 0; }
+            html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
+            #__next, main { margin: 0 !important; padding: 0 !important; }
+            @media print {
+              .kyd-break-before { break-before: page; page-break-before: always; }
+              .kyd-break-after  { break-after: page;  page-break-after: always; }
+              .kyd-avoid-break  { break-inside: avoid; page-break-inside: avoid; }
+              .kyd-keep-with-next { break-after: avoid; page-break-after: avoid; }
+            }`}
+        </style>
+      )}
       {/* Share controls removed; app-level pages render their own actions */}
       <Reveal offsetY={8} durationMs={500}>
         <ReportHeader 
@@ -165,14 +179,14 @@ const SharedBadgeDisplay = ({ badgeData, chatProps }: { badgeData: PublicBadgeDa
         />
       </Reveal>
       <div
-        className={'rounded-xl shadow-xl p-6 sm:p-8 mt-8 border'}
+        className={isHeadless ? 'p-6 sm:p-8 mt-2 border' : 'rounded-xl shadow-xl p-6 sm:p-8 mt-8 border'}
         style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}
       >
         <div className={'space-y-12 divide-y'} style={{ borderColor: 'var(--icon-button-secondary)' }}>
-          <div className="pt-8 first:pt-0">
+          <div className="pt-8 first:pt-0 kyd-avoid-break">
             <Reveal as={'h4'} offsetY={8} durationMs={500} className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Report Summary</Reveal>
             <Reveal as={'div'} offsetY={8} durationMs={500} className={'space-y-12 divide-y'} style={{ borderColor: 'var(--icon-button-secondary)' }}>
-              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 *:min-h-full">
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 *:min-h-full kyd-avoid-break">
                 {/* Technical semicircle gauge (refactored) */}
                 {(() => {
                   const ui = graphInsights?.uiSummary?.technical || {};
@@ -236,7 +250,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps }: { badgeData: PublicBadgeDa
 
           {/* Technical Scores */}
           <div className="mt-8" >
-            <div key={'Technical'} className='pt-8 space-y-8' style={{ borderColor: 'var(--icon-button-secondary)'}}>
+            <div key={'Technical'} className='pt-8 space-y-8 kyd-avoid-break' style={{ borderColor: 'var(--icon-button-secondary)'}}>
               <Reveal as={'h4'} offsetY={8} className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>KYD Technical</Reveal>
               {/* technical graph insights */}
               <Reveal>
@@ -246,6 +260,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps }: { badgeData: PublicBadgeDa
                     categories={genreMapping?.['Technical'] as string[]}
                     genre={'Technical'}
                     scoringSummary={scoringSummary}
+                    headless={isHeadless}
                   />
                 </div>
               </Reveal>
@@ -299,10 +314,10 @@ const SharedBadgeDisplay = ({ badgeData, chatProps }: { badgeData: PublicBadgeDa
               </div>
 
               <Reveal>
-                <div className="pt-8 border-t" style={{ borderColor: 'var(--icon-button-secondary)'}}>
-                  <h3 className={'text-xl font-bold mb-3'} style={{ color: 'var(--text-main)' }}>KYD Technical - Skills Insights</h3>
+                <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>
@@ -313,7 +328,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps }: { badgeData: PublicBadgeDa
 
 
           <div className="pt-8 space-y-8">
-            <Reveal as={'h3'} offsetY={8} className={'text-2xl font-bold'} style={{ color: 'var(--text-main)' }}>KYD Risk - Overview</Reveal>
+            <Reveal as={'h3'} offsetY={8} className={`text-2xl font-bold ${isHeadless ? 'kyd-break-before' : ''}`} style={{ color: 'var(--text-main)' }}>KYD Risk - Overview</Reveal>
             
             {/* Risk Graph Insights and Category Bars */}
             <Reveal>
@@ -323,10 +338,11 @@ const SharedBadgeDisplay = ({ badgeData, chatProps }: { badgeData: PublicBadgeDa
                   categories={genreMapping?.['Risk'] as string[]}
                   genre={'Risk'}
                   scoringSummary={scoringSummary}
+                  headless={isHeadless}
                 />
               </div>
             </Reveal>
-            <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 w-full items-stretch py-8 border-y" style={{ borderColor: 'var(--icon-button-secondary)' }}>
+            <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 w-full items-stretch py-8 border-y kyd-avoid-break" style={{ borderColor: 'var(--icon-button-secondary)' }}>
               {/* Left: Bars */}
               <Reveal className="lg:col-span-8 h-full">
                 <CategoryBars
@@ -473,7 +489,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps }: { badgeData: PublicBadgeDa
 
         
           <div className="pt-8">
-            <h3 className={'text-2xl font-bold mb-4'} style={{ color: 'var(--text-main)' }}>Appendix</h3>
+            <h3 className={`text-2xl font-bold mb-4 ${isHeadless ? 'kyd-break-before' : ''}`} style={{ color: 'var(--text-main)' }}>Appendix</h3>
             <div className="space-y-8">
 
               {/* Skills */}
@@ -499,6 +515,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps }: { badgeData: PublicBadgeDa
                       searchedAt={updatedAt}
                       developerName={developerName || 'this developer'}
                       genreMapping={genreMapping as Record<string, string[]>}
+                      headless={isHeadless}
                     />
                   </div>
                 </Reveal>
@@ -526,6 +543,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps }: { badgeData: PublicBadgeDa
                               sources={useDetailed ? detailed : dedup}
                               searchedAt={updatedAt}
                               developerName={developerName || 'this developer'}
+                              headless={isHeadless}
                           />
                       );
                   })()}
@@ -551,7 +569,9 @@ const SharedBadgeDisplay = ({ badgeData, chatProps }: { badgeData: PublicBadgeDa
         </footer>
       </Reveal>
       {/* Floating chat widget */}
-      <ChatWidget api={chatProps?.api || '/api/chat'} badgeId={badgeId} title={chatProps?.title} hintText={chatProps?.hintText} loginPath={chatProps?.loginPath} headerOffset={chatProps?.headerOffset} developerName={developerName} />
+      {!headless && (
+        <ChatWidget api={chatProps?.api || '/api/chat'} badgeId={badgeId} title={chatProps?.title} hintText={chatProps?.hintText} loginPath={chatProps?.loginPath} headerOffset={chatProps?.headerOffset} developerName={developerName} />
+      )}
     </div>
     </BusinessRulesProvider>
   );

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}
                                     />
                                 );
                             }
@@ -299,9 +303,11 @@ const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedA
                                     <td className={'px-4 py-4 whitespace-normal text-sm'} style={{ color: 'var(--text-secondary)' }}>{br.category || '—'}</td>
                                     <td className={'px-4 py-4 whitespace-normal text-sm font-medium'} style={{ color: 'var(--text-main)' }}>{br.label || '—'}</td>
                                     <td className={'px-4 py-4 whitespace-normal text-sm'} style={{ color: 'var(--text-secondary)' }}>{(() => {
-                                        const weight = Number(br.weight || 0);
-                                        if (!Number.isFinite(weight)) return '—';
-                                        return weight.toFixed(3).replace(/\.000$/, '.0');
+                                        const weight = Number(br.weight);
+                                        if (!Number.isFinite(weight)) return 'Neutral';
+                                        if (weight > 0) return 'Positive';
+                                        if (weight < 0) return 'Negative';
+                                        return 'Neutral';
                                     })()}</td>
                                 </tr>
                             );
@@ -309,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/GraphInsights.tsx

@@ -48,12 +48,34 @@ const GraphInsights = ({
   categories,
   genre,
   scoringSummary,
+  headless,
 }: {
   graphInsights: GraphInsightsPayload;
   categories?: string[];
   genre: string;
   scoringSummary?: ScoringSummary;
+  headless?: boolean;
 }) => {
+  const disableAnimations = React.useMemo(() => {
+    // Disable chart animations for headless/PDF/print to avoid capturing initial frames
+    if (headless) return true;
+    if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+      try {
+        return window.matchMedia('print').matches;
+      } catch {}
+    }
+    return false;
+  }, [headless]);
+
+  // Nudge ResponsiveContainer to measure after mount in headless contexts
+  React.useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const id = window.setTimeout(() => {
+        try { window.dispatchEvent(new Event('resize')); } catch {}
+      }, 0);
+      return () => window.clearTimeout(id);
+    }
+  }, []);
   const getCategoryTooltipCopy = (category: string): string => {
     const name = (category || '').toLowerCase();
 
@@ -231,12 +253,12 @@ const GraphInsights = ({
     <div className="grid grid-cols-1 gap-6">
       {/* Spider Chart: Category Balance (genre-scoped) */}
       {radarData && radarData.length > 2 && (
-        <div className={'rounded-lg p-4 pb-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" >
+        <div className={'rounded-lg p-4 pb-4 border kyd-avoid-break'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)', breakInside: 'avoid', pageBreakInside: 'avoid' as unknown as undefined }}>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 kyd-avoid-break" >
             
             {/* Spider Chart: Category Scores */}
-            <div className="" style={{ width: '100%', height: 450 }}>
-              <div className="relative" style={{ width: '100%', height: 375 }}>
+            <div className="kyd-avoid-break" style={{ width: '100%', height: 450, breakInside: 'avoid', pageBreakInside: 'avoid' as unknown as undefined }}>
+              <div className="relative kyd-avoid-break" style={{ width: '100%', height: 375, breakInside: 'avoid', pageBreakInside: 'avoid' as unknown as undefined }}>
                 <div className="mb-2">
                   <div className={'font-medium'} style={{ color: 'var(--text-main)' }}>{genre ? `${genre} ` : ''} Category Contributions - Percentages</div>
                   <div className={'text-xs'} style={{ color: 'var(--text-secondary)' }}>The spider diagram displays the KYD {genre} score across its sub-categories, with each point representing the strength of available evidence signals</div>
@@ -247,13 +269,13 @@ const GraphInsights = ({
                     <PolarAngleAxis dataKey="axis" tick={renderAngleTick} />
                     <PolarRadiusAxis angle={55} domain={[0, 100]} tick={{ fill: 'var(--text-secondary)' }} className="text-sm" />
                     {/* Primary area */}
-                    <Radar name="Category Score" dataKey="score" stroke={'var(--text-main)'} fill={'var(--text-main)'} fillOpacity={0.22} />
+                    <Radar name="Category Score" dataKey="score" stroke={'var(--text-main)'} fill={'var(--text-main)'} fillOpacity={0.22} isAnimationActive={!disableAnimations} />
                     {/* Subtle average ring (arbitrary benchmark for comparison) */}
-                    <Radar name="Avg" dataKey="avg" stroke="rgba(128,128,128,0.6)" fill="rgba(128,128,128,0.08)" strokeDasharray="4 4" fillOpacity={1} />
+                    <Radar name="Avg" dataKey="avg" stroke="rgba(128,128,128,0.6)" fill="rgba(128,128,128,0.08)" strokeDasharray="4 4" fillOpacity={1} isAnimationActive={!disableAnimations} />
                     <Tooltip content={<RadarCategoryTooltip />} />
                   </RadarChart>
                 </ResponsiveContainer>
-                {labelHover && (
+                {!headless && labelHover && (
                   <div
                     className="pointer-events-none absolute z-30"
                     style={{
@@ -285,8 +307,8 @@ const GraphInsights = ({
             </div>
 
             {/* Pie Chart: Category Distribution */}
-            <div className="md:border-l md:pl-6" style={{ borderColor: 'var(--icon-button-secondary)', width: '100%', height: 450 }}>
-              <div className="" style={{ borderColor: 'var(--icon-button-secondary)', width: '100%', height: 375 }}>
+            <div className="md:border-l md:pl-6 kyd-avoid-break" style={{ borderColor: 'var(--icon-button-secondary)', width: '100%', height: 450, breakInside: 'avoid', pageBreakInside: 'avoid' as unknown as undefined }}>
+              <div className="kyd-avoid-break" style={{ borderColor: 'var(--icon-button-secondary)', width: '100%', height: 375, breakInside: 'avoid', pageBreakInside: 'avoid' as unknown as undefined }}>
                 <div className="mb-2">
                   <div className={'font-medium'} style={{ color: 'var(--text-main)' }}>{genre ? `${genre} ` : ''} Category Contributions - Proportions</div>
                   <div className={'text-xs'} style={{ color: 'var(--text-secondary)' }}>The donut diagram illustrates the relative contribution of each {genre} category to the pillar’s composite score.</div>
@@ -325,7 +347,7 @@ const GraphInsights = ({
                           startAngle={90}
                           endAngle={-270}
                           paddingAngle={1.5}
-                          isAnimationActive
+                          isAnimationActive={!disableAnimations}
                           label={renderLabel}
                           labelLine={false}
                         >

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>