feat(viz): bit manipulation view

frontend/src/components/visualizations-new/data-structures/bit-manipulation-view.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { cn } from '@/lib/utils';
+import type { BitManipulationState } from '@/lib/visualizations/types';
+import { BitDisplay } from '../primitives/bit-display';
+
+interface BitManipulationViewProps {
+  state: BitManipulationState;
+  bitWidth?: number;
+  className?: string;
+}
+
+const OPERATION_SYMBOLS = {
+  XOR: '⊕',
+  AND: '&',
+  OR: '|',
+  NOT: '~',
+} as const;
+
+export function BitManipulationView({
+  state,
+  bitWidth = 4,
+  className,
+}: BitManipulationViewProps) {
+  const hasOperation = state.operation && state.operands.length >= 2;
+  const hasResult = state.result;
+
+  return (
+    <div className={cn('flex flex-col items-center gap-4', className)}>
+      {/* Label */}
+      {state.label && (
+        <span className="text-sm font-medium text-[var(--muted-foreground)]">
+          {state.label}
+        </span>
+      )}
+
+      {/* Operation layout */}
+      <div className="flex flex-col items-center gap-2">
+        {/* Operands */}
+        {state.operands.map((operand, index) => (
+          <motion.div
+            key={operand.id}
+            initial={{ opacity: 0, y: -10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: index * 0.1 }}
+            className="flex items-center gap-3"
+          >
+            {/* Show operation symbol before second operand */}
+            {index === 1 && hasOperation && (
+              <span className="w-6 text-center text-lg font-bold text-[var(--primary)]">
+                {OPERATION_SYMBOLS[state.operation!]}
+              </span>
+            )}
+            {index === 0 && hasOperation && (
+              <span className="w-6" /> /* Spacer for alignment */
+            )}
+            <BitDisplay bit={operand} bitWidth={bitWidth} />
+          </motion.div>
+        ))}
+
+        {/* Divider line and result */}
+        {hasResult && (
+          <>
+            <motion.div
+              initial={{ scaleX: 0 }}
+              animate={{ scaleX: 1 }}
+              transition={{ delay: 0.2 }}
+              className="w-full h-0.5 bg-[var(--border)] my-1"
+            />
+            <motion.div
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.3 }}
+              className="flex items-center gap-3"
+            >
+              <span className="w-6 text-center text-lg font-bold text-green-500">
+                =
+              </span>
+              <BitDisplay bit={state.result!} bitWidth={bitWidth} />
+            </motion.div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface BitXORSequenceProps {
+  states: BitManipulationState[];
+  bitWidth?: number;
+  className?: string;
+}
+
+export function BitXORSequence({
+  states,
+  bitWidth = 4,
+  className,
+}: BitXORSequenceProps) {
+  return (
+    <div className={cn('flex flex-wrap items-start justify-center gap-8', className)}>
+      {states.map((state) => (
+        <BitManipulationView
+          key={state.id}
+          state={state}
+          bitWidth={bitWidth}
+        />
+      ))}
+    </div>
+  );
+}
+
+interface BitArrayWithBinaryProps {
+  values: Array<{
+    value: number;
+    bits: string;
+    state: 'normal' | 'highlighted' | 'comparing' | 'result' | 'cancelled';
+  }>;
+  bitWidth?: number;
+  label?: string;
+  className?: string;
+}
+
+export function BitArrayWithBinary({
+  values,
+  bitWidth = 4,
+  label,
+  className,
+}: BitArrayWithBinaryProps) {
+  return (
+    <div className={cn('flex flex-col items-center gap-2', className)}>
+      {label && (
+        <span className="text-sm font-medium text-[var(--muted-foreground)]">
+          {label}
+        </span>
+      )}
+      <div className="flex flex-wrap items-end justify-center gap-4">
+        {values.map((item, index) => (
+          <BitDisplay
+            key={index}
+            bit={{
+              id: `arr-${index}`,
+              value: item.value,
+              bits: item.bits,
+              state: item.state,
+            }}
+            bitWidth={bitWidth}
+            showLabel={false}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}