kyd-shared-badge 0.3.21 → 0.3.23

package/package.json

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

package/src/SharedBadgeDisplay.tsx

@@ -61,6 +61,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
   
 
   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, headless }: { badgeData: Pub
   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 
@@ -159,20 +173,20 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
               const em = assessmentResult?.enterprise_match;
               if (!em) return null;
               const role = em.role || {};
-              return { score: typeof em.score === 'number' ? em.score : undefined, description: em.description, roleName: role.name };
+              return { label: em.label, description: em.description, roleName: role.name };
             })()}
             countries={(assessmentResult?.screening_sources?.ip_risk_analysis?.raw_data?.countries) || []}
         />
       </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, headless }: { badgeData: Pub
 
           {/* 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, headless }: { badgeData: Pub
                     categories={genreMapping?.['Technical'] as string[]}
                     genre={'Technical'}
                     scoringSummary={scoringSummary}
+                    headless={isHeadless}
                   />
                 </div>
               </Reveal>
@@ -299,8 +314,8 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
               </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, headless }: { badgeData: Pub
 
 
           <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, headless }: { badgeData: Pub
                   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, headless }: { badgeData: Pub
 
         
           <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 */}

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

@@ -37,7 +37,7 @@ interface ReportHeaderProps {
     isPublic: boolean;
     badgeImageUrl: string;
     summary?: string;
-    enterpriseMatch?: { score?: number; description?: string; roleName?: string } | null;
+    enterpriseMatch?: { label?: string; description?: string; roleName?: string } | null;
     countries?: string[];
 }
 
@@ -45,8 +45,7 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
   // Use the dynamic image if available, otherwise fall back to the score-based one.
   const finalBadgeImageUrl = badgeImageUrl || getBadgeImageUrl(score || 0);
   const tint = hexToRgba(pickTint(score || 0), 0.06);
-  const matchScore = typeof enterpriseMatch?.score === 'number' ? enterpriseMatch.score : undefined;
-  const matchTint = matchScore !== undefined ? hexToRgba(pickTint(matchScore), 0.06) : undefined;
+  const matchLabel = enterpriseMatch?.label;
   
   const formattedDate = updatedAt ? formatLocalDate(updatedAt, {
     year: 'numeric',
@@ -100,7 +99,7 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
                 })()
               )}
             </div>
-            {(enterpriseMatch?.description || enterpriseMatch?.score !== undefined) ? (
+            {(enterpriseMatch?.description || matchLabel) ? (
               <div className={'hidden md:block text-sm space-y-2 pt-4'} style={{ borderTop: '1px solid var(--icon-button-secondary)' }}>
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-2">
@@ -110,14 +109,14 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
                       <div className="hidden group-hover:block absolute z-30 left-1/2 -translate-x-1/2 top-full mt-2 w-80">
                         <div style={{ background: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)', padding: 10, borderRadius: 6 }}>
                           <div style={{ fontWeight: 600 }}>AI-generated</div>
-                          <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>Role match score and description are AI-generated.</div>
+                          <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>Role match label and description are AI-generated.</div>
                         </div>
                       </div>
                     </span>
                   </div>
-                  {typeof enterpriseMatch?.score === 'number' && (
-                    <span className="px-2 py-1 rounded text-xs font-semibold" style={{ backgroundColor: 'var(--content-card-background)', backgroundImage: matchTint ? `linear-gradient(${matchTint}, ${matchTint})` : undefined, border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)' }}>
-                      {Math.round(enterpriseMatch.score)}%
+                  {matchLabel && (
+                    <span className="px-2 py-1 rounded text-xs font-semibold" style={{ backgroundColor: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)' }}>
+                      {matchLabel}
                     </span>
                   )}
                 </div>

package/src/types.ts

@@ -159,7 +159,7 @@ export interface EnterpriseMatch {
     name: string;
     description: string;
   };
-  score: number;
+  label: string;
   description: string;
 }