kyd-shared-badge 0.3.24 → 0.3.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.24",
+  "version": "0.3.26",
   "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,7 +313,7 @@ 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)' }}>
@@ -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
@@ -523,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>
                     {(() => {
@@ -554,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/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

@@ -197,6 +197,24 @@ const Skills = ({ skillsCategoryRadar, headless }: { skillsMatrix?: SkillsMatrix
     return () => window.removeEventListener('resize', measure);
   }, []);
 
+  // Track container width changes more reliably (including print/headless layouts)
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el || typeof ResizeObserver === 'undefined') return;
+    try {
+      const ro = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          const width = entry.contentRect?.width || el.clientWidth || 0;
+          setContainerWidth(width);
+        }
+      });
+      ro.observe(el);
+      return () => ro.disconnect();
+    } catch {
+      // no-op: older engines
+    }
+  }, []);
+
   // Nudge layout for headless/print contexts so responsive containers measure correctly
   useEffect(() => {
     if (typeof window !== 'undefined') {
@@ -234,16 +252,29 @@ const Skills = ({ skillsCategoryRadar, headless }: { skillsMatrix?: SkillsMatrix
           <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} className={'kyd-avoid-break'} style={{ width: '100%', height: 340, position: 'relative', breakInside: 'avoid', pageBreakInside: 'avoid' as unknown as undefined }}>
+            <div
+              ref={containerRef}
+              className={'kyd-avoid-break'}
+              style={{
+                width: '100%',
+                height: 340,
+                position: 'relative',
+                overflow: 'visible',
+                breakInside: 'avoid',
+                pageBreakInside: 'avoid' as unknown as undefined,
+              }}
+            >
               {(() => {
-                const width = containerWidth || 600;
+                const measured = containerWidth || (containerRef.current?.clientWidth || 0);
+                const parentWidth = containerRef.current?.parentElement?.clientWidth || measured;
+                const width = Math.max(0, Math.min(measured, parentWidth));
                 const height = 300;
                 const innerWidth = Math.max(0, width);
                 const innerHeight = Math.max(0, height);
-                const packed = packBubbles(combinedBubbleData, innerWidth, innerHeight, 6);
+                const packed = packBubbles(combinedBubbleData, innerWidth, innerHeight, headless ? 10 : 6);
                 return (
-                  <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
-                    <g transform={`translate(-25, -20)`}>
+                  <svg width={'100%'} height={height} viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="xMidYMid meet">
+                    <g transform={headless ? 'translate(0, 0)' : 'translate(-25, -20)'}>
                       {packed.map((b, idx) => {
                         const clipId = `bubble-clip-${idx}`;
                         const canShowText = b.r >= 14;