chore(release): 4.33.3 [skip ci]

## [4.33.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.2...v4.33.3) (2025-10-20) ### Code Refactoring * **levels:** move slider into level display pane above abacus ([2d8bb4a](2d8bb4ab88))
refactor(levels): move slider into level display pane above abacus
2025-10-20 13:51:02 +00:00 · 2025-10-20 08:49:59 -05:00 · 2025-10-20 13:46:27 +00:00 · 2025-10-20 08:45:17 -05:00 · 2025-10-20 13:44:30 +00:00 · 2025-10-20 08:43:24 -05:00
3 changed files with 89 additions and 74 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,24 @@
+## [4.33.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.2...v4.33.3) (2025-10-20)
+
+
+### Code Refactoring
+
+* **levels:** move slider into level display pane above abacus ([2d8bb4a](https://github.com/antialias/soroban-abacus-flashcards/commit/2d8bb4ab8804f399d1ccc8a18feff9f09eca8029))
+
+## [4.33.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.1...v4.33.2) (2025-10-20)
+
+
+### Bug Fixes
+
+* **levels:** add fixed height to entire level display pane ([200b26c](https://github.com/antialias/soroban-abacus-flashcards/commit/200b26c2cd35d1d637ede9dcfc3dbbc7f3f19320))
+
+## [4.33.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.0...v4.33.1) (2025-10-20)
+
+
+### Bug Fixes
+
+* **levels:** only animate abacus, not container with background/border ([c80477d](https://github.com/antialias/soroban-abacus-flashcards/commit/c80477d24877ddada5f3f4405abbf05e1d753b5d))
+
 ## [4.33.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.32.1...v4.33.0) (2025-10-20)


--- a/apps/web/src/app/levels/page.tsx
+++ b/apps/web/src/app/levels/page.tsx
@@ -253,6 +253,9 @@ export default function LevelsPage() {
                        : 'amber.500',
                rounded: 'xl',
                p: { base: '6', md: '8' },
+                height: { base: 'auto', md: '700px' },
+                display: 'flex',
+                flexDirection: 'column',
              })}
            >
              {/* Level Info */}
@@ -287,11 +290,59 @@ export default function LevelsPage() {
                )}
              </div>

+              {/* Range Slider with hover support */}
+              <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' })}>
+                    Hover, drag, or touch the slider to explore all levels
+                  </p>
+                </div>
+
+                <div
+                  onMouseMove={handleSliderHover}
+                  onTouchMove={handleSliderHover}
+                  className={css({ position: 'relative' })}
+                >
+                  <input
+                    ref={sliderRef}
+                    type="range"
+                    min="0"
+                    max={allLevels.length - 1}
+                    value={currentIndex}
+                    onChange={(e) => setCurrentIndex(Number(e.target.value))}
+                    className={css({
+                      w: '100%',
+                      h: '2',
+                      bg: 'gray.700',
+                      rounded: 'full',
+                      outline: 'none',
+                      cursor: 'pointer',
+                    })}
+                  />
+                </div>
+
+                {/* Level Markers */}
+                <div
+                  className={css({
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    mt: '3',
+                    fontSize: 'xs',
+                    color: 'gray.500',
+                  })}
+                >
+                  <span>10th Kyu</span>
+                  <span>1st Kyu</span>
+                  <span>10th Dan</span>
+                </div>
+              </div>
+
              {/* Abacus Display */}
-              <animated.div
+              <div
                className={css({
                  display: 'flex',
                  justifyContent: 'center',
+                  alignItems: 'center',
                  mb: '6',
                  p: '6',
                  bg: 'rgba(0, 0, 0, 0.3)',
@@ -299,19 +350,23 @@ export default function LevelsPage() {
                  border: '1px solid',
                  borderColor: 'gray.700',
                  overflowX: 'auto',
+                  flex: 1,
                })}
-                style={{
-                  transform: animatedProps.scaleFactor.to((s) => `scale(${s / scaleFactor})`),
-                }}
              >
-                <AbacusReact
-                  value={displayValue}
-                  columns={currentLevel.digits}
-                  scaleFactor={scaleFactor}
-                  showNumbers={true}
-                  customStyles={darkStyles}
-                />
-              </animated.div>
+                <animated.div
+                  style={{
+                    transform: animatedProps.scaleFactor.to((s) => `scale(${s / scaleFactor})`),
+                  }}
+                >
+                  <AbacusReact
+                    value={displayValue}
+                    columns={currentLevel.digits}
+                    scaleFactor={scaleFactor}
+                    showNumbers={true}
+                    customStyles={darkStyles}
+                  />
+                </animated.div>
+              </div>

              {/* Digit Count */}
              <div className={css({ textAlign: 'center', color: 'gray.400', fontSize: 'sm' })}>
@@ -319,67 +374,6 @@ export default function LevelsPage() {
              </div>
            </div>

-            {/* Slider Control */}
-            <div
-              className={css({
-                bg: 'rgba(0, 0, 0, 0.3)',
-                border: '1px solid',
-                borderColor: 'gray.700',
-                rounded: 'xl',
-                p: '6',
-              })}
-            >
-              <div className={css({ mb: '4', textAlign: 'center' })}>
-                <h3
-                  className={css({ fontSize: 'lg', fontWeight: 'bold', color: 'white', mb: '2' })}
-                >
-                  Explore All Levels
-                </h3>
-                <p className={css({ fontSize: 'sm', color: 'gray.400' })}>
-                  Hover, drag, or touch the slider to see each rank
-                </p>
-              </div>
-
-              {/* Range Slider with hover support */}
-              <div
-                onMouseMove={handleSliderHover}
-                onTouchMove={handleSliderHover}
-                className={css({ position: 'relative' })}
-              >
-                <input
-                  ref={sliderRef}
-                  type="range"
-                  min="0"
-                  max={allLevels.length - 1}
-                  value={currentIndex}
-                  onChange={(e) => setCurrentIndex(Number(e.target.value))}
-                  className={css({
-                    w: '100%',
-                    h: '2',
-                    bg: 'gray.700',
-                    rounded: 'full',
-                    outline: 'none',
-                    cursor: 'pointer',
-                  })}
-                />
-              </div>
-
-              {/* Level Markers */}
-              <div
-                className={css({
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                  mt: '4',
-                  fontSize: 'xs',
-                  color: 'gray.500',
-                })}
-              >
-                <span>10th Kyu</span>
-                <span>1st Kyu</span>
-                <span>10th Dan</span>
-              </div>
-            </div>
-
            {/* Legend */}
            <div
              className={css({
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "soroban-monorepo",
-  "version": "4.33.0",
+  "version": "4.33.3",
  "private": true,
  "description": "Beautiful Soroban Flashcard Generator - Monorepo",
  "workspaces": [
Author	SHA1	Message	Date
semantic-release-bot	22c8a57a16	chore(release): 4.33.3 [skip ci] ## [4.33.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.2...v4.33.3) (2025-10-20) ### Code Refactoring * levels: move slider into level display pane above abacus ([`2d8bb4a`](`2d8bb4ab88`))	2025-10-20 13:51:02 +00:00
Thomas Hallock	2d8bb4ab88	refactor(levels): move slider into level display pane above abacus Relocate the slider control from a separate container below the level display to inside the level pane itself, positioned above the abacus. Changes: - Move slider markup into main level display pane - Position between level info and abacus display - Remove separate slider container that was below - Adjust spacing for better visual hierarchy Improves UX by keeping the control close to the content it affects. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 08:49:59 -05:00
semantic-release-bot	8e345cfb4c	chore(release): 4.33.2 [skip ci] ## [4.33.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.1...v4.33.2) (2025-10-20) ### Bug Fixes * levels: add fixed height to entire level display pane ([`200b26c`](`200b26c2cd`))	2025-10-20 13:46:27 +00:00
Thomas Hallock	200b26c2cd	fix(levels): add fixed height to entire level display pane Fix slider hover interaction by making the entire level display pane (including level info, abacus, and digit count) a fixed height. This prevents the slider from moving when hovering over it. Changes: - Add fixed height of 700px on desktop (auto on mobile) to level pane - Convert container to flexbox with column direction - Make abacus display area flex: 1 to fill remaining space - Slider now stays perfectly still under mouse during hover This makes the hover interaction much more usable - you can now smoothly move your mouse across the slider without it jumping away. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 08:45:17 -05:00
semantic-release-bot	66e38af457	chore(release): 4.33.1 [skip ci] ## [4.33.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.0...v4.33.1) (2025-10-20) ### Bug Fixes * levels: only animate abacus, not container with background/border ([`c80477d`](`c80477d248`))	2025-10-20 13:44:30 +00:00
Thomas Hallock	c80477d248	fix(levels): only animate abacus, not container with background/border Fix React Spring animation to only affect the abacus itself, not the container with background and border. Also keep container height fixed. Changes: - Move animation from container div to inner wrapper around AbacusReact - Add minHeight to container to prevent height changes - Add alignItems: 'center' to vertically center the abacus - Container background/border now stays fixed while abacus animates This provides a cleaner, more polished animation where only the abacus scales smoothly while the container remains stable. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 08:43:24 -05:00