Frontend: site chrome, demo shell, pages, and the contract gates

Five parallel lanes plus an integration pass. The header, gallery, router and
sitemap are all generated from the demo registry, so adding src/demos/<slug>/
puts a demo everywhere with zero edits to shared files — which is the whole
reason demo nine cannot break demo one.

check-demos enforces the twelve contract rules: 142 checks over one live demo.
Two worth naming. The shell may not mention a specific slug, because an
'if (slug === wordle)' in src/components/demo/ is a contract bug wearing a
patch. And a spec-status demo must ship a real specification — task, actions,
grader, counterweight, eval command — since a coming-soon card reads worse than
an honest empty gallery.

Bundle budget holds: entry 108.79 kB gzipped against a 160 kB ceiling, the demo
chunk 21.15 kB against 90 kB. recharts is 108 kB gzipped and lives behind a lazy
import so it never touches the entry.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019mt6sHQHEnEYrJZvoMCJSB

src/components/demo/DemoCard.tsx

@@ -2,8 +2,10 @@ import type { ComponentType } from 'react';
 import { Link } from 'react-router-dom';
 import { ArrowRight } from 'lucide-react';
 import type { DemoMeta } from '@/lib/demo-kit/types';
+import { VERTICAL_LABELS } from '@/lib/demo-kit/registry';
+import { Badge } from '@/components/ui/badge';
+import { DemoIcon } from '@/components/site/DemoIcon';
 import { cn } from '@/lib/utils';
-import { DemoIcon } from './icons';
 
 export interface DemoCardProps<T> {
   meta: DemoMeta;
@@ -11,7 +13,7 @@ export interface DemoCardProps<T> {
   href?: string;
   /**
    * The demo's OWN board, drawn compact, as the thumbnail. A screenshot would
-   * go stale the first time the board changes and nobody would notice; this
+   * go stale the first time the board changed and nobody would notice; this
    * cannot, because it is the same component the demo page renders.
    */
   Surface?: ComponentType<{ state: T; compact?: boolean }>;
@@ -20,52 +22,43 @@ export interface DemoCardProps<T> {
   className?: string;
 }
 
-export function DemoCard<T>({
-  meta,
-  href,
-  Surface,
-  thumbnailState,
-  className,
-}: DemoCardProps<T>) {
-  const to = href ?? `/demo/${meta.slug}`;
+export function DemoCard<T>({ meta, href, Surface, thumbnailState, className }: DemoCardProps<T>) {
+  const to = href ?? `/demos/${meta.slug}`;
   const isSpec = meta.status === 'spec';
   const showSurface = Surface !== undefined && thumbnailState !== undefined;
 
   return (
     <article
       className={cn(
-        'card group relative flex flex-col overflow-hidden transition-colors duration-2 ease-enter hover:border-brand/50',
+        'card group relative flex flex-col overflow-hidden transition-colors duration-2 ease-enter hover:border-brand/40',
         className,
       )}
     >
       <div className="flex items-start gap-3 p-4 pb-3">
-        <span className="grid h-10 w-10 shrink-0 place-items-center rounded-lg bg-accent-subtle text-accent-fg">
-          <DemoIcon name={meta.icon} className="h-5 w-5" />
+        <span className="grid size-10 shrink-0 place-items-center rounded-lg bg-accent-subtle text-accent-fg">
+          <DemoIcon name={meta.icon} className="size-5" />
         </span>
         <div className="min-w-0 flex-1">
           <h3 className="text-base font-semibold leading-tight">
             {/* Stretched link: the whole card is the hit target, but there is
                 still exactly ONE link in the accessibility tree for it. */}
-            <Link
-              to={to}
-              className="after:absolute after:inset-0 after:content-[''] focus-visible:outline-none"
-            >
+            <Link to={to} className="after:absolute after:inset-0 after:content-['']">
               {meta.title}
             </Link>
           </h3>
           <p className="mt-0.5 text-sm leading-snug text-muted">{meta.tagline}</p>
         </div>
         {isSpec ? (
-          <span className="shrink-0 rounded-md border border-border px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-muted">
+          <Badge variant="outline" className="shrink-0 uppercase tracking-wide">
             Spec
-          </span>
+          </Badge>
         ) : null}
       </div>
 
       {showSurface ? (
         <div className="mx-4 overflow-hidden rounded-lg bg-surface-2 p-3">
-          {/* Decorative here: the title and tagline already name the demo, and
-              a screen reader has no use for a board with no run behind it. */}
+          {/* Decorative: the title and tagline already name the demo, and a
+              board with no run behind it is not information. */}
           <div aria-hidden="true">
             <Surface state={thumbnailState as T} compact />
           </div>
@@ -79,7 +72,7 @@ export function DemoCard<T>({
         </div>
         <div className="flex gap-1">
           <dt className="text-muted">Vertical</dt>
-          <dd className="font-medium capitalize">{meta.vertical.replace(/-/g, ' ')}</dd>
+          <dd className="font-medium">{VERTICAL_LABELS[meta.vertical]}</dd>
         </div>
       </dl>
 
@@ -91,7 +84,7 @@ export function DemoCard<T>({
       <p className="mt-auto flex items-center gap-1 border-t border-border px-4 py-2.5 text-sm font-medium text-accent-fg">
         {isSpec ? 'Read the specification' : 'Open the demo'}
         <ArrowRight
-          className="h-4 w-4 transition-transform duration-2 ease-enter group-hover:translate-x-0.5"
+          className="size-4 transition-transform duration-2 ease-enter group-hover:translate-x-0.5"
           aria-hidden="true"
         />
       </p>