kyd-shared-badge 0.3.22 → 0.3.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.22",
+  "version": "0.3.23",
   "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,8 +314,8 @@ 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} />
                   </div>
@@ -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 */}
@@ -551,7 +567,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

@@ -299,9 +299,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>
                             );

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}
                         >