dryui-build

DryUI Page Layout: Shell Audit

Build the supplied design image as a finished DryUI app page. Work mobile-first, then tablet, then desktop.

File Contract

• src/routes/+page.svelte: markup, data hooks, imports, data arrays, and DryUI components only. Do not add a <style> block.
• src/layout.css: every display: grid, display: flex, container, @container, grid area, gap, alignment, and block-size rule.
• src/app.css: visual-only styling: color, background, border, radius, shadow, typography, and custom properties.
• Do not edit other files unless build fails for a missing import.

Stage 1: Extract The Shell

Identify the screen type, primary task, required regions, and whether the reference has gutters between regions.

Use this direct-child shell shape:

<main data-layout="<screen>-shell">
	<div data-layout-area="page">
		<header data-layout-area="topbar">...</header>
		<nav data-layout-area="navigation">...</nav>
		<section data-layout-area="primary">...</section>
		<aside data-layout-area="secondary">...</aside>
	</div>
</main>

• Required areas: page, primary, and topbar or navigation.
• Optional direct children: rail, summary, secondary, utility, actions.
• data-layout-area appears only on the page grid and its direct children.
• Nested elements use data-layout="<specific-purpose>", never generic names like wrapper, inner, box, container, or layout.

Stage 2: Implement The Page

• Use real DryUI components for controls: Button, Input, Badge, Separator, Table, and Tabs.
• Import from @dryui/ui; do not pass class= or class: to DryUI components.
• Use static visual blocks for charts, previews, kanban columns, timelines, and maps.
• Keep the first viewport dense and useful. Mobile should summarize; desktop should fill the canvas.
• Match the reference gutter logic: if regions touch in the image, set the relevant layout gap to 0; if they are separated, use DryUI spacing tokens.