From ccc5a51a2d989e8cd03bd6f8b53fe9431d0cc378 Mon Sep 17 00:00:00 2001
From: Kai Chappell <git@kschappell.com>
Date: Thu, 4 Sep 2025 00:22:32 +0100
Subject: [PATCH] feat(viz): bit display primitive

---
 .../primitives/bit-display.tsx                | 84 +++++++++++++++++++
 1 file changed, 84 insertions(+)
 create mode 100644 frontend/src/components/visualizations-new/primitives/bit-display.tsx

diff --git a/frontend/src/components/visualizations-new/primitives/bit-display.tsx b/frontend/src/components/visualizations-new/primitives/bit-display.tsx
new file mode 100644
index 0000000..47eab67
--- /dev/null
+++ b/frontend/src/components/visualizations-new/primitives/bit-display.tsx
@@ -0,0 +1,84 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { cn } from '@/lib/utils';
+import type { BitState } from '@/lib/visualizations/types';
+
+interface BitDisplayProps {
+  bit: BitState;
+  bitWidth?: number;
+  showLabel?: boolean;
+  showDecimal?: boolean;
+  className?: string;
+}
+
+const STATE_CLASSES = {
+  normal: 'bg-[var(--muted)] border-[var(--border)] text-[var(--foreground)]',
+  highlighted: 'bg-[var(--primary)]/20 border-[var(--primary)] text-[var(--primary)]',
+  comparing: 'bg-amber-500/20 border-amber-500 text-amber-500 shadow-[0_0_8px_rgba(245,158,11,0.4)]',
+  result: 'bg-green-500/20 border-green-500 text-green-500',
+  cancelled: 'bg-[var(--muted)]/30 border-[var(--border)]/50 text-[var(--muted-foreground)] opacity-40',
+} as const;
+
+export function BitDisplay({
+  bit,
+  bitWidth = 8,
+  showLabel = true,
+  showDecimal = true,
+  className,
+}: BitDisplayProps) {
+  // Pad the bits string to the desired width
+  const paddedBits = bit.bits.padStart(bitWidth, '0');
+
+  return (
+    <div className={cn('flex flex-col items-center gap-1', className)}>
+      {/* Label (e.g., "result", "num") */}
+      {showLabel && bit.label && (
+        <span className="text-xs font-medium text-[var(--muted-foreground)]">
+          {bit.label}
+        </span>
+      )}
+
+      {/* Decimal value display */}
+      {showDecimal && (
+        <span
+          className={cn(
+            'text-sm font-mono font-medium mb-1',
+            bit.state === 'cancelled'
+              ? 'text-[var(--muted-foreground)] line-through opacity-50'
+              : 'text-[var(--foreground)]'
+          )}
+        >
+          {bit.value}
+        </span>
+      )}
+
+      {/* Binary representation - individual bit cells */}
+      <motion.div
+        layout
+        initial={false}
+        animate={{
+          scale: bit.state === 'highlighted' || bit.state === 'comparing' ? 1.02 : 1,
+        }}
+        transition={{ duration: 0.2 }}
+        className={cn(
+          'flex items-center rounded-lg border-2 overflow-hidden',
+          STATE_CLASSES[bit.state]
+        )}
+      >
+        {paddedBits.split('').map((bitChar, index) => (
+          <div
+            key={index}
+            className={cn(
+              'w-6 h-8 flex items-center justify-center font-mono text-sm font-medium',
+              index > 0 && 'border-l border-[var(--border)]/30',
+              bit.state === 'cancelled' && 'line-through'
+            )}
+          >
+            {bitChar}
+          </div>
+        ))}
+      </motion.div>
+    </div>
+  );
+}