From 5c0a97f1ff070bb6eca2191250c243a1ae379e69 Mon Sep 17 00:00:00 2001
From: David Anthony <dba@hey.com>
Date: Wed, 11 Feb 2026 11:09:06 -0800
Subject: [PATCH 1/8] feat(apollo-wind): add Getting Started section with
 templates, theming, and AI prototyping
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add Maestro, Delegate, Admin, and Flow template systems with multiple
  page variants (Landing, Dashboard, Settings, Data Management, Properties)
- Implement dual-theme architecture: Future (dark/light) and Legacy
  (dark/light) with CSS custom properties and shadcn bridge pattern
- Add custom components: MaestroHeader, FlowPanel, PropertiesSimple,
  PropertiesExpanded, Canvas, ChatComposer, and more
- Create Prototyping documentation page with 5 tabs: Overview, Use Cases,
  Use Figma, Use AI, and Best Practices
- Add apollo-ai-context.md — portable AI context file for consistent
  prototyping with LLMs (components, tokens, patterns, rules)
- Install and configure @storybook/addon-mcp for live component metadata
  exposure to AI coding agents
- Install and configure @storybook/addon-a11y for accessibility auditing
- Hide addons panel by default, remove background switcher from toolbar
- Reorganize Storybook sidebar: flatten Templates (remove Future folder),
  rename Current to Xrchive, rename Theme/Current to Theme/Legacy
- Move legacy-theme.css to foundation/Future/ alongside future-theme.css
- Upgrade all component stories to use Storybook categories
- Delete deprecated example files and consolidate into new template system

Co-authored-by: Cursor <cursoragent@cursor.com>

feat(apollo-wind): add Getting Started section with templates, theming, and AI prototyping

- Add Getting Started landing page and AI prototyping documentation
- Implement Future theme system (dark/light) with CSS custom properties
- Add gradient tokens (6 theme-aware gradients) to foundation
- Create shared FutureTheme type for consistent theme prop typing
- Add Onboarding, Agentic Process, and Empty & Errors template sections
- Implement Flow template responsive panel behavior and properties panels
- Add global theme sync for Radix portal components via preview decorator
- Add aria-label and type="button" to all icon-only buttons for accessibility
- Remove unused imports, functions, and dead code across story files
- Delete legacy Xrchive templates (New Project, VSCode)

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/apollo-wind/.storybook/main.ts       |   14 +-
 packages/apollo-wind/.storybook/manager.js    |    2 +-
 packages/apollo-wind/.storybook/manager.ts    |    3 +-
 .../apollo-wind/.storybook/preview-head.html  |    8 +
 packages/apollo-wind/.storybook/preview.tsx   |   95 +-
 packages/apollo-wind/apollo-ai-context.md     |  242 +++
 packages/apollo-wind/package.json             |    2 +
 .../src/components/custom/canvas.stories.tsx  |   25 +
 .../src/components/custom/canvas.tsx          |   36 +
 .../custom/chat-composer.stories.tsx          |   21 +
 .../src/components/custom/chat-composer.tsx   |  100 +
 .../custom/chat-first-experience.stories.tsx  |   29 +
 .../custom/chat-first-experience.tsx          |   86 +
 .../chat-prompt-suggestions.stories.tsx       |   28 +
 .../custom/chat-prompt-suggestions.tsx        |   50 +
 .../custom/chat-steps-view.stories.tsx        |   57 +
 .../src/components/custom/chat-steps-view.tsx |  288 +++
 .../components/custom/flow-node.stories.tsx   |   45 +
 .../src/components/custom/flow-node.tsx       |   66 +
 .../custom/flow-properties-bar.stories.tsx    |   21 +
 .../components/custom/flow-properties-bar.tsx |   92 +
 .../flow-properties-expanded.stories.tsx      |   28 +
 .../custom/flow-properties-expanded.tsx       |  289 +++
 .../custom/flow-properties-simple.tsx         |  411 ++++
 .../custom/global-header.stories.tsx          |   85 +
 .../src/components/custom/global-header.tsx   |  382 ++++
 .../custom/grid-maestro.stories.tsx           |   35 +
 .../src/components/custom/grid-maestro.tsx    |   56 +
 .../custom/panel-delegate.stories.tsx         |   74 +
 .../src/components/custom/panel-delegate.tsx  |  343 ++++
 .../components/custom/panel-flow.stories.tsx  |   50 +
 .../src/components/custom/panel-flow.tsx      |  288 +++
 .../custom/panel-maestro.stories.tsx          |   58 +
 .../src/components/custom/panel-maestro.tsx   |   92 +
 .../custom/toolbar-canvas.stories.tsx         |   21 +
 .../src/components/custom/toolbar-canvas.tsx  |  125 ++
 .../custom/toolbar-view.stories.tsx           |   21 +
 .../src/components/custom/toolbar-view.tsx    |  120 ++
 .../src/components/ui/accordion.stories.tsx   |    2 +-
 .../components/ui/alert-dialog.stories.tsx    |    2 +-
 .../src/components/ui/alert.stories.tsx       |    2 +-
 .../components/ui/aspect-ratio.stories.tsx    |    2 +-
 .../src/components/ui/badge.stories.tsx       |    2 +-
 .../src/components/ui/breadcrumb.stories.tsx  |    2 +-
 .../components/ui/button-group.stories.tsx    |    2 +-
 .../src/components/ui/button.stories.tsx      |    2 +-
 .../src/components/ui/calendar.stories.tsx    |    2 +-
 .../src/components/ui/card.stories.tsx        |    2 +-
 .../src/components/ui/checkbox.stories.tsx    |    2 +-
 .../src/components/ui/collapsible.stories.tsx |    2 +-
 .../src/components/ui/combobox.stories.tsx    |    2 +-
 .../src/components/ui/command.stories.tsx     |    2 +-
 .../ui/component-gallery.stories.tsx          |    2 +-
 .../components/ui/context-menu.stories.tsx    |    2 +-
 .../src/components/ui/data-table.stories.tsx  |    2 +-
 .../src/components/ui/date-picker.stories.tsx |    2 +-
 .../components/ui/datetime-picker.stories.tsx |    2 +-
 .../src/components/ui/dialog.stories.tsx      |    2 +-
 .../src/components/ui/drawer.stories.tsx      |    2 +-
 .../components/ui/dropdown-menu.stories.tsx   |    2 +-
 .../src/components/ui/empty-state.stories.tsx |    2 +-
 .../src/components/ui/file-upload.stories.tsx |    2 +-
 .../src/components/ui/hover-card.stories.tsx  |    2 +-
 .../apollo-wind/src/components/ui/index.ts    |    1 +
 .../src/components/ui/input.stories.tsx       |    2 +-
 .../src/components/ui/label.stories.tsx       |    2 +-
 .../components/ui/layout/column.stories.tsx   |    2 +-
 .../src/components/ui/layout/grid.stories.tsx |    2 +-
 .../src/components/ui/layout/row.stories.tsx  |    2 +-
 .../src/components/ui/menubar.stories.tsx     |    2 +-
 .../components/ui/multi-select.stories.tsx    |    2 +-
 .../components/ui/navigation-menu.stories.tsx |    2 +-
 .../src/components/ui/pagination.stories.tsx  |    2 +-
 .../src/components/ui/popover.stories.tsx     |    2 +-
 .../src/components/ui/progress.stories.tsx    |    2 +-
 .../src/components/ui/radio-group.stories.tsx |    2 +-
 .../src/components/ui/resizable.stories.tsx   |    2 +-
 .../src/components/ui/scroll-area.stories.tsx |    2 +-
 .../src/components/ui/search.stories.tsx      |    2 +-
 .../src/components/ui/select.stories.tsx      |    2 +-
 .../src/components/ui/separator.stories.tsx   |    2 +-
 .../src/components/ui/sheet.stories.tsx       |    2 +-
 .../src/components/ui/skeleton.stories.tsx    |    2 +-
 .../src/components/ui/slider.stories.tsx      |    2 +-
 .../src/components/ui/sonner.stories.tsx      |    2 +-
 .../src/components/ui/spinner.stories.tsx     |    2 +-
 .../src/components/ui/stats-card.stories.tsx  |    2 +-
 .../src/components/ui/stepper.stories.tsx     |    2 +-
 .../src/components/ui/switch.stories.tsx      |    2 +-
 .../src/components/ui/table.stories.tsx       |    2 +-
 .../src/components/ui/tabs.stories.tsx        |    2 +-
 .../src/components/ui/textarea.stories.tsx    |    2 +-
 .../components/ui/toggle-group.stories.tsx    |    2 +-
 .../src/components/ui/toggle.stories.tsx      |    2 +-
 .../src/components/ui/tooltip.stories.tsx     |    2 +-
 .../src/components/ui/viewport-guard.tsx      |   92 +
 .../examples/admin-layout-example.stories.tsx |  305 ---
 .../src/examples/admin-layout-example.tsx     |  483 -----
 .../examples/app-shell-example.stories.tsx    |   15 -
 .../src/examples/app-shell-example.tsx        |  362 ----
 .../examples/dashboard-example.stories.tsx    |   15 -
 .../src/examples/dashboard-example.tsx        |  388 ----
 .../data-management-example.stories.tsx       |   15 -
 .../src/examples/data-management-example.tsx  |  399 ----
 .../flow-editor-layout-example.stories.tsx    |  255 ---
 .../examples/flow-editor-layout-example.tsx   |  285 ---
 .../examples/flow-start-example.stories.tsx   |  120 --
 .../src/examples/flow-start-example.tsx       |  390 ----
 .../examples/form-builder-example.stories.tsx |   15 -
 .../examples/new-project-example.stories.tsx  |  137 --
 .../src/examples/new-project-example.tsx      |  400 ----
 .../src/examples/settings-example.stories.tsx |   15 -
 .../src/examples/settings-example.tsx         |  461 -----
 .../src/examples/vscode-example.stories.tsx   |  295 ---
 .../src/examples/vscode-example.tsx           |  418 ----
 .../src/foundation/Future/colors.stories.tsx  |  171 ++
 .../src/foundation/Future/colors.ts           |  162 ++
 .../src/foundation/Future/future-theme.css    |  288 +++
 .../src/foundation/Future/icons.stories.tsx   |   25 +
 .../src/foundation/Future/legacy-theme.css    |  261 +++
 .../src/foundation/Future/radius.stories.tsx  |   75 +
 .../src/foundation/Future/radius.ts           |   38 +
 .../foundation/Future/responsive.stories.tsx  |  116 ++
 .../src/foundation/Future/responsive.ts       |   50 +
 .../src/foundation/Future/shadows.stories.tsx |   75 +
 .../src/foundation/Future/shadows.ts          |   35 +
 .../src/foundation/Future/spacing.stories.tsx |  144 ++
 .../src/foundation/Future/spacing.ts          |   91 +
 .../src/foundation/Future/strokes.stories.tsx |  118 ++
 .../src/foundation/Future/strokes.ts          |   60 +
 .../src/foundation/Future/theme.stories.tsx   |  610 ++++++
 .../src/foundation/Future/types.ts            |   20 +
 .../foundation/Future/typography.stories.tsx  |  196 ++
 .../src/foundation/Future/typography.ts       |  113 ++
 .../{ => Legacy}/colors.stories.tsx           |    2 +-
 .../foundation/{ => Legacy}/icons.stories.tsx |    2 +-
 .../{ => Legacy}/spacing.stories.tsx          |    2 +-
 .../{ => Legacy}/typography.stories.tsx       |    2 +-
 .../src/foundation/colors-future.stories.tsx  |   15 -
 .../src/foundation/icons-future.stories.tsx   |   15 -
 .../src/foundation/spacing-future.stories.tsx |   15 -
 .../foundation/typography-future.stories.tsx  |   15 -
 .../getting-started.stories.tsx               |  187 +-
 .../getting-started/prototyping.stories.tsx   |  716 ++++++-
 packages/apollo-wind/src/styles/tailwind.css  |    2 +
 .../src/templates/Admin/admin.stories.tsx     | 1764 +++++++++++++++++
 .../templates/Delegate/delegate.stories.tsx   |  404 ++++
 .../templates/Delegate/template-delegate.tsx  |   97 +
 .../EmptyErrors/empty-errors.stories.tsx      |  135 ++
 .../src/templates/Flow/flow.stories.tsx       |  170 ++
 .../src/templates/Flow/template-flow.tsx      |  263 +++
 .../form-builder-example.stories.tsx          |    0
 .../Forms}/form-builder-example.tsx           |    0
 .../src/templates/Maestro/maestro.stories.tsx |  877 ++++++++
 .../templates/Maestro/template-maestro.tsx    |  170 ++
 .../src/templates/More/more.stories.tsx       |  503 +++++
 .../admin-layout-example.stories.tsx          |  305 ---
 .../src/templates/admin-layout-example.tsx    |  483 -----
 .../templates/app-shell-example.stories.tsx   |   15 -
 .../src/templates/app-shell-example.tsx       |  362 ----
 .../templates/dashboard-example.stories.tsx   |   15 -
 .../src/templates/dashboard-example.tsx       |  388 ----
 .../data-management-example.stories.tsx       |   15 -
 .../src/templates/data-management-example.tsx |  399 ----
 .../src/templates/delegate.stories.tsx        |   15 -
 .../flow-editor-layout-example.stories.tsx    |  255 ---
 .../templates/flow-editor-layout-example.tsx  |  285 ---
 .../templates/flow-start-example.stories.tsx  |  120 --
 .../src/templates/flow-start-example.tsx      |  390 ----
 .../src/templates/flow.stories.tsx            |   15 -
 .../src/templates/form-builder-example.tsx    |  399 ----
 .../templates/new-project-example.stories.tsx |  137 --
 .../src/templates/new-project-example.tsx     |  400 ----
 .../templates/settings-example.stories.tsx    |   15 -
 .../src/templates/settings-example.tsx        |  461 -----
 .../src/templates/vscode-example.stories.tsx  |  295 ---
 .../src/templates/vscode-example.tsx          |  418 ----
 packages/apollo-wind/tests/setup.ts           |    3 +
 pnpm-lock.yaml                                |  133 ++
 179 files changed, 11827 insertions(+), 10266 deletions(-)
 create mode 100644 packages/apollo-wind/apollo-ai-context.md
 create mode 100644 packages/apollo-wind/src/components/custom/canvas.stories.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/canvas.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/chat-composer.stories.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/chat-composer.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/chat-first-experience.stories.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/chat-first-experience.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/chat-prompt-suggestions.stories.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/chat-prompt-suggestions.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/chat-steps-view.stories.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/chat-steps-view.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/flow-node.stories.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/flow-node.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/flow-properties-bar.stories.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/flow-properties-bar.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/flow-properties-expanded.stories.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/flow-properties-expanded.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/flow-properties-simple.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/global-header.stories.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/global-header.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/grid-maestro.stories.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/grid-maestro.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/panel-delegate.stories.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/panel-delegate.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/panel-flow.stories.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/panel-flow.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/panel-maestro.stories.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/panel-maestro.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/toolbar-canvas.stories.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/toolbar-canvas.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/toolbar-view.stories.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/toolbar-view.tsx
 create mode 100644 packages/apollo-wind/src/components/ui/viewport-guard.tsx
 delete mode 100644 packages/apollo-wind/src/examples/admin-layout-example.stories.tsx
 delete mode 100644 packages/apollo-wind/src/examples/admin-layout-example.tsx
 delete mode 100644 packages/apollo-wind/src/examples/app-shell-example.stories.tsx
 delete mode 100644 packages/apollo-wind/src/examples/app-shell-example.tsx
 delete mode 100644 packages/apollo-wind/src/examples/dashboard-example.stories.tsx
 delete mode 100644 packages/apollo-wind/src/examples/dashboard-example.tsx
 delete mode 100644 packages/apollo-wind/src/examples/data-management-example.stories.tsx
 delete mode 100644 packages/apollo-wind/src/examples/data-management-example.tsx
 delete mode 100644 packages/apollo-wind/src/examples/flow-editor-layout-example.stories.tsx
 delete mode 100644 packages/apollo-wind/src/examples/flow-editor-layout-example.tsx
 delete mode 100644 packages/apollo-wind/src/examples/flow-start-example.stories.tsx
 delete mode 100644 packages/apollo-wind/src/examples/flow-start-example.tsx
 delete mode 100644 packages/apollo-wind/src/examples/form-builder-example.stories.tsx
 delete mode 100644 packages/apollo-wind/src/examples/new-project-example.stories.tsx
 delete mode 100644 packages/apollo-wind/src/examples/new-project-example.tsx
 delete mode 100644 packages/apollo-wind/src/examples/settings-example.stories.tsx
 delete mode 100644 packages/apollo-wind/src/examples/settings-example.tsx
 delete mode 100644 packages/apollo-wind/src/examples/vscode-example.stories.tsx
 delete mode 100644 packages/apollo-wind/src/examples/vscode-example.tsx
 create mode 100644 packages/apollo-wind/src/foundation/Future/colors.stories.tsx
 create mode 100644 packages/apollo-wind/src/foundation/Future/colors.ts
 create mode 100644 packages/apollo-wind/src/foundation/Future/future-theme.css
 create mode 100644 packages/apollo-wind/src/foundation/Future/icons.stories.tsx
 create mode 100644 packages/apollo-wind/src/foundation/Future/legacy-theme.css
 create mode 100644 packages/apollo-wind/src/foundation/Future/radius.stories.tsx
 create mode 100644 packages/apollo-wind/src/foundation/Future/radius.ts
 create mode 100644 packages/apollo-wind/src/foundation/Future/responsive.stories.tsx
 create mode 100644 packages/apollo-wind/src/foundation/Future/responsive.ts
 create mode 100644 packages/apollo-wind/src/foundation/Future/shadows.stories.tsx
 create mode 100644 packages/apollo-wind/src/foundation/Future/shadows.ts
 create mode 100644 packages/apollo-wind/src/foundation/Future/spacing.stories.tsx
 create mode 100644 packages/apollo-wind/src/foundation/Future/spacing.ts
 create mode 100644 packages/apollo-wind/src/foundation/Future/strokes.stories.tsx
 create mode 100644 packages/apollo-wind/src/foundation/Future/strokes.ts
 create mode 100644 packages/apollo-wind/src/foundation/Future/theme.stories.tsx
 create mode 100644 packages/apollo-wind/src/foundation/Future/types.ts
 create mode 100644 packages/apollo-wind/src/foundation/Future/typography.stories.tsx
 create mode 100644 packages/apollo-wind/src/foundation/Future/typography.ts
 rename packages/apollo-wind/src/foundation/{ => Legacy}/colors.stories.tsx (99%)
 rename packages/apollo-wind/src/foundation/{ => Legacy}/icons.stories.tsx (99%)
 rename packages/apollo-wind/src/foundation/{ => Legacy}/spacing.stories.tsx (99%)
 rename packages/apollo-wind/src/foundation/{ => Legacy}/typography.stories.tsx (99%)
 delete mode 100644 packages/apollo-wind/src/foundation/colors-future.stories.tsx
 delete mode 100644 packages/apollo-wind/src/foundation/icons-future.stories.tsx
 delete mode 100644 packages/apollo-wind/src/foundation/spacing-future.stories.tsx
 delete mode 100644 packages/apollo-wind/src/foundation/typography-future.stories.tsx
 create mode 100644 packages/apollo-wind/src/templates/Admin/admin.stories.tsx
 create mode 100644 packages/apollo-wind/src/templates/Delegate/delegate.stories.tsx
 create mode 100644 packages/apollo-wind/src/templates/Delegate/template-delegate.tsx
 create mode 100644 packages/apollo-wind/src/templates/EmptyErrors/empty-errors.stories.tsx
 create mode 100644 packages/apollo-wind/src/templates/Flow/flow.stories.tsx
 create mode 100644 packages/apollo-wind/src/templates/Flow/template-flow.tsx
 rename packages/apollo-wind/src/templates/{ => Forms}/form-builder-example.stories.tsx (100%)
 rename packages/apollo-wind/src/{examples => templates/Forms}/form-builder-example.tsx (100%)
 create mode 100644 packages/apollo-wind/src/templates/Maestro/maestro.stories.tsx
 create mode 100644 packages/apollo-wind/src/templates/Maestro/template-maestro.tsx
 create mode 100644 packages/apollo-wind/src/templates/More/more.stories.tsx
 delete mode 100644 packages/apollo-wind/src/templates/admin-layout-example.stories.tsx
 delete mode 100644 packages/apollo-wind/src/templates/admin-layout-example.tsx
 delete mode 100644 packages/apollo-wind/src/templates/app-shell-example.stories.tsx
 delete mode 100644 packages/apollo-wind/src/templates/app-shell-example.tsx
 delete mode 100644 packages/apollo-wind/src/templates/dashboard-example.stories.tsx
 delete mode 100644 packages/apollo-wind/src/templates/dashboard-example.tsx
 delete mode 100644 packages/apollo-wind/src/templates/data-management-example.stories.tsx
 delete mode 100644 packages/apollo-wind/src/templates/data-management-example.tsx
 delete mode 100644 packages/apollo-wind/src/templates/delegate.stories.tsx
 delete mode 100644 packages/apollo-wind/src/templates/flow-editor-layout-example.stories.tsx
 delete mode 100644 packages/apollo-wind/src/templates/flow-editor-layout-example.tsx
 delete mode 100644 packages/apollo-wind/src/templates/flow-start-example.stories.tsx
 delete mode 100644 packages/apollo-wind/src/templates/flow-start-example.tsx
 delete mode 100644 packages/apollo-wind/src/templates/flow.stories.tsx
 delete mode 100644 packages/apollo-wind/src/templates/form-builder-example.tsx
 delete mode 100644 packages/apollo-wind/src/templates/new-project-example.stories.tsx
 delete mode 100644 packages/apollo-wind/src/templates/new-project-example.tsx
 delete mode 100644 packages/apollo-wind/src/templates/settings-example.stories.tsx
 delete mode 100644 packages/apollo-wind/src/templates/settings-example.tsx
 delete mode 100644 packages/apollo-wind/src/templates/vscode-example.stories.tsx
 delete mode 100644 packages/apollo-wind/src/templates/vscode-example.tsx

diff --git a/packages/apollo-wind/.storybook/main.ts b/packages/apollo-wind/.storybook/main.ts
index 572e831ba..66aeeda74 100644
--- a/packages/apollo-wind/.storybook/main.ts
+++ b/packages/apollo-wind/.storybook/main.ts
@@ -34,7 +34,19 @@ if (isDev) {
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-docs'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-docs',
+    '@storybook/addon-a11y',
+    '@storybook/addon-mcp',
+  ],
+
+  // Enable the component manifest so Storybook MCP can expose
+  // machine-readable component metadata (APIs, props, usage examples)
+  // to AI agents and coding tools.
+  features: {
+    experimentalComponentsManifest: true,
+  },
 
   // Serve only public/ (e.g. ui-path.svg for sidebar logo); single dir to avoid route conflicts
   staticDirs: ['../public'],
diff --git a/packages/apollo-wind/.storybook/manager.js b/packages/apollo-wind/.storybook/manager.js
index d1ff96415..15b1d8bfe 100644
--- a/packages/apollo-wind/.storybook/manager.js
+++ b/packages/apollo-wind/.storybook/manager.js
@@ -4,6 +4,6 @@ import theme from './theme';
 addons.setConfig({
   theme,
   sidebar: {
-    collapsedRoots: ['theme', 'forms'],
+    collapsedRoots: ['forms'],
   },
 });
diff --git a/packages/apollo-wind/.storybook/manager.ts b/packages/apollo-wind/.storybook/manager.ts
index d1ff96415..6b3749784 100644
--- a/packages/apollo-wind/.storybook/manager.ts
+++ b/packages/apollo-wind/.storybook/manager.ts
@@ -3,7 +3,8 @@ import theme from './theme';
 
 addons.setConfig({
   theme,
+  showPanel: false,
   sidebar: {
-    collapsedRoots: ['theme', 'forms'],
+    collapsedRoots: ['components', 'forms'],
   },
 });
diff --git a/packages/apollo-wind/.storybook/preview-head.html b/packages/apollo-wind/.storybook/preview-head.html
index 8180973ce..23bd16877 100644
--- a/packages/apollo-wind/.storybook/preview-head.html
+++ b/packages/apollo-wind/.storybook/preview-head.html
@@ -1,3 +1,11 @@
+<!-- Inter + JetBrains Mono fonts for Future design system -->
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap"
+  rel="stylesheet"
+/>
+
 <style>
   /* Remove default Storybook padding */
   #storybook-root {
diff --git a/packages/apollo-wind/.storybook/preview.tsx b/packages/apollo-wind/.storybook/preview.tsx
index ea94f06e0..31dfd66fd 100644
--- a/packages/apollo-wind/.storybook/preview.tsx
+++ b/packages/apollo-wind/.storybook/preview.tsx
@@ -18,13 +18,46 @@ if (isDev) {
   }
 }
 
+// Custom viewports: named by screen size with widths matching common breakpoints.
+// "Reset viewport" is provided by Storybook; these options replace the default device list.
+const customViewports = {
+  'screen-xl': {
+    name: 'Screen XL 1920',
+    styles: { width: '1920px', height: '1080px' },
+    type: 'desktop',
+  },
+  'screen-l': {
+    name: 'Screen L 1440',
+    styles: { width: '1440px', height: '900px' },
+    type: 'desktop',
+  },
+  'screen-m': {
+    name: 'Screen M 1024',
+    styles: { width: '1024px', height: '768px' },
+    type: 'tablet',
+  },
+  'screen-s': {
+    name: 'Screen S 768',
+    styles: { width: '768px', height: '1024px' },
+    type: 'tablet',
+  },
+  'screen-xs': {
+    name: 'Screen XS 540',
+    styles: { width: '540px', height: '900px' },
+    type: 'mobile',
+  },
+};
+
 const preview: Preview = {
   initialGlobals: {
-    theme: 'light',
-    themeVariant: 'default',
+    futureTheme: 'dark',
     reactScan: 'off',
   },
   parameters: {
+    backgrounds: { disable: true },
+    viewport: {
+      options: customViewports,
+    },
     options: {
       storySort: {
         order: [
@@ -54,16 +87,16 @@ const preview: Preview = {
     },
   },
   globalTypes: {
-    theme: {
-      description: 'Global theme for components',
+    futureTheme: {
+      description: 'Toggle design language theme',
       toolbar: {
         title: 'Theme',
-        icon: 'circlehollow',
+        icon: 'paintbrush',
         items: [
-          { value: 'light', icon: 'sun', title: 'Light' },
-          { value: 'dark', icon: 'moon', title: 'Dark' },
-          { value: 'light-hc', icon: 'sun', title: 'Light High Contrast' },
-          { value: 'dark-hc', icon: 'moon', title: 'Dark High Contrast' },
+          { value: 'dark', title: 'Future: Dark' },
+          { value: 'light', title: 'Future: Light' },
+          { value: 'legacy-dark', title: 'Legacy: Dark' },
+          { value: 'legacy-light', title: 'Legacy: Light' },
         ],
         dynamicTitle: true,
       },
@@ -85,8 +118,32 @@ const preview: Preview = {
   },
   decorators: [
     (Story, context) => {
-      const theme = context.globals.theme || 'light';
       const reactScanEnabled = context.globals.reactScan === 'on';
+      const futureTheme: string = context.globals.futureTheme ?? 'dark';
+
+      // Map the toolbar value to the CSS class that activates the correct
+      // set of CSS custom properties (surfaces, foregrounds, borders, etc.).
+      const themeClass =
+        futureTheme === 'legacy-dark'
+          ? 'legacy-dark'
+          : futureTheme === 'legacy-light'
+            ? 'legacy-light'
+            : futureTheme === 'light'
+              ? 'future-light'
+              : 'future-dark';
+
+      // Apply the theme class to <html> so every story — including standalone
+      // component stories that don't manage their own theme — inherits the
+      // correct CSS variables (shadcn bridge + Future tokens).
+      useEffect(() => {
+        const root = document.documentElement;
+        const allThemeClasses = ['future-dark', 'future-light', 'legacy-dark', 'legacy-light'];
+        root.classList.remove(...allThemeClasses);
+        root.classList.add(themeClass);
+        return () => {
+          root.classList.remove(themeClass);
+        };
+      }, [themeClass]);
 
       useEffect(() => {
         if (isDev) {
@@ -96,24 +153,10 @@ const preview: Preview = {
         }
       }, [reactScanEnabled]);
 
-      useEffect(() => {
-        const htmlElement = document.documentElement;
-        const body = document.body;
-
-        // Remove existing theme class from both html and body
-        htmlElement.classList.remove('light', 'dark', 'light-hc', 'dark-hc');
-        body.classList.remove('light', 'dark', 'light-hc', 'dark-hc');
-
-        // Add theme class to both (html for legacy, body for apollo-core)
-        htmlElement.classList.add(theme);
-        body.classList.add(theme);
-        body.classList.add('bg-background', 'text-foreground');
-        body.style.minHeight = '100vh';
-      }, [theme]);
+      const isFullscreen = context.parameters?.layout === 'fullscreen';
 
-      // Wrap all stories with themed background
       return (
-        <div className="bg-background text-foreground p-1">
+        <div className={isFullscreen ? 'h-screen' : 'p-1'}>
           <Story />
         </div>
       );
diff --git a/packages/apollo-wind/apollo-ai-context.md b/packages/apollo-wind/apollo-ai-context.md
new file mode 100644
index 000000000..7e7248984
--- /dev/null
+++ b/packages/apollo-wind/apollo-ai-context.md
@@ -0,0 +1,242 @@
+# Apollo Wind — AI Context
+
+> Feed this file to your AI tool (Cursor rules, Claude context, ChatGPT, etc.)
+> to get consistent, design-system-aligned output when prototyping.
+
+---
+
+## Stack
+
+- React 19
+- TypeScript
+- Tailwind CSS 4
+- shadcn/ui components (Radix UI primitives)
+- Lucide React icons
+- Storybook 10
+
+## Import Paths
+
+```tsx
+// Components — always use the @/ alias
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+
+// Icons — always from lucide-react
+import { Search, Plus, X, ChevronDown } from 'lucide-react';
+
+// Utilities
+import { cn } from '@/lib';                           // class merging (clsx + tailwind-merge)
+import { fontFamily } from '@/foundation/Future/typography'; // font stacks
+```
+
+## Available Components
+
+### Core UI (from `@/components/ui/`)
+
+| Component | Import | Description |
+|-----------|--------|-------------|
+| Accordion | `accordion` | Collapsible content sections (Radix) |
+| Alert | `alert` | Status messages |
+| AlertDialog | `alert-dialog` | Confirmation dialogs (Radix) |
+| AspectRatio | `aspect-ratio` | Fixed aspect ratio containers |
+| Avatar | `avatar` | User avatars with fallback |
+| Badge | `badge` | Status/label badges |
+| Breadcrumb | `breadcrumb` | Navigation breadcrumbs |
+| Button | `button` | Primary action element. Variants: `default`, `destructive`, `outline`, `secondary`, `ghost`, `link` |
+| ButtonGroup | `button-group` | Grouped button container |
+| Calendar | `calendar` | Date calendar (react-day-picker) |
+| Card | `card` | Content card with header/content/footer |
+| Checkbox | `checkbox` | Toggle checkbox (Radix) |
+| Collapsible | `collapsible` | Expand/collapse container (Radix) |
+| Combobox | `combobox` | Searchable select (cmdk) |
+| Command | `command` | Command palette (cmdk) |
+| ContextMenu | `context-menu` | Right-click menu (Radix) |
+| DataTable | `data-table` | Full-featured data grid (TanStack Table). Includes sorting, filtering, pagination, row selection, column toggle |
+| DatePicker | `date-picker` | Date input with calendar popover |
+| DateTimePicker | `datetime-picker` | Date + time input |
+| Dialog | `dialog` | Modal dialog (Radix) |
+| Drawer | `drawer` | Bottom sheet drawer (Vaul) |
+| DropdownMenu | `dropdown-menu` | Dropdown menu (Radix) |
+| EmptyState | `empty-state` | Placeholder for empty content |
+| FileUpload | `file-upload` | File upload zone |
+| HoverCard | `hover-card` | Hover-triggered card (Radix) |
+| Input | `input` | Text input field |
+| Label | `label` | Form label (Radix) |
+| Layout (Grid, Row, Column) | `layout/grid`, `layout/row`, `layout/column` | Responsive layout primitives |
+| Menubar | `menubar` | Horizontal menu bar (Radix) |
+| MultiSelect | `multi-select` | Multiple selection dropdown |
+| NavigationMenu | `navigation-menu` | Navigation links menu (Radix) |
+| Pagination | `pagination` | Page navigation controls |
+| Popover | `popover` | Popover overlay (Radix) |
+| Progress | `progress` | Progress bar (Radix) |
+| RadioGroup | `radio-group` | Radio button group (Radix) |
+| Resizable | `resizable` | Resizable panel layout (react-resizable-panels) |
+| ScrollArea | `scroll-area` | Custom scrollbar container (Radix) |
+| Search | `search` | Search input with icon |
+| Select | `select` | Dropdown select (Radix) |
+| Separator | `separator` | Visual divider (Radix) |
+| Sheet | `sheet` | Side panel / drawer (Radix Dialog) |
+| Skeleton | `skeleton` | Loading placeholder |
+| Slider | `slider` | Range slider (Radix) |
+| Sonner | `sonner` | Toast notifications |
+| Spinner | `spinner` | Loading spinner |
+| StatsCard | `stats-card` | Metric/statistic display card |
+| Stepper | `stepper` | Multi-step progress indicator |
+| Switch | `switch` | Toggle switch (Radix) |
+| Table | `table` | Static HTML table with styled parts |
+| Tabs | `tabs` | Tabbed interface (Radix) |
+| Textarea | `textarea` | Multi-line text input |
+| Toggle | `toggle` | Toggle button (Radix) |
+| ToggleGroup | `toggle-group` | Group of toggle buttons (Radix) |
+| Tooltip | `tooltip` | Hover tooltip (Radix) |
+| ViewportGuard | `viewport-guard` | Min-width gate for responsive layouts |
+
+### Custom Components (from `@/components/custom/`)
+
+| Component | Import | Description |
+|-----------|--------|-------------|
+| Canvas | `canvas` | Main content area for flow/delegate templates |
+| MaestroHeader | `global-header` | Global app header with menu drawer, title, search, avatar |
+| FlowNode | `flow-node` | Flow editor node element |
+| FlowCanvasToolbar | `toolbar-canvas` | Bottom-center canvas mode toolbar |
+| FlowViewToolbar | `toolbar-view` | Bottom-right zoom/view toolbar |
+| PropertiesBar | `flow-properties-bar` | Collapsed properties bar |
+| PropertiesExpanded | `flow-properties-expanded` | Full expanded properties panel |
+| PropertiesSimple | `flow-properties-simple` | Compact properties panel with JSON editor drawer |
+| FlowPanel | `panel-flow` | Left icon rail + expandable chat panel |
+| DelegatePanel | `panel-delegate` | Delegate navigation panel |
+| MaestroPanel | `panel-maestro` | Maestro side panels (left/right) |
+| MaestroGrid | `grid-maestro` | Maestro content grid layout |
+| ChatComposer | `chat-composer` | Chat message input |
+| ChatFirstExperience | `chat-first-experience` | Empty chat state |
+| ChatPromptSuggestions | `chat-prompt-suggestions` | Suggested prompts |
+| ChatStepsView | `chat-steps-view` | Chat step progress |
+
+## Theming
+
+### How it works
+
+Themes use CSS custom properties scoped to CSS classes. Apply a class to a parent element to activate a theme:
+
+```tsx
+// Wrap your component in a theme class
+<div className="future-dark">  {/* or: future-light, legacy-dark, legacy-light */}
+  <YourComponent />
+</div>
+```
+
+No runtime theme provider is needed. Tailwind utilities resolve automatically based on the active theme class.
+
+### Theme classes
+
+| Class | Description |
+|-------|-------------|
+| `future-dark` | Future design language — dark mode (default) |
+| `future-light` | Future design language — light mode |
+| `legacy-dark` | Legacy design language — dark mode |
+| `legacy-light` | Legacy design language — light mode |
+
+### Color tokens (use these, not raw colors)
+
+**Surfaces (backgrounds):**
+- `bg-future-surface` — page/canvas background
+- `bg-future-surface-raised` — cards, panels
+- `bg-future-surface-overlay` — inputs, tabs, icon rail
+- `bg-future-surface-hover` — hover/selected states
+- `bg-future-surface-muted` — badges, indicators
+- `bg-future-surface-inverse` — inverse backgrounds (primary buttons)
+
+**Accent:**
+- `bg-future-accent` — primary accent (cyan)
+- `bg-future-accent-subtle` — subtle accent backgrounds
+
+**Text/icons (foreground):**
+- `text-future-foreground` — primary text
+- `text-future-foreground-secondary` — body text
+- `text-future-foreground-muted` — secondary UI text
+- `text-future-foreground-subtle` — muted labels
+- `text-future-foreground-inverse` — text on inverse backgrounds
+- `text-future-accent-foreground` — accent-colored text/icons
+
+**Borders:**
+- `border-future-border` — primary borders
+- `border-future-border-subtle` — subtle dividers
+- `border-future-border-muted` — content borders
+
+### Typography
+
+- **Primary font:** Inter (sans-serif)
+- **Monospace font:** JetBrains Mono
+- Apply via: `style={{ fontFamily: fontFamily.base }}`
+
+## Rules — Do This, Not That
+
+### DO
+- Use `future-*` token classes for all colors (`bg-future-surface`, `text-future-foreground`, etc.)
+- Import components from `@/components/ui/` and `@/components/custom/`
+- Import icons from `lucide-react`
+- Use `cn()` from `@/lib` to merge classes conditionally
+- Use Tailwind utility classes for layout (`flex`, `grid`, `gap-*`, `p-*`, etc.)
+- Use the `fontFamily.base` font stack from `@/foundation/Future/typography`
+- Use shadcn `Button` variants (`default`, `outline`, `ghost`, `secondary`)
+- Apply theme class to root element (`future-dark`, `future-light`)
+
+### DO NOT
+- Do NOT use raw hex colors or Tailwind color palette (e.g. `bg-zinc-900`)
+- Do NOT use Material UI, Emotion, or styled-components
+- Do NOT install additional UI libraries (use what's available above)
+- Do NOT use `bg-black`, `bg-white`, `text-gray-*` — always use semantic tokens
+- Do NOT hardcode light/dark values — the theme system handles this automatically
+
+## File Structure
+
+```
+packages/apollo-wind/src/
+├── components/
+│   ├── ui/           # shadcn components (Button, Input, Select, etc.)
+│   └── custom/       # Apollo-specific components (MaestroHeader, FlowPanel, etc.)
+├── foundation/
+│   └── Future/
+│       ├── colors.ts           # Color token definitions
+│       ├── typography.ts       # Typography token definitions
+│       ├── future-theme.css    # Future theme CSS variables
+│       └── legacy-theme.css    # Legacy theme CSS variables
+├── templates/
+│   ├── Maestro/      # Maestro template (Landing, Dashboard)
+│   ├── Delegate/     # Delegate template (Home, Settings)
+│   ├── Admin/        # Admin template (Landing, Data Management)
+│   └── Flow/         # Flow editor template (Properties, Properties Simple)
+├── lib/
+│   └── index.ts      # cn() utility
+└── styles/
+    └── tailwind.css   # Main CSS entry (imports theme files)
+```
+
+## Example: Creating a Simple Card Component
+
+```tsx
+import { cn } from '@/lib';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { ArrowRight } from 'lucide-react';
+
+function FeatureCard({ title, description, tag }: {
+  title: string;
+  description: string;
+  tag: string;
+}) {
+  return (
+    <div className="rounded-2xl border border-future-border-subtle bg-future-surface-raised p-6">
+      <Badge className="mb-3 bg-future-accent-subtle text-future-accent-foreground">
+        {tag}
+      </Badge>
+      <h3 className="mb-2 text-lg font-semibold text-future-foreground">{title}</h3>
+      <p className="mb-4 text-sm text-future-foreground-muted">{description}</p>
+      <Button variant="ghost" className="text-future-foreground-muted">
+        Learn more <ArrowRight className="ml-1 h-4 w-4" />
+      </Button>
+    </div>
+  );
+}
+```
diff --git a/packages/apollo-wind/package.json b/packages/apollo-wind/package.json
index 596d4dc63..aef95d54f 100644
--- a/packages/apollo-wind/package.json
+++ b/packages/apollo-wind/package.json
@@ -100,8 +100,10 @@
     "@rslib/core": "^0.17.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
+    "@storybook/addon-a11y": "^10.2.0",
     "@storybook/addon-docs": "^10.2.0",
     "@storybook/addon-links": "^10.2.0",
+    "@storybook/addon-mcp": "^0.2.2",
     "@storybook/react-vite": "^10.2.0",
     "@tailwindcss/cli": "^4.1.17",
     "@tailwindcss/postcss": "^4.1.17",
diff --git a/packages/apollo-wind/src/components/custom/canvas.stories.tsx b/packages/apollo-wind/src/components/custom/canvas.stories.tsx
new file mode 100644
index 000000000..dc07b0db7
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/canvas.stories.tsx
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Canvas } from './canvas';
+
+const meta = {
+  title: 'Components/UiPath/Canvas',
+  component: Canvas,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof Canvas>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="future-dark flex h-[500px]">
+      <Canvas>
+        <div className="flex flex-1 items-center justify-center text-sm text-future-foreground-muted">
+          Canvas content area — used as the main content surface in Delegate and Flow templates.
+        </div>
+      </Canvas>
+    </div>
+  ),
+};
diff --git a/packages/apollo-wind/src/components/custom/canvas.tsx b/packages/apollo-wind/src/components/custom/canvas.tsx
new file mode 100644
index 000000000..0fb8ec2b3
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/canvas.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { cn } from '@/lib';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface CanvasProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+// ============================================================================
+// Canvas
+// ============================================================================
+
+/**
+ * Main content canvas for Delegate templates.
+ *
+ * Provides the dark background surface that sits alongside the DelegatePanel.
+ * Content placed inside the Canvas can be laid out freely — future iterations
+ * will add optional layout guidelines (max-width constraints, centered
+ * content zones, padding presets, etc.).
+ */
+export function Canvas({ className, children }: CanvasProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-1 flex-col overflow-auto bg-future-surface',
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/packages/apollo-wind/src/components/custom/chat-composer.stories.tsx b/packages/apollo-wind/src/components/custom/chat-composer.stories.tsx
new file mode 100644
index 000000000..62621c8c8
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/chat-composer.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ChatComposer } from './chat-composer';
+
+const meta = {
+  title: 'Components/UiPath/Chat Composer',
+  component: ChatComposer,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof ChatComposer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="future-dark flex w-[900px] items-center justify-center bg-future-surface p-8">
+      <ChatComposer placeholder="I would like you to automate my" />
+    </div>
+  ),
+};
diff --git a/packages/apollo-wind/src/components/custom/chat-composer.tsx b/packages/apollo-wind/src/components/custom/chat-composer.tsx
new file mode 100644
index 000000000..35c1433eb
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/chat-composer.tsx
@@ -0,0 +1,100 @@
+import { CornerDownLeft, Plus, Workflow } from 'lucide-react';
+import * as React from 'react';
+import { cn } from '@/lib';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface ChatComposerProps {
+  className?: string;
+  /** Placeholder text displayed when the input is empty */
+  placeholder?: string;
+  /** Callback when the user submits a message */
+  onSubmit?: (value: string) => void;
+}
+
+// ============================================================================
+// ChatComposer
+// ============================================================================
+
+/**
+ * Reusable chat composer input with action buttons.
+ *
+ * Features a text area, left-side action buttons (add, workflow),
+ * and a cyan submit button. Fixed at 800px max-width to match the
+ * Delegate design spec.
+ */
+export function ChatComposer({
+  className,
+  placeholder = 'I would like you to automate my',
+  onSubmit,
+}: ChatComposerProps) {
+  const [value, setValue] = React.useState('');
+
+  const handleSubmit = () => {
+    if (value.trim()) {
+      onSubmit?.(value.trim());
+      setValue('');
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        'w-full max-w-[800px] rounded-[32px] bg-gradient-to-b from-future-surface to-future-surface-raised p-2',
+        className
+      )}
+    >
+      <div className="flex min-h-[124px] flex-col justify-between rounded-3xl border border-future-border bg-future-surface-overlay pb-3 pl-4 pr-3 pt-4">
+        {/* Text area */}
+        <textarea
+          className="w-full resize-none bg-transparent text-base font-medium leading-5 text-future-foreground placeholder:text-future-foreground-subtle focus:outline-none"
+          placeholder={placeholder}
+          rows={2}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+        />
+
+        {/* Bottom toolbar */}
+        <div className="flex items-center justify-between">
+          {/* Left actions */}
+          <div className="flex items-center gap-1">
+            <button
+              type="button"
+              className="flex h-8 w-8 items-center justify-center rounded-2xl border border-future-border-inverse bg-future-surface-inverse transition-opacity hover:opacity-80"
+              aria-label="Add attachment"
+            >
+              <Plus className="h-5 w-5 text-future-foreground-inverse" />
+            </button>
+            <button
+              type="button"
+              className="flex h-8 w-8 items-center justify-center rounded-2xl border border-future-border-inverse bg-future-surface-inverse transition-opacity hover:opacity-80"
+              aria-label="Add workflow"
+            >
+              <Workflow className="h-5 w-5 text-future-foreground-inverse" />
+            </button>
+          </div>
+
+          {/* Submit button */}
+          <button
+            type="button"
+            className="flex h-8 w-8 items-center justify-center rounded-2xl bg-future-accent transition-opacity hover:opacity-90"
+            onClick={handleSubmit}
+            aria-label="Submit message"
+          >
+            <CornerDownLeft className="h-5 w-5 -scale-y-100 rotate-90 text-future-foreground-on-accent" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/apollo-wind/src/components/custom/chat-first-experience.stories.tsx b/packages/apollo-wind/src/components/custom/chat-first-experience.stories.tsx
new file mode 100644
index 000000000..a18f564be
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/chat-first-experience.stories.tsx
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ChatFirstExperience } from './chat-first-experience';
+
+const meta = {
+  title: 'Components/UiPath/Chat First Experience',
+  component: ChatFirstExperience,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof ChatFirstExperience>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="future-dark flex h-screen bg-future-surface">
+      <ChatFirstExperience
+        userName="David"
+        subtitle="What should we work on today?"
+        suggestions={[
+          { id: '1', label: 'Make a list of affordable apartments in NYC' },
+          { id: '2', label: 'Find the highest CD rates' },
+          { id: '3', label: 'Lorem ipsum dolor sit amet' },
+        ]}
+      />
+    </div>
+  ),
+};
diff --git a/packages/apollo-wind/src/components/custom/chat-first-experience.tsx b/packages/apollo-wind/src/components/custom/chat-first-experience.tsx
new file mode 100644
index 000000000..404d7b047
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/chat-first-experience.tsx
@@ -0,0 +1,86 @@
+import { cn } from '@/lib';
+import { ChatComposer } from '@/components/custom/chat-composer';
+import {
+  PromptSuggestions,
+  type PromptSuggestion,
+} from '@/components/custom/chat-prompt-suggestions';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface ChatFirstExperienceProps {
+  className?: string;
+  /** Greeting name displayed in the heading */
+  userName?: string;
+  /** Subtitle below the greeting */
+  subtitle?: string;
+  /** Placeholder text inside the composer */
+  composerPlaceholder?: string;
+  /** Prompt suggestions shown below the composer */
+  suggestions?: PromptSuggestion[];
+  /** Callback when a suggestion is clicked */
+  onSuggestionClick?: (suggestion: PromptSuggestion) => void;
+  /** Callback when the composer submit button is clicked */
+  onSubmit?: (value: string) => void;
+}
+
+// ============================================================================
+// ChatFirstExperience
+// ============================================================================
+
+/**
+ * The initial "first run" experience shown in the Canvas when
+ * a user opens the Delegate Chat page with no active conversation.
+ *
+ * Displays a greeting, a composer input, and prompt suggestions,
+ * all constrained to 800px max-width and centered in the canvas.
+ */
+export function ChatFirstExperience({
+  className,
+  userName = 'David',
+  subtitle = 'What should we work on today?',
+  composerPlaceholder = 'I would like you to automate my',
+  suggestions = [
+    { id: '1', label: 'Make a list of affordable apartments in NYC' },
+    { id: '2', label: 'Find the highest CD rates' },
+    { id: '3', label: 'Lorem ipsum dolor sit amet' },
+  ],
+  onSuggestionClick,
+  onSubmit,
+}: ChatFirstExperienceProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-1 flex-col items-center justify-center',
+        className
+      )}
+    >
+      {/* 800px content container */}
+      <div className="flex w-full max-w-[800px] flex-col items-center gap-[37px]">
+        {/* Greeting */}
+        <div className="flex flex-col items-center text-center">
+          <h1 className="text-[40px] font-bold leading-9 tracking-[-0.8px] text-future-foreground">
+            Hello {userName}
+          </h1>
+          <p className="mt-1 text-base font-normal leading-9 text-future-foreground-secondary">
+            {subtitle}
+          </p>
+        </div>
+
+        {/* Composer */}
+        <ChatComposer
+          placeholder={composerPlaceholder}
+          onSubmit={onSubmit}
+        />
+
+        {/* Prompt suggestions */}
+        <PromptSuggestions
+          className="w-full"
+          suggestions={suggestions}
+          onSelect={onSuggestionClick}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/apollo-wind/src/components/custom/chat-prompt-suggestions.stories.tsx b/packages/apollo-wind/src/components/custom/chat-prompt-suggestions.stories.tsx
new file mode 100644
index 000000000..778ec2c74
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/chat-prompt-suggestions.stories.tsx
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { PromptSuggestions } from './chat-prompt-suggestions';
+
+const meta = {
+  title: 'Components/UiPath/Prompt Suggestions',
+  component: PromptSuggestions,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof PromptSuggestions>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="future-dark bg-future-surface p-8">
+      <PromptSuggestions
+        suggestions={[
+          { id: '1', label: 'Make a list of affordable apartments in NYC' },
+          { id: '2', label: 'Find the highest CD rates' },
+          { id: '3', label: 'Summarize my latest emails' },
+          { id: '4', label: 'Create a weekly expense report' },
+        ]}
+      />
+    </div>
+  ),
+};
diff --git a/packages/apollo-wind/src/components/custom/chat-prompt-suggestions.tsx b/packages/apollo-wind/src/components/custom/chat-prompt-suggestions.tsx
new file mode 100644
index 000000000..190bec817
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/chat-prompt-suggestions.tsx
@@ -0,0 +1,50 @@
+import { cn } from '@/lib';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface PromptSuggestion {
+  id: string;
+  label: string;
+}
+
+export interface PromptSuggestionsProps {
+  className?: string;
+  /** List of suggestions to display */
+  suggestions?: PromptSuggestion[];
+  /** Callback when a suggestion is clicked */
+  onSelect?: (suggestion: PromptSuggestion) => void;
+}
+
+// ============================================================================
+// PromptSuggestions
+// ============================================================================
+
+/**
+ * A vertical list of clickable prompt suggestion pills.
+ *
+ * Styled per the Delegate Figma spec: zinc-800 background with
+ * zinc-700 border and zinc-50 text.
+ */
+export function PromptSuggestions({
+  className,
+  suggestions = [],
+  onSelect,
+}: PromptSuggestionsProps) {
+  if (suggestions.length === 0) return null;
+
+  return (
+    <div className={cn('flex flex-col items-start gap-2', className)}>
+      {suggestions.map((suggestion) => (
+        <button
+          key={suggestion.id}
+          className="flex h-10 items-center rounded-xl border border-future-border bg-future-surface-overlay px-4 py-2.5 text-sm font-medium leading-5 text-future-foreground transition-colors hover:bg-future-surface-hover"
+          onClick={() => onSelect?.(suggestion)}
+        >
+          {suggestion.label}
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/packages/apollo-wind/src/components/custom/chat-steps-view.stories.tsx b/packages/apollo-wind/src/components/custom/chat-steps-view.stories.tsx
new file mode 100644
index 000000000..762c533b1
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/chat-steps-view.stories.tsx
@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { StepsView } from './chat-steps-view';
+
+const meta = {
+  title: 'Components/UiPath/Steps View',
+  component: StepsView,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof StepsView>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const sampleSteps = [
+  {
+    id: '1',
+    title: 'Extract invoice data',
+    stepRange: 'Steps 1-3',
+    description: 'Use Document Understanding to extract key fields from uploaded invoice PDFs.',
+  },
+  {
+    id: '2',
+    title: 'Validate amounts',
+    stepRange: 'Steps 4-6',
+    description: 'Cross-reference extracted amounts against purchase order records.',
+  },
+  {
+    id: '3',
+    title: 'Route for approval',
+    stepRange: 'Steps 7-9',
+    description: 'Send validated invoices to the appropriate approver based on amount thresholds.',
+    loop: 'Loop until approved',
+  },
+  {
+    id: '4',
+    title: 'Post to ERP',
+    stepRange: 'Steps 10-12',
+    description: 'Create journal entries in SAP for approved invoices.',
+  },
+];
+
+export const Default: Story = {
+  render: () => (
+    <div className="future-dark flex h-screen bg-future-surface">
+      <StepsView
+        className="mx-auto max-w-3xl"
+        flowName="Invoice processing"
+        flowDescription="Automate end-to-end invoice processing with AI-powered data extraction and validation."
+        status="Active"
+        lastRun="2 hours ago"
+        totalRuns={847}
+        steps={sampleSteps}
+      />
+    </div>
+  ),
+};
diff --git a/packages/apollo-wind/src/components/custom/chat-steps-view.tsx b/packages/apollo-wind/src/components/custom/chat-steps-view.tsx
new file mode 100644
index 000000000..d2b6f3ea2
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/chat-steps-view.tsx
@@ -0,0 +1,288 @@
+import {
+  ArrowLeft,
+  Bot,
+  Calendar,
+  ChevronDown,
+  Folder,
+  List,
+  Pause,
+  Pencil,
+  Repeat2,
+} from 'lucide-react';
+import { cn } from '@/lib';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface FlowStep {
+  id: string;
+  title: string;
+  stepRange: string;
+  description: string;
+  /** Optional loop annotation */
+  loop?: string;
+}
+
+export interface StepsViewProps {
+  className?: string;
+  /** Flow name displayed in the header */
+  flowName?: string;
+  /** Flow description */
+  flowDescription?: string;
+  /** Status badge label */
+  status?: string;
+  /** Last run date/time */
+  lastRun?: string;
+  /** Total runs count */
+  totalRuns?: number;
+  /** Steps to display */
+  steps?: FlowStep[];
+  /** Currently active tab */
+  activeTab?: 'steps' | 'history' | 'resources';
+  /** Callback when back button is clicked */
+  onBack?: () => void;
+  /** Callback when Edit is clicked */
+  onEdit?: () => void;
+  /** Callback when Pause is clicked */
+  onPause?: () => void;
+}
+
+// ============================================================================
+// Sub-components
+// ============================================================================
+
+/** Vertical divider for the header */
+function HeaderDivider() {
+  return <div className="h-9 w-px bg-future-border-subtle" />;
+}
+
+/** Status badge (e.g. ACTIVE) */
+function StatusBadge({ label }: { label: string }) {
+  return (
+    <div className="flex h-10 items-center rounded-xl bg-future-accent-subtle px-4 py-2">
+      <span className="text-sm font-bold leading-5 text-future-accent-foreground-muted">
+        {label}
+      </span>
+    </div>
+  );
+}
+
+/** Stat display with value and label */
+function StatItem({ value, label }: { value: string; label: string }) {
+  return (
+    <div className="flex flex-col gap-0.5">
+      <span className="text-[15px] font-semibold leading-5 text-future-foreground">{value}</span>
+      <span className="text-sm font-medium leading-5 text-future-foreground-subtle">{label}</span>
+    </div>
+  );
+}
+
+/** Outlined action button */
+function ActionButton({
+  icon,
+  label,
+  onClick,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  onClick?: () => void;
+}) {
+  return (
+    <button
+      className="flex h-10 items-center gap-2 rounded-xl border border-future-border px-4 py-2 text-sm font-medium leading-5 text-future-foreground-subtle transition-colors hover:border-future-border-hover hover:text-future-foreground-hover"
+      onClick={onClick}
+    >
+      {icon}
+      {label}
+    </button>
+  );
+}
+
+/** Tab bar with Steps / History / Resources */
+function TabBar({ activeTab }: { activeTab: 'steps' | 'history' | 'resources' }) {
+  const tabs = [
+    { id: 'steps' as const, label: 'Steps', icon: <List className="h-4 w-4" /> },
+    { id: 'history' as const, label: 'History', icon: <Calendar className="h-4 w-4" /> },
+    { id: 'resources' as const, label: 'Resources', icon: <Folder className="h-4 w-4" /> },
+  ];
+
+  return (
+    <div className="flex h-10 items-center rounded-xl bg-future-surface-overlay p-1">
+      {tabs.map((tab) => (
+        <div
+          key={tab.id}
+          className={cn(
+            'flex h-8 items-center gap-2 rounded-[10px] px-4 py-2 text-sm font-medium leading-5 transition-colors',
+            activeTab === tab.id
+              ? 'border border-future-border-subtle bg-future-surface text-future-foreground'
+              : 'text-future-foreground-subtle hover:text-future-foreground-hover'
+          )}
+        >
+          {tab.icon}
+          <span>{tab.label}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/** A single step card */
+function StepCard({ step, isHovered }: { step: FlowStep; isHovered?: boolean }) {
+  return (
+    <div
+      className={cn(
+        'flex h-16 items-center justify-between rounded-2xl border px-4',
+        isHovered
+          ? 'border-future-border-subtle bg-future-surface-overlay shadow-[0px_4px_24px_0px_rgba(0,0,0,0.25)]'
+          : 'border-future-border-subtle'
+      )}
+    >
+      <div className="flex items-center gap-4">
+        {/* Bot icon */}
+        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-future-surface-hover">
+          <Bot className="h-5 w-5 text-future-foreground" />
+        </div>
+
+        {/* Step info */}
+        <div className="flex flex-col">
+          <div className="flex items-start gap-0.5">
+            <span className="text-sm font-semibold leading-5 tracking-[-0.35px] text-future-foreground">
+              {step.title}
+            </span>
+            <span className="ms-1 text-xs leading-5 tracking-[-0.3px] text-future-foreground-subtle">
+              &bull; {step.stepRange}
+            </span>
+          </div>
+          {step.loop ? (
+            <div className="flex items-center gap-2">
+              <div className="flex h-5 w-5 items-center justify-center rounded-[10px] bg-future-surface-muted">
+                <Repeat2 className="h-3.5 w-3.5 text-future-foreground-on-accent" />
+              </div>
+              <span className="text-sm leading-5 text-future-foreground-subtle">
+                <span className="font-semibold">Loop</span>: {step.loop}
+              </span>
+            </div>
+          ) : (
+            <span className="text-sm leading-5 tracking-[-0.35px] text-future-foreground-subtle">
+              {step.description}
+            </span>
+          )}
+        </div>
+      </div>
+
+      <ChevronDown className="h-4 w-4 shrink-0 text-future-foreground-subtle" />
+    </div>
+  );
+}
+
+// ============================================================================
+// StepsView
+// ============================================================================
+
+/**
+ * Canvas content for the Delegate Steps page.
+ *
+ * Shows a flow header with metadata, a tabbed content area,
+ * and a vertical list of step cards.
+ */
+export function StepsView({
+  className,
+  flowName = 'Flow name',
+  flowDescription = 'Lorem ipsum dolor sit amet lorem ipsum.',
+  status = 'ACTIVE',
+  lastRun = '25/11/2025   12:15PM',
+  totalRuns = 32,
+  steps = [
+    {
+      id: '1',
+      title: 'Gmail',
+      stepRange: 'Steps 1 - 2',
+      description: 'Evaluate temperature conditions and proceed',
+    },
+    {
+      id: '2',
+      title: 'Salesforce',
+      stepRange: 'Steps 3 - 5',
+      description: 'Evaluate temperature conditions and proceed',
+    },
+    {
+      id: '3',
+      title: 'Excel - Process vendor from each file',
+      stepRange: 'Steps 6 - 12',
+      description: 'Evaluate temperature conditions and proceed',
+      loop: 'For each row in the "vendor list", starting from the second row.',
+    },
+    {
+      id: '4',
+      title: 'Gmail',
+      stepRange: 'Steps 1 - 2',
+      description: 'Evaluate temperature conditions and proceed',
+    },
+  ],
+  activeTab = 'steps',
+  onBack,
+  onEdit,
+  onPause,
+}: StepsViewProps) {
+  return (
+    <div className={cn('flex flex-1 flex-col p-0', className)}>
+      {/* Flow header */}
+      <div className="flex min-h-[78px] shrink-0 items-center gap-8 overflow-x-auto px-10 py-5">
+        {/* Back + Title */}
+        <div className="flex shrink-0 items-center gap-4">
+          <button
+            type="button"
+            className="shrink-0 text-future-foreground transition-colors hover:text-future-foreground"
+            onClick={onBack}
+            aria-label="Go back"
+          >
+            <ArrowLeft className="h-6 w-6" />
+          </button>
+          <div className="flex flex-col gap-1">
+            <span className="whitespace-nowrap text-xl font-semibold leading-5 text-future-foreground">
+              {flowName}
+            </span>
+            <span className="whitespace-nowrap text-sm font-medium leading-5 text-future-foreground-subtle">
+              {flowDescription}
+            </span>
+          </div>
+        </div>
+
+        <HeaderDivider />
+        <StatusBadge label={status} />
+
+        <div className="flex shrink-0 items-center gap-4">
+          <HeaderDivider />
+          <StatItem value={lastRun} label="Last run" />
+        </div>
+        <div className="flex shrink-0 items-center gap-4">
+          <HeaderDivider />
+          <StatItem value={String(totalRuns)} label="Total runs" />
+        </div>
+
+        {/* Spacer */}
+        <div className="flex-1" />
+
+        {/* Action buttons */}
+        <div className="flex shrink-0 items-center gap-2">
+          <ActionButton icon={<Pencil className="h-4 w-4" />} label="Edit" onClick={onEdit} />
+          <ActionButton icon={<Pause className="h-4 w-4" />} label="Pause" onClick={onPause} />
+        </div>
+      </div>
+
+      {/* Content area */}
+      <div className="flex flex-1 flex-col rounded-t-2xl border border-future-border-muted bg-future-surface p-4">
+        {/* Tab bar */}
+        <TabBar activeTab={activeTab} />
+
+        {/* Steps list */}
+        <div className="mx-auto mt-20 flex w-full max-w-[680px] flex-col gap-6">
+          {steps.map((step, index) => (
+            <StepCard key={step.id} step={step} isHovered={index === steps.length - 1} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/apollo-wind/src/components/custom/flow-node.stories.tsx b/packages/apollo-wind/src/components/custom/flow-node.stories.tsx
new file mode 100644
index 000000000..6754460d4
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/flow-node.stories.tsx
@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { FileText, Mail } from 'lucide-react';
+import { FlowNode } from './flow-node';
+
+const meta = {
+  title: 'Components/UiPath/Flow Node',
+  component: FlowNode,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof FlowNode>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="future-dark bg-future-surface p-8">
+      <FlowNode title="AI Agent" />
+    </div>
+  ),
+};
+
+export const Selected: Story = {
+  render: () => (
+    <div className="future-dark bg-future-surface p-8">
+      <FlowNode title="AI Agent" selected />
+    </div>
+  ),
+};
+
+export const CustomIcon: Story = {
+  render: () => (
+    <div className="future-dark flex gap-4 bg-future-surface p-8">
+      <FlowNode
+        title="Extract Data"
+        icon={<FileText className="h-5 w-5 text-future-accent-foreground" />}
+      />
+      <FlowNode
+        title="Send Email"
+        icon={<Mail className="h-5 w-5 text-future-accent-foreground" />}
+      />
+    </div>
+  ),
+};
diff --git a/packages/apollo-wind/src/components/custom/flow-node.tsx b/packages/apollo-wind/src/components/custom/flow-node.tsx
new file mode 100644
index 000000000..3dc9ffa9c
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/flow-node.tsx
@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { Bot, ChevronDown } from 'lucide-react';
+import { cn } from '@/lib';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface FlowNodeProps {
+  className?: string;
+  /** Node title */
+  title?: string;
+  /** Icon to display in the node header */
+  icon?: React.ReactNode;
+  /** Node content (rendered below the header) */
+  children?: React.ReactNode;
+  /** Whether the node is selected */
+  selected?: boolean;
+}
+
+// ============================================================================
+// FlowNode
+// ============================================================================
+
+/**
+ * A canvas node card for the Flow template.
+ *
+ * Displays a dark card with a header (icon + title + chevron) and a
+ * content area. Default size is 360×360px but can be overridden via
+ * className.
+ */
+export function FlowNode({
+  className,
+  title = 'Node title',
+  icon,
+  children,
+  selected = false,
+}: FlowNodeProps) {
+  return (
+    <div
+      className={cn(
+        'flex h-[360px] w-[360px] flex-col overflow-hidden rounded-2xl bg-future-surface-overlay px-4 pb-4 pt-2.5',
+        selected && 'ring-1 ring-future-ring',
+        className
+      )}
+    >
+      <div className="flex flex-1 flex-col gap-[15px]">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2.5">
+            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-future-surface">
+              {icon ?? <Bot className="h-5 w-5 text-future-foreground-muted" />}
+            </div>
+            <span className="text-sm font-medium text-future-foreground">{title}</span>
+          </div>
+          <ChevronDown className="h-4 w-4 text-future-foreground-muted" />
+        </div>
+
+        {/* Content area */}
+        <div className="flex-1 rounded-lg bg-future-surface-raised">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/apollo-wind/src/components/custom/flow-properties-bar.stories.tsx b/packages/apollo-wind/src/components/custom/flow-properties-bar.stories.tsx
new file mode 100644
index 000000000..c4a227284
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/flow-properties-bar.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { PropertiesBar } from './flow-properties-bar';
+
+const meta = {
+  title: 'Components/UiPath/Properties Bar',
+  component: PropertiesBar,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof PropertiesBar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="future-dark bg-future-surface p-4">
+      <PropertiesBar flowName="Invoice processing" flowType="Workflow" />
+    </div>
+  ),
+};
diff --git a/packages/apollo-wind/src/components/custom/flow-properties-bar.tsx b/packages/apollo-wind/src/components/custom/flow-properties-bar.tsx
new file mode 100644
index 000000000..bbc123a2a
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/flow-properties-bar.tsx
@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { Workflow, TableProperties, Variable } from 'lucide-react';
+import { cn } from '@/lib';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface PropertiesBarProps {
+  className?: string;
+  /** Flow name shown in the bar */
+  flowName?: string;
+  /** Flow type label (e.g. "Workflow") */
+  flowType?: string;
+  /** Active tab: 'properties' | 'variables' */
+  activeTab?: 'properties' | 'variables';
+  /** Callback when tab changes */
+  onTabChange?: (tab: 'properties' | 'variables') => void;
+  /** Callback when the properties tab is clicked to expand the panel */
+  onExpand?: () => void;
+}
+
+// ============================================================================
+// PropertiesBar (collapsed state)
+// ============================================================================
+
+/**
+ * Collapsed properties bar for the Flow template.
+ *
+ * Anchored to the top-right of the canvas. Shows flow name/type on the left
+ * and Properties/Variables tab buttons on the right. A future update will
+ * introduce the expanded state.
+ */
+export function PropertiesBar({
+  className,
+  flowName = 'Invoice processing',
+  flowType = 'Workflow',
+  activeTab = 'properties',
+  onTabChange,
+  onExpand,
+}: PropertiesBarProps) {
+  return (
+    <div
+      className={cn(
+        'flex h-16 items-center justify-between rounded-2xl bg-future-surface-overlay px-4',
+        className
+      )}
+    >
+      {/* Left: flow icon + name */}
+      <div className="flex items-center gap-4">
+        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-future-accent-subtle">
+          <Workflow className="h-6 w-6 text-future-accent-foreground" />
+        </div>
+        <div className="flex flex-col">
+          <span className="text-base font-semibold leading-5 tracking-[-0.4px] text-future-foreground">
+            {flowName}
+          </span>
+          <span className="text-sm font-normal leading-5 tracking-[-0.35px] text-future-foreground-subtle">
+            {flowType}
+          </span>
+        </div>
+      </div>
+
+      {/* Right: Properties / Variables tabs */}
+      <div className="flex h-10 items-center rounded-xl bg-future-surface-raised border border-future-border-deep p-1">
+        <button
+          className={cn(
+            'flex h-8 items-center gap-2 rounded-[10px] px-4 py-2 text-sm font-medium leading-5 text-future-foreground-subtle transition-colors hover:text-future-foreground-hover',
+            activeTab === 'properties' && 'text-future-foreground-subtle'
+          )}
+          onClick={() => {
+            onTabChange?.('properties');
+            onExpand?.();
+          }}
+        >
+          <TableProperties className="h-5 w-5" />
+          <span>Properties</span>
+        </button>
+        <button
+          className={cn(
+            'flex h-7 items-center gap-2 rounded-xl px-4 py-2 text-sm font-medium leading-5 text-future-foreground-subtle transition-colors',
+            activeTab === 'variables' && 'text-future-foreground-subtle'
+          )}
+          onClick={() => onTabChange?.('variables')}
+        >
+          <Variable className="h-5 w-5" />
+          <span>Variables</span>
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/apollo-wind/src/components/custom/flow-properties-expanded.stories.tsx b/packages/apollo-wind/src/components/custom/flow-properties-expanded.stories.tsx
new file mode 100644
index 000000000..1768df697
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/flow-properties-expanded.stories.tsx
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { PropertiesExpanded } from './flow-properties-expanded';
+
+const meta = {
+  title: 'Components/UiPath/Properties Expanded',
+  component: PropertiesExpanded,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof PropertiesExpanded>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="future-dark flex h-[700px] bg-future-surface p-4">
+      <div className="flex flex-1 items-center justify-center text-sm text-future-foreground-muted">
+        Canvas area
+      </div>
+      <PropertiesExpanded
+        nodeName="AI Agent"
+        nodeType="AI Agent"
+        activeTab="properties"
+      />
+    </div>
+  ),
+};
diff --git a/packages/apollo-wind/src/components/custom/flow-properties-expanded.tsx b/packages/apollo-wind/src/components/custom/flow-properties-expanded.tsx
new file mode 100644
index 000000000..40add4009
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/flow-properties-expanded.tsx
@@ -0,0 +1,289 @@
+import {
+  Bot,
+  Columns2,
+  GripVertical,
+  PanelRightOpen,
+  Play,
+  Rows2,
+  TableProperties,
+  Variable,
+  X,
+} from 'lucide-react';
+import * as React from 'react';
+import { fontFamily } from '@/foundation/Future/typography';
+import { cn } from '@/lib';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface PropertiesExpandedProps {
+  className?: string;
+  /** Node name shown in the header */
+  nodeName?: string;
+  /** Node type label (e.g. "AI Agent") */
+  nodeType?: string;
+  /** Active top tab: 'properties' | 'variables' */
+  activeTab?: 'properties' | 'variables';
+  /** Callback when close button is clicked */
+  onClose?: () => void;
+}
+
+// ============================================================================
+// Internal: Mini tab (small pill tabs for Code/Input/Output sub-sections)
+// ============================================================================
+
+function MiniTab({
+  label,
+  active,
+  onClick,
+}: {
+  label: string;
+  active?: boolean;
+  onClick?: () => void;
+}) {
+  return (
+    <button
+      className={cn(
+        'flex h-6 items-center rounded-lg px-2 text-xs font-medium leading-5',
+        active ? 'bg-future-surface text-future-foreground' : 'text-future-foreground-subtle'
+      )}
+      onClick={onClick}
+    >
+      {label}
+    </button>
+  );
+}
+
+// ============================================================================
+// Internal: Section header with grip icon and title
+// ============================================================================
+
+function SectionHeader({ title }: { title: string }) {
+  return (
+    <div className="flex items-center gap-1 px-2 py-1">
+      <div className="flex h-8 w-8 items-center justify-center rounded-xl">
+        <GripVertical className="h-5 w-5 text-future-foreground-subtle" />
+      </div>
+      <span className="text-sm font-semibold leading-5 text-future-foreground">{title}</span>
+    </div>
+  );
+}
+
+// ============================================================================
+// Internal: Code viewer with line numbers
+// ============================================================================
+
+function CodeViewer({ lines, className }: { lines: string[]; className?: string }) {
+  return (
+    <div
+      className={cn('flex flex-1 gap-6 overflow-auto px-5 py-4 text-sm leading-6', className)}
+      style={{ fontFamily: fontFamily.monospace }}
+    >
+      {/* Line numbers */}
+      <div className="flex flex-col text-right text-future-foreground-subtle select-none">
+        {lines.map((_, i) => (
+          <span key={i}>{i + 1}</span>
+        ))}
+      </div>
+      {/* Code content */}
+      <div className="flex flex-col whitespace-pre text-future-foreground-muted">
+        {lines.map((line, i) => (
+          <span key={i}>{line}</span>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// Sample data
+// ============================================================================
+
+const codeLines = [
+  ' // AI Agent validates invoice data',
+  '// Checks for anomalies and fraud patterns',
+  '// Cross-references vendor database',
+];
+
+const inputJsonLines = [
+  '{',
+  '  "extracted": {',
+  '    "vendor": "Acme Corp",',
+  '    "amount": 1250,',
+  '    "date": "2024-01-15",',
+  '    "items": [',
+  '      {',
+  '        "description": "Professional Services",',
+  '        "amount": 1250',
+  '      }',
+  '    ]',
+  '  },',
+  '  "invoiceId": "INV-2024-001",',
+  '  "timestamp": "2026-01-28T19:51:41.085Z"',
+];
+
+const outputJsonLines = ['{', '  "isValid": true,', '    "confidence": 0.96', '}'];
+
+// ============================================================================
+// PropertiesExpanded
+// ============================================================================
+
+/**
+ * Expanded properties panel for the Flow template.
+ *
+ * Shows full node details including header, toolbar, code section,
+ * and input/output split view. Sits on the right side of the canvas.
+ * Functionality will be built out in a future update.
+ */
+export function PropertiesExpanded({
+  className,
+  nodeName = 'Validate invoice',
+  nodeType = 'AI Agent',
+  activeTab = 'properties',
+  onClose,
+}: PropertiesExpandedProps) {
+  return (
+    <div
+      className={cn(
+        'flex w-[930px] shrink-0 flex-col rounded-2xl bg-future-surface-raised',
+        className
+      )}
+    >
+      {/* ── Header ────────────────────────────────────────────── */}
+      <div className="flex items-center justify-between border-b border-future-border p-4">
+        {/* Left: icon + name */}
+        <div className="flex items-center gap-4">
+          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-future-accent-subtle">
+            <Bot className="h-6 w-6 text-future-accent-foreground" />
+          </div>
+          <div className="flex flex-col">
+            <span className="text-base font-semibold leading-5 tracking-[-0.4px] text-future-foreground">
+              {nodeName}
+            </span>
+            <span className="text-sm font-normal leading-5 tracking-[-0.35px] text-future-foreground-subtle">
+              {nodeType}
+            </span>
+          </div>
+        </div>
+
+        {/* Right: Properties/Variables toggle + close */}
+        <div className="flex items-center gap-2">
+          <div className="flex h-10 items-center rounded-xl border border-future-border-deep bg-future-surface-overlay p-1">
+            <button
+              className={cn(
+                'flex h-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5 transition-colors',
+                activeTab === 'properties'
+                  ? 'border border-future-border bg-future-surface text-future-foreground'
+                  : 'text-future-foreground-subtle'
+              )}
+            >
+              <TableProperties className="h-5 w-5" />
+              <span>Properties</span>
+            </button>
+            <button
+              className={cn(
+                'flex h-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5 transition-colors',
+                activeTab === 'variables'
+                  ? 'border border-future-border bg-future-surface text-future-foreground'
+                  : 'text-future-foreground-subtle'
+              )}
+            >
+              <Variable className="h-5 w-5" />
+              <span>Variables</span>
+            </button>
+          </div>
+          <button
+            className="flex h-10 w-10 items-center justify-center rounded-xl bg-future-surface-overlay text-future-foreground-muted transition-colors hover:text-future-foreground"
+            onClick={onClose}
+            aria-label="Close properties"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+      </div>
+
+      {/* ── Sub-header toolbar ────────────────────────────────── */}
+      <div className="flex items-center justify-between border-b border-future-border px-4 py-2">
+        <div className="flex items-center gap-2">
+          {/* Dock button */}
+          <button
+            type="button"
+            className="flex h-10 w-10 items-center justify-center rounded-xl bg-future-surface-overlay text-future-foreground-muted hover:text-future-foreground"
+            aria-label="Toggle panel dock"
+          >
+            <PanelRightOpen className="h-5 w-5" />
+          </button>
+          {/* Layout toggle: columns / rows */}
+          <div
+            className="flex h-10 items-center rounded-xl border border-future-border-deep bg-future-surface-overlay p-1"
+            role="group"
+            aria-label="Layout toggle"
+          >
+            <button
+              type="button"
+              className="flex h-8 w-8 items-center justify-center rounded-[10px] text-future-foreground-muted transition-colors hover:text-future-foreground"
+              aria-label="Columns layout"
+            >
+              <Columns2 className="h-5 w-5" />
+            </button>
+            <button
+              type="button"
+              className="flex h-8 w-8 items-center justify-center rounded-[10px] border border-future-border bg-future-surface text-future-foreground"
+              aria-label="Rows layout"
+            >
+              <Rows2 className="h-5 w-5" />
+            </button>
+          </div>
+        </div>
+        {/* Run node button */}
+        <button
+          type="button"
+          className="flex h-10 items-center gap-2 rounded-xl bg-future-accent px-4 py-2 text-sm font-semibold leading-5 text-future-foreground-inverse"
+        >
+          <Play className="h-4 w-4" />
+          <span>Run node</span>
+        </button>
+      </div>
+
+      {/* ── Code section ──────────────────────────────────────── */}
+      <div className="flex flex-1 flex-col overflow-hidden border-b border-future-border">
+        <SectionHeader title="Code" />
+        <div className="flex items-center gap-1 px-2 pb-2">
+          <MiniTab label="Parameters" />
+          <MiniTab label="Script" active />
+          <MiniTab label="Errors" />
+        </div>
+        <CodeViewer lines={codeLines} />
+      </div>
+
+      {/* ── Input / Output split ──────────────────────────────── */}
+      <div className="flex flex-1 overflow-hidden">
+        {/* Input */}
+        <div className="flex flex-1 flex-col overflow-hidden">
+          <SectionHeader title="Input" />
+          <div className="flex items-center gap-1 px-2 pb-2">
+            <MiniTab label="JSON" active />
+            <MiniTab label="Table" />
+            <MiniTab label="List" />
+          </div>
+          <CodeViewer lines={inputJsonLines} />
+        </div>
+
+        {/* Divider */}
+        <div className="w-px bg-future-border-subtle" />
+
+        {/* Output */}
+        <div className="flex flex-1 flex-col overflow-hidden">
+          <SectionHeader title="Output" />
+          <div className="flex items-center gap-1 px-2 pb-2">
+            <MiniTab label="JSON" active />
+            <MiniTab label="Table" />
+            <MiniTab label="List" />
+          </div>
+          <CodeViewer lines={outputJsonLines} />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/apollo-wind/src/components/custom/flow-properties-simple.tsx b/packages/apollo-wind/src/components/custom/flow-properties-simple.tsx
new file mode 100644
index 000000000..9cae1e5c6
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/flow-properties-simple.tsx
@@ -0,0 +1,411 @@
+import {
+  Copy,
+  FileJson,
+  Folder,
+  Redo2,
+  RefreshCw,
+  Settings2,
+  Undo2,
+  Variable,
+  Webhook,
+  X,
+} from 'lucide-react';
+import * as React from 'react';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { fontFamily } from '@/foundation/Future/typography';
+import { cn } from '@/lib';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface PropertiesSimpleFieldOption {
+  /** Option value */
+  value: string;
+  /** Display label */
+  label: string;
+}
+
+export interface PropertiesSimpleField {
+  /** Field label */
+  label: string;
+  /** Whether field is required (shows asterisk) */
+  required?: boolean;
+  /** Current value displayed in the field */
+  value?: string;
+  /** Placeholder when no value is set */
+  placeholder?: string;
+  /** Whether the field has a value (uses filled styling) */
+  filled?: boolean;
+  /** Field type */
+  type?: 'select' | 'input' | 'url';
+  /** Options for select fields */
+  options?: PropertiesSimpleFieldOption[];
+  /** Show the "Graph control" icon */
+  showGraphControl?: boolean;
+}
+
+export interface PropertiesSimpleSection {
+  /** Section label (displayed uppercase) */
+  label: string;
+  /** Whether the section starts expanded */
+  defaultExpanded?: boolean;
+  /** Fields inside the section */
+  fields?: PropertiesSimpleField[];
+}
+
+export interface PropertiesSimpleProps {
+  className?: string;
+  /** Icon to show in the header (defaults to Webhook) */
+  icon?: React.ReactNode;
+  /** Title shown in the header */
+  title?: string;
+  /** Top-level fields (above accordion sections) */
+  fields?: PropertiesSimpleField[];
+  /** Collapsible accordion sections */
+  sections?: PropertiesSimpleSection[];
+  /** Callback when close button is clicked */
+  onClose?: () => void;
+  /** Callback when Graph control is clicked on a field */
+  onGraphControl?: (fieldLabel: string) => void;
+}
+
+// ============================================================================
+// Internal: Field item (uses real shadcn components)
+// ============================================================================
+
+function FieldItem({
+  field,
+  onGraphControl,
+}: {
+  field: PropertiesSimpleField;
+  onGraphControl?: (label: string) => void;
+}) {
+  const [value, setValue] = React.useState(field.value ?? '');
+
+  return (
+    <div className="flex flex-col gap-1 pt-4">
+      {/* Label row */}
+      <div className="flex items-center justify-between">
+        <span className="text-sm font-medium leading-5 text-future-foreground-muted">
+          {field.label}
+          {field.required && '*'}
+        </span>
+        {field.showGraphControl && (
+          <button
+            className="flex h-6 w-6 items-center justify-center rounded-lg bg-future-surface-overlay text-future-foreground-muted transition-colors hover:text-future-foreground"
+            onClick={() => onGraphControl?.(field.label)}
+            aria-label="Graph control"
+          >
+            <Settings2 className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+
+      {/* Field control */}
+      {field.type === 'select' ? (
+        <Select value={value || undefined} onValueChange={setValue}>
+          <SelectTrigger
+            className={cn(
+              'h-10 rounded-xl border-0 shadow-sm',
+              value
+                ? 'bg-future-surface-hover text-future-foreground'
+                : 'bg-future-surface-overlay text-future-foreground-muted'
+            )}
+          >
+            <SelectValue placeholder={field.placeholder ?? 'Select...'} />
+          </SelectTrigger>
+          <SelectContent className="border-future-border bg-future-surface-overlay text-future-foreground">
+            {(field.options ?? []).map((opt) => (
+              <SelectItem
+                key={opt.value}
+                value={opt.value}
+                className="focus:bg-future-surface-hover focus:text-future-foreground"
+              >
+                {opt.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      ) : field.type === 'url' ? (
+        <div className="flex h-10 items-center overflow-hidden rounded-xl bg-future-surface-overlay shadow-sm">
+          <Input
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            placeholder={field.placeholder}
+            className="h-full flex-1 rounded-none border-0 bg-transparent text-sm font-medium text-future-foreground-muted shadow-none placeholder:text-future-foreground-subtle focus-visible:ring-0"
+          />
+          <button
+            type="button"
+            className="flex h-full w-[50px] items-center justify-center border-l border-future-border text-future-foreground-muted transition-colors hover:text-future-foreground"
+            aria-label="Browse files"
+          >
+            <Folder className="h-5 w-5" />
+          </button>
+        </div>
+      ) : (
+        <Input
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          placeholder={field.placeholder}
+          className={cn(
+            'h-10 rounded-xl border-0 text-sm font-medium shadow-sm',
+            value
+              ? 'bg-future-surface-hover text-future-foreground'
+              : 'bg-future-surface-overlay text-future-foreground-muted placeholder:text-future-foreground-subtle'
+          )}
+        />
+      )}
+    </div>
+  );
+}
+
+// ============================================================================
+// Internal: JSON Editor Drawer
+// ============================================================================
+
+const sampleJsonLines = [
+  '{',
+  '  "extracted": {',
+  '    "vendor": "Acme Corp",',
+  '    "amount": 1250,',
+  '    "date": "2024-01-15",',
+  '    "items": [',
+  '      {',
+  '        "description": "Professional',
+  '  Services",',
+  '        "amount": 1250',
+  '      }',
+  '    ]',
+  '  },',
+  '  "invoiceId": "INV-2024-001",',
+  '  "timestamp": "2026-01-28T19:51:41.085Z"',
+  '}',
+];
+
+function EditorToolbarButton({ icon, label }: { icon: React.ReactNode; label: string }) {
+  return (
+    <button
+      className="flex h-8 w-8 items-center justify-center rounded-lg text-future-foreground-muted transition-colors hover:text-future-foreground"
+      aria-label={label}
+    >
+      {icon}
+    </button>
+  );
+}
+
+function JsonEditorDrawer({ open, onClose }: { open: boolean; onClose: () => void }) {
+  if (!open) return null;
+
+  return (
+    <div className="flex h-full w-full flex-col rounded-2xl border border-future-border bg-future-surface-raised">
+      {/* ── Header ──────────────────────────────────────────── */}
+      <div className="flex items-center justify-between px-6 py-4">
+        <span className="text-base font-semibold leading-5 tracking-[-0.4px] text-future-foreground">
+          JSON editor
+        </span>
+        <button
+          className="flex h-10 w-10 items-center justify-center rounded-xl bg-future-surface-overlay text-future-foreground-muted transition-colors hover:text-future-foreground"
+          onClick={onClose}
+          aria-label="Close editor"
+        >
+          <X className="h-5 w-5" />
+        </button>
+      </div>
+
+      {/* ── Toolbar ─────────────────────────────────────────── */}
+      <div className="flex items-center gap-2 px-6 pb-4">
+        <EditorToolbarButton icon={<Undo2 className="h-5 w-5" />} label="Undo" />
+        <EditorToolbarButton icon={<Redo2 className="h-5 w-5" />} label="Redo" />
+        <EditorToolbarButton icon={<Variable className="h-5 w-5" />} label="Variables" />
+        <EditorToolbarButton icon={<Copy className="h-5 w-5" />} label="Copy" />
+      </div>
+
+      {/* ── Code editor area ────────────────────────────────── */}
+      <div className="flex flex-1 flex-col overflow-hidden px-6 pb-4">
+        <div className="flex flex-1 flex-col overflow-hidden rounded-xl border border-future-border-subtle bg-future-surface shadow-sm">
+          {/* File header */}
+          <div className="flex items-center justify-between px-3 py-2.5">
+            <div className="flex items-center gap-2 text-future-foreground-muted">
+              <FileJson className="h-4 w-4" />
+              <span className="text-sm font-medium leading-none">script.js</span>
+            </div>
+            <button
+              className="flex h-5 w-5 items-center justify-center text-future-foreground-muted transition-colors hover:text-future-foreground"
+              aria-label="Refresh"
+            >
+              <RefreshCw className="h-4 w-4" />
+            </button>
+          </div>
+
+          {/* Code content */}
+          <div
+            className="flex flex-1 gap-6 overflow-auto px-3 py-3 text-sm leading-6"
+            style={{ fontFamily: fontFamily.monospace }}
+          >
+            {/* Line numbers */}
+            <div className="flex flex-col text-right text-future-foreground-subtle select-none">
+              {sampleJsonLines.map((_, i) => (
+                <span key={i}>{i + 1}</span>
+              ))}
+            </div>
+            {/* Code */}
+            <div className="flex flex-col whitespace-pre text-future-foreground-muted">
+              {sampleJsonLines.map((line, i) => (
+                <span key={i}>{line}</span>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ── Footer ──────────────────────────────────────────── */}
+      <div className="flex items-center justify-end gap-2 px-6 py-4">
+        <button
+          className="flex h-10 items-center gap-2 rounded-xl border border-future-border px-4 py-2 text-sm font-medium leading-5 text-future-foreground-subtle transition-colors hover:text-future-foreground"
+          onClick={onClose}
+        >
+          <span>Cancel</span>
+        </button>
+        <button
+          className="flex h-10 items-center gap-2 rounded-xl bg-future-accent px-4 py-2 text-sm font-semibold leading-5 text-future-foreground-inverse transition-colors hover:bg-future-accent/90"
+          onClick={onClose}
+        >
+          <span>Save</span>
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// PropertiesSimple
+// ============================================================================
+
+/**
+ * Simple properties panel for the Flow template.
+ *
+ * A compact right-side panel that shows node configuration fields
+ * and collapsible accordion sections. Based on the "Properties 1"
+ * Figma component.
+ *
+ * Features:
+ * - Header with node icon, title, and close button
+ * - Real shadcn Select, Input components for interactive fields
+ * - Shadcn Accordion for collapsible sections
+ * - "Graph control" icon opens a JSON editor drawer
+ */
+export function PropertiesSimple({
+  className,
+  icon,
+  title = 'HTTP Request',
+  fields = [],
+  sections = [],
+  onClose,
+  onGraphControl,
+}: PropertiesSimpleProps) {
+  const [editorOpen, setEditorOpen] = React.useState(false);
+
+  const handleGraphControl = (fieldLabel: string) => {
+    onGraphControl?.(fieldLabel);
+    setEditorOpen(true);
+  };
+
+  // Build default expanded keys for accordion
+  const defaultExpandedKeys = sections.filter((s) => s.defaultExpanded).map((s) => s.label);
+
+  return (
+    <div className="relative h-full w-[360px] shrink-0">
+      {/* ── Properties panel ──────────────────────────────────── */}
+      <div
+        className={cn(
+          'flex h-full w-full flex-col overflow-hidden rounded-2xl border border-future-border bg-future-surface-raised',
+          className
+        )}
+      >
+        {/* ── Header ────────────────────────────────────────────── */}
+        <div className="flex items-center justify-between border-b border-future-border px-4 py-4">
+          <div className="flex items-center gap-4">
+            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-future-accent-subtle">
+              {icon ?? <Webhook className="h-6 w-6 text-future-accent-foreground" />}
+            </div>
+            <span className="text-base font-semibold leading-5 tracking-[-0.4px] text-future-foreground">
+              {title}
+            </span>
+          </div>
+          <button
+            className="flex h-10 w-10 items-center justify-center rounded-xl bg-future-surface-overlay text-future-foreground-muted transition-colors hover:text-future-foreground"
+            onClick={onClose}
+            aria-label="Close properties"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* ── Scrollable content ─────────────────────────────────── */}
+        <div className="flex flex-1 flex-col overflow-y-auto">
+          {/* Top-level fields */}
+          {fields.length > 0 && (
+            <div className="flex flex-col px-6 pb-2">
+              {fields.map((field) => (
+                <FieldItem key={field.label} field={field} onGraphControl={handleGraphControl} />
+              ))}
+            </div>
+          )}
+
+          {/* Accordion sections */}
+          {sections.length > 0 && (
+            <Accordion type="multiple" defaultValue={defaultExpandedKeys} className="px-6">
+              {sections.map((section) => (
+                <AccordionItem
+                  key={section.label}
+                  value={section.label}
+                  className="border-b border-future-border-subtle"
+                >
+                  <AccordionTrigger className="py-4 hover:no-underline [&>svg]:text-future-foreground-muted">
+                    <span className="text-xs font-medium uppercase leading-6 tracking-wide text-future-foreground-muted">
+                      {section.label}
+                    </span>
+                  </AccordionTrigger>
+                  <AccordionContent className="pb-2 pt-0">
+                    {section.fields && section.fields.length > 0 && (
+                      <div className="flex flex-col">
+                        {section.fields.map((field) => (
+                          <FieldItem
+                            key={field.label}
+                            field={field}
+                            onGraphControl={handleGraphControl}
+                          />
+                        ))}
+                      </div>
+                    )}
+                  </AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          )}
+        </div>
+      </div>
+
+      {/* ── JSON Editor Drawer (overlays the properties panel) ── */}
+      {editorOpen && (
+        <div className="absolute inset-y-0 right-0 z-20 w-[480px]">
+          <JsonEditorDrawer open={editorOpen} onClose={() => setEditorOpen(false)} />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/apollo-wind/src/components/custom/global-header.stories.tsx b/packages/apollo-wind/src/components/custom/global-header.stories.tsx
new file mode 100644
index 000000000..7eef86d2a
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/global-header.stories.tsx
@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ChevronDown, SquareMenu } from 'lucide-react';
+import * as React from 'react';
+import { MaestroHeader } from './global-header';
+
+const meta = {
+  title: 'Components/UiPath/Global Header',
+  component: MaestroHeader,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof MaestroHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function SampleMenuNav() {
+  const [moreOpen, setMoreOpen] = React.useState(false);
+  return (
+    <nav className="flex flex-1 flex-col overflow-y-auto px-2 pt-2">
+      <div className="flex flex-col gap-1">
+        {['Home', 'Projects', 'Tasks', 'Settings', 'Reports'].map((label, i) => (
+          <button
+            key={i}
+            className="flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground first:bg-future-surface-hover first:text-future-foreground"
+          >
+            <SquareMenu className="h-4 w-4 shrink-0" />
+            <span className="truncate">{label}</span>
+          </button>
+        ))}
+      </div>
+      <div className="my-2 border-t border-future-border-subtle" />
+      <div className="flex flex-col gap-1">
+        <button
+          className="flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground"
+          onClick={() => setMoreOpen((prev) => !prev)}
+        >
+          <ChevronDown
+            className={`h-4 w-4 shrink-0 transition-transform duration-200 ${moreOpen ? 'rotate-180' : ''}`}
+          />
+          <span className="truncate">More</span>
+        </button>
+        {moreOpen && (
+          <div className="flex flex-col gap-1 pl-2">
+            {['Analytics', 'Integrations', 'API Keys', 'Audit Log', 'Help'].map((label, i) => (
+              <button
+                key={i}
+                className="flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground"
+              >
+                <SquareMenu className="h-4 w-4 shrink-0" />
+                <span className="truncate">{label}</span>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </nav>
+  );
+}
+
+export const Dark: Story = {
+  render: () => (
+    <div className="future-dark bg-future-surface">
+      <MaestroHeader
+        theme="dark"
+        title="Autopilot"
+        tenantName="Acme Corp"
+        menuContent={<SampleMenuNav />}
+      />
+    </div>
+  ),
+};
+
+export const Light: Story = {
+  render: () => (
+    <div className="future-light bg-future-surface">
+      <MaestroHeader
+        theme="light"
+        title="Autopilot"
+        tenantName="Acme Corp"
+        menuContent={<SampleMenuNav />}
+      />
+    </div>
+  ),
+};
diff --git a/packages/apollo-wind/src/components/custom/global-header.tsx b/packages/apollo-wind/src/components/custom/global-header.tsx
new file mode 100644
index 000000000..f149e0436
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/global-header.tsx
@@ -0,0 +1,382 @@
+import * as React from 'react';
+import {
+  Menu,
+  Search,
+  Sparkles,
+  Bell,
+  CircleHelp,
+  ChevronDown,
+  User,
+  Settings,
+  LogOut,
+  BookOpen,
+  MessageCircleQuestion,
+  ExternalLink,
+  Info,
+  AlertCircle,
+  CheckCircle2,
+  X,
+} from 'lucide-react';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import {
+  Sheet,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { cn } from '@/lib';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface MaestroHeaderProps {
+  className?: string;
+  /** Color theme — needed so portal-rendered dropdowns inherit the correct CSS variables */
+  theme?: 'dark' | 'light';
+  /** Application title shown next to the logo */
+  title?: string;
+  /** Current tenant name */
+  tenantName?: string;
+  /**
+   * Content for the app-launcher slide-out menu.
+   * When provided, the Menu icon toggles a left-side drawer that renders
+   * this content below the header. When omitted, no drawer is rendered.
+   */
+  menuContent?: React.ReactNode;
+  /** Callback when search is clicked */
+  onSearchClick?: () => void;
+}
+
+// ============================================================================
+// Internal: Icon button (plain, no dropdown)
+// ============================================================================
+
+function HeaderIconButton({
+  icon,
+  label,
+  onClick,
+  disabled,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  onClick?: () => void;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      className={cn(
+        'flex h-8 w-8 items-center justify-center rounded-lg text-future-foreground-muted transition-colors',
+        disabled ? 'cursor-default opacity-50' : 'hover:text-future-foreground'
+      )}
+      onClick={disabled ? undefined : onClick}
+      aria-label={label}
+      aria-disabled={disabled}
+      disabled={disabled}
+    >
+      {icon}
+    </button>
+  );
+}
+
+// ============================================================================
+// Internal: Notifications dropdown
+// ============================================================================
+
+function NotificationsDropdown({ themeClass }: { themeClass: string }) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          className="flex h-8 w-8 items-center justify-center rounded-lg text-future-foreground-muted transition-colors hover:text-future-foreground"
+          aria-label="Notifications"
+        >
+          <Bell className="h-5 w-5" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        sideOffset={8}
+        className={cn(themeClass, 'w-72 border-future-border bg-future-surface-overlay')}
+      >
+        <div className="px-3 py-2">
+          <p className="text-sm font-semibold text-future-foreground">Notifications</p>
+        </div>
+        <DropdownMenuSeparator className="bg-future-border-subtle" />
+        <DropdownMenuItem className="flex items-start gap-3 px-3 py-2.5 text-future-foreground-muted focus:bg-future-surface-hover focus:text-future-foreground">
+          <Info className="mt-0.5 h-4 w-4 shrink-0 text-future-accent-foreground" />
+          <div className="flex flex-col gap-0.5">
+            <span className="text-sm font-medium text-future-foreground">System update available</span>
+            <span className="text-xs text-future-foreground-muted">A new version is ready to install</span>
+          </div>
+        </DropdownMenuItem>
+        <DropdownMenuItem className="flex items-start gap-3 px-3 py-2.5 text-future-foreground-muted focus:bg-future-surface-hover focus:text-future-foreground">
+          <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-green-500" />
+          <div className="flex flex-col gap-0.5">
+            <span className="text-sm font-medium text-future-foreground">Flow completed</span>
+            <span className="text-xs text-future-foreground-muted">Invoice processing finished successfully</span>
+          </div>
+        </DropdownMenuItem>
+        <DropdownMenuItem className="flex items-start gap-3 px-3 py-2.5 text-future-foreground-muted focus:bg-future-surface-hover focus:text-future-foreground">
+          <AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-amber-500" />
+          <div className="flex flex-col gap-0.5">
+            <span className="text-sm font-medium text-future-foreground">Action required</span>
+            <span className="text-xs text-future-foreground-muted">Review pending approval requests</span>
+          </div>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+// ============================================================================
+// Internal: Help dropdown
+// ============================================================================
+
+function HelpDropdown({ themeClass }: { themeClass: string }) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          className="flex h-8 w-8 items-center justify-center rounded-lg text-future-foreground-muted transition-colors hover:text-future-foreground"
+          aria-label="Help"
+        >
+          <CircleHelp className="h-5 w-5" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        sideOffset={8}
+        className={cn(themeClass, 'w-56 border-future-border bg-future-surface-overlay')}
+      >
+        <DropdownMenuItem className="flex items-center gap-2 px-3 py-2 text-future-foreground-muted focus:bg-future-surface-hover focus:text-future-foreground">
+          <BookOpen className="h-4 w-4" />
+          <span className="text-sm">Documentation</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem className="flex items-center gap-2 px-3 py-2 text-future-foreground-muted focus:bg-future-surface-hover focus:text-future-foreground">
+          <MessageCircleQuestion className="h-4 w-4" />
+          <span className="text-sm">Support</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem className="flex items-center gap-2 px-3 py-2 text-future-foreground-muted focus:bg-future-surface-hover focus:text-future-foreground">
+          <ExternalLink className="h-4 w-4" />
+          <span className="text-sm">Community forum</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+// ============================================================================
+// Internal: Tenant selector popover
+// ============================================================================
+
+function TenantSelector({ tenantName, themeClass }: { tenantName: string; themeClass: string }) {
+  const [selected, setSelected] = React.useState(tenantName);
+
+  const tenants = [
+    { id: 'default', label: 'Default Tenant' },
+    { id: 'production', label: 'Production' },
+    { id: 'staging', label: 'Staging' },
+  ];
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button className="flex items-center gap-1 rounded-lg px-2 py-1 text-sm text-future-foreground-muted transition-colors hover:text-future-foreground">
+          <span>
+            Tenant: <span className="font-medium">{selected}</span>
+          </span>
+          <ChevronDown className="h-4 w-4" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="end"
+        sideOffset={8}
+        className={cn(themeClass, 'w-56 border-future-border bg-future-surface-overlay p-1')}
+      >
+        {tenants.map((tenant) => (
+          <button
+            key={tenant.id}
+            className={cn(
+              'flex w-full items-center rounded-md px-3 py-2 text-sm transition-colors hover:bg-future-surface-hover',
+              selected === tenant.label
+                ? 'font-medium text-future-foreground'
+                : 'text-future-foreground-muted'
+            )}
+            onClick={() => setSelected(tenant.label)}
+          >
+            {tenant.label}
+          </button>
+        ))}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// ============================================================================
+// Internal: Avatar dropdown
+// ============================================================================
+
+function AvatarDropdown({ themeClass }: { themeClass: string }) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button className="rounded-full focus:outline-none" aria-label="User menu">
+          <Avatar className="h-6 w-6 bg-future-accent">
+            <AvatarFallback className="bg-future-accent text-[10px] font-bold text-future-foreground-on-accent">
+              UI
+            </AvatarFallback>
+          </Avatar>
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        sideOffset={8}
+        className={cn(themeClass, 'w-48 border-future-border bg-future-surface-overlay')}
+      >
+        <DropdownMenuItem className="flex items-center gap-2 px-3 py-2 text-future-foreground-muted focus:bg-future-surface-hover focus:text-future-foreground">
+          <User className="h-4 w-4" />
+          <span className="text-sm">Profile</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem className="flex items-center gap-2 px-3 py-2 text-future-foreground-muted focus:bg-future-surface-hover focus:text-future-foreground">
+          <Settings className="h-4 w-4" />
+          <span className="text-sm">Settings</span>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator className="bg-future-border-subtle" />
+        <DropdownMenuItem className="flex items-center gap-2 px-3 py-2 text-future-foreground-muted focus:bg-future-surface-hover focus:text-future-foreground">
+          <LogOut className="h-4 w-4" />
+          <span className="text-sm">Log out</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+// ============================================================================
+// MaestroHeader
+// ============================================================================
+
+/**
+ * Global header bar for the Maestro template.
+ *
+ * Contains the UiPath waffle icon, application title, action icons
+ * (search, settings, notifications, help), a tenant selector, and
+ * user avatar. Fixed height of 48px.
+ *
+ * When `menuContent` is provided, clicking the Menu icon opens a
+ * slide-out drawer from the left (below the header) containing that
+ * content. The drawer state is managed internally.
+ *
+ * Interactive elements:
+ * - **Menu icon**: Toggles the app-launcher drawer (when `menuContent` is set)
+ * - **Notifications**: DropdownMenu with example notification items
+ * - **Help**: DropdownMenu with Documentation, Support, Community forum
+ * - **Tenant selector**: Popover with example tenant list
+ * - **Avatar**: DropdownMenu with Profile, Settings, Log out
+ */
+export function MaestroHeader({
+  className,
+  theme = 'dark',
+  title = 'Maestro',
+  tenantName = 'Select',
+  menuContent,
+  onSearchClick,
+}: MaestroHeaderProps) {
+  // Theme class applied to portal-rendered content (dropdowns/popovers)
+  // so CSS variables resolve correctly outside the template's DOM tree
+  const themeClass =
+    theme === 'legacy-dark'
+      ? 'legacy-dark'
+      : theme === 'legacy-light'
+        ? 'legacy-light'
+        : theme === 'light'
+          ? 'future-light'
+          : 'future-dark';
+
+  // Internal drawer state — only relevant when menuContent is provided
+  const [menuOpen, setMenuOpen] = React.useState(false);
+
+  return (
+    <>
+      <header
+        className={cn(
+          'flex h-12 shrink-0 items-center justify-between border-b border-future-border-subtle bg-future-surface px-4',
+          className
+        )}
+      >
+        {/* Left: waffle + title */}
+        <div className="flex items-center gap-3">
+          <button
+            className="flex h-8 w-8 items-center justify-center rounded-lg text-future-foreground-muted transition-colors hover:text-future-foreground"
+            onClick={() => menuContent && setMenuOpen((prev) => !prev)}
+            aria-label="App launcher"
+          >
+            {menuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+          </button>
+          <span className="text-sm font-semibold text-future-foreground">
+            {title}
+          </span>
+        </div>
+
+        {/* Right: actions + tenant + avatar */}
+        <div className="flex items-center gap-4">
+        <HeaderIconButton
+          icon={<Search className="h-5 w-5" />}
+          label="Search"
+          onClick={onSearchClick}
+          disabled
+        />
+        <HeaderIconButton
+          icon={<Sparkles className="h-5 w-5" />}
+          label="AI"
+          disabled
+        />
+          <NotificationsDropdown themeClass={themeClass} />
+          <HelpDropdown themeClass={themeClass} />
+          <TenantSelector tenantName={tenantName} themeClass={themeClass} />
+          <AvatarDropdown themeClass={themeClass} />
+        </div>
+      </header>
+
+      {/* App-launcher menu — slides in from left, below the header */}
+      {menuContent && (
+        <Sheet open={menuOpen} onOpenChange={setMenuOpen}>
+          <SheetPortal>
+            {/* Overlay starts below the 48px header */}
+            <SheetOverlay className="top-12" />
+            <SheetPrimitive.Content
+              className={cn(
+                themeClass,
+                'fixed left-0 top-12 bottom-0 z-50 w-[300px] border-r border-future-border-subtle bg-future-surface p-0 shadow-lg',
+                'data-[state=open]:animate-in data-[state=closed]:animate-out',
+                'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left',
+                'data-[state=closed]:duration-300 data-[state=open]:duration-300'
+              )}
+            >
+              {/* Accessible title (visually hidden) */}
+              <SheetTitle className="sr-only">App launcher</SheetTitle>
+
+              {/* Menu content */}
+              <div className="flex h-full flex-col overflow-y-auto">
+                {menuContent}
+              </div>
+            </SheetPrimitive.Content>
+          </SheetPortal>
+        </Sheet>
+      )}
+    </>
+  );
+}
diff --git a/packages/apollo-wind/src/components/custom/grid-maestro.stories.tsx b/packages/apollo-wind/src/components/custom/grid-maestro.stories.tsx
new file mode 100644
index 000000000..b036da713
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/grid-maestro.stories.tsx
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Canvas, Grid, GridItem } from './grid-maestro';
+
+const meta = {
+  title: 'Components/UiPath/Grid (Maestro)',
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function SampleCard({ label }: { label: string }) {
+  return (
+    <div className="flex h-32 items-center justify-center rounded-xl border border-future-border-subtle bg-future-surface p-6 text-sm font-medium text-future-foreground-muted">
+      {label}
+    </div>
+  );
+}
+
+export const Default: Story = {
+  render: () => (
+    <div className="future-dark">
+      <Canvas>
+        <Grid>
+          <GridItem><SampleCard label="Column 1" /></GridItem>
+          <GridItem><SampleCard label="Column 2" /></GridItem>
+          <GridItem><SampleCard label="Column 3" /></GridItem>
+          <GridItem><SampleCard label="Column 4" /></GridItem>
+        </Grid>
+      </Canvas>
+    </div>
+  ),
+};
diff --git a/packages/apollo-wind/src/components/custom/grid-maestro.tsx b/packages/apollo-wind/src/components/custom/grid-maestro.tsx
new file mode 100644
index 000000000..769632c00
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/grid-maestro.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { cn } from '@/lib';
+
+export function Canvas({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <main
+      className={cn(
+        'flex flex-1 flex-col overflow-y-auto bg-future-surface-raised p-6',
+        className
+      )}
+    >
+      {children}
+    </main>
+  );
+}
+
+/**
+ * Responsive grid:
+ *   < 768px   → 1 column
+ *   768–1023  → 2 columns
+ *   >= 1024   → 4 columns
+ */
+export function Grid({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        'grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4',
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function GridItem({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return <div className={className}>{children}</div>;
+}
diff --git a/packages/apollo-wind/src/components/custom/panel-delegate.stories.tsx b/packages/apollo-wind/src/components/custom/panel-delegate.stories.tsx
new file mode 100644
index 000000000..7933b622c
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/panel-delegate.stories.tsx
@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Folder, History, MessageCirclePlus, Settings } from 'lucide-react';
+import { DelegatePanel } from './panel-delegate';
+
+const meta = {
+  title: 'Components/UiPath/Panel (Delegate)',
+  component: DelegatePanel,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof DelegatePanel>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const sampleNavItems = [
+  {
+    id: 'chat',
+    label: 'Chat',
+    icon: <MessageCirclePlus className="h-5 w-5" />,
+    defaultOpen: true,
+    children: [
+      { id: 'chat-1', label: 'Invoice processing' },
+      { id: 'chat-2', label: 'Expense reports' },
+      { id: 'chat-3', label: 'Data extraction' },
+    ],
+  },
+  {
+    id: 'history',
+    label: 'History',
+    icon: <History className="h-5 w-5" />,
+    children: [
+      { id: 'hist-1', label: 'Yesterday' },
+      { id: 'hist-2', label: 'Last week' },
+    ],
+  },
+  {
+    id: 'folders',
+    label: 'Folders',
+    icon: <Folder className="h-5 w-5" />,
+  },
+  {
+    id: 'settings',
+    label: 'Settings',
+    icon: <Settings className="h-5 w-5" />,
+  },
+];
+
+export const Default: Story = {
+  render: () => (
+    <div className="future-dark flex h-[600px] bg-future-surface">
+      <DelegatePanel
+        defaultOpen
+        navItems={sampleNavItems}
+        activeNavId="chat"
+        selectedChildId="chat-1"
+      />
+      <div className="flex flex-1 items-center justify-center text-sm text-future-foreground-muted">
+        Content area
+      </div>
+    </div>
+  ),
+};
+
+export const Collapsed: Story = {
+  render: () => (
+    <div className="future-dark flex h-[600px] bg-future-surface">
+      <DelegatePanel defaultOpen={false} navItems={sampleNavItems} activeNavId="chat" />
+      <div className="flex flex-1 items-center justify-center text-sm text-future-foreground-muted">
+        Content area
+      </div>
+    </div>
+  ),
+};
diff --git a/packages/apollo-wind/src/components/custom/panel-delegate.tsx b/packages/apollo-wind/src/components/custom/panel-delegate.tsx
new file mode 100644
index 000000000..c7f6575b4
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/panel-delegate.tsx
@@ -0,0 +1,343 @@
+import { ChevronDown, MessageCirclePlus, PanelRightOpen, PictureInPicture2 } from 'lucide-react';
+import * as React from 'react';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { cn } from '@/lib';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface NavItem {
+  id: string;
+  label: string;
+  icon: React.ReactNode;
+  children?: NavChildItem[];
+  /** Whether the collapsible section starts expanded. Defaults to true. */
+  defaultOpen?: boolean;
+}
+
+export interface NavChildItem {
+  id: string;
+  label: string;
+}
+
+export interface DelegatePanelProps {
+  className?: string;
+  /** Whether the panel starts expanded */
+  defaultOpen?: boolean;
+  /** Controlled open state (overrides internal state when provided) */
+  open?: boolean;
+  /** Callback when the panel open state changes */
+  onOpenChange?: (open: boolean) => void;
+  /** Navigation items */
+  navItems?: NavItem[];
+  /** ID of the currently active top-level nav */
+  activeNavId?: string;
+  /** Callback when a top-level nav is activated */
+  onNavChange?: (navId: string) => void;
+  /** ID of the currently selected nav child */
+  selectedChildId?: string;
+  /** Callback when a nav child is selected */
+  onChildSelect?: (childId: string) => void;
+}
+
+// ============================================================================
+// Internal sub-components
+// ============================================================================
+
+/** UiPath logo mark */
+function UiPathLogo({ className }: { className?: string }) {
+  return (
+    <div
+      className={cn(
+        'flex h-9 w-9 items-center justify-center rounded-lg bg-future-accent shadow-sm',
+        className
+      )}
+    >
+      <span className="text-xs font-bold text-future-foreground-on-accent select-none">Ui</span>
+    </div>
+  );
+}
+
+/** A single top-level nav item in expanded mode */
+function ExpandedNavItem({
+  item,
+  isOpen,
+  onToggle,
+  selectedChildId,
+  onChildSelect,
+}: {
+  item: NavItem;
+  isOpen: boolean;
+  onToggle: () => void;
+  selectedChildId?: string;
+  onChildSelect?: (childId: string) => void;
+}) {
+  const isExpandable = Array.isArray(item.children);
+
+  if (!isExpandable) {
+    return (
+      <button
+        className="flex h-10 w-full items-center gap-2 rounded-2xl px-1 text-future-foreground-muted transition-colors hover:bg-future-surface-hover"
+        onClick={onToggle}
+      >
+        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg">
+          {item.icon}
+        </div>
+        <span className="text-sm font-semibold">{item.label}</span>
+      </button>
+    );
+  }
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={() => onToggle()}>
+      <CollapsibleTrigger asChild>
+        <button className="flex h-10 w-full items-center justify-between rounded-2xl px-1 text-future-foreground-muted transition-colors hover:bg-future-surface-hover">
+          <div className="flex items-center gap-2">
+            <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg">
+              {item.icon}
+            </div>
+            <span className="text-sm font-semibold">{item.label}</span>
+          </div>
+          <div className="flex h-9 w-9 shrink-0 items-center justify-center">
+            <ChevronDown
+              className={cn('h-5 w-5 transition-transform duration-200', isOpen && 'rotate-180')}
+            />
+          </div>
+        </button>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="flex flex-col">
+          {item.children?.map((child) => (
+            <button
+              key={child.id}
+              className={cn(
+                'flex h-10 items-center rounded-2xl pl-12 pr-3 text-sm font-medium text-future-foreground-muted transition-colors hover:bg-future-surface-hover',
+                selectedChildId === child.id &&
+                  'bg-future-surface-hover text-future-foreground-on-accent'
+              )}
+              onClick={() => onChildSelect?.(child.id)}
+            >
+              {child.label}
+            </button>
+          ))}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+/** A single icon-only nav item in collapsed mode */
+function CollapsedNavItem({
+  item,
+  isActive,
+  onClick,
+}: {
+  item: NavItem;
+  isActive: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          className={cn(
+            'flex h-12 w-full items-center justify-center text-future-foreground-muted transition-colors hover:text-future-foreground',
+            isActive && 'text-future-accent-foreground'
+          )}
+          onClick={onClick}
+        >
+          <div
+            className={cn(
+              'flex h-9 w-9 items-center justify-center rounded-lg transition-colors',
+              isActive && 'bg-future-accent-subtle'
+            )}
+          >
+            {item.icon}
+          </div>
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="right">{item.label}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+// ============================================================================
+// DelegatePanel
+// ============================================================================
+
+/** Collapsible left-hand navigation panel for Delegate templates. */
+export function DelegatePanel({
+  className,
+  defaultOpen = true,
+  open: controlledOpen,
+  onOpenChange,
+  navItems = [],
+  activeNavId: controlledActiveNavId,
+  onNavChange,
+  selectedChildId,
+  onChildSelect,
+}: DelegatePanelProps) {
+  // Panel open/close state — supports both controlled and uncontrolled usage
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+  const panelOpen = controlledOpen ?? internalOpen;
+  const setPanelOpen = React.useCallback(
+    (next: boolean) => {
+      setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [onOpenChange]
+  );
+
+  // Active nav state — supports both controlled and uncontrolled usage
+  const [internalActiveNavId, setInternalActiveNavId] = React.useState<string>(
+    navItems[0]?.id ?? ''
+  );
+  const activeNavId = controlledActiveNavId ?? internalActiveNavId;
+  const setActiveNavId = React.useCallback(
+    (id: string) => {
+      setInternalActiveNavId(id);
+      onNavChange?.(id);
+    },
+    [onNavChange]
+  );
+
+  // Collapsible sections state
+  const [openSections, setOpenSections] = React.useState<Record<string, boolean>>(() => {
+    const initial: Record<string, boolean> = {};
+    navItems.forEach((item) => {
+      if (item.children && item.children.length > 0) {
+        initial[item.id] = item.defaultOpen ?? true;
+      }
+    });
+    return initial;
+  });
+
+  const toggleSection = (id: string) => {
+    setOpenSections((prev) => ({ ...prev, [id]: !prev[id] }));
+  };
+
+  return (
+    <TooltipProvider delayDuration={300}>
+      <div
+        className={cn(
+          'flex flex-col justify-between bg-future-surface-overlay shadow-[0px_4px_24px_0px_rgba(0,0,0,0.25)] transition-[width] duration-300 ease-in-out',
+          panelOpen ? 'w-80' : 'w-[60px]',
+          className
+        )}
+      >
+        {/* Top section */}
+        <div className="flex flex-1 flex-col overflow-hidden">
+          {/* Header */}
+          <div
+            className={cn(
+              'flex shrink-0 items-center gap-2 pt-1',
+              panelOpen ? 'pl-1 pr-4' : 'justify-center px-0 pt-3'
+            )}
+          >
+            {/* Logo area */}
+            <div className="flex h-[60px] w-[60px] shrink-0 items-center justify-center">
+              <UiPathLogo />
+            </div>
+
+            {/* Header actions (expanded only) */}
+            {panelOpen && (
+              <div className="flex flex-1 items-center justify-between">
+                <div className="flex items-center gap-[18px]">
+                  <button
+                    type="button"
+                    className="text-future-foreground-muted transition-colors hover:text-future-foreground"
+                    aria-label="New conversation"
+                  >
+                    <MessageCirclePlus className="h-5 w-5" />
+                  </button>
+                  <button
+                    type="button"
+                    className="text-future-foreground-muted transition-colors hover:text-future-foreground"
+                    aria-label="Picture in picture"
+                  >
+                    <PictureInPicture2 className="h-5 w-5" />
+                  </button>
+                </div>
+                <button
+                  type="button"
+                  className="text-future-foreground-muted transition-colors hover:text-future-foreground"
+                  onClick={() => setPanelOpen(false)}
+                  aria-label="Collapse panel"
+                >
+                  <PanelRightOpen className="h-5 w-5" />
+                </button>
+              </div>
+            )}
+          </div>
+
+          {/* Navigation */}
+          <ScrollArea className="flex-1">
+            {panelOpen ? (
+              /* Expanded navigation */
+              <nav className="flex flex-col gap-1 px-3 pt-[18px]">
+                {navItems.map((item) => (
+                  <ExpandedNavItem
+                    key={item.id}
+                    item={item}
+                    isOpen={openSections[item.id] ?? false}
+                    onToggle={() => {
+                      if (item.children?.length) {
+                        toggleSection(item.id);
+                      }
+                      setActiveNavId(item.id);
+                    }}
+                    selectedChildId={selectedChildId}
+                    onChildSelect={onChildSelect}
+                  />
+                ))}
+              </nav>
+            ) : (
+              /* Collapsed navigation */
+              <nav className="flex flex-col items-center pt-[18px]">
+                {/* Expand button */}
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      className="flex h-12 w-full items-center justify-center text-future-foreground-muted transition-colors hover:text-future-foreground"
+                      onClick={() => setPanelOpen(true)}
+                    >
+                      <div className="flex h-9 w-9 items-center justify-center rounded-lg">
+                        <PanelRightOpen className="h-5 w-5 -scale-x-100" />
+                      </div>
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent side="right">Expand panel</TooltipContent>
+                </Tooltip>
+
+                {navItems.map((item) => (
+                  <CollapsedNavItem
+                    key={item.id}
+                    item={item}
+                    isActive={activeNavId === item.id}
+                    onClick={() => {
+                      setActiveNavId(item.id);
+                      setPanelOpen(true);
+                    }}
+                  />
+                ))}
+              </nav>
+            )}
+          </ScrollArea>
+        </div>
+
+        {/* Footer */}
+        <div className="flex h-[60px] shrink-0 items-center justify-start px-3">
+          <Avatar className="h-8 w-8 bg-future-surface-raised">
+            <AvatarFallback className="bg-future-surface-raised text-xs text-future-foreground-muted">
+              U
+            </AvatarFallback>
+          </Avatar>
+        </div>
+      </div>
+    </TooltipProvider>
+  );
+}
diff --git a/packages/apollo-wind/src/components/custom/panel-flow.stories.tsx b/packages/apollo-wind/src/components/custom/panel-flow.stories.tsx
new file mode 100644
index 000000000..4cc29aa4b
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/panel-flow.stories.tsx
@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { FlowPanel, defaultFlowNavItems } from './panel-flow';
+
+const meta = {
+  title: 'Components/UiPath/Panel (Flow)',
+  component: FlowPanel,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof FlowPanel>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const sampleMessages = [
+  { id: '1', role: 'user' as const, content: 'Build an invoice processing workflow' },
+  { id: '2', role: 'assistant' as const, content: 'I\'ll create a workflow that extracts data from invoices using Document Understanding, validates the amounts, and routes them for approval.' },
+  { id: '3', role: 'user' as const, content: 'Add error handling for invalid formats' },
+];
+
+export const Default: Story = {
+  render: () => (
+    <div className="future-dark flex h-[600px] bg-future-surface">
+      <FlowPanel
+        open
+        navItems={defaultFlowNavItems}
+        activeNavId="chat"
+        chatMessages={sampleMessages}
+      />
+      <div className="flex flex-1 items-center justify-center text-sm text-future-foreground-muted">
+        Canvas area
+      </div>
+    </div>
+  ),
+};
+
+export const Collapsed: Story = {
+  render: () => (
+    <div className="future-dark flex h-[600px] bg-future-surface">
+      <FlowPanel
+        open={false}
+        navItems={defaultFlowNavItems}
+        activeNavId="chat"
+      />
+      <div className="flex flex-1 items-center justify-center text-sm text-future-foreground-muted">
+        Canvas area
+      </div>
+    </div>
+  ),
+};
diff --git a/packages/apollo-wind/src/components/custom/panel-flow.tsx b/packages/apollo-wind/src/components/custom/panel-flow.tsx
new file mode 100644
index 000000000..c484f76fb
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/panel-flow.tsx
@@ -0,0 +1,288 @@
+import { CornerDownLeft, House, MessageCircle, PanelRightOpen, Plus, Workflow } from 'lucide-react';
+import * as React from 'react';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { cn } from '@/lib';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface FlowPanelNavItem {
+  id: string;
+  label: string;
+  icon: React.ReactNode;
+}
+
+export interface FlowPanelChatMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+}
+
+export interface FlowPanelProps {
+  className?: string;
+  /** Whether the expanded panel is open */
+  open?: boolean;
+  /** Callback to toggle expanded panel */
+  onOpenChange?: (open: boolean) => void;
+  /** Navigation items shown as icon buttons */
+  navItems?: FlowPanelNavItem[];
+  /** Currently active nav item ID */
+  activeNavId?: string;
+  /** Callback when a nav item is clicked */
+  onNavChange?: (navId: string) => void;
+  /** Chat messages to display in the expanded panel */
+  chatMessages?: FlowPanelChatMessage[];
+  /** Content to render inside the expanded panel (overrides default chat UI) */
+  expandedContent?: React.ReactNode;
+}
+
+// ============================================================================
+// Internal: UiPath logo
+// ============================================================================
+
+function UiPathLogo() {
+  return (
+    <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-future-accent shadow-sm">
+      <span className="text-xs font-bold text-future-foreground-on-accent select-none">Ui</span>
+    </div>
+  );
+}
+
+// ============================================================================
+// Internal: Icon rail (always 60px)
+// ============================================================================
+
+function IconRail({
+  navItems,
+  activeId,
+  onNavClick,
+  hasShadow,
+}: {
+  navItems: FlowPanelNavItem[];
+  activeId: string;
+  onNavClick: (id: string) => void;
+  hasShadow?: boolean;
+}) {
+  return (
+    <div
+      className={cn(
+        'flex w-[60px] shrink-0 flex-col justify-between bg-future-surface-overlay',
+        hasShadow && 'shadow-[0px_4px_16px_0px_rgba(0,0,0,0.25)]'
+      )}
+    >
+      {/* Top: logo + nav */}
+      <div className="flex flex-col">
+        <div className="flex h-[60px] w-[60px] shrink-0 items-center justify-center">
+          <UiPathLogo />
+        </div>
+        <nav className="flex flex-col items-center pt-[18px]">
+          {navItems.map((item) => (
+            <Tooltip key={item.id}>
+              <TooltipTrigger asChild>
+                <button
+                  className={cn(
+                    'flex h-12 w-full items-center justify-center text-future-foreground-muted transition-colors hover:text-future-foreground',
+                    activeId === item.id && 'text-future-accent-foreground'
+                  )}
+                  onClick={() => onNavClick(item.id)}
+                >
+                  <div
+                    className={cn(
+                      'flex h-9 w-9 items-center justify-center rounded-lg transition-colors',
+                      activeId === item.id && 'bg-future-surface-hover'
+                    )}
+                  >
+                    {item.icon}
+                  </div>
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="right">{item.label}</TooltipContent>
+            </Tooltip>
+          ))}
+        </nav>
+      </div>
+
+      {/* Footer: avatar */}
+      <div className="flex h-[60px] shrink-0 items-center justify-center">
+        <Avatar className="h-8 w-8 bg-future-surface-raised">
+          <AvatarFallback className="bg-future-surface-raised text-xs text-future-foreground-muted">
+            U
+          </AvatarFallback>
+        </Avatar>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// Internal: Default chat content for expanded panel
+// ============================================================================
+
+function DefaultChatContent({ chatMessages }: { chatMessages: FlowPanelChatMessage[] }) {
+  return (
+    <div className="flex flex-1 flex-col justify-end gap-7 overflow-y-auto">
+      {chatMessages.map((msg) =>
+        msg.role === 'user' ? (
+          <div key={msg.id} className="flex flex-col items-end pr-6">
+            <div className="max-w-[360px] rounded-tl-2xl rounded-tr-2xl rounded-bl-2xl rounded-br-[4px] bg-future-surface-raised px-6 py-4">
+              <p className="text-base leading-6 tracking-[-0.4px] text-future-foreground">
+                {msg.content}
+              </p>
+            </div>
+          </div>
+        ) : (
+          <div key={msg.id} className="flex items-center gap-2">
+            <p className="text-base font-medium leading-5 text-future-foreground-muted">
+              {msg.content}
+            </p>
+          </div>
+        )
+      )}
+    </div>
+  );
+}
+
+// ============================================================================
+// Internal: Chat input
+// ============================================================================
+
+function ChatInput() {
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex h-12 items-center rounded-2xl border border-future-border bg-future-surface-raised px-4">
+        <input
+          type="text"
+          placeholder="Ask me to help build your Flow"
+          className="flex-1 bg-transparent text-sm text-future-foreground placeholder:text-future-foreground-subtle outline-none"
+          readOnly
+        />
+      </div>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            className="flex h-8 w-8 items-center justify-center rounded-lg text-future-foreground-muted hover:text-future-foreground"
+            aria-label="Add attachment"
+          >
+            <Plus className="h-5 w-5" />
+          </button>
+          <button
+            type="button"
+            className="flex h-8 w-8 items-center justify-center rounded-lg text-future-foreground-muted hover:text-future-foreground"
+            aria-label="Add workflow"
+          >
+            <Workflow className="h-5 w-5" />
+          </button>
+        </div>
+        <button
+          type="button"
+          className="flex h-8 w-8 items-center justify-center rounded-full bg-future-accent text-future-foreground-on-accent"
+          aria-label="Submit message"
+        >
+          <CornerDownLeft className="h-4 w-4" />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// Internal: Expanded panel
+// ============================================================================
+
+function ExpandedPanel({
+  chatMessages,
+  expandedContent,
+  onClose,
+}: {
+  chatMessages: FlowPanelChatMessage[];
+  expandedContent?: React.ReactNode;
+  onClose: () => void;
+}) {
+  return (
+    <div className="flex h-full w-[420px] shrink-0 flex-col justify-between overflow-hidden bg-future-surface-overlay px-4 pb-4 pt-3">
+      {/* Header: Flow / Autopilot tabs + close */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4 text-base tracking-[-0.6px] leading-9">
+          <span className="font-bold text-future-foreground">Flow</span>
+          <span className="font-medium text-future-foreground-subtle">Autopilot</span>
+        </div>
+        <button
+          className="text-future-foreground-muted transition-colors hover:text-future-foreground"
+          onClick={onClose}
+          aria-label="Close panel"
+        >
+          <PanelRightOpen className="h-5 w-5" />
+        </button>
+      </div>
+
+      {/* Chat content */}
+      {expandedContent ?? <DefaultChatContent chatMessages={chatMessages} />}
+
+      {/* Chat input */}
+      <ChatInput />
+    </div>
+  );
+}
+
+// ============================================================================
+// FlowPanel
+// ============================================================================
+
+/**
+ * Flow template left panel with collapsed icon rail and optional expanded
+ * chat panel.
+ *
+ * - **Collapsed**: 60px icon rail with logo, nav icons, and avatar
+ * - **Expanded**: Icon rail + 420px chat panel with Flow/Autopilot tabs,
+ *   chat messages, and input field
+ */
+export function FlowPanel({
+  className,
+  open = false,
+  onOpenChange,
+  navItems = [],
+  activeNavId,
+  onNavChange,
+  chatMessages = [],
+  expandedContent,
+}: FlowPanelProps) {
+  const [internalActiveId, setInternalActiveId] = React.useState(navItems[0]?.id ?? '');
+  const activeId = activeNavId ?? internalActiveId;
+
+  const handleNavClick = (id: string) => {
+    setInternalActiveId(id);
+    onNavChange?.(id);
+    // Clicking a nav item opens the expanded panel
+    onOpenChange?.(true);
+  };
+
+  return (
+    <TooltipProvider delayDuration={300}>
+      <div className={cn('flex h-full', className)}>
+        <IconRail
+          navItems={navItems}
+          activeId={activeId}
+          onNavClick={handleNavClick}
+          hasShadow={open}
+        />
+        {open && (
+          <ExpandedPanel
+            chatMessages={chatMessages}
+            expandedContent={expandedContent}
+            onClose={() => onOpenChange?.(false)}
+          />
+        )}
+      </div>
+    </TooltipProvider>
+  );
+}
+
+// Default nav items matching Figma (Chat, Home, Flows)
+export const defaultFlowNavItems: FlowPanelNavItem[] = [
+  { id: 'chat', label: 'Chat', icon: <MessageCircle className="h-5 w-5" /> },
+  { id: 'home', label: 'Home', icon: <House className="h-5 w-5" /> },
+  { id: 'flows', label: 'Flows', icon: <Workflow className="h-5 w-5" /> },
+];
diff --git a/packages/apollo-wind/src/components/custom/panel-maestro.stories.tsx b/packages/apollo-wind/src/components/custom/panel-maestro.stories.tsx
new file mode 100644
index 000000000..38e18ce32
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/panel-maestro.stories.tsx
@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import * as React from 'react';
+import { Panel } from './panel-maestro';
+
+const meta = {
+  title: 'Components/UiPath/Panel (Maestro)',
+  component: Panel,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof Panel>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function SampleNav() {
+  return (
+    <nav className="flex flex-col gap-1 px-2 pt-2">
+      {['Dashboard', 'Projects', 'Tasks', 'Settings', 'Reports'].map((label, i) => (
+        <button
+          key={i}
+          className="flex h-9 items-center rounded-lg px-3 text-sm font-medium text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground first:bg-future-surface-hover first:text-future-foreground"
+        >
+          <span className="truncate">{label}</span>
+        </button>
+      ))}
+    </nav>
+  );
+}
+
+function PanelDemo({ side }: { side: 'left' | 'right' }) {
+  const [collapsed, setCollapsed] = React.useState(false);
+  return (
+    <div className="future-dark flex h-[500px] bg-future-surface-raised">
+      {side === 'left' && (
+        <Panel side="left" isCollapsed={collapsed} onToggle={() => setCollapsed(!collapsed)}>
+          <SampleNav />
+        </Panel>
+      )}
+      <div className="flex flex-1 items-center justify-center text-sm text-future-foreground-muted">
+        Content area
+      </div>
+      {side === 'right' && (
+        <Panel side="right" isCollapsed={collapsed} onToggle={() => setCollapsed(!collapsed)}>
+          <div className="p-4 text-sm text-future-foreground-muted">Right panel content</div>
+        </Panel>
+      )}
+    </div>
+  );
+}
+
+export const LeftPanel: Story = {
+  render: () => <PanelDemo side="left" />,
+};
+
+export const RightPanel: Story = {
+  render: () => <PanelDemo side="right" />,
+};
diff --git a/packages/apollo-wind/src/components/custom/panel-maestro.tsx b/packages/apollo-wind/src/components/custom/panel-maestro.tsx
new file mode 100644
index 000000000..ee327d2e4
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/panel-maestro.tsx
@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn } from '@/lib';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface PanelProps {
+  /** Determines border side, arrow direction, and arrow position */
+  side: 'left' | 'right';
+  /** Panel content — only rendered when expanded */
+  children?: React.ReactNode;
+  /** Additional CSS classes */
+  className?: string;
+  /** Controlled collapsed state */
+  isCollapsed?: boolean;
+  /** Callback when the toggle button is clicked */
+  onToggle?: () => void;
+}
+
+// ============================================================================
+// Panel
+// ============================================================================
+
+/**
+ * Collapsible panel for the Maestro template (controlled).
+ *
+ * Dimensions:
+ * - **Expanded**: 300px wide
+ * - **Collapsed**: 32px wide
+ * - **Height**: fills parent (`h-full`)
+ *
+ * The expand/collapse toggle button is a 28×28px circle that straddles
+ * the panel border — half inside the panel, half outside — positioned
+ * 28px from the top.
+ *
+ * Content is only rendered when expanded. Transition is 300ms.
+ *
+ * State is managed by the parent — pass `isCollapsed` and `onToggle`.
+ */
+export function Panel({
+  side,
+  children,
+  className,
+  isCollapsed = false,
+  onToggle,
+}: PanelProps) {
+  const isExpanded = !isCollapsed;
+  const isLeft = side === 'left';
+
+  return (
+    <div
+      className={cn(
+        'relative flex h-full shrink-0 flex-col bg-future-surface transition-all duration-300',
+        isLeft
+          ? 'border-r border-future-border-subtle'
+          : 'border-l border-future-border-subtle',
+        isExpanded ? 'w-[300px]' : 'w-8',
+        className
+      )}
+    >
+      {/* Expand/collapse toggle button */}
+      <button
+        className="absolute z-10 flex h-7 w-7 items-center justify-center rounded-full border border-future-border bg-future-surface text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground"
+        style={{
+          top: 28,
+          ...(isLeft
+            ? { right: 0, transform: 'translateX(50%)' }
+            : { left: 0, transform: 'translateX(-50%)' }),
+        }}
+        onClick={onToggle}
+        aria-label={isExpanded ? 'Collapse panel' : 'Expand panel'}
+      >
+        {isLeft ? (
+          isExpanded ? (
+            <ChevronLeft className="h-4 w-4" />
+          ) : (
+            <ChevronRight className="h-4 w-4" />
+          )
+        ) : isExpanded ? (
+          <ChevronRight className="h-4 w-4" />
+        ) : (
+          <ChevronLeft className="h-4 w-4" />
+        )}
+      </button>
+
+      {/* Panel content — only rendered when expanded */}
+      {isExpanded && children}
+    </div>
+  );
+}
diff --git a/packages/apollo-wind/src/components/custom/toolbar-canvas.stories.tsx b/packages/apollo-wind/src/components/custom/toolbar-canvas.stories.tsx
new file mode 100644
index 000000000..a2945a744
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/toolbar-canvas.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { FlowCanvasToolbar } from './toolbar-canvas';
+
+const meta = {
+  title: 'Components/UiPath/Canvas Toolbar',
+  component: FlowCanvasToolbar,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof FlowCanvasToolbar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="future-dark bg-future-surface p-8">
+      <FlowCanvasToolbar activeMode="build" />
+    </div>
+  ),
+};
diff --git a/packages/apollo-wind/src/components/custom/toolbar-canvas.tsx b/packages/apollo-wind/src/components/custom/toolbar-canvas.tsx
new file mode 100644
index 000000000..c6f0ea883
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/toolbar-canvas.tsx
@@ -0,0 +1,125 @@
+import * as React from 'react';
+import {
+  Workflow,
+  ListChecks,
+  Undo2,
+  Redo2,
+  Play,
+  Plus,
+  StickyNote,
+} from 'lucide-react';
+import { cn } from '@/lib';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface CanvasToolbarProps {
+  className?: string;
+  /** Active mode: 'build' | 'evaluate' */
+  activeMode?: 'build' | 'evaluate';
+  /** Callback when mode changes */
+  onModeChange?: (mode: 'build' | 'evaluate') => void;
+}
+
+// ============================================================================
+// Internal: separator
+// ============================================================================
+
+function ToolbarSeparator() {
+  return <div className="h-8 w-px bg-future-border-subtle" />;
+}
+
+// ============================================================================
+// Internal: icon button
+// ============================================================================
+
+function ToolbarButton({
+  icon,
+  label,
+  onClick,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  onClick?: () => void;
+}) {
+  return (
+    <button
+      className="flex h-8 w-8 items-center justify-center rounded-lg text-future-foreground-muted transition-colors hover:text-future-foreground"
+      onClick={onClick}
+      aria-label={label}
+    >
+      {icon}
+    </button>
+  );
+}
+
+// ============================================================================
+// CanvasToolbar
+// ============================================================================
+
+/**
+ * Bottom-center toolbar for the Flow canvas.
+ *
+ * Contains a Build/Evaluate toggle, undo/redo, play, add, and sticky note
+ * buttons. Anchored to bottom-center via absolute positioning in the
+ * parent layout.
+ */
+export function FlowCanvasToolbar({
+  className,
+  activeMode = 'build',
+  onModeChange,
+}: CanvasToolbarProps) {
+  return (
+    <div
+      className={cn(
+        'flex h-[60px] items-center gap-2 rounded-3xl border border-future-border bg-future-surface-raised px-2.5',
+        className
+      )}
+    >
+      {/* Build / Evaluate toggle */}
+      <div className="flex h-10 items-center rounded-xl border border-future-border-deep bg-future-surface-overlay p-1">
+        {/* Build */}
+        <button
+          className={cn(
+            'flex h-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5 transition-colors',
+            activeMode === 'build'
+              ? 'border border-future-border bg-future-surface text-future-foreground'
+              : 'text-future-foreground-subtle hover:text-future-foreground-hover'
+          )}
+          onClick={() => onModeChange?.('build')}
+        >
+          <Workflow className="h-5 w-5" />
+          <span>Build</span>
+        </button>
+        {/* Evaluate */}
+        <button
+          className={cn(
+            'flex h-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5 transition-colors',
+            activeMode === 'evaluate'
+              ? 'border border-future-border bg-future-surface text-future-foreground'
+              : 'text-future-foreground-subtle hover:text-future-foreground-hover'
+          )}
+          onClick={() => onModeChange?.('evaluate')}
+        >
+          <ListChecks className="h-5 w-5" />
+          <span>Evaluate</span>
+        </button>
+      </div>
+
+      <ToolbarSeparator />
+
+      <ToolbarButton icon={<Undo2 className="h-5 w-5" />} label="Undo" />
+      <ToolbarButton icon={<Redo2 className="h-5 w-5" />} label="Redo" />
+
+      <ToolbarSeparator />
+
+      <ToolbarButton icon={<Play className="h-5 w-5" />} label="Run" />
+
+      <ToolbarSeparator />
+
+      <ToolbarButton icon={<Plus className="h-5 w-5" />} label="Add node" />
+      <ToolbarButton icon={<StickyNote className="h-5 w-5" />} label="Add note" />
+    </div>
+  );
+}
diff --git a/packages/apollo-wind/src/components/custom/toolbar-view.stories.tsx b/packages/apollo-wind/src/components/custom/toolbar-view.stories.tsx
new file mode 100644
index 000000000..f92ef8313
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/toolbar-view.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { FlowViewToolbar } from './toolbar-view';
+
+const meta = {
+  title: 'Components/UiPath/View Toolbar',
+  component: FlowViewToolbar,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof FlowViewToolbar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="future-dark bg-future-surface p-8">
+      <FlowViewToolbar activeNodeSize="m" />
+    </div>
+  ),
+};
diff --git a/packages/apollo-wind/src/components/custom/toolbar-view.tsx b/packages/apollo-wind/src/components/custom/toolbar-view.tsx
new file mode 100644
index 000000000..372626286
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/toolbar-view.tsx
@@ -0,0 +1,120 @@
+import * as React from 'react';
+import {
+  ZoomIn,
+  ZoomOut,
+  Maximize2,
+  LayoutGrid,
+} from 'lucide-react';
+import { cn } from '@/lib';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface ViewToolbarProps {
+  className?: string;
+  /** Active node size: 's' | 'm' | 'l' */
+  activeNodeSize?: 's' | 'm' | 'l';
+  /** Callback for zoom/view actions */
+  onAction?: (action: string) => void;
+}
+
+// ============================================================================
+// Internal: icon button
+// ============================================================================
+
+function ViewButton({
+  icon,
+  label,
+  isActive,
+  onClick,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  isActive?: boolean;
+  onClick?: () => void;
+}) {
+  return (
+    <button
+      className={cn(
+        'flex h-8 w-8 items-center justify-center rounded-lg text-future-foreground-muted transition-colors hover:text-future-foreground',
+        isActive && 'rounded-2xl border border-future-border bg-future-surface text-future-foreground'
+      )}
+      onClick={onClick}
+      aria-label={label}
+    >
+      {icon}
+    </button>
+  );
+}
+
+// ============================================================================
+// Node size labels
+// ============================================================================
+
+function NodeSizeIcon({ size, isActive }: { size: 's' | 'm' | 'l'; isActive?: boolean }) {
+  const label = { s: 'S', m: 'M', l: 'L' }[size];
+  return (
+    <button
+      className={cn(
+        'flex h-8 w-8 items-center justify-center rounded-2xl text-xs font-bold text-future-foreground-muted transition-colors hover:text-future-foreground',
+        isActive && 'border border-future-border bg-future-surface text-future-foreground'
+      )}
+      aria-label={`Node size ${label}`}
+    >
+      {label}
+    </button>
+  );
+}
+
+// ============================================================================
+// ViewToolbar
+// ============================================================================
+
+/**
+ * Bottom-right view controls for the Flow canvas.
+ *
+ * Contains zoom in/out, fit-to-screen, grid toggle, and node size selector.
+ * Anchored to bottom-right via absolute positioning in the parent layout.
+ */
+export function FlowViewToolbar({
+  className,
+  activeNodeSize = 's',
+  onAction,
+}: ViewToolbarProps) {
+  return (
+    <div className={cn('flex flex-col gap-4', className)}>
+      {/* Zoom + view controls */}
+      <div className="flex w-10 flex-col items-center gap-1 rounded-xl bg-future-surface-raised p-1">
+        <ViewButton
+          icon={<ZoomIn className="h-5 w-5" />}
+          label="Zoom in"
+          onClick={() => onAction?.('zoom-in')}
+        />
+        <ViewButton
+          icon={<ZoomOut className="h-5 w-5" />}
+          label="Zoom out"
+          onClick={() => onAction?.('zoom-out')}
+        />
+        <div className="h-px w-6 bg-future-border-subtle" />
+        <ViewButton
+          icon={<Maximize2 className="h-5 w-5" />}
+          label="Fit to screen"
+          onClick={() => onAction?.('fit')}
+        />
+        <ViewButton
+          icon={<LayoutGrid className="h-5 w-5" />}
+          label="Toggle grid"
+          onClick={() => onAction?.('grid')}
+        />
+      </div>
+
+      {/* Node size selector */}
+      <div className="flex w-10 flex-col items-center gap-2 rounded-[20px] border border-future-border-deep bg-future-surface-raised p-1">
+        <NodeSizeIcon size="s" isActive={activeNodeSize === 's'} />
+        <NodeSizeIcon size="m" isActive={activeNodeSize === 'm'} />
+        <NodeSizeIcon size="l" isActive={activeNodeSize === 'l'} />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/apollo-wind/src/components/ui/accordion.stories.tsx b/packages/apollo-wind/src/components/ui/accordion.stories.tsx
index b0c54d28d..577668c08 100644
--- a/packages/apollo-wind/src/components/ui/accordion.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/accordion.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './accordion';
 
 const meta: Meta<typeof Accordion> = {
-  title: 'Design System/Data Display/Accordion',
+  title: 'Components/Data Display/Accordion',
   component: Accordion,
   tags: ['autodocs'],
 };
diff --git a/packages/apollo-wind/src/components/ui/alert-dialog.stories.tsx b/packages/apollo-wind/src/components/ui/alert-dialog.stories.tsx
index f2fae8f6f..bc72b2bef 100644
--- a/packages/apollo-wind/src/components/ui/alert-dialog.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/alert-dialog.stories.tsx
@@ -13,7 +13,7 @@ import {
 import { Button } from './button';
 
 const meta: Meta<typeof AlertDialog> = {
-  title: 'Design System/Overlays/Alert Dialog',
+  title: 'Components/Overlays/Alert Dialog',
   component: AlertDialog,
   tags: ['autodocs'],
 };
diff --git a/packages/apollo-wind/src/components/ui/alert.stories.tsx b/packages/apollo-wind/src/components/ui/alert.stories.tsx
index 318b34e36..690e7e00f 100644
--- a/packages/apollo-wind/src/components/ui/alert.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/alert.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta } from '@storybook/react-vite';
 import { Alert, AlertDescription, AlertTitle } from './alert';
 
 const meta: Meta<typeof Alert> = {
-  title: 'Design System/Feedback/Alert',
+  title: 'Components/Feedback/Alert',
   component: Alert,
   tags: ['autodocs'],
 };
diff --git a/packages/apollo-wind/src/components/ui/aspect-ratio.stories.tsx b/packages/apollo-wind/src/components/ui/aspect-ratio.stories.tsx
index 3ddbe3fa0..195241df4 100644
--- a/packages/apollo-wind/src/components/ui/aspect-ratio.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/aspect-ratio.stories.tsx
@@ -3,7 +3,7 @@ import { AspectRatio } from './aspect-ratio';
 import { Row } from './layout';
 
 const meta: Meta<typeof AspectRatio> = {
-  title: 'Design System/Layout/Aspect Ratio',
+  title: 'Components/Layout/Aspect Ratio',
   component: AspectRatio,
   tags: ['autodocs'],
 };
diff --git a/packages/apollo-wind/src/components/ui/badge.stories.tsx b/packages/apollo-wind/src/components/ui/badge.stories.tsx
index bdf68f332..a5c1aa55e 100644
--- a/packages/apollo-wind/src/components/ui/badge.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/badge.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Badge } from './badge';
 
 const meta = {
-  title: 'Design System/Data Display/Badge',
+  title: 'Components/Data Display/Badge',
   component: Badge,
   parameters: {
     layout: 'centered',
diff --git a/packages/apollo-wind/src/components/ui/breadcrumb.stories.tsx b/packages/apollo-wind/src/components/ui/breadcrumb.stories.tsx
index d691740bd..4339faec3 100644
--- a/packages/apollo-wind/src/components/ui/breadcrumb.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/breadcrumb.stories.tsx
@@ -9,7 +9,7 @@ import {
 } from './breadcrumb';
 
 const meta: Meta<typeof Breadcrumb> = {
-  title: 'Design System/Navigation/Breadcrumb',
+  title: 'Components/Navigation/Breadcrumb',
   component: Breadcrumb,
   tags: ['autodocs'],
 };
diff --git a/packages/apollo-wind/src/components/ui/button-group.stories.tsx b/packages/apollo-wind/src/components/ui/button-group.stories.tsx
index eb0258d99..b2bd6cc0b 100644
--- a/packages/apollo-wind/src/components/ui/button-group.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/button-group.stories.tsx
@@ -29,7 +29,7 @@ import {
 } from './dropdown-menu';
 
 const meta = {
-  title: 'Design System/Core/ButtonGroup',
+  title: 'Components/Core/ButtonGroup',
   component: ButtonGroup,
   parameters: {
     layout: 'centered',
diff --git a/packages/apollo-wind/src/components/ui/button.stories.tsx b/packages/apollo-wind/src/components/ui/button.stories.tsx
index 8621e09cf..95d3f1e77 100644
--- a/packages/apollo-wind/src/components/ui/button.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/button.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Button } from './button';
 
 const meta = {
-  title: 'Design System/Core/Button',
+  title: 'Components/Core/Button',
   component: Button,
   parameters: {
     layout: 'centered',
diff --git a/packages/apollo-wind/src/components/ui/calendar.stories.tsx b/packages/apollo-wind/src/components/ui/calendar.stories.tsx
index 18c18f974..934fae6b7 100644
--- a/packages/apollo-wind/src/components/ui/calendar.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/calendar.stories.tsx
@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { Calendar } from './calendar';
 
 const meta: Meta<typeof Calendar> = {
-  title: 'Design System/Data Display/Calendar',
+  title: 'Components/Data Display/Calendar',
   component: Calendar,
   tags: ['autodocs'],
 };
diff --git a/packages/apollo-wind/src/components/ui/card.stories.tsx b/packages/apollo-wind/src/components/ui/card.stories.tsx
index f4637b034..87f4e5141 100644
--- a/packages/apollo-wind/src/components/ui/card.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/card.stories.tsx
@@ -3,7 +3,7 @@ import { Button } from './button';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './card';
 
 const meta = {
-  title: 'Design System/Data Display/Card',
+  title: 'Components/Data Display/Card',
   component: Card,
   parameters: {
     layout: 'centered',
diff --git a/packages/apollo-wind/src/components/ui/checkbox.stories.tsx b/packages/apollo-wind/src/components/ui/checkbox.stories.tsx
index cede3a683..d98169cd1 100644
--- a/packages/apollo-wind/src/components/ui/checkbox.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/checkbox.stories.tsx
@@ -4,7 +4,7 @@ import { Label } from './label';
 import { Row, Column } from './layout';
 
 const meta = {
-  title: 'Design System/Core/Checkbox',
+  title: 'Components/Core/Checkbox',
   component: Checkbox,
   parameters: {
     layout: 'centered',
diff --git a/packages/apollo-wind/src/components/ui/collapsible.stories.tsx b/packages/apollo-wind/src/components/ui/collapsible.stories.tsx
index 863771849..09ea2632d 100644
--- a/packages/apollo-wind/src/components/ui/collapsible.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/collapsible.stories.tsx
@@ -5,7 +5,7 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './collapsib
 import { Row } from './layout';
 
 const meta: Meta<typeof Collapsible> = {
-  title: 'Design System/Data Display/Collapsible',
+  title: 'Components/Data Display/Collapsible',
   component: Collapsible,
   tags: ['autodocs'],
 };
diff --git a/packages/apollo-wind/src/components/ui/combobox.stories.tsx b/packages/apollo-wind/src/components/ui/combobox.stories.tsx
index f9631533c..616916ed8 100644
--- a/packages/apollo-wind/src/components/ui/combobox.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/combobox.stories.tsx
@@ -4,7 +4,7 @@ import { Combobox, ComboboxItem } from './combobox';
 import { Label } from './label';
 
 const meta = {
-  title: 'Design System/Core/Combobox',
+  title: 'Components/Core/Combobox',
   component: Combobox,
   parameters: {
     layout: 'centered',
diff --git a/packages/apollo-wind/src/components/ui/command.stories.tsx b/packages/apollo-wind/src/components/ui/command.stories.tsx
index 8e1ffe749..290238f3b 100644
--- a/packages/apollo-wind/src/components/ui/command.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/command.stories.tsx
@@ -22,7 +22,7 @@ import {
 } from './command';
 
 const meta = {
-  title: 'Design System/Navigation/Command',
+  title: 'Components/Navigation/Command',
   component: Command,
   parameters: {
     layout: 'centered',
diff --git a/packages/apollo-wind/src/components/ui/component-gallery.stories.tsx b/packages/apollo-wind/src/components/ui/component-gallery.stories.tsx
index 8a5406a61..ad0a5555d 100644
--- a/packages/apollo-wind/src/components/ui/component-gallery.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/component-gallery.stories.tsx
@@ -19,7 +19,7 @@ import { Calendar } from './calendar';
 import { Search } from 'lucide-react';
 
 const meta = {
-  title: 'Design System/All Components',
+  title: 'Components/All Components',
   parameters: {
     layout: 'fullscreen',
   },
diff --git a/packages/apollo-wind/src/components/ui/context-menu.stories.tsx b/packages/apollo-wind/src/components/ui/context-menu.stories.tsx
index a0ae07802..131e37500 100644
--- a/packages/apollo-wind/src/components/ui/context-menu.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/context-menu.stories.tsx
@@ -8,7 +8,7 @@ import {
 import { Row } from './layout';
 
 const meta: Meta<typeof ContextMenu> = {
-  title: 'Design System/Overlays/Context Menu',
+  title: 'Components/Overlays/Context Menu',
   component: ContextMenu,
   tags: ['autodocs'],
 };
diff --git a/packages/apollo-wind/src/components/ui/data-table.stories.tsx b/packages/apollo-wind/src/components/ui/data-table.stories.tsx
index 1ada28dcd..d3ae4fa51 100644
--- a/packages/apollo-wind/src/components/ui/data-table.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/data-table.stories.tsx
@@ -15,7 +15,7 @@ import {
 import type { EditableCellMeta } from './editable-cell';
 
 const meta = {
-  title: 'Design System/Data Display/Data Table',
+  title: 'Components/Data Display/Data Table',
   component: DataTable,
   parameters: {
     layout: 'padded',
diff --git a/packages/apollo-wind/src/components/ui/date-picker.stories.tsx b/packages/apollo-wind/src/components/ui/date-picker.stories.tsx
index e8f9d5307..eb02c40e1 100644
--- a/packages/apollo-wind/src/components/ui/date-picker.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/date-picker.stories.tsx
@@ -5,7 +5,7 @@ import { DatePicker, DateRangePicker } from './date-picker';
 import { Label } from './label';
 
 const meta = {
-  title: 'Design System/Core/Date Picker',
+  title: 'Components/Core/Date Picker',
   component: DatePicker,
   parameters: {
     layout: 'centered',
diff --git a/packages/apollo-wind/src/components/ui/datetime-picker.stories.tsx b/packages/apollo-wind/src/components/ui/datetime-picker.stories.tsx
index 42e3f00f1..37edd7088 100644
--- a/packages/apollo-wind/src/components/ui/datetime-picker.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/datetime-picker.stories.tsx
@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { DateTimePicker } from './datetime-picker';
 
 const meta = {
-  title: 'Design System/Core/DateTime Picker',
+  title: 'Components/Core/DateTime Picker',
   component: DateTimePicker,
   parameters: {
     layout: 'centered',
diff --git a/packages/apollo-wind/src/components/ui/dialog.stories.tsx b/packages/apollo-wind/src/components/ui/dialog.stories.tsx
index 9cdc95747..b512c03af 100644
--- a/packages/apollo-wind/src/components/ui/dialog.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/dialog.stories.tsx
@@ -10,7 +10,7 @@ import {
 } from './dialog';
 
 const meta: Meta<typeof Dialog> = {
-  title: 'Design System/Overlays/Dialog',
+  title: 'Components/Overlays/Dialog',
   component: Dialog,
   tags: ['autodocs'],
 };
diff --git a/packages/apollo-wind/src/components/ui/drawer.stories.tsx b/packages/apollo-wind/src/components/ui/drawer.stories.tsx
index a9f2256d5..dd83a99e1 100644
--- a/packages/apollo-wind/src/components/ui/drawer.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/drawer.stories.tsx
@@ -12,7 +12,7 @@ import {
 } from './drawer';
 
 const meta: Meta<typeof Drawer> = {
-  title: 'Design System/Overlays/Drawer',
+  title: 'Components/Overlays/Drawer',
   component: Drawer,
   tags: ['autodocs'],
 };
diff --git a/packages/apollo-wind/src/components/ui/dropdown-menu.stories.tsx b/packages/apollo-wind/src/components/ui/dropdown-menu.stories.tsx
index 13581f9c7..95ac86307 100644
--- a/packages/apollo-wind/src/components/ui/dropdown-menu.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/dropdown-menu.stories.tsx
@@ -10,7 +10,7 @@ import {
 } from './dropdown-menu';
 
 const meta: Meta<typeof DropdownMenu> = {
-  title: 'Design System/Overlays/Dropdown Menu',
+  title: 'Components/Overlays/Dropdown Menu',
   component: DropdownMenu,
   tags: ['autodocs'],
 };
diff --git a/packages/apollo-wind/src/components/ui/empty-state.stories.tsx b/packages/apollo-wind/src/components/ui/empty-state.stories.tsx
index 5dd151a46..b8cc9f32b 100644
--- a/packages/apollo-wind/src/components/ui/empty-state.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/empty-state.stories.tsx
@@ -3,7 +3,7 @@ import { FileX, Inbox, Search, ShoppingCart, Users } from 'lucide-react';
 import { EmptyState } from './empty-state';
 
 const meta = {
-  title: 'Design System/Feedback/Empty State',
+  title: 'Components/Feedback/Empty State',
   component: EmptyState,
   parameters: {
     layout: 'centered',
diff --git a/packages/apollo-wind/src/components/ui/file-upload.stories.tsx b/packages/apollo-wind/src/components/ui/file-upload.stories.tsx
index 3df170201..4a733a94c 100644
--- a/packages/apollo-wind/src/components/ui/file-upload.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/file-upload.stories.tsx
@@ -6,7 +6,7 @@ import { FileUpload } from './file-upload';
 import { Label } from './label';
 
 const meta = {
-  title: 'Design System/Core/File Upload',
+  title: 'Components/Core/File Upload',
   component: FileUpload,
   parameters: {
     layout: 'centered',
diff --git a/packages/apollo-wind/src/components/ui/hover-card.stories.tsx b/packages/apollo-wind/src/components/ui/hover-card.stories.tsx
index 9f91ffdbf..8bbceed8d 100644
--- a/packages/apollo-wind/src/components/ui/hover-card.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/hover-card.stories.tsx
@@ -4,7 +4,7 @@ import { HoverCard, HoverCardContent, HoverCardTrigger } from './hover-card';
 import { Row, Column } from './layout';
 
 const meta: Meta<typeof HoverCard> = {
-  title: 'Design System/Overlays/Hover Card',
+  title: 'Components/Overlays/Hover Card',
   component: HoverCard,
   tags: ['autodocs'],
 };
diff --git a/packages/apollo-wind/src/components/ui/index.ts b/packages/apollo-wind/src/components/ui/index.ts
index c4224280d..4c717103c 100644
--- a/packages/apollo-wind/src/components/ui/index.ts
+++ b/packages/apollo-wind/src/components/ui/index.ts
@@ -53,3 +53,4 @@ export * from './textarea';
 export * from './toggle-group';
 export * from './toggle';
 export * from './tooltip';
+export * from './viewport-guard';
diff --git a/packages/apollo-wind/src/components/ui/input.stories.tsx b/packages/apollo-wind/src/components/ui/input.stories.tsx
index 85bd68cb4..784df5a02 100644
--- a/packages/apollo-wind/src/components/ui/input.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/input.stories.tsx
@@ -3,7 +3,7 @@ import { Input } from './input';
 import { Label } from './label';
 
 const meta = {
-  title: 'Design System/Core/Input',
+  title: 'Components/Core/Input',
   component: Input,
   parameters: {
     layout: 'centered',
diff --git a/packages/apollo-wind/src/components/ui/label.stories.tsx b/packages/apollo-wind/src/components/ui/label.stories.tsx
index 26e355ee4..0175108cc 100644
--- a/packages/apollo-wind/src/components/ui/label.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/label.stories.tsx
@@ -3,7 +3,7 @@ import { Input } from './input';
 import { Label } from './label';
 
 const meta = {
-  title: 'Design System/Core/Label',
+  title: 'Components/Core/Label',
   component: Label,
   parameters: {
     layout: 'centered',
diff --git a/packages/apollo-wind/src/components/ui/layout/column.stories.tsx b/packages/apollo-wind/src/components/ui/layout/column.stories.tsx
index 65bd6e082..9fcc8c270 100644
--- a/packages/apollo-wind/src/components/ui/layout/column.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/layout/column.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta } from '@storybook/react-vite';
 import { Column } from './column';
 
 const meta = {
-  title: 'Design System/Layout/Column',
+  title: 'Components/Layout/Column',
   component: Column,
   parameters: {
     layout: 'padded',
diff --git a/packages/apollo-wind/src/components/ui/layout/grid.stories.tsx b/packages/apollo-wind/src/components/ui/layout/grid.stories.tsx
index 02b9e73a0..18e014fd5 100644
--- a/packages/apollo-wind/src/components/ui/layout/grid.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/layout/grid.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta } from '@storybook/react-vite';
 import { Grid } from './grid';
 
 const meta = {
-  title: 'Design System/Layout/Grid',
+  title: 'Components/Layout/Grid',
   component: Grid,
   parameters: {
     layout: 'padded',
diff --git a/packages/apollo-wind/src/components/ui/layout/row.stories.tsx b/packages/apollo-wind/src/components/ui/layout/row.stories.tsx
index 133e75627..f5045efbf 100644
--- a/packages/apollo-wind/src/components/ui/layout/row.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/layout/row.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta } from '@storybook/react-vite';
 import { Row } from './row';
 
 const meta = {
-  title: 'Design System/Layout/Row',
+  title: 'Components/Layout/Row',
   component: Row,
   parameters: {
     layout: 'padded',
diff --git a/packages/apollo-wind/src/components/ui/menubar.stories.tsx b/packages/apollo-wind/src/components/ui/menubar.stories.tsx
index 834ee661f..fea2a8ae9 100644
--- a/packages/apollo-wind/src/components/ui/menubar.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/menubar.stories.tsx
@@ -10,7 +10,7 @@ import {
 } from './menubar';
 
 const meta: Meta<typeof Menubar> = {
-  title: 'Design System/Navigation/Menubar',
+  title: 'Components/Navigation/Menubar',
   component: Menubar,
   tags: ['autodocs'],
 };
diff --git a/packages/apollo-wind/src/components/ui/multi-select.stories.tsx b/packages/apollo-wind/src/components/ui/multi-select.stories.tsx
index 68bac3649..bc886b7de 100644
--- a/packages/apollo-wind/src/components/ui/multi-select.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/multi-select.stories.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { MultiSelect } from './multi-select';
 
 const meta = {
-  title: 'Design System/Core/Multi Select',
+  title: 'Components/Core/Multi Select',
   component: MultiSelect,
   parameters: {
     layout: 'centered',
diff --git a/packages/apollo-wind/src/components/ui/navigation-menu.stories.tsx b/packages/apollo-wind/src/components/ui/navigation-menu.stories.tsx
index 27d49fb8f..9c977b7ea 100644
--- a/packages/apollo-wind/src/components/ui/navigation-menu.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/navigation-menu.stories.tsx
@@ -10,7 +10,7 @@ import {
 import { Column } from './layout';
 
 const meta: Meta<typeof NavigationMenu> = {
-  title: 'Design System/Navigation/Navigation Menu',
+  title: 'Components/Navigation/Navigation Menu',
   component: NavigationMenu,
   tags: ['autodocs'],
 };
diff --git a/packages/apollo-wind/src/components/ui/pagination.stories.tsx b/packages/apollo-wind/src/components/ui/pagination.stories.tsx
index 64cd01dfb..a41362d68 100644
--- a/packages/apollo-wind/src/components/ui/pagination.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/pagination.stories.tsx
@@ -10,7 +10,7 @@ import {
 } from './pagination';
 
 const meta: Meta<typeof Pagination> = {
-  title: 'Design System/Navigation/Pagination',
+  title: 'Components/Navigation/Pagination',
   component: Pagination,
   tags: ['autodocs'],
 };
diff --git a/packages/apollo-wind/src/components/ui/popover.stories.tsx b/packages/apollo-wind/src/components/ui/popover.stories.tsx
index 34ce8e67b..5a4aa7612 100644
--- a/packages/apollo-wind/src/components/ui/popover.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/popover.stories.tsx
@@ -3,7 +3,7 @@ import { Button } from './button';
 import { Popover, PopoverContent, PopoverTrigger } from './popover';
 
 const meta: Meta<typeof Popover> = {
-  title: 'Design System/Overlays/Popover',
+  title: 'Components/Overlays/Popover',
   component: Popover,
   tags: ['autodocs'],
 };
diff --git a/packages/apollo-wind/src/components/ui/progress.stories.tsx b/packages/apollo-wind/src/components/ui/progress.stories.tsx
index a2543c952..57cb8cfaf 100644
--- a/packages/apollo-wind/src/components/ui/progress.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/progress.stories.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { Progress } from './progress';
 
 const meta: Meta<typeof Progress> = {
-  title: 'Design System/Feedback/Progress',
+  title: 'Components/Feedback/Progress',
   component: Progress,
   tags: ['autodocs'],
 };
diff --git a/packages/apollo-wind/src/components/ui/radio-group.stories.tsx b/packages/apollo-wind/src/components/ui/radio-group.stories.tsx
index f834d30eb..4f34a5d4e 100644
--- a/packages/apollo-wind/src/components/ui/radio-group.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/radio-group.stories.tsx
@@ -4,7 +4,7 @@ import { RadioGroup, RadioGroupItem } from './radio-group';
 import { Row } from './layout';
 
 const meta: Meta<typeof RadioGroup> = {
-  title: 'Design System/Core/Radio Group',
+  title: 'Components/Core/Radio Group',
   component: RadioGroup,
   tags: ['autodocs'],
 };
diff --git a/packages/apollo-wind/src/components/ui/resizable.stories.tsx b/packages/apollo-wind/src/components/ui/resizable.stories.tsx
index 87a0007c5..a3640073a 100644
--- a/packages/apollo-wind/src/components/ui/resizable.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/resizable.stories.tsx
@@ -3,7 +3,7 @@ import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from './resizabl
 import { Row } from './layout';
 
 const meta = {
-  title: 'Design System/Layout/Resizable',
+  title: 'Components/Layout/Resizable',
   component: ResizablePanelGroup,
   parameters: {
     layout: 'fullscreen',
diff --git a/packages/apollo-wind/src/components/ui/scroll-area.stories.tsx b/packages/apollo-wind/src/components/ui/scroll-area.stories.tsx
index 6586d251e..6a4e4c1df 100644
--- a/packages/apollo-wind/src/components/ui/scroll-area.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/scroll-area.stories.tsx
@@ -3,7 +3,7 @@ import { ScrollArea } from './scroll-area';
 import { Separator } from './separator';
 
 const meta: Meta<typeof ScrollArea> = {
-  title: 'Design System/Layout/Scroll Area',
+  title: 'Components/Layout/Scroll Area',
   component: ScrollArea,
   tags: ['autodocs'],
 };
diff --git a/packages/apollo-wind/src/components/ui/search.stories.tsx b/packages/apollo-wind/src/components/ui/search.stories.tsx
index f38012098..8a5cc24e3 100644
--- a/packages/apollo-wind/src/components/ui/search.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/search.stories.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Search, SearchWithSuggestions } from './search';
 
 const meta = {
-  title: 'Design System/Core/Search',
+  title: 'Components/Core/Search',
   component: Search,
   parameters: {
     layout: 'centered',
diff --git a/packages/apollo-wind/src/components/ui/select.stories.tsx b/packages/apollo-wind/src/components/ui/select.stories.tsx
index 4894425b3..8bd96571c 100644
--- a/packages/apollo-wind/src/components/ui/select.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/select.stories.tsx
@@ -11,7 +11,7 @@ import {
 } from './select';
 
 const meta = {
-  title: 'Design System/Core/Select',
+  title: 'Components/Core/Select',
   component: Select,
   parameters: {
     layout: 'centered',
diff --git a/packages/apollo-wind/src/components/ui/separator.stories.tsx b/packages/apollo-wind/src/components/ui/separator.stories.tsx
index a4dfb504a..3cdc61781 100644
--- a/packages/apollo-wind/src/components/ui/separator.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/separator.stories.tsx
@@ -3,7 +3,7 @@ import { Separator } from './separator';
 import { Row, Column } from './layout';
 
 const meta: Meta<typeof Separator> = {
-  title: 'Design System/Layout/Separator',
+  title: 'Components/Layout/Separator',
   component: Separator,
   tags: ['autodocs'],
 };
diff --git a/packages/apollo-wind/src/components/ui/sheet.stories.tsx b/packages/apollo-wind/src/components/ui/sheet.stories.tsx
index f709c57fb..1d99070d9 100644
--- a/packages/apollo-wind/src/components/ui/sheet.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/sheet.stories.tsx
@@ -10,7 +10,7 @@ import {
 } from './sheet';
 
 const meta: Meta<typeof Sheet> = {
-  title: 'Design System/Overlays/Sheet',
+  title: 'Components/Overlays/Sheet',
   component: Sheet,
   tags: ['autodocs'],
 };
diff --git a/packages/apollo-wind/src/components/ui/skeleton.stories.tsx b/packages/apollo-wind/src/components/ui/skeleton.stories.tsx
index 9a335774d..ce199d534 100644
--- a/packages/apollo-wind/src/components/ui/skeleton.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/skeleton.stories.tsx
@@ -4,7 +4,7 @@ import { Skeleton } from './skeleton';
 import { Row, Column } from './layout';
 
 const meta = {
-  title: 'Design System/Feedback/Skeleton',
+  title: 'Components/Feedback/Skeleton',
   component: Skeleton,
   parameters: {
     layout: 'centered',
diff --git a/packages/apollo-wind/src/components/ui/slider.stories.tsx b/packages/apollo-wind/src/components/ui/slider.stories.tsx
index f0d381d20..06de0ae55 100644
--- a/packages/apollo-wind/src/components/ui/slider.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/slider.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta } from '@storybook/react-vite';
 import { Slider } from './slider';
 
 const meta: Meta<typeof Slider> = {
-  title: 'Design System/Core/Slider',
+  title: 'Components/Core/Slider',
   component: Slider,
   tags: ['autodocs'],
 };
diff --git a/packages/apollo-wind/src/components/ui/sonner.stories.tsx b/packages/apollo-wind/src/components/ui/sonner.stories.tsx
index b3e9675c3..a112c4916 100644
--- a/packages/apollo-wind/src/components/ui/sonner.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/sonner.stories.tsx
@@ -4,7 +4,7 @@ import { Button } from './button';
 import { Toaster } from './sonner';
 
 const meta: Meta<typeof Toaster> = {
-  title: 'Design System/Feedback/Sonner',
+  title: 'Components/Feedback/Sonner',
   component: Toaster,
   tags: ['autodocs'],
 };
diff --git a/packages/apollo-wind/src/components/ui/spinner.stories.tsx b/packages/apollo-wind/src/components/ui/spinner.stories.tsx
index d6c6f2ce7..f5e8b11ef 100644
--- a/packages/apollo-wind/src/components/ui/spinner.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/spinner.stories.tsx
@@ -4,7 +4,7 @@ import { Spinner } from './spinner';
 import { Row, Column } from './layout';
 
 const meta: Meta<typeof Spinner> = {
-  title: 'Design System/Feedback/Spinner',
+  title: 'Components/Feedback/Spinner',
   component: Spinner,
   tags: ['autodocs'],
   argTypes: {
diff --git a/packages/apollo-wind/src/components/ui/stats-card.stories.tsx b/packages/apollo-wind/src/components/ui/stats-card.stories.tsx
index 8a7245796..92264c19b 100644
--- a/packages/apollo-wind/src/components/ui/stats-card.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/stats-card.stories.tsx
@@ -3,7 +3,7 @@ import { Activity, CreditCard, DollarSign, ShoppingCart, TrendingUp, Users } fro
 import { StatsCard } from './stats-card';
 
 const meta = {
-  title: 'Design System/Data Display/Stats Card',
+  title: 'Components/Data Display/Stats Card',
   component: StatsCard,
   parameters: {
     layout: 'centered',
diff --git a/packages/apollo-wind/src/components/ui/stepper.stories.tsx b/packages/apollo-wind/src/components/ui/stepper.stories.tsx
index 43fc16aa9..2639933e8 100644
--- a/packages/apollo-wind/src/components/ui/stepper.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/stepper.stories.tsx
@@ -5,7 +5,7 @@ import { Card, CardContent } from './card';
 import { Step, Stepper } from './stepper';
 
 const meta = {
-  title: 'Design System/Navigation/Stepper',
+  title: 'Components/Navigation/Stepper',
   component: Stepper,
   parameters: {
     layout: 'centered',
diff --git a/packages/apollo-wind/src/components/ui/switch.stories.tsx b/packages/apollo-wind/src/components/ui/switch.stories.tsx
index 18111bac0..66165ac18 100644
--- a/packages/apollo-wind/src/components/ui/switch.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/switch.stories.tsx
@@ -4,7 +4,7 @@ import { Switch } from './switch';
 import { Row } from './layout';
 
 const meta: Meta<typeof Switch> = {
-  title: 'Design System/Core/Switch',
+  title: 'Components/Core/Switch',
   component: Switch,
   tags: ['autodocs'],
 };
diff --git a/packages/apollo-wind/src/components/ui/table.stories.tsx b/packages/apollo-wind/src/components/ui/table.stories.tsx
index 00ae77a35..bf81f65cc 100644
--- a/packages/apollo-wind/src/components/ui/table.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/table.stories.tsx
@@ -10,7 +10,7 @@ import {
 } from './table';
 
 const meta: Meta<typeof Table> = {
-  title: 'Design System/Data Display/Table',
+  title: 'Components/Data Display/Table',
   component: Table,
   tags: ['autodocs'],
 };
diff --git a/packages/apollo-wind/src/components/ui/tabs.stories.tsx b/packages/apollo-wind/src/components/ui/tabs.stories.tsx
index 8251564f3..7350b6e1a 100644
--- a/packages/apollo-wind/src/components/ui/tabs.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/tabs.stories.tsx
@@ -6,7 +6,7 @@ import { Label } from './label';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs';
 
 const meta: Meta<typeof Tabs> = {
-  title: 'Design System/Navigation/Tabs',
+  title: 'Components/Navigation/Tabs',
   component: Tabs,
   tags: ['autodocs'],
 };
diff --git a/packages/apollo-wind/src/components/ui/textarea.stories.tsx b/packages/apollo-wind/src/components/ui/textarea.stories.tsx
index 6ba2ed174..f21c1b913 100644
--- a/packages/apollo-wind/src/components/ui/textarea.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/textarea.stories.tsx
@@ -3,7 +3,7 @@ import { Label } from './label';
 import { Textarea } from './textarea';
 
 const meta = {
-  title: 'Design System/Core/Textarea',
+  title: 'Components/Core/Textarea',
   component: Textarea,
   parameters: {
     layout: 'centered',
diff --git a/packages/apollo-wind/src/components/ui/toggle-group.stories.tsx b/packages/apollo-wind/src/components/ui/toggle-group.stories.tsx
index a32bfe7fb..6e90cec7f 100644
--- a/packages/apollo-wind/src/components/ui/toggle-group.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/toggle-group.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta } from '@storybook/react-vite';
 import { ToggleGroup, ToggleGroupItem } from './toggle-group';
 
 const meta = {
-  title: 'Design System/Core/Toggle Group',
+  title: 'Components/Core/Toggle Group',
   component: ToggleGroup,
   parameters: {
     layout: 'centered',
diff --git a/packages/apollo-wind/src/components/ui/toggle.stories.tsx b/packages/apollo-wind/src/components/ui/toggle.stories.tsx
index 26fac4fdb..e631adb29 100644
--- a/packages/apollo-wind/src/components/ui/toggle.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/toggle.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta } from '@storybook/react-vite';
 import { Toggle } from './toggle';
 
 const meta: Meta<typeof Toggle> = {
-  title: 'Design System/Core/Toggle',
+  title: 'Components/Core/Toggle',
   component: Toggle,
   tags: ['autodocs'],
 };
diff --git a/packages/apollo-wind/src/components/ui/tooltip.stories.tsx b/packages/apollo-wind/src/components/ui/tooltip.stories.tsx
index 6977fb645..4e70bc198 100644
--- a/packages/apollo-wind/src/components/ui/tooltip.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/tooltip.stories.tsx
@@ -3,7 +3,7 @@ import { Button } from './button';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip';
 
 const meta: Meta<typeof Tooltip> = {
-  title: 'Design System/Overlays/Tooltip',
+  title: 'Components/Overlays/Tooltip',
   component: Tooltip,
   tags: ['autodocs'],
 };
diff --git a/packages/apollo-wind/src/components/ui/viewport-guard.tsx b/packages/apollo-wind/src/components/ui/viewport-guard.tsx
new file mode 100644
index 000000000..20407e552
--- /dev/null
+++ b/packages/apollo-wind/src/components/ui/viewport-guard.tsx
@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { cn } from '@/lib';
+
+// ============================================================================
+// Hook: useViewportBelow
+// ============================================================================
+
+function useViewportBelow(minWidthPx: number): boolean {
+  const [isBelow, setIsBelow] = React.useState(false);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${minWidthPx - 1}px)`);
+    const handler = () => setIsBelow(mql.matches);
+    handler(); // initial
+    mql.addEventListener('change', handler);
+    return () => mql.removeEventListener('change', handler);
+  }, [minWidthPx]);
+
+  return isBelow;
+}
+
+/**
+ * Returns true when viewport width is >= minWidthPx (e.g. for "expanded above 1024").
+ */
+export function useViewportAtOrAbove(minWidthPx: number): boolean {
+  const [isAtOrAbove, setIsAtOrAbove] = React.useState(false);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(min-width: ${minWidthPx}px)`);
+    const handler = () => setIsAtOrAbove(mql.matches);
+    handler(); // initial
+    mql.addEventListener('change', handler);
+    return () => mql.removeEventListener('change', handler);
+  }, [minWidthPx]);
+
+  return isAtOrAbove;
+}
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface ViewportGuardProps {
+  /** Minimum viewport width (px) at which content is shown. Below this, the overlay is shown. Default 769 (so 768px and below get the overlay). */
+  minWidth?: number;
+  /** Overlay message. Default explains the view is not available at this screen size. */
+  message?: string;
+  /** Optional class for the overlay container. */
+  className?: string;
+  /** Content to guard; hidden behind the overlay when viewport is too narrow. */
+  children?: React.ReactNode;
+}
+
+const DEFAULT_MESSAGE =
+  'This view is not available at this screen size. Please use a larger viewport.';
+
+// ============================================================================
+// ViewportGuard
+// ============================================================================
+
+/**
+ * Renders children when viewport is at or above `minWidth`, and a full-screen
+ * blurred overlay with a message when viewport is below that width.
+ *
+ * Use for templates or layouts that are not designed for small screens
+ * (e.g. Delegate templates at 540px / 768px).
+ */
+export function ViewportGuard({
+  minWidth = 769,
+  message = DEFAULT_MESSAGE,
+  className,
+  children,
+}: ViewportGuardProps) {
+  const isBelow = useViewportBelow(minWidth);
+
+  if (!isBelow) {
+    return <>{children}</>;
+  }
+
+  return (
+    <div className={cn('fixed inset-0 z-50 flex items-center justify-center', className)}>
+      <div className="absolute inset-0 bg-future-surface backdrop-blur-xl" aria-hidden="true" />
+      <div
+        className="relative mx-4 max-w-sm rounded-2xl border border-future-border bg-future-surface-raised px-6 py-5 text-center shadow-xl"
+        role="status"
+        aria-live="polite"
+      >
+        <p className="text-sm font-medium leading-5 text-future-foreground">{message}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/apollo-wind/src/examples/admin-layout-example.stories.tsx b/packages/apollo-wind/src/examples/admin-layout-example.stories.tsx
deleted file mode 100644
index 038ce4057..000000000
--- a/packages/apollo-wind/src/examples/admin-layout-example.stories.tsx
+++ /dev/null
@@ -1,305 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import * as React from 'react';
-import { Globe, Code, Users, RefreshCw, HelpCircle, MoreHorizontal } from 'lucide-react';
-import { ColumnDef } from '@tanstack/react-table';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import {
-  AdminLayout,
-  AdminHeader,
-  AdminHeaderActions,
-  AdminContent,
-  AdminSidebar,
-  AdminSidebarHeader,
-  AdminSidebarNav,
-  AdminMain,
-  AdminPageHeader,
-  AdminToolbar,
-  AdminFilter,
-  AdminTable,
-  AdminPagination,
-  DataTableColumnHeader,
-  DataTableSelectColumn,
-} from './admin-layout-example';
-import { Row, Column } from '@/components/ui/layout';
-
-const meta = {
-  title: 'Examples/Admin Layout',
-  component: AdminLayout,
-} satisfies Meta<typeof AdminLayout>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Sample data
-const tenants = [
-  { id: '1', name: 'Maestro', type: 'tenant' },
-  { id: '2', name: 'Staging', type: 'tenant' },
-  { id: '3', name: 'ao', type: 'tenant' },
-  {
-    id: '4',
-    name: 'Development',
-    type: 'service',
-    badge: 'Canary Environment',
-  },
-  { id: '5', name: 'DefaultTenant', type: 'tenant' },
-  { id: '6', name: 'optimize', type: 'service' },
-];
-
-type User = {
-  id: string;
-  name: string;
-  email: string;
-  role: string;
-  type: 'user' | 'group';
-};
-
-const users: User[] = [
-  {
-    id: '1',
-    name: 'Finance-test',
-    email: '',
-    role: 'Test-role-viewer',
-    type: 'group',
-  },
-  {
-    id: '2',
-    name: 'John Doe',
-    email: 'john.doe@example.com',
-    role: 'Tenant Administrator',
-    type: 'user',
-  },
-];
-
-function AdminPageDemo() {
-  const [selectedTenant, setSelectedTenant] = React.useState('1');
-  const [activeTab, setActiveTab] = React.useState('assignments');
-  const [nameFilter, setNameFilter] = React.useState('all');
-  const [roleFilter, setRoleFilter] = React.useState('all');
-  const [page, setPage] = React.useState(1);
-  const [pageSize, setPageSize] = React.useState(10);
-
-  const navItems = tenants.map((t) => ({
-    id: t.id,
-    label: t.name,
-    icon: t.type === 'tenant' ? <Globe className="h-4 w-4" /> : <Code className="h-4 w-4" />,
-    badge: t.badge ? (
-      <Badge variant="default" className="ml-auto text-[10px]">
-        {t.badge}
-      </Badge>
-    ) : undefined,
-  }));
-
-  const columns: ColumnDef<User>[] = [
-    DataTableSelectColumn<User>(),
-    {
-      accessorKey: 'name',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
-      cell: ({ row }) => (
-        <Row gap={2} align="center">
-          <Users className="h-4 w-4 text-muted-foreground" />
-          <span>{row.original.name}</span>
-        </Row>
-      ),
-    },
-    {
-      accessorKey: 'email',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Email" />,
-      cell: ({ row }) => row.original.email || '—',
-    },
-    {
-      accessorKey: 'role',
-      header: ({ column }) => (
-        <DataTableColumnHeader column={column} title="Roles">
-          <HelpCircle className="ml-1 h-3.5 w-3.5 text-muted-foreground" />
-        </DataTableColumnHeader>
-      ),
-      cell: ({ row }) => row.original.role,
-    },
-    {
-      id: 'actions',
-      cell: ({ row }) => (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon" className="h-8 w-8">
-              <MoreHorizontal className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem onClick={() => console.log('edit', row.original)}>
-              Edit
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => console.log('remove', row.original)}>
-              Remove
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      ),
-    },
-  ];
-
-  return (
-    <AdminLayout className="h-[700px]">
-      <AdminHeader
-        logo={
-          <Row gap={2} align="center">
-            <Row justify="center" align="center" className="h-8 w-8">
-              <svg viewBox="0 0 24 24" className="h-6 w-6" fill="none">
-                <rect x="2" y="2" width="8" height="8" rx="1" fill="currentColor" />
-                <rect x="2" y="14" width="8" height="8" rx="1" fill="currentColor" />
-                <rect x="14" y="2" width="8" height="8" rx="1" fill="currentColor" />
-                <rect x="14" y="14" width="8" height="8" rx="1" fill="currentColor" />
-              </svg>
-            </Row>
-          </Row>
-        }
-        title="Administration"
-      >
-        <AdminHeaderActions notifications={1} />
-      </AdminHeader>
-
-      <AdminContent>
-        <AdminSidebar width={260}>
-          <div className="border-b px-4 py-3">
-            <Row gap={2} align="center" className="text-sm font-medium">
-              <svg
-                viewBox="0 0 24 24"
-                className="h-5 w-5"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-              >
-                <rect x="3" y="3" width="18" height="18" rx="2" />
-                <path d="M3 9h18" />
-                <path d="M9 21V9" />
-              </svg>
-              POPoC
-            </Row>
-          </div>
-          <AdminSidebarHeader title="Tenants" onSearch={() => undefined} onAdd={() => undefined} />
-          <AdminSidebarNav
-            items={navItems}
-            selectedId={selectedTenant}
-            onSelect={setSelectedTenant}
-          />
-        </AdminSidebar>
-
-        <AdminMain>
-          <AdminPageHeader
-            title="Manage access"
-            breadcrumb={[
-              { label: 'POPoC' },
-              { label: 'DefaultTenant' },
-              { label: 'Manage access' },
-            ]}
-            tabs={[
-              { value: 'assignments', label: 'Role assignments' },
-              { value: 'roles', label: 'Roles' },
-            ]}
-            activeTab={activeTab}
-            onTabChange={setActiveTab}
-            actions={
-              <>
-                <Button variant="link">Check access</Button>
-                <Button>Assign role</Button>
-              </>
-            }
-          />
-
-          <AdminToolbar
-            actions={
-              <Button variant="ghost" size="icon" className="h-8 w-8">
-                <RefreshCw className="h-4 w-4" />
-              </Button>
-            }
-          >
-            <AdminFilter
-              label="Name"
-              value={nameFilter}
-              options={[
-                { value: 'all', label: 'All' },
-                { value: 'users', label: 'Users' },
-                { value: 'groups', label: 'Groups' },
-              ]}
-              onValueChange={setNameFilter}
-            />
-            <AdminFilter
-              label="Roles"
-              value={roleFilter}
-              options={[
-                { value: 'all', label: 'All' },
-                { value: 'admin', label: 'Administrator' },
-                { value: 'viewer', label: 'Viewer' },
-              ]}
-              onValueChange={setRoleFilter}
-            />
-          </AdminToolbar>
-
-          <Column flex={1} overflow="auto" className="px-6">
-            <AdminTable columns={columns} data={users} compact />
-          </Column>
-
-          <AdminPagination
-            total={users.length}
-            page={page}
-            pageSize={pageSize}
-            onPageChange={setPage}
-            onPageSizeChange={setPageSize}
-          />
-        </AdminMain>
-      </AdminContent>
-    </AdminLayout>
-  );
-}
-
-export const Default = {
-  // @ts-expect-error - args not needed when using render, but Storybook requires it
-  args: {},
-  render: () => <AdminPageDemo />,
-} satisfies Story;
-
-// Simple settings page
-function SettingsPageDemo() {
-  const [selectedSection, setSelectedSection] = React.useState('general');
-
-  const sections = [
-    { id: 'general', label: 'General', icon: <Globe className="h-4 w-4" /> },
-    { id: 'users', label: 'Users', icon: <Users className="h-4 w-4" /> },
-    { id: 'security', label: 'Security', icon: <Code className="h-4 w-4" /> },
-  ];
-
-  return (
-    <AdminLayout className="h-[500px]">
-      <AdminHeader title="Settings">
-        <AdminHeaderActions />
-      </AdminHeader>
-      <AdminContent>
-        <AdminSidebar width={220}>
-          <AdminSidebarNav
-            items={sections}
-            selectedId={selectedSection}
-            onSelect={setSelectedSection}
-          />
-        </AdminSidebar>
-        <AdminMain>
-          <AdminPageHeader title="General Settings" />
-          <div className="flex-1 p-6">
-            <p className="text-muted-foreground">Settings content goes here.</p>
-          </div>
-        </AdminMain>
-      </AdminContent>
-    </AdminLayout>
-  );
-}
-
-export const SettingsPage = {
-  // @ts-expect-error - args not needed when using render, but Storybook requires it
-  args: {},
-  render: () => <SettingsPageDemo />,
-} satisfies Story;
diff --git a/packages/apollo-wind/src/examples/admin-layout-example.tsx b/packages/apollo-wind/src/examples/admin-layout-example.tsx
deleted file mode 100644
index a1570b9f4..000000000
--- a/packages/apollo-wind/src/examples/admin-layout-example.tsx
+++ /dev/null
@@ -1,483 +0,0 @@
-import * as React from 'react';
-import { cn } from '@/lib';
-import { Search, Plus, ChevronsLeft, ChevronsRight, HelpCircle, Bell } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '@/components/ui/breadcrumb';
-import {
-  DataTable,
-  DataTableColumnHeader,
-  DataTableSelectColumn,
-} from '@/components/ui/data-table';
-import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-  PaginationLink,
-  PaginationPrevious,
-  PaginationNext,
-  PaginationEllipsis,
-} from '@/components/ui/pagination';
-import { Row, Column } from '@/components/ui/layout';
-
-// Admin Layout Container
-interface AdminLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-}
-
-export function AdminLayout({ className, children, ...props }: AdminLayoutProps) {
-  return (
-    <div
-      className={cn(
-        'flex h-[700px] w-full flex-col overflow-hidden rounded-lg border bg-background',
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-}
-
-// Top Header Bar
-interface AdminHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
-  logo?: React.ReactNode;
-  title?: string;
-  children?: React.ReactNode;
-}
-
-export function AdminHeader({ className, logo, title, children, ...props }: AdminHeaderProps) {
-  return (
-    <header
-      className={cn(
-        'flex h-14 items-center justify-between border-b bg-background px-4',
-        className
-      )}
-      {...props}
-    >
-      <Row gap={3} align="center">
-        {logo}
-        {title && <span className="text-lg font-semibold">{title}</span>}
-      </Row>
-      <Row gap={2} align="center">
-        {children}
-      </Row>
-    </header>
-  );
-}
-
-// Header Actions (notifications, help, profile)
-interface AdminHeaderActionsProps {
-  notifications?: number;
-  avatar?: React.ReactNode;
-}
-
-export function AdminHeaderActions({ notifications, avatar }: AdminHeaderActionsProps) {
-  return (
-    <Row gap={1} align="center">
-      <Button variant="ghost" size="icon" className="relative">
-        <Bell className="h-5 w-5" />
-        {notifications && notifications > 0 && (
-          <span className="absolute -right-0.5 -top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-destructive text-[10px] text-destructive-foreground">
-            {notifications}
-          </span>
-        )}
-      </Button>
-      <Button variant="ghost" size="icon">
-        <HelpCircle className="h-5 w-5" />
-      </Button>
-      {avatar || (
-        <div className="ml-2 flex h-8 w-8 items-center justify-center rounded-full bg-primary text-xs font-medium text-primary-foreground">
-          SN
-        </div>
-      )}
-    </Row>
-  );
-}
-
-// Main Content Area with Sidebar
-interface AdminContentProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-}
-
-export function AdminContent({ className, children, ...props }: AdminContentProps) {
-  return (
-    <Row flex={1} overflow="hidden" className={className} {...props}>
-      {children}
-    </Row>
-  );
-}
-
-// Sidebar
-interface AdminSidebarProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  width?: number;
-}
-
-export function AdminSidebar({ className, children, width = 280, ...props }: AdminSidebarProps) {
-  return (
-    <Column className={cn('border-r bg-muted/30', className)} style={{ width }} {...props}>
-      {children}
-    </Column>
-  );
-}
-
-// Sidebar Header with title and actions
-interface AdminSidebarHeaderProps {
-  title: string;
-  onSearch?: () => void;
-  onAdd?: () => void;
-}
-
-export function AdminSidebarHeader({ title, onSearch, onAdd }: AdminSidebarHeaderProps) {
-  return (
-    <Row justify="between" align="center" className="border-b px-4 py-3">
-      <span className="text-sm font-medium">{title}</span>
-      <Row gap={1} align="center">
-        {onSearch && (
-          <Button variant="ghost" size="icon" className="h-7 w-7" onClick={onSearch}>
-            <Search className="h-4 w-4" />
-          </Button>
-        )}
-        {onAdd && (
-          <Button variant="ghost" size="icon" className="h-7 w-7" onClick={onAdd}>
-            <Plus className="h-4 w-4" />
-          </Button>
-        )}
-      </Row>
-    </Row>
-  );
-}
-
-// Sidebar Navigation Item
-interface AdminNavItem {
-  id: string;
-  label: string;
-  icon?: React.ReactNode;
-  badge?: React.ReactNode;
-}
-
-interface AdminSidebarNavProps {
-  items: AdminNavItem[];
-  selectedId?: string;
-  onSelect?: (id: string) => void;
-}
-
-export function AdminSidebarNav({ items, selectedId, onSelect }: AdminSidebarNavProps) {
-  return (
-    <ScrollArea className="flex-1">
-      <nav className="p-2">
-        {items.map((item) => (
-          <Row
-            key={item.id}
-            gap={2}
-            align="center"
-            className={cn(
-              'cursor-pointer rounded-md px-3 py-2 text-sm transition-colors',
-              selectedId === item.id
-                ? 'bg-primary/10 text-primary'
-                : 'text-muted-foreground hover:bg-muted hover:text-foreground'
-            )}
-            onClick={() => onSelect?.(item.id)}
-          >
-            {item.icon}
-            <span className="flex-1 truncate">{item.label}</span>
-            {item.badge}
-          </Row>
-        ))}
-      </nav>
-    </ScrollArea>
-  );
-}
-
-// Main Panel
-interface AdminMainProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-}
-
-export function AdminMain({ className, children, ...props }: AdminMainProps) {
-  return (
-    <Column flex={1} overflow="hidden" className={className} {...props}>
-      {children}
-    </Column>
-  );
-}
-
-// Breadcrumb
-interface BreadcrumbItemType {
-  label: string;
-  href?: string;
-}
-
-interface AdminBreadcrumbProps {
-  items: BreadcrumbItemType[];
-}
-
-export function AdminBreadcrumb({ items }: AdminBreadcrumbProps) {
-  return (
-    <Breadcrumb>
-      <BreadcrumbList>
-        {items.map((item, index) => (
-          <React.Fragment key={item.label}>
-            {index > 0 && <BreadcrumbSeparator />}
-            <BreadcrumbItem>
-              {index === items.length - 1 ? (
-                <BreadcrumbPage>{item.label}</BreadcrumbPage>
-              ) : (
-                <BreadcrumbLink href={item.href || '#'}>{item.label}</BreadcrumbLink>
-              )}
-            </BreadcrumbItem>
-          </React.Fragment>
-        ))}
-      </BreadcrumbList>
-    </Breadcrumb>
-  );
-}
-
-// Page Header
-interface AdminPageHeaderProps {
-  title: string;
-  breadcrumb?: BreadcrumbItemType[];
-  actions?: React.ReactNode;
-  tabs?: { value: string; label: string }[];
-  activeTab?: string;
-  onTabChange?: (value: string) => void;
-}
-
-export function AdminPageHeader({
-  title,
-  breadcrumb,
-  actions,
-  tabs,
-  activeTab,
-  onTabChange,
-}: AdminPageHeaderProps) {
-  return (
-    <div className="border-b px-6 py-4">
-      {breadcrumb && (
-        <div className="mb-2">
-          <AdminBreadcrumb items={breadcrumb} />
-        </div>
-      )}
-      <Row justify="between" align="center">
-        <h1 className="text-xl font-semibold">{title}</h1>
-        {actions && (
-          <Row gap={2} align="center">
-            {actions}
-          </Row>
-        )}
-      </Row>
-      {tabs && (
-        <Tabs value={activeTab} onValueChange={onTabChange} className="mt-4">
-          <TabsList className="h-auto bg-transparent p-0">
-            {tabs.map((tab) => (
-              <TabsTrigger
-                key={tab.value}
-                value={tab.value}
-                className="rounded-none border-b-2 border-transparent px-4 pb-2 pt-1 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
-              >
-                {tab.label}
-              </TabsTrigger>
-            ))}
-          </TabsList>
-        </Tabs>
-      )}
-    </div>
-  );
-}
-
-// Toolbar with filters
-interface AdminToolbarProps {
-  children?: React.ReactNode;
-  actions?: React.ReactNode;
-}
-
-export function AdminToolbar({ children, actions }: AdminToolbarProps) {
-  return (
-    <Row justify="between" align="center" className="border-b px-6 py-3">
-      <Row gap={3} align="center">
-        {children}
-      </Row>
-      <Row gap={2} align="center">
-        {actions}
-      </Row>
-    </Row>
-  );
-}
-
-// Filter Dropdown
-interface AdminFilterProps {
-  label: string;
-  value: string;
-  options: { value: string; label: string }[];
-  onValueChange?: (value: string) => void;
-}
-
-export function AdminFilter({ label, value, options, onValueChange }: AdminFilterProps) {
-  return (
-    <Row gap={1.5} align="center" className="text-sm">
-      <span className="text-muted-foreground">{label}:</span>
-      <Select value={value} onValueChange={onValueChange}>
-        <SelectTrigger className="h-7 w-auto gap-1 border-0 bg-transparent px-1 font-medium shadow-none">
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          {options.map((option) => (
-            <SelectItem key={option.value} value={option.value}>
-              {option.label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-    </Row>
-  );
-}
-
-// Data Table for Admin
-// Re-export DataTable components for use with AdminLayout
-export { DataTable as AdminTable, DataTableColumnHeader, DataTableSelectColumn };
-
-// Pagination
-interface AdminPaginationProps {
-  total: number;
-  page: number;
-  pageSize: number;
-  onPageChange?: (page: number) => void;
-  onPageSizeChange?: (size: number) => void;
-}
-
-export function AdminPagination({
-  total,
-  page,
-  pageSize,
-  onPageChange,
-  onPageSizeChange,
-}: AdminPaginationProps) {
-  const totalPages = Math.ceil(total / pageSize);
-  const start = (page - 1) * pageSize + 1;
-  const end = Math.min(page * pageSize, total);
-
-  // Generate page numbers to display
-  const getPageNumbers = () => {
-    const pages: number[] = [];
-    const delta = 1; // Number of pages to show on each side of current page
-
-    for (let i = 1; i <= totalPages; i++) {
-      if (
-        i === 1 || // First page
-        i === totalPages || // Last page
-        (i >= page - delta && i <= page + delta) // Pages around current
-      ) {
-        pages.push(i);
-      }
-    }
-
-    return pages;
-  };
-
-  const pageNumbers = getPageNumbers();
-
-  return (
-    <Row justify="between" align="center" className="border-t px-6 py-3">
-      <span className="text-sm text-muted-foreground">
-        {start} - {end} / {total}
-      </span>
-      <Row gap={4} align="center">
-        <Pagination>
-          <PaginationContent>
-            <PaginationItem>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-8 w-8"
-                disabled={page === 1}
-                onClick={() => onPageChange?.(1)}
-              >
-                <ChevronsLeft className="h-4 w-4" />
-              </Button>
-            </PaginationItem>
-            <PaginationItem>
-              <PaginationPrevious
-                onClick={() => page > 1 && onPageChange?.(page - 1)}
-                className={cn(page === 1 && 'pointer-events-none opacity-50')}
-              />
-            </PaginationItem>
-
-            {pageNumbers.map((pageNum, index) => {
-              const prevPage = pageNumbers[index - 1];
-              const showEllipsis = prevPage && pageNum - prevPage > 1;
-
-              return (
-                <React.Fragment key={pageNum}>
-                  {showEllipsis && (
-                    <PaginationItem>
-                      <PaginationEllipsis />
-                    </PaginationItem>
-                  )}
-                  <PaginationItem>
-                    <PaginationLink
-                      onClick={() => onPageChange?.(pageNum)}
-                      isActive={page === pageNum}
-                    >
-                      {pageNum}
-                    </PaginationLink>
-                  </PaginationItem>
-                </React.Fragment>
-              );
-            })}
-
-            <PaginationItem>
-              <PaginationNext
-                onClick={() => page < totalPages && onPageChange?.(page + 1)}
-                className={cn(page === totalPages && 'pointer-events-none opacity-50')}
-              />
-            </PaginationItem>
-            <PaginationItem>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-8 w-8"
-                disabled={page === totalPages}
-                onClick={() => onPageChange?.(totalPages)}
-              >
-                <ChevronsRight className="h-4 w-4" />
-              </Button>
-            </PaginationItem>
-          </PaginationContent>
-        </Pagination>
-
-        {onPageSizeChange && (
-          <Row gap={2} align="center" className="text-sm">
-            <span className="text-muted-foreground">Items</span>
-            <Select value={String(pageSize)} onValueChange={(v) => onPageSizeChange(Number(v))}>
-              <SelectTrigger className="h-8 w-16">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="10">10</SelectItem>
-                <SelectItem value="25">25</SelectItem>
-                <SelectItem value="50">50</SelectItem>
-                <SelectItem value="100">100</SelectItem>
-              </SelectContent>
-            </Select>
-          </Row>
-        )}
-      </Row>
-    </Row>
-  );
-}
diff --git a/packages/apollo-wind/src/examples/app-shell-example.stories.tsx b/packages/apollo-wind/src/examples/app-shell-example.stories.tsx
deleted file mode 100644
index cb4bd5764..000000000
--- a/packages/apollo-wind/src/examples/app-shell-example.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { AppShellExample } from './app-shell-example';
-
-const meta = {
-  title: 'Examples/App Shell',
-  component: AppShellExample,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} satisfies Meta<typeof AppShellExample>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
diff --git a/packages/apollo-wind/src/examples/app-shell-example.tsx b/packages/apollo-wind/src/examples/app-shell-example.tsx
deleted file mode 100644
index da934d310..000000000
--- a/packages/apollo-wind/src/examples/app-shell-example.tsx
+++ /dev/null
@@ -1,362 +0,0 @@
-import { Bell, ChevronLeft, ChevronRight, HelpCircle, Menu } from 'lucide-react';
-import * as React from 'react';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { Separator } from '@/components/ui/separator';
-import { cn } from '@/lib';
-import { Row, Column, Grid } from '@/components/ui/layout';
-
-export interface AppShellExampleProps {
-  className?: string;
-  logo?: React.ReactNode;
-  tenant?: string;
-  user?: {
-    name: string;
-    email: string;
-    avatar?: string;
-  };
-  navigation?: Array<{
-    label: string;
-    href?: string;
-    active?: boolean;
-    badge?: string;
-  }>;
-  heroSection?: {
-    title: React.ReactNode;
-    description?: string;
-    cta?: {
-      label: string;
-      onClick?: () => void;
-    };
-    illustration?: React.ReactNode;
-  };
-  sections?: Array<{
-    title: string;
-    viewAllLink?: {
-      label: string;
-      onClick?: () => void;
-    };
-    items: Array<{
-      id: string;
-      title: string;
-      description?: string;
-      badge?: {
-        label: string;
-        variant?: 'default' | 'secondary' | 'destructive' | 'outline';
-      };
-      footer?: string;
-      action?: {
-        label: string;
-        onClick?: () => void;
-      };
-    }>;
-  }>;
-  sidebar?: {
-    title: string;
-    content: React.ReactNode;
-  };
-}
-
-export function AppShellExample({
-  className,
-  logo = <div className="text-xl font-bold">Logo</div>,
-  tenant = 'DefaultTenant',
-  user = {
-    name: 'John Doe',
-    email: 'john.doe@example.com',
-  },
-  navigation = [
-    { label: 'Home', active: true },
-    { label: 'Process instances' },
-    { label: 'Process incidents' },
-    { label: 'Case app', badge: 'Preview' },
-    { label: 'Case instances', badge: 'Preview' },
-  ],
-  heroSection = {
-    title: (
-      <>
-        Orchestrate <span className="text-primary">AI agents, robots,</span> and people with{' '}
-        <span className="text-primary">Platform</span> to exceed business outcomes
-      </>
-    ),
-    cta: {
-      label: 'Get Started',
-    },
-  },
-  sections = [
-    {
-      title: 'Recent projects',
-      viewAllLink: { label: 'View all projects' },
-      items: [
-        {
-          id: '1',
-          title: 'Solution 161',
-          badge: { label: 'DRAFT', variant: 'outline' },
-          footer: 'Last modified 13 minutes ago',
-        },
-        {
-          id: '2',
-          title: 'Property insurance claims',
-          badge: { label: 'DRAFT', variant: 'outline' },
-          footer: 'Last modified 7 days ago',
-        },
-        {
-          id: '3',
-          title: 'Property insurance claims',
-          badge: { label: 'DEPLOYED', variant: 'default' },
-          footer: 'Last modified 7 hours ago',
-        },
-      ],
-    },
-    {
-      title: 'Examples',
-      items: [
-        {
-          id: '1',
-          title: 'Supplier Onboarding',
-          description:
-            'An agentic process built with Platform (Agentic Orchestration), modeled using...',
-          action: { label: 'View' },
-        },
-        {
-          id: '2',
-          title: 'Invoice Processing',
-          description:
-            'An agentic process built with Platform (Agentic Orchestration), modeled using...',
-          action: { label: 'View' },
-        },
-        {
-          id: '3',
-          title: 'MyPoNewTeMplate',
-          description: 'aav',
-          action: { label: 'View' },
-        },
-      ],
-    },
-  ],
-  sidebar = {
-    title: 'How it works',
-    content: (
-      <div className="space-y-4">
-        <div className="rounded-lg bg-primary/10 p-4">
-          <p className="text-sm">Learn more about how to use this platform effectively.</p>
-        </div>
-      </div>
-    ),
-  },
-}: AppShellExampleProps) {
-  const [leftSidebarCollapsed, setLeftSidebarCollapsed] = React.useState(false);
-  const [rightSidebarCollapsed, setRightSidebarCollapsed] = React.useState(false);
-
-  return (
-    <Column h="screen" className={cn('bg-background', className)}>
-      {/* Header */}
-      <Row h={14} justify="between" align="center" className="border-b px-4">
-        <Row gap={4} align="center">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="md:hidden"
-            onClick={() => setLeftSidebarCollapsed(!leftSidebarCollapsed)}
-          >
-            <Menu className="h-5 w-5" />
-          </Button>
-          {logo}
-        </Row>
-
-        <Row gap={2} align="center">
-          <Button variant="ghost" size="icon">
-            <Bell className="h-5 w-5" />
-          </Button>
-          <Button variant="ghost" size="icon">
-            <HelpCircle className="h-5 w-5" />
-          </Button>
-          <Separator orientation="vertical" className="h-6" />
-          <Row gap={2} align="center">
-            <span className="hidden text-sm md:inline">Tenant:</span>
-            <Button variant="ghost" className="font-normal">
-              {tenant}
-              <ChevronRight className="ml-1 h-4 w-4 rotate-90" />
-            </Button>
-          </Row>
-          <Avatar className="h-8 w-8">
-            <AvatarImage src={user.avatar} alt={user.name} />
-            <AvatarFallback>
-              {user.name
-                .split(' ')
-                .map((n) => n[0])
-                .join('')
-                .toUpperCase()}
-            </AvatarFallback>
-          </Avatar>
-        </Row>
-      </Row>
-
-      <Row flex={1} overflow="hidden">
-        {/* Left Sidebar */}
-        <aside
-          className={cn(
-            'relative hidden border-r bg-muted/10 transition-all duration-300 md:block',
-            leftSidebarCollapsed ? 'w-12' : 'w-60'
-          )}
-        >
-          <Column h="full" overflow="hidden">
-            <Row justify="end" align="center" className="p-2">
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={() => setLeftSidebarCollapsed(!leftSidebarCollapsed)}
-                className="h-8 w-8"
-              >
-                {leftSidebarCollapsed ? (
-                  <ChevronRight className="h-4 w-4" />
-                ) : (
-                  <ChevronLeft className="h-4 w-4" />
-                )}
-              </Button>
-            </Row>
-            {!leftSidebarCollapsed && (
-              <nav className="space-y-1 overflow-y-auto p-2 pt-0">
-                {navigation.map((item, index) => (
-                  <Button
-                    key={index}
-                    variant={item.active ? 'secondary' : 'ghost'}
-                    className="w-full justify-between"
-                  >
-                    <span>{item.label}</span>
-                    {item.badge && (
-                      <Badge variant="secondary" className="ml-2 text-xs">
-                        {item.badge}
-                      </Badge>
-                    )}
-                  </Button>
-                ))}
-              </nav>
-            )}
-          </Column>
-        </aside>
-
-        {/* Main Content */}
-        <main className="flex-1 overflow-y-auto">
-          <div className="container mx-auto p-6">
-            {/* Hero Section */}
-            {heroSection && (
-              <Card className="mb-8 border-0 bg-gradient-to-r from-muted/50 to-muted/20">
-                <CardContent className="p-8">
-                  <Row gap={6} align="center" justify="between" className="flex-col md:flex-row">
-                    <Column align="start" gap={4} flex={1}>
-                      <h1 className="text-3xl font-bold leading-tight md:text-4xl">
-                        {heroSection.title}
-                      </h1>
-                      {heroSection.description && (
-                        <p className="text-muted-foreground">{heroSection.description}</p>
-                      )}
-                      {heroSection.cta && (
-                        <Button size="lg" onClick={heroSection.cta.onClick}>
-                          {heroSection.cta.label}
-                        </Button>
-                      )}
-                    </Column>
-                    {heroSection.illustration && (
-                      <div className="flex-shrink-0">{heroSection.illustration}</div>
-                    )}
-                  </Row>
-                </CardContent>
-              </Card>
-            )}
-
-            {/* Content Sections */}
-            {sections.map((section, sectionIndex) => (
-              <div key={sectionIndex} className="mb-8">
-                <Row justify="between" align="center" className="mb-4">
-                  <h2 className="text-2xl font-semibold">{section.title}</h2>
-                  {section.viewAllLink && (
-                    <Button variant="link" onClick={section.viewAllLink.onClick}>
-                      {section.viewAllLink.label}
-                    </Button>
-                  )}
-                </Row>
-                <Grid gap={4} cols={3} className="md:grid-cols-2 lg:grid-cols-3">
-                  {section.items.map((item) => (
-                    <Card key={item.id}>
-                      <CardHeader>
-                        {item.badge && (
-                          <Badge variant={item.badge.variant} className="mb-2 w-fit text-xs">
-                            {item.badge.label}
-                          </Badge>
-                        )}
-                        <CardTitle className="text-lg">{item.title}</CardTitle>
-                        {item.description && <CardDescription>{item.description}</CardDescription>}
-                      </CardHeader>
-                      {(item.footer || item.action) && (
-                        <CardFooter>
-                          <Row justify="between" align="center" w="full">
-                            {item.footer && (
-                              <span className="text-xs text-muted-foreground">{item.footer}</span>
-                            )}
-                            {item.action && (
-                              <Button
-                                variant="link"
-                                size="sm"
-                                onClick={item.action.onClick}
-                                className="ml-auto"
-                              >
-                                {item.action.label}
-                              </Button>
-                            )}
-                          </Row>
-                        </CardFooter>
-                      )}
-                    </Card>
-                  ))}
-                </Grid>
-              </div>
-            ))}
-          </div>
-        </main>
-
-        {/* Right Sidebar */}
-        {sidebar && (
-          <aside
-            className={cn(
-              'relative hidden border-l bg-muted/10 transition-all duration-300 lg:block',
-              rightSidebarCollapsed ? 'w-12' : 'w-80'
-            )}
-          >
-            <Column h="full" overflow="hidden">
-              <Row justify="start" align="center" className="p-2">
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={() => setRightSidebarCollapsed(!rightSidebarCollapsed)}
-                  className="h-8 w-8"
-                >
-                  {rightSidebarCollapsed ? (
-                    <ChevronLeft className="h-4 w-4" />
-                  ) : (
-                    <ChevronRight className="h-4 w-4" />
-                  )}
-                </Button>
-              </Row>
-              {!rightSidebarCollapsed && (
-                <div className="flex-1 overflow-y-auto px-6 pb-6">
-                  <h3 className="mb-4 text-lg font-semibold">{sidebar.title}</h3>
-                  {sidebar.content}
-                </div>
-              )}
-            </Column>
-          </aside>
-        )}
-      </Row>
-    </Column>
-  );
-}
diff --git a/packages/apollo-wind/src/examples/dashboard-example.stories.tsx b/packages/apollo-wind/src/examples/dashboard-example.stories.tsx
deleted file mode 100644
index 9be0482fd..000000000
--- a/packages/apollo-wind/src/examples/dashboard-example.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { DashboardExample } from './dashboard-example';
-
-const meta = {
-  title: 'Examples/Dashboard',
-  component: DashboardExample,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} satisfies Meta<typeof DashboardExample>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
diff --git a/packages/apollo-wind/src/examples/dashboard-example.tsx b/packages/apollo-wind/src/examples/dashboard-example.tsx
deleted file mode 100644
index 31f3279f3..000000000
--- a/packages/apollo-wind/src/examples/dashboard-example.tsx
+++ /dev/null
@@ -1,388 +0,0 @@
-import * as React from 'react';
-import { ColumnDef } from '@tanstack/react-table';
-import { Activity, CreditCard, DollarSign, Users, MoreHorizontal } from 'lucide-react';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import {
-  DataTable,
-  DataTableColumnHeader,
-  DataTableSelectColumn,
-} from '@/components/ui/data-table';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { Row, Column, Grid } from '@/components/ui/layout';
-import { Progress } from '@/components/ui/progress';
-import { Separator } from '@/components/ui/separator';
-import { StatsCard } from '@/components/ui/stats-card';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { cn } from '@/lib';
-
-// Types
-interface Transaction {
-  id: string;
-  customer: string;
-  email: string;
-  amount: number;
-  status: 'completed' | 'pending' | 'failed';
-  date: string;
-}
-
-interface ActivityItem {
-  id: string;
-  user: string;
-  action: string;
-  time: string;
-  avatar?: string;
-}
-
-export interface DashboardExampleProps {
-  className?: string;
-  title?: string;
-  description?: string;
-  user?: {
-    name: string;
-    email: string;
-    avatar?: string;
-  };
-}
-
-// Sample data
-const transactions: Transaction[] = [
-  {
-    id: '1',
-    customer: 'Olivia Martin',
-    email: 'olivia@example.com',
-    amount: 1999.0,
-    status: 'completed',
-    date: '2024-01-15',
-  },
-  {
-    id: '2',
-    customer: 'Jackson Lee',
-    email: 'jackson@example.com',
-    amount: 39.0,
-    status: 'completed',
-    date: '2024-01-14',
-  },
-  {
-    id: '3',
-    customer: 'Isabella Nguyen',
-    email: 'isabella@example.com',
-    amount: 299.0,
-    status: 'pending',
-    date: '2024-01-14',
-  },
-  {
-    id: '4',
-    customer: 'William Kim',
-    email: 'will@example.com',
-    amount: 99.0,
-    status: 'completed',
-    date: '2024-01-13',
-  },
-  {
-    id: '5',
-    customer: 'Sofia Davis',
-    email: 'sofia@example.com',
-    amount: 450.0,
-    status: 'failed',
-    date: '2024-01-12',
-  },
-];
-
-const recentActivity: ActivityItem[] = [
-  {
-    id: '1',
-    user: 'Olivia Martin',
-    action: 'Completed purchase of $1,999.00',
-    time: '2 min ago',
-  },
-  {
-    id: '2',
-    user: 'Jackson Lee',
-    action: 'Created new account',
-    time: '1 hour ago',
-  },
-  {
-    id: '3',
-    user: 'Isabella Nguyen',
-    action: 'Submitted support ticket #1234',
-    time: '3 hours ago',
-  },
-  {
-    id: '4',
-    user: 'William Kim',
-    action: 'Updated billing information',
-    time: '5 hours ago',
-  },
-];
-
-const columns: ColumnDef<Transaction, unknown>[] = [
-  DataTableSelectColumn<Transaction>(),
-  {
-    accessorKey: 'customer',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Customer" />,
-    cell: ({ row }) => (
-      <Row gap={2} align="center">
-        <Avatar className="h-8 w-8">
-          <AvatarFallback>
-            {row.original.customer
-              .split(' ')
-              .map((n) => n[0])
-              .join('')}
-          </AvatarFallback>
-        </Avatar>
-        <Column gap={0}>
-          <div className="font-medium">{row.original.customer}</div>
-          <div className="text-xs text-muted-foreground">{row.original.email}</div>
-        </Column>
-      </Row>
-    ),
-  },
-  {
-    accessorKey: 'amount',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Amount" />,
-    cell: ({ row }) => {
-      const amount = parseFloat(row.getValue('amount'));
-      const formatted = new Intl.NumberFormat('en-US', {
-        style: 'currency',
-        currency: 'USD',
-      }).format(amount);
-      return <div className="font-medium">{formatted}</div>;
-    },
-  },
-  {
-    accessorKey: 'status',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
-    cell: ({ row }) => {
-      const status = row.getValue('status') as string;
-      return (
-        <Badge
-          variant={
-            status === 'completed' ? 'default' : status === 'pending' ? 'secondary' : 'destructive'
-          }
-        >
-          {status}
-        </Badge>
-      );
-    },
-  },
-  {
-    accessorKey: 'date',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Date" />,
-  },
-  {
-    id: 'actions',
-    cell: () => (
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="icon" className="h-8 w-8">
-            <MoreHorizontal className="h-4 w-4" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          <DropdownMenuItem>View details</DropdownMenuItem>
-          <DropdownMenuItem>Download receipt</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    ),
-  },
-];
-
-export function DashboardExample({
-  className,
-  title = 'Dashboard',
-  description = "Welcome back! Here's an overview of your business.",
-  user = { name: 'John Doe', email: 'john@example.com' },
-}: DashboardExampleProps) {
-  const [activeTab, setActiveTab] = React.useState('overview');
-
-  return (
-    <div className={cn('min-h-screen bg-background', className)}>
-      {/* Header */}
-      <header className="border-b">
-        <div className="container mx-auto flex h-16 items-center justify-between px-4">
-          <div>
-            <h1 className="text-2xl font-bold">{title}</h1>
-            <p className="text-sm text-muted-foreground">{description}</p>
-          </div>
-          <Row gap={4} align="center">
-            <Button variant="outline" size="sm">
-              Download Report
-            </Button>
-            <Separator orientation="vertical" className="h-8" />
-            <Row gap={2} align="center">
-              <Avatar className="h-8 w-8">
-                <AvatarImage src={user.avatar} alt={user.name} />
-                <AvatarFallback>
-                  {user.name
-                    .split(' ')
-                    .map((n) => n[0])
-                    .join('')
-                    .toUpperCase()}
-                </AvatarFallback>
-              </Avatar>
-              <Column gap={0} className="hidden text-sm md:flex">
-                <span className="font-medium">{user.name}</span>
-                <span className="text-xs text-muted-foreground">{user.email}</span>
-              </Column>
-            </Row>
-          </Row>
-        </div>
-      </header>
-
-      {/* Main Content */}
-      <main className="container mx-auto p-4 md:p-6">
-        <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
-          <TabsList>
-            <TabsTrigger value="overview">Overview</TabsTrigger>
-            <TabsTrigger value="analytics">Analytics</TabsTrigger>
-            <TabsTrigger value="reports">Reports</TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="overview" className="space-y-6">
-            {/* Stats Cards */}
-            <Grid gap={4} cols={4} className="md:grid-cols-2 lg:grid-cols-4">
-              <StatsCard
-                title="Total Revenue"
-                value="$45,231.89"
-                description="+20.1% from last month"
-                icon={<DollarSign className="h-4 w-4 text-muted-foreground" />}
-              />
-              <StatsCard
-                title="Subscriptions"
-                value="+2,350"
-                description="+180.1% from last month"
-                icon={<Users className="h-4 w-4 text-muted-foreground" />}
-              />
-              <StatsCard
-                title="Sales"
-                value="+12,234"
-                description="+19% from last month"
-                icon={<CreditCard className="h-4 w-4 text-muted-foreground" />}
-              />
-              <StatsCard
-                title="Active Now"
-                value="+573"
-                description="+201 since last hour"
-                icon={<Activity className="h-4 w-4 text-muted-foreground" />}
-              />
-            </Grid>
-
-            {/* Content Grid */}
-            <Grid gap={4} cols={7} className="lg:grid-cols-7">
-              {/* Transactions Table */}
-              <Card className="lg:col-span-4">
-                <CardHeader>
-                  <CardTitle>Recent Transactions</CardTitle>
-                  <CardDescription>Latest customer transactions</CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <DataTable
-                    columns={columns}
-                    data={transactions}
-                    searchKey="customer"
-                    searchPlaceholder="Search customers..."
-                    compact
-                    showColumnToggle={false}
-                  />
-                </CardContent>
-              </Card>
-
-              {/* Recent Activity */}
-              <Card className="lg:col-span-3">
-                <CardHeader>
-                  <CardTitle>Recent Activity</CardTitle>
-                  <CardDescription>Latest updates from your team</CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  {recentActivity.map((activity) => (
-                    <Row key={activity.id} gap={3} align="start">
-                      <Avatar className="h-8 w-8">
-                        <AvatarImage src={activity.avatar} />
-                        <AvatarFallback>
-                          {activity.user
-                            .split(' ')
-                            .map((n) => n[0])
-                            .join('')}
-                        </AvatarFallback>
-                      </Avatar>
-                      <Column gap={1} flex={1}>
-                        <p className="text-sm">
-                          <span className="font-medium">{activity.user}</span>{' '}
-                          <span className="text-muted-foreground">{activity.action}</span>
-                        </p>
-                        <p className="text-xs text-muted-foreground">{activity.time}</p>
-                      </Column>
-                    </Row>
-                  ))}
-                </CardContent>
-              </Card>
-            </Grid>
-
-            {/* Goals Progress */}
-            <Card>
-              <CardHeader>
-                <CardTitle>Monthly Goals</CardTitle>
-                <CardDescription>Track your progress towards monthly targets</CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <Column gap={2}>
-                  <Row justify="between" align="center" className="text-sm">
-                    <span>Revenue Target</span>
-                    <span className="font-medium">$45,231 / $50,000</span>
-                  </Row>
-                  <Progress value={90} />
-                </Column>
-                <Column gap={2}>
-                  <Row justify="between" align="center" className="text-sm">
-                    <span>New Customers</span>
-                    <span className="font-medium">2,350 / 3,000</span>
-                  </Row>
-                  <Progress value={78} />
-                </Column>
-                <Column gap={2}>
-                  <Row justify="between" align="center" className="text-sm">
-                    <span>Support Tickets Resolved</span>
-                    <span className="font-medium">145 / 150</span>
-                  </Row>
-                  <Progress value={97} />
-                </Column>
-              </CardContent>
-            </Card>
-          </TabsContent>
-
-          <TabsContent value="analytics" className="space-y-6">
-            <Card>
-              <CardHeader>
-                <CardTitle>Analytics</CardTitle>
-                <CardDescription>Detailed analytics coming soon</CardDescription>
-              </CardHeader>
-              <CardContent className="h-[400px] flex items-center justify-center text-muted-foreground">
-                Analytics charts and graphs would go here
-              </CardContent>
-            </Card>
-          </TabsContent>
-
-          <TabsContent value="reports" className="space-y-6">
-            <Card>
-              <CardHeader>
-                <CardTitle>Reports</CardTitle>
-                <CardDescription>Generate and download reports</CardDescription>
-              </CardHeader>
-              <CardContent className="h-[400px] flex items-center justify-center text-muted-foreground">
-                Report generation interface would go here
-              </CardContent>
-            </Card>
-          </TabsContent>
-        </Tabs>
-      </main>
-    </div>
-  );
-}
diff --git a/packages/apollo-wind/src/examples/data-management-example.stories.tsx b/packages/apollo-wind/src/examples/data-management-example.stories.tsx
deleted file mode 100644
index 9b54ca913..000000000
--- a/packages/apollo-wind/src/examples/data-management-example.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { DataManagementExample } from './data-management-example';
-
-const meta = {
-  title: 'Examples/Data Management',
-  component: DataManagementExample,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} satisfies Meta<typeof DataManagementExample>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
diff --git a/packages/apollo-wind/src/examples/data-management-example.tsx b/packages/apollo-wind/src/examples/data-management-example.tsx
deleted file mode 100644
index c27d7a6a9..000000000
--- a/packages/apollo-wind/src/examples/data-management-example.tsx
+++ /dev/null
@@ -1,399 +0,0 @@
-import * as React from 'react';
-import { ColumnDef } from '@tanstack/react-table';
-import { Download, Filter, MoreHorizontal, Plus, RefreshCw, Upload } from 'lucide-react';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import {
-  DataTable,
-  DataTableColumnHeader,
-  DataTableSelectColumn,
-} from '@/components/ui/data-table';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Row, Column, Grid } from '@/components/ui/layout';
-
-// Types
-interface Product {
-  id: string;
-  name: string;
-  sku: string;
-  category: string;
-  price: number;
-  stock: number;
-  status: 'active' | 'draft' | 'archived';
-  createdAt: string;
-}
-
-// Sample data
-const products: Product[] = [
-  {
-    id: '1',
-    name: 'Wireless Headphones',
-    sku: 'WH-001',
-    category: 'Electronics',
-    price: 99.99,
-    stock: 150,
-    status: 'active',
-    createdAt: '2024-01-10',
-  },
-  {
-    id: '2',
-    name: 'USB-C Cable',
-    sku: 'UC-002',
-    category: 'Accessories',
-    price: 12.99,
-    stock: 500,
-    status: 'active',
-    createdAt: '2024-01-09',
-  },
-  {
-    id: '3',
-    name: 'Laptop Stand',
-    sku: 'LS-003',
-    category: 'Accessories',
-    price: 49.99,
-    stock: 75,
-    status: 'active',
-    createdAt: '2024-01-08',
-  },
-  {
-    id: '4',
-    name: 'Mechanical Keyboard',
-    sku: 'MK-004',
-    category: 'Electronics',
-    price: 149.99,
-    stock: 0,
-    status: 'draft',
-    createdAt: '2024-01-07',
-  },
-  {
-    id: '5',
-    name: 'Monitor Light Bar',
-    sku: 'ML-005',
-    category: 'Electronics',
-    price: 59.99,
-    stock: 200,
-    status: 'active',
-    createdAt: '2024-01-06',
-  },
-  {
-    id: '6',
-    name: 'Webcam HD',
-    sku: 'WC-006',
-    category: 'Electronics',
-    price: 79.99,
-    stock: 45,
-    status: 'active',
-    createdAt: '2024-01-05',
-  },
-  {
-    id: '7',
-    name: 'Mouse Pad XL',
-    sku: 'MP-007',
-    category: 'Accessories',
-    price: 24.99,
-    stock: 300,
-    status: 'active',
-    createdAt: '2024-01-04',
-  },
-  {
-    id: '8',
-    name: 'Phone Holder',
-    sku: 'PH-008',
-    category: 'Accessories',
-    price: 19.99,
-    stock: 0,
-    status: 'archived',
-    createdAt: '2024-01-03',
-  },
-  {
-    id: '9',
-    name: 'Bluetooth Speaker',
-    sku: 'BS-009',
-    category: 'Electronics',
-    price: 39.99,
-    stock: 120,
-    status: 'active',
-    createdAt: '2024-01-02',
-  },
-  {
-    id: '10',
-    name: 'Screen Protector',
-    sku: 'SP-010',
-    category: 'Accessories',
-    price: 9.99,
-    stock: 1000,
-    status: 'active',
-    createdAt: '2024-01-01',
-  },
-];
-
-const columns: ColumnDef<Product, unknown>[] = [
-  DataTableSelectColumn<Product>(),
-  {
-    accessorKey: 'name',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Product" />,
-    cell: ({ row }) => (
-      <div>
-        <div className="font-medium">{row.original.name}</div>
-        <div className="text-xs text-muted-foreground">{row.original.sku}</div>
-      </div>
-    ),
-  },
-  {
-    accessorKey: 'category',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Category" />,
-  },
-  {
-    accessorKey: 'price',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Price" />,
-    cell: ({ row }) => {
-      const price = parseFloat(row.getValue('price'));
-      return new Intl.NumberFormat('en-US', {
-        style: 'currency',
-        currency: 'USD',
-      }).format(price);
-    },
-  },
-  {
-    accessorKey: 'stock',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Stock" />,
-    cell: ({ row }) => {
-      const stock = row.getValue('stock') as number;
-      return (
-        <span className={stock === 0 ? 'text-destructive font-medium' : ''}>
-          {stock === 0 ? 'Out of stock' : stock}
-        </span>
-      );
-    },
-  },
-  {
-    accessorKey: 'status',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
-    cell: ({ row }) => {
-      const status = row.getValue('status') as string;
-      return (
-        <Badge
-          variant={status === 'active' ? 'default' : status === 'draft' ? 'secondary' : 'outline'}
-        >
-          {status}
-        </Badge>
-      );
-    },
-  },
-  {
-    accessorKey: 'createdAt',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Created" />,
-  },
-  {
-    id: 'actions',
-    cell: () => (
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="icon" className="h-8 w-8">
-            <MoreHorizontal className="h-4 w-4" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          <DropdownMenuItem>Edit</DropdownMenuItem>
-          <DropdownMenuItem>Duplicate</DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem className="text-destructive">Delete</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    ),
-  },
-];
-
-export function DataManagementExample() {
-  const [activeTab, setActiveTab] = React.useState('all');
-  const [categoryFilter, setCategoryFilter] = React.useState('all');
-  const [isCreateDialogOpen, setIsCreateDialogOpen] = React.useState(false);
-
-  const filteredProducts = React.useMemo(() => {
-    let filtered = products;
-
-    if (activeTab !== 'all') {
-      filtered = filtered.filter((p) => p.status === activeTab);
-    }
-
-    if (categoryFilter !== 'all') {
-      filtered = filtered.filter((p) => p.category === categoryFilter);
-    }
-
-    return filtered;
-  }, [activeTab, categoryFilter]);
-
-  const categories = [...new Set(products.map((p) => p.category))];
-
-  return (
-    <Column minH="screen" className="bg-background">
-      {/* Header */}
-      <header className="border-b">
-        <Row h={14} justify="between" align="center" className="container mx-auto px-4">
-          <Column gap={0}>
-            <h1 className="text-lg font-semibold">Products</h1>
-          </Column>
-          <Row gap={2} align="center">
-            <Button variant="outline" size="sm">
-              <Upload className="mr-2 h-4 w-4" />
-              Import
-            </Button>
-            <Button variant="outline" size="sm">
-              <Download className="mr-2 h-4 w-4" />
-              Export
-            </Button>
-            <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
-              <DialogTrigger asChild>
-                <Button size="sm">
-                  <Plus className="mr-2 h-4 w-4" />
-                  Add Product
-                </Button>
-              </DialogTrigger>
-              <DialogContent>
-                <DialogHeader>
-                  <DialogTitle>Add New Product</DialogTitle>
-                  <DialogDescription>Enter the details for the new product.</DialogDescription>
-                </DialogHeader>
-                <Column gap={4} className="py-4">
-                  <Column gap={2}>
-                    <Label htmlFor="productName">Product name</Label>
-                    <Input id="productName" placeholder="Enter product name" />
-                  </Column>
-                  <Grid cols={2} gap={4}>
-                    <Column gap={2}>
-                      <Label htmlFor="sku">SKU</Label>
-                      <Input id="sku" placeholder="XX-000" />
-                    </Column>
-                    <Column gap={2}>
-                      <Label htmlFor="price">Price</Label>
-                      <Input id="price" type="number" placeholder="0.00" />
-                    </Column>
-                  </Grid>
-                  <Column gap={2}>
-                    <Label htmlFor="category">Category</Label>
-                    <Select>
-                      <SelectTrigger id="category">
-                        <SelectValue placeholder="Select category" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {categories.map((cat) => (
-                          <SelectItem key={cat} value={cat}>
-                            {cat}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  </Column>
-                  <Column gap={2}>
-                    <Label htmlFor="stock">Initial stock</Label>
-                    <Input id="stock" type="number" placeholder="0" />
-                  </Column>
-                </Column>
-                <DialogFooter>
-                  <Button variant="outline" onClick={() => setIsCreateDialogOpen(false)}>
-                    Cancel
-                  </Button>
-                  <Button onClick={() => setIsCreateDialogOpen(false)}>Create product</Button>
-                </DialogFooter>
-              </DialogContent>
-            </Dialog>
-          </Row>
-        </Row>
-      </header>
-
-      <main className="container mx-auto p-4 md:p-6">
-        {/* Tabs and Filters */}
-        <Row
-          gap={4}
-          justify="between"
-          align="center"
-          className="mb-4 flex-col sm:flex-row sm:items-center"
-        >
-          <Tabs value={activeTab} onValueChange={setActiveTab}>
-            <TabsList>
-              <TabsTrigger value="all">
-                All{' '}
-                <Badge variant="secondary" className="ml-2">
-                  {products.length}
-                </Badge>
-              </TabsTrigger>
-              <TabsTrigger value="active">
-                Active{' '}
-                <Badge variant="secondary" className="ml-2">
-                  {products.filter((p) => p.status === 'active').length}
-                </Badge>
-              </TabsTrigger>
-              <TabsTrigger value="draft">
-                Draft{' '}
-                <Badge variant="secondary" className="ml-2">
-                  {products.filter((p) => p.status === 'draft').length}
-                </Badge>
-              </TabsTrigger>
-              <TabsTrigger value="archived">
-                Archived{' '}
-                <Badge variant="secondary" className="ml-2">
-                  {products.filter((p) => p.status === 'archived').length}
-                </Badge>
-              </TabsTrigger>
-            </TabsList>
-          </Tabs>
-
-          <Row gap={2} align="center">
-            <Select value={categoryFilter} onValueChange={setCategoryFilter}>
-              <SelectTrigger className="w-[150px]">
-                <Filter className="mr-2 h-4 w-4" />
-                <SelectValue placeholder="Category" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">All categories</SelectItem>
-                {categories.map((cat) => (
-                  <SelectItem key={cat} value={cat}>
-                    {cat}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <Button variant="outline" size="icon">
-              <RefreshCw className="h-4 w-4" />
-            </Button>
-          </Row>
-        </Row>
-
-        {/* Data Table */}
-        <DataTable
-          columns={columns}
-          data={filteredProducts}
-          searchKey="name"
-          searchPlaceholder="Search products..."
-          resizable
-          compact
-        />
-      </main>
-    </Column>
-  );
-}
diff --git a/packages/apollo-wind/src/examples/flow-editor-layout-example.stories.tsx b/packages/apollo-wind/src/examples/flow-editor-layout-example.stories.tsx
deleted file mode 100644
index 70e42eec0..000000000
--- a/packages/apollo-wind/src/examples/flow-editor-layout-example.stories.tsx
+++ /dev/null
@@ -1,255 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import {
-  FlowEditorLayout,
-  SidebarPanelConfig,
-  CanvasToolbar,
-  PublishToolbar,
-} from './flow-editor-layout-example';
-import { Folders, Package, Sparkles } from 'lucide-react';
-import * as React from 'react';
-import { Column, Row } from '@/components/ui/layout';
-import { Button } from '@/components/ui/button';
-
-const defaultSidebarOptions: SidebarPanelConfig[] = [
-  { id: 'folders', icon: <Folders className="h-4 w-4" />, label: 'Folders' },
-  {
-    id: 'resources',
-    icon: <Package className="h-4 w-4" />,
-    label: 'Resources',
-  },
-  {
-    id: 'autopilot',
-    icon: <Sparkles className="h-4 w-4" />,
-    label: 'Autopilot',
-  },
-];
-
-const meta = {
-  title: 'Examples/Flow/Editor Layout',
-  component: FlowEditorLayout,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  argTypes: {
-    activeSidebarId: {
-      control: 'radio',
-      options: ['folders', 'resources', 'autopilot'],
-    },
-    onSidebarChange: { action: 'sidebar changed' },
-    onSidebarOpenChange: { action: 'sidebar open changed' },
-  },
-} satisfies Meta<typeof FlowEditorLayout>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default = {
-  render: () => {
-    const [activeSidebarId, setActiveSidebarId] = React.useState('autopilot');
-    const [sidebarOpen, setSidebarOpen] = React.useState(true);
-
-    return (
-      <FlowEditorLayout
-        sidebarOptions={defaultSidebarOptions}
-        activeSidebarId={activeSidebarId}
-        sidebarOpen={sidebarOpen}
-        onSidebarChange={setActiveSidebarId}
-        onSidebarOpenChange={setSidebarOpen}
-        sidebarContent={
-          <Column className="h-full p-4" justify="center" align="center">
-            <span className="text-sm text-muted-foreground">{activeSidebarId} content</span>
-          </Column>
-        }
-        mainContent={
-          <Column className="h-full" justify="center" align="center">
-            <span className="text-muted-foreground">Main content</span>
-          </Column>
-        }
-      />
-    );
-  },
-} satisfies Story;
-
-export const WithToolbars = {
-  render: () => {
-    const [activeSidebarId, setActiveSidebarId] = React.useState('autopilot');
-    const [sidebarOpen, setSidebarOpen] = React.useState(true);
-
-    return (
-      <FlowEditorLayout
-        sidebarOptions={defaultSidebarOptions}
-        activeSidebarId={activeSidebarId}
-        sidebarOpen={sidebarOpen}
-        onSidebarChange={setActiveSidebarId}
-        onSidebarOpenChange={setSidebarOpen}
-        sidebarContent={
-          <Column className="h-full p-4">
-            <h2 className="font-semibold capitalize">{activeSidebarId}</h2>
-          </Column>
-        }
-        mainContent={
-          <div className="relative h-full">
-            <Column className="h-full" justify="center" align="center" gap={4}>
-              <h1 className="text-2xl font-bold">Build mode</h1>
-              <p className="text-muted-foreground">Drag and drop nodes to build your flow</p>
-            </Column>
-
-            <CanvasToolbar />
-
-            <PublishToolbar />
-          </div>
-        }
-      />
-    );
-  },
-} satisfies Story;
-
-export const WithBottomPanel = {
-  render: () => {
-    const [activeSidebarId, setActiveSidebarId] = React.useState('folders');
-    const [sidebarOpen, setSidebarOpen] = React.useState(true);
-    return (
-      <FlowEditorLayout
-        sidebarOptions={defaultSidebarOptions}
-        activeSidebarId={activeSidebarId}
-        sidebarOpen={sidebarOpen}
-        onSidebarChange={setActiveSidebarId}
-        onSidebarOpenChange={setSidebarOpen}
-        sidebarContent={
-          <Column className="h-full p-4">
-            <h2 className="font-semibold capitalize">{activeSidebarId}</h2>
-          </Column>
-        }
-        mainContent={
-          <div className="relative h-full">
-            <Column className="h-full" justify="center" align="center">
-              <span className="text-muted-foreground">Flow Canvas</span>
-            </Column>
-
-            <CanvasToolbar />
-            <PublishToolbar />
-          </div>
-        }
-        bottomOpen={true}
-        bottomContent={
-          <Column className="p-4" gap={2}>
-            <Row className="text-sm font-mono">
-              <span className="text-muted-foreground">[00:00:01]</span>
-              <span className="ml-2">Starting execution...</span>
-            </Row>
-            <Row className="text-sm font-mono">
-              <span className="text-muted-foreground">[00:00:02]</span>
-              <span className="ml-2 text-green-600">Node 1 completed</span>
-            </Row>
-          </Column>
-        }
-      />
-    );
-  },
-} satisfies Story;
-
-export const WithCustomSidebar = {
-  render: () => {
-    const [activeSidebarId, setActiveSidebarId] = React.useState('autopilot');
-    const [sidebarOpen, setSidebarOpen] = React.useState(true);
-
-    return (
-      <FlowEditorLayout
-        sidebarOptions={defaultSidebarOptions}
-        activeSidebarId={activeSidebarId}
-        sidebarOpen={sidebarOpen}
-        onSidebarChange={setActiveSidebarId}
-        onSidebarOpenChange={setSidebarOpen}
-        sidebarContent={
-          <Column className="h-full p-4" gap={4}>
-            <h2 className="font-semibold text-lg">Sidebar</h2>
-            <p className="text-sm text-muted-foreground">Custom sidebar content</p>
-            <Column gap={2}>
-              <Button variant="outline" className="justify-start">
-                Item 1
-              </Button>
-              <Button variant="outline" className="justify-start">
-                Item 2
-              </Button>
-              <Button variant="outline" className="justify-start">
-                Item 3
-              </Button>
-            </Column>
-          </Column>
-        }
-        mainContent={
-          <div className="relative h-full">
-            <Column className="h-full" justify="center" align="center">
-              <span className="text-muted-foreground">Canvas</span>
-            </Column>
-
-            <CanvasToolbar />
-          </div>
-        }
-      />
-    );
-  },
-} satisfies Story;
-
-const customSidebarOptions: SidebarPanelConfig[] = [
-  { id: 'files', icon: <Folders className="h-4 w-4" />, label: 'Files' },
-  { id: 'packages', icon: <Package className="h-4 w-4" />, label: 'Packages' },
-  { id: 'ai', icon: <Sparkles className="h-4 w-4" />, label: 'AI Assistant' },
-];
-
-export const CustomPanels = {
-  render: () => {
-    const [activeSidebarId, setActiveSidebarId] = React.useState('ai');
-    const [sidebarOpen, setSidebarOpen] = React.useState(true);
-
-    return (
-      <FlowEditorLayout
-        sidebarOptions={customSidebarOptions}
-        activeSidebarId={activeSidebarId}
-        sidebarOpen={sidebarOpen}
-        onSidebarChange={setActiveSidebarId}
-        onSidebarOpenChange={setSidebarOpen}
-        sidebarContent={
-          <Column className="h-full p-4" gap={4}>
-            <h2 className="font-semibold">
-              {customSidebarOptions.find((p) => p.id === activeSidebarId)?.label}
-            </h2>
-            <p className="text-sm text-muted-foreground">Panel content for {activeSidebarId}</p>
-          </Column>
-        }
-        mainContent={
-          <Column className="h-full" justify="center" align="center">
-            <span className="text-muted-foreground">Main content area</span>
-          </Column>
-        }
-      />
-    );
-  },
-} satisfies Story;
-
-export const PanelClosed = {
-  render: () => {
-    const [activeSidebarId, setActiveSidebarId] = React.useState('autopilot');
-    const [sidebarOpen, setSidebarOpen] = React.useState(false);
-
-    return (
-      <FlowEditorLayout
-        sidebarOptions={defaultSidebarOptions}
-        activeSidebarId={activeSidebarId}
-        sidebarOpen={sidebarOpen}
-        onSidebarChange={setActiveSidebarId}
-        onSidebarOpenChange={setSidebarOpen}
-        sidebarContent={
-          <Column className="h-full p-4">
-            <h2 className="font-semibold capitalize">{activeSidebarId}</h2>
-          </Column>
-        }
-        mainContent={
-          <Column className="h-full" justify="center" align="center">
-            <span className="text-muted-foreground">Main content</span>
-          </Column>
-        }
-      />
-    );
-  },
-} satisfies Story;
diff --git a/packages/apollo-wind/src/examples/flow-editor-layout-example.tsx b/packages/apollo-wind/src/examples/flow-editor-layout-example.tsx
deleted file mode 100644
index a9a0843c5..000000000
--- a/packages/apollo-wind/src/examples/flow-editor-layout-example.tsx
+++ /dev/null
@@ -1,285 +0,0 @@
-import { Copy, MoreVertical, Play, Plus } from 'lucide-react';
-import * as React from 'react';
-import { Button } from '@/components/ui/button';
-import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/ui/resizable';
-import { Separator } from '@/components/ui/separator';
-import { Switch } from '@/components/ui/switch';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import { Row, Column } from '@/components/ui/layout';
-import { cn } from '@/lib';
-import { useCallback, useRef, useEffect } from 'react';
-import { ImperativePanelHandle } from 'react-resizable-panels';
-import { Label } from '@radix-ui/react-label';
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-
-interface LatchedButtonProps {
-  isActive: boolean;
-  icon: React.ReactNode;
-  label: string;
-  onClick: () => void;
-}
-
-function LatchedButton({ isActive, icon, label, onClick }: LatchedButtonProps) {
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button
-          variant="ghost"
-          size="icon"
-          className={cn(
-            'w-[40px] h-[40px] rounded-r-2xl rounded-l-none bg-background border',
-            isActive
-              ? '-ml-px w-[41px] border-y-border border-r-border border-l-background'
-              : 'border-l-0 border-border hover:bg-muted'
-          )}
-          onClick={onClick}
-        >
-          <div
-            className={cn(
-              'flex items-center justify-center w-6 h-6 rounded-lg transition-colors',
-              isActive ? 'bg-primary text-background' : 'bg-transparent text-foreground'
-            )}
-          >
-            {icon}
-          </div>
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent side="right">{label}</TooltipContent>
-    </Tooltip>
-  );
-}
-
-export interface SidebarPanelConfig {
-  id: string;
-  icon: React.ReactNode;
-  label: string;
-}
-
-export interface FlowEditorLayoutProps {
-  className?: string;
-
-  // Sidebar
-  sidebarOptions?: SidebarPanelConfig[];
-  sidebarContent?: React.ReactNode;
-  activeSidebarId?: string;
-  sidebarOpen?: boolean;
-  onSidebarChange?: (panelId: string) => void;
-  onSidebarOpenChange?: (open: boolean) => void;
-
-  // Main content
-  mainContent?: React.ReactNode;
-
-  // Bottom panel
-  bottomContent?: React.ReactNode;
-  bottomOpen?: boolean;
-}
-
-export function FlowEditorLayout({
-  className,
-  sidebarOptions,
-  sidebarContent,
-  activeSidebarId,
-  sidebarOpen = false,
-  onSidebarChange,
-  onSidebarOpenChange,
-  mainContent,
-  bottomContent,
-  bottomOpen = false,
-}: FlowEditorLayoutProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const bottomPanelRef = useRef<ImperativePanelHandle>(null);
-  const switcherRef = useRef<HTMLDivElement>(null);
-  const rafRef = useRef<number>(0);
-
-  const updateSwitcherPosition = useCallback(() => {
-    if (!containerRef.current || !switcherRef.current) return;
-
-    if (!bottomOpen) {
-      switcherRef.current.style.bottom = '24px';
-      return;
-    }
-
-    const size = bottomPanelRef.current?.getSize();
-    if (size !== undefined) {
-      const containerHeight = containerRef.current.offsetHeight;
-      const bottomHeight = (size / 100) * containerHeight;
-      switcherRef.current.style.bottom = `${bottomHeight + 24}px`;
-    }
-  }, [bottomOpen]);
-
-  useEffect(() => {
-    updateSwitcherPosition();
-
-    const handleResize = () => {
-      cancelAnimationFrame(rafRef.current);
-      rafRef.current = requestAnimationFrame(updateSwitcherPosition);
-    };
-
-    window.addEventListener('resize', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-      cancelAnimationFrame(rafRef.current);
-    };
-  }, [updateSwitcherPosition]);
-
-  const handlePanelResize = useCallback(() => {
-    cancelAnimationFrame(rafRef.current);
-    rafRef.current = requestAnimationFrame(updateSwitcherPosition);
-  }, [updateSwitcherPosition]);
-
-  const handlePanelSelect = useCallback(
-    (panelId: string) => {
-      if (activeSidebarId === panelId) {
-        onSidebarOpenChange?.(!sidebarOpen);
-      } else {
-        onSidebarChange?.(panelId);
-        if (!sidebarOpen) {
-          onSidebarOpenChange?.(true);
-        }
-      }
-    },
-    [activeSidebarId, sidebarOpen, onSidebarChange, onSidebarOpenChange]
-  );
-
-  return (
-    <TooltipProvider>
-      <Row className={cn('h-screen bg-background', className)}>
-        {/* Left Sidebar */}
-        <div
-          className={cn(
-            'bg-background overflow-hidden transition-all duration-300 ease-in-out',
-            sidebarOpen ? 'w-72' : 'w-0'
-          )}
-        >
-          {sidebarOpen && <Column className="w-72 h-full">{sidebarContent}</Column>}
-        </div>
-
-        {/* Main Content */}
-        <Column ref={containerRef} className="flex-1 relative bg-muted m-1 rounded-3xl border">
-          {/* Panel Switcher - latched to bottom left edge */}
-          {sidebarOptions && sidebarOptions.length > 0 && (
-            <Column
-              ref={switcherRef}
-              gap={2}
-              className="absolute left-0 z-10"
-              style={{ bottom: 24 }}
-            >
-              {sidebarOptions.map((panel) => (
-                <LatchedButton
-                  key={panel.id}
-                  isActive={activeSidebarId === panel.id && sidebarOpen}
-                  icon={panel.icon}
-                  label={panel.label}
-                  onClick={() => handlePanelSelect(panel.id)}
-                />
-              ))}
-            </Column>
-          )}
-
-          <Column className="flex-1 relative rounded-3xl overflow-hidden">
-            <ResizablePanelGroup direction="vertical" className="h-full">
-              {/* Center */}
-              <ResizablePanel defaultSize={100} minSize={30}>
-                <Column className="flex-1 h-full">{mainContent}</Column>
-              </ResizablePanel>
-
-              {/* Bottom Panel */}
-              {bottomOpen && bottomContent && (
-                <>
-                  <ResizableHandle />
-                  <ResizablePanel
-                    ref={bottomPanelRef}
-                    defaultSize={30}
-                    minSize={15}
-                    maxSize={50}
-                    onResize={handlePanelResize}
-                  >
-                    <Column className="flex-1 h-full bg-background">{bottomContent}</Column>
-                  </ResizablePanel>
-                </>
-              )}
-            </ResizablePanelGroup>
-          </Column>
-        </Column>
-      </Row>
-    </TooltipProvider>
-  );
-}
-
-// ============================================================================
-// Exports -- TEMPORARY
-// ============================================================================
-
-function CanvasToolbar() {
-  return (
-    <Row className="absolute bottom-4 left-1/2 -translate-x-1/2" align="center" gap={1}>
-      <div className="flex items-center gap-1 rounded-lg border bg-background p-1.5">
-        <ToggleGroup type="single" defaultValue="build" className="gap-0">
-          <ToggleGroupItem
-            value="build"
-            className="h-8 rounded-md px-3 data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
-          >
-            Build
-          </ToggleGroupItem>
-          <ToggleGroupItem
-            value="evaluate"
-            className="h-8 rounded-md px-3 data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
-          >
-            Evaluate
-          </ToggleGroupItem>
-        </ToggleGroup>
-
-        <Separator orientation="vertical" className="mx-1 h-6" />
-
-        <Button variant="ghost" size="icon" className="h-8 w-8">
-          <Play className="h-4 w-4" />
-        </Button>
-
-        <Separator orientation="vertical" className="mx-1 h-6" />
-
-        <Button variant="ghost" size="icon" className="h-8 w-8">
-          <Plus className="h-4 w-4" />
-        </Button>
-        <Button variant="ghost" size="icon" className="h-8 w-8">
-          <Copy className="h-4 w-4" />
-        </Button>
-      </div>
-    </Row>
-  );
-}
-
-function PublishToolbar() {
-  return (
-    <Row className="absolute bottom-4 right-4">
-      <div className="flex items-center gap-3 rounded-lg border bg-background p-1.5 pl-3">
-        <Label htmlFor="toolbar-active" className="text-sm font-medium">
-          Active
-        </Label>
-        <Switch id="toolbar-active" />
-
-        <Separator orientation="vertical" className="h-6" />
-
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon" className="h-8 w-8">
-              <MoreVertical className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem>Edit</DropdownMenuItem>
-            <DropdownMenuItem>Duplicate</DropdownMenuItem>
-            <DropdownMenuItem>Delete</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    </Row>
-  );
-}
-
-export { CanvasToolbar, PublishToolbar };
diff --git a/packages/apollo-wind/src/examples/flow-start-example.stories.tsx b/packages/apollo-wind/src/examples/flow-start-example.stories.tsx
deleted file mode 100644
index 91070574d..000000000
--- a/packages/apollo-wind/src/examples/flow-start-example.stories.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Blocks, FolderKanban, GitBranch, Sparkles } from 'lucide-react';
-import type { ProcessOption, RecentProject } from './flow-start-example';
-import { FlowStartExample } from './flow-start-example';
-
-const meta = {
-  title: 'Examples/Flow/Start',
-  component: FlowStartExample,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  argTypes: {
-    onOptionSelect: { action: 'option selected' },
-    onProjectSelect: { action: 'project selected' },
-    defaultViewMode: {
-      control: 'radio',
-      options: ['cards', 'table'],
-    },
-  },
-} satisfies Meta<typeof FlowStartExample>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const processOptions: ProcessOption[] = [
-  {
-    id: 'flow',
-    title: 'Flow',
-    description: 'Effortlessly build and deploy powerful automations—no code required',
-    icon: <GitBranch className="h-5 w-5" />,
-    badge: 'NEW',
-    badgeVariant: 'default',
-  },
-  {
-    id: 'bpmn',
-    title: 'BPMN',
-    description: 'Design and implement business processes with the structure of BPMN 2.0',
-    icon: <Blocks className="h-5 w-5" />,
-  },
-  {
-    id: 'case',
-    title: 'Case management',
-    description: 'Creating and deploy end to end case management workflows',
-    icon: <FolderKanban className="h-5 w-5" />,
-  },
-  {
-    id: 'autopilot',
-    title: 'Generate with Autopilot',
-    description: 'Describe what you need, and Autopilot will build it',
-    icon: <Sparkles className="h-5 w-5" />,
-  },
-];
-
-const recentProjects: RecentProject[] = [
-  {
-    id: '1',
-    name: 'Invoice Processing Automation',
-    type: 'flow',
-    lastModified: '2 hours ago',
-    status: 'published',
-  },
-  {
-    id: '2',
-    name: 'Customer Onboarding BPMN',
-    type: 'bpmn',
-    lastModified: 'Yesterday',
-    status: 'draft',
-  },
-  {
-    id: '3',
-    name: 'Support Ticket Case Flow',
-    type: 'case',
-    lastModified: '3 days ago',
-    status: 'published',
-  },
-  {
-    id: '4',
-    name: 'HR Request Handler',
-    type: 'autopilot',
-    lastModified: '1 week ago',
-    status: 'archived',
-  },
-  {
-    id: '5',
-    name: 'Expense Report Approval',
-    type: 'bpmn',
-    lastModified: '2 weeks ago',
-    status: 'published',
-  },
-  {
-    id: '6',
-    name: 'New Employee Onboarding',
-    type: 'case',
-    lastModified: '3 weeks ago',
-    status: 'draft',
-  },
-  {
-    id: '7',
-    name: 'Contract Review Process',
-    type: 'flow',
-    lastModified: '1 month ago',
-    status: 'published',
-  },
-  {
-    id: '8',
-    name: 'Customer Feedback Analysis',
-    type: 'autopilot',
-    lastModified: '1 month ago',
-    status: 'archived',
-  },
-];
-
-export const Default: Story = {
-  args: {
-    processOptions,
-    recentProjects,
-    showSkeleton: false,
-    defaultViewMode: 'cards',
-  },
-};
diff --git a/packages/apollo-wind/src/examples/flow-start-example.tsx b/packages/apollo-wind/src/examples/flow-start-example.tsx
deleted file mode 100644
index c4634d23d..000000000
--- a/packages/apollo-wind/src/examples/flow-start-example.tsx
+++ /dev/null
@@ -1,390 +0,0 @@
-import { ColumnDef } from '@tanstack/react-table';
-import {
-  Blocks,
-  Bot,
-  FolderKanban,
-  GitBranch,
-  LayoutGrid,
-  List,
-  MoreHorizontal,
-} from 'lucide-react';
-import * as React from 'react';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { ButtonGroup } from '@/components/ui/button-group';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { DataTable, DataTableColumnHeader } from '@/components/ui/data-table';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { Skeleton } from '@/components/ui/skeleton';
-import { Row, Column, Grid } from '@/components/ui/layout';
-import { cn } from '@/lib';
-
-export interface ProcessOption {
-  id: string;
-  title: string;
-  description: string;
-  icon: React.ReactNode;
-  badge?: string;
-  badgeVariant?: 'default' | 'secondary' | 'destructive' | 'outline';
-  onClick?: () => void;
-}
-
-export interface RecentProject {
-  id: string;
-  name: string;
-  type: 'flow' | 'bpmn' | 'case' | 'autopilot';
-  lastModified: string;
-  status?: 'draft' | 'published' | 'archived';
-}
-
-export type ViewMode = 'cards' | 'table';
-
-export interface FlowStartExampleProps {
-  className?: string;
-  title?: string;
-  subtitle?: string;
-  processOptions?: ProcessOption[];
-  recentProjects?: RecentProject[];
-  showSkeleton?: boolean;
-  defaultViewMode?: ViewMode;
-  onOptionSelect?: (optionId: string) => void;
-  onProjectSelect?: (projectId: string) => void;
-}
-
-function ProcessOptionCard({
-  option,
-  isSelected,
-  onSelect,
-}: {
-  option: ProcessOption;
-  isSelected?: boolean;
-  onSelect?: () => void;
-}) {
-  return (
-    <Card
-      className={cn(
-        'group relative cursor-pointer transition-all duration-200 hover:border-primary/50 hover:shadow-md',
-        isSelected && 'border-primary ring-2 ring-primary/20'
-      )}
-      onClick={onSelect}
-    >
-      {option.badge && (
-        <Badge
-          variant={option.badgeVariant}
-          className="absolute -top-2 right-4 text-[10px] px-2 py-0.5"
-        >
-          {option.badge}
-        </Badge>
-      )}
-      <CardHeader className="pb-3">
-        <Row gap={3} align="center">
-          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted text-muted-foreground transition-colors group-hover:bg-primary/10 group-hover:text-primary">
-            {option.icon}
-          </div>
-        </Row>
-      </CardHeader>
-      <CardContent className="pt-0">
-        <CardTitle className="text-base mb-2">{option.title}</CardTitle>
-        <CardDescription className="text-sm leading-relaxed">{option.description}</CardDescription>
-      </CardContent>
-    </Card>
-  );
-}
-
-function getTypeIcon(type: RecentProject['type']) {
-  switch (type) {
-    case 'flow':
-      return <GitBranch className="h-4 w-4" />;
-    case 'bpmn':
-      return <Blocks className="h-4 w-4" />;
-    case 'case':
-      return <FolderKanban className="h-4 w-4" />;
-    case 'autopilot':
-      return <Bot className="h-4 w-4" />;
-  }
-}
-
-function getTypeLabel(type: RecentProject['type']) {
-  switch (type) {
-    case 'flow':
-      return 'Flow';
-    case 'bpmn':
-      return 'BPMN';
-    case 'case':
-      return 'Case Management';
-    case 'autopilot':
-      return 'Autopilot';
-  }
-}
-
-function getStatusVariant(status: RecentProject['status']) {
-  switch (status) {
-    case 'published':
-      return 'default';
-    case 'draft':
-      return 'secondary';
-    case 'archived':
-      return 'outline';
-    default:
-      return 'secondary';
-  }
-}
-
-function RecentProjectCard({
-  project,
-  onSelect,
-}: {
-  project: RecentProject;
-  onSelect?: () => void;
-}) {
-  return (
-    <Card
-      className="group cursor-pointer transition-all duration-200 hover:border-primary/50 hover:shadow-sm"
-      onClick={onSelect}
-    >
-      <CardContent className="p-4">
-        <Row gap={3} align="start">
-          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
-            {getTypeIcon(project.type)}
-          </div>
-          <Column gap={1} flex={1} className="min-w-0">
-            <Row justify="between" align="center" gap={2}>
-              <span className="truncate font-medium text-sm">{project.name}</span>
-              {project.status && (
-                <Badge variant={getStatusVariant(project.status)} className="shrink-0 text-[10px]">
-                  {project.status}
-                </Badge>
-              )}
-            </Row>
-            <span className="text-xs text-muted-foreground">{project.lastModified}</span>
-          </Column>
-        </Row>
-      </CardContent>
-    </Card>
-  );
-}
-
-function SkeletonSection() {
-  return (
-    <Column gap={4}>
-      <Skeleton className="h-5 w-32" />
-      <Column gap={3}>
-        <Row gap={2}>
-          <Skeleton className="h-4 flex-1 max-w-[280px]" />
-        </Row>
-        <Row gap={2}>
-          <Skeleton className="h-4 flex-1 max-w-[240px]" />
-        </Row>
-        <Row gap={2}>
-          <Skeleton className="h-4 flex-1 max-w-[320px]" />
-        </Row>
-        <Row gap={2}>
-          <Skeleton className="h-4 flex-1 max-w-[200px]" />
-        </Row>
-        <Row gap={2}>
-          <Skeleton className="h-4 flex-1 max-w-[260px]" />
-        </Row>
-      </Column>
-    </Column>
-  );
-}
-
-function createProjectColumns(
-  onProjectSelect?: (projectId: string) => void
-): ColumnDef<RecentProject, unknown>[] {
-  return [
-    {
-      accessorKey: 'name',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
-      cell: ({ row }) => (
-        <Row gap={2} align="center">
-          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
-            {getTypeIcon(row.original.type)}
-          </div>
-          <span className="font-medium">{row.original.name}</span>
-        </Row>
-      ),
-    },
-    {
-      accessorKey: 'type',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Type" />,
-      cell: ({ row }) => (
-        <span className="text-muted-foreground">{getTypeLabel(row.original.type)}</span>
-      ),
-    },
-    {
-      accessorKey: 'status',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
-      cell: ({ row }) => {
-        const status = row.original.status;
-        return status ? (
-          <Badge variant={getStatusVariant(status)} className="capitalize">
-            {status}
-          </Badge>
-        ) : null;
-      },
-    },
-    {
-      accessorKey: 'lastModified',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Last Modified" />,
-      cell: ({ row }) => <span className="text-muted-foreground">{row.original.lastModified}</span>,
-    },
-    {
-      id: 'actions',
-      cell: ({ row }) => (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon" className="h-8 w-8">
-              <MoreHorizontal className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem onClick={() => onProjectSelect?.(row.original.id)}>
-              Open
-            </DropdownMenuItem>
-            <DropdownMenuItem>Duplicate</DropdownMenuItem>
-            <DropdownMenuItem>Archive</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      ),
-    },
-  ];
-}
-
-export function FlowStartExample({
-  className,
-  title = 'BUILD YOUR FIRST AGENTIC PROCESS',
-  subtitle = 'What would you like to start with?',
-  processOptions = [],
-  recentProjects = [],
-  showSkeleton = false,
-  defaultViewMode = 'cards',
-  onOptionSelect,
-  onProjectSelect,
-}: FlowStartExampleProps) {
-  const [selectedOption, setSelectedOption] = React.useState<string | null>(null);
-  const [viewMode, setViewMode] = React.useState<ViewMode>(defaultViewMode);
-
-  const handleOptionSelect = (optionId: string) => {
-    setSelectedOption(optionId);
-    onOptionSelect?.(optionId);
-  };
-
-  const columns = React.useMemo(() => createProjectColumns(onProjectSelect), [onProjectSelect]);
-
-  return (
-    <Column minH="screen" className={className}>
-      {/* Hero Section with background */}
-      <div className="bg-muted/40">
-        {/* Header */}
-        <header className="border-b border-border/50 ">
-          <Row justify="between" align="center" className="h-14 px-6">
-            <span className="font-semibold text-lg">UiPath Maestro</span>
-            <Skeleton className="h-8 w-8 rounded-full" />
-          </Row>
-        </header>
-
-        {/* Hero Content */}
-        <Column className="px-8 py-16 md:px-16">
-          <Column gap={3} align="center" className="mb-12 text-center">
-            <h1 className="text-3xl md:text-4xl font-bold tracking-tight uppercase">{title}</h1>
-            <p className="text-muted-foreground text-lg">{subtitle}</p>
-          </Column>
-
-          {/* Process Options Grid */}
-          <Grid cols={1} gap={4} className="sm:grid-cols-2 lg:grid-cols-4 max-w-6xl mx-auto w-full">
-            {processOptions.map((option) => (
-              <ProcessOptionCard
-                key={option.id}
-                option={option}
-                isSelected={selectedOption === option.id}
-                onSelect={() => handleOptionSelect(option.id)}
-              />
-            ))}
-          </Grid>
-
-          {/* Skeleton Loading Sections */}
-          {showSkeleton && (
-            <Column gap={12} className="max-w-6xl mx-auto w-full mt-16">
-              <Grid cols={1} gap={8} className="lg:grid-cols-3">
-                <SkeletonSection />
-                <SkeletonSection />
-                <SkeletonSection />
-              </Grid>
-            </Column>
-          )}
-        </Column>
-      </div>
-
-      {/* Recent Projects Section - White background */}
-      {recentProjects.length > 0 && !showSkeleton && (
-        <Column flex={1} className="px-8 py-12 md:px-16">
-          <Column gap={6} className="max-w-6xl mx-auto w-full">
-            <Row justify="between" align="center">
-              <h2 className="text-xl font-semibold">Recent Projects</h2>
-              {/* View Mode Toggle */}
-              <ButtonGroup>
-                <Button
-                  variant={viewMode === 'cards' ? 'secondary' : 'outline'}
-                  size="icon"
-                  onClick={() => setViewMode('cards')}
-                  aria-label="Card view"
-                >
-                  <LayoutGrid className="h-4 w-4" />
-                </Button>
-                <Button
-                  variant={viewMode === 'table' ? 'secondary' : 'outline'}
-                  size="icon"
-                  onClick={() => setViewMode('table')}
-                  aria-label="Table view"
-                >
-                  <List className="h-4 w-4" />
-                </Button>
-              </ButtonGroup>
-            </Row>
-
-            {/* Cards View */}
-            {viewMode === 'cards' && (
-              <Grid cols={1} gap={4} className="sm:grid-cols-2 lg:grid-cols-4">
-                {recentProjects.map((project) => (
-                  <RecentProjectCard
-                    key={project.id}
-                    project={project}
-                    onSelect={() => onProjectSelect?.(project.id)}
-                  />
-                ))}
-              </Grid>
-            )}
-
-            {/* Table View */}
-            {viewMode === 'table' && (
-              <DataTable
-                columns={columns}
-                data={recentProjects}
-                searchKey="name"
-                searchPlaceholder="Search projects..."
-                showColumnToggle={false}
-                showPagination={recentProjects.length > 10}
-                compact
-              />
-            )}
-          </Column>
-        </Column>
-      )}
-
-      {/* Footer skeleton */}
-      {showSkeleton && (
-        <div className="bg-background border-t flex-1">
-          <Row justify="center" className="px-8 py-8">
-            <Skeleton className="h-24 w-full max-w-4xl rounded-lg" />
-          </Row>
-        </div>
-      )}
-    </Column>
-  );
-}
diff --git a/packages/apollo-wind/src/examples/form-builder-example.stories.tsx b/packages/apollo-wind/src/examples/form-builder-example.stories.tsx
deleted file mode 100644
index 11d86e158..000000000
--- a/packages/apollo-wind/src/examples/form-builder-example.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { FormBuilderExample } from './form-builder-example';
-
-const meta = {
-  title: 'Examples/Form Builder',
-  component: FormBuilderExample,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} satisfies Meta<typeof FormBuilderExample>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
diff --git a/packages/apollo-wind/src/examples/new-project-example.stories.tsx b/packages/apollo-wind/src/examples/new-project-example.stories.tsx
deleted file mode 100644
index 6935c10ab..000000000
--- a/packages/apollo-wind/src/examples/new-project-example.stories.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import type { ProjectExample } from './new-project-example';
-import { NewProjectExample } from './new-project-example';
-
-const meta = {
-  title: 'Examples/New Project',
-  component: NewProjectExample,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  argTypes: {
-    onCreateBlank: { action: 'create blank clicked' },
-    autopilot: {
-      control: 'object',
-    },
-  },
-} satisfies Meta<typeof NewProjectExample>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const defaultExamples: ProjectExample[] = [
-  {
-    id: '1',
-    name: 'Client Onboarding Account Opening',
-    description:
-      'An agentic process built with Maestro, modeled using BPMN to orchestrate customer data across...',
-    usageCount: 3400,
-    category: 'financial',
-    tools: ['office365', 'maestro'],
-    onUse: () => console.log('Using template 1'),
-  },
-  {
-    id: '2',
-    name: 'KYC / CDD & Sanctions Screening',
-    description:
-      'An agentic process built with Maestro, modeled using BPMN to coordinate identity verification, s...',
-    usageCount: 1700,
-    category: 'financial',
-    tools: ['google', 'maestro'],
-    onUse: () => console.log('Using template 2'),
-  },
-  {
-    id: '3',
-    name: 'Payments Processing & Exceptions',
-    description:
-      'An agentic process built with Maestro, modeled using BPMN to orchestrate payment validation, f...',
-    usageCount: 1200,
-    category: 'financial',
-    tools: ['office365', 'maestro'],
-    onUse: () => console.log('Using template 3'),
-  },
-  {
-    id: '4',
-    name: 'AML Alert Investigation & Case Mgmt',
-    description:
-      'An agentic process built with Maestro, modeled using BPMN to handle AML alerts through tran...',
-    usageCount: 3400,
-    category: 'financial',
-    tools: ['office365', 'maestro'],
-    onUse: () => console.log('Using template 4'),
-  },
-  {
-    id: '5',
-    name: 'Regulatory Reporting',
-    description:
-      'An agentic process built with Maestro, modeled using BPMN to automate data aggregation, com...',
-    usageCount: 1700,
-    category: 'financial',
-    tools: ['google', 'maestro'],
-    onUse: () => console.log('Using template 5'),
-  },
-  {
-    id: '6',
-    name: 'Insurance First Notice of Loss (FNOL)',
-    description:
-      'An agentic process built with Maestro, modeled using BPMN to guide claim intake, coverage che...',
-    usageCount: 1200,
-    category: 'healthcare',
-    tools: ['office365', 'maestro'],
-    onUse: () => console.log('Using template 6'),
-  },
-  {
-    id: '7',
-    name: 'Insurance Claims Adjudication & Settlement',
-    description:
-      'An agentic process built with Maestro, modeled using BPMN to coordinate policy validation, frau...',
-    usageCount: 3400,
-    category: 'healthcare',
-    tools: ['office365', 'maestro'],
-    onUse: () => console.log('Using template 7'),
-  },
-  {
-    id: '8',
-    name: 'Underwriting (New & Renewal)',
-    description:
-      'An agentic process built with Maestro, modeled using BPMN to orchestrate data gathering, risk...',
-    usageCount: 1700,
-    category: 'other',
-    tools: ['google', 'maestro'],
-    onUse: () => console.log('Using template 8'),
-  },
-  {
-    id: '9',
-    name: 'Cards Dispute & Chargeback Management',
-    description:
-      'An agentic process built with Maestro, modeled using BPMN to automate dispute intake, transac...',
-    usageCount: 1200,
-    category: 'financial',
-    tools: ['office365', 'maestro'],
-    onUse: () => console.log('Using template 9'),
-  },
-];
-
-export const Default: Story = {
-  args: {
-    onCreateBlank: () => console.log('Create blank project'),
-    autopilot: {
-      placeholder: 'Create an agent to...',
-      disclaimer: 'Autopilot can make mistakes. Please double check the responses.',
-      onSubmit: (prompt: string) => console.log('Autopilot prompt:', prompt),
-    },
-    templates: defaultExamples,
-    categories: [
-      { id: 'financial', label: 'Financial' },
-      { id: 'healthcare', label: 'Healthcare' },
-      { id: 'other', label: 'Other' },
-    ],
-    tools: [
-      { id: 'office365', label: 'Office365' },
-      { id: 'jira', label: 'Jira' },
-      { id: 'sap-concur', label: 'SAP Concur' },
-      { id: 'slack', label: 'Slack' },
-      { id: 'docusign', label: 'DocuSign' },
-    ],
-  },
-};
diff --git a/packages/apollo-wind/src/examples/new-project-example.tsx b/packages/apollo-wind/src/examples/new-project-example.tsx
deleted file mode 100644
index ed35dee28..000000000
--- a/packages/apollo-wind/src/examples/new-project-example.tsx
+++ /dev/null
@@ -1,400 +0,0 @@
-import { ArrowUp, Plus, Search, X } from 'lucide-react';
-import * as React from 'react';
-import { Button } from '@/components/ui/button';
-import { Checkbox } from '@/components/ui/checkbox';
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerHeader,
-  DrawerTitle,
-} from '@/components/ui/drawer';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Textarea } from '@/components/ui/textarea';
-import { cn } from '@/lib';
-import { Row, Column, Grid } from '@/components/ui/layout';
-
-export interface ProjectExample {
-  id: string;
-  name: string;
-  description: string;
-  usageCount: number;
-  category?: string;
-  tools?: string[];
-  onUse?: () => void;
-}
-
-export interface NewProjectExampleProps {
-  className?: string;
-  title?: string;
-  subtitle?: string;
-  templates?: ProjectExample[];
-  categories?: Array<{ id: string; label: string }>;
-  tools?: Array<{ id: string; label: string }>;
-  autopilot?: {
-    placeholder?: string;
-    disclaimer?: string;
-    onSubmit?: (prompt: string) => void;
-  };
-  onCreateBlank?: () => void;
-}
-
-export function NewProjectExample({
-  className,
-  title = "Let's create an agentic process",
-  subtitle = 'Design and orchestrate end-to-end processes with AI agents, robots, and people using BPMN-based diagrams.',
-  templates = [
-    {
-      id: '1',
-      name: 'Invoice processing',
-      description:
-        'Automate the end-to-end process of capturing, validating, and approving invoices.',
-      usageCount: 3400,
-      category: 'financial',
-      tools: ['office365', 'maestro'],
-    },
-    {
-      id: '2',
-      name: 'Loan processing',
-      description: 'Optimize the evaluation, approval, and disbursement of loans.',
-      usageCount: 1700,
-      category: 'financial',
-      tools: ['google', 'maestro'],
-    },
-    {
-      id: '3',
-      name: 'Supplier onboarding',
-      description: 'Coordinate the registration, verification, and integration of new suppliers.',
-      usageCount: 1200,
-      category: 'other',
-      tools: ['office365', 'maestro'],
-    },
-  ],
-  categories = [
-    { id: 'financial', label: 'Financial' },
-    { id: 'healthcare', label: 'Healthcare' },
-    { id: 'other', label: 'Other' },
-  ],
-  tools = [
-    { id: 'office365', label: 'Office365' },
-    { id: 'jira', label: 'Jira' },
-    { id: 'sap-concur', label: 'SAP Concur' },
-    { id: 'slack', label: 'Slack' },
-    { id: 'docusign', label: 'DocuSign' },
-  ],
-  autopilot,
-  onCreateBlank,
-}: NewProjectExampleProps) {
-  const [autopilotPrompt, setAutopilotPrompt] = React.useState('');
-  const [drawerOpen, setDrawerOpen] = React.useState(false);
-  const [searchQuery, setSearchQuery] = React.useState('');
-  const [selectedCategories, setSelectedCategories] = React.useState<string[]>([]);
-  const [selectedTools, setSelectedTools] = React.useState<string[]>([]);
-
-  const handleAutopilotSubmit = () => {
-    if (autopilot?.onSubmit && autopilotPrompt.trim()) {
-      autopilot.onSubmit(autopilotPrompt);
-    }
-  };
-
-  const formatUsageCount = (count: number) => {
-    if (count >= 1000) {
-      return `${(count / 1000).toFixed(1)}k`;
-    }
-    return count.toString();
-  };
-
-  const toggleCategory = (categoryId: string) => {
-    setSelectedCategories((prev) =>
-      prev.includes(categoryId) ? prev.filter((c) => c !== categoryId) : [...prev, categoryId]
-    );
-  };
-
-  const toggleTool = (toolId: string) => {
-    setSelectedTools((prev) =>
-      prev.includes(toolId) ? prev.filter((t) => t !== toolId) : [...prev, toolId]
-    );
-  };
-
-  const filteredExamples = React.useMemo(() => {
-    return templates.filter((template) => {
-      const matchesSearch =
-        searchQuery === '' ||
-        template.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        template.description.toLowerCase().includes(searchQuery.toLowerCase());
-
-      const matchesCategory =
-        selectedCategories.length === 0 ||
-        (template.category && selectedCategories.includes(template.category));
-
-      const matchesTools =
-        selectedTools.length === 0 ||
-        (template.tools && template.tools.some((tool) => selectedTools.includes(tool)));
-
-      return matchesSearch && matchesCategory && matchesTools;
-    });
-  }, [templates, searchQuery, selectedCategories, selectedTools]);
-
-  const ExampleCard = ({ template }: { template: ProjectExample }) => (
-    <Column className="group rounded-lg border border-border/30 bg-card p-8 transition-all hover:border-border/60 hover:shadow-sm">
-      <Column gap={4} flex={1} className="mb-8">
-        <h3 className="text-base font-semibold leading-tight">{template.name}</h3>
-        <p className="text-sm text-muted-foreground leading-relaxed">{template.description}</p>
-        <Row gap={1.5} align="center" className="text-xs text-muted-foreground">
-          <svg
-            className="h-3.5 w-3.5"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-            />
-          </svg>
-          <span>{formatUsageCount(template.usageCount)}</span>
-        </Row>
-      </Column>
-      <Button variant="outline" size="sm" className="h-9 w-full" onClick={template.onUse}>
-        Use
-      </Button>
-    </Column>
-  );
-
-  return (
-    <>
-      <Column
-        minH="screen"
-        gap={8}
-        className={cn('bg-background px-8 py-16 md:px-16 md:py-20', className)}
-      >
-        {/* Header Section */}
-        <div>
-          <Row justify="between" align="start" gap={8}>
-            <Column flex={1}>
-              <h1 className="text-3xl font-bold tracking-tight">{title}</h1>
-              <p className="mt-4 text-base text-muted-foreground">{subtitle}</p>
-            </Column>
-            <Button variant="link" onClick={() => setDrawerOpen(true)} className="shrink-0">
-              Explore templates
-            </Button>
-          </Row>
-        </div>
-
-        {/* Examples Grid */}
-        <Grid gap={8} cols={1} className="sm:grid-cols-2 lg:grid-cols-4">
-          {/* Blank Example */}
-          <button
-            className="group flex cursor-pointer flex-col items-center justify-between rounded-lg border border-dashed border-border/40 bg-card p-8 text-center transition-all hover:border-border/70 hover:shadow-sm"
-            onClick={onCreateBlank}
-          >
-            <Column gap={4} w="full">
-              <h3 className="text-base font-semibold">Blank agentic process</h3>
-              <p className="text-sm text-muted-foreground">Start building without a template.</p>
-            </Column>
-            <div className="mt-8 flex h-20 w-20 items-center justify-center rounded-lg border-2 border-dashed border-border/50">
-              <Plus className="h-8 w-8 text-primary" />
-            </div>
-          </button>
-
-          {/* Example Cards */}
-          {templates.slice(0, 3).map((template) => (
-            <ExampleCard key={template.id} template={template} />
-          ))}
-        </Grid>
-
-        {/* Autopilot Section */}
-        {autopilot && (
-          <div className="mx-auto w-full max-w-3xl">
-            <h2 className="mb-6 text-lg font-semibold">Autopilot</h2>
-            <div className="rounded-lg border border-border/30 bg-card">
-              <div className="relative p-6">
-                <Textarea
-                  placeholder={autopilot.placeholder}
-                  value={autopilotPrompt}
-                  onChange={(e) => setAutopilotPrompt(e.target.value)}
-                  className="min-h-[120px] resize-none border-0 p-0 pb-12 text-sm placeholder:text-muted-foreground/50 focus-visible:ring-0"
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-                      e.preventDefault();
-                      handleAutopilotSubmit();
-                    }
-                  }}
-                />
-                <div className="absolute bottom-6 left-6 right-6 flex items-center justify-between">
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-8 w-8"
-                    onClick={() => setAutopilotPrompt('')}
-                    disabled={!autopilotPrompt}
-                    aria-label="Clear prompt"
-                  >
-                    <Plus className="h-4 w-4" />
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-8 w-8"
-                    onClick={handleAutopilotSubmit}
-                    disabled={!autopilotPrompt.trim()}
-                    aria-label="Submit prompt"
-                  >
-                    <ArrowUp className="h-4 w-4" />
-                  </Button>
-                </div>
-              </div>
-              {autopilot.disclaimer && (
-                <div className="border-t border-border/20 px-6 py-3 text-center">
-                  <p className="text-xs text-muted-foreground">{autopilot.disclaimer}</p>
-                </div>
-              )}
-            </div>
-          </div>
-        )}
-      </Column>
-
-      {/* Explore Examples Drawer */}
-      <Drawer open={drawerOpen} onOpenChange={setDrawerOpen}>
-        <DrawerContent className="max-h-[75vh]">
-          <DrawerHeader className="border-b px-4 py-2 md:px-6 md:py-3">
-            <Row justify="between" align="start">
-              <div>
-                <DrawerTitle className="text-base md:text-lg">Explore templates</DrawerTitle>
-                <DrawerDescription className="text-xs md:text-sm">
-                  Build, customise and deploy an Agentic Process starting from a template.
-                </DrawerDescription>
-              </div>
-              <DrawerClose asChild>
-                <Button variant="ghost" size="icon" className="h-7 w-7 md:h-8 md:w-8 shrink-0">
-                  <X className="h-3 w-3 md:h-4 md:w-4" />
-                  <span className="sr-only">Close</span>
-                </Button>
-              </DrawerClose>
-            </Row>
-          </DrawerHeader>
-
-          <Row overflow="hidden" className="h-[calc(75vh-80px)]">
-            {/* Sidebar */}
-            <div className="hidden w-56 border-r bg-muted/20 p-3 md:block">
-              <div className="mb-3">
-                <div className="relative">
-                  <Search className="absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground" />
-                  <Input
-                    placeholder="Search"
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                    className="h-8 pl-7 text-xs"
-                  />
-                </div>
-              </div>
-
-              <Column gap={3}>
-                <div>
-                  <Row justify="between" align="center" className="mb-1.5">
-                    <h4 className="text-xs font-semibold">Category</h4>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="h-auto p-0 text-[10px]"
-                      onClick={() => setSelectedCategories([])}
-                    >
-                      Clear
-                    </Button>
-                  </Row>
-                  <Column gap={1.5}>
-                    {categories.map((category) => (
-                      <Row key={category.id} gap={2} align="center">
-                        <Checkbox
-                          id={`category-${category.id}`}
-                          checked={selectedCategories.includes(category.id)}
-                          onCheckedChange={() => toggleCategory(category.id)}
-                          className="h-3 w-3"
-                        />
-                        <Label
-                          htmlFor={`category-${category.id}`}
-                          className="cursor-pointer text-xs font-normal"
-                        >
-                          {category.label}
-                        </Label>
-                      </Row>
-                    ))}
-                  </Column>
-                </div>
-
-                <div>
-                  <Row justify="between" align="center" className="mb-1.5">
-                    <h4 className="text-xs font-semibold">Tool</h4>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="h-auto p-0 text-[10px]"
-                      onClick={() => setSelectedTools([])}
-                    >
-                      Clear
-                    </Button>
-                  </Row>
-                  <Column gap={1.5}>
-                    {tools.map((tool) => (
-                      <Row key={tool.id} gap={2} align="center">
-                        <Checkbox
-                          id={`tool-${tool.id}`}
-                          checked={selectedTools.includes(tool.id)}
-                          onCheckedChange={() => toggleTool(tool.id)}
-                          className="h-3 w-3"
-                        />
-                        <Label
-                          htmlFor={`tool-${tool.id}`}
-                          className="cursor-pointer text-xs font-normal"
-                        >
-                          {tool.label}
-                        </Label>
-                      </Row>
-                    ))}
-                  </Column>
-                </div>
-
-                <Button variant="link" size="sm" className="h-auto p-0 text-[10px]">
-                  Show more
-                </Button>
-              </Column>
-            </div>
-
-            {/* Main Content */}
-            <div className="flex-1 overflow-y-auto p-3 md:p-4">
-              {/* Mobile Search */}
-              <div className="mb-3 md:hidden">
-                <div className="relative">
-                  <Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-                  <Input
-                    placeholder="Search"
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                    className="pl-8 text-sm"
-                  />
-                </div>
-              </div>
-
-              <Grid gap={3} cols={1} className="sm:grid-cols-2 lg:grid-cols-3">
-                {filteredExamples.map((template) => (
-                  <ExampleCard key={template.id} template={template} />
-                ))}
-              </Grid>
-
-              {filteredExamples.length === 0 && (
-                <Row h={32} justify="center" align="center">
-                  <p className="text-sm text-muted-foreground">No templates found</p>
-                </Row>
-              )}
-            </div>
-          </Row>
-        </DrawerContent>
-      </Drawer>
-    </>
-  );
-}
diff --git a/packages/apollo-wind/src/examples/settings-example.stories.tsx b/packages/apollo-wind/src/examples/settings-example.stories.tsx
deleted file mode 100644
index 9ebb17b00..000000000
--- a/packages/apollo-wind/src/examples/settings-example.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { SettingsExample } from './settings-example';
-
-const meta = {
-  title: 'Examples/Settings',
-  component: SettingsExample,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} satisfies Meta<typeof SettingsExample>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
diff --git a/packages/apollo-wind/src/examples/settings-example.tsx b/packages/apollo-wind/src/examples/settings-example.tsx
deleted file mode 100644
index c4fd22428..000000000
--- a/packages/apollo-wind/src/examples/settings-example.tsx
+++ /dev/null
@@ -1,461 +0,0 @@
-import * as React from 'react';
-import { Bell, Key, Palette, Shield, User, CreditCard } from 'lucide-react';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Separator } from '@/components/ui/separator';
-import { Switch } from '@/components/ui/switch';
-import { Textarea } from '@/components/ui/textarea';
-import { cn } from '@/lib';
-import { Row, Column, Grid } from '@/components/ui/layout';
-
-interface NavItem {
-  id: string;
-  label: string;
-  icon: React.ReactNode;
-}
-
-const navItems: NavItem[] = [
-  { id: 'profile', label: 'Profile', icon: <User className="h-4 w-4" /> },
-  { id: 'account', label: 'Account', icon: <Key className="h-4 w-4" /> },
-  {
-    id: 'appearance',
-    label: 'Appearance',
-    icon: <Palette className="h-4 w-4" />,
-  },
-  {
-    id: 'notifications',
-    label: 'Notifications',
-    icon: <Bell className="h-4 w-4" />,
-  },
-  { id: 'security', label: 'Security', icon: <Shield className="h-4 w-4" /> },
-  { id: 'billing', label: 'Billing', icon: <CreditCard className="h-4 w-4" /> },
-];
-
-export function SettingsExample() {
-  const [activeSection, setActiveSection] = React.useState('profile');
-  const [formData, setFormData] = React.useState({
-    firstName: 'John',
-    lastName: 'Doe',
-    email: 'john.doe@example.com',
-    username: 'johndoe',
-    bio: 'Software developer passionate about building great products.',
-    theme: 'system',
-    language: 'en',
-    emailNotifications: true,
-    pushNotifications: false,
-    marketingEmails: false,
-    twoFactor: false,
-  });
-
-  const updateField = (field: string, value: string | boolean) => {
-    setFormData((prev) => ({ ...prev, [field]: value }));
-  };
-
-  return (
-    <Column minH="screen" className="bg-background">
-      {/* Header */}
-      <header className="border-b">
-        <Row h={14} align="center" className="container mx-auto px-4">
-          <h1 className="text-lg font-semibold">Settings</h1>
-        </Row>
-      </header>
-
-      <Row gap={8} flex={1} className="container mx-auto p-6">
-        {/* Sidebar Navigation */}
-        <aside className="w-56 shrink-0">
-          <nav className="space-y-1">
-            {navItems.map((item) => (
-              <button
-                key={item.id}
-                onClick={() => setActiveSection(item.id)}
-                className={cn(
-                  'flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors',
-                  activeSection === item.id
-                    ? 'bg-muted font-medium'
-                    : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground'
-                )}
-              >
-                {item.icon}
-                {item.label}
-              </button>
-            ))}
-          </nav>
-        </aside>
-
-        {/* Main Content */}
-        <main className="flex-1 space-y-6">
-          {activeSection === 'profile' && (
-            <>
-              <div>
-                <h2 className="text-2xl font-bold">Profile</h2>
-                <p className="text-muted-foreground">Manage your public profile information.</p>
-              </div>
-
-              <Card>
-                <CardHeader>
-                  <CardTitle>Avatar</CardTitle>
-                  <CardDescription>
-                    Click on the avatar to upload a custom one from your files.
-                  </CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <Row gap={4} align="center">
-                    <Avatar className="h-20 w-20">
-                      <AvatarImage src="" />
-                      <AvatarFallback className="text-lg">JD</AvatarFallback>
-                    </Avatar>
-                    <Row gap={2}>
-                      <Button variant="outline" size="sm">
-                        Upload
-                      </Button>
-                      <Button variant="ghost" size="sm">
-                        Remove
-                      </Button>
-                    </Row>
-                  </Row>
-                </CardContent>
-              </Card>
-
-              <Card>
-                <CardHeader>
-                  <CardTitle>Personal Information</CardTitle>
-                  <CardDescription>Update your personal details here.</CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <Grid gap={4} cols={2} className="md:grid-cols-2">
-                    <Column gap={2}>
-                      <Label htmlFor="firstName">First name</Label>
-                      <Input
-                        id="firstName"
-                        value={formData.firstName}
-                        onChange={(e) => updateField('firstName', e.target.value)}
-                      />
-                    </Column>
-                    <Column gap={2}>
-                      <Label htmlFor="lastName">Last name</Label>
-                      <Input
-                        id="lastName"
-                        value={formData.lastName}
-                        onChange={(e) => updateField('lastName', e.target.value)}
-                      />
-                    </Column>
-                  </Grid>
-                  <Column gap={2}>
-                    <Label htmlFor="username">Username</Label>
-                    <Input
-                      id="username"
-                      value={formData.username}
-                      onChange={(e) => updateField('username', e.target.value)}
-                    />
-                  </Column>
-                  <Column gap={2}>
-                    <Label htmlFor="bio">Bio</Label>
-                    <Textarea
-                      id="bio"
-                      value={formData.bio}
-                      onChange={(e) => updateField('bio', e.target.value)}
-                      rows={3}
-                    />
-                    <p className="text-xs text-muted-foreground">
-                      Brief description for your profile. URLs are hyperlinked.
-                    </p>
-                  </Column>
-                </CardContent>
-                <CardFooter className="border-t px-6 py-4">
-                  <Button>Save changes</Button>
-                </CardFooter>
-              </Card>
-            </>
-          )}
-
-          {activeSection === 'account' && (
-            <>
-              <div>
-                <h2 className="text-2xl font-bold">Account</h2>
-                <p className="text-muted-foreground">
-                  Manage your account settings and email preferences.
-                </p>
-              </div>
-
-              <Card>
-                <CardHeader>
-                  <CardTitle>Email</CardTitle>
-                  <CardDescription>
-                    Your email address is used for login and notifications.
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <div className="space-y-2">
-                    <Label htmlFor="email">Email address</Label>
-                    <Input
-                      id="email"
-                      type="email"
-                      value={formData.email}
-                      onChange={(e) => updateField('email', e.target.value)}
-                    />
-                  </div>
-                </CardContent>
-                <CardFooter className="border-t px-6 py-4">
-                  <Button>Update email</Button>
-                </CardFooter>
-              </Card>
-
-              <Card className="border-destructive">
-                <CardHeader>
-                  <CardTitle className="text-destructive">Danger Zone</CardTitle>
-                  <CardDescription>Irreversible and destructive actions.</CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <Row justify="between" align="center">
-                    <Column gap={0}>
-                      <p className="font-medium">Delete account</p>
-                      <p className="text-sm text-muted-foreground">
-                        Permanently delete your account and all associated data.
-                      </p>
-                    </Column>
-                    <Button variant="destructive">Delete account</Button>
-                  </Row>
-                </CardContent>
-              </Card>
-            </>
-          )}
-
-          {activeSection === 'appearance' && (
-            <>
-              <div>
-                <h2 className="text-2xl font-bold">Appearance</h2>
-                <p className="text-muted-foreground">
-                  Customize the appearance of the application.
-                </p>
-              </div>
-
-              <Card>
-                <CardHeader>
-                  <CardTitle>Theme</CardTitle>
-                  <CardDescription>Select your preferred theme for the dashboard.</CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <div className="space-y-2">
-                    <Label htmlFor="theme">Theme</Label>
-                    <Select
-                      value={formData.theme}
-                      onValueChange={(value) => updateField('theme', value)}
-                    >
-                      <SelectTrigger id="theme" className="w-[200px]">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="light">Light</SelectItem>
-                        <SelectItem value="dark">Dark</SelectItem>
-                        <SelectItem value="system">System</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                  <div className="space-y-2">
-                    <Label htmlFor="language">Language</Label>
-                    <Select
-                      value={formData.language}
-                      onValueChange={(value) => updateField('language', value)}
-                    >
-                      <SelectTrigger id="language" className="w-[200px]">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="en">English</SelectItem>
-                        <SelectItem value="es">Spanish</SelectItem>
-                        <SelectItem value="fr">French</SelectItem>
-                        <SelectItem value="de">German</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                </CardContent>
-              </Card>
-            </>
-          )}
-
-          {activeSection === 'notifications' && (
-            <>
-              <div>
-                <h2 className="text-2xl font-bold">Notifications</h2>
-                <p className="text-muted-foreground">Configure how you receive notifications.</p>
-              </div>
-
-              <Card>
-                <CardHeader>
-                  <CardTitle>Notification Preferences</CardTitle>
-                  <CardDescription>Choose what notifications you want to receive.</CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-6">
-                  <Row justify="between" align="center">
-                    <Column gap={0.5}>
-                      <Label>Email notifications</Label>
-                      <p className="text-sm text-muted-foreground">
-                        Receive notifications via email.
-                      </p>
-                    </Column>
-                    <Switch
-                      checked={formData.emailNotifications}
-                      onCheckedChange={(checked) => updateField('emailNotifications', checked)}
-                    />
-                  </Row>
-                  <Separator />
-                  <Row justify="between" align="center">
-                    <Column gap={0.5}>
-                      <Label>Push notifications</Label>
-                      <p className="text-sm text-muted-foreground">
-                        Receive push notifications on your device.
-                      </p>
-                    </Column>
-                    <Switch
-                      checked={formData.pushNotifications}
-                      onCheckedChange={(checked) => updateField('pushNotifications', checked)}
-                    />
-                  </Row>
-                  <Separator />
-                  <Row justify="between" align="center">
-                    <Column gap={0.5}>
-                      <Label>Marketing emails</Label>
-                      <p className="text-sm text-muted-foreground">
-                        Receive emails about new features and updates.
-                      </p>
-                    </Column>
-                    <Switch
-                      checked={formData.marketingEmails}
-                      onCheckedChange={(checked) => updateField('marketingEmails', checked)}
-                    />
-                  </Row>
-                </CardContent>
-              </Card>
-            </>
-          )}
-
-          {activeSection === 'security' && (
-            <>
-              <div>
-                <h2 className="text-2xl font-bold">Security</h2>
-                <p className="text-muted-foreground">Manage your security preferences.</p>
-              </div>
-
-              <Card>
-                <CardHeader>
-                  <CardTitle>Password</CardTitle>
-                  <CardDescription>Change your password here.</CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <div className="space-y-2">
-                    <Label htmlFor="currentPassword">Current password</Label>
-                    <Input id="currentPassword" type="password" />
-                  </div>
-                  <div className="space-y-2">
-                    <Label htmlFor="newPassword">New password</Label>
-                    <Input id="newPassword" type="password" />
-                  </div>
-                  <div className="space-y-2">
-                    <Label htmlFor="confirmPassword">Confirm password</Label>
-                    <Input id="confirmPassword" type="password" />
-                  </div>
-                </CardContent>
-                <CardFooter className="border-t px-6 py-4">
-                  <Button>Update password</Button>
-                </CardFooter>
-              </Card>
-
-              <Card>
-                <CardHeader>
-                  <CardTitle>Two-Factor Authentication</CardTitle>
-                  <CardDescription>Add an extra layer of security to your account.</CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <Row justify="between" align="center">
-                    <Column gap={0.5}>
-                      <p className="font-medium">Enable 2FA</p>
-                      <p className="text-sm text-muted-foreground">
-                        Secure your account with two-factor authentication.
-                      </p>
-                    </Column>
-                    <Switch
-                      checked={formData.twoFactor}
-                      onCheckedChange={(checked) => updateField('twoFactor', checked)}
-                    />
-                  </Row>
-                </CardContent>
-              </Card>
-            </>
-          )}
-
-          {activeSection === 'billing' && (
-            <>
-              <div>
-                <h2 className="text-2xl font-bold">Billing</h2>
-                <p className="text-muted-foreground">
-                  Manage your billing information and subscription.
-                </p>
-              </div>
-
-              <Card>
-                <CardHeader>
-                  <CardTitle>Current Plan</CardTitle>
-                  <CardDescription>You are currently on the Pro plan.</CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <Row justify="between" align="center" className="rounded-lg border p-4">
-                    <Column gap={0}>
-                      <p className="font-semibold">Pro Plan</p>
-                      <p className="text-sm text-muted-foreground">
-                        $29/month • Renews on Jan 1, 2025
-                      </p>
-                    </Column>
-                    <Button variant="outline">Manage subscription</Button>
-                  </Row>
-                </CardContent>
-              </Card>
-
-              <Card>
-                <CardHeader>
-                  <CardTitle>Payment Method</CardTitle>
-                  <CardDescription>Update your payment information.</CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <Row justify="between" align="center" className="rounded-lg border p-4">
-                    <Row gap={3} align="center">
-                      <Row justify="center" align="center" className="h-10 w-14 rounded bg-muted">
-                        <CreditCard className="h-5 w-5" />
-                      </Row>
-                      <Column gap={0}>
-                        <p className="font-medium">•••• •••• •••• 4242</p>
-                        <p className="text-sm text-muted-foreground">Expires 12/25</p>
-                      </Column>
-                    </Row>
-                    <Button variant="ghost" size="sm">
-                      Edit
-                    </Button>
-                  </Row>
-                </CardContent>
-                <CardFooter className="border-t px-6 py-4">
-                  <Button variant="outline">Add payment method</Button>
-                </CardFooter>
-              </Card>
-            </>
-          )}
-        </main>
-      </Row>
-    </Column>
-  );
-}
diff --git a/packages/apollo-wind/src/examples/vscode-example.stories.tsx b/packages/apollo-wind/src/examples/vscode-example.stories.tsx
deleted file mode 100644
index d308255ad..000000000
--- a/packages/apollo-wind/src/examples/vscode-example.stories.tsx
+++ /dev/null
@@ -1,295 +0,0 @@
-import * as React from 'react';
-
-import { Blocks, Bug, FileCode, FileJson, Files, GitBranch, Search, Settings } from 'lucide-react';
-
-import { Column, Row } from '@/components/ui/layout';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import {
-  Shell,
-  ShellActivityBar,
-  ShellActivityBarItem,
-  ShellContent,
-  ShellFileTree,
-  ShellMain,
-  ShellPane,
-  ShellPanel,
-  ShellSidebar,
-  ShellSidebarHeader,
-  ShellStatusBar,
-  ShellTabBar,
-  ShellTitleBar,
-} from './vscode-example';
-
-const meta = {
-  title: 'Examples/VSCode',
-  component: Shell,
-} satisfies Meta<typeof Shell>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const sampleFiles = [
-  {
-    name: 'src',
-    type: 'folder' as const,
-    children: [
-      {
-        name: 'components',
-        type: 'folder' as const,
-        children: [
-          {
-            name: 'Button.tsx',
-            type: 'file' as const,
-            icon: <FileCode className="h-4 w-4 text-blue-500" />,
-          },
-          {
-            name: 'Input.tsx',
-            type: 'file' as const,
-            icon: <FileCode className="h-4 w-4 text-blue-500" />,
-          },
-          {
-            name: 'Shell.tsx',
-            type: 'file' as const,
-            icon: <FileCode className="h-4 w-4 text-blue-500" />,
-          },
-        ],
-      },
-      {
-        name: 'hooks',
-        type: 'folder' as const,
-        children: [
-          {
-            name: 'useAuth.ts',
-            type: 'file' as const,
-            icon: <FileCode className="h-4 w-4 text-blue-500" />,
-          },
-          {
-            name: 'useTheme.ts',
-            type: 'file' as const,
-            icon: <FileCode className="h-4 w-4 text-blue-500" />,
-          },
-        ],
-      },
-      {
-        name: 'App.tsx',
-        type: 'file' as const,
-        icon: <FileCode className="h-4 w-4 text-blue-500" />,
-      },
-      {
-        name: 'index.tsx',
-        type: 'file' as const,
-        icon: <FileCode className="h-4 w-4 text-blue-500" />,
-      },
-    ],
-  },
-  {
-    name: 'package.json',
-    type: 'file' as const,
-    icon: <FileJson className="h-4 w-4 text-yellow-500" />,
-  },
-  {
-    name: 'tsconfig.json',
-    type: 'file' as const,
-    icon: <FileJson className="h-4 w-4 text-yellow-500" />,
-  },
-  { name: 'README.md', type: 'file' as const },
-];
-
-function VSCodeShellDemo() {
-  const [activeView, setActiveView] = React.useState('files');
-  const [selectedFile, setSelectedFile] = React.useState('Shell.tsx');
-  const [tabs, setTabs] = React.useState([
-    {
-      id: 'shell',
-      title: 'Shell.tsx',
-      icon: <FileCode className="h-4 w-4 text-blue-500" />,
-    },
-    {
-      id: 'button',
-      title: 'Button.tsx',
-      icon: <FileCode className="h-4 w-4 text-blue-500" />,
-    },
-  ]);
-  const [activeTab, setActiveTab] = React.useState('shell');
-  const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false);
-
-  const handleCloseTab = (id: string) => {
-    setTabs(tabs.filter((t) => t.id !== id));
-    if (activeTab === id && tabs.length > 1) {
-      setActiveTab(tabs[0].id === id ? tabs[1].id : tabs[0].id);
-    }
-  };
-
-  return (
-    <Shell className="h-[700px]">
-      <ShellTitleBar title="project — Visual Studio Code" />
-      <ShellContent>
-        <ShellActivityBar>
-          <ShellActivityBarItem
-            icon={<Files className="h-5 w-5" />}
-            active={activeView === 'files'}
-            onClick={() => {
-              setActiveView('files');
-              setSidebarCollapsed(false);
-            }}
-            tooltip="Explorer"
-          />
-          <ShellActivityBarItem
-            icon={<Search className="h-5 w-5" />}
-            active={activeView === 'search'}
-            onClick={() => {
-              setActiveView('search');
-              setSidebarCollapsed(false);
-            }}
-            tooltip="Search"
-          />
-          <ShellActivityBarItem
-            icon={<GitBranch className="h-5 w-5" />}
-            active={activeView === 'git'}
-            onClick={() => {
-              setActiveView('git');
-              setSidebarCollapsed(false);
-            }}
-            tooltip="Source Control"
-          />
-          <ShellActivityBarItem
-            icon={<Bug className="h-5 w-5" />}
-            active={activeView === 'debug'}
-            onClick={() => {
-              setActiveView('debug');
-              setSidebarCollapsed(false);
-            }}
-            tooltip="Run and Debug"
-          />
-          <ShellActivityBarItem
-            icon={<Blocks className="h-5 w-5" />}
-            active={activeView === 'extensions'}
-            onClick={() => {
-              setActiveView('extensions');
-              setSidebarCollapsed(false);
-            }}
-            tooltip="Extensions"
-          />
-          <Column flex={1} />
-          <ShellActivityBarItem
-            icon={<Settings className="h-5 w-5" />}
-            onClick={() => undefined}
-            tooltip="Settings"
-          />
-        </ShellActivityBar>
-
-        <ShellSidebar collapsed={sidebarCollapsed} width={260}>
-          <ShellSidebarHeader
-            title="Explorer"
-            collapsed={sidebarCollapsed}
-            onCollapsedChange={setSidebarCollapsed}
-          />
-          <ShellFileTree
-            items={sampleFiles}
-            selectedFile={selectedFile}
-            onSelectFile={setSelectedFile}
-          />
-        </ShellSidebar>
-
-        <ShellMain>
-          <ShellTabBar
-            tabs={tabs}
-            activeTab={activeTab}
-            onTabChange={setActiveTab}
-            onTabClose={handleCloseTab}
-          />
-          <ShellPane>
-            <pre className="text-sm">
-              <code>{`import * as React from "react";
-import { cn } from "@/lib";
-
-interface ShellProps {
-  children: React.ReactNode;
-  className?: string;
-}
-
-export function Shell({ children, className }: ShellProps) {
-  return (
-    <div className={cn(
-      "flex h-full flex-col",
-      className
-    )}>
-      {children}
-    </div>
-  );
-}`}</code>
-            </pre>
-          </ShellPane>
-          <ShellPanel title="Terminal" height={150}>
-            <div className="text-muted-foreground">
-              <div>$ npm run dev</div>
-              <div className="text-green-500">ready - started server on 0.0.0.0:3000</div>
-              <div>$ _</div>
-            </div>
-          </ShellPanel>
-        </ShellMain>
-      </ShellContent>
-      <ShellStatusBar>
-        <Row gap={3} align="center">
-          <span>main</span>
-          <span>TypeScript</span>
-        </Row>
-        <Row gap={3} align="center">
-          <span>Ln 1, Col 1</span>
-          <span>UTF-8</span>
-        </Row>
-      </ShellStatusBar>
-    </Shell>
-  );
-}
-
-export const Default = {
-  // @ts-expect-error - args not needed when using render, but Storybook requires it
-  args: {},
-  render: () => <VSCodeShellDemo />,
-} satisfies Story;
-
-export const MinimalShell = {
-  // @ts-expect-error - args not needed when using render, but Storybook requires it
-  args: {},
-  render: () => (
-    <Shell className="h-[400px]">
-      <ShellTitleBar title="My App" />
-      <ShellContent>
-        <ShellMain>
-          <ShellPane>
-            <div className="text-center text-muted-foreground">
-              <h2 className="text-lg font-semibold">Welcome</h2>
-              <p>This is a minimal shell layout.</p>
-            </div>
-          </ShellPane>
-        </ShellMain>
-      </ShellContent>
-      <ShellStatusBar>
-        <span>Ready</span>
-      </ShellStatusBar>
-    </Shell>
-  ),
-} satisfies Story;
-
-export const WithSidebarOnly = {
-  // @ts-expect-error - args not needed when using render, but Storybook requires it
-  args: {},
-  render: () => (
-    <Shell className="h-[500px]">
-      <ShellTitleBar title="File Browser" />
-      <ShellContent>
-        <ShellSidebar width={280}>
-          <ShellSidebarHeader title="Files" />
-          <ShellFileTree items={sampleFiles} />
-        </ShellSidebar>
-        <ShellMain>
-          <ShellPane>
-            <p className="text-muted-foreground">Select a file to view its contents.</p>
-          </ShellPane>
-        </ShellMain>
-      </ShellContent>
-    </Shell>
-  ),
-} satisfies Story;
diff --git a/packages/apollo-wind/src/examples/vscode-example.tsx b/packages/apollo-wind/src/examples/vscode-example.tsx
deleted file mode 100644
index 43c743bd0..000000000
--- a/packages/apollo-wind/src/examples/vscode-example.tsx
+++ /dev/null
@@ -1,418 +0,0 @@
-import * as React from 'react';
-import { cn } from '@/lib';
-import {
-  ChevronDown,
-  ChevronRight,
-  File,
-  Folder,
-  FolderOpen,
-  X,
-  PanelLeftClose,
-} from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { Row, Column } from '@/components/ui/layout';
-
-// Shell container
-interface ShellProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-}
-
-export function Shell({ className, children, ...props }: ShellProps) {
-  return (
-    <Column
-      overflow="hidden"
-      className={cn('h-[600px] w-full rounded-lg border bg-background', className)}
-      {...props}
-    >
-      {children}
-    </Column>
-  );
-}
-
-// Title bar
-interface ShellTitleBarProps extends React.HTMLAttributes<HTMLDivElement> {
-  title?: string;
-}
-
-export function ShellTitleBar({ className, title, children, ...props }: ShellTitleBarProps) {
-  return (
-    <Row
-      h={9}
-      justify="between"
-      align="center"
-      className={cn('border-b bg-muted/50 px-3', className)}
-      {...props}
-    >
-      <Row gap={2} align="center">
-        <Row gap={1.5}>
-          <div className="h-3 w-3 rounded-full bg-red-500" />
-          <div className="h-3 w-3 rounded-full bg-yellow-500" />
-          <div className="h-3 w-3 rounded-full bg-green-500" />
-        </Row>
-        {title && <span className="ml-3 text-xs text-muted-foreground">{title}</span>}
-      </Row>
-      {children}
-    </Row>
-  );
-}
-
-// Main content area with sidebar
-interface ShellContentProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-}
-
-export function ShellContent({ className, children, ...props }: ShellContentProps) {
-  return (
-    <Row flex={1} overflow="hidden" className={className} {...props}>
-      {children}
-    </Row>
-  );
-}
-
-// Sidebar
-interface ShellSidebarProps extends React.HTMLAttributes<HTMLDivElement> {
-  collapsed?: boolean;
-  onCollapsedChange?: (collapsed: boolean) => void;
-  width?: number;
-}
-
-export function ShellSidebar({
-  className,
-  children,
-  collapsed = false,
-  onCollapsedChange,
-  width = 240,
-  ...props
-}: ShellSidebarProps) {
-  return (
-    <Column
-      className={cn(
-        'border-r bg-muted/30 transition-all duration-200',
-        collapsed ? 'w-0 overflow-hidden' : '',
-        className
-      )}
-      style={{ width: collapsed ? 0 : width }}
-      {...props}
-    >
-      {children}
-    </Column>
-  );
-}
-
-// Sidebar header
-interface ShellSidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
-  title: string;
-  collapsed?: boolean;
-  onCollapsedChange?: (collapsed: boolean) => void;
-}
-
-export function ShellSidebarHeader({
-  className,
-  title,
-  collapsed,
-  onCollapsedChange,
-  ...props
-}: ShellSidebarHeaderProps) {
-  return (
-    <Row
-      h={8}
-      justify="between"
-      align="center"
-      className={cn('px-3 text-xs font-medium uppercase text-muted-foreground', className)}
-      {...props}
-    >
-      <span>{title}</span>
-      {onCollapsedChange && (
-        <Button
-          variant="ghost"
-          size="icon"
-          className="h-5 w-5"
-          onClick={() => onCollapsedChange(!collapsed)}
-        >
-          <PanelLeftClose className="h-3.5 w-3.5" />
-        </Button>
-      )}
-    </Row>
-  );
-}
-
-// File tree
-interface FileTreeItem {
-  name: string;
-  type: 'file' | 'folder';
-  children?: FileTreeItem[];
-  icon?: React.ReactNode;
-}
-
-interface ShellFileTreeProps {
-  items: FileTreeItem[];
-  selectedFile?: string;
-  onSelectFile?: (name: string) => void;
-}
-
-export function ShellFileTree({ items, selectedFile, onSelectFile }: ShellFileTreeProps) {
-  return (
-    <ScrollArea className="flex-1">
-      <div className="p-2">
-        {items.map((item) => (
-          <FileTreeNode
-            key={item.name}
-            item={item}
-            depth={0}
-            selectedFile={selectedFile}
-            onSelectFile={onSelectFile}
-          />
-        ))}
-      </div>
-    </ScrollArea>
-  );
-}
-
-function FileTreeNode({
-  item,
-  depth,
-  selectedFile,
-  onSelectFile,
-}: {
-  item: FileTreeItem;
-  depth: number;
-  selectedFile?: string;
-  onSelectFile?: (name: string) => void;
-}) {
-  const [expanded, setExpanded] = React.useState(true);
-  const isFolder = item.type === 'folder';
-  const isSelected = selectedFile === item.name;
-
-  return (
-    <div>
-      <Row
-        gap={1}
-        align="center"
-        className={cn(
-          'cursor-pointer rounded px-2 py-0.5 text-sm hover:bg-muted',
-          isSelected && 'bg-primary/10 text-primary'
-        )}
-        style={{ paddingLeft: depth * 12 + 8 }}
-        onClick={() => {
-          if (isFolder) {
-            setExpanded(!expanded);
-          } else {
-            onSelectFile?.(item.name);
-          }
-        }}
-      >
-        {isFolder ? (
-          <>
-            {expanded ? (
-              <ChevronDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-            ) : (
-              <ChevronRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-            )}
-            {expanded ? (
-              <FolderOpen className="h-4 w-4 shrink-0 text-yellow-600" />
-            ) : (
-              <Folder className="h-4 w-4 shrink-0 text-yellow-600" />
-            )}
-          </>
-        ) : (
-          <>
-            <span className="w-3.5" />
-            {item.icon || <File className="h-4 w-4 shrink-0 text-muted-foreground" />}
-          </>
-        )}
-        <span className="truncate">{item.name}</span>
-      </Row>
-      {isFolder && expanded && item.children && (
-        <div>
-          {item.children.map((child) => (
-            <FileTreeNode
-              key={child.name}
-              item={child}
-              depth={depth + 1}
-              selectedFile={selectedFile}
-              onSelectFile={onSelectFile}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-// Main panel area
-interface ShellMainProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-}
-
-export function ShellMain({ className, children, ...props }: ShellMainProps) {
-  return (
-    <Column flex={1} overflow="hidden" className={className} {...props}>
-      {children}
-    </Column>
-  );
-}
-
-// Tab bar
-interface ShellTab {
-  id: string;
-  title: string;
-  icon?: React.ReactNode;
-}
-
-interface ShellTabBarProps {
-  tabs: ShellTab[];
-  activeTab?: string;
-  onTabChange?: (id: string) => void;
-  onTabClose?: (id: string) => void;
-}
-
-export function ShellTabBar({ tabs, activeTab, onTabChange, onTabClose }: ShellTabBarProps) {
-  return (
-    <Row h={9} align="center" className="border-b bg-muted/30">
-      {tabs.map((tab) => (
-        <Row
-          key={tab.id}
-          gap={2}
-          align="center"
-          className={cn(
-            'group h-full cursor-pointer border-r px-3 text-sm',
-            activeTab === tab.id
-              ? 'bg-background text-foreground'
-              : 'text-muted-foreground hover:bg-muted/50'
-          )}
-          onClick={() => onTabChange?.(tab.id)}
-        >
-          {tab.icon}
-          <span className="max-w-[120px] truncate">{tab.title}</span>
-          {onTabClose && (
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-4 w-4 opacity-0 group-hover:opacity-100"
-              onClick={(e) => {
-                e.stopPropagation();
-                onTabClose(tab.id);
-              }}
-            >
-              <X className="h-3 w-3" />
-            </Button>
-          )}
-        </Row>
-      ))}
-    </Row>
-  );
-}
-
-// Editor/content pane
-interface ShellPaneProps {
-  children: React.ReactNode;
-  className?: string;
-}
-
-export function ShellPane({ className, children }: ShellPaneProps) {
-  return (
-    <ScrollArea className={cn('flex-1', className)}>
-      <div className="p-4">{children}</div>
-    </ScrollArea>
-  );
-}
-
-// Status bar
-interface ShellStatusBarProps extends React.HTMLAttributes<HTMLDivElement> {
-  children?: React.ReactNode;
-}
-
-export function ShellStatusBar({ className, children, ...props }: ShellStatusBarProps) {
-  return (
-    <Row
-      h={6}
-      justify="between"
-      align="center"
-      className={cn('border-t bg-primary px-2 text-xs text-primary-foreground', className)}
-      {...props}
-    >
-      {children}
-    </Row>
-  );
-}
-
-// Activity bar (left icon strip)
-interface ShellActivityBarProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-}
-
-export function ShellActivityBar({ className, children, ...props }: ShellActivityBarProps) {
-  return (
-    <Column
-      w={12}
-      gap={2}
-      align="center"
-      className={cn('border-r bg-muted/50 py-2', className)}
-      {...props}
-    >
-      {children}
-    </Column>
-  );
-}
-
-interface ShellActivityBarItemProps {
-  icon: React.ReactNode;
-  active?: boolean;
-  onClick?: () => void;
-  tooltip?: string;
-}
-
-export function ShellActivityBarItem({
-  icon,
-  active,
-  onClick,
-  tooltip,
-}: ShellActivityBarItemProps) {
-  return (
-    <Button
-      variant="ghost"
-      size="icon"
-      className={cn(
-        'h-10 w-10 rounded-none border-l-2 border-transparent',
-        active && 'border-primary bg-muted'
-      )}
-      onClick={onClick}
-      title={tooltip}
-    >
-      {icon}
-    </Button>
-  );
-}
-
-// Panel (bottom panel like terminal)
-interface ShellPanelProps extends React.HTMLAttributes<HTMLDivElement> {
-  title?: string;
-  height?: number;
-  children: React.ReactNode;
-}
-
-export function ShellPanel({
-  className,
-  title,
-  height = 200,
-  children,
-  ...props
-}: ShellPanelProps) {
-  return (
-    <div className={cn('border-t', className)} style={{ height }} {...props}>
-      {title && (
-        <Row
-          h={8}
-          align="center"
-          className="border-b bg-muted/30 px-3 text-xs font-medium uppercase text-muted-foreground"
-        >
-          {title}
-        </Row>
-      )}
-      <ScrollArea className="h-full">
-        <div className="p-2 font-mono text-sm">{children}</div>
-      </ScrollArea>
-    </div>
-  );
-}
diff --git a/packages/apollo-wind/src/foundation/Future/colors.stories.tsx b/packages/apollo-wind/src/foundation/Future/colors.stories.tsx
new file mode 100644
index 000000000..41b5b3ed6
--- /dev/null
+++ b/packages/apollo-wind/src/foundation/Future/colors.stories.tsx
@@ -0,0 +1,171 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { cn } from '@/lib';
+import { accent, border, foreground, gradient, ring, surface } from './colors';
+import { fontFamily } from './typography';
+
+// ============================================================================
+// Meta
+// ============================================================================
+
+const meta = {
+  title: 'Theme/Future/Colors',
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <h2
+      className="mb-6 text-2xl font-bold tracking-tight text-future-foreground"
+      style={{ fontFamily: fontFamily.base }}
+    >
+      {children}
+    </h2>
+  );
+}
+
+function Divider() {
+  return <div className="my-10 h-px bg-future-border-subtle" />;
+}
+
+function TokenRow({
+  label,
+  className,
+  children,
+}: {
+  label: string;
+  className: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex items-center gap-6 border-b border-future-border-subtle py-3">
+      <code className="w-56 shrink-0 text-sm font-medium text-future-accent-foreground-muted">
+        {label}
+      </code>
+      <span className="w-52 shrink-0 text-xs text-future-foreground-subtle">{className}</span>
+      {children}
+    </div>
+  );
+}
+
+// ============================================================================
+// Story
+// ============================================================================
+
+export const Default: Story = {
+  render: (_, { globals }) => (
+    <div
+      className={cn(
+        globals.futureTheme === 'light' ? 'future-light' : 'future-dark',
+        'min-h-screen w-full bg-future-surface'
+      )}
+      style={{ fontFamily: fontFamily.base }}
+    >
+      <div className="mx-auto max-w-4xl space-y-2 p-8">
+        {/* ------------------------------------------------------------------ */}
+        {/* Surface */}
+        {/* ------------------------------------------------------------------ */}
+        <SectionTitle>Surface (backgrounds)</SectionTitle>
+
+        <div className="flex flex-col gap-4">
+          {Object.entries(surface).map(([key, twClass]) => (
+            <TokenRow key={key} label={`surface.${key}`} className={twClass}>
+              <div className={cn('h-10 w-24 rounded-lg border border-future-border', twClass)} />
+            </TokenRow>
+          ))}
+        </div>
+
+        <Divider />
+
+        {/* ------------------------------------------------------------------ */}
+        {/* Accent */}
+        {/* ------------------------------------------------------------------ */}
+        <SectionTitle>Accent</SectionTitle>
+
+        <div className="flex flex-col gap-4">
+          {Object.entries(accent).map(([key, twClass]) => (
+            <TokenRow key={key} label={`accent.${key}`} className={twClass}>
+              <div className={cn('h-10 w-24 rounded-lg border border-future-border', twClass)} />
+            </TokenRow>
+          ))}
+        </div>
+
+        <Divider />
+
+        {/* ------------------------------------------------------------------ */}
+        {/* Foreground */}
+        {/* ------------------------------------------------------------------ */}
+        <SectionTitle>Foreground (text / icons)</SectionTitle>
+
+        <div className="flex flex-col gap-4">
+          {Object.entries(foreground).map(([key, twClass]) => {
+            // Convert bg class pattern to text class for preview
+            const textClass = twClass;
+            return (
+              <TokenRow key={key} label={`foreground.${key}`} className={twClass}>
+                <span className={cn('text-sm font-medium', textClass)}>Sample text</span>
+              </TokenRow>
+            );
+          })}
+        </div>
+
+        <Divider />
+
+        {/* ------------------------------------------------------------------ */}
+        {/* Border */}
+        {/* ------------------------------------------------------------------ */}
+        <SectionTitle>Border</SectionTitle>
+
+        <div className="flex flex-col gap-4">
+          {Object.entries(border).map(([key, twClass]) => (
+            <TokenRow key={key} label={`border.${key}`} className={twClass}>
+              <div
+                className={cn('h-10 w-24 rounded-lg bg-future-surface-raised border-2', twClass)}
+              />
+            </TokenRow>
+          ))}
+        </div>
+
+        <Divider />
+
+        {/* ------------------------------------------------------------------ */}
+        {/* Ring */}
+        {/* ------------------------------------------------------------------ */}
+        <SectionTitle>Ring (selection / focus)</SectionTitle>
+
+        <div className="flex flex-col gap-4">
+          {Object.entries(ring).map(([key, twClass]) => (
+            <TokenRow key={key} label={`ring.${key}`} className={twClass}>
+              <div
+                className={cn('h-10 w-24 rounded-lg bg-future-surface-raised ring-2', twClass)}
+              />
+            </TokenRow>
+          ))}
+        </div>
+
+        <Divider />
+
+        {/* ------------------------------------------------------------------ */}
+        {/* Gradient */}
+        {/* ------------------------------------------------------------------ */}
+        <SectionTitle>Gradient</SectionTitle>
+
+        <div className="flex flex-col gap-4">
+          {Object.entries(gradient).map(([key, twClass]) => (
+            <TokenRow key={key} label={`gradient.${key}`} className={twClass}>
+              <div className={cn('h-10 w-40 rounded-lg border border-future-border', twClass)} />
+            </TokenRow>
+          ))}
+        </div>
+      </div>
+    </div>
+  ),
+};
diff --git a/packages/apollo-wind/src/foundation/Future/colors.ts b/packages/apollo-wind/src/foundation/Future/colors.ts
new file mode 100644
index 000000000..b58566bfc
--- /dev/null
+++ b/packages/apollo-wind/src/foundation/Future/colors.ts
@@ -0,0 +1,162 @@
+/**
+ * Apollo Future — Color Tokens
+ *
+ * Single source of truth for all colors in the Future design language.
+ * Includes values actively used in both Delegate and Flow templates.
+ *
+ * Colors are now theme-aware via CSS custom properties defined in
+ * `future-theme.css`. Apply `.future-dark` or `.future-light` to a
+ * parent element to activate a theme.
+ *
+ * The semantic Tailwind classes (e.g. `bg-future-surface`) resolve to
+ * different hex values depending on the active theme.
+ */
+
+// =============================================================================
+// Surface (backgrounds)
+// =============================================================================
+
+/**
+ * Surface color tokens — semantic, theme-aware.
+ *
+ * | Token           | Semantic class              | Dark value (zinc) | Light value (zinc) | Usage                                    |
+ * |-----------------|-----------------------------|-------------------|--------------------|------------------------------------------|
+ * | surface         | bg-future-surface           | 950  #09090b      | white  #ffffff     | Page, canvas, containers, viewport guard |
+ * | surfaceRaised   | bg-future-surface-raised    | 900  #18181b      | 50   #fafafa       | Cards, overlay content, panels           |
+ * | surfaceOverlay  | bg-future-surface-overlay   | 800  #27272a      | 100  #f4f4f5       | Panel, inputs, tabs, icon rail           |
+ * | surfaceHover    | bg-future-surface-hover     | 700  #3f3f46      | 200  #e4e4e7       | Step card icon, nav hover, selected      |
+ * | surfaceMuted    | bg-future-surface-muted     | 500  #71717a      | 400  #a1a1aa       | Badge, loop indicator                    |
+ * | surfaceInverse  | bg-future-surface-inverse   | white #ffffff     | 950  #09090b       | Primary buttons (inverse)                |
+ */
+export const surface = {
+  surface: 'bg-future-surface',
+  surfaceRaised: 'bg-future-surface-raised',
+  surfaceOverlay: 'bg-future-surface-overlay',
+  surfaceHover: 'bg-future-surface-hover',
+  surfaceMuted: 'bg-future-surface-muted',
+  surfaceInverse: 'bg-future-surface-inverse',
+} as const;
+
+// =============================================================================
+// Accent
+// =============================================================================
+
+/**
+ * Accent color tokens — semantic, theme-aware.
+ *
+ * | Token        | Semantic class              | Dark value (cyan) | Light value (cyan) | Usage                                    |
+ * |--------------|-----------------------------|-------------------|--------------------|------------------------------------------|
+ * | accent       | bg-future-accent            | 500  #06b6d4      | 500  #06b6d4       | Logo, submit button, run node            |
+ * | accentSubtle | bg-future-accent-subtle     | 950  #083344      | 50   #ecfeff       | Status badge, active nav, node/flow icon |
+ */
+export const accent = {
+  accent: 'bg-future-accent',
+  accentSubtle: 'bg-future-accent-subtle',
+} as const;
+
+// =============================================================================
+// Foreground (text / icons)
+// =============================================================================
+
+/**
+ * Foreground color tokens — semantic, theme-aware.
+ *
+ * | Token                  | Semantic class                        | Dark value        | Light value       | Usage                     |
+ * |------------------------|---------------------------------------|-------------------|-------------------|---------------------------|
+ * | foreground             | text-future-foreground                | zinc-50  #fafafa  | zinc-950 #09090b  | Primary headings          |
+ * | foregroundSecondary    | text-future-foreground-secondary      | zinc-100 #f4f4f5  | zinc-900 #18181b  | Body, messages            |
+ * | foregroundHover        | text-future-foreground-hover          | zinc-300 #d4d4d8  | zinc-600 #52525b  | Hover states              |
+ * | foregroundMuted        | text-future-foreground-muted          | zinc-400 #a1a1aa  | zinc-500 #71717a  | Nav, secondary UI, code   |
+ * | foregroundSubtle       | text-future-foreground-subtle         | zinc-500 #71717a  | zinc-400 #a1a1aa  | Muted, labels             |
+ * | foregroundInverse      | text-future-foreground-inverse        | zinc-950 #09090b  | white   #ffffff   | Icons on inverse bg       |
+ * | foregroundOnAccent     | text-future-foreground-on-accent      | white   #ffffff   | white   #ffffff   | On primary buttons        |
+ * | accentForeground       | text-future-accent-foreground         | cyan-500 #06b6d4  | cyan-600 #0891b2  | Flow/node icons           |
+ * | accentForegroundMuted  | text-future-accent-foreground-muted   | cyan-400 #22d3ee  | cyan-600 #0891b2  | Status text               |
+ */
+export const foreground = {
+  foreground: 'text-future-foreground',
+  foregroundSecondary: 'text-future-foreground-secondary',
+  foregroundHover: 'text-future-foreground-hover',
+  foregroundMuted: 'text-future-foreground-muted',
+  foregroundSubtle: 'text-future-foreground-subtle',
+  foregroundInverse: 'text-future-foreground-inverse',
+  foregroundOnAccent: 'text-future-foreground-on-accent',
+  accentForeground: 'text-future-accent-foreground',
+  accentForegroundMuted: 'text-future-accent-foreground-muted',
+} as const;
+
+// =============================================================================
+// Border
+// =============================================================================
+
+/**
+ * Border color tokens — semantic, theme-aware.
+ *
+ * | Token         | Semantic class               | Dark value        | Light value        | Usage              |
+ * |---------------|------------------------------|-------------------|--------------------|---------------------|
+ * | border        | border-future-border         | zinc-700 #3f3f46  | zinc-300 #d4d4d8   | Primary borders     |
+ * | borderSubtle  | border-future-border-subtle  | zinc-800 #27272a  | zinc-200 #e4e4e7   | Subtle dividers     |
+ * | borderMuted   | border-future-border-muted   | zinc-900 #18181b  | zinc-100 #f4f4f5   | Content borders     |
+ * | borderDeep    | border-future-border-deep    | zinc-950 #09090b  | zinc-50  #fafafa   | Nested containers   |
+ * | borderInverse | border-future-border-inverse | zinc-200 #e4e4e7  | zinc-700 #3f3f46   | Borders on inverse  |
+ * | borderHover   | border-future-border-hover   | zinc-600 #52525b  | zinc-400 #a1a1aa   | Border hover state  |
+ */
+export const border = {
+  border: 'border-future-border',
+  borderSubtle: 'border-future-border-subtle',
+  borderMuted: 'border-future-border-muted',
+  borderDeep: 'border-future-border-deep',
+  borderInverse: 'border-future-border-inverse',
+  borderHover: 'border-future-border-hover',
+} as const;
+
+// =============================================================================
+// Ring (selection / focus)
+// =============================================================================
+
+/**
+ * Ring color tokens for selection and focus states.
+ *
+ * | Token | Semantic class     | Dark value        | Light value       | Usage              |
+ * |-------|--------------------|-------------------|-------------------|--------------------|
+ * | ring  | ring-future-ring   | zinc-600 #52525b  | zinc-400 #a1a1aa  | Flow node selected |
+ */
+export const ring = {
+  ring: 'ring-future-ring',
+} as const;
+
+// =============================================================================
+// Gradient
+// =============================================================================
+
+/**
+ * Gradient tokens — theme-aware background gradients.
+ *
+ * Dark theme:
+ * | Token      | Utility class           | Angle  | From              | To                |
+ * |------------|-------------------------|--------|-------------------|-------------------|
+ * | gradient1  | bg-future-gradient-1    | 127deg | zinc-700 #3f3f47  | zinc-800 #27272a  |
+ * | gradient2  | bg-future-gradient-2    | 128deg | zinc-950 #09090b  | zinc-900 #18181b  |
+ * | gradient3  | bg-future-gradient-3    | 128deg | zinc-700 #3f3f47  | zinc-900 #18181b  |
+ * | gradient4  | bg-future-gradient-4    | 180deg | zinc-900 #18181b  | zinc-800 #27272a  |
+ * | gradient5  | bg-future-gradient-5    | 180deg | zinc-950 #09090b  | zinc-900 #18181b  |
+ * | gradient6  | bg-future-gradient-6    | 106deg | cyan-600 #0092b8  | cyan-950 #053345  |
+ *
+ * Light theme:
+ * | Token      | Utility class           | Angle  | From              | To                |
+ * |------------|-------------------------|--------|-------------------|-------------------|
+ * | gradient1  | bg-future-gradient-1    | 127deg | zinc-200 #e4e4e7  | zinc-100 #f4f4f5  |
+ * | gradient2  | bg-future-gradient-2    | 128deg | white   #ffffff   | zinc-50  #fafafa   |
+ * | gradient3  | bg-future-gradient-3    | 128deg | zinc-200 #e4e4e7  | zinc-50  #fafafa   |
+ * | gradient4  | bg-future-gradient-4    | 180deg | zinc-50  #fafafa   | zinc-100 #f4f4f5  |
+ * | gradient5  | bg-future-gradient-5    | 180deg | white   #ffffff   | zinc-50  #fafafa   |
+ * | gradient6  | bg-future-gradient-6    | 106deg | cyan-400 #22d3ee  | cyan-100 #cffafe  |
+ */
+export const gradient = {
+  gradient1: 'bg-future-gradient-1',
+  gradient2: 'bg-future-gradient-2',
+  gradient3: 'bg-future-gradient-3',
+  gradient4: 'bg-future-gradient-4',
+  gradient5: 'bg-future-gradient-5',
+  gradient6: 'bg-future-gradient-6',
+} as const;
diff --git a/packages/apollo-wind/src/foundation/Future/future-theme.css b/packages/apollo-wind/src/foundation/Future/future-theme.css
new file mode 100644
index 000000000..bc1cb2d57
--- /dev/null
+++ b/packages/apollo-wind/src/foundation/Future/future-theme.css
@@ -0,0 +1,288 @@
+/**
+ * Apollo Future — Theme Variables
+ *
+ * CSS custom properties for the Future design language.
+ * Defines dark and light theme values for backgrounds, text, borders, and rings.
+ *
+ * Apply `.future-dark` or `.future-light` to a parent element to activate a theme.
+ * Templates apply this class at their root automatically via the `theme` prop.
+ *
+ * Tailwind 4 generates utility classes from the @theme block below, e.g.:
+ *   bg-future-surface, text-future-foreground, border-future-border, etc.
+ */
+
+/* ============================================================================
+ * Dark theme (default for Future templates)
+ * ============================================================================ */
+
+.future-dark {
+  /* ── Surfaces ─────────────────────────────────────────────────────────── */
+  --color-future-surface: #09090b;
+  /* zinc-950  — page / canvas */
+  --color-future-surface-raised: #18181b;
+  /* zinc-900  — cards, overlays, panels */
+  --color-future-surface-overlay: #27272a;
+  /* zinc-800  — panels, inputs, tabs */
+  --color-future-surface-hover: #3f3f46;
+  /* zinc-700  — hover, selected nav */
+  --color-future-surface-muted: #71717a;
+  /* zinc-500  — badges, indicators */
+  --color-future-surface-inverse: #ffffff;
+  /* white     — buttons on dark bg */
+
+  /* ── Accent ───────────────────────────────────────────────────────────── */
+  --color-future-accent: #06b6d4;
+  /* cyan-500  — logo, submit, run */
+  --color-future-accent-subtle: #083344;
+  /* cyan-950  — status badge, active nav */
+
+  /* ── Foreground (text / icons) ────────────────────────────────────────── */
+  --color-future-foreground: #fafafa;
+  /* zinc-50   — primary headings */
+  --color-future-foreground-secondary: #f4f4f5;
+  /* zinc-100  — body, messages */
+  --color-future-foreground-hover: #d4d4d8;
+  /* zinc-300  — hover states */
+  --color-future-foreground-muted: #a1a1aa;
+  /* zinc-400  — nav, secondary UI */
+  --color-future-foreground-subtle: #71717a;
+  /* zinc-500  — labels, muted */
+  --color-future-foreground-inverse: #09090b;
+  /* zinc-950  — icons on light bg */
+  --color-future-foreground-on-accent: #ffffff;
+  /* white     — text on accent bg */
+  --color-future-accent-foreground: #06b6d4;
+  /* cyan-500  — accent text */
+  --color-future-accent-foreground-muted: #22d3ee;
+  /* cyan-400 — muted accent text */
+
+  /* ── Borders ──────────────────────────────────────────────────────────── */
+  --color-future-border: #3f3f46;
+  /* zinc-700  — primary borders */
+  --color-future-border-subtle: #27272a;
+  /* zinc-800  — subtle dividers */
+  --color-future-border-muted: #18181b;
+  /* zinc-900  — content borders */
+  --color-future-border-deep: #09090b;
+  /* zinc-950  — nested containers */
+  --color-future-border-inverse: #e4e4e7;
+  /* zinc-200  — borders on inverse bg */
+  --color-future-border-hover: #52525b;
+  /* zinc-600  — border hover state */
+
+  /* ── Ring ──────────────────────────────────────────────────────────────── */
+  --color-future-ring: #52525b;
+  /* zinc-600  — selection ring */
+
+  /* ── Gradients ───────────────────────────────────────────────────────── */
+  --gradient-future-1: linear-gradient(127deg, #3f3f47 25.94%, #27272a 74.06%);
+  /* zinc-700 → zinc-800 */
+  --gradient-future-2: linear-gradient(128deg, #09090b 1.26%, #18181b 52.69%);
+  /* zinc-950 → zinc-900 */
+  --gradient-future-3: linear-gradient(128deg, #3f3f47 1.26%, #18181b 52.69%);
+  /* zinc-700 → zinc-900 */
+  --gradient-future-4: linear-gradient(180deg, #18181b 0%, #27272a 100%);
+  /* zinc-900 → zinc-800 */
+  --gradient-future-5: linear-gradient(180deg, #09090b 0%, #18181b 100%);
+  /* zinc-950 → zinc-900 */
+  --gradient-future-6: linear-gradient(106deg, #0092b8 28.08%, #053345 71.92%);
+  /* cyan-600 → cyan-950 */
+
+  /* ── shadcn bridge — maps standard variables so shadcn components
+       (DataTable, Input, Button, etc.) inherit Future theme colors ────── */
+  --color-background: var(--color-future-surface);
+  --color-foreground: var(--color-future-foreground);
+  --color-card: var(--color-future-surface-raised);
+  --color-card-foreground: var(--color-future-foreground);
+  --color-popover: var(--color-future-surface-raised);
+  --color-popover-foreground: var(--color-future-foreground);
+  --color-primary: var(--color-future-accent);
+  --color-primary-foreground: var(--color-future-foreground-on-accent);
+  --color-secondary: var(--color-future-surface-overlay);
+  --color-secondary-foreground: var(--color-future-foreground);
+  --color-muted: var(--color-future-surface-overlay);
+  --color-muted-foreground: var(--color-future-foreground-muted);
+  --color-accent: var(--color-future-surface-hover);
+  --color-accent-foreground: var(--color-future-foreground);
+  --color-destructive: #ef4444;
+  --color-border: var(--color-future-border);
+  --color-border-de-emp: var(--color-future-border-subtle);
+  --color-input: var(--color-future-border);
+  --color-ring: var(--color-future-ring);
+}
+
+/* ============================================================================
+ * Light theme
+ * ============================================================================ */
+
+.future-light {
+  /* ── Surfaces ─────────────────────────────────────────────────────────── */
+  --color-future-surface: #ffffff;
+  /* white     — page / canvas */
+  --color-future-surface-raised: #fafafa;
+  /* zinc-50   — cards, overlays, panels */
+  --color-future-surface-overlay: #f4f4f5;
+  /* zinc-100  — panels, inputs, tabs */
+  --color-future-surface-hover: #e4e4e7;
+  /* zinc-200  — hover, selected nav */
+  --color-future-surface-muted: #a1a1aa;
+  /* zinc-400  — badges, indicators */
+  --color-future-surface-inverse: #09090b;
+  /* zinc-950  — buttons on light bg */
+
+  /* ── Accent ───────────────────────────────────────────────────────────── */
+  --color-future-accent: #06b6d4;
+  /* cyan-500  — unchanged */
+  --color-future-accent-subtle: #ecfeff;
+  /* cyan-50   — status badge, active nav */
+
+  /* ── Foreground (text / icons) ────────────────────────────────────────── */
+  --color-future-foreground: #09090b;
+  /* zinc-950  — primary headings */
+  --color-future-foreground-secondary: #18181b;
+  /* zinc-900  — body, messages */
+  --color-future-foreground-hover: #52525b;
+  /* zinc-600  — hover states */
+  --color-future-foreground-muted: #71717a;
+  /* zinc-500  — nav, secondary UI */
+  --color-future-foreground-subtle: #a1a1aa;
+  /* zinc-400  — labels, muted */
+  --color-future-foreground-inverse: #ffffff;
+  /* white     — icons on dark bg */
+  --color-future-foreground-on-accent: #ffffff;
+  /* white     — text on accent bg (unchanged) */
+  --color-future-accent-foreground: #0891b2;
+  /* cyan-600  — accent text */
+  --color-future-accent-foreground-muted: #0891b2;
+  /* cyan-600 — muted accent text */
+
+  /* ── Borders ──────────────────────────────────────────────────────────── */
+  --color-future-border: #d4d4d8;
+  /* zinc-300  — primary borders */
+  --color-future-border-subtle: #e4e4e7;
+  /* zinc-200  — subtle dividers */
+  --color-future-border-muted: #f4f4f5;
+  /* zinc-100  — content borders */
+  --color-future-border-deep: #fafafa;
+  /* zinc-50   — nested containers */
+  --color-future-border-inverse: #3f3f46;
+  /* zinc-700  — borders on inverse bg */
+  --color-future-border-hover: #a1a1aa;
+  /* zinc-400  — border hover state */
+
+  /* ── Ring ──────────────────────────────────────────────────────────────── */
+  --color-future-ring: #a1a1aa;
+  /* zinc-400  — selection ring */
+
+  /* ── Gradients ───────────────────────────────────────────────────────── */
+  --gradient-future-1: linear-gradient(127deg, #e4e4e7 25.94%, #f4f4f5 74.06%);
+  /* zinc-200 → zinc-100 */
+  --gradient-future-2: linear-gradient(128deg, #ffffff 1.26%, #fafafa 52.69%);
+  /* white → zinc-50 */
+  --gradient-future-3: linear-gradient(128deg, #e4e4e7 1.26%, #fafafa 52.69%);
+  /* zinc-200 → zinc-50 */
+  --gradient-future-4: linear-gradient(180deg, #fafafa 0%, #f4f4f5 100%);
+  /* zinc-50 → zinc-100 */
+  --gradient-future-5: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
+  /* white → zinc-50 */
+  --gradient-future-6: linear-gradient(106deg, #22d3ee 28.08%, #cffafe 71.92%);
+  /* cyan-400 → cyan-100 */
+
+  /* ── shadcn bridge — maps standard variables so shadcn components
+       (DataTable, Input, Button, etc.) inherit Future theme colors ────── */
+  --color-background: var(--color-future-surface);
+  --color-foreground: var(--color-future-foreground);
+  --color-card: var(--color-future-surface-raised);
+  --color-card-foreground: var(--color-future-foreground);
+  --color-popover: var(--color-future-surface-raised);
+  --color-popover-foreground: var(--color-future-foreground);
+  --color-primary: var(--color-future-accent);
+  --color-primary-foreground: var(--color-future-foreground-on-accent);
+  --color-secondary: var(--color-future-surface-overlay);
+  --color-secondary-foreground: var(--color-future-foreground);
+  --color-muted: var(--color-future-surface-overlay);
+  --color-muted-foreground: var(--color-future-foreground-muted);
+  --color-accent: var(--color-future-surface-hover);
+  --color-accent-foreground: var(--color-future-foreground);
+  --color-destructive: #ef4444;
+  --color-border: var(--color-future-border);
+  --color-border-de-emp: var(--color-future-border-subtle);
+  --color-input: var(--color-future-border);
+  --color-ring: var(--color-future-ring);
+}
+
+/* ============================================================================
+ * Register Future tokens with Tailwind 4
+ *
+ * The @theme inline block tells Tailwind to generate utility classes for
+ * each variable. E.g. --color-future-surface generates:
+ *   bg-future-surface, text-future-surface, border-future-surface,
+ *   from-future-surface, to-future-surface, ring-future-surface, etc.
+ * ============================================================================ */
+
+@theme inline {
+  /* Surfaces */
+  --color-future-surface: var(--color-future-surface);
+  --color-future-surface-raised: var(--color-future-surface-raised);
+  --color-future-surface-overlay: var(--color-future-surface-overlay);
+  --color-future-surface-hover: var(--color-future-surface-hover);
+  --color-future-surface-muted: var(--color-future-surface-muted);
+  --color-future-surface-inverse: var(--color-future-surface-inverse);
+
+  /* Accent */
+  --color-future-accent: var(--color-future-accent);
+  --color-future-accent-subtle: var(--color-future-accent-subtle);
+
+  /* Foreground */
+  --color-future-foreground: var(--color-future-foreground);
+  --color-future-foreground-secondary: var(--color-future-foreground-secondary);
+  --color-future-foreground-hover: var(--color-future-foreground-hover);
+  --color-future-foreground-muted: var(--color-future-foreground-muted);
+  --color-future-foreground-subtle: var(--color-future-foreground-subtle);
+  --color-future-foreground-inverse: var(--color-future-foreground-inverse);
+  --color-future-foreground-on-accent: var(--color-future-foreground-on-accent);
+  --color-future-accent-foreground: var(--color-future-accent-foreground);
+  --color-future-accent-foreground-muted: var(--color-future-accent-foreground-muted);
+
+  /* Borders */
+  --color-future-border: var(--color-future-border);
+  --color-future-border-subtle: var(--color-future-border-subtle);
+  --color-future-border-muted: var(--color-future-border-muted);
+  --color-future-border-deep: var(--color-future-border-deep);
+  --color-future-border-inverse: var(--color-future-border-inverse);
+  --color-future-border-hover: var(--color-future-border-hover);
+
+  /* Ring */
+  --color-future-ring: var(--color-future-ring);
+}
+
+/* ============================================================================
+ * Gradient utilities
+ *
+ * Gradients can't be registered via @theme (they aren't single color values),
+ * so we define them as @utility rules. Usage: bg-future-gradient-1, etc.
+ * ============================================================================ */
+
+@utility bg-future-gradient-1 {
+  background-image: var(--gradient-future-1);
+}
+
+@utility bg-future-gradient-2 {
+  background-image: var(--gradient-future-2);
+}
+
+@utility bg-future-gradient-3 {
+  background-image: var(--gradient-future-3);
+}
+
+@utility bg-future-gradient-4 {
+  background-image: var(--gradient-future-4);
+}
+
+@utility bg-future-gradient-5 {
+  background-image: var(--gradient-future-5);
+}
+
+@utility bg-future-gradient-6 {
+  background-image: var(--gradient-future-6);
+}
\ No newline at end of file
diff --git a/packages/apollo-wind/src/foundation/Future/icons.stories.tsx b/packages/apollo-wind/src/foundation/Future/icons.stories.tsx
new file mode 100644
index 000000000..4d1383878
--- /dev/null
+++ b/packages/apollo-wind/src/foundation/Future/icons.stories.tsx
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { cn } from '@/lib';
+
+const meta = {
+  title: 'Theme/Future/Icons',
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (_, { globals }) => (
+    <div
+      className={cn(
+        globals.futureTheme === 'light' ? 'future-light' : 'future-dark',
+        'flex min-h-screen w-full items-center justify-center bg-future-surface text-future-foreground-muted'
+      )}
+    >
+      Coming soon
+    </div>
+  ),
+};
diff --git a/packages/apollo-wind/src/foundation/Future/legacy-theme.css b/packages/apollo-wind/src/foundation/Future/legacy-theme.css
new file mode 100644
index 000000000..dd71775ad
--- /dev/null
+++ b/packages/apollo-wind/src/foundation/Future/legacy-theme.css
@@ -0,0 +1,261 @@
+/**
+ * Apollo Legacy — Theme Variables
+ *
+ * CSS custom properties for the Legacy (apollo-core) design language.
+ * Scoped to `.legacy-dark` and `.legacy-light` classes so they can be applied
+ * at any DOM level — matching the pattern used by Future themes.
+ *
+ * Source values come from @uipath/apollo-core/tokens/css/theme-variables.css.
+ *
+ * Apply `.legacy-dark` or `.legacy-light` to a parent element to activate a theme.
+ *
+ * Tailwind 4 generates utility classes from the @theme block below, e.g.:
+ *   bg-legacy-surface, text-legacy-foreground, border-legacy-border, etc.
+ */
+
+/* ============================================================================
+ * Dark theme
+ * ============================================================================ */
+
+.legacy-dark {
+  /* ── Surfaces ─────────────────────────────────────────────────────────── */
+  --color-legacy-surface: #182027;             /* page / canvas */
+  --color-legacy-surface-raised: #273139;      /* cards, panels */
+  --color-legacy-surface-overlay: #374652;     /* inputs, tabs, hover */
+  --color-legacy-surface-hover: #526069;       /* hover states */
+  --color-legacy-surface-muted: #8a97a0;       /* badges, indicators */
+  --color-legacy-surface-inverse: #f8f9fa;     /* inverse bg */
+  --color-legacy-surface-disabled: #273139;    /* disabled elements */
+  --color-legacy-surface-selected: #374652;    /* selected items */
+
+  /* ── Accent / Primary ──────────────────────────────────────────────────── */
+  --color-legacy-accent: #66adff;              /* primary blue */
+  --color-legacy-accent-hover: #87bfff;        /* primary hover */
+  --color-legacy-accent-lighter: #00489d;      /* lighter variant */
+  --color-legacy-accent-darker: #badaff;       /* darker variant */
+
+  /* ── Foreground (text / icons) ────────────────────────────────────────── */
+  --color-legacy-foreground: #f4f5f7;          /* primary text */
+  --color-legacy-foreground-emp: #f8f9fa;      /* emphasized text */
+  --color-legacy-foreground-muted: #cfd8dd;    /* de-emphasized text */
+  --color-legacy-foreground-subtle: #a4b1b8;   /* labels, disabled */
+  --color-legacy-foreground-inverse: #182027;  /* text on light bg */
+  --color-legacy-foreground-link: #66adff;     /* link text */
+  --color-legacy-foreground-on-accent: #182027; /* text on accent bg */
+
+  /* ── Borders ──────────────────────────────────────────────────────────── */
+  --color-legacy-border: #8a97a0;              /* primary borders */
+  --color-legacy-border-subtle: #526069;       /* subtle dividers */
+  --color-legacy-border-disabled: #526069;     /* disabled borders */
+  --color-legacy-border-grid: #273139;         /* grid borders */
+
+  /* ── Status ──────────────────────────────────────────────────────────── */
+  --color-legacy-error: #ff8484;
+  --color-legacy-success: #74c94b;
+  --color-legacy-warning: #ffbb27;
+  --color-legacy-info: #42a1ff;
+
+  /* ── Ring / Focus ────────────────────────────────────────────────────── */
+  --color-legacy-ring: #66adff;
+  --color-legacy-logo: #ffffff;
+
+  /* ── future-* bridge — allows templates built with future-* utility
+       classes (bg-future-surface, etc.) to resolve under legacy themes ──── */
+  --color-future-surface: var(--color-legacy-surface);
+  --color-future-surface-raised: var(--color-legacy-surface-raised);
+  --color-future-surface-overlay: var(--color-legacy-surface-overlay);
+  --color-future-surface-hover: var(--color-legacy-surface-hover);
+  --color-future-surface-muted: var(--color-legacy-surface-muted);
+  --color-future-surface-inverse: var(--color-legacy-surface-inverse);
+  --color-future-accent: var(--color-legacy-accent);
+  --color-future-accent-subtle: var(--color-legacy-accent-lighter);
+  --color-future-foreground: var(--color-legacy-foreground);
+  --color-future-foreground-secondary: var(--color-legacy-foreground-emp);
+  --color-future-foreground-hover: var(--color-legacy-foreground-muted);
+  --color-future-foreground-muted: var(--color-legacy-foreground-muted);
+  --color-future-foreground-subtle: var(--color-legacy-foreground-subtle);
+  --color-future-foreground-inverse: var(--color-legacy-foreground-inverse);
+  --color-future-foreground-on-accent: var(--color-legacy-foreground-on-accent);
+  --color-future-accent-foreground: var(--color-legacy-accent);
+  --color-future-accent-foreground-muted: var(--color-legacy-accent-hover);
+  --color-future-border: var(--color-legacy-border);
+  --color-future-border-subtle: var(--color-legacy-border-subtle);
+  --color-future-border-muted: var(--color-legacy-border-grid);
+  --color-future-border-deep: var(--color-legacy-border-grid);
+  --color-future-border-inverse: var(--color-legacy-border);
+  --color-future-border-hover: var(--color-legacy-border);
+  --color-future-ring: var(--color-legacy-ring);
+
+  /* ── shadcn bridge — maps standard variables so shadcn components
+       (DataTable, Input, Button, etc.) inherit Legacy theme colors ────── */
+  --color-background: var(--color-legacy-surface);
+  --color-foreground: var(--color-legacy-foreground);
+  --color-card: var(--color-legacy-surface-raised);
+  --color-card-foreground: var(--color-legacy-foreground);
+  --color-popover: var(--color-legacy-surface-raised);
+  --color-popover-foreground: var(--color-legacy-foreground);
+  --color-primary: var(--color-legacy-accent);
+  --color-primary-foreground: var(--color-legacy-foreground-on-accent);
+  --color-secondary: var(--color-legacy-surface-overlay);
+  --color-secondary-foreground: var(--color-legacy-foreground-muted);
+  --color-muted: var(--color-legacy-surface-raised);
+  --color-muted-foreground: var(--color-legacy-foreground-muted);
+  --color-accent: var(--color-legacy-surface-selected);
+  --color-accent-foreground: var(--color-legacy-foreground-emp);
+  --color-destructive: var(--color-legacy-error);
+  --color-border: var(--color-legacy-border-subtle);
+  --color-border-de-emp: var(--color-legacy-border-subtle);
+  --color-input: var(--color-legacy-border-subtle);
+  --color-ring: var(--color-legacy-ring);
+
+  color-scheme: dark;
+}
+
+/* ============================================================================
+ * Light theme
+ * ============================================================================ */
+
+.legacy-light {
+  /* ── Surfaces ─────────────────────────────────────────────────────────── */
+  --color-legacy-surface: #ffffff;             /* page / canvas */
+  --color-legacy-surface-raised: #ffffff;      /* cards (white on white) */
+  --color-legacy-surface-overlay: #f4f5f7;     /* secondary bg, inputs */
+  --color-legacy-surface-hover: #e9f1fa;       /* hover states */
+  --color-legacy-surface-muted: #cfd8dd;       /* badges, indicators */
+  --color-legacy-surface-inverse: #182027;     /* inverse bg */
+  --color-legacy-surface-disabled: #ecedee;    /* disabled elements */
+  --color-legacy-surface-selected: #e9f1fa;    /* selected items */
+
+  /* ── Accent / Primary ──────────────────────────────────────────────────── */
+  --color-legacy-accent: #0067df;              /* primary blue */
+  --color-legacy-accent-hover: #0056ba;        /* primary hover */
+  --color-legacy-accent-lighter: #badaff;      /* lighter variant */
+  --color-legacy-accent-darker: #00489d;       /* darker variant */
+
+  /* ── Foreground (text / icons) ────────────────────────────────────────── */
+  --color-legacy-foreground: #273139;          /* primary text */
+  --color-legacy-foreground-emp: #182027;      /* emphasized text */
+  --color-legacy-foreground-muted: #526069;    /* de-emphasized text */
+  --color-legacy-foreground-subtle: #8a97a0;   /* labels, disabled */
+  --color-legacy-foreground-inverse: #f8f9fa;  /* text on dark bg */
+  --color-legacy-foreground-link: #0067df;     /* link text */
+  --color-legacy-foreground-on-accent: #f8f9fa; /* text on accent bg */
+
+  /* ── Borders ──────────────────────────────────────────────────────────── */
+  --color-legacy-border: #a4b1b8;              /* primary borders */
+  --color-legacy-border-subtle: #cfd8dd;       /* subtle dividers */
+  --color-legacy-border-disabled: #cfd8dd;     /* disabled borders */
+  --color-legacy-border-grid: #f4f5f7;         /* grid borders */
+
+  /* ── Status ──────────────────────────────────────────────────────────── */
+  --color-legacy-error: #a6040a;
+  --color-legacy-success: #038108;
+  --color-legacy-warning: #9e6100;
+  --color-legacy-info: #1665b3;
+
+  /* ── Ring / Focus ────────────────────────────────────────────────────── */
+  --color-legacy-ring: #0067df;
+  --color-legacy-logo: #fa4616;
+
+  /* ── future-* bridge — allows templates built with future-* utility
+       classes (bg-future-surface, etc.) to resolve under legacy themes ──── */
+  --color-future-surface: var(--color-legacy-surface);
+  --color-future-surface-raised: var(--color-legacy-surface-raised);
+  --color-future-surface-overlay: var(--color-legacy-surface-overlay);
+  --color-future-surface-hover: var(--color-legacy-surface-hover);
+  --color-future-surface-muted: var(--color-legacy-surface-muted);
+  --color-future-surface-inverse: var(--color-legacy-surface-inverse);
+  --color-future-accent: var(--color-legacy-accent);
+  --color-future-accent-subtle: var(--color-legacy-accent-lighter);
+  --color-future-foreground: var(--color-legacy-foreground);
+  --color-future-foreground-secondary: var(--color-legacy-foreground-emp);
+  --color-future-foreground-hover: var(--color-legacy-foreground-muted);
+  --color-future-foreground-muted: var(--color-legacy-foreground-muted);
+  --color-future-foreground-subtle: var(--color-legacy-foreground-subtle);
+  --color-future-foreground-inverse: var(--color-legacy-foreground-inverse);
+  --color-future-foreground-on-accent: var(--color-legacy-foreground-on-accent);
+  --color-future-accent-foreground: var(--color-legacy-accent);
+  --color-future-accent-foreground-muted: var(--color-legacy-accent-hover);
+  --color-future-border: var(--color-legacy-border);
+  --color-future-border-subtle: var(--color-legacy-border-subtle);
+  --color-future-border-muted: var(--color-legacy-border-grid);
+  --color-future-border-deep: var(--color-legacy-border-grid);
+  --color-future-border-inverse: var(--color-legacy-border);
+  --color-future-border-hover: var(--color-legacy-border);
+  --color-future-ring: var(--color-legacy-ring);
+
+  /* ── shadcn bridge — maps standard variables so shadcn components
+       (DataTable, Input, Button, etc.) inherit Legacy theme colors ────── */
+  --color-background: var(--color-legacy-surface);
+  --color-foreground: var(--color-legacy-foreground);
+  --color-card: var(--color-legacy-surface-raised);
+  --color-card-foreground: var(--color-legacy-foreground);
+  --color-popover: var(--color-legacy-surface-raised);
+  --color-popover-foreground: var(--color-legacy-foreground);
+  --color-primary: var(--color-legacy-accent);
+  --color-primary-foreground: var(--color-legacy-foreground-on-accent);
+  --color-secondary: var(--color-legacy-surface-overlay);
+  --color-secondary-foreground: var(--color-legacy-foreground-muted);
+  --color-muted: var(--color-legacy-surface-overlay);
+  --color-muted-foreground: var(--color-legacy-foreground-muted);
+  --color-accent: var(--color-legacy-surface-selected);
+  --color-accent-foreground: var(--color-legacy-foreground-emp);
+  --color-destructive: var(--color-legacy-error);
+  --color-border: var(--color-legacy-border-subtle);
+  --color-border-de-emp: var(--color-legacy-border-subtle);
+  --color-input: var(--color-legacy-border-subtle);
+  --color-ring: var(--color-legacy-ring);
+
+  color-scheme: light;
+}
+
+/* ============================================================================
+ * Register Legacy tokens with Tailwind 4
+ *
+ * The @theme inline block tells Tailwind to generate utility classes for
+ * each variable. E.g. --color-legacy-surface generates:
+ *   bg-legacy-surface, text-legacy-surface, border-legacy-surface, etc.
+ * ============================================================================ */
+
+@theme inline {
+  /* Surfaces */
+  --color-legacy-surface: var(--color-legacy-surface);
+  --color-legacy-surface-raised: var(--color-legacy-surface-raised);
+  --color-legacy-surface-overlay: var(--color-legacy-surface-overlay);
+  --color-legacy-surface-hover: var(--color-legacy-surface-hover);
+  --color-legacy-surface-muted: var(--color-legacy-surface-muted);
+  --color-legacy-surface-inverse: var(--color-legacy-surface-inverse);
+  --color-legacy-surface-disabled: var(--color-legacy-surface-disabled);
+  --color-legacy-surface-selected: var(--color-legacy-surface-selected);
+
+  /* Accent */
+  --color-legacy-accent: var(--color-legacy-accent);
+  --color-legacy-accent-hover: var(--color-legacy-accent-hover);
+  --color-legacy-accent-lighter: var(--color-legacy-accent-lighter);
+  --color-legacy-accent-darker: var(--color-legacy-accent-darker);
+
+  /* Foreground */
+  --color-legacy-foreground: var(--color-legacy-foreground);
+  --color-legacy-foreground-emp: var(--color-legacy-foreground-emp);
+  --color-legacy-foreground-muted: var(--color-legacy-foreground-muted);
+  --color-legacy-foreground-subtle: var(--color-legacy-foreground-subtle);
+  --color-legacy-foreground-inverse: var(--color-legacy-foreground-inverse);
+  --color-legacy-foreground-link: var(--color-legacy-foreground-link);
+  --color-legacy-foreground-on-accent: var(--color-legacy-foreground-on-accent);
+
+  /* Borders */
+  --color-legacy-border: var(--color-legacy-border);
+  --color-legacy-border-subtle: var(--color-legacy-border-subtle);
+  --color-legacy-border-disabled: var(--color-legacy-border-disabled);
+  --color-legacy-border-grid: var(--color-legacy-border-grid);
+
+  /* Status */
+  --color-legacy-error: var(--color-legacy-error);
+  --color-legacy-success: var(--color-legacy-success);
+  --color-legacy-warning: var(--color-legacy-warning);
+  --color-legacy-info: var(--color-legacy-info);
+
+  /* Ring / Focus */
+  --color-legacy-ring: var(--color-legacy-ring);
+  --color-legacy-logo: var(--color-legacy-logo);
+}
diff --git a/packages/apollo-wind/src/foundation/Future/radius.stories.tsx b/packages/apollo-wind/src/foundation/Future/radius.stories.tsx
new file mode 100644
index 000000000..b977f6c5a
--- /dev/null
+++ b/packages/apollo-wind/src/foundation/Future/radius.stories.tsx
@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { cn } from '@/lib';
+import { fontFamily } from './typography';
+import { borderRadius } from './radius';
+
+// ============================================================================
+// Meta
+// ============================================================================
+
+const meta = {
+  title: 'Theme/Future/Radius',
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <h2
+      className="mb-6 text-2xl font-bold tracking-tight text-future-foreground"
+      style={{ fontFamily: fontFamily.base }}
+    >
+      {children}
+    </h2>
+  );
+}
+
+// ============================================================================
+// Story
+// ============================================================================
+
+export const Default: Story = {
+  render: (_, { globals }) => (
+    <div
+      className={cn(
+        globals.futureTheme === 'light' ? 'future-light' : 'future-dark',
+        'min-h-screen w-full bg-future-surface'
+      )}
+      style={{ fontFamily: fontFamily.base }}
+    >
+      <div className="mx-auto max-w-3xl space-y-2 p-8">
+      <SectionTitle>Border Radius</SectionTitle>
+
+      <div className="flex flex-col gap-4">
+        {Object.entries(borderRadius).map(([key, px]) => (
+          <div
+            key={key}
+            className="flex items-center gap-6 border-b border-future-border-subtle py-3"
+          >
+            <code className="w-48 shrink-0 text-sm font-medium text-future-accent-foreground-muted">
+              borderRadius.{key}
+            </code>
+            <span className="w-16 shrink-0 text-sm tabular-nums text-future-foreground-muted">
+              {px >= 9999 ? '9999px' : `${px}px`}
+            </span>
+            <div
+              className="h-12 w-48 border border-future-border bg-future-surface-raised"
+              style={{
+                borderRadius: px >= 9999 ? '9999px' : `${px}px`,
+              }}
+            />
+          </div>
+        ))}
+      </div>
+      </div>
+    </div>
+  ),
+};
diff --git a/packages/apollo-wind/src/foundation/Future/radius.ts b/packages/apollo-wind/src/foundation/Future/radius.ts
new file mode 100644
index 000000000..f455e44d0
--- /dev/null
+++ b/packages/apollo-wind/src/foundation/Future/radius.ts
@@ -0,0 +1,38 @@
+/**
+ * Apollo Future — Radius Tokens
+ *
+ * Single source of truth for all border radius values
+ * in the Future design language.
+ * Includes values actively used in both Delegate and Flow templates.
+ */
+
+// =============================================================================
+// Border Radius
+// =============================================================================
+
+/**
+ * Border radius scale in pixels.
+ *
+ * | Token   | px    | Tailwind         | Usage                       |
+ * |---------|-------|------------------|-----------------------------|
+ * | sm      | 4     | rounded-[4px]    | Chat bubble corner (Flow)   |
+ * | lg      | 8     | rounded-lg       | Buttons, inputs, icons      |
+ * | lgPlus  | 10    | rounded-[10px]   | Toggle pill buttons         |
+ * | xl      | 12    | rounded-xl       | Toggle containers, cards    |
+ * | 2xl     | 16    | rounded-2xl      | Panels, large cards         |
+ * | xlPlus  | 20    | rounded-[20px]   | Node size selector (Flow)   |
+ * | 3xl     | 24    | rounded-3xl      | Canvas toolbar              |
+ * | pill    | 32    | rounded-[32px]   | Delegate card radius        |
+ * | circle  | 9999  | rounded-full     | Circular buttons (send)     |
+ */
+export const borderRadius = {
+  sm: 4,
+  lg: 8,
+  lgPlus: 10,
+  xl: 12,
+  '2xl': 16,
+  xlPlus: 20,
+  '3xl': 24,
+  pill: 32,
+  circle: 9999,
+} as const;
diff --git a/packages/apollo-wind/src/foundation/Future/responsive.stories.tsx b/packages/apollo-wind/src/foundation/Future/responsive.stories.tsx
new file mode 100644
index 000000000..f53cc57d3
--- /dev/null
+++ b/packages/apollo-wind/src/foundation/Future/responsive.stories.tsx
@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { cn } from '@/lib';
+import { fontFamily } from './typography';
+import { breakpoint, viewport } from './responsive';
+
+// ============================================================================
+// Meta
+// ============================================================================
+
+const meta = {
+  title: 'Theme/Future/Responsive',
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <h2
+      className="mb-6 text-2xl font-bold tracking-tight text-future-foreground"
+      style={{ fontFamily: fontFamily.base }}
+    >
+      {children}
+    </h2>
+  );
+}
+
+function Divider() {
+  return <div className="my-10 h-px bg-future-border-subtle" />;
+}
+
+// ============================================================================
+// Story
+// ============================================================================
+
+export const Default: Story = {
+  render: (_, { globals }) => (
+    <div
+      className={cn(
+        globals.futureTheme === 'light' ? 'future-light' : 'future-dark',
+        'min-h-screen w-full bg-future-surface'
+      )}
+      style={{ fontFamily: fontFamily.base }}
+    >
+      <div className="mx-auto max-w-3xl space-y-2 p-8">
+      {/* ------------------------------------------------------------------ */}
+      {/* Breakpoints */}
+      {/* ------------------------------------------------------------------ */}
+      <SectionTitle>Breakpoints</SectionTitle>
+
+      <p className="mb-6 text-sm text-future-foreground-muted">
+        Min-width values (px) used in Delegate template and ViewportGuard.
+        Use with <code className="rounded bg-future-surface-overlay px-1 text-future-accent-foreground-muted">matchMedia(&apos;(min-width: Npx)&apos;)</code>.
+      </p>
+
+      <div className="flex flex-col gap-4">
+        {Object.entries(breakpoint).map(([key, px]) => (
+          <div
+            key={key}
+            className="flex items-center gap-6 border-b border-future-border-subtle py-3"
+          >
+            <code className="w-52 shrink-0 text-sm font-medium text-future-accent-foreground-muted">
+              breakpoint.{key}
+            </code>
+            <span className="w-16 shrink-0 text-sm tabular-nums text-future-foreground-muted">
+              {px}px
+            </span>
+            <span className="text-sm text-future-foreground-subtle">
+              {key === 'viewportGuard'
+                ? 'Content visible ≥ this width; below shows overlay'
+                : 'Left panel expanded ≥ this width; below collapsed'}
+            </span>
+          </div>
+        ))}
+      </div>
+
+      <Divider />
+
+      {/* ------------------------------------------------------------------ */}
+      {/* Viewport presets */}
+      {/* ------------------------------------------------------------------ */}
+      <SectionTitle>Viewport presets</SectionTitle>
+
+      <p className="mb-6 text-sm text-future-foreground-muted">
+        Named widths used in Storybook viewport dropdown (Screen XL, L, M, S, XS).
+      </p>
+
+      <div className="flex flex-col gap-4">
+        {Object.entries(viewport).map(([key, px]) => (
+          <div
+            key={key}
+            className="flex items-center gap-6 border-b border-future-border-subtle py-3"
+          >
+            <code className="w-52 shrink-0 text-sm font-medium text-future-accent-foreground-muted">
+              viewport.{key}
+            </code>
+            <span className="w-16 shrink-0 text-sm tabular-nums text-future-foreground-muted">
+              {px}px
+            </span>
+            <span className="text-sm text-future-foreground-subtle">
+              Screen {key.toUpperCase()} {px}
+            </span>
+          </div>
+        ))}
+      </div>
+      </div>
+    </div>
+  ),
+};
diff --git a/packages/apollo-wind/src/foundation/Future/responsive.ts b/packages/apollo-wind/src/foundation/Future/responsive.ts
new file mode 100644
index 000000000..8e57073b9
--- /dev/null
+++ b/packages/apollo-wind/src/foundation/Future/responsive.ts
@@ -0,0 +1,50 @@
+/**
+ * Apollo Future — Responsive Tokens
+ *
+ * Single source of truth for breakpoints and viewport widths
+ * in the Future design language.
+ * Includes values actively used in both Delegate and Flow templates
+ * and ViewportGuard.
+ */
+
+// =============================================================================
+// Breakpoints (min-width in px)
+// =============================================================================
+
+/**
+ * Breakpoints used in Delegate templates and guards.
+ * Use with window.matchMedia(`(min-width: ${value}px)`).
+ *
+ * | Token         | px   | Usage                                      |
+ * |---------------|------|--------------------------------------------|
+ * | viewportGuard | 769  | Content shown ≥769px; below shows overlay   |
+ * | panelExpand   | 1025 | Left panel expanded ≥1025px; else collapsed |
+ */
+export const breakpoint = {
+  viewportGuard: 769,
+  panelExpand: 1025,
+} as const;
+
+// =============================================================================
+// Viewport presets (Storybook / testing reference)
+// =============================================================================
+
+/**
+ * Named viewport widths used in Storybook and for reference.
+ * Matches Theme/Future viewport dropdown (Screen XL, L, M, S, XS).
+ *
+ * | Token | px   | Name           |
+ * |-------|------|----------------|
+ * | xs    | 540  | Screen XS 540  |
+ * | s     | 768  | Screen S 768   |
+ * | m     | 1024 | Screen M 1024  |
+ * | l     | 1440 | Screen L 1440  |
+ * | xl    | 1920 | Screen XL 1920 |
+ */
+export const viewport = {
+  xs: 540,
+  s: 768,
+  m: 1024,
+  l: 1440,
+  xl: 1920,
+} as const;
diff --git a/packages/apollo-wind/src/foundation/Future/shadows.stories.tsx b/packages/apollo-wind/src/foundation/Future/shadows.stories.tsx
new file mode 100644
index 000000000..71315d11c
--- /dev/null
+++ b/packages/apollo-wind/src/foundation/Future/shadows.stories.tsx
@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { cn } from '@/lib';
+import { fontFamily } from './typography';
+import { boxShadow, boxShadowClass } from './shadows';
+
+// ============================================================================
+// Meta
+// ============================================================================
+
+const meta = {
+  title: 'Theme/Future/Shadows',
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <h2
+      className="mb-6 text-2xl font-bold tracking-tight text-future-foreground"
+      style={{ fontFamily: fontFamily.base }}
+    >
+      {children}
+    </h2>
+  );
+}
+
+// ============================================================================
+// Story
+// ============================================================================
+
+export const Default: Story = {
+  render: (_, { globals }) => (
+    <div
+      className={cn(
+        globals.futureTheme === 'light' ? 'future-light' : 'future-dark',
+        'min-h-screen w-full bg-future-surface'
+      )}
+      style={{ fontFamily: fontFamily.base }}
+    >
+      <div className="mx-auto max-w-3xl space-y-2 p-8">
+      <SectionTitle>Box Shadow</SectionTitle>
+
+      <div className="flex flex-col gap-6">
+        {Object.entries(boxShadow).map(([key, value]) => (
+          <div
+            key={key}
+            className="flex items-center gap-6 border-b border-future-border-subtle pb-6 pt-2"
+          >
+            <div className="flex w-64 shrink-0 flex-col gap-1">
+              <code className="text-sm font-medium text-future-accent-foreground-muted">
+                boxShadow.{key}
+              </code>
+              <span className="text-xs text-future-foreground-subtle">
+                {boxShadowClass[key as keyof typeof boxShadowClass]}
+              </span>
+            </div>
+            <div
+              className="h-16 w-56 rounded-2xl border border-future-border-subtle bg-future-surface-raised"
+              style={{ boxShadow: value }}
+            />
+          </div>
+        ))}
+      </div>
+      </div>
+    </div>
+  ),
+};
diff --git a/packages/apollo-wind/src/foundation/Future/shadows.ts b/packages/apollo-wind/src/foundation/Future/shadows.ts
new file mode 100644
index 000000000..c958ce4d1
--- /dev/null
+++ b/packages/apollo-wind/src/foundation/Future/shadows.ts
@@ -0,0 +1,35 @@
+/**
+ * Apollo Future — Shadow Tokens
+ *
+ * Single source of truth for all box-shadow values
+ * in the Future design language.
+ * Includes values actively used in both Delegate and Flow templates.
+ */
+
+// =============================================================================
+// Box Shadow
+// =============================================================================
+
+/**
+ * Box shadow scale.
+ *
+ * | Token     | Value                                    | Tailwind                                              | Usage                              |
+ * |-----------|------------------------------------------|-------------------------------------------------------|------------------------------------|
+ * | sm        | 0 1px 2px 0 rgba(0,0,0,0.05)             | shadow-sm                                             | Subtle lift (logo, small badges)   |
+ * | rail      | 0px 4px 16px 0px rgba(0,0,0,0.25)        | shadow-[0px_4px_16px_0px_rgba(0,0,0,0.25)]           | Icon rail shadow (Flow panel)      |
+ * | elevated  | 0px 4px 24px 0px rgba(0,0,0,0.25)        | shadow-[0px_4px_24px_0px_rgba(0,0,0,0.25)]           | Panels, hover cards                |
+ */
+export const boxShadow = {
+  sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+  rail: '0px 4px 16px 0px rgba(0, 0, 0, 0.25)',
+  elevated: '0px 4px 24px 0px rgba(0, 0, 0, 0.25)',
+} as const;
+
+/**
+ * Tailwind class mapping for quick reference.
+ */
+export const boxShadowClass = {
+  sm: 'shadow-sm',
+  rail: 'shadow-[0px_4px_16px_0px_rgba(0,0,0,0.25)]',
+  elevated: 'shadow-[0px_4px_24px_0px_rgba(0,0,0,0.25)]',
+} as const;
diff --git a/packages/apollo-wind/src/foundation/Future/spacing.stories.tsx b/packages/apollo-wind/src/foundation/Future/spacing.stories.tsx
new file mode 100644
index 000000000..ca3148572
--- /dev/null
+++ b/packages/apollo-wind/src/foundation/Future/spacing.stories.tsx
@@ -0,0 +1,144 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { cn } from '@/lib';
+import { fontFamily } from './typography';
+import { spacing, spacingHalf, spacingArbitrary } from './spacing';
+
+// ============================================================================
+// Meta
+// ============================================================================
+
+const meta = {
+  title: 'Theme/Future/Spacing',
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <h2
+      className="mb-6 text-2xl font-bold tracking-tight text-future-foreground"
+      style={{ fontFamily: fontFamily.base }}
+    >
+      {children}
+    </h2>
+  );
+}
+
+function Divider() {
+  return <div className="my-10 h-px bg-future-border-subtle" />;
+}
+
+// ============================================================================
+// Story
+// ============================================================================
+
+export const Default: Story = {
+  render: (_, { globals }) => (
+    <div
+      className={cn(
+        globals.futureTheme === 'light' ? 'future-light' : 'future-dark',
+        'min-h-screen w-full bg-future-surface'
+      )}
+      style={{ fontFamily: fontFamily.base }}
+    >
+      <div className="mx-auto max-w-3xl space-y-2 p-8">
+      {/* ------------------------------------------------------------------ */}
+      {/* Spacing scale */}
+      {/* ------------------------------------------------------------------ */}
+      <SectionTitle>Spacing (Tailwind scale)</SectionTitle>
+
+      <div className="flex flex-col gap-4">
+        {Object.entries(spacing).map(([key, px]) => (
+          <div
+            key={key}
+            className="flex items-center gap-6 border-b border-future-border-subtle py-3"
+          >
+            <code className="w-48 shrink-0 text-sm font-medium text-future-accent-foreground-muted">
+              spacing.{key}
+            </code>
+            <span className="w-16 shrink-0 text-sm tabular-nums text-future-foreground-muted">
+              {px}px
+            </span>
+            <span className="text-xs text-future-foreground-subtle">
+              p-{key}, gap-{key}, etc.
+            </span>
+            <div
+              className="rounded bg-future-surface-hover"
+              style={{ width: `${px}px`, height: '24px' }}
+            />
+          </div>
+        ))}
+      </div>
+
+      <Divider />
+
+      {/* ------------------------------------------------------------------ */}
+      {/* Half spacing */}
+      {/* ------------------------------------------------------------------ */}
+      <SectionTitle>Spacing (half units)</SectionTitle>
+
+      <div className="flex flex-col gap-4">
+        {Object.entries(spacingHalf).map(([key, px]) => (
+          <div
+            key={key}
+            className="flex items-center gap-6 border-b border-future-border-subtle py-3"
+          >
+            <code className="w-48 shrink-0 text-sm font-medium text-future-accent-foreground-muted">
+              spacingHalf.{key}
+            </code>
+            <span className="w-16 shrink-0 text-sm tabular-nums text-future-foreground-muted">
+              {px}px
+            </span>
+            <span className="text-xs text-future-foreground-subtle">gap-{key}</span>
+            <div
+              className="rounded bg-future-surface-hover"
+              style={{ width: `${px}px`, height: '24px' }}
+            />
+          </div>
+        ))}
+      </div>
+
+      <Divider />
+
+      {/* ------------------------------------------------------------------ */}
+      {/* Arbitrary spacing */}
+      {/* ------------------------------------------------------------------ */}
+      <SectionTitle>Spacing (arbitrary)</SectionTitle>
+
+      <div className="flex flex-col gap-4">
+        {Object.entries(spacingArbitrary).map(([key, px]) => (
+          <div
+            key={key}
+            className="flex items-center gap-6 border-b border-future-border-subtle py-3"
+          >
+            <code className="w-48 shrink-0 text-sm font-medium text-future-accent-foreground-muted">
+              spacingArbitrary.{key}
+            </code>
+            <span className="w-16 shrink-0 text-sm tabular-nums text-future-foreground-muted">
+              {px}px
+            </span>
+            <span className="text-xs text-future-foreground-subtle">
+              {Number(px) <= 124 ? `h-[${px}px], gap-[${px}px], etc.` : `max-w-[${px}px]`}
+            </span>
+            <div
+              className="rounded bg-future-surface-hover"
+              style={{
+                width: `${Math.min(px, 120)}px`,
+                height: '24px',
+              }}
+            />
+          </div>
+        ))}
+      </div>
+      </div>
+    </div>
+  ),
+};
diff --git a/packages/apollo-wind/src/foundation/Future/spacing.ts b/packages/apollo-wind/src/foundation/Future/spacing.ts
new file mode 100644
index 000000000..218594c35
--- /dev/null
+++ b/packages/apollo-wind/src/foundation/Future/spacing.ts
@@ -0,0 +1,91 @@
+/**
+ * Apollo Future — Spacing Tokens
+ *
+ * Single source of truth for spacing (padding, margin, gap, dimensions)
+ * in the Future design language.
+ * Includes values actively used in both Delegate and Flow templates.
+ * All values map to Tailwind spacing scale or arbitrary values in use.
+ */
+
+// =============================================================================
+// Spacing Scale (Tailwind: 1 unit = 4px)
+// =============================================================================
+
+/**
+ * Spacing scale in pixels.
+ *
+ * | Token | px  | Tailwind     | Usage example             |
+ * |-------|-----|--------------|---------------------------|
+ * | 0     | 0   | p-0          | Reset padding             |
+ * | 1     | 4   | p-1, gap-1   | Tight padding             |
+ * | 2     | 8   | p-2, gap-2   | Default gaps              |
+ * | 3     | 12  | px-3, py-3   | Inline padding            |
+ * | 4     | 16  | p-4, gap-4   | Content padding           |
+ * | 5     | 20  | py-5         | Section padding           |
+ * | 6     | 24  | gap-6, px-6  | Large gaps                |
+ * | 7     | 28  | gap-7        | Chat message gap (Flow)   |
+ * | 8     | 32  | gap-8        | Section gaps              |
+ * | 10    | 40  | px-10        | Page horizontal           |
+ */
+export const spacing = {
+  0: 0,
+  1: 4,
+  2: 8,
+  3: 12,
+  4: 16,
+  5: 20,
+  6: 24,
+  7: 28,
+  8: 32,
+  10: 40,
+} as const;
+
+/**
+ * Fractional / half-unit spacing used in templates.
+ *
+ * | Token | px  | Tailwind  | Usage                         |
+ * |-------|-----|-----------|-------------------------------|
+ * | 0.5   | 2   | gap-0.5   | Tight gaps                   |
+ * | 2.5   | 10  | pt-2.5    | Node card padding, toolbar   |
+ */
+export const spacingHalf = {
+  '0.5': 2,
+  '2.5': 10,
+} as const;
+
+// =============================================================================
+// Arbitrary spacing (custom values in use)
+// =============================================================================
+
+/**
+ * Arbitrary spacing values used in Future templates.
+ *
+ * | Token | px   | Usage                            |
+ * |-------|------|----------------------------------|
+ * | 15    | 15   | gap-[15px] (Flow node)           |
+ * | 18    | 18   | gap-[18px], pt-[18px] (Delegate) |
+ * | 20    | 20   | mt-20 (Delegate)                 |
+ * | 37    | 37   | gap-[37px] (Delegate)            |
+ * | 60    | 60   | Panel icon rail (60×60px)        |
+ * | 78    | 78   | min-h-[78px] (Delegate)          |
+ * | 124   | 124  | min-h-[124px] (Delegate)         |
+ * | 360   | 360  | Flow node size (360×360px)       |
+ * | 420   | 420  | Flow expanded panel width        |
+ * | 680   | 680  | max-w-[680px] (properties bar)   |
+ * | 800   | 800  | max-w-[800px] (Delegate)         |
+ * | 930   | 930  | Properties expanded panel width  |
+ */
+export const spacingArbitrary = {
+  15: 15,
+  18: 18,
+  20: 20,
+  37: 37,
+  60: 60,
+  78: 78,
+  124: 124,
+  360: 360,
+  420: 420,
+  680: 680,
+  800: 800,
+  930: 930,
+} as const;
diff --git a/packages/apollo-wind/src/foundation/Future/strokes.stories.tsx b/packages/apollo-wind/src/foundation/Future/strokes.stories.tsx
new file mode 100644
index 000000000..03c978f94
--- /dev/null
+++ b/packages/apollo-wind/src/foundation/Future/strokes.stories.tsx
@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { cn } from '@/lib';
+import { fontFamily } from './typography';
+import {
+  borderWidth,
+  borderColor,
+  borderColorClass,
+} from './strokes';
+
+// ============================================================================
+// Meta
+// ============================================================================
+
+const meta = {
+  title: 'Theme/Future/Strokes',
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <h2
+      className="mb-6 text-2xl font-bold tracking-tight text-future-foreground"
+      style={{ fontFamily: fontFamily.base }}
+    >
+      {children}
+    </h2>
+  );
+}
+
+function Divider() {
+  return <div className="my-10 h-px bg-future-border-subtle" />;
+}
+
+// ============================================================================
+// Story
+// ============================================================================
+
+export const Default: Story = {
+  render: (_, { globals }) => (
+    <div
+      className={cn(
+        globals.futureTheme === 'light' ? 'future-light' : 'future-dark',
+        'min-h-screen w-full bg-future-surface'
+      )}
+      style={{ fontFamily: fontFamily.base }}
+    >
+      <div className="mx-auto max-w-3xl space-y-2 p-8">
+      {/* ------------------------------------------------------------------ */}
+      {/* Border Width */}
+      {/* ------------------------------------------------------------------ */}
+      <SectionTitle>Border Width</SectionTitle>
+
+      <div className="flex flex-col gap-4">
+        {Object.entries(borderWidth).map(([key, px]) => (
+          <div
+            key={key}
+            className="flex items-center gap-6 border-b border-future-border-subtle py-3"
+          >
+            <code className="w-48 shrink-0 text-sm font-medium text-future-accent-foreground-muted">
+              borderWidth.{key}
+            </code>
+            <span className="w-16 shrink-0 text-sm tabular-nums text-future-foreground-muted">
+              {px}px
+            </span>
+            <div
+              className="h-10 w-48 rounded-lg bg-future-surface-raised"
+              style={{
+                border: `${px}px solid var(--color-future-border)`,
+              }}
+            />
+          </div>
+        ))}
+      </div>
+
+      <Divider />
+
+      {/* ------------------------------------------------------------------ */}
+      {/* Border Color */}
+      {/* ------------------------------------------------------------------ */}
+      <SectionTitle>Border Color</SectionTitle>
+
+      <div className="flex flex-col gap-4">
+        {Object.entries(borderColor).map(([key, hex]) => (
+          <div
+            key={key}
+            className="flex items-center gap-6 border-b border-future-border-subtle py-3"
+          >
+            <code className="w-48 shrink-0 text-sm font-medium text-future-accent-foreground-muted">
+              borderColor.{key}
+            </code>
+            <span className="w-28 shrink-0 text-sm tabular-nums text-future-foreground-muted">
+              {hex}
+            </span>
+            <span className="w-36 shrink-0 text-xs text-future-foreground-subtle">
+              {borderColorClass[key as keyof typeof borderColorClass]}
+            </span>
+            <div
+              className="h-10 w-48 rounded-lg bg-future-surface-raised"
+              style={{
+                border: `2px solid ${hex}`,
+              }}
+            />
+          </div>
+        ))}
+      </div>
+      </div>
+    </div>
+  ),
+};
diff --git a/packages/apollo-wind/src/foundation/Future/strokes.ts b/packages/apollo-wind/src/foundation/Future/strokes.ts
new file mode 100644
index 000000000..e90b8f5ce
--- /dev/null
+++ b/packages/apollo-wind/src/foundation/Future/strokes.ts
@@ -0,0 +1,60 @@
+/**
+ * Apollo Future — Stroke Tokens
+ *
+ * Single source of truth for border widths and border colors
+ * in the Future design language.
+ * Includes values actively used in both Delegate and Flow templates.
+ *
+ * For border radius tokens, see `radius.ts`.
+ */
+
+// =============================================================================
+// Border Width
+// =============================================================================
+
+/**
+ * Border width scale in pixels.
+ *
+ * | Token   | px | Tailwind       |
+ * |---------|----|----------------|
+ * | none    | 0  | border-0       |
+ * | default | 1  | border         |
+ */
+export const borderWidth = {
+  none: 0,
+  default: 1,
+} as const;
+
+// =============================================================================
+// Border Color
+// =============================================================================
+
+/**
+ * Semantic border color tokens mapped to Tailwind Zinc palette.
+ *
+ * | Token    | Hex     | Tailwind          | Usage                          |
+ * |----------|---------|-------------------|--------------------------------|
+ * | subtle   | #27272a | border-zinc-800   | Dividers, card borders         |
+ * | default  | #3f3f46 | border-zinc-700   | Default component borders      |
+ * | muted    | #18181b | border-zinc-900   | Subdued container borders      |
+ * | strong   | #e4e4e7 | border-zinc-200   | High-contrast borders on dark  |
+ * | hover    | #52525b | border-zinc-600   | Hover state borders            |
+ */
+export const borderColor = {
+  subtle: '#27272a',
+  default: '#3f3f46',
+  muted: '#18181b',
+  strong: '#e4e4e7',
+  hover: '#52525b',
+} as const;
+
+/**
+ * Tailwind class mapping for quick reference.
+ */
+export const borderColorClass = {
+  subtle: 'border-zinc-800',
+  default: 'border-zinc-700',
+  muted: 'border-zinc-900',
+  strong: 'border-zinc-200',
+  hover: 'border-zinc-600',
+} as const;
diff --git a/packages/apollo-wind/src/foundation/Future/theme.stories.tsx b/packages/apollo-wind/src/foundation/Future/theme.stories.tsx
new file mode 100644
index 000000000..661e73af8
--- /dev/null
+++ b/packages/apollo-wind/src/foundation/Future/theme.stories.tsx
@@ -0,0 +1,610 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { cn } from '@/lib';
+import { fontFamily } from './typography';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+
+// ============================================================================
+// Meta
+// ============================================================================
+
+const meta = {
+  title: 'Theme/Future/Theme',
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Theme helpers
+// ============================================================================
+
+type ThemeFamily = 'future' | 'legacy';
+
+/** Derive the theme family and variant from the Storybook global value */
+function parseThemeGlobal(value: string): { family: ThemeFamily; variant: 'dark' | 'light' } {
+  if (value === 'legacy-dark') return { family: 'legacy', variant: 'dark' };
+  if (value === 'legacy-light') return { family: 'legacy', variant: 'light' };
+  if (value === 'light') return { family: 'future', variant: 'light' };
+  return { family: 'future', variant: 'dark' };
+}
+
+/** Get the CSS class for a given family + variant */
+function themeClass(family: ThemeFamily, variant: 'dark' | 'light') {
+  return family === 'legacy'
+    ? variant === 'light' ? 'legacy-light' : 'legacy-dark'
+    : variant === 'light' ? 'future-light' : 'future-dark';
+}
+
+// ============================================================================
+// Shared helpers
+// ============================================================================
+
+/** Page chrome uses shadcn bridge tokens (bg-background, text-foreground, etc.)
+ *  so they resolve correctly under both .future-* and .legacy-* theme classes. */
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <h2
+      className="mb-2 text-2xl font-bold tracking-tight text-foreground"
+      style={{ fontFamily: fontFamily.base }}
+    >
+      {children}
+    </h2>
+  );
+}
+
+function SectionDescription({ children }: { children: React.ReactNode }) {
+  return (
+    <p
+      className="mb-6 text-sm leading-relaxed text-muted-foreground"
+      style={{ fontFamily: fontFamily.base }}
+    >
+      {children}
+    </p>
+  );
+}
+
+function Divider() {
+  return <div className="my-10 h-px bg-border" />;
+}
+
+function CodeBlock({ children }: { children: string }) {
+  return (
+    <pre
+      className="overflow-x-auto rounded-lg border border-border bg-card p-4 text-[13px] leading-relaxed text-foreground"
+      style={{ fontFamily: fontFamily.monospace }}
+    >
+      {children}
+    </pre>
+  );
+}
+
+function InlineCode({ children }: { children: React.ReactNode }) {
+  return (
+    <code className="rounded bg-muted px-1.5 py-0.5 text-primary">
+      {children}
+    </code>
+  );
+}
+
+// ============================================================================
+// Future preview card
+// ============================================================================
+
+function FuturePreviewCard({ theme }: { theme: string }) {
+  return (
+    <div className="flex flex-col gap-4 rounded-xl border border-future-border-subtle bg-future-surface-raised p-6">
+      <div className="flex items-center gap-2">
+        <div className="h-3 w-3 rounded-full bg-future-accent" />
+        <span className="text-xs font-semibold uppercase tracking-widest text-future-foreground-muted">
+          {theme}
+        </span>
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <h3 className="text-lg font-semibold text-future-foreground">Card title</h3>
+        <p className="text-sm text-future-foreground-muted">
+          Body text uses the muted foreground token for secondary information and descriptions.
+        </p>
+      </div>
+
+      <Input placeholder="Search…" className="bg-future-surface-overlay" />
+
+      <div className="flex items-center gap-3">
+        <Button size="sm" className="bg-future-accent text-future-foreground-on-accent hover:bg-future-accent/90">
+          Primary
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          className="border-future-border bg-future-surface text-future-foreground hover:bg-future-surface-hover"
+        >
+          Secondary
+        </Button>
+        <Button variant="ghost" size="sm" className="text-future-foreground hover:bg-future-surface-hover">
+          Ghost
+        </Button>
+      </div>
+
+      <div className="flex gap-2 pt-2">
+        {[
+          { bg: 'bg-future-surface', label: 'surface' },
+          { bg: 'bg-future-surface-raised', label: 'raised' },
+          { bg: 'bg-future-surface-overlay', label: 'overlay' },
+          { bg: 'bg-future-surface-hover', label: 'hover' },
+        ].map((s) => (
+          <div key={s.label} className="flex flex-col items-center gap-1">
+            <div className={cn('h-8 w-8 rounded-md border border-future-border', s.bg)} />
+            <span className="text-[10px] text-future-foreground-subtle">{s.label}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// Legacy preview card
+// ============================================================================
+
+function LegacyPreviewCard({ theme }: { theme: string }) {
+  return (
+    <div className="flex flex-col gap-4 rounded-xl border border-legacy-border-subtle bg-legacy-surface-raised p-6">
+      <div className="flex items-center gap-2">
+        <div className="h-3 w-3 rounded-full bg-legacy-accent" />
+        <span className="text-xs font-semibold uppercase tracking-widest text-legacy-foreground-muted">
+          {theme}
+        </span>
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <h3 className="text-lg font-semibold text-legacy-foreground">Card title</h3>
+        <p className="text-sm text-legacy-foreground-muted">
+          Body text uses the muted foreground token for secondary information and descriptions.
+        </p>
+      </div>
+
+      <Input placeholder="Search…" className="border-legacy-border-subtle bg-legacy-surface-overlay text-legacy-foreground placeholder:text-legacy-foreground-subtle" />
+
+      <div className="flex items-center gap-3">
+        <Button size="sm" className="bg-legacy-accent text-legacy-foreground-on-accent hover:bg-legacy-accent-hover">
+          Primary
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          className="border-legacy-border-subtle bg-legacy-surface text-legacy-foreground hover:bg-legacy-surface-hover"
+        >
+          Secondary
+        </Button>
+        <Button variant="ghost" size="sm" className="text-legacy-foreground hover:bg-legacy-surface-hover">
+          Ghost
+        </Button>
+      </div>
+
+      <div className="flex gap-2 pt-2">
+        {[
+          { bg: 'bg-legacy-surface', label: 'surface' },
+          { bg: 'bg-legacy-surface-raised', label: 'raised' },
+          { bg: 'bg-legacy-surface-overlay', label: 'overlay' },
+          { bg: 'bg-legacy-surface-hover', label: 'hover' },
+        ].map((s) => (
+          <div key={s.label} className="flex flex-col items-center gap-1">
+            <div className={cn('h-8 w-8 rounded-md border border-legacy-border', s.bg)} />
+            <span className="text-[10px] text-legacy-foreground-subtle">{s.label}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// Token tables
+// ============================================================================
+
+const futureTokenGroups = [
+  {
+    group: 'Surface',
+    tokens: [
+      { name: 'future-surface', usage: 'Page / canvas background', dark: '#09090b', light: '#ffffff' },
+      { name: 'future-surface-raised', usage: 'Cards, panels, overlays', dark: '#18181b', light: '#fafafa' },
+      { name: 'future-surface-overlay', usage: 'Inputs, tabs, icon rail', dark: '#27272a', light: '#f4f4f5' },
+      { name: 'future-surface-hover', usage: 'Hover, selected nav', dark: '#3f3f46', light: '#e4e4e7' },
+    ],
+  },
+  {
+    group: 'Foreground',
+    tokens: [
+      { name: 'future-foreground', usage: 'Primary headings', dark: '#fafafa', light: '#09090b' },
+      { name: 'future-foreground-muted', usage: 'Nav, secondary UI', dark: '#a1a1aa', light: '#71717a' },
+      { name: 'future-foreground-subtle', usage: 'Labels, placeholders', dark: '#71717a', light: '#a1a1aa' },
+    ],
+  },
+  {
+    group: 'Accent',
+    tokens: [
+      { name: 'future-accent', usage: 'Logo, primary action', dark: '#06b6d4', light: '#06b6d4' },
+      { name: 'future-accent-subtle', usage: 'Active nav, status badges', dark: '#083344', light: '#ecfeff' },
+    ],
+  },
+  {
+    group: 'Border',
+    tokens: [
+      { name: 'future-border', usage: 'Primary borders', dark: '#3f3f46', light: '#d4d4d8' },
+      { name: 'future-border-subtle', usage: 'Subtle dividers', dark: '#27272a', light: '#e4e4e7' },
+    ],
+  },
+];
+
+const legacyTokenGroups = [
+  {
+    group: 'Surface',
+    tokens: [
+      { name: 'legacy-surface', usage: 'Page / canvas background', dark: '#182027', light: '#ffffff' },
+      { name: 'legacy-surface-raised', usage: 'Cards, panels', dark: '#273139', light: '#ffffff' },
+      { name: 'legacy-surface-overlay', usage: 'Secondary bg, inputs', dark: '#374652', light: '#f4f5f7' },
+      { name: 'legacy-surface-hover', usage: 'Hover states', dark: '#526069', light: '#e9f1fa' },
+    ],
+  },
+  {
+    group: 'Foreground',
+    tokens: [
+      { name: 'legacy-foreground', usage: 'Primary text', dark: '#f4f5f7', light: '#273139' },
+      { name: 'legacy-foreground-muted', usage: 'De-emphasized text', dark: '#cfd8dd', light: '#526069' },
+      { name: 'legacy-foreground-subtle', usage: 'Labels, disabled', dark: '#a4b1b8', light: '#8a97a0' },
+    ],
+  },
+  {
+    group: 'Accent',
+    tokens: [
+      { name: 'legacy-accent', usage: 'Primary blue', dark: '#66adff', light: '#0067df' },
+      { name: 'legacy-accent-hover', usage: 'Primary hover', dark: '#87bfff', light: '#0056ba' },
+    ],
+  },
+  {
+    group: 'Border',
+    tokens: [
+      { name: 'legacy-border', usage: 'Primary borders', dark: '#8a97a0', light: '#a4b1b8' },
+      { name: 'legacy-border-subtle', usage: 'Subtle dividers', dark: '#526069', light: '#cfd8dd' },
+    ],
+  },
+];
+
+function TokenTable({ groups }: { groups: typeof futureTokenGroups }) {
+  return (
+    <div className="overflow-hidden rounded-lg border border-border">
+      <table className="w-full text-sm" style={{ fontFamily: fontFamily.base }}>
+        <thead>
+          <tr className="border-b border-border bg-muted">
+            <th className="px-4 py-2.5 text-left font-medium text-muted-foreground">Token</th>
+            <th className="px-4 py-2.5 text-left font-medium text-muted-foreground">Usage</th>
+            <th className="px-4 py-2.5 text-center font-medium text-muted-foreground">Dark</th>
+            <th className="px-4 py-2.5 text-center font-medium text-muted-foreground">Light</th>
+          </tr>
+        </thead>
+        <tbody>
+          {groups.map((group) => (
+            <React.Fragment key={group.group}>
+              <tr className="border-b border-border bg-card/50">
+                <td
+                  colSpan={4}
+                  className="px-4 py-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground"
+                >
+                  {group.group}
+                </td>
+              </tr>
+              {group.tokens.map((token) => (
+                <tr key={token.name} className="border-b border-border last:border-b-0">
+                  <td className="px-4 py-2">
+                    <code className="text-xs text-primary" style={{ fontFamily: fontFamily.monospace }}>
+                      {token.name}
+                    </code>
+                  </td>
+                  <td className="px-4 py-2 text-muted-foreground">{token.usage}</td>
+                  <td className="px-4 py-2">
+                    <div className="flex items-center justify-center gap-2">
+                      <div className="h-5 w-5 rounded border border-border" style={{ backgroundColor: token.dark }} />
+                      <code className="text-xs text-muted-foreground" style={{ fontFamily: fontFamily.monospace }}>
+                        {token.dark}
+                      </code>
+                    </div>
+                  </td>
+                  <td className="px-4 py-2">
+                    <div className="flex items-center justify-center gap-2">
+                      <div className="h-5 w-5 rounded border border-border" style={{ backgroundColor: token.light }} />
+                      <code className="text-xs text-muted-foreground" style={{ fontFamily: fontFamily.monospace }}>
+                        {token.light}
+                      </code>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </React.Fragment>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+// ============================================================================
+// Tab content — Future
+// ============================================================================
+
+function FutureTabContent() {
+  return (
+    <>
+      {/* ── Side-by-side preview ───────────────────────────────────────── */}
+      <SectionTitle>Theme preview</SectionTitle>
+      <SectionDescription>
+        The same component rendered in both themes. All tokens resolve
+        automatically — no conditional styling needed.
+      </SectionDescription>
+
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+        <div className="future-dark rounded-xl bg-future-surface p-4">
+          <FuturePreviewCard theme="Dark" />
+        </div>
+        <div className="future-light rounded-xl bg-future-surface p-4">
+          <FuturePreviewCard theme="Light" />
+        </div>
+      </div>
+
+      <Divider />
+
+      {/* ── How to use ─────────────────────────────────────────────────── */}
+      <SectionTitle>How to use</SectionTitle>
+      <SectionDescription>
+        Apply <InlineCode>.future-dark</InlineCode> or <InlineCode>.future-light</InlineCode> to
+        any container. Everything inside inherits the correct token values.
+        Templates like <InlineCode>MaestroTemplate</InlineCode> handle
+        this automatically via their <InlineCode>theme</InlineCode> prop.
+      </SectionDescription>
+
+      <div className="flex flex-col gap-4">
+        <CodeBlock>{`<!-- Wrap any container with the theme class -->
+<div class="future-dark">
+  <div class="bg-future-surface text-future-foreground">
+    Dark themed content
+  </div>
+</div>
+
+<div class="future-light">
+  <div class="bg-future-surface text-future-foreground">
+    Light themed content
+  </div>
+</div>`}</CodeBlock>
+
+        <CodeBlock>{`<!-- Or use a template component that handles it for you -->
+<MaestroTemplate theme="dark">
+  {/* children automatically inherit dark theme tokens */}
+</MaestroTemplate>`}</CodeBlock>
+      </div>
+
+      <Divider />
+
+      {/* ── Token overview ─────────────────────────────────────────────── */}
+      <SectionTitle>Token overview</SectionTitle>
+      <SectionDescription>
+        Key semantic tokens and their resolved values per theme. See the
+        Colors page for the full token reference.
+      </SectionDescription>
+
+      <TokenTable groups={futureTokenGroups} />
+
+      <Divider />
+
+      {/* ── Shadcn bridge ──────────────────────────────────────────────── */}
+      <SectionTitle>Shadcn component compatibility</SectionTitle>
+      <SectionDescription>
+        The Future theme includes a built-in bridge that maps standard shadcn CSS
+        variables to their Future token equivalents. This means shadcn/ui
+        components like Button, Input, DataTable, and DropdownMenu work
+        automatically inside any themed container — no extra configuration needed.
+      </SectionDescription>
+
+      <CodeBlock>{`/* future-theme.css — shadcn bridge (excerpt) */
+
+.future-dark {
+  --color-background:   var(--color-future-surface);
+  --color-foreground:   var(--color-future-foreground);
+  --color-primary:      var(--color-future-accent);
+  --color-muted:        var(--color-future-surface-overlay);
+  --color-border:       var(--color-future-border);
+  --color-input:        var(--color-future-border);
+  --color-ring:         var(--color-future-ring);
+  /* … full mapping in future-theme.css */
+}`}</CodeBlock>
+    </>
+  );
+}
+
+// ============================================================================
+// Tab content — Legacy
+// ============================================================================
+
+function LegacyTabContent() {
+  return (
+    <>
+      {/* ── Side-by-side preview ───────────────────────────────────────── */}
+      <SectionTitle>Theme preview</SectionTitle>
+      <SectionDescription>
+        The same component rendered in both Legacy themes. The Legacy design
+        language uses the apollo-core token set from UiPath&apos;s original
+        design system.
+      </SectionDescription>
+
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+        <div className="legacy-dark rounded-xl bg-legacy-surface p-4">
+          <LegacyPreviewCard theme="Dark" />
+        </div>
+        <div className="legacy-light rounded-xl bg-legacy-surface p-4">
+          <LegacyPreviewCard theme="Light" />
+        </div>
+      </div>
+
+      <Divider />
+
+      {/* ── How to use ─────────────────────────────────────────────────── */}
+      <SectionTitle>How to use</SectionTitle>
+      <SectionDescription>
+        Apply <InlineCode>.legacy-dark</InlineCode> or <InlineCode>.legacy-light</InlineCode> to
+        any container. The Legacy theme maps apollo-core token values into scoped
+        CSS classes that work at any DOM level — just like the Future theme.
+      </SectionDescription>
+
+      <div className="flex flex-col gap-4">
+        <CodeBlock>{`<!-- Wrap any container with the theme class -->
+<div class="legacy-dark">
+  <div class="bg-legacy-surface text-legacy-foreground">
+    Dark themed content
+  </div>
+</div>
+
+<div class="legacy-light">
+  <div class="bg-legacy-surface text-legacy-foreground">
+    Light themed content
+  </div>
+</div>`}</CodeBlock>
+
+        <CodeBlock>{`/* Legacy tokens use the "legacy-" prefix */
+/* bg-legacy-surface, text-legacy-foreground, border-legacy-border, etc. */
+
+/* The shadcn bridge is also included, so shadcn components
+   inherit the correct Legacy colors automatically. */`}</CodeBlock>
+      </div>
+
+      <Divider />
+
+      {/* ── Token overview ─────────────────────────────────────────────── */}
+      <SectionTitle>Token overview</SectionTitle>
+      <SectionDescription>
+        Key semantic tokens from the Legacy (apollo-core) design system and their
+        resolved values per theme.
+      </SectionDescription>
+
+      <TokenTable groups={legacyTokenGroups} />
+
+      <Divider />
+
+      {/* ── Shadcn bridge ──────────────────────────────────────────────── */}
+      <SectionTitle>Shadcn component compatibility</SectionTitle>
+      <SectionDescription>
+        Like the Future theme, the Legacy theme includes a shadcn bridge so standard
+        components work automatically. The Legacy bridge maps apollo-core variables
+        to shadcn expected names.
+      </SectionDescription>
+
+      <CodeBlock>{`/* legacy-theme.css — shadcn bridge (excerpt) */
+
+.legacy-dark {
+  --color-background:   var(--color-legacy-surface);
+  --color-foreground:   var(--color-legacy-foreground);
+  --color-primary:      var(--color-legacy-accent);
+  --color-muted:        var(--color-legacy-surface-raised);
+  --color-border:       var(--color-legacy-border-subtle);
+  --color-input:        var(--color-legacy-border-subtle);
+  --color-ring:         var(--color-legacy-ring);
+  /* … full mapping in legacy-theme.css */
+}`}</CodeBlock>
+    </>
+  );
+}
+
+// ============================================================================
+// Story
+// ============================================================================
+
+const themeTabs = ['Future', 'Legacy'] as const;
+
+function ThemePage({ globalTheme }: { globalTheme: string }) {
+  const { family } = parseThemeGlobal(globalTheme);
+  const [activeTab, setActiveTab] = React.useState<ThemeFamily>(family);
+
+  // Sync tab when toolbar selection changes family
+  React.useEffect(() => {
+    setActiveTab(family);
+  }, [family]);
+
+  const activeThemeClass = themeClass(
+    activeTab,
+    parseThemeGlobal(globalTheme).variant,
+  );
+
+  return (
+    <div
+      className={cn(activeThemeClass, 'min-h-screen w-full bg-background text-foreground')}
+      style={{ fontFamily: fontFamily.base }}
+    >
+      <div className="mx-auto max-w-4xl space-y-2 p-8">
+        {/* ── Header ─────────────────────────────────────────────────── */}
+        <SectionTitle>Theme</SectionTitle>
+        <SectionDescription>
+          Apollo ships with two design languages — <strong>Future</strong> (the
+          new design direction) and <strong>Legacy</strong> (the original
+          apollo-core tokens). Each provides dark and light variants activated
+          via CSS classes. Use the toolbar selector above to switch themes, or
+          use the tabs below to explore each design language.
+        </SectionDescription>
+
+        {/* ── Tabs ────────────────────────────────────────────────────── */}
+        <div className="flex gap-1 border-b border-border pb-0">
+          {themeTabs.map((tab) => (
+            <button
+              key={tab}
+              className={`px-4 pb-3 text-sm font-medium transition-colors ${
+                activeTab === tab.toLowerCase()
+                  ? 'border-b-2 border-primary text-foreground'
+                  : 'text-muted-foreground hover:text-foreground'
+              }`}
+              onClick={() => setActiveTab(tab.toLowerCase() as ThemeFamily)}
+            >
+              {tab}
+            </button>
+          ))}
+        </div>
+
+        <div className="pt-6">
+          {activeTab === 'future' ? <FutureTabContent /> : <LegacyTabContent />}
+        </div>
+
+        <Divider />
+
+        {/* ── Adding new themes (shared) ─────────────────────────────── */}
+        <SectionTitle>Adding new themes</SectionTitle>
+        <SectionDescription>
+          To create a new theme, define a new CSS class that sets the same set of
+          CSS custom properties. All components using semantic tokens will
+          automatically adapt to the new palette.
+        </SectionDescription>
+
+        <CodeBlock>{`/* Example: creating a new theme variant */
+
+.my-brand-dark {
+  --color-future-surface:        #0f172a;
+  --color-future-surface-raised: #1e293b;
+  --color-future-foreground:     #f8fafc;
+  --color-future-accent:         #8b5cf6;
+  /* … define all token variables */
+
+  /* shadcn bridge */
+  --color-background: var(--color-future-surface);
+  --color-foreground: var(--color-future-foreground);
+  /* … */
+}`}</CodeBlock>
+      </div>
+    </div>
+  );
+}
+
+export const Default: Story = {
+  render: (_, { globals }) => (
+    <ThemePage globalTheme={globals.futureTheme || 'dark'} />
+  ),
+};
diff --git a/packages/apollo-wind/src/foundation/Future/types.ts b/packages/apollo-wind/src/foundation/Future/types.ts
new file mode 100644
index 000000000..83dc2c976
--- /dev/null
+++ b/packages/apollo-wind/src/foundation/Future/types.ts
@@ -0,0 +1,20 @@
+/**
+ * Apollo Future — Shared Types
+ *
+ * Centralised type definitions used across all Future design-system templates
+ * and components. Import from this file to keep theme-related types consistent.
+ */
+
+// =============================================================================
+// Theme
+// =============================================================================
+
+/**
+ * All supported theme modes for Future templates.
+ *
+ * - `'dark'`         — Future dark theme (default)
+ * - `'light'`        — Future light theme
+ * - `'legacy-dark'`  — Legacy dark theme (backward-compatible)
+ * - `'legacy-light'` — Legacy light theme (backward-compatible)
+ */
+export type FutureTheme = 'dark' | 'light' | 'legacy-dark' | 'legacy-light';
diff --git a/packages/apollo-wind/src/foundation/Future/typography.stories.tsx b/packages/apollo-wind/src/foundation/Future/typography.stories.tsx
new file mode 100644
index 000000000..ba990038f
--- /dev/null
+++ b/packages/apollo-wind/src/foundation/Future/typography.stories.tsx
@@ -0,0 +1,196 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { cn } from '@/lib';
+import {
+  fontFamily,
+  fontSize,
+  fontWeight,
+  lineHeight,
+  letterSpacing,
+} from './typography';
+
+// ============================================================================
+// Meta
+// ============================================================================
+
+const meta = {
+  title: 'Theme/Future/Typography',
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <h2
+      className="mb-6 text-2xl font-bold tracking-tight text-future-foreground"
+      style={{ fontFamily: fontFamily.base }}
+    >
+      {children}
+    </h2>
+  );
+}
+
+function TokenRow({
+  token,
+  value,
+  preview,
+  style,
+}: {
+  token: string;
+  value: string | number;
+  preview?: string;
+  style?: React.CSSProperties;
+}) {
+  return (
+    <div className="flex items-baseline gap-6 border-b border-future-border-subtle py-3">
+      <code className="w-48 shrink-0 text-sm font-medium text-future-accent-foreground-muted">
+        {token}
+      </code>
+      <span className="w-16 shrink-0 text-sm tabular-nums text-future-foreground-muted">
+        {typeof value === 'number' ? `${value}px` : value}
+      </span>
+      {preview && (
+        <span
+          className="text-future-foreground-secondary"
+          style={{ fontFamily: fontFamily.base, ...style }}
+        >
+          {preview}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function Divider() {
+  return <div className="my-10 h-px bg-future-border-subtle" />;
+}
+
+// ============================================================================
+// Story
+// ============================================================================
+
+export const Default: Story = {
+  render: (_, { globals }) => (
+    <div
+      className={cn(
+        globals.futureTheme === 'light' ? 'future-light' : 'future-dark',
+        'min-h-screen w-full bg-future-surface'
+      )}
+      style={{ fontFamily: fontFamily.base }}
+    >
+      <div className="mx-auto max-w-3xl space-y-2 p-8">
+      {/* ------------------------------------------------------------------ */}
+      {/* Font Family */}
+      {/* ------------------------------------------------------------------ */}
+      <SectionTitle>Font Family</SectionTitle>
+      <p className="mb-6 text-sm text-future-foreground-muted">
+        Inter is the primary typeface for all Future UI surfaces.
+      </p>
+
+      <TokenRow
+        token="fontFamily.base"
+        value="Inter"
+        preview="The quick brown fox jumps over the lazy dog"
+        style={{ fontFamily: fontFamily.base }}
+      />
+      <TokenRow
+        token="fontFamily.monospace"
+        value="JetBrains Mono"
+        preview="const x = 42;"
+        style={{ fontFamily: fontFamily.monospace }}
+      />
+      <TokenRow
+        token="fontFamily.numeric"
+        value="Inter"
+        preview="0123456789"
+        style={{
+          fontFamily: fontFamily.numeric,
+          fontVariantNumeric: 'tabular-nums',
+        }}
+      />
+
+      <Divider />
+
+      {/* ------------------------------------------------------------------ */}
+      {/* Font Size */}
+      {/* ------------------------------------------------------------------ */}
+      <SectionTitle>Font Size</SectionTitle>
+
+      {Object.entries(fontSize).map(([key, px]) => (
+        <TokenRow
+          key={key}
+          token={`fontSize.${key}`}
+          value={px}
+          preview="The quick brown fox"
+          style={{ fontSize: `${px}px`, lineHeight: '1.4' }}
+        />
+      ))}
+
+      <Divider />
+
+      {/* ------------------------------------------------------------------ */}
+      {/* Font Weight */}
+      {/* ------------------------------------------------------------------ */}
+      <SectionTitle>Font Weight</SectionTitle>
+
+      {Object.entries(fontWeight).map(([key, weight]) => (
+        <TokenRow
+          key={key}
+          token={`fontWeight.${key}`}
+          value={weight}
+          preview="The quick brown fox jumps"
+          style={{ fontWeight: weight, fontSize: '16px', lineHeight: '1.4' }}
+        />
+      ))}
+
+      <Divider />
+
+      {/* ------------------------------------------------------------------ */}
+      {/* Line Height */}
+      {/* ------------------------------------------------------------------ */}
+      <SectionTitle>Line Height</SectionTitle>
+
+      {Object.entries(lineHeight).map(([key, px]) => (
+        <TokenRow
+          key={key}
+          token={`lineHeight.${key}`}
+          value={px}
+          preview="The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs."
+          style={{
+            fontSize: '14px',
+            lineHeight: `${px}px`,
+            maxWidth: '320px',
+          }}
+        />
+      ))}
+
+      <Divider />
+
+      {/* ------------------------------------------------------------------ */}
+      {/* Letter Spacing */}
+      {/* ------------------------------------------------------------------ */}
+      <SectionTitle>Letter Spacing</SectionTitle>
+
+      {Object.entries(letterSpacing).map(([key, value]) => (
+        <TokenRow
+          key={key}
+          token={`letterSpacing.${key}`}
+          value={value}
+          preview="The quick brown fox jumps over the lazy dog"
+          style={{
+            fontSize: '16px',
+            letterSpacing: value,
+          }}
+        />
+      ))}
+      </div>
+    </div>
+  ),
+};
diff --git a/packages/apollo-wind/src/foundation/Future/typography.ts b/packages/apollo-wind/src/foundation/Future/typography.ts
new file mode 100644
index 000000000..454613676
--- /dev/null
+++ b/packages/apollo-wind/src/foundation/Future/typography.ts
@@ -0,0 +1,113 @@
+/**
+ * Apollo Future — Typography Tokens
+ *
+ * Single source of truth for all typography in the Future design language.
+ * Includes values actively used in both Delegate and Flow templates.
+ * Templates and components should import from this file rather than
+ * hard-coding font values.
+ */
+
+// =============================================================================
+// Font Family
+// =============================================================================
+
+export const fontFamily = {
+  /** Primary sans-serif stack — used for all UI text */
+  base: "'Inter', system-ui, -apple-system, sans-serif",
+  /** Monospace stack — used for code, data, and technical content */
+  monospace: "'JetBrains Mono', 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, monospace",
+  /** Numeric stack — used for tabular numbers and data displays */
+  numeric: "'Inter', system-ui, -apple-system, sans-serif",
+
+  // Legacy alias kept for backwards compatibility with existing templates
+  /** @deprecated Use `fontFamily.base` instead */
+  sans: "'Inter', system-ui, -apple-system, sans-serif",
+} as const;
+
+// =============================================================================
+// Font Size
+// =============================================================================
+
+/**
+ * Font size scale in pixels.
+ *
+ * | Token  | px  | Tailwind       |
+ * |--------|-----|----------------|
+ * | xs     | 12  | text-xs        |
+ * | sm     | 14  | text-sm        |
+ * | md     | 15  | text-[15px]    |
+ * | base   | 16  | text-base      |
+ * | xl     | 20  | text-xl        |
+ * | 4xl    | 40  | text-[40px]    |
+ */
+export const fontSize = {
+  xs: 12,
+  sm: 14,
+  md: 15,
+  base: 16,
+  xl: 20,
+  '4xl': 40,
+} as const;
+
+// =============================================================================
+// Font Weight
+// =============================================================================
+
+/**
+ * Font weight scale.
+ *
+ * | Token     | Value | Tailwind        |
+ * |-----------|-------|-----------------|
+ * | normal    | 400   | font-normal     |
+ * | medium    | 500   | font-medium     |
+ * | semibold  | 600   | font-semibold   |
+ * | bold      | 700   | font-bold       |
+ */
+export const fontWeight = {
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+} as const;
+
+// =============================================================================
+// Line Height
+// =============================================================================
+
+/**
+ * Line height scale in pixels.
+ *
+ * | Token    | px  | Tailwind    |
+ * |----------|-----|-------------|
+ * | snug     | 20  | leading-5   |
+ * | normal   | 24  | leading-6   |
+ * | loose    | 36  | leading-9   |
+ */
+export const lineHeight = {
+  snug: 20,
+  normal: 24,
+  loose: 36,
+} as const;
+
+// =============================================================================
+// Letter Spacing
+// =============================================================================
+
+/**
+ * Letter spacing tokens in pixels.
+ *
+ * | Token    | Value    | Tailwind              | Usage                      |
+ * |----------|---------|-----------------------|----------------------------|
+ * | tight    | -0.8px  | tracking-[-0.8px]     | Large headings (40px)      |
+ * | snug     | -0.6px  | tracking-[-0.6px]     | Panel tab titles           |
+ * | normal   | -0.4px  | tracking-[-0.4px]     | Primary text (16px)        |
+ * | subtle   | -0.35px | tracking-[-0.35px]    | Subtitles, labels (14px)   |
+ * | fine     | -0.3px  | tracking-[-0.3px]     | Small labels (12px)        |
+ */
+export const letterSpacing = {
+  tight: '-0.8px',
+  snug: '-0.6px',
+  normal: '-0.4px',
+  subtle: '-0.35px',
+  fine: '-0.3px',
+} as const;
diff --git a/packages/apollo-wind/src/foundation/colors.stories.tsx b/packages/apollo-wind/src/foundation/Legacy/colors.stories.tsx
similarity index 99%
rename from packages/apollo-wind/src/foundation/colors.stories.tsx
rename to packages/apollo-wind/src/foundation/Legacy/colors.stories.tsx
index f0bda9db1..85ed5eab6 100644
--- a/packages/apollo-wind/src/foundation/colors.stories.tsx
+++ b/packages/apollo-wind/src/foundation/Legacy/colors.stories.tsx
@@ -3,7 +3,7 @@ import { Badge } from '@/components/ui/badge';
 import { Card, CardContent } from '@/components/ui/card';
 
 const meta = {
-  title: 'Theme/Current/Colors',
+  title: 'Theme/Legacy/Colors',
   parameters: {
     layout: 'fullscreen',
   },
diff --git a/packages/apollo-wind/src/foundation/icons.stories.tsx b/packages/apollo-wind/src/foundation/Legacy/icons.stories.tsx
similarity index 99%
rename from packages/apollo-wind/src/foundation/icons.stories.tsx
rename to packages/apollo-wind/src/foundation/Legacy/icons.stories.tsx
index f363ebf4e..c5a80e70a 100644
--- a/packages/apollo-wind/src/foundation/icons.stories.tsx
+++ b/packages/apollo-wind/src/foundation/Legacy/icons.stories.tsx
@@ -281,7 +281,7 @@ const ICON_CATEGORIES = [
 const TOTAL_ICONS = ICON_CATEGORIES.reduce((sum, cat) => sum + cat.icons.length, 0);
 
 const meta = {
-  title: 'Theme/Current/Icons',
+  title: 'Theme/Legacy/Icons',
   parameters: {
     layout: 'fullscreen',
   },
diff --git a/packages/apollo-wind/src/foundation/spacing.stories.tsx b/packages/apollo-wind/src/foundation/Legacy/spacing.stories.tsx
similarity index 99%
rename from packages/apollo-wind/src/foundation/spacing.stories.tsx
rename to packages/apollo-wind/src/foundation/Legacy/spacing.stories.tsx
index c6a034d31..0fb3f0b39 100644
--- a/packages/apollo-wind/src/foundation/spacing.stories.tsx
+++ b/packages/apollo-wind/src/foundation/Legacy/spacing.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Badge } from '@/components/ui/badge';
 
 const meta = {
-  title: 'Theme/Current/Spacing',
+  title: 'Theme/Legacy/Spacing',
   parameters: {
     layout: 'fullscreen',
   },
diff --git a/packages/apollo-wind/src/foundation/typography.stories.tsx b/packages/apollo-wind/src/foundation/Legacy/typography.stories.tsx
similarity index 99%
rename from packages/apollo-wind/src/foundation/typography.stories.tsx
rename to packages/apollo-wind/src/foundation/Legacy/typography.stories.tsx
index 4f8de6d52..c37be3a38 100644
--- a/packages/apollo-wind/src/foundation/typography.stories.tsx
+++ b/packages/apollo-wind/src/foundation/Legacy/typography.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Badge } from '@/components/ui/badge';
 
 const meta = {
-  title: 'Theme/Current/Typography',
+  title: 'Theme/Legacy/Typography',
   parameters: {
     layout: 'fullscreen',
   },
diff --git a/packages/apollo-wind/src/foundation/colors-future.stories.tsx b/packages/apollo-wind/src/foundation/colors-future.stories.tsx
deleted file mode 100644
index a8b987d90..000000000
--- a/packages/apollo-wind/src/foundation/colors-future.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-const meta = {
-  title: 'Theme/Future/Colors',
-  parameters: {
-    layout: 'centered',
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => 'Coming soon',
-};
diff --git a/packages/apollo-wind/src/foundation/icons-future.stories.tsx b/packages/apollo-wind/src/foundation/icons-future.stories.tsx
deleted file mode 100644
index b212ffc47..000000000
--- a/packages/apollo-wind/src/foundation/icons-future.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-const meta = {
-  title: 'Theme/Future/Icons',
-  parameters: {
-    layout: 'centered',
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => 'Coming soon',
-};
diff --git a/packages/apollo-wind/src/foundation/spacing-future.stories.tsx b/packages/apollo-wind/src/foundation/spacing-future.stories.tsx
deleted file mode 100644
index 00d42b352..000000000
--- a/packages/apollo-wind/src/foundation/spacing-future.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-const meta = {
-  title: 'Theme/Future/Spacing',
-  parameters: {
-    layout: 'centered',
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => 'Coming soon',
-};
diff --git a/packages/apollo-wind/src/foundation/typography-future.stories.tsx b/packages/apollo-wind/src/foundation/typography-future.stories.tsx
deleted file mode 100644
index ca91a180e..000000000
--- a/packages/apollo-wind/src/foundation/typography-future.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-const meta = {
-  title: 'Theme/Future/Typography',
-  parameters: {
-    layout: 'centered',
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => 'Coming soon',
-};
diff --git a/packages/apollo-wind/src/getting-started/getting-started.stories.tsx b/packages/apollo-wind/src/getting-started/getting-started.stories.tsx
index 2b398094a..f9aea42bf 100644
--- a/packages/apollo-wind/src/getting-started/getting-started.stories.tsx
+++ b/packages/apollo-wind/src/getting-started/getting-started.stories.tsx
@@ -1,9 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fontFamily } from '@/foundation/Future/typography';
+import { cn } from '@/lib';
 
 const meta = {
   title: 'Introduction/Getting Started',
   parameters: {
-    layout: 'padded',
+    layout: 'fullscreen',
   },
 } satisfies Meta;
 
@@ -11,76 +13,54 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  render: () => (
-    <div style={{ maxWidth: '800px', padding: '2rem', margin: '0 auto' }}>
-      <h1 style={{ fontSize: '2rem', fontWeight: 'bold', marginBottom: '1rem' }}>
-        Apollo v.4 Design System
-      </h1>
-      <p style={{ fontSize: '1rem', lineHeight: '1.75', marginBottom: '1.5rem' }}>
-        Apollo v.4 is UiPath's open-source design system for building consistent user experiences
-        across all UiPath products.
-      </p>
-
-      <hr style={{ margin: '2rem 0', border: 'none', borderTop: '1px solid #e5e7eb' }} />
-
-      <div style={{ marginBottom: '2rem' }}>
-        <strong>Github repository</strong>
-        <br />
-        <a
-          href="https://github.com/UiPath/apollo-ui"
-          target="_blank"
-          rel="noopener noreferrer"
-          style={{ color: '#0066cc', textDecoration: 'underline' }}
+  render: (_, { globals }) => (
+    <div
+      className={cn(
+        globals.futureTheme === 'light' ? 'future-light' : 'future-dark',
+        'min-h-screen w-full bg-future-surface'
+      )}
+      style={{ fontFamily: fontFamily.base }}
+    >
+      <div className="mx-auto max-w-3xl p-8">
+        <h1 className="mb-4 text-[2rem] font-bold text-future-foreground">
+          Apollo v.4 Design System
+        </h1>
+        <p className="mb-6 text-base leading-7 text-future-foreground-muted">
+          Apollo v.4 is UiPath's open-source design system for building consistent user experiences
+          across all UiPath products.
+        </p>
+
+        <div className="my-8 h-px bg-future-border-subtle" />
+
+        <div className="mb-8">
+          <span className="font-semibold text-future-foreground">GitHub repository</span>
+          <br />
+          <a
+            href="https://github.com/UiPath/apollo-ui"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-future-accent-foreground underline"
+          >
+            https://github.com/UiPath/apollo-ui
+          </a>
+        </div>
+
+        <div className="my-8 h-px bg-future-border-subtle" />
+
+        <h2 className="mb-4 mt-8 text-2xl font-bold text-future-foreground">Getting Started</h2>
+
+        <h3 className="mb-3 mt-6 text-xl font-bold text-future-foreground">Prerequisites</h3>
+        <ul className="mb-6 ml-6 list-disc leading-7 text-future-foreground-muted">
+          <li>Node.js &gt;= 22</li>
+          <li>pnpm &gt;= 10</li>
+        </ul>
+
+        <h3 className="mb-3 mt-6 text-xl font-bold text-future-foreground">Installation</h3>
+        <pre
+          className="mb-6 overflow-auto rounded-lg border border-future-border-subtle bg-future-surface-raised p-4 text-sm leading-6 text-future-foreground-secondary"
+          style={{ fontFamily: fontFamily.monospace }}
         >
-          https://github.com/UiPath/apollo-ui
-        </a>
-      </div>
-
-      <hr style={{ margin: '2rem 0', border: 'none', borderTop: '1px solid #e5e7eb' }} />
-
-      <h2
-        style={{ fontSize: '1.5rem', fontWeight: 'bold', marginTop: '2rem', marginBottom: '1rem' }}
-      >
-        Getting Started
-      </h2>
-
-      <h3
-        style={{
-          fontSize: '1.25rem',
-          fontWeight: 'bold',
-          marginTop: '1.5rem',
-          marginBottom: '0.75rem',
-        }}
-      >
-        Prerequisites
-      </h3>
-      <ul style={{ marginLeft: '1.5rem', marginBottom: '1.5rem', lineHeight: '1.75' }}>
-        <li>Node.js &gt;= 22</li>
-        <li>pnpm &gt;= 10</li>
-      </ul>
-
-      <h3
-        style={{
-          fontSize: '1.25rem',
-          fontWeight: 'bold',
-          marginTop: '1.5rem',
-          marginBottom: '0.75rem',
-        }}
-      >
-        Installation
-      </h3>
-      <pre
-        style={{
-          backgroundColor: '#f5f5f5',
-          padding: '1rem',
-          borderRadius: '4px',
-          overflow: 'auto',
-          fontSize: '0.875rem',
-          lineHeight: '1.5',
-          marginBottom: '1.5rem',
-        }}
-      >
-        <code>{`# Install pnpm if you haven't already
+          <code>{`# Install pnpm if you haven't already
 npm install -g pnpm
 
 # Clone the repository
@@ -92,30 +72,14 @@ pnpm install
 
 # Build all packages
 pnpm build`}</code>
-      </pre>
-
-      <h3
-        style={{
-          fontSize: '1.25rem',
-          fontWeight: 'bold',
-          marginTop: '1.5rem',
-          marginBottom: '0.75rem',
-        }}
-      >
-        Development
-      </h3>
-      <pre
-        style={{
-          backgroundColor: '#f5f5f5',
-          padding: '1rem',
-          borderRadius: '4px',
-          overflow: 'auto',
-          fontSize: '0.875rem',
-          lineHeight: '1.5',
-          marginBottom: '1.5rem',
-        }}
-      >
-        <code>{`# Run all packages in development mode
+        </pre>
+
+        <h3 className="mb-3 mt-6 text-xl font-bold text-future-foreground">Development</h3>
+        <pre
+          className="mb-6 overflow-auto rounded-lg border border-future-border-subtle bg-future-surface-raised p-4 text-sm leading-6 text-future-foreground-secondary"
+          style={{ fontFamily: fontFamily.monospace }}
+        >
+          <code>{`# Run all packages in development mode
 pnpm dev
 
 # Run Storybook
@@ -129,35 +93,20 @@ pnpm test
 
 # Run visual regression tests
 pnpm test:visual`}</code>
-      </pre>
-
-      <h3
-        style={{
-          fontSize: '1.25rem',
-          fontWeight: 'bold',
-          marginTop: '1.5rem',
-          marginBottom: '0.75rem',
-        }}
-      >
-        Building
-      </h3>
-      <pre
-        style={{
-          backgroundColor: '#f5f5f5',
-          padding: '1rem',
-          borderRadius: '4px',
-          overflow: 'auto',
-          fontSize: '0.875rem',
-          lineHeight: '1.5',
-          marginBottom: '1.5rem',
-        }}
-      >
-        <code>{`# Build all packages
+        </pre>
+
+        <h3 className="mb-3 mt-6 text-xl font-bold text-future-foreground">Building</h3>
+        <pre
+          className="mb-6 overflow-auto rounded-lg border border-future-border-subtle bg-future-surface-raised p-4 text-sm leading-6 text-future-foreground-secondary"
+          style={{ fontFamily: fontFamily.monospace }}
+        >
+          <code>{`# Build all packages
 pnpm build
 
 # Build Storybook
 pnpm storybook:build`}</code>
-      </pre>
+        </pre>
+      </div>
     </div>
   ),
 };
diff --git a/packages/apollo-wind/src/getting-started/prototyping.stories.tsx b/packages/apollo-wind/src/getting-started/prototyping.stories.tsx
index b8529f217..5bd366979 100644
--- a/packages/apollo-wind/src/getting-started/prototyping.stories.tsx
+++ b/packages/apollo-wind/src/getting-started/prototyping.stories.tsx
@@ -1,51 +1,691 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import * as React from 'react';
+import { fontFamily } from '@/foundation/Future/typography';
+import { cn } from '@/lib';
+
+// ============================================================================
+// Meta
+// ============================================================================
 
 const meta = {
   title: 'Introduction/Prototyping',
   parameters: {
-    layout: 'padded',
+    layout: 'fullscreen',
   },
 } satisfies Meta;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+// ============================================================================
+// Theme helpers
+// ============================================================================
+
+function resolveThemeClass(value: string) {
+  if (value === 'legacy-dark') return 'legacy-dark';
+  if (value === 'legacy-light') return 'legacy-light';
+  if (value === 'light') return 'future-light';
+  return 'future-dark';
+}
+
+// ============================================================================
+// Shared chrome
+// ============================================================================
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return <h2 className="mb-2 text-2xl font-bold tracking-tight text-foreground">{children}</h2>;
+}
+
+function SectionDescription({ children }: { children: React.ReactNode }) {
+  return <p className="mb-6 text-base leading-7 text-muted-foreground">{children}</p>;
+}
+
+function Divider() {
+  return <div className="my-10 h-px bg-border" />;
+}
+
+function InlineCode({ children }: { children: React.ReactNode }) {
+  return (
+    <code className="rounded bg-muted px-1.5 py-0.5 text-sm font-medium text-foreground">
+      {children}
+    </code>
+  );
+}
+
+function InfoCallout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="rounded-lg border border-border bg-muted/50 p-4 text-sm leading-6 text-muted-foreground">
+      {children}
+    </div>
+  );
+}
+
+function CodeBlock({ children, label }: { children: string; label?: string }) {
+  const [copied, setCopied] = React.useState(false);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(children);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="relative overflow-hidden rounded-lg border border-border bg-muted/50">
+      {label && (
+        <div className="flex items-center justify-between border-b border-border px-4 py-2">
+          <span className="text-xs font-medium text-muted-foreground">{label}</span>
+          <button
+            onClick={handleCopy}
+            className="cursor-pointer rounded px-2 py-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
+          >
+            {copied ? 'Copied!' : 'Copy'}
+          </button>
+        </div>
+      )}
+      {!label && (
+        <button
+          onClick={handleCopy}
+          className="absolute top-2 right-2 cursor-pointer rounded px-2 py-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
+        >
+          {copied ? 'Copied!' : 'Copy'}
+        </button>
+      )}
+      <pre className="overflow-x-auto p-4 text-sm leading-6 text-foreground">
+        <code style={{ fontFamily: fontFamily.monospace }}>{children}</code>
+      </pre>
+    </div>
+  );
+}
+
+function StepItem({
+  step,
+  title,
+  children,
+}: {
+  step: number;
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex gap-4">
+      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary text-sm font-semibold text-primary-foreground">
+        {step}
+      </div>
+      <div className="flex-1 pt-0.5">
+        <h4 className="mb-2 text-base font-semibold text-foreground">{title}</h4>
+        <div className="space-y-3 text-sm leading-6 text-muted-foreground">{children}</div>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// Tab: Overview
+// ============================================================================
+
+function OverviewTab() {
+  return (
+    <div className="space-y-8">
+      <div>
+        <SectionTitle>Overview</SectionTitle>
+        <SectionDescription>
+          Prototyping with AI works best when everyone builds on the same foundation. This stack
+          powers the Apollo Wind design system — the same components, tokens, and patterns used in
+          production. Starting here means your prototypes aren't throwaway mockups; they're a step
+          toward real, shippable code.
+        </SectionDescription>
+      </div>
+
+      {/* Tech Stack code window */}
+      <CodeBlock label="Tech Stack">
+        {`UI Framework
+  React 19
+  Tailwind CSS 4
+  TypeScript
+
+Component Library
+  shadcn/ui — pre-built components (Button, Input, Select, Accordion, Dialog, Sheet, Tabs, DataTable, and more)
+  Radix UI — underlying accessibility primitives
+  Lucide React — icon system
+
+Theming
+  CSS Custom Properties — semantic design tokens
+  Two theme families: Future (Dark / Light) and Legacy (Dark / Light)
+  Themes are applied via CSS class scoping — no runtime theme provider needed
+
+Documentation
+  Storybook 10 — browse all components, templates, and token references live`}
+      </CodeBlock>
+
+      <Divider />
+
+      {/* What's NOT in scope */}
+      <div>
+        <h3 className="mb-3 text-lg font-semibold text-foreground">What's not in scope</h3>
+        <SectionDescription>
+          The following are separate systems and not part of this prototyping workflow:
+        </SectionDescription>
+        <ul className="space-y-2 text-sm leading-6 text-muted-foreground">
+          <li>
+            <InlineCode>apollo-react</InlineCode> — Material UI component library
+          </li>
+          <li>
+            <InlineCode>apollo-angular</InlineCode> — Angular Material component library
+          </li>
+          <li>Web Components (ap-chat, ap-data-grid)</li>
+        </ul>
+      </div>
+
+      <Divider />
+
+      <InfoCallout>
+        Build tools, testing frameworks, and release pipelines run behind the scenes and don't
+        affect how you design or prompt AI. You don't need to know them to prototype.
+      </InfoCallout>
+    </div>
+  );
+}
+
+// ============================================================================
+// Tab: Use Cases
+// ============================================================================
+
+function PersonaCard({
+  role,
+  icon,
+  scenario,
+  solution,
+  outcome,
+}: {
+  role: string;
+  icon: string;
+  scenario: string;
+  solution: string;
+  outcome: string;
+}) {
+  return (
+    <div className="rounded-xl border border-border bg-card p-6">
+      <div className="mb-4 flex items-center gap-3">
+        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-lg">
+          {icon}
+        </div>
+        <h4 className="text-base font-semibold text-foreground">{role}</h4>
+      </div>
+
+      <div className="space-y-4">
+        <div>
+          <span className="mb-1 block text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            Scenario
+          </span>
+          <p className="text-sm leading-6 text-foreground">{scenario}</p>
+        </div>
+
+        <div>
+          <span className="mb-1 block text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            Solution
+          </span>
+          <p className="text-sm leading-6 text-muted-foreground">{solution}</p>
+        </div>
+
+        <div>
+          <span className="mb-1 block text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            Outcome
+          </span>
+          <p className="text-sm leading-6 text-muted-foreground">{outcome}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function UseCasesTab() {
+  return (
+    <div className="space-y-8">
+      <div>
+        <SectionTitle>Use Cases</SectionTitle>
+        <SectionDescription>
+          Apollo is built for anyone who needs to create product experiences quickly — whether
+          you're pitching a customer, validating a design, or building a proof of concept. Here's
+          how different roles use the system to turn ideas into working prototypes.
+        </SectionDescription>
+      </div>
+
+      <div className="space-y-6">
+        <PersonaCard
+          role="Product Manager"
+          icon="📋"
+          scenario="A supply chain customer needs to visualize their automation workflows and monitor performance across 50+ processes. They want a dashboard that shows analytics, status, and trends at a glance."
+          solution="Start from the Maestro Dashboard template. Use the DataTable component for process listings with sorting and filtering. Add StatsCards for KPIs (throughput, error rate, uptime) and the Tabs component to organize views by Overview, Analytics, and Reports."
+          outcome="A fully interactive dashboard prototype you can demo to the customer — built in hours, not weeks. Because it uses the same components as production, the engineering team can adopt it directly."
+        />
+
+        <PersonaCard
+          role="Designer"
+          icon="🎨"
+          scenario="A developer is building complex automation workflows and needs to understand how the platform handles scale. They want a Flow demo showing how the system manages 100+ workflow steps with branching logic."
+          solution="Start from the Flow template with the Properties Simple panel. Use FlowNode components to populate the canvas, the FlowCanvasToolbar for mode switching, and the FlowPanel for the left navigation rail. Leverage the PropertiesExpanded panel for detailed node configuration."
+          outcome="A high-fidelity flow editor prototype that demonstrates scale and interaction patterns. Feed the AI context file to Cursor or Claude and iterate on the layout in real time — every component is already themed and accessible."
+        />
+
+        <PersonaCard
+          role="Engineer"
+          icon="🛠️"
+          scenario="A customer needs to consolidate and format complex Excel documents into a presentation-ready format. They want a Delegate-style interface where an AI assistant guides the user through the process step by step."
+          solution="Start from the Delegate template with the sidebar navigation panel. Use the ChatComposer and ChatStepsView custom components for the AI assistant interaction. Add FileUpload for document ingestion, and use Card and DataTable components to preview the transformed output."
+          outcome="A working prototype that shows the end-to-end user experience — from uploading files to reviewing AI-generated output. The prototype runs in Storybook, so stakeholders can interact with it directly in a browser."
+        />
+      </div>
+
+      <Divider />
+
+      <InfoCallout>
+        These are starting points. Every template and component in Apollo is composable — mix and
+        match to fit your specific customer scenario. Browse the Templates section in the Storybook
+        sidebar to see what's available.
+      </InfoCallout>
+    </div>
+  );
+}
+
+// ============================================================================
+// Tab: Use Figma
+// ============================================================================
+
+function UseFigmaTab() {
+  return (
+    <div className="space-y-8">
+      <div>
+        <SectionTitle>Use Figma</SectionTitle>
+        <SectionDescription>
+          Our design team maintains the Apollo design system in Figma — the single source of truth
+          for all design assets, components, and tokens. Access is currently limited to internal
+          team members.
+        </SectionDescription>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// Tab: Use AI
+// ============================================================================
+
+// The AI context file content rendered as a copyable block
+const AI_CONTEXT_PREVIEW = `# Apollo Wind — AI Context
+
+## Stack
+- React 19, TypeScript, Tailwind CSS 4
+- shadcn/ui components (Radix UI primitives)
+- Lucide React icons, Storybook 10
+
+## Import Paths
+import { Button } from '@/components/ui/button';
+import { Search, Plus } from 'lucide-react';
+import { cn } from '@/lib';
+
+## Theming
+Apply theme class to root: future-dark | future-light | legacy-dark | legacy-light
+Use semantic tokens: bg-future-surface, text-future-foreground, border-future-border
+DO NOT use raw colors (bg-zinc-900, bg-white, etc.)
+
+## Available Components
+Accordion, Alert, AlertDialog, Avatar, Badge, Breadcrumb, Button, Calendar,
+Card, Checkbox, Collapsible, Combobox, Command, ContextMenu, DataTable,
+DatePicker, Dialog, Drawer, DropdownMenu, EmptyState, FileUpload, HoverCard,
+Input, Label, Menubar, MultiSelect, NavigationMenu, Pagination, Popover,
+Progress, RadioGroup, Resizable, ScrollArea, Search, Select, Separator,
+Sheet, Skeleton, Slider, Spinner, StatsCard, Stepper, Switch, Table, Tabs,
+Textarea, Toggle, ToggleGroup, Tooltip, ViewportGuard`;
+
+function UseAITab() {
+  return (
+    <div className="space-y-8">
+      <div>
+        <SectionTitle>Use AI</SectionTitle>
+        <SectionDescription>
+          Two approaches are available for AI-assisted prototyping. Use one or both depending on
+          your workflow — the static context file works everywhere, while the MCP server provides a
+          live connection for code editors.
+        </SectionDescription>
+      </div>
+
+      {/* Approach 1: AI Context File */}
+      <div>
+        <h3 className="mb-3 text-lg font-semibold text-foreground">Approach 1: AI Context File</h3>
+        <SectionDescription>
+          A portable markdown file containing the full Apollo design system reference — stack,
+          components, tokens, patterns, and rules. Copy it into any AI tool to get consistent,
+          design-system-aligned output.
+        </SectionDescription>
+
+        <div className="space-y-4">
+          <StepItem step={1} title="Grab the context file">
+            <p>
+              The file lives at <InlineCode>packages/apollo-wind/apollo-ai-context.md</InlineCode>{' '}
+              in the repository. It contains everything an AI needs: the stack, every available
+              component, token naming conventions, import patterns, and explicit rules about what to
+              use and what to avoid.
+            </p>
+          </StepItem>
+
+          <StepItem step={2} title="Feed it to your AI tool">
+            <p>Use it as context in any of these workflows:</p>
+            <ul className="mt-2 list-disc space-y-1 pl-5">
+              <li>
+                <span className="font-medium text-foreground">Cursor</span> — Add it as a project
+                rule in <InlineCode>.cursor/rules/</InlineCode>
+              </li>
+              <li>
+                <span className="font-medium text-foreground">Claude / ChatGPT</span> — Paste or
+                attach the file at the start of your conversation
+              </li>
+              <li>
+                <span className="font-medium text-foreground">Any AI coding tool</span> — Include it
+                as system context or a reference file
+              </li>
+            </ul>
+          </StepItem>
+
+          <StepItem step={3} title="Start prompting">
+            <p>
+              The AI will now use Apollo components and tokens instead of generating generic code.
+              Example prompt:
+            </p>
+            <CodeBlock>
+              {`Create a settings page with a sidebar navigation and a form section.
+Use a Card for each settings group with Input and Select fields.
+Include a header with the MaestroHeader component.
+Use the future-dark theme.`}
+            </CodeBlock>
+          </StepItem>
+        </div>
+      </div>
+
+      <Divider />
+
+      {/* Preview */}
+      <div>
+        <h3 className="mb-3 text-lg font-semibold text-foreground">Context file preview</h3>
+        <SectionDescription>
+          Here's a condensed preview. The full file includes detailed component tables, custom
+          component references, and a complete code example.
+        </SectionDescription>
+        <CodeBlock label="apollo-ai-context.md (preview)">{AI_CONTEXT_PREVIEW}</CodeBlock>
+      </div>
+
+      <Divider />
+
+      {/* Approach 2: Storybook MCP */}
+      <div>
+        <h3 className="mb-3 text-lg font-semibold text-foreground">
+          Approach 2: Storybook MCP Server
+        </h3>
+        <SectionDescription>
+          For code-editor workflows (Cursor, Claude Code, VS Code), the Storybook MCP server gives
+          AI agents a live, structured API to query component metadata directly — no copy-pasting
+          needed. The agent gets validated props, usage examples, and component documentation
+          automatically.
+        </SectionDescription>
+
+        <div className="space-y-4">
+          <StepItem step={1} title="Start Storybook">
+            <CodeBlock>
+              {`cd packages/apollo-wind
+pnpm storybook`}
+            </CodeBlock>
+            <p>
+              The MCP endpoint is available at <InlineCode>http://localhost:6006/mcp</InlineCode>{' '}
+              when Storybook is running.
+            </p>
+          </StepItem>
+
+          <StepItem step={2} title="Connect your AI tool">
+            <p>
+              <span className="font-medium text-foreground">Cursor</span> — Add this to your
+              project's <InlineCode>.cursor/mcp.json</InlineCode>:
+            </p>
+            <CodeBlock label=".cursor/mcp.json">
+              {`{
+  "mcpServers": {
+    "apollo-storybook": {
+      "url": "http://localhost:6006/mcp"
+    }
+  }
+}`}
+            </CodeBlock>
+
+            <p className="mt-3">
+              <span className="font-medium text-foreground">Claude Code</span> — Run this command:
+            </p>
+            <CodeBlock>
+              {`claude mcp add apollo-storybook --transport http http://localhost:6006/mcp --scope project`}
+            </CodeBlock>
+          </StepItem>
+
+          <StepItem step={3} title="Verify the connection">
+            <p>
+              In Cursor, check the MCP panel in settings. In Claude Code, run{' '}
+              <InlineCode>/mcp list</InlineCode> to confirm the server is connected. The AI agent
+              will now automatically query Apollo's component APIs when generating UI code.
+            </p>
+          </StepItem>
+        </div>
+      </div>
+
+      <Divider />
+
+      <InfoCallout>
+        <span className="font-medium text-foreground">Which approach should I use?</span> If you're
+        a designer working in ChatGPT or Claude, use the context file (Approach 1). If you're in a
+        code editor like Cursor, use both — the MCP server for live component data plus the context
+        file for token and theming rules.
+      </InfoCallout>
+    </div>
+  );
+}
+
+// ============================================================================
+// Tab: Best Practices
+// ============================================================================
+
+function BestPracticesTab() {
+  return (
+    <div className="space-y-8">
+      <div>
+        <SectionTitle>Best Practices</SectionTitle>
+        <SectionDescription>
+          Guidelines for getting the most out of AI-assisted prototyping with Apollo.
+        </SectionDescription>
+      </div>
+
+      {/* Setting up */}
+      <div>
+        <h3 className="mb-3 text-lg font-semibold text-foreground">Setting Up a Prototype</h3>
+        <ul className="space-y-3 text-sm leading-6 text-muted-foreground">
+          <li>
+            <span className="font-medium text-foreground">Start from an existing template.</span>{' '}
+            The Maestro, Admin, Delegate, and Flow templates provide production-ready layouts. Fork
+            one instead of building from scratch.
+          </li>
+          <li>
+            <span className="font-medium text-foreground">Always include the AI context.</span>{' '}
+            Whether you use the markdown file or MCP, always give the AI context about Apollo before
+            prompting. Without it, you'll get generic React output that doesn't match the design
+            system.
+          </li>
+          <li>
+            <span className="font-medium text-foreground">Set the theme class first.</span> Apply{' '}
+            <InlineCode>future-dark</InlineCode> or <InlineCode>future-light</InlineCode> to your
+            root element before adding any content. This ensures all tokens resolve correctly from
+            the start.
+          </li>
+        </ul>
+      </div>
+
+      <Divider />
+
+      {/* Prompting */}
+      <div>
+        <h3 className="mb-3 text-lg font-semibold text-foreground">Writing Effective Prompts</h3>
+        <ul className="space-y-3 text-sm leading-6 text-muted-foreground">
+          <li>
+            <span className="font-medium text-foreground">Be specific about components.</span> Say
+            "use a shadcn DataTable with sorting and pagination" instead of "add a table." Name the
+            exact components you want.
+          </li>
+          <li>
+            <span className="font-medium text-foreground">Reference tokens, not colors.</span> Say
+            "use bg-future-surface-raised for the card background" instead of "make the background
+            dark gray." This ensures theme consistency.
+          </li>
+          <li>
+            <span className="font-medium text-foreground">Iterate in small steps.</span> Build the
+            layout first, then add interactions, then refine styling. Large prompts with many
+            requirements produce worse results than focused, sequential ones.
+          </li>
+          <li>
+            <span className="font-medium text-foreground">Include layout context.</span> Mention
+            "fullscreen layout", "sidebar + main content", or "tabbed interface" so the AI
+            structures the page correctly from the start.
+          </li>
+        </ul>
+      </div>
+
+      <Divider />
+
+      {/* Common mistakes */}
+      <div>
+        <h3 className="mb-3 text-lg font-semibold text-foreground">Common Mistakes to Avoid</h3>
+        <ul className="space-y-3 text-sm leading-6 text-muted-foreground">
+          <li>
+            <span className="font-medium text-foreground">Don't use raw Tailwind colors.</span>{' '}
+            Avoid <InlineCode>bg-zinc-900</InlineCode>, <InlineCode>text-gray-400</InlineCode>, etc.
+            Always use semantic tokens (<InlineCode>bg-future-surface</InlineCode>,{' '}
+            <InlineCode>text-future-foreground-muted</InlineCode>).
+          </li>
+          <li>
+            <span className="font-medium text-foreground">Don't install extra UI libraries.</span>{' '}
+            Everything you need is already available in apollo-wind. Adding Material UI, Chakra, or
+            other libraries will conflict with the design system.
+          </li>
+          <li>
+            <span className="font-medium text-foreground">Don't skip the theme wrapper.</span>{' '}
+            Components using <InlineCode>future-*</InlineCode> tokens won't render correctly without
+            a theme class on a parent element.
+          </li>
+          <li>
+            <span className="font-medium text-foreground">Don't hardcode light/dark values.</span>{' '}
+            The theme system handles this automatically. If you're writing{' '}
+            <InlineCode>bg-white</InlineCode> or <InlineCode>bg-black</InlineCode>, you're bypassing
+            the design system.
+          </li>
+        </ul>
+      </div>
+
+      <Divider />
+
+      {/* Review checklist */}
+      <div>
+        <h3 className="mb-3 text-lg font-semibold text-foreground">Prototype Review Checklist</h3>
+        <SectionDescription>Before sharing a prototype, verify these items:</SectionDescription>
+        <ul className="space-y-2 text-sm leading-6 text-muted-foreground">
+          <li className="flex items-start gap-2">
+            <span className="mt-0.5 text-muted-foreground">&#9744;</span>
+            Theme class applied to root element
+          </li>
+          <li className="flex items-start gap-2">
+            <span className="mt-0.5 text-muted-foreground">&#9744;</span>
+            All colors use semantic tokens (no raw hex or Tailwind palette)
+          </li>
+          <li className="flex items-start gap-2">
+            <span className="mt-0.5 text-muted-foreground">&#9744;</span>
+            Components imported from <InlineCode>@/components/ui/</InlineCode>
+          </li>
+          <li className="flex items-start gap-2">
+            <span className="mt-0.5 text-muted-foreground">&#9744;</span>
+            Icons from <InlineCode>lucide-react</InlineCode> only
+          </li>
+          <li className="flex items-start gap-2">
+            <span className="mt-0.5 text-muted-foreground">&#9744;</span>
+            Works in both Future Dark and Future Light themes
+          </li>
+          <li className="flex items-start gap-2">
+            <span className="mt-0.5 text-muted-foreground">&#9744;</span>
+            Uses Inter font family via <InlineCode>fontFamily.base</InlineCode>
+          </li>
+          <li className="flex items-start gap-2">
+            <span className="mt-0.5 text-muted-foreground">&#9744;</span>
+            Responsive layout tested at common breakpoints
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// Prototyping Page
+// ============================================================================
+
+const tabs = ['Overview', 'Use Cases', 'Use Figma', 'Use AI', 'Best Practices'] as const;
+type TabId = (typeof tabs)[number];
+
+function PrototypingPage({ globalTheme }: { globalTheme: string }) {
+  const [activeTab, setActiveTab] = React.useState<TabId>('Overview');
+
+  const activeThemeClass = resolveThemeClass(globalTheme);
+
+  return (
+    <div
+      className={cn(activeThemeClass, 'min-h-screen w-full bg-background text-foreground')}
+      style={{ fontFamily: fontFamily.base }}
+    >
+      <div className="mx-auto max-w-3xl space-y-2 p-8">
+        {/* Header */}
+        <h1 className="text-[2rem] font-bold tracking-tight text-foreground">
+          Prototyping with Apollo
+        </h1>
+        <p className="text-base leading-7 text-muted-foreground">
+          Rapid prototyping is central to our approach, enabling high-quality UX, consistency, and
+          efficiency. This section explores how Design and AI work together to help teams align and
+          deliver consistent outcomes.
+        </p>
+
+        {/* Tabs */}
+        <div className="flex gap-1 border-b border-border pt-4 pb-0">
+          {tabs.map((tab) => (
+            <button
+              key={tab}
+              className={cn(
+                'cursor-pointer px-4 pb-3 text-sm font-medium transition-colors',
+                activeTab === tab
+                  ? 'border-b-2 border-primary text-foreground'
+                  : 'text-muted-foreground hover:text-foreground'
+              )}
+              onClick={() => setActiveTab(tab)}
+            >
+              {tab}
+            </button>
+          ))}
+        </div>
+
+        {/* Tab content */}
+        <div className="pt-6">
+          {activeTab === 'Overview' && <OverviewTab />}
+          {activeTab === 'Use Cases' && <UseCasesTab />}
+          {activeTab === 'Use Figma' && <UseFigmaTab />}
+          {activeTab === 'Use AI' && <UseAITab />}
+          {activeTab === 'Best Practices' && <BestPracticesTab />}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// Story
+// ============================================================================
+
 export const Default: Story = {
-  render: () => (
-    <div style={{ maxWidth: '800px', padding: '2rem', margin: '0 auto' }}>
-      <h1 style={{ fontSize: '2rem', fontWeight: 'bold', marginBottom: '1rem' }}>
-        Prototyping with Apollo
-      </h1>
-      <p style={{ fontSize: '1rem', lineHeight: '1.75', marginBottom: '1rem' }}>
-        Rapid prototyping is central to our approach, enabling high-quality UX, consistency, and
-        efficiency. This section explores how Design and AI work together to help teams align and
-        deliver consistent outcomes.
-      </p>
-
-      <hr style={{ margin: '2rem 0', border: 'none', borderTop: '1px solid #e5e7eb' }} />
-
-      <section style={{ marginBottom: '2rem' }}>
-        <h2 style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '1rem' }}>Use Figma</h2>
-        <p style={{ fontSize: '1rem', lineHeight: '1.75' }}>Redacted</p>
-      </section>
-
-      <hr style={{ margin: '2rem 0', border: 'none', borderTop: '1px solid #e5e7eb' }} />
-
-      <section style={{ marginBottom: '2rem' }}>
-        <h2 style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '1rem' }}>Use AI</h2>
-        <p style={{ fontSize: '1rem', lineHeight: '1.75' }}>Coming soon</p>
-      </section>
-
-      <hr style={{ margin: '2rem 0', border: 'none', borderTop: '1px solid #e5e7eb' }} />
-
-      <section style={{ marginBottom: '2rem' }}>
-        <h2 style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '1rem' }}>
-          Best practices
-        </h2>
-        <p style={{ fontSize: '1rem', lineHeight: '1.75' }}>Coming soon</p>
-      </section>
-
-      <hr style={{ margin: '2rem 0', border: 'none', borderTop: '1px solid #e5e7eb' }} />
-    </div>
-  ),
+  render: (_, { globals }) => <PrototypingPage globalTheme={globals.futureTheme || 'dark'} />,
 };
diff --git a/packages/apollo-wind/src/styles/tailwind.css b/packages/apollo-wind/src/styles/tailwind.css
index cb1e207db..97b97c5f7 100644
--- a/packages/apollo-wind/src/styles/tailwind.css
+++ b/packages/apollo-wind/src/styles/tailwind.css
@@ -9,5 +9,7 @@
  */
 
 @import "./tailwind.consumer.css";
+@import "../foundation/Future/future-theme.css";
+@import "../foundation/Future/legacy-theme.css";
 
 @source "../**/*.{js,jsx,ts,tsx}";
\ No newline at end of file
diff --git a/packages/apollo-wind/src/templates/Admin/admin.stories.tsx b/packages/apollo-wind/src/templates/Admin/admin.stories.tsx
new file mode 100644
index 000000000..613ee84a5
--- /dev/null
+++ b/packages/apollo-wind/src/templates/Admin/admin.stories.tsx
@@ -0,0 +1,1764 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { ColumnDef } from '@tanstack/react-table';
+import {
+  ChevronsLeft,
+  ChevronsRight,
+  Code,
+  Download,
+  Filter,
+  Globe,
+  HelpCircle,
+  MoreHorizontal,
+  Plus,
+  RefreshCw,
+  Search,
+  Upload,
+  Users,
+} from 'lucide-react';
+import * as React from 'react';
+import { MaestroHeader } from '@/components/custom/global-header';
+import { Badge } from '@/components/ui/badge';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
+import {
+  DataTable,
+  DataTableColumnHeader,
+  DataTableSelectColumn,
+} from '@/components/ui/data-table';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from '@/components/ui/pagination';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { ViewportGuard } from '@/components/ui/viewport-guard';
+import { fontFamily } from '@/foundation/Future/typography';
+import { cn } from '@/lib';
+
+// ============================================================================
+// Layout primitives (themed with Future tokens)
+// ============================================================================
+
+function AdminLayout({
+  className,
+  theme = 'dark',
+  children,
+}: {
+  className?: string;
+  theme?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <ViewportGuard
+      minWidth={769}
+      message="This view is not available at this screen size. Please use a larger viewport."
+    >
+      <div
+        className={cn(
+          theme === 'legacy-dark'
+            ? 'legacy-dark'
+            : theme === 'legacy-light'
+              ? 'legacy-light'
+              : theme === 'light'
+                ? 'future-light'
+                : 'future-dark',
+          'flex h-screen w-full flex-col overflow-hidden bg-future-surface text-foreground',
+          className
+        )}
+        style={{ fontFamily: fontFamily.base }}
+      >
+        {children}
+      </div>
+    </ViewportGuard>
+  );
+}
+
+function AdminContent({ children }: { children: React.ReactNode }) {
+  return <div className="flex flex-1 overflow-hidden">{children}</div>;
+}
+
+function AdminSidebar({ children, width = 260 }: { children: React.ReactNode; width?: number }) {
+  return (
+    <div
+      className="flex flex-col border-r border-future-border-subtle bg-future-surface"
+      style={{ width }}
+    >
+      {children}
+    </div>
+  );
+}
+
+function AdminSidebarHeader({
+  title,
+  onSearch,
+  onAdd,
+}: {
+  title: string;
+  onSearch?: () => void;
+  onAdd?: () => void;
+}) {
+  return (
+    <div className="flex items-center justify-between border-b border-future-border-subtle px-4 py-3">
+      <span className="text-sm font-medium text-future-foreground">{title}</span>
+      <div className="flex items-center gap-1">
+        {onSearch && (
+          <button
+            className="flex h-7 w-7 items-center justify-center rounded-md text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground"
+            onClick={onSearch}
+          >
+            <Search className="h-4 w-4" />
+          </button>
+        )}
+        {onAdd && (
+          <button
+            className="flex h-7 w-7 items-center justify-center rounded-md text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground"
+            onClick={onAdd}
+          >
+            <Plus className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface AdminNavItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  badge?: React.ReactNode;
+}
+
+function AdminSidebarNav({
+  items,
+  selectedId,
+  onSelect,
+}: {
+  items: AdminNavItem[];
+  selectedId?: string;
+  onSelect?: (id: string) => void;
+}) {
+  return (
+    <ScrollArea className="flex-1">
+      <nav className="flex flex-col gap-0.5 p-2">
+        {items.map((item) => (
+          <button
+            key={item.id}
+            className={cn(
+              'flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors',
+              selectedId === item.id
+                ? 'bg-future-accent-subtle text-future-accent-foreground'
+                : 'text-future-foreground-muted hover:bg-future-surface-hover hover:text-future-foreground'
+            )}
+            onClick={() => onSelect?.(item.id)}
+          >
+            {item.icon}
+            <span className="flex-1 truncate text-left">{item.label}</span>
+            {item.badge}
+          </button>
+        ))}
+      </nav>
+    </ScrollArea>
+  );
+}
+
+function AdminMain({ children }: { children: React.ReactNode }) {
+  return <div className="flex flex-1 flex-col overflow-hidden">{children}</div>;
+}
+
+interface BreadcrumbItemType {
+  label: string;
+  href?: string;
+}
+
+function AdminBreadcrumb({ items }: { items: BreadcrumbItemType[] }) {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        {items.map((item, index) => (
+          <React.Fragment key={item.label}>
+            {index > 0 && <BreadcrumbSeparator />}
+            <BreadcrumbItem>
+              {index === items.length - 1 ? (
+                <BreadcrumbPage className="text-future-foreground">{item.label}</BreadcrumbPage>
+              ) : (
+                <BreadcrumbLink
+                  href={item.href || '#'}
+                  className="text-future-foreground-muted hover:text-future-foreground"
+                >
+                  {item.label}
+                </BreadcrumbLink>
+              )}
+            </BreadcrumbItem>
+          </React.Fragment>
+        ))}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}
+
+function AdminPageHeader({
+  title,
+  breadcrumb,
+  actions,
+  tabs,
+  activeTab,
+  onTabChange,
+}: {
+  title: string;
+  breadcrumb?: BreadcrumbItemType[];
+  actions?: React.ReactNode;
+  tabs?: { value: string; label: string }[];
+  activeTab?: string;
+  onTabChange?: (value: string) => void;
+}) {
+  return (
+    <div className="border-b border-future-border-subtle px-6 py-4">
+      {breadcrumb && (
+        <div className="mb-2">
+          <AdminBreadcrumb items={breadcrumb} />
+        </div>
+      )}
+      <div className="flex items-center justify-between">
+        <h1 className="text-xl font-semibold text-future-foreground">{title}</h1>
+        {actions && <div className="flex items-center gap-2">{actions}</div>}
+      </div>
+      {tabs && (
+        <div className="mt-4 flex gap-1">
+          {tabs.map((tab) => (
+            <button
+              key={tab.value}
+              className={`px-4 pb-2 pt-1 text-sm font-medium transition-colors ${
+                activeTab === tab.value
+                  ? 'border-b-2 border-future-accent text-future-foreground'
+                  : 'text-future-foreground-muted hover:text-future-foreground'
+              }`}
+              onClick={() => onTabChange?.(tab.value)}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function AdminToolbar({
+  children,
+  actions,
+}: {
+  children?: React.ReactNode;
+  actions?: React.ReactNode;
+}) {
+  return (
+    <div className="flex items-center justify-between border-b border-future-border-subtle px-6 py-3">
+      <div className="flex items-center gap-3">{children}</div>
+      <div className="flex items-center gap-2">{actions}</div>
+    </div>
+  );
+}
+
+function AdminFilter({
+  label,
+  value,
+  options,
+  onValueChange,
+}: {
+  label: string;
+  value: string;
+  options: { value: string; label: string }[];
+  onValueChange?: (value: string) => void;
+}) {
+  return (
+    <div className="flex items-center gap-1.5 text-sm">
+      <span className="text-future-foreground-muted">{label}:</span>
+      <Select value={value} onValueChange={onValueChange}>
+        <SelectTrigger className="h-7 w-auto gap-1 border-0 bg-transparent px-1 font-medium text-future-foreground shadow-none">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent className="border-future-border bg-future-surface-overlay text-future-foreground">
+          {options.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}
+
+function AdminPagination({
+  total,
+  page,
+  pageSize,
+  onPageChange,
+  onPageSizeChange,
+}: {
+  total: number;
+  page: number;
+  pageSize: number;
+  onPageChange?: (page: number) => void;
+  onPageSizeChange?: (size: number) => void;
+}) {
+  const totalPages = Math.ceil(total / pageSize);
+  const start = (page - 1) * pageSize + 1;
+  const end = Math.min(page * pageSize, total);
+
+  const getPageNumbers = () => {
+    const pages: number[] = [];
+    const delta = 1;
+    for (let i = 1; i <= totalPages; i++) {
+      if (i === 1 || i === totalPages || (i >= page - delta && i <= page + delta)) {
+        pages.push(i);
+      }
+    }
+    return pages;
+  };
+
+  const pageNumbers = getPageNumbers();
+
+  return (
+    <div className="flex items-center justify-between border-t border-future-border-subtle px-6 py-3">
+      <span className="text-sm text-future-foreground-muted">
+        {start} - {end} / {total}
+      </span>
+      <div className="flex items-center gap-4">
+        <Pagination>
+          <PaginationContent>
+            <PaginationItem>
+              <button
+                className="flex h-8 w-8 items-center justify-center rounded-md text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground disabled:opacity-50"
+                disabled={page === 1}
+                onClick={() => onPageChange?.(1)}
+              >
+                <ChevronsLeft className="h-4 w-4" />
+              </button>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationPrevious
+                onClick={() => page > 1 && onPageChange?.(page - 1)}
+                className={cn(
+                  'text-future-foreground-muted hover:bg-future-surface-hover hover:text-future-foreground',
+                  page === 1 && 'pointer-events-none opacity-50'
+                )}
+              />
+            </PaginationItem>
+
+            {pageNumbers.map((pageNum, index) => {
+              const prevPage = pageNumbers[index - 1];
+              const showEllipsis = prevPage && pageNum - prevPage > 1;
+              return (
+                <React.Fragment key={pageNum}>
+                  {showEllipsis && (
+                    <PaginationItem>
+                      <PaginationEllipsis className="text-future-foreground-muted" />
+                    </PaginationItem>
+                  )}
+                  <PaginationItem>
+                    <PaginationLink
+                      onClick={() => onPageChange?.(pageNum)}
+                      isActive={page === pageNum}
+                      className={cn(
+                        page === pageNum
+                          ? 'bg-future-accent text-future-foreground-on-accent'
+                          : 'text-future-foreground-muted hover:bg-future-surface-hover hover:text-future-foreground'
+                      )}
+                    >
+                      {pageNum}
+                    </PaginationLink>
+                  </PaginationItem>
+                </React.Fragment>
+              );
+            })}
+
+            <PaginationItem>
+              <PaginationNext
+                onClick={() => page < totalPages && onPageChange?.(page + 1)}
+                className={cn(
+                  'text-future-foreground-muted hover:bg-future-surface-hover hover:text-future-foreground',
+                  page === totalPages && 'pointer-events-none opacity-50'
+                )}
+              />
+            </PaginationItem>
+            <PaginationItem>
+              <button
+                className="flex h-8 w-8 items-center justify-center rounded-md text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground disabled:opacity-50"
+                disabled={page === totalPages}
+                onClick={() => onPageChange?.(totalPages)}
+              >
+                <ChevronsRight className="h-4 w-4" />
+              </button>
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+
+        {onPageSizeChange && (
+          <div className="flex items-center gap-2 text-sm">
+            <span className="text-future-foreground-muted">Items</span>
+            <Select value={String(pageSize)} onValueChange={(v) => onPageSizeChange(Number(v))}>
+              <SelectTrigger className="h-8 w-16 border-future-border bg-future-surface-overlay text-future-foreground">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent className="border-future-border bg-future-surface-overlay text-future-foreground">
+                <SelectItem value="10">10</SelectItem>
+                <SelectItem value="25">25</SelectItem>
+                <SelectItem value="50">50</SelectItem>
+                <SelectItem value="100">100</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// Storybook meta
+// ============================================================================
+
+const meta = {
+  title: 'Templates/Admin',
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Admin menu nav (slide-out drawer)
+// ============================================================================
+
+function AdminMenuNav() {
+  const menuItems = [
+    { label: 'Manage Access', icon: <Users className="h-4 w-4 shrink-0" /> },
+    { label: 'Data Management', icon: <Globe className="h-4 w-4 shrink-0" /> },
+    { label: 'Settings', icon: <HelpCircle className="h-4 w-4 shrink-0" /> },
+    { label: 'Audit Logs', icon: <RefreshCw className="h-4 w-4 shrink-0" /> },
+    { label: 'Integrations', icon: <Code className="h-4 w-4 shrink-0" /> },
+  ];
+
+  return (
+    <nav className="flex flex-1 flex-col overflow-y-auto px-2 pt-2">
+      <div className="flex flex-col gap-1">
+        {menuItems.map((item, i) => (
+          <button
+            key={i}
+            className="flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground"
+          >
+            {item.icon}
+            <span className="truncate">{item.label}</span>
+          </button>
+        ))}
+      </div>
+    </nav>
+  );
+}
+
+// ============================================================================
+// Sample data
+// ============================================================================
+
+const tenants = [
+  { id: '1', name: 'Maestro', type: 'tenant' },
+  { id: '2', name: 'Staging', type: 'tenant' },
+  { id: '3', name: 'ao', type: 'tenant' },
+  { id: '4', name: 'Development', type: 'service', badge: 'Canary Environment' },
+  { id: '5', name: 'DefaultTenant', type: 'tenant' },
+  { id: '6', name: 'optimize', type: 'service' },
+];
+
+type UserRow = {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  type: 'user' | 'group';
+};
+
+const users: UserRow[] = [
+  { id: '1', name: 'Finance-test', email: '', role: 'Test-role-viewer', type: 'group' },
+  {
+    id: '2',
+    name: 'John Doe',
+    email: 'john.doe@example.com',
+    role: 'Tenant Administrator',
+    type: 'user',
+  },
+  { id: '3', name: 'Engineering', email: '', role: 'Automation Developer', type: 'group' },
+  {
+    id: '4',
+    name: 'Jane Smith',
+    email: 'jane.smith@example.com',
+    role: 'Tenant Administrator',
+    type: 'user',
+  },
+  { id: '5', name: 'QA Team', email: '', role: 'Test-role-viewer', type: 'group' },
+  {
+    id: '6',
+    name: 'Carlos Rivera',
+    email: 'carlos.rivera@example.com',
+    role: 'Automation Developer',
+    type: 'user',
+  },
+  { id: '7', name: 'DevOps', email: '', role: 'Tenant Administrator', type: 'group' },
+  {
+    id: '8',
+    name: 'Aisha Patel',
+    email: 'aisha.patel@example.com',
+    role: 'Automation User',
+    type: 'user',
+  },
+  { id: '9', name: 'Marketing', email: '', role: 'Viewer', type: 'group' },
+  {
+    id: '10',
+    name: 'Liam Chen',
+    email: 'liam.chen@example.com',
+    role: 'Automation Developer',
+    type: 'user',
+  },
+  { id: '11', name: 'Support Tier-1', email: '', role: 'Viewer', type: 'group' },
+  {
+    id: '12',
+    name: 'Sofia Müller',
+    email: 'sofia.muller@example.com',
+    role: 'Tenant Administrator',
+    type: 'user',
+  },
+  { id: '13', name: 'Data Science', email: '', role: 'Automation Developer', type: 'group' },
+  {
+    id: '14',
+    name: 'Raj Kapoor',
+    email: 'raj.kapoor@example.com',
+    role: 'Automation User',
+    type: 'user',
+  },
+  { id: '15', name: 'HR Operations', email: '', role: 'Viewer', type: 'group' },
+  {
+    id: '16',
+    name: 'Emily Watson',
+    email: 'emily.watson@example.com',
+    role: 'Tenant Administrator',
+    type: 'user',
+  },
+  { id: '17', name: 'Platform Team', email: '', role: 'Automation Developer', type: 'group' },
+  {
+    id: '18',
+    name: 'Tomás García',
+    email: 'tomas.garcia@example.com',
+    role: 'Automation User',
+    type: 'user',
+  },
+  { id: '19', name: 'Security', email: '', role: 'Tenant Administrator', type: 'group' },
+  {
+    id: '20',
+    name: 'Yuki Tanaka',
+    email: 'yuki.tanaka@example.com',
+    role: 'Automation Developer',
+    type: 'user',
+  },
+  { id: '21', name: 'Sales Ops', email: '', role: 'Viewer', type: 'group' },
+  {
+    id: '22',
+    name: 'Alex Novak',
+    email: 'alex.novak@example.com',
+    role: 'Automation User',
+    type: 'user',
+  },
+  { id: '23', name: 'Compliance', email: '', role: 'Test-role-viewer', type: 'group' },
+  {
+    id: '24',
+    name: 'Priya Sharma',
+    email: 'priya.sharma@example.com',
+    role: 'Tenant Administrator',
+    type: 'user',
+  },
+  { id: '25', name: 'Product Team', email: '', role: 'Automation Developer', type: 'group' },
+  {
+    id: '26',
+    name: 'Marcus Johnson',
+    email: 'marcus.johnson@example.com',
+    role: 'Automation User',
+    type: 'user',
+  },
+  { id: '27', name: 'IT Infrastructure', email: '', role: 'Tenant Administrator', type: 'group' },
+  { id: '28', name: 'Hannah Lee', email: 'hannah.lee@example.com', role: 'Viewer', type: 'user' },
+  { id: '29', name: 'Customer Success', email: '', role: 'Viewer', type: 'group' },
+  {
+    id: '30',
+    name: 'David Kim',
+    email: 'david.kim@example.com',
+    role: 'Automation Developer',
+    type: 'user',
+  },
+  { id: '31', name: 'Analytics', email: '', role: 'Automation User', type: 'group' },
+  {
+    id: '32',
+    name: 'Olivia Brown',
+    email: 'olivia.brown@example.com',
+    role: 'Tenant Administrator',
+    type: 'user',
+  },
+  { id: '33', name: 'Legal', email: '', role: 'Viewer', type: 'group' },
+  {
+    id: '34',
+    name: 'Nathan Wright',
+    email: 'nathan.wright@example.com',
+    role: 'Automation User',
+    type: 'user',
+  },
+  { id: '35', name: 'Release Mgmt', email: '', role: 'Automation Developer', type: 'group' },
+  {
+    id: '36',
+    name: 'Fatima Al-Hassan',
+    email: 'fatima.alhassan@example.com',
+    role: 'Tenant Administrator',
+    type: 'user',
+  },
+  { id: '37', name: 'Operations', email: '', role: 'Automation User', type: 'group' },
+  {
+    id: '38',
+    name: 'Lucas Martin',
+    email: 'lucas.martin@example.com',
+    role: 'Automation Developer',
+    type: 'user',
+  },
+  { id: '39', name: 'Design Systems', email: '', role: 'Viewer', type: 'group' },
+  {
+    id: '40',
+    name: 'Isabella Davis',
+    email: 'isabella.davis@example.com',
+    role: 'Automation User',
+    type: 'user',
+  },
+  { id: '41', name: 'Cloud Infra', email: '', role: 'Tenant Administrator', type: 'group' },
+  {
+    id: '42',
+    name: 'Ethan Taylor',
+    email: 'ethan.taylor@example.com',
+    role: 'Automation Developer',
+    type: 'user',
+  },
+  { id: '43', name: 'Procurement', email: '', role: 'Viewer', type: 'group' },
+  {
+    id: '44',
+    name: 'Mia Anderson',
+    email: 'mia.anderson@example.com',
+    role: 'Tenant Administrator',
+    type: 'user',
+  },
+  { id: '45', name: 'R&D Lab', email: '', role: 'Automation Developer', type: 'group' },
+  {
+    id: '46',
+    name: 'Oscar Petrov',
+    email: 'oscar.petrov@example.com',
+    role: 'Automation User',
+    type: 'user',
+  },
+  { id: '47', name: 'Executive Office', email: '', role: 'Viewer', type: 'group' },
+  {
+    id: '48',
+    name: 'Grace Wilson',
+    email: 'grace.wilson@example.com',
+    role: 'Tenant Administrator',
+    type: 'user',
+  },
+  {
+    id: '49',
+    name: 'Partner Integrations',
+    email: '',
+    role: 'Automation Developer',
+    type: 'group',
+  },
+  {
+    id: '50',
+    name: 'Daniel Okafor',
+    email: 'daniel.okafor@example.com',
+    role: 'Automation User',
+    type: 'user',
+  },
+];
+
+// ============================================================================
+// Admin page demo
+// ============================================================================
+
+function AdminPageDemo({ theme }: { theme: string }) {
+  const [selectedTenant, setSelectedTenant] = React.useState('1');
+  const [activeTab, setActiveTab] = React.useState('assignments');
+  const [nameFilter, setNameFilter] = React.useState('all');
+  const [roleFilter, setRoleFilter] = React.useState('all');
+  const [page, setPage] = React.useState(1);
+  const [pageSize, setPageSize] = React.useState(15);
+
+  const navItems: AdminNavItem[] = tenants.map((t) => ({
+    id: t.id,
+    label: t.name,
+    icon: t.type === 'tenant' ? <Globe className="h-4 w-4" /> : <Code className="h-4 w-4" />,
+    badge: t.badge ? (
+      <Badge
+        variant="default"
+        className="ml-auto bg-future-accent-subtle text-[10px] text-future-accent-foreground"
+      >
+        {t.badge}
+      </Badge>
+    ) : undefined,
+  }));
+
+  const themeClass =
+    theme === 'legacy-dark'
+      ? 'legacy-dark'
+      : theme === 'legacy-light'
+        ? 'legacy-light'
+        : theme === 'light'
+          ? 'future-light'
+          : 'future-dark';
+
+  const columns: ColumnDef<UserRow>[] = [
+    DataTableSelectColumn<UserRow>(),
+    {
+      accessorKey: 'name',
+      header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
+      cell: ({ row }) => (
+        <div className="flex items-center gap-2">
+          <Users className="h-4 w-4 text-future-foreground-muted" />
+          <span className="text-future-foreground">{row.original.name}</span>
+        </div>
+      ),
+    },
+    {
+      accessorKey: 'email',
+      header: ({ column }) => <DataTableColumnHeader column={column} title="Email" />,
+      cell: ({ row }) => (
+        <span className="text-future-foreground-muted">{row.original.email || '—'}</span>
+      ),
+    },
+    {
+      accessorKey: 'role',
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Roles">
+          <HelpCircle className="ml-1 h-3.5 w-3.5 text-future-foreground-muted" />
+        </DataTableColumnHeader>
+      ),
+      cell: ({ row }) => <span className="text-future-foreground-muted">{row.original.role}</span>,
+    },
+    {
+      id: 'actions',
+      cell: () => (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button className="flex h-8 w-8 items-center justify-center rounded-md text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground">
+              <MoreHorizontal className="h-4 w-4" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            align="end"
+            className={cn(themeClass, 'border-future-border bg-future-surface-overlay')}
+          >
+            <DropdownMenuItem className="text-future-foreground-muted focus:bg-future-surface-hover focus:text-future-foreground">
+              Edit
+            </DropdownMenuItem>
+            <DropdownMenuItem className="text-future-foreground-muted focus:bg-future-surface-hover focus:text-future-foreground">
+              Remove
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ),
+    },
+  ];
+
+  return (
+    <AdminLayout theme={theme}>
+      {/* Global header */}
+      <MaestroHeader title="Administration" theme={theme} menuContent={<AdminMenuNav />} />
+
+      <AdminContent>
+        {/* Sidebar */}
+        <AdminSidebar width={260}>
+          <div className="flex items-center gap-2 border-b border-future-border-subtle px-4 py-3 text-sm font-medium text-future-foreground">
+            <svg
+              viewBox="0 0 24 24"
+              className="h-5 w-5"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+            >
+              <rect x="3" y="3" width="18" height="18" rx="2" />
+              <path d="M3 9h18" />
+              <path d="M9 21V9" />
+            </svg>
+            POPoC
+          </div>
+          <AdminSidebarHeader title="Tenants" onSearch={() => undefined} onAdd={() => undefined} />
+          <AdminSidebarNav
+            items={navItems}
+            selectedId={selectedTenant}
+            onSelect={setSelectedTenant}
+          />
+        </AdminSidebar>
+
+        {/* Main content */}
+        <AdminMain>
+          <AdminPageHeader
+            title="Manage access"
+            breadcrumb={[
+              { label: 'POPoC' },
+              { label: 'DefaultTenant' },
+              { label: 'Manage access' },
+            ]}
+            tabs={[
+              { value: 'assignments', label: 'Role assignments' },
+              { value: 'roles', label: 'Roles' },
+            ]}
+            activeTab={activeTab}
+            onTabChange={setActiveTab}
+            actions={
+              <>
+                <button className="px-3 py-1.5 text-sm font-medium text-future-accent-foreground transition-colors hover:text-future-foreground">
+                  Check access
+                </button>
+                <button className="rounded-lg bg-future-accent px-4 py-1.5 text-sm font-medium text-future-foreground-on-accent transition-colors hover:bg-future-accent/90">
+                  Assign role
+                </button>
+              </>
+            }
+          />
+
+          <AdminToolbar
+            actions={
+              <button className="flex h-8 w-8 items-center justify-center rounded-md text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground">
+                <RefreshCw className="h-4 w-4" />
+              </button>
+            }
+          >
+            <AdminFilter
+              label="Name"
+              value={nameFilter}
+              options={[
+                { value: 'all', label: 'All' },
+                { value: 'users', label: 'Users' },
+                { value: 'groups', label: 'Groups' },
+              ]}
+              onValueChange={setNameFilter}
+            />
+            <AdminFilter
+              label="Roles"
+              value={roleFilter}
+              options={[
+                { value: 'all', label: 'All' },
+                { value: 'admin', label: 'Administrator' },
+                { value: 'viewer', label: 'Viewer' },
+              ]}
+              onValueChange={setRoleFilter}
+            />
+          </AdminToolbar>
+
+          <div className="flex-1 overflow-auto px-6">
+            <DataTable columns={columns} data={users} compact />
+          </div>
+
+          <AdminPagination
+            total={users.length}
+            page={page}
+            pageSize={pageSize}
+            onPageChange={setPage}
+            onPageSizeChange={setPageSize}
+          />
+        </AdminMain>
+      </AdminContent>
+    </AdminLayout>
+  );
+}
+
+// ============================================================================
+// Stories
+// ============================================================================
+
+export const Landing: Story = {
+  name: 'Landing',
+  render: (_, { globals }) => {
+    return <AdminPageDemo theme={globals.futureTheme || 'dark'} />;
+  },
+};
+
+// ============================================================================
+// Data Management demo
+// ============================================================================
+
+interface Product {
+  id: string;
+  name: string;
+  sku: string;
+  category: string;
+  price: number;
+  stock: number;
+  status: 'active' | 'draft' | 'archived';
+  createdAt: string;
+}
+
+const products: Product[] = [
+  {
+    id: '1',
+    name: 'Wireless Headphones',
+    sku: 'WH-001',
+    category: 'Electronics',
+    price: 99.99,
+    stock: 150,
+    status: 'active',
+    createdAt: '2026-01-10',
+  },
+  {
+    id: '2',
+    name: 'USB-C Cable',
+    sku: 'UC-002',
+    category: 'Accessories',
+    price: 12.99,
+    stock: 500,
+    status: 'active',
+    createdAt: '2026-01-09',
+  },
+  {
+    id: '3',
+    name: 'Laptop Stand',
+    sku: 'LS-003',
+    category: 'Accessories',
+    price: 49.99,
+    stock: 75,
+    status: 'active',
+    createdAt: '2026-01-08',
+  },
+  {
+    id: '4',
+    name: 'Mechanical Keyboard',
+    sku: 'MK-004',
+    category: 'Electronics',
+    price: 149.99,
+    stock: 0,
+    status: 'draft',
+    createdAt: '2026-01-07',
+  },
+  {
+    id: '5',
+    name: 'Monitor Light Bar',
+    sku: 'ML-005',
+    category: 'Electronics',
+    price: 59.99,
+    stock: 200,
+    status: 'active',
+    createdAt: '2026-01-06',
+  },
+  {
+    id: '6',
+    name: 'Webcam HD',
+    sku: 'WC-006',
+    category: 'Electronics',
+    price: 79.99,
+    stock: 45,
+    status: 'active',
+    createdAt: '2026-01-05',
+  },
+  {
+    id: '7',
+    name: 'Mouse Pad XL',
+    sku: 'MP-007',
+    category: 'Accessories',
+    price: 24.99,
+    stock: 300,
+    status: 'active',
+    createdAt: '2026-01-04',
+  },
+  {
+    id: '8',
+    name: 'Phone Holder',
+    sku: 'PH-008',
+    category: 'Accessories',
+    price: 19.99,
+    stock: 0,
+    status: 'archived',
+    createdAt: '2026-01-03',
+  },
+  {
+    id: '9',
+    name: 'Bluetooth Speaker',
+    sku: 'BS-009',
+    category: 'Electronics',
+    price: 39.99,
+    stock: 120,
+    status: 'active',
+    createdAt: '2026-01-02',
+  },
+  {
+    id: '10',
+    name: 'Screen Protector',
+    sku: 'SP-010',
+    category: 'Accessories',
+    price: 9.99,
+    stock: 1000,
+    status: 'active',
+    createdAt: '2026-01-01',
+  },
+  {
+    id: '11',
+    name: 'Ergonomic Mouse',
+    sku: 'EM-011',
+    category: 'Electronics',
+    price: 69.99,
+    stock: 85,
+    status: 'active',
+    createdAt: '2025-12-31',
+  },
+  {
+    id: '12',
+    name: 'HDMI Adapter',
+    sku: 'HA-012',
+    category: 'Accessories',
+    price: 15.99,
+    stock: 420,
+    status: 'active',
+    createdAt: '2025-12-30',
+  },
+  {
+    id: '13',
+    name: 'Portable SSD 1TB',
+    sku: 'PS-013',
+    category: 'Storage',
+    price: 129.99,
+    stock: 60,
+    status: 'active',
+    createdAt: '2025-12-29',
+  },
+  {
+    id: '14',
+    name: 'USB Hub 7-Port',
+    sku: 'UH-014',
+    category: 'Accessories',
+    price: 34.99,
+    stock: 190,
+    status: 'active',
+    createdAt: '2025-12-28',
+  },
+  {
+    id: '15',
+    name: 'Noise Cancelling Mic',
+    sku: 'NM-015',
+    category: 'Electronics',
+    price: 89.99,
+    stock: 0,
+    status: 'draft',
+    createdAt: '2025-12-27',
+  },
+  {
+    id: '16',
+    name: 'Desk Organizer',
+    sku: 'DO-016',
+    category: 'Accessories',
+    price: 29.99,
+    stock: 350,
+    status: 'active',
+    createdAt: '2025-12-26',
+  },
+  {
+    id: '17',
+    name: 'Wireless Charger',
+    sku: 'WC-017',
+    category: 'Electronics',
+    price: 44.99,
+    stock: 220,
+    status: 'active',
+    createdAt: '2025-12-25',
+  },
+  {
+    id: '18',
+    name: 'Cable Management Kit',
+    sku: 'CM-018',
+    category: 'Accessories',
+    price: 18.99,
+    stock: 600,
+    status: 'active',
+    createdAt: '2025-12-24',
+  },
+  {
+    id: '19',
+    name: '4K Monitor 27"',
+    sku: 'MN-019',
+    category: 'Electronics',
+    price: 449.99,
+    stock: 25,
+    status: 'active',
+    createdAt: '2025-12-23',
+  },
+  {
+    id: '20',
+    name: 'Wrist Rest Gel',
+    sku: 'WR-020',
+    category: 'Accessories',
+    price: 14.99,
+    stock: 0,
+    status: 'archived',
+    createdAt: '2025-12-22',
+  },
+  {
+    id: '21',
+    name: 'Smart Power Strip',
+    sku: 'SP-021',
+    category: 'Electronics',
+    price: 39.99,
+    stock: 175,
+    status: 'active',
+    createdAt: '2025-12-21',
+  },
+  {
+    id: '22',
+    name: 'Document Scanner',
+    sku: 'DS-022',
+    category: 'Electronics',
+    price: 199.99,
+    stock: 30,
+    status: 'active',
+    createdAt: '2025-12-20',
+  },
+  {
+    id: '23',
+    name: 'Privacy Screen Filter',
+    sku: 'PF-023',
+    category: 'Accessories',
+    price: 42.99,
+    stock: 95,
+    status: 'active',
+    createdAt: '2025-12-19',
+  },
+  {
+    id: '24',
+    name: 'USB Microphone',
+    sku: 'UM-024',
+    category: 'Electronics',
+    price: 119.99,
+    stock: 0,
+    status: 'draft',
+    createdAt: '2025-12-18',
+  },
+  {
+    id: '25',
+    name: 'Portable Monitor 15"',
+    sku: 'PM-025',
+    category: 'Electronics',
+    price: 279.99,
+    stock: 40,
+    status: 'active',
+    createdAt: '2025-12-17',
+  },
+  {
+    id: '26',
+    name: 'Ethernet Cable Cat6',
+    sku: 'EC-026',
+    category: 'Networking',
+    price: 8.99,
+    stock: 800,
+    status: 'active',
+    createdAt: '2025-12-16',
+  },
+  {
+    id: '27',
+    name: 'Wi-Fi 6 Router',
+    sku: 'WR-027',
+    category: 'Networking',
+    price: 189.99,
+    stock: 55,
+    status: 'active',
+    createdAt: '2025-12-15',
+  },
+  {
+    id: '28',
+    name: 'Webcam Ring Light',
+    sku: 'RL-028',
+    category: 'Accessories',
+    price: 22.99,
+    stock: 310,
+    status: 'active',
+    createdAt: '2025-12-14',
+  },
+  {
+    id: '29',
+    name: 'Thunderbolt Dock',
+    sku: 'TD-029',
+    category: 'Electronics',
+    price: 249.99,
+    stock: 15,
+    status: 'active',
+    createdAt: '2025-12-13',
+  },
+  {
+    id: '30',
+    name: 'Laptop Sleeve 14"',
+    sku: 'LS-030',
+    category: 'Accessories',
+    price: 27.99,
+    stock: 200,
+    status: 'active',
+    createdAt: '2025-12-12',
+  },
+  {
+    id: '31',
+    name: 'NVMe SSD 2TB',
+    sku: 'NS-031',
+    category: 'Storage',
+    price: 179.99,
+    stock: 70,
+    status: 'active',
+    createdAt: '2025-12-11',
+  },
+  {
+    id: '32',
+    name: 'Keyboard Cover',
+    sku: 'KC-032',
+    category: 'Accessories',
+    price: 11.99,
+    stock: 0,
+    status: 'archived',
+    createdAt: '2025-12-10',
+  },
+  {
+    id: '33',
+    name: 'Standing Desk Mat',
+    sku: 'SM-033',
+    category: 'Accessories',
+    price: 54.99,
+    stock: 130,
+    status: 'active',
+    createdAt: '2025-12-09',
+  },
+  {
+    id: '34',
+    name: 'USB Flash Drive 128GB',
+    sku: 'UF-034',
+    category: 'Storage',
+    price: 16.99,
+    stock: 450,
+    status: 'active',
+    createdAt: '2025-12-08',
+  },
+  {
+    id: '35',
+    name: 'Mesh Wi-Fi System',
+    sku: 'MW-035',
+    category: 'Networking',
+    price: 299.99,
+    stock: 20,
+    status: 'active',
+    createdAt: '2025-12-07',
+  },
+  {
+    id: '36',
+    name: 'Presentation Clicker',
+    sku: 'PC-036',
+    category: 'Electronics',
+    price: 29.99,
+    stock: 180,
+    status: 'active',
+    createdAt: '2025-12-06',
+  },
+  {
+    id: '37',
+    name: 'Monitor Arm Dual',
+    sku: 'MA-037',
+    category: 'Accessories',
+    price: 79.99,
+    stock: 65,
+    status: 'active',
+    createdAt: '2025-12-05',
+  },
+  {
+    id: '38',
+    name: 'Graphics Tablet',
+    sku: 'GT-038',
+    category: 'Electronics',
+    price: 349.99,
+    stock: 0,
+    status: 'draft',
+    createdAt: '2025-12-04',
+  },
+  {
+    id: '39',
+    name: 'MicroSD Card 256GB',
+    sku: 'MC-039',
+    category: 'Storage',
+    price: 24.99,
+    stock: 550,
+    status: 'active',
+    createdAt: '2025-12-03',
+  },
+  {
+    id: '40',
+    name: 'Surge Protector',
+    sku: 'SP-040',
+    category: 'Electronics',
+    price: 35.99,
+    stock: 230,
+    status: 'active',
+    createdAt: '2025-12-02',
+  },
+  {
+    id: '41',
+    name: 'Network Switch 8-Port',
+    sku: 'NS-041',
+    category: 'Networking',
+    price: 49.99,
+    stock: 90,
+    status: 'active',
+    createdAt: '2025-12-01',
+  },
+  {
+    id: '42',
+    name: 'Trackpad Wireless',
+    sku: 'TW-042',
+    category: 'Electronics',
+    price: 79.99,
+    stock: 105,
+    status: 'active',
+    createdAt: '2025-11-30',
+  },
+  {
+    id: '43',
+    name: 'Display Cleaning Kit',
+    sku: 'DC-043',
+    category: 'Accessories',
+    price: 9.99,
+    stock: 700,
+    status: 'active',
+    createdAt: '2025-11-29',
+  },
+  {
+    id: '44',
+    name: 'External Blu-ray Drive',
+    sku: 'BD-044',
+    category: 'Storage',
+    price: 89.99,
+    stock: 35,
+    status: 'active',
+    createdAt: '2025-11-28',
+  },
+  {
+    id: '45',
+    name: 'PoE Injector',
+    sku: 'PI-045',
+    category: 'Networking',
+    price: 19.99,
+    stock: 160,
+    status: 'active',
+    createdAt: '2025-11-27',
+  },
+  {
+    id: '46',
+    name: 'Webcam Privacy Cover',
+    sku: 'WP-046',
+    category: 'Accessories',
+    price: 5.99,
+    stock: 0,
+    status: 'archived',
+    createdAt: '2025-11-26',
+  },
+  {
+    id: '47',
+    name: 'Docking Station USB-C',
+    sku: 'DS-047',
+    category: 'Electronics',
+    price: 169.99,
+    stock: 50,
+    status: 'active',
+    createdAt: '2025-11-25',
+  },
+  {
+    id: '48',
+    name: 'Fiber Patch Cable',
+    sku: 'FP-048',
+    category: 'Networking',
+    price: 13.99,
+    stock: 380,
+    status: 'active',
+    createdAt: '2025-11-24',
+  },
+  {
+    id: '49',
+    name: 'Portable HDD 4TB',
+    sku: 'PH-049',
+    category: 'Storage',
+    price: 109.99,
+    stock: 0,
+    status: 'draft',
+    createdAt: '2025-11-23',
+  },
+  {
+    id: '50',
+    name: 'Laptop Cooling Pad',
+    sku: 'LC-050',
+    category: 'Accessories',
+    price: 32.99,
+    stock: 275,
+    status: 'active',
+    createdAt: '2025-11-22',
+  },
+];
+
+const productCategories = [...new Set(products.map((p) => p.category))];
+
+function DataManagementDemo({ theme }: { theme: string }) {
+  const [activeTab, setActiveTab] = React.useState('all');
+  const [categoryFilter, setCategoryFilter] = React.useState('all');
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = React.useState(false);
+
+  const themeClass =
+    theme === 'legacy-dark'
+      ? 'legacy-dark'
+      : theme === 'legacy-light'
+        ? 'legacy-light'
+        : theme === 'light'
+          ? 'future-light'
+          : 'future-dark';
+
+  const filteredProducts = React.useMemo(() => {
+    let filtered = products;
+    if (activeTab !== 'all') {
+      filtered = filtered.filter((p) => p.status === activeTab);
+    }
+    if (categoryFilter !== 'all') {
+      filtered = filtered.filter((p) => p.category === categoryFilter);
+    }
+    return filtered;
+  }, [activeTab, categoryFilter]);
+
+  const statusTabs = [
+    { value: 'all', label: 'All', count: products.length },
+    {
+      value: 'active',
+      label: 'Active',
+      count: products.filter((p) => p.status === 'active').length,
+    },
+    { value: 'draft', label: 'Draft', count: products.filter((p) => p.status === 'draft').length },
+    {
+      value: 'archived',
+      label: 'Archived',
+      count: products.filter((p) => p.status === 'archived').length,
+    },
+  ];
+
+  const productColumns: ColumnDef<Product, unknown>[] = [
+    DataTableSelectColumn<Product>(),
+    {
+      accessorKey: 'name',
+      header: ({ column }) => <DataTableColumnHeader column={column} title="Product" />,
+      cell: ({ row }) => (
+        <div className="flex flex-col">
+          <span className="font-medium text-future-foreground">{row.original.name}</span>
+          <span className="text-xs text-future-foreground-muted">{row.original.sku}</span>
+        </div>
+      ),
+    },
+    {
+      accessorKey: 'category',
+      header: ({ column }) => <DataTableColumnHeader column={column} title="Category" />,
+      cell: ({ row }) => (
+        <span className="text-future-foreground-muted">{row.getValue('category')}</span>
+      ),
+    },
+    {
+      accessorKey: 'price',
+      header: ({ column }) => <DataTableColumnHeader column={column} title="Price" />,
+      cell: ({ row }) => {
+        const price = parseFloat(row.getValue('price'));
+        return (
+          <span className="text-future-foreground">
+            {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(price)}
+          </span>
+        );
+      },
+    },
+    {
+      accessorKey: 'stock',
+      header: ({ column }) => <DataTableColumnHeader column={column} title="Stock" />,
+      cell: ({ row }) => {
+        const stock = row.getValue('stock') as number;
+        return (
+          <span
+            className={stock === 0 ? 'font-medium text-red-400' : 'text-future-foreground-muted'}
+          >
+            {stock === 0 ? 'Out of stock' : stock}
+          </span>
+        );
+      },
+    },
+    {
+      accessorKey: 'status',
+      header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
+      cell: ({ row }) => {
+        const status = row.getValue('status') as string;
+        const colors: Record<string, string> = {
+          active: 'bg-green-500/10 text-green-400',
+          draft: 'bg-yellow-500/10 text-yellow-400',
+          archived: 'bg-future-surface-hover text-future-foreground-muted',
+        };
+        return (
+          <span
+            className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${colors[status] ?? ''}`}
+          >
+            {status}
+          </span>
+        );
+      },
+    },
+    {
+      accessorKey: 'createdAt',
+      header: ({ column }) => <DataTableColumnHeader column={column} title="Created" />,
+      cell: ({ row }) => (
+        <span className="text-future-foreground-muted">{row.getValue('createdAt')}</span>
+      ),
+    },
+    {
+      id: 'actions',
+      cell: () => (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button className="flex h-8 w-8 items-center justify-center rounded-md text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground">
+              <MoreHorizontal className="h-4 w-4" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            align="end"
+            className={cn(themeClass, 'border-future-border bg-future-surface-overlay')}
+          >
+            <DropdownMenuItem className="text-future-foreground-muted focus:bg-future-surface-hover focus:text-future-foreground">
+              Edit
+            </DropdownMenuItem>
+            <DropdownMenuItem className="text-future-foreground-muted focus:bg-future-surface-hover focus:text-future-foreground">
+              Duplicate
+            </DropdownMenuItem>
+            <DropdownMenuSeparator className="bg-future-border-subtle" />
+            <DropdownMenuItem className="text-red-400 focus:bg-future-surface-hover focus:text-red-300">
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ),
+    },
+  ];
+
+  return (
+    <AdminLayout theme={theme}>
+      {/* Global header */}
+      <MaestroHeader title="Data Management" theme={theme} menuContent={<AdminMenuNav />} />
+
+      {/* Page content */}
+      <div className="flex flex-1 flex-col overflow-hidden">
+        {/* Page header with actions */}
+        <div className="flex items-center justify-between border-b border-future-border-subtle px-6 py-4">
+          <h1 className="text-xl font-semibold text-future-foreground">Products</h1>
+          <div className="flex items-center gap-2">
+            <button className="flex h-9 items-center gap-2 rounded-lg border border-future-border bg-future-surface px-4 text-sm font-medium text-future-foreground-muted transition-colors hover:border-future-border-hover hover:text-future-foreground">
+              <Upload className="h-4 w-4" />
+              Import
+            </button>
+            <button className="flex h-9 items-center gap-2 rounded-lg border border-future-border bg-future-surface px-4 text-sm font-medium text-future-foreground-muted transition-colors hover:border-future-border-hover hover:text-future-foreground">
+              <Download className="h-4 w-4" />
+              Export
+            </button>
+            <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
+              <DialogTrigger asChild>
+                <button className="flex h-9 items-center gap-2 rounded-lg bg-future-accent px-4 text-sm font-medium text-future-foreground-on-accent transition-colors hover:bg-future-accent/90">
+                  <Plus className="h-4 w-4" />
+                  Add Product
+                </button>
+              </DialogTrigger>
+              <DialogContent
+                className={cn(
+                  themeClass,
+                  'border-future-border bg-future-surface-raised text-future-foreground'
+                )}
+              >
+                <DialogHeader>
+                  <DialogTitle className="text-future-foreground">Add New Product</DialogTitle>
+                  <DialogDescription className="text-future-foreground-muted">
+                    Enter the details for the new product.
+                  </DialogDescription>
+                </DialogHeader>
+                <div className="flex flex-col gap-4 py-4">
+                  <div className="flex flex-col gap-2">
+                    <Label className="text-future-foreground">Product name</Label>
+                    <Input
+                      placeholder="Enter product name"
+                      className="border-future-border bg-future-surface-overlay text-future-foreground placeholder:text-future-foreground-subtle"
+                    />
+                  </div>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="flex flex-col gap-2">
+                      <Label className="text-future-foreground">SKU</Label>
+                      <Input
+                        placeholder="XX-000"
+                        className="border-future-border bg-future-surface-overlay text-future-foreground placeholder:text-future-foreground-subtle"
+                      />
+                    </div>
+                    <div className="flex flex-col gap-2">
+                      <Label className="text-future-foreground">Price</Label>
+                      <Input
+                        type="number"
+                        placeholder="0.00"
+                        className="border-future-border bg-future-surface-overlay text-future-foreground placeholder:text-future-foreground-subtle"
+                      />
+                    </div>
+                  </div>
+                  <div className="flex flex-col gap-2">
+                    <Label className="text-future-foreground">Category</Label>
+                    <Select>
+                      <SelectTrigger className="border-future-border bg-future-surface-overlay text-future-foreground">
+                        <SelectValue placeholder="Select category" />
+                      </SelectTrigger>
+                      <SelectContent
+                        className={cn(
+                          themeClass,
+                          'border-future-border bg-future-surface-overlay text-future-foreground'
+                        )}
+                      >
+                        {productCategories.map((cat) => (
+                          <SelectItem key={cat} value={cat}>
+                            {cat}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="flex flex-col gap-2">
+                    <Label className="text-future-foreground">Initial stock</Label>
+                    <Input
+                      type="number"
+                      placeholder="0"
+                      className="border-future-border bg-future-surface-overlay text-future-foreground placeholder:text-future-foreground-subtle"
+                    />
+                  </div>
+                </div>
+                <DialogFooter>
+                  <button
+                    className="flex h-9 items-center rounded-lg border border-future-border bg-future-surface px-4 text-sm font-medium text-future-foreground-muted transition-colors hover:border-future-border-hover hover:text-future-foreground"
+                    onClick={() => setIsCreateDialogOpen(false)}
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    className="flex h-9 items-center rounded-lg bg-future-accent px-4 text-sm font-medium text-future-foreground-on-accent transition-colors hover:bg-future-accent/90"
+                    onClick={() => setIsCreateDialogOpen(false)}
+                  >
+                    Create product
+                  </button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          </div>
+        </div>
+
+        {/* Tabs + filter bar */}
+        <div className="flex items-center justify-between border-b border-future-border-subtle px-6 py-3">
+          <div className="flex gap-1">
+            {statusTabs.map((tab) => (
+              <button
+                key={tab.value}
+                className={`flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors ${
+                  activeTab === tab.value
+                    ? 'bg-future-surface-hover text-future-foreground'
+                    : 'text-future-foreground-muted hover:text-future-foreground'
+                }`}
+                onClick={() => setActiveTab(tab.value)}
+              >
+                {tab.label}
+                <span className="rounded-full bg-future-surface-overlay px-1.5 py-0.5 text-xs">
+                  {tab.count}
+                </span>
+              </button>
+            ))}
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Select value={categoryFilter} onValueChange={setCategoryFilter}>
+              <SelectTrigger className="h-9 w-[150px] border-future-border bg-future-surface-overlay text-sm text-future-foreground">
+                <Filter className="mr-2 h-4 w-4 text-future-foreground-muted" />
+                <SelectValue placeholder="Category" />
+              </SelectTrigger>
+              <SelectContent
+                className={cn(
+                  themeClass,
+                  'border-future-border bg-future-surface-overlay text-future-foreground'
+                )}
+              >
+                <SelectItem value="all">All categories</SelectItem>
+                {productCategories.map((cat) => (
+                  <SelectItem key={cat} value={cat}>
+                    {cat}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <button className="flex h-9 w-9 items-center justify-center rounded-lg border border-future-border text-future-foreground-muted transition-colors hover:border-future-border-hover hover:text-future-foreground">
+              <RefreshCw className="h-4 w-4" />
+            </button>
+          </div>
+        </div>
+
+        {/* Table */}
+        <div className="flex-1 overflow-auto px-6 pt-4">
+          <DataTable
+            columns={productColumns}
+            data={filteredProducts}
+            searchKey="name"
+            searchPlaceholder="Search products..."
+            showColumnToggle
+            showPagination
+            pageSize={10}
+            compact
+          />
+        </div>
+      </div>
+    </AdminLayout>
+  );
+}
+
+export const DataManagement: Story = {
+  name: 'Data Management',
+  render: (_, { globals }) => {
+    return <DataManagementDemo theme={globals.futureTheme || 'dark'} />;
+  },
+};
diff --git a/packages/apollo-wind/src/templates/Delegate/delegate.stories.tsx b/packages/apollo-wind/src/templates/Delegate/delegate.stories.tsx
new file mode 100644
index 000000000..f72869894
--- /dev/null
+++ b/packages/apollo-wind/src/templates/Delegate/delegate.stories.tsx
@@ -0,0 +1,404 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import * as React from 'react';
+import {
+  House,
+  MessageCircle,
+  Workflow,
+  ChevronUp,
+  Search,
+  Settings as SettingsIcon,
+  Copy,
+  ThumbsUp,
+  ThumbsDown,
+  MoreVertical,
+  Sun,
+  Moon,
+  Monitor,
+  Upload,
+  User,
+} from 'lucide-react';
+import { DelegateTemplate } from './template-delegate';
+import type { NavItem } from './template-delegate';
+import { ChatFirstExperience } from '@/components/custom/chat-first-experience';
+import { ChatComposer } from '@/components/custom/chat-composer';
+import { StepsView } from '@/components/custom/chat-steps-view';
+import { Input } from '@/components/ui/input';
+
+const defaultNavItems: NavItem[] = [
+  {
+    id: 'home',
+    label: 'Home',
+    icon: <House className="h-5 w-5" />,
+  },
+  {
+    id: 'flows',
+    label: 'Flows',
+    icon: <Workflow className="h-5 w-5" />,
+    defaultOpen: false,
+    children: [
+      { id: 'flow-1', label: 'Flow name' },
+      { id: 'flow-2', label: 'Flow name' },
+      { id: 'flow-3', label: 'Flow name' },
+      { id: 'flow-4', label: 'Flow name' },
+    ],
+  },
+  {
+    id: 'chat',
+    label: 'Chat',
+    icon: <MessageCircle className="h-5 w-5" />,
+    children: [
+      { id: 'chat-1', label: 'Chat name' },
+      { id: 'chat-2', label: 'Chat name' },
+      { id: 'chat-3', label: 'Chat name' },
+      { id: 'chat-4', label: 'Chat name' },
+    ],
+  },
+];
+
+const meta = {
+  title: 'Templates/Delegate',
+  component: DelegateTemplate,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [],
+} satisfies Meta<typeof DelegateTemplate>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Blank: Story = {
+  render: (_, { globals }) => (
+    <DelegateTemplate
+      theme={globals.futureTheme || 'dark'}
+      navItems={defaultNavItems}
+      defaultPanelOpen={true}
+    >
+      {/* Blank state - empty main content */}
+    </DelegateTemplate>
+  ),
+};
+
+export const Chat: Story = {
+  render: (_, { globals }) => (
+    <DelegateTemplate
+      theme={globals.futureTheme || 'dark'}
+      navItems={defaultNavItems}
+      defaultPanelOpen={true}
+    >
+      <ChatFirstExperience />
+    </DelegateTemplate>
+  ),
+};
+
+// ============================================================================
+// Chat Responses content
+// ============================================================================
+
+const agentSteps = [
+  {
+    icon: <Search className="h-3.5 w-3.5 text-future-foreground-subtle" />,
+    title: 'WebSearchTool',
+    description:
+      'Searching and analyzing multiple cells in this spreadsheet to create a summary for planning next steps.',
+  },
+  {
+    icon: <SettingsIcon className="h-3.5 w-3.5 text-future-foreground-subtle" />,
+    title: 'Excel Agent',
+    description: 'Editing current column with additional information.',
+  },
+  {
+    icon: <Search className="h-3.5 w-3.5 text-future-foreground-subtle" />,
+    title: 'WebSearchTool',
+    description:
+      'Checking categorized tabs to better understand spam and volume sources.',
+  },
+  {
+    icon: <SettingsIcon className="h-3.5 w-3.5 text-future-foreground-subtle" />,
+    title: 'Currency conversion',
+    description:
+      'Performing currency conversion using current market rates to ensure accurate calculations.',
+  },
+];
+
+function ChatResponsesContent() {
+  return (
+    <div className="flex flex-1 flex-col">
+      {/* Scrollable chat area — content anchored to bottom */}
+      <div className="flex flex-1 flex-col items-center justify-end overflow-y-auto px-6 py-8">
+        <div className="flex w-full max-w-[800px] flex-col gap-6">
+          {/* User message — right-aligned */}
+          <div className="flex justify-end">
+            <div className="max-w-[640px] rounded-bl-2xl rounded-br-sm rounded-tl-2xl rounded-tr-2xl bg-future-surface-raised px-6 py-4">
+              <p className="text-base leading-6 tracking-[-0.4px] text-future-foreground">
+                Open the Excel file I uploaded yesterday, analyze the sales
+                numbers, and generate a short summary of monthly performance.
+                Send the summary to me on Slack once you&apos;re done.
+              </p>
+            </div>
+          </div>
+
+          {/* "Created an action plan" — left-aligned */}
+          <div className="flex items-center gap-2">
+            <span className="text-base font-medium text-future-foreground-muted">
+              Created an action plan
+            </span>
+            <ChevronUp className="h-4 w-4 text-future-foreground-muted" />
+          </div>
+
+          {/* Agent card — dark theme */}
+          <div className="w-full max-w-[477px] overflow-hidden rounded-2xl border border-future-border-subtle bg-future-surface-overlay">
+            {/* Card header */}
+            <div className="flex items-center justify-between border-b border-future-border-subtle px-4 py-4">
+              <div className="flex items-center gap-2.5">
+                <div className="flex h-6 w-6 items-center justify-center">
+                  <svg viewBox="0 0 24 24" className="h-6 w-6" fill="none">
+                    <rect width="24" height="24" rx="4" fill="#21A366" />
+                    <path d="M6 4h5l3 4.5L17 4h4v16h-4l-3-4.5L11 20H6V4z" fill="white" opacity="0.9" />
+                    <path d="M3 7h7l-2 5 2 5H3V7z" fill="#185C37" />
+                    <text x="4.5" y="14.5" fontSize="7" fontWeight="bold" fill="white">X</text>
+                  </svg>
+                </div>
+                <span className="text-base font-semibold tracking-[-0.4px] text-future-foreground">
+                  Excel Agent
+                </span>
+              </div>
+              <ChevronUp className="h-4 w-4 text-future-foreground-muted" />
+            </div>
+
+            {/* Card content */}
+            <div className="flex flex-col gap-3 px-4 pb-4 pt-2">
+              <span className="text-xs tracking-[-0.3px] text-future-foreground-subtle">
+                Agents and tools used
+              </span>
+
+              <div className="flex flex-col gap-3">
+                {agentSteps.map((step, i) => (
+                  <div key={i} className="flex gap-2.5">
+                    <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-[10px] bg-future-surface-raised">
+                      {step.icon}
+                    </div>
+                    <div className="flex flex-col gap-0.5">
+                      <span className="text-sm font-semibold leading-4 text-future-foreground">
+                        {step.title}
+                      </span>
+                      <span className="text-xs leading-[18px] text-future-foreground-muted">
+                        {step.description}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* Action icons row */}
+          <div className="flex items-center gap-1">
+            <button className="flex h-6 w-6 items-center justify-center rounded text-future-foreground-subtle transition-colors hover:text-future-foreground">
+              <Copy className="h-4 w-4" />
+            </button>
+            <button className="flex h-6 w-6 items-center justify-center rounded text-future-foreground-subtle transition-colors hover:text-future-foreground">
+              <ThumbsDown className="h-4 w-4" />
+            </button>
+            <button className="flex h-6 w-6 items-center justify-center rounded text-future-foreground-subtle transition-colors hover:text-future-foreground">
+              <ThumbsUp className="h-4 w-4" />
+            </button>
+            <button className="flex h-6 w-6 items-center justify-center rounded text-future-foreground-subtle transition-colors hover:text-future-foreground">
+              <MoreVertical className="h-4 w-4" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Composer — pinned to bottom */}
+      <div className="flex justify-center px-6 pb-6">
+        <ChatComposer placeholder="I would like you to automate my" />
+      </div>
+    </div>
+  );
+}
+
+export const ChatResponses: Story = {
+  name: 'Chat Responses',
+  render: (_, { globals }) => (
+    <DelegateTemplate
+      theme={globals.futureTheme || 'dark'}
+      navItems={defaultNavItems}
+      defaultPanelOpen={true}
+    >
+      <ChatResponsesContent />
+    </DelegateTemplate>
+  ),
+};
+
+export const Steps: Story = {
+  render: (_, { globals }) => (
+    <DelegateTemplate
+      theme={globals.futureTheme || 'dark'}
+      navItems={defaultNavItems}
+      defaultPanelOpen={true}
+    >
+      <StepsView />
+    </DelegateTemplate>
+  ),
+};
+
+// ============================================================================
+// Settings content
+// ============================================================================
+
+const settingsTabs = [
+  { id: 'profile', label: 'Profile' },
+  { id: 'notifications', label: 'Notifications' },
+  { id: 'integrations', label: 'Integrations' },
+  { id: 'security', label: 'Security' },
+  { id: 'shortcuts', label: 'Shortcuts' },
+];
+
+function SettingsContent() {
+  const [activeTab, setActiveTab] = React.useState('profile');
+  const [selectedTheme, setSelectedTheme] = React.useState('dark');
+
+  return (
+    <div className="flex flex-1 flex-col overflow-y-auto">
+      {/* Tabs */}
+      <div className="shrink-0 border-b border-future-border-subtle px-8 pt-6">
+        <div className="flex gap-1">
+          {settingsTabs.map((tab) => (
+            <button
+              key={tab.id}
+              className={`px-4 pb-3 text-sm font-medium transition-colors ${
+                activeTab === tab.id
+                  ? 'border-b-2 border-future-accent text-future-foreground'
+                  : 'text-future-foreground-muted hover:text-future-foreground'
+              }`}
+              onClick={() => setActiveTab(tab.id)}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Tab content */}
+      <div className="flex-1 overflow-y-auto px-8 py-8">
+        {activeTab === 'profile' ? (
+          <div className="mx-auto max-w-2xl">
+            {/* Page header */}
+            <div className="mb-8">
+              <h1 className="text-2xl font-semibold text-future-foreground">Manage Profile</h1>
+              <p className="mt-1 text-sm text-future-foreground-muted">
+                Update your profile information and preferences.
+              </p>
+            </div>
+
+            <div className="flex flex-col gap-8">
+              {/* Profile Image */}
+              <div className="flex flex-col gap-2">
+                <label className="text-sm font-medium text-future-foreground">Profile Image</label>
+                <div className="flex items-center gap-4">
+                  <div className="flex h-16 w-16 items-center justify-center rounded-full bg-future-surface-overlay">
+                    <User className="h-7 w-7 text-future-foreground-muted" />
+                  </div>
+                  <button className="flex h-9 items-center gap-2 rounded-lg border border-future-border bg-future-surface px-4 text-sm font-medium text-future-foreground-muted transition-colors hover:border-future-border-hover hover:text-future-foreground">
+                    <Upload className="h-4 w-4" />
+                    Select Image
+                  </button>
+                </div>
+              </div>
+
+              {/* Divider */}
+              <div className="h-px bg-future-border-subtle" />
+
+              {/* Your Name */}
+              <div className="flex flex-col gap-2">
+                <label className="text-sm font-medium text-future-foreground">Your Name</label>
+                <Input
+                  placeholder="Enter your name"
+                  className="max-w-md border-future-border bg-future-surface-overlay text-future-foreground placeholder:text-future-foreground-subtle"
+                />
+              </div>
+
+              {/* Your Email */}
+              <div className="flex flex-col gap-2">
+                <label className="text-sm font-medium text-future-foreground">Your Email</label>
+                <Input
+                  placeholder="Enter your email"
+                  type="email"
+                  className="max-w-md border-future-border bg-future-surface-overlay text-future-foreground placeholder:text-future-foreground-subtle"
+                />
+              </div>
+
+              {/* Divider */}
+              <div className="h-px bg-future-border-subtle" />
+
+              {/* Language */}
+              <div className="flex flex-col gap-2">
+                <label className="text-sm font-medium text-future-foreground">Language</label>
+                <p className="text-sm text-future-foreground-muted">
+                  Select your preferred language for the interface.
+                </p>
+                <select className="h-10 max-w-md appearance-none rounded-md border border-future-border bg-future-surface-overlay px-3 text-sm text-future-foreground focus:outline-none focus:ring-1 focus:ring-future-ring">
+                  <option>Select Language</option>
+                  <option>English</option>
+                  <option>Spanish</option>
+                  <option>French</option>
+                  <option>German</option>
+                  <option>Japanese</option>
+                </select>
+              </div>
+
+              {/* Divider */}
+              <div className="h-px bg-future-border-subtle" />
+
+              {/* Theme Settings */}
+              <div className="flex flex-col gap-3">
+                <label className="text-sm font-medium text-future-foreground">Theme Settings</label>
+                <p className="text-sm text-future-foreground-muted">
+                  Choose your preferred theme for the interface.
+                </p>
+                <div className="flex gap-3">
+                  {[
+                    { id: 'light', label: 'Light', icon: <Sun className="h-5 w-5" /> },
+                    { id: 'dark', label: 'Dark', icon: <Moon className="h-5 w-5" /> },
+                    { id: 'system', label: 'System', icon: <Monitor className="h-5 w-5" /> },
+                  ].map((theme) => (
+                    <button
+                      key={theme.id}
+                      className={`flex h-20 w-28 flex-col items-center justify-center gap-2 rounded-xl border text-sm font-medium transition-colors ${
+                        selectedTheme === theme.id
+                          ? 'border-future-accent bg-future-accent-subtle text-future-foreground'
+                          : 'border-future-border bg-future-surface-overlay text-future-foreground-muted hover:border-future-border-hover hover:text-future-foreground'
+                      }`}
+                      onClick={() => setSelectedTheme(theme.id)}
+                    >
+                      {theme.icon}
+                      {theme.label}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="flex flex-1 items-center justify-center text-sm text-future-foreground-muted">
+            Coming soon
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export const Settings: Story = {
+  name: 'Settings',
+  render: (_, { globals }) => (
+    <DelegateTemplate
+      theme={globals.futureTheme || 'dark'}
+      navItems={defaultNavItems}
+      defaultPanelOpen={true}
+    >
+      <SettingsContent />
+    </DelegateTemplate>
+  ),
+};
diff --git a/packages/apollo-wind/src/templates/Delegate/template-delegate.tsx b/packages/apollo-wind/src/templates/Delegate/template-delegate.tsx
new file mode 100644
index 000000000..45d644db7
--- /dev/null
+++ b/packages/apollo-wind/src/templates/Delegate/template-delegate.tsx
@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { Canvas } from '@/components/custom/canvas';
+import type { DelegatePanelProps, NavChildItem, NavItem } from '@/components/custom/panel-delegate';
+import { DelegatePanel } from '@/components/custom/panel-delegate';
+import { useViewportAtOrAbove, ViewportGuard } from '@/components/ui/viewport-guard';
+import type { FutureTheme } from '@/foundation/Future/types';
+import { fontFamily } from '@/foundation/Future/typography';
+import { cn } from '@/lib';
+
+/** Viewport width (px) at or above which the left panel is expanded. Below this, panel is collapsed. */
+const PANEL_EXPAND_BREAKPOINT = 1025;
+
+// Re-export shared types so consumers can import from a single module
+export type { NavItem, NavChildItem, DelegatePanelProps };
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface DelegateTemplateProps {
+  className?: string;
+  /** Color theme for the template */
+  theme?: FutureTheme;
+  /** Whether the left panel starts expanded */
+  defaultPanelOpen?: boolean;
+  /** Navigation items in the left panel */
+  navItems?: NavItem[];
+  /** ID of the currently selected nav child */
+  selectedChildId?: string;
+  /** Callback when a nav child is selected */
+  onChildSelect?: (childId: string) => void;
+  /** Main content to render in the Canvas */
+  children?: React.ReactNode;
+}
+
+// ============================================================================
+// DelegateTemplate
+// ============================================================================
+
+/**
+ * Full-page Delegate template composed of a DelegatePanel and Canvas.
+ *
+ * This is a convenience wrapper — for more control you can use
+ * `DelegatePanel` and `Canvas` directly.
+ */
+export function DelegateTemplate({
+  className,
+  theme = 'dark',
+  defaultPanelOpen = true,
+  navItems = [],
+  selectedChildId,
+  onChildSelect,
+  children,
+}: DelegateTemplateProps) {
+  const isLargeViewport = useViewportAtOrAbove(PANEL_EXPAND_BREAKPOINT);
+  const [panelOpen, setPanelOpen] = React.useState(defaultPanelOpen);
+
+  // Sync panel state when viewport crosses the breakpoint
+  React.useEffect(() => {
+    setPanelOpen(isLargeViewport);
+  }, [isLargeViewport]);
+
+  const layout = (
+    <div
+      className={cn(
+        theme === 'legacy-dark'
+          ? 'legacy-dark'
+          : theme === 'legacy-light'
+            ? 'legacy-light'
+            : theme === 'light'
+              ? 'future-light'
+              : 'future-dark',
+        'flex h-screen bg-future-surface',
+        className
+      )}
+      style={{ fontFamily: fontFamily.base }}
+    >
+      <DelegatePanel
+        open={panelOpen}
+        onOpenChange={setPanelOpen}
+        navItems={navItems}
+        selectedChildId={selectedChildId}
+        onChildSelect={onChildSelect}
+      />
+      <Canvas>{children}</Canvas>
+    </div>
+  );
+
+  return (
+    <ViewportGuard
+      minWidth={769}
+      message="This view is not available at this screen size. Please use a larger viewport."
+    >
+      {layout}
+    </ViewportGuard>
+  );
+}
diff --git a/packages/apollo-wind/src/templates/EmptyErrors/empty-errors.stories.tsx b/packages/apollo-wind/src/templates/EmptyErrors/empty-errors.stories.tsx
new file mode 100644
index 000000000..7401e85fa
--- /dev/null
+++ b/packages/apollo-wind/src/templates/EmptyErrors/empty-errors.stories.tsx
@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { cn } from '@/lib';
+import { fontFamily } from '@/foundation/Future/typography';
+
+// ============================================================================
+// Meta
+// ============================================================================
+
+const meta = {
+  title: 'Templates/Empty & Errors',
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Shared placeholder
+// ============================================================================
+
+function ComingSoon({ theme, label }: { theme: string; label: string }) {
+  const themeClass = theme === 'light' ? 'future-light' : 'future-dark';
+
+  return (
+    <div
+      className={cn(themeClass, 'flex h-screen flex-col items-center justify-center gap-3 bg-future-surface')}
+      style={{ fontFamily: fontFamily.base }}
+    >
+      <p className="text-sm font-medium text-future-foreground">{label}</p>
+      <p className="text-sm text-future-foreground-muted">Coming soon</p>
+    </div>
+  );
+}
+
+// ============================================================================
+// Stories
+// ============================================================================
+
+/** Generic error page for pages that don't exist or have been moved. */
+export const Error: Story = {
+  name: 'Error',
+  render: (_, { globals }) => (
+    <ComingSoon theme={globals.futureTheme || 'dark'} label="Error" />
+  ),
+};
+
+/** Error page for invalid requests. */
+export const BadRequest400: Story = {
+  name: '400 - Bad Request',
+  render: (_, { globals }) => (
+    <ComingSoon theme={globals.futureTheme || 'dark'} label="400 - Bad Request" />
+  ),
+};
+
+/** Error page for unauthorized access to Task Mining. */
+export const Unauthorized401: Story = {
+  name: '401 - Unauthorized',
+  render: (_, { globals }) => (
+    <ComingSoon theme={globals.futureTheme || 'dark'} label="401 - Unauthorized" />
+  ),
+};
+
+/** Error page for forbidden access to Orchestrator. */
+export const Forbidden403: Story = {
+  name: '403 - Forbidden',
+  render: (_, { globals }) => (
+    <ComingSoon theme={globals.futureTheme || 'dark'} label="403 - Forbidden" />
+  ),
+};
+
+/** Error page for pages that cannot be found. */
+export const NotFound404: Story = {
+  name: '404 - Not Found',
+  render: (_, { globals }) => (
+    <ComingSoon theme={globals.futureTheme || 'dark'} label="404 - Not Found" />
+  ),
+};
+
+/** Error page for internal server errors. */
+export const ServerError500: Story = {
+  name: '500 - Server Error',
+  render: (_, { globals }) => (
+    <ComingSoon theme={globals.futureTheme || 'dark'} label="500 - Server Error" />
+  ),
+};
+
+/** Error page for maintenance mode. */
+export const ServiceUnavailable503: Story = {
+  name: '503 - Service Unavailable',
+  render: (_, { globals }) => (
+    <ComingSoon theme={globals.futureTheme || 'dark'} label="503 - Service Unavailable" />
+  ),
+};
+
+/** Loading state error page with refresh message. */
+export const ErrorLoading: Story = {
+  name: 'Error Loading',
+  render: (_, { globals }) => (
+    <ComingSoon theme={globals.futureTheme || 'dark'} label="Error Loading" />
+  ),
+};
+
+/** Error page for unsupported browsers. */
+export const BrowserNotSupported: Story = {
+  name: 'Browser Not Supported',
+  render: (_, { globals }) => (
+    <ComingSoon theme={globals.futureTheme || 'dark'} label="Browser Not Supported" />
+  ),
+};
+
+/** Error page for IP-based access restrictions. */
+export const IpRestricted: Story = {
+  name: 'IP Restricted',
+  render: (_, { globals }) => (
+    <ComingSoon theme={globals.futureTheme || 'dark'} label="IP Restricted" />
+  ),
+};
+
+/** Error page variant without default actions, for Task Mining unauthorized access. */
+export const HideDefaultActions: Story = {
+  name: 'Hide Default Actions',
+  render: (_, { globals }) => (
+    <ComingSoon theme={globals.futureTheme || 'dark'} label="Hide Default Actions" />
+  ),
+};
+
+/** Empty state page for when no projects exist. */
+export const NoProjectsYet: Story = {
+  name: 'No Projects Yet',
+  render: (_, { globals }) => (
+    <ComingSoon theme={globals.futureTheme || 'dark'} label="No Projects Yet" />
+  ),
+};
diff --git a/packages/apollo-wind/src/templates/Flow/flow.stories.tsx b/packages/apollo-wind/src/templates/Flow/flow.stories.tsx
new file mode 100644
index 000000000..9cec41676
--- /dev/null
+++ b/packages/apollo-wind/src/templates/Flow/flow.stories.tsx
@@ -0,0 +1,170 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { FlowTemplate } from './template-flow';
+import type { PropertiesSimpleField, PropertiesSimpleSection } from './template-flow';
+import { FlowNode } from '@/components/custom/flow-node';
+import type { FlowPanelChatMessage } from '@/components/custom/panel-flow';
+
+const meta = {
+  title: 'Templates/Flow',
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Blank: Story = {
+  render: (_, { globals }) => (
+    <FlowTemplate theme={globals.futureTheme || 'dark'} />
+  ),
+};
+
+const chatMessages: FlowPanelChatMessage[] = [
+  {
+    id: '1',
+    role: 'user',
+    content:
+      'Open the Excel file I uploaded yesterday, analyze the sales numbers, and generate a short summary of monthly performance. Send the summary to me on Slack once you\'re done.',
+  },
+  {
+    id: '2',
+    role: 'assistant',
+    content: 'Created an action plan',
+  },
+];
+
+export const ChatResponse: Story = {
+  name: 'Chat Response',
+  render: (_, { globals }) => (
+    <FlowTemplate
+      theme={globals.futureTheme || 'dark'}
+      defaultPanelOpen
+      chatMessages={chatMessages}
+    >
+      {/* Node centered on the canvas */}
+      <div className="absolute inset-0 flex items-center justify-center">
+        <FlowNode title="Node title" />
+      </div>
+    </FlowTemplate>
+  ),
+};
+
+// ── Properties Simple panel data (matches Figma "Properties 1") ──────────
+
+const simpleFields: PropertiesSimpleField[] = [
+  {
+    label: 'Method',
+    required: true,
+    value: 'POST',
+    type: 'select',
+    options: [
+      { value: 'GET', label: 'GET' },
+      { value: 'POST', label: 'POST' },
+      { value: 'PUT', label: 'PUT' },
+      { value: 'PATCH', label: 'PATCH' },
+      { value: 'DELETE', label: 'DELETE' },
+      { value: 'HEAD', label: 'HEAD' },
+      { value: 'OPTIONS', label: 'OPTIONS' },
+    ],
+  },
+  {
+    label: 'API Definition',
+    placeholder: 'Insert API definition URL',
+    type: 'url',
+  },
+  {
+    label: 'URL',
+    value: 'loremipsum.com/lorem.htm',
+    type: 'select',
+    filled: true,
+    showGraphControl: true,
+    options: [
+      { value: 'loremipsum.com/lorem.htm', label: 'loremipsum.com/lorem.htm' },
+      { value: 'api.example.com/v1/data', label: 'api.example.com/v1/data' },
+      { value: 'httpbin.org/post', label: 'httpbin.org/post' },
+    ],
+  },
+];
+
+const simpleSections: PropertiesSimpleSection[] = [
+  {
+    label: 'Authentication',
+    defaultExpanded: true,
+    fields: [
+      {
+        label: 'Authentication type',
+        required: true,
+        value: 'connection',
+        type: 'select',
+        options: [
+          { value: 'connection', label: 'Connection' },
+          { value: 'bearer', label: 'Bearer Token' },
+          { value: 'basic', label: 'Basic Auth' },
+          { value: 'api-key', label: 'API Key' },
+          { value: 'oauth2', label: 'OAuth 2.0' },
+          { value: 'none', label: 'No Auth' },
+        ],
+      },
+      {
+        label: 'Authentication',
+        required: true,
+        placeholder: 'Select an application',
+        type: 'select',
+        options: [
+          { value: 'salesforce', label: 'Salesforce' },
+          { value: 'google-workspace', label: 'Google Workspace' },
+          { value: 'microsoft-365', label: 'Microsoft 365' },
+          { value: 'slack', label: 'Slack' },
+          { value: 'jira', label: 'Jira' },
+        ],
+      },
+      {
+        label: 'Connection',
+        placeholder: 'Select a connection',
+        type: 'select',
+        options: [
+          { value: 'prod-connection', label: 'Production API' },
+          { value: 'staging-connection', label: 'Staging API' },
+          { value: 'dev-connection', label: 'Development API' },
+        ],
+      },
+    ],
+  },
+  { label: 'Headers' },
+  { label: 'Query Parameters' },
+  { label: 'Body' },
+];
+
+export const PropertiesSimple: Story = {
+  name: 'Properties Simple',
+  render: (_, { globals }) => (
+    <FlowTemplate
+      theme={globals.futureTheme || 'dark'}
+      defaultPropertiesSimple
+      propertiesSimpleTitle="HTTP Request"
+      propertiesSimpleFields={simpleFields}
+      propertiesSimpleSections={simpleSections}
+    >
+      {/* Node positioned left-center on the canvas */}
+      <div className="absolute inset-0 flex items-center justify-start pl-16">
+        <FlowNode title="HTTP Request" />
+      </div>
+    </FlowTemplate>
+  ),
+};
+
+export const Properties: Story = {
+  name: 'Properties Advanced',
+  render: (_, { globals }) => (
+    <FlowTemplate
+      theme={globals.futureTheme || 'dark'}
+      defaultPropertiesExpanded
+    >
+      {/* Node positioned left-center on the canvas */}
+      <div className="absolute inset-0 flex items-center justify-start pl-16">
+        <FlowNode title="Node title" />
+      </div>
+    </FlowTemplate>
+  ),
+};
diff --git a/packages/apollo-wind/src/templates/Flow/template-flow.tsx b/packages/apollo-wind/src/templates/Flow/template-flow.tsx
new file mode 100644
index 000000000..06aaea2af
--- /dev/null
+++ b/packages/apollo-wind/src/templates/Flow/template-flow.tsx
@@ -0,0 +1,263 @@
+import * as React from 'react';
+import { Canvas } from '@/components/custom/canvas';
+import { PropertiesBar } from '@/components/custom/flow-properties-bar';
+import { PropertiesExpanded } from '@/components/custom/flow-properties-expanded';
+import type {
+  PropertiesSimpleField,
+  PropertiesSimpleSection,
+} from '@/components/custom/flow-properties-simple';
+import { PropertiesSimple } from '@/components/custom/flow-properties-simple';
+import {
+  defaultFlowNavItems,
+  FlowPanel,
+  type FlowPanelChatMessage,
+  type FlowPanelNavItem,
+} from '@/components/custom/panel-flow';
+import { FlowCanvasToolbar } from '@/components/custom/toolbar-canvas';
+import { FlowViewToolbar } from '@/components/custom/toolbar-view';
+import { useViewportAtOrAbove, ViewportGuard } from '@/components/ui/viewport-guard';
+import type { FutureTheme } from '@/foundation/Future/types';
+import { fontFamily } from '@/foundation/Future/typography';
+import { cn } from '@/lib';
+
+/** Viewport width (px) at or above which the left panel auto-expands. */
+const PANEL_EXPAND_BREAKPOINT = 1280;
+
+/**
+ * Minimum viewport width (px) needed to keep the left panel expanded when a
+ * right-side properties panel is open.
+ *
+ * Calculation: left expanded (480) + right panel width + min usable canvas (400).
+ *   - Properties Expanded: 480 + 946 + 400 = 1826
+ *   - Properties Simple:   480 + 376 + 400 = 1256
+ */
+const MIN_VP_WITH_PROPS_EXPANDED = 1826;
+const MIN_VP_WITH_PROPS_SIMPLE = 1256;
+
+// Re-export types for convenience
+export type {
+  FlowPanelNavItem,
+  FlowPanelChatMessage,
+  PropertiesSimpleField,
+  PropertiesSimpleSection,
+};
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface FlowTemplateProps {
+  className?: string;
+  /** Color theme for the template */
+  theme?: FutureTheme;
+  /** Navigation items for the icon rail */
+  navItems?: FlowPanelNavItem[];
+  /** Whether the expanded panel starts open */
+  defaultPanelOpen?: boolean;
+  /** Chat messages for the expanded panel */
+  chatMessages?: FlowPanelChatMessage[];
+  /** Custom content for the expanded panel (overrides default chat) */
+  expandedContent?: React.ReactNode;
+  /** Flow name displayed in the properties bar */
+  flowName?: string;
+  /** Flow type label (e.g. "Workflow") */
+  flowType?: string;
+  /** Whether the properties panel starts expanded */
+  defaultPropertiesExpanded?: boolean;
+  /** Node name for the expanded properties panel */
+  propertiesNodeName?: string;
+  /** Node type for the expanded properties panel */
+  propertiesNodeType?: string;
+  /** Whether to show the simple properties panel (right side) */
+  defaultPropertiesSimple?: boolean;
+  /** Title for the simple properties panel header */
+  propertiesSimpleTitle?: string;
+  /** Icon for the simple properties panel header */
+  propertiesSimpleIcon?: React.ReactNode;
+  /** Top-level fields for the simple properties panel */
+  propertiesSimpleFields?: PropertiesSimpleField[];
+  /** Accordion sections for the simple properties panel */
+  propertiesSimpleSections?: PropertiesSimpleSection[];
+  /** Canvas content */
+  children?: React.ReactNode;
+}
+
+// ============================================================================
+// FlowTemplate
+// ============================================================================
+
+/**
+ * Full-page Flow template.
+ *
+ * Composed of:
+ * - **FlowPanel** — 60px icon rail + optional 420px expanded chat panel
+ * - **Canvas** — main content area (reuses Delegate Canvas)
+ * - **PropertiesBar** — collapsed bar top-right of canvas (default)
+ * - **PropertiesExpanded** — full properties panel on the right (when expanded)
+ * - **FlowCanvasToolbar** — bottom-center of canvas
+ * - **FlowViewToolbar** — bottom-right of canvas
+ */
+export function FlowTemplate({
+  className,
+  theme = 'dark',
+  navItems = defaultFlowNavItems,
+  defaultPanelOpen = false,
+  chatMessages = [],
+  expandedContent,
+  flowName = 'Invoice processing',
+  flowType = 'Workflow',
+  defaultPropertiesExpanded = false,
+  propertiesNodeName = 'Validate invoice',
+  propertiesNodeType = 'AI Agent',
+  defaultPropertiesSimple = false,
+  propertiesSimpleTitle,
+  propertiesSimpleIcon,
+  propertiesSimpleFields,
+  propertiesSimpleSections,
+  children,
+}: FlowTemplateProps) {
+  const isLargeViewport = useViewportAtOrAbove(PANEL_EXPAND_BREAKPOINT);
+  const [panelOpen, setPanelOpen] = React.useState(defaultPanelOpen);
+  const [propsExpanded, setPropsExpanded] = React.useState(defaultPropertiesExpanded);
+  const [propsSimpleOpen, setPropsSimpleOpen] = React.useState(defaultPropertiesSimple);
+
+  // Sync the active theme class on document.body so Radix portals
+  // (Select, Dialog, Sheet, etc.) inherit the correct CSS custom properties.
+  const themeClass =
+    theme === 'legacy-dark'
+      ? 'legacy-dark'
+      : theme === 'legacy-light'
+        ? 'legacy-light'
+        : theme === 'light'
+          ? 'future-light'
+          : 'future-dark';
+  React.useEffect(() => {
+    document.body.classList.add(themeClass);
+    return () => {
+      document.body.classList.remove(themeClass);
+    };
+  }, [themeClass]);
+
+  // Auto-expand / collapse left panel when viewport crosses the breakpoint,
+  // but only when no right-side panel is open (avoid fighting user intent).
+  React.useEffect(() => {
+    if (!propsExpanded && !propsSimpleOpen) {
+      setPanelOpen(isLargeViewport);
+    }
+  }, [isLargeViewport, propsExpanded, propsSimpleOpen]);
+
+  // When a right-side panel is open, collapse the left panel if viewport is too narrow
+  React.useEffect(() => {
+    if (propsExpanded && panelOpen && window.innerWidth < MIN_VP_WITH_PROPS_EXPANDED) {
+      setPanelOpen(false);
+    }
+    if (propsSimpleOpen && panelOpen && window.innerWidth < MIN_VP_WITH_PROPS_SIMPLE) {
+      setPanelOpen(false);
+    }
+  }, [propsExpanded, propsSimpleOpen, panelOpen]);
+
+  // Open the expanded properties panel, auto-collapsing the left panel if needed
+  const openPropsExpanded = React.useCallback(() => {
+    if (panelOpen && window.innerWidth < MIN_VP_WITH_PROPS_EXPANDED) {
+      setPanelOpen(false);
+    }
+    setPropsExpanded(true);
+  }, [panelOpen]);
+
+  // Open the simple properties panel, auto-collapsing the left panel if needed
+  const openPropsSimple = React.useCallback(() => {
+    if (panelOpen && window.innerWidth < MIN_VP_WITH_PROPS_SIMPLE) {
+      setPanelOpen(false);
+    }
+    setPropsSimpleOpen(true);
+  }, [panelOpen]);
+
+  return (
+    <ViewportGuard
+      minWidth={769}
+      message="This view is not available at this screen size. Please use a larger viewport."
+    >
+      <div
+        className={cn(
+          theme === 'legacy-dark'
+            ? 'legacy-dark'
+            : theme === 'legacy-light'
+              ? 'legacy-light'
+              : theme === 'light'
+                ? 'future-light'
+                : 'future-dark',
+          'flex h-screen bg-future-surface',
+          className
+        )}
+        style={{ fontFamily: fontFamily.base }}
+      >
+        {/* Left panel: icon rail + optional expanded panel */}
+        <FlowPanel
+          navItems={navItems}
+          open={panelOpen}
+          onOpenChange={setPanelOpen}
+          chatMessages={chatMessages}
+          expandedContent={expandedContent}
+        />
+
+        {/* Canvas area — relative for toolbar positioning */}
+        <Canvas className="relative">
+          {/* Properties: collapsed bar (default) — hidden when expanded or simple panel is shown */}
+          {!propsExpanded && !propsSimpleOpen && (
+            <div className="absolute right-4 top-4 z-10 w-[680px] max-w-[calc(100%-32px)]">
+              <PropertiesBar flowName={flowName} flowType={flowType} onExpand={openPropsExpanded} />
+            </div>
+          )}
+
+          {/* Canvas content */}
+          {children}
+
+          {/* Canvas toolbar — bottom center */}
+          <div className="absolute bottom-5 left-1/2 z-10 -translate-x-1/2">
+            <FlowCanvasToolbar
+              activeMode={propsSimpleOpen ? 'evaluate' : 'build'}
+              onModeChange={(mode) => {
+                if (mode === 'evaluate') {
+                  openPropsSimple();
+                } else {
+                  setPropsSimpleOpen(false);
+                }
+              }}
+            />
+          </div>
+
+          {/* View toolbar — bottom right */}
+          <div className="absolute bottom-5 right-4 z-10">
+            <FlowViewToolbar />
+          </div>
+        </Canvas>
+
+        {/* Properties expanded panel — right side */}
+        {propsExpanded && (
+          <div className="shrink-0 p-4 pl-0">
+            <PropertiesExpanded
+              className="h-full"
+              nodeName={propertiesNodeName}
+              nodeType={propertiesNodeType}
+              onClose={() => setPropsExpanded(false)}
+            />
+          </div>
+        )}
+
+        {/* Properties simple panel — right side */}
+        {propsSimpleOpen && !propsExpanded && (
+          <div className="shrink-0 p-4 pl-0">
+            <PropertiesSimple
+              className="h-full"
+              title={propertiesSimpleTitle}
+              icon={propertiesSimpleIcon}
+              fields={propertiesSimpleFields}
+              sections={propertiesSimpleSections}
+              onClose={() => setPropsSimpleOpen(false)}
+            />
+          </div>
+        )}
+      </div>
+    </ViewportGuard>
+  );
+}
diff --git a/packages/apollo-wind/src/templates/form-builder-example.stories.tsx b/packages/apollo-wind/src/templates/Forms/form-builder-example.stories.tsx
similarity index 100%
rename from packages/apollo-wind/src/templates/form-builder-example.stories.tsx
rename to packages/apollo-wind/src/templates/Forms/form-builder-example.stories.tsx
diff --git a/packages/apollo-wind/src/examples/form-builder-example.tsx b/packages/apollo-wind/src/templates/Forms/form-builder-example.tsx
similarity index 100%
rename from packages/apollo-wind/src/examples/form-builder-example.tsx
rename to packages/apollo-wind/src/templates/Forms/form-builder-example.tsx
diff --git a/packages/apollo-wind/src/templates/Maestro/maestro.stories.tsx b/packages/apollo-wind/src/templates/Maestro/maestro.stories.tsx
new file mode 100644
index 000000000..a53d1267c
--- /dev/null
+++ b/packages/apollo-wind/src/templates/Maestro/maestro.stories.tsx
@@ -0,0 +1,877 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { ColumnDef } from '@tanstack/react-table';
+import {
+  Activity,
+  ChevronDown,
+  CreditCard,
+  DollarSign,
+  Download,
+  SquareMenu,
+  Users,
+} from 'lucide-react';
+import * as React from 'react';
+import {
+  DataTable,
+  DataTableColumnHeader,
+  DataTableSelectColumn,
+} from '@/components/ui/data-table';
+import { Progress } from '@/components/ui/progress';
+import { Grid, GridItem, MaestroTemplate } from './template-maestro';
+
+// ============================================================================
+// Sample left-panel navigation
+// ============================================================================
+
+/**
+ * Simple left-panel nav — 5 text-only buttons, no icons.
+ * Used in the collapsible side panel.
+ */
+function LeftPanelNav() {
+  return (
+    <nav className="flex flex-1 flex-col overflow-y-auto px-2 pt-2">
+      <div className="flex flex-col gap-1">
+        {['Button', 'Button', 'Button', 'Button', 'Button'].map((label, i) => (
+          <button
+            key={i}
+            className="flex h-9 items-center rounded-lg px-3 text-sm font-medium text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground"
+          >
+            <span className="truncate">{label}</span>
+          </button>
+        ))}
+      </div>
+    </nav>
+  );
+}
+
+/**
+ * Full menu nav — icons, divider, expandable "More" section.
+ * Used in the global header's slide-out overlay menu.
+ */
+function MenuNav() {
+  const [moreOpen, setMoreOpen] = React.useState(false);
+
+  return (
+    <nav className="flex flex-1 flex-col overflow-y-auto px-2 pt-2">
+      {/* Primary nav items */}
+      <div className="flex flex-col gap-1">
+        {['Button', 'Button', 'Button', 'Button', 'Button'].map((label, i) => (
+          <button
+            key={i}
+            className="flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground"
+          >
+            <SquareMenu className="h-4 w-4 shrink-0" />
+            <span className="truncate">{label}</span>
+          </button>
+        ))}
+      </div>
+
+      {/* Divider */}
+      <div className="my-2 border-t border-future-border-subtle" />
+
+      {/* More — expand / collapse */}
+      <div className="flex flex-col gap-1">
+        <button
+          className="flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground"
+          onClick={() => setMoreOpen((prev) => !prev)}
+          aria-expanded={moreOpen}
+        >
+          <ChevronDown
+            className={`h-4 w-4 shrink-0 transition-transform duration-200 ${moreOpen ? 'rotate-180' : ''}`}
+          />
+          <span className="truncate">More</span>
+        </button>
+
+        {moreOpen && (
+          <div className="flex flex-col gap-1 pl-2">
+            {['Button', 'Button', 'Button', 'Button', 'Button'].map((label, i) => (
+              <button
+                key={i}
+                className="flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground"
+              >
+                <SquareMenu className="h-4 w-4 shrink-0" />
+                <span className="truncate">{label}</span>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </nav>
+  );
+}
+
+// ============================================================================
+// Sample right-panel content (p-6 applied by child, not the panel)
+// ============================================================================
+
+function RightPanelContent() {
+  return (
+    <div className="flex flex-col gap-6 overflow-y-auto p-6">
+      <RightPanelCard
+        title="Title"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum interdum nunc."
+        actionLabel="Button"
+      />
+      <RightPanelCard
+        title="Title"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum interdum nunc."
+        actionLabel="Button"
+      />
+    </div>
+  );
+}
+
+function RightPanelCard({
+  title,
+  description,
+  actionLabel,
+}: {
+  title: string;
+  description: string;
+  actionLabel?: string;
+}) {
+  return (
+    <div className="flex flex-col gap-3">
+      <h3 className="text-sm font-semibold text-future-foreground">{title}</h3>
+      <p className="text-sm leading-5 text-future-foreground-muted">{description}</p>
+      {actionLabel && (
+        <button className="flex h-9 w-fit items-center rounded-lg border border-future-border px-4 text-sm font-medium text-future-foreground-muted transition-colors hover:border-future-border-hover hover:text-future-foreground">
+          {actionLabel}
+        </button>
+      )}
+    </div>
+  );
+}
+
+// ============================================================================
+// Sample main content — uses canvas-responsive Grid/GridItem
+// ============================================================================
+
+function FullWidthCard({ title, subtitle }: { title: string; subtitle: string }) {
+  return (
+    <div className="rounded-xl border border-future-border-subtle bg-future-surface p-6">
+      <h3 className="text-sm font-semibold text-future-foreground">{title}</h3>
+      <p className="mt-1 text-sm text-future-foreground-muted">{subtitle}</p>
+    </div>
+  );
+}
+
+function SectionHeader({ title }: { title: string }) {
+  return (
+    <div className="flex items-center justify-between">
+      <h2 className="text-xl font-semibold text-future-foreground">{title}</h2>
+      <button className="text-sm font-medium text-future-foreground-muted transition-colors hover:text-future-foreground">
+        View All
+      </button>
+    </div>
+  );
+}
+
+function ColumnCard({ title, subtitle }: { title: string; subtitle: string }) {
+  return (
+    <div className="rounded-xl border border-future-border-subtle bg-future-surface p-6">
+      <h3 className="text-sm font-semibold text-future-foreground">{title}</h3>
+      <p className="mt-1 text-sm text-future-foreground-muted">{subtitle}</p>
+    </div>
+  );
+}
+
+/** 4-column row — GridItem defaults to cols=3 (12/3 = 4 per row) */
+function FourColumnGrid() {
+  return (
+    <Grid>
+      <GridItem>
+        <ColumnCard title="Column" subtitle="Description" />
+      </GridItem>
+      <GridItem>
+        <ColumnCard title="Column" subtitle="Description" />
+      </GridItem>
+      <GridItem>
+        <ColumnCard title="Column" subtitle="Description" />
+      </GridItem>
+      <GridItem>
+        <ColumnCard title="Column" subtitle="Description" />
+      </GridItem>
+    </Grid>
+  );
+}
+
+// ============================================================================
+// Badge
+// ============================================================================
+
+function Badge({ label }: { label: string }) {
+  return (
+    <span className="inline-flex items-center rounded-full bg-future-surface-hover px-2.5 py-0.5 text-xs font-medium text-future-foreground-muted">
+      {label}
+    </span>
+  );
+}
+
+// ============================================================================
+// Featured card — image left, badges, title, description, button
+// ============================================================================
+
+function FeaturedCard({
+  badge1 = 'Badge',
+  badge2 = 'Badge',
+  title = 'Title',
+  description = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum interdum nunc.',
+  actionLabel = 'Button',
+}: {
+  badge1?: string;
+  badge2?: string;
+  title?: string;
+  description?: string;
+  actionLabel?: string;
+}) {
+  return (
+    <div className="flex flex-col gap-3 rounded-xl border border-future-border-subtle bg-future-surface p-6">
+      {/* Badges */}
+      <div className="flex gap-2">
+        <Badge label={badge1} />
+        <Badge label={badge2} />
+      </div>
+
+      {/* Image + content */}
+      <div className="flex gap-4">
+        <img
+          src="https://images.ctfassets.net/5965pury2lcm/145el1SuDOOTj7t61htNHe/11ab290de043018bc89fb0bbca017489/Solutions_%C3%A2___byIndustry_01.jpg"
+          alt="Card"
+          className="h-[42px] w-[42px] shrink-0 rounded-lg object-cover"
+        />
+
+        <div className="flex flex-1 flex-col gap-2">
+          <h3 className="text-lg font-semibold text-future-foreground">{title}</h3>
+          <p className="text-sm leading-5 text-future-foreground-muted">{description}</p>
+          <div className="mt-1 flex justify-end">
+            <button className="flex h-9 items-center rounded-lg border border-future-border px-4 text-sm font-medium text-future-foreground-muted transition-colors hover:border-future-border-hover hover:text-future-foreground">
+              {actionLabel}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** Simplified card — title, description, right-aligned button (no badges or image). */
+function SimpleCard({
+  title = 'Title',
+  description = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum interdum nunc.',
+  actionLabel = 'Button',
+}: {
+  title?: string;
+  description?: string;
+  actionLabel?: string;
+}) {
+  return (
+    <div className="flex flex-col gap-2 rounded-xl border border-future-border-subtle bg-future-surface p-6">
+      <h3 className="text-lg font-semibold text-future-foreground">{title}</h3>
+      <p className="text-sm leading-5 text-future-foreground-muted">{description}</p>
+      <div className="mt-1 flex justify-end">
+        <button className="flex h-9 items-center rounded-lg border border-future-border px-4 text-sm font-medium text-future-foreground-muted transition-colors hover:border-future-border-hover hover:text-future-foreground">
+          {actionLabel}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// Sample data table
+// ============================================================================
+
+type TableRow = {
+  id: string;
+  name: string;
+  status: 'Active' | 'Inactive' | 'Pending';
+  type: string;
+  lastModified: string;
+  owner: string;
+};
+
+const sampleTableData: TableRow[] = [
+  {
+    id: '1',
+    name: 'Automation Alpha',
+    status: 'Active',
+    type: 'Process',
+    lastModified: '2026-02-01',
+    owner: 'Alice',
+  },
+  {
+    id: '2',
+    name: 'Bot Bravo',
+    status: 'Inactive',
+    type: 'Task',
+    lastModified: '2026-01-28',
+    owner: 'Bob',
+  },
+  {
+    id: '3',
+    name: 'Connector Charlie',
+    status: 'Active',
+    type: 'Integration',
+    lastModified: '2026-02-03',
+    owner: 'Charlie',
+  },
+  {
+    id: '4',
+    name: 'Dashboard Delta',
+    status: 'Pending',
+    type: 'Process',
+    lastModified: '2026-01-15',
+    owner: 'Diana',
+  },
+  {
+    id: '5',
+    name: 'Engine Echo',
+    status: 'Active',
+    type: 'Task',
+    lastModified: '2026-02-05',
+    owner: 'Eve',
+  },
+  {
+    id: '6',
+    name: 'Flow Foxtrot',
+    status: 'Active',
+    type: 'Integration',
+    lastModified: '2026-01-20',
+    owner: 'Frank',
+  },
+  {
+    id: '7',
+    name: 'Gateway Golf',
+    status: 'Inactive',
+    type: 'Process',
+    lastModified: '2026-01-10',
+    owner: 'Grace',
+  },
+  {
+    id: '8',
+    name: 'Hub Hotel',
+    status: 'Pending',
+    type: 'Task',
+    lastModified: '2026-02-04',
+    owner: 'Hank',
+  },
+];
+
+const sampleTableColumns: ColumnDef<TableRow, unknown>[] = [
+  {
+    accessorKey: 'name',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
+    cell: ({ row }) => <span className="text-future-foreground">{row.getValue('name')}</span>,
+  },
+  {
+    accessorKey: 'status',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
+    cell: ({ row }) => {
+      const status = row.getValue('status') as string;
+      const color =
+        status === 'Active'
+          ? 'text-green-400'
+          : status === 'Pending'
+            ? 'text-yellow-400'
+            : 'text-future-foreground-muted';
+      return <span className={color}>{status}</span>;
+    },
+  },
+  {
+    accessorKey: 'type',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Type" />,
+    cell: ({ row }) => <span className="text-future-foreground-muted">{row.getValue('type')}</span>,
+  },
+  {
+    accessorKey: 'lastModified',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Last Modified" />,
+    cell: ({ row }) => (
+      <span className="text-future-foreground-muted">{row.getValue('lastModified')}</span>
+    ),
+  },
+  {
+    accessorKey: 'owner',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Owner" />,
+    cell: ({ row }) => (
+      <span className="text-future-foreground-muted">{row.getValue('owner')}</span>
+    ),
+  },
+];
+
+// ============================================================================
+// Left Panel Collapsed page content
+// ============================================================================
+
+function LeftPanelCollapsedContent() {
+  return (
+    <div className="flex flex-col gap-6">
+      {/* Hero image */}
+      <img
+        src="https://images.ctfassets.net/5965pury2lcm/145el1SuDOOTj7t61htNHe/11ab290de043018bc89fb0bbca017489/Solutions_%C3%A2___byIndustry_01.jpg"
+        alt="Hero"
+        className="w-full rounded-xl border border-future-border-subtle object-cover"
+        style={{ height: 250 }}
+      />
+
+      {/* Section 1 — 2 featured cards */}
+      <SectionHeader title="Title" />
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <FeaturedCard />
+        <FeaturedCard />
+      </div>
+
+      {/* Section 2 — 3 simple cards */}
+      <SectionHeader title="Title" />
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+        <SimpleCard />
+        <SimpleCard />
+        <SimpleCard />
+      </div>
+
+      {/* Section 3 — Data table */}
+      <SectionHeader title="Title" />
+      <div className="rounded-xl border border-future-border-subtle bg-future-surface p-4">
+        <DataTable
+          columns={sampleTableColumns}
+          data={sampleTableData}
+          searchKey="name"
+          searchPlaceholder="Filter by name..."
+          showColumnToggle
+          showPagination
+          pageSize={5}
+        />
+      </div>
+
+      {/* Section 4 — 4-column grid */}
+      <SectionHeader title="Title" />
+      <FourColumnGrid />
+    </div>
+  );
+}
+
+// ============================================================================
+// Storybook meta
+// ============================================================================
+
+const meta = {
+  title: 'Templates/Maestro',
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Stories
+// ============================================================================
+
+export const Landing: Story = {
+  name: 'Landing',
+  render: (_, { globals }) => (
+    <MaestroTemplate
+      theme={globals.futureTheme || 'dark'}
+      leftPanelContent={<LeftPanelNav />}
+      menuContent={<MenuNav />}
+      rightPanelContent={<RightPanelContent />}
+    >
+      <LeftPanelCollapsedContent />
+    </MaestroTemplate>
+  ),
+};
+
+// ============================================================================
+// Dashboard content
+// ============================================================================
+
+const dashboardTabs = ['Overview', 'Analytics', 'Reports'];
+
+const dashboardStats = [
+  {
+    title: 'Total Revenue',
+    value: '$45,231.89',
+    change: '+20.1% from last month',
+    icon: <DollarSign className="h-4 w-4" />,
+  },
+  {
+    title: 'Subscriptions',
+    value: '+2,350',
+    change: '+180.1% from last month',
+    icon: <Users className="h-4 w-4" />,
+  },
+  {
+    title: 'Sales',
+    value: '+12,234',
+    change: '+19% from last month',
+    icon: <CreditCard className="h-4 w-4" />,
+  },
+  {
+    title: 'Active Now',
+    value: '+573',
+    change: '+201 since last hour',
+    icon: <Activity className="h-4 w-4" />,
+  },
+];
+
+type TransactionRow = {
+  id: string;
+  customer: string;
+  email: string;
+  type: 'Sale' | 'Refund' | 'Subscription' | 'Payout';
+  status: 'Completed' | 'Pending' | 'Failed' | 'Processing';
+  amount: string;
+  date: string;
+  details: string;
+};
+
+const transactionData: TransactionRow[] = [
+  {
+    id: 'TXN-001',
+    customer: 'Liam Johnson',
+    email: 'liam@example.com',
+    type: 'Sale',
+    status: 'Completed',
+    amount: '$250.00',
+    date: '2026-02-05',
+    details: 'Enterprise license — annual plan',
+  },
+  {
+    id: 'TXN-002',
+    customer: 'Olivia Smith',
+    email: 'olivia@example.com',
+    type: 'Subscription',
+    status: 'Completed',
+    amount: '$150.00',
+    date: '2026-02-04',
+    details: 'Pro plan — monthly renewal',
+  },
+  {
+    id: 'TXN-003',
+    customer: 'Noah Williams',
+    email: 'noah@example.com',
+    type: 'Sale',
+    status: 'Processing',
+    amount: '$350.00',
+    date: '2026-02-04',
+    details: 'Team license — 5 seats',
+  },
+  {
+    id: 'TXN-004',
+    customer: 'Emma Brown',
+    email: 'emma@example.com',
+    type: 'Refund',
+    status: 'Completed',
+    amount: '-$45.00',
+    date: '2026-02-03',
+    details: 'Partial refund — unused credits',
+  },
+  {
+    id: 'TXN-005',
+    customer: 'James Jones',
+    email: 'james@example.com',
+    type: 'Sale',
+    status: 'Completed',
+    amount: '$89.00',
+    date: '2026-02-03',
+    details: 'Starter plan — annual',
+  },
+  {
+    id: 'TXN-006',
+    customer: 'Sophia Garcia',
+    email: 'sophia@example.com',
+    type: 'Payout',
+    status: 'Pending',
+    amount: '$1,200.00',
+    date: '2026-02-02',
+    details: 'Partner payout — January',
+  },
+  {
+    id: 'TXN-007',
+    customer: 'Benjamin Miller',
+    email: 'ben@example.com',
+    type: 'Subscription',
+    status: 'Completed',
+    amount: '$29.00',
+    date: '2026-02-02',
+    details: 'Basic plan — monthly renewal',
+  },
+  {
+    id: 'TXN-008',
+    customer: 'Mia Davis',
+    email: 'mia@example.com',
+    type: 'Sale',
+    status: 'Failed',
+    amount: '$450.00',
+    date: '2026-02-01',
+    details: 'Enterprise license — payment declined',
+  },
+  {
+    id: 'TXN-009',
+    customer: 'Lucas Wilson',
+    email: 'lucas@example.com',
+    type: 'Sale',
+    status: 'Completed',
+    amount: '$199.00',
+    date: '2026-02-01',
+    details: 'Pro plan — annual',
+  },
+  {
+    id: 'TXN-010',
+    customer: 'Charlotte Moore',
+    email: 'charlotte@example.com',
+    type: 'Subscription',
+    status: 'Processing',
+    amount: '$59.00',
+    date: '2026-01-31',
+    details: 'Team plan — monthly renewal',
+  },
+];
+
+const transactionColumns: ColumnDef<TransactionRow, unknown>[] = [
+  DataTableSelectColumn<TransactionRow>(),
+  {
+    accessorKey: 'customer',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Customer" />,
+    cell: ({ row }) => (
+      <div className="flex flex-col">
+        <span className="text-sm font-medium text-future-foreground">
+          {row.getValue('customer')}
+        </span>
+        <span className="text-xs text-future-foreground-muted">{row.original.email}</span>
+      </div>
+    ),
+  },
+  {
+    accessorKey: 'type',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Type" />,
+    cell: ({ row }) => {
+      const type = row.getValue('type') as string;
+      const colors: Record<string, string> = {
+        Sale: 'bg-green-500/10 text-green-400',
+        Refund: 'bg-red-500/10 text-red-400',
+        Subscription: 'bg-blue-500/10 text-blue-400',
+        Payout: 'bg-yellow-500/10 text-yellow-400',
+      };
+      return (
+        <span
+          className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${colors[type] ?? ''}`}
+        >
+          {type}
+        </span>
+      );
+    },
+    filterFn: 'equals',
+  },
+  {
+    accessorKey: 'status',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
+    cell: ({ row }) => {
+      const status = row.getValue('status') as string;
+      const colors: Record<string, string> = {
+        Completed: 'text-green-400',
+        Pending: 'text-yellow-400',
+        Processing: 'text-blue-400',
+        Failed: 'text-red-400',
+      };
+      return (
+        <span className={`text-sm ${colors[status] ?? 'text-future-foreground-muted'}`}>
+          {status}
+        </span>
+      );
+    },
+  },
+  {
+    accessorKey: 'amount',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Amount" />,
+    cell: ({ row }) => (
+      <span className="text-sm font-medium text-future-foreground">{row.getValue('amount')}</span>
+    ),
+  },
+  {
+    accessorKey: 'date',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Date" />,
+    cell: ({ row }) => (
+      <span className="text-sm text-future-foreground-muted">{row.getValue('date')}</span>
+    ),
+  },
+];
+
+const recentActivity = [
+  {
+    initials: 'LJ',
+    name: 'Liam Johnson',
+    action: 'Purchased Enterprise license',
+    time: '2 min ago',
+  },
+  { initials: 'OS', name: 'Olivia Smith', action: 'Renewed Pro subscription', time: '15 min ago' },
+  { initials: 'NW', name: 'Noah Williams', action: 'Added 3 team members', time: '1 hour ago' },
+  { initials: 'EB', name: 'Emma Brown', action: 'Requested a refund', time: '2 hours ago' },
+  { initials: 'JJ', name: 'James Jones', action: 'Upgraded to annual plan', time: '5 hours ago' },
+];
+
+const monthlyGoals = [
+  { label: 'Revenue Target', current: 45231, target: 60000, unit: '$' },
+  { label: 'New Subscriptions', current: 2350, target: 3000 },
+  { label: 'Customer Retention', current: 92, target: 100, unit: '%' },
+  { label: 'Support Tickets Resolved', current: 187, target: 200 },
+];
+
+function DashboardContent() {
+  const [activeTab, setActiveTab] = React.useState('Overview');
+
+  return (
+    <div className="flex flex-col gap-6">
+      {/* Tabs */}
+      <div className="flex gap-1 border-b border-future-border-subtle">
+        {dashboardTabs.map((tab) => (
+          <button
+            key={tab}
+            className={`px-4 pb-3 text-sm font-medium transition-colors ${
+              activeTab === tab
+                ? 'border-b-2 border-future-accent text-future-foreground'
+                : 'text-future-foreground-muted hover:text-future-foreground'
+            }`}
+            onClick={() => setActiveTab(tab)}
+          >
+            {tab}
+          </button>
+        ))}
+      </div>
+
+      {activeTab === 'Overview' ? (
+        <div className="flex flex-col gap-6">
+          {/* Stat cards */}
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            {dashboardStats.map((stat) => (
+              <div
+                key={stat.title}
+                className="flex flex-col gap-2 rounded-xl border border-future-border-subtle bg-future-surface p-6"
+              >
+                <div className="flex items-center justify-between">
+                  <span className="text-sm font-medium text-future-foreground-muted">
+                    {stat.title}
+                  </span>
+                  <span className="text-future-foreground-subtle">{stat.icon}</span>
+                </div>
+                <span className="text-2xl font-bold text-future-foreground">{stat.value}</span>
+                <span className="text-xs text-future-foreground-muted">{stat.change}</span>
+              </div>
+            ))}
+          </div>
+
+          {/* Recent Transactions */}
+          <div className="flex flex-col gap-4">
+            <div className="flex items-center justify-between">
+              <h2 className="text-xl font-semibold text-future-foreground">Recent Transactions</h2>
+              <button className="flex h-9 items-center gap-2 rounded-lg border border-future-border bg-future-surface px-4 text-sm font-medium text-future-foreground-muted transition-colors hover:border-future-border-hover hover:text-future-foreground">
+                <Download className="h-4 w-4" />
+                Export
+              </button>
+            </div>
+            <div className="rounded-xl border border-future-border-subtle bg-future-surface p-4">
+              <DataTable
+                columns={transactionColumns}
+                data={transactionData}
+                searchKey="customer"
+                searchPlaceholder="Search transactions..."
+                showColumnToggle
+                showPagination
+                pageSize={5}
+              />
+            </div>
+          </div>
+
+          {/* Bottom two cards */}
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            {/* Recent Activity */}
+            <div className="flex flex-col rounded-xl border border-future-border-subtle bg-future-surface">
+              <div className="flex items-center justify-between border-b border-future-border-subtle px-6 py-4">
+                <h3 className="text-base font-semibold text-future-foreground">Recent Activity</h3>
+                <button className="text-sm font-medium text-future-foreground-muted transition-colors hover:text-future-foreground">
+                  View all
+                </button>
+              </div>
+              <div className="flex flex-col">
+                {recentActivity.map((item, i) => (
+                  <div
+                    key={i}
+                    className="flex items-center gap-4 border-b border-future-border-subtle px-6 py-3 last:border-b-0"
+                  >
+                    <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-future-surface-overlay text-xs font-semibold text-future-foreground">
+                      {item.initials}
+                    </div>
+                    <div className="flex flex-1 flex-col">
+                      <span className="text-sm font-medium text-future-foreground">
+                        {item.name}
+                      </span>
+                      <span className="text-xs text-future-foreground-muted">{item.action}</span>
+                    </div>
+                    <span className="text-xs text-future-foreground-subtle">{item.time}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Monthly Goals */}
+            <div className="flex flex-col rounded-xl border border-future-border-subtle bg-future-surface">
+              <div className="flex items-center justify-between border-b border-future-border-subtle px-6 py-4">
+                <h3 className="text-base font-semibold text-future-foreground">Monthly Goals</h3>
+                <button className="text-sm font-medium text-future-foreground-muted transition-colors hover:text-future-foreground">
+                  View all
+                </button>
+              </div>
+              <div className="flex flex-col gap-5 p-6">
+                {monthlyGoals.map((goal) => {
+                  const pct = Math.round((goal.current / goal.target) * 100);
+                  const fmt = (n: number) =>
+                    goal.unit === '$'
+                      ? `$${n.toLocaleString()}`
+                      : goal.unit === '%'
+                        ? `${n}%`
+                        : n.toLocaleString();
+                  return (
+                    <div key={goal.label} className="flex flex-col gap-2">
+                      <div className="flex items-center justify-between">
+                        <span className="text-sm font-medium text-future-foreground">
+                          {goal.label}
+                        </span>
+                        <span className="text-xs text-future-foreground-muted">
+                          {fmt(goal.current)} / {fmt(goal.target)}
+                        </span>
+                      </div>
+                      <Progress
+                        value={pct}
+                        className="h-2 bg-future-surface-overlay [&>div]:bg-future-accent"
+                      />
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="flex flex-1 items-center justify-center py-20 text-sm text-future-foreground-muted">
+          Coming soon
+        </div>
+      )}
+    </div>
+  );
+}
+
+export const Dashboard: Story = {
+  name: 'Dashboard',
+  render: (_, { globals }) => (
+    <MaestroTemplate
+      theme={globals.futureTheme || 'dark'}
+      defaultLeftPanelCollapsed
+      defaultRightPanelCollapsed
+      leftPanelContent={<LeftPanelNav />}
+      menuContent={<MenuNav />}
+      rightPanelContent={<RightPanelContent />}
+    >
+      <DashboardContent />
+    </MaestroTemplate>
+  ),
+};
diff --git a/packages/apollo-wind/src/templates/Maestro/template-maestro.tsx b/packages/apollo-wind/src/templates/Maestro/template-maestro.tsx
new file mode 100644
index 000000000..03268b9fe
--- /dev/null
+++ b/packages/apollo-wind/src/templates/Maestro/template-maestro.tsx
@@ -0,0 +1,170 @@
+import * as React from 'react';
+import type { MaestroHeaderProps } from '@/components/custom/global-header';
+import { MaestroHeader } from '@/components/custom/global-header';
+import { Canvas, Grid, GridItem } from '@/components/custom/grid-maestro';
+import type { PanelProps } from '@/components/custom/panel-maestro';
+import { Panel } from '@/components/custom/panel-maestro';
+import { ViewportGuard } from '@/components/ui/viewport-guard';
+import type { FutureTheme } from '@/foundation/Future/types';
+import { fontFamily } from '@/foundation/Future/typography';
+import { cn } from '@/lib';
+
+// Re-export types and components for convenience
+export type { MaestroHeaderProps, PanelProps };
+export { Canvas, Grid, GridItem };
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+/** Container width at which panels auto-collapse (Tailwind `lg` equivalent) */
+const AUTO_COLLAPSE_BREAKPOINT = 1024;
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface MaestroTemplateProps {
+  className?: string;
+  /** Color theme for the template */
+  theme?: FutureTheme;
+  /** Application title shown in the header */
+  title?: string;
+  /** Tenant name shown in the header */
+  tenantName?: string;
+  /**
+   * Force the left panel to start collapsed on desktop.
+   * Below 1024px container width, panels auto-collapse regardless of this value.
+   */
+  defaultLeftPanelCollapsed?: boolean;
+  /** Content for the left panel (e.g. navigation). The panel itself has no padding — children control their own. */
+  leftPanelContent?: React.ReactNode;
+  /** Content for the global header's slide-out menu. Falls back to leftPanelContent if not provided. */
+  menuContent?: React.ReactNode;
+  /**
+   * Force the right panel to start collapsed on desktop.
+   * Below 1024px container width, panels auto-collapse regardless of this value.
+   */
+  defaultRightPanelCollapsed?: boolean;
+  /** Content for the right panel. The panel itself has no padding — children control their own (typically p-6). */
+  rightPanelContent?: React.ReactNode;
+  /** Main content to render in the center canvas area */
+  children?: React.ReactNode;
+}
+
+// ============================================================================
+// MaestroTemplate
+// ============================================================================
+
+/**
+ * Full-page Maestro template.
+ *
+ * Composed of:
+ * - **MaestroHeader** — global header with logo, actions, tenant selector, avatar
+ * - **Panel side="left"** — collapsible left panel (300px expanded / 32px collapsed)
+ * - **Canvas** — scrollable main area with ResizeObserver-based grid reflow
+ * - **Panel side="right"** — collapsible right panel (300px expanded / 32px collapsed)
+ *
+ * ### Responsive auto-collapse
+ *
+ * A ResizeObserver watches the template body container. When the container
+ * width drops below 1024px, both panels automatically collapse to 32px.
+ * When it reaches 1024px+, they restore to their user-controlled state.
+ * The panel never disappears entirely — it always shows at minimum its
+ * 32px collapsed state with the toggle button visible.
+ */
+export function MaestroTemplate({
+  className,
+  theme = 'dark',
+  title = 'Maestro',
+  tenantName = 'Select',
+  defaultLeftPanelCollapsed = false,
+  leftPanelContent,
+  menuContent,
+  defaultRightPanelCollapsed = false,
+  rightPanelContent,
+  children,
+}: MaestroTemplateProps) {
+  const bodyRef = React.useRef<HTMLDivElement>(null);
+
+  // User-controlled panel state (toggled via the chevron button)
+  const [leftCollapsed, setLeftCollapsed] = React.useState(defaultLeftPanelCollapsed);
+  const [rightCollapsed, setRightCollapsed] = React.useState(defaultRightPanelCollapsed);
+
+  // Whether the container is below the auto-collapse breakpoint
+  const [narrow, setNarrow] = React.useState(false);
+
+  // Watch the body container width for responsive auto-collapse
+  React.useEffect(() => {
+    const el = bodyRef.current;
+    if (!el) return;
+
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const w = entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
+        setNarrow(w > 0 && w < AUTO_COLLAPSE_BREAKPOINT);
+      }
+    });
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  // When narrow, force both panels collapsed. Otherwise use user state.
+  const leftIsCollapsed = narrow || leftCollapsed;
+  const rightIsCollapsed = narrow || rightCollapsed;
+
+  return (
+    <ViewportGuard
+      minWidth={769}
+      message="This view is not available at this screen size. Please use a larger viewport."
+    >
+      <div
+        className={cn(
+          theme === 'legacy-dark'
+            ? 'legacy-dark'
+            : theme === 'legacy-light'
+              ? 'legacy-light'
+              : theme === 'light'
+                ? 'future-light'
+                : 'future-dark',
+          'flex h-screen flex-col bg-future-surface text-foreground',
+          className
+        )}
+        style={{ fontFamily: fontFamily.base }}
+      >
+        {/* Global header — menuContent enables the slide-out app-launcher menu */}
+        <MaestroHeader
+          title={title}
+          tenantName={tenantName}
+          theme={theme}
+          menuContent={menuContent ?? leftPanelContent}
+        />
+
+        {/* Body: left panel + canvas + right panel */}
+        <div ref={bodyRef} className="flex flex-1 overflow-hidden">
+          {/* Left panel */}
+          <Panel
+            side="left"
+            isCollapsed={leftIsCollapsed}
+            onToggle={() => setLeftCollapsed((prev) => !prev)}
+          >
+            {leftPanelContent}
+          </Panel>
+
+          {/* Canvas (main content) */}
+          <Canvas>{children}</Canvas>
+
+          {/* Right panel */}
+          <Panel
+            side="right"
+            isCollapsed={rightIsCollapsed}
+            onToggle={() => setRightCollapsed((prev) => !prev)}
+          >
+            {rightPanelContent}
+          </Panel>
+        </div>
+      </div>
+    </ViewportGuard>
+  );
+}
diff --git a/packages/apollo-wind/src/templates/More/more.stories.tsx b/packages/apollo-wind/src/templates/More/more.stories.tsx
new file mode 100644
index 000000000..3fb4d49f4
--- /dev/null
+++ b/packages/apollo-wind/src/templates/More/more.stories.tsx
@@ -0,0 +1,503 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import * as React from 'react';
+import { ArrowUp, Plus, Search, X } from 'lucide-react';
+import { cn } from '@/lib';
+import { fontFamily } from '@/foundation/Future/typography';
+import { MaestroHeader } from '@/components/custom/global-header';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+} from '@/components/ui/drawer';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Row, Column, Grid } from '@/components/ui/layout';
+
+// ============================================================================
+// Meta
+// ============================================================================
+
+const meta = {
+  title: 'Templates/Onboarding',
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Shared: Coming Soon page
+// ============================================================================
+
+function ComingSoonPage({
+  title,
+  theme,
+}: {
+  title: string;
+  theme: string;
+}) {
+  return (
+    <div
+      className={cn(
+        theme === 'light' ? 'future-light' : 'future-dark',
+        'flex h-screen w-full items-center justify-center bg-future-surface'
+      )}
+      style={{ fontFamily: fontFamily.base }}
+    >
+      <div className="flex flex-col items-center gap-4">
+        <h1 className="text-3xl font-bold tracking-tight text-future-foreground">
+          {title}
+        </h1>
+        <p className="text-base text-future-foreground-muted">
+          Coming soon
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// Agentic Process: Types
+// ============================================================================
+
+interface ProcessTemplate {
+  id: string;
+  name: string;
+  description: string;
+  usageCount: number;
+  category?: string;
+  tools?: string[];
+  onUse?: () => void;
+}
+
+// ============================================================================
+// Agentic Process: Data
+// ============================================================================
+
+const defaultTemplates: ProcessTemplate[] = [
+  {
+    id: '1',
+    name: 'Client Onboarding Account Opening',
+    description:
+      'An agentic process built with Maestro, modeled using BPMN to orchestrate customer data across...',
+    usageCount: 3400,
+    category: 'financial',
+    tools: ['office365', 'maestro'],
+  },
+  {
+    id: '2',
+    name: 'KYC / CDD & Sanctions Screening',
+    description:
+      'An agentic process built with Maestro, modeled using BPMN to coordinate identity verification, s...',
+    usageCount: 1700,
+    category: 'financial',
+    tools: ['google', 'maestro'],
+  },
+  {
+    id: '3',
+    name: 'Payments Processing & Exceptions',
+    description:
+      'An agentic process built with Maestro, modeled using BPMN to orchestrate payment validation, f...',
+    usageCount: 1200,
+    category: 'financial',
+    tools: ['office365', 'maestro'],
+  },
+  {
+    id: '4',
+    name: 'AML Alert Investigation & Case Mgmt',
+    description:
+      'An agentic process built with Maestro, modeled using BPMN to handle AML alerts through tran...',
+    usageCount: 3400,
+    category: 'financial',
+    tools: ['office365', 'maestro'],
+  },
+  {
+    id: '5',
+    name: 'Regulatory Reporting',
+    description:
+      'An agentic process built with Maestro, modeled using BPMN to automate data aggregation, com...',
+    usageCount: 1700,
+    category: 'financial',
+    tools: ['google', 'maestro'],
+  },
+  {
+    id: '6',
+    name: 'Insurance First Notice of Loss (FNOL)',
+    description:
+      'An agentic process built with Maestro, modeled using BPMN to guide claim intake, coverage che...',
+    usageCount: 1200,
+    category: 'healthcare',
+    tools: ['office365', 'maestro'],
+  },
+  {
+    id: '7',
+    name: 'Insurance Claims Adjudication & Settlement',
+    description:
+      'An agentic process built with Maestro, modeled using BPMN to coordinate policy validation, frau...',
+    usageCount: 3400,
+    category: 'healthcare',
+    tools: ['office365', 'maestro'],
+  },
+  {
+    id: '8',
+    name: 'Underwriting (New & Renewal)',
+    description:
+      'An agentic process built with Maestro, modeled using BPMN to orchestrate data gathering, risk...',
+    usageCount: 1700,
+    category: 'other',
+    tools: ['google', 'maestro'],
+  },
+  {
+    id: '9',
+    name: 'Cards Dispute & Chargeback Management',
+    description:
+      'An agentic process built with Maestro, modeled using BPMN to automate dispute intake, transac...',
+    usageCount: 1200,
+    category: 'financial',
+    tools: ['office365', 'maestro'],
+  },
+];
+
+const defaultCategories = [
+  { id: 'financial', label: 'Financial' },
+  { id: 'healthcare', label: 'Healthcare' },
+  { id: 'other', label: 'Other' },
+];
+
+const defaultTools = [
+  { id: 'office365', label: 'Office365' },
+  { id: 'jira', label: 'Jira' },
+  { id: 'sap-concur', label: 'SAP Concur' },
+  { id: 'slack', label: 'Slack' },
+  { id: 'docusign', label: 'DocuSign' },
+];
+
+// ============================================================================
+// Agentic Process: Component
+// ============================================================================
+
+function AgenticProcessPage({ theme }: { theme: string }) {
+  const themeValue = theme === 'light' ? 'light' : 'dark';
+  const themeClass = theme === 'light' ? 'future-light' : 'future-dark';
+
+  const [autopilotPrompt, setAutopilotPrompt] = React.useState('');
+  const [drawerOpen, setDrawerOpen] = React.useState(false);
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const [selectedCategories, setSelectedCategories] = React.useState<string[]>([]);
+  const [selectedTools, setSelectedTools] = React.useState<string[]>([]);
+
+  const formatUsageCount = (count: number) =>
+    count >= 1000 ? `${(count / 1000).toFixed(1)}k` : count.toString();
+
+  const toggleCategory = (id: string) =>
+    setSelectedCategories((prev) =>
+      prev.includes(id) ? prev.filter((c) => c !== id) : [...prev, id]
+    );
+
+  const toggleTool = (id: string) =>
+    setSelectedTools((prev) =>
+      prev.includes(id) ? prev.filter((t) => t !== id) : [...prev, id]
+    );
+
+  const filteredTemplates = React.useMemo(() => {
+    return defaultTemplates.filter((t) => {
+      const matchesSearch =
+        searchQuery === '' ||
+        t.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        t.description.toLowerCase().includes(searchQuery.toLowerCase());
+      const matchesCategory =
+        selectedCategories.length === 0 ||
+        (t.category && selectedCategories.includes(t.category));
+      const matchesTools =
+        selectedTools.length === 0 ||
+        (t.tools && t.tools.some((tool) => selectedTools.includes(tool)));
+      return matchesSearch && matchesCategory && matchesTools;
+    });
+  }, [searchQuery, selectedCategories, selectedTools]);
+
+  const ExampleCard = ({ template }: { template: ProcessTemplate }) => (
+    <Column className="group rounded-2xl border border-future-border bg-future-surface-raised p-8 transition-all hover:border-future-border-hover">
+      <Column gap={4} flex={1} className="mb-8">
+        <h3 className="text-base font-semibold leading-tight text-future-foreground">
+          {template.name}
+        </h3>
+        <p className="text-sm leading-relaxed text-future-foreground-muted">
+          {template.description}
+        </p>
+        <Row gap={1.5} align="center" className="text-xs text-future-foreground-subtle">
+          <svg
+            className="h-3.5 w-3.5"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+            />
+          </svg>
+          <span>{formatUsageCount(template.usageCount)}</span>
+        </Row>
+      </Column>
+      <button className="flex h-9 w-full items-center justify-center rounded-xl border border-future-border text-sm font-medium text-future-foreground transition-colors hover:bg-future-surface-hover">
+        Use
+      </button>
+    </Column>
+  );
+
+  return (
+    <>
+      <div
+        className={cn(themeClass, 'flex h-screen flex-col bg-future-surface')}
+        style={{ fontFamily: fontFamily.base }}
+      >
+        {/* Global header */}
+        <MaestroHeader theme={themeValue} title="Maestro" />
+
+        {/* Page content */}
+        <div className="flex flex-1 flex-col overflow-y-auto px-8 py-12 md:px-16 md:py-16">
+          {/* Header */}
+          <div className="mb-10">
+            <Row justify="between" align="start" gap={8}>
+              <Column flex={1}>
+                <h1 className="text-3xl font-bold tracking-tight text-future-foreground">
+                  Let&apos;s create an agentic process
+                </h1>
+                <p className="mt-4 text-base text-future-foreground-muted">
+                  Design and orchestrate end-to-end processes with AI agents, robots, and people
+                  using BPMN-based diagrams.
+                </p>
+              </Column>
+              <button
+                className="shrink-0 text-sm font-medium text-future-accent-foreground transition-colors hover:text-future-foreground"
+                onClick={() => setDrawerOpen(true)}
+              >
+                Explore templates
+              </button>
+            </Row>
+          </div>
+
+          {/* Autopilot — above cards */}
+          <div className="mx-auto mb-12 w-full max-w-3xl">
+            <h2 className="mb-6 text-lg font-semibold text-future-foreground">Autopilot</h2>
+            <div className="rounded-2xl border border-future-border bg-future-surface-raised">
+              <div className="relative p-6">
+                <Textarea
+                  placeholder="Create an agent to..."
+                  value={autopilotPrompt}
+                  onChange={(e) => setAutopilotPrompt(e.target.value)}
+                  className="min-h-[120px] resize-none border-0 bg-transparent p-0 pb-12 text-sm text-future-foreground placeholder:text-future-foreground-subtle focus-visible:ring-0"
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+                      e.preventDefault();
+                    }
+                  }}
+                />
+                <div className="absolute bottom-6 left-6 right-6 flex items-center justify-between">
+                  <button
+                    className="flex h-8 w-8 items-center justify-center rounded-lg text-future-foreground-muted transition-colors hover:text-future-foreground disabled:opacity-50"
+                    disabled={!autopilotPrompt}
+                    aria-label="Clear prompt"
+                    onClick={() => setAutopilotPrompt('')}
+                  >
+                    <Plus className="h-4 w-4" />
+                  </button>
+                  <button
+                    className="flex h-8 w-8 items-center justify-center rounded-full bg-future-accent text-future-foreground-on-accent disabled:opacity-50"
+                    disabled={!autopilotPrompt.trim()}
+                    aria-label="Submit prompt"
+                  >
+                    <ArrowUp className="h-4 w-4" />
+                  </button>
+                </div>
+              </div>
+              <div className="border-t border-future-border-subtle px-6 py-3 text-center">
+                <p className="text-xs text-future-foreground-subtle">
+                  Autopilot can make mistakes. Please double check the responses.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Template cards */}
+          <Grid gap={8} cols={1} className="sm:grid-cols-2 lg:grid-cols-4">
+            {/* Blank card */}
+            <button className="group flex cursor-pointer flex-col items-center justify-between rounded-2xl border border-dashed border-future-border bg-future-surface-raised p-8 text-center transition-all hover:border-future-border-hover">
+              <Column gap={4} w="full">
+                <h3 className="text-base font-semibold text-future-foreground">
+                  Blank agentic process
+                </h3>
+                <p className="text-sm text-future-foreground-muted">
+                  Start building without a template.
+                </p>
+              </Column>
+              <div className="mt-8 flex h-20 w-20 items-center justify-center rounded-lg border-2 border-dashed border-future-border">
+                <Plus className="h-8 w-8 text-future-accent" />
+              </div>
+            </button>
+
+            {/* First 3 template cards */}
+            {defaultTemplates.slice(0, 3).map((template) => (
+              <ExampleCard key={template.id} template={template} />
+            ))}
+          </Grid>
+        </div>
+      </div>
+
+      {/* Explore Templates Drawer */}
+      <Drawer open={drawerOpen} onOpenChange={setDrawerOpen}>
+        <DrawerContent className={cn(themeClass, 'max-h-[75vh] bg-future-surface')}>
+          <DrawerHeader className="border-b border-future-border-subtle px-4 py-2 md:px-6 md:py-3">
+            <Row justify="between" align="start">
+              <div>
+                <DrawerTitle className="text-base text-future-foreground md:text-lg">
+                  Explore templates
+                </DrawerTitle>
+                <DrawerDescription className="text-xs text-future-foreground-muted md:text-sm">
+                  Build, customise and deploy an Agentic Process starting from a template.
+                </DrawerDescription>
+              </div>
+              <DrawerClose asChild>
+                <button className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-future-foreground-muted transition-colors hover:text-future-foreground">
+                  <X className="h-4 w-4" />
+                  <span className="sr-only">Close</span>
+                </button>
+              </DrawerClose>
+            </Row>
+          </DrawerHeader>
+
+          <Row overflow="hidden" className="h-[calc(75vh-80px)]">
+            {/* Sidebar */}
+            <div className="hidden w-56 border-r border-future-border-subtle bg-future-surface-raised p-3 md:block">
+              <div className="mb-3">
+                <div className="relative">
+                  <Search className="absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-future-foreground-subtle" />
+                  <Input
+                    placeholder="Search"
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    className="h-8 border-future-border bg-future-surface-overlay pl-7 text-xs text-future-foreground placeholder:text-future-foreground-subtle"
+                  />
+                </div>
+              </div>
+
+              <Column gap={3}>
+                <div>
+                  <Row justify="between" align="center" className="mb-1.5">
+                    <h4 className="text-xs font-semibold text-future-foreground">Category</h4>
+                    <button
+                      className="text-[10px] text-future-foreground-muted hover:text-future-foreground"
+                      onClick={() => setSelectedCategories([])}
+                    >
+                      Clear
+                    </button>
+                  </Row>
+                  <Column gap={1.5}>
+                    {defaultCategories.map((cat) => (
+                      <Row key={cat.id} gap={2} align="center">
+                        <Checkbox
+                          id={`cat-${cat.id}`}
+                          checked={selectedCategories.includes(cat.id)}
+                          onCheckedChange={() => toggleCategory(cat.id)}
+                          className="h-3 w-3 border-future-border"
+                        />
+                        <Label
+                          htmlFor={`cat-${cat.id}`}
+                          className="cursor-pointer text-xs font-normal text-future-foreground-muted"
+                        >
+                          {cat.label}
+                        </Label>
+                      </Row>
+                    ))}
+                  </Column>
+                </div>
+
+                <div>
+                  <Row justify="between" align="center" className="mb-1.5">
+                    <h4 className="text-xs font-semibold text-future-foreground">Tool</h4>
+                    <button
+                      className="text-[10px] text-future-foreground-muted hover:text-future-foreground"
+                      onClick={() => setSelectedTools([])}
+                    >
+                      Clear
+                    </button>
+                  </Row>
+                  <Column gap={1.5}>
+                    {defaultTools.map((tool) => (
+                      <Row key={tool.id} gap={2} align="center">
+                        <Checkbox
+                          id={`tool-${tool.id}`}
+                          checked={selectedTools.includes(tool.id)}
+                          onCheckedChange={() => toggleTool(tool.id)}
+                          className="h-3 w-3 border-future-border"
+                        />
+                        <Label
+                          htmlFor={`tool-${tool.id}`}
+                          className="cursor-pointer text-xs font-normal text-future-foreground-muted"
+                        >
+                          {tool.label}
+                        </Label>
+                      </Row>
+                    ))}
+                  </Column>
+                </div>
+              </Column>
+            </div>
+
+            {/* Main content */}
+            <div className="flex-1 overflow-y-auto p-3 md:p-4">
+              <Grid gap={3} cols={1} className="sm:grid-cols-2 lg:grid-cols-3">
+                {filteredTemplates.map((template) => (
+                  <ExampleCard key={template.id} template={template} />
+                ))}
+              </Grid>
+
+              {filteredTemplates.length === 0 && (
+                <Row h={32} justify="center" align="center">
+                  <p className="text-sm text-future-foreground-muted">No templates found</p>
+                </Row>
+              )}
+            </div>
+          </Row>
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+}
+
+// ============================================================================
+// Stories
+// ============================================================================
+
+export const GuidedTour: Story = {
+  name: 'Guided Tour',
+  render: (_, { globals }) => {
+    const themeClass = globals.futureTheme === 'light' ? 'future-light' : 'future-dark';
+    return (
+      <div
+        className={cn(themeClass, 'flex h-screen items-center justify-center bg-future-surface')}
+        style={{ fontFamily: fontFamily.base }}
+      >
+        <p className="text-sm text-future-foreground-muted">Coming soon</p>
+      </div>
+    );
+  },
+};
+
+export const AgenticProcess: Story = {
+  name: 'Agentic Process',
+  render: (_, { globals }) => (
+    <AgenticProcessPage theme={globals.futureTheme || 'dark'} />
+  ),
+};
+
diff --git a/packages/apollo-wind/src/templates/admin-layout-example.stories.tsx b/packages/apollo-wind/src/templates/admin-layout-example.stories.tsx
deleted file mode 100644
index e5b26a9a5..000000000
--- a/packages/apollo-wind/src/templates/admin-layout-example.stories.tsx
+++ /dev/null
@@ -1,305 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import * as React from 'react';
-import { Globe, Code, Users, RefreshCw, HelpCircle, MoreHorizontal } from 'lucide-react';
-import { ColumnDef } from '@tanstack/react-table';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import {
-  AdminLayout,
-  AdminHeader,
-  AdminHeaderActions,
-  AdminContent,
-  AdminSidebar,
-  AdminSidebarHeader,
-  AdminSidebarNav,
-  AdminMain,
-  AdminPageHeader,
-  AdminToolbar,
-  AdminFilter,
-  AdminTable,
-  AdminPagination,
-  DataTableColumnHeader,
-  DataTableSelectColumn,
-} from './admin-layout-example';
-import { Row, Column } from '@/components/ui/layout';
-
-const meta = {
-  title: 'Templates/Current/Admin Layout',
-  component: AdminLayout,
-} satisfies Meta<typeof AdminLayout>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Sample data
-const tenants = [
-  { id: '1', name: 'Maestro', type: 'tenant' },
-  { id: '2', name: 'Staging', type: 'tenant' },
-  { id: '3', name: 'ao', type: 'tenant' },
-  {
-    id: '4',
-    name: 'Development',
-    type: 'service',
-    badge: 'Canary Environment',
-  },
-  { id: '5', name: 'DefaultTenant', type: 'tenant' },
-  { id: '6', name: 'optimize', type: 'service' },
-];
-
-type User = {
-  id: string;
-  name: string;
-  email: string;
-  role: string;
-  type: 'user' | 'group';
-};
-
-const users: User[] = [
-  {
-    id: '1',
-    name: 'Finance-test',
-    email: '',
-    role: 'Test-role-viewer',
-    type: 'group',
-  },
-  {
-    id: '2',
-    name: 'John Doe',
-    email: 'john.doe@example.com',
-    role: 'Tenant Administrator',
-    type: 'user',
-  },
-];
-
-function AdminPageDemo() {
-  const [selectedTenant, setSelectedTenant] = React.useState('1');
-  const [activeTab, setActiveTab] = React.useState('assignments');
-  const [nameFilter, setNameFilter] = React.useState('all');
-  const [roleFilter, setRoleFilter] = React.useState('all');
-  const [page, setPage] = React.useState(1);
-  const [pageSize, setPageSize] = React.useState(10);
-
-  const navItems = tenants.map((t) => ({
-    id: t.id,
-    label: t.name,
-    icon: t.type === 'tenant' ? <Globe className="h-4 w-4" /> : <Code className="h-4 w-4" />,
-    badge: t.badge ? (
-      <Badge variant="default" className="ml-auto text-[10px]">
-        {t.badge}
-      </Badge>
-    ) : undefined,
-  }));
-
-  const columns: ColumnDef<User>[] = [
-    DataTableSelectColumn<User>(),
-    {
-      accessorKey: 'name',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
-      cell: ({ row }) => (
-        <Row gap={2} align="center">
-          <Users className="h-4 w-4 text-muted-foreground" />
-          <span>{row.original.name}</span>
-        </Row>
-      ),
-    },
-    {
-      accessorKey: 'email',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Email" />,
-      cell: ({ row }) => row.original.email || '—',
-    },
-    {
-      accessorKey: 'role',
-      header: ({ column }) => (
-        <DataTableColumnHeader column={column} title="Roles">
-          <HelpCircle className="ml-1 h-3.5 w-3.5 text-muted-foreground" />
-        </DataTableColumnHeader>
-      ),
-      cell: ({ row }) => row.original.role,
-    },
-    {
-      id: 'actions',
-      cell: ({ row }) => (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon" className="h-8 w-8">
-              <MoreHorizontal className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem onClick={() => console.log('edit', row.original)}>
-              Edit
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => console.log('remove', row.original)}>
-              Remove
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      ),
-    },
-  ];
-
-  return (
-    <AdminLayout className="h-[700px]">
-      <AdminHeader
-        logo={
-          <Row gap={2} align="center">
-            <Row justify="center" align="center" className="h-8 w-8">
-              <svg viewBox="0 0 24 24" className="h-6 w-6" fill="none">
-                <rect x="2" y="2" width="8" height="8" rx="1" fill="currentColor" />
-                <rect x="2" y="14" width="8" height="8" rx="1" fill="currentColor" />
-                <rect x="14" y="2" width="8" height="8" rx="1" fill="currentColor" />
-                <rect x="14" y="14" width="8" height="8" rx="1" fill="currentColor" />
-              </svg>
-            </Row>
-          </Row>
-        }
-        title="Administration"
-      >
-        <AdminHeaderActions notifications={1} />
-      </AdminHeader>
-
-      <AdminContent>
-        <AdminSidebar width={260}>
-          <div className="border-b px-4 py-3">
-            <Row gap={2} align="center" className="text-sm font-medium">
-              <svg
-                viewBox="0 0 24 24"
-                className="h-5 w-5"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-              >
-                <rect x="3" y="3" width="18" height="18" rx="2" />
-                <path d="M3 9h18" />
-                <path d="M9 21V9" />
-              </svg>
-              POPoC
-            </Row>
-          </div>
-          <AdminSidebarHeader title="Tenants" onSearch={() => undefined} onAdd={() => undefined} />
-          <AdminSidebarNav
-            items={navItems}
-            selectedId={selectedTenant}
-            onSelect={setSelectedTenant}
-          />
-        </AdminSidebar>
-
-        <AdminMain>
-          <AdminPageHeader
-            title="Manage access"
-            breadcrumb={[
-              { label: 'POPoC' },
-              { label: 'DefaultTenant' },
-              { label: 'Manage access' },
-            ]}
-            tabs={[
-              { value: 'assignments', label: 'Role assignments' },
-              { value: 'roles', label: 'Roles' },
-            ]}
-            activeTab={activeTab}
-            onTabChange={setActiveTab}
-            actions={
-              <>
-                <Button variant="link">Check access</Button>
-                <Button>Assign role</Button>
-              </>
-            }
-          />
-
-          <AdminToolbar
-            actions={
-              <Button variant="ghost" size="icon" className="h-8 w-8">
-                <RefreshCw className="h-4 w-4" />
-              </Button>
-            }
-          >
-            <AdminFilter
-              label="Name"
-              value={nameFilter}
-              options={[
-                { value: 'all', label: 'All' },
-                { value: 'users', label: 'Users' },
-                { value: 'groups', label: 'Groups' },
-              ]}
-              onValueChange={setNameFilter}
-            />
-            <AdminFilter
-              label="Roles"
-              value={roleFilter}
-              options={[
-                { value: 'all', label: 'All' },
-                { value: 'admin', label: 'Administrator' },
-                { value: 'viewer', label: 'Viewer' },
-              ]}
-              onValueChange={setRoleFilter}
-            />
-          </AdminToolbar>
-
-          <Column flex={1} overflow="auto" className="px-6">
-            <AdminTable columns={columns} data={users} compact />
-          </Column>
-
-          <AdminPagination
-            total={users.length}
-            page={page}
-            pageSize={pageSize}
-            onPageChange={setPage}
-            onPageSizeChange={setPageSize}
-          />
-        </AdminMain>
-      </AdminContent>
-    </AdminLayout>
-  );
-}
-
-export const Default = {
-  // @ts-expect-error - args not needed when using render, but Storybook requires it
-  args: {},
-  render: () => <AdminPageDemo />,
-} satisfies Story;
-
-// Simple settings page
-function SettingsPageDemo() {
-  const [selectedSection, setSelectedSection] = React.useState('general');
-
-  const sections = [
-    { id: 'general', label: 'General', icon: <Globe className="h-4 w-4" /> },
-    { id: 'users', label: 'Users', icon: <Users className="h-4 w-4" /> },
-    { id: 'security', label: 'Security', icon: <Code className="h-4 w-4" /> },
-  ];
-
-  return (
-    <AdminLayout className="h-[500px]">
-      <AdminHeader title="Settings">
-        <AdminHeaderActions />
-      </AdminHeader>
-      <AdminContent>
-        <AdminSidebar width={220}>
-          <AdminSidebarNav
-            items={sections}
-            selectedId={selectedSection}
-            onSelect={setSelectedSection}
-          />
-        </AdminSidebar>
-        <AdminMain>
-          <AdminPageHeader title="General Settings" />
-          <div className="flex-1 p-6">
-            <p className="text-muted-foreground">Settings content goes here.</p>
-          </div>
-        </AdminMain>
-      </AdminContent>
-    </AdminLayout>
-  );
-}
-
-export const SettingsPage = {
-  // @ts-expect-error - args not needed when using render, but Storybook requires it
-  args: {},
-  render: () => <SettingsPageDemo />,
-} satisfies Story;
diff --git a/packages/apollo-wind/src/templates/admin-layout-example.tsx b/packages/apollo-wind/src/templates/admin-layout-example.tsx
deleted file mode 100644
index a1570b9f4..000000000
--- a/packages/apollo-wind/src/templates/admin-layout-example.tsx
+++ /dev/null
@@ -1,483 +0,0 @@
-import * as React from 'react';
-import { cn } from '@/lib';
-import { Search, Plus, ChevronsLeft, ChevronsRight, HelpCircle, Bell } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '@/components/ui/breadcrumb';
-import {
-  DataTable,
-  DataTableColumnHeader,
-  DataTableSelectColumn,
-} from '@/components/ui/data-table';
-import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-  PaginationLink,
-  PaginationPrevious,
-  PaginationNext,
-  PaginationEllipsis,
-} from '@/components/ui/pagination';
-import { Row, Column } from '@/components/ui/layout';
-
-// Admin Layout Container
-interface AdminLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-}
-
-export function AdminLayout({ className, children, ...props }: AdminLayoutProps) {
-  return (
-    <div
-      className={cn(
-        'flex h-[700px] w-full flex-col overflow-hidden rounded-lg border bg-background',
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-}
-
-// Top Header Bar
-interface AdminHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
-  logo?: React.ReactNode;
-  title?: string;
-  children?: React.ReactNode;
-}
-
-export function AdminHeader({ className, logo, title, children, ...props }: AdminHeaderProps) {
-  return (
-    <header
-      className={cn(
-        'flex h-14 items-center justify-between border-b bg-background px-4',
-        className
-      )}
-      {...props}
-    >
-      <Row gap={3} align="center">
-        {logo}
-        {title && <span className="text-lg font-semibold">{title}</span>}
-      </Row>
-      <Row gap={2} align="center">
-        {children}
-      </Row>
-    </header>
-  );
-}
-
-// Header Actions (notifications, help, profile)
-interface AdminHeaderActionsProps {
-  notifications?: number;
-  avatar?: React.ReactNode;
-}
-
-export function AdminHeaderActions({ notifications, avatar }: AdminHeaderActionsProps) {
-  return (
-    <Row gap={1} align="center">
-      <Button variant="ghost" size="icon" className="relative">
-        <Bell className="h-5 w-5" />
-        {notifications && notifications > 0 && (
-          <span className="absolute -right-0.5 -top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-destructive text-[10px] text-destructive-foreground">
-            {notifications}
-          </span>
-        )}
-      </Button>
-      <Button variant="ghost" size="icon">
-        <HelpCircle className="h-5 w-5" />
-      </Button>
-      {avatar || (
-        <div className="ml-2 flex h-8 w-8 items-center justify-center rounded-full bg-primary text-xs font-medium text-primary-foreground">
-          SN
-        </div>
-      )}
-    </Row>
-  );
-}
-
-// Main Content Area with Sidebar
-interface AdminContentProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-}
-
-export function AdminContent({ className, children, ...props }: AdminContentProps) {
-  return (
-    <Row flex={1} overflow="hidden" className={className} {...props}>
-      {children}
-    </Row>
-  );
-}
-
-// Sidebar
-interface AdminSidebarProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  width?: number;
-}
-
-export function AdminSidebar({ className, children, width = 280, ...props }: AdminSidebarProps) {
-  return (
-    <Column className={cn('border-r bg-muted/30', className)} style={{ width }} {...props}>
-      {children}
-    </Column>
-  );
-}
-
-// Sidebar Header with title and actions
-interface AdminSidebarHeaderProps {
-  title: string;
-  onSearch?: () => void;
-  onAdd?: () => void;
-}
-
-export function AdminSidebarHeader({ title, onSearch, onAdd }: AdminSidebarHeaderProps) {
-  return (
-    <Row justify="between" align="center" className="border-b px-4 py-3">
-      <span className="text-sm font-medium">{title}</span>
-      <Row gap={1} align="center">
-        {onSearch && (
-          <Button variant="ghost" size="icon" className="h-7 w-7" onClick={onSearch}>
-            <Search className="h-4 w-4" />
-          </Button>
-        )}
-        {onAdd && (
-          <Button variant="ghost" size="icon" className="h-7 w-7" onClick={onAdd}>
-            <Plus className="h-4 w-4" />
-          </Button>
-        )}
-      </Row>
-    </Row>
-  );
-}
-
-// Sidebar Navigation Item
-interface AdminNavItem {
-  id: string;
-  label: string;
-  icon?: React.ReactNode;
-  badge?: React.ReactNode;
-}
-
-interface AdminSidebarNavProps {
-  items: AdminNavItem[];
-  selectedId?: string;
-  onSelect?: (id: string) => void;
-}
-
-export function AdminSidebarNav({ items, selectedId, onSelect }: AdminSidebarNavProps) {
-  return (
-    <ScrollArea className="flex-1">
-      <nav className="p-2">
-        {items.map((item) => (
-          <Row
-            key={item.id}
-            gap={2}
-            align="center"
-            className={cn(
-              'cursor-pointer rounded-md px-3 py-2 text-sm transition-colors',
-              selectedId === item.id
-                ? 'bg-primary/10 text-primary'
-                : 'text-muted-foreground hover:bg-muted hover:text-foreground'
-            )}
-            onClick={() => onSelect?.(item.id)}
-          >
-            {item.icon}
-            <span className="flex-1 truncate">{item.label}</span>
-            {item.badge}
-          </Row>
-        ))}
-      </nav>
-    </ScrollArea>
-  );
-}
-
-// Main Panel
-interface AdminMainProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-}
-
-export function AdminMain({ className, children, ...props }: AdminMainProps) {
-  return (
-    <Column flex={1} overflow="hidden" className={className} {...props}>
-      {children}
-    </Column>
-  );
-}
-
-// Breadcrumb
-interface BreadcrumbItemType {
-  label: string;
-  href?: string;
-}
-
-interface AdminBreadcrumbProps {
-  items: BreadcrumbItemType[];
-}
-
-export function AdminBreadcrumb({ items }: AdminBreadcrumbProps) {
-  return (
-    <Breadcrumb>
-      <BreadcrumbList>
-        {items.map((item, index) => (
-          <React.Fragment key={item.label}>
-            {index > 0 && <BreadcrumbSeparator />}
-            <BreadcrumbItem>
-              {index === items.length - 1 ? (
-                <BreadcrumbPage>{item.label}</BreadcrumbPage>
-              ) : (
-                <BreadcrumbLink href={item.href || '#'}>{item.label}</BreadcrumbLink>
-              )}
-            </BreadcrumbItem>
-          </React.Fragment>
-        ))}
-      </BreadcrumbList>
-    </Breadcrumb>
-  );
-}
-
-// Page Header
-interface AdminPageHeaderProps {
-  title: string;
-  breadcrumb?: BreadcrumbItemType[];
-  actions?: React.ReactNode;
-  tabs?: { value: string; label: string }[];
-  activeTab?: string;
-  onTabChange?: (value: string) => void;
-}
-
-export function AdminPageHeader({
-  title,
-  breadcrumb,
-  actions,
-  tabs,
-  activeTab,
-  onTabChange,
-}: AdminPageHeaderProps) {
-  return (
-    <div className="border-b px-6 py-4">
-      {breadcrumb && (
-        <div className="mb-2">
-          <AdminBreadcrumb items={breadcrumb} />
-        </div>
-      )}
-      <Row justify="between" align="center">
-        <h1 className="text-xl font-semibold">{title}</h1>
-        {actions && (
-          <Row gap={2} align="center">
-            {actions}
-          </Row>
-        )}
-      </Row>
-      {tabs && (
-        <Tabs value={activeTab} onValueChange={onTabChange} className="mt-4">
-          <TabsList className="h-auto bg-transparent p-0">
-            {tabs.map((tab) => (
-              <TabsTrigger
-                key={tab.value}
-                value={tab.value}
-                className="rounded-none border-b-2 border-transparent px-4 pb-2 pt-1 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
-              >
-                {tab.label}
-              </TabsTrigger>
-            ))}
-          </TabsList>
-        </Tabs>
-      )}
-    </div>
-  );
-}
-
-// Toolbar with filters
-interface AdminToolbarProps {
-  children?: React.ReactNode;
-  actions?: React.ReactNode;
-}
-
-export function AdminToolbar({ children, actions }: AdminToolbarProps) {
-  return (
-    <Row justify="between" align="center" className="border-b px-6 py-3">
-      <Row gap={3} align="center">
-        {children}
-      </Row>
-      <Row gap={2} align="center">
-        {actions}
-      </Row>
-    </Row>
-  );
-}
-
-// Filter Dropdown
-interface AdminFilterProps {
-  label: string;
-  value: string;
-  options: { value: string; label: string }[];
-  onValueChange?: (value: string) => void;
-}
-
-export function AdminFilter({ label, value, options, onValueChange }: AdminFilterProps) {
-  return (
-    <Row gap={1.5} align="center" className="text-sm">
-      <span className="text-muted-foreground">{label}:</span>
-      <Select value={value} onValueChange={onValueChange}>
-        <SelectTrigger className="h-7 w-auto gap-1 border-0 bg-transparent px-1 font-medium shadow-none">
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          {options.map((option) => (
-            <SelectItem key={option.value} value={option.value}>
-              {option.label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-    </Row>
-  );
-}
-
-// Data Table for Admin
-// Re-export DataTable components for use with AdminLayout
-export { DataTable as AdminTable, DataTableColumnHeader, DataTableSelectColumn };
-
-// Pagination
-interface AdminPaginationProps {
-  total: number;
-  page: number;
-  pageSize: number;
-  onPageChange?: (page: number) => void;
-  onPageSizeChange?: (size: number) => void;
-}
-
-export function AdminPagination({
-  total,
-  page,
-  pageSize,
-  onPageChange,
-  onPageSizeChange,
-}: AdminPaginationProps) {
-  const totalPages = Math.ceil(total / pageSize);
-  const start = (page - 1) * pageSize + 1;
-  const end = Math.min(page * pageSize, total);
-
-  // Generate page numbers to display
-  const getPageNumbers = () => {
-    const pages: number[] = [];
-    const delta = 1; // Number of pages to show on each side of current page
-
-    for (let i = 1; i <= totalPages; i++) {
-      if (
-        i === 1 || // First page
-        i === totalPages || // Last page
-        (i >= page - delta && i <= page + delta) // Pages around current
-      ) {
-        pages.push(i);
-      }
-    }
-
-    return pages;
-  };
-
-  const pageNumbers = getPageNumbers();
-
-  return (
-    <Row justify="between" align="center" className="border-t px-6 py-3">
-      <span className="text-sm text-muted-foreground">
-        {start} - {end} / {total}
-      </span>
-      <Row gap={4} align="center">
-        <Pagination>
-          <PaginationContent>
-            <PaginationItem>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-8 w-8"
-                disabled={page === 1}
-                onClick={() => onPageChange?.(1)}
-              >
-                <ChevronsLeft className="h-4 w-4" />
-              </Button>
-            </PaginationItem>
-            <PaginationItem>
-              <PaginationPrevious
-                onClick={() => page > 1 && onPageChange?.(page - 1)}
-                className={cn(page === 1 && 'pointer-events-none opacity-50')}
-              />
-            </PaginationItem>
-
-            {pageNumbers.map((pageNum, index) => {
-              const prevPage = pageNumbers[index - 1];
-              const showEllipsis = prevPage && pageNum - prevPage > 1;
-
-              return (
-                <React.Fragment key={pageNum}>
-                  {showEllipsis && (
-                    <PaginationItem>
-                      <PaginationEllipsis />
-                    </PaginationItem>
-                  )}
-                  <PaginationItem>
-                    <PaginationLink
-                      onClick={() => onPageChange?.(pageNum)}
-                      isActive={page === pageNum}
-                    >
-                      {pageNum}
-                    </PaginationLink>
-                  </PaginationItem>
-                </React.Fragment>
-              );
-            })}
-
-            <PaginationItem>
-              <PaginationNext
-                onClick={() => page < totalPages && onPageChange?.(page + 1)}
-                className={cn(page === totalPages && 'pointer-events-none opacity-50')}
-              />
-            </PaginationItem>
-            <PaginationItem>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-8 w-8"
-                disabled={page === totalPages}
-                onClick={() => onPageChange?.(totalPages)}
-              >
-                <ChevronsRight className="h-4 w-4" />
-              </Button>
-            </PaginationItem>
-          </PaginationContent>
-        </Pagination>
-
-        {onPageSizeChange && (
-          <Row gap={2} align="center" className="text-sm">
-            <span className="text-muted-foreground">Items</span>
-            <Select value={String(pageSize)} onValueChange={(v) => onPageSizeChange(Number(v))}>
-              <SelectTrigger className="h-8 w-16">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="10">10</SelectItem>
-                <SelectItem value="25">25</SelectItem>
-                <SelectItem value="50">50</SelectItem>
-                <SelectItem value="100">100</SelectItem>
-              </SelectContent>
-            </Select>
-          </Row>
-        )}
-      </Row>
-    </Row>
-  );
-}
diff --git a/packages/apollo-wind/src/templates/app-shell-example.stories.tsx b/packages/apollo-wind/src/templates/app-shell-example.stories.tsx
deleted file mode 100644
index d0cadb89c..000000000
--- a/packages/apollo-wind/src/templates/app-shell-example.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { AppShellExample } from './app-shell-example';
-
-const meta = {
-  title: 'Templates/Current/App Shell',
-  component: AppShellExample,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} satisfies Meta<typeof AppShellExample>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
diff --git a/packages/apollo-wind/src/templates/app-shell-example.tsx b/packages/apollo-wind/src/templates/app-shell-example.tsx
deleted file mode 100644
index da934d310..000000000
--- a/packages/apollo-wind/src/templates/app-shell-example.tsx
+++ /dev/null
@@ -1,362 +0,0 @@
-import { Bell, ChevronLeft, ChevronRight, HelpCircle, Menu } from 'lucide-react';
-import * as React from 'react';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { Separator } from '@/components/ui/separator';
-import { cn } from '@/lib';
-import { Row, Column, Grid } from '@/components/ui/layout';
-
-export interface AppShellExampleProps {
-  className?: string;
-  logo?: React.ReactNode;
-  tenant?: string;
-  user?: {
-    name: string;
-    email: string;
-    avatar?: string;
-  };
-  navigation?: Array<{
-    label: string;
-    href?: string;
-    active?: boolean;
-    badge?: string;
-  }>;
-  heroSection?: {
-    title: React.ReactNode;
-    description?: string;
-    cta?: {
-      label: string;
-      onClick?: () => void;
-    };
-    illustration?: React.ReactNode;
-  };
-  sections?: Array<{
-    title: string;
-    viewAllLink?: {
-      label: string;
-      onClick?: () => void;
-    };
-    items: Array<{
-      id: string;
-      title: string;
-      description?: string;
-      badge?: {
-        label: string;
-        variant?: 'default' | 'secondary' | 'destructive' | 'outline';
-      };
-      footer?: string;
-      action?: {
-        label: string;
-        onClick?: () => void;
-      };
-    }>;
-  }>;
-  sidebar?: {
-    title: string;
-    content: React.ReactNode;
-  };
-}
-
-export function AppShellExample({
-  className,
-  logo = <div className="text-xl font-bold">Logo</div>,
-  tenant = 'DefaultTenant',
-  user = {
-    name: 'John Doe',
-    email: 'john.doe@example.com',
-  },
-  navigation = [
-    { label: 'Home', active: true },
-    { label: 'Process instances' },
-    { label: 'Process incidents' },
-    { label: 'Case app', badge: 'Preview' },
-    { label: 'Case instances', badge: 'Preview' },
-  ],
-  heroSection = {
-    title: (
-      <>
-        Orchestrate <span className="text-primary">AI agents, robots,</span> and people with{' '}
-        <span className="text-primary">Platform</span> to exceed business outcomes
-      </>
-    ),
-    cta: {
-      label: 'Get Started',
-    },
-  },
-  sections = [
-    {
-      title: 'Recent projects',
-      viewAllLink: { label: 'View all projects' },
-      items: [
-        {
-          id: '1',
-          title: 'Solution 161',
-          badge: { label: 'DRAFT', variant: 'outline' },
-          footer: 'Last modified 13 minutes ago',
-        },
-        {
-          id: '2',
-          title: 'Property insurance claims',
-          badge: { label: 'DRAFT', variant: 'outline' },
-          footer: 'Last modified 7 days ago',
-        },
-        {
-          id: '3',
-          title: 'Property insurance claims',
-          badge: { label: 'DEPLOYED', variant: 'default' },
-          footer: 'Last modified 7 hours ago',
-        },
-      ],
-    },
-    {
-      title: 'Examples',
-      items: [
-        {
-          id: '1',
-          title: 'Supplier Onboarding',
-          description:
-            'An agentic process built with Platform (Agentic Orchestration), modeled using...',
-          action: { label: 'View' },
-        },
-        {
-          id: '2',
-          title: 'Invoice Processing',
-          description:
-            'An agentic process built with Platform (Agentic Orchestration), modeled using...',
-          action: { label: 'View' },
-        },
-        {
-          id: '3',
-          title: 'MyPoNewTeMplate',
-          description: 'aav',
-          action: { label: 'View' },
-        },
-      ],
-    },
-  ],
-  sidebar = {
-    title: 'How it works',
-    content: (
-      <div className="space-y-4">
-        <div className="rounded-lg bg-primary/10 p-4">
-          <p className="text-sm">Learn more about how to use this platform effectively.</p>
-        </div>
-      </div>
-    ),
-  },
-}: AppShellExampleProps) {
-  const [leftSidebarCollapsed, setLeftSidebarCollapsed] = React.useState(false);
-  const [rightSidebarCollapsed, setRightSidebarCollapsed] = React.useState(false);
-
-  return (
-    <Column h="screen" className={cn('bg-background', className)}>
-      {/* Header */}
-      <Row h={14} justify="between" align="center" className="border-b px-4">
-        <Row gap={4} align="center">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="md:hidden"
-            onClick={() => setLeftSidebarCollapsed(!leftSidebarCollapsed)}
-          >
-            <Menu className="h-5 w-5" />
-          </Button>
-          {logo}
-        </Row>
-
-        <Row gap={2} align="center">
-          <Button variant="ghost" size="icon">
-            <Bell className="h-5 w-5" />
-          </Button>
-          <Button variant="ghost" size="icon">
-            <HelpCircle className="h-5 w-5" />
-          </Button>
-          <Separator orientation="vertical" className="h-6" />
-          <Row gap={2} align="center">
-            <span className="hidden text-sm md:inline">Tenant:</span>
-            <Button variant="ghost" className="font-normal">
-              {tenant}
-              <ChevronRight className="ml-1 h-4 w-4 rotate-90" />
-            </Button>
-          </Row>
-          <Avatar className="h-8 w-8">
-            <AvatarImage src={user.avatar} alt={user.name} />
-            <AvatarFallback>
-              {user.name
-                .split(' ')
-                .map((n) => n[0])
-                .join('')
-                .toUpperCase()}
-            </AvatarFallback>
-          </Avatar>
-        </Row>
-      </Row>
-
-      <Row flex={1} overflow="hidden">
-        {/* Left Sidebar */}
-        <aside
-          className={cn(
-            'relative hidden border-r bg-muted/10 transition-all duration-300 md:block',
-            leftSidebarCollapsed ? 'w-12' : 'w-60'
-          )}
-        >
-          <Column h="full" overflow="hidden">
-            <Row justify="end" align="center" className="p-2">
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={() => setLeftSidebarCollapsed(!leftSidebarCollapsed)}
-                className="h-8 w-8"
-              >
-                {leftSidebarCollapsed ? (
-                  <ChevronRight className="h-4 w-4" />
-                ) : (
-                  <ChevronLeft className="h-4 w-4" />
-                )}
-              </Button>
-            </Row>
-            {!leftSidebarCollapsed && (
-              <nav className="space-y-1 overflow-y-auto p-2 pt-0">
-                {navigation.map((item, index) => (
-                  <Button
-                    key={index}
-                    variant={item.active ? 'secondary' : 'ghost'}
-                    className="w-full justify-between"
-                  >
-                    <span>{item.label}</span>
-                    {item.badge && (
-                      <Badge variant="secondary" className="ml-2 text-xs">
-                        {item.badge}
-                      </Badge>
-                    )}
-                  </Button>
-                ))}
-              </nav>
-            )}
-          </Column>
-        </aside>
-
-        {/* Main Content */}
-        <main className="flex-1 overflow-y-auto">
-          <div className="container mx-auto p-6">
-            {/* Hero Section */}
-            {heroSection && (
-              <Card className="mb-8 border-0 bg-gradient-to-r from-muted/50 to-muted/20">
-                <CardContent className="p-8">
-                  <Row gap={6} align="center" justify="between" className="flex-col md:flex-row">
-                    <Column align="start" gap={4} flex={1}>
-                      <h1 className="text-3xl font-bold leading-tight md:text-4xl">
-                        {heroSection.title}
-                      </h1>
-                      {heroSection.description && (
-                        <p className="text-muted-foreground">{heroSection.description}</p>
-                      )}
-                      {heroSection.cta && (
-                        <Button size="lg" onClick={heroSection.cta.onClick}>
-                          {heroSection.cta.label}
-                        </Button>
-                      )}
-                    </Column>
-                    {heroSection.illustration && (
-                      <div className="flex-shrink-0">{heroSection.illustration}</div>
-                    )}
-                  </Row>
-                </CardContent>
-              </Card>
-            )}
-
-            {/* Content Sections */}
-            {sections.map((section, sectionIndex) => (
-              <div key={sectionIndex} className="mb-8">
-                <Row justify="between" align="center" className="mb-4">
-                  <h2 className="text-2xl font-semibold">{section.title}</h2>
-                  {section.viewAllLink && (
-                    <Button variant="link" onClick={section.viewAllLink.onClick}>
-                      {section.viewAllLink.label}
-                    </Button>
-                  )}
-                </Row>
-                <Grid gap={4} cols={3} className="md:grid-cols-2 lg:grid-cols-3">
-                  {section.items.map((item) => (
-                    <Card key={item.id}>
-                      <CardHeader>
-                        {item.badge && (
-                          <Badge variant={item.badge.variant} className="mb-2 w-fit text-xs">
-                            {item.badge.label}
-                          </Badge>
-                        )}
-                        <CardTitle className="text-lg">{item.title}</CardTitle>
-                        {item.description && <CardDescription>{item.description}</CardDescription>}
-                      </CardHeader>
-                      {(item.footer || item.action) && (
-                        <CardFooter>
-                          <Row justify="between" align="center" w="full">
-                            {item.footer && (
-                              <span className="text-xs text-muted-foreground">{item.footer}</span>
-                            )}
-                            {item.action && (
-                              <Button
-                                variant="link"
-                                size="sm"
-                                onClick={item.action.onClick}
-                                className="ml-auto"
-                              >
-                                {item.action.label}
-                              </Button>
-                            )}
-                          </Row>
-                        </CardFooter>
-                      )}
-                    </Card>
-                  ))}
-                </Grid>
-              </div>
-            ))}
-          </div>
-        </main>
-
-        {/* Right Sidebar */}
-        {sidebar && (
-          <aside
-            className={cn(
-              'relative hidden border-l bg-muted/10 transition-all duration-300 lg:block',
-              rightSidebarCollapsed ? 'w-12' : 'w-80'
-            )}
-          >
-            <Column h="full" overflow="hidden">
-              <Row justify="start" align="center" className="p-2">
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={() => setRightSidebarCollapsed(!rightSidebarCollapsed)}
-                  className="h-8 w-8"
-                >
-                  {rightSidebarCollapsed ? (
-                    <ChevronLeft className="h-4 w-4" />
-                  ) : (
-                    <ChevronRight className="h-4 w-4" />
-                  )}
-                </Button>
-              </Row>
-              {!rightSidebarCollapsed && (
-                <div className="flex-1 overflow-y-auto px-6 pb-6">
-                  <h3 className="mb-4 text-lg font-semibold">{sidebar.title}</h3>
-                  {sidebar.content}
-                </div>
-              )}
-            </Column>
-          </aside>
-        )}
-      </Row>
-    </Column>
-  );
-}
diff --git a/packages/apollo-wind/src/templates/dashboard-example.stories.tsx b/packages/apollo-wind/src/templates/dashboard-example.stories.tsx
deleted file mode 100644
index 2b2564956..000000000
--- a/packages/apollo-wind/src/templates/dashboard-example.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { DashboardExample } from './dashboard-example';
-
-const meta = {
-  title: 'Templates/Current/Dashboard',
-  component: DashboardExample,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} satisfies Meta<typeof DashboardExample>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
diff --git a/packages/apollo-wind/src/templates/dashboard-example.tsx b/packages/apollo-wind/src/templates/dashboard-example.tsx
deleted file mode 100644
index 31f3279f3..000000000
--- a/packages/apollo-wind/src/templates/dashboard-example.tsx
+++ /dev/null
@@ -1,388 +0,0 @@
-import * as React from 'react';
-import { ColumnDef } from '@tanstack/react-table';
-import { Activity, CreditCard, DollarSign, Users, MoreHorizontal } from 'lucide-react';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import {
-  DataTable,
-  DataTableColumnHeader,
-  DataTableSelectColumn,
-} from '@/components/ui/data-table';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { Row, Column, Grid } from '@/components/ui/layout';
-import { Progress } from '@/components/ui/progress';
-import { Separator } from '@/components/ui/separator';
-import { StatsCard } from '@/components/ui/stats-card';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { cn } from '@/lib';
-
-// Types
-interface Transaction {
-  id: string;
-  customer: string;
-  email: string;
-  amount: number;
-  status: 'completed' | 'pending' | 'failed';
-  date: string;
-}
-
-interface ActivityItem {
-  id: string;
-  user: string;
-  action: string;
-  time: string;
-  avatar?: string;
-}
-
-export interface DashboardExampleProps {
-  className?: string;
-  title?: string;
-  description?: string;
-  user?: {
-    name: string;
-    email: string;
-    avatar?: string;
-  };
-}
-
-// Sample data
-const transactions: Transaction[] = [
-  {
-    id: '1',
-    customer: 'Olivia Martin',
-    email: 'olivia@example.com',
-    amount: 1999.0,
-    status: 'completed',
-    date: '2024-01-15',
-  },
-  {
-    id: '2',
-    customer: 'Jackson Lee',
-    email: 'jackson@example.com',
-    amount: 39.0,
-    status: 'completed',
-    date: '2024-01-14',
-  },
-  {
-    id: '3',
-    customer: 'Isabella Nguyen',
-    email: 'isabella@example.com',
-    amount: 299.0,
-    status: 'pending',
-    date: '2024-01-14',
-  },
-  {
-    id: '4',
-    customer: 'William Kim',
-    email: 'will@example.com',
-    amount: 99.0,
-    status: 'completed',
-    date: '2024-01-13',
-  },
-  {
-    id: '5',
-    customer: 'Sofia Davis',
-    email: 'sofia@example.com',
-    amount: 450.0,
-    status: 'failed',
-    date: '2024-01-12',
-  },
-];
-
-const recentActivity: ActivityItem[] = [
-  {
-    id: '1',
-    user: 'Olivia Martin',
-    action: 'Completed purchase of $1,999.00',
-    time: '2 min ago',
-  },
-  {
-    id: '2',
-    user: 'Jackson Lee',
-    action: 'Created new account',
-    time: '1 hour ago',
-  },
-  {
-    id: '3',
-    user: 'Isabella Nguyen',
-    action: 'Submitted support ticket #1234',
-    time: '3 hours ago',
-  },
-  {
-    id: '4',
-    user: 'William Kim',
-    action: 'Updated billing information',
-    time: '5 hours ago',
-  },
-];
-
-const columns: ColumnDef<Transaction, unknown>[] = [
-  DataTableSelectColumn<Transaction>(),
-  {
-    accessorKey: 'customer',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Customer" />,
-    cell: ({ row }) => (
-      <Row gap={2} align="center">
-        <Avatar className="h-8 w-8">
-          <AvatarFallback>
-            {row.original.customer
-              .split(' ')
-              .map((n) => n[0])
-              .join('')}
-          </AvatarFallback>
-        </Avatar>
-        <Column gap={0}>
-          <div className="font-medium">{row.original.customer}</div>
-          <div className="text-xs text-muted-foreground">{row.original.email}</div>
-        </Column>
-      </Row>
-    ),
-  },
-  {
-    accessorKey: 'amount',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Amount" />,
-    cell: ({ row }) => {
-      const amount = parseFloat(row.getValue('amount'));
-      const formatted = new Intl.NumberFormat('en-US', {
-        style: 'currency',
-        currency: 'USD',
-      }).format(amount);
-      return <div className="font-medium">{formatted}</div>;
-    },
-  },
-  {
-    accessorKey: 'status',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
-    cell: ({ row }) => {
-      const status = row.getValue('status') as string;
-      return (
-        <Badge
-          variant={
-            status === 'completed' ? 'default' : status === 'pending' ? 'secondary' : 'destructive'
-          }
-        >
-          {status}
-        </Badge>
-      );
-    },
-  },
-  {
-    accessorKey: 'date',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Date" />,
-  },
-  {
-    id: 'actions',
-    cell: () => (
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="icon" className="h-8 w-8">
-            <MoreHorizontal className="h-4 w-4" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          <DropdownMenuItem>View details</DropdownMenuItem>
-          <DropdownMenuItem>Download receipt</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    ),
-  },
-];
-
-export function DashboardExample({
-  className,
-  title = 'Dashboard',
-  description = "Welcome back! Here's an overview of your business.",
-  user = { name: 'John Doe', email: 'john@example.com' },
-}: DashboardExampleProps) {
-  const [activeTab, setActiveTab] = React.useState('overview');
-
-  return (
-    <div className={cn('min-h-screen bg-background', className)}>
-      {/* Header */}
-      <header className="border-b">
-        <div className="container mx-auto flex h-16 items-center justify-between px-4">
-          <div>
-            <h1 className="text-2xl font-bold">{title}</h1>
-            <p className="text-sm text-muted-foreground">{description}</p>
-          </div>
-          <Row gap={4} align="center">
-            <Button variant="outline" size="sm">
-              Download Report
-            </Button>
-            <Separator orientation="vertical" className="h-8" />
-            <Row gap={2} align="center">
-              <Avatar className="h-8 w-8">
-                <AvatarImage src={user.avatar} alt={user.name} />
-                <AvatarFallback>
-                  {user.name
-                    .split(' ')
-                    .map((n) => n[0])
-                    .join('')
-                    .toUpperCase()}
-                </AvatarFallback>
-              </Avatar>
-              <Column gap={0} className="hidden text-sm md:flex">
-                <span className="font-medium">{user.name}</span>
-                <span className="text-xs text-muted-foreground">{user.email}</span>
-              </Column>
-            </Row>
-          </Row>
-        </div>
-      </header>
-
-      {/* Main Content */}
-      <main className="container mx-auto p-4 md:p-6">
-        <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
-          <TabsList>
-            <TabsTrigger value="overview">Overview</TabsTrigger>
-            <TabsTrigger value="analytics">Analytics</TabsTrigger>
-            <TabsTrigger value="reports">Reports</TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="overview" className="space-y-6">
-            {/* Stats Cards */}
-            <Grid gap={4} cols={4} className="md:grid-cols-2 lg:grid-cols-4">
-              <StatsCard
-                title="Total Revenue"
-                value="$45,231.89"
-                description="+20.1% from last month"
-                icon={<DollarSign className="h-4 w-4 text-muted-foreground" />}
-              />
-              <StatsCard
-                title="Subscriptions"
-                value="+2,350"
-                description="+180.1% from last month"
-                icon={<Users className="h-4 w-4 text-muted-foreground" />}
-              />
-              <StatsCard
-                title="Sales"
-                value="+12,234"
-                description="+19% from last month"
-                icon={<CreditCard className="h-4 w-4 text-muted-foreground" />}
-              />
-              <StatsCard
-                title="Active Now"
-                value="+573"
-                description="+201 since last hour"
-                icon={<Activity className="h-4 w-4 text-muted-foreground" />}
-              />
-            </Grid>
-
-            {/* Content Grid */}
-            <Grid gap={4} cols={7} className="lg:grid-cols-7">
-              {/* Transactions Table */}
-              <Card className="lg:col-span-4">
-                <CardHeader>
-                  <CardTitle>Recent Transactions</CardTitle>
-                  <CardDescription>Latest customer transactions</CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <DataTable
-                    columns={columns}
-                    data={transactions}
-                    searchKey="customer"
-                    searchPlaceholder="Search customers..."
-                    compact
-                    showColumnToggle={false}
-                  />
-                </CardContent>
-              </Card>
-
-              {/* Recent Activity */}
-              <Card className="lg:col-span-3">
-                <CardHeader>
-                  <CardTitle>Recent Activity</CardTitle>
-                  <CardDescription>Latest updates from your team</CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  {recentActivity.map((activity) => (
-                    <Row key={activity.id} gap={3} align="start">
-                      <Avatar className="h-8 w-8">
-                        <AvatarImage src={activity.avatar} />
-                        <AvatarFallback>
-                          {activity.user
-                            .split(' ')
-                            .map((n) => n[0])
-                            .join('')}
-                        </AvatarFallback>
-                      </Avatar>
-                      <Column gap={1} flex={1}>
-                        <p className="text-sm">
-                          <span className="font-medium">{activity.user}</span>{' '}
-                          <span className="text-muted-foreground">{activity.action}</span>
-                        </p>
-                        <p className="text-xs text-muted-foreground">{activity.time}</p>
-                      </Column>
-                    </Row>
-                  ))}
-                </CardContent>
-              </Card>
-            </Grid>
-
-            {/* Goals Progress */}
-            <Card>
-              <CardHeader>
-                <CardTitle>Monthly Goals</CardTitle>
-                <CardDescription>Track your progress towards monthly targets</CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <Column gap={2}>
-                  <Row justify="between" align="center" className="text-sm">
-                    <span>Revenue Target</span>
-                    <span className="font-medium">$45,231 / $50,000</span>
-                  </Row>
-                  <Progress value={90} />
-                </Column>
-                <Column gap={2}>
-                  <Row justify="between" align="center" className="text-sm">
-                    <span>New Customers</span>
-                    <span className="font-medium">2,350 / 3,000</span>
-                  </Row>
-                  <Progress value={78} />
-                </Column>
-                <Column gap={2}>
-                  <Row justify="between" align="center" className="text-sm">
-                    <span>Support Tickets Resolved</span>
-                    <span className="font-medium">145 / 150</span>
-                  </Row>
-                  <Progress value={97} />
-                </Column>
-              </CardContent>
-            </Card>
-          </TabsContent>
-
-          <TabsContent value="analytics" className="space-y-6">
-            <Card>
-              <CardHeader>
-                <CardTitle>Analytics</CardTitle>
-                <CardDescription>Detailed analytics coming soon</CardDescription>
-              </CardHeader>
-              <CardContent className="h-[400px] flex items-center justify-center text-muted-foreground">
-                Analytics charts and graphs would go here
-              </CardContent>
-            </Card>
-          </TabsContent>
-
-          <TabsContent value="reports" className="space-y-6">
-            <Card>
-              <CardHeader>
-                <CardTitle>Reports</CardTitle>
-                <CardDescription>Generate and download reports</CardDescription>
-              </CardHeader>
-              <CardContent className="h-[400px] flex items-center justify-center text-muted-foreground">
-                Report generation interface would go here
-              </CardContent>
-            </Card>
-          </TabsContent>
-        </Tabs>
-      </main>
-    </div>
-  );
-}
diff --git a/packages/apollo-wind/src/templates/data-management-example.stories.tsx b/packages/apollo-wind/src/templates/data-management-example.stories.tsx
deleted file mode 100644
index 7f427e33b..000000000
--- a/packages/apollo-wind/src/templates/data-management-example.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { DataManagementExample } from './data-management-example';
-
-const meta = {
-  title: 'Templates/Current/Data Management',
-  component: DataManagementExample,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} satisfies Meta<typeof DataManagementExample>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
diff --git a/packages/apollo-wind/src/templates/data-management-example.tsx b/packages/apollo-wind/src/templates/data-management-example.tsx
deleted file mode 100644
index c27d7a6a9..000000000
--- a/packages/apollo-wind/src/templates/data-management-example.tsx
+++ /dev/null
@@ -1,399 +0,0 @@
-import * as React from 'react';
-import { ColumnDef } from '@tanstack/react-table';
-import { Download, Filter, MoreHorizontal, Plus, RefreshCw, Upload } from 'lucide-react';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import {
-  DataTable,
-  DataTableColumnHeader,
-  DataTableSelectColumn,
-} from '@/components/ui/data-table';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Row, Column, Grid } from '@/components/ui/layout';
-
-// Types
-interface Product {
-  id: string;
-  name: string;
-  sku: string;
-  category: string;
-  price: number;
-  stock: number;
-  status: 'active' | 'draft' | 'archived';
-  createdAt: string;
-}
-
-// Sample data
-const products: Product[] = [
-  {
-    id: '1',
-    name: 'Wireless Headphones',
-    sku: 'WH-001',
-    category: 'Electronics',
-    price: 99.99,
-    stock: 150,
-    status: 'active',
-    createdAt: '2024-01-10',
-  },
-  {
-    id: '2',
-    name: 'USB-C Cable',
-    sku: 'UC-002',
-    category: 'Accessories',
-    price: 12.99,
-    stock: 500,
-    status: 'active',
-    createdAt: '2024-01-09',
-  },
-  {
-    id: '3',
-    name: 'Laptop Stand',
-    sku: 'LS-003',
-    category: 'Accessories',
-    price: 49.99,
-    stock: 75,
-    status: 'active',
-    createdAt: '2024-01-08',
-  },
-  {
-    id: '4',
-    name: 'Mechanical Keyboard',
-    sku: 'MK-004',
-    category: 'Electronics',
-    price: 149.99,
-    stock: 0,
-    status: 'draft',
-    createdAt: '2024-01-07',
-  },
-  {
-    id: '5',
-    name: 'Monitor Light Bar',
-    sku: 'ML-005',
-    category: 'Electronics',
-    price: 59.99,
-    stock: 200,
-    status: 'active',
-    createdAt: '2024-01-06',
-  },
-  {
-    id: '6',
-    name: 'Webcam HD',
-    sku: 'WC-006',
-    category: 'Electronics',
-    price: 79.99,
-    stock: 45,
-    status: 'active',
-    createdAt: '2024-01-05',
-  },
-  {
-    id: '7',
-    name: 'Mouse Pad XL',
-    sku: 'MP-007',
-    category: 'Accessories',
-    price: 24.99,
-    stock: 300,
-    status: 'active',
-    createdAt: '2024-01-04',
-  },
-  {
-    id: '8',
-    name: 'Phone Holder',
-    sku: 'PH-008',
-    category: 'Accessories',
-    price: 19.99,
-    stock: 0,
-    status: 'archived',
-    createdAt: '2024-01-03',
-  },
-  {
-    id: '9',
-    name: 'Bluetooth Speaker',
-    sku: 'BS-009',
-    category: 'Electronics',
-    price: 39.99,
-    stock: 120,
-    status: 'active',
-    createdAt: '2024-01-02',
-  },
-  {
-    id: '10',
-    name: 'Screen Protector',
-    sku: 'SP-010',
-    category: 'Accessories',
-    price: 9.99,
-    stock: 1000,
-    status: 'active',
-    createdAt: '2024-01-01',
-  },
-];
-
-const columns: ColumnDef<Product, unknown>[] = [
-  DataTableSelectColumn<Product>(),
-  {
-    accessorKey: 'name',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Product" />,
-    cell: ({ row }) => (
-      <div>
-        <div className="font-medium">{row.original.name}</div>
-        <div className="text-xs text-muted-foreground">{row.original.sku}</div>
-      </div>
-    ),
-  },
-  {
-    accessorKey: 'category',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Category" />,
-  },
-  {
-    accessorKey: 'price',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Price" />,
-    cell: ({ row }) => {
-      const price = parseFloat(row.getValue('price'));
-      return new Intl.NumberFormat('en-US', {
-        style: 'currency',
-        currency: 'USD',
-      }).format(price);
-    },
-  },
-  {
-    accessorKey: 'stock',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Stock" />,
-    cell: ({ row }) => {
-      const stock = row.getValue('stock') as number;
-      return (
-        <span className={stock === 0 ? 'text-destructive font-medium' : ''}>
-          {stock === 0 ? 'Out of stock' : stock}
-        </span>
-      );
-    },
-  },
-  {
-    accessorKey: 'status',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
-    cell: ({ row }) => {
-      const status = row.getValue('status') as string;
-      return (
-        <Badge
-          variant={status === 'active' ? 'default' : status === 'draft' ? 'secondary' : 'outline'}
-        >
-          {status}
-        </Badge>
-      );
-    },
-  },
-  {
-    accessorKey: 'createdAt',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Created" />,
-  },
-  {
-    id: 'actions',
-    cell: () => (
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="icon" className="h-8 w-8">
-            <MoreHorizontal className="h-4 w-4" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          <DropdownMenuItem>Edit</DropdownMenuItem>
-          <DropdownMenuItem>Duplicate</DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem className="text-destructive">Delete</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    ),
-  },
-];
-
-export function DataManagementExample() {
-  const [activeTab, setActiveTab] = React.useState('all');
-  const [categoryFilter, setCategoryFilter] = React.useState('all');
-  const [isCreateDialogOpen, setIsCreateDialogOpen] = React.useState(false);
-
-  const filteredProducts = React.useMemo(() => {
-    let filtered = products;
-
-    if (activeTab !== 'all') {
-      filtered = filtered.filter((p) => p.status === activeTab);
-    }
-
-    if (categoryFilter !== 'all') {
-      filtered = filtered.filter((p) => p.category === categoryFilter);
-    }
-
-    return filtered;
-  }, [activeTab, categoryFilter]);
-
-  const categories = [...new Set(products.map((p) => p.category))];
-
-  return (
-    <Column minH="screen" className="bg-background">
-      {/* Header */}
-      <header className="border-b">
-        <Row h={14} justify="between" align="center" className="container mx-auto px-4">
-          <Column gap={0}>
-            <h1 className="text-lg font-semibold">Products</h1>
-          </Column>
-          <Row gap={2} align="center">
-            <Button variant="outline" size="sm">
-              <Upload className="mr-2 h-4 w-4" />
-              Import
-            </Button>
-            <Button variant="outline" size="sm">
-              <Download className="mr-2 h-4 w-4" />
-              Export
-            </Button>
-            <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
-              <DialogTrigger asChild>
-                <Button size="sm">
-                  <Plus className="mr-2 h-4 w-4" />
-                  Add Product
-                </Button>
-              </DialogTrigger>
-              <DialogContent>
-                <DialogHeader>
-                  <DialogTitle>Add New Product</DialogTitle>
-                  <DialogDescription>Enter the details for the new product.</DialogDescription>
-                </DialogHeader>
-                <Column gap={4} className="py-4">
-                  <Column gap={2}>
-                    <Label htmlFor="productName">Product name</Label>
-                    <Input id="productName" placeholder="Enter product name" />
-                  </Column>
-                  <Grid cols={2} gap={4}>
-                    <Column gap={2}>
-                      <Label htmlFor="sku">SKU</Label>
-                      <Input id="sku" placeholder="XX-000" />
-                    </Column>
-                    <Column gap={2}>
-                      <Label htmlFor="price">Price</Label>
-                      <Input id="price" type="number" placeholder="0.00" />
-                    </Column>
-                  </Grid>
-                  <Column gap={2}>
-                    <Label htmlFor="category">Category</Label>
-                    <Select>
-                      <SelectTrigger id="category">
-                        <SelectValue placeholder="Select category" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {categories.map((cat) => (
-                          <SelectItem key={cat} value={cat}>
-                            {cat}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  </Column>
-                  <Column gap={2}>
-                    <Label htmlFor="stock">Initial stock</Label>
-                    <Input id="stock" type="number" placeholder="0" />
-                  </Column>
-                </Column>
-                <DialogFooter>
-                  <Button variant="outline" onClick={() => setIsCreateDialogOpen(false)}>
-                    Cancel
-                  </Button>
-                  <Button onClick={() => setIsCreateDialogOpen(false)}>Create product</Button>
-                </DialogFooter>
-              </DialogContent>
-            </Dialog>
-          </Row>
-        </Row>
-      </header>
-
-      <main className="container mx-auto p-4 md:p-6">
-        {/* Tabs and Filters */}
-        <Row
-          gap={4}
-          justify="between"
-          align="center"
-          className="mb-4 flex-col sm:flex-row sm:items-center"
-        >
-          <Tabs value={activeTab} onValueChange={setActiveTab}>
-            <TabsList>
-              <TabsTrigger value="all">
-                All{' '}
-                <Badge variant="secondary" className="ml-2">
-                  {products.length}
-                </Badge>
-              </TabsTrigger>
-              <TabsTrigger value="active">
-                Active{' '}
-                <Badge variant="secondary" className="ml-2">
-                  {products.filter((p) => p.status === 'active').length}
-                </Badge>
-              </TabsTrigger>
-              <TabsTrigger value="draft">
-                Draft{' '}
-                <Badge variant="secondary" className="ml-2">
-                  {products.filter((p) => p.status === 'draft').length}
-                </Badge>
-              </TabsTrigger>
-              <TabsTrigger value="archived">
-                Archived{' '}
-                <Badge variant="secondary" className="ml-2">
-                  {products.filter((p) => p.status === 'archived').length}
-                </Badge>
-              </TabsTrigger>
-            </TabsList>
-          </Tabs>
-
-          <Row gap={2} align="center">
-            <Select value={categoryFilter} onValueChange={setCategoryFilter}>
-              <SelectTrigger className="w-[150px]">
-                <Filter className="mr-2 h-4 w-4" />
-                <SelectValue placeholder="Category" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">All categories</SelectItem>
-                {categories.map((cat) => (
-                  <SelectItem key={cat} value={cat}>
-                    {cat}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <Button variant="outline" size="icon">
-              <RefreshCw className="h-4 w-4" />
-            </Button>
-          </Row>
-        </Row>
-
-        {/* Data Table */}
-        <DataTable
-          columns={columns}
-          data={filteredProducts}
-          searchKey="name"
-          searchPlaceholder="Search products..."
-          resizable
-          compact
-        />
-      </main>
-    </Column>
-  );
-}
diff --git a/packages/apollo-wind/src/templates/delegate.stories.tsx b/packages/apollo-wind/src/templates/delegate.stories.tsx
deleted file mode 100644
index aa196da92..000000000
--- a/packages/apollo-wind/src/templates/delegate.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-const meta = {
-  title: 'Templates/Future/Delegate',
-  parameters: {
-    layout: 'centered',
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => 'Coming soon',
-};
diff --git a/packages/apollo-wind/src/templates/flow-editor-layout-example.stories.tsx b/packages/apollo-wind/src/templates/flow-editor-layout-example.stories.tsx
deleted file mode 100644
index 484cb2919..000000000
--- a/packages/apollo-wind/src/templates/flow-editor-layout-example.stories.tsx
+++ /dev/null
@@ -1,255 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import {
-  FlowEditorLayout,
-  SidebarPanelConfig,
-  CanvasToolbar,
-  PublishToolbar,
-} from './flow-editor-layout-example';
-import { Folders, Package, Sparkles } from 'lucide-react';
-import * as React from 'react';
-import { Column, Row } from '@/components/ui/layout';
-import { Button } from '@/components/ui/button';
-
-const defaultSidebarOptions: SidebarPanelConfig[] = [
-  { id: 'folders', icon: <Folders className="h-4 w-4" />, label: 'Folders' },
-  {
-    id: 'resources',
-    icon: <Package className="h-4 w-4" />,
-    label: 'Resources',
-  },
-  {
-    id: 'autopilot',
-    icon: <Sparkles className="h-4 w-4" />,
-    label: 'Autopilot',
-  },
-];
-
-const meta = {
-  title: 'Templates/Current/Flow/Editor Layout',
-  component: FlowEditorLayout,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  argTypes: {
-    activeSidebarId: {
-      control: 'radio',
-      options: ['folders', 'resources', 'autopilot'],
-    },
-    onSidebarChange: { action: 'sidebar changed' },
-    onSidebarOpenChange: { action: 'sidebar open changed' },
-  },
-} satisfies Meta<typeof FlowEditorLayout>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default = {
-  render: () => {
-    const [activeSidebarId, setActiveSidebarId] = React.useState('autopilot');
-    const [sidebarOpen, setSidebarOpen] = React.useState(true);
-
-    return (
-      <FlowEditorLayout
-        sidebarOptions={defaultSidebarOptions}
-        activeSidebarId={activeSidebarId}
-        sidebarOpen={sidebarOpen}
-        onSidebarChange={setActiveSidebarId}
-        onSidebarOpenChange={setSidebarOpen}
-        sidebarContent={
-          <Column className="h-full p-4" justify="center" align="center">
-            <span className="text-sm text-muted-foreground">{activeSidebarId} content</span>
-          </Column>
-        }
-        mainContent={
-          <Column className="h-full" justify="center" align="center">
-            <span className="text-muted-foreground">Main content</span>
-          </Column>
-        }
-      />
-    );
-  },
-} satisfies Story;
-
-export const WithToolbars = {
-  render: () => {
-    const [activeSidebarId, setActiveSidebarId] = React.useState('autopilot');
-    const [sidebarOpen, setSidebarOpen] = React.useState(true);
-
-    return (
-      <FlowEditorLayout
-        sidebarOptions={defaultSidebarOptions}
-        activeSidebarId={activeSidebarId}
-        sidebarOpen={sidebarOpen}
-        onSidebarChange={setActiveSidebarId}
-        onSidebarOpenChange={setSidebarOpen}
-        sidebarContent={
-          <Column className="h-full p-4">
-            <h2 className="font-semibold capitalize">{activeSidebarId}</h2>
-          </Column>
-        }
-        mainContent={
-          <div className="relative h-full">
-            <Column className="h-full" justify="center" align="center" gap={4}>
-              <h1 className="text-2xl font-bold">Build mode</h1>
-              <p className="text-muted-foreground">Drag and drop nodes to build your flow</p>
-            </Column>
-
-            <CanvasToolbar />
-
-            <PublishToolbar />
-          </div>
-        }
-      />
-    );
-  },
-} satisfies Story;
-
-export const WithBottomPanel = {
-  render: () => {
-    const [activeSidebarId, setActiveSidebarId] = React.useState('folders');
-    const [sidebarOpen, setSidebarOpen] = React.useState(true);
-    return (
-      <FlowEditorLayout
-        sidebarOptions={defaultSidebarOptions}
-        activeSidebarId={activeSidebarId}
-        sidebarOpen={sidebarOpen}
-        onSidebarChange={setActiveSidebarId}
-        onSidebarOpenChange={setSidebarOpen}
-        sidebarContent={
-          <Column className="h-full p-4">
-            <h2 className="font-semibold capitalize">{activeSidebarId}</h2>
-          </Column>
-        }
-        mainContent={
-          <div className="relative h-full">
-            <Column className="h-full" justify="center" align="center">
-              <span className="text-muted-foreground">Flow Canvas</span>
-            </Column>
-
-            <CanvasToolbar />
-            <PublishToolbar />
-          </div>
-        }
-        bottomOpen={true}
-        bottomContent={
-          <Column className="p-4" gap={2}>
-            <Row className="text-sm font-mono">
-              <span className="text-muted-foreground">[00:00:01]</span>
-              <span className="ml-2">Starting execution...</span>
-            </Row>
-            <Row className="text-sm font-mono">
-              <span className="text-muted-foreground">[00:00:02]</span>
-              <span className="ml-2 text-green-600">Node 1 completed</span>
-            </Row>
-          </Column>
-        }
-      />
-    );
-  },
-} satisfies Story;
-
-export const WithCustomSidebar = {
-  render: () => {
-    const [activeSidebarId, setActiveSidebarId] = React.useState('autopilot');
-    const [sidebarOpen, setSidebarOpen] = React.useState(true);
-
-    return (
-      <FlowEditorLayout
-        sidebarOptions={defaultSidebarOptions}
-        activeSidebarId={activeSidebarId}
-        sidebarOpen={sidebarOpen}
-        onSidebarChange={setActiveSidebarId}
-        onSidebarOpenChange={setSidebarOpen}
-        sidebarContent={
-          <Column className="h-full p-4" gap={4}>
-            <h2 className="font-semibold text-lg">Sidebar</h2>
-            <p className="text-sm text-muted-foreground">Custom sidebar content</p>
-            <Column gap={2}>
-              <Button variant="outline" className="justify-start">
-                Item 1
-              </Button>
-              <Button variant="outline" className="justify-start">
-                Item 2
-              </Button>
-              <Button variant="outline" className="justify-start">
-                Item 3
-              </Button>
-            </Column>
-          </Column>
-        }
-        mainContent={
-          <div className="relative h-full">
-            <Column className="h-full" justify="center" align="center">
-              <span className="text-muted-foreground">Canvas</span>
-            </Column>
-
-            <CanvasToolbar />
-          </div>
-        }
-      />
-    );
-  },
-} satisfies Story;
-
-const customSidebarOptions: SidebarPanelConfig[] = [
-  { id: 'files', icon: <Folders className="h-4 w-4" />, label: 'Files' },
-  { id: 'packages', icon: <Package className="h-4 w-4" />, label: 'Packages' },
-  { id: 'ai', icon: <Sparkles className="h-4 w-4" />, label: 'AI Assistant' },
-];
-
-export const CustomPanels = {
-  render: () => {
-    const [activeSidebarId, setActiveSidebarId] = React.useState('ai');
-    const [sidebarOpen, setSidebarOpen] = React.useState(true);
-
-    return (
-      <FlowEditorLayout
-        sidebarOptions={customSidebarOptions}
-        activeSidebarId={activeSidebarId}
-        sidebarOpen={sidebarOpen}
-        onSidebarChange={setActiveSidebarId}
-        onSidebarOpenChange={setSidebarOpen}
-        sidebarContent={
-          <Column className="h-full p-4" gap={4}>
-            <h2 className="font-semibold">
-              {customSidebarOptions.find((p) => p.id === activeSidebarId)?.label}
-            </h2>
-            <p className="text-sm text-muted-foreground">Panel content for {activeSidebarId}</p>
-          </Column>
-        }
-        mainContent={
-          <Column className="h-full" justify="center" align="center">
-            <span className="text-muted-foreground">Main content area</span>
-          </Column>
-        }
-      />
-    );
-  },
-} satisfies Story;
-
-export const PanelClosed = {
-  render: () => {
-    const [activeSidebarId, setActiveSidebarId] = React.useState('autopilot');
-    const [sidebarOpen, setSidebarOpen] = React.useState(false);
-
-    return (
-      <FlowEditorLayout
-        sidebarOptions={defaultSidebarOptions}
-        activeSidebarId={activeSidebarId}
-        sidebarOpen={sidebarOpen}
-        onSidebarChange={setActiveSidebarId}
-        onSidebarOpenChange={setSidebarOpen}
-        sidebarContent={
-          <Column className="h-full p-4">
-            <h2 className="font-semibold capitalize">{activeSidebarId}</h2>
-          </Column>
-        }
-        mainContent={
-          <Column className="h-full" justify="center" align="center">
-            <span className="text-muted-foreground">Main content</span>
-          </Column>
-        }
-      />
-    );
-  },
-} satisfies Story;
diff --git a/packages/apollo-wind/src/templates/flow-editor-layout-example.tsx b/packages/apollo-wind/src/templates/flow-editor-layout-example.tsx
deleted file mode 100644
index a9a0843c5..000000000
--- a/packages/apollo-wind/src/templates/flow-editor-layout-example.tsx
+++ /dev/null
@@ -1,285 +0,0 @@
-import { Copy, MoreVertical, Play, Plus } from 'lucide-react';
-import * as React from 'react';
-import { Button } from '@/components/ui/button';
-import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/ui/resizable';
-import { Separator } from '@/components/ui/separator';
-import { Switch } from '@/components/ui/switch';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import { Row, Column } from '@/components/ui/layout';
-import { cn } from '@/lib';
-import { useCallback, useRef, useEffect } from 'react';
-import { ImperativePanelHandle } from 'react-resizable-panels';
-import { Label } from '@radix-ui/react-label';
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-
-interface LatchedButtonProps {
-  isActive: boolean;
-  icon: React.ReactNode;
-  label: string;
-  onClick: () => void;
-}
-
-function LatchedButton({ isActive, icon, label, onClick }: LatchedButtonProps) {
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button
-          variant="ghost"
-          size="icon"
-          className={cn(
-            'w-[40px] h-[40px] rounded-r-2xl rounded-l-none bg-background border',
-            isActive
-              ? '-ml-px w-[41px] border-y-border border-r-border border-l-background'
-              : 'border-l-0 border-border hover:bg-muted'
-          )}
-          onClick={onClick}
-        >
-          <div
-            className={cn(
-              'flex items-center justify-center w-6 h-6 rounded-lg transition-colors',
-              isActive ? 'bg-primary text-background' : 'bg-transparent text-foreground'
-            )}
-          >
-            {icon}
-          </div>
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent side="right">{label}</TooltipContent>
-    </Tooltip>
-  );
-}
-
-export interface SidebarPanelConfig {
-  id: string;
-  icon: React.ReactNode;
-  label: string;
-}
-
-export interface FlowEditorLayoutProps {
-  className?: string;
-
-  // Sidebar
-  sidebarOptions?: SidebarPanelConfig[];
-  sidebarContent?: React.ReactNode;
-  activeSidebarId?: string;
-  sidebarOpen?: boolean;
-  onSidebarChange?: (panelId: string) => void;
-  onSidebarOpenChange?: (open: boolean) => void;
-
-  // Main content
-  mainContent?: React.ReactNode;
-
-  // Bottom panel
-  bottomContent?: React.ReactNode;
-  bottomOpen?: boolean;
-}
-
-export function FlowEditorLayout({
-  className,
-  sidebarOptions,
-  sidebarContent,
-  activeSidebarId,
-  sidebarOpen = false,
-  onSidebarChange,
-  onSidebarOpenChange,
-  mainContent,
-  bottomContent,
-  bottomOpen = false,
-}: FlowEditorLayoutProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const bottomPanelRef = useRef<ImperativePanelHandle>(null);
-  const switcherRef = useRef<HTMLDivElement>(null);
-  const rafRef = useRef<number>(0);
-
-  const updateSwitcherPosition = useCallback(() => {
-    if (!containerRef.current || !switcherRef.current) return;
-
-    if (!bottomOpen) {
-      switcherRef.current.style.bottom = '24px';
-      return;
-    }
-
-    const size = bottomPanelRef.current?.getSize();
-    if (size !== undefined) {
-      const containerHeight = containerRef.current.offsetHeight;
-      const bottomHeight = (size / 100) * containerHeight;
-      switcherRef.current.style.bottom = `${bottomHeight + 24}px`;
-    }
-  }, [bottomOpen]);
-
-  useEffect(() => {
-    updateSwitcherPosition();
-
-    const handleResize = () => {
-      cancelAnimationFrame(rafRef.current);
-      rafRef.current = requestAnimationFrame(updateSwitcherPosition);
-    };
-
-    window.addEventListener('resize', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-      cancelAnimationFrame(rafRef.current);
-    };
-  }, [updateSwitcherPosition]);
-
-  const handlePanelResize = useCallback(() => {
-    cancelAnimationFrame(rafRef.current);
-    rafRef.current = requestAnimationFrame(updateSwitcherPosition);
-  }, [updateSwitcherPosition]);
-
-  const handlePanelSelect = useCallback(
-    (panelId: string) => {
-      if (activeSidebarId === panelId) {
-        onSidebarOpenChange?.(!sidebarOpen);
-      } else {
-        onSidebarChange?.(panelId);
-        if (!sidebarOpen) {
-          onSidebarOpenChange?.(true);
-        }
-      }
-    },
-    [activeSidebarId, sidebarOpen, onSidebarChange, onSidebarOpenChange]
-  );
-
-  return (
-    <TooltipProvider>
-      <Row className={cn('h-screen bg-background', className)}>
-        {/* Left Sidebar */}
-        <div
-          className={cn(
-            'bg-background overflow-hidden transition-all duration-300 ease-in-out',
-            sidebarOpen ? 'w-72' : 'w-0'
-          )}
-        >
-          {sidebarOpen && <Column className="w-72 h-full">{sidebarContent}</Column>}
-        </div>
-
-        {/* Main Content */}
-        <Column ref={containerRef} className="flex-1 relative bg-muted m-1 rounded-3xl border">
-          {/* Panel Switcher - latched to bottom left edge */}
-          {sidebarOptions && sidebarOptions.length > 0 && (
-            <Column
-              ref={switcherRef}
-              gap={2}
-              className="absolute left-0 z-10"
-              style={{ bottom: 24 }}
-            >
-              {sidebarOptions.map((panel) => (
-                <LatchedButton
-                  key={panel.id}
-                  isActive={activeSidebarId === panel.id && sidebarOpen}
-                  icon={panel.icon}
-                  label={panel.label}
-                  onClick={() => handlePanelSelect(panel.id)}
-                />
-              ))}
-            </Column>
-          )}
-
-          <Column className="flex-1 relative rounded-3xl overflow-hidden">
-            <ResizablePanelGroup direction="vertical" className="h-full">
-              {/* Center */}
-              <ResizablePanel defaultSize={100} minSize={30}>
-                <Column className="flex-1 h-full">{mainContent}</Column>
-              </ResizablePanel>
-
-              {/* Bottom Panel */}
-              {bottomOpen && bottomContent && (
-                <>
-                  <ResizableHandle />
-                  <ResizablePanel
-                    ref={bottomPanelRef}
-                    defaultSize={30}
-                    minSize={15}
-                    maxSize={50}
-                    onResize={handlePanelResize}
-                  >
-                    <Column className="flex-1 h-full bg-background">{bottomContent}</Column>
-                  </ResizablePanel>
-                </>
-              )}
-            </ResizablePanelGroup>
-          </Column>
-        </Column>
-      </Row>
-    </TooltipProvider>
-  );
-}
-
-// ============================================================================
-// Exports -- TEMPORARY
-// ============================================================================
-
-function CanvasToolbar() {
-  return (
-    <Row className="absolute bottom-4 left-1/2 -translate-x-1/2" align="center" gap={1}>
-      <div className="flex items-center gap-1 rounded-lg border bg-background p-1.5">
-        <ToggleGroup type="single" defaultValue="build" className="gap-0">
-          <ToggleGroupItem
-            value="build"
-            className="h-8 rounded-md px-3 data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
-          >
-            Build
-          </ToggleGroupItem>
-          <ToggleGroupItem
-            value="evaluate"
-            className="h-8 rounded-md px-3 data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
-          >
-            Evaluate
-          </ToggleGroupItem>
-        </ToggleGroup>
-
-        <Separator orientation="vertical" className="mx-1 h-6" />
-
-        <Button variant="ghost" size="icon" className="h-8 w-8">
-          <Play className="h-4 w-4" />
-        </Button>
-
-        <Separator orientation="vertical" className="mx-1 h-6" />
-
-        <Button variant="ghost" size="icon" className="h-8 w-8">
-          <Plus className="h-4 w-4" />
-        </Button>
-        <Button variant="ghost" size="icon" className="h-8 w-8">
-          <Copy className="h-4 w-4" />
-        </Button>
-      </div>
-    </Row>
-  );
-}
-
-function PublishToolbar() {
-  return (
-    <Row className="absolute bottom-4 right-4">
-      <div className="flex items-center gap-3 rounded-lg border bg-background p-1.5 pl-3">
-        <Label htmlFor="toolbar-active" className="text-sm font-medium">
-          Active
-        </Label>
-        <Switch id="toolbar-active" />
-
-        <Separator orientation="vertical" className="h-6" />
-
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon" className="h-8 w-8">
-              <MoreVertical className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem>Edit</DropdownMenuItem>
-            <DropdownMenuItem>Duplicate</DropdownMenuItem>
-            <DropdownMenuItem>Delete</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    </Row>
-  );
-}
-
-export { CanvasToolbar, PublishToolbar };
diff --git a/packages/apollo-wind/src/templates/flow-start-example.stories.tsx b/packages/apollo-wind/src/templates/flow-start-example.stories.tsx
deleted file mode 100644
index 8dd3ecefb..000000000
--- a/packages/apollo-wind/src/templates/flow-start-example.stories.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Blocks, FolderKanban, GitBranch, Sparkles } from 'lucide-react';
-import type { ProcessOption, RecentProject } from './flow-start-example';
-import { FlowStartExample } from './flow-start-example';
-
-const meta = {
-  title: 'Templates/Current/Flow/Start',
-  component: FlowStartExample,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  argTypes: {
-    onOptionSelect: { action: 'option selected' },
-    onProjectSelect: { action: 'project selected' },
-    defaultViewMode: {
-      control: 'radio',
-      options: ['cards', 'table'],
-    },
-  },
-} satisfies Meta<typeof FlowStartExample>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const processOptions: ProcessOption[] = [
-  {
-    id: 'flow',
-    title: 'Flow',
-    description: 'Effortlessly build and deploy powerful automations—no code required',
-    icon: <GitBranch className="h-5 w-5" />,
-    badge: 'NEW',
-    badgeVariant: 'default',
-  },
-  {
-    id: 'bpmn',
-    title: 'BPMN',
-    description: 'Design and implement business processes with the structure of BPMN 2.0',
-    icon: <Blocks className="h-5 w-5" />,
-  },
-  {
-    id: 'case',
-    title: 'Case management',
-    description: 'Creating and deploy end to end case management workflows',
-    icon: <FolderKanban className="h-5 w-5" />,
-  },
-  {
-    id: 'autopilot',
-    title: 'Generate with Autopilot',
-    description: 'Describe what you need, and Autopilot will build it',
-    icon: <Sparkles className="h-5 w-5" />,
-  },
-];
-
-const recentProjects: RecentProject[] = [
-  {
-    id: '1',
-    name: 'Invoice Processing Automation',
-    type: 'flow',
-    lastModified: '2 hours ago',
-    status: 'published',
-  },
-  {
-    id: '2',
-    name: 'Customer Onboarding BPMN',
-    type: 'bpmn',
-    lastModified: 'Yesterday',
-    status: 'draft',
-  },
-  {
-    id: '3',
-    name: 'Support Ticket Case Flow',
-    type: 'case',
-    lastModified: '3 days ago',
-    status: 'published',
-  },
-  {
-    id: '4',
-    name: 'HR Request Handler',
-    type: 'autopilot',
-    lastModified: '1 week ago',
-    status: 'archived',
-  },
-  {
-    id: '5',
-    name: 'Expense Report Approval',
-    type: 'bpmn',
-    lastModified: '2 weeks ago',
-    status: 'published',
-  },
-  {
-    id: '6',
-    name: 'New Employee Onboarding',
-    type: 'case',
-    lastModified: '3 weeks ago',
-    status: 'draft',
-  },
-  {
-    id: '7',
-    name: 'Contract Review Process',
-    type: 'flow',
-    lastModified: '1 month ago',
-    status: 'published',
-  },
-  {
-    id: '8',
-    name: 'Customer Feedback Analysis',
-    type: 'autopilot',
-    lastModified: '1 month ago',
-    status: 'archived',
-  },
-];
-
-export const Default: Story = {
-  args: {
-    processOptions,
-    recentProjects,
-    showSkeleton: false,
-    defaultViewMode: 'cards',
-  },
-};
diff --git a/packages/apollo-wind/src/templates/flow-start-example.tsx b/packages/apollo-wind/src/templates/flow-start-example.tsx
deleted file mode 100644
index c4634d23d..000000000
--- a/packages/apollo-wind/src/templates/flow-start-example.tsx
+++ /dev/null
@@ -1,390 +0,0 @@
-import { ColumnDef } from '@tanstack/react-table';
-import {
-  Blocks,
-  Bot,
-  FolderKanban,
-  GitBranch,
-  LayoutGrid,
-  List,
-  MoreHorizontal,
-} from 'lucide-react';
-import * as React from 'react';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { ButtonGroup } from '@/components/ui/button-group';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { DataTable, DataTableColumnHeader } from '@/components/ui/data-table';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { Skeleton } from '@/components/ui/skeleton';
-import { Row, Column, Grid } from '@/components/ui/layout';
-import { cn } from '@/lib';
-
-export interface ProcessOption {
-  id: string;
-  title: string;
-  description: string;
-  icon: React.ReactNode;
-  badge?: string;
-  badgeVariant?: 'default' | 'secondary' | 'destructive' | 'outline';
-  onClick?: () => void;
-}
-
-export interface RecentProject {
-  id: string;
-  name: string;
-  type: 'flow' | 'bpmn' | 'case' | 'autopilot';
-  lastModified: string;
-  status?: 'draft' | 'published' | 'archived';
-}
-
-export type ViewMode = 'cards' | 'table';
-
-export interface FlowStartExampleProps {
-  className?: string;
-  title?: string;
-  subtitle?: string;
-  processOptions?: ProcessOption[];
-  recentProjects?: RecentProject[];
-  showSkeleton?: boolean;
-  defaultViewMode?: ViewMode;
-  onOptionSelect?: (optionId: string) => void;
-  onProjectSelect?: (projectId: string) => void;
-}
-
-function ProcessOptionCard({
-  option,
-  isSelected,
-  onSelect,
-}: {
-  option: ProcessOption;
-  isSelected?: boolean;
-  onSelect?: () => void;
-}) {
-  return (
-    <Card
-      className={cn(
-        'group relative cursor-pointer transition-all duration-200 hover:border-primary/50 hover:shadow-md',
-        isSelected && 'border-primary ring-2 ring-primary/20'
-      )}
-      onClick={onSelect}
-    >
-      {option.badge && (
-        <Badge
-          variant={option.badgeVariant}
-          className="absolute -top-2 right-4 text-[10px] px-2 py-0.5"
-        >
-          {option.badge}
-        </Badge>
-      )}
-      <CardHeader className="pb-3">
-        <Row gap={3} align="center">
-          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted text-muted-foreground transition-colors group-hover:bg-primary/10 group-hover:text-primary">
-            {option.icon}
-          </div>
-        </Row>
-      </CardHeader>
-      <CardContent className="pt-0">
-        <CardTitle className="text-base mb-2">{option.title}</CardTitle>
-        <CardDescription className="text-sm leading-relaxed">{option.description}</CardDescription>
-      </CardContent>
-    </Card>
-  );
-}
-
-function getTypeIcon(type: RecentProject['type']) {
-  switch (type) {
-    case 'flow':
-      return <GitBranch className="h-4 w-4" />;
-    case 'bpmn':
-      return <Blocks className="h-4 w-4" />;
-    case 'case':
-      return <FolderKanban className="h-4 w-4" />;
-    case 'autopilot':
-      return <Bot className="h-4 w-4" />;
-  }
-}
-
-function getTypeLabel(type: RecentProject['type']) {
-  switch (type) {
-    case 'flow':
-      return 'Flow';
-    case 'bpmn':
-      return 'BPMN';
-    case 'case':
-      return 'Case Management';
-    case 'autopilot':
-      return 'Autopilot';
-  }
-}
-
-function getStatusVariant(status: RecentProject['status']) {
-  switch (status) {
-    case 'published':
-      return 'default';
-    case 'draft':
-      return 'secondary';
-    case 'archived':
-      return 'outline';
-    default:
-      return 'secondary';
-  }
-}
-
-function RecentProjectCard({
-  project,
-  onSelect,
-}: {
-  project: RecentProject;
-  onSelect?: () => void;
-}) {
-  return (
-    <Card
-      className="group cursor-pointer transition-all duration-200 hover:border-primary/50 hover:shadow-sm"
-      onClick={onSelect}
-    >
-      <CardContent className="p-4">
-        <Row gap={3} align="start">
-          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
-            {getTypeIcon(project.type)}
-          </div>
-          <Column gap={1} flex={1} className="min-w-0">
-            <Row justify="between" align="center" gap={2}>
-              <span className="truncate font-medium text-sm">{project.name}</span>
-              {project.status && (
-                <Badge variant={getStatusVariant(project.status)} className="shrink-0 text-[10px]">
-                  {project.status}
-                </Badge>
-              )}
-            </Row>
-            <span className="text-xs text-muted-foreground">{project.lastModified}</span>
-          </Column>
-        </Row>
-      </CardContent>
-    </Card>
-  );
-}
-
-function SkeletonSection() {
-  return (
-    <Column gap={4}>
-      <Skeleton className="h-5 w-32" />
-      <Column gap={3}>
-        <Row gap={2}>
-          <Skeleton className="h-4 flex-1 max-w-[280px]" />
-        </Row>
-        <Row gap={2}>
-          <Skeleton className="h-4 flex-1 max-w-[240px]" />
-        </Row>
-        <Row gap={2}>
-          <Skeleton className="h-4 flex-1 max-w-[320px]" />
-        </Row>
-        <Row gap={2}>
-          <Skeleton className="h-4 flex-1 max-w-[200px]" />
-        </Row>
-        <Row gap={2}>
-          <Skeleton className="h-4 flex-1 max-w-[260px]" />
-        </Row>
-      </Column>
-    </Column>
-  );
-}
-
-function createProjectColumns(
-  onProjectSelect?: (projectId: string) => void
-): ColumnDef<RecentProject, unknown>[] {
-  return [
-    {
-      accessorKey: 'name',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
-      cell: ({ row }) => (
-        <Row gap={2} align="center">
-          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
-            {getTypeIcon(row.original.type)}
-          </div>
-          <span className="font-medium">{row.original.name}</span>
-        </Row>
-      ),
-    },
-    {
-      accessorKey: 'type',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Type" />,
-      cell: ({ row }) => (
-        <span className="text-muted-foreground">{getTypeLabel(row.original.type)}</span>
-      ),
-    },
-    {
-      accessorKey: 'status',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
-      cell: ({ row }) => {
-        const status = row.original.status;
-        return status ? (
-          <Badge variant={getStatusVariant(status)} className="capitalize">
-            {status}
-          </Badge>
-        ) : null;
-      },
-    },
-    {
-      accessorKey: 'lastModified',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Last Modified" />,
-      cell: ({ row }) => <span className="text-muted-foreground">{row.original.lastModified}</span>,
-    },
-    {
-      id: 'actions',
-      cell: ({ row }) => (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon" className="h-8 w-8">
-              <MoreHorizontal className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem onClick={() => onProjectSelect?.(row.original.id)}>
-              Open
-            </DropdownMenuItem>
-            <DropdownMenuItem>Duplicate</DropdownMenuItem>
-            <DropdownMenuItem>Archive</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      ),
-    },
-  ];
-}
-
-export function FlowStartExample({
-  className,
-  title = 'BUILD YOUR FIRST AGENTIC PROCESS',
-  subtitle = 'What would you like to start with?',
-  processOptions = [],
-  recentProjects = [],
-  showSkeleton = false,
-  defaultViewMode = 'cards',
-  onOptionSelect,
-  onProjectSelect,
-}: FlowStartExampleProps) {
-  const [selectedOption, setSelectedOption] = React.useState<string | null>(null);
-  const [viewMode, setViewMode] = React.useState<ViewMode>(defaultViewMode);
-
-  const handleOptionSelect = (optionId: string) => {
-    setSelectedOption(optionId);
-    onOptionSelect?.(optionId);
-  };
-
-  const columns = React.useMemo(() => createProjectColumns(onProjectSelect), [onProjectSelect]);
-
-  return (
-    <Column minH="screen" className={className}>
-      {/* Hero Section with background */}
-      <div className="bg-muted/40">
-        {/* Header */}
-        <header className="border-b border-border/50 ">
-          <Row justify="between" align="center" className="h-14 px-6">
-            <span className="font-semibold text-lg">UiPath Maestro</span>
-            <Skeleton className="h-8 w-8 rounded-full" />
-          </Row>
-        </header>
-
-        {/* Hero Content */}
-        <Column className="px-8 py-16 md:px-16">
-          <Column gap={3} align="center" className="mb-12 text-center">
-            <h1 className="text-3xl md:text-4xl font-bold tracking-tight uppercase">{title}</h1>
-            <p className="text-muted-foreground text-lg">{subtitle}</p>
-          </Column>
-
-          {/* Process Options Grid */}
-          <Grid cols={1} gap={4} className="sm:grid-cols-2 lg:grid-cols-4 max-w-6xl mx-auto w-full">
-            {processOptions.map((option) => (
-              <ProcessOptionCard
-                key={option.id}
-                option={option}
-                isSelected={selectedOption === option.id}
-                onSelect={() => handleOptionSelect(option.id)}
-              />
-            ))}
-          </Grid>
-
-          {/* Skeleton Loading Sections */}
-          {showSkeleton && (
-            <Column gap={12} className="max-w-6xl mx-auto w-full mt-16">
-              <Grid cols={1} gap={8} className="lg:grid-cols-3">
-                <SkeletonSection />
-                <SkeletonSection />
-                <SkeletonSection />
-              </Grid>
-            </Column>
-          )}
-        </Column>
-      </div>
-
-      {/* Recent Projects Section - White background */}
-      {recentProjects.length > 0 && !showSkeleton && (
-        <Column flex={1} className="px-8 py-12 md:px-16">
-          <Column gap={6} className="max-w-6xl mx-auto w-full">
-            <Row justify="between" align="center">
-              <h2 className="text-xl font-semibold">Recent Projects</h2>
-              {/* View Mode Toggle */}
-              <ButtonGroup>
-                <Button
-                  variant={viewMode === 'cards' ? 'secondary' : 'outline'}
-                  size="icon"
-                  onClick={() => setViewMode('cards')}
-                  aria-label="Card view"
-                >
-                  <LayoutGrid className="h-4 w-4" />
-                </Button>
-                <Button
-                  variant={viewMode === 'table' ? 'secondary' : 'outline'}
-                  size="icon"
-                  onClick={() => setViewMode('table')}
-                  aria-label="Table view"
-                >
-                  <List className="h-4 w-4" />
-                </Button>
-              </ButtonGroup>
-            </Row>
-
-            {/* Cards View */}
-            {viewMode === 'cards' && (
-              <Grid cols={1} gap={4} className="sm:grid-cols-2 lg:grid-cols-4">
-                {recentProjects.map((project) => (
-                  <RecentProjectCard
-                    key={project.id}
-                    project={project}
-                    onSelect={() => onProjectSelect?.(project.id)}
-                  />
-                ))}
-              </Grid>
-            )}
-
-            {/* Table View */}
-            {viewMode === 'table' && (
-              <DataTable
-                columns={columns}
-                data={recentProjects}
-                searchKey="name"
-                searchPlaceholder="Search projects..."
-                showColumnToggle={false}
-                showPagination={recentProjects.length > 10}
-                compact
-              />
-            )}
-          </Column>
-        </Column>
-      )}
-
-      {/* Footer skeleton */}
-      {showSkeleton && (
-        <div className="bg-background border-t flex-1">
-          <Row justify="center" className="px-8 py-8">
-            <Skeleton className="h-24 w-full max-w-4xl rounded-lg" />
-          </Row>
-        </div>
-      )}
-    </Column>
-  );
-}
diff --git a/packages/apollo-wind/src/templates/flow.stories.tsx b/packages/apollo-wind/src/templates/flow.stories.tsx
deleted file mode 100644
index 70bef32d6..000000000
--- a/packages/apollo-wind/src/templates/flow.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-const meta = {
-  title: 'Templates/Future/Flow',
-  parameters: {
-    layout: 'centered',
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => 'Coming soon',
-};
diff --git a/packages/apollo-wind/src/templates/form-builder-example.tsx b/packages/apollo-wind/src/templates/form-builder-example.tsx
deleted file mode 100644
index 2a2f4a4b6..000000000
--- a/packages/apollo-wind/src/templates/form-builder-example.tsx
+++ /dev/null
@@ -1,399 +0,0 @@
-import * as React from 'react';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Checkbox } from '@/components/ui/checkbox';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Slider } from '@/components/ui/slider';
-import { Switch } from '@/components/ui/switch';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Textarea } from '@/components/ui/textarea';
-import { Row, Column, Grid } from '@/components/ui/layout';
-
-interface FormData {
-  // Personal Info
-  firstName: string;
-  lastName: string;
-  email: string;
-  phone: string;
-  bio: string;
-
-  // Preferences
-  theme: string;
-  language: string;
-  notifications: boolean;
-  newsletter: boolean;
-
-  // Settings
-  visibility: string;
-  experience: number;
-  interests: string[];
-
-  // Advanced
-  customJson: string;
-}
-
-export function FormBuilderExample() {
-  const [formData, setFormData] = React.useState<FormData>({
-    firstName: '',
-    lastName: '',
-    email: '',
-    phone: '',
-    bio: '',
-    theme: 'system',
-    language: 'en',
-    notifications: true,
-    newsletter: false,
-    visibility: 'public',
-    experience: 5,
-    interests: [],
-    customJson: '{}',
-  });
-
-  const updateField = <K extends keyof FormData>(field: K, value: FormData[K]) => {
-    setFormData((prev) => ({ ...prev, [field]: value }));
-  };
-
-  const handleReset = () => {
-    setFormData({
-      firstName: '',
-      lastName: '',
-      email: '',
-      phone: '',
-      bio: '',
-      theme: 'system',
-      language: 'en',
-      notifications: true,
-      newsletter: false,
-      visibility: 'public',
-      experience: 5,
-      interests: [],
-      customJson: '{}',
-    });
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    alert('Form submitted! Check the JSON preview.');
-  };
-
-  return (
-    <Column h="screen" w="full" className="bg-background">
-      <ResizablePanelGroup direction="horizontal">
-        <ResizablePanel defaultSize={50} minSize={30}>
-          <ScrollArea className="h-screen">
-            <div className="p-6">
-              <div className="mb-6">
-                <h1 className="text-3xl font-bold tracking-tight">Form Builder</h1>
-                <p className="text-muted-foreground">
-                  A powerful example showcasing forms, tabs, and live JSON preview
-                </p>
-              </div>
-
-              <form onSubmit={handleSubmit} className="space-y-6">
-                <Tabs defaultValue="personal" className="w-full">
-                  <TabsList className="grid w-full grid-cols-4">
-                    <TabsTrigger value="personal">Personal</TabsTrigger>
-                    <TabsTrigger value="preferences">Preferences</TabsTrigger>
-                    <TabsTrigger value="settings">Settings</TabsTrigger>
-                    <TabsTrigger value="advanced">Advanced</TabsTrigger>
-                  </TabsList>
-
-                  <TabsContent value="personal" className="space-y-4">
-                    <Card>
-                      <CardHeader>
-                        <CardTitle>Personal Information</CardTitle>
-                        <CardDescription>Enter your personal details below</CardDescription>
-                      </CardHeader>
-                      <CardContent className="space-y-4">
-                        <Grid gap={4} cols={2} className="md:grid-cols-2">
-                          <Column gap={2}>
-                            <Label htmlFor="firstName">First Name</Label>
-                            <Input
-                              id="firstName"
-                              placeholder="John"
-                              value={formData.firstName}
-                              onChange={(e) => updateField('firstName', e.target.value)}
-                            />
-                          </Column>
-                          <Column gap={2}>
-                            <Label htmlFor="lastName">Last Name</Label>
-                            <Input
-                              id="lastName"
-                              placeholder="Doe"
-                              value={formData.lastName}
-                              onChange={(e) => updateField('lastName', e.target.value)}
-                            />
-                          </Column>
-                        </Grid>
-                        <Column gap={2}>
-                          <Label htmlFor="email">Email</Label>
-                          <Input
-                            id="email"
-                            type="email"
-                            placeholder="john.doe@example.com"
-                            value={formData.email}
-                            onChange={(e) => updateField('email', e.target.value)}
-                          />
-                        </Column>
-                        <Column gap={2}>
-                          <Label htmlFor="phone">Phone Number</Label>
-                          <Input
-                            id="phone"
-                            type="tel"
-                            placeholder="+1 (555) 000-0000"
-                            value={formData.phone}
-                            onChange={(e) => updateField('phone', e.target.value)}
-                          />
-                        </Column>
-                        <Column gap={2}>
-                          <Label htmlFor="bio">Bio</Label>
-                          <Textarea
-                            id="bio"
-                            placeholder="Tell us about yourself..."
-                            rows={4}
-                            value={formData.bio}
-                            onChange={(e) => updateField('bio', e.target.value)}
-                          />
-                        </Column>
-                      </CardContent>
-                    </Card>
-                  </TabsContent>
-
-                  <TabsContent value="preferences" className="space-y-4">
-                    <Card>
-                      <CardHeader>
-                        <CardTitle>Preferences</CardTitle>
-                        <CardDescription>Customize your experience</CardDescription>
-                      </CardHeader>
-                      <CardContent className="space-y-6">
-                        <Column gap={2}>
-                          <Label htmlFor="theme">Theme</Label>
-                          <Select
-                            value={formData.theme}
-                            onValueChange={(value) => updateField('theme', value)}
-                          >
-                            <SelectTrigger id="theme">
-                              <SelectValue placeholder="Select a theme" />
-                            </SelectTrigger>
-                            <SelectContent>
-                              <SelectItem value="light">Light</SelectItem>
-                              <SelectItem value="dark">Dark</SelectItem>
-                              <SelectItem value="system">System</SelectItem>
-                            </SelectContent>
-                          </Select>
-                        </Column>
-
-                        <Column gap={2}>
-                          <Label htmlFor="language">Language</Label>
-                          <Select
-                            value={formData.language}
-                            onValueChange={(value) => updateField('language', value)}
-                          >
-                            <SelectTrigger id="language">
-                              <SelectValue placeholder="Select a language" />
-                            </SelectTrigger>
-                            <SelectContent>
-                              <SelectItem value="en">English</SelectItem>
-                              <SelectItem value="es">Spanish</SelectItem>
-                              <SelectItem value="fr">French</SelectItem>
-                              <SelectItem value="de">German</SelectItem>
-                              <SelectItem value="ja">Japanese</SelectItem>
-                            </SelectContent>
-                          </Select>
-                        </Column>
-
-                        <Row justify="between" align="center">
-                          <Column gap={0.5}>
-                            <Label htmlFor="notifications">Notifications</Label>
-                            <p className="text-sm text-muted-foreground">
-                              Receive notifications about your account
-                            </p>
-                          </Column>
-                          <Switch
-                            id="notifications"
-                            checked={formData.notifications}
-                            onCheckedChange={(checked) => updateField('notifications', checked)}
-                          />
-                        </Row>
-
-                        <Row gap={2} align="center">
-                          <Checkbox
-                            id="newsletter"
-                            checked={formData.newsletter}
-                            onCheckedChange={(checked) => updateField('newsletter', !!checked)}
-                          />
-                          <Label
-                            htmlFor="newsletter"
-                            className="text-sm font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                          >
-                            Subscribe to newsletter
-                          </Label>
-                        </Row>
-                      </CardContent>
-                    </Card>
-                  </TabsContent>
-
-                  <TabsContent value="settings" className="space-y-4">
-                    <Card>
-                      <CardHeader>
-                        <CardTitle>Settings</CardTitle>
-                        <CardDescription>Configure your account settings</CardDescription>
-                      </CardHeader>
-                      <CardContent className="space-y-6">
-                        <Column gap={3}>
-                          <Label>Profile Visibility</Label>
-                          <RadioGroup
-                            value={formData.visibility}
-                            onValueChange={(value) => updateField('visibility', value)}
-                          >
-                            <Row gap={2} align="center">
-                              <RadioGroupItem value="public" id="public" />
-                              <Label htmlFor="public" className="font-normal">
-                                Public - Anyone can see your profile
-                              </Label>
-                            </Row>
-                            <Row gap={2} align="center">
-                              <RadioGroupItem value="private" id="private" />
-                              <Label htmlFor="private" className="font-normal">
-                                Private - Only you can see your profile
-                              </Label>
-                            </Row>
-                            <Row gap={2} align="center">
-                              <RadioGroupItem value="friends" id="friends" />
-                              <Label htmlFor="friends" className="font-normal">
-                                Friends - Only friends can see your profile
-                              </Label>
-                            </Row>
-                          </RadioGroup>
-                        </Column>
-
-                        <Column gap={3}>
-                          <Row justify="between" align="center">
-                            <Label htmlFor="experience">
-                              Experience Level: {formData.experience}
-                            </Label>
-                          </Row>
-                          <Slider
-                            id="experience"
-                            min={0}
-                            max={10}
-                            step={1}
-                            value={[formData.experience]}
-                            onValueChange={(value) => updateField('experience', value[0])}
-                          />
-                          <Row justify="between" className="text-xs text-muted-foreground">
-                            <span>Beginner</span>
-                            <span>Expert</span>
-                          </Row>
-                        </Column>
-
-                        <Column gap={3}>
-                          <Label>Interests</Label>
-                          <Column gap={2}>
-                            {['Technology', 'Design', 'Business', 'Science', 'Arts'].map(
-                              (interest) => (
-                                <Row key={interest} gap={2} align="center">
-                                  <Checkbox
-                                    id={interest}
-                                    checked={formData.interests.includes(interest)}
-                                    onCheckedChange={(checked) => {
-                                      if (checked) {
-                                        updateField('interests', [...formData.interests, interest]);
-                                      } else {
-                                        updateField(
-                                          'interests',
-                                          formData.interests.filter((i) => i !== interest)
-                                        );
-                                      }
-                                    }}
-                                  />
-                                  <Label
-                                    htmlFor={interest}
-                                    className="text-sm font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                                  >
-                                    {interest}
-                                  </Label>
-                                </Row>
-                              )
-                            )}
-                          </Column>
-                        </Column>
-                      </CardContent>
-                    </Card>
-                  </TabsContent>
-
-                  <TabsContent value="advanced" className="space-y-4">
-                    <Card>
-                      <CardHeader>
-                        <CardTitle>Advanced Settings</CardTitle>
-                        <CardDescription>
-                          Configure advanced options with custom JSON
-                        </CardDescription>
-                      </CardHeader>
-                      <CardContent className="space-y-4">
-                        <Column gap={2}>
-                          <Label htmlFor="customJson">Custom Configuration (JSON)</Label>
-                          <Textarea
-                            id="customJson"
-                            placeholder='{"key": "value"}'
-                            rows={10}
-                            className="font-mono text-sm"
-                            value={formData.customJson}
-                            onChange={(e) => updateField('customJson', e.target.value)}
-                          />
-                          <p className="text-xs text-muted-foreground">
-                            Enter valid JSON for custom configuration
-                          </p>
-                        </Column>
-                      </CardContent>
-                    </Card>
-                  </TabsContent>
-                </Tabs>
-
-                <Row gap={4}>
-                  <Button type="submit">Submit</Button>
-                  <Button type="button" variant="outline" onClick={handleReset}>
-                    Reset
-                  </Button>
-                </Row>
-              </form>
-            </div>
-          </ScrollArea>
-        </ResizablePanel>
-
-        <ResizableHandle withHandle />
-
-        <ResizablePanel defaultSize={50} minSize={30}>
-          <Column h="screen" className="border-l">
-            <ScrollArea className="h-full">
-              <div className="p-6">
-                <div className="mb-4">
-                  <h2 className="text-2xl font-bold tracking-tight">JSON Preview</h2>
-                  <p className="text-muted-foreground">Live preview of your form data</p>
-                </div>
-                <Card>
-                  <CardContent className="p-4">
-                    <pre className="overflow-x-auto text-sm">
-                      <code>{JSON.stringify(formData, null, 2)}</code>
-                    </pre>
-                  </CardContent>
-                </Card>
-              </div>
-            </ScrollArea>
-          </Column>
-        </ResizablePanel>
-      </ResizablePanelGroup>
-    </Column>
-  );
-}
diff --git a/packages/apollo-wind/src/templates/new-project-example.stories.tsx b/packages/apollo-wind/src/templates/new-project-example.stories.tsx
deleted file mode 100644
index 4de33410a..000000000
--- a/packages/apollo-wind/src/templates/new-project-example.stories.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import type { ProjectExample } from './new-project-example';
-import { NewProjectExample } from './new-project-example';
-
-const meta = {
-  title: 'Templates/Current/New Project',
-  component: NewProjectExample,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  argTypes: {
-    onCreateBlank: { action: 'create blank clicked' },
-    autopilot: {
-      control: 'object',
-    },
-  },
-} satisfies Meta<typeof NewProjectExample>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const defaultExamples: ProjectExample[] = [
-  {
-    id: '1',
-    name: 'Client Onboarding Account Opening',
-    description:
-      'An agentic process built with Maestro, modeled using BPMN to orchestrate customer data across...',
-    usageCount: 3400,
-    category: 'financial',
-    tools: ['office365', 'maestro'],
-    onUse: () => console.log('Using template 1'),
-  },
-  {
-    id: '2',
-    name: 'KYC / CDD & Sanctions Screening',
-    description:
-      'An agentic process built with Maestro, modeled using BPMN to coordinate identity verification, s...',
-    usageCount: 1700,
-    category: 'financial',
-    tools: ['google', 'maestro'],
-    onUse: () => console.log('Using template 2'),
-  },
-  {
-    id: '3',
-    name: 'Payments Processing & Exceptions',
-    description:
-      'An agentic process built with Maestro, modeled using BPMN to orchestrate payment validation, f...',
-    usageCount: 1200,
-    category: 'financial',
-    tools: ['office365', 'maestro'],
-    onUse: () => console.log('Using template 3'),
-  },
-  {
-    id: '4',
-    name: 'AML Alert Investigation & Case Mgmt',
-    description:
-      'An agentic process built with Maestro, modeled using BPMN to handle AML alerts through tran...',
-    usageCount: 3400,
-    category: 'financial',
-    tools: ['office365', 'maestro'],
-    onUse: () => console.log('Using template 4'),
-  },
-  {
-    id: '5',
-    name: 'Regulatory Reporting',
-    description:
-      'An agentic process built with Maestro, modeled using BPMN to automate data aggregation, com...',
-    usageCount: 1700,
-    category: 'financial',
-    tools: ['google', 'maestro'],
-    onUse: () => console.log('Using template 5'),
-  },
-  {
-    id: '6',
-    name: 'Insurance First Notice of Loss (FNOL)',
-    description:
-      'An agentic process built with Maestro, modeled using BPMN to guide claim intake, coverage che...',
-    usageCount: 1200,
-    category: 'healthcare',
-    tools: ['office365', 'maestro'],
-    onUse: () => console.log('Using template 6'),
-  },
-  {
-    id: '7',
-    name: 'Insurance Claims Adjudication & Settlement',
-    description:
-      'An agentic process built with Maestro, modeled using BPMN to coordinate policy validation, frau...',
-    usageCount: 3400,
-    category: 'healthcare',
-    tools: ['office365', 'maestro'],
-    onUse: () => console.log('Using template 7'),
-  },
-  {
-    id: '8',
-    name: 'Underwriting (New & Renewal)',
-    description:
-      'An agentic process built with Maestro, modeled using BPMN to orchestrate data gathering, risk...',
-    usageCount: 1700,
-    category: 'other',
-    tools: ['google', 'maestro'],
-    onUse: () => console.log('Using template 8'),
-  },
-  {
-    id: '9',
-    name: 'Cards Dispute & Chargeback Management',
-    description:
-      'An agentic process built with Maestro, modeled using BPMN to automate dispute intake, transac...',
-    usageCount: 1200,
-    category: 'financial',
-    tools: ['office365', 'maestro'],
-    onUse: () => console.log('Using template 9'),
-  },
-];
-
-export const Default: Story = {
-  args: {
-    onCreateBlank: () => console.log('Create blank project'),
-    autopilot: {
-      placeholder: 'Create an agent to...',
-      disclaimer: 'Autopilot can make mistakes. Please double check the responses.',
-      onSubmit: (prompt: string) => console.log('Autopilot prompt:', prompt),
-    },
-    templates: defaultExamples,
-    categories: [
-      { id: 'financial', label: 'Financial' },
-      { id: 'healthcare', label: 'Healthcare' },
-      { id: 'other', label: 'Other' },
-    ],
-    tools: [
-      { id: 'office365', label: 'Office365' },
-      { id: 'jira', label: 'Jira' },
-      { id: 'sap-concur', label: 'SAP Concur' },
-      { id: 'slack', label: 'Slack' },
-      { id: 'docusign', label: 'DocuSign' },
-    ],
-  },
-};
diff --git a/packages/apollo-wind/src/templates/new-project-example.tsx b/packages/apollo-wind/src/templates/new-project-example.tsx
deleted file mode 100644
index ed35dee28..000000000
--- a/packages/apollo-wind/src/templates/new-project-example.tsx
+++ /dev/null
@@ -1,400 +0,0 @@
-import { ArrowUp, Plus, Search, X } from 'lucide-react';
-import * as React from 'react';
-import { Button } from '@/components/ui/button';
-import { Checkbox } from '@/components/ui/checkbox';
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerHeader,
-  DrawerTitle,
-} from '@/components/ui/drawer';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Textarea } from '@/components/ui/textarea';
-import { cn } from '@/lib';
-import { Row, Column, Grid } from '@/components/ui/layout';
-
-export interface ProjectExample {
-  id: string;
-  name: string;
-  description: string;
-  usageCount: number;
-  category?: string;
-  tools?: string[];
-  onUse?: () => void;
-}
-
-export interface NewProjectExampleProps {
-  className?: string;
-  title?: string;
-  subtitle?: string;
-  templates?: ProjectExample[];
-  categories?: Array<{ id: string; label: string }>;
-  tools?: Array<{ id: string; label: string }>;
-  autopilot?: {
-    placeholder?: string;
-    disclaimer?: string;
-    onSubmit?: (prompt: string) => void;
-  };
-  onCreateBlank?: () => void;
-}
-
-export function NewProjectExample({
-  className,
-  title = "Let's create an agentic process",
-  subtitle = 'Design and orchestrate end-to-end processes with AI agents, robots, and people using BPMN-based diagrams.',
-  templates = [
-    {
-      id: '1',
-      name: 'Invoice processing',
-      description:
-        'Automate the end-to-end process of capturing, validating, and approving invoices.',
-      usageCount: 3400,
-      category: 'financial',
-      tools: ['office365', 'maestro'],
-    },
-    {
-      id: '2',
-      name: 'Loan processing',
-      description: 'Optimize the evaluation, approval, and disbursement of loans.',
-      usageCount: 1700,
-      category: 'financial',
-      tools: ['google', 'maestro'],
-    },
-    {
-      id: '3',
-      name: 'Supplier onboarding',
-      description: 'Coordinate the registration, verification, and integration of new suppliers.',
-      usageCount: 1200,
-      category: 'other',
-      tools: ['office365', 'maestro'],
-    },
-  ],
-  categories = [
-    { id: 'financial', label: 'Financial' },
-    { id: 'healthcare', label: 'Healthcare' },
-    { id: 'other', label: 'Other' },
-  ],
-  tools = [
-    { id: 'office365', label: 'Office365' },
-    { id: 'jira', label: 'Jira' },
-    { id: 'sap-concur', label: 'SAP Concur' },
-    { id: 'slack', label: 'Slack' },
-    { id: 'docusign', label: 'DocuSign' },
-  ],
-  autopilot,
-  onCreateBlank,
-}: NewProjectExampleProps) {
-  const [autopilotPrompt, setAutopilotPrompt] = React.useState('');
-  const [drawerOpen, setDrawerOpen] = React.useState(false);
-  const [searchQuery, setSearchQuery] = React.useState('');
-  const [selectedCategories, setSelectedCategories] = React.useState<string[]>([]);
-  const [selectedTools, setSelectedTools] = React.useState<string[]>([]);
-
-  const handleAutopilotSubmit = () => {
-    if (autopilot?.onSubmit && autopilotPrompt.trim()) {
-      autopilot.onSubmit(autopilotPrompt);
-    }
-  };
-
-  const formatUsageCount = (count: number) => {
-    if (count >= 1000) {
-      return `${(count / 1000).toFixed(1)}k`;
-    }
-    return count.toString();
-  };
-
-  const toggleCategory = (categoryId: string) => {
-    setSelectedCategories((prev) =>
-      prev.includes(categoryId) ? prev.filter((c) => c !== categoryId) : [...prev, categoryId]
-    );
-  };
-
-  const toggleTool = (toolId: string) => {
-    setSelectedTools((prev) =>
-      prev.includes(toolId) ? prev.filter((t) => t !== toolId) : [...prev, toolId]
-    );
-  };
-
-  const filteredExamples = React.useMemo(() => {
-    return templates.filter((template) => {
-      const matchesSearch =
-        searchQuery === '' ||
-        template.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        template.description.toLowerCase().includes(searchQuery.toLowerCase());
-
-      const matchesCategory =
-        selectedCategories.length === 0 ||
-        (template.category && selectedCategories.includes(template.category));
-
-      const matchesTools =
-        selectedTools.length === 0 ||
-        (template.tools && template.tools.some((tool) => selectedTools.includes(tool)));
-
-      return matchesSearch && matchesCategory && matchesTools;
-    });
-  }, [templates, searchQuery, selectedCategories, selectedTools]);
-
-  const ExampleCard = ({ template }: { template: ProjectExample }) => (
-    <Column className="group rounded-lg border border-border/30 bg-card p-8 transition-all hover:border-border/60 hover:shadow-sm">
-      <Column gap={4} flex={1} className="mb-8">
-        <h3 className="text-base font-semibold leading-tight">{template.name}</h3>
-        <p className="text-sm text-muted-foreground leading-relaxed">{template.description}</p>
-        <Row gap={1.5} align="center" className="text-xs text-muted-foreground">
-          <svg
-            className="h-3.5 w-3.5"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-            />
-          </svg>
-          <span>{formatUsageCount(template.usageCount)}</span>
-        </Row>
-      </Column>
-      <Button variant="outline" size="sm" className="h-9 w-full" onClick={template.onUse}>
-        Use
-      </Button>
-    </Column>
-  );
-
-  return (
-    <>
-      <Column
-        minH="screen"
-        gap={8}
-        className={cn('bg-background px-8 py-16 md:px-16 md:py-20', className)}
-      >
-        {/* Header Section */}
-        <div>
-          <Row justify="between" align="start" gap={8}>
-            <Column flex={1}>
-              <h1 className="text-3xl font-bold tracking-tight">{title}</h1>
-              <p className="mt-4 text-base text-muted-foreground">{subtitle}</p>
-            </Column>
-            <Button variant="link" onClick={() => setDrawerOpen(true)} className="shrink-0">
-              Explore templates
-            </Button>
-          </Row>
-        </div>
-
-        {/* Examples Grid */}
-        <Grid gap={8} cols={1} className="sm:grid-cols-2 lg:grid-cols-4">
-          {/* Blank Example */}
-          <button
-            className="group flex cursor-pointer flex-col items-center justify-between rounded-lg border border-dashed border-border/40 bg-card p-8 text-center transition-all hover:border-border/70 hover:shadow-sm"
-            onClick={onCreateBlank}
-          >
-            <Column gap={4} w="full">
-              <h3 className="text-base font-semibold">Blank agentic process</h3>
-              <p className="text-sm text-muted-foreground">Start building without a template.</p>
-            </Column>
-            <div className="mt-8 flex h-20 w-20 items-center justify-center rounded-lg border-2 border-dashed border-border/50">
-              <Plus className="h-8 w-8 text-primary" />
-            </div>
-          </button>
-
-          {/* Example Cards */}
-          {templates.slice(0, 3).map((template) => (
-            <ExampleCard key={template.id} template={template} />
-          ))}
-        </Grid>
-
-        {/* Autopilot Section */}
-        {autopilot && (
-          <div className="mx-auto w-full max-w-3xl">
-            <h2 className="mb-6 text-lg font-semibold">Autopilot</h2>
-            <div className="rounded-lg border border-border/30 bg-card">
-              <div className="relative p-6">
-                <Textarea
-                  placeholder={autopilot.placeholder}
-                  value={autopilotPrompt}
-                  onChange={(e) => setAutopilotPrompt(e.target.value)}
-                  className="min-h-[120px] resize-none border-0 p-0 pb-12 text-sm placeholder:text-muted-foreground/50 focus-visible:ring-0"
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-                      e.preventDefault();
-                      handleAutopilotSubmit();
-                    }
-                  }}
-                />
-                <div className="absolute bottom-6 left-6 right-6 flex items-center justify-between">
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-8 w-8"
-                    onClick={() => setAutopilotPrompt('')}
-                    disabled={!autopilotPrompt}
-                    aria-label="Clear prompt"
-                  >
-                    <Plus className="h-4 w-4" />
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-8 w-8"
-                    onClick={handleAutopilotSubmit}
-                    disabled={!autopilotPrompt.trim()}
-                    aria-label="Submit prompt"
-                  >
-                    <ArrowUp className="h-4 w-4" />
-                  </Button>
-                </div>
-              </div>
-              {autopilot.disclaimer && (
-                <div className="border-t border-border/20 px-6 py-3 text-center">
-                  <p className="text-xs text-muted-foreground">{autopilot.disclaimer}</p>
-                </div>
-              )}
-            </div>
-          </div>
-        )}
-      </Column>
-
-      {/* Explore Examples Drawer */}
-      <Drawer open={drawerOpen} onOpenChange={setDrawerOpen}>
-        <DrawerContent className="max-h-[75vh]">
-          <DrawerHeader className="border-b px-4 py-2 md:px-6 md:py-3">
-            <Row justify="between" align="start">
-              <div>
-                <DrawerTitle className="text-base md:text-lg">Explore templates</DrawerTitle>
-                <DrawerDescription className="text-xs md:text-sm">
-                  Build, customise and deploy an Agentic Process starting from a template.
-                </DrawerDescription>
-              </div>
-              <DrawerClose asChild>
-                <Button variant="ghost" size="icon" className="h-7 w-7 md:h-8 md:w-8 shrink-0">
-                  <X className="h-3 w-3 md:h-4 md:w-4" />
-                  <span className="sr-only">Close</span>
-                </Button>
-              </DrawerClose>
-            </Row>
-          </DrawerHeader>
-
-          <Row overflow="hidden" className="h-[calc(75vh-80px)]">
-            {/* Sidebar */}
-            <div className="hidden w-56 border-r bg-muted/20 p-3 md:block">
-              <div className="mb-3">
-                <div className="relative">
-                  <Search className="absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground" />
-                  <Input
-                    placeholder="Search"
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                    className="h-8 pl-7 text-xs"
-                  />
-                </div>
-              </div>
-
-              <Column gap={3}>
-                <div>
-                  <Row justify="between" align="center" className="mb-1.5">
-                    <h4 className="text-xs font-semibold">Category</h4>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="h-auto p-0 text-[10px]"
-                      onClick={() => setSelectedCategories([])}
-                    >
-                      Clear
-                    </Button>
-                  </Row>
-                  <Column gap={1.5}>
-                    {categories.map((category) => (
-                      <Row key={category.id} gap={2} align="center">
-                        <Checkbox
-                          id={`category-${category.id}`}
-                          checked={selectedCategories.includes(category.id)}
-                          onCheckedChange={() => toggleCategory(category.id)}
-                          className="h-3 w-3"
-                        />
-                        <Label
-                          htmlFor={`category-${category.id}`}
-                          className="cursor-pointer text-xs font-normal"
-                        >
-                          {category.label}
-                        </Label>
-                      </Row>
-                    ))}
-                  </Column>
-                </div>
-
-                <div>
-                  <Row justify="between" align="center" className="mb-1.5">
-                    <h4 className="text-xs font-semibold">Tool</h4>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="h-auto p-0 text-[10px]"
-                      onClick={() => setSelectedTools([])}
-                    >
-                      Clear
-                    </Button>
-                  </Row>
-                  <Column gap={1.5}>
-                    {tools.map((tool) => (
-                      <Row key={tool.id} gap={2} align="center">
-                        <Checkbox
-                          id={`tool-${tool.id}`}
-                          checked={selectedTools.includes(tool.id)}
-                          onCheckedChange={() => toggleTool(tool.id)}
-                          className="h-3 w-3"
-                        />
-                        <Label
-                          htmlFor={`tool-${tool.id}`}
-                          className="cursor-pointer text-xs font-normal"
-                        >
-                          {tool.label}
-                        </Label>
-                      </Row>
-                    ))}
-                  </Column>
-                </div>
-
-                <Button variant="link" size="sm" className="h-auto p-0 text-[10px]">
-                  Show more
-                </Button>
-              </Column>
-            </div>
-
-            {/* Main Content */}
-            <div className="flex-1 overflow-y-auto p-3 md:p-4">
-              {/* Mobile Search */}
-              <div className="mb-3 md:hidden">
-                <div className="relative">
-                  <Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-                  <Input
-                    placeholder="Search"
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                    className="pl-8 text-sm"
-                  />
-                </div>
-              </div>
-
-              <Grid gap={3} cols={1} className="sm:grid-cols-2 lg:grid-cols-3">
-                {filteredExamples.map((template) => (
-                  <ExampleCard key={template.id} template={template} />
-                ))}
-              </Grid>
-
-              {filteredExamples.length === 0 && (
-                <Row h={32} justify="center" align="center">
-                  <p className="text-sm text-muted-foreground">No templates found</p>
-                </Row>
-              )}
-            </div>
-          </Row>
-        </DrawerContent>
-      </Drawer>
-    </>
-  );
-}
diff --git a/packages/apollo-wind/src/templates/settings-example.stories.tsx b/packages/apollo-wind/src/templates/settings-example.stories.tsx
deleted file mode 100644
index 8e5682961..000000000
--- a/packages/apollo-wind/src/templates/settings-example.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { SettingsExample } from './settings-example';
-
-const meta = {
-  title: 'Templates/Current/Settings',
-  component: SettingsExample,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} satisfies Meta<typeof SettingsExample>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
diff --git a/packages/apollo-wind/src/templates/settings-example.tsx b/packages/apollo-wind/src/templates/settings-example.tsx
deleted file mode 100644
index c4fd22428..000000000
--- a/packages/apollo-wind/src/templates/settings-example.tsx
+++ /dev/null
@@ -1,461 +0,0 @@
-import * as React from 'react';
-import { Bell, Key, Palette, Shield, User, CreditCard } from 'lucide-react';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Separator } from '@/components/ui/separator';
-import { Switch } from '@/components/ui/switch';
-import { Textarea } from '@/components/ui/textarea';
-import { cn } from '@/lib';
-import { Row, Column, Grid } from '@/components/ui/layout';
-
-interface NavItem {
-  id: string;
-  label: string;
-  icon: React.ReactNode;
-}
-
-const navItems: NavItem[] = [
-  { id: 'profile', label: 'Profile', icon: <User className="h-4 w-4" /> },
-  { id: 'account', label: 'Account', icon: <Key className="h-4 w-4" /> },
-  {
-    id: 'appearance',
-    label: 'Appearance',
-    icon: <Palette className="h-4 w-4" />,
-  },
-  {
-    id: 'notifications',
-    label: 'Notifications',
-    icon: <Bell className="h-4 w-4" />,
-  },
-  { id: 'security', label: 'Security', icon: <Shield className="h-4 w-4" /> },
-  { id: 'billing', label: 'Billing', icon: <CreditCard className="h-4 w-4" /> },
-];
-
-export function SettingsExample() {
-  const [activeSection, setActiveSection] = React.useState('profile');
-  const [formData, setFormData] = React.useState({
-    firstName: 'John',
-    lastName: 'Doe',
-    email: 'john.doe@example.com',
-    username: 'johndoe',
-    bio: 'Software developer passionate about building great products.',
-    theme: 'system',
-    language: 'en',
-    emailNotifications: true,
-    pushNotifications: false,
-    marketingEmails: false,
-    twoFactor: false,
-  });
-
-  const updateField = (field: string, value: string | boolean) => {
-    setFormData((prev) => ({ ...prev, [field]: value }));
-  };
-
-  return (
-    <Column minH="screen" className="bg-background">
-      {/* Header */}
-      <header className="border-b">
-        <Row h={14} align="center" className="container mx-auto px-4">
-          <h1 className="text-lg font-semibold">Settings</h1>
-        </Row>
-      </header>
-
-      <Row gap={8} flex={1} className="container mx-auto p-6">
-        {/* Sidebar Navigation */}
-        <aside className="w-56 shrink-0">
-          <nav className="space-y-1">
-            {navItems.map((item) => (
-              <button
-                key={item.id}
-                onClick={() => setActiveSection(item.id)}
-                className={cn(
-                  'flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors',
-                  activeSection === item.id
-                    ? 'bg-muted font-medium'
-                    : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground'
-                )}
-              >
-                {item.icon}
-                {item.label}
-              </button>
-            ))}
-          </nav>
-        </aside>
-
-        {/* Main Content */}
-        <main className="flex-1 space-y-6">
-          {activeSection === 'profile' && (
-            <>
-              <div>
-                <h2 className="text-2xl font-bold">Profile</h2>
-                <p className="text-muted-foreground">Manage your public profile information.</p>
-              </div>
-
-              <Card>
-                <CardHeader>
-                  <CardTitle>Avatar</CardTitle>
-                  <CardDescription>
-                    Click on the avatar to upload a custom one from your files.
-                  </CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <Row gap={4} align="center">
-                    <Avatar className="h-20 w-20">
-                      <AvatarImage src="" />
-                      <AvatarFallback className="text-lg">JD</AvatarFallback>
-                    </Avatar>
-                    <Row gap={2}>
-                      <Button variant="outline" size="sm">
-                        Upload
-                      </Button>
-                      <Button variant="ghost" size="sm">
-                        Remove
-                      </Button>
-                    </Row>
-                  </Row>
-                </CardContent>
-              </Card>
-
-              <Card>
-                <CardHeader>
-                  <CardTitle>Personal Information</CardTitle>
-                  <CardDescription>Update your personal details here.</CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <Grid gap={4} cols={2} className="md:grid-cols-2">
-                    <Column gap={2}>
-                      <Label htmlFor="firstName">First name</Label>
-                      <Input
-                        id="firstName"
-                        value={formData.firstName}
-                        onChange={(e) => updateField('firstName', e.target.value)}
-                      />
-                    </Column>
-                    <Column gap={2}>
-                      <Label htmlFor="lastName">Last name</Label>
-                      <Input
-                        id="lastName"
-                        value={formData.lastName}
-                        onChange={(e) => updateField('lastName', e.target.value)}
-                      />
-                    </Column>
-                  </Grid>
-                  <Column gap={2}>
-                    <Label htmlFor="username">Username</Label>
-                    <Input
-                      id="username"
-                      value={formData.username}
-                      onChange={(e) => updateField('username', e.target.value)}
-                    />
-                  </Column>
-                  <Column gap={2}>
-                    <Label htmlFor="bio">Bio</Label>
-                    <Textarea
-                      id="bio"
-                      value={formData.bio}
-                      onChange={(e) => updateField('bio', e.target.value)}
-                      rows={3}
-                    />
-                    <p className="text-xs text-muted-foreground">
-                      Brief description for your profile. URLs are hyperlinked.
-                    </p>
-                  </Column>
-                </CardContent>
-                <CardFooter className="border-t px-6 py-4">
-                  <Button>Save changes</Button>
-                </CardFooter>
-              </Card>
-            </>
-          )}
-
-          {activeSection === 'account' && (
-            <>
-              <div>
-                <h2 className="text-2xl font-bold">Account</h2>
-                <p className="text-muted-foreground">
-                  Manage your account settings and email preferences.
-                </p>
-              </div>
-
-              <Card>
-                <CardHeader>
-                  <CardTitle>Email</CardTitle>
-                  <CardDescription>
-                    Your email address is used for login and notifications.
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <div className="space-y-2">
-                    <Label htmlFor="email">Email address</Label>
-                    <Input
-                      id="email"
-                      type="email"
-                      value={formData.email}
-                      onChange={(e) => updateField('email', e.target.value)}
-                    />
-                  </div>
-                </CardContent>
-                <CardFooter className="border-t px-6 py-4">
-                  <Button>Update email</Button>
-                </CardFooter>
-              </Card>
-
-              <Card className="border-destructive">
-                <CardHeader>
-                  <CardTitle className="text-destructive">Danger Zone</CardTitle>
-                  <CardDescription>Irreversible and destructive actions.</CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <Row justify="between" align="center">
-                    <Column gap={0}>
-                      <p className="font-medium">Delete account</p>
-                      <p className="text-sm text-muted-foreground">
-                        Permanently delete your account and all associated data.
-                      </p>
-                    </Column>
-                    <Button variant="destructive">Delete account</Button>
-                  </Row>
-                </CardContent>
-              </Card>
-            </>
-          )}
-
-          {activeSection === 'appearance' && (
-            <>
-              <div>
-                <h2 className="text-2xl font-bold">Appearance</h2>
-                <p className="text-muted-foreground">
-                  Customize the appearance of the application.
-                </p>
-              </div>
-
-              <Card>
-                <CardHeader>
-                  <CardTitle>Theme</CardTitle>
-                  <CardDescription>Select your preferred theme for the dashboard.</CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <div className="space-y-2">
-                    <Label htmlFor="theme">Theme</Label>
-                    <Select
-                      value={formData.theme}
-                      onValueChange={(value) => updateField('theme', value)}
-                    >
-                      <SelectTrigger id="theme" className="w-[200px]">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="light">Light</SelectItem>
-                        <SelectItem value="dark">Dark</SelectItem>
-                        <SelectItem value="system">System</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                  <div className="space-y-2">
-                    <Label htmlFor="language">Language</Label>
-                    <Select
-                      value={formData.language}
-                      onValueChange={(value) => updateField('language', value)}
-                    >
-                      <SelectTrigger id="language" className="w-[200px]">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="en">English</SelectItem>
-                        <SelectItem value="es">Spanish</SelectItem>
-                        <SelectItem value="fr">French</SelectItem>
-                        <SelectItem value="de">German</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                </CardContent>
-              </Card>
-            </>
-          )}
-
-          {activeSection === 'notifications' && (
-            <>
-              <div>
-                <h2 className="text-2xl font-bold">Notifications</h2>
-                <p className="text-muted-foreground">Configure how you receive notifications.</p>
-              </div>
-
-              <Card>
-                <CardHeader>
-                  <CardTitle>Notification Preferences</CardTitle>
-                  <CardDescription>Choose what notifications you want to receive.</CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-6">
-                  <Row justify="between" align="center">
-                    <Column gap={0.5}>
-                      <Label>Email notifications</Label>
-                      <p className="text-sm text-muted-foreground">
-                        Receive notifications via email.
-                      </p>
-                    </Column>
-                    <Switch
-                      checked={formData.emailNotifications}
-                      onCheckedChange={(checked) => updateField('emailNotifications', checked)}
-                    />
-                  </Row>
-                  <Separator />
-                  <Row justify="between" align="center">
-                    <Column gap={0.5}>
-                      <Label>Push notifications</Label>
-                      <p className="text-sm text-muted-foreground">
-                        Receive push notifications on your device.
-                      </p>
-                    </Column>
-                    <Switch
-                      checked={formData.pushNotifications}
-                      onCheckedChange={(checked) => updateField('pushNotifications', checked)}
-                    />
-                  </Row>
-                  <Separator />
-                  <Row justify="between" align="center">
-                    <Column gap={0.5}>
-                      <Label>Marketing emails</Label>
-                      <p className="text-sm text-muted-foreground">
-                        Receive emails about new features and updates.
-                      </p>
-                    </Column>
-                    <Switch
-                      checked={formData.marketingEmails}
-                      onCheckedChange={(checked) => updateField('marketingEmails', checked)}
-                    />
-                  </Row>
-                </CardContent>
-              </Card>
-            </>
-          )}
-
-          {activeSection === 'security' && (
-            <>
-              <div>
-                <h2 className="text-2xl font-bold">Security</h2>
-                <p className="text-muted-foreground">Manage your security preferences.</p>
-              </div>
-
-              <Card>
-                <CardHeader>
-                  <CardTitle>Password</CardTitle>
-                  <CardDescription>Change your password here.</CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <div className="space-y-2">
-                    <Label htmlFor="currentPassword">Current password</Label>
-                    <Input id="currentPassword" type="password" />
-                  </div>
-                  <div className="space-y-2">
-                    <Label htmlFor="newPassword">New password</Label>
-                    <Input id="newPassword" type="password" />
-                  </div>
-                  <div className="space-y-2">
-                    <Label htmlFor="confirmPassword">Confirm password</Label>
-                    <Input id="confirmPassword" type="password" />
-                  </div>
-                </CardContent>
-                <CardFooter className="border-t px-6 py-4">
-                  <Button>Update password</Button>
-                </CardFooter>
-              </Card>
-
-              <Card>
-                <CardHeader>
-                  <CardTitle>Two-Factor Authentication</CardTitle>
-                  <CardDescription>Add an extra layer of security to your account.</CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <Row justify="between" align="center">
-                    <Column gap={0.5}>
-                      <p className="font-medium">Enable 2FA</p>
-                      <p className="text-sm text-muted-foreground">
-                        Secure your account with two-factor authentication.
-                      </p>
-                    </Column>
-                    <Switch
-                      checked={formData.twoFactor}
-                      onCheckedChange={(checked) => updateField('twoFactor', checked)}
-                    />
-                  </Row>
-                </CardContent>
-              </Card>
-            </>
-          )}
-
-          {activeSection === 'billing' && (
-            <>
-              <div>
-                <h2 className="text-2xl font-bold">Billing</h2>
-                <p className="text-muted-foreground">
-                  Manage your billing information and subscription.
-                </p>
-              </div>
-
-              <Card>
-                <CardHeader>
-                  <CardTitle>Current Plan</CardTitle>
-                  <CardDescription>You are currently on the Pro plan.</CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <Row justify="between" align="center" className="rounded-lg border p-4">
-                    <Column gap={0}>
-                      <p className="font-semibold">Pro Plan</p>
-                      <p className="text-sm text-muted-foreground">
-                        $29/month • Renews on Jan 1, 2025
-                      </p>
-                    </Column>
-                    <Button variant="outline">Manage subscription</Button>
-                  </Row>
-                </CardContent>
-              </Card>
-
-              <Card>
-                <CardHeader>
-                  <CardTitle>Payment Method</CardTitle>
-                  <CardDescription>Update your payment information.</CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <Row justify="between" align="center" className="rounded-lg border p-4">
-                    <Row gap={3} align="center">
-                      <Row justify="center" align="center" className="h-10 w-14 rounded bg-muted">
-                        <CreditCard className="h-5 w-5" />
-                      </Row>
-                      <Column gap={0}>
-                        <p className="font-medium">•••• •••• •••• 4242</p>
-                        <p className="text-sm text-muted-foreground">Expires 12/25</p>
-                      </Column>
-                    </Row>
-                    <Button variant="ghost" size="sm">
-                      Edit
-                    </Button>
-                  </Row>
-                </CardContent>
-                <CardFooter className="border-t px-6 py-4">
-                  <Button variant="outline">Add payment method</Button>
-                </CardFooter>
-              </Card>
-            </>
-          )}
-        </main>
-      </Row>
-    </Column>
-  );
-}
diff --git a/packages/apollo-wind/src/templates/vscode-example.stories.tsx b/packages/apollo-wind/src/templates/vscode-example.stories.tsx
deleted file mode 100644
index b043151da..000000000
--- a/packages/apollo-wind/src/templates/vscode-example.stories.tsx
+++ /dev/null
@@ -1,295 +0,0 @@
-import * as React from 'react';
-
-import { Blocks, Bug, FileCode, FileJson, Files, GitBranch, Search, Settings } from 'lucide-react';
-
-import { Column, Row } from '@/components/ui/layout';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import {
-  Shell,
-  ShellActivityBar,
-  ShellActivityBarItem,
-  ShellContent,
-  ShellFileTree,
-  ShellMain,
-  ShellPane,
-  ShellPanel,
-  ShellSidebar,
-  ShellSidebarHeader,
-  ShellStatusBar,
-  ShellTabBar,
-  ShellTitleBar,
-} from './vscode-example';
-
-const meta = {
-  title: 'Templates/Current/VSCode',
-  component: Shell,
-} satisfies Meta<typeof Shell>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const sampleFiles = [
-  {
-    name: 'src',
-    type: 'folder' as const,
-    children: [
-      {
-        name: 'components',
-        type: 'folder' as const,
-        children: [
-          {
-            name: 'Button.tsx',
-            type: 'file' as const,
-            icon: <FileCode className="h-4 w-4 text-blue-500" />,
-          },
-          {
-            name: 'Input.tsx',
-            type: 'file' as const,
-            icon: <FileCode className="h-4 w-4 text-blue-500" />,
-          },
-          {
-            name: 'Shell.tsx',
-            type: 'file' as const,
-            icon: <FileCode className="h-4 w-4 text-blue-500" />,
-          },
-        ],
-      },
-      {
-        name: 'hooks',
-        type: 'folder' as const,
-        children: [
-          {
-            name: 'useAuth.ts',
-            type: 'file' as const,
-            icon: <FileCode className="h-4 w-4 text-blue-500" />,
-          },
-          {
-            name: 'useTheme.ts',
-            type: 'file' as const,
-            icon: <FileCode className="h-4 w-4 text-blue-500" />,
-          },
-        ],
-      },
-      {
-        name: 'App.tsx',
-        type: 'file' as const,
-        icon: <FileCode className="h-4 w-4 text-blue-500" />,
-      },
-      {
-        name: 'index.tsx',
-        type: 'file' as const,
-        icon: <FileCode className="h-4 w-4 text-blue-500" />,
-      },
-    ],
-  },
-  {
-    name: 'package.json',
-    type: 'file' as const,
-    icon: <FileJson className="h-4 w-4 text-yellow-500" />,
-  },
-  {
-    name: 'tsconfig.json',
-    type: 'file' as const,
-    icon: <FileJson className="h-4 w-4 text-yellow-500" />,
-  },
-  { name: 'README.md', type: 'file' as const },
-];
-
-function VSCodeShellDemo() {
-  const [activeView, setActiveView] = React.useState('files');
-  const [selectedFile, setSelectedFile] = React.useState('Shell.tsx');
-  const [tabs, setTabs] = React.useState([
-    {
-      id: 'shell',
-      title: 'Shell.tsx',
-      icon: <FileCode className="h-4 w-4 text-blue-500" />,
-    },
-    {
-      id: 'button',
-      title: 'Button.tsx',
-      icon: <FileCode className="h-4 w-4 text-blue-500" />,
-    },
-  ]);
-  const [activeTab, setActiveTab] = React.useState('shell');
-  const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false);
-
-  const handleCloseTab = (id: string) => {
-    setTabs(tabs.filter((t) => t.id !== id));
-    if (activeTab === id && tabs.length > 1) {
-      setActiveTab(tabs[0].id === id ? tabs[1].id : tabs[0].id);
-    }
-  };
-
-  return (
-    <Shell className="h-[700px]">
-      <ShellTitleBar title="project — Visual Studio Code" />
-      <ShellContent>
-        <ShellActivityBar>
-          <ShellActivityBarItem
-            icon={<Files className="h-5 w-5" />}
-            active={activeView === 'files'}
-            onClick={() => {
-              setActiveView('files');
-              setSidebarCollapsed(false);
-            }}
-            tooltip="Explorer"
-          />
-          <ShellActivityBarItem
-            icon={<Search className="h-5 w-5" />}
-            active={activeView === 'search'}
-            onClick={() => {
-              setActiveView('search');
-              setSidebarCollapsed(false);
-            }}
-            tooltip="Search"
-          />
-          <ShellActivityBarItem
-            icon={<GitBranch className="h-5 w-5" />}
-            active={activeView === 'git'}
-            onClick={() => {
-              setActiveView('git');
-              setSidebarCollapsed(false);
-            }}
-            tooltip="Source Control"
-          />
-          <ShellActivityBarItem
-            icon={<Bug className="h-5 w-5" />}
-            active={activeView === 'debug'}
-            onClick={() => {
-              setActiveView('debug');
-              setSidebarCollapsed(false);
-            }}
-            tooltip="Run and Debug"
-          />
-          <ShellActivityBarItem
-            icon={<Blocks className="h-5 w-5" />}
-            active={activeView === 'extensions'}
-            onClick={() => {
-              setActiveView('extensions');
-              setSidebarCollapsed(false);
-            }}
-            tooltip="Extensions"
-          />
-          <Column flex={1} />
-          <ShellActivityBarItem
-            icon={<Settings className="h-5 w-5" />}
-            onClick={() => undefined}
-            tooltip="Settings"
-          />
-        </ShellActivityBar>
-
-        <ShellSidebar collapsed={sidebarCollapsed} width={260}>
-          <ShellSidebarHeader
-            title="Explorer"
-            collapsed={sidebarCollapsed}
-            onCollapsedChange={setSidebarCollapsed}
-          />
-          <ShellFileTree
-            items={sampleFiles}
-            selectedFile={selectedFile}
-            onSelectFile={setSelectedFile}
-          />
-        </ShellSidebar>
-
-        <ShellMain>
-          <ShellTabBar
-            tabs={tabs}
-            activeTab={activeTab}
-            onTabChange={setActiveTab}
-            onTabClose={handleCloseTab}
-          />
-          <ShellPane>
-            <pre className="text-sm">
-              <code>{`import * as React from "react";
-import { cn } from "@/lib";
-
-interface ShellProps {
-  children: React.ReactNode;
-  className?: string;
-}
-
-export function Shell({ children, className }: ShellProps) {
-  return (
-    <div className={cn(
-      "flex h-full flex-col",
-      className
-    )}>
-      {children}
-    </div>
-  );
-}`}</code>
-            </pre>
-          </ShellPane>
-          <ShellPanel title="Terminal" height={150}>
-            <div className="text-muted-foreground">
-              <div>$ npm run dev</div>
-              <div className="text-green-500">ready - started server on 0.0.0.0:3000</div>
-              <div>$ _</div>
-            </div>
-          </ShellPanel>
-        </ShellMain>
-      </ShellContent>
-      <ShellStatusBar>
-        <Row gap={3} align="center">
-          <span>main</span>
-          <span>TypeScript</span>
-        </Row>
-        <Row gap={3} align="center">
-          <span>Ln 1, Col 1</span>
-          <span>UTF-8</span>
-        </Row>
-      </ShellStatusBar>
-    </Shell>
-  );
-}
-
-export const Default = {
-  // @ts-expect-error - args not needed when using render, but Storybook requires it
-  args: {},
-  render: () => <VSCodeShellDemo />,
-} satisfies Story;
-
-export const MinimalShell = {
-  // @ts-expect-error - args not needed when using render, but Storybook requires it
-  args: {},
-  render: () => (
-    <Shell className="h-[400px]">
-      <ShellTitleBar title="My App" />
-      <ShellContent>
-        <ShellMain>
-          <ShellPane>
-            <div className="text-center text-muted-foreground">
-              <h2 className="text-lg font-semibold">Welcome</h2>
-              <p>This is a minimal shell layout.</p>
-            </div>
-          </ShellPane>
-        </ShellMain>
-      </ShellContent>
-      <ShellStatusBar>
-        <span>Ready</span>
-      </ShellStatusBar>
-    </Shell>
-  ),
-} satisfies Story;
-
-export const WithSidebarOnly = {
-  // @ts-expect-error - args not needed when using render, but Storybook requires it
-  args: {},
-  render: () => (
-    <Shell className="h-[500px]">
-      <ShellTitleBar title="File Browser" />
-      <ShellContent>
-        <ShellSidebar width={280}>
-          <ShellSidebarHeader title="Files" />
-          <ShellFileTree items={sampleFiles} />
-        </ShellSidebar>
-        <ShellMain>
-          <ShellPane>
-            <p className="text-muted-foreground">Select a file to view its contents.</p>
-          </ShellPane>
-        </ShellMain>
-      </ShellContent>
-    </Shell>
-  ),
-} satisfies Story;
diff --git a/packages/apollo-wind/src/templates/vscode-example.tsx b/packages/apollo-wind/src/templates/vscode-example.tsx
deleted file mode 100644
index 43c743bd0..000000000
--- a/packages/apollo-wind/src/templates/vscode-example.tsx
+++ /dev/null
@@ -1,418 +0,0 @@
-import * as React from 'react';
-import { cn } from '@/lib';
-import {
-  ChevronDown,
-  ChevronRight,
-  File,
-  Folder,
-  FolderOpen,
-  X,
-  PanelLeftClose,
-} from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { Row, Column } from '@/components/ui/layout';
-
-// Shell container
-interface ShellProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-}
-
-export function Shell({ className, children, ...props }: ShellProps) {
-  return (
-    <Column
-      overflow="hidden"
-      className={cn('h-[600px] w-full rounded-lg border bg-background', className)}
-      {...props}
-    >
-      {children}
-    </Column>
-  );
-}
-
-// Title bar
-interface ShellTitleBarProps extends React.HTMLAttributes<HTMLDivElement> {
-  title?: string;
-}
-
-export function ShellTitleBar({ className, title, children, ...props }: ShellTitleBarProps) {
-  return (
-    <Row
-      h={9}
-      justify="between"
-      align="center"
-      className={cn('border-b bg-muted/50 px-3', className)}
-      {...props}
-    >
-      <Row gap={2} align="center">
-        <Row gap={1.5}>
-          <div className="h-3 w-3 rounded-full bg-red-500" />
-          <div className="h-3 w-3 rounded-full bg-yellow-500" />
-          <div className="h-3 w-3 rounded-full bg-green-500" />
-        </Row>
-        {title && <span className="ml-3 text-xs text-muted-foreground">{title}</span>}
-      </Row>
-      {children}
-    </Row>
-  );
-}
-
-// Main content area with sidebar
-interface ShellContentProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-}
-
-export function ShellContent({ className, children, ...props }: ShellContentProps) {
-  return (
-    <Row flex={1} overflow="hidden" className={className} {...props}>
-      {children}
-    </Row>
-  );
-}
-
-// Sidebar
-interface ShellSidebarProps extends React.HTMLAttributes<HTMLDivElement> {
-  collapsed?: boolean;
-  onCollapsedChange?: (collapsed: boolean) => void;
-  width?: number;
-}
-
-export function ShellSidebar({
-  className,
-  children,
-  collapsed = false,
-  onCollapsedChange,
-  width = 240,
-  ...props
-}: ShellSidebarProps) {
-  return (
-    <Column
-      className={cn(
-        'border-r bg-muted/30 transition-all duration-200',
-        collapsed ? 'w-0 overflow-hidden' : '',
-        className
-      )}
-      style={{ width: collapsed ? 0 : width }}
-      {...props}
-    >
-      {children}
-    </Column>
-  );
-}
-
-// Sidebar header
-interface ShellSidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
-  title: string;
-  collapsed?: boolean;
-  onCollapsedChange?: (collapsed: boolean) => void;
-}
-
-export function ShellSidebarHeader({
-  className,
-  title,
-  collapsed,
-  onCollapsedChange,
-  ...props
-}: ShellSidebarHeaderProps) {
-  return (
-    <Row
-      h={8}
-      justify="between"
-      align="center"
-      className={cn('px-3 text-xs font-medium uppercase text-muted-foreground', className)}
-      {...props}
-    >
-      <span>{title}</span>
-      {onCollapsedChange && (
-        <Button
-          variant="ghost"
-          size="icon"
-          className="h-5 w-5"
-          onClick={() => onCollapsedChange(!collapsed)}
-        >
-          <PanelLeftClose className="h-3.5 w-3.5" />
-        </Button>
-      )}
-    </Row>
-  );
-}
-
-// File tree
-interface FileTreeItem {
-  name: string;
-  type: 'file' | 'folder';
-  children?: FileTreeItem[];
-  icon?: React.ReactNode;
-}
-
-interface ShellFileTreeProps {
-  items: FileTreeItem[];
-  selectedFile?: string;
-  onSelectFile?: (name: string) => void;
-}
-
-export function ShellFileTree({ items, selectedFile, onSelectFile }: ShellFileTreeProps) {
-  return (
-    <ScrollArea className="flex-1">
-      <div className="p-2">
-        {items.map((item) => (
-          <FileTreeNode
-            key={item.name}
-            item={item}
-            depth={0}
-            selectedFile={selectedFile}
-            onSelectFile={onSelectFile}
-          />
-        ))}
-      </div>
-    </ScrollArea>
-  );
-}
-
-function FileTreeNode({
-  item,
-  depth,
-  selectedFile,
-  onSelectFile,
-}: {
-  item: FileTreeItem;
-  depth: number;
-  selectedFile?: string;
-  onSelectFile?: (name: string) => void;
-}) {
-  const [expanded, setExpanded] = React.useState(true);
-  const isFolder = item.type === 'folder';
-  const isSelected = selectedFile === item.name;
-
-  return (
-    <div>
-      <Row
-        gap={1}
-        align="center"
-        className={cn(
-          'cursor-pointer rounded px-2 py-0.5 text-sm hover:bg-muted',
-          isSelected && 'bg-primary/10 text-primary'
-        )}
-        style={{ paddingLeft: depth * 12 + 8 }}
-        onClick={() => {
-          if (isFolder) {
-            setExpanded(!expanded);
-          } else {
-            onSelectFile?.(item.name);
-          }
-        }}
-      >
-        {isFolder ? (
-          <>
-            {expanded ? (
-              <ChevronDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-            ) : (
-              <ChevronRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-            )}
-            {expanded ? (
-              <FolderOpen className="h-4 w-4 shrink-0 text-yellow-600" />
-            ) : (
-              <Folder className="h-4 w-4 shrink-0 text-yellow-600" />
-            )}
-          </>
-        ) : (
-          <>
-            <span className="w-3.5" />
-            {item.icon || <File className="h-4 w-4 shrink-0 text-muted-foreground" />}
-          </>
-        )}
-        <span className="truncate">{item.name}</span>
-      </Row>
-      {isFolder && expanded && item.children && (
-        <div>
-          {item.children.map((child) => (
-            <FileTreeNode
-              key={child.name}
-              item={child}
-              depth={depth + 1}
-              selectedFile={selectedFile}
-              onSelectFile={onSelectFile}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-// Main panel area
-interface ShellMainProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-}
-
-export function ShellMain({ className, children, ...props }: ShellMainProps) {
-  return (
-    <Column flex={1} overflow="hidden" className={className} {...props}>
-      {children}
-    </Column>
-  );
-}
-
-// Tab bar
-interface ShellTab {
-  id: string;
-  title: string;
-  icon?: React.ReactNode;
-}
-
-interface ShellTabBarProps {
-  tabs: ShellTab[];
-  activeTab?: string;
-  onTabChange?: (id: string) => void;
-  onTabClose?: (id: string) => void;
-}
-
-export function ShellTabBar({ tabs, activeTab, onTabChange, onTabClose }: ShellTabBarProps) {
-  return (
-    <Row h={9} align="center" className="border-b bg-muted/30">
-      {tabs.map((tab) => (
-        <Row
-          key={tab.id}
-          gap={2}
-          align="center"
-          className={cn(
-            'group h-full cursor-pointer border-r px-3 text-sm',
-            activeTab === tab.id
-              ? 'bg-background text-foreground'
-              : 'text-muted-foreground hover:bg-muted/50'
-          )}
-          onClick={() => onTabChange?.(tab.id)}
-        >
-          {tab.icon}
-          <span className="max-w-[120px] truncate">{tab.title}</span>
-          {onTabClose && (
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-4 w-4 opacity-0 group-hover:opacity-100"
-              onClick={(e) => {
-                e.stopPropagation();
-                onTabClose(tab.id);
-              }}
-            >
-              <X className="h-3 w-3" />
-            </Button>
-          )}
-        </Row>
-      ))}
-    </Row>
-  );
-}
-
-// Editor/content pane
-interface ShellPaneProps {
-  children: React.ReactNode;
-  className?: string;
-}
-
-export function ShellPane({ className, children }: ShellPaneProps) {
-  return (
-    <ScrollArea className={cn('flex-1', className)}>
-      <div className="p-4">{children}</div>
-    </ScrollArea>
-  );
-}
-
-// Status bar
-interface ShellStatusBarProps extends React.HTMLAttributes<HTMLDivElement> {
-  children?: React.ReactNode;
-}
-
-export function ShellStatusBar({ className, children, ...props }: ShellStatusBarProps) {
-  return (
-    <Row
-      h={6}
-      justify="between"
-      align="center"
-      className={cn('border-t bg-primary px-2 text-xs text-primary-foreground', className)}
-      {...props}
-    >
-      {children}
-    </Row>
-  );
-}
-
-// Activity bar (left icon strip)
-interface ShellActivityBarProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-}
-
-export function ShellActivityBar({ className, children, ...props }: ShellActivityBarProps) {
-  return (
-    <Column
-      w={12}
-      gap={2}
-      align="center"
-      className={cn('border-r bg-muted/50 py-2', className)}
-      {...props}
-    >
-      {children}
-    </Column>
-  );
-}
-
-interface ShellActivityBarItemProps {
-  icon: React.ReactNode;
-  active?: boolean;
-  onClick?: () => void;
-  tooltip?: string;
-}
-
-export function ShellActivityBarItem({
-  icon,
-  active,
-  onClick,
-  tooltip,
-}: ShellActivityBarItemProps) {
-  return (
-    <Button
-      variant="ghost"
-      size="icon"
-      className={cn(
-        'h-10 w-10 rounded-none border-l-2 border-transparent',
-        active && 'border-primary bg-muted'
-      )}
-      onClick={onClick}
-      title={tooltip}
-    >
-      {icon}
-    </Button>
-  );
-}
-
-// Panel (bottom panel like terminal)
-interface ShellPanelProps extends React.HTMLAttributes<HTMLDivElement> {
-  title?: string;
-  height?: number;
-  children: React.ReactNode;
-}
-
-export function ShellPanel({
-  className,
-  title,
-  height = 200,
-  children,
-  ...props
-}: ShellPanelProps) {
-  return (
-    <div className={cn('border-t', className)} style={{ height }} {...props}>
-      {title && (
-        <Row
-          h={8}
-          align="center"
-          className="border-b bg-muted/30 px-3 text-xs font-medium uppercase text-muted-foreground"
-        >
-          {title}
-        </Row>
-      )}
-      <ScrollArea className="h-full">
-        <div className="p-2 font-mono text-sm">{children}</div>
-      </ScrollArea>
-    </div>
-  );
-}
diff --git a/packages/apollo-wind/tests/setup.ts b/packages/apollo-wind/tests/setup.ts
index 64fbdca77..6c6936f9a 100644
--- a/packages/apollo-wind/tests/setup.ts
+++ b/packages/apollo-wind/tests/setup.ts
@@ -37,6 +37,9 @@ global.IntersectionObserver = class IntersectionObserver {
 
 // Mock ResizeObserver for components that use it (like Command from cmdk)
 global.ResizeObserver = class ResizeObserver {
+  constructor(_callback: ResizeObserverCallback) {
+    // Mock implementation
+  }
   observe() {
     // Mock implementation
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 66f32bd40..06925f16a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -903,12 +903,18 @@ importers:
       '@semantic-release/git':
         specifier: ^10.0.1
         version: 10.0.1(semantic-release@25.0.2(typescript@5.9.3))
+      '@storybook/addon-a11y':
+        specifier: ^10.2.0
+        version: 10.2.4(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.6.2)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))
       '@storybook/addon-docs':
         specifier: ^10.2.0
         version: 10.2.4(@types/react@19.2.8)(esbuild@0.27.3)(rollup@4.57.1)(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.6.2)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(vite@7.3.0(@types/node@24.10.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass@1.94.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.1))(webpack@5.105.0(esbuild@0.27.3))
       '@storybook/addon-links':
         specifier: ^10.2.0
         version: 10.2.4(react@19.2.3)(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.6.2)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))
+      '@storybook/addon-mcp':
+        specifier: ^0.2.2
+        version: 0.2.3(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.6.2)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3)
       '@storybook/react-vite':
         specifier: ^10.2.0
         version: 10.2.4(esbuild@0.27.3)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(rollup@4.57.1)(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.6.2)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass@1.94.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.1))(webpack@5.105.0(esbuild@0.27.3))
@@ -5365,6 +5371,11 @@ packages:
       react:
         optional: true
 
+  '@storybook/addon-mcp@0.2.3':
+    resolution: {integrity: sha512-4dwFNXtJNJnQQOcCyOriS1+H5eop1RC0PZYp10mGN+mlaIW5WfyFKFuqknleHaOQLJQ8+nI7QMjGwZuJmOUxhw==}
+    peerDependencies:
+      storybook: ^9.1.16 || ^10.0.0 || ^10.1.0-0 || ^10.2.0-0 || ^10.3.0-0 || ^10.4.0-0
+
   '@storybook/builder-vite@10.2.4':
     resolution: {integrity: sha512-/hcT1xj3CL5GkJ5v5/EguZdttDwNE6weNXK7vKzp034tnGcLycOossDsTiUQkBowSL+Ylc8aKj+ZgvddPNfOig==}
     peerDependencies:
@@ -5398,6 +5409,9 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  '@storybook/mcp@0.2.2':
+    resolution: {integrity: sha512-jHM1E2CyRwZYBMT9PqsdDT5LFf8c79fdYLdPueLZl1BZUQSpEipitVmXFbcEAClBT/Gsq/K1zNUNIP4+nAXAaw==}
+
   '@storybook/react-dom-shim@10.2.4':
     resolution: {integrity: sha512-i22OtrZ7GeZPt/odLf0vqyDhRSKyaLsHkkKSBcANQfzRRnBZmiz2FchOtWm9uvoDWybQsTruZq7kTdtpEhwyGw==}
     peerDependencies:
@@ -5735,6 +5749,26 @@ packages:
       '@tiptap/core': ^3.19.0
       '@tiptap/pm': ^3.19.0
 
+  '@tmcp/adapter-valibot@0.1.5':
+    resolution: {integrity: sha512-9P2wrVYPngemNK0UvPb/opC722/jfd09QxXmme1TRp/wPsl98vpSk/MXt24BCMqBRv4Dvs0xxJH4KHDcjXW52Q==}
+    peerDependencies:
+      tmcp: ^1.17.0
+      valibot: ^1.1.0
+
+  '@tmcp/session-manager@0.2.1':
+    resolution: {integrity: sha512-DOGy9LfufXCy1wfpGHZ6qPSDQtRnTVwOb71+41ffovTqzLMZlK3iLK/LIsekHxIiku+iIAUiqEKN+DHbqEm8IA==}
+    peerDependencies:
+      tmcp: ^1.16.3
+
+  '@tmcp/transport-http@0.8.4':
+    resolution: {integrity: sha512-n/4oIYjHyX5i6LFC3+qlxtc/IIv1xoqLhPVbdA5VYDyUWU6QRBU3+ffMXQuAPs0Q6Z+ZCzcO30V90yRMAxuriQ==}
+    peerDependencies:
+      '@tmcp/auth': ^0.3.3 || ^0.4.0
+      tmcp: ^1.18.0
+    peerDependenciesMeta:
+      '@tmcp/auth':
+        optional: true
+
   '@trysound/sax@0.2.0':
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
     engines: {node: '>=10.13.0'}
@@ -6046,6 +6080,11 @@ packages:
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
 
+  '@valibot/to-json-schema@1.5.0':
+    resolution: {integrity: sha512-GE7DmSr1C2UCWPiV0upRH6mv0cCPsqYGs819fb6srCS1tWhyXrkGGe+zxUiwzn/L1BOfADH4sNjY/YHCuP8phQ==}
+    peerDependencies:
+      valibot: ^1.2.0
+
   '@vercel/analytics@1.5.0':
     resolution: {integrity: sha512-MYsBzfPki4gthY5HnYN7jgInhAZ7Ac1cYDoRWFomwGHWEX7odTEzbtg9kf/QSo7XEsEAqlQugA6gJ2WS2DEa3g==}
     peerDependencies:
@@ -7658,6 +7697,9 @@ packages:
       jiti:
         optional: true
 
+  esm-env@1.2.2:
+    resolution: {integrity: sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==}
+
   esm@3.2.25:
     resolution: {integrity: sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==}
     engines: {node: '>=6'}
@@ -8934,6 +8976,9 @@ packages:
   json-parse-even-better-errors@2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
 
+  json-rpc-2.0@1.7.1:
+    resolution: {integrity: sha512-JqZjhjAanbpkXIzFE7u8mE/iFblawwlXtONaCvRqI+pyABVz7B4M1EUNpyVW+dZjqgQ2L5HFmZCmOCgUKm00hg==}
+
   json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
 
@@ -10227,6 +10272,9 @@ packages:
     resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
     engines: {node: '>=12'}
 
+  picoquery@2.5.0:
+    resolution: {integrity: sha512-j1kgOFxtaCyoFCkpoYG2Oj3OdGakadO7HZ7o5CqyRazlmBekKhbDoUnNnXASE07xSY4nDImWZkrZv7toSxMi/g==}
+
   pidtree@0.6.0:
     resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
     engines: {node: '>=0.10'}
@@ -11489,6 +11537,9 @@ packages:
   sprintf-js@1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
 
+  sqids@0.3.0:
+    resolution: {integrity: sha512-lOQK1ucVg+W6n3FhRwwSeUijxe93b51Bfz5PMRMihVf1iVkl82ePQG7V5vwrhzB11v0NtsR25PSZRGiSomJaJw==}
+
   stack-utils@2.0.6:
     resolution: {integrity: sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==}
     engines: {node: '>=10'}
@@ -11882,6 +11933,9 @@ packages:
     resolution: {integrity: sha512-8PWx8tvC4jDB39BQw1m4x8y5MH1BcQ5xHeL2n7UVFulMPH/3Q0uiamahFJ3lXA0zO2SUyRXuVVbWSDmstlt9YA==}
     hasBin: true
 
+  tmcp@1.19.2:
+    resolution: {integrity: sha512-/AEG/jlzflGKqCKm7GNdhz50VtFlN+3vcnKd+iQJXcHdIPrpCRMolEj57SfgcXcfE2ouX7J6Q05gPKsS2NZhKg==}
+
   tmp@0.2.5:
     resolution: {integrity: sha512-voyz6MApa1rQGUxT3E+BK7/ROe8itEx7vD8/HEvt4xwXucvQ5G5oeEiHkmHZJuBO21RpOf+YYm9MOivj709jow==}
     engines: {node: '>=14.14'}
@@ -12233,6 +12287,9 @@ packages:
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
+  uri-template-matcher@1.1.2:
+    resolution: {integrity: sha512-uZc1h12jdO3m/R77SfTEOuo6VbMhgWznaawKpBjRGSJb7i91x5PgI37NQJtG+Cerxkk0yr1pylBY2qG1kQ+aEQ==}
+
   url-join@5.0.0:
     resolution: {integrity: sha512-n2huDr9h9yzd6exQVnH/jU5mr+Pfx08LRXXZhkLLetAMESRj+anQsTAh940iMrIetKAmry9coFuZQ2jY8/p3WA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -12269,6 +12326,14 @@ packages:
     resolution: {integrity: sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==}
     hasBin: true
 
+  valibot@1.2.0:
+    resolution: {integrity: sha512-mm1rxUsmOxzrwnX5arGS+U4T25RdvpPjPN4yR0u9pUBov9+zGVtO84tif1eY4r6zWxVxu3KzIyknJy3rxfRZZg==}
+    peerDependencies:
+      typescript: '>=5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   validate-npm-package-license@3.0.4:
     resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
 
@@ -17039,6 +17104,19 @@ snapshots:
     optionalDependencies:
       react: 19.2.3
 
+  '@storybook/addon-mcp@0.2.3(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.6.2)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3)':
+    dependencies:
+      '@storybook/mcp': 0.2.2(typescript@5.9.3)
+      '@tmcp/adapter-valibot': 0.1.5(tmcp@1.19.2(typescript@5.9.3))(valibot@1.2.0(typescript@5.9.3))
+      '@tmcp/transport-http': 0.8.4(tmcp@1.19.2(typescript@5.9.3))
+      picoquery: 2.5.0
+      storybook: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.6.2)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      tmcp: 1.19.2(typescript@5.9.3)
+      valibot: 1.2.0(typescript@5.9.3)
+    transitivePeerDependencies:
+      - '@tmcp/auth'
+      - typescript
+
   '@storybook/builder-vite@10.2.4(esbuild@0.27.0)(rollup@4.57.1)(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.6.2)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(vite@7.3.0(@types/node@24.10.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass@1.94.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.1))(webpack@5.105.0(esbuild@0.27.0))':
     dependencies:
       '@storybook/csf-plugin': 10.2.4(esbuild@0.27.0)(rollup@4.57.1)(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.6.2)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(vite@7.3.0(@types/node@24.10.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass@1.94.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.1))(webpack@5.105.0(esbuild@0.27.0))
@@ -17109,6 +17187,16 @@ snapshots:
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
 
+  '@storybook/mcp@0.2.2(typescript@5.9.3)':
+    dependencies:
+      '@tmcp/adapter-valibot': 0.1.5(tmcp@1.19.2(typescript@5.9.3))(valibot@1.2.0(typescript@5.9.3))
+      '@tmcp/transport-http': 0.8.4(tmcp@1.19.2(typescript@5.9.3))
+      tmcp: 1.19.2(typescript@5.9.3)
+      valibot: 1.2.0(typescript@5.9.3)
+    transitivePeerDependencies:
+      - '@tmcp/auth'
+      - typescript
+
   '@storybook/react-dom-shim@10.2.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.6.2)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))':
     dependencies:
       react: 19.2.3
@@ -17530,6 +17618,23 @@ snapshots:
       '@tiptap/core': 3.19.0(@tiptap/pm@3.19.0)
       '@tiptap/pm': 3.19.0
 
+  '@tmcp/adapter-valibot@0.1.5(tmcp@1.19.2(typescript@5.9.3))(valibot@1.2.0(typescript@5.9.3))':
+    dependencies:
+      '@standard-schema/spec': 1.0.0
+      '@valibot/to-json-schema': 1.5.0(valibot@1.2.0(typescript@5.9.3))
+      tmcp: 1.19.2(typescript@5.9.3)
+      valibot: 1.2.0(typescript@5.9.3)
+
+  '@tmcp/session-manager@0.2.1(tmcp@1.19.2(typescript@5.9.3))':
+    dependencies:
+      tmcp: 1.19.2(typescript@5.9.3)
+
+  '@tmcp/transport-http@0.8.4(tmcp@1.19.2(typescript@5.9.3))':
+    dependencies:
+      '@tmcp/session-manager': 0.2.1(tmcp@1.19.2(typescript@5.9.3))
+      esm-env: 1.2.2
+      tmcp: 1.19.2(typescript@5.9.3)
+
   '@trysound/sax@0.2.0': {}
 
   '@ts-morph/common@0.27.0':
@@ -17888,6 +17993,10 @@ snapshots:
 
   '@ungap/structured-clone@1.3.0': {}
 
+  '@valibot/to-json-schema@1.5.0(valibot@1.2.0(typescript@5.9.3))':
+    dependencies:
+      valibot: 1.2.0(typescript@5.9.3)
+
   '@vercel/analytics@1.5.0(next@16.1.5(@babel/core@7.28.5)(babel-plugin-macros@3.1.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.94.2))(react@19.2.3)':
     optionalDependencies:
       next: 16.1.5(@babel/core@7.28.5)(babel-plugin-macros@3.1.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.94.2)
@@ -19864,6 +19973,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  esm-env@1.2.2: {}
+
   esm@3.2.25: {}
 
   espree@10.4.0:
@@ -21291,6 +21402,8 @@ snapshots:
 
   json-parse-even-better-errors@2.3.1: {}
 
+  json-rpc-2.0@1.7.1: {}
+
   json-schema-traverse@0.4.1: {}
 
   json-schema-traverse@1.0.0: {}
@@ -22857,6 +22970,8 @@ snapshots:
 
   picomatch@4.0.3: {}
 
+  picoquery@2.5.0: {}
+
   pidtree@0.6.0: {}
 
   pify@2.3.0: {}
@@ -24510,6 +24625,8 @@ snapshots:
   sprintf-js@1.0.3:
     optional: true
 
+  sqids@0.3.0: {}
+
   stack-utils@2.0.6:
     dependencies:
       escape-string-regexp: 2.0.0
@@ -24992,6 +25109,16 @@ snapshots:
     dependencies:
       tldts-core: 7.0.19
 
+  tmcp@1.19.2(typescript@5.9.3):
+    dependencies:
+      '@standard-schema/spec': 1.0.0
+      json-rpc-2.0: 1.7.1
+      sqids: 0.3.0
+      uri-template-matcher: 1.1.2
+      valibot: 1.2.0(typescript@5.9.3)
+    transitivePeerDependencies:
+      - typescript
+
   tmp@0.2.5: {}
 
   to-regex-range@5.0.1:
@@ -25336,6 +25463,8 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  uri-template-matcher@1.1.2: {}
+
   url-join@5.0.0: {}
 
   use-callback-ref@1.3.3(@types/react@19.2.8)(react@19.2.3):
@@ -25361,6 +25490,10 @@ snapshots:
 
   uuid@11.1.0: {}
 
+  valibot@1.2.0(typescript@5.9.3):
+    optionalDependencies:
+      typescript: 5.9.3
+
   validate-npm-package-license@3.0.4:
     dependencies:
       spdx-correct: 3.2.0

From a0e551d80c448481a74ae45fd1c0bebf5d482769 Mon Sep 17 00:00:00 2001
From: David Anthony <dba@hey.com>
Date: Thu, 12 Feb 2026 15:24:14 -0800
Subject: [PATCH 2/8] feat(apollo-wind): comprehensive component stories update
 and cleanup

Expand Storybook documentation with rich, structured stories for 20+ components
following a consistent format (Basic, Variants, Examples). Reorganize component
categories, remove unused components, and fix theme issues.

Components updated:
- Alert, Alert Dialog, Accordion, Badge, Breadcrumb, Combobox, Command,
  Context Menu, Data Table, Dialog, Dropdown, Empty State, Hover Card,
  Pagination, Popover, Progress, Sheet, Skeleton, Sonner/Toast, Spinner,
  Tabs, Tooltip

Components removed:
- Menubar, Navigation Menu (unused, not needed for design system)
- Drawer (consolidated into Sheet/Drawer component)
- Table stories (covered by Data Table)
- Pattern Drawer/Modal experiments

Reorganization:
- Move Search, Calendar, Collapsible to UiPath-review folder
- Move Alert, Spinner to Feedback category
- Move Context Menu to Navigation category
- Rename Sonner to Toast (Sonner), Dropdown Menu to Dropdown
- Rename Sheet to Drawer (Sheet)

Fixes:
- Add --color-destructive-foreground to future-theme.css
- Fix Context Menu forwardRef for right-click support
- Enhance EmptyState with code prop and children support

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/apollo-wind/.storybook/manager.js    |    9 -
 packages/apollo-wind/.storybook/manager.ts    |    2 +-
 packages/apollo-wind/.storybook/preview.tsx   |    3 +-
 packages/apollo-wind/.storybook/theme.js      |    8 -
 packages/apollo-wind/package.json             |    1 +
 .../src/components/ui/accordion.stories.tsx   |  302 +++-
 .../components/ui/alert-dialog.stories.tsx    |  336 ++++-
 .../src/components/ui/alert.stories.tsx       |  333 ++++-
 .../src/components/ui/badge.stories.tsx       |  189 ++-
 .../src/components/ui/breadcrumb.stories.tsx  |  222 ++-
 .../src/components/ui/calendar.stories.tsx    |    2 +-
 .../apollo-wind/src/components/ui/chart.tsx   |  355 +++++
 .../src/components/ui/collapsible.stories.tsx |    2 +-
 .../src/components/ui/combobox.stories.tsx    |  454 +++++-
 .../src/components/ui/command.stories.tsx     |  364 ++++-
 .../ui/component-gallery.stories.tsx          |   32 -
 .../components/ui/context-menu.stories.tsx    |  363 ++++-
 .../src/components/ui/data-table.stories.tsx  | 1211 +++++++++++------
 .../src/components/ui/dialog.stories.tsx      |  284 +++-
 .../src/components/ui/drawer.stories.tsx      |   96 --
 .../src/components/ui/drawer.test.tsx         |  176 ---
 .../components/ui/dropdown-menu.stories.tsx   |  430 +++++-
 .../src/components/ui/empty-state.stories.tsx |   86 +-
 .../src/components/ui/empty-state.tsx         |   27 +-
 .../src/components/ui/hover-card.stories.tsx  |  324 ++++-
 .../apollo-wind/src/components/ui/index.ts    |    3 -
 .../src/components/ui/menubar.stories.tsx     |   54 -
 .../src/components/ui/menubar.test.tsx        |  354 -----
 .../apollo-wind/src/components/ui/menubar.tsx |  229 ----
 .../components/ui/navigation-menu.stories.tsx |   80 --
 .../components/ui/navigation-menu.test.tsx    |  151 --
 .../src/components/ui/navigation-menu.tsx     |  120 --
 .../src/components/ui/pagination.stories.tsx  |  342 ++++-
 .../src/components/ui/popover.stories.tsx     |  220 ++-
 .../src/components/ui/progress.stories.tsx    |  317 ++++-
 .../src/components/ui/search.stories.tsx      |    2 +-
 .../src/components/ui/sheet.stories.tsx       |  262 +++-
 .../src/components/ui/skeleton.stories.tsx    |  280 +++-
 .../src/components/ui/sonner.stories.tsx      |  505 ++++++-
 .../src/components/ui/table.stories.tsx       |   72 -
 .../src/components/ui/tabs.stories.tsx        |  346 ++++-
 .../src/components/ui/tooltip.stories.tsx     |  401 +++++-
 .../src/foundation/Future/future-theme.css    |    2 +
 .../getting-started.stories.tsx               |    2 +-
 .../getting-started/prototyping.stories.tsx   |    2 +-
 packages/apollo-wind/src/index.ts             |   44 -
 .../EmptyErrors/empty-errors.stories.tsx      |  157 ++-
 .../EmptyErrors/error-components.tsx          |   33 +
 .../Experiments/visualization.stories.tsx     |  867 ++++++++++++
 .../src/templates/More/more.stories.tsx       |  503 -------
 pnpm-lock.yaml                                |    3 +
 51 files changed, 8227 insertions(+), 2735 deletions(-)
 delete mode 100644 packages/apollo-wind/.storybook/manager.js
 delete mode 100644 packages/apollo-wind/.storybook/theme.js
 create mode 100644 packages/apollo-wind/src/components/ui/chart.tsx
 delete mode 100644 packages/apollo-wind/src/components/ui/drawer.stories.tsx
 delete mode 100644 packages/apollo-wind/src/components/ui/drawer.test.tsx
 delete mode 100644 packages/apollo-wind/src/components/ui/menubar.stories.tsx
 delete mode 100644 packages/apollo-wind/src/components/ui/menubar.test.tsx
 delete mode 100644 packages/apollo-wind/src/components/ui/menubar.tsx
 delete mode 100644 packages/apollo-wind/src/components/ui/navigation-menu.stories.tsx
 delete mode 100644 packages/apollo-wind/src/components/ui/navigation-menu.test.tsx
 delete mode 100644 packages/apollo-wind/src/components/ui/navigation-menu.tsx
 delete mode 100644 packages/apollo-wind/src/components/ui/table.stories.tsx
 create mode 100644 packages/apollo-wind/src/templates/EmptyErrors/error-components.tsx
 create mode 100644 packages/apollo-wind/src/templates/Experiments/visualization.stories.tsx
 delete mode 100644 packages/apollo-wind/src/templates/More/more.stories.tsx

diff --git a/packages/apollo-wind/.storybook/manager.js b/packages/apollo-wind/.storybook/manager.js
deleted file mode 100644
index 15b1d8bfe..000000000
--- a/packages/apollo-wind/.storybook/manager.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { addons } from 'storybook/manager-api';
-import theme from './theme';
-
-addons.setConfig({
-  theme,
-  sidebar: {
-    collapsedRoots: ['forms'],
-  },
-});
diff --git a/packages/apollo-wind/.storybook/manager.ts b/packages/apollo-wind/.storybook/manager.ts
index 6b3749784..3205a54cb 100644
--- a/packages/apollo-wind/.storybook/manager.ts
+++ b/packages/apollo-wind/.storybook/manager.ts
@@ -5,6 +5,6 @@ addons.setConfig({
   theme,
   showPanel: false,
   sidebar: {
-    collapsedRoots: ['components', 'forms'],
+    collapsedRoots: ['components', 'forms', 'experiments'],
   },
 });
diff --git a/packages/apollo-wind/.storybook/preview.tsx b/packages/apollo-wind/.storybook/preview.tsx
index 31dfd66fd..c989ea379 100644
--- a/packages/apollo-wind/.storybook/preview.tsx
+++ b/packages/apollo-wind/.storybook/preview.tsx
@@ -71,10 +71,11 @@ const preview: Preview = {
             'Layout',
             'Navigation',
             'Overlays',
-            'Feedback',
+            'UiPath',
           ],
           'Templates',
           'Forms',
+          'Experiments',
           '*',
         ],
       },
diff --git a/packages/apollo-wind/.storybook/theme.js b/packages/apollo-wind/.storybook/theme.js
deleted file mode 100644
index 4110f99d3..000000000
--- a/packages/apollo-wind/.storybook/theme.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { create } from 'storybook/theming';
-
-export default create({
-  base: 'dark', // Default to dark; user can switch to light via Storybook UI if desired
-  brandTitle: 'UiPath',
-  brandImage: '/ui-path.svg',
-  brandTarget: '_self',
-});
diff --git a/packages/apollo-wind/package.json b/packages/apollo-wind/package.json
index aef95d54f..6eac56e1e 100644
--- a/packages/apollo-wind/package.json
+++ b/packages/apollo-wind/package.json
@@ -88,6 +88,7 @@
     "next-themes": "^0.4.6",
     "react-day-picker": "^9.13.0",
     "react-hook-form": "^7.66.1",
+    "recharts": "^2.15.4",
     "react-resizable-panels": "^3.0.6",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
diff --git a/packages/apollo-wind/src/components/ui/accordion.stories.tsx b/packages/apollo-wind/src/components/ui/accordion.stories.tsx
index 577668c08..a01bb037a 100644
--- a/packages/apollo-wind/src/components/ui/accordion.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/accordion.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { Meta } from '@storybook/react-vite';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './accordion';
 
 const meta: Meta<typeof Accordion> = {
@@ -8,27 +8,313 @@ const meta: Meta<typeof Accordion> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof Accordion>;
 
-export const Default = {
+// ============================================================================
+// Basic
+// ============================================================================
+
+export const Basic = {
+  name: 'Basic',
   render: () => (
-    <Accordion type="single" collapsible className="w-full">
+    <Accordion type="single" collapsible className="w-full max-w-lg">
       <AccordionItem value="item-1">
         <AccordionTrigger>Is it accessible?</AccordionTrigger>
-        <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
+        <AccordionContent>
+          Yes. It adheres to the WAI-ARIA design pattern.
+        </AccordionContent>
       </AccordionItem>
       <AccordionItem value="item-2">
         <AccordionTrigger>Is it styled?</AccordionTrigger>
         <AccordionContent>
-          Yes. It comes with default styles that matches the other components' aesthetic.
+          Yes. It comes with default styles that match the other components&apos; aesthetic.
         </AccordionContent>
       </AccordionItem>
       <AccordionItem value="item-3">
         <AccordionTrigger>Is it animated?</AccordionTrigger>
         <AccordionContent>
-          Yes. It's animated by default, but you can disable it if you prefer.
+          Yes. It&apos;s animated by default, but you can disable it if you prefer.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+// ============================================================================
+// Multiple
+// ============================================================================
+
+export const Multiple = {
+  name: 'Multiple',
+  render: () => (
+    <Accordion type="multiple" defaultValue={['item-1', 'item-3']} className="w-full max-w-lg">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>First section</AccordionTrigger>
+        <AccordionContent>
+          This accordion allows multiple items to be open at the same time. Try opening several sections.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Second section</AccordionTrigger>
+        <AccordionContent>
+          Opening this section will not close the others.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Third section</AccordionTrigger>
+        <AccordionContent>
+          Multiple sections can remain expanded simultaneously.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+// ============================================================================
+// Disabled
+// ============================================================================
+
+export const Disabled = {
+  name: 'Disabled',
+  render: () => (
+    <Accordion type="single" collapsible className="w-full max-w-lg">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Available section</AccordionTrigger>
+        <AccordionContent>
+          This section is available and can be expanded.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2" disabled>
+        <AccordionTrigger className="opacity-50 cursor-not-allowed hover:no-underline">
+          Disabled section
+        </AccordionTrigger>
+        <AccordionContent>
+          This content is not accessible.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Another available section</AccordionTrigger>
+        <AccordionContent>
+          This section is also available.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-4" disabled>
+        <AccordionTrigger className="opacity-50 cursor-not-allowed hover:no-underline">
+          Requires upgrade
+        </AccordionTrigger>
+        <AccordionContent>
+          This content requires a plan upgrade.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+// ============================================================================
+// Borders
+// ============================================================================
+
+export const Borders = {
+  name: 'Borders',
+  render: () => (
+    <Accordion type="single" collapsible className="w-full max-w-lg">
+      <AccordionItem value="item-1" className="border rounded-lg px-4 mb-2">
+        <AccordionTrigger>What is your refund policy?</AccordionTrigger>
+        <AccordionContent>
+          We offer a 30-day money-back guarantee on all plans. If you&apos;re not satisfied, contact support for a full refund.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2" className="border rounded-lg px-4 mb-2">
+        <AccordionTrigger>Can I change my plan later?</AccordionTrigger>
+        <AccordionContent>
+          Yes, you can upgrade or downgrade your plan at any time. Changes take effect at the start of your next billing cycle.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3" className="border rounded-lg px-4">
+        <AccordionTrigger>Do you offer team discounts?</AccordionTrigger>
+        <AccordionContent>
+          Yes, we offer volume discounts for teams of 10 or more. Contact our sales team for a custom quote.
         </AccordionContent>
       </AccordionItem>
     </Accordion>
   ),
-} satisfies Story;
+};
+
+// ============================================================================
+// Card
+// ============================================================================
+
+export const Card = {
+  name: 'Card',
+  render: () => (
+    <Accordion type="single" collapsible className="w-full max-w-lg">
+      <AccordionItem value="item-1" className="mb-3 rounded-lg border bg-card px-4 shadow-sm [&:not(:last-child)]:border-b">
+        <AccordionTrigger className="hover:no-underline">
+          <div className="flex flex-col items-start gap-1">
+            <span className="text-sm font-medium">Getting Started</span>
+            <span className="text-xs text-muted-foreground font-normal">Learn the basics of setting up your workspace</span>
+          </div>
+        </AccordionTrigger>
+        <AccordionContent>
+          <div className="space-y-2 text-sm text-muted-foreground">
+            <p>1. Create a new workspace from the dashboard.</p>
+            <p>2. Invite your team members via email.</p>
+            <p>3. Configure your project settings.</p>
+            <p>4. Start building automations.</p>
+          </div>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2" className="mb-3 rounded-lg border bg-card px-4 shadow-sm [&:not(:last-child)]:border-b">
+        <AccordionTrigger className="hover:no-underline">
+          <div className="flex flex-col items-start gap-1">
+            <span className="text-sm font-medium">API Integration</span>
+            <span className="text-xs text-muted-foreground font-normal">Connect external services to your workflows</span>
+          </div>
+        </AccordionTrigger>
+        <AccordionContent>
+          <div className="space-y-2 text-sm text-muted-foreground">
+            <p>Use our REST API to integrate with any external service. Authentication is handled via API keys that you can generate from your account settings.</p>
+          </div>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3" className="rounded-lg border bg-card px-4 shadow-sm [&:not(:last-child)]:border-b">
+        <AccordionTrigger className="hover:no-underline">
+          <div className="flex flex-col items-start gap-1">
+            <span className="text-sm font-medium">Deployment</span>
+            <span className="text-xs text-muted-foreground font-normal">Deploy your automations to production</span>
+          </div>
+        </AccordionTrigger>
+        <AccordionContent>
+          <div className="space-y-2 text-sm text-muted-foreground">
+            <p>Publish your automation to a production environment with a single click. Monitor performance and logs from the dashboard.</p>
+          </div>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+// ============================================================================
+// Examples
+// ============================================================================
+
+export const Examples = {
+  name: 'Examples',
+  render: () => (
+    <div className="flex flex-col gap-10">
+      {/* FAQ */}
+      <div>
+        <p className="text-sm font-medium mb-3">FAQ</p>
+        <Accordion type="single" collapsible className="w-full max-w-lg">
+          <AccordionItem value="q1">
+            <AccordionTrigger>What is Apollo Design System?</AccordionTrigger>
+            <AccordionContent>
+              Apollo is UiPath&apos;s open-source design system providing a unified component library for building consistent user interfaces across products.
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="q2">
+            <AccordionTrigger>Which frameworks are supported?</AccordionTrigger>
+            <AccordionContent>
+              Apollo supports React as the primary framework, with Tailwind CSS + shadcn/ui for modern styling. Web Components are also available for cross-framework usage.
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="q3">
+            <AccordionTrigger>How do I install Apollo?</AccordionTrigger>
+            <AccordionContent>
+              Install via npm with <code className="rounded bg-muted px-1 py-0.5 text-xs">npm install @uipath/apollo-wind</code>. See the Getting Started guide for detailed setup instructions.
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="q4">
+            <AccordionTrigger>Can I contribute?</AccordionTrigger>
+            <AccordionContent>
+              Yes! Apollo is open source. Check the contribution guidelines in the repository for information on how to submit components, bug fixes, or documentation improvements.
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+
+      {/* Settings sections */}
+      <div>
+        <p className="text-sm font-medium mb-3">Settings Sections</p>
+        <Accordion type="multiple" className="w-full max-w-lg">
+          <AccordionItem value="general" className="border rounded-lg px-4 mb-2">
+            <AccordionTrigger className="hover:no-underline">
+              <div className="flex items-center gap-3">
+                <div className="flex h-8 w-8 items-center justify-center rounded-md bg-muted text-xs font-bold">G</div>
+                <div className="flex flex-col items-start">
+                  <span className="text-sm font-medium">General</span>
+                  <span className="text-xs text-muted-foreground font-normal">Basic workspace settings</span>
+                </div>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="space-y-3 pt-2">
+                <div className="flex items-center justify-between">
+                  <span className="text-sm">Workspace name</span>
+                  <span className="text-sm text-muted-foreground">My Workspace</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-sm">Region</span>
+                  <span className="text-sm text-muted-foreground">US East</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-sm">Timezone</span>
+                  <span className="text-sm text-muted-foreground">UTC-5 (Eastern)</span>
+                </div>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="notifications" className="border rounded-lg px-4 mb-2">
+            <AccordionTrigger className="hover:no-underline">
+              <div className="flex items-center gap-3">
+                <div className="flex h-8 w-8 items-center justify-center rounded-md bg-muted text-xs font-bold">N</div>
+                <div className="flex flex-col items-start">
+                  <span className="text-sm font-medium">Notifications</span>
+                  <span className="text-xs text-muted-foreground font-normal">Email and push preferences</span>
+                </div>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="space-y-3 pt-2">
+                <div className="flex items-center justify-between">
+                  <span className="text-sm">Email alerts</span>
+                  <span className="text-sm text-green-600">Enabled</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-sm">Push notifications</span>
+                  <span className="text-sm text-muted-foreground">Disabled</span>
+                </div>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="security" className="border rounded-lg px-4">
+            <AccordionTrigger className="hover:no-underline">
+              <div className="flex items-center gap-3">
+                <div className="flex h-8 w-8 items-center justify-center rounded-md bg-muted text-xs font-bold">S</div>
+                <div className="flex flex-col items-start">
+                  <span className="text-sm font-medium">Security</span>
+                  <span className="text-xs text-muted-foreground font-normal">Authentication and access</span>
+                </div>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="space-y-3 pt-2">
+                <div className="flex items-center justify-between">
+                  <span className="text-sm">Two-factor auth</span>
+                  <span className="text-sm text-green-600">Enabled</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-sm">SSO</span>
+                  <span className="text-sm text-muted-foreground">Not configured</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-sm">API keys</span>
+                  <span className="text-sm text-muted-foreground">2 active</span>
+                </div>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    </div>
+  ),
+};
diff --git a/packages/apollo-wind/src/components/ui/alert-dialog.stories.tsx b/packages/apollo-wind/src/components/ui/alert-dialog.stories.tsx
index bc72b2bef..828524263 100644
--- a/packages/apollo-wind/src/components/ui/alert-dialog.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/alert-dialog.stories.tsx
@@ -1,4 +1,7 @@
+import { useState } from 'react';
 import type { Meta } from '@storybook/react-vite';
+import { Trash2 } from 'lucide-react';
+import { buttonVariants } from './button';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -20,19 +23,22 @@ const meta: Meta<typeof AlertDialog> = {
 
 export default meta;
 
-export const Default = {
-  args: {},
+// ============================================================================
+// Basic
+// ============================================================================
+
+export const Basic = {
+  name: 'Basic',
   render: () => (
     <AlertDialog>
       <AlertDialogTrigger asChild>
-        <Button variant="outline">Delete Account</Button>
+        <Button variant="outline">Show Dialog</Button>
       </AlertDialogTrigger>
       <AlertDialogContent>
         <AlertDialogHeader>
-          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
           <AlertDialogDescription>
-            This action cannot be undone. This will permanently delete your account and remove your
-            data from our servers.
+            This will apply the changes to your account settings. You can update them again at any time.
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
@@ -43,3 +49,321 @@ export const Default = {
     </AlertDialog>
   ),
 };
+
+// ============================================================================
+// Delete (Destructive)
+// ============================================================================
+
+export const Destructive = {
+  name: 'Delete (Destructive)',
+  render: () => (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="destructive">Delete Account</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Delete your account?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will permanently delete your account, all your projects, and remove your data from our servers.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction className={buttonVariants({ variant: 'destructive' })}>
+            Delete Account
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  ),
+};
+
+// ============================================================================
+// Sizes
+// ============================================================================
+
+export const Sizes = {
+  name: 'Sizes',
+  render: () => (
+    <div className="flex flex-wrap gap-3">
+      {/* Small */}
+      <AlertDialog>
+        <AlertDialogTrigger asChild>
+          <Button variant="outline" size="sm">Small Dialog</Button>
+        </AlertDialogTrigger>
+        <AlertDialogContent className="max-w-sm">
+          <AlertDialogHeader>
+            <AlertDialogTitle>Discard draft?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Your unsaved changes will be lost.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Keep Editing</AlertDialogCancel>
+            <AlertDialogAction>Discard</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Default */}
+      <AlertDialog>
+        <AlertDialogTrigger asChild>
+          <Button variant="outline" size="sm">Default Dialog</Button>
+        </AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Confirm changes</AlertDialogTitle>
+            <AlertDialogDescription>
+              You are about to update the project settings. This will affect all team members currently working on this project.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction>Save Changes</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Large */}
+      <AlertDialog>
+        <AlertDialogTrigger asChild>
+          <Button variant="outline" size="sm">Large Dialog</Button>
+        </AlertDialogTrigger>
+        <AlertDialogContent className="max-w-2xl">
+          <AlertDialogHeader>
+            <AlertDialogTitle>Review and confirm</AlertDialogTitle>
+            <AlertDialogDescription>
+              You are about to publish this workflow to production. Please review the following details before confirming. This action will deploy the latest version and may affect active users. Ensure all tests have passed and the staging environment has been verified.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Go Back</AlertDialogCancel>
+            <AlertDialogAction>Publish to Production</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  ),
+};
+
+// ============================================================================
+// Examples
+// ============================================================================
+
+export const Examples = {
+  name: 'Examples',
+  render: () => (
+    <div className="flex flex-wrap gap-3">
+      {/* Unsaved changes */}
+      <AlertDialog>
+        <AlertDialogTrigger asChild>
+          <Button variant="outline" size="sm">Unsaved Changes</Button>
+        </AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Unsaved changes</AlertDialogTitle>
+            <AlertDialogDescription>
+              You have unsaved changes. If you leave now, your changes will be lost. Do you want to save before leaving?
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Stay on Page</AlertDialogCancel>
+            <AlertDialogAction>Leave Without Saving</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Remove team member */}
+      <AlertDialog>
+        <AlertDialogTrigger asChild>
+          <Button variant="outline" size="sm">Remove Member</Button>
+        </AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Remove team member?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Jane Doe will lose access to all projects and resources in this workspace. You can invite them back at any time.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction className={buttonVariants({ variant: 'destructive' })}>
+              Remove
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Sign out */}
+      <AlertDialog>
+        <AlertDialogTrigger asChild>
+          <Button variant="outline" size="sm">Sign Out</Button>
+        </AlertDialogTrigger>
+        <AlertDialogContent className="max-w-sm">
+          <AlertDialogHeader>
+            <AlertDialogTitle>Sign out?</AlertDialogTitle>
+            <AlertDialogDescription>
+              You will need to sign in again to access your account.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction>Sign Out</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Reset to defaults */}
+      <AlertDialog>
+        <AlertDialogTrigger asChild>
+          <Button variant="outline" size="sm">Reset Settings</Button>
+        </AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Reset to default settings?</AlertDialogTitle>
+            <AlertDialogDescription>
+              All your custom preferences, themes, and notification settings will be restored to their default values. This cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Keep Settings</AlertDialogCancel>
+            <AlertDialogAction className={buttonVariants({ variant: 'destructive' })}>
+              Reset All
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  ),
+};
+
+// ============================================================================
+// Examples — Data Grid Delete
+// ============================================================================
+
+const initialRows = [
+  { id: '1', name: 'Q4 Revenue Report', type: 'Document', modified: 'Feb 10, 2026' },
+  { id: '2', name: 'Marketing Assets', type: 'Folder', modified: 'Feb 8, 2026' },
+  { id: '3', name: 'User Research Notes', type: 'Document', modified: 'Feb 5, 2026' },
+  { id: '4', name: 'Brand Guidelines v2', type: 'Document', modified: 'Jan 28, 2026' },
+  { id: '5', name: 'Sprint Retrospective', type: 'Spreadsheet', modified: 'Jan 22, 2026' },
+];
+
+export const DataGridDelete = {
+  name: 'Data Grid Delete',
+  render: () => {
+    const [rows, setRows] = useState(initialRows);
+    const [selected, setSelected] = useState<Set<string>>(new Set());
+    const [dialogOpen, setDialogOpen] = useState(false);
+
+    const allSelected = rows.length > 0 && selected.size === rows.length;
+
+    function toggleAll() {
+      if (allSelected) {
+        setSelected(new Set());
+      } else {
+        setSelected(new Set(rows.map((r) => r.id)));
+      }
+    }
+
+    function toggleRow(id: string) {
+      setSelected((prev) => {
+        const next = new Set(prev);
+        if (next.has(id)) next.delete(id);
+        else next.add(id);
+        return next;
+      });
+    }
+
+    function handleDelete() {
+      setRows((prev) => prev.filter((r) => !selected.has(r.id)));
+      setSelected(new Set());
+      setDialogOpen(false);
+    }
+
+    return (
+      <div className="w-[600px] space-y-3">
+        {/* Toolbar */}
+        <div className="flex items-center justify-between">
+          <p className="text-sm text-muted-foreground">
+            {selected.size > 0
+              ? `${selected.size} of ${rows.length} selected`
+              : `${rows.length} items`}
+          </p>
+          {selected.size > 0 && (
+            <AlertDialog open={dialogOpen} onOpenChange={setDialogOpen}>
+              <AlertDialogTrigger asChild>
+                <Button variant="destructive" size="sm">
+                  <Trash2 className="h-4 w-4 mr-1" />
+                  Delete ({selected.size})
+                </Button>
+              </AlertDialogTrigger>
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>
+                    Delete {selected.size} {selected.size === 1 ? 'item' : 'items'}?
+                  </AlertDialogTitle>
+                  <AlertDialogDescription>
+                    {selected.size === 1
+                      ? 'This item will be permanently deleted. This action cannot be undone.'
+                      : `These ${selected.size} items will be permanently deleted. This action cannot be undone.`}
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>Cancel</AlertDialogCancel>
+                  <AlertDialogAction
+                    className={buttonVariants({ variant: 'destructive' })}
+                    onClick={handleDelete}
+                  >
+                    Delete
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+          )}
+        </div>
+
+        {/* Data grid */}
+        <div className="rounded-lg border">
+          {/* Header */}
+          <div className="flex items-center gap-3 border-b bg-muted/40 px-3 py-2 text-sm font-medium text-muted-foreground">
+            <input
+              type="checkbox"
+              checked={allSelected}
+              onChange={toggleAll}
+              className="h-4 w-4 rounded border-input accent-primary"
+            />
+            <span className="w-[200px]">Name</span>
+            <span className="w-[100px]">Type</span>
+            <span className="ml-auto w-[120px] text-right">Modified</span>
+          </div>
+          {/* Rows */}
+          {rows.map((row) => (
+            <div
+              key={row.id}
+              className={`flex items-center gap-3 border-b last:border-0 px-3 py-2.5 text-sm transition-colors ${
+                selected.has(row.id) ? 'bg-muted/30' : ''
+              }`}
+            >
+              <input
+                type="checkbox"
+                checked={selected.has(row.id)}
+                onChange={() => toggleRow(row.id)}
+                className="h-4 w-4 rounded border-input accent-primary"
+              />
+              <span className="w-[200px] font-medium truncate">{row.name}</span>
+              <span className="w-[100px] text-muted-foreground">{row.type}</span>
+              <span className="ml-auto w-[120px] text-right text-muted-foreground">{row.modified}</span>
+            </div>
+          ))}
+          {rows.length === 0 && (
+            <div className="px-3 py-8 text-center text-sm text-muted-foreground">
+              No items remaining.
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  },
+};
diff --git a/packages/apollo-wind/src/components/ui/alert.stories.tsx b/packages/apollo-wind/src/components/ui/alert.stories.tsx
index 690e7e00f..9fc98ce41 100644
--- a/packages/apollo-wind/src/components/ui/alert.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/alert.stories.tsx
@@ -1,5 +1,20 @@
+import { useState } from 'react';
 import type { Meta } from '@storybook/react-vite';
+import {
+  AlertCircle,
+  CheckCircle2,
+  Info,
+  ShieldAlert,
+  Terminal,
+  Rocket,
+  X,
+  ExternalLink,
+  AlertTriangle,
+  Wifi,
+  WifiOff,
+} from 'lucide-react';
 import { Alert, AlertDescription, AlertTitle } from './alert';
+import { Button } from './button';
 
 const meta: Meta<typeof Alert> = {
   title: 'Components/Feedback/Alert',
@@ -9,22 +24,316 @@ const meta: Meta<typeof Alert> = {
 
 export default meta;
 
-export const Default = {
-  args: {},
+// ============================================================================
+// Basic Alert
+// ============================================================================
+
+export const BasicAlert = {
+  name: 'Basic Alert',
+  render: () => (
+    <div className="flex flex-col gap-4 max-w-xl">
+      <Alert>
+        <AlertTitle>Default Alert</AlertTitle>
+        <AlertDescription>
+          This is a default alert — use it for general information.
+        </AlertDescription>
+      </Alert>
+
+      <Alert variant="destructive">
+        <AlertTitle>Destructive Alert</AlertTitle>
+        <AlertDescription>
+          This is a destructive alert — use it for errors or critical warnings.
+        </AlertDescription>
+      </Alert>
+    </div>
+  ),
+};
+
+// ============================================================================
+// Alert with Icons
+// ============================================================================
+
+export const AlertWithIcons = {
+  name: 'Alert with Icons',
+  render: () => (
+    <div className="flex flex-col gap-4 max-w-xl">
+      <Alert>
+        <Terminal className="h-4 w-4" />
+        <AlertTitle>Terminal</AlertTitle>
+        <AlertDescription>
+          You can add components to your app using the CLI.
+        </AlertDescription>
+      </Alert>
+
+      <Alert>
+        <Info className="h-4 w-4" />
+        <AlertTitle>Information</AlertTitle>
+        <AlertDescription>
+          Your account is currently on the free plan. Upgrade for more features.
+        </AlertDescription>
+      </Alert>
+
+      <Alert>
+        <CheckCircle2 className="h-4 w-4" />
+        <AlertTitle>Success</AlertTitle>
+        <AlertDescription>
+          Your changes have been saved successfully.
+        </AlertDescription>
+      </Alert>
+
+      <Alert>
+        <AlertTriangle className="h-4 w-4" />
+        <AlertTitle>Warning</AlertTitle>
+        <AlertDescription>
+          Your storage is almost full. Consider upgrading your plan.
+        </AlertDescription>
+      </Alert>
+
+      <Alert variant="destructive">
+        <AlertCircle className="h-4 w-4" />
+        <AlertTitle>Error</AlertTitle>
+        <AlertDescription>
+          Your session has expired. Please log in again.
+        </AlertDescription>
+      </Alert>
+    </div>
+  ),
+};
+
+// ============================================================================
+// Dismissible Alert
+// ============================================================================
+
+export const DismissibleAlert = {
+  name: 'Dismissible Alert',
+  render: () => {
+    const [alerts, setAlerts] = useState([
+      { id: 1, title: 'Tip', description: 'You can dismiss this alert by clicking the X button.' },
+      { id: 2, title: 'Reminder', description: 'Your trial expires in 3 days. Upgrade to keep access.' },
+      { id: 3, title: 'Notice', description: 'Scheduled maintenance this Saturday from 2–4 AM UTC.' },
+    ]);
+
+    const dismiss = (id: number) => setAlerts((prev) => prev.filter((a) => a.id !== id));
+
+    return (
+      <div className="flex flex-col gap-4 max-w-xl">
+        {alerts.map((alert) => (
+          <Alert key={alert.id} className="relative pr-10">
+            <Info className="h-4 w-4" />
+            <AlertTitle>{alert.title}</AlertTitle>
+            <AlertDescription>{alert.description}</AlertDescription>
+            <button
+              className="absolute right-3 top-3 rounded-md p-1 text-foreground/50 opacity-70 transition-opacity hover:opacity-100"
+              onClick={() => dismiss(alert.id)}
+            >
+              <X className="h-4 w-4" />
+              <span className="sr-only">Dismiss</span>
+            </button>
+          </Alert>
+        ))}
+        {alerts.length === 0 && (
+          <p className="text-sm text-muted-foreground">All alerts dismissed.</p>
+        )}
+      </div>
+    );
+  },
+};
+
+// ============================================================================
+// Alert with Actions
+// ============================================================================
+
+export const AlertWithActions = {
+  name: 'Alert with Actions',
+  render: () => (
+    <div className="flex flex-col gap-4 max-w-xl">
+      <Alert>
+        <Info className="h-4 w-4" />
+        <AlertTitle>Update Available</AlertTitle>
+        <AlertDescription>
+          <p className="mb-3">
+            A new version of the application is available. Update now to get the latest features and bug fixes.
+          </p>
+          <div className="flex gap-2">
+            <Button size="sm">Update Now</Button>
+            <Button size="sm" variant="outline">Later</Button>
+          </div>
+        </AlertDescription>
+      </Alert>
+
+      <Alert variant="destructive">
+        <AlertCircle className="h-4 w-4" />
+        <AlertTitle>Payment Failed</AlertTitle>
+        <AlertDescription>
+          <p className="mb-3">
+            We were unable to process your payment. Please update your billing information.
+          </p>
+          <div className="flex gap-2">
+            <Button size="sm" variant="destructive">Update Billing</Button>
+            <Button size="sm" variant="outline" className="text-foreground">Contact Support</Button>
+          </div>
+        </AlertDescription>
+      </Alert>
+    </div>
+  ),
+};
+
+// ============================================================================
+// Alert with Links
+// ============================================================================
+
+export const AlertWithLinks = {
+  name: 'Alert with Links',
+  render: () => (
+    <div className="flex flex-col gap-4 max-w-xl">
+      <Alert>
+        <Info className="h-4 w-4" />
+        <AlertTitle>New Documentation</AlertTitle>
+        <AlertDescription>
+          We've updated our API documentation.{' '}
+          <a href="#" className="font-medium underline underline-offset-4 hover:no-underline">
+            Read the docs <ExternalLink className="inline h-3 w-3" />
+          </a>
+        </AlertDescription>
+      </Alert>
+
+      <Alert>
+        <Terminal className="h-4 w-4" />
+        <AlertTitle>Getting Started</AlertTitle>
+        <AlertDescription>
+          New to the platform? Check out our{' '}
+          <a href="#" className="font-medium underline underline-offset-4 hover:no-underline">quick start guide</a>
+          {' '}or browse the{' '}
+          <a href="#" className="font-medium underline underline-offset-4 hover:no-underline">component library</a>.
+        </AlertDescription>
+      </Alert>
+    </div>
+  ),
+};
+
+// ============================================================================
+// Usage Examples — Form Validation
+// ============================================================================
+
+export const FormValidation = {
+  name: 'Form Validation',
+  render: () => (
+    <div className="flex flex-col gap-4 max-w-xl">
+      <Alert variant="destructive">
+        <AlertCircle className="h-4 w-4" />
+        <AlertTitle>There were 3 errors with your submission</AlertTitle>
+        <AlertDescription>
+          <ul className="mt-2 list-disc pl-5 text-sm space-y-1">
+            <li>Email address is required</li>
+            <li>Password must be at least 8 characters</li>
+            <li>Please agree to the terms and conditions</li>
+          </ul>
+        </AlertDescription>
+      </Alert>
+
+      <Alert>
+        <CheckCircle2 className="h-4 w-4" />
+        <AlertTitle>Form submitted successfully</AlertTitle>
+        <AlertDescription>
+          Your profile has been updated. Changes may take a few minutes to appear.
+        </AlertDescription>
+      </Alert>
+    </div>
+  ),
+};
+
+// ============================================================================
+// Usage Examples — System Status
+// ============================================================================
+
+export const SystemStatus = {
+  name: 'System Status',
+  render: () => (
+    <div className="flex flex-col gap-4 max-w-xl">
+      <Alert>
+        <Wifi className="h-4 w-4" />
+        <AlertTitle>All Systems Operational</AlertTitle>
+        <AlertDescription>
+          All services are running normally. Last checked 2 minutes ago.
+        </AlertDescription>
+      </Alert>
+
+      <Alert>
+        <AlertTriangle className="h-4 w-4" />
+        <AlertTitle>Degraded Performance</AlertTitle>
+        <AlertDescription>
+          Some users may experience slower response times. Our team is investigating.
+        </AlertDescription>
+      </Alert>
+
+      <Alert variant="destructive">
+        <WifiOff className="h-4 w-4" />
+        <AlertTitle>Service Outage</AlertTitle>
+        <AlertDescription>
+          The API gateway is currently unavailable. We are working to restore service as quickly as possible.
+        </AlertDescription>
+      </Alert>
+    </div>
+  ),
+};
+
+// ============================================================================
+// Usage Examples — Feature Announcement
+// ============================================================================
+
+export const FeatureAnnouncement = {
+  name: 'Feature Announcement',
   render: () => (
-    <Alert>
-      <AlertTitle>Heads up!</AlertTitle>
-      <AlertDescription>You can add components to your app using the cli.</AlertDescription>
-    </Alert>
+    <div className="flex flex-col gap-4 max-w-xl">
+      <Alert>
+        <Rocket className="h-4 w-4" />
+        <AlertTitle>New: Dark Mode Support</AlertTitle>
+        <AlertDescription>
+          <p className="mb-3">
+            We've added dark mode across the entire platform. Your preference syncs automatically across all devices.
+          </p>
+          <div className="flex gap-2">
+            <Button size="sm">Try It Out</Button>
+            <Button size="sm" variant="outline">Learn More</Button>
+          </div>
+        </AlertDescription>
+      </Alert>
+    </div>
   ),
 };
 
-export const Destructive = {
-  args: {},
+// ============================================================================
+// Usage Examples — Security Notice
+// ============================================================================
+
+export const SecurityNotice = {
+  name: 'Security Notice',
   render: () => (
-    <Alert variant="destructive">
-      <AlertTitle>Error</AlertTitle>
-      <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
-    </Alert>
+    <div className="flex flex-col gap-4 max-w-xl">
+      <Alert variant="destructive">
+        <ShieldAlert className="h-4 w-4" />
+        <AlertTitle>Suspicious Login Detected</AlertTitle>
+        <AlertDescription>
+          <p className="mb-3">
+            A login was attempted from an unrecognized device in San Francisco, CA. If this wasn't you, secure your account immediately.
+          </p>
+          <div className="flex gap-2">
+            <Button size="sm" variant="destructive">Secure Account</Button>
+            <Button size="sm" variant="outline" className="text-foreground">That Was Me</Button>
+          </div>
+        </AlertDescription>
+      </Alert>
+
+      <Alert>
+        <ShieldAlert className="h-4 w-4" />
+        <AlertTitle>Two-Factor Authentication</AlertTitle>
+        <AlertDescription>
+          Your account does not have two-factor authentication enabled. We strongly recommend enabling it for additional security.{' '}
+          <a href="#" className="font-medium underline underline-offset-4 hover:no-underline">
+            Enable 2FA
+          </a>
+        </AlertDescription>
+      </Alert>
+    </div>
   ),
 };
diff --git a/packages/apollo-wind/src/components/ui/badge.stories.tsx b/packages/apollo-wind/src/components/ui/badge.stories.tsx
index a5c1aa55e..3f6db47da 100644
--- a/packages/apollo-wind/src/components/ui/badge.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/badge.stories.tsx
@@ -1,47 +1,172 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { Meta } from '@storybook/react-vite';
 import { Badge } from './badge';
+import { Spinner } from './spinner';
 
-const meta = {
+const meta: Meta<typeof Badge> = {
   title: 'Components/Data Display/Badge',
   component: Badge,
-  parameters: {
-    layout: 'centered',
-  },
   tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['default', 'secondary', 'destructive', 'outline'],
-    },
-  },
-} satisfies Meta<typeof Badge>;
+};
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-  args: {
-    children: 'Badge',
-  },
+// ============================================================================
+// Basic
+// ============================================================================
+
+export const Basic = {
+  name: 'Basic',
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Badge>Badge</Badge>
+    </div>
+  ),
 };
 
-export const Secondary: Story = {
-  args: {
-    children: 'Secondary',
-    variant: 'secondary',
-  },
+// ============================================================================
+// Variants
+// ============================================================================
+
+export const Variants = {
+  name: 'Variants',
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <Badge variant="default">Default</Badge>
+      <Badge variant="secondary">Secondary</Badge>
+      <Badge variant="destructive">Destructive</Badge>
+      <Badge variant="outline">Outline</Badge>
+    </div>
+  ),
 };
 
-export const Destructive: Story = {
-  args: {
-    children: 'Error',
-    variant: 'destructive',
-  },
+// ============================================================================
+// With Spinner
+// ============================================================================
+
+export const WithSpinner = {
+  name: 'With Spinner',
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <Badge variant="default" className="gap-1.5">
+        <Spinner size="sm" className="h-3 w-3" />
+        Processing
+      </Badge>
+      <Badge variant="secondary" className="gap-1.5">
+        <Spinner size="sm" className="h-3 w-3" />
+        Syncing
+      </Badge>
+      <Badge variant="outline" className="gap-1.5">
+        <Spinner size="sm" className="h-3 w-3" />
+        Loading
+      </Badge>
+    </div>
+  ),
 };
 
-export const Outline: Story = {
-  args: {
-    children: 'Outline',
-    variant: 'outline',
-  },
+// ============================================================================
+// Link
+// ============================================================================
+
+export const Link = {
+  name: 'Link',
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <a href="#" className="no-underline">
+        <Badge variant="default" className="cursor-pointer">Default</Badge>
+      </a>
+      <a href="#" className="no-underline">
+        <Badge variant="secondary" className="cursor-pointer">Secondary</Badge>
+      </a>
+      <a href="#" className="no-underline">
+        <Badge variant="destructive" className="cursor-pointer">Destructive</Badge>
+      </a>
+      <a href="#" className="no-underline">
+        <Badge variant="outline" className="cursor-pointer">Outline</Badge>
+      </a>
+    </div>
+  ),
+};
+
+// ============================================================================
+// Examples
+// ============================================================================
+
+export const Examples = {
+  name: 'Examples',
+  render: () => (
+    <div className="flex flex-col gap-8">
+      {/* Status indicators */}
+      <div>
+        <p className="text-sm font-medium mb-3">Status Indicators</p>
+        <div className="flex flex-wrap items-center gap-2">
+          <Badge variant="default" className="gap-1.5">
+            <span className="h-1.5 w-1.5 rounded-full bg-primary-foreground" />
+            Active
+          </Badge>
+          <Badge variant="secondary" className="gap-1.5">
+            <span className="h-1.5 w-1.5 rounded-full bg-muted-foreground" />
+            Idle
+          </Badge>
+          <Badge variant="destructive" className="gap-1.5">
+            <span className="h-1.5 w-1.5 rounded-full bg-destructive-foreground" />
+            Error
+          </Badge>
+          <Badge variant="outline" className="gap-1.5">
+            <span className="h-1.5 w-1.5 rounded-full bg-foreground" />
+            Pending
+          </Badge>
+        </div>
+      </div>
+
+      {/* In a list */}
+      <div>
+        <p className="text-sm font-medium mb-3">In a List</p>
+        <div className="w-full max-w-md space-y-2">
+          {[
+            { name: 'Invoice Processing', status: 'Active', variant: 'default' as const },
+            { name: 'Email Automation', status: 'Paused', variant: 'secondary' as const },
+            { name: 'Data Migration', status: 'Failed', variant: 'destructive' as const },
+            { name: 'Report Generator', status: 'Draft', variant: 'outline' as const },
+          ].map((item) => (
+            <div
+              key={item.name}
+              className="flex items-center justify-between rounded-lg border px-4 py-3"
+            >
+              <span className="text-sm font-medium">{item.name}</span>
+              <Badge variant={item.variant}>{item.status}</Badge>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Tags */}
+      <div>
+        <p className="text-sm font-medium mb-3">Tags</p>
+        <div className="flex flex-wrap items-center gap-2">
+          {['React', 'TypeScript', 'Tailwind', 'Radix UI', 'Storybook'].map((tag) => (
+            <Badge key={tag} variant="secondary">{tag}</Badge>
+          ))}
+        </div>
+      </div>
+
+      {/* Notification count */}
+      <div>
+        <p className="text-sm font-medium mb-3">Notification Count</p>
+        <div className="flex items-center gap-6">
+          <div className="relative">
+            <span className="text-sm font-medium">Inbox</span>
+            <Badge className="absolute -top-2 -right-6 h-5 min-w-5 justify-center px-1.5 text-[10px]">3</Badge>
+          </div>
+          <div className="relative">
+            <span className="text-sm font-medium">Alerts</span>
+            <Badge variant="destructive" className="absolute -top-2 -right-7 h-5 min-w-5 justify-center px-1.5 text-[10px]">12</Badge>
+          </div>
+          <div className="relative">
+            <span className="text-sm font-medium">Tasks</span>
+            <Badge variant="secondary" className="absolute -top-2 -right-8 h-5 min-w-5 justify-center px-1.5 text-[10px]">99+</Badge>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
 };
diff --git a/packages/apollo-wind/src/components/ui/breadcrumb.stories.tsx b/packages/apollo-wind/src/components/ui/breadcrumb.stories.tsx
index 4339faec3..da0ce4d03 100644
--- a/packages/apollo-wind/src/components/ui/breadcrumb.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/breadcrumb.stories.tsx
@@ -1,12 +1,20 @@
 import type { Meta } from '@storybook/react-vite';
+import { ChevronDown } from 'lucide-react';
 import {
   Breadcrumb,
+  BreadcrumbEllipsis,
   BreadcrumbItem,
   BreadcrumbLink,
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from './breadcrumb';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from './dropdown-menu';
 
 const meta: Meta<typeof Breadcrumb> = {
   title: 'Components/Navigation/Breadcrumb',
@@ -16,8 +24,73 @@ const meta: Meta<typeof Breadcrumb> = {
 
 export default meta;
 
-export const Default = {
-  args: {},
+// ============================================================================
+// Basic
+// ============================================================================
+
+export const Basic = {
+  name: 'Basic',
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/components">Components</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+};
+
+// ============================================================================
+// Dropdown
+// ============================================================================
+
+export const Dropdown = {
+  name: 'Dropdown',
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger className="flex items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-foreground">
+              Components
+              <ChevronDown className="h-4 w-4" />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              <DropdownMenuItem>Layout</DropdownMenuItem>
+              <DropdownMenuItem>Navigation</DropdownMenuItem>
+              <DropdownMenuItem>Feedback</DropdownMenuItem>
+              <DropdownMenuItem>Overlays</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+};
+
+// ============================================================================
+// Collapsed
+// ============================================================================
+
+export const Collapsed = {
+  name: 'Collapsed',
   render: () => (
     <Breadcrumb>
       <BreadcrumbList>
@@ -25,6 +98,20 @@ export const Default = {
           <BreadcrumbLink href="/">Home</BreadcrumbLink>
         </BreadcrumbItem>
         <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger className="flex items-center gap-1">
+              <BreadcrumbEllipsis className="h-4 w-4" />
+              <span className="sr-only">Toggle menu</span>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              <DropdownMenuItem>Documentation</DropdownMenuItem>
+              <DropdownMenuItem>Components</DropdownMenuItem>
+              <DropdownMenuItem>Navigation</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
         <BreadcrumbItem>
           <BreadcrumbLink href="/components">Components</BreadcrumbLink>
         </BreadcrumbItem>
@@ -36,3 +123,134 @@ export const Default = {
     </Breadcrumb>
   ),
 };
+
+// ============================================================================
+// Link Component
+// ============================================================================
+
+export const LinkComponent = {
+  name: 'Link Component',
+  render: () => (
+    <div className="flex flex-col gap-6">
+      {/* asChild with custom link */}
+      <div>
+        <p className="text-sm font-medium mb-3">Using asChild</p>
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <a href="/">Home</a>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <a href="/settings">Settings</a>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Profile</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+        <p className="text-xs text-muted-foreground mt-2">
+          Use the <code className="rounded bg-muted px-1 py-0.5 text-xs">asChild</code> prop to render your own link component (e.g. Next.js Link, React Router Link).
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================================================
+// Examples
+// ============================================================================
+
+export const Examples = {
+  name: 'Examples',
+  render: () => (
+    <div className="flex flex-col gap-8">
+      {/* File browser */}
+      <div>
+        <p className="text-sm font-medium mb-3">File Browser</p>
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/">Root</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/src">src</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/src/components">components</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Button.tsx</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+
+      {/* Settings page */}
+      <div>
+        <p className="text-sm font-medium mb-3">Settings Page</p>
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/">Dashboard</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/settings">Settings</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Notifications</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+
+      {/* Long path with collapsed middle */}
+      <div>
+        <p className="text-sm font-medium mb-3">Long Path (Collapsed)</p>
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/">Home</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <DropdownMenu>
+                <DropdownMenuTrigger className="flex items-center gap-1">
+                  <BreadcrumbEllipsis className="h-4 w-4" />
+                  <span className="sr-only">Toggle menu</span>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                  <DropdownMenuItem>Organization</DropdownMenuItem>
+                  <DropdownMenuItem>Workspace</DropdownMenuItem>
+                  <DropdownMenuItem>Projects</DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/automations">Automations</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/automations/workflows">Workflows</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Invoice Processing</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+    </div>
+  ),
+};
diff --git a/packages/apollo-wind/src/components/ui/calendar.stories.tsx b/packages/apollo-wind/src/components/ui/calendar.stories.tsx
index 934fae6b7..1e29747db 100644
--- a/packages/apollo-wind/src/components/ui/calendar.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/calendar.stories.tsx
@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { Calendar } from './calendar';
 
 const meta: Meta<typeof Calendar> = {
-  title: 'Components/Data Display/Calendar',
+  title: 'Components/UiPath-review/Calendar',
   component: Calendar,
   tags: ['autodocs'],
 };
diff --git a/packages/apollo-wind/src/components/ui/chart.tsx b/packages/apollo-wind/src/components/ui/chart.tsx
new file mode 100644
index 000000000..190fbea32
--- /dev/null
+++ b/packages/apollo-wind/src/components/ui/chart.tsx
@@ -0,0 +1,355 @@
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
+
+import { cn } from '@/lib';
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: '.future-light', dark: '.future-dark' } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  );
+};
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error('useChart must be used within a <ChartContainer />');
+  }
+
+  return context;
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}: React.ComponentProps<'div'> & {
+  config: ChartConfig;
+  children: React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >['children'];
+}) {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          '[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke=\'#ccc\']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke=\'#ccc\']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke=\'#ccc\']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke=\'#fff\']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke=\'#fff\']]:stroke-transparent [&_.recharts-surface]:outline-hidden',
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color,
+  );
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join('\n')}
+}
+`,
+          )
+          .join('\n'),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = 'dot',
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<'div'> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: 'line' | 'dot' | 'dashed';
+    nameKey?: string;
+    labelKey?: string;
+  }) {
+  const { config } = useChart();
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null;
+    }
+
+    const [item] = payload;
+    const key = `${labelKey || item?.dataKey || item?.name || 'value'}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    const value =
+      !labelKey && typeof label === 'string'
+        ? config[label as keyof typeof config]?.label || label
+        : itemConfig?.label;
+
+    if (labelFormatter) {
+      return (
+        <div className={cn('font-medium', labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>
+      );
+    }
+
+    if (!value) {
+      return null;
+    }
+
+    return <div className={cn('font-medium', labelClassName)}>{value}</div>;
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ]);
+
+  if (!active || !payload?.length) {
+    return null;
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== 'dot';
+
+  return (
+    <div
+      className={cn(
+        'border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
+        className,
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload
+          .filter((item) => item.type !== 'none')
+          .map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || 'value'}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor = color || item.payload.fill || item.color;
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
+                  indicator === 'dot' && 'items-center',
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            'shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)',
+                            {
+                              'h-2.5 w-2.5': indicator === 'dot',
+                              'w-1': indicator === 'line',
+                              'w-0 border-[1.5px] border-dashed bg-transparent':
+                                indicator === 'dashed',
+                              'my-0.5': nestLabel && indicator === 'dashed',
+                            },
+                          )}
+                          style={
+                            {
+                              '--color-bg': indicatorColor,
+                              '--color-border': indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        'flex flex-1 justify-between leading-none',
+                        nestLabel ? 'items-end' : 'items-center',
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value && (
+                        <span className="text-foreground font-mono font-medium tabular-nums">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })}
+      </div>
+    </div>
+  );
+}
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = 'bottom',
+  nameKey,
+}: React.ComponentProps<'div'> &
+  Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+  }) {
+  const { config } = useChart();
+
+  if (!payload?.length) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-center gap-4',
+        verticalAlign === 'top' ? 'pb-3' : 'pt-3',
+        className,
+      )}
+    >
+      {payload
+        .filter((item) => item.type !== 'none')
+        .map((item) => {
+          const key = `${nameKey || item.dataKey || 'value'}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                '[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3',
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          );
+        })}
+    </div>
+  );
+}
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string,
+) {
+  if (typeof payload !== 'object' || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    'payload' in payload &&
+    typeof payload.payload === 'object' &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === 'string'
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string;
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config];
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+};
diff --git a/packages/apollo-wind/src/components/ui/collapsible.stories.tsx b/packages/apollo-wind/src/components/ui/collapsible.stories.tsx
index 09ea2632d..94a194cab 100644
--- a/packages/apollo-wind/src/components/ui/collapsible.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/collapsible.stories.tsx
@@ -5,7 +5,7 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './collapsib
 import { Row } from './layout';
 
 const meta: Meta<typeof Collapsible> = {
-  title: 'Components/Data Display/Collapsible',
+  title: 'Components/UiPath-review/Collapsible',
   component: Collapsible,
   tags: ['autodocs'],
 };
diff --git a/packages/apollo-wind/src/components/ui/combobox.stories.tsx b/packages/apollo-wind/src/components/ui/combobox.stories.tsx
index 616916ed8..8d21e43b3 100644
--- a/packages/apollo-wind/src/components/ui/combobox.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/combobox.stories.tsx
@@ -1,19 +1,32 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { useState } from 'react';
+import type { Meta } from '@storybook/react-vite';
+import { Check, ChevronsUpDown, Loader2, X } from 'lucide-react';
+import * as React from 'react';
+import { Badge } from './badge';
+import { Button } from './button';
 import { Combobox, ComboboxItem } from './combobox';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from './command';
 import { Label } from './label';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+import { cn } from '../../lib';
 
-const meta = {
+const meta: Meta<typeof Combobox> = {
   title: 'Components/Core/Combobox',
   component: Combobox,
-  parameters: {
-    layout: 'centered',
-  },
   tags: ['autodocs'],
-} satisfies Meta<typeof Combobox>;
+};
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+// Shared data
+// ---------------------------------------------------------------------------
 
 const frameworks: ComboboxItem[] = [
   { value: 'next.js', label: 'Next.js' },
@@ -21,18 +34,30 @@ const frameworks: ComboboxItem[] = [
   { value: 'nuxt.js', label: 'Nuxt.js' },
   { value: 'remix', label: 'Remix' },
   { value: 'astro', label: 'Astro' },
+  { value: 'gatsby', label: 'Gatsby' },
+  { value: 'angular', label: 'Angular' },
+  { value: 'vue', label: 'Vue' },
 ];
 
-const largeList: ComboboxItem[] = Array.from({ length: 50 }, (_, i) => ({
-  value: `item-${i + 1}`,
-  label: `Item ${i + 1}`,
-}));
+const countries: ComboboxItem[] = [
+  { value: 'us', label: 'United States' },
+  { value: 'gb', label: 'United Kingdom' },
+  { value: 'de', label: 'Germany' },
+  { value: 'fr', label: 'France' },
+  { value: 'jp', label: 'Japan' },
+  { value: 'au', label: 'Australia' },
+  { value: 'ca', label: 'Canada' },
+  { value: 'br', label: 'Brazil' },
+];
 
-export const Default: Story = {
-  // @ts-expect-error - args not needed when using render, but Storybook requires it
-  args: {},
+// ============================================================================
+// Basic
+// ============================================================================
+
+export const Basic = {
+  name: 'Basic',
   render: () => {
-    const [value, setValue] = useState<string>('');
+    const [value, setValue] = React.useState('');
 
     return (
       <Combobox
@@ -45,78 +70,365 @@ export const Default: Story = {
     );
   },
 };
-export const WithLabel: Story = {
-  // @ts-expect-error - args not needed when using render, but Storybook requires it
-  args: {},
-  render: () => {
-    const [value, setValue] = useState<string>('');
 
-    return (
-      <div className="grid w-full max-w-sm items-center gap-1.5">
-        <Label htmlFor="framework">Framework</Label>
-        <Combobox
-          items={frameworks}
-          value={value}
-          onValueChange={setValue}
-          placeholder="Select framework..."
-          searchPlaceholder="Search frameworks..."
-        />
-      </div>
+// ============================================================================
+// Combobox Multi-select
+// ============================================================================
+
+function MultiSelectCombobox() {
+  const [open, setOpen] = React.useState(false);
+  const [selected, setSelected] = React.useState<string[]>([]);
+
+  const toggle = (val: string) => {
+    setSelected((prev) =>
+      prev.includes(val) ? prev.filter((v) => v !== val) : [...prev, val]
     );
-  },
+  };
+
+  const remove = (val: string) => {
+    setSelected((prev) => prev.filter((v) => v !== val));
+  };
+
+  return (
+    <div className="space-y-2">
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            className="w-[320px] justify-between"
+          >
+            {selected.length > 0
+              ? `${selected.length} selected`
+              : 'Select frameworks...'}
+            <ChevronsUpDown className="opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[320px] p-0">
+          <Command>
+            <CommandInput placeholder="Search frameworks..." />
+            <CommandList>
+              <CommandEmpty>No results found.</CommandEmpty>
+              <CommandGroup>
+                {frameworks.map((item) => (
+                  <CommandItem key={item.value} value={item.value} onSelect={() => toggle(item.value)}>
+                    {item.label}
+                    <Check className={cn('ml-auto', selected.includes(item.value) ? 'opacity-100' : 'opacity-0')} />
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+      {selected.length > 0 && (
+        <div className="flex flex-wrap gap-1">
+          {selected.map((val) => {
+            const item = frameworks.find((f) => f.value === val);
+            return (
+              <Badge key={val} variant="secondary" className="gap-1">
+                {item?.label}
+                <button onClick={() => remove(val)} className="ml-0.5 rounded-full hover:bg-muted">
+                  <X className="h-3 w-3" />
+                </button>
+              </Badge>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export const ComboboxMultiSelect = {
+  name: 'Combobox Multi-select',
+  render: () => <MultiSelectCombobox />,
 };
 
-export const WithValue: Story = {
-  // @ts-expect-error - args not needed when using render, but Storybook requires it
-  args: {},
-  render: () => {
-    const [value, setValue] = useState<string>('next.js');
+// ============================================================================
+// Combobox with Custom Display
+// ============================================================================
 
-    return (
-      <Combobox
-        items={frameworks}
-        value={value}
-        onValueChange={setValue}
-        placeholder="Select framework..."
-        searchPlaceholder="Search frameworks..."
-      />
-    );
-  },
+function CustomDisplayCombobox() {
+  const [open, setOpen] = React.useState(false);
+  const [value, setValue] = React.useState('');
+
+  type EnrichedItem = { value: string; label: string; emoji: string; desc: string };
+
+  const items: EnrichedItem[] = [
+    { value: 'bug', label: 'Bug', emoji: '🐛', desc: 'Something is broken' },
+    { value: 'feature', label: 'Feature', emoji: '✨', desc: 'New functionality' },
+    { value: 'improvement', label: 'Improvement', emoji: '🔧', desc: 'Enhance existing feature' },
+    { value: 'docs', label: 'Documentation', emoji: '📝', desc: 'Update documentation' },
+    { value: 'performance', label: 'Performance', emoji: '⚡', desc: 'Speed improvement' },
+  ];
+
+  const selected = items.find((i) => i.value === value);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" role="combobox" aria-expanded={open} className="w-[320px] justify-between">
+          {selected ? (
+            <span className="flex items-center gap-2">
+              <span>{selected.emoji}</span>
+              <span>{selected.label}</span>
+            </span>
+          ) : (
+            'Select issue type...'
+          )}
+          <ChevronsUpDown className="opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[320px] p-0">
+        <Command>
+          <CommandInput placeholder="Search types..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+              {items.map((item) => (
+                <CommandItem
+                  key={item.value}
+                  value={item.value}
+                  onSelect={(v) => { setValue(v === value ? '' : v); setOpen(false); }}
+                >
+                  <div className="flex items-center gap-3">
+                    <span className="text-lg">{item.emoji}</span>
+                    <div>
+                      <p className="text-sm font-medium">{item.label}</p>
+                      <p className="text-xs text-muted-foreground">{item.desc}</p>
+                    </div>
+                  </div>
+                  <Check className={cn('ml-auto', value === item.value ? 'opacity-100' : 'opacity-0')} />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export const ComboboxWithCustomDisplay = {
+  name: 'Combobox with Custom Display',
+  render: () => <CustomDisplayCombobox />,
+};
+
+// ============================================================================
+// Combobox Async
+// ============================================================================
+
+function AsyncCombobox() {
+  const [open, setOpen] = React.useState(false);
+  const [value, setValue] = React.useState('');
+  const [query, setQuery] = React.useState('');
+  const [loading, setLoading] = React.useState(false);
+  const [results, setResults] = React.useState<ComboboxItem[]>([]);
+
+  const allItems: ComboboxItem[] = [
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'svelte', label: 'Svelte' },
+    { value: 'solid', label: 'Solid' },
+    { value: 'preact', label: 'Preact' },
+    { value: 'lit', label: 'Lit' },
+    { value: 'alpine', label: 'Alpine.js' },
+    { value: 'htmx', label: 'HTMX' },
+    { value: 'qwik', label: 'Qwik' },
+  ];
+
+  React.useEffect(() => {
+    if (!open) return;
+    setLoading(true);
+    const timeout = setTimeout(() => {
+      const filtered = allItems.filter((item) =>
+        item.label.toLowerCase().includes(query.toLowerCase())
+      );
+      setResults(filtered);
+      setLoading(false);
+    }, 500);
+    return () => clearTimeout(timeout);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query, open]);
+
+  const selected = allItems.find((i) => i.value === value);
+
+  return (
+    <div className="space-y-2">
+      <p className="text-sm text-muted-foreground">Simulates a 500ms async search delay.</p>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button variant="outline" role="combobox" aria-expanded={open} className="w-[280px] justify-between">
+            {selected ? selected.label : 'Search libraries...'}
+            <ChevronsUpDown className="opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[280px] p-0">
+          <Command shouldFilter={false}>
+            <CommandInput placeholder="Type to search..." value={query} onValueChange={setQuery} />
+            <CommandList>
+              {loading ? (
+                <div className="flex items-center justify-center py-6">
+                  <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                </div>
+              ) : results.length === 0 ? (
+                <CommandEmpty>No results found.</CommandEmpty>
+              ) : (
+                <CommandGroup>
+                  {results.map((item) => (
+                    <CommandItem
+                      key={item.value}
+                      value={item.value}
+                      onSelect={(v) => { setValue(v === value ? '' : v); setOpen(false); }}
+                    >
+                      {item.label}
+                      <Check className={cn('ml-auto', value === item.value ? 'opacity-100' : 'opacity-0')} />
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              )}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
+
+export const ComboboxAsync = {
+  name: 'Combobox Async',
+  render: () => <AsyncCombobox />,
 };
 
-export const Disabled: Story = {
-  // @ts-expect-error - args not needed when using render, but Storybook requires it
-  args: {},
+// ============================================================================
+// Combobox Disabled
+// ============================================================================
+
+export const ComboboxDisabled = {
+  name: 'Combobox Disabled',
   render: () => {
-    const [value, setValue] = useState<string>('next.js');
+    const [value, setValue] = React.useState('next.js');
 
     return (
-      <Combobox
-        items={frameworks}
-        value={value}
-        onValueChange={setValue}
-        placeholder="Select framework..."
-        searchPlaceholder="Search frameworks..."
-        disabled
-      />
+      <div className="flex flex-col gap-4">
+        <div className="space-y-1.5">
+          <Label className="text-sm">With value (disabled)</Label>
+          <Combobox
+            items={frameworks}
+            value={value}
+            onValueChange={setValue}
+            placeholder="Select framework..."
+            disabled
+          />
+        </div>
+        <div className="space-y-1.5">
+          <Label className="text-sm">Empty (disabled)</Label>
+          <Combobox
+            items={frameworks}
+            value=""
+            onValueChange={() => {}}
+            placeholder="Select framework..."
+            disabled
+          />
+        </div>
+      </div>
     );
   },
 };
 
-export const LargeList: Story = {
-  // @ts-expect-error - args not needed when using render, but Storybook requires it
-  args: {},
+// ============================================================================
+// Examples
+// ============================================================================
+
+export const Examples = {
+  name: 'Examples',
   render: () => {
-    const [value, setValue] = useState<string>('');
+    const [framework, setFramework] = React.useState('');
+    const [country, setCountry] = React.useState('');
+    const [role, setRole] = React.useState('');
+
+    const roles: ComboboxItem[] = [
+      { value: 'admin', label: 'Admin' },
+      { value: 'editor', label: 'Editor' },
+      { value: 'viewer', label: 'Viewer' },
+      { value: 'developer', label: 'Developer' },
+      { value: 'designer', label: 'Designer' },
+    ];
 
     return (
-      <Combobox
-        items={largeList}
-        value={value}
-        onValueChange={setValue}
-        placeholder="Select item..."
-        searchPlaceholder="Search items..."
-      />
+      <div className="flex flex-col gap-8">
+        {/* Form field */}
+        <div>
+          <p className="text-sm font-medium mb-3">Form Field</p>
+          <div className="grid max-w-sm gap-4">
+            <div className="space-y-1.5">
+              <Label>Framework</Label>
+              <Combobox
+                items={frameworks}
+                value={framework}
+                onValueChange={setFramework}
+                placeholder="Select framework..."
+                searchPlaceholder="Search frameworks..."
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label>Country</Label>
+              <Combobox
+                items={countries}
+                value={country}
+                onValueChange={setCountry}
+                placeholder="Select country..."
+                searchPlaceholder="Search countries..."
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label>Role</Label>
+              <Combobox
+                items={roles}
+                value={role}
+                onValueChange={setRole}
+                placeholder="Select role..."
+                searchPlaceholder="Search roles..."
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Inline filters */}
+        <div>
+          <p className="text-sm font-medium mb-3">Inline Filters</p>
+          <div className="flex items-center gap-2">
+            <Combobox
+              items={[
+                { value: 'active', label: 'Active' },
+                { value: 'inactive', label: 'Inactive' },
+                { value: 'pending', label: 'Pending' },
+              ]}
+              value=""
+              onValueChange={() => {}}
+              placeholder="Status"
+              className="w-[150px]"
+            />
+            <Combobox
+              items={roles}
+              value=""
+              onValueChange={() => {}}
+              placeholder="Role"
+              className="w-[150px]"
+            />
+            <Combobox
+              items={countries}
+              value=""
+              onValueChange={() => {}}
+              placeholder="Region"
+              className="w-[150px]"
+            />
+          </div>
+        </div>
+      </div>
     );
   },
 };
diff --git a/packages/apollo-wind/src/components/ui/command.stories.tsx b/packages/apollo-wind/src/components/ui/command.stories.tsx
index 290238f3b..27ee078e8 100644
--- a/packages/apollo-wind/src/components/ui/command.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/command.stories.tsx
@@ -1,14 +1,22 @@
 import type { Meta } from '@storybook/react-vite';
 import {
   Calendar,
+  Calculator,
   CreditCard,
+  FileText,
+  Globe,
+  Laptop,
   Mail,
   MessageSquare,
-  PlusCircle,
+  Moon,
+  Plus,
+  Search,
   Settings,
+  Sun,
   User,
 } from 'lucide-react';
 import * as React from 'react';
+import { Button } from './button';
 import {
   Command,
   CommandDialog,
@@ -32,8 +40,12 @@ const meta = {
 
 export default meta;
 
-export const Default = {
-  args: {},
+// ============================================================================
+// Basic
+// ============================================================================
+
+export const Basic = {
+  name: 'Basic',
   render: () => (
     <Command className="rounded-lg border shadow-md w-[450px]">
       <CommandInput placeholder="Type a command or search..." />
@@ -45,23 +57,134 @@ export const Default = {
             <span>Calendar</span>
           </CommandItem>
           <CommandItem>
-            <User className="mr-2 h-4 w-4" />
-            <span>Search Users</span>
+            <Search className="mr-2 h-4 w-4" />
+            <span>Search</span>
           </CommandItem>
           <CommandItem>
             <Settings className="mr-2 h-4 w-4" />
             <span>Settings</span>
           </CommandItem>
         </CommandGroup>
+      </CommandList>
+    </Command>
+  ),
+};
+
+// ============================================================================
+// Command with Dialog
+// ============================================================================
+
+export const CommandWithDialog = {
+  name: 'Command with Dialog',
+  render: () => {
+    const [open, setOpen] = React.useState(false);
+
+    React.useEffect(() => {
+      const down = (e: KeyboardEvent) => {
+        if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+          e.preventDefault();
+          setOpen((o) => !o);
+        }
+      };
+      document.addEventListener('keydown', down);
+      return () => document.removeEventListener('keydown', down);
+    }, []);
+
+    return (
+      <div>
+        <p className="text-sm text-muted-foreground mb-4">
+          Press{' '}
+          <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">
+            <span className="text-xs">⌘</span>K
+          </kbd>{' '}
+          or click the button below.
+        </p>
+        <Button variant="outline" onClick={() => setOpen(true)}>
+          Open Command Menu
+        </Button>
+        <CommandDialog open={open} onOpenChange={setOpen}>
+          <CommandInput placeholder="Type a command or search..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="Suggestions">
+              <CommandItem>
+                <Calendar className="mr-2 h-4 w-4" />
+                <span>Calendar</span>
+              </CommandItem>
+              <CommandItem>
+                <User className="mr-2 h-4 w-4" />
+                <span>Search Users</span>
+              </CommandItem>
+              <CommandItem>
+                <Settings className="mr-2 h-4 w-4" />
+                <span>Settings</span>
+              </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="Actions">
+              <CommandItem>
+                <Mail className="mr-2 h-4 w-4" />
+                <span>Send Message</span>
+                <CommandShortcut>⌘M</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <MessageSquare className="mr-2 h-4 w-4" />
+                <span>New Chat</span>
+                <CommandShortcut>⌘N</CommandShortcut>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </CommandDialog>
+      </div>
+    );
+  },
+};
+
+// ============================================================================
+// Command with Groups
+// ============================================================================
+
+export const CommandWithGroups = {
+  name: 'Command with Groups',
+  render: () => (
+    <Command className="rounded-lg border shadow-md w-[450px]">
+      <CommandInput placeholder="Search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Navigation">
+          <CommandItem>
+            <Globe className="mr-2 h-4 w-4" />
+            <span>Go to Dashboard</span>
+          </CommandItem>
+          <CommandItem>
+            <FileText className="mr-2 h-4 w-4" />
+            <span>Go to Documents</span>
+          </CommandItem>
+          <CommandItem>
+            <Settings className="mr-2 h-4 w-4" />
+            <span>Go to Settings</span>
+          </CommandItem>
+        </CommandGroup>
         <CommandSeparator />
         <CommandGroup heading="Actions">
           <CommandItem>
-            <PlusCircle className="mr-2 h-4 w-4" />
-            <span>Create New</span>
+            <Plus className="mr-2 h-4 w-4" />
+            <span>Create New Project</span>
           </CommandItem>
           <CommandItem>
             <Mail className="mr-2 h-4 w-4" />
-            <span>Send Message</span>
+            <span>Send Invite</span>
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Account">
+          <CommandItem>
+            <User className="mr-2 h-4 w-4" />
+            <span>Profile</span>
+          </CommandItem>
+          <CommandItem>
+            <CreditCard className="mr-2 h-4 w-4" />
+            <span>Billing</span>
           </CommandItem>
         </CommandGroup>
       </CommandList>
@@ -69,42 +192,58 @@ export const Default = {
   ),
 };
 
-export const WithShortcuts = {
-  args: {},
+// ============================================================================
+// Command with Shortcuts
+// ============================================================================
+
+export const CommandWithShortcuts = {
+  name: 'Command with Shortcuts',
   render: () => (
     <Command className="rounded-lg border shadow-md w-[450px]">
       <CommandInput placeholder="Type a command or search..." />
       <CommandList>
         <CommandEmpty>No results found.</CommandEmpty>
-        <CommandGroup heading="Suggestions">
+        <CommandGroup heading="General">
           <CommandItem>
-            <Calendar className="mr-2 h-4 w-4" />
-            <span>Calendar</span>
+            <Search className="mr-2 h-4 w-4" />
+            <span>Search</span>
             <CommandShortcut>⌘K</CommandShortcut>
           </CommandItem>
+          <CommandItem>
+            <Plus className="mr-2 h-4 w-4" />
+            <span>New File</span>
+            <CommandShortcut>⌘N</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            <Settings className="mr-2 h-4 w-4" />
+            <span>Settings</span>
+            <CommandShortcut>⌘,</CommandShortcut>
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Account">
           <CommandItem>
             <User className="mr-2 h-4 w-4" />
-            <span>Search Users</span>
-            <CommandShortcut>⌘U</CommandShortcut>
+            <span>Profile</span>
+            <CommandShortcut>⌘P</CommandShortcut>
           </CommandItem>
           <CommandItem>
             <CreditCard className="mr-2 h-4 w-4" />
             <span>Billing</span>
             <CommandShortcut>⌘B</CommandShortcut>
           </CommandItem>
-          <CommandItem>
-            <Settings className="mr-2 h-4 w-4" />
-            <span>Settings</span>
-            <CommandShortcut>⌘S</CommandShortcut>
-          </CommandItem>
         </CommandGroup>
       </CommandList>
     </Command>
   ),
 };
 
-export const Dialog = {
-  args: {},
+// ============================================================================
+// Command Palette Usage
+// ============================================================================
+
+export const CommandPaletteUsage = {
+  name: 'Command Palette Usage',
   render: () => {
     const [open, setOpen] = React.useState(false);
 
@@ -112,7 +251,7 @@ export const Dialog = {
       const down = (e: KeyboardEvent) => {
         if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
           e.preventDefault();
-          setOpen((open) => !open);
+          setOpen((o) => !o);
         }
       };
       document.addEventListener('keydown', down);
@@ -121,47 +260,69 @@ export const Dialog = {
 
     return (
       <div>
-        <p className="text-sm text-muted-foreground mb-4">
-          Press{' '}
-          <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
-            <span className="text-xs">⌘</span>K
-          </kbd>
-        </p>
-        <button
+        <Button
+          variant="outline"
+          className="w-64 justify-between text-muted-foreground"
           onClick={() => setOpen(true)}
-          className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"
         >
-          Open Command Menu
-        </button>
+          <span className="flex items-center gap-2">
+            <Search className="h-4 w-4" />
+            Search commands...
+          </span>
+          <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">
+            <span className="text-xs">⌘</span>K
+          </kbd>
+        </Button>
         <CommandDialog open={open} onOpenChange={setOpen}>
-          <CommandInput placeholder="Type a command or search..." />
+          <CommandInput placeholder="What do you need?" />
           <CommandList>
             <CommandEmpty>No results found.</CommandEmpty>
-            <CommandGroup heading="Suggestions">
+            <CommandGroup heading="Quick Actions">
+              <CommandItem>
+                <Plus className="mr-2 h-4 w-4" />
+                <span>New Project</span>
+                <CommandShortcut>⌘N</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <FileText className="mr-2 h-4 w-4" />
+                <span>New Document</span>
+                <CommandShortcut>⌘D</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <Mail className="mr-2 h-4 w-4" />
+                <span>Compose Message</span>
+                <CommandShortcut>⌘M</CommandShortcut>
+              </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="Navigation">
+              <CommandItem>
+                <Globe className="mr-2 h-4 w-4" />
+                <span>Dashboard</span>
+              </CommandItem>
               <CommandItem>
                 <Calendar className="mr-2 h-4 w-4" />
                 <span>Calendar</span>
               </CommandItem>
               <CommandItem>
                 <User className="mr-2 h-4 w-4" />
-                <span>Search Users</span>
+                <span>Team Members</span>
               </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="Settings">
               <CommandItem>
                 <Settings className="mr-2 h-4 w-4" />
-                <span>Settings</span>
+                <span>Preferences</span>
+                <CommandShortcut>⌘,</CommandShortcut>
               </CommandItem>
-            </CommandGroup>
-            <CommandSeparator />
-            <CommandGroup heading="Actions">
               <CommandItem>
-                <Mail className="mr-2 h-4 w-4" />
-                <span>Send Message</span>
-                <CommandShortcut>⌘M</CommandShortcut>
+                <Sun className="mr-2 h-4 w-4" />
+                <span>Light Mode</span>
               </CommandItem>
               <CommandItem>
-                <MessageSquare className="mr-2 h-4 w-4" />
-                <span>New Chat</span>
-                <CommandShortcut>⌘N</CommandShortcut>
+                <Moon className="mr-2 h-4 w-4" />
+                <span>Dark Mode</span>
               </CommandItem>
             </CommandGroup>
           </CommandList>
@@ -170,3 +331,114 @@ export const Dialog = {
     );
   },
 };
+
+// ============================================================================
+// Examples
+// ============================================================================
+
+export const Examples = {
+  name: 'Examples',
+  render: () => (
+    <div className="flex flex-col gap-8">
+      {/* Search bar */}
+      <div>
+        <p className="text-sm font-medium mb-3">Search Bar</p>
+        <Command className="rounded-lg border shadow-md w-[450px]">
+          <CommandInput placeholder="Search documentation..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="Getting Started">
+              <CommandItem>
+                <FileText className="mr-2 h-4 w-4" />
+                <span>Introduction</span>
+              </CommandItem>
+              <CommandItem>
+                <FileText className="mr-2 h-4 w-4" />
+                <span>Installation</span>
+              </CommandItem>
+              <CommandItem>
+                <FileText className="mr-2 h-4 w-4" />
+                <span>Configuration</span>
+              </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="Components">
+              <CommandItem>
+                <FileText className="mr-2 h-4 w-4" />
+                <span>Button</span>
+              </CommandItem>
+              <CommandItem>
+                <FileText className="mr-2 h-4 w-4" />
+                <span>Input</span>
+              </CommandItem>
+              <CommandItem>
+                <FileText className="mr-2 h-4 w-4" />
+                <span>Dialog</span>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </div>
+
+      {/* Calculator */}
+      <div>
+        <p className="text-sm font-medium mb-3">Calculator Launcher</p>
+        <Command className="rounded-lg border shadow-md w-[450px]">
+          <CommandInput placeholder="Calculate or convert..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="Tools">
+              <CommandItem>
+                <Calculator className="mr-2 h-4 w-4" />
+                <span>Calculator</span>
+                <CommandShortcut>⌘=</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <Laptop className="mr-2 h-4 w-4" />
+                <span>Unit Converter</span>
+              </CommandItem>
+              <CommandItem>
+                <Globe className="mr-2 h-4 w-4" />
+                <span>Currency Exchange</span>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </div>
+
+      {/* User management */}
+      <div>
+        <p className="text-sm font-medium mb-3">User Management</p>
+        <Command className="rounded-lg border shadow-md w-[450px]">
+          <CommandInput placeholder="Search users..." />
+          <CommandList>
+            <CommandEmpty>No users found.</CommandEmpty>
+            <CommandGroup heading="Team">
+              <CommandItem>
+                <User className="mr-2 h-4 w-4" />
+                <div className="flex flex-col">
+                  <span>Alex Johnson</span>
+                  <span className="text-xs text-muted-foreground">Engineering</span>
+                </div>
+              </CommandItem>
+              <CommandItem>
+                <User className="mr-2 h-4 w-4" />
+                <div className="flex flex-col">
+                  <span>Sarah Williams</span>
+                  <span className="text-xs text-muted-foreground">Design</span>
+                </div>
+              </CommandItem>
+              <CommandItem>
+                <User className="mr-2 h-4 w-4" />
+                <div className="flex flex-col">
+                  <span>Michael Chen</span>
+                  <span className="text-xs text-muted-foreground">Product</span>
+                </div>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </div>
+    </div>
+  ),
+};
diff --git a/packages/apollo-wind/src/components/ui/component-gallery.stories.tsx b/packages/apollo-wind/src/components/ui/component-gallery.stories.tsx
index ad0a5555d..e4a68fb13 100644
--- a/packages/apollo-wind/src/components/ui/component-gallery.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/component-gallery.stories.tsx
@@ -366,22 +366,6 @@ const components: ComponentInfo[] = [
     category: Category.Core,
     preview: <label className="text-xs font-medium">Label</label>,
   },
-  {
-    name: 'Menubar',
-    description: 'Desktop-style menu bar',
-    storyPath: 'design-system-navigation-menubar--docs',
-    category: Category.Navigation,
-    preview: (
-      <div className="flex gap-2">
-        <Button variant="ghost" size="sm">
-          File
-        </Button>
-        <Button variant="ghost" size="sm">
-          Edit
-        </Button>
-      </div>
-    ),
-  },
   {
     name: 'Multi Select',
     description: 'Multiple selection input',
@@ -393,22 +377,6 @@ const components: ComponentInfo[] = [
       </Button>
     ),
   },
-  {
-    name: 'Navigation Menu',
-    description: 'Navigation menu with dropdowns',
-    storyPath: 'design-system-navigation-navigation-menu--docs',
-    category: Category.Navigation,
-    preview: (
-      <div className="flex gap-2">
-        <Button variant="ghost" size="sm">
-          Home
-        </Button>
-        <Button variant="ghost" size="sm">
-          About
-        </Button>
-      </div>
-    ),
-  },
   {
     name: 'Pagination',
     description: 'Page navigation',
diff --git a/packages/apollo-wind/src/components/ui/context-menu.stories.tsx b/packages/apollo-wind/src/components/ui/context-menu.stories.tsx
index 131e37500..122e66480 100644
--- a/packages/apollo-wind/src/components/ui/context-menu.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/context-menu.stories.tsx
@@ -1,38 +1,377 @@
+import { useState, forwardRef } from 'react';
 import type { Meta } from '@storybook/react-vite';
+import {
+  Copy,
+  Scissors,
+  Clipboard,
+  Trash2,
+  Pencil,
+  Share2,
+  Download,
+  FolderOpen,
+  FileText,
+  Image,
+  Film,
+  Star,
+  Eye,
+  EyeOff,
+  ArrowUpRight,
+  RotateCcw,
+  RotateCw,
+} from 'lucide-react';
 import {
   ContextMenu,
+  ContextMenuCheckboxItem,
   ContextMenuContent,
+  ContextMenuGroup,
   ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
   ContextMenuTrigger,
 } from './context-menu';
-import { Row } from './layout';
 
 const meta: Meta<typeof ContextMenu> = {
-  title: 'Components/Overlays/Context Menu',
+  title: 'Components/Navigation/Context Menu',
   component: ContextMenu,
   tags: ['autodocs'],
 };
 
 export default meta;
 
-export const Default = {
-  args: {},
+/** Reusable trigger area — forwards ref so Radix asChild can attach event handlers */
+const TriggerArea = forwardRef<HTMLDivElement, { label?: string } & React.HTMLAttributes<HTMLDivElement>>(
+  ({ label = 'Right click here', ...props }, ref) => (
+    <div
+      ref={ref}
+      className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm text-muted-foreground"
+      {...props}
+    >
+      {label}
+    </div>
+  )
+);
+TriggerArea.displayName = 'TriggerArea';
+
+// ============================================================================
+// Basic
+// ============================================================================
+
+export const Basic = {
+  name: 'Basic',
   render: () => (
     <ContextMenu>
       <ContextMenuTrigger asChild>
-        <Row
-          align="center"
-          justify="center"
-          className="h-[150px] w-[300px] rounded-md border border-dashed text-sm"
-        >
-          Right click here
-        </Row>
+        <TriggerArea />
       </ContextMenuTrigger>
-      <ContextMenuContent>
+      <ContextMenuContent className="w-48">
         <ContextMenuItem>Back</ContextMenuItem>
         <ContextMenuItem>Forward</ContextMenuItem>
         <ContextMenuItem>Reload</ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem>Save As…</ContextMenuItem>
+        <ContextMenuItem>Print</ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem>View Page Source</ContextMenuItem>
+        <ContextMenuItem>Inspect</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  ),
+};
+
+// ============================================================================
+// Icons
+// ============================================================================
+
+export const Icons = {
+  name: 'Icons',
+  render: () => (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        <TriggerArea />
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-48">
+        <ContextMenuItem>
+          <Scissors className="mr-2 h-4 w-4" />
+          Cut
+        </ContextMenuItem>
+        <ContextMenuItem>
+          <Copy className="mr-2 h-4 w-4" />
+          Copy
+        </ContextMenuItem>
+        <ContextMenuItem>
+          <Clipboard className="mr-2 h-4 w-4" />
+          Paste
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem>
+          <Pencil className="mr-2 h-4 w-4" />
+          Rename
+        </ContextMenuItem>
+        <ContextMenuItem>
+          <Download className="mr-2 h-4 w-4" />
+          Download
+        </ContextMenuItem>
+        <ContextMenuItem>
+          <Share2 className="mr-2 h-4 w-4" />
+          Share
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem className="text-destructive focus:text-destructive">
+          <Trash2 className="mr-2 h-4 w-4" />
+          Delete
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  ),
+};
+
+// ============================================================================
+// Submenu
+// ============================================================================
+
+export const Submenu = {
+  name: 'Submenu',
+  render: () => (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        <TriggerArea />
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-48">
+        <ContextMenuItem>
+          <ArrowUpRight className="mr-2 h-4 w-4" />
+          Open
+        </ContextMenuItem>
+        <ContextMenuSub>
+          <ContextMenuSubTrigger>
+            <FolderOpen className="mr-2 h-4 w-4" />
+            Open With
+          </ContextMenuSubTrigger>
+          <ContextMenuSubContent className="w-44">
+            <ContextMenuItem>Text Editor</ContextMenuItem>
+            <ContextMenuItem>Code Editor</ContextMenuItem>
+            <ContextMenuItem>Preview</ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem>Choose Application…</ContextMenuItem>
+          </ContextMenuSubContent>
+        </ContextMenuSub>
+        <ContextMenuSeparator />
+        <ContextMenuSub>
+          <ContextMenuSubTrigger>
+            <Share2 className="mr-2 h-4 w-4" />
+            Share
+          </ContextMenuSubTrigger>
+          <ContextMenuSubContent className="w-44">
+            <ContextMenuItem>Copy Link</ContextMenuItem>
+            <ContextMenuItem>Email</ContextMenuItem>
+            <ContextMenuItem>Slack</ContextMenuItem>
+            <ContextMenuItem>Teams</ContextMenuItem>
+          </ContextMenuSubContent>
+        </ContextMenuSub>
+        <ContextMenuSub>
+          <ContextMenuSubTrigger>
+            <Download className="mr-2 h-4 w-4" />
+            Export As
+          </ContextMenuSubTrigger>
+          <ContextMenuSubContent className="w-44">
+            <ContextMenuItem>PDF</ContextMenuItem>
+            <ContextMenuItem>CSV</ContextMenuItem>
+            <ContextMenuItem>JSON</ContextMenuItem>
+          </ContextMenuSubContent>
+        </ContextMenuSub>
       </ContextMenuContent>
     </ContextMenu>
   ),
 };
+
+// ============================================================================
+// Shortcuts
+// ============================================================================
+
+export const Shortcuts = {
+  name: 'Shortcuts',
+  render: () => (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        <TriggerArea />
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-52">
+        <ContextMenuItem>
+          <RotateCcw className="mr-2 h-4 w-4" />
+          Undo
+          <ContextMenuShortcut>⌘Z</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem>
+          <RotateCw className="mr-2 h-4 w-4" />
+          Redo
+          <ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem>
+          <Scissors className="mr-2 h-4 w-4" />
+          Cut
+          <ContextMenuShortcut>⌘X</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem>
+          <Copy className="mr-2 h-4 w-4" />
+          Copy
+          <ContextMenuShortcut>⌘C</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem>
+          <Clipboard className="mr-2 h-4 w-4" />
+          Paste
+          <ContextMenuShortcut>⌘V</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem>
+          Select All
+          <ContextMenuShortcut>⌘A</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem className="text-destructive focus:text-destructive">
+          <Trash2 className="mr-2 h-4 w-4" />
+          Delete
+          <ContextMenuShortcut>⌫</ContextMenuShortcut>
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  ),
+};
+
+// ============================================================================
+// Groups
+// ============================================================================
+
+export const Groups = {
+  name: 'Groups',
+  render: () => {
+    const [showHidden, setShowHidden] = useState(false);
+    const [showPreview, setShowPreview] = useState(true);
+    const [sortBy, setSortBy] = useState('name');
+
+    return (
+      <ContextMenu>
+        <ContextMenuTrigger asChild>
+          <TriggerArea />
+        </ContextMenuTrigger>
+        <ContextMenuContent className="w-52">
+          <ContextMenuGroup>
+            <ContextMenuLabel>View</ContextMenuLabel>
+            <ContextMenuCheckboxItem checked={showHidden} onCheckedChange={setShowHidden}>
+              <EyeOff className="mr-2 h-4 w-4" />
+              Show Hidden Files
+            </ContextMenuCheckboxItem>
+            <ContextMenuCheckboxItem checked={showPreview} onCheckedChange={setShowPreview}>
+              <Eye className="mr-2 h-4 w-4" />
+              Show Preview
+            </ContextMenuCheckboxItem>
+          </ContextMenuGroup>
+          <ContextMenuSeparator />
+          <ContextMenuGroup>
+            <ContextMenuLabel>Sort By</ContextMenuLabel>
+            <ContextMenuRadioGroup value={sortBy} onValueChange={setSortBy}>
+              <ContextMenuRadioItem value="name">Name</ContextMenuRadioItem>
+              <ContextMenuRadioItem value="date">Date Modified</ContextMenuRadioItem>
+              <ContextMenuRadioItem value="size">Size</ContextMenuRadioItem>
+              <ContextMenuRadioItem value="type">Type</ContextMenuRadioItem>
+            </ContextMenuRadioGroup>
+          </ContextMenuGroup>
+          <ContextMenuSeparator />
+          <ContextMenuGroup>
+            <ContextMenuLabel>Actions</ContextMenuLabel>
+            <ContextMenuItem>
+              <FolderOpen className="mr-2 h-4 w-4" />
+              New Folder
+            </ContextMenuItem>
+            <ContextMenuItem>
+              <FileText className="mr-2 h-4 w-4" />
+              New File
+            </ContextMenuItem>
+          </ContextMenuGroup>
+        </ContextMenuContent>
+      </ContextMenu>
+    );
+  },
+};
+
+// ============================================================================
+// Examples
+// ============================================================================
+
+export const Examples = {
+  name: 'Examples',
+  render: () => {
+    const [starred, setStarred] = useState(false);
+
+    const files = [
+      { name: 'Project Brief.pdf', icon: <FileText className="h-4 w-4 text-muted-foreground" /> },
+      { name: 'Hero Banner.png', icon: <Image className="h-4 w-4 text-muted-foreground" /> },
+      { name: 'Demo Recording.mp4', icon: <Film className="h-4 w-4 text-muted-foreground" /> },
+    ];
+
+    return (
+      <div className="flex flex-col gap-1 w-[320px] rounded-lg border p-2">
+        {files.map((file) => (
+          <ContextMenu key={file.name}>
+            <ContextMenuTrigger asChild>
+              <div className="flex items-center gap-3 rounded-md px-3 py-2 text-sm hover:bg-accent cursor-default">
+                {file.icon}
+                <span>{file.name}</span>
+              </div>
+            </ContextMenuTrigger>
+            <ContextMenuContent className="w-52">
+              <ContextMenuItem>
+                <ArrowUpRight className="mr-2 h-4 w-4" />
+                Open
+              </ContextMenuItem>
+              <ContextMenuItem>
+                <Download className="mr-2 h-4 w-4" />
+                Download
+              </ContextMenuItem>
+              <ContextMenuSeparator />
+              <ContextMenuItem>
+                <Pencil className="mr-2 h-4 w-4" />
+                Rename
+                <ContextMenuShortcut>F2</ContextMenuShortcut>
+              </ContextMenuItem>
+              <ContextMenuItem>
+                <Copy className="mr-2 h-4 w-4" />
+                Duplicate
+                <ContextMenuShortcut>⌘D</ContextMenuShortcut>
+              </ContextMenuItem>
+              <ContextMenuSub>
+                <ContextMenuSubTrigger>
+                  <Share2 className="mr-2 h-4 w-4" />
+                  Share
+                </ContextMenuSubTrigger>
+                <ContextMenuSubContent className="w-44">
+                  <ContextMenuItem>Copy Link</ContextMenuItem>
+                  <ContextMenuItem>Email</ContextMenuItem>
+                  <ContextMenuItem>Slack</ContextMenuItem>
+                </ContextMenuSubContent>
+              </ContextMenuSub>
+              <ContextMenuSeparator />
+              <ContextMenuCheckboxItem
+                checked={starred}
+                onCheckedChange={setStarred}
+              >
+                <Star className="mr-2 h-4 w-4" />
+                Starred
+              </ContextMenuCheckboxItem>
+              <ContextMenuSeparator />
+              <ContextMenuItem className="text-destructive focus:text-destructive">
+                <Trash2 className="mr-2 h-4 w-4" />
+                Delete
+                <ContextMenuShortcut>⌫</ContextMenuShortcut>
+              </ContextMenuItem>
+            </ContextMenuContent>
+          </ContextMenu>
+        ))}
+      </div>
+    );
+  },
+};
diff --git a/packages/apollo-wind/src/components/ui/data-table.stories.tsx b/packages/apollo-wind/src/components/ui/data-table.stories.tsx
index d3ae4fa51..dba41d273 100644
--- a/packages/apollo-wind/src/components/ui/data-table.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/data-table.stories.tsx
@@ -1,7 +1,25 @@
 import type { Meta } from '@storybook/react-vite';
 import { ColumnDef } from '@tanstack/react-table';
-import { MoreHorizontal } from 'lucide-react';
+import {
+  ChevronDown,
+  ChevronRight,
+  Download,
+  GripVertical,
+  MoreHorizontal,
+  Pencil,
+  Trash2,
+} from 'lucide-react';
 import * as React from 'react';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from './alert-dialog';
 import { Badge } from './badge';
 import { Button } from './button';
 import { DataTable, DataTableColumnHeader, DataTableSelectColumn } from './data-table';
@@ -10,9 +28,29 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from './dropdown-menu';
 import type { EditableCellMeta } from './editable-cell';
+import { Input } from './input';
+import { Label } from './label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';
+import { Separator } from './separator';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from './sheet';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from './table';
 
 const meta = {
   title: 'Components/Data Display/Data Table',
@@ -25,387 +63,321 @@ const meta = {
 
 export default meta;
 
-// Sample data types
+// ---------------------------------------------------------------------------
+// Shared data
+// ---------------------------------------------------------------------------
+
 type User = {
   id: string;
   name: string;
   email: string;
   role: string;
   status: 'active' | 'inactive' | 'pending';
+  department: string;
+  joined: string;
 };
 
 const sampleUsers: User[] = [
-  {
-    id: '1',
-    name: 'John Doe',
-    email: 'john@example.com',
-    role: 'Admin',
-    status: 'active',
-  },
-  {
-    id: '2',
-    name: 'Jane Smith',
-    email: 'jane@example.com',
-    role: 'User',
-    status: 'active',
-  },
-  {
-    id: '3',
-    name: 'Bob Johnson',
-    email: 'bob@example.com',
-    role: 'User',
-    status: 'inactive',
-  },
-  {
-    id: '4',
-    name: 'Alice Williams',
-    email: 'alice@example.com',
-    role: 'Manager',
-    status: 'active',
-  },
-  {
-    id: '5',
-    name: 'Charlie Brown',
-    email: 'charlie@example.com',
-    role: 'User',
-    status: 'pending',
-  },
-  {
-    id: '6',
-    name: 'Diana Prince',
-    email: 'diana@example.com',
-    role: 'Admin',
-    status: 'active',
-  },
-  {
-    id: '7',
-    name: 'Eve Anderson',
-    email: 'eve@example.com',
-    role: 'User',
-    status: 'inactive',
-  },
-  {
-    id: '8',
-    name: 'Frank Miller',
-    email: 'frank@example.com',
-    role: 'Manager',
-    status: 'active',
-  },
-  {
-    id: '9',
-    name: 'Grace Lee',
-    email: 'grace@example.com',
-    role: 'User',
-    status: 'active',
-  },
-  {
-    id: '10',
-    name: 'Henry Davis',
-    email: 'henry@example.com',
-    role: 'User',
-    status: 'pending',
-  },
-  {
-    id: '11',
-    name: 'Ivy Wilson',
-    email: 'ivy@example.com',
-    role: 'Admin',
-    status: 'active',
-  },
-  {
-    id: '12',
-    name: 'Jack Taylor',
-    email: 'jack@example.com',
-    role: 'User',
-    status: 'inactive',
-  },
+  { id: '1', name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'active', department: 'Engineering', joined: '2023-01-15' },
+  { id: '2', name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'active', department: 'Design', joined: '2023-03-22' },
+  { id: '3', name: 'Bob Johnson', email: 'bob@example.com', role: 'User', status: 'inactive', department: 'Marketing', joined: '2022-11-08' },
+  { id: '4', name: 'Alice Williams', email: 'alice@example.com', role: 'Manager', status: 'active', department: 'Engineering', joined: '2022-06-30' },
+  { id: '5', name: 'Charlie Brown', email: 'charlie@example.com', role: 'User', status: 'pending', department: 'Sales', joined: '2024-01-10' },
+  { id: '6', name: 'Diana Prince', email: 'diana@example.com', role: 'Admin', status: 'active', department: 'Engineering', joined: '2021-09-01' },
+  { id: '7', name: 'Eve Anderson', email: 'eve@example.com', role: 'User', status: 'inactive', department: 'Design', joined: '2023-07-18' },
+  { id: '8', name: 'Frank Miller', email: 'frank@example.com', role: 'Manager', status: 'active', department: 'Product', joined: '2022-04-12' },
+  { id: '9', name: 'Grace Lee', email: 'grace@example.com', role: 'User', status: 'active', department: 'Engineering', joined: '2023-09-05' },
+  { id: '10', name: 'Henry Davis', email: 'henry@example.com', role: 'User', status: 'pending', department: 'Marketing', joined: '2024-02-20' },
+  { id: '11', name: 'Ivy Wilson', email: 'ivy@example.com', role: 'Admin', status: 'active', department: 'Product', joined: '2021-12-11' },
+  { id: '12', name: 'Jack Taylor', email: 'jack@example.com', role: 'User', status: 'inactive', department: 'Sales', joined: '2023-05-25' },
 ];
 
+const statusBadge = (status: string) => (
+  <Badge variant={status === 'active' ? 'default' : status === 'inactive' ? 'secondary' : 'outline'}>
+    {status}
+  </Badge>
+);
+
 const basicColumns: ColumnDef<User>[] = [
-  {
-    accessorKey: 'name',
-    header: 'Name',
-  },
-  {
-    accessorKey: 'email',
-    header: 'Email',
-  },
-  {
-    accessorKey: 'role',
-    header: 'Role',
-  },
-  {
-    accessorKey: 'status',
-    header: 'Status',
-    cell: ({ row }) => {
-      const status = row.getValue('status') as string;
-      return (
-        <Badge
-          variant={
-            status === 'active' ? 'default' : status === 'inactive' ? 'secondary' : 'outline'
-          }
-        >
-          {status}
-        </Badge>
-      );
-    },
-  },
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'email', header: 'Email' },
+  { accessorKey: 'role', header: 'Role' },
+  { accessorKey: 'status', header: 'Status', cell: ({ row }) => statusBadge(row.getValue('status')) },
 ];
 
 const sortableColumns: ColumnDef<User>[] = [
-  {
-    accessorKey: 'name',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
-  },
-  {
-    accessorKey: 'email',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Email" />,
-  },
-  {
-    accessorKey: 'role',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Role" />,
-  },
-  {
-    accessorKey: 'status',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
-    cell: ({ row }) => {
-      const status = row.getValue('status') as string;
-      return (
-        <Badge
-          variant={
-            status === 'active' ? 'default' : status === 'inactive' ? 'secondary' : 'outline'
-          }
-        >
-          {status}
-        </Badge>
-      );
-    },
-  },
+  { accessorKey: 'name', header: ({ column }) => <DataTableColumnHeader column={column} title="Name" /> },
+  { accessorKey: 'email', header: ({ column }) => <DataTableColumnHeader column={column} title="Email" /> },
+  { accessorKey: 'role', header: ({ column }) => <DataTableColumnHeader column={column} title="Role" /> },
+  { accessorKey: 'department', header: ({ column }) => <DataTableColumnHeader column={column} title="Department" /> },
+  { accessorKey: 'status', header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />, cell: ({ row }) => statusBadge(row.getValue('status')) },
 ];
 
-const selectableColumns: ColumnDef<User>[] = [
-  DataTableSelectColumn<User>(),
-  ...sortableColumns,
-  {
-    id: 'actions',
-    cell: ({ row }) => {
-      return (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="h-8 w-8 p-0">
-              <span className="sr-only">Open menu</span>
-              <MoreHorizontal className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuLabel>Actions</DropdownMenuLabel>
-            <DropdownMenuItem onClick={() => navigator.clipboard.writeText(row.original.id)}>
-              Copy user ID
-            </DropdownMenuItem>
-            <DropdownMenuItem>View details</DropdownMenuItem>
-            <DropdownMenuItem>Edit user</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      );
-    },
-  },
-];
-
-export const Default = {
-  args: {},
-  render: () => <DataTable columns={basicColumns} data={sampleUsers} />,
-};
+// ============================================================================
+// Basic
+// ============================================================================
 
-export const WithSearch = {
-  args: {},
+export const Basic = {
+  name: 'Basic',
   render: () => (
     <DataTable
       columns={basicColumns}
       data={sampleUsers}
-      searchKey="name"
-      searchPlaceholder="Search by name..."
+      showColumnToggle={false}
     />
   ),
 };
 
-export const Sortable = {
-  args: {},
-  render: () => (
-    <DataTable
-      columns={sortableColumns}
-      data={sampleUsers}
-      searchKey="name"
-      searchPlaceholder="Search by name..."
-    />
-  ),
-};
+// ============================================================================
+// Drag and Drop
+// ============================================================================
 
-export const WithSelection = {
-  args: {},
-  render: () => (
-    <DataTable
-      columns={selectableColumns}
-      data={sampleUsers}
-      searchKey="name"
-      searchPlaceholder="Search by name..."
-    />
-  ),
-};
+function DragAndDropExample() {
+  const [data, setData] = React.useState(sampleUsers.slice(0, 6));
 
-export const NoPagination = {
-  args: {},
-  render: () => (
-    <DataTable columns={basicColumns} data={sampleUsers.slice(0, 5)} showPagination={false} />
-  ),
+  const moveRow = (fromIndex: number, toIndex: number) => {
+    setData((prev) => {
+      const updated = [...prev];
+      const [removed] = updated.splice(fromIndex, 1);
+      updated.splice(toIndex, 0, removed);
+      return updated;
+    });
+  };
+
+  const columns: ColumnDef<User>[] = [
+    {
+      id: 'drag',
+      header: '',
+      size: 40,
+      cell: ({ row }) => (
+        <div className="flex items-center gap-1">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6 cursor-grab"
+            disabled={row.index === 0}
+            onClick={() => moveRow(row.index, row.index - 1)}
+          >
+            <GripVertical className="h-4 w-4 text-muted-foreground" />
+          </Button>
+        </div>
+      ),
+    },
+    { accessorKey: 'name', header: 'Name' },
+    { accessorKey: 'email', header: 'Email' },
+    { accessorKey: 'role', header: 'Role' },
+    { accessorKey: 'status', header: 'Status', cell: ({ row }) => statusBadge(row.getValue('status')) },
+  ];
+
+  return (
+    <div className="space-y-2">
+      <p className="text-sm text-muted-foreground">Click the grip handle to reorder rows.</p>
+      <DataTable columns={columns} data={data} showPagination={false} showColumnToggle={false} />
+    </div>
+  );
+}
+
+export const DragAndDrop = {
+  name: 'Drag and Drop',
+  render: () => <DragAndDropExample />,
 };
 
-export const NoColumnToggle = {
-  args: {},
-  render: () => (
-    <DataTable
-      columns={basicColumns}
-      data={sampleUsers}
-      showColumnToggle={false}
-      searchKey="name"
-    />
-  ),
+// ============================================================================
+// Expandable Rows
+// ============================================================================
+
+function ExpandableRowsExample() {
+  const [expanded, setExpanded] = React.useState<Record<string, boolean>>({});
+
+  const toggle = (id: string) =>
+    setExpanded((prev) => ({ ...prev, [id]: !prev[id] }));
+
+  return (
+    <div className="rounded-md border">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-[40px]" />
+            <TableHead>Name</TableHead>
+            <TableHead>Email</TableHead>
+            <TableHead>Role</TableHead>
+            <TableHead>Status</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {sampleUsers.slice(0, 6).map((user) => (
+            <React.Fragment key={user.id}>
+              <TableRow>
+                <TableCell>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-6 w-6"
+                    onClick={() => toggle(user.id)}
+                  >
+                    {expanded[user.id] ? (
+                      <ChevronDown className="h-4 w-4" />
+                    ) : (
+                      <ChevronRight className="h-4 w-4" />
+                    )}
+                  </Button>
+                </TableCell>
+                <TableCell className="font-medium">{user.name}</TableCell>
+                <TableCell>{user.email}</TableCell>
+                <TableCell>{user.role}</TableCell>
+                <TableCell>{statusBadge(user.status)}</TableCell>
+              </TableRow>
+              {expanded[user.id] && (
+                <TableRow>
+                  <TableCell colSpan={5} className="bg-muted/50 p-4">
+                    <div className="grid grid-cols-3 gap-4 text-sm">
+                      <div>
+                        <p className="text-muted-foreground">Department</p>
+                        <p className="font-medium">{user.department}</p>
+                      </div>
+                      <div>
+                        <p className="text-muted-foreground">Joined</p>
+                        <p className="font-medium">{user.joined}</p>
+                      </div>
+                      <div>
+                        <p className="text-muted-foreground">ID</p>
+                        <p className="font-medium">{user.id}</p>
+                      </div>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              )}
+            </React.Fragment>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
+
+export const ExpandableRows = {
+  name: 'Expandable Rows',
+  render: () => <ExpandableRowsExample />,
 };
 
-export const CustomPageSize = {
-  args: {},
-  render: () => (
-    <DataTable columns={sortableColumns} data={sampleUsers} searchKey="name" pageSize={5} />
-  ),
+// ============================================================================
+// Bulk Actions
+// ============================================================================
+
+function BulkActionsExample() {
+  const [data, setData] = React.useState(sampleUsers);
+  const [selected, setSelected] = React.useState<Record<string, boolean>>({});
+
+  const selectedCount = Object.values(selected).filter(Boolean).length;
+
+  const handleDelete = () => {
+    const ids = Object.entries(selected)
+      .filter(([, v]) => v)
+      .map(([k]) => k);
+    setData((prev) => prev.filter((_, i) => !ids.includes(String(i))));
+    setSelected({});
+  };
+
+  const columns: ColumnDef<User>[] = [
+    DataTableSelectColumn<User>(),
+    { accessorKey: 'name', header: ({ column }) => <DataTableColumnHeader column={column} title="Name" /> },
+    { accessorKey: 'email', header: ({ column }) => <DataTableColumnHeader column={column} title="Email" /> },
+    { accessorKey: 'role', header: 'Role' },
+    { accessorKey: 'status', header: 'Status', cell: ({ row }) => statusBadge(row.getValue('status')) },
+  ];
+
+  return (
+    <div className="space-y-2">
+      {selectedCount > 0 && (
+        <div className="flex items-center gap-2 rounded-lg border bg-muted/50 px-4 py-2">
+          <span className="text-sm font-medium">{selectedCount} selected</span>
+          <Separator orientation="vertical" className="h-4" />
+          <Button variant="outline" size="sm">Export</Button>
+          <Button variant="outline" size="sm">Change Status</Button>
+          <Button variant="destructive" size="sm" onClick={handleDelete}>
+            <Trash2 className="mr-1 h-3.5 w-3.5" />
+            Delete
+          </Button>
+        </div>
+      )}
+      <DataTable columns={columns} data={data} searchKey="name" searchPlaceholder="Search users..." />
+    </div>
+  );
+}
+
+export const BulkActions = {
+  name: 'Bulk Actions',
+  render: () => <BulkActionsExample />,
 };
 
-// Editable table types and data
+// ============================================================================
+// Inline Editing
+// ============================================================================
+
 type Task = {
   id: string;
   name: string;
   status: string;
   priority: string;
-  dueDate: Date | null;
-  completed: boolean;
 };
 
 const initialTasks: Task[] = [
-  {
-    id: '1',
-    name: 'Design homepage mockup',
-    status: 'in-progress',
-    priority: 'high',
-    dueDate: new Date('2024-12-15'),
-    completed: false,
-  },
-  {
-    id: '2',
-    name: 'Review pull request',
-    status: 'todo',
-    priority: 'medium',
-    dueDate: new Date('2024-12-10'),
-    completed: false,
-  },
-  {
-    id: '3',
-    name: 'Update documentation',
-    status: 'done',
-    priority: 'low',
-    dueDate: new Date('2024-12-05'),
-    completed: true,
-  },
-  {
-    id: '4',
-    name: 'Fix navigation bug',
-    status: 'in-progress',
-    priority: 'high',
-    dueDate: null,
-    completed: false,
-  },
-  {
-    id: '5',
-    name: 'Write unit tests',
-    status: 'todo',
-    priority: 'medium',
-    dueDate: new Date('2024-12-20'),
-    completed: false,
-  },
+  { id: '1', name: 'Design homepage mockup', status: 'in-progress', priority: 'high' },
+  { id: '2', name: 'Review pull request', status: 'todo', priority: 'medium' },
+  { id: '3', name: 'Update documentation', status: 'done', priority: 'low' },
+  { id: '4', name: 'Fix navigation bug', status: 'in-progress', priority: 'high' },
+  { id: '5', name: 'Write unit tests', status: 'todo', priority: 'medium' },
 ];
 
-const editableColumns: ColumnDef<Task, unknown>[] = [
-  {
-    accessorKey: 'completed',
-    header: '',
-    meta: { type: 'checkbox' } as EditableCellMeta,
-    size: 50,
-    minSize: 50,
-    maxSize: 50,
-  },
-  {
-    accessorKey: 'name',
-    header: 'Task',
-    meta: {
-      type: 'text',
-      placeholder: 'Enter task name...',
-    } as EditableCellMeta,
-    size: 250,
-    minSize: 200,
-  },
-  {
-    accessorKey: 'status',
-    header: 'Status',
-    meta: {
-      type: 'select',
-      options: [
-        { value: 'todo', label: 'To Do' },
-        { value: 'in-progress', label: 'In Progress' },
-        { value: 'done', label: 'Done' },
-      ],
-    } as EditableCellMeta,
-    size: 140,
-    minSize: 120,
-  },
-  {
-    accessorKey: 'priority',
-    header: 'Priority',
-    meta: {
-      type: 'select',
-      options: [
-        { value: 'low', label: 'Low' },
-        { value: 'medium', label: 'Medium' },
-        { value: 'high', label: 'High' },
-      ],
-    } as EditableCellMeta,
-    size: 120,
-    minSize: 100,
-  },
-  {
-    accessorKey: 'dueDate',
-    header: 'Due Date',
-    meta: { type: 'date', placeholder: 'Set due date' } as EditableCellMeta,
-    size: 180,
-    minSize: 150,
-  },
-];
-
-function EditableTableExample() {
+function InlineEditingExample() {
   const [data, setData] = React.useState<Task[]>(initialTasks);
 
   const handleCellUpdate = (rowIndex: number, columnId: string, value: unknown) => {
     setData((prev) => {
       const newData = [...prev];
-      newData[rowIndex] = {
-        ...newData[rowIndex],
-        [columnId]: value,
-      };
+      newData[rowIndex] = { ...newData[rowIndex], [columnId]: value };
       return newData;
     });
   };
 
+  const editableColumns: ColumnDef<Task, unknown>[] = [
+    {
+      accessorKey: 'name',
+      header: 'Task',
+      meta: { type: 'text', placeholder: 'Enter task name...' } as EditableCellMeta,
+      size: 250,
+    },
+    {
+      accessorKey: 'status',
+      header: 'Status',
+      meta: {
+        type: 'select',
+        options: [
+          { value: 'todo', label: 'To Do' },
+          { value: 'in-progress', label: 'In Progress' },
+          { value: 'done', label: 'Done' },
+        ],
+      } as EditableCellMeta,
+      size: 140,
+    },
+    {
+      accessorKey: 'priority',
+      header: 'Priority',
+      meta: {
+        type: 'select',
+        options: [
+          { value: 'low', label: 'Low' },
+          { value: 'medium', label: 'Medium' },
+          { value: 'high', label: 'High' },
+        ],
+      } as EditableCellMeta,
+      size: 120,
+    },
+  ];
+
   return (
-    <div className="space-y-4">
-      <div className="text-sm text-muted-foreground">
-        Click on any cell to edit. Changes are saved automatically.
-      </div>
+    <div className="space-y-2">
+      <p className="text-sm text-muted-foreground">Click on any cell to edit. Press Enter to save, Escape to cancel.</p>
       <DataTable
         columns={editableColumns}
         data={data}
@@ -418,109 +390,528 @@ function EditableTableExample() {
   );
 }
 
-export const Editable = {
-  args: {},
-  render: () => <EditableTableExample />,
+export const InlineEditing = {
+  name: 'Inline Editing',
+  render: () => <InlineEditingExample />,
 };
 
-export const Resizable = {
-  args: {},
+// ============================================================================
+// Filtering & Search
+// ============================================================================
+
+export const FilteringAndSearch = {
+  name: 'Filtering & Search',
   render: () => (
-    <DataTable columns={sortableColumns} data={sampleUsers} searchKey="name" resizable />
+    <DataTable
+      columns={sortableColumns}
+      data={sampleUsers}
+      searchKey="name"
+      searchPlaceholder="Search by name..."
+    />
   ),
 };
 
-export const Compact = {
-  args: {},
-  render: () => <DataTable columns={sortableColumns} data={sampleUsers} searchKey="name" compact />,
+// ============================================================================
+// Column Visibility Toggle
+// ============================================================================
+
+export const ColumnVisibilityToggle = {
+  name: 'Column Visibility Toggle',
+  render: () => (
+    <DataTable
+      columns={sortableColumns}
+      data={sampleUsers}
+      searchKey="name"
+      showColumnToggle
+      columnToggleText="Toggle Columns"
+    />
+  ),
 };
 
-// Full-featured editable table with all options
-const editableSortableColumns: ColumnDef<Task, unknown>[] = [
-  DataTableSelectColumn<Task>(),
-  {
-    accessorKey: 'name',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Task" />,
-    meta: {
-      type: 'text',
-      placeholder: 'Enter task name...',
-    } as EditableCellMeta,
-    size: 250,
-    minSize: 150,
-  },
-  {
-    accessorKey: 'status',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
-    meta: {
-      type: 'select',
-      options: [
-        { value: 'todo', label: 'To Do' },
-        { value: 'in-progress', label: 'In Progress' },
-        { value: 'done', label: 'Done' },
-      ],
-    } as EditableCellMeta,
-    size: 140,
-    minSize: 100,
-  },
-  {
-    accessorKey: 'priority',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Priority" />,
-    meta: {
-      type: 'select',
-      options: [
-        { value: 'low', label: 'Low' },
-        { value: 'medium', label: 'Medium' },
-        { value: 'high', label: 'High' },
-      ],
-    } as EditableCellMeta,
-    size: 120,
-    minSize: 100,
-  },
-  {
-    accessorKey: 'dueDate',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Due Date" />,
-    meta: { type: 'date', placeholder: 'Set due date' } as EditableCellMeta,
-    size: 180,
-    minSize: 140,
+// ============================================================================
+// Advanced Sorting
+// ============================================================================
+
+export const AdvancedSorting = {
+  name: 'Advanced Sorting',
+  render: () => {
+    const columns: ColumnDef<User>[] = [
+      { accessorKey: 'name', header: ({ column }) => <DataTableColumnHeader column={column} title="Name" /> },
+      { accessorKey: 'email', header: ({ column }) => <DataTableColumnHeader column={column} title="Email" /> },
+      { accessorKey: 'role', header: ({ column }) => <DataTableColumnHeader column={column} title="Role" /> },
+      { accessorKey: 'department', header: ({ column }) => <DataTableColumnHeader column={column} title="Department" /> },
+      { accessorKey: 'joined', header: ({ column }) => <DataTableColumnHeader column={column} title="Joined" /> },
+      { accessorKey: 'status', header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />, cell: ({ row }) => statusBadge(row.getValue('status')) },
+    ];
+
+    return (
+      <div className="space-y-2">
+        <p className="text-sm text-muted-foreground">Click column headers to cycle through: ascending, descending, and unsorted.</p>
+        <DataTable columns={columns} data={sampleUsers} showColumnToggle={false} />
+      </div>
+    );
   },
-];
+};
 
-function FullFeaturedTableExample() {
-  const [data, setData] = React.useState<Task[]>(initialTasks);
+// ============================================================================
+// Column Filters
+// ============================================================================
 
-  const handleCellUpdate = (rowIndex: number, columnId: string, value: unknown) => {
-    setData((prev) => {
-      const newData = [...prev];
-      newData[rowIndex] = {
-        ...newData[rowIndex],
-        [columnId]: value,
-      };
-      return newData;
-    });
+function ColumnFiltersExample() {
+  const [roleFilter, setRoleFilter] = React.useState('all');
+  const [statusFilter, setStatusFilter] = React.useState('all');
+
+  const filtered = sampleUsers.filter((u) => {
+    if (roleFilter !== 'all' && u.role !== roleFilter) return false;
+    if (statusFilter !== 'all' && u.status !== statusFilter) return false;
+    return true;
+  });
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-4">
+        <div className="flex items-center gap-2">
+          <Label className="text-sm">Role</Label>
+          <Select value={roleFilter} onValueChange={setRoleFilter}>
+            <SelectTrigger className="h-8 w-[130px]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Roles</SelectItem>
+              <SelectItem value="Admin">Admin</SelectItem>
+              <SelectItem value="Manager">Manager</SelectItem>
+              <SelectItem value="User">User</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex items-center gap-2">
+          <Label className="text-sm">Status</Label>
+          <Select value={statusFilter} onValueChange={setStatusFilter}>
+            <SelectTrigger className="h-8 w-[130px]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Status</SelectItem>
+              <SelectItem value="active">Active</SelectItem>
+              <SelectItem value="inactive">Inactive</SelectItem>
+              <SelectItem value="pending">Pending</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        {(roleFilter !== 'all' || statusFilter !== 'all') && (
+          <Button variant="ghost" size="sm" onClick={() => { setRoleFilter('all'); setStatusFilter('all'); }}>
+            Clear filters
+          </Button>
+        )}
+      </div>
+      <DataTable columns={sortableColumns} data={filtered} showColumnToggle={false} />
+    </div>
+  );
+}
+
+export const ColumnFilters = {
+  name: 'Column Filters',
+  render: () => <ColumnFiltersExample />,
+};
+
+// ============================================================================
+// Export Functionality
+// ============================================================================
+
+function ExportExample() {
+  const handleExport = (format: string) => {
+    const header = ['Name', 'Email', 'Role', 'Department', 'Status'].join(',');
+    const rows = sampleUsers.map((u) => [u.name, u.email, u.role, u.department, u.status].join(','));
+    const csv = [header, ...rows].join('\n');
+    const blob = new Blob([csv], { type: `text/${format}` });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `users.${format}`;
+    a.click();
+    URL.revokeObjectURL(url);
   };
 
+  const columns: ColumnDef<User>[] = [
+    DataTableSelectColumn<User>(),
+    ...sortableColumns,
+  ];
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <p className="text-sm text-muted-foreground">Select rows and export, or export all data.</p>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" size="sm">
+              <Download className="mr-2 h-4 w-4" />
+              Export
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuLabel>Export As</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={() => handleExport('csv')}>CSV</DropdownMenuItem>
+            <DropdownMenuItem onClick={() => handleExport('tsv')}>TSV</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <DataTable columns={columns} data={sampleUsers} searchKey="name" />
+    </div>
+  );
+}
+
+export const ExportFunctionality = {
+  name: 'Export Functionality',
+  render: () => <ExportExample />,
+};
+
+// ============================================================================
+// Drawer
+// ============================================================================
+
+function DrawerExample() {
+  const [selectedUser, setSelectedUser] = React.useState<User | null>(null);
+
+  const columns: ColumnDef<User>[] = [
+    { accessorKey: 'name', header: ({ column }) => <DataTableColumnHeader column={column} title="Name" /> },
+    { accessorKey: 'email', header: ({ column }) => <DataTableColumnHeader column={column} title="Email" /> },
+    { accessorKey: 'role', header: 'Role' },
+    { accessorKey: 'status', header: 'Status', cell: ({ row }) => statusBadge(row.getValue('status')) },
+    {
+      id: 'actions',
+      cell: ({ row }) => (
+        <Button variant="ghost" size="sm" onClick={() => setSelectedUser(row.original)}>
+          View
+        </Button>
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <DataTable columns={columns} data={sampleUsers} searchKey="name" showColumnToggle={false} />
+      <Sheet open={!!selectedUser} onOpenChange={(open) => !open && setSelectedUser(null)}>
+        <SheetContent>
+          {selectedUser && (
+            <>
+              <SheetHeader>
+                <SheetTitle>{selectedUser.name}</SheetTitle>
+                <SheetDescription>{selectedUser.email}</SheetDescription>
+              </SheetHeader>
+              <div className="mt-6 space-y-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <p className="text-sm text-muted-foreground">Role</p>
+                    <p className="text-sm font-medium">{selectedUser.role}</p>
+                  </div>
+                  <div>
+                    <p className="text-sm text-muted-foreground">Status</p>
+                    <div className="mt-0.5">{statusBadge(selectedUser.status)}</div>
+                  </div>
+                  <div>
+                    <p className="text-sm text-muted-foreground">Department</p>
+                    <p className="text-sm font-medium">{selectedUser.department}</p>
+                  </div>
+                  <div>
+                    <p className="text-sm text-muted-foreground">Joined</p>
+                    <p className="text-sm font-medium">{selectedUser.joined}</p>
+                  </div>
+                </div>
+                <Separator />
+                <div className="flex gap-2">
+                  <Button size="sm">
+                    <Pencil className="mr-1 h-3.5 w-3.5" />
+                    Edit
+                  </Button>
+                  <Button variant="destructive" size="sm">
+                    <Trash2 className="mr-1 h-3.5 w-3.5" />
+                    Delete
+                  </Button>
+                </div>
+              </div>
+            </>
+          )}
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+}
+
+export const Drawer = {
+  name: 'Drawer',
+  render: () => <DrawerExample />,
+};
+
+// ============================================================================
+// Modal Delete
+// ============================================================================
+
+function ModalDeleteExample() {
+  const [data, setData] = React.useState(sampleUsers);
+  const [deleteUser, setDeleteUser] = React.useState<User | null>(null);
+
+  const handleDelete = () => {
+    if (deleteUser) {
+      setData((prev) => prev.filter((u) => u.id !== deleteUser.id));
+      setDeleteUser(null);
+    }
+  };
+
+  const columns: ColumnDef<User>[] = [
+    { accessorKey: 'name', header: ({ column }) => <DataTableColumnHeader column={column} title="Name" /> },
+    { accessorKey: 'email', header: ({ column }) => <DataTableColumnHeader column={column} title="Email" /> },
+    { accessorKey: 'role', header: 'Role' },
+    { accessorKey: 'status', header: 'Status', cell: ({ row }) => statusBadge(row.getValue('status')) },
+    {
+      id: 'actions',
+      cell: ({ row }) => (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="h-8 w-8 p-0">
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+            <DropdownMenuItem>Edit user</DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              className="text-destructive"
+              onClick={() => setDeleteUser(row.original)}
+            >
+              <Trash2 className="mr-2 h-4 w-4" />
+              Delete user
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <DataTable columns={columns} data={data} searchKey="name" showColumnToggle={false} />
+      <AlertDialog open={!!deleteUser} onOpenChange={(open) => !open && setDeleteUser(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete User</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete <strong>{deleteUser?.name}</strong>? This action
+              cannot be undone and will permanently remove the user and all associated data.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDelete}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}
+
+export const ModalDelete = {
+  name: 'Modal Delete',
+  render: () => <ModalDeleteExample />,
+};
+
+// ============================================================================
+// Density
+// ============================================================================
+
+function DensityExample() {
+  const [density, setDensity] = React.useState<'normal' | 'dense'>('normal');
+
   return (
     <div className="space-y-4">
-      <div className="text-sm text-muted-foreground">
-        Compact, resizable, editable, sortable, and filterable table.
+      <div className="flex items-center gap-2">
+        <Label className="text-sm">Density</Label>
+        <Select value={density} onValueChange={(v) => setDensity(v as 'normal' | 'dense')}>
+          <SelectTrigger className="h-8 w-[140px]">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="normal">Normal (48px)</SelectItem>
+            <SelectItem value="dense">Dense (32px)</SelectItem>
+          </SelectContent>
+        </Select>
       </div>
+      <p className="text-xs text-muted-foreground">
+        {density === 'normal'
+          ? 'Normal density (48px): Best for standard data displays with moderate amounts of information. Provides comfortable spacing and readability.'
+          : 'Dense density (32px): Ideal for large datasets where maximizing information density is important. Use when displaying many rows or when screen space is limited.'}
+      </p>
       <DataTable
-        columns={editableSortableColumns}
-        data={data}
-        editable
-        onCellUpdate={handleCellUpdate}
-        resizable
-        compact
+        columns={sortableColumns}
+        data={sampleUsers}
         searchKey="name"
-        searchPlaceholder="Filter tasks..."
-        showPagination
-        pageSize={10}
+        compact={density === 'dense'}
       />
     </div>
   );
 }
 
-export const FullFeatured = {
-  args: {},
-  render: () => <FullFeaturedTableExample />,
+export const Density = {
+  name: 'Density',
+  render: () => <DensityExample />,
+};
+
+// ============================================================================
+// Examples
+// ============================================================================
+
+function FullFeaturedExample() {
+  const [data, setData] = React.useState(sampleUsers);
+  const [drawerUser, setDrawerUser] = React.useState<User | null>(null);
+  const [deleteUser, setDeleteUser] = React.useState<User | null>(null);
+  const [density, setDensity] = React.useState<'normal' | 'dense'>('normal');
+
+  const handleDelete = () => {
+    if (deleteUser) {
+      setData((prev) => prev.filter((u) => u.id !== deleteUser.id));
+      setDeleteUser(null);
+    }
+  };
+
+  const handleExport = () => {
+    const header = ['Name', 'Email', 'Role', 'Department', 'Status'].join(',');
+    const rows = data.map((u) => [u.name, u.email, u.role, u.department, u.status].join(','));
+    const csv = [header, ...rows].join('\n');
+    const blob = new Blob([csv], { type: 'text/csv' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'users.csv';
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const columns: ColumnDef<User>[] = [
+    DataTableSelectColumn<User>(),
+    { accessorKey: 'name', header: ({ column }) => <DataTableColumnHeader column={column} title="Name" /> },
+    { accessorKey: 'email', header: ({ column }) => <DataTableColumnHeader column={column} title="Email" /> },
+    { accessorKey: 'role', header: ({ column }) => <DataTableColumnHeader column={column} title="Role" /> },
+    { accessorKey: 'department', header: ({ column }) => <DataTableColumnHeader column={column} title="Department" /> },
+    { accessorKey: 'status', header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />, cell: ({ row }) => statusBadge(row.getValue('status')) },
+    {
+      id: 'actions',
+      cell: ({ row }) => (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="h-8 w-8 p-0">
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+            <DropdownMenuItem onClick={() => setDrawerUser(row.original)}>
+              View details
+            </DropdownMenuItem>
+            <DropdownMenuItem>Edit user</DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="text-destructive" onClick={() => setDeleteUser(row.original)}>
+              <Trash2 className="mr-2 h-4 w-4" />
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Label className="text-sm">Density</Label>
+            <Select value={density} onValueChange={(v) => setDensity(v as 'normal' | 'dense')}>
+              <SelectTrigger className="h-8 w-[140px]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="normal">Normal (48px)</SelectItem>
+                <SelectItem value="dense">Dense (32px)</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <Button variant="outline" size="sm" onClick={handleExport}>
+            <Download className="mr-2 h-4 w-4" />
+            Export CSV
+          </Button>
+        </div>
+        <DataTable
+          columns={columns}
+          data={data}
+          searchKey="name"
+          searchPlaceholder="Search users..."
+          compact={density === 'dense'}
+          pageSize={5}
+        />
+      </div>
+
+      {/* Detail drawer */}
+      <Sheet open={!!drawerUser} onOpenChange={(open) => !open && setDrawerUser(null)}>
+        <SheetContent>
+          {drawerUser && (
+            <>
+              <SheetHeader>
+                <SheetTitle>{drawerUser.name}</SheetTitle>
+                <SheetDescription>{drawerUser.email}</SheetDescription>
+              </SheetHeader>
+              <div className="mt-6 space-y-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <p className="text-sm text-muted-foreground">Role</p>
+                    <p className="text-sm font-medium">{drawerUser.role}</p>
+                  </div>
+                  <div>
+                    <p className="text-sm text-muted-foreground">Status</p>
+                    <div className="mt-0.5">{statusBadge(drawerUser.status)}</div>
+                  </div>
+                  <div>
+                    <p className="text-sm text-muted-foreground">Department</p>
+                    <p className="text-sm font-medium">{drawerUser.department}</p>
+                  </div>
+                  <div>
+                    <p className="text-sm text-muted-foreground">Joined</p>
+                    <p className="text-sm font-medium">{drawerUser.joined}</p>
+                  </div>
+                </div>
+              </div>
+            </>
+          )}
+        </SheetContent>
+      </Sheet>
+
+      {/* Delete confirmation */}
+      <AlertDialog open={!!deleteUser} onOpenChange={(open) => !open && setDeleteUser(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete User</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete <strong>{deleteUser?.name}</strong>? This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDelete} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}
+
+export const Examples = {
+  name: 'Examples',
+  render: () => <FullFeaturedExample />,
 };
diff --git a/packages/apollo-wind/src/components/ui/dialog.stories.tsx b/packages/apollo-wind/src/components/ui/dialog.stories.tsx
index b512c03af..9c31b7d44 100644
--- a/packages/apollo-wind/src/components/ui/dialog.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/dialog.stories.tsx
@@ -1,9 +1,14 @@
 import type { Meta } from '@storybook/react-vite';
+import { ExternalLink } from 'lucide-react';
 import { Button } from './button';
+import { Input } from './input';
+import { Label } from './label';
 import {
   Dialog,
+  DialogClose,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
@@ -17,21 +22,288 @@ const meta: Meta<typeof Dialog> = {
 
 export default meta;
 
-export const Default = {
-  args: {},
+// ============================================================================
+// Basic Dialog
+// ============================================================================
+
+export const BasicDialog = {
+  name: 'Basic Dialog',
   render: () => (
     <Dialog>
       <DialogTrigger asChild>
-        <Button variant="outline">Open Dialog</Button>
+        <Button variant="outline">Edit Profile</Button>
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Are you absolutely sure?</DialogTitle>
+          <DialogTitle>Edit Profile</DialogTitle>
+          <DialogDescription>
+            Make changes to your profile here. Click save when you're done.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="name" className="text-right">Name</Label>
+            <Input id="name" defaultValue="John Doe" className="col-span-3" />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="username" className="text-right">Username</Label>
+            <Input id="username" defaultValue="@johndoe" className="col-span-3" />
+          </div>
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button>Save Changes</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+};
+
+// ============================================================================
+// Complex Dialog
+// ============================================================================
+
+export const ComplexDialog = {
+  name: 'Complex Dialog',
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Create Project</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Create New Project</DialogTitle>
+          <DialogDescription>
+            Fill in the details below to set up your new project.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <Label htmlFor="project-name">Project Name</Label>
+            <Input id="project-name" placeholder="My Awesome Project" />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="project-desc">Description</Label>
+            <Input id="project-desc" placeholder="A brief description of the project" />
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div className="grid gap-2">
+              <Label htmlFor="team">Team</Label>
+              <Input id="team" placeholder="Engineering" />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="visibility">Visibility</Label>
+              <Input id="visibility" placeholder="Private" />
+            </div>
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="tags">Tags</Label>
+            <Input id="tags" placeholder="react, typescript, design-system" />
+          </div>
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button>Create Project</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+};
+
+// ============================================================================
+// Link Dialog
+// ============================================================================
+
+export const LinkDialog = {
+  name: 'Link Dialog',
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Share Link</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Share Link</DialogTitle>
+          <DialogDescription>
+            Anyone with the link can view this document.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex items-center gap-2">
+          <Input
+            readOnly
+            defaultValue="https://app.example.com/share/abc123xyz"
+            className="flex-1"
+          />
+          <Button size="sm">Copy</Button>
+        </div>
+        <div className="flex items-center gap-4 pt-2">
+          <Button variant="outline" size="sm" className="gap-1.5">
+            <ExternalLink className="h-3.5 w-3.5" />
+            Open in Browser
+          </Button>
+          <p className="text-xs text-muted-foreground">Link expires in 7 days</p>
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Done</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+};
+
+// ============================================================================
+// No Button Dialog
+// ============================================================================
+
+export const NoButtonDialog = {
+  name: 'No Button Dialog',
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">What's New</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>What's New in v2.4</DialogTitle>
+          <DialogDescription>
+            Here's a summary of the latest updates and improvements.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-3 py-2">
+          <div className="flex items-start gap-3">
+            <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground">1</span>
+            <div>
+              <p className="text-sm font-medium">Improved Performance</p>
+              <p className="text-xs text-muted-foreground">Pages now load 40% faster with optimized data fetching.</p>
+            </div>
+          </div>
+          <div className="flex items-start gap-3">
+            <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground">2</span>
+            <div>
+              <p className="text-sm font-medium">Dark Mode Support</p>
+              <p className="text-xs text-muted-foreground">Full dark mode is now available across all pages and components.</p>
+            </div>
+          </div>
+          <div className="flex items-start gap-3">
+            <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground">3</span>
+            <div>
+              <p className="text-sm font-medium">New Export Options</p>
+              <p className="text-xs text-muted-foreground">Export your data as CSV, JSON, or PDF with a single click.</p>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  ),
+};
+
+// ============================================================================
+// Scrollable Content Dialog
+// ============================================================================
+
+export const ScrollableContentDialog = {
+  name: 'Scrollable Content Dialog',
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Terms of Service</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-lg max-h-[85vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>Terms of Service</DialogTitle>
+          <DialogDescription>
+            Please read and accept the terms of service to continue.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex-1 overflow-y-auto pr-2 -mr-2 space-y-4 py-4 text-sm text-muted-foreground">
+          <div>
+            <h4 className="mb-1 font-medium text-foreground">1. Acceptance of Terms</h4>
+            <p>By accessing and using this service, you accept and agree to be bound by these Terms of Service. If you do not agree to these terms, you should not use this service. We reserve the right to modify these terms at any time, and your continued use of the service constitutes acceptance of any changes.</p>
+          </div>
+          <div>
+            <h4 className="mb-1 font-medium text-foreground">2. Description of Service</h4>
+            <p>Our platform provides cloud-based automation tools for enterprise workflows. The service includes, but is not limited to, process automation, document understanding, and AI-powered decision making. We reserve the right to modify, suspend, or discontinue any aspect of the service at any time.</p>
+          </div>
+          <div>
+            <h4 className="mb-1 font-medium text-foreground">3. User Accounts</h4>
+            <p>You are responsible for maintaining the confidentiality of your account credentials and for all activities that occur under your account. You must immediately notify us of any unauthorized use of your account or any other breach of security. We cannot and will not be liable for any loss or damage arising from your failure to comply with this requirement.</p>
+          </div>
+          <div>
+            <h4 className="mb-1 font-medium text-foreground">4. Privacy Policy</h4>
+            <p>Your use of the service is also governed by our Privacy Policy, which is incorporated into these terms by reference. Please review our Privacy Policy to understand our practices regarding the collection, use, and disclosure of your personal information.</p>
+          </div>
+          <div>
+            <h4 className="mb-1 font-medium text-foreground">5. Intellectual Property</h4>
+            <p>All content, features, and functionality of the service are owned by us, our licensors, or other providers. These materials are protected by copyright, trademark, patent, and other intellectual property laws. You may not reproduce, distribute, modify, or create derivative works without our express written consent.</p>
+          </div>
+          <div>
+            <h4 className="mb-1 font-medium text-foreground">6. Limitation of Liability</h4>
+            <p>In no event shall we be liable for any indirect, incidental, special, consequential, or punitive damages, including without limitation, loss of profits, data, use, goodwill, or other intangible losses, resulting from your access to or use of or inability to access or use the service.</p>
+          </div>
+          <div>
+            <h4 className="mb-1 font-medium text-foreground">7. Governing Law</h4>
+            <p>These terms shall be governed by and construed in accordance with the laws of the jurisdiction in which our company is incorporated, without regard to its conflict of law provisions. Any disputes arising from these terms shall be resolved in the courts of that jurisdiction.</p>
+          </div>
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Decline</Button>
+          </DialogClose>
+          <Button>Accept</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+};
+
+// ============================================================================
+// Sticky Footer Dialog
+// ============================================================================
+
+export const StickyFooterDialog = {
+  name: 'Sticky Footer Dialog',
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Invite Members</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-lg max-h-[85vh] flex flex-col gap-0 p-0">
+        <DialogHeader className="px-6 pt-6 pb-4">
+          <DialogTitle>Invite Team Members</DialogTitle>
           <DialogDescription>
-            This action cannot be undone. This will permanently delete your account and remove your
-            data from our servers.
+            Add people to your workspace. They will receive an email invitation.
           </DialogDescription>
         </DialogHeader>
+        <div className="flex-1 overflow-y-auto px-6 space-y-4">
+          {[
+            { name: 'Jane Cooper', email: 'jane@company.com', role: 'Admin' },
+            { name: 'Alex Morgan', email: 'alex@company.com', role: 'Editor' },
+            { name: 'Sam Wilson', email: 'sam@company.com', role: 'Viewer' },
+            { name: 'Taylor Kim', email: 'taylor@company.com', role: 'Editor' },
+            { name: 'Jordan Lee', email: 'jordan@company.com', role: 'Viewer' },
+            { name: 'Casey Brown', email: 'casey@company.com', role: 'Editor' },
+            { name: 'Riley Chen', email: 'riley@company.com', role: 'Admin' },
+            { name: 'Morgan Davis', email: 'morgan@company.com', role: 'Viewer' },
+          ].map((person) => (
+            <div key={person.email} className="flex items-center justify-between rounded-md border p-3">
+              <div>
+                <p className="text-sm font-medium">{person.name}</p>
+                <p className="text-xs text-muted-foreground">{person.email}</p>
+              </div>
+              <span className="text-xs rounded-full border px-2 py-0.5 text-muted-foreground">{person.role}</span>
+            </div>
+          ))}
+        </div>
+        <div className="border-t px-6 py-4 flex items-center gap-2">
+          <Input placeholder="Enter email address" className="flex-1" />
+          <Button>Send Invite</Button>
+        </div>
       </DialogContent>
     </Dialog>
   ),
diff --git a/packages/apollo-wind/src/components/ui/drawer.stories.tsx b/packages/apollo-wind/src/components/ui/drawer.stories.tsx
deleted file mode 100644
index dd83a99e1..000000000
--- a/packages/apollo-wind/src/components/ui/drawer.stories.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import type { Meta } from '@storybook/react-vite';
-import { Button } from './button';
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from './drawer';
-
-const meta: Meta<typeof Drawer> = {
-  title: 'Components/Overlays/Drawer',
-  component: Drawer,
-  tags: ['autodocs'],
-};
-
-export default meta;
-
-export const Default = {
-  args: {},
-  render: () => (
-    <Drawer>
-      <DrawerTrigger asChild>
-        <Button variant="outline">Open Drawer</Button>
-      </DrawerTrigger>
-      <DrawerContent>
-        <DrawerHeader>
-          <DrawerTitle>Edit profile</DrawerTitle>
-          <DrawerDescription>
-            Make changes to your profile here. Click save when you're done.
-          </DrawerDescription>
-        </DrawerHeader>
-        <div className="p-4">
-          <p className="text-sm text-muted-foreground">
-            Drawer content goes here. This is a mobile-friendly bottom sheet component.
-          </p>
-        </div>
-        <DrawerFooter>
-          <Button>Save changes</Button>
-          <DrawerClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DrawerClose>
-        </DrawerFooter>
-      </DrawerContent>
-    </Drawer>
-  ),
-};
-
-export const WithForm = {
-  args: {},
-  render: () => (
-    <Drawer>
-      <DrawerTrigger asChild>
-        <Button variant="outline">Edit Settings</Button>
-      </DrawerTrigger>
-      <DrawerContent>
-        <DrawerHeader>
-          <DrawerTitle>Settings</DrawerTitle>
-          <DrawerDescription>Update your application settings.</DrawerDescription>
-        </DrawerHeader>
-        <div className="p-4 space-y-4">
-          <div className="space-y-2">
-            <label htmlFor="name" className="text-sm font-medium">
-              Display Name
-            </label>
-            <input
-              id="name"
-              className="w-full rounded-md border px-3 py-2"
-              placeholder="Enter your name"
-            />
-          </div>
-          <div className="space-y-2">
-            <label htmlFor="email" className="text-sm font-medium">
-              Email
-            </label>
-            <input
-              id="email"
-              type="email"
-              className="w-full rounded-md border px-3 py-2"
-              placeholder="Enter your email"
-            />
-          </div>
-        </div>
-        <DrawerFooter>
-          <Button>Save</Button>
-          <DrawerClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DrawerClose>
-        </DrawerFooter>
-      </DrawerContent>
-    </Drawer>
-  ),
-};
diff --git a/packages/apollo-wind/src/components/ui/drawer.test.tsx b/packages/apollo-wind/src/components/ui/drawer.test.tsx
deleted file mode 100644
index 1d7352e01..000000000
--- a/packages/apollo-wind/src/components/ui/drawer.test.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { axe } from 'jest-axe';
-import { describe, expect, it, vi } from 'vitest';
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from './drawer';
-
-describe('Drawer', () => {
-  const DrawerExample = () => (
-    <Drawer>
-      <DrawerTrigger>Open Drawer</DrawerTrigger>
-      <DrawerContent>
-        <DrawerHeader>
-          <DrawerTitle>Drawer Title</DrawerTitle>
-          <DrawerDescription>This is a drawer description.</DrawerDescription>
-        </DrawerHeader>
-        <div>Drawer content goes here</div>
-        <DrawerFooter>
-          <DrawerClose>Close</DrawerClose>
-        </DrawerFooter>
-      </DrawerContent>
-    </Drawer>
-  );
-
-  describe('rendering', () => {
-    it('renders trigger without crashing', () => {
-      render(<DrawerExample />);
-      expect(screen.getByRole('button', { name: 'Open Drawer' })).toBeInTheDocument();
-    });
-
-    it('opens drawer when trigger is clicked', async () => {
-      const user = userEvent.setup();
-      render(<DrawerExample />);
-
-      const trigger = screen.getByRole('button', { name: 'Open Drawer' });
-      await user.click(trigger);
-
-      await waitFor(() => {
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-      });
-    });
-
-    it('displays drawer title', async () => {
-      const user = userEvent.setup();
-      render(<DrawerExample />);
-
-      await user.click(screen.getByRole('button', { name: 'Open Drawer' }));
-
-      await waitFor(() => {
-        expect(screen.getByText('Drawer Title')).toBeInTheDocument();
-      });
-    });
-
-    it('displays drawer description', async () => {
-      const user = userEvent.setup();
-      render(<DrawerExample />);
-
-      await user.click(screen.getByRole('button', { name: 'Open Drawer' }));
-
-      await waitFor(() => {
-        expect(screen.getByText('This is a drawer description.')).toBeInTheDocument();
-      });
-    });
-
-    it('displays drawer content', async () => {
-      const user = userEvent.setup();
-      render(<DrawerExample />);
-
-      await user.click(screen.getByRole('button', { name: 'Open Drawer' }));
-
-      await waitFor(() => {
-        expect(screen.getByText('Drawer content goes here')).toBeInTheDocument();
-      });
-    });
-  });
-
-  describe('accessibility', () => {
-    it('has no accessibility violations when closed', async () => {
-      const { container } = render(<DrawerExample />);
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    });
-
-    it('has no accessibility violations when open', async () => {
-      const user = userEvent.setup();
-      const { container } = render(<DrawerExample />);
-
-      await user.click(screen.getByRole('button', { name: 'Open Drawer' }));
-
-      await waitFor(() => {
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-      });
-
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    });
-
-    it('has proper ARIA attributes', async () => {
-      const user = userEvent.setup();
-      render(<DrawerExample />);
-
-      await user.click(screen.getByRole('button', { name: 'Open Drawer' }));
-
-      await waitFor(() => {
-        const dialog = screen.getByRole('dialog');
-        expect(dialog).toHaveAttribute('aria-describedby');
-        expect(dialog).toHaveAttribute('aria-labelledby');
-      });
-    });
-  });
-
-  describe('interactions', () => {
-    it('supports controlled mode', async () => {
-      const user = userEvent.setup();
-      const handleOpenChange = vi.fn();
-      const { rerender } = render(
-        <Drawer open={false} onOpenChange={handleOpenChange}>
-          <DrawerTrigger>Open</DrawerTrigger>
-          <DrawerContent>
-            <DrawerTitle>Title</DrawerTitle>
-            <DrawerDescription>Description</DrawerDescription>
-          </DrawerContent>
-        </Drawer>
-      );
-
-      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-
-      await user.click(screen.getByRole('button', { name: 'Open' }));
-      expect(handleOpenChange).toHaveBeenCalledWith(true);
-
-      rerender(
-        <Drawer open={true} onOpenChange={handleOpenChange}>
-          <DrawerTrigger>Open</DrawerTrigger>
-          <DrawerContent>
-            <DrawerTitle>Title</DrawerTitle>
-            <DrawerDescription>Description</DrawerDescription>
-          </DrawerContent>
-        </Drawer>
-      );
-
-      await waitFor(() => {
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-      });
-    });
-  });
-
-  describe('custom className', () => {
-    it('applies custom className to content', async () => {
-      const user = userEvent.setup();
-      render(
-        <Drawer>
-          <DrawerTrigger>Open</DrawerTrigger>
-          <DrawerContent className="custom-drawer">
-            <DrawerTitle>Title</DrawerTitle>
-            <DrawerDescription>Description</DrawerDescription>
-          </DrawerContent>
-        </Drawer>
-      );
-
-      await user.click(screen.getByRole('button', { name: 'Open' }));
-
-      await waitFor(() => {
-        const dialog = screen.getByRole('dialog');
-        expect(dialog).toHaveClass('custom-drawer');
-      });
-    });
-  });
-});
diff --git a/packages/apollo-wind/src/components/ui/dropdown-menu.stories.tsx b/packages/apollo-wind/src/components/ui/dropdown-menu.stories.tsx
index 95ac86307..97d7a28d3 100644
--- a/packages/apollo-wind/src/components/ui/dropdown-menu.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/dropdown-menu.stories.tsx
@@ -1,37 +1,447 @@
+import { useState } from 'react';
 import type { Meta } from '@storybook/react-vite';
+import {
+  ChevronDown,
+  Copy,
+  Download,
+  Edit,
+  ExternalLink,
+  FileText,
+  LogOut,
+  MoreHorizontal,
+  Pencil,
+  Settings,
+  Share2,
+  Star,
+  Trash2,
+  User,
+  CreditCard,
+  Users,
+  HelpCircle,
+  Moon,
+  Sun,
+} from 'lucide-react';
 import { Button } from './button';
 import {
   DropdownMenu,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from './dropdown-menu';
 
 const meta: Meta<typeof DropdownMenu> = {
-  title: 'Components/Overlays/Dropdown Menu',
+  title: 'Components/Overlays/Dropdown',
   component: DropdownMenu,
   tags: ['autodocs'],
 };
 
 export default meta;
 
-export const Default = {
-  args: {},
+// ============================================================================
+// Basic Dropdown
+// ============================================================================
+
+export const BasicDropdown = {
+  name: 'Basic Dropdown',
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">
+          Options
+          <ChevronDown className="ml-2 h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-48">
+        <DropdownMenuItem>New File</DropdownMenuItem>
+        <DropdownMenuItem>New Folder</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>Import</DropdownMenuItem>
+        <DropdownMenuItem>Export</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>Preferences</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+};
+
+// ============================================================================
+// Dropdown with Actions
+// ============================================================================
+
+export const DropdownWithActions = {
+  name: 'Dropdown with Actions',
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">
+          Actions
+          <ChevronDown className="ml-2 h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-52">
+        <DropdownMenuItem>
+          <Pencil className="mr-2 h-4 w-4" />
+          Edit
+          <DropdownMenuShortcut>⌘E</DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <Copy className="mr-2 h-4 w-4" />
+          Duplicate
+          <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <Star className="mr-2 h-4 w-4" />
+          Add to Favorites
+        </DropdownMenuItem>
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>
+            <Share2 className="mr-2 h-4 w-4" />
+            Share
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent className="w-44">
+            <DropdownMenuItem>Copy Link</DropdownMenuItem>
+            <DropdownMenuItem>Email</DropdownMenuItem>
+            <DropdownMenuItem>Slack</DropdownMenuItem>
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+        <DropdownMenuItem>
+          <Download className="mr-2 h-4 w-4" />
+          Download
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem className="text-destructive focus:text-destructive">
+          <Trash2 className="mr-2 h-4 w-4" />
+          Delete
+          <DropdownMenuShortcut>⌫</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+};
+
+// ============================================================================
+// Dropdown with Checkboxes
+// ============================================================================
+
+export const DropdownWithCheckboxes = {
+  name: 'Dropdown with Checkboxes',
+  render: () => {
+    const [showStatus, setShowStatus] = useState(true);
+    const [showActivity, setShowActivity] = useState(true);
+    const [showTimestamps, setShowTimestamps] = useState(false);
+    const [showTags, setShowTags] = useState(false);
+
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline">
+            Columns
+            <ChevronDown className="ml-2 h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-48">
+          <DropdownMenuLabel>Toggle Columns</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuCheckboxItem checked disabled>
+            Name
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem checked={showStatus} onCheckedChange={setShowStatus}>
+            Status
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem checked={showActivity} onCheckedChange={setShowActivity}>
+            Activity
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem checked={showTimestamps} onCheckedChange={setShowTimestamps}>
+            Timestamps
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem checked={showTags} onCheckedChange={setShowTags}>
+            Tags
+          </DropdownMenuCheckboxItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  },
+};
+
+// ============================================================================
+// Dropdown for Profile
+// ============================================================================
+
+export const DropdownForProfile = {
+  name: 'Dropdown for Profile',
   render: () => (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline">Open Menu</Button>
+        <Button variant="ghost" className="gap-2">
+          <div className="flex h-7 w-7 items-center justify-center rounded-full bg-primary text-xs font-medium text-primary-foreground">
+            JD
+          </div>
+          <span className="text-sm">John Doe</span>
+          <ChevronDown className="h-4 w-4 text-muted-foreground" />
+        </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+      <DropdownMenuContent className="w-56" align="end">
+        <DropdownMenuLabel className="font-normal">
+          <div className="flex flex-col space-y-1">
+            <p className="text-sm font-medium">John Doe</p>
+            <p className="text-xs text-muted-foreground">john.doe@company.com</p>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <User className="mr-2 h-4 w-4" />
+            Profile
+            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <CreditCard className="mr-2 h-4 w-4" />
+            Billing
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Settings className="mr-2 h-4 w-4" />
+            Settings
+            <DropdownMenuShortcut>⌘,</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
         <DropdownMenuSeparator />
-        <DropdownMenuItem>Profile</DropdownMenuItem>
-        <DropdownMenuItem>Billing</DropdownMenuItem>
-        <DropdownMenuItem>Team</DropdownMenuItem>
-        <DropdownMenuItem>Subscription</DropdownMenuItem>
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <Users className="mr-2 h-4 w-4" />
+            Team
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <HelpCircle className="mr-2 h-4 w-4" />
+            Help & Support
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <LogOut className="mr-2 h-4 w-4" />
+          Log Out
+          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+        </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   ),
 };
+
+// ============================================================================
+// Usage Examples — File Actions
+// ============================================================================
+
+export const FileActions = {
+  name: 'File Actions',
+  render: () => {
+    const files = [
+      { name: 'Q4 Revenue Report.pdf', type: 'PDF', size: '2.4 MB' },
+      { name: 'Brand Guidelines.fig', type: 'Figma', size: '14.1 MB' },
+      { name: 'User Research.xlsx', type: 'Excel', size: '890 KB' },
+    ];
+
+    return (
+      <div className="w-[500px] rounded-lg border">
+        {files.map((file, i) => (
+          <div
+            key={file.name}
+            className={`flex items-center justify-between px-4 py-3 ${i < files.length - 1 ? 'border-b' : ''}`}
+          >
+            <div className="flex items-center gap-3">
+              <FileText className="h-4 w-4 text-muted-foreground" />
+              <div>
+                <p className="text-sm font-medium">{file.name}</p>
+                <p className="text-xs text-muted-foreground">{file.type} · {file.size}</p>
+              </div>
+            </div>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon" className="h-8 w-8">
+                  <MoreHorizontal className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-48">
+                <DropdownMenuItem>
+                  <ExternalLink className="mr-2 h-4 w-4" />
+                  Open
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Download className="mr-2 h-4 w-4" />
+                  Download
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Edit className="mr-2 h-4 w-4" />
+                  Rename
+                </DropdownMenuItem>
+                <DropdownMenuSub>
+                  <DropdownMenuSubTrigger>
+                    <Share2 className="mr-2 h-4 w-4" />
+                    Share
+                  </DropdownMenuSubTrigger>
+                  <DropdownMenuSubContent className="w-40">
+                    <DropdownMenuItem>Copy Link</DropdownMenuItem>
+                    <DropdownMenuItem>Email</DropdownMenuItem>
+                    <DropdownMenuItem>Slack</DropdownMenuItem>
+                  </DropdownMenuSubContent>
+                </DropdownMenuSub>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem className="text-destructive focus:text-destructive">
+                  <Trash2 className="mr-2 h-4 w-4" />
+                  Delete
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        ))}
+      </div>
+    );
+  },
+};
+
+// ============================================================================
+// Usage Examples — User Menu
+// ============================================================================
+
+export const UserMenu = {
+  name: 'User Menu',
+  render: () => {
+    const [theme, setTheme] = useState<'light' | 'dark'>('dark');
+
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" size="icon" className="rounded-full h-9 w-9">
+            <div className="flex h-7 w-7 items-center justify-center rounded-full bg-primary text-xs font-medium text-primary-foreground">
+              JD
+            </div>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-56" align="end">
+          <DropdownMenuLabel className="font-normal">
+            <div className="flex items-center gap-3">
+              <div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary text-sm font-medium text-primary-foreground">
+                JD
+              </div>
+              <div className="flex flex-col">
+                <p className="text-sm font-medium">John Doe</p>
+                <p className="text-xs text-muted-foreground">Administrator</p>
+              </div>
+            </div>
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <User className="mr-2 h-4 w-4" />
+            My Profile
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Settings className="mr-2 h-4 w-4" />
+            Account Settings
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuCheckboxItem
+            checked={theme === 'dark'}
+            onCheckedChange={(checked) => setTheme(checked ? 'dark' : 'light')}
+          >
+            {theme === 'dark' ? (
+              <Moon className="mr-2 h-4 w-4" />
+            ) : (
+              <Sun className="mr-2 h-4 w-4" />
+            )}
+            Dark Mode
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <HelpCircle className="mr-2 h-4 w-4" />
+            Help Center
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <LogOut className="mr-2 h-4 w-4" />
+            Sign Out
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  },
+};
+
+// ============================================================================
+// Usage Examples — Data Table
+// ============================================================================
+
+export const DataTable = {
+  name: 'Data Table',
+  render: () => {
+    const rows = [
+      { id: 'PRJ-001', name: 'Website Redesign', status: 'Active', owner: 'Jane C.' },
+      { id: 'PRJ-002', name: 'Mobile App v2', status: 'Paused', owner: 'Alex M.' },
+      { id: 'PRJ-003', name: 'API Migration', status: 'Active', owner: 'Sam W.' },
+      { id: 'PRJ-004', name: 'Design System', status: 'Review', owner: 'Taylor K.' },
+    ];
+
+    return (
+      <div className="w-[600px] rounded-lg border">
+        {/* Header */}
+        <div className="flex items-center gap-4 border-b bg-muted/40 px-4 py-2.5 text-sm font-medium text-muted-foreground">
+          <span className="w-[80px]">ID</span>
+          <span className="flex-1">Project</span>
+          <span className="w-[80px]">Status</span>
+          <span className="w-[80px]">Owner</span>
+          <span className="w-[40px]" />
+        </div>
+        {/* Rows */}
+        {rows.map((row) => (
+          <div key={row.id} className="flex items-center gap-4 border-b last:border-0 px-4 py-2.5 text-sm">
+            <span className="w-[80px] tabular-nums text-muted-foreground">{row.id}</span>
+            <span className="flex-1 font-medium">{row.name}</span>
+            <span className="w-[80px]">
+              <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
+                row.status === 'Active' ? 'bg-primary/10 text-primary' :
+                row.status === 'Paused' ? 'bg-muted text-muted-foreground' :
+                'bg-yellow-500/10 text-yellow-600'
+              }`}>
+                {row.status}
+              </span>
+            </span>
+            <span className="w-[80px] text-muted-foreground">{row.owner}</span>
+            <span className="w-[40px]">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" size="icon" className="h-7 w-7">
+                    <MoreHorizontal className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-44">
+                  <DropdownMenuItem>
+                    <ExternalLink className="mr-2 h-4 w-4" />
+                    Open
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <Edit className="mr-2 h-4 w-4" />
+                    Edit
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <Copy className="mr-2 h-4 w-4" />
+                    Duplicate
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem className="text-destructive focus:text-destructive">
+                    <Trash2 className="mr-2 h-4 w-4" />
+                    Delete
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </span>
+          </div>
+        ))}
+      </div>
+    );
+  },
+};
diff --git a/packages/apollo-wind/src/components/ui/empty-state.stories.tsx b/packages/apollo-wind/src/components/ui/empty-state.stories.tsx
index b8cc9f32b..84190177e 100644
--- a/packages/apollo-wind/src/components/ui/empty-state.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/empty-state.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { FileX, Inbox, Search, ShoppingCart, Users } from 'lucide-react';
+import { FileX, Inbox, Search, ShoppingCart, Users, AlertTriangle } from 'lucide-react';
 import { EmptyState } from './empty-state';
+import { Button } from './button';
 
 const meta = {
   title: 'Components/Feedback/Empty State',
@@ -14,6 +15,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+// ============================================================================
+// Basic examples
+// ============================================================================
+
 export const Default: Story = {
   args: {
     title: 'No data found',
@@ -100,3 +105,82 @@ export const LongDescription: Story = {
     },
   },
 };
+
+// ============================================================================
+// Status code examples
+// ============================================================================
+
+/** Displays a prominent status code above the title — useful for error pages. */
+export const WithStatusCode: Story = {
+  name: 'With Status Code',
+  args: {
+    code: '404',
+    title: "Uh oh! Can't find it",
+    description:
+      "The page you're looking for may have been removed, had its name changed, or is temporarily unavailable.",
+  },
+};
+
+// ============================================================================
+// Children-based actions (composable pattern)
+// ============================================================================
+
+/** When more than two actions are needed, pass Button components as children. */
+export const ComposableActions: Story = {
+  name: 'Composable Actions',
+  render: () => (
+    <EmptyState
+      icon={<AlertTriangle className="h-10 w-10 text-muted-foreground" />}
+      title="No Projects Yet"
+      description="You haven't created any projects yet. Get started by creating your first project."
+    >
+      <Button>Create project</Button>
+      <Button variant="outline">Import project</Button>
+      <Button variant="outline">Learn More</Button>
+    </EmptyState>
+  ),
+};
+
+// ============================================================================
+// Rich media (video / illustration)
+// ============================================================================
+
+const VIMEO_SRC =
+  'https://player.vimeo.com/video/1145746394?h=3c42d6f39b&autoplay=1&muted=1&loop=1&background=1';
+
+function VideoCircle({ size = 180 }: { size?: number }) {
+  const iframeSize = size + 120;
+  const offset = -(iframeSize - size) / 2;
+
+  return (
+    <div
+      className="overflow-hidden rounded-full border border-border bg-muted"
+      style={{ width: size, height: size }}
+    >
+      <iframe
+        src={VIMEO_SRC}
+        width={iframeSize}
+        height={iframeSize}
+        allow="autoplay"
+        title="Decorative animation"
+        className="pointer-events-none border-0"
+        style={{ marginTop: offset, marginLeft: offset, transform: 'scale(1.15)' }}
+      />
+    </div>
+  );
+}
+
+/** The icon prop accepts any ReactNode — including rich media like videos or illustrations. */
+export const WithVideo: Story = {
+  name: 'With Video',
+  render: () => (
+    <EmptyState
+      icon={<VideoCircle />}
+      code="404"
+      title="Uh oh! Can't find it"
+      description="The page you're looking for may have been removed, had its name changed, or is temporarily unavailable."
+    >
+      <Button>Take me home</Button>
+    </EmptyState>
+  ),
+};
diff --git a/packages/apollo-wind/src/components/ui/empty-state.tsx b/packages/apollo-wind/src/components/ui/empty-state.tsx
index 24fa0d1ff..0bf740a52 100644
--- a/packages/apollo-wind/src/components/ui/empty-state.tsx
+++ b/packages/apollo-wind/src/components/ui/empty-state.tsx
@@ -3,13 +3,20 @@ import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/index';
 
 export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Optional visual element displayed above the content (icon, illustration, video, etc.) */
   icon?: React.ReactNode;
+  /** Optional large status code displayed above the title (e.g. "404", "500") */
+  code?: string;
+  /** Primary heading — always visible */
   title: string;
+  /** Optional body text below the title */
   description?: string;
+  /** Simple primary action — ignored when children are provided */
   action?: {
     label: string;
     onClick: () => void;
   };
+  /** Simple secondary action — ignored when children are provided */
   secondaryAction?: {
     label: string;
     onClick: () => void;
@@ -17,7 +24,9 @@ export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
-  ({ icon, title, description, action, secondaryAction, className, ...props }, ref) => {
+  ({ icon, code, title, description, action, secondaryAction, className, children, ...props }, ref) => {
+    const hasSimpleActions = !children && (action || secondaryAction);
+
     return (
       <div
         ref={ref}
@@ -25,18 +34,21 @@ const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
         {...props}
       >
         {icon && (
-          <div className="mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-muted text-muted-foreground">
+          <div className="mb-6 flex items-center justify-center">
             {icon}
           </div>
         )}
+        {code && (
+          <h1 className="text-[40px] font-bold tracking-[-0.8px] leading-none mb-4">{code}</h1>
+        )}
         <h3 className="text-xl font-semibold tracking-tight">{title}</h3>
         {description && (
-          <p className="mt-3 mb-6 max-w-md text-sm text-muted-foreground leading-relaxed">
+          <p className="mt-3 max-w-md text-sm text-muted-foreground leading-relaxed">
             {description}
           </p>
         )}
-        {(action || secondaryAction) && (
-          <div className="flex flex-wrap items-center justify-center gap-2">
+        {hasSimpleActions && (
+          <div className="mt-6 flex flex-wrap items-center justify-center gap-2">
             {action && <Button onClick={action.onClick}>{action.label}</Button>}
             {secondaryAction && (
               <Button variant="outline" onClick={secondaryAction.onClick}>
@@ -45,6 +57,11 @@ const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
             )}
           </div>
         )}
+        {children && (
+          <div className="mt-6 flex flex-wrap items-center justify-center gap-2">
+            {children}
+          </div>
+        )}
       </div>
     );
   }
diff --git a/packages/apollo-wind/src/components/ui/hover-card.stories.tsx b/packages/apollo-wind/src/components/ui/hover-card.stories.tsx
index 8bbceed8d..5a4f4341e 100644
--- a/packages/apollo-wind/src/components/ui/hover-card.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/hover-card.stories.tsx
@@ -1,7 +1,17 @@
 import type { Meta } from '@storybook/react-vite';
+import {
+  Calendar,
+  ExternalLink,
+  FileText,
+  GitBranch,
+  MapPin,
+  MoreHorizontal,
+  Star,
+  Users,
+} from 'lucide-react';
 import { Button } from './button';
 import { HoverCard, HoverCardContent, HoverCardTrigger } from './hover-card';
-import { Row, Column } from './layout';
+import { Separator } from './separator';
 
 const meta: Meta<typeof HoverCard> = {
   title: 'Components/Overlays/Hover Card',
@@ -11,24 +21,312 @@ const meta: Meta<typeof HoverCard> = {
 
 export default meta;
 
-export const Default = {
-  args: {},
+// ============================================================================
+// Basic
+// ============================================================================
+
+export const Basic = {
+  name: 'Basic',
   render: () => (
     <HoverCard>
       <HoverCardTrigger asChild>
-        <Button variant="link">@nextjs</Button>
+        <Button variant="link">Hover here</Button>
       </HoverCardTrigger>
       <HoverCardContent className="w-80">
-        <Row justify="between" gap={4}>
-          <Column gap={1}>
-            <h4 className="text-sm font-semibold">@nextjs</h4>
-            <p className="text-sm">The React Framework – created and maintained by @vercel.</p>
-            <Row align="center" className="pt-2">
-              <span className="text-xs text-muted-foreground">Joined December 2021</span>
-            </Row>
-          </Column>
-        </Row>
+        <div className="flex gap-4">
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary text-sm font-bold text-primary-foreground">
+            AP
+          </div>
+          <div className="space-y-1">
+            <h4 className="text-sm font-semibold">Apollo Design System</h4>
+            <p className="text-sm text-muted-foreground">
+              Open-source component library for UiPath — built with Radix UI and Tailwind CSS.
+            </p>
+            <div className="flex items-center gap-1 pt-1">
+              <Calendar className="h-3 w-3 text-muted-foreground" />
+              <span className="text-xs text-muted-foreground">Created January 2025</span>
+            </div>
+          </div>
+        </div>
       </HoverCardContent>
     </HoverCard>
   ),
 };
+
+// ============================================================================
+// Sides
+// ============================================================================
+
+export const Sides = {
+  name: 'Sides',
+  render: () => (
+    <div className="flex items-center justify-center gap-8 py-20">
+      <HoverCard>
+        <HoverCardTrigger asChild>
+          <Button variant="outline" size="sm">Top</Button>
+        </HoverCardTrigger>
+        <HoverCardContent side="top" className="w-60">
+          <p className="text-sm">This card opens above the trigger element.</p>
+        </HoverCardContent>
+      </HoverCard>
+
+      <HoverCard>
+        <HoverCardTrigger asChild>
+          <Button variant="outline" size="sm">Bottom</Button>
+        </HoverCardTrigger>
+        <HoverCardContent side="bottom" className="w-60">
+          <p className="text-sm">This card opens below the trigger element.</p>
+        </HoverCardContent>
+      </HoverCard>
+
+      <HoverCard>
+        <HoverCardTrigger asChild>
+          <Button variant="outline" size="sm">Left</Button>
+        </HoverCardTrigger>
+        <HoverCardContent side="left" className="w-60">
+          <p className="text-sm">This card opens to the left of the trigger element.</p>
+        </HoverCardContent>
+      </HoverCard>
+
+      <HoverCard>
+        <HoverCardTrigger asChild>
+          <Button variant="outline" size="sm">Right</Button>
+        </HoverCardTrigger>
+        <HoverCardContent side="right" className="w-60">
+          <p className="text-sm">This card opens to the right of the trigger element.</p>
+        </HoverCardContent>
+      </HoverCard>
+    </div>
+  ),
+};
+
+// ============================================================================
+// Examples — Panels
+// ============================================================================
+
+export const Panels = {
+  name: 'Panels',
+  render: () => (
+    <div className="flex gap-6">
+      {/* User card */}
+      <HoverCard>
+        <HoverCardTrigger asChild>
+          <button type="button" className="flex items-center gap-2 rounded-md border px-3 py-2 text-sm hover:bg-accent transition-colors">
+            <div className="flex h-6 w-6 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground">
+              JC
+            </div>
+            <span>Jane Cooper</span>
+          </button>
+        </HoverCardTrigger>
+        <HoverCardContent className="w-72">
+          <div className="flex gap-3">
+            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary text-sm font-medium text-primary-foreground">
+              JC
+            </div>
+            <div className="space-y-1">
+              <h4 className="text-sm font-semibold">Jane Cooper</h4>
+              <p className="text-xs text-muted-foreground">Senior Engineer · Platform Team</p>
+            </div>
+          </div>
+          <Separator className="my-3" />
+          <div className="grid grid-cols-2 gap-2 text-xs">
+            <div className="flex items-center gap-1.5 text-muted-foreground">
+              <MapPin className="h-3 w-3" />
+              San Francisco, CA
+            </div>
+            <div className="flex items-center gap-1.5 text-muted-foreground">
+              <Calendar className="h-3 w-3" />
+              Joined Jan 2023
+            </div>
+            <div className="flex items-center gap-1.5 text-muted-foreground">
+              <Users className="h-3 w-3" />
+              12 projects
+            </div>
+            <div className="flex items-center gap-1.5 text-muted-foreground">
+              <Star className="h-3 w-3" />
+              4.9 rating
+            </div>
+          </div>
+        </HoverCardContent>
+      </HoverCard>
+
+      {/* Repo card */}
+      <HoverCard>
+        <HoverCardTrigger asChild>
+          <button type="button" className="flex items-center gap-2 rounded-md border px-3 py-2 text-sm hover:bg-accent transition-colors">
+            <GitBranch className="h-4 w-4 text-muted-foreground" />
+            <span>apollo-ui</span>
+          </button>
+        </HoverCardTrigger>
+        <HoverCardContent className="w-72">
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <h4 className="text-sm font-semibold">uipath/apollo-ui</h4>
+              <span className="rounded-full border px-2 py-0.5 text-[10px] text-muted-foreground">Public</span>
+            </div>
+            <p className="text-xs text-muted-foreground">
+              Open-source design system for UiPath. Unified component library for React and Web Components.
+            </p>
+            <Separator />
+            <div className="flex items-center gap-4 text-xs text-muted-foreground">
+              <span className="flex items-center gap-1">
+                <span className="h-2.5 w-2.5 rounded-full bg-blue-500" />
+                TypeScript
+              </span>
+              <span className="flex items-center gap-1">
+                <Star className="h-3 w-3" />
+                248
+              </span>
+              <span className="flex items-center gap-1">
+                <GitBranch className="h-3 w-3" />
+                42
+              </span>
+            </div>
+          </div>
+        </HoverCardContent>
+      </HoverCard>
+    </div>
+  ),
+};
+
+// ============================================================================
+// Examples — Data Tables
+// ============================================================================
+
+export const DataTables = {
+  name: 'Data Tables',
+  render: () => {
+    const rows = [
+      { id: 'PRJ-001', name: 'Website Redesign', owner: 'Jane C.', status: 'Active', updated: 'Feb 10', desc: 'Complete overhaul of the marketing website with new brand guidelines and improved UX.' },
+      { id: 'PRJ-002', name: 'Mobile App v2', owner: 'Alex M.', status: 'Paused', updated: 'Feb 8', desc: 'Second major version of the iOS and Android apps with offline support.' },
+      { id: 'PRJ-003', name: 'API Migration', owner: 'Sam W.', status: 'Active', updated: 'Feb 5', desc: 'Migrate REST endpoints to GraphQL with backward compatibility layer.' },
+    ];
+
+    return (
+      <div className="w-[550px] rounded-lg border">
+        {/* Header */}
+        <div className="flex items-center gap-4 border-b bg-muted/40 px-4 py-2.5 text-sm font-medium text-muted-foreground">
+          <span className="w-[70px]">ID</span>
+          <span className="flex-1">Project</span>
+          <span className="w-[70px]">Owner</span>
+          <span className="w-[70px]">Status</span>
+        </div>
+        {/* Rows */}
+        {rows.map((row) => (
+          <div key={row.id} className="flex items-center gap-4 border-b last:border-0 px-4 py-2.5 text-sm">
+            <span className="w-[70px] tabular-nums text-muted-foreground">{row.id}</span>
+            <span className="flex-1">
+              <HoverCard>
+                <HoverCardTrigger asChild>
+                  <button type="button" className="font-medium underline-offset-4 hover:underline text-left">
+                    {row.name}
+                  </button>
+                </HoverCardTrigger>
+                <HoverCardContent className="w-72" side="right">
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <h4 className="text-sm font-semibold">{row.name}</h4>
+                      <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${
+                        row.status === 'Active' ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'
+                      }`}>
+                        {row.status}
+                      </span>
+                    </div>
+                    <p className="text-xs text-muted-foreground">{row.desc}</p>
+                    <Separator />
+                    <div className="flex items-center justify-between text-xs text-muted-foreground">
+                      <span>Owner: {row.owner}</span>
+                      <span>Updated {row.updated}</span>
+                    </div>
+                  </div>
+                </HoverCardContent>
+              </HoverCard>
+            </span>
+            <span className="w-[70px] text-muted-foreground">{row.owner}</span>
+            <span className="w-[70px]">
+              <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
+                row.status === 'Active' ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'
+              }`}>
+                {row.status}
+              </span>
+            </span>
+          </div>
+        ))}
+      </div>
+    );
+  },
+};
+
+// ============================================================================
+// Examples — Links & References
+// ============================================================================
+
+export const LinksAndReferences = {
+  name: 'Links & References',
+  render: () => (
+    <div className="max-w-md space-y-3 text-sm leading-relaxed">
+      <p>
+        Our design system is built on top of{' '}
+        <HoverCard>
+          <HoverCardTrigger asChild>
+            <a href="#" className="font-medium underline underline-offset-4 hover:no-underline">
+              Radix UI
+            </a>
+          </HoverCardTrigger>
+          <HoverCardContent className="w-72">
+            <div className="space-y-2">
+              <h4 className="text-sm font-semibold">Radix UI</h4>
+              <p className="text-xs text-muted-foreground">
+                An open-source component library optimized for fast development, easy maintenance, and accessibility.
+              </p>
+              <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                <ExternalLink className="h-3 w-3" />
+                radix-ui.com
+              </div>
+            </div>
+          </HoverCardContent>
+        </HoverCard>
+        {' '}primitives with{' '}
+        <HoverCard>
+          <HoverCardTrigger asChild>
+            <a href="#" className="font-medium underline underline-offset-4 hover:no-underline">
+              Tailwind CSS
+            </a>
+          </HoverCardTrigger>
+          <HoverCardContent className="w-72">
+            <div className="space-y-2">
+              <h4 className="text-sm font-semibold">Tailwind CSS</h4>
+              <p className="text-xs text-muted-foreground">
+                A utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.
+              </p>
+              <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                <ExternalLink className="h-3 w-3" />
+                tailwindcss.com
+              </div>
+            </div>
+          </HoverCardContent>
+        </HoverCard>
+        {' '}styling. Documentation is powered by{' '}
+        <HoverCard>
+          <HoverCardTrigger asChild>
+            <a href="#" className="font-medium underline underline-offset-4 hover:no-underline">
+              Storybook
+            </a>
+          </HoverCardTrigger>
+          <HoverCardContent className="w-72">
+            <div className="space-y-2">
+              <h4 className="text-sm font-semibold">Storybook</h4>
+              <p className="text-xs text-muted-foreground">
+                A frontend workshop for building UI components and pages in isolation. Used for development, testing, and documentation.
+              </p>
+              <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                <ExternalLink className="h-3 w-3" />
+                storybook.js.org
+              </div>
+            </div>
+          </HoverCardContent>
+        </HoverCard>.
+      </p>
+    </div>
+  ),
+};
diff --git a/packages/apollo-wind/src/components/ui/index.ts b/packages/apollo-wind/src/components/ui/index.ts
index 4c717103c..399a8b9d8 100644
--- a/packages/apollo-wind/src/components/ui/index.ts
+++ b/packages/apollo-wind/src/components/ui/index.ts
@@ -18,7 +18,6 @@ export * from './data-table';
 export * from './date-picker';
 export * from './datetime-picker';
 export * from './dialog';
-export * from './drawer';
 export * from './dropdown-menu';
 export * from './editable-cell';
 export * from './empty-state';
@@ -27,9 +26,7 @@ export * from './hover-card';
 export * from './input';
 export * from './label';
 export * from './layout';
-export * from './menubar';
 export * from './multi-select';
-export * from './navigation-menu';
 export * from './pagination';
 export * from './popover';
 export * from './progress';
diff --git a/packages/apollo-wind/src/components/ui/menubar.stories.tsx b/packages/apollo-wind/src/components/ui/menubar.stories.tsx
deleted file mode 100644
index fea2a8ae9..000000000
--- a/packages/apollo-wind/src/components/ui/menubar.stories.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import type { Meta } from '@storybook/react-vite';
-import {
-  Menubar,
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarTrigger,
-} from './menubar';
-
-const meta: Meta<typeof Menubar> = {
-  title: 'Components/Navigation/Menubar',
-  component: Menubar,
-  tags: ['autodocs'],
-};
-
-export default meta;
-
-export const Default = {
-  args: {},
-  render: () => (
-    <Menubar>
-      <MenubarMenu>
-        <MenubarTrigger>File</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>
-            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>New Window</MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>Share</MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>Print</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger>Edit</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>
-            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>
-            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>Cut</MenubarItem>
-          <MenubarItem>Copy</MenubarItem>
-          <MenubarItem>Paste</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-    </Menubar>
-  ),
-};
diff --git a/packages/apollo-wind/src/components/ui/menubar.test.tsx b/packages/apollo-wind/src/components/ui/menubar.test.tsx
deleted file mode 100644
index 7c41fde54..000000000
--- a/packages/apollo-wind/src/components/ui/menubar.test.tsx
+++ /dev/null
@@ -1,354 +0,0 @@
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { axe } from 'jest-axe';
-import { describe, expect, it, vi } from 'vitest';
-
-import {
-  Menubar,
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarSeparator,
-  MenubarTrigger,
-  MenubarCheckboxItem,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarLabel,
-  MenubarShortcut,
-  MenubarSub,
-  MenubarSubContent,
-  MenubarSubTrigger,
-} from './menubar';
-
-const BasicMenubar = () => (
-  <Menubar>
-    <MenubarMenu>
-      <MenubarTrigger>File</MenubarTrigger>
-      <MenubarContent>
-        <MenubarItem>New</MenubarItem>
-        <MenubarItem>Open</MenubarItem>
-        <MenubarSeparator />
-        <MenubarItem>Save</MenubarItem>
-      </MenubarContent>
-    </MenubarMenu>
-  </Menubar>
-);
-
-describe('Menubar', () => {
-  describe('Rendering', () => {
-    it('renders menubar with trigger', () => {
-      render(<BasicMenubar />);
-      expect(screen.getByRole('menubar')).toBeInTheDocument();
-      expect(screen.getByText('File')).toBeInTheDocument();
-    });
-
-    it('renders multiple menu triggers', () => {
-      render(
-        <Menubar>
-          <MenubarMenu>
-            <MenubarTrigger>File</MenubarTrigger>
-            <MenubarContent>
-              <MenubarItem>New</MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-          <MenubarMenu>
-            <MenubarTrigger>Edit</MenubarTrigger>
-            <MenubarContent>
-              <MenubarItem>Undo</MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-        </Menubar>
-      );
-
-      expect(screen.getByText('File')).toBeInTheDocument();
-      expect(screen.getByText('Edit')).toBeInTheDocument();
-    });
-
-    it('does not render menu content initially', () => {
-      render(<BasicMenubar />);
-      expect(screen.queryByText('New')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('has no accessibility violations when closed', async () => {
-      const { container } = render(<BasicMenubar />);
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    });
-
-    it('has correct role for menubar', () => {
-      render(<BasicMenubar />);
-      expect(screen.getByRole('menubar')).toBeInTheDocument();
-    });
-  });
-
-  describe('Props', () => {
-    it('applies custom className to Menubar', () => {
-      render(
-        <Menubar className="custom-menubar">
-          <MenubarMenu>
-            <MenubarTrigger>File</MenubarTrigger>
-            <MenubarContent>
-              <MenubarItem>New</MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-        </Menubar>
-      );
-
-      expect(screen.getByRole('menubar')).toHaveClass('custom-menubar');
-    });
-
-    it('applies custom className to MenubarTrigger', () => {
-      render(
-        <Menubar>
-          <MenubarMenu>
-            <MenubarTrigger className="custom-trigger">File</MenubarTrigger>
-            <MenubarContent>
-              <MenubarItem>New</MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-        </Menubar>
-      );
-
-      expect(screen.getByText('File')).toHaveClass('custom-trigger');
-    });
-
-    it('renders MenubarItem with inset', async () => {
-      const user = userEvent.setup();
-      render(
-        <Menubar>
-          <MenubarMenu>
-            <MenubarTrigger>File</MenubarTrigger>
-            <MenubarContent>
-              <MenubarItem inset>Inset Item</MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-        </Menubar>
-      );
-
-      await user.click(screen.getByText('File'));
-      await waitFor(() => {
-        expect(screen.getByText('Inset Item')).toHaveClass('pl-8');
-      });
-    });
-
-    it('renders MenubarLabel with inset', async () => {
-      const user = userEvent.setup();
-      render(
-        <Menubar>
-          <MenubarMenu>
-            <MenubarTrigger>File</MenubarTrigger>
-            <MenubarContent>
-              <MenubarLabel inset>Label</MenubarLabel>
-              <MenubarItem>Item</MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-        </Menubar>
-      );
-
-      await user.click(screen.getByText('File'));
-      await waitFor(() => {
-        expect(screen.getByText('Label')).toHaveClass('pl-8');
-      });
-    });
-  });
-
-  describe('Interactions', () => {
-    it('opens menu on click', async () => {
-      const user = userEvent.setup();
-      render(<BasicMenubar />);
-
-      await user.click(screen.getByText('File'));
-      await waitFor(() => {
-        expect(screen.getByText('New')).toBeInTheDocument();
-        expect(screen.getByText('Open')).toBeInTheDocument();
-        expect(screen.getByText('Save')).toBeInTheDocument();
-      });
-    });
-
-    it('calls onSelect when item is clicked', async () => {
-      const onSelect = vi.fn();
-      const user = userEvent.setup();
-      render(
-        <Menubar>
-          <MenubarMenu>
-            <MenubarTrigger>File</MenubarTrigger>
-            <MenubarContent>
-              <MenubarItem onSelect={onSelect}>New</MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-        </Menubar>
-      );
-
-      await user.click(screen.getByText('File'));
-      await waitFor(() => {
-        expect(screen.getByText('New')).toBeInTheDocument();
-      });
-
-      await user.click(screen.getByText('New'));
-      await waitFor(() => {
-        expect(onSelect).toHaveBeenCalled();
-      });
-    });
-
-    it('renders disabled item', async () => {
-      const user = userEvent.setup();
-      render(
-        <Menubar>
-          <MenubarMenu>
-            <MenubarTrigger>File</MenubarTrigger>
-            <MenubarContent>
-              <MenubarItem disabled>Disabled</MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-        </Menubar>
-      );
-
-      await user.click(screen.getByText('File'));
-      await waitFor(() => {
-        expect(screen.getByText('Disabled')).toHaveAttribute('data-disabled');
-      });
-    });
-  });
-
-  describe('Checkbox Items', () => {
-    it('renders checkbox item', async () => {
-      const user = userEvent.setup();
-      render(
-        <Menubar>
-          <MenubarMenu>
-            <MenubarTrigger>View</MenubarTrigger>
-            <MenubarContent>
-              <MenubarCheckboxItem checked>Show Toolbar</MenubarCheckboxItem>
-            </MenubarContent>
-          </MenubarMenu>
-        </Menubar>
-      );
-
-      await user.click(screen.getByText('View'));
-      await waitFor(() => {
-        expect(screen.getByText('Show Toolbar')).toBeInTheDocument();
-      });
-    });
-  });
-
-  describe('Radio Items', () => {
-    it('renders radio group with items', async () => {
-      const user = userEvent.setup();
-      render(
-        <Menubar>
-          <MenubarMenu>
-            <MenubarTrigger>View</MenubarTrigger>
-            <MenubarContent>
-              <MenubarRadioGroup value="small">
-                <MenubarRadioItem value="small">Small</MenubarRadioItem>
-                <MenubarRadioItem value="medium">Medium</MenubarRadioItem>
-              </MenubarRadioGroup>
-            </MenubarContent>
-          </MenubarMenu>
-        </Menubar>
-      );
-
-      await user.click(screen.getByText('View'));
-      await waitFor(() => {
-        expect(screen.getByText('Small')).toBeInTheDocument();
-        expect(screen.getByText('Medium')).toBeInTheDocument();
-      });
-    });
-  });
-
-  describe('Submenu', () => {
-    it('renders submenu', async () => {
-      const user = userEvent.setup();
-      render(
-        <Menubar>
-          <MenubarMenu>
-            <MenubarTrigger>File</MenubarTrigger>
-            <MenubarContent>
-              <MenubarSub>
-                <MenubarSubTrigger>Share</MenubarSubTrigger>
-                <MenubarSubContent>
-                  <MenubarItem>Email</MenubarItem>
-                </MenubarSubContent>
-              </MenubarSub>
-            </MenubarContent>
-          </MenubarMenu>
-        </Menubar>
-      );
-
-      await user.click(screen.getByText('File'));
-      await waitFor(() => {
-        expect(screen.getByText('Share')).toBeInTheDocument();
-      });
-    });
-
-    it('renders submenu trigger with inset', async () => {
-      const user = userEvent.setup();
-      render(
-        <Menubar>
-          <MenubarMenu>
-            <MenubarTrigger>File</MenubarTrigger>
-            <MenubarContent>
-              <MenubarSub>
-                <MenubarSubTrigger inset>Share</MenubarSubTrigger>
-                <MenubarSubContent>
-                  <MenubarItem>Email</MenubarItem>
-                </MenubarSubContent>
-              </MenubarSub>
-            </MenubarContent>
-          </MenubarMenu>
-        </Menubar>
-      );
-
-      await user.click(screen.getByText('File'));
-      await waitFor(() => {
-        expect(screen.getByText('Share')).toHaveClass('pl-8');
-      });
-    });
-  });
-
-  describe('Shortcut', () => {
-    it('renders shortcut text', async () => {
-      const user = userEvent.setup();
-      render(
-        <Menubar>
-          <MenubarMenu>
-            <MenubarTrigger>File</MenubarTrigger>
-            <MenubarContent>
-              <MenubarItem>
-                New <MenubarShortcut>Cmd+N</MenubarShortcut>
-              </MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-        </Menubar>
-      );
-
-      await user.click(screen.getByText('File'));
-      await waitFor(() => {
-        expect(screen.getByText('Cmd+N')).toBeInTheDocument();
-      });
-    });
-
-    it('applies custom className to shortcut', async () => {
-      const user = userEvent.setup();
-      render(
-        <Menubar>
-          <MenubarMenu>
-            <MenubarTrigger>File</MenubarTrigger>
-            <MenubarContent>
-              <MenubarItem>
-                New <MenubarShortcut className="custom-shortcut">Cmd+N</MenubarShortcut>
-              </MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-        </Menubar>
-      );
-
-      await user.click(screen.getByText('File'));
-      await waitFor(() => {
-        expect(screen.getByText('Cmd+N')).toHaveClass('custom-shortcut');
-      });
-    });
-  });
-});
diff --git a/packages/apollo-wind/src/components/ui/menubar.tsx b/packages/apollo-wind/src/components/ui/menubar.tsx
deleted file mode 100644
index 4186fe0bf..000000000
--- a/packages/apollo-wind/src/components/ui/menubar.tsx
+++ /dev/null
@@ -1,229 +0,0 @@
-import * as MenubarPrimitive from '@radix-ui/react-menubar';
-import { Check, ChevronRight, Circle } from 'lucide-react';
-import * as React from 'react';
-
-import { cn } from '@/lib';
-
-function MenubarMenu({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
-  return <MenubarPrimitive.Menu {...props} />;
-}
-
-function MenubarGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Group>) {
-  return <MenubarPrimitive.Group {...props} />;
-}
-
-function MenubarPortal({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
-  return <MenubarPrimitive.Portal {...props} />;
-}
-
-function MenubarRadioGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
-  return <MenubarPrimitive.RadioGroup {...props} />;
-}
-
-function MenubarSub({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
-  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
-}
-
-const Menubar = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Root
-    ref={ref}
-    className={cn(
-      'flex h-10 items-center space-x-1 rounded-md border bg-background p-1',
-      className
-    )}
-    {...props}
-  />
-));
-Menubar.displayName = MenubarPrimitive.Root.displayName;
-
-const MenubarTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
-      className
-    )}
-    {...props}
-  />
-));
-MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
-
-const MenubarSubTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <MenubarPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
-      inset && 'pl-8',
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </MenubarPrimitive.SubTrigger>
-));
-MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
-
-const MenubarSubContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]',
-      className
-    )}
-    {...props}
-  />
-));
-MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
-
-const MenubarContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
->(({ className, align = 'start', alignOffset = -4, sideOffset = 8, ...props }, ref) => (
-  <MenubarPrimitive.Portal>
-    <MenubarPrimitive.Content
-      ref={ref}
-      align={align}
-      alignOffset={alignOffset}
-      sideOffset={sideOffset}
-      className={cn(
-        'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]',
-        className
-      )}
-      {...props}
-    />
-  </MenubarPrimitive.Portal>
-));
-MenubarContent.displayName = MenubarPrimitive.Content.displayName;
-
-const MenubarItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <MenubarPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      inset && 'pl-8',
-      className
-    )}
-    {...props}
-  />
-));
-MenubarItem.displayName = MenubarPrimitive.Item.displayName;
-
-const MenubarCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <MenubarPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <MenubarPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </MenubarPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </MenubarPrimitive.CheckboxItem>
-));
-MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
-
-const MenubarRadioItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <MenubarPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <MenubarPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </MenubarPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </MenubarPrimitive.RadioItem>
-));
-MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
-
-const MenubarLabel = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <MenubarPrimitive.Label
-    ref={ref}
-    className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
-    {...props}
-  />
-));
-MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
-
-const MenubarSeparator = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
-    {...props}
-  />
-));
-MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
-
-const MenubarShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
-      {...props}
-    />
-  );
-};
-MenubarShortcut.displayname = 'MenubarShortcut';
-
-export {
-  Menubar,
-  MenubarMenu,
-  MenubarTrigger,
-  MenubarContent,
-  MenubarItem,
-  MenubarSeparator,
-  MenubarLabel,
-  MenubarCheckboxItem,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarPortal,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarGroup,
-  MenubarSub,
-  MenubarShortcut,
-};
diff --git a/packages/apollo-wind/src/components/ui/navigation-menu.stories.tsx b/packages/apollo-wind/src/components/ui/navigation-menu.stories.tsx
deleted file mode 100644
index 9c977b7ea..000000000
--- a/packages/apollo-wind/src/components/ui/navigation-menu.stories.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import type { Meta } from '@storybook/react-vite';
-import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-} from './navigation-menu';
-import { Column } from './layout';
-
-const meta: Meta<typeof NavigationMenu> = {
-  title: 'Components/Navigation/Navigation Menu',
-  component: NavigationMenu,
-  tags: ['autodocs'],
-};
-
-export default meta;
-
-export const Default = {
-  args: {},
-  render: () => (
-    <NavigationMenu>
-      <NavigationMenuList>
-        <NavigationMenuItem>
-          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
-          <NavigationMenuContent>
-            <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
-              <li className="row-span-3">
-                <NavigationMenuLink asChild>
-                  <Column className="select-none rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md">
-                    <a href="/">
-                      <div className="mb-2 mt-4 text-lg font-medium">Apollo Wind</div>
-                      <p className="text-sm leading-tight text-muted-foreground">
-                        A comprehensive design system for React
-                      </p>
-                    </a>
-                  </Column>
-                </NavigationMenuLink>
-              </li>
-              <li>
-                <NavigationMenuLink asChild>
-                  <a
-                    className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
-                    href="/docs"
-                  >
-                    <div className="text-sm font-medium leading-none">Introduction</div>
-                    <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
-                      Learn about Apollo Wind and its features
-                    </p>
-                  </a>
-                </NavigationMenuLink>
-              </li>
-            </ul>
-          </NavigationMenuContent>
-        </NavigationMenuItem>
-        <NavigationMenuItem>
-          <NavigationMenuTrigger>Components</NavigationMenuTrigger>
-          <NavigationMenuContent>
-            <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
-              <li>
-                <NavigationMenuLink asChild>
-                  <a
-                    className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
-                    href="/docs/components/alert"
-                  >
-                    <div className="text-sm font-medium leading-none">Alert</div>
-                    <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
-                      Display important messages
-                    </p>
-                  </a>
-                </NavigationMenuLink>
-              </li>
-            </ul>
-          </NavigationMenuContent>
-        </NavigationMenuItem>
-      </NavigationMenuList>
-    </NavigationMenu>
-  ),
-};
diff --git a/packages/apollo-wind/src/components/ui/navigation-menu.test.tsx b/packages/apollo-wind/src/components/ui/navigation-menu.test.tsx
deleted file mode 100644
index 6612d3279..000000000
--- a/packages/apollo-wind/src/components/ui/navigation-menu.test.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { axe } from 'jest-axe';
-import { describe, expect, it } from 'vitest';
-import { createRef } from 'react';
-import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  navigationMenuTriggerStyle,
-} from './navigation-menu';
-
-describe('NavigationMenu', () => {
-  describe('rendering', () => {
-    it('renders navigation menu', () => {
-      render(
-        <NavigationMenu>
-          <NavigationMenuList>
-            <NavigationMenuItem>
-              <NavigationMenuLink href="#">Home</NavigationMenuLink>
-            </NavigationMenuItem>
-          </NavigationMenuList>
-        </NavigationMenu>
-      );
-      expect(screen.getByRole('navigation')).toBeInTheDocument();
-    });
-
-    it('renders menu items', () => {
-      render(
-        <NavigationMenu>
-          <NavigationMenuList>
-            <NavigationMenuItem>
-              <NavigationMenuLink href="#">Home</NavigationMenuLink>
-            </NavigationMenuItem>
-            <NavigationMenuItem>
-              <NavigationMenuLink href="#">About</NavigationMenuLink>
-            </NavigationMenuItem>
-          </NavigationMenuList>
-        </NavigationMenu>
-      );
-      expect(screen.getByText('Home')).toBeInTheDocument();
-      expect(screen.getByText('About')).toBeInTheDocument();
-    });
-
-    it('renders trigger with dropdown content', async () => {
-      const user = userEvent.setup();
-      render(
-        <NavigationMenu>
-          <NavigationMenuList>
-            <NavigationMenuItem>
-              <NavigationMenuTrigger>Products</NavigationMenuTrigger>
-              <NavigationMenuContent>
-                <div>Product List</div>
-              </NavigationMenuContent>
-            </NavigationMenuItem>
-          </NavigationMenuList>
-        </NavigationMenu>
-      );
-
-      expect(screen.getByText('Products')).toBeInTheDocument();
-      await user.click(screen.getByText('Products'));
-      expect(screen.getByText('Product List')).toBeInTheDocument();
-    });
-  });
-
-  describe('accessibility', () => {
-    it('has no accessibility violations', async () => {
-      const { container } = render(
-        <NavigationMenu>
-          <NavigationMenuList>
-            <NavigationMenuItem>
-              <NavigationMenuLink href="#">Home</NavigationMenuLink>
-            </NavigationMenuItem>
-          </NavigationMenuList>
-        </NavigationMenu>
-      );
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    });
-
-    it('has no violations with trigger and content', async () => {
-      const { container } = render(
-        <NavigationMenu>
-          <NavigationMenuList>
-            <NavigationMenuItem>
-              <NavigationMenuTrigger>Products</NavigationMenuTrigger>
-              <NavigationMenuContent>
-                <NavigationMenuLink href="#">Product 1</NavigationMenuLink>
-              </NavigationMenuContent>
-            </NavigationMenuItem>
-          </NavigationMenuList>
-        </NavigationMenu>
-      );
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    });
-  });
-
-  describe('ref forwarding', () => {
-    it('NavigationMenu forwards ref', () => {
-      const ref = createRef<HTMLElement>();
-      render(
-        <NavigationMenu ref={ref}>
-          <NavigationMenuList />
-        </NavigationMenu>
-      );
-      expect(ref.current).toBeInstanceOf(HTMLElement);
-    });
-
-    it('NavigationMenuList forwards ref', () => {
-      const ref = createRef<HTMLUListElement>();
-      render(
-        <NavigationMenu>
-          <NavigationMenuList ref={ref} />
-        </NavigationMenu>
-      );
-      expect(ref.current).toBeInstanceOf(HTMLUListElement);
-    });
-  });
-
-  describe('custom className', () => {
-    it('NavigationMenu accepts custom className', () => {
-      render(
-        <NavigationMenu className="custom-nav">
-          <NavigationMenuList />
-        </NavigationMenu>
-      );
-      expect(screen.getByRole('navigation')).toHaveClass('custom-nav');
-    });
-
-    it('NavigationMenuList accepts custom className', () => {
-      render(
-        <NavigationMenu>
-          <NavigationMenuList className="custom-list" />
-        </NavigationMenu>
-      );
-      expect(screen.getByRole('list')).toHaveClass('custom-list');
-    });
-  });
-
-  describe('navigationMenuTriggerStyle', () => {
-    it('returns className string', () => {
-      const style = navigationMenuTriggerStyle();
-      expect(typeof style).toBe('string');
-      expect(style).toContain('inline-flex');
-    });
-  });
-});
diff --git a/packages/apollo-wind/src/components/ui/navigation-menu.tsx b/packages/apollo-wind/src/components/ui/navigation-menu.tsx
deleted file mode 100644
index 8ac7ab1bf..000000000
--- a/packages/apollo-wind/src/components/ui/navigation-menu.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
-import { cva } from 'class-variance-authority';
-import { ChevronDown } from 'lucide-react';
-import * as React from 'react';
-
-import { cn } from '@/lib';
-
-const NavigationMenu = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Root
-    ref={ref}
-    className={cn('relative z-10 flex max-w-max flex-1 items-center justify-center', className)}
-    {...props}
-  >
-    {children}
-    <NavigationMenuViewport />
-  </NavigationMenuPrimitive.Root>
-));
-NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
-
-const NavigationMenuList = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.List
-    ref={ref}
-    className={cn('group flex flex-1 list-none items-center justify-center space-x-1', className)}
-    {...props}
-  />
-));
-NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
-
-const NavigationMenuItem = NavigationMenuPrimitive.Item;
-
-const navigationMenuTriggerStyle = cva(
-  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent'
-);
-
-const NavigationMenuTrigger = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Trigger
-    ref={ref}
-    className={cn(navigationMenuTriggerStyle(), 'group', className)}
-    {...props}
-  >
-    {children}{' '}
-    <ChevronDown
-      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
-      aria-hidden="true"
-    />
-  </NavigationMenuPrimitive.Trigger>
-));
-NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
-
-const NavigationMenuContent = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Content
-    ref={ref}
-    className={cn(
-      'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ',
-      className
-    )}
-    {...props}
-  />
-));
-NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
-
-const NavigationMenuLink = NavigationMenuPrimitive.Link;
-
-const NavigationMenuViewport = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
->(({ className, ...props }, ref) => (
-  <div className={cn('absolute left-0 top-full flex justify-center')}>
-    <NavigationMenuPrimitive.Viewport
-      className={cn(
-        'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  </div>
-));
-NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
-
-const NavigationMenuIndicator = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Indicator
-    ref={ref}
-    className={cn(
-      'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in',
-      className
-    )}
-    {...props}
-  >
-    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
-  </NavigationMenuPrimitive.Indicator>
-));
-NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
-
-export {
-  navigationMenuTriggerStyle,
-  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuContent,
-  NavigationMenuTrigger,
-  NavigationMenuLink,
-  NavigationMenuIndicator,
-  NavigationMenuViewport,
-};
diff --git a/packages/apollo-wind/src/components/ui/pagination.stories.tsx b/packages/apollo-wind/src/components/ui/pagination.stories.tsx
index a41362d68..b2382945d 100644
--- a/packages/apollo-wind/src/components/ui/pagination.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/pagination.stories.tsx
@@ -1,4 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
+import * as React from 'react';
+import { Button } from './button';
 import {
   Pagination,
   PaginationContent,
@@ -8,6 +11,13 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from './pagination';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from './select';
 
 const meta: Meta<typeof Pagination> = {
   title: 'Components/Navigation/Pagination',
@@ -17,8 +27,12 @@ const meta: Meta<typeof Pagination> = {
 
 export default meta;
 
-export const Default = {
-  args: {},
+// ============================================================================
+// Basic
+// ============================================================================
+
+export const Basic = {
+  name: 'Basic',
   render: () => (
     <Pagination>
       <PaginationContent>
@@ -39,6 +53,9 @@ export const Default = {
         <PaginationItem>
           <PaginationEllipsis />
         </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">10</PaginationLink>
+        </PaginationItem>
         <PaginationItem>
           <PaginationNext href="#" />
         </PaginationItem>
@@ -46,3 +63,324 @@ export const Default = {
     </Pagination>
   ),
 };
+
+// ============================================================================
+// With Buttons
+// ============================================================================
+
+export const WithButtons = {
+  name: 'With Buttons',
+  render: () => {
+    const [page, setPage] = React.useState(3);
+    const totalPages = 10;
+
+    return (
+      <div className="flex flex-col items-center gap-4">
+        <Pagination>
+          <PaginationContent>
+            <PaginationItem>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setPage((p) => Math.max(1, p - 1))}
+                disabled={page === 1}
+              >
+                Previous
+              </Button>
+            </PaginationItem>
+            {[1, 2, 3, 4, 5].map((p) => (
+              <PaginationItem key={p}>
+                <Button
+                  variant={p === page ? 'outline' : 'ghost'}
+                  size="icon"
+                  className="h-9 w-9"
+                  onClick={() => setPage(p)}
+                >
+                  {p}
+                </Button>
+              </PaginationItem>
+            ))}
+            <PaginationItem>
+              <PaginationEllipsis />
+            </PaginationItem>
+            <PaginationItem>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-9 w-9"
+                onClick={() => setPage(totalPages)}
+              >
+                {totalPages}
+              </Button>
+            </PaginationItem>
+            <PaginationItem>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+                disabled={page === totalPages}
+              >
+                Next
+              </Button>
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+        <p className="text-sm text-muted-foreground">
+          Page {page} of {totalPages}
+        </p>
+      </div>
+    );
+  },
+};
+
+// ============================================================================
+// With Icons
+// ============================================================================
+
+export const WithIcons = {
+  name: 'With Icons',
+  render: () => {
+    const [page, setPage] = React.useState(3);
+    const totalPages = 10;
+
+    return (
+      <div className="flex flex-col items-center gap-4">
+        <Pagination>
+          <PaginationContent>
+            <PaginationItem>
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-9 w-9"
+                onClick={() => setPage(1)}
+                disabled={page === 1}
+              >
+                <ChevronsLeft className="h-4 w-4" />
+              </Button>
+            </PaginationItem>
+            <PaginationItem>
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-9 w-9"
+                onClick={() => setPage((p) => Math.max(1, p - 1))}
+                disabled={page === 1}
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+            </PaginationItem>
+            {Array.from({ length: 5 }, (_, i) => {
+              const start = Math.max(1, Math.min(page - 2, totalPages - 4));
+              const p = start + i;
+              return (
+                <PaginationItem key={p}>
+                  <Button
+                    variant={p === page ? 'outline' : 'ghost'}
+                    size="icon"
+                    className="h-9 w-9"
+                    onClick={() => setPage(p)}
+                  >
+                    {p}
+                  </Button>
+                </PaginationItem>
+              );
+            })}
+            <PaginationItem>
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-9 w-9"
+                onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+                disabled={page === totalPages}
+              >
+                <ChevronRight className="h-4 w-4" />
+              </Button>
+            </PaginationItem>
+            <PaginationItem>
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-9 w-9"
+                onClick={() => setPage(totalPages)}
+                disabled={page === totalPages}
+              >
+                <ChevronsRight className="h-4 w-4" />
+              </Button>
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+        <p className="text-sm text-muted-foreground">
+          Page {page} of {totalPages}
+        </p>
+      </div>
+    );
+  },
+};
+
+// ============================================================================
+// Examples
+// ============================================================================
+
+export const Examples = {
+  name: 'Examples',
+  render: () => {
+    const [gridPage, setGridPage] = React.useState(1);
+    const [rowsPerPage, setRowsPerPage] = React.useState('10');
+    const totalRows = 87;
+    const rows = Number(rowsPerPage);
+    const totalGridPages = Math.ceil(totalRows / rows);
+
+    const [listPage, setListPage] = React.useState(1);
+    const totalListPages = 5;
+
+    return (
+      <div className="flex flex-col gap-10">
+        {/* Data Grid */}
+        <div>
+          <p className="text-sm font-medium mb-3">Data Grid</p>
+          <div className="rounded-lg border">
+            {/* Table header */}
+            <div className="grid grid-cols-4 gap-4 border-b px-4 py-3 text-sm font-medium text-muted-foreground">
+              <span>Name</span>
+              <span>Status</span>
+              <span>Type</span>
+              <span>Updated</span>
+            </div>
+            {/* Table rows */}
+            {Array.from({ length: Math.min(rows, totalRows - (gridPage - 1) * rows) }, (_, i) => {
+              const index = (gridPage - 1) * rows + i + 1;
+              return (
+                <div
+                  key={index}
+                  className="grid grid-cols-4 gap-4 border-b px-4 py-2.5 text-sm last:border-0"
+                >
+                  <span>Item {index}</span>
+                  <span className="text-green-600">Active</span>
+                  <span className="text-muted-foreground">Document</span>
+                  <span className="text-muted-foreground">2 days ago</span>
+                </div>
+              );
+            })}
+            {/* Pagination footer */}
+            <div className="flex items-center justify-between border-t px-4 py-3">
+              <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                <span>Rows per page</span>
+                <Select value={rowsPerPage} onValueChange={(v) => { setRowsPerPage(v); setGridPage(1); }}>
+                  <SelectTrigger className="h-8 w-[70px]">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="5">5</SelectItem>
+                    <SelectItem value="10">10</SelectItem>
+                    <SelectItem value="20">20</SelectItem>
+                    <SelectItem value="50">50</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="text-sm text-muted-foreground">
+                  Page {gridPage} of {totalGridPages}
+                </span>
+                <div className="flex items-center gap-1">
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    className="h-8 w-8"
+                    onClick={() => setGridPage(1)}
+                    disabled={gridPage === 1}
+                  >
+                    <ChevronsLeft className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    className="h-8 w-8"
+                    onClick={() => setGridPage((p) => Math.max(1, p - 1))}
+                    disabled={gridPage === 1}
+                  >
+                    <ChevronLeft className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    className="h-8 w-8"
+                    onClick={() => setGridPage((p) => Math.min(totalGridPages, p + 1))}
+                    disabled={gridPage === totalGridPages}
+                  >
+                    <ChevronRight className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    className="h-8 w-8"
+                    onClick={() => setGridPage(totalGridPages)}
+                    disabled={gridPage === totalGridPages}
+                  >
+                    <ChevronsRight className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Card list pagination */}
+        <div>
+          <p className="text-sm font-medium mb-3">Card List</p>
+          <div className="space-y-3">
+            {Array.from({ length: 3 }, (_, i) => {
+              const index = (listPage - 1) * 3 + i + 1;
+              return (
+                <div key={index} className="flex items-center gap-4 rounded-lg border p-4">
+                  <div className="h-10 w-10 rounded-full bg-muted" />
+                  <div>
+                    <p className="text-sm font-medium">Project {index}</p>
+                    <p className="text-xs text-muted-foreground">Last updated 3 days ago</p>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          <div className="mt-4">
+            <Pagination>
+              <PaginationContent>
+                <PaginationItem>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setListPage((p) => Math.max(1, p - 1))}
+                    disabled={listPage === 1}
+                  >
+                    Previous
+                  </Button>
+                </PaginationItem>
+                {Array.from({ length: totalListPages }, (_, i) => (
+                  <PaginationItem key={i + 1}>
+                    <Button
+                      variant={i + 1 === listPage ? 'outline' : 'ghost'}
+                      size="icon"
+                      className="h-9 w-9"
+                      onClick={() => setListPage(i + 1)}
+                    >
+                      {i + 1}
+                    </Button>
+                  </PaginationItem>
+                ))}
+                <PaginationItem>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setListPage((p) => Math.min(totalListPages, p + 1))}
+                    disabled={listPage === totalListPages}
+                  >
+                    Next
+                  </Button>
+                </PaginationItem>
+              </PaginationContent>
+            </Pagination>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
diff --git a/packages/apollo-wind/src/components/ui/popover.stories.tsx b/packages/apollo-wind/src/components/ui/popover.stories.tsx
index 5a4aa7612..784222e24 100644
--- a/packages/apollo-wind/src/components/ui/popover.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/popover.stories.tsx
@@ -1,5 +1,10 @@
 import type { Meta } from '@storybook/react-vite';
+import { Settings, Bell, Share2, Copy, Check } from 'lucide-react';
+import { useState } from 'react';
 import { Button } from './button';
+import { Input } from './input';
+import { Label } from './label';
+import { Separator } from './separator';
 import { Popover, PopoverContent, PopoverTrigger } from './popover';
 
 const meta: Meta<typeof Popover> = {
@@ -10,21 +15,224 @@ const meta: Meta<typeof Popover> = {
 
 export default meta;
 
-export const Default = {
-  args: {},
+// ============================================================================
+// Basic
+// ============================================================================
+
+export const Basic = {
+  name: 'Basic',
   render: () => (
     <Popover>
       <PopoverTrigger asChild>
-        <Button variant="outline">Open popover</Button>
+        <Button variant="outline">Open Popover</Button>
       </PopoverTrigger>
       <PopoverContent>
-        <div className="grid gap-4">
+        <div className="space-y-2">
+          <h4 className="text-sm font-medium">Popover Title</h4>
+          <p className="text-sm text-muted-foreground">
+            This is a basic popover. It opens on click and displays supplementary content.
+          </p>
+        </div>
+      </PopoverContent>
+    </Popover>
+  ),
+};
+
+// ============================================================================
+// Align
+// ============================================================================
+
+export const Align = {
+  name: 'Align',
+  render: () => (
+    <div className="flex items-center justify-center gap-6 py-10">
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant="outline" size="sm">Start</Button>
+        </PopoverTrigger>
+        <PopoverContent align="start" className="w-60">
+          <p className="text-sm">Aligned to the <span className="font-medium">start</span> (left edge) of the trigger.</p>
+        </PopoverContent>
+      </Popover>
+
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant="outline" size="sm">Center</Button>
+        </PopoverTrigger>
+        <PopoverContent align="center" className="w-60">
+          <p className="text-sm">Aligned to the <span className="font-medium">center</span> of the trigger. This is the default.</p>
+        </PopoverContent>
+      </Popover>
+
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant="outline" size="sm">End</Button>
+        </PopoverTrigger>
+        <PopoverContent align="end" className="w-60">
+          <p className="text-sm">Aligned to the <span className="font-medium">end</span> (right edge) of the trigger.</p>
+        </PopoverContent>
+      </Popover>
+    </div>
+  ),
+};
+
+// ============================================================================
+// With Form
+// ============================================================================
+
+export const WithForm = {
+  name: 'With Form',
+  render: () => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline">
+          <Settings className="mr-2 h-4 w-4" />
+          Dimensions
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80">
+        <div className="space-y-4">
           <div className="space-y-2">
-            <h4 className="font-medium leading-none">Dimensions</h4>
-            <p className="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
+            <h4 className="text-sm font-medium">Dimensions</h4>
+            <p className="text-xs text-muted-foreground">Set the dimensions for the layer.</p>
+          </div>
+          <div className="grid gap-3">
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="width">Width</Label>
+              <Input id="width" defaultValue="100%" className="col-span-2 h-8" />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="maxWidth">Max. width</Label>
+              <Input id="maxWidth" defaultValue="300px" className="col-span-2 h-8" />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="height">Height</Label>
+              <Input id="height" defaultValue="25px" className="col-span-2 h-8" />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="maxHeight">Max. height</Label>
+              <Input id="maxHeight" defaultValue="none" className="col-span-2 h-8" />
+            </div>
           </div>
         </div>
       </PopoverContent>
     </Popover>
   ),
 };
+
+// ============================================================================
+// Examples
+// ============================================================================
+
+export const Examples = {
+  name: 'Examples',
+  render: () => {
+    const [copied, setCopied] = useState(false);
+
+    function handleCopy() {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+
+    return (
+      <div className="flex flex-wrap gap-4">
+        {/* Share link */}
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant="outline" size="sm">
+              <Share2 className="mr-2 h-4 w-4" />
+              Share
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-80">
+            <div className="space-y-3">
+              <div className="space-y-1">
+                <h4 className="text-sm font-medium">Share Link</h4>
+                <p className="text-xs text-muted-foreground">Anyone with the link can view this.</p>
+              </div>
+              <div className="flex items-center gap-2">
+                <Input
+                  readOnly
+                  defaultValue="https://app.example.com/s/abc123"
+                  className="h-8 text-xs"
+                />
+                <Button size="sm" className="h-8 px-3 shrink-0" onClick={handleCopy}>
+                  {copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
+                </Button>
+              </div>
+            </div>
+          </PopoverContent>
+        </Popover>
+
+        {/* Notification settings */}
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant="outline" size="sm">
+              <Bell className="mr-2 h-4 w-4" />
+              Notifications
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-72">
+            <div className="space-y-3">
+              <h4 className="text-sm font-medium">Notification Preferences</h4>
+              <Separator />
+              {[
+                { label: 'Email notifications', desc: 'Receive updates via email', defaultChecked: true },
+                { label: 'Push notifications', desc: 'Browser push alerts', defaultChecked: false },
+                { label: 'Weekly digest', desc: 'Summary every Monday', defaultChecked: true },
+              ].map((item) => (
+                <label key={item.label} className="flex items-start gap-3 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    defaultChecked={item.defaultChecked}
+                    className="mt-0.5 h-4 w-4 rounded border-input accent-primary"
+                  />
+                  <div>
+                    <p className="text-sm font-medium">{item.label}</p>
+                    <p className="text-xs text-muted-foreground">{item.desc}</p>
+                  </div>
+                </label>
+              ))}
+            </div>
+          </PopoverContent>
+        </Popover>
+
+        {/* Quick settings */}
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant="outline" size="sm">
+              <Settings className="mr-2 h-4 w-4" />
+              Quick Settings
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-72">
+            <div className="space-y-3">
+              <h4 className="text-sm font-medium">Display Settings</h4>
+              <Separator />
+              <div className="space-y-2">
+                <Label htmlFor="density" className="text-xs">Density</Label>
+                <div className="flex gap-2">
+                  {['Compact', 'Default', 'Comfortable'].map((opt) => (
+                    <button
+                      key={opt}
+                      type="button"
+                      className={`rounded-md border px-3 py-1.5 text-xs transition-colors ${
+                        opt === 'Default' ? 'bg-primary text-primary-foreground' : 'hover:bg-accent'
+                      }`}
+                    >
+                      {opt}
+                    </button>
+                  ))}
+                </div>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="rows" className="text-xs">Rows per page</Label>
+                <Input id="rows" defaultValue="25" className="h-8" />
+              </div>
+            </div>
+          </PopoverContent>
+        </Popover>
+      </div>
+    );
+  },
+};
diff --git a/packages/apollo-wind/src/components/ui/progress.stories.tsx b/packages/apollo-wind/src/components/ui/progress.stories.tsx
index 57cb8cfaf..bbf557aab 100644
--- a/packages/apollo-wind/src/components/ui/progress.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/progress.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta } from '@storybook/react-vite';
 import { useEffect, useState } from 'react';
+import { HardDrive, Upload, Activity, CheckCircle2, Loader2 } from 'lucide-react';
 import { Progress } from './progress';
 
 const meta: Meta<typeof Progress> = {
@@ -10,26 +11,318 @@ const meta: Meta<typeof Progress> = {
 
 export default meta;
 
-export const Default = {
-  args: {},
-  render: () => <Progress value={33} className="w-[60%]" />,
+// ============================================================================
+// Basic Progress
+// ============================================================================
+
+export const BasicProgress = {
+  name: 'Basic Progress',
+  render: () => (
+    <div className="flex flex-col gap-6 max-w-md">
+      <div className="space-y-2">
+        <p className="text-sm text-muted-foreground">0%</p>
+        <Progress value={0} className="h-1" />
+      </div>
+      <div className="space-y-2">
+        <p className="text-sm text-muted-foreground">25%</p>
+        <Progress value={25} className="h-1" />
+      </div>
+      <div className="space-y-2">
+        <p className="text-sm text-muted-foreground">50%</p>
+        <Progress value={50} className="h-1" />
+      </div>
+      <div className="space-y-2">
+        <p className="text-sm text-muted-foreground">75%</p>
+        <Progress value={75} className="h-1" />
+      </div>
+      <div className="space-y-2">
+        <p className="text-sm text-muted-foreground">100%</p>
+        <Progress value={100} className="h-1" />
+      </div>
+    </div>
+  ),
 };
 
-export const Indeterminate = {
-  args: {},
-  render: () => <Progress value={undefined} className="w-[60%]" />,
+// ============================================================================
+// Dynamic Progress
+// ============================================================================
+
+export const DynamicProgress = {
+  name: 'Dynamic Progress',
+  render: () => {
+    const [value, setValue] = useState(0);
+
+    useEffect(() => {
+      const interval = setInterval(() => {
+        setValue((prev) => {
+          if (prev >= 100) return 0;
+          return prev + Math.floor(Math.random() * 10) + 1;
+        });
+      }, 800);
+      return () => clearInterval(interval);
+    }, []);
+
+    return (
+      <div className="flex flex-col gap-3 max-w-md">
+        <div className="flex items-center justify-between">
+          <p className="text-sm font-medium">Processing…</p>
+          <p className="text-sm tabular-nums text-muted-foreground">{Math.min(value, 100)}%</p>
+        </div>
+        <Progress value={Math.min(value, 100)} className="h-1" />
+      </div>
+    );
+  },
 };
 
-export const Animated = {
-  args: {},
+// ============================================================================
+// Animated Progress
+// ============================================================================
+
+export const AnimatedProgress = {
+  name: 'Animated Progress',
   render: () => {
-    const [progress, setProgress] = useState(13);
+    const [progress, setProgress] = useState(0);
 
     useEffect(() => {
-      const timer = setTimeout(() => setProgress(66), 500);
-      return () => clearTimeout(timer);
+      const steps = [13, 35, 56, 78, 100];
+      let i = 0;
+      const timer = setInterval(() => {
+        if (i < steps.length) {
+          setProgress(steps[i]);
+          i++;
+        } else {
+          clearInterval(timer);
+        }
+      }, 600);
+      return () => clearInterval(timer);
     }, []);
 
-    return <Progress value={progress} className="w-[60%]" />;
+    return (
+      <div className="flex flex-col gap-3 max-w-md">
+        <p className="text-sm font-medium">Loading resources…</p>
+        <Progress value={progress} className="h-1" />
+        <p className="text-xs text-muted-foreground">
+          {progress < 100 ? 'Please wait while we load your data.' : 'Complete!'}
+        </p>
+      </div>
+    );
+  },
+};
+
+// ============================================================================
+// Progress with Labels
+// ============================================================================
+
+export const ProgressWithLabels = {
+  name: 'Progress with Labels',
+  render: () => (
+    <div className="flex flex-col gap-6 max-w-md">
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <span className="text-sm font-medium">Storage</span>
+          <span className="text-sm tabular-nums text-muted-foreground">45%</span>
+        </div>
+        <Progress value={45} className="h-1" />
+      </div>
+
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <span className="text-sm font-medium">Bandwidth</span>
+          <span className="text-sm tabular-nums text-muted-foreground">72%</span>
+        </div>
+        <Progress value={72} className="h-1" />
+      </div>
+
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <span className="text-sm font-medium">CPU Usage</span>
+          <span className="text-sm tabular-nums text-muted-foreground">89%</span>
+        </div>
+        <Progress value={89} className="h-1" />
+      </div>
+    </div>
+  ),
+};
+
+// ============================================================================
+// Progress Sizes
+// ============================================================================
+
+export const ProgressSizes = {
+  name: 'Progress Sizes',
+  render: () => (
+    <div className="flex flex-col gap-6 max-w-md">
+      <div className="space-y-2">
+        <p className="text-sm text-muted-foreground">Small (h-1)</p>
+        <Progress value={60} className="h-1" />
+      </div>
+      <div className="space-y-2">
+        <p className="text-sm text-muted-foreground">Default (h-4)</p>
+        <Progress value={60} />
+      </div>
+      <div className="space-y-2">
+        <p className="text-sm text-muted-foreground">Medium (h-2)</p>
+        <Progress value={60} className="h-2" />
+      </div>
+      <div className="space-y-2">
+        <p className="text-sm text-muted-foreground">Large (h-6)</p>
+        <Progress value={60} className="h-6" />
+      </div>
+    </div>
+  ),
+};
+
+// ============================================================================
+// Multi-step Progress
+// ============================================================================
+
+export const MultiStepProgress = {
+  name: 'Multi-step Progress',
+  render: () => {
+    const steps = ['Upload', 'Process', 'Validate', 'Complete'];
+    const currentStep = 2; // 0-indexed, "Validate" is active
+
+    return (
+      <div className="flex flex-col gap-4 max-w-md">
+        <Progress value={((currentStep + 1) / steps.length) * 100} className="h-1" />
+        <div className="flex justify-between">
+          {steps.map((step, i) => (
+            <div key={step} className="flex flex-col items-center gap-1">
+              <div
+                className={`flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium ${
+                  i <= currentStep
+                    ? 'bg-primary text-primary-foreground'
+                    : 'bg-secondary text-muted-foreground'
+                }`}
+              >
+                {i < currentStep ? (
+                  <CheckCircle2 className="h-3.5 w-3.5" />
+                ) : (
+                  i + 1
+                )}
+              </div>
+              <span
+                className={`text-xs ${
+                  i <= currentStep ? 'font-medium' : 'text-muted-foreground'
+                }`}
+              >
+                {step}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  },
+};
+
+// ============================================================================
+// Usage Examples — File Upload
+// ============================================================================
+
+export const FileUpload = {
+  name: 'File Upload',
+  render: () => {
+    const files = [
+      { name: 'quarterly-report.pdf', size: '2.4 MB', progress: 100 },
+      { name: 'user-data-export.csv', size: '8.1 MB', progress: 67 },
+      { name: 'presentation-deck.pptx', size: '15.3 MB', progress: 34 },
+    ];
+
+    return (
+      <div className="flex flex-col gap-4 max-w-md">
+        <div className="flex items-center gap-2">
+          <Upload className="h-4 w-4 text-muted-foreground" />
+          <p className="text-sm font-medium">Uploading 3 files</p>
+        </div>
+        {files.map((file) => (
+          <div key={file.name} className="space-y-2 rounded-lg border p-3">
+            <div className="flex items-center justify-between">
+              <div className="flex flex-col">
+                <span className="text-sm font-medium truncate">{file.name}</span>
+                <span className="text-xs text-muted-foreground">{file.size}</span>
+              </div>
+              <span className="text-xs tabular-nums text-muted-foreground">
+                {file.progress === 100 ? (
+                  <CheckCircle2 className="h-4 w-4 text-primary" />
+                ) : (
+                  `${file.progress}%`
+                )}
+              </span>
+            </div>
+            <Progress value={file.progress} className="h-1" />
+          </div>
+        ))}
+      </div>
+    );
+  },
+};
+
+// ============================================================================
+// Usage Examples — System Health
+// ============================================================================
+
+export const SystemHealth = {
+  name: 'System Health',
+  render: () => {
+    const metrics = [
+      { label: 'CPU', value: 42, icon: <Activity className="h-4 w-4" /> },
+      { label: 'Memory', value: 68, icon: <Loader2 className="h-4 w-4" /> },
+      { label: 'Disk I/O', value: 23, icon: <HardDrive className="h-4 w-4" /> },
+    ];
+
+    function getColor(value: number) {
+      if (value >= 80) return '[&>div]:bg-destructive';
+      if (value >= 60) return '[&>div]:bg-yellow-500';
+      return '';
+    }
+
+    return (
+      <div className="flex flex-col gap-5 max-w-sm">
+        <p className="text-sm font-medium">System Health</p>
+        {metrics.map((metric) => (
+          <div key={metric.label} className="space-y-2">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2 text-sm">
+                <span className="text-muted-foreground">{metric.icon}</span>
+                <span>{metric.label}</span>
+              </div>
+              <span className="text-sm tabular-nums text-muted-foreground">{metric.value}%</span>
+            </div>
+            <Progress value={metric.value} className={`h-1 ${getColor(metric.value)}`} />
+          </div>
+        ))}
+      </div>
+    );
+  },
+};
+
+// ============================================================================
+// Usage Examples — Used Space
+// ============================================================================
+
+export const UsedSpace = {
+  name: 'Used Space',
+  render: () => {
+    const used = 73.2;
+    const total = 100;
+
+    return (
+      <div className="max-w-sm rounded-lg border p-4">
+        <div className="flex items-center gap-2 mb-3">
+          <HardDrive className="h-4 w-4 text-muted-foreground" />
+          <p className="text-sm font-medium">Storage</p>
+        </div>
+        <Progress value={(used / total) * 100} className="h-1 mb-3" />
+        <div className="flex items-center justify-between">
+          <span className="text-xs text-muted-foreground">
+            {used} GB of {total} GB used
+          </span>
+          <span className="text-xs font-medium text-muted-foreground">
+            {(total - used).toFixed(1)} GB free
+          </span>
+        </div>
+      </div>
+    );
   },
 };
diff --git a/packages/apollo-wind/src/components/ui/search.stories.tsx b/packages/apollo-wind/src/components/ui/search.stories.tsx
index 8a5cc24e3..4a0e18b0b 100644
--- a/packages/apollo-wind/src/components/ui/search.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/search.stories.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Search, SearchWithSuggestions } from './search';
 
 const meta = {
-  title: 'Components/Core/Search',
+  title: 'Components/UiPath-review/Search',
   component: Search,
   parameters: {
     layout: 'centered',
diff --git a/packages/apollo-wind/src/components/ui/sheet.stories.tsx b/packages/apollo-wind/src/components/ui/sheet.stories.tsx
index 1d99070d9..4e5a39487 100644
--- a/packages/apollo-wind/src/components/ui/sheet.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/sheet.stories.tsx
@@ -1,24 +1,44 @@
 import type { Meta } from '@storybook/react-vite';
+import {
+  Settings,
+  User,
+  Bell,
+  Shield,
+  CreditCard,
+  FileText,
+  Clock,
+  Tag,
+  ExternalLink,
+} from 'lucide-react';
 import { Button } from './button';
+import { Input } from './input';
+import { Label } from './label';
+import { Separator } from './separator';
 import {
   Sheet,
+  SheetClose,
   SheetContent,
   SheetDescription,
+  SheetFooter,
   SheetHeader,
   SheetTitle,
   SheetTrigger,
 } from './sheet';
 
 const meta: Meta<typeof Sheet> = {
-  title: 'Components/Overlays/Sheet',
+  title: 'Components/Overlays/Drawer (Sheet)',
   component: Sheet,
   tags: ['autodocs'],
 };
 
 export default meta;
 
-export const Default = {
-  args: {},
+// ============================================================================
+// Basic
+// ============================================================================
+
+export const Basic = {
+  name: 'Basic',
   render: () => (
     <Sheet>
       <SheetTrigger asChild>
@@ -26,43 +46,241 @@ export const Default = {
       </SheetTrigger>
       <SheetContent>
         <SheetHeader>
-          <SheetTitle>Edit profile</SheetTitle>
+          <SheetTitle>Sheet Title</SheetTitle>
+          <SheetDescription>
+            This is a basic sheet component. It slides in from the side of the screen.
+          </SheetDescription>
+        </SheetHeader>
+        <div className="py-6">
+          <p className="text-sm text-muted-foreground">
+            Sheet content goes here. Use sheets for supplementary content that doesn't require a full page.
+          </p>
+        </div>
+        <SheetFooter>
+          <SheetClose asChild>
+            <Button variant="outline">Close</Button>
+          </SheetClose>
+          <Button>Save</Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  ),
+};
+
+// ============================================================================
+// Right Side
+// ============================================================================
+
+export const RightSide = {
+  name: 'Right Side',
+  render: () => (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="outline">Open Right Sheet</Button>
+      </SheetTrigger>
+      <SheetContent side="right">
+        <SheetHeader>
+          <SheetTitle>Right Sheet</SheetTitle>
+          <SheetDescription>
+            Slides in from the right edge of the screen. This is the standard position for detail panels, forms, and supplementary content.
+          </SheetDescription>
+        </SheetHeader>
+      </SheetContent>
+    </Sheet>
+  ),
+};
+
+// ============================================================================
+// Examples — With Form
+// ============================================================================
+
+export const WithForm = {
+  name: 'With Form',
+  render: () => (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="outline">Edit Profile</Button>
+      </SheetTrigger>
+      <SheetContent className="flex flex-col">
+        <SheetHeader>
+          <SheetTitle>Edit Profile</SheetTitle>
           <SheetDescription>
-            Make changes to your profile here. Click save when you're done.
+            Update your personal information. Click save when you're done.
           </SheetDescription>
         </SheetHeader>
-        <div className="grid gap-4 py-4">
-          <div className="grid grid-cols-4 items-center gap-4">
-            <label htmlFor="name" className="text-right">
-              Name
-            </label>
-            <input id="name" defaultValue="Pedro Duarte" className="col-span-3" />
+        <div className="flex-1 space-y-4 py-6">
+          <div className="space-y-2">
+            <Label htmlFor="form-name">Full Name</Label>
+            <Input id="form-name" defaultValue="John Doe" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="form-email">Email</Label>
+            <Input id="form-email" type="email" defaultValue="john@company.com" />
           </div>
-          <div className="grid grid-cols-4 items-center gap-4">
-            <label htmlFor="username" className="text-right">
-              Username
-            </label>
-            <input id="username" defaultValue="@peduarte" className="col-span-3" />
+          <div className="space-y-2">
+            <Label htmlFor="form-username">Username</Label>
+            <Input id="form-username" defaultValue="@johndoe" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="form-bio">Bio</Label>
+            <Input id="form-bio" placeholder="Tell us about yourself" />
           </div>
         </div>
+        <SheetFooter>
+          <SheetClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </SheetClose>
+          <Button>Save Changes</Button>
+        </SheetFooter>
       </SheetContent>
     </Sheet>
   ),
 };
 
-export const Left = {
-  args: {},
+// ============================================================================
+// Examples — With Information
+// ============================================================================
+
+export const WithInformation = {
+  name: 'With Information',
   render: () => (
     <Sheet>
       <SheetTrigger asChild>
-        <Button variant="outline">Open from Left</Button>
+        <Button variant="outline">View Details</Button>
       </SheetTrigger>
-      <SheetContent side="left">
+      <SheetContent className="flex flex-col">
         <SheetHeader>
-          <SheetTitle>Navigation</SheetTitle>
-          <SheetDescription>Navigate through your application.</SheetDescription>
+          <SheetTitle>Order #ORD-2024-1847</SheetTitle>
+          <SheetDescription>
+            Placed on February 10, 2026
+          </SheetDescription>
         </SheetHeader>
+        <div className="flex-1 py-6 space-y-6">
+          {/* Status */}
+          <div className="flex items-center gap-2">
+            <span className="inline-flex items-center rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary">
+              In Transit
+            </span>
+            <span className="text-xs text-muted-foreground">Est. delivery: Feb 15, 2026</span>
+          </div>
+
+          <Separator />
+
+          {/* Items */}
+          <div className="space-y-3">
+            <h4 className="text-sm font-medium">Items</h4>
+            {[
+              { name: 'Wireless Keyboard', qty: 1, price: '$79.99' },
+              { name: 'USB-C Hub (7-port)', qty: 2, price: '$45.00' },
+              { name: 'Monitor Stand', qty: 1, price: '$34.99' },
+            ].map((item) => (
+              <div key={item.name} className="flex items-center justify-between text-sm">
+                <div>
+                  <span>{item.name}</span>
+                  <span className="ml-2 text-muted-foreground">x{item.qty}</span>
+                </div>
+                <span className="tabular-nums">{item.price}</span>
+              </div>
+            ))}
+          </div>
+
+          <Separator />
+
+          {/* Summary */}
+          <div className="space-y-2 text-sm">
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">Subtotal</span>
+              <span className="tabular-nums">$204.98</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">Shipping</span>
+              <span className="tabular-nums">$9.99</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">Tax</span>
+              <span className="tabular-nums">$17.42</span>
+            </div>
+            <Separator />
+            <div className="flex justify-between font-medium">
+              <span>Total</span>
+              <span className="tabular-nums">$232.39</span>
+            </div>
+          </div>
+
+          <Separator />
+
+          {/* Shipping */}
+          <div className="space-y-1">
+            <h4 className="text-sm font-medium">Shipping Address</h4>
+            <p className="text-sm text-muted-foreground">
+              John Doe<br />
+              123 Main Street, Apt 4B<br />
+              New York, NY 10001
+            </p>
+          </div>
+        </div>
+        <SheetFooter>
+          <Button variant="outline" className="gap-1.5">
+            <ExternalLink className="h-3.5 w-3.5" />
+            Track Order
+          </Button>
+        </SheetFooter>
       </SheetContent>
     </Sheet>
   ),
 };
+
+// ============================================================================
+// Examples — Settings Panel
+// ============================================================================
+
+export const SettingsPanel = {
+  name: 'Settings Panel',
+  render: () => (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="outline">
+          <Settings className="mr-2 h-4 w-4" />
+          Settings
+        </Button>
+      </SheetTrigger>
+      <SheetContent className="flex flex-col">
+        <SheetHeader>
+          <SheetTitle>Settings</SheetTitle>
+          <SheetDescription>
+            Manage your account preferences.
+          </SheetDescription>
+        </SheetHeader>
+        <div className="flex-1 overflow-y-auto py-4 -mx-6 px-6">
+          {[
+            { icon: <User className="h-4 w-4" />, label: 'Profile', desc: 'Name, email, avatar' },
+            { icon: <Bell className="h-4 w-4" />, label: 'Notifications', desc: 'Email and push preferences' },
+            { icon: <Shield className="h-4 w-4" />, label: 'Security', desc: 'Password, 2FA, sessions' },
+            { icon: <CreditCard className="h-4 w-4" />, label: 'Billing', desc: 'Plans, invoices, payment' },
+            { icon: <Tag className="h-4 w-4" />, label: 'Tags & Labels', desc: 'Organize your content' },
+            { icon: <FileText className="h-4 w-4" />, label: 'API Keys', desc: 'Manage integrations' },
+            { icon: <Clock className="h-4 w-4" />, label: 'Activity Log', desc: 'Recent account activity' },
+          ].map((item, i) => (
+            <button
+              type="button"
+              key={item.label}
+              className={`flex w-full items-center gap-3 rounded-md px-3 py-3 text-left text-sm hover:bg-accent transition-colors ${i === 0 ? 'bg-accent' : ''}`}
+            >
+              <span className="text-muted-foreground">{item.icon}</span>
+              <div className="flex-1">
+                <p className="font-medium">{item.label}</p>
+                <p className="text-xs text-muted-foreground">{item.desc}</p>
+              </div>
+            </button>
+          ))}
+        </div>
+        <SheetFooter>
+          <SheetClose asChild>
+            <Button variant="outline">Close</Button>
+          </SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  ),
+};
+
diff --git a/packages/apollo-wind/src/components/ui/skeleton.stories.tsx b/packages/apollo-wind/src/components/ui/skeleton.stories.tsx
index ce199d534..6ab8ddc52 100644
--- a/packages/apollo-wind/src/components/ui/skeleton.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/skeleton.stories.tsx
@@ -1,7 +1,6 @@
 import type { Meta } from '@storybook/react-vite';
 import { Card, CardContent, CardHeader } from './card';
 import { Skeleton } from './skeleton';
-import { Row, Column } from './layout';
 
 const meta = {
   title: 'Components/Feedback/Skeleton',
@@ -14,73 +13,266 @@ const meta = {
 
 export default meta;
 
-export const Default = {
-  args: {},
-  render: () => <Skeleton className="h-12 w-[250px]" />,
+// ============================================================================
+// Basic Skeleton
+// ============================================================================
+
+export const BasicSkeleton = {
+  name: 'Basic Skeleton',
+  render: () => (
+    <div className="flex flex-col gap-4 w-[300px]">
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-3/4" />
+      <Skeleton className="h-4 w-1/2" />
+    </div>
+  ),
+};
+
+// ============================================================================
+// Skeleton Shapes
+// ============================================================================
+
+export const SkeletonShapes = {
+  name: 'Skeleton Shapes',
+  render: () => (
+    <div className="flex flex-col gap-6 w-[300px]">
+      <div className="space-y-2">
+        <p className="text-sm text-muted-foreground">Rectangle (default)</p>
+        <Skeleton className="h-10 w-full" />
+      </div>
+      <div className="space-y-2">
+        <p className="text-sm text-muted-foreground">Circle</p>
+        <Skeleton className="h-12 w-12 rounded-full" />
+      </div>
+      <div className="space-y-2">
+        <p className="text-sm text-muted-foreground">Square</p>
+        <Skeleton className="h-16 w-16" />
+      </div>
+      <div className="space-y-2">
+        <p className="text-sm text-muted-foreground">Pill</p>
+        <Skeleton className="h-6 w-20 rounded-full" />
+      </div>
+      <div className="space-y-2">
+        <p className="text-sm text-muted-foreground">Text line</p>
+        <Skeleton className="h-3 w-48" />
+      </div>
+    </div>
+  ),
 };
 
-export const Circle = {
-  args: {},
-  render: () => <Skeleton className="h-12 w-12 rounded-full" />,
+// ============================================================================
+// Animated Skeleton
+// ============================================================================
+
+export const AnimatedSkeleton = {
+  name: 'Animated Skeleton',
+  render: () => (
+    <div className="flex flex-col gap-6 w-[300px]">
+      <div className="space-y-2">
+        <p className="text-sm text-muted-foreground">Default (pulse animation)</p>
+        <Skeleton className="h-10 w-full" />
+      </div>
+      <div className="space-y-2">
+        <p className="text-sm text-muted-foreground">No animation</p>
+        <Skeleton className="h-10 w-full animate-none" />
+      </div>
+    </div>
+  ),
 };
 
+// ============================================================================
+// Card Skeleton
+// ============================================================================
+
 export const CardSkeleton = {
-  args: {},
+  name: 'Card Skeleton',
   render: () => (
     <Card className="w-[350px]">
-      <CardHeader>
-        <Skeleton className="h-4 w-[250px]" />
-        <Skeleton className="h-4 w-[200px]" />
+      <CardHeader className="space-y-3">
+        <Skeleton className="h-4 w-3/4" />
+        <Skeleton className="h-3 w-1/2" />
       </CardHeader>
-      <CardContent>
-        <Column gap={2}>
-          <Skeleton className="h-4 w-full" />
-          <Skeleton className="h-4 w-full" />
-          <Skeleton className="h-4 w-[80%]" />
-        </Column>
+      <CardContent className="space-y-3">
+        <Skeleton className="h-3 w-full" />
+        <Skeleton className="h-3 w-full" />
+        <Skeleton className="h-3 w-2/3" />
       </CardContent>
     </Card>
   ),
 };
 
-export const ProfileSkeleton = {
-  args: {},
-  render: () => (
-    <Row gap={4} align="center">
-      <Skeleton className="h-12 w-12 rounded-full" />
-      <Column gap={2}>
-        <Skeleton className="h-4 w-[250px]" />
-        <Skeleton className="h-4 w-[200px]" />
-      </Column>
-    </Row>
-  ),
-};
+// ============================================================================
+// List Skeleton
+// ============================================================================
 
 export const ListSkeleton = {
-  args: {},
+  name: 'List Skeleton',
   render: () => (
-    <Column gap={4} className="w-[350px]">
+    <div className="flex flex-col gap-4 w-[350px]">
       {Array.from({ length: 5 }).map((_, i) => (
-        <Row key={i} gap={4} align="center">
-          <Skeleton className="h-10 w-10 rounded-full" />
-          <Column flex={1} gap={2}>
-            <Skeleton className="h-4 w-full" />
-            <Skeleton className="h-4 w-3/4" />
-          </Column>
-        </Row>
+        <div key={i} className="flex items-center gap-3">
+          <Skeleton className="h-10 w-10 shrink-0 rounded-full" />
+          <div className="flex-1 space-y-2">
+            <Skeleton className="h-3 w-3/4" />
+            <Skeleton className="h-3 w-1/2" />
+          </div>
+        </div>
       ))}
-    </Column>
+    </div>
   ),
 };
 
+// ============================================================================
+// Table Skeleton
+// ============================================================================
+
 export const TableSkeleton = {
-  args: {},
+  name: 'Table Skeleton',
   render: () => (
-    <Column gap={3} className="w-[600px]">
-      <Skeleton className="h-8 w-full" />
+    <div className="w-[600px] rounded-lg border">
+      {/* Header */}
+      <div className="flex items-center gap-4 border-b p-3">
+        <Skeleton className="h-3 w-[120px]" />
+        <Skeleton className="h-3 w-[160px]" />
+        <Skeleton className="h-3 w-[100px]" />
+        <Skeleton className="h-3 w-[80px] ml-auto" />
+      </div>
+      {/* Rows */}
       {Array.from({ length: 5 }).map((_, i) => (
-        <Skeleton key={i} className="h-12 w-full" />
+        <div key={i} className="flex items-center gap-4 border-b last:border-0 p-3">
+          <Skeleton className="h-3 w-[120px]" />
+          <Skeleton className="h-3 w-[160px]" />
+          <Skeleton className="h-3 w-[100px]" />
+          <Skeleton className="h-3 w-[80px] ml-auto" />
+        </div>
       ))}
-    </Column>
+    </div>
+  ),
+};
+
+// ============================================================================
+// Usage Examples — Profile Loading
+// ============================================================================
+
+export const ProfileLoading = {
+  name: 'Profile Loading',
+  render: () => (
+    <div className="w-[350px] rounded-lg border p-6">
+      <div className="flex items-center gap-4 mb-6">
+        <Skeleton className="h-16 w-16 shrink-0 rounded-full" />
+        <div className="flex-1 space-y-2">
+          <Skeleton className="h-4 w-3/4" />
+          <Skeleton className="h-3 w-1/2" />
+        </div>
+      </div>
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <Skeleton className="h-3 w-16" />
+          <Skeleton className="h-8 w-full" />
+        </div>
+        <div className="space-y-2">
+          <Skeleton className="h-3 w-12" />
+          <Skeleton className="h-8 w-full" />
+        </div>
+        <div className="space-y-2">
+          <Skeleton className="h-3 w-20" />
+          <Skeleton className="h-8 w-full" />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================================================
+// Usage Examples — Dashboard Loading
+// ============================================================================
+
+export const DashboardLoading = {
+  name: 'Dashboard Loading',
+  render: () => (
+    <div className="w-[600px] space-y-6">
+      {/* Stats row */}
+      <div className="grid grid-cols-3 gap-4">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <div key={i} className="rounded-lg border p-4 space-y-3">
+            <Skeleton className="h-3 w-20" />
+            <Skeleton className="h-6 w-24" />
+            <Skeleton className="h-3 w-16" />
+          </div>
+        ))}
+      </div>
+      {/* Chart area */}
+      <div className="rounded-lg border p-4 space-y-4">
+        <div className="flex items-center justify-between">
+          <Skeleton className="h-4 w-32" />
+          <Skeleton className="h-8 w-24" />
+        </div>
+        <Skeleton className="h-[200px] w-full" />
+      </div>
+      {/* Recent activity */}
+      <div className="rounded-lg border p-4 space-y-4">
+        <Skeleton className="h-4 w-28" />
+        {Array.from({ length: 3 }).map((_, i) => (
+          <div key={i} className="flex items-center gap-3">
+            <Skeleton className="h-8 w-8 shrink-0 rounded-full" />
+            <div className="flex-1 space-y-2">
+              <Skeleton className="h-3 w-3/4" />
+              <Skeleton className="h-3 w-1/3" />
+            </div>
+            <Skeleton className="h-3 w-12" />
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+};
+
+// ============================================================================
+// Usage Examples — Table Loading
+// ============================================================================
+
+export const TableLoading = {
+  name: 'Table Loading',
+  render: () => (
+    <div className="w-[600px] space-y-4">
+      {/* Toolbar */}
+      <div className="flex items-center justify-between">
+        <Skeleton className="h-8 w-[200px]" />
+        <div className="flex gap-2">
+          <Skeleton className="h-8 w-20" />
+          <Skeleton className="h-8 w-20" />
+        </div>
+      </div>
+      {/* Table */}
+      <div className="rounded-lg border">
+        {/* Header */}
+        <div className="flex items-center gap-4 border-b bg-muted/40 p-3">
+          <Skeleton className="h-4 w-4 shrink-0" />
+          <Skeleton className="h-3 w-[100px]" />
+          <Skeleton className="h-3 w-[140px]" />
+          <Skeleton className="h-3 w-[80px]" />
+          <Skeleton className="h-3 w-[60px] ml-auto" />
+        </div>
+        {/* Rows */}
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div key={i} className="flex items-center gap-4 border-b last:border-0 p-3">
+            <Skeleton className="h-4 w-4 shrink-0" />
+            <Skeleton className="h-3 w-[100px]" />
+            <Skeleton className="h-3 w-[140px]" />
+            <Skeleton className="h-3 w-[80px]" />
+            <Skeleton className="h-3 w-[60px] ml-auto" />
+          </div>
+        ))}
+      </div>
+      {/* Pagination */}
+      <div className="flex items-center justify-between">
+        <Skeleton className="h-3 w-32" />
+        <div className="flex gap-1">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <Skeleton key={i} className="h-8 w-8" />
+          ))}
+        </div>
+      </div>
+    </div>
   ),
 };
diff --git a/packages/apollo-wind/src/components/ui/sonner.stories.tsx b/packages/apollo-wind/src/components/ui/sonner.stories.tsx
index a112c4916..17428ea07 100644
--- a/packages/apollo-wind/src/components/ui/sonner.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/sonner.stories.tsx
@@ -1,37 +1,518 @@
 import type { Meta } from '@storybook/react-vite';
-import { toast } from 'sonner';
+import { toast, Toaster as SonnerToaster } from 'sonner';
 import { Button } from './button';
 import { Toaster } from './sonner';
 
 const meta: Meta<typeof Toaster> = {
-  title: 'Components/Feedback/Sonner',
+  title: 'Components/Feedback/Toast (Sonner)',
   component: Toaster,
   tags: ['autodocs'],
 };
 
 export default meta;
 
-export const Default = {
-  args: {},
+// ============================================================================
+// Basic Toast Types
+// ============================================================================
+
+export const BasicToastTypes = {
+  name: 'Basic Toast Types',
+  render: () => (
+    <>
+      <Toaster />
+      <div className="flex flex-wrap gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => toast('Event has been created', {
+            description: 'Sunday, December 03, 2023 at 9:00 AM',
+          })}
+        >
+          Default
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => toast.success('Changes saved successfully')}
+        >
+          Success
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => toast.error('Something went wrong')}
+        >
+          Error
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => toast.warning('Your session is about to expire')}
+        >
+          Warning
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => toast.info('A new version is available')}
+        >
+          Info
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => toast.loading('Loading data…')}
+        >
+          Loading
+        </Button>
+      </div>
+    </>
+  ),
+};
+
+// ============================================================================
+// Action Toast
+// ============================================================================
+
+export const ActionToast = {
+  name: 'Action Toast',
   render: () => (
     <>
       <Toaster />
-      <div className="space-x-2">
+      <div className="flex flex-wrap gap-2">
         <Button
           variant="outline"
+          size="sm"
           onClick={() =>
-            toast('Event has been created', {
-              description: 'Sunday, December 03, 2023 at 9:00 AM',
+            toast('File deleted', {
+              description: 'report-q4.pdf has been moved to trash.',
+              action: {
+                label: 'Undo',
+                onClick: () => toast.success('File restored'),
+              },
             })
           }
         >
-          Show Toast
+          With Undo Action
         </Button>
-        <Button variant="outline" onClick={() => toast.success('Success message')}>
-          Success
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() =>
+            toast.error('Upload failed', {
+              description: 'The file could not be uploaded.',
+              action: {
+                label: 'Retry',
+                onClick: () => toast.loading('Retrying upload…'),
+              },
+            })
+          }
+        >
+          With Retry Action
         </Button>
-        <Button variant="outline" onClick={() => toast.error('Error message')}>
-          Error
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() =>
+            toast('New update available', {
+              description: 'Version 2.4.0 is ready to install.',
+              action: {
+                label: 'Update',
+                onClick: () => toast.success('Updating…'),
+              },
+              cancel: {
+                label: 'Dismiss',
+                onClick: () => {},
+              },
+            })
+          }
+        >
+          With Action & Cancel
+        </Button>
+      </div>
+    </>
+  ),
+};
+
+// ============================================================================
+// Promise Toast
+// ============================================================================
+
+export const PromiseToast = {
+  name: 'Promise Toast',
+  render: () => {
+    function simulateSuccess() {
+      return new Promise((resolve) => setTimeout(resolve, 2000));
+    }
+
+    function simulateFailure() {
+      return new Promise((_, reject) => setTimeout(() => reject(new Error('Network error')), 2000));
+    }
+
+    return (
+      <>
+        <Toaster />
+        <div className="flex flex-wrap gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() =>
+              toast.promise(simulateSuccess(), {
+                loading: 'Saving changes…',
+                success: 'Changes saved successfully!',
+                error: 'Failed to save changes.',
+              })
+            }
+          >
+            Promise (Success)
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() =>
+              toast.promise(simulateFailure(), {
+                loading: 'Uploading file…',
+                success: 'File uploaded!',
+                error: 'Upload failed. Please try again.',
+              })
+            }
+          >
+            Promise (Failure)
+          </Button>
+        </div>
+      </>
+    );
+  },
+};
+
+// ============================================================================
+// Rich Content Toast
+// ============================================================================
+
+export const RichContentToast = {
+  name: 'Rich Content Toast',
+  render: () => (
+    <>
+      <Toaster />
+      <div className="flex flex-wrap gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() =>
+            toast('Deployment Complete', {
+              description: (
+                <div className="mt-1 space-y-1 text-xs">
+                  <p>Environment: <span className="font-medium">Production</span></p>
+                  <p>Version: <span className="font-medium">v2.4.0</span></p>
+                  <p>Duration: <span className="font-medium">1m 23s</span></p>
+                </div>
+              ),
+            })
+          }
+        >
+          Rich Description
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() =>
+            toast.success('Team member added', {
+              description: 'jane.doe@company.com has been invited to the project.',
+            })
+          }
+        >
+          With Long Description
+        </Button>
+      </div>
+    </>
+  ),
+};
+
+// ============================================================================
+// Multiple Toasts
+// ============================================================================
+
+export const MultipleToasts = {
+  name: 'Multiple Toasts',
+  render: () => {
+    function fireAll() {
+      toast.success('File uploaded');
+      setTimeout(() => toast.info('Processing started'), 300);
+      setTimeout(() => toast.warning('Large file detected'), 600);
+      setTimeout(() => toast('Estimated time: 2 minutes'), 900);
+    }
+
+    return (
+      <>
+        <Toaster />
+        <div className="flex flex-wrap gap-2">
+          <Button variant="outline" size="sm" onClick={fireAll}>
+            Fire Multiple Toasts
+          </Button>
+          <Button variant="outline" size="sm" onClick={() => toast.dismiss()}>
+            Dismiss All
+          </Button>
+        </div>
+      </>
+    );
+  },
+};
+
+// ============================================================================
+// Toast Positioning
+// ============================================================================
+
+export const ToastPositioning = {
+  name: 'Toast Positioning',
+  render: () => (
+    <div className="flex flex-col gap-6 max-w-md">
+      <div className="space-y-2">
+        <p className="text-sm font-medium">Bottom Right</p>
+        <p className="text-xs text-muted-foreground">
+          Used for background notifications, system events, and non-critical feedback.
+        </p>
+        <SonnerToaster position="bottom-right" toastOptions={{ classNames: { toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg' } }} />
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => toast('Background sync complete', { position: 'bottom-right' })}
+        >
+          Bottom Right Toast
+        </Button>
+      </div>
+
+      <div className="space-y-2">
+        <p className="text-sm font-medium">Top Center</p>
+        <p className="text-xs text-muted-foreground">
+          Used for important confirmations, form submissions, and user-initiated actions that need prominent visibility.
+        </p>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => toast.success('Profile updated', { position: 'top-center' })}
+        >
+          Top Center Toast
+        </Button>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================================================
+// Toast Duration
+// ============================================================================
+
+export const ToastDuration = {
+  name: 'Toast Duration',
+  render: () => (
+    <>
+      <Toaster />
+      <div className="flex flex-wrap gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => toast('Quick notification', { duration: 2000 })}
+        >
+          Short (2s)
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => toast('Standard notification', { duration: 4000 })}
+        >
+          Default (4s)
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() =>
+            toast('This toast stays longer for important messages', { duration: 8000 })
+          }
+        >
+          Long (8s)
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() =>
+            toast('This toast will not auto-dismiss', {
+              duration: Number.POSITIVE_INFINITY,
+              action: { label: 'Dismiss', onClick: () => {} },
+            })
+          }
+        >
+          Persistent
+        </Button>
+      </div>
+    </>
+  ),
+};
+
+// ============================================================================
+// Usage Examples — Form Submissions
+// ============================================================================
+
+export const FormSubmissions = {
+  name: 'Form Submissions',
+  render: () => {
+    function simulateSave() {
+      return new Promise((resolve) => setTimeout(resolve, 1500));
+    }
+
+    return (
+      <>
+        <Toaster />
+        <div className="flex flex-wrap gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() =>
+              toast.promise(simulateSave(), {
+                loading: 'Saving profile…',
+                success: 'Profile updated successfully!',
+                error: 'Failed to update profile.',
+              })
+            }
+          >
+            Save Profile
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() =>
+              toast.success('Settings saved', {
+                description: 'Your notification preferences have been updated.',
+              })
+            }
+          >
+            Save Settings
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() =>
+              toast.error('Validation failed', {
+                description: 'Please fix the errors in the form before submitting.',
+              })
+            }
+          >
+            Validation Error
+          </Button>
+        </div>
+      </>
+    );
+  },
+};
+
+// ============================================================================
+// Usage Examples — File Operations
+// ============================================================================
+
+export const FileOperations = {
+  name: 'File Operations',
+  render: () => {
+    function simulateUpload() {
+      return new Promise((resolve) => setTimeout(resolve, 2000));
+    }
+
+    return (
+      <>
+        <Toaster />
+        <div className="flex flex-wrap gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() =>
+              toast.promise(simulateUpload(), {
+                loading: 'Uploading report.pdf…',
+                success: 'File uploaded successfully!',
+                error: 'Upload failed. Check your connection.',
+              })
+            }
+          >
+            Upload File
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() =>
+              toast('File moved to trash', {
+                description: 'quarterly-report.pdf',
+                action: {
+                  label: 'Undo',
+                  onClick: () => toast.success('File restored'),
+                },
+              })
+            }
+          >
+            Delete File
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() =>
+              toast.success('Export complete', {
+                description: 'data-export.csv has been downloaded.',
+              })
+            }
+          >
+            Export Data
+          </Button>
+        </div>
+      </>
+    );
+  },
+};
+
+// ============================================================================
+// Usage Examples — User Actions
+// ============================================================================
+
+export const UserActions = {
+  name: 'User Actions',
+  render: () => (
+    <>
+      <Toaster />
+      <div className="flex flex-wrap gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() =>
+            toast.success('Invitation sent', {
+              description: 'An invite has been sent to jane@company.com.',
+            })
+          }
+        >
+          Invite Member
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() =>
+            toast('Link copied to clipboard', { duration: 2000 })
+          }
+        >
+          Copy Link
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() =>
+            toast.warning('Are you sure?', {
+              description: 'This action cannot be undone.',
+              action: {
+                label: 'Confirm',
+                onClick: () => toast.success('Item permanently deleted'),
+              },
+              cancel: {
+                label: 'Cancel',
+                onClick: () => {},
+              },
+              duration: Number.POSITIVE_INFINITY,
+            })
+          }
+        >
+          Destructive Action
         </Button>
       </div>
     </>
diff --git a/packages/apollo-wind/src/components/ui/table.stories.tsx b/packages/apollo-wind/src/components/ui/table.stories.tsx
deleted file mode 100644
index bf81f65cc..000000000
--- a/packages/apollo-wind/src/components/ui/table.stories.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import type { Meta } from '@storybook/react-vite';
-import {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from './table';
-
-const meta: Meta<typeof Table> = {
-  title: 'Components/Data Display/Table',
-  component: Table,
-  tags: ['autodocs'],
-};
-
-export default meta;
-
-const invoices = [
-  {
-    invoice: 'INV001',
-    paymentStatus: 'Paid',
-    totalAmount: '$250.00',
-    paymentMethod: 'Credit Card',
-  },
-  {
-    invoice: 'INV002',
-    paymentStatus: 'Pending',
-    totalAmount: '$150.00',
-    paymentMethod: 'PayPal',
-  },
-  {
-    invoice: 'INV003',
-    paymentStatus: 'Unpaid',
-    totalAmount: '$350.00',
-    paymentMethod: 'Bank Transfer',
-  },
-  {
-    invoice: 'INV004',
-    paymentStatus: 'Paid',
-    totalAmount: '$450.00',
-    paymentMethod: 'Credit Card',
-  },
-];
-
-export const Default = {
-  args: {},
-  render: () => (
-    <Table>
-      <TableCaption>A list of your recent invoices.</TableCaption>
-      <TableHeader>
-        <TableRow>
-          <TableHead className="w-[100px]">Invoice</TableHead>
-          <TableHead>Status</TableHead>
-          <TableHead>Method</TableHead>
-          <TableHead className="text-right">Amount</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {invoices.map((invoice) => (
-          <TableRow key={invoice.invoice}>
-            <TableCell className="font-medium">{invoice.invoice}</TableCell>
-            <TableCell>{invoice.paymentStatus}</TableCell>
-            <TableCell>{invoice.paymentMethod}</TableCell>
-            <TableCell className="text-right">{invoice.totalAmount}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  ),
-};
diff --git a/packages/apollo-wind/src/components/ui/tabs.stories.tsx b/packages/apollo-wind/src/components/ui/tabs.stories.tsx
index 7350b6e1a..fb9d3d597 100644
--- a/packages/apollo-wind/src/components/ui/tabs.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/tabs.stories.tsx
@@ -1,8 +1,10 @@
 import type { Meta } from '@storybook/react-vite';
+import { Bell, CreditCard, Settings, Shield, User } from 'lucide-react';
 import { Button } from './button';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './card';
 import { Input } from './input';
 import { Label } from './label';
+import { Switch } from './switch';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs';
 
 const meta: Meta<typeof Tabs> = {
@@ -13,8 +15,12 @@ const meta: Meta<typeof Tabs> = {
 
 export default meta;
 
-export const Default = {
-  args: {},
+// ============================================================================
+// Basic
+// ============================================================================
+
+export const Basic = {
+  name: 'Basic',
   render: () => (
     <Tabs defaultValue="account" className="w-[400px]">
       <TabsList>
@@ -22,51 +28,303 @@ export const Default = {
         <TabsTrigger value="password">Password</TabsTrigger>
       </TabsList>
       <TabsContent value="account">
-        <Card>
-          <CardHeader>
-            <CardTitle>Account</CardTitle>
-            <CardDescription>
-              Make changes to your account here. Click save when you're done.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-2">
-            <div className="space-y-1">
-              <Label htmlFor="name">Name</Label>
-              <Input id="name" defaultValue="Pedro Duarte" />
-            </div>
-            <div className="space-y-1">
-              <Label htmlFor="username">Username</Label>
-              <Input id="username" defaultValue="@peduarte" />
-            </div>
-          </CardContent>
-          <CardFooter>
-            <Button>Save changes</Button>
-          </CardFooter>
-        </Card>
+        <div className="rounded-lg border p-4">
+          <p className="text-sm">Manage your account settings and preferences.</p>
+        </div>
       </TabsContent>
       <TabsContent value="password">
-        <Card>
-          <CardHeader>
-            <CardTitle>Password</CardTitle>
-            <CardDescription>
-              Change your password here. After saving, you'll be logged out.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-2">
-            <div className="space-y-1">
-              <Label htmlFor="current">Current password</Label>
-              <Input id="current" type="password" />
-            </div>
-            <div className="space-y-1">
-              <Label htmlFor="new">New password</Label>
-              <Input id="new" type="password" />
-            </div>
-          </CardContent>
-          <CardFooter>
-            <Button>Save password</Button>
-          </CardFooter>
-        </Card>
+        <div className="rounded-lg border p-4">
+          <p className="text-sm">Change your password and security settings.</p>
+        </div>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+// ============================================================================
+// Line
+// ============================================================================
+
+export const Line = {
+  name: 'Line',
+  render: () => (
+    <Tabs defaultValue="overview" className="w-[500px]">
+      <TabsList className="w-full justify-start rounded-none border-b bg-transparent p-0">
+        <TabsTrigger
+          value="overview"
+          className="relative rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
+        >
+          Overview
+        </TabsTrigger>
+        <TabsTrigger
+          value="analytics"
+          className="relative rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
+        >
+          Analytics
+        </TabsTrigger>
+        <TabsTrigger
+          value="reports"
+          className="relative rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
+        >
+          Reports
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value="overview">
+        <div className="pt-4">
+          <p className="text-sm">Overview of your project performance and metrics.</p>
+        </div>
+      </TabsContent>
+      <TabsContent value="analytics">
+        <div className="pt-4">
+          <p className="text-sm">Detailed analytics and usage data.</p>
+        </div>
+      </TabsContent>
+      <TabsContent value="reports">
+        <div className="pt-4">
+          <p className="text-sm">Generated reports and exports.</p>
+        </div>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+// ============================================================================
+// Disabled
+// ============================================================================
+
+export const Disabled = {
+  name: 'Disabled',
+  render: () => (
+    <Tabs defaultValue="general" className="w-[400px]">
+      <TabsList>
+        <TabsTrigger value="general">General</TabsTrigger>
+        <TabsTrigger value="security">Security</TabsTrigger>
+        <TabsTrigger value="billing" disabled>
+          Billing
+        </TabsTrigger>
+        <TabsTrigger value="advanced" disabled>
+          Advanced
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value="general">
+        <div className="rounded-lg border p-4">
+          <p className="text-sm">General settings for your workspace.</p>
+        </div>
+      </TabsContent>
+      <TabsContent value="security">
+        <div className="rounded-lg border p-4">
+          <p className="text-sm">Security and access control settings.</p>
+        </div>
       </TabsContent>
     </Tabs>
   ),
 };
+
+// ============================================================================
+// Examples
+// ============================================================================
+
+export const Examples = {
+  name: 'Examples',
+  render: () => (
+    <div className="flex flex-col gap-10">
+      {/* Settings page */}
+      <div>
+        <p className="text-sm font-medium mb-3">Settings Page</p>
+        <Tabs defaultValue="profile" className="w-[500px]">
+          <TabsList>
+            <TabsTrigger value="profile" className="gap-1.5">
+              <User className="h-4 w-4" />
+              Profile
+            </TabsTrigger>
+            <TabsTrigger value="notifications" className="gap-1.5">
+              <Bell className="h-4 w-4" />
+              Notifications
+            </TabsTrigger>
+            <TabsTrigger value="security" className="gap-1.5">
+              <Shield className="h-4 w-4" />
+              Security
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value="profile">
+            <Card>
+              <CardHeader>
+                <CardTitle>Profile</CardTitle>
+                <CardDescription>
+                  Update your personal information.
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-1">
+                  <Label htmlFor="display-name">Display name</Label>
+                  <Input id="display-name" defaultValue="John Doe" />
+                </div>
+                <div className="space-y-1">
+                  <Label htmlFor="email">Email</Label>
+                  <Input id="email" defaultValue="john@example.com" />
+                </div>
+              </CardContent>
+              <CardFooter>
+                <Button>Save changes</Button>
+              </CardFooter>
+            </Card>
+          </TabsContent>
+          <TabsContent value="notifications">
+            <Card>
+              <CardHeader>
+                <CardTitle>Notifications</CardTitle>
+                <CardDescription>
+                  Configure how you receive notifications.
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="text-sm font-medium">Email notifications</p>
+                    <p className="text-xs text-muted-foreground">Receive updates via email</p>
+                  </div>
+                  <Switch defaultChecked />
+                </div>
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="text-sm font-medium">Push notifications</p>
+                    <p className="text-xs text-muted-foreground">Receive push alerts</p>
+                  </div>
+                  <Switch />
+                </div>
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="text-sm font-medium">Weekly digest</p>
+                    <p className="text-xs text-muted-foreground">Get a summary every week</p>
+                  </div>
+                  <Switch defaultChecked />
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+          <TabsContent value="security">
+            <Card>
+              <CardHeader>
+                <CardTitle>Security</CardTitle>
+                <CardDescription>
+                  Manage your password and two-factor authentication.
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-1">
+                  <Label htmlFor="current-pw">Current password</Label>
+                  <Input id="current-pw" type="password" />
+                </div>
+                <div className="space-y-1">
+                  <Label htmlFor="new-pw">New password</Label>
+                  <Input id="new-pw" type="password" />
+                </div>
+              </CardContent>
+              <CardFooter>
+                <Button>Update password</Button>
+              </CardFooter>
+            </Card>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      {/* Pricing tabs */}
+      <div>
+        <p className="text-sm font-medium mb-3">Pricing Plans</p>
+        <Tabs defaultValue="monthly" className="w-[500px]">
+          <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="monthly">Monthly</TabsTrigger>
+            <TabsTrigger value="annual">Annual</TabsTrigger>
+          </TabsList>
+          <TabsContent value="monthly">
+            <div className="grid gap-4 pt-2">
+              {[
+                { name: 'Starter', price: '$9', desc: 'For individuals' },
+                { name: 'Pro', price: '$29', desc: 'For small teams' },
+                { name: 'Enterprise', price: '$99', desc: 'For organizations' },
+              ].map((plan) => (
+                <div key={plan.name} className="flex items-center justify-between rounded-lg border p-4">
+                  <div>
+                    <p className="text-sm font-medium">{plan.name}</p>
+                    <p className="text-xs text-muted-foreground">{plan.desc}</p>
+                  </div>
+                  <div className="text-right">
+                    <p className="text-lg font-bold">{plan.price}</p>
+                    <p className="text-xs text-muted-foreground">/month</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </TabsContent>
+          <TabsContent value="annual">
+            <div className="grid gap-4 pt-2">
+              {[
+                { name: 'Starter', price: '$7', desc: 'For individuals' },
+                { name: 'Pro', price: '$23', desc: 'For small teams' },
+                { name: 'Enterprise', price: '$79', desc: 'For organizations' },
+              ].map((plan) => (
+                <div key={plan.name} className="flex items-center justify-between rounded-lg border p-4">
+                  <div>
+                    <p className="text-sm font-medium">{plan.name}</p>
+                    <p className="text-xs text-muted-foreground">{plan.desc}</p>
+                  </div>
+                  <div className="text-right">
+                    <p className="text-lg font-bold">{plan.price}</p>
+                    <p className="text-xs text-muted-foreground">/month (billed annually)</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      {/* Dashboard tabs (line style) */}
+      <div>
+        <p className="text-sm font-medium mb-3">Dashboard</p>
+        <Tabs defaultValue="overview" className="w-[500px]">
+          <TabsList className="w-full justify-start rounded-none border-b bg-transparent p-0">
+            {['Overview', 'Automations', 'Logs', 'Settings'].map((tab) => (
+              <TabsTrigger
+                key={tab}
+                value={tab.toLowerCase()}
+                className="relative rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
+              >
+                {tab}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          <TabsContent value="overview">
+            <div className="grid grid-cols-3 gap-4 pt-4">
+              {[
+                { label: 'Total Runs', value: '2,450' },
+                { label: 'Success Rate', value: '98.2%' },
+                { label: 'Avg Duration', value: '1.3s' },
+              ].map((stat) => (
+                <div key={stat.label} className="rounded-lg border p-4">
+                  <p className="text-xs text-muted-foreground">{stat.label}</p>
+                  <p className="text-2xl font-bold">{stat.value}</p>
+                </div>
+              ))}
+            </div>
+          </TabsContent>
+          <TabsContent value="automations">
+            <div className="pt-4">
+              <p className="text-sm text-muted-foreground">Your active automations and workflows.</p>
+            </div>
+          </TabsContent>
+          <TabsContent value="logs">
+            <div className="pt-4">
+              <p className="text-sm text-muted-foreground">Recent execution logs and audit trail.</p>
+            </div>
+          </TabsContent>
+          <TabsContent value="settings">
+            <div className="pt-4">
+              <p className="text-sm text-muted-foreground">Workspace configuration and preferences.</p>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  ),
+};
diff --git a/packages/apollo-wind/src/components/ui/tooltip.stories.tsx b/packages/apollo-wind/src/components/ui/tooltip.stories.tsx
index 4e70bc198..aeb651344 100644
--- a/packages/apollo-wind/src/components/ui/tooltip.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/tooltip.stories.tsx
@@ -1,5 +1,27 @@
 import type { Meta } from '@storybook/react-vite';
+import {
+  Bold,
+  Italic,
+  Underline,
+  AlignLeft,
+  AlignCenter,
+  AlignRight,
+  Copy,
+  Download,
+  Heart,
+  Info,
+  Pencil,
+  Plus,
+  Settings,
+  Share2,
+  Trash2,
+  Undo,
+  Redo,
+  Keyboard,
+} from 'lucide-react';
 import { Button } from './button';
+import { Input } from './input';
+import { Separator } from './separator';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip';
 
 const meta: Meta<typeof Tooltip> = {
@@ -10,8 +32,12 @@ const meta: Meta<typeof Tooltip> = {
 
 export default meta;
 
-export const Default = {
-  args: {},
+// ============================================================================
+// Basic
+// ============================================================================
+
+export const Basic = {
+  name: 'Basic',
   render: () => (
     <TooltipProvider>
       <Tooltip>
@@ -19,9 +45,378 @@ export const Default = {
           <Button variant="outline">Hover me</Button>
         </TooltipTrigger>
         <TooltipContent>
-          <p>Add to library</p>
+          <p>This is a tooltip</p>
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>
   ),
 };
+
+// ============================================================================
+// Position
+// ============================================================================
+
+export const Position = {
+  name: 'Position',
+  render: () => (
+    <TooltipProvider>
+      <div className="flex items-center justify-center gap-6 py-16">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="outline" size="sm">Top</Button>
+          </TooltipTrigger>
+          <TooltipContent side="top">
+            <p>Tooltip on top</p>
+          </TooltipContent>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="outline" size="sm">Bottom</Button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            <p>Tooltip on bottom</p>
+          </TooltipContent>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="outline" size="sm">Left</Button>
+          </TooltipTrigger>
+          <TooltipContent side="left">
+            <p>Tooltip on left</p>
+          </TooltipContent>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="outline" size="sm">Right</Button>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            <p>Tooltip on right</p>
+          </TooltipContent>
+        </Tooltip>
+      </div>
+    </TooltipProvider>
+  ),
+};
+
+// ============================================================================
+// Tooltip with Icons
+// ============================================================================
+
+export const TooltipWithIcons = {
+  name: 'Tooltip with Icons',
+  render: () => (
+    <TooltipProvider>
+      <div className="flex items-center gap-1">
+        {[
+          { icon: <Bold className="h-4 w-4" />, label: 'Bold' },
+          { icon: <Italic className="h-4 w-4" />, label: 'Italic' },
+          { icon: <Underline className="h-4 w-4" />, label: 'Underline' },
+          { divider: true },
+          { icon: <AlignLeft className="h-4 w-4" />, label: 'Align Left' },
+          { icon: <AlignCenter className="h-4 w-4" />, label: 'Align Center' },
+          { icon: <AlignRight className="h-4 w-4" />, label: 'Align Right' },
+        ].map((item, i) =>
+          'divider' in item ? (
+            <Separator key={i} orientation="vertical" className="mx-1 h-6" />
+          ) : (
+            <Tooltip key={item.label}>
+              <TooltipTrigger asChild>
+                <Button variant="ghost" size="icon" className="h-8 w-8">
+                  {item.icon}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{item.label}</p>
+              </TooltipContent>
+            </Tooltip>
+          )
+        )}
+      </div>
+    </TooltipProvider>
+  ),
+};
+
+// ============================================================================
+// Tooltip with Rich Content
+// ============================================================================
+
+export const TooltipWithRichContent = {
+  name: 'Tooltip with Rich Content',
+  render: () => (
+    <TooltipProvider>
+      <div className="flex items-center gap-4">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="outline" size="sm">
+              <Info className="mr-2 h-4 w-4" />
+              API Limits
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent className="w-64 p-3">
+            <div className="space-y-2">
+              <p className="text-sm font-medium">Rate Limiting</p>
+              <p className="text-xs text-muted-foreground">
+                Your current plan allows 1,000 requests per minute. Exceeding this limit will result in 429 errors.
+              </p>
+              <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                <Keyboard className="h-3 w-3" />
+                Press ⌘K to view full docs
+              </div>
+            </div>
+          </TooltipContent>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="outline" size="sm">
+              <Info className="mr-2 h-4 w-4" />
+              Storage
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent className="w-56 p-3">
+            <div className="space-y-2">
+              <p className="text-sm font-medium">Storage Usage</p>
+              <div className="h-1.5 w-full rounded-full bg-secondary">
+                <div className="h-full w-3/4 rounded-full bg-primary" />
+              </div>
+              <p className="text-xs text-muted-foreground">
+                7.5 GB of 10 GB used
+              </p>
+            </div>
+          </TooltipContent>
+        </Tooltip>
+      </div>
+    </TooltipProvider>
+  ),
+};
+
+// ============================================================================
+// Tooltip with Different Content
+// ============================================================================
+
+export const TooltipWithDifferentContent = {
+  name: 'Tooltip with Different Content',
+  render: () => (
+    <TooltipProvider>
+      <div className="flex items-center gap-4">
+        {/* Short text */}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="outline" size="sm">Short</Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Save</p>
+          </TooltipContent>
+        </Tooltip>
+
+        {/* With shortcut */}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="outline" size="sm">With Shortcut</Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <div className="flex items-center gap-2">
+              <span>Save</span>
+              <kbd className="rounded border bg-muted px-1.5 py-0.5 text-[10px] font-mono">⌘S</kbd>
+            </div>
+          </TooltipContent>
+        </Tooltip>
+
+        {/* Multi-line */}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="outline" size="sm">Multi-line</Button>
+          </TooltipTrigger>
+          <TooltipContent className="max-w-[200px]">
+            <p>This tooltip has a longer description that wraps across multiple lines.</p>
+          </TooltipContent>
+        </Tooltip>
+
+        {/* Disabled state info */}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span tabIndex={0}>
+              <Button variant="outline" size="sm" disabled>Disabled</Button>
+            </span>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>You need admin access to perform this action.</p>
+          </TooltipContent>
+        </Tooltip>
+      </div>
+    </TooltipProvider>
+  ),
+};
+
+// ============================================================================
+// Tooltip with Form Elements
+// ============================================================================
+
+export const TooltipWithFormElements = {
+  name: 'Tooltip with Form Elements',
+  render: () => (
+    <TooltipProvider>
+      <div className="flex flex-col gap-4 max-w-sm">
+        <div className="space-y-2">
+          <div className="flex items-center gap-1.5">
+            <label htmlFor="api-key" className="text-sm font-medium">API Key</label>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Info className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
+              </TooltipTrigger>
+              <TooltipContent className="max-w-[220px]">
+                <p>Your API key is used to authenticate requests. Keep it secret.</p>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+          <Input id="api-key" placeholder="sk-..." />
+        </div>
+
+        <div className="space-y-2">
+          <div className="flex items-center gap-1.5">
+            <label htmlFor="webhook" className="text-sm font-medium">Webhook URL</label>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Info className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
+              </TooltipTrigger>
+              <TooltipContent className="max-w-[220px]">
+                <p>We'll send POST requests to this URL when events occur.</p>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+          <Input id="webhook" placeholder="https://..." />
+        </div>
+      </div>
+    </TooltipProvider>
+  ),
+};
+
+// ============================================================================
+// Tooltip with Delay (Instant)
+// ============================================================================
+
+export const TooltipWithDelay = {
+  name: 'Tooltip with Delay',
+  render: () => (
+    <TooltipProvider delayDuration={0}>
+      <div className="flex items-center gap-4">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="outline" size="sm">Instant Tooltip</Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>This tooltip appears immediately with zero delay.</p>
+          </TooltipContent>
+        </Tooltip>
+      </div>
+    </TooltipProvider>
+  ),
+};
+
+// ============================================================================
+// Examples
+// ============================================================================
+
+export const Examples = {
+  name: 'Examples',
+  render: () => (
+    <TooltipProvider>
+      <div className="flex flex-col gap-8">
+        {/* Toolbar */}
+        <div>
+          <p className="text-sm font-medium mb-3">Toolbar</p>
+          <div className="flex items-center gap-1 rounded-lg border p-1">
+            {[
+              { icon: <Undo className="h-4 w-4" />, label: 'Undo', shortcut: '⌘Z' },
+              { icon: <Redo className="h-4 w-4" />, label: 'Redo', shortcut: '⇧⌘Z' },
+              { divider: true },
+              { icon: <Plus className="h-4 w-4" />, label: 'Add item', shortcut: '⌘N' },
+              { icon: <Pencil className="h-4 w-4" />, label: 'Edit', shortcut: '⌘E' },
+              { icon: <Copy className="h-4 w-4" />, label: 'Duplicate', shortcut: '⌘D' },
+              { divider: true },
+              { icon: <Share2 className="h-4 w-4" />, label: 'Share' },
+              { icon: <Download className="h-4 w-4" />, label: 'Download' },
+              { divider: true },
+              { icon: <Trash2 className="h-4 w-4" />, label: 'Delete', shortcut: '⌫' },
+            ].map((item, i) =>
+              'divider' in item ? (
+                <Separator key={i} orientation="vertical" className="mx-0.5 h-6" />
+              ) : (
+                <Tooltip key={item.label}>
+                  <TooltipTrigger asChild>
+                    <Button variant="ghost" size="icon" className="h-8 w-8">
+                      {item.icon}
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <div className="flex items-center gap-2">
+                      <span>{item.label}</span>
+                      {item.shortcut && (
+                        <kbd className="rounded border bg-muted px-1.5 py-0.5 text-[10px] font-mono">{item.shortcut}</kbd>
+                      )}
+                    </div>
+                  </TooltipContent>
+                </Tooltip>
+              )
+            )}
+          </div>
+        </div>
+
+        {/* Action buttons */}
+        <div>
+          <p className="text-sm font-medium mb-3">Action Buttons</p>
+          <div className="flex items-center gap-2">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button size="icon" variant="outline">
+                  <Heart className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Add to favorites</p>
+              </TooltipContent>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button size="icon" variant="outline">
+                  <Share2 className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Share project</p>
+              </TooltipContent>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button size="icon" variant="outline">
+                  <Settings className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Settings</p>
+              </TooltipContent>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span tabIndex={0}>
+                  <Button size="icon" variant="outline" disabled>
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </span>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Select items to delete</p>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        </div>
+      </div>
+    </TooltipProvider>
+  ),
+};
diff --git a/packages/apollo-wind/src/foundation/Future/future-theme.css b/packages/apollo-wind/src/foundation/Future/future-theme.css
index bc1cb2d57..596a8a06b 100644
--- a/packages/apollo-wind/src/foundation/Future/future-theme.css
+++ b/packages/apollo-wind/src/foundation/Future/future-theme.css
@@ -105,6 +105,7 @@
   --color-accent: var(--color-future-surface-hover);
   --color-accent-foreground: var(--color-future-foreground);
   --color-destructive: #ef4444;
+  --color-destructive-foreground: #ffffff;
   --color-border: var(--color-future-border);
   --color-border-de-emp: var(--color-future-border-subtle);
   --color-input: var(--color-future-border);
@@ -205,6 +206,7 @@
   --color-accent: var(--color-future-surface-hover);
   --color-accent-foreground: var(--color-future-foreground);
   --color-destructive: #ef4444;
+  --color-destructive-foreground: #ffffff;
   --color-border: var(--color-future-border);
   --color-border-de-emp: var(--color-future-border-subtle);
   --color-input: var(--color-future-border);
diff --git a/packages/apollo-wind/src/getting-started/getting-started.stories.tsx b/packages/apollo-wind/src/getting-started/getting-started.stories.tsx
index f9aea42bf..1cc040cad 100644
--- a/packages/apollo-wind/src/getting-started/getting-started.stories.tsx
+++ b/packages/apollo-wind/src/getting-started/getting-started.stories.tsx
@@ -23,7 +23,7 @@ export const Default: Story = {
     >
       <div className="mx-auto max-w-3xl p-8">
         <h1 className="mb-4 text-[2rem] font-bold text-future-foreground">
-          Apollo v.4 Design System
+          UiPath Design System
         </h1>
         <p className="mb-6 text-base leading-7 text-future-foreground-muted">
           Apollo v.4 is UiPath's open-source design system for building consistent user experiences
diff --git a/packages/apollo-wind/src/getting-started/prototyping.stories.tsx b/packages/apollo-wind/src/getting-started/prototyping.stories.tsx
index 5bd366979..83439ca09 100644
--- a/packages/apollo-wind/src/getting-started/prototyping.stories.tsx
+++ b/packages/apollo-wind/src/getting-started/prototyping.stories.tsx
@@ -332,7 +332,7 @@ DO NOT use raw colors (bg-zinc-900, bg-white, etc.)
 Accordion, Alert, AlertDialog, Avatar, Badge, Breadcrumb, Button, Calendar,
 Card, Checkbox, Collapsible, Combobox, Command, ContextMenu, DataTable,
 DatePicker, Dialog, Drawer, DropdownMenu, EmptyState, FileUpload, HoverCard,
-Input, Label, Menubar, MultiSelect, NavigationMenu, Pagination, Popover,
+Input, Label, MultiSelect, Pagination, Popover,
 Progress, RadioGroup, Resizable, ScrollArea, Search, Select, Separator,
 Sheet, Skeleton, Slider, Spinner, StatsCard, Stepper, Switch, Table, Tabs,
 Textarea, Toggle, ToggleGroup, Tooltip, ViewportGuard`;
diff --git a/packages/apollo-wind/src/index.ts b/packages/apollo-wind/src/index.ts
index 9a3ad5d0d..5d6bf36fe 100644
--- a/packages/apollo-wind/src/index.ts
+++ b/packages/apollo-wind/src/index.ts
@@ -189,19 +189,6 @@ export {
   SheetTrigger,
 } from './components/ui/sheet';
 
-export {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerOverlay,
-  DrawerPortal,
-  DrawerTitle,
-  DrawerTrigger,
-} from './components/ui/drawer';
-
 export {
   Popover,
   PopoverAnchor,
@@ -254,18 +241,6 @@ export {
 export { Stepper } from './components/ui/stepper';
 export type { Step, StepperProps } from './components/ui/stepper';
 
-export {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuIndicator,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  NavigationMenuViewport,
-  navigationMenuTriggerStyle,
-} from './components/ui/navigation-menu';
-
 // -----------------------------------------------------------------------------
 // Menu Components
 // -----------------------------------------------------------------------------
@@ -317,25 +292,6 @@ export {
   CommandShortcut,
 } from './components/ui/command';
 
-export {
-  Menubar,
-  MenubarCheckboxItem,
-  MenubarContent,
-  MenubarGroup,
-  MenubarItem,
-  MenubarLabel,
-  MenubarMenu,
-  MenubarPortal,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarSub,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarTrigger,
-} from './components/ui/menubar';
-
 // -----------------------------------------------------------------------------
 // Utility Components
 // -----------------------------------------------------------------------------
diff --git a/packages/apollo-wind/src/templates/EmptyErrors/empty-errors.stories.tsx b/packages/apollo-wind/src/templates/EmptyErrors/empty-errors.stories.tsx
index 7401e85fa..3b2b2d1db 100644
--- a/packages/apollo-wind/src/templates/EmptyErrors/empty-errors.stories.tsx
+++ b/packages/apollo-wind/src/templates/EmptyErrors/empty-errors.stories.tsx
@@ -1,6 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { cn } from '@/lib';
 import { fontFamily } from '@/foundation/Future/typography';
+import { MaestroHeader } from '@/components/custom/global-header';
+import { EmptyState } from '@/components/ui/empty-state';
+import { Button } from '@/components/ui/button';
+import { ErrorVideo } from './error-components';
 
 // ============================================================================
 // Meta
@@ -17,19 +21,35 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // ============================================================================
-// Shared placeholder
+// Shared page layout
 // ============================================================================
 
-function ComingSoon({ theme, label }: { theme: string; label: string }) {
-  const themeClass = theme === 'light' ? 'future-light' : 'future-dark';
+function ErrorPageLayout({
+  theme,
+  children,
+}: {
+  theme: string;
+  children: React.ReactNode;
+}) {
+  const themeValue = theme === 'light' || theme === 'legacy-light' ? 'light' : 'dark';
+  const themeClass =
+    theme === 'legacy-dark'
+      ? 'legacy-dark'
+      : theme === 'legacy-light'
+        ? 'legacy-light'
+        : theme === 'light'
+          ? 'future-light'
+          : 'future-dark';
 
   return (
     <div
-      className={cn(themeClass, 'flex h-screen flex-col items-center justify-center gap-3 bg-future-surface')}
+      className={cn(themeClass, 'flex h-screen flex-col bg-future-surface')}
       style={{ fontFamily: fontFamily.base }}
     >
-      <p className="text-sm font-medium text-future-foreground">{label}</p>
-      <p className="text-sm text-future-foreground-muted">Coming soon</p>
+      <MaestroHeader theme={themeValue} title="UiPath" />
+      <div className="flex flex-1 flex-col items-center justify-center">
+        {children}
+      </div>
     </div>
   );
 }
@@ -42,7 +62,15 @@ function ComingSoon({ theme, label }: { theme: string; label: string }) {
 export const Error: Story = {
   name: 'Error',
   render: (_, { globals }) => (
-    <ComingSoon theme={globals.futureTheme || 'dark'} label="Error" />
+    <ErrorPageLayout theme={globals.futureTheme || 'dark'}>
+      <EmptyState
+        icon={<ErrorVideo />}
+        title="Error"
+        description="The page you're looking for doesn't exist or has been moved."
+      >
+        <Button>Return home</Button>
+      </EmptyState>
+    </ErrorPageLayout>
   ),
 };
 
@@ -50,7 +78,16 @@ export const Error: Story = {
 export const BadRequest400: Story = {
   name: '400 - Bad Request',
   render: (_, { globals }) => (
-    <ComingSoon theme={globals.futureTheme || 'dark'} label="400 - Bad Request" />
+    <ErrorPageLayout theme={globals.futureTheme || 'dark'}>
+      <EmptyState
+        icon={<ErrorVideo />}
+        code="400"
+        title="Bad Request"
+        description="The request was invalid. Please go home and try again."
+      >
+        <Button>Take me home</Button>
+      </EmptyState>
+    </ErrorPageLayout>
   ),
 };
 
@@ -58,7 +95,16 @@ export const BadRequest400: Story = {
 export const Unauthorized401: Story = {
   name: '401 - Unauthorized',
   render: (_, { globals }) => (
-    <ComingSoon theme={globals.futureTheme || 'dark'} label="401 - Unauthorized" />
+    <ErrorPageLayout theme={globals.futureTheme || 'dark'}>
+      <EmptyState
+        icon={<ErrorVideo />}
+        code="401"
+        title="Unauthorized"
+        description="You don't have permission to view Task Mining. Please contact your administrator for necessary permissions."
+      >
+        <Button>Take me home</Button>
+      </EmptyState>
+    </ErrorPageLayout>
   ),
 };
 
@@ -66,7 +112,16 @@ export const Unauthorized401: Story = {
 export const Forbidden403: Story = {
   name: '403 - Forbidden',
   render: (_, { globals }) => (
-    <ComingSoon theme={globals.futureTheme || 'dark'} label="403 - Forbidden" />
+    <ErrorPageLayout theme={globals.futureTheme || 'dark'}>
+      <EmptyState
+        icon={<ErrorVideo />}
+        code="403"
+        title="Oops! You're not on the list"
+        description="You don't have permission to view Orchestrator. Please contact your administrator for necessary permissions."
+      >
+        <Button>Take me home</Button>
+      </EmptyState>
+    </ErrorPageLayout>
   ),
 };
 
@@ -74,7 +129,16 @@ export const Forbidden403: Story = {
 export const NotFound404: Story = {
   name: '404 - Not Found',
   render: (_, { globals }) => (
-    <ComingSoon theme={globals.futureTheme || 'dark'} label="404 - Not Found" />
+    <ErrorPageLayout theme={globals.futureTheme || 'dark'}>
+      <EmptyState
+        icon={<ErrorVideo />}
+        code="404"
+        title="Uh oh! Can't find it"
+        description="The page you're looking for may have been removed, had its name changed, or is temporarily unavailable."
+      >
+        <Button>Take me home</Button>
+      </EmptyState>
+    </ErrorPageLayout>
   ),
 };
 
@@ -82,7 +146,16 @@ export const NotFound404: Story = {
 export const ServerError500: Story = {
   name: '500 - Server Error',
   render: (_, { globals }) => (
-    <ComingSoon theme={globals.futureTheme || 'dark'} label="500 - Server Error" />
+    <ErrorPageLayout theme={globals.futureTheme || 'dark'}>
+      <EmptyState
+        icon={<ErrorVideo />}
+        code="500"
+        title="Server error"
+        description="The server encountered an internal error and was unable to complete your request. Please go home and try again."
+      >
+        <Button>Take me home</Button>
+      </EmptyState>
+    </ErrorPageLayout>
   ),
 };
 
@@ -90,7 +163,16 @@ export const ServerError500: Story = {
 export const ServiceUnavailable503: Story = {
   name: '503 - Service Unavailable',
   render: (_, { globals }) => (
-    <ComingSoon theme={globals.futureTheme || 'dark'} label="503 - Service Unavailable" />
+    <ErrorPageLayout theme={globals.futureTheme || 'dark'}>
+      <EmptyState
+        icon={<ErrorVideo />}
+        code="503"
+        title="We will be back up soon"
+        description="The system is under maintenance. Watch this space for updates."
+      >
+        <Button>Check service status</Button>
+      </EmptyState>
+    </ErrorPageLayout>
   ),
 };
 
@@ -98,7 +180,13 @@ export const ServiceUnavailable503: Story = {
 export const ErrorLoading: Story = {
   name: 'Error Loading',
   render: (_, { globals }) => (
-    <ComingSoon theme={globals.futureTheme || 'dark'} label="Error Loading" />
+    <ErrorPageLayout theme={globals.futureTheme || 'dark'}>
+      <EmptyState
+        icon={<ErrorVideo />}
+        title="Please wait while we set up things for you"
+        description="This could take a few minutes. The page will refresh when the platform is ready to use."
+      />
+    </ErrorPageLayout>
   ),
 };
 
@@ -106,7 +194,14 @@ export const ErrorLoading: Story = {
 export const BrowserNotSupported: Story = {
   name: 'Browser Not Supported',
   render: (_, { globals }) => (
-    <ComingSoon theme={globals.futureTheme || 'dark'} label="Browser Not Supported" />
+    <ErrorPageLayout theme={globals.futureTheme || 'dark'}>
+      <EmptyState
+        icon={<ErrorVideo />}
+        title="This browser is not supported"
+      >
+        <Button>Learn more</Button>
+      </EmptyState>
+    </ErrorPageLayout>
   ),
 };
 
@@ -114,7 +209,15 @@ export const BrowserNotSupported: Story = {
 export const IpRestricted: Story = {
   name: 'IP Restricted',
   render: (_, { globals }) => (
-    <ComingSoon theme={globals.futureTheme || 'dark'} label="IP Restricted" />
+    <ErrorPageLayout theme={globals.futureTheme || 'dark'}>
+      <EmptyState
+        icon={<ErrorVideo />}
+        title="Access restricted"
+        description="Due to organizational policies, you can't access Orchestrator from this network location. Please contact your administrator."
+      >
+        <Button>Back to website</Button>
+      </EmptyState>
+    </ErrorPageLayout>
   ),
 };
 
@@ -122,7 +225,15 @@ export const IpRestricted: Story = {
 export const HideDefaultActions: Story = {
   name: 'Hide Default Actions',
   render: (_, { globals }) => (
-    <ComingSoon theme={globals.futureTheme || 'dark'} label="Hide Default Actions" />
+    <ErrorPageLayout theme={globals.futureTheme || 'dark'}>
+      <EmptyState
+        icon={<ErrorVideo />}
+        title="Unauthorized"
+        description="You don't have permission to view Task Mining. Please contact your administrator for necessary permissions."
+      >
+        <Button>Back to website</Button>
+      </EmptyState>
+    </ErrorPageLayout>
   ),
 };
 
@@ -130,6 +241,16 @@ export const HideDefaultActions: Story = {
 export const NoProjectsYet: Story = {
   name: 'No Projects Yet',
   render: (_, { globals }) => (
-    <ComingSoon theme={globals.futureTheme || 'dark'} label="No Projects Yet" />
+    <ErrorPageLayout theme={globals.futureTheme || 'dark'}>
+      <EmptyState
+        icon={<ErrorVideo />}
+        title="No Projects Yet"
+        description="You haven't created any projects yet. Get started by creating your first project."
+      >
+        <Button>Create project</Button>
+        <Button variant="outline">Import project</Button>
+        <Button variant="outline">Learn More</Button>
+      </EmptyState>
+    </ErrorPageLayout>
   ),
 };
diff --git a/packages/apollo-wind/src/templates/EmptyErrors/error-components.tsx b/packages/apollo-wind/src/templates/EmptyErrors/error-components.tsx
new file mode 100644
index 000000000..48110240d
--- /dev/null
+++ b/packages/apollo-wind/src/templates/EmptyErrors/error-components.tsx
@@ -0,0 +1,33 @@
+// ============================================================================
+// ErrorVideo — Looping decorative video in a circular clip
+//
+// Used as a visual element in error/empty state pages.
+// Pass as the `icon` prop on EmptyState:
+//   <EmptyState icon={<ErrorVideo />} title="..." />
+// ============================================================================
+
+const VIMEO_SRC =
+  'https://player.vimeo.com/video/1145746394?h=3c42d6f39b&autoplay=1&muted=1&loop=1&background=1';
+
+export function ErrorVideo({ size = 180 }: { size?: number }) {
+  // Oversized iframe so the video fills the circle without letterboxing
+  const iframeSize = size + 120;
+  const offset = -(iframeSize - size) / 2;
+
+  return (
+    <div
+      className="overflow-hidden rounded-full border border-future-border bg-future-surface-raised"
+      style={{ width: size, height: size }}
+    >
+      <iframe
+        src={VIMEO_SRC}
+        width={iframeSize}
+        height={iframeSize}
+        allow="autoplay"
+        title="Decorative animation"
+        className="pointer-events-none border-0"
+        style={{ marginTop: offset, marginLeft: offset, transform: 'scale(1.15)' }}
+      />
+    </div>
+  );
+}
diff --git a/packages/apollo-wind/src/templates/Experiments/visualization.stories.tsx b/packages/apollo-wind/src/templates/Experiments/visualization.stories.tsx
new file mode 100644
index 000000000..18743c5fa
--- /dev/null
+++ b/packages/apollo-wind/src/templates/Experiments/visualization.stories.tsx
@@ -0,0 +1,867 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  Label,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  PolarAngleAxis,
+  PolarGrid,
+  Radar,
+  RadarChart,
+  RadialBar,
+  RadialBarChart,
+  XAxis,
+  YAxis,
+} from 'recharts';
+
+import { MaestroTemplate } from '../Maestro/template-maestro';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from '@/components/ui/chart';
+
+// ============================================================================
+// Meta
+// ============================================================================
+
+const meta = {
+  title: 'Experiments/Visualization',
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Chart color palette (theme-aware)
+// ============================================================================
+
+const palette = {
+  cyan: { dark: '#22d3ee', light: '#0891b2' },
+  indigo: { dark: '#818cf8', light: '#4f46e5' },
+  emerald: { dark: '#34d399', light: '#059669' },
+  amber: { dark: '#fbbf24', light: '#d97706' },
+  rose: { dark: '#fb7185', light: '#e11d48' },
+  violet: { dark: '#a78bfa', light: '#7c3aed' },
+  sky: { dark: '#38bdf8', light: '#0284c7' },
+} as const;
+
+function themed(key: keyof typeof palette) {
+  return { dark: palette[key].dark, light: palette[key].light };
+}
+
+// ============================================================================
+// Tab definitions
+// ============================================================================
+
+const TABS = [
+  'Area Charts',
+  'Bar Charts',
+  'Line Charts',
+  'Pie Charts',
+  'Radar Charts',
+  'Radial Charts',
+  'Tooltips',
+] as const;
+
+type Tab = (typeof TABS)[number];
+
+// ============================================================================
+// Mock data
+// ============================================================================
+
+const areaData = [
+  { month: 'Jan', desktop: 186, mobile: 80 },
+  { month: 'Feb', desktop: 305, mobile: 200 },
+  { month: 'Mar', desktop: 237, mobile: 120 },
+  { month: 'Apr', desktop: 73, mobile: 190 },
+  { month: 'May', desktop: 209, mobile: 130 },
+  { month: 'Jun', desktop: 214, mobile: 140 },
+];
+
+const barData = [
+  { date: '2026-01-01', desktop: 222, mobile: 150 },
+  { date: '2026-01-02', desktop: 97, mobile: 180 },
+  { date: '2026-01-03', desktop: 167, mobile: 120 },
+  { date: '2026-01-04', desktop: 242, mobile: 260 },
+  { date: '2026-01-05', desktop: 373, mobile: 290 },
+  { date: '2026-01-06', desktop: 301, mobile: 340 },
+  { date: '2026-01-07', desktop: 245, mobile: 180 },
+  { date: '2026-01-08', desktop: 409, mobile: 320 },
+  { date: '2026-01-09', desktop: 59, mobile: 110 },
+  { date: '2026-01-10', desktop: 261, mobile: 190 },
+  { date: '2026-01-11', desktop: 327, mobile: 350 },
+  { date: '2026-01-12', desktop: 292, mobile: 210 },
+];
+
+const lineData = [
+  { month: 'Jan', desktop: 186, mobile: 80, tablet: 45 },
+  { month: 'Feb', desktop: 305, mobile: 200, tablet: 98 },
+  { month: 'Mar', desktop: 237, mobile: 120, tablet: 65 },
+  { month: 'Apr', desktop: 73, mobile: 190, tablet: 140 },
+  { month: 'May', desktop: 209, mobile: 130, tablet: 87 },
+  { month: 'Jun', desktop: 214, mobile: 140, tablet: 112 },
+];
+
+const pieData = [
+  { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
+  { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
+  { browser: 'firefox', visitors: 287, fill: 'var(--color-firefox)' },
+  { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
+  { browser: 'other', visitors: 190, fill: 'var(--color-other)' },
+];
+
+const radarData = [
+  { metric: 'Speed', desktop: 86, mobile: 65 },
+  { metric: 'Reliability', desktop: 92, mobile: 78 },
+  { metric: 'Scalability', desktop: 78, mobile: 60 },
+  { metric: 'Security', desktop: 95, mobile: 88 },
+  { metric: 'Usability', desktop: 72, mobile: 90 },
+  { metric: 'Support', desktop: 81, mobile: 75 },
+];
+
+const radialData = [
+  { name: 'safari', visitors: 200, fill: 'var(--color-safari)' },
+  { name: 'firefox', visitors: 287, fill: 'var(--color-firefox)' },
+  { name: 'edge', visitors: 173, fill: 'var(--color-edge)' },
+  { name: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
+];
+
+// --- Second chart variants ---
+
+const areaStepData = [
+  { month: 'Jan', pageViews: 1200, sessions: 820 },
+  { month: 'Feb', pageViews: 1450, sessions: 960 },
+  { month: 'Mar', pageViews: 1100, sessions: 740 },
+  { month: 'Apr', pageViews: 1680, sessions: 1100 },
+  { month: 'May', pageViews: 1520, sessions: 980 },
+  { month: 'Jun', pageViews: 1790, sessions: 1250 },
+];
+
+const barHorizontalData = [
+  { category: 'React', value: 42 },
+  { category: 'Vue', value: 28 },
+  { category: 'Angular', value: 19 },
+  { category: 'Svelte', value: 15 },
+  { category: 'Solid', value: 8 },
+];
+
+const pieSimpleData = [
+  { segment: 'direct', value: 420, fill: 'var(--color-direct)' },
+  { segment: 'organic', value: 315, fill: 'var(--color-organic)' },
+  { segment: 'referral', value: 180, fill: 'var(--color-referral)' },
+  { segment: 'social', value: 135, fill: 'var(--color-social)' },
+];
+
+const lineCurvedData = [
+  { month: 'Jan', revenue: 2400, profit: 1200 },
+  { month: 'Feb', revenue: 1398, profit: 900 },
+  { month: 'Mar', revenue: 3800, profit: 2100 },
+  { month: 'Apr', revenue: 3908, profit: 2400 },
+  { month: 'May', revenue: 4800, profit: 2800 },
+  { month: 'Jun', revenue: 3490, profit: 1900 },
+];
+
+const radarSkillsData = [
+  { skill: 'HTML', level: 95 },
+  { skill: 'CSS', level: 88 },
+  { skill: 'JS', level: 92 },
+  { skill: 'React', level: 85 },
+  { skill: 'Node', level: 70 },
+  { skill: 'SQL', level: 65 },
+];
+
+const radialGaugeData = [
+  { name: 'progress', value: 72, fill: 'var(--color-progress)' },
+];
+
+const tooltipData = [
+  { month: 'Jan', revenue: 4500, expenses: 2800 },
+  { month: 'Feb', revenue: 5200, expenses: 3100 },
+  { month: 'Mar', revenue: 4800, expenses: 2900 },
+  { month: 'Apr', revenue: 6100, expenses: 3400 },
+  { month: 'May', revenue: 5800, expenses: 3200 },
+  { month: 'Jun', revenue: 7200, expenses: 3800 },
+];
+
+// ============================================================================
+// Chart configs
+// ============================================================================
+
+const areaConfig = {
+  desktop: { label: 'Desktop', theme: themed('cyan') },
+  mobile: { label: 'Mobile', theme: themed('indigo') },
+} satisfies ChartConfig;
+
+const barConfig = {
+  desktop: { label: 'Desktop', theme: themed('cyan') },
+  mobile: { label: 'Mobile', theme: themed('indigo') },
+} satisfies ChartConfig;
+
+const lineConfig = {
+  desktop: { label: 'Desktop', theme: themed('cyan') },
+  mobile: { label: 'Mobile', theme: themed('indigo') },
+  tablet: { label: 'Tablet', theme: themed('emerald') },
+} satisfies ChartConfig;
+
+const pieConfig = {
+  visitors: { label: 'Visitors' },
+  chrome: { label: 'Chrome', theme: themed('cyan') },
+  safari: { label: 'Safari', theme: themed('indigo') },
+  firefox: { label: 'Firefox', theme: themed('emerald') },
+  edge: { label: 'Edge', theme: themed('amber') },
+  other: { label: 'Other', theme: themed('rose') },
+} satisfies ChartConfig;
+
+const radarConfig = {
+  desktop: { label: 'Desktop', theme: themed('cyan') },
+  mobile: { label: 'Mobile', theme: themed('indigo') },
+} satisfies ChartConfig;
+
+const radialConfig = {
+  visitors: { label: 'Visitors' },
+  chrome: { label: 'Chrome', theme: themed('cyan') },
+  safari: { label: 'Safari', theme: themed('indigo') },
+  firefox: { label: 'Firefox', theme: themed('emerald') },
+  edge: { label: 'Edge', theme: themed('amber') },
+} satisfies ChartConfig;
+
+// --- Second chart variant configs ---
+
+const areaStepConfig = {
+  pageViews: { label: 'Page Views', theme: themed('emerald') },
+  sessions: { label: 'Sessions', theme: themed('amber') },
+} satisfies ChartConfig;
+
+const barHorizontalConfig = {
+  value: { label: 'Popularity %', theme: themed('violet') },
+} satisfies ChartConfig;
+
+const lineCurvedConfig = {
+  revenue: { label: 'Revenue', theme: themed('amber') },
+  profit: { label: 'Profit', theme: themed('emerald') },
+} satisfies ChartConfig;
+
+const pieSimpleConfig = {
+  value: { label: 'Traffic' },
+  direct: { label: 'Direct', theme: themed('cyan') },
+  organic: { label: 'Organic', theme: themed('emerald') },
+  referral: { label: 'Referral', theme: themed('amber') },
+  social: { label: 'Social', theme: themed('rose') },
+} satisfies ChartConfig;
+
+const radarSkillsConfig = {
+  level: { label: 'Proficiency', theme: themed('emerald') },
+} satisfies ChartConfig;
+
+const radialGaugeConfig = {
+  progress: { label: 'Completion', theme: themed('cyan') },
+} satisfies ChartConfig;
+
+const tooltipDotConfig = {
+  revenue: { label: 'Revenue', theme: themed('emerald') },
+  expenses: { label: 'Expenses', theme: themed('rose') },
+} satisfies ChartConfig;
+
+const tooltipLineConfig = {
+  revenue: { label: 'Revenue', theme: themed('cyan') },
+  expenses: { label: 'Expenses', theme: themed('amber') },
+} satisfies ChartConfig;
+
+const tooltipDashedConfig = {
+  revenue: { label: 'Revenue', theme: themed('violet') },
+  expenses: { label: 'Expenses', theme: themed('sky') },
+} satisfies ChartConfig;
+
+// ============================================================================
+// Chart sections
+// ============================================================================
+
+function AreaChartSection() {
+  return (
+    <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+      {/* Stacked area */}
+      <Card className="border-future-border-subtle bg-future-surface">
+        <CardHeader>
+          <CardTitle className="text-future-foreground">Stacked Area Chart</CardTitle>
+          <CardDescription className="text-future-foreground-muted">
+            Total visitors by device over the last 6 months
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ChartContainer config={areaConfig}>
+            <AreaChart data={areaData} margin={{ left: 12, right: 12 }}>
+              <CartesianGrid vertical={false} />
+              <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={8} />
+              <YAxis tickLine={false} axisLine={false} tickMargin={8} />
+              <ChartTooltip content={<ChartTooltipContent indicator="dot" />} />
+              <ChartLegend content={<ChartLegendContent />} />
+              <defs>
+                <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor="var(--color-desktop)" stopOpacity={0.8} />
+                  <stop offset="95%" stopColor="var(--color-desktop)" stopOpacity={0.1} />
+                </linearGradient>
+                <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor="var(--color-mobile)" stopOpacity={0.8} />
+                  <stop offset="95%" stopColor="var(--color-mobile)" stopOpacity={0.1} />
+                </linearGradient>
+              </defs>
+              <Area dataKey="mobile" type="natural" fill="url(#fillMobile)" fillOpacity={0.4} stroke="var(--color-mobile)" stackId="a" />
+              <Area dataKey="desktop" type="natural" fill="url(#fillDesktop)" fillOpacity={0.4} stroke="var(--color-desktop)" stackId="a" />
+            </AreaChart>
+          </ChartContainer>
+        </CardContent>
+      </Card>
+
+      {/* Step area */}
+      <Card className="border-future-border-subtle bg-future-surface">
+        <CardHeader>
+          <CardTitle className="text-future-foreground">Step Area Chart</CardTitle>
+          <CardDescription className="text-future-foreground-muted">
+            Page views and sessions with step interpolation
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ChartContainer config={areaStepConfig}>
+            <AreaChart data={areaStepData} margin={{ left: 12, right: 12 }}>
+              <CartesianGrid vertical={false} />
+              <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={8} />
+              <YAxis tickLine={false} axisLine={false} tickMargin={8} />
+              <ChartTooltip content={<ChartTooltipContent indicator="dot" />} />
+              <ChartLegend content={<ChartLegendContent />} />
+              <defs>
+                <linearGradient id="fillPageViews" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor="var(--color-pageViews)" stopOpacity={0.8} />
+                  <stop offset="95%" stopColor="var(--color-pageViews)" stopOpacity={0.1} />
+                </linearGradient>
+                <linearGradient id="fillSessions" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor="var(--color-sessions)" stopOpacity={0.8} />
+                  <stop offset="95%" stopColor="var(--color-sessions)" stopOpacity={0.1} />
+                </linearGradient>
+              </defs>
+              <Area dataKey="sessions" type="step" fill="url(#fillSessions)" fillOpacity={0.4} stroke="var(--color-sessions)" />
+              <Area dataKey="pageViews" type="step" fill="url(#fillPageViews)" fillOpacity={0.4} stroke="var(--color-pageViews)" />
+            </AreaChart>
+          </ChartContainer>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function BarChartSection() {
+  const [activeKey, setActiveKey] = React.useState<'desktop' | 'mobile'>('desktop');
+  const total = React.useMemo(
+    () => ({
+      desktop: barData.reduce((acc, d) => acc + d.desktop, 0),
+      mobile: barData.reduce((acc, d) => acc + d.mobile, 0),
+    }),
+    [],
+  );
+
+  return (
+    <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+      {/* Interactive vertical bar */}
+      <Card className="border-future-border-subtle bg-future-surface">
+        <CardHeader className="flex flex-col items-stretch space-y-0 border-b border-future-border-subtle p-0 sm:flex-row">
+          <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
+            <CardTitle className="text-future-foreground">Interactive Bar Chart</CardTitle>
+            <CardDescription className="text-future-foreground-muted">
+              Daily visitors — click a toggle to filter
+            </CardDescription>
+          </div>
+          <div className="flex">
+            {(['desktop', 'mobile'] as const).map((key) => (
+              <button
+                key={key}
+                data-active={activeKey === key}
+                className="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t border-future-border-subtle px-6 py-4 text-left even:border-l data-[active=true]:bg-future-surface-overlay sm:border-l sm:border-t-0 sm:px-8 sm:py-6"
+                onClick={() => setActiveKey(key)}
+              >
+                <span className="text-xs text-future-foreground-muted">
+                  {barConfig[key].label}
+                </span>
+                <span className="text-lg font-bold leading-none text-future-foreground sm:text-3xl">
+                  {total[key].toLocaleString()}
+                </span>
+              </button>
+            ))}
+          </div>
+        </CardHeader>
+        <CardContent>
+          <ChartContainer config={barConfig} className="aspect-auto h-[250px] w-full">
+            <BarChart data={barData} margin={{ left: 12, right: 12 }}>
+              <CartesianGrid vertical={false} />
+              <XAxis
+                dataKey="date"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                minTickGap={32}
+                tickFormatter={(v: string) => {
+                  const d = new Date(v);
+                  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+                }}
+              />
+              <ChartTooltip
+                content={
+                  <ChartTooltipContent
+                    className="w-[150px]"
+                    nameKey="views"
+                    labelFormatter={(v: string) => {
+                      return new Date(v).toLocaleDateString('en-US', {
+                        month: 'short',
+                        day: 'numeric',
+                        year: 'numeric',
+                      });
+                    }}
+                  />
+                }
+              />
+              <Bar dataKey={activeKey} fill={`var(--color-${activeKey})`} />
+            </BarChart>
+          </ChartContainer>
+        </CardContent>
+      </Card>
+
+      {/* Horizontal bar */}
+      <Card className="border-future-border-subtle bg-future-surface">
+        <CardHeader>
+          <CardTitle className="text-future-foreground">Horizontal Bar Chart</CardTitle>
+          <CardDescription className="text-future-foreground-muted">
+            Framework popularity — developer survey 2026
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ChartContainer config={barHorizontalConfig} className="aspect-auto h-[250px] w-full">
+            <BarChart data={barHorizontalData} layout="vertical" margin={{ left: 24, right: 24 }}>
+              <CartesianGrid horizontal={false} />
+              <YAxis dataKey="category" type="category" tickLine={false} axisLine={false} tickMargin={8} width={60} />
+              <XAxis type="number" tickLine={false} axisLine={false} tickMargin={8} />
+              <ChartTooltip content={<ChartTooltipContent />} />
+              <Bar dataKey="value" fill="var(--color-value)" radius={4} />
+            </BarChart>
+          </ChartContainer>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function LineChartSection() {
+  return (
+    <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+      {/* Multi-line with dots */}
+      <Card className="border-future-border-subtle bg-future-surface">
+        <CardHeader>
+          <CardTitle className="text-future-foreground">Multi-Line Chart</CardTitle>
+          <CardDescription className="text-future-foreground-muted">
+            Visitors across three device types with dots and grid
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ChartContainer config={lineConfig}>
+            <LineChart data={lineData} margin={{ left: 12, right: 12 }}>
+              <CartesianGrid />
+              <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={8} />
+              <YAxis tickLine={false} axisLine={false} tickMargin={8} />
+              <ChartTooltip content={<ChartTooltipContent />} />
+              <ChartLegend content={<ChartLegendContent />} />
+              <Line dataKey="desktop" type="monotone" stroke="var(--color-desktop)" strokeWidth={2} dot={{ fill: 'var(--color-desktop)', r: 4 }} activeDot={{ r: 6 }} />
+              <Line dataKey="mobile" type="monotone" stroke="var(--color-mobile)" strokeWidth={2} dot={{ fill: 'var(--color-mobile)', r: 4 }} activeDot={{ r: 6 }} />
+              <Line dataKey="tablet" type="monotone" stroke="var(--color-tablet)" strokeWidth={2} dot={{ fill: 'var(--color-tablet)', r: 4 }} activeDot={{ r: 6 }} />
+            </LineChart>
+          </ChartContainer>
+        </CardContent>
+      </Card>
+
+      {/* Curved line — no dots */}
+      <Card className="border-future-border-subtle bg-future-surface">
+        <CardHeader>
+          <CardTitle className="text-future-foreground">Curved Line Chart</CardTitle>
+          <CardDescription className="text-future-foreground-muted">
+            Revenue vs profit with natural curve interpolation
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ChartContainer config={lineCurvedConfig}>
+            <LineChart data={lineCurvedData} margin={{ left: 12, right: 12 }}>
+              <CartesianGrid vertical={false} />
+              <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={8} />
+              <YAxis tickLine={false} axisLine={false} tickMargin={8} />
+              <ChartTooltip content={<ChartTooltipContent />} />
+              <ChartLegend content={<ChartLegendContent />} />
+              <Line dataKey="revenue" type="natural" stroke="var(--color-revenue)" strokeWidth={2} dot={false} />
+              <Line dataKey="profit" type="natural" stroke="var(--color-profit)" strokeWidth={2} dot={false} />
+            </LineChart>
+          </ChartContainer>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function PieChartSection() {
+  const totalVisitors = React.useMemo(
+    () => pieData.reduce((acc, d) => acc + d.visitors, 0),
+    [],
+  );
+
+  return (
+    <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+      {/* Donut chart */}
+      <Card className="border-future-border-subtle bg-future-surface">
+        <CardHeader>
+          <CardTitle className="text-future-foreground">Donut Chart</CardTitle>
+          <CardDescription className="text-future-foreground-muted">
+            Browser market share — January–June 2026
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ChartContainer config={pieConfig} className="mx-auto aspect-square max-h-[300px]">
+            <PieChart>
+              <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+              <Pie
+                data={pieData}
+                dataKey="visitors"
+                nameKey="browser"
+                innerRadius={60}
+                strokeWidth={5}
+              >
+                <Label
+                  content={({ viewBox }) => {
+                    if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
+                      return (
+                        <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle" dominantBaseline="middle">
+                          <tspan x={viewBox.cx} y={viewBox.cy} className="fill-foreground text-3xl font-bold">
+                            {totalVisitors.toLocaleString()}
+                          </tspan>
+                          <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className="fill-muted-foreground">
+                            Visitors
+                          </tspan>
+                        </text>
+                      );
+                    }
+                    return null;
+                  }}
+                />
+              </Pie>
+              <ChartLegend content={<ChartLegendContent nameKey="browser" />} />
+            </PieChart>
+          </ChartContainer>
+        </CardContent>
+      </Card>
+
+      {/* Simple pie */}
+      <Card className="border-future-border-subtle bg-future-surface">
+        <CardHeader>
+          <CardTitle className="text-future-foreground">Pie Chart</CardTitle>
+          <CardDescription className="text-future-foreground-muted">
+            Traffic sources — January–June 2026
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ChartContainer config={pieSimpleConfig} className="mx-auto aspect-square max-h-[300px]">
+            <PieChart>
+              <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+              <Pie
+                data={pieSimpleData}
+                dataKey="value"
+                nameKey="segment"
+                strokeWidth={2}
+                label={({ segment, percent }) =>
+                  `${pieSimpleConfig[segment as keyof typeof pieSimpleConfig]?.label ?? segment} ${(percent * 100).toFixed(0)}%`
+                }
+              />
+              <ChartLegend content={<ChartLegendContent nameKey="segment" />} />
+            </PieChart>
+          </ChartContainer>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function RadarChartSection() {
+  return (
+    <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+      {/* Multi-series radar */}
+      <Card className="border-future-border-subtle bg-future-surface">
+        <CardHeader>
+          <CardTitle className="text-future-foreground">Radar Chart</CardTitle>
+          <CardDescription className="text-future-foreground-muted">
+            Platform performance across 6 dimensions
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ChartContainer config={radarConfig} className="mx-auto aspect-square max-h-[300px]">
+            <RadarChart data={radarData}>
+              <ChartTooltip content={<ChartTooltipContent />} />
+              <PolarAngleAxis dataKey="metric" />
+              <PolarGrid />
+              <Radar dataKey="desktop" fill="var(--color-desktop)" fillOpacity={0.6} stroke="var(--color-desktop)" />
+              <Radar dataKey="mobile" fill="var(--color-mobile)" fillOpacity={0.6} stroke="var(--color-mobile)" />
+              <ChartLegend content={<ChartLegendContent />} />
+            </RadarChart>
+          </ChartContainer>
+        </CardContent>
+      </Card>
+
+      {/* Single-series radar (dots) */}
+      <Card className="border-future-border-subtle bg-future-surface">
+        <CardHeader>
+          <CardTitle className="text-future-foreground">Radar — Dots</CardTitle>
+          <CardDescription className="text-future-foreground-muted">
+            Developer skill proficiency radar with dots
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ChartContainer config={radarSkillsConfig} className="mx-auto aspect-square max-h-[300px]">
+            <RadarChart data={radarSkillsData}>
+              <ChartTooltip content={<ChartTooltipContent />} />
+              <PolarAngleAxis dataKey="skill" />
+              <PolarGrid />
+              <Radar
+                dataKey="level"
+                fill="var(--color-level)"
+                fillOpacity={0.3}
+                stroke="var(--color-level)"
+                strokeWidth={2}
+                dot={{ r: 4, fill: 'var(--color-level)', fillOpacity: 1 }}
+              />
+            </RadarChart>
+          </ChartContainer>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function RadialChartSection() {
+  return (
+    <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+      {/* Multi-segment radial bar */}
+      <Card className="border-future-border-subtle bg-future-surface">
+        <CardHeader>
+          <CardTitle className="text-future-foreground">Radial Bar Chart</CardTitle>
+          <CardDescription className="text-future-foreground-muted">
+            Browser visitors as stacked radial segments
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ChartContainer config={radialConfig} className="mx-auto aspect-square max-h-[300px]">
+            <RadialBarChart
+              data={radialData}
+              startAngle={-90}
+              endAngle={380}
+              innerRadius={30}
+              outerRadius={110}
+            >
+              <ChartTooltip content={<ChartTooltipContent hideLabel nameKey="name" />} />
+              <RadialBar dataKey="visitors" background>
+                {radialData.map((entry) => (
+                  <Cell key={`cell-${entry.name}`} fill={entry.fill} />
+                ))}
+              </RadialBar>
+              <ChartLegend
+                content={<ChartLegendContent nameKey="name" />}
+                className="-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center"
+              />
+            </RadialBarChart>
+          </ChartContainer>
+        </CardContent>
+      </Card>
+
+      {/* Semi-circle gauge */}
+      <Card className="border-future-border-subtle bg-future-surface">
+        <CardHeader>
+          <CardTitle className="text-future-foreground">Radial Gauge</CardTitle>
+          <CardDescription className="text-future-foreground-muted">
+            Sprint completion progress — 72%
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ChartContainer config={radialGaugeConfig} className="mx-auto aspect-square max-h-[300px]">
+            <RadialBarChart
+              data={radialGaugeData}
+              startAngle={180}
+              endAngle={180 - (360 * 0.72)}
+              innerRadius={80}
+              outerRadius={110}
+            >
+              <RadialBar dataKey="value" background cornerRadius={10}>
+                <Cell fill="var(--color-progress)" />
+              </RadialBar>
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
+                    return (
+                      <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle" dominantBaseline="middle">
+                        <tspan x={viewBox.cx} y={viewBox.cy} className="fill-foreground text-4xl font-bold">
+                          72%
+                        </tspan>
+                        <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 28} className="fill-muted-foreground text-sm">
+                          Completed
+                        </tspan>
+                      </text>
+                    );
+                  }
+                  return null;
+                }}
+              />
+            </RadialBarChart>
+          </ChartContainer>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function TooltipShowcase() {
+  return (
+    <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+      {/* Dot indicator */}
+      <Card className="border-future-border-subtle bg-future-surface">
+        <CardHeader>
+          <CardTitle className="text-future-foreground">Dot Indicator</CardTitle>
+          <CardDescription className="text-future-foreground-muted">
+            Default dot-style tooltip indicator
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ChartContainer config={tooltipDotConfig}>
+            <BarChart data={tooltipData}>
+              <CartesianGrid vertical={false} />
+              <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={8} />
+              <ChartTooltip content={<ChartTooltipContent indicator="dot" />} />
+              <Bar dataKey="revenue" fill="var(--color-revenue)" radius={4} />
+              <Bar dataKey="expenses" fill="var(--color-expenses)" radius={4} />
+            </BarChart>
+          </ChartContainer>
+        </CardContent>
+      </Card>
+
+      {/* Line indicator */}
+      <Card className="border-future-border-subtle bg-future-surface">
+        <CardHeader>
+          <CardTitle className="text-future-foreground">Line Indicator</CardTitle>
+          <CardDescription className="text-future-foreground-muted">
+            Vertical line-style tooltip indicator
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ChartContainer config={tooltipLineConfig}>
+            <BarChart data={tooltipData}>
+              <CartesianGrid vertical={false} />
+              <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={8} />
+              <ChartTooltip content={<ChartTooltipContent indicator="line" />} />
+              <Bar dataKey="revenue" fill="var(--color-revenue)" radius={4} />
+              <Bar dataKey="expenses" fill="var(--color-expenses)" radius={4} />
+            </BarChart>
+          </ChartContainer>
+        </CardContent>
+      </Card>
+
+      {/* Dashed indicator */}
+      <Card className="border-future-border-subtle bg-future-surface">
+        <CardHeader>
+          <CardTitle className="text-future-foreground">Dashed Indicator</CardTitle>
+          <CardDescription className="text-future-foreground-muted">
+            Dashed border-style tooltip indicator
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ChartContainer config={tooltipDashedConfig}>
+            <BarChart data={tooltipData}>
+              <CartesianGrid vertical={false} />
+              <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={8} />
+              <ChartTooltip content={<ChartTooltipContent indicator="dashed" />} />
+              <Bar dataKey="revenue" fill="var(--color-revenue)" radius={4} />
+              <Bar dataKey="expenses" fill="var(--color-expenses)" radius={4} />
+            </BarChart>
+          </ChartContainer>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+// ============================================================================
+// Main content component
+// ============================================================================
+
+function VisualizationContent() {
+  const [activeTab, setActiveTab] = React.useState<Tab>('Area Charts');
+
+  const content: Record<Tab, React.ReactNode> = {
+    'Area Charts': <AreaChartSection />,
+    'Bar Charts': <BarChartSection />,
+    'Line Charts': <LineChartSection />,
+    'Pie Charts': <PieChartSection />,
+    'Radar Charts': <RadarChartSection />,
+    'Radial Charts': <RadialChartSection />,
+    Tooltips: <TooltipShowcase />,
+  };
+
+  return (
+    <div className="flex flex-col gap-6">
+      {/* Tab bar */}
+      <div className="flex gap-1 overflow-x-auto border-b border-future-border-subtle">
+        {TABS.map((tab) => (
+          <button
+            key={tab}
+            className={`shrink-0 px-4 pb-3 text-sm font-medium transition-colors ${
+              activeTab === tab
+                ? 'border-b-2 border-future-accent text-future-foreground'
+                : 'text-future-foreground-muted hover:text-future-foreground'
+            }`}
+            onClick={() => setActiveTab(tab)}
+          >
+            {tab}
+          </button>
+        ))}
+      </div>
+
+      {/* Active chart */}
+      {content[activeTab]}
+    </div>
+  );
+}
+
+// ============================================================================
+// Story
+// ============================================================================
+
+export const Default: Story = {
+  render: (_, { globals }) => (
+    <MaestroTemplate
+      theme={globals.futureTheme || 'dark'}
+      title="Visualization"
+      defaultLeftPanelCollapsed
+      defaultRightPanelCollapsed
+    >
+      <VisualizationContent />
+    </MaestroTemplate>
+  ),
+};
diff --git a/packages/apollo-wind/src/templates/More/more.stories.tsx b/packages/apollo-wind/src/templates/More/more.stories.tsx
deleted file mode 100644
index 3fb4d49f4..000000000
--- a/packages/apollo-wind/src/templates/More/more.stories.tsx
+++ /dev/null
@@ -1,503 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import * as React from 'react';
-import { ArrowUp, Plus, Search, X } from 'lucide-react';
-import { cn } from '@/lib';
-import { fontFamily } from '@/foundation/Future/typography';
-import { MaestroHeader } from '@/components/custom/global-header';
-import { Button } from '@/components/ui/button';
-import { Checkbox } from '@/components/ui/checkbox';
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerHeader,
-  DrawerTitle,
-} from '@/components/ui/drawer';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Textarea } from '@/components/ui/textarea';
-import { Row, Column, Grid } from '@/components/ui/layout';
-
-// ============================================================================
-// Meta
-// ============================================================================
-
-const meta = {
-  title: 'Templates/Onboarding',
-  parameters: {
-    layout: 'fullscreen',
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================================================
-// Shared: Coming Soon page
-// ============================================================================
-
-function ComingSoonPage({
-  title,
-  theme,
-}: {
-  title: string;
-  theme: string;
-}) {
-  return (
-    <div
-      className={cn(
-        theme === 'light' ? 'future-light' : 'future-dark',
-        'flex h-screen w-full items-center justify-center bg-future-surface'
-      )}
-      style={{ fontFamily: fontFamily.base }}
-    >
-      <div className="flex flex-col items-center gap-4">
-        <h1 className="text-3xl font-bold tracking-tight text-future-foreground">
-          {title}
-        </h1>
-        <p className="text-base text-future-foreground-muted">
-          Coming soon
-        </p>
-      </div>
-    </div>
-  );
-}
-
-// ============================================================================
-// Agentic Process: Types
-// ============================================================================
-
-interface ProcessTemplate {
-  id: string;
-  name: string;
-  description: string;
-  usageCount: number;
-  category?: string;
-  tools?: string[];
-  onUse?: () => void;
-}
-
-// ============================================================================
-// Agentic Process: Data
-// ============================================================================
-
-const defaultTemplates: ProcessTemplate[] = [
-  {
-    id: '1',
-    name: 'Client Onboarding Account Opening',
-    description:
-      'An agentic process built with Maestro, modeled using BPMN to orchestrate customer data across...',
-    usageCount: 3400,
-    category: 'financial',
-    tools: ['office365', 'maestro'],
-  },
-  {
-    id: '2',
-    name: 'KYC / CDD & Sanctions Screening',
-    description:
-      'An agentic process built with Maestro, modeled using BPMN to coordinate identity verification, s...',
-    usageCount: 1700,
-    category: 'financial',
-    tools: ['google', 'maestro'],
-  },
-  {
-    id: '3',
-    name: 'Payments Processing & Exceptions',
-    description:
-      'An agentic process built with Maestro, modeled using BPMN to orchestrate payment validation, f...',
-    usageCount: 1200,
-    category: 'financial',
-    tools: ['office365', 'maestro'],
-  },
-  {
-    id: '4',
-    name: 'AML Alert Investigation & Case Mgmt',
-    description:
-      'An agentic process built with Maestro, modeled using BPMN to handle AML alerts through tran...',
-    usageCount: 3400,
-    category: 'financial',
-    tools: ['office365', 'maestro'],
-  },
-  {
-    id: '5',
-    name: 'Regulatory Reporting',
-    description:
-      'An agentic process built with Maestro, modeled using BPMN to automate data aggregation, com...',
-    usageCount: 1700,
-    category: 'financial',
-    tools: ['google', 'maestro'],
-  },
-  {
-    id: '6',
-    name: 'Insurance First Notice of Loss (FNOL)',
-    description:
-      'An agentic process built with Maestro, modeled using BPMN to guide claim intake, coverage che...',
-    usageCount: 1200,
-    category: 'healthcare',
-    tools: ['office365', 'maestro'],
-  },
-  {
-    id: '7',
-    name: 'Insurance Claims Adjudication & Settlement',
-    description:
-      'An agentic process built with Maestro, modeled using BPMN to coordinate policy validation, frau...',
-    usageCount: 3400,
-    category: 'healthcare',
-    tools: ['office365', 'maestro'],
-  },
-  {
-    id: '8',
-    name: 'Underwriting (New & Renewal)',
-    description:
-      'An agentic process built with Maestro, modeled using BPMN to orchestrate data gathering, risk...',
-    usageCount: 1700,
-    category: 'other',
-    tools: ['google', 'maestro'],
-  },
-  {
-    id: '9',
-    name: 'Cards Dispute & Chargeback Management',
-    description:
-      'An agentic process built with Maestro, modeled using BPMN to automate dispute intake, transac...',
-    usageCount: 1200,
-    category: 'financial',
-    tools: ['office365', 'maestro'],
-  },
-];
-
-const defaultCategories = [
-  { id: 'financial', label: 'Financial' },
-  { id: 'healthcare', label: 'Healthcare' },
-  { id: 'other', label: 'Other' },
-];
-
-const defaultTools = [
-  { id: 'office365', label: 'Office365' },
-  { id: 'jira', label: 'Jira' },
-  { id: 'sap-concur', label: 'SAP Concur' },
-  { id: 'slack', label: 'Slack' },
-  { id: 'docusign', label: 'DocuSign' },
-];
-
-// ============================================================================
-// Agentic Process: Component
-// ============================================================================
-
-function AgenticProcessPage({ theme }: { theme: string }) {
-  const themeValue = theme === 'light' ? 'light' : 'dark';
-  const themeClass = theme === 'light' ? 'future-light' : 'future-dark';
-
-  const [autopilotPrompt, setAutopilotPrompt] = React.useState('');
-  const [drawerOpen, setDrawerOpen] = React.useState(false);
-  const [searchQuery, setSearchQuery] = React.useState('');
-  const [selectedCategories, setSelectedCategories] = React.useState<string[]>([]);
-  const [selectedTools, setSelectedTools] = React.useState<string[]>([]);
-
-  const formatUsageCount = (count: number) =>
-    count >= 1000 ? `${(count / 1000).toFixed(1)}k` : count.toString();
-
-  const toggleCategory = (id: string) =>
-    setSelectedCategories((prev) =>
-      prev.includes(id) ? prev.filter((c) => c !== id) : [...prev, id]
-    );
-
-  const toggleTool = (id: string) =>
-    setSelectedTools((prev) =>
-      prev.includes(id) ? prev.filter((t) => t !== id) : [...prev, id]
-    );
-
-  const filteredTemplates = React.useMemo(() => {
-    return defaultTemplates.filter((t) => {
-      const matchesSearch =
-        searchQuery === '' ||
-        t.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        t.description.toLowerCase().includes(searchQuery.toLowerCase());
-      const matchesCategory =
-        selectedCategories.length === 0 ||
-        (t.category && selectedCategories.includes(t.category));
-      const matchesTools =
-        selectedTools.length === 0 ||
-        (t.tools && t.tools.some((tool) => selectedTools.includes(tool)));
-      return matchesSearch && matchesCategory && matchesTools;
-    });
-  }, [searchQuery, selectedCategories, selectedTools]);
-
-  const ExampleCard = ({ template }: { template: ProcessTemplate }) => (
-    <Column className="group rounded-2xl border border-future-border bg-future-surface-raised p-8 transition-all hover:border-future-border-hover">
-      <Column gap={4} flex={1} className="mb-8">
-        <h3 className="text-base font-semibold leading-tight text-future-foreground">
-          {template.name}
-        </h3>
-        <p className="text-sm leading-relaxed text-future-foreground-muted">
-          {template.description}
-        </p>
-        <Row gap={1.5} align="center" className="text-xs text-future-foreground-subtle">
-          <svg
-            className="h-3.5 w-3.5"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-            />
-          </svg>
-          <span>{formatUsageCount(template.usageCount)}</span>
-        </Row>
-      </Column>
-      <button className="flex h-9 w-full items-center justify-center rounded-xl border border-future-border text-sm font-medium text-future-foreground transition-colors hover:bg-future-surface-hover">
-        Use
-      </button>
-    </Column>
-  );
-
-  return (
-    <>
-      <div
-        className={cn(themeClass, 'flex h-screen flex-col bg-future-surface')}
-        style={{ fontFamily: fontFamily.base }}
-      >
-        {/* Global header */}
-        <MaestroHeader theme={themeValue} title="Maestro" />
-
-        {/* Page content */}
-        <div className="flex flex-1 flex-col overflow-y-auto px-8 py-12 md:px-16 md:py-16">
-          {/* Header */}
-          <div className="mb-10">
-            <Row justify="between" align="start" gap={8}>
-              <Column flex={1}>
-                <h1 className="text-3xl font-bold tracking-tight text-future-foreground">
-                  Let&apos;s create an agentic process
-                </h1>
-                <p className="mt-4 text-base text-future-foreground-muted">
-                  Design and orchestrate end-to-end processes with AI agents, robots, and people
-                  using BPMN-based diagrams.
-                </p>
-              </Column>
-              <button
-                className="shrink-0 text-sm font-medium text-future-accent-foreground transition-colors hover:text-future-foreground"
-                onClick={() => setDrawerOpen(true)}
-              >
-                Explore templates
-              </button>
-            </Row>
-          </div>
-
-          {/* Autopilot — above cards */}
-          <div className="mx-auto mb-12 w-full max-w-3xl">
-            <h2 className="mb-6 text-lg font-semibold text-future-foreground">Autopilot</h2>
-            <div className="rounded-2xl border border-future-border bg-future-surface-raised">
-              <div className="relative p-6">
-                <Textarea
-                  placeholder="Create an agent to..."
-                  value={autopilotPrompt}
-                  onChange={(e) => setAutopilotPrompt(e.target.value)}
-                  className="min-h-[120px] resize-none border-0 bg-transparent p-0 pb-12 text-sm text-future-foreground placeholder:text-future-foreground-subtle focus-visible:ring-0"
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-                      e.preventDefault();
-                    }
-                  }}
-                />
-                <div className="absolute bottom-6 left-6 right-6 flex items-center justify-between">
-                  <button
-                    className="flex h-8 w-8 items-center justify-center rounded-lg text-future-foreground-muted transition-colors hover:text-future-foreground disabled:opacity-50"
-                    disabled={!autopilotPrompt}
-                    aria-label="Clear prompt"
-                    onClick={() => setAutopilotPrompt('')}
-                  >
-                    <Plus className="h-4 w-4" />
-                  </button>
-                  <button
-                    className="flex h-8 w-8 items-center justify-center rounded-full bg-future-accent text-future-foreground-on-accent disabled:opacity-50"
-                    disabled={!autopilotPrompt.trim()}
-                    aria-label="Submit prompt"
-                  >
-                    <ArrowUp className="h-4 w-4" />
-                  </button>
-                </div>
-              </div>
-              <div className="border-t border-future-border-subtle px-6 py-3 text-center">
-                <p className="text-xs text-future-foreground-subtle">
-                  Autopilot can make mistakes. Please double check the responses.
-                </p>
-              </div>
-            </div>
-          </div>
-
-          {/* Template cards */}
-          <Grid gap={8} cols={1} className="sm:grid-cols-2 lg:grid-cols-4">
-            {/* Blank card */}
-            <button className="group flex cursor-pointer flex-col items-center justify-between rounded-2xl border border-dashed border-future-border bg-future-surface-raised p-8 text-center transition-all hover:border-future-border-hover">
-              <Column gap={4} w="full">
-                <h3 className="text-base font-semibold text-future-foreground">
-                  Blank agentic process
-                </h3>
-                <p className="text-sm text-future-foreground-muted">
-                  Start building without a template.
-                </p>
-              </Column>
-              <div className="mt-8 flex h-20 w-20 items-center justify-center rounded-lg border-2 border-dashed border-future-border">
-                <Plus className="h-8 w-8 text-future-accent" />
-              </div>
-            </button>
-
-            {/* First 3 template cards */}
-            {defaultTemplates.slice(0, 3).map((template) => (
-              <ExampleCard key={template.id} template={template} />
-            ))}
-          </Grid>
-        </div>
-      </div>
-
-      {/* Explore Templates Drawer */}
-      <Drawer open={drawerOpen} onOpenChange={setDrawerOpen}>
-        <DrawerContent className={cn(themeClass, 'max-h-[75vh] bg-future-surface')}>
-          <DrawerHeader className="border-b border-future-border-subtle px-4 py-2 md:px-6 md:py-3">
-            <Row justify="between" align="start">
-              <div>
-                <DrawerTitle className="text-base text-future-foreground md:text-lg">
-                  Explore templates
-                </DrawerTitle>
-                <DrawerDescription className="text-xs text-future-foreground-muted md:text-sm">
-                  Build, customise and deploy an Agentic Process starting from a template.
-                </DrawerDescription>
-              </div>
-              <DrawerClose asChild>
-                <button className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-future-foreground-muted transition-colors hover:text-future-foreground">
-                  <X className="h-4 w-4" />
-                  <span className="sr-only">Close</span>
-                </button>
-              </DrawerClose>
-            </Row>
-          </DrawerHeader>
-
-          <Row overflow="hidden" className="h-[calc(75vh-80px)]">
-            {/* Sidebar */}
-            <div className="hidden w-56 border-r border-future-border-subtle bg-future-surface-raised p-3 md:block">
-              <div className="mb-3">
-                <div className="relative">
-                  <Search className="absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-future-foreground-subtle" />
-                  <Input
-                    placeholder="Search"
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                    className="h-8 border-future-border bg-future-surface-overlay pl-7 text-xs text-future-foreground placeholder:text-future-foreground-subtle"
-                  />
-                </div>
-              </div>
-
-              <Column gap={3}>
-                <div>
-                  <Row justify="between" align="center" className="mb-1.5">
-                    <h4 className="text-xs font-semibold text-future-foreground">Category</h4>
-                    <button
-                      className="text-[10px] text-future-foreground-muted hover:text-future-foreground"
-                      onClick={() => setSelectedCategories([])}
-                    >
-                      Clear
-                    </button>
-                  </Row>
-                  <Column gap={1.5}>
-                    {defaultCategories.map((cat) => (
-                      <Row key={cat.id} gap={2} align="center">
-                        <Checkbox
-                          id={`cat-${cat.id}`}
-                          checked={selectedCategories.includes(cat.id)}
-                          onCheckedChange={() => toggleCategory(cat.id)}
-                          className="h-3 w-3 border-future-border"
-                        />
-                        <Label
-                          htmlFor={`cat-${cat.id}`}
-                          className="cursor-pointer text-xs font-normal text-future-foreground-muted"
-                        >
-                          {cat.label}
-                        </Label>
-                      </Row>
-                    ))}
-                  </Column>
-                </div>
-
-                <div>
-                  <Row justify="between" align="center" className="mb-1.5">
-                    <h4 className="text-xs font-semibold text-future-foreground">Tool</h4>
-                    <button
-                      className="text-[10px] text-future-foreground-muted hover:text-future-foreground"
-                      onClick={() => setSelectedTools([])}
-                    >
-                      Clear
-                    </button>
-                  </Row>
-                  <Column gap={1.5}>
-                    {defaultTools.map((tool) => (
-                      <Row key={tool.id} gap={2} align="center">
-                        <Checkbox
-                          id={`tool-${tool.id}`}
-                          checked={selectedTools.includes(tool.id)}
-                          onCheckedChange={() => toggleTool(tool.id)}
-                          className="h-3 w-3 border-future-border"
-                        />
-                        <Label
-                          htmlFor={`tool-${tool.id}`}
-                          className="cursor-pointer text-xs font-normal text-future-foreground-muted"
-                        >
-                          {tool.label}
-                        </Label>
-                      </Row>
-                    ))}
-                  </Column>
-                </div>
-              </Column>
-            </div>
-
-            {/* Main content */}
-            <div className="flex-1 overflow-y-auto p-3 md:p-4">
-              <Grid gap={3} cols={1} className="sm:grid-cols-2 lg:grid-cols-3">
-                {filteredTemplates.map((template) => (
-                  <ExampleCard key={template.id} template={template} />
-                ))}
-              </Grid>
-
-              {filteredTemplates.length === 0 && (
-                <Row h={32} justify="center" align="center">
-                  <p className="text-sm text-future-foreground-muted">No templates found</p>
-                </Row>
-              )}
-            </div>
-          </Row>
-        </DrawerContent>
-      </Drawer>
-    </>
-  );
-}
-
-// ============================================================================
-// Stories
-// ============================================================================
-
-export const GuidedTour: Story = {
-  name: 'Guided Tour',
-  render: (_, { globals }) => {
-    const themeClass = globals.futureTheme === 'light' ? 'future-light' : 'future-dark';
-    return (
-      <div
-        className={cn(themeClass, 'flex h-screen items-center justify-center bg-future-surface')}
-        style={{ fontFamily: fontFamily.base }}
-      >
-        <p className="text-sm text-future-foreground-muted">Coming soon</p>
-      </div>
-    );
-  },
-};
-
-export const AgenticProcess: Story = {
-  name: 'Agentic Process',
-  render: (_, { globals }) => (
-    <AgenticProcessPage theme={globals.futureTheme || 'dark'} />
-  ),
-};
-
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 06925f16a..c93e09150 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -875,6 +875,9 @@ importers:
       react-resizable-panels:
         specifier: ^3.0.6
         version: 3.0.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      recharts:
+        specifier: ^2.15.4
+        version: 2.15.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       sonner:
         specifier: ^2.0.7
         version: 2.0.7(react-dom@19.2.3(react@19.2.3))(react@19.2.3)

From f59e7b3dee2f7803661a515aa7dc5ca424ead761 Mon Sep 17 00:00:00 2001
From: David Anthony <dba@hey.com>
Date: Fri, 13 Feb 2026 11:29:19 -0800
Subject: [PATCH 3/8] feat(apollo-wind): wip

Co-authored-by: Cursor <cursoragent@cursor.com>
Made-with: Cursor
---
 .gitignore                                    |    1 +
 packages/apollo-wind/.storybook/main.ts       |    1 +
 packages/apollo-wind/.storybook/preview.tsx   |   44 +-
 packages/apollo-wind/apollo-ai-context.md     |  547 +++++--
 packages/apollo-wind/package.json             |    8 +-
 .../src/components/custom/chat-steps-view.tsx |    2 +-
 .../custom/flow-properties-bar.stories.tsx    |   21 -
 .../components/custom/flow-properties-bar.tsx |    5 +-
 .../flow-properties-expanded.stories.tsx      |   28 -
 .../custom/flow-properties-expanded.tsx       |   32 +-
 .../custom/flow-properties.stories.tsx        |   81 ++
 .../src/components/custom/flow-properties.tsx |   75 +
 .../src/components/custom/global-header.tsx   |   16 +-
 .../{ui => custom}/viewport-guard.tsx         |    0
 .../apollo-wind/src/components/ui/button.tsx  |    6 +-
 .../src/components/ui/calendar.stories.tsx    |    2 +-
 .../src/components/ui/collapsible.stories.tsx |   44 -
 .../ui/component-gallery.stories.tsx          |  136 +-
 .../src/components/ui/data-table.stories.tsx  |  428 ++++--
 .../src/components/ui/data-table.tsx          |   20 +-
 .../apollo-wind/src/components/ui/index.ts    |   10 +-
 .../src/components/ui/search.stories.tsx      |    2 +-
 .../src/components/ui/slider.stories.tsx      |   96 +-
 .../src/components/ui/tree-view.stories.tsx   |  271 ++++
 .../src/components/ui/tree-view.tsx           | 1267 +++++++++++++++++
 .../src/foundation/Future/colors.stories.tsx  |  348 +++--
 .../src/foundation/Future/colors.ts           |    8 +-
 .../src/foundation/Future/future-theme.css    |  343 ++++-
 .../src/foundation/Future/icons.stories.tsx   |    2 +-
 .../src/foundation/Future/radius.stories.tsx  |  112 +-
 .../foundation/Future/responsive.stories.tsx  |  184 ++-
 .../src/foundation/Future/shadows.stories.tsx |  106 +-
 .../src/foundation/Future/spacing.stories.tsx |  237 +--
 .../src/foundation/Future/strokes.stories.tsx |  224 ++-
 .../src/foundation/Future/theme.stories.tsx   |  112 +-
 .../src/foundation/Future/types.ts            |    5 +-
 .../foundation/Future/typography.stories.tsx  |  316 ++--
 .../src/foundation/Legacy/colors.stories.tsx  |    2 +-
 .../src/foundation/Legacy/icons.stories.tsx   |    2 +-
 .../src/foundation/Legacy/spacing.stories.tsx |    2 +-
 .../foundation/Legacy/typography.stories.tsx  |    2 +-
 .../getting-started.stories.tsx               |  291 +++-
 .../getting-started/prototyping.stories.tsx   |  935 ++++++++----
 packages/apollo-wind/src/index.ts             |   10 +
 .../src/styles/tailwind.consumer.css          |    4 +
 .../src/templates/Admin/admin.stories.tsx     |  739 +++++-----
 .../src/templates/Admin/settings-admin.tsx    |  437 ++++++
 .../src/templates/Admin/template-admin.tsx    |  311 ++++
 .../templates/Delegate/template-delegate.tsx  |   14 +-
 .../EmptyErrors/empty-errors.stories.tsx      |   17 +-
 .../ideas-AnimatedGradientText.tsx            |  113 ++
 .../Experiments/ideas-experiments.css         |   10 +
 .../templates/Experiments/ideas.stories.tsx   |  956 +++++++++++++
 .../src/templates/Flow/flow.stories.tsx       |   28 +-
 .../src/templates/Flow/template-flow.tsx      |   43 +-
 .../templates/Maestro/template-maestro.tsx    |   14 +-
 .../visualization.stories.tsx                 |  108 +-
 .../src/templates/VisualStudio/shell.tsx      |  406 ++++++
 .../VisualStudio/visual-studio.stories.tsx    |  301 ++++
 pnpm-lock.yaml                                |  130 +-
 60 files changed, 8099 insertions(+), 1916 deletions(-)
 delete mode 100644 packages/apollo-wind/src/components/custom/flow-properties-bar.stories.tsx
 delete mode 100644 packages/apollo-wind/src/components/custom/flow-properties-expanded.stories.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/flow-properties.stories.tsx
 create mode 100644 packages/apollo-wind/src/components/custom/flow-properties.tsx
 rename packages/apollo-wind/src/components/{ui => custom}/viewport-guard.tsx (100%)
 delete mode 100644 packages/apollo-wind/src/components/ui/collapsible.stories.tsx
 create mode 100644 packages/apollo-wind/src/components/ui/tree-view.stories.tsx
 create mode 100644 packages/apollo-wind/src/components/ui/tree-view.tsx
 create mode 100644 packages/apollo-wind/src/templates/Admin/settings-admin.tsx
 create mode 100644 packages/apollo-wind/src/templates/Admin/template-admin.tsx
 create mode 100644 packages/apollo-wind/src/templates/Experiments/ideas-AnimatedGradientText.tsx
 create mode 100644 packages/apollo-wind/src/templates/Experiments/ideas-experiments.css
 create mode 100644 packages/apollo-wind/src/templates/Experiments/ideas.stories.tsx
 rename packages/apollo-wind/src/templates/{Experiments => Maestro}/visualization.stories.tsx (86%)
 create mode 100644 packages/apollo-wind/src/templates/VisualStudio/shell.tsx
 create mode 100644 packages/apollo-wind/src/templates/VisualStudio/visual-studio.stories.tsx

diff --git a/.gitignore b/.gitignore
index d6866a933..86225fb78 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,6 +10,7 @@ plan/*
 node_modules/
 .pnp
 .pnp.js
+.pnpm-store
 
 # Build outputs
 dist/
diff --git a/packages/apollo-wind/.storybook/main.ts b/packages/apollo-wind/.storybook/main.ts
index 66aeeda74..5050846f6 100644
--- a/packages/apollo-wind/.storybook/main.ts
+++ b/packages/apollo-wind/.storybook/main.ts
@@ -64,6 +64,7 @@ const config: StorybookConfig = {
   async viteFinal(config) {
     return {
       ...config,
+      envDir: resolve(__dirname, '..'),
       resolve: {
         ...config.resolve,
         alias: {
diff --git a/packages/apollo-wind/.storybook/preview.tsx b/packages/apollo-wind/.storybook/preview.tsx
index c989ea379..8099f5b4f 100644
--- a/packages/apollo-wind/.storybook/preview.tsx
+++ b/packages/apollo-wind/.storybook/preview.tsx
@@ -63,17 +63,33 @@ const preview: Preview = {
         order: [
           'Introduction',
           'Theme',
+          [
+            'Colors',
+            'Icons',
+            'Spacing',
+            'Typography',
+            'Future',
+            ['*', 'Theme'],
+          ],
           'Components',
           [
             'All Components',
             'Core',
             'Data Display',
+            'Feedback',
             'Layout',
             'Navigation',
             'Overlays',
             'UiPath',
           ],
           'Templates',
+          [
+            'Admin',
+            'Delegate',
+            'Flow',
+            'Maestro',
+            'Future',
+          ],
           'Forms',
           'Experiments',
           '*',
@@ -94,10 +110,13 @@ const preview: Preview = {
         title: 'Theme',
         icon: 'paintbrush',
         items: [
-          { value: 'dark', title: 'Future: Dark' },
+          { value: 'legacy-light', title: 'Light' },
+          { value: 'legacy-dark', title: 'Dark' },
           { value: 'light', title: 'Future: Light' },
-          { value: 'legacy-dark', title: 'Legacy: Dark' },
-          { value: 'legacy-light', title: 'Legacy: Light' },
+          { value: 'dark', title: 'Future: Dark' },
+          { value: 'wireframe', title: 'Demo: Wireframe' },
+          { value: 'vertex', title: 'Demo: Vertex' },
+          { value: 'canvas', title: 'Demo: Canvas' },
         ],
         dynamicTitle: true,
       },
@@ -124,21 +143,22 @@ const preview: Preview = {
 
       // Map the toolbar value to the CSS class that activates the correct
       // set of CSS custom properties (surfaces, foregrounds, borders, etc.).
-      const themeClass =
-        futureTheme === 'legacy-dark'
-          ? 'legacy-dark'
-          : futureTheme === 'legacy-light'
-            ? 'legacy-light'
-            : futureTheme === 'light'
-              ? 'future-light'
-              : 'future-dark';
+      const themeClassMap: Record<string, string> = {
+        'legacy-dark': 'legacy-dark',
+        'legacy-light': 'legacy-light',
+        wireframe: 'future-wireframe',
+        vertex: 'future-vertex',
+        canvas: 'future-canvas',
+        light: 'future-light',
+      };
+      const themeClass = themeClassMap[futureTheme] ?? 'future-dark';
 
       // Apply the theme class to <html> so every story — including standalone
       // component stories that don't manage their own theme — inherits the
       // correct CSS variables (shadcn bridge + Future tokens).
       useEffect(() => {
         const root = document.documentElement;
-        const allThemeClasses = ['future-dark', 'future-light', 'legacy-dark', 'legacy-light'];
+        const allThemeClasses = ['future-dark', 'future-light', 'future-wireframe', 'future-vertex', 'future-canvas', 'legacy-dark', 'legacy-light'];
         root.classList.remove(...allThemeClasses);
         root.classList.add(themeClass);
         return () => {
diff --git a/packages/apollo-wind/apollo-ai-context.md b/packages/apollo-wind/apollo-ai-context.md
index 7e7248984..89b7ddf99 100644
--- a/packages/apollo-wind/apollo-ai-context.md
+++ b/packages/apollo-wind/apollo-ai-context.md
@@ -1,15 +1,13 @@
 # Apollo Wind — AI Context
 
-> Feed this file to your AI tool (Cursor rules, Claude context, ChatGPT, etc.)
+> Feed this file to your AI tool (Cursor rules, Claude context, ChatGPT, v0, etc.)
 > to get consistent, design-system-aligned output when prototyping.
 
 ---
 
 ## Stack
 
-- React 19
-- TypeScript
-- Tailwind CSS 4
+- React 19, TypeScript, Tailwind CSS 4
 - shadcn/ui components (Radix UI primitives)
 - Lucide React icons
 - Storybook 10
@@ -17,119 +15,34 @@
 ## Import Paths
 
 ```tsx
-// Components — always use the @/ alias
+// UI components — always use the @/ alias
 import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Badge } from '@/components/ui/badge';
 
 // Icons — always from lucide-react
 import { Search, Plus, X, ChevronDown } from 'lucide-react';
 
 // Utilities
 import { cn } from '@/lib';                           // class merging (clsx + tailwind-merge)
+import { get } from '@/lib';                          // safe nested object access
+import { deepEqual } from '@/lib';                    // deep equality check
 import { fontFamily } from '@/foundation/Future/typography'; // font stacks
 ```
 
-## Available Components
-
-### Core UI (from `@/components/ui/`)
-
-| Component | Import | Description |
-|-----------|--------|-------------|
-| Accordion | `accordion` | Collapsible content sections (Radix) |
-| Alert | `alert` | Status messages |
-| AlertDialog | `alert-dialog` | Confirmation dialogs (Radix) |
-| AspectRatio | `aspect-ratio` | Fixed aspect ratio containers |
-| Avatar | `avatar` | User avatars with fallback |
-| Badge | `badge` | Status/label badges |
-| Breadcrumb | `breadcrumb` | Navigation breadcrumbs |
-| Button | `button` | Primary action element. Variants: `default`, `destructive`, `outline`, `secondary`, `ghost`, `link` |
-| ButtonGroup | `button-group` | Grouped button container |
-| Calendar | `calendar` | Date calendar (react-day-picker) |
-| Card | `card` | Content card with header/content/footer |
-| Checkbox | `checkbox` | Toggle checkbox (Radix) |
-| Collapsible | `collapsible` | Expand/collapse container (Radix) |
-| Combobox | `combobox` | Searchable select (cmdk) |
-| Command | `command` | Command palette (cmdk) |
-| ContextMenu | `context-menu` | Right-click menu (Radix) |
-| DataTable | `data-table` | Full-featured data grid (TanStack Table). Includes sorting, filtering, pagination, row selection, column toggle |
-| DatePicker | `date-picker` | Date input with calendar popover |
-| DateTimePicker | `datetime-picker` | Date + time input |
-| Dialog | `dialog` | Modal dialog (Radix) |
-| Drawer | `drawer` | Bottom sheet drawer (Vaul) |
-| DropdownMenu | `dropdown-menu` | Dropdown menu (Radix) |
-| EmptyState | `empty-state` | Placeholder for empty content |
-| FileUpload | `file-upload` | File upload zone |
-| HoverCard | `hover-card` | Hover-triggered card (Radix) |
-| Input | `input` | Text input field |
-| Label | `label` | Form label (Radix) |
-| Layout (Grid, Row, Column) | `layout/grid`, `layout/row`, `layout/column` | Responsive layout primitives |
-| Menubar | `menubar` | Horizontal menu bar (Radix) |
-| MultiSelect | `multi-select` | Multiple selection dropdown |
-| NavigationMenu | `navigation-menu` | Navigation links menu (Radix) |
-| Pagination | `pagination` | Page navigation controls |
-| Popover | `popover` | Popover overlay (Radix) |
-| Progress | `progress` | Progress bar (Radix) |
-| RadioGroup | `radio-group` | Radio button group (Radix) |
-| Resizable | `resizable` | Resizable panel layout (react-resizable-panels) |
-| ScrollArea | `scroll-area` | Custom scrollbar container (Radix) |
-| Search | `search` | Search input with icon |
-| Select | `select` | Dropdown select (Radix) |
-| Separator | `separator` | Visual divider (Radix) |
-| Sheet | `sheet` | Side panel / drawer (Radix Dialog) |
-| Skeleton | `skeleton` | Loading placeholder |
-| Slider | `slider` | Range slider (Radix) |
-| Sonner | `sonner` | Toast notifications |
-| Spinner | `spinner` | Loading spinner |
-| StatsCard | `stats-card` | Metric/statistic display card |
-| Stepper | `stepper` | Multi-step progress indicator |
-| Switch | `switch` | Toggle switch (Radix) |
-| Table | `table` | Static HTML table with styled parts |
-| Tabs | `tabs` | Tabbed interface (Radix) |
-| Textarea | `textarea` | Multi-line text input |
-| Toggle | `toggle` | Toggle button (Radix) |
-| ToggleGroup | `toggle-group` | Group of toggle buttons (Radix) |
-| Tooltip | `tooltip` | Hover tooltip (Radix) |
-| ViewportGuard | `viewport-guard` | Min-width gate for responsive layouts |
-
-### Custom Components (from `@/components/custom/`)
-
-| Component | Import | Description |
-|-----------|--------|-------------|
-| Canvas | `canvas` | Main content area for flow/delegate templates |
-| MaestroHeader | `global-header` | Global app header with menu drawer, title, search, avatar |
-| FlowNode | `flow-node` | Flow editor node element |
-| FlowCanvasToolbar | `toolbar-canvas` | Bottom-center canvas mode toolbar |
-| FlowViewToolbar | `toolbar-view` | Bottom-right zoom/view toolbar |
-| PropertiesBar | `flow-properties-bar` | Collapsed properties bar |
-| PropertiesExpanded | `flow-properties-expanded` | Full expanded properties panel |
-| PropertiesSimple | `flow-properties-simple` | Compact properties panel with JSON editor drawer |
-| FlowPanel | `panel-flow` | Left icon rail + expandable chat panel |
-| DelegatePanel | `panel-delegate` | Delegate navigation panel |
-| MaestroPanel | `panel-maestro` | Maestro side panels (left/right) |
-| MaestroGrid | `grid-maestro` | Maestro content grid layout |
-| ChatComposer | `chat-composer` | Chat message input |
-| ChatFirstExperience | `chat-first-experience` | Empty chat state |
-| ChatPromptSuggestions | `chat-prompt-suggestions` | Suggested prompts |
-| ChatStepsView | `chat-steps-view` | Chat step progress |
+---
 
 ## Theming
 
-### How it works
-
-Themes use CSS custom properties scoped to CSS classes. Apply a class to a parent element to activate a theme:
+Themes use CSS custom properties scoped to CSS classes. Apply a class to a parent element — no runtime provider needed. Tailwind utilities resolve automatically.
 
 ```tsx
-// Wrap your component in a theme class
-<div className="future-dark">  {/* or: future-light, legacy-dark, legacy-light */}
+<div className="future-dark">
   <YourComponent />
 </div>
 ```
 
-No runtime theme provider is needed. Tailwind utilities resolve automatically based on the active theme class.
-
-### Theme classes
-
 | Class | Description |
 |-------|-------------|
 | `future-dark` | Future design language — dark mode (default) |
@@ -145,10 +58,10 @@ No runtime theme provider is needed. Tailwind utilities resolve automatically ba
 - `bg-future-surface-overlay` — inputs, tabs, icon rail
 - `bg-future-surface-hover` — hover/selected states
 - `bg-future-surface-muted` — badges, indicators
-- `bg-future-surface-inverse` — inverse backgrounds (primary buttons)
+- `bg-future-surface-inverse` — inverse backgrounds
 
 **Accent:**
-- `bg-future-accent` — primary accent (cyan)
+- `bg-future-accent` — primary accent cyan (#06b6d4)
 - `bg-future-accent-subtle` — subtle accent backgrounds
 
 **Text/icons (foreground):**
@@ -157,86 +70,430 @@ No runtime theme provider is needed. Tailwind utilities resolve automatically ba
 - `text-future-foreground-muted` — secondary UI text
 - `text-future-foreground-subtle` — muted labels
 - `text-future-foreground-inverse` — text on inverse backgrounds
-- `text-future-accent-foreground` — accent-colored text/icons
+- `text-future-foreground-accent` — accent-colored text/icons
 
 **Borders:**
 - `border-future-border` — primary borders
 - `border-future-border-subtle` — subtle dividers
 - `border-future-border-muted` — content borders
 
+### Bridge tokens (cross-theme compatible)
+
+For code that must work across all 4 themes (Future + Legacy), use these shadcn bridge tokens instead of `future-*`. They resolve correctly under any theme class.
+
+- **Surfaces:** `bg-background`, `bg-card`, `bg-muted`, `bg-muted/50`
+- **Text:** `text-foreground`, `text-muted-foreground`, `text-card-foreground`
+- **Borders:** `border-border`, `border-input`
+- **Accent:** `bg-primary`, `text-primary`, `text-primary-foreground`, `bg-primary/10`
+
+> **When to use which:** Use `future-*` tokens when building for a specific theme. Use bridge tokens when the same code must render across Future and Legacy themes.
+
 ### Typography
 
-- **Primary font:** Inter (sans-serif)
-- **Monospace font:** JetBrains Mono
+- **Primary font:** Inter (`fontFamily.base`)
+- **Monospace font:** JetBrains Mono (`fontFamily.monospace`)
 - Apply via: `style={{ fontFamily: fontFamily.base }}`
 
-## Rules — Do This, Not That
+---
+
+## Components
+
+### Core UI (`@/components/ui/`)
+
+#### Button
+
+```tsx
+<Button>Default</Button>
+<Button variant="outline">Outline</Button>
+<Button variant="ghost">Ghost</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="destructive">Delete</Button>
+<Button variant="link">Link</Button>
+<Button size="sm">Small</Button>
+<Button size="lg">Large</Button>
+<Button size="icon"><Plus className="h-4 w-4" /></Button>
+```
+
+#### Card
+
+```tsx
+<Card className="bg-card text-card-foreground">
+  <CardHeader>
+    <CardTitle>Title</CardTitle>
+    <CardDescription>Subtitle text</CardDescription>
+  </CardHeader>
+  <CardContent>Main content here</CardContent>
+  <CardFooter>
+    <Button>Action</Button>
+  </CardFooter>
+</Card>
+```
+
+#### Table (static)
+
+```tsx
+<Table>
+  <TableHeader>
+    <TableRow>
+      <TableHead className="text-muted-foreground">Name</TableHead>
+      <TableHead className="text-muted-foreground">Status</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell className="text-foreground">John Doe</TableCell>
+      <TableCell><Badge>Active</Badge></TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+#### DataTable (full-featured)
+
+Sorting, filtering, pagination, row selection, and column toggle — built on TanStack Table.
+
+```tsx
+import { DataTable } from '@/components/ui/data-table';
+
+const columns = [
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'status', header: 'Status' },
+  { accessorKey: 'role', header: 'Role' },
+];
+
+<DataTable columns={columns} data={data} />
+```
+
+#### Badge
+
+```tsx
+<Badge>Default</Badge>
+<Badge variant="outline">Outline</Badge>
+<Badge variant="secondary">Secondary</Badge>
+<Badge variant="destructive">Error</Badge>
+```
+
+#### Input, Label, Select, Textarea
+
+```tsx
+<div className="space-y-2">
+  <Label htmlFor="name">Name</Label>
+  <Input id="name" placeholder="Enter name..." />
+</div>
+
+<Textarea placeholder="Write a description..." />
+
+<Select>
+  <SelectTrigger><SelectValue placeholder="Choose..." /></SelectTrigger>
+  <SelectContent>
+    <SelectItem value="a">Option A</SelectItem>
+    <SelectItem value="b">Option B</SelectItem>
+  </SelectContent>
+</Select>
+```
+
+#### Tabs
+
+```tsx
+<Tabs defaultValue="overview">
+  <TabsList>
+    <TabsTrigger value="overview">Overview</TabsTrigger>
+    <TabsTrigger value="analytics">Analytics</TabsTrigger>
+  </TabsList>
+  <TabsContent value="overview">Overview content</TabsContent>
+  <TabsContent value="analytics">Analytics content</TabsContent>
+</Tabs>
+```
+
+#### Dialog & Sheet
+
+```tsx
+<Dialog>
+  <DialogTrigger asChild><Button>Open</Button></DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Title</DialogTitle>
+      <DialogDescription>Description</DialogDescription>
+    </DialogHeader>
+    {/* content */}
+    <DialogFooter><Button>Save</Button></DialogFooter>
+  </DialogContent>
+</Dialog>
+
+<Sheet>
+  <SheetTrigger asChild><Button>Open Panel</Button></SheetTrigger>
+  <SheetContent side="right">Panel content</SheetContent>
+</Sheet>
+```
+
+#### Other available components
+
+Accordion, Alert, AlertDialog, AspectRatio, Avatar, Breadcrumb, ButtonGroup,
+Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DatePicker,
+DateTimePicker, Drawer, DropdownMenu, EditableCell, EmptyState, FileUpload,
+HoverCard, Layout (Grid/Row/Column), Menubar, MultiSelect, NavigationMenu,
+Pagination, Popover, Progress, RadioGroup, Resizable, ScrollArea, Search,
+Separator, Skeleton, Slider, Sonner, Spinner, StatsCard, Stepper, Switch,
+Toggle, ToggleGroup, Tooltip, TreeView
+
+All imported from `@/components/ui/<component-name>`.
+
+### Custom Components (`@/components/custom/`)
+
+| Component | Import | Purpose |
+|-----------|--------|---------|
+| ViewportGuard | `viewport-guard` | Min-width gate for templates |
+| Canvas | `canvas` | Main content area for templates |
+| MaestroHeader | `global-header` | Global app header with menu, search, avatar |
+| FlowNode | `flow-node` | Flow editor node element |
+| FlowCanvasToolbar | `toolbar-canvas` | Bottom canvas mode toolbar |
+| FlowViewToolbar | `toolbar-view` | Bottom zoom/view toolbar |
+| FlowProperties | `flow-properties` | Flow properties panel (`expanded` prop) |
+| PropertiesSimple | `flow-properties-simple` | Compact properties with JSON drawer |
+| FlowPanel | `panel-flow` | Left icon rail + expandable chat |
+| DelegatePanel | `panel-delegate` | Delegate navigation panel |
+| MaestroPanel | `panel-maestro` | Maestro side panels |
+| MaestroGrid | `grid-maestro` | Maestro content grid |
+| ChatComposer | `chat-composer` | Chat message input |
+| ChatFirstExperience | `chat-first-experience` | Empty chat state |
+| ChatPromptSuggestions | `chat-prompt-suggestions` | Suggested prompts |
+| ChatStepsView | `chat-steps-view` | Chat step progress |
+
+### Forms System (`@/components/forms/`)
+
+MetadataForm, FormFieldRenderer, FormDesigner, FormStateViewer, RulesEngine,
+RuleBuilder, ExpressionBuilder, DataFetcher, DataSourceBuilder
+
+All imported from `@/components/forms/<component-name>`.
+
+---
+
+## Page Templates
+
+Full-page layouts. Apply a theme and render children inside.
+
+### MaestroTemplate
+
+Dashboard layout with global header, collapsible left/right panels, and responsive grid.
+
+```tsx
+import { MaestroTemplate, Canvas, Grid, GridItem } from '@/templates/Maestro/template-maestro';
+import { Panel } from '@/components/custom/panel-maestro';
+
+<MaestroTemplate
+  theme="dark"
+  title="Dashboard"
+  leftPanelContent={<div>Left panel</div>}
+  rightPanelContent={<div>Right panel</div>}
+>
+  <Canvas>
+    <Grid>
+      <GridItem colSpan={2}>
+        <Card className="bg-card"><CardContent className="pt-6">
+          <span className="text-2xl font-bold text-foreground">$1.2M</span>
+          <p className="text-sm text-muted-foreground">Revenue</p>
+        </CardContent></Card>
+      </GridItem>
+      <GridItem>
+        <Card className="bg-card"><CardContent className="pt-6">
+          <span className="text-2xl font-bold text-foreground">8,421</span>
+          <p className="text-sm text-muted-foreground">Users</p>
+        </CardContent></Card>
+      </GridItem>
+    </Grid>
+  </Canvas>
+</MaestroTemplate>
+```
+
+**Props:** `theme`, `title`, `tenantName`, `defaultLeftPanelCollapsed`, `leftPanelContent` (ReactNode), `defaultRightPanelCollapsed`, `rightPanelContent` (ReactNode), `children` (main canvas).
+
+**Sub-components:** `Canvas` (scrollable main area), `Grid` + `GridItem` (responsive grid — `colSpan`, `rowSpan`), `Panel` (collapsible side panel).
+
+### AdminTemplate
+
+Admin layout with global header, optional sidebar, and main content area.
+
+```tsx
+import {
+  AdminTemplate, AdminSidebar, AdminSidebarHeader, AdminSidebarNav,
+  AdminPageHeader, AdminToolbar
+} from '@/templates/Admin/template-admin';
+
+<AdminTemplate
+  theme="dark"
+  title="Administration"
+  sidebar={
+    <AdminSidebar width={260}>
+      <AdminSidebarHeader title="Settings" icon={<Settings className="h-4 w-4" />} />
+      <AdminSidebarNav
+        items={[
+          { id: 'users', label: 'Users', icon: <Users className="h-4 w-4" /> },
+          { id: 'roles', label: 'Roles', icon: <Shield className="h-4 w-4" /> },
+        ]}
+        selectedId="users"
+        onSelect={(id) => console.log(id)}
+      />
+    </AdminSidebar>
+  }
+>
+  <AdminPageHeader
+    title="User Management"
+    breadcrumb={['Settings', 'Users']}
+    actions={<Button size="sm">Add User</Button>}
+  />
+  <AdminToolbar actions={<Button variant="outline" size="sm">Export</Button>}>
+    <Input placeholder="Search users..." className="w-64" />
+  </AdminToolbar>
+  <div className="flex-1 p-6">
+    {/* Table or content */}
+  </div>
+</AdminTemplate>
+```
+
+**Props:** `theme`, `title`, `menuContent` (ReactNode for header drawer), `sidebar` (ReactNode), `children` (main area).
+
+**Sub-components:**
+- `AdminSidebar` — props: `width` (default 260), `children`
+- `AdminSidebarHeader` — props: `title`, `icon`, `actions`
+- `AdminSidebarNav` — props: `items` (`{id, label, icon?, badge?}[]`), `selectedId`, `onSelect`
+- `AdminPageHeader` — props: `title`, `breadcrumb` (string[]), `actions`, `tabs` (`{value, label}[]`), `activeTab`, `onTabChange`
+- `AdminToolbar` — props: `children` (left side filters), `actions` (right side)
+
+### FlowTemplate
+
+Flow/workflow editor with left chat panel, canvas, properties bar, and toolbars.
+
+```tsx
+import { FlowTemplate } from '@/templates/Flow/template-flow';
+
+<FlowTemplate theme="dark" defaultPanelOpen={true} flowName="My Workflow">
+  {/* Canvas content */}
+</FlowTemplate>
+```
+
+**Props:** `theme`, `defaultPanelOpen` (boolean), `flowName`, `flowType`, `children` (canvas content).
+
+### DelegateTemplate
+
+Agent layout with collapsible navigation panel and canvas.
+
+```tsx
+import { DelegateTemplate } from '@/templates/Delegate/template-delegate';
+
+<DelegateTemplate theme="dark" defaultPanelOpen={true}>
+  {/* Canvas content */}
+</DelegateTemplate>
+```
+
+**Props:** `theme`, `defaultPanelOpen` (boolean), `navItems` (nav sections array), `selectedChildId`, `onChildSelect`, `children` (canvas content).
+
+---
+
+## Common Patterns
+
+### Card grid
+
+```tsx
+<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+  <Card className="bg-card">
+    <CardHeader>
+      <CardTitle className="text-foreground">Revenue</CardTitle>
+      <CardDescription className="text-muted-foreground">Monthly total</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <span className="text-2xl font-bold text-foreground">$1.2M</span>
+    </CardContent>
+  </Card>
+  {/* more cards */}
+</div>
+```
+
+### Section header with action
+
+```tsx
+<div className="flex items-center justify-between">
+  <div>
+    <h2 className="text-lg font-semibold text-foreground">Section Title</h2>
+    <p className="text-sm text-muted-foreground">Helpful description</p>
+  </div>
+  <Button>Action</Button>
+</div>
+```
+
+### Sidebar + main content
+
+```tsx
+<div className="flex h-screen">
+  <aside className="w-64 border-r border-border bg-card p-4">
+    <nav className="space-y-1">
+      <a className="block rounded-lg bg-primary/10 px-3 py-2 text-sm font-medium text-primary">Active</a>
+      <a className="block rounded-lg px-3 py-2 text-sm text-muted-foreground hover:bg-muted">Item</a>
+    </nav>
+  </aside>
+  <main className="flex-1 overflow-auto p-6">
+    {/* Content */}
+  </main>
+</div>
+```
+
+### Stats row
+
+```tsx
+<div className="grid grid-cols-4 gap-4">
+  <Card className="bg-card">
+    <CardContent className="pt-6">
+      <p className="text-sm text-muted-foreground">Total Users</p>
+      <span className="text-2xl font-bold text-foreground">8,421</span>
+      <p className="text-xs text-primary">+12% from last month</p>
+    </CardContent>
+  </Card>
+  {/* more stat cards */}
+</div>
+```
+
+---
+
+## Rules
 
 ### DO
-- Use `future-*` token classes for all colors (`bg-future-surface`, `text-future-foreground`, etc.)
+- Use semantic token classes for all colors (`future-*` or bridge tokens)
 - Import components from `@/components/ui/` and `@/components/custom/`
 - Import icons from `lucide-react`
 - Use `cn()` from `@/lib` to merge classes conditionally
 - Use Tailwind utility classes for layout (`flex`, `grid`, `gap-*`, `p-*`, etc.)
-- Use the `fontFamily.base` font stack from `@/foundation/Future/typography`
-- Use shadcn `Button` variants (`default`, `outline`, `ghost`, `secondary`)
-- Apply theme class to root element (`future-dark`, `future-light`)
+- Use shadcn components (Card, Table, Button, Badge, etc.) instead of raw HTML
+- Apply theme class to root element (`future-dark`, `future-light`, etc.)
 
 ### DO NOT
-- Do NOT use raw hex colors or Tailwind color palette (e.g. `bg-zinc-900`)
+- Do NOT use raw hex colors or Tailwind palette (`bg-zinc-900`, `text-gray-400`)
+- Do NOT use `bg-black`, `bg-white` — always use semantic tokens
 - Do NOT use Material UI, Emotion, or styled-components
-- Do NOT install additional UI libraries (use what's available above)
-- Do NOT use `bg-black`, `bg-white`, `text-gray-*` — always use semantic tokens
+- Do NOT install additional UI libraries
 - Do NOT hardcode light/dark values — the theme system handles this automatically
 
+---
+
 ## File Structure
 
 ```
 packages/apollo-wind/src/
 ├── components/
 │   ├── ui/           # shadcn components (Button, Input, Select, etc.)
-│   └── custom/       # Apollo-specific components (MaestroHeader, FlowPanel, etc.)
+│   ├── custom/       # Apollo-specific components (MaestroHeader, FlowPanel, etc.)
+│   └── forms/        # Dynamic form system
 ├── foundation/
 │   └── Future/
 │       ├── colors.ts           # Color token definitions
-│       ├── typography.ts       # Typography token definitions
+│       ├── typography.ts       # Font stacks
 │       ├── future-theme.css    # Future theme CSS variables
 │       └── legacy-theme.css    # Legacy theme CSS variables
 ├── templates/
-│   ├── Maestro/      # Maestro template (Landing, Dashboard)
-│   ├── Delegate/     # Delegate template (Home, Settings)
-│   ├── Admin/        # Admin template (Landing, Data Management)
-│   └── Flow/         # Flow editor template (Properties, Properties Simple)
+│   ├── Admin/        # AdminTemplate + sub-components
+│   ├── Delegate/     # DelegateTemplate
+│   ├── Flow/         # FlowTemplate
+│   └── Maestro/      # MaestroTemplate + Canvas, Grid, GridItem
 ├── lib/
-│   └── index.ts      # cn() utility
+│   └── index.ts      # cn(), get(), deepEqual()
 └── styles/
     └── tailwind.css   # Main CSS entry (imports theme files)
 ```
-
-## Example: Creating a Simple Card Component
-
-```tsx
-import { cn } from '@/lib';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import { ArrowRight } from 'lucide-react';
-
-function FeatureCard({ title, description, tag }: {
-  title: string;
-  description: string;
-  tag: string;
-}) {
-  return (
-    <div className="rounded-2xl border border-future-border-subtle bg-future-surface-raised p-6">
-      <Badge className="mb-3 bg-future-accent-subtle text-future-accent-foreground">
-        {tag}
-      </Badge>
-      <h3 className="mb-2 text-lg font-semibold text-future-foreground">{title}</h3>
-      <p className="mb-4 text-sm text-future-foreground-muted">{description}</p>
-      <Button variant="ghost" className="text-future-foreground-muted">
-        Learn more <ArrowRight className="ml-1 h-4 w-4" />
-      </Button>
-    </div>
-  );
-}
-```
diff --git a/packages/apollo-wind/package.json b/packages/apollo-wind/package.json
index 6eac56e1e..9c671b9f6 100644
--- a/packages/apollo-wind/package.json
+++ b/packages/apollo-wind/package.json
@@ -47,6 +47,10 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
@@ -83,13 +87,15 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
+    "framer-motion": "^11.15.0",
     "jsep": "^1.4.0",
     "lucide-react": "^0.555.0",
     "next-themes": "^0.4.6",
     "react-day-picker": "^9.13.0",
     "react-hook-form": "^7.66.1",
-    "recharts": "^2.15.4",
+    "react-live": "^4.1.8",
     "react-resizable-panels": "^3.0.6",
+    "recharts": "^2.15.4",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.17",
diff --git a/packages/apollo-wind/src/components/custom/chat-steps-view.tsx b/packages/apollo-wind/src/components/custom/chat-steps-view.tsx
index d2b6f3ea2..df280444e 100644
--- a/packages/apollo-wind/src/components/custom/chat-steps-view.tsx
+++ b/packages/apollo-wind/src/components/custom/chat-steps-view.tsx
@@ -61,7 +61,7 @@ function HeaderDivider() {
 function StatusBadge({ label }: { label: string }) {
   return (
     <div className="flex h-10 items-center rounded-xl bg-future-accent-subtle px-4 py-2">
-      <span className="text-sm font-bold leading-5 text-future-accent-foreground-muted">
+      <span className="text-sm font-bold leading-5 text-future-foreground-accent-muted">
         {label}
       </span>
     </div>
diff --git a/packages/apollo-wind/src/components/custom/flow-properties-bar.stories.tsx b/packages/apollo-wind/src/components/custom/flow-properties-bar.stories.tsx
deleted file mode 100644
index c4a227284..000000000
--- a/packages/apollo-wind/src/components/custom/flow-properties-bar.stories.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { PropertiesBar } from './flow-properties-bar';
-
-const meta = {
-  title: 'Components/UiPath/Properties Bar',
-  component: PropertiesBar,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} satisfies Meta<typeof PropertiesBar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <div className="future-dark bg-future-surface p-4">
-      <PropertiesBar flowName="Invoice processing" flowType="Workflow" />
-    </div>
-  ),
-};
diff --git a/packages/apollo-wind/src/components/custom/flow-properties-bar.tsx b/packages/apollo-wind/src/components/custom/flow-properties-bar.tsx
index bbc123a2a..102e3b0da 100644
--- a/packages/apollo-wind/src/components/custom/flow-properties-bar.tsx
+++ b/packages/apollo-wind/src/components/custom/flow-properties-bar.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Workflow, TableProperties, Variable } from 'lucide-react';
 import { cn } from '@/lib';
 
@@ -42,7 +41,7 @@ export function PropertiesBar({
   return (
     <div
       className={cn(
-        'flex h-16 items-center justify-between rounded-2xl bg-future-surface-overlay px-4',
+        'flex h-16 items-center justify-between rounded-2xl bg-future-surface-raised px-4',
         className
       )}
     >
@@ -62,7 +61,7 @@ export function PropertiesBar({
       </div>
 
       {/* Right: Properties / Variables tabs */}
-      <div className="flex h-10 items-center rounded-xl bg-future-surface-raised border border-future-border-deep p-1">
+      <div className="flex h-10 items-center rounded-xl bg-future-surface-overlay border border-future-border-deep p-1">
         <button
           className={cn(
             'flex h-8 items-center gap-2 rounded-[10px] px-4 py-2 text-sm font-medium leading-5 text-future-foreground-subtle transition-colors hover:text-future-foreground-hover',
diff --git a/packages/apollo-wind/src/components/custom/flow-properties-expanded.stories.tsx b/packages/apollo-wind/src/components/custom/flow-properties-expanded.stories.tsx
deleted file mode 100644
index 1768df697..000000000
--- a/packages/apollo-wind/src/components/custom/flow-properties-expanded.stories.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { PropertiesExpanded } from './flow-properties-expanded';
-
-const meta = {
-  title: 'Components/UiPath/Properties Expanded',
-  component: PropertiesExpanded,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} satisfies Meta<typeof PropertiesExpanded>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <div className="future-dark flex h-[700px] bg-future-surface p-4">
-      <div className="flex flex-1 items-center justify-center text-sm text-future-foreground-muted">
-        Canvas area
-      </div>
-      <PropertiesExpanded
-        nodeName="AI Agent"
-        nodeType="AI Agent"
-        activeTab="properties"
-      />
-    </div>
-  ),
-};
diff --git a/packages/apollo-wind/src/components/custom/flow-properties-expanded.tsx b/packages/apollo-wind/src/components/custom/flow-properties-expanded.tsx
index 40add4009..6ec384f48 100644
--- a/packages/apollo-wind/src/components/custom/flow-properties-expanded.tsx
+++ b/packages/apollo-wind/src/components/custom/flow-properties-expanded.tsx
@@ -9,9 +9,9 @@ import {
   Variable,
   X,
 } from 'lucide-react';
-import * as React from 'react';
 import { fontFamily } from '@/foundation/Future/typography';
 import { cn } from '@/lib';
+import { Button } from '@/components/ui/button';
 
 // ============================================================================
 // Types
@@ -193,13 +193,15 @@ export function PropertiesExpanded({
               <span>Variables</span>
             </button>
           </div>
-          <button
-            className="flex h-10 w-10 items-center justify-center rounded-xl bg-future-surface-overlay text-future-foreground-muted transition-colors hover:text-future-foreground"
+          <Button
+            size="icon"
+            variant="ghost"
+            className="bg-future-surface-overlay text-future-foreground-muted hover:bg-future-surface-overlay hover:text-future-foreground [&_svg]:size-5"
             onClick={onClose}
             aria-label="Close properties"
           >
-            <X className="h-5 w-5" />
-          </button>
+            <X />
+          </Button>
         </div>
       </div>
 
@@ -207,13 +209,14 @@ export function PropertiesExpanded({
       <div className="flex items-center justify-between border-b border-future-border px-4 py-2">
         <div className="flex items-center gap-2">
           {/* Dock button */}
-          <button
-            type="button"
-            className="flex h-10 w-10 items-center justify-center rounded-xl bg-future-surface-overlay text-future-foreground-muted hover:text-future-foreground"
+          <Button
+            size="icon"
+            variant="ghost"
+            className="bg-future-surface-overlay text-future-foreground-muted hover:bg-future-surface-overlay hover:text-future-foreground [&_svg]:size-5"
             aria-label="Toggle panel dock"
           >
-            <PanelRightOpen className="h-5 w-5" />
-          </button>
+            <PanelRightOpen />
+          </Button>
           {/* Layout toggle: columns / rows */}
           <div
             className="flex h-10 items-center rounded-xl border border-future-border-deep bg-future-surface-overlay p-1"
@@ -237,13 +240,10 @@ export function PropertiesExpanded({
           </div>
         </div>
         {/* Run node button */}
-        <button
-          type="button"
-          className="flex h-10 items-center gap-2 rounded-xl bg-future-accent px-4 py-2 text-sm font-semibold leading-5 text-future-foreground-inverse"
-        >
+        <Button className="bg-future-accent text-future-foreground-on-accent hover:bg-future-accent/90 font-semibold">
           <Play className="h-4 w-4" />
-          <span>Run node</span>
-        </button>
+          Run node
+        </Button>
       </div>
 
       {/* ── Code section ──────────────────────────────────────── */}
diff --git a/packages/apollo-wind/src/components/custom/flow-properties.stories.tsx b/packages/apollo-wind/src/components/custom/flow-properties.stories.tsx
new file mode 100644
index 000000000..7d3e500b3
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/flow-properties.stories.tsx
@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { FlowProperties } from './flow-properties';
+
+const meta = {
+  title: 'Components/UiPath/Flow Properties',
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Interactive: click Properties on the bar to expand, close button to collapse. */
+export const Default: Story = {
+  render: function DefaultStory() {
+    const [expanded, setExpanded] = useState(false);
+    return (
+      <div className="future-dark flex h-[700px] bg-future-surface p-4">
+        <div className="relative flex flex-1 flex-col">
+          {/* Collapsed bar: top-right when not expanded */}
+          {!expanded && (
+            <div className="absolute right-0 top-0 z-10 w-[680px] max-w-full">
+              <FlowProperties
+                expanded={false}
+                flowName="Invoice processing"
+                flowType="Workflow"
+                onExpand={() => setExpanded(true)}
+              />
+            </div>
+          )}
+          <div className="flex flex-1 items-center justify-center text-sm text-future-foreground-muted">
+            Canvas area
+          </div>
+        </div>
+        {expanded && (
+          <div className="shrink-0 p-4 pl-0">
+            <FlowProperties
+              className="h-full"
+              expanded
+              nodeName="Validate invoice"
+              nodeType="AI Agent"
+              onClose={() => setExpanded(false)}
+            />
+          </div>
+        )}
+      </div>
+    );
+  },
+};
+
+/** Collapsed state only — bar on the canvas (no expand handler). */
+export const Collapsed: Story = {
+  render: () => (
+    <div className="future-dark bg-future-surface p-4">
+      <FlowProperties
+        expanded={false}
+        flowName="Invoice processing"
+        flowType="Workflow"
+      />
+    </div>
+  ),
+};
+
+/** Expanded state only — full panel (no close handler). */
+export const Expanded: Story = {
+  render: () => (
+    <div className="future-dark flex h-[700px] bg-future-surface p-4">
+      <div className="flex flex-1 items-center justify-center text-sm text-future-foreground-muted">
+        Canvas area
+      </div>
+      <FlowProperties
+        expanded
+        nodeName="AI Agent"
+        nodeType="AI Agent"
+        activeTab="properties"
+      />
+    </div>
+  ),
+};
diff --git a/packages/apollo-wind/src/components/custom/flow-properties.tsx b/packages/apollo-wind/src/components/custom/flow-properties.tsx
new file mode 100644
index 000000000..12fabef5c
--- /dev/null
+++ b/packages/apollo-wind/src/components/custom/flow-properties.tsx
@@ -0,0 +1,75 @@
+import { PropertiesBar } from './flow-properties-bar';
+import { PropertiesExpanded } from './flow-properties-expanded';
+import { cn } from '@/lib';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface FlowPropertiesProps {
+  className?: string;
+  /** When false, renders the collapsed bar; when true, renders the expanded panel */
+  expanded?: boolean;
+  /** Flow name (collapsed bar) */
+  flowName?: string;
+  /** Flow type label, e.g. "Workflow" (collapsed bar) */
+  flowType?: string;
+  /** Node name (expanded panel header) */
+  nodeName?: string;
+  /** Node type label, e.g. "AI Agent" (expanded panel header) */
+  nodeType?: string;
+  /** Active tab: 'properties' | 'variables' */
+  activeTab?: 'properties' | 'variables';
+  /** Callback when tab changes */
+  onTabChange?: (tab: 'properties' | 'variables') => void;
+  /** Callback when user expands (e.g. clicks Properties in the bar) */
+  onExpand?: () => void;
+  /** Callback when user closes the expanded panel */
+  onClose?: () => void;
+}
+
+// ============================================================================
+// FlowProperties
+// ============================================================================
+
+/**
+ * Flow properties UI in one of two states: collapsed (bar on canvas) or expanded (full panel).
+ *
+ * Use `expanded` to switch. Collapsed shows flow name/type and Properties/Variables tabs;
+ * expanded shows the full node properties panel with header, toolbar, code, and input/output.
+ */
+export function FlowProperties({
+  className,
+  expanded = false,
+  flowName = 'Invoice processing',
+  flowType = 'Workflow',
+  nodeName = 'Validate invoice',
+  nodeType = 'AI Agent',
+  activeTab = 'properties',
+  onTabChange,
+  onExpand,
+  onClose,
+}: FlowPropertiesProps) {
+  if (expanded) {
+    return (
+      <PropertiesExpanded
+        className={cn(className)}
+        nodeName={nodeName}
+        nodeType={nodeType}
+        activeTab={activeTab}
+        onClose={onClose}
+      />
+    );
+  }
+
+  return (
+    <PropertiesBar
+      className={className}
+      flowName={flowName}
+      flowType={flowType}
+      activeTab={activeTab}
+      onTabChange={onTabChange}
+      onExpand={onExpand}
+    />
+  );
+}
diff --git a/packages/apollo-wind/src/components/custom/global-header.tsx b/packages/apollo-wind/src/components/custom/global-header.tsx
index f149e0436..2c4559088 100644
--- a/packages/apollo-wind/src/components/custom/global-header.tsx
+++ b/packages/apollo-wind/src/components/custom/global-header.tsx
@@ -43,10 +43,12 @@ import { cn } from '@/lib';
 // Types
 // ============================================================================
 
+import type { FutureTheme } from '@/foundation/Future/types';
+
 export interface MaestroHeaderProps {
   className?: string;
   /** Color theme — needed so portal-rendered dropdowns inherit the correct CSS variables */
-  theme?: 'dark' | 'light';
+  theme?: FutureTheme;
   /** Application title shown next to the logo */
   title?: string;
   /** Current tenant name */
@@ -302,9 +304,15 @@ export function MaestroHeader({
       ? 'legacy-dark'
       : theme === 'legacy-light'
         ? 'legacy-light'
-        : theme === 'light'
-          ? 'future-light'
-          : 'future-dark';
+        : theme === 'wireframe'
+          ? 'future-wireframe'
+          : theme === 'vertex'
+            ? 'future-vertex'
+            : theme === 'canvas'
+              ? 'future-canvas'
+              : theme === 'light'
+                ? 'future-light'
+                : 'future-dark';
 
   // Internal drawer state — only relevant when menuContent is provided
   const [menuOpen, setMenuOpen] = React.useState(false);
diff --git a/packages/apollo-wind/src/components/ui/viewport-guard.tsx b/packages/apollo-wind/src/components/custom/viewport-guard.tsx
similarity index 100%
rename from packages/apollo-wind/src/components/ui/viewport-guard.tsx
rename to packages/apollo-wind/src/components/custom/viewport-guard.tsx
diff --git a/packages/apollo-wind/src/components/ui/button.tsx b/packages/apollo-wind/src/components/ui/button.tsx
index 1f3d0f62b..ab6f2cc5b 100644
--- a/packages/apollo-wind/src/components/ui/button.tsx
+++ b/packages/apollo-wind/src/components/ui/button.tsx
@@ -5,7 +5,7 @@ import * as React from 'react';
 import { cn } from '@/lib/index';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer',
   {
     variants: {
       variant: {
@@ -18,8 +18,8 @@ const buttonVariants = cva(
       },
       size: {
         default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8',
+        sm: 'h-9 px-3',
+        lg: 'h-11 px-8',
         icon: 'h-10 w-10',
       },
     },
diff --git a/packages/apollo-wind/src/components/ui/calendar.stories.tsx b/packages/apollo-wind/src/components/ui/calendar.stories.tsx
index 1e29747db..934fae6b7 100644
--- a/packages/apollo-wind/src/components/ui/calendar.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/calendar.stories.tsx
@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { Calendar } from './calendar';
 
 const meta: Meta<typeof Calendar> = {
-  title: 'Components/UiPath-review/Calendar',
+  title: 'Components/Data Display/Calendar',
   component: Calendar,
   tags: ['autodocs'],
 };
diff --git a/packages/apollo-wind/src/components/ui/collapsible.stories.tsx b/packages/apollo-wind/src/components/ui/collapsible.stories.tsx
deleted file mode 100644
index 94a194cab..000000000
--- a/packages/apollo-wind/src/components/ui/collapsible.stories.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { Meta } from '@storybook/react-vite';
-import { useState } from 'react';
-import { Button } from './button';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './collapsible';
-import { Row } from './layout';
-
-const meta: Meta<typeof Collapsible> = {
-  title: 'Components/UiPath-review/Collapsible',
-  component: Collapsible,
-  tags: ['autodocs'],
-};
-
-export default meta;
-
-export const Default = {
-  args: {},
-  render: () => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    return (
-      <Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-[350px] space-y-2">
-        <Row justify="between" gap={4} align="center" className="px-4">
-          <h4 className="text-sm font-semibold">@peduarte starred 3 repositories</h4>
-          <CollapsibleTrigger asChild>
-            <Button variant="ghost" size="sm">
-              {isOpen ? 'Hide' : 'Show'}
-            </Button>
-          </CollapsibleTrigger>
-        </Row>
-        <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
-          @radix-ui/primitives
-        </div>
-        <CollapsibleContent className="space-y-2">
-          <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
-            @radix-ui/colors
-          </div>
-          <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
-            @stitches/react
-          </div>
-        </CollapsibleContent>
-      </Collapsible>
-    );
-  },
-};
diff --git a/packages/apollo-wind/src/components/ui/component-gallery.stories.tsx b/packages/apollo-wind/src/components/ui/component-gallery.stories.tsx
index e4a68fb13..3c9399c31 100644
--- a/packages/apollo-wind/src/components/ui/component-gallery.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/component-gallery.stories.tsx
@@ -57,7 +57,7 @@ const components: ComponentInfo[] = [
   {
     name: 'Accordion',
     description: 'Interactive expandable sections',
-    storyPath: 'design-system-data-display-accordion--docs',
+    storyPath: 'components-data-display-accordion--docs',
     category: Category.DataDisplay,
     preview: (
       <Accordion type="single" collapsible className="w-full">
@@ -71,7 +71,7 @@ const components: ComponentInfo[] = [
   {
     name: 'Alert',
     description: 'Displays a callout message',
-    storyPath: 'design-system-feedback-alert--docs',
+    storyPath: 'components-feedback-alert--docs',
     category: Category.Feedback,
     preview: (
       <Alert>
@@ -83,14 +83,14 @@ const components: ComponentInfo[] = [
   {
     name: 'Alert Dialog',
     description: 'Modal dialog for important actions',
-    storyPath: 'design-system-overlays-alert-dialog--docs',
+    storyPath: 'components-overlays-alert-dialog--docs',
     category: Category.Overlays,
     preview: <Button variant="outline">Show Dialog</Button>,
   },
   {
     name: 'Aspect Ratio',
     description: 'Content with desired ratio',
-    storyPath: 'design-system-layout-aspect-ratio--docs',
+    storyPath: 'components-layout-aspect-ratio--docs',
     category: Category.Layout,
     preview: (
       <div className="w-full aspect-video bg-muted rounded flex items-center justify-center text-xs">
@@ -101,7 +101,7 @@ const components: ComponentInfo[] = [
   {
     name: 'Badge',
     description: 'Small status indicators',
-    storyPath: 'design-system-data-display-badge--docs',
+    storyPath: 'components-data-display-badge--docs',
     category: Category.DataDisplay,
     preview: (
       <div className="flex gap-2 flex-wrap">
@@ -113,7 +113,7 @@ const components: ComponentInfo[] = [
   {
     name: 'Breadcrumb',
     description: 'Navigation hierarchy path',
-    storyPath: 'design-system-navigation-breadcrumb--docs',
+    storyPath: 'components-navigation-breadcrumb--docs',
     category: Category.Navigation,
     preview: (
       <div className="flex items-center gap-2 text-xs text-muted-foreground">
@@ -128,7 +128,7 @@ const components: ComponentInfo[] = [
   {
     name: 'Button',
     description: 'Clickable button element',
-    storyPath: 'design-system-core-button--docs',
+    storyPath: 'components-core-button--docs',
     category: Category.Core,
     preview: (
       <div className="flex gap-2">
@@ -142,14 +142,14 @@ const components: ComponentInfo[] = [
   {
     name: 'Calendar',
     description: 'Date selection calendar',
-    storyPath: 'design-system-data-display-calendar--docs',
+    storyPath: 'components-data-display-calendar--docs',
     category: Category.DataDisplay,
     preview: <Calendar mode="single" className="scale-75 origin-top-left" />,
   },
   {
     name: 'Card',
     description: 'Container with content sections',
-    storyPath: 'design-system-data-display-card--docs',
+    storyPath: 'components-data-display-card--docs',
     category: Category.DataDisplay,
     preview: (
       <Card className="w-full">
@@ -163,7 +163,7 @@ const components: ComponentInfo[] = [
   {
     name: 'Checkbox',
     description: 'Toggle checkbox input',
-    storyPath: 'design-system-core-checkbox--docs',
+    storyPath: 'components-core-checkbox--docs',
     category: Category.Core,
     preview: (
       <div className="flex items-center gap-2">
@@ -174,21 +174,10 @@ const components: ComponentInfo[] = [
       </div>
     ),
   },
-  {
-    name: 'Collapsible',
-    description: 'Expandable content panel',
-    storyPath: 'design-system-data-display-collapsible--docs',
-    category: Category.DataDisplay,
-    preview: (
-      <Button variant="outline" size="sm">
-        Toggle
-      </Button>
-    ),
-  },
   {
     name: 'Combobox',
     description: 'Searchable select input',
-    storyPath: 'design-system-core-combobox--docs',
+    storyPath: 'components-core-combobox--docs',
     category: Category.Core,
     preview: (
       <Button variant="outline" size="sm">
@@ -199,7 +188,7 @@ const components: ComponentInfo[] = [
   {
     name: 'Command',
     description: 'Command palette menu',
-    storyPath: 'design-system-navigation-command--docs',
+    storyPath: 'components-navigation-command--docs',
     category: Category.Navigation,
     preview: (
       <Button variant="outline" size="sm">
@@ -210,14 +199,14 @@ const components: ComponentInfo[] = [
   {
     name: 'Context Menu',
     description: 'Right-click menu',
-    storyPath: 'design-system-overlays-context-menu--docs',
+    storyPath: 'components-navigation-context-menu--docs',
     category: Category.Overlays,
     preview: <div className="border rounded p-2 text-xs text-center">Right click me</div>,
   },
   {
     name: 'Data Table',
     description: 'Powerful data table',
-    storyPath: 'design-system-data-display-data-table--docs',
+    storyPath: 'components-data-display-data-table--docs',
     category: Category.DataDisplay,
     preview: (
       <Table>
@@ -239,7 +228,7 @@ const components: ComponentInfo[] = [
   {
     name: 'Date Picker',
     description: 'Date selection input',
-    storyPath: 'design-system-core-date-picker--docs',
+    storyPath: 'components-core-date-picker--docs',
     category: Category.Core,
     preview: (
       <Button variant="outline" size="sm">
@@ -250,7 +239,7 @@ const components: ComponentInfo[] = [
   {
     name: 'DateTime Picker',
     description: 'Date and time input',
-    storyPath: 'design-system-core-datetime-picker--docs',
+    storyPath: 'components-core-datetime-picker--docs',
     category: Category.Core,
     preview: (
       <Button variant="outline" size="sm">
@@ -261,7 +250,7 @@ const components: ComponentInfo[] = [
   {
     name: 'Dialog',
     description: 'Modal dialog window',
-    storyPath: 'design-system-overlays-dialog--docs',
+    storyPath: 'components-overlays-dialog--docs',
     category: Category.Overlays,
     preview: (
       <Button variant="outline" size="sm">
@@ -272,7 +261,7 @@ const components: ComponentInfo[] = [
   {
     name: 'Drawer',
     description: 'Sliding side panel',
-    storyPath: 'design-system-overlays-drawer--docs',
+    storyPath: 'components-overlays-drawer-sheet--docs',
     category: Category.Overlays,
     preview: (
       <Button variant="outline" size="sm">
@@ -283,7 +272,7 @@ const components: ComponentInfo[] = [
   {
     name: 'Dropdown Menu',
     description: 'Dropdown menu list',
-    storyPath: 'design-system-overlays-dropdown-menu--docs',
+    storyPath: 'components-overlays-dropdown--docs',
     category: Category.Overlays,
     preview: (
       <Button variant="outline" size="sm">
@@ -294,14 +283,14 @@ const components: ComponentInfo[] = [
   {
     name: 'Empty State',
     description: 'No content placeholder',
-    storyPath: 'design-system-feedback-empty-state--docs',
+    storyPath: 'components-feedback-empty-state--docs',
     category: Category.Feedback,
     preview: <div className="text-center p-4 text-muted-foreground text-xs">No items found</div>,
   },
   {
     name: 'File Upload',
     description: 'File upload with drag & drop',
-    storyPath: 'design-system-core-file-upload--docs',
+    storyPath: 'components-core-file-upload--docs',
     category: Category.Core,
     preview: (
       <div className="border-2 border-dashed rounded p-4 text-xs text-center">Drop files here</div>
@@ -310,7 +299,7 @@ const components: ComponentInfo[] = [
   {
     name: 'Grid',
     description: 'Responsive grid layout',
-    storyPath: 'design-system-layout-grid--docs',
+    storyPath: 'components-layout-grid--docs',
     category: Category.Layout,
     preview: (
       <div className="grid grid-cols-2 gap-2">
@@ -324,7 +313,7 @@ const components: ComponentInfo[] = [
   {
     name: 'Row',
     description: 'Horizontal flex layout',
-    storyPath: 'design-system-layout-row--docs',
+    storyPath: 'components-layout-row--docs',
     category: Category.Layout,
     preview: (
       <div className="flex gap-2">
@@ -336,7 +325,7 @@ const components: ComponentInfo[] = [
   {
     name: 'Column',
     description: 'Vertical flex layout',
-    storyPath: 'design-system-layout-column--docs',
+    storyPath: 'components-layout-column--docs',
     category: Category.Layout,
     preview: (
       <div className="flex flex-col gap-2">
@@ -348,28 +337,28 @@ const components: ComponentInfo[] = [
   {
     name: 'Hover Card',
     description: 'Hover preview card',
-    storyPath: 'design-system-overlays-hover-card--docs',
+    storyPath: 'components-overlays-hover-card--docs',
     category: Category.Overlays,
     preview: <span className="underline text-xs">Hover me</span>,
   },
   {
     name: 'Input',
     description: 'Text input field',
-    storyPath: 'design-system-core-input--docs',
+    storyPath: 'components-core-input--docs',
     category: Category.Core,
     preview: <Input placeholder="Type here..." className="h-8 text-xs" />,
   },
   {
     name: 'Label',
     description: 'Form field label',
-    storyPath: 'design-system-core-label--docs',
+    storyPath: 'components-core-label--docs',
     category: Category.Core,
     preview: <label className="text-xs font-medium">Label</label>,
   },
   {
     name: 'Multi Select',
     description: 'Multiple selection input',
-    storyPath: 'design-system-core-multi-select--docs',
+    storyPath: 'components-core-multi-select--docs',
     category: Category.Core,
     preview: (
       <Button variant="outline" size="sm">
@@ -380,7 +369,7 @@ const components: ComponentInfo[] = [
   {
     name: 'Pagination',
     description: 'Page navigation',
-    storyPath: 'design-system-navigation-pagination--docs',
+    storyPath: 'components-navigation-pagination--docs',
     category: Category.Navigation,
     preview: (
       <div className="flex gap-1">
@@ -399,7 +388,7 @@ const components: ComponentInfo[] = [
   {
     name: 'Popover',
     description: 'Floating content panel',
-    storyPath: 'design-system-overlays-popover--docs',
+    storyPath: 'components-overlays-popover--docs',
     category: Category.Overlays,
     preview: (
       <Button variant="outline" size="sm">
@@ -410,14 +399,14 @@ const components: ComponentInfo[] = [
   {
     name: 'Progress',
     description: 'Progress indicator',
-    storyPath: 'design-system-feedback-progress--docs',
+    storyPath: 'components-feedback-progress--docs',
     category: Category.Feedback,
     preview: <Progress value={60} className="w-20" />,
   },
   {
     name: 'Radio Group',
     description: 'Single selection group',
-    storyPath: 'design-system-core-radio-group--docs',
+    storyPath: 'components-core-radio-group--docs',
     category: Category.Core,
     preview: (
       <div className="flex gap-2 text-xs">
@@ -431,7 +420,7 @@ const components: ComponentInfo[] = [
   {
     name: 'Resizable',
     description: 'Resizable panel groups',
-    storyPath: 'design-system-layout-resizable--docs',
+    storyPath: 'components-layout-resizable--docs',
     category: Category.Layout,
     preview: (
       <div className="flex gap-1 h-12">
@@ -444,7 +433,7 @@ const components: ComponentInfo[] = [
   {
     name: 'Scroll Area',
     description: 'Custom scrollable area',
-    storyPath: 'design-system-layout-scroll-area--docs',
+    storyPath: 'components-layout-scroll-area--docs',
     category: Category.Layout,
     preview: (
       <div className="h-16 border rounded p-2 overflow-hidden text-xs">Scrollable content area</div>
@@ -453,14 +442,14 @@ const components: ComponentInfo[] = [
   {
     name: 'Search',
     description: 'Search input field',
-    storyPath: 'design-system-core-search--docs',
+    storyPath: 'components-navigation-search--docs',
     category: Category.Core,
     preview: <Input placeholder="Search..." className="h-8 text-xs" />,
   },
   {
     name: 'Select',
     description: 'Dropdown selection',
-    storyPath: 'design-system-core-select--docs',
+    storyPath: 'components-core-select--docs',
     category: Category.Core,
     preview: (
       <Button variant="outline" size="sm">
@@ -471,14 +460,14 @@ const components: ComponentInfo[] = [
   {
     name: 'Separator',
     description: 'Content divider',
-    storyPath: 'design-system-layout-separator--docs',
+    storyPath: 'components-layout-separator--docs',
     category: Category.Layout,
     preview: <Separator className="w-12" />,
   },
   {
     name: 'Sheet',
     description: 'Side panel overlay',
-    storyPath: 'design-system-overlays-sheet--docs',
+    storyPath: 'components-overlays-drawer-sheet--docs',
     category: Category.Overlays,
     preview: (
       <Button variant="outline" size="sm">
@@ -489,7 +478,7 @@ const components: ComponentInfo[] = [
   {
     name: 'Skeleton',
     description: 'Loading placeholder',
-    storyPath: 'design-system-feedback-skeleton--docs',
+    storyPath: 'components-feedback-skeleton--docs',
     category: Category.Feedback,
     preview: (
       <div className="space-y-2">
@@ -501,28 +490,28 @@ const components: ComponentInfo[] = [
   {
     name: 'Slider',
     description: 'Range slider input',
-    storyPath: 'design-system-core-slider--docs',
+    storyPath: 'components-core-slider--docs',
     category: Category.Core,
     preview: <Slider defaultValue={[50]} max={100} step={1} className="w-full" />,
   },
   {
     name: 'Sonner',
     description: 'Toast notifications',
-    storyPath: 'design-system-feedback-sonner--docs',
+    storyPath: 'components-feedback-toast-sonner--docs',
     category: Category.Feedback,
     preview: <div className="border rounded p-2 text-xs">Toast notification</div>,
   },
   {
     name: 'Spinner',
     description: 'Loading spinner',
-    storyPath: 'design-system-feedback-spinner--docs',
+    storyPath: 'components-feedback-spinner--docs',
     category: Category.Feedback,
     preview: <Spinner className="w-6 h-6" />,
   },
   {
     name: 'Stats Card',
     description: 'Statistics display card',
-    storyPath: 'design-system-data-display-stats-card--docs',
+    storyPath: 'components-data-display-stats-card--docs',
     category: Category.DataDisplay,
     preview: (
       <Card className="w-full">
@@ -536,7 +525,7 @@ const components: ComponentInfo[] = [
   {
     name: 'Stepper',
     description: 'Step progress indicator',
-    storyPath: 'design-system-navigation-stepper--docs',
+    storyPath: 'components-navigation-stepper--docs',
     category: Category.Navigation,
     preview: (
       <div className="flex gap-1">
@@ -552,7 +541,7 @@ const components: ComponentInfo[] = [
   {
     name: 'Switch',
     description: 'Toggle switch',
-    storyPath: 'design-system-core-switch--docs',
+    storyPath: 'components-core-switch--docs',
     category: Category.Core,
     preview: (
       <div className="flex items-center gap-2">
@@ -564,7 +553,7 @@ const components: ComponentInfo[] = [
   {
     name: 'Table',
     description: 'Data table',
-    storyPath: 'design-system-data-display-table--docs',
+    storyPath: 'components-data-display-table--docs',
     category: Category.DataDisplay,
     preview: (
       <Table>
@@ -581,10 +570,29 @@ const components: ComponentInfo[] = [
       </Table>
     ),
   },
+  {
+    name: 'Tree View',
+    description: 'Hierarchical tree with expand, search, selection',
+    storyPath: 'components-data-display-tree-view--docs',
+    category: Category.DataDisplay,
+    preview: (
+      <div className="w-full space-y-1 text-xs">
+        <div className="flex items-center gap-1 pl-0">
+          <span className="text-muted-foreground">▸</span>
+          <span>Folder</span>
+        </div>
+        <div className="flex items-center gap-1 pl-4">
+          <span className="text-muted-foreground">▸</span>
+          <span>Subfolder</span>
+        </div>
+        <div className="flex items-center gap-1 pl-8 text-muted-foreground">File</div>
+      </div>
+    ),
+  },
   {
     name: 'Tabs',
     description: 'Tabbed content panels',
-    storyPath: 'design-system-navigation-tabs--docs',
+    storyPath: 'components-navigation-tabs--docs',
     category: Category.Navigation,
     preview: (
       <Tabs defaultValue="tab1" className="w-full">
@@ -602,7 +610,7 @@ const components: ComponentInfo[] = [
   {
     name: 'Textarea',
     description: 'Multi-line text input',
-    storyPath: 'design-system-core-textarea--docs',
+    storyPath: 'components-core-textarea--docs',
     category: Category.Core,
     preview: (
       <textarea
@@ -614,7 +622,7 @@ const components: ComponentInfo[] = [
   {
     name: 'Toggle',
     description: 'Toggle button',
-    storyPath: 'design-system-core-toggle--docs',
+    storyPath: 'components-core-toggle--docs',
     category: Category.Core,
     preview: (
       <Button variant="outline" size="sm">
@@ -625,7 +633,7 @@ const components: ComponentInfo[] = [
   {
     name: 'Toggle Group',
     description: 'Toggle button group',
-    storyPath: 'design-system-core-toggle-group--docs',
+    storyPath: 'components-core-toggle-group--docs',
     category: Category.Core,
     preview: (
       <div className="flex gap-1">
@@ -641,7 +649,7 @@ const components: ComponentInfo[] = [
   {
     name: 'Tooltip',
     description: 'Hover tooltip',
-    storyPath: 'design-system-overlays-tooltip--docs',
+    storyPath: 'components-overlays-tooltip--docs',
     category: Category.Overlays,
     preview: (
       <Button variant="outline" size="sm">
@@ -762,13 +770,13 @@ function ComponentGallery() {
                     <h2 className="text-2xl font-semibold tracking-tight">{category}</h2>
                   </div>
 
-                  <div className="flex flex-wrap gap-4">
+                  <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
                     {categoryComponents.map((component) => (
                       <a
                         key={component.name}
                         href={`/?path=/story/${component.storyPath}`}
                         target="_top"
-                        className="block group focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 rounded-lg w-[200px]"
+                        className="block group focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 rounded-lg min-w-0"
                       >
                         <div className="h-full rounded-lg border border-border/50 bg-card overflow-hidden transition-all duration-200 hover:border-border hover:shadow-md">
                           {/* Preview Area - fixed height */}
diff --git a/packages/apollo-wind/src/components/ui/data-table.stories.tsx b/packages/apollo-wind/src/components/ui/data-table.stories.tsx
index dba41d273..476985997 100644
--- a/packages/apollo-wind/src/components/ui/data-table.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/data-table.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
 import { ColumnDef } from '@tanstack/react-table';
 import {
+  Archive,
   ChevronDown,
   ChevronRight,
   Download,
@@ -8,6 +9,7 @@ import {
   MoreHorizontal,
   Pencil,
   Trash2,
+  X,
 } from 'lucide-react';
 import * as React from 'react';
 import {
@@ -132,47 +134,112 @@ export const Basic = {
 // Drag and Drop
 // ============================================================================
 
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import { CSS } from '@dnd-kit/utilities';
+
+function DraggableRow({ user, children }: { user: User; children: React.ReactNode }) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: user.id });
+
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <TableRow ref={setNodeRef} style={style}>
+      <TableCell className="w-[40px]">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-6 w-6 cursor-grab active:cursor-grabbing"
+          {...attributes}
+          {...listeners}
+        >
+          <GripVertical className="h-4 w-4 text-muted-foreground" />
+        </Button>
+      </TableCell>
+      {children}
+    </TableRow>
+  );
+}
+
 function DragAndDropExample() {
   const [data, setData] = React.useState(sampleUsers.slice(0, 6));
 
-  const moveRow = (fromIndex: number, toIndex: number) => {
-    setData((prev) => {
-      const updated = [...prev];
-      const [removed] = updated.splice(fromIndex, 1);
-      updated.splice(toIndex, 0, removed);
-      return updated;
-    });
-  };
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor),
+  );
 
-  const columns: ColumnDef<User>[] = [
-    {
-      id: 'drag',
-      header: '',
-      size: 40,
-      cell: ({ row }) => (
-        <div className="flex items-center gap-1">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-6 w-6 cursor-grab"
-            disabled={row.index === 0}
-            onClick={() => moveRow(row.index, row.index - 1)}
-          >
-            <GripVertical className="h-4 w-4 text-muted-foreground" />
-          </Button>
-        </div>
-      ),
-    },
-    { accessorKey: 'name', header: 'Name' },
-    { accessorKey: 'email', header: 'Email' },
-    { accessorKey: 'role', header: 'Role' },
-    { accessorKey: 'status', header: 'Status', cell: ({ row }) => statusBadge(row.getValue('status')) },
-  ];
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      setData((prev) => {
+        const oldIndex = prev.findIndex((u) => u.id === active.id);
+        const newIndex = prev.findIndex((u) => u.id === over.id);
+        return arrayMove(prev, oldIndex, newIndex);
+      });
+    }
+  };
 
   return (
     <div className="space-y-2">
-      <p className="text-sm text-muted-foreground">Click the grip handle to reorder rows.</p>
-      <DataTable columns={columns} data={data} showPagination={false} showColumnToggle={false} />
+      <p className="text-sm text-muted-foreground">Drag the grip handle to reorder rows.</p>
+      <div className="rounded-md border">
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          modifiers={[restrictToVerticalAxis]}
+          onDragEnd={handleDragEnd}
+        >
+          <SortableContext items={data.map((u) => u.id)} strategy={verticalListSortingStrategy}>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-[40px]" />
+                  <TableHead>Name</TableHead>
+                  <TableHead>Email</TableHead>
+                  <TableHead>Role</TableHead>
+                  <TableHead>Status</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {data.map((user) => (
+                  <DraggableRow key={user.id} user={user}>
+                    <TableCell className="font-medium">{user.name}</TableCell>
+                    <TableCell>{user.email}</TableCell>
+                    <TableCell>{user.role}</TableCell>
+                    <TableCell>{statusBadge(user.status)}</TableCell>
+                  </DraggableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </SortableContext>
+        </DndContext>
+      </div>
     </div>
   );
 }
@@ -266,16 +333,40 @@ export const ExpandableRows = {
 
 function BulkActionsExample() {
   const [data, setData] = React.useState(sampleUsers);
-  const [selected, setSelected] = React.useState<Record<string, boolean>>({});
+  const [rowSelection, setRowSelection] = React.useState<Record<string, boolean>>({});
+
+  const selectedCount = Object.values(rowSelection).filter(Boolean).length;
+  const selectedIndices = Object.entries(rowSelection)
+    .filter(([, v]) => v)
+    .map(([k]) => Number(k));
+
+  const handleClear = () => setRowSelection({});
+
+  const handleExport = () => {
+    const rows = selectedIndices.map((i) => data[i]).filter(Boolean);
+    const header = ['Name', 'Email', 'Role', 'Department', 'Status'].join(',');
+    const csv = [header, ...rows.map((u) => [u.name, u.email, u.role, u.department, u.status].join(','))].join('\n');
+    const blob = new Blob([csv], { type: 'text/csv' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'users-export.csv';
+    a.click();
+    URL.revokeObjectURL(url);
+  };
 
-  const selectedCount = Object.values(selected).filter(Boolean).length;
+  const handleArchive = () => {
+    setData((prev) =>
+      prev.map((user, i) =>
+        selectedIndices.includes(i) ? { ...user, status: 'inactive' as const } : user,
+      ),
+    );
+    setRowSelection({});
+  };
 
   const handleDelete = () => {
-    const ids = Object.entries(selected)
-      .filter(([, v]) => v)
-      .map(([k]) => k);
-    setData((prev) => prev.filter((_, i) => !ids.includes(String(i))));
-    setSelected({});
+    setData((prev) => prev.filter((_, i) => !selectedIndices.includes(i)));
+    setRowSelection({});
   };
 
   const columns: ColumnDef<User>[] = [
@@ -286,22 +377,39 @@ function BulkActionsExample() {
     { accessorKey: 'status', header: 'Status', cell: ({ row }) => statusBadge(row.getValue('status')) },
   ];
 
+  const bulkActions = selectedCount > 0 ? (
+    <>
+      <Separator orientation="vertical" className="h-4" />
+      <span className="text-sm font-medium whitespace-nowrap">{selectedCount} selected</span>
+      <Button variant="ghost" size="sm" onClick={handleClear}>
+        <X className="mr-1 h-3.5 w-3.5" />
+        Clear
+      </Button>
+      <Button variant="outline" size="sm" onClick={handleExport}>
+        <Download className="mr-1 h-3.5 w-3.5" />
+        Export
+      </Button>
+      <Button variant="outline" size="sm" onClick={handleArchive}>
+        <Archive className="mr-1 h-3.5 w-3.5" />
+        Archive
+      </Button>
+      <Button variant="destructive" size="sm" onClick={handleDelete}>
+        <Trash2 className="mr-1 h-3.5 w-3.5" />
+        Delete
+      </Button>
+    </>
+  ) : null;
+
   return (
-    <div className="space-y-2">
-      {selectedCount > 0 && (
-        <div className="flex items-center gap-2 rounded-lg border bg-muted/50 px-4 py-2">
-          <span className="text-sm font-medium">{selectedCount} selected</span>
-          <Separator orientation="vertical" className="h-4" />
-          <Button variant="outline" size="sm">Export</Button>
-          <Button variant="outline" size="sm">Change Status</Button>
-          <Button variant="destructive" size="sm" onClick={handleDelete}>
-            <Trash2 className="mr-1 h-3.5 w-3.5" />
-            Delete
-          </Button>
-        </div>
-      )}
-      <DataTable columns={columns} data={data} searchKey="name" searchPlaceholder="Search users..." />
-    </div>
+    <DataTable
+      columns={columns}
+      data={data}
+      searchKey="name"
+      searchPlaceholder="Search users..."
+      rowSelection={rowSelection}
+      onRowSelectionChange={setRowSelection}
+      toolbarContent={bulkActions}
+    />
   );
 }
 
@@ -399,16 +507,104 @@ export const InlineEditing = {
 // Filtering & Search
 // ============================================================================
 
+function FilteringAndSearchExample() {
+  const [statusFilter, setStatusFilter] = React.useState('all');
+  const [roleFilter, setRoleFilter] = React.useState('all');
+  const [departmentFilter, setDepartmentFilter] = React.useState('all');
+
+  const activeFilters: { label: string; value: string; clear: () => void }[] = [];
+  if (statusFilter !== 'all') activeFilters.push({ label: `Status: ${statusFilter}`, value: statusFilter, clear: () => setStatusFilter('all') });
+  if (roleFilter !== 'all') activeFilters.push({ label: `Role: ${roleFilter}`, value: roleFilter, clear: () => setRoleFilter('all') });
+  if (departmentFilter !== 'all') activeFilters.push({ label: `Dept: ${departmentFilter}`, value: departmentFilter, clear: () => setDepartmentFilter('all') });
+
+  const clearAll = () => { setStatusFilter('all'); setRoleFilter('all'); setDepartmentFilter('all'); };
+
+  const filtered = sampleUsers.filter((u) => {
+    if (statusFilter !== 'all' && u.status !== statusFilter) return false;
+    if (roleFilter !== 'all' && u.role !== roleFilter) return false;
+    if (departmentFilter !== 'all' && u.department !== departmentFilter) return false;
+    return true;
+  });
+
+  const filterDropdowns = (
+    <>
+      <Select value={statusFilter} onValueChange={setStatusFilter}>
+        <SelectTrigger className="h-8 w-[140px]">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">All Status</SelectItem>
+          <SelectItem value="active">Active</SelectItem>
+          <SelectItem value="inactive">Inactive</SelectItem>
+          <SelectItem value="pending">Pending</SelectItem>
+        </SelectContent>
+      </Select>
+      <Select value={roleFilter} onValueChange={setRoleFilter}>
+        <SelectTrigger className="h-8 w-[140px]">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">All Roles</SelectItem>
+          <SelectItem value="Admin">Admin</SelectItem>
+          <SelectItem value="Manager">Manager</SelectItem>
+          <SelectItem value="User">User</SelectItem>
+        </SelectContent>
+      </Select>
+      <Select value={departmentFilter} onValueChange={setDepartmentFilter}>
+        <SelectTrigger className="h-8 w-[160px]">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">All Departments</SelectItem>
+          <SelectItem value="Engineering">Engineering</SelectItem>
+          <SelectItem value="Design">Design</SelectItem>
+          <SelectItem value="Marketing">Marketing</SelectItem>
+          <SelectItem value="Sales">Sales</SelectItem>
+          <SelectItem value="Product">Product</SelectItem>
+        </SelectContent>
+      </Select>
+    </>
+  );
+
+  return (
+    <div className="space-y-3">
+      <p className="text-sm text-muted-foreground">
+        Combine search with dropdown filters for precise results. Active filters appear as chips below.
+      </p>
+      {activeFilters.length > 0 && (
+        <div className="flex flex-wrap items-center gap-2">
+          {activeFilters.map((f) => (
+            <Badge key={f.label} variant="secondary" className="gap-1 pr-1">
+              {f.label}
+              <button
+                type="button"
+                onClick={f.clear}
+                className="ml-0.5 rounded-sm hover:bg-muted-foreground/20"
+              >
+                <X className="h-3 w-3" />
+              </button>
+            </Badge>
+          ))}
+          <Button variant="ghost" size="sm" className="h-6 text-xs" onClick={clearAll}>
+            Clear all
+          </Button>
+        </div>
+      )}
+      <DataTable
+        columns={sortableColumns}
+        data={filtered}
+        searchKey="name"
+        searchPlaceholder="Search by name..."
+        showColumnToggle={false}
+        toolbarContent={filterDropdowns}
+      />
+    </div>
+  );
+}
+
 export const FilteringAndSearch = {
   name: 'Filtering & Search',
-  render: () => (
-    <DataTable
-      columns={sortableColumns}
-      data={sampleUsers}
-      searchKey="name"
-      searchPlaceholder="Search by name..."
-    />
-  ),
+  render: () => <FilteringAndSearchExample />,
 };
 
 // ============================================================================
@@ -453,67 +649,6 @@ export const AdvancedSorting = {
   },
 };
 
-// ============================================================================
-// Column Filters
-// ============================================================================
-
-function ColumnFiltersExample() {
-  const [roleFilter, setRoleFilter] = React.useState('all');
-  const [statusFilter, setStatusFilter] = React.useState('all');
-
-  const filtered = sampleUsers.filter((u) => {
-    if (roleFilter !== 'all' && u.role !== roleFilter) return false;
-    if (statusFilter !== 'all' && u.status !== statusFilter) return false;
-    return true;
-  });
-
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center gap-4">
-        <div className="flex items-center gap-2">
-          <Label className="text-sm">Role</Label>
-          <Select value={roleFilter} onValueChange={setRoleFilter}>
-            <SelectTrigger className="h-8 w-[130px]">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">All Roles</SelectItem>
-              <SelectItem value="Admin">Admin</SelectItem>
-              <SelectItem value="Manager">Manager</SelectItem>
-              <SelectItem value="User">User</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="flex items-center gap-2">
-          <Label className="text-sm">Status</Label>
-          <Select value={statusFilter} onValueChange={setStatusFilter}>
-            <SelectTrigger className="h-8 w-[130px]">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">All Status</SelectItem>
-              <SelectItem value="active">Active</SelectItem>
-              <SelectItem value="inactive">Inactive</SelectItem>
-              <SelectItem value="pending">Pending</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-        {(roleFilter !== 'all' || statusFilter !== 'all') && (
-          <Button variant="ghost" size="sm" onClick={() => { setRoleFilter('all'); setStatusFilter('all'); }}>
-            Clear filters
-          </Button>
-        )}
-      </div>
-      <DataTable columns={sortableColumns} data={filtered} showColumnToggle={false} />
-    </div>
-  );
-}
-
-export const ColumnFilters = {
-  name: 'Column Filters',
-  render: () => <ColumnFiltersExample />,
-};
-
 // ============================================================================
 // Export Functionality
 // ============================================================================
@@ -537,27 +672,30 @@ function ExportExample() {
     ...sortableColumns,
   ];
 
+  const exportButton = (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="sm">
+          <Download className="mr-2 h-4 w-4" />
+          Export
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuLabel>Export As</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={() => handleExport('csv')}>CSV</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => handleExport('tsv')}>TSV</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+
   return (
-    <div className="space-y-2">
-      <div className="flex items-center justify-between">
-        <p className="text-sm text-muted-foreground">Select rows and export, or export all data.</p>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="outline" size="sm">
-              <Download className="mr-2 h-4 w-4" />
-              Export
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            <DropdownMenuLabel>Export As</DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem onClick={() => handleExport('csv')}>CSV</DropdownMenuItem>
-            <DropdownMenuItem onClick={() => handleExport('tsv')}>TSV</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      <DataTable columns={columns} data={sampleUsers} searchKey="name" />
-    </div>
+    <DataTable
+      columns={columns}
+      data={sampleUsers}
+      searchKey="name"
+      toolbarContent={exportButton}
+    />
   );
 }
 
diff --git a/packages/apollo-wind/src/components/ui/data-table.tsx b/packages/apollo-wind/src/components/ui/data-table.tsx
index 5102be074..7e70ca5f2 100644
--- a/packages/apollo-wind/src/components/ui/data-table.tsx
+++ b/packages/apollo-wind/src/components/ui/data-table.tsx
@@ -49,6 +49,9 @@ export interface DataTableProps<TData, TValue> {
   resizable?: boolean;
   compact?: boolean;
   columnToggleText?: string;
+  rowSelection?: Record<string, boolean>;
+  onRowSelectionChange?: (selection: Record<string, boolean>) => void;
+  toolbarContent?: React.ReactNode;
 }
 
 export function DataTable<TData, TValue>({
@@ -64,11 +67,25 @@ export function DataTable<TData, TValue>({
   resizable = false,
   compact = false,
   columnToggleText = 'Columns',
+  rowSelection: controlledRowSelection,
+  onRowSelectionChange: controlledOnRowSelectionChange,
+  toolbarContent,
 }: DataTableProps<TData, TValue>) {
   const [sorting, setSorting] = React.useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
   const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
-  const [rowSelection, setRowSelection] = React.useState({});
+  const [internalRowSelection, setInternalRowSelection] = React.useState({});
+
+  const isControlled = controlledRowSelection !== undefined;
+  const rowSelection = isControlled ? controlledRowSelection : internalRowSelection;
+  const setRowSelection = React.useCallback(
+    (updater: React.SetStateAction<Record<string, boolean>>) => {
+      const next = typeof updater === 'function' ? updater(rowSelection) : updater;
+      if (!isControlled) setInternalRowSelection(next);
+      controlledOnRowSelectionChange?.(next);
+    },
+    [isControlled, rowSelection, controlledOnRowSelectionChange],
+  );
 
   // Wrap columns with editable cell renderer if editable mode is enabled
   const processedColumns = React.useMemo(() => {
@@ -130,6 +147,7 @@ export function DataTable<TData, TValue>({
             className="max-w-sm"
           />
         )}
+        {toolbarContent}
         {showColumnToggle && (
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
diff --git a/packages/apollo-wind/src/components/ui/index.ts b/packages/apollo-wind/src/components/ui/index.ts
index 399a8b9d8..9acdf48b1 100644
--- a/packages/apollo-wind/src/components/ui/index.ts
+++ b/packages/apollo-wind/src/components/ui/index.ts
@@ -47,7 +47,15 @@ export * from './switch';
 export * from './table';
 export * from './tabs';
 export * from './textarea';
+export { default as TreeView } from './tree-view';
+export type {
+  TreeViewItem,
+  TreeViewItemAction,
+  TreeViewIconMap,
+  TreeViewMenuItem,
+  TreeViewProps,
+  TreeViewSelectionMode,
+} from './tree-view';
 export * from './toggle-group';
 export * from './toggle';
 export * from './tooltip';
-export * from './viewport-guard';
diff --git a/packages/apollo-wind/src/components/ui/search.stories.tsx b/packages/apollo-wind/src/components/ui/search.stories.tsx
index 4a0e18b0b..7ebde3f9c 100644
--- a/packages/apollo-wind/src/components/ui/search.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/search.stories.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Search, SearchWithSuggestions } from './search';
 
 const meta = {
-  title: 'Components/UiPath-review/Search',
+  title: 'Components/Navigation/Search',
   component: Search,
   parameters: {
     layout: 'centered',
diff --git a/packages/apollo-wind/src/components/ui/slider.stories.tsx b/packages/apollo-wind/src/components/ui/slider.stories.tsx
index 06de0ae55..85f77d291 100644
--- a/packages/apollo-wind/src/components/ui/slider.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/slider.stories.tsx
@@ -1,28 +1,108 @@
 import type { Meta } from '@storybook/react-vite';
+import { useState } from 'react';
 import { Slider } from './slider';
+import { Label } from './label';
 
 const meta: Meta<typeof Slider> = {
   title: 'Components/Core/Slider',
   component: Slider,
   tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
 };
 
 export default meta;
 
-export const Default = {
-  args: {},
+// ============================================================================
+// Basic
+// ============================================================================
+
+export const Basic = {
+  name: 'Basic',
   render: () => (
-    <div className="w-[300px]">
-      <Slider defaultValue={[33]} max={100} step={1} />
+    <div className="w-[300px] space-y-4">
+      <div className="space-y-2">
+        <Label>Volume</Label>
+        <Slider defaultValue={[50]} max={100} step={1} />
+      </div>
     </div>
   ),
 };
 
-export const WithRange = {
-  args: {},
+// ============================================================================
+// Range Slider
+// ============================================================================
+
+export const RangeSlider = {
+  name: 'Range Slider',
   render: () => (
-    <div className="w-[300px]">
-      <Slider defaultValue={[25, 75]} max={100} step={1} />
+    <div className="w-[300px] space-y-4">
+      <div className="space-y-2">
+        <Label>Select a range</Label>
+        <Slider defaultValue={[25, 75]} max={100} step={1} />
+      </div>
     </div>
   ),
 };
+
+// ============================================================================
+// Slider with Steps
+// ============================================================================
+
+export const SliderWithSteps = {
+  name: 'Slider with Steps',
+  render: () => (
+    <div className="w-[300px] space-y-4">
+      <div className="space-y-2">
+        <Label>Steps of 10</Label>
+        <Slider defaultValue={[30]} max={100} step={10} />
+      </div>
+      <div className="space-y-2">
+        <Label>Steps of 25</Label>
+        <Slider defaultValue={[50]} max={100} step={25} />
+      </div>
+    </div>
+  ),
+};
+
+// ============================================================================
+// Examples — Price Range Filter
+// ============================================================================
+
+export const PriceRangeFilter = {
+  name: 'Price Range Filter',
+  render: () => {
+    const [value, setValue] = useState([100, 400]);
+    const min = 0;
+    const max = 500;
+
+    const formatPrice = (val: number) =>
+      new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0,
+      }).format(val);
+
+    return (
+      <div className="w-[300px] space-y-4">
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <Label>Price range</Label>
+            <span className="text-sm tabular-nums text-muted-foreground">
+              {formatPrice(value[0])} – {formatPrice(value[1])}
+            </span>
+          </div>
+          <Slider
+            value={value}
+            min={min}
+            max={max}
+            step={25}
+            onValueChange={setValue}
+          />
+        </div>
+      </div>
+    );
+  },
+};
diff --git a/packages/apollo-wind/src/components/ui/tree-view.stories.tsx b/packages/apollo-wind/src/components/ui/tree-view.stories.tsx
new file mode 100644
index 000000000..708e4dc28
--- /dev/null
+++ b/packages/apollo-wind/src/components/ui/tree-view.stories.tsx
@@ -0,0 +1,271 @@
+import type { Meta } from '@storybook/react-vite';
+import { Folder, File, Globe, Pencil } from 'lucide-react';
+import TreeView, {
+  type TreeViewItem,
+  type TreeViewIconMap,
+  type TreeViewMenuItem,
+} from './tree-view';
+
+const meta: Meta<typeof TreeView> = {
+  title: 'Components/Data Display/Tree View',
+  component: TreeView,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+A hierarchical tree component for displaying and selecting items like file explorers, navigation, or admin sidebars.
+
+## Features
+
+- **Search** – Filters by name and auto-expands matching branches
+- **Selection modes** – \`multiple\` (default), \`single\`, or \`none\`
+- **Selection checkboxes** – Shown only on leaf items (folders do not get checkboxes)
+- **Disabled items** – Set \`disabled: true\` on items to grey them out and prevent selection
+- **Badges & metadata** – Add \`badge\` and \`meta\` to items for status, version, or counts
+- **Item actions** – Add \`actions\` for Edit/Delete; rendered in a compact dropdown (single "more" icon) to prevent horizontal scroll
+- **Context menu** – Right-click with \`menuItems\` for custom actions
+- **Access checkboxes** – \`showCheckboxes\` for check/uncheck with \`onCheckChange\`
+
+## Layout
+
+The tree uses a fixed vertical layout: **Title** → **Search bar** (full width) → **Expand / Collapse / Selected count / Clear** → **Tree content**. Overflow is handled so the tree never scrolls horizontally.
+        `,
+      },
+    },
+  },
+  argTypes: {
+    selectionMode: {
+      control: 'select',
+      options: ['single', 'multiple', 'none'],
+      description: 'Controls selection behavior. "multiple" allows shift/ctrl-click and drag-select.',
+    },
+    showSelectionCheckboxes: {
+      description: 'Shows checkboxes on leaf items only. Folders do not get checkboxes.',
+    },
+    showCheckboxes: {
+      description: 'Shows access-rights checkboxes with Check/Uncheck actions in the toolbar.',
+    },
+  },
+};
+
+export default meta;
+
+const sampleData: TreeViewItem[] = [
+  {
+    id: '1',
+    name: 'Root',
+    type: 'region',
+    children: [
+      {
+        id: '1.1',
+        name: 'Folder 1',
+        type: 'store',
+        children: [
+          {
+            id: '1.1.1',
+            name: 'Subfolder',
+            type: 'department',
+            children: [
+              { id: '1.1.1.1', name: 'File 1', type: 'item' },
+              { id: '1.1.1.2', name: 'File 2', type: 'item' },
+            ],
+          },
+        ],
+      },
+      {
+        id: '1.2',
+        name: 'Folder 2',
+        type: 'store',
+        children: [
+          { id: '1.2.1', name: 'Document.pdf', type: 'item' },
+          { id: '1.2.2', name: 'Spreadsheet.xlsx', type: 'item' },
+        ],
+      },
+    ],
+  },
+];
+
+const iconMap: TreeViewIconMap = {
+  region: <Globe className="h-4 w-4 text-muted-foreground" />,
+  store: <Folder className="h-4 w-4 text-primary/80" />,
+  department: <Folder className="h-4 w-4 text-primary/60" />,
+  item: <File className="h-4 w-4 text-muted-foreground" />,
+};
+
+// ============================================================================
+// Basic
+// ============================================================================
+
+export const Basic = {
+  name: 'Basic',
+  parameters: {
+    docs: { description: { story: 'Default tree with expand/collapse and search.' } },
+  },
+  render: () => (
+    <TreeView
+      data={sampleData}
+      title="File Explorer"
+      iconMap={iconMap}
+    />
+  ),
+};
+
+// ============================================================================
+// With Checkboxes
+// ============================================================================
+
+export const WithCheckboxes = {
+  name: 'With Checkboxes',
+  parameters: {
+    docs: { description: { story: 'Access-rights checkboxes with Check/Uncheck toolbar actions.' } },
+  },
+  render: () => (
+    <TreeView
+      data={sampleData}
+      title="Select Items"
+      showCheckboxes
+      iconMap={iconMap}
+      onCheckChange={(item, checked) => {
+        console.log(`${item.name} ${checked ? 'checked' : 'unchecked'}`);
+      }}
+    />
+  ),
+};
+
+// ============================================================================
+// With Disabled Items, Badges, Meta, and Actions
+// ============================================================================
+
+const sampleDataWithFeatures: TreeViewItem[] = [
+  {
+    id: '1',
+    name: 'Root',
+    type: 'region',
+    children: [
+      {
+        id: '1.1',
+        name: 'Folder 1',
+        type: 'store',
+        children: [
+          {
+            id: '1.1.1',
+            name: 'Active Item',
+            type: 'item',
+            badge: <span className="text-xs px-1.5 py-0.5 rounded bg-green-100 text-green-800">Live</span>,
+            meta: '2.4.1',
+            actions: [
+              {
+                id: 'edit',
+                icon: <Pencil className="h-3.5 w-3.5" />,
+                label: 'Edit',
+                onClick: (item) => console.log('Edit', item.name),
+              },
+            ],
+          },
+          {
+            id: '1.1.2',
+            name: 'Disabled Item',
+            type: 'item',
+            disabled: true,
+            meta: 'Unavailable',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+export const WithDisabledBadgesMetaAndActions = {
+  name: 'With Disabled, Badges, Meta & Actions',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Demonstrates disabled items (greyed out), badges, meta text, and item actions in a dropdown. Actions use a single "more" icon to prevent horizontal scroll.',
+      },
+    },
+  },
+  render: () => (
+    <TreeView
+      data={sampleDataWithFeatures}
+      title="Feature showcase"
+      iconMap={iconMap}
+      showSelectionCheckboxes
+    />
+  ),
+};
+
+// ============================================================================
+// Single Selection Mode
+// ============================================================================
+
+export const SingleSelectionMode = {
+  name: 'Single Selection',
+  parameters: {
+    docs: { description: { story: 'Only one item can be selected at a time.' } },
+  },
+  render: () => (
+    <TreeView
+      data={sampleData}
+      title="Single selection only"
+      iconMap={iconMap}
+      selectionMode="single"
+      showSelectionCheckboxes
+    />
+  ),
+};
+
+// ============================================================================
+// No Selection (Expand only)
+// ============================================================================
+
+export const NoSelectionMode = {
+  name: 'No Selection',
+  parameters: {
+    docs: { description: { story: 'Expand/collapse only; no selection or selection UI.' } },
+  },
+  render: () => (
+    <TreeView
+      data={sampleData}
+      title="Expand/collapse only"
+      iconMap={iconMap}
+      selectionMode="none"
+    />
+  ),
+};
+
+// ============================================================================
+// With Context Menu
+// ============================================================================
+
+export const WithContextMenu = {
+  name: 'With Context Menu',
+  parameters: {
+    docs: { description: { story: 'Right-click for custom context menu actions.' } },
+  },
+  render: () => {
+    const menuItems: TreeViewMenuItem[] = [
+      {
+        id: 'open',
+        label: 'Open',
+        action: (items) => console.log('Open:', items.map((i) => i.name)),
+      },
+      {
+        id: 'download',
+        label: 'Download',
+        action: (items) => console.log('Download:', items.map((i) => i.name)),
+      },
+    ];
+
+    return (
+      <TreeView
+        data={sampleData}
+        title="Right-click for menu"
+        iconMap={iconMap}
+        menuItems={menuItems}
+      />
+    );
+  },
+};
diff --git a/packages/apollo-wind/src/components/ui/tree-view.tsx b/packages/apollo-wind/src/components/ui/tree-view.tsx
new file mode 100644
index 000000000..a537c551c
--- /dev/null
+++ b/packages/apollo-wind/src/components/ui/tree-view.tsx
@@ -0,0 +1,1267 @@
+"use client";
+
+import * as React from "react";
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from "@/components/ui/collapsible";
+import {
+  Folder,
+  ChevronRight,
+  Box,
+  Search,
+  MoreHorizontal,
+  Info,
+} from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import { X } from "lucide-react";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+
+/**
+ * Action shown in the item's dropdown menu (Edit, Delete, etc.).
+ * Actions appear as a single "more" icon that opens a dropdown to avoid horizontal overflow.
+ */
+export interface TreeViewItemAction {
+  /** Unique action identifier */
+  id: string;
+  /** Icon to display in the dropdown menu item */
+  icon: React.ReactNode;
+  /** Accessible label for the action */
+  label?: string;
+  /** Called when the action is clicked */
+  onClick: (item: TreeViewItem) => void;
+}
+
+/**
+ * A single item in the tree. Supports hierarchical structure, selection, and rich metadata.
+ */
+export interface TreeViewItem {
+  /** Unique identifier (must be unique across the entire tree) */
+  id: string;
+  /** Display name */
+  name: string;
+  /** Type used for icon lookup in iconMap */
+  type: string;
+  /** Child items for expandable folders */
+  children?: TreeViewItem[];
+  /** Checked state when using access-rights checkboxes (showCheckboxes) */
+  checked?: boolean;
+  /** When true, item is greyed out and cannot be selected */
+  disabled?: boolean;
+  /** Badge or tag shown after the name (e.g. status, version) */
+  badge?: React.ReactNode;
+  /** Secondary metadata shown after the badge (e.g. "Production", "2 workflows") */
+  meta?: string | React.ReactNode;
+  /** Actions shown in a dropdown menu (Edit, Delete, etc.). Uses a single "more" icon to prevent horizontal scroll. */
+  actions?: TreeViewItemAction[];
+}
+
+export interface TreeViewIconMap {
+  [key: string]: React.ReactNode | undefined;
+}
+
+export interface TreeViewMenuItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  action: (items: TreeViewItem[]) => void;
+}
+
+/**
+ * Controls how items can be selected.
+ * - `"multiple"`: Shift/ctrl-click for multi-select, drag to select range (default)
+ * - `"single"`: Only one item can be selected at a time
+ * - `"none"`: No selection; expand/collapse only
+ */
+export type TreeViewSelectionMode = "single" | "multiple" | "none";
+
+export interface TreeViewProps {
+  className?: string;
+  containerClassName?: string;
+  data: TreeViewItem[];
+  title?: string;
+  showExpandAll?: boolean;
+  showCheckboxes?: boolean;
+  /** Show selection checkboxes on leaf items only (folders do not get checkboxes) */
+  showSelectionCheckboxes?: boolean;
+  /** Selection behavior: "multiple" (default), "single", or "none" */
+  selectionMode?: TreeViewSelectionMode;
+  checkboxPosition?: "left" | "right";
+  searchPlaceholder?: string;
+  selectionText?: string;
+  checkboxLabels?: {
+    check: string;
+    uncheck: string;
+  };
+  getIcon?: (item: TreeViewItem, depth: number) => React.ReactNode;
+  onSelectionChange?: (selectedItems: TreeViewItem[]) => void;
+  onAction?: (action: string, items: TreeViewItem[]) => void;
+  onCheckChange?: (item: TreeViewItem, checked: boolean) => void;
+  iconMap?: TreeViewIconMap;
+  menuItems?: TreeViewMenuItem[];
+}
+
+interface TreeItemProps {
+  item: TreeViewItem;
+  depth?: number;
+  selectedIds: Set<string>;
+  lastSelectedId: React.MutableRefObject<string | null>;
+  onSelect: (ids: Set<string>) => void;
+  expandedIds: Set<string>;
+  onToggleExpand: (id: string, isOpen: boolean) => void;
+  selectionMode: TreeViewSelectionMode;
+  getIcon?: (item: TreeViewItem, depth: number) => React.ReactNode;
+  onAction?: (action: string, items: TreeViewItem[]) => void;
+  onAccessChange?: (item: TreeViewItem, hasAccess: boolean) => void;
+  allItems: TreeViewItem[];
+  showAccessRights?: boolean;
+  showSelectionCheckboxes?: boolean;
+  itemMap: Map<string, TreeViewItem>;
+  iconMap?: TreeViewIconMap;
+  menuItems?: TreeViewMenuItem[];
+  getSelectedItems: () => TreeViewItem[];
+}
+
+// Helper function to build a map of all items by ID
+const buildItemMap = (items: TreeViewItem[]): Map<string, TreeViewItem> => {
+  const map = new Map<string, TreeViewItem>();
+  const processItem = (item: TreeViewItem) => {
+    map.set(item.id, item);
+    item.children?.forEach(processItem);
+  };
+  items.forEach(processItem);
+  return map;
+};
+
+// Update the getCheckState function to work bottom-up
+const getCheckState = (
+  item: TreeViewItem,
+  itemMap: Map<string, TreeViewItem>
+): "checked" | "unchecked" | "indeterminate" => {
+  // Get the original item from the map
+  const originalItem = itemMap.get(item.id);
+  if (!originalItem) return "unchecked";
+
+  // If it's a leaf node (no children), return its check state
+  if (!originalItem.children || originalItem.children.length === 0) {
+    return originalItem.checked ? "checked" : "unchecked";
+  }
+
+  // Count the check states of immediate children
+  let checkedCount = 0;
+  let indeterminateCount = 0;
+
+  originalItem.children.forEach(child => {
+    const childState = getCheckState(child, itemMap);
+    if (childState === "checked") checkedCount++;
+    if (childState === "indeterminate") indeterminateCount++;
+  });
+
+  // Calculate parent state based on children states
+  const totalChildren = originalItem.children.length;
+
+  // If all children are checked
+  if (checkedCount === totalChildren) {
+    return "checked";
+  }
+  // If any child is checked or indeterminate
+  if (checkedCount > 0 || indeterminateCount > 0) {
+    return "indeterminate";
+  }
+  // If no children are checked or indeterminate
+  return "unchecked";
+};
+
+// Add this default icon map
+const defaultIconMap: TreeViewIconMap = {
+  file: <Box className="h-4 w-4 text-red-600" />,
+  folder: <Folder className="h-4 w-4 text-primary/80" />,
+};
+
+function TreeItem({
+  item,
+  depth = 0,
+  selectedIds,
+  lastSelectedId,
+  onSelect,
+  expandedIds,
+  onToggleExpand,
+  selectionMode,
+  getIcon,
+  onAction,
+  onAccessChange,
+  allItems,
+  showAccessRights,
+  showSelectionCheckboxes,
+  itemMap,
+  iconMap = defaultIconMap,
+  menuItems,
+  getSelectedItems,
+}: TreeItemProps): React.ReactElement {
+  const isOpen = expandedIds.has(item.id);
+  const isSelected = selectedIds.has(item.id);
+  const isDisabled = item.disabled === true;
+  const itemRef = useRef<HTMLDivElement>(null);
+  const [selectionStyle, setSelectionStyle] = useState("");
+
+  // Get all visible items in order
+  const getVisibleItems = useCallback(
+    (items: TreeViewItem[]): TreeViewItem[] => {
+      let visibleItems: TreeViewItem[] = [];
+
+      items.forEach((item) => {
+        visibleItems.push(item);
+        if (item.children && expandedIds.has(item.id)) {
+          visibleItems = [...visibleItems, ...getVisibleItems(item.children)];
+        }
+      });
+
+      return visibleItems;
+    },
+    [expandedIds]
+  );
+
+  useEffect(() => {
+    if (!isSelected) {
+      setSelectionStyle("");
+      return;
+    }
+
+    // Get all visible items from the entire tree
+    const visibleItems = getVisibleItems(allItems);
+    const currentIndex = visibleItems.findIndex((i) => i.id === item.id);
+
+    const prevItem = visibleItems[currentIndex - 1];
+    const nextItem = visibleItems[currentIndex + 1];
+
+    const isPrevSelected = prevItem && selectedIds.has(prevItem.id);
+    const isNextSelected = nextItem && selectedIds.has(nextItem.id);
+
+    const roundTop = !isPrevSelected;
+    const roundBottom = !isNextSelected;
+
+    setSelectionStyle(
+      `${roundTop ? "rounded-t-md" : ""} ${roundBottom ? "rounded-b-md" : ""}`
+    );
+  }, [
+    isSelected,
+    selectedIds,
+    expandedIds,
+    item.id,
+    getVisibleItems,
+    allItems,
+  ]);
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+
+    if (isDisabled || selectionMode === "none") return;
+
+    let newSelection = new Set(selectedIds);
+
+    if (!itemRef.current) return;
+
+    if (selectionMode === "single") {
+      newSelection = new Set([item.id]);
+      lastSelectedId.current = item.id;
+      onSelect(newSelection);
+      if (item.children && isSelected) {
+        onToggleExpand(item.id, !isOpen);
+      }
+      return;
+    }
+
+    if (e.shiftKey && lastSelectedId.current !== null) {
+      const items = Array.from(
+        document.querySelectorAll("[data-tree-item]")
+      ) as HTMLElement[];
+      const lastIndex = items.findIndex(
+        (el) => el.getAttribute("data-id") === lastSelectedId.current
+      );
+      const currentIndex = items.findIndex((el) => el === itemRef.current);
+      const [start, end] = [
+        Math.min(lastIndex, currentIndex),
+        Math.max(lastIndex, currentIndex),
+      ];
+
+      items.slice(start, end + 1).forEach((el) => {
+        const id = el.getAttribute("data-id");
+        const isDisabledEl = el.getAttribute("data-disabled") === "true";
+        const parentFolderClosed = el.closest('[data-folder-closed="true"]');
+        const isClosedFolder = el.getAttribute("data-folder-closed") === "true";
+
+        if (id && !isDisabledEl && (isClosedFolder || !parentFolderClosed)) {
+          newSelection.add(id);
+        }
+      });
+    } else if (e.ctrlKey || e.metaKey) {
+      if (newSelection.has(item.id)) {
+        newSelection.delete(item.id);
+      } else {
+        newSelection.add(item.id);
+      }
+    } else {
+      newSelection = new Set([item.id]);
+      // Open folder on single click if it's a folder
+      if (item.children && isSelected) {
+        onToggleExpand(item.id, !isOpen);
+      }
+    }
+
+    lastSelectedId.current = item.id;
+    onSelect(newSelection);
+  };
+
+  // Helper function to get all descendants of an item (including the item itself)
+  const getAllDescendants = (item: TreeViewItem): TreeViewItem[] => {
+    const descendants = [item];
+    if (item.children) {
+      item.children.forEach((child) => {
+        descendants.push(...getAllDescendants(child));
+      });
+    }
+    return descendants;
+  };
+
+  const handleAccessClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (onAccessChange) {
+      const currentState = getCheckState(item, itemMap);
+      // Toggle between checked and unchecked, treating indeterminate as unchecked
+      const newChecked = currentState === "checked" ? false : true;
+      onAccessChange(item, newChecked);
+    }
+  };
+
+  const renderIcon = () => {
+    if (getIcon) {
+      return getIcon(item, depth);
+    }
+
+    // Use the provided iconMap or fall back to default
+    return iconMap[item.type] || iconMap.folder || defaultIconMap.folder;
+  };
+
+  const getItemPath = (item: TreeViewItem, items: TreeViewItem[]): string => {
+    const path: string[] = [item.name];
+
+    const findParent = (
+      currentItem: TreeViewItem,
+      allItems: TreeViewItem[]
+    ) => {
+      for (const potentialParent of allItems) {
+        if (
+          potentialParent.children?.some((child) => child.id === currentItem.id)
+        ) {
+          path.unshift(potentialParent.name);
+          findParent(potentialParent, allItems);
+          break;
+        }
+        if (potentialParent.children) {
+          findParent(currentItem, potentialParent.children);
+        }
+      }
+    };
+
+    findParent(item, items);
+    return path.join(" → ");
+  };
+
+  // Add function to count selected items in a folder
+  const getSelectedChildrenCount = (item: TreeViewItem): number => {
+    let count = 0;
+
+    if (!item.children) return 0;
+
+    item.children.forEach((child) => {
+      if (selectedIds.has(child.id)) {
+        count++;
+      }
+      if (child.children) {
+        count += getSelectedChildrenCount(child);
+      }
+    });
+
+    return count;
+  };
+
+  // Get selected count only if item has children and is collapsed
+  const selectedCount =
+    (item.children && !isOpen && getSelectedChildrenCount(item)) || null;
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger>
+        <div>
+          <div
+            ref={itemRef}
+            data-tree-item
+            data-id={item.id}
+            data-depth={depth}
+            data-folder-closed={item.children && !isOpen}
+            data-disabled={isDisabled}
+            className={`select-none rounded-md px-1 ${
+              isDisabled
+                ? "cursor-not-allowed opacity-50 text-muted-foreground"
+                : `cursor-pointer ${
+                    isSelected && selectionMode !== "none"
+                      ? `bg-accent ${selectionStyle}`
+                      : "text-foreground hover:bg-muted/50"
+                  }`
+            }`}
+            style={{ paddingLeft: `${depth * 20}px` }}
+            onClick={handleClick}
+          >
+            <div className="flex items-center h-8 min-w-0">
+              {item.children ? (
+                <div className="flex items-center gap-2 flex-1 min-w-0 group">
+                  <Collapsible
+                    open={isOpen}
+                    onOpenChange={(open) => onToggleExpand(item.id, open)}
+                  >
+                    <CollapsibleTrigger
+                      asChild
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <Button variant="ghost" size="icon" className="h-6 w-6">
+                        <motion.div
+                          initial={false}
+                          animate={{ rotate: isOpen ? 90 : 0 }}
+                          transition={{ duration: 0.1 }}
+                        >
+                          <ChevronRight className="h-4 w-4" />
+                        </motion.div>
+                      </Button>
+                    </CollapsibleTrigger>
+                  </Collapsible>
+                  {showAccessRights && (
+                    <div
+                      className="relative flex items-center justify-center w-4 h-4 cursor-pointer hover:opacity-80"
+                      onClick={handleAccessClick}
+                    >
+                      {getCheckState(item, itemMap) === "checked" && (
+                        <div className="w-4 h-4 border rounded bg-primary border-primary flex items-center justify-center">
+                          <svg
+                            className="h-3 w-3 text-primary-foreground"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M5 13l4 4L19 7"
+                            />
+                          </svg>
+                        </div>
+                      )}
+                      {getCheckState(item, itemMap) === "unchecked" && (
+                        <div className="w-4 h-4 border rounded border-input" />
+                      )}
+                      {getCheckState(item, itemMap) === "indeterminate" && (
+                        <div className="w-4 h-4 border rounded bg-primary border-primary flex items-center justify-center">
+                          <div className="h-0.5 w-2 bg-primary-foreground" />
+                        </div>
+                      )}
+                    </div>
+                  )}
+                  {renderIcon()}
+                  <span className="flex-1 min-w-0 truncate">{item.name}</span>
+                  {item.badge && (
+                    <span className="shrink-0 ml-1">{item.badge}</span>
+                  )}
+                  {item.meta && (
+                    <span className="text-xs text-muted-foreground shrink-0 ml-1 truncate max-w-[6rem]">
+                      {item.meta}
+                    </span>
+                  )}
+                  {selectedCount !== null && selectedCount > 0 && (
+                    <Badge
+                      variant="secondary"
+                      className="shrink-0 mr-1 bg-blue-100 hover:bg-blue-100"
+                    >
+                      {selectedCount} selected
+                    </Badge>
+                  )}
+                  {(item.actions?.length ?? 0) > 0 ? (
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-6 w-6 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <MoreHorizontal className="h-4 w-4 text-muted-foreground" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end" className="w-48">
+                        {item.actions?.map((action) => (
+                          <DropdownMenuItem
+                            key={action.id}
+                            disabled={isDisabled}
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              action.onClick(item);
+                            }}
+                          >
+                            {action.icon}
+                            {action.label ?? action.id}
+                          </DropdownMenuItem>
+                        ))}
+                        <DropdownMenuSub>
+                          <DropdownMenuSubTrigger>View details</DropdownMenuSubTrigger>
+                          <DropdownMenuSubContent className="w-64 p-3">
+                            <div className="space-y-2 text-sm">
+                              <h4 className="font-semibold">{item.name}</h4>
+                              <div className="text-muted-foreground space-y-1">
+                                <div>
+                                  <span className="font-medium">Type:</span>{" "}
+                                  {item.type.charAt(0).toUpperCase() +
+                                    item.type.slice(1).replace("_", " ")}
+                                </div>
+                                <div>
+                                  <span className="font-medium">ID:</span> {item.id}
+                                </div>
+                                <div>
+                                  <span className="font-medium">Location:</span>{" "}
+                                  {getItemPath(item, allItems)}
+                                </div>
+                                <div>
+                                  <span className="font-medium">Items:</span>{" "}
+                                  {item.children?.length ?? 0} direct items
+                                </div>
+                              </div>
+                            </div>
+                          </DropdownMenuSubContent>
+                        </DropdownMenuSub>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  ) : (
+                    <HoverCard>
+                      <HoverCardTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-6 w-6 shrink-0 p-0 opacity-0 group-hover:opacity-100 transition-opacity"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <Info className="h-4 w-4 text-muted-foreground" />
+                        </Button>
+                      </HoverCardTrigger>
+                      <HoverCardContent className="w-80">
+                        <div className="space-y-2">
+                          <h4 className="text-sm font-semibold">{item.name}</h4>
+                          <div className="text-sm text-muted-foreground space-y-1">
+                            <div>
+                              <span className="font-medium">Type:</span>{" "}
+                              {item.type.charAt(0).toUpperCase() +
+                                item.type.slice(1).replace("_", " ")}
+                            </div>
+                            <div>
+                              <span className="font-medium">ID:</span> {item.id}
+                            </div>
+                            <div>
+                              <span className="font-medium">Location:</span>{" "}
+                              {getItemPath(item, allItems)}
+                            </div>
+                            <div>
+                              <span className="font-medium">Items:</span>{" "}
+                              {item.children?.length ?? 0} direct items
+                            </div>
+                          </div>
+                        </div>
+                      </HoverCardContent>
+                    </HoverCard>
+                  )}
+                </div>
+              ) : (
+                <div className="flex items-center gap-2 flex-1 min-w-0 pl-8 group">
+                  {showSelectionCheckboxes && !item.children && !isDisabled && (
+                    <Checkbox
+                      checked={isSelected}
+                      onCheckedChange={(checked) => {
+                        if (selectionMode === "none") return;
+                        const newSelection =
+                          selectionMode === "single"
+                            ? new Set(checked ? [item.id] : [])
+                            : new Set(selectedIds);
+                        if (selectionMode === "multiple") {
+                          if (checked) newSelection.add(item.id);
+                          else newSelection.delete(item.id);
+                        }
+                        lastSelectedId.current = item.id;
+                        onSelect(newSelection);
+                      }}
+                      onClick={(e) => e.stopPropagation()}
+                      aria-label={`Select ${item.name}`}
+                    />
+                  )}
+                  {showAccessRights && (
+                    <div
+                      className="relative flex items-center justify-center w-4 h-4 cursor-pointer hover:opacity-80"
+                      onClick={handleAccessClick}
+                    >
+                      {item.checked ? (
+                        <div className="w-4 h-4 border rounded bg-primary border-primary flex items-center justify-center">
+                          <svg
+                            className="h-3 w-3 text-primary-foreground"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M5 13l4 4L19 7"
+                            />
+                          </svg>
+                        </div>
+                      ) : (
+                        <div className="w-4 h-4 border rounded border-input" />
+                      )}
+                    </div>
+                  )}
+                  {renderIcon()}
+                  <span className="flex-1 min-w-0 truncate">{item.name}</span>
+                  {item.badge && (
+                    <span className="shrink-0 ml-1">{item.badge}</span>
+                  )}
+                  {item.meta && (
+                    <span className="text-xs text-muted-foreground shrink-0 ml-1 truncate max-w-[6rem]">
+                      {item.meta}
+                    </span>
+                  )}
+                  {(item.actions?.length ?? 0) > 0 ? (
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-6 w-6 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <MoreHorizontal className="h-4 w-4 text-muted-foreground" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end" className="w-48">
+                        {item.actions?.map((action) => (
+                          <DropdownMenuItem
+                            key={action.id}
+                            disabled={isDisabled}
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              action.onClick(item);
+                            }}
+                          >
+                            {action.icon}
+                            {action.label ?? action.id}
+                          </DropdownMenuItem>
+                        ))}
+                        <DropdownMenuSub>
+                          <DropdownMenuSubTrigger>View details</DropdownMenuSubTrigger>
+                          <DropdownMenuSubContent className="w-64 p-3">
+                            <div className="space-y-2 text-sm">
+                              <h4 className="font-semibold">{item.name}</h4>
+                              <div className="text-muted-foreground space-y-1">
+                                <div>
+                                  <span className="font-medium">Type:</span>{" "}
+                                  {item.type.charAt(0).toUpperCase() +
+                                    item.type.slice(1).replace("_", " ")}
+                                </div>
+                                <div>
+                                  <span className="font-medium">ID:</span> {item.id}
+                                </div>
+                                <div>
+                                  <span className="font-medium">Location:</span>{" "}
+                                  {getItemPath(item, allItems)}
+                                </div>
+                              </div>
+                            </div>
+                          </DropdownMenuSubContent>
+                        </DropdownMenuSub>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  ) : (
+                    <HoverCard>
+                      <HoverCardTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-6 w-6 shrink-0 p-0 opacity-0 group-hover:opacity-100 transition-opacity"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <Info className="h-4 w-4 text-muted-foreground" />
+                        </Button>
+                      </HoverCardTrigger>
+                      <HoverCardContent className="w-80">
+                        <div className="space-y-2">
+                          <h4 className="text-sm font-semibold">{item.name}</h4>
+                          <div className="text-sm text-muted-foreground space-y-1">
+                            <div>
+                              <span className="font-medium">Type:</span>{" "}
+                              {item.type.charAt(0).toUpperCase() +
+                                item.type.slice(1).replace("_", " ")}
+                            </div>
+                            <div>
+                              <span className="font-medium">ID:</span> {item.id}
+                            </div>
+                            <div>
+                              <span className="font-medium">Location:</span>{" "}
+                              {getItemPath(item, allItems)}
+                            </div>
+                          </div>
+                        </div>
+                      </HoverCardContent>
+                    </HoverCard>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {item.children && (
+            <Collapsible
+              open={isOpen}
+              onOpenChange={(open) => onToggleExpand(item.id, open)}
+            >
+              <AnimatePresence initial={false}>
+                {isOpen && (
+                  <CollapsibleContent forceMount asChild>
+                    <motion.div
+                      initial={{ height: 0, opacity: 0 }}
+                      animate={{ height: "auto", opacity: 1 }}
+                      exit={{ height: 0, opacity: 0 }}
+                      transition={{ duration: 0.05 }}
+                    >
+                      {item.children?.map((child) => (
+                        <TreeItem
+                          key={child.id}
+                          item={child}
+                          depth={depth + 1}
+                          selectedIds={selectedIds}
+                          lastSelectedId={lastSelectedId}
+                          onSelect={onSelect}
+                          expandedIds={expandedIds}
+                          onToggleExpand={onToggleExpand}
+                          selectionMode={selectionMode}
+                          getIcon={getIcon}
+                          onAction={onAction}
+                          onAccessChange={onAccessChange}
+                          allItems={allItems}
+                          showAccessRights={showAccessRights}
+                          showSelectionCheckboxes={showSelectionCheckboxes}
+                          itemMap={itemMap}
+                          iconMap={iconMap}
+                          menuItems={menuItems}
+                          getSelectedItems={getSelectedItems}
+                        />
+                      ))}
+                    </motion.div>
+                  </CollapsibleContent>
+                )}
+              </AnimatePresence>
+            </Collapsible>
+          )}
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-64">
+        {menuItems?.map((menuItem) => (
+          <ContextMenuItem
+            key={menuItem.id}
+            onClick={() => {
+              const items = selectedIds.has(item.id)
+                ? getSelectedItems()
+                : [item];
+              menuItem.action(items);
+            }}
+          >
+            {menuItem.icon && (
+              <span className="mr-2 h-4 w-4">{menuItem.icon}</span>
+            )}
+            {menuItem.label}
+          </ContextMenuItem>
+        ))}
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}
+
+/**
+ * TreeView displays hierarchical data with expand/collapse, search, selection, and optional actions.
+ *
+ * **Features:**
+ * - **Search**: Filters items by name and auto-expands matching branches
+ * - **Selection**: Single, multiple, or none via `selectionMode`
+ * - **Selection checkboxes**: Shown only on leaf items (not on folders) when `showSelectionCheckboxes` is true
+ * - **Disabled items**: Use `disabled: true` on items to grey them out and prevent selection
+ * - **Badges & metadata**: Add `badge` and `meta` to items for status, version, or counts
+ * - **Item actions**: Add `actions` for Edit/Delete; shown in a compact dropdown to prevent horizontal scroll
+ * - **Right-click context menu**: Use `menuItems` for custom context menu actions
+ * - **Access-rights checkboxes**: Use `showCheckboxes` for check/uncheck with `onCheckChange`
+ *
+ * **Layout**: Title → Search bar → Expand/Collapse + Selected count + Clear → Tree. No horizontal scroll.
+ */
+export default function TreeView({
+  className,
+  containerClassName,
+  checkboxLabels = {
+    check: "Check",
+    uncheck: "Uncheck",
+  },
+  data,
+  iconMap,
+  searchPlaceholder = "Search...",
+  selectionText = "selected",
+  showExpandAll = true,
+  showCheckboxes = false,
+  showSelectionCheckboxes = false,
+  selectionMode = "multiple",
+  title,
+  getIcon,
+  onSelectionChange,
+  onAction,
+  onCheckChange,
+  menuItems,
+}: TreeViewProps) {
+  const [currentMousePos, setCurrentMousePos] = useState<number>(0);
+  const [dragStart, setDragStart] = useState<number | null>(null);
+  const [dragStartPosition, setDragStartPosition] = useState<{
+    x: number;
+    y: number;
+  } | null>(null);
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
+  const [isDragging, setIsDragging] = useState(false);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const dragRef = useRef<HTMLDivElement>(null);
+  const lastSelectedId = useRef<string | null>(null);
+  const treeRef = useRef<HTMLDivElement>(null);
+
+  const DRAG_THRESHOLD = 10; // pixels
+
+  // Create a map of all items by ID
+  const itemMap = useMemo(() => buildItemMap(data), [data]);
+
+  // Memoize the search results and expanded IDs
+  const { filteredData, searchExpandedIds } = useMemo(() => {
+    if (!searchQuery.trim()) {
+      return { filteredData: data, searchExpandedIds: new Set<string>() };
+    }
+
+    const searchLower = searchQuery.toLowerCase();
+    const newExpandedIds = new Set<string>();
+
+    // Helper function to check if an item or its descendants match the search
+    const itemMatches = (item: TreeViewItem): boolean => {
+      const nameMatches = item.name.toLowerCase().includes(searchLower);
+      if (nameMatches) return true;
+
+      if (item.children) {
+        return item.children.some((child) => itemMatches(child));
+      }
+
+      return false;
+    };
+
+    // Helper function to filter tree while keeping parent structure
+    const filterTree = (items: TreeViewItem[]): TreeViewItem[] => {
+      return items
+        .map((item) => {
+          if (!item.children) {
+            return itemMatches(item) ? item : null;
+          }
+
+          const filteredChildren = filterTree(item.children);
+          if (filteredChildren.length > 0 || itemMatches(item)) {
+            if (item.children) {
+              newExpandedIds.add(item.id);
+            }
+            return {
+              ...item,
+              children: filteredChildren,
+            };
+          }
+          return null;
+        })
+        .filter((item): item is TreeViewItem => item !== null);
+    };
+
+    return {
+      filteredData: filterTree(data),
+      searchExpandedIds: newExpandedIds,
+    };
+  }, [data, searchQuery]);
+
+  // Update expanded IDs when search changes
+  useEffect(() => {
+    if (searchQuery.trim()) {
+      setExpandedIds(prev => new Set([...prev, ...searchExpandedIds]));
+    }
+  }, [searchExpandedIds, searchQuery]);
+
+  useEffect(() => {
+    const handleClickAway = (e: MouseEvent) => {
+      const target = e.target as Element;
+
+      const clickedInside =
+        (treeRef.current && treeRef.current.contains(target)) ||
+        (dragRef.current && dragRef.current.contains(target)) ||
+        // Ignore clicks on context menus
+        target.closest('[role="menu"]') ||
+        target.closest("[data-radix-popper-content-wrapper]");
+
+      if (!clickedInside) {
+        setSelectedIds(new Set());
+        lastSelectedId.current = null;
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickAway);
+    return () => document.removeEventListener("mousedown", handleClickAway);
+  }, []);
+
+  // Function to collect all folder IDs
+  const getAllFolderIds = (items: TreeViewItem[]): string[] => {
+    let ids: string[] = [];
+    items.forEach((item) => {
+      if (item.children) {
+        ids.push(item.id);
+        ids = [...ids, ...getAllFolderIds(item.children)];
+      }
+    });
+    return ids;
+  };
+
+  const handleExpandAll = () => {
+    setExpandedIds(new Set(getAllFolderIds(data)));
+  };
+
+  const handleCollapseAll = () => {
+    setExpandedIds(new Set());
+  };
+
+  const handleToggleExpand = (id: string, isOpen: boolean) => {
+    const newExpandedIds = new Set(expandedIds);
+    if (isOpen) {
+      newExpandedIds.add(id);
+    } else {
+      newExpandedIds.delete(id);
+    }
+    setExpandedIds(newExpandedIds);
+  };
+
+  // Get selected items
+  const getSelectedItems = useCallback((): TreeViewItem[] => {
+    const items: TreeViewItem[] = [];
+    const processItem = (item: TreeViewItem) => {
+      if (selectedIds.has(item.id)) {
+        items.push(item);
+      }
+      item.children?.forEach(processItem);
+    };
+    data.forEach(processItem);
+    return items;
+  }, [selectedIds, data]);
+
+  // Get selected items, filtering out parents if their children are selected
+  const getEffectiveSelectedItems = useCallback((): TreeViewItem[] => {
+    const selectedItems = getSelectedItems();
+
+    // Build a set of all selected IDs for quick lookup
+    const selectedIdsSet = new Set(selectedItems.map((item) => item.id));
+
+    // Filter out parents whose children are also selected
+    return selectedItems.filter((item) => {
+      // If this item has no children, always include it
+      if (!item.children) return true;
+
+      // Check if any children of this item are selected
+      const hasSelectedChildren = item.children.some((child) =>
+        selectedIdsSet.has(child.id)
+      );
+
+      // Only include this item if none of its children are selected
+      return !hasSelectedChildren;
+    });
+  }, [getSelectedItems]);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    // Only track on left click and not on buttons
+    if (e.button !== 0 || (e.target as HTMLElement).closest("button")) return;
+
+    setDragStartPosition({ x: e.clientX, y: e.clientY });
+  }, []);
+
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (selectionMode === "none") return;
+
+      // Check if primary button is still held down
+      if (!(e.buttons & 1)) {
+        setIsDragging(false);
+        setDragStart(null);
+        setDragStartPosition(null);
+        return;
+      }
+
+      // If we haven't registered a potential drag start position, ignore
+      if (!dragStartPosition) return;
+
+      // Calculate distance moved
+      const deltaX = e.clientX - dragStartPosition.x;
+      const deltaY = e.clientY - dragStartPosition.y;
+      const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+      // If we haven't started dragging yet, check if we should start
+      if (!isDragging) {
+        if (distance > DRAG_THRESHOLD) {
+          setIsDragging(true);
+          setDragStart(dragStartPosition.y);
+
+          // Clear selection if not holding shift/ctrl
+          if (!e.shiftKey && !e.ctrlKey) {
+            setSelectedIds(new Set());
+            lastSelectedId.current = null;
+          }
+        }
+        return;
+      }
+
+      // Rest of the existing drag logic
+      if (!dragRef.current) return;
+
+      const items = Array.from(
+        dragRef.current.querySelectorAll("[data-tree-item]")
+      ) as HTMLElement[];
+
+      const startY = dragStart;
+      const currentY = e.clientY;
+      const [selectionStart, selectionEnd] = [
+        Math.min(startY || 0, currentY),
+        Math.max(startY || 0, currentY),
+      ];
+
+      const newSelection = new Set(
+        e.shiftKey || e.ctrlKey ? Array.from(selectedIds) : []
+      );
+
+      items.forEach((item) => {
+        const rect = item.getBoundingClientRect();
+        const itemTop = rect.top;
+        const itemBottom = rect.top + rect.height;
+
+        if (itemBottom >= selectionStart && itemTop <= selectionEnd) {
+          const id = item.getAttribute("data-id");
+          const isDisabledEl = item.getAttribute("data-disabled") === "true";
+          const isClosedFolder =
+            item.getAttribute("data-folder-closed") === "true";
+          const parentFolderClosed = item.closest(
+            '[data-folder-closed="true"]'
+          );
+
+          if (id && !isDisabledEl && (isClosedFolder || !parentFolderClosed)) {
+            newSelection.add(id);
+          }
+        }
+      });
+
+      setSelectedIds(newSelection);
+      setCurrentMousePos(e.clientY);
+    },
+    [isDragging, dragStart, selectedIds, dragStartPosition, selectionMode]
+  );
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+    setDragStart(null);
+    setDragStartPosition(null);
+  }, []);
+
+  // Add cleanup for mouse events
+  useEffect(() => {
+    if (isDragging) {
+      document.addEventListener("mouseup", handleMouseUp);
+      document.addEventListener("mouseleave", handleMouseUp);
+    }
+    return () => {
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.removeEventListener("mouseleave", handleMouseUp);
+    };
+  }, [isDragging, handleMouseUp]);
+
+  // Call onSelectionChange when selection changes
+  useEffect(() => {
+    if (onSelectionChange) {
+      onSelectionChange(getSelectedItems());
+    }
+  }, [selectedIds, onSelectionChange, getSelectedItems]);
+
+  return (
+    <div className={cn("flex gap-4 min-w-0", containerClassName ? "w-full" : "")}>
+      <div
+        ref={treeRef}
+        className={cn(
+          "bg-background rounded-xl border space-y-4 relative shadow-lg flex flex-col min-w-0 overflow-hidden",
+          containerClassName ?? "p-6 max-w-2xl w-[600px]"
+        )}
+      >
+        {title && (
+          <div className="text-sm font-medium text-foreground shrink-0">{title}</div>
+        )}
+        <div className="relative w-full shrink-0">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder={searchPlaceholder}
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="h-10 w-full pl-9"
+          />
+        </div>
+        <div className="flex items-center justify-between gap-2 shrink-0">
+          <div className="flex gap-2">
+            {showExpandAll && (
+              <>
+                <Button variant="ghost" size="sm" className="h-6 px-1.5 text-xs" onClick={handleExpandAll}>
+                  Expand
+                </Button>
+                <Button variant="ghost" size="sm" className="h-6 px-1.5 text-xs" onClick={handleCollapseAll}>
+                  Collapse
+                </Button>
+              </>
+            )}
+          </div>
+          {selectionMode !== "none" && selectedIds.size > 0 ? (
+            <div className="flex items-center gap-2">
+              <span className="text-xs text-muted-foreground">
+                {selectedIds.size} {selectionText}
+              </span>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 px-1.5 text-xs"
+                onClick={() => {
+                  setSelectedIds(new Set());
+                  lastSelectedId.current = null;
+                }}
+              >
+                <X className="h-3 w-3 mr-1" />
+                Clear
+              </Button>
+              {showCheckboxes && (
+                <div className="flex gap-2">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 px-2 text-green-600 hover:text-green-700 hover:bg-green-50"
+                    onClick={() => {
+                      const effectiveItems = getEffectiveSelectedItems();
+                      const processItem = (item: TreeViewItem) => {
+                        onCheckChange?.(item, true);
+                        item.children?.forEach(processItem);
+                      };
+                      effectiveItems.forEach(processItem);
+                    }}
+                  >
+                    {checkboxLabels.check}
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 px-2 text-red-600 hover:text-red-700 hover:bg-red-50"
+                    onClick={() => {
+                      const effectiveItems = getEffectiveSelectedItems();
+                      const processItem = (item: TreeViewItem) => {
+                        onCheckChange?.(item, false);
+                        item.children?.forEach(processItem);
+                      };
+                      effectiveItems.forEach(processItem);
+                    }}
+                  >
+                    {checkboxLabels.uncheck}
+                  </Button>
+                </div>
+              )}
+            </div>
+          ) : null}
+        </div>
+        <div
+          ref={dragRef}
+          className={cn(
+            "rounded-lg relative select-none min-w-0 overflow-x-hidden",
+            className
+          )}
+          onMouseDown={handleMouseDown}
+          onMouseMove={handleMouseMove}
+        >
+          {isDragging && (
+            <div
+              className="absolute inset-0 bg-blue-500/0 pointer-events-none"
+              style={{
+                top: Math.min(
+                  dragStart || 0,
+                  dragStart === null ? 0 : currentMousePos
+                ),
+                height: Math.abs(
+                  (dragStart || 0) - (dragStart === null ? 0 : currentMousePos)
+                ),
+              }}
+            />
+          )}
+          {filteredData.map((item) => (
+            <TreeItem
+              key={item.id}
+              item={item}
+              selectedIds={selectedIds}
+              lastSelectedId={lastSelectedId}
+              onSelect={setSelectedIds}
+              expandedIds={expandedIds}
+              onToggleExpand={handleToggleExpand}
+              selectionMode={selectionMode}
+              getIcon={getIcon}
+              onAction={onAction}
+              onAccessChange={onCheckChange}
+              allItems={data}
+              showAccessRights={showCheckboxes}
+              showSelectionCheckboxes={showSelectionCheckboxes}
+              itemMap={itemMap}
+              iconMap={iconMap}
+              menuItems={menuItems}
+              getSelectedItems={getSelectedItems}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/apollo-wind/src/foundation/Future/colors.stories.tsx b/packages/apollo-wind/src/foundation/Future/colors.stories.tsx
index 41b5b3ed6..2fdbd5520 100644
--- a/packages/apollo-wind/src/foundation/Future/colors.stories.tsx
+++ b/packages/apollo-wind/src/foundation/Future/colors.stories.tsx
@@ -1,6 +1,6 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { cn } from '@/lib';
-import { accent, border, foreground, gradient, ring, surface } from './colors';
 import { fontFamily } from './typography';
 
 // ============================================================================
@@ -18,40 +18,214 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // ============================================================================
-// Helpers
+// Token data
 // ============================================================================
 
-function SectionTitle({ children }: { children: React.ReactNode }) {
-  return (
-    <h2
-      className="mb-6 text-2xl font-bold tracking-tight text-future-foreground"
-      style={{ fontFamily: fontFamily.base }}
-    >
-      {children}
-    </h2>
-  );
+interface ColorToken {
+  name: string;
+  twClass: string;
+  usage: string;
+  dark: string;
+  darkTw: string;
+  light: string;
+  lightTw: string;
+}
+
+interface GradientToken {
+  name: string;
+  twClass: string;
+  darkFrom: string;
+  darkTo: string;
+  lightFrom: string;
+  lightTo: string;
 }
 
-function Divider() {
-  return <div className="my-10 h-px bg-future-border-subtle" />;
+interface ColorGroup {
+  group: string;
+  tokens: ColorToken[];
 }
 
-function TokenRow({
-  label,
-  className,
-  children,
-}: {
-  label: string;
-  className: string;
-  children: React.ReactNode;
-}) {
+const colorGroups: ColorGroup[] = [
+  {
+    group: 'Surface',
+    tokens: [
+      { name: 'surface', twClass: 'bg-future-surface', usage: 'Page, canvas, containers', dark: '#09090b', darkTw: 'zinc-950', light: '#fafafa', lightTw: 'zinc-50' },
+      { name: 'surface-raised', twClass: 'bg-future-surface-raised', usage: 'Properties bar & panel (Flow); cards, overlays, panels', dark: '#18181b', darkTw: 'zinc-900', light: '#f4f4f5', lightTw: 'zinc-100' },
+      { name: 'surface-overlay', twClass: 'bg-future-surface-overlay', usage: 'Left panel (Flow, Delegate); panels, inputs, tabs, icon rail', dark: '#27272a', darkTw: 'zinc-800', light: '#e4e4e7', lightTw: 'zinc-200' },
+      { name: 'surface-hover', twClass: 'bg-future-surface-hover', usage: 'Nav hover, selected state', dark: '#3f3f46', darkTw: 'zinc-700', light: '#d4d4d8', lightTw: 'zinc-300' },
+      { name: 'surface-muted', twClass: 'bg-future-surface-muted', usage: 'Badges, indicators', dark: '#71717a', darkTw: 'zinc-500', light: '#a1a1aa', lightTw: 'zinc-400' },
+      { name: 'surface-inverse', twClass: 'bg-future-surface-inverse', usage: 'Buttons on opposite bg', dark: '#fafafa', darkTw: 'zinc-50', light: '#09090b', lightTw: 'zinc-950' },
+    ],
+  },
+  {
+    group: 'Accent',
+    tokens: [
+      { name: 'accent', twClass: 'bg-future-accent', usage: 'Logo, primary buttons, active indicators', dark: '#0891b2', darkTw: 'cyan-600', light: '#0891b2', lightTw: 'cyan-600' },
+      { name: 'accent-subtle', twClass: 'bg-future-accent-subtle', usage: 'Selected state bg, active nav, status badges', dark: '#083344', darkTw: 'cyan-950', light: '#ecfeff', lightTw: 'cyan-50' },
+    ],
+  },
+  {
+    group: 'Foreground',
+    tokens: [
+      { name: 'foreground', twClass: 'text-future-foreground', usage: 'Primary headings', dark: '#fafafa', darkTw: 'zinc-50', light: '#09090b', lightTw: 'zinc-950' },
+      { name: 'foreground-secondary', twClass: 'text-future-foreground-secondary', usage: 'Body, messages', dark: '#f4f4f5', darkTw: 'zinc-100', light: '#18181b', lightTw: 'zinc-900' },
+      { name: 'foreground-hover', twClass: 'text-future-foreground-hover', usage: 'Hover states', dark: '#d4d4d8', darkTw: 'zinc-300', light: '#52525b', lightTw: 'zinc-600' },
+      { name: 'foreground-muted', twClass: 'text-future-foreground-muted', usage: 'Nav, secondary UI, code', dark: '#a1a1aa', darkTw: 'zinc-400', light: '#71717a', lightTw: 'zinc-500' },
+      { name: 'foreground-subtle', twClass: 'text-future-foreground-subtle', usage: 'Labels, placeholders', dark: '#71717a', darkTw: 'zinc-500', light: '#a1a1aa', lightTw: 'zinc-400' },
+      { name: 'foreground-inverse', twClass: 'text-future-foreground-inverse', usage: 'Icons on inverse bg', dark: '#09090b', darkTw: 'zinc-950', light: '#fafafa', lightTw: 'zinc-50' },
+      { name: 'foreground-on-accent', twClass: 'text-future-foreground-on-accent', usage: 'Text on accent bg', dark: '#fafafa', darkTw: 'zinc-50', light: '#fafafa', lightTw: 'zinc-50' },
+      { name: 'foreground-accent', twClass: 'text-future-foreground-accent', usage: 'Accent text, icons', dark: '#06b6d4', darkTw: 'cyan-500', light: '#0891b2', lightTw: 'cyan-600' },
+      { name: 'foreground-accent-muted', twClass: 'text-future-foreground-accent-muted', usage: 'Muted accent text', dark: '#22d3ee', darkTw: 'cyan-400', light: '#0891b2', lightTw: 'cyan-600' },
+    ],
+  },
+  {
+    group: 'Border',
+    tokens: [
+      { name: 'border', twClass: 'border-future-border', usage: 'Primary borders', dark: '#3f3f46', darkTw: 'zinc-700', light: '#d4d4d8', lightTw: 'zinc-300' },
+      { name: 'border-subtle', twClass: 'border-future-border-subtle', usage: 'Subtle dividers', dark: '#27272a', darkTw: 'zinc-800', light: '#e4e4e7', lightTw: 'zinc-200' },
+      { name: 'border-muted', twClass: 'border-future-border-muted', usage: 'Content borders', dark: '#18181b', darkTw: 'zinc-900', light: '#f4f4f5', lightTw: 'zinc-100' },
+      { name: 'border-deep', twClass: 'border-future-border-deep', usage: 'Nested containers', dark: '#09090b', darkTw: 'zinc-950', light: '#fafafa', lightTw: 'zinc-50' },
+      { name: 'border-inverse', twClass: 'border-future-border-inverse', usage: 'Borders on inverse bg', dark: '#e4e4e7', darkTw: 'zinc-200', light: '#3f3f46', lightTw: 'zinc-700' },
+      { name: 'border-hover', twClass: 'border-future-border-hover', usage: 'Border hover state', dark: '#52525b', darkTw: 'zinc-600', light: '#a1a1aa', lightTw: 'zinc-400' },
+    ],
+  },
+  {
+    group: 'Ring',
+    tokens: [
+      { name: 'ring', twClass: 'ring-future-ring', usage: 'Focus / selection ring', dark: '#52525b', darkTw: 'zinc-600', light: '#a1a1aa', lightTw: 'zinc-400' },
+    ],
+  },
+];
+
+const gradientTokens: GradientToken[] = [
+  { name: 'gradient-1', twClass: 'bg-future-gradient-1', darkFrom: 'zinc-700', darkTo: 'zinc-800', lightFrom: 'zinc-200', lightTo: 'zinc-100' },
+  { name: 'gradient-2', twClass: 'bg-future-gradient-2', darkFrom: 'zinc-950', darkTo: 'zinc-900', lightFrom: 'zinc-50', lightTo: 'zinc-50' },
+  { name: 'gradient-3', twClass: 'bg-future-gradient-3', darkFrom: 'zinc-700', darkTo: 'zinc-900', lightFrom: 'zinc-200', lightTo: 'zinc-50' },
+  { name: 'gradient-4', twClass: 'bg-future-gradient-4', darkFrom: 'zinc-900', darkTo: 'zinc-800', lightFrom: 'zinc-50', lightTo: 'zinc-100' },
+  { name: 'gradient-5', twClass: 'bg-future-gradient-5', darkFrom: 'zinc-950', darkTo: 'zinc-900', lightFrom: 'zinc-50', lightTo: 'zinc-50' },
+  { name: 'gradient-6', twClass: 'bg-future-gradient-6', darkFrom: 'cyan-600', darkTo: 'cyan-950', lightFrom: 'cyan-400', lightTo: 'cyan-100' },
+];
+
+// ============================================================================
+// Table components
+// ============================================================================
+
+function ColorTokenTable({ groups }: { groups: ColorGroup[] }) {
   return (
-    <div className="flex items-center gap-6 border-b border-future-border-subtle py-3">
-      <code className="w-56 shrink-0 text-sm font-medium text-future-accent-foreground-muted">
-        {label}
-      </code>
-      <span className="w-52 shrink-0 text-xs text-future-foreground-subtle">{className}</span>
-      {children}
+    <div className="overflow-hidden rounded-lg border border-future-border">
+      <table className="w-full text-sm" style={{ fontFamily: fontFamily.base }}>
+        <thead>
+          <tr className="border-b border-future-border bg-future-surface-overlay">
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Token</th>
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Tailwind Class</th>
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Usage</th>
+            <th className="px-4 py-2.5 text-center font-medium text-future-foreground-muted">Dark</th>
+            <th className="px-4 py-2.5 text-center font-medium text-future-foreground-muted">Light</th>
+          </tr>
+        </thead>
+        <tbody>
+          {groups.map((group) => (
+            <React.Fragment key={group.group}>
+              <tr className="border-b border-future-border bg-future-surface-raised/50">
+                <td
+                  colSpan={5}
+                  className="px-4 py-2 text-xs font-semibold uppercase tracking-wider text-future-foreground-muted"
+                >
+                  {group.group}
+                </td>
+              </tr>
+              {group.tokens.map((token) => (
+                <tr key={token.name} className="border-b border-future-border-subtle last:border-b-0">
+                  <td className="px-4 py-2">
+                    <code className="text-xs text-future-foreground-accent" style={{ fontFamily: fontFamily.monospace }}>
+                      {token.name}
+                    </code>
+                  </td>
+                  <td className="px-4 py-2">
+                    <code className="text-xs text-future-foreground-subtle" style={{ fontFamily: fontFamily.monospace }}>
+                      {token.twClass}
+                    </code>
+                  </td>
+                  <td className="px-4 py-2 text-future-foreground-muted">{token.usage}</td>
+                  <td className="px-4 py-2">
+                    <div className="flex items-center justify-center gap-2">
+                      <div className="h-5 w-5 shrink-0 rounded border border-future-border" style={{ backgroundColor: token.dark }} />
+                      <div className="flex flex-col">
+                        <code className="text-xs text-future-foreground-muted" style={{ fontFamily: fontFamily.monospace }}>
+                          {token.dark}
+                        </code>
+                        <code className="text-[10px] text-future-foreground-accent/70" style={{ fontFamily: fontFamily.monospace }}>
+                          {token.darkTw}
+                        </code>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="px-4 py-2">
+                    <div className="flex items-center justify-center gap-2">
+                      <div className="h-5 w-5 shrink-0 rounded border border-future-border" style={{ backgroundColor: token.light }} />
+                      <div className="flex flex-col">
+                        <code className="text-xs text-future-foreground-muted" style={{ fontFamily: fontFamily.monospace }}>
+                          {token.light}
+                        </code>
+                        <code className="text-[10px] text-future-foreground-accent/70" style={{ fontFamily: fontFamily.monospace }}>
+                          {token.lightTw}
+                        </code>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </React.Fragment>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function GradientTable({ gradients }: { gradients: GradientToken[] }) {
+  return (
+    <div className="overflow-hidden rounded-lg border border-future-border">
+      <table className="w-full text-sm" style={{ fontFamily: fontFamily.base }}>
+        <thead>
+          <tr className="border-b border-future-border bg-future-surface-overlay">
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Token</th>
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Tailwind Class</th>
+            <th className="px-4 py-2.5 text-center font-medium text-future-foreground-muted">Preview</th>
+            <th className="px-4 py-2.5 text-center font-medium text-future-foreground-muted">Dark stops</th>
+            <th className="px-4 py-2.5 text-center font-medium text-future-foreground-muted">Light stops</th>
+          </tr>
+        </thead>
+        <tbody>
+          {gradients.map((g) => (
+            <tr key={g.name} className="border-b border-future-border-subtle last:border-b-0">
+              <td className="px-4 py-2">
+                <code className="text-xs text-future-foreground-accent" style={{ fontFamily: fontFamily.monospace }}>
+                  {g.name}
+                </code>
+              </td>
+              <td className="px-4 py-2">
+                <code className="text-xs text-future-foreground-subtle" style={{ fontFamily: fontFamily.monospace }}>
+                  {g.twClass}
+                </code>
+              </td>
+              <td className="px-4 py-3">
+                <div className={cn('mx-auto h-6 w-28 rounded border border-future-border', g.twClass)} />
+              </td>
+              <td className="px-4 py-2 text-center">
+                <code className="text-[10px] text-future-foreground-accent/70" style={{ fontFamily: fontFamily.monospace }}>
+                  {g.darkFrom} → {g.darkTo}
+                </code>
+              </td>
+              <td className="px-4 py-2 text-center">
+                <code className="text-[10px] text-future-foreground-accent/70" style={{ fontFamily: fontFamily.monospace }}>
+                  {g.lightFrom} → {g.lightTo}
+                </code>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
     </div>
   );
 }
@@ -64,106 +238,38 @@ export const Default: Story = {
   render: (_, { globals }) => (
     <div
       className={cn(
-        globals.futureTheme === 'light' ? 'future-light' : 'future-dark',
+        ({ light: 'future-light', 'legacy-dark': 'legacy-dark', 'legacy-light': 'legacy-light', wireframe: 'future-wireframe', vertex: 'future-vertex', canvas: 'future-canvas' } as Record<string, string>)[globals.futureTheme] ?? 'future-dark',
         'min-h-screen w-full bg-future-surface'
       )}
       style={{ fontFamily: fontFamily.base }}
     >
-      <div className="mx-auto max-w-4xl space-y-2 p-8">
-        {/* ------------------------------------------------------------------ */}
-        {/* Surface */}
-        {/* ------------------------------------------------------------------ */}
-        <SectionTitle>Surface (backgrounds)</SectionTitle>
-
-        <div className="flex flex-col gap-4">
-          {Object.entries(surface).map(([key, twClass]) => (
-            <TokenRow key={key} label={`surface.${key}`} className={twClass}>
-              <div className={cn('h-10 w-24 rounded-lg border border-future-border', twClass)} />
-            </TokenRow>
-          ))}
+      <div className="mx-auto max-w-6xl space-y-10 p-8">
+        <div>
+          <h1
+            className="mb-2 text-3xl font-bold tracking-tight text-future-foreground"
+            style={{ fontFamily: fontFamily.base }}
+          >
+            Color Tokens
+          </h1>
+          <p className="text-sm text-future-foreground-muted">
+            All semantic color tokens for the Future design language. Each token resolves to a different value
+            in dark and light themes via CSS custom properties. Use the Tailwind class column for implementation.
+          </p>
         </div>
 
-        <Divider />
-
-        {/* ------------------------------------------------------------------ */}
-        {/* Accent */}
-        {/* ------------------------------------------------------------------ */}
-        <SectionTitle>Accent</SectionTitle>
-
-        <div className="flex flex-col gap-4">
-          {Object.entries(accent).map(([key, twClass]) => (
-            <TokenRow key={key} label={`accent.${key}`} className={twClass}>
-              <div className={cn('h-10 w-24 rounded-lg border border-future-border', twClass)} />
-            </TokenRow>
-          ))}
-        </div>
+        <ColorTokenTable groups={colorGroups} />
 
-        <Divider />
-
-        {/* ------------------------------------------------------------------ */}
-        {/* Foreground */}
-        {/* ------------------------------------------------------------------ */}
-        <SectionTitle>Foreground (text / icons)</SectionTitle>
-
-        <div className="flex flex-col gap-4">
-          {Object.entries(foreground).map(([key, twClass]) => {
-            // Convert bg class pattern to text class for preview
-            const textClass = twClass;
-            return (
-              <TokenRow key={key} label={`foreground.${key}`} className={twClass}>
-                <span className={cn('text-sm font-medium', textClass)}>Sample text</span>
-              </TokenRow>
-            );
-          })}
-        </div>
-
-        <Divider />
-
-        {/* ------------------------------------------------------------------ */}
-        {/* Border */}
-        {/* ------------------------------------------------------------------ */}
-        <SectionTitle>Border</SectionTitle>
-
-        <div className="flex flex-col gap-4">
-          {Object.entries(border).map(([key, twClass]) => (
-            <TokenRow key={key} label={`border.${key}`} className={twClass}>
-              <div
-                className={cn('h-10 w-24 rounded-lg bg-future-surface-raised border-2', twClass)}
-              />
-            </TokenRow>
-          ))}
-        </div>
-
-        <Divider />
-
-        {/* ------------------------------------------------------------------ */}
-        {/* Ring */}
-        {/* ------------------------------------------------------------------ */}
-        <SectionTitle>Ring (selection / focus)</SectionTitle>
-
-        <div className="flex flex-col gap-4">
-          {Object.entries(ring).map(([key, twClass]) => (
-            <TokenRow key={key} label={`ring.${key}`} className={twClass}>
-              <div
-                className={cn('h-10 w-24 rounded-lg bg-future-surface-raised ring-2', twClass)}
-              />
-            </TokenRow>
-          ))}
-        </div>
-
-        <Divider />
-
-        {/* ------------------------------------------------------------------ */}
-        {/* Gradient */}
-        {/* ------------------------------------------------------------------ */}
-        <SectionTitle>Gradient</SectionTitle>
-
-        <div className="flex flex-col gap-4">
-          {Object.entries(gradient).map(([key, twClass]) => (
-            <TokenRow key={key} label={`gradient.${key}`} className={twClass}>
-              <div className={cn('h-10 w-40 rounded-lg border border-future-border', twClass)} />
-            </TokenRow>
-          ))}
+        <div>
+          <h2
+            className="mb-4 text-xl font-bold tracking-tight text-future-foreground"
+            style={{ fontFamily: fontFamily.base }}
+          >
+            Gradients
+          </h2>
+          <p className="mb-4 text-sm text-future-foreground-muted">
+            Theme-aware background gradients defined as custom utilities. Preview reflects the active theme.
+          </p>
+          <GradientTable gradients={gradientTokens} />
         </div>
       </div>
     </div>
diff --git a/packages/apollo-wind/src/foundation/Future/colors.ts b/packages/apollo-wind/src/foundation/Future/colors.ts
index b58566bfc..332140fd2 100644
--- a/packages/apollo-wind/src/foundation/Future/colors.ts
+++ b/packages/apollo-wind/src/foundation/Future/colors.ts
@@ -70,8 +70,8 @@ export const accent = {
  * | foregroundSubtle       | text-future-foreground-subtle         | zinc-500 #71717a  | zinc-400 #a1a1aa  | Muted, labels             |
  * | foregroundInverse      | text-future-foreground-inverse        | zinc-950 #09090b  | white   #ffffff   | Icons on inverse bg       |
  * | foregroundOnAccent     | text-future-foreground-on-accent      | white   #ffffff   | white   #ffffff   | On primary buttons        |
- * | accentForeground       | text-future-accent-foreground         | cyan-500 #06b6d4  | cyan-600 #0891b2  | Flow/node icons           |
- * | accentForegroundMuted  | text-future-accent-foreground-muted   | cyan-400 #22d3ee  | cyan-600 #0891b2  | Status text               |
+ * | foregroundAccent       | text-future-foreground-accent         | cyan-500 #06b6d4  | cyan-600 #0891b2  | Flow/node icons           |
+ * | foregroundAccentMuted  | text-future-foreground-accent-muted   | cyan-400 #22d3ee  | cyan-600 #0891b2  | Status text               |
  */
 export const foreground = {
   foreground: 'text-future-foreground',
@@ -81,8 +81,8 @@ export const foreground = {
   foregroundSubtle: 'text-future-foreground-subtle',
   foregroundInverse: 'text-future-foreground-inverse',
   foregroundOnAccent: 'text-future-foreground-on-accent',
-  accentForeground: 'text-future-accent-foreground',
-  accentForegroundMuted: 'text-future-accent-foreground-muted',
+  foregroundAccent: 'text-future-foreground-accent',
+  foregroundAccentMuted: 'text-future-foreground-accent-muted',
 } as const;
 
 // =============================================================================
diff --git a/packages/apollo-wind/src/foundation/Future/future-theme.css b/packages/apollo-wind/src/foundation/Future/future-theme.css
index 596a8a06b..2867f6f5c 100644
--- a/packages/apollo-wind/src/foundation/Future/future-theme.css
+++ b/packages/apollo-wind/src/foundation/Future/future-theme.css
@@ -27,12 +27,12 @@
   /* zinc-700  — hover, selected nav */
   --color-future-surface-muted: #71717a;
   /* zinc-500  — badges, indicators */
-  --color-future-surface-inverse: #ffffff;
-  /* white     — buttons on dark bg */
+  --color-future-surface-inverse: #fafafa;
+  /* zinc-50   — buttons on dark bg */
 
   /* ── Accent ───────────────────────────────────────────────────────────── */
-  --color-future-accent: #06b6d4;
-  /* cyan-500  — logo, submit, run */
+  --color-future-accent: #0891b2;
+  /* cyan-600  — logo, submit, run */
   --color-future-accent-subtle: #083344;
   /* cyan-950  — status badge, active nav */
 
@@ -49,11 +49,11 @@
   /* zinc-500  — labels, muted */
   --color-future-foreground-inverse: #09090b;
   /* zinc-950  — icons on light bg */
-  --color-future-foreground-on-accent: #ffffff;
-  /* white     — text on accent bg */
-  --color-future-accent-foreground: #06b6d4;
-  /* cyan-500  — accent text */
-  --color-future-accent-foreground-muted: #22d3ee;
+  --color-future-foreground-on-accent: #fafafa;
+  /* zinc-50   — text on accent bg */
+  --color-future-foreground-accent: #0891b2;
+  /* cyan-600  — accent text */
+  --color-future-foreground-accent-muted: #22d3ee;
   /* cyan-400 — muted accent text */
 
   /* ── Borders ──────────────────────────────────────────────────────────── */
@@ -105,7 +105,8 @@
   --color-accent: var(--color-future-surface-hover);
   --color-accent-foreground: var(--color-future-foreground);
   --color-destructive: #ef4444;
-  --color-destructive-foreground: #ffffff;
+  --color-destructive-foreground: #fafafa;
+  /* zinc-50   — text on destructive bg */
   --color-border: var(--color-future-border);
   --color-border-de-emp: var(--color-future-border-subtle);
   --color-input: var(--color-future-border);
@@ -118,22 +119,22 @@
 
 .future-light {
   /* ── Surfaces ─────────────────────────────────────────────────────────── */
-  --color-future-surface: #ffffff;
-  /* white     — page / canvas */
-  --color-future-surface-raised: #fafafa;
-  /* zinc-50   — cards, overlays, panels */
-  --color-future-surface-overlay: #f4f4f5;
-  /* zinc-100  — panels, inputs, tabs */
-  --color-future-surface-hover: #e4e4e7;
-  /* zinc-200  — hover, selected nav */
+  --color-future-surface: #fafafa;
+  /* zinc-50   — page / canvas */
+  --color-future-surface-raised: #f4f4f5;
+  /* zinc-100  — Properties bar & panel (Flow); cards, overlays, panels */
+  --color-future-surface-overlay: #e4e4e7;
+  /* zinc-200  — Left panel (Flow, Delegate); panels, inputs, tabs */
+  --color-future-surface-hover: #d4d4d8;
+  /* zinc-300  — hover, selected nav */
   --color-future-surface-muted: #a1a1aa;
   /* zinc-400  — badges, indicators */
   --color-future-surface-inverse: #09090b;
   /* zinc-950  — buttons on light bg */
 
   /* ── Accent ───────────────────────────────────────────────────────────── */
-  --color-future-accent: #06b6d4;
-  /* cyan-500  — unchanged */
+  --color-future-accent: #0891b2;
+  /* cyan-600  — logo, submit, run */
   --color-future-accent-subtle: #ecfeff;
   /* cyan-50   — status badge, active nav */
 
@@ -148,13 +149,13 @@
   /* zinc-500  — nav, secondary UI */
   --color-future-foreground-subtle: #a1a1aa;
   /* zinc-400  — labels, muted */
-  --color-future-foreground-inverse: #ffffff;
-  /* white     — icons on dark bg */
-  --color-future-foreground-on-accent: #ffffff;
-  /* white     — text on accent bg (unchanged) */
-  --color-future-accent-foreground: #0891b2;
+  --color-future-foreground-inverse: #fafafa;
+  /* zinc-50   — icons on dark bg */
+  --color-future-foreground-on-accent: #fafafa;
+  /* zinc-50   — text on accent bg */
+  --color-future-foreground-accent: #0891b2;
   /* cyan-600  — accent text */
-  --color-future-accent-foreground-muted: #0891b2;
+  --color-future-foreground-accent-muted: #0891b2;
   /* cyan-600 — muted accent text */
 
   /* ── Borders ──────────────────────────────────────────────────────────── */
@@ -178,14 +179,14 @@
   /* ── Gradients ───────────────────────────────────────────────────────── */
   --gradient-future-1: linear-gradient(127deg, #e4e4e7 25.94%, #f4f4f5 74.06%);
   /* zinc-200 → zinc-100 */
-  --gradient-future-2: linear-gradient(128deg, #ffffff 1.26%, #fafafa 52.69%);
-  /* white → zinc-50 */
+  --gradient-future-2: linear-gradient(128deg, #fafafa 1.26%, #fafafa 52.69%);
+  /* zinc-50 → zinc-50 */
   --gradient-future-3: linear-gradient(128deg, #e4e4e7 1.26%, #fafafa 52.69%);
   /* zinc-200 → zinc-50 */
   --gradient-future-4: linear-gradient(180deg, #fafafa 0%, #f4f4f5 100%);
   /* zinc-50 → zinc-100 */
-  --gradient-future-5: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
-  /* white → zinc-50 */
+  --gradient-future-5: linear-gradient(180deg, #fafafa 0%, #fafafa 100%);
+  /* zinc-50 → zinc-50 */
   --gradient-future-6: linear-gradient(106deg, #22d3ee 28.08%, #cffafe 71.92%);
   /* cyan-400 → cyan-100 */
 
@@ -206,6 +207,284 @@
   --color-accent: var(--color-future-surface-hover);
   --color-accent-foreground: var(--color-future-foreground);
   --color-destructive: #ef4444;
+  --color-destructive-foreground: #fafafa;
+  /* zinc-50   — text on destructive bg */
+  --color-border: var(--color-future-border);
+  --color-border-de-emp: var(--color-future-border-subtle);
+  --color-input: var(--color-future-border);
+  --color-ring: var(--color-future-ring);
+}
+
+/* ============================================================================
+ * Wireframe theme (low-fidelity prototyping)
+ *
+ * Intentionally flat, no accent color, dashed borders. Designed to look like
+ * a quick sketch or blueprint so stakeholders focus on layout, not polish.
+ * ============================================================================ */
+
+.future-wireframe {
+  /* ── Surfaces ─────────────────────────────────────────────────────────── */
+  --color-future-surface: #ffffff;
+  --color-future-surface-raised: #f9fafb;
+  --color-future-surface-overlay: #f3f4f6;
+  --color-future-surface-hover: #e5e7eb;
+  --color-future-surface-muted: #d1d5db;
+  --color-future-surface-inverse: #374151;
+
+  /* ── Accent (deliberately muted — no brand color) ──────────────────── */
+  --color-future-accent: #6b7280;
+  --color-future-accent-subtle: #f3f4f6;
+
+  /* ── Foreground ─────────────────────────────────────────────────────── */
+  --color-future-foreground: #1f2937;
+  --color-future-foreground-secondary: #374151;
+  --color-future-foreground-hover: #4b5563;
+  --color-future-foreground-muted: #6b7280;
+  --color-future-foreground-subtle: #9ca3af;
+  --color-future-foreground-inverse: #ffffff;
+  --color-future-foreground-on-accent: #ffffff;
+  --color-future-foreground-accent: #4b5563;
+  --color-future-foreground-accent-muted: #6b7280;
+
+  /* ── Borders (dashed via utility, but color defined here) ───────────── */
+  --color-future-border: #d1d5db;
+  --color-future-border-subtle: #e5e7eb;
+  --color-future-border-muted: #f3f4f6;
+  --color-future-border-deep: #f9fafb;
+  --color-future-border-inverse: #4b5563;
+  --color-future-border-hover: #9ca3af;
+
+  /* ── Ring ────────────────────────────────────────────────────────────── */
+  --color-future-ring: #9ca3af;
+
+  /* ── Gradients (flat — no gradients in wireframe mode) ──────────────── */
+  --gradient-future-1: none;
+  --gradient-future-2: none;
+  --gradient-future-3: none;
+  --gradient-future-4: none;
+  --gradient-future-5: none;
+  --gradient-future-6: none;
+
+  /* ── shadcn bridge ──────────────────────────────────────────────────── */
+  --color-background: var(--color-future-surface);
+  --color-foreground: var(--color-future-foreground);
+  --color-card: var(--color-future-surface-raised);
+  --color-card-foreground: var(--color-future-foreground);
+  --color-popover: var(--color-future-surface-raised);
+  --color-popover-foreground: var(--color-future-foreground);
+  --color-primary: var(--color-future-accent);
+  --color-primary-foreground: var(--color-future-foreground-on-accent);
+  --color-secondary: var(--color-future-surface-overlay);
+  --color-secondary-foreground: var(--color-future-foreground);
+  --color-muted: var(--color-future-surface-overlay);
+  --color-muted-foreground: var(--color-future-foreground-muted);
+  --color-accent: var(--color-future-surface-hover);
+  --color-accent-foreground: var(--color-future-foreground);
+  --color-destructive: #9ca3af;
+  --color-destructive-foreground: #ffffff;
+  --color-border: var(--color-future-border);
+  --color-border-de-emp: var(--color-future-border-subtle);
+  --color-input: var(--color-future-border);
+  --color-ring: var(--color-future-ring);
+}
+
+/* Wireframe overrides: dashed borders everywhere, reduced rounding */
+.future-wireframe *,
+.future-wireframe *::before,
+.future-wireframe *::after {
+  border-style: dashed !important;
+  box-shadow: none !important;
+}
+
+/* ============================================================================
+ * Vertex theme (demo — Apollo Vertex dark palette)
+ *
+ * Translates the Vertex design language (oklch-based, teal/blue accent)
+ * into Future token slots so templates render with the Vertex look & feel.
+ * Source: apps/apollo-vertex/app/themes.ts  (default.config.dark)
+ * ============================================================================ */
+
+.future-vertex {
+  /* ── Surfaces ─────────────────────────────────────────────────────────── */
+  --color-future-surface: oklch(0.21 0.03 258.5);
+  /* deep blue-grey — page / canvas */
+  --color-future-surface-raised: oklch(0.233 0.036 254.7);
+  /* slightly lighter — cards, panels */
+  --color-future-surface-overlay: oklch(0.2648 0.0329 254.38);
+  /* muted — inputs, tabs */
+  --color-future-surface-hover: oklch(0.3927 0.0289 240.86);
+  /* secondary — hover, selected nav */
+  --color-future-surface-muted: oklch(0.72 0.03 254.38);
+  /* muted-foreground — badges, indicators */
+  --color-future-surface-inverse: oklch(0.985 0 0);
+  /* foreground — buttons on dark bg */
+
+  /* ── Accent ───────────────────────────────────────────────────────────── */
+  --color-future-accent: oklch(0.692 0.1119 207.06);
+  /* primary — teal */
+  --color-future-accent-subtle: oklch(0.166 0.0283 203.34);
+  /* primary-foreground — deep teal bg */
+
+  /* ── Foreground (text / icons) ────────────────────────────────────────── */
+  --color-future-foreground: oklch(0.985 0 0);
+  /* foreground — primary text */
+  --color-future-foreground-secondary: oklch(0.9525 0.011 225.98);
+  /* card-foreground — body text */
+  --color-future-foreground-hover: oklch(0.9416 0.0145 244.72);
+  /* secondary-foreground — hover states */
+  --color-future-foreground-muted: oklch(0.72 0.03 254.38);
+  /* muted-foreground — nav, secondary UI */
+  --color-future-foreground-subtle: oklch(0.4594 0.028 264.25);
+  /* muted-foreground (light ref) — labels */
+  --color-future-foreground-inverse: oklch(0.21 0.03 258.5);
+  /* background — icons on light bg */
+  --color-future-foreground-on-accent: oklch(0.166 0.0283 203.34);
+  /* primary-foreground — text on accent */
+  --color-future-foreground-accent: oklch(0.692 0.1119 207.06);
+  /* primary — accent text */
+  --color-future-foreground-accent-muted: oklch(0.573 0.114 211.4);
+  /* accent — muted accent text */
+
+  /* ── Borders ──────────────────────────────────────────────────────────── */
+  --color-future-border: oklch(0.3068 0.0426 258.29);
+  /* border */
+  --color-future-border-subtle: oklch(0.2648 0.0329 254.38);
+  /* muted — subtle dividers */
+  --color-future-border-muted: oklch(0.233 0.036 254.7);
+  /* card — content borders */
+  --color-future-border-deep: oklch(0.21 0.03 258.5);
+  /* background — nested containers */
+  --color-future-border-inverse: oklch(0.9229 0.0065 252.13);
+  /* light border ref */
+  --color-future-border-hover: oklch(0.3927 0.0289 240.86);
+  /* secondary — border hover */
+
+  /* ── Ring ────────────────────────────────────────────────────────────── */
+  --color-future-ring: oklch(0.692 0.1119 207.06);
+  /* ring — teal focus ring */
+
+  /* ── Gradients (subtle depth) ──────────────────────────────────────── */
+  --gradient-future-1: linear-gradient(127deg, oklch(0.3927 0.0289 240.86) 25.94%, oklch(0.2648 0.0329 254.38) 74.06%);
+  --gradient-future-2: linear-gradient(128deg, oklch(0.21 0.03 258.5) 1.26%, oklch(0.233 0.036 254.7) 52.69%);
+  --gradient-future-3: linear-gradient(128deg, oklch(0.3927 0.0289 240.86) 1.26%, oklch(0.233 0.036 254.7) 52.69%);
+  --gradient-future-4: linear-gradient(180deg, oklch(0.233 0.036 254.7) 0%, oklch(0.2648 0.0329 254.38) 100%);
+  --gradient-future-5: linear-gradient(180deg, oklch(0.21 0.03 258.5) 0%, oklch(0.233 0.036 254.7) 100%);
+  --gradient-future-6: linear-gradient(106deg, oklch(0.692 0.1119 207.06) 28.08%, oklch(0.166 0.0283 203.34) 71.92%);
+
+  /* ── shadcn bridge ──────────────────────────────────────────────────── */
+  --color-background: var(--color-future-surface);
+  --color-foreground: var(--color-future-foreground);
+  --color-card: var(--color-future-surface-raised);
+  --color-card-foreground: var(--color-future-foreground);
+  --color-popover: var(--color-future-surface-raised);
+  --color-popover-foreground: var(--color-future-foreground);
+  --color-primary: var(--color-future-accent);
+  --color-primary-foreground: var(--color-future-foreground-on-accent);
+  --color-secondary: var(--color-future-surface-overlay);
+  --color-secondary-foreground: var(--color-future-foreground);
+  --color-muted: var(--color-future-surface-overlay);
+  --color-muted-foreground: var(--color-future-foreground-muted);
+  --color-accent: var(--color-future-surface-hover);
+  --color-accent-foreground: var(--color-future-foreground);
+  --color-destructive: oklch(0.6542 0.2321 28.66);
+  --color-destructive-foreground: oklch(1 0 89.88);
+  --color-border: var(--color-future-border);
+  --color-border-de-emp: var(--color-future-border-subtle);
+  --color-input: var(--color-future-border);
+  --color-ring: var(--color-future-ring);
+}
+
+/* ============================================================================
+ * Canvas theme (demo — Apollo React / MUI dark palette)
+ *
+ * Maps the classic apollo-react dark theme (apollo-core darkPalette) into
+ * Future token slots. Dark blue-grey base with UiPath orange accent.
+ * Source: packages/apollo-core/src/tokens/jss/palette.ts  (darkPalette)
+ * ============================================================================ */
+
+.future-canvas {
+  /* ── Surfaces ─────────────────────────────────────────────────────────── */
+  --color-future-surface: #182027;
+  /* ColorBackgroundDark — page / canvas */
+  --color-future-surface-raised: #273139;
+  /* ColorBackgroundSecondaryDark — cards, panels */
+  --color-future-surface-overlay: #334049;
+  /* mid-tone — inputs, tabs */
+  --color-future-surface-hover: #3e4e58;
+  /* hover, selected nav */
+  --color-future-surface-muted: #8a97a0;
+  /* ColorBorderDark — badges, indicators */
+  --color-future-surface-inverse: #f8f9fa;
+  /* ColorBackgroundInverseDark — buttons on dark bg */
+
+  /* ── Accent (UiPath orange) ────────────────────────────────────────── */
+  --color-future-accent: #fa4616;
+  /* ColorOrange500 — primary brand */
+  --color-future-accent-subtle: #3c2a1e;
+  /* dark warm tone — active nav bg */
+
+  /* ── Foreground (text / icons) ────────────────────────────────────────── */
+  --color-future-foreground: #f8f9fa;
+  /* ColorForegroundEmpDark — primary text */
+  --color-future-foreground-secondary: #f4f5f7;
+  /* ColorForegroundDark — body text */
+  --color-future-foreground-hover: #cfd8dd;
+  /* ColorForegroundDeEmpDark — hover states */
+  --color-future-foreground-muted: #a4b1b8;
+  /* ColorForegroundDisableDark — nav, secondary UI */
+  --color-future-foreground-subtle: #8a97a0;
+  /* ColorBorderDark — labels, muted */
+  --color-future-foreground-inverse: #182027;
+  /* ColorForegroundInverseDark — icons on light bg */
+  --color-future-foreground-on-accent: #ffffff;
+  /* white — text on accent bg */
+  --color-future-foreground-accent: #fa4616;
+  /* ColorOrange500 — accent text */
+  --color-future-foreground-accent-muted: #ff8f70;
+  /* ColorSelectionDark — muted accent text */
+
+  /* ── Borders ──────────────────────────────────────────────────────────── */
+  --color-future-border: #526069;
+  /* ColorBorderDeEmpDark */
+  --color-future-border-subtle: #3e4e58;
+  /* mid border */
+  --color-future-border-muted: #273139;
+  /* ColorBackgroundSecondaryDark — content borders */
+  --color-future-border-deep: #182027;
+  /* ColorBackgroundDark — nested containers */
+  --color-future-border-inverse: #cfd8dd;
+  /* ColorForegroundDeEmpDark — borders on inverse bg */
+  --color-future-border-hover: #8a97a0;
+  /* ColorBorderDark — border hover */
+
+  /* ── Ring ────────────────────────────────────────────────────────────── */
+  --color-future-ring: #fa4616;
+  /* orange focus ring */
+
+  /* ── Gradients ────────────────────────────────────────────────────────── */
+  --gradient-future-1: linear-gradient(127deg, #3e4e58 25.94%, #334049 74.06%);
+  --gradient-future-2: linear-gradient(128deg, #182027 1.26%, #273139 52.69%);
+  --gradient-future-3: linear-gradient(128deg, #3e4e58 1.26%, #273139 52.69%);
+  --gradient-future-4: linear-gradient(180deg, #273139 0%, #334049 100%);
+  --gradient-future-5: linear-gradient(180deg, #182027 0%, #273139 100%);
+  --gradient-future-6: linear-gradient(106deg, #fa4616 28.08%, #3c2a1e 71.92%);
+
+  /* ── shadcn bridge ──────────────────────────────────────────────────── */
+  --color-background: var(--color-future-surface);
+  --color-foreground: var(--color-future-foreground);
+  --color-card: var(--color-future-surface-raised);
+  --color-card-foreground: var(--color-future-foreground);
+  --color-popover: var(--color-future-surface-raised);
+  --color-popover-foreground: var(--color-future-foreground);
+  --color-primary: var(--color-future-accent);
+  --color-primary-foreground: var(--color-future-foreground-on-accent);
+  --color-secondary: var(--color-future-surface-overlay);
+  --color-secondary-foreground: var(--color-future-foreground);
+  --color-muted: var(--color-future-surface-overlay);
+  --color-muted-foreground: var(--color-future-foreground-muted);
+  --color-accent: var(--color-future-surface-hover);
+  --color-accent-foreground: var(--color-future-foreground);
+  --color-destructive: #ef4444;
   --color-destructive-foreground: #ffffff;
   --color-border: var(--color-future-border);
   --color-border-de-emp: var(--color-future-border-subtle);
@@ -243,8 +522,8 @@
   --color-future-foreground-subtle: var(--color-future-foreground-subtle);
   --color-future-foreground-inverse: var(--color-future-foreground-inverse);
   --color-future-foreground-on-accent: var(--color-future-foreground-on-accent);
-  --color-future-accent-foreground: var(--color-future-accent-foreground);
-  --color-future-accent-foreground-muted: var(--color-future-accent-foreground-muted);
+  --color-future-foreground-accent: var(--color-future-foreground-accent);
+  --color-future-foreground-accent-muted: var(--color-future-foreground-accent-muted);
 
   /* Borders */
   --color-future-border: var(--color-future-border);
diff --git a/packages/apollo-wind/src/foundation/Future/icons.stories.tsx b/packages/apollo-wind/src/foundation/Future/icons.stories.tsx
index 4d1383878..99cdaac98 100644
--- a/packages/apollo-wind/src/foundation/Future/icons.stories.tsx
+++ b/packages/apollo-wind/src/foundation/Future/icons.stories.tsx
@@ -15,7 +15,7 @@ export const Default: Story = {
   render: (_, { globals }) => (
     <div
       className={cn(
-        globals.futureTheme === 'light' ? 'future-light' : 'future-dark',
+        ({ light: 'future-light', 'legacy-dark': 'legacy-dark', 'legacy-light': 'legacy-light', wireframe: 'future-wireframe', vertex: 'future-vertex', canvas: 'future-canvas' } as Record<string, string>)[globals.futureTheme] ?? 'future-dark',
         'flex min-h-screen w-full items-center justify-center bg-future-surface text-future-foreground-muted'
       )}
     >
diff --git a/packages/apollo-wind/src/foundation/Future/radius.stories.tsx b/packages/apollo-wind/src/foundation/Future/radius.stories.tsx
index b977f6c5a..b7756ee08 100644
--- a/packages/apollo-wind/src/foundation/Future/radius.stories.tsx
+++ b/packages/apollo-wind/src/foundation/Future/radius.stories.tsx
@@ -1,7 +1,7 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { cn } from '@/lib';
 import { fontFamily } from './typography';
-import { borderRadius } from './radius';
 
 // ============================================================================
 // Meta
@@ -18,17 +18,75 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // ============================================================================
-// Helpers
+// Token data
 // ============================================================================
 
-function SectionTitle({ children }: { children: React.ReactNode }) {
+interface RadiusToken {
+  token: string;
+  px: number;
+  twClass: string;
+  usage: string;
+}
+
+const radiusTokens: RadiusToken[] = [
+  { token: 'sm', px: 4, twClass: 'rounded-[4px]', usage: 'Chat bubble corner (Flow)' },
+  { token: 'lg', px: 8, twClass: 'rounded-lg', usage: 'Buttons, inputs, icons' },
+  { token: 'lgPlus', px: 10, twClass: 'rounded-[10px]', usage: 'Toggle pill buttons' },
+  { token: 'xl', px: 12, twClass: 'rounded-xl', usage: 'Toggle containers, cards' },
+  { token: '2xl', px: 16, twClass: 'rounded-2xl', usage: 'Panels, large cards' },
+  { token: 'xlPlus', px: 20, twClass: 'rounded-[20px]', usage: 'Node size selector (Flow)' },
+  { token: '3xl', px: 24, twClass: 'rounded-3xl', usage: 'Canvas toolbar' },
+  { token: 'pill', px: 32, twClass: 'rounded-[32px]', usage: 'Delegate card radius' },
+  { token: 'circle', px: 9999, twClass: 'rounded-full', usage: 'Circular buttons (send)' },
+];
+
+// ============================================================================
+// Table component
+// ============================================================================
+
+function RadiusTable({ tokens }: { tokens: RadiusToken[] }) {
   return (
-    <h2
-      className="mb-6 text-2xl font-bold tracking-tight text-future-foreground"
-      style={{ fontFamily: fontFamily.base }}
-    >
-      {children}
-    </h2>
+    <div className="overflow-hidden rounded-lg border border-future-border">
+      <table className="w-full text-sm" style={{ fontFamily: fontFamily.base }}>
+        <thead>
+          <tr className="border-b border-future-border bg-future-surface-overlay">
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Token</th>
+            <th className="px-4 py-2.5 text-right font-medium text-future-foreground-muted">px</th>
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Tailwind Class</th>
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Usage</th>
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Preview</th>
+          </tr>
+        </thead>
+        <tbody>
+          {tokens.map((token) => (
+            <tr key={token.token} className="border-b border-future-border-subtle last:border-b-0">
+              <td className="px-4 py-2">
+                <code className="text-xs text-future-accent-foreground" style={{ fontFamily: fontFamily.monospace }}>
+                  {token.token}
+                </code>
+              </td>
+              <td className="px-4 py-2 text-right">
+                <code className="text-xs tabular-nums text-future-foreground-muted" style={{ fontFamily: fontFamily.monospace }}>
+                  {token.px >= 9999 ? '9999' : token.px}
+                </code>
+              </td>
+              <td className="px-4 py-2">
+                <code className="text-xs text-future-foreground-subtle" style={{ fontFamily: fontFamily.monospace }}>
+                  {token.twClass}
+                </code>
+              </td>
+              <td className="px-4 py-2 text-future-foreground-muted">{token.usage}</td>
+              <td className="px-4 py-3">
+                <div
+                  className="h-10 w-28 border border-future-border bg-future-surface-raised"
+                  style={{ borderRadius: token.px >= 9999 ? '9999px' : `${token.px}px` }}
+                />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
   );
 }
 
@@ -40,35 +98,23 @@ export const Default: Story = {
   render: (_, { globals }) => (
     <div
       className={cn(
-        globals.futureTheme === 'light' ? 'future-light' : 'future-dark',
+        ({ light: 'future-light', 'legacy-dark': 'legacy-dark', 'legacy-light': 'legacy-light', wireframe: 'future-wireframe', vertex: 'future-vertex', canvas: 'future-canvas' } as Record<string, string>)[globals.futureTheme] ?? 'future-dark',
         'min-h-screen w-full bg-future-surface'
       )}
       style={{ fontFamily: fontFamily.base }}
     >
-      <div className="mx-auto max-w-3xl space-y-2 p-8">
-      <SectionTitle>Border Radius</SectionTitle>
+      <div className="mx-auto max-w-5xl space-y-10 p-8">
+        <div>
+          <h1 className="mb-2 text-3xl font-bold tracking-tight text-future-foreground">
+            Border Radius Tokens
+          </h1>
+          <p className="text-sm text-future-foreground-muted">
+            All border radius values for the Future design language. Most map to Tailwind radius utilities,
+            with custom values using bracket notation.
+          </p>
+        </div>
 
-      <div className="flex flex-col gap-4">
-        {Object.entries(borderRadius).map(([key, px]) => (
-          <div
-            key={key}
-            className="flex items-center gap-6 border-b border-future-border-subtle py-3"
-          >
-            <code className="w-48 shrink-0 text-sm font-medium text-future-accent-foreground-muted">
-              borderRadius.{key}
-            </code>
-            <span className="w-16 shrink-0 text-sm tabular-nums text-future-foreground-muted">
-              {px >= 9999 ? '9999px' : `${px}px`}
-            </span>
-            <div
-              className="h-12 w-48 border border-future-border bg-future-surface-raised"
-              style={{
-                borderRadius: px >= 9999 ? '9999px' : `${px}px`,
-              }}
-            />
-          </div>
-        ))}
-      </div>
+        <RadiusTable tokens={radiusTokens} />
       </div>
     </div>
   ),
diff --git a/packages/apollo-wind/src/foundation/Future/responsive.stories.tsx b/packages/apollo-wind/src/foundation/Future/responsive.stories.tsx
index f53cc57d3..3b1832ce6 100644
--- a/packages/apollo-wind/src/foundation/Future/responsive.stories.tsx
+++ b/packages/apollo-wind/src/foundation/Future/responsive.stories.tsx
@@ -1,7 +1,7 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { cn } from '@/lib';
 import { fontFamily } from './typography';
-import { breakpoint, viewport } from './responsive';
 
 // ============================================================================
 // Meta
@@ -18,22 +18,107 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // ============================================================================
-// Helpers
+// Token data
 // ============================================================================
 
-function SectionTitle({ children }: { children: React.ReactNode }) {
-  return (
-    <h2
-      className="mb-6 text-2xl font-bold tracking-tight text-future-foreground"
-      style={{ fontFamily: fontFamily.base }}
-    >
-      {children}
-    </h2>
-  );
+interface ResponsiveToken {
+  token: string;
+  px: number;
+  usage: string;
 }
 
-function Divider() {
-  return <div className="my-10 h-px bg-future-border-subtle" />;
+interface ResponsiveGroup {
+  group: string;
+  description: string;
+  tokens: ResponsiveToken[];
+}
+
+const responsiveGroups: ResponsiveGroup[] = [
+  {
+    group: 'Breakpoints',
+    description: 'Min-width values for layout behavior via matchMedia()',
+    tokens: [
+      { token: 'viewportGuard', px: 769, usage: 'Content visible at this width; below shows overlay' },
+      { token: 'panelExpand', px: 1025, usage: 'Left panel expanded at this width; below collapsed' },
+    ],
+  },
+  {
+    group: 'Viewport presets',
+    description: 'Named widths for Storybook viewport dropdown and testing',
+    tokens: [
+      { token: 'xs', px: 540, usage: 'Screen XS — mobile' },
+      { token: 's', px: 768, usage: 'Screen S — tablet' },
+      { token: 'm', px: 1024, usage: 'Screen M — small desktop' },
+      { token: 'l', px: 1440, usage: 'Screen L — standard desktop' },
+      { token: 'xl', px: 1920, usage: 'Screen XL — wide desktop' },
+    ],
+  },
+];
+
+// ============================================================================
+// Table component
+// ============================================================================
+
+function ResponsiveTable({ groups }: { groups: ResponsiveGroup[] }) {
+  const maxPx = 1920;
+
+  return (
+    <div className="overflow-hidden rounded-lg border border-future-border">
+      <table className="w-full text-sm" style={{ fontFamily: fontFamily.base }}>
+        <thead>
+          <tr className="border-b border-future-border bg-future-surface-overlay">
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Token</th>
+            <th className="px-4 py-2.5 text-right font-medium text-future-foreground-muted">px</th>
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Usage</th>
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Relative width</th>
+          </tr>
+        </thead>
+        <tbody>
+          {groups.map((group) => (
+            <React.Fragment key={group.group}>
+              <tr className="border-b border-future-border bg-future-surface-raised/50">
+                <td
+                  colSpan={4}
+                  className="px-4 py-2 text-xs font-semibold uppercase tracking-wider text-future-foreground-muted"
+                >
+                  {group.group}
+                  <span className="ml-2 font-normal normal-case tracking-normal text-future-foreground-subtle">
+                    — {group.description}
+                  </span>
+                </td>
+              </tr>
+              {group.tokens.map((token) => (
+                <tr key={token.token} className="border-b border-future-border-subtle last:border-b-0">
+                  <td className="px-4 py-2">
+                    <code className="text-xs text-future-accent-foreground" style={{ fontFamily: fontFamily.monospace }}>
+                      {token.token}
+                    </code>
+                  </td>
+                  <td className="px-4 py-2 text-right">
+                    <code className="text-xs tabular-nums text-future-foreground-muted" style={{ fontFamily: fontFamily.monospace }}>
+                      {token.px}
+                    </code>
+                  </td>
+                  <td className="px-4 py-2 text-future-foreground-muted">{token.usage}</td>
+                  <td className="px-4 py-2">
+                    <div className="flex items-center gap-2">
+                      <div
+                        className="h-4 rounded bg-future-accent/60"
+                        style={{ width: `${(token.px / maxPx) * 100}%`, minWidth: '4px' }}
+                      />
+                      <span className="shrink-0 text-[10px] tabular-nums text-future-foreground-subtle" style={{ fontFamily: fontFamily.monospace }}>
+                        {((token.px / maxPx) * 100).toFixed(0)}%
+                      </span>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </React.Fragment>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
 }
 
 // ============================================================================
@@ -44,72 +129,23 @@ export const Default: Story = {
   render: (_, { globals }) => (
     <div
       className={cn(
-        globals.futureTheme === 'light' ? 'future-light' : 'future-dark',
+        ({ light: 'future-light', 'legacy-dark': 'legacy-dark', 'legacy-light': 'legacy-light', wireframe: 'future-wireframe', vertex: 'future-vertex', canvas: 'future-canvas' } as Record<string, string>)[globals.futureTheme] ?? 'future-dark',
         'min-h-screen w-full bg-future-surface'
       )}
       style={{ fontFamily: fontFamily.base }}
     >
-      <div className="mx-auto max-w-3xl space-y-2 p-8">
-      {/* ------------------------------------------------------------------ */}
-      {/* Breakpoints */}
-      {/* ------------------------------------------------------------------ */}
-      <SectionTitle>Breakpoints</SectionTitle>
-
-      <p className="mb-6 text-sm text-future-foreground-muted">
-        Min-width values (px) used in Delegate template and ViewportGuard.
-        Use with <code className="rounded bg-future-surface-overlay px-1 text-future-accent-foreground-muted">matchMedia(&apos;(min-width: Npx)&apos;)</code>.
-      </p>
+      <div className="mx-auto max-w-5xl space-y-10 p-8">
+        <div>
+          <h1 className="mb-2 text-3xl font-bold tracking-tight text-future-foreground">
+            Responsive Tokens
+          </h1>
+          <p className="text-sm text-future-foreground-muted">
+            Breakpoints and viewport presets for the Future design language.
+            Breakpoints control layout behavior; viewport presets are named widths for testing.
+          </p>
+        </div>
 
-      <div className="flex flex-col gap-4">
-        {Object.entries(breakpoint).map(([key, px]) => (
-          <div
-            key={key}
-            className="flex items-center gap-6 border-b border-future-border-subtle py-3"
-          >
-            <code className="w-52 shrink-0 text-sm font-medium text-future-accent-foreground-muted">
-              breakpoint.{key}
-            </code>
-            <span className="w-16 shrink-0 text-sm tabular-nums text-future-foreground-muted">
-              {px}px
-            </span>
-            <span className="text-sm text-future-foreground-subtle">
-              {key === 'viewportGuard'
-                ? 'Content visible ≥ this width; below shows overlay'
-                : 'Left panel expanded ≥ this width; below collapsed'}
-            </span>
-          </div>
-        ))}
-      </div>
-
-      <Divider />
-
-      {/* ------------------------------------------------------------------ */}
-      {/* Viewport presets */}
-      {/* ------------------------------------------------------------------ */}
-      <SectionTitle>Viewport presets</SectionTitle>
-
-      <p className="mb-6 text-sm text-future-foreground-muted">
-        Named widths used in Storybook viewport dropdown (Screen XL, L, M, S, XS).
-      </p>
-
-      <div className="flex flex-col gap-4">
-        {Object.entries(viewport).map(([key, px]) => (
-          <div
-            key={key}
-            className="flex items-center gap-6 border-b border-future-border-subtle py-3"
-          >
-            <code className="w-52 shrink-0 text-sm font-medium text-future-accent-foreground-muted">
-              viewport.{key}
-            </code>
-            <span className="w-16 shrink-0 text-sm tabular-nums text-future-foreground-muted">
-              {px}px
-            </span>
-            <span className="text-sm text-future-foreground-subtle">
-              Screen {key.toUpperCase()} {px}
-            </span>
-          </div>
-        ))}
-      </div>
+        <ResponsiveTable groups={responsiveGroups} />
       </div>
     </div>
   ),
diff --git a/packages/apollo-wind/src/foundation/Future/shadows.stories.tsx b/packages/apollo-wind/src/foundation/Future/shadows.stories.tsx
index 71315d11c..988390dc6 100644
--- a/packages/apollo-wind/src/foundation/Future/shadows.stories.tsx
+++ b/packages/apollo-wind/src/foundation/Future/shadows.stories.tsx
@@ -1,7 +1,7 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { cn } from '@/lib';
 import { fontFamily } from './typography';
-import { boxShadow, boxShadowClass } from './shadows';
 
 // ============================================================================
 // Meta
@@ -18,17 +18,69 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // ============================================================================
-// Helpers
+// Token data
 // ============================================================================
 
-function SectionTitle({ children }: { children: React.ReactNode }) {
+interface ShadowToken {
+  token: string;
+  value: string;
+  twClass: string;
+  usage: string;
+}
+
+const shadowTokens: ShadowToken[] = [
+  { token: 'sm', value: '0 1px 2px 0 rgba(0,0,0,0.05)', twClass: 'shadow-sm', usage: 'Subtle lift (logo, small badges)' },
+  { token: 'rail', value: '0px 4px 16px 0px rgba(0,0,0,0.25)', twClass: 'shadow-[0px_4px_16px_0px_rgba(0,0,0,0.25)]', usage: 'Icon rail shadow (Flow panel)' },
+  { token: 'elevated', value: '0px 4px 24px 0px rgba(0,0,0,0.25)', twClass: 'shadow-[0px_4px_24px_0px_rgba(0,0,0,0.25)]', usage: 'Panels, hover cards' },
+];
+
+// ============================================================================
+// Table component
+// ============================================================================
+
+function ShadowTable({ tokens }: { tokens: ShadowToken[] }) {
   return (
-    <h2
-      className="mb-6 text-2xl font-bold tracking-tight text-future-foreground"
-      style={{ fontFamily: fontFamily.base }}
-    >
-      {children}
-    </h2>
+    <div className="overflow-hidden rounded-lg border border-future-border">
+      <table className="w-full text-sm" style={{ fontFamily: fontFamily.base }}>
+        <thead>
+          <tr className="border-b border-future-border bg-future-surface-overlay">
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Token</th>
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Value</th>
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Tailwind Class</th>
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Usage</th>
+            <th className="px-4 py-2.5 text-center font-medium text-future-foreground-muted">Preview</th>
+          </tr>
+        </thead>
+        <tbody>
+          {tokens.map((token) => (
+            <tr key={token.token} className="border-b border-future-border-subtle last:border-b-0">
+              <td className="px-4 py-3">
+                <code className="text-xs text-future-accent-foreground" style={{ fontFamily: fontFamily.monospace }}>
+                  {token.token}
+                </code>
+              </td>
+              <td className="max-w-48 px-4 py-3">
+                <code className="break-all text-[10px] text-future-foreground-subtle" style={{ fontFamily: fontFamily.monospace }}>
+                  {token.value}
+                </code>
+              </td>
+              <td className="max-w-48 px-4 py-3">
+                <code className="break-all text-[10px] text-future-foreground-subtle" style={{ fontFamily: fontFamily.monospace }}>
+                  {token.twClass}
+                </code>
+              </td>
+              <td className="px-4 py-3 text-future-foreground-muted">{token.usage}</td>
+              <td className="px-4 py-4">
+                <div
+                  className="mx-auto h-14 w-40 rounded-2xl border border-future-border-subtle bg-future-surface-raised"
+                  style={{ boxShadow: token.value }}
+                />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
   );
 }
 
@@ -40,35 +92,23 @@ export const Default: Story = {
   render: (_, { globals }) => (
     <div
       className={cn(
-        globals.futureTheme === 'light' ? 'future-light' : 'future-dark',
+        ({ light: 'future-light', 'legacy-dark': 'legacy-dark', 'legacy-light': 'legacy-light', wireframe: 'future-wireframe', vertex: 'future-vertex', canvas: 'future-canvas' } as Record<string, string>)[globals.futureTheme] ?? 'future-dark',
         'min-h-screen w-full bg-future-surface'
       )}
       style={{ fontFamily: fontFamily.base }}
     >
-      <div className="mx-auto max-w-3xl space-y-2 p-8">
-      <SectionTitle>Box Shadow</SectionTitle>
+      <div className="mx-auto max-w-6xl space-y-10 p-8">
+        <div>
+          <h1 className="mb-2 text-3xl font-bold tracking-tight text-future-foreground">
+            Shadow Tokens
+          </h1>
+          <p className="text-sm text-future-foreground-muted">
+            Box shadow values for depth and elevation in the Future design language.
+            Shadows are theme-agnostic — the same values apply in both dark and light modes.
+          </p>
+        </div>
 
-      <div className="flex flex-col gap-6">
-        {Object.entries(boxShadow).map(([key, value]) => (
-          <div
-            key={key}
-            className="flex items-center gap-6 border-b border-future-border-subtle pb-6 pt-2"
-          >
-            <div className="flex w-64 shrink-0 flex-col gap-1">
-              <code className="text-sm font-medium text-future-accent-foreground-muted">
-                boxShadow.{key}
-              </code>
-              <span className="text-xs text-future-foreground-subtle">
-                {boxShadowClass[key as keyof typeof boxShadowClass]}
-              </span>
-            </div>
-            <div
-              className="h-16 w-56 rounded-2xl border border-future-border-subtle bg-future-surface-raised"
-              style={{ boxShadow: value }}
-            />
-          </div>
-        ))}
-      </div>
+        <ShadowTable tokens={shadowTokens} />
       </div>
     </div>
   ),
diff --git a/packages/apollo-wind/src/foundation/Future/spacing.stories.tsx b/packages/apollo-wind/src/foundation/Future/spacing.stories.tsx
index ca3148572..e8b6977b9 100644
--- a/packages/apollo-wind/src/foundation/Future/spacing.stories.tsx
+++ b/packages/apollo-wind/src/foundation/Future/spacing.stories.tsx
@@ -1,7 +1,7 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { cn } from '@/lib';
 import { fontFamily } from './typography';
-import { spacing, spacingHalf, spacingArbitrary } from './spacing';
 
 // ============================================================================
 // Meta
@@ -18,22 +18,132 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // ============================================================================
-// Helpers
+// Token data
 // ============================================================================
 
-function SectionTitle({ children }: { children: React.ReactNode }) {
-  return (
-    <h2
-      className="mb-6 text-2xl font-bold tracking-tight text-future-foreground"
-      style={{ fontFamily: fontFamily.base }}
-    >
-      {children}
-    </h2>
-  );
+interface SpacingToken {
+  token: string;
+  px: number;
+  twClass: string;
+  usage: string;
 }
 
-function Divider() {
-  return <div className="my-10 h-px bg-future-border-subtle" />;
+interface SpacingGroup {
+  group: string;
+  description?: string;
+  tokens: SpacingToken[];
+}
+
+const spacingGroups: SpacingGroup[] = [
+  {
+    group: 'Scale',
+    description: 'Tailwind spacing scale (1 unit = 4px)',
+    tokens: [
+      { token: '0', px: 0, twClass: 'p-0', usage: 'Reset padding' },
+      { token: '1', px: 4, twClass: 'p-1, gap-1', usage: 'Tight padding' },
+      { token: '2', px: 8, twClass: 'p-2, gap-2', usage: 'Default gaps' },
+      { token: '3', px: 12, twClass: 'px-3, py-3', usage: 'Inline padding' },
+      { token: '4', px: 16, twClass: 'p-4, gap-4', usage: 'Content padding' },
+      { token: '5', px: 20, twClass: 'py-5', usage: 'Section padding' },
+      { token: '6', px: 24, twClass: 'gap-6, px-6', usage: 'Large gaps' },
+      { token: '7', px: 28, twClass: 'gap-7', usage: 'Chat message gap (Flow)' },
+      { token: '8', px: 32, twClass: 'gap-8', usage: 'Section gaps' },
+      { token: '10', px: 40, twClass: 'px-10', usage: 'Page horizontal padding' },
+    ],
+  },
+  {
+    group: 'Half units',
+    description: 'Fractional spacing for tighter control',
+    tokens: [
+      { token: '0.5', px: 2, twClass: 'gap-0.5', usage: 'Tight gaps' },
+      { token: '2.5', px: 10, twClass: 'pt-2.5', usage: 'Node card padding, toolbar' },
+    ],
+  },
+  {
+    group: 'Arbitrary',
+    description: 'Custom values outside the Tailwind scale, used via bracket notation',
+    tokens: [
+      { token: '15', px: 15, twClass: 'gap-[15px]', usage: 'Flow node gap' },
+      { token: '18', px: 18, twClass: 'gap-[18px], pt-[18px]', usage: 'Delegate layout gaps' },
+      { token: '20', px: 20, twClass: 'mt-20', usage: 'Delegate top margin' },
+      { token: '37', px: 37, twClass: 'gap-[37px]', usage: 'Delegate section gap' },
+      { token: '60', px: 60, twClass: 'w-[60px], h-[60px]', usage: 'Panel icon rail' },
+      { token: '78', px: 78, twClass: 'min-h-[78px]', usage: 'Delegate card min-height' },
+      { token: '124', px: 124, twClass: 'min-h-[124px]', usage: 'Delegate card min-height' },
+      { token: '360', px: 360, twClass: 'w-[360px], h-[360px]', usage: 'Flow node size' },
+      { token: '420', px: 420, twClass: 'w-[420px]', usage: 'Flow expanded panel width' },
+      { token: '680', px: 680, twClass: 'max-w-[680px]', usage: 'Properties bar max-width' },
+      { token: '800', px: 800, twClass: 'max-w-[800px]', usage: 'Delegate content max-width' },
+      { token: '930', px: 930, twClass: 'w-[930px]', usage: 'Properties expanded panel' },
+    ],
+  },
+];
+
+// ============================================================================
+// Table component
+// ============================================================================
+
+function SpacingTable({ groups }: { groups: SpacingGroup[] }) {
+  return (
+    <div className="overflow-hidden rounded-lg border border-future-border">
+      <table className="w-full text-sm" style={{ fontFamily: fontFamily.base }}>
+        <thead>
+          <tr className="border-b border-future-border bg-future-surface-overlay">
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Token</th>
+            <th className="px-4 py-2.5 text-right font-medium text-future-foreground-muted">px</th>
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Tailwind Class</th>
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Usage</th>
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Preview</th>
+          </tr>
+        </thead>
+        <tbody>
+          {groups.map((group) => (
+            <React.Fragment key={group.group}>
+              <tr className="border-b border-future-border bg-future-surface-raised/50">
+                <td
+                  colSpan={5}
+                  className="px-4 py-2 text-xs font-semibold uppercase tracking-wider text-future-foreground-muted"
+                >
+                  {group.group}
+                  {group.description && (
+                    <span className="ml-2 font-normal normal-case tracking-normal text-future-foreground-subtle">
+                      — {group.description}
+                    </span>
+                  )}
+                </td>
+              </tr>
+              {group.tokens.map((token) => (
+                <tr key={token.token} className="border-b border-future-border-subtle last:border-b-0">
+                  <td className="px-4 py-2">
+                    <code className="text-xs text-future-accent-foreground" style={{ fontFamily: fontFamily.monospace }}>
+                      {token.token}
+                    </code>
+                  </td>
+                  <td className="px-4 py-2 text-right">
+                    <code className="text-xs tabular-nums text-future-foreground-muted" style={{ fontFamily: fontFamily.monospace }}>
+                      {token.px}
+                    </code>
+                  </td>
+                  <td className="px-4 py-2">
+                    <code className="text-xs text-future-foreground-subtle" style={{ fontFamily: fontFamily.monospace }}>
+                      {token.twClass}
+                    </code>
+                  </td>
+                  <td className="px-4 py-2 text-future-foreground-muted">{token.usage}</td>
+                  <td className="px-4 py-2">
+                    <div
+                      className="h-4 rounded bg-future-accent/60"
+                      style={{ width: `${Math.min(token.px, 120)}px`, minWidth: token.px > 0 ? '2px' : '0px' }}
+                    />
+                  </td>
+                </tr>
+              ))}
+            </React.Fragment>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
 }
 
 // ============================================================================
@@ -44,100 +154,23 @@ export const Default: Story = {
   render: (_, { globals }) => (
     <div
       className={cn(
-        globals.futureTheme === 'light' ? 'future-light' : 'future-dark',
+        ({ light: 'future-light', 'legacy-dark': 'legacy-dark', 'legacy-light': 'legacy-light', wireframe: 'future-wireframe', vertex: 'future-vertex', canvas: 'future-canvas' } as Record<string, string>)[globals.futureTheme] ?? 'future-dark',
         'min-h-screen w-full bg-future-surface'
       )}
       style={{ fontFamily: fontFamily.base }}
     >
-      <div className="mx-auto max-w-3xl space-y-2 p-8">
-      {/* ------------------------------------------------------------------ */}
-      {/* Spacing scale */}
-      {/* ------------------------------------------------------------------ */}
-      <SectionTitle>Spacing (Tailwind scale)</SectionTitle>
-
-      <div className="flex flex-col gap-4">
-        {Object.entries(spacing).map(([key, px]) => (
-          <div
-            key={key}
-            className="flex items-center gap-6 border-b border-future-border-subtle py-3"
-          >
-            <code className="w-48 shrink-0 text-sm font-medium text-future-accent-foreground-muted">
-              spacing.{key}
-            </code>
-            <span className="w-16 shrink-0 text-sm tabular-nums text-future-foreground-muted">
-              {px}px
-            </span>
-            <span className="text-xs text-future-foreground-subtle">
-              p-{key}, gap-{key}, etc.
-            </span>
-            <div
-              className="rounded bg-future-surface-hover"
-              style={{ width: `${px}px`, height: '24px' }}
-            />
-          </div>
-        ))}
-      </div>
-
-      <Divider />
+      <div className="mx-auto max-w-5xl space-y-10 p-8">
+        <div>
+          <h1 className="mb-2 text-3xl font-bold tracking-tight text-future-foreground">
+            Spacing Tokens
+          </h1>
+          <p className="text-sm text-future-foreground-muted">
+            All spacing values used in Future templates. Scale tokens map to Tailwind's built-in spacing utilities.
+            Arbitrary values use bracket notation.
+          </p>
+        </div>
 
-      {/* ------------------------------------------------------------------ */}
-      {/* Half spacing */}
-      {/* ------------------------------------------------------------------ */}
-      <SectionTitle>Spacing (half units)</SectionTitle>
-
-      <div className="flex flex-col gap-4">
-        {Object.entries(spacingHalf).map(([key, px]) => (
-          <div
-            key={key}
-            className="flex items-center gap-6 border-b border-future-border-subtle py-3"
-          >
-            <code className="w-48 shrink-0 text-sm font-medium text-future-accent-foreground-muted">
-              spacingHalf.{key}
-            </code>
-            <span className="w-16 shrink-0 text-sm tabular-nums text-future-foreground-muted">
-              {px}px
-            </span>
-            <span className="text-xs text-future-foreground-subtle">gap-{key}</span>
-            <div
-              className="rounded bg-future-surface-hover"
-              style={{ width: `${px}px`, height: '24px' }}
-            />
-          </div>
-        ))}
-      </div>
-
-      <Divider />
-
-      {/* ------------------------------------------------------------------ */}
-      {/* Arbitrary spacing */}
-      {/* ------------------------------------------------------------------ */}
-      <SectionTitle>Spacing (arbitrary)</SectionTitle>
-
-      <div className="flex flex-col gap-4">
-        {Object.entries(spacingArbitrary).map(([key, px]) => (
-          <div
-            key={key}
-            className="flex items-center gap-6 border-b border-future-border-subtle py-3"
-          >
-            <code className="w-48 shrink-0 text-sm font-medium text-future-accent-foreground-muted">
-              spacingArbitrary.{key}
-            </code>
-            <span className="w-16 shrink-0 text-sm tabular-nums text-future-foreground-muted">
-              {px}px
-            </span>
-            <span className="text-xs text-future-foreground-subtle">
-              {Number(px) <= 124 ? `h-[${px}px], gap-[${px}px], etc.` : `max-w-[${px}px]`}
-            </span>
-            <div
-              className="rounded bg-future-surface-hover"
-              style={{
-                width: `${Math.min(px, 120)}px`,
-                height: '24px',
-              }}
-            />
-          </div>
-        ))}
-      </div>
+        <SpacingTable groups={spacingGroups} />
       </div>
     </div>
   ),
diff --git a/packages/apollo-wind/src/foundation/Future/strokes.stories.tsx b/packages/apollo-wind/src/foundation/Future/strokes.stories.tsx
index 03c978f94..ecf3b003b 100644
--- a/packages/apollo-wind/src/foundation/Future/strokes.stories.tsx
+++ b/packages/apollo-wind/src/foundation/Future/strokes.stories.tsx
@@ -1,11 +1,7 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { cn } from '@/lib';
 import { fontFamily } from './typography';
-import {
-  borderWidth,
-  borderColor,
-  borderColorClass,
-} from './strokes';
 
 // ============================================================================
 // Meta
@@ -22,22 +18,139 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // ============================================================================
-// Helpers
+// Token data
 // ============================================================================
 
-function SectionTitle({ children }: { children: React.ReactNode }) {
+interface StrokeWidthToken {
+  token: string;
+  px: number;
+  twClass: string;
+  usage: string;
+}
+
+interface StrokeColorToken {
+  token: string;
+  hex: string;
+  twPrimitive: string;
+  twClass: string;
+  usage: string;
+}
+
+const borderWidthTokens: StrokeWidthToken[] = [
+  { token: 'none', px: 0, twClass: 'border-0', usage: 'Reset / remove border' },
+  { token: 'default', px: 1, twClass: 'border', usage: 'Default component borders' },
+];
+
+const borderColorTokens: StrokeColorToken[] = [
+  { token: 'subtle', hex: '#27272a', twPrimitive: 'zinc-800', twClass: 'border-zinc-800', usage: 'Dividers, card borders' },
+  { token: 'default', hex: '#3f3f46', twPrimitive: 'zinc-700', twClass: 'border-zinc-700', usage: 'Default component borders' },
+  { token: 'muted', hex: '#18181b', twPrimitive: 'zinc-900', twClass: 'border-zinc-900', usage: 'Subdued container borders' },
+  { token: 'strong', hex: '#e4e4e7', twPrimitive: 'zinc-200', twClass: 'border-zinc-200', usage: 'High-contrast borders on dark' },
+  { token: 'hover', hex: '#52525b', twPrimitive: 'zinc-600', twClass: 'border-zinc-600', usage: 'Hover state borders' },
+];
+
+// ============================================================================
+// Table components
+// ============================================================================
+
+function BorderWidthTable({ tokens }: { tokens: StrokeWidthToken[] }) {
   return (
-    <h2
-      className="mb-6 text-2xl font-bold tracking-tight text-future-foreground"
-      style={{ fontFamily: fontFamily.base }}
-    >
-      {children}
-    </h2>
+    <div className="overflow-hidden rounded-lg border border-future-border">
+      <table className="w-full text-sm" style={{ fontFamily: fontFamily.base }}>
+        <thead>
+          <tr className="border-b border-future-border bg-future-surface-overlay">
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Token</th>
+            <th className="px-4 py-2.5 text-right font-medium text-future-foreground-muted">px</th>
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Tailwind Class</th>
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Usage</th>
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Preview</th>
+          </tr>
+        </thead>
+        <tbody>
+          {tokens.map((token) => (
+            <tr key={token.token} className="border-b border-future-border-subtle last:border-b-0">
+              <td className="px-4 py-2">
+                <code className="text-xs text-future-accent-foreground" style={{ fontFamily: fontFamily.monospace }}>
+                  {token.token}
+                </code>
+              </td>
+              <td className="px-4 py-2 text-right">
+                <code className="text-xs tabular-nums text-future-foreground-muted" style={{ fontFamily: fontFamily.monospace }}>
+                  {token.px}
+                </code>
+              </td>
+              <td className="px-4 py-2">
+                <code className="text-xs text-future-foreground-subtle" style={{ fontFamily: fontFamily.monospace }}>
+                  {token.twClass}
+                </code>
+              </td>
+              <td className="px-4 py-2 text-future-foreground-muted">{token.usage}</td>
+              <td className="px-4 py-3">
+                <div
+                  className="h-10 w-28 rounded-lg bg-future-surface-raised"
+                  style={{ border: `${token.px}px solid var(--color-future-border)` }}
+                />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
   );
 }
 
-function Divider() {
-  return <div className="my-10 h-px bg-future-border-subtle" />;
+function BorderColorTable({ tokens }: { tokens: StrokeColorToken[] }) {
+  return (
+    <div className="overflow-hidden rounded-lg border border-future-border">
+      <table className="w-full text-sm" style={{ fontFamily: fontFamily.base }}>
+        <thead>
+          <tr className="border-b border-future-border bg-future-surface-overlay">
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Token</th>
+            <th className="px-4 py-2.5 text-center font-medium text-future-foreground-muted">Color</th>
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Tailwind Class</th>
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Usage</th>
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Preview</th>
+          </tr>
+        </thead>
+        <tbody>
+          {tokens.map((token) => (
+            <tr key={token.token} className="border-b border-future-border-subtle last:border-b-0">
+              <td className="px-4 py-2">
+                <code className="text-xs text-future-accent-foreground" style={{ fontFamily: fontFamily.monospace }}>
+                  {token.token}
+                </code>
+              </td>
+              <td className="px-4 py-2">
+                <div className="flex items-center justify-center gap-2">
+                  <div className="h-5 w-5 shrink-0 rounded border border-future-border" style={{ backgroundColor: token.hex }} />
+                  <div className="flex flex-col">
+                    <code className="text-xs text-future-foreground-muted" style={{ fontFamily: fontFamily.monospace }}>
+                      {token.hex}
+                    </code>
+                    <code className="text-[10px] text-future-accent-foreground/70" style={{ fontFamily: fontFamily.monospace }}>
+                      {token.twPrimitive}
+                    </code>
+                  </div>
+                </div>
+              </td>
+              <td className="px-4 py-2">
+                <code className="text-xs text-future-foreground-subtle" style={{ fontFamily: fontFamily.monospace }}>
+                  {token.twClass}
+                </code>
+              </td>
+              <td className="px-4 py-2 text-future-foreground-muted">{token.usage}</td>
+              <td className="px-4 py-3">
+                <div
+                  className="h-10 w-28 rounded-lg bg-future-surface-raised"
+                  style={{ border: `2px solid ${token.hex}` }}
+                />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
 }
 
 // ============================================================================
@@ -48,70 +161,35 @@ export const Default: Story = {
   render: (_, { globals }) => (
     <div
       className={cn(
-        globals.futureTheme === 'light' ? 'future-light' : 'future-dark',
+        ({ light: 'future-light', 'legacy-dark': 'legacy-dark', 'legacy-light': 'legacy-light', wireframe: 'future-wireframe', vertex: 'future-vertex', canvas: 'future-canvas' } as Record<string, string>)[globals.futureTheme] ?? 'future-dark',
         'min-h-screen w-full bg-future-surface'
       )}
       style={{ fontFamily: fontFamily.base }}
     >
-      <div className="mx-auto max-w-3xl space-y-2 p-8">
-      {/* ------------------------------------------------------------------ */}
-      {/* Border Width */}
-      {/* ------------------------------------------------------------------ */}
-      <SectionTitle>Border Width</SectionTitle>
+      <div className="mx-auto max-w-5xl space-y-10 p-8">
+        <div>
+          <h1 className="mb-2 text-3xl font-bold tracking-tight text-future-foreground">
+            Stroke Tokens
+          </h1>
+          <p className="text-sm text-future-foreground-muted">
+            Border widths and border colors for the Future design language.
+            Border colors reference Tailwind's Zinc palette (dark theme values shown).
+          </p>
+        </div>
 
-      <div className="flex flex-col gap-4">
-        {Object.entries(borderWidth).map(([key, px]) => (
-          <div
-            key={key}
-            className="flex items-center gap-6 border-b border-future-border-subtle py-3"
-          >
-            <code className="w-48 shrink-0 text-sm font-medium text-future-accent-foreground-muted">
-              borderWidth.{key}
-            </code>
-            <span className="w-16 shrink-0 text-sm tabular-nums text-future-foreground-muted">
-              {px}px
-            </span>
-            <div
-              className="h-10 w-48 rounded-lg bg-future-surface-raised"
-              style={{
-                border: `${px}px solid var(--color-future-border)`,
-              }}
-            />
-          </div>
-        ))}
-      </div>
-
-      <Divider />
+        <div>
+          <h2 className="mb-4 text-xl font-bold tracking-tight text-future-foreground">
+            Border Width
+          </h2>
+          <BorderWidthTable tokens={borderWidthTokens} />
+        </div>
 
-      {/* ------------------------------------------------------------------ */}
-      {/* Border Color */}
-      {/* ------------------------------------------------------------------ */}
-      <SectionTitle>Border Color</SectionTitle>
-
-      <div className="flex flex-col gap-4">
-        {Object.entries(borderColor).map(([key, hex]) => (
-          <div
-            key={key}
-            className="flex items-center gap-6 border-b border-future-border-subtle py-3"
-          >
-            <code className="w-48 shrink-0 text-sm font-medium text-future-accent-foreground-muted">
-              borderColor.{key}
-            </code>
-            <span className="w-28 shrink-0 text-sm tabular-nums text-future-foreground-muted">
-              {hex}
-            </span>
-            <span className="w-36 shrink-0 text-xs text-future-foreground-subtle">
-              {borderColorClass[key as keyof typeof borderColorClass]}
-            </span>
-            <div
-              className="h-10 w-48 rounded-lg bg-future-surface-raised"
-              style={{
-                border: `2px solid ${hex}`,
-              }}
-            />
-          </div>
-        ))}
-      </div>
+        <div>
+          <h2 className="mb-4 text-xl font-bold tracking-tight text-future-foreground">
+            Border Color
+          </h2>
+          <BorderColorTable tokens={borderColorTokens} />
+        </div>
       </div>
     </div>
   ),
diff --git a/packages/apollo-wind/src/foundation/Future/theme.stories.tsx b/packages/apollo-wind/src/foundation/Future/theme.stories.tsx
index 661e73af8..e20f712fa 100644
--- a/packages/apollo-wind/src/foundation/Future/theme.stories.tsx
+++ b/packages/apollo-wind/src/foundation/Future/theme.stories.tsx
@@ -26,15 +26,19 @@ type Story = StoryObj<typeof meta>;
 type ThemeFamily = 'future' | 'legacy';
 
 /** Derive the theme family and variant from the Storybook global value */
-function parseThemeGlobal(value: string): { family: ThemeFamily; variant: 'dark' | 'light' } {
+function parseThemeGlobal(value: string): { family: ThemeFamily; variant: 'dark' | 'light'; override?: string } {
   if (value === 'legacy-dark') return { family: 'legacy', variant: 'dark' };
   if (value === 'legacy-light') return { family: 'legacy', variant: 'light' };
+  if (value === 'wireframe') return { family: 'future', variant: 'light', override: 'future-wireframe' };
+  if (value === 'vertex') return { family: 'future', variant: 'dark', override: 'future-vertex' };
+  if (value === 'canvas') return { family: 'future', variant: 'dark', override: 'future-canvas' };
   if (value === 'light') return { family: 'future', variant: 'light' };
   return { family: 'future', variant: 'dark' };
 }
 
-/** Get the CSS class for a given family + variant */
-function themeClass(family: ThemeFamily, variant: 'dark' | 'light') {
+/** Get the CSS class for a given family + variant, respecting demo theme overrides */
+function themeClass(family: ThemeFamily, variant: 'dark' | 'light', override?: string) {
+  if (override) return override;
   return family === 'legacy'
     ? variant === 'light' ? 'legacy-light' : 'legacy-dark'
     : variant === 'light' ? 'future-light' : 'future-dark';
@@ -212,32 +216,32 @@ const futureTokenGroups = [
   {
     group: 'Surface',
     tokens: [
-      { name: 'future-surface', usage: 'Page / canvas background', dark: '#09090b', light: '#ffffff' },
-      { name: 'future-surface-raised', usage: 'Cards, panels, overlays', dark: '#18181b', light: '#fafafa' },
-      { name: 'future-surface-overlay', usage: 'Inputs, tabs, icon rail', dark: '#27272a', light: '#f4f4f5' },
-      { name: 'future-surface-hover', usage: 'Hover, selected nav', dark: '#3f3f46', light: '#e4e4e7' },
+      { name: 'future-surface', usage: 'Page / canvas background', dark: '#09090b', darkTw: 'zinc-950', light: '#ffffff', lightTw: 'white' },
+      { name: 'future-surface-raised', usage: 'Cards, panels, overlays', dark: '#18181b', darkTw: 'zinc-900', light: '#fafafa', lightTw: 'zinc-50' },
+      { name: 'future-surface-overlay', usage: 'Inputs, tabs, icon rail', dark: '#27272a', darkTw: 'zinc-800', light: '#f4f4f5', lightTw: 'zinc-100' },
+      { name: 'future-surface-hover', usage: 'Hover, selected nav', dark: '#3f3f46', darkTw: 'zinc-700', light: '#e4e4e7', lightTw: 'zinc-200' },
     ],
   },
   {
     group: 'Foreground',
     tokens: [
-      { name: 'future-foreground', usage: 'Primary headings', dark: '#fafafa', light: '#09090b' },
-      { name: 'future-foreground-muted', usage: 'Nav, secondary UI', dark: '#a1a1aa', light: '#71717a' },
-      { name: 'future-foreground-subtle', usage: 'Labels, placeholders', dark: '#71717a', light: '#a1a1aa' },
+      { name: 'future-foreground', usage: 'Primary headings', dark: '#fafafa', darkTw: 'zinc-50', light: '#09090b', lightTw: 'zinc-950' },
+      { name: 'future-foreground-muted', usage: 'Nav, secondary UI', dark: '#a1a1aa', darkTw: 'zinc-400', light: '#71717a', lightTw: 'zinc-500' },
+      { name: 'future-foreground-subtle', usage: 'Labels, placeholders', dark: '#71717a', darkTw: 'zinc-500', light: '#a1a1aa', lightTw: 'zinc-400' },
     ],
   },
   {
     group: 'Accent',
     tokens: [
-      { name: 'future-accent', usage: 'Logo, primary action', dark: '#06b6d4', light: '#06b6d4' },
-      { name: 'future-accent-subtle', usage: 'Active nav, status badges', dark: '#083344', light: '#ecfeff' },
+      { name: 'future-accent', usage: 'Logo, primary buttons, active indicators', dark: '#06b6d4', darkTw: 'cyan-500', light: '#06b6d4', lightTw: 'cyan-500' },
+      { name: 'future-accent-subtle', usage: 'Selected state bg, active nav, status badges', dark: '#083344', darkTw: 'cyan-950', light: '#ecfeff', lightTw: 'cyan-50' },
     ],
   },
   {
     group: 'Border',
     tokens: [
-      { name: 'future-border', usage: 'Primary borders', dark: '#3f3f46', light: '#d4d4d8' },
-      { name: 'future-border-subtle', usage: 'Subtle dividers', dark: '#27272a', light: '#e4e4e7' },
+      { name: 'future-border', usage: 'Primary borders', dark: '#3f3f46', darkTw: 'zinc-700', light: '#d4d4d8', lightTw: 'zinc-300' },
+      { name: 'future-border-subtle', usage: 'Subtle dividers', dark: '#27272a', darkTw: 'zinc-800', light: '#e4e4e7', lightTw: 'zinc-200' },
     ],
   },
 ];
@@ -246,8 +250,8 @@ const legacyTokenGroups = [
   {
     group: 'Surface',
     tokens: [
-      { name: 'legacy-surface', usage: 'Page / canvas background', dark: '#182027', light: '#ffffff' },
-      { name: 'legacy-surface-raised', usage: 'Cards, panels', dark: '#273139', light: '#ffffff' },
+      { name: 'legacy-surface', usage: 'Page / canvas background', dark: '#182027', light: '#ffffff', lightTw: 'white' },
+      { name: 'legacy-surface-raised', usage: 'Cards, panels', dark: '#273139', light: '#ffffff', lightTw: 'white' },
       { name: 'legacy-surface-overlay', usage: 'Secondary bg, inputs', dark: '#374652', light: '#f4f5f7' },
       { name: 'legacy-surface-hover', usage: 'Hover states', dark: '#526069', light: '#e9f1fa' },
     ],
@@ -310,17 +314,31 @@ function TokenTable({ groups }: { groups: typeof futureTokenGroups }) {
                   <td className="px-4 py-2">
                     <div className="flex items-center justify-center gap-2">
                       <div className="h-5 w-5 rounded border border-border" style={{ backgroundColor: token.dark }} />
-                      <code className="text-xs text-muted-foreground" style={{ fontFamily: fontFamily.monospace }}>
-                        {token.dark}
-                      </code>
+                      <div className="flex flex-col">
+                        <code className="text-xs text-muted-foreground" style={{ fontFamily: fontFamily.monospace }}>
+                          {token.dark}
+                        </code>
+                        {'darkTw' in token && (token as { darkTw?: string }).darkTw && (
+                          <code className="text-[10px] text-primary/70" style={{ fontFamily: fontFamily.monospace }}>
+                            {(token as { darkTw: string }).darkTw}
+                          </code>
+                        )}
+                      </div>
                     </div>
                   </td>
                   <td className="px-4 py-2">
                     <div className="flex items-center justify-center gap-2">
                       <div className="h-5 w-5 rounded border border-border" style={{ backgroundColor: token.light }} />
-                      <code className="text-xs text-muted-foreground" style={{ fontFamily: fontFamily.monospace }}>
-                        {token.light}
-                      </code>
+                      <div className="flex flex-col">
+                        <code className="text-xs text-muted-foreground" style={{ fontFamily: fontFamily.monospace }}>
+                          {token.light}
+                        </code>
+                        {'lightTw' in token && (token as { lightTw?: string }).lightTw && (
+                          <code className="text-[10px] text-primary/70" style={{ fontFamily: fontFamily.monospace }}>
+                            {(token as { lightTw: string }).lightTw}
+                          </code>
+                        )}
+                      </div>
                     </div>
                   </td>
                 </tr>
@@ -358,6 +376,17 @@ function FutureTabContent() {
 
       <Divider />
 
+      {/* ── Token overview ─────────────────────────────────────────────── */}
+      <SectionTitle>Token overview</SectionTitle>
+      <SectionDescription>
+        Key semantic tokens and their resolved values per theme. See the
+        Colors page for the full token reference.
+      </SectionDescription>
+
+      <TokenTable groups={futureTokenGroups} />
+
+      <Divider />
+
       {/* ── How to use ─────────────────────────────────────────────────── */}
       <SectionTitle>How to use</SectionTitle>
       <SectionDescription>
@@ -389,17 +418,6 @@ function FutureTabContent() {
 
       <Divider />
 
-      {/* ── Token overview ─────────────────────────────────────────────── */}
-      <SectionTitle>Token overview</SectionTitle>
-      <SectionDescription>
-        Key semantic tokens and their resolved values per theme. See the
-        Colors page for the full token reference.
-      </SectionDescription>
-
-      <TokenTable groups={futureTokenGroups} />
-
-      <Divider />
-
       {/* ── Shadcn bridge ──────────────────────────────────────────────── */}
       <SectionTitle>Shadcn component compatibility</SectionTitle>
       <SectionDescription>
@@ -451,6 +469,17 @@ function LegacyTabContent() {
 
       <Divider />
 
+      {/* ── Token overview ─────────────────────────────────────────────── */}
+      <SectionTitle>Token overview</SectionTitle>
+      <SectionDescription>
+        Key semantic tokens from the Legacy (apollo-core) design system and their
+        resolved values per theme.
+      </SectionDescription>
+
+      <TokenTable groups={legacyTokenGroups} />
+
+      <Divider />
+
       {/* ── How to use ─────────────────────────────────────────────────── */}
       <SectionTitle>How to use</SectionTitle>
       <SectionDescription>
@@ -482,17 +511,6 @@ function LegacyTabContent() {
 
       <Divider />
 
-      {/* ── Token overview ─────────────────────────────────────────────── */}
-      <SectionTitle>Token overview</SectionTitle>
-      <SectionDescription>
-        Key semantic tokens from the Legacy (apollo-core) design system and their
-        resolved values per theme.
-      </SectionDescription>
-
-      <TokenTable groups={legacyTokenGroups} />
-
-      <Divider />
-
       {/* ── Shadcn bridge ──────────────────────────────────────────────── */}
       <SectionTitle>Shadcn component compatibility</SectionTitle>
       <SectionDescription>
@@ -532,10 +550,8 @@ function ThemePage({ globalTheme }: { globalTheme: string }) {
     setActiveTab(family);
   }, [family]);
 
-  const activeThemeClass = themeClass(
-    activeTab,
-    parseThemeGlobal(globalTheme).variant,
-  );
+  const parsed = parseThemeGlobal(globalTheme);
+  const activeThemeClass = themeClass(activeTab, parsed.variant, parsed.override);
 
   return (
     <div
diff --git a/packages/apollo-wind/src/foundation/Future/types.ts b/packages/apollo-wind/src/foundation/Future/types.ts
index 83dc2c976..686f1c9f6 100644
--- a/packages/apollo-wind/src/foundation/Future/types.ts
+++ b/packages/apollo-wind/src/foundation/Future/types.ts
@@ -16,5 +16,8 @@
  * - `'light'`        — Future light theme
  * - `'legacy-dark'`  — Legacy dark theme (backward-compatible)
  * - `'legacy-light'` — Legacy light theme (backward-compatible)
+ * - `'wireframe'`    — Demo: low-fidelity wireframe theme (may be removed)
+ * - `'vertex'`       — Demo: Apollo Vertex dark palette (may be removed)
+ * - `'canvas'`       — Demo: Apollo React / MUI dark palette (may be removed)
  */
-export type FutureTheme = 'dark' | 'light' | 'legacy-dark' | 'legacy-light';
+export type FutureTheme = 'dark' | 'light' | 'legacy-dark' | 'legacy-light' | 'wireframe' | 'vertex' | 'canvas';
diff --git a/packages/apollo-wind/src/foundation/Future/typography.stories.tsx b/packages/apollo-wind/src/foundation/Future/typography.stories.tsx
index ba990038f..18621a3ed 100644
--- a/packages/apollo-wind/src/foundation/Future/typography.stories.tsx
+++ b/packages/apollo-wind/src/foundation/Future/typography.stories.tsx
@@ -1,12 +1,7 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { cn } from '@/lib';
-import {
-  fontFamily,
-  fontSize,
-  fontWeight,
-  lineHeight,
-  letterSpacing,
-} from './typography';
+import { fontFamily } from './typography';
 
 // ============================================================================
 // Meta
@@ -23,55 +18,163 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // ============================================================================
-// Helpers
+// Token data
 // ============================================================================
 
-function SectionTitle({ children }: { children: React.ReactNode }) {
-  return (
-    <h2
-      className="mb-6 text-2xl font-bold tracking-tight text-future-foreground"
-      style={{ fontFamily: fontFamily.base }}
-    >
-      {children}
-    </h2>
-  );
+interface TypographyToken {
+  token: string;
+  value: string;
+  twClass: string;
+  usage?: string;
 }
 
-function TokenRow({
-  token,
-  value,
-  preview,
-  style,
-}: {
-  token: string;
-  value: string | number;
-  preview?: string;
-  style?: React.CSSProperties;
-}) {
+interface TypographyGroup {
+  group: string;
+  description?: string;
+  tokens: TypographyToken[];
+  previewStyle?: (value: string) => React.CSSProperties;
+}
+
+const typographyGroups: TypographyGroup[] = [
+  {
+    group: 'Font Family',
+    description: 'Inter is the primary typeface for all Future UI surfaces',
+    tokens: [
+      { token: 'base', value: 'Inter', twClass: 'font-sans', usage: 'All UI text' },
+      { token: 'monospace', value: 'JetBrains Mono', twClass: 'font-mono', usage: 'Code, data, technical content' },
+      { token: 'numeric', value: 'Inter (tabular)', twClass: 'font-sans tabular-nums', usage: 'Numbers, data displays' },
+    ],
+    previewStyle: (value: string) => {
+      if (value === 'JetBrains Mono') return { fontFamily: fontFamily.monospace };
+      if (value === 'Inter (tabular)') return { fontFamily: fontFamily.numeric, fontVariantNumeric: 'tabular-nums' as const };
+      return { fontFamily: fontFamily.base };
+    },
+  },
+  {
+    group: 'Font Size',
+    tokens: [
+      { token: 'xs', value: '12px', twClass: 'text-xs', usage: 'Labels, badges' },
+      { token: 'sm', value: '14px', twClass: 'text-sm', usage: 'Body text, nav items' },
+      { token: 'md', value: '15px', twClass: 'text-[15px]', usage: 'Medium body text' },
+      { token: 'base', value: '16px', twClass: 'text-base', usage: 'Default body text' },
+      { token: 'xl', value: '20px', twClass: 'text-xl', usage: 'Sub-headings' },
+      { token: '4xl', value: '40px', twClass: 'text-[40px]', usage: 'Hero headings' },
+    ],
+    previewStyle: (value: string) => ({ fontSize: value, lineHeight: '1.4', fontFamily: fontFamily.base }),
+  },
+  {
+    group: 'Font Weight',
+    tokens: [
+      { token: 'normal', value: '400', twClass: 'font-normal', usage: 'Body text' },
+      { token: 'medium', value: '500', twClass: 'font-medium', usage: 'Labels, emphasis' },
+      { token: 'semibold', value: '600', twClass: 'font-semibold', usage: 'Sub-headings' },
+      { token: 'bold', value: '700', twClass: 'font-bold', usage: 'Headings' },
+    ],
+    previewStyle: (value: string) => ({ fontWeight: Number(value), fontSize: '16px', lineHeight: '1.4', fontFamily: fontFamily.base }),
+  },
+  {
+    group: 'Line Height',
+    tokens: [
+      { token: 'snug', value: '20px', twClass: 'leading-5', usage: 'Compact lists, labels' },
+      { token: 'normal', value: '24px', twClass: 'leading-6', usage: 'Default body text' },
+      { token: 'loose', value: '36px', twClass: 'leading-9', usage: 'Large headings' },
+    ],
+    previewStyle: (value: string) => ({ fontSize: '14px', lineHeight: value, maxWidth: '280px', fontFamily: fontFamily.base }),
+  },
+  {
+    group: 'Letter Spacing',
+    tokens: [
+      { token: 'tight', value: '-0.8px', twClass: 'tracking-[-0.8px]', usage: 'Large headings (40px)' },
+      { token: 'snug', value: '-0.6px', twClass: 'tracking-[-0.6px]', usage: 'Panel tab titles' },
+      { token: 'normal', value: '-0.4px', twClass: 'tracking-[-0.4px]', usage: 'Primary text (16px)' },
+      { token: 'subtle', value: '-0.35px', twClass: 'tracking-[-0.35px]', usage: 'Subtitles, labels (14px)' },
+      { token: 'fine', value: '-0.3px', twClass: 'tracking-[-0.3px]', usage: 'Small labels (12px)' },
+    ],
+    previewStyle: (value: string) => ({ fontSize: '16px', letterSpacing: value, fontFamily: fontFamily.base }),
+  },
+];
+
+const previewTexts: Record<string, string> = {
+  'Font Family': 'The quick brown fox jumps',
+  'Font Size': 'The quick brown fox',
+  'Font Weight': 'The quick brown fox jumps',
+  'Line Height': 'The quick brown fox jumps over the lazy dog. Pack my box.',
+  'Letter Spacing': 'The quick brown fox jumps',
+};
+
+// ============================================================================
+// Table component
+// ============================================================================
+
+function TypographyTable({ groups }: { groups: TypographyGroup[] }) {
   return (
-    <div className="flex items-baseline gap-6 border-b border-future-border-subtle py-3">
-      <code className="w-48 shrink-0 text-sm font-medium text-future-accent-foreground-muted">
-        {token}
-      </code>
-      <span className="w-16 shrink-0 text-sm tabular-nums text-future-foreground-muted">
-        {typeof value === 'number' ? `${value}px` : value}
-      </span>
-      {preview && (
-        <span
-          className="text-future-foreground-secondary"
-          style={{ fontFamily: fontFamily.base, ...style }}
-        >
-          {preview}
-        </span>
-      )}
+    <div className="overflow-hidden rounded-lg border border-future-border">
+      <table className="w-full text-sm" style={{ fontFamily: fontFamily.base }}>
+        <thead>
+          <tr className="border-b border-future-border bg-future-surface-overlay">
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Token</th>
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Value</th>
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Tailwind Class</th>
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Usage</th>
+            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Preview</th>
+          </tr>
+        </thead>
+        <tbody>
+          {groups.map((group) => (
+            <React.Fragment key={group.group}>
+              <tr className="border-b border-future-border bg-future-surface-raised/50">
+                <td
+                  colSpan={5}
+                  className="px-4 py-2 text-xs font-semibold uppercase tracking-wider text-future-foreground-muted"
+                >
+                  {group.group}
+                  {group.description && (
+                    <span className="ml-2 font-normal normal-case tracking-normal text-future-foreground-subtle">
+                      — {group.description}
+                    </span>
+                  )}
+                </td>
+              </tr>
+              {group.tokens.map((token) => (
+                <tr key={`${group.group}-${token.token}`} className="border-b border-future-border-subtle last:border-b-0">
+                  <td className="px-4 py-2">
+                    <code className="text-xs text-future-accent-foreground" style={{ fontFamily: fontFamily.monospace }}>
+                      {token.token}
+                    </code>
+                  </td>
+                  <td className="px-4 py-2">
+                    <code className="text-xs tabular-nums text-future-foreground-muted" style={{ fontFamily: fontFamily.monospace }}>
+                      {token.value}
+                    </code>
+                  </td>
+                  <td className="px-4 py-2">
+                    <code className="text-xs text-future-foreground-subtle" style={{ fontFamily: fontFamily.monospace }}>
+                      {token.twClass}
+                    </code>
+                  </td>
+                  <td className="px-4 py-2 text-future-foreground-muted">{token.usage}</td>
+                  <td className="px-4 py-2">
+                    <span
+                      className="text-future-foreground-secondary"
+                      style={group.previewStyle?.(token.value)}
+                    >
+                      {group.group === 'Font Family' && token.value === 'JetBrains Mono'
+                        ? 'const x = 42;'
+                        : group.group === 'Font Family' && token.value === 'Inter (tabular)'
+                          ? '0123456789'
+                          : previewTexts[group.group]}
+                    </span>
+                  </td>
+                </tr>
+              ))}
+            </React.Fragment>
+          ))}
+        </tbody>
+      </table>
     </div>
   );
 }
 
-function Divider() {
-  return <div className="my-10 h-px bg-future-border-subtle" />;
-}
-
 // ============================================================================
 // Story
 // ============================================================================
@@ -80,116 +183,23 @@ export const Default: Story = {
   render: (_, { globals }) => (
     <div
       className={cn(
-        globals.futureTheme === 'light' ? 'future-light' : 'future-dark',
+        ({ light: 'future-light', 'legacy-dark': 'legacy-dark', 'legacy-light': 'legacy-light', wireframe: 'future-wireframe', vertex: 'future-vertex', canvas: 'future-canvas' } as Record<string, string>)[globals.futureTheme] ?? 'future-dark',
         'min-h-screen w-full bg-future-surface'
       )}
       style={{ fontFamily: fontFamily.base }}
     >
-      <div className="mx-auto max-w-3xl space-y-2 p-8">
-      {/* ------------------------------------------------------------------ */}
-      {/* Font Family */}
-      {/* ------------------------------------------------------------------ */}
-      <SectionTitle>Font Family</SectionTitle>
-      <p className="mb-6 text-sm text-future-foreground-muted">
-        Inter is the primary typeface for all Future UI surfaces.
-      </p>
-
-      <TokenRow
-        token="fontFamily.base"
-        value="Inter"
-        preview="The quick brown fox jumps over the lazy dog"
-        style={{ fontFamily: fontFamily.base }}
-      />
-      <TokenRow
-        token="fontFamily.monospace"
-        value="JetBrains Mono"
-        preview="const x = 42;"
-        style={{ fontFamily: fontFamily.monospace }}
-      />
-      <TokenRow
-        token="fontFamily.numeric"
-        value="Inter"
-        preview="0123456789"
-        style={{
-          fontFamily: fontFamily.numeric,
-          fontVariantNumeric: 'tabular-nums',
-        }}
-      />
-
-      <Divider />
-
-      {/* ------------------------------------------------------------------ */}
-      {/* Font Size */}
-      {/* ------------------------------------------------------------------ */}
-      <SectionTitle>Font Size</SectionTitle>
-
-      {Object.entries(fontSize).map(([key, px]) => (
-        <TokenRow
-          key={key}
-          token={`fontSize.${key}`}
-          value={px}
-          preview="The quick brown fox"
-          style={{ fontSize: `${px}px`, lineHeight: '1.4' }}
-        />
-      ))}
-
-      <Divider />
-
-      {/* ------------------------------------------------------------------ */}
-      {/* Font Weight */}
-      {/* ------------------------------------------------------------------ */}
-      <SectionTitle>Font Weight</SectionTitle>
-
-      {Object.entries(fontWeight).map(([key, weight]) => (
-        <TokenRow
-          key={key}
-          token={`fontWeight.${key}`}
-          value={weight}
-          preview="The quick brown fox jumps"
-          style={{ fontWeight: weight, fontSize: '16px', lineHeight: '1.4' }}
-        />
-      ))}
-
-      <Divider />
-
-      {/* ------------------------------------------------------------------ */}
-      {/* Line Height */}
-      {/* ------------------------------------------------------------------ */}
-      <SectionTitle>Line Height</SectionTitle>
-
-      {Object.entries(lineHeight).map(([key, px]) => (
-        <TokenRow
-          key={key}
-          token={`lineHeight.${key}`}
-          value={px}
-          preview="The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs."
-          style={{
-            fontSize: '14px',
-            lineHeight: `${px}px`,
-            maxWidth: '320px',
-          }}
-        />
-      ))}
-
-      <Divider />
-
-      {/* ------------------------------------------------------------------ */}
-      {/* Letter Spacing */}
-      {/* ------------------------------------------------------------------ */}
-      <SectionTitle>Letter Spacing</SectionTitle>
-
-      {Object.entries(letterSpacing).map(([key, value]) => (
-        <TokenRow
-          key={key}
-          token={`letterSpacing.${key}`}
-          value={value}
-          preview="The quick brown fox jumps over the lazy dog"
-          style={{
-            fontSize: '16px',
-            letterSpacing: value,
-          }}
-        />
-      ))}
+      <div className="mx-auto max-w-6xl space-y-10 p-8">
+        <div>
+          <h1 className="mb-2 text-3xl font-bold tracking-tight text-future-foreground">
+            Typography Tokens
+          </h1>
+          <p className="text-sm text-future-foreground-muted">
+            All typography values for the Future design language. Inter is the primary typeface.
+            Values map to Tailwind utilities or bracket notation for custom sizes.
+          </p>
+        </div>
+
+        <TypographyTable groups={typographyGroups} />
       </div>
     </div>
   ),
diff --git a/packages/apollo-wind/src/foundation/Legacy/colors.stories.tsx b/packages/apollo-wind/src/foundation/Legacy/colors.stories.tsx
index 85ed5eab6..ee6eb52fe 100644
--- a/packages/apollo-wind/src/foundation/Legacy/colors.stories.tsx
+++ b/packages/apollo-wind/src/foundation/Legacy/colors.stories.tsx
@@ -3,7 +3,7 @@ import { Badge } from '@/components/ui/badge';
 import { Card, CardContent } from '@/components/ui/card';
 
 const meta = {
-  title: 'Theme/Legacy/Colors',
+  title: 'Theme/Colors',
   parameters: {
     layout: 'fullscreen',
   },
diff --git a/packages/apollo-wind/src/foundation/Legacy/icons.stories.tsx b/packages/apollo-wind/src/foundation/Legacy/icons.stories.tsx
index c5a80e70a..91f58d983 100644
--- a/packages/apollo-wind/src/foundation/Legacy/icons.stories.tsx
+++ b/packages/apollo-wind/src/foundation/Legacy/icons.stories.tsx
@@ -281,7 +281,7 @@ const ICON_CATEGORIES = [
 const TOTAL_ICONS = ICON_CATEGORIES.reduce((sum, cat) => sum + cat.icons.length, 0);
 
 const meta = {
-  title: 'Theme/Legacy/Icons',
+  title: 'Theme/Icons',
   parameters: {
     layout: 'fullscreen',
   },
diff --git a/packages/apollo-wind/src/foundation/Legacy/spacing.stories.tsx b/packages/apollo-wind/src/foundation/Legacy/spacing.stories.tsx
index 0fb3f0b39..d62fb2fe1 100644
--- a/packages/apollo-wind/src/foundation/Legacy/spacing.stories.tsx
+++ b/packages/apollo-wind/src/foundation/Legacy/spacing.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Badge } from '@/components/ui/badge';
 
 const meta = {
-  title: 'Theme/Legacy/Spacing',
+  title: 'Theme/Spacing',
   parameters: {
     layout: 'fullscreen',
   },
diff --git a/packages/apollo-wind/src/foundation/Legacy/typography.stories.tsx b/packages/apollo-wind/src/foundation/Legacy/typography.stories.tsx
index c37be3a38..0c3206c37 100644
--- a/packages/apollo-wind/src/foundation/Legacy/typography.stories.tsx
+++ b/packages/apollo-wind/src/foundation/Legacy/typography.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Badge } from '@/components/ui/badge';
 
 const meta = {
-  title: 'Theme/Legacy/Typography',
+  title: 'Theme/Typography',
   parameters: {
     layout: 'fullscreen',
   },
diff --git a/packages/apollo-wind/src/getting-started/getting-started.stories.tsx b/packages/apollo-wind/src/getting-started/getting-started.stories.tsx
index 1cc040cad..b84b71943 100644
--- a/packages/apollo-wind/src/getting-started/getting-started.stories.tsx
+++ b/packages/apollo-wind/src/getting-started/getting-started.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import * as React from 'react';
 import { fontFamily } from '@/foundation/Future/typography';
 import { cn } from '@/lib';
 
@@ -12,55 +13,249 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-  render: (_, { globals }) => (
+function resolveThemeClass(value: string) {
+  if (value === 'legacy-dark') return 'legacy-dark';
+  if (value === 'legacy-light') return 'legacy-light';
+  if (value === 'wireframe') return 'future-wireframe';
+  if (value === 'vertex') return 'future-vertex';
+  if (value === 'canvas') return 'future-canvas';
+  if (value === 'light') return 'future-light';
+  return 'future-dark';
+}
+
+// ============================================================================
+// Shared components
+// ============================================================================
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return <h2 className="mb-2 text-2xl font-bold tracking-tight text-foreground">{children}</h2>;
+}
+
+function SectionDescription({ children }: { children: React.ReactNode }) {
+  return <p className="mb-6 text-base leading-7 text-muted-foreground">{children}</p>;
+}
+
+function Divider() {
+  return <div className="my-10 h-px bg-border" />;
+}
+
+function InlineCode({ children }: { children: React.ReactNode }) {
+  return (
+    <code className="rounded bg-muted px-1.5 py-0.5 text-sm font-medium text-foreground">
+      {children}
+    </code>
+  );
+}
+
+function CodeBlock({ children, label }: { children: string; label?: string }) {
+  const [copied, setCopied] = React.useState(false);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(children);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="relative overflow-hidden rounded-lg border border-border bg-muted/50">
+      {label && (
+        <div className="flex items-center justify-between border-b border-border px-4 py-2">
+          <span className="text-xs font-medium text-muted-foreground">{label}</span>
+          <button
+            onClick={handleCopy}
+            className="cursor-pointer rounded px-2 py-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
+          >
+            {copied ? 'Copied!' : 'Copy'}
+          </button>
+        </div>
+      )}
+      {!label && (
+        <button
+          onClick={handleCopy}
+          className="absolute top-2 right-2 cursor-pointer rounded px-2 py-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
+        >
+          {copied ? 'Copied!' : 'Copy'}
+        </button>
+      )}
+      <pre className="overflow-x-auto p-4 text-sm leading-6 text-foreground">
+        <code style={{ fontFamily: fontFamily.monospace }}>{children}</code>
+      </pre>
+    </div>
+  );
+}
+
+// ============================================================================
+// Package card
+// ============================================================================
+
+const installTabs = ['Add to existing project', 'Run locally'] as const;
+type InstallTab = (typeof installTabs)[number];
+
+function PackageCard({
+  name,
+  packageName,
+  description,
+  bestFor,
+  consumerInstall,
+  localDevCommands,
+}: {
+  name: string;
+  packageName: string;
+  description: string;
+  bestFor: string;
+  consumerInstall: string;
+  localDevCommands: string;
+}) {
+  const [activeTab, setActiveTab] = React.useState<InstallTab>('Add to existing project');
+
+  return (
+    <div className="rounded-xl border border-border bg-card p-6">
+      <div className="mb-1 flex items-baseline gap-3">
+        <h3 className="text-lg font-semibold text-foreground">{name}</h3>
+        <InlineCode>{packageName}</InlineCode>
+      </div>
+      <p className="mb-4 text-sm leading-6 text-muted-foreground">{description}</p>
+
+      <p className="mb-5 text-sm leading-6 text-muted-foreground">
+        <span className="font-medium text-foreground">Best for: </span>
+        {bestFor}
+      </p>
+
+      {/* Install path tabs */}
+      <div className="mb-4 inline-flex rounded-lg border border-border bg-muted/50 p-1">
+        {installTabs.map((tab) => (
+          <button
+            key={tab}
+            className={cn(
+              'cursor-pointer rounded-md px-3 py-1.5 text-sm font-medium transition-colors',
+              activeTab === tab
+                ? 'bg-background text-foreground shadow-sm'
+                : 'text-muted-foreground hover:text-foreground'
+            )}
+            onClick={() => setActiveTab(tab)}
+          >
+            {tab}
+          </button>
+        ))}
+      </div>
+
+      {activeTab === 'Add to existing project' && (
+        <div>
+          <CodeBlock>{consumerInstall}</CodeBlock>
+        </div>
+      )}
+
+      {activeTab === 'Run locally' && (
+        <div>
+          <p className="mb-2 text-sm text-muted-foreground">
+            After cloning the{' '}
+            <a
+              href="https://github.com/UiPath/apollo-ui"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium text-primary underline"
+            >
+              apollo-ui
+            </a>
+            {' '}monorepo and running <InlineCode>pnpm install</InlineCode>:
+          </p>
+          <CodeBlock>{localDevCommands}</CodeBlock>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ============================================================================
+// Page
+// ============================================================================
+
+function GettingStartedPage({ globalTheme }: { globalTheme: string }) {
+  return (
     <div
       className={cn(
-        globals.futureTheme === 'light' ? 'future-light' : 'future-dark',
-        'min-h-screen w-full bg-future-surface'
+        resolveThemeClass(globalTheme),
+        'min-h-screen w-full bg-background text-foreground'
       )}
       style={{ fontFamily: fontFamily.base }}
     >
-      <div className="mx-auto max-w-3xl p-8">
-        <h1 className="mb-4 text-[2rem] font-bold text-future-foreground">
+      <div className="mx-auto max-w-3xl space-y-2 p-8">
+        {/* Header */}
+        <h1 className="text-[2rem] font-bold tracking-tight text-foreground">
           UiPath Design System
         </h1>
-        <p className="mb-6 text-base leading-7 text-future-foreground-muted">
+        <p className="text-base leading-7 text-muted-foreground">
           Apollo v.4 is UiPath's open-source design system for building consistent user experiences
           across all UiPath products.
         </p>
 
-        <div className="my-8 h-px bg-future-border-subtle" />
-
-        <div className="mb-8">
-          <span className="font-semibold text-future-foreground">GitHub repository</span>
-          <br />
+        <div className="pt-2">
           <a
             href="https://github.com/UiPath/apollo-ui"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-future-accent-foreground underline"
+            className="text-sm font-medium text-primary underline"
           >
-            https://github.com/UiPath/apollo-ui
+            github.com/UiPath/apollo-ui
           </a>
         </div>
 
-        <div className="my-8 h-px bg-future-border-subtle" />
+        <Divider />
 
-        <h2 className="mb-4 mt-8 text-2xl font-bold text-future-foreground">Getting Started</h2>
+        {/* Packages overview */}
+        <div>
+          <SectionTitle>Choose your package</SectionTitle>
+          <SectionDescription>
+            Apollo is split into focused packages. Pick the one that matches what you're building.
+          </SectionDescription>
+        </div>
 
-        <h3 className="mb-3 mt-6 text-xl font-bold text-future-foreground">Prerequisites</h3>
-        <ul className="mb-6 ml-6 list-disc leading-7 text-future-foreground-muted">
-          <li>Node.js &gt;= 22</li>
-          <li>pnpm &gt;= 10</li>
-        </ul>
+        <div className="space-y-6">
+          {/* Apollo Wind */}
+          <PackageCard
+            name="Apollo Wind"
+            packageName="@uipath/apollo-wind"
+            description="The modern UI component library for rapid prototyping and new product interfaces. Built with Tailwind CSS and shadcn/ui — includes 60+ components, page templates, and full theming support."
+            bestFor="Prototyping, new product UIs, and any project using Tailwind CSS."
+            consumerInstall="npm install @uipath/apollo-wind"
+            localDevCommands={`pnpm build
+pnpm storybook:wind`}
+          />
 
-        <h3 className="mb-3 mt-6 text-xl font-bold text-future-foreground">Installation</h3>
-        <pre
-          className="mb-6 overflow-auto rounded-lg border border-future-border-subtle bg-future-surface-raised p-4 text-sm leading-6 text-future-foreground-secondary"
-          style={{ fontFamily: fontFamily.monospace }}
-        >
-          <code>{`# Install pnpm if you haven't already
+          {/* Apollo React */}
+          <PackageCard
+            name="Apollo React"
+            packageName="@uipath/apollo-react"
+            description="The component library for UiPath workflows and automation products. Built on Material UI with Apollo theming — provides the components and patterns used across workflow-based experiences."
+            bestFor="Workflow interfaces, automation products, and existing Material UI projects."
+            consumerInstall="npm install @uipath/apollo-react"
+            localDevCommands={`pnpm build
+pnpm storybook:all`}
+          />
+
+          {/* Apollo Core */}
+          <PackageCard
+            name="Apollo Core"
+            packageName="@uipath/apollo-core"
+            description="The shared foundation — design tokens, icons, fonts, and CSS variables. Both Apollo Wind and Apollo React depend on this package. Install it directly only if you need tokens without a component library."
+            bestFor="Custom builds that need design tokens, icons, or fonts without a full component library."
+            consumerInstall="npm install @uipath/apollo-core"
+            localDevCommands="pnpm build"
+          />
+        </div>
+
+        <Divider />
+
+        {/* Monorepo development */}
+        <div>
+          <SectionTitle>Contributing to Apollo</SectionTitle>
+          <SectionDescription>
+            If you're contributing to the design system itself, clone the monorepo and run locally.
+          </SectionDescription>
+        </div>
+
+        <CodeBlock label="Setup">
+          {`# Install pnpm if you haven't already
 npm install -g pnpm
 
 # Clone the repository
@@ -71,15 +266,16 @@ cd apollo-ui
 pnpm install
 
 # Build all packages
-pnpm build`}</code>
-        </pre>
+pnpm build
 
-        <h3 className="mb-3 mt-6 text-xl font-bold text-future-foreground">Development</h3>
-        <pre
-          className="mb-6 overflow-auto rounded-lg border border-future-border-subtle bg-future-surface-raised p-4 text-sm leading-6 text-future-foreground-secondary"
-          style={{ fontFamily: fontFamily.monospace }}
-        >
-          <code>{`# Run all packages in development mode
+# Start the Apollo Wind Storybook
+pnpm storybook:wind`}
+        </CodeBlock>
+
+        <div className="mt-6" />
+
+        <CodeBlock label="Development">
+          {`# Run all packages in development mode
 pnpm dev
 
 # Run Storybook
@@ -89,24 +285,13 @@ pnpm storybook
 pnpm lint
 
 # Run tests
-pnpm test
-
-# Run visual regression tests
-pnpm test:visual`}</code>
-        </pre>
-
-        <h3 className="mb-3 mt-6 text-xl font-bold text-future-foreground">Building</h3>
-        <pre
-          className="mb-6 overflow-auto rounded-lg border border-future-border-subtle bg-future-surface-raised p-4 text-sm leading-6 text-future-foreground-secondary"
-          style={{ fontFamily: fontFamily.monospace }}
-        >
-          <code>{`# Build all packages
-pnpm build
-
-# Build Storybook
-pnpm storybook:build`}</code>
-        </pre>
+pnpm test`}
+        </CodeBlock>
       </div>
     </div>
-  ),
+  );
+}
+
+export const Default: Story = {
+  render: (_, { globals }) => <GettingStartedPage globalTheme={globals.futureTheme || 'dark'} />,
 };
diff --git a/packages/apollo-wind/src/getting-started/prototyping.stories.tsx b/packages/apollo-wind/src/getting-started/prototyping.stories.tsx
index 83439ca09..00ae97b86 100644
--- a/packages/apollo-wind/src/getting-started/prototyping.stories.tsx
+++ b/packages/apollo-wind/src/getting-started/prototyping.stories.tsx
@@ -24,6 +24,9 @@ type Story = StoryObj<typeof meta>;
 function resolveThemeClass(value: string) {
   if (value === 'legacy-dark') return 'legacy-dark';
   if (value === 'legacy-light') return 'legacy-light';
+  if (value === 'wireframe') return 'future-wireframe';
+  if (value === 'vertex') return 'future-vertex';
+  if (value === 'canvas') return 'future-canvas';
   if (value === 'light') return 'future-light';
   return 'future-dark';
 }
@@ -123,6 +126,40 @@ function StepItem({
 // Tab: Overview
 // ============================================================================
 
+const AI_CONTEXT_PREVIEW = `# Apollo Wind — AI Context
+
+## Stack
+- React 19, TypeScript, Tailwind CSS 4
+- shadcn/ui components (Radix UI primitives)
+- Lucide React icons, Storybook 10
+
+## Import Paths
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { cn } from '@/lib';
+
+## Theming
+Apply theme class to root: future-dark | future-light | legacy-dark | legacy-light
+Semantic tokens: bg-future-surface, text-future-foreground, border-future-border
+Bridge tokens (cross-theme): bg-background, bg-card, text-foreground, text-muted-foreground
+
+## Components (with inline usage examples)
+Button, Card, Table, DataTable, Badge, Input, Select, Tabs, Dialog, Sheet...
+60+ shadcn components + 16 custom Apollo components + forms system
+
+## Page Templates
+MaestroTemplate — dashboard with panels & grid
+AdminTemplate — sidebar, header, toolbar & data tables
+FlowTemplate — workflow editor with canvas
+DelegateTemplate — agent chat with nav panel
+
+## Common Patterns
+Card grids, section headers, sidebar layouts, stats rows...
+
+## Rules
+DO use semantic tokens, shadcn components, lucide-react icons
+DO NOT use raw colors, bg-black/bg-white, or external UI libraries`;
+
 function OverviewTab() {
   return (
     <div className="space-y-8">
@@ -136,7 +173,6 @@ function OverviewTab() {
         </SectionDescription>
       </div>
 
-      {/* Tech Stack code window */}
       <CodeBlock label="Tech Stack">
         {`UI Framework
   React 19
@@ -159,7 +195,51 @@ Documentation
 
       <Divider />
 
-      {/* What's NOT in scope */}
+      {/* Quick Start */}
+      <div>
+        <h3 className="mb-3 text-lg font-semibold text-foreground">Quick Start</h3>
+        <SectionDescription>
+          The fastest path to a working prototype. Choose your tool:
+        </SectionDescription>
+
+        <div className="space-y-4">
+          <div className="rounded-lg border border-border bg-card p-4">
+            <h4 className="mb-2 text-sm font-semibold text-foreground">Cursor</h4>
+            <p className="mb-3 text-sm text-muted-foreground">
+              Type <InlineCode>@apollo-ai-context.md</InlineCode> in chat and describe what you
+              want to build. That's it.
+            </p>
+          </div>
+
+          <div className="rounded-lg border border-border bg-card p-4">
+            <h4 className="mb-2 text-sm font-semibold text-foreground">Claude Code</h4>
+            <p className="mb-3 text-sm text-muted-foreground">
+              Reference the context file and describe what you want:
+            </p>
+            <CodeBlock>
+              {`Read packages/apollo-wind/apollo-ai-context.md then build a settings page
+with a sidebar navigation and form section. Use the future-dark theme.`}
+            </CodeBlock>
+          </div>
+        </div>
+      </div>
+
+      <Divider />
+
+      {/* AI Context File */}
+      <div>
+        <h3 className="mb-3 text-lg font-semibold text-foreground">The AI Context File</h3>
+        <SectionDescription>
+          A portable markdown file at{' '}
+          <InlineCode>packages/apollo-wind/apollo-ai-context.md</InlineCode> containing the full
+          Apollo design system reference — stack, components, tokens, patterns, and rules. Both the
+          Use Claude and Use Cursor tabs reference this file.
+        </SectionDescription>
+        <CodeBlock label="apollo-ai-context.md (preview)">{AI_CONTEXT_PREVIEW}</CodeBlock>
+      </div>
+
+      <Divider />
+
       <div>
         <h3 className="mb-3 text-lg font-semibold text-foreground">What's not in scope</h3>
         <SectionDescription>
@@ -175,21 +255,446 @@ Documentation
           <li>Web Components (ap-chat, ap-data-grid)</li>
         </ul>
       </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// Tab: Use Playground
+// ============================================================================
+
+function UsePlaygroundTab() {
+  return (
+    <div className="space-y-8">
+      <div>
+        <SectionTitle>Use Playground</SectionTitle>
+        <SectionDescription>
+          This playground enables UiPath team members to quickly set up a prototype app in just a few
+          clicks. Its purpose is to help less technical users launch a functional prototype using our
+          design system's default styles and templates.
+        </SectionDescription>
+      </div>
+
+      {/* How to use */}
+      <div>
+        <h3 className="mb-3 text-lg font-semibold text-foreground">How to use</h3>
+        <SectionDescription>
+          Get the playground running locally in three commands, then create prototypes from the UI.
+        </SectionDescription>
+
+        <InfoCallout>
+          Repository:{' '}
+          <a
+            href="https://github.com/UiPath/apollo-prototype-playground"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="font-medium text-primary underline"
+          >
+            github.com/UiPath/apollo-prototype-playground
+          </a>
+        </InfoCallout>
+      </div>
+
+      <div className="space-y-4">
+        <StepItem step={1} title="Clone the repository">
+          <CodeBlock>
+            {`git clone https://github.com/UiPath/apollo-prototype-playground.git
+cd apollo-prototype-playground`}
+          </CodeBlock>
+        </StepItem>
+
+        <StepItem step={2} title="Install dependencies">
+          <CodeBlock>{`npm install`}</CodeBlock>
+        </StepItem>
+
+        <StepItem step={3} title="Start the dev server">
+          <CodeBlock>{`npm run dev`}</CodeBlock>
+        </StepItem>
+
+        <StepItem step={4} title="Create a prototype">
+          <ul className="space-y-2">
+            <li>
+              Click the <span className="font-medium text-foreground">Create Prototype</span> button
+            </li>
+            <li>Enter a name for your prototype</li>
+            <li>
+              Choose a starter template (<span className="font-medium text-foreground">Blank</span>,{' '}
+              <span className="font-medium text-foreground">Admin</span>,{' '}
+              <span className="font-medium text-foreground">Delegate</span>,{' '}
+              <span className="font-medium text-foreground">Flow</span>, or{' '}
+              <span className="font-medium text-foreground">Maestro</span>)
+            </li>
+            <li>Select your folder from the team member list</li>
+            <li>
+              Optionally toggle{' '}
+              <span className="font-medium text-foreground">Shareable URL</span> to generate a link
+            </li>
+            <li>
+              Click <span className="font-medium text-foreground">Create</span> — your prototype
+              opens automatically
+            </li>
+          </ul>
+        </StepItem>
+
+        <StepItem step={5} title="Customize your prototype">
+          <p>
+            Your prototype is scaffolded at{' '}
+            <InlineCode>
+              src/prototypes/&#123;your-folder&#125;/&#123;prototype-name&#125;/index.tsx
+            </InlineCode>{' '}
+            using the design system's default styles and templates. From here you can:
+          </p>
+          <ul className="mt-3 space-y-2">
+            <li>
+              <span className="font-medium text-foreground">Modify the layout</span> — rearrange or
+              replace sections from the starter template
+            </li>
+            <li>
+              <span className="font-medium text-foreground">Add components</span> — import any
+              component from <InlineCode>@uipath/apollo-wind</InlineCode>
+            </li>
+            <li>
+              <span className="font-medium text-foreground">Use AI tools</span> — open the file in
+              your editor and use Claude, Copilot, or any AI assistant to iterate on the design
+            </li>
+            <li>
+              <span className="font-medium text-foreground">Hot reload</span> — changes appear
+              instantly in the browser via Vite's dev server
+            </li>
+          </ul>
+        </StepItem>
+      </div>
 
       <Divider />
 
       <InfoCallout>
-        Build tools, testing frameworks, and release pipelines run behind the scenes and don't
-        affect how you design or prompt AI. You don't need to know them to prototype.
+        The starter templates give you a working foundation with proper theming, responsive layout,
+        and UiPath design system components already wired up. No configuration needed — just pick a
+        template and start building.
       </InfoCallout>
     </div>
   );
 }
 
 // ============================================================================
-// Tab: Use Cases
+// Tab: Use Figma
 // ============================================================================
 
+function UseFigmaTab() {
+  return (
+    <div className="space-y-8">
+      <div>
+        <SectionTitle>Use Figma</SectionTitle>
+        <SectionDescription>
+          Designers own the Figma source files — AI tools turn those designs into functional code
+          prototypes. Connect the Figma MCP server so the AI can read your designs directly.
+        </SectionDescription>
+      </div>
+
+      <div className="space-y-4">
+        <StepItem step={1} title="Start from the Apollo Figma library">
+          <p>
+            Use the shared design system file as your starting point.
+          </p>
+          <div className="mt-3 space-y-2 text-sm leading-6">
+            <div>
+              <span className="font-medium text-foreground">Legacy products: </span>
+              <a
+                href="https://www.figma.com/design/l1I5dUQFDxqPYo322wEpXx/Apollo--Components-?node-id=504-2&p=f&t=O0aRtoGuv83eV7od-0"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-primary underline"
+              >
+                Figma System
+              </a>
+            </div>
+            <div>
+              <span className="font-medium text-foreground">Future products: </span>
+              <a
+                href="https://www.figma.com/design/b6UcBsDS2GUEk5Xdxk4OEl/Style-template?node-id=847-5153&p=f&t=O0aRtoGuv83eV7od-0"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-primary underline"
+              >
+                Figma System
+              </a>
+            </div>
+          </div>
+        </StepItem>
+
+        <StepItem step={2} title="Connect the Figma MCP server">
+          <p>This lets the AI read your Figma files directly — no screenshots or exports needed.</p>
+
+          <div className="mt-3 space-y-3">
+            <div>
+              <span className="font-medium text-foreground">Cursor</span> — Add to{' '}
+              <InlineCode>.cursor/mcp.json</InlineCode>:
+            </div>
+            <CodeBlock>
+              {`{
+  "mcpServers": {
+    "figma": {
+      "command": "npx",
+      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR_KEY"]
+    }
+  }
+}`}
+            </CodeBlock>
+
+            <div>
+              <span className="font-medium text-foreground">Claude Code</span> — Run:
+            </div>
+            <CodeBlock>
+              {`claude mcp add figma -- npx -y figma-developer-mcp --figma-api-key=YOUR_KEY`}
+            </CodeBlock>
+          </div>
+        </StepItem>
+
+        <StepItem step={3} title="Copy the Figma URL and prompt">
+          <p>
+            Copy the URL for the specific frame you want to prototype. Include context the AI
+            can't see: interactions, states, theme, and which Apollo components map to the design.
+          </p>
+        </StepItem>
+      </div>
+
+      <div className="mt-6">
+        <CodeBlock label="Example prompt">
+          {`Here is my Figma frame for a workflow editor: [paste Figma URL]
+
+Build a functional prototype using the Apollo design system in future-dark theme.
+The layout should have a left navigation rail, a canvas area with workflow
+nodes, and a properties panel on the right.
+
+Interactions:
+- Clicking a node expands the properties panel
+- The navigation rail has icons for different tool modes
+- Bottom toolbar includes zoom controls
+
+Use the Apollo AI context file for component and token references.`}
+        </CodeBlock>
+      </div>
+
+      <Divider />
+
+      <InfoCallout>
+        See the <span className="font-medium text-foreground">Use Claude</span> or{' '}
+        <span className="font-medium text-foreground">Use Cursor</span> tabs for full tool
+        setup including the Storybook MCP server and AI context file.
+      </InfoCallout>
+    </div>
+  );
+}
+
+// ============================================================================
+// Tab: Use Claude
+// ============================================================================
+
+function UseClaudeTab() {
+  return (
+    <div className="space-y-8">
+      <div>
+        <SectionTitle>Use Claude Code</SectionTitle>
+        <SectionDescription>
+          Complete setup for prototyping with Claude Code. Three things to connect: the AI context
+          file, the Storybook MCP server, and optionally the Figma MCP server.
+        </SectionDescription>
+      </div>
+
+      {/* 1. AI Context */}
+      <div className="space-y-4">
+        <StepItem step={1} title="Reference the AI context file">
+          <p>
+            Claude Code can read project files directly. Reference the context file in your
+            prompt so Claude knows the design system:
+          </p>
+          <CodeBlock>
+            {`Read packages/apollo-wind/apollo-ai-context.md then create a dashboard page
+with a sidebar, header, and a DataTable showing process status.
+Use the future-dark theme.`}
+          </CodeBlock>
+          <p>
+            For repeated use, add a note to your project's{' '}
+            <InlineCode>CLAUDE.md</InlineCode> so Claude always knows where to find it:
+          </p>
+          <CodeBlock label="CLAUDE.md addition">
+            {`## Prototyping
+For UI prototyping, read packages/apollo-wind/apollo-ai-context.md
+for the full component library, tokens, and theming reference.`}
+          </CodeBlock>
+        </StepItem>
+
+        {/* 2. Storybook MCP */}
+        <StepItem step={2} title="Connect the Storybook MCP server">
+          <p>
+            Gives Claude live access to component metadata, props, and usage examples.
+          </p>
+          <CodeBlock label="Start Storybook first">
+            {`cd packages/apollo-wind && pnpm storybook`}
+          </CodeBlock>
+          <CodeBlock label="Then add the MCP server">
+            {`claude mcp add apollo-storybook --transport http http://localhost:6006/mcp --scope project`}
+          </CodeBlock>
+          <p>
+            Verify with <InlineCode>/mcp list</InlineCode> — you should see{' '}
+            <InlineCode>apollo-storybook</InlineCode> in the output.
+          </p>
+        </StepItem>
+
+        {/* 3. Figma MCP */}
+        <StepItem step={3} title="Connect Figma">
+          <p>
+            Add the Figma MCP so Claude can read your design files directly:
+          </p>
+          <CodeBlock>
+            {`claude mcp add figma -- npx -y figma-developer-mcp --figma-api-key=YOUR_KEY`}
+          </CodeBlock>
+        </StepItem>
+      </div>
+
+      <Divider />
+
+      {/* Tips */}
+      <div>
+        <h3 className="mb-3 text-lg font-semibold text-foreground">Tips for Claude Code</h3>
+        <ul className="space-y-3 text-sm leading-6 text-muted-foreground">
+          <li>
+            <span className="font-medium text-foreground">Use the slash command.</span> Run{' '}
+            <InlineCode>/mcp list</InlineCode> to verify all MCP servers are connected before
+            prompting.
+          </li>
+          <li>
+            <span className="font-medium text-foreground">Let Claude read the file.</span> Say
+            "read apollo-ai-context.md" rather than pasting it — Claude Code can access files
+            directly and this keeps your prompt clean.
+          </li>
+          <li>
+            <span className="font-medium text-foreground">Iterate in conversation.</span> Claude
+            Code keeps full context, so you can refine incrementally: "now add a filter bar to
+            the table" or "switch the theme to future-light."
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// Tab: Use Cursor
+// ============================================================================
+
+function UseCursorTab() {
+  return (
+    <div className="space-y-8">
+      <div>
+        <SectionTitle>Use Cursor</SectionTitle>
+        <SectionDescription>
+          Complete setup for prototyping with Cursor. Three things to connect: the AI context
+          file, the Storybook MCP server, and optionally the Figma MCP server.
+        </SectionDescription>
+      </div>
+
+      {/* 1. AI Context */}
+      <div className="space-y-4">
+        <StepItem step={1} title="Reference the AI context file">
+          <p>
+            The fastest way — type <InlineCode>@apollo-ai-context.md</InlineCode> in any Cursor
+            chat to attach the design system reference. The AI immediately knows all components,
+            tokens, and rules.
+          </p>
+          <p>
+            For automatic inclusion on every chat, add it as a Cursor rule:
+          </p>
+          <CodeBlock label=".cursor/rules/apollo-prototyping.md">
+            {`---
+description: Apollo design system context for prototyping
+globs: ["packages/apollo-wind/**"]
+---
+@packages/apollo-wind/apollo-ai-context.md`}
+          </CodeBlock>
+        </StepItem>
+
+        {/* 2. Storybook MCP */}
+        <StepItem step={2} title="Connect the Storybook MCP server">
+          <p>
+            Gives the agent live access to component metadata, props, and usage examples.
+          </p>
+          <CodeBlock label="Start Storybook first">
+            {`cd packages/apollo-wind && pnpm storybook`}
+          </CodeBlock>
+          <p>
+            Then add this to your project's MCP config:
+          </p>
+          <CodeBlock label=".cursor/mcp.json">
+            {`{
+  "mcpServers": {
+    "apollo-storybook": {
+      "url": "http://localhost:6006/mcp"
+    }
+  }
+}`}
+          </CodeBlock>
+          <p>
+            Verify in Cursor Settings → MCP — you should see{' '}
+            <InlineCode>apollo-storybook</InlineCode> with a green status.
+          </p>
+        </StepItem>
+
+        {/* 3. Figma MCP */}
+        <StepItem step={3} title="Connect Figma">
+          <p>
+            Add the Figma MCP server:
+          </p>
+          <CodeBlock label=".cursor/mcp.json">
+            {`{
+  "mcpServers": {
+    "apollo-storybook": {
+      "url": "http://localhost:6006/mcp"
+    },
+    "figma": {
+      "command": "npx",
+      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR_KEY"]
+    }
+  }
+}`}
+          </CodeBlock>
+        </StepItem>
+      </div>
+
+      <Divider />
+
+      {/* Tips */}
+      <div>
+        <h3 className="mb-3 text-lg font-semibold text-foreground">Tips for Cursor</h3>
+        <ul className="space-y-3 text-sm leading-6 text-muted-foreground">
+          <li>
+            <span className="font-medium text-foreground">Use @ referencing.</span> Type{' '}
+            <InlineCode>@</InlineCode> to attach files, folders, or docs directly in chat. Use{' '}
+            <InlineCode>@apollo-ai-context.md</InlineCode> for the design system context.
+          </li>
+          <li>
+            <span className="font-medium text-foreground">Agent mode for multi-step work.</span>{' '}
+            Use Agent mode when building a full page — it can create files, run commands, and
+            iterate autonomously. Use Ask mode for quick questions about tokens or components.
+          </li>
+          <li>
+            <span className="font-medium text-foreground">Reference existing templates.</span> Say
+            "look at the Admin Landing story for reference" and the agent will read the existing
+            code to match patterns and conventions.
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// Tab: Resources (Use Cases + Best Practices)
+// ============================================================================
+
+const resourceSubTabs = ['Best Practices', 'Use Cases', "What's Not in Scope"] as const;
+type ResourceSubTab = (typeof resourceSubTabs)[number];
+
 function PersonaCard({
   role,
   icon,
@@ -238,11 +743,10 @@ function PersonaCard({
   );
 }
 
-function UseCasesTab() {
+function UseCasesContent() {
   return (
     <div className="space-y-8">
       <div>
-        <SectionTitle>Use Cases</SectionTitle>
         <SectionDescription>
           Apollo is built for anyone who needs to create product experiences quickly — whether
           you're pitching a customer, validating a design, or building a proof of concept. Here's
@@ -263,7 +767,7 @@ function UseCasesTab() {
           role="Designer"
           icon="🎨"
           scenario="A developer is building complex automation workflows and needs to understand how the platform handles scale. They want a Flow demo showing how the system manages 100+ workflow steps with branching logic."
-          solution="Start from the Flow template with the Properties Simple panel. Use FlowNode components to populate the canvas, the FlowCanvasToolbar for mode switching, and the FlowPanel for the left navigation rail. Leverage the PropertiesExpanded panel for detailed node configuration."
+          solution="Start from the Flow template with the Properties Simple panel. Use FlowNode components to populate the canvas, the FlowCanvasToolbar for mode switching, and the FlowPanel for the left navigation rail. Leverage the Flow Properties panel (expanded) for detailed node configuration."
           outcome="A high-fidelity flow editor prototype that demonstrates scale and interaction patterns. Feed the AI context file to Cursor or Claude and iterate on the layout in real time — every component is already themed and accessible."
         />
 
@@ -287,234 +791,35 @@ function UseCasesTab() {
   );
 }
 
-// ============================================================================
-// Tab: Use Figma
-// ============================================================================
-
-function UseFigmaTab() {
-  return (
-    <div className="space-y-8">
-      <div>
-        <SectionTitle>Use Figma</SectionTitle>
-        <SectionDescription>
-          Our design team maintains the Apollo design system in Figma — the single source of truth
-          for all design assets, components, and tokens. Access is currently limited to internal
-          team members.
-        </SectionDescription>
-      </div>
-    </div>
-  );
-}
-
-// ============================================================================
-// Tab: Use AI
-// ============================================================================
-
-// The AI context file content rendered as a copyable block
-const AI_CONTEXT_PREVIEW = `# Apollo Wind — AI Context
-
-## Stack
-- React 19, TypeScript, Tailwind CSS 4
-- shadcn/ui components (Radix UI primitives)
-- Lucide React icons, Storybook 10
-
-## Import Paths
-import { Button } from '@/components/ui/button';
-import { Search, Plus } from 'lucide-react';
-import { cn } from '@/lib';
-
-## Theming
-Apply theme class to root: future-dark | future-light | legacy-dark | legacy-light
-Use semantic tokens: bg-future-surface, text-future-foreground, border-future-border
-DO NOT use raw colors (bg-zinc-900, bg-white, etc.)
-
-## Available Components
-Accordion, Alert, AlertDialog, Avatar, Badge, Breadcrumb, Button, Calendar,
-Card, Checkbox, Collapsible, Combobox, Command, ContextMenu, DataTable,
-DatePicker, Dialog, Drawer, DropdownMenu, EmptyState, FileUpload, HoverCard,
-Input, Label, MultiSelect, Pagination, Popover,
-Progress, RadioGroup, Resizable, ScrollArea, Search, Select, Separator,
-Sheet, Skeleton, Slider, Spinner, StatsCard, Stepper, Switch, Table, Tabs,
-Textarea, Toggle, ToggleGroup, Tooltip, ViewportGuard`;
-
-function UseAITab() {
-  return (
-    <div className="space-y-8">
-      <div>
-        <SectionTitle>Use AI</SectionTitle>
-        <SectionDescription>
-          Two approaches are available for AI-assisted prototyping. Use one or both depending on
-          your workflow — the static context file works everywhere, while the MCP server provides a
-          live connection for code editors.
-        </SectionDescription>
-      </div>
-
-      {/* Approach 1: AI Context File */}
-      <div>
-        <h3 className="mb-3 text-lg font-semibold text-foreground">Approach 1: AI Context File</h3>
-        <SectionDescription>
-          A portable markdown file containing the full Apollo design system reference — stack,
-          components, tokens, patterns, and rules. Copy it into any AI tool to get consistent,
-          design-system-aligned output.
-        </SectionDescription>
-
-        <div className="space-y-4">
-          <StepItem step={1} title="Grab the context file">
-            <p>
-              The file lives at <InlineCode>packages/apollo-wind/apollo-ai-context.md</InlineCode>{' '}
-              in the repository. It contains everything an AI needs: the stack, every available
-              component, token naming conventions, import patterns, and explicit rules about what to
-              use and what to avoid.
-            </p>
-          </StepItem>
-
-          <StepItem step={2} title="Feed it to your AI tool">
-            <p>Use it as context in any of these workflows:</p>
-            <ul className="mt-2 list-disc space-y-1 pl-5">
-              <li>
-                <span className="font-medium text-foreground">Cursor</span> — Add it as a project
-                rule in <InlineCode>.cursor/rules/</InlineCode>
-              </li>
-              <li>
-                <span className="font-medium text-foreground">Claude / ChatGPT</span> — Paste or
-                attach the file at the start of your conversation
-              </li>
-              <li>
-                <span className="font-medium text-foreground">Any AI coding tool</span> — Include it
-                as system context or a reference file
-              </li>
-            </ul>
-          </StepItem>
-
-          <StepItem step={3} title="Start prompting">
-            <p>
-              The AI will now use Apollo components and tokens instead of generating generic code.
-              Example prompt:
-            </p>
-            <CodeBlock>
-              {`Create a settings page with a sidebar navigation and a form section.
-Use a Card for each settings group with Input and Select fields.
-Include a header with the MaestroHeader component.
-Use the future-dark theme.`}
-            </CodeBlock>
-          </StepItem>
-        </div>
-      </div>
-
-      <Divider />
-
-      {/* Preview */}
-      <div>
-        <h3 className="mb-3 text-lg font-semibold text-foreground">Context file preview</h3>
-        <SectionDescription>
-          Here's a condensed preview. The full file includes detailed component tables, custom
-          component references, and a complete code example.
-        </SectionDescription>
-        <CodeBlock label="apollo-ai-context.md (preview)">{AI_CONTEXT_PREVIEW}</CodeBlock>
-      </div>
-
-      <Divider />
-
-      {/* Approach 2: Storybook MCP */}
-      <div>
-        <h3 className="mb-3 text-lg font-semibold text-foreground">
-          Approach 2: Storybook MCP Server
-        </h3>
-        <SectionDescription>
-          For code-editor workflows (Cursor, Claude Code, VS Code), the Storybook MCP server gives
-          AI agents a live, structured API to query component metadata directly — no copy-pasting
-          needed. The agent gets validated props, usage examples, and component documentation
-          automatically.
-        </SectionDescription>
-
-        <div className="space-y-4">
-          <StepItem step={1} title="Start Storybook">
-            <CodeBlock>
-              {`cd packages/apollo-wind
-pnpm storybook`}
-            </CodeBlock>
-            <p>
-              The MCP endpoint is available at <InlineCode>http://localhost:6006/mcp</InlineCode>{' '}
-              when Storybook is running.
-            </p>
-          </StepItem>
-
-          <StepItem step={2} title="Connect your AI tool">
-            <p>
-              <span className="font-medium text-foreground">Cursor</span> — Add this to your
-              project's <InlineCode>.cursor/mcp.json</InlineCode>:
-            </p>
-            <CodeBlock label=".cursor/mcp.json">
-              {`{
-  "mcpServers": {
-    "apollo-storybook": {
-      "url": "http://localhost:6006/mcp"
-    }
-  }
-}`}
-            </CodeBlock>
-
-            <p className="mt-3">
-              <span className="font-medium text-foreground">Claude Code</span> — Run this command:
-            </p>
-            <CodeBlock>
-              {`claude mcp add apollo-storybook --transport http http://localhost:6006/mcp --scope project`}
-            </CodeBlock>
-          </StepItem>
-
-          <StepItem step={3} title="Verify the connection">
-            <p>
-              In Cursor, check the MCP panel in settings. In Claude Code, run{' '}
-              <InlineCode>/mcp list</InlineCode> to confirm the server is connected. The AI agent
-              will now automatically query Apollo's component APIs when generating UI code.
-            </p>
-          </StepItem>
-        </div>
-      </div>
-
-      <Divider />
-
-      <InfoCallout>
-        <span className="font-medium text-foreground">Which approach should I use?</span> If you're
-        a designer working in ChatGPT or Claude, use the context file (Approach 1). If you're in a
-        code editor like Cursor, use both — the MCP server for live component data plus the context
-        file for token and theming rules.
-      </InfoCallout>
-    </div>
-  );
-}
-
-// ============================================================================
-// Tab: Best Practices
-// ============================================================================
-
-function BestPracticesTab() {
+function BestPracticesContent() {
   return (
     <div className="space-y-8">
       <div>
-        <SectionTitle>Best Practices</SectionTitle>
         <SectionDescription>
           Guidelines for getting the most out of AI-assisted prototyping with Apollo.
         </SectionDescription>
       </div>
 
-      {/* Setting up */}
       <div>
-        <h3 className="mb-3 text-lg font-semibold text-foreground">Setting Up a Prototype</h3>
+        <h3 className="mb-3 text-lg font-semibold text-foreground">Setting Up an AI Prototype</h3>
         <ul className="space-y-3 text-sm leading-6 text-muted-foreground">
           <li>
-            <span className="font-medium text-foreground">Start from an existing template.</span>{' '}
+            <span className="font-medium text-foreground">Start from an existing template.</span>
+            <br />
             The Maestro, Admin, Delegate, and Flow templates provide production-ready layouts. Fork
             one instead of building from scratch.
           </li>
           <li>
-            <span className="font-medium text-foreground">Always include the AI context.</span>{' '}
+            <span className="font-medium text-foreground">Always include the AI context.</span>
+            <br />
             Whether you use the markdown file or MCP, always give the AI context about Apollo before
             prompting. Without it, you'll get generic React output that doesn't match the design
             system.
           </li>
           <li>
-            <span className="font-medium text-foreground">Set the theme class first.</span> Apply{' '}
+            <span className="font-medium text-foreground">Set the theme class first.</span>
+            <br />
+            Apply{' '}
             <InlineCode>future-dark</InlineCode> or <InlineCode>future-light</InlineCode> to your
             root element before adding any content. This ensures all tokens resolve correctly from
             the start.
@@ -524,28 +829,31 @@ function BestPracticesTab() {
 
       <Divider />
 
-      {/* Prompting */}
       <div>
         <h3 className="mb-3 text-lg font-semibold text-foreground">Writing Effective Prompts</h3>
         <ul className="space-y-3 text-sm leading-6 text-muted-foreground">
           <li>
-            <span className="font-medium text-foreground">Be specific about components.</span> Say
-            "use a shadcn DataTable with sorting and pagination" instead of "add a table." Name the
-            exact components you want.
+            <span className="font-medium text-foreground">Be specific about components.</span>
+            <br />
+            Say "use a shadcn DataTable with sorting and pagination" instead of "add a table." Name
+            the exact components you want.
           </li>
           <li>
-            <span className="font-medium text-foreground">Reference tokens, not colors.</span> Say
-            "use bg-future-surface-raised for the card background" instead of "make the background
-            dark gray." This ensures theme consistency.
+            <span className="font-medium text-foreground">Reference tokens, not colors.</span>
+            <br />
+            Say "use bg-future-surface-raised for the card background" instead of "make the
+            background dark gray." This ensures theme consistency.
           </li>
           <li>
-            <span className="font-medium text-foreground">Iterate in small steps.</span> Build the
-            layout first, then add interactions, then refine styling. Large prompts with many
-            requirements produce worse results than focused, sequential ones.
+            <span className="font-medium text-foreground">Iterate in small steps.</span>
+            <br />
+            Build the layout first, then add interactions, then refine styling. Large prompts with
+            many requirements produce worse results than focused, sequential ones.
           </li>
           <li>
-            <span className="font-medium text-foreground">Include layout context.</span> Mention
-            "fullscreen layout", "sidebar + main content", or "tabbed interface" so the AI
+            <span className="font-medium text-foreground">Include layout context.</span>
+            <br />
+            Mention "fullscreen layout", "sidebar + main content", or "tabbed interface" so the AI
             structures the page correctly from the start.
           </li>
         </ul>
@@ -553,28 +861,31 @@ function BestPracticesTab() {
 
       <Divider />
 
-      {/* Common mistakes */}
       <div>
         <h3 className="mb-3 text-lg font-semibold text-foreground">Common Mistakes to Avoid</h3>
         <ul className="space-y-3 text-sm leading-6 text-muted-foreground">
           <li>
-            <span className="font-medium text-foreground">Don't use raw Tailwind colors.</span>{' '}
+            <span className="font-medium text-foreground">Don't use raw Tailwind colors.</span>
+            <br />
             Avoid <InlineCode>bg-zinc-900</InlineCode>, <InlineCode>text-gray-400</InlineCode>, etc.
             Always use semantic tokens (<InlineCode>bg-future-surface</InlineCode>,{' '}
             <InlineCode>text-future-foreground-muted</InlineCode>).
           </li>
           <li>
-            <span className="font-medium text-foreground">Don't install extra UI libraries.</span>{' '}
+            <span className="font-medium text-foreground">Don't install extra UI libraries.</span>
+            <br />
             Everything you need is already available in apollo-wind. Adding Material UI, Chakra, or
             other libraries will conflict with the design system.
           </li>
           <li>
-            <span className="font-medium text-foreground">Don't skip the theme wrapper.</span>{' '}
+            <span className="font-medium text-foreground">Don't skip the theme wrapper.</span>
+            <br />
             Components using <InlineCode>future-*</InlineCode> tokens won't render correctly without
             a theme class on a parent element.
           </li>
           <li>
-            <span className="font-medium text-foreground">Don't hardcode light/dark values.</span>{' '}
+            <span className="font-medium text-foreground">Don't hardcode light/dark values.</span>
+            <br />
             The theme system handles this automatically. If you're writing{' '}
             <InlineCode>bg-white</InlineCode> or <InlineCode>bg-black</InlineCode>, you're bypassing
             the design system.
@@ -584,7 +895,6 @@ function BestPracticesTab() {
 
       <Divider />
 
-      {/* Review checklist */}
       <div>
         <h3 className="mb-3 text-lg font-semibold text-foreground">Prototype Review Checklist</h3>
         <SectionDescription>Before sharing a prototype, verify these items:</SectionDescription>
@@ -623,11 +933,159 @@ function BestPracticesTab() {
   );
 }
 
+function WhatNotInScopeContent() {
+  return (
+    <div className="space-y-8">
+      <div>
+        <SectionDescription>
+          Understanding what's not directly supported and why, plus recommendations for working with
+          alternative tools and systems.
+        </SectionDescription>
+      </div>
+
+      {/* Separate Systems */}
+      <div>
+        <h3 className="mb-3 text-lg font-semibold text-foreground">Separate Systems</h3>
+        <SectionDescription>
+          The following are separate systems and not part of this prototyping workflow:
+        </SectionDescription>
+        <ul className="space-y-2 text-sm leading-6 text-muted-foreground">
+          <li>
+            <InlineCode>apollo-react</InlineCode> — Material UI component library
+          </li>
+          <li>
+            <InlineCode>apollo-angular</InlineCode> — Angular Material component library
+          </li>
+          <li>Web Components (ap-chat, ap-data-grid)</li>
+        </ul>
+      </div>
+
+      <Divider />
+
+      {/* v0 and Lovable */}
+      <div>
+        <h3 className="mb-3 text-lg font-semibold text-foreground">v0 and Lovable</h3>
+        <SectionDescription>
+          These web-based AI builders operate differently from code-editor tools like Cursor and Claude
+          Code. Here's why they're not directly supported and how to get the most out of them.
+        </SectionDescription>
+
+        <div className="mt-4 space-y-4">
+          <div>
+            <h4 className="mb-2 text-base font-semibold text-foreground">Why they're not directly supported</h4>
+            <ul className="space-y-2 text-sm leading-6 text-muted-foreground">
+              <li>
+                <span className="font-medium text-foreground">No MCP support.</span>
+                <br />
+                Neither tool can connect to the Storybook MCP or Figma MCP servers. They're
+                sandboxed web applications without access to your local codebase or MCP
+                infrastructure.
+              </li>
+              <li>
+                <span className="font-medium text-foreground">No local file access.</span>
+                <br />
+                They can't read files from your repository or use{' '}
+                <InlineCode>@</InlineCode> references. Context must be manually pasted.
+              </li>
+              <li>
+                <span className="font-medium text-foreground">Different component environments.</span>
+                <br />
+                Both tools use their own shadcn/ui setup. Import paths, custom Apollo components
+                (like <InlineCode>ChatComposer</InlineCode>,{' '}
+                <InlineCode>FlowNode</InlineCode>), and our custom design tokens won't exist in
+                their generated code.
+              </li>
+              <li>
+                <span className="font-medium text-foreground">No theme CSS.</span>
+                <br />
+                Our <InlineCode>future-dark</InlineCode> and{' '}
+                <InlineCode>future-light</InlineCode> CSS variables won't be available. Output will
+                use generic Tailwind colors unless manually adjusted.
+              </li>
+            </ul>
+          </div>
+
+          <div>
+            <h4 className="mb-2 text-base font-semibold text-foreground">How to use them effectively</h4>
+            <ul className="space-y-3 text-sm leading-6 text-muted-foreground">
+              <li>
+                <span className="font-medium text-foreground">Paste the AI context file.</span>
+                <br />
+                Copy the contents of{' '}
+                <InlineCode>packages/apollo-wind/apollo-ai-context.md</InlineCode> and paste it as
+                your system prompt or initial context. This gives the AI knowledge of Apollo
+                components, tokens, and patterns.
+              </li>
+              <li>
+                <span className="font-medium text-foreground">Specify theme values explicitly.</span>
+                <br />
+                Since CSS variables won't resolve, include the actual color values in your prompt.
+                For example: "Use dark gray backgrounds (#09090b for surface, #18181b for raised
+                surfaces) and cyan accents (#06b6d4) to match Apollo's future-dark theme."
+              </li>
+              <li>
+                <span className="font-medium text-foreground">Treat output as a starting point.</span>
+                <br />
+                The generated code will need adjustment when brought into the Apollo Wind repository.
+                Plan to replace generic Tailwind classes with semantic tokens, update import paths,
+                and add custom Apollo components where needed.
+              </li>
+              <li>
+                <span className="font-medium text-foreground">Use for rapid ideation.</span>
+                <br />
+                These tools excel at quick visual prototypes and layout exploration. Use them to
+                validate concepts, then refine the code in Cursor or Claude Code with full Apollo
+                integration.
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ResourcesTab() {
+  const [activeSubTab, setActiveSubTab] = React.useState<ResourceSubTab>('Best Practices');
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <SectionTitle>Resources</SectionTitle>
+
+        {/* Pill toggle */}
+        <div className="mt-4 inline-flex rounded-lg border border-border bg-muted/50 p-1">
+          {resourceSubTabs.map((sub) => (
+            <button
+              key={sub}
+              className={cn(
+                'cursor-pointer rounded-md px-4 py-1.5 text-sm font-medium transition-colors',
+                activeSubTab === sub
+                  ? 'bg-background text-foreground shadow-sm'
+                  : 'text-muted-foreground hover:text-foreground'
+              )}
+              onClick={() => setActiveSubTab(sub)}
+            >
+              {sub}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div>
+        {activeSubTab === 'Best Practices' && <BestPracticesContent />}
+        {activeSubTab === 'Use Cases' && <UseCasesContent />}
+        {activeSubTab === "What's Not in Scope" && <WhatNotInScopeContent />}
+      </div>
+    </div>
+  );
+}
+
 // ============================================================================
 // Prototyping Page
 // ============================================================================
 
-const tabs = ['Overview', 'Use Cases', 'Use Figma', 'Use AI', 'Best Practices'] as const;
+const tabs = ['Overview', 'Use Playground', 'Use Figma', 'Use Claude', 'Use Cursor', 'Resources'] as const;
 type TabId = (typeof tabs)[number];
 
 function PrototypingPage({ globalTheme }: { globalTheme: string }) {
@@ -672,10 +1130,11 @@ function PrototypingPage({ globalTheme }: { globalTheme: string }) {
         {/* Tab content */}
         <div className="pt-6">
           {activeTab === 'Overview' && <OverviewTab />}
-          {activeTab === 'Use Cases' && <UseCasesTab />}
+          {activeTab === 'Use Playground' && <UsePlaygroundTab />}
           {activeTab === 'Use Figma' && <UseFigmaTab />}
-          {activeTab === 'Use AI' && <UseAITab />}
-          {activeTab === 'Best Practices' && <BestPracticesTab />}
+          {activeTab === 'Use Claude' && <UseClaudeTab />}
+          {activeTab === 'Use Cursor' && <UseCursorTab />}
+          {activeTab === 'Resources' && <ResourcesTab />}
         </div>
       </div>
     </div>
diff --git a/packages/apollo-wind/src/index.ts b/packages/apollo-wind/src/index.ts
index 5d6bf36fe..de4f6299c 100644
--- a/packages/apollo-wind/src/index.ts
+++ b/packages/apollo-wind/src/index.ts
@@ -146,6 +146,16 @@ export type { SpinnerProps } from './components/ui/spinner';
 export { EmptyState } from './components/ui/empty-state';
 export type { EmptyStateProps } from './components/ui/empty-state';
 
+export { default as TreeView } from './components/ui/tree-view';
+export type {
+  TreeViewItem,
+  TreeViewItemAction,
+  TreeViewIconMap,
+  TreeViewMenuItem,
+  TreeViewProps,
+  TreeViewSelectionMode,
+} from './components/ui/tree-view';
+
 // -----------------------------------------------------------------------------
 // Feedback & Overlay Components
 // -----------------------------------------------------------------------------
diff --git a/packages/apollo-wind/src/styles/tailwind.consumer.css b/packages/apollo-wind/src/styles/tailwind.consumer.css
index 6fd37c0e8..36a473e91 100644
--- a/packages/apollo-wind/src/styles/tailwind.consumer.css
+++ b/packages/apollo-wind/src/styles/tailwind.consumer.css
@@ -13,6 +13,10 @@
 @import "tailwindcss";
 @import "@uipath/apollo-core/tokens/css/theme-variables.css";
 
+:root {
+  --radius: 0.75rem; /* 12px — base border-radius for buttons and UI elements */
+}
+
 /**
  * shadcn/ui color mappings
  * Maps Apollo Design System tokens to shadcn expected variable names.
diff --git a/packages/apollo-wind/src/templates/Admin/admin.stories.tsx b/packages/apollo-wind/src/templates/Admin/admin.stories.tsx
index 613ee84a5..36e08d9f5 100644
--- a/packages/apollo-wind/src/templates/Admin/admin.stories.tsx
+++ b/packages/apollo-wind/src/templates/Admin/admin.stories.tsx
@@ -6,26 +6,19 @@ import {
   Code,
   Download,
   Filter,
+  Folder,
   Globe,
   HelpCircle,
   MoreHorizontal,
+  Pencil,
   Plus,
   RefreshCw,
-  Search,
+  Trash2,
   Upload,
   Users,
 } from 'lucide-react';
 import * as React from 'react';
-import { MaestroHeader } from '@/components/custom/global-header';
 import { Badge } from '@/components/ui/badge';
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '@/components/ui/breadcrumb';
 import {
   DataTable,
   DataTableColumnHeader,
@@ -58,7 +51,10 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from '@/components/ui/pagination';
-import { ScrollArea } from '@/components/ui/scroll-area';
+import TreeView, {
+  type TreeViewIconMap,
+  type TreeViewItem,
+} from '@/components/ui/tree-view';
 import {
   Select,
   SelectContent,
@@ -66,234 +62,19 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { ViewportGuard } from '@/components/ui/viewport-guard';
-import { fontFamily } from '@/foundation/Future/typography';
+import { Button } from '@/components/ui/button';
 import { cn } from '@/lib';
+import {
+  AdminPageHeader,
+  AdminSidebar,
+  AdminTemplate,
+  AdminToolbar,
+} from './template-admin';
 
 // ============================================================================
-// Layout primitives (themed with Future tokens)
+// Demo-only helpers (not exported from template)
 // ============================================================================
 
-function AdminLayout({
-  className,
-  theme = 'dark',
-  children,
-}: {
-  className?: string;
-  theme?: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <ViewportGuard
-      minWidth={769}
-      message="This view is not available at this screen size. Please use a larger viewport."
-    >
-      <div
-        className={cn(
-          theme === 'legacy-dark'
-            ? 'legacy-dark'
-            : theme === 'legacy-light'
-              ? 'legacy-light'
-              : theme === 'light'
-                ? 'future-light'
-                : 'future-dark',
-          'flex h-screen w-full flex-col overflow-hidden bg-future-surface text-foreground',
-          className
-        )}
-        style={{ fontFamily: fontFamily.base }}
-      >
-        {children}
-      </div>
-    </ViewportGuard>
-  );
-}
-
-function AdminContent({ children }: { children: React.ReactNode }) {
-  return <div className="flex flex-1 overflow-hidden">{children}</div>;
-}
-
-function AdminSidebar({ children, width = 260 }: { children: React.ReactNode; width?: number }) {
-  return (
-    <div
-      className="flex flex-col border-r border-future-border-subtle bg-future-surface"
-      style={{ width }}
-    >
-      {children}
-    </div>
-  );
-}
-
-function AdminSidebarHeader({
-  title,
-  onSearch,
-  onAdd,
-}: {
-  title: string;
-  onSearch?: () => void;
-  onAdd?: () => void;
-}) {
-  return (
-    <div className="flex items-center justify-between border-b border-future-border-subtle px-4 py-3">
-      <span className="text-sm font-medium text-future-foreground">{title}</span>
-      <div className="flex items-center gap-1">
-        {onSearch && (
-          <button
-            className="flex h-7 w-7 items-center justify-center rounded-md text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground"
-            onClick={onSearch}
-          >
-            <Search className="h-4 w-4" />
-          </button>
-        )}
-        {onAdd && (
-          <button
-            className="flex h-7 w-7 items-center justify-center rounded-md text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground"
-            onClick={onAdd}
-          >
-            <Plus className="h-4 w-4" />
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}
-
-interface AdminNavItem {
-  id: string;
-  label: string;
-  icon?: React.ReactNode;
-  badge?: React.ReactNode;
-}
-
-function AdminSidebarNav({
-  items,
-  selectedId,
-  onSelect,
-}: {
-  items: AdminNavItem[];
-  selectedId?: string;
-  onSelect?: (id: string) => void;
-}) {
-  return (
-    <ScrollArea className="flex-1">
-      <nav className="flex flex-col gap-0.5 p-2">
-        {items.map((item) => (
-          <button
-            key={item.id}
-            className={cn(
-              'flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors',
-              selectedId === item.id
-                ? 'bg-future-accent-subtle text-future-accent-foreground'
-                : 'text-future-foreground-muted hover:bg-future-surface-hover hover:text-future-foreground'
-            )}
-            onClick={() => onSelect?.(item.id)}
-          >
-            {item.icon}
-            <span className="flex-1 truncate text-left">{item.label}</span>
-            {item.badge}
-          </button>
-        ))}
-      </nav>
-    </ScrollArea>
-  );
-}
-
-function AdminMain({ children }: { children: React.ReactNode }) {
-  return <div className="flex flex-1 flex-col overflow-hidden">{children}</div>;
-}
-
-interface BreadcrumbItemType {
-  label: string;
-  href?: string;
-}
-
-function AdminBreadcrumb({ items }: { items: BreadcrumbItemType[] }) {
-  return (
-    <Breadcrumb>
-      <BreadcrumbList>
-        {items.map((item, index) => (
-          <React.Fragment key={item.label}>
-            {index > 0 && <BreadcrumbSeparator />}
-            <BreadcrumbItem>
-              {index === items.length - 1 ? (
-                <BreadcrumbPage className="text-future-foreground">{item.label}</BreadcrumbPage>
-              ) : (
-                <BreadcrumbLink
-                  href={item.href || '#'}
-                  className="text-future-foreground-muted hover:text-future-foreground"
-                >
-                  {item.label}
-                </BreadcrumbLink>
-              )}
-            </BreadcrumbItem>
-          </React.Fragment>
-        ))}
-      </BreadcrumbList>
-    </Breadcrumb>
-  );
-}
-
-function AdminPageHeader({
-  title,
-  breadcrumb,
-  actions,
-  tabs,
-  activeTab,
-  onTabChange,
-}: {
-  title: string;
-  breadcrumb?: BreadcrumbItemType[];
-  actions?: React.ReactNode;
-  tabs?: { value: string; label: string }[];
-  activeTab?: string;
-  onTabChange?: (value: string) => void;
-}) {
-  return (
-    <div className="border-b border-future-border-subtle px-6 py-4">
-      {breadcrumb && (
-        <div className="mb-2">
-          <AdminBreadcrumb items={breadcrumb} />
-        </div>
-      )}
-      <div className="flex items-center justify-between">
-        <h1 className="text-xl font-semibold text-future-foreground">{title}</h1>
-        {actions && <div className="flex items-center gap-2">{actions}</div>}
-      </div>
-      {tabs && (
-        <div className="mt-4 flex gap-1">
-          {tabs.map((tab) => (
-            <button
-              key={tab.value}
-              className={`px-4 pb-2 pt-1 text-sm font-medium transition-colors ${
-                activeTab === tab.value
-                  ? 'border-b-2 border-future-accent text-future-foreground'
-                  : 'text-future-foreground-muted hover:text-future-foreground'
-              }`}
-              onClick={() => onTabChange?.(tab.value)}
-            >
-              {tab.label}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function AdminToolbar({
-  children,
-  actions,
-}: {
-  children?: React.ReactNode;
-  actions?: React.ReactNode;
-}) {
-  return (
-    <div className="flex items-center justify-between border-b border-future-border-subtle px-6 py-3">
-      <div className="flex items-center gap-3">{children}</div>
-      <div className="flex items-center gap-2">{actions}</div>
-    </div>
-  );
-}
-
 function AdminFilter({
   label,
   value,
@@ -363,13 +144,15 @@ function AdminPagination({
         <Pagination>
           <PaginationContent>
             <PaginationItem>
-              <button
-                className="flex h-8 w-8 items-center justify-center rounded-md text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground disabled:opacity-50"
+              <Button
+                size="icon"
+                variant="ghost"
+                className="text-future-foreground-muted hover:bg-future-surface-hover hover:text-future-foreground"
                 disabled={page === 1}
                 onClick={() => onPageChange?.(1)}
               >
-                <ChevronsLeft className="h-4 w-4" />
-              </button>
+                <ChevronsLeft />
+              </Button>
             </PaginationItem>
             <PaginationItem>
               <PaginationPrevious
@@ -418,13 +201,15 @@ function AdminPagination({
               />
             </PaginationItem>
             <PaginationItem>
-              <button
-                className="flex h-8 w-8 items-center justify-center rounded-md text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground disabled:opacity-50"
+              <Button
+                size="icon"
+                variant="ghost"
+                className="text-future-foreground-muted hover:bg-future-surface-hover hover:text-future-foreground"
                 disabled={page === totalPages}
                 onClick={() => onPageChange?.(totalPages)}
               >
-                <ChevronsRight className="h-4 w-4" />
-              </button>
+                <ChevronsRight />
+              </Button>
             </PaginationItem>
           </PaginationContent>
         </Pagination>
@@ -481,13 +266,14 @@ function AdminMenuNav() {
     <nav className="flex flex-1 flex-col overflow-y-auto px-2 pt-2">
       <div className="flex flex-col gap-1">
         {menuItems.map((item, i) => (
-          <button
+          <Button
             key={i}
-            className="flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground"
+            variant="ghost"
+            className="w-full justify-start gap-3 text-future-foreground-muted hover:bg-future-surface-hover hover:text-future-foreground"
           >
             {item.icon}
             <span className="truncate">{item.label}</span>
-          </button>
+          </Button>
         ))}
       </div>
     </nav>
@@ -507,6 +293,159 @@ const tenants = [
   { id: '6', name: 'optimize', type: 'service' },
 ];
 
+// Tree structure for Admin sidebar (tenants + nested groups)
+const adminTreeData: TreeViewItem[] = [
+  {
+    id: 'root',
+    name: 'POPoC',
+    type: 'region',
+    children: [
+      {
+        id: 'tenants',
+        name: 'Tenants',
+        type: 'folder',
+        children: [
+          { id: '1', name: 'Maestro', type: 'tenant' },
+          { id: '2', name: 'Staging', type: 'tenant' },
+          { id: '3', name: 'ao', type: 'tenant' },
+          { id: '5', name: 'DefaultTenant', type: 'tenant' },
+        ],
+      },
+      {
+        id: 'services',
+        name: 'Services',
+        type: 'folder',
+        children: [
+          { id: '4', name: 'Development', type: 'service' },
+          { id: '6', name: 'optimize', type: 'service' },
+        ],
+      },
+    ],
+  },
+];
+
+/** Admin demo: varied tree structure for layout/scroll demo. */
+const adminTreeDataExpanded: TreeViewItem[] = [
+  {
+    id: 'root',
+    name: 'POPoC',
+    type: 'region',
+    children: [
+      { id: 'tenants', name: 'Tenants', type: 'folder', children: [] },
+      { id: 'services', name: 'Services', type: 'folder', children: [] },
+    ],
+  },
+  {
+    id: 'root-2',
+    name: 'Enterprise',
+    type: 'enterprise',
+    children: [
+      { id: 'tenants-2', name: 'Tenants', type: 'folder', children: [] },
+      { id: 'services-2', name: 'Services', type: 'folder', children: [] },
+    ],
+  },
+  {
+    id: 'maestro',
+    name: 'Maestro',
+    type: 'tenant',
+    meta: 'Default',
+  },
+  {
+    id: 'staging',
+    name: 'Staging',
+    type: 'tenant',
+    badge: <Badge variant="secondary" className="text-xs">Staging</Badge>,
+  },
+  { id: 'tenant', name: 'Tenant', type: 'tenant' },
+  {
+    id: 'root-3',
+    name: 'Workflow',
+    type: 'enterprise',
+    children: [
+      {
+        id: 'tenants-3',
+        name: 'Tenants',
+        type: 'folder',
+        children: [
+          {
+            id: 'workflow-maestro',
+            name: 'Maestro',
+            type: 'tenant',
+            badge: <Badge variant="secondary" className="text-xs">Canary</Badge>,
+            meta: 'Production',
+            actions: [
+              {
+                id: 'edit',
+                icon: <Pencil className="h-3.5 w-3.5" />,
+                label: 'Edit',
+                onClick: (item) => console.log('Edit', item.name),
+              },
+              {
+                id: 'delete',
+                icon: <Trash2 className="h-3.5 w-3.5" />,
+                label: 'Delete',
+                onClick: (item) => console.log('Delete', item.name),
+              },
+            ],
+          },
+          {
+            id: 'workflow-flow',
+            name: 'Flow',
+            type: 'tenant',
+            meta: '2 workflows',
+          },
+          {
+            id: 'workflow-delegate',
+            name: 'Delegate',
+            type: 'tenant',
+            badge: <Badge variant="outline" className="text-xs">New</Badge>,
+          },
+          { id: 'workflow-admin', name: 'Admin', type: 'tenant' },
+          {
+            id: 'workflow-admin-east',
+            name: 'Admin East',
+            type: 'tenant',
+            disabled: true,
+            meta: 'Maintenance',
+          },
+          { id: 'workflow-admin-west', name: 'Admin West', type: 'tenant' },
+        ],
+      },
+      {
+        id: 'services-3',
+        name: 'Services',
+        type: 'folder',
+        children: [
+          {
+            id: 'workflow-svc-maestro',
+            name: 'Maestro',
+            type: 'service',
+            meta: 'v2.4.1',
+          },
+          {
+            id: 'workflow-svc-flow',
+            name: 'Flow',
+            type: 'service',
+            badge: <Badge variant="destructive" className="text-xs">Beta</Badge>,
+          },
+          { id: 'workflow-svc-delegate', name: 'Delegate', type: 'service' },
+          { id: 'workflow-svc-admin', name: 'Admin', type: 'service' },
+          { id: 'workflow-svc-admin-east', name: 'Admin East', type: 'service' },
+          { id: 'workflow-svc-admin-west', name: 'Admin West', type: 'service' },
+        ],
+      },
+    ],
+  },
+];
+
+const adminTreeIconMap: TreeViewIconMap = {
+  region: <Globe className="h-4 w-4 text-future-foreground-muted" />,
+  enterprise: <Folder className="h-4 w-4 text-future-foreground-muted" />,
+  folder: <Code className="h-4 w-4 text-future-foreground-muted" />,
+  tenant: <Globe className="h-4 w-4 text-future-foreground-accent/80" />,
+  service: <Code className="h-4 w-4 text-future-foreground-accent/80" />,
+};
+
 type UserRow = {
   id: string;
   name: string;
@@ -730,28 +669,31 @@ function AdminPageDemo({ theme }: { theme: string }) {
   const [page, setPage] = React.useState(1);
   const [pageSize, setPageSize] = React.useState(15);
 
-  const navItems: AdminNavItem[] = tenants.map((t) => ({
-    id: t.id,
-    label: t.name,
-    icon: t.type === 'tenant' ? <Globe className="h-4 w-4" /> : <Code className="h-4 w-4" />,
-    badge: t.badge ? (
-      <Badge
-        variant="default"
-        className="ml-auto bg-future-accent-subtle text-[10px] text-future-accent-foreground"
-      >
-        {t.badge}
-      </Badge>
-    ) : undefined,
-  }));
+  const handleTreeSelectionChange = React.useCallback(
+    (selectedItems: { id: string }[]) => {
+      const first = selectedItems[0];
+      const tenantIds = ['1', '2', '3', '4', '5', '6', 'maestro', 'staging', 'tenant'];
+      if (first && tenantIds.includes(first.id)) {
+        setSelectedTenant(first.id);
+      }
+    },
+    []
+  );
 
   const themeClass =
     theme === 'legacy-dark'
       ? 'legacy-dark'
       : theme === 'legacy-light'
         ? 'legacy-light'
-        : theme === 'light'
-          ? 'future-light'
-          : 'future-dark';
+        : theme === 'wireframe'
+          ? 'future-wireframe'
+          : theme === 'vertex'
+            ? 'future-vertex'
+            : theme === 'canvas'
+              ? 'future-canvas'
+              : theme === 'light'
+                ? 'future-light'
+                : 'future-dark';
 
   const columns: ColumnDef<UserRow>[] = [
     DataTableSelectColumn<UserRow>(),
@@ -786,9 +728,9 @@ function AdminPageDemo({ theme }: { theme: string }) {
       cell: () => (
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <button className="flex h-8 w-8 items-center justify-center rounded-md text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground">
-              <MoreHorizontal className="h-4 w-4" />
-            </button>
+            <Button size="icon" variant="ghost" className="text-future-foreground-muted hover:bg-future-surface-hover hover:text-future-foreground">
+              <MoreHorizontal />
+            </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent
             align="end"
@@ -807,14 +749,13 @@ function AdminPageDemo({ theme }: { theme: string }) {
   ];
 
   return (
-    <AdminLayout theme={theme}>
-      {/* Global header */}
-      <MaestroHeader title="Administration" theme={theme} menuContent={<AdminMenuNav />} />
-
-      <AdminContent>
-        {/* Sidebar */}
-        <AdminSidebar width={260}>
-          <div className="flex items-center gap-2 border-b border-future-border-subtle px-4 py-3 text-sm font-medium text-future-foreground">
+    <AdminTemplate
+      theme={theme}
+      title="Administration"
+      menuContent={<AdminMenuNav />}
+      sidebar={
+        <AdminSidebar width={320}>
+          <div className="flex shrink-0 items-center gap-2 border-b border-future-border-subtle px-4 py-3 text-sm font-medium text-future-foreground">
             <svg
               viewBox="0 0 24 24"
               className="h-5 w-5"
@@ -828,84 +769,82 @@ function AdminPageDemo({ theme }: { theme: string }) {
             </svg>
             POPoC
           </div>
-          <AdminSidebarHeader title="Tenants" onSearch={() => undefined} onAdd={() => undefined} />
-          <AdminSidebarNav
-            items={navItems}
-            selectedId={selectedTenant}
-            onSelect={setSelectedTenant}
-          />
+          <div className="flex-1 min-h-0 overflow-auto">
+            <TreeView
+              data={adminTreeDataExpanded}
+              iconMap={adminTreeIconMap}
+              containerClassName="p-4 w-full max-w-full border-0 rounded-none shadow-none bg-transparent"
+              searchPlaceholder="Search tenants..."
+              showExpandAll
+              showSelectionCheckboxes
+              onSelectionChange={handleTreeSelectionChange}
+            />
+          </div>
         </AdminSidebar>
+      }
+    >
+      <AdminPageHeader
+        title="Manage access"
+        breadcrumb={['POPoC', 'DefaultTenant', 'Manage access']}
+        tabs={[
+          { value: 'assignments', label: 'Role assignments' },
+          { value: 'roles', label: 'Roles' },
+        ]}
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+        actions={
+          <>
+            <Button variant="ghost" className="text-future-foreground-accent hover:bg-transparent hover:text-future-foreground">
+              Check access
+            </Button>
+            <Button className="bg-future-accent text-future-foreground-on-accent hover:bg-future-accent/90">
+              Assign role
+            </Button>
+          </>
+        }
+      />
 
-        {/* Main content */}
-        <AdminMain>
-          <AdminPageHeader
-            title="Manage access"
-            breadcrumb={[
-              { label: 'POPoC' },
-              { label: 'DefaultTenant' },
-              { label: 'Manage access' },
-            ]}
-            tabs={[
-              { value: 'assignments', label: 'Role assignments' },
-              { value: 'roles', label: 'Roles' },
-            ]}
-            activeTab={activeTab}
-            onTabChange={setActiveTab}
-            actions={
-              <>
-                <button className="px-3 py-1.5 text-sm font-medium text-future-accent-foreground transition-colors hover:text-future-foreground">
-                  Check access
-                </button>
-                <button className="rounded-lg bg-future-accent px-4 py-1.5 text-sm font-medium text-future-foreground-on-accent transition-colors hover:bg-future-accent/90">
-                  Assign role
-                </button>
-              </>
-            }
-          />
-
-          <AdminToolbar
-            actions={
-              <button className="flex h-8 w-8 items-center justify-center rounded-md text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground">
-                <RefreshCw className="h-4 w-4" />
-              </button>
-            }
-          >
-            <AdminFilter
-              label="Name"
-              value={nameFilter}
-              options={[
-                { value: 'all', label: 'All' },
-                { value: 'users', label: 'Users' },
-                { value: 'groups', label: 'Groups' },
-              ]}
-              onValueChange={setNameFilter}
-            />
-            <AdminFilter
-              label="Roles"
-              value={roleFilter}
-              options={[
-                { value: 'all', label: 'All' },
-                { value: 'admin', label: 'Administrator' },
-                { value: 'viewer', label: 'Viewer' },
-              ]}
-              onValueChange={setRoleFilter}
-            />
-          </AdminToolbar>
+      <AdminToolbar
+        actions={
+          <Button size="icon" variant="ghost" className="text-future-foreground-muted hover:bg-future-surface-hover hover:text-future-foreground">
+            <RefreshCw />
+          </Button>
+        }
+      >
+        <AdminFilter
+          label="Name"
+          value={nameFilter}
+          options={[
+            { value: 'all', label: 'All' },
+            { value: 'users', label: 'Users' },
+            { value: 'groups', label: 'Groups' },
+          ]}
+          onValueChange={setNameFilter}
+        />
+        <AdminFilter
+          label="Roles"
+          value={roleFilter}
+          options={[
+            { value: 'all', label: 'All' },
+            { value: 'admin', label: 'Administrator' },
+            { value: 'viewer', label: 'Viewer' },
+          ]}
+          onValueChange={setRoleFilter}
+        />
+      </AdminToolbar>
 
-          <div className="flex-1 overflow-auto px-6">
-            <DataTable columns={columns} data={users} compact />
-          </div>
+      <div className="flex-1 overflow-auto px-6">
+        <DataTable columns={columns} data={users} compact />
+      </div>
 
-          <AdminPagination
-            total={users.length}
-            page={page}
-            pageSize={pageSize}
-            onPageChange={setPage}
-            onPageSizeChange={setPageSize}
-          />
-        </AdminMain>
-      </AdminContent>
-    </AdminLayout>
+      <AdminPagination
+        total={users.length}
+        page={page}
+        pageSize={pageSize}
+        onPageChange={setPage}
+        onPageSizeChange={setPageSize}
+      />
+    </AdminTemplate>
   );
 }
 
@@ -1450,9 +1389,15 @@ function DataManagementDemo({ theme }: { theme: string }) {
       ? 'legacy-dark'
       : theme === 'legacy-light'
         ? 'legacy-light'
-        : theme === 'light'
-          ? 'future-light'
-          : 'future-dark';
+        : theme === 'wireframe'
+          ? 'future-wireframe'
+          : theme === 'vertex'
+            ? 'future-vertex'
+            : theme === 'canvas'
+              ? 'future-canvas'
+              : theme === 'light'
+                ? 'future-light'
+                : 'future-dark';
 
   const filteredProducts = React.useMemo(() => {
     let filtered = products;
@@ -1556,9 +1501,9 @@ function DataManagementDemo({ theme }: { theme: string }) {
       cell: () => (
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <button className="flex h-8 w-8 items-center justify-center rounded-md text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground">
-              <MoreHorizontal className="h-4 w-4" />
-            </button>
+            <Button size="icon" variant="ghost" className="text-future-foreground-muted hover:bg-future-surface-hover hover:text-future-foreground">
+              <MoreHorizontal />
+            </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent
             align="end"
@@ -1581,30 +1526,25 @@ function DataManagementDemo({ theme }: { theme: string }) {
   ];
 
   return (
-    <AdminLayout theme={theme}>
-      {/* Global header */}
-      <MaestroHeader title="Data Management" theme={theme} menuContent={<AdminMenuNav />} />
-
-      {/* Page content */}
-      <div className="flex flex-1 flex-col overflow-hidden">
-        {/* Page header with actions */}
-        <div className="flex items-center justify-between border-b border-future-border-subtle px-6 py-4">
-          <h1 className="text-xl font-semibold text-future-foreground">Products</h1>
+    <AdminTemplate theme={theme} title="Data Management" menuContent={<AdminMenuNav />}>
+      {/* Page header with actions */}
+      <div className="flex items-center justify-between border-b border-future-border-subtle px-6 py-4">
+        <h1 className="text-xl font-semibold text-future-foreground">Products</h1>
           <div className="flex items-center gap-2">
-            <button className="flex h-9 items-center gap-2 rounded-lg border border-future-border bg-future-surface px-4 text-sm font-medium text-future-foreground-muted transition-colors hover:border-future-border-hover hover:text-future-foreground">
-              <Upload className="h-4 w-4" />
+            <Button variant="outline" className="border-future-border bg-future-surface text-future-foreground-muted hover:border-future-border-hover hover:bg-future-surface hover:text-future-foreground">
+              <Upload />
               Import
-            </button>
-            <button className="flex h-9 items-center gap-2 rounded-lg border border-future-border bg-future-surface px-4 text-sm font-medium text-future-foreground-muted transition-colors hover:border-future-border-hover hover:text-future-foreground">
-              <Download className="h-4 w-4" />
+            </Button>
+            <Button variant="outline" className="border-future-border bg-future-surface text-future-foreground-muted hover:border-future-border-hover hover:bg-future-surface hover:text-future-foreground">
+              <Download />
               Export
-            </button>
+            </Button>
             <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
               <DialogTrigger asChild>
-                <button className="flex h-9 items-center gap-2 rounded-lg bg-future-accent px-4 text-sm font-medium text-future-foreground-on-accent transition-colors hover:bg-future-accent/90">
-                  <Plus className="h-4 w-4" />
+                <Button className="bg-future-accent text-future-foreground-on-accent hover:bg-future-accent/90">
+                  <Plus />
                   Add Product
-                </button>
+                </Button>
               </DialogTrigger>
               <DialogContent
                 className={cn(
@@ -1673,18 +1613,19 @@ function DataManagementDemo({ theme }: { theme: string }) {
                   </div>
                 </div>
                 <DialogFooter>
-                  <button
-                    className="flex h-9 items-center rounded-lg border border-future-border bg-future-surface px-4 text-sm font-medium text-future-foreground-muted transition-colors hover:border-future-border-hover hover:text-future-foreground"
+                  <Button
+                    variant="outline"
+                    className="border-future-border bg-future-surface text-future-foreground-muted hover:border-future-border-hover hover:bg-future-surface hover:text-future-foreground"
                     onClick={() => setIsCreateDialogOpen(false)}
                   >
                     Cancel
-                  </button>
-                  <button
-                    className="flex h-9 items-center rounded-lg bg-future-accent px-4 text-sm font-medium text-future-foreground-on-accent transition-colors hover:bg-future-accent/90"
+                  </Button>
+                  <Button
+                    className="bg-future-accent text-future-foreground-on-accent hover:bg-future-accent/90"
                     onClick={() => setIsCreateDialogOpen(false)}
                   >
                     Create product
-                  </button>
+                  </Button>
                 </DialogFooter>
               </DialogContent>
             </Dialog>
@@ -1732,27 +1673,26 @@ function DataManagementDemo({ theme }: { theme: string }) {
                 ))}
               </SelectContent>
             </Select>
-            <button className="flex h-9 w-9 items-center justify-center rounded-lg border border-future-border text-future-foreground-muted transition-colors hover:border-future-border-hover hover:text-future-foreground">
-              <RefreshCw className="h-4 w-4" />
-            </button>
+            <Button size="icon" variant="outline" className="border-future-border text-future-foreground-muted hover:border-future-border-hover hover:bg-transparent hover:text-future-foreground">
+              <RefreshCw />
+            </Button>
           </div>
         </div>
 
-        {/* Table */}
-        <div className="flex-1 overflow-auto px-6 pt-4">
-          <DataTable
-            columns={productColumns}
-            data={filteredProducts}
-            searchKey="name"
-            searchPlaceholder="Search products..."
-            showColumnToggle
-            showPagination
-            pageSize={10}
-            compact
-          />
-        </div>
+      {/* Table */}
+      <div className="flex-1 overflow-auto px-6 pt-4">
+        <DataTable
+          columns={productColumns}
+          data={filteredProducts}
+          searchKey="name"
+          searchPlaceholder="Search products..."
+          showColumnToggle
+          showPagination
+          pageSize={10}
+          compact
+        />
       </div>
-    </AdminLayout>
+    </AdminTemplate>
   );
 }
 
@@ -1762,3 +1702,16 @@ export const DataManagement: Story = {
     return <DataManagementDemo theme={globals.futureTheme || 'dark'} />;
   },
 };
+
+// ============================================================================
+// Settings
+// ============================================================================
+
+import { SettingsAdmin } from './settings-admin';
+
+export const Settings: Story = {
+  name: 'Settings',
+  render: (_, { globals }) => {
+    return <SettingsAdmin theme={globals.futureTheme || 'dark'} menuContent={<AdminMenuNav />} />;
+  },
+};
diff --git a/packages/apollo-wind/src/templates/Admin/settings-admin.tsx b/packages/apollo-wind/src/templates/Admin/settings-admin.tsx
new file mode 100644
index 000000000..6c6f00d90
--- /dev/null
+++ b/packages/apollo-wind/src/templates/Admin/settings-admin.tsx
@@ -0,0 +1,437 @@
+import * as React from 'react';
+import { Bell, Key, Palette, Shield, User, CreditCard } from 'lucide-react';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Separator } from '@/components/ui/separator';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+import { Row, Column, Grid } from '@/components/ui/layout';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+  AdminTemplate,
+  AdminSidebar,
+  AdminSidebarHeader,
+  AdminSidebarNav,
+} from './template-admin';
+
+const navItems = [
+  { id: 'profile', label: 'Profile', icon: <User className="h-4 w-4" /> },
+  { id: 'account', label: 'Account', icon: <Key className="h-4 w-4" /> },
+  { id: 'appearance', label: 'Appearance', icon: <Palette className="h-4 w-4" /> },
+  { id: 'notifications', label: 'Notifications', icon: <Bell className="h-4 w-4" /> },
+  { id: 'security', label: 'Security', icon: <Shield className="h-4 w-4" /> },
+  { id: 'billing', label: 'Billing', icon: <CreditCard className="h-4 w-4" /> },
+];
+
+export function SettingsAdmin({ theme, menuContent }: { theme: string; menuContent?: React.ReactNode }) {
+  const [activeSection, setActiveSection] = React.useState('profile');
+  const [formData, setFormData] = React.useState({
+    firstName: 'John',
+    lastName: 'Doe',
+    email: 'john.doe@example.com',
+    username: 'johndoe',
+    bio: 'Software developer passionate about building great products.',
+    theme: 'system',
+    language: 'en',
+    emailNotifications: true,
+    pushNotifications: false,
+    marketingEmails: false,
+    twoFactor: false,
+  });
+
+  const updateField = (field: string, value: string | boolean) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
+  return (
+    <AdminTemplate
+      theme={theme}
+      title="Settings"
+      menuContent={menuContent}
+      sidebar={
+        <AdminSidebar width={240}>
+          <AdminSidebarHeader title="Settings" icon={<User className="h-4 w-4" />} />
+          <AdminSidebarNav
+            items={navItems}
+            selectedId={activeSection}
+            onSelect={setActiveSection}
+          />
+        </AdminSidebar>
+      }
+    >
+      <ScrollArea className="flex-1">
+        <div className="space-y-6 p-6">
+          {activeSection === 'profile' && (
+            <>
+              <div>
+                <h2 className="text-2xl font-bold text-future-foreground">Profile</h2>
+                <p className="text-future-foreground-muted">Manage your public profile information.</p>
+              </div>
+
+              <Card className="border-future-border-subtle bg-future-surface-raised">
+                <CardHeader>
+                  <CardTitle className="text-future-foreground">Avatar</CardTitle>
+                  <CardDescription className="text-future-foreground-muted">
+                    Click on the avatar to upload a custom one from your files.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <Row gap={4} align="center">
+                    <Avatar className="h-20 w-20">
+                      <AvatarImage src="" />
+                      <AvatarFallback className="text-lg">JD</AvatarFallback>
+                    </Avatar>
+                    <Row gap={2}>
+                      <Button variant="outline" size="sm">Upload</Button>
+                      <Button variant="ghost" size="sm">Remove</Button>
+                    </Row>
+                  </Row>
+                </CardContent>
+              </Card>
+
+              <Card className="border-future-border-subtle bg-future-surface-raised">
+                <CardHeader>
+                  <CardTitle className="text-future-foreground">Personal Information</CardTitle>
+                  <CardDescription className="text-future-foreground-muted">Update your personal details here.</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <Grid gap={4} cols={2}>
+                    <Column gap={2}>
+                      <Label htmlFor="firstName" className="text-future-foreground">First name</Label>
+                      <Input
+                        id="firstName"
+                        value={formData.firstName}
+                        onChange={(e) => updateField('firstName', e.target.value)}
+                        className="border-future-border bg-future-surface-overlay text-future-foreground"
+                      />
+                    </Column>
+                    <Column gap={2}>
+                      <Label htmlFor="lastName" className="text-future-foreground">Last name</Label>
+                      <Input
+                        id="lastName"
+                        value={formData.lastName}
+                        onChange={(e) => updateField('lastName', e.target.value)}
+                        className="border-future-border bg-future-surface-overlay text-future-foreground"
+                      />
+                    </Column>
+                  </Grid>
+                  <Column gap={2}>
+                    <Label htmlFor="username" className="text-future-foreground">Username</Label>
+                    <Input
+                      id="username"
+                      value={formData.username}
+                      onChange={(e) => updateField('username', e.target.value)}
+                      className="border-future-border bg-future-surface-overlay text-future-foreground"
+                    />
+                  </Column>
+                  <Column gap={2}>
+                    <Label htmlFor="bio" className="text-future-foreground">Bio</Label>
+                    <Textarea
+                      id="bio"
+                      value={formData.bio}
+                      onChange={(e) => updateField('bio', e.target.value)}
+                      rows={3}
+                      className="border-future-border bg-future-surface-overlay text-future-foreground"
+                    />
+                    <p className="text-xs text-future-foreground-subtle">
+                      Brief description for your profile. URLs are hyperlinked.
+                    </p>
+                  </Column>
+                </CardContent>
+                <CardFooter className="border-t border-future-border-subtle px-6 py-4">
+                  <Button>Save changes</Button>
+                </CardFooter>
+              </Card>
+            </>
+          )}
+
+          {activeSection === 'account' && (
+            <>
+              <div>
+                <h2 className="text-2xl font-bold text-future-foreground">Account</h2>
+                <p className="text-future-foreground-muted">
+                  Manage your account settings and email preferences.
+                </p>
+              </div>
+
+              <Card className="border-future-border-subtle bg-future-surface-raised">
+                <CardHeader>
+                  <CardTitle className="text-future-foreground">Email</CardTitle>
+                  <CardDescription className="text-future-foreground-muted">
+                    Your email address is used for login and notifications.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <Column gap={2}>
+                    <Label htmlFor="email" className="text-future-foreground">Email address</Label>
+                    <Input
+                      id="email"
+                      type="email"
+                      value={formData.email}
+                      onChange={(e) => updateField('email', e.target.value)}
+                      className="border-future-border bg-future-surface-overlay text-future-foreground"
+                    />
+                  </Column>
+                </CardContent>
+                <CardFooter className="border-t border-future-border-subtle px-6 py-4">
+                  <Button>Update email</Button>
+                </CardFooter>
+              </Card>
+
+              <Card className="border-red-500/30 bg-future-surface-raised">
+                <CardHeader>
+                  <CardTitle className="text-red-400">Danger Zone</CardTitle>
+                  <CardDescription className="text-future-foreground-muted">Irreversible and destructive actions.</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <Row justify="between" align="center">
+                    <Column gap={0}>
+                      <p className="font-medium text-future-foreground">Delete account</p>
+                      <p className="text-sm text-future-foreground-muted">
+                        Permanently delete your account and all associated data.
+                      </p>
+                    </Column>
+                    <Button variant="destructive">Delete account</Button>
+                  </Row>
+                </CardContent>
+              </Card>
+            </>
+          )}
+
+          {activeSection === 'appearance' && (
+            <>
+              <div>
+                <h2 className="text-2xl font-bold text-future-foreground">Appearance</h2>
+                <p className="text-future-foreground-muted">
+                  Customize the appearance of the application.
+                </p>
+              </div>
+
+              <Card className="border-future-border-subtle bg-future-surface-raised">
+                <CardHeader>
+                  <CardTitle className="text-future-foreground">Theme</CardTitle>
+                  <CardDescription className="text-future-foreground-muted">Select your preferred theme for the dashboard.</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <Column gap={2}>
+                    <Label htmlFor="theme" className="text-future-foreground">Theme</Label>
+                    <Select
+                      value={formData.theme}
+                      onValueChange={(value) => updateField('theme', value)}
+                    >
+                      <SelectTrigger id="theme" className="w-[200px] border-future-border bg-future-surface-overlay text-future-foreground">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="light">Light</SelectItem>
+                        <SelectItem value="dark">Dark</SelectItem>
+                        <SelectItem value="system">System</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </Column>
+                  <Column gap={2}>
+                    <Label htmlFor="language" className="text-future-foreground">Language</Label>
+                    <Select
+                      value={formData.language}
+                      onValueChange={(value) => updateField('language', value)}
+                    >
+                      <SelectTrigger id="language" className="w-[200px] border-future-border bg-future-surface-overlay text-future-foreground">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="en">English</SelectItem>
+                        <SelectItem value="es">Spanish</SelectItem>
+                        <SelectItem value="fr">French</SelectItem>
+                        <SelectItem value="de">German</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </Column>
+                </CardContent>
+              </Card>
+            </>
+          )}
+
+          {activeSection === 'notifications' && (
+            <>
+              <div>
+                <h2 className="text-2xl font-bold text-future-foreground">Notifications</h2>
+                <p className="text-future-foreground-muted">Configure how you receive notifications.</p>
+              </div>
+
+              <Card className="border-future-border-subtle bg-future-surface-raised">
+                <CardHeader>
+                  <CardTitle className="text-future-foreground">Notification Preferences</CardTitle>
+                  <CardDescription className="text-future-foreground-muted">Choose what notifications you want to receive.</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-6">
+                  <Row justify="between" align="center">
+                    <Column gap={0.5}>
+                      <Label className="text-future-foreground">Email notifications</Label>
+                      <p className="text-sm text-future-foreground-muted">
+                        Receive notifications via email.
+                      </p>
+                    </Column>
+                    <Switch
+                      checked={formData.emailNotifications}
+                      onCheckedChange={(checked) => updateField('emailNotifications', checked)}
+                    />
+                  </Row>
+                  <Separator className="bg-future-border-subtle" />
+                  <Row justify="between" align="center">
+                    <Column gap={0.5}>
+                      <Label className="text-future-foreground">Push notifications</Label>
+                      <p className="text-sm text-future-foreground-muted">
+                        Receive push notifications on your device.
+                      </p>
+                    </Column>
+                    <Switch
+                      checked={formData.pushNotifications}
+                      onCheckedChange={(checked) => updateField('pushNotifications', checked)}
+                    />
+                  </Row>
+                  <Separator className="bg-future-border-subtle" />
+                  <Row justify="between" align="center">
+                    <Column gap={0.5}>
+                      <Label className="text-future-foreground">Marketing emails</Label>
+                      <p className="text-sm text-future-foreground-muted">
+                        Receive emails about new features and updates.
+                      </p>
+                    </Column>
+                    <Switch
+                      checked={formData.marketingEmails}
+                      onCheckedChange={(checked) => updateField('marketingEmails', checked)}
+                    />
+                  </Row>
+                </CardContent>
+              </Card>
+            </>
+          )}
+
+          {activeSection === 'security' && (
+            <>
+              <div>
+                <h2 className="text-2xl font-bold text-future-foreground">Security</h2>
+                <p className="text-future-foreground-muted">Manage your security preferences.</p>
+              </div>
+
+              <Card className="border-future-border-subtle bg-future-surface-raised">
+                <CardHeader>
+                  <CardTitle className="text-future-foreground">Password</CardTitle>
+                  <CardDescription className="text-future-foreground-muted">Change your password here.</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <Column gap={2}>
+                    <Label htmlFor="currentPassword" className="text-future-foreground">Current password</Label>
+                    <Input id="currentPassword" type="password" className="border-future-border bg-future-surface-overlay text-future-foreground" />
+                  </Column>
+                  <Column gap={2}>
+                    <Label htmlFor="newPassword" className="text-future-foreground">New password</Label>
+                    <Input id="newPassword" type="password" className="border-future-border bg-future-surface-overlay text-future-foreground" />
+                  </Column>
+                  <Column gap={2}>
+                    <Label htmlFor="confirmPassword" className="text-future-foreground">Confirm password</Label>
+                    <Input id="confirmPassword" type="password" className="border-future-border bg-future-surface-overlay text-future-foreground" />
+                  </Column>
+                </CardContent>
+                <CardFooter className="border-t border-future-border-subtle px-6 py-4">
+                  <Button>Update password</Button>
+                </CardFooter>
+              </Card>
+
+              <Card className="border-future-border-subtle bg-future-surface-raised">
+                <CardHeader>
+                  <CardTitle className="text-future-foreground">Two-Factor Authentication</CardTitle>
+                  <CardDescription className="text-future-foreground-muted">Add an extra layer of security to your account.</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <Row justify="between" align="center">
+                    <Column gap={0.5}>
+                      <p className="font-medium text-future-foreground">Enable 2FA</p>
+                      <p className="text-sm text-future-foreground-muted">
+                        Secure your account with two-factor authentication.
+                      </p>
+                    </Column>
+                    <Switch
+                      checked={formData.twoFactor}
+                      onCheckedChange={(checked) => updateField('twoFactor', checked)}
+                    />
+                  </Row>
+                </CardContent>
+              </Card>
+            </>
+          )}
+
+          {activeSection === 'billing' && (
+            <>
+              <div>
+                <h2 className="text-2xl font-bold text-future-foreground">Billing</h2>
+                <p className="text-future-foreground-muted">
+                  Manage your billing information and subscription.
+                </p>
+              </div>
+
+              <Card className="border-future-border-subtle bg-future-surface-raised">
+                <CardHeader>
+                  <CardTitle className="text-future-foreground">Current Plan</CardTitle>
+                  <CardDescription className="text-future-foreground-muted">You are currently on the Pro plan.</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <Row justify="between" align="center" className="rounded-lg border border-future-border-subtle p-4">
+                    <Column gap={0}>
+                      <p className="font-semibold text-future-foreground">Pro Plan</p>
+                      <p className="text-sm text-future-foreground-muted">
+                        $29/month — Renews on Jan 1, 2025
+                      </p>
+                    </Column>
+                    <Button variant="outline">Manage subscription</Button>
+                  </Row>
+                </CardContent>
+              </Card>
+
+              <Card className="border-future-border-subtle bg-future-surface-raised">
+                <CardHeader>
+                  <CardTitle className="text-future-foreground">Payment Method</CardTitle>
+                  <CardDescription className="text-future-foreground-muted">Update your payment information.</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <Row justify="between" align="center" className="rounded-lg border border-future-border-subtle p-4">
+                    <Row gap={3} align="center">
+                      <Row justify="center" align="center" className="h-10 w-14 rounded bg-future-surface-overlay">
+                        <CreditCard className="h-5 w-5 text-future-foreground-muted" />
+                      </Row>
+                      <Column gap={0}>
+                        <p className="font-medium text-future-foreground">•••• •••• •••• 4242</p>
+                        <p className="text-sm text-future-foreground-muted">Expires 12/25</p>
+                      </Column>
+                    </Row>
+                    <Button variant="ghost" size="sm">Edit</Button>
+                  </Row>
+                </CardContent>
+                <CardFooter className="border-t border-future-border-subtle px-6 py-4">
+                  <Button variant="outline">Add payment method</Button>
+                </CardFooter>
+              </Card>
+            </>
+          )}
+        </div>
+      </ScrollArea>
+    </AdminTemplate>
+  );
+}
diff --git a/packages/apollo-wind/src/templates/Admin/template-admin.tsx b/packages/apollo-wind/src/templates/Admin/template-admin.tsx
new file mode 100644
index 000000000..9cc4554f4
--- /dev/null
+++ b/packages/apollo-wind/src/templates/Admin/template-admin.tsx
@@ -0,0 +1,311 @@
+import * as React from 'react';
+import { MaestroHeader } from '@/components/custom/global-header';
+import { ViewportGuard } from '@/components/custom/viewport-guard';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import type { FutureTheme } from '@/foundation/Future/types';
+import { fontFamily } from '@/foundation/Future/typography';
+import { cn } from '@/lib';
+
+// Re-export types for consumer convenience
+export type { FutureTheme };
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+function resolveThemeClass(theme: FutureTheme) {
+  if (theme === 'legacy-dark') return 'legacy-dark';
+  if (theme === 'legacy-light') return 'legacy-light';
+  if (theme === 'wireframe') return 'future-wireframe';
+  if (theme === 'vertex') return 'future-vertex';
+  if (theme === 'canvas') return 'future-canvas';
+  if (theme === 'light') return 'future-light';
+  return 'future-dark';
+}
+
+// ============================================================================
+// AdminSidebar
+// ============================================================================
+
+export interface AdminSidebarProps {
+  className?: string;
+  /** Width in pixels (default 260) */
+  width?: number;
+  children?: React.ReactNode;
+}
+
+/**
+ * Fixed-width sidebar container with right border.
+ * Renders children in a vertical flex column — callers handle their own
+ * headers, nav lists, and scroll areas as needed.
+ */
+export function AdminSidebar({ className, width = 260, children }: AdminSidebarProps) {
+  return (
+    <div
+      className={cn(
+        'flex shrink-0 flex-col border-r border-future-border-subtle bg-future-surface',
+        className
+      )}
+      style={{ width }}
+    >
+      {children}
+    </div>
+  );
+}
+
+// ============================================================================
+// AdminSidebarHeader
+// ============================================================================
+
+export interface AdminSidebarHeaderProps {
+  className?: string;
+  /** Title text */
+  title: string;
+  /** Optional icon rendered before the title */
+  icon?: React.ReactNode;
+  /** Action buttons rendered on the right */
+  actions?: React.ReactNode;
+}
+
+/**
+ * Header row for AdminSidebar — title, optional icon, and action buttons.
+ */
+export function AdminSidebarHeader({
+  className,
+  title,
+  icon,
+  actions,
+}: AdminSidebarHeaderProps) {
+  return (
+    <div
+      className={cn(
+        'flex shrink-0 items-center justify-between border-b border-future-border-subtle px-4 py-3',
+        className
+      )}
+    >
+      <div className="flex items-center gap-2 text-sm font-medium text-future-foreground">
+        {icon}
+        <span>{title}</span>
+      </div>
+      {actions && <div className="flex items-center gap-1">{actions}</div>}
+    </div>
+  );
+}
+
+// ============================================================================
+// AdminSidebarNav
+// ============================================================================
+
+export interface AdminNavItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  badge?: React.ReactNode;
+}
+
+export interface AdminSidebarNavProps {
+  className?: string;
+  items: AdminNavItem[];
+  selectedId?: string;
+  onSelect?: (id: string) => void;
+}
+
+/**
+ * Scrollable nav list for AdminSidebar. Each item has an optional icon and badge.
+ */
+export function AdminSidebarNav({
+  className,
+  items,
+  selectedId,
+  onSelect,
+}: AdminSidebarNavProps) {
+  return (
+    <ScrollArea className={cn('flex-1', className)}>
+      <nav className="flex flex-col gap-0.5 p-2">
+        {items.map((item) => (
+          <button
+            key={item.id}
+            className={cn(
+              'flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors',
+              selectedId === item.id
+                ? 'bg-future-accent-subtle text-future-foreground-accent'
+                : 'text-future-foreground-muted hover:bg-future-surface-hover hover:text-future-foreground'
+            )}
+            onClick={() => onSelect?.(item.id)}
+          >
+            {item.icon}
+            <span className="flex-1 truncate text-left">{item.label}</span>
+            {item.badge}
+          </button>
+        ))}
+      </nav>
+    </ScrollArea>
+  );
+}
+
+// ============================================================================
+// AdminPageHeader
+// ============================================================================
+
+export interface AdminPageHeaderProps {
+  className?: string;
+  /** Page title */
+  title: string;
+  /** Breadcrumb segments (plain strings — last one is highlighted) */
+  breadcrumb?: string[];
+  /** Action buttons rendered on the right */
+  actions?: React.ReactNode;
+  /** Tab definitions */
+  tabs?: { value: string; label: string }[];
+  /** Currently active tab value */
+  activeTab?: string;
+  /** Callback when a tab is selected */
+  onTabChange?: (value: string) => void;
+}
+
+/**
+ * Page header with optional breadcrumb trail, action buttons, and tab bar.
+ */
+export function AdminPageHeader({
+  className,
+  title,
+  breadcrumb,
+  actions,
+  tabs,
+  activeTab,
+  onTabChange,
+}: AdminPageHeaderProps) {
+  return (
+    <div className={cn('border-b border-future-border-subtle px-6 py-4', className)}>
+      {breadcrumb && breadcrumb.length > 0 && (
+        <div className="mb-2 flex items-center gap-1.5 text-sm text-future-foreground-muted">
+          {breadcrumb.map((item, i) => (
+            <React.Fragment key={item}>
+              {i > 0 && <span className="text-future-foreground-subtle">/</span>}
+              {i === breadcrumb.length - 1 ? (
+                <span className="text-future-foreground">{item}</span>
+              ) : (
+                <span>{item}</span>
+              )}
+            </React.Fragment>
+          ))}
+        </div>
+      )}
+      <div className="flex items-center justify-between">
+        <h1 className="text-xl font-semibold text-future-foreground">{title}</h1>
+        {actions && <div className="flex items-center gap-2">{actions}</div>}
+      </div>
+      {tabs && (
+        <div className="mt-4 flex gap-1">
+          {tabs.map((tab) => (
+            <button
+              key={tab.value}
+              className={cn(
+                'px-4 pb-2 pt-1 text-sm font-medium transition-colors',
+                activeTab === tab.value
+                  ? 'border-b-2 border-future-accent text-future-foreground'
+                  : 'text-future-foreground-muted hover:text-future-foreground'
+              )}
+              onClick={() => onTabChange?.(tab.value)}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ============================================================================
+// AdminToolbar
+// ============================================================================
+
+export interface AdminToolbarProps {
+  className?: string;
+  /** Filter or search controls (left side) */
+  children?: React.ReactNode;
+  /** Action buttons (right side) */
+  actions?: React.ReactNode;
+}
+
+/**
+ * Horizontal toolbar row — filters on the left, actions on the right.
+ */
+export function AdminToolbar({ className, children, actions }: AdminToolbarProps) {
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-between border-b border-future-border-subtle px-6 py-3',
+        className
+      )}
+    >
+      <div className="flex items-center gap-3">{children}</div>
+      <div className="flex items-center gap-2">{actions}</div>
+    </div>
+  );
+}
+
+// ============================================================================
+// AdminTemplate
+// ============================================================================
+
+export interface AdminTemplateProps {
+  className?: string;
+  /** Color theme (default "dark") */
+  theme?: FutureTheme;
+  /** Header title (default "Administration") */
+  title?: string;
+  /** Content for the global header's slide-out menu drawer */
+  menuContent?: React.ReactNode;
+  /**
+   * Sidebar element — typically an `<AdminSidebar>` with `AdminSidebarHeader`
+   * and `AdminSidebarNav` inside. Omit for a full-width layout (no sidebar).
+   */
+  sidebar?: React.ReactNode;
+  /** Main content area — compose with `AdminPageHeader`, `AdminToolbar`, etc. */
+  children?: React.ReactNode;
+}
+
+/**
+ * Full-page Admin template.
+ *
+ * Composed of:
+ * - **MaestroHeader** — global header with logo and slide-out menu
+ * - **sidebar** (optional) — fixed-width left sidebar (pass an `AdminSidebar`)
+ * - **main area** — flex-1 column for page content
+ *
+ * Pass `AdminPageHeader`, `AdminToolbar`, and your own content as children
+ * to build the main area. See the Admin stories for full examples.
+ */
+export function AdminTemplate({
+  className,
+  theme = 'dark',
+  title = 'Administration',
+  menuContent,
+  sidebar,
+  children,
+}: AdminTemplateProps) {
+  return (
+    <ViewportGuard
+      minWidth={769}
+      message="This view is not available at this screen size. Please use a larger viewport."
+    >
+      <div
+        className={cn(
+          resolveThemeClass(theme),
+          'flex h-screen w-full flex-col overflow-hidden bg-future-surface text-foreground',
+          className
+        )}
+        style={{ fontFamily: fontFamily.base }}
+      >
+        <MaestroHeader title={title} theme={theme} menuContent={menuContent} />
+
+        <div className="flex flex-1 overflow-hidden">
+          {sidebar}
+          <div className="flex flex-1 flex-col overflow-hidden">{children}</div>
+        </div>
+      </div>
+    </ViewportGuard>
+  );
+}
diff --git a/packages/apollo-wind/src/templates/Delegate/template-delegate.tsx b/packages/apollo-wind/src/templates/Delegate/template-delegate.tsx
index 45d644db7..b6e633a46 100644
--- a/packages/apollo-wind/src/templates/Delegate/template-delegate.tsx
+++ b/packages/apollo-wind/src/templates/Delegate/template-delegate.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Canvas } from '@/components/custom/canvas';
 import type { DelegatePanelProps, NavChildItem, NavItem } from '@/components/custom/panel-delegate';
 import { DelegatePanel } from '@/components/custom/panel-delegate';
-import { useViewportAtOrAbove, ViewportGuard } from '@/components/ui/viewport-guard';
+import { useViewportAtOrAbove, ViewportGuard } from '@/components/custom/viewport-guard';
 import type { FutureTheme } from '@/foundation/Future/types';
 import { fontFamily } from '@/foundation/Future/typography';
 import { cn } from '@/lib';
@@ -67,9 +67,15 @@ export function DelegateTemplate({
           ? 'legacy-dark'
           : theme === 'legacy-light'
             ? 'legacy-light'
-            : theme === 'light'
-              ? 'future-light'
-              : 'future-dark',
+            : theme === 'wireframe'
+              ? 'future-wireframe'
+              : theme === 'vertex'
+                ? 'future-vertex'
+                : theme === 'canvas'
+                  ? 'future-canvas'
+                  : theme === 'light'
+                    ? 'future-light'
+                    : 'future-dark',
         'flex h-screen bg-future-surface',
         className
       )}
diff --git a/packages/apollo-wind/src/templates/EmptyErrors/empty-errors.stories.tsx b/packages/apollo-wind/src/templates/EmptyErrors/empty-errors.stories.tsx
index 3b2b2d1db..dc4e5a90b 100644
--- a/packages/apollo-wind/src/templates/EmptyErrors/empty-errors.stories.tsx
+++ b/packages/apollo-wind/src/templates/EmptyErrors/empty-errors.stories.tsx
@@ -11,7 +11,7 @@ import { ErrorVideo } from './error-components';
 // ============================================================================
 
 const meta = {
-  title: 'Templates/Empty & Errors',
+  title: 'Templates/Future/Empty & Errors',
   parameters: {
     layout: 'fullscreen',
   },
@@ -31,22 +31,27 @@ function ErrorPageLayout({
   theme: string;
   children: React.ReactNode;
 }) {
-  const themeValue = theme === 'light' || theme === 'legacy-light' ? 'light' : 'dark';
   const themeClass =
     theme === 'legacy-dark'
       ? 'legacy-dark'
       : theme === 'legacy-light'
         ? 'legacy-light'
-        : theme === 'light'
-          ? 'future-light'
-          : 'future-dark';
+        : theme === 'wireframe'
+          ? 'future-wireframe'
+          : theme === 'vertex'
+            ? 'future-vertex'
+            : theme === 'canvas'
+              ? 'future-canvas'
+              : theme === 'light'
+                ? 'future-light'
+                : 'future-dark';
 
   return (
     <div
       className={cn(themeClass, 'flex h-screen flex-col bg-future-surface')}
       style={{ fontFamily: fontFamily.base }}
     >
-      <MaestroHeader theme={themeValue} title="UiPath" />
+      <MaestroHeader theme={theme as import('@/foundation/Future/types').FutureTheme} title="UiPath" />
       <div className="flex flex-1 flex-col items-center justify-center">
         {children}
       </div>
diff --git a/packages/apollo-wind/src/templates/Experiments/ideas-AnimatedGradientText.tsx b/packages/apollo-wind/src/templates/Experiments/ideas-AnimatedGradientText.tsx
new file mode 100644
index 000000000..45ead009f
--- /dev/null
+++ b/packages/apollo-wind/src/templates/Experiments/ideas-AnimatedGradientText.tsx
@@ -0,0 +1,113 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import { useId } from 'react';
+import { Sparkles } from 'lucide-react';
+import { cn } from '@/lib';
+
+export interface AnimatedGradientIconProps
+  extends ComponentPropsWithoutRef<'span'> {
+  speed?: number;
+  colorFrom?: string;
+  colorTo?: string;
+  colorMid?: string;
+}
+
+/**
+ * Sparkles icon with animated gradient stroke for Ideas experiment.
+ * Uses the Lucide Sparkles icon with gradient applied via stroke.
+ */
+export function AnimatedGradientIcon({
+  className,
+  speed = 1,
+  colorFrom = '#22d3ee',
+  colorTo = '#0891b2',
+  colorMid = '#FA4616',
+  style,
+  ...props
+}: AnimatedGradientIconProps) {
+  const duration = 8 / speed;
+  const gradientId = `ideas-sparkles-${useId().replace(/:/g, '-')}`;
+  return (
+    <span
+      className={cn('inline-block shrink-0', className)}
+      style={style}
+      {...props}
+    >
+      {/* Hidden SVG holds gradient defs for url() reference */}
+      <svg aria-hidden style={{ position: 'absolute', width: 0, height: 0 }}>
+        <defs>
+          <linearGradient
+            id={gradientId}
+            gradientUnits="userSpaceOnUse"
+            x1="0"
+            x2="72"
+            y1="12"
+            y2="12"
+          >
+            <stop offset="0%" stopColor={colorFrom} />
+            <stop offset="33%" stopColor={colorMid} />
+            <stop offset="66%" stopColor={colorTo} />
+            <stop offset="100%" stopColor={colorFrom} />
+            <animateTransform
+              attributeName="gradientTransform"
+              type="translate"
+              values="0 0; -48 0"
+              dur={`${duration}s`}
+              repeatCount="indefinite"
+            />
+          </linearGradient>
+        </defs>
+      </svg>
+      <Sparkles
+        stroke={`url(#${gradientId})`}
+        className="size-full"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden
+      />
+    </span>
+  );
+}
+
+export interface AnimatedGradientTextProps
+  extends ComponentPropsWithoutRef<'div'> {
+  speed?: number;
+  colorFrom?: string;
+  colorTo?: string;
+  colorMid?: string;
+}
+
+/**
+ * Animated gradient text effect for Ideas experiment.
+ * Based on Magic UI: https://magicui.design/docs/components/animated-gradient-text
+ */
+export function AnimatedGradientText({
+  children,
+  className,
+  speed = 1,
+  colorFrom = '#22d3ee',
+  colorTo = '#0891b2',
+  colorMid,
+  style,
+  ...props
+}: AnimatedGradientTextProps) {
+  const duration = 8 / speed;
+  const gradient =
+    colorMid != null
+      ? `linear-gradient(to right, ${colorFrom}, ${colorMid}, ${colorTo}, ${colorFrom})`
+      : `linear-gradient(to right, ${colorFrom}, ${colorTo}, ${colorFrom})`;
+  return (
+    <div
+      className={cn('inline-block bg-clip-text text-transparent', className)}
+      style={{
+        backgroundImage: gradient,
+        backgroundSize: '300% 100%',
+        animation: `ideas-gradient ${duration}s linear infinite`,
+        ...style,
+      }}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/packages/apollo-wind/src/templates/Experiments/ideas-experiments.css b/packages/apollo-wind/src/templates/Experiments/ideas-experiments.css
new file mode 100644
index 000000000..75b3fdb6a
--- /dev/null
+++ b/packages/apollo-wind/src/templates/Experiments/ideas-experiments.css
@@ -0,0 +1,10 @@
+/**
+ * Ideas experiment — shared styles.
+ * Kept here so concepts can be promoted or removed as a unit.
+ */
+
+@keyframes ideas-gradient {
+  to {
+    background-position: var(--bg-size, 300%) 0;
+  }
+}
diff --git a/packages/apollo-wind/src/templates/Experiments/ideas.stories.tsx b/packages/apollo-wind/src/templates/Experiments/ideas.stories.tsx
new file mode 100644
index 000000000..ea1bb416f
--- /dev/null
+++ b/packages/apollo-wind/src/templates/Experiments/ideas.stories.tsx
@@ -0,0 +1,956 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { LiveProvider, LivePreview, LiveError } from 'react-live';
+import './ideas-experiments.css';
+import {
+  AnimatedGradientIcon,
+  AnimatedGradientText,
+} from './ideas-AnimatedGradientText';
+import {
+  AlertCircle,
+  ChevronLeft,
+  Clipboard,
+  ClipboardCheck,
+  CornerRightUp,
+  GripVertical,
+  LayoutDashboard,
+  Lightbulb,
+  Loader2,
+  MessageSquare,
+  Minus,
+  RotateCcw,
+  Settings,
+  Trash2,
+  User,
+  Workflow,
+  X,
+} from 'lucide-react';
+import { cn } from '@/lib';
+import { fontFamily } from '@/foundation/Future/typography';
+import type { FutureTheme } from '@/foundation/Future/types';
+
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Separator } from '@/components/ui/separator';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Progress } from '@/components/ui/progress';
+import { Switch } from '@/components/ui/switch';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+
+// Template components — available to the LLM via liveScope
+import { MaestroTemplate, Canvas, Grid, GridItem } from '../Maestro/template-maestro';
+import { Panel } from '@/components/custom/panel-maestro';
+import { FlowTemplate } from '../Flow/template-flow';
+import { DelegateTemplate } from '../Delegate/template-delegate';
+import {
+  AdminTemplate,
+  AdminSidebar,
+  AdminSidebarHeader,
+  AdminSidebarNav,
+  AdminPageHeader,
+  AdminToolbar,
+} from '../Admin/template-admin';
+
+// ============================================================================
+// Meta
+// ============================================================================
+
+const meta = {
+  title: 'Experiments/Ideas',
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Types
+// ============================================================================
+
+interface ChatMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp: Date;
+}
+
+// ============================================================================
+// react-live scope — components the LLM can use in generated JSX
+// ============================================================================
+
+const baseLiveScope = {
+  React,
+  cn,
+  // UI components
+  Button,
+  Badge,
+  Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,
+  Input,
+  Label,
+  Separator,
+  ScrollArea,
+  Avatar, AvatarFallback, AvatarImage,
+  Progress,
+  Switch,
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+  // Templates & layout primitives
+  MaestroTemplate, Canvas, Grid, GridItem, Panel,
+  FlowTemplate,
+  DelegateTemplate,
+  AdminTemplate, AdminSidebar, AdminSidebarHeader, AdminSidebarNav, AdminPageHeader, AdminToolbar,
+};
+
+// ============================================================================
+// Anthropic API
+// ============================================================================
+
+const ANTHROPIC_API_KEY = import.meta.env.VITE_ANTHROPIC_API_KEY ?? '';
+const ANTHROPIC_API_URL =
+  import.meta.env.VITE_ANTHROPIC_API_URL ?? 'https://api.anthropic.com/v1/messages';
+
+type TemplateChoice = 'maestro' | 'admin' | 'flow' | 'delegate' | 'freeform';
+
+function getTemplateInstruction(template: TemplateChoice): string {
+  switch (template) {
+    case 'maestro':
+      return `The user selected the MAESTRO template. You MUST wrap the entire output in:
+<MaestroTemplate theme={currentTheme} title="Maestro">
+  ...content here...
+</MaestroTemplate>
+
+MaestroTemplate props: theme, title, tenantName, defaultLeftPanelCollapsed, leftPanelContent (ReactNode), defaultRightPanelCollapsed, rightPanelContent (ReactNode), children (main canvas).
+Sub-components available: Canvas (scrollable main area), Grid + GridItem (responsive grid), Panel (collapsible side panel).
+Use Grid with GridItem children for dashboard-style card layouts. GridItem accepts colSpan and rowSpan for sizing.
+leftPanelContent and rightPanelContent render inside collapsible panels.`;
+
+    case 'admin':
+      return `The user selected the ADMIN template. You MUST wrap the entire output in:
+<AdminTemplate theme={currentTheme} title="Administration">
+  ...content here...
+</AdminTemplate>
+
+AdminTemplate props: theme, title, menuContent (ReactNode for header drawer), sidebar (ReactNode), children (main area).
+Sub-components available:
+- AdminSidebar (width prop, contains sidebar content)
+- AdminSidebarHeader (title, icon, actions props)
+- AdminSidebarNav (items array of {id, label, icon?, badge?}, selectedId, onSelect)
+- AdminPageHeader (title, breadcrumb as string[], actions, tabs array of {value,label}, activeTab, onTabChange)
+- AdminToolbar (children for left filters, actions for right side)
+Pass sidebar={<AdminSidebar width={280}>...</AdminSidebar>} to AdminTemplate for a sidebar layout.
+Children of AdminTemplate become the main content: use AdminPageHeader, AdminToolbar, then your table/content.`;
+
+    case 'flow':
+      return `The user selected the FLOW template. You MUST wrap the entire output in:
+<FlowTemplate theme={currentTheme}>
+  ...content here...
+</FlowTemplate>
+
+FlowTemplate props: theme, defaultPanelOpen (boolean), flowName, flowType, children (canvas content).
+This is a flow/workflow editor layout with a left chat panel, canvas area, and properties bar.
+The children render in the main canvas area. Use it for workflow visualizations, node editors, and process diagrams.`;
+
+    case 'delegate':
+      return `The user selected the DELEGATE template. You MUST wrap the entire output in:
+<DelegateTemplate theme={currentTheme}>
+  ...content here...
+</DelegateTemplate>
+
+DelegateTemplate props: theme, defaultPanelOpen (boolean), navItems (array of nav sections), selectedChildId, onChildSelect, children (canvas content).
+This is a delegate/agent layout with a collapsible navigation panel on the left and a main canvas.
+Use it for chat interfaces, agent dashboards, and tool card layouts.`;
+
+    case 'freeform':
+      return `The user selected FREEFORM mode — no template wrapper.
+Generate raw JSX layout using the available UI components and Tailwind classes.
+Wrap in a single <div> with appropriate sizing (e.g. className="p-6 space-y-6").
+This is useful for standalone components, cards, forms, or experimental layouts.`;
+  }
+}
+
+function buildSystemPrompt(persona: string, template: TemplateChoice) {
+  const componentList = Object.keys(baseLiveScope)
+    .filter((k) => k !== 'React' && k !== 'cn')
+    .join(', ');
+
+  const templateInstruction = getTemplateInstruction(template);
+
+  return `You are an expert UI developer. The user will describe a layout or page idea.
+You MUST respond with ONLY valid JSX code — no markdown fences, no explanation, no imports.
+The code will be rendered directly by react-live, so it must be a single JSX expression
+(wrap in a fragment <></> or a <div> if needed).
+
+Available components (already in scope — do NOT import):
+${componentList}
+
+Also available:
+- cn() utility for conditional classNames
+- currentTheme — a string variable holding the active theme name (e.g. "dark", "light"). Pass it as theme={currentTheme} to template components.
+- All standard HTML elements
+
+TEMPLATE LAYOUT:
+${templateInstruction}
+
+STYLING — Follow these rules exactly.
+
+The environment uses CSS custom properties. Both "future-*" semantic tokens and shadcn bridge tokens resolve correctly.
+
+Component usage patterns:
+- Card: <Card className="bg-card text-card-foreground"> with CardHeader (CardTitle, CardDescription), CardContent, CardFooter
+- Table: <Table> with <TableHeader> rows using <TableHead className="text-muted-foreground"> and <TableBody> cells using <TableCell className="text-foreground">
+- Badge: <Badge> (default), <Badge variant="outline">, <Badge variant="secondary">, <Badge variant="destructive">
+- Button: <Button> (default), <Button variant="outline">, <Button variant="ghost">, <Button variant="secondary">, <Button variant="destructive">
+- Input: <Input placeholder="..." /> (styled by default)
+- Progress: <Progress value={n} />
+- Avatar: <Avatar><AvatarImage src="..." /><AvatarFallback>AB</AvatarFallback></Avatar>
+- ScrollArea: <ScrollArea className="h-[300px]">...content...</ScrollArea>
+- Separator: <Separator /> for visual dividers
+
+Bridge tokens (preferred for content inside templates — cross-theme safe):
+- Surfaces: bg-background, bg-card, bg-muted, bg-muted/50, bg-primary, bg-primary/10
+- Text: text-foreground, text-muted-foreground, text-card-foreground, text-primary, text-primary-foreground
+- Borders: border-border, border-input
+
+Future-specific tokens (also available):
+- Surfaces: bg-future-surface, bg-future-surface-raised, bg-future-surface-overlay, bg-future-surface-hover
+- Text: text-future-foreground, text-future-foreground-muted, text-future-foreground-subtle, text-future-foreground-accent
+- Borders: border-future-border, border-future-border-subtle
+- Accent: bg-future-accent, bg-future-accent-subtle
+
+Common layout patterns:
+- Section header: <div className="flex items-center justify-between"><div><h2 className="text-lg font-semibold text-foreground">Title</h2><p className="text-sm text-muted-foreground">Description</p></div><Button>Action</Button></div>
+- Card grid: <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+- Stat card: <Card className="bg-card"><CardContent className="pt-6"><p className="text-sm text-muted-foreground">Label</p><span className="text-2xl font-bold text-foreground">1,234</span><p className="text-xs text-primary">+12%</p></CardContent></Card>
+- Stats row: <div className="grid grid-cols-4 gap-4">{stat cards}</div>
+
+The user's role is "${persona}" — tailor content and terminology to that persona.
+
+Rules:
+- Return ONLY the JSX. No prose, no markdown, no code fences.
+- Use className, not class.
+- Do not use hooks (useState, useEffect, etc.) — the JSX is a static render expression.
+- Make the layout visually polished, using spacing, rounded corners, and the component library.
+- Fill in realistic sample data (names, numbers, labels) rather than placeholder text.
+- The output renders inside a container that is the full viewport height. Templates already handle h-screen, so do NOT add h-screen to your outermost element.
+- Always use the shadcn components (Card, Table, Button, Badge, etc.) instead of raw HTML when available.
+- Do NOT use raw hex colors or Tailwind palette (bg-zinc-900, text-gray-400). Always use semantic tokens.
+- Do NOT use bg-black or bg-white — use bg-background, bg-card, or bg-future-surface instead.`;
+}
+
+async function callClaude(
+  messages: { role: 'user' | 'assistant'; content: string }[],
+  systemPrompt: string,
+): Promise<string> {
+  const res = await fetch(ANTHROPIC_API_URL, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'x-api-key': ANTHROPIC_API_KEY,
+      'anthropic-version': '2023-06-01',
+      'anthropic-dangerous-direct-browser-access': 'true',
+    },
+    body: JSON.stringify({
+      model: 'claude-sonnet-4-20250514',
+      max_tokens: 4096,
+      system: systemPrompt,
+      messages,
+    }),
+  });
+
+  if (!res.ok) {
+    const errorBody = await res.text();
+    throw new Error(`Anthropic API error ${res.status}: ${errorBody}`);
+  }
+
+  const data = await res.json();
+  const text: string = data.content?.[0]?.text ?? '';
+
+  // Strip markdown fences if the model wraps them anyway
+  return text
+    .replace(/^```(?:jsx|tsx|javascript|typescript)?\n?/i, '')
+    .replace(/\n?```\s*$/i, '')
+    .trim();
+}
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+function resolveThemeClass(theme: FutureTheme) {
+  if (theme === 'legacy-dark') return 'legacy-dark';
+  if (theme === 'legacy-light') return 'legacy-light';
+  if (theme === 'wireframe') return 'future-wireframe';
+  if (theme === 'vertex') return 'future-vertex';
+  if (theme === 'canvas') return 'future-canvas';
+  if (theme === 'light') return 'future-light';
+  return 'future-dark';
+}
+
+// ============================================================================
+// Floating Chat Widget
+// ============================================================================
+
+const PERSONAS = [
+  'Designer',
+  'Product Manager',
+  'Engineer',
+  'Data Scientist',
+  'Sales',
+  'Executive',
+] as const;
+type Persona = (typeof PERSONAS)[number];
+
+const TEMPLATE_SUGGESTIONS: Record<TemplateChoice, string[]> = {
+  maestro: [
+    'Analytics dashboard with revenue and user charts',
+    'Overview page with KPI cards and recent activity',
+    'Monitoring dashboard with status panels',
+  ],
+  admin: [
+    'User management page with roles table',
+    'Settings page with sidebar navigation',
+    'Data management view with filters and pagination',
+  ],
+  flow: [
+    'Workflow list with 20 automation workflows',
+    'Process overview with status indicators',
+    'Pipeline editor canvas with connected nodes',
+  ],
+  delegate: [
+    'Agent chat with tool cards and suggestions',
+    'Conversation view with message history',
+    'Assistant dashboard with active sessions',
+  ],
+  freeform: [
+    'Pricing cards with feature comparison',
+    'User profile with stats and activity feed',
+    'Notification center with grouped alerts',
+  ],
+};
+
+const TEMPLATE_OPTIONS: { value: TemplateChoice; label: string; description: string; icon: React.ReactNode }[] = [
+  { value: 'maestro', label: 'Maestro', description: 'Dashboard with panels & grid', icon: <LayoutDashboard className="h-4 w-4" /> },
+  { value: 'admin', label: 'Admin', description: 'Sidebar, header & data tables', icon: <Settings className="h-4 w-4" /> },
+  { value: 'flow', label: 'Flow', description: 'Workflow editor with canvas', icon: <Workflow className="h-4 w-4" /> },
+  { value: 'delegate', label: 'Delegate', description: 'Agent chat with nav panel', icon: <MessageSquare className="h-4 w-4" /> },
+  { value: 'freeform', label: 'Freeform', description: 'No template — raw components', icon: <Lightbulb className="h-4 w-4" /> },
+];
+
+interface FloatingChatProps {
+  globalTheme: FutureTheme;
+  onCodeGenerated: (code: string) => void;
+  onGeneratingChange: (generating: boolean) => void;
+  isGenerating: boolean;
+  onClearCanvas: () => void;
+}
+
+function FloatingChat({
+  globalTheme,
+  onCodeGenerated,
+  onGeneratingChange,
+  isGenerating,
+  onClearCanvas,
+}: FloatingChatProps) {
+  const [isCollapsed, setIsCollapsed] = React.useState(false);
+  const [messages, setMessages] = React.useState<ChatMessage[]>([]);
+  const [inputValue, setInputValue] = React.useState('');
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [position, setPosition] = React.useState({ x: 0, y: 0 });
+  const [hasCustomPosition, setHasCustomPosition] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+  const dragRef = React.useRef<HTMLDivElement>(null);
+  const dragOffset = React.useRef({ x: 0, y: 0 });
+  const messagesEndRef = React.useRef<HTMLDivElement>(null);
+
+  const [persona, setPersona] = React.useState<Persona | null>(null);
+  const [selectedTemplate, setSelectedTemplate] = React.useState<TemplateChoice | null>(null);
+
+  const isSetupComplete = persona !== null && selectedTemplate !== null;
+  const setupStep: 'persona' | 'template' = persona === null ? 'persona' : 'template';
+
+  React.useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  // ----- Drag logic -----
+  const handleDragPointerDown = (e: React.PointerEvent) => {
+    if ((e.target as HTMLElement).closest('button')) return;
+    e.preventDefault();
+    setIsDragging(true);
+    const el = dragRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    dragOffset.current = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+  };
+
+  const handleDragPointerMove = (e: React.PointerEvent) => {
+    if (!isDragging) return;
+    const el = dragRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const maxX = window.innerWidth - rect.width;
+    const maxY = window.innerHeight - rect.height;
+    setPosition({
+      x: Math.max(0, Math.min(e.clientX - dragOffset.current.x, maxX)),
+      y: Math.max(0, Math.min(e.clientY - dragOffset.current.y, maxY)),
+    });
+    setHasCustomPosition(true);
+  };
+
+  const handleDragPointerUp = (e: React.PointerEvent) => {
+    if (!isDragging) return;
+    setIsDragging(false);
+    (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
+  };
+
+  // ----- Full reset -----
+  const handleReset = () => {
+    setMessages([]);
+    setInputValue('');
+    setPersona(null);
+    setSelectedTemplate(null);
+    setError(null);
+    onClearCanvas();
+  };
+
+  // ----- Chat submit — calls Claude -----
+  const handleSubmit = async () => {
+    if (!inputValue.trim() || !isSetupComplete || isGenerating) return;
+
+    const userMessage: ChatMessage = {
+      id: crypto.randomUUID(),
+      role: 'user',
+      content: inputValue.trim(),
+      timestamp: new Date(),
+    };
+
+    const updatedMessages = [...messages, userMessage];
+    setMessages(updatedMessages);
+    setInputValue('');
+    setError(null);
+
+    if (!ANTHROPIC_API_KEY || ANTHROPIC_API_KEY === 'your-api-key-here') {
+      setError('Add your Anthropic API key to packages/apollo-wind/.env');
+      return;
+    }
+
+    onGeneratingChange(true);
+
+    try {
+      const systemPrompt = buildSystemPrompt(persona, selectedTemplate);
+
+      const apiMessages = updatedMessages.map((m) => ({
+        role: m.role,
+        content: m.content,
+      }));
+
+      const code = await callClaude(apiMessages, systemPrompt);
+
+      onCodeGenerated(code);
+
+      const assistantMessage: ChatMessage = {
+        id: crypto.randomUUID(),
+        role: 'assistant',
+        content: 'Layout generated on canvas. You can describe changes to iterate.',
+        timestamp: new Date(),
+      };
+      setMessages((prev) => [...prev, assistantMessage]);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : 'Unknown error';
+      setError(msg);
+      const errorMessage: ChatMessage = {
+        id: crypto.randomUUID(),
+        role: 'assistant',
+        content: `Error generating layout. ${msg}`,
+        timestamp: new Date(),
+      };
+      setMessages((prev) => [...prev, errorMessage]);
+    } finally {
+      onGeneratingChange(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  // ----- Positioning -----
+  const positionStyle: React.CSSProperties = hasCustomPosition
+    ? { position: 'fixed', left: position.x, top: position.y }
+    : { position: 'fixed', right: 24, bottom: 24 };
+
+  // ----- Collapsed state -----
+  if (isCollapsed) {
+    return (
+      <div
+        ref={dragRef}
+        data-drag-handle
+        className="z-50 select-none"
+        style={{ ...positionStyle, cursor: isDragging ? 'grabbing' : 'default' }}
+        onPointerDown={handleDragPointerDown}
+        onPointerMove={handleDragPointerMove}
+        onPointerUp={handleDragPointerUp}
+      >
+        <div className="flex items-center gap-2 rounded-full border border-future-border bg-future-surface-raised px-3 py-2.5 shadow-lg transition-all hover:bg-future-surface-hover">
+          <GripVertical className="h-3.5 w-3.5 shrink-0 cursor-grab text-future-foreground-subtle active:cursor-grabbing" />
+          <button onClick={() => setIsCollapsed(false)} className="flex items-center gap-2">
+            <AnimatedGradientIcon className="h-4 w-4" />
+            <span className="text-sm font-medium text-future-foreground">Ideas</span>
+            {messages.length > 0 && (
+              <span className="flex h-5 min-w-5 items-center justify-center rounded-full bg-future-accent px-1 text-[10px] font-bold text-future-foreground-on-accent">
+                {messages.length}
+              </span>
+            )}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  // ----- Expanded state -----
+  return (
+    <div
+      ref={dragRef}
+      className={cn(
+        'z-50 flex w-[320px] flex-col overflow-hidden rounded-2xl border border-future-border bg-future-surface-raised shadow-2xl select-none',
+        isDragging ? 'ring-2 ring-future-accent/30' : ''
+      )}
+      style={{ ...positionStyle, height: 480 }}
+    >
+      {/* Title bar — drag handle */}
+      <div
+        data-drag-handle
+        className="flex h-11 shrink-0 cursor-grab items-center justify-between border-b border-future-border-subtle bg-future-surface-overlay px-3 active:cursor-grabbing"
+        onPointerDown={handleDragPointerDown}
+        onPointerMove={handleDragPointerMove}
+        onPointerUp={handleDragPointerUp}
+      >
+        <div className="flex items-center gap-2">
+          <GripVertical className="h-3.5 w-3.5 text-future-foreground-subtle" />
+          <AnimatedGradientIcon className="h-3.5 w-3.5" />
+          <span className="text-sm font-medium text-future-foreground">Ideas Assistant</span>
+        </div>
+        <div className="flex items-center gap-0.5">
+          {(isSetupComplete || messages.length > 0) && (
+            <button
+              onClick={handleReset}
+              className="flex h-6 w-6 items-center justify-center rounded-md text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground"
+              aria-label="Reset"
+            >
+              <X className="h-3.5 w-3.5" />
+            </button>
+          )}
+          <button
+            onClick={() => setIsCollapsed(true)}
+            className="flex h-6 w-6 items-center justify-center rounded-md text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground"
+            aria-label="Collapse chat"
+          >
+            <Minus className="h-3.5 w-3.5" />
+          </button>
+        </div>
+      </div>
+
+      {/* Context bar */}
+      <div className="flex h-8 shrink-0 items-center gap-2 border-b border-future-border-subtle bg-future-surface-overlay/50 px-3">
+        {!isSetupComplete && setupStep === 'template' && (
+          <button
+            onClick={() => setPersona(null)}
+            className="flex items-center gap-0.5 rounded-md px-1.5 py-0.5 text-[10px] text-future-foreground-subtle transition-colors hover:bg-future-surface-hover hover:text-future-foreground-muted"
+          >
+            <ChevronLeft className="h-3 w-3" />
+            Back
+          </button>
+        )}
+        {!isSetupComplete && setupStep === 'persona' && (
+          <span className="text-[10px] text-future-foreground-subtle">Step 1 of 2</span>
+        )}
+        {!isSetupComplete && setupStep === 'template' && (
+          <>
+            <span className="text-future-foreground-subtle">·</span>
+            <span className="text-[10px] text-future-foreground-subtle">Step 2 of 2</span>
+          </>
+        )}
+        {persona && (
+          <button
+            onClick={() => setPersona(null)}
+            className="flex items-center gap-1 rounded-md bg-future-accent/10 px-2 py-0.5 text-[10px] font-medium text-future-foreground-accent transition-colors hover:bg-future-accent/20"
+          >
+            <User className="h-2.5 w-2.5" />
+            {persona}
+          </button>
+        )}
+        {persona && selectedTemplate && (
+          <>
+            <span className="text-future-foreground-subtle">·</span>
+            <button
+              onClick={() => setSelectedTemplate(null)}
+              className="flex items-center gap-1 rounded-md bg-future-accent/10 px-2 py-0.5 text-[10px] font-medium text-future-foreground-accent transition-colors hover:bg-future-accent/20"
+            >
+              {TEMPLATE_OPTIONS.find((t) => t.value === selectedTemplate)?.icon}
+              {TEMPLATE_OPTIONS.find((t) => t.value === selectedTemplate)?.label}
+            </button>
+          </>
+        )}
+      </div>
+
+      {/* Main content area */}
+      <div className="flex-1 overflow-y-auto px-3 py-3">
+        {!isSetupComplete ? (
+          <div className="flex h-full flex-col">
+            {setupStep === 'persona' ? (
+              <div className="flex flex-1 flex-col items-center justify-center gap-3">
+                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-future-accent/10">
+                  <User className="h-5 w-5 text-future-foreground-accent" />
+                </div>
+                <div className="text-center">
+                  <p className="text-[12px] font-medium text-future-foreground">I am a...</p>
+                  <p className="mt-1 text-[11px] leading-4 text-future-foreground-muted">
+                    Select your role to personalize the output.
+                  </p>
+                </div>
+                <div className="mt-1 grid w-full grid-cols-2 gap-1.5">
+                  {PERSONAS.map((p) => (
+                    <button
+                      key={p}
+                      onClick={() => setPersona(p)}
+                      className="rounded-lg border border-future-border-subtle px-3 py-1.5 text-[12px] font-normal text-future-foreground-muted transition-colors hover:border-future-accent hover:bg-future-accent/10 hover:text-future-foreground"
+                    >
+                      {p}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            ) : (
+              <div className="flex flex-1 flex-col items-center justify-center gap-3">
+                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-future-accent/10">
+                  <LayoutDashboard className="h-5 w-5 text-future-foreground-accent" />
+                </div>
+                <div className="text-center">
+                  <p className="text-[12px] font-medium text-future-foreground">Use template...</p>
+                  <p className="mt-1 text-[11px] leading-4 text-future-foreground-muted">
+                    Pick a base layout for the generated output.
+                  </p>
+                </div>
+                <div className="mt-1 flex w-full flex-col gap-1.5">
+                  {TEMPLATE_OPTIONS.map((t) => (
+                    <button
+                      key={t.value}
+                      onClick={() => setSelectedTemplate(t.value)}
+                      className="flex items-center gap-2.5 rounded-lg border border-future-border-subtle px-3 py-2 text-left transition-colors hover:border-future-accent hover:bg-future-accent/10"
+                    >
+                      <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-future-surface-overlay text-future-foreground-muted">
+                        {t.icon}
+                      </span>
+                      <div className="min-w-0">
+                        <p className="text-[12px] font-medium text-future-foreground">{t.label}</p>
+                        <p className="text-[10px] leading-tight text-future-foreground-subtle">{t.description}</p>
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        ) : messages.length === 0 ? (
+          <div className="flex h-full flex-col items-center justify-center gap-3 text-center">
+            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-future-accent/10">
+              <Lightbulb className="h-5 w-5 text-future-foreground-accent" />
+            </div>
+            <div>
+              <p className="text-sm font-medium text-future-foreground">
+                What would you like to build?
+              </p>
+              <p className="mt-1 text-[11px] leading-4 text-future-foreground-muted">
+                Describe a layout and I'll generate it on the canvas.
+              </p>
+            </div>
+            <div className="mt-2 flex w-full flex-col gap-1.5">
+              {(TEMPLATE_SUGGESTIONS[selectedTemplate ?? 'freeform'] ?? []).map((suggestion) => (
+                <button
+                  key={suggestion}
+                  onClick={() => setInputValue(suggestion)}
+                  className="w-full rounded-lg border border-future-border-subtle px-3 py-2 text-left text-[11px] text-future-foreground-muted transition-colors hover:border-future-border hover:bg-future-surface-hover hover:text-future-foreground"
+                >
+                  {suggestion}
+                </button>
+              ))}
+            </div>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-3">
+            {messages.map((msg) => (
+              <div
+                key={msg.id}
+                className={cn(
+                  'max-w-[85%] rounded-xl px-3 py-2 text-xs leading-relaxed',
+                  msg.role === 'user'
+                    ? 'ml-auto bg-future-accent text-future-foreground-on-accent'
+                    : 'mr-auto bg-future-surface-overlay text-future-foreground'
+                )}
+              >
+                {msg.content}
+              </div>
+            ))}
+            {isGenerating && (
+              <div className="mr-auto flex items-center gap-2 rounded-xl bg-future-surface-overlay px-3 py-2">
+                <Loader2 className="h-3 w-3 animate-spin text-future-accent" />
+                <span className="text-xs text-future-foreground-muted">Generating...</span>
+              </div>
+            )}
+            <div ref={messagesEndRef} />
+          </div>
+        )}
+      </div>
+
+      {/* Error banner */}
+      {error && (
+        <div className="flex items-center gap-2 border-t border-red-500/20 bg-red-500/10 px-3 py-2">
+          <AlertCircle className="h-3 w-3 shrink-0 text-red-400" />
+          <span className="text-[10px] leading-tight text-red-400">{error}</span>
+        </div>
+      )}
+
+      {/* Input area */}
+      <div className={cn(
+        'shrink-0 border-t border-future-border-subtle p-2',
+        (!isSetupComplete || isGenerating) && 'pointer-events-none opacity-40'
+      )}>
+        <div className="flex items-end gap-1.5 rounded-xl bg-future-surface-overlay px-3 py-2">
+          <textarea
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={isSetupComplete ? 'Describe your idea...' : 'Complete setup above...'}
+            rows={1}
+            disabled={!isSetupComplete || isGenerating}
+            className="max-h-16 flex-1 resize-none bg-transparent text-xs leading-relaxed text-future-foreground placeholder:text-future-foreground-subtle focus:outline-none disabled:cursor-not-allowed"
+          />
+          <button
+            onClick={handleSubmit}
+            disabled={!inputValue.trim() || !isSetupComplete || isGenerating}
+            className="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg bg-future-accent transition-opacity hover:opacity-90 disabled:opacity-30"
+            aria-label="Send message"
+          >
+            <CornerRightUp className="h-3 w-3 text-future-foreground-on-accent" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// Ideas Canvas
+// ============================================================================
+
+interface IdeasCanvasProps {
+  theme: FutureTheme;
+  generatedCode: string;
+  isGenerating: boolean;
+}
+
+function IdeasCanvas({ theme, generatedCode, isGenerating }: IdeasCanvasProps) {
+  const themeClass = resolveThemeClass(theme);
+
+  const liveScope = React.useMemo(
+    () => ({ ...baseLiveScope, currentTheme: theme }),
+    [theme]
+  );
+
+  // Empty state
+  if (!generatedCode && !isGenerating) {
+    return (
+      <div className="relative flex h-full w-full items-center justify-center">
+        <div
+          className="absolute inset-0"
+          style={{
+            backgroundImage:
+              'linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px)',
+            backgroundSize: '40px 40px',
+          }}
+        />
+        <div className="relative flex flex-col items-center gap-4 text-center">
+          <div className="flex h-16 w-16 items-center justify-center rounded-2xl border border-future-border-subtle bg-future-surface-raised">
+            <Lightbulb className="h-8 w-8 text-future-foreground-subtle" />
+          </div>
+          <div>
+            <h2 className="text-lg font-semibold text-future-foreground">Your canvas is empty</h2>
+            <p className="mt-1 max-w-sm text-sm text-future-foreground-muted">
+              Use the chat assistant in the bottom right to describe what you'd like to build. Your
+              generated layouts will appear here.
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Loading state
+  if (isGenerating && !generatedCode) {
+    return (
+      <div className="flex h-full w-full items-center justify-center">
+        <div className="flex flex-col items-center gap-4">
+          <Loader2 className="h-10 w-10 animate-spin text-future-accent" />
+          <p className="text-sm text-future-foreground-muted">Generating layout...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Live preview
+  return (
+    <div className="relative h-full w-full overflow-auto">
+      <div
+        className="absolute inset-0"
+        style={{
+          backgroundImage:
+            'linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px)',
+          backgroundSize: '40px 40px',
+        }}
+      />
+      <div className={cn(themeClass, 'relative h-full')} style={{ fontFamily: fontFamily.base }}>
+        <LiveProvider code={generatedCode} scope={liveScope} noInline={false}>
+          <LivePreview className="h-full" />
+          <LiveError className="mt-4 rounded-lg border border-red-500/20 bg-red-500/10 p-4 font-mono text-xs text-red-400" />
+        </LiveProvider>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// Ideas Page
+// ============================================================================
+
+function IdeasPage({ globalTheme }: { globalTheme: string }) {
+  const theme: FutureTheme =
+    globalTheme === 'legacy-dark'
+      ? 'legacy-dark'
+      : globalTheme === 'legacy-light'
+        ? 'legacy-light'
+        : globalTheme === 'wireframe'
+          ? 'wireframe'
+          : globalTheme === 'vertex'
+            ? 'vertex'
+            : globalTheme === 'canvas'
+              ? 'canvas'
+              : globalTheme === 'light'
+                ? 'light'
+                : 'dark';
+
+  const [generatedCode, setGeneratedCode] = React.useState('');
+  const [isGenerating, setIsGenerating] = React.useState(false);
+  const [copied, setCopied] = React.useState(false);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(generatedCode);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const handleClear = () => {
+    setGeneratedCode('');
+  };
+
+  return (
+    <div
+      className={cn(
+        resolveThemeClass(theme),
+        'flex h-screen w-full flex-col bg-future-surface text-foreground'
+      )}
+      style={{ fontFamily: fontFamily.base }}
+    >
+      {/* Top bar */}
+      <div className="flex h-12 shrink-0 items-center justify-between border-b border-future-border-subtle px-5">
+        <div className="flex items-center gap-2.5">
+          <AnimatedGradientIcon className="h-4 w-4" />
+          <span className="text-sm font-semibold text-future-foreground">Ideas</span>
+          <AnimatedGradientText
+            colorMid="#FA4616"
+            className="text-[10px] font-semibold uppercase tracking-wider"
+          >
+            EXPERIMENT
+          </AnimatedGradientText>
+        </div>
+        <div className="flex items-center gap-2">
+          {generatedCode ? (
+            <>
+              <button
+                onClick={handleCopy}
+                className="flex h-7 items-center gap-1.5 rounded-lg border border-future-border px-2.5 text-[11px] font-medium text-future-foreground-muted transition-colors hover:border-future-border-hover hover:text-future-foreground"
+              >
+                {copied ? (
+                  <>
+                    <ClipboardCheck className="h-3 w-3" />
+                    Copied
+                  </>
+                ) : (
+                  <>
+                    <Clipboard className="h-3 w-3" />
+                    Copy JSX
+                  </>
+                )}
+              </button>
+              <button
+                onClick={handleClear}
+                className="flex h-7 items-center gap-1.5 rounded-lg border border-future-border px-2.5 text-[11px] font-medium text-future-foreground-muted transition-colors hover:border-red-500/50 hover:text-red-400"
+              >
+                <Trash2 className="h-3 w-3" />
+                Clear
+              </button>
+            </>
+          ) : (
+            <span className="text-[11px] text-future-foreground-subtle">
+              Describe an idea — see it come to life
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Canvas area */}
+      <div className="relative flex-1 overflow-hidden">
+        <IdeasCanvas
+          theme={theme}
+          generatedCode={generatedCode}
+          isGenerating={isGenerating}
+        />
+      </div>
+
+      {/* Floating chat widget */}
+      <FloatingChat
+        globalTheme={theme}
+        onCodeGenerated={setGeneratedCode}
+        onGeneratingChange={setIsGenerating}
+        isGenerating={isGenerating}
+        onClearCanvas={handleClear}
+      />
+    </div>
+  );
+}
+
+// ============================================================================
+// Story
+// ============================================================================
+
+export const Default: Story = {
+  name: 'Ideas',
+  render: (_, { globals }) => (
+    <IdeasPage globalTheme={globals.futureTheme || 'dark'} />
+  ),
+};
diff --git a/packages/apollo-wind/src/templates/Flow/flow.stories.tsx b/packages/apollo-wind/src/templates/Flow/flow.stories.tsx
index 9cec41676..7be09e52c 100644
--- a/packages/apollo-wind/src/templates/Flow/flow.stories.tsx
+++ b/packages/apollo-wind/src/templates/Flow/flow.stories.tsx
@@ -1,8 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { FlowPanelChatMessage } from '@/components/custom/panel-flow';
 import { FlowTemplate } from './template-flow';
 import type { PropertiesSimpleField, PropertiesSimpleSection } from './template-flow';
-import { FlowNode } from '@/components/custom/flow-node';
-import type { FlowPanelChatMessage } from '@/components/custom/panel-flow';
 
 const meta = {
   title: 'Templates/Flow',
@@ -34,19 +33,14 @@ const chatMessages: FlowPanelChatMessage[] = [
   },
 ];
 
-export const ChatResponse: Story = {
-  name: 'Chat Response',
+export const LeftPanelExpanded: Story = {
+  name: 'Left panel expanded',
   render: (_, { globals }) => (
     <FlowTemplate
       theme={globals.futureTheme || 'dark'}
       defaultPanelOpen
       chatMessages={chatMessages}
-    >
-      {/* Node centered on the canvas */}
-      <div className="absolute inset-0 flex items-center justify-center">
-        <FlowNode title="Node title" />
-      </div>
-    </FlowTemplate>
+    />
   ),
 };
 
@@ -145,12 +139,7 @@ export const PropertiesSimple: Story = {
       propertiesSimpleTitle="HTTP Request"
       propertiesSimpleFields={simpleFields}
       propertiesSimpleSections={simpleSections}
-    >
-      {/* Node positioned left-center on the canvas */}
-      <div className="absolute inset-0 flex items-center justify-start pl-16">
-        <FlowNode title="HTTP Request" />
-      </div>
-    </FlowTemplate>
+    />
   ),
 };
 
@@ -160,11 +149,6 @@ export const Properties: Story = {
     <FlowTemplate
       theme={globals.futureTheme || 'dark'}
       defaultPropertiesExpanded
-    >
-      {/* Node positioned left-center on the canvas */}
-      <div className="absolute inset-0 flex items-center justify-start pl-16">
-        <FlowNode title="Node title" />
-      </div>
-    </FlowTemplate>
+    />
   ),
 };
diff --git a/packages/apollo-wind/src/templates/Flow/template-flow.tsx b/packages/apollo-wind/src/templates/Flow/template-flow.tsx
index 06aaea2af..154d55a7f 100644
--- a/packages/apollo-wind/src/templates/Flow/template-flow.tsx
+++ b/packages/apollo-wind/src/templates/Flow/template-flow.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Canvas } from '@/components/custom/canvas';
-import { PropertiesBar } from '@/components/custom/flow-properties-bar';
-import { PropertiesExpanded } from '@/components/custom/flow-properties-expanded';
+import { FlowProperties } from '@/components/custom/flow-properties';
 import type {
   PropertiesSimpleField,
   PropertiesSimpleSection,
@@ -15,7 +14,7 @@ import {
 } from '@/components/custom/panel-flow';
 import { FlowCanvasToolbar } from '@/components/custom/toolbar-canvas';
 import { FlowViewToolbar } from '@/components/custom/toolbar-view';
-import { useViewportAtOrAbove, ViewportGuard } from '@/components/ui/viewport-guard';
+import { useViewportAtOrAbove, ViewportGuard } from '@/components/custom/viewport-guard';
 import type { FutureTheme } from '@/foundation/Future/types';
 import { fontFamily } from '@/foundation/Future/typography';
 import { cn } from '@/lib';
@@ -92,8 +91,8 @@ export interface FlowTemplateProps {
  * Composed of:
  * - **FlowPanel** — 60px icon rail + optional 420px expanded chat panel
  * - **Canvas** — main content area (reuses Delegate Canvas)
- * - **PropertiesBar** — collapsed bar top-right of canvas (default)
- * - **PropertiesExpanded** — full properties panel on the right (when expanded)
+ * - **FlowProperties** (collapsed) — bar top-right of canvas (default)
+ * - **FlowProperties** (expanded) — full properties panel on the right (when expanded)
  * - **FlowCanvasToolbar** — bottom-center of canvas
  * - **FlowViewToolbar** — bottom-right of canvas
  */
@@ -128,9 +127,15 @@ export function FlowTemplate({
       ? 'legacy-dark'
       : theme === 'legacy-light'
         ? 'legacy-light'
-        : theme === 'light'
-          ? 'future-light'
-          : 'future-dark';
+        : theme === 'wireframe'
+          ? 'future-wireframe'
+          : theme === 'vertex'
+            ? 'future-vertex'
+            : theme === 'canvas'
+              ? 'future-canvas'
+              : theme === 'light'
+                ? 'future-light'
+                : 'future-dark';
   React.useEffect(() => {
     document.body.classList.add(themeClass);
     return () => {
@@ -183,9 +188,15 @@ export function FlowTemplate({
             ? 'legacy-dark'
             : theme === 'legacy-light'
               ? 'legacy-light'
-              : theme === 'light'
-                ? 'future-light'
-                : 'future-dark',
+              : theme === 'wireframe'
+                ? 'future-wireframe'
+                : theme === 'vertex'
+                  ? 'future-vertex'
+                  : theme === 'canvas'
+                    ? 'future-canvas'
+                    : theme === 'light'
+                      ? 'future-light'
+                      : 'future-dark',
           'flex h-screen bg-future-surface',
           className
         )}
@@ -205,7 +216,12 @@ export function FlowTemplate({
           {/* Properties: collapsed bar (default) — hidden when expanded or simple panel is shown */}
           {!propsExpanded && !propsSimpleOpen && (
             <div className="absolute right-4 top-4 z-10 w-[680px] max-w-[calc(100%-32px)]">
-              <PropertiesBar flowName={flowName} flowType={flowType} onExpand={openPropsExpanded} />
+              <FlowProperties
+                expanded={false}
+                flowName={flowName}
+                flowType={flowType}
+                onExpand={openPropsExpanded}
+              />
             </div>
           )}
 
@@ -235,8 +251,9 @@ export function FlowTemplate({
         {/* Properties expanded panel — right side */}
         {propsExpanded && (
           <div className="shrink-0 p-4 pl-0">
-            <PropertiesExpanded
+            <FlowProperties
               className="h-full"
+              expanded
               nodeName={propertiesNodeName}
               nodeType={propertiesNodeType}
               onClose={() => setPropsExpanded(false)}
diff --git a/packages/apollo-wind/src/templates/Maestro/template-maestro.tsx b/packages/apollo-wind/src/templates/Maestro/template-maestro.tsx
index 03268b9fe..20d35b709 100644
--- a/packages/apollo-wind/src/templates/Maestro/template-maestro.tsx
+++ b/packages/apollo-wind/src/templates/Maestro/template-maestro.tsx
@@ -4,7 +4,7 @@ import { MaestroHeader } from '@/components/custom/global-header';
 import { Canvas, Grid, GridItem } from '@/components/custom/grid-maestro';
 import type { PanelProps } from '@/components/custom/panel-maestro';
 import { Panel } from '@/components/custom/panel-maestro';
-import { ViewportGuard } from '@/components/ui/viewport-guard';
+import { ViewportGuard } from '@/components/custom/viewport-guard';
 import type { FutureTheme } from '@/foundation/Future/types';
 import { fontFamily } from '@/foundation/Future/typography';
 import { cn } from '@/lib';
@@ -125,9 +125,15 @@ export function MaestroTemplate({
             ? 'legacy-dark'
             : theme === 'legacy-light'
               ? 'legacy-light'
-              : theme === 'light'
-                ? 'future-light'
-                : 'future-dark',
+              : theme === 'wireframe'
+                ? 'future-wireframe'
+                : theme === 'vertex'
+                  ? 'future-vertex'
+                  : theme === 'canvas'
+                    ? 'future-canvas'
+                    : theme === 'light'
+                      ? 'future-light'
+                      : 'future-dark',
           'flex h-screen flex-col bg-future-surface text-foreground',
           className
         )}
diff --git a/packages/apollo-wind/src/templates/Experiments/visualization.stories.tsx b/packages/apollo-wind/src/templates/Maestro/visualization.stories.tsx
similarity index 86%
rename from packages/apollo-wind/src/templates/Experiments/visualization.stories.tsx
rename to packages/apollo-wind/src/templates/Maestro/visualization.stories.tsx
index 18743c5fa..a8ed8ba6c 100644
--- a/packages/apollo-wind/src/templates/Experiments/visualization.stories.tsx
+++ b/packages/apollo-wind/src/templates/Maestro/visualization.stories.tsx
@@ -22,7 +22,7 @@ import {
   YAxis,
 } from 'recharts';
 
-import { MaestroTemplate } from '../Maestro/template-maestro';
+import { MaestroTemplate } from './template-maestro';
 import {
   Card,
   CardContent,
@@ -38,13 +38,14 @@ import {
   ChartTooltipContent,
   type ChartConfig,
 } from '@/components/ui/chart';
+import { Separator } from '@/components/ui/separator';
 
 // ============================================================================
 // Meta
 // ============================================================================
 
 const meta = {
-  title: 'Experiments/Visualization',
+  title: 'Templates/Maestro',
   parameters: {
     layout: 'fullscreen',
   },
@@ -807,6 +808,78 @@ function TooltipShowcase() {
   );
 }
 
+// ============================================================================
+// Panel chart examples (compact for left/right panels)
+// ============================================================================
+
+function LeftPanelCharts() {
+  return (
+    <div className="flex flex-col gap-4 p-6">
+      <div>
+        <p className="mb-2 text-xs font-medium text-future-foreground-muted">Traffic sources</p>
+        <ChartContainer config={pieSimpleConfig} className="aspect-square max-h-[120px] w-full">
+          <PieChart>
+            <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+            <Pie
+              data={pieSimpleData}
+              dataKey="value"
+              nameKey="segment"
+              strokeWidth={2}
+              innerRadius={28}
+            />
+            <ChartLegend content={<ChartLegendContent nameKey="segment" />} className="flex-wrap gap-1 text-xs [&>*]:basis-1/2" />
+          </PieChart>
+        </ChartContainer>
+      </div>
+      <Separator className="bg-future-border-subtle" />
+      <div>
+        <p className="mb-2 text-xs font-medium text-future-foreground-muted">Framework popularity</p>
+        <ChartContainer config={barHorizontalConfig} className="aspect-auto h-[140px] w-full">
+          <BarChart data={barHorizontalData} layout="vertical" margin={{ left: 40, right: 12 }}>
+            <CartesianGrid horizontal={false} />
+            <YAxis dataKey="category" type="category" tickLine={false} axisLine={false} tickMargin={4} width={36} tick={{ fontSize: 10 }} />
+            <XAxis type="number" tickLine={false} axisLine={false} tickMargin={4} tick={{ fontSize: 10 }} />
+            <ChartTooltip content={<ChartTooltipContent />} />
+            <Bar dataKey="value" fill="var(--color-value)" radius={4} />
+          </BarChart>
+        </ChartContainer>
+      </div>
+    </div>
+  );
+}
+
+function RightPanelCharts() {
+  return (
+    <div className="flex flex-col gap-4 p-6">
+      <div className="w-full">
+        <p className="mb-2 text-xs font-medium text-future-foreground-muted">Dot Indicator</p>
+        <ChartContainer config={tooltipDotConfig} className="w-full aspect-auto h-[120px] justify-start">
+          <BarChart data={tooltipData} margin={{ left: 12, right: 12 }}>
+            <CartesianGrid vertical={false} />
+            <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={4} tick={{ fontSize: 10 }} />
+            <ChartTooltip content={<ChartTooltipContent indicator="dot" />} />
+            <Bar dataKey="revenue" fill="var(--color-revenue)" radius={4} />
+            <Bar dataKey="expenses" fill="var(--color-expenses)" radius={4} />
+          </BarChart>
+        </ChartContainer>
+      </div>
+      <Separator className="bg-future-border-subtle" />
+      <div className="w-full">
+        <p className="mb-2 text-xs font-medium text-future-foreground-muted">Dashed Indicator</p>
+        <ChartContainer config={tooltipDashedConfig} className="w-full aspect-auto h-[120px] justify-start">
+          <BarChart data={tooltipData} margin={{ left: 12, right: 12 }}>
+            <CartesianGrid vertical={false} />
+            <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={4} tick={{ fontSize: 10 }} />
+            <ChartTooltip content={<ChartTooltipContent indicator="dashed" />} />
+            <Bar dataKey="revenue" fill="var(--color-revenue)" radius={4} />
+            <Bar dataKey="expenses" fill="var(--color-expenses)" radius={4} />
+          </BarChart>
+        </ChartContainer>
+      </div>
+    </div>
+  );
+}
+
 // ============================================================================
 // Main content component
 // ============================================================================
@@ -826,6 +899,30 @@ function VisualizationContent() {
 
   return (
     <div className="flex flex-col gap-6">
+      {/* Intro — charts stack and usage */}
+      <Card className="border-future-border-subtle bg-future-surface">
+        <CardHeader>
+          <CardTitle className="text-future-foreground">How to use</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-future-foreground">
+            <a
+              href="https://ui.shadcn.com/charts/area"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-semibold text-future-accent-foreground underline underline-offset-2 hover:text-future-accent-foreground/80"
+            >
+              Recharts
+            </a>{' '}
+            powers these visuals. Wrap Recharts primitives with{' '}
+            <code className="rounded bg-future-surface-overlay px-1.5 py-0.5 font-mono text-xs">ChartContainer</code>,{' '}
+            <code className="rounded bg-future-surface-overlay px-1.5 py-0.5 font-mono text-xs">ChartTooltip</code>, and{' '}
+            <code className="rounded bg-future-surface-overlay px-1.5 py-0.5 font-mono text-xs">ChartLegend</code> from{' '}
+            <code className="rounded bg-future-surface-overlay px-1.5 py-0.5 font-mono text-xs">@/components/ui/chart</code>. Provide a <code className="rounded bg-future-surface-overlay px-1.5 py-0.5 font-mono text-xs">ChartConfig</code> for theming.
+          </p>
+        </CardContent>
+      </Card>
+
       {/* Tab bar */}
       <div className="flex gap-1 overflow-x-auto border-b border-future-border-subtle">
         {TABS.map((tab) => (
@@ -853,13 +950,16 @@ function VisualizationContent() {
 // Story
 // ============================================================================
 
-export const Default: Story = {
+export const Visualization: Story = {
+  name: 'Visualization',
   render: (_, { globals }) => (
     <MaestroTemplate
       theme={globals.futureTheme || 'dark'}
-      title="Visualization"
+      title="Maestro"
       defaultLeftPanelCollapsed
       defaultRightPanelCollapsed
+      leftPanelContent={<LeftPanelCharts />}
+      rightPanelContent={<RightPanelCharts />}
     >
       <VisualizationContent />
     </MaestroTemplate>
diff --git a/packages/apollo-wind/src/templates/VisualStudio/shell.tsx b/packages/apollo-wind/src/templates/VisualStudio/shell.tsx
new file mode 100644
index 000000000..70dec14e6
--- /dev/null
+++ b/packages/apollo-wind/src/templates/VisualStudio/shell.tsx
@@ -0,0 +1,406 @@
+import * as React from 'react';
+import { cn } from '@/lib';
+import {
+  ChevronDown,
+  ChevronRight,
+  File,
+  Folder,
+  FolderOpen,
+  X,
+  PanelLeftClose,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Row, Column } from '@/components/ui/layout';
+
+interface ShellProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export function Shell({ className, children, ...props }: ShellProps) {
+  return (
+    <Column
+      overflow="hidden"
+      className={cn('h-[600px] w-full rounded-lg border bg-background', className)}
+      {...props}
+    >
+      {children}
+    </Column>
+  );
+}
+
+interface ShellTitleBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  title?: string;
+}
+
+export function ShellTitleBar({ className, title, children, ...props }: ShellTitleBarProps) {
+  return (
+    <Row
+      h={9}
+      justify="between"
+      align="center"
+      className={cn('border-b bg-muted/50 px-3', className)}
+      {...props}
+    >
+      <Row gap={2} align="center">
+        <Row gap={1.5}>
+          <div className="h-3 w-3 rounded-full bg-red-500" />
+          <div className="h-3 w-3 rounded-full bg-yellow-500" />
+          <div className="h-3 w-3 rounded-full bg-green-500" />
+        </Row>
+        {title && <span className="ml-3 text-xs text-muted-foreground">{title}</span>}
+      </Row>
+      {children}
+    </Row>
+  );
+}
+
+interface ShellContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export function ShellContent({ className, children, ...props }: ShellContentProps) {
+  return (
+    <Row flex={1} overflow="hidden" className={className} {...props}>
+      {children}
+    </Row>
+  );
+}
+
+interface ShellSidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+  collapsed?: boolean;
+  onCollapsedChange?: (collapsed: boolean) => void;
+  width?: number;
+}
+
+export function ShellSidebar({
+  className,
+  children,
+  collapsed = false,
+  onCollapsedChange,
+  width = 240,
+  ...props
+}: ShellSidebarProps) {
+  return (
+    <Column
+      className={cn(
+        'border-r bg-muted/30 transition-all duration-200',
+        collapsed ? 'w-0 overflow-hidden' : '',
+        className
+      )}
+      style={{ width: collapsed ? 0 : width }}
+      {...props}
+    >
+      {children}
+    </Column>
+  );
+}
+
+interface ShellSidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string;
+  collapsed?: boolean;
+  onCollapsedChange?: (collapsed: boolean) => void;
+}
+
+export function ShellSidebarHeader({
+  className,
+  title,
+  collapsed,
+  onCollapsedChange,
+  ...props
+}: ShellSidebarHeaderProps) {
+  return (
+    <Row
+      h={8}
+      justify="between"
+      align="center"
+      className={cn('px-3 text-xs font-medium uppercase text-muted-foreground', className)}
+      {...props}
+    >
+      <span>{title}</span>
+      {onCollapsedChange && (
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-5 w-5"
+          onClick={() => onCollapsedChange(!collapsed)}
+        >
+          <PanelLeftClose className="h-3.5 w-3.5" />
+        </Button>
+      )}
+    </Row>
+  );
+}
+
+export interface FileTreeItem {
+  name: string;
+  type: 'file' | 'folder';
+  children?: FileTreeItem[];
+  icon?: React.ReactNode;
+}
+
+interface ShellFileTreeProps {
+  items: FileTreeItem[];
+  selectedFile?: string;
+  onSelectFile?: (name: string) => void;
+}
+
+export function ShellFileTree({ items, selectedFile, onSelectFile }: ShellFileTreeProps) {
+  return (
+    <ScrollArea className="flex-1">
+      <div className="p-2">
+        {items.map((item) => (
+          <FileTreeNode
+            key={item.name}
+            item={item}
+            depth={0}
+            selectedFile={selectedFile}
+            onSelectFile={onSelectFile}
+          />
+        ))}
+      </div>
+    </ScrollArea>
+  );
+}
+
+function FileTreeNode({
+  item,
+  depth,
+  selectedFile,
+  onSelectFile,
+}: {
+  item: FileTreeItem;
+  depth: number;
+  selectedFile?: string;
+  onSelectFile?: (name: string) => void;
+}) {
+  const [expanded, setExpanded] = React.useState(true);
+  const isFolder = item.type === 'folder';
+  const isSelected = selectedFile === item.name;
+
+  return (
+    <div>
+      <Row
+        gap={1}
+        align="center"
+        className={cn(
+          'cursor-pointer rounded px-2 py-0.5 text-sm hover:bg-muted',
+          isSelected && 'bg-primary/10 text-primary'
+        )}
+        style={{ paddingLeft: depth * 12 + 8 }}
+        onClick={() => {
+          if (isFolder) {
+            setExpanded(!expanded);
+          } else {
+            onSelectFile?.(item.name);
+          }
+        }}
+      >
+        {isFolder ? (
+          <>
+            {expanded ? (
+              <ChevronDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+            ) : (
+              <ChevronRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+            )}
+            {expanded ? (
+              <FolderOpen className="h-4 w-4 shrink-0 text-yellow-600" />
+            ) : (
+              <Folder className="h-4 w-4 shrink-0 text-yellow-600" />
+            )}
+          </>
+        ) : (
+          <>
+            <span className="w-3.5" />
+            {item.icon || <File className="h-4 w-4 shrink-0 text-muted-foreground" />}
+          </>
+        )}
+        <span className="truncate">{item.name}</span>
+      </Row>
+      {isFolder && expanded && item.children && (
+        <div>
+          {item.children.map((child) => (
+            <FileTreeNode
+              key={child.name}
+              item={child}
+              depth={depth + 1}
+              selectedFile={selectedFile}
+              onSelectFile={onSelectFile}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface ShellMainProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export function ShellMain({ className, children, ...props }: ShellMainProps) {
+  return (
+    <Column flex={1} overflow="hidden" className={className} {...props}>
+      {children}
+    </Column>
+  );
+}
+
+interface ShellTab {
+  id: string;
+  title: string;
+  icon?: React.ReactNode;
+}
+
+interface ShellTabBarProps {
+  tabs: ShellTab[];
+  activeTab?: string;
+  onTabChange?: (id: string) => void;
+  onTabClose?: (id: string) => void;
+}
+
+export function ShellTabBar({ tabs, activeTab, onTabChange, onTabClose }: ShellTabBarProps) {
+  return (
+    <Row h={9} align="center" className="border-b bg-muted/30">
+      {tabs.map((tab) => (
+        <Row
+          key={tab.id}
+          gap={2}
+          align="center"
+          className={cn(
+            'group h-full cursor-pointer border-r px-3 text-sm',
+            activeTab === tab.id
+              ? 'bg-background text-foreground'
+              : 'text-muted-foreground hover:bg-muted/50'
+          )}
+          onClick={() => onTabChange?.(tab.id)}
+        >
+          {tab.icon}
+          <span className="max-w-[120px] truncate">{tab.title}</span>
+          {onTabClose && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-4 w-4 opacity-0 group-hover:opacity-100"
+              onClick={(e) => {
+                e.stopPropagation();
+                onTabClose(tab.id);
+              }}
+            >
+              <X className="h-3 w-3" />
+            </Button>
+          )}
+        </Row>
+      ))}
+    </Row>
+  );
+}
+
+interface ShellPaneProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function ShellPane({ className, children }: ShellPaneProps) {
+  return (
+    <ScrollArea className={cn('flex-1', className)}>
+      <div className="p-4">{children}</div>
+    </ScrollArea>
+  );
+}
+
+interface ShellStatusBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+}
+
+export function ShellStatusBar({ className, children, ...props }: ShellStatusBarProps) {
+  return (
+    <Row
+      h={6}
+      justify="between"
+      align="center"
+      className={cn('border-t bg-primary px-2 text-xs text-primary-foreground', className)}
+      {...props}
+    >
+      {children}
+    </Row>
+  );
+}
+
+interface ShellActivityBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export function ShellActivityBar({ className, children, ...props }: ShellActivityBarProps) {
+  return (
+    <Column
+      w={12}
+      gap={2}
+      align="center"
+      className={cn('border-r bg-muted/50 py-2', className)}
+      {...props}
+    >
+      {children}
+    </Column>
+  );
+}
+
+interface ShellActivityBarItemProps {
+  icon: React.ReactNode;
+  active?: boolean;
+  onClick?: () => void;
+  tooltip?: string;
+}
+
+export function ShellActivityBarItem({
+  icon,
+  active,
+  onClick,
+  tooltip,
+}: ShellActivityBarItemProps) {
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      className={cn(
+        'h-10 w-10 rounded-none border-l-2 border-transparent',
+        active && 'border-primary bg-muted'
+      )}
+      onClick={onClick}
+      title={tooltip}
+    >
+      {icon}
+    </Button>
+  );
+}
+
+interface ShellPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+  title?: string;
+  height?: number;
+  children: React.ReactNode;
+}
+
+export function ShellPanel({
+  className,
+  title,
+  height = 200,
+  children,
+  ...props
+}: ShellPanelProps) {
+  return (
+    <div className={cn('border-t', className)} style={{ height }} {...props}>
+      {title && (
+        <Row
+          h={8}
+          align="center"
+          className="border-b bg-muted/30 px-3 text-xs font-medium uppercase text-muted-foreground"
+        >
+          {title}
+        </Row>
+      )}
+      <ScrollArea className="h-full">
+        <div className="p-2 font-mono text-sm">{children}</div>
+      </ScrollArea>
+    </div>
+  );
+}
diff --git a/packages/apollo-wind/src/templates/VisualStudio/visual-studio.stories.tsx b/packages/apollo-wind/src/templates/VisualStudio/visual-studio.stories.tsx
new file mode 100644
index 000000000..93f6cc038
--- /dev/null
+++ b/packages/apollo-wind/src/templates/VisualStudio/visual-studio.stories.tsx
@@ -0,0 +1,301 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Blocks, Bug, FileCode, FileJson, Files, GitBranch, Search, Settings } from 'lucide-react';
+import { Column, Row } from '@/components/ui/layout';
+import { fontFamily } from '@/foundation/Future/typography';
+import { cn } from '@/lib';
+import {
+  Shell,
+  ShellActivityBar,
+  ShellActivityBarItem,
+  ShellContent,
+  ShellFileTree,
+  ShellMain,
+  ShellPane,
+  ShellPanel,
+  ShellSidebar,
+  ShellSidebarHeader,
+  ShellStatusBar,
+  ShellTabBar,
+  ShellTitleBar,
+} from './shell';
+import type { FileTreeItem } from './shell';
+
+// ============================================================================
+// Meta
+// ============================================================================
+
+const meta = {
+  title: 'Templates/Future/Visual Studio',
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+function resolveThemeClass(value: string) {
+  if (value === 'legacy-dark') return 'legacy-dark';
+  if (value === 'legacy-light') return 'legacy-light';
+  if (value === 'wireframe') return 'future-wireframe';
+  if (value === 'vertex') return 'future-vertex';
+  if (value === 'canvas') return 'future-canvas';
+  if (value === 'light') return 'future-light';
+  return 'future-dark';
+}
+
+// ============================================================================
+// Sample data
+// ============================================================================
+
+const sampleFiles: FileTreeItem[] = [
+  {
+    name: 'src',
+    type: 'folder',
+    children: [
+      {
+        name: 'components',
+        type: 'folder',
+        children: [
+          { name: 'Button.tsx', type: 'file', icon: <FileCode className="h-4 w-4 text-blue-500" /> },
+          { name: 'Input.tsx', type: 'file', icon: <FileCode className="h-4 w-4 text-blue-500" /> },
+          { name: 'Shell.tsx', type: 'file', icon: <FileCode className="h-4 w-4 text-blue-500" /> },
+        ],
+      },
+      {
+        name: 'hooks',
+        type: 'folder',
+        children: [
+          { name: 'useAuth.ts', type: 'file', icon: <FileCode className="h-4 w-4 text-blue-500" /> },
+          { name: 'useTheme.ts', type: 'file', icon: <FileCode className="h-4 w-4 text-blue-500" /> },
+        ],
+      },
+      { name: 'App.tsx', type: 'file', icon: <FileCode className="h-4 w-4 text-blue-500" /> },
+      { name: 'index.tsx', type: 'file', icon: <FileCode className="h-4 w-4 text-blue-500" /> },
+    ],
+  },
+  { name: 'package.json', type: 'file', icon: <FileJson className="h-4 w-4 text-yellow-500" /> },
+  { name: 'tsconfig.json', type: 'file', icon: <FileJson className="h-4 w-4 text-yellow-500" /> },
+  { name: 'README.md', type: 'file' },
+];
+
+// ============================================================================
+// Full IDE demo
+// ============================================================================
+
+function VSCodeShellDemo({ theme }: { theme: string }) {
+  const themeClass = resolveThemeClass(theme);
+  const [activeView, setActiveView] = React.useState('files');
+  const [selectedFile, setSelectedFile] = React.useState('Shell.tsx');
+  const [tabs, setTabs] = React.useState([
+    { id: 'shell', title: 'Shell.tsx', icon: <FileCode className="h-4 w-4 text-blue-500" /> },
+    { id: 'button', title: 'Button.tsx', icon: <FileCode className="h-4 w-4 text-blue-500" /> },
+  ]);
+  const [activeTab, setActiveTab] = React.useState('shell');
+  const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false);
+
+  const handleCloseTab = (id: string) => {
+    setTabs(tabs.filter((t) => t.id !== id));
+    if (activeTab === id && tabs.length > 1) {
+      setActiveTab(tabs[0].id === id ? tabs[1].id : tabs[0].id);
+    }
+  };
+
+  return (
+    <div
+      className={cn(themeClass, 'flex h-screen w-full bg-future-surface')}
+      style={{ fontFamily: fontFamily.base }}
+    >
+      <Shell className="h-full w-full rounded-none border-0">
+        <ShellTitleBar title="project — Visual Studio Code" />
+        <ShellContent>
+          <ShellActivityBar>
+            <ShellActivityBarItem
+              icon={<Files className="h-5 w-5" />}
+              active={activeView === 'files'}
+              onClick={() => { setActiveView('files'); setSidebarCollapsed(false); }}
+              tooltip="Explorer"
+            />
+            <ShellActivityBarItem
+              icon={<Search className="h-5 w-5" />}
+              active={activeView === 'search'}
+              onClick={() => { setActiveView('search'); setSidebarCollapsed(false); }}
+              tooltip="Search"
+            />
+            <ShellActivityBarItem
+              icon={<GitBranch className="h-5 w-5" />}
+              active={activeView === 'git'}
+              onClick={() => { setActiveView('git'); setSidebarCollapsed(false); }}
+              tooltip="Source Control"
+            />
+            <ShellActivityBarItem
+              icon={<Bug className="h-5 w-5" />}
+              active={activeView === 'debug'}
+              onClick={() => { setActiveView('debug'); setSidebarCollapsed(false); }}
+              tooltip="Run and Debug"
+            />
+            <ShellActivityBarItem
+              icon={<Blocks className="h-5 w-5" />}
+              active={activeView === 'extensions'}
+              onClick={() => { setActiveView('extensions'); setSidebarCollapsed(false); }}
+              tooltip="Extensions"
+            />
+            <Column flex={1} />
+            <ShellActivityBarItem
+              icon={<Settings className="h-5 w-5" />}
+              onClick={() => undefined}
+              tooltip="Settings"
+            />
+          </ShellActivityBar>
+
+          <ShellSidebar collapsed={sidebarCollapsed} width={260}>
+            <ShellSidebarHeader
+              title="Explorer"
+              collapsed={sidebarCollapsed}
+              onCollapsedChange={setSidebarCollapsed}
+            />
+            <ShellFileTree
+              items={sampleFiles}
+              selectedFile={selectedFile}
+              onSelectFile={setSelectedFile}
+            />
+          </ShellSidebar>
+
+          <ShellMain>
+            <ShellTabBar
+              tabs={tabs}
+              activeTab={activeTab}
+              onTabChange={setActiveTab}
+              onTabClose={handleCloseTab}
+            />
+            <ShellPane>
+              <pre className="text-sm">
+                <code>{`import * as React from "react";
+import { cn } from "@/lib";
+
+interface ShellProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function Shell({ children, className }: ShellProps) {
+  return (
+    <div className={cn(
+      "flex h-full flex-col",
+      className
+    )}>
+      {children}
+    </div>
+  );
+}`}</code>
+              </pre>
+            </ShellPane>
+            <ShellPanel title="Terminal" height={150}>
+              <div className="text-muted-foreground">
+                <div>$ npm run dev</div>
+                <div className="text-green-500">ready - started server on 0.0.0.0:3000</div>
+                <div>$ _</div>
+              </div>
+            </ShellPanel>
+          </ShellMain>
+        </ShellContent>
+        <ShellStatusBar>
+          <Row gap={3} align="center">
+            <span>main</span>
+            <span>TypeScript</span>
+          </Row>
+          <Row gap={3} align="center">
+            <span>Ln 1, Col 1</span>
+            <span>UTF-8</span>
+          </Row>
+        </ShellStatusBar>
+      </Shell>
+    </div>
+  );
+}
+
+// ============================================================================
+// Minimal shell demo
+// ============================================================================
+
+function MinimalShellDemo({ theme }: { theme: string }) {
+  const themeClass = resolveThemeClass(theme);
+
+  return (
+    <div
+      className={cn(themeClass, 'flex h-screen w-full bg-future-surface')}
+      style={{ fontFamily: fontFamily.base }}
+    >
+      <Shell className="h-full w-full rounded-none border-0">
+        <ShellTitleBar title="My App" />
+        <ShellContent>
+          <ShellMain>
+            <ShellPane>
+              <div className="text-center text-muted-foreground">
+                <h2 className="text-lg font-semibold">Welcome</h2>
+                <p>This is a minimal shell layout.</p>
+              </div>
+            </ShellPane>
+          </ShellMain>
+        </ShellContent>
+        <ShellStatusBar>
+          <span>Ready</span>
+        </ShellStatusBar>
+      </Shell>
+    </div>
+  );
+}
+
+// ============================================================================
+// Sidebar-only demo
+// ============================================================================
+
+function SidebarOnlyDemo({ theme }: { theme: string }) {
+  const themeClass = resolveThemeClass(theme);
+
+  return (
+    <div
+      className={cn(themeClass, 'flex h-screen w-full bg-future-surface')}
+      style={{ fontFamily: fontFamily.base }}
+    >
+      <Shell className="h-full w-full rounded-none border-0">
+        <ShellTitleBar title="File Browser" />
+        <ShellContent>
+          <ShellSidebar width={280}>
+            <ShellSidebarHeader title="Files" />
+            <ShellFileTree items={sampleFiles} />
+          </ShellSidebar>
+          <ShellMain>
+            <ShellPane>
+              <p className="text-muted-foreground">Select a file to view its contents.</p>
+            </ShellPane>
+          </ShellMain>
+        </ShellContent>
+      </Shell>
+    </div>
+  );
+}
+
+// ============================================================================
+// Stories
+// ============================================================================
+
+export const Default: Story = {
+  name: 'Default',
+  render: (_, { globals }) => <VSCodeShellDemo theme={globals.futureTheme || 'dark'} />,
+};
+
+export const Minimal: Story = {
+  name: 'Minimal',
+  render: (_, { globals }) => <MinimalShellDemo theme={globals.futureTheme || 'dark'} />,
+};
+
+export const SidebarOnly: Story = {
+  name: 'Sidebar Only',
+  render: (_, { globals }) => <SidebarOnlyDemo theme={globals.futureTheme || 'dark'} />,
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c93e09150..1da54e5fc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -749,6 +749,18 @@ importers:
 
   packages/apollo-wind:
     dependencies:
+      '@dnd-kit/core':
+        specifier: ^6.3.1
+        version: 6.3.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@dnd-kit/modifiers':
+        specifier: ^9.0.0
+        version: 9.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)
+      '@dnd-kit/sortable':
+        specifier: ^10.0.0
+        version: 10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)
+      '@dnd-kit/utilities':
+        specifier: ^3.2.2
+        version: 3.2.2(react@19.2.3)
       '@hookform/resolvers':
         specifier: ^5.2.2
         version: 5.2.2(react-hook-form@7.66.1(react@19.2.3))
@@ -857,6 +869,9 @@ importers:
       date-fns:
         specifier: ^4.1.0
         version: 4.1.0
+      framer-motion:
+        specifier: ^11.15.0
+        version: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       jsep:
         specifier: ^1.4.0
         version: 1.4.0
@@ -872,6 +887,9 @@ importers:
       react-hook-form:
         specifier: ^7.66.1
         version: 7.66.1(react@19.2.3)
+      react-live:
+        specifier: ^4.1.8
+        version: 4.1.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       react-resizable-panels:
         specifier: ^3.0.6
         version: 3.0.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -2068,6 +2086,12 @@ packages:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
 
+  '@dnd-kit/modifiers@9.0.0':
+    resolution: {integrity: sha512-ybiLc66qRGuZoC20wdSSG6pDXFikui/dCNGthxv4Ndy8ylErY0N3KVxY2bgo7AWwIbxDmXDg3ylAFmnrjcbVvw==}
+    peerDependencies:
+      '@dnd-kit/core': ^6.3.0
+      react: '>=16.8.0'
+
   '@dnd-kit/sortable@10.0.0':
     resolution: {integrity: sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==}
     peerDependencies:
@@ -7993,6 +8017,20 @@ packages:
   fraction.js@5.3.4:
     resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
 
+  framer-motion@11.18.2:
+    resolution: {integrity: sha512-5F5Och7wrvtLVElIpclDT0CBzMVg3dL22B64aZwHtsIY8RB4mXICLrkajK4G9R+ieSAGcgrLeae2SeUTg2pr6w==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   framer-motion@12.23.26:
     resolution: {integrity: sha512-cPcIhgR42xBn1Uj+PzOyheMtZ73H927+uWPDVhUMqxy8UHt6Okavb6xIz9J/phFUHUj0OncR6UvMfJTXoc/LKA==}
     peerDependencies:
@@ -9656,12 +9694,18 @@ packages:
   moo@0.5.2:
     resolution: {integrity: sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q==}
 
+  motion-dom@11.18.1:
+    resolution: {integrity: sha512-g76KvA001z+atjfxczdRtw/RXOM3OMSdd1f4DL77qCTF/+avrRJiawSG4yDibEQ215sr9kpinSlX2pCTJ9zbhw==}
+
   motion-dom@12.23.23:
     resolution: {integrity: sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==}
 
   motion-dom@12.26.2:
     resolution: {integrity: sha512-KLMT1BroY8oKNeliA3JMNJ+nbCIsTKg6hJpDb4jtRAJ7nCKnnpg/LTq/NGqG90Limitz3kdAnAVXecdFVGlWTw==}
 
+  motion-utils@11.18.1:
+    resolution: {integrity: sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==}
+
   motion-utils@12.23.6:
     resolution: {integrity: sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==}
 
@@ -10295,6 +10339,10 @@ packages:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
     engines: {node: '>=6'}
 
+  pirates@4.0.7:
+    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
+    engines: {node: '>= 6'}
+
   pkce-challenge@5.0.0:
     resolution: {integrity: sha512-ueGLflrrnvwB3xuo/uGob5pd5FN7l0MsLf0Z87o/UQmRtwjvfylfc9MurIxRAWywCYTgrvpXBcqjV4OfCYGCIQ==}
     engines: {node: '>=16.20.0'}
@@ -10598,6 +10646,11 @@ packages:
     resolution: {integrity: sha512-gjVS5hOP+M3wMm5nmNOucbIrqudzs9v/57bWRHQWLYklXqoXKrVfYW2W9+glfGsqtPgpiz5WwyEEB+ksXIx3gQ==}
     engines: {node: '>=18'}
 
+  prism-react-renderer@2.4.1:
+    resolution: {integrity: sha512-ey8Ls/+Di31eqzUxC46h8MksNuGx/n0AAC8uKpwFau4RPDYLuE3EXTp8N8G2vX2N7UC/+IXeNUnlWBGGcAG+Ig==}
+    peerDependencies:
+      react: '>=16.0.0'
+
   prismjs@1.30.0:
     resolution: {integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==}
     engines: {node: '>=6'}
@@ -10810,6 +10863,13 @@ packages:
   react-is@19.2.3:
     resolution: {integrity: sha512-qJNJfu81ByyabuG7hPFEbXqNcWSU3+eVus+KJs+0ncpGfMyYdvSmxiJxbWR65lYi1I+/0HBcliO029gc4F+PnA==}
 
+  react-live@4.1.8:
+    resolution: {integrity: sha512-B2SgNqwPuS2ekqj4lcxi5TibEcjWkdVyYykBEUBshPAPDQ527x2zPEZg560n8egNtAjUpwXFQm7pcXV65aAYmg==}
+    engines: {node: '>= 0.12.0', npm: '>= 2.0.0'}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+
   react-markdown@10.1.0:
     resolution: {integrity: sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==}
     peerDependencies:
@@ -11755,6 +11815,11 @@ packages:
   stylis@4.3.6:
     resolution: {integrity: sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==}
 
+  sucrase@3.35.1:
+    resolution: {integrity: sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    hasBin: true
+
   super-regex@1.1.0:
     resolution: {integrity: sha512-WHkws2ZflZe41zj6AolvvmaTrWds/VuyeYr9iPVv/oQeaIoVxMKaushfFWpOGDT+GuBrM/sVqF8KUCYQlSSTdQ==}
     engines: {node: '>=18'}
@@ -11980,6 +12045,9 @@ packages:
     resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
     engines: {node: '>=6.10'}
 
+  ts-interface-checker@0.1.13:
+    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+
   ts-morph@26.0.0:
     resolution: {integrity: sha512-ztMO++owQnz8c/gIENcM9XfCEzgoGphTv+nKpYNM1bgsdOVC/jRZuEBf6N+mLLDNg68Kl+GgUZfOySaRiG1/Ug==}
 
@@ -12307,6 +12375,11 @@ packages:
       '@types/react':
         optional: true
 
+  use-editable@2.3.3:
+    resolution: {integrity: sha512-7wVD2JbfAFJ3DK0vITvXBdpd9JAz5BcKAAolsnLBuBn6UDDwBGuCIAGvR3yA2BNKm578vAMVHFCWaOcA+BhhiA==}
+    peerDependencies:
+      react: '>= 16.8.0'
+
   use-sidecar@1.1.3:
     resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
     engines: {node: '>=10'}
@@ -14055,6 +14128,13 @@ snapshots:
       react-dom: 19.2.3(react@19.2.3)
       tslib: 2.8.1
 
+  '@dnd-kit/modifiers@9.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@dnd-kit/core': 6.3.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@dnd-kit/utilities': 3.2.2(react@19.2.3)
+      react: 19.2.3
+      tslib: 2.8.1
+
   '@dnd-kit/sortable@10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@dnd-kit/core': 6.3.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -20325,6 +20405,16 @@ snapshots:
 
   fraction.js@5.3.4: {}
 
+  framer-motion@11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+    dependencies:
+      motion-dom: 11.18.1
+      motion-utils: 11.18.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@emotion/is-prop-valid': 1.4.0
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+
   framer-motion@12.23.26(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
       motion-dom: 12.23.23
@@ -22346,14 +22436,20 @@ snapshots:
 
   moo@0.5.2: {}
 
+  motion-dom@11.18.1:
+    dependencies:
+      motion-utils: 11.18.1
+
   motion-dom@12.23.23:
     dependencies:
-      motion-utils: 12.23.6
+      motion-utils: 12.24.10
 
   motion-dom@12.26.2:
     dependencies:
       motion-utils: 12.24.10
 
+  motion-utils@11.18.1: {}
+
   motion-utils@12.23.6: {}
 
   motion-utils@12.24.10: {}
@@ -22984,6 +23080,8 @@ snapshots:
   pify@4.0.1:
     optional: true
 
+  pirates@4.0.7: {}
+
   pkce-challenge@5.0.0: {}
 
   pkce-challenge@6.0.0: {}
@@ -23275,6 +23373,12 @@ snapshots:
     dependencies:
       parse-ms: 4.0.0
 
+  prism-react-renderer@2.4.1(react@19.2.3):
+    dependencies:
+      '@types/prismjs': 1.26.5
+      clsx: 2.1.1
+      react: 19.2.3
+
   prismjs@1.30.0: {}
 
   process-nextick-args@2.0.1: {}
@@ -23533,6 +23637,14 @@ snapshots:
 
   react-is@19.2.3: {}
 
+  react-live@4.1.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+    dependencies:
+      prism-react-renderer: 2.4.1(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      sucrase: 3.35.1
+      use-editable: 2.3.3(react@19.2.3)
+
   react-markdown@10.1.0(@types/react@19.2.8)(react@19.2.3):
     dependencies:
       '@types/hast': 3.0.4
@@ -24910,6 +25022,16 @@ snapshots:
 
   stylis@4.3.6: {}
 
+  sucrase@3.35.1:
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      commander: 4.1.1
+      lines-and-columns: 1.2.4
+      mz: 2.7.0
+      pirates: 4.0.7
+      tinyglobby: 0.2.15
+      ts-interface-checker: 0.1.13
+
   super-regex@1.1.0:
     dependencies:
       function-timeout: 1.0.2
@@ -25152,6 +25274,8 @@ snapshots:
 
   ts-dedent@2.2.0: {}
 
+  ts-interface-checker@0.1.13: {}
+
   ts-morph@26.0.0:
     dependencies:
       '@ts-morph/common': 0.27.0
@@ -25477,6 +25601,10 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.8
 
+  use-editable@2.3.3(react@19.2.3):
+    dependencies:
+      react: 19.2.3
+
   use-sidecar@1.1.3(@types/react@19.2.8)(react@19.2.3):
     dependencies:
       detect-node-es: 1.1.0

From 920ee1f8c067a2f2d199288a3251c151e666f260 Mon Sep 17 00:00:00 2001
From: Cristian Calina <cristian.calina@uipath.com>
Date: Thu, 26 Feb 2026 12:52:03 -0800
Subject: [PATCH 4/8] fix(apollo-wind): build issues

---
 .../src/templates/Admin/settings-admin.tsx    | 161 +++++++++++++-----
 1 file changed, 123 insertions(+), 38 deletions(-)

diff --git a/packages/apollo-wind/src/templates/Admin/settings-admin.tsx b/packages/apollo-wind/src/templates/Admin/settings-admin.tsx
index 6c6f00d90..13acf200c 100644
--- a/packages/apollo-wind/src/templates/Admin/settings-admin.tsx
+++ b/packages/apollo-wind/src/templates/Admin/settings-admin.tsx
@@ -1,5 +1,5 @@
+import { Bell, CreditCard, Key, Palette, Shield, User } from 'lucide-react';
 import * as React from 'react';
-import { Bell, Key, Palette, Shield, User, CreditCard } from 'lucide-react';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import {
@@ -12,6 +12,8 @@ import {
 } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { Column, Grid, Row } from '@/components/ui/layout';
+import { ScrollArea } from '@/components/ui/scroll-area';
 import {
   Select,
   SelectContent,
@@ -22,13 +24,12 @@ import {
 import { Separator } from '@/components/ui/separator';
 import { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';
-import { Row, Column, Grid } from '@/components/ui/layout';
-import { ScrollArea } from '@/components/ui/scroll-area';
 import {
-  AdminTemplate,
   AdminSidebar,
   AdminSidebarHeader,
   AdminSidebarNav,
+  AdminTemplate,
+  FutureTheme,
 } from './template-admin';
 
 const navItems = [
@@ -40,7 +41,13 @@ const navItems = [
   { id: 'billing', label: 'Billing', icon: <CreditCard className="h-4 w-4" /> },
 ];
 
-export function SettingsAdmin({ theme, menuContent }: { theme: string; menuContent?: React.ReactNode }) {
+export function SettingsAdmin({
+  theme,
+  menuContent,
+}: {
+  theme: string;
+  menuContent?: React.ReactNode;
+}) {
   const [activeSection, setActiveSection] = React.useState('profile');
   const [formData, setFormData] = React.useState({
     firstName: 'John',
@@ -62,7 +69,7 @@ export function SettingsAdmin({ theme, menuContent }: { theme: string; menuConte
 
   return (
     <AdminTemplate
-      theme={theme}
+      theme={theme as FutureTheme}
       title="Settings"
       menuContent={menuContent}
       sidebar={
@@ -82,7 +89,9 @@ export function SettingsAdmin({ theme, menuContent }: { theme: string; menuConte
             <>
               <div>
                 <h2 className="text-2xl font-bold text-future-foreground">Profile</h2>
-                <p className="text-future-foreground-muted">Manage your public profile information.</p>
+                <p className="text-future-foreground-muted">
+                  Manage your public profile information.
+                </p>
               </div>
 
               <Card className="border-future-border-subtle bg-future-surface-raised">
@@ -99,8 +108,12 @@ export function SettingsAdmin({ theme, menuContent }: { theme: string; menuConte
                       <AvatarFallback className="text-lg">JD</AvatarFallback>
                     </Avatar>
                     <Row gap={2}>
-                      <Button variant="outline" size="sm">Upload</Button>
-                      <Button variant="ghost" size="sm">Remove</Button>
+                      <Button variant="outline" size="sm">
+                        Upload
+                      </Button>
+                      <Button variant="ghost" size="sm">
+                        Remove
+                      </Button>
                     </Row>
                   </Row>
                 </CardContent>
@@ -109,12 +122,16 @@ export function SettingsAdmin({ theme, menuContent }: { theme: string; menuConte
               <Card className="border-future-border-subtle bg-future-surface-raised">
                 <CardHeader>
                   <CardTitle className="text-future-foreground">Personal Information</CardTitle>
-                  <CardDescription className="text-future-foreground-muted">Update your personal details here.</CardDescription>
+                  <CardDescription className="text-future-foreground-muted">
+                    Update your personal details here.
+                  </CardDescription>
                 </CardHeader>
                 <CardContent className="space-y-4">
                   <Grid gap={4} cols={2}>
                     <Column gap={2}>
-                      <Label htmlFor="firstName" className="text-future-foreground">First name</Label>
+                      <Label htmlFor="firstName" className="text-future-foreground">
+                        First name
+                      </Label>
                       <Input
                         id="firstName"
                         value={formData.firstName}
@@ -123,7 +140,9 @@ export function SettingsAdmin({ theme, menuContent }: { theme: string; menuConte
                       />
                     </Column>
                     <Column gap={2}>
-                      <Label htmlFor="lastName" className="text-future-foreground">Last name</Label>
+                      <Label htmlFor="lastName" className="text-future-foreground">
+                        Last name
+                      </Label>
                       <Input
                         id="lastName"
                         value={formData.lastName}
@@ -133,7 +152,9 @@ export function SettingsAdmin({ theme, menuContent }: { theme: string; menuConte
                     </Column>
                   </Grid>
                   <Column gap={2}>
-                    <Label htmlFor="username" className="text-future-foreground">Username</Label>
+                    <Label htmlFor="username" className="text-future-foreground">
+                      Username
+                    </Label>
                     <Input
                       id="username"
                       value={formData.username}
@@ -142,7 +163,9 @@ export function SettingsAdmin({ theme, menuContent }: { theme: string; menuConte
                     />
                   </Column>
                   <Column gap={2}>
-                    <Label htmlFor="bio" className="text-future-foreground">Bio</Label>
+                    <Label htmlFor="bio" className="text-future-foreground">
+                      Bio
+                    </Label>
                     <Textarea
                       id="bio"
                       value={formData.bio}
@@ -180,7 +203,9 @@ export function SettingsAdmin({ theme, menuContent }: { theme: string; menuConte
                 </CardHeader>
                 <CardContent className="space-y-4">
                   <Column gap={2}>
-                    <Label htmlFor="email" className="text-future-foreground">Email address</Label>
+                    <Label htmlFor="email" className="text-future-foreground">
+                      Email address
+                    </Label>
                     <Input
                       id="email"
                       type="email"
@@ -198,7 +223,9 @@ export function SettingsAdmin({ theme, menuContent }: { theme: string; menuConte
               <Card className="border-red-500/30 bg-future-surface-raised">
                 <CardHeader>
                   <CardTitle className="text-red-400">Danger Zone</CardTitle>
-                  <CardDescription className="text-future-foreground-muted">Irreversible and destructive actions.</CardDescription>
+                  <CardDescription className="text-future-foreground-muted">
+                    Irreversible and destructive actions.
+                  </CardDescription>
                 </CardHeader>
                 <CardContent className="space-y-4">
                   <Row justify="between" align="center">
@@ -227,16 +254,23 @@ export function SettingsAdmin({ theme, menuContent }: { theme: string; menuConte
               <Card className="border-future-border-subtle bg-future-surface-raised">
                 <CardHeader>
                   <CardTitle className="text-future-foreground">Theme</CardTitle>
-                  <CardDescription className="text-future-foreground-muted">Select your preferred theme for the dashboard.</CardDescription>
+                  <CardDescription className="text-future-foreground-muted">
+                    Select your preferred theme for the dashboard.
+                  </CardDescription>
                 </CardHeader>
                 <CardContent className="space-y-4">
                   <Column gap={2}>
-                    <Label htmlFor="theme" className="text-future-foreground">Theme</Label>
+                    <Label htmlFor="theme" className="text-future-foreground">
+                      Theme
+                    </Label>
                     <Select
                       value={formData.theme}
                       onValueChange={(value) => updateField('theme', value)}
                     >
-                      <SelectTrigger id="theme" className="w-[200px] border-future-border bg-future-surface-overlay text-future-foreground">
+                      <SelectTrigger
+                        id="theme"
+                        className="w-[200px] border-future-border bg-future-surface-overlay text-future-foreground"
+                      >
                         <SelectValue />
                       </SelectTrigger>
                       <SelectContent>
@@ -247,12 +281,17 @@ export function SettingsAdmin({ theme, menuContent }: { theme: string; menuConte
                     </Select>
                   </Column>
                   <Column gap={2}>
-                    <Label htmlFor="language" className="text-future-foreground">Language</Label>
+                    <Label htmlFor="language" className="text-future-foreground">
+                      Language
+                    </Label>
                     <Select
                       value={formData.language}
                       onValueChange={(value) => updateField('language', value)}
                     >
-                      <SelectTrigger id="language" className="w-[200px] border-future-border bg-future-surface-overlay text-future-foreground">
+                      <SelectTrigger
+                        id="language"
+                        className="w-[200px] border-future-border bg-future-surface-overlay text-future-foreground"
+                      >
                         <SelectValue />
                       </SelectTrigger>
                       <SelectContent>
@@ -272,13 +311,17 @@ export function SettingsAdmin({ theme, menuContent }: { theme: string; menuConte
             <>
               <div>
                 <h2 className="text-2xl font-bold text-future-foreground">Notifications</h2>
-                <p className="text-future-foreground-muted">Configure how you receive notifications.</p>
+                <p className="text-future-foreground-muted">
+                  Configure how you receive notifications.
+                </p>
               </div>
 
               <Card className="border-future-border-subtle bg-future-surface-raised">
                 <CardHeader>
                   <CardTitle className="text-future-foreground">Notification Preferences</CardTitle>
-                  <CardDescription className="text-future-foreground-muted">Choose what notifications you want to receive.</CardDescription>
+                  <CardDescription className="text-future-foreground-muted">
+                    Choose what notifications you want to receive.
+                  </CardDescription>
                 </CardHeader>
                 <CardContent className="space-y-6">
                   <Row justify="between" align="center">
@@ -334,20 +377,40 @@ export function SettingsAdmin({ theme, menuContent }: { theme: string; menuConte
               <Card className="border-future-border-subtle bg-future-surface-raised">
                 <CardHeader>
                   <CardTitle className="text-future-foreground">Password</CardTitle>
-                  <CardDescription className="text-future-foreground-muted">Change your password here.</CardDescription>
+                  <CardDescription className="text-future-foreground-muted">
+                    Change your password here.
+                  </CardDescription>
                 </CardHeader>
                 <CardContent className="space-y-4">
                   <Column gap={2}>
-                    <Label htmlFor="currentPassword" className="text-future-foreground">Current password</Label>
-                    <Input id="currentPassword" type="password" className="border-future-border bg-future-surface-overlay text-future-foreground" />
+                    <Label htmlFor="currentPassword" className="text-future-foreground">
+                      Current password
+                    </Label>
+                    <Input
+                      id="currentPassword"
+                      type="password"
+                      className="border-future-border bg-future-surface-overlay text-future-foreground"
+                    />
                   </Column>
                   <Column gap={2}>
-                    <Label htmlFor="newPassword" className="text-future-foreground">New password</Label>
-                    <Input id="newPassword" type="password" className="border-future-border bg-future-surface-overlay text-future-foreground" />
+                    <Label htmlFor="newPassword" className="text-future-foreground">
+                      New password
+                    </Label>
+                    <Input
+                      id="newPassword"
+                      type="password"
+                      className="border-future-border bg-future-surface-overlay text-future-foreground"
+                    />
                   </Column>
                   <Column gap={2}>
-                    <Label htmlFor="confirmPassword" className="text-future-foreground">Confirm password</Label>
-                    <Input id="confirmPassword" type="password" className="border-future-border bg-future-surface-overlay text-future-foreground" />
+                    <Label htmlFor="confirmPassword" className="text-future-foreground">
+                      Confirm password
+                    </Label>
+                    <Input
+                      id="confirmPassword"
+                      type="password"
+                      className="border-future-border bg-future-surface-overlay text-future-foreground"
+                    />
                   </Column>
                 </CardContent>
                 <CardFooter className="border-t border-future-border-subtle px-6 py-4">
@@ -357,8 +420,12 @@ export function SettingsAdmin({ theme, menuContent }: { theme: string; menuConte
 
               <Card className="border-future-border-subtle bg-future-surface-raised">
                 <CardHeader>
-                  <CardTitle className="text-future-foreground">Two-Factor Authentication</CardTitle>
-                  <CardDescription className="text-future-foreground-muted">Add an extra layer of security to your account.</CardDescription>
+                  <CardTitle className="text-future-foreground">
+                    Two-Factor Authentication
+                  </CardTitle>
+                  <CardDescription className="text-future-foreground-muted">
+                    Add an extra layer of security to your account.
+                  </CardDescription>
                 </CardHeader>
                 <CardContent>
                   <Row justify="between" align="center">
@@ -390,10 +457,16 @@ export function SettingsAdmin({ theme, menuContent }: { theme: string; menuConte
               <Card className="border-future-border-subtle bg-future-surface-raised">
                 <CardHeader>
                   <CardTitle className="text-future-foreground">Current Plan</CardTitle>
-                  <CardDescription className="text-future-foreground-muted">You are currently on the Pro plan.</CardDescription>
+                  <CardDescription className="text-future-foreground-muted">
+                    You are currently on the Pro plan.
+                  </CardDescription>
                 </CardHeader>
                 <CardContent>
-                  <Row justify="between" align="center" className="rounded-lg border border-future-border-subtle p-4">
+                  <Row
+                    justify="between"
+                    align="center"
+                    className="rounded-lg border border-future-border-subtle p-4"
+                  >
                     <Column gap={0}>
                       <p className="font-semibold text-future-foreground">Pro Plan</p>
                       <p className="text-sm text-future-foreground-muted">
@@ -408,12 +481,22 @@ export function SettingsAdmin({ theme, menuContent }: { theme: string; menuConte
               <Card className="border-future-border-subtle bg-future-surface-raised">
                 <CardHeader>
                   <CardTitle className="text-future-foreground">Payment Method</CardTitle>
-                  <CardDescription className="text-future-foreground-muted">Update your payment information.</CardDescription>
+                  <CardDescription className="text-future-foreground-muted">
+                    Update your payment information.
+                  </CardDescription>
                 </CardHeader>
                 <CardContent>
-                  <Row justify="between" align="center" className="rounded-lg border border-future-border-subtle p-4">
+                  <Row
+                    justify="between"
+                    align="center"
+                    className="rounded-lg border border-future-border-subtle p-4"
+                  >
                     <Row gap={3} align="center">
-                      <Row justify="center" align="center" className="h-10 w-14 rounded bg-future-surface-overlay">
+                      <Row
+                        justify="center"
+                        align="center"
+                        className="h-10 w-14 rounded bg-future-surface-overlay"
+                      >
                         <CreditCard className="h-5 w-5 text-future-foreground-muted" />
                       </Row>
                       <Column gap={0}>
@@ -421,7 +504,9 @@ export function SettingsAdmin({ theme, menuContent }: { theme: string; menuConte
                         <p className="text-sm text-future-foreground-muted">Expires 12/25</p>
                       </Column>
                     </Row>
-                    <Button variant="ghost" size="sm">Edit</Button>
+                    <Button variant="ghost" size="sm">
+                      Edit
+                    </Button>
                   </Row>
                 </CardContent>
                 <CardFooter className="border-t border-future-border-subtle px-6 py-4">

From 5a04b5fce98fba07b454cb1854306e4cb37a1f95 Mon Sep 17 00:00:00 2001
From: David Anthony <dba@hey.com>
Date: Thu, 26 Feb 2026 14:51:02 -0800
Subject: [PATCH 5/8] feat(apollo-wind): adopt shadcn theme convention and
 consolidate theme files
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Rename CSS tokens from future-*/legacy-* prefixed to bare names
  (e.g. --color-future-surface → --surface) scoped by class selectors
- Adopt shadcn convention: bare vars for definitions, --color-* via @theme
- Add shadcn aliases in each theme for component compatibility
- Rename "accent" token to "brand" to avoid shadcn naming conflict
- Consolidate legacy-theme.css into themes.css (renamed from future-theme.css)
- Rename demo theme classes: future-wireframe → wireframe, etc.
- Rename legacy-dark/legacy-light → core-dark/core-light
- Move legacy storybook files to top-level foundation folder
- Reformat all theme comments to inline for improved readability
- Update all components, templates, stories, and docs to match

Made-with: Cursor
---
 packages/apollo-wind/.storybook/preview.tsx   |  16 +-
 packages/apollo-wind/apollo-ai-context.md     |  48 +-
 .../src/components/custom/canvas.stories.tsx  |   2 +-
 .../src/components/custom/canvas.tsx          |   2 +-
 .../custom/chat-composer.stories.tsx          |   2 +-
 .../src/components/custom/chat-composer.tsx   |  18 +-
 .../custom/chat-first-experience.stories.tsx  |   2 +-
 .../custom/chat-first-experience.tsx          |   4 +-
 .../chat-prompt-suggestions.stories.tsx       |   2 +-
 .../custom/chat-prompt-suggestions.tsx        |   2 +-
 .../custom/chat-steps-view.stories.tsx        |   2 +-
 .../src/components/custom/chat-steps-view.tsx |  48 +-
 .../components/custom/flow-node.stories.tsx   |  10 +-
 .../src/components/custom/flow-node.tsx       |  14 +-
 .../components/custom/flow-properties-bar.tsx |  20 +-
 .../custom/flow-properties-expanded.tsx       |  50 +-
 .../custom/flow-properties-simple.tsx         |  62 +-
 .../custom/flow-properties.stories.tsx        |  10 +-
 .../custom/global-header.stories.tsx          |  12 +-
 .../src/components/custom/global-header.tsx   |  88 +--
 .../custom/grid-maestro.stories.tsx           |   2 +-
 .../src/components/custom/grid-maestro.tsx    |   2 +-
 .../custom/panel-delegate.stories.tsx         |   8 +-
 .../src/components/custom/panel-delegate.tsx  |  32 +-
 .../components/custom/panel-flow.stories.tsx  |   8 +-
 .../src/components/custom/panel-flow.tsx      |  40 +-
 .../custom/panel-maestro.stories.tsx          |   8 +-
 .../src/components/custom/panel-maestro.tsx   |   8 +-
 .../custom/toolbar-canvas.stories.tsx         |   2 +-
 .../src/components/custom/toolbar-canvas.tsx  |  16 +-
 .../custom/toolbar-view.stories.tsx           |   2 +-
 .../src/components/custom/toolbar-view.tsx    |  14 +-
 .../src/components/custom/viewport-guard.tsx  |   6 +-
 .../src/foundation/Future/colors.stories.tsx  | 138 ++--
 .../src/foundation/Future/colors.ts           | 140 ++--
 .../src/foundation/Future/future-theme.css    | 569 ---------------
 .../src/foundation/Future/icons.stories.tsx   |   4 +-
 .../src/foundation/Future/legacy-theme.css    | 261 -------
 .../src/foundation/Future/radius.stories.tsx  |  34 +-
 .../foundation/Future/responsive.stories.tsx  |  38 +-
 .../src/foundation/Future/shadows.stories.tsx |  34 +-
 .../src/foundation/Future/spacing.stories.tsx |  40 +-
 .../src/foundation/Future/strokes.stories.tsx |  70 +-
 .../src/foundation/Future/theme.stories.tsx   | 236 +++----
 .../src/foundation/Future/themes.css          | 645 ++++++++++++++++++
 .../src/foundation/Future/types.ts            |   6 +-
 .../foundation/Future/typography.stories.tsx  |  40 +-
 .../{Legacy => }/colors.stories.tsx           |   0
 .../foundation/{Legacy => }/icons.stories.tsx |   0
 .../{Legacy => }/spacing.stories.tsx          |   0
 .../{Legacy => }/typography.stories.tsx       |   0
 .../getting-started.stories.tsx               |  10 +-
 .../getting-started/prototyping.stories.tsx   |  26 +-
 packages/apollo-wind/src/styles/tailwind.css  |   3 +-
 .../src/templates/Admin/admin.stories.tsx     | 180 ++---
 .../src/templates/Admin/settings-admin.tsx    | 172 ++---
 .../src/templates/Admin/template-admin.tsx    |  38 +-
 .../templates/Delegate/delegate.stories.tsx   |  88 +--
 .../templates/Delegate/template-delegate.tsx  |  16 +-
 .../EmptyErrors/empty-errors.stories.tsx      |  16 +-
 .../EmptyErrors/error-components.tsx          |   2 +-
 .../Experiments/brand-motion.stories.tsx      |  63 ++
 .../templates/Experiments/ideas.stories.tsx   | 146 ++--
 .../src/templates/Flow/template-flow.tsx      |  30 +-
 .../src/templates/Maestro/maestro.stories.tsx | 130 ++--
 .../templates/Maestro/template-maestro.tsx    |  16 +-
 .../Maestro/visualization.stories.tsx         | 132 ++--
 .../src/templates/Studio/studio.stories.tsx   |  69 ++
 .../VisualStudio/visual-studio.stories.tsx    |  16 +-
 69 files changed, 1958 insertions(+), 2012 deletions(-)
 delete mode 100644 packages/apollo-wind/src/foundation/Future/future-theme.css
 delete mode 100644 packages/apollo-wind/src/foundation/Future/legacy-theme.css
 create mode 100644 packages/apollo-wind/src/foundation/Future/themes.css
 rename packages/apollo-wind/src/foundation/{Legacy => }/colors.stories.tsx (100%)
 rename packages/apollo-wind/src/foundation/{Legacy => }/icons.stories.tsx (100%)
 rename packages/apollo-wind/src/foundation/{Legacy => }/spacing.stories.tsx (100%)
 rename packages/apollo-wind/src/foundation/{Legacy => }/typography.stories.tsx (100%)
 create mode 100644 packages/apollo-wind/src/templates/Experiments/brand-motion.stories.tsx
 create mode 100644 packages/apollo-wind/src/templates/Studio/studio.stories.tsx

diff --git a/packages/apollo-wind/.storybook/preview.tsx b/packages/apollo-wind/.storybook/preview.tsx
index 8099f5b4f..a9b679e84 100644
--- a/packages/apollo-wind/.storybook/preview.tsx
+++ b/packages/apollo-wind/.storybook/preview.tsx
@@ -110,8 +110,8 @@ const preview: Preview = {
         title: 'Theme',
         icon: 'paintbrush',
         items: [
-          { value: 'legacy-light', title: 'Light' },
-          { value: 'legacy-dark', title: 'Dark' },
+          { value: 'core-light', title: 'Light' },
+          { value: 'core-dark', title: 'Dark' },
           { value: 'light', title: 'Future: Light' },
           { value: 'dark', title: 'Future: Dark' },
           { value: 'wireframe', title: 'Demo: Wireframe' },
@@ -144,11 +144,11 @@ const preview: Preview = {
       // Map the toolbar value to the CSS class that activates the correct
       // set of CSS custom properties (surfaces, foregrounds, borders, etc.).
       const themeClassMap: Record<string, string> = {
-        'legacy-dark': 'legacy-dark',
-        'legacy-light': 'legacy-light',
-        wireframe: 'future-wireframe',
-        vertex: 'future-vertex',
-        canvas: 'future-canvas',
+        'core-dark': 'core-dark',
+        'core-light': 'core-light',
+        wireframe: 'wireframe',
+        vertex: 'vertex',
+        canvas: 'canvas',
         light: 'future-light',
       };
       const themeClass = themeClassMap[futureTheme] ?? 'future-dark';
@@ -158,7 +158,7 @@ const preview: Preview = {
       // correct CSS variables (shadcn bridge + Future tokens).
       useEffect(() => {
         const root = document.documentElement;
-        const allThemeClasses = ['future-dark', 'future-light', 'future-wireframe', 'future-vertex', 'future-canvas', 'legacy-dark', 'legacy-light'];
+        const allThemeClasses = ['future-dark', 'future-light', 'wireframe', 'vertex', 'canvas', 'core-dark', 'core-light'];
         root.classList.remove(...allThemeClasses);
         root.classList.add(themeClass);
         return () => {
diff --git a/packages/apollo-wind/apollo-ai-context.md b/packages/apollo-wind/apollo-ai-context.md
index 89b7ddf99..c0746dcc8 100644
--- a/packages/apollo-wind/apollo-ai-context.md
+++ b/packages/apollo-wind/apollo-ai-context.md
@@ -47,46 +47,46 @@ Themes use CSS custom properties scoped to CSS classes. Apply a class to a paren
 |-------|-------------|
 | `future-dark` | Future design language — dark mode (default) |
 | `future-light` | Future design language — light mode |
-| `legacy-dark` | Legacy design language — dark mode |
-| `legacy-light` | Legacy design language — light mode |
+| `core-dark` | Core design language — dark mode |
+| `core-light` | Core design language — light mode |
 
 ### Color tokens (use these, not raw colors)
 
 **Surfaces (backgrounds):**
-- `bg-future-surface` — page/canvas background
-- `bg-future-surface-raised` — cards, panels
-- `bg-future-surface-overlay` — inputs, tabs, icon rail
-- `bg-future-surface-hover` — hover/selected states
-- `bg-future-surface-muted` — badges, indicators
-- `bg-future-surface-inverse` — inverse backgrounds
+- `bg-surface` — page/canvas background
+- `bg-surface-raised` — cards, panels
+- `bg-surface-overlay` — inputs, tabs, icon rail
+- `bg-surface-hover` — hover/selected states
+- `bg-surface-muted` — badges, indicators
+- `bg-surface-inverse` — inverse backgrounds
 
-**Accent:**
-- `bg-future-accent` — primary accent cyan (#06b6d4)
-- `bg-future-accent-subtle` — subtle accent backgrounds
+**Brand:**
+- `bg-brand` — primary brand cyan (#0891b2)
+- `bg-brand-subtle` — subtle accent backgrounds
 
 **Text/icons (foreground):**
-- `text-future-foreground` — primary text
-- `text-future-foreground-secondary` — body text
-- `text-future-foreground-muted` — secondary UI text
-- `text-future-foreground-subtle` — muted labels
-- `text-future-foreground-inverse` — text on inverse backgrounds
-- `text-future-foreground-accent` — accent-colored text/icons
+- `text-foreground` — primary text
+- `text-foreground-secondary` — body text
+- `text-foreground-muted` — secondary UI text
+- `text-foreground-subtle` — muted labels
+- `text-foreground-inverse` — text on inverse backgrounds
+- `text-foreground-accent` — accent-colored text/icons
 
 **Borders:**
-- `border-future-border` — primary borders
-- `border-future-border-subtle` — subtle dividers
-- `border-future-border-muted` — content borders
+- `border-border` — primary borders
+- `border-border-subtle` — subtle dividers
+- `border-border-muted` — content borders
 
 ### Bridge tokens (cross-theme compatible)
 
-For code that must work across all 4 themes (Future + Legacy), use these shadcn bridge tokens instead of `future-*`. They resolve correctly under any theme class.
+For code that must work across all 4 themes (Future + Core), use these shadcn bridge tokens instead of `future-*`. They resolve correctly under any theme class.
 
 - **Surfaces:** `bg-background`, `bg-card`, `bg-muted`, `bg-muted/50`
 - **Text:** `text-foreground`, `text-muted-foreground`, `text-card-foreground`
 - **Borders:** `border-border`, `border-input`
 - **Accent:** `bg-primary`, `text-primary`, `text-primary-foreground`, `bg-primary/10`
 
-> **When to use which:** Use `future-*` tokens when building for a specific theme. Use bridge tokens when the same code must render across Future and Legacy themes.
+> **When to use which:** Use `future-*` tokens when building for a specific theme. Use bridge tokens when the same code must render across Future and Core themes.
 
 ### Typography
 
@@ -485,8 +485,8 @@ packages/apollo-wind/src/
 │   └── Future/
 │       ├── colors.ts           # Color token definitions
 │       ├── typography.ts       # Font stacks
-│       ├── future-theme.css    # Future theme CSS variables
-│       └── legacy-theme.css    # Legacy theme CSS variables
+│       ├── themes.css           # All theme CSS variables
+│       └── ... (stories, tokens)
 ├── templates/
 │   ├── Admin/        # AdminTemplate + sub-components
 │   ├── Delegate/     # DelegateTemplate
diff --git a/packages/apollo-wind/src/components/custom/canvas.stories.tsx b/packages/apollo-wind/src/components/custom/canvas.stories.tsx
index dc07b0db7..32853d440 100644
--- a/packages/apollo-wind/src/components/custom/canvas.stories.tsx
+++ b/packages/apollo-wind/src/components/custom/canvas.stories.tsx
@@ -16,7 +16,7 @@ export const Default: Story = {
   render: () => (
     <div className="future-dark flex h-[500px]">
       <Canvas>
-        <div className="flex flex-1 items-center justify-center text-sm text-future-foreground-muted">
+        <div className="flex flex-1 items-center justify-center text-sm text-foreground-muted">
           Canvas content area — used as the main content surface in Delegate and Flow templates.
         </div>
       </Canvas>
diff --git a/packages/apollo-wind/src/components/custom/canvas.tsx b/packages/apollo-wind/src/components/custom/canvas.tsx
index 0fb8ec2b3..ea370beab 100644
--- a/packages/apollo-wind/src/components/custom/canvas.tsx
+++ b/packages/apollo-wind/src/components/custom/canvas.tsx
@@ -26,7 +26,7 @@ export function Canvas({ className, children }: CanvasProps) {
   return (
     <div
       className={cn(
-        'flex flex-1 flex-col overflow-auto bg-future-surface',
+        'flex flex-1 flex-col overflow-auto bg-surface',
         className
       )}
     >
diff --git a/packages/apollo-wind/src/components/custom/chat-composer.stories.tsx b/packages/apollo-wind/src/components/custom/chat-composer.stories.tsx
index 62621c8c8..4f9fff3d0 100644
--- a/packages/apollo-wind/src/components/custom/chat-composer.stories.tsx
+++ b/packages/apollo-wind/src/components/custom/chat-composer.stories.tsx
@@ -14,7 +14,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   render: () => (
-    <div className="future-dark flex w-[900px] items-center justify-center bg-future-surface p-8">
+    <div className="future-dark flex w-[900px] items-center justify-center bg-surface p-8">
       <ChatComposer placeholder="I would like you to automate my" />
     </div>
   ),
diff --git a/packages/apollo-wind/src/components/custom/chat-composer.tsx b/packages/apollo-wind/src/components/custom/chat-composer.tsx
index 35c1433eb..c519432c3 100644
--- a/packages/apollo-wind/src/components/custom/chat-composer.tsx
+++ b/packages/apollo-wind/src/components/custom/chat-composer.tsx
@@ -49,14 +49,14 @@ export function ChatComposer({
   return (
     <div
       className={cn(
-        'w-full max-w-[800px] rounded-[32px] bg-gradient-to-b from-future-surface to-future-surface-raised p-2',
+        'w-full max-w-[800px] rounded-[32px] bg-gradient-to-b from-surface to-surface-raised p-2',
         className
       )}
     >
-      <div className="flex min-h-[124px] flex-col justify-between rounded-3xl border border-future-border bg-future-surface-overlay pb-3 pl-4 pr-3 pt-4">
+      <div className="flex min-h-[124px] flex-col justify-between rounded-3xl border border-border bg-surface-overlay pb-3 pl-4 pr-3 pt-4">
         {/* Text area */}
         <textarea
-          className="w-full resize-none bg-transparent text-base font-medium leading-5 text-future-foreground placeholder:text-future-foreground-subtle focus:outline-none"
+          className="w-full resize-none bg-transparent text-base font-medium leading-5 text-foreground placeholder:text-foreground-subtle focus:outline-none"
           placeholder={placeholder}
           rows={2}
           value={value}
@@ -70,28 +70,28 @@ export function ChatComposer({
           <div className="flex items-center gap-1">
             <button
               type="button"
-              className="flex h-8 w-8 items-center justify-center rounded-2xl border border-future-border-inverse bg-future-surface-inverse transition-opacity hover:opacity-80"
+              className="flex h-8 w-8 items-center justify-center rounded-2xl border border-border-inverse bg-surface-inverse transition-opacity hover:opacity-80"
               aria-label="Add attachment"
             >
-              <Plus className="h-5 w-5 text-future-foreground-inverse" />
+              <Plus className="h-5 w-5 text-foreground-inverse" />
             </button>
             <button
               type="button"
-              className="flex h-8 w-8 items-center justify-center rounded-2xl border border-future-border-inverse bg-future-surface-inverse transition-opacity hover:opacity-80"
+              className="flex h-8 w-8 items-center justify-center rounded-2xl border border-border-inverse bg-surface-inverse transition-opacity hover:opacity-80"
               aria-label="Add workflow"
             >
-              <Workflow className="h-5 w-5 text-future-foreground-inverse" />
+              <Workflow className="h-5 w-5 text-foreground-inverse" />
             </button>
           </div>
 
           {/* Submit button */}
           <button
             type="button"
-            className="flex h-8 w-8 items-center justify-center rounded-2xl bg-future-accent transition-opacity hover:opacity-90"
+            className="flex h-8 w-8 items-center justify-center rounded-2xl bg-brand transition-opacity hover:opacity-90"
             onClick={handleSubmit}
             aria-label="Submit message"
           >
-            <CornerDownLeft className="h-5 w-5 -scale-y-100 rotate-90 text-future-foreground-on-accent" />
+            <CornerDownLeft className="h-5 w-5 -scale-y-100 rotate-90 text-foreground-on-accent" />
           </button>
         </div>
       </div>
diff --git a/packages/apollo-wind/src/components/custom/chat-first-experience.stories.tsx b/packages/apollo-wind/src/components/custom/chat-first-experience.stories.tsx
index a18f564be..ff4a3fd5d 100644
--- a/packages/apollo-wind/src/components/custom/chat-first-experience.stories.tsx
+++ b/packages/apollo-wind/src/components/custom/chat-first-experience.stories.tsx
@@ -14,7 +14,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   render: () => (
-    <div className="future-dark flex h-screen bg-future-surface">
+    <div className="future-dark flex h-screen bg-surface">
       <ChatFirstExperience
         userName="David"
         subtitle="What should we work on today?"
diff --git a/packages/apollo-wind/src/components/custom/chat-first-experience.tsx b/packages/apollo-wind/src/components/custom/chat-first-experience.tsx
index 404d7b047..ef5a1803e 100644
--- a/packages/apollo-wind/src/components/custom/chat-first-experience.tsx
+++ b/packages/apollo-wind/src/components/custom/chat-first-experience.tsx
@@ -60,10 +60,10 @@ export function ChatFirstExperience({
       <div className="flex w-full max-w-[800px] flex-col items-center gap-[37px]">
         {/* Greeting */}
         <div className="flex flex-col items-center text-center">
-          <h1 className="text-[40px] font-bold leading-9 tracking-[-0.8px] text-future-foreground">
+          <h1 className="text-[40px] font-bold leading-9 tracking-[-0.8px] text-foreground">
             Hello {userName}
           </h1>
-          <p className="mt-1 text-base font-normal leading-9 text-future-foreground-secondary">
+          <p className="mt-1 text-base font-normal leading-9 text-foreground-secondary">
             {subtitle}
           </p>
         </div>
diff --git a/packages/apollo-wind/src/components/custom/chat-prompt-suggestions.stories.tsx b/packages/apollo-wind/src/components/custom/chat-prompt-suggestions.stories.tsx
index 778ec2c74..f2d7fd543 100644
--- a/packages/apollo-wind/src/components/custom/chat-prompt-suggestions.stories.tsx
+++ b/packages/apollo-wind/src/components/custom/chat-prompt-suggestions.stories.tsx
@@ -14,7 +14,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   render: () => (
-    <div className="future-dark bg-future-surface p-8">
+    <div className="future-dark bg-surface p-8">
       <PromptSuggestions
         suggestions={[
           { id: '1', label: 'Make a list of affordable apartments in NYC' },
diff --git a/packages/apollo-wind/src/components/custom/chat-prompt-suggestions.tsx b/packages/apollo-wind/src/components/custom/chat-prompt-suggestions.tsx
index 190bec817..b1d286fbf 100644
--- a/packages/apollo-wind/src/components/custom/chat-prompt-suggestions.tsx
+++ b/packages/apollo-wind/src/components/custom/chat-prompt-suggestions.tsx
@@ -39,7 +39,7 @@ export function PromptSuggestions({
       {suggestions.map((suggestion) => (
         <button
           key={suggestion.id}
-          className="flex h-10 items-center rounded-xl border border-future-border bg-future-surface-overlay px-4 py-2.5 text-sm font-medium leading-5 text-future-foreground transition-colors hover:bg-future-surface-hover"
+          className="flex h-10 items-center rounded-xl border border-border bg-surface-overlay px-4 py-2.5 text-sm font-medium leading-5 text-foreground transition-colors hover:bg-surface-hover"
           onClick={() => onSelect?.(suggestion)}
         >
           {suggestion.label}
diff --git a/packages/apollo-wind/src/components/custom/chat-steps-view.stories.tsx b/packages/apollo-wind/src/components/custom/chat-steps-view.stories.tsx
index 762c533b1..b6349f459 100644
--- a/packages/apollo-wind/src/components/custom/chat-steps-view.stories.tsx
+++ b/packages/apollo-wind/src/components/custom/chat-steps-view.stories.tsx
@@ -42,7 +42,7 @@ const sampleSteps = [
 
 export const Default: Story = {
   render: () => (
-    <div className="future-dark flex h-screen bg-future-surface">
+    <div className="future-dark flex h-screen bg-surface">
       <StepsView
         className="mx-auto max-w-3xl"
         flowName="Invoice processing"
diff --git a/packages/apollo-wind/src/components/custom/chat-steps-view.tsx b/packages/apollo-wind/src/components/custom/chat-steps-view.tsx
index df280444e..596dbef46 100644
--- a/packages/apollo-wind/src/components/custom/chat-steps-view.tsx
+++ b/packages/apollo-wind/src/components/custom/chat-steps-view.tsx
@@ -54,14 +54,14 @@ export interface StepsViewProps {
 
 /** Vertical divider for the header */
 function HeaderDivider() {
-  return <div className="h-9 w-px bg-future-border-subtle" />;
+  return <div className="h-9 w-px bg-border-subtle" />;
 }
 
 /** Status badge (e.g. ACTIVE) */
 function StatusBadge({ label }: { label: string }) {
   return (
-    <div className="flex h-10 items-center rounded-xl bg-future-accent-subtle px-4 py-2">
-      <span className="text-sm font-bold leading-5 text-future-foreground-accent-muted">
+    <div className="flex h-10 items-center rounded-xl bg-brand-subtle px-4 py-2">
+      <span className="text-sm font-bold leading-5 text-foreground-accent-muted">
         {label}
       </span>
     </div>
@@ -72,8 +72,8 @@ function StatusBadge({ label }: { label: string }) {
 function StatItem({ value, label }: { value: string; label: string }) {
   return (
     <div className="flex flex-col gap-0.5">
-      <span className="text-[15px] font-semibold leading-5 text-future-foreground">{value}</span>
-      <span className="text-sm font-medium leading-5 text-future-foreground-subtle">{label}</span>
+      <span className="text-[15px] font-semibold leading-5 text-foreground">{value}</span>
+      <span className="text-sm font-medium leading-5 text-foreground-subtle">{label}</span>
     </div>
   );
 }
@@ -90,7 +90,7 @@ function ActionButton({
 }) {
   return (
     <button
-      className="flex h-10 items-center gap-2 rounded-xl border border-future-border px-4 py-2 text-sm font-medium leading-5 text-future-foreground-subtle transition-colors hover:border-future-border-hover hover:text-future-foreground-hover"
+      className="flex h-10 items-center gap-2 rounded-xl border border-border px-4 py-2 text-sm font-medium leading-5 text-foreground-subtle transition-colors hover:border-border-hover hover:text-foreground-hover"
       onClick={onClick}
     >
       {icon}
@@ -108,15 +108,15 @@ function TabBar({ activeTab }: { activeTab: 'steps' | 'history' | 'resources' })
   ];
 
   return (
-    <div className="flex h-10 items-center rounded-xl bg-future-surface-overlay p-1">
+    <div className="flex h-10 items-center rounded-xl bg-surface-overlay p-1">
       {tabs.map((tab) => (
         <div
           key={tab.id}
           className={cn(
             'flex h-8 items-center gap-2 rounded-[10px] px-4 py-2 text-sm font-medium leading-5 transition-colors',
             activeTab === tab.id
-              ? 'border border-future-border-subtle bg-future-surface text-future-foreground'
-              : 'text-future-foreground-subtle hover:text-future-foreground-hover'
+              ? 'border border-border-subtle bg-surface text-foreground'
+              : 'text-foreground-subtle hover:text-foreground-hover'
           )}
         >
           {tab.icon}
@@ -134,44 +134,44 @@ function StepCard({ step, isHovered }: { step: FlowStep; isHovered?: boolean })
       className={cn(
         'flex h-16 items-center justify-between rounded-2xl border px-4',
         isHovered
-          ? 'border-future-border-subtle bg-future-surface-overlay shadow-[0px_4px_24px_0px_rgba(0,0,0,0.25)]'
-          : 'border-future-border-subtle'
+          ? 'border-border-subtle bg-surface-overlay shadow-[0px_4px_24px_0px_rgba(0,0,0,0.25)]'
+          : 'border-border-subtle'
       )}
     >
       <div className="flex items-center gap-4">
         {/* Bot icon */}
-        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-future-surface-hover">
-          <Bot className="h-5 w-5 text-future-foreground" />
+        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-surface-hover">
+          <Bot className="h-5 w-5 text-foreground" />
         </div>
 
         {/* Step info */}
         <div className="flex flex-col">
           <div className="flex items-start gap-0.5">
-            <span className="text-sm font-semibold leading-5 tracking-[-0.35px] text-future-foreground">
+            <span className="text-sm font-semibold leading-5 tracking-[-0.35px] text-foreground">
               {step.title}
             </span>
-            <span className="ms-1 text-xs leading-5 tracking-[-0.3px] text-future-foreground-subtle">
+            <span className="ms-1 text-xs leading-5 tracking-[-0.3px] text-foreground-subtle">
               &bull; {step.stepRange}
             </span>
           </div>
           {step.loop ? (
             <div className="flex items-center gap-2">
-              <div className="flex h-5 w-5 items-center justify-center rounded-[10px] bg-future-surface-muted">
-                <Repeat2 className="h-3.5 w-3.5 text-future-foreground-on-accent" />
+              <div className="flex h-5 w-5 items-center justify-center rounded-[10px] bg-surface-muted">
+                <Repeat2 className="h-3.5 w-3.5 text-foreground-on-accent" />
               </div>
-              <span className="text-sm leading-5 text-future-foreground-subtle">
+              <span className="text-sm leading-5 text-foreground-subtle">
                 <span className="font-semibold">Loop</span>: {step.loop}
               </span>
             </div>
           ) : (
-            <span className="text-sm leading-5 tracking-[-0.35px] text-future-foreground-subtle">
+            <span className="text-sm leading-5 tracking-[-0.35px] text-foreground-subtle">
               {step.description}
             </span>
           )}
         </div>
       </div>
 
-      <ChevronDown className="h-4 w-4 shrink-0 text-future-foreground-subtle" />
+      <ChevronDown className="h-4 w-4 shrink-0 text-foreground-subtle" />
     </div>
   );
 }
@@ -233,17 +233,17 @@ export function StepsView({
         <div className="flex shrink-0 items-center gap-4">
           <button
             type="button"
-            className="shrink-0 text-future-foreground transition-colors hover:text-future-foreground"
+            className="shrink-0 text-foreground transition-colors hover:text-foreground"
             onClick={onBack}
             aria-label="Go back"
           >
             <ArrowLeft className="h-6 w-6" />
           </button>
           <div className="flex flex-col gap-1">
-            <span className="whitespace-nowrap text-xl font-semibold leading-5 text-future-foreground">
+            <span className="whitespace-nowrap text-xl font-semibold leading-5 text-foreground">
               {flowName}
             </span>
-            <span className="whitespace-nowrap text-sm font-medium leading-5 text-future-foreground-subtle">
+            <span className="whitespace-nowrap text-sm font-medium leading-5 text-foreground-subtle">
               {flowDescription}
             </span>
           </div>
@@ -272,7 +272,7 @@ export function StepsView({
       </div>
 
       {/* Content area */}
-      <div className="flex flex-1 flex-col rounded-t-2xl border border-future-border-muted bg-future-surface p-4">
+      <div className="flex flex-1 flex-col rounded-t-2xl border border-border-muted bg-surface p-4">
         {/* Tab bar */}
         <TabBar activeTab={activeTab} />
 
diff --git a/packages/apollo-wind/src/components/custom/flow-node.stories.tsx b/packages/apollo-wind/src/components/custom/flow-node.stories.tsx
index 6754460d4..5523e4c2b 100644
--- a/packages/apollo-wind/src/components/custom/flow-node.stories.tsx
+++ b/packages/apollo-wind/src/components/custom/flow-node.stories.tsx
@@ -15,7 +15,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   render: () => (
-    <div className="future-dark bg-future-surface p-8">
+    <div className="future-dark bg-surface p-8">
       <FlowNode title="AI Agent" />
     </div>
   ),
@@ -23,7 +23,7 @@ export const Default: Story = {
 
 export const Selected: Story = {
   render: () => (
-    <div className="future-dark bg-future-surface p-8">
+    <div className="future-dark bg-surface p-8">
       <FlowNode title="AI Agent" selected />
     </div>
   ),
@@ -31,14 +31,14 @@ export const Selected: Story = {
 
 export const CustomIcon: Story = {
   render: () => (
-    <div className="future-dark flex gap-4 bg-future-surface p-8">
+    <div className="future-dark flex gap-4 bg-surface p-8">
       <FlowNode
         title="Extract Data"
-        icon={<FileText className="h-5 w-5 text-future-accent-foreground" />}
+        icon={<FileText className="h-5 w-5 text-brand-foreground" />}
       />
       <FlowNode
         title="Send Email"
-        icon={<Mail className="h-5 w-5 text-future-accent-foreground" />}
+        icon={<Mail className="h-5 w-5 text-brand-foreground" />}
       />
     </div>
   ),
diff --git a/packages/apollo-wind/src/components/custom/flow-node.tsx b/packages/apollo-wind/src/components/custom/flow-node.tsx
index 3dc9ffa9c..630492256 100644
--- a/packages/apollo-wind/src/components/custom/flow-node.tsx
+++ b/packages/apollo-wind/src/components/custom/flow-node.tsx
@@ -39,8 +39,8 @@ export function FlowNode({
   return (
     <div
       className={cn(
-        'flex h-[360px] w-[360px] flex-col overflow-hidden rounded-2xl bg-future-surface-overlay px-4 pb-4 pt-2.5',
-        selected && 'ring-1 ring-future-ring',
+        'flex h-[360px] w-[360px] flex-col overflow-hidden rounded-2xl bg-surface-overlay px-4 pb-4 pt-2.5',
+        selected && 'ring-1 ring-ring',
         className
       )}
     >
@@ -48,16 +48,16 @@ export function FlowNode({
         {/* Header */}
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2.5">
-            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-future-surface">
-              {icon ?? <Bot className="h-5 w-5 text-future-foreground-muted" />}
+            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-surface">
+              {icon ?? <Bot className="h-5 w-5 text-foreground-muted" />}
             </div>
-            <span className="text-sm font-medium text-future-foreground">{title}</span>
+            <span className="text-sm font-medium text-foreground">{title}</span>
           </div>
-          <ChevronDown className="h-4 w-4 text-future-foreground-muted" />
+          <ChevronDown className="h-4 w-4 text-foreground-muted" />
         </div>
 
         {/* Content area */}
-        <div className="flex-1 rounded-lg bg-future-surface-raised">
+        <div className="flex-1 rounded-lg bg-surface-raised">
           {children}
         </div>
       </div>
diff --git a/packages/apollo-wind/src/components/custom/flow-properties-bar.tsx b/packages/apollo-wind/src/components/custom/flow-properties-bar.tsx
index 102e3b0da..5d40b9978 100644
--- a/packages/apollo-wind/src/components/custom/flow-properties-bar.tsx
+++ b/packages/apollo-wind/src/components/custom/flow-properties-bar.tsx
@@ -41,31 +41,31 @@ export function PropertiesBar({
   return (
     <div
       className={cn(
-        'flex h-16 items-center justify-between rounded-2xl bg-future-surface-raised px-4',
+        'flex h-16 items-center justify-between rounded-2xl bg-surface-raised px-4',
         className
       )}
     >
       {/* Left: flow icon + name */}
       <div className="flex items-center gap-4">
-        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-future-accent-subtle">
-          <Workflow className="h-6 w-6 text-future-accent-foreground" />
+        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-brand-subtle">
+          <Workflow className="h-6 w-6 text-brand-foreground" />
         </div>
         <div className="flex flex-col">
-          <span className="text-base font-semibold leading-5 tracking-[-0.4px] text-future-foreground">
+          <span className="text-base font-semibold leading-5 tracking-[-0.4px] text-foreground">
             {flowName}
           </span>
-          <span className="text-sm font-normal leading-5 tracking-[-0.35px] text-future-foreground-subtle">
+          <span className="text-sm font-normal leading-5 tracking-[-0.35px] text-foreground-subtle">
             {flowType}
           </span>
         </div>
       </div>
 
       {/* Right: Properties / Variables tabs */}
-      <div className="flex h-10 items-center rounded-xl bg-future-surface-overlay border border-future-border-deep p-1">
+      <div className="flex h-10 items-center rounded-xl bg-surface-overlay border border-border-deep p-1">
         <button
           className={cn(
-            'flex h-8 items-center gap-2 rounded-[10px] px-4 py-2 text-sm font-medium leading-5 text-future-foreground-subtle transition-colors hover:text-future-foreground-hover',
-            activeTab === 'properties' && 'text-future-foreground-subtle'
+            'flex h-8 items-center gap-2 rounded-[10px] px-4 py-2 text-sm font-medium leading-5 text-foreground-subtle transition-colors hover:text-foreground-hover',
+            activeTab === 'properties' && 'text-foreground-subtle'
           )}
           onClick={() => {
             onTabChange?.('properties');
@@ -77,8 +77,8 @@ export function PropertiesBar({
         </button>
         <button
           className={cn(
-            'flex h-7 items-center gap-2 rounded-xl px-4 py-2 text-sm font-medium leading-5 text-future-foreground-subtle transition-colors',
-            activeTab === 'variables' && 'text-future-foreground-subtle'
+            'flex h-7 items-center gap-2 rounded-xl px-4 py-2 text-sm font-medium leading-5 text-foreground-subtle transition-colors',
+            activeTab === 'variables' && 'text-foreground-subtle'
           )}
           onClick={() => onTabChange?.('variables')}
         >
diff --git a/packages/apollo-wind/src/components/custom/flow-properties-expanded.tsx b/packages/apollo-wind/src/components/custom/flow-properties-expanded.tsx
index 6ec384f48..933b2b7cc 100644
--- a/packages/apollo-wind/src/components/custom/flow-properties-expanded.tsx
+++ b/packages/apollo-wind/src/components/custom/flow-properties-expanded.tsx
@@ -46,7 +46,7 @@ function MiniTab({
     <button
       className={cn(
         'flex h-6 items-center rounded-lg px-2 text-xs font-medium leading-5',
-        active ? 'bg-future-surface text-future-foreground' : 'text-future-foreground-subtle'
+        active ? 'bg-surface text-foreground' : 'text-foreground-subtle'
       )}
       onClick={onClick}
     >
@@ -63,9 +63,9 @@ function SectionHeader({ title }: { title: string }) {
   return (
     <div className="flex items-center gap-1 px-2 py-1">
       <div className="flex h-8 w-8 items-center justify-center rounded-xl">
-        <GripVertical className="h-5 w-5 text-future-foreground-subtle" />
+        <GripVertical className="h-5 w-5 text-foreground-subtle" />
       </div>
-      <span className="text-sm font-semibold leading-5 text-future-foreground">{title}</span>
+      <span className="text-sm font-semibold leading-5 text-foreground">{title}</span>
     </div>
   );
 }
@@ -81,13 +81,13 @@ function CodeViewer({ lines, className }: { lines: string[]; className?: string
       style={{ fontFamily: fontFamily.monospace }}
     >
       {/* Line numbers */}
-      <div className="flex flex-col text-right text-future-foreground-subtle select-none">
+      <div className="flex flex-col text-right text-foreground-subtle select-none">
         {lines.map((_, i) => (
           <span key={i}>{i + 1}</span>
         ))}
       </div>
       {/* Code content */}
-      <div className="flex flex-col whitespace-pre text-future-foreground-muted">
+      <div className="flex flex-col whitespace-pre text-foreground-muted">
         {lines.map((line, i) => (
           <span key={i}>{line}</span>
         ))}
@@ -146,22 +146,22 @@ export function PropertiesExpanded({
   return (
     <div
       className={cn(
-        'flex w-[930px] shrink-0 flex-col rounded-2xl bg-future-surface-raised',
+        'flex w-[930px] shrink-0 flex-col rounded-2xl bg-surface-raised',
         className
       )}
     >
       {/* ── Header ────────────────────────────────────────────── */}
-      <div className="flex items-center justify-between border-b border-future-border p-4">
+      <div className="flex items-center justify-between border-b border-border p-4">
         {/* Left: icon + name */}
         <div className="flex items-center gap-4">
-          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-future-accent-subtle">
-            <Bot className="h-6 w-6 text-future-accent-foreground" />
+          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-brand-subtle">
+            <Bot className="h-6 w-6 text-brand-foreground" />
           </div>
           <div className="flex flex-col">
-            <span className="text-base font-semibold leading-5 tracking-[-0.4px] text-future-foreground">
+            <span className="text-base font-semibold leading-5 tracking-[-0.4px] text-foreground">
               {nodeName}
             </span>
-            <span className="text-sm font-normal leading-5 tracking-[-0.35px] text-future-foreground-subtle">
+            <span className="text-sm font-normal leading-5 tracking-[-0.35px] text-foreground-subtle">
               {nodeType}
             </span>
           </div>
@@ -169,13 +169,13 @@ export function PropertiesExpanded({
 
         {/* Right: Properties/Variables toggle + close */}
         <div className="flex items-center gap-2">
-          <div className="flex h-10 items-center rounded-xl border border-future-border-deep bg-future-surface-overlay p-1">
+          <div className="flex h-10 items-center rounded-xl border border-border-deep bg-surface-overlay p-1">
             <button
               className={cn(
                 'flex h-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5 transition-colors',
                 activeTab === 'properties'
-                  ? 'border border-future-border bg-future-surface text-future-foreground'
-                  : 'text-future-foreground-subtle'
+                  ? 'border border-border bg-surface text-foreground'
+                  : 'text-foreground-subtle'
               )}
             >
               <TableProperties className="h-5 w-5" />
@@ -185,8 +185,8 @@ export function PropertiesExpanded({
               className={cn(
                 'flex h-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5 transition-colors',
                 activeTab === 'variables'
-                  ? 'border border-future-border bg-future-surface text-future-foreground'
-                  : 'text-future-foreground-subtle'
+                  ? 'border border-border bg-surface text-foreground'
+                  : 'text-foreground-subtle'
               )}
             >
               <Variable className="h-5 w-5" />
@@ -196,7 +196,7 @@ export function PropertiesExpanded({
           <Button
             size="icon"
             variant="ghost"
-            className="bg-future-surface-overlay text-future-foreground-muted hover:bg-future-surface-overlay hover:text-future-foreground [&_svg]:size-5"
+            className="bg-surface-overlay text-foreground-muted hover:bg-surface-overlay hover:text-foreground [&_svg]:size-5"
             onClick={onClose}
             aria-label="Close properties"
           >
@@ -206,33 +206,33 @@ export function PropertiesExpanded({
       </div>
 
       {/* ── Sub-header toolbar ────────────────────────────────── */}
-      <div className="flex items-center justify-between border-b border-future-border px-4 py-2">
+      <div className="flex items-center justify-between border-b border-border px-4 py-2">
         <div className="flex items-center gap-2">
           {/* Dock button */}
           <Button
             size="icon"
             variant="ghost"
-            className="bg-future-surface-overlay text-future-foreground-muted hover:bg-future-surface-overlay hover:text-future-foreground [&_svg]:size-5"
+            className="bg-surface-overlay text-foreground-muted hover:bg-surface-overlay hover:text-foreground [&_svg]:size-5"
             aria-label="Toggle panel dock"
           >
             <PanelRightOpen />
           </Button>
           {/* Layout toggle: columns / rows */}
           <div
-            className="flex h-10 items-center rounded-xl border border-future-border-deep bg-future-surface-overlay p-1"
+            className="flex h-10 items-center rounded-xl border border-border-deep bg-surface-overlay p-1"
             role="group"
             aria-label="Layout toggle"
           >
             <button
               type="button"
-              className="flex h-8 w-8 items-center justify-center rounded-[10px] text-future-foreground-muted transition-colors hover:text-future-foreground"
+              className="flex h-8 w-8 items-center justify-center rounded-[10px] text-foreground-muted transition-colors hover:text-foreground"
               aria-label="Columns layout"
             >
               <Columns2 className="h-5 w-5" />
             </button>
             <button
               type="button"
-              className="flex h-8 w-8 items-center justify-center rounded-[10px] border border-future-border bg-future-surface text-future-foreground"
+              className="flex h-8 w-8 items-center justify-center rounded-[10px] border border-border bg-surface text-foreground"
               aria-label="Rows layout"
             >
               <Rows2 className="h-5 w-5" />
@@ -240,14 +240,14 @@ export function PropertiesExpanded({
           </div>
         </div>
         {/* Run node button */}
-        <Button className="bg-future-accent text-future-foreground-on-accent hover:bg-future-accent/90 font-semibold">
+        <Button className="bg-brand text-foreground-on-accent hover:bg-brand/90 font-semibold">
           <Play className="h-4 w-4" />
           Run node
         </Button>
       </div>
 
       {/* ── Code section ──────────────────────────────────────── */}
-      <div className="flex flex-1 flex-col overflow-hidden border-b border-future-border">
+      <div className="flex flex-1 flex-col overflow-hidden border-b border-border">
         <SectionHeader title="Code" />
         <div className="flex items-center gap-1 px-2 pb-2">
           <MiniTab label="Parameters" />
@@ -271,7 +271,7 @@ export function PropertiesExpanded({
         </div>
 
         {/* Divider */}
-        <div className="w-px bg-future-border-subtle" />
+        <div className="w-px bg-border-subtle" />
 
         {/* Output */}
         <div className="flex flex-1 flex-col overflow-hidden">
diff --git a/packages/apollo-wind/src/components/custom/flow-properties-simple.tsx b/packages/apollo-wind/src/components/custom/flow-properties-simple.tsx
index 9cae1e5c6..ffbb50947 100644
--- a/packages/apollo-wind/src/components/custom/flow-properties-simple.tsx
+++ b/packages/apollo-wind/src/components/custom/flow-properties-simple.tsx
@@ -100,13 +100,13 @@ function FieldItem({
     <div className="flex flex-col gap-1 pt-4">
       {/* Label row */}
       <div className="flex items-center justify-between">
-        <span className="text-sm font-medium leading-5 text-future-foreground-muted">
+        <span className="text-sm font-medium leading-5 text-foreground-muted">
           {field.label}
           {field.required && '*'}
         </span>
         {field.showGraphControl && (
           <button
-            className="flex h-6 w-6 items-center justify-center rounded-lg bg-future-surface-overlay text-future-foreground-muted transition-colors hover:text-future-foreground"
+            className="flex h-6 w-6 items-center justify-center rounded-lg bg-surface-overlay text-foreground-muted transition-colors hover:text-foreground"
             onClick={() => onGraphControl?.(field.label)}
             aria-label="Graph control"
           >
@@ -122,18 +122,18 @@ function FieldItem({
             className={cn(
               'h-10 rounded-xl border-0 shadow-sm',
               value
-                ? 'bg-future-surface-hover text-future-foreground'
-                : 'bg-future-surface-overlay text-future-foreground-muted'
+                ? 'bg-surface-hover text-foreground'
+                : 'bg-surface-overlay text-foreground-muted'
             )}
           >
             <SelectValue placeholder={field.placeholder ?? 'Select...'} />
           </SelectTrigger>
-          <SelectContent className="border-future-border bg-future-surface-overlay text-future-foreground">
+          <SelectContent className="border-border bg-surface-overlay text-foreground">
             {(field.options ?? []).map((opt) => (
               <SelectItem
                 key={opt.value}
                 value={opt.value}
-                className="focus:bg-future-surface-hover focus:text-future-foreground"
+                className="focus:bg-surface-hover focus:text-foreground"
               >
                 {opt.label}
               </SelectItem>
@@ -141,16 +141,16 @@ function FieldItem({
           </SelectContent>
         </Select>
       ) : field.type === 'url' ? (
-        <div className="flex h-10 items-center overflow-hidden rounded-xl bg-future-surface-overlay shadow-sm">
+        <div className="flex h-10 items-center overflow-hidden rounded-xl bg-surface-overlay shadow-sm">
           <Input
             value={value}
             onChange={(e) => setValue(e.target.value)}
             placeholder={field.placeholder}
-            className="h-full flex-1 rounded-none border-0 bg-transparent text-sm font-medium text-future-foreground-muted shadow-none placeholder:text-future-foreground-subtle focus-visible:ring-0"
+            className="h-full flex-1 rounded-none border-0 bg-transparent text-sm font-medium text-foreground-muted shadow-none placeholder:text-foreground-subtle focus-visible:ring-0"
           />
           <button
             type="button"
-            className="flex h-full w-[50px] items-center justify-center border-l border-future-border text-future-foreground-muted transition-colors hover:text-future-foreground"
+            className="flex h-full w-[50px] items-center justify-center border-l border-border text-foreground-muted transition-colors hover:text-foreground"
             aria-label="Browse files"
           >
             <Folder className="h-5 w-5" />
@@ -164,8 +164,8 @@ function FieldItem({
           className={cn(
             'h-10 rounded-xl border-0 text-sm font-medium shadow-sm',
             value
-              ? 'bg-future-surface-hover text-future-foreground'
-              : 'bg-future-surface-overlay text-future-foreground-muted placeholder:text-future-foreground-subtle'
+              ? 'bg-surface-hover text-foreground'
+              : 'bg-surface-overlay text-foreground-muted placeholder:text-foreground-subtle'
           )}
         />
       )}
@@ -199,7 +199,7 @@ const sampleJsonLines = [
 function EditorToolbarButton({ icon, label }: { icon: React.ReactNode; label: string }) {
   return (
     <button
-      className="flex h-8 w-8 items-center justify-center rounded-lg text-future-foreground-muted transition-colors hover:text-future-foreground"
+      className="flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:text-foreground"
       aria-label={label}
     >
       {icon}
@@ -211,14 +211,14 @@ function JsonEditorDrawer({ open, onClose }: { open: boolean; onClose: () => voi
   if (!open) return null;
 
   return (
-    <div className="flex h-full w-full flex-col rounded-2xl border border-future-border bg-future-surface-raised">
+    <div className="flex h-full w-full flex-col rounded-2xl border border-border bg-surface-raised">
       {/* ── Header ──────────────────────────────────────────── */}
       <div className="flex items-center justify-between px-6 py-4">
-        <span className="text-base font-semibold leading-5 tracking-[-0.4px] text-future-foreground">
+        <span className="text-base font-semibold leading-5 tracking-[-0.4px] text-foreground">
           JSON editor
         </span>
         <button
-          className="flex h-10 w-10 items-center justify-center rounded-xl bg-future-surface-overlay text-future-foreground-muted transition-colors hover:text-future-foreground"
+          className="flex h-10 w-10 items-center justify-center rounded-xl bg-surface-overlay text-foreground-muted transition-colors hover:text-foreground"
           onClick={onClose}
           aria-label="Close editor"
         >
@@ -236,15 +236,15 @@ function JsonEditorDrawer({ open, onClose }: { open: boolean; onClose: () => voi
 
       {/* ── Code editor area ────────────────────────────────── */}
       <div className="flex flex-1 flex-col overflow-hidden px-6 pb-4">
-        <div className="flex flex-1 flex-col overflow-hidden rounded-xl border border-future-border-subtle bg-future-surface shadow-sm">
+        <div className="flex flex-1 flex-col overflow-hidden rounded-xl border border-border-subtle bg-surface shadow-sm">
           {/* File header */}
           <div className="flex items-center justify-between px-3 py-2.5">
-            <div className="flex items-center gap-2 text-future-foreground-muted">
+            <div className="flex items-center gap-2 text-foreground-muted">
               <FileJson className="h-4 w-4" />
               <span className="text-sm font-medium leading-none">script.js</span>
             </div>
             <button
-              className="flex h-5 w-5 items-center justify-center text-future-foreground-muted transition-colors hover:text-future-foreground"
+              className="flex h-5 w-5 items-center justify-center text-foreground-muted transition-colors hover:text-foreground"
               aria-label="Refresh"
             >
               <RefreshCw className="h-4 w-4" />
@@ -257,13 +257,13 @@ function JsonEditorDrawer({ open, onClose }: { open: boolean; onClose: () => voi
             style={{ fontFamily: fontFamily.monospace }}
           >
             {/* Line numbers */}
-            <div className="flex flex-col text-right text-future-foreground-subtle select-none">
+            <div className="flex flex-col text-right text-foreground-subtle select-none">
               {sampleJsonLines.map((_, i) => (
                 <span key={i}>{i + 1}</span>
               ))}
             </div>
             {/* Code */}
-            <div className="flex flex-col whitespace-pre text-future-foreground-muted">
+            <div className="flex flex-col whitespace-pre text-foreground-muted">
               {sampleJsonLines.map((line, i) => (
                 <span key={i}>{line}</span>
               ))}
@@ -275,13 +275,13 @@ function JsonEditorDrawer({ open, onClose }: { open: boolean; onClose: () => voi
       {/* ── Footer ──────────────────────────────────────────── */}
       <div className="flex items-center justify-end gap-2 px-6 py-4">
         <button
-          className="flex h-10 items-center gap-2 rounded-xl border border-future-border px-4 py-2 text-sm font-medium leading-5 text-future-foreground-subtle transition-colors hover:text-future-foreground"
+          className="flex h-10 items-center gap-2 rounded-xl border border-border px-4 py-2 text-sm font-medium leading-5 text-foreground-subtle transition-colors hover:text-foreground"
           onClick={onClose}
         >
           <span>Cancel</span>
         </button>
         <button
-          className="flex h-10 items-center gap-2 rounded-xl bg-future-accent px-4 py-2 text-sm font-semibold leading-5 text-future-foreground-inverse transition-colors hover:bg-future-accent/90"
+          className="flex h-10 items-center gap-2 rounded-xl bg-brand px-4 py-2 text-sm font-semibold leading-5 text-foreground-inverse transition-colors hover:bg-brand/90"
           onClick={onClose}
         >
           <span>Save</span>
@@ -332,22 +332,22 @@ export function PropertiesSimple({
       {/* ── Properties panel ──────────────────────────────────── */}
       <div
         className={cn(
-          'flex h-full w-full flex-col overflow-hidden rounded-2xl border border-future-border bg-future-surface-raised',
+          'flex h-full w-full flex-col overflow-hidden rounded-2xl border border-border bg-surface-raised',
           className
         )}
       >
         {/* ── Header ────────────────────────────────────────────── */}
-        <div className="flex items-center justify-between border-b border-future-border px-4 py-4">
+        <div className="flex items-center justify-between border-b border-border px-4 py-4">
           <div className="flex items-center gap-4">
-            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-future-accent-subtle">
-              {icon ?? <Webhook className="h-6 w-6 text-future-accent-foreground" />}
+            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-brand-subtle">
+              {icon ?? <Webhook className="h-6 w-6 text-brand-foreground" />}
             </div>
-            <span className="text-base font-semibold leading-5 tracking-[-0.4px] text-future-foreground">
+            <span className="text-base font-semibold leading-5 tracking-[-0.4px] text-foreground">
               {title}
             </span>
           </div>
           <button
-            className="flex h-10 w-10 items-center justify-center rounded-xl bg-future-surface-overlay text-future-foreground-muted transition-colors hover:text-future-foreground"
+            className="flex h-10 w-10 items-center justify-center rounded-xl bg-surface-overlay text-foreground-muted transition-colors hover:text-foreground"
             onClick={onClose}
             aria-label="Close properties"
           >
@@ -373,10 +373,10 @@ export function PropertiesSimple({
                 <AccordionItem
                   key={section.label}
                   value={section.label}
-                  className="border-b border-future-border-subtle"
+                  className="border-b border-border-subtle"
                 >
-                  <AccordionTrigger className="py-4 hover:no-underline [&>svg]:text-future-foreground-muted">
-                    <span className="text-xs font-medium uppercase leading-6 tracking-wide text-future-foreground-muted">
+                  <AccordionTrigger className="py-4 hover:no-underline [&>svg]:text-foreground-muted">
+                    <span className="text-xs font-medium uppercase leading-6 tracking-wide text-foreground-muted">
                       {section.label}
                     </span>
                   </AccordionTrigger>
diff --git a/packages/apollo-wind/src/components/custom/flow-properties.stories.tsx b/packages/apollo-wind/src/components/custom/flow-properties.stories.tsx
index 7d3e500b3..78b2d80e0 100644
--- a/packages/apollo-wind/src/components/custom/flow-properties.stories.tsx
+++ b/packages/apollo-wind/src/components/custom/flow-properties.stories.tsx
@@ -17,7 +17,7 @@ export const Default: Story = {
   render: function DefaultStory() {
     const [expanded, setExpanded] = useState(false);
     return (
-      <div className="future-dark flex h-[700px] bg-future-surface p-4">
+      <div className="future-dark flex h-[700px] bg-surface p-4">
         <div className="relative flex flex-1 flex-col">
           {/* Collapsed bar: top-right when not expanded */}
           {!expanded && (
@@ -30,7 +30,7 @@ export const Default: Story = {
               />
             </div>
           )}
-          <div className="flex flex-1 items-center justify-center text-sm text-future-foreground-muted">
+          <div className="flex flex-1 items-center justify-center text-sm text-foreground-muted">
             Canvas area
           </div>
         </div>
@@ -53,7 +53,7 @@ export const Default: Story = {
 /** Collapsed state only — bar on the canvas (no expand handler). */
 export const Collapsed: Story = {
   render: () => (
-    <div className="future-dark bg-future-surface p-4">
+    <div className="future-dark bg-surface p-4">
       <FlowProperties
         expanded={false}
         flowName="Invoice processing"
@@ -66,8 +66,8 @@ export const Collapsed: Story = {
 /** Expanded state only — full panel (no close handler). */
 export const Expanded: Story = {
   render: () => (
-    <div className="future-dark flex h-[700px] bg-future-surface p-4">
-      <div className="flex flex-1 items-center justify-center text-sm text-future-foreground-muted">
+    <div className="future-dark flex h-[700px] bg-surface p-4">
+      <div className="flex flex-1 items-center justify-center text-sm text-foreground-muted">
         Canvas area
       </div>
       <FlowProperties
diff --git a/packages/apollo-wind/src/components/custom/global-header.stories.tsx b/packages/apollo-wind/src/components/custom/global-header.stories.tsx
index 7eef86d2a..139bbc879 100644
--- a/packages/apollo-wind/src/components/custom/global-header.stories.tsx
+++ b/packages/apollo-wind/src/components/custom/global-header.stories.tsx
@@ -22,17 +22,17 @@ function SampleMenuNav() {
         {['Home', 'Projects', 'Tasks', 'Settings', 'Reports'].map((label, i) => (
           <button
             key={i}
-            className="flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground first:bg-future-surface-hover first:text-future-foreground"
+            className="flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground first:bg-surface-hover first:text-foreground"
           >
             <SquareMenu className="h-4 w-4 shrink-0" />
             <span className="truncate">{label}</span>
           </button>
         ))}
       </div>
-      <div className="my-2 border-t border-future-border-subtle" />
+      <div className="my-2 border-t border-border-subtle" />
       <div className="flex flex-col gap-1">
         <button
-          className="flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground"
+          className="flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground"
           onClick={() => setMoreOpen((prev) => !prev)}
         >
           <ChevronDown
@@ -45,7 +45,7 @@ function SampleMenuNav() {
             {['Analytics', 'Integrations', 'API Keys', 'Audit Log', 'Help'].map((label, i) => (
               <button
                 key={i}
-                className="flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground"
+                className="flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground"
               >
                 <SquareMenu className="h-4 w-4 shrink-0" />
                 <span className="truncate">{label}</span>
@@ -60,7 +60,7 @@ function SampleMenuNav() {
 
 export const Dark: Story = {
   render: () => (
-    <div className="future-dark bg-future-surface">
+    <div className="future-dark bg-surface">
       <MaestroHeader
         theme="dark"
         title="Autopilot"
@@ -73,7 +73,7 @@ export const Dark: Story = {
 
 export const Light: Story = {
   render: () => (
-    <div className="future-light bg-future-surface">
+    <div className="future-light bg-surface">
       <MaestroHeader
         theme="light"
         title="Autopilot"
diff --git a/packages/apollo-wind/src/components/custom/global-header.tsx b/packages/apollo-wind/src/components/custom/global-header.tsx
index 2c4559088..a60391af4 100644
--- a/packages/apollo-wind/src/components/custom/global-header.tsx
+++ b/packages/apollo-wind/src/components/custom/global-header.tsx
@@ -81,8 +81,8 @@ function HeaderIconButton({
   return (
     <button
       className={cn(
-        'flex h-8 w-8 items-center justify-center rounded-lg text-future-foreground-muted transition-colors',
-        disabled ? 'cursor-default opacity-50' : 'hover:text-future-foreground'
+        'flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors',
+        disabled ? 'cursor-default opacity-50' : 'hover:text-foreground'
       )}
       onClick={disabled ? undefined : onClick}
       aria-label={label}
@@ -103,7 +103,7 @@ function NotificationsDropdown({ themeClass }: { themeClass: string }) {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <button
-          className="flex h-8 w-8 items-center justify-center rounded-lg text-future-foreground-muted transition-colors hover:text-future-foreground"
+          className="flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:text-foreground"
           aria-label="Notifications"
         >
           <Bell className="h-5 w-5" />
@@ -112,31 +112,31 @@ function NotificationsDropdown({ themeClass }: { themeClass: string }) {
       <DropdownMenuContent
         align="end"
         sideOffset={8}
-        className={cn(themeClass, 'w-72 border-future-border bg-future-surface-overlay')}
+        className={cn(themeClass, 'w-72 border-border bg-surface-overlay')}
       >
         <div className="px-3 py-2">
-          <p className="text-sm font-semibold text-future-foreground">Notifications</p>
+          <p className="text-sm font-semibold text-foreground">Notifications</p>
         </div>
-        <DropdownMenuSeparator className="bg-future-border-subtle" />
-        <DropdownMenuItem className="flex items-start gap-3 px-3 py-2.5 text-future-foreground-muted focus:bg-future-surface-hover focus:text-future-foreground">
-          <Info className="mt-0.5 h-4 w-4 shrink-0 text-future-accent-foreground" />
+        <DropdownMenuSeparator className="bg-border-subtle" />
+        <DropdownMenuItem className="flex items-start gap-3 px-3 py-2.5 text-foreground-muted focus:bg-surface-hover focus:text-foreground">
+          <Info className="mt-0.5 h-4 w-4 shrink-0 text-brand-foreground" />
           <div className="flex flex-col gap-0.5">
-            <span className="text-sm font-medium text-future-foreground">System update available</span>
-            <span className="text-xs text-future-foreground-muted">A new version is ready to install</span>
+            <span className="text-sm font-medium text-foreground">System update available</span>
+            <span className="text-xs text-foreground-muted">A new version is ready to install</span>
           </div>
         </DropdownMenuItem>
-        <DropdownMenuItem className="flex items-start gap-3 px-3 py-2.5 text-future-foreground-muted focus:bg-future-surface-hover focus:text-future-foreground">
+        <DropdownMenuItem className="flex items-start gap-3 px-3 py-2.5 text-foreground-muted focus:bg-surface-hover focus:text-foreground">
           <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-green-500" />
           <div className="flex flex-col gap-0.5">
-            <span className="text-sm font-medium text-future-foreground">Flow completed</span>
-            <span className="text-xs text-future-foreground-muted">Invoice processing finished successfully</span>
+            <span className="text-sm font-medium text-foreground">Flow completed</span>
+            <span className="text-xs text-foreground-muted">Invoice processing finished successfully</span>
           </div>
         </DropdownMenuItem>
-        <DropdownMenuItem className="flex items-start gap-3 px-3 py-2.5 text-future-foreground-muted focus:bg-future-surface-hover focus:text-future-foreground">
+        <DropdownMenuItem className="flex items-start gap-3 px-3 py-2.5 text-foreground-muted focus:bg-surface-hover focus:text-foreground">
           <AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-amber-500" />
           <div className="flex flex-col gap-0.5">
-            <span className="text-sm font-medium text-future-foreground">Action required</span>
-            <span className="text-xs text-future-foreground-muted">Review pending approval requests</span>
+            <span className="text-sm font-medium text-foreground">Action required</span>
+            <span className="text-xs text-foreground-muted">Review pending approval requests</span>
           </div>
         </DropdownMenuItem>
       </DropdownMenuContent>
@@ -153,7 +153,7 @@ function HelpDropdown({ themeClass }: { themeClass: string }) {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <button
-          className="flex h-8 w-8 items-center justify-center rounded-lg text-future-foreground-muted transition-colors hover:text-future-foreground"
+          className="flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:text-foreground"
           aria-label="Help"
         >
           <CircleHelp className="h-5 w-5" />
@@ -162,17 +162,17 @@ function HelpDropdown({ themeClass }: { themeClass: string }) {
       <DropdownMenuContent
         align="end"
         sideOffset={8}
-        className={cn(themeClass, 'w-56 border-future-border bg-future-surface-overlay')}
+        className={cn(themeClass, 'w-56 border-border bg-surface-overlay')}
       >
-        <DropdownMenuItem className="flex items-center gap-2 px-3 py-2 text-future-foreground-muted focus:bg-future-surface-hover focus:text-future-foreground">
+        <DropdownMenuItem className="flex items-center gap-2 px-3 py-2 text-foreground-muted focus:bg-surface-hover focus:text-foreground">
           <BookOpen className="h-4 w-4" />
           <span className="text-sm">Documentation</span>
         </DropdownMenuItem>
-        <DropdownMenuItem className="flex items-center gap-2 px-3 py-2 text-future-foreground-muted focus:bg-future-surface-hover focus:text-future-foreground">
+        <DropdownMenuItem className="flex items-center gap-2 px-3 py-2 text-foreground-muted focus:bg-surface-hover focus:text-foreground">
           <MessageCircleQuestion className="h-4 w-4" />
           <span className="text-sm">Support</span>
         </DropdownMenuItem>
-        <DropdownMenuItem className="flex items-center gap-2 px-3 py-2 text-future-foreground-muted focus:bg-future-surface-hover focus:text-future-foreground">
+        <DropdownMenuItem className="flex items-center gap-2 px-3 py-2 text-foreground-muted focus:bg-surface-hover focus:text-foreground">
           <ExternalLink className="h-4 w-4" />
           <span className="text-sm">Community forum</span>
         </DropdownMenuItem>
@@ -197,7 +197,7 @@ function TenantSelector({ tenantName, themeClass }: { tenantName: string; themeC
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <button className="flex items-center gap-1 rounded-lg px-2 py-1 text-sm text-future-foreground-muted transition-colors hover:text-future-foreground">
+        <button className="flex items-center gap-1 rounded-lg px-2 py-1 text-sm text-foreground-muted transition-colors hover:text-foreground">
           <span>
             Tenant: <span className="font-medium">{selected}</span>
           </span>
@@ -207,16 +207,16 @@ function TenantSelector({ tenantName, themeClass }: { tenantName: string; themeC
       <PopoverContent
         align="end"
         sideOffset={8}
-        className={cn(themeClass, 'w-56 border-future-border bg-future-surface-overlay p-1')}
+        className={cn(themeClass, 'w-56 border-border bg-surface-overlay p-1')}
       >
         {tenants.map((tenant) => (
           <button
             key={tenant.id}
             className={cn(
-              'flex w-full items-center rounded-md px-3 py-2 text-sm transition-colors hover:bg-future-surface-hover',
+              'flex w-full items-center rounded-md px-3 py-2 text-sm transition-colors hover:bg-surface-hover',
               selected === tenant.label
-                ? 'font-medium text-future-foreground'
-                : 'text-future-foreground-muted'
+                ? 'font-medium text-foreground'
+                : 'text-foreground-muted'
             )}
             onClick={() => setSelected(tenant.label)}
           >
@@ -237,8 +237,8 @@ function AvatarDropdown({ themeClass }: { themeClass: string }) {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <button className="rounded-full focus:outline-none" aria-label="User menu">
-          <Avatar className="h-6 w-6 bg-future-accent">
-            <AvatarFallback className="bg-future-accent text-[10px] font-bold text-future-foreground-on-accent">
+          <Avatar className="h-6 w-6 bg-brand">
+            <AvatarFallback className="bg-brand text-[10px] font-bold text-foreground-on-accent">
               UI
             </AvatarFallback>
           </Avatar>
@@ -247,18 +247,18 @@ function AvatarDropdown({ themeClass }: { themeClass: string }) {
       <DropdownMenuContent
         align="end"
         sideOffset={8}
-        className={cn(themeClass, 'w-48 border-future-border bg-future-surface-overlay')}
+        className={cn(themeClass, 'w-48 border-border bg-surface-overlay')}
       >
-        <DropdownMenuItem className="flex items-center gap-2 px-3 py-2 text-future-foreground-muted focus:bg-future-surface-hover focus:text-future-foreground">
+        <DropdownMenuItem className="flex items-center gap-2 px-3 py-2 text-foreground-muted focus:bg-surface-hover focus:text-foreground">
           <User className="h-4 w-4" />
           <span className="text-sm">Profile</span>
         </DropdownMenuItem>
-        <DropdownMenuItem className="flex items-center gap-2 px-3 py-2 text-future-foreground-muted focus:bg-future-surface-hover focus:text-future-foreground">
+        <DropdownMenuItem className="flex items-center gap-2 px-3 py-2 text-foreground-muted focus:bg-surface-hover focus:text-foreground">
           <Settings className="h-4 w-4" />
           <span className="text-sm">Settings</span>
         </DropdownMenuItem>
-        <DropdownMenuSeparator className="bg-future-border-subtle" />
-        <DropdownMenuItem className="flex items-center gap-2 px-3 py-2 text-future-foreground-muted focus:bg-future-surface-hover focus:text-future-foreground">
+        <DropdownMenuSeparator className="bg-border-subtle" />
+        <DropdownMenuItem className="flex items-center gap-2 px-3 py-2 text-foreground-muted focus:bg-surface-hover focus:text-foreground">
           <LogOut className="h-4 w-4" />
           <span className="text-sm">Log out</span>
         </DropdownMenuItem>
@@ -300,16 +300,16 @@ export function MaestroHeader({
   // Theme class applied to portal-rendered content (dropdowns/popovers)
   // so CSS variables resolve correctly outside the template's DOM tree
   const themeClass =
-    theme === 'legacy-dark'
-      ? 'legacy-dark'
-      : theme === 'legacy-light'
-        ? 'legacy-light'
+    theme === 'core-dark'
+      ? 'core-dark'
+      : theme === 'core-light'
+        ? 'core-light'
         : theme === 'wireframe'
-          ? 'future-wireframe'
+          ? 'wireframe'
           : theme === 'vertex'
-            ? 'future-vertex'
+            ? 'vertex'
             : theme === 'canvas'
-              ? 'future-canvas'
+              ? 'canvas'
               : theme === 'light'
                 ? 'future-light'
                 : 'future-dark';
@@ -321,20 +321,20 @@ export function MaestroHeader({
     <>
       <header
         className={cn(
-          'flex h-12 shrink-0 items-center justify-between border-b border-future-border-subtle bg-future-surface px-4',
+          'flex h-12 shrink-0 items-center justify-between border-b border-border-subtle bg-surface px-4',
           className
         )}
       >
         {/* Left: waffle + title */}
         <div className="flex items-center gap-3">
           <button
-            className="flex h-8 w-8 items-center justify-center rounded-lg text-future-foreground-muted transition-colors hover:text-future-foreground"
+            className="flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:text-foreground"
             onClick={() => menuContent && setMenuOpen((prev) => !prev)}
             aria-label="App launcher"
           >
             {menuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
           </button>
-          <span className="text-sm font-semibold text-future-foreground">
+          <span className="text-sm font-semibold text-foreground">
             {title}
           </span>
         </div>
@@ -368,7 +368,7 @@ export function MaestroHeader({
             <SheetPrimitive.Content
               className={cn(
                 themeClass,
-                'fixed left-0 top-12 bottom-0 z-50 w-[300px] border-r border-future-border-subtle bg-future-surface p-0 shadow-lg',
+                'fixed left-0 top-12 bottom-0 z-50 w-[300px] border-r border-border-subtle bg-surface p-0 shadow-lg',
                 'data-[state=open]:animate-in data-[state=closed]:animate-out',
                 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left',
                 'data-[state=closed]:duration-300 data-[state=open]:duration-300'
diff --git a/packages/apollo-wind/src/components/custom/grid-maestro.stories.tsx b/packages/apollo-wind/src/components/custom/grid-maestro.stories.tsx
index b036da713..e7484ac22 100644
--- a/packages/apollo-wind/src/components/custom/grid-maestro.stories.tsx
+++ b/packages/apollo-wind/src/components/custom/grid-maestro.stories.tsx
@@ -13,7 +13,7 @@ type Story = StoryObj<typeof meta>;
 
 function SampleCard({ label }: { label: string }) {
   return (
-    <div className="flex h-32 items-center justify-center rounded-xl border border-future-border-subtle bg-future-surface p-6 text-sm font-medium text-future-foreground-muted">
+    <div className="flex h-32 items-center justify-center rounded-xl border border-border-subtle bg-surface p-6 text-sm font-medium text-foreground-muted">
       {label}
     </div>
   );
diff --git a/packages/apollo-wind/src/components/custom/grid-maestro.tsx b/packages/apollo-wind/src/components/custom/grid-maestro.tsx
index 769632c00..ab2226fae 100644
--- a/packages/apollo-wind/src/components/custom/grid-maestro.tsx
+++ b/packages/apollo-wind/src/components/custom/grid-maestro.tsx
@@ -11,7 +11,7 @@ export function Canvas({
   return (
     <main
       className={cn(
-        'flex flex-1 flex-col overflow-y-auto bg-future-surface-raised p-6',
+        'flex flex-1 flex-col overflow-y-auto bg-surface-raised p-6',
         className
       )}
     >
diff --git a/packages/apollo-wind/src/components/custom/panel-delegate.stories.tsx b/packages/apollo-wind/src/components/custom/panel-delegate.stories.tsx
index 7933b622c..b79e530cf 100644
--- a/packages/apollo-wind/src/components/custom/panel-delegate.stories.tsx
+++ b/packages/apollo-wind/src/components/custom/panel-delegate.stories.tsx
@@ -48,14 +48,14 @@ const sampleNavItems = [
 
 export const Default: Story = {
   render: () => (
-    <div className="future-dark flex h-[600px] bg-future-surface">
+    <div className="future-dark flex h-[600px] bg-surface">
       <DelegatePanel
         defaultOpen
         navItems={sampleNavItems}
         activeNavId="chat"
         selectedChildId="chat-1"
       />
-      <div className="flex flex-1 items-center justify-center text-sm text-future-foreground-muted">
+      <div className="flex flex-1 items-center justify-center text-sm text-foreground-muted">
         Content area
       </div>
     </div>
@@ -64,9 +64,9 @@ export const Default: Story = {
 
 export const Collapsed: Story = {
   render: () => (
-    <div className="future-dark flex h-[600px] bg-future-surface">
+    <div className="future-dark flex h-[600px] bg-surface">
       <DelegatePanel defaultOpen={false} navItems={sampleNavItems} activeNavId="chat" />
-      <div className="flex flex-1 items-center justify-center text-sm text-future-foreground-muted">
+      <div className="flex flex-1 items-center justify-center text-sm text-foreground-muted">
         Content area
       </div>
     </div>
diff --git a/packages/apollo-wind/src/components/custom/panel-delegate.tsx b/packages/apollo-wind/src/components/custom/panel-delegate.tsx
index c7f6575b4..342a73c83 100644
--- a/packages/apollo-wind/src/components/custom/panel-delegate.tsx
+++ b/packages/apollo-wind/src/components/custom/panel-delegate.tsx
@@ -53,11 +53,11 @@ function UiPathLogo({ className }: { className?: string }) {
   return (
     <div
       className={cn(
-        'flex h-9 w-9 items-center justify-center rounded-lg bg-future-accent shadow-sm',
+        'flex h-9 w-9 items-center justify-center rounded-lg bg-brand shadow-sm',
         className
       )}
     >
-      <span className="text-xs font-bold text-future-foreground-on-accent select-none">Ui</span>
+      <span className="text-xs font-bold text-foreground-on-accent select-none">Ui</span>
     </div>
   );
 }
@@ -81,7 +81,7 @@ function ExpandedNavItem({
   if (!isExpandable) {
     return (
       <button
-        className="flex h-10 w-full items-center gap-2 rounded-2xl px-1 text-future-foreground-muted transition-colors hover:bg-future-surface-hover"
+        className="flex h-10 w-full items-center gap-2 rounded-2xl px-1 text-foreground-muted transition-colors hover:bg-surface-hover"
         onClick={onToggle}
       >
         <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg">
@@ -95,7 +95,7 @@ function ExpandedNavItem({
   return (
     <Collapsible open={isOpen} onOpenChange={() => onToggle()}>
       <CollapsibleTrigger asChild>
-        <button className="flex h-10 w-full items-center justify-between rounded-2xl px-1 text-future-foreground-muted transition-colors hover:bg-future-surface-hover">
+        <button className="flex h-10 w-full items-center justify-between rounded-2xl px-1 text-foreground-muted transition-colors hover:bg-surface-hover">
           <div className="flex items-center gap-2">
             <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg">
               {item.icon}
@@ -115,9 +115,9 @@ function ExpandedNavItem({
             <button
               key={child.id}
               className={cn(
-                'flex h-10 items-center rounded-2xl pl-12 pr-3 text-sm font-medium text-future-foreground-muted transition-colors hover:bg-future-surface-hover',
+                'flex h-10 items-center rounded-2xl pl-12 pr-3 text-sm font-medium text-foreground-muted transition-colors hover:bg-surface-hover',
                 selectedChildId === child.id &&
-                  'bg-future-surface-hover text-future-foreground-on-accent'
+                  'bg-surface-hover text-foreground-on-accent'
               )}
               onClick={() => onChildSelect?.(child.id)}
             >
@@ -145,15 +145,15 @@ function CollapsedNavItem({
       <TooltipTrigger asChild>
         <button
           className={cn(
-            'flex h-12 w-full items-center justify-center text-future-foreground-muted transition-colors hover:text-future-foreground',
-            isActive && 'text-future-accent-foreground'
+            'flex h-12 w-full items-center justify-center text-foreground-muted transition-colors hover:text-foreground',
+            isActive && 'text-brand-foreground'
           )}
           onClick={onClick}
         >
           <div
             className={cn(
               'flex h-9 w-9 items-center justify-center rounded-lg transition-colors',
-              isActive && 'bg-future-accent-subtle'
+              isActive && 'bg-brand-subtle'
             )}
           >
             {item.icon}
@@ -224,7 +224,7 @@ export function DelegatePanel({
     <TooltipProvider delayDuration={300}>
       <div
         className={cn(
-          'flex flex-col justify-between bg-future-surface-overlay shadow-[0px_4px_24px_0px_rgba(0,0,0,0.25)] transition-[width] duration-300 ease-in-out',
+          'flex flex-col justify-between bg-surface-overlay shadow-[0px_4px_24px_0px_rgba(0,0,0,0.25)] transition-[width] duration-300 ease-in-out',
           panelOpen ? 'w-80' : 'w-[60px]',
           className
         )}
@@ -249,14 +249,14 @@ export function DelegatePanel({
                 <div className="flex items-center gap-[18px]">
                   <button
                     type="button"
-                    className="text-future-foreground-muted transition-colors hover:text-future-foreground"
+                    className="text-foreground-muted transition-colors hover:text-foreground"
                     aria-label="New conversation"
                   >
                     <MessageCirclePlus className="h-5 w-5" />
                   </button>
                   <button
                     type="button"
-                    className="text-future-foreground-muted transition-colors hover:text-future-foreground"
+                    className="text-foreground-muted transition-colors hover:text-foreground"
                     aria-label="Picture in picture"
                   >
                     <PictureInPicture2 className="h-5 w-5" />
@@ -264,7 +264,7 @@ export function DelegatePanel({
                 </div>
                 <button
                   type="button"
-                  className="text-future-foreground-muted transition-colors hover:text-future-foreground"
+                  className="text-foreground-muted transition-colors hover:text-foreground"
                   onClick={() => setPanelOpen(false)}
                   aria-label="Collapse panel"
                 >
@@ -302,7 +302,7 @@ export function DelegatePanel({
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <button
-                      className="flex h-12 w-full items-center justify-center text-future-foreground-muted transition-colors hover:text-future-foreground"
+                      className="flex h-12 w-full items-center justify-center text-foreground-muted transition-colors hover:text-foreground"
                       onClick={() => setPanelOpen(true)}
                     >
                       <div className="flex h-9 w-9 items-center justify-center rounded-lg">
@@ -331,8 +331,8 @@ export function DelegatePanel({
 
         {/* Footer */}
         <div className="flex h-[60px] shrink-0 items-center justify-start px-3">
-          <Avatar className="h-8 w-8 bg-future-surface-raised">
-            <AvatarFallback className="bg-future-surface-raised text-xs text-future-foreground-muted">
+          <Avatar className="h-8 w-8 bg-surface-raised">
+            <AvatarFallback className="bg-surface-raised text-xs text-foreground-muted">
               U
             </AvatarFallback>
           </Avatar>
diff --git a/packages/apollo-wind/src/components/custom/panel-flow.stories.tsx b/packages/apollo-wind/src/components/custom/panel-flow.stories.tsx
index 4cc29aa4b..cb274cafb 100644
--- a/packages/apollo-wind/src/components/custom/panel-flow.stories.tsx
+++ b/packages/apollo-wind/src/components/custom/panel-flow.stories.tsx
@@ -20,14 +20,14 @@ const sampleMessages = [
 
 export const Default: Story = {
   render: () => (
-    <div className="future-dark flex h-[600px] bg-future-surface">
+    <div className="future-dark flex h-[600px] bg-surface">
       <FlowPanel
         open
         navItems={defaultFlowNavItems}
         activeNavId="chat"
         chatMessages={sampleMessages}
       />
-      <div className="flex flex-1 items-center justify-center text-sm text-future-foreground-muted">
+      <div className="flex flex-1 items-center justify-center text-sm text-foreground-muted">
         Canvas area
       </div>
     </div>
@@ -36,13 +36,13 @@ export const Default: Story = {
 
 export const Collapsed: Story = {
   render: () => (
-    <div className="future-dark flex h-[600px] bg-future-surface">
+    <div className="future-dark flex h-[600px] bg-surface">
       <FlowPanel
         open={false}
         navItems={defaultFlowNavItems}
         activeNavId="chat"
       />
-      <div className="flex flex-1 items-center justify-center text-sm text-future-foreground-muted">
+      <div className="flex flex-1 items-center justify-center text-sm text-foreground-muted">
         Canvas area
       </div>
     </div>
diff --git a/packages/apollo-wind/src/components/custom/panel-flow.tsx b/packages/apollo-wind/src/components/custom/panel-flow.tsx
index c484f76fb..8694dda3d 100644
--- a/packages/apollo-wind/src/components/custom/panel-flow.tsx
+++ b/packages/apollo-wind/src/components/custom/panel-flow.tsx
@@ -44,8 +44,8 @@ export interface FlowPanelProps {
 
 function UiPathLogo() {
   return (
-    <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-future-accent shadow-sm">
-      <span className="text-xs font-bold text-future-foreground-on-accent select-none">Ui</span>
+    <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-brand shadow-sm">
+      <span className="text-xs font-bold text-foreground-on-accent select-none">Ui</span>
     </div>
   );
 }
@@ -68,7 +68,7 @@ function IconRail({
   return (
     <div
       className={cn(
-        'flex w-[60px] shrink-0 flex-col justify-between bg-future-surface-overlay',
+        'flex w-[60px] shrink-0 flex-col justify-between bg-surface-overlay',
         hasShadow && 'shadow-[0px_4px_16px_0px_rgba(0,0,0,0.25)]'
       )}
     >
@@ -83,15 +83,15 @@ function IconRail({
               <TooltipTrigger asChild>
                 <button
                   className={cn(
-                    'flex h-12 w-full items-center justify-center text-future-foreground-muted transition-colors hover:text-future-foreground',
-                    activeId === item.id && 'text-future-accent-foreground'
+                    'flex h-12 w-full items-center justify-center text-foreground-muted transition-colors hover:text-foreground',
+                    activeId === item.id && 'text-brand-foreground'
                   )}
                   onClick={() => onNavClick(item.id)}
                 >
                   <div
                     className={cn(
                       'flex h-9 w-9 items-center justify-center rounded-lg transition-colors',
-                      activeId === item.id && 'bg-future-surface-hover'
+                      activeId === item.id && 'bg-surface-hover'
                     )}
                   >
                     {item.icon}
@@ -106,8 +106,8 @@ function IconRail({
 
       {/* Footer: avatar */}
       <div className="flex h-[60px] shrink-0 items-center justify-center">
-        <Avatar className="h-8 w-8 bg-future-surface-raised">
-          <AvatarFallback className="bg-future-surface-raised text-xs text-future-foreground-muted">
+        <Avatar className="h-8 w-8 bg-surface-raised">
+          <AvatarFallback className="bg-surface-raised text-xs text-foreground-muted">
             U
           </AvatarFallback>
         </Avatar>
@@ -126,15 +126,15 @@ function DefaultChatContent({ chatMessages }: { chatMessages: FlowPanelChatMessa
       {chatMessages.map((msg) =>
         msg.role === 'user' ? (
           <div key={msg.id} className="flex flex-col items-end pr-6">
-            <div className="max-w-[360px] rounded-tl-2xl rounded-tr-2xl rounded-bl-2xl rounded-br-[4px] bg-future-surface-raised px-6 py-4">
-              <p className="text-base leading-6 tracking-[-0.4px] text-future-foreground">
+            <div className="max-w-[360px] rounded-tl-2xl rounded-tr-2xl rounded-bl-2xl rounded-br-[4px] bg-surface-raised px-6 py-4">
+              <p className="text-base leading-6 tracking-[-0.4px] text-foreground">
                 {msg.content}
               </p>
             </div>
           </div>
         ) : (
           <div key={msg.id} className="flex items-center gap-2">
-            <p className="text-base font-medium leading-5 text-future-foreground-muted">
+            <p className="text-base font-medium leading-5 text-foreground-muted">
               {msg.content}
             </p>
           </div>
@@ -151,11 +151,11 @@ function DefaultChatContent({ chatMessages }: { chatMessages: FlowPanelChatMessa
 function ChatInput() {
   return (
     <div className="flex flex-col gap-3">
-      <div className="flex h-12 items-center rounded-2xl border border-future-border bg-future-surface-raised px-4">
+      <div className="flex h-12 items-center rounded-2xl border border-border bg-surface-raised px-4">
         <input
           type="text"
           placeholder="Ask me to help build your Flow"
-          className="flex-1 bg-transparent text-sm text-future-foreground placeholder:text-future-foreground-subtle outline-none"
+          className="flex-1 bg-transparent text-sm text-foreground placeholder:text-foreground-subtle outline-none"
           readOnly
         />
       </div>
@@ -163,14 +163,14 @@ function ChatInput() {
         <div className="flex items-center gap-2">
           <button
             type="button"
-            className="flex h-8 w-8 items-center justify-center rounded-lg text-future-foreground-muted hover:text-future-foreground"
+            className="flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted hover:text-foreground"
             aria-label="Add attachment"
           >
             <Plus className="h-5 w-5" />
           </button>
           <button
             type="button"
-            className="flex h-8 w-8 items-center justify-center rounded-lg text-future-foreground-muted hover:text-future-foreground"
+            className="flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted hover:text-foreground"
             aria-label="Add workflow"
           >
             <Workflow className="h-5 w-5" />
@@ -178,7 +178,7 @@ function ChatInput() {
         </div>
         <button
           type="button"
-          className="flex h-8 w-8 items-center justify-center rounded-full bg-future-accent text-future-foreground-on-accent"
+          className="flex h-8 w-8 items-center justify-center rounded-full bg-brand text-foreground-on-accent"
           aria-label="Submit message"
         >
           <CornerDownLeft className="h-4 w-4" />
@@ -202,15 +202,15 @@ function ExpandedPanel({
   onClose: () => void;
 }) {
   return (
-    <div className="flex h-full w-[420px] shrink-0 flex-col justify-between overflow-hidden bg-future-surface-overlay px-4 pb-4 pt-3">
+    <div className="flex h-full w-[420px] shrink-0 flex-col justify-between overflow-hidden bg-surface-overlay px-4 pb-4 pt-3">
       {/* Header: Flow / Autopilot tabs + close */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-4 text-base tracking-[-0.6px] leading-9">
-          <span className="font-bold text-future-foreground">Flow</span>
-          <span className="font-medium text-future-foreground-subtle">Autopilot</span>
+          <span className="font-bold text-foreground">Flow</span>
+          <span className="font-medium text-foreground-subtle">Autopilot</span>
         </div>
         <button
-          className="text-future-foreground-muted transition-colors hover:text-future-foreground"
+          className="text-foreground-muted transition-colors hover:text-foreground"
           onClick={onClose}
           aria-label="Close panel"
         >
diff --git a/packages/apollo-wind/src/components/custom/panel-maestro.stories.tsx b/packages/apollo-wind/src/components/custom/panel-maestro.stories.tsx
index 38e18ce32..a4318ecb4 100644
--- a/packages/apollo-wind/src/components/custom/panel-maestro.stories.tsx
+++ b/packages/apollo-wind/src/components/custom/panel-maestro.stories.tsx
@@ -19,7 +19,7 @@ function SampleNav() {
       {['Dashboard', 'Projects', 'Tasks', 'Settings', 'Reports'].map((label, i) => (
         <button
           key={i}
-          className="flex h-9 items-center rounded-lg px-3 text-sm font-medium text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground first:bg-future-surface-hover first:text-future-foreground"
+          className="flex h-9 items-center rounded-lg px-3 text-sm font-medium text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground first:bg-surface-hover first:text-foreground"
         >
           <span className="truncate">{label}</span>
         </button>
@@ -31,18 +31,18 @@ function SampleNav() {
 function PanelDemo({ side }: { side: 'left' | 'right' }) {
   const [collapsed, setCollapsed] = React.useState(false);
   return (
-    <div className="future-dark flex h-[500px] bg-future-surface-raised">
+    <div className="future-dark flex h-[500px] bg-surface-raised">
       {side === 'left' && (
         <Panel side="left" isCollapsed={collapsed} onToggle={() => setCollapsed(!collapsed)}>
           <SampleNav />
         </Panel>
       )}
-      <div className="flex flex-1 items-center justify-center text-sm text-future-foreground-muted">
+      <div className="flex flex-1 items-center justify-center text-sm text-foreground-muted">
         Content area
       </div>
       {side === 'right' && (
         <Panel side="right" isCollapsed={collapsed} onToggle={() => setCollapsed(!collapsed)}>
-          <div className="p-4 text-sm text-future-foreground-muted">Right panel content</div>
+          <div className="p-4 text-sm text-foreground-muted">Right panel content</div>
         </Panel>
       )}
     </div>
diff --git a/packages/apollo-wind/src/components/custom/panel-maestro.tsx b/packages/apollo-wind/src/components/custom/panel-maestro.tsx
index ee327d2e4..7bf47a38b 100644
--- a/packages/apollo-wind/src/components/custom/panel-maestro.tsx
+++ b/packages/apollo-wind/src/components/custom/panel-maestro.tsx
@@ -52,17 +52,17 @@ export function Panel({
   return (
     <div
       className={cn(
-        'relative flex h-full shrink-0 flex-col bg-future-surface transition-all duration-300',
+        'relative flex h-full shrink-0 flex-col bg-surface transition-all duration-300',
         isLeft
-          ? 'border-r border-future-border-subtle'
-          : 'border-l border-future-border-subtle',
+          ? 'border-r border-border-subtle'
+          : 'border-l border-border-subtle',
         isExpanded ? 'w-[300px]' : 'w-8',
         className
       )}
     >
       {/* Expand/collapse toggle button */}
       <button
-        className="absolute z-10 flex h-7 w-7 items-center justify-center rounded-full border border-future-border bg-future-surface text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground"
+        className="absolute z-10 flex h-7 w-7 items-center justify-center rounded-full border border-border bg-surface text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground"
         style={{
           top: 28,
           ...(isLeft
diff --git a/packages/apollo-wind/src/components/custom/toolbar-canvas.stories.tsx b/packages/apollo-wind/src/components/custom/toolbar-canvas.stories.tsx
index a2945a744..fad39bf53 100644
--- a/packages/apollo-wind/src/components/custom/toolbar-canvas.stories.tsx
+++ b/packages/apollo-wind/src/components/custom/toolbar-canvas.stories.tsx
@@ -14,7 +14,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   render: () => (
-    <div className="future-dark bg-future-surface p-8">
+    <div className="future-dark bg-surface p-8">
       <FlowCanvasToolbar activeMode="build" />
     </div>
   ),
diff --git a/packages/apollo-wind/src/components/custom/toolbar-canvas.tsx b/packages/apollo-wind/src/components/custom/toolbar-canvas.tsx
index c6f0ea883..f0521de68 100644
--- a/packages/apollo-wind/src/components/custom/toolbar-canvas.tsx
+++ b/packages/apollo-wind/src/components/custom/toolbar-canvas.tsx
@@ -27,7 +27,7 @@ export interface CanvasToolbarProps {
 // ============================================================================
 
 function ToolbarSeparator() {
-  return <div className="h-8 w-px bg-future-border-subtle" />;
+  return <div className="h-8 w-px bg-border-subtle" />;
 }
 
 // ============================================================================
@@ -45,7 +45,7 @@ function ToolbarButton({
 }) {
   return (
     <button
-      className="flex h-8 w-8 items-center justify-center rounded-lg text-future-foreground-muted transition-colors hover:text-future-foreground"
+      className="flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:text-foreground"
       onClick={onClick}
       aria-label={label}
     >
@@ -73,19 +73,19 @@ export function FlowCanvasToolbar({
   return (
     <div
       className={cn(
-        'flex h-[60px] items-center gap-2 rounded-3xl border border-future-border bg-future-surface-raised px-2.5',
+        'flex h-[60px] items-center gap-2 rounded-3xl border border-border bg-surface-raised px-2.5',
         className
       )}
     >
       {/* Build / Evaluate toggle */}
-      <div className="flex h-10 items-center rounded-xl border border-future-border-deep bg-future-surface-overlay p-1">
+      <div className="flex h-10 items-center rounded-xl border border-border-deep bg-surface-overlay p-1">
         {/* Build */}
         <button
           className={cn(
             'flex h-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5 transition-colors',
             activeMode === 'build'
-              ? 'border border-future-border bg-future-surface text-future-foreground'
-              : 'text-future-foreground-subtle hover:text-future-foreground-hover'
+              ? 'border border-border bg-surface text-foreground'
+              : 'text-foreground-subtle hover:text-foreground-hover'
           )}
           onClick={() => onModeChange?.('build')}
         >
@@ -97,8 +97,8 @@ export function FlowCanvasToolbar({
           className={cn(
             'flex h-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5 transition-colors',
             activeMode === 'evaluate'
-              ? 'border border-future-border bg-future-surface text-future-foreground'
-              : 'text-future-foreground-subtle hover:text-future-foreground-hover'
+              ? 'border border-border bg-surface text-foreground'
+              : 'text-foreground-subtle hover:text-foreground-hover'
           )}
           onClick={() => onModeChange?.('evaluate')}
         >
diff --git a/packages/apollo-wind/src/components/custom/toolbar-view.stories.tsx b/packages/apollo-wind/src/components/custom/toolbar-view.stories.tsx
index f92ef8313..5ed892005 100644
--- a/packages/apollo-wind/src/components/custom/toolbar-view.stories.tsx
+++ b/packages/apollo-wind/src/components/custom/toolbar-view.stories.tsx
@@ -14,7 +14,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   render: () => (
-    <div className="future-dark bg-future-surface p-8">
+    <div className="future-dark bg-surface p-8">
       <FlowViewToolbar activeNodeSize="m" />
     </div>
   ),
diff --git a/packages/apollo-wind/src/components/custom/toolbar-view.tsx b/packages/apollo-wind/src/components/custom/toolbar-view.tsx
index 372626286..5cb60abd8 100644
--- a/packages/apollo-wind/src/components/custom/toolbar-view.tsx
+++ b/packages/apollo-wind/src/components/custom/toolbar-view.tsx
@@ -37,8 +37,8 @@ function ViewButton({
   return (
     <button
       className={cn(
-        'flex h-8 w-8 items-center justify-center rounded-lg text-future-foreground-muted transition-colors hover:text-future-foreground',
-        isActive && 'rounded-2xl border border-future-border bg-future-surface text-future-foreground'
+        'flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:text-foreground',
+        isActive && 'rounded-2xl border border-border bg-surface text-foreground'
       )}
       onClick={onClick}
       aria-label={label}
@@ -57,8 +57,8 @@ function NodeSizeIcon({ size, isActive }: { size: 's' | 'm' | 'l'; isActive?: bo
   return (
     <button
       className={cn(
-        'flex h-8 w-8 items-center justify-center rounded-2xl text-xs font-bold text-future-foreground-muted transition-colors hover:text-future-foreground',
-        isActive && 'border border-future-border bg-future-surface text-future-foreground'
+        'flex h-8 w-8 items-center justify-center rounded-2xl text-xs font-bold text-foreground-muted transition-colors hover:text-foreground',
+        isActive && 'border border-border bg-surface text-foreground'
       )}
       aria-label={`Node size ${label}`}
     >
@@ -85,7 +85,7 @@ export function FlowViewToolbar({
   return (
     <div className={cn('flex flex-col gap-4', className)}>
       {/* Zoom + view controls */}
-      <div className="flex w-10 flex-col items-center gap-1 rounded-xl bg-future-surface-raised p-1">
+      <div className="flex w-10 flex-col items-center gap-1 rounded-xl bg-surface-raised p-1">
         <ViewButton
           icon={<ZoomIn className="h-5 w-5" />}
           label="Zoom in"
@@ -96,7 +96,7 @@ export function FlowViewToolbar({
           label="Zoom out"
           onClick={() => onAction?.('zoom-out')}
         />
-        <div className="h-px w-6 bg-future-border-subtle" />
+        <div className="h-px w-6 bg-border-subtle" />
         <ViewButton
           icon={<Maximize2 className="h-5 w-5" />}
           label="Fit to screen"
@@ -110,7 +110,7 @@ export function FlowViewToolbar({
       </div>
 
       {/* Node size selector */}
-      <div className="flex w-10 flex-col items-center gap-2 rounded-[20px] border border-future-border-deep bg-future-surface-raised p-1">
+      <div className="flex w-10 flex-col items-center gap-2 rounded-[20px] border border-border-deep bg-surface-raised p-1">
         <NodeSizeIcon size="s" isActive={activeNodeSize === 's'} />
         <NodeSizeIcon size="m" isActive={activeNodeSize === 'm'} />
         <NodeSizeIcon size="l" isActive={activeNodeSize === 'l'} />
diff --git a/packages/apollo-wind/src/components/custom/viewport-guard.tsx b/packages/apollo-wind/src/components/custom/viewport-guard.tsx
index 20407e552..51eb7bfca 100644
--- a/packages/apollo-wind/src/components/custom/viewport-guard.tsx
+++ b/packages/apollo-wind/src/components/custom/viewport-guard.tsx
@@ -79,13 +79,13 @@ export function ViewportGuard({
 
   return (
     <div className={cn('fixed inset-0 z-50 flex items-center justify-center', className)}>
-      <div className="absolute inset-0 bg-future-surface backdrop-blur-xl" aria-hidden="true" />
+      <div className="absolute inset-0 bg-surface backdrop-blur-xl" aria-hidden="true" />
       <div
-        className="relative mx-4 max-w-sm rounded-2xl border border-future-border bg-future-surface-raised px-6 py-5 text-center shadow-xl"
+        className="relative mx-4 max-w-sm rounded-2xl border border-border bg-surface-raised px-6 py-5 text-center shadow-xl"
         role="status"
         aria-live="polite"
       >
-        <p className="text-sm font-medium leading-5 text-future-foreground">{message}</p>
+        <p className="text-sm font-medium leading-5 text-foreground">{message}</p>
       </div>
     </div>
   );
diff --git a/packages/apollo-wind/src/foundation/Future/colors.stories.tsx b/packages/apollo-wind/src/foundation/Future/colors.stories.tsx
index 2fdbd5520..5c9f9227f 100644
--- a/packages/apollo-wind/src/foundation/Future/colors.stories.tsx
+++ b/packages/apollo-wind/src/foundation/Future/colors.stories.tsx
@@ -49,61 +49,61 @@ const colorGroups: ColorGroup[] = [
   {
     group: 'Surface',
     tokens: [
-      { name: 'surface', twClass: 'bg-future-surface', usage: 'Page, canvas, containers', dark: '#09090b', darkTw: 'zinc-950', light: '#fafafa', lightTw: 'zinc-50' },
-      { name: 'surface-raised', twClass: 'bg-future-surface-raised', usage: 'Properties bar & panel (Flow); cards, overlays, panels', dark: '#18181b', darkTw: 'zinc-900', light: '#f4f4f5', lightTw: 'zinc-100' },
-      { name: 'surface-overlay', twClass: 'bg-future-surface-overlay', usage: 'Left panel (Flow, Delegate); panels, inputs, tabs, icon rail', dark: '#27272a', darkTw: 'zinc-800', light: '#e4e4e7', lightTw: 'zinc-200' },
-      { name: 'surface-hover', twClass: 'bg-future-surface-hover', usage: 'Nav hover, selected state', dark: '#3f3f46', darkTw: 'zinc-700', light: '#d4d4d8', lightTw: 'zinc-300' },
-      { name: 'surface-muted', twClass: 'bg-future-surface-muted', usage: 'Badges, indicators', dark: '#71717a', darkTw: 'zinc-500', light: '#a1a1aa', lightTw: 'zinc-400' },
-      { name: 'surface-inverse', twClass: 'bg-future-surface-inverse', usage: 'Buttons on opposite bg', dark: '#fafafa', darkTw: 'zinc-50', light: '#09090b', lightTw: 'zinc-950' },
+      { name: 'surface', twClass: 'bg-surface', usage: 'Page, canvas, containers', dark: '#09090b', darkTw: 'zinc-950', light: '#fafafa', lightTw: 'zinc-50' },
+      { name: 'surface-raised', twClass: 'bg-surface-raised', usage: 'Properties bar & panel (Flow); cards, overlays, panels', dark: '#18181b', darkTw: 'zinc-900', light: '#f4f4f5', lightTw: 'zinc-100' },
+      { name: 'surface-overlay', twClass: 'bg-surface-overlay', usage: 'Left panel (Flow, Delegate); panels, inputs, tabs, icon rail', dark: '#27272a', darkTw: 'zinc-800', light: '#e4e4e7', lightTw: 'zinc-200' },
+      { name: 'surface-hover', twClass: 'bg-surface-hover', usage: 'Nav hover, selected state', dark: '#3f3f46', darkTw: 'zinc-700', light: '#d4d4d8', lightTw: 'zinc-300' },
+      { name: 'surface-muted', twClass: 'bg-surface-muted', usage: 'Badges, indicators', dark: '#71717a', darkTw: 'zinc-500', light: '#a1a1aa', lightTw: 'zinc-400' },
+      { name: 'surface-inverse', twClass: 'bg-surface-inverse', usage: 'Buttons on opposite bg', dark: '#fafafa', darkTw: 'zinc-50', light: '#09090b', lightTw: 'zinc-950' },
     ],
   },
   {
-    group: 'Accent',
+    group: 'Brand',
     tokens: [
-      { name: 'accent', twClass: 'bg-future-accent', usage: 'Logo, primary buttons, active indicators', dark: '#0891b2', darkTw: 'cyan-600', light: '#0891b2', lightTw: 'cyan-600' },
-      { name: 'accent-subtle', twClass: 'bg-future-accent-subtle', usage: 'Selected state bg, active nav, status badges', dark: '#083344', darkTw: 'cyan-950', light: '#ecfeff', lightTw: 'cyan-50' },
+      { name: 'brand', twClass: 'bg-brand', usage: 'Logo, primary buttons, active indicators', dark: '#0891b2', darkTw: 'cyan-600', light: '#0891b2', lightTw: 'cyan-600' },
+      { name: 'brand-subtle', twClass: 'bg-brand-subtle', usage: 'Selected state bg, active nav, status badges', dark: '#083344', darkTw: 'cyan-950', light: '#ecfeff', lightTw: 'cyan-50' },
     ],
   },
   {
     group: 'Foreground',
     tokens: [
-      { name: 'foreground', twClass: 'text-future-foreground', usage: 'Primary headings', dark: '#fafafa', darkTw: 'zinc-50', light: '#09090b', lightTw: 'zinc-950' },
-      { name: 'foreground-secondary', twClass: 'text-future-foreground-secondary', usage: 'Body, messages', dark: '#f4f4f5', darkTw: 'zinc-100', light: '#18181b', lightTw: 'zinc-900' },
-      { name: 'foreground-hover', twClass: 'text-future-foreground-hover', usage: 'Hover states', dark: '#d4d4d8', darkTw: 'zinc-300', light: '#52525b', lightTw: 'zinc-600' },
-      { name: 'foreground-muted', twClass: 'text-future-foreground-muted', usage: 'Nav, secondary UI, code', dark: '#a1a1aa', darkTw: 'zinc-400', light: '#71717a', lightTw: 'zinc-500' },
-      { name: 'foreground-subtle', twClass: 'text-future-foreground-subtle', usage: 'Labels, placeholders', dark: '#71717a', darkTw: 'zinc-500', light: '#a1a1aa', lightTw: 'zinc-400' },
-      { name: 'foreground-inverse', twClass: 'text-future-foreground-inverse', usage: 'Icons on inverse bg', dark: '#09090b', darkTw: 'zinc-950', light: '#fafafa', lightTw: 'zinc-50' },
-      { name: 'foreground-on-accent', twClass: 'text-future-foreground-on-accent', usage: 'Text on accent bg', dark: '#fafafa', darkTw: 'zinc-50', light: '#fafafa', lightTw: 'zinc-50' },
-      { name: 'foreground-accent', twClass: 'text-future-foreground-accent', usage: 'Accent text, icons', dark: '#06b6d4', darkTw: 'cyan-500', light: '#0891b2', lightTw: 'cyan-600' },
-      { name: 'foreground-accent-muted', twClass: 'text-future-foreground-accent-muted', usage: 'Muted accent text', dark: '#22d3ee', darkTw: 'cyan-400', light: '#0891b2', lightTw: 'cyan-600' },
+      { name: 'foreground', twClass: 'text-foreground', usage: 'Primary headings', dark: '#fafafa', darkTw: 'zinc-50', light: '#09090b', lightTw: 'zinc-950' },
+      { name: 'foreground-secondary', twClass: 'text-foreground-secondary', usage: 'Body, messages', dark: '#f4f4f5', darkTw: 'zinc-100', light: '#18181b', lightTw: 'zinc-900' },
+      { name: 'foreground-hover', twClass: 'text-foreground-hover', usage: 'Hover states', dark: '#d4d4d8', darkTw: 'zinc-300', light: '#52525b', lightTw: 'zinc-600' },
+      { name: 'foreground-muted', twClass: 'text-foreground-muted', usage: 'Nav, secondary UI, code', dark: '#a1a1aa', darkTw: 'zinc-400', light: '#71717a', lightTw: 'zinc-500' },
+      { name: 'foreground-subtle', twClass: 'text-foreground-subtle', usage: 'Labels, placeholders', dark: '#71717a', darkTw: 'zinc-500', light: '#a1a1aa', lightTw: 'zinc-400' },
+      { name: 'foreground-inverse', twClass: 'text-foreground-inverse', usage: 'Icons on inverse bg', dark: '#09090b', darkTw: 'zinc-950', light: '#fafafa', lightTw: 'zinc-50' },
+      { name: 'foreground-on-accent', twClass: 'text-foreground-on-accent', usage: 'Text on accent bg', dark: '#fafafa', darkTw: 'zinc-50', light: '#fafafa', lightTw: 'zinc-50' },
+      { name: 'foreground-accent', twClass: 'text-foreground-accent', usage: 'Accent text, icons', dark: '#0891b2', darkTw: 'cyan-600', light: '#0891b2', lightTw: 'cyan-600' },
+      { name: 'foreground-accent-muted', twClass: 'text-foreground-accent-muted', usage: 'Muted accent text', dark: '#22d3ee', darkTw: 'cyan-400', light: '#0891b2', lightTw: 'cyan-600' },
     ],
   },
   {
     group: 'Border',
     tokens: [
-      { name: 'border', twClass: 'border-future-border', usage: 'Primary borders', dark: '#3f3f46', darkTw: 'zinc-700', light: '#d4d4d8', lightTw: 'zinc-300' },
-      { name: 'border-subtle', twClass: 'border-future-border-subtle', usage: 'Subtle dividers', dark: '#27272a', darkTw: 'zinc-800', light: '#e4e4e7', lightTw: 'zinc-200' },
-      { name: 'border-muted', twClass: 'border-future-border-muted', usage: 'Content borders', dark: '#18181b', darkTw: 'zinc-900', light: '#f4f4f5', lightTw: 'zinc-100' },
-      { name: 'border-deep', twClass: 'border-future-border-deep', usage: 'Nested containers', dark: '#09090b', darkTw: 'zinc-950', light: '#fafafa', lightTw: 'zinc-50' },
-      { name: 'border-inverse', twClass: 'border-future-border-inverse', usage: 'Borders on inverse bg', dark: '#e4e4e7', darkTw: 'zinc-200', light: '#3f3f46', lightTw: 'zinc-700' },
-      { name: 'border-hover', twClass: 'border-future-border-hover', usage: 'Border hover state', dark: '#52525b', darkTw: 'zinc-600', light: '#a1a1aa', lightTw: 'zinc-400' },
+      { name: 'border', twClass: 'border-border', usage: 'Primary borders', dark: '#3f3f46', darkTw: 'zinc-700', light: '#d4d4d8', lightTw: 'zinc-300' },
+      { name: 'border-subtle', twClass: 'border-border-subtle', usage: 'Subtle dividers', dark: '#27272a', darkTw: 'zinc-800', light: '#e4e4e7', lightTw: 'zinc-200' },
+      { name: 'border-muted', twClass: 'border-border-muted', usage: 'Content borders', dark: '#18181b', darkTw: 'zinc-900', light: '#f4f4f5', lightTw: 'zinc-100' },
+      { name: 'border-deep', twClass: 'border-border-deep', usage: 'Nested containers', dark: '#09090b', darkTw: 'zinc-950', light: '#fafafa', lightTw: 'zinc-50' },
+      { name: 'border-inverse', twClass: 'border-border-inverse', usage: 'Borders on inverse bg', dark: '#e4e4e7', darkTw: 'zinc-200', light: '#3f3f46', lightTw: 'zinc-700' },
+      { name: 'border-hover', twClass: 'border-border-hover', usage: 'Border hover state', dark: '#52525b', darkTw: 'zinc-600', light: '#a1a1aa', lightTw: 'zinc-400' },
     ],
   },
   {
     group: 'Ring',
     tokens: [
-      { name: 'ring', twClass: 'ring-future-ring', usage: 'Focus / selection ring', dark: '#52525b', darkTw: 'zinc-600', light: '#a1a1aa', lightTw: 'zinc-400' },
+      { name: 'ring', twClass: 'ring-ring', usage: 'Focus / selection ring', dark: '#52525b', darkTw: 'zinc-600', light: '#a1a1aa', lightTw: 'zinc-400' },
     ],
   },
 ];
 
 const gradientTokens: GradientToken[] = [
-  { name: 'gradient-1', twClass: 'bg-future-gradient-1', darkFrom: 'zinc-700', darkTo: 'zinc-800', lightFrom: 'zinc-200', lightTo: 'zinc-100' },
-  { name: 'gradient-2', twClass: 'bg-future-gradient-2', darkFrom: 'zinc-950', darkTo: 'zinc-900', lightFrom: 'zinc-50', lightTo: 'zinc-50' },
-  { name: 'gradient-3', twClass: 'bg-future-gradient-3', darkFrom: 'zinc-700', darkTo: 'zinc-900', lightFrom: 'zinc-200', lightTo: 'zinc-50' },
-  { name: 'gradient-4', twClass: 'bg-future-gradient-4', darkFrom: 'zinc-900', darkTo: 'zinc-800', lightFrom: 'zinc-50', lightTo: 'zinc-100' },
-  { name: 'gradient-5', twClass: 'bg-future-gradient-5', darkFrom: 'zinc-950', darkTo: 'zinc-900', lightFrom: 'zinc-50', lightTo: 'zinc-50' },
-  { name: 'gradient-6', twClass: 'bg-future-gradient-6', darkFrom: 'cyan-600', darkTo: 'cyan-950', lightFrom: 'cyan-400', lightTo: 'cyan-100' },
+  { name: 'gradient-1', twClass: 'bg-gradient-1', darkFrom: 'zinc-700', darkTo: 'zinc-800', lightFrom: 'zinc-200', lightTo: 'zinc-100' },
+  { name: 'gradient-2', twClass: 'bg-gradient-2', darkFrom: 'zinc-950', darkTo: 'zinc-900', lightFrom: 'zinc-50', lightTo: 'zinc-50' },
+  { name: 'gradient-3', twClass: 'bg-gradient-3', darkFrom: 'zinc-700', darkTo: 'zinc-900', lightFrom: 'zinc-200', lightTo: 'zinc-50' },
+  { name: 'gradient-4', twClass: 'bg-gradient-4', darkFrom: 'zinc-900', darkTo: 'zinc-800', lightFrom: 'zinc-50', lightTo: 'zinc-100' },
+  { name: 'gradient-5', twClass: 'bg-gradient-5', darkFrom: 'zinc-950', darkTo: 'zinc-900', lightFrom: 'zinc-50', lightTo: 'zinc-50' },
+  { name: 'gradient-6', twClass: 'bg-gradient-6', darkFrom: 'cyan-600', darkTo: 'cyan-950', lightFrom: 'cyan-400', lightTo: 'cyan-100' },
 ];
 
 // ============================================================================
@@ -112,49 +112,49 @@ const gradientTokens: GradientToken[] = [
 
 function ColorTokenTable({ groups }: { groups: ColorGroup[] }) {
   return (
-    <div className="overflow-hidden rounded-lg border border-future-border">
+    <div className="overflow-hidden rounded-lg border border-border">
       <table className="w-full text-sm" style={{ fontFamily: fontFamily.base }}>
         <thead>
-          <tr className="border-b border-future-border bg-future-surface-overlay">
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Token</th>
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Tailwind Class</th>
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Usage</th>
-            <th className="px-4 py-2.5 text-center font-medium text-future-foreground-muted">Dark</th>
-            <th className="px-4 py-2.5 text-center font-medium text-future-foreground-muted">Light</th>
+          <tr className="border-b border-border bg-surface-overlay">
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Token</th>
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Tailwind Class</th>
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Usage</th>
+            <th className="px-4 py-2.5 text-center font-medium text-foreground-muted">Dark</th>
+            <th className="px-4 py-2.5 text-center font-medium text-foreground-muted">Light</th>
           </tr>
         </thead>
         <tbody>
           {groups.map((group) => (
             <React.Fragment key={group.group}>
-              <tr className="border-b border-future-border bg-future-surface-raised/50">
+              <tr className="border-b border-border bg-surface-raised/50">
                 <td
                   colSpan={5}
-                  className="px-4 py-2 text-xs font-semibold uppercase tracking-wider text-future-foreground-muted"
+                  className="px-4 py-2 text-xs font-semibold uppercase tracking-wider text-foreground-muted"
                 >
                   {group.group}
                 </td>
               </tr>
               {group.tokens.map((token) => (
-                <tr key={token.name} className="border-b border-future-border-subtle last:border-b-0">
+                <tr key={token.name} className="border-b border-border-subtle last:border-b-0">
                   <td className="px-4 py-2">
-                    <code className="text-xs text-future-foreground-accent" style={{ fontFamily: fontFamily.monospace }}>
+                    <code className="text-xs text-foreground-accent" style={{ fontFamily: fontFamily.monospace }}>
                       {token.name}
                     </code>
                   </td>
                   <td className="px-4 py-2">
-                    <code className="text-xs text-future-foreground-subtle" style={{ fontFamily: fontFamily.monospace }}>
+                    <code className="text-xs text-foreground-subtle" style={{ fontFamily: fontFamily.monospace }}>
                       {token.twClass}
                     </code>
                   </td>
-                  <td className="px-4 py-2 text-future-foreground-muted">{token.usage}</td>
+                  <td className="px-4 py-2 text-foreground-muted">{token.usage}</td>
                   <td className="px-4 py-2">
                     <div className="flex items-center justify-center gap-2">
-                      <div className="h-5 w-5 shrink-0 rounded border border-future-border" style={{ backgroundColor: token.dark }} />
+                      <div className="h-5 w-5 shrink-0 rounded border border-border" style={{ backgroundColor: token.dark }} />
                       <div className="flex flex-col">
-                        <code className="text-xs text-future-foreground-muted" style={{ fontFamily: fontFamily.monospace }}>
+                        <code className="text-xs text-foreground-muted" style={{ fontFamily: fontFamily.monospace }}>
                           {token.dark}
                         </code>
-                        <code className="text-[10px] text-future-foreground-accent/70" style={{ fontFamily: fontFamily.monospace }}>
+                        <code className="text-[10px] text-foreground-accent/70" style={{ fontFamily: fontFamily.monospace }}>
                           {token.darkTw}
                         </code>
                       </div>
@@ -162,12 +162,12 @@ function ColorTokenTable({ groups }: { groups: ColorGroup[] }) {
                   </td>
                   <td className="px-4 py-2">
                     <div className="flex items-center justify-center gap-2">
-                      <div className="h-5 w-5 shrink-0 rounded border border-future-border" style={{ backgroundColor: token.light }} />
+                      <div className="h-5 w-5 shrink-0 rounded border border-border" style={{ backgroundColor: token.light }} />
                       <div className="flex flex-col">
-                        <code className="text-xs text-future-foreground-muted" style={{ fontFamily: fontFamily.monospace }}>
+                        <code className="text-xs text-foreground-muted" style={{ fontFamily: fontFamily.monospace }}>
                           {token.light}
                         </code>
-                        <code className="text-[10px] text-future-foreground-accent/70" style={{ fontFamily: fontFamily.monospace }}>
+                        <code className="text-[10px] text-foreground-accent/70" style={{ fontFamily: fontFamily.monospace }}>
                           {token.lightTw}
                         </code>
                       </div>
@@ -185,40 +185,40 @@ function ColorTokenTable({ groups }: { groups: ColorGroup[] }) {
 
 function GradientTable({ gradients }: { gradients: GradientToken[] }) {
   return (
-    <div className="overflow-hidden rounded-lg border border-future-border">
+    <div className="overflow-hidden rounded-lg border border-border">
       <table className="w-full text-sm" style={{ fontFamily: fontFamily.base }}>
         <thead>
-          <tr className="border-b border-future-border bg-future-surface-overlay">
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Token</th>
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Tailwind Class</th>
-            <th className="px-4 py-2.5 text-center font-medium text-future-foreground-muted">Preview</th>
-            <th className="px-4 py-2.5 text-center font-medium text-future-foreground-muted">Dark stops</th>
-            <th className="px-4 py-2.5 text-center font-medium text-future-foreground-muted">Light stops</th>
+          <tr className="border-b border-border bg-surface-overlay">
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Token</th>
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Tailwind Class</th>
+            <th className="px-4 py-2.5 text-center font-medium text-foreground-muted">Preview</th>
+            <th className="px-4 py-2.5 text-center font-medium text-foreground-muted">Dark stops</th>
+            <th className="px-4 py-2.5 text-center font-medium text-foreground-muted">Light stops</th>
           </tr>
         </thead>
         <tbody>
           {gradients.map((g) => (
-            <tr key={g.name} className="border-b border-future-border-subtle last:border-b-0">
+            <tr key={g.name} className="border-b border-border-subtle last:border-b-0">
               <td className="px-4 py-2">
-                <code className="text-xs text-future-foreground-accent" style={{ fontFamily: fontFamily.monospace }}>
+                <code className="text-xs text-foreground-accent" style={{ fontFamily: fontFamily.monospace }}>
                   {g.name}
                 </code>
               </td>
               <td className="px-4 py-2">
-                <code className="text-xs text-future-foreground-subtle" style={{ fontFamily: fontFamily.monospace }}>
+                <code className="text-xs text-foreground-subtle" style={{ fontFamily: fontFamily.monospace }}>
                   {g.twClass}
                 </code>
               </td>
               <td className="px-4 py-3">
-                <div className={cn('mx-auto h-6 w-28 rounded border border-future-border', g.twClass)} />
+                <div className={cn('mx-auto h-6 w-28 rounded border border-border', g.twClass)} />
               </td>
               <td className="px-4 py-2 text-center">
-                <code className="text-[10px] text-future-foreground-accent/70" style={{ fontFamily: fontFamily.monospace }}>
+                <code className="text-[10px] text-foreground-accent/70" style={{ fontFamily: fontFamily.monospace }}>
                   {g.darkFrom} → {g.darkTo}
                 </code>
               </td>
               <td className="px-4 py-2 text-center">
-                <code className="text-[10px] text-future-foreground-accent/70" style={{ fontFamily: fontFamily.monospace }}>
+                <code className="text-[10px] text-foreground-accent/70" style={{ fontFamily: fontFamily.monospace }}>
                   {g.lightFrom} → {g.lightTo}
                 </code>
               </td>
@@ -238,20 +238,20 @@ export const Default: Story = {
   render: (_, { globals }) => (
     <div
       className={cn(
-        ({ light: 'future-light', 'legacy-dark': 'legacy-dark', 'legacy-light': 'legacy-light', wireframe: 'future-wireframe', vertex: 'future-vertex', canvas: 'future-canvas' } as Record<string, string>)[globals.futureTheme] ?? 'future-dark',
-        'min-h-screen w-full bg-future-surface'
+        ({ light: 'future-light', 'core-dark': 'core-dark', 'core-light': 'core-light', wireframe: 'wireframe', vertex: 'vertex', canvas: 'canvas' } as Record<string, string>)[globals.futureTheme] ?? 'future-dark',
+        'min-h-screen w-full bg-surface'
       )}
       style={{ fontFamily: fontFamily.base }}
     >
       <div className="mx-auto max-w-6xl space-y-10 p-8">
         <div>
           <h1
-            className="mb-2 text-3xl font-bold tracking-tight text-future-foreground"
+            className="mb-2 text-3xl font-bold tracking-tight text-foreground"
             style={{ fontFamily: fontFamily.base }}
           >
             Color Tokens
           </h1>
-          <p className="text-sm text-future-foreground-muted">
+          <p className="text-sm text-foreground-muted">
             All semantic color tokens for the Future design language. Each token resolves to a different value
             in dark and light themes via CSS custom properties. Use the Tailwind class column for implementation.
           </p>
@@ -261,12 +261,12 @@ export const Default: Story = {
 
         <div>
           <h2
-            className="mb-4 text-xl font-bold tracking-tight text-future-foreground"
+            className="mb-4 text-xl font-bold tracking-tight text-foreground"
             style={{ fontFamily: fontFamily.base }}
           >
             Gradients
           </h2>
-          <p className="mb-4 text-sm text-future-foreground-muted">
+          <p className="mb-4 text-sm text-foreground-muted">
             Theme-aware background gradients defined as custom utilities. Preview reflects the active theme.
           </p>
           <GradientTable gradients={gradientTokens} />
diff --git a/packages/apollo-wind/src/foundation/Future/colors.ts b/packages/apollo-wind/src/foundation/Future/colors.ts
index 332140fd2..da3a4c5e3 100644
--- a/packages/apollo-wind/src/foundation/Future/colors.ts
+++ b/packages/apollo-wind/src/foundation/Future/colors.ts
@@ -5,10 +5,10 @@
  * Includes values actively used in both Delegate and Flow templates.
  *
  * Colors are now theme-aware via CSS custom properties defined in
- * `future-theme.css`. Apply `.future-dark` or `.future-light` to a
+ * `themes.css`. Apply `.future-dark` or `.future-light` to a
  * parent element to activate a theme.
  *
- * The semantic Tailwind classes (e.g. `bg-future-surface`) resolve to
+ * The semantic Tailwind classes (e.g. `bg-surface`) resolve to
  * different hex values depending on the active theme.
  */
 
@@ -21,20 +21,20 @@
  *
  * | Token           | Semantic class              | Dark value (zinc) | Light value (zinc) | Usage                                    |
  * |-----------------|-----------------------------|-------------------|--------------------|------------------------------------------|
- * | surface         | bg-future-surface           | 950  #09090b      | white  #ffffff     | Page, canvas, containers, viewport guard |
- * | surfaceRaised   | bg-future-surface-raised    | 900  #18181b      | 50   #fafafa       | Cards, overlay content, panels           |
- * | surfaceOverlay  | bg-future-surface-overlay   | 800  #27272a      | 100  #f4f4f5       | Panel, inputs, tabs, icon rail           |
- * | surfaceHover    | bg-future-surface-hover     | 700  #3f3f46      | 200  #e4e4e7       | Step card icon, nav hover, selected      |
- * | surfaceMuted    | bg-future-surface-muted     | 500  #71717a      | 400  #a1a1aa       | Badge, loop indicator                    |
- * | surfaceInverse  | bg-future-surface-inverse   | white #ffffff     | 950  #09090b       | Primary buttons (inverse)                |
+ * | surface         | bg-surface           | 950  #09090b      | white  #ffffff     | Page, canvas, containers, viewport guard |
+ * | surfaceRaised   | bg-surface-raised    | 900  #18181b      | 50   #fafafa       | Cards, overlay content, panels           |
+ * | surfaceOverlay  | bg-surface-overlay   | 800  #27272a      | 100  #f4f4f5       | Panel, inputs, tabs, icon rail           |
+ * | surfaceHover    | bg-surface-hover     | 700  #3f3f46      | 200  #e4e4e7       | Step card icon, nav hover, selected      |
+ * | surfaceMuted    | bg-surface-muted     | 500  #71717a      | 400  #a1a1aa       | Badge, loop indicator                    |
+ * | surfaceInverse  | bg-surface-inverse   | white #ffffff     | 950  #09090b       | Primary buttons (inverse)                |
  */
 export const surface = {
-  surface: 'bg-future-surface',
-  surfaceRaised: 'bg-future-surface-raised',
-  surfaceOverlay: 'bg-future-surface-overlay',
-  surfaceHover: 'bg-future-surface-hover',
-  surfaceMuted: 'bg-future-surface-muted',
-  surfaceInverse: 'bg-future-surface-inverse',
+  surface: 'bg-surface',
+  surfaceRaised: 'bg-surface-raised',
+  surfaceOverlay: 'bg-surface-overlay',
+  surfaceHover: 'bg-surface-hover',
+  surfaceMuted: 'bg-surface-muted',
+  surfaceInverse: 'bg-surface-inverse',
 } as const;
 
 // =============================================================================
@@ -42,16 +42,16 @@ export const surface = {
 // =============================================================================
 
 /**
- * Accent color tokens — semantic, theme-aware.
+ * Brand color tokens — semantic, theme-aware.
  *
  * | Token        | Semantic class              | Dark value (cyan) | Light value (cyan) | Usage                                    |
  * |--------------|-----------------------------|-------------------|--------------------|------------------------------------------|
- * | accent       | bg-future-accent            | 500  #06b6d4      | 500  #06b6d4       | Logo, submit button, run node            |
- * | accentSubtle | bg-future-accent-subtle     | 950  #083344      | 50   #ecfeff       | Status badge, active nav, node/flow icon |
+ * | brand        | bg-brand            | 600  #0891b2      | 600  #0891b2       | Logo, submit button, run node            |
+ * | brandSubtle  | bg-brand-subtle     | 950  #083344      | 50   #ecfeff       | Status badge, active nav, node/flow icon |
  */
-export const accent = {
-  accent: 'bg-future-accent',
-  accentSubtle: 'bg-future-accent-subtle',
+export const brand = {
+  brand: 'bg-brand',
+  brandSubtle: 'bg-brand-subtle',
 } as const;
 
 // =============================================================================
@@ -63,26 +63,26 @@ export const accent = {
  *
  * | Token                  | Semantic class                        | Dark value        | Light value       | Usage                     |
  * |------------------------|---------------------------------------|-------------------|-------------------|---------------------------|
- * | foreground             | text-future-foreground                | zinc-50  #fafafa  | zinc-950 #09090b  | Primary headings          |
- * | foregroundSecondary    | text-future-foreground-secondary      | zinc-100 #f4f4f5  | zinc-900 #18181b  | Body, messages            |
- * | foregroundHover        | text-future-foreground-hover          | zinc-300 #d4d4d8  | zinc-600 #52525b  | Hover states              |
- * | foregroundMuted        | text-future-foreground-muted          | zinc-400 #a1a1aa  | zinc-500 #71717a  | Nav, secondary UI, code   |
- * | foregroundSubtle       | text-future-foreground-subtle         | zinc-500 #71717a  | zinc-400 #a1a1aa  | Muted, labels             |
- * | foregroundInverse      | text-future-foreground-inverse        | zinc-950 #09090b  | white   #ffffff   | Icons on inverse bg       |
- * | foregroundOnAccent     | text-future-foreground-on-accent      | white   #ffffff   | white   #ffffff   | On primary buttons        |
- * | foregroundAccent       | text-future-foreground-accent         | cyan-500 #06b6d4  | cyan-600 #0891b2  | Flow/node icons           |
- * | foregroundAccentMuted  | text-future-foreground-accent-muted   | cyan-400 #22d3ee  | cyan-600 #0891b2  | Status text               |
+ * | foreground             | text-foreground                | zinc-50  #fafafa  | zinc-950 #09090b  | Primary headings          |
+ * | foregroundSecondary    | text-foreground-secondary      | zinc-100 #f4f4f5  | zinc-900 #18181b  | Body, messages            |
+ * | foregroundHover        | text-foreground-hover          | zinc-300 #d4d4d8  | zinc-600 #52525b  | Hover states              |
+ * | foregroundMuted        | text-foreground-muted          | zinc-400 #a1a1aa  | zinc-500 #71717a  | Nav, secondary UI, code   |
+ * | foregroundSubtle       | text-foreground-subtle         | zinc-500 #71717a  | zinc-400 #a1a1aa  | Muted, labels             |
+ * | foregroundInverse      | text-foreground-inverse        | zinc-950 #09090b  | zinc-50  #fafafa  | Icons on inverse bg       |
+ * | foregroundOnAccent     | text-foreground-on-accent      | zinc-50  #fafafa  | zinc-50  #fafafa  | On primary buttons        |
+ * | foregroundAccent       | text-foreground-accent         | cyan-600 #0891b2  | cyan-600 #0891b2  | Flow/node icons           |
+ * | foregroundAccentMuted  | text-foreground-accent-muted   | cyan-400 #22d3ee  | cyan-600 #0891b2  | Status text               |
  */
 export const foreground = {
-  foreground: 'text-future-foreground',
-  foregroundSecondary: 'text-future-foreground-secondary',
-  foregroundHover: 'text-future-foreground-hover',
-  foregroundMuted: 'text-future-foreground-muted',
-  foregroundSubtle: 'text-future-foreground-subtle',
-  foregroundInverse: 'text-future-foreground-inverse',
-  foregroundOnAccent: 'text-future-foreground-on-accent',
-  foregroundAccent: 'text-future-foreground-accent',
-  foregroundAccentMuted: 'text-future-foreground-accent-muted',
+  foreground: 'text-foreground',
+  foregroundSecondary: 'text-foreground-secondary',
+  foregroundHover: 'text-foreground-hover',
+  foregroundMuted: 'text-foreground-muted',
+  foregroundSubtle: 'text-foreground-subtle',
+  foregroundInverse: 'text-foreground-inverse',
+  foregroundOnAccent: 'text-foreground-on-accent',
+  foregroundAccent: 'text-foreground-accent',
+  foregroundAccentMuted: 'text-foreground-accent-muted',
 } as const;
 
 // =============================================================================
@@ -94,20 +94,20 @@ export const foreground = {
  *
  * | Token         | Semantic class               | Dark value        | Light value        | Usage              |
  * |---------------|------------------------------|-------------------|--------------------|---------------------|
- * | border        | border-future-border         | zinc-700 #3f3f46  | zinc-300 #d4d4d8   | Primary borders     |
- * | borderSubtle  | border-future-border-subtle  | zinc-800 #27272a  | zinc-200 #e4e4e7   | Subtle dividers     |
- * | borderMuted   | border-future-border-muted   | zinc-900 #18181b  | zinc-100 #f4f4f5   | Content borders     |
- * | borderDeep    | border-future-border-deep    | zinc-950 #09090b  | zinc-50  #fafafa   | Nested containers   |
- * | borderInverse | border-future-border-inverse | zinc-200 #e4e4e7  | zinc-700 #3f3f46   | Borders on inverse  |
- * | borderHover   | border-future-border-hover   | zinc-600 #52525b  | zinc-400 #a1a1aa   | Border hover state  |
+ * | border        | border-border         | zinc-700 #3f3f46  | zinc-300 #d4d4d8   | Primary borders     |
+ * | borderSubtle  | border-border-subtle  | zinc-800 #27272a  | zinc-200 #e4e4e7   | Subtle dividers     |
+ * | borderMuted   | border-border-muted   | zinc-900 #18181b  | zinc-100 #f4f4f5   | Content borders     |
+ * | borderDeep    | border-border-deep    | zinc-950 #09090b  | zinc-50  #fafafa   | Nested containers   |
+ * | borderInverse | border-border-inverse | zinc-200 #e4e4e7  | zinc-700 #3f3f46   | Borders on inverse  |
+ * | borderHover   | border-border-hover   | zinc-600 #52525b  | zinc-400 #a1a1aa   | Border hover state  |
  */
 export const border = {
-  border: 'border-future-border',
-  borderSubtle: 'border-future-border-subtle',
-  borderMuted: 'border-future-border-muted',
-  borderDeep: 'border-future-border-deep',
-  borderInverse: 'border-future-border-inverse',
-  borderHover: 'border-future-border-hover',
+  border: 'border-border',
+  borderSubtle: 'border-border-subtle',
+  borderMuted: 'border-border-muted',
+  borderDeep: 'border-border-deep',
+  borderInverse: 'border-border-inverse',
+  borderHover: 'border-border-hover',
 } as const;
 
 // =============================================================================
@@ -119,10 +119,10 @@ export const border = {
  *
  * | Token | Semantic class     | Dark value        | Light value       | Usage              |
  * |-------|--------------------|-------------------|-------------------|--------------------|
- * | ring  | ring-future-ring   | zinc-600 #52525b  | zinc-400 #a1a1aa  | Flow node selected |
+ * | ring  | ring-ring   | zinc-600 #52525b  | zinc-400 #a1a1aa  | Flow node selected |
  */
 export const ring = {
-  ring: 'ring-future-ring',
+  ring: 'ring-ring',
 } as const;
 
 // =============================================================================
@@ -135,28 +135,28 @@ export const ring = {
  * Dark theme:
  * | Token      | Utility class           | Angle  | From              | To                |
  * |------------|-------------------------|--------|-------------------|-------------------|
- * | gradient1  | bg-future-gradient-1    | 127deg | zinc-700 #3f3f47  | zinc-800 #27272a  |
- * | gradient2  | bg-future-gradient-2    | 128deg | zinc-950 #09090b  | zinc-900 #18181b  |
- * | gradient3  | bg-future-gradient-3    | 128deg | zinc-700 #3f3f47  | zinc-900 #18181b  |
- * | gradient4  | bg-future-gradient-4    | 180deg | zinc-900 #18181b  | zinc-800 #27272a  |
- * | gradient5  | bg-future-gradient-5    | 180deg | zinc-950 #09090b  | zinc-900 #18181b  |
- * | gradient6  | bg-future-gradient-6    | 106deg | cyan-600 #0092b8  | cyan-950 #053345  |
+ * | gradient1  | bg-gradient-1    | 127deg | zinc-700 #3f3f47  | zinc-800 #27272a  |
+ * | gradient2  | bg-gradient-2    | 128deg | zinc-950 #09090b  | zinc-900 #18181b  |
+ * | gradient3  | bg-gradient-3    | 128deg | zinc-700 #3f3f47  | zinc-900 #18181b  |
+ * | gradient4  | bg-gradient-4    | 180deg | zinc-900 #18181b  | zinc-800 #27272a  |
+ * | gradient5  | bg-gradient-5    | 180deg | zinc-950 #09090b  | zinc-900 #18181b  |
+ * | gradient6  | bg-gradient-6    | 106deg | cyan-600 #0092b8  | cyan-950 #053345  |
  *
  * Light theme:
  * | Token      | Utility class           | Angle  | From              | To                |
  * |------------|-------------------------|--------|-------------------|-------------------|
- * | gradient1  | bg-future-gradient-1    | 127deg | zinc-200 #e4e4e7  | zinc-100 #f4f4f5  |
- * | gradient2  | bg-future-gradient-2    | 128deg | white   #ffffff   | zinc-50  #fafafa   |
- * | gradient3  | bg-future-gradient-3    | 128deg | zinc-200 #e4e4e7  | zinc-50  #fafafa   |
- * | gradient4  | bg-future-gradient-4    | 180deg | zinc-50  #fafafa   | zinc-100 #f4f4f5  |
- * | gradient5  | bg-future-gradient-5    | 180deg | white   #ffffff   | zinc-50  #fafafa   |
- * | gradient6  | bg-future-gradient-6    | 106deg | cyan-400 #22d3ee  | cyan-100 #cffafe  |
+ * | gradient1  | bg-gradient-1    | 127deg | zinc-200 #e4e4e7  | zinc-100 #f4f4f5  |
+ * | gradient2  | bg-gradient-2    | 128deg | white   #ffffff   | zinc-50  #fafafa   |
+ * | gradient3  | bg-gradient-3    | 128deg | zinc-200 #e4e4e7  | zinc-50  #fafafa   |
+ * | gradient4  | bg-gradient-4    | 180deg | zinc-50  #fafafa   | zinc-100 #f4f4f5  |
+ * | gradient5  | bg-gradient-5    | 180deg | white   #ffffff   | zinc-50  #fafafa   |
+ * | gradient6  | bg-gradient-6    | 106deg | cyan-400 #22d3ee  | cyan-100 #cffafe  |
  */
 export const gradient = {
-  gradient1: 'bg-future-gradient-1',
-  gradient2: 'bg-future-gradient-2',
-  gradient3: 'bg-future-gradient-3',
-  gradient4: 'bg-future-gradient-4',
-  gradient5: 'bg-future-gradient-5',
-  gradient6: 'bg-future-gradient-6',
+  gradient1: 'bg-gradient-1',
+  gradient2: 'bg-gradient-2',
+  gradient3: 'bg-gradient-3',
+  gradient4: 'bg-gradient-4',
+  gradient5: 'bg-gradient-5',
+  gradient6: 'bg-gradient-6',
 } as const;
diff --git a/packages/apollo-wind/src/foundation/Future/future-theme.css b/packages/apollo-wind/src/foundation/Future/future-theme.css
deleted file mode 100644
index 2867f6f5c..000000000
--- a/packages/apollo-wind/src/foundation/Future/future-theme.css
+++ /dev/null
@@ -1,569 +0,0 @@
-/**
- * Apollo Future — Theme Variables
- *
- * CSS custom properties for the Future design language.
- * Defines dark and light theme values for backgrounds, text, borders, and rings.
- *
- * Apply `.future-dark` or `.future-light` to a parent element to activate a theme.
- * Templates apply this class at their root automatically via the `theme` prop.
- *
- * Tailwind 4 generates utility classes from the @theme block below, e.g.:
- *   bg-future-surface, text-future-foreground, border-future-border, etc.
- */
-
-/* ============================================================================
- * Dark theme (default for Future templates)
- * ============================================================================ */
-
-.future-dark {
-  /* ── Surfaces ─────────────────────────────────────────────────────────── */
-  --color-future-surface: #09090b;
-  /* zinc-950  — page / canvas */
-  --color-future-surface-raised: #18181b;
-  /* zinc-900  — cards, overlays, panels */
-  --color-future-surface-overlay: #27272a;
-  /* zinc-800  — panels, inputs, tabs */
-  --color-future-surface-hover: #3f3f46;
-  /* zinc-700  — hover, selected nav */
-  --color-future-surface-muted: #71717a;
-  /* zinc-500  — badges, indicators */
-  --color-future-surface-inverse: #fafafa;
-  /* zinc-50   — buttons on dark bg */
-
-  /* ── Accent ───────────────────────────────────────────────────────────── */
-  --color-future-accent: #0891b2;
-  /* cyan-600  — logo, submit, run */
-  --color-future-accent-subtle: #083344;
-  /* cyan-950  — status badge, active nav */
-
-  /* ── Foreground (text / icons) ────────────────────────────────────────── */
-  --color-future-foreground: #fafafa;
-  /* zinc-50   — primary headings */
-  --color-future-foreground-secondary: #f4f4f5;
-  /* zinc-100  — body, messages */
-  --color-future-foreground-hover: #d4d4d8;
-  /* zinc-300  — hover states */
-  --color-future-foreground-muted: #a1a1aa;
-  /* zinc-400  — nav, secondary UI */
-  --color-future-foreground-subtle: #71717a;
-  /* zinc-500  — labels, muted */
-  --color-future-foreground-inverse: #09090b;
-  /* zinc-950  — icons on light bg */
-  --color-future-foreground-on-accent: #fafafa;
-  /* zinc-50   — text on accent bg */
-  --color-future-foreground-accent: #0891b2;
-  /* cyan-600  — accent text */
-  --color-future-foreground-accent-muted: #22d3ee;
-  /* cyan-400 — muted accent text */
-
-  /* ── Borders ──────────────────────────────────────────────────────────── */
-  --color-future-border: #3f3f46;
-  /* zinc-700  — primary borders */
-  --color-future-border-subtle: #27272a;
-  /* zinc-800  — subtle dividers */
-  --color-future-border-muted: #18181b;
-  /* zinc-900  — content borders */
-  --color-future-border-deep: #09090b;
-  /* zinc-950  — nested containers */
-  --color-future-border-inverse: #e4e4e7;
-  /* zinc-200  — borders on inverse bg */
-  --color-future-border-hover: #52525b;
-  /* zinc-600  — border hover state */
-
-  /* ── Ring ──────────────────────────────────────────────────────────────── */
-  --color-future-ring: #52525b;
-  /* zinc-600  — selection ring */
-
-  /* ── Gradients ───────────────────────────────────────────────────────── */
-  --gradient-future-1: linear-gradient(127deg, #3f3f47 25.94%, #27272a 74.06%);
-  /* zinc-700 → zinc-800 */
-  --gradient-future-2: linear-gradient(128deg, #09090b 1.26%, #18181b 52.69%);
-  /* zinc-950 → zinc-900 */
-  --gradient-future-3: linear-gradient(128deg, #3f3f47 1.26%, #18181b 52.69%);
-  /* zinc-700 → zinc-900 */
-  --gradient-future-4: linear-gradient(180deg, #18181b 0%, #27272a 100%);
-  /* zinc-900 → zinc-800 */
-  --gradient-future-5: linear-gradient(180deg, #09090b 0%, #18181b 100%);
-  /* zinc-950 → zinc-900 */
-  --gradient-future-6: linear-gradient(106deg, #0092b8 28.08%, #053345 71.92%);
-  /* cyan-600 → cyan-950 */
-
-  /* ── shadcn bridge — maps standard variables so shadcn components
-       (DataTable, Input, Button, etc.) inherit Future theme colors ────── */
-  --color-background: var(--color-future-surface);
-  --color-foreground: var(--color-future-foreground);
-  --color-card: var(--color-future-surface-raised);
-  --color-card-foreground: var(--color-future-foreground);
-  --color-popover: var(--color-future-surface-raised);
-  --color-popover-foreground: var(--color-future-foreground);
-  --color-primary: var(--color-future-accent);
-  --color-primary-foreground: var(--color-future-foreground-on-accent);
-  --color-secondary: var(--color-future-surface-overlay);
-  --color-secondary-foreground: var(--color-future-foreground);
-  --color-muted: var(--color-future-surface-overlay);
-  --color-muted-foreground: var(--color-future-foreground-muted);
-  --color-accent: var(--color-future-surface-hover);
-  --color-accent-foreground: var(--color-future-foreground);
-  --color-destructive: #ef4444;
-  --color-destructive-foreground: #fafafa;
-  /* zinc-50   — text on destructive bg */
-  --color-border: var(--color-future-border);
-  --color-border-de-emp: var(--color-future-border-subtle);
-  --color-input: var(--color-future-border);
-  --color-ring: var(--color-future-ring);
-}
-
-/* ============================================================================
- * Light theme
- * ============================================================================ */
-
-.future-light {
-  /* ── Surfaces ─────────────────────────────────────────────────────────── */
-  --color-future-surface: #fafafa;
-  /* zinc-50   — page / canvas */
-  --color-future-surface-raised: #f4f4f5;
-  /* zinc-100  — Properties bar & panel (Flow); cards, overlays, panels */
-  --color-future-surface-overlay: #e4e4e7;
-  /* zinc-200  — Left panel (Flow, Delegate); panels, inputs, tabs */
-  --color-future-surface-hover: #d4d4d8;
-  /* zinc-300  — hover, selected nav */
-  --color-future-surface-muted: #a1a1aa;
-  /* zinc-400  — badges, indicators */
-  --color-future-surface-inverse: #09090b;
-  /* zinc-950  — buttons on light bg */
-
-  /* ── Accent ───────────────────────────────────────────────────────────── */
-  --color-future-accent: #0891b2;
-  /* cyan-600  — logo, submit, run */
-  --color-future-accent-subtle: #ecfeff;
-  /* cyan-50   — status badge, active nav */
-
-  /* ── Foreground (text / icons) ────────────────────────────────────────── */
-  --color-future-foreground: #09090b;
-  /* zinc-950  — primary headings */
-  --color-future-foreground-secondary: #18181b;
-  /* zinc-900  — body, messages */
-  --color-future-foreground-hover: #52525b;
-  /* zinc-600  — hover states */
-  --color-future-foreground-muted: #71717a;
-  /* zinc-500  — nav, secondary UI */
-  --color-future-foreground-subtle: #a1a1aa;
-  /* zinc-400  — labels, muted */
-  --color-future-foreground-inverse: #fafafa;
-  /* zinc-50   — icons on dark bg */
-  --color-future-foreground-on-accent: #fafafa;
-  /* zinc-50   — text on accent bg */
-  --color-future-foreground-accent: #0891b2;
-  /* cyan-600  — accent text */
-  --color-future-foreground-accent-muted: #0891b2;
-  /* cyan-600 — muted accent text */
-
-  /* ── Borders ──────────────────────────────────────────────────────────── */
-  --color-future-border: #d4d4d8;
-  /* zinc-300  — primary borders */
-  --color-future-border-subtle: #e4e4e7;
-  /* zinc-200  — subtle dividers */
-  --color-future-border-muted: #f4f4f5;
-  /* zinc-100  — content borders */
-  --color-future-border-deep: #fafafa;
-  /* zinc-50   — nested containers */
-  --color-future-border-inverse: #3f3f46;
-  /* zinc-700  — borders on inverse bg */
-  --color-future-border-hover: #a1a1aa;
-  /* zinc-400  — border hover state */
-
-  /* ── Ring ──────────────────────────────────────────────────────────────── */
-  --color-future-ring: #a1a1aa;
-  /* zinc-400  — selection ring */
-
-  /* ── Gradients ───────────────────────────────────────────────────────── */
-  --gradient-future-1: linear-gradient(127deg, #e4e4e7 25.94%, #f4f4f5 74.06%);
-  /* zinc-200 → zinc-100 */
-  --gradient-future-2: linear-gradient(128deg, #fafafa 1.26%, #fafafa 52.69%);
-  /* zinc-50 → zinc-50 */
-  --gradient-future-3: linear-gradient(128deg, #e4e4e7 1.26%, #fafafa 52.69%);
-  /* zinc-200 → zinc-50 */
-  --gradient-future-4: linear-gradient(180deg, #fafafa 0%, #f4f4f5 100%);
-  /* zinc-50 → zinc-100 */
-  --gradient-future-5: linear-gradient(180deg, #fafafa 0%, #fafafa 100%);
-  /* zinc-50 → zinc-50 */
-  --gradient-future-6: linear-gradient(106deg, #22d3ee 28.08%, #cffafe 71.92%);
-  /* cyan-400 → cyan-100 */
-
-  /* ── shadcn bridge — maps standard variables so shadcn components
-       (DataTable, Input, Button, etc.) inherit Future theme colors ────── */
-  --color-background: var(--color-future-surface);
-  --color-foreground: var(--color-future-foreground);
-  --color-card: var(--color-future-surface-raised);
-  --color-card-foreground: var(--color-future-foreground);
-  --color-popover: var(--color-future-surface-raised);
-  --color-popover-foreground: var(--color-future-foreground);
-  --color-primary: var(--color-future-accent);
-  --color-primary-foreground: var(--color-future-foreground-on-accent);
-  --color-secondary: var(--color-future-surface-overlay);
-  --color-secondary-foreground: var(--color-future-foreground);
-  --color-muted: var(--color-future-surface-overlay);
-  --color-muted-foreground: var(--color-future-foreground-muted);
-  --color-accent: var(--color-future-surface-hover);
-  --color-accent-foreground: var(--color-future-foreground);
-  --color-destructive: #ef4444;
-  --color-destructive-foreground: #fafafa;
-  /* zinc-50   — text on destructive bg */
-  --color-border: var(--color-future-border);
-  --color-border-de-emp: var(--color-future-border-subtle);
-  --color-input: var(--color-future-border);
-  --color-ring: var(--color-future-ring);
-}
-
-/* ============================================================================
- * Wireframe theme (low-fidelity prototyping)
- *
- * Intentionally flat, no accent color, dashed borders. Designed to look like
- * a quick sketch or blueprint so stakeholders focus on layout, not polish.
- * ============================================================================ */
-
-.future-wireframe {
-  /* ── Surfaces ─────────────────────────────────────────────────────────── */
-  --color-future-surface: #ffffff;
-  --color-future-surface-raised: #f9fafb;
-  --color-future-surface-overlay: #f3f4f6;
-  --color-future-surface-hover: #e5e7eb;
-  --color-future-surface-muted: #d1d5db;
-  --color-future-surface-inverse: #374151;
-
-  /* ── Accent (deliberately muted — no brand color) ──────────────────── */
-  --color-future-accent: #6b7280;
-  --color-future-accent-subtle: #f3f4f6;
-
-  /* ── Foreground ─────────────────────────────────────────────────────── */
-  --color-future-foreground: #1f2937;
-  --color-future-foreground-secondary: #374151;
-  --color-future-foreground-hover: #4b5563;
-  --color-future-foreground-muted: #6b7280;
-  --color-future-foreground-subtle: #9ca3af;
-  --color-future-foreground-inverse: #ffffff;
-  --color-future-foreground-on-accent: #ffffff;
-  --color-future-foreground-accent: #4b5563;
-  --color-future-foreground-accent-muted: #6b7280;
-
-  /* ── Borders (dashed via utility, but color defined here) ───────────── */
-  --color-future-border: #d1d5db;
-  --color-future-border-subtle: #e5e7eb;
-  --color-future-border-muted: #f3f4f6;
-  --color-future-border-deep: #f9fafb;
-  --color-future-border-inverse: #4b5563;
-  --color-future-border-hover: #9ca3af;
-
-  /* ── Ring ────────────────────────────────────────────────────────────── */
-  --color-future-ring: #9ca3af;
-
-  /* ── Gradients (flat — no gradients in wireframe mode) ──────────────── */
-  --gradient-future-1: none;
-  --gradient-future-2: none;
-  --gradient-future-3: none;
-  --gradient-future-4: none;
-  --gradient-future-5: none;
-  --gradient-future-6: none;
-
-  /* ── shadcn bridge ──────────────────────────────────────────────────── */
-  --color-background: var(--color-future-surface);
-  --color-foreground: var(--color-future-foreground);
-  --color-card: var(--color-future-surface-raised);
-  --color-card-foreground: var(--color-future-foreground);
-  --color-popover: var(--color-future-surface-raised);
-  --color-popover-foreground: var(--color-future-foreground);
-  --color-primary: var(--color-future-accent);
-  --color-primary-foreground: var(--color-future-foreground-on-accent);
-  --color-secondary: var(--color-future-surface-overlay);
-  --color-secondary-foreground: var(--color-future-foreground);
-  --color-muted: var(--color-future-surface-overlay);
-  --color-muted-foreground: var(--color-future-foreground-muted);
-  --color-accent: var(--color-future-surface-hover);
-  --color-accent-foreground: var(--color-future-foreground);
-  --color-destructive: #9ca3af;
-  --color-destructive-foreground: #ffffff;
-  --color-border: var(--color-future-border);
-  --color-border-de-emp: var(--color-future-border-subtle);
-  --color-input: var(--color-future-border);
-  --color-ring: var(--color-future-ring);
-}
-
-/* Wireframe overrides: dashed borders everywhere, reduced rounding */
-.future-wireframe *,
-.future-wireframe *::before,
-.future-wireframe *::after {
-  border-style: dashed !important;
-  box-shadow: none !important;
-}
-
-/* ============================================================================
- * Vertex theme (demo — Apollo Vertex dark palette)
- *
- * Translates the Vertex design language (oklch-based, teal/blue accent)
- * into Future token slots so templates render with the Vertex look & feel.
- * Source: apps/apollo-vertex/app/themes.ts  (default.config.dark)
- * ============================================================================ */
-
-.future-vertex {
-  /* ── Surfaces ─────────────────────────────────────────────────────────── */
-  --color-future-surface: oklch(0.21 0.03 258.5);
-  /* deep blue-grey — page / canvas */
-  --color-future-surface-raised: oklch(0.233 0.036 254.7);
-  /* slightly lighter — cards, panels */
-  --color-future-surface-overlay: oklch(0.2648 0.0329 254.38);
-  /* muted — inputs, tabs */
-  --color-future-surface-hover: oklch(0.3927 0.0289 240.86);
-  /* secondary — hover, selected nav */
-  --color-future-surface-muted: oklch(0.72 0.03 254.38);
-  /* muted-foreground — badges, indicators */
-  --color-future-surface-inverse: oklch(0.985 0 0);
-  /* foreground — buttons on dark bg */
-
-  /* ── Accent ───────────────────────────────────────────────────────────── */
-  --color-future-accent: oklch(0.692 0.1119 207.06);
-  /* primary — teal */
-  --color-future-accent-subtle: oklch(0.166 0.0283 203.34);
-  /* primary-foreground — deep teal bg */
-
-  /* ── Foreground (text / icons) ────────────────────────────────────────── */
-  --color-future-foreground: oklch(0.985 0 0);
-  /* foreground — primary text */
-  --color-future-foreground-secondary: oklch(0.9525 0.011 225.98);
-  /* card-foreground — body text */
-  --color-future-foreground-hover: oklch(0.9416 0.0145 244.72);
-  /* secondary-foreground — hover states */
-  --color-future-foreground-muted: oklch(0.72 0.03 254.38);
-  /* muted-foreground — nav, secondary UI */
-  --color-future-foreground-subtle: oklch(0.4594 0.028 264.25);
-  /* muted-foreground (light ref) — labels */
-  --color-future-foreground-inverse: oklch(0.21 0.03 258.5);
-  /* background — icons on light bg */
-  --color-future-foreground-on-accent: oklch(0.166 0.0283 203.34);
-  /* primary-foreground — text on accent */
-  --color-future-foreground-accent: oklch(0.692 0.1119 207.06);
-  /* primary — accent text */
-  --color-future-foreground-accent-muted: oklch(0.573 0.114 211.4);
-  /* accent — muted accent text */
-
-  /* ── Borders ──────────────────────────────────────────────────────────── */
-  --color-future-border: oklch(0.3068 0.0426 258.29);
-  /* border */
-  --color-future-border-subtle: oklch(0.2648 0.0329 254.38);
-  /* muted — subtle dividers */
-  --color-future-border-muted: oklch(0.233 0.036 254.7);
-  /* card — content borders */
-  --color-future-border-deep: oklch(0.21 0.03 258.5);
-  /* background — nested containers */
-  --color-future-border-inverse: oklch(0.9229 0.0065 252.13);
-  /* light border ref */
-  --color-future-border-hover: oklch(0.3927 0.0289 240.86);
-  /* secondary — border hover */
-
-  /* ── Ring ────────────────────────────────────────────────────────────── */
-  --color-future-ring: oklch(0.692 0.1119 207.06);
-  /* ring — teal focus ring */
-
-  /* ── Gradients (subtle depth) ──────────────────────────────────────── */
-  --gradient-future-1: linear-gradient(127deg, oklch(0.3927 0.0289 240.86) 25.94%, oklch(0.2648 0.0329 254.38) 74.06%);
-  --gradient-future-2: linear-gradient(128deg, oklch(0.21 0.03 258.5) 1.26%, oklch(0.233 0.036 254.7) 52.69%);
-  --gradient-future-3: linear-gradient(128deg, oklch(0.3927 0.0289 240.86) 1.26%, oklch(0.233 0.036 254.7) 52.69%);
-  --gradient-future-4: linear-gradient(180deg, oklch(0.233 0.036 254.7) 0%, oklch(0.2648 0.0329 254.38) 100%);
-  --gradient-future-5: linear-gradient(180deg, oklch(0.21 0.03 258.5) 0%, oklch(0.233 0.036 254.7) 100%);
-  --gradient-future-6: linear-gradient(106deg, oklch(0.692 0.1119 207.06) 28.08%, oklch(0.166 0.0283 203.34) 71.92%);
-
-  /* ── shadcn bridge ──────────────────────────────────────────────────── */
-  --color-background: var(--color-future-surface);
-  --color-foreground: var(--color-future-foreground);
-  --color-card: var(--color-future-surface-raised);
-  --color-card-foreground: var(--color-future-foreground);
-  --color-popover: var(--color-future-surface-raised);
-  --color-popover-foreground: var(--color-future-foreground);
-  --color-primary: var(--color-future-accent);
-  --color-primary-foreground: var(--color-future-foreground-on-accent);
-  --color-secondary: var(--color-future-surface-overlay);
-  --color-secondary-foreground: var(--color-future-foreground);
-  --color-muted: var(--color-future-surface-overlay);
-  --color-muted-foreground: var(--color-future-foreground-muted);
-  --color-accent: var(--color-future-surface-hover);
-  --color-accent-foreground: var(--color-future-foreground);
-  --color-destructive: oklch(0.6542 0.2321 28.66);
-  --color-destructive-foreground: oklch(1 0 89.88);
-  --color-border: var(--color-future-border);
-  --color-border-de-emp: var(--color-future-border-subtle);
-  --color-input: var(--color-future-border);
-  --color-ring: var(--color-future-ring);
-}
-
-/* ============================================================================
- * Canvas theme (demo — Apollo React / MUI dark palette)
- *
- * Maps the classic apollo-react dark theme (apollo-core darkPalette) into
- * Future token slots. Dark blue-grey base with UiPath orange accent.
- * Source: packages/apollo-core/src/tokens/jss/palette.ts  (darkPalette)
- * ============================================================================ */
-
-.future-canvas {
-  /* ── Surfaces ─────────────────────────────────────────────────────────── */
-  --color-future-surface: #182027;
-  /* ColorBackgroundDark — page / canvas */
-  --color-future-surface-raised: #273139;
-  /* ColorBackgroundSecondaryDark — cards, panels */
-  --color-future-surface-overlay: #334049;
-  /* mid-tone — inputs, tabs */
-  --color-future-surface-hover: #3e4e58;
-  /* hover, selected nav */
-  --color-future-surface-muted: #8a97a0;
-  /* ColorBorderDark — badges, indicators */
-  --color-future-surface-inverse: #f8f9fa;
-  /* ColorBackgroundInverseDark — buttons on dark bg */
-
-  /* ── Accent (UiPath orange) ────────────────────────────────────────── */
-  --color-future-accent: #fa4616;
-  /* ColorOrange500 — primary brand */
-  --color-future-accent-subtle: #3c2a1e;
-  /* dark warm tone — active nav bg */
-
-  /* ── Foreground (text / icons) ────────────────────────────────────────── */
-  --color-future-foreground: #f8f9fa;
-  /* ColorForegroundEmpDark — primary text */
-  --color-future-foreground-secondary: #f4f5f7;
-  /* ColorForegroundDark — body text */
-  --color-future-foreground-hover: #cfd8dd;
-  /* ColorForegroundDeEmpDark — hover states */
-  --color-future-foreground-muted: #a4b1b8;
-  /* ColorForegroundDisableDark — nav, secondary UI */
-  --color-future-foreground-subtle: #8a97a0;
-  /* ColorBorderDark — labels, muted */
-  --color-future-foreground-inverse: #182027;
-  /* ColorForegroundInverseDark — icons on light bg */
-  --color-future-foreground-on-accent: #ffffff;
-  /* white — text on accent bg */
-  --color-future-foreground-accent: #fa4616;
-  /* ColorOrange500 — accent text */
-  --color-future-foreground-accent-muted: #ff8f70;
-  /* ColorSelectionDark — muted accent text */
-
-  /* ── Borders ──────────────────────────────────────────────────────────── */
-  --color-future-border: #526069;
-  /* ColorBorderDeEmpDark */
-  --color-future-border-subtle: #3e4e58;
-  /* mid border */
-  --color-future-border-muted: #273139;
-  /* ColorBackgroundSecondaryDark — content borders */
-  --color-future-border-deep: #182027;
-  /* ColorBackgroundDark — nested containers */
-  --color-future-border-inverse: #cfd8dd;
-  /* ColorForegroundDeEmpDark — borders on inverse bg */
-  --color-future-border-hover: #8a97a0;
-  /* ColorBorderDark — border hover */
-
-  /* ── Ring ────────────────────────────────────────────────────────────── */
-  --color-future-ring: #fa4616;
-  /* orange focus ring */
-
-  /* ── Gradients ────────────────────────────────────────────────────────── */
-  --gradient-future-1: linear-gradient(127deg, #3e4e58 25.94%, #334049 74.06%);
-  --gradient-future-2: linear-gradient(128deg, #182027 1.26%, #273139 52.69%);
-  --gradient-future-3: linear-gradient(128deg, #3e4e58 1.26%, #273139 52.69%);
-  --gradient-future-4: linear-gradient(180deg, #273139 0%, #334049 100%);
-  --gradient-future-5: linear-gradient(180deg, #182027 0%, #273139 100%);
-  --gradient-future-6: linear-gradient(106deg, #fa4616 28.08%, #3c2a1e 71.92%);
-
-  /* ── shadcn bridge ──────────────────────────────────────────────────── */
-  --color-background: var(--color-future-surface);
-  --color-foreground: var(--color-future-foreground);
-  --color-card: var(--color-future-surface-raised);
-  --color-card-foreground: var(--color-future-foreground);
-  --color-popover: var(--color-future-surface-raised);
-  --color-popover-foreground: var(--color-future-foreground);
-  --color-primary: var(--color-future-accent);
-  --color-primary-foreground: var(--color-future-foreground-on-accent);
-  --color-secondary: var(--color-future-surface-overlay);
-  --color-secondary-foreground: var(--color-future-foreground);
-  --color-muted: var(--color-future-surface-overlay);
-  --color-muted-foreground: var(--color-future-foreground-muted);
-  --color-accent: var(--color-future-surface-hover);
-  --color-accent-foreground: var(--color-future-foreground);
-  --color-destructive: #ef4444;
-  --color-destructive-foreground: #ffffff;
-  --color-border: var(--color-future-border);
-  --color-border-de-emp: var(--color-future-border-subtle);
-  --color-input: var(--color-future-border);
-  --color-ring: var(--color-future-ring);
-}
-
-/* ============================================================================
- * Register Future tokens with Tailwind 4
- *
- * The @theme inline block tells Tailwind to generate utility classes for
- * each variable. E.g. --color-future-surface generates:
- *   bg-future-surface, text-future-surface, border-future-surface,
- *   from-future-surface, to-future-surface, ring-future-surface, etc.
- * ============================================================================ */
-
-@theme inline {
-  /* Surfaces */
-  --color-future-surface: var(--color-future-surface);
-  --color-future-surface-raised: var(--color-future-surface-raised);
-  --color-future-surface-overlay: var(--color-future-surface-overlay);
-  --color-future-surface-hover: var(--color-future-surface-hover);
-  --color-future-surface-muted: var(--color-future-surface-muted);
-  --color-future-surface-inverse: var(--color-future-surface-inverse);
-
-  /* Accent */
-  --color-future-accent: var(--color-future-accent);
-  --color-future-accent-subtle: var(--color-future-accent-subtle);
-
-  /* Foreground */
-  --color-future-foreground: var(--color-future-foreground);
-  --color-future-foreground-secondary: var(--color-future-foreground-secondary);
-  --color-future-foreground-hover: var(--color-future-foreground-hover);
-  --color-future-foreground-muted: var(--color-future-foreground-muted);
-  --color-future-foreground-subtle: var(--color-future-foreground-subtle);
-  --color-future-foreground-inverse: var(--color-future-foreground-inverse);
-  --color-future-foreground-on-accent: var(--color-future-foreground-on-accent);
-  --color-future-foreground-accent: var(--color-future-foreground-accent);
-  --color-future-foreground-accent-muted: var(--color-future-foreground-accent-muted);
-
-  /* Borders */
-  --color-future-border: var(--color-future-border);
-  --color-future-border-subtle: var(--color-future-border-subtle);
-  --color-future-border-muted: var(--color-future-border-muted);
-  --color-future-border-deep: var(--color-future-border-deep);
-  --color-future-border-inverse: var(--color-future-border-inverse);
-  --color-future-border-hover: var(--color-future-border-hover);
-
-  /* Ring */
-  --color-future-ring: var(--color-future-ring);
-}
-
-/* ============================================================================
- * Gradient utilities
- *
- * Gradients can't be registered via @theme (they aren't single color values),
- * so we define them as @utility rules. Usage: bg-future-gradient-1, etc.
- * ============================================================================ */
-
-@utility bg-future-gradient-1 {
-  background-image: var(--gradient-future-1);
-}
-
-@utility bg-future-gradient-2 {
-  background-image: var(--gradient-future-2);
-}
-
-@utility bg-future-gradient-3 {
-  background-image: var(--gradient-future-3);
-}
-
-@utility bg-future-gradient-4 {
-  background-image: var(--gradient-future-4);
-}
-
-@utility bg-future-gradient-5 {
-  background-image: var(--gradient-future-5);
-}
-
-@utility bg-future-gradient-6 {
-  background-image: var(--gradient-future-6);
-}
\ No newline at end of file
diff --git a/packages/apollo-wind/src/foundation/Future/icons.stories.tsx b/packages/apollo-wind/src/foundation/Future/icons.stories.tsx
index 99cdaac98..cd72970c5 100644
--- a/packages/apollo-wind/src/foundation/Future/icons.stories.tsx
+++ b/packages/apollo-wind/src/foundation/Future/icons.stories.tsx
@@ -15,8 +15,8 @@ export const Default: Story = {
   render: (_, { globals }) => (
     <div
       className={cn(
-        ({ light: 'future-light', 'legacy-dark': 'legacy-dark', 'legacy-light': 'legacy-light', wireframe: 'future-wireframe', vertex: 'future-vertex', canvas: 'future-canvas' } as Record<string, string>)[globals.futureTheme] ?? 'future-dark',
-        'flex min-h-screen w-full items-center justify-center bg-future-surface text-future-foreground-muted'
+        ({ light: 'future-light', 'core-dark': 'core-dark', 'core-light': 'core-light', wireframe: 'wireframe', vertex: 'vertex', canvas: 'canvas' } as Record<string, string>)[globals.futureTheme] ?? 'future-dark',
+        'flex min-h-screen w-full items-center justify-center bg-surface text-foreground-muted'
       )}
     >
       Coming soon
diff --git a/packages/apollo-wind/src/foundation/Future/legacy-theme.css b/packages/apollo-wind/src/foundation/Future/legacy-theme.css
deleted file mode 100644
index dd71775ad..000000000
--- a/packages/apollo-wind/src/foundation/Future/legacy-theme.css
+++ /dev/null
@@ -1,261 +0,0 @@
-/**
- * Apollo Legacy — Theme Variables
- *
- * CSS custom properties for the Legacy (apollo-core) design language.
- * Scoped to `.legacy-dark` and `.legacy-light` classes so they can be applied
- * at any DOM level — matching the pattern used by Future themes.
- *
- * Source values come from @uipath/apollo-core/tokens/css/theme-variables.css.
- *
- * Apply `.legacy-dark` or `.legacy-light` to a parent element to activate a theme.
- *
- * Tailwind 4 generates utility classes from the @theme block below, e.g.:
- *   bg-legacy-surface, text-legacy-foreground, border-legacy-border, etc.
- */
-
-/* ============================================================================
- * Dark theme
- * ============================================================================ */
-
-.legacy-dark {
-  /* ── Surfaces ─────────────────────────────────────────────────────────── */
-  --color-legacy-surface: #182027;             /* page / canvas */
-  --color-legacy-surface-raised: #273139;      /* cards, panels */
-  --color-legacy-surface-overlay: #374652;     /* inputs, tabs, hover */
-  --color-legacy-surface-hover: #526069;       /* hover states */
-  --color-legacy-surface-muted: #8a97a0;       /* badges, indicators */
-  --color-legacy-surface-inverse: #f8f9fa;     /* inverse bg */
-  --color-legacy-surface-disabled: #273139;    /* disabled elements */
-  --color-legacy-surface-selected: #374652;    /* selected items */
-
-  /* ── Accent / Primary ──────────────────────────────────────────────────── */
-  --color-legacy-accent: #66adff;              /* primary blue */
-  --color-legacy-accent-hover: #87bfff;        /* primary hover */
-  --color-legacy-accent-lighter: #00489d;      /* lighter variant */
-  --color-legacy-accent-darker: #badaff;       /* darker variant */
-
-  /* ── Foreground (text / icons) ────────────────────────────────────────── */
-  --color-legacy-foreground: #f4f5f7;          /* primary text */
-  --color-legacy-foreground-emp: #f8f9fa;      /* emphasized text */
-  --color-legacy-foreground-muted: #cfd8dd;    /* de-emphasized text */
-  --color-legacy-foreground-subtle: #a4b1b8;   /* labels, disabled */
-  --color-legacy-foreground-inverse: #182027;  /* text on light bg */
-  --color-legacy-foreground-link: #66adff;     /* link text */
-  --color-legacy-foreground-on-accent: #182027; /* text on accent bg */
-
-  /* ── Borders ──────────────────────────────────────────────────────────── */
-  --color-legacy-border: #8a97a0;              /* primary borders */
-  --color-legacy-border-subtle: #526069;       /* subtle dividers */
-  --color-legacy-border-disabled: #526069;     /* disabled borders */
-  --color-legacy-border-grid: #273139;         /* grid borders */
-
-  /* ── Status ──────────────────────────────────────────────────────────── */
-  --color-legacy-error: #ff8484;
-  --color-legacy-success: #74c94b;
-  --color-legacy-warning: #ffbb27;
-  --color-legacy-info: #42a1ff;
-
-  /* ── Ring / Focus ────────────────────────────────────────────────────── */
-  --color-legacy-ring: #66adff;
-  --color-legacy-logo: #ffffff;
-
-  /* ── future-* bridge — allows templates built with future-* utility
-       classes (bg-future-surface, etc.) to resolve under legacy themes ──── */
-  --color-future-surface: var(--color-legacy-surface);
-  --color-future-surface-raised: var(--color-legacy-surface-raised);
-  --color-future-surface-overlay: var(--color-legacy-surface-overlay);
-  --color-future-surface-hover: var(--color-legacy-surface-hover);
-  --color-future-surface-muted: var(--color-legacy-surface-muted);
-  --color-future-surface-inverse: var(--color-legacy-surface-inverse);
-  --color-future-accent: var(--color-legacy-accent);
-  --color-future-accent-subtle: var(--color-legacy-accent-lighter);
-  --color-future-foreground: var(--color-legacy-foreground);
-  --color-future-foreground-secondary: var(--color-legacy-foreground-emp);
-  --color-future-foreground-hover: var(--color-legacy-foreground-muted);
-  --color-future-foreground-muted: var(--color-legacy-foreground-muted);
-  --color-future-foreground-subtle: var(--color-legacy-foreground-subtle);
-  --color-future-foreground-inverse: var(--color-legacy-foreground-inverse);
-  --color-future-foreground-on-accent: var(--color-legacy-foreground-on-accent);
-  --color-future-accent-foreground: var(--color-legacy-accent);
-  --color-future-accent-foreground-muted: var(--color-legacy-accent-hover);
-  --color-future-border: var(--color-legacy-border);
-  --color-future-border-subtle: var(--color-legacy-border-subtle);
-  --color-future-border-muted: var(--color-legacy-border-grid);
-  --color-future-border-deep: var(--color-legacy-border-grid);
-  --color-future-border-inverse: var(--color-legacy-border);
-  --color-future-border-hover: var(--color-legacy-border);
-  --color-future-ring: var(--color-legacy-ring);
-
-  /* ── shadcn bridge — maps standard variables so shadcn components
-       (DataTable, Input, Button, etc.) inherit Legacy theme colors ────── */
-  --color-background: var(--color-legacy-surface);
-  --color-foreground: var(--color-legacy-foreground);
-  --color-card: var(--color-legacy-surface-raised);
-  --color-card-foreground: var(--color-legacy-foreground);
-  --color-popover: var(--color-legacy-surface-raised);
-  --color-popover-foreground: var(--color-legacy-foreground);
-  --color-primary: var(--color-legacy-accent);
-  --color-primary-foreground: var(--color-legacy-foreground-on-accent);
-  --color-secondary: var(--color-legacy-surface-overlay);
-  --color-secondary-foreground: var(--color-legacy-foreground-muted);
-  --color-muted: var(--color-legacy-surface-raised);
-  --color-muted-foreground: var(--color-legacy-foreground-muted);
-  --color-accent: var(--color-legacy-surface-selected);
-  --color-accent-foreground: var(--color-legacy-foreground-emp);
-  --color-destructive: var(--color-legacy-error);
-  --color-border: var(--color-legacy-border-subtle);
-  --color-border-de-emp: var(--color-legacy-border-subtle);
-  --color-input: var(--color-legacy-border-subtle);
-  --color-ring: var(--color-legacy-ring);
-
-  color-scheme: dark;
-}
-
-/* ============================================================================
- * Light theme
- * ============================================================================ */
-
-.legacy-light {
-  /* ── Surfaces ─────────────────────────────────────────────────────────── */
-  --color-legacy-surface: #ffffff;             /* page / canvas */
-  --color-legacy-surface-raised: #ffffff;      /* cards (white on white) */
-  --color-legacy-surface-overlay: #f4f5f7;     /* secondary bg, inputs */
-  --color-legacy-surface-hover: #e9f1fa;       /* hover states */
-  --color-legacy-surface-muted: #cfd8dd;       /* badges, indicators */
-  --color-legacy-surface-inverse: #182027;     /* inverse bg */
-  --color-legacy-surface-disabled: #ecedee;    /* disabled elements */
-  --color-legacy-surface-selected: #e9f1fa;    /* selected items */
-
-  /* ── Accent / Primary ──────────────────────────────────────────────────── */
-  --color-legacy-accent: #0067df;              /* primary blue */
-  --color-legacy-accent-hover: #0056ba;        /* primary hover */
-  --color-legacy-accent-lighter: #badaff;      /* lighter variant */
-  --color-legacy-accent-darker: #00489d;       /* darker variant */
-
-  /* ── Foreground (text / icons) ────────────────────────────────────────── */
-  --color-legacy-foreground: #273139;          /* primary text */
-  --color-legacy-foreground-emp: #182027;      /* emphasized text */
-  --color-legacy-foreground-muted: #526069;    /* de-emphasized text */
-  --color-legacy-foreground-subtle: #8a97a0;   /* labels, disabled */
-  --color-legacy-foreground-inverse: #f8f9fa;  /* text on dark bg */
-  --color-legacy-foreground-link: #0067df;     /* link text */
-  --color-legacy-foreground-on-accent: #f8f9fa; /* text on accent bg */
-
-  /* ── Borders ──────────────────────────────────────────────────────────── */
-  --color-legacy-border: #a4b1b8;              /* primary borders */
-  --color-legacy-border-subtle: #cfd8dd;       /* subtle dividers */
-  --color-legacy-border-disabled: #cfd8dd;     /* disabled borders */
-  --color-legacy-border-grid: #f4f5f7;         /* grid borders */
-
-  /* ── Status ──────────────────────────────────────────────────────────── */
-  --color-legacy-error: #a6040a;
-  --color-legacy-success: #038108;
-  --color-legacy-warning: #9e6100;
-  --color-legacy-info: #1665b3;
-
-  /* ── Ring / Focus ────────────────────────────────────────────────────── */
-  --color-legacy-ring: #0067df;
-  --color-legacy-logo: #fa4616;
-
-  /* ── future-* bridge — allows templates built with future-* utility
-       classes (bg-future-surface, etc.) to resolve under legacy themes ──── */
-  --color-future-surface: var(--color-legacy-surface);
-  --color-future-surface-raised: var(--color-legacy-surface-raised);
-  --color-future-surface-overlay: var(--color-legacy-surface-overlay);
-  --color-future-surface-hover: var(--color-legacy-surface-hover);
-  --color-future-surface-muted: var(--color-legacy-surface-muted);
-  --color-future-surface-inverse: var(--color-legacy-surface-inverse);
-  --color-future-accent: var(--color-legacy-accent);
-  --color-future-accent-subtle: var(--color-legacy-accent-lighter);
-  --color-future-foreground: var(--color-legacy-foreground);
-  --color-future-foreground-secondary: var(--color-legacy-foreground-emp);
-  --color-future-foreground-hover: var(--color-legacy-foreground-muted);
-  --color-future-foreground-muted: var(--color-legacy-foreground-muted);
-  --color-future-foreground-subtle: var(--color-legacy-foreground-subtle);
-  --color-future-foreground-inverse: var(--color-legacy-foreground-inverse);
-  --color-future-foreground-on-accent: var(--color-legacy-foreground-on-accent);
-  --color-future-accent-foreground: var(--color-legacy-accent);
-  --color-future-accent-foreground-muted: var(--color-legacy-accent-hover);
-  --color-future-border: var(--color-legacy-border);
-  --color-future-border-subtle: var(--color-legacy-border-subtle);
-  --color-future-border-muted: var(--color-legacy-border-grid);
-  --color-future-border-deep: var(--color-legacy-border-grid);
-  --color-future-border-inverse: var(--color-legacy-border);
-  --color-future-border-hover: var(--color-legacy-border);
-  --color-future-ring: var(--color-legacy-ring);
-
-  /* ── shadcn bridge — maps standard variables so shadcn components
-       (DataTable, Input, Button, etc.) inherit Legacy theme colors ────── */
-  --color-background: var(--color-legacy-surface);
-  --color-foreground: var(--color-legacy-foreground);
-  --color-card: var(--color-legacy-surface-raised);
-  --color-card-foreground: var(--color-legacy-foreground);
-  --color-popover: var(--color-legacy-surface-raised);
-  --color-popover-foreground: var(--color-legacy-foreground);
-  --color-primary: var(--color-legacy-accent);
-  --color-primary-foreground: var(--color-legacy-foreground-on-accent);
-  --color-secondary: var(--color-legacy-surface-overlay);
-  --color-secondary-foreground: var(--color-legacy-foreground-muted);
-  --color-muted: var(--color-legacy-surface-overlay);
-  --color-muted-foreground: var(--color-legacy-foreground-muted);
-  --color-accent: var(--color-legacy-surface-selected);
-  --color-accent-foreground: var(--color-legacy-foreground-emp);
-  --color-destructive: var(--color-legacy-error);
-  --color-border: var(--color-legacy-border-subtle);
-  --color-border-de-emp: var(--color-legacy-border-subtle);
-  --color-input: var(--color-legacy-border-subtle);
-  --color-ring: var(--color-legacy-ring);
-
-  color-scheme: light;
-}
-
-/* ============================================================================
- * Register Legacy tokens with Tailwind 4
- *
- * The @theme inline block tells Tailwind to generate utility classes for
- * each variable. E.g. --color-legacy-surface generates:
- *   bg-legacy-surface, text-legacy-surface, border-legacy-surface, etc.
- * ============================================================================ */
-
-@theme inline {
-  /* Surfaces */
-  --color-legacy-surface: var(--color-legacy-surface);
-  --color-legacy-surface-raised: var(--color-legacy-surface-raised);
-  --color-legacy-surface-overlay: var(--color-legacy-surface-overlay);
-  --color-legacy-surface-hover: var(--color-legacy-surface-hover);
-  --color-legacy-surface-muted: var(--color-legacy-surface-muted);
-  --color-legacy-surface-inverse: var(--color-legacy-surface-inverse);
-  --color-legacy-surface-disabled: var(--color-legacy-surface-disabled);
-  --color-legacy-surface-selected: var(--color-legacy-surface-selected);
-
-  /* Accent */
-  --color-legacy-accent: var(--color-legacy-accent);
-  --color-legacy-accent-hover: var(--color-legacy-accent-hover);
-  --color-legacy-accent-lighter: var(--color-legacy-accent-lighter);
-  --color-legacy-accent-darker: var(--color-legacy-accent-darker);
-
-  /* Foreground */
-  --color-legacy-foreground: var(--color-legacy-foreground);
-  --color-legacy-foreground-emp: var(--color-legacy-foreground-emp);
-  --color-legacy-foreground-muted: var(--color-legacy-foreground-muted);
-  --color-legacy-foreground-subtle: var(--color-legacy-foreground-subtle);
-  --color-legacy-foreground-inverse: var(--color-legacy-foreground-inverse);
-  --color-legacy-foreground-link: var(--color-legacy-foreground-link);
-  --color-legacy-foreground-on-accent: var(--color-legacy-foreground-on-accent);
-
-  /* Borders */
-  --color-legacy-border: var(--color-legacy-border);
-  --color-legacy-border-subtle: var(--color-legacy-border-subtle);
-  --color-legacy-border-disabled: var(--color-legacy-border-disabled);
-  --color-legacy-border-grid: var(--color-legacy-border-grid);
-
-  /* Status */
-  --color-legacy-error: var(--color-legacy-error);
-  --color-legacy-success: var(--color-legacy-success);
-  --color-legacy-warning: var(--color-legacy-warning);
-  --color-legacy-info: var(--color-legacy-info);
-
-  /* Ring / Focus */
-  --color-legacy-ring: var(--color-legacy-ring);
-  --color-legacy-logo: var(--color-legacy-logo);
-}
diff --git a/packages/apollo-wind/src/foundation/Future/radius.stories.tsx b/packages/apollo-wind/src/foundation/Future/radius.stories.tsx
index b7756ee08..c7c993583 100644
--- a/packages/apollo-wind/src/foundation/Future/radius.stories.tsx
+++ b/packages/apollo-wind/src/foundation/Future/radius.stories.tsx
@@ -46,39 +46,39 @@ const radiusTokens: RadiusToken[] = [
 
 function RadiusTable({ tokens }: { tokens: RadiusToken[] }) {
   return (
-    <div className="overflow-hidden rounded-lg border border-future-border">
+    <div className="overflow-hidden rounded-lg border border-border">
       <table className="w-full text-sm" style={{ fontFamily: fontFamily.base }}>
         <thead>
-          <tr className="border-b border-future-border bg-future-surface-overlay">
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Token</th>
-            <th className="px-4 py-2.5 text-right font-medium text-future-foreground-muted">px</th>
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Tailwind Class</th>
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Usage</th>
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Preview</th>
+          <tr className="border-b border-border bg-surface-overlay">
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Token</th>
+            <th className="px-4 py-2.5 text-right font-medium text-foreground-muted">px</th>
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Tailwind Class</th>
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Usage</th>
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Preview</th>
           </tr>
         </thead>
         <tbody>
           {tokens.map((token) => (
-            <tr key={token.token} className="border-b border-future-border-subtle last:border-b-0">
+            <tr key={token.token} className="border-b border-border-subtle last:border-b-0">
               <td className="px-4 py-2">
-                <code className="text-xs text-future-accent-foreground" style={{ fontFamily: fontFamily.monospace }}>
+                <code className="text-xs text-brand-foreground" style={{ fontFamily: fontFamily.monospace }}>
                   {token.token}
                 </code>
               </td>
               <td className="px-4 py-2 text-right">
-                <code className="text-xs tabular-nums text-future-foreground-muted" style={{ fontFamily: fontFamily.monospace }}>
+                <code className="text-xs tabular-nums text-foreground-muted" style={{ fontFamily: fontFamily.monospace }}>
                   {token.px >= 9999 ? '9999' : token.px}
                 </code>
               </td>
               <td className="px-4 py-2">
-                <code className="text-xs text-future-foreground-subtle" style={{ fontFamily: fontFamily.monospace }}>
+                <code className="text-xs text-foreground-subtle" style={{ fontFamily: fontFamily.monospace }}>
                   {token.twClass}
                 </code>
               </td>
-              <td className="px-4 py-2 text-future-foreground-muted">{token.usage}</td>
+              <td className="px-4 py-2 text-foreground-muted">{token.usage}</td>
               <td className="px-4 py-3">
                 <div
-                  className="h-10 w-28 border border-future-border bg-future-surface-raised"
+                  className="h-10 w-28 border border-border bg-surface-raised"
                   style={{ borderRadius: token.px >= 9999 ? '9999px' : `${token.px}px` }}
                 />
               </td>
@@ -98,17 +98,17 @@ export const Default: Story = {
   render: (_, { globals }) => (
     <div
       className={cn(
-        ({ light: 'future-light', 'legacy-dark': 'legacy-dark', 'legacy-light': 'legacy-light', wireframe: 'future-wireframe', vertex: 'future-vertex', canvas: 'future-canvas' } as Record<string, string>)[globals.futureTheme] ?? 'future-dark',
-        'min-h-screen w-full bg-future-surface'
+        ({ light: 'future-light', 'core-dark': 'core-dark', 'core-light': 'core-light', wireframe: 'wireframe', vertex: 'vertex', canvas: 'canvas' } as Record<string, string>)[globals.futureTheme] ?? 'future-dark',
+        'min-h-screen w-full bg-surface'
       )}
       style={{ fontFamily: fontFamily.base }}
     >
       <div className="mx-auto max-w-5xl space-y-10 p-8">
         <div>
-          <h1 className="mb-2 text-3xl font-bold tracking-tight text-future-foreground">
+          <h1 className="mb-2 text-3xl font-bold tracking-tight text-foreground">
             Border Radius Tokens
           </h1>
-          <p className="text-sm text-future-foreground-muted">
+          <p className="text-sm text-foreground-muted">
             All border radius values for the Future design language. Most map to Tailwind radius utilities,
             with custom values using bracket notation.
           </p>
diff --git a/packages/apollo-wind/src/foundation/Future/responsive.stories.tsx b/packages/apollo-wind/src/foundation/Future/responsive.stories.tsx
index 3b1832ce6..ca8affcdf 100644
--- a/packages/apollo-wind/src/foundation/Future/responsive.stories.tsx
+++ b/packages/apollo-wind/src/foundation/Future/responsive.stories.tsx
@@ -63,50 +63,50 @@ function ResponsiveTable({ groups }: { groups: ResponsiveGroup[] }) {
   const maxPx = 1920;
 
   return (
-    <div className="overflow-hidden rounded-lg border border-future-border">
+    <div className="overflow-hidden rounded-lg border border-border">
       <table className="w-full text-sm" style={{ fontFamily: fontFamily.base }}>
         <thead>
-          <tr className="border-b border-future-border bg-future-surface-overlay">
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Token</th>
-            <th className="px-4 py-2.5 text-right font-medium text-future-foreground-muted">px</th>
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Usage</th>
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Relative width</th>
+          <tr className="border-b border-border bg-surface-overlay">
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Token</th>
+            <th className="px-4 py-2.5 text-right font-medium text-foreground-muted">px</th>
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Usage</th>
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Relative width</th>
           </tr>
         </thead>
         <tbody>
           {groups.map((group) => (
             <React.Fragment key={group.group}>
-              <tr className="border-b border-future-border bg-future-surface-raised/50">
+              <tr className="border-b border-border bg-surface-raised/50">
                 <td
                   colSpan={4}
-                  className="px-4 py-2 text-xs font-semibold uppercase tracking-wider text-future-foreground-muted"
+                  className="px-4 py-2 text-xs font-semibold uppercase tracking-wider text-foreground-muted"
                 >
                   {group.group}
-                  <span className="ml-2 font-normal normal-case tracking-normal text-future-foreground-subtle">
+                  <span className="ml-2 font-normal normal-case tracking-normal text-foreground-subtle">
                     — {group.description}
                   </span>
                 </td>
               </tr>
               {group.tokens.map((token) => (
-                <tr key={token.token} className="border-b border-future-border-subtle last:border-b-0">
+                <tr key={token.token} className="border-b border-border-subtle last:border-b-0">
                   <td className="px-4 py-2">
-                    <code className="text-xs text-future-accent-foreground" style={{ fontFamily: fontFamily.monospace }}>
+                    <code className="text-xs text-brand-foreground" style={{ fontFamily: fontFamily.monospace }}>
                       {token.token}
                     </code>
                   </td>
                   <td className="px-4 py-2 text-right">
-                    <code className="text-xs tabular-nums text-future-foreground-muted" style={{ fontFamily: fontFamily.monospace }}>
+                    <code className="text-xs tabular-nums text-foreground-muted" style={{ fontFamily: fontFamily.monospace }}>
                       {token.px}
                     </code>
                   </td>
-                  <td className="px-4 py-2 text-future-foreground-muted">{token.usage}</td>
+                  <td className="px-4 py-2 text-foreground-muted">{token.usage}</td>
                   <td className="px-4 py-2">
                     <div className="flex items-center gap-2">
                       <div
-                        className="h-4 rounded bg-future-accent/60"
+                        className="h-4 rounded bg-brand/60"
                         style={{ width: `${(token.px / maxPx) * 100}%`, minWidth: '4px' }}
                       />
-                      <span className="shrink-0 text-[10px] tabular-nums text-future-foreground-subtle" style={{ fontFamily: fontFamily.monospace }}>
+                      <span className="shrink-0 text-[10px] tabular-nums text-foreground-subtle" style={{ fontFamily: fontFamily.monospace }}>
                         {((token.px / maxPx) * 100).toFixed(0)}%
                       </span>
                     </div>
@@ -129,17 +129,17 @@ export const Default: Story = {
   render: (_, { globals }) => (
     <div
       className={cn(
-        ({ light: 'future-light', 'legacy-dark': 'legacy-dark', 'legacy-light': 'legacy-light', wireframe: 'future-wireframe', vertex: 'future-vertex', canvas: 'future-canvas' } as Record<string, string>)[globals.futureTheme] ?? 'future-dark',
-        'min-h-screen w-full bg-future-surface'
+        ({ light: 'future-light', 'core-dark': 'core-dark', 'core-light': 'core-light', wireframe: 'wireframe', vertex: 'vertex', canvas: 'canvas' } as Record<string, string>)[globals.futureTheme] ?? 'future-dark',
+        'min-h-screen w-full bg-surface'
       )}
       style={{ fontFamily: fontFamily.base }}
     >
       <div className="mx-auto max-w-5xl space-y-10 p-8">
         <div>
-          <h1 className="mb-2 text-3xl font-bold tracking-tight text-future-foreground">
+          <h1 className="mb-2 text-3xl font-bold tracking-tight text-foreground">
             Responsive Tokens
           </h1>
-          <p className="text-sm text-future-foreground-muted">
+          <p className="text-sm text-foreground-muted">
             Breakpoints and viewport presets for the Future design language.
             Breakpoints control layout behavior; viewport presets are named widths for testing.
           </p>
diff --git a/packages/apollo-wind/src/foundation/Future/shadows.stories.tsx b/packages/apollo-wind/src/foundation/Future/shadows.stories.tsx
index 988390dc6..6720dabaa 100644
--- a/packages/apollo-wind/src/foundation/Future/shadows.stories.tsx
+++ b/packages/apollo-wind/src/foundation/Future/shadows.stories.tsx
@@ -40,39 +40,39 @@ const shadowTokens: ShadowToken[] = [
 
 function ShadowTable({ tokens }: { tokens: ShadowToken[] }) {
   return (
-    <div className="overflow-hidden rounded-lg border border-future-border">
+    <div className="overflow-hidden rounded-lg border border-border">
       <table className="w-full text-sm" style={{ fontFamily: fontFamily.base }}>
         <thead>
-          <tr className="border-b border-future-border bg-future-surface-overlay">
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Token</th>
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Value</th>
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Tailwind Class</th>
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Usage</th>
-            <th className="px-4 py-2.5 text-center font-medium text-future-foreground-muted">Preview</th>
+          <tr className="border-b border-border bg-surface-overlay">
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Token</th>
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Value</th>
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Tailwind Class</th>
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Usage</th>
+            <th className="px-4 py-2.5 text-center font-medium text-foreground-muted">Preview</th>
           </tr>
         </thead>
         <tbody>
           {tokens.map((token) => (
-            <tr key={token.token} className="border-b border-future-border-subtle last:border-b-0">
+            <tr key={token.token} className="border-b border-border-subtle last:border-b-0">
               <td className="px-4 py-3">
-                <code className="text-xs text-future-accent-foreground" style={{ fontFamily: fontFamily.monospace }}>
+                <code className="text-xs text-brand-foreground" style={{ fontFamily: fontFamily.monospace }}>
                   {token.token}
                 </code>
               </td>
               <td className="max-w-48 px-4 py-3">
-                <code className="break-all text-[10px] text-future-foreground-subtle" style={{ fontFamily: fontFamily.monospace }}>
+                <code className="break-all text-[10px] text-foreground-subtle" style={{ fontFamily: fontFamily.monospace }}>
                   {token.value}
                 </code>
               </td>
               <td className="max-w-48 px-4 py-3">
-                <code className="break-all text-[10px] text-future-foreground-subtle" style={{ fontFamily: fontFamily.monospace }}>
+                <code className="break-all text-[10px] text-foreground-subtle" style={{ fontFamily: fontFamily.monospace }}>
                   {token.twClass}
                 </code>
               </td>
-              <td className="px-4 py-3 text-future-foreground-muted">{token.usage}</td>
+              <td className="px-4 py-3 text-foreground-muted">{token.usage}</td>
               <td className="px-4 py-4">
                 <div
-                  className="mx-auto h-14 w-40 rounded-2xl border border-future-border-subtle bg-future-surface-raised"
+                  className="mx-auto h-14 w-40 rounded-2xl border border-border-subtle bg-surface-raised"
                   style={{ boxShadow: token.value }}
                 />
               </td>
@@ -92,17 +92,17 @@ export const Default: Story = {
   render: (_, { globals }) => (
     <div
       className={cn(
-        ({ light: 'future-light', 'legacy-dark': 'legacy-dark', 'legacy-light': 'legacy-light', wireframe: 'future-wireframe', vertex: 'future-vertex', canvas: 'future-canvas' } as Record<string, string>)[globals.futureTheme] ?? 'future-dark',
-        'min-h-screen w-full bg-future-surface'
+        ({ light: 'future-light', 'core-dark': 'core-dark', 'core-light': 'core-light', wireframe: 'wireframe', vertex: 'vertex', canvas: 'canvas' } as Record<string, string>)[globals.futureTheme] ?? 'future-dark',
+        'min-h-screen w-full bg-surface'
       )}
       style={{ fontFamily: fontFamily.base }}
     >
       <div className="mx-auto max-w-6xl space-y-10 p-8">
         <div>
-          <h1 className="mb-2 text-3xl font-bold tracking-tight text-future-foreground">
+          <h1 className="mb-2 text-3xl font-bold tracking-tight text-foreground">
             Shadow Tokens
           </h1>
-          <p className="text-sm text-future-foreground-muted">
+          <p className="text-sm text-foreground-muted">
             Box shadow values for depth and elevation in the Future design language.
             Shadows are theme-agnostic — the same values apply in both dark and light modes.
           </p>
diff --git a/packages/apollo-wind/src/foundation/Future/spacing.stories.tsx b/packages/apollo-wind/src/foundation/Future/spacing.stories.tsx
index e8b6977b9..d7d5a60cf 100644
--- a/packages/apollo-wind/src/foundation/Future/spacing.stories.tsx
+++ b/packages/apollo-wind/src/foundation/Future/spacing.stories.tsx
@@ -85,54 +85,54 @@ const spacingGroups: SpacingGroup[] = [
 
 function SpacingTable({ groups }: { groups: SpacingGroup[] }) {
   return (
-    <div className="overflow-hidden rounded-lg border border-future-border">
+    <div className="overflow-hidden rounded-lg border border-border">
       <table className="w-full text-sm" style={{ fontFamily: fontFamily.base }}>
         <thead>
-          <tr className="border-b border-future-border bg-future-surface-overlay">
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Token</th>
-            <th className="px-4 py-2.5 text-right font-medium text-future-foreground-muted">px</th>
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Tailwind Class</th>
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Usage</th>
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Preview</th>
+          <tr className="border-b border-border bg-surface-overlay">
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Token</th>
+            <th className="px-4 py-2.5 text-right font-medium text-foreground-muted">px</th>
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Tailwind Class</th>
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Usage</th>
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Preview</th>
           </tr>
         </thead>
         <tbody>
           {groups.map((group) => (
             <React.Fragment key={group.group}>
-              <tr className="border-b border-future-border bg-future-surface-raised/50">
+              <tr className="border-b border-border bg-surface-raised/50">
                 <td
                   colSpan={5}
-                  className="px-4 py-2 text-xs font-semibold uppercase tracking-wider text-future-foreground-muted"
+                  className="px-4 py-2 text-xs font-semibold uppercase tracking-wider text-foreground-muted"
                 >
                   {group.group}
                   {group.description && (
-                    <span className="ml-2 font-normal normal-case tracking-normal text-future-foreground-subtle">
+                    <span className="ml-2 font-normal normal-case tracking-normal text-foreground-subtle">
                       — {group.description}
                     </span>
                   )}
                 </td>
               </tr>
               {group.tokens.map((token) => (
-                <tr key={token.token} className="border-b border-future-border-subtle last:border-b-0">
+                <tr key={token.token} className="border-b border-border-subtle last:border-b-0">
                   <td className="px-4 py-2">
-                    <code className="text-xs text-future-accent-foreground" style={{ fontFamily: fontFamily.monospace }}>
+                    <code className="text-xs text-brand-foreground" style={{ fontFamily: fontFamily.monospace }}>
                       {token.token}
                     </code>
                   </td>
                   <td className="px-4 py-2 text-right">
-                    <code className="text-xs tabular-nums text-future-foreground-muted" style={{ fontFamily: fontFamily.monospace }}>
+                    <code className="text-xs tabular-nums text-foreground-muted" style={{ fontFamily: fontFamily.monospace }}>
                       {token.px}
                     </code>
                   </td>
                   <td className="px-4 py-2">
-                    <code className="text-xs text-future-foreground-subtle" style={{ fontFamily: fontFamily.monospace }}>
+                    <code className="text-xs text-foreground-subtle" style={{ fontFamily: fontFamily.monospace }}>
                       {token.twClass}
                     </code>
                   </td>
-                  <td className="px-4 py-2 text-future-foreground-muted">{token.usage}</td>
+                  <td className="px-4 py-2 text-foreground-muted">{token.usage}</td>
                   <td className="px-4 py-2">
                     <div
-                      className="h-4 rounded bg-future-accent/60"
+                      className="h-4 rounded bg-brand/60"
                       style={{ width: `${Math.min(token.px, 120)}px`, minWidth: token.px > 0 ? '2px' : '0px' }}
                     />
                   </td>
@@ -154,17 +154,17 @@ export const Default: Story = {
   render: (_, { globals }) => (
     <div
       className={cn(
-        ({ light: 'future-light', 'legacy-dark': 'legacy-dark', 'legacy-light': 'legacy-light', wireframe: 'future-wireframe', vertex: 'future-vertex', canvas: 'future-canvas' } as Record<string, string>)[globals.futureTheme] ?? 'future-dark',
-        'min-h-screen w-full bg-future-surface'
+        ({ light: 'future-light', 'core-dark': 'core-dark', 'core-light': 'core-light', wireframe: 'wireframe', vertex: 'vertex', canvas: 'canvas' } as Record<string, string>)[globals.futureTheme] ?? 'future-dark',
+        'min-h-screen w-full bg-surface'
       )}
       style={{ fontFamily: fontFamily.base }}
     >
       <div className="mx-auto max-w-5xl space-y-10 p-8">
         <div>
-          <h1 className="mb-2 text-3xl font-bold tracking-tight text-future-foreground">
+          <h1 className="mb-2 text-3xl font-bold tracking-tight text-foreground">
             Spacing Tokens
           </h1>
-          <p className="text-sm text-future-foreground-muted">
+          <p className="text-sm text-foreground-muted">
             All spacing values used in Future templates. Scale tokens map to Tailwind's built-in spacing utilities.
             Arbitrary values use bracket notation.
           </p>
diff --git a/packages/apollo-wind/src/foundation/Future/strokes.stories.tsx b/packages/apollo-wind/src/foundation/Future/strokes.stories.tsx
index ecf3b003b..594a8f306 100644
--- a/packages/apollo-wind/src/foundation/Future/strokes.stories.tsx
+++ b/packages/apollo-wind/src/foundation/Future/strokes.stories.tsx
@@ -55,40 +55,40 @@ const borderColorTokens: StrokeColorToken[] = [
 
 function BorderWidthTable({ tokens }: { tokens: StrokeWidthToken[] }) {
   return (
-    <div className="overflow-hidden rounded-lg border border-future-border">
+    <div className="overflow-hidden rounded-lg border border-border">
       <table className="w-full text-sm" style={{ fontFamily: fontFamily.base }}>
         <thead>
-          <tr className="border-b border-future-border bg-future-surface-overlay">
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Token</th>
-            <th className="px-4 py-2.5 text-right font-medium text-future-foreground-muted">px</th>
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Tailwind Class</th>
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Usage</th>
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Preview</th>
+          <tr className="border-b border-border bg-surface-overlay">
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Token</th>
+            <th className="px-4 py-2.5 text-right font-medium text-foreground-muted">px</th>
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Tailwind Class</th>
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Usage</th>
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Preview</th>
           </tr>
         </thead>
         <tbody>
           {tokens.map((token) => (
-            <tr key={token.token} className="border-b border-future-border-subtle last:border-b-0">
+            <tr key={token.token} className="border-b border-border-subtle last:border-b-0">
               <td className="px-4 py-2">
-                <code className="text-xs text-future-accent-foreground" style={{ fontFamily: fontFamily.monospace }}>
+                <code className="text-xs text-brand-foreground" style={{ fontFamily: fontFamily.monospace }}>
                   {token.token}
                 </code>
               </td>
               <td className="px-4 py-2 text-right">
-                <code className="text-xs tabular-nums text-future-foreground-muted" style={{ fontFamily: fontFamily.monospace }}>
+                <code className="text-xs tabular-nums text-foreground-muted" style={{ fontFamily: fontFamily.monospace }}>
                   {token.px}
                 </code>
               </td>
               <td className="px-4 py-2">
-                <code className="text-xs text-future-foreground-subtle" style={{ fontFamily: fontFamily.monospace }}>
+                <code className="text-xs text-foreground-subtle" style={{ fontFamily: fontFamily.monospace }}>
                   {token.twClass}
                 </code>
               </td>
-              <td className="px-4 py-2 text-future-foreground-muted">{token.usage}</td>
+              <td className="px-4 py-2 text-foreground-muted">{token.usage}</td>
               <td className="px-4 py-3">
                 <div
-                  className="h-10 w-28 rounded-lg bg-future-surface-raised"
-                  style={{ border: `${token.px}px solid var(--color-future-border)` }}
+                  className="h-10 w-28 rounded-lg bg-surface-raised"
+                  style={{ border: `${token.px}px solid var(--border)` }}
                 />
               </td>
             </tr>
@@ -101,47 +101,47 @@ function BorderWidthTable({ tokens }: { tokens: StrokeWidthToken[] }) {
 
 function BorderColorTable({ tokens }: { tokens: StrokeColorToken[] }) {
   return (
-    <div className="overflow-hidden rounded-lg border border-future-border">
+    <div className="overflow-hidden rounded-lg border border-border">
       <table className="w-full text-sm" style={{ fontFamily: fontFamily.base }}>
         <thead>
-          <tr className="border-b border-future-border bg-future-surface-overlay">
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Token</th>
-            <th className="px-4 py-2.5 text-center font-medium text-future-foreground-muted">Color</th>
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Tailwind Class</th>
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Usage</th>
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Preview</th>
+          <tr className="border-b border-border bg-surface-overlay">
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Token</th>
+            <th className="px-4 py-2.5 text-center font-medium text-foreground-muted">Color</th>
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Tailwind Class</th>
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Usage</th>
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Preview</th>
           </tr>
         </thead>
         <tbody>
           {tokens.map((token) => (
-            <tr key={token.token} className="border-b border-future-border-subtle last:border-b-0">
+            <tr key={token.token} className="border-b border-border-subtle last:border-b-0">
               <td className="px-4 py-2">
-                <code className="text-xs text-future-accent-foreground" style={{ fontFamily: fontFamily.monospace }}>
+                <code className="text-xs text-brand-foreground" style={{ fontFamily: fontFamily.monospace }}>
                   {token.token}
                 </code>
               </td>
               <td className="px-4 py-2">
                 <div className="flex items-center justify-center gap-2">
-                  <div className="h-5 w-5 shrink-0 rounded border border-future-border" style={{ backgroundColor: token.hex }} />
+                  <div className="h-5 w-5 shrink-0 rounded border border-border" style={{ backgroundColor: token.hex }} />
                   <div className="flex flex-col">
-                    <code className="text-xs text-future-foreground-muted" style={{ fontFamily: fontFamily.monospace }}>
+                    <code className="text-xs text-foreground-muted" style={{ fontFamily: fontFamily.monospace }}>
                       {token.hex}
                     </code>
-                    <code className="text-[10px] text-future-accent-foreground/70" style={{ fontFamily: fontFamily.monospace }}>
+                    <code className="text-[10px] text-brand-foreground/70" style={{ fontFamily: fontFamily.monospace }}>
                       {token.twPrimitive}
                     </code>
                   </div>
                 </div>
               </td>
               <td className="px-4 py-2">
-                <code className="text-xs text-future-foreground-subtle" style={{ fontFamily: fontFamily.monospace }}>
+                <code className="text-xs text-foreground-subtle" style={{ fontFamily: fontFamily.monospace }}>
                   {token.twClass}
                 </code>
               </td>
-              <td className="px-4 py-2 text-future-foreground-muted">{token.usage}</td>
+              <td className="px-4 py-2 text-foreground-muted">{token.usage}</td>
               <td className="px-4 py-3">
                 <div
-                  className="h-10 w-28 rounded-lg bg-future-surface-raised"
+                  className="h-10 w-28 rounded-lg bg-surface-raised"
                   style={{ border: `2px solid ${token.hex}` }}
                 />
               </td>
@@ -161,31 +161,31 @@ export const Default: Story = {
   render: (_, { globals }) => (
     <div
       className={cn(
-        ({ light: 'future-light', 'legacy-dark': 'legacy-dark', 'legacy-light': 'legacy-light', wireframe: 'future-wireframe', vertex: 'future-vertex', canvas: 'future-canvas' } as Record<string, string>)[globals.futureTheme] ?? 'future-dark',
-        'min-h-screen w-full bg-future-surface'
+        ({ light: 'future-light', 'core-dark': 'core-dark', 'core-light': 'core-light', wireframe: 'wireframe', vertex: 'vertex', canvas: 'canvas' } as Record<string, string>)[globals.futureTheme] ?? 'future-dark',
+        'min-h-screen w-full bg-surface'
       )}
       style={{ fontFamily: fontFamily.base }}
     >
       <div className="mx-auto max-w-5xl space-y-10 p-8">
         <div>
-          <h1 className="mb-2 text-3xl font-bold tracking-tight text-future-foreground">
+          <h1 className="mb-2 text-3xl font-bold tracking-tight text-foreground">
             Stroke Tokens
           </h1>
-          <p className="text-sm text-future-foreground-muted">
+          <p className="text-sm text-foreground-muted">
             Border widths and border colors for the Future design language.
             Border colors reference Tailwind's Zinc palette (dark theme values shown).
           </p>
         </div>
 
         <div>
-          <h2 className="mb-4 text-xl font-bold tracking-tight text-future-foreground">
+          <h2 className="mb-4 text-xl font-bold tracking-tight text-foreground">
             Border Width
           </h2>
           <BorderWidthTable tokens={borderWidthTokens} />
         </div>
 
         <div>
-          <h2 className="mb-4 text-xl font-bold tracking-tight text-future-foreground">
+          <h2 className="mb-4 text-xl font-bold tracking-tight text-foreground">
             Border Color
           </h2>
           <BorderColorTable tokens={borderColorTokens} />
diff --git a/packages/apollo-wind/src/foundation/Future/theme.stories.tsx b/packages/apollo-wind/src/foundation/Future/theme.stories.tsx
index e20f712fa..79ebac100 100644
--- a/packages/apollo-wind/src/foundation/Future/theme.stories.tsx
+++ b/packages/apollo-wind/src/foundation/Future/theme.stories.tsx
@@ -23,15 +23,15 @@ type Story = StoryObj<typeof meta>;
 // Theme helpers
 // ============================================================================
 
-type ThemeFamily = 'future' | 'legacy';
+type ThemeFamily = 'future' | 'core';
 
 /** Derive the theme family and variant from the Storybook global value */
 function parseThemeGlobal(value: string): { family: ThemeFamily; variant: 'dark' | 'light'; override?: string } {
-  if (value === 'legacy-dark') return { family: 'legacy', variant: 'dark' };
-  if (value === 'legacy-light') return { family: 'legacy', variant: 'light' };
-  if (value === 'wireframe') return { family: 'future', variant: 'light', override: 'future-wireframe' };
-  if (value === 'vertex') return { family: 'future', variant: 'dark', override: 'future-vertex' };
-  if (value === 'canvas') return { family: 'future', variant: 'dark', override: 'future-canvas' };
+  if (value === 'core-dark') return { family: 'core', variant: 'dark' };
+  if (value === 'core-light') return { family: 'core', variant: 'light' };
+  if (value === 'wireframe') return { family: 'future', variant: 'light', override: 'wireframe' };
+  if (value === 'vertex') return { family: 'future', variant: 'dark', override: 'vertex' };
+  if (value === 'canvas') return { family: 'future', variant: 'dark', override: 'canvas' };
   if (value === 'light') return { family: 'future', variant: 'light' };
   return { family: 'future', variant: 'dark' };
 }
@@ -39,8 +39,8 @@ function parseThemeGlobal(value: string): { family: ThemeFamily; variant: 'dark'
 /** Get the CSS class for a given family + variant, respecting demo theme overrides */
 function themeClass(family: ThemeFamily, variant: 'dark' | 'light', override?: string) {
   if (override) return override;
-  return family === 'legacy'
-    ? variant === 'light' ? 'legacy-light' : 'legacy-dark'
+  return family === 'core'
+    ? variant === 'light' ? 'core-light' : 'core-dark'
     : variant === 'light' ? 'future-light' : 'future-dark';
 }
 
@@ -49,7 +49,7 @@ function themeClass(family: ThemeFamily, variant: 'dark' | 'light', override?: s
 // ============================================================================
 
 /** Page chrome uses shadcn bridge tokens (bg-background, text-foreground, etc.)
- *  so they resolve correctly under both .future-* and .legacy-* theme classes. */
+ *  so they resolve correctly under both .future-* and .core-* theme classes. */
 
 function SectionTitle({ children }: { children: React.ReactNode }) {
   return (
@@ -102,49 +102,49 @@ function InlineCode({ children }: { children: React.ReactNode }) {
 
 function FuturePreviewCard({ theme }: { theme: string }) {
   return (
-    <div className="flex flex-col gap-4 rounded-xl border border-future-border-subtle bg-future-surface-raised p-6">
+    <div className="flex flex-col gap-4 rounded-xl border border-border-subtle bg-surface-raised p-6">
       <div className="flex items-center gap-2">
-        <div className="h-3 w-3 rounded-full bg-future-accent" />
-        <span className="text-xs font-semibold uppercase tracking-widest text-future-foreground-muted">
+        <div className="h-3 w-3 rounded-full bg-brand" />
+        <span className="text-xs font-semibold uppercase tracking-widest text-foreground-muted">
           {theme}
         </span>
       </div>
 
       <div className="flex flex-col gap-1">
-        <h3 className="text-lg font-semibold text-future-foreground">Card title</h3>
-        <p className="text-sm text-future-foreground-muted">
+        <h3 className="text-lg font-semibold text-foreground">Card title</h3>
+        <p className="text-sm text-foreground-muted">
           Body text uses the muted foreground token for secondary information and descriptions.
         </p>
       </div>
 
-      <Input placeholder="Search…" className="bg-future-surface-overlay" />
+      <Input placeholder="Search…" className="bg-surface-overlay" />
 
       <div className="flex items-center gap-3">
-        <Button size="sm" className="bg-future-accent text-future-foreground-on-accent hover:bg-future-accent/90">
+        <Button size="sm" className="bg-brand text-foreground-on-accent hover:bg-brand/90">
           Primary
         </Button>
         <Button
           variant="outline"
           size="sm"
-          className="border-future-border bg-future-surface text-future-foreground hover:bg-future-surface-hover"
+          className="border-border bg-surface text-foreground hover:bg-surface-hover"
         >
           Secondary
         </Button>
-        <Button variant="ghost" size="sm" className="text-future-foreground hover:bg-future-surface-hover">
+        <Button variant="ghost" size="sm" className="text-foreground hover:bg-surface-hover">
           Ghost
         </Button>
       </div>
 
       <div className="flex gap-2 pt-2">
         {[
-          { bg: 'bg-future-surface', label: 'surface' },
-          { bg: 'bg-future-surface-raised', label: 'raised' },
-          { bg: 'bg-future-surface-overlay', label: 'overlay' },
-          { bg: 'bg-future-surface-hover', label: 'hover' },
+          { bg: 'bg-surface', label: 'surface' },
+          { bg: 'bg-surface-raised', label: 'raised' },
+          { bg: 'bg-surface-overlay', label: 'overlay' },
+          { bg: 'bg-surface-hover', label: 'hover' },
         ].map((s) => (
           <div key={s.label} className="flex flex-col items-center gap-1">
-            <div className={cn('h-8 w-8 rounded-md border border-future-border', s.bg)} />
-            <span className="text-[10px] text-future-foreground-subtle">{s.label}</span>
+            <div className={cn('h-8 w-8 rounded-md border border-border', s.bg)} />
+            <span className="text-[10px] text-foreground-subtle">{s.label}</span>
           </div>
         ))}
       </div>
@@ -153,54 +153,54 @@ function FuturePreviewCard({ theme }: { theme: string }) {
 }
 
 // ============================================================================
-// Legacy preview card
+// Core preview card
 // ============================================================================
 
-function LegacyPreviewCard({ theme }: { theme: string }) {
+function CorePreviewCard({ theme }: { theme: string }) {
   return (
-    <div className="flex flex-col gap-4 rounded-xl border border-legacy-border-subtle bg-legacy-surface-raised p-6">
+    <div className="flex flex-col gap-4 rounded-xl border border-border-subtle bg-surface-raised p-6">
       <div className="flex items-center gap-2">
-        <div className="h-3 w-3 rounded-full bg-legacy-accent" />
-        <span className="text-xs font-semibold uppercase tracking-widest text-legacy-foreground-muted">
+        <div className="h-3 w-3 rounded-full bg-brand" />
+        <span className="text-xs font-semibold uppercase tracking-widest text-foreground-muted">
           {theme}
         </span>
       </div>
 
       <div className="flex flex-col gap-1">
-        <h3 className="text-lg font-semibold text-legacy-foreground">Card title</h3>
-        <p className="text-sm text-legacy-foreground-muted">
+        <h3 className="text-lg font-semibold text-foreground">Card title</h3>
+        <p className="text-sm text-foreground-muted">
           Body text uses the muted foreground token for secondary information and descriptions.
         </p>
       </div>
 
-      <Input placeholder="Search…" className="border-legacy-border-subtle bg-legacy-surface-overlay text-legacy-foreground placeholder:text-legacy-foreground-subtle" />
+      <Input placeholder="Search…" className="border-border-subtle bg-surface-overlay text-foreground placeholder:text-foreground-subtle" />
 
       <div className="flex items-center gap-3">
-        <Button size="sm" className="bg-legacy-accent text-legacy-foreground-on-accent hover:bg-legacy-accent-hover">
+        <Button size="sm" className="bg-brand text-foreground-on-accent hover:bg-brand-hover">
           Primary
         </Button>
         <Button
           variant="outline"
           size="sm"
-          className="border-legacy-border-subtle bg-legacy-surface text-legacy-foreground hover:bg-legacy-surface-hover"
+          className="border-border-subtle bg-surface text-foreground hover:bg-surface-hover"
         >
           Secondary
         </Button>
-        <Button variant="ghost" size="sm" className="text-legacy-foreground hover:bg-legacy-surface-hover">
+        <Button variant="ghost" size="sm" className="text-foreground hover:bg-surface-hover">
           Ghost
         </Button>
       </div>
 
       <div className="flex gap-2 pt-2">
         {[
-          { bg: 'bg-legacy-surface', label: 'surface' },
-          { bg: 'bg-legacy-surface-raised', label: 'raised' },
-          { bg: 'bg-legacy-surface-overlay', label: 'overlay' },
-          { bg: 'bg-legacy-surface-hover', label: 'hover' },
+          { bg: 'bg-surface', label: 'surface' },
+          { bg: 'bg-surface-raised', label: 'raised' },
+          { bg: 'bg-surface-overlay', label: 'overlay' },
+          { bg: 'bg-surface-hover', label: 'hover' },
         ].map((s) => (
           <div key={s.label} className="flex flex-col items-center gap-1">
-            <div className={cn('h-8 w-8 rounded-md border border-legacy-border', s.bg)} />
-            <span className="text-[10px] text-legacy-foreground-subtle">{s.label}</span>
+            <div className={cn('h-8 w-8 rounded-md border border-border', s.bg)} />
+            <span className="text-[10px] text-foreground-subtle">{s.label}</span>
           </div>
         ))}
       </div>
@@ -216,66 +216,66 @@ const futureTokenGroups = [
   {
     group: 'Surface',
     tokens: [
-      { name: 'future-surface', usage: 'Page / canvas background', dark: '#09090b', darkTw: 'zinc-950', light: '#ffffff', lightTw: 'white' },
-      { name: 'future-surface-raised', usage: 'Cards, panels, overlays', dark: '#18181b', darkTw: 'zinc-900', light: '#fafafa', lightTw: 'zinc-50' },
-      { name: 'future-surface-overlay', usage: 'Inputs, tabs, icon rail', dark: '#27272a', darkTw: 'zinc-800', light: '#f4f4f5', lightTw: 'zinc-100' },
-      { name: 'future-surface-hover', usage: 'Hover, selected nav', dark: '#3f3f46', darkTw: 'zinc-700', light: '#e4e4e7', lightTw: 'zinc-200' },
+      { name: 'surface', usage: 'Page / canvas background', dark: '#09090b', darkTw: 'zinc-950', light: '#ffffff', lightTw: 'white' },
+      { name: 'surface-raised', usage: 'Cards, panels, overlays', dark: '#18181b', darkTw: 'zinc-900', light: '#fafafa', lightTw: 'zinc-50' },
+      { name: 'surface-overlay', usage: 'Inputs, tabs, icon rail', dark: '#27272a', darkTw: 'zinc-800', light: '#f4f4f5', lightTw: 'zinc-100' },
+      { name: 'surface-hover', usage: 'Hover, selected nav', dark: '#3f3f46', darkTw: 'zinc-700', light: '#e4e4e7', lightTw: 'zinc-200' },
     ],
   },
   {
     group: 'Foreground',
     tokens: [
-      { name: 'future-foreground', usage: 'Primary headings', dark: '#fafafa', darkTw: 'zinc-50', light: '#09090b', lightTw: 'zinc-950' },
-      { name: 'future-foreground-muted', usage: 'Nav, secondary UI', dark: '#a1a1aa', darkTw: 'zinc-400', light: '#71717a', lightTw: 'zinc-500' },
-      { name: 'future-foreground-subtle', usage: 'Labels, placeholders', dark: '#71717a', darkTw: 'zinc-500', light: '#a1a1aa', lightTw: 'zinc-400' },
+      { name: 'foreground', usage: 'Primary headings', dark: '#fafafa', darkTw: 'zinc-50', light: '#09090b', lightTw: 'zinc-950' },
+      { name: 'foreground-muted', usage: 'Nav, secondary UI', dark: '#a1a1aa', darkTw: 'zinc-400', light: '#71717a', lightTw: 'zinc-500' },
+      { name: 'foreground-subtle', usage: 'Labels, placeholders', dark: '#71717a', darkTw: 'zinc-500', light: '#a1a1aa', lightTw: 'zinc-400' },
     ],
   },
   {
-    group: 'Accent',
+    group: 'Brand',
     tokens: [
-      { name: 'future-accent', usage: 'Logo, primary buttons, active indicators', dark: '#06b6d4', darkTw: 'cyan-500', light: '#06b6d4', lightTw: 'cyan-500' },
-      { name: 'future-accent-subtle', usage: 'Selected state bg, active nav, status badges', dark: '#083344', darkTw: 'cyan-950', light: '#ecfeff', lightTw: 'cyan-50' },
+      { name: 'brand', usage: 'Logo, primary buttons, active indicators', dark: '#0891b2', darkTw: 'cyan-600', light: '#0891b2', lightTw: 'cyan-600' },
+      { name: 'brand-subtle', usage: 'Selected state bg, active nav, status badges', dark: '#083344', darkTw: 'cyan-950', light: '#ecfeff', lightTw: 'cyan-50' },
     ],
   },
   {
     group: 'Border',
     tokens: [
-      { name: 'future-border', usage: 'Primary borders', dark: '#3f3f46', darkTw: 'zinc-700', light: '#d4d4d8', lightTw: 'zinc-300' },
-      { name: 'future-border-subtle', usage: 'Subtle dividers', dark: '#27272a', darkTw: 'zinc-800', light: '#e4e4e7', lightTw: 'zinc-200' },
+      { name: 'border', usage: 'Primary borders', dark: '#3f3f46', darkTw: 'zinc-700', light: '#d4d4d8', lightTw: 'zinc-300' },
+      { name: 'border-subtle', usage: 'Subtle dividers', dark: '#27272a', darkTw: 'zinc-800', light: '#e4e4e7', lightTw: 'zinc-200' },
     ],
   },
 ];
 
-const legacyTokenGroups = [
+const coreTokenGroups = [
   {
     group: 'Surface',
     tokens: [
-      { name: 'legacy-surface', usage: 'Page / canvas background', dark: '#182027', light: '#ffffff', lightTw: 'white' },
-      { name: 'legacy-surface-raised', usage: 'Cards, panels', dark: '#273139', light: '#ffffff', lightTw: 'white' },
-      { name: 'legacy-surface-overlay', usage: 'Secondary bg, inputs', dark: '#374652', light: '#f4f5f7' },
-      { name: 'legacy-surface-hover', usage: 'Hover states', dark: '#526069', light: '#e9f1fa' },
+      { name: 'surface', usage: 'Page / canvas background', dark: '#182027', light: '#ffffff', lightTw: 'white' },
+      { name: 'surface-raised', usage: 'Cards, panels', dark: '#273139', light: '#ffffff', lightTw: 'white' },
+      { name: 'surface-overlay', usage: 'Secondary bg, inputs', dark: '#374652', light: '#f4f5f7' },
+      { name: 'surface-hover', usage: 'Hover states', dark: '#526069', light: '#e9f1fa' },
     ],
   },
   {
     group: 'Foreground',
     tokens: [
-      { name: 'legacy-foreground', usage: 'Primary text', dark: '#f4f5f7', light: '#273139' },
-      { name: 'legacy-foreground-muted', usage: 'De-emphasized text', dark: '#cfd8dd', light: '#526069' },
-      { name: 'legacy-foreground-subtle', usage: 'Labels, disabled', dark: '#a4b1b8', light: '#8a97a0' },
+      { name: 'foreground', usage: 'Primary text', dark: '#f4f5f7', light: '#273139' },
+      { name: 'foreground-muted', usage: 'De-emphasized text', dark: '#cfd8dd', light: '#526069' },
+      { name: 'foreground-subtle', usage: 'Labels, disabled', dark: '#a4b1b8', light: '#8a97a0' },
     ],
   },
   {
     group: 'Accent',
     tokens: [
-      { name: 'legacy-accent', usage: 'Primary blue', dark: '#66adff', light: '#0067df' },
-      { name: 'legacy-accent-hover', usage: 'Primary hover', dark: '#87bfff', light: '#0056ba' },
+      { name: 'brand', usage: 'Primary blue', dark: '#66adff', light: '#0067df' },
+      { name: 'brand-hover', usage: 'Primary hover', dark: '#87bfff', light: '#0056ba' },
     ],
   },
   {
     group: 'Border',
     tokens: [
-      { name: 'legacy-border', usage: 'Primary borders', dark: '#8a97a0', light: '#a4b1b8' },
-      { name: 'legacy-border-subtle', usage: 'Subtle dividers', dark: '#526069', light: '#cfd8dd' },
+      { name: 'border', usage: 'Primary borders', dark: '#8a97a0', light: '#a4b1b8' },
+      { name: 'border-subtle', usage: 'Subtle dividers', dark: '#526069', light: '#cfd8dd' },
     ],
   },
 ];
@@ -366,10 +366,10 @@ function FutureTabContent() {
       </SectionDescription>
 
       <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-        <div className="future-dark rounded-xl bg-future-surface p-4">
+        <div className="future-dark rounded-xl bg-surface p-4">
           <FuturePreviewCard theme="Dark" />
         </div>
-        <div className="future-light rounded-xl bg-future-surface p-4">
+        <div className="future-light rounded-xl bg-surface p-4">
           <FuturePreviewCard theme="Light" />
         </div>
       </div>
@@ -399,13 +399,13 @@ function FutureTabContent() {
       <div className="flex flex-col gap-4">
         <CodeBlock>{`<!-- Wrap any container with the theme class -->
 <div class="future-dark">
-  <div class="bg-future-surface text-future-foreground">
+  <div class="bg-surface text-foreground">
     Dark themed content
   </div>
 </div>
 
 <div class="future-light">
-  <div class="bg-future-surface text-future-foreground">
+  <div class="bg-surface text-foreground">
     Light themed content
   </div>
 </div>`}</CodeBlock>
@@ -427,43 +427,43 @@ function FutureTabContent() {
         automatically inside any themed container — no extra configuration needed.
       </SectionDescription>
 
-      <CodeBlock>{`/* future-theme.css — shadcn bridge (excerpt) */
+      <CodeBlock>{`/* themes.css — shadcn aliases (excerpt) */
 
 .future-dark {
-  --color-background:   var(--color-future-surface);
-  --color-foreground:   var(--color-future-foreground);
-  --color-primary:      var(--color-future-accent);
-  --color-muted:        var(--color-future-surface-overlay);
-  --color-border:       var(--color-future-border);
-  --color-input:        var(--color-future-border);
-  --color-ring:         var(--color-future-ring);
-  /* … full mapping in future-theme.css */
+  --color-background:   var(--surface);
+  --color-foreground:   var(--foreground);
+  --color-primary:      var(--accent);
+  --color-muted:        var(--surface-overlay);
+  --color-border:       var(--border);
+  --color-input:        var(--border);
+  --color-ring:         var(--ring);
+  /* … full mapping in themes.css */
 }`}</CodeBlock>
     </>
   );
 }
 
 // ============================================================================
-// Tab content — Legacy
+// Tab content — Core
 // ============================================================================
 
-function LegacyTabContent() {
+function CoreTabContent() {
   return (
     <>
       {/* ── Side-by-side preview ───────────────────────────────────────── */}
       <SectionTitle>Theme preview</SectionTitle>
       <SectionDescription>
-        The same component rendered in both Legacy themes. The Legacy design
+        The same component rendered in both Core themes. The Core design
         language uses the apollo-core token set from UiPath&apos;s original
         design system.
       </SectionDescription>
 
       <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-        <div className="legacy-dark rounded-xl bg-legacy-surface p-4">
-          <LegacyPreviewCard theme="Dark" />
+        <div className="core-dark rounded-xl bg-surface p-4">
+          <CorePreviewCard theme="Dark" />
         </div>
-        <div className="legacy-light rounded-xl bg-legacy-surface p-4">
-          <LegacyPreviewCard theme="Light" />
+        <div className="core-light rounded-xl bg-surface p-4">
+          <CorePreviewCard theme="Light" />
         </div>
       </div>
 
@@ -472,41 +472,41 @@ function LegacyTabContent() {
       {/* ── Token overview ─────────────────────────────────────────────── */}
       <SectionTitle>Token overview</SectionTitle>
       <SectionDescription>
-        Key semantic tokens from the Legacy (apollo-core) design system and their
+        Key semantic tokens from the Core (apollo-core) design system and their
         resolved values per theme.
       </SectionDescription>
 
-      <TokenTable groups={legacyTokenGroups} />
+      <TokenTable groups={coreTokenGroups} />
 
       <Divider />
 
       {/* ── How to use ─────────────────────────────────────────────────── */}
       <SectionTitle>How to use</SectionTitle>
       <SectionDescription>
-        Apply <InlineCode>.legacy-dark</InlineCode> or <InlineCode>.legacy-light</InlineCode> to
-        any container. The Legacy theme maps apollo-core token values into scoped
+        Apply <InlineCode>.core-dark</InlineCode> or <InlineCode>.core-light</InlineCode> to
+        any container. The Core theme maps apollo-core token values into scoped
         CSS classes that work at any DOM level — just like the Future theme.
       </SectionDescription>
 
       <div className="flex flex-col gap-4">
         <CodeBlock>{`<!-- Wrap any container with the theme class -->
-<div class="legacy-dark">
-  <div class="bg-legacy-surface text-legacy-foreground">
+<div class="core-dark">
+  <div class="bg-surface text-foreground">
     Dark themed content
   </div>
 </div>
 
-<div class="legacy-light">
-  <div class="bg-legacy-surface text-legacy-foreground">
+<div class="core-light">
+  <div class="bg-surface text-foreground">
     Light themed content
   </div>
 </div>`}</CodeBlock>
 
-        <CodeBlock>{`/* Legacy tokens use the "legacy-" prefix */
-/* bg-legacy-surface, text-legacy-foreground, border-legacy-border, etc. */
+        <CodeBlock>{`/* Core tokens use the same bare names as Future */
+/* bg-surface, text-foreground, border-border, etc. */
 
 /* The shadcn bridge is also included, so shadcn components
-   inherit the correct Legacy colors automatically. */`}</CodeBlock>
+   inherit the correct Core colors automatically. */`}</CodeBlock>
       </div>
 
       <Divider />
@@ -514,22 +514,22 @@ function LegacyTabContent() {
       {/* ── Shadcn bridge ──────────────────────────────────────────────── */}
       <SectionTitle>Shadcn component compatibility</SectionTitle>
       <SectionDescription>
-        Like the Future theme, the Legacy theme includes a shadcn bridge so standard
-        components work automatically. The Legacy bridge maps apollo-core variables
+        Like the Future theme, the Core theme includes a shadcn bridge so standard
+        components work automatically. The Core bridge maps apollo-core variables
         to shadcn expected names.
       </SectionDescription>
 
-      <CodeBlock>{`/* legacy-theme.css — shadcn bridge (excerpt) */
-
-.legacy-dark {
-  --color-background:   var(--color-legacy-surface);
-  --color-foreground:   var(--color-legacy-foreground);
-  --color-primary:      var(--color-legacy-accent);
-  --color-muted:        var(--color-legacy-surface-raised);
-  --color-border:       var(--color-legacy-border-subtle);
-  --color-input:        var(--color-legacy-border-subtle);
-  --color-ring:         var(--color-legacy-ring);
-  /* … full mapping in legacy-theme.css */
+      <CodeBlock>{`/* themes.css — core shadcn aliases (excerpt) */
+
+.core-dark {
+  --color-background:   var(--surface);
+  --color-foreground:   var(--foreground);
+  --color-primary:      var(--accent);
+  --color-muted:        var(--surface-raised);
+  --color-border:       var(--border-subtle);
+  --color-input:        var(--border-subtle);
+  --color-ring:         var(--ring);
+  /* … full mapping in themes.css */
 }`}</CodeBlock>
     </>
   );
@@ -539,7 +539,7 @@ function LegacyTabContent() {
 // Story
 // ============================================================================
 
-const themeTabs = ['Future', 'Legacy'] as const;
+const themeTabs = ['Future', 'Core'] as const;
 
 function ThemePage({ globalTheme }: { globalTheme: string }) {
   const { family } = parseThemeGlobal(globalTheme);
@@ -563,7 +563,7 @@ function ThemePage({ globalTheme }: { globalTheme: string }) {
         <SectionTitle>Theme</SectionTitle>
         <SectionDescription>
           Apollo ships with two design languages — <strong>Future</strong> (the
-          new design direction) and <strong>Legacy</strong> (the original
+          new design direction) and <strong>Core</strong> (the original
           apollo-core tokens). Each provides dark and light variants activated
           via CSS classes. Use the toolbar selector above to switch themes, or
           use the tabs below to explore each design language.
@@ -587,7 +587,7 @@ function ThemePage({ globalTheme }: { globalTheme: string }) {
         </div>
 
         <div className="pt-6">
-          {activeTab === 'future' ? <FutureTabContent /> : <LegacyTabContent />}
+          {activeTab === 'future' ? <FutureTabContent /> : <CoreTabContent />}
         </div>
 
         <Divider />
@@ -603,15 +603,15 @@ function ThemePage({ globalTheme }: { globalTheme: string }) {
         <CodeBlock>{`/* Example: creating a new theme variant */
 
 .my-brand-dark {
-  --color-future-surface:        #0f172a;
-  --color-future-surface-raised: #1e293b;
-  --color-future-foreground:     #f8fafc;
-  --color-future-accent:         #8b5cf6;
+  --surface:        #0f172a;
+  --surface-raised: #1e293b;
+  --foreground:     #f8fafc;
+  --accent:         #8b5cf6;
   /* … define all token variables */
 
   /* shadcn bridge */
-  --color-background: var(--color-future-surface);
-  --color-foreground: var(--color-future-foreground);
+  --color-background: var(--surface);
+  --color-foreground: var(--foreground);
   /* … */
 }`}</CodeBlock>
       </div>
diff --git a/packages/apollo-wind/src/foundation/Future/themes.css b/packages/apollo-wind/src/foundation/Future/themes.css
new file mode 100644
index 000000000..a89105751
--- /dev/null
+++ b/packages/apollo-wind/src/foundation/Future/themes.css
@@ -0,0 +1,645 @@
+/**
+ * Apollo Wind — Theme Variables
+ *
+ * All theme definitions for the design system. Each theme is scoped to a CSS
+ * class applied to a parent element (e.g. `.future-dark`, `.core-light`).
+ * Templates apply the class at their root automatically via the `theme` prop.
+ *
+ * Follows the shadcn convention: bare vars for definitions, --color-* prefix
+ * added via @theme for Tailwind utility generation.
+ *   bg-surface, text-foreground, border-border, bg-brand, etc.
+ *
+ * Theme families:
+ *   Future  — .future-dark, .future-light (default design language)
+ *   Core    — .core-dark, .core-light   (apollo-core design language)
+ *   Demo    — .wireframe, .vertex, .canvas
+ */
+
+/* ============================================================================
+ * FUTURE — Dark theme (default for Future templates)
+ * ============================================================================ */
+
+.future-dark {
+  /* ── Surfaces ─────────────────────────────────────────────────────────── */
+  --surface: #09090b;             /* zinc-950  — page / canvas */
+  --surface-raised: #18181b;      /* zinc-900  — cards, overlays, panels */
+  --surface-overlay: #27272a;     /* zinc-800  — panels, inputs, tabs */
+  --surface-hover: #3f3f46;       /* zinc-700  — hover, selected nav */
+  --surface-muted: #71717a;       /* zinc-500  — badges, indicators */
+  --surface-inverse: #fafafa;     /* zinc-50   — buttons on dark bg */
+
+  /* ── Brand ──────────────────────────────────────────────────────────── */
+  --brand: #0891b2;               /* cyan-600  — logo, submit, run */
+  --brand-subtle: #083344;        /* cyan-950  — status badge, active nav */
+
+  /* ── Foreground (text / icons) ────────────────────────────────────────── */
+  --foreground: #fafafa;          /* zinc-50   — primary headings */
+  --foreground-secondary: #f4f4f5; /* zinc-100  — body, messages */
+  --foreground-hover: #d4d4d8;    /* zinc-300  — hover states */
+  --foreground-muted: #a1a1aa;    /* zinc-400  — nav, secondary UI */
+  --foreground-subtle: #71717a;   /* zinc-500  — labels, muted */
+  --foreground-inverse: #09090b;  /* zinc-950  — icons on light bg */
+  --foreground-on-accent: #fafafa; /* zinc-50   — text on accent bg */
+  --foreground-accent: #0891b2;   /* cyan-600  — accent text */
+  --foreground-accent-muted: #22d3ee; /* cyan-400 — muted accent text */
+
+  /* ── Borders ──────────────────────────────────────────────────────────── */
+  --border: #3f3f46;              /* zinc-700  — primary borders */
+  --border-subtle: #27272a;       /* zinc-800  — subtle dividers */
+  --border-muted: #18181b;        /* zinc-900  — content borders */
+  --border-deep: #09090b;         /* zinc-950  — nested containers */
+  --border-inverse: #e4e4e7;      /* zinc-200  — borders on inverse bg */
+  --border-hover: #52525b;        /* zinc-600  — border hover state */
+
+  /* ── Ring ──────────────────────────────────────────────────────────────── */
+  --ring: #52525b;                /* zinc-600  — selection ring */
+
+  /* ── Gradients ───────────────────────────────────────────────────────── */
+  --gradient-1: linear-gradient(127deg, #3f3f47 25.94%, #27272a 74.06%); /* zinc-700 → zinc-800 */
+  --gradient-2: linear-gradient(128deg, #09090b 1.26%, #18181b 52.69%); /* zinc-950 → zinc-900 */
+  --gradient-3: linear-gradient(128deg, #3f3f47 1.26%, #18181b 52.69%); /* zinc-700 → zinc-900 */
+  --gradient-4: linear-gradient(180deg, #18181b 0%, #27272a 100%); /* zinc-900 → zinc-800 */
+  --gradient-5: linear-gradient(180deg, #09090b 0%, #18181b 100%); /* zinc-950 → zinc-900 */
+  --gradient-6: linear-gradient(106deg, #0092b8 28.08%, #053345 71.92%); /* cyan-600 → cyan-950 */
+
+  /* ── shadcn aliases — maps to standard names for shadcn component compat ── */
+  --background: var(--surface);
+  --card: var(--surface-raised);
+  --card-foreground: var(--foreground);
+  --popover: var(--surface-raised);
+  --popover-foreground: var(--foreground);
+  --primary: var(--brand);
+  --primary-foreground: var(--foreground-on-accent);
+  --secondary: var(--surface-overlay);
+  --secondary-foreground: var(--foreground);
+  --muted: var(--surface-overlay);
+  --muted-foreground: var(--foreground-muted);
+  --accent: var(--surface-hover);
+  --accent-foreground: var(--foreground);
+  --destructive: #ef4444;
+  --destructive-foreground: #fafafa; /* zinc-50 — text on destructive bg */
+  --border-de-emp: var(--border-subtle);
+  --input: var(--border);
+}
+
+/* ============================================================================
+ * FUTURE — Light theme
+ * ============================================================================ */
+
+.future-light {
+  /* ── Surfaces ─────────────────────────────────────────────────────────── */
+  --surface: #fafafa;             /* zinc-50   — page / canvas */
+  --surface-raised: #f4f4f5;      /* zinc-100  — cards, overlays, panels */
+  --surface-overlay: #e4e4e7;     /* zinc-200  — panels, inputs, tabs */
+  --surface-hover: #d4d4d8;       /* zinc-300  — hover, selected nav */
+  --surface-muted: #a1a1aa;       /* zinc-400  — badges, indicators */
+  --surface-inverse: #09090b;     /* zinc-950  — buttons on light bg */
+
+  /* ── Brand ──────────────────────────────────────────────────────────── */
+  --brand: #0891b2;               /* cyan-600  — logo, submit, run */
+  --brand-subtle: #ecfeff;        /* cyan-50   — status badge, active nav */
+
+  /* ── Foreground (text / icons) ────────────────────────────────────────── */
+  --foreground: #09090b;          /* zinc-950  — primary headings */
+  --foreground-secondary: #18181b; /* zinc-900  — body, messages */
+  --foreground-hover: #52525b;    /* zinc-600  — hover states */
+  --foreground-muted: #71717a;    /* zinc-500  — nav, secondary UI */
+  --foreground-subtle: #a1a1aa;   /* zinc-400  — labels, muted */
+  --foreground-inverse: #fafafa;  /* zinc-50   — icons on dark bg */
+  --foreground-on-accent: #fafafa; /* zinc-50   — text on accent bg */
+  --foreground-accent: #0891b2;   /* cyan-600  — accent text */
+  --foreground-accent-muted: #0891b2; /* cyan-600 — muted accent text */
+
+  /* ── Borders ──────────────────────────────────────────────────────────── */
+  --border: #d4d4d8;              /* zinc-300  — primary borders */
+  --border-subtle: #e4e4e7;       /* zinc-200  — subtle dividers */
+  --border-muted: #f4f4f5;        /* zinc-100  — content borders */
+  --border-deep: #fafafa;         /* zinc-50   — nested containers */
+  --border-inverse: #3f3f46;      /* zinc-700  — borders on inverse bg */
+  --border-hover: #a1a1aa;        /* zinc-400  — border hover state */
+
+  /* ── Ring ──────────────────────────────────────────────────────────────── */
+  --ring: #a1a1aa;                /* zinc-400  — selection ring */
+
+  /* ── Gradients ───────────────────────────────────────────────────────── */
+  --gradient-1: linear-gradient(127deg, #e4e4e7 25.94%, #f4f4f5 74.06%); /* zinc-200 → zinc-100 */
+  --gradient-2: linear-gradient(128deg, #fafafa 1.26%, #fafafa 52.69%); /* zinc-50 → zinc-50 */
+  --gradient-3: linear-gradient(128deg, #e4e4e7 1.26%, #fafafa 52.69%); /* zinc-200 → zinc-50 */
+  --gradient-4: linear-gradient(180deg, #fafafa 0%, #f4f4f5 100%); /* zinc-50 → zinc-100 */
+  --gradient-5: linear-gradient(180deg, #fafafa 0%, #fafafa 100%); /* zinc-50 → zinc-50 */
+  --gradient-6: linear-gradient(106deg, #22d3ee 28.08%, #cffafe 71.92%); /* cyan-400 → cyan-100 */
+
+  /* ── shadcn aliases ──────────────────────────────────────────────────── */
+  --background: var(--surface);
+  --card: var(--surface-raised);
+  --card-foreground: var(--foreground);
+  --popover: var(--surface-raised);
+  --popover-foreground: var(--foreground);
+  --primary: var(--brand);
+  --primary-foreground: var(--foreground-on-accent);
+  --secondary: var(--surface-overlay);
+  --secondary-foreground: var(--foreground);
+  --muted: var(--surface-overlay);
+  --muted-foreground: var(--foreground-muted);
+  --accent: var(--surface-hover);
+  --accent-foreground: var(--foreground);
+  --destructive: #ef4444;
+  --destructive-foreground: #fafafa; /* zinc-50 — text on destructive bg */
+  --border-de-emp: var(--border-subtle);
+  --input: var(--border);
+}
+
+/* ============================================================================
+ * CORE — Dark theme (apollo-core design language)
+ *
+ * Source values from @uipath/apollo-core/tokens/css/theme-variables.css.
+ * ============================================================================ */
+
+.core-dark {
+  /* ── Surfaces ─────────────────────────────────────────────────────────── */
+  --surface: #182027;             /* page / canvas */
+  --surface-raised: #273139;      /* cards, panels */
+  --surface-overlay: #374652;     /* inputs, tabs, hover */
+  --surface-hover: #526069;       /* hover states */
+  --surface-muted: #8a97a0;       /* badges, indicators */
+  --surface-inverse: #f8f9fa;     /* inverse bg */
+  --surface-disabled: #273139;    /* disabled elements */
+  --surface-selected: #374652;    /* selected items */
+
+  /* ── Brand / Primary ─────────────────────────────────────────────────── */
+  --brand: #66adff;               /* primary blue */
+  --brand-hover: #87bfff;         /* primary hover */
+  --brand-lighter: #00489d;       /* lighter variant */
+  --brand-darker: #badaff;        /* darker variant */
+
+  /* ── Foreground (text / icons) ────────────────────────────────────────── */
+  --foreground: #f4f5f7;          /* primary text */
+  --foreground-emp: #f8f9fa;      /* emphasized text */
+  --foreground-muted: #cfd8dd;    /* de-emphasized text */
+  --foreground-subtle: #a4b1b8;   /* labels, disabled */
+  --foreground-inverse: #182027;  /* text on light bg */
+  --foreground-link: #66adff;     /* link text */
+  --foreground-on-accent: #182027; /* text on accent bg */
+
+  /* ── Borders ──────────────────────────────────────────────────────────── */
+  --border: #8a97a0;              /* primary borders */
+  --border-subtle: #526069;       /* subtle dividers */
+  --border-disabled: #526069;     /* disabled borders */
+  --border-grid: #273139;         /* grid borders */
+
+  /* ── Status ──────────────────────────────────────────────────────────── */
+  --error: #ff8484;
+  --success: #74c94b;
+  --warning: #ffbb27;
+  --info: #42a1ff;
+
+  /* ── Ring / Focus ────────────────────────────────────────────────────── */
+  --ring: #66adff;
+  --logo: #ffffff;
+
+  /* ── Bridge — defines shared token names using core values, so
+       components built with bg-surface, text-foreground-secondary, etc.
+       resolve correctly under core themes ────────────────────────────── */
+  --brand-subtle: var(--brand-lighter);
+  --foreground-secondary: var(--foreground-emp);
+  --foreground-hover: var(--foreground-muted);
+  --foreground-accent: var(--brand);
+  --foreground-accent-muted: var(--brand-hover);
+  --border-muted: var(--border-grid);
+  --border-deep: var(--border-grid);
+  --border-inverse: var(--border);
+  --border-hover: var(--border);
+
+  /* ── shadcn aliases — maps to standard names for shadcn component compat ── */
+  --background: var(--surface);
+  --card: var(--surface-raised);
+  --card-foreground: var(--foreground);
+  --popover: var(--surface-raised);
+  --popover-foreground: var(--foreground);
+  --primary: var(--brand);
+  --primary-foreground: var(--foreground-on-accent);
+  --secondary: var(--surface-overlay);
+  --secondary-foreground: var(--foreground-muted);
+  --muted: var(--surface-raised);
+  --muted-foreground: var(--foreground-muted);
+  --accent: var(--surface-selected);
+  --accent-foreground: var(--foreground-emp);
+  --destructive: var(--error);
+  --border-de-emp: var(--border-subtle);
+  --input: var(--border-subtle);
+
+  color-scheme: dark;
+}
+
+/* ============================================================================
+ * CORE — Light theme
+ *
+ * Source values from @uipath/apollo-core/tokens/css/theme-variables.css.
+ * ============================================================================ */
+
+.core-light {
+  /* ── Surfaces ─────────────────────────────────────────────────────────── */
+  --surface: #ffffff;             /* page / canvas */
+  --surface-raised: #ffffff;      /* cards (white on white) */
+  --surface-overlay: #f4f5f7;     /* secondary bg, inputs */
+  --surface-hover: #e9f1fa;       /* hover states */
+  --surface-muted: #cfd8dd;       /* badges, indicators */
+  --surface-inverse: #182027;     /* inverse bg */
+  --surface-disabled: #ecedee;    /* disabled elements */
+  --surface-selected: #e9f1fa;    /* selected items */
+
+  /* ── Brand / Primary ─────────────────────────────────────────────────── */
+  --brand: #0067df;               /* primary blue */
+  --brand-hover: #0056ba;         /* primary hover */
+  --brand-lighter: #badaff;       /* lighter variant */
+  --brand-darker: #00489d;        /* darker variant */
+
+  /* ── Foreground (text / icons) ────────────────────────────────────────── */
+  --foreground: #273139;          /* primary text */
+  --foreground-emp: #182027;      /* emphasized text */
+  --foreground-muted: #526069;    /* de-emphasized text */
+  --foreground-subtle: #8a97a0;   /* labels, disabled */
+  --foreground-inverse: #f8f9fa;  /* text on dark bg */
+  --foreground-link: #0067df;     /* link text */
+  --foreground-on-accent: #f8f9fa; /* text on accent bg */
+
+  /* ── Borders ──────────────────────────────────────────────────────────── */
+  --border: #a4b1b8;              /* primary borders */
+  --border-subtle: #cfd8dd;       /* subtle dividers */
+  --border-disabled: #cfd8dd;     /* disabled borders */
+  --border-grid: #f4f5f7;         /* grid borders */
+
+  /* ── Status ──────────────────────────────────────────────────────────── */
+  --error: #a6040a;
+  --success: #038108;
+  --warning: #9e6100;
+  --info: #1665b3;
+
+  /* ── Ring / Focus ────────────────────────────────────────────────────── */
+  --ring: #0067df;
+  --logo: #fa4616;
+
+  /* ── Bridge — defines shared token names using core values, so
+       components built with bg-surface, text-foreground-secondary, etc.
+       resolve correctly under core themes ────────────────────────────── */
+  --brand-subtle: var(--brand-lighter);
+  --foreground-secondary: var(--foreground-emp);
+  --foreground-hover: var(--foreground-muted);
+  --foreground-accent: var(--brand);
+  --foreground-accent-muted: var(--brand-hover);
+  --border-muted: var(--border-grid);
+  --border-deep: var(--border-grid);
+  --border-inverse: var(--border);
+  --border-hover: var(--border);
+
+  /* ── shadcn aliases — maps to standard names for shadcn component compat ── */
+  --background: var(--surface);
+  --card: var(--surface-raised);
+  --card-foreground: var(--foreground);
+  --popover: var(--surface-raised);
+  --popover-foreground: var(--foreground);
+  --primary: var(--brand);
+  --primary-foreground: var(--foreground-on-accent);
+  --secondary: var(--surface-overlay);
+  --secondary-foreground: var(--foreground-muted);
+  --muted: var(--surface-overlay);
+  --muted-foreground: var(--foreground-muted);
+  --accent: var(--surface-selected);
+  --accent-foreground: var(--foreground-emp);
+  --destructive: var(--error);
+  --border-de-emp: var(--border-subtle);
+  --input: var(--border-subtle);
+
+  color-scheme: light;
+}
+
+/* ============================================================================
+ * DEMO — Wireframe theme (low-fidelity prototyping)
+ *
+ * Intentionally flat, no accent color, dashed borders. Designed to look like
+ * a quick sketch or blueprint so stakeholders focus on layout, not polish.
+ * ============================================================================ */
+
+.wireframe {
+  /* ── Surfaces ─────────────────────────────────────────────────────────── */
+  --surface: #ffffff;
+  --surface-raised: #f9fafb;
+  --surface-overlay: #f3f4f6;
+  --surface-hover: #e5e7eb;
+  --surface-muted: #d1d5db;
+  --surface-inverse: #374151;
+
+  /* ── Brand (deliberately muted — no brand color) ─────────────────────── */
+  --brand: #6b7280;
+  --brand-subtle: #f3f4f6;
+
+  /* ── Foreground ─────────────────────────────────────────────────────── */
+  --foreground: #1f2937;
+  --foreground-secondary: #374151;
+  --foreground-hover: #4b5563;
+  --foreground-muted: #6b7280;
+  --foreground-subtle: #9ca3af;
+  --foreground-inverse: #ffffff;
+  --foreground-on-accent: #ffffff;
+  --foreground-accent: #4b5563;
+  --foreground-accent-muted: #6b7280;
+
+  /* ── Borders (dashed via utility, but color defined here) ───────────── */
+  --border: #d1d5db;
+  --border-subtle: #e5e7eb;
+  --border-muted: #f3f4f6;
+  --border-deep: #f9fafb;
+  --border-inverse: #4b5563;
+  --border-hover: #9ca3af;
+
+  /* ── Ring ────────────────────────────────────────────────────────────── */
+  --ring: #9ca3af;
+
+  /* ── Gradients (flat — no gradients in wireframe mode) ──────────────── */
+  --gradient-1: none;
+  --gradient-2: none;
+  --gradient-3: none;
+  --gradient-4: none;
+  --gradient-5: none;
+  --gradient-6: none;
+
+  /* ── shadcn aliases ──────────────────────────────────────────────────── */
+  --background: var(--surface);
+  --card: var(--surface-raised);
+  --card-foreground: var(--foreground);
+  --popover: var(--surface-raised);
+  --popover-foreground: var(--foreground);
+  --primary: var(--brand);
+  --primary-foreground: var(--foreground-on-accent);
+  --secondary: var(--surface-overlay);
+  --secondary-foreground: var(--foreground);
+  --muted: var(--surface-overlay);
+  --muted-foreground: var(--foreground-muted);
+  --accent: var(--surface-hover);
+  --accent-foreground: var(--foreground);
+  --destructive: #9ca3af;
+  --destructive-foreground: #ffffff;
+  --border-de-emp: var(--border-subtle);
+  --input: var(--border);
+}
+
+/* Wireframe overrides: dashed borders everywhere, reduced rounding */
+.wireframe *,
+.wireframe *::before,
+.wireframe *::after {
+  border-style: dashed !important;
+  box-shadow: none !important;
+}
+
+/* ============================================================================
+ * DEMO — Vertex theme (Apollo Vertex dark palette)
+ *
+ * Translates the Vertex design language (oklch-based, teal/blue accent)
+ * into token slots so templates render with the Vertex look & feel.
+ * Source: apps/apollo-vertex/app/themes.ts  (default.config.dark)
+ * ============================================================================ */
+
+.vertex {
+  /* ── Surfaces ─────────────────────────────────────────────────────────── */
+  --surface: oklch(0.21 0.03 258.5);           /* deep blue-grey — page / canvas */
+  --surface-raised: oklch(0.233 0.036 254.7);   /* slightly lighter — cards, panels */
+  --surface-overlay: oklch(0.2648 0.0329 254.38); /* muted — inputs, tabs */
+  --surface-hover: oklch(0.3927 0.0289 240.86); /* secondary — hover, selected nav */
+  --surface-muted: oklch(0.72 0.03 254.38);     /* muted-foreground — badges, indicators */
+  --surface-inverse: oklch(0.985 0 0);           /* foreground — buttons on dark bg */
+
+  /* ── Brand ──────────────────────────────────────────────────────────── */
+  --brand: oklch(0.692 0.1119 207.06);           /* primary — teal */
+  --brand-subtle: oklch(0.166 0.0283 203.34);    /* primary-foreground — deep teal bg */
+
+  /* ── Foreground (text / icons) ────────────────────────────────────────── */
+  --foreground: oklch(0.985 0 0);                /* foreground — primary text */
+  --foreground-secondary: oklch(0.9525 0.011 225.98); /* card-foreground — body text */
+  --foreground-hover: oklch(0.9416 0.0145 244.72); /* secondary-foreground — hover states */
+  --foreground-muted: oklch(0.72 0.03 254.38);  /* muted-foreground — nav, secondary UI */
+  --foreground-subtle: oklch(0.4594 0.028 264.25); /* muted-foreground (light ref) — labels */
+  --foreground-inverse: oklch(0.21 0.03 258.5); /* background — icons on light bg */
+  --foreground-on-accent: oklch(0.166 0.0283 203.34); /* primary-foreground — text on accent */
+  --foreground-accent: oklch(0.692 0.1119 207.06); /* primary — accent text */
+  --foreground-accent-muted: oklch(0.573 0.114 211.4); /* accent — muted accent text */
+
+  /* ── Borders ──────────────────────────────────────────────────────────── */
+  --border: oklch(0.3068 0.0426 258.29);         /* border */
+  --border-subtle: oklch(0.2648 0.0329 254.38);  /* muted — subtle dividers */
+  --border-muted: oklch(0.233 0.036 254.7);      /* card — content borders */
+  --border-deep: oklch(0.21 0.03 258.5);         /* background — nested containers */
+  --border-inverse: oklch(0.9229 0.0065 252.13); /* light border ref */
+  --border-hover: oklch(0.3927 0.0289 240.86);   /* secondary — border hover */
+
+  /* ── Ring ────────────────────────────────────────────────────────────── */
+  --ring: oklch(0.692 0.1119 207.06);            /* ring — teal focus ring */
+
+  /* ── Gradients (subtle depth) ──────────────────────────────────────── */
+  --gradient-1: linear-gradient(127deg, oklch(0.3927 0.0289 240.86) 25.94%, oklch(0.2648 0.0329 254.38) 74.06%);
+  --gradient-2: linear-gradient(128deg, oklch(0.21 0.03 258.5) 1.26%, oklch(0.233 0.036 254.7) 52.69%);
+  --gradient-3: linear-gradient(128deg, oklch(0.3927 0.0289 240.86) 1.26%, oklch(0.233 0.036 254.7) 52.69%);
+  --gradient-4: linear-gradient(180deg, oklch(0.233 0.036 254.7) 0%, oklch(0.2648 0.0329 254.38) 100%);
+  --gradient-5: linear-gradient(180deg, oklch(0.21 0.03 258.5) 0%, oklch(0.233 0.036 254.7) 100%);
+  --gradient-6: linear-gradient(106deg, oklch(0.692 0.1119 207.06) 28.08%, oklch(0.166 0.0283 203.34) 71.92%);
+
+  /* ── shadcn aliases ──────────────────────────────────────────────────── */
+  --background: var(--surface);
+  --card: var(--surface-raised);
+  --card-foreground: var(--foreground);
+  --popover: var(--surface-raised);
+  --popover-foreground: var(--foreground);
+  --primary: var(--brand);
+  --primary-foreground: var(--foreground-on-accent);
+  --secondary: var(--surface-overlay);
+  --secondary-foreground: var(--foreground);
+  --muted: var(--surface-overlay);
+  --muted-foreground: var(--foreground-muted);
+  --accent: var(--surface-hover);
+  --accent-foreground: var(--foreground);
+  --destructive: oklch(0.6542 0.2321 28.66);
+  --destructive-foreground: oklch(1 0 89.88);
+  --border-de-emp: var(--border-subtle);
+  --input: var(--border);
+}
+
+/* ============================================================================
+ * DEMO — Canvas theme (Apollo React / MUI dark palette)
+ *
+ * Maps the classic apollo-react dark theme (apollo-core darkPalette) into
+ * token slots. Dark blue-grey base with UiPath orange accent.
+ * Source: packages/apollo-core/src/tokens/jss/palette.ts  (darkPalette)
+ * ============================================================================ */
+
+.canvas {
+  /* ── Surfaces ─────────────────────────────────────────────────────────── */
+  --surface: #182027;             /* ColorBackgroundDark — page / canvas */
+  --surface-raised: #273139;      /* ColorBackgroundSecondaryDark — cards, panels */
+  --surface-overlay: #334049;     /* mid-tone — inputs, tabs */
+  --surface-hover: #3e4e58;       /* hover, selected nav */
+  --surface-muted: #8a97a0;       /* ColorBorderDark — badges, indicators */
+  --surface-inverse: #f8f9fa;     /* ColorBackgroundInverseDark — buttons on dark bg */
+
+  /* ── Brand (UiPath orange) ───────────────────────────────────────────── */
+  --brand: #fa4616;               /* ColorOrange500 — primary brand */
+  --brand-subtle: #3c2a1e;        /* dark warm tone — active nav bg */
+
+  /* ── Foreground (text / icons) ────────────────────────────────────────── */
+  --foreground: #f8f9fa;          /* ColorForegroundEmpDark — primary text */
+  --foreground-secondary: #f4f5f7; /* ColorForegroundDark — body text */
+  --foreground-hover: #cfd8dd;    /* ColorForegroundDeEmpDark — hover states */
+  --foreground-muted: #a4b1b8;    /* ColorForegroundDisableDark — nav, secondary UI */
+  --foreground-subtle: #8a97a0;   /* ColorBorderDark — labels, muted */
+  --foreground-inverse: #182027;  /* ColorForegroundInverseDark — icons on light bg */
+  --foreground-on-accent: #ffffff; /* white — text on accent bg */
+  --foreground-accent: #fa4616;   /* ColorOrange500 — accent text */
+  --foreground-accent-muted: #ff8f70; /* ColorSelectionDark — muted accent text */
+
+  /* ── Borders ──────────────────────────────────────────────────────────── */
+  --border: #526069;              /* ColorBorderDeEmpDark */
+  --border-subtle: #3e4e58;       /* mid border */
+  --border-muted: #273139;        /* ColorBackgroundSecondaryDark — content borders */
+  --border-deep: #182027;         /* ColorBackgroundDark — nested containers */
+  --border-inverse: #cfd8dd;      /* ColorForegroundDeEmpDark — borders on inverse bg */
+  --border-hover: #8a97a0;        /* ColorBorderDark — border hover */
+
+  /* ── Ring ────────────────────────────────────────────────────────────── */
+  --ring: #fa4616;                /* orange focus ring */
+
+  /* ── Gradients ────────────────────────────────────────────────────────── */
+  --gradient-1: linear-gradient(127deg, #3e4e58 25.94%, #334049 74.06%);
+  --gradient-2: linear-gradient(128deg, #182027 1.26%, #273139 52.69%);
+  --gradient-3: linear-gradient(128deg, #3e4e58 1.26%, #273139 52.69%);
+  --gradient-4: linear-gradient(180deg, #273139 0%, #334049 100%);
+  --gradient-5: linear-gradient(180deg, #182027 0%, #273139 100%);
+  --gradient-6: linear-gradient(106deg, #fa4616 28.08%, #3c2a1e 71.92%);
+
+  /* ── shadcn aliases ──────────────────────────────────────────────────── */
+  --background: var(--surface);
+  --card: var(--surface-raised);
+  --card-foreground: var(--foreground);
+  --popover: var(--surface-raised);
+  --popover-foreground: var(--foreground);
+  --primary: var(--brand);
+  --primary-foreground: var(--foreground-on-accent);
+  --secondary: var(--surface-overlay);
+  --secondary-foreground: var(--foreground);
+  --muted: var(--surface-overlay);
+  --muted-foreground: var(--foreground-muted);
+  --accent: var(--surface-hover);
+  --accent-foreground: var(--foreground);
+  --destructive: #ef4444;
+  --destructive-foreground: #ffffff;
+  --border-de-emp: var(--border-subtle);
+  --input: var(--border);
+}
+
+/* ============================================================================
+ * Register tokens with Tailwind 4
+ *
+ * The @theme inline block tells Tailwind to generate utility classes for
+ * each variable. E.g. --color-surface generates:
+ *   bg-surface, text-surface, border-surface,
+ *   from-surface, to-surface, ring-surface, etc.
+ * ============================================================================ */
+
+@theme inline {
+  /* ── Design system tokens ──────────────────────────────────────────── */
+
+  /* Surfaces */
+  --color-surface: var(--surface);
+  --color-surface-raised: var(--surface-raised);
+  --color-surface-overlay: var(--surface-overlay);
+  --color-surface-hover: var(--surface-hover);
+  --color-surface-muted: var(--surface-muted);
+  --color-surface-inverse: var(--surface-inverse);
+
+  /* Brand */
+  --color-brand: var(--brand);
+  --color-brand-subtle: var(--brand-subtle);
+
+  /* Foreground */
+  --color-foreground-secondary: var(--foreground-secondary);
+  --color-foreground-hover: var(--foreground-hover);
+  --color-foreground-muted: var(--foreground-muted);
+  --color-foreground-subtle: var(--foreground-subtle);
+  --color-foreground-inverse: var(--foreground-inverse);
+  --color-foreground-on-accent: var(--foreground-on-accent);
+  --color-foreground-accent: var(--foreground-accent);
+  --color-foreground-accent-muted: var(--foreground-accent-muted);
+
+  /* Borders */
+  --color-border-subtle: var(--border-subtle);
+  --color-border-muted: var(--border-muted);
+  --color-border-deep: var(--border-deep);
+  --color-border-inverse: var(--border-inverse);
+  --color-border-hover: var(--border-hover);
+
+  /* ── shadcn standard tokens ────────────────────────────────────────── */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-border-de-emp: var(--border-de-emp);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* ── Core-specific tokens ─────────────────────────────────────────── */
+  --color-surface-disabled: var(--surface-disabled);
+  --color-surface-selected: var(--surface-selected);
+  --color-brand-hover: var(--brand-hover);
+  --color-brand-lighter: var(--brand-lighter);
+  --color-brand-darker: var(--brand-darker);
+  --color-foreground-emp: var(--foreground-emp);
+  --color-foreground-link: var(--foreground-link);
+  --color-border-disabled: var(--border-disabled);
+  --color-border-grid: var(--border-grid);
+  --color-error: var(--error);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-info: var(--info);
+  --color-logo: var(--logo);
+}
+
+/* ============================================================================
+ * Gradient utilities
+ *
+ * Gradients can't be registered via @theme (they aren't single color values),
+ * so we define them as @utility rules. Usage: bg-gradient-1, etc.
+ * ============================================================================ */
+
+@utility bg-gradient-1 {
+  background-image: var(--gradient-1);
+}
+
+@utility bg-gradient-2 {
+  background-image: var(--gradient-2);
+}
+
+@utility bg-gradient-3 {
+  background-image: var(--gradient-3);
+}
+
+@utility bg-gradient-4 {
+  background-image: var(--gradient-4);
+}
+
+@utility bg-gradient-5 {
+  background-image: var(--gradient-5);
+}
+
+@utility bg-gradient-6 {
+  background-image: var(--gradient-6);
+}
diff --git a/packages/apollo-wind/src/foundation/Future/types.ts b/packages/apollo-wind/src/foundation/Future/types.ts
index 686f1c9f6..ce38cebba 100644
--- a/packages/apollo-wind/src/foundation/Future/types.ts
+++ b/packages/apollo-wind/src/foundation/Future/types.ts
@@ -14,10 +14,10 @@
  *
  * - `'dark'`         — Future dark theme (default)
  * - `'light'`        — Future light theme
- * - `'legacy-dark'`  — Legacy dark theme (backward-compatible)
- * - `'legacy-light'` — Legacy light theme (backward-compatible)
+ * - `'core-dark'`  — Core dark theme (apollo-core design language)
+ * - `'core-light'` — Core light theme (apollo-core design language)
  * - `'wireframe'`    — Demo: low-fidelity wireframe theme (may be removed)
  * - `'vertex'`       — Demo: Apollo Vertex dark palette (may be removed)
  * - `'canvas'`       — Demo: Apollo React / MUI dark palette (may be removed)
  */
-export type FutureTheme = 'dark' | 'light' | 'legacy-dark' | 'legacy-light' | 'wireframe' | 'vertex' | 'canvas';
+export type FutureTheme = 'dark' | 'light' | 'core-dark' | 'core-light' | 'wireframe' | 'vertex' | 'canvas';
diff --git a/packages/apollo-wind/src/foundation/Future/typography.stories.tsx b/packages/apollo-wind/src/foundation/Future/typography.stories.tsx
index 18621a3ed..7822db48a 100644
--- a/packages/apollo-wind/src/foundation/Future/typography.stories.tsx
+++ b/packages/apollo-wind/src/foundation/Future/typography.stories.tsx
@@ -108,54 +108,54 @@ const previewTexts: Record<string, string> = {
 
 function TypographyTable({ groups }: { groups: TypographyGroup[] }) {
   return (
-    <div className="overflow-hidden rounded-lg border border-future-border">
+    <div className="overflow-hidden rounded-lg border border-border">
       <table className="w-full text-sm" style={{ fontFamily: fontFamily.base }}>
         <thead>
-          <tr className="border-b border-future-border bg-future-surface-overlay">
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Token</th>
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Value</th>
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Tailwind Class</th>
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Usage</th>
-            <th className="px-4 py-2.5 text-left font-medium text-future-foreground-muted">Preview</th>
+          <tr className="border-b border-border bg-surface-overlay">
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Token</th>
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Value</th>
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Tailwind Class</th>
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Usage</th>
+            <th className="px-4 py-2.5 text-left font-medium text-foreground-muted">Preview</th>
           </tr>
         </thead>
         <tbody>
           {groups.map((group) => (
             <React.Fragment key={group.group}>
-              <tr className="border-b border-future-border bg-future-surface-raised/50">
+              <tr className="border-b border-border bg-surface-raised/50">
                 <td
                   colSpan={5}
-                  className="px-4 py-2 text-xs font-semibold uppercase tracking-wider text-future-foreground-muted"
+                  className="px-4 py-2 text-xs font-semibold uppercase tracking-wider text-foreground-muted"
                 >
                   {group.group}
                   {group.description && (
-                    <span className="ml-2 font-normal normal-case tracking-normal text-future-foreground-subtle">
+                    <span className="ml-2 font-normal normal-case tracking-normal text-foreground-subtle">
                       — {group.description}
                     </span>
                   )}
                 </td>
               </tr>
               {group.tokens.map((token) => (
-                <tr key={`${group.group}-${token.token}`} className="border-b border-future-border-subtle last:border-b-0">
+                <tr key={`${group.group}-${token.token}`} className="border-b border-border-subtle last:border-b-0">
                   <td className="px-4 py-2">
-                    <code className="text-xs text-future-accent-foreground" style={{ fontFamily: fontFamily.monospace }}>
+                    <code className="text-xs text-brand-foreground" style={{ fontFamily: fontFamily.monospace }}>
                       {token.token}
                     </code>
                   </td>
                   <td className="px-4 py-2">
-                    <code className="text-xs tabular-nums text-future-foreground-muted" style={{ fontFamily: fontFamily.monospace }}>
+                    <code className="text-xs tabular-nums text-foreground-muted" style={{ fontFamily: fontFamily.monospace }}>
                       {token.value}
                     </code>
                   </td>
                   <td className="px-4 py-2">
-                    <code className="text-xs text-future-foreground-subtle" style={{ fontFamily: fontFamily.monospace }}>
+                    <code className="text-xs text-foreground-subtle" style={{ fontFamily: fontFamily.monospace }}>
                       {token.twClass}
                     </code>
                   </td>
-                  <td className="px-4 py-2 text-future-foreground-muted">{token.usage}</td>
+                  <td className="px-4 py-2 text-foreground-muted">{token.usage}</td>
                   <td className="px-4 py-2">
                     <span
-                      className="text-future-foreground-secondary"
+                      className="text-foreground-secondary"
                       style={group.previewStyle?.(token.value)}
                     >
                       {group.group === 'Font Family' && token.value === 'JetBrains Mono'
@@ -183,17 +183,17 @@ export const Default: Story = {
   render: (_, { globals }) => (
     <div
       className={cn(
-        ({ light: 'future-light', 'legacy-dark': 'legacy-dark', 'legacy-light': 'legacy-light', wireframe: 'future-wireframe', vertex: 'future-vertex', canvas: 'future-canvas' } as Record<string, string>)[globals.futureTheme] ?? 'future-dark',
-        'min-h-screen w-full bg-future-surface'
+        ({ light: 'future-light', 'core-dark': 'core-dark', 'core-light': 'core-light', wireframe: 'wireframe', vertex: 'vertex', canvas: 'canvas' } as Record<string, string>)[globals.futureTheme] ?? 'future-dark',
+        'min-h-screen w-full bg-surface'
       )}
       style={{ fontFamily: fontFamily.base }}
     >
       <div className="mx-auto max-w-6xl space-y-10 p-8">
         <div>
-          <h1 className="mb-2 text-3xl font-bold tracking-tight text-future-foreground">
+          <h1 className="mb-2 text-3xl font-bold tracking-tight text-foreground">
             Typography Tokens
           </h1>
-          <p className="text-sm text-future-foreground-muted">
+          <p className="text-sm text-foreground-muted">
             All typography values for the Future design language. Inter is the primary typeface.
             Values map to Tailwind utilities or bracket notation for custom sizes.
           </p>
diff --git a/packages/apollo-wind/src/foundation/Legacy/colors.stories.tsx b/packages/apollo-wind/src/foundation/colors.stories.tsx
similarity index 100%
rename from packages/apollo-wind/src/foundation/Legacy/colors.stories.tsx
rename to packages/apollo-wind/src/foundation/colors.stories.tsx
diff --git a/packages/apollo-wind/src/foundation/Legacy/icons.stories.tsx b/packages/apollo-wind/src/foundation/icons.stories.tsx
similarity index 100%
rename from packages/apollo-wind/src/foundation/Legacy/icons.stories.tsx
rename to packages/apollo-wind/src/foundation/icons.stories.tsx
diff --git a/packages/apollo-wind/src/foundation/Legacy/spacing.stories.tsx b/packages/apollo-wind/src/foundation/spacing.stories.tsx
similarity index 100%
rename from packages/apollo-wind/src/foundation/Legacy/spacing.stories.tsx
rename to packages/apollo-wind/src/foundation/spacing.stories.tsx
diff --git a/packages/apollo-wind/src/foundation/Legacy/typography.stories.tsx b/packages/apollo-wind/src/foundation/typography.stories.tsx
similarity index 100%
rename from packages/apollo-wind/src/foundation/Legacy/typography.stories.tsx
rename to packages/apollo-wind/src/foundation/typography.stories.tsx
diff --git a/packages/apollo-wind/src/getting-started/getting-started.stories.tsx b/packages/apollo-wind/src/getting-started/getting-started.stories.tsx
index b84b71943..a3ddc2308 100644
--- a/packages/apollo-wind/src/getting-started/getting-started.stories.tsx
+++ b/packages/apollo-wind/src/getting-started/getting-started.stories.tsx
@@ -14,11 +14,11 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 function resolveThemeClass(value: string) {
-  if (value === 'legacy-dark') return 'legacy-dark';
-  if (value === 'legacy-light') return 'legacy-light';
-  if (value === 'wireframe') return 'future-wireframe';
-  if (value === 'vertex') return 'future-vertex';
-  if (value === 'canvas') return 'future-canvas';
+  if (value === 'core-dark') return 'core-dark';
+  if (value === 'core-light') return 'core-light';
+  if (value === 'wireframe') return 'wireframe';
+  if (value === 'vertex') return 'vertex';
+  if (value === 'canvas') return 'canvas';
   if (value === 'light') return 'future-light';
   return 'future-dark';
 }
diff --git a/packages/apollo-wind/src/getting-started/prototyping.stories.tsx b/packages/apollo-wind/src/getting-started/prototyping.stories.tsx
index 00ae97b86..8d2618a83 100644
--- a/packages/apollo-wind/src/getting-started/prototyping.stories.tsx
+++ b/packages/apollo-wind/src/getting-started/prototyping.stories.tsx
@@ -22,11 +22,11 @@ type Story = StoryObj<typeof meta>;
 // ============================================================================
 
 function resolveThemeClass(value: string) {
-  if (value === 'legacy-dark') return 'legacy-dark';
-  if (value === 'legacy-light') return 'legacy-light';
-  if (value === 'wireframe') return 'future-wireframe';
-  if (value === 'vertex') return 'future-vertex';
-  if (value === 'canvas') return 'future-canvas';
+  if (value === 'core-dark') return 'core-dark';
+  if (value === 'core-light') return 'core-light';
+  if (value === 'wireframe') return 'wireframe';
+  if (value === 'vertex') return 'vertex';
+  if (value === 'canvas') return 'canvas';
   if (value === 'light') return 'future-light';
   return 'future-dark';
 }
@@ -139,8 +139,8 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { cn } from '@/lib';
 
 ## Theming
-Apply theme class to root: future-dark | future-light | legacy-dark | legacy-light
-Semantic tokens: bg-future-surface, text-future-foreground, border-future-border
+Apply theme class to root: future-dark | future-light | core-dark | core-light
+Semantic tokens: bg-surface, text-foreground, border-border
 Bridge tokens (cross-theme): bg-background, bg-card, text-foreground, text-muted-foreground
 
 ## Components (with inline usage examples)
@@ -186,7 +186,7 @@ Component Library
 
 Theming
   CSS Custom Properties — semantic design tokens
-  Two theme families: Future (Dark / Light) and Legacy (Dark / Light)
+  Two theme families: Future (Dark / Light) and Core (Dark / Light)
   Themes are applied via CSS class scoping — no runtime theme provider needed
 
 Documentation
@@ -398,7 +398,7 @@ function UseFigmaTab() {
           </p>
           <div className="mt-3 space-y-2 text-sm leading-6">
             <div>
-              <span className="font-medium text-foreground">Legacy products: </span>
+              <span className="font-medium text-foreground">Core products: </span>
               <a
                 href="https://www.figma.com/design/l1I5dUQFDxqPYo322wEpXx/Apollo--Components-?node-id=504-2&p=f&t=O0aRtoGuv83eV7od-0"
                 target="_blank"
@@ -841,7 +841,7 @@ function BestPracticesContent() {
           <li>
             <span className="font-medium text-foreground">Reference tokens, not colors.</span>
             <br />
-            Say "use bg-future-surface-raised for the card background" instead of "make the
+            Say "use bg-surface-raised for the card background" instead of "make the
             background dark gray." This ensures theme consistency.
           </li>
           <li>
@@ -868,8 +868,8 @@ function BestPracticesContent() {
             <span className="font-medium text-foreground">Don't use raw Tailwind colors.</span>
             <br />
             Avoid <InlineCode>bg-zinc-900</InlineCode>, <InlineCode>text-gray-400</InlineCode>, etc.
-            Always use semantic tokens (<InlineCode>bg-future-surface</InlineCode>,{' '}
-            <InlineCode>text-future-foreground-muted</InlineCode>).
+            Always use semantic tokens (<InlineCode>bg-surface</InlineCode>,{' '}
+            <InlineCode>text-foreground-muted</InlineCode>).
           </li>
           <li>
             <span className="font-medium text-foreground">Don't install extra UI libraries.</span>
@@ -1021,7 +1021,7 @@ function WhatNotInScopeContent() {
                 <br />
                 Since CSS variables won't resolve, include the actual color values in your prompt.
                 For example: "Use dark gray backgrounds (#09090b for surface, #18181b for raised
-                surfaces) and cyan accents (#06b6d4) to match Apollo's future-dark theme."
+                surfaces) and cyan accents (#0891b2) to match Apollo's future-dark theme."
               </li>
               <li>
                 <span className="font-medium text-foreground">Treat output as a starting point.</span>
diff --git a/packages/apollo-wind/src/styles/tailwind.css b/packages/apollo-wind/src/styles/tailwind.css
index 97b97c5f7..f97549fd9 100644
--- a/packages/apollo-wind/src/styles/tailwind.css
+++ b/packages/apollo-wind/src/styles/tailwind.css
@@ -9,7 +9,6 @@
  */
 
 @import "./tailwind.consumer.css";
-@import "../foundation/Future/future-theme.css";
-@import "../foundation/Future/legacy-theme.css";
+@import "../foundation/Future/themes.css";
 
 @source "../**/*.{js,jsx,ts,tsx}";
\ No newline at end of file
diff --git a/packages/apollo-wind/src/templates/Admin/admin.stories.tsx b/packages/apollo-wind/src/templates/Admin/admin.stories.tsx
index 36e08d9f5..b34f892f7 100644
--- a/packages/apollo-wind/src/templates/Admin/admin.stories.tsx
+++ b/packages/apollo-wind/src/templates/Admin/admin.stories.tsx
@@ -88,12 +88,12 @@ function AdminFilter({
 }) {
   return (
     <div className="flex items-center gap-1.5 text-sm">
-      <span className="text-future-foreground-muted">{label}:</span>
+      <span className="text-foreground-muted">{label}:</span>
       <Select value={value} onValueChange={onValueChange}>
-        <SelectTrigger className="h-7 w-auto gap-1 border-0 bg-transparent px-1 font-medium text-future-foreground shadow-none">
+        <SelectTrigger className="h-7 w-auto gap-1 border-0 bg-transparent px-1 font-medium text-foreground shadow-none">
           <SelectValue />
         </SelectTrigger>
-        <SelectContent className="border-future-border bg-future-surface-overlay text-future-foreground">
+        <SelectContent className="border-border bg-surface-overlay text-foreground">
           {options.map((option) => (
             <SelectItem key={option.value} value={option.value}>
               {option.label}
@@ -136,8 +136,8 @@ function AdminPagination({
   const pageNumbers = getPageNumbers();
 
   return (
-    <div className="flex items-center justify-between border-t border-future-border-subtle px-6 py-3">
-      <span className="text-sm text-future-foreground-muted">
+    <div className="flex items-center justify-between border-t border-border-subtle px-6 py-3">
+      <span className="text-sm text-foreground-muted">
         {start} - {end} / {total}
       </span>
       <div className="flex items-center gap-4">
@@ -147,7 +147,7 @@ function AdminPagination({
               <Button
                 size="icon"
                 variant="ghost"
-                className="text-future-foreground-muted hover:bg-future-surface-hover hover:text-future-foreground"
+                className="text-foreground-muted hover:bg-surface-hover hover:text-foreground"
                 disabled={page === 1}
                 onClick={() => onPageChange?.(1)}
               >
@@ -158,7 +158,7 @@ function AdminPagination({
               <PaginationPrevious
                 onClick={() => page > 1 && onPageChange?.(page - 1)}
                 className={cn(
-                  'text-future-foreground-muted hover:bg-future-surface-hover hover:text-future-foreground',
+                  'text-foreground-muted hover:bg-surface-hover hover:text-foreground',
                   page === 1 && 'pointer-events-none opacity-50'
                 )}
               />
@@ -171,7 +171,7 @@ function AdminPagination({
                 <React.Fragment key={pageNum}>
                   {showEllipsis && (
                     <PaginationItem>
-                      <PaginationEllipsis className="text-future-foreground-muted" />
+                      <PaginationEllipsis className="text-foreground-muted" />
                     </PaginationItem>
                   )}
                   <PaginationItem>
@@ -180,8 +180,8 @@ function AdminPagination({
                       isActive={page === pageNum}
                       className={cn(
                         page === pageNum
-                          ? 'bg-future-accent text-future-foreground-on-accent'
-                          : 'text-future-foreground-muted hover:bg-future-surface-hover hover:text-future-foreground'
+                          ? 'bg-brand text-foreground-on-accent'
+                          : 'text-foreground-muted hover:bg-surface-hover hover:text-foreground'
                       )}
                     >
                       {pageNum}
@@ -195,7 +195,7 @@ function AdminPagination({
               <PaginationNext
                 onClick={() => page < totalPages && onPageChange?.(page + 1)}
                 className={cn(
-                  'text-future-foreground-muted hover:bg-future-surface-hover hover:text-future-foreground',
+                  'text-foreground-muted hover:bg-surface-hover hover:text-foreground',
                   page === totalPages && 'pointer-events-none opacity-50'
                 )}
               />
@@ -204,7 +204,7 @@ function AdminPagination({
               <Button
                 size="icon"
                 variant="ghost"
-                className="text-future-foreground-muted hover:bg-future-surface-hover hover:text-future-foreground"
+                className="text-foreground-muted hover:bg-surface-hover hover:text-foreground"
                 disabled={page === totalPages}
                 onClick={() => onPageChange?.(totalPages)}
               >
@@ -216,12 +216,12 @@ function AdminPagination({
 
         {onPageSizeChange && (
           <div className="flex items-center gap-2 text-sm">
-            <span className="text-future-foreground-muted">Items</span>
+            <span className="text-foreground-muted">Items</span>
             <Select value={String(pageSize)} onValueChange={(v) => onPageSizeChange(Number(v))}>
-              <SelectTrigger className="h-8 w-16 border-future-border bg-future-surface-overlay text-future-foreground">
+              <SelectTrigger className="h-8 w-16 border-border bg-surface-overlay text-foreground">
                 <SelectValue />
               </SelectTrigger>
-              <SelectContent className="border-future-border bg-future-surface-overlay text-future-foreground">
+              <SelectContent className="border-border bg-surface-overlay text-foreground">
                 <SelectItem value="10">10</SelectItem>
                 <SelectItem value="25">25</SelectItem>
                 <SelectItem value="50">50</SelectItem>
@@ -269,7 +269,7 @@ function AdminMenuNav() {
           <Button
             key={i}
             variant="ghost"
-            className="w-full justify-start gap-3 text-future-foreground-muted hover:bg-future-surface-hover hover:text-future-foreground"
+            className="w-full justify-start gap-3 text-foreground-muted hover:bg-surface-hover hover:text-foreground"
           >
             {item.icon}
             <span className="truncate">{item.label}</span>
@@ -439,11 +439,11 @@ const adminTreeDataExpanded: TreeViewItem[] = [
 ];
 
 const adminTreeIconMap: TreeViewIconMap = {
-  region: <Globe className="h-4 w-4 text-future-foreground-muted" />,
-  enterprise: <Folder className="h-4 w-4 text-future-foreground-muted" />,
-  folder: <Code className="h-4 w-4 text-future-foreground-muted" />,
-  tenant: <Globe className="h-4 w-4 text-future-foreground-accent/80" />,
-  service: <Code className="h-4 w-4 text-future-foreground-accent/80" />,
+  region: <Globe className="h-4 w-4 text-foreground-muted" />,
+  enterprise: <Folder className="h-4 w-4 text-foreground-muted" />,
+  folder: <Code className="h-4 w-4 text-foreground-muted" />,
+  tenant: <Globe className="h-4 w-4 text-foreground-accent/80" />,
+  service: <Code className="h-4 w-4 text-foreground-accent/80" />,
 };
 
 type UserRow = {
@@ -681,16 +681,16 @@ function AdminPageDemo({ theme }: { theme: string }) {
   );
 
   const themeClass =
-    theme === 'legacy-dark'
-      ? 'legacy-dark'
-      : theme === 'legacy-light'
-        ? 'legacy-light'
+    theme === 'core-dark'
+      ? 'core-dark'
+      : theme === 'core-light'
+        ? 'core-light'
         : theme === 'wireframe'
-          ? 'future-wireframe'
+          ? 'wireframe'
           : theme === 'vertex'
-            ? 'future-vertex'
+            ? 'vertex'
             : theme === 'canvas'
-              ? 'future-canvas'
+              ? 'canvas'
               : theme === 'light'
                 ? 'future-light'
                 : 'future-dark';
@@ -702,8 +702,8 @@ function AdminPageDemo({ theme }: { theme: string }) {
       header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
       cell: ({ row }) => (
         <div className="flex items-center gap-2">
-          <Users className="h-4 w-4 text-future-foreground-muted" />
-          <span className="text-future-foreground">{row.original.name}</span>
+          <Users className="h-4 w-4 text-foreground-muted" />
+          <span className="text-foreground">{row.original.name}</span>
         </div>
       ),
     },
@@ -711,35 +711,35 @@ function AdminPageDemo({ theme }: { theme: string }) {
       accessorKey: 'email',
       header: ({ column }) => <DataTableColumnHeader column={column} title="Email" />,
       cell: ({ row }) => (
-        <span className="text-future-foreground-muted">{row.original.email || '—'}</span>
+        <span className="text-foreground-muted">{row.original.email || '—'}</span>
       ),
     },
     {
       accessorKey: 'role',
       header: ({ column }) => (
         <DataTableColumnHeader column={column} title="Roles">
-          <HelpCircle className="ml-1 h-3.5 w-3.5 text-future-foreground-muted" />
+          <HelpCircle className="ml-1 h-3.5 w-3.5 text-foreground-muted" />
         </DataTableColumnHeader>
       ),
-      cell: ({ row }) => <span className="text-future-foreground-muted">{row.original.role}</span>,
+      cell: ({ row }) => <span className="text-foreground-muted">{row.original.role}</span>,
     },
     {
       id: 'actions',
       cell: () => (
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button size="icon" variant="ghost" className="text-future-foreground-muted hover:bg-future-surface-hover hover:text-future-foreground">
+            <Button size="icon" variant="ghost" className="text-foreground-muted hover:bg-surface-hover hover:text-foreground">
               <MoreHorizontal />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent
             align="end"
-            className={cn(themeClass, 'border-future-border bg-future-surface-overlay')}
+            className={cn(themeClass, 'border-border bg-surface-overlay')}
           >
-            <DropdownMenuItem className="text-future-foreground-muted focus:bg-future-surface-hover focus:text-future-foreground">
+            <DropdownMenuItem className="text-foreground-muted focus:bg-surface-hover focus:text-foreground">
               Edit
             </DropdownMenuItem>
-            <DropdownMenuItem className="text-future-foreground-muted focus:bg-future-surface-hover focus:text-future-foreground">
+            <DropdownMenuItem className="text-foreground-muted focus:bg-surface-hover focus:text-foreground">
               Remove
             </DropdownMenuItem>
           </DropdownMenuContent>
@@ -755,7 +755,7 @@ function AdminPageDemo({ theme }: { theme: string }) {
       menuContent={<AdminMenuNav />}
       sidebar={
         <AdminSidebar width={320}>
-          <div className="flex shrink-0 items-center gap-2 border-b border-future-border-subtle px-4 py-3 text-sm font-medium text-future-foreground">
+          <div className="flex shrink-0 items-center gap-2 border-b border-border-subtle px-4 py-3 text-sm font-medium text-foreground">
             <svg
               viewBox="0 0 24 24"
               className="h-5 w-5"
@@ -794,10 +794,10 @@ function AdminPageDemo({ theme }: { theme: string }) {
         onTabChange={setActiveTab}
         actions={
           <>
-            <Button variant="ghost" className="text-future-foreground-accent hover:bg-transparent hover:text-future-foreground">
+            <Button variant="ghost" className="text-foreground-accent hover:bg-transparent hover:text-foreground">
               Check access
             </Button>
-            <Button className="bg-future-accent text-future-foreground-on-accent hover:bg-future-accent/90">
+            <Button className="bg-brand text-foreground-on-accent hover:bg-brand/90">
               Assign role
             </Button>
           </>
@@ -806,7 +806,7 @@ function AdminPageDemo({ theme }: { theme: string }) {
 
       <AdminToolbar
         actions={
-          <Button size="icon" variant="ghost" className="text-future-foreground-muted hover:bg-future-surface-hover hover:text-future-foreground">
+          <Button size="icon" variant="ghost" className="text-foreground-muted hover:bg-surface-hover hover:text-foreground">
             <RefreshCw />
           </Button>
         }
@@ -1385,16 +1385,16 @@ function DataManagementDemo({ theme }: { theme: string }) {
   const [isCreateDialogOpen, setIsCreateDialogOpen] = React.useState(false);
 
   const themeClass =
-    theme === 'legacy-dark'
-      ? 'legacy-dark'
-      : theme === 'legacy-light'
-        ? 'legacy-light'
+    theme === 'core-dark'
+      ? 'core-dark'
+      : theme === 'core-light'
+        ? 'core-light'
         : theme === 'wireframe'
-          ? 'future-wireframe'
+          ? 'wireframe'
           : theme === 'vertex'
-            ? 'future-vertex'
+            ? 'vertex'
             : theme === 'canvas'
-              ? 'future-canvas'
+              ? 'canvas'
               : theme === 'light'
                 ? 'future-light'
                 : 'future-dark';
@@ -1432,8 +1432,8 @@ function DataManagementDemo({ theme }: { theme: string }) {
       header: ({ column }) => <DataTableColumnHeader column={column} title="Product" />,
       cell: ({ row }) => (
         <div className="flex flex-col">
-          <span className="font-medium text-future-foreground">{row.original.name}</span>
-          <span className="text-xs text-future-foreground-muted">{row.original.sku}</span>
+          <span className="font-medium text-foreground">{row.original.name}</span>
+          <span className="text-xs text-foreground-muted">{row.original.sku}</span>
         </div>
       ),
     },
@@ -1441,7 +1441,7 @@ function DataManagementDemo({ theme }: { theme: string }) {
       accessorKey: 'category',
       header: ({ column }) => <DataTableColumnHeader column={column} title="Category" />,
       cell: ({ row }) => (
-        <span className="text-future-foreground-muted">{row.getValue('category')}</span>
+        <span className="text-foreground-muted">{row.getValue('category')}</span>
       ),
     },
     {
@@ -1450,7 +1450,7 @@ function DataManagementDemo({ theme }: { theme: string }) {
       cell: ({ row }) => {
         const price = parseFloat(row.getValue('price'));
         return (
-          <span className="text-future-foreground">
+          <span className="text-foreground">
             {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(price)}
           </span>
         );
@@ -1463,7 +1463,7 @@ function DataManagementDemo({ theme }: { theme: string }) {
         const stock = row.getValue('stock') as number;
         return (
           <span
-            className={stock === 0 ? 'font-medium text-red-400' : 'text-future-foreground-muted'}
+            className={stock === 0 ? 'font-medium text-red-400' : 'text-foreground-muted'}
           >
             {stock === 0 ? 'Out of stock' : stock}
           </span>
@@ -1478,7 +1478,7 @@ function DataManagementDemo({ theme }: { theme: string }) {
         const colors: Record<string, string> = {
           active: 'bg-green-500/10 text-green-400',
           draft: 'bg-yellow-500/10 text-yellow-400',
-          archived: 'bg-future-surface-hover text-future-foreground-muted',
+          archived: 'bg-surface-hover text-foreground-muted',
         };
         return (
           <span
@@ -1493,7 +1493,7 @@ function DataManagementDemo({ theme }: { theme: string }) {
       accessorKey: 'createdAt',
       header: ({ column }) => <DataTableColumnHeader column={column} title="Created" />,
       cell: ({ row }) => (
-        <span className="text-future-foreground-muted">{row.getValue('createdAt')}</span>
+        <span className="text-foreground-muted">{row.getValue('createdAt')}</span>
       ),
     },
     {
@@ -1501,22 +1501,22 @@ function DataManagementDemo({ theme }: { theme: string }) {
       cell: () => (
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button size="icon" variant="ghost" className="text-future-foreground-muted hover:bg-future-surface-hover hover:text-future-foreground">
+            <Button size="icon" variant="ghost" className="text-foreground-muted hover:bg-surface-hover hover:text-foreground">
               <MoreHorizontal />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent
             align="end"
-            className={cn(themeClass, 'border-future-border bg-future-surface-overlay')}
+            className={cn(themeClass, 'border-border bg-surface-overlay')}
           >
-            <DropdownMenuItem className="text-future-foreground-muted focus:bg-future-surface-hover focus:text-future-foreground">
+            <DropdownMenuItem className="text-foreground-muted focus:bg-surface-hover focus:text-foreground">
               Edit
             </DropdownMenuItem>
-            <DropdownMenuItem className="text-future-foreground-muted focus:bg-future-surface-hover focus:text-future-foreground">
+            <DropdownMenuItem className="text-foreground-muted focus:bg-surface-hover focus:text-foreground">
               Duplicate
             </DropdownMenuItem>
-            <DropdownMenuSeparator className="bg-future-border-subtle" />
-            <DropdownMenuItem className="text-red-400 focus:bg-future-surface-hover focus:text-red-300">
+            <DropdownMenuSeparator className="bg-border-subtle" />
+            <DropdownMenuItem className="text-red-400 focus:bg-surface-hover focus:text-red-300">
               Delete
             </DropdownMenuItem>
           </DropdownMenuContent>
@@ -1528,20 +1528,20 @@ function DataManagementDemo({ theme }: { theme: string }) {
   return (
     <AdminTemplate theme={theme} title="Data Management" menuContent={<AdminMenuNav />}>
       {/* Page header with actions */}
-      <div className="flex items-center justify-between border-b border-future-border-subtle px-6 py-4">
-        <h1 className="text-xl font-semibold text-future-foreground">Products</h1>
+      <div className="flex items-center justify-between border-b border-border-subtle px-6 py-4">
+        <h1 className="text-xl font-semibold text-foreground">Products</h1>
           <div className="flex items-center gap-2">
-            <Button variant="outline" className="border-future-border bg-future-surface text-future-foreground-muted hover:border-future-border-hover hover:bg-future-surface hover:text-future-foreground">
+            <Button variant="outline" className="border-border bg-surface text-foreground-muted hover:border-border-hover hover:bg-surface hover:text-foreground">
               <Upload />
               Import
             </Button>
-            <Button variant="outline" className="border-future-border bg-future-surface text-future-foreground-muted hover:border-future-border-hover hover:bg-future-surface hover:text-future-foreground">
+            <Button variant="outline" className="border-border bg-surface text-foreground-muted hover:border-border-hover hover:bg-surface hover:text-foreground">
               <Download />
               Export
             </Button>
             <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
               <DialogTrigger asChild>
-                <Button className="bg-future-accent text-future-foreground-on-accent hover:bg-future-accent/90">
+                <Button className="bg-brand text-foreground-on-accent hover:bg-brand/90">
                   <Plus />
                   Add Product
                 </Button>
@@ -1549,50 +1549,50 @@ function DataManagementDemo({ theme }: { theme: string }) {
               <DialogContent
                 className={cn(
                   themeClass,
-                  'border-future-border bg-future-surface-raised text-future-foreground'
+                  'border-border bg-surface-raised text-foreground'
                 )}
               >
                 <DialogHeader>
-                  <DialogTitle className="text-future-foreground">Add New Product</DialogTitle>
-                  <DialogDescription className="text-future-foreground-muted">
+                  <DialogTitle className="text-foreground">Add New Product</DialogTitle>
+                  <DialogDescription className="text-foreground-muted">
                     Enter the details for the new product.
                   </DialogDescription>
                 </DialogHeader>
                 <div className="flex flex-col gap-4 py-4">
                   <div className="flex flex-col gap-2">
-                    <Label className="text-future-foreground">Product name</Label>
+                    <Label className="text-foreground">Product name</Label>
                     <Input
                       placeholder="Enter product name"
-                      className="border-future-border bg-future-surface-overlay text-future-foreground placeholder:text-future-foreground-subtle"
+                      className="border-border bg-surface-overlay text-foreground placeholder:text-foreground-subtle"
                     />
                   </div>
                   <div className="grid grid-cols-2 gap-4">
                     <div className="flex flex-col gap-2">
-                      <Label className="text-future-foreground">SKU</Label>
+                      <Label className="text-foreground">SKU</Label>
                       <Input
                         placeholder="XX-000"
-                        className="border-future-border bg-future-surface-overlay text-future-foreground placeholder:text-future-foreground-subtle"
+                        className="border-border bg-surface-overlay text-foreground placeholder:text-foreground-subtle"
                       />
                     </div>
                     <div className="flex flex-col gap-2">
-                      <Label className="text-future-foreground">Price</Label>
+                      <Label className="text-foreground">Price</Label>
                       <Input
                         type="number"
                         placeholder="0.00"
-                        className="border-future-border bg-future-surface-overlay text-future-foreground placeholder:text-future-foreground-subtle"
+                        className="border-border bg-surface-overlay text-foreground placeholder:text-foreground-subtle"
                       />
                     </div>
                   </div>
                   <div className="flex flex-col gap-2">
-                    <Label className="text-future-foreground">Category</Label>
+                    <Label className="text-foreground">Category</Label>
                     <Select>
-                      <SelectTrigger className="border-future-border bg-future-surface-overlay text-future-foreground">
+                      <SelectTrigger className="border-border bg-surface-overlay text-foreground">
                         <SelectValue placeholder="Select category" />
                       </SelectTrigger>
                       <SelectContent
                         className={cn(
                           themeClass,
-                          'border-future-border bg-future-surface-overlay text-future-foreground'
+                          'border-border bg-surface-overlay text-foreground'
                         )}
                       >
                         {productCategories.map((cat) => (
@@ -1604,24 +1604,24 @@ function DataManagementDemo({ theme }: { theme: string }) {
                     </Select>
                   </div>
                   <div className="flex flex-col gap-2">
-                    <Label className="text-future-foreground">Initial stock</Label>
+                    <Label className="text-foreground">Initial stock</Label>
                     <Input
                       type="number"
                       placeholder="0"
-                      className="border-future-border bg-future-surface-overlay text-future-foreground placeholder:text-future-foreground-subtle"
+                      className="border-border bg-surface-overlay text-foreground placeholder:text-foreground-subtle"
                     />
                   </div>
                 </div>
                 <DialogFooter>
                   <Button
                     variant="outline"
-                    className="border-future-border bg-future-surface text-future-foreground-muted hover:border-future-border-hover hover:bg-future-surface hover:text-future-foreground"
+                    className="border-border bg-surface text-foreground-muted hover:border-border-hover hover:bg-surface hover:text-foreground"
                     onClick={() => setIsCreateDialogOpen(false)}
                   >
                     Cancel
                   </Button>
                   <Button
-                    className="bg-future-accent text-future-foreground-on-accent hover:bg-future-accent/90"
+                    className="bg-brand text-foreground-on-accent hover:bg-brand/90"
                     onClick={() => setIsCreateDialogOpen(false)}
                   >
                     Create product
@@ -1633,20 +1633,20 @@ function DataManagementDemo({ theme }: { theme: string }) {
         </div>
 
         {/* Tabs + filter bar */}
-        <div className="flex items-center justify-between border-b border-future-border-subtle px-6 py-3">
+        <div className="flex items-center justify-between border-b border-border-subtle px-6 py-3">
           <div className="flex gap-1">
             {statusTabs.map((tab) => (
               <button
                 key={tab.value}
                 className={`flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors ${
                   activeTab === tab.value
-                    ? 'bg-future-surface-hover text-future-foreground'
-                    : 'text-future-foreground-muted hover:text-future-foreground'
+                    ? 'bg-surface-hover text-foreground'
+                    : 'text-foreground-muted hover:text-foreground'
                 }`}
                 onClick={() => setActiveTab(tab.value)}
               >
                 {tab.label}
-                <span className="rounded-full bg-future-surface-overlay px-1.5 py-0.5 text-xs">
+                <span className="rounded-full bg-surface-overlay px-1.5 py-0.5 text-xs">
                   {tab.count}
                 </span>
               </button>
@@ -1655,14 +1655,14 @@ function DataManagementDemo({ theme }: { theme: string }) {
 
           <div className="flex items-center gap-2">
             <Select value={categoryFilter} onValueChange={setCategoryFilter}>
-              <SelectTrigger className="h-9 w-[150px] border-future-border bg-future-surface-overlay text-sm text-future-foreground">
-                <Filter className="mr-2 h-4 w-4 text-future-foreground-muted" />
+              <SelectTrigger className="h-9 w-[150px] border-border bg-surface-overlay text-sm text-foreground">
+                <Filter className="mr-2 h-4 w-4 text-foreground-muted" />
                 <SelectValue placeholder="Category" />
               </SelectTrigger>
               <SelectContent
                 className={cn(
                   themeClass,
-                  'border-future-border bg-future-surface-overlay text-future-foreground'
+                  'border-border bg-surface-overlay text-foreground'
                 )}
               >
                 <SelectItem value="all">All categories</SelectItem>
@@ -1673,7 +1673,7 @@ function DataManagementDemo({ theme }: { theme: string }) {
                 ))}
               </SelectContent>
             </Select>
-            <Button size="icon" variant="outline" className="border-future-border text-future-foreground-muted hover:border-future-border-hover hover:bg-transparent hover:text-future-foreground">
+            <Button size="icon" variant="outline" className="border-border text-foreground-muted hover:border-border-hover hover:bg-transparent hover:text-foreground">
               <RefreshCw />
             </Button>
           </div>
diff --git a/packages/apollo-wind/src/templates/Admin/settings-admin.tsx b/packages/apollo-wind/src/templates/Admin/settings-admin.tsx
index 13acf200c..2c63e3f1a 100644
--- a/packages/apollo-wind/src/templates/Admin/settings-admin.tsx
+++ b/packages/apollo-wind/src/templates/Admin/settings-admin.tsx
@@ -88,16 +88,16 @@ export function SettingsAdmin({
           {activeSection === 'profile' && (
             <>
               <div>
-                <h2 className="text-2xl font-bold text-future-foreground">Profile</h2>
-                <p className="text-future-foreground-muted">
+                <h2 className="text-2xl font-bold text-foreground">Profile</h2>
+                <p className="text-foreground-muted">
                   Manage your public profile information.
                 </p>
               </div>
 
-              <Card className="border-future-border-subtle bg-future-surface-raised">
+              <Card className="border-border-subtle bg-surface-raised">
                 <CardHeader>
-                  <CardTitle className="text-future-foreground">Avatar</CardTitle>
-                  <CardDescription className="text-future-foreground-muted">
+                  <CardTitle className="text-foreground">Avatar</CardTitle>
+                  <CardDescription className="text-foreground-muted">
                     Click on the avatar to upload a custom one from your files.
                   </CardDescription>
                 </CardHeader>
@@ -119,51 +119,51 @@ export function SettingsAdmin({
                 </CardContent>
               </Card>
 
-              <Card className="border-future-border-subtle bg-future-surface-raised">
+              <Card className="border-border-subtle bg-surface-raised">
                 <CardHeader>
-                  <CardTitle className="text-future-foreground">Personal Information</CardTitle>
-                  <CardDescription className="text-future-foreground-muted">
+                  <CardTitle className="text-foreground">Personal Information</CardTitle>
+                  <CardDescription className="text-foreground-muted">
                     Update your personal details here.
                   </CardDescription>
                 </CardHeader>
                 <CardContent className="space-y-4">
                   <Grid gap={4} cols={2}>
                     <Column gap={2}>
-                      <Label htmlFor="firstName" className="text-future-foreground">
+                      <Label htmlFor="firstName" className="text-foreground">
                         First name
                       </Label>
                       <Input
                         id="firstName"
                         value={formData.firstName}
                         onChange={(e) => updateField('firstName', e.target.value)}
-                        className="border-future-border bg-future-surface-overlay text-future-foreground"
+                        className="border-border bg-surface-overlay text-foreground"
                       />
                     </Column>
                     <Column gap={2}>
-                      <Label htmlFor="lastName" className="text-future-foreground">
+                      <Label htmlFor="lastName" className="text-foreground">
                         Last name
                       </Label>
                       <Input
                         id="lastName"
                         value={formData.lastName}
                         onChange={(e) => updateField('lastName', e.target.value)}
-                        className="border-future-border bg-future-surface-overlay text-future-foreground"
+                        className="border-border bg-surface-overlay text-foreground"
                       />
                     </Column>
                   </Grid>
                   <Column gap={2}>
-                    <Label htmlFor="username" className="text-future-foreground">
+                    <Label htmlFor="username" className="text-foreground">
                       Username
                     </Label>
                     <Input
                       id="username"
                       value={formData.username}
                       onChange={(e) => updateField('username', e.target.value)}
-                      className="border-future-border bg-future-surface-overlay text-future-foreground"
+                      className="border-border bg-surface-overlay text-foreground"
                     />
                   </Column>
                   <Column gap={2}>
-                    <Label htmlFor="bio" className="text-future-foreground">
+                    <Label htmlFor="bio" className="text-foreground">
                       Bio
                     </Label>
                     <Textarea
@@ -171,14 +171,14 @@ export function SettingsAdmin({
                       value={formData.bio}
                       onChange={(e) => updateField('bio', e.target.value)}
                       rows={3}
-                      className="border-future-border bg-future-surface-overlay text-future-foreground"
+                      className="border-border bg-surface-overlay text-foreground"
                     />
-                    <p className="text-xs text-future-foreground-subtle">
+                    <p className="text-xs text-foreground-subtle">
                       Brief description for your profile. URLs are hyperlinked.
                     </p>
                   </Column>
                 </CardContent>
-                <CardFooter className="border-t border-future-border-subtle px-6 py-4">
+                <CardFooter className="border-t border-border-subtle px-6 py-4">
                   <Button>Save changes</Button>
                 </CardFooter>
               </Card>
@@ -188,22 +188,22 @@ export function SettingsAdmin({
           {activeSection === 'account' && (
             <>
               <div>
-                <h2 className="text-2xl font-bold text-future-foreground">Account</h2>
-                <p className="text-future-foreground-muted">
+                <h2 className="text-2xl font-bold text-foreground">Account</h2>
+                <p className="text-foreground-muted">
                   Manage your account settings and email preferences.
                 </p>
               </div>
 
-              <Card className="border-future-border-subtle bg-future-surface-raised">
+              <Card className="border-border-subtle bg-surface-raised">
                 <CardHeader>
-                  <CardTitle className="text-future-foreground">Email</CardTitle>
-                  <CardDescription className="text-future-foreground-muted">
+                  <CardTitle className="text-foreground">Email</CardTitle>
+                  <CardDescription className="text-foreground-muted">
                     Your email address is used for login and notifications.
                   </CardDescription>
                 </CardHeader>
                 <CardContent className="space-y-4">
                   <Column gap={2}>
-                    <Label htmlFor="email" className="text-future-foreground">
+                    <Label htmlFor="email" className="text-foreground">
                       Email address
                     </Label>
                     <Input
@@ -211,27 +211,27 @@ export function SettingsAdmin({
                       type="email"
                       value={formData.email}
                       onChange={(e) => updateField('email', e.target.value)}
-                      className="border-future-border bg-future-surface-overlay text-future-foreground"
+                      className="border-border bg-surface-overlay text-foreground"
                     />
                   </Column>
                 </CardContent>
-                <CardFooter className="border-t border-future-border-subtle px-6 py-4">
+                <CardFooter className="border-t border-border-subtle px-6 py-4">
                   <Button>Update email</Button>
                 </CardFooter>
               </Card>
 
-              <Card className="border-red-500/30 bg-future-surface-raised">
+              <Card className="border-red-500/30 bg-surface-raised">
                 <CardHeader>
                   <CardTitle className="text-red-400">Danger Zone</CardTitle>
-                  <CardDescription className="text-future-foreground-muted">
+                  <CardDescription className="text-foreground-muted">
                     Irreversible and destructive actions.
                   </CardDescription>
                 </CardHeader>
                 <CardContent className="space-y-4">
                   <Row justify="between" align="center">
                     <Column gap={0}>
-                      <p className="font-medium text-future-foreground">Delete account</p>
-                      <p className="text-sm text-future-foreground-muted">
+                      <p className="font-medium text-foreground">Delete account</p>
+                      <p className="text-sm text-foreground-muted">
                         Permanently delete your account and all associated data.
                       </p>
                     </Column>
@@ -245,22 +245,22 @@ export function SettingsAdmin({
           {activeSection === 'appearance' && (
             <>
               <div>
-                <h2 className="text-2xl font-bold text-future-foreground">Appearance</h2>
-                <p className="text-future-foreground-muted">
+                <h2 className="text-2xl font-bold text-foreground">Appearance</h2>
+                <p className="text-foreground-muted">
                   Customize the appearance of the application.
                 </p>
               </div>
 
-              <Card className="border-future-border-subtle bg-future-surface-raised">
+              <Card className="border-border-subtle bg-surface-raised">
                 <CardHeader>
-                  <CardTitle className="text-future-foreground">Theme</CardTitle>
-                  <CardDescription className="text-future-foreground-muted">
+                  <CardTitle className="text-foreground">Theme</CardTitle>
+                  <CardDescription className="text-foreground-muted">
                     Select your preferred theme for the dashboard.
                   </CardDescription>
                 </CardHeader>
                 <CardContent className="space-y-4">
                   <Column gap={2}>
-                    <Label htmlFor="theme" className="text-future-foreground">
+                    <Label htmlFor="theme" className="text-foreground">
                       Theme
                     </Label>
                     <Select
@@ -269,7 +269,7 @@ export function SettingsAdmin({
                     >
                       <SelectTrigger
                         id="theme"
-                        className="w-[200px] border-future-border bg-future-surface-overlay text-future-foreground"
+                        className="w-[200px] border-border bg-surface-overlay text-foreground"
                       >
                         <SelectValue />
                       </SelectTrigger>
@@ -281,7 +281,7 @@ export function SettingsAdmin({
                     </Select>
                   </Column>
                   <Column gap={2}>
-                    <Label htmlFor="language" className="text-future-foreground">
+                    <Label htmlFor="language" className="text-foreground">
                       Language
                     </Label>
                     <Select
@@ -290,7 +290,7 @@ export function SettingsAdmin({
                     >
                       <SelectTrigger
                         id="language"
-                        className="w-[200px] border-future-border bg-future-surface-overlay text-future-foreground"
+                        className="w-[200px] border-border bg-surface-overlay text-foreground"
                       >
                         <SelectValue />
                       </SelectTrigger>
@@ -310,24 +310,24 @@ export function SettingsAdmin({
           {activeSection === 'notifications' && (
             <>
               <div>
-                <h2 className="text-2xl font-bold text-future-foreground">Notifications</h2>
-                <p className="text-future-foreground-muted">
+                <h2 className="text-2xl font-bold text-foreground">Notifications</h2>
+                <p className="text-foreground-muted">
                   Configure how you receive notifications.
                 </p>
               </div>
 
-              <Card className="border-future-border-subtle bg-future-surface-raised">
+              <Card className="border-border-subtle bg-surface-raised">
                 <CardHeader>
-                  <CardTitle className="text-future-foreground">Notification Preferences</CardTitle>
-                  <CardDescription className="text-future-foreground-muted">
+                  <CardTitle className="text-foreground">Notification Preferences</CardTitle>
+                  <CardDescription className="text-foreground-muted">
                     Choose what notifications you want to receive.
                   </CardDescription>
                 </CardHeader>
                 <CardContent className="space-y-6">
                   <Row justify="between" align="center">
                     <Column gap={0.5}>
-                      <Label className="text-future-foreground">Email notifications</Label>
-                      <p className="text-sm text-future-foreground-muted">
+                      <Label className="text-foreground">Email notifications</Label>
+                      <p className="text-sm text-foreground-muted">
                         Receive notifications via email.
                       </p>
                     </Column>
@@ -336,11 +336,11 @@ export function SettingsAdmin({
                       onCheckedChange={(checked) => updateField('emailNotifications', checked)}
                     />
                   </Row>
-                  <Separator className="bg-future-border-subtle" />
+                  <Separator className="bg-border-subtle" />
                   <Row justify="between" align="center">
                     <Column gap={0.5}>
-                      <Label className="text-future-foreground">Push notifications</Label>
-                      <p className="text-sm text-future-foreground-muted">
+                      <Label className="text-foreground">Push notifications</Label>
+                      <p className="text-sm text-foreground-muted">
                         Receive push notifications on your device.
                       </p>
                     </Column>
@@ -349,11 +349,11 @@ export function SettingsAdmin({
                       onCheckedChange={(checked) => updateField('pushNotifications', checked)}
                     />
                   </Row>
-                  <Separator className="bg-future-border-subtle" />
+                  <Separator className="bg-border-subtle" />
                   <Row justify="between" align="center">
                     <Column gap={0.5}>
-                      <Label className="text-future-foreground">Marketing emails</Label>
-                      <p className="text-sm text-future-foreground-muted">
+                      <Label className="text-foreground">Marketing emails</Label>
+                      <p className="text-sm text-foreground-muted">
                         Receive emails about new features and updates.
                       </p>
                     </Column>
@@ -370,68 +370,68 @@ export function SettingsAdmin({
           {activeSection === 'security' && (
             <>
               <div>
-                <h2 className="text-2xl font-bold text-future-foreground">Security</h2>
-                <p className="text-future-foreground-muted">Manage your security preferences.</p>
+                <h2 className="text-2xl font-bold text-foreground">Security</h2>
+                <p className="text-foreground-muted">Manage your security preferences.</p>
               </div>
 
-              <Card className="border-future-border-subtle bg-future-surface-raised">
+              <Card className="border-border-subtle bg-surface-raised">
                 <CardHeader>
-                  <CardTitle className="text-future-foreground">Password</CardTitle>
-                  <CardDescription className="text-future-foreground-muted">
+                  <CardTitle className="text-foreground">Password</CardTitle>
+                  <CardDescription className="text-foreground-muted">
                     Change your password here.
                   </CardDescription>
                 </CardHeader>
                 <CardContent className="space-y-4">
                   <Column gap={2}>
-                    <Label htmlFor="currentPassword" className="text-future-foreground">
+                    <Label htmlFor="currentPassword" className="text-foreground">
                       Current password
                     </Label>
                     <Input
                       id="currentPassword"
                       type="password"
-                      className="border-future-border bg-future-surface-overlay text-future-foreground"
+                      className="border-border bg-surface-overlay text-foreground"
                     />
                   </Column>
                   <Column gap={2}>
-                    <Label htmlFor="newPassword" className="text-future-foreground">
+                    <Label htmlFor="newPassword" className="text-foreground">
                       New password
                     </Label>
                     <Input
                       id="newPassword"
                       type="password"
-                      className="border-future-border bg-future-surface-overlay text-future-foreground"
+                      className="border-border bg-surface-overlay text-foreground"
                     />
                   </Column>
                   <Column gap={2}>
-                    <Label htmlFor="confirmPassword" className="text-future-foreground">
+                    <Label htmlFor="confirmPassword" className="text-foreground">
                       Confirm password
                     </Label>
                     <Input
                       id="confirmPassword"
                       type="password"
-                      className="border-future-border bg-future-surface-overlay text-future-foreground"
+                      className="border-border bg-surface-overlay text-foreground"
                     />
                   </Column>
                 </CardContent>
-                <CardFooter className="border-t border-future-border-subtle px-6 py-4">
+                <CardFooter className="border-t border-border-subtle px-6 py-4">
                   <Button>Update password</Button>
                 </CardFooter>
               </Card>
 
-              <Card className="border-future-border-subtle bg-future-surface-raised">
+              <Card className="border-border-subtle bg-surface-raised">
                 <CardHeader>
-                  <CardTitle className="text-future-foreground">
+                  <CardTitle className="text-foreground">
                     Two-Factor Authentication
                   </CardTitle>
-                  <CardDescription className="text-future-foreground-muted">
+                  <CardDescription className="text-foreground-muted">
                     Add an extra layer of security to your account.
                   </CardDescription>
                 </CardHeader>
                 <CardContent>
                   <Row justify="between" align="center">
                     <Column gap={0.5}>
-                      <p className="font-medium text-future-foreground">Enable 2FA</p>
-                      <p className="text-sm text-future-foreground-muted">
+                      <p className="font-medium text-foreground">Enable 2FA</p>
+                      <p className="text-sm text-foreground-muted">
                         Secure your account with two-factor authentication.
                       </p>
                     </Column>
@@ -448,16 +448,16 @@ export function SettingsAdmin({
           {activeSection === 'billing' && (
             <>
               <div>
-                <h2 className="text-2xl font-bold text-future-foreground">Billing</h2>
-                <p className="text-future-foreground-muted">
+                <h2 className="text-2xl font-bold text-foreground">Billing</h2>
+                <p className="text-foreground-muted">
                   Manage your billing information and subscription.
                 </p>
               </div>
 
-              <Card className="border-future-border-subtle bg-future-surface-raised">
+              <Card className="border-border-subtle bg-surface-raised">
                 <CardHeader>
-                  <CardTitle className="text-future-foreground">Current Plan</CardTitle>
-                  <CardDescription className="text-future-foreground-muted">
+                  <CardTitle className="text-foreground">Current Plan</CardTitle>
+                  <CardDescription className="text-foreground-muted">
                     You are currently on the Pro plan.
                   </CardDescription>
                 </CardHeader>
@@ -465,11 +465,11 @@ export function SettingsAdmin({
                   <Row
                     justify="between"
                     align="center"
-                    className="rounded-lg border border-future-border-subtle p-4"
+                    className="rounded-lg border border-border-subtle p-4"
                   >
                     <Column gap={0}>
-                      <p className="font-semibold text-future-foreground">Pro Plan</p>
-                      <p className="text-sm text-future-foreground-muted">
+                      <p className="font-semibold text-foreground">Pro Plan</p>
+                      <p className="text-sm text-foreground-muted">
                         $29/month — Renews on Jan 1, 2025
                       </p>
                     </Column>
@@ -478,10 +478,10 @@ export function SettingsAdmin({
                 </CardContent>
               </Card>
 
-              <Card className="border-future-border-subtle bg-future-surface-raised">
+              <Card className="border-border-subtle bg-surface-raised">
                 <CardHeader>
-                  <CardTitle className="text-future-foreground">Payment Method</CardTitle>
-                  <CardDescription className="text-future-foreground-muted">
+                  <CardTitle className="text-foreground">Payment Method</CardTitle>
+                  <CardDescription className="text-foreground-muted">
                     Update your payment information.
                   </CardDescription>
                 </CardHeader>
@@ -489,19 +489,19 @@ export function SettingsAdmin({
                   <Row
                     justify="between"
                     align="center"
-                    className="rounded-lg border border-future-border-subtle p-4"
+                    className="rounded-lg border border-border-subtle p-4"
                   >
                     <Row gap={3} align="center">
                       <Row
                         justify="center"
                         align="center"
-                        className="h-10 w-14 rounded bg-future-surface-overlay"
+                        className="h-10 w-14 rounded bg-surface-overlay"
                       >
-                        <CreditCard className="h-5 w-5 text-future-foreground-muted" />
+                        <CreditCard className="h-5 w-5 text-foreground-muted" />
                       </Row>
                       <Column gap={0}>
-                        <p className="font-medium text-future-foreground">•••• •••• •••• 4242</p>
-                        <p className="text-sm text-future-foreground-muted">Expires 12/25</p>
+                        <p className="font-medium text-foreground">•••• •••• •••• 4242</p>
+                        <p className="text-sm text-foreground-muted">Expires 12/25</p>
                       </Column>
                     </Row>
                     <Button variant="ghost" size="sm">
@@ -509,7 +509,7 @@ export function SettingsAdmin({
                     </Button>
                   </Row>
                 </CardContent>
-                <CardFooter className="border-t border-future-border-subtle px-6 py-4">
+                <CardFooter className="border-t border-border-subtle px-6 py-4">
                   <Button variant="outline">Add payment method</Button>
                 </CardFooter>
               </Card>
diff --git a/packages/apollo-wind/src/templates/Admin/template-admin.tsx b/packages/apollo-wind/src/templates/Admin/template-admin.tsx
index 9cc4554f4..240cf4c3e 100644
--- a/packages/apollo-wind/src/templates/Admin/template-admin.tsx
+++ b/packages/apollo-wind/src/templates/Admin/template-admin.tsx
@@ -14,11 +14,11 @@ export type { FutureTheme };
 // ============================================================================
 
 function resolveThemeClass(theme: FutureTheme) {
-  if (theme === 'legacy-dark') return 'legacy-dark';
-  if (theme === 'legacy-light') return 'legacy-light';
-  if (theme === 'wireframe') return 'future-wireframe';
-  if (theme === 'vertex') return 'future-vertex';
-  if (theme === 'canvas') return 'future-canvas';
+  if (theme === 'core-dark') return 'core-dark';
+  if (theme === 'core-light') return 'core-light';
+  if (theme === 'wireframe') return 'wireframe';
+  if (theme === 'vertex') return 'vertex';
+  if (theme === 'canvas') return 'canvas';
   if (theme === 'light') return 'future-light';
   return 'future-dark';
 }
@@ -43,7 +43,7 @@ export function AdminSidebar({ className, width = 260, children }: AdminSidebarP
   return (
     <div
       className={cn(
-        'flex shrink-0 flex-col border-r border-future-border-subtle bg-future-surface',
+        'flex shrink-0 flex-col border-r border-border-subtle bg-surface',
         className
       )}
       style={{ width }}
@@ -79,11 +79,11 @@ export function AdminSidebarHeader({
   return (
     <div
       className={cn(
-        'flex shrink-0 items-center justify-between border-b border-future-border-subtle px-4 py-3',
+        'flex shrink-0 items-center justify-between border-b border-border-subtle px-4 py-3',
         className
       )}
     >
-      <div className="flex items-center gap-2 text-sm font-medium text-future-foreground">
+      <div className="flex items-center gap-2 text-sm font-medium text-foreground">
         {icon}
         <span>{title}</span>
       </div>
@@ -128,8 +128,8 @@ export function AdminSidebarNav({
             className={cn(
               'flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors',
               selectedId === item.id
-                ? 'bg-future-accent-subtle text-future-foreground-accent'
-                : 'text-future-foreground-muted hover:bg-future-surface-hover hover:text-future-foreground'
+                ? 'bg-brand-subtle text-foreground-accent'
+                : 'text-foreground-muted hover:bg-surface-hover hover:text-foreground'
             )}
             onClick={() => onSelect?.(item.id)}
           >
@@ -176,14 +176,14 @@ export function AdminPageHeader({
   onTabChange,
 }: AdminPageHeaderProps) {
   return (
-    <div className={cn('border-b border-future-border-subtle px-6 py-4', className)}>
+    <div className={cn('border-b border-border-subtle px-6 py-4', className)}>
       {breadcrumb && breadcrumb.length > 0 && (
-        <div className="mb-2 flex items-center gap-1.5 text-sm text-future-foreground-muted">
+        <div className="mb-2 flex items-center gap-1.5 text-sm text-foreground-muted">
           {breadcrumb.map((item, i) => (
             <React.Fragment key={item}>
-              {i > 0 && <span className="text-future-foreground-subtle">/</span>}
+              {i > 0 && <span className="text-foreground-subtle">/</span>}
               {i === breadcrumb.length - 1 ? (
-                <span className="text-future-foreground">{item}</span>
+                <span className="text-foreground">{item}</span>
               ) : (
                 <span>{item}</span>
               )}
@@ -192,7 +192,7 @@ export function AdminPageHeader({
         </div>
       )}
       <div className="flex items-center justify-between">
-        <h1 className="text-xl font-semibold text-future-foreground">{title}</h1>
+        <h1 className="text-xl font-semibold text-foreground">{title}</h1>
         {actions && <div className="flex items-center gap-2">{actions}</div>}
       </div>
       {tabs && (
@@ -203,8 +203,8 @@ export function AdminPageHeader({
               className={cn(
                 'px-4 pb-2 pt-1 text-sm font-medium transition-colors',
                 activeTab === tab.value
-                  ? 'border-b-2 border-future-accent text-future-foreground'
-                  : 'text-future-foreground-muted hover:text-future-foreground'
+                  ? 'border-b-2 border-brand text-foreground'
+                  : 'text-foreground-muted hover:text-foreground'
               )}
               onClick={() => onTabChange?.(tab.value)}
             >
@@ -236,7 +236,7 @@ export function AdminToolbar({ className, children, actions }: AdminToolbarProps
   return (
     <div
       className={cn(
-        'flex items-center justify-between border-b border-future-border-subtle px-6 py-3',
+        'flex items-center justify-between border-b border-border-subtle px-6 py-3',
         className
       )}
     >
@@ -294,7 +294,7 @@ export function AdminTemplate({
       <div
         className={cn(
           resolveThemeClass(theme),
-          'flex h-screen w-full flex-col overflow-hidden bg-future-surface text-foreground',
+          'flex h-screen w-full flex-col overflow-hidden bg-surface text-foreground',
           className
         )}
         style={{ fontFamily: fontFamily.base }}
diff --git a/packages/apollo-wind/src/templates/Delegate/delegate.stories.tsx b/packages/apollo-wind/src/templates/Delegate/delegate.stories.tsx
index f72869894..c992aa73f 100644
--- a/packages/apollo-wind/src/templates/Delegate/delegate.stories.tsx
+++ b/packages/apollo-wind/src/templates/Delegate/delegate.stories.tsx
@@ -97,24 +97,24 @@ export const Chat: Story = {
 
 const agentSteps = [
   {
-    icon: <Search className="h-3.5 w-3.5 text-future-foreground-subtle" />,
+    icon: <Search className="h-3.5 w-3.5 text-foreground-subtle" />,
     title: 'WebSearchTool',
     description:
       'Searching and analyzing multiple cells in this spreadsheet to create a summary for planning next steps.',
   },
   {
-    icon: <SettingsIcon className="h-3.5 w-3.5 text-future-foreground-subtle" />,
+    icon: <SettingsIcon className="h-3.5 w-3.5 text-foreground-subtle" />,
     title: 'Excel Agent',
     description: 'Editing current column with additional information.',
   },
   {
-    icon: <Search className="h-3.5 w-3.5 text-future-foreground-subtle" />,
+    icon: <Search className="h-3.5 w-3.5 text-foreground-subtle" />,
     title: 'WebSearchTool',
     description:
       'Checking categorized tabs to better understand spam and volume sources.',
   },
   {
-    icon: <SettingsIcon className="h-3.5 w-3.5 text-future-foreground-subtle" />,
+    icon: <SettingsIcon className="h-3.5 w-3.5 text-foreground-subtle" />,
     title: 'Currency conversion',
     description:
       'Performing currency conversion using current market rates to ensure accurate calculations.',
@@ -129,8 +129,8 @@ function ChatResponsesContent() {
         <div className="flex w-full max-w-[800px] flex-col gap-6">
           {/* User message — right-aligned */}
           <div className="flex justify-end">
-            <div className="max-w-[640px] rounded-bl-2xl rounded-br-sm rounded-tl-2xl rounded-tr-2xl bg-future-surface-raised px-6 py-4">
-              <p className="text-base leading-6 tracking-[-0.4px] text-future-foreground">
+            <div className="max-w-[640px] rounded-bl-2xl rounded-br-sm rounded-tl-2xl rounded-tr-2xl bg-surface-raised px-6 py-4">
+              <p className="text-base leading-6 tracking-[-0.4px] text-foreground">
                 Open the Excel file I uploaded yesterday, analyze the sales
                 numbers, and generate a short summary of monthly performance.
                 Send the summary to me on Slack once you&apos;re done.
@@ -140,16 +140,16 @@ function ChatResponsesContent() {
 
           {/* "Created an action plan" — left-aligned */}
           <div className="flex items-center gap-2">
-            <span className="text-base font-medium text-future-foreground-muted">
+            <span className="text-base font-medium text-foreground-muted">
               Created an action plan
             </span>
-            <ChevronUp className="h-4 w-4 text-future-foreground-muted" />
+            <ChevronUp className="h-4 w-4 text-foreground-muted" />
           </div>
 
           {/* Agent card — dark theme */}
-          <div className="w-full max-w-[477px] overflow-hidden rounded-2xl border border-future-border-subtle bg-future-surface-overlay">
+          <div className="w-full max-w-[477px] overflow-hidden rounded-2xl border border-border-subtle bg-surface-overlay">
             {/* Card header */}
-            <div className="flex items-center justify-between border-b border-future-border-subtle px-4 py-4">
+            <div className="flex items-center justify-between border-b border-border-subtle px-4 py-4">
               <div className="flex items-center gap-2.5">
                 <div className="flex h-6 w-6 items-center justify-center">
                   <svg viewBox="0 0 24 24" className="h-6 w-6" fill="none">
@@ -159,30 +159,30 @@ function ChatResponsesContent() {
                     <text x="4.5" y="14.5" fontSize="7" fontWeight="bold" fill="white">X</text>
                   </svg>
                 </div>
-                <span className="text-base font-semibold tracking-[-0.4px] text-future-foreground">
+                <span className="text-base font-semibold tracking-[-0.4px] text-foreground">
                   Excel Agent
                 </span>
               </div>
-              <ChevronUp className="h-4 w-4 text-future-foreground-muted" />
+              <ChevronUp className="h-4 w-4 text-foreground-muted" />
             </div>
 
             {/* Card content */}
             <div className="flex flex-col gap-3 px-4 pb-4 pt-2">
-              <span className="text-xs tracking-[-0.3px] text-future-foreground-subtle">
+              <span className="text-xs tracking-[-0.3px] text-foreground-subtle">
                 Agents and tools used
               </span>
 
               <div className="flex flex-col gap-3">
                 {agentSteps.map((step, i) => (
                   <div key={i} className="flex gap-2.5">
-                    <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-[10px] bg-future-surface-raised">
+                    <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-[10px] bg-surface-raised">
                       {step.icon}
                     </div>
                     <div className="flex flex-col gap-0.5">
-                      <span className="text-sm font-semibold leading-4 text-future-foreground">
+                      <span className="text-sm font-semibold leading-4 text-foreground">
                         {step.title}
                       </span>
-                      <span className="text-xs leading-[18px] text-future-foreground-muted">
+                      <span className="text-xs leading-[18px] text-foreground-muted">
                         {step.description}
                       </span>
                     </div>
@@ -194,16 +194,16 @@ function ChatResponsesContent() {
 
           {/* Action icons row */}
           <div className="flex items-center gap-1">
-            <button className="flex h-6 w-6 items-center justify-center rounded text-future-foreground-subtle transition-colors hover:text-future-foreground">
+            <button className="flex h-6 w-6 items-center justify-center rounded text-foreground-subtle transition-colors hover:text-foreground">
               <Copy className="h-4 w-4" />
             </button>
-            <button className="flex h-6 w-6 items-center justify-center rounded text-future-foreground-subtle transition-colors hover:text-future-foreground">
+            <button className="flex h-6 w-6 items-center justify-center rounded text-foreground-subtle transition-colors hover:text-foreground">
               <ThumbsDown className="h-4 w-4" />
             </button>
-            <button className="flex h-6 w-6 items-center justify-center rounded text-future-foreground-subtle transition-colors hover:text-future-foreground">
+            <button className="flex h-6 w-6 items-center justify-center rounded text-foreground-subtle transition-colors hover:text-foreground">
               <ThumbsUp className="h-4 w-4" />
             </button>
-            <button className="flex h-6 w-6 items-center justify-center rounded text-future-foreground-subtle transition-colors hover:text-future-foreground">
+            <button className="flex h-6 w-6 items-center justify-center rounded text-foreground-subtle transition-colors hover:text-foreground">
               <MoreVertical className="h-4 w-4" />
             </button>
           </div>
@@ -262,15 +262,15 @@ function SettingsContent() {
   return (
     <div className="flex flex-1 flex-col overflow-y-auto">
       {/* Tabs */}
-      <div className="shrink-0 border-b border-future-border-subtle px-8 pt-6">
+      <div className="shrink-0 border-b border-border-subtle px-8 pt-6">
         <div className="flex gap-1">
           {settingsTabs.map((tab) => (
             <button
               key={tab.id}
               className={`px-4 pb-3 text-sm font-medium transition-colors ${
                 activeTab === tab.id
-                  ? 'border-b-2 border-future-accent text-future-foreground'
-                  : 'text-future-foreground-muted hover:text-future-foreground'
+                  ? 'border-b-2 border-brand text-foreground'
+                  : 'text-foreground-muted hover:text-foreground'
               }`}
               onClick={() => setActiveTab(tab.id)}
             >
@@ -286,8 +286,8 @@ function SettingsContent() {
           <div className="mx-auto max-w-2xl">
             {/* Page header */}
             <div className="mb-8">
-              <h1 className="text-2xl font-semibold text-future-foreground">Manage Profile</h1>
-              <p className="mt-1 text-sm text-future-foreground-muted">
+              <h1 className="text-2xl font-semibold text-foreground">Manage Profile</h1>
+              <p className="mt-1 text-sm text-foreground-muted">
                 Update your profile information and preferences.
               </p>
             </div>
@@ -295,12 +295,12 @@ function SettingsContent() {
             <div className="flex flex-col gap-8">
               {/* Profile Image */}
               <div className="flex flex-col gap-2">
-                <label className="text-sm font-medium text-future-foreground">Profile Image</label>
+                <label className="text-sm font-medium text-foreground">Profile Image</label>
                 <div className="flex items-center gap-4">
-                  <div className="flex h-16 w-16 items-center justify-center rounded-full bg-future-surface-overlay">
-                    <User className="h-7 w-7 text-future-foreground-muted" />
+                  <div className="flex h-16 w-16 items-center justify-center rounded-full bg-surface-overlay">
+                    <User className="h-7 w-7 text-foreground-muted" />
                   </div>
-                  <button className="flex h-9 items-center gap-2 rounded-lg border border-future-border bg-future-surface px-4 text-sm font-medium text-future-foreground-muted transition-colors hover:border-future-border-hover hover:text-future-foreground">
+                  <button className="flex h-9 items-center gap-2 rounded-lg border border-border bg-surface px-4 text-sm font-medium text-foreground-muted transition-colors hover:border-border-hover hover:text-foreground">
                     <Upload className="h-4 w-4" />
                     Select Image
                   </button>
@@ -308,37 +308,37 @@ function SettingsContent() {
               </div>
 
               {/* Divider */}
-              <div className="h-px bg-future-border-subtle" />
+              <div className="h-px bg-border-subtle" />
 
               {/* Your Name */}
               <div className="flex flex-col gap-2">
-                <label className="text-sm font-medium text-future-foreground">Your Name</label>
+                <label className="text-sm font-medium text-foreground">Your Name</label>
                 <Input
                   placeholder="Enter your name"
-                  className="max-w-md border-future-border bg-future-surface-overlay text-future-foreground placeholder:text-future-foreground-subtle"
+                  className="max-w-md border-border bg-surface-overlay text-foreground placeholder:text-foreground-subtle"
                 />
               </div>
 
               {/* Your Email */}
               <div className="flex flex-col gap-2">
-                <label className="text-sm font-medium text-future-foreground">Your Email</label>
+                <label className="text-sm font-medium text-foreground">Your Email</label>
                 <Input
                   placeholder="Enter your email"
                   type="email"
-                  className="max-w-md border-future-border bg-future-surface-overlay text-future-foreground placeholder:text-future-foreground-subtle"
+                  className="max-w-md border-border bg-surface-overlay text-foreground placeholder:text-foreground-subtle"
                 />
               </div>
 
               {/* Divider */}
-              <div className="h-px bg-future-border-subtle" />
+              <div className="h-px bg-border-subtle" />
 
               {/* Language */}
               <div className="flex flex-col gap-2">
-                <label className="text-sm font-medium text-future-foreground">Language</label>
-                <p className="text-sm text-future-foreground-muted">
+                <label className="text-sm font-medium text-foreground">Language</label>
+                <p className="text-sm text-foreground-muted">
                   Select your preferred language for the interface.
                 </p>
-                <select className="h-10 max-w-md appearance-none rounded-md border border-future-border bg-future-surface-overlay px-3 text-sm text-future-foreground focus:outline-none focus:ring-1 focus:ring-future-ring">
+                <select className="h-10 max-w-md appearance-none rounded-md border border-border bg-surface-overlay px-3 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-ring">
                   <option>Select Language</option>
                   <option>English</option>
                   <option>Spanish</option>
@@ -349,12 +349,12 @@ function SettingsContent() {
               </div>
 
               {/* Divider */}
-              <div className="h-px bg-future-border-subtle" />
+              <div className="h-px bg-border-subtle" />
 
               {/* Theme Settings */}
               <div className="flex flex-col gap-3">
-                <label className="text-sm font-medium text-future-foreground">Theme Settings</label>
-                <p className="text-sm text-future-foreground-muted">
+                <label className="text-sm font-medium text-foreground">Theme Settings</label>
+                <p className="text-sm text-foreground-muted">
                   Choose your preferred theme for the interface.
                 </p>
                 <div className="flex gap-3">
@@ -367,8 +367,8 @@ function SettingsContent() {
                       key={theme.id}
                       className={`flex h-20 w-28 flex-col items-center justify-center gap-2 rounded-xl border text-sm font-medium transition-colors ${
                         selectedTheme === theme.id
-                          ? 'border-future-accent bg-future-accent-subtle text-future-foreground'
-                          : 'border-future-border bg-future-surface-overlay text-future-foreground-muted hover:border-future-border-hover hover:text-future-foreground'
+                          ? 'border-brand bg-brand-subtle text-foreground'
+                          : 'border-border bg-surface-overlay text-foreground-muted hover:border-border-hover hover:text-foreground'
                       }`}
                       onClick={() => setSelectedTheme(theme.id)}
                     >
@@ -381,7 +381,7 @@ function SettingsContent() {
             </div>
           </div>
         ) : (
-          <div className="flex flex-1 items-center justify-center text-sm text-future-foreground-muted">
+          <div className="flex flex-1 items-center justify-center text-sm text-foreground-muted">
             Coming soon
           </div>
         )}
diff --git a/packages/apollo-wind/src/templates/Delegate/template-delegate.tsx b/packages/apollo-wind/src/templates/Delegate/template-delegate.tsx
index b6e633a46..10cb2da77 100644
--- a/packages/apollo-wind/src/templates/Delegate/template-delegate.tsx
+++ b/packages/apollo-wind/src/templates/Delegate/template-delegate.tsx
@@ -63,20 +63,20 @@ export function DelegateTemplate({
   const layout = (
     <div
       className={cn(
-        theme === 'legacy-dark'
-          ? 'legacy-dark'
-          : theme === 'legacy-light'
-            ? 'legacy-light'
+        theme === 'core-dark'
+          ? 'core-dark'
+          : theme === 'core-light'
+            ? 'core-light'
             : theme === 'wireframe'
-              ? 'future-wireframe'
+              ? 'wireframe'
               : theme === 'vertex'
-                ? 'future-vertex'
+                ? 'vertex'
                 : theme === 'canvas'
-                  ? 'future-canvas'
+                  ? 'canvas'
                   : theme === 'light'
                     ? 'future-light'
                     : 'future-dark',
-        'flex h-screen bg-future-surface',
+        'flex h-screen bg-surface',
         className
       )}
       style={{ fontFamily: fontFamily.base }}
diff --git a/packages/apollo-wind/src/templates/EmptyErrors/empty-errors.stories.tsx b/packages/apollo-wind/src/templates/EmptyErrors/empty-errors.stories.tsx
index dc4e5a90b..5bf8620d4 100644
--- a/packages/apollo-wind/src/templates/EmptyErrors/empty-errors.stories.tsx
+++ b/packages/apollo-wind/src/templates/EmptyErrors/empty-errors.stories.tsx
@@ -32,23 +32,23 @@ function ErrorPageLayout({
   children: React.ReactNode;
 }) {
   const themeClass =
-    theme === 'legacy-dark'
-      ? 'legacy-dark'
-      : theme === 'legacy-light'
-        ? 'legacy-light'
+    theme === 'core-dark'
+      ? 'core-dark'
+      : theme === 'core-light'
+        ? 'core-light'
         : theme === 'wireframe'
-          ? 'future-wireframe'
+          ? 'wireframe'
           : theme === 'vertex'
-            ? 'future-vertex'
+            ? 'vertex'
             : theme === 'canvas'
-              ? 'future-canvas'
+              ? 'canvas'
               : theme === 'light'
                 ? 'future-light'
                 : 'future-dark';
 
   return (
     <div
-      className={cn(themeClass, 'flex h-screen flex-col bg-future-surface')}
+      className={cn(themeClass, 'flex h-screen flex-col bg-surface')}
       style={{ fontFamily: fontFamily.base }}
     >
       <MaestroHeader theme={theme as import('@/foundation/Future/types').FutureTheme} title="UiPath" />
diff --git a/packages/apollo-wind/src/templates/EmptyErrors/error-components.tsx b/packages/apollo-wind/src/templates/EmptyErrors/error-components.tsx
index 48110240d..5cdff54f4 100644
--- a/packages/apollo-wind/src/templates/EmptyErrors/error-components.tsx
+++ b/packages/apollo-wind/src/templates/EmptyErrors/error-components.tsx
@@ -16,7 +16,7 @@ export function ErrorVideo({ size = 180 }: { size?: number }) {
 
   return (
     <div
-      className="overflow-hidden rounded-full border border-future-border bg-future-surface-raised"
+      className="overflow-hidden rounded-full border border-border bg-surface-raised"
       style={{ width: size, height: size }}
     >
       <iframe
diff --git a/packages/apollo-wind/src/templates/Experiments/brand-motion.stories.tsx b/packages/apollo-wind/src/templates/Experiments/brand-motion.stories.tsx
new file mode 100644
index 000000000..d59f5179e
--- /dev/null
+++ b/packages/apollo-wind/src/templates/Experiments/brand-motion.stories.tsx
@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fontFamily } from '@/foundation/Future/typography';
+import { cn } from '@/lib';
+
+// ============================================================================
+// Meta
+// ============================================================================
+
+const meta = {
+  title: 'Experiments/Brand Motion',
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+function resolveThemeClass(value: string) {
+  if (value === 'core-dark') return 'core-dark';
+  if (value === 'core-light') return 'core-light';
+  if (value === 'wireframe') return 'wireframe';
+  if (value === 'vertex') return 'vertex';
+  if (value === 'canvas') return 'canvas';
+  if (value === 'light') return 'future-light';
+  return 'future-dark';
+}
+
+// ============================================================================
+// Coming Soon placeholder
+// ============================================================================
+
+function ComingSoon({ theme }: { theme: string }) {
+  const themeClass = resolveThemeClass(theme);
+
+  return (
+    <div
+      className={cn(themeClass, 'flex min-h-screen w-full items-center justify-center bg-background text-foreground')}
+      style={{ fontFamily: fontFamily.base }}
+    >
+      <div className="flex flex-col items-center gap-3 text-center">
+        <h1 className="text-2xl font-bold tracking-tight text-foreground">
+          Brand Motion
+        </h1>
+        <p className="text-base text-muted-foreground">Coming soon</p>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// Story
+// ============================================================================
+
+export const Default: Story = {
+  render: (_, { globals }) => (
+    <ComingSoon theme={globals.futureTheme || 'dark'} />
+  ),
+};
diff --git a/packages/apollo-wind/src/templates/Experiments/ideas.stories.tsx b/packages/apollo-wind/src/templates/Experiments/ideas.stories.tsx
index ea1bb416f..6104db916 100644
--- a/packages/apollo-wind/src/templates/Experiments/ideas.stories.tsx
+++ b/packages/apollo-wind/src/templates/Experiments/ideas.stories.tsx
@@ -224,10 +224,10 @@ Bridge tokens (preferred for content inside templates — cross-theme safe):
 - Borders: border-border, border-input
 
 Future-specific tokens (also available):
-- Surfaces: bg-future-surface, bg-future-surface-raised, bg-future-surface-overlay, bg-future-surface-hover
-- Text: text-future-foreground, text-future-foreground-muted, text-future-foreground-subtle, text-future-foreground-accent
-- Borders: border-future-border, border-future-border-subtle
-- Accent: bg-future-accent, bg-future-accent-subtle
+- Surfaces: bg-surface, bg-surface-raised, bg-surface-overlay, bg-surface-hover
+- Text: text-foreground, text-foreground-muted, text-foreground-subtle, text-foreground-accent
+- Borders: border-border, border-border-subtle
+- Accent: bg-brand, bg-brand-subtle
 
 Common layout patterns:
 - Section header: <div className="flex items-center justify-between"><div><h2 className="text-lg font-semibold text-foreground">Title</h2><p className="text-sm text-muted-foreground">Description</p></div><Button>Action</Button></div>
@@ -246,7 +246,7 @@ Rules:
 - The output renders inside a container that is the full viewport height. Templates already handle h-screen, so do NOT add h-screen to your outermost element.
 - Always use the shadcn components (Card, Table, Button, Badge, etc.) instead of raw HTML when available.
 - Do NOT use raw hex colors or Tailwind palette (bg-zinc-900, text-gray-400). Always use semantic tokens.
-- Do NOT use bg-black or bg-white — use bg-background, bg-card, or bg-future-surface instead.`;
+- Do NOT use bg-black or bg-white — use bg-background, bg-card, or bg-surface instead.`;
 }
 
 async function callClaude(
@@ -289,11 +289,11 @@ async function callClaude(
 // ============================================================================
 
 function resolveThemeClass(theme: FutureTheme) {
-  if (theme === 'legacy-dark') return 'legacy-dark';
-  if (theme === 'legacy-light') return 'legacy-light';
-  if (theme === 'wireframe') return 'future-wireframe';
-  if (theme === 'vertex') return 'future-vertex';
-  if (theme === 'canvas') return 'future-canvas';
+  if (theme === 'core-dark') return 'core-dark';
+  if (theme === 'core-light') return 'core-light';
+  if (theme === 'wireframe') return 'wireframe';
+  if (theme === 'vertex') return 'vertex';
+  if (theme === 'canvas') return 'canvas';
   if (theme === 'light') return 'future-light';
   return 'future-dark';
 }
@@ -507,13 +507,13 @@ function FloatingChat({
         onPointerMove={handleDragPointerMove}
         onPointerUp={handleDragPointerUp}
       >
-        <div className="flex items-center gap-2 rounded-full border border-future-border bg-future-surface-raised px-3 py-2.5 shadow-lg transition-all hover:bg-future-surface-hover">
-          <GripVertical className="h-3.5 w-3.5 shrink-0 cursor-grab text-future-foreground-subtle active:cursor-grabbing" />
+        <div className="flex items-center gap-2 rounded-full border border-border bg-surface-raised px-3 py-2.5 shadow-lg transition-all hover:bg-surface-hover">
+          <GripVertical className="h-3.5 w-3.5 shrink-0 cursor-grab text-foreground-subtle active:cursor-grabbing" />
           <button onClick={() => setIsCollapsed(false)} className="flex items-center gap-2">
             <AnimatedGradientIcon className="h-4 w-4" />
-            <span className="text-sm font-medium text-future-foreground">Ideas</span>
+            <span className="text-sm font-medium text-foreground">Ideas</span>
             {messages.length > 0 && (
-              <span className="flex h-5 min-w-5 items-center justify-center rounded-full bg-future-accent px-1 text-[10px] font-bold text-future-foreground-on-accent">
+              <span className="flex h-5 min-w-5 items-center justify-center rounded-full bg-brand px-1 text-[10px] font-bold text-foreground-on-accent">
                 {messages.length}
               </span>
             )}
@@ -528,29 +528,29 @@ function FloatingChat({
     <div
       ref={dragRef}
       className={cn(
-        'z-50 flex w-[320px] flex-col overflow-hidden rounded-2xl border border-future-border bg-future-surface-raised shadow-2xl select-none',
-        isDragging ? 'ring-2 ring-future-accent/30' : ''
+        'z-50 flex w-[320px] flex-col overflow-hidden rounded-2xl border border-border bg-surface-raised shadow-2xl select-none',
+        isDragging ? 'ring-2 ring-brand/30' : ''
       )}
       style={{ ...positionStyle, height: 480 }}
     >
       {/* Title bar — drag handle */}
       <div
         data-drag-handle
-        className="flex h-11 shrink-0 cursor-grab items-center justify-between border-b border-future-border-subtle bg-future-surface-overlay px-3 active:cursor-grabbing"
+        className="flex h-11 shrink-0 cursor-grab items-center justify-between border-b border-border-subtle bg-surface-overlay px-3 active:cursor-grabbing"
         onPointerDown={handleDragPointerDown}
         onPointerMove={handleDragPointerMove}
         onPointerUp={handleDragPointerUp}
       >
         <div className="flex items-center gap-2">
-          <GripVertical className="h-3.5 w-3.5 text-future-foreground-subtle" />
+          <GripVertical className="h-3.5 w-3.5 text-foreground-subtle" />
           <AnimatedGradientIcon className="h-3.5 w-3.5" />
-          <span className="text-sm font-medium text-future-foreground">Ideas Assistant</span>
+          <span className="text-sm font-medium text-foreground">Ideas Assistant</span>
         </div>
         <div className="flex items-center gap-0.5">
           {(isSetupComplete || messages.length > 0) && (
             <button
               onClick={handleReset}
-              className="flex h-6 w-6 items-center justify-center rounded-md text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground"
+              className="flex h-6 w-6 items-center justify-center rounded-md text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground"
               aria-label="Reset"
             >
               <X className="h-3.5 w-3.5" />
@@ -558,7 +558,7 @@ function FloatingChat({
           )}
           <button
             onClick={() => setIsCollapsed(true)}
-            className="flex h-6 w-6 items-center justify-center rounded-md text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground"
+            className="flex h-6 w-6 items-center justify-center rounded-md text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground"
             aria-label="Collapse chat"
           >
             <Minus className="h-3.5 w-3.5" />
@@ -567,29 +567,29 @@ function FloatingChat({
       </div>
 
       {/* Context bar */}
-      <div className="flex h-8 shrink-0 items-center gap-2 border-b border-future-border-subtle bg-future-surface-overlay/50 px-3">
+      <div className="flex h-8 shrink-0 items-center gap-2 border-b border-border-subtle bg-surface-overlay/50 px-3">
         {!isSetupComplete && setupStep === 'template' && (
           <button
             onClick={() => setPersona(null)}
-            className="flex items-center gap-0.5 rounded-md px-1.5 py-0.5 text-[10px] text-future-foreground-subtle transition-colors hover:bg-future-surface-hover hover:text-future-foreground-muted"
+            className="flex items-center gap-0.5 rounded-md px-1.5 py-0.5 text-[10px] text-foreground-subtle transition-colors hover:bg-surface-hover hover:text-foreground-muted"
           >
             <ChevronLeft className="h-3 w-3" />
             Back
           </button>
         )}
         {!isSetupComplete && setupStep === 'persona' && (
-          <span className="text-[10px] text-future-foreground-subtle">Step 1 of 2</span>
+          <span className="text-[10px] text-foreground-subtle">Step 1 of 2</span>
         )}
         {!isSetupComplete && setupStep === 'template' && (
           <>
-            <span className="text-future-foreground-subtle">·</span>
-            <span className="text-[10px] text-future-foreground-subtle">Step 2 of 2</span>
+            <span className="text-foreground-subtle">·</span>
+            <span className="text-[10px] text-foreground-subtle">Step 2 of 2</span>
           </>
         )}
         {persona && (
           <button
             onClick={() => setPersona(null)}
-            className="flex items-center gap-1 rounded-md bg-future-accent/10 px-2 py-0.5 text-[10px] font-medium text-future-foreground-accent transition-colors hover:bg-future-accent/20"
+            className="flex items-center gap-1 rounded-md bg-brand/10 px-2 py-0.5 text-[10px] font-medium text-foreground-accent transition-colors hover:bg-brand/20"
           >
             <User className="h-2.5 w-2.5" />
             {persona}
@@ -597,10 +597,10 @@ function FloatingChat({
         )}
         {persona && selectedTemplate && (
           <>
-            <span className="text-future-foreground-subtle">·</span>
+            <span className="text-foreground-subtle">·</span>
             <button
               onClick={() => setSelectedTemplate(null)}
-              className="flex items-center gap-1 rounded-md bg-future-accent/10 px-2 py-0.5 text-[10px] font-medium text-future-foreground-accent transition-colors hover:bg-future-accent/20"
+              className="flex items-center gap-1 rounded-md bg-brand/10 px-2 py-0.5 text-[10px] font-medium text-foreground-accent transition-colors hover:bg-brand/20"
             >
               {TEMPLATE_OPTIONS.find((t) => t.value === selectedTemplate)?.icon}
               {TEMPLATE_OPTIONS.find((t) => t.value === selectedTemplate)?.label}
@@ -615,12 +615,12 @@ function FloatingChat({
           <div className="flex h-full flex-col">
             {setupStep === 'persona' ? (
               <div className="flex flex-1 flex-col items-center justify-center gap-3">
-                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-future-accent/10">
-                  <User className="h-5 w-5 text-future-foreground-accent" />
+                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-brand/10">
+                  <User className="h-5 w-5 text-foreground-accent" />
                 </div>
                 <div className="text-center">
-                  <p className="text-[12px] font-medium text-future-foreground">I am a...</p>
-                  <p className="mt-1 text-[11px] leading-4 text-future-foreground-muted">
+                  <p className="text-[12px] font-medium text-foreground">I am a...</p>
+                  <p className="mt-1 text-[11px] leading-4 text-foreground-muted">
                     Select your role to personalize the output.
                   </p>
                 </div>
@@ -629,7 +629,7 @@ function FloatingChat({
                     <button
                       key={p}
                       onClick={() => setPersona(p)}
-                      className="rounded-lg border border-future-border-subtle px-3 py-1.5 text-[12px] font-normal text-future-foreground-muted transition-colors hover:border-future-accent hover:bg-future-accent/10 hover:text-future-foreground"
+                      className="rounded-lg border border-border-subtle px-3 py-1.5 text-[12px] font-normal text-foreground-muted transition-colors hover:border-brand hover:bg-brand/10 hover:text-foreground"
                     >
                       {p}
                     </button>
@@ -638,12 +638,12 @@ function FloatingChat({
               </div>
             ) : (
               <div className="flex flex-1 flex-col items-center justify-center gap-3">
-                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-future-accent/10">
-                  <LayoutDashboard className="h-5 w-5 text-future-foreground-accent" />
+                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-brand/10">
+                  <LayoutDashboard className="h-5 w-5 text-foreground-accent" />
                 </div>
                 <div className="text-center">
-                  <p className="text-[12px] font-medium text-future-foreground">Use template...</p>
-                  <p className="mt-1 text-[11px] leading-4 text-future-foreground-muted">
+                  <p className="text-[12px] font-medium text-foreground">Use template...</p>
+                  <p className="mt-1 text-[11px] leading-4 text-foreground-muted">
                     Pick a base layout for the generated output.
                   </p>
                 </div>
@@ -652,14 +652,14 @@ function FloatingChat({
                     <button
                       key={t.value}
                       onClick={() => setSelectedTemplate(t.value)}
-                      className="flex items-center gap-2.5 rounded-lg border border-future-border-subtle px-3 py-2 text-left transition-colors hover:border-future-accent hover:bg-future-accent/10"
+                      className="flex items-center gap-2.5 rounded-lg border border-border-subtle px-3 py-2 text-left transition-colors hover:border-brand hover:bg-brand/10"
                     >
-                      <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-future-surface-overlay text-future-foreground-muted">
+                      <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-surface-overlay text-foreground-muted">
                         {t.icon}
                       </span>
                       <div className="min-w-0">
-                        <p className="text-[12px] font-medium text-future-foreground">{t.label}</p>
-                        <p className="text-[10px] leading-tight text-future-foreground-subtle">{t.description}</p>
+                        <p className="text-[12px] font-medium text-foreground">{t.label}</p>
+                        <p className="text-[10px] leading-tight text-foreground-subtle">{t.description}</p>
                       </div>
                     </button>
                   ))}
@@ -669,14 +669,14 @@ function FloatingChat({
           </div>
         ) : messages.length === 0 ? (
           <div className="flex h-full flex-col items-center justify-center gap-3 text-center">
-            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-future-accent/10">
-              <Lightbulb className="h-5 w-5 text-future-foreground-accent" />
+            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-brand/10">
+              <Lightbulb className="h-5 w-5 text-foreground-accent" />
             </div>
             <div>
-              <p className="text-sm font-medium text-future-foreground">
+              <p className="text-sm font-medium text-foreground">
                 What would you like to build?
               </p>
-              <p className="mt-1 text-[11px] leading-4 text-future-foreground-muted">
+              <p className="mt-1 text-[11px] leading-4 text-foreground-muted">
                 Describe a layout and I'll generate it on the canvas.
               </p>
             </div>
@@ -685,7 +685,7 @@ function FloatingChat({
                 <button
                   key={suggestion}
                   onClick={() => setInputValue(suggestion)}
-                  className="w-full rounded-lg border border-future-border-subtle px-3 py-2 text-left text-[11px] text-future-foreground-muted transition-colors hover:border-future-border hover:bg-future-surface-hover hover:text-future-foreground"
+                  className="w-full rounded-lg border border-border-subtle px-3 py-2 text-left text-[11px] text-foreground-muted transition-colors hover:border-border hover:bg-surface-hover hover:text-foreground"
                 >
                   {suggestion}
                 </button>
@@ -700,17 +700,17 @@ function FloatingChat({
                 className={cn(
                   'max-w-[85%] rounded-xl px-3 py-2 text-xs leading-relaxed',
                   msg.role === 'user'
-                    ? 'ml-auto bg-future-accent text-future-foreground-on-accent'
-                    : 'mr-auto bg-future-surface-overlay text-future-foreground'
+                    ? 'ml-auto bg-brand text-foreground-on-accent'
+                    : 'mr-auto bg-surface-overlay text-foreground'
                 )}
               >
                 {msg.content}
               </div>
             ))}
             {isGenerating && (
-              <div className="mr-auto flex items-center gap-2 rounded-xl bg-future-surface-overlay px-3 py-2">
-                <Loader2 className="h-3 w-3 animate-spin text-future-accent" />
-                <span className="text-xs text-future-foreground-muted">Generating...</span>
+              <div className="mr-auto flex items-center gap-2 rounded-xl bg-surface-overlay px-3 py-2">
+                <Loader2 className="h-3 w-3 animate-spin text-brand" />
+                <span className="text-xs text-foreground-muted">Generating...</span>
               </div>
             )}
             <div ref={messagesEndRef} />
@@ -728,10 +728,10 @@ function FloatingChat({
 
       {/* Input area */}
       <div className={cn(
-        'shrink-0 border-t border-future-border-subtle p-2',
+        'shrink-0 border-t border-border-subtle p-2',
         (!isSetupComplete || isGenerating) && 'pointer-events-none opacity-40'
       )}>
-        <div className="flex items-end gap-1.5 rounded-xl bg-future-surface-overlay px-3 py-2">
+        <div className="flex items-end gap-1.5 rounded-xl bg-surface-overlay px-3 py-2">
           <textarea
             value={inputValue}
             onChange={(e) => setInputValue(e.target.value)}
@@ -739,15 +739,15 @@ function FloatingChat({
             placeholder={isSetupComplete ? 'Describe your idea...' : 'Complete setup above...'}
             rows={1}
             disabled={!isSetupComplete || isGenerating}
-            className="max-h-16 flex-1 resize-none bg-transparent text-xs leading-relaxed text-future-foreground placeholder:text-future-foreground-subtle focus:outline-none disabled:cursor-not-allowed"
+            className="max-h-16 flex-1 resize-none bg-transparent text-xs leading-relaxed text-foreground placeholder:text-foreground-subtle focus:outline-none disabled:cursor-not-allowed"
           />
           <button
             onClick={handleSubmit}
             disabled={!inputValue.trim() || !isSetupComplete || isGenerating}
-            className="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg bg-future-accent transition-opacity hover:opacity-90 disabled:opacity-30"
+            className="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg bg-brand transition-opacity hover:opacity-90 disabled:opacity-30"
             aria-label="Send message"
           >
-            <CornerRightUp className="h-3 w-3 text-future-foreground-on-accent" />
+            <CornerRightUp className="h-3 w-3 text-foreground-on-accent" />
           </button>
         </div>
       </div>
@@ -786,12 +786,12 @@ function IdeasCanvas({ theme, generatedCode, isGenerating }: IdeasCanvasProps) {
           }}
         />
         <div className="relative flex flex-col items-center gap-4 text-center">
-          <div className="flex h-16 w-16 items-center justify-center rounded-2xl border border-future-border-subtle bg-future-surface-raised">
-            <Lightbulb className="h-8 w-8 text-future-foreground-subtle" />
+          <div className="flex h-16 w-16 items-center justify-center rounded-2xl border border-border-subtle bg-surface-raised">
+            <Lightbulb className="h-8 w-8 text-foreground-subtle" />
           </div>
           <div>
-            <h2 className="text-lg font-semibold text-future-foreground">Your canvas is empty</h2>
-            <p className="mt-1 max-w-sm text-sm text-future-foreground-muted">
+            <h2 className="text-lg font-semibold text-foreground">Your canvas is empty</h2>
+            <p className="mt-1 max-w-sm text-sm text-foreground-muted">
               Use the chat assistant in the bottom right to describe what you'd like to build. Your
               generated layouts will appear here.
             </p>
@@ -806,8 +806,8 @@ function IdeasCanvas({ theme, generatedCode, isGenerating }: IdeasCanvasProps) {
     return (
       <div className="flex h-full w-full items-center justify-center">
         <div className="flex flex-col items-center gap-4">
-          <Loader2 className="h-10 w-10 animate-spin text-future-accent" />
-          <p className="text-sm text-future-foreground-muted">Generating layout...</p>
+          <Loader2 className="h-10 w-10 animate-spin text-brand" />
+          <p className="text-sm text-foreground-muted">Generating layout...</p>
         </div>
       </div>
     );
@@ -840,10 +840,10 @@ function IdeasCanvas({ theme, generatedCode, isGenerating }: IdeasCanvasProps) {
 
 function IdeasPage({ globalTheme }: { globalTheme: string }) {
   const theme: FutureTheme =
-    globalTheme === 'legacy-dark'
-      ? 'legacy-dark'
-      : globalTheme === 'legacy-light'
-        ? 'legacy-light'
+    globalTheme === 'core-dark'
+      ? 'core-dark'
+      : globalTheme === 'core-light'
+        ? 'core-light'
         : globalTheme === 'wireframe'
           ? 'wireframe'
           : globalTheme === 'vertex'
@@ -872,15 +872,15 @@ function IdeasPage({ globalTheme }: { globalTheme: string }) {
     <div
       className={cn(
         resolveThemeClass(theme),
-        'flex h-screen w-full flex-col bg-future-surface text-foreground'
+        'flex h-screen w-full flex-col bg-surface text-foreground'
       )}
       style={{ fontFamily: fontFamily.base }}
     >
       {/* Top bar */}
-      <div className="flex h-12 shrink-0 items-center justify-between border-b border-future-border-subtle px-5">
+      <div className="flex h-12 shrink-0 items-center justify-between border-b border-border-subtle px-5">
         <div className="flex items-center gap-2.5">
           <AnimatedGradientIcon className="h-4 w-4" />
-          <span className="text-sm font-semibold text-future-foreground">Ideas</span>
+          <span className="text-sm font-semibold text-foreground">Ideas</span>
           <AnimatedGradientText
             colorMid="#FA4616"
             className="text-[10px] font-semibold uppercase tracking-wider"
@@ -893,7 +893,7 @@ function IdeasPage({ globalTheme }: { globalTheme: string }) {
             <>
               <button
                 onClick={handleCopy}
-                className="flex h-7 items-center gap-1.5 rounded-lg border border-future-border px-2.5 text-[11px] font-medium text-future-foreground-muted transition-colors hover:border-future-border-hover hover:text-future-foreground"
+                className="flex h-7 items-center gap-1.5 rounded-lg border border-border px-2.5 text-[11px] font-medium text-foreground-muted transition-colors hover:border-border-hover hover:text-foreground"
               >
                 {copied ? (
                   <>
@@ -909,14 +909,14 @@ function IdeasPage({ globalTheme }: { globalTheme: string }) {
               </button>
               <button
                 onClick={handleClear}
-                className="flex h-7 items-center gap-1.5 rounded-lg border border-future-border px-2.5 text-[11px] font-medium text-future-foreground-muted transition-colors hover:border-red-500/50 hover:text-red-400"
+                className="flex h-7 items-center gap-1.5 rounded-lg border border-border px-2.5 text-[11px] font-medium text-foreground-muted transition-colors hover:border-red-500/50 hover:text-red-400"
               >
                 <Trash2 className="h-3 w-3" />
                 Clear
               </button>
             </>
           ) : (
-            <span className="text-[11px] text-future-foreground-subtle">
+            <span className="text-[11px] text-foreground-subtle">
               Describe an idea — see it come to life
             </span>
           )}
diff --git a/packages/apollo-wind/src/templates/Flow/template-flow.tsx b/packages/apollo-wind/src/templates/Flow/template-flow.tsx
index 154d55a7f..6363e36ae 100644
--- a/packages/apollo-wind/src/templates/Flow/template-flow.tsx
+++ b/packages/apollo-wind/src/templates/Flow/template-flow.tsx
@@ -123,16 +123,16 @@ export function FlowTemplate({
   // Sync the active theme class on document.body so Radix portals
   // (Select, Dialog, Sheet, etc.) inherit the correct CSS custom properties.
   const themeClass =
-    theme === 'legacy-dark'
-      ? 'legacy-dark'
-      : theme === 'legacy-light'
-        ? 'legacy-light'
+    theme === 'core-dark'
+      ? 'core-dark'
+      : theme === 'core-light'
+        ? 'core-light'
         : theme === 'wireframe'
-          ? 'future-wireframe'
+          ? 'wireframe'
           : theme === 'vertex'
-            ? 'future-vertex'
+            ? 'vertex'
             : theme === 'canvas'
-              ? 'future-canvas'
+              ? 'canvas'
               : theme === 'light'
                 ? 'future-light'
                 : 'future-dark';
@@ -184,20 +184,20 @@ export function FlowTemplate({
     >
       <div
         className={cn(
-          theme === 'legacy-dark'
-            ? 'legacy-dark'
-            : theme === 'legacy-light'
-              ? 'legacy-light'
+          theme === 'core-dark'
+            ? 'core-dark'
+            : theme === 'core-light'
+              ? 'core-light'
               : theme === 'wireframe'
-                ? 'future-wireframe'
+                ? 'wireframe'
                 : theme === 'vertex'
-                  ? 'future-vertex'
+                  ? 'vertex'
                   : theme === 'canvas'
-                    ? 'future-canvas'
+                    ? 'canvas'
                     : theme === 'light'
                       ? 'future-light'
                       : 'future-dark',
-          'flex h-screen bg-future-surface',
+          'flex h-screen bg-surface',
           className
         )}
         style={{ fontFamily: fontFamily.base }}
diff --git a/packages/apollo-wind/src/templates/Maestro/maestro.stories.tsx b/packages/apollo-wind/src/templates/Maestro/maestro.stories.tsx
index a53d1267c..7faa7aae3 100644
--- a/packages/apollo-wind/src/templates/Maestro/maestro.stories.tsx
+++ b/packages/apollo-wind/src/templates/Maestro/maestro.stories.tsx
@@ -33,7 +33,7 @@ function LeftPanelNav() {
         {['Button', 'Button', 'Button', 'Button', 'Button'].map((label, i) => (
           <button
             key={i}
-            className="flex h-9 items-center rounded-lg px-3 text-sm font-medium text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground"
+            className="flex h-9 items-center rounded-lg px-3 text-sm font-medium text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground"
           >
             <span className="truncate">{label}</span>
           </button>
@@ -57,7 +57,7 @@ function MenuNav() {
         {['Button', 'Button', 'Button', 'Button', 'Button'].map((label, i) => (
           <button
             key={i}
-            className="flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground"
+            className="flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground"
           >
             <SquareMenu className="h-4 w-4 shrink-0" />
             <span className="truncate">{label}</span>
@@ -66,12 +66,12 @@ function MenuNav() {
       </div>
 
       {/* Divider */}
-      <div className="my-2 border-t border-future-border-subtle" />
+      <div className="my-2 border-t border-border-subtle" />
 
       {/* More — expand / collapse */}
       <div className="flex flex-col gap-1">
         <button
-          className="flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground"
+          className="flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground"
           onClick={() => setMoreOpen((prev) => !prev)}
           aria-expanded={moreOpen}
         >
@@ -86,7 +86,7 @@ function MenuNav() {
             {['Button', 'Button', 'Button', 'Button', 'Button'].map((label, i) => (
               <button
                 key={i}
-                className="flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-future-foreground-muted transition-colors hover:bg-future-surface-hover hover:text-future-foreground"
+                className="flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground"
               >
                 <SquareMenu className="h-4 w-4 shrink-0" />
                 <span className="truncate">{label}</span>
@@ -131,10 +131,10 @@ function RightPanelCard({
 }) {
   return (
     <div className="flex flex-col gap-3">
-      <h3 className="text-sm font-semibold text-future-foreground">{title}</h3>
-      <p className="text-sm leading-5 text-future-foreground-muted">{description}</p>
+      <h3 className="text-sm font-semibold text-foreground">{title}</h3>
+      <p className="text-sm leading-5 text-foreground-muted">{description}</p>
       {actionLabel && (
-        <button className="flex h-9 w-fit items-center rounded-lg border border-future-border px-4 text-sm font-medium text-future-foreground-muted transition-colors hover:border-future-border-hover hover:text-future-foreground">
+        <button className="flex h-9 w-fit items-center rounded-lg border border-border px-4 text-sm font-medium text-foreground-muted transition-colors hover:border-border-hover hover:text-foreground">
           {actionLabel}
         </button>
       )}
@@ -148,9 +148,9 @@ function RightPanelCard({
 
 function FullWidthCard({ title, subtitle }: { title: string; subtitle: string }) {
   return (
-    <div className="rounded-xl border border-future-border-subtle bg-future-surface p-6">
-      <h3 className="text-sm font-semibold text-future-foreground">{title}</h3>
-      <p className="mt-1 text-sm text-future-foreground-muted">{subtitle}</p>
+    <div className="rounded-xl border border-border-subtle bg-surface p-6">
+      <h3 className="text-sm font-semibold text-foreground">{title}</h3>
+      <p className="mt-1 text-sm text-foreground-muted">{subtitle}</p>
     </div>
   );
 }
@@ -158,8 +158,8 @@ function FullWidthCard({ title, subtitle }: { title: string; subtitle: string })
 function SectionHeader({ title }: { title: string }) {
   return (
     <div className="flex items-center justify-between">
-      <h2 className="text-xl font-semibold text-future-foreground">{title}</h2>
-      <button className="text-sm font-medium text-future-foreground-muted transition-colors hover:text-future-foreground">
+      <h2 className="text-xl font-semibold text-foreground">{title}</h2>
+      <button className="text-sm font-medium text-foreground-muted transition-colors hover:text-foreground">
         View All
       </button>
     </div>
@@ -168,9 +168,9 @@ function SectionHeader({ title }: { title: string }) {
 
 function ColumnCard({ title, subtitle }: { title: string; subtitle: string }) {
   return (
-    <div className="rounded-xl border border-future-border-subtle bg-future-surface p-6">
-      <h3 className="text-sm font-semibold text-future-foreground">{title}</h3>
-      <p className="mt-1 text-sm text-future-foreground-muted">{subtitle}</p>
+    <div className="rounded-xl border border-border-subtle bg-surface p-6">
+      <h3 className="text-sm font-semibold text-foreground">{title}</h3>
+      <p className="mt-1 text-sm text-foreground-muted">{subtitle}</p>
     </div>
   );
 }
@@ -201,7 +201,7 @@ function FourColumnGrid() {
 
 function Badge({ label }: { label: string }) {
   return (
-    <span className="inline-flex items-center rounded-full bg-future-surface-hover px-2.5 py-0.5 text-xs font-medium text-future-foreground-muted">
+    <span className="inline-flex items-center rounded-full bg-surface-hover px-2.5 py-0.5 text-xs font-medium text-foreground-muted">
       {label}
     </span>
   );
@@ -225,7 +225,7 @@ function FeaturedCard({
   actionLabel?: string;
 }) {
   return (
-    <div className="flex flex-col gap-3 rounded-xl border border-future-border-subtle bg-future-surface p-6">
+    <div className="flex flex-col gap-3 rounded-xl border border-border-subtle bg-surface p-6">
       {/* Badges */}
       <div className="flex gap-2">
         <Badge label={badge1} />
@@ -241,10 +241,10 @@ function FeaturedCard({
         />
 
         <div className="flex flex-1 flex-col gap-2">
-          <h3 className="text-lg font-semibold text-future-foreground">{title}</h3>
-          <p className="text-sm leading-5 text-future-foreground-muted">{description}</p>
+          <h3 className="text-lg font-semibold text-foreground">{title}</h3>
+          <p className="text-sm leading-5 text-foreground-muted">{description}</p>
           <div className="mt-1 flex justify-end">
-            <button className="flex h-9 items-center rounded-lg border border-future-border px-4 text-sm font-medium text-future-foreground-muted transition-colors hover:border-future-border-hover hover:text-future-foreground">
+            <button className="flex h-9 items-center rounded-lg border border-border px-4 text-sm font-medium text-foreground-muted transition-colors hover:border-border-hover hover:text-foreground">
               {actionLabel}
             </button>
           </div>
@@ -265,11 +265,11 @@ function SimpleCard({
   actionLabel?: string;
 }) {
   return (
-    <div className="flex flex-col gap-2 rounded-xl border border-future-border-subtle bg-future-surface p-6">
-      <h3 className="text-lg font-semibold text-future-foreground">{title}</h3>
-      <p className="text-sm leading-5 text-future-foreground-muted">{description}</p>
+    <div className="flex flex-col gap-2 rounded-xl border border-border-subtle bg-surface p-6">
+      <h3 className="text-lg font-semibold text-foreground">{title}</h3>
+      <p className="text-sm leading-5 text-foreground-muted">{description}</p>
       <div className="mt-1 flex justify-end">
-        <button className="flex h-9 items-center rounded-lg border border-future-border px-4 text-sm font-medium text-future-foreground-muted transition-colors hover:border-future-border-hover hover:text-future-foreground">
+        <button className="flex h-9 items-center rounded-lg border border-border px-4 text-sm font-medium text-foreground-muted transition-colors hover:border-border-hover hover:text-foreground">
           {actionLabel}
         </button>
       </div>
@@ -361,7 +361,7 @@ const sampleTableColumns: ColumnDef<TableRow, unknown>[] = [
   {
     accessorKey: 'name',
     header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
-    cell: ({ row }) => <span className="text-future-foreground">{row.getValue('name')}</span>,
+    cell: ({ row }) => <span className="text-foreground">{row.getValue('name')}</span>,
   },
   {
     accessorKey: 'status',
@@ -373,27 +373,27 @@ const sampleTableColumns: ColumnDef<TableRow, unknown>[] = [
           ? 'text-green-400'
           : status === 'Pending'
             ? 'text-yellow-400'
-            : 'text-future-foreground-muted';
+            : 'text-foreground-muted';
       return <span className={color}>{status}</span>;
     },
   },
   {
     accessorKey: 'type',
     header: ({ column }) => <DataTableColumnHeader column={column} title="Type" />,
-    cell: ({ row }) => <span className="text-future-foreground-muted">{row.getValue('type')}</span>,
+    cell: ({ row }) => <span className="text-foreground-muted">{row.getValue('type')}</span>,
   },
   {
     accessorKey: 'lastModified',
     header: ({ column }) => <DataTableColumnHeader column={column} title="Last Modified" />,
     cell: ({ row }) => (
-      <span className="text-future-foreground-muted">{row.getValue('lastModified')}</span>
+      <span className="text-foreground-muted">{row.getValue('lastModified')}</span>
     ),
   },
   {
     accessorKey: 'owner',
     header: ({ column }) => <DataTableColumnHeader column={column} title="Owner" />,
     cell: ({ row }) => (
-      <span className="text-future-foreground-muted">{row.getValue('owner')}</span>
+      <span className="text-foreground-muted">{row.getValue('owner')}</span>
     ),
   },
 ];
@@ -409,7 +409,7 @@ function LeftPanelCollapsedContent() {
       <img
         src="https://images.ctfassets.net/5965pury2lcm/145el1SuDOOTj7t61htNHe/11ab290de043018bc89fb0bbca017489/Solutions_%C3%A2___byIndustry_01.jpg"
         alt="Hero"
-        className="w-full rounded-xl border border-future-border-subtle object-cover"
+        className="w-full rounded-xl border border-border-subtle object-cover"
         style={{ height: 250 }}
       />
 
@@ -430,7 +430,7 @@ function LeftPanelCollapsedContent() {
 
       {/* Section 3 — Data table */}
       <SectionHeader title="Title" />
-      <div className="rounded-xl border border-future-border-subtle bg-future-surface p-4">
+      <div className="rounded-xl border border-border-subtle bg-surface p-4">
         <DataTable
           columns={sampleTableColumns}
           data={sampleTableData}
@@ -635,10 +635,10 @@ const transactionColumns: ColumnDef<TransactionRow, unknown>[] = [
     header: ({ column }) => <DataTableColumnHeader column={column} title="Customer" />,
     cell: ({ row }) => (
       <div className="flex flex-col">
-        <span className="text-sm font-medium text-future-foreground">
+        <span className="text-sm font-medium text-foreground">
           {row.getValue('customer')}
         </span>
-        <span className="text-xs text-future-foreground-muted">{row.original.email}</span>
+        <span className="text-xs text-foreground-muted">{row.original.email}</span>
       </div>
     ),
   },
@@ -675,7 +675,7 @@ const transactionColumns: ColumnDef<TransactionRow, unknown>[] = [
         Failed: 'text-red-400',
       };
       return (
-        <span className={`text-sm ${colors[status] ?? 'text-future-foreground-muted'}`}>
+        <span className={`text-sm ${colors[status] ?? 'text-foreground-muted'}`}>
           {status}
         </span>
       );
@@ -685,14 +685,14 @@ const transactionColumns: ColumnDef<TransactionRow, unknown>[] = [
     accessorKey: 'amount',
     header: ({ column }) => <DataTableColumnHeader column={column} title="Amount" />,
     cell: ({ row }) => (
-      <span className="text-sm font-medium text-future-foreground">{row.getValue('amount')}</span>
+      <span className="text-sm font-medium text-foreground">{row.getValue('amount')}</span>
     ),
   },
   {
     accessorKey: 'date',
     header: ({ column }) => <DataTableColumnHeader column={column} title="Date" />,
     cell: ({ row }) => (
-      <span className="text-sm text-future-foreground-muted">{row.getValue('date')}</span>
+      <span className="text-sm text-foreground-muted">{row.getValue('date')}</span>
     ),
   },
 ];
@@ -723,14 +723,14 @@ function DashboardContent() {
   return (
     <div className="flex flex-col gap-6">
       {/* Tabs */}
-      <div className="flex gap-1 border-b border-future-border-subtle">
+      <div className="flex gap-1 border-b border-border-subtle">
         {dashboardTabs.map((tab) => (
           <button
             key={tab}
             className={`px-4 pb-3 text-sm font-medium transition-colors ${
               activeTab === tab
-                ? 'border-b-2 border-future-accent text-future-foreground'
-                : 'text-future-foreground-muted hover:text-future-foreground'
+                ? 'border-b-2 border-brand text-foreground'
+                : 'text-foreground-muted hover:text-foreground'
             }`}
             onClick={() => setActiveTab(tab)}
           >
@@ -746,16 +746,16 @@ function DashboardContent() {
             {dashboardStats.map((stat) => (
               <div
                 key={stat.title}
-                className="flex flex-col gap-2 rounded-xl border border-future-border-subtle bg-future-surface p-6"
+                className="flex flex-col gap-2 rounded-xl border border-border-subtle bg-surface p-6"
               >
                 <div className="flex items-center justify-between">
-                  <span className="text-sm font-medium text-future-foreground-muted">
+                  <span className="text-sm font-medium text-foreground-muted">
                     {stat.title}
                   </span>
-                  <span className="text-future-foreground-subtle">{stat.icon}</span>
+                  <span className="text-foreground-subtle">{stat.icon}</span>
                 </div>
-                <span className="text-2xl font-bold text-future-foreground">{stat.value}</span>
-                <span className="text-xs text-future-foreground-muted">{stat.change}</span>
+                <span className="text-2xl font-bold text-foreground">{stat.value}</span>
+                <span className="text-xs text-foreground-muted">{stat.change}</span>
               </div>
             ))}
           </div>
@@ -763,13 +763,13 @@ function DashboardContent() {
           {/* Recent Transactions */}
           <div className="flex flex-col gap-4">
             <div className="flex items-center justify-between">
-              <h2 className="text-xl font-semibold text-future-foreground">Recent Transactions</h2>
-              <button className="flex h-9 items-center gap-2 rounded-lg border border-future-border bg-future-surface px-4 text-sm font-medium text-future-foreground-muted transition-colors hover:border-future-border-hover hover:text-future-foreground">
+              <h2 className="text-xl font-semibold text-foreground">Recent Transactions</h2>
+              <button className="flex h-9 items-center gap-2 rounded-lg border border-border bg-surface px-4 text-sm font-medium text-foreground-muted transition-colors hover:border-border-hover hover:text-foreground">
                 <Download className="h-4 w-4" />
                 Export
               </button>
             </div>
-            <div className="rounded-xl border border-future-border-subtle bg-future-surface p-4">
+            <div className="rounded-xl border border-border-subtle bg-surface p-4">
               <DataTable
                 columns={transactionColumns}
                 data={transactionData}
@@ -785,10 +785,10 @@ function DashboardContent() {
           {/* Bottom two cards */}
           <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             {/* Recent Activity */}
-            <div className="flex flex-col rounded-xl border border-future-border-subtle bg-future-surface">
-              <div className="flex items-center justify-between border-b border-future-border-subtle px-6 py-4">
-                <h3 className="text-base font-semibold text-future-foreground">Recent Activity</h3>
-                <button className="text-sm font-medium text-future-foreground-muted transition-colors hover:text-future-foreground">
+            <div className="flex flex-col rounded-xl border border-border-subtle bg-surface">
+              <div className="flex items-center justify-between border-b border-border-subtle px-6 py-4">
+                <h3 className="text-base font-semibold text-foreground">Recent Activity</h3>
+                <button className="text-sm font-medium text-foreground-muted transition-colors hover:text-foreground">
                   View all
                 </button>
               </div>
@@ -796,28 +796,28 @@ function DashboardContent() {
                 {recentActivity.map((item, i) => (
                   <div
                     key={i}
-                    className="flex items-center gap-4 border-b border-future-border-subtle px-6 py-3 last:border-b-0"
+                    className="flex items-center gap-4 border-b border-border-subtle px-6 py-3 last:border-b-0"
                   >
-                    <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-future-surface-overlay text-xs font-semibold text-future-foreground">
+                    <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-surface-overlay text-xs font-semibold text-foreground">
                       {item.initials}
                     </div>
                     <div className="flex flex-1 flex-col">
-                      <span className="text-sm font-medium text-future-foreground">
+                      <span className="text-sm font-medium text-foreground">
                         {item.name}
                       </span>
-                      <span className="text-xs text-future-foreground-muted">{item.action}</span>
+                      <span className="text-xs text-foreground-muted">{item.action}</span>
                     </div>
-                    <span className="text-xs text-future-foreground-subtle">{item.time}</span>
+                    <span className="text-xs text-foreground-subtle">{item.time}</span>
                   </div>
                 ))}
               </div>
             </div>
 
             {/* Monthly Goals */}
-            <div className="flex flex-col rounded-xl border border-future-border-subtle bg-future-surface">
-              <div className="flex items-center justify-between border-b border-future-border-subtle px-6 py-4">
-                <h3 className="text-base font-semibold text-future-foreground">Monthly Goals</h3>
-                <button className="text-sm font-medium text-future-foreground-muted transition-colors hover:text-future-foreground">
+            <div className="flex flex-col rounded-xl border border-border-subtle bg-surface">
+              <div className="flex items-center justify-between border-b border-border-subtle px-6 py-4">
+                <h3 className="text-base font-semibold text-foreground">Monthly Goals</h3>
+                <button className="text-sm font-medium text-foreground-muted transition-colors hover:text-foreground">
                   View all
                 </button>
               </div>
@@ -833,16 +833,16 @@ function DashboardContent() {
                   return (
                     <div key={goal.label} className="flex flex-col gap-2">
                       <div className="flex items-center justify-between">
-                        <span className="text-sm font-medium text-future-foreground">
+                        <span className="text-sm font-medium text-foreground">
                           {goal.label}
                         </span>
-                        <span className="text-xs text-future-foreground-muted">
+                        <span className="text-xs text-foreground-muted">
                           {fmt(goal.current)} / {fmt(goal.target)}
                         </span>
                       </div>
                       <Progress
                         value={pct}
-                        className="h-2 bg-future-surface-overlay [&>div]:bg-future-accent"
+                        className="h-2 bg-surface-overlay [&>div]:bg-brand"
                       />
                     </div>
                   );
@@ -852,7 +852,7 @@ function DashboardContent() {
           </div>
         </div>
       ) : (
-        <div className="flex flex-1 items-center justify-center py-20 text-sm text-future-foreground-muted">
+        <div className="flex flex-1 items-center justify-center py-20 text-sm text-foreground-muted">
           Coming soon
         </div>
       )}
diff --git a/packages/apollo-wind/src/templates/Maestro/template-maestro.tsx b/packages/apollo-wind/src/templates/Maestro/template-maestro.tsx
index 20d35b709..0b328108e 100644
--- a/packages/apollo-wind/src/templates/Maestro/template-maestro.tsx
+++ b/packages/apollo-wind/src/templates/Maestro/template-maestro.tsx
@@ -121,20 +121,20 @@ export function MaestroTemplate({
     >
       <div
         className={cn(
-          theme === 'legacy-dark'
-            ? 'legacy-dark'
-            : theme === 'legacy-light'
-              ? 'legacy-light'
+          theme === 'core-dark'
+            ? 'core-dark'
+            : theme === 'core-light'
+              ? 'core-light'
               : theme === 'wireframe'
-                ? 'future-wireframe'
+                ? 'wireframe'
                 : theme === 'vertex'
-                  ? 'future-vertex'
+                  ? 'vertex'
                   : theme === 'canvas'
-                    ? 'future-canvas'
+                    ? 'canvas'
                     : theme === 'light'
                       ? 'future-light'
                       : 'future-dark',
-          'flex h-screen flex-col bg-future-surface text-foreground',
+          'flex h-screen flex-col bg-surface text-foreground',
           className
         )}
         style={{ fontFamily: fontFamily.base }}
diff --git a/packages/apollo-wind/src/templates/Maestro/visualization.stories.tsx b/packages/apollo-wind/src/templates/Maestro/visualization.stories.tsx
index a8ed8ba6c..ec3d70601 100644
--- a/packages/apollo-wind/src/templates/Maestro/visualization.stories.tsx
+++ b/packages/apollo-wind/src/templates/Maestro/visualization.stories.tsx
@@ -303,10 +303,10 @@ function AreaChartSection() {
   return (
     <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
       {/* Stacked area */}
-      <Card className="border-future-border-subtle bg-future-surface">
+      <Card className="border-border-subtle bg-surface">
         <CardHeader>
-          <CardTitle className="text-future-foreground">Stacked Area Chart</CardTitle>
-          <CardDescription className="text-future-foreground-muted">
+          <CardTitle className="text-foreground">Stacked Area Chart</CardTitle>
+          <CardDescription className="text-foreground-muted">
             Total visitors by device over the last 6 months
           </CardDescription>
         </CardHeader>
@@ -336,10 +336,10 @@ function AreaChartSection() {
       </Card>
 
       {/* Step area */}
-      <Card className="border-future-border-subtle bg-future-surface">
+      <Card className="border-border-subtle bg-surface">
         <CardHeader>
-          <CardTitle className="text-future-foreground">Step Area Chart</CardTitle>
-          <CardDescription className="text-future-foreground-muted">
+          <CardTitle className="text-foreground">Step Area Chart</CardTitle>
+          <CardDescription className="text-foreground-muted">
             Page views and sessions with step interpolation
           </CardDescription>
         </CardHeader>
@@ -384,11 +384,11 @@ function BarChartSection() {
   return (
     <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
       {/* Interactive vertical bar */}
-      <Card className="border-future-border-subtle bg-future-surface">
-        <CardHeader className="flex flex-col items-stretch space-y-0 border-b border-future-border-subtle p-0 sm:flex-row">
+      <Card className="border-border-subtle bg-surface">
+        <CardHeader className="flex flex-col items-stretch space-y-0 border-b border-border-subtle p-0 sm:flex-row">
           <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
-            <CardTitle className="text-future-foreground">Interactive Bar Chart</CardTitle>
-            <CardDescription className="text-future-foreground-muted">
+            <CardTitle className="text-foreground">Interactive Bar Chart</CardTitle>
+            <CardDescription className="text-foreground-muted">
               Daily visitors — click a toggle to filter
             </CardDescription>
           </div>
@@ -397,13 +397,13 @@ function BarChartSection() {
               <button
                 key={key}
                 data-active={activeKey === key}
-                className="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t border-future-border-subtle px-6 py-4 text-left even:border-l data-[active=true]:bg-future-surface-overlay sm:border-l sm:border-t-0 sm:px-8 sm:py-6"
+                className="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t border-border-subtle px-6 py-4 text-left even:border-l data-[active=true]:bg-surface-overlay sm:border-l sm:border-t-0 sm:px-8 sm:py-6"
                 onClick={() => setActiveKey(key)}
               >
-                <span className="text-xs text-future-foreground-muted">
+                <span className="text-xs text-foreground-muted">
                   {barConfig[key].label}
                 </span>
-                <span className="text-lg font-bold leading-none text-future-foreground sm:text-3xl">
+                <span className="text-lg font-bold leading-none text-foreground sm:text-3xl">
                   {total[key].toLocaleString()}
                 </span>
               </button>
@@ -447,10 +447,10 @@ function BarChartSection() {
       </Card>
 
       {/* Horizontal bar */}
-      <Card className="border-future-border-subtle bg-future-surface">
+      <Card className="border-border-subtle bg-surface">
         <CardHeader>
-          <CardTitle className="text-future-foreground">Horizontal Bar Chart</CardTitle>
-          <CardDescription className="text-future-foreground-muted">
+          <CardTitle className="text-foreground">Horizontal Bar Chart</CardTitle>
+          <CardDescription className="text-foreground-muted">
             Framework popularity — developer survey 2026
           </CardDescription>
         </CardHeader>
@@ -474,10 +474,10 @@ function LineChartSection() {
   return (
     <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
       {/* Multi-line with dots */}
-      <Card className="border-future-border-subtle bg-future-surface">
+      <Card className="border-border-subtle bg-surface">
         <CardHeader>
-          <CardTitle className="text-future-foreground">Multi-Line Chart</CardTitle>
-          <CardDescription className="text-future-foreground-muted">
+          <CardTitle className="text-foreground">Multi-Line Chart</CardTitle>
+          <CardDescription className="text-foreground-muted">
             Visitors across three device types with dots and grid
           </CardDescription>
         </CardHeader>
@@ -498,10 +498,10 @@ function LineChartSection() {
       </Card>
 
       {/* Curved line — no dots */}
-      <Card className="border-future-border-subtle bg-future-surface">
+      <Card className="border-border-subtle bg-surface">
         <CardHeader>
-          <CardTitle className="text-future-foreground">Curved Line Chart</CardTitle>
-          <CardDescription className="text-future-foreground-muted">
+          <CardTitle className="text-foreground">Curved Line Chart</CardTitle>
+          <CardDescription className="text-foreground-muted">
             Revenue vs profit with natural curve interpolation
           </CardDescription>
         </CardHeader>
@@ -532,10 +532,10 @@ function PieChartSection() {
   return (
     <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
       {/* Donut chart */}
-      <Card className="border-future-border-subtle bg-future-surface">
+      <Card className="border-border-subtle bg-surface">
         <CardHeader>
-          <CardTitle className="text-future-foreground">Donut Chart</CardTitle>
-          <CardDescription className="text-future-foreground-muted">
+          <CardTitle className="text-foreground">Donut Chart</CardTitle>
+          <CardDescription className="text-foreground-muted">
             Browser market share — January–June 2026
           </CardDescription>
         </CardHeader>
@@ -575,10 +575,10 @@ function PieChartSection() {
       </Card>
 
       {/* Simple pie */}
-      <Card className="border-future-border-subtle bg-future-surface">
+      <Card className="border-border-subtle bg-surface">
         <CardHeader>
-          <CardTitle className="text-future-foreground">Pie Chart</CardTitle>
-          <CardDescription className="text-future-foreground-muted">
+          <CardTitle className="text-foreground">Pie Chart</CardTitle>
+          <CardDescription className="text-foreground-muted">
             Traffic sources — January–June 2026
           </CardDescription>
         </CardHeader>
@@ -608,10 +608,10 @@ function RadarChartSection() {
   return (
     <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
       {/* Multi-series radar */}
-      <Card className="border-future-border-subtle bg-future-surface">
+      <Card className="border-border-subtle bg-surface">
         <CardHeader>
-          <CardTitle className="text-future-foreground">Radar Chart</CardTitle>
-          <CardDescription className="text-future-foreground-muted">
+          <CardTitle className="text-foreground">Radar Chart</CardTitle>
+          <CardDescription className="text-foreground-muted">
             Platform performance across 6 dimensions
           </CardDescription>
         </CardHeader>
@@ -630,10 +630,10 @@ function RadarChartSection() {
       </Card>
 
       {/* Single-series radar (dots) */}
-      <Card className="border-future-border-subtle bg-future-surface">
+      <Card className="border-border-subtle bg-surface">
         <CardHeader>
-          <CardTitle className="text-future-foreground">Radar — Dots</CardTitle>
-          <CardDescription className="text-future-foreground-muted">
+          <CardTitle className="text-foreground">Radar — Dots</CardTitle>
+          <CardDescription className="text-foreground-muted">
             Developer skill proficiency radar with dots
           </CardDescription>
         </CardHeader>
@@ -663,10 +663,10 @@ function RadialChartSection() {
   return (
     <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
       {/* Multi-segment radial bar */}
-      <Card className="border-future-border-subtle bg-future-surface">
+      <Card className="border-border-subtle bg-surface">
         <CardHeader>
-          <CardTitle className="text-future-foreground">Radial Bar Chart</CardTitle>
-          <CardDescription className="text-future-foreground-muted">
+          <CardTitle className="text-foreground">Radial Bar Chart</CardTitle>
+          <CardDescription className="text-foreground-muted">
             Browser visitors as stacked radial segments
           </CardDescription>
         </CardHeader>
@@ -695,10 +695,10 @@ function RadialChartSection() {
       </Card>
 
       {/* Semi-circle gauge */}
-      <Card className="border-future-border-subtle bg-future-surface">
+      <Card className="border-border-subtle bg-surface">
         <CardHeader>
-          <CardTitle className="text-future-foreground">Radial Gauge</CardTitle>
-          <CardDescription className="text-future-foreground-muted">
+          <CardTitle className="text-foreground">Radial Gauge</CardTitle>
+          <CardDescription className="text-foreground-muted">
             Sprint completion progress — 72%
           </CardDescription>
         </CardHeader>
@@ -743,10 +743,10 @@ function TooltipShowcase() {
   return (
     <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
       {/* Dot indicator */}
-      <Card className="border-future-border-subtle bg-future-surface">
+      <Card className="border-border-subtle bg-surface">
         <CardHeader>
-          <CardTitle className="text-future-foreground">Dot Indicator</CardTitle>
-          <CardDescription className="text-future-foreground-muted">
+          <CardTitle className="text-foreground">Dot Indicator</CardTitle>
+          <CardDescription className="text-foreground-muted">
             Default dot-style tooltip indicator
           </CardDescription>
         </CardHeader>
@@ -764,10 +764,10 @@ function TooltipShowcase() {
       </Card>
 
       {/* Line indicator */}
-      <Card className="border-future-border-subtle bg-future-surface">
+      <Card className="border-border-subtle bg-surface">
         <CardHeader>
-          <CardTitle className="text-future-foreground">Line Indicator</CardTitle>
-          <CardDescription className="text-future-foreground-muted">
+          <CardTitle className="text-foreground">Line Indicator</CardTitle>
+          <CardDescription className="text-foreground-muted">
             Vertical line-style tooltip indicator
           </CardDescription>
         </CardHeader>
@@ -785,10 +785,10 @@ function TooltipShowcase() {
       </Card>
 
       {/* Dashed indicator */}
-      <Card className="border-future-border-subtle bg-future-surface">
+      <Card className="border-border-subtle bg-surface">
         <CardHeader>
-          <CardTitle className="text-future-foreground">Dashed Indicator</CardTitle>
-          <CardDescription className="text-future-foreground-muted">
+          <CardTitle className="text-foreground">Dashed Indicator</CardTitle>
+          <CardDescription className="text-foreground-muted">
             Dashed border-style tooltip indicator
           </CardDescription>
         </CardHeader>
@@ -816,7 +816,7 @@ function LeftPanelCharts() {
   return (
     <div className="flex flex-col gap-4 p-6">
       <div>
-        <p className="mb-2 text-xs font-medium text-future-foreground-muted">Traffic sources</p>
+        <p className="mb-2 text-xs font-medium text-foreground-muted">Traffic sources</p>
         <ChartContainer config={pieSimpleConfig} className="aspect-square max-h-[120px] w-full">
           <PieChart>
             <ChartTooltip content={<ChartTooltipContent hideLabel />} />
@@ -831,9 +831,9 @@ function LeftPanelCharts() {
           </PieChart>
         </ChartContainer>
       </div>
-      <Separator className="bg-future-border-subtle" />
+      <Separator className="bg-border-subtle" />
       <div>
-        <p className="mb-2 text-xs font-medium text-future-foreground-muted">Framework popularity</p>
+        <p className="mb-2 text-xs font-medium text-foreground-muted">Framework popularity</p>
         <ChartContainer config={barHorizontalConfig} className="aspect-auto h-[140px] w-full">
           <BarChart data={barHorizontalData} layout="vertical" margin={{ left: 40, right: 12 }}>
             <CartesianGrid horizontal={false} />
@@ -852,7 +852,7 @@ function RightPanelCharts() {
   return (
     <div className="flex flex-col gap-4 p-6">
       <div className="w-full">
-        <p className="mb-2 text-xs font-medium text-future-foreground-muted">Dot Indicator</p>
+        <p className="mb-2 text-xs font-medium text-foreground-muted">Dot Indicator</p>
         <ChartContainer config={tooltipDotConfig} className="w-full aspect-auto h-[120px] justify-start">
           <BarChart data={tooltipData} margin={{ left: 12, right: 12 }}>
             <CartesianGrid vertical={false} />
@@ -863,9 +863,9 @@ function RightPanelCharts() {
           </BarChart>
         </ChartContainer>
       </div>
-      <Separator className="bg-future-border-subtle" />
+      <Separator className="bg-border-subtle" />
       <div className="w-full">
-        <p className="mb-2 text-xs font-medium text-future-foreground-muted">Dashed Indicator</p>
+        <p className="mb-2 text-xs font-medium text-foreground-muted">Dashed Indicator</p>
         <ChartContainer config={tooltipDashedConfig} className="w-full aspect-auto h-[120px] justify-start">
           <BarChart data={tooltipData} margin={{ left: 12, right: 12 }}>
             <CartesianGrid vertical={false} />
@@ -900,38 +900,38 @@ function VisualizationContent() {
   return (
     <div className="flex flex-col gap-6">
       {/* Intro — charts stack and usage */}
-      <Card className="border-future-border-subtle bg-future-surface">
+      <Card className="border-border-subtle bg-surface">
         <CardHeader>
-          <CardTitle className="text-future-foreground">How to use</CardTitle>
+          <CardTitle className="text-foreground">How to use</CardTitle>
         </CardHeader>
         <CardContent>
-          <p className="text-sm text-future-foreground">
+          <p className="text-sm text-foreground">
             <a
               href="https://ui.shadcn.com/charts/area"
               target="_blank"
               rel="noopener noreferrer"
-              className="font-semibold text-future-accent-foreground underline underline-offset-2 hover:text-future-accent-foreground/80"
+              className="font-semibold text-brand-foreground underline underline-offset-2 hover:text-brand-foreground/80"
             >
               Recharts
             </a>{' '}
             powers these visuals. Wrap Recharts primitives with{' '}
-            <code className="rounded bg-future-surface-overlay px-1.5 py-0.5 font-mono text-xs">ChartContainer</code>,{' '}
-            <code className="rounded bg-future-surface-overlay px-1.5 py-0.5 font-mono text-xs">ChartTooltip</code>, and{' '}
-            <code className="rounded bg-future-surface-overlay px-1.5 py-0.5 font-mono text-xs">ChartLegend</code> from{' '}
-            <code className="rounded bg-future-surface-overlay px-1.5 py-0.5 font-mono text-xs">@/components/ui/chart</code>. Provide a <code className="rounded bg-future-surface-overlay px-1.5 py-0.5 font-mono text-xs">ChartConfig</code> for theming.
+            <code className="rounded bg-surface-overlay px-1.5 py-0.5 font-mono text-xs">ChartContainer</code>,{' '}
+            <code className="rounded bg-surface-overlay px-1.5 py-0.5 font-mono text-xs">ChartTooltip</code>, and{' '}
+            <code className="rounded bg-surface-overlay px-1.5 py-0.5 font-mono text-xs">ChartLegend</code> from{' '}
+            <code className="rounded bg-surface-overlay px-1.5 py-0.5 font-mono text-xs">@/components/ui/chart</code>. Provide a <code className="rounded bg-surface-overlay px-1.5 py-0.5 font-mono text-xs">ChartConfig</code> for theming.
           </p>
         </CardContent>
       </Card>
 
       {/* Tab bar */}
-      <div className="flex gap-1 overflow-x-auto border-b border-future-border-subtle">
+      <div className="flex gap-1 overflow-x-auto border-b border-border-subtle">
         {TABS.map((tab) => (
           <button
             key={tab}
             className={`shrink-0 px-4 pb-3 text-sm font-medium transition-colors ${
               activeTab === tab
-                ? 'border-b-2 border-future-accent text-future-foreground'
-                : 'text-future-foreground-muted hover:text-future-foreground'
+                ? 'border-b-2 border-brand text-foreground'
+                : 'text-foreground-muted hover:text-foreground'
             }`}
             onClick={() => setActiveTab(tab)}
           >
diff --git a/packages/apollo-wind/src/templates/Studio/studio.stories.tsx b/packages/apollo-wind/src/templates/Studio/studio.stories.tsx
new file mode 100644
index 000000000..0ae50d302
--- /dev/null
+++ b/packages/apollo-wind/src/templates/Studio/studio.stories.tsx
@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fontFamily } from '@/foundation/Future/typography';
+import { cn } from '@/lib';
+
+// ============================================================================
+// Meta
+// ============================================================================
+
+const meta = {
+  title: 'Templates/Future/Studio',
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+function resolveThemeClass(value: string) {
+  if (value === 'core-dark') return 'core-dark';
+  if (value === 'core-light') return 'core-light';
+  if (value === 'wireframe') return 'wireframe';
+  if (value === 'vertex') return 'vertex';
+  if (value === 'canvas') return 'canvas';
+  if (value === 'light') return 'future-light';
+  return 'future-dark';
+}
+
+// ============================================================================
+// Coming Soon placeholder
+// ============================================================================
+
+function ComingSoon({ theme, variant }: { theme: string; variant: string }) {
+  const themeClass = resolveThemeClass(theme);
+
+  return (
+    <div
+      className={cn(themeClass, 'flex min-h-screen w-full items-center justify-center bg-background text-foreground')}
+      style={{ fontFamily: fontFamily.base }}
+    >
+      <div className="flex flex-col items-center gap-3 text-center">
+        <h1 className="text-2xl font-bold tracking-tight text-foreground">
+          Studio — {variant}
+        </h1>
+        <p className="text-base text-muted-foreground">Coming soon</p>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// Stories
+// ============================================================================
+
+export const Blank: Story = {
+  render: (_, { globals }) => (
+    <ComingSoon theme={globals.futureTheme || 'dark'} variant="Blank" />
+  ),
+};
+
+export const Panels: Story = {
+  render: (_, { globals }) => (
+    <ComingSoon theme={globals.futureTheme || 'dark'} variant="Panels" />
+  ),
+};
diff --git a/packages/apollo-wind/src/templates/VisualStudio/visual-studio.stories.tsx b/packages/apollo-wind/src/templates/VisualStudio/visual-studio.stories.tsx
index 93f6cc038..1a861d79a 100644
--- a/packages/apollo-wind/src/templates/VisualStudio/visual-studio.stories.tsx
+++ b/packages/apollo-wind/src/templates/VisualStudio/visual-studio.stories.tsx
@@ -40,11 +40,11 @@ type Story = StoryObj<typeof meta>;
 // ============================================================================
 
 function resolveThemeClass(value: string) {
-  if (value === 'legacy-dark') return 'legacy-dark';
-  if (value === 'legacy-light') return 'legacy-light';
-  if (value === 'wireframe') return 'future-wireframe';
-  if (value === 'vertex') return 'future-vertex';
-  if (value === 'canvas') return 'future-canvas';
+  if (value === 'core-dark') return 'core-dark';
+  if (value === 'core-light') return 'core-light';
+  if (value === 'wireframe') return 'wireframe';
+  if (value === 'vertex') return 'vertex';
+  if (value === 'canvas') return 'canvas';
   if (value === 'light') return 'future-light';
   return 'future-dark';
 }
@@ -108,7 +108,7 @@ function VSCodeShellDemo({ theme }: { theme: string }) {
 
   return (
     <div
-      className={cn(themeClass, 'flex h-screen w-full bg-future-surface')}
+      className={cn(themeClass, 'flex h-screen w-full bg-surface')}
       style={{ fontFamily: fontFamily.base }}
     >
       <Shell className="h-full w-full rounded-none border-0">
@@ -228,7 +228,7 @@ function MinimalShellDemo({ theme }: { theme: string }) {
 
   return (
     <div
-      className={cn(themeClass, 'flex h-screen w-full bg-future-surface')}
+      className={cn(themeClass, 'flex h-screen w-full bg-surface')}
       style={{ fontFamily: fontFamily.base }}
     >
       <Shell className="h-full w-full rounded-none border-0">
@@ -260,7 +260,7 @@ function SidebarOnlyDemo({ theme }: { theme: string }) {
 
   return (
     <div
-      className={cn(themeClass, 'flex h-screen w-full bg-future-surface')}
+      className={cn(themeClass, 'flex h-screen w-full bg-surface')}
       style={{ fontFamily: fontFamily.base }}
     >
       <Shell className="h-full w-full rounded-none border-0">

From 4f6a91c808374b304bc436b4629c373bdc7bf696 Mon Sep 17 00:00:00 2001
From: Cristian Calina <cristian.calina@uipath.com>
Date: Fri, 27 Feb 2026 10:50:09 -0800
Subject: [PATCH 6/8] fix(apollo-wind): dependencies consistency

---
 packages/apollo-wind/package.json |  4 +--
 pnpm-lock.yaml                    | 42 +++----------------------------
 2 files changed, 5 insertions(+), 41 deletions(-)

diff --git a/packages/apollo-wind/package.json b/packages/apollo-wind/package.json
index 9c671b9f6..07db45c68 100644
--- a/packages/apollo-wind/package.json
+++ b/packages/apollo-wind/package.json
@@ -87,7 +87,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
-    "framer-motion": "^11.15.0",
+    "framer-motion": "^12.26.2",
     "jsep": "^1.4.0",
     "lucide-react": "^0.555.0",
     "next-themes": "^0.4.6",
@@ -95,7 +95,7 @@
     "react-hook-form": "^7.66.1",
     "react-live": "^4.1.8",
     "react-resizable-panels": "^3.0.6",
-    "recharts": "^2.15.4",
+    "recharts": "2.15.4",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.17",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1da54e5fc..8e6deafb9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -870,8 +870,8 @@ importers:
         specifier: ^4.1.0
         version: 4.1.0
       framer-motion:
-        specifier: ^11.15.0
-        version: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        specifier: ^12.26.2
+        version: 12.26.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       jsep:
         specifier: ^1.4.0
         version: 1.4.0
@@ -894,7 +894,7 @@ importers:
         specifier: ^3.0.6
         version: 3.0.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       recharts:
-        specifier: ^2.15.4
+        specifier: 2.15.4
         version: 2.15.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       sonner:
         specifier: ^2.0.7
@@ -8017,20 +8017,6 @@ packages:
   fraction.js@5.3.4:
     resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
 
-  framer-motion@11.18.2:
-    resolution: {integrity: sha512-5F5Och7wrvtLVElIpclDT0CBzMVg3dL22B64aZwHtsIY8RB4mXICLrkajK4G9R+ieSAGcgrLeae2SeUTg2pr6w==}
-    peerDependencies:
-      '@emotion/is-prop-valid': '*'
-      react: ^18.0.0 || ^19.0.0
-      react-dom: ^18.0.0 || ^19.0.0
-    peerDependenciesMeta:
-      '@emotion/is-prop-valid':
-        optional: true
-      react:
-        optional: true
-      react-dom:
-        optional: true
-
   framer-motion@12.23.26:
     resolution: {integrity: sha512-cPcIhgR42xBn1Uj+PzOyheMtZ73H927+uWPDVhUMqxy8UHt6Okavb6xIz9J/phFUHUj0OncR6UvMfJTXoc/LKA==}
     peerDependencies:
@@ -9694,18 +9680,12 @@ packages:
   moo@0.5.2:
     resolution: {integrity: sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q==}
 
-  motion-dom@11.18.1:
-    resolution: {integrity: sha512-g76KvA001z+atjfxczdRtw/RXOM3OMSdd1f4DL77qCTF/+avrRJiawSG4yDibEQ215sr9kpinSlX2pCTJ9zbhw==}
-
   motion-dom@12.23.23:
     resolution: {integrity: sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==}
 
   motion-dom@12.26.2:
     resolution: {integrity: sha512-KLMT1BroY8oKNeliA3JMNJ+nbCIsTKg6hJpDb4jtRAJ7nCKnnpg/LTq/NGqG90Limitz3kdAnAVXecdFVGlWTw==}
 
-  motion-utils@11.18.1:
-    resolution: {integrity: sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==}
-
   motion-utils@12.23.6:
     resolution: {integrity: sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==}
 
@@ -20405,16 +20385,6 @@ snapshots:
 
   fraction.js@5.3.4: {}
 
-  framer-motion@11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
-    dependencies:
-      motion-dom: 11.18.1
-      motion-utils: 11.18.1
-      tslib: 2.8.1
-    optionalDependencies:
-      '@emotion/is-prop-valid': 1.4.0
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-
   framer-motion@12.23.26(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
       motion-dom: 12.23.23
@@ -22436,10 +22406,6 @@ snapshots:
 
   moo@0.5.2: {}
 
-  motion-dom@11.18.1:
-    dependencies:
-      motion-utils: 11.18.1
-
   motion-dom@12.23.23:
     dependencies:
       motion-utils: 12.24.10
@@ -22448,8 +22414,6 @@ snapshots:
     dependencies:
       motion-utils: 12.24.10
 
-  motion-utils@11.18.1: {}
-
   motion-utils@12.23.6: {}
 
   motion-utils@12.24.10: {}

From 1adfd580387cd031749468a7cc6d6730f7df6240 Mon Sep 17 00:00:00 2001
From: Cristian Calina <cristian.calina@uipath.com>
Date: Fri, 27 Feb 2026 10:58:14 -0800
Subject: [PATCH 7/8] fix(apollo-wind): failing tests

---
 packages/apollo-wind/src/components/ui/empty-state.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/apollo-wind/src/components/ui/empty-state.test.tsx b/packages/apollo-wind/src/components/ui/empty-state.test.tsx
index 2c489094d..631743c86 100644
--- a/packages/apollo-wind/src/components/ui/empty-state.test.tsx
+++ b/packages/apollo-wind/src/components/ui/empty-state.test.tsx
@@ -35,7 +35,7 @@ describe('EmptyState', () => {
       <EmptyState title="Empty" icon={<span data-testid="custom-icon">📦</span>} />
     );
     expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
-    const iconContainer = container.querySelector('.rounded-full.bg-muted');
+    const iconContainer = container.querySelector('.items-center.justify-center');
     expect(iconContainer).toBeInTheDocument();
   });
 

From ef880d03ccf96b09ecba7fa89d4b94ac20ebcb78 Mon Sep 17 00:00:00 2001
From: David Anthony <dba@hey.com>
Date: Fri, 27 Feb 2026 11:06:37 -0800
Subject: [PATCH 8/8] fix(apollo-wind): address PR #219 review feedback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Type internalRowSelection state as Record<string, boolean> (data-table)
- Sanitize CSS tokens and remove dangerouslySetInnerHTML (chart)
- Fix zero-value hidden by truthiness check in chart tooltip
- Add onTabChange prop and wire tab buttons (flow-properties-expanded)
- Add type="button" to all <button> elements in custom components
- Rename Panel → MaestroPanel to avoid generic naming collisions
- Remove unused imports (Input, FileText, MoreHorizontal, CreditCard, Settings)

Made-with: Cursor
---
 .../src/components/custom/chat-composer.tsx   |  6 +--
 .../custom/chat-prompt-suggestions.tsx        |  2 +-
 .../src/components/custom/chat-steps-view.tsx |  4 +-
 .../components/custom/flow-properties-bar.tsx |  4 +-
 .../custom/flow-properties-expanded.tsx       |  8 +++
 .../custom/flow-properties-simple.tsx         | 16 +++---
 .../src/components/custom/global-header.tsx   | 14 ++---
 .../src/components/custom/panel-delegate.tsx  | 16 +++---
 .../src/components/custom/panel-flow.tsx      | 10 ++--
 .../custom/panel-maestro.stories.tsx          | 14 ++---
 .../src/components/custom/panel-maestro.tsx   |  8 +--
 .../src/components/custom/toolbar-canvas.tsx  |  6 +--
 .../src/components/custom/toolbar-view.tsx    |  4 +-
 .../apollo-wind/src/components/ui/chart.tsx   | 52 ++++++++++---------
 .../src/components/ui/data-table.stories.tsx  |  1 -
 .../src/components/ui/data-table.tsx          |  2 +-
 .../src/components/ui/hover-card.stories.tsx  |  2 -
 .../src/components/ui/tabs.stories.tsx        |  2 +-
 .../templates/Experiments/ideas.stories.tsx   |  6 +--
 .../templates/Maestro/template-maestro.tsx    | 18 +++----
 20 files changed, 102 insertions(+), 93 deletions(-)

diff --git a/packages/apollo-wind/src/components/custom/chat-composer.tsx b/packages/apollo-wind/src/components/custom/chat-composer.tsx
index c519432c3..bc58b31b8 100644
--- a/packages/apollo-wind/src/components/custom/chat-composer.tsx
+++ b/packages/apollo-wind/src/components/custom/chat-composer.tsx
@@ -68,14 +68,14 @@ export function ChatComposer({
         <div className="flex items-center justify-between">
           {/* Left actions */}
           <div className="flex items-center gap-1">
-            <button
+            <button type="button"
               type="button"
               className="flex h-8 w-8 items-center justify-center rounded-2xl border border-border-inverse bg-surface-inverse transition-opacity hover:opacity-80"
               aria-label="Add attachment"
             >
               <Plus className="h-5 w-5 text-foreground-inverse" />
             </button>
-            <button
+            <button type="button"
               type="button"
               className="flex h-8 w-8 items-center justify-center rounded-2xl border border-border-inverse bg-surface-inverse transition-opacity hover:opacity-80"
               aria-label="Add workflow"
@@ -85,7 +85,7 @@ export function ChatComposer({
           </div>
 
           {/* Submit button */}
-          <button
+          <button type="button"
             type="button"
             className="flex h-8 w-8 items-center justify-center rounded-2xl bg-brand transition-opacity hover:opacity-90"
             onClick={handleSubmit}
diff --git a/packages/apollo-wind/src/components/custom/chat-prompt-suggestions.tsx b/packages/apollo-wind/src/components/custom/chat-prompt-suggestions.tsx
index b1d286fbf..d1c5bf7ed 100644
--- a/packages/apollo-wind/src/components/custom/chat-prompt-suggestions.tsx
+++ b/packages/apollo-wind/src/components/custom/chat-prompt-suggestions.tsx
@@ -37,7 +37,7 @@ export function PromptSuggestions({
   return (
     <div className={cn('flex flex-col items-start gap-2', className)}>
       {suggestions.map((suggestion) => (
-        <button
+        <button type="button"
           key={suggestion.id}
           className="flex h-10 items-center rounded-xl border border-border bg-surface-overlay px-4 py-2.5 text-sm font-medium leading-5 text-foreground transition-colors hover:bg-surface-hover"
           onClick={() => onSelect?.(suggestion)}
diff --git a/packages/apollo-wind/src/components/custom/chat-steps-view.tsx b/packages/apollo-wind/src/components/custom/chat-steps-view.tsx
index 596dbef46..17e416350 100644
--- a/packages/apollo-wind/src/components/custom/chat-steps-view.tsx
+++ b/packages/apollo-wind/src/components/custom/chat-steps-view.tsx
@@ -89,7 +89,7 @@ function ActionButton({
   onClick?: () => void;
 }) {
   return (
-    <button
+    <button type="button"
       className="flex h-10 items-center gap-2 rounded-xl border border-border px-4 py-2 text-sm font-medium leading-5 text-foreground-subtle transition-colors hover:border-border-hover hover:text-foreground-hover"
       onClick={onClick}
     >
@@ -231,7 +231,7 @@ export function StepsView({
       <div className="flex min-h-[78px] shrink-0 items-center gap-8 overflow-x-auto px-10 py-5">
         {/* Back + Title */}
         <div className="flex shrink-0 items-center gap-4">
-          <button
+          <button type="button"
             type="button"
             className="shrink-0 text-foreground transition-colors hover:text-foreground"
             onClick={onBack}
diff --git a/packages/apollo-wind/src/components/custom/flow-properties-bar.tsx b/packages/apollo-wind/src/components/custom/flow-properties-bar.tsx
index 5d40b9978..c219d4a16 100644
--- a/packages/apollo-wind/src/components/custom/flow-properties-bar.tsx
+++ b/packages/apollo-wind/src/components/custom/flow-properties-bar.tsx
@@ -62,7 +62,7 @@ export function PropertiesBar({
 
       {/* Right: Properties / Variables tabs */}
       <div className="flex h-10 items-center rounded-xl bg-surface-overlay border border-border-deep p-1">
-        <button
+        <button type="button"
           className={cn(
             'flex h-8 items-center gap-2 rounded-[10px] px-4 py-2 text-sm font-medium leading-5 text-foreground-subtle transition-colors hover:text-foreground-hover',
             activeTab === 'properties' && 'text-foreground-subtle'
@@ -75,7 +75,7 @@ export function PropertiesBar({
           <TableProperties className="h-5 w-5" />
           <span>Properties</span>
         </button>
-        <button
+        <button type="button"
           className={cn(
             'flex h-7 items-center gap-2 rounded-xl px-4 py-2 text-sm font-medium leading-5 text-foreground-subtle transition-colors',
             activeTab === 'variables' && 'text-foreground-subtle'
diff --git a/packages/apollo-wind/src/components/custom/flow-properties-expanded.tsx b/packages/apollo-wind/src/components/custom/flow-properties-expanded.tsx
index 933b2b7cc..4ca1a97d1 100644
--- a/packages/apollo-wind/src/components/custom/flow-properties-expanded.tsx
+++ b/packages/apollo-wind/src/components/custom/flow-properties-expanded.tsx
@@ -25,6 +25,8 @@ export interface PropertiesExpandedProps {
   nodeType?: string;
   /** Active top tab: 'properties' | 'variables' */
   activeTab?: 'properties' | 'variables';
+  /** Callback when top tab is changed */
+  onTabChange?: (tab: 'properties' | 'variables') => void;
   /** Callback when close button is clicked */
   onClose?: () => void;
 }
@@ -44,6 +46,7 @@ function MiniTab({
 }) {
   return (
     <button
+      type="button"
       className={cn(
         'flex h-6 items-center rounded-lg px-2 text-xs font-medium leading-5',
         active ? 'bg-surface text-foreground' : 'text-foreground-subtle'
@@ -141,6 +144,7 @@ export function PropertiesExpanded({
   nodeName = 'Validate invoice',
   nodeType = 'AI Agent',
   activeTab = 'properties',
+  onTabChange,
   onClose,
 }: PropertiesExpandedProps) {
   return (
@@ -171,23 +175,27 @@ export function PropertiesExpanded({
         <div className="flex items-center gap-2">
           <div className="flex h-10 items-center rounded-xl border border-border-deep bg-surface-overlay p-1">
             <button
+              type="button"
               className={cn(
                 'flex h-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5 transition-colors',
                 activeTab === 'properties'
                   ? 'border border-border bg-surface text-foreground'
                   : 'text-foreground-subtle'
               )}
+              onClick={() => onTabChange?.('properties')}
             >
               <TableProperties className="h-5 w-5" />
               <span>Properties</span>
             </button>
             <button
+              type="button"
               className={cn(
                 'flex h-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5 transition-colors',
                 activeTab === 'variables'
                   ? 'border border-border bg-surface text-foreground'
                   : 'text-foreground-subtle'
               )}
+              onClick={() => onTabChange?.('variables')}
             >
               <Variable className="h-5 w-5" />
               <span>Variables</span>
diff --git a/packages/apollo-wind/src/components/custom/flow-properties-simple.tsx b/packages/apollo-wind/src/components/custom/flow-properties-simple.tsx
index ffbb50947..bb12aa38b 100644
--- a/packages/apollo-wind/src/components/custom/flow-properties-simple.tsx
+++ b/packages/apollo-wind/src/components/custom/flow-properties-simple.tsx
@@ -105,7 +105,7 @@ function FieldItem({
           {field.required && '*'}
         </span>
         {field.showGraphControl && (
-          <button
+          <button type="button"
             className="flex h-6 w-6 items-center justify-center rounded-lg bg-surface-overlay text-foreground-muted transition-colors hover:text-foreground"
             onClick={() => onGraphControl?.(field.label)}
             aria-label="Graph control"
@@ -148,7 +148,7 @@ function FieldItem({
             placeholder={field.placeholder}
             className="h-full flex-1 rounded-none border-0 bg-transparent text-sm font-medium text-foreground-muted shadow-none placeholder:text-foreground-subtle focus-visible:ring-0"
           />
-          <button
+          <button type="button"
             type="button"
             className="flex h-full w-[50px] items-center justify-center border-l border-border text-foreground-muted transition-colors hover:text-foreground"
             aria-label="Browse files"
@@ -198,7 +198,7 @@ const sampleJsonLines = [
 
 function EditorToolbarButton({ icon, label }: { icon: React.ReactNode; label: string }) {
   return (
-    <button
+    <button type="button"
       className="flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:text-foreground"
       aria-label={label}
     >
@@ -217,7 +217,7 @@ function JsonEditorDrawer({ open, onClose }: { open: boolean; onClose: () => voi
         <span className="text-base font-semibold leading-5 tracking-[-0.4px] text-foreground">
           JSON editor
         </span>
-        <button
+        <button type="button"
           className="flex h-10 w-10 items-center justify-center rounded-xl bg-surface-overlay text-foreground-muted transition-colors hover:text-foreground"
           onClick={onClose}
           aria-label="Close editor"
@@ -243,7 +243,7 @@ function JsonEditorDrawer({ open, onClose }: { open: boolean; onClose: () => voi
               <FileJson className="h-4 w-4" />
               <span className="text-sm font-medium leading-none">script.js</span>
             </div>
-            <button
+            <button type="button"
               className="flex h-5 w-5 items-center justify-center text-foreground-muted transition-colors hover:text-foreground"
               aria-label="Refresh"
             >
@@ -274,13 +274,13 @@ function JsonEditorDrawer({ open, onClose }: { open: boolean; onClose: () => voi
 
       {/* ── Footer ──────────────────────────────────────────── */}
       <div className="flex items-center justify-end gap-2 px-6 py-4">
-        <button
+        <button type="button"
           className="flex h-10 items-center gap-2 rounded-xl border border-border px-4 py-2 text-sm font-medium leading-5 text-foreground-subtle transition-colors hover:text-foreground"
           onClick={onClose}
         >
           <span>Cancel</span>
         </button>
-        <button
+        <button type="button"
           className="flex h-10 items-center gap-2 rounded-xl bg-brand px-4 py-2 text-sm font-semibold leading-5 text-foreground-inverse transition-colors hover:bg-brand/90"
           onClick={onClose}
         >
@@ -346,7 +346,7 @@ export function PropertiesSimple({
               {title}
             </span>
           </div>
-          <button
+          <button type="button"
             className="flex h-10 w-10 items-center justify-center rounded-xl bg-surface-overlay text-foreground-muted transition-colors hover:text-foreground"
             onClick={onClose}
             aria-label="Close properties"
diff --git a/packages/apollo-wind/src/components/custom/global-header.tsx b/packages/apollo-wind/src/components/custom/global-header.tsx
index a60391af4..6f3a4c09b 100644
--- a/packages/apollo-wind/src/components/custom/global-header.tsx
+++ b/packages/apollo-wind/src/components/custom/global-header.tsx
@@ -79,7 +79,7 @@ function HeaderIconButton({
   disabled?: boolean;
 }) {
   return (
-    <button
+    <button type="button"
       className={cn(
         'flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors',
         disabled ? 'cursor-default opacity-50' : 'hover:text-foreground'
@@ -102,7 +102,7 @@ function NotificationsDropdown({ themeClass }: { themeClass: string }) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <button
+        <button type="button"
           className="flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:text-foreground"
           aria-label="Notifications"
         >
@@ -152,7 +152,7 @@ function HelpDropdown({ themeClass }: { themeClass: string }) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <button
+        <button type="button"
           className="flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:text-foreground"
           aria-label="Help"
         >
@@ -197,7 +197,7 @@ function TenantSelector({ tenantName, themeClass }: { tenantName: string; themeC
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <button className="flex items-center gap-1 rounded-lg px-2 py-1 text-sm text-foreground-muted transition-colors hover:text-foreground">
+        <button type="button" className="flex items-center gap-1 rounded-lg px-2 py-1 text-sm text-foreground-muted transition-colors hover:text-foreground">
           <span>
             Tenant: <span className="font-medium">{selected}</span>
           </span>
@@ -210,7 +210,7 @@ function TenantSelector({ tenantName, themeClass }: { tenantName: string; themeC
         className={cn(themeClass, 'w-56 border-border bg-surface-overlay p-1')}
       >
         {tenants.map((tenant) => (
-          <button
+          <button type="button"
             key={tenant.id}
             className={cn(
               'flex w-full items-center rounded-md px-3 py-2 text-sm transition-colors hover:bg-surface-hover',
@@ -236,7 +236,7 @@ function AvatarDropdown({ themeClass }: { themeClass: string }) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <button className="rounded-full focus:outline-none" aria-label="User menu">
+        <button type="button" className="rounded-full focus:outline-none" aria-label="User menu">
           <Avatar className="h-6 w-6 bg-brand">
             <AvatarFallback className="bg-brand text-[10px] font-bold text-foreground-on-accent">
               UI
@@ -327,7 +327,7 @@ export function MaestroHeader({
       >
         {/* Left: waffle + title */}
         <div className="flex items-center gap-3">
-          <button
+          <button type="button"
             className="flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:text-foreground"
             onClick={() => menuContent && setMenuOpen((prev) => !prev)}
             aria-label="App launcher"
diff --git a/packages/apollo-wind/src/components/custom/panel-delegate.tsx b/packages/apollo-wind/src/components/custom/panel-delegate.tsx
index 342a73c83..c9a2d2c26 100644
--- a/packages/apollo-wind/src/components/custom/panel-delegate.tsx
+++ b/packages/apollo-wind/src/components/custom/panel-delegate.tsx
@@ -80,7 +80,7 @@ function ExpandedNavItem({
 
   if (!isExpandable) {
     return (
-      <button
+      <button type="button"
         className="flex h-10 w-full items-center gap-2 rounded-2xl px-1 text-foreground-muted transition-colors hover:bg-surface-hover"
         onClick={onToggle}
       >
@@ -95,7 +95,7 @@ function ExpandedNavItem({
   return (
     <Collapsible open={isOpen} onOpenChange={() => onToggle()}>
       <CollapsibleTrigger asChild>
-        <button className="flex h-10 w-full items-center justify-between rounded-2xl px-1 text-foreground-muted transition-colors hover:bg-surface-hover">
+        <button type="button" className="flex h-10 w-full items-center justify-between rounded-2xl px-1 text-foreground-muted transition-colors hover:bg-surface-hover">
           <div className="flex items-center gap-2">
             <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg">
               {item.icon}
@@ -112,7 +112,7 @@ function ExpandedNavItem({
       <CollapsibleContent>
         <div className="flex flex-col">
           {item.children?.map((child) => (
-            <button
+            <button type="button"
               key={child.id}
               className={cn(
                 'flex h-10 items-center rounded-2xl pl-12 pr-3 text-sm font-medium text-foreground-muted transition-colors hover:bg-surface-hover',
@@ -143,7 +143,7 @@ function CollapsedNavItem({
   return (
     <Tooltip>
       <TooltipTrigger asChild>
-        <button
+        <button type="button"
           className={cn(
             'flex h-12 w-full items-center justify-center text-foreground-muted transition-colors hover:text-foreground',
             isActive && 'text-brand-foreground'
@@ -247,14 +247,14 @@ export function DelegatePanel({
             {panelOpen && (
               <div className="flex flex-1 items-center justify-between">
                 <div className="flex items-center gap-[18px]">
-                  <button
+                  <button type="button"
                     type="button"
                     className="text-foreground-muted transition-colors hover:text-foreground"
                     aria-label="New conversation"
                   >
                     <MessageCirclePlus className="h-5 w-5" />
                   </button>
-                  <button
+                  <button type="button"
                     type="button"
                     className="text-foreground-muted transition-colors hover:text-foreground"
                     aria-label="Picture in picture"
@@ -262,7 +262,7 @@ export function DelegatePanel({
                     <PictureInPicture2 className="h-5 w-5" />
                   </button>
                 </div>
-                <button
+                <button type="button"
                   type="button"
                   className="text-foreground-muted transition-colors hover:text-foreground"
                   onClick={() => setPanelOpen(false)}
@@ -301,7 +301,7 @@ export function DelegatePanel({
                 {/* Expand button */}
                 <Tooltip>
                   <TooltipTrigger asChild>
-                    <button
+                    <button type="button"
                       className="flex h-12 w-full items-center justify-center text-foreground-muted transition-colors hover:text-foreground"
                       onClick={() => setPanelOpen(true)}
                     >
diff --git a/packages/apollo-wind/src/components/custom/panel-flow.tsx b/packages/apollo-wind/src/components/custom/panel-flow.tsx
index 8694dda3d..b76dc7e9a 100644
--- a/packages/apollo-wind/src/components/custom/panel-flow.tsx
+++ b/packages/apollo-wind/src/components/custom/panel-flow.tsx
@@ -81,7 +81,7 @@ function IconRail({
           {navItems.map((item) => (
             <Tooltip key={item.id}>
               <TooltipTrigger asChild>
-                <button
+                <button type="button"
                   className={cn(
                     'flex h-12 w-full items-center justify-center text-foreground-muted transition-colors hover:text-foreground',
                     activeId === item.id && 'text-brand-foreground'
@@ -161,14 +161,14 @@ function ChatInput() {
       </div>
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <button
+          <button type="button"
             type="button"
             className="flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted hover:text-foreground"
             aria-label="Add attachment"
           >
             <Plus className="h-5 w-5" />
           </button>
-          <button
+          <button type="button"
             type="button"
             className="flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted hover:text-foreground"
             aria-label="Add workflow"
@@ -176,7 +176,7 @@ function ChatInput() {
             <Workflow className="h-5 w-5" />
           </button>
         </div>
-        <button
+        <button type="button"
           type="button"
           className="flex h-8 w-8 items-center justify-center rounded-full bg-brand text-foreground-on-accent"
           aria-label="Submit message"
@@ -209,7 +209,7 @@ function ExpandedPanel({
           <span className="font-bold text-foreground">Flow</span>
           <span className="font-medium text-foreground-subtle">Autopilot</span>
         </div>
-        <button
+        <button type="button"
           className="text-foreground-muted transition-colors hover:text-foreground"
           onClick={onClose}
           aria-label="Close panel"
diff --git a/packages/apollo-wind/src/components/custom/panel-maestro.stories.tsx b/packages/apollo-wind/src/components/custom/panel-maestro.stories.tsx
index a4318ecb4..b8e64447c 100644
--- a/packages/apollo-wind/src/components/custom/panel-maestro.stories.tsx
+++ b/packages/apollo-wind/src/components/custom/panel-maestro.stories.tsx
@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import * as React from 'react';
-import { Panel } from './panel-maestro';
+import { MaestroPanel } from './panel-maestro';
 
 const meta = {
   title: 'Components/UiPath/Panel (Maestro)',
-  component: Panel,
+  component: MaestroPanel,
   parameters: {
     layout: 'fullscreen',
   },
-} satisfies Meta<typeof Panel>;
+} satisfies Meta<typeof MaestroPanel>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -33,17 +33,17 @@ function PanelDemo({ side }: { side: 'left' | 'right' }) {
   return (
     <div className="future-dark flex h-[500px] bg-surface-raised">
       {side === 'left' && (
-        <Panel side="left" isCollapsed={collapsed} onToggle={() => setCollapsed(!collapsed)}>
+        <MaestroPanel side="left" isCollapsed={collapsed} onToggle={() => setCollapsed(!collapsed)}>
           <SampleNav />
-        </Panel>
+        </MaestroPanel>
       )}
       <div className="flex flex-1 items-center justify-center text-sm text-foreground-muted">
         Content area
       </div>
       {side === 'right' && (
-        <Panel side="right" isCollapsed={collapsed} onToggle={() => setCollapsed(!collapsed)}>
+        <MaestroPanel side="right" isCollapsed={collapsed} onToggle={() => setCollapsed(!collapsed)}>
           <div className="p-4 text-sm text-foreground-muted">Right panel content</div>
-        </Panel>
+        </MaestroPanel>
       )}
     </div>
   );
diff --git a/packages/apollo-wind/src/components/custom/panel-maestro.tsx b/packages/apollo-wind/src/components/custom/panel-maestro.tsx
index 7bf47a38b..861ad94eb 100644
--- a/packages/apollo-wind/src/components/custom/panel-maestro.tsx
+++ b/packages/apollo-wind/src/components/custom/panel-maestro.tsx
@@ -6,7 +6,7 @@ import { cn } from '@/lib';
 // Types
 // ============================================================================
 
-export interface PanelProps {
+export interface MaestroPanelProps {
   /** Determines border side, arrow direction, and arrow position */
   side: 'left' | 'right';
   /** Panel content — only rendered when expanded */
@@ -39,13 +39,13 @@ export interface PanelProps {
  *
  * State is managed by the parent — pass `isCollapsed` and `onToggle`.
  */
-export function Panel({
+export function MaestroPanel({
   side,
   children,
   className,
   isCollapsed = false,
   onToggle,
-}: PanelProps) {
+}: MaestroPanelProps) {
   const isExpanded = !isCollapsed;
   const isLeft = side === 'left';
 
@@ -61,7 +61,7 @@ export function Panel({
       )}
     >
       {/* Expand/collapse toggle button */}
-      <button
+      <button type="button"
         className="absolute z-10 flex h-7 w-7 items-center justify-center rounded-full border border-border bg-surface text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground"
         style={{
           top: 28,
diff --git a/packages/apollo-wind/src/components/custom/toolbar-canvas.tsx b/packages/apollo-wind/src/components/custom/toolbar-canvas.tsx
index f0521de68..43ce8f173 100644
--- a/packages/apollo-wind/src/components/custom/toolbar-canvas.tsx
+++ b/packages/apollo-wind/src/components/custom/toolbar-canvas.tsx
@@ -44,7 +44,7 @@ function ToolbarButton({
   onClick?: () => void;
 }) {
   return (
-    <button
+    <button type="button"
       className="flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:text-foreground"
       onClick={onClick}
       aria-label={label}
@@ -80,7 +80,7 @@ export function FlowCanvasToolbar({
       {/* Build / Evaluate toggle */}
       <div className="flex h-10 items-center rounded-xl border border-border-deep bg-surface-overlay p-1">
         {/* Build */}
-        <button
+        <button type="button"
           className={cn(
             'flex h-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5 transition-colors',
             activeMode === 'build'
@@ -93,7 +93,7 @@ export function FlowCanvasToolbar({
           <span>Build</span>
         </button>
         {/* Evaluate */}
-        <button
+        <button type="button"
           className={cn(
             'flex h-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5 transition-colors',
             activeMode === 'evaluate'
diff --git a/packages/apollo-wind/src/components/custom/toolbar-view.tsx b/packages/apollo-wind/src/components/custom/toolbar-view.tsx
index 5cb60abd8..f41b2d95b 100644
--- a/packages/apollo-wind/src/components/custom/toolbar-view.tsx
+++ b/packages/apollo-wind/src/components/custom/toolbar-view.tsx
@@ -35,7 +35,7 @@ function ViewButton({
   onClick?: () => void;
 }) {
   return (
-    <button
+    <button type="button"
       className={cn(
         'flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:text-foreground',
         isActive && 'rounded-2xl border border-border bg-surface text-foreground'
@@ -55,7 +55,7 @@ function ViewButton({
 function NodeSizeIcon({ size, isActive }: { size: 's' | 'm' | 'l'; isActive?: boolean }) {
   const label = { s: 'S', m: 'M', l: 'L' }[size];
   return (
-    <button
+    <button type="button"
       className={cn(
         'flex h-8 w-8 items-center justify-center rounded-2xl text-xs font-bold text-foreground-muted transition-colors hover:text-foreground',
         isActive && 'border border-border bg-surface text-foreground'
diff --git a/packages/apollo-wind/src/components/ui/chart.tsx b/packages/apollo-wind/src/components/ui/chart.tsx
index 190fbea32..ae9a98d0c 100644
--- a/packages/apollo-wind/src/components/ui/chart.tsx
+++ b/packages/apollo-wind/src/components/ui/chart.tsx
@@ -67,37 +67,41 @@ function ChartContainer({
   );
 }
 
+const sanitizeCssToken = (value: string): string =>
+  value.replace(/[^a-z0-9-]/gi, '');
+
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
   const colorConfig = Object.entries(config).filter(
-    ([, config]) => config.theme || config.color,
+    ([, itemConfig]) => itemConfig.theme || itemConfig.color,
   );
 
   if (!colorConfig.length) {
     return null;
   }
 
-  return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES)
-          .map(
-            ([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig
-  .map(([key, itemConfig]) => {
-    const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-      itemConfig.color;
-    return color ? `  --color-${key}: ${color};` : null;
-  })
-  .join('\n')}
-}
-`,
-          )
-          .join('\n'),
-      }}
-    />
-  );
+  const safeId = sanitizeCssToken(id);
+  const css = Object.entries(THEMES)
+    .map(([theme, prefix]) => {
+      const lines = colorConfig
+        .map(([key, itemConfig]) => {
+          const color =
+            itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+            itemConfig.color;
+          const safeKey = sanitizeCssToken(key);
+          if (!color || !safeKey) return null;
+          return `  --color-${safeKey}: ${color};`;
+        })
+        .filter(Boolean)
+        .join('\n');
+      if (!lines) return '';
+      return `${prefix} [data-chart="${safeId}"] {\n${lines}\n}`;
+    })
+    .filter(Boolean)
+    .join('\n');
+
+  if (!css) return null;
+
+  return <style>{css}</style>;
 };
 
 const ChartTooltip = RechartsPrimitive.Tooltip;
@@ -232,7 +236,7 @@ function ChartTooltipContent({
                           {itemConfig?.label || item.name}
                         </span>
                       </div>
-                      {item.value && (
+                      {item.value != null && (
                         <span className="text-foreground font-mono font-medium tabular-nums">
                           {item.value.toLocaleString()}
                         </span>
diff --git a/packages/apollo-wind/src/components/ui/data-table.stories.tsx b/packages/apollo-wind/src/components/ui/data-table.stories.tsx
index 476985997..2ca23a6af 100644
--- a/packages/apollo-wind/src/components/ui/data-table.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/data-table.stories.tsx
@@ -34,7 +34,6 @@ import {
   DropdownMenuTrigger,
 } from './dropdown-menu';
 import type { EditableCellMeta } from './editable-cell';
-import { Input } from './input';
 import { Label } from './label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';
 import { Separator } from './separator';
diff --git a/packages/apollo-wind/src/components/ui/data-table.tsx b/packages/apollo-wind/src/components/ui/data-table.tsx
index 7e70ca5f2..31a5f684e 100644
--- a/packages/apollo-wind/src/components/ui/data-table.tsx
+++ b/packages/apollo-wind/src/components/ui/data-table.tsx
@@ -74,7 +74,7 @@ export function DataTable<TData, TValue>({
   const [sorting, setSorting] = React.useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
   const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
-  const [internalRowSelection, setInternalRowSelection] = React.useState({});
+  const [internalRowSelection, setInternalRowSelection] = React.useState<Record<string, boolean>>({});
 
   const isControlled = controlledRowSelection !== undefined;
   const rowSelection = isControlled ? controlledRowSelection : internalRowSelection;
diff --git a/packages/apollo-wind/src/components/ui/hover-card.stories.tsx b/packages/apollo-wind/src/components/ui/hover-card.stories.tsx
index 5a4f4341e..d64471acb 100644
--- a/packages/apollo-wind/src/components/ui/hover-card.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/hover-card.stories.tsx
@@ -2,10 +2,8 @@ import type { Meta } from '@storybook/react-vite';
 import {
   Calendar,
   ExternalLink,
-  FileText,
   GitBranch,
   MapPin,
-  MoreHorizontal,
   Star,
   Users,
 } from 'lucide-react';
diff --git a/packages/apollo-wind/src/components/ui/tabs.stories.tsx b/packages/apollo-wind/src/components/ui/tabs.stories.tsx
index fb9d3d597..48b0a0dab 100644
--- a/packages/apollo-wind/src/components/ui/tabs.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/tabs.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta } from '@storybook/react-vite';
-import { Bell, CreditCard, Settings, Shield, User } from 'lucide-react';
+import { Bell, Shield, User } from 'lucide-react';
 import { Button } from './button';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './card';
 import { Input } from './input';
diff --git a/packages/apollo-wind/src/templates/Experiments/ideas.stories.tsx b/packages/apollo-wind/src/templates/Experiments/ideas.stories.tsx
index 6104db916..23b6f34fb 100644
--- a/packages/apollo-wind/src/templates/Experiments/ideas.stories.tsx
+++ b/packages/apollo-wind/src/templates/Experiments/ideas.stories.tsx
@@ -50,7 +50,7 @@ import {
 
 // Template components — available to the LLM via liveScope
 import { MaestroTemplate, Canvas, Grid, GridItem } from '../Maestro/template-maestro';
-import { Panel } from '@/components/custom/panel-maestro';
+import { MaestroPanel } from '@/components/custom/panel-maestro';
 import { FlowTemplate } from '../Flow/template-flow';
 import { DelegateTemplate } from '../Delegate/template-delegate';
 import {
@@ -107,7 +107,7 @@ const baseLiveScope = {
   Switch,
   Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
   // Templates & layout primitives
-  MaestroTemplate, Canvas, Grid, GridItem, Panel,
+  MaestroTemplate, Canvas, Grid, GridItem, MaestroPanel,
   FlowTemplate,
   DelegateTemplate,
   AdminTemplate, AdminSidebar, AdminSidebarHeader, AdminSidebarNav, AdminPageHeader, AdminToolbar,
@@ -132,7 +132,7 @@ function getTemplateInstruction(template: TemplateChoice): string {
 </MaestroTemplate>
 
 MaestroTemplate props: theme, title, tenantName, defaultLeftPanelCollapsed, leftPanelContent (ReactNode), defaultRightPanelCollapsed, rightPanelContent (ReactNode), children (main canvas).
-Sub-components available: Canvas (scrollable main area), Grid + GridItem (responsive grid), Panel (collapsible side panel).
+Sub-components available: Canvas (scrollable main area), Grid + GridItem (responsive grid), MaestroPanel (collapsible side panel).
 Use Grid with GridItem children for dashboard-style card layouts. GridItem accepts colSpan and rowSpan for sizing.
 leftPanelContent and rightPanelContent render inside collapsible panels.`;
 
diff --git a/packages/apollo-wind/src/templates/Maestro/template-maestro.tsx b/packages/apollo-wind/src/templates/Maestro/template-maestro.tsx
index 0b328108e..fd9420155 100644
--- a/packages/apollo-wind/src/templates/Maestro/template-maestro.tsx
+++ b/packages/apollo-wind/src/templates/Maestro/template-maestro.tsx
@@ -2,15 +2,15 @@ import * as React from 'react';
 import type { MaestroHeaderProps } from '@/components/custom/global-header';
 import { MaestroHeader } from '@/components/custom/global-header';
 import { Canvas, Grid, GridItem } from '@/components/custom/grid-maestro';
-import type { PanelProps } from '@/components/custom/panel-maestro';
-import { Panel } from '@/components/custom/panel-maestro';
+import type { MaestroPanelProps } from '@/components/custom/panel-maestro';
+import { MaestroPanel } from '@/components/custom/panel-maestro';
 import { ViewportGuard } from '@/components/custom/viewport-guard';
 import type { FutureTheme } from '@/foundation/Future/types';
 import { fontFamily } from '@/foundation/Future/typography';
 import { cn } from '@/lib';
 
 // Re-export types and components for convenience
-export type { MaestroHeaderProps, PanelProps };
+export type { MaestroHeaderProps, MaestroPanelProps };
 export { Canvas, Grid, GridItem };
 
 // ============================================================================
@@ -61,9 +61,9 @@ export interface MaestroTemplateProps {
  *
  * Composed of:
  * - **MaestroHeader** — global header with logo, actions, tenant selector, avatar
- * - **Panel side="left"** — collapsible left panel (300px expanded / 32px collapsed)
+ * - **MaestroPanel side="left"** — collapsible left panel (300px expanded / 32px collapsed)
  * - **Canvas** — scrollable main area with ResizeObserver-based grid reflow
- * - **Panel side="right"** — collapsible right panel (300px expanded / 32px collapsed)
+ * - **MaestroPanel side="right"** — collapsible right panel (300px expanded / 32px collapsed)
  *
  * ### Responsive auto-collapse
  *
@@ -150,25 +150,25 @@ export function MaestroTemplate({
         {/* Body: left panel + canvas + right panel */}
         <div ref={bodyRef} className="flex flex-1 overflow-hidden">
           {/* Left panel */}
-          <Panel
+          <MaestroPanel
             side="left"
             isCollapsed={leftIsCollapsed}
             onToggle={() => setLeftCollapsed((prev) => !prev)}
           >
             {leftPanelContent}
-          </Panel>
+          </MaestroPanel>
 
           {/* Canvas (main content) */}
           <Canvas>{children}</Canvas>
 
           {/* Right panel */}
-          <Panel
+          <MaestroPanel
             side="right"
             isCollapsed={rightIsCollapsed}
             onToggle={() => setRightCollapsed((prev) => !prev)}
           >
             {rightPanelContent}
-          </Panel>
+          </MaestroPanel>
         </div>
       </div>
     </ViewportGuard>