kyd-shared-badge 0.3.23 → 0.3.25

package/package.json

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

package/src/SharedBadgeDisplay.tsx

@@ -160,7 +160,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
         </style>
       )}
       {/* Share controls removed; app-level pages render their own actions */}
-      <Reveal offsetY={8} durationMs={500}>
+      <Reveal headless={isHeadless} offsetY={8} durationMs={500}>
         <ReportHeader 
             badgeId={badgeId}
             developerName={badgeData.developerName}
@@ -184,8 +184,8 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
       >
         <div className={'space-y-12 divide-y'} style={{ borderColor: 'var(--icon-button-secondary)' }}>
           <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)' }}>
+            <Reveal headless={isHeadless} as={'h4'} offsetY={8} durationMs={500} className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Report Summary</Reveal>
+            <Reveal headless={isHeadless} 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 kyd-avoid-break">
                 {/* Technical semicircle gauge (refactored) */}
                 {(() => {
@@ -251,9 +251,9 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
           {/* Technical Scores */}
           <div className="mt-8" >
             <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>
+              <Reveal headless={isHeadless} as={'h4'} offsetY={8} className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>KYD Technical</Reveal>
               {/* technical graph insights */}
-              <Reveal>
+              <Reveal headless={isHeadless}>
                 <div className="">
                   <GraphInsights
                     graphInsights={graphInsights}
@@ -269,7 +269,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
               <div className="grid grid-cols-1 lg:grid-cols-12 w-full gap-8 items-stretch py-8 border-t" style={{ borderColor: 'var(--icon-button-secondary)'}}>
                 
                 {/* Left: Bars */}
-                <Reveal className="lg:col-span-8 h-full">
+                <Reveal headless={isHeadless} className="lg:col-span-8 h-full">
                   <CategoryBars
                     title={'Technical Category Contributions'}
                     categories={genreMapping?.['Technical'] as string[]}
@@ -281,7 +281,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
                 </Reveal>
 
                 {/* Right: Contributing Factors (hidden on small screens) */}
-                <Reveal className="lg:col-span-4 w-full ml-0 lg:ml-20 hidden lg:flex flex-col items-start justify-start" delayMs={80}>
+                <Reveal headless={isHeadless} className="lg:col-span-4 w-full ml-0 lg:ml-20 hidden lg:flex flex-col items-start justify-start" delayMs={80}>
                   <div className={'text-sm font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Top Contributing Factors</div>
                   <div className="space-y-4">
                     {(genreMapping?.['Technical'] || []).map((cat: string) => {
@@ -313,11 +313,11 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
                 </Reveal>
               </div>
 
-              <Reveal>
+              <Reveal headless={isHeadless}>
                 <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>
@@ -328,10 +328,10 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
 
 
           <div className="pt-8 space-y-8">
-            <Reveal as={'h3'} offsetY={8} className={`text-2xl font-bold ${isHeadless ? 'kyd-break-before' : ''}`} style={{ color: 'var(--text-main)' }}>KYD Risk - Overview</Reveal>
+            <Reveal headless={isHeadless} 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>
+            <Reveal headless={isHeadless}>
               <div className="">
                 <GraphInsights
                   graphInsights={graphInsights}
@@ -344,7 +344,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
             </Reveal>
             <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">
+              <Reveal headless={isHeadless} className="lg:col-span-8 h-full">
                 <CategoryBars
                   title={'KYD Risk - Category Insights'}
                   categories={genreMapping?.['Risk'] as string[]}
@@ -355,7 +355,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
                 />
               </Reveal>
               {/* Right: Contributing Factors (hidden on small screens) */}
-              <Reveal className="lg:col-span-4 w-full ml-0 lg:ml-20 hidden lg:flex flex-col items-start justify-start" delayMs={80}>
+              <Reveal headless={isHeadless} className="lg:col-span-4 w-full ml-0 lg:ml-20 hidden lg:flex flex-col items-start justify-start" delayMs={80}>
                 <div className={'text-sm font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Top Contributing Factors</div>
                 <div className="space-y-4">
                   {genreMapping?.['Risk']?.map((cat: string) => {
@@ -389,7 +389,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
 
             {/* cyber risk display */}
             {badgeData.optOutScreening ? (
-              <Reveal className={'p-4 rounded-lg border'} style={{ backgroundColor: 'var(--icon-button-secondary)', borderColor: 'var(--icon-button-secondary)' }}>
+              <Reveal headless={isHeadless} className={'p-4 rounded-lg border'} style={{ backgroundColor: 'var(--icon-button-secondary)', borderColor: 'var(--icon-button-secondary)' }}>
                   <div className="flex items-start">
                       <span className="h-5 w-5 mr-3 mt-0.5 flex-shrink-0" style={{ color: yellow }}>
                           <FiAlertTriangle size={20} />
@@ -411,7 +411,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
                   const fbiMatches = ss?.fbi_matches && (ss.fbi_matches.length > 0);
                   if (!(ofacMatches || cslDetails || fbiMatches)) return null;
                   return (
-                    <Reveal className={'mb-8 rounded-lg border p-4'} style={{ borderColor: 'var(--icon-button-secondary)', backgroundColor: 'var(--content-card-background)' }}>
+                    <Reveal headless={isHeadless} className={'mb-8 rounded-lg border p-4'} style={{ borderColor: 'var(--icon-button-secondary)', backgroundColor: 'var(--content-card-background)' }}>
                       <h4 className={'text-lg font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>3A. Sanctions Matches</h4>
                       {/* OFAC matches */}
                       {ofacMatches && (
@@ -474,7 +474,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
                     </Reveal>
                   );
                 })()}
-                <Reveal>
+                <Reveal headless={isHeadless}>
                   <IpRiskAnalysisDisplay ipRiskAnalysis={screening_sources?.ip_risk_analysis} />
                 </Reveal>
               </>
@@ -483,7 +483,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
           </div>
 
           {/* Connected Platforms */}
-          <Reveal>
+          <Reveal headless={isHeadless}>
             <ConnectedPlatforms accounts={connected} />
           </Reveal>
 
@@ -493,7 +493,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
             <div className="space-y-8">
 
               {/* Skills */}
-              <Reveal>
+              <Reveal headless={isHeadless}>
                 <div>
                   <h4 id="appendix-skills" className={'text-lg font-bold mb-1'} style={{ color: 'var(--text-main)' }}>Skills</h4>
                   <div className="text-sm mb-4" style={{ color: 'var(--text-secondary)' }}>
@@ -505,7 +505,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
 
               {/* Observations */}
               {Array.isArray(graphInsights?.business_rules_all) && graphInsights.business_rules_all.length > 0 && (
-                <Reveal>
+                <Reveal headless={isHeadless}>
                   <div>
                     <h4 className={'text-lg font-bold mb-4'} style={{ color: 'var(--text-main)' }}>Observations</h4>
                     <AppendixTables
@@ -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>
@@ -522,7 +523,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
               
               {/* Sanctions & Watchlists */}
               {!badgeData.optOutScreening && screening_sources && (
-                <Reveal>
+                <Reveal headless={isHeadless}>
                   <div>
                     <h4 className={'text-lg font-bold mb-4'} style={{ color: 'var(--text-main)' }}>Sanctions & Watchlists</h4>
                     {(() => {
@@ -542,6 +543,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
                               sources={useDetailed ? detailed : dedup}
                               searchedAt={updatedAt}
                               developerName={developerName || 'this developer'}
+                              headless={isHeadless}
                           />
                       );
                   })()}
@@ -552,14 +554,14 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
             </div>
           </div>
 
-          <Reveal>
+          <Reveal headless={isHeadless}>
             <div className={'pt-8 text-sm text-center'} style={{ color: 'var(--text-secondary)' }}>
                 Report Completed: {formatLocalDateTime(updatedAt)}
             </div>
           </Reveal>
         </div>
       </div>
-      <Reveal>
+      <Reveal headless={isHeadless}>
         <footer className={'mt-12 pt-6 border-t'} style={{ borderColor: 'var(--icon-button-secondary)' }}>
           <p className={'text-center text-xs max-w-4xl mx-auto'} style={{ color: 'var(--text-secondary)' }}>
             © 2025 Know Your Developer, LLC. All rights reserved. KYD Self-Check™, and associated marks are trademarks of Know Your Developer, LLC. This document is confidential, proprietary, and intended solely for the individual or entity to whom it is addressed. Unauthorized use, disclosure, copying, or distribution of this document or any of its contents is strictly prohibited and may be unlawful. Know Your Developer, LLC assumes no responsibility or liability for any errors or omissions contained herein. Report validity subject to the terms and conditions stated on the official Know Your Developer website located at https://knowyourdeveloper.ai.

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/Reveal.tsx

@@ -21,6 +21,8 @@ type RevealProps = PropsWithChildren<{
   threshold?: number | number[];
   /** Root margin for preloading */
   rootMargin?: string;
+  /** When true, disable animations and render normally */
+  headless?: boolean;
 }>;
 
 const Reveal: React.FC<RevealProps> = ({
@@ -33,11 +35,21 @@ const Reveal: React.FC<RevealProps> = ({
   style,
   threshold,
   rootMargin,
+  headless,
   children,
 }) => {
   const Tag = as as any;
   const { ref, hasIntersected } = useInViewOnce({ threshold, rootMargin });
 
+  // In headless mode, render without any animation or transition.
+  if (headless) {
+    return (
+      <Tag ref={ref} className={className} style={style}>
+        {children}
+      </Tag>
+    );
+  }
+
   // Respect reduced motion is handled in the hook by triggering immediately.
   const baseTransform = `translate(${offsetX}px, ${offsetY}px)`;
   const eased = 'cubic-bezier(0.22, 1, 0.36, 1)'; // subtle spring-ish ease

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>