kyd-shared-badge 0.3.123 → 0.3.124

package/package.json

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

package/src/ui/connect-progress.tsx

@@ -147,6 +147,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 +163,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>
   )
 }