feat(dsl): self-contained, responsive screen layouts

#3 in tonybierman/dioxus-mcp — merged 2026-05-29

Summary

Screen layouts now carry their own structural CSS, so a saved/built-in layout reproduces structurally in any project regardless of CSS toolchain. This fixes the original problem where a layout saved from a non-Tailwind project (arium, which styles via hand-written app.css) could not be recreated elsewhere — the registry modeled a layout's markup but not its style dependency.

What changed

Carry CSS with a layout (dioxus-mcp-registry, generate/screen.rs)

• LayoutDescriptor gains styles (raw CSS) and requires (toolchain hint). Both serde-optional, so the wasm-safe registry crate is unaffected.
• generate_screen emits a layout's styles to assets/{snake}.css on scaffold (skip-if-exists, with a document::Stylesheet mount hint), mirroring the vanilla-css starter path. A layout that declares requires but ships no styles gets a loud scaffold-time advisory instead of silent unstyled divs.

Re-capture admin_console and promote it to a built-in

• Recaptured arium's real admin_console (semantic classes + the actual app.css rules, theme tokens kept as var(--token, <neutral>)), then moved it from the machine-local global overlay into the built-in library so it ships compiled in and version-controlled.

Make the whole structural library self-contained

• All 12 remaining shells (holy_grail, bento, masonry, full_bleed, sticky_sidebar, mega_menu, drawer, card_grid, editorial, hero_scroll, split_screen, scroll_sticky) converted from Tailwind-utility markup to semantic classes + carried, responsive CSS. The entire library is now toolchain-independent — none declares requires.
• Mobile-first, 48rem breakpoint (card_grid also steps at 40/64rem; drawer is deliberately breakpoint-free — an off-canvas overlay is the same at every size). Shared neutral token vocabulary read via var(--token, <fallback>).

Tests

• every_library_layout_is_self_contained — every built-in carries styles, declares no requires, and (except drawer) is responsive.
• every_library_layout_renders_a_valid_component — all 13 templates render valid component bodies.
• registry_layout_with_styles_emits_sibling_stylesheet — end-to-end CSS emission + mount hint.
• project_overlay_adds_and_overrides_by_id — a styles-bearing overlay descriptor survives the TOML round-trip.

Local cargo fmt --all --check, cargo clippy --workspace --all-targets -- -D warnings, and cargo test --workspace all pass. RSX validity of the rewritten templates was confirmed by rendering and inspection (not a full Dioxus cargo check).

See docs/layout-styles-plan.md for the full design write-up and known limitations.

🤖 Generated with Claude Code