From 0146ce1e67da27a24cbaa8338ba6a1a6befd6bd3 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Mon, 20 Oct 2025 09:28:16 -0500
Subject: [PATCH] feat(abacus-react): export StandaloneBead component wired to
 AbacusDisplayContext
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

feat(levels): use StandaloneBead for slider thumb and decorative tick beads

fix(levels): make slider background transparent to prevent abacus clipping

Created StandaloneBead component that integrates with the abacus style context,
replacing hardcoded SVG diamonds with proper context-aware bead rendering.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/app/levels/page.tsx             | 714 +++++++++++--------
 packages/abacus-react/src/StandaloneBead.tsx | 147 ++++
 packages/abacus-react/src/index.ts           |   3 +
 3 files changed, 578 insertions(+), 286 deletions(-)
 create mode 100644 packages/abacus-react/src/StandaloneBead.tsx

diff --git a/apps/web/src/app/levels/page.tsx b/apps/web/src/app/levels/page.tsx
index 552e2859..cc316077 100644
--- a/apps/web/src/app/levels/page.tsx
+++ b/apps/web/src/app/levels/page.tsx
@@ -1,203 +1,280 @@
-'use client'
+"use client";
 
-import { useState } from 'react'
-import { useSpring, animated } from '@react-spring/web'
-import * as Slider from '@radix-ui/react-slider'
-import { AbacusReact } from '@soroban/abacus-react'
-import { PageWithNav } from '@/components/PageWithNav'
-import { css } from '../../../styled-system/css'
-import { container, stack } from '../../../styled-system/patterns'
+import { useState } from "react";
+import { useSpring, animated } from "@react-spring/web";
+import * as Slider from "@radix-ui/react-slider";
+import {
+  AbacusReact,
+  StandaloneBead,
+  AbacusDisplayProvider,
+} from "@soroban/abacus-react";
+import { PageWithNav } from "@/components/PageWithNav";
+import { css } from "../../../styled-system/css";
+import { container, stack } from "../../../styled-system/patterns";
 
 // Combine all levels into one array for the slider
 const allLevels = [
-  { level: '10th Kyu', emoji: '🧒', color: 'green', digits: 2, type: 'kyu' as const },
-  { level: '9th Kyu', emoji: '🧒', color: 'green', digits: 2, type: 'kyu' as const },
-  { level: '8th Kyu', emoji: '🧒', color: 'green', digits: 3, type: 'kyu' as const },
-  { level: '7th Kyu', emoji: '🧒', color: 'green', digits: 4, type: 'kyu' as const },
-  { level: '6th Kyu', emoji: '🧑', color: 'blue', digits: 5, type: 'kyu' as const },
-  { level: '5th Kyu', emoji: '🧑', color: 'blue', digits: 6, type: 'kyu' as const },
-  { level: '4th Kyu', emoji: '🧑', color: 'blue', digits: 7, type: 'kyu' as const },
-  { level: '3rd Kyu', emoji: '🧔', color: 'violet', digits: 8, type: 'kyu' as const },
-  { level: '2nd Kyu', emoji: '🧔', color: 'violet', digits: 9, type: 'kyu' as const },
-  { level: '1st Kyu', emoji: '🧔', color: 'violet', digits: 10, type: 'kyu' as const },
   {
-    level: 'Pre-1st Dan',
-    name: 'Jun-Shodan',
+    level: "10th Kyu",
+    emoji: "🧒",
+    color: "green",
+    digits: 2,
+    type: "kyu" as const,
+  },
+  {
+    level: "9th Kyu",
+    emoji: "🧒",
+    color: "green",
+    digits: 2,
+    type: "kyu" as const,
+  },
+  {
+    level: "8th Kyu",
+    emoji: "🧒",
+    color: "green",
+    digits: 3,
+    type: "kyu" as const,
+  },
+  {
+    level: "7th Kyu",
+    emoji: "🧒",
+    color: "green",
+    digits: 4,
+    type: "kyu" as const,
+  },
+  {
+    level: "6th Kyu",
+    emoji: "🧑",
+    color: "blue",
+    digits: 5,
+    type: "kyu" as const,
+  },
+  {
+    level: "5th Kyu",
+    emoji: "🧑",
+    color: "blue",
+    digits: 6,
+    type: "kyu" as const,
+  },
+  {
+    level: "4th Kyu",
+    emoji: "🧑",
+    color: "blue",
+    digits: 7,
+    type: "kyu" as const,
+  },
+  {
+    level: "3rd Kyu",
+    emoji: "🧔",
+    color: "violet",
+    digits: 8,
+    type: "kyu" as const,
+  },
+  {
+    level: "2nd Kyu",
+    emoji: "🧔",
+    color: "violet",
+    digits: 9,
+    type: "kyu" as const,
+  },
+  {
+    level: "1st Kyu",
+    emoji: "🧔",
+    color: "violet",
+    digits: 10,
+    type: "kyu" as const,
+  },
+  {
+    level: "Pre-1st Dan",
+    name: "Jun-Shodan",
     minScore: 90,
-    emoji: '🧙',
-    color: 'amber',
+    emoji: "🧙",
+    color: "amber",
     digits: 30,
-    type: 'dan' as const,
+    type: "dan" as const,
   },
   {
-    level: '1st Dan',
-    name: 'Shodan',
+    level: "1st Dan",
+    name: "Shodan",
     minScore: 100,
-    emoji: '🧙',
-    color: 'amber',
+    emoji: "🧙",
+    color: "amber",
     digits: 30,
-    type: 'dan' as const,
+    type: "dan" as const,
   },
   {
-    level: '2nd Dan',
-    name: 'Nidan',
+    level: "2nd Dan",
+    name: "Nidan",
     minScore: 120,
-    emoji: '🧙‍♂️',
-    color: 'amber',
+    emoji: "🧙‍♂️",
+    color: "amber",
     digits: 30,
-    type: 'dan' as const,
+    type: "dan" as const,
   },
   {
-    level: '3rd Dan',
-    name: 'Sandan',
+    level: "3rd Dan",
+    name: "Sandan",
     minScore: 140,
-    emoji: '🧙‍♂️',
-    color: 'amber',
+    emoji: "🧙‍♂️",
+    color: "amber",
     digits: 30,
-    type: 'dan' as const,
+    type: "dan" as const,
   },
   {
-    level: '4th Dan',
-    name: 'Yondan',
+    level: "4th Dan",
+    name: "Yondan",
     minScore: 160,
-    emoji: '🧙‍♀️',
-    color: 'amber',
+    emoji: "🧙‍♀️",
+    color: "amber",
     digits: 30,
-    type: 'dan' as const,
+    type: "dan" as const,
   },
   {
-    level: '5th Dan',
-    name: 'Godan',
+    level: "5th Dan",
+    name: "Godan",
     minScore: 180,
-    emoji: '🧙‍♀️',
-    color: 'amber',
+    emoji: "🧙‍♀️",
+    color: "amber",
     digits: 30,
-    type: 'dan' as const,
+    type: "dan" as const,
   },
   {
-    level: '6th Dan',
-    name: 'Rokudan',
+    level: "6th Dan",
+    name: "Rokudan",
     minScore: 200,
-    emoji: '🧝',
-    color: 'amber',
+    emoji: "🧝",
+    color: "amber",
     digits: 30,
-    type: 'dan' as const,
+    type: "dan" as const,
   },
   {
-    level: '7th Dan',
-    name: 'Nanadan',
+    level: "7th Dan",
+    name: "Nanadan",
     minScore: 220,
-    emoji: '🧝',
-    color: 'amber',
+    emoji: "🧝",
+    color: "amber",
     digits: 30,
-    type: 'dan' as const,
+    type: "dan" as const,
   },
   {
-    level: '8th Dan',
-    name: 'Hachidan',
+    level: "8th Dan",
+    name: "Hachidan",
     minScore: 250,
-    emoji: '🧝‍♂️',
-    color: 'amber',
+    emoji: "🧝‍♂️",
+    color: "amber",
     digits: 30,
-    type: 'dan' as const,
+    type: "dan" as const,
   },
   {
-    level: '9th Dan',
-    name: 'Kudan',
+    level: "9th Dan",
+    name: "Kudan",
     minScore: 270,
-    emoji: '🧝‍♀️',
-    color: 'amber',
+    emoji: "🧝‍♀️",
+    color: "amber",
     digits: 30,
-    type: 'dan' as const,
+    type: "dan" as const,
   },
   {
-    level: '10th Dan',
-    name: 'Judan',
+    level: "10th Dan",
+    name: "Judan",
     minScore: 290,
-    emoji: '👑',
-    color: 'amber',
+    emoji: "👑",
+    color: "amber",
     digits: 30,
-    type: 'dan' as const,
+    type: "dan" as const,
   },
-] as const
+] as const;
 
 export default function LevelsPage() {
-  const [currentIndex, setCurrentIndex] = useState(0)
-  const currentLevel = allLevels[currentIndex]
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const currentLevel = allLevels[currentIndex];
 
   // Calculate scale factor based on number of columns to fit the page
   // Use constrained range to prevent huge size differences between levels
   // Min 1.2 (for 30-column Dan levels) to Max 2.0 (for 2-column Kyu levels)
-  const scaleFactor = Math.max(1.2, Math.min(2.0, 20 / currentLevel.digits))
+  const scaleFactor = Math.max(1.2, Math.min(2.0, 20 / currentLevel.digits));
 
   // Animate scale factor with React Spring for smooth transitions
   const animatedProps = useSpring({
     scaleFactor,
     config: { tension: 280, friction: 60 },
-  })
+  });
 
   // Generate an interesting non-zero number to display on the abacus
   // Use a suffix pattern so rightmost digits stay constant as columns increase
   // This prevents beads from shifting: ones always 9, tens always 8, etc.
-  const digitPattern = '123456789'
+  const digitPattern = "123456789";
   // Use BigInt for numbers > 15 digits (Dan levels with 30 columns)
-  const repeatedPattern = digitPattern.repeat(Math.ceil(currentLevel.digits / digitPattern.length))
-  const digitString = repeatedPattern.slice(-currentLevel.digits)
+  const repeatedPattern = digitPattern.repeat(
+    Math.ceil(currentLevel.digits / digitPattern.length),
+  );
+  const digitString = repeatedPattern.slice(-currentLevel.digits);
 
   // Use BigInt for large numbers to get full 30-digit precision
   const displayValue =
-    currentLevel.digits > 15 ? BigInt(digitString) : Number.parseInt(digitString, 10)
+    currentLevel.digits > 15
+      ? BigInt(digitString)
+      : Number.parseInt(digitString, 10);
 
   // Dark theme styles matching the homepage
   const darkStyles = {
     columnPosts: {
-      fill: 'rgba(255, 255, 255, 0.3)',
-      stroke: 'rgba(255, 255, 255, 0.2)',
+      fill: "rgba(255, 255, 255, 0.3)",
+      stroke: "rgba(255, 255, 255, 0.2)",
       strokeWidth: 2,
     },
     reckoningBar: {
-      fill: 'rgba(255, 255, 255, 0.4)',
-      stroke: 'rgba(255, 255, 255, 0.25)',
+      fill: "rgba(255, 255, 255, 0.4)",
+      stroke: "rgba(255, 255, 255, 0.25)",
       strokeWidth: 3,
     },
-  }
+  };
 
   return (
     <PageWithNav navTitle="Kyu & Dan Levels" navEmoji="📊">
-      <div className={css({ bg: 'gray.900', minHeight: '100vh', pb: '12' })}>
+      <div className={css({ bg: "gray.900", minHeight: "100vh", pb: "12" })}>
         {/* Hero Section */}
         <div
           className={css({
             background:
-              'linear-gradient(135deg, rgba(17, 24, 39, 1) 0%, rgba(124, 58, 237, 0.3) 50%, rgba(17, 24, 39, 1) 100%)',
-            color: 'white',
-            py: { base: '12', md: '16' },
-            position: 'relative',
-            overflow: 'hidden',
+              "linear-gradient(135deg, rgba(17, 24, 39, 1) 0%, rgba(124, 58, 237, 0.3) 50%, rgba(17, 24, 39, 1) 100%)",
+            color: "white",
+            py: { base: "12", md: "16" },
+            position: "relative",
+            overflow: "hidden",
           })}
         >
           <div
             className={css({
-              position: 'absolute',
+              position: "absolute",
               inset: 0,
               opacity: 0.1,
               backgroundImage:
-                'radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.15) 1px, transparent 0)',
-              backgroundSize: '40px 40px',
+                "radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.15) 1px, transparent 0)",
+              backgroundSize: "40px 40px",
             })}
           />
 
-          <div className={container({ maxW: '6xl', px: '4', position: 'relative' })}>
-            <div className={css({ textAlign: 'center', maxW: '5xl', mx: 'auto' })}>
+          <div
+            className={container({
+              maxW: "6xl",
+              px: "4",
+              position: "relative",
+            })}
+          >
+            <div
+              className={css({ textAlign: "center", maxW: "5xl", mx: "auto" })}
+            >
               <h1
                 className={css({
-                  fontSize: { base: '3xl', md: '5xl', lg: '6xl' },
-                  fontWeight: 'bold',
-                  mb: '4',
-                  lineHeight: 'tight',
-                  background: 'linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #fbbf24 100%)',
-                  backgroundClip: 'text',
-                  color: 'transparent',
+                  fontSize: { base: "3xl", md: "5xl", lg: "6xl" },
+                  fontWeight: "bold",
+                  mb: "4",
+                  lineHeight: "tight",
+                  background:
+                    "linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #fbbf24 100%)",
+                  backgroundClip: "text",
+                  color: "transparent",
                 })}
               >
                 Understanding Kyu & Dan Levels
@@ -205,12 +282,12 @@ export default function LevelsPage() {
 
               <p
                 className={css({
-                  fontSize: { base: 'lg', md: 'xl' },
-                  color: 'gray.300',
-                  mb: '6',
-                  maxW: '3xl',
-                  mx: 'auto',
-                  lineHeight: '1.6',
+                  fontSize: { base: "lg", md: "xl" },
+                  color: "gray.300",
+                  mb: "6",
+                  maxW: "3xl",
+                  mx: "auto",
+                  lineHeight: "1.6",
                 })}
               >
                 Slide through the complete progression from beginner to master
@@ -220,78 +297,86 @@ export default function LevelsPage() {
         </div>
 
         {/* Main content */}
-        <div className={container({ maxW: '6xl', px: '4', py: '12' })}>
-          <section className={stack({ gap: '8' })}>
+        <div className={container({ maxW: "6xl", px: "4", py: "12" })}>
+          <section className={stack({ gap: "8" })}>
             {/* Current Level Display */}
             <div
               className={css({
-                bg: 'rgba(0, 0, 0, 0.4)',
-                border: '2px solid',
+                bg: "transparent",
+                border: "2px solid",
                 borderColor:
-                  currentLevel.color === 'green'
-                    ? 'green.500'
-                    : currentLevel.color === 'blue'
-                      ? 'blue.500'
-                      : currentLevel.color === 'violet'
-                        ? 'violet.500'
-                        : 'amber.500',
-                rounded: 'xl',
-                p: { base: '6', md: '8' },
-                height: { base: 'auto', md: '700px' },
-                display: 'flex',
-                flexDirection: 'column',
+                  currentLevel.color === "green"
+                    ? "green.500"
+                    : currentLevel.color === "blue"
+                      ? "blue.500"
+                      : currentLevel.color === "violet"
+                        ? "violet.500"
+                        : "amber.500",
+                rounded: "xl",
+                p: { base: "6", md: "8" },
+                height: { base: "auto", md: "700px" },
+                display: "flex",
+                flexDirection: "column",
               })}
             >
               {/* Level Info */}
               <div
                 className={css({
-                  textAlign: 'center',
-                  mb: '4',
-                  height: '160px',
-                  display: 'flex',
-                  flexDirection: 'column',
-                  justifyContent: 'center',
+                  textAlign: "center",
+                  mb: "4",
+                  height: "160px",
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center",
                 })}
               >
-                <div className={css({ fontSize: '5xl', mb: '3' })}>{currentLevel.emoji}</div>
+                <div className={css({ fontSize: "5xl", mb: "3" })}>
+                  {currentLevel.emoji}
+                </div>
                 <h2
                   className={css({
-                    fontSize: { base: '2xl', md: '3xl' },
-                    fontWeight: 'bold',
+                    fontSize: { base: "2xl", md: "3xl" },
+                    fontWeight: "bold",
                     color:
-                      currentLevel.color === 'green'
-                        ? 'green.400'
-                        : currentLevel.color === 'blue'
-                          ? 'blue.400'
-                          : currentLevel.color === 'violet'
-                            ? 'violet.400'
-                            : 'amber.400',
-                    mb: '2',
+                      currentLevel.color === "green"
+                        ? "green.400"
+                        : currentLevel.color === "blue"
+                          ? "blue.400"
+                          : currentLevel.color === "violet"
+                            ? "violet.400"
+                            : "amber.400",
+                    mb: "2",
                   })}
                 >
                   {currentLevel.level}
                 </h2>
-                {'name' in currentLevel && (
-                  <div className={css({ fontSize: 'md', color: 'gray.400', mb: '1' })}>
+                {"name" in currentLevel && (
+                  <div
+                    className={css({
+                      fontSize: "md",
+                      color: "gray.400",
+                      mb: "1",
+                    })}
+                  >
                     {currentLevel.name}
                   </div>
                 )}
-                {'minScore' in currentLevel && (
-                  <div className={css({ fontSize: 'sm', color: 'gray.500' })}>
+                {"minScore" in currentLevel && (
+                  <div className={css({ fontSize: "sm", color: "gray.500" })}>
                     Minimum Score: {currentLevel.minScore} points
                   </div>
                 )}
               </div>
 
               {/* Abacus-themed Radix Slider */}
-              <div className={css({ mb: '6', px: { base: '2', md: '8' } })}>
-                <div className={css({ mb: '3', textAlign: 'center' })}>
-                  <p className={css({ fontSize: 'sm', color: 'gray.400' })}>
+              <div className={css({ mb: "6", px: { base: "2", md: "8" } })}>
+                <div className={css({ mb: "3", textAlign: "center" })}>
+                  <p className={css({ fontSize: "sm", color: "gray.400" })}>
                     Drag or click the beads to explore all levels
                   </p>
                 </div>
 
-                <div className={css({ position: 'relative', py: '6' })}>
+                <div className={css({ position: "relative", py: "6" })}>
                   <Slider.Root
                     value={[currentIndex]}
                     onValueChange={([value]) => setCurrentIndex(value)}
@@ -299,115 +384,106 @@ export default function LevelsPage() {
                     max={allLevels.length - 1}
                     step={1}
                     className={css({
-                      position: 'relative',
-                      display: 'flex',
-                      alignItems: 'center',
-                      userSelect: 'none',
-                      touchAction: 'none',
-                      w: 'full',
-                      h: '12',
-                      cursor: 'pointer',
+                      position: "relative",
+                      display: "flex",
+                      alignItems: "center",
+                      userSelect: "none",
+                      touchAction: "none",
+                      w: "full",
+                      h: "12",
+                      cursor: "pointer",
                     })}
                   >
                     {/* Decorative diamond beads for all levels */}
                     {allLevels.map((level, index) => {
-                      const isActive = index === currentIndex
-                      const isDan = 'color' in level && level.color === 'violet'
-                      const size = isActive ? 14 : 8
+                      const isActive = index === currentIndex;
+                      const isDan =
+                        "color" in level && level.color === "violet";
+                      const size = isActive ? 14 : 8;
                       const beadColor = isActive
                         ? isDan
-                          ? '#8b5cf6'
-                          : '#22c55e'
+                          ? "#8b5cf6"
+                          : "#22c55e"
                         : isDan
-                          ? 'rgba(139, 92, 246, 0.4)'
-                          : 'rgba(34, 197, 94, 0.4)'
+                          ? "rgba(139, 92, 246, 0.4)"
+                          : "rgba(34, 197, 94, 0.4)";
+
+                      // Match Radix Slider thumb positioning
+                      // Radix positions thumb center at the value position, accounting for thumb width
+                      const percentage = (index / (allLevels.length - 1)) * 100;
 
                       return (
                         <div
                           key={index}
                           style={{
-                            position: 'absolute',
-                            top: '50%',
-                            left: `${(index / (allLevels.length - 1)) * 100}%`,
-                            transform: 'translate(-50%, -50%)',
-                            width: `${size}px`,
-                            height: `${size}px`,
-                            transition: 'all 0.2s',
-                            pointerEvents: 'none',
+                            position: "absolute",
+                            top: "50%",
+                            left: `${percentage}%`,
+                            transform: "translate(-50%, -50%)",
+                            transition: "all 0.2s",
+                            pointerEvents: "none",
                             zIndex: 0,
                             filter: isActive
-                              ? `drop-shadow(0 0 6px ${isDan ? 'rgba(139, 92, 246, 0.6)' : 'rgba(34, 197, 94, 0.6)'})`
-                              : 'none',
+                              ? `drop-shadow(0 0 6px ${isDan ? "rgba(139, 92, 246, 0.6)" : "rgba(34, 197, 94, 0.6)"})`
+                              : "none",
                           }}
                         >
-                          <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
-                            <polygon
-                              points={`0,${size / 2} ${size / 2},0 ${size},${size / 2} ${size / 2},${size}`}
-                              fill={beadColor}
-                              stroke={
-                                isActive
-                                  ? isDan
-                                    ? '#c4b5fd'
-                                    : '#86efac'
-                                  : 'rgba(255, 255, 255, 0.3)'
-                              }
-                              strokeWidth="0.5"
-                            />
-                          </svg>
+                          <StandaloneBead
+                            size={size}
+                            color={beadColor}
+                            shape="diamond"
+                            animated={false}
+                            active={
+                              isActive ||
+                              (beadColor !== "rgba(139, 92, 246, 0.4)" &&
+                                beadColor !== "rgba(34, 197, 94, 0.4)")
+                            }
+                          />
                         </div>
-                      )
+                      );
                     })}
 
                     <Slider.Track
                       className={css({
-                        bg: 'rgba(255, 255, 255, 0.2)',
-                        position: 'relative',
+                        bg: "rgba(255, 255, 255, 0.2)",
+                        position: "relative",
                         flexGrow: 1,
-                        rounded: 'full',
-                        h: '3px',
+                        rounded: "full",
+                        h: "3px",
                       })}
                     >
-                      <Slider.Range className={css({ display: 'none' })} />
+                      <Slider.Range className={css({ display: "none" })} />
                     </Slider.Track>
 
                     <Slider.Thumb
                       className={css({
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        w: '28px',
-                        h: '28px',
-                        bg: 'transparent',
-                        cursor: 'grab',
-                        transition: 'all 0.2s',
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        w: "28px",
+                        h: "28px",
+                        bg: "transparent",
+                        cursor: "grab",
+                        transition: "all 0.2s",
                         zIndex: 10,
-                        _hover: { transform: 'scale(1.15)' },
+                        _hover: { transform: "scale(1.15)" },
                         _focus: {
-                          outline: 'none',
-                          transform: 'scale(1.15)',
+                          outline: "none",
+                          transform: "scale(1.15)",
                         },
-                        _active: { cursor: 'grabbing' },
+                        _active: { cursor: "grabbing" },
                       })}
                     >
-                      <svg width="28" height="28" viewBox="0 0 28 28">
-                        {/* Diamond bead matching abacus style */}
-                        <polygon
-                          points="0,14 14,0 28,14 14,28"
-                          fill={currentLevel.color === 'violet' ? '#8b5cf6' : '#22c55e'}
-                          stroke="#000"
-                          strokeWidth="0.8"
-                        />
-                        {/* Inner highlight for depth */}
-                        <polygon
-                          points="3,14 14,3 25,14 14,25"
-                          fill={
-                            currentLevel.color === 'violet'
-                              ? 'rgba(139, 92, 246, 0.3)'
-                              : 'rgba(34, 197, 94, 0.3)'
-                          }
-                          stroke="none"
-                        />
-                      </svg>
+                      <StandaloneBead
+                        size={28}
+                        color={
+                          currentLevel.color === "violet"
+                            ? "#8b5cf6"
+                            : "#22c55e"
+                        }
+                        shape="diamond"
+                        animated={false}
+                      />
                     </Slider.Thumb>
                   </Slider.Root>
                 </div>
@@ -415,11 +491,11 @@ export default function LevelsPage() {
                 {/* Level Markers */}
                 <div
                   className={css({
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    mt: '1',
-                    fontSize: 'xs',
-                    color: 'gray.500',
+                    display: "flex",
+                    justifyContent: "space-between",
+                    mt: "1",
+                    fontSize: "xs",
+                    color: "gray.500",
                   })}
                 >
                   <span>10th Kyu</span>
@@ -431,21 +507,23 @@ export default function LevelsPage() {
               {/* Abacus Display */}
               <div
                 className={css({
-                  display: 'flex',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  p: '6',
-                  bg: 'rgba(0, 0, 0, 0.3)',
-                  rounded: 'lg',
-                  border: '1px solid',
-                  borderColor: 'gray.700',
-                  overflow: 'hidden',
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  p: "6",
+                  bg: "rgba(0, 0, 0, 0.3)",
+                  rounded: "lg",
+                  border: "1px solid",
+                  borderColor: "gray.700",
+                  overflow: "hidden",
                   flex: 1,
                 })}
               >
                 <animated.div
                   style={{
-                    transform: animatedProps.scaleFactor.to((s) => `scale(${s / scaleFactor})`),
+                    transform: animatedProps.scaleFactor.to(
+                      (s) => `scale(${s / scaleFactor})`,
+                    ),
                   }}
                 >
                   <AbacusReact
@@ -459,46 +537,105 @@ export default function LevelsPage() {
               </div>
 
               {/* Digit Count */}
-              <div className={css({ textAlign: 'center', color: 'gray.400', fontSize: 'sm' })}>
-                Requires mastery of <strong>{currentLevel.digits}-digit</strong> calculations
+              <div
+                className={css({
+                  textAlign: "center",
+                  color: "gray.400",
+                  fontSize: "sm",
+                })}
+              >
+                Requires mastery of <strong>{currentLevel.digits}-digit</strong>{" "}
+                calculations
               </div>
             </div>
 
             {/* Legend */}
             <div
               className={css({
-                display: 'flex',
-                flexWrap: 'wrap',
-                gap: '6',
-                justifyContent: 'center',
-                p: '6',
-                bg: 'rgba(0, 0, 0, 0.3)',
-                rounded: 'lg',
-                border: '1px solid',
-                borderColor: 'gray.700',
+                display: "flex",
+                flexWrap: "wrap",
+                gap: "6",
+                justifyContent: "center",
+                p: "6",
+                bg: "rgba(0, 0, 0, 0.3)",
+                rounded: "lg",
+                border: "1px solid",
+                borderColor: "gray.700",
               })}
             >
-              <div className={css({ display: 'flex', alignItems: 'center', gap: '2' })}>
-                <div className={css({ w: '4', h: '4', bg: 'green.500', rounded: 'sm' })} />
-                <span className={css({ fontSize: 'sm', color: 'gray.300' })}>
+              <div
+                className={css({
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "2",
+                })}
+              >
+                <div
+                  className={css({
+                    w: "4",
+                    h: "4",
+                    bg: "green.500",
+                    rounded: "sm",
+                  })}
+                />
+                <span className={css({ fontSize: "sm", color: "gray.300" })}>
                   Beginner (10-7 Kyu)
                 </span>
               </div>
-              <div className={css({ display: 'flex', alignItems: 'center', gap: '2' })}>
-                <div className={css({ w: '4', h: '4', bg: 'blue.500', rounded: 'sm' })} />
-                <span className={css({ fontSize: 'sm', color: 'gray.300' })}>
+              <div
+                className={css({
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "2",
+                })}
+              >
+                <div
+                  className={css({
+                    w: "4",
+                    h: "4",
+                    bg: "blue.500",
+                    rounded: "sm",
+                  })}
+                />
+                <span className={css({ fontSize: "sm", color: "gray.300" })}>
                   Intermediate (6-4 Kyu)
                 </span>
               </div>
-              <div className={css({ display: 'flex', alignItems: 'center', gap: '2' })}>
-                <div className={css({ w: '4', h: '4', bg: 'violet.500', rounded: 'sm' })} />
-                <span className={css({ fontSize: 'sm', color: 'gray.300' })}>
+              <div
+                className={css({
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "2",
+                })}
+              >
+                <div
+                  className={css({
+                    w: "4",
+                    h: "4",
+                    bg: "violet.500",
+                    rounded: "sm",
+                  })}
+                />
+                <span className={css({ fontSize: "sm", color: "gray.300" })}>
                   Advanced (3-1 Kyu)
                 </span>
               </div>
-              <div className={css({ display: 'flex', alignItems: 'center', gap: '2' })}>
-                <div className={css({ w: '4', h: '4', bg: 'amber.500', rounded: 'sm' })} />
-                <span className={css({ fontSize: 'sm', color: 'gray.300' })}>
+              <div
+                className={css({
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "2",
+                })}
+              >
+                <div
+                  className={css({
+                    w: "4",
+                    h: "4",
+                    bg: "amber.500",
+                    rounded: "sm",
+                  })}
+                />
+                <span className={css({ fontSize: "sm", color: "gray.300" })}>
                   Master (Dan ranks)
                 </span>
               </div>
@@ -507,34 +644,39 @@ export default function LevelsPage() {
             {/* Info Section */}
             <div
               className={css({
-                bg: 'rgba(0, 0, 0, 0.4)',
-                border: '1px solid',
-                borderColor: 'gray.700',
-                rounded: 'xl',
-                p: { base: '6', md: '8' },
+                bg: "rgba(0, 0, 0, 0.4)",
+                border: "1px solid",
+                borderColor: "gray.700",
+                rounded: "xl",
+                p: { base: "6", md: "8" },
               })}
             >
               <h3
                 className={css({
-                  fontSize: { base: 'xl', md: '2xl' },
-                  fontWeight: 'bold',
-                  color: 'white',
-                  mb: '4',
+                  fontSize: { base: "xl", md: "2xl" },
+                  fontWeight: "bold",
+                  color: "white",
+                  mb: "4",
                 })}
               >
                 About This Ranking System
               </h3>
-              <div className={stack({ gap: '4' })}>
-                <p className={css({ color: 'gray.300', lineHeight: '1.6' })}>
-                  This ranking system is based on the official examination structure used by the{' '}
-                  <strong className={css({ color: 'white' })}>Japan Abacus Federation</strong>. It
-                  represents a standardized progression from beginner (10th Kyu) to master level
-                  (10th Dan), used internationally for soroban proficiency assessment.
+              <div className={stack({ gap: "4" })}>
+                <p className={css({ color: "gray.300", lineHeight: "1.6" })}>
+                  This ranking system is based on the official examination
+                  structure used by the{" "}
+                  <strong className={css({ color: "white" })}>
+                    Japan Abacus Federation
+                  </strong>
+                  . It represents a standardized progression from beginner (10th
+                  Kyu) to master level (10th Dan), used internationally for
+                  soroban proficiency assessment.
                 </p>
-                <p className={css({ color: 'gray.300', lineHeight: '1.6' })}>
-                  The system is designed to gradually increase in difficulty. Kyu levels progress
-                  from 2-digit calculations at 10th Kyu to 10-digit calculations at 1st Kyu. Dan
-                  levels all require mastery of 30-digit calculations, with ranks awarded based on
+                <p className={css({ color: "gray.300", lineHeight: "1.6" })}>
+                  The system is designed to gradually increase in difficulty.
+                  Kyu levels progress from 2-digit calculations at 10th Kyu to
+                  10-digit calculations at 1st Kyu. Dan levels all require
+                  mastery of 30-digit calculations, with ranks awarded based on
                   exam scores.
                 </p>
               </div>
@@ -543,5 +685,5 @@ export default function LevelsPage() {
         </div>
       </div>
     </PageWithNav>
-  )
+  );
 }
diff --git a/packages/abacus-react/src/StandaloneBead.tsx b/packages/abacus-react/src/StandaloneBead.tsx
new file mode 100644
index 00000000..f4c97ba0
--- /dev/null
+++ b/packages/abacus-react/src/StandaloneBead.tsx
@@ -0,0 +1,147 @@
+"use client";
+
+import React from "react";
+import { useSpring, animated } from "@react-spring/web";
+import {
+  useAbacusConfig,
+  getDefaultAbacusConfig,
+  type BeadShape,
+} from "./AbacusContext";
+
+export interface StandaloneBeadProps {
+  /** Size of the bead in pixels */
+  size?: number;
+  /** Override the shape from context (diamond, circle, square) */
+  shape?: BeadShape;
+  /** Override the color from context */
+  color?: string;
+  /** Enable animation */
+  animated?: boolean;
+  /** Custom className */
+  className?: string;
+  /** Custom style */
+  style?: React.CSSProperties;
+  /** Active state for the bead */
+  active?: boolean;
+}
+
+/**
+ * Standalone Bead component that respects the AbacusDisplayContext.
+ * This component renders a single abacus bead with styling from the context.
+ *
+ * Usage:
+ * ```tsx
+ * import { StandaloneBead, AbacusDisplayProvider } from '@soroban/abacus-react';
+ *
+ * <AbacusDisplayProvider>
+ *   <StandaloneBead size={28} color="#8b5cf6" />
+ * </AbacusDisplayProvider>
+ * ```
+ */
+export const StandaloneBead: React.FC<StandaloneBeadProps> = ({
+  size = 28,
+  shape: shapeProp,
+  color: colorProp,
+  animated: animatedProp,
+  className,
+  style,
+  active = true,
+}) => {
+  // Try to use context config, fallback to defaults if no context
+  let contextConfig;
+  try {
+    contextConfig = useAbacusConfig();
+  } catch {
+    // No context provider, use defaults
+    contextConfig = getDefaultAbacusConfig();
+  }
+
+  // Use props if provided, otherwise fall back to context config
+  const shape = shapeProp ?? contextConfig.beadShape;
+  const enableAnimation = animatedProp ?? contextConfig.animated;
+  const color = colorProp ?? "#000000";
+
+  const [springs, api] = useSpring(() => ({
+    scale: 1,
+    config: { tension: 300, friction: 20 },
+  }));
+
+  React.useEffect(() => {
+    if (enableAnimation) {
+      api.start({ scale: 1 });
+    }
+  }, [enableAnimation, api]);
+
+  const renderShape = () => {
+    const halfSize = size / 2;
+    const actualColor = active ? color : "rgb(211, 211, 211)";
+
+    switch (shape) {
+      case "diamond":
+        return (
+          <polygon
+            points={`${size * 0.7},0 ${size * 1.4},${halfSize} ${size * 0.7},${size} 0,${halfSize}`}
+            fill={actualColor}
+            stroke="#000"
+            strokeWidth="0.5"
+          />
+        );
+      case "square":
+        return (
+          <rect
+            width={size}
+            height={size}
+            fill={actualColor}
+            stroke="#000"
+            strokeWidth="0.5"
+            rx="1"
+          />
+        );
+      case "circle":
+      default:
+        return (
+          <circle
+            cx={halfSize}
+            cy={halfSize}
+            r={halfSize}
+            fill={actualColor}
+            stroke="#000"
+            strokeWidth="0.5"
+          />
+        );
+    }
+  };
+
+  const getXOffset = () => {
+    return shape === "diamond" ? size * 0.7 : size / 2;
+  };
+
+  const getYOffset = () => {
+    return size / 2;
+  };
+
+  const AnimatedG = animated.g;
+
+  return (
+    <svg
+      width={size * (shape === "diamond" ? 1.4 : 1)}
+      height={size}
+      className={className}
+      style={style}
+    >
+      <AnimatedG
+        transform={`translate(0, 0)`}
+        style={
+          enableAnimation
+            ? {
+                transform: springs.scale.to((s) => `scale(${s})`),
+                transformOrigin: "center",
+              }
+            : undefined
+        }
+      >
+        {renderShape()}
+      </AnimatedG>
+    </svg>
+  );
+};
diff --git a/packages/abacus-react/src/index.ts b/packages/abacus-react/src/index.ts
index 38e447dd..6a1ee6e1 100644
--- a/packages/abacus-react/src/index.ts
+++ b/packages/abacus-react/src/index.ts
@@ -14,3 +14,6 @@ export type {
   AbacusDisplayConfig,
   AbacusDisplayContextType,
 } from "./AbacusContext";
+
+export { StandaloneBead } from "./StandaloneBead";
+export type { StandaloneBeadProps } from "./StandaloneBead";