chore(release): 4.27.0 [skip ci]

## [4.27.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.26.0...v4.27.0) (2025-10-20) ### Features * **levels:** add Dan levels ladder visualization ([c18012c](c18012cb50))
feat(levels): add Dan levels ladder visualization
2025-10-20 12:18:57 +00:00 · 2025-10-20 07:17:51 -05:00 · 2025-10-20 12:15:15 +00:00 · 2025-10-20 07:14:16 -05:00
3 changed files with 464 additions and 14 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,17 @@
+## [4.27.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.26.0...v4.27.0) (2025-10-20)
+
+
+### Features
+
+* **levels:** add Dan levels ladder visualization ([c18012c](https://github.com/antialias/soroban-abacus-flashcards/commit/c18012cb505a1f2a86ebed7579b379a4d7d97f2c))
+
+## [4.26.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.25.1...v4.26.0) (2025-10-20)
+
+
+### Features
+
+* **levels:** add kyu level data and cards ([6463a3b](https://github.com/antialias/soroban-abacus-flashcards/commit/6463a3b2f6371ebebac1048197fb44178997d2ef))
+
 ## [4.25.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.25.0...v4.25.1) (2025-10-20)


--- a/apps/web/src/app/levels/page.tsx
+++ b/apps/web/src/app/levels/page.tsx
@@ -2,7 +2,173 @@

 import { PageWithNav } from '@/components/PageWithNav'
 import { css } from '../../../styled-system/css'
-import { container, stack } from '../../../styled-system/patterns'
+import { container, grid, stack } from '../../../styled-system/patterns'
+
+// Kyu level data from the Japan Abacus Federation
+const kyuLevels = [
+  {
+    level: '10th Kyu',
+    emoji: '🧒',
+    color: 'green',
+    duration: '20 min',
+    passThreshold: '30%',
+    points: '60/200',
+    sections: [
+      { name: 'Addition', digits: '2-digit', problems: 10, points: 10 },
+      { name: 'Subtraction', digits: '2-digit', problems: 10, points: 10 },
+    ],
+    notes: 'No division at this level',
+  },
+  {
+    level: '9th Kyu',
+    emoji: '🧒',
+    color: 'green',
+    duration: '20 min',
+    passThreshold: '60%',
+    points: '120/200',
+    sections: [
+      { name: 'Addition', digits: '2-digit', problems: 10, points: 10 },
+      { name: 'Subtraction', digits: '2-digit', problems: 10, points: 10 },
+      { name: 'Multiplication', digits: '1×1', problems: 10, points: 10 },
+    ],
+    notes: 'Introduces multiplication',
+  },
+  {
+    level: '8th Kyu',
+    emoji: '🧒',
+    color: 'green',
+    duration: '20 min',
+    passThreshold: '60%',
+    points: '120/200',
+    sections: [
+      { name: 'Addition', digits: '3-digit', problems: 10, points: 10 },
+      { name: 'Subtraction', digits: '3-digit', problems: 10, points: 10 },
+      { name: 'Multiplication', digits: '2×1', problems: 10, points: 10 },
+      { name: 'Division', digits: '2÷1', problems: 10, points: 10 },
+    ],
+    notes: 'Introduces division',
+  },
+  {
+    level: '7th Kyu',
+    emoji: '🧒',
+    color: 'green',
+    duration: '20 min',
+    passThreshold: '60%',
+    points: '120/200',
+    sections: [
+      { name: 'Addition', digits: '4-digit', problems: 10, points: 10 },
+      { name: 'Subtraction', digits: '4-digit', problems: 10, points: 10 },
+      { name: 'Multiplication', digits: '3×1', problems: 10, points: 10 },
+      { name: 'Division', digits: '3÷1', problems: 10, points: 10 },
+    ],
+    notes: 'All four operations',
+  },
+  {
+    level: '6th Kyu',
+    emoji: '🧑',
+    color: 'blue',
+    duration: '30 min',
+    passThreshold: '70%',
+    points: '210/300',
+    sections: [
+      { name: 'Addition', digits: '5-digit', problems: 10, points: 10 },
+      { name: 'Subtraction', digits: '5-digit', problems: 10, points: 10 },
+      { name: 'Multiplication', digits: '4×2', problems: 10, points: 10 },
+      { name: 'Division', digits: '5÷2', problems: 10, points: 10 },
+    ],
+    notes: 'Longer exam time',
+  },
+  {
+    level: '5th Kyu',
+    emoji: '🧑',
+    color: 'blue',
+    duration: '30 min',
+    passThreshold: '70%',
+    points: '210/300',
+    sections: [
+      { name: 'Addition', digits: '6-digit', problems: 10, points: 10 },
+      { name: 'Subtraction', digits: '6-digit', problems: 10, points: 10 },
+      { name: 'Multiplication', digits: '5×2', problems: 10, points: 10 },
+      { name: 'Division', digits: '6÷2', problems: 10, points: 10 },
+    ],
+    notes: 'Mid-level proficiency',
+  },
+  {
+    level: '4th Kyu',
+    emoji: '🧑',
+    color: 'blue',
+    duration: '30 min',
+    passThreshold: '70%',
+    points: '210/300',
+    sections: [
+      { name: 'Addition', digits: '7-digit', problems: 10, points: 10 },
+      { name: 'Subtraction', digits: '7-digit', problems: 10, points: 10 },
+      { name: 'Multiplication', digits: '6×2', problems: 10, points: 10 },
+      { name: 'Division', digits: '7÷2', problems: 10, points: 10 },
+    ],
+    notes: 'Advanced intermediate',
+  },
+  {
+    level: '3rd Kyu',
+    emoji: '🧔',
+    color: 'violet',
+    duration: '30 min',
+    passThreshold: '80%',
+    points: '240/300',
+    sections: [
+      { name: 'Addition', digits: '8-digit', problems: 10, points: 10 },
+      { name: 'Subtraction', digits: '8-digit', problems: 10, points: 10 },
+      { name: 'Multiplication', digits: '7×2', problems: 10, points: 10 },
+      { name: 'Division', digits: '8÷2', problems: 10, points: 10 },
+    ],
+    notes: 'Higher pass threshold (80%)',
+  },
+  {
+    level: '2nd Kyu',
+    emoji: '🧔',
+    color: 'violet',
+    duration: '30 min',
+    passThreshold: '80%',
+    points: '240/300',
+    sections: [
+      { name: 'Addition', digits: '9-digit', problems: 10, points: 10 },
+      { name: 'Subtraction', digits: '9-digit', problems: 10, points: 10 },
+      { name: 'Multiplication', digits: '8×2', problems: 10, points: 10 },
+      { name: 'Division', digits: '9÷2', problems: 10, points: 10 },
+    ],
+    notes: 'Near-mastery level',
+  },
+  {
+    level: '1st Kyu',
+    emoji: '🧔',
+    color: 'violet',
+    duration: '30 min',
+    passThreshold: '80%',
+    points: '240/300',
+    sections: [
+      { name: 'Addition', digits: '10-digit', problems: 10, points: 10 },
+      { name: 'Subtraction', digits: '10-digit', problems: 10, points: 10 },
+      { name: 'Multiplication', digits: '9×2', problems: 10, points: 10 },
+      { name: 'Division', digits: '10÷2', problems: 10, points: 10 },
+    ],
+    notes: 'Highest Kyu level before Dan',
+  },
+] as const
+
+// Dan level data - score-based ranking system
+const danLevels = [
+  { level: 'Pre-1st Dan', name: 'Jun-Shodan', minScore: 90, emoji: '🧙' },
+  { level: '1st Dan', name: 'Shodan', minScore: 100, emoji: '🧙' },
+  { level: '2nd Dan', name: 'Nidan', minScore: 120, emoji: '🧙‍♂️' },
+  { level: '3rd Dan', name: 'Sandan', minScore: 140, emoji: '🧙‍♂️' },
+  { level: '4th Dan', name: 'Yondan', minScore: 160, emoji: '🧙‍♀️' },
+  { level: '5th Dan', name: 'Godan', minScore: 180, emoji: '🧙‍♀️' },
+  { level: '6th Dan', name: 'Rokudan', minScore: 200, emoji: '🧝' },
+  { level: '7th Dan', name: 'Nanadan', minScore: 220, emoji: '🧝' },
+  { level: '8th Dan', name: 'Hachidan', minScore: 250, emoji: '🧝‍♂️' },
+  { level: '9th Dan', name: 'Kudan', minScore: 270, emoji: '🧝‍♀️' },
+  { level: '10th Dan', name: 'Judan', minScore: 290, emoji: '👑' },
+] as const

 export default function LevelsPage() {
  return (
@@ -113,7 +279,7 @@ export default function LevelsPage() {

        {/* Main content container */}
        <div className={container({ maxW: '7xl', px: '4', py: '12' })}>
-          {/* Placeholder for Phase 2 */}
+          {/* Kyu Levels Section */}
          <section className={stack({ gap: '8' })}>
            <div className={css({ textAlign: 'center' })}>
              <h2
@@ -127,27 +293,297 @@ export default function LevelsPage() {
                Kyu Levels (10th to 1st)
              </h2>
              <p className={css({ color: 'gray.400', fontSize: 'md', mb: '8' })}>
-                Content coming in Phase 2...
+                Progress from beginner to advanced mastery
              </p>
            </div>

-            {/* Placeholder card */}
+            {/* Kyu Level Cards */}
+            <div className={grid({ columns: { base: 1, md: 2, lg: 3 }, gap: '6' })}>
+              {kyuLevels.map((kyu, index) => (
+                <div
+                  key={index}
+                  className={css({
+                    bg: 'rgba(0, 0, 0, 0.4)',
+                    border: '1px solid',
+                    borderColor:
+                      kyu.color === 'green'
+                        ? 'green.700'
+                        : kyu.color === 'blue'
+                          ? 'blue.700'
+                          : 'violet.700',
+                    rounded: 'xl',
+                    p: '6',
+                    transition: 'all 0.2s',
+                    _hover: {
+                      bg: 'rgba(0, 0, 0, 0.5)',
+                      borderColor:
+                        kyu.color === 'green'
+                          ? 'green.500'
+                          : kyu.color === 'blue'
+                            ? 'blue.500'
+                            : 'violet.500',
+                      transform: 'translateY(-2px)',
+                    },
+                  })}
+                >
+                  {/* Card Header */}
+                  <div
+                    className={css({ display: 'flex', alignItems: 'center', gap: '3', mb: '4' })}
+                  >
+                    <div className={css({ fontSize: '3xl' })}>{kyu.emoji}</div>
+                    <div>
+                      <h3
+                        className={css({
+                          fontSize: 'xl',
+                          fontWeight: 'bold',
+                          color:
+                            kyu.color === 'green'
+                              ? 'green.400'
+                              : kyu.color === 'blue'
+                                ? 'blue.400'
+                                : 'violet.400',
+                        })}
+                      >
+                        {kyu.level}
+                      </h3>
+                      <p className={css({ fontSize: 'sm', color: 'gray.400' })}>{kyu.notes}</p>
+                    </div>
+                  </div>
+
+                  {/* Exam Details */}
+                  <div className={stack({ gap: '3' })}>
+                    <div
+                      className={css({
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        fontSize: 'sm',
+                      })}
+                    >
+                      <span className={css({ color: 'gray.400' })}>Duration:</span>
+                      <span className={css({ color: 'white', fontWeight: '500' })}>
+                        {kyu.duration}
+                      </span>
+                    </div>
+                    <div
+                      className={css({
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        fontSize: 'sm',
+                      })}
+                    >
+                      <span className={css({ color: 'gray.400' })}>Pass Threshold:</span>
+                      <span className={css({ color: 'amber.400', fontWeight: '600' })}>
+                        {kyu.passThreshold}
+                      </span>
+                    </div>
+                    <div
+                      className={css({
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        fontSize: 'sm',
+                      })}
+                    >
+                      <span className={css({ color: 'gray.400' })}>Points Needed:</span>
+                      <span className={css({ color: 'white', fontWeight: '500' })}>
+                        {kyu.points}
+                      </span>
+                    </div>
+                  </div>
+
+                  {/* Sections */}
+                  <div
+                    className={css({
+                      mt: '4',
+                      pt: '4',
+                      borderTop: '1px solid',
+                      borderColor: 'gray.700',
+                    })}
+                  >
+                    <div
+                      className={css({
+                        fontSize: 'xs',
+                        color: 'gray.500',
+                        mb: '2',
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.05em',
+                      })}
+                    >
+                      Problem Types
+                    </div>
+                    {kyu.sections.map((section, i) => (
+                      <div
+                        key={i}
+                        className={css({
+                          display: 'flex',
+                          justifyContent: 'space-between',
+                          fontSize: 'sm',
+                          py: '1',
+                        })}
+                      >
+                        <span className={css({ color: 'gray.300' })}>{section.name}</span>
+                        <span className={css({ color: 'gray.400', fontSize: 'xs' })}>
+                          {section.digits}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          {/* Dan Levels Section */}
+          <section className={stack({ gap: '8', mt: '16' })}>
+            <div className={css({ textAlign: 'center' })}>
+              <h2
+                className={css({
+                  fontSize: { base: '2xl', md: '3xl' },
+                  fontWeight: 'bold',
+                  color: 'white',
+                  mb: '4',
+                })}
+              >
+                Dan Levels (Master Ranks)
+              </h2>
+              <p className={css({ color: 'gray.400', fontSize: 'md', mb: '8' })}>
+                Score-based ranking system for master-level practitioners
+              </p>
+            </div>
+
+            {/* Exam Requirements Box */}
+            <div
+              className={css({
+                bg: 'rgba(251, 191, 36, 0.1)',
+                border: '1px solid',
+                borderColor: 'amber.700',
+                rounded: 'xl',
+                p: '6',
+                mb: '6',
+              })}
+            >
+              <h3
+                className={css({
+                  fontSize: 'lg',
+                  fontWeight: 'bold',
+                  color: 'amber.400',
+                  mb: '3',
+                })}
+              >
+                Dan Exam Requirements
+              </h3>
+              <div className={stack({ gap: '2' })}>
+                <div className={css({ fontSize: 'sm', color: 'gray.300' })}>
+                  <strong>Duration:</strong> 30 minutes
+                </div>
+                <div className={css({ fontSize: 'sm', color: 'gray.300' })}>
+                  <strong>Problem Complexity:</strong> 3× that of 1st Kyu
+                </div>
+                <div className={css({ fontSize: 'sm', color: 'gray.300', mt: '2' })}>
+                  • Addition/Subtraction: 30-digit numbers
+                </div>
+                <div className={css({ fontSize: 'sm', color: 'gray.300' })}>
+                  • Multiplication: 27×6 digits
+                </div>
+                <div className={css({ fontSize: 'sm', color: 'gray.300' })}>
+                  • Division: 30÷6 digits
+                </div>
+              </div>
+            </div>
+
+            {/* Dan Ladder Visualization */}
            <div
              className={css({
                bg: 'rgba(0, 0, 0, 0.4)',
                border: '1px solid',
-                borderColor: 'gray.700',
+                borderColor: 'amber.700',
                rounded: 'xl',
-                p: '8',
-                textAlign: 'center',
+                p: { base: '6', md: '8' },
+                position: 'relative',
              })}
            >
-              <p className={css({ color: 'gray.300' })}>
-                Phase 1 Complete! Basic page structure and routing are ready for testing.
-              </p>
-              <p className={css({ color: 'gray.400', mt: '2', fontSize: 'sm' })}>
-                Test by visiting: <code>/levels</code>
-              </p>
+              <div className={stack({ gap: '0' })}>
+                {danLevels
+                  .slice()
+                  .reverse()
+                  .map((dan, index) => {
+                    const isTop = index === 0
+                    return (
+                      <div
+                        key={index}
+                        className={css({
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: '4',
+                          p: '3',
+                          borderBottom: !isTop ? '1px solid' : 'none',
+                          borderColor: 'gray.700',
+                          transition: 'all 0.2s',
+                          _hover: {
+                            bg: isTop ? 'rgba(251, 191, 36, 0.1)' : 'rgba(251, 191, 36, 0.05)',
+                          },
+                        })}
+                      >
+                        {/* Emoji */}
+                        <div
+                          className={css({
+                            fontSize: '3xl',
+                            minW: '12',
+                            textAlign: 'center',
+                          })}
+                        >
+                          {dan.emoji}
+                        </div>
+
+                        {/* Level Info */}
+                        <div className={css({ flex: '1' })}>
+                          <div
+                            className={css({
+                              fontSize: 'lg',
+                              fontWeight: 'bold',
+                              color: isTop ? 'amber.300' : 'amber.400',
+                            })}
+                          >
+                            {dan.level}
+                          </div>
+                          <div className={css({ fontSize: 'sm', color: 'gray.400' })}>
+                            {dan.name}
+                          </div>
+                        </div>
+
+                        {/* Score */}
+                        <div
+                          className={css({
+                            fontSize: { base: 'xl', md: '2xl' },
+                            fontWeight: 'bold',
+                            color: isTop ? 'amber.300' : 'white',
+                            minW: { base: '20', md: '24' },
+                            textAlign: 'right',
+                          })}
+                        >
+                          {dan.minScore}
+                          <span className={css({ fontSize: 'sm', color: 'gray.400', ml: '1' })}>
+                            pts
+                          </span>
+                        </div>
+                      </div>
+                    )
+                  })}
+              </div>
+
+              {/* Legend */}
+              <div
+                className={css({
+                  mt: '6',
+                  pt: '6',
+                  borderTop: '1px solid',
+                  borderColor: 'gray.700',
+                  fontSize: 'sm',
+                  color: 'gray.400',
+                  textAlign: 'center',
+                })}
+              >
+                Ranks are awarded based on total score achieved on the Dan-level exam
+              </div>
            </div>
          </section>
        </div>
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "soroban-monorepo",
-  "version": "4.25.1",
+  "version": "4.27.0",
  "private": true,
  "description": "Beautiful Soroban Flashcard Generator - Monorepo",
  "workspaces": [
Author	SHA1	Message	Date
semantic-release-bot	f70ded30b9	chore(release): 4.27.0 [skip ci] ## [4.27.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.26.0...v4.27.0) (2025-10-20) ### Features * levels: add Dan levels ladder visualization ([`c18012c`](`c18012cb50`))	2025-10-20 12:18:57 +00:00
Thomas Hallock	c18012cb50	feat(levels): add Dan levels ladder visualization Add comprehensive Dan level section (Pre-1st Dan to 10th Dan) with score-based ranking system. Display as vertical ladder showing progression from 90 to 290 points. Features: - Dan exam requirements box (30-digit problems, 3× 1st Kyu complexity) - Ladder visualization with 11 Dan ranks - Japanese names (Shodan, Nidan, etc.) - Score thresholds for each rank - Amber/gold color theme for master ranks - Hover effects on each ladder rung - Mobile-responsive design Phase 4 complete: Full Dan ranking system with official JAF requirements. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 07:17:51 -05:00
semantic-release-bot	25a3356547	chore(release): 4.26.0 [skip ci] ## [4.26.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.25.1...v4.26.0) (2025-10-20) ### Features * levels: add kyu level data and cards ([`6463a3b`](`6463a3b2f6`))	2025-10-20 12:15:15 +00:00
Thomas Hallock	6463a3b2f6	feat(levels): add kyu level data and cards Add comprehensive kyu level information from 10th to 1st Kyu with detailed exam requirements. Display data in responsive grid of color-coded cards. Data includes: - Duration, pass thresholds, and point requirements - Problem types with digit complexity for each operation - Color-coded by difficulty (green → blue → violet) - Hover effects and mobile-responsive layout Phase 2 complete: All 10 kyu levels with official JAF requirements. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 07:14:16 -05:00