chore(release): 4.44.2 [skip ci]

## [4.44.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.44.1...v4.44.2) (2025-10-20) ### Bug Fixes * **levels:** match top/bottom margins to left padding on kyu detail boxes ([aa0bdcf](aa0bdcf686))
fix(levels): match top/bottom margins to left padding on kyu detail boxes
2025-10-20 16:37:17 +00:00 · 2025-10-20 11:36:11 -05:00 · 2025-10-20 16:35:46 +00:00 · 2025-10-20 11:34:32 -05:00 · 2025-10-20 16:31:02 +00:00 · 2025-10-20 11:29:47 -05:00
3 changed files with 150 additions and 77 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,31 @@
+## [4.44.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.44.1...v4.44.2) (2025-10-20)
+
+
+### Bug Fixes
+
+* **levels:** match top/bottom margins to left padding on kyu detail boxes ([aa0bdcf](https://github.com/antialias/soroban-abacus-flashcards/commit/aa0bdcf686adcbfd1a145cf67121181d1f1194d9))
+
+## [4.44.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.44.0...v4.44.1) (2025-10-20)
+
+
+### Bug Fixes
+
+* **levels:** add fixed dimensions and margins to kyu detail boxes ([05dd0b3](https://github.com/antialias/soroban-abacus-flashcards/commit/05dd0b30d3c397b82b7b7cc93a5ea575f3aada6d))
+
+## [4.44.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.43.2...v4.44.0) (2025-10-20)
+
+
+### Features
+
+* **levels:** redesign kyu details with larger operators and prominent digits ([6739d59](https://github.com/antialias/soroban-abacus-flashcards/commit/6739d59f2b6189a98570e23e04c20d86d774ccce))
+
+## [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)


--- a/apps/web/src/app/levels/page.tsx
+++ b/apps/web/src/app/levels/page.tsx
@@ -196,54 +196,64 @@ function getLevelDetailsKey(levelName: string): string | null {
 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 }> = []
+  // Always return sections in consistent order: Add/Sub, Multiply, Divide
+  const sections: Array<{
+    type: 'addSub' | 'multiply' | 'divide'
+    icon: string
+    label: string
+    digits: string | null
+    rows: string | null
+    chars: string | null
+    problems: string | null
+  }> = [
+    {
+      type: 'addSub',
+      icon: '➕➖',
+      label: 'Add/Sub',
+      digits: null,
+      rows: null,
+      chars: null,
+      problems: null,
+    },
+    {
+      type: 'multiply',
+      icon: '✖️',
+      label: 'Multiply',
+      digits: null,
+      rows: null,
+      chars: null,
+      problems: null,
+    },
+    {
+      type: 'divide',
+      icon: '➗',
+      label: 'Divide',
+      digits: null,
+      rows: null,
+      chars: null,
+      problems: null,
+    },
+  ]

  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`,
-        })
+        sections[0].digits = match[1]
+        sections[0].rows = match[2]
+        sections[0].chars = match[3]
      }
    } 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)`,
-        })
+        sections[1].digits = match[1]
+        sections[1].problems = match[2]
      }
    } 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)`,
-        })
-      }
-    } else if (line.includes('Time:')) {
-      // Parse time and pass requirements
-      const timeMatch = line.match(/(\d+) min/)
-      const passMatch = line.match(/≥\s*(\d+)\/(\d+)/)
-      if (timeMatch && passMatch) {
-        sections.push({
-          icon: '⏱️',
-          label: 'Time',
-          value: `${timeMatch[1]} minutes`,
-        })
-        sections.push({
-          icon: '✅',
-          label: 'Pass',
-          value: `≥${passMatch[1]}/${passMatch[2]} pts`,
-        })
+        sections[2].digits = match[1]
+        sections[2].problems = match[2]
      }
    }
  }
@@ -670,7 +680,7 @@ export default function LevelsPage() {
                    const sections = rawText ? parseKyuDetails(rawText) : []

                    // Use consistent sizing across all levels
-                    const sizing = { fontSize: 'sm', gap: '3', iconSize: 'xl' }
+                    const sizing = { fontSize: 'md', gap: '3', iconSize: '4xl' }

                    return sections.length > 0 ? (
                      <div
@@ -685,62 +695,97 @@ export default function LevelsPage() {
                          borderColor: 'gray.600',
                          maxW: '480px',
                          alignContent: 'center',
+                          my: '2',
                        })}
                      >
-                        {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)',
-                              },
-                            })}
-                          >
+                        {sections.map((section, idx) => {
+                          const hasData = section.digits !== null
+                          const levelColor =
+                            currentLevel.color === 'green'
+                              ? 'green.300'
+                              : currentLevel.color === 'blue'
+                                ? 'blue.300'
+                                : 'violet.300'
+
+                          return (
                            <div
+                              key={idx}
                              className={css({
+                                bg: hasData ? 'rgba(0, 0, 0, 0.4)' : 'rgba(0, 0, 0, 0.2)',
+                                border: '1px solid',
+                                borderColor: hasData ? 'gray.700' : 'gray.800',
+                                rounded: 'md',
+                                p: '4',
+                                transition: 'all 0.2s',
                                display: 'flex',
+                                flexDirection: 'column',
                                alignItems: 'center',
+                                justifyContent: 'center',
                                gap: '2',
-                                mb: '1',
+                                opacity: hasData ? 1 : 0.3,
+                                width: '200px',
+                                height: '180px',
+                                _hover: hasData
+                                  ? {
+                                      borderColor: 'gray.500',
+                                      transform: 'scale(1.05)',
+                                    }
+                                  : {},
                              })}
                            >
-                              <span className={css({ fontSize: sizing.iconSize })}>
+                              <span className={css({ fontSize: sizing.iconSize, lineHeight: '1' })}>
                                {section.icon}
                              </span>
-                              <span
+                              {hasData && section.digits && (
+                                <>
+                                  <div
+                                    className={css({
+                                      fontSize: '2xl',
+                                      fontWeight: 'bold',
+                                      color: levelColor,
+                                    })}
+                                  >
+                                    {section.digits} digits
+                                  </div>
+                                  {(section.rows || section.chars) && (
+                                    <div
+                                      className={css({
+                                        fontSize: 'sm',
+                                        color: 'gray.400',
+                                        textAlign: 'center',
+                                      })}
+                                    >
+                                      {section.rows && `${section.rows} rows`}
+                                      {section.rows && section.chars && ' • '}
+                                      {section.chars && `${section.chars} chars`}
+                                    </div>
+                                  )}
+                                  {section.problems && (
+                                    <div
+                                      className={css({
+                                        fontSize: 'sm',
+                                        color: 'gray.400',
+                                        textAlign: 'center',
+                                      })}
+                                    >
+                                      {section.problems} problems
+                                    </div>
+                                  )}
+                                </>
+                              )}
+                              <div
                                className={css({
-                                  fontSize: sizing.fontSize,
-                                  fontWeight: 'semibold',
-                                  color:
-                                    currentLevel.color === 'green'
-                                      ? 'green.300'
-                                      : currentLevel.color === 'blue'
-                                        ? 'blue.300'
-                                        : 'violet.300',
+                                  fontSize: 'xs',
+                                  color: hasData ? 'gray.500' : 'gray.700',
+                                  textAlign: 'center',
+                                  fontWeight: hasData ? 'normal' : 'bold',
                                })}
                              >
                                {section.label}
-                              </span>
+                              </div>
                            </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
                  })()}
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "soroban-monorepo",
-  "version": "4.43.1",
+  "version": "4.44.2",
  "private": true,
  "description": "Beautiful Soroban Flashcard Generator - Monorepo",
  "workspaces": [
Author	SHA1	Message	Date
semantic-release-bot	be2c3f63b0	chore(release): 4.44.2 [skip ci] ## [4.44.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.44.1...v4.44.2) (2025-10-20) ### Bug Fixes * levels: match top/bottom margins to left padding on kyu detail boxes ([`aa0bdcf`](`aa0bdcf686`))	2025-10-20 16:37:17 +00:00
Thomas Hallock	aa0bdcf686	fix(levels): match top/bottom margins to left padding on kyu detail boxes - Reduced my (vertical margins) from '6' to '2' to match pl (left padding) - Ensures consistent spacing on all sides of the detail box grid 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 11:36:11 -05:00
semantic-release-bot	baea602000	chore(release): 4.44.1 [skip ci] ## [4.44.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.44.0...v4.44.1) (2025-10-20) ### Bug Fixes * levels: add fixed dimensions and margins to kyu detail boxes ([`05dd0b3`](`05dd0b30d3`))	2025-10-20 16:35:46 +00:00
Thomas Hallock	05dd0b30d3	fix(levels): add fixed dimensions and margins to kyu detail boxes - Set fixed width (200px) and height (180px) for operator boxes to prevent shifting - Add vertical margins (my: 6) to grid container for better spacing - Ensures boxes stay in consistent positions when sliding through levels - Large enough to accommodate longest content (11 digits) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 11:34:32 -05:00
semantic-release-bot	4febf5905b	chore(release): 4.44.0 [skip ci] ## [4.44.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.43.2...v4.44.0) (2025-10-20) ### Features * levels: redesign kyu details with larger operators and prominent digits ([`6739d59`](`6739d59f2b`))	2025-10-20 16:31:02 +00:00
Thomas Hallock	6739d59f2b	feat(levels): redesign kyu details with larger operators and prominent digits - Increase operator icon size from xl to 4xl for better visibility - Center-align card layout with operator icon at top - Extract and prominently display digit count in 2xl bold text - Change hover effect from slide to scale for centered design - Increase base font size from sm to md 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 11:29:47 -05:00
semantic-release-bot	cb20019c16	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`))	2025-10-20 16:29:27 +00:00
Thomas Hallock	d90b5d5532	refactor(levels): remove Time and Pass sections from kyu details Remove the Time and Pass requirement cards since we don't have actual tests implemented. Now only showing Add/Sub, Multiply, and Divide requirements. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 11:28:19 -05:00