Reference: messy docs landing checkpoint

SKILL.md

@@ -56,7 +56,7 @@ import { foundationRegistry } from '@rubriclab/concrete/registry'
 
 This section is generated from `foundationRegistry`, `primitiveRegistry`, and `componentRegistry`. Run `bun run build:skill` after registry changes.
 
-Concrete currently exposes 12 foundations, 106 primitives, and 33 components.
+Concrete currently exposes 12 foundations, 108 primitives, and 34 components.
 
 ### Foundations
 
@@ -148,7 +148,7 @@ Quiet texture grounds for diagrams, editorial frames, and educational examples.
 - Category: `foundation`
 - Pressure: `editorial`, `educational`
 - Guidance: Use texture as structure, never as decorative noise.
-- Tokens: Tokens (3: `lattice`, `dots`, `lines`)
+- Tokens: Tokens (4: `lattice`, `dots`, `lines`, `depth`)
 
 #### Iconography
 
@@ -187,7 +187,7 @@ Primitives are the Concrete HTML vocabulary. They own DOM, scoped classes, schem
 - **Control** (14): Button (`button`), Toolbar Control (`toolbar-control`), IconButton (`icon-button`), ControlGroup (`control-group`), Token (`token`), SearchInput (`search-input`), PickerButton (`picker-button`), Listbox (`listbox`), Option row (`option-row`), Caret (`caret`), Chip (`chip`), Composer Surface (`composer-surface`), Token Rail (`token-rail`), Diagram Controls (`diagram-controls`)
 - **Form** (15): Input (`input`), Field (`field`), FieldRow (`field-row`), Calendar panel (`calendar-grid`), Dropzone (`dropzone`), Upload field (`upload-field`), Textarea (`textarea`), Select (`select`), Checkbox (`checkbox`), Radio (`radio`), Stepper (`stepper`), Range (`range`), Switch (`switch`), Slider (`slider`), Time list (`time-list`)
 - **Layout** (12): Stack (`stack`), Inline (`inline`), Cluster (`cluster`), Grid (`grid`), Split (`split`), Scroll Area (`scroll-area`), Dock (`dock`), Rail (`rail`), Section (`section`), Row (`row`), Divider (`divider`), Frame (`frame`)
-- **Surface** (9): Surface (`surface`), Panel (`panel`), PickerSurface (`picker-surface`), Overlay (`overlay`), DialogSurface (`dialog-surface`), DrawerSurface (`drawer-surface`), DisclosurePanel (`disclosure-panel`), Message Bubble (`message-bubble`), Card (`card`)
+- **Surface** (11): Surface (`surface`), Panel (`panel`), PickerSurface (`picker-surface`), Overlay (`overlay`), DialogSurface (`dialog-surface`), DrawerSurface (`drawer-surface`), DisclosurePanel (`disclosure-panel`), Message Bubble (`message-bubble`), Card (`card`), TiltFrame (`tilt-frame`), ScaleFrame (`scale-frame`)
 - **Typography** (6): Header (`header`), Text (`text`), Heading (`heading`), Label (`label`), Code (`code`), Kbd (`kbd`)
 - **Navigation** (3): MenuSurface (`menu-surface`), MenuGroup (`menu-group`), Link (`link`)
 - **Feedback** (9): Alert (`alert`), ValidationList (`validation-list`), Transcript item (`transcript-item`), Trace panel (`trace-panel`), Spinner (`spinner`), Empty state (`empty-state`), Tooltip (`tooltip`), Skeleton (`skeleton`), Tool-call panel (`tool-call-panel`)
@@ -209,8 +209,8 @@ Components assemble primitives into reusable product behavior. They should not i
 - **Feedback** (3): Validation summary (`validation-summary`), Reasoning message (`reasoning-message`), Tool call message (`tool-call-message`)
 - **Media** (1): Image upload (`image-upload`)
 - **Data** (11): Metric card (`metric-card`), Meter (`meter`), Line chart (`line-chart`), Area chart (`area-chart`), Bar chart (`bar-chart`), Stacked bar chart (`stacked-bar-chart`), Donut chart (`donut-chart`), Heatmap (`heatmap`), Chart (`chart`), Data table (`data-table`), Flow diagram (`flow-diagram`)
+- **Surface** (2): FeatureCard (`feature-card`), Message (`message`)
 - **Diagram** (1): Diagram canvas (`diagram-canvas`)
-- **Surface** (1): Message (`message`)
 <!-- concrete-skill:generated:end -->
 
 ## Usage Guide

apps/docs/app/layout.tsx

@@ -28,27 +28,27 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
 							<span>Concrete</span>
 						</Link>
 						<nav className="nav">
-							<Link href="/#foundations">Foundations</Link>
-							<Link href="/#primitives">Primitives</Link>
-							<Link href="/#components">Components</Link>
+							<Link href="/foundations">Foundations</Link>
+							<Link href="/primitives">Primitives</Link>
+							<Link href="/components">Components</Link>
 							<Link href="/#api">API</Link>
 							<Link
 								aria-label="Concrete on npm"
-								className="navIconLink"
+								className="navLogoLink"
 								href="https://www.npmjs.com/package/@rubriclab/concrete"
 								rel="noreferrer"
 								target="_blank"
 							>
-								<NpmIcon />
+								<NpmLogo />
 							</Link>
 							<Link
 								aria-label="Concrete on GitHub"
-								className="navIconLink"
+								className="navLogoLink"
 								href="https://github.com/RubricLab/concrete"
 								rel="noreferrer"
 								target="_blank"
 							>
-								<GitHubIcon />
+								<GitHubLogo />
 							</Link>
 						</nav>
 					</header>
@@ -59,17 +59,21 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
 	)
 }
 
-function NpmIcon() {
+function NpmLogo() {
 	return (
-		<svg aria-hidden="true" viewBox="0 0 24 24">
-			<path d="M2.5 7h19v10h-9.5v-2h-2v2H2.5V7Zm2 2v6h2V9h-2Zm4 0v4h2V9h-2Zm4 0v4h2V9h-2Zm4 0v6h2V9h-2Z" />
+		<svg aria-hidden="true" className="npmLogo" viewBox="0 0 780 250">
+			<path d="M0 0h780v250H0z" fill="#cb3837" />
+			<path
+				d="M72 67h636v116H390v-58h-58v58H72V67Zm58 58v0h58v-1h58v1h58v58h58V67H130v58Zm318-58v116h58V125h58v58h58V125h29V67H448Z"
+				fill="#fff"
+			/>
 		</svg>
 	)
 }
 
-function GitHubIcon() {
+function GitHubLogo() {
 	return (
-		<svg aria-hidden="true" viewBox="0 0 24 24">
+		<svg aria-hidden="true" className="githubLogo" viewBox="0 0 24 24">
 			<path d="M12 2.75c-5.11 0-9.25 4.14-9.25 9.25 0 4.08 2.65 7.54 6.32 8.76.46.08.63-.2.63-.45v-1.58c-2.57.56-3.11-1.24-3.11-1.24-.42-1.07-1.03-1.36-1.03-1.36-.84-.57.06-.56.06-.56.93.07 1.42.96 1.42.96.83 1.42 2.18 1.01 2.71.77.08-.6.32-1.01.59-1.24-2.05-.23-4.21-1.03-4.21-4.57 0-1.01.36-1.84.95-2.49-.1-.23-.41-1.18.09-2.45 0 0 .78-.25 2.54.95A8.8 8.8 0 0 1 12 7.16c.78 0 1.56.1 2.3.31 1.76-1.2 2.53-.95 2.53-.95.5 1.27.19 2.22.09 2.45.59.65.95 1.48.95 2.49 0 3.55-2.16 4.33-4.22 4.56.33.29.63.86.63 1.73v2.56c0 .25.17.54.64.45A9.26 9.26 0 0 0 21.25 12c0-5.11-4.14-9.25-9.25-9.25Z" />
 		</svg>
 	)

apps/docs/app/render/[kind]/[slug]/page.tsx

@@ -13,7 +13,8 @@ type RenderPageProps = {
 
 export default async function RenderPage({ params, searchParams }: RenderPageProps) {
 	const routeParams = await params
-	const query = parseRenderQuery(await searchParams)
+	const resolvedSearchParams = await searchParams
+	const query = parseRenderQuery(resolvedSearchParams)
 	const item = getCatalogRenderItem(routeParams.kind, routeParams.slug)
 
 	if (!item) {
@@ -24,8 +25,8 @@ export default async function RenderPage({ params, searchParams }: RenderPagePro
 		<CatalogRenderPage
 			definition={item.definition}
 			entry={item.entry}
-			pressure={query.pressure}
-			state={query.state}
+			query={query}
+			searchParams={resolvedSearchParams}
 		/>
 	)
 }

apps/docs/app/styles/base.css

@@ -60,16 +60,28 @@ body {
 	opacity: 1;
 }
 
-.navIconLink {
+.navLogoLink {
 	justify-content: center;
-	width: 28px;
+	width: 30px;
 	padding: 0;
+	border: 1px solid var(--concrete-border-soft);
+	background: var(--concrete-raised);
 }
 
-.navIconLink svg {
+.navLogoLink svg {
+	display: block;
+	flex: none;
+}
+
+.npmLogo {
+	width: 22px;
+	height: 8px;
+}
+
+.githubLogo {
 	width: 15px;
 	height: 15px;
-	fill: currentColor;
+	fill: currentcolor;
 }
 
 .main {
@@ -334,6 +346,66 @@ body {
 	align-items: stretch;
 }
 
+.detailContractGrid {
+	display: grid;
+	grid-template-columns: minmax(0, 0.85fr) minmax(280px, 0.7fr) minmax(320px, 1fr);
+	gap: 12px;
+}
+
+.detailContractGrid article {
+	display: grid;
+	align-content: start;
+	gap: 10px;
+	min-width: 0;
+	padding: 16px;
+	border: 1px solid var(--concrete-border);
+	border-radius: var(--concrete-radius-4);
+	background: var(--concrete-surface);
+	box-shadow: var(--concrete-shadow-1);
+}
+
+.detailContractGrid svg {
+	width: 18px;
+	height: 18px;
+	color: var(--concrete-sky);
+}
+
+.detailContractGrid strong {
+	color: var(--concrete-foreground-strong);
+	font-size: 14px;
+	font-weight: 800;
+}
+
+.detailContractGrid p {
+	color: var(--concrete-foreground-muted);
+	font-size: 12.5px;
+	line-height: 1.55;
+}
+
+.detailRouteStack {
+	display: grid;
+	gap: 7px;
+}
+
+.detailRouteStack code {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.detailSeedCard pre {
+	max-height: 240px;
+	margin: 0;
+	padding: 12px;
+	overflow: auto;
+	border: 1px solid var(--concrete-border-soft);
+	border-radius: var(--concrete-radius-3);
+	background: var(--concrete-sunken);
+	color: var(--concrete-foreground-body);
+	font: 600 11px / 1.55 var(--concrete-font-mono);
+}
+
 .playgroundPreview {
 	display: grid;
 	gap: 14px;