forked from molecule-ai/molecule-core
c0eca8d0e1
Brings the canvas onto the warm-paper design system already shipped to landing, marketplace, and SaaS surfaces, and migrates the build from Tailwind v3 → v4 to match molecule-app. Plumbing: - swap tailwindcss v3 → v4, drop autoprefixer, add @tailwindcss/postcss - delete tailwind.config.ts (v4 reads tokens from @theme blocks in CSS) - globals.css: @import "tailwindcss" + @plugin "@tailwindcss/typography" - two @theme blocks: warm-paper light defaults + always-dark surface tokens (bg-bg / ink-mute / line-strong) for terminal/console panels - [data-theme="dark"] cascade overrides the warm-paper tokens for dark - React Flow edge stroke + scrollbar + selection colour pull from semantic tokens so they flip with the theme Theme infra (ported from molecule-app, identical contracts): - lib/theme-cookie.ts: mol_theme cookie + boot script (no "use client" so server components can read the constants) - lib/theme-provider.tsx: ThemeProvider + useTheme + cookie writer with Domain=.moleculesai.app so the preference follows the user across canvas/app/market/landing subdomains AND tenant subdomains - lib/theme.ts: ColorToken union + cssVar() helper - components/ThemeToggle.tsx: 3-way System/Light/Dark picker - layout.tsx: SSR cookie read + nonce'd inline boot script (CSP needs the explicit nonce — strict-dynamic doesn't forgive an un-nonce'd inline sibling) + ThemeProvider wrapper + bg-surface/text-ink body Component migration (62 files): - Mechanical bg-zinc-* / text-zinc-* / border-zinc-* / text-white → semantic surface/ink/line tokens via perl negative-lookahead pass (preserves opacity modifiers like /80, /60) - bg-blue-500/600 → bg-accent / bg-accent-strong - text-red-* / amber-* / emerald-* → text-bad / warm / good - Tinted-state banner backgrounds (bg-red-950, bg-amber-950, bg-blue-950 etc.) intentionally left literal — they remain readable on warm-paper in light mode without inventing new state-soft tokens - TerminalTab.tsx skipped — xterm renders to canvas, not DOM - 3 unit-test assertions updated to match new token strings (credits pillTone, AuthGate overlay class, A2AEdge accent) Verification: - pnpm test: 1214/1214 pass - pnpm tsc --noEmit: clean - next build: ✓ Compiled successfully (8 routes) - dev server inspection: html data-theme stamped, body uses bg-surface text-ink, boot script carries nonce, compiled CSS contains both @theme blocks + [data-theme="dark"] override Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
48 lines
1.3 KiB
JSON
48 lines
1.3 KiB
JSON
{
|
|
"name": "molecule-monorepo-canvas",
|
|
"version": "0.1.0",
|
|
"private": true,
|
|
"scripts": {
|
|
"dev": "next dev --turbopack -p 3000",
|
|
"build": "next build",
|
|
"start": "next start",
|
|
"lint": "next lint",
|
|
"test": "vitest run",
|
|
"test:coverage": "vitest run --coverage"
|
|
},
|
|
"dependencies": {
|
|
"@radix-ui/react-alert-dialog": "^1.1.15",
|
|
"@radix-ui/react-dialog": "^1.1.15",
|
|
"@radix-ui/react-tabs": "^1.1.12",
|
|
"@radix-ui/react-tooltip": "^1.1.14",
|
|
"@tailwindcss/typography": "^0.5.19",
|
|
"@xterm/addon-fit": "^0.11.0",
|
|
"@xyflow/react": "^12.4.0",
|
|
"clsx": "^2.1.1",
|
|
"next": "^15.1.0",
|
|
"react": "^19.0.0",
|
|
"react-dom": "^19.0.0",
|
|
"react-markdown": "^10.1.0",
|
|
"remark-gfm": "^4.0.1",
|
|
"tailwind-merge": "^3.5.0",
|
|
"xterm": "^5.3.0",
|
|
"zustand": "^5.0.0"
|
|
},
|
|
"devDependencies": {
|
|
"@playwright/test": "^1.59.1",
|
|
"@testing-library/jest-dom": "^6.6.0",
|
|
"@testing-library/react": "^16.1.0",
|
|
"@types/node": "^25.6.0",
|
|
"@types/react": "^19.0.0",
|
|
"@types/react-dom": "^19.0.0",
|
|
"@vitejs/plugin-react": "^6.0.1",
|
|
"@vitest/coverage-v8": "^4.1.5",
|
|
"@tailwindcss/postcss": "^4.0.0",
|
|
"jsdom": "^29.1.1",
|
|
"postcss": "^8.5.13",
|
|
"tailwindcss": "^4.0.0",
|
|
"typescript": "^5.7.0",
|
|
"vitest": "^4.1.2"
|
|
}
|
|
}
|