diff --git a/.claude/agent-memory/main/MEMORY.md b/.claude/agent-memory/main/MEMORY.md
index b09b505..8ea551e 100644
--- a/.claude/agent-memory/main/MEMORY.md
+++ b/.claude/agent-memory/main/MEMORY.md
@@ -2,5 +2,6 @@
 
 - [User profile](user_profile.md) — French-speaking, shadcn/Tailwind v4 practitioner fighting agent-generated "slop UI"
 - [Concrete over theory](feedback_concrete_over_theory.md) — anchor design talk in current, verifiable tooling; label opinion as opinion
+- [Registry deps coupling](feedback_registry_deps_coupling.md) — new registry item with new peer dep requires updating contract-test.mjs install list in lockstep
 - [Design learnings repo](project_design_learnings.md) — knowledge base + working monorepo for deessejs/ui registry at ui.deessejs.com (hosted on Vercel)
 - [Phase 4 validated](project_phase4_validated.md) — external install end-to-end confirmed 2026-07-29; Phase 6 (official shadcn index submission) gate is now lifted
diff --git a/.claude/agent-memory/main/feedback_registry_deps_coupling.md b/.claude/agent-memory/main/feedback_registry_deps_coupling.md
new file mode 100644
index 0000000..c7625f3
--- /dev/null
+++ b/.claude/agent-memory/main/feedback_registry_deps_coupling.md
@@ -0,0 +1,18 @@
+---
+name: feedback-registry-deps-coupling
+description: Adding a new registry item with a new peer dep requires updating contract-test.mjs install list in lockstep — refactor target is to derive deps from registry.json
+metadata:
+  type: feedback
+---
+
+When adding a new registry item whose `dependencies[]` introduces a peer dep the contract test hasn't installed, the CI `contract` job fails with TypeScript resolution errors (`Cannot find module 'X'`). Fix: add the new dep to the hardcoded install list in `apps/web/scripts/contract-test.mjs`.
+
+**Why:** during the 3→8 catalog expansion in this session, `ds-breadcrumb` introduced `lucide-react` (for `ChevronRightIcon` and `MoreHorizontalIcon`). The contract test passed locally because `lucide-react` happened to be present in the workspace `node_modules` from another package, but CI on a clean checkout failed. Cost: one fix-commit (`17d5f3d`) + one CI re-run.
+
+**How to apply:**
+- Short term: when adding any registry item, audit its `dependencies[]` against the install list in `apps/web/scripts/contract-test.mjs` (lines ~84-99) and add any new ones before pushing.
+- Long term: refactor `contract-test.mjs` to read `registry.json`, aggregate the union of `dependencies[]` across all items, and install that. Single source of truth = the catalog. Removes the coupling entirely.
+
+The drift script (`check-registry-drift.mjs`) has the same shape of coupling to `registry.json` but in the opposite direction (reads, doesn't install) — that one is fine as-is.
+
+Related: [[project-design-learnings]], [[project-phase4-validated]].
diff --git a/apps/web/app/blocks/[category_id]/[block_id]/page.tsx b/apps/web/app/blocks/[category_id]/[block_id]/page.tsx
index 8255ed9..307c236 100644
--- a/apps/web/app/blocks/[category_id]/[block_id]/page.tsx
+++ b/apps/web/app/blocks/[category_id]/[block_id]/page.tsx
@@ -143,12 +143,7 @@ export default async function Page({ params }: { params: Params }) {
                   </span>
                 </div>
                 <div className="flex flex-1 items-center justify-center p-12">
-                  <div className="text-muted-foreground flex flex-col items-center gap-2 font-mono text-xs">
-                    <span className="text-foreground text-sm font-medium">
-                      {block.name}
-                    </span>
-                    <span>rendered block placeholder</span>
-                  </div>
+                  <block.Demo />
                 </div>
               </div>
             </TabsContent>
diff --git a/apps/web/app/blocks/[category_id]/page.tsx b/apps/web/app/blocks/[category_id]/page.tsx
index dc94114..9a03ec1 100644
--- a/apps/web/app/blocks/[category_id]/page.tsx
+++ b/apps/web/app/blocks/[category_id]/page.tsx
@@ -102,7 +102,7 @@ export default async function Page({ params }: { params: Params }) {
                   href={`/blocks/${category_id}/${item.id}`}
                   name={item.name}
                   description={item.description}
-                  preview={<item.Block />}
+                  preview={<item.Demo />}
                   className={spansTwo ? "sm:col-span-2" : undefined}
                   previewClassName={spansTwo ? "sm:h-60" : undefined}
                 />
diff --git a/apps/web/lib/registry/index.tsx b/apps/web/lib/registry/index.tsx
index 2f65f9a..8eab9fb 100644
--- a/apps/web/lib/registry/index.tsx
+++ b/apps/web/lib/registry/index.tsx
@@ -38,6 +38,11 @@ import {
   TextareaDemo,
 } from "@workspace/registry/components/textarea"
 import { meta as textareaMeta } from "@workspace/registry/components/textarea/meta"
+import {
+  EmptyState,
+  EmptyStateBlockDemo,
+} from "@workspace/registry/blocks/empty-state"
+import { meta as emptyStateMeta } from "@workspace/registry/blocks/empty-state/meta"
 
 import { SOURCES } from "./sources"
 import type { ComponentMeta, BlockMeta } from "./types"
@@ -53,6 +58,8 @@ type ComponentEntry = ComponentMeta & {
 type BlockEntry = BlockMeta & {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   Block: React.ComponentType<any>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Demo: React.ComponentType<any>
   source: string
 }
 
@@ -107,7 +114,14 @@ const COMPONENT_REGISTRY: ComponentEntry[] = [
   },
 ]
 
-const BLOCK_REGISTRY: BlockEntry[] = []
+const BLOCK_REGISTRY: BlockEntry[] = [
+  {
+    ...emptyStateMeta,
+    Block: EmptyState,
+    Demo: EmptyStateBlockDemo,
+    source: SOURCES.blocks["empty-state"],
+  },
+]
 
 const CATEGORY_LABELS: Record<string, string> = {
   buttons: "Buttons",
@@ -196,8 +210,8 @@ function deriveComponentPreview(items: ComponentEntry[]): React.ComponentType {
 
 function deriveBlockPreview(items: BlockEntry[]): React.ComponentType {
   const First = items[0]!
-  const Block = First.Block
-  return () => <Block />
+  const Demo = First.Demo
+  return () => <Demo />
 }
 
 export function getEnrichedComponentCategories(): EnrichedComponentCategory[] {
diff --git a/apps/web/lib/registry/sources.generated.ts b/apps/web/lib/registry/sources.generated.ts
index 87f29f8..4fcd3cd 100644
--- a/apps/web/lib/registry/sources.generated.ts
+++ b/apps/web/lib/registry/sources.generated.ts
@@ -4,14 +4,16 @@
 
 export const SOURCES = {
   components: {
-  "breadcrumb": "\"use client\"\n\nimport {\n  Breadcrumb as ShadcnBreadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n} from \"@workspace/ui/components/breadcrumb\"\n\nexport {\n  ShadcnBreadcrumb as Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n\nexport function BreadcrumbDemo() {\n  return (\n    <ShadcnBreadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/components\">Components</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </ShadcnBreadcrumb>\n  )\n}\n",
+  "breadcrumb": "\"use client\"\r\n\r\nimport {\r\n  Breadcrumb as ShadcnBreadcrumb,\r\n  BreadcrumbList,\r\n  BreadcrumbItem,\r\n  BreadcrumbLink,\r\n  BreadcrumbPage,\r\n  BreadcrumbSeparator,\r\n  BreadcrumbEllipsis,\r\n} from \"@workspace/ui/components/breadcrumb\"\r\n\r\nexport {\r\n  ShadcnBreadcrumb as Breadcrumb,\r\n  BreadcrumbList,\r\n  BreadcrumbItem,\r\n  BreadcrumbLink,\r\n  BreadcrumbPage,\r\n  BreadcrumbSeparator,\r\n  BreadcrumbEllipsis,\r\n}\r\n\r\nexport function BreadcrumbDemo() {\r\n  return (\r\n    <ShadcnBreadcrumb>\r\n      <BreadcrumbList>\r\n        <BreadcrumbItem>\r\n          <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\r\n        </BreadcrumbItem>\r\n        <BreadcrumbSeparator />\r\n        <BreadcrumbItem>\r\n          <BreadcrumbLink href=\"/components\">Components</BreadcrumbLink>\r\n        </BreadcrumbItem>\r\n        <BreadcrumbSeparator />\r\n        <BreadcrumbItem>\r\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\r\n        </BreadcrumbItem>\r\n      </BreadcrumbList>\r\n    </ShadcnBreadcrumb>\r\n  )\r\n}\r\n",
   "button": "\"use client\"\n\nimport { Button as ShadcnButton } from \"@workspace/ui/components/button\"\n\nexport type ButtonProps = React.ComponentProps<typeof ShadcnButton>\n\nexport { ShadcnButton as Button }\n\nexport function ButtonDemo() {\n  return (\n    <div className=\"flex flex-wrap items-center gap-2\">\n      <ShadcnButton variant=\"default\">Default</ShadcnButton>\n      <ShadcnButton variant=\"secondary\">Secondary</ShadcnButton>\n      <ShadcnButton variant=\"outline\">Outline</ShadcnButton>\n      <ShadcnButton variant=\"ghost\">Ghost</ShadcnButton>\n      <ShadcnButton variant=\"destructive\">Destructive</ShadcnButton>\n    </div>\n  )\n}",
   "colored-badge": "\"use client\"\r\n\r\nimport { Badge } from \"@workspace/ui/components/badge\"\r\nimport { cn } from \"@workspace/ui/lib/utils\"\r\n\r\nexport type ColoredBadgeColor =\r\n  | \"blue\"\r\n  | \"green\"\r\n  | \"red\"\r\n  | \"yellow\"\r\n  | \"orange\"\r\n  | \"purple\"\r\n  | \"pink\"\r\n  | \"gray\"\r\n\r\nconst COLOR_CLASSES: Record<ColoredBadgeColor, string> = {\r\n  blue: \"bg-blue-600/10 text-blue-500 border-blue-500/20\",\r\n  green: \"bg-green-500/10 text-green-500 border-green-500/20\",\r\n  red: \"bg-red-500/10 text-red-500 border-red-500/20\",\r\n  yellow: \"bg-yellow-500/10 text-yellow-500 border-yellow-500/20\",\r\n  orange: \"bg-orange-500/10 text-orange-500 border-orange-500/20\",\r\n  purple: \"bg-purple-500/10 text-purple-500 border-purple-500/20\",\r\n  pink: \"bg-pink-500/10 text-pink-500 border-pink-500/20\",\r\n  gray: \"bg-gray-500/10 text-gray-500 border-gray-500/20\",\r\n}\r\n\r\nexport interface ColoredBadgeProps {\r\n  color: ColoredBadgeColor\r\n  children: React.ReactNode\r\n}\r\n\r\nexport function ColoredBadge({ color, children }: ColoredBadgeProps) {\r\n  return (\r\n    <Badge variant=\"outline\" className={cn(COLOR_CLASSES[color])}>\r\n      {children}\r\n    </Badge>\r\n  )\r\n}\r\n\r\nexport function ColoredBadgeDemo() {\r\n  return (\r\n    <div className=\"flex flex-wrap items-center gap-2\">\r\n      <ColoredBadge color=\"blue\">Blue</ColoredBadge>\r\n      <ColoredBadge color=\"green\">Green</ColoredBadge>\r\n      <ColoredBadge color=\"red\">Red</ColoredBadge>\r\n      <ColoredBadge color=\"yellow\">Yellow</ColoredBadge>\r\n      <ColoredBadge color=\"orange\">Orange</ColoredBadge>\r\n      <ColoredBadge color=\"purple\">Purple</ColoredBadge>\r\n      <ColoredBadge color=\"pink\">Pink</ColoredBadge>\r\n      <ColoredBadge color=\"gray\">Gray</ColoredBadge>\r\n    </div>\r\n  )\r\n}",
-  "empty": "\"use client\"\n\nimport {\n  Empty as ShadcnEmpty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n} from \"@workspace/ui/components/empty\"\n\nexport {\n  ShadcnEmpty as Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n}\n\nexport function EmptyDemo() {\n  return (\n    <ShadcnEmpty>\n      <EmptyHeader>\n        <EmptyMedia variant=\"icon\">⊙</EmptyMedia>\n        <EmptyTitle>No projects yet</EmptyTitle>\n        <EmptyDescription>\n          Create your first project to start tracking work.\n        </EmptyDescription>\n      </EmptyHeader>\n      <EmptyContent>\n        <button\n          type=\"button\"\n          className=\"bg-primary text-primary-foreground hover:bg-primary/80 inline-flex h-8 items-center rounded-md px-3 text-sm font-medium transition-colors\"\n        >\n          Create project\n        </button>\n      </EmptyContent>\n    </ShadcnEmpty>\n  )\n}\n",
+  "empty": "\"use client\"\r\n\r\nimport {\r\n  Empty as ShadcnEmpty,\r\n  EmptyHeader,\r\n  EmptyTitle,\r\n  EmptyDescription,\r\n  EmptyContent,\r\n  EmptyMedia,\r\n} from \"@workspace/ui/components/empty\"\r\n\r\nexport {\r\n  ShadcnEmpty as Empty,\r\n  EmptyHeader,\r\n  EmptyTitle,\r\n  EmptyDescription,\r\n  EmptyContent,\r\n  EmptyMedia,\r\n}\r\n\r\nexport function EmptyDemo() {\r\n  return (\r\n    <ShadcnEmpty>\r\n      <EmptyHeader>\r\n        <EmptyMedia variant=\"icon\">⊙</EmptyMedia>\r\n        <EmptyTitle>No projects yet</EmptyTitle>\r\n        <EmptyDescription>\r\n          Create your first project to start tracking work.\r\n        </EmptyDescription>\r\n      </EmptyHeader>\r\n      <EmptyContent>\r\n        <button\r\n          type=\"button\"\r\n          className=\"bg-primary text-primary-foreground hover:bg-primary/80 inline-flex h-8 items-center rounded-md px-3 text-sm font-medium transition-colors\"\r\n        >\r\n          Create project\r\n        </button>\r\n      </EmptyContent>\r\n    </ShadcnEmpty>\r\n  )\r\n}\r\n",
   "icon-button": "\"use client\"\n\nimport { Button as ShadcnButton } from \"@workspace/ui/components/button\"\nimport { cn } from \"@workspace/ui/lib/utils\"\n\nexport interface IconButtonProps\n  extends Omit<React.ComponentProps<typeof ShadcnButton>, \"children\" | \"size\"> {\n  \"aria-label\": string\n  children: React.ReactNode\n  size?: \"sm\" | \"md\" | \"lg\"\n}\n\nconst SIZE_CLASSES: Record<NonNullable<IconButtonProps[\"size\"]>, string> = {\n  sm: \"size-8\",\n  md: \"size-10\",\n  lg: \"size-12\",\n}\n\nexport function IconButton({\n  className,\n  size = \"md\",\n  type = \"button\",\n  ...props\n}: IconButtonProps) {\n  return (\n    <ShadcnButton\n      type={type}\n      size=\"icon\"\n      className={cn(SIZE_CLASSES[size], className)}\n      {...props}\n    />\n  )\n}\n\nexport function IconButtonDemo() {\n  return (\n    <div className=\"flex flex-wrap items-center gap-2\">\n      <IconButton aria-label=\"Add\" size=\"sm\">\n        +\n      </IconButton>\n      <IconButton aria-label=\"Edit\" size=\"md\">\n        ✎\n      </IconButton>\n      <IconButton aria-label=\"Delete\" size=\"lg\">\n        ×\n      </IconButton>\n    </div>\n  )\n}",
-  "input": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@workspace/ui/lib/utils\"\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, ...props }, ref) => (\n    <input\n      type={type}\n      ref={ref}\n      data-slot=\"input\"\n      className={cn(\n        \"border-input bg-transparent text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex h-8 w-full min-w-0 rounded-lg border px-2.5 py-1 text-sm transition-colors outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n)\nInput.displayName = \"Input\"\n\nexport function InputDemo() {\n  return (\n    <div className=\"flex w-full max-w-sm flex-col gap-3\">\n      <Input placeholder=\"Default\" />\n      <Input type=\"email\" placeholder=\"Email\" />\n      <Input type=\"file\" />\n      <Input disabled placeholder=\"Disabled\" />\n      <Input\n        aria-invalid=\"true\"\n        placeholder=\"Invalid\"\n        defaultValue=\"wrong-value\"\n      />\n    </div>\n  )\n}\n",
-  "tabs": "\"use client\"\n\nimport {\n  Tabs as ShadcnTabs,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n} from \"@workspace/ui/components/tabs\"\n\nexport {\n  ShadcnTabs as Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n}\n\nexport function TabsDemo() {\n  return (\n    <ShadcnTabs defaultValue=\"overview\" className=\"w-full max-w-md\">\n      <TabsList>\n        <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n        <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n        <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"overview\">Overview panel content.</TabsContent>\n      <TabsContent value=\"analytics\">Analytics panel content.</TabsContent>\n      <TabsContent value=\"settings\">Settings panel content.</TabsContent>\n    </ShadcnTabs>\n  )\n}\n",
-  "textarea": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@workspace/ui/lib/utils\"\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className, ...props }, ref) => (\n    <textarea\n      ref={ref}\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input bg-transparent text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex field-sizing-content min-h-16 w-full min-w-0 rounded-lg border px-2.5 py-2 text-sm transition-colors outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20\",\n        className\n      )}\n      {...props}\n    />\n  )\n)\nTextarea.displayName = \"Textarea\"\n\nexport function TextareaDemo() {\n  return (\n    <div className=\"flex w-full max-w-sm flex-col gap-3\">\n      <Textarea placeholder=\"Default\" />\n      <Textarea disabled placeholder=\"Disabled\" />\n      <Textarea\n        aria-invalid=\"true\"\n        placeholder=\"Invalid\"\n        defaultValue=\"wrong-value\"\n      />\n    </div>\n  )\n}\n"
+  "input": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\n\r\nimport { cn } from \"@workspace/ui/lib/utils\"\r\n\r\nexport interface InputProps\r\n  extends React.InputHTMLAttributes<HTMLInputElement> {}\r\n\r\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\r\n  ({ className, type, ...props }, ref) => (\r\n    <input\r\n      type={type}\r\n      ref={ref}\r\n      data-slot=\"input\"\r\n      className={cn(\r\n        \"border-input bg-transparent text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex h-8 w-full min-w-0 rounded-lg border px-2.5 py-1 text-sm transition-colors outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n)\r\nInput.displayName = \"Input\"\r\n\r\nexport function InputDemo() {\r\n  return (\r\n    <div className=\"flex w-full max-w-sm flex-col gap-3\">\r\n      <Input placeholder=\"Default\" />\r\n      <Input type=\"email\" placeholder=\"Email\" />\r\n      <Input type=\"file\" />\r\n      <Input disabled placeholder=\"Disabled\" />\r\n      <Input\r\n        aria-invalid=\"true\"\r\n        placeholder=\"Invalid\"\r\n        defaultValue=\"wrong-value\"\r\n      />\r\n    </div>\r\n  )\r\n}\r\n",
+  "tabs": "\"use client\"\r\n\r\nimport {\r\n  Tabs as ShadcnTabs,\r\n  TabsList,\r\n  TabsTrigger,\r\n  TabsContent,\r\n} from \"@workspace/ui/components/tabs\"\r\n\r\nexport {\r\n  ShadcnTabs as Tabs,\r\n  TabsList,\r\n  TabsTrigger,\r\n  TabsContent,\r\n}\r\n\r\nexport function TabsDemo() {\r\n  return (\r\n    <ShadcnTabs defaultValue=\"overview\" className=\"w-full max-w-md\">\r\n      <TabsList>\r\n        <TabsTrigger value=\"overview\">Overview</TabsTrigger>\r\n        <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\r\n        <TabsTrigger value=\"settings\">Settings</TabsTrigger>\r\n      </TabsList>\r\n      <TabsContent value=\"overview\">Overview panel content.</TabsContent>\r\n      <TabsContent value=\"analytics\">Analytics panel content.</TabsContent>\r\n      <TabsContent value=\"settings\">Settings panel content.</TabsContent>\r\n    </ShadcnTabs>\r\n  )\r\n}\r\n",
+  "textarea": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\n\r\nimport { cn } from \"@workspace/ui/lib/utils\"\r\n\r\nexport interface TextareaProps\r\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\r\n\r\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\r\n  ({ className, ...props }, ref) => (\r\n    <textarea\r\n      ref={ref}\r\n      data-slot=\"textarea\"\r\n      className={cn(\r\n        \"border-input bg-transparent text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex field-sizing-content min-h-16 w-full min-w-0 rounded-lg border px-2.5 py-2 text-sm transition-colors outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n)\r\nTextarea.displayName = \"Textarea\"\r\n\r\nexport function TextareaDemo() {\r\n  return (\r\n    <div className=\"flex w-full max-w-sm flex-col gap-3\">\r\n      <Textarea placeholder=\"Default\" />\r\n      <Textarea disabled placeholder=\"Disabled\" />\r\n      <Textarea\r\n        aria-invalid=\"true\"\r\n        placeholder=\"Invalid\"\r\n        defaultValue=\"wrong-value\"\r\n      />\r\n    </div>\r\n  )\r\n}\r\n"
+},
+  blocks: {
+  "empty-state": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Empty,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n} from \"@workspace/ui/components/empty\"\nimport { Button as DsButton } from \"@workspace/ui/components/button\"\nimport {\n  ColoredBadge,\n  type ColoredBadgeColor,\n} from \"@workspace/registry/components/colored-badge\"\n\nexport interface EmptyStateProps {\n  title?: string\n  description?: string\n  icon?: React.ReactNode\n  badge?: { label: string; color: ColoredBadgeColor }\n  action?: { label: string; onClick?: () => void }\n  className?: string\n}\n\nexport function EmptyState({\n  title = \"Nothing here yet\",\n  description,\n  icon,\n  badge,\n  action,\n  className,\n}: EmptyStateProps) {\n  const hasHeader = icon !== undefined || badge !== undefined\n  return (\n    <Empty className={className}>\n      {hasHeader ? (\n        <EmptyHeader>\n          {icon && <EmptyMedia variant=\"icon\">{icon}</EmptyMedia>}\n          {badge && (\n            <ColoredBadge color={badge.color}>{badge.label}</ColoredBadge>\n          )}\n          <EmptyTitle>{title}</EmptyTitle>\n          {description && <EmptyDescription>{description}</EmptyDescription>}\n        </EmptyHeader>\n      ) : (\n        <>\n          <EmptyTitle>{title}</EmptyTitle>\n          {description && <EmptyDescription>{description}</EmptyDescription>}\n        </>\n      )}\n      {action && (\n        <EmptyContent>\n          <DsButton onClick={action.onClick}>{action.label}</DsButton>\n        </EmptyContent>\n      )}\n    </Empty>\n  )\n}\n\nexport function EmptyStateBlockDemo() {\n  return (\n    <EmptyState\n      badge={{ label: \"Empty\", color: \"gray\" }}\n      title=\"No projects yet\"\n      description=\"Get started by creating your first project.\"\n      action={{ label: \"Create project\" }}\n    />\n  )\n}"
 },
-  blocks: {},
 } as const
diff --git a/apps/web/public/r/ds-block-empty-state.json b/apps/web/public/r/ds-block-empty-state.json
new file mode 100644
index 0000000..41b8ffd
--- /dev/null
+++ b/apps/web/public/r/ds-block-empty-state.json
@@ -0,0 +1,23 @@
+{
+  "name": "ds-block-empty-state",
+  "type": "registry:block",
+  "title": "Empty State",
+  "description": "DeesseJS composable empty-state block — bundles ds-empty + ds-button + ds-colored-badge. Optional icon, status badge, description, and CTA. First block, single-file, validates the registry:block pipeline.",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "registryDependencies": [
+    "ds-empty",
+    "ds-button",
+    "ds-colored-badge"
+  ],
+  "files": [
+    {
+      "path": "registry/base-nova/ds-block-empty-state/ds-block-empty-state.tsx",
+      "type": "registry:component",
+      "target": "@/components/empty-state.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Empty,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n} from \"@/components/ui/ds-empty\"\nimport { DsButton } from \"@/components/ui/ds-button\"\nimport {\n  DsColoredBadge,\n  type DsColoredBadgeColor,\n} from \"@/components/ui/ds-colored-badge\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface DsEmptyStateProps {\n  title?: string\n  description?: string\n  icon?: React.ReactNode\n  badge?: { label: string; color: DsColoredBadgeColor }\n  action?: { label: string; onClick?: () => void }\n  className?: string\n}\n\nexport function DsEmptyState({\n  title = \"Nothing here yet\",\n  description,\n  icon,\n  badge,\n  action,\n  className,\n}: DsEmptyStateProps) {\n  const hasHeader = icon !== undefined || badge !== undefined\n  return (\n    <Empty className={cn(className)}>\n      {hasHeader ? (\n        <EmptyHeader>\n          {icon && <EmptyMedia variant=\"icon\">{icon}</EmptyMedia>}\n          {badge && (\n            <DsColoredBadge color={badge.color}>{badge.label}</DsColoredBadge>\n          )}\n          <EmptyTitle>{title}</EmptyTitle>\n          {description && <EmptyDescription>{description}</EmptyDescription>}\n        </EmptyHeader>\n      ) : (\n        <>\n          <EmptyTitle>{title}</EmptyTitle>\n          {description && <EmptyDescription>{description}</EmptyDescription>}\n        </>\n      )}\n      {action && (\n        <EmptyContent>\n          <DsButton onClick={action.onClick}>{action.label}</DsButton>\n        </EmptyContent>\n      )}\n    </Empty>\n  )\n}"
+    }
+  ]
+}
diff --git a/apps/web/public/r/ds-breadcrumb.json b/apps/web/public/r/ds-breadcrumb.json
index 4b8f121..05b8cde 100644
--- a/apps/web/public/r/ds-breadcrumb.json
+++ b/apps/web/public/r/ds-breadcrumb.json
@@ -14,7 +14,7 @@
       "path": "registry/base-nova/ds-breadcrumb/ds-breadcrumb.tsx",
       "type": "registry:ui",
       "target": "@ui/ds-breadcrumb.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ChevronRightIcon, MoreHorizontalIcon } from \"lucide-react\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\">) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\"transition-colors hover:text-foreground\", className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"breadcrumb-link\",\n    },\n  })\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"font-normal text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? <ChevronRightIcon />}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"flex size-5 items-center justify-center [&>svg]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <MoreHorizontalIcon />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n"
+      "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { mergeProps } from \"@base-ui/react/merge-props\"\r\nimport { useRender } from \"@base-ui/react/use-render\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { ChevronRightIcon, MoreHorizontalIcon } from \"lucide-react\"\r\n\r\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\r\n  return (\r\n    <nav\r\n      aria-label=\"breadcrumb\"\r\n      data-slot=\"breadcrumb\"\r\n      className={cn(className)}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\r\n  return (\r\n    <ol\r\n      data-slot=\"breadcrumb-list\"\r\n      className={cn(\r\n        \"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\r\n  return (\r\n    <li\r\n      data-slot=\"breadcrumb-item\"\r\n      className={cn(\"inline-flex items-center gap-1\", className)}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction BreadcrumbLink({\r\n  className,\r\n  render,\r\n  ...props\r\n}: useRender.ComponentProps<\"a\">) {\r\n  return useRender({\r\n    defaultTagName: \"a\",\r\n    props: mergeProps<\"a\">(\r\n      {\r\n        className: cn(\"transition-colors hover:text-foreground\", className),\r\n      },\r\n      props\r\n    ),\r\n    render,\r\n    state: {\r\n      slot: \"breadcrumb-link\",\r\n    },\r\n  })\r\n}\r\n\r\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\r\n  return (\r\n    <span\r\n      data-slot=\"breadcrumb-page\"\r\n      role=\"link\"\r\n      aria-disabled=\"true\"\r\n      aria-current=\"page\"\r\n      className={cn(\"font-normal text-foreground\", className)}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction BreadcrumbSeparator({\r\n  children,\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<\"li\">) {\r\n  return (\r\n    <li\r\n      data-slot=\"breadcrumb-separator\"\r\n      role=\"presentation\"\r\n      aria-hidden=\"true\"\r\n      className={cn(\"[&>svg]:size-3.5\", className)}\r\n      {...props}\r\n    >\r\n      {children ?? <ChevronRightIcon />}\r\n    </li>\r\n  )\r\n}\r\n\r\nfunction BreadcrumbEllipsis({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<\"span\">) {\r\n  return (\r\n    <span\r\n      data-slot=\"breadcrumb-ellipsis\"\r\n      role=\"presentation\"\r\n      aria-hidden=\"true\"\r\n      className={cn(\r\n        \"flex size-5 items-center justify-center [&>svg]:size-4\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      <MoreHorizontalIcon />\r\n      <span className=\"sr-only\">More</span>\r\n    </span>\r\n  )\r\n}\r\n\r\nexport {\r\n  Breadcrumb,\r\n  BreadcrumbList,\r\n  BreadcrumbItem,\r\n  BreadcrumbLink,\r\n  BreadcrumbPage,\r\n  BreadcrumbSeparator,\r\n  BreadcrumbEllipsis,\r\n}\r\n"
     }
   ]
 }
diff --git a/apps/web/public/r/ds-empty.json b/apps/web/public/r/ds-empty.json
index 69c4911..fa9c340 100644
--- a/apps/web/public/r/ds-empty.json
+++ b/apps/web/public/r/ds-empty.json
@@ -13,7 +13,7 @@
       "path": "registry/base-nova/ds-empty/ds-empty.tsx",
       "type": "registry:ui",
       "target": "@ui/ds-empty.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        \"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\n        \"font-heading text-sm font-medium tracking-tight\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n}\n"
+      "content": "import * as React from \"react\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot=\"empty\"\r\n      className={cn(\r\n        \"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot=\"empty-header\"\r\n      className={cn(\"flex max-w-sm flex-col items-center gap-2\", className)}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nconst emptyMediaVariants = cva(\r\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default: \"bg-transparent\",\r\n        icon: \"flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\",\r\n    },\r\n  }\r\n)\r\n\r\nfunction EmptyMedia({\r\n  className,\r\n  variant = \"default\",\r\n  ...props\r\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\r\n  return (\r\n    <div\r\n      data-slot=\"empty-icon\"\r\n      data-variant={variant}\r\n      className={cn(emptyMediaVariants({ variant, className }))}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot=\"empty-title\"\r\n      className={cn(\r\n        \"font-heading text-sm font-medium tracking-tight\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction EmptyDescription({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot=\"empty-description\"\r\n      className={cn(\r\n        \"text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot=\"empty-content\"\r\n      className={cn(\r\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nexport {\r\n  Empty,\r\n  EmptyHeader,\r\n  EmptyTitle,\r\n  EmptyDescription,\r\n  EmptyContent,\r\n  EmptyMedia,\r\n}\r\n"
     }
   ]
 }
diff --git a/apps/web/public/r/ds-input.json b/apps/web/public/r/ds-input.json
index 09021aa..70a576c 100644
--- a/apps/web/public/r/ds-input.json
+++ b/apps/web/public/r/ds-input.json
@@ -12,7 +12,7 @@
       "path": "registry/base-nova/ds-input/ds-input.tsx",
       "type": "registry:ui",
       "target": "@ui/ds-input.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface DsInputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nexport const DsInput = React.forwardRef<HTMLInputElement, DsInputProps>(\n  ({ className, type, ...props }, ref) => (\n    <input\n      type={type}\n      ref={ref}\n      data-slot=\"input\"\n      className={cn(\n        \"border-input bg-transparent text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex h-8 w-full min-w-0 rounded-lg border px-2.5 py-1 text-sm transition-colors outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n)\nDsInput.displayName = \"DsInput\"\n\nexport { DsInput }\n"
+      "content": "import * as React from \"react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nexport interface DsInputProps\r\n  extends React.InputHTMLAttributes<HTMLInputElement> {}\r\n\r\nexport const DsInput = React.forwardRef<HTMLInputElement, DsInputProps>(\r\n  ({ className, type, ...props }, ref) => (\r\n    <input\r\n      type={type}\r\n      ref={ref}\r\n      data-slot=\"input\"\r\n      className={cn(\r\n        \"border-input bg-transparent text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex h-8 w-full min-w-0 rounded-lg border px-2.5 py-1 text-sm transition-colors outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n)\r\nDsInput.displayName = \"DsInput\"\r\n"
     }
   ]
 }
diff --git a/apps/web/public/r/ds-tabs.json b/apps/web/public/r/ds-tabs.json
index 5816ad9..85d0582 100644
--- a/apps/web/public/r/ds-tabs.json
+++ b/apps/web/public/r/ds-tabs.json
@@ -14,7 +14,7 @@
       "path": "registry/base-nova/ds-tabs/ds-tabs.tsx",
       "type": "registry:ui",
       "target": "@ui/ds-tabs.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: TabsPrimitive.Root.Props) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-2 data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent\",\n        \"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground\",\n        \"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {\n  return (\n    <TabsPrimitive.Panel\n      data-slot=\"tabs-content\"\n      className={cn(\"flex-1 text-sm outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n"
+      "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nfunction Tabs({\r\n  className,\r\n  orientation = \"horizontal\",\r\n  ...props\r\n}: TabsPrimitive.Root.Props) {\r\n  return (\r\n    <TabsPrimitive.Root\r\n      data-slot=\"tabs\"\r\n      data-orientation={orientation}\r\n      className={cn(\r\n        \"group/tabs flex gap-2 data-horizontal:flex-col\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nconst tabsListVariants = cva(\r\n  \"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default: \"bg-muted\",\r\n        line: \"gap-1 bg-transparent\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\",\r\n    },\r\n  }\r\n)\r\n\r\nfunction TabsList({\r\n  className,\r\n  variant = \"default\",\r\n  ...props\r\n}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {\r\n  return (\r\n    <TabsPrimitive.List\r\n      data-slot=\"tabs-list\"\r\n      data-variant={variant}\r\n      className={cn(tabsListVariants({ variant }), className)}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {\r\n  return (\r\n    <TabsPrimitive.Tab\r\n      data-slot=\"tabs-trigger\"\r\n      className={cn(\r\n        \"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\r\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent\",\r\n        \"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground\",\r\n        \"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {\r\n  return (\r\n    <TabsPrimitive.Panel\r\n      data-slot=\"tabs-content\"\r\n      className={cn(\"flex-1 text-sm outline-none\", className)}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\r\n"
     }
   ]
 }
diff --git a/apps/web/public/r/ds-textarea.json b/apps/web/public/r/ds-textarea.json
index ccb855d..b70bec1 100644
--- a/apps/web/public/r/ds-textarea.json
+++ b/apps/web/public/r/ds-textarea.json
@@ -12,7 +12,7 @@
       "path": "registry/base-nova/ds-textarea/ds-textarea.tsx",
       "type": "registry:ui",
       "target": "@ui/ds-textarea.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface DsTextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\nexport const DsTextarea = React.forwardRef<\n  HTMLTextAreaElement,\n  DsTextareaProps\n>(({ className, ...props }, ref) => (\n  <textarea\n    ref={ref}\n    data-slot=\"textarea\"\n    className={cn(\n      \"border-input bg-transparent text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex field-sizing-content min-h-16 w-full min-w-0 rounded-lg border px-2.5 py-2 text-sm transition-colors outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20\",\n      className\n    )}\n    {...props}\n  />\n))\nDsTextarea.displayName = \"DsTextarea\"\n\nexport { DsTextarea }\n"
+      "content": "import * as React from \"react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nexport interface DsTextareaProps\r\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\r\n\r\nexport const DsTextarea = React.forwardRef<\r\n  HTMLTextAreaElement,\r\n  DsTextareaProps\r\n>(({ className, ...props }, ref) => (\r\n  <textarea\r\n    ref={ref}\r\n    data-slot=\"textarea\"\r\n    className={cn(\r\n      \"border-input bg-transparent text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex field-sizing-content min-h-16 w-full min-w-0 rounded-lg border px-2.5 py-2 text-sm transition-colors outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nDsTextarea.displayName = \"DsTextarea\"\r\n"
     }
   ]
 }
diff --git a/apps/web/public/r/registry.json b/apps/web/public/r/registry.json
index 2440a20..26f712a 100644
--- a/apps/web/public/r/registry.json
+++ b/apps/web/public/r/registry.json
@@ -147,6 +147,28 @@
           "target": "@ui/ds-textarea.tsx"
         }
       ]
+    },
+    {
+      "name": "ds-block-empty-state",
+      "type": "registry:block",
+      "title": "Empty State",
+      "description": "DeesseJS composable empty-state block — bundles ds-empty + ds-button + ds-colored-badge. Optional icon, status badge, description, and CTA. First block, single-file, validates the registry:block pipeline.",
+      "dependencies": [
+        "clsx",
+        "tailwind-merge"
+      ],
+      "registryDependencies": [
+        "ds-empty",
+        "ds-button",
+        "ds-colored-badge"
+      ],
+      "files": [
+        {
+          "path": "registry/base-nova/ds-block-empty-state/ds-block-empty-state.tsx",
+          "type": "registry:component",
+          "target": "@/components/empty-state.tsx"
+        }
+      ]
     }
   ]
 }
diff --git a/apps/web/scripts/contract-test.mjs b/apps/web/scripts/contract-test.mjs
index 049f7a9..b504a1f 100644
--- a/apps/web/scripts/contract-test.mjs
+++ b/apps/web/scripts/contract-test.mjs
@@ -9,6 +9,7 @@ import { spawnSync } from "node:child_process"
 import {
   cpSync,
   mkdirSync,
+  readFileSync,
   rmSync,
   writeFileSync,
 } from "node:fs"
@@ -18,6 +19,7 @@ import { fileURLToPath } from "node:url"
 const HERE = dirname(fileURLToPath(import.meta.url))
 const REPO_ROOT = join(HERE, "..", "..", "..")
 const SOURCE_DIR = join(REPO_ROOT, "registry", "base-nova")
+const REGISTRY_JSON = join(REPO_ROOT, "registry.json")
 const SHIM = join(REPO_ROOT, ".contract-test")
 
 rmSync(SHIM, { recursive: true, force: true })
@@ -40,8 +42,30 @@ writeFileSync(
   ].join("\n")
 )
 
-// Mirror registry sources into the consumer's @/components/ui.
-cpSync(SOURCE_DIR, join(SHIM, "components", "ui"), { recursive: true })
+// Mirror registry sources into the consumer's @/components/ui. We honor each
+// item's `target` field from registry.json — the same renaming the shadcn CLI
+// applies at install time — so blocks that import other ds-* components
+// resolve correctly (`@/components/ui/ds-empty` → `components/ui/ds-empty.tsx`,
+// not `components/ui/ds-empty/ds-empty.tsx`).
+const catalog = JSON.parse(readFileSync(REGISTRY_JSON, "utf-8"))
+
+function resolveTarget(target) {
+  return target
+    .replace(/^@ui\//, "components/ui/")
+    .replace(/^@components\//, "components/")
+    .replace(/^@lib\//, "lib/")
+    .replace(/^@hooks\//, "hooks/")
+    .replace(/^@\//, "./")
+}
+
+for (const item of catalog.items ?? []) {
+  for (const file of item.files ?? []) {
+    const sourcePath = join(REPO_ROOT, file.path)
+    const destPath = join(SHIM, resolveTarget(file.target))
+    mkdirSync(dirname(destPath), { recursive: true })
+    cpSync(sourcePath, destPath)
+  }
+}
 
 writeFileSync(
   join(SHIM, "tsconfig.json"),
diff --git a/docs/registry/audit-2026-07-29.json b/docs/registry/audit-2026-07-29.json
index 3efbabf..8e28155 100644
--- a/docs/registry/audit-2026-07-29.json
+++ b/docs/registry/audit-2026-07-29.json
@@ -177,6 +177,26 @@
           "consumer": "@/lib/utils"
         }
       }
+    },
+    "ds-block-empty-state": {
+      "showcase-category": "block",
+      "consumer-path": "registry/base-nova/ds-block-empty-state/ds-block-empty-state.tsx",
+      "showcase-path": "packages/registry/src/blocks/empty-state/index.tsx",
+      "workspace-source-path": null,
+      "drift-axes": ["showcase-vs-consumer-composition"],
+      "behavioral-divergence-risk": "low",
+      "current-state": "block-composes-ds-empty-button-colored-badge-class-strings-identical-by-construction",
+      "per-check": {
+        "class-strings-showcase-vs-consumer": "strict-pass",
+        "export-name-showcase-vs-consumer": "strict-pass",
+        "composed-imports-showcase-vs-consumer": "strict-pass"
+      },
+      "allowed-divergences": {
+        "import-path-showcase-vs-consumer": {
+          "showcase": "@workspace/ui/components/empty + @workspace/ui/components/button + @workspace/registry/components/colored-badge",
+          "consumer": "@/components/ui/ds-empty + @/components/ui/ds-button + @/components/ui/ds-colored-badge + @/lib/utils"
+        }
+      }
     }
   }
 }
diff --git a/packages/registry/src/blocks/empty-state/index.tsx b/packages/registry/src/blocks/empty-state/index.tsx
new file mode 100644
index 0000000..68c7bd5
--- /dev/null
+++ b/packages/registry/src/blocks/empty-state/index.tsx
@@ -0,0 +1,72 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  Empty,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+} from "@workspace/ui/components/empty"
+import { Button as DsButton } from "@workspace/ui/components/button"
+import {
+  ColoredBadge,
+  type ColoredBadgeColor,
+} from "@workspace/registry/components/colored-badge"
+
+export interface EmptyStateProps {
+  title?: string
+  description?: string
+  icon?: React.ReactNode
+  badge?: { label: string; color: ColoredBadgeColor }
+  action?: { label: string; onClick?: () => void }
+  className?: string
+}
+
+export function EmptyState({
+  title = "Nothing here yet",
+  description,
+  icon,
+  badge,
+  action,
+  className,
+}: EmptyStateProps) {
+  const hasHeader = icon !== undefined || badge !== undefined
+  return (
+    <Empty className={className}>
+      {hasHeader ? (
+        <EmptyHeader>
+          {icon && <EmptyMedia variant="icon">{icon}</EmptyMedia>}
+          {badge && (
+            <ColoredBadge color={badge.color}>{badge.label}</ColoredBadge>
+          )}
+          <EmptyTitle>{title}</EmptyTitle>
+          {description && <EmptyDescription>{description}</EmptyDescription>}
+        </EmptyHeader>
+      ) : (
+        <>
+          <EmptyTitle>{title}</EmptyTitle>
+          {description && <EmptyDescription>{description}</EmptyDescription>}
+        </>
+      )}
+      {action && (
+        <EmptyContent>
+          <DsButton onClick={action.onClick}>{action.label}</DsButton>
+        </EmptyContent>
+      )}
+    </Empty>
+  )
+}
+
+export function EmptyStateBlockDemo() {
+  return (
+    <EmptyState
+      badge={{ label: "Empty", color: "gray" }}
+      title="No projects yet"
+      description="Get started by creating your first project."
+      action={{ label: "Create project" }}
+    />
+  )
+}
\ No newline at end of file
diff --git a/packages/registry/src/blocks/empty-state/meta.ts b/packages/registry/src/blocks/empty-state/meta.ts
new file mode 100644
index 0000000..82317ac
--- /dev/null
+++ b/packages/registry/src/blocks/empty-state/meta.ts
@@ -0,0 +1,9 @@
+import type { BlockMeta } from "../../types.ts"
+
+export const meta: BlockMeta = {
+  id: "empty-state",
+  name: "Empty State",
+  description:
+    "Composable empty-state block bundling ds-empty + ds-button + ds-colored-badge. Optional icon, status badge, description, and CTA.",
+  category: "onboarding",
+}
\ No newline at end of file
diff --git a/packages/registry/tsconfig.json b/packages/registry/tsconfig.json
index b3b8437..e89aadc 100644
--- a/packages/registry/tsconfig.json
+++ b/packages/registry/tsconfig.json
@@ -1,7 +1,8 @@
 {
   "extends": "@workspace/typescript-config/react-library.json",
   "compilerOptions": {
-    "outDir": "dist"
+    "outDir": "dist",
+    "rootDir": "./src"
   },
   "include": ["src"],
   "exclude": ["dist"]
diff --git a/registry.json b/registry.json
index 2440a20..26f712a 100644
--- a/registry.json
+++ b/registry.json
@@ -147,6 +147,28 @@
           "target": "@ui/ds-textarea.tsx"
         }
       ]
+    },
+    {
+      "name": "ds-block-empty-state",
+      "type": "registry:block",
+      "title": "Empty State",
+      "description": "DeesseJS composable empty-state block — bundles ds-empty + ds-button + ds-colored-badge. Optional icon, status badge, description, and CTA. First block, single-file, validates the registry:block pipeline.",
+      "dependencies": [
+        "clsx",
+        "tailwind-merge"
+      ],
+      "registryDependencies": [
+        "ds-empty",
+        "ds-button",
+        "ds-colored-badge"
+      ],
+      "files": [
+        {
+          "path": "registry/base-nova/ds-block-empty-state/ds-block-empty-state.tsx",
+          "type": "registry:component",
+          "target": "@/components/empty-state.tsx"
+        }
+      ]
     }
   ]
 }
diff --git a/registry/base-nova/ds-block-empty-state/ds-block-empty-state.tsx b/registry/base-nova/ds-block-empty-state/ds-block-empty-state.tsx
new file mode 100644
index 0000000..e85a5fc
--- /dev/null
+++ b/registry/base-nova/ds-block-empty-state/ds-block-empty-state.tsx
@@ -0,0 +1,62 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  Empty,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+} from "@/components/ui/ds-empty"
+import { DsButton } from "@/components/ui/ds-button"
+import {
+  DsColoredBadge,
+  type DsColoredBadgeColor,
+} from "@/components/ui/ds-colored-badge"
+import { cn } from "@/lib/utils"
+
+export interface DsEmptyStateProps {
+  title?: string
+  description?: string
+  icon?: React.ReactNode
+  badge?: { label: string; color: DsColoredBadgeColor }
+  action?: { label: string; onClick?: () => void }
+  className?: string
+}
+
+export function DsEmptyState({
+  title = "Nothing here yet",
+  description,
+  icon,
+  badge,
+  action,
+  className,
+}: DsEmptyStateProps) {
+  const hasHeader = icon !== undefined || badge !== undefined
+  return (
+    <Empty className={cn(className)}>
+      {hasHeader ? (
+        <EmptyHeader>
+          {icon && <EmptyMedia variant="icon">{icon}</EmptyMedia>}
+          {badge && (
+            <DsColoredBadge color={badge.color}>{badge.label}</DsColoredBadge>
+          )}
+          <EmptyTitle>{title}</EmptyTitle>
+          {description && <EmptyDescription>{description}</EmptyDescription>}
+        </EmptyHeader>
+      ) : (
+        <>
+          <EmptyTitle>{title}</EmptyTitle>
+          {description && <EmptyDescription>{description}</EmptyDescription>}
+        </>
+      )}
+      {action && (
+        <EmptyContent>
+          <DsButton onClick={action.onClick}>{action.label}</DsButton>
+        </EmptyContent>
+      )}
+    </Empty>
+  )
+}
\ No newline at end of file