Implement a single abacus component that seamlessly transitions between three states: hero mode on the home page, compact button in the corner, and full-screen modal display. Key features: - Hero mode: Large white abacus at top-center of home page, interactive with beads - Button mode: Golden mini abacus in bottom-right corner when hero scrolled away or on other pages - Open mode: Full-screen golden abacus with blur backdrop, accessible from button - Smooth fly-to-corner animation when scrolling past hero section - Two-way sync between hero and trophy abacus values via HomeHeroContext - Highest z-index layer (30000+) to appear above all content Implementation: - Create MyAbacus component handling all three states with smooth transitions - Add MyAbacusContext for global open/close state management - Move HomeHeroProvider to ClientProviders for global access - Replace HeroAbacus with HeroSection placeholder on home page - Fix flashcard z-index by creating proper stacking context (z-index: 1) - Add MY_ABACUS z-index constants (30000-30001) - Add calendar page components with correct styled-system imports 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
32 lines
712 B
JSON
32 lines
712 B
JSON
{
|
|
"compilerOptions": {
|
|
"target": "ES2020",
|
|
"lib": ["DOM", "DOM.Iterable", "ES2020"],
|
|
"allowJs": false,
|
|
"skipLibCheck": true,
|
|
"esModuleInterop": false,
|
|
"allowSyntheticDefaultImports": true,
|
|
"strict": true,
|
|
"forceConsistentCasingInFileNames": true,
|
|
"moduleResolution": "node",
|
|
"resolveJsonModule": true,
|
|
"isolatedModules": true,
|
|
"noEmit": false,
|
|
"emitDeclarationOnly": true,
|
|
"jsx": "react-jsx",
|
|
"declaration": true,
|
|
"outDir": "./dist",
|
|
"rootDir": "./src",
|
|
"types": []
|
|
},
|
|
"include": ["src/**/*"],
|
|
"exclude": [
|
|
"node_modules",
|
|
"dist",
|
|
"**/*.stories.*",
|
|
"**/*.test.*",
|
|
"src/test/**/*",
|
|
"src/__tests__/**/*"
|
|
]
|
|
}
|