Reference: docs landing merge 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, 82 primitives, and 33 components.
+Concrete currently exposes 12 foundations, 84 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
 
@@ -189,7 +189,7 @@ Primitives are the Concrete HTML vocabulary. They own DOM, scoped classes, schem
 - **Feedback** (8): Message shell (`message-shell`), Feedback Panel (`feedback-panel`), Reasoning panel (`reasoning-panel`), Spinner (`spinner`), Empty state (`empty-state`), Tooltip (`tooltip`), Skeleton (`skeleton`), Tool-call panel (`tool-call-panel`)
 - **Data** (13): Metric Shell (`metric-shell`), Data Card Header (`data-card-header`), Chart Surface (`chart-surface`), Chart Legend (`chart-legend`), Data Table Shell (`data-table-shell`), Data Table Control (`data-table-control`), Data Table Pagination (`data-table-pagination`), Progress (`progress`), Stat (`stat`), Delta (`delta`), Sparkline (`sparkline`), Distribution (`distribution`), Indicator (`indicator`)
 - **Media** (2): Upload item (`upload-item`), Avatar (`avatar`)
-- **Surface** (2): Card (`card`), Bubble (`bubble`)
+- **Surface** (4): Card (`card`), Bubble (`bubble`), TiltFrame (`tilt-frame`), ScaleFrame (`scale-frame`)
 - **Status** (3): Pill (`pill`), Badge (`badge`), Tag (`tag`)
 - **Layout** (4): Row (`row`), Preview Stage (`preview-stage`), Divider (`divider`), Frame (`frame`)
 - **Typography** (2): Code (`code`), Kbd (`kbd`)
@@ -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>
 	)