dryui-build

DryUI Page Layout: Panel-Budget Fixture

Build the supplied design image as a concise DryUI app page. Optimize for clean build output, lint-safe layout, responsive shell fidelity, and a readable first viewport before visual embellishment.

Harness Rule

Run bun run build before final. Do not run dev servers, browser checks, extra audits, or broad package searches. The harness captures mobile, tablet, and desktop after you finish.

Work fast:

• Read the design image once, pick the closest recipe, then edit the three files directly.
• Do not inspect package internals unless bun run build reports a missing import.
• Prefer compact arrays plus {#each} loops over repeated markup.
• If uncertain about a visual detail, preserve the page structure and use clear text evidence rather than inventing a complex widget.

Stage 1: Pick One Recipe

Identify the page as one of these recipes and keep the fixed shell:

• dashboard: one metric grid, one evidence panel, one activity panel, and up to two secondary insight panels.
• settings: one nav, two primary form/status panels, and up to two secondary help/billing/activity panels.
• crm: one metric grid, one deals panel, one forecast or account panel, and one secondary activity/customer panel.
• kanban: one nav, one board grid with three columns and one card per column, plus up to two secondary detail/activity panels.
• knowledge: one light collections panel, one documents/results panel, one selected-document panel, and up to two secondary AI/source panels.

Hard budget: after the topbar and navigation, use no more than five top-level panels/cards total. A grid of metrics counts as one panel. Do not add storage, extra status, duplicate activity, or extra summary panels unless they replace another panel.

Use this shell exactly:

<main data-layout="app-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>