chore(release): 4.43.2 [skip ci]

## [4.43.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.43.1...v4.43.2) (2025-10-20)

### Code Refactoring

* **levels:** remove Time and Pass sections from kyu details ([d90b5d5](d90b5d5532))

CHANGELOG.md

@@ -1,3 +1,38 @@
+## [4.43.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.43.1...v4.43.2) (2025-10-20)
+
+
+### Code Refactoring
+
+* **levels:** remove Time and Pass sections from kyu details ([d90b5d5](https://github.com/antialias/soroban-abacus-flashcards/commit/d90b5d55322e75dd28b95376614663a506c829d4))
+
+## [4.43.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.43.0...v4.43.1) (2025-10-20)
+
+
+### Bug Fixes
+
+* **levels:** use two-column grid for kyu details to prevent clipping ([fa3b73c](https://github.com/antialias/soroban-abacus-flashcards/commit/fa3b73c69169b4694201ffa19ae3f8b5a68dfe32))
+
+## [4.43.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.42.1...v4.43.0) (2025-10-20)
+
+
+### Features
+
+* **levels:** add structured kyu exam details with card UI ([6501b07](https://github.com/antialias/soroban-abacus-flashcards/commit/6501b073b100a00982cff1ca3140921e74f31a9c))
+
+## [4.42.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.42.0...v4.42.1) (2025-10-20)
+
+
+### Code Refactoring
+
+* **levels:** store kyu data verbatim, add formatting layer ([53d23f1](https://github.com/antialias/soroban-abacus-flashcards/commit/53d23f19bc06459462afb76ed94d9b99d583a32d))
+
+## [4.42.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.41.0...v4.42.0) (2025-10-20)
+
+
+### Features
+
+* **levels:** add kyu level details display with English translations ([c650ffa](https://github.com/antialias/soroban-abacus-flashcards/commit/c650ffa1935fe370d37190b2843c0deecdcce8e7))
+
 ## [4.41.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.40.1...v4.41.0) (2025-10-20)
 
 

apps/web/src/app/levels/page.tsx

@@ -7,6 +7,7 @@ import { AbacusReact, StandaloneBead } from '@soroban/abacus-react'
 import { PageWithNav } from '@/components/PageWithNav'
 import { css } from '../../../styled-system/css'
 import { container, stack } from '../../../styled-system/patterns'
+import { kyuLevelDetails } from '@/data/kyuLevelDetails'
 
 // Combine all levels into one array for the slider
 const allLevels = [
@@ -181,6 +182,60 @@ const allLevels = [
   },
 ] as const
 
+// Helper function to map level names to kyuLevelDetails keys
+function getLevelDetailsKey(levelName: string): string | null {
+  // Convert "10th Kyu" → "10-kyu", "3rd Kyu" → "3-kyu", etc.
+  const match = levelName.match(/^(\d+)(?:st|nd|rd|th)\s+Kyu$/)
+  if (match) {
+    return `${match[1]}-kyu`
+  }
+  return null
+}
+
+// Parse and format kyu level details into structured sections with icons
+function parseKyuDetails(rawText: string) {
+  const lines = rawText.split('\n').filter((line) => line.trim() && !line.includes('shuzan.jp'))
+
+  const sections: Array<{ icon: string; label: string; value: string }> = []
+
+  for (const line of lines) {
+    if (line.includes('Add/Sub:')) {
+      // Parse addition/subtraction requirements
+      const match = line.match(/(\d+)-digit.*?(\d+)口.*?(\d+)字/)
+      if (match) {
+        sections.push({
+          icon: '➕➖',
+          label: 'Add/Sub',
+          value: `${match[1]}-digit, ${match[2]} rows, ${match[3]} chars`,
+        })
+      }
+    } else if (line.includes('×:')) {
+      // Parse multiplication requirements
+      const match = line.match(/(\d+) digits.*?\((\d+)/)
+      if (match) {
+        sections.push({
+          icon: '✖️',
+          label: 'Multiply',
+          value: `${match[1]}-digit total (${match[2]} problems)`,
+        })
+      }
+    } else if (line.includes('÷:')) {
+      // Parse division requirements
+      const match = line.match(/(\d+) digits.*?\((\d+)/)
+      if (match) {
+        sections.push({
+          icon: '➗',
+          label: 'Divide',
+          value: `${match[1]}-digit total (${match[2]} problems)`,
+        })
+      }
+    }
+    // Skip Time and Pass requirements since we don't have tests implemented
+  }
+
+  return sections
+}
+
 export default function LevelsPage() {
   const [currentIndex, setCurrentIndex] = useState(0)
   const [isHovering, setIsHovering] = useState(false)
@@ -576,12 +631,11 @@ export default function LevelsPage() {
                 </div>
               </div>
 
-              {/* Abacus Display */}
+              {/* Abacus Display with Level Details */}
               <div
                 className={css({
                   display: 'flex',
-                  justifyContent: 'flex-end',
-                  alignItems: 'center',
+                  gap: '4',
                   p: '6',
                   bg: 'rgba(0, 0, 0, 0.3)',
                   rounded: 'lg',
@@ -591,19 +645,114 @@ export default function LevelsPage() {
                   flex: 1,
                 })}
               >
-                <animated.div
-                  style={{
-                    transform: animatedProps.scaleFactor.to((s) => `scale(${s / scaleFactor})`),
-                  }}
+                {/* Level Details (only for Kyu levels) */}
+                {currentLevel.type === 'kyu' &&
+                  (() => {
+                    const detailsKey = getLevelDetailsKey(currentLevel.level)
+                    const rawText = detailsKey
+                      ? kyuLevelDetails[detailsKey as keyof typeof kyuLevelDetails]
+                      : null
+                    const sections = rawText ? parseKyuDetails(rawText) : []
+
+                    // Use consistent sizing across all levels
+                    const sizing = { fontSize: 'sm', gap: '3', iconSize: 'xl' }
+
+                    return sections.length > 0 ? (
+                      <div
+                        className={css({
+                          flex: '0 0 auto',
+                          display: 'grid',
+                          gridTemplateColumns: 'repeat(2, 1fr)',
+                          gap: sizing.gap,
+                          pr: '4',
+                          pl: '2',
+                          borderRight: '1px solid',
+                          borderColor: 'gray.600',
+                          maxW: '480px',
+                          alignContent: 'center',
+                        })}
+                      >
+                        {sections.map((section, idx) => (
+                          <div
+                            key={idx}
+                            className={css({
+                              bg: 'rgba(0, 0, 0, 0.4)',
+                              border: '1px solid',
+                              borderColor: 'gray.700',
+                              rounded: 'md',
+                              p: '2',
+                              transition: 'all 0.2s',
+                              _hover: {
+                                borderColor: 'gray.500',
+                                transform: 'translateX(4px)',
+                              },
+                            })}
+                          >
+                            <div
+                              className={css({
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '2',
+                                mb: '1',
+                              })}
+                            >
+                              <span className={css({ fontSize: sizing.iconSize })}>
+                                {section.icon}
+                              </span>
+                              <span
+                                className={css({
+                                  fontSize: sizing.fontSize,
+                                  fontWeight: 'semibold',
+                                  color:
+                                    currentLevel.color === 'green'
+                                      ? 'green.300'
+                                      : currentLevel.color === 'blue'
+                                        ? 'blue.300'
+                                        : 'violet.300',
+                                })}
+                              >
+                                {section.label}
+                              </span>
+                            </div>
+                            <div
+                              className={css({
+                                fontSize: sizing.fontSize,
+                                color: 'gray.400',
+                                lineHeight: '1.4',
+                                pl: sizing.gap === '3' ? '6' : sizing.gap === '2' ? '5' : '4',
+                              })}
+                            >
+                              {section.value}
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    ) : null
+                  })()}
+
+                {/* Abacus (right-aligned for Kyu, centered for Dan) */}
+                <div
+                  className={css({
+                    display: 'flex',
+                    justifyContent: currentLevel.type === 'kyu' ? 'flex-end' : 'center',
+                    alignItems: 'center',
+                    flex: 1,
+                  })}
                 >
-                  <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>
               </div>
 
               {/* Digit Count */}

apps/web/src/data/kyuLevelDetails.ts

@@ -0,0 +1,123 @@
+/**
+ * Detailed requirements for each Kyu level in the Soroban certification system
+ * Source: shuzan.jp
+ *
+ * Note: Stored verbatim from source. Display formatting/translation happens in the UI layer.
+ */
+
+export const kyuLevelDetails = {
+  '10-kyu': `Add/Sub: 2-digit, 5口, 10字
+
+×: 実+法 = 3 digits (20 problems)
+
+Time: 20 min; Pass ≥ 60/200.
+shuzan.jp`,
+
+  '9-kyu': `Add/Sub: 2-digit, 5口, 10字
+
+×: 実+法 = 3 digits (20)
+
+Time: 20 min; Pass ≥ 120/200. (If only one part clears, it's treated as 10-kyu per federation notes.)
+shuzan.jp`,
+
+  '8-kyu': `Add/Sub: 2-digit, 8口, 16字
+
+×: 実+法 = 4 digits (10)
+
+÷: 法+商 = 3 digits (10)
+
+Time: 20 min; Pass ≥ 120/200.
+shuzan.jp`,
+
+  '7-kyu': `Add/Sub: 2-digit, 10口, 20字
+
+×: 実+法 = 4 digits (10)
+
+÷: 法+商 = 4 digits (10)
+
+Time: 20 min; Pass ≥ 120/200.
+shuzan.jp`,
+
+  '6-kyu': `Add/Sub: 10口, 30字
+
+×: 実+法 = 5 digits (20)
+
+÷: 法+商 = 4 digits (20)
+
+Time: 30 min; Pass ≥ 210/300.
+shuzan.jp`,
+
+  '5-kyu': `Add/Sub: 10口, 40字
+
+×: 実+法 = 6 digits (20)
+
+÷: 法+商 = 5 digits (20)
+
+Time: 30 min; Pass ≥ 210/300.
+shuzan.jp`,
+
+  '4-kyu': `Add/Sub: 10口, 50字
+
+×: 実+法 = 7 digits (20)
+
+÷: 法+商 = 6 digits (20)
+
+Time: 30 min; Pass ≥ 210/300.
+shuzan.jp`,
+
+  'Pre-3-kyu': `Add/Sub: 10口, 50字 ×5題 and 10口, 60字 ×5題 (total 10)
+
+×: 実+法 = 7 digits (20)
+
+÷: 法+商 = 6 digits (20)
+
+Time: 30 min; Pass ≥ 240/300.
+shuzan.jp`,
+
+  '3-kyu': `Add/Sub: 10口, 60字
+
+×: 実+法 = 7 digits (20)
+
+÷: 法+商 = 6 digits (20)
+
+Time: 30 min; Pass ≥ 240/300.
+shuzan.jp`,
+
+  'Pre-2-kyu': `Add/Sub: 10口, 70字
+
+×: 実+法 = 8 digits (20)
+
+÷: 法+商 = 7 digits (20)
+
+Time: 30 min; Pass ≥ 240/300.
+shuzan.jp`,
+
+  '2-kyu': `Add/Sub: 10口, 80字
+
+×: 実+法 = 9 digits (20)
+
+÷: 法+商 = 8 digits (20)
+
+Time: 30 min; Pass ≥ 240/300.
+shuzan.jp`,
+
+  'Pre-1-kyu': `Add/Sub: 10口, 90字
+
+×: 実+法 = 10 digits (20)
+
+÷: 法+商 = 9 digits (20)
+
+Time: 30 min; Pass ≥ 240/300.
+shuzan.jp`,
+
+  '1-kyu': `Add/Sub: 10口, 100字
+
+×: 実+法 = 11 digits (20)
+
+÷: 法+商 = 10 digits (20)
+
+Time: 30 min; Pass ≥ 240/300.
+shuzan.jp`,
+} as const
+
+export type KyuLevel = keyof typeof kyuLevelDetails

package.json

@@ -1,6 +1,6 @@
 {
   "name": "soroban-monorepo",
-  "version": "4.41.0",
+  "version": "4.43.2",
   "private": true,
   "description": "Beautiful Soroban Flashcard Generator - Monorepo",
   "workspaces": [