Dioxus

# MISSION: Scaffold "Dioxus" Production Architecture
You are an expert Senior Staff Software Architect and Full-Stack Engineer. Your mission is to scaffold and implement a production-grade, highly reliable, and modular codebase following the proven architecture of **Dioxus**.
---
## 1. PROJECT SPECIFICATIONS & BENCHMARK
- **Reference Architecture**: Dioxus
- **What It Does**: Dioxus is a Rust app framework for web, desktop and mobile from one codebase: React-like rsx! components with signals, a virtual DOM with several renderers, axum-based fullstack server functions and the dx CLI.
- **Domain & Category**: Cross-Platform Rust App Framework
- **Production Scale**: 6-20 people
- **Development Mode**: CLASSIC
- **Architectural Rationale**: Dioxus keeps one virtual DOM and component model and swaps renderers per platform (WebAssembly, WebView, SSR, LiveView, native), while its own dx CLI handles hot-patching, asset bundling and packaging for every target.
- **Live Website Reference**: https://dioxuslabs.com
- **Source Repository**: https://github.com/DioxusLabs/dioxus
---
## 2. PRODUCTION TECH STACK
- **Full Stack Array**: Rust, Dioxus, WebAssembly, Axum, Tokio, Playwright, Nix, GitHub Actions
- **Primary Language(s)**: Rust, HTML, JavaScript, TypeScript
- **License of the reference repo**: Apache-2.0
- **Frontend**: Dioxus — React-like component framework with rsx! markup and signals; workspace version 0.8 alpha on the audited main branch.; WebAssembly — Web renderer targets the browser through wasm-bindgen, web-sys and js-sys; wasm-split supports code splitting.; wry / tao — Desktop renderer: dioxus-desktop draws into the OS WebView via wry and manages windows with tao.; Native renderer — Experimental packages/native and native-dom crates render without a WebView, described in the README as WGPU-based.
- **Backend & APIs**: Axum — Fullstack server integration; the README says Dioxus integrates with axum for server functions, SSR, WebSockets and SSE.; Tokio — Async runtime for the CLI dev server, desktop renderer and fullstack server.
- **Infrastructure & deploy**: dx CLI — dioxus-cli builds, serves, hot-reloads, hot-patches and bundles apps for web, desktop and mobile.; GitHub Actions — main.yml runs CI and publish.yml publishes releases.; Playwright — End-to-end tests in packages/playwright-tests; the devcontainer preinstalls Playwright browsers.; Nix — flake.nix and flake.lock provide a reproducible development environment.
- **Tooling, testing & ops**: AGENTS.md — Root-level instructions for coding agents working in the repository.
---
## 3. KEY ARCHITECTURAL DECISIONS (audited from https://github.com/DioxusLabs/dioxus @ b2ed8c3)
1. **One component model, many renderers**: The workspace keeps the virtual DOM in packages/core and ships separate renderer crates: packages/web (WebAssembly), packages/desktop (wry WebView), packages/ssr, packages/liveview and the experimental packages/native and native-dom, so the same rsx! components target browser, desktop, mobile and server.
2. **The CLI is part of the framework, not an add-on**: packages/cli (dioxus-cli, the dx command) depends on the rsx parser, autoformatter, hot-reload and subsecond crates and runs its own Axum dev server with WebSockets and tower-http, so building, serving, hot-patching and bundling for every platform share one tool.
3. **Subsecond hot-patching of Rust code**: packages/subsecond is a workspace crate that packages/core and packages/cli both depend on. The README describes "subsecond Rust hot-patching" through dx serve --hotpatch, which updates running Rust code without a full rebuild, alongside rsx and asset hot-reloading from packages/rsx-hotreload.
4. **Fullstack split into core, macro and server crates**: packages/fullstack, fullstack-core, fullstack-macro and fullstack-server are separate members, and the README states that Dioxus integrates deeply with axum and offers WebSockets, SSE, streaming, file upload, SSR and forms, or lets an existing axum backend be plugged in.
5. **Assets resolved at compile time with manganis**: packages/manganis and packages/asset-resolver handle assets: the resolver has separate web (web-sys fetch) and native (file system, Android NDK) backends, and const-serialize lets asset metadata be computed in const contexts so the CLI can bundle and optimise assets.
---
## 4. NON-NEGOTIABLE ARCHITECTURAL GUARDRAILS
1. **Monorepo & Modular Separation**:
   - Structure as a Turborepo monorepo with strict package boundaries:
     - `apps/web`: Application UI, routing, layouts, and server endpoints.
     - `packages/ui`: Shared design tokens, CSS variables, and Radix UI primitive components.
     - `packages/db`: Database schemas, client singleton, declarative migrations, and seed scripts.
     - `packages/config`: Shared TypeScript, ESLint, and build configurations.
2. **Strict Type Safety & Zero `any` Policy**:
   - Enable `strict: true`, `noImplicitAny: true`, and `strictNullChecks: true`.
   - Validate ALL external inputs, API request bodies, and query parameters with **Zod** schemas before execution.
3. **Frontend & Rendering Guidelines**:
   - Isolate interactive UI state to leaf components. Keep core pages lightweight and performant.
4. **Design System & Aesthetics**:
   - Keep every color, radius, shadow and font in a single token file (CSS variables) and consume tokens everywhere; never hardcode hex values in components.
   - Prefer crisp 1px borders and one subtle shadow scale over blurry default shadows. Pair one sans-serif for body/headings with one monospace for tags, badges, metrics, and code.
5. **Data Layer & Reliability**:
   - Write declarative schema definitions with foreign keys, composite indexes on queried filters, and automated timestamp triggers.
   - Use connection pooling and prepared statements for serverless database execution.
---
## 5. STEP-BY-STEP SCAFFOLDING ROADMAP
- **Phase 1: Workspace & Root Config**: Initialize package manager, monorepo configuration (`turbo.json`, `tsconfig.base.json`, `package.json`).
- **Phase 2: Database Schema & Client**: Set up the data layer: client, connection pool, models, and migration scripts.
- **Phase 3: Design Tokens & UI Primitives**: Build accessible `Button`, `Input`, `Card`, `Badge`, and layout wrappers inside `packages/ui`.
- **Phase 4: Core Application Routes & Handlers**: Implement primary authentication, user session handling, and application routes.
- **Phase 5: Quality Assurance & Build Verification**: Run `tsc --noEmit`, ESLint, Prettier, and smoke test suites to ensure zero compilation or runtime errors.
---
## 6. EXECUTION INSTRUCTIONS
1. Review all specifications, architectural guardrails, and stack choices above.
2. Present the full monorepo directory tree structure.
3. Systematically generate the complete, production-ready codebase according to the 5-phase roadmap above — starting with the root workspace setup, followed by the database schema, UI design system package, and full-stack application routes until the repository is fully scaffolded and ready to run.