kyd-shared-badge 0.3.123 → 0.3.125

package/package.json

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

package/src/connect/ConnectAccounts.tsx

@@ -3,7 +3,7 @@ import { useRouter } from 'next/navigation';
 import { ProviderIcon } from '../utils/provider';
 import { normalizeLinkedInInput } from './linkedin';
 import type { ConnectAccountsProps } from './types';
-import { CheckCircle, Link2, LinkIcon, Unlink, ArrowLeft, ExternalLink, Eye, Lock, InfoIcon } from 'lucide-react';
+import { CheckCircle, Link2, LinkIcon, Unlink, ArrowLeft, ExternalLink, Eye, Lock, InfoIcon, EyeClosed, EyeOffIcon } from 'lucide-react';
 import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
 import { Button, Input, Spinner, Card, CardHeader, CardContent, CardTitle, ConnectProgress } from '../ui';
 import Link from 'next/link';
@@ -424,15 +424,24 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
                       </Button>
                     </motion.div>
                     <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
-                      <Button
-                        className="w-full sm:w-auto bg-[var(--icon-accent)] text-white transition-colors font-semibold"
-                        onClick={onGithubAppInstall}
-                      >
-                        <span className="flex items-center justify-center">
-                          <ExternalLink className="w-4 h-4 mr-2" />
-                          Yes, connect my private repos
-                        </span>
-                      </Button>
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              className="w-full sm:w-auto bg-[var(--icon-accent)] text-white transition-colors font-semibold"
+                              onClick={onGithubAppInstall}
+                            >
+                              <span className="flex items-center justify-center">
+                                <ExternalLink className="w-4 h-4 mr-2" />
+                                Yes, connect my private repos
+                              </span>
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>Connect your private repositories</p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
                     </motion.div>
                   </div>
                 </motion.div>
@@ -530,15 +539,24 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
                                   </div>
                                 ) : (
                                   <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
-                                    <Button
-                                      onClick={() => setSelectedProviderIdAndCallback('github')}
-                                      onMouseEnter={() => setPreview('github', '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"
-                                    >
-                                      <Eye className="size-3 sm:size-4" />
-                                      <span className="sm:text-base text-sm">Connect</span>
-                                    </Button>
+                                    <TooltipProvider>
+                                      <Tooltip>
+                                        <TooltipTrigger asChild>
+                                          <Button
+                                            onClick={() => setSelectedProviderIdAndCallback('github')}
+                                            onMouseEnter={() => setPreview('github', '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"
+                                          >
+                                            <Eye className="size-3 sm:size-4" />
+                                            <span className="sm:text-base text-sm">Connect</span>
+                                          </Button>
+                                        </TooltipTrigger>
+                                        <TooltipContent>
+                                          <p>Connect your public repositories</p>
+                                        </TooltipContent>
+                                      </Tooltip>
+                                    </TooltipProvider>
                                   </motion.div>
                                 )}
 
@@ -561,15 +579,24 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
                                   </div>
                                 ) : (
                                   <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" />
-                                      <span className="sm:text-base text-sm">Connect</span>
-                                    </Button>
+                                    <TooltipProvider>
+                                      <Tooltip>
+                                        <TooltipTrigger asChild>
+                                          <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"
+                                          >
+                                            <EyeOffIcon className="size-3 sm:size-4" />
+                                            <span className="sm:text-base text-sm">Connect</span>
+                                          </Button>
+                                        </TooltipTrigger>
+                                        <TooltipContent>
+                                          <p>Connect your private repositories</p>
+                                        </TooltipContent>
+                                      </Tooltip>
+                                    </TooltipProvider>
                                   </motion.div>
                                 )}
                               </div>

package/src/ui/connect-progress.tsx

@@ -58,29 +58,7 @@ export function ConnectProgress(props: ConnectProgressProps) {
     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, normalizedIds, progressPercent])
 
@@ -147,6 +125,10 @@ export function ConnectProgress(props: ConnectProgressProps) {
 
   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)'}}>
@@ -159,9 +141,11 @@ export function ConnectProgress(props: ConnectProgressProps) {
             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 flex flex-col gap-2 items-start justify-start">
-            <div className="text-base font-semibold truncate text-[var(--text-main)]">{progressCopy.headline}</div>
+            <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>

package/src/ui/progress-circle.tsx

@@ -1,6 +1,7 @@
 'use client'
 import React from 'react'
-import { scoreToCssVar } from '../colors'
+import { scoreToCssVar, red as redHex, green as greenHex } from '../colors'
+import { ArrowUpIcon } from 'lucide-react'
 
 export type ProgressCircleProps = {
   value: number
@@ -13,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])
@@ -33,6 +37,10 @@ export function ProgressCircle(props: ProgressCircleProps) {
   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 }}>
@@ -90,11 +98,15 @@ export function ProgressCircle(props: ProgressCircleProps) {
           stroke={strokeColor}
           strokeOpacity={0.15}
           strokeWidth={2}
-          className="animate-pulse"
-          style={{ transition: 'stroke 400ms ease, stroke-opacity 400ms ease' }}
+          // className="animate-pulse"
+          // style={{ transition: 'stroke 200ms ease, stroke-opacity 200ms ease' }}
         />
       </svg>
-      
+      {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>
   )
 }