From bc8912d93478703deaaa3b8ebefaa85b6b4b6f1f Mon Sep 17 00:00:00 2001
From: Kai Chappell <git@kschappell.com>
Date: Mon, 8 Sep 2025 13:32:40 +0100
Subject: [PATCH] feat(viz): bit manipulation algorithm component

---
 .../algorithms/bit-manipulation.tsx           | 72 +++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 frontend/src/components/visualizations-new/algorithms/bit-manipulation.tsx

diff --git a/frontend/src/components/visualizations-new/algorithms/bit-manipulation.tsx b/frontend/src/components/visualizations-new/algorithms/bit-manipulation.tsx
new file mode 100644
index 0000000..4d76a87
--- /dev/null
+++ b/frontend/src/components/visualizations-new/algorithms/bit-manipulation.tsx
@@ -0,0 +1,72 @@
+'use client';
+
+import { useVisualization } from '@/lib/visualizations/use-visualization';
+import type { AlgorithmDefinition } from '@/lib/visualizations/types';
+import { VisualizationContainer } from '../core/visualization-container';
+import { BitManipulationView } from '../data-structures/bit-manipulation-view';
+import { ArrayView } from '../data-structures/array-view';
+
+interface BitManipulationVisualizationProps {
+  algorithm: AlgorithmDefinition;
+  className?: string;
+}
+
+export function BitManipulationVisualization({
+  algorithm,
+  className,
+}: BitManipulationVisualizationProps) {
+  const {
+    currentStep,
+    currentStepIndex,
+    totalSteps,
+    playback,
+    controls,
+    currentPhase,
+    progress,
+  } = useVisualization(algorithm);
+
+  const { dataState } = currentStep;
+  const bitManipulation = dataState.bitManipulation?.[0] ?? null;
+  const array = dataState.arrays?.[0] ?? null;
+  const pointers = dataState.pointers ?? [];
+
+  return (
+    <VisualizationContainer
+      title={algorithm.title}
+      pattern={algorithm.pattern}
+      code={algorithm.code}
+      currentLine={currentStep.codeLine}
+      highlightLines={currentStep.codeHighlightLines}
+      explanation={currentStep.explanation}
+      decision={currentStep.decision}
+      phase={currentPhase}
+      variables={dataState.variables}
+      currentStepIndex={currentStepIndex}
+      totalSteps={totalSteps}
+      isPlaying={playback.isPlaying}
+      speed={playback.speed}
+      controls={controls}
+      progress={progress}
+      className={className}
+    >
+      <div className="flex flex-col items-center justify-center gap-8 min-h-[200px]">
+        {/* Array view with current element pointer */}
+        {array && (
+          <ArrayView
+            array={array}
+            pointers={pointers}
+            elementSize="md"
+          />
+        )}
+
+        {/* Bit manipulation operation view */}
+        {bitManipulation && (
+          <BitManipulationView
+            state={bitManipulation}
+            bitWidth={4}
+          />
+        )}
+      </div>
+    </VisualizationContainer>
+  );
+}