diff --git a/packages/shadcn-renderers/package.json b/packages/shadcn-renderers/package.json
index cdc9524..65b46b7 100644
--- a/packages/shadcn-renderers/package.json
+++ b/packages/shadcn-renderers/package.json
@@ -26,6 +26,9 @@
   "devDependencies": {
     "@tailwindcss/cli": "^4.1.0",
     "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tailwindcss": "^4.1.0",
     "typescript": "^5.7.2",
     "vitest": "^3.0.0"
diff --git a/packages/shadcn-renderers/src/components/AlertDialogRender.tsx b/packages/shadcn-renderers/src/components/AlertDialogRender.tsx
index aca058c..a6fcfbb 100644
--- a/packages/shadcn-renderers/src/components/AlertDialogRender.tsx
+++ b/packages/shadcn-renderers/src/components/AlertDialogRender.tsx
@@ -21,7 +21,12 @@ const actionVariants = cva(
         destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
       },
     },
-    defaultVariants: { variant: "destructive" },
+    // The catalog's declared default for `actionVariant` is `primary`, and
+    // A2UI's binder never applies the schema default — an omitted variant
+    // arrives as undefined. Defaulting to `destructive` here dressed every
+    // ungoverned confirmation as dangerous, which is the opposite failure to
+    // a destructive action that renders as an ordinary button.
+    defaultVariants: { variant: "primary" },
   },
 );
 
@@ -49,7 +54,7 @@ export const AlertDialogRender: FC<any> = ({ props }) => {
       )}
       <button
         type="button"
-        className={cn(actionVariants({ variant: (props.actionVariant as any) ?? "destructive" }))}
+        className={cn(actionVariants({ variant: (props.actionVariant as any) ?? "primary" }))}
         onClick={() => props.action?.()}
       >
         {String(props.actionLabel ?? "")}
diff --git a/packages/shadcn-renderers/src/components/BadgeRender.tsx b/packages/shadcn-renderers/src/components/BadgeRender.tsx
index 381c321..51f8f68 100644
--- a/packages/shadcn-renderers/src/components/BadgeRender.tsx
+++ b/packages/shadcn-renderers/src/components/BadgeRender.tsx
@@ -1,47 +1,46 @@
 /**
- * Catalog `Badge` -> shadcn/ui Badge. The catalog's fourteen Astryx variants
- * project onto shadcn's four treatments by meaning: error/red -> destructive,
- * neutral/gray tones -> secondary, everything colorful -> outline with the
- * label verbatim (shadcn badges are token-colored, not rainbow-colored).
+ * Catalog `Badge` -> shadcn/ui Badge.
+ *
+ * The catalog carries fourteen variants: five status meanings plus nine
+ * categorical colors. shadcn ships four badge treatments, so the projection is
+ * shadcn's four canonical variants for the meanings that map onto them, plus
+ * shadcn's documented "badge with an explicit color class" idiom for the rest.
+ * Every catalog value keeps a treatment of its own: collapsing `success` onto
+ * `info`, or the nine colors onto one outline, would accept the vocabulary and
+ * then discard the distinction the surface was emitted to carry.
+ *
+ * Alpha tints (`/15`, `/40`) rather than fixed 50/950 steps: this package's
+ * theme switches on `[data-mode="dark"]`, not Tailwind's `dark:` variant, and
+ * a tint reads correctly under both modes from one rule.
  */
 import type { FC } from "react";
-import { cva } from "class-variance-authority";
 import { cn } from "../cn";
 
-const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors w-fit",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground shadow",
-        secondary: "border-transparent bg-secondary text-secondary-foreground",
-        destructive: "border-transparent bg-destructive text-destructive-foreground shadow",
-        outline: "text-foreground",
-      },
-    },
-    defaultVariants: { variant: "default" },
-  },
-);
+const BASE =
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors w-fit";
 
-const VARIANT: Record<string, "default" | "secondary" | "destructive" | "outline"> = {
-  neutral: "secondary",
-  info: "default",
-  success: "default",
-  warning: "outline",
-  error: "destructive",
-  red: "destructive",
-  blue: "outline",
-  cyan: "outline",
-  green: "outline",
-  orange: "outline",
-  pink: "outline",
-  purple: "outline",
-  teal: "outline",
-  yellow: "outline",
+/** Catalog variant -> shadcn treatment. Catalog default: neutral. */
+const VARIANT: Record<string, string> = {
+  // Status meanings: shadcn's own filled treatments.
+  neutral: "border-transparent bg-secondary text-secondary-foreground",
+  info: "border-transparent bg-primary text-primary-foreground shadow",
+  success: "border-transparent bg-emerald-600 text-white shadow",
+  warning: "border-transparent bg-amber-500 text-zinc-950 shadow",
+  error: "border-transparent bg-destructive text-destructive-foreground shadow",
+  // Categorical colors: outline treatment, tinted per color.
+  blue: "border-blue-500/40 bg-blue-500/15 text-blue-700",
+  cyan: "border-cyan-500/40 bg-cyan-500/15 text-cyan-700",
+  green: "border-green-500/40 bg-green-500/15 text-green-700",
+  orange: "border-orange-500/40 bg-orange-500/15 text-orange-700",
+  pink: "border-pink-500/40 bg-pink-500/15 text-pink-700",
+  purple: "border-purple-500/40 bg-purple-500/15 text-purple-700",
+  red: "border-red-500/40 bg-red-500/15 text-red-700",
+  teal: "border-teal-500/40 bg-teal-500/15 text-teal-700",
+  yellow: "border-yellow-500/40 bg-yellow-500/15 text-yellow-700",
 };
 
 export const BadgeRender: FC<any> = ({ props }) => (
-  <span className={cn(badgeVariants({ variant: VARIANT[props.variant as string] ?? "default" }))}>
+  <span className={cn(BASE, VARIANT[props.variant as string] ?? VARIANT.neutral)}>
     {String(props.label ?? "")}
   </span>
 );
diff --git a/packages/shadcn-renderers/src/components/CardRender.tsx b/packages/shadcn-renderers/src/components/CardRender.tsx
index 53d0e09..87ae4e1 100644
--- a/packages/shadcn-renderers/src/components/CardRender.tsx
+++ b/packages/shadcn-renderers/src/components/CardRender.tsx
@@ -1,15 +1,21 @@
 /**
- * Catalog `Card` -> shadcn/ui Card markup. The catalog's Astryx color
- * variants have no shadcn equivalent (shadcn cards are token-neutral); the
- * projection keeps `muted` (secondary background) and renders every color
- * variant on the token background — vocabulary accepted, treatment native
- * to this design system.
+ * Catalog `Card` -> shadcn/ui Card markup. shadcn cards are token-neutral, so
+ * the catalog's color variants are projected onto shadcn's accented-surface
+ * idiom (token card plus a Tailwind color tint) in `surface-variants.ts` —
+ * every catalog value keeps its own treatment rather than collapsing onto the
+ * default background.
  */
 import type { FC } from "react";
 import { cn } from "../cn";
+import { surfaceVariant } from "../surface-variants";
 
 export const CardRender: FC<any> = ({ props, buildChild }) => (
-  <div className={cn("rounded-xl border bg-card text-card-foreground shadow p-6", props.variant === "muted" && "bg-secondary")}>
+  <div
+    className={cn(
+      "rounded-xl border text-card-foreground shadow p-6",
+      surfaceVariant(props.variant),
+    )}
+  >
     {props.child ? buildChild(props.child) : null}
   </div>
 );
diff --git a/packages/shadcn-renderers/src/components/SelectableCardRender.tsx b/packages/shadcn-renderers/src/components/SelectableCardRender.tsx
index e431520..c783d63 100644
--- a/packages/shadcn-renderers/src/components/SelectableCardRender.tsx
+++ b/packages/shadcn-renderers/src/components/SelectableCardRender.tsx
@@ -3,10 +3,15 @@
  * card whose selected state renders as the primary accent ring (shadcn has
  * no SelectableCard primitive; this is the idiomatic ring treatment).
  * Presentational in replay — selection state is delivered, not clicked.
+ *
+ * `variant` carries the same surface vocabulary as Card and is projected
+ * through the shared table, so an emitted `blue` option reads as blue here
+ * exactly as it does under Astryx.
  */
 import type { FC } from "react";
 import { childIds } from "@dspack-studio/a2ui-ingest";
 import { cn } from "../cn";
+import { surfaceVariant } from "../surface-variants";
 
 export const SelectableCardRender: FC<any> = ({ props, buildChild }) => {
   const selected = Boolean(props.isSelected);
@@ -17,8 +22,11 @@ export const SelectableCardRender: FC<any> = ({ props, buildChild }) => {
       aria-selected={selected}
       aria-disabled={Boolean(props.isDisabled) || undefined}
       className={cn(
-        "rounded-xl border bg-card text-card-foreground p-4 shadow-sm",
-        selected ? "border-primary ring-2 ring-primary" : "border-border",
+        "rounded-xl border border-border text-card-foreground p-4 shadow-sm",
+        // The variant's tint (including its border color) lands before the
+        // selection ring, so selection always wins the border.
+        surfaceVariant(props.variant),
+        selected && "border-primary ring-2 ring-primary",
         props.isDisabled && "opacity-50",
       )}
     >
@@ -26,7 +34,7 @@ export const SelectableCardRender: FC<any> = ({ props, buildChild }) => {
         {String(props.label ?? "")}
         {selected && <span className="text-primary text-xs font-medium">selected</span>}
       </div>
-      <div className="flex flex-col gap-2">{ids.map(buildChild)}</div>
+      <div className="flex flex-col gap-2">{ids.map((id) => buildChild(id))}</div>
     </div>
   );
 };
diff --git a/packages/shadcn-renderers/src/components/TableRender.tsx b/packages/shadcn-renderers/src/components/TableRender.tsx
index a6e9c59..5ae0dcc 100644
--- a/packages/shadcn-renderers/src/components/TableRender.tsx
+++ b/packages/shadcn-renderers/src/components/TableRender.tsx
@@ -3,8 +3,13 @@
  * (data-driven columns/data and nested children) render, mirroring the
  * Astryx renderer's chunking of flat children into rows of one cell per
  * column; rows with a status get a trailing Badge cell.
+ *
+ * The presentation props the contract carries — `density`, `dividers`,
+ * `isStriped` — are projected onto shadcn's table utilities rather than
+ * dropped: a table emitted as compact-and-striped must read as compact and
+ * striped here, or the emitted surface is being misrepresented.
  */
-import type { FC } from "react";
+import type { FC, ReactNode } from "react";
 import { childIds } from "@dspack-studio/a2ui-ingest";
 import { BadgeRender } from "./BadgeRender";
 import { cn } from "../cn";
@@ -14,15 +19,45 @@ interface Row {
   status?: { label?: string; variant?: string };
 }
 
-const TH = "h-10 px-2 text-left align-middle text-sm font-medium text-muted-foreground";
-const TD = "p-2 align-middle text-sm";
-const TR = "border-b transition-colors hover:bg-muted/50";
+/** Row density -> shadcn's header/cell spacing steps. Catalog default: balanced. */
+const DENSITY: Record<string, { head: string; cell: string }> = {
+  compact: { head: "h-8 px-2 py-0.5", cell: "px-2 py-0.5" },
+  balanced: { head: "h-10 px-2 py-2", cell: "px-2 py-2" },
+  spacious: { head: "h-12 px-4 py-4", cell: "px-4 py-4" },
+};
+
+/**
+ * Divider style -> the borders shadcn's table draws. Catalog default: rows.
+ * `rows` divides horizontally, `columns` vertically, `grid` both, `none`
+ * neither — four values, four distinct treatments.
+ */
+const ROW_DIVIDER: Record<string, string> = {
+  rows: "border-b",
+  columns: "",
+  grid: "border-b",
+  none: "",
+};
+const CELL_DIVIDER: Record<string, string> = {
+  rows: "",
+  columns: "border-r last:border-r-0",
+  grid: "border-r last:border-r-0",
+  none: "",
+};
+
+const HEAD = "text-left align-middle text-sm font-medium text-muted-foreground";
+const CELL = "align-middle text-sm";
 
 export const TableRender: FC<any> = ({ props, buildChild }) => {
   const headers: string[] = Array.isArray(props.columns) ? props.columns.map(String) : [];
   const nested = childIds(props.children);
 
-  let bodyRows: Array<Array<React.ReactNode>>;
+  const density = DENSITY[props.density as string] ?? DENSITY.balanced;
+  const dividers = (props.dividers as string) in ROW_DIVIDER ? (props.dividers as string) : "rows";
+  const rowDivider = ROW_DIVIDER[dividers];
+  const cellDivider = CELL_DIVIDER[dividers];
+  const striped = Boolean(props.isStriped);
+
+  let bodyRows: Array<Array<ReactNode>>;
   let anyStatus = false;
   if (nested.length > 0) {
     const width = Math.max(headers.length, 1);
@@ -34,7 +69,7 @@ export const TableRender: FC<any> = ({ props, buildChild }) => {
     const rows: Row[] = Array.isArray(props.data) ? props.data : [];
     anyStatus = rows.some((r) => r.status);
     bodyRows = rows.map((r) => {
-      const cells: React.ReactNode[] = (r.cells ?? []).map((c) => String(c));
+      const cells: ReactNode[] = (r.cells ?? []).map((c) => String(c));
       if (anyStatus) {
         cells.push(r.status ? <BadgeRender props={{ label: r.status.label, variant: r.status.variant }} /> : null);
       }
@@ -47,19 +82,27 @@ export const TableRender: FC<any> = ({ props, buildChild }) => {
       <table className="w-full caption-bottom text-sm">
         {headers.length > 0 && (
           <thead className="border-b">
-            <tr className={TR}>
+            <tr className="transition-colors">
               {headers.map((h, i) => (
-                <th key={i} scope="col" className={TH}>{h}</th>
+                <th key={i} scope="col" className={cn(HEAD, density.head, cellDivider)}>{h}</th>
               ))}
-              {anyStatus && <th scope="col" className={TH}>Status</th>}
+              {anyStatus && <th scope="col" className={cn(HEAD, density.head, cellDivider)}>Status</th>}
             </tr>
           </thead>
         )}
         <tbody>
           {bodyRows.map((row, ri) => (
-            <tr key={ri} className={cn(TR, "last:border-0")}>
+            <tr
+              key={ri}
+              className={cn(
+                "transition-colors hover:bg-muted/50",
+                rowDivider,
+                "last:border-b-0",
+                striped && "odd:bg-muted/40",
+              )}
+            >
               {row.map((cell, ci) => (
-                <td key={ci} className={TD}>{cell}</td>
+                <td key={ci} className={cn(CELL, density.cell, cellDivider)}>{cell}</td>
               ))}
             </tr>
           ))}
diff --git a/packages/shadcn-renderers/src/components/TextFieldRender.tsx b/packages/shadcn-renderers/src/components/TextFieldRender.tsx
index 2b2955c..ff966a2 100644
--- a/packages/shadcn-renderers/src/components/TextFieldRender.tsx
+++ b/packages/shadcn-renderers/src/components/TextFieldRender.tsx
@@ -3,18 +3,30 @@
  * the binder-generated setter (optimistic-local, synced on action), exactly
  * as in the Astryx renderer — the data-model behavior belongs to the
  * protocol layer, not the design system.
+ *
+ * `size` is carried verbatim by the contract and projected onto shadcn's
+ * input height/type-scale steps; dropping it would render a compact field at
+ * the same height as a large one.
  */
 import { useId, useState, type FC } from "react";
 import { cn } from "../cn";
 
+/** Field size -> shadcn's input scale. Catalog default: md. */
+const SIZE: Record<string, { input: string; label: string }> = {
+  sm: { input: "h-8 px-2 py-1 text-xs", label: "text-xs" },
+  md: { input: "h-9 px-3 py-1 text-sm", label: "text-sm" },
+  lg: { input: "h-10 px-4 py-2 text-base", label: "text-base" },
+};
+
 export const TextFieldRender: FC<any> = ({ props }) => {
   const id = useId();
   const bound = typeof props.setValue === "function";
   const [local, setLocal] = useState(String(props.value ?? ""));
+  const size = SIZE[props.size as string] ?? SIZE.md;
   return (
     <div className="grid w-full gap-1.5">
       {!props.isLabelHidden && (
-        <label htmlFor={id} className="text-sm font-medium leading-none">
+        <label htmlFor={id} className={cn("font-medium leading-none", size.label)}>
           {String(props.label ?? "")}
         </label>
       )}
@@ -23,7 +35,8 @@ export const TextFieldRender: FC<any> = ({ props }) => {
         aria-label={props.isLabelHidden ? String(props.label ?? "") : undefined}
         type={props.variant === "obscured" ? "password" : "text"}
         className={cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "flex w-full rounded-md border border-input bg-transparent shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          size.input,
         )}
         value={bound ? String(props.value ?? "") : local}
         onChange={(e) => (bound ? props.setValue(e.target.value) : setLocal(e.target.value))}
diff --git a/packages/shadcn-renderers/src/emitted-corpus.ts b/packages/shadcn-renderers/src/emitted-corpus.ts
new file mode 100644
index 0000000..44baf7a
--- /dev/null
+++ b/packages/shadcn-renderers/src/emitted-corpus.ts
@@ -0,0 +1,160 @@
+/**
+ * The EMITTED corpus: every A2UI component instance dspack-emit has actually
+ * produced in this repo, plus the catalog shapes those instances are validated
+ * against. Test-only (never exported from the package index) — it exists so the
+ * parity suite can compare what the emitter EMITS against what a renderer
+ * CONSUMES, rather than against a hand-written list that can drift with it.
+ *
+ * Two sources, both real emitter output:
+ *   - packages/contracts/out/*.surface.json — surfaces emitted by the contracts
+ *     build (`emitSurface`) from the authored .dsurface.json / worked example.
+ *   - packages/replay/fixtures/*.json — recorded runs; their A2UI operations
+ *     ride inside AG-UI TOOL_CALL_RESULT payloads.
+ *
+ * Instances are folded LAST-WRITE-WINS per (file, surfaceId, component id), so
+ * the corpus is the state a renderer is finally asked to draw, not an
+ * intermediate delivery.
+ */
+import { readFileSync, readdirSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { join } from "node:path";
+
+export const CONTRACTS_OUT = fileURLToPath(new URL("../../contracts/out/", import.meta.url));
+export const FIXTURES_DIR = fileURLToPath(new URL("../../replay/fixtures/", import.meta.url));
+
+export const catalog: Record<string, any> = JSON.parse(
+  readFileSync(join(CONTRACTS_OUT, "catalog.v0_9_1.json"), "utf8"),
+);
+
+export interface EmittedInstance {
+  /** Source file the instance was emitted into. */
+  source: string;
+  surfaceId: string;
+  /** The raw emitted component object, including `id` and `component`. */
+  component: Record<string, any>;
+}
+
+/** Pull every A2UI operation out of a file, whichever envelope carries it. */
+function a2uiOperations(doc: unknown): any[] {
+  const ops: any[] = [];
+  const walk = (node: any) => {
+    if (Array.isArray(node)) {
+      node.forEach(walk);
+      return;
+    }
+    if (!node || typeof node !== "object") return;
+    // Recorded runs: operations ride inside AG-UI tool-call results.
+    if (node.type === "TOOL_CALL_RESULT" && typeof node.content === "string") {
+      try {
+        const parsed = JSON.parse(node.content);
+        if (Array.isArray(parsed?.a2ui_operations)) ops.push(...parsed.a2ui_operations);
+      } catch {
+        /* non-JSON tool results are not A2UI payloads */
+      }
+    }
+    // Contracts build output: { messages: [...] }.
+    if (Array.isArray(node.messages)) ops.push(...node.messages);
+    Object.values(node).forEach(walk);
+  };
+  walk(doc);
+  return ops;
+}
+
+let cached: EmittedInstance[] | undefined;
+
+/** Every distinct emitted instance, in discovery order. */
+export function emittedInstances(): EmittedInstance[] {
+  if (cached) return cached;
+  const files: Array<[string, string]> = [];
+  for (const f of readdirSync(CONTRACTS_OUT)) {
+    if (f.endsWith(".surface.json")) files.push([CONTRACTS_OUT, f]);
+  }
+  for (const f of readdirSync(FIXTURES_DIR)) {
+    if (f.endsWith(".json")) files.push([FIXTURES_DIR, f]);
+  }
+  const final = new Map<string, EmittedInstance>();
+  for (const [dir, file] of files) {
+    const doc = JSON.parse(readFileSync(join(dir, file), "utf8"));
+    for (const op of a2uiOperations(doc)) {
+      const update = op?.updateComponents;
+      if (!update || !Array.isArray(update.components)) continue;
+      for (const component of update.components) {
+        if (!component?.id || !component?.component) continue;
+        final.set(`${file}|${update.surfaceId}|${component.id}`, {
+          source: file,
+          surfaceId: String(update.surfaceId),
+          component,
+        });
+      }
+    }
+  }
+  cached = [...final.values()];
+  return cached;
+}
+
+/** Props the emitter actually put on an instance (envelope keys removed). */
+export function emittedProps(component: Record<string, any>): Record<string, any> {
+  const out: Record<string, any> = {};
+  for (const [k, v] of Object.entries(component)) {
+    if (k === "id" || k === "component") continue;
+    out[k] = v;
+  }
+  return out;
+}
+
+/** Flattened catalog property schemas for one component (allOf/$ref resolved). */
+export function catalogProps(componentName: string): Record<string, any> {
+  const node = catalog.components?.[componentName];
+  if (!node) throw new Error(`Component '${componentName}' is not in the emitted catalog.`);
+  const acc: Record<string, any> = {};
+  const flatten = (n: any) => {
+    if (!n || typeof n !== "object") return;
+    if (typeof n.$ref === "string" && n.$ref.startsWith("#/")) {
+      let target: any = catalog;
+      for (const seg of n.$ref.replace(/^#\//, "").split("/")) target = target?.[seg];
+      flatten(target);
+    }
+    if (Array.isArray(n.allOf)) n.allOf.forEach(flatten);
+    if (n.properties) Object.assign(acc, n.properties);
+  };
+  flatten(node);
+  delete acc.component;
+  delete acc.id;
+  return acc;
+}
+
+/**
+ * Every (component, enum prop) pair the emitter actually emits, with the
+ * catalog's full legal value set and declared default. This is the contract
+ * vocabulary a renderer has to keep distinguishable.
+ */
+export function emittedEnumProps(): Array<{
+  componentName: string;
+  prop: string;
+  values: string[];
+  default?: string;
+  emittedValues: string[];
+}> {
+  const seen = new Map<string, Set<string>>();
+  for (const { component } of emittedInstances()) {
+    for (const [prop, value] of Object.entries(emittedProps(component))) {
+      const key = `${component.component}.${prop}`;
+      if (!seen.has(key)) seen.set(key, new Set());
+      if (typeof value === "string") seen.get(key)!.add(value);
+    }
+  }
+  const out: ReturnType<typeof emittedEnumProps> = [];
+  for (const key of seen.keys()) {
+    const [componentName, prop] = key.split(".");
+    const schema = catalogProps(componentName)[prop];
+    if (!Array.isArray(schema?.enum)) continue;
+    out.push({
+      componentName,
+      prop,
+      values: schema.enum,
+      default: schema.default,
+      emittedValues: [...seen.get(key)!],
+    });
+  }
+  return out;
+}
diff --git a/packages/shadcn-renderers/src/emitted-prop-parity.test.tsx b/packages/shadcn-renderers/src/emitted-prop-parity.test.tsx
new file mode 100644
index 0000000..84a3fef
--- /dev/null
+++ b/packages/shadcn-renderers/src/emitted-prop-parity.test.tsx
@@ -0,0 +1,398 @@
+/**
+ * PROPS-LEVEL PARITY: what dspack-emit EMITS vs what this design system's
+ * renderers actually CONSUME.
+ *
+ * Why this suite exists, and why the checks it already had are not enough:
+ * A3 (the emitter's instance gate) validates a message against the catalog, so
+ * it passes for a renderer that ignores every prop it is handed; a screenshot
+ * shows pixels but cannot say which emitted prop produced them. A schema-valid
+ * surface that renders wrong is FAILED representation evidence — the drift has
+ * to be caught at the prop level or it is not caught at all.
+ *
+ * The corpus is real emitter output (see `emitted-corpus.ts`): every distinct
+ * A2UI instance in the contracts build and in the recorded fixtures. Nothing
+ * here is hand-listed, so growing the scenario shelf grows the guard.
+ *
+ * The four properties asserted, each grounded in how the stack actually runs:
+ *  1. CONSUMPTION — perturbing an emitted prop to another legal value must
+ *     change the rendered markup. If it does not, the renderer is provably
+ *     ignoring that prop.
+ *  2. DISTINGUISHABILITY — for an enum prop the emitter emits, every legal
+ *     catalog value must render distinguishably. A design system may project a
+ *     treatment onto its own idiom, but collapsing distinct contract values
+ *     onto identical pixels destroys the distinction the contract carried.
+ *  3. DEFAULT FIDELITY — omitting a prop must render as the catalog's declared
+ *     default. A2UI's GenericBinder resolves raw properties and never runs the
+ *     zod schema's `.default()`, so an omitted prop reaches the renderer as
+ *     `undefined` and the renderer's own fallback is the ONLY thing that can
+ *     honor the contract default.
+ *  4. CONTENT — every string the instance carries must appear in the output,
+ *     every child id must be built exactly once, and every table row must
+ *     survive. Blank output for an instance that carries content is a failure,
+ *     never a silent pass.
+ */
+import { createElement, type ReactNode } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { shadcnRegistry } from "./registry";
+import {
+  catalogProps,
+  emittedEnumProps,
+  emittedInstances,
+  emittedProps,
+  type EmittedInstance,
+} from "./emitted-corpus";
+
+/* ------------------------------------------------------------------ render */
+
+/** Marker child so slot wiring is observable in static markup. */
+const buildChild = (id: string): ReactNode => createElement("i", { key: id }, `[child:${id}]`);
+
+/**
+ * Shape raw emitted props the way A2UI's binder delivers them: actions become
+ * callables, DynamicString bindings arrive resolved, everything else verbatim.
+ */
+function bindProps(component: Record<string, any>): Record<string, any> {
+  const out: Record<string, any> = {};
+  for (const [key, value] of Object.entries(emittedProps(component))) {
+    if (key === "action") {
+      out[key] = () => {};
+    } else if (value && typeof value === "object" && !Array.isArray(value) && typeof value.path === "string") {
+      out[key] = `bound:${value.path}`;
+    } else {
+      out[key] = value;
+    }
+  }
+  return out;
+}
+
+function render(componentName: string, props: Record<string, any>): string {
+  const Visual = (shadcnRegistry.custom as Record<string, any>)[componentName];
+  if (!Visual) return "";
+  return renderToStaticMarkup(
+    createElement(Visual, {
+      props,
+      buildChild,
+      context: { componentModel: { id: "node" }, dataContext: { path: "/" } },
+    }),
+  );
+}
+
+const visibleText = (html: string) => html.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();
+
+/** Instances this design system draws (Dialog is the deliberate placeholder). */
+const renderable = (): EmittedInstance[] =>
+  emittedInstances().filter((i) => Boolean((shadcnRegistry.custom as Record<string, any>)[i.component.component]));
+
+const label = (i: EmittedInstance) => `${i.source}:${i.surfaceId}#${i.component.id} (${i.component.component})`;
+
+/** Another legal value for an emitted prop — enum-aware, shape-aware. */
+function perturb(componentName: string, prop: string, value: unknown): unknown {
+  const schema = catalogProps(componentName)[prop];
+  if (Array.isArray(schema?.enum)) return schema.enum.find((v: unknown) => v !== value) ?? value;
+  if (typeof value === "boolean") return !value;
+  if (typeof value === "number") return value + 41;
+  if (typeof value === "string") return `${value} PERTURBED`;
+  if (Array.isArray(value)) {
+    if (value.length > 1) return value.slice(0, -1);
+    if (value.length === 1) {
+      const [only] = value;
+      if (typeof only === "string") return [`${only}-perturbed`];
+      if (only && typeof only === "object") return [];
+    }
+    return [...value, "perturbed"];
+  }
+  return value;
+}
+
+/* ------------------------------------------------- 1. emitted vs consumed */
+
+describe("emitted-prop vs consumed-prop parity", () => {
+  it("every prop the emitter emits changes what this design system renders", () => {
+    const ignored: string[] = [];
+    for (const instance of renderable()) {
+      const name = instance.component.component;
+      const props = bindProps(instance.component);
+      const baseline = render(name, props);
+      for (const [prop, value] of Object.entries(props)) {
+        if (prop === "action") continue; // dispatch behavior, not markup
+        const other = perturb(name, prop, instance.component[prop]);
+        if (JSON.stringify(other) === JSON.stringify(instance.component[prop])) continue;
+        if (render(name, { ...props, [prop]: other }) === baseline) {
+          ignored.push(`${name}.${prop} ignored at ${label(instance)}`);
+        }
+      }
+    }
+    expect(ignored).toEqual([]);
+  });
+
+  it("covers a corpus that actually exercises the registry", () => {
+    // A guard on the guard: if the corpus ever empties (a moved fixture
+    // directory, a skipped contracts build) every check above passes vacuously.
+    const instances = renderable();
+    expect(instances.length).toBeGreaterThan(100);
+    const covered = new Set(instances.map((i) => i.component.component));
+    for (const name of Object.keys(shadcnRegistry.custom)) expect([...covered]).toContain(name);
+  });
+});
+
+/* ------------------------------------------- 2. variant / value fidelity */
+
+describe("variant fidelity", () => {
+  it("keeps every legal value of an emitted enum prop distinguishable", () => {
+    const collapsed: string[] = [];
+    for (const { componentName, prop, values } of emittedEnumProps()) {
+      const instance = renderable().find((i) => i.component.component === componentName && prop in i.component);
+      if (!instance) continue;
+      const props = bindProps(instance.component);
+      const byMarkup = new Map<string, string[]>();
+      for (const value of values) {
+        const markup = render(componentName, { ...props, [prop]: value });
+        byMarkup.set(markup, [...(byMarkup.get(markup) ?? []), value]);
+      }
+      for (const group of byMarkup.values()) {
+        if (group.length > 1) collapsed.push(`${componentName}.${prop}: ${group.join(" = ")} render identically`);
+      }
+    }
+    expect(collapsed).toEqual([]);
+  });
+
+  it("renders a destructive action destructively, and a non-destructive one not", () => {
+    // The named failure mode: a destructive button that looks like any other.
+    const destructive = render("Button", { label: "Delete project", variant: "destructive", action: () => {} });
+    const primary = render("Button", { label: "Delete project", variant: "primary", action: () => {} });
+    expect(destructive).toContain("destructive");
+    expect(destructive).not.toEqual(primary);
+    expect(primary).not.toContain("destructive");
+
+    // AlertDialog's confirm button carries the same duty...
+    const confirm = render("AlertDialog", {
+      title: "Delete this project?",
+      description: "This cannot be undone.",
+      actionLabel: "Delete project",
+      actionVariant: "destructive",
+      action: () => {},
+    });
+    expect(confirm).toContain("destructive");
+
+    // ...in both directions: the contract's `primary` default must not be
+    // dressed as a destructive confirm, or every dialog reads as dangerous.
+    const informational = {
+      title: "Publish this project?",
+      description: "It becomes visible to your team.",
+      actionLabel: "Publish project",
+      action: () => {},
+    };
+    expect(render("AlertDialog", { ...informational, actionVariant: "primary" })).not.toContain("destructive");
+    // `actionVariant` is optional; omitting it means the catalog default,
+    // which is `primary` — not destructive.
+    expect(render("AlertDialog", informational)).not.toContain("destructive");
+  });
+});
+
+/* -------------------------------------------------- 3. default fidelity */
+
+describe("catalog default fidelity", () => {
+  it("renders an omitted prop as the catalog's declared default", () => {
+    // A2UI's binder never applies the zod schema's default (it resolves raw
+    // properties), so the renderer's fallback is the contract's last defense.
+    const wrong: string[] = [];
+    for (const { componentName, prop, default: declared } of emittedEnumProps()) {
+      if (declared === undefined) continue;
+      const instance = renderable().find((i) => i.component.component === componentName && prop in i.component);
+      if (!instance) continue;
+      const props = bindProps(instance.component);
+      const { [prop]: _omitted, ...without } = props;
+      const asDefault = render(componentName, { ...props, [prop]: declared });
+      if (render(componentName, without) !== asDefault) {
+        wrong.push(`${componentName}.${prop} omitted does not render as the catalog default '${declared}'`);
+      }
+    }
+    expect(wrong).toEqual([]);
+  });
+});
+
+/* --------------------------------------- 4. slots, repeats, content, rows */
+
+/**
+ * The structural detectors, written as pure `(markup, emitted) -> violations`
+ * so each one can be turned on a DELIBERATELY BROKEN visual below. A detector
+ * that has never rejected anything is decoration, not a guard.
+ */
+
+/** Every child id the instance hands the renderer must be built exactly once. */
+function slotViolations(html: string, component: Record<string, any>): string[] {
+  const ids: string[] = [];
+  if (typeof component.child === "string") ids.push(component.child);
+  if (Array.isArray(component.children)) {
+    ids.push(...component.children.filter((c: unknown): c is string => typeof c === "string"));
+  }
+  return ids
+    .map((id) => ({ id, times: html.split(`[child:${id}]`).length - 1 }))
+    .filter(({ times }) => times !== 1)
+    .map(({ id, times }) => `child '${id}' built ${times}x`);
+}
+
+/** Every repeated item a data-driven prop carries must reach the output. */
+function repeatViolations(html: string, component: Record<string, any>): string[] {
+  const text = visibleText(html);
+  const out: string[] = [];
+  for (const item of (component.items ?? []) as Array<Record<string, unknown>>) {
+    for (const field of ["label", "value"] as const) {
+      const v = item?.[field];
+      if (typeof v === "string" && v.trim() && !text.includes(v.trim())) out.push(`item ${field} '${v}'`);
+    }
+  }
+  for (const column of (component.columns ?? []) as unknown[]) {
+    if (typeof column === "string" && column.trim() && !text.includes(column.trim())) {
+      out.push(`column header '${column}'`);
+    }
+  }
+  return out;
+}
+
+/** One body row per emitted row, every cell and status intact. */
+function tableRowViolations(html: string, component: Record<string, any>): string[] {
+  const out: string[] = [];
+  const body = html.slice(html.indexOf("<tbody>"), html.indexOf("</tbody>"));
+  const rendered = body.split("<tr").length - 1;
+  const rows = (component.data ?? []) as Array<Record<string, any>>;
+  const children = (component.children ?? []) as string[];
+  const expected =
+    rows.length > 0
+      ? rows.length
+      : Math.ceil(children.length / Math.max(((component.columns ?? []) as unknown[]).length, 1));
+  if (rendered !== expected) out.push(`rendered ${rendered} body rows for ${expected} emitted`);
+  const text = visibleText(html);
+  for (const row of rows) {
+    for (const cell of row?.cells ?? []) {
+      if (String(cell).trim() && !text.includes(String(cell).trim())) out.push(`dropped cell '${cell}'`);
+    }
+    const status = row?.status?.label;
+    if (typeof status === "string" && status.trim() && !text.includes(status.trim())) {
+      out.push(`dropped status '${status}'`);
+    }
+  }
+  return out;
+}
+
+/** Every string an emitted instance promises will be visible. */
+function promisedText(component: Record<string, any>): string[] {
+  const out: string[] = [];
+  const push = (v: unknown) => {
+    if (typeof v === "string" && v.trim()) out.push(v.trim());
+  };
+  for (const key of ["label", "text", "title", "description", "actionLabel", "cancelLabel"]) push(component[key]);
+  for (const item of (component.items ?? []) as Array<Record<string, unknown>>) {
+    push(item?.label);
+    push(item?.value);
+  }
+  for (const row of (component.data ?? []) as Array<Record<string, any>>) {
+    for (const cell of row?.cells ?? []) push(String(cell));
+  }
+  for (const column of (component.columns ?? []) as unknown[]) push(column as string);
+  return out;
+}
+
+/** Blank output, or promised content missing from it. */
+function contentViolations(html: string, component: Record<string, any>): string[] {
+  const promised = promisedText(component);
+  if (promised.length === 0) return []; // nothing claimed, nothing owed
+  const text = visibleText(html);
+  if (!text) return ["rendered nothing"];
+  const dropped = promised.filter((s) => !text.includes(s) && !html.includes(s));
+  return dropped.length ? [`dropped ${JSON.stringify(dropped)}`] : [];
+}
+
+/** A Table instance with rows, cells, a status column and headers. */
+const TABLE_FIXTURE = {
+  component: "Table",
+  columns: ["Ticket", "Customer"],
+  data: [
+    { cells: ["T-1041", "Northwind"], status: { label: "open", variant: "info" } },
+    { cells: ["T-1042", "Contoso"], status: { label: "escalated", variant: "error" } },
+    { cells: ["T-1043", "Fabrikam"], status: { label: "closed", variant: "neutral" } },
+  ],
+};
+
+describe("slot and repeated-item parity", () => {
+  it("builds every emitted child id exactly once", () => {
+    const broken: string[] = [];
+    for (const instance of renderable()) {
+      const html = render(instance.component.component, bindProps(instance.component));
+      for (const v of slotViolations(html, instance.component)) broken.push(`${label(instance)} ${v}`);
+    }
+    expect(broken).toEqual([]);
+  });
+
+  it("renders every repeated item a data-driven prop carries", () => {
+    const missing: string[] = [];
+    for (const instance of renderable()) {
+      const html = render(instance.component.component, bindProps(instance.component));
+      for (const v of repeatViolations(html, instance.component)) missing.push(`${label(instance)} ${v}`);
+    }
+    expect(missing).toEqual([]);
+  });
+
+  it("rejects a visual that ignores its slot or drops repeated items", () => {
+    // The detectors turned on deliberately broken visuals.
+    const ignoresChildren = renderToStaticMarkup(createElement("div", null, "no slots here"));
+    expect(slotViolations(ignoresChildren, { children: ["a", "b"] })).toEqual([
+      "child 'a' built 0x",
+      "child 'b' built 0x",
+    ]);
+    const duplicatesChild = renderToStaticMarkup(createElement("div", null, "[child:a]", "[child:a]"));
+    expect(slotViolations(duplicatesChild, { child: "a" })).toEqual(["child 'a' built 2x"]);
+    const dropsItems = renderToStaticMarkup(createElement("dl", null, createElement("dt", null, "Guests")));
+    expect(repeatViolations(dropsItems, { items: [{ label: "Guests", value: "2" }] })).toEqual(["item value '2'"]);
+  });
+});
+
+describe("table row preservation", () => {
+  it("keeps one body row per emitted data row, with every cell", () => {
+    const lost: string[] = [];
+    for (const instance of renderable()) {
+      if (instance.component.component !== "Table") continue;
+      const html = render("Table", bindProps(instance.component));
+      for (const v of tableRowViolations(html, instance.component)) lost.push(`${label(instance)} ${v}`);
+    }
+    expect(lost).toEqual([]);
+  });
+
+  it("preserves rows, cells and statuses for a multi-row table", () => {
+    const violations = tableRowViolations(render("Table", TABLE_FIXTURE), TABLE_FIXTURE);
+    expect(violations).toEqual([]);
+  });
+
+  it("rejects a visual that drops rows", () => {
+    // Same detector, same fixture, one row deliberately dropped.
+    const truncated = render("Table", { ...TABLE_FIXTURE, data: TABLE_FIXTURE.data.slice(0, -1) });
+    expect(tableRowViolations(truncated, TABLE_FIXTURE)).toEqual([
+      "rendered 2 body rows for 3 emitted",
+      "dropped cell 'T-1043'",
+      "dropped cell 'Fabrikam'",
+      "dropped status 'closed'",
+    ]);
+  });
+});
+
+describe("blank-content detection", () => {
+  it("never renders an empty component for an instance that carries content", () => {
+    const blank: string[] = [];
+    for (const instance of renderable()) {
+      const html = render(instance.component.component, bindProps(instance.component));
+      for (const v of contentViolations(html, instance.component)) blank.push(`${label(instance)} ${v}`);
+    }
+    expect(blank).toEqual([]);
+  });
+
+  it("fails a visual that renders nothing, rather than passing it silently", () => {
+    // Without this the detector could be vacuous: "renders nothing" and
+    // "renders correctly" would be the same green tick.
+    const nothing = renderToStaticMarkup(createElement(() => null));
+    expect(contentViolations(nothing, { label: "Delete project" })).toEqual(["rendered nothing"]);
+    const real = render("Badge", { label: "open", variant: "info" });
+    expect(contentViolations(real, { label: "open" })).toEqual([]);
+    expect(visibleText(real)).toBe("open");
+  });
+});
diff --git a/packages/shadcn-renderers/src/styles.css b/packages/shadcn-renderers/src/styles.css
index 20751e6..c684591 100644
--- a/packages/shadcn-renderers/src/styles.css
+++ b/packages/shadcn-renderers/src/styles.css
@@ -14,6 +14,7 @@
 @import "tailwindcss/utilities.css" layer(utilities);
 @source "./components";
 @source "./registry.tsx";
+@source "./surface-variants.ts";
 
 [data-design-system="shadcn"] {
   --background: oklch(1 0 0);
diff --git a/packages/shadcn-renderers/src/surface-variants.ts b/packages/shadcn-renderers/src/surface-variants.ts
new file mode 100644
index 0000000..b1b3d3d
--- /dev/null
+++ b/packages/shadcn-renderers/src/surface-variants.ts
@@ -0,0 +1,35 @@
+/**
+ * The catalog's surface-background vocabulary (Card and SelectableCard share
+ * it) projected onto shadcn/ui's idiom.
+ *
+ * shadcn's own cards are token-neutral, so the color variants are expressed
+ * the way shadcn's docs express an accented surface: the token card
+ * background plus an explicit Tailwind color tint. Alpha tints (`/10`, `/30`)
+ * are used rather than fixed 50/950 steps because this package's theme is
+ * switched by `[data-mode="dark"]`, not by Tailwind's `dark:` variant — a
+ * tint reads correctly under both modes without a second rule.
+ *
+ * Every catalog value gets its OWN treatment. Collapsing the color variants
+ * onto the default background would accept the vocabulary and then throw the
+ * distinction away, which is exactly the drift `emitted-prop-parity.test.tsx`
+ * exists to catch.
+ */
+export const SURFACE_VARIANT: Record<string, string> = {
+  default: "bg-card",
+  muted: "bg-secondary",
+  transparent: "bg-transparent shadow-none",
+  gray: "bg-zinc-500/10 border-zinc-500/30",
+  blue: "bg-blue-500/10 border-blue-500/30",
+  cyan: "bg-cyan-500/10 border-cyan-500/30",
+  green: "bg-green-500/10 border-green-500/30",
+  orange: "bg-orange-500/10 border-orange-500/30",
+  pink: "bg-pink-500/10 border-pink-500/30",
+  purple: "bg-purple-500/10 border-purple-500/30",
+  red: "bg-red-500/10 border-red-500/30",
+  teal: "bg-teal-500/10 border-teal-500/30",
+  yellow: "bg-yellow-500/10 border-yellow-500/30",
+};
+
+/** Catalog default for both components' `variant` is `default`. */
+export const surfaceVariant = (variant: unknown): string =>
+  SURFACE_VARIANT[variant as string] ?? SURFACE_VARIANT.default;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a54249f..f7d6ec0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -352,9 +352,6 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
-      react:
-        specifier: '>=19.0.0'
-        version: 19.2.7
       tailwind-merge:
         specifier: ^3.0.2
         version: 3.6.0
@@ -365,6 +362,15 @@ importers:
       '@types/react':
         specifier: ^19.0.0
         version: 19.2.17
+      '@types/react-dom':
+        specifier: ^19.0.0
+        version: 19.2.3(@types/react@19.2.17)
+      react:
+        specifier: ^19.0.0
+        version: 19.2.7
+      react-dom:
+        specifier: ^19.0.0
+        version: 19.2.7(react@19.2.7)
       tailwindcss:
         specifier: ^4.1.0
         version: 4.3.2