kyd-shared-badge 0.3.122 → 0.3.124

package/package.json

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

package/src/connect/ConnectAccounts.tsx

@@ -208,6 +208,8 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
     setSelectedProviderIdAndCallback(null);
     setLinkUrl('');
     setShowDataHandling(false);
+    setPreviewProviderId(null);
+    setPreviewAction(null);
   };
 
   const cardVariants = {
@@ -239,7 +241,7 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
   }, [githubConnectedAccount]);
   
   // Progress UI is outsourced to ConnectProgress
-  
+
   return (
     <div className="w-full grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_380px] lg:justify-center gap-6 items-start max-w-7xl">
       <div className="w-full flex justify-end">
@@ -561,6 +563,8 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
                                   <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
                                     <Button
                                       onClick={() => setSelectedProviderIdAndCallback('githubapp')}
+                                      onMouseEnter={() => setPreview('githubapp', 'connect')}
+                                      onMouseLeave={clearPreview}
                                       className="bg-[var(--icon-button-secondary)] text-[var(--text-main)] hover:bg-[var(--icon-accent)] hover:text-white border-0 sm:px-4 px-3 py-1 sm:py-2 rounded-lg flex items-center gap-2"
                                     >
                                       <Lock className="size-3 sm:size-4" />

package/src/ui/connect-progress.tsx

@@ -18,129 +18,162 @@ export type ConnectProgressProps = {
 export function ConnectProgress(props: ConnectProgressProps) {
   const { providers, connectedIds, className, layout = 'fixed-desktop', previewProviderId, previewAction, selectedProviderId } = props
 
-  const hasGithub = connectedIds.has('github')
-  const hasLinkedIn = connectedIds.has('linkedin')
+  const normalizeId = (s: string) => s.toLowerCase().replace(/[^a-z]/g, '')
+  const computeNormalizedSet = (ids: Set<string>) => {
+    const norm = new Set<string>()
+    ids.forEach(id => norm.add(normalizeId(id)))
+    return norm
+  }
+
+  const normalizedIds = useMemo(() => computeNormalizedSet(connectedIds), [connectedIds])
+  const hasGithub = normalizedIds.has('github')
+  const hasLinkedIn = normalizedIds.has('linkedin')
   const otherConnectedCount = useMemo(() => {
     let count = 0
-    connectedIds.forEach(id => { if (id !== 'github' && id !== 'linkedin') count += 1 })
+    normalizedIds.forEach(id => { if (id !== 'github' && id !== 'githubapp' && id !== 'linkedin') count += 1 })
     return count
-  }, [connectedIds])
+  }, [normalizedIds])
 
   const computePercent = (ids: Set<string>) => {
-    const gh = ids.has('github')
-    const li = ids.has('linkedin')
+    const norm = computeNormalizedSet(ids)
+    const gh = norm.has('github')
+    const gha = norm.has('githubapp')
+    const li = norm.has('linkedin')
     let others = 0
-    ids.forEach(id => {
-      const lid = id.toLowerCase()
-      if (lid !== 'github' && lid !== 'linkedin') others += 1
-    })
-    const githubWeight = gh ? 65 : 0
-    const linkedinWeight = li ? 15 : 0
-    const othersWeight = Math.min(others, 2) * 10
-    return Math.max(0, Math.min(100, githubWeight + linkedinWeight + othersWeight))
+    norm.forEach(id => { if (id !== 'github' && id !== 'githubapp' && id !== 'linkedin') others += 1 })
+    const githubWeight = gh ? 60 : 0
+    const githubAppWeight = gha ? 20 : 0
+    const linkedinWeight = li ? 0 : 0 // LinkedIn is not included in the score
+    const othersWeight = others * 10
+    return Math.max(0, Math.min(100, githubWeight + githubAppWeight + linkedinWeight + othersWeight))
   }
 
   const progressPercent = useMemo(() => computePercent(connectedIds), [connectedIds])
 
   const previewPercent = useMemo(() => {
-    const pid = (previewProviderId || '').toLowerCase()
+    const pid = normalizeId(previewProviderId || '')
     if (!pid || !previewAction) return null as number | null
-    if (pid === 'githubapp') return null
-    const next = new Set<string>(Array.from(connectedIds))
+    const next = new Set<string>(Array.from(normalizedIds))
     const has = next.has(pid)
     if (previewAction === 'connect' && !has) next.add(pid)
     if (previewAction === 'disconnect' && has) next.delete(pid)
     const val = computePercent(next)
+    if (process.env.NODE_ENV !== 'production') {
+      try {
+        // Debug details for preview behavior
+        const beforePercent = progressPercent
+        const beforeOthers = (() => {
+          let c = 0; normalizedIds.forEach(id => { if (id !== 'github' && id !== 'githubapp' && id !== 'linkedin') c += 1 })
+          return c
+        })()
+        let afterOthers = 0; next.forEach(id => { if (id !== 'github' && id !== 'githubapp' && id !== 'linkedin') afterOthers += 1 })
+        // eslint-disable-next-line no-console
+        console.log('[ConnectProgress] preview', {
+          pid,
+          previewAction,
+          hasBefore: normalizedIds.has(pid),
+          beforePercent,
+          afterPercent: val,
+          beforeOthers,
+          afterOthers,
+          normalizedIds: Array.from(normalizedIds),
+          nextIds: Array.from(next),
+        })
+      } catch {}
+    }
     return val === progressPercent ? null : val
-  }, [previewProviderId, previewAction, connectedIds, progressPercent])
+  }, [previewProviderId, previewAction, normalizedIds, progressPercent])
 
   const progressCopy = useMemo(() => {
-    const score = progressPercent
-    if (score === 0) {
-      return {
-        headline: 'Get started — connect GitHub',
-        body: 'GitHub contributes ~65% of your profile strength. Add LinkedIn (+15%) and 1–2 other platforms (+10% each). 70%+ is strong; 100% is optional.'
-      }
-    }
-    if (hasGithub && score < 70) {
+    const score = previewPercent ?? progressPercent
+
+    if (score < 20) {
       return {
-        headline: 'Good base — add more signals',
-        body: 'Add LinkedIn (+15%) and at least one other platform (+10%) to reach 70%+, which is considered strong. 100% is not mandatory.'
+        headline: 'Insufficient',
+        body: 'No meaningful data connections',
       }
-    }
-    if (!hasGithub && score < 70) {
+    } else if (score < 40) {
       return {
-        headline: 'Add GitHub for a big boost',
-        body: 'Current signals are light. Connecting GitHub adds ~65% weight and significantly improves your profile.'
+        headline: 'Sparse',
+        body: 'Limited verified sources',
       }
-    }
-    if (score >= 70 && score < 90) {
+    } else if (score < 60) {
       return {
-        headline: 'Strong — recommended coverage achieved',
-        body: '70%+ indicates a strong profile. Adding more platforms can further improve verification. 100% is optional but even better.'
+        headline: 'Adequate',
+        body: 'Adequate → Minimum viable data coverage',
       }
-    }
-    if (score >= 90) {
+    } else if (score < 80) {
       return {
-        headline: 'Excellent — high confidence',
-        body: 'You are near complete coverage. 100% is not required, but additional platforms can further increase confidence.'
+        headline: 'Robust',
+        body: 'Strong, multi-source data foundation',
       }
-    }
-    if (score === 100) {
+    } else {
       return {
-        headline: 'Complete — high confidence',
-        body: 'You\'ve achieved the recommended coverage for a very strong profile! Connecting even more accounts can further strengthen your verification.'
+        headline: 'Optimal',
+        body: 'Comprehensive, high-confidence dataset',
       }
     }
-    return {
-      headline: 'Keep going',
-      body: 'Connect more platforms to strengthen your profile. 70%+ is strong; 100% is optional.'
-    }
-  }, [progressPercent, hasGithub])
+  }, [previewPercent, progressPercent]);
 
   const selectedPulse = useMemo(() => {
-    const sid = (selectedProviderId || '').toLowerCase()
+    const sid = normalizeId(selectedProviderId || '')
     if (!sid || sid === 'githubapp') return { from: undefined as number | undefined, to: undefined as number | undefined }
     // Do not show if already connected
-    if (connectedIds.has(sid)) return { from: undefined as number | undefined, to: undefined as number | undefined }
+    if (normalizedIds.has(sid)) return { from: undefined as number | undefined, to: undefined as number | undefined }
     // Potential gain if they proceed with this provider
     let gain = 0
     if (sid === 'github') gain = 65
     else if (sid === 'linkedin') gain = 15
     else {
-      // Others contribute up to 2*10 capped
+      // Others always contribute +10 each (no cap)
       const othersAlready = otherConnectedCount
-      if (othersAlready < 2) gain = 10
+      gain = 10
     }
     const to = Math.max(0, Math.min(100, progressPercent + gain))
+    if (process.env.NODE_ENV !== 'production') {
+      try {
+        // eslint-disable-next-line no-console
+        console.log('[ConnectProgress] selectedPulse', {
+          sid,
+          progressPercent,
+          gain,
+          to,
+          othersAlready: otherConnectedCount,
+        })
+      } catch {}
+    }
     return { from: progressPercent, to }
-  }, [selectedProviderId, connectedIds, progressPercent, otherConnectedCount])
+  }, [selectedProviderId, normalizedIds, progressPercent, otherConnectedCount])
 
+  const isPreviewing = previewPercent !== null && previewPercent !== undefined
   const valueToShow = previewPercent ?? progressPercent
+  const centerIndicator = useMemo(() => {
+    if (previewPercent == null) return null as 'up' | 'down' | null
+    return previewPercent > progressPercent ? 'up' : previewPercent < progressPercent ? 'down' : null
+  }, [previewPercent, progressPercent])
 
   const content = (
     <Card className={`border-[var(--icon-button-secondary)] ${className || ''}`} style={{ backgroundColor: 'var(--content-card-background)'}}>
-      <CardContent className="py-3 px-3">
-        <div className="flex items-center gap-3">
+      <div className="p-4">
+        <div className="flex items-start gap-3">
           <ProgressCircle
             value={valueToShow}
             size={64}
             thickness={6}
-            highlightFrom={selectedPulse.from}
-            highlightTo={selectedPulse.to}
-            highlightPulse={Boolean(selectedPulse.to)}
+            highlightFrom={isPreviewing ? undefined : selectedPulse.from}
+            highlightTo={isPreviewing ? undefined : selectedPulse.to}
+            highlightPulse={Boolean(selectedPulse.to) && !isPreviewing}
+            centerIndicator={centerIndicator}
+            indicatorPulse={Boolean(centerIndicator)}
           />
-          <div className="min-w-0 max-w-xs">
-            <div className="text-base font-semibold truncate" style={{ color: 'var(--text-main)'}}>{progressCopy.headline}</div>
-            <div className="text-sm mt-0.5" style={{ color: 'var(--text-secondary)'}}>
+          <div className="min-w-0 max-w-xs flex flex-col gap-2 items-start justify-start">
+            <div className="text-base font-semibold truncate text-[var(--text-main)]">Profile Depth: {progressCopy.headline}</div>
+            <div className="text-sm text-[var(--text-secondary)]">
               {progressCopy.body}
             </div>
-            <div className="text-sm mt-1" style={{ color: 'var(--text-secondary)'}}>
-              Weighted score • {valueToShow}%
-            </div>
           </div>
         </div>
-      </CardContent>
+      </div>
     </Card>
   )
 

package/src/ui/progress-circle.tsx

@@ -1,5 +1,7 @@
 'use client'
 import React from 'react'
+import { scoreToCssVar, red as redHex, green as greenHex } from '../colors'
+import { ArrowUpIcon } from 'lucide-react'
 
 export type ProgressCircleProps = {
   value: number
@@ -12,10 +14,13 @@ export type ProgressCircleProps = {
   highlightFrom?: number
   highlightTo?: number
   highlightPulse?: boolean
+  // Optional center indicator arrow: 'up' (green) or 'down' (red)
+  centerIndicator?: 'up' | 'down' | null
+  indicatorPulse?: boolean
 }
 
 export function ProgressCircle(props: ProgressCircleProps) {
-  const { value, size = 72, thickness = 6, className, showLabel = true, label, highlightFrom, highlightTo, highlightPulse } = props
+  const { value, size = 72, thickness = 6, className, showLabel = true, label, highlightFrom, highlightTo, highlightPulse, centerIndicator, indicatorPulse } = props
 
   const rawId = React.useId()
   const gradientId = React.useMemo(() => `kyd-pc-${String(rawId).replace(/:/g, '')}` , [rawId])
@@ -31,6 +36,12 @@ export function ProgressCircle(props: ProgressCircleProps) {
   const highlightLength = hasHighlight ? circumference * ((toClamped - fromClamped) / 100) : 0
   const highlightOffset = hasHighlight ? circumference * (1 - toClamped / 100) : 0
 
+  const strokeColor = React.useMemo(() => scoreToCssVar(clamped), [clamped])
+  const indicatorColor = React.useMemo(() => {
+    if (!centerIndicator) return undefined
+    return centerIndicator === 'up' ? `var(--status-positive, ${greenHex})` : `var(--status-negative, ${redHex})`
+  }, [centerIndicator])
+
   return (
     <div className={`relative inline-flex items-center justify-center ${className || ''}`} style={{ width: size, height: size }}>
       <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className="block">
@@ -54,12 +65,12 @@ export function ProgressCircle(props: ProgressCircleProps) {
           cy={size / 2}
           r={radius}
           fill="none"
-          stroke={`url(#${gradientId})`}
+          stroke={strokeColor}
           strokeWidth={thickness}
           strokeLinecap="round"
           strokeDasharray={circumference}
           strokeDashoffset={dashOffset}
-          style={{ transition: 'stroke-dashoffset 800ms ease' }}
+          style={{ transition: 'stroke-dashoffset 800ms ease, stroke 400ms ease, stroke-opacity 400ms ease' }}
           transform={`rotate(-90 ${size / 2} ${size / 2})`}
         />
         {hasHighlight ? (
@@ -84,18 +95,16 @@ export function ProgressCircle(props: ProgressCircleProps) {
           cy={size / 2}
           r={radius + thickness / 2}
           fill="none"
-          stroke="var(--icon-accent)"
+          stroke={strokeColor}
           strokeOpacity={0.15}
           strokeWidth={2}
-          className="animate-pulse"
+          // className="animate-pulse"
+          // style={{ transition: 'stroke 200ms ease, stroke-opacity 200ms ease' }}
         />
       </svg>
-      {showLabel ? (
-        <div
-          className="absolute inset-0 flex items-center justify-center text-[10px] sm:text-xs font-medium"
-          style={{ color: 'var(--text-main)' }}
-        >
-          {label ? label : `${Math.round(clamped)}%`}
+      {centerIndicator ? (
+        <div className={`absolute inset-0 flex items-center justify-center`} aria-hidden>
+          <ArrowUpIcon className="w-4 h-4 text-[var(--icon-accent)]" />
         </div>
       ) : null}
     </div>