dryui-build

DryUI Page Layout: Lint Tight

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

Three Stages

1. Identify the screen type, primary task, shell regions, mobile order, and whether panes touch or have gutters.
2. Implement the page with DryUI components and meaningful data-layout hooks.
3. Run bun run build; repair lint or compile errors before stopping.

File Contract

• src/routes/+page.svelte: markup, imports, data arrays, and DryUI components only. No <style> block.
• src/layout.css: structural layout only.
• src/app.css: visual styling only.
• Do not edit other files unless bun run build fails because an import is missing.

Shell Markup

Use one shell and one page grid:

<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: page, primary, and topbar or navigation.
• Optional direct areas: rail, summary, secondary, utility, actions.
• data-layout-area appears only on the page grid and its direct children.
• Everything nested uses data-layout="<specific-purpose>"; never generic names like wrapper, inner, box, container, layout, or ui.

DryUI Components

• Use Button, Input, Badge, Separator, Table, and Tabs from @dryui/ui.
• Do not pass class= or class: to DryUI components.
• Use static data-layout blocks for charts, kanban boards, preview panes, timelines, metrics, and maps.
• Do not inspect node_modules unless bun run build reports an import error.

src/layout.css Rules

Start with this exact container contract:

[data-layout='<screen>-shell'] {
	container: page / inline-size;
	min-block-size: 100dvh;
}

[data-layout='<screen>-shell'] > [data-layout-area='page'] {
	display: grid;
	min-block-size: 100dvh;
	grid-template-areas: ...;
	grid-template-columns: minmax(0, 1fr);
}

@container page (min-width: 48rem) { ... }
@container page (min-width: 72rem) { ... }