@titan-design/react-ui 0.2.7 → 0.3.0

package/src/components/custom/Workout/VelocityStrip.test.tsx

@@ -232,3 +232,13 @@ describe('calculateMeanVelocity', () => {
     expect(calculateMeanVelocity([])).toBe(0)
   })
 })
+
+describe('VelocityStrip all-zero velocities (NaN guard)', () => {
+  it('emits a valid 0% bar height (not NaN) when every velocity is zero (expanded)', () => {
+    render(<VelocityStrip velocities={[0, 0, 0]} expanded />)
+    // Without the guard, 0 / (0 * 1.15) === NaN and the bar height becomes
+    // 'NaN%' (dropped by jsdom, leaving no height); the guard flattens to '0%'.
+    expect(screen.getByTestId('velocity-bar-0')).toHaveStyle({ height: '0%' })
+    expect(screen.getByTestId('velocity-bar-2')).toHaveStyle({ height: '0%' })
+  })
+})

package/src/components/custom/Workout/VelocityStrip.tsx

@@ -1,6 +1,8 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { useEffect, useState } from 'react'
 import { View, Text, Pressable, Animated, Easing, type ViewProps } from 'react-native'
+import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
+import { formatVelocity } from '../../../utils/workout-format'
 
 export interface VelocityStripProps extends ViewProps {
   velocities: number[]
@@ -12,12 +14,8 @@ export interface VelocityStripProps extends ViewProps {
   className?: string
 }
 
-const VEL_COLORS = {
-  green: '#2ed573',
-  yellow: '#ffd43b',
-  orange: '#ffa502',
-  red: '#ff4757',
-}
+// Canonical scale shared with SetRow's RPE color (see theme/workout-tokens.ts).
+const VEL_COLORS = WORKOUT_TOKENS.scale
 
 export function getVelocityZoneColor(velocity: number): string {
   if (velocity >= 1.0) return 'vel-green'
@@ -164,7 +162,7 @@ export function VelocityStrip({
           paddingBottom: expanded ? 24 : 0,
           paddingHorizontal: expanded ? 6 : 0,
           paddingVertical: expanded ? undefined : 8,
-          backgroundColor: expanded ? '#1C1C1C' : 'transparent',
+          backgroundColor: expanded ? 'var(--color-surface-raised)' : 'transparent',
           overflow: expanded ? 'visible' : 'hidden',
         },
       ]}
@@ -178,7 +176,10 @@ export function VelocityStrip({
       >
         {velocities.map((v, i) => {
           const zone = getVelocityZoneColor(v)
-          const barHeightPct = Math.round((v / (maxVelocity * 1.15)) * 100)
+          // Guard all-zero velocities (idle / pre-rep): maxVelocity === 0 makes
+          // this 0 / 0 === NaN and emits height:'NaN%'. Flatten the bars instead.
+          const barHeightPct =
+            maxVelocity > 0 ? Math.round((v / (maxVelocity * 1.15)) * 100) : 0
 
           const bar = (
             <View
@@ -188,10 +189,10 @@ export function VelocityStrip({
               {expanded && (
                 <Animated.View style={{ opacity: labelOpacity, alignItems: 'center', position: 'absolute', top: -13, left: 0, right: 0 }} accessibilityElementsHidden>
                   <Text
-                    style={{ fontSize: 8, fontWeight: '600', color: '#9CA3AF' }}
+                    style={{ fontSize: 8, fontWeight: '600', color: 'var(--color-text-secondary)' }}
                     testID={`velocity-label-${i}`}
                   >
-                    {v.toFixed(2)}
+                    {formatVelocity(v)}
                   </Text>
                 </Animated.View>
               )}
@@ -210,7 +211,7 @@ export function VelocityStrip({
                 }
                 testID={`velocity-bar-${i}`}
                 accessibilityRole="image"
-                accessibilityLabel={`Rep ${i + 1}: ${v.toFixed(2)} meters per second`}
+                accessibilityLabel={`Rep ${i + 1}: ${formatVelocity(v)} meters per second`}
               />
             </View>
           )
@@ -222,7 +223,7 @@ export function VelocityStrip({
                 style={{ flex: 1, height: '100%' }}
                 onPress={() => onRepPress(i, v)}
                 accessibilityRole="button"
-                accessibilityLabel={`Rep ${i + 1}: ${v.toFixed(2)} meters per second, tap for details`}
+                accessibilityLabel={`Rep ${i + 1}: ${formatVelocity(v)} meters per second, tap for details`}
                 testID={`velocity-bar-pressable-${i}`}
               >
                 {bar}
@@ -249,16 +250,16 @@ export function VelocityStrip({
           <Text
             style={{
               fontSize: 10,
-              color: '#9CA3AF',
+              color: 'var(--color-text-secondary)',
               fontFamily: 'Inter, sans-serif',
             }}
           >
-            {meanZone} {'\u00B7'} {meanVelocity.toFixed(2)} m/s
+            {meanZone} {'\u00B7'} {formatVelocity(meanVelocity)} m/s
           </Text>
           <Text
             style={{
               fontSize: 10,
-              color: '#9CA3AF',
+              color: 'var(--color-text-secondary)',
               fontFamily: 'Inter, sans-serif',
               ...getLossStyle(loss),
             }}

package/src/components/custom/Workout/WeekRow.tsx

@@ -104,7 +104,7 @@ export function WeekRow({
             fontSize: 13,
             fontWeight: '700',
             fontFamily: 'Inter, sans-serif',
-            color: isCurrent ? BRAND_PRIMARY : '#F3F4F6',
+            color: isCurrent ? BRAND_PRIMARY : 'var(--color-text-primary)',
           }}
           accessibilityElementsHidden
         >

package/src/components/custom/Workout/WorkoutCard.tsx

@@ -43,9 +43,11 @@ export interface WorkoutCardProps extends ViewProps {
 }
 
 const COLORS = {
-  textPrimary: '#F3F4F6',
-  textSecondary: '#9CA3AF',
-  textTertiary: '#6B7280',
+  // Theme-aware foregrounds: resolve to a readable color in both light and dark
+  // (react-native-web passes the CSS var through to the inline style).
+  textPrimary: 'var(--color-text-primary)',
+  textSecondary: 'var(--color-text-secondary)',
+  textTertiary: 'var(--color-text-tertiary)',
   statusSuccess: '#14B8A6',
   brandPrimary: '#FF7900',
   borderDefault: '#1F1F1F',

package/src/components/custom/Workout/index.ts

@@ -4,11 +4,7 @@ export {
   type BaseBadgeVariant,
   type BaseBadgeSize,
 } from './BaseBadge'
-export {
-  WeightBadge,
-  type WeightBadgeProps,
-  type WeightBadgeSize,
-} from './WeightBadge'
+export { WeightBadge, type WeightBadgeProps, type WeightBadgeSize } from './WeightBadge'
 export { PrBadge, type PrBadgeProps, type PRType } from './PrBadge'
 export { StatusDot, type StatusDotVariant, type StatusDotProps } from './StatusDot'
 export { PlaceholderStrip, type PlaceholderStripProps } from './PlaceholderStrip'
@@ -24,11 +20,7 @@ export {
   calculateVelocityLoss,
   calculateMeanVelocity,
 } from './VelocityStrip'
-export {
-  MuscleGroupChip,
-  type MuscleGroupChipProps,
-  type VolumeStatus,
-} from './MuscleGroupChip'
+export { MuscleGroupChip, type MuscleGroupChipProps, type VolumeStatus } from './MuscleGroupChip'
 export { Sparkline, type SparklineProps } from './Sparkline'
 export { SetRow, type SetRowProps, type SetRowMode } from './SetRow'
 export { InputBar, type InputBarProps } from './InputBar'
@@ -49,11 +41,7 @@ export {
   type WorkoutMuscleGroup,
   type WorkoutMuscleVolumeStatus,
 } from './WorkoutCard'
-export {
-  MesoCard,
-  type MesoCardProps,
-  type MesoVolumeHeatmapEntry,
-} from './MesoCard'
+export { MesoCard, type MesoCardProps, type MesoVolumeHeatmapEntry } from './MesoCard'
 export {
   PrHistoryModal,
   type PrHistoryModalProps,
@@ -91,25 +79,76 @@ export {
   type WorkoutDot,
   type WorkoutDotStatus,
 } from './CapacityBandChart'
-export { BodyMap, type BodyMapProps, type BodyMapData } from './BodyMap'
-export {
-  BodyMapDetailPanel,
-  type BodyMapDetailPanelProps,
-  type ContributingExercise,
-  type UpcomingExercise,
+// BodyMap / BodyMapDetailPanel / TrainingStatusPage depend on
+// `react-native-body-highlighter` at runtime. Their VALUE exports live behind the
+// `@titan-design/react-ui/bodymap` subpath to keep this barrel body-highlighter-free.
+// Type-only re-exports stay here (erased at build, so no runtime pull).
+export type { BodyMapProps, BodyMapData } from './BodyMap'
+export type {
+  BodyMapDetailPanelProps,
+  ContributingExercise,
+  UpcomingExercise,
 } from './BodyMapDetailPanel'
+export type {
+  TrainingStatusPageProps,
+  TrainingStatusMuscle,
+  TrainingStatusSummary,
+} from './TrainingStatusPage'
+export {
+  ProgramPlanningPage,
+  deriveNavLevel,
+  toProgressBarMesos,
+  findMeso,
+  findWeek,
+  findWorkout,
+  buildBreadcrumbs,
+  type ProgramPlanningPageProps,
+  type PlanMeso,
+  type PlanWeek,
+  type PlanWorkout,
+  type ProgramNavLevel,
+  type ProgramSelection,
+  type ProgramBreadcrumb,
+} from './ProgramPlanningPage'
 export {
+  ExerciseDetailPage,
+  deriveExerciseStats,
+  toExerciseCardProps,
+  summarizeVbt,
+  EXERCISE_DETAIL_TABS,
+  type ExerciseDetailPageProps,
+  type ExerciseDetailTab,
+  type ExerciseDetailHeader,
+  type ExerciseDetailEntry,
+  type ExerciseTrend,
+  type ExerciseVbtSet,
+  type ExerciseVbt,
+  type ExerciseDetailStats,
+  type VbtSummary,
+} from './ExerciseDetailPage'
+// muscleTaxonomy imports `react-native-body-highlighter` at runtime. Its value
+// exports (incl. the MuscleGroup / SimpleMuscleGroup enums) live behind the
+// `@titan-design/react-ui/bodymap` subpath. Only type-only re-exports stay here.
+export type {
   MuscleGroup,
   SimpleMuscleGroup,
-  SIMPLE_TO_DETAILED,
-  DETAILED_TO_SIMPLE,
-  MUSCLE_TO_SVG_SLUGS,
-  MUSCLE_TO_CATEGORY,
-  MUSCLE_DISPLAY_NAMES,
-  SIMPLE_DISPLAY_NAMES,
-  DEFAULT_VOLUME_LANDMARKS,
-  VOLUME_STATUS_LABELS,
-  getHeatmapColor,
-  type MovementCategory,
-  type VolumeLandmarks,
+  MovementCategory,
+  VolumeLandmarks,
 } from './muscleTaxonomy'
+export {
+  ActiveWorkoutPage,
+  countCompletedSets,
+  deriveWorkoutProgress,
+  findActiveExercise,
+  statusToCardState,
+  toActiveCardProps,
+  groupExercises,
+  type ActiveWorkoutPageProps,
+  type ActiveWorkoutExercise,
+  type ActiveWorkoutSuperset,
+  type ActiveWorkoutInput,
+  type ActiveWorkoutRest,
+  type ActiveExerciseStatus,
+  type WorkoutProgress,
+  type WorkoutGroup,
+} from './ActiveWorkoutPage'

package/src/theme/config.completeness.test.ts

@@ -0,0 +1,77 @@
+import { describe, it, expect } from 'vitest'
+import { readFileSync } from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { darkThemeCSSVars, lightThemeCSSVars } from './config'
+
+/**
+ * Drift guard for the token codegen source (TD-05.08).
+ *
+ * `config.ts` (darkThemeCSSVars / lightThemeCSSVars) is the source that
+ * `tokens-css.ts` renders into `dist/tokens.css`. It must stay a complete,
+ * value-accurate mirror of the `:root` / `.light` custom properties in
+ * `global.css`; otherwise the generated stylesheet silently drifts from the
+ * design system (the exact gap this ticket closed). This test fails if
+ * global.css gains a `:root` var that config.ts does not cover, or if any
+ * shared var's value diverges.
+ */
+
+const themeDir = path.dirname(fileURLToPath(import.meta.url))
+const css = readFileSync(path.join(themeDir, 'global.css'), 'utf8')
+
+/**
+ * global.css :root vars intentionally excluded from the codegen source.
+ * Empty today — every :root var is mirrored. Add a var here (with a reason)
+ * only if it is genuinely prototype-irrelevant, rather than silently skipping.
+ */
+const CODEGEN_ALLOWLIST = new Set<string>([])
+
+function parseVarBlock(header: RegExp): Map<string, string> {
+  const match = css.match(header)
+  if (!match) throw new Error(`could not locate CSS block for ${header}`)
+  const vars = new Map<string, string>()
+  for (const line of match[1].split('\n')) {
+    const declaration = line.match(/^\s*(--[a-z0-9-]+):\s*(.+?);\s*$/i)
+    if (declaration) vars.set(declaration[1], declaration[2].trim())
+  }
+  return vars
+}
+
+const globalDark = parseVarBlock(/:root\s*\{([\s\S]*?)\n\s*\}/)
+const globalLight = parseVarBlock(/\.light,\s*\n?\s*:root\.light\s*\{([\s\S]*?)\n\s*\}/)
+
+const cases = [
+  ['dark', globalDark, darkThemeCSSVars as Record<string, string>],
+  ['light', globalLight, lightThemeCSSVars as Record<string, string>],
+] as const
+
+describe('token codegen completeness (config.ts vs global.css)', () => {
+  it('parses both global.css theme blocks', () => {
+    expect(globalDark.size).toBeGreaterThan(90)
+    expect(globalLight.size).toBe(globalDark.size)
+  })
+
+  for (const [mode, globalVars, cfg] of cases) {
+    it(`${mode}: config covers every global.css :root var with the exact value`, () => {
+      const missing: string[] = []
+      const mismatched: string[] = []
+      for (const [name, value] of globalVars) {
+        if (CODEGEN_ALLOWLIST.has(name)) continue
+        if (!(name in cfg)) {
+          missing.push(name)
+        } else if (cfg[name] !== value) {
+          mismatched.push(`${name}: global='${value}' config='${cfg[name]}'`)
+        }
+      }
+      expect(missing, 'global.css vars missing from config.ts codegen source').toEqual([])
+      expect(mismatched, 'value drift between config.ts and global.css').toEqual([])
+    })
+
+    it(`${mode}: config emits no var absent from global.css`, () => {
+      const extra = Object.keys(cfg).filter(
+        (name) => !globalVars.has(name) && !CODEGEN_ALLOWLIST.has(name),
+      )
+      expect(extra, 'config.ts vars not present in global.css :root').toEqual([])
+    })
+  }
+})

package/src/theme/config.ts

@@ -7,6 +7,35 @@
 
 import { semanticColorsLight, semanticColorsDark, type ThemeMode } from './tokens/semantic'
 
+// Theme-independent custom properties: identical in light and dark in
+// global.css (RGB glow decompositions, font families, animation tokens). Kept
+// as literals since they are not part of the semantic COLOR maps, and spread
+// into both theme maps so codegen mirrors global.css exactly.
+const themeIndependentCSSVars = {
+  // RGB decomposed values for glow shadows
+  '--color-brand-primary-rgb': '255, 121, 0',
+  '--color-brand-secondary-rgb': '64, 109, 135',
+  '--color-status-success-rgb': '20, 184, 166',
+  '--color-status-error-rgb': '209, 67, 67',
+  '--color-status-warning-rgb': '255, 176, 32',
+  '--color-status-info-rgb': '33, 150, 243',
+  '--color-background-base-rgb': '16, 16, 16',
+
+  // Font families
+  '--font-family-sans': "'Inter'",
+  '--font-family-body': "'Nunito Sans'",
+  '--font-family-heading': "'Space Grotesk'",
+  '--font-family-mono': "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace",
+
+  // Animation tokens
+  '--ease-out': 'cubic-bezier(0.22, 1, 0.36, 1)',
+  '--ease-in-out': 'cubic-bezier(0.65, 0, 0.35, 1)',
+  '--ease-spring': 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+  '--duration-fast': '150ms',
+  '--duration-normal': '250ms',
+  '--duration-slow': '400ms',
+} as const
+
 // CSS custom properties for light mode
 export const lightThemeCSSVars = {
   '--color-brand-primary': semanticColorsLight['brand-primary'],
@@ -57,6 +86,67 @@ export const lightThemeCSSVars = {
   '--color-interactive-disabled': semanticColorsLight['interactive-disabled'],
 
   '--color-divider': semanticColorsLight['divider'],
+
+  '--color-brand-primary-hover': semanticColorsLight['brand-primary-hover'],
+  '--color-brand-primary-active': semanticColorsLight['brand-primary-active'],
+  '--color-brand-secondary-hover': semanticColorsLight['brand-secondary-hover'],
+  '--color-brand-secondary-active': semanticColorsLight['brand-secondary-active'],
+
+  '--color-status-success-light': semanticColorsLight['status-success-light'],
+  '--color-status-success-dark': semanticColorsLight['status-success-dark'],
+  '--color-status-error-light': semanticColorsLight['status-error-light'],
+  '--color-status-error-dark': semanticColorsLight['status-error-dark'],
+  '--color-status-warning-light': semanticColorsLight['status-warning-light'],
+  '--color-status-warning-dark': semanticColorsLight['status-warning-dark'],
+  '--color-status-info-light': semanticColorsLight['status-info-light'],
+  '--color-status-info-dark': semanticColorsLight['status-info-dark'],
+
+  '--color-on-status-success': semanticColorsLight['on-status-success'],
+  '--color-on-status-error': semanticColorsLight['on-status-error'],
+  '--color-on-status-warning': semanticColorsLight['on-status-warning'],
+  '--color-on-status-info': semanticColorsLight['on-status-info'],
+
+  '--color-result-improve': semanticColorsLight['result-improve'],
+  '--color-result-improve-light': semanticColorsLight['result-improve-light'],
+  '--color-result-improve-dark': semanticColorsLight['result-improve-dark'],
+  '--color-result-degrade': semanticColorsLight['result-degrade'],
+  '--color-result-degrade-light': semanticColorsLight['result-degrade-light'],
+  '--color-result-degrade-dark': semanticColorsLight['result-degrade-dark'],
+  '--color-result-inconclusive': semanticColorsLight['result-inconclusive'],
+  '--color-result-inconclusive-light': semanticColorsLight['result-inconclusive-light'],
+  '--color-result-neutral': semanticColorsLight['result-neutral'],
+
+  '--color-on-result-improve': semanticColorsLight['on-result-improve'],
+  '--color-on-result-degrade': semanticColorsLight['on-result-degrade'],
+  '--color-on-result-inconclusive': semanticColorsLight['on-result-inconclusive'],
+
+  '--color-data-1': semanticColorsLight['data-1'],
+  '--color-data-2': semanticColorsLight['data-2'],
+  '--color-data-3': semanticColorsLight['data-3'],
+  '--color-data-4': semanticColorsLight['data-4'],
+  '--color-data-5': semanticColorsLight['data-5'],
+  '--color-data-6': semanticColorsLight['data-6'],
+  '--color-data-7': semanticColorsLight['data-7'],
+  '--color-data-8': semanticColorsLight['data-8'],
+  '--color-data-9': semanticColorsLight['data-9'],
+  '--color-data-10': semanticColorsLight['data-10'],
+
+  '--color-text-link-hover': semanticColorsLight['text-link-hover'],
+
+  '--color-surface-overlay': semanticColorsLight['surface-overlay'],
+  '--color-surface-input': semanticColorsLight['surface-input'],
+
+  '--color-border-input': semanticColorsLight['border-input'],
+  '--color-border-input-hover': semanticColorsLight['border-input-hover'],
+  '--color-border-input-focus': semanticColorsLight['border-input-focus'],
+  '--color-border-input-error': semanticColorsLight['border-input-error'],
+
+  '--color-interactive-disabled-text': semanticColorsLight['interactive-disabled-text'],
+
+  '--color-avatar-background': semanticColorsLight['avatar-background'],
+  '--color-avatar-text': semanticColorsLight['avatar-text'],
+
+  ...themeIndependentCSSVars,
 } as const
 
 // CSS custom properties for dark mode (default)
@@ -109,6 +199,67 @@ export const darkThemeCSSVars = {
   '--color-interactive-disabled': semanticColorsDark['interactive-disabled'],
 
   '--color-divider': semanticColorsDark['divider'],
+
+  '--color-brand-primary-hover': semanticColorsDark['brand-primary-hover'],
+  '--color-brand-primary-active': semanticColorsDark['brand-primary-active'],
+  '--color-brand-secondary-hover': semanticColorsDark['brand-secondary-hover'],
+  '--color-brand-secondary-active': semanticColorsDark['brand-secondary-active'],
+
+  '--color-status-success-light': semanticColorsDark['status-success-light'],
+  '--color-status-success-dark': semanticColorsDark['status-success-dark'],
+  '--color-status-error-light': semanticColorsDark['status-error-light'],
+  '--color-status-error-dark': semanticColorsDark['status-error-dark'],
+  '--color-status-warning-light': semanticColorsDark['status-warning-light'],
+  '--color-status-warning-dark': semanticColorsDark['status-warning-dark'],
+  '--color-status-info-light': semanticColorsDark['status-info-light'],
+  '--color-status-info-dark': semanticColorsDark['status-info-dark'],
+
+  '--color-on-status-success': semanticColorsDark['on-status-success'],
+  '--color-on-status-error': semanticColorsDark['on-status-error'],
+  '--color-on-status-warning': semanticColorsDark['on-status-warning'],
+  '--color-on-status-info': semanticColorsDark['on-status-info'],
+
+  '--color-result-improve': semanticColorsDark['result-improve'],
+  '--color-result-improve-light': semanticColorsDark['result-improve-light'],
+  '--color-result-improve-dark': semanticColorsDark['result-improve-dark'],
+  '--color-result-degrade': semanticColorsDark['result-degrade'],
+  '--color-result-degrade-light': semanticColorsDark['result-degrade-light'],
+  '--color-result-degrade-dark': semanticColorsDark['result-degrade-dark'],
+  '--color-result-inconclusive': semanticColorsDark['result-inconclusive'],
+  '--color-result-inconclusive-light': semanticColorsDark['result-inconclusive-light'],
+  '--color-result-neutral': semanticColorsDark['result-neutral'],
+
+  '--color-on-result-improve': semanticColorsDark['on-result-improve'],
+  '--color-on-result-degrade': semanticColorsDark['on-result-degrade'],
+  '--color-on-result-inconclusive': semanticColorsDark['on-result-inconclusive'],
+
+  '--color-data-1': semanticColorsDark['data-1'],
+  '--color-data-2': semanticColorsDark['data-2'],
+  '--color-data-3': semanticColorsDark['data-3'],
+  '--color-data-4': semanticColorsDark['data-4'],
+  '--color-data-5': semanticColorsDark['data-5'],
+  '--color-data-6': semanticColorsDark['data-6'],
+  '--color-data-7': semanticColorsDark['data-7'],
+  '--color-data-8': semanticColorsDark['data-8'],
+  '--color-data-9': semanticColorsDark['data-9'],
+  '--color-data-10': semanticColorsDark['data-10'],
+
+  '--color-text-link-hover': semanticColorsDark['text-link-hover'],
+
+  '--color-surface-overlay': semanticColorsDark['surface-overlay'],
+  '--color-surface-input': semanticColorsDark['surface-input'],
+
+  '--color-border-input': semanticColorsDark['border-input'],
+  '--color-border-input-hover': semanticColorsDark['border-input-hover'],
+  '--color-border-input-focus': semanticColorsDark['border-input-focus'],
+  '--color-border-input-error': semanticColorsDark['border-input-error'],
+
+  '--color-interactive-disabled-text': semanticColorsDark['interactive-disabled-text'],
+
+  '--color-avatar-background': semanticColorsDark['avatar-background'],
+  '--color-avatar-text': semanticColorsDark['avatar-text'],
+
+  ...themeIndependentCSSVars,
 } as const
 
 // Helper to get CSS vars for a theme mode

package/src/theme/manifest/design-freeze.test.ts

@@ -0,0 +1,155 @@
+import { describe, it, expect } from 'vitest'
+import {
+  buildFreezeTagName,
+  buildFreezeTagMessage,
+  assertFileCommitted,
+  slugifyVariant,
+  generateSpecimenSkeleton,
+  parseArgs,
+} from '../../../scripts/design-freeze.mjs'
+
+describe('buildFreezeTagName', () => {
+  it('namespaces the tag under design-freeze/ with the component and version', () => {
+    expect(buildFreezeTagName('e1rm-badge', '2026-06-30')).toBe(
+      'design-freeze/e1rm-badge-2026-06-30'
+    )
+  })
+
+  it('throws when component is missing', () => {
+    expect(() => buildFreezeTagName('', '1')).toThrow(/requires a component name/)
+  })
+})
+
+describe('buildFreezeTagMessage', () => {
+  it('records the prototype path and selector the freeze covers', () => {
+    const message = buildFreezeTagMessage({
+      component: 'status-dot',
+      htmlPath: 'docs/prototypes/component-demo.html',
+      selector: '.status-dot',
+    })
+
+    expect(message).toContain('Design freeze: status-dot')
+    expect(message).toContain('docs/prototypes/component-demo.html')
+    expect(message).toContain('.status-dot')
+    expect(message).toContain('re-freeze')
+  })
+})
+
+describe('assertFileCommitted', () => {
+  it('does not throw for a clean porcelain result', () => {
+    expect(() => assertFileCommitted('', 'docs/prototypes/component-demo.html')).not.toThrow()
+    expect(() => assertFileCommitted('   \n', 'docs/prototypes/component-demo.html')).not.toThrow()
+  })
+
+  it('throws with the porcelain output when the file has uncommitted changes', () => {
+    expect(() =>
+      assertFileCommitted(
+        ' M docs/prototypes/component-demo.html\n',
+        'docs/prototypes/component-demo.html'
+      )
+    ).toThrow(/uncommitted changes/)
+  })
+
+  it('throws for an untracked file', () => {
+    expect(() => assertFileCommitted('?? new-prototype.html\n', 'new-prototype.html')).toThrow(
+      /uncommitted changes/
+    )
+  })
+})
+
+describe('slugifyVariant', () => {
+  it('returns an empty string when there are no variant axes', () => {
+    expect(slugifyVariant(undefined)).toBe('')
+    expect(slugifyVariant({})).toBe('')
+  })
+
+  it('joins axis/value pairs with hyphens', () => {
+    expect(slugifyVariant({ size: 'md' })).toBe('size-md')
+    expect(slugifyVariant({ variant: 'solid', size: 'md' })).toBe('variant-solid-size-md')
+  })
+})
+
+describe('generateSpecimenSkeleton', () => {
+  it('embeds the frozen markup and a TODO placeholder for the React side', () => {
+    const skeleton = generateSpecimenSkeleton({
+      component: 'e1rm-badge',
+      htmlSnippet: '<div class="e1rm-badge md">217 lbs</div>',
+    })
+
+    expect(skeleton).toContain('testId="compare-e1rm-badge"')
+    expect(skeleton).toContain('label="e1rm-badge"')
+    expect(skeleton).toContain('<div class="e1rm-badge md">217 lbs</div>')
+    expect(skeleton).toContain('<ComparisonPair')
+    expect(skeleton).toContain('render <e1rm-badge /> here')
+  })
+
+  it('suffixes testId and label with the slugified baseVariant', () => {
+    const skeleton = generateSpecimenSkeleton({
+      component: 'status-dot',
+      htmlSnippet: '<div class="status-dot sm success"></div>',
+      baseVariant: { size: 'sm', variant: 'success' },
+    })
+
+    expect(skeleton).toContain('testId="compare-status-dot-size-sm-variant-success"')
+    expect(skeleton).toContain('label="status-dot size sm variant success"')
+  })
+
+  it('escapes backticks in the markup so the template literal stays valid', () => {
+    const skeleton = generateSpecimenSkeleton({
+      component: 'quote',
+      htmlSnippet: '<div>`backtick`</div>',
+    })
+
+    expect(skeleton).toContain('\\`backtick\\`')
+  })
+
+  it('throws when required fields are missing', () => {
+    expect(() => generateSpecimenSkeleton({ component: '', htmlSnippet: '<div></div>' })).toThrow(
+      /requires a component name/
+    )
+    expect(() => generateSpecimenSkeleton({ component: 'x', htmlSnippet: '' })).toThrow(
+      /requires an htmlSnippet/
+    )
+  })
+})
+
+describe('parseArgs', () => {
+  it('parses positional args and design-freeze-specific flags', () => {
+    const result = parseArgs([
+      'docs/prototypes/component-demo.html',
+      '.e1rm-badge',
+      'e1rm-badge',
+      '--out-manifest',
+      'src/theme/manifest/e1rm-badge.manifest.json',
+      '--out-skeleton',
+      'e1rm-badge.skeleton.tsx',
+      '--tag-version',
+      '2026-06-30',
+      '--variant',
+      'size=md',
+    ])
+
+    expect(result).toMatchObject({
+      htmlPath: 'docs/prototypes/component-demo.html',
+      selector: '.e1rm-badge',
+      component: 'e1rm-badge',
+      outManifest: 'src/theme/manifest/e1rm-badge.manifest.json',
+      outSkeleton: 'e1rm-badge.skeleton.tsx',
+      version: '2026-06-30',
+      baseVariant: { size: 'md' },
+      skipGitTag: false,
+    })
+  })
+
+  it('defaults tag version to an ISO date and recognizes --skip-git-tag', () => {
+    const result = parseArgs([
+      'docs/prototypes/component-demo.html',
+      '.badge',
+      'badge',
+      '--skip-git-tag',
+    ])
+
+    expect(result.skipGitTag).toBe(true)
+    expect(result.version).toMatch(/^\d{4}-\d{2}-\d{2}$/)
+  })
+})