kyd-shared-badge 0.3.110 → 0.3.112

package/package.json

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

package/src/components/ReportHeader.tsx

@@ -102,8 +102,8 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
       <div className={`flex gap-3 ${rightBadgeLayout ? 'flex-col md:flex-row items-center justify-between' : 'flex-col'}`}>
         {/* Info section: Title, Candidate, Details and Summary */}
         <div className={`w-full ${rightBadgeLayout ? 'md:flex-1' : ''}`}>
-          <div className='space-y-2'>
-            <span className='flex gap-2 w-full items-end text-start justify-start'>
+          <div className='space-y-1'>
+            <span className='flex gap-2 w-full items-end text-start justify-start mb-2'>
               <h2 className={'text-xl font-light'} style={{ color: 'var(--text-main)' }}>KYD Candidate:</h2>
               <div className={'text-xl font-bold'} style={{ color: 'var(--text-main)' }}>{developerName || 'N/A'}</div>
             </span>
@@ -111,14 +111,13 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
               <h3 className='text-sm font-semibold text-[--text-secondary]'>Date:</h3>
               <span className='text-sm text-[--text-main]'>{formatLocalDate(updatedAt)}</span>
             </span>
-            <div className={'text-sm'}>
               {Array.isArray(countries) && countries.length > 0 && (
                 (() => {
                   const countryNames = countries
                     .map(code => countriesLib.getName((code || '').toUpperCase(), 'en') || code)
                     .filter(Boolean);
                   return (
-                    <p className={'flex items-center gap-1'}>
+                    <p className={'flex items-center gap-1 text-sm'}>
                       <span className={'font-semibold'} style={{ color: 'var(--text-secondary)' }}>
                         {countryNames.length > 1 ? 'Countries:' : 'Country:'}
                       </span>
@@ -138,7 +137,7 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
                 })()
               )}
               {sources.length > 0 && (
-                <p className={'flex items-center gap-2 mt-2'}>
+                <p className='flex items-center gap-2 mt-2 text-sm'>
                   <a href="#appendix-connected" className={'inline-flex items-center gap-2 group'} style={{ color: 'var(--text-secondary)' }}>
                     <span className={'font-semibold'}>Sources:</span>
                     <span className={'flex items-center gap-2'}>
@@ -151,7 +150,6 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
                   </a>
                 </p>
               )}
-            </div>
             {(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">
@@ -190,7 +188,7 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
 
         {/* Badge Image with robust centered overlay */}
         <div className={`flex items-center ${rightBadgeLayout ? 'md:justify-end h-20' : 'justify-center w-full mt-4'} `}>
-          <div className={`relative w-full ${rightBadgeLayout ? 'max-w-[85px]' : 'px-20'} select-none`}>
+          <div className={`relative w-full ${rightBadgeLayout ? 'max-w-[85px]' : 'px-28'} select-none`}>
             <Image 
               src={finalBadgeImageUrl} 
               alt="KYD Badge" 

package/src/components/ResumeView.tsx

@@ -29,6 +29,14 @@ function asText(value: unknown): string {
   return String(value);
 }
 
+function hasText(value: unknown): boolean {
+  return asText(value).trim().length > 0;
+}
+
+function hasAnyText(...values: unknown[]): boolean {
+  return values.some(hasText);
+}
+
 const Row = ({ label, value }: { label: string; value?: string }) => {
   if (!value) return null;
   return (
@@ -54,6 +62,34 @@ export default function ResumeView({ resume, roleName, badgeId, isPublic, showDo
 
   const canDownload = !!(showDownloadButton && badgeId);
 
+  // Determine which sections have meaningful content and filter empty entries
+  const filteredSkillCategories = Array.isArray(skills?.categories)
+    ? (skills.categories as any[]).filter((cat: any) => Array.isArray(cat?.items) && cat.items.some(hasText))
+    : [];
+  const hasSkillsSection = filteredSkillCategories.length > 0;
+
+  const filteredExperience = experience.filter((exp: any) =>
+    hasAnyText(exp?.title, exp?.company, exp?.startDate, exp?.endDate) ||
+    (Array.isArray(exp?.highlights) && exp.highlights.some(hasText)) ||
+    (Array.isArray(exp?.technologies) && exp.technologies.some(hasText))
+  );
+  const hasExperienceSection = filteredExperience.length > 0;
+
+  const filteredProjects = projects.filter((p: any) =>
+    hasAnyText(p?.name, p?.description, p?.impact, p?.link) ||
+    (Array.isArray(p?.technologies) && p.technologies.some(hasText))
+  );
+  const hasProjectsSection = filteredProjects.length > 0;
+
+  const filteredEducation = education.filter((e: any) => hasAnyText(e?.degree, e?.institution, e?.graduationDate));
+  const hasEducationSection = filteredEducation.length > 0;
+
+  const filteredCertifications = certifications.filter((c: any) => hasAnyText(c?.name, c?.issuer, c?.date));
+  const hasCertificationsSection = filteredCertifications.length > 0;
+
+  const filteredLinks = links.filter((l: any) => hasAnyText(l?.label, l?.url));
+  const hasLinksSection = filteredLinks.length > 0;
+
   const handleDownloadResume = async () => {
     if (!badgeId) return;
     try {
@@ -113,22 +149,26 @@ export default function ResumeView({ resume, roleName, badgeId, isPublic, showDo
         </div>
       ) : null}
 
-      {Array.isArray(skills?.categories) && skills.categories.length > 0 ? (
+      {hasSkillsSection ? (
         <div>
           <div className={'text-lg font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>Skills</div>
           <div className={'space-y-1'}>
-            {skills.categories.map((cat: any, idx: number) => (
-              <Row key={idx} label={asText(cat?.name)} value={(Array.isArray(cat?.items) ? cat.items : []).join(', ')} />
+            {filteredSkillCategories.map((cat: any, idx: number) => (
+              <Row
+                key={idx}
+                label={asText(cat?.name)}
+                value={(Array.isArray(cat?.items) ? cat.items.filter(hasText) : []).join(', ')}
+              />
             ))}
           </div>
         </div>
       ) : null}
 
-      {experience.length > 0 ? (
+      {hasExperienceSection ? (
         <div>
           <div className={'text-lg font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>Experience</div>
           <div className={'space-y-4'}>
-            {experience.map((exp: any, idx: number) => (
+            {filteredExperience.map((exp: any, idx: number) => (
               <div key={idx} className={'space-y-1'}>
                 <div className={'font-semibold'} style={{ color: 'var(--text-main)' }}>
                   {asText(exp?.title)}{asText(exp?.company) ? ` — ${asText(exp?.company)}` : ''}
@@ -136,15 +176,15 @@ export default function ResumeView({ resume, roleName, badgeId, isPublic, showDo
                 <div className={'text-xs'} style={{ color: 'var(--text-secondary)' }}>
                   {(asText(exp?.startDate) || asText(exp?.endDate)) ? `${asText(exp?.startDate)} – ${asText(exp?.endDate) || 'Present'}` : ''}
                 </div>
-                {Array.isArray(exp?.highlights) && exp.highlights.length > 0 ? (
+                {Array.isArray(exp?.highlights) && exp.highlights.filter(hasText).length > 0 ? (
                   <ul className={'list-disc pl-5 text-sm'} style={{ color: 'var(--text-secondary)' }}>
-                    {exp.highlights.map((h: any, i: number) => (
+                    {exp.highlights.filter(hasText).map((h: any, i: number) => (
                       <li key={i}>{asText(h)}</li>
                     ))}
                   </ul>
                 ) : null}
-                {Array.isArray(exp?.technologies) && exp.technologies.length > 0 ? (
-                  <div className={'text-xs'} style={{ color: 'var(--text-secondary)' }}>Technologies: {exp.technologies.join(', ')}</div>
+                {Array.isArray(exp?.technologies) && exp.technologies.filter(hasText).length > 0 ? (
+                  <div className={'text-xs'} style={{ color: 'var(--text-secondary)' }}>Technologies: {exp.technologies.filter(hasText).join(', ')}</div>
                 ) : null}
               </div>
             ))}
@@ -152,17 +192,17 @@ export default function ResumeView({ resume, roleName, badgeId, isPublic, showDo
         </div>
       ) : null}
 
-      {projects.length > 0 ? (
+      {hasProjectsSection ? (
         <div>
           <div className={'text-lg font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>Projects</div>
           <div className={'space-y-4'}>
-            {projects.map((p: any, idx: number) => (
+            {filteredProjects.map((p: any, idx: number) => (
               <div key={idx} className={'space-y-1'}>
                 <div className={'font-semibold'} style={{ color: 'var(--text-main)' }}>{asText(p?.name)}</div>
                 {asText(p?.description) ? <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>{asText(p?.description)}</div> : null}
                 {asText(p?.impact) ? <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>Impact: {asText(p?.impact)}</div> : null}
-                {Array.isArray(p?.technologies) && p.technologies.length > 0 ? (
-                  <div className={'text-xs'} style={{ color: 'var(--text-secondary)' }}>Technologies: {p.technologies.join(', ')}</div>
+                {Array.isArray(p?.technologies) && p.technologies.filter(hasText).length > 0 ? (
+                  <div className={'text-xs'} style={{ color: 'var(--text-secondary)' }}>Technologies: {p.technologies.filter(hasText).join(', ')}</div>
                 ) : null}
                 {asText(p?.link) ? <div className={'text-xs'} style={{ color: 'var(--text-secondary)' }}>{asText(p?.link)}</div> : null}
               </div>
@@ -171,11 +211,11 @@ export default function ResumeView({ resume, roleName, badgeId, isPublic, showDo
         </div>
       ) : null}
 
-      {education.length > 0 ? (
+      {hasEducationSection ? (
         <div>
           <div className={'text-lg font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>Education</div>
           <div className={'space-y-2'}>
-            {education.map((e: any, idx: number) => (
+            {filteredEducation.map((e: any, idx: number) => (
               <div key={idx} className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>
                 {`${asText(e?.degree)} — ${asText(e?.institution)}${asText(e?.graduationDate) ? ` (${asText(e?.graduationDate)})` : ''}`}
               </div>
@@ -184,11 +224,11 @@ export default function ResumeView({ resume, roleName, badgeId, isPublic, showDo
         </div>
       ) : null}
 
-      {certifications.length > 0 ? (
+      {hasCertificationsSection ? (
         <div>
           <div className={'text-lg font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>Certifications</div>
           <div className={'space-y-1'}>
-            {certifications.map((c: any, idx: number) => (
+            {filteredCertifications.map((c: any, idx: number) => (
               <div key={idx} className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>
                 {`${asText(c?.name)} — ${asText(c?.issuer)}${asText(c?.date) ? ` (${asText(c?.date)})` : ''}`}
               </div>
@@ -197,11 +237,11 @@ export default function ResumeView({ resume, roleName, badgeId, isPublic, showDo
         </div>
       ) : null}
 
-      {links.length > 0 ? (
+      {hasLinksSection ? (
         <div>
           <div className={'text-lg font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>Links</div>
           <div className={'space-y-1'}>
-            {links.map((l: any, idx: number) => (
+            {filteredLinks.map((l: any, idx: number) => (
               <div key={idx} className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>
                 {`${asText(l?.label)}: ${asText(l?.url)}`}
               </div>

package/src/components/RoleOverviewCard.tsx

@@ -62,8 +62,8 @@ export default function RoleOverviewCard({
     >
       <div className="mb-3  px-5 pt-5 flex items-start justify-between gap-2">
         <div>
-          <div className={'font-semibold'} style={{ color: 'var(--text-main)' }}>{title}</div>
-          <div className={'text-xs mt-1'} style={{ color: 'var(--text-secondary)' }}>How well the candidate aligns with the target role based on KYD evidence.</div>
+          <div className={'font-semibold text-xl'} style={{ color: 'var(--text-main)' }}>{title}</div>
+          <div className={'text-sm mt-1'} style={{ color: 'var(--text-secondary)' }}>How well the candidate aligns with the target role based on KYD evidence.</div>
         </div>
         <span className={'relative inline-flex items-center group cursor-help'} style={{ color: 'var(--text-secondary)' }}>
           <FiInfo />

package/src/components/SkillsBubble.tsx

@@ -408,12 +408,12 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
               color: 'var(--text-secondary)'
             }}
           >
-            <div className="flex items-center gap-2">
-              <span className="inline-block h-3 w-3 rounded-full" style={{ background: green5 }} />
+            <div className="flex items-center gap-2 text-base">
+              <span className="inline-block h-3 w-3 rounded-full  border border-[var(--text-secondary)]" style={{ background: green5 }} />
               <span>Size = evidence count per category</span>
             </div>
-            <div className="flex items-center gap-2 mt-1">
-              <span className="inline-block h-3 w-3 rounded-full border border-[var(--text-secondary)]" style={{ background: green1 }} />
+            <div className="flex items-center gap-2 mt-1 text-base">
+              <span className="inline-block h-3 w-3 rounded-full" style={{ background: green1 }} />
               <span>Color = experience (darker = more)</span>
             </div>
           </div>