diff --git a/.changeset/docs-part-jsdoc.md b/.changeset/docs-part-jsdoc.md
new file mode 100644
index 0000000..2f8fdf5
--- /dev/null
+++ b/.changeset/docs-part-jsdoc.md
@@ -0,0 +1,5 @@
+---
+"@intentface/chat": patch
+---
+
+Documentation only, no runtime change. Every part of `Attachments`, `Chip`, `Message`, `Reasoning` and `Steps` now carries JSDoc saying what it is for and which element it renders, so editors show the same reference as the docs site. The package README is refreshed to match the rewritten docs.
diff --git a/README.md b/README.md
index 0857a08..b4f16db 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,8 @@ primitives for React — and the documentation site and playground at
 
 The package ships behavior, state, and wire formats with no styling of its own: a contenteditable
 composer with commands and chips, a thread with scroll auto-follow, message part segmentation, tool-call
-timelines. This is the Base UI model applied to chat — the package owns behavior, you own every class.
+timelines, and the app-shell parts around them — a collapsible sidebar, a nav tree, a closable tab
+collection. This is the Base UI model applied to chat — the package owns behavior, you own every class.
 
 ## Layout
 
diff --git a/app/(chat)/layout.tsx b/app/(chat)/layout.tsx
deleted file mode 100644
index 63b5823..0000000
--- a/app/(chat)/layout.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { cookies } from "next/headers";
-import type { ReactNode } from "react";
-import { ChatShell } from "@/components/chat-shell";
-import { readSidebarLayout } from "@/lib/sidebar-cookie";
-
-// A server component on purpose: the sidebar's layout is restored from the
-// request here, so the first paint is already collapsed or expanded rather than
-// snapping a frame later. Shell never reads storage itself for exactly this
-// reason — the value has to arrive as a prop.
-export default async function ChatLayout({ children }: { children: ReactNode }) {
-  const stored = readSidebarLayout((await cookies()).toString());
-
-  return (
-    <ChatShell defaultOpen={stored?.open ?? true} width={stored?.width}>
-      {children}
-    </ChatShell>
-  );
-}
diff --git a/app/(docs)/[[...slug]]/page.tsx b/app/(docs)/[[...slug]]/page.tsx
index db66f4b..59e5ca3 100644
--- a/app/(docs)/[[...slug]]/page.tsx
+++ b/app/(docs)/[[...slug]]/page.tsx
@@ -1,7 +1,10 @@
+import { ChevronRight } from "@keyline-icons/react";
 import { notFound } from "next/navigation";
 import { DocsTOC } from "@/components/docs/docs-toc";
+import { DocsTopBarTrigger } from "@/components/docs/docs-top-bar-trigger";
 import { PageActions } from "@/components/docs/page-actions";
-import { getPage, source } from "@/lib/docs/source";
+import { ProgressiveBlur } from "@/components/ui/progressive-blur";
+import { getPage, getSectionLabel, source } from "@/lib/docs/source";
 import { getMDXComponents } from "@/mdx-components";
 
 type PageProps = {
@@ -17,24 +20,60 @@ export default async function DocsPage(props: PageProps) {
   // fumadocs uses an empty slug for the docs index; the raw-markdown route keys
   // off the on-disk filename.
   const markdownSlug = slug?.length ? slug : ["index"];
+  const section = getSectionLabel(page.url);
 
   return (
-    <div className="mx-auto flex w-fit max-w-full gap-10">
-      <article className="w-full max-w-3xl shrink-0 pb-16">
-        <header id="overview" className="mb-4 flex flex-col gap-3">
-          <h1 className="font-semibold text-2xl text-ink-primary tracking-tight">
-            {page.data.title}
-          </h1>
-          {page.data.description && (
-            <p className="text-lg text-ink-secondary leading-7">{page.data.description}</p>
-          )}
-          <PageActions slug={markdownSlug} source={page.data.source} />
-        </header>
-        <div className="[&>*:first-child]:mt-0">
-          <MDXContent components={getMDXComponents()} />
+    <div className="flex min-h-full flex-col">
+      <header className="sticky top-0 z-10 isolate flex h-13 shrink-0 items-center justify-between gap-3 px-3">
+        {/* Content dissolves under the bar instead of cutting off: a progressive
+            blur plus a fade. */}
+        <ProgressiveBlur
+          direction="top"
+          blurIntensity={0.5}
+          className="pointer-events-none absolute inset-x-0 top-0 -z-10 h-14 bg-linear-to-b from-secondary-bg to-transparent"
+        />
+        <div className="flex min-w-0 items-center gap-2">
+          <DocsTopBarTrigger />
+          <nav aria-label="Breadcrumb" className="flex min-w-0 items-center gap-1.5 text-sm">
+            {section && (
+              <>
+                <span className="shrink-0 text-ink-secondary">{section}</span>
+                <ChevronRight className="size-3 shrink-0 text-ink-tertiary" aria-hidden />
+              </>
+            )}
+            <span className="truncate font-medium text-ink-primary">{page.data.title}</span>
+          </nav>
         </div>
-      </article>
-      <DocsTOC items={page.data.toc} />
+        <PageActions slug={markdownSlug} source={page.data.source} />
+      </header>
+      {/* isolate: demo z-indexes stay inside the page, below the sticky top bar. */}
+      <div className="isolate flex flex-1">
+        <div className="flex min-w-0 flex-1 justify-center px-5 pt-7 pb-24 md:px-12">
+          <article className="w-full min-w-0 max-w-[680px]">
+            <header id="overview" className="mb-7 flex scroll-mt-20 flex-col gap-2.5">
+              <h1 className="font-semibold text-[32px] text-ink-primary leading-[38px] tracking-[-0.02em]">
+                {page.data.title}
+              </h1>
+              {page.data.description && (
+                <p className="max-w-[600px] text-ink-body text-xl leading-[26px]">
+                  {page.data.description}
+                </p>
+              )}
+            </header>
+            <div className="[&>*:first-child]:mt-0 [&>h2:first-child]:border-0 [&>h2:first-child]:pt-0">
+              <MDXContent components={getMDXComponents()} />
+            </div>
+          </article>
+        </div>
+        {/* The changelog lists versions only, not each "Patch Changes" heading. */}
+        <DocsTOC
+          items={
+            page.url === "/changelog"
+              ? page.data.toc.filter((item) => item.depth === 2)
+              : page.data.toc
+          }
+        />
+      </div>
     </div>
   );
 }
diff --git a/app/(docs)/layout.tsx b/app/(docs)/layout.tsx
index 658ab67..95a071c 100644
--- a/app/(docs)/layout.tsx
+++ b/app/(docs)/layout.tsx
@@ -1,14 +1,11 @@
 import type { ReactNode } from "react";
-import { DocsSidebar } from "@/components/docs/docs-sidebar";
-import { source } from "@/lib/docs/source";
 
+// The site shell lives in the root layout; the docs only add their own scroller.
+// The panel scrolls, not the window, so the frame stays put around it.
 export default function DocsLayout({ children }: { children: ReactNode }) {
   return (
-    <div className="flex min-h-screen bg-secondary-bg">
-      <DocsSidebar tree={source.pageTree} />
-      <div className="min-w-0 flex-1">
-        <main className="mx-auto w-full px-4 pt-10 md:px-6">{children}</main>
-      </div>
+    <div data-docs-scroll="" className="h-full w-full overflow-y-auto">
+      {children}
     </div>
   );
 }
diff --git a/app/fonts/IoskeleyMono-Medium.woff2 b/app/fonts/IoskeleyMono-Medium.woff2
new file mode 100644
index 0000000..9cce877
Binary files /dev/null and b/app/fonts/IoskeleyMono-Medium.woff2 differ
diff --git a/app/fonts/IoskeleyMono-OFL.txt b/app/fonts/IoskeleyMono-OFL.txt
new file mode 100644
index 0000000..d8aa8e9
--- /dev/null
+++ b/app/fonts/IoskeleyMono-OFL.txt
@@ -0,0 +1,92 @@
+Copyright (c) 2025, Ahmed Hatem (https://github.com/ahatem)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+---
+
+## SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1. Neither the Font Software nor any of its individual components,
+   in Original or Modified Versions, may be sold by itself.
+
+1. Original or Modified Versions of the Font Software may be bundled,
+   redistributed and/or sold with any software, provided that each copy
+   contains the above copyright notice and this license. These can be
+   included either as stand-alone text files, human-readable headers or
+   in the appropriate machine-readable metadata fields within text or
+   binary files as long as those fields can be easily viewed by the user.
+
+1. No Modified Version of the Font Software may use the Reserved Font
+   Name(s) unless explicit written permission is granted by the corresponding
+   Copyright Holder. This restriction only applies to the primary font name as
+   presented to the users.
+
+1. The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+   Software shall not be used to promote, endorse or advertise any
+   Modified Version, except to acknowledge the contribution(s) of the
+   Copyright Holder(s) and the Author(s) or with their explicit written
+   permission.
+
+1. The Font Software, modified or unmodified, in part or in whole,
+   must be distributed entirely under this license, and must not be
+   distributed under any other license. The requirement for fonts to
+   remain under this license does not apply to any document created
+   using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/app/fonts/IoskeleyMono-Regular.woff2 b/app/fonts/IoskeleyMono-Regular.woff2
new file mode 100644
index 0000000..5f8cefb
Binary files /dev/null and b/app/fonts/IoskeleyMono-Regular.woff2 differ
diff --git a/app/fonts/IoskeleyMono-SemiBold.woff2 b/app/fonts/IoskeleyMono-SemiBold.woff2
new file mode 100644
index 0000000..445da28
Binary files /dev/null and b/app/fonts/IoskeleyMono-SemiBold.woff2 differ
diff --git a/app/globals.css b/app/globals.css
index c2a109a..f4d4ca4 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -12,7 +12,7 @@
 
   /* ─── Seeds ─── */
   --bg: #ffffff;
-  --fg: #1a1a1a;
+  --fg: #18181b;
   --acc: #0169cc;
   --con: 0.3;
 
@@ -32,11 +32,11 @@
        0.05   subtle    near-bg, slight elevation
        0.01   hairline  barely visible separation
        -0.01  soft      input-strength fill
-       -0.05  moderate  clearly sunken below bg */
+       -0.1   frame     app frame and trays, sunk below bg */
   --primary-lightness: calc(0.05 * var(--con));
   --tertiary-lightness: calc(0.01 * var(--con));
   --quaternary-lightness: calc(-0.01 * var(--con));
-  --base-lightness: calc(-0.05 * var(--con));
+  --base-lightness: calc(-0.1 * var(--con));
 
   /* Surface families + state variants — defined once; in .dark the deltas
      flip sign and the surfaces redefine, so these formulas pick up both.
@@ -93,19 +93,68 @@
      keep fg's hue. Sign positive in light (fg dark, lifts toward
      white bg); negative in dark. */
   --text-primary: var(--fg);
-  --text-secondary: oklch(from var(--fg) calc(l + 0.3) c h);
-  --text-tertiary: oklch(from var(--fg) calc(l + 0.45) c h);
+  --text-body: oklch(from var(--fg) calc(l + 0.16) c h);
+  --text-secondary: oklch(from var(--fg) calc(l + 0.34) c h);
+  --text-tertiary: oklch(from var(--fg) calc(l + 0.5) c h);
+
+  /* Elevation. Raised controls are lit from above: a face a touch lighter
+     than the surface, a top highlight and a crisp ring. The .dark block
+     swaps in lighter rings and an inner edge. */
+  --raised-bg: var(--primary-bg);
+  --raised-bg-hover: oklch(from var(--raised-bg) calc(l + var(--raised-hover-shift)) c h);
+  --raised-selected-bg: var(--raised-bg);
+  --raised-spread: 0.004;
+  --raised-hover-shift: -0.012;
+  --elevation-raised:
+    inset 0 1px 0 rgb(255 255 255), 0 0 0 1px rgb(0 0 0 / 0.075), 0 1px 2px rgb(0 0 0 / 0.07), 0 2px
+    6px -2px rgb(0 0 0 / 0.05);
+  --elevation-card:
+    0 0 0 1px rgb(0 0 0 / 0.075), 0 1px 2px rgb(0 0 0 / 0.06), 0 4px 8px -2px rgb(0 0 0 / 0.05);
+  --elevation-composer:
+    0 0 0 1px rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.08), 0 6px 16px -6px rgb(0 0 0 / 0.1);
+  --elevation-overlay:
+    0 0 0 1px rgb(0 0 0 / 0.075), 0 1px 2px rgb(0 0 0 / 0.06), 0 12px 32px -8px rgb(0 0 0 / 0.16),
+    0 32px 64px -16px rgb(0 0 0 / 0.14);
+
+  /* Accent controls (send, logo tile) share one cobalt bevel. */
+  --elevation-logo:
+    inset 0 1px 0 rgb(255 255 255 / 0.28), inset 0 -2px 3px oklch(30% 0.12 258 / 0.35), 0 0 0 1px
+    oklch(from var(--acc) calc(l - 0.064) c h), 0 1px 2px oklch(from var(--acc) l c h / 0.35);
+  --elevation-logo-lg:
+    inset 0 1px 0 rgb(255 255 255 / 0.28), inset 0 -3px 5px oklch(30% 0.12 258 / 0.35), 0 0 0 1px
+    oklch(from var(--acc) calc(l - 0.064) c h), 0 1px 2px oklch(from var(--acc) l c h / 0.35), 0
+    4px 10px -2px oklch(from var(--acc) l c h / 0.3);
+  --elevation-accent:
+    inset 0 1px 0 rgb(255 255 255 / 0.28), 0 0 0 1px oklch(from var(--acc) calc(l - 0.064) c h), 0
+    1px 2px oklch(from var(--acc) l c h / 0.35);
+
+  /* The composer: white in light; a step above the tray in dark. */
+  --composer-bg: var(--primary-bg);
+
+  /* Reference tables are two-tone like code blocks: a tray (header, expanded
+     rows) around a lighter panel of rows. */
+  --table-tray: var(--base-bg);
+  --table-panel: var(--primary-bg);
+
+  /* Code blocks are dark in both modes: fixed zinc, not seed-derived. */
+  /* Code stays dark in light mode: the frame is the ink seed, the panel a step
+     lighter (scaled by contrast like the tables), so a theme's hue tints both. */
+  --code-bg: var(--fg);
+  --code-panel: oklch(from var(--fg) calc(l + 0.13 * var(--con)) c h);
+  --elevation-code:
+    inset 0 0 0 1px rgb(255 255 255 / 0.1), inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px
+    var(--code-bg), 0 1px 2px rgb(0 0 0 / 0.12), 0 4px 10px -2px rgb(0 0 0 / 0.12);
 
   --radius: 8px;
 
-  --sidebar-width: 224px;
+  --sidebar-width: 256px;
   --thread-width: 672px;
 }
 
 .dark {
-  --bg: #111111;
-  --fg: #fcfcfc;
-  --acc: #4a9eed;
+  --bg: #18181b;
+  --fg: #f4f4f5;
+  --acc: #4c9bea;
 
   /* State deltas flip positive in dark — surfaces sit far from
      white, so states lift toward white instead of sinking. */
@@ -118,7 +167,7 @@
   --primary-lightness: calc(0.1 * var(--con));
   --tertiary-lightness: calc(0.2 * var(--con));
   --quaternary-lightness: calc(0.3 * var(--con));
-  --base-lightness: calc(-0.03 * var(--con));
+  --base-lightness: calc(-0.075 * var(--con));
 
   /* Absolute L floors. The natural lift compresses below 1 sRGB
      unit at bg=#000; floors guarantee tiers stay distinct. At
@@ -139,15 +188,46 @@
   );
   --base-bg: oklch(from var(--bg) max(0, calc(l + var(--base-lightness))) c h);
 
-  --text-secondary: oklch(from var(--fg) calc(l - 0.3) c h);
-  --text-tertiary: oklch(from var(--fg) calc(l - 0.45) c h);
+  --text-body: oklch(from var(--fg) calc(l - 0.1) c h);
+  --text-secondary: oklch(from var(--fg) calc(l - 0.26) c h);
+  --text-tertiary: oklch(from var(--fg) calc(l - 0.42) c h);
+
+  /* Dark rings stay light: a near-black ring reads as a cut-out. */
+  --raised-bg: oklch(from var(--bg) calc(l + 0.29 * var(--con)) c h);
+  /* Selected rows sit a step below raised buttons so they don't shout. */
+  --raised-selected-bg: oklch(from var(--bg) calc(l + 0.21 * var(--con)) c h);
+  --raised-spread: 0.014;
+  --raised-hover-shift: 0.02;
+  --elevation-raised:
+    inset 0 1px 0 rgb(255 255 255 / 0.1), inset 0 0 0 1px rgb(255 255 255 / 0.05), 0 0 0 1px
+    rgb(0 0 0 / 0.16), 0 1px 2px rgb(0 0 0 / 0.1);
+  --elevation-card:
+    inset 0 1px 0 rgb(255 255 255 / 0.05), inset 0 0 0 1px rgb(255 255 255 / 0.06), 0 0 0 1px
+    rgb(0 0 0 / 0.16), 0 1px 2px rgb(0 0 0 / 0.1);
+  --elevation-composer:
+    inset 0 1px 0 rgb(255 255 255 / 0.06), inset 0 0 0 1px rgb(255 255 255 / 0.07),
+    0 0 0 1px rgb(0 0 0 / 0.2), 0 1px 2px rgb(0 0 0 / 0.12), 0 6px 16px -6px rgb(0 0 0 / 0.22);
+  --elevation-overlay:
+    inset 0 1px 0 rgb(255 255 255 / 0.06), inset 0 0 0 1px rgb(255 255 255 / 0.07),
+    0 0 0 1px rgb(0 0 0 / 0.16), 0 12px 32px -8px rgb(0 0 0 / 0.4), 0 32px 64px -16px
+    rgb(0 0 0 / 0.36);
+
+  --composer-bg: oklch(from var(--bg) calc(l + 0.13 * var(--con)) c h);
+  --table-tray: var(--primary-bg);
+  --table-panel: oklch(from var(--bg) calc(l + 0.2 * var(--con)) c h);
+
+  --code-bg: oklch(from var(--bg) calc(l + 0.1 * var(--con)) c h);
+  --code-panel: oklch(from var(--bg) calc(l + 0.2 * var(--con)) c h);
+  --elevation-code:
+    inset 0 0 0 1px rgb(255 255 255 / 0.06), inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px
+    rgb(0 0 0 / 0.16), 0 1px 2px rgb(0 0 0 / 0.1);
 
   --shadow-border-opacity: 0.06;
 }
 
 @theme inline {
   --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
-  --font-mono: var(--font-ibm-plex-mono), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --font-mono: var(--font-ioskeley-mono), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 
   --font-weight-normal: 450;
 
@@ -158,6 +238,14 @@
 
   /* 0px 0px 0px 1px oklch(from var(--primary-border) l c h / 1), */
   --shadow-border: 0px 1px 2px -1px rgb(0 0 0 / 0.06), 0px 2px 4px 0px rgb(0 0 0 / 0.04);
+  --shadow-raised: var(--elevation-raised);
+  --shadow-card: var(--elevation-card);
+  --shadow-composer: var(--elevation-composer);
+  --shadow-overlay: var(--elevation-overlay);
+  --shadow-accent: var(--elevation-accent);
+  --shadow-logo: var(--elevation-logo);
+  --shadow-logo-lg: var(--elevation-logo-lg);
+  --shadow-code: var(--elevation-code);
 
   /* Background */
   --color-base-bg: var(--base-bg);
@@ -207,7 +295,14 @@
   --color-accent-border-active: var(--accent-border-active);
 
   /* Text */
+  --color-composer-bg: var(--composer-bg);
+  --color-table-tray: var(--table-tray);
+  --color-table-panel: var(--table-panel);
+  --color-code-bg: var(--code-bg);
+  --color-code-panel: var(--code-panel);
+
   --color-ink-primary: var(--text-primary);
+  --color-ink-body: var(--text-body);
   --color-ink-secondary: var(--text-secondary);
   --color-ink-tertiary: var(--text-tertiary);
 
@@ -228,6 +323,47 @@
   --text-xl: 16px;
 }
 
+/* Raised face: pair with shadow-raised (or shadow-accent for bg-accent-raised).
+   The gradient reads --raised-face on the element itself, so the hover and
+   selected utilities only swap that variable. */
+@utility bg-raised {
+  --raised-face: var(--raised-bg);
+  background-color: var(--raised-face);
+  background-image: linear-gradient(
+    180deg,
+    oklch(from var(--raised-face) calc(l + var(--raised-spread)) c h),
+    oklch(from var(--raised-face) calc(l - var(--raised-spread)) c h)
+  );
+}
+
+@utility bg-raised-hover {
+  --raised-face: var(--raised-bg-hover);
+}
+
+@utility bg-raised-selected {
+  --raised-face: var(--raised-selected-bg);
+  background-color: var(--raised-face);
+  background-image: linear-gradient(
+    180deg,
+    oklch(from var(--raised-face) calc(l + var(--raised-spread)) c h),
+    oklch(from var(--raised-face) calc(l - var(--raised-spread)) c h)
+  );
+}
+
+@utility bg-accent-raised {
+  --accent-face: var(--acc);
+  background-color: var(--accent-face);
+  background-image: linear-gradient(
+    180deg,
+    oklch(from var(--accent-face) calc(l + 0.043) c h),
+    var(--accent-face)
+  );
+}
+
+@utility bg-accent-raised-hover {
+  --accent-face: oklch(from var(--acc) calc(l + 0.03) c h);
+}
+
 @keyframes shimmer {
   0% {
     background-position: 200% 50%;
@@ -261,6 +397,18 @@
     @apply bg-base-bg font-sans font-normal text-ink-primary;
     font-synthesis: none;
   }
+
+  /* Ioskeley's web build carries ligatures; code shows what was typed. */
+  code,
+  kbd,
+  pre,
+  samp,
+  .font-mono {
+    font-variant-ligatures: none;
+    font-feature-settings:
+      "liga" 0,
+      "calt" 0;
+  }
 }
 
 /* Streamdown element styles */
@@ -278,25 +426,25 @@
 }
 
 [data-streamdown="code-block"] {
-  @apply my-3 overflow-hidden rounded-lg border border-primary-border bg-primary-bg [corner-shape:squircle];
+  @apply my-3 overflow-hidden rounded-xl bg-primary-bg shadow-card;
 }
 [data-streamdown="code-block-header"] {
-  @apply flex items-center justify-between border-b border-primary-border bg-primary-bg p-3 text-xs text-ink-primary;
+  @apply flex h-9 items-center justify-between border-ink-primary/6 border-b bg-base-bg px-3 font-mono text-ink-secondary text-xs;
 }
 [data-streamdown="code-block-body"] {
-  @apply overflow-x-auto p-3 bg-primary-bg text-sm leading-relaxed;
+  @apply overflow-x-auto bg-primary-bg p-3 font-mono text-[13px] leading-[22px];
 }
 
 [data-streamdown="inline-code"] {
-  @apply rounded-sm bg-primary-bg px-1 py-0.5 text-sm text-ink-primary;
+  @apply rounded-[4px] bg-ink-primary/6 px-1 py-px font-mono text-[0.85em] text-ink-primary;
 }
 
 [data-streamdown="link"] {
-  @apply text-ink-primary underline underline-offset-2 decoration-primary-border hover:decoration-ink-primary;
+  @apply text-accent-bg underline decoration-accent-bg/30 underline-offset-4 hover:decoration-accent-bg;
 }
 
 [data-streamdown="blockquote"] {
-  @apply my-3 border-l-2 border-primary-border pl-3 text-ink-primary;
+  @apply my-3 border-ink-primary/10 border-l-2 pl-4 text-ink-body;
 }
 
 [data-streamdown="ordered-list"],
@@ -313,48 +461,171 @@
   @apply pl-1;
 }
 [data-streamdown="list-item"]::marker {
-  color: var(--ink-secondary);
+  color: var(--text-tertiary);
 }
 [data-streamdown="list-item"] > [data-streamdown="paragraph"] {
   @apply my-0;
 }
 
 [data-streamdown="horizontal-rule"] {
-  @apply my-4 border-primary-border;
+  @apply my-4 border-ink-primary/8;
 }
 
 [data-streamdown="strong"] {
-  @apply font-medium text-ink-primary;
+  @apply font-semibold text-ink-primary;
 }
 
 [data-streamdown="table-wrapper"] {
-  @apply my-3 overflow-x-auto;
+  @apply my-3 overflow-x-auto rounded-lg shadow-card;
 }
 [data-streamdown="table"] {
   @apply w-full text-sm;
 }
 [data-streamdown="table-header"] {
-  @apply border-b border-primary-border bg-primary-bg;
+  @apply border-ink-primary/8 border-b bg-base-bg;
 }
 [data-streamdown="table-header-cell"] {
-  @apply px-3 py-1.5 text-left font-medium text-ink-primary;
+  @apply px-3 py-2 text-left font-medium text-ink-secondary text-xs;
 }
 [data-streamdown="table-row"] {
-  @apply border-b border-primary-border;
+  @apply border-ink-primary/6 border-b last:border-0;
 }
 [data-streamdown="table-cell"] {
-  @apply px-3 py-1.5 text-ink-primary;
+  @apply px-3 py-2 text-ink-body;
 }
 
 [data-streamdown="image"] {
   @apply max-w-full rounded-md;
 }
 
-/* ─── Shiki dual-theme code blocks ───
-   CodeBlock highlights with { light: github-light, dark: github-dark } and
-   defaultColor:false, so shiki emits per-token CSS variables instead of a fixed
-   color. Activate light by default and swap to dark under the .dark class. Only
-   the text color switches — the <pre> keeps its own bg-secondary surface. */
+/* Scroll masks fade the edges a scroller can still scroll past. Scroll-driven
+   animations size each fade, so an axis that can't scroll (or a browser without
+   scroll timelines) gets none. */
+@property --scroll-mask-top {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --scroll-mask-bottom {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --scroll-mask-left {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --scroll-mask-right {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@keyframes scroll-mask-top {
+  to {
+    --scroll-mask-top: 32px;
+  }
+}
+@keyframes scroll-mask-bottom {
+  from {
+    --scroll-mask-bottom: 32px;
+  }
+}
+@keyframes scroll-mask-left {
+  to {
+    --scroll-mask-left: 32px;
+  }
+}
+@keyframes scroll-mask-right {
+  from {
+    --scroll-mask-right: 32px;
+  }
+}
+
+@utility scroll-mask-y {
+  mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    #000 var(--scroll-mask-top),
+    #000 calc(100% - var(--scroll-mask-bottom)),
+    transparent
+  );
+  animation:
+    scroll-mask-top linear both,
+    scroll-mask-bottom linear both;
+  animation-timeline: scroll(self y), scroll(self y);
+  animation-range:
+    0 32px,
+    calc(100% - 32px) 100%;
+}
+
+@utility scroll-mask {
+  mask-image:
+    linear-gradient(
+      to bottom,
+      transparent,
+      #000 var(--scroll-mask-top),
+      #000 calc(100% - var(--scroll-mask-bottom)),
+      transparent
+    ),
+    linear-gradient(
+      to right,
+      transparent,
+      #000 var(--scroll-mask-left),
+      #000 calc(100% - var(--scroll-mask-right)),
+      transparent
+    );
+  mask-composite: intersect;
+  animation:
+    scroll-mask-top linear both,
+    scroll-mask-bottom linear both,
+    scroll-mask-left linear both,
+    scroll-mask-right linear both;
+  animation-timeline: scroll(self y), scroll(self y), scroll(self x), scroll(self x);
+  animation-range:
+    0 32px,
+    calc(100% - 32px) 100%,
+    0 32px,
+    calc(100% - 32px) 100%;
+}
+
+/* Switching between the docs and the playground cross-dissolves the viewport (a
+   ViewTransition in SiteShell). The root swaps live rather than fading a frozen
+   snapshot, so the sidebar's own slide plays through. */
+/* biome-ignore lint/correctness/noUnknownTypeSelector: `root` is a view-transition name, not an element. */
+::view-transition-old(root) {
+  display: none;
+}
+/* biome-ignore lint/correctness/noUnknownTypeSelector: `root` is a view-transition name, not an element. */
+::view-transition-new(root) {
+  animation: none;
+}
+::view-transition-group(site-viewport) {
+  animation-duration: 220ms;
+  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+/* Docs code blocks: a line-number gutter on multi-line blocks. */
+[data-code-block] pre[data-line-numbers] code {
+  counter-reset: line;
+}
+
+[data-code-block] pre[data-line-numbers] .line::before {
+  counter-increment: line;
+  content: counter(line);
+  display: inline-block;
+  width: 3rem;
+  padding-right: 1.25rem;
+  text-align: right;
+  color: #71717a;
+  user-select: none;
+}
+
+/* ─── Shiki dual-theme fallback ───
+   Highlighting that runs with { light, dark } themes and defaultColor:false
+   emits per-token CSS variables; activate light by default and swap under
+   .dark. Docs code blocks use one dark theme with inline colors instead. */
 .shiki,
 .shiki span {
   color: var(--shiki-light);
diff --git a/app/layout.tsx b/app/layout.tsx
index 17e2d0a..830ed16 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,10 @@
 import type { Metadata } from "next";
-import { IBM_Plex_Mono, Inter } from "next/font/google";
+import { Inter } from "next/font/google";
+import localFont from "next/font/local";
 import { Providers } from "@/components/providers";
+import { SiteShell } from "@/components/site-shell";
+import { source } from "@/lib/docs/source";
+import chatPackage from "@/packages/chat/package.json";
 import "streamdown/styles.css";
 import "./globals.css";
 const inter = Inter({
@@ -10,12 +14,15 @@ const inter = Inter({
   display: "swap",
 });
 
-// IBM Plex Mono isn't a variable font — enumerate the weights actually used (regular,
-// medium, semibold) so next/font subsets only those.
-const ibmPlexMono = IBM_Plex_Mono({
-  variable: "--font-ibm-plex-mono",
-  weight: ["400", "500", "600"],
-  subsets: ["latin"],
+// Ioskeley Mono (OFL-1.1, github.com/ahatem/IoskeleyMono). Only the ligature
+// build ships web fonts, so globals.css turns ligatures off for mono text.
+const ioskeleyMono = localFont({
+  variable: "--font-ioskeley-mono",
+  src: [
+    { path: "./fonts/IoskeleyMono-Regular.woff2", weight: "400", style: "normal" },
+    { path: "./fonts/IoskeleyMono-Medium.woff2", weight: "500", style: "normal" },
+    { path: "./fonts/IoskeleyMono-SemiBold.woff2", weight: "600", style: "normal" },
+  ],
   display: "swap",
 });
 
@@ -36,10 +43,15 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={`${inter.variable} ${ibmPlexMono.variable} antialiased`}
+        className={`${inter.variable} ${ioskeleyMono.variable} antialiased`}
         suppressHydrationWarning
       >
-        <Providers>{children}</Providers>
+        <Providers>
+          {/* Read here on the server, so only the version reaches the client. */}
+          <SiteShell tree={source.pageTree} version={chatPackage.version}>
+            {children}
+          </SiteShell>
+        </Providers>
       </body>
     </html>
   );
diff --git a/bun.lock b/bun.lock
index 6fcf283..b1684a7 100644
--- a/bun.lock
+++ b/bun.lock
@@ -10,6 +10,8 @@
         "@ai-sdk/react": "^3.0.220",
         "@base-ui/react": "^1.6.0",
         "@intentface/chat": "workspace:*",
+        "@keyline-icons/react": "^1.4.0",
+        "@tabler/icons-react": "^3.46.0",
         "ai": "^6.0.218",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -46,7 +48,7 @@
     },
     "packages/chat": {
       "name": "@intentface/chat",
-      "version": "0.2.0",
+      "version": "0.5.0",
       "dependencies": {
         "@floating-ui/dom": "^1.7.6",
         "nanoid": "^5.1.11",
@@ -284,6 +286,8 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
+    "@keyline-icons/react": ["@keyline-icons/react@1.4.0", "", { "peerDependencies": { "react": ">=18" } }, "sha512-zpeRzPHRFQcSEC5qBM5LYE9hNePkM2wMGBAgD35vOSoXMghSLndeYrAQovjsFIPn0cDxg7EVJoFx3pga5QdmVg=="],
+
     "@manypkg/find-root": ["@manypkg/find-root@1.1.0", "", { "dependencies": { "@babel/runtime": "^7.5.5", "@types/node": "^12.7.1", "find-up": "^4.1.0", "fs-extra": "^8.1.0" } }, "sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA=="],
 
     "@manypkg/get-packages": ["@manypkg/get-packages@1.1.3", "", { "dependencies": { "@babel/runtime": "^7.5.5", "@changesets/types": "^4.0.1", "@manypkg/find-root": "^1.1.0", "fs-extra": "^8.1.0", "globby": "^11.0.0", "read-yaml-file": "^1.1.0" } }, "sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A=="],
@@ -342,6 +346,10 @@
 
     "@swc/helpers": ["@swc/helpers@0.5.15", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g=="],
 
+    "@tabler/icons": ["@tabler/icons@3.46.0", "", {}, "sha512-f2RYFl3fzPwj5WO82x6en0dmkjefxEfOm16D1ByM6cj/McNiwOkL4VaPUoP9VVIrXAD9WnTSVFr70px703b//A=="],
+
+    "@tabler/icons-react": ["@tabler/icons-react@3.46.0", "", { "dependencies": { "@tabler/icons": "3.46.0" }, "peerDependencies": { "react": ">= 16" } }, "sha512-CCm7xJWhDT2PH4ZIFkP6AgYKtVhq0gpYkjUN+GVh1AzmIQaa77OW0bQPBPQiTE0PsXMR9oSxFqA3qBglzPyrVQ=="],
+
     "@tailwindcss/node": ["@tailwindcss/node@4.3.2", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "enhanced-resolve": "5.21.6", "jiti": "^2.7.0", "lightningcss": "1.32.0", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.3.2" } }, "sha512-yWP/sqEcBLaD8JuA6zNwxoYKr75qxTioYwlRwekj5Jr/I5GXnoJfjetH/psLUIv74cYTH2lBUEzBkinthoYcBg=="],
 
     "@tailwindcss/oxide": ["@tailwindcss/oxide@4.3.2", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.3.2", "@tailwindcss/oxide-darwin-arm64": "4.3.2", "@tailwindcss/oxide-darwin-x64": "4.3.2", "@tailwindcss/oxide-freebsd-x64": "4.3.2", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.2", "@tailwindcss/oxide-linux-arm64-gnu": "4.3.2", "@tailwindcss/oxide-linux-arm64-musl": "4.3.2", "@tailwindcss/oxide-linux-x64-gnu": "4.3.2", "@tailwindcss/oxide-linux-x64-musl": "4.3.2", "@tailwindcss/oxide-wasm32-wasi": "4.3.2", "@tailwindcss/oxide-win32-arm64-msvc": "4.3.2", "@tailwindcss/oxide-win32-x64-msvc": "4.3.2" } }, "sha512-z8ZgnzX8gdNoWLBLqBPoh/sjnxkwvf9ZuWjnO0l0yIzbLa5/9S+eC5QxGZKRobVHIC3/1BoMWjHblqWjcgFgag=="],
diff --git a/components/ai/ask-user.tsx b/components/ai/ask-user.tsx
index 5ab4aec..2bfb3d1 100644
--- a/components/ai/ask-user.tsx
+++ b/components/ai/ask-user.tsx
@@ -6,12 +6,14 @@ import {
   useAskUserOption,
   useAskUserOptions,
 } from "@intentface/chat/ask-user";
-import { CheckIcon } from "lucide-react";
+import {
+  Check,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  CircleQuestion,
+} from "@keyline-icons/react";
 import { type ComponentProps, type RefObject, useState } from "react";
-import { ChevronDownIcon } from "@/components/icons/chevron-down";
-import { ChevronLeftMediumIcon } from "@/components/icons/chevron-left-medium";
-import { ChevronRightMediumIcon } from "@/components/icons/chevron-right-medium";
-import { CircleQuestionmarkIcon } from "@/components/icons/circle-questionmark";
 import { Collapsible } from "@/components/ui/collapsible";
 import type { AskUserQuestion } from "@/lib/ai/types";
 import { cn } from "@/lib/utils";
@@ -53,14 +55,14 @@ const AskUserNavigation = ({ className, ...props }: AskUserNavigationProps) => (
 );
 
 const navigationButtonClasses =
-  "flex size-6 cursor-pointer items-center justify-center rounded-md text-ink-secondary transition-colors hover:bg-tertiary-bg-hover hover:text-ink-primary disabled:pointer-events-none disabled:opacity-30";
+  "flex size-6 cursor-pointer items-center justify-center rounded-full text-ink-secondary transition-colors hover:bg-ink-primary/5 hover:text-ink-primary focus-visible:outline-2 focus-visible:outline-accent-bg/60 disabled:pointer-events-none disabled:opacity-30";
 
 /** Navigate to the previous step. */
 type AskUserPreviousProps = ComponentProps<typeof AskUserPrimitive.Previous>;
 
 const AskUserPrevious = ({ className, ...props }: AskUserPreviousProps) => (
   <AskUserPrimitive.Previous className={cn(navigationButtonClasses, className)} {...props}>
-    <ChevronLeftMediumIcon className="size-3.5" />
+    <ChevronLeft className="size-3.5" />
   </AskUserPrimitive.Previous>
 );
 
@@ -69,7 +71,7 @@ type AskUserNextProps = ComponentProps<typeof AskUserPrimitive.Next>;
 
 const AskUserNext = ({ className, ...props }: AskUserNextProps) => (
   <AskUserPrimitive.Next className={cn(navigationButtonClasses, className)} {...props}>
-    <ChevronRightMediumIcon className="size-3.5" />
+    <ChevronRight className="size-3.5" />
   </AskUserPrimitive.Next>
 );
 
@@ -104,10 +106,10 @@ const AskUserOption = ({ className, ...props }: AskUserOptionProps) => (
   <AskUserPrimitive.Option
     className={cn(
       "flex cursor-pointer items-start gap-2 rounded-lg p-2 leading-tight transition-colors",
-      "data-highlighted:bg-primary-bg-hover",
+      "data-highlighted:bg-ink-primary/5",
       // Options carry real focus (roving tabindex), but focus always tracks
-      // the highlight — the bg-primary-bg-hover highlight IS the focus
-      // indication, same as command items. No extra ring.
+      // the highlight — the highlight wash IS the focus indication, same as
+      // command items. No extra ring.
       "outline-none",
       className,
     )}
@@ -125,11 +127,10 @@ const AskUserOptionInput = () => {
 };
 
 const INDICATOR_CLASS = cn(
-  "flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-tertiary-border bg-tertiary-bg text-2xs font-medium tabular-nums text-ink-secondary",
+  "flex size-4 shrink-0 items-center justify-center rounded-[5px] bg-raised font-medium text-[10px] text-ink-secondary tabular-nums shadow-raised",
 );
 
-const INDICATOR_SELECTED_CLASS =
-  "border-tertiary-border-active bg-tertiary-bg-active text-ink-primary";
+const INDICATOR_SELECTED_CLASS = "bg-accent-raised text-white shadow-accent";
 
 const AskUserOptionCheckIndicator = () => {
   const option = useAskUserOption();
@@ -138,7 +139,7 @@ const AskUserOptionCheckIndicator = () => {
       aria-hidden="true"
       className={cn(INDICATOR_CLASS, option.selected && INDICATOR_SELECTED_CLASS)}
     >
-      {option.selected && <CheckIcon className="size-3" />}
+      {option.selected && <Check className="size-3" />}
     </span>
   );
 };
@@ -203,10 +204,10 @@ const AskUserSummary = ({ questions, answers, className, ...props }: AskUserSumm
       {...props}
     >
       <Collapsible.Trigger className="flex w-full cursor-pointer items-center gap-2 rounded-md py-1 text-sm text-ink-secondary transition-colors hover:text-ink-primary">
-        <span className="text-gray-11/60">
+        <span>
           Answered {count} {count === 1 ? "question" : "questions"}
         </span>
-        <ChevronDownIcon
+        <ChevronDown
           className={cn(
             "size-3.5 shrink-0 transition-transform",
             isOpen ? "rotate-180" : "rotate-0",
@@ -217,7 +218,7 @@ const AskUserSummary = ({ questions, answers, className, ...props }: AskUserSumm
         {questions.map((q) => (
           <div key={q.question} className="flex gap-2 leading-tight">
             <div className="flex h-lh shrink-0 items-center justify-center">
-              <CircleQuestionmarkIcon className="size-4" />
+              <CircleQuestion className="size-4" />
             </div>
             <div className="flex flex-col gap-0.5">
               <span className="text-sm font-medium leading-tight">{q.question}</span>
diff --git a/components/ai/attachments.tsx b/components/ai/attachments.tsx
index f019bf1..0baf92b 100644
--- a/components/ai/attachments.tsx
+++ b/components/ai/attachments.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import type { AttachmentErrorCode, AttachmentItem } from "@intentface/chat/attachments";
-import { PaperclipIcon } from "lucide-react";
+import { File, Paperclip, X } from "@keyline-icons/react";
 import { AnimatePresence, motion } from "motion/react";
 import Image from "next/image";
 import type { ComponentProps, ReactNode } from "react";
@@ -10,9 +10,6 @@ import { createPortal } from "react-dom";
 import { IconButton } from "@/components/ui/icon-button";
 import { formatFileSize, isImageAttachment, isPdfAttachment } from "@/lib/ai/attachments";
 import { cn } from "@/lib/utils";
-import { CrossMediumIcon } from "../icons/cross-medium";
-import { FileBendIcon } from "../icons/file-bend";
-import { PaperClipIcon } from "../icons/paperclip";
 
 // Re-export the attachment surface so consumers import everything from this
 // module: the generic mechanics from the headless package, and this app's
@@ -67,8 +64,8 @@ type AttachmentsItemProps = {
 };
 
 const getFileIcon = (mediaType: string) => {
-  if (isPdfAttachment(mediaType)) return FileBendIcon;
-  return PaperclipIcon;
+  if (isPdfAttachment(mediaType)) return File;
+  return Paperclip;
 };
 
 const AttachmentsItem = ({ item, children, className }: AttachmentsItemProps) => {
@@ -90,7 +87,8 @@ const AttachmentsItem = ({ item, children, className }: AttachmentsItemProps) =>
         isImageAttachment(mediaType) ? "image" : isPdfAttachment(mediaType) ? "pdf" : "file"
       }
       className={cn(
-        "group relative flex h-12 max-w-48 items-center gap-2 rounded-lg border border-secondary-border bg-secondary-bg px-2",
+        // Attachment chips are rounded squares, raised like the composer's buttons.
+        "group relative flex h-7 max-w-56 items-center gap-1.5 rounded-[7px] bg-raised pr-2 pl-1.5 shadow-raised",
         className,
       )}
     >
@@ -99,21 +97,21 @@ const AttachmentsItem = ({ item, children, className }: AttachmentsItemProps) =>
           width={32}
           height={32}
           alt={filename}
-          className="size-8 shrink-0 rounded-xs object-cover ring-1 ring-inset ring-slate-7/10"
+          className="size-[18px] shrink-0 rounded-[4px] object-cover ring-1 ring-ink-primary/10 ring-inset"
           src={item.url}
         />
       ) : (
-        <div className="flex size-10 shrink-0 items-center justify-center rounded-md bg-primary-bg-hover">
-          <Icon className="size-4 text-muted-foreground" />
-        </div>
+        <Icon className="size-[13px] shrink-0 text-ink-secondary" />
       )}
-      <div className="flex min-w-0 flex-col">
-        <span className="flex text-xs font-medium">
+      <div className="flex min-w-0 items-baseline gap-1.5">
+        <span className="flex min-w-0 font-medium text-ink-primary text-xs">
           <span className="truncate">{filename.slice(0, -7)}</span>
           <span className="shrink-0">{filename.slice(-7)}</span>
         </span>
         {item.fileSize != null && (
-          <span className="text-2xs text-muted-foreground">{formatFileSize(item.fileSize)}</span>
+          <span className="shrink-0 font-mono text-2xs text-ink-tertiary">
+            {formatFileSize(item.fileSize)}
+          </span>
         )}
       </div>
       {children}
@@ -138,7 +136,7 @@ const AttachmentsRemove = ({ onRemove, filename, className }: AttachmentsRemoveP
     size="2xs"
     type="button"
   >
-    <CrossMediumIcon className="size-3" />
+    <X className="size-3" />
   </IconButton>
 );
 
@@ -151,9 +149,9 @@ type AttachmentsDropzoneProps = {
 
 const dropzoneVariants = {
   inline:
-    "absolute inset-0 m-1 flex items-center justify-center rounded-xl border border-dashed border-secondary-border bg-secondary-bg",
+    "absolute inset-0 m-1 flex items-center justify-center rounded-lg border border-accent-bg/50 border-dashed bg-composer-bg text-accent-bg",
   global:
-    "absolute inset-0 z-50 flex items-center justify-center rounded-[inherit] border-2 border-dashed border-secondary-border bg-secondary-bg/80 backdrop-blur-xs",
+    "absolute inset-0 z-50 flex items-center justify-center rounded-[inherit] border-2 border-accent-bg/50 border-dashed bg-secondary-bg/80 text-accent-bg backdrop-blur-xs",
 };
 
 const GLOBAL_DROPZONE_SELECTOR = '[data-slot="sidebar-inset"]';
@@ -224,7 +222,7 @@ type AttachmentsTriggerProps = ComponentProps<typeof IconButton>;
 const AttachmentsTrigger = ({ children, className, ...props }: AttachmentsTriggerProps) => {
   return (
     <IconButton type="button" variant="ghost" aria-label="Add attachment" {...props}>
-      {children ?? <PaperClipIcon />}
+      {children ?? <Paperclip />}
     </IconButton>
   );
 };
diff --git a/components/ai/chip.tsx b/components/ai/chip.tsx
index 86333e9..d2cf53e 100644
--- a/components/ai/chip.tsx
+++ b/components/ai/chip.tsx
@@ -12,7 +12,7 @@ import { cn } from "@/lib/utils";
 // doesn't grow the line box; `box-decoration-clone` keeps padding/bg intact if a
 // chip wraps; `leading-[inherit]` so it never inflates the editor's line height.
 export const CHIP_SURFACE_CLASS =
-  "box-decoration-clone inline rounded-sm border border-primary-border bg-primary-bg px-0.75 py-0.5 align-baseline font-book leading-[inherit] whitespace-nowrap text-ink-primary";
+  "box-decoration-clone inline rounded bg-ink-primary/6 px-1.5 py-0.5 align-baseline font-book leading-[inherit] whitespace-nowrap text-ink-primary";
 
 const chipVariants = cva(CHIP_SURFACE_CLASS, {
   variants: {
diff --git a/components/ai/composer.tsx b/components/ai/composer.tsx
index c308342..4264a8a 100644
--- a/components/ai/composer.tsx
+++ b/components/ai/composer.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { ArrowUp, Stop } from "@keyline-icons/react";
 
 // Styled composer — thin wrappers over @intentface/chat/composer. Behavior
 // (editor, store, machines, command plumbing) lives in the package; this file
@@ -20,8 +21,6 @@ import { Children, type ComponentProps, type ReactNode, useMemo, useRef } from "
 import { AskUser } from "@/components/ai/ask-user";
 import { Attachments } from "@/components/ai/attachments";
 import { Chip } from "@/components/ai/chip";
-import { SendIcon } from "@/components/icons/send";
-import { StopIcon } from "@/components/icons/stop";
 import Button from "@/components/ui/button";
 import { IconButton } from "@/components/ui/icon-button";
 import { Kbd } from "@/components/ui/kbd";
@@ -69,7 +68,16 @@ export type {
 export type ComposerRootProps = ComponentProps<typeof ComposerPrimitive.Root>;
 
 const ComposerRoot = ({ className, ...props }: ComposerRootProps) => (
-  <ComposerPrimitive.Root className={cn("relative w-full flex flex-col", className)} {...props} />
+  <ComposerPrimitive.Root
+    className={cn(
+      "relative flex w-full flex-col rounded-2xl transition-[padding,background-color] duration-200",
+      // With context showing, the root becomes the Linear-style tray: a grey
+      // band wrapping the composer, its context row on top.
+      "has-[>[data-composer-context-window][data-open]]:bg-ink-primary/[0.04] has-[>[data-composer-context-window][data-open]]:p-1 dark:has-[>[data-composer-context-window][data-open]]:bg-white/[0.02]",
+      className,
+    )}
+    {...props}
+  />
 );
 
 // ---------------------------------------------------------------------------
@@ -81,10 +89,8 @@ type ComposerContainerProps = ComponentProps<typeof ComposerPrimitive.Container>
 const ComposerContainer = ({ className, ...props }: ComposerContainerProps) => (
   <ComposerPrimitive.Container
     className={cn(
-      // Positioned so it paints above the context window peeking out from
-      // behind its top edge. Edge is shadow-drawn (shadow-border), not a
-      // border, matching the playground cards.
-      "relative bg-primary-bg rounded-4xl border border-primary-border shadow-xs [corner-shape:squircle] cursor-text transition-colors",
+      // One colour throughout; the edge is the composer shadow, not a border.
+      "relative cursor-text rounded-xl bg-composer-bg p-1 shadow-composer transition-colors",
       className,
     )}
     {...props}
@@ -194,24 +200,21 @@ const ComposerTextarea = ({ className, disabled = false, ...props }: ComposerTex
     renderChip={(chip) => {
       const icon = chip.icon && isChipIconKey(chip.icon) ? CHIP_ICONS[chip.icon] : undefined;
       return (
-        // The composer input uses the plain borderless chip surface; the
-        // bordered/filled CHIP_SURFACE_CLASS is reserved for message/docs chips.
-        <Chip className="border-tertiary-border bg-tertiary-bg">
+        // One chip surface everywhere, so the badge commits without a jump.
+        <Chip>
           {icon && <Chip.Icon>{icon}</Chip.Icon>}
           <Chip.Label>{chip.label}</Chip.Label>
         </Chip>
       );
     }}
     className={cn(
-      "max-h-32 min-h-8 overflow-y-auto py-2 px-3 text-md",
+      "max-h-32 min-h-12 overflow-y-auto px-2.5 pt-2.5 pb-1 text-md",
       "mask-[linear-gradient(to_bottom,transparent,black_16px,black_calc(100%-16px),transparent)]",
       // The editor element — engine-owned DOM, out of JSX reach.
-      "**:data-composer-editor:w-full **:data-composer-editor:max-w-none **:data-composer-editor:font-book **:data-composer-editor:leading-[1.7] [&_[data-composer-editor]:focus]:outline-none",
-      // Active-prefix badge: the composer's own borderless surface (matching the
-      // committed chip above, not the bordered CHIP_SURFACE_CLASS used in
-      // messages/docs) so the badge and the chip it becomes share one baseline —
-      // no jump on commit.
-      "**:data-command-badge:box-decoration-clone **:data-command-badge:inline **:data-command-badge:rounded-sm **:data-command-badge:px-0.75 **:data-command-badge:py-0.5 **:data-command-badge:align-baseline **:data-command-badge:font-book **:data-command-badge:leading-[inherit] **:data-command-badge:whitespace-nowrap **:data-command-badge:bg-primary-bg-hover **:data-command-badge:text-ink-primary",
+      "**:data-composer-editor:w-full **:data-composer-editor:max-w-none **:data-composer-editor:font-book **:data-composer-editor:leading-6 [&_[data-composer-editor]:focus]:outline-none",
+      // Active-prefix badge: the same surface as the committed chip above, so
+      // the badge and the chip it becomes share one baseline — no jump on commit.
+      "**:data-command-badge:box-decoration-clone **:data-command-badge:inline **:data-command-badge:rounded **:data-command-badge:px-1.5 **:data-command-badge:py-0.5 **:data-command-badge:align-baseline **:data-command-badge:font-book **:data-command-badge:leading-[inherit] **:data-command-badge:whitespace-nowrap **:data-command-badge:bg-ink-primary/6 **:data-command-badge:text-ink-primary",
       // The badge's hint element — ghost-text completion or the empty-query
       // placeholder (the package renders whichever applies into one slot).
       "**:data-command-hint:pointer-events-none **:data-command-hint:whitespace-nowrap **:data-command-hint:text-ink-tertiary",
@@ -244,9 +247,7 @@ const ComposerPlaceholder = ({ placeholder, children, className }: ComposerPlace
   const { currentItem, key } = useLoop(loopItems);
 
   if (!isLooping && items.length === 1) {
-    return (
-      <div className={cn("min-h-lh text-ink-tertiary leading-[1.7]", className)}>{items[0]}</div>
-    );
+    return <div className={cn("min-h-lh text-ink-tertiary leading-6", className)}>{items[0]}</div>;
   }
 
   if (!isLooping && items.length === 0) return null;
@@ -260,7 +261,7 @@ const ComposerPlaceholder = ({ placeholder, children, className }: ComposerPlace
           animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
           exit={{ opacity: 0, y: "-100%", filter: "blur(4px)" }}
           transition={{ duration: 0.3, ease: "easeOut" }}
-          className={cn("text-ink-tertiary font-book leading-[1.7]", className)}
+          className={cn("text-ink-tertiary font-book leading-6", className)}
         >
           {typeof items[0] === "string" ? currentItem : items[key % items.length]}
         </motion.span>
@@ -278,11 +279,9 @@ type ComposerContextWindowProps = ComponentProps<typeof ComposerPrimitive.Contex
 const ComposerContextWindow = ({ className, ...props }: ComposerContextWindowProps) => (
   <ComposerPrimitive.ContextWindow
     className={cn(
-      "relative z-0 overflow-hidden flex items-center transition-all duration-200 px-1.5 text-xs rounded-t-2xl bg-secondary-bg-active",
-      // Visible: 32px band peeking above the container plus 16px submerged
-      // beneath it (negative margin pulls the container up over the
-      // bottom-padded zone).
-      "h-0 opacity-0 data-open:h-12 data-open:pb-4 data-open:-mb-4 data-open:opacity-100",
+      "flex items-center gap-3 overflow-hidden px-3 font-medium text-ink-body text-xs transition-[height,opacity] duration-200",
+      // The tray's top row: 34px when there is context, collapsed when not.
+      "h-0 opacity-0 data-open:h-[34px] data-open:opacity-100",
       className,
     )}
     {...props}
@@ -293,7 +292,10 @@ const ComposerActions = ({
   className,
   ...props
 }: ComponentProps<typeof ComposerPrimitive.Actions>) => (
-  <ComposerPrimitive.Actions className={cn("flex justify-end gap-2 p-2", className)} {...props} />
+  <ComposerPrimitive.Actions
+    className={cn("flex h-12 items-center justify-end gap-1 px-1.5", className)}
+    {...props}
+  />
 );
 
 type ComposerSubmitProps = ComponentProps<typeof IconButton> & {
@@ -319,6 +321,7 @@ const ComposerSubmit = ({
     <IconButton
       type={submit.type}
       variant="accent"
+      size="sm"
       data-slot="composer-submit"
       data-generating={isGenerating ? "" : undefined}
       aria-label={isGenerating ? "Stop generating" : "Send message"}
@@ -336,7 +339,7 @@ const ComposerSubmit = ({
           transition={{ duration: 0.15 }}
           className="flex items-center justify-center"
         >
-          {isGenerating ? <StopIcon /> : (children ?? <SendIcon />)}
+          {isGenerating ? <Stop /> : (children ?? <ArrowUp />)}
         </motion.span>
       </AnimatePresence>
     </IconButton>
@@ -366,7 +369,7 @@ const ComposerPanel = ({ className, ...props }: ComposerPanelProps) => (
       // coordinates); portaled to the body, so it never reserves layout in the composer.
       // Match the composer Container's width via the positioner's --anchor-width var.
       "absolute z-50 w-(--anchor-width) overflow-hidden",
-      "rounded-4xl border border-primary-border bg-primary-bg [corner-shape:squircle]",
+      "rounded-xl bg-primary-bg shadow-composer",
       "transition-[opacity,transform] duration-150 ease-out",
       "data-starting-style:opacity-0 data-ending-style:opacity-0",
       // Slide from the anchored edge: default (above) drops in from below; flipped
@@ -396,7 +399,7 @@ const ComposerPopover = ({ className, ...props }: ComposerPopoverProps) => {
         // off the anchor token with a stronger shadow. `absolute` is the base positioning
         // context (the positioner then writes left/top in page coordinates); z-50 keeps
         // the portaled popover above the thread.
-        "absolute z-50 w-72 overflow-hidden border border-primary-border bg-primary-bg rounded-4xl shadow-lg [corner-shape:squircle]",
+        "absolute z-50 w-72 overflow-hidden rounded-xl bg-primary-bg shadow-composer",
         "transition-[opacity,transform,filter] duration-150 ease-out",
         "data-closed:opacity-0 data-closed:blur-[3px]",
         // Slide from the anchored edge — opens upward by default, downward when flipped.
@@ -471,7 +474,7 @@ const ComposerCommandEmpty = ({
       "hidden group-data-empty/composer-command-list:flex",
       // Shown only when nothing matches, where it acts as the single highlighted
       // option whose selection dismisses — so it carries the highlight styling.
-      "items-center gap-2 rounded-lg bg-primary-bg-hover px-3 h-8 text-sm text-ink-primary",
+      "items-center gap-2 rounded-lg bg-ink-primary/5 px-3 h-8 text-sm text-ink-primary",
       className,
     )}
     {...props}
@@ -498,9 +501,9 @@ type ComposerCommandItemProps = ComponentProps<typeof ComposerPrimitive.CommandI
 const ComposerCommandItem = ({ className, ...props }: ComposerCommandItemProps) => (
   <ComposerPrimitive.CommandItem
     className={cn(
-      // Radius is the popover's 16px (rounded-2xl) minus the 5px gap to its edge
-      // (1px border + p-1) so the highlight corner stays concentric with it.
-      "flex w-full items-center rounded-lg gap-2.5 px-3 h-8 text-sm font-book text-ink-primary cursor-pointer data-highlighted:bg-primary-bg-hover",
+      // Radius is the surface's 12px (rounded-xl) minus its 4px padding, so the
+      // highlight corner stays concentric with it.
+      "flex w-full items-center rounded-lg gap-2.5 px-2.5 h-8 text-sm font-book text-ink-primary cursor-pointer data-highlighted:bg-ink-primary/5",
       className,
     )}
     {...props}
@@ -547,7 +550,7 @@ const ComposerCommandGroupLabel = ({
   ...props
 }: ComponentProps<typeof ComposerPrimitive.CommandGroupLabel>) => (
   <ComposerPrimitive.CommandGroupLabel
-    className={cn("px-2 pt-2 pb-1 text-xs font-medium text-ink-tertiary", className)}
+    className={cn("px-2.5 pt-2 pb-1 text-xs font-medium text-ink-secondary", className)}
     {...props}
   />
 );
diff --git a/components/ai/message.tsx b/components/ai/message.tsx
index aa526d0..ee06b3a 100644
--- a/components/ai/message.tsx
+++ b/components/ai/message.tsx
@@ -7,7 +7,7 @@ import {
   useMessageSelection,
   useMessageSelectionScope,
 } from "@intentface/chat/message";
-import { PaperclipIcon } from "lucide-react";
+import { Check, Copy, File, MessageSquare, Paperclip, Stop } from "@keyline-icons/react";
 import { motion } from "motion/react";
 import Image from "next/image";
 import { type ComponentProps, useMemo } from "react";
@@ -21,11 +21,6 @@ import { useCopy } from "@/hooks/use-copy";
 import { isImageAttachment, isPdfAttachment } from "@/lib/ai/attachments";
 import { CHIP_ICONS, isChipIconKey } from "@/lib/ai/chip-icons";
 import { cn } from "@/lib/utils";
-import { Bubble5Icon } from "../icons/bubble-5";
-import { CheckMarkMediumIcon } from "../icons/check-mark-medium";
-import { CopyIcon } from "../icons/copy";
-import { FileBendIcon } from "../icons/file-bend";
-import { StopIcon } from "../icons/stop";
 
 type MessageRootProps = ComponentProps<typeof MessagePrimitive.Root>;
 
@@ -82,16 +77,15 @@ const MessageContent = ({ className, ...props }: ComponentProps<"div">) => (
   <div
     data-slot="message-content"
     className={cn(
-      "flex flex-col gap-4 overflow-hidden border",
-      // User message styling — edge is shadow-drawn (shadow-border), matching
-      // the composer and playground cards.
-      "group-data-[role=user]:max-w-[80%] group-data-[role=user]:border group-data-[role=user]:bg-primary-bg group-data-[role=user]:px-3 group-data-[role=user]:py-1.5 group-data-[role=user]:shadow-xs group-data-[role=user]:border-primary-border group-data-[role=user]:min-h-9 group-data-[role=user]:rounded-[20px]",
+      "flex flex-col gap-4 overflow-hidden",
+      // User bubble — the composer's colour with the crisp card edge.
+      "group-data-[role=user]:min-h-9 group-data-[role=user]:max-w-[80%] group-data-[role=user]:rounded-[20px] group-data-[role=user]:bg-composer-bg group-data-[role=user]:px-3.5 group-data-[role=user]:py-1.5 group-data-[role=user]:text-ink-primary group-data-[role=user]:shadow-card",
       // Sticky turns: the pinned user message spans the column, text left.
       "group-data-[role=user]:group-data-sticky/turn:max-w-none",
       // Assistant message styling
-      "group-data-[role=assistant]:w-full group-data-[role=assistant]:border-none",
+      "group-data-[role=assistant]:w-full group-data-[role=assistant]:text-ink-body",
       // Error styling — presence attribute (data-error=""), not a value match.
-      "group-data-error:border-destructive group-data-error:bg-destructive/10",
+      "group-data-error:bg-red-500/8 group-data-error:text-red-700 dark:group-data-error:text-red-300",
       className,
     )}
     {...props}
@@ -177,7 +171,7 @@ type MessageTextProps = {
 
 const MessageText = ({ children, className }: MessageTextProps) => (
   <MessagePrimitive.Text
-    className={cn("whitespace-pre-wrap text-md", className)}
+    className={cn("whitespace-pre-wrap text-md leading-6", className)}
     renderChip={(segment) => <MessageChip label={segment.label} chip={segment} />}
   >
     {children}
@@ -188,7 +182,7 @@ const MessageText = ({ children, className }: MessageTextProps) => (
 const MessageError = ({ children, className, ...props }: ComponentProps<"div">) => (
   <div
     data-slot="message-error"
-    className={cn("flex items-start gap-2 text-sm text-destructive", className)}
+    className={cn("flex items-start gap-2 text-red-600 text-sm dark:text-red-400", className)}
     {...props}
   >
     <svg
@@ -219,8 +213,8 @@ const MessageStopped = ({ className, ...props }: ComponentProps<"div">) => (
     className={cn("flex w-full justify-center", className)}
     {...props}
   >
-    <span className="inline-flex items-center gap-1.5 rounded-full border border-primary-border bg-primary-bg px-2.5 py-1 text-xs text-ink-secondary">
-      <StopIcon className="size-3 shrink-0" />
+    <span className="inline-flex h-6 items-center gap-1.5 rounded-full bg-raised px-2.5 font-medium text-ink-secondary text-xs shadow-raised">
+      <Stop className="size-3 shrink-0" />
       Stopped
     </span>
   </div>
@@ -230,7 +224,7 @@ const MessageStopped = ({ className, ...props }: ComponentProps<"div">) => (
 const MessageLoading = ({ className, ...props }: ComponentProps<"div">) => (
   <div
     data-slot="message-loading"
-    className={cn("flex items-start gap-1 text-sm text-muted-foreground", className)}
+    className={cn("flex items-start gap-1 text-ink-secondary text-sm", className)}
     {...props}
   >
     <span>Loading...</span>
@@ -256,7 +250,7 @@ const MessageCopy = ({
             className={className}
             {...props}
           >
-            {isCopied ? <CheckMarkMediumIcon /> : <CopyIcon />}
+            {isCopied ? <Check /> : <Copy />}
           </IconButton>
         }
       />
@@ -283,12 +277,12 @@ type MessageAttachmentProps = {
 const MessageAttachment = ({ attachment, className, ...props }: MessageAttachmentProps) => {
   const mediaType = attachment.mediaType ?? "";
   const filename = attachment.filename ?? "Attachment";
-  const Icon = isPdfAttachment(mediaType) ? FileBendIcon : PaperclipIcon;
+  const Icon = isPdfAttachment(mediaType) ? File : Paperclip;
 
   return (
     <div
       className={cn(
-        "flex h-10 max-w-48 items-center gap-2 rounded-lg border border-slate-7 bg-primary-bg px-2",
+        "flex h-10 max-w-48 items-center gap-2 rounded-[10px] bg-raised px-2 shadow-raised",
         className,
       )}
       {...props}
@@ -300,7 +294,7 @@ const MessageAttachment = ({ attachment, className, ...props }: MessageAttachmen
               width={32}
               height={32}
               alt={filename}
-              className="size-6 shrink-0 rounded-xs object-cover ring-1 ring-inset ring-slate-7/10"
+              className="size-6 shrink-0 rounded-[5px] object-cover ring-1 ring-ink-primary/10 ring-inset"
               src={attachment.url}
             />
           </HoverCard.Trigger>
@@ -315,12 +309,12 @@ const MessageAttachment = ({ attachment, className, ...props }: MessageAttachmen
           </HoverCard.Content>
         </HoverCard>
       ) : (
-        <div className="flex size-10 shrink-0 items-center justify-center rounded-md bg-primary-bg-hover">
-          <Icon className="size-4 text-muted-foreground" />
+        <div className="flex size-6 shrink-0 items-center justify-center rounded-[5px] bg-ink-primary/6">
+          <Icon className="size-3.5 text-ink-secondary" />
         </div>
       )}
       <div className="flex min-w-0 flex-col">
-        <span className="flex text-xs font-medium">
+        <span className="flex font-medium text-ink-primary text-xs">
           <span className="truncate">{filename.slice(0, -7)}</span>
           <span className="shrink-0">{filename.slice(-7)}</span>
         </span>
@@ -388,7 +382,7 @@ const MessageSelection = ({ onAdd, className }: MessageSelectionProps) => {
               initialFocus={false}
               finalFocus={false}
               className={cn(
-                "flex items-center gap-1 rounded-full border border-primary-border bg-primary-bg p-0.5 shadow-md outline-none",
+                "flex items-center gap-1 rounded-full bg-primary-bg p-0.5 shadow-overlay outline-none",
                 "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
                 "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
                 "duration-100",
@@ -401,13 +395,13 @@ const MessageSelection = ({ onAdd, className }: MessageSelectionProps) => {
                 type="button"
                 variant="ghost"
                 size="sm"
-                className="gap-1.5 rounded-full"
+                className="gap-1.5"
                 onClick={() => {
                   if (selection) onAdd(selection.text);
                   window.getSelection()?.removeAllRanges();
                 }}
               >
-                <Bubble5Icon className="size-3.5" />
+                <MessageSquare className="size-3.5" />
                 Add to chat
               </Button>
             </PopoverPrimitive.Popup>
@@ -437,18 +431,20 @@ const MessageSource = ({
     target="_blank"
     rel="noopener noreferrer"
     className={cn(
-      "inline-flex items-center gap-1.5 rounded-md border border-primary-border bg-primary-bg px-2 py-1 text-xs text-ink-secondary transition-colors hover:bg-primary-bg-hover",
+      "inline-flex h-6 items-center gap-1.5 rounded-full bg-raised pr-2 pl-1 font-medium text-ink-body text-xs shadow-raised transition-colors hover:bg-raised-hover focus-visible:outline-2 focus-visible:outline-accent-bg/60 focus-visible:outline-offset-2",
       className,
     )}
     {...props}
   >
-    <img
-      src={`https://www.google.com/s2/favicons?domain=${domain}&sz=16`}
-      alt=""
-      width={14}
-      height={14}
-      className="shrink-0"
-    />
+    <span className="grid size-4 shrink-0 place-items-center rounded-full bg-ink-primary/6">
+      <img
+        src={`https://www.google.com/s2/favicons?domain=${domain}&sz=16`}
+        alt=""
+        width={10}
+        height={10}
+        className="rounded-full"
+      />
+    </span>
     {domain}
   </a>
 );
diff --git a/components/ai/reasoning.tsx b/components/ai/reasoning.tsx
index 11eba2b..4b0f896 100644
--- a/components/ai/reasoning.tsx
+++ b/components/ai/reasoning.tsx
@@ -1,13 +1,12 @@
 "use client";
 
 import { Reasoning as ReasoningPrimitive, useReasoning } from "@intentface/chat/reasoning";
+import { Brain, ChevronDown } from "@keyline-icons/react";
 import { AnimatePresence, motion } from "motion/react";
 import { type ComponentProps, memo, type ReactNode } from "react";
-import { ChevronDownIcon } from "@/components/icons/chevron-down";
 import { Markdown } from "@/components/ui/markdown";
 import { splitReasoningByHeaders } from "@/lib/ai/message-info";
 import { cn } from "@/lib/utils";
-import { BrainIcon } from "../icons/brain";
 import { TextShimmer } from "../ui/text-shimmer";
 
 export { useReasoning };
@@ -68,15 +67,15 @@ const ReasoningTrigger = memo(
     return (
       <ReasoningPrimitive.Trigger
         className={cn(
-          "flex cursor-pointer w-full text-sm items-center gap-2 text-ink-secondary rounded-md transition-colors hover:text-ink-primary",
+          "flex w-full cursor-pointer items-center gap-1.5 rounded-md font-medium text-ink-secondary text-sm transition-colors hover:text-ink-primary focus-visible:outline-2 focus-visible:outline-accent-bg/60 focus-visible:outline-offset-2",
           className,
         )}
         {...props}
       >
         {children ?? (
           <>
-            <div className="flex items-center gap-1">
-              <BrainIcon className="size-4" />
+            <div className="flex items-center gap-1.5">
+              <Brain className="size-[15px]" />
               <AnimatePresence mode="popLayout" initial={false}>
                 <motion.span
                   key={key}
@@ -84,14 +83,17 @@ const ReasoningTrigger = memo(
                   animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
                   exit={{ opacity: 0, y: "-100%", filter: "blur(4px)" }}
                   transition={{ duration: 0.3, ease: "easeOut" }}
-                  className="whitespace-nowrap text-gray-11/60"
+                  className="whitespace-nowrap"
                 >
                   {component}
                 </motion.span>
               </AnimatePresence>
             </div>
-            <ChevronDownIcon
-              className={cn("size-5 transition-transform", isOpen ? "rotate-180" : "rotate-0")}
+            <ChevronDown
+              className={cn(
+                "size-3.5 text-ink-tertiary transition-transform",
+                isOpen ? "rotate-180" : "rotate-0",
+              )}
             />
           </>
         )}
diff --git a/components/ai/steps.tsx b/components/ai/steps.tsx
index 4064f3b..923280e 100644
--- a/components/ai/steps.tsx
+++ b/components/ai/steps.tsx
@@ -59,7 +59,7 @@ const StepsPanel = ({ className, children, ...props }: StepsPanelProps) => (
       // The rail: a nested item's panel indents behind a vertical line, so
       // depth reads visually without any depth counter. `[data-nested]` is set
       // by the primitive on items that sit inside another item.
-      "in-data-nested:ml-2 in-data-nested:border-l in-data-nested:border-slate-6 in-data-nested:pl-4",
+      "in-data-nested:ml-2 in-data-nested:border-ink-primary/10 in-data-nested:border-l in-data-nested:pl-4",
       className,
     )}
     {...props}
@@ -82,7 +82,7 @@ const StepsIcon = ({ className, ...props }: StepsIconProps) => (
       "flex size-4 shrink-0 items-center justify-center",
       "data-[status=complete]:text-ink-secondary",
       "data-[status=active]:text-ink-primary",
-      "data-[status=pending]:text-slate-9",
+      "data-[status=pending]:text-ink-tertiary",
       className,
     )}
     {...props}
@@ -99,7 +99,7 @@ const StepsLabel = ({ className, ...props }: StepsLabelProps) => (
       "text-sm text-left",
       "data-[status=complete]:text-ink-secondary",
       "data-[status=active]:font-medium data-[status=active]:text-ink-primary",
-      "data-[status=pending]:text-slate-9",
+      "data-[status=pending]:text-ink-tertiary",
       className,
     )}
     {...props}
diff --git a/components/ai/thread.tsx b/components/ai/thread.tsx
index a5915b8..cfc4a3f 100644
--- a/components/ai/thread.tsx
+++ b/components/ai/thread.tsx
@@ -7,13 +7,13 @@ import {
   useThread,
   useThreadVisibility,
 } from "@intentface/chat/thread";
+import { ArrowDown } from "@keyline-icons/react";
 import { AnimatePresence, motion } from "motion/react";
 import type { ComponentProps } from "react";
 import { memo, useCallback } from "react";
 import Button from "@/components/ui/button";
 import { ProgressiveBlur } from "@/components/ui/progressive-blur";
 import { cn } from "@/lib/utils";
-import { ArrowDownIcon } from "../icons/arrow-down";
 
 export { useThread, useThreadVisibility };
 export type { ThreadAutoScrollMode, ThreadVisibilityState };
@@ -73,7 +73,7 @@ ThreadOverlay.displayName = "ThreadOverlay";
 export type ThreadViewportProps = ComponentProps<"div">;
 
 const ThreadViewport = ({ children, className, ...props }: ThreadViewportProps) => (
-  <ThreadPrimitive.Viewport className="h-full w-full overflow-y-auto overflow-x-hidden [overflow-anchor:auto] scrollbar-gutter-stable scrollbar-thin [scrollbar-color:var(--color-ink-tertiary)_transparent] outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/50">
+  <ThreadPrimitive.Viewport className="h-full w-full overflow-y-auto overflow-x-hidden [overflow-anchor:auto] scrollbar-gutter-stable scrollbar-thin [scrollbar-color:var(--color-ink-tertiary)_transparent] outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent-bg/40">
     <div
       data-slot="thread-viewport"
       className={cn(
@@ -142,13 +142,8 @@ const ThreadScrollButton = ({ className, ...props }: ThreadScrollButtonProps) =>
               transition={{ duration: 0.2, ease: "easeOut" }}
               {...props}
             >
-              <Button
-                variant="primary"
-                size="sm"
-                onClick={handleScrollToBottom}
-                className="rounded-full shadow-xs"
-              >
-                <ArrowDownIcon />
+              <Button variant="primary" size="sm" onClick={handleScrollToBottom}>
+                <ArrowDown />
                 Latest
               </Button>
             </motion.div>
diff --git a/components/app-sidebar.tsx b/components/app-sidebar.tsx
deleted file mode 100644
index 00fc546..0000000
--- a/components/app-sidebar.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { usePathname, useRouter } from "next/navigation";
-import { IntentfaceLogo } from "@/components/icons/intentface-logo";
-import { PlusMediumIcon } from "@/components/icons/plus-medium";
-import { TrashIcon } from "@/components/icons/trash";
-import { Sidebar } from "@/components/ui/sidebar";
-import { deleteChatInstance } from "@/lib/chat-instance";
-import { useChatStore } from "@/lib/store/chat";
-import { BookIcon } from "./icons/book";
-import { DotGrid1x3VerticalTightIcon } from "./icons/dot-grid-1x3-vertical-tight";
-import { GitHubIcon } from "./icons/github";
-import { NpmIcon } from "./icons/npm";
-import DropdownMenu from "./ui/dropdown-menu";
-
-export const AppSidebar = () => {
-  const pathname = usePathname();
-  const router = useRouter();
-  const chats = useChatStore((state) => state.chats);
-  const deleteChat = useChatStore((state) => state.deleteChat);
-
-  const handleDelete = (chatId: string) => {
-    const isActive = pathname === `/chat/${chatId}`;
-    deleteChat(chatId);
-    deleteChatInstance(chatId);
-    if (isActive) {
-      router.push("/playground");
-    }
-  };
-
-  return (
-    <Sidebar>
-      <Sidebar.Header className="flex-row items-center justify-between">
-        <IntentfaceLogo className="size-6" />
-        <Sidebar.Trigger />
-      </Sidebar.Header>
-      <Sidebar.Content>
-        <Sidebar.Group>
-          <Sidebar.Menu>
-            <Sidebar.MenuItem>
-              <Sidebar.MenuButton
-                isActive={pathname === "/playground"}
-                render={
-                  <Link href="/playground">
-                    <PlusMediumIcon />
-                    <span>New Chat</span>
-                  </Link>
-                }
-              />
-            </Sidebar.MenuItem>
-          </Sidebar.Menu>
-        </Sidebar.Group>
-        <Sidebar.Group>
-          <Sidebar.GroupLabel>Threads</Sidebar.GroupLabel>
-          <Sidebar.GroupContent>
-            <Sidebar.Menu>
-              {chats.map((chat) => (
-                <Sidebar.MenuItem key={chat.id}>
-                  <Sidebar.MenuButton
-                    isActive={pathname === `/chat/${chat.id}`}
-                    render={
-                      <Link href={`/chat/${chat.id}`}>
-                        <span className="flex-1 truncate">{chat.title}</span>
-                        <DropdownMenu>
-                          <DropdownMenu.Trigger
-                            render={
-                              <Sidebar.MenuAction showOnHover>
-                                <DotGrid1x3VerticalTightIcon />
-                                <span className="sr-only">Delete</span>
-                              </Sidebar.MenuAction>
-                            }
-                          />
-                          <DropdownMenu.Content>
-                            <DropdownMenu.Item
-                              onClick={() => handleDelete(chat.id)}
-                              aria-label="Delete"
-                            >
-                              <TrashIcon />
-                              Delete
-                              <span className="sr-only">Delete</span>
-                            </DropdownMenu.Item>
-                          </DropdownMenu.Content>
-                        </DropdownMenu>
-                      </Link>
-                    }
-                  />
-                </Sidebar.MenuItem>
-              ))}
-            </Sidebar.Menu>
-          </Sidebar.GroupContent>
-        </Sidebar.Group>
-      </Sidebar.Content>
-      <Sidebar.Footer>
-        <Sidebar.Menu>
-          <Sidebar.MenuItem>
-            <Sidebar.MenuButton
-              render={
-                <Link href="/">
-                  <BookIcon />
-                  <span>Docs</span>
-                </Link>
-              }
-            />
-          </Sidebar.MenuItem>
-          <Sidebar.MenuItem>
-            <Sidebar.MenuButton
-              render={
-                <a
-                  href="https://github.com/Intentface/intentface-chat"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  <GitHubIcon />
-                  <span>GitHub</span>
-                </a>
-              }
-            />
-          </Sidebar.MenuItem>
-          <Sidebar.MenuItem>
-            <Sidebar.MenuButton
-              render={
-                <a
-                  href="https://www.npmjs.com/package/@intentface/chat"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  <NpmIcon />
-                  <span>npm</span>
-                </a>
-              }
-            />
-          </Sidebar.MenuItem>
-        </Sidebar.Menu>
-      </Sidebar.Footer>
-    </Sidebar>
-  );
-};
diff --git a/components/chat-nav.tsx b/components/chat-nav.tsx
new file mode 100644
index 0000000..a6710ea
--- /dev/null
+++ b/components/chat-nav.tsx
@@ -0,0 +1,78 @@
+"use client";
+import { Bin, MoreVertical, SquarePen } from "@keyline-icons/react";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { Sidebar } from "@/components/ui/sidebar";
+import { deleteChatInstance } from "@/lib/chat-instance";
+import { useChatStore } from "@/lib/store/chat";
+import DropdownMenu from "./ui/dropdown-menu";
+
+/** The playground half of the site sidebar: new chat and the threads. */
+export const ChatNav = () => {
+  const pathname = usePathname();
+  const router = useRouter();
+  const chats = useChatStore((state) => state.chats);
+  const deleteChat = useChatStore((state) => state.deleteChat);
+
+  const handleDelete = (chatId: string) => {
+    const isActive = pathname === `/chat/${chatId}`;
+    deleteChat(chatId);
+    deleteChatInstance(chatId);
+    if (isActive) {
+      router.push("/playground");
+    }
+  };
+
+  return (
+    <>
+      <Link
+        href="/playground"
+        className="flex h-[30px] shrink-0 items-center gap-2 rounded-md bg-raised px-2.5 font-medium text-ink-primary text-sm shadow-raised transition-[background-color] hover:bg-raised-hover focus-visible:outline-2 focus-visible:outline-accent-bg/60 focus-visible:outline-offset-2"
+      >
+        <SquarePen className="size-[15px] text-ink-body" />
+        New chat
+      </Link>
+      <Sidebar.Content>
+        <Sidebar.Group>
+          <Sidebar.GroupLabel>Threads</Sidebar.GroupLabel>
+          <Sidebar.GroupContent>
+            <Sidebar.Menu>
+              {chats.map((chat) => (
+                <Sidebar.MenuItem key={chat.id}>
+                  <Sidebar.MenuButton
+                    isActive={pathname === `/chat/${chat.id}`}
+                    render={
+                      <Link href={`/chat/${chat.id}`}>
+                        <span className="flex-1 truncate">{chat.title}</span>
+                        <DropdownMenu>
+                          <DropdownMenu.Trigger
+                            render={
+                              <Sidebar.MenuAction showOnHover>
+                                <MoreVertical />
+                                <span className="sr-only">Delete</span>
+                              </Sidebar.MenuAction>
+                            }
+                          />
+                          <DropdownMenu.Content>
+                            <DropdownMenu.Item
+                              onClick={() => handleDelete(chat.id)}
+                              aria-label="Delete"
+                            >
+                              <Bin />
+                              Delete
+                              <span className="sr-only">Delete</span>
+                            </DropdownMenu.Item>
+                          </DropdownMenu.Content>
+                        </DropdownMenu>
+                      </Link>
+                    }
+                  />
+                </Sidebar.MenuItem>
+              ))}
+            </Sidebar.Menu>
+          </Sidebar.GroupContent>
+        </Sidebar.Group>
+      </Sidebar.Content>
+    </>
+  );
+};
diff --git a/components/chat-shell.tsx b/components/chat-shell.tsx
deleted file mode 100644
index 31c490d..0000000
--- a/components/chat-shell.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client";
-
-import type { ReactNode } from "react";
-import { AppSidebar } from "@/components/app-sidebar";
-import { Sidebar } from "@/components/ui/sidebar";
-
-/**
- * The chat area's shell composition.
- *
- * Its own client component rather than the layout itself, because `Sidebar` is
- * an `Object.assign` compound: a server component importing it gets a proxy of
- * the module's named exports and reads `undefined` off `Sidebar.Provider`.
- * The layout stays a server component so it can read the sidebar cookie before
- * the first paint and hand it down as `defaultOpen`.
- */
-export const ChatShell = ({
-  defaultOpen,
-  width,
-  children,
-}: {
-  defaultOpen: boolean;
-  width?: number;
-  children: ReactNode;
-}) => (
-  <Sidebar.Provider defaultOpen={defaultOpen} width={width}>
-    <AppSidebar />
-    <Sidebar.Inset>
-      <Sidebar.Viewport>{children}</Sidebar.Viewport>
-    </Sidebar.Inset>
-  </Sidebar.Provider>
-);
diff --git a/components/chat.tsx b/components/chat.tsx
index 1aa1243..b255be4 100644
--- a/components/chat.tsx
+++ b/components/chat.tsx
@@ -9,8 +9,20 @@ import {
   type MessageSegment,
 } from "@intentface/chat/message-utils";
 import { isToolPart, type ToolPart, type UnknownPart } from "@intentface/chat/types";
+import {
+  Brain,
+  Check,
+  ChevronDown,
+  Circle,
+  CircleQuestion,
+  Quote,
+  RefreshCw,
+  TriangleAlert,
+  X,
+} from "@keyline-icons/react";
+// Keyline has no sandbox icon, so this one stays on Tabler.
+import { IconSandbox } from "@tabler/icons-react";
 import type { ChatStatus } from "ai";
-import { CircleIcon } from "lucide-react";
 import { AnimatePresence, motion, stagger } from "motion/react";
 import { useRouter } from "next/navigation";
 import {
@@ -24,7 +36,6 @@ import {
   useRef,
   useState,
 } from "react";
-import { CHIP_SURFACE_CLASS } from "@/components/ai/chip";
 import {
   type CommandItemData,
   Composer,
@@ -37,15 +48,6 @@ import { Steps } from "@/components/ai/steps";
 import { Thread } from "@/components/ai/thread";
 import { ActiveTools, ToolsMenu } from "@/components/composer-tools";
 import { Header } from "@/components/header";
-import { BrainIcon } from "@/components/icons/brain";
-import { CheckMarkMediumIcon } from "@/components/icons/check-mark-medium";
-import { ChevronDownIcon } from "@/components/icons/chevron-down";
-import { CircleQuestionmarkIcon } from "@/components/icons/circle-questionmark";
-import { CrossMediumIcon } from "@/components/icons/cross-medium";
-import { ExclamationTriangleIcon } from "@/components/icons/exclamation-triangle";
-import { OpenQuote2Icon } from "@/components/icons/open-quote-2";
-import { PlaygroundIcon } from "@/components/icons/playground";
-import { RefreshIcon } from "@/components/icons/refresh";
 import { ModelSelector } from "@/components/model-selector";
 import { PlaygroundSettings } from "@/components/playground-settings";
 import { Markdown } from "@/components/ui/markdown";
@@ -68,7 +70,7 @@ import { useModelStore } from "@/lib/store/model";
 import { usePlaygroundStore } from "@/lib/store/playground";
 import { useSettingsStore } from "@/lib/store/settings";
 import { cn } from "@/lib/utils";
-import { IntentfaceLogo } from "./icons/intentface-logo";
+import { LogoTile } from "./icons/logo-tile";
 import { TextShimmer } from "./ui/text-shimmer";
 
 type ChatSelection = {
@@ -128,10 +130,10 @@ export const useChatMessages = (): ChatMessagesValue => {
 type IconComponent = React.ComponentType<{ className?: string }>;
 
 const statusIcons: Record<StepStatus, IconComponent> = {
-  complete: CheckMarkMediumIcon,
-  active: CircleIcon,
-  pending: CircleIcon,
-  error: ExclamationTriangleIcon,
+  complete: Check,
+  active: Circle,
+  pending: Circle,
+  error: TriangleAlert,
 };
 
 // A timeline row: static when it has no detail, collapsible (icon morphs to a
@@ -153,14 +155,14 @@ const TimelineStep = ({
   const iconClasses = cn(
     status === "complete" && "text-ink-secondary",
     status === "active" && "text-ink-primary",
-    status === "pending" && "text-slate-9",
+    status === "pending" && "text-ink-tertiary",
     status === "error" && "text-red-500",
   );
   const labelClasses = cn(
     "text-sm text-left",
     status === "active" && "text-ink-primary font-medium",
     status === "complete" && "text-ink-secondary",
-    status === "pending" && "text-slate-9",
+    status === "pending" && "text-ink-tertiary",
     status === "error" && "text-red-500",
   );
 
@@ -186,7 +188,7 @@ const TimelineStep = ({
           <span className="transition-opacity group-hover/steps-trigger:opacity-0 group-data-open/steps-trigger:opacity-0">
             <Icon className={cn("size-3.5", status === "active" && "animate-pulse")} />
           </span>
-          <ChevronDownIcon className="absolute size-4 opacity-0 transition-all group-hover/steps-trigger:opacity-100 group-data-open/steps-trigger:rotate-180 group-data-open/steps-trigger:opacity-100" />
+          <ChevronDown className="absolute size-4 opacity-0 transition-all group-hover/steps-trigger:opacity-100 group-data-open/steps-trigger:rotate-180 group-data-open/steps-trigger:opacity-100" />
         </span>
         <span className={labelClasses}>{label}</span>
       </Steps.Trigger>
@@ -207,7 +209,7 @@ const TimelineToolCall = ({ part }: { part: ToolPart }) => {
           {sources.map((source, index) => (
             <span
               key={index}
-              className="inline-flex items-center rounded-md border border-primary-border bg-primary-bg px-2 py-0.5 text-xs text-ink-secondary"
+              className="inline-flex h-6 items-center rounded-full bg-raised px-2 font-medium text-ink-secondary text-xs shadow-raised"
             >
               {source.domain}
             </span>
@@ -222,7 +224,7 @@ const TimelineAskUser = ({ part }: { part: ToolPart }) => {
   const { label, status, questions, answers, isComplete } = getAskUserStepInfo(part);
 
   return (
-    <TimelineStep label={label} status={status} icon={CircleQuestionmarkIcon}>
+    <TimelineStep label={label} status={status} icon={CircleQuestion}>
       <div className="flex flex-col gap-1.5">
         {questions.map((q) => (
           <div key={q.question} className="flex flex-col gap-0.5">
@@ -358,7 +360,7 @@ const InterleavedSteps = ({
       <Steps.Item open={open} onOpenChange={setUserOpen}>
         <Steps.Trigger>
           <span className="overflow-hidden text-left">{header}</span>
-          <ChevronDownIcon className="size-4 shrink-0 transition-transform group-data-open/steps-trigger:rotate-180" />
+          <ChevronDown className="size-4 shrink-0 transition-transform group-data-open/steps-trigger:rotate-180" />
         </Steps.Trigger>
         <Steps.Panel>
           {segments.map((seg, i) => {
@@ -374,7 +376,7 @@ const InterleavedSteps = ({
                   key={`r-${i}-${j}`}
                   label={section.header ?? "Thinking"}
                   status={streaming && j === sections.length - 1 ? "active" : "complete"}
-                  icon={BrainIcon}
+                  icon={Brain}
                 >
                   {section.body && (
                     <Markdown className="text-sm leading-tight text-ink-secondary [&_p]:mb-0">
@@ -523,7 +525,7 @@ const ChatMessageItem = memo(
                 onClick={() => regenerate({ messageId: message.id })}
                 tooltip="Regenerate"
               >
-                <RefreshIcon />
+                <RefreshCw />
               </Message.Action>
             )}
             <Message.Copy value={textInfo.text} />
@@ -610,7 +612,7 @@ const MENTION_ITEMS: CommandItemData[] = [
   {
     value: "quarterly-report",
     label: "Q4 Quarterly Report",
-    icon: "fileText",
+    icon: "fileChart",
   },
   {
     value: "meeting-notes",
@@ -620,7 +622,7 @@ const MENTION_ITEMS: CommandItemData[] = [
   {
     value: "product-roadmap",
     label: "Product Roadmap",
-    icon: "spreadsheet",
+    icon: "map",
   },
   {
     value: "brand-guidelines",
@@ -630,7 +632,7 @@ const MENTION_ITEMS: CommandItemData[] = [
   {
     value: "api-documentation",
     label: "API Documentation",
-    icon: "fileChart",
+    icon: "code",
   },
   {
     value: "screenshot-dashboard",
@@ -959,30 +961,24 @@ const ChatInputInner = memo(({ panelState, status }: ChatInputInnerProps) => {
 
       <Composer.ContextWindow>
         {showContextStrip && (
-          <span
-            data-slot="context-playground"
-            className={cn(
-              CHIP_SURFACE_CLASS,
-              "inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-ink-secondary",
-            )}
-          >
-            <PlaygroundIcon className="size-3.5 opacity-70" aria-hidden />
+          <span data-slot="context-playground" className="inline-flex items-center gap-1.5">
+            <IconSandbox className="size-[13px] text-ink-secondary" aria-hidden />
             Playground
           </span>
         )}
         {selections.length > 0 && (
-          <div data-slot="chat-selections" className="flex items-center gap-1.5 text-ink-secondary">
-            <OpenQuote2Icon className="size-3.5" />
+          <div data-slot="chat-selections" className="flex items-center gap-1.5">
+            <Quote className="size-[13px] text-ink-secondary" />
             <span>
               {selections.length} selection{selections.length === 1 ? "" : "s"}
             </span>
             <button
               type="button"
               aria-label="Clear selections"
-              className="cursor-pointer rounded-full p-0.5 hover:bg-primary-bg-hover hover:text-ink-primary"
+              className="cursor-pointer rounded-full p-0.5 text-ink-secondary hover:bg-ink-primary/6 hover:text-ink-primary"
               onClick={clearSelections}
             >
-              <CrossMediumIcon className="size-3" />
+              <X className="size-3" />
             </button>
           </div>
         )}
@@ -1022,7 +1018,7 @@ const ChatInputInner = memo(({ panelState, status }: ChatInputInnerProps) => {
           </Composer.Actions>
         ) : (
           <Composer.Actions className="flex items-center justify-between">
-            <div className="flex items-center">
+            <div className="flex items-center gap-1">
               <ToolsMenu tools={toolValues} onToolsChange={setToolValues} />
               <ModelSelector value={model} onValueChange={setModel} />
               <ActiveTools tools={toolValues} onToolsChange={setToolValues} />
@@ -1058,13 +1054,16 @@ const ChatPlaceholder = () => {
         className="flex flex-col items-center justify-center gap-4"
       >
         <motion.div variants={variants}>
-          <IntentfaceLogo className="size-12" />
+          <LogoTile size="lg" />
         </motion.div>
         <div className="flex flex-col items-center justify-center">
-          <motion.span variants={variants} className="text-lg font-semibold">
+          <motion.span
+            variants={variants}
+            className="font-semibold text-[20px] text-ink-primary leading-7 tracking-[-0.01em]"
+          >
             Intentface Chat
           </motion.span>
-          <motion.span variants={variants} className="text-sm text-ink-secondary">
+          <motion.span variants={variants} className="text-ink-secondary text-md">
             Start a conversation
           </motion.span>
         </div>
@@ -1087,27 +1086,30 @@ const ChatDefaultLayout = memo(() => {
       {/* Auto-scroll behavior is driven by the user's setting: "bottom" lands the
           newest turn at the bottom and follows, "jump" lands it at the top without
           following, "follow" lands at the top and follows, "off" disables it. */}
-      <Thread autoScroll={scrollMode}>
-        <Header />
-        {showOverlays && <Thread.Overlay direction="top" />}
-        <Thread.Viewport>
-          {isEmpty ? (
-            <Thread.Placeholder>
-              <ChatPlaceholder />
-            </Thread.Placeholder>
-          ) : (
-            <ChatMessages />
-          )}
-        </Thread.Viewport>
-        <Thread.Composer>
-          {showScrollButton && <Thread.ScrollButton />}
-          <ChatInput />
-        </Thread.Composer>
-        {showOverlays && <Thread.Overlay direction="bottom" />}
-        {/* Rendered last so the card triggers come after the composer in tab
-            order; absolute positioning puts them in the top-right regardless. */}
+      {/* A row, so the settings card pushes the thread over instead of covering it. */}
+      <div className="relative flex h-full min-h-0 w-full">
+        <Thread autoScroll={scrollMode} className="min-w-0 flex-1">
+          <Header />
+          {showOverlays && <Thread.Overlay direction="top" />}
+          <Thread.Viewport>
+            {isEmpty ? (
+              <Thread.Placeholder>
+                <ChatPlaceholder />
+              </Thread.Placeholder>
+            ) : (
+              <ChatMessages />
+            )}
+          </Thread.Viewport>
+          <Thread.Composer>
+            {showScrollButton && <Thread.ScrollButton />}
+            <ChatInput />
+          </Thread.Composer>
+          {showOverlays && <Thread.Overlay direction="bottom" />}
+        </Thread>
+        {/* Rendered last so the settings come after the composer in tab order;
+            the gear is positioned in the top-right regardless. */}
         <PlaygroundSettings />
-      </Thread>
+      </div>
     </>
   );
 });
diff --git a/components/composer-tools.tsx b/components/composer-tools.tsx
index 25ed054..01bfdba 100644
--- a/components/composer-tools.tsx
+++ b/components/composer-tools.tsx
@@ -1,11 +1,7 @@
 "use client";
+import { Brain, Globe, Paperclip, Plus, X } from "@keyline-icons/react";
 
 import { useComposer } from "@/components/ai/composer";
-import { BrainIcon } from "@/components/icons/brain";
-import { CrossMediumIcon } from "@/components/icons/cross-medium";
-import { GlobeIcon } from "@/components/icons/globe";
-import { PaperClipIcon } from "@/components/icons/paperclip";
-import { PlusMediumIcon } from "@/components/icons/plus-medium";
 import Button from "@/components/ui/button";
 import DropdownMenu from "@/components/ui/dropdown-menu";
 import { IconButton } from "@/components/ui/icon-button";
@@ -24,14 +20,18 @@ export const ActiveTools = ({ tools, onToolsChange }: ToolToggleProps) => {
         <Button
           type="button"
           variant="ghost"
-          className="group/pill cursor-pointer rounded-full font-normal"
+          size="sm"
+          aria-label={`Turn off Web Search`}
+          className="group/pill gap-1.5 px-2 text-ink-primary text-sm"
           onClick={() => onToolsChange({ ...tools, webSearch: false })}
         >
-          <span className="relative size-4">
-            <GlobeIcon className="opacity-100 absolute top-0 left-0 group-hover/pill:opacity-0" />
-            <CrossMediumIcon className="opacity-0 absolute top-0 left-0 group-hover/pill:opacity-100" />
+          <span className="relative size-3.5">
+            <Globe className="absolute top-0 left-0 size-3.5 opacity-100 group-hover/pill:opacity-0" />
+            <X className="absolute top-0 left-0 size-3.5 opacity-0 group-hover/pill:opacity-100" />
           </span>
           Web Search
+          {/* The "on" dot, as in the Paper composer. */}
+          <span className="size-1.5 rounded-full bg-accent-bg shadow-[0_0_0_2px_color-mix(in_oklab,var(--color-accent-bg)_15%,transparent)]" />
         </Button>
       )}
 
@@ -39,14 +39,18 @@ export const ActiveTools = ({ tools, onToolsChange }: ToolToggleProps) => {
         <Button
           type="button"
           variant="ghost"
-          className="group/pill cursor-pointer rounded-full font-normal"
+          size="sm"
+          aria-label={`Turn off Thinking`}
+          className="group/pill gap-1.5 px-2 text-ink-primary text-sm"
           onClick={() => onToolsChange({ ...tools, thinking: false })}
         >
-          <span className="relative size-4">
-            <BrainIcon className="opacity-100 absolute top-0 left-0 group-hover/pill:opacity-0" />
-            <CrossMediumIcon className="opacity-0 absolute top-0 left-0 group-hover/pill:opacity-100" />
+          <span className="relative size-3.5">
+            <Brain className="absolute top-0 left-0 size-3.5 opacity-100 group-hover/pill:opacity-0" />
+            <X className="absolute top-0 left-0 size-3.5 opacity-0 group-hover/pill:opacity-100" />
           </span>
           Thinking
+          {/* The "on" dot, as in the Paper composer. */}
+          <span className="size-1.5 rounded-full bg-accent-bg shadow-[0_0_0_2px_color-mix(in_oklab,var(--color-accent-bg)_15%,transparent)]" />
         </Button>
       )}
     </div>
@@ -60,14 +64,14 @@ export const ToolsMenu = ({ tools, onToolsChange }: ToolToggleProps) => {
     <DropdownMenu>
       <DropdownMenu.Trigger
         render={
-          <IconButton variant="ghost" type="button" className="rounded-full">
-            <PlusMediumIcon />
+          <IconButton variant="primary" size="sm" type="button" aria-label="Add">
+            <Plus />
           </IconButton>
         }
       />
       <DropdownMenu.Content side="top" align="start" sideOffset={8} className="w-auto">
         <DropdownMenu.Item onClick={() => attachments.openFileDialog()}>
-          <PaperClipIcon />
+          <Paperclip />
           <span className="flex-1">Attach files</span>
         </DropdownMenu.Item>
         <DropdownMenu.Separator />
@@ -75,13 +79,13 @@ export const ToolsMenu = ({ tools, onToolsChange }: ToolToggleProps) => {
           checked={tools.webSearch ?? false}
           onCheckedChange={(checked) => onToolsChange({ ...tools, webSearch: checked })}
         >
-          <GlobeIcon /> <span className="flex-1">Web Search</span>
+          <Globe /> <span className="flex-1">Web Search</span>
         </DropdownMenu.SwitchItem>
         <DropdownMenu.SwitchItem
           checked={tools.thinking ?? false}
           onCheckedChange={(checked) => onToolsChange({ ...tools, thinking: checked })}
         >
-          <BrainIcon /> <span className="flex-1">Thinking</span>
+          <Brain /> <span className="flex-1">Thinking</span>
         </DropdownMenu.SwitchItem>
       </DropdownMenu.Content>
     </DropdownMenu>
diff --git a/components/docs/attributes-table.tsx b/components/docs/attributes-table.tsx
index d314dc3..4b588ba 100644
--- a/components/docs/attributes-table.tsx
+++ b/components/docs/attributes-table.tsx
@@ -1,4 +1,6 @@
 import type { ReactNode } from "react";
+import { ReferenceTable } from "./reference-table";
+import { ScrollLine } from "./scroll-line";
 
 export type AttributeRow = {
   attribute: string;
@@ -11,52 +13,54 @@ type AttributesTableProps = {
 };
 
 // Hand-authored data-attribute reference — the styling hooks a part emits.
-// Fixed-width columns match PropsTable so the two stay visually aligned down the
-// page. Not collapsible: the description is the essential content here (no
-// "default" to defer), so it stays inline. The Values column is omitted when no
-// row provides one (e.g. keyboard shortcut tables).
+// Descriptions are short, so every row shows its own: no expanding. Values,
+// when an attribute has them, follow its description on the same line. CSS
+// variables are values to style with, not hooks to select, so `--` rows get a
+// table of their own.
 export const AttributesTable = ({ rows }: AttributesTableProps) => {
-  const hasValues = rows.some((row) => row.values);
+  const attributes = rows.filter((row) => !row.attribute.startsWith("--"));
+  const variables = rows.filter((row) => row.attribute.startsWith("--"));
 
   return (
-    <div className="not-prose my-6 overflow-hidden rounded-lg border border-secondary-border bg-primary-bg">
-      <table className="w-full table-fixed border-collapse text-left text-sm">
-        <colgroup>
-          <col className="w-[28%]" />
-          {hasValues ? <col className="w-[28%]" /> : null}
-          <col className={hasValues ? "w-[44%]" : "w-[72%]"} />
-        </colgroup>
-        <thead>
-          <tr className="border-secondary-border border-b bg-tertiary-bg">
-            <th className="px-4 py-2.5 font-medium text-ink-primary">Attribute</th>
-            {hasValues ? (
-              <th className="px-4 py-2.5 font-medium text-ink-primary">Values</th>
-            ) : null}
-            <th className="px-4 py-2.5 font-medium text-ink-primary">Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          {rows.map((row) => (
-            <tr key={row.attribute} className="border-secondary-border/60 border-b last:border-0">
-              <td className="px-4 py-2.5 align-top">
-                <code className="font-mono text-ink-primary text-xs">{row.attribute}</code>
-              </td>
-              {hasValues ? (
-                <td className="px-4 py-2.5 align-top">
-                  {row.values ? (
-                    <code className="wrap-break-word font-mono text-accent-bg text-xs">
-                      {row.values}
-                    </code>
-                  ) : (
-                    <span className="text-ink-tertiary">—</span>
-                  )}
-                </td>
-              ) : null}
-              <td className="px-4 py-2.5 align-top text-ink-secondary">{row.description}</td>
-            </tr>
+    <>
+      {attributes.length > 0 && (
+        <ReferenceTable
+          columns={[{ label: "Attribute", width: "w-[35%]" }, { label: "Description" }]}
+        >
+          {attributes.map((row) => (
+            <AttributeTableRow key={row.attribute} row={row} />
           ))}
-        </tbody>
-      </table>
-    </div>
+        </ReferenceTable>
+      )}
+      {variables.length > 0 && (
+        <ReferenceTable
+          columns={[{ label: "CSS variable", width: "w-[35%]" }, { label: "Description" }]}
+        >
+          {variables.map((row) => (
+            <AttributeTableRow key={row.attribute} row={row} />
+          ))}
+        </ReferenceTable>
+      )}
+    </>
   );
 };
+
+const AttributeTableRow = ({ row }: { row: AttributeRow }) => (
+  <tr className="border-ink-primary/6 border-b last:border-0">
+    <td className="px-4 py-3.5 align-top">
+      <code className="break-all font-medium font-mono text-ink-primary text-sm">
+        {row.attribute}
+      </code>
+    </td>
+    <td className="p-0 align-top text-ink-body text-sm leading-5">
+      <ScrollLine label={`${row.attribute}: description`}>
+        {row.description}
+        {row.values && (
+          <code className="ml-2 rounded-[4px] bg-ink-primary/6 px-1.5 py-0.5 font-mono text-ink-body text-xs">
+            {row.values}
+          </code>
+        )}
+      </ScrollLine>
+    </td>
+  </tr>
+);
diff --git a/components/docs/code-block.tsx b/components/docs/code-block.tsx
index f052256..ebeaea7 100644
--- a/components/docs/code-block.tsx
+++ b/components/docs/code-block.tsx
@@ -1,28 +1,30 @@
 import { highlight } from "fumadocs-core/highlight";
 import type { ReactNode } from "react";
+import { codeTheme } from "@/lib/docs/code-theme";
 import { cn } from "@/lib/utils";
+import { CodeFrame, CodeTab } from "./code-frame";
 
 type CodeBlockProps = {
   code: string;
   lang?: string;
-  /** Small label shown above the block (e.g. a target file path). */
+  /** The tab label, usually a file path. Falls back to the language. */
   title?: ReactNode;
   className?: string;
 };
 
-// Server-side shiki highlight. Emits dual-theme spans (--shiki / --shiki-dark);
-// the `.dark` activation rule lives in globals.css under the shiki section.
-export const CodeBlock = async ({ code, lang = "tsx", title, className }: CodeBlockProps) => {
-  const rendered = await highlight(code, {
+/** Server-side shiki highlight into a bare <pre>, for any code chrome to wrap. */
+export const highlightCode = (code: string, lang = "tsx") =>
+  highlight(code, {
     lang,
-    themes: { light: "github-light", dark: "github-dark" },
-    defaultColor: false,
+    theme: codeTheme,
     components: {
-      pre: ({ className: preClassName, ...props }) => (
+      pre: ({ className, ...props }) => (
         <pre
+          // Multi-line blocks get a line-number gutter (see globals.css).
+          data-line-numbers={code.includes("\n") ? "" : undefined}
           className={cn(
-            "overflow-x-auto rounded-lg border border-base-border bg-base-bg p-4 text-sm leading-relaxed [scrollbar-width:thin]",
-            preClassName,
+            "scroll-mask overflow-x-auto px-4 py-3.5 font-mono text-[13px] leading-[22px] [scrollbar-width:thin] data-line-numbers:pl-0",
+            className,
           )}
           {...props}
         />
@@ -30,14 +32,12 @@ export const CodeBlock = async ({ code, lang = "tsx", title, className }: CodeBl
     },
   });
 
-  return (
-    <div className={cn("not-prose flex flex-col overflow-hidden", className)}>
-      {title && (
-        <div className="rounded-t-lg border border-primary-border border-b-0 bg-primary-bg px-4 py-2 font-mono text-ink-tertiary text-xs">
-          {title}
-        </div>
-      )}
-      <div className={cn(title && "[&>pre]:rounded-t-none")}>{rendered}</div>
-    </div>
-  );
-};
+export const CodeBlock = async ({ code, lang = "tsx", title, className }: CodeBlockProps) => (
+  <CodeFrame
+    tabs={<CodeTab active={Boolean(title)}>{title ?? lang}</CodeTab>}
+    code={code}
+    className={className}
+  >
+    {await highlightCode(code, lang)}
+  </CodeFrame>
+);
diff --git a/components/docs/code-files.tsx b/components/docs/code-files.tsx
new file mode 100644
index 0000000..e73c2f2
--- /dev/null
+++ b/components/docs/code-files.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useState } from "react";
+import { CodeFrame, CodeTab } from "./code-frame";
+
+export type CodeFileEntry = {
+  name: string;
+  source: string;
+  /** Pre-highlighted source, rendered on the server. */
+  code: ReactNode;
+};
+
+// Client shell for a multi-file block: one tab per file. The server highlights
+// every file up front; this only picks which one shows and gets copied.
+export const CodeFiles = ({ files, className }: { files: CodeFileEntry[]; className?: string }) => {
+  const [name, setName] = useState(files[0].name);
+  const current = files.find((file) => file.name === name) ?? files[0];
+
+  return (
+    <CodeFrame
+      className={className}
+      code={current.source}
+      tabs={files.map((file) => (
+        <CodeTab key={file.name} active={file.name === name} onClick={() => setName(file.name)}>
+          {file.name}
+        </CodeTab>
+      ))}
+    >
+      {current.code}
+    </CodeFrame>
+  );
+};
diff --git a/components/docs/code-frame.tsx b/components/docs/code-frame.tsx
new file mode 100644
index 0000000..fbd12f2
--- /dev/null
+++ b/components/docs/code-frame.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import { Check, Copy } from "@keyline-icons/react";
+import type { ReactNode } from "react";
+import { useCopy } from "@/hooks/use-copy";
+import { cn } from "@/lib/utils";
+
+/**
+ * The dark code chrome shared by every block in the docs: a header of file (or
+ * package-manager) tabs with a copy button, over an inset code panel. Dark in
+ * both themes, tinted by the theme's seeds (see --code-bg in globals.css).
+ */
+export const CodeFrame = ({
+  tabs,
+  code,
+  className,
+  children,
+}: {
+  tabs: ReactNode;
+  /** What the copy button copies. */
+  code: string;
+  className?: string;
+  children: ReactNode;
+}) => (
+  <div
+    data-code-block=""
+    className={cn(
+      "not-prose flex flex-col rounded-xl bg-code-bg px-[5px] pb-[5px] shadow-code",
+      className,
+    )}
+  >
+    <div className="flex h-10 shrink-0 items-center justify-between gap-2 pr-0.5 pl-[11px]">
+      <div className="flex h-full min-w-0 items-center gap-4 overflow-x-auto">{tabs}</div>
+      <CodeCopyButton code={code} />
+    </div>
+    <div className="overflow-hidden rounded-md bg-code-panel shadow-[inset_0_0_0_1px_rgb(255_255_255/0.07)]">
+      {children}
+    </div>
+  </div>
+);
+
+/** A header tab. Without `onClick` it is a plain label (a single file's name). */
+export const CodeTab = ({
+  active = true,
+  onClick,
+  children,
+}: {
+  active?: boolean;
+  onClick?: () => void;
+  children: ReactNode;
+}) => {
+  const className = cn(
+    "flex h-full shrink-0 items-center font-medium font-mono text-xs transition-colors",
+    active
+      ? "text-white/92 shadow-[inset_0_-1px_0_rgb(255_255_255/0.92)]"
+      : "text-white/50 hover:text-white/80",
+  );
+
+  return onClick ? (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-pressed={active}
+      className={cn(className, "cursor-pointer outline-none focus-visible:text-white")}
+    >
+      {children}
+    </button>
+  ) : (
+    <span className={className}>{children}</span>
+  );
+};
+
+const CodeCopyButton = ({ code }: { code: string }) => {
+  const { copy, copied } = useCopy();
+  const isCopied = copied === code;
+
+  return (
+    <button
+      type="button"
+      onClick={() => copy(code)}
+      aria-label={isCopied ? "Copied" : "Copy code"}
+      className="grid size-7 shrink-0 cursor-pointer place-items-center rounded-full text-white/56 transition-colors hover:bg-white/8 hover:text-white focus-visible:outline-2 focus-visible:outline-white/60"
+    >
+      {isCopied ? <Check className="size-[15px]" /> : <Copy className="size-[15px]" />}
+    </button>
+  );
+};
diff --git a/components/docs/component-preview-frame.tsx b/components/docs/component-preview-frame.tsx
index 658b68e..9b4ebe9 100644
--- a/components/docs/component-preview-frame.tsx
+++ b/components/docs/component-preview-frame.tsx
@@ -1,6 +1,10 @@
 "use client";
 
+import { RotateCcw } from "@keyline-icons/react";
+import { motion, useReducedMotion } from "motion/react";
 import { type ReactNode, useState } from "react";
+import { IconButton } from "@/components/ui/icon-button";
+import { useMeasure } from "@/hooks/use-measure";
 import { cn } from "@/lib/utils";
 
 type ComponentPreviewFrameProps = {
@@ -8,35 +12,109 @@ type ComponentPreviewFrameProps = {
   code: ReactNode;
 };
 
+type View = "preview" | "code";
+
+const SWITCH_TRANSITION = { duration: 0.3, ease: [0.32, 0.72, 0, 1] } as const;
+const INSTANT = { duration: 0 } as const;
+const SHOWN = { opacity: 1, filter: "blur(0px)", transitionEnd: { filter: "none" } };
+const HIDDEN = { opacity: 0, filter: "blur(4px)" };
+
 // Client shell for the preview/code toggle. The server component highlights the
-// source and renders the demo; this only owns the tab state.
+// source and renders the demo; this owns the tab state and the replay remount.
+// One card holds both views: they cross-dissolve inside it while the card eases
+// between their heights, and the demo stays mounted, keeping its state.
 export const ComponentPreviewFrame = ({ preview, code }: ComponentPreviewFrameProps) => {
-  const [tab, setTab] = useState<"preview" | "code">("preview");
+  const [tab, setTab] = useState<View>("preview");
+  const [run, setRun] = useState(0);
+  // Both views are measured, so a switch knows its target height up front.
+  const [previewRef, previewBounds] = useMeasure<HTMLDivElement>();
+  const [codeRef, codeBounds] = useMeasure<HTMLDivElement>();
+  // Only a switch eases; a demo growing on its own is followed instantly.
+  const [switching, setSwitching] = useState(false);
+  const reduceMotion = useReducedMotion();
+
+  const height = (tab === "preview" ? previewBounds : codeBounds).height;
+  const paneTransition = reduceMotion ? INSTANT : SWITCH_TRANSITION;
+
+  const select = (next: View) => {
+    if (next === tab) return;
+    setSwitching(true);
+    setTab(next);
+  };
 
   return (
-    <div className="not-prose my-6 overflow-hidden rounded-xl border border-secondary-border">
-      <div className="flex items-center gap-1 border-primary-border border-b bg-primary-bg p-2">
+    <div className="not-prose my-6 flex flex-col gap-3">
+      <div role="tablist" aria-label="Demo view" className="flex items-center gap-0.5">
         {(["preview", "code"] as const).map((value) => (
           <button
             key={value}
             type="button"
-            onClick={() => setTab(value)}
+            role="tab"
+            aria-selected={tab === value}
+            onClick={() => select(value)}
             className={cn(
-              "cursor-pointer rounded-full border px-3 py-1.5 font-medium text-sm capitalize transition-colors",
+              "h-7 cursor-pointer rounded-full px-3 font-medium text-sm capitalize transition-[color,background-color,box-shadow]",
+              "focus-visible:outline-2 focus-visible:outline-accent-bg/60 focus-visible:outline-offset-2",
               tab === value
-                ? "border-secondary-border bg-secondary-bg text-ink-primary shadow-xs"
-                : "border-transparent text-ink-tertiary hover:bg-primary-bg-hover hover:text-ink-secondary",
+                ? "bg-raised text-ink-primary shadow-raised"
+                : "text-ink-secondary hover:text-ink-primary",
             )}
           >
             {value}
           </button>
         ))}
       </div>
-      {tab === "preview" ? (
-        <div className="flex min-h-40 items-center justify-center bg-base-bg p-8">{preview}</div>
-      ) : (
-        <div className="[&_pre]:max-h-[32rem] [&_pre]:rounded-none [&_pre]:border-0">{code}</div>
-      )}
+      {/* Clips only mid-switch, so a demo's own popups can spill out otherwise. */}
+      <motion.div
+        initial={false}
+        animate={{ height: height || "auto" }}
+        transition={switching ? paneTransition : INSTANT}
+        onAnimationComplete={() => setSwitching(false)}
+        className={cn(
+          "relative rounded-xl bg-primary-bg shadow-card",
+          switching && "overflow-hidden",
+        )}
+      >
+        <motion.div
+          ref={previewRef}
+          inert={tab !== "preview"}
+          initial={false}
+          animate={tab === "preview" ? SHOWN : HIDDEN}
+          transition={paneTransition}
+          className={cn(
+            paneClass(tab === "preview"),
+            "flex min-h-60 items-center justify-center p-8",
+          )}
+        >
+          {/* Replay remounts the demo, so animations and seeded state start over. */}
+          <IconButton
+            variant="ghost"
+            size="sm"
+            aria-label="Replay demo"
+            onClick={() => setRun((current) => current + 1)}
+            className="absolute top-2 right-2"
+          >
+            <RotateCcw />
+          </IconButton>
+          <div key={run} className="flex w-full items-center justify-center">
+            {preview}
+          </div>
+        </motion.div>
+        <motion.div
+          ref={codeRef}
+          inert={tab !== "code"}
+          initial={false}
+          animate={tab === "code" ? SHOWN : HIDDEN}
+          transition={paneTransition}
+          className={cn(paneClass(tab === "code"), "[&_pre]:max-h-[32rem]")}
+        >
+          {code}
+        </motion.div>
+      </motion.div>
     </div>
   );
 };
+
+// The active view sits in flow; the other lies over it, faded out.
+const paneClass = (active: boolean) =>
+  active ? "relative" : "pointer-events-none absolute inset-x-0 top-0";
diff --git a/components/docs/demo.tsx b/components/docs/demo.tsx
index cba4c8a..54d9e7e 100644
--- a/components/docs/demo.tsx
+++ b/components/docs/demo.tsx
@@ -1,7 +1,7 @@
-import { readFile } from "node:fs/promises";
-import path from "node:path";
 import type { ReactNode } from "react";
-import { CodeBlock } from "./code-block";
+import { languageOf, readDemoFiles } from "@/lib/docs/demo-files";
+import { highlightCode } from "./code-block";
+import { CodeFiles } from "./code-files";
 import { ComponentPreviewFrame } from "./component-preview-frame";
 
 type DemoProps = {
@@ -10,15 +10,18 @@ type DemoProps = {
   file: string;
 };
 
-// Server component: renders a colocated demo and shows that same file's source,
-// read from disk at build time — the file that runs is the file displayed.
+// Server component: renders a colocated demo and shows its source, read from
+// disk at build time — the files that run are the files displayed. A demo split
+// across local imports shows one tab per file.
 export const Demo = async ({ component, file }: DemoProps) => {
-  const source = await readFile(path.join(process.cwd(), "content", "docs", file), "utf8");
-
-  return (
-    <ComponentPreviewFrame
-      preview={component}
-      code={<CodeBlock code={source.trimEnd()} lang="tsx" />}
-    />
+  const files = await readDemoFiles(file);
+  const entries = await Promise.all(
+    files.map(async ({ name, file: filePath, source }) => ({
+      name,
+      source: source.trimEnd(),
+      code: await highlightCode(source.trimEnd(), languageOf(filePath)),
+    })),
   );
+
+  return <ComponentPreviewFrame preview={component} code={<CodeFiles files={entries} />} />;
 };
diff --git a/components/docs/docs-nav.tsx b/components/docs/docs-nav.tsx
new file mode 100644
index 0000000..f01f868
--- /dev/null
+++ b/components/docs/docs-nav.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import type { ReactNode } from "react";
+import { Sidebar } from "@/components/ui/sidebar";
+import type { SearchSuggestion } from "./docs-search";
+
+// Structural mirror of fumadocs' page-tree nodes (typeof source.pageTree). We
+// only render the node shapes our docs use: pages, separators and one level of folder.
+type TreeItem = { type: "page"; name: ReactNode; url: string };
+type TreeFolder = { type: "folder"; name: ReactNode; children: TreeNode[] };
+type TreeSeparator = { type: "separator"; name?: ReactNode };
+type TreeNode = TreeItem | TreeFolder | TreeSeparator;
+
+export type NavGroup = { label?: ReactNode; items: TreeItem[] };
+
+export type DocsTree = { children: TreeNode[] };
+
+// Pages to flag as new in the sidebar. Drop a URL once its primitive has been
+// out for a release or two.
+const NEW_PAGES = new Set(["/primitives/shell", "/primitives/nav", "/primitives/tabs"]);
+
+// A separator opens a labelled group for the root pages after it; a folder is a
+// group of its own.
+export const toGroups = (nodes: TreeNode[]): NavGroup[] => {
+  const groups: NavGroup[] = [];
+  let open: NavGroup | null = null;
+
+  for (const node of nodes) {
+    switch (node.type) {
+      case "separator":
+        open = { label: node.name, items: [] };
+        groups.push(open);
+        break;
+      case "folder":
+        groups.push({
+          label: node.name,
+          items: node.children.filter((child): child is TreeItem => child.type === "page"),
+        });
+        open = null;
+        break;
+      case "page":
+        if (!open) {
+          open = { items: [] };
+          groups.push(open);
+        }
+        open.items.push(node);
+        break;
+    }
+  }
+
+  return groups;
+};
+
+// The search palette opens on these before anything is typed.
+export const toSuggestions = (groups: NavGroup[]): SearchSuggestion[] =>
+  groups
+    .flatMap((group) => group.items)
+    .filter((item) => item.url.startsWith("/primitives/"))
+    .map((item) => ({
+      url: item.url,
+      title: typeof item.name === "string" ? item.name : item.url,
+    }));
+
+const NavLink = ({ item }: { item: TreeItem }) => {
+  const pathname = usePathname();
+
+  return (
+    <Sidebar.MenuItem>
+      <Sidebar.MenuButton
+        isActive={pathname === item.url}
+        render={
+          <Link href={item.url}>
+            <span className="min-w-0 flex-1 truncate">{item.name}</span>
+            {NEW_PAGES.has(item.url) && (
+              <span className="flex h-[18px] shrink-0 items-center rounded-[5px] bg-accent-bg/10 px-1.5 font-medium text-2xs text-accent-bg dark:bg-accent-bg/15">
+                New
+              </span>
+            )}
+          </Link>
+        }
+      />
+    </Sidebar.MenuItem>
+  );
+};
+
+/** The docs half of the site sidebar: the page tree. */
+export const DocsNav = ({ groups }: { groups: NavGroup[] }) => (
+  <Sidebar.Content className="gap-[18px]">
+    {groups.map((group, index) => (
+      <Sidebar.Group key={typeof group.label === "string" ? group.label : index}>
+        {group.label && <Sidebar.GroupLabel>{group.label}</Sidebar.GroupLabel>}
+        <Sidebar.Menu>
+          {group.items.map((item) => (
+            <NavLink key={item.url} item={item} />
+          ))}
+        </Sidebar.Menu>
+      </Sidebar.Group>
+    ))}
+  </Sidebar.Content>
+);
diff --git a/components/docs/docs-search.tsx b/components/docs/docs-search.tsx
index 03bb80d..a8719b9 100644
--- a/components/docs/docs-search.tsx
+++ b/components/docs/docs-search.tsx
@@ -1,20 +1,155 @@
 "use client";
 
+import {
+  AlignLeft,
+  ArrowDown,
+  ArrowUp,
+  CornerDownLeft,
+  FileText,
+  Hash,
+  Search,
+} from "@keyline-icons/react";
 import { useDocsSearch } from "fumadocs-core/search/client";
-import { SearchIcon } from "lucide-react";
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { type KeyboardEvent, type ReactNode, useEffect, useId, useState } from "react";
 import { Dialog } from "@/components/ui/dialog";
 import { IconButton } from "@/components/ui/icon-button";
+import { Kbd } from "@/components/ui/kbd";
 import { cn } from "@/lib/utils";
 
-export const DocsSearch = () => {
+type SearchResult = {
+  id: string;
+  url: string;
+  type: "page" | "heading" | "text";
+  content: string;
+  breadcrumbs?: string[];
+};
+
+type ResultSection = { label: string; items: SearchResult[] };
+
+/*
+ * ⌘K palette over the static Orama index (/api/search). Results arrive flat —
+ * a page followed by its matching headings and text — so they are grouped by
+ * the page's section, and arrow keys walk the flat order across groups.
+ */
+
+// A page opens a section named after its breadcrumb; headings and text follow
+// the page they belong to.
+const toSections = (results: SearchResult[]): ResultSection[] => {
+  const sections: ResultSection[] = [];
+
+  for (const result of results) {
+    const last = sections.at(-1);
+    const label = result.type === "page" ? (result.breadcrumbs?.at(-1) ?? "Docs") : last?.label;
+
+    if (last && last.label === label) last.items.push(result);
+    else sections.push({ label: label ?? "Docs", items: [result] });
+  }
+
+  return sections;
+};
+
+// Orama marks matches with <mark>; content keeps markdown backticks. Render
+// both — never the raw tags.
+const Highlighted = ({ content }: { content: string }) => {
+  const marked = (text: string, keyPrefix: string) =>
+    text.split(/(<mark>.*?<\/mark>)/g).map((part, index) =>
+      part.startsWith("<mark>") ? (
+        <span key={`${keyPrefix}-${index}`} className="text-accent-bg">
+          {part.slice(6, -7)}
+        </span>
+      ) : (
+        part
+      ),
+    );
+
+  return content.split(/(`[^`]+`)/g).map((part, index) =>
+    part.startsWith("`") && part.endsWith("`") && part.length > 1 ? (
+      <code key={index} className="font-mono text-[0.9em] text-ink-primary">
+        {marked(part.slice(1, -1), String(index))}
+      </code>
+    ) : (
+      marked(part, String(index))
+    ),
+  );
+};
+
+const ResultRow = ({
+  result,
+  section,
+  isActive,
+  optionId,
+  onActivate,
+  onSelect,
+}: {
+  result: SearchResult;
+  section: string;
+  isActive: boolean;
+  optionId: string;
+  onActivate: () => void;
+  onSelect: () => void;
+}) => {
+  const isPage = result.type === "page";
+
+  return (
+    <Link
+      id={optionId}
+      href={result.url}
+      role="option"
+      aria-selected={isActive}
+      tabIndex={-1}
+      onClick={onSelect}
+      onMouseMove={onActivate}
+      // Keep the keyboard selection in view; runs when this row becomes active.
+      ref={isActive ? (element) => element?.scrollIntoView({ block: "nearest" }) : undefined}
+      className={cn(
+        "flex items-center gap-2.5 rounded-[10px] pr-2 outline-none",
+        isPage ? "h-11 pl-2" : "h-9 pl-[46px]",
+        isActive && "bg-ink-primary/5",
+      )}
+    >
+      {isPage ? (
+        <span className="grid size-7 shrink-0 place-items-center rounded-[7px] bg-raised text-ink-body shadow-raised">
+          <FileText className="size-[15px]" />
+        </span>
+      ) : result.type === "heading" ? (
+        <Hash className="size-3.5 shrink-0 text-ink-tertiary" />
+      ) : (
+        <AlignLeft className="size-3.5 shrink-0 text-ink-tertiary" />
+      )}
+      <span
+        className={cn(
+          "min-w-0 flex-1 truncate",
+          isPage ? "font-medium text-ink-primary text-md" : "text-ink-body text-md",
+        )}
+      >
+        <Highlighted content={result.content} />
+      </span>
+      {isPage && <span className="shrink-0 text-ink-secondary text-xs">{section}</span>}
+      {isActive && (
+        <Kbd size="md" square>
+          <CornerDownLeft />
+        </Kbd>
+      )}
+    </Link>
+  );
+};
+
+export type SearchSuggestion = { url: string; title: string };
+
+export const DocsSearch = ({ suggestions = [] }: { suggestions?: SearchSuggestion[] }) => {
   const [open, setOpen] = useState(false);
   // The "fetch" preset queries the /api/search route handler (createFromSource).
   const { search, setSearch, query } = useDocsSearch({ type: "fetch" });
+  const router = useRouter();
+  const listId = useId();
+
+  // The highlight belongs to the query it was made for; a new query starts at the top.
+  const [active, setActive] = useState({ search: "", index: 0 });
 
   useEffect(() => {
-    const onKey = (event: KeyboardEvent) => {
+    const onKey = (event: globalThis.KeyboardEvent) => {
       if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
         setOpen((value) => !value);
@@ -24,61 +159,161 @@ export const DocsSearch = () => {
     return () => window.removeEventListener("keydown", onKey);
   }, []);
 
-  const results = Array.isArray(query.data) ? query.data : [];
+  // An empty query is primed with the primitives, so the palette never opens blank.
+  const results =
+    search.length === 0
+      ? suggestions.map(
+          (suggestion): SearchResult => ({
+            id: suggestion.url,
+            url: suggestion.url,
+            type: "page",
+            content: suggestion.title,
+            breadcrumbs: ["Primitives"],
+          }),
+        )
+      : Array.isArray(query.data)
+        ? (query.data as SearchResult[])
+        : [];
+  const sections = toSections(results);
+  const flat = sections.flatMap((section) =>
+    section.items.map((result) => ({ result, section: section.label })),
+  );
+  const activeIndex = active.search === search ? Math.min(active.index, flat.length - 1) : 0;
+  const optionId = (index: number) => `${listId}-option-${index}`;
+
+  const close = () => setOpen(false);
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (flat.length === 0) return;
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        setActive({ search, index: (activeIndex + 1) % flat.length });
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        setActive({ search, index: (activeIndex - 1 + flat.length) % flat.length });
+        break;
+      case "Enter":
+        event.preventDefault();
+        router.push(flat[activeIndex].result.url);
+        close();
+        break;
+    }
+  };
+
+  let body: ReactNode;
+  switch (true) {
+    case search.length === 0 && flat.length === 0:
+      body = <PaletteNote>Search pages, headings and text.</PaletteNote>;
+      break;
+    case flat.length === 0 && query.isLoading:
+      body = <PaletteNote>Searching…</PaletteNote>;
+      break;
+    case flat.length === 0:
+      body = <PaletteNote>No results for “{search}”.</PaletteNote>;
+      break;
+    default: {
+      let index = -1;
+      body = sections.map((section, sectionIndex) => (
+        <div
+          key={`${section.label}-${sectionIndex}`}
+          role="group"
+          aria-label={section.label}
+          className="flex flex-col gap-px not-first:mt-1.5"
+        >
+          <div className="flex h-7 items-center px-2.5 font-medium text-ink-secondary text-xs">
+            {section.label}
+          </div>
+          {section.items.map((result) => {
+            index += 1;
+            const rowIndex = index;
+            return (
+              <ResultRow
+                key={result.id}
+                result={result}
+                section={section.label}
+                optionId={optionId(rowIndex)}
+                isActive={rowIndex === activeIndex}
+                onActivate={() => setActive({ search, index: rowIndex })}
+                onSelect={close}
+              />
+            );
+          })}
+        </div>
+      ));
+    }
+  }
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <Dialog.Trigger
         render={
           <IconButton
-            variant="primary"
-            size="md"
-            aria-label="Search docs (⌘K)"
-            className="rounded-full"
+            variant="ghost"
+            aria-label="Search docs"
+            aria-keyshortcuts="Meta+K Control+K"
+            className="size-7 rounded-full"
           >
-            <SearchIcon />
+            <Search />
           </IconButton>
         }
       />
-      <Dialog.Content className="top-24 max-w-lg translate-y-0 p-0">
+      <Dialog.Content className="top-[12vh] max-w-[640px] translate-y-0 overflow-hidden p-0">
         <Dialog.Title className="sr-only">Search documentation</Dialog.Title>
-        <div className="flex items-center gap-2 border-secondary-border border-b px-4">
-          <SearchIcon className="size-4 shrink-0 text-ink-tertiary" />
+        <div className="flex h-14 items-center gap-2.5 pr-3.5 pl-[18px]">
+          <Search className="size-[18px] shrink-0 text-ink-secondary" />
           <input
             autoFocus
             value={search}
             onChange={(event) => setSearch(event.target.value)}
-            placeholder="Search documentation..."
-            className="w-full bg-transparent py-3 text-ink-primary text-sm outline-none placeholder:text-ink-tertiary"
+            onKeyDown={handleKeyDown}
+            placeholder="Search documentation…"
+            role="combobox"
+            aria-expanded={flat.length > 0}
+            aria-controls={listId}
+            aria-activedescendant={flat.length > 0 ? optionId(activeIndex) : undefined}
+            className="h-full flex-1 bg-transparent text-ink-primary text-xl outline-none placeholder:text-ink-tertiary"
           />
+          <Kbd size="md">Esc</Kbd>
+        </div>
+        <div
+          id={listId}
+          role="listbox"
+          aria-label="Results"
+          // scroll-py matches the 32px edge fade, so arrowing keeps the active row clear of it.
+          className="scroll-mask-y flex max-h-[min(60vh,26rem)] scroll-py-8 flex-col overflow-y-auto p-2"
+        >
+          {body}
         </div>
-        <div className="max-h-80 overflow-y-auto p-2">
-          {results.length === 0 ? (
-            <p className="px-3 py-6 text-center text-ink-tertiary text-sm">
-              {search ? "No results found." : "Type to search."}
-            </p>
-          ) : (
-            <ul className="flex flex-col gap-0.5">
-              {results.map((result) => (
-                <li key={result.id}>
-                  <Link
-                    href={result.url}
-                    onClick={() => setOpen(false)}
-                    className={cn(
-                      "block rounded-md px-3 py-2 text-sm transition-colors hover:bg-secondary-bg-hover",
-                      result.type === "page"
-                        ? "font-medium text-ink-primary"
-                        : "pl-6 text-ink-secondary",
-                    )}
-                  >
-                    {result.content}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          )}
+        <div className="flex h-11 items-center gap-4 px-4 text-ink-secondary text-xs shadow-[inset_0_1px_0_color-mix(in_oklab,var(--color-ink-primary)_6%,transparent)]">
+          <span className="flex items-center gap-1.5">
+            <span className="flex gap-[3px]">
+              <Kbd size="md" square>
+                <ArrowUp />
+              </Kbd>
+              <Kbd size="md" square>
+                <ArrowDown />
+              </Kbd>
+            </span>
+            Navigate
+          </span>
+          <span className="flex items-center gap-1.5">
+            <Kbd size="md" square>
+              <CornerDownLeft />
+            </Kbd>
+            Open
+          </span>
+          <span className="flex items-center gap-1.5">
+            <Kbd size="md">Esc</Kbd>
+            Close
+          </span>
         </div>
       </Dialog.Content>
     </Dialog>
   );
 };
+
+const PaletteNote = ({ children }: { children: ReactNode }) => (
+  <p className="px-3 py-8 text-center text-ink-secondary text-sm">{children}</p>
+);
diff --git a/components/docs/docs-sidebar.tsx b/components/docs/docs-sidebar.tsx
deleted file mode 100644
index baca6a1..0000000
--- a/components/docs/docs-sidebar.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { type ReactNode, useEffect, useMemo, useState } from "react";
-import { ChevronDownIcon } from "@/components/icons/chevron-down";
-import { GitHubIcon } from "@/components/icons/github";
-import { IntentfaceLogo } from "@/components/icons/intentface-logo";
-import { NpmIcon } from "@/components/icons/npm";
-import { PlaygroundIcon } from "@/components/icons/playground";
-import { Collapsible } from "@/components/ui/collapsible";
-import { cn } from "@/lib/utils";
-import { DocsSearch } from "./docs-search";
-import { DocsThemeToggle } from "./docs-theme-toggle";
-
-// Structural mirror of fumadocs' page-tree nodes (typeof source.pageTree). We
-// only render the two node shapes our docs use: pages and one level of folder.
-type TreeItem = { type: "page"; name: ReactNode; url: string };
-type TreeFolder = {
-  type: "folder";
-  name: ReactNode;
-  index?: TreeItem;
-  children: TreeNode[];
-};
-type TreeSeparator = { type: "separator"; name?: ReactNode };
-type TreeNode = TreeItem | TreeFolder | TreeSeparator;
-
-type DocsSidebarProps = {
-  tree: { children: TreeNode[] };
-};
-
-// Pages to flag as new in the sidebar. Drop a URL once its primitive has been
-// out for a release or two.
-const NEW_PAGES = new Set(["/primitives/shell", "/primitives/nav", "/primitives/tabs"]);
-
-const NavLink = ({ url, name }: { url: string; name: ReactNode }) => {
-  const pathname = usePathname();
-  const isActive = pathname === url;
-  return (
-    <Link
-      href={url}
-      className={cn(
-        "flex h-8 items-center gap-2 rounded-md px-3 text-md font-medium transition-colors duration-0",
-        isActive
-          ? "bg-secondary-bg-hover text-ink-primary"
-          : "text-ink-secondary hover:bg-secondary-bg-hover hover:text-ink-primary",
-      )}
-    >
-      <span className="min-w-0 flex-1 truncate">{name}</span>
-      {NEW_PAGES.has(url) && (
-        <span className="flex h-4 shrink-0 items-center rounded-sm bg-accent-bg/10 px-1.5 font-medium text-2xs text-accent-bg">
-          New
-        </span>
-      )}
-    </Link>
-  );
-};
-
-const hasActiveNode = (nodes: TreeNode[], pathname: string): boolean =>
-  nodes.some((child) => {
-    if (child.type === "page") return child.url === pathname;
-    if (child.type === "folder") {
-      if (child.index?.url === pathname) return true;
-      return hasActiveNode(child.children, pathname);
-    }
-    return false;
-  });
-
-const TreeFolderNode = ({ node, index }: { node: TreeFolder; index: number }) => {
-  const pathname = usePathname();
-  const containsActive = useMemo(
-    () => hasActiveNode(node.children, pathname) || node.index?.url === pathname,
-    [node, pathname],
-  );
-  const [open, setOpen] = useState(true);
-
-  useEffect(() => {
-    if (containsActive) setOpen(true);
-  }, [containsActive]);
-
-  return (
-    <li key={`folder-${index}`} className="mt-2">
-      <Collapsible open={open} onOpenChange={setOpen}>
-        <Collapsible.Trigger className="flex h-8 w-full cursor-pointer items-center gap-1.5 rounded-md px-3 text-left font-medium text-ink-tertiary text-md transition-colors duration-0 hover:bg-secondary-bg-hover hover:text-ink-secondary">
-          <span className="flex-1">{node.name}</span>
-          <ChevronDownIcon
-            className={cn(
-              "size-[18px] shrink-0 transition-transform",
-              open ? "rotate-0" : "-rotate-90",
-            )}
-          />
-        </Collapsible.Trigger>
-        <Collapsible.Panel>
-          <TreeNodes nodes={node.children} />
-        </Collapsible.Panel>
-      </Collapsible>
-    </li>
-  );
-};
-
-const TreeNodes = ({ nodes }: { nodes: TreeNode[] }) => (
-  <ul className="flex flex-col gap-0.5">
-    {nodes.map((node, index) => {
-      if (node.type === "separator") {
-        return (
-          <li
-            key={`sep-${index}`}
-            className="mt-2 flex h-8 items-center px-3 font-medium text-ink-tertiary text-md"
-          >
-            {node.name}
-          </li>
-        );
-      }
-      if (node.type === "folder") {
-        return <TreeFolderNode key={`folder-${index}`} node={node} index={index} />;
-      }
-      return (
-        <li key={node.url}>
-          <NavLink url={node.url} name={node.name} />
-        </li>
-      );
-    })}
-  </ul>
-);
-
-const ExternalLink = ({ href, icon, label }: { href: string; icon: ReactNode; label: string }) => (
-  <a
-    href={href}
-    target="_blank"
-    rel="noreferrer"
-    className="flex h-8 items-center gap-2 rounded-md px-3 font-medium text-ink-secondary text-md transition-colors duration-0 hover:bg-secondary-bg-hover hover:text-ink-primary"
-  >
-    <span className="[&>svg]:size-4">{icon}</span>
-    {label}
-  </a>
-);
-
-export const DocsSidebar = ({ tree }: DocsSidebarProps) => (
-  <aside className="sticky top-0 hidden h-screen w-60 shrink-0 flex-col gap-2 overflow-y-auto border-secondary-border border-r p-3 md:flex">
-    <div className="flex h-9 shrink-0 items-center justify-between gap-2 px-1">
-      <Link
-        href="/"
-        className="flex items-center px-2 text-ink-primary"
-        aria-label="@intentface/chat"
-      >
-        <IntentfaceLogo className="size-6" />
-      </Link>
-      <div className="flex shrink-0 items-center gap-1">
-        <DocsThemeToggle />
-        <DocsSearch />
-      </div>
-    </div>
-    <nav className="flex-1">
-      <TreeNodes nodes={tree.children} />
-    </nav>
-    <div className="flex flex-col gap-0.5 border-secondary-border border-t pt-2">
-      {/* Internal route — next/link, not the external-anchor ExternalLink.
-          The chat root IS the playground (corner config cards). */}
-      <Link
-        href="/playground"
-        className="flex h-8 items-center gap-2 rounded-md px-3 font-medium text-ink-secondary text-md transition-colors duration-0 hover:bg-secondary-bg-hover hover:text-ink-primary"
-      >
-        <span className="[&>svg]:size-4">
-          <PlaygroundIcon />
-        </span>
-        Playground
-      </Link>
-      <ExternalLink
-        href="https://github.com/Intentface/intentface-chat"
-        icon={<GitHubIcon />}
-        label="GitHub"
-      />
-      <ExternalLink
-        href="https://www.npmjs.com/package/@intentface/chat"
-        icon={<NpmIcon />}
-        label="npm"
-      />
-    </div>
-  </aside>
-);
diff --git a/components/docs/docs-theme-toggle.tsx b/components/docs/docs-theme-toggle.tsx
index b5c0a45..42d1381 100644
--- a/components/docs/docs-theme-toggle.tsx
+++ b/components/docs/docs-theme-toggle.tsx
@@ -1,15 +1,15 @@
 "use client";
 
-import { MoonIcon } from "@/components/icons/moon";
-import { SunIcon } from "@/components/icons/sun";
+import { Moon, Sun } from "@keyline-icons/react";
 import { IconButton } from "@/components/ui/icon-button";
 import { useInterfaceTheme } from "@/hooks/use-interface-theme";
 
 /**
- * A single button rather than a three-way control: the sidebar header has room
+ * A single button rather than a three-way control: the sidebar footer has room
  * for one affordance, and "system" is the starting mode, not a destination
  * anyone picks from here. It flips whichever mode is resolved, so the first
- * press always changes what you see.
+ * press always changes what you see. The server can't know that mode, so the
+ * label is fixed and the icon follows the `.dark` class rather than state.
  */
 export const DocsThemeToggle = () => {
   const { resolvedMode, setMode } = useInterfaceTheme();
@@ -18,12 +18,13 @@ export const DocsThemeToggle = () => {
   return (
     <IconButton
       variant="ghost"
-      size="md"
-      aria-label={`Switch to ${next} theme`}
+      size="sm"
+      aria-label="Toggle theme"
       onClick={() => setMode(next)}
-      className="rounded-full"
+      className="rounded-md"
     >
-      {resolvedMode === "dark" ? <MoonIcon /> : <SunIcon />}
+      <Moon className="hidden dark:block" />
+      <Sun className="dark:hidden" />
     </IconButton>
   );
 };
diff --git a/components/docs/docs-toc.tsx b/components/docs/docs-toc.tsx
index b210687..7b69c63 100644
--- a/components/docs/docs-toc.tsx
+++ b/components/docs/docs-toc.tsx
@@ -52,25 +52,33 @@ export const DocsTOC = ({ items }: DocsTOCProps) => {
 
   const linkClass = (isActive: boolean, depth = 2) =>
     cn(
-      "-ml-px border-transparent border-l py-1 text-sm transition-colors",
-      depth >= 3 ? "pl-6" : "pl-4",
+      "flex h-7 min-w-0 shrink-0 items-center text-sm transition-colors",
+      depth >= 3 ? "pl-[26px]" : "pl-3.5",
+      // The active entry draws its own 2px ink rule over the 1px rail.
       isActive
-        ? "border-accent-bg font-medium text-ink-primary"
-        : "text-ink-tertiary hover:text-ink-secondary",
+        ? "font-medium text-ink-primary shadow-[inset_2px_0_0_var(--color-ink-primary)]"
+        : "text-ink-secondary hover:text-ink-primary",
     );
 
   return (
-    <aside className="sticky top-16 hidden h-[calc(100vh-8rem)] w-56 shrink-0 overflow-y-auto xl:block">
-      <nav className="flex flex-col gap-1 border-secondary-border border-l">
+    <aside className="sticky top-13 hidden max-h-[calc(100dvh-4.25rem)] w-[260px] shrink-0 flex-col gap-3 self-start overflow-y-auto pt-[34px] pr-6 pb-8 pl-1 xl:flex">
+      <p className="font-medium text-ink-primary text-sm">On this page</p>
+      <nav className="flex flex-col shadow-[inset_1px_0_0_color-mix(in_oklab,var(--color-ink-primary)_10%,transparent)]">
         <a href="#overview" className={linkClass(activeId === null)}>
-          Overview
+          <span className="truncate">Overview</span>
         </a>
         {items.map((item) => {
           const id = item.url.replace(/^#/, "");
           const isActive = activeId === id;
           return (
-            <a key={item.url} href={item.url} className={linkClass(isActive, item.depth)}>
-              {item.title}
+            // One line per entry: long headings truncate, the full text on hover.
+            <a
+              key={item.url}
+              href={item.url}
+              title={typeof item.title === "string" ? item.title : undefined}
+              className={linkClass(isActive, item.depth)}
+            >
+              <span className="truncate">{item.title}</span>
             </a>
           );
         })}
diff --git a/components/docs/docs-top-bar-trigger.tsx b/components/docs/docs-top-bar-trigger.tsx
new file mode 100644
index 0000000..ecf4a75
--- /dev/null
+++ b/components/docs/docs-top-bar-trigger.tsx
@@ -0,0 +1,7 @@
+"use client";
+
+import { Sidebar } from "@/components/ui/sidebar";
+
+// The sidebar's collapse button; the playground's header puts it at this same
+// spot. A client wrapper because the page is a server component.
+export const DocsTopBarTrigger = () => <Sidebar.Trigger className="size-7" />;
diff --git a/components/docs/installation-block-tabs.tsx b/components/docs/installation-block-tabs.tsx
index bbc23d7..1749318 100644
--- a/components/docs/installation-block-tabs.tsx
+++ b/components/docs/installation-block-tabs.tsx
@@ -2,10 +2,7 @@
 
 import type { ReactNode } from "react";
 import { useState } from "react";
-import { CheckMarkMediumIcon } from "@/components/icons/check-mark-medium";
-import { CopyIcon } from "@/components/icons/copy";
-import { useCopy } from "@/hooks/use-copy";
-import { cn } from "@/lib/utils";
+import { CodeFrame, CodeTab } from "./code-frame";
 
 export type InstallationEntry = {
   manager: string;
@@ -19,40 +16,26 @@ type InstallationBlockTabsProps = {
 };
 
 // Client shell for the package-manager tabs. The server highlights every
-// command up front; this only picks which one shows and owns the copy button.
+// command up front; this only picks which one shows.
 export const InstallationBlockTabs = ({ entries }: InstallationBlockTabsProps) => {
   const [manager, setManager] = useState(entries[0].manager);
-  const { copy, copied } = useCopy();
   const current = entries.find((entry) => entry.manager === manager) ?? entries[0];
 
   return (
-    <div className="not-prose my-6 overflow-hidden rounded-lg border border-primary-border">
-      <div className="flex items-center gap-1 border-primary-border border-b bg-primary-bg p-1.5">
-        {entries.map((entry) => (
-          <button
-            key={entry.manager}
-            type="button"
-            onClick={() => setManager(entry.manager)}
-            className={cn(
-              "cursor-pointer rounded-full border px-3 py-1 font-mono text-sm transition-colors",
-              entry.manager === manager
-                ? "border-secondary-border bg-secondary-bg text-ink-primary shadow-xs"
-                : "border-transparent text-ink-tertiary hover:bg-primary-bg-hover hover:text-ink-secondary",
-            )}
-          >
-            {entry.manager}
-          </button>
-        ))}
-        <button
-          type="button"
-          onClick={() => copy(current.command)}
-          aria-label={`Copy: ${current.command}`}
-          className="ml-auto cursor-pointer rounded-md p-1.5 text-ink-tertiary transition-colors hover:bg-primary-bg-hover hover:text-ink-secondary"
+    <CodeFrame
+      className="my-6"
+      code={current.command}
+      tabs={entries.map((entry) => (
+        <CodeTab
+          key={entry.manager}
+          active={entry.manager === manager}
+          onClick={() => setManager(entry.manager)}
         >
-          {copied === current.command ? <CheckMarkMediumIcon /> : <CopyIcon />}
-        </button>
-      </div>
-      <div className="[&_pre]:rounded-none [&_pre]:border-0">{current.code}</div>
-    </div>
+          {entry.manager}
+        </CodeTab>
+      ))}
+    >
+      {current.code}
+    </CodeFrame>
   );
 };
diff --git a/components/docs/installation-block.tsx b/components/docs/installation-block.tsx
index 29f389a..bde9734 100644
--- a/components/docs/installation-block.tsx
+++ b/components/docs/installation-block.tsx
@@ -1,5 +1,5 @@
 import { PACKAGE_MANAGERS } from "@/lib/docs/package-managers";
-import { CodeBlock } from "./code-block";
+import { highlightCode } from "./code-block";
 import { InstallationBlockTabs } from "./installation-block-tabs";
 
 type InstallationBlockProps = {
@@ -8,11 +8,15 @@ type InstallationBlockProps = {
 
 // Server component: highlights one install command per package manager and
 // hands them all to the client shell, which shows the selected one.
-export const InstallationBlock = ({ packageName }: InstallationBlockProps) => (
+export const InstallationBlock = async ({ packageName }: InstallationBlockProps) => (
   <InstallationBlockTabs
-    entries={PACKAGE_MANAGERS.map(({ manager, install }) => {
-      const command = `${install} ${packageName}`;
-      return { manager, command, code: <CodeBlock code={command} lang="bash" /> };
-    })}
+    entries={
+      await Promise.all(
+        PACKAGE_MANAGERS.map(async ({ manager, install }) => {
+          const command = `${install} ${packageName}`;
+          return { manager, command, code: await highlightCode(command, "bash") };
+        }),
+      )
+    }
   />
 );
diff --git a/components/docs/keys-table.tsx b/components/docs/keys-table.tsx
index 1f82176..04dd0cd 100644
--- a/components/docs/keys-table.tsx
+++ b/components/docs/keys-table.tsx
@@ -1,4 +1,6 @@
 import type { ReactNode } from "react";
+import { ReferenceTable } from "./reference-table";
+import { ScrollLine } from "./scroll-line";
 
 export type KeyRow = {
   /** The key or chord, as a reader would press it: "Arrow up", "Enter / Space". */
@@ -15,30 +17,18 @@ type KeysTableProps = {
 // `default` badge — there is no such thing as a default keystroke. Column
 // widths and chrome match the other tables so they stay aligned down the page.
 export const KeysTable = ({ rows }: KeysTableProps) => (
-  <div className="not-prose my-6 overflow-hidden rounded-lg border border-secondary-border bg-primary-bg">
-    <table className="w-full table-fixed border-collapse text-left text-sm">
-      <colgroup>
-        <col className="w-[28%]" />
-        <col className="w-[72%]" />
-      </colgroup>
-      <thead>
-        <tr className="border-secondary-border border-b bg-tertiary-bg">
-          <th className="px-4 py-2.5 font-medium text-ink-primary">Key</th>
-          <th className="px-4 py-2.5 font-medium text-ink-primary">Description</th>
-        </tr>
-      </thead>
-      <tbody>
-        {rows.map((row) => (
-          <tr key={row.keys} className="border-secondary-border/60 border-b last:border-0">
-            <td className="px-4 py-2.5 align-top">
-              <kbd className="rounded border border-secondary-border bg-tertiary-bg px-1.5 py-0.5 font-sans text-ink-primary text-xs">
-                {row.keys}
-              </kbd>
-            </td>
-            <td className="px-4 py-2.5 align-top text-ink-secondary">{row.description}</td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  </div>
+  <ReferenceTable columns={[{ label: "Key", width: "w-[30%]" }, { label: "Description" }]}>
+    {rows.map((row) => (
+      <tr key={row.keys} className="border-ink-primary/6 border-b last:border-0">
+        <td className="px-4 py-3.5 align-top">
+          <kbd className="inline-flex h-5 items-center rounded-[5px] bg-raised px-1.5 font-mono text-2xs text-ink-body shadow-raised">
+            {row.keys}
+          </kbd>
+        </td>
+        <td className="p-0 align-top text-ink-body leading-5">
+          <ScrollLine label={`${row.keys}: description`}>{row.description}</ScrollLine>
+        </td>
+      </tr>
+    ))}
+  </ReferenceTable>
 );
diff --git a/components/docs/page-actions.tsx b/components/docs/page-actions.tsx
index 4e69f29..a43b443 100644
--- a/components/docs/page-actions.tsx
+++ b/components/docs/page-actions.tsx
@@ -1,6 +1,11 @@
-import { GitHubIcon } from "@/components/icons/github";
-import { MarkdownIcon } from "@/components/icons/markdown";
+"use client";
+
+import { Check } from "@keyline-icons/react";
+// Keyline has no brand or Markdown icons, so these stay on Tabler.
+import { IconBrandGithub, IconMarkdown } from "@tabler/icons-react";
 import Button from "@/components/ui/button";
+import { IconButton } from "@/components/ui/icon-button";
+import { useCopy } from "@/hooks/use-copy";
 
 const REPO = "https://github.com/Intentface/intentface-chat";
 
@@ -11,43 +16,39 @@ type PageActionsProps = {
   source?: string;
 };
 
-const actionButtonClass =
-  "h-9 rounded-full px-4 text-md font-medium text-ink-secondary hover:bg-secondary-bg-hover hover:text-ink-primary";
+// "Copy page" puts the page's raw markdown on the clipboard (the same file the
+// `.md` route serves); the GitHub link goes to the primitive's source when the
+// page documents one, and to the repo otherwise.
+export const PageActions = ({ slug, source }: PageActionsProps) => {
+  const { copy, isCopied } = useCopy();
+  const markdownUrl = `/${slug.join("/")}.md`;
+
+  const copyPage = async () => {
+    const response = await fetch(markdownUrl);
+    if (response.ok) await copy(await response.text());
+  };
 
-// "View as Markdown" (raw .mdx as text) + "Primitive source" (the headless
-// component on GitHub — not the demos), mirroring Base UI's page header.
-export const PageActions = ({ slug, source }: PageActionsProps) => (
-  <div className="flex items-center gap-2">
-    {/* These navigate rather than act, so they render as anchors. Base UI needs
-        telling: `nativeButton` defaults to true and warns when the rendered
-        element is not a real <button>. */}
-    <Button
-      variant="ghost"
-      nativeButton={false}
-      className={actionButtonClass}
-      render={
-        <a href={`/${slug.join("/")}.md`} target="_blank" rel="noreferrer">
-          <MarkdownIcon />
-          View as Markdown
-        </a>
-      }
-    />
-    {source && (
-      <Button
+  return (
+    <div className="flex items-center gap-1.5">
+      <Button size="sm" className="gap-1.5 pr-2.5 pl-2 text-sm" onClick={copyPage}>
+        {isCopied ? <Check /> : <IconMarkdown />}
+        {isCopied ? "Copied" : "Copy page"}
+      </Button>
+      <IconButton
         variant="ghost"
+        size="sm"
         nativeButton={false}
-        className={actionButtonClass}
+        aria-label={source ? "Primitive source on GitHub" : "GitHub repository"}
         render={
           <a
-            href={`${REPO}/tree/main/packages/chat/src/${source}`}
+            href={source ? `${REPO}/tree/main/packages/chat/src/${source}` : REPO}
             target="_blank"
             rel="noreferrer"
           >
-            <GitHubIcon />
-            Primitive source
+            <IconBrandGithub />
           </a>
         }
       />
-    )}
-  </div>
-);
+    </div>
+  );
+};
diff --git a/components/docs/props-table.tsx b/components/docs/props-table.tsx
index 02b9440..5a9aa43 100644
--- a/components/docs/props-table.tsx
+++ b/components/docs/props-table.tsx
@@ -1,9 +1,10 @@
 "use client";
 
+import { ChevronDown } from "@keyline-icons/react";
 import { motion } from "motion/react";
 import { type ReactNode, useState } from "react";
-import { ChevronDownIcon } from "@/components/icons/chevron-down";
 import { cn } from "@/lib/utils";
+import { ReferenceTable } from "./reference-table";
 
 export type PropRow = {
   name: string;
@@ -17,31 +18,22 @@ type PropsTableProps = {
 };
 
 // Hand-authored prop reference. Rows are collapsible — collapsed shows the prop,
-// type, and default (type truncated); expanding reveals the description and the
-// full untruncated type. Columns are fixed-width so they stay consistent across
-// every table on the page.
+// its type (truncated) and default; expanding reveals the description and the
+// full type. Columns are fixed-width so they line up across every table on the
+// page, AttributesTable included.
 export const PropsTable = ({ rows }: PropsTableProps) => (
-  <div className="not-prose my-6 overflow-hidden rounded-lg border border-secondary-border bg-primary-bg">
-    <table className="w-full table-fixed border-collapse text-left text-sm">
-      <colgroup>
-        <col className="w-[28%]" />
-        <col className="w-[44%]" />
-        <col className="w-[28%]" />
-      </colgroup>
-      <thead>
-        <tr className="border-secondary-border border-b bg-tertiary-bg">
-          <th className="px-4 py-2.5 font-medium text-ink-primary">Prop</th>
-          <th className="px-4 py-2.5 font-medium text-ink-primary">Type</th>
-          <th className="px-4 py-2.5 font-medium text-ink-primary">Default</th>
-        </tr>
-      </thead>
-      <tbody>
-        {rows.map((row) => (
-          <PropsRow key={row.name} row={row} />
-        ))}
-      </tbody>
-    </table>
-  </div>
+  <ReferenceTable
+    columns={[
+      { label: "Prop", width: "w-[30%]" },
+      { label: "Type" },
+      { label: "Default", width: "w-[22%]" },
+      { label: "Details", width: "w-10", srOnly: true },
+    ]}
+  >
+    {rows.map((row) => (
+      <PropsRow key={row.name} row={row} />
+    ))}
+  </ReferenceTable>
 );
 
 const PropsRow = ({ row }: { row: PropRow }) => {
@@ -50,81 +42,63 @@ const PropsRow = ({ row }: { row: PropRow }) => {
   return (
     <>
       <tr
-        className="cursor-pointer border-secondary-border/60 border-b last:border-0 hover:bg-primary-bg-hover/50"
+        className={cn(
+          "cursor-pointer transition-colors",
+          open ? "bg-table-tray" : "hover:bg-ink-primary/[0.02]",
+        )}
         onClick={() => setOpen((current) => !current)}
       >
-        <td className="px-4 py-2.5 align-top">
-          <code className="font-mono text-ink-primary text-xs">{row.name}</code>
+        <td className="truncate px-4 py-3.5 align-middle">
+          <code className="font-medium font-mono text-ink-primary text-sm">{row.name}</code>
         </td>
-        <td className="truncate px-4 py-2.5 align-top">
-          <code className="font-mono text-accent-bg text-xs">{row.type}</code>
+        <td className="truncate px-4 py-3.5 align-middle">
+          <TypeChip>{row.type}</TypeChip>
         </td>
-        <td className="px-4 py-2.5 align-top">
-          <div className="flex items-center justify-between gap-2">
-            {row.default ? (
-              <code className="truncate font-mono text-ink-tertiary text-xs">{row.default}</code>
-            ) : (
-              <span className="text-ink-tertiary">—</span>
-            )}
-            <button
-              type="button"
-              aria-label={open ? "Collapse" : "Expand"}
-              aria-expanded={open}
-              className="shrink-0 text-ink-tertiary"
-              onClick={(event) => {
-                event.stopPropagation();
-                setOpen((current) => !current);
-              }}
-            >
-              <ChevronDownIcon
-                className={cn("size-4 transition-transform", open ? "rotate-180" : "rotate-0")}
-              />
-            </button>
-          </div>
+        <td className="truncate px-4 py-3.5 align-middle">
+          {row.default ? (
+            <code className="font-mono text-ink-secondary text-xs">{row.default}</code>
+          ) : (
+            <span className="text-ink-tertiary text-xs">—</span>
+          )}
+        </td>
+        <td className="py-3.5 pr-3 align-middle">
+          <button
+            type="button"
+            aria-label={open ? "Collapse" : "Expand"}
+            aria-expanded={open}
+            className="grid size-6 cursor-pointer place-items-center rounded-full focus-visible:outline-2 focus-visible:outline-accent-bg/60"
+            onClick={(event) => {
+              event.stopPropagation();
+              setOpen((current) => !current);
+            }}
+          >
+            <ChevronDown
+              className={cn(
+                "size-3.5 transition-transform",
+                open ? "rotate-180 text-ink-primary" : "text-ink-tertiary",
+              )}
+            />
+          </button>
         </td>
       </tr>
       <tr
         aria-hidden={!open}
-        className={cn(open && "border-secondary-border/60 border-b bg-base-bg/40")}
+        // The rule between rows sits on this row, so the last one can drop it.
+        className={cn("border-ink-primary/6 border-b last:border-0", open && "bg-table-tray")}
       >
-        <td colSpan={3} className="p-0">
+        <td colSpan={4} className="p-0">
           <motion.div
             initial={false}
             animate={{ height: open ? "auto" : 0 }}
-            transition={{
-              duration: 0.22,
-              ease: [0.32, 0.72, 0, 1],
-            }}
+            transition={{ duration: 0.22, ease: [0.32, 0.72, 0, 1] }}
             className="overflow-hidden"
           >
-            <motion.dl
-              initial={false}
-              animate={{ opacity: open ? 1 : 0 }}
-              transition={{
-                duration: 0.15,
-                ease: "easeOut",
-              }}
-              className="flex flex-col gap-3 py-4"
-            >
-              <DetailRow label="Name">
-                <code className="font-mono text-ink-primary text-xs">{row.name}</code>
-              </DetailRow>
-              <DetailRow label="Description">
-                <span className="text-ink-secondary">{row.description}</span>
-              </DetailRow>
-              <DetailRow label="Type">
-                <code className="block w-fit max-w-full overflow-x-auto rounded border border-base-border bg-base-bg px-1 py-px font-mono text-accent-bg text-xs">
-                  {row.type}
-                </code>
-              </DetailRow>
-              <DetailRow label="Default">
-                {row.default ? (
-                  <code className="font-mono text-ink-secondary text-xs">{row.default}</code>
-                ) : (
-                  <span className="text-ink-tertiary">—</span>
-                )}
-              </DetailRow>
-            </motion.dl>
+            <div className="flex max-w-[560px] flex-col gap-2.5 px-4 pb-4">
+              <div className="text-ink-body text-sm leading-5">{row.description}</div>
+              <TypeChip className="w-fit max-w-full overflow-x-auto whitespace-pre-wrap">
+                {row.type}
+              </TypeChip>
+            </div>
           </motion.div>
         </td>
       </tr>
@@ -132,12 +106,13 @@ const PropsRow = ({ row }: { row: PropRow }) => {
   );
 };
 
-// Mirror the collapsed row's column grid (first col 28%, matching the <colgroup>): the
-// label sits under the "Prop" column and its value under "Type", each with the cells'
-// px-4 so the detail lines up with the row above it.
-const DetailRow = ({ label, children }: { label: string; children: ReactNode }) => (
-  <div className="grid grid-cols-[28%_1fr] items-baseline">
-    <dt className="px-4 text-ink-tertiary text-xs">{label}</dt>
-    <dd className="min-w-0 px-4 text-sm">{children}</dd>
-  </div>
+const TypeChip = ({ className, children }: { className?: string; children: ReactNode }) => (
+  <code
+    className={cn(
+      "rounded-[4px] bg-ink-primary/6 px-1.5 py-0.5 font-mono text-ink-body text-xs",
+      className,
+    )}
+  >
+    {children}
+  </code>
 );
diff --git a/components/docs/reference-table.tsx b/components/docs/reference-table.tsx
new file mode 100644
index 0000000..16f2ba6
--- /dev/null
+++ b/components/docs/reference-table.tsx
@@ -0,0 +1,67 @@
+import type { ReactNode } from "react";
+
+type Column = {
+  label: string;
+  /** A width class for the column, e.g. "w-[30%]". Omit for the flexible column. */
+  width?: string;
+  /** Screen-reader only label (e.g. the expand-toggle column). */
+  srOnly?: boolean;
+};
+
+/**
+ * The frame every API reference table shares, built two-tone like a code block:
+ * column labels sit in an outer tray and the rows in an inset panel with its own
+ * edge. An expanded row takes the tray colour, so it reads as part of the frame.
+ * The visual header is a separate, hidden table on the same column widths; the
+ * real <thead> lives with the rows for assistive tech.
+ */
+export const ReferenceTable = ({
+  columns,
+  children,
+}: {
+  columns: Column[];
+  children: ReactNode;
+}) => {
+  const colgroup = (
+    <colgroup>
+      {columns.map((column) => (
+        <col key={column.label} className={column.width} />
+      ))}
+    </colgroup>
+  );
+
+  return (
+    <div className="not-prose my-6 rounded-xl bg-table-tray p-[5px] shadow-card">
+      <table aria-hidden="true" className="w-full table-fixed text-left">
+        {colgroup}
+        <tbody>
+          <tr>
+            {columns.map((column) => (
+              <td
+                key={column.label}
+                className="h-[31px] px-4 pb-[5px] align-middle font-medium text-ink-secondary text-xs"
+              >
+                {column.srOnly ? null : column.label}
+              </td>
+            ))}
+          </tr>
+        </tbody>
+      </table>
+      <div className="relative overflow-hidden rounded-md bg-table-panel shadow-[0_0_0_1px_rgb(0_0_0/0.06),0_1px_2px_rgb(0_0_0/0.04)] dark:shadow-none dark:after:pointer-events-none dark:after:absolute dark:after:inset-0 dark:after:rounded-md dark:after:shadow-[inset_0_0_0_1px_rgb(255_255_255/0.07)]">
+        {/* Dark draws its edge on an overlay: an inset shadow sits under the rows,
+            so an expanded row's background would paint over it. */}
+        <table className="w-full table-fixed border-collapse text-left text-sm">
+          {colgroup}
+          <thead className="sr-only">
+            <tr>
+              {columns.map((column) => (
+                <th key={column.label}>{column.label}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>{children}</tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
diff --git a/components/docs/scroll-line.tsx b/components/docs/scroll-line.tsx
new file mode 100644
index 0000000..65ea9d4
--- /dev/null
+++ b/components/docs/scroll-line.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import { type ReactNode, useCallback, useState } from "react";
+
+/**
+ * One line that scrolls sideways with fading edges instead of wrapping. Only a
+ * line that actually overflows joins the tab order, so keyboard readers in
+ * browsers that don't focus scrollers (Safari) can reach the clipped text
+ * without every short row adding a tab stop.
+ */
+export const ScrollLine = ({ label, children }: { label: string; children: ReactNode }) => {
+  const [overflows, setOverflows] = useState(false);
+
+  const ref = useCallback((node: HTMLDivElement | null) => {
+    if (!node) return;
+    const measure = () => setOverflows(node.scrollWidth > node.clientWidth);
+    measure();
+    // The scroller's box and its content's: a web font swapping in widens the
+    // text without resizing the scroller.
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    if (node.firstElementChild) observer.observe(node.firstElementChild);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    // The wrapper draws the focus ring: a mask also fades its own element's
+    // outline, so the masked scroller can't show one whole.
+    <div className="rounded-[inherit] has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-accent-bg/60 has-[:focus-visible]:-outline-offset-2">
+      <div
+        ref={ref}
+        // Focus stays on the scroller, since arrow keys scroll the focused element.
+        // Named and focusable only while it overflows (the scrollable-region pattern).
+        role="group"
+        aria-label={overflows ? label : undefined}
+        tabIndex={overflows ? 0 : undefined}
+        className="scroll-mask overflow-x-auto whitespace-nowrap px-4 py-3.5 outline-none [scrollbar-width:none]"
+      >
+        <span className="inline-block">{children}</span>
+      </div>
+    </div>
+  );
+};
diff --git a/components/docs/values-table.tsx b/components/docs/values-table.tsx
index 8b69c59..4a65513 100644
--- a/components/docs/values-table.tsx
+++ b/components/docs/values-table.tsx
@@ -1,4 +1,6 @@
 import type { ReactNode } from "react";
+import { ReferenceTable } from "./reference-table";
+import { ScrollLine } from "./scroll-line";
 
 export type ValueRow = {
   value: string;
@@ -15,35 +17,23 @@ type ValuesTableProps = {
 // every other row). Fixed-width columns and chrome match PropsTable /
 // AttributesTable so the tables stay visually aligned down the page.
 export const ValuesTable = ({ rows }: ValuesTableProps) => (
-  <div className="not-prose my-6 overflow-hidden rounded-lg border border-secondary-border bg-primary-bg">
-    <table className="w-full table-fixed border-collapse text-left text-sm">
-      <colgroup>
-        <col className="w-[28%]" />
-        <col className="w-[72%]" />
-      </colgroup>
-      <thead>
-        <tr className="border-secondary-border border-b bg-tertiary-bg">
-          <th className="px-4 py-2.5 font-medium text-ink-primary">Value</th>
-          <th className="px-4 py-2.5 font-medium text-ink-primary">Description</th>
-        </tr>
-      </thead>
-      <tbody>
-        {rows.map((row) => (
-          <tr key={row.value} className="border-secondary-border/60 border-b last:border-0">
-            <td className="px-4 py-2.5 align-top">
-              <div className="flex flex-wrap items-center gap-2">
-                <code className="font-mono text-ink-primary text-xs">{row.value}</code>
-                {row.default ? (
-                  <span className="rounded border border-secondary-border bg-tertiary-bg px-1.5 py-px font-medium text-2xs text-ink-tertiary">
-                    default
-                  </span>
-                ) : null}
-              </div>
-            </td>
-            <td className="px-4 py-2.5 align-top text-ink-secondary">{row.description}</td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  </div>
+  <ReferenceTable columns={[{ label: "Value", width: "w-[30%]" }, { label: "Description" }]}>
+    {rows.map((row) => (
+      <tr key={row.value} className="border-ink-primary/6 border-b last:border-0">
+        <td className="px-4 py-3.5 align-top">
+          <div className="flex flex-wrap items-center gap-2">
+            <code className="font-medium font-mono text-ink-primary text-sm">{row.value}</code>
+            {row.default ? (
+              <span className="flex h-[18px] items-center rounded-[5px] bg-accent-bg/10 px-1.5 font-medium text-2xs text-accent-bg dark:bg-accent-bg/15">
+                default
+              </span>
+            ) : null}
+          </div>
+        </td>
+        <td className="p-0 align-top text-ink-body leading-5">
+          <ScrollLine label={`${row.value}: description`}>{row.description}</ScrollLine>
+        </td>
+      </tr>
+    ))}
+  </ReferenceTable>
 );
diff --git a/components/header.tsx b/components/header.tsx
index dd8423e..65960aa 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -2,18 +2,10 @@
 
 import { Sidebar } from "@/components/ui/sidebar";
 
-// Mouse users expand via the edge-hover hotspot (trigger lives inside the
-// sidebar); this header trigger stays for the mobile drawer and iPad-class
-// touch screens, where there's no hover to summon the hotspot.
-export const Header = () => {
-  return (
-    <header
-      data-slot="header"
-      className="absolute top-0 right-0 left-0 flex items-center p-2 md:pointer-fine:hidden"
-    >
-      <div className="z-2 flex w-full items-center justify-between">
-        <Sidebar.Trigger />
-      </div>
-    </header>
-  );
-};
+// The sidebar's collapse button, at the same spot as in the docs top bar: 12px
+// from the top and left, like the settings gear on the right.
+export const Header = () => (
+  <header data-slot="header" className="absolute top-0 left-0 z-20 flex h-13 items-center pl-3">
+    <Sidebar.Trigger className="size-7" />
+  </header>
+);
diff --git a/components/icons/appearance.tsx b/components/icons/appearance.tsx
deleted file mode 100644
index e89e995..0000000
--- a/components/icons/appearance.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { SVGProps } from "react";
-
-export const AppearanceIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    aria-hidden="true"
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g>
-      <path
-        d="M12 8C14.2091 8 16 9.79086 16 12C16 14.2091 14.2091 16 12 16V8Z"
-        fill="currentColor"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16V20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5V8Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
diff --git a/components/icons/arrow-down.tsx b/components/icons/arrow-down.tsx
deleted file mode 100644
index 6b6f474..0000000
--- a/components/icons/arrow-down.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { SVGProps } from "react";
-
-export const ArrowDownIcon = (props: SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      aria-hidden="true"
-      width="24px"
-      height="24px"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g>
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M12 21C11.6685 21 11.3506 20.8683 11.1161 20.6339L5.36612 14.8839C4.87796 14.3957 4.87796 13.6043 5.36612 13.1161C5.85427 12.628 6.64573 12.628 7.13388 13.1161L10.75 16.7322V4.25C10.75 3.55964 11.3097 3 12 3C12.6904 3 13.25 3.55964 13.25 4.25V16.7322L16.8661 13.1161C17.3543 12.628 18.1457 12.628 18.6339 13.1161C19.122 13.6043 19.122 14.3957 18.6339 14.8839L12.8839 20.6339C12.6495 20.8683 12.3315 21 12 21Z"
-          fill="currentColor"
-        />
-      </g>
-    </svg>
-  );
-};
diff --git a/components/icons/arrow-triangle-right.tsx b/components/icons/arrow-triangle-right.tsx
deleted file mode 100644
index 862b8ed..0000000
--- a/components/icons/arrow-triangle-right.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { SVGProps } from "react";
-
-export const ArrowTriangleRightIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    aria-hidden="true"
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g>
-      <path
-        d="M7.97419 4.29233C6.14866 3.37989 4 4.70668 4 6.74799V17.2519C4 19.2932 6.14866 20.62 7.97419 19.7076L18.4819 14.4556C20.5061 13.4439 20.506 10.556 18.4819 9.54431L7.97419 4.29233Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
diff --git a/components/icons/arrow-up.tsx b/components/icons/arrow-up.tsx
deleted file mode 100644
index 53536ba..0000000
--- a/components/icons/arrow-up.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { SVGProps } from "react";
-
-export function ArrowUpIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      aria-hidden="true"
-      width="24px"
-      height="24px"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g>
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M12 3C12.3315 3 12.6494 3.1317 12.8839 3.36612L18.6339 9.11612C19.122 9.60427 19.122 10.3957 18.6339 10.8839C18.1457 11.372 17.3543 11.372 16.8661 10.8839L13.25 7.26776V19.75C13.25 20.4404 12.6903 21 12 21C11.3096 21 10.75 20.4404 10.75 19.75V7.26777L7.13388 10.8839C6.64573 11.372 5.85427 11.372 5.36612 10.8839C4.87796 10.3957 4.87796 9.60427 5.36612 9.11612L11.1161 3.36612C11.3505 3.1317 11.6685 3 12 3Z"
-          fill="currentColor"
-        />
-      </g>
-    </svg>
-  );
-}
diff --git a/components/icons/arrows-all-sides-2.tsx b/components/icons/arrows-all-sides-2.tsx
deleted file mode 100644
index 7ddc64d..0000000
--- a/components/icons/arrows-all-sides-2.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import type { SVGProps } from "react";
-
-export const ArrowsAllSides2Icon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    aria-hidden="true"
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g>
-      <path
-        d="M3.75 15C4.16421 15 4.5 15.3358 4.5 15.75V18.25C4.5 18.9404 5.05964 19.5 5.75 19.5H8.25C8.66421 19.5 9 19.8358 9 20.25C9 20.6642 8.66421 21 8.25 21H5.75C4.23122 21 3 19.7688 3 18.25V15.75C3 15.3358 3.33579 15 3.75 15Z"
-        fill="currentColor"
-      />
-      <path
-        d="M20.25 15C20.6642 15 21 15.3358 21 15.75V18.25C21 19.7688 19.7688 21 18.25 21H15.75C15.3358 21 15 20.6642 15 20.25C15 19.8358 15.3358 19.5 15.75 19.5H18.25C18.9404 19.5 19.5 18.9404 19.5 18.25V15.75C19.5 15.3358 19.8358 15 20.25 15Z"
-        fill="currentColor"
-      />
-      <path
-        d="M13.25 13.5C13.6642 13.5 14 13.8358 14 14.25C14 14.6642 13.6642 15 13.25 15H8.75C8.33579 15 8 14.6642 8 14.25C8 13.8358 8.33579 13.5 8.75 13.5H13.25Z"
-        fill="currentColor"
-      />
-      <path
-        d="M15.25 9C15.6642 9 16 9.33579 16 9.75C16 10.1642 15.6642 10.5 15.25 10.5H8.75C8.33579 10.5 8 10.1642 8 9.75C8 9.33579 8.33579 9 8.75 9H15.25Z"
-        fill="currentColor"
-      />
-      <path
-        d="M8.25 3C8.66421 3 9 3.33579 9 3.75C9 4.16421 8.66421 4.5 8.25 4.5H5.75C5.05964 4.5 4.5 5.05964 4.5 5.75V8.25C4.5 8.66421 4.16421 9 3.75 9C3.33579 9 3 8.66421 3 8.25V5.75C3 4.23122 4.23122 3 5.75 3H8.25Z"
-        fill="currentColor"
-      />
-      <path
-        d="M18.25 3C19.7688 3 21 4.23122 21 5.75V8.25C21 8.66421 20.6642 9 20.25 9C19.8358 9 19.5 8.66421 19.5 8.25V5.75C19.5 5.05964 18.9404 4.5 18.25 4.5H15.75C15.3358 4.5 15 4.16421 15 3.75C15 3.33579 15.3358 3 15.75 3H18.25Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
diff --git a/components/icons/book.tsx b/components/icons/book.tsx
deleted file mode 100644
index e065071..0000000
--- a/components/icons/book.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { SVGProps } from "react";
-
-export const BookIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    aria-hidden="true"
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M6.75 2C5.23122 2 4 3.23122 4 4.75V19.25C4 20.7688 5.23122 22 6.75 22H17.25C18.7688 22 20 20.7688 20 19.25V4.75C20 3.23122 18.7688 2 17.25 2H6.75ZM5.5 19V19.25C5.5 19.9404 6.05964 20.5 6.75 20.5H17.25C17.9404 20.5 18.5 19.9404 18.5 19.25V17.2001C18.125 17.3919 17.7001 17.5 17.25 17.5H7C6.17157 17.5 5.5 18.1716 5.5 19ZM8.75 6.25C8.33579 6.25 8 6.58579 8 7C8 7.41421 8.33579 7.75 8.75 7.75H15.25C15.6642 7.75 16 7.41421 16 7C16 6.58579 15.6642 6.25 15.25 6.25H8.75ZM8 11C8 10.5858 8.33579 10.25 8.75 10.25H12.25C12.6642 10.25 13 10.5858 13 11C13 11.4142 12.6642 11.75 12.25 11.75H8.75C8.33579 11.75 8 11.4142 8 11Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
diff --git a/components/icons/brain.tsx b/components/icons/brain.tsx
deleted file mode 100644
index 206110e..0000000
--- a/components/icons/brain.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import type { SVGProps } from "react";
-
-export const BrainIcon = (props: SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      aria-hidden="true"
-      width="24px"
-      height="24px"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g>
-        <path
-          d="M5.95106 4.60361L7.71846 3.49898C8.47729 3.02472 9.40821 2.91395 10.2571 3.19693L11.0513 3.46166C11.6671 3.66692 12.3329 3.66692 12.9487 3.46166L13.7429 3.19693C14.5918 2.91396 15.5227 3.02472 16.2815 3.49898L18.0489 4.60361C18.7615 5.04899 19.1944 5.83005 19.1944 6.67038C19.1944 7.43752 19.5556 8.15988 20.1693 8.62016L20.2222 8.65983C20.8692 9.14508 21.25 9.90663 21.25 10.7154V12.2571C21.25 13.0658 20.8692 13.8274 20.2222 14.3126C19.5752 14.7979 19.1944 15.5594 19.1944 16.3682V17.0179C19.1944 18.0523 18.6616 19.0137 17.7844 19.5619L16.2815 20.5012C15.5227 20.9755 14.5918 21.0863 13.7429 20.8033L12.9487 20.5386C12.3329 20.3333 11.6671 20.3333 11.0513 20.5386L10.2571 20.8033C9.40822 21.0863 8.47729 20.9755 7.71846 20.5012L6.21556 19.5619C5.33841 19.0137 4.80556 18.0523 4.80556 17.0179V16.3682C4.80556 15.5594 4.42478 14.7979 3.77778 14.3126C3.13078 13.8274 2.75 13.0658 2.75 12.2571V10.7154C2.75 9.90663 3.13078 9.14508 3.77778 8.65983L3.83066 8.62016C4.44437 8.15988 4.80556 7.43752 4.80556 6.67038C4.80556 5.83005 5.23846 5.04899 5.95106 4.60361Z"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M12 4V6.75736C12 7.55301 12.3161 8.31607 12.8787 8.87868L15 11"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M12 20V17.2426C12 16.447 11.6839 15.6839 11.1213 15.1213L9 13"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <circle
-          cx="9"
-          cy="13"
-          r="1"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <circle
-          cx="15"
-          cy="11"
-          r="1"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </g>
-    </svg>
-  );
-};
diff --git a/components/icons/bubble-5.tsx b/components/icons/bubble-5.tsx
deleted file mode 100644
index 67052f8..0000000
--- a/components/icons/bubble-5.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { SVGProps } from "react";
-
-export const Bubble5Icon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    aria-hidden="true"
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M19.591 5.36647C17.7271 3.80507 15.1014 3 12 3C8.89859 3 6.27295 3.80507 4.40901 5.36647C2.52909 6.94126 1.5 9.22327 1.5 12C1.5 12.7949 1.76422 13.7934 2.01376 14.5754C2.27092 15.3813 2.54585 16.0568 2.62186 16.2398L2.63378 16.2682L2.64194 16.2874C2.64623 16.2977 2.64763 16.3014 2.64763 16.3014C2.6656 16.3505 3.09393 17.5191 1.65131 19.431C1.51559 19.6109 1.46793 19.8423 1.52151 20.0611C1.57509 20.28 1.72422 20.4632 1.92768 20.56C3.26057 21.1944 4.60162 20.9739 5.54319 20.6457C6.02 20.4795 6.41781 20.2781 6.69679 20.1185C6.72083 20.1047 6.74403 20.0912 6.76639 20.0781C8.42958 20.8376 10.3067 21 12 21C15.1014 21 17.7271 20.1949 19.591 18.6335C21.4709 17.0587 22.5 14.7767 22.5 12C22.5 9.22327 21.4709 6.94126 19.591 5.36647Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
diff --git a/components/icons/bubble-wide-sparkle.tsx b/components/icons/bubble-wide-sparkle.tsx
deleted file mode 100644
index 867a528..0000000
--- a/components/icons/bubble-wide-sparkle.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { SVGProps } from "react";
-
-export const BubbleWideSparkleIcon = (props: SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      aria-hidden="true"
-      width="24px"
-      height="24px"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g>
-        <path
-          d="M12.75 3.75H5.75C4.09315 3.75 2.75 5.09315 2.75 6.75V15.25C2.75 16.9069 4.09315 18.25 5.75 18.25H8.65182C8.88675 18.25 9.11418 18.3327 9.29422 18.4836L11.3593 20.2147C11.7292 20.5248 12.2679 20.5263 12.6397 20.2183L14.738 18.4799C14.9173 18.3313 15.143 18.25 15.3759 18.25H18.25C19.9069 18.25 21.25 16.9069 21.25 15.25V12.25"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M20.2405 4.18518L19.5436 2.37334C19.4571 2.14842 19.241 2 19 2C18.759 2 18.5429 2.14842 18.4564 2.37334L17.7595 4.18518C17.658 4.44927 17.4493 4.65797 17.1852 4.75955L15.3733 5.45641C15.1484 5.54292 15 5.75901 15 6C15 6.24099 15.1484 6.45708 15.3733 6.54359L17.1852 7.24045C17.4493 7.34203 17.658 7.55073 17.7595 7.81482L18.4564 9.62666C18.5429 9.85158 18.759 10 19 10C19.241 10 19.4571 9.85158 19.5436 9.62666L20.2405 7.81482C20.342 7.55073 20.5507 7.34203 20.8148 7.24045L22.6267 6.54359C22.8516 6.45708 23 6.24099 23 6C23 5.75901 22.8516 5.54292 22.6267 5.45641L20.8148 4.75955C20.5507 4.65797 20.342 4.44927 20.2405 4.18518Z"
-          fill="currentColor"
-        />
-      </g>
-    </svg>
-  );
-};
diff --git a/components/icons/bug.tsx b/components/icons/bug.tsx
deleted file mode 100644
index c9a1bfd..0000000
--- a/components/icons/bug.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { SVGProps } from "react";
-
-export const BugIcon = (props: SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      aria-hidden="false"
-      role="img"
-      aria-label="bug, issue"
-      width="24px"
-      height="24px"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M17 7.43252V7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7V7.43252C6.32304 7.79037 5.76881 8.34935 5.41689 9.02989L3.24152 8.28995C2.84937 8.15656 2.42334 8.36633 2.28995 8.75848C2.15656 9.15063 2.36633 9.57666 2.75848 9.71005L5.00987 10.4758C5.00333 10.5664 5 10.6578 5 10.75V13H2.75C2.33579 13 2 13.3358 2 13.75C2 14.1642 2.33579 14.5 2.75 14.5H5V15C5 15.5902 5.07304 16.1633 5.21058 16.7109C5.18325 16.7169 5.15596 16.7245 5.12884 16.7337L2.75848 17.54C2.36633 17.6733 2.15656 18.0994 2.28995 18.4915C2.42334 18.8837 2.84937 19.0934 3.24152 18.96L5.61188 18.1538C5.65135 18.1404 5.68896 18.124 5.72457 18.1049C6.76343 20.2006 8.82112 21.7016 11.25 21.9603V13.75C11.25 13.3358 11.5858 13 12 13C12.4142 13 12.75 13.3358 12.75 13.75V21.9603C15.1789 21.7016 17.2367 20.2005 18.2755 18.1048C18.3112 18.1239 18.3489 18.1403 18.3884 18.1538L20.7584 18.96C21.1506 19.0934 21.5766 18.8837 21.71 18.4916C21.8434 18.0994 21.6337 17.6734 21.2416 17.54L18.8716 16.7337C18.8443 16.7244 18.8169 16.7168 18.7894 16.7108C18.927 16.1633 19 15.5902 19 15V14.5H21.2504C21.6646 14.5 22.0004 14.1642 22.0004 13.75C22.0004 13.3358 21.6646 13 21.2504 13H19V10.75C19 10.6578 18.9967 10.5665 18.9901 10.476L21.2416 9.71004C21.6337 9.57663 21.8434 9.15059 21.71 8.75845C21.5766 8.36631 21.1506 8.15656 20.7584 8.28996L18.5832 9.02999C18.2312 8.3494 17.677 7.79038 17 7.43252ZM12 3.5C10.067 3.5 8.5 5.067 8.5 7V7.0082C8.58263 7.00276 8.66599 7 8.75 7H15.25C15.334 7 15.4174 7.00276 15.5 7.0082V7C15.5 5.067 13.933 3.5 12 3.5Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-};
diff --git a/components/icons/chain-link.tsx b/components/icons/chain-link.tsx
deleted file mode 100644
index ccbc12c..0000000
--- a/components/icons/chain-link.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { SVGProps } from "react";
-
-export const ChainLinkIcon = (props: SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      aria-hidden="true"
-      width="24px"
-      height="24px"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g>
-        <path
-          d="M10 19.0004L9.82843 19.1719C8.26634 20.734 5.73368 20.734 4.17158 19.1719L3.82843 18.8288C2.26634 17.2667 2.26633 14.734 3.82843 13.1719L7.17158 9.8288C8.73368 8.2667 11.2663 8.2667 12.8284 9.8288L13.1716 10.1719C13.8252 10.8256 14.2053 11.6491 14.312 12.5004"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M9.68799 12.5004C9.79463 13.3516 10.1748 14.1752 10.8284 14.8288L11.1715 15.1719C12.7336 16.734 15.2663 16.734 16.8284 15.1719L20.1715 11.8288C21.7336 10.2667 21.7336 7.73404 20.1715 6.17194L19.8284 5.8288C18.2663 4.2667 15.7336 4.2667 14.1715 5.8288L14 6.00037"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </g>
-    </svg>
-  );
-};
diff --git a/components/icons/check-mark-medium.tsx b/components/icons/check-mark-medium.tsx
deleted file mode 100644
index 9a1e335..0000000
--- a/components/icons/check-mark-medium.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { SVGProps } from "react";
-
-export const CheckMarkMediumIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    aria-hidden="true"
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g>
-      <path
-        d="M6 14.15L10.0321 18L18 7"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </g>
-  </svg>
-);
diff --git a/components/icons/check.tsx b/components/icons/check.tsx
deleted file mode 100644
index 4e83252..0000000
--- a/components/icons/check.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { SVGProps } from "react";
-
-export function CheckIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      aria-hidden="true"
-      width="24px"
-      height="24px"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g>
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M17.7406 7.1827C18.0539 7.45363 18.0882 7.92725 17.8173 8.24057L10.4673 16.7406C10.3305 16.8988 10.1339 16.9926 9.92494 16.9996C9.71594 17.0066 9.51353 16.9259 9.36654 16.7772L6.21654 13.5897C5.92539 13.2951 5.9282 12.8202 6.22282 12.5291C6.51744 12.2379 6.9923 12.2407 7.28346 12.5353L9.86327 15.1458L16.6827 7.25945C16.9536 6.94613 17.4272 6.91177 17.7406 7.1827Z"
-          fill="currentColor"
-        />
-      </g>
-    </svg>
-  );
-}
diff --git a/components/icons/chevron-down-medium.tsx b/components/icons/chevron-down-medium.tsx
deleted file mode 100644
index 3d211c3..0000000
--- a/components/icons/chevron-down-medium.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { SVGProps } from "react";
-
-export const ChevronDownMediumIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    aria-hidden="true"
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g>
-      <path
-        d="M17.7197 8.96967C18.0126 8.67678 18.4873 8.67678 18.7802 8.96967C19.0731 9.26256 19.0731 9.73732 18.7802 10.0302L12.5302 16.2802C12.2373 16.5731 11.7626 16.5731 11.4697 16.2802L5.21967 10.0302C4.92678 9.73732 4.92678 9.26256 5.21967 8.96967C5.51256 8.67678 5.98732 8.67678 6.28022 8.96967L11.9999 14.6894L17.7197 8.96967Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
diff --git a/components/icons/chevron-down.tsx b/components/icons/chevron-down.tsx
deleted file mode 100644
index 4f9f0d9..0000000
--- a/components/icons/chevron-down.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { SVGProps } from "react";
-
-export const ChevronDownIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    aria-hidden="true"
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M12.1768 12.7625C12.0791 12.8601 11.9209 12.8601 11.8232 12.7625L8.53033 9.46958C8.23744 9.17668 7.76256 9.17668 7.46967 9.46958C7.17678 9.76247 7.17678 10.2373 7.46967 10.5302L10.7626 13.8231C11.446 14.5065 12.554 14.5065 13.2374 13.8231L16.5303 10.5302C16.8232 10.2373 16.8232 9.76247 16.5303 9.46958C16.2374 9.17668 15.7626 9.17668 15.4697 9.46958L12.1768 12.7625Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
diff --git a/components/icons/chevron-grabber-vertical.tsx b/components/icons/chevron-grabber-vertical.tsx
deleted file mode 100644
index 165bc59..0000000
--- a/components/icons/chevron-grabber-vertical.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { SVGProps } from "react";
-
-export const ChevronGrabberVerticalIcon = (props: SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      aria-hidden="true"
-      width="24px"
-      height="24px"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g>
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M12.1768 6.23729C12.0791 6.13965 11.9209 6.13965 11.8232 6.23729L8.53033 9.53018C8.23744 9.82307 7.76256 9.82307 7.46967 9.53018C7.17678 9.23729 7.17678 8.76241 7.46967 8.46952L10.7626 5.17663L11.2929 5.70696L10.7626 5.17663C11.446 4.49321 12.554 4.49321 13.2374 5.17663L16.5303 8.46952C16.8232 8.76241 16.8232 9.23729 16.5303 9.53018C16.2374 9.82307 15.7626 9.82307 15.4697 9.53018L12.1768 6.23729ZM7.46967 14.4695C7.76256 14.1766 8.23744 14.1766 8.53033 14.4695L11.8232 17.7624C11.9209 17.86 12.0791 17.86 12.1768 17.7624L15.4697 14.4695C15.7626 14.1766 16.2374 14.1766 16.5303 14.4695C16.8232 14.7624 16.8232 15.2373 16.5303 15.5302L13.2374 18.8231C12.554 19.5065 11.446 19.5065 10.7626 18.8231L7.46967 15.5302C7.17678 15.2373 7.17678 14.7624 7.46967 14.4695Z"
-          fill="currentColor"
-        />
-      </g>
-    </svg>
-  );
-};
diff --git a/components/icons/chevron-left-medium.tsx b/components/icons/chevron-left-medium.tsx
deleted file mode 100644
index 51f59e9..0000000
--- a/components/icons/chevron-left-medium.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { SVGProps } from "react";
-
-export const ChevronLeftMediumIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    aria-hidden="true"
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g>
-      <path
-        d="M13.9697 5.21967C14.2626 4.92678 14.7373 4.92678 15.0302 5.21967C15.3231 5.51256 15.3231 5.98732 15.0302 6.28022L9.31049 11.9999L15.0302 17.7197C15.3231 18.0126 15.3231 18.4873 15.0302 18.7802C14.7373 19.0731 14.2626 19.0731 13.9697 18.7802L7.71967 12.5302C7.42678 12.2373 7.42678 11.7626 7.71967 11.4697L13.9697 5.21967Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
diff --git a/components/icons/chevron-right-medium.tsx b/components/icons/chevron-right-medium.tsx
deleted file mode 100644
index 8d1b2c7..0000000
--- a/components/icons/chevron-right-medium.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { SVGProps } from "react";
-
-export const ChevronRightMediumIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    aria-hidden="true"
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g>
-      <path
-        d="M8.96967 5.21967C9.26256 4.92678 9.73732 4.92678 10.0302 5.21967L16.2802 11.4697C16.5731 11.7626 16.5731 12.2373 16.2802 12.5302L10.0302 18.7802C9.73732 19.0731 9.26256 19.0731 8.96967 18.7802C8.67678 18.4873 8.67678 18.0126 8.96967 17.7197L14.6894 11.9999L8.96967 6.28022C8.67678 5.98732 8.67678 5.51256 8.96967 5.21967Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
diff --git a/components/icons/chevron-top-medium.tsx b/components/icons/chevron-top-medium.tsx
deleted file mode 100644
index 521270b..0000000
--- a/components/icons/chevron-top-medium.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { SVGProps } from "react";
-
-export const ChevronTopMediumIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    aria-hidden="true"
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g>
-      <path
-        d="M11.5263 7.66809C11.8209 7.42778 12.2556 7.44524 12.5302 7.71984L18.7802 13.9698C19.0731 14.2627 19.0731 14.7375 18.7802 15.0304C18.4873 15.3233 18.0126 15.3233 17.7197 15.0304L11.9999 9.31066L6.28022 15.0304C5.98732 15.3233 5.51256 15.3233 5.21967 15.0304C4.92678 14.7375 4.92678 14.2627 5.21967 13.9698L11.4697 7.71984L11.5263 7.66809Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
diff --git a/components/icons/circle-questionmark.tsx b/components/icons/circle-questionmark.tsx
deleted file mode 100644
index 0ffdab7..0000000
--- a/components/icons/circle-questionmark.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { SVGProps } from "react";
-
-export const CircleQuestionmarkIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    aria-hidden="true"
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM11.25 8.5C10.8358 8.5 10.5 8.83579 10.5 9.25C10.5 9.66421 10.1642 10 9.75 10C9.33579 10 9 9.66421 9 9.25C9 8.00736 10.0074 7 11.25 7H12.4587C13.8622 7 15 8.13779 15 9.54132C15 10.391 14.5753 11.1845 13.8684 11.6558L13.3066 12.0303C12.9589 12.2621 12.75 12.6524 12.75 13.0704V13.25C12.75 13.6642 12.4142 14 12 14C11.5858 14 11.25 13.6642 11.25 13.25V13.0704C11.25 12.1509 11.7095 11.2923 12.4746 10.7822L13.0363 10.4077C13.326 10.2146 13.5 9.88948 13.5 9.54132C13.5 8.96621 13.0338 8.5 12.4587 8.5H11.25ZM12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
diff --git a/components/icons/circle.tsx b/components/icons/circle.tsx
deleted file mode 100644
index 844e089..0000000
--- a/components/icons/circle.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { ComponentProps } from "react";
-
-export const CircleIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    aria-hidden="true"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <circle cx="12" cy="12" r="10" fill="currentColor" />
-  </svg>
-);
diff --git a/components/icons/code.tsx b/components/icons/code.tsx
deleted file mode 100644
index 6fd2a72..0000000
--- a/components/icons/code.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { SVGProps } from "react";
-
-export const CodeIcon = (props: SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      aria-hidden="true"
-      width="24px"
-      height="24px"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g>
-        <path
-          d="M10.25 9L7.95711 11.2929C7.56658 11.6834 7.56658 12.3166 7.95711 12.7071L10.25 15M13.75 9L16.0429 11.2929C16.4334 11.6834 16.4334 12.3166 16.0429 12.7071L13.75 15M6.75 20.25H17.25C18.9069 20.25 20.25 18.9069 20.25 17.25V6.75C20.25 5.09315 18.9069 3.75 17.25 3.75H6.75C5.09315 3.75 3.75 5.09315 3.75 6.75V17.25C3.75 18.9069 5.09315 20.25 6.75 20.25Z"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </g>
-    </svg>
-  );
-};
diff --git a/components/icons/color-swatch.tsx b/components/icons/color-swatch.tsx
deleted file mode 100644
index 9b2e947..0000000
--- a/components/icons/color-swatch.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { SVGProps } from "react";
-
-export const ColorSwatchIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    aria-hidden="true"
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M4.75 2C3.23122 2 2 3.23122 2 4.75V16.5C2 19.5376 4.46243 22 7.5 22C8.53234 22 9.49824 21.7156 10.3236 21.2208L20.4262 15.3881C21.7415 14.6288 22.1921 12.9469 21.4327 11.6316L18.6827 6.86843C18.4923 6.53859 18.2427 6.26199 17.9548 6.04551C17.7383 5.75761 17.4617 5.50806 17.1319 5.31764L12.3688 2.56764C12.0388 2.37714 11.6842 2.26238 11.3265 2.2189C10.9951 2.07782 10.6308 2 10.25 2H4.75ZM19.6762 14.0891L13.0266 17.9282L18.1385 9.07421C18.1529 9.04916 18.167 9.02397 18.1806 8.99866L20.1337 12.3816C20.4789 12.9794 20.274 13.7439 19.6762 14.0891ZM16.8394 8.32421L13 14.9743V4.75C13 4.72101 12.9996 4.69213 12.9987 4.66336L16.3819 6.61668C16.5539 6.71601 16.692 6.84858 16.7944 7.00114C17.0529 7.38632 17.0854 7.89817 16.8394 8.32421ZM7.5 18.25C8.4665 18.25 9.25 17.4665 9.25 16.5C9.25 15.5335 8.4665 14.75 7.5 14.75C6.5335 14.75 5.75 15.5335 5.75 16.5C5.75 17.4665 6.5335 18.25 7.5 18.25Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
diff --git a/components/icons/copy.tsx b/components/icons/copy.tsx
deleted file mode 100644
index 5439ad7..0000000
--- a/components/icons/copy.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { SVGProps } from "react";
-
-export const CopyIcon = (props: SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      aria-hidden="true"
-      width="24px"
-      height="24px"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g>
-        <path
-          d="M7.75 7.75V5.75C7.75 4.64543 8.64543 3.75 9.75 3.75H18.25C19.3546 3.75 20.25 4.64543 20.25 5.75V14.26C20.25 15.3646 19.3546 16.26 18.25 16.26H16.25M3.75 9.75V18.25C3.75 19.3546 4.64543 20.25 5.75 20.25H14.25C15.3546 20.25 16.25 19.3546 16.25 18.25V9.75C16.25 8.64543 15.3546 7.75 14.25 7.75H5.75C4.64543 7.75 3.75 8.64543 3.75 9.75Z"
-          stroke="currentColor"
-          strokeWidth="1.75"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </g>
-    </svg>
-  );
-};
diff --git a/components/icons/cross-medium.tsx b/components/icons/cross-medium.tsx
deleted file mode 100644
index fdef40f..0000000
--- a/components/icons/cross-medium.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { SVGProps } from "react";
-
-export const CrossMediumIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    aria-hidden="true"
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g>
-      <path
-        d="M17.2197 5.71967C17.5126 5.42678 17.9873 5.42678 18.2802 5.71967C18.5731 6.01256 18.5731 6.48732 18.2802 6.78022L13.0605 11.9999L18.2802 17.2197C18.5731 17.5126 18.5731 17.9873 18.2802 18.2802C17.9873 18.5731 17.5126 18.5731 17.2197 18.2802L11.9999 13.0605L6.78022 18.2802C6.48732 18.5731 6.01256 18.5731 5.71967 18.2802C5.42678 17.9873 5.42678 17.5126 5.71967 17.2197L10.9394 11.9999L5.71967 6.78022C5.42678 6.48732 5.42678 6.01256 5.71967 5.71967C6.01256 5.42678 6.48732 5.42678 6.78022 5.71967L11.9999 10.9394L17.2197 5.71967Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
diff --git a/components/icons/dot-grid-1x3-horizontal-tight.tsx b/components/icons/dot-grid-1x3-horizontal-tight.tsx
deleted file mode 100644
index 4eb4aef..0000000
--- a/components/icons/dot-grid-1x3-horizontal-tight.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { SVGProps } from "react";
-
-export const DotGrid1x3HorizontalTightIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    aria-hidden="true"
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <rect x="3" y="10" width="4" height="4" rx="2" fill="currentColor" />
-    <rect x="10" y="10" width="4" height="4" rx="2" fill="currentColor" />
-    <rect x="17" y="10" width="4" height="4" rx="2" fill="currentColor" />
-  </svg>
-);
diff --git a/components/icons/dot-grid-1x3-vertical-tight.tsx b/components/icons/dot-grid-1x3-vertical-tight.tsx
deleted file mode 100644
index 8829c37..0000000
--- a/components/icons/dot-grid-1x3-vertical-tight.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { SVGProps } from "react";
-
-export const DotGrid1x3VerticalTightIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    aria-hidden="true"
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <rect x="10" y="3" width="4" height="4" rx="2" fill="currentColor" />
-    <rect x="10" y="10" width="4" height="4" rx="2" fill="currentColor" />
-    <rect x="10" y="17" width="4" height="4" rx="2" fill="currentColor" />
-  </svg>
-);
diff --git a/components/icons/edit.tsx b/components/icons/edit.tsx
deleted file mode 100644
index a4e8b7c..0000000
--- a/components/icons/edit.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { SVGProps } from "react";
-
-export const EditIcon = (props: SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      aria-hidden="true"
-      width="24px"
-      height="24px"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g>
-        <path
-          d="M11 4H8.8C7.11984 4 6.27976 4 5.63803 4.32698C5.07354 4.6146 4.6146 5.07354 4.32698 5.63803C4 6.27976 4 7.11984 4 8.8V15.2C4 16.8802 4 17.7202 4.32698 18.362C4.6146 18.9265 5.07354 19.3854 5.63803 19.673C6.27976 20 7.11984 20 8.8 20H15.2C16.8802 20 17.7202 20 18.362 19.673C18.9265 19.3854 19.3854 18.9265 19.673 18.362C20 17.7202 20 16.8802 20 15.2V13"
-          stroke="currentColor"
-          strokeWidth="1.75"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        ></path>
-        <path
-          d="M9 15V12.4142C9 12.149 9.10536 11.8946 9.29289 11.7071L17.25 3.74998C18.0784 2.92156 19.4216 2.92156 20.25 3.74998C21.0784 4.57841 21.0784 5.92155 20.25 6.74998L12.2929 14.7071C12.1054 14.8946 11.851 15 11.5858 15H9Z"
-          stroke="currentColor"
-          strokeWidth="1.75"
-          strokeLinecap="square"
-          strokeLinejoin="round"
-        ></path>
-      </g>
-    </svg>
-  );
-};
diff --git a/components/icons/exclamation-triangle.tsx b/components/icons/exclamation-triangle.tsx
deleted file mode 100644
index 334d12d..0000000
--- a/components/icons/exclamation-triangle.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { SVGProps } from "react";
-
-export const ExclamationTriangleIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    aria-hidden="true"
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M9.63618 3.25763C10.7021 1.46491 13.2977 1.4649 14.3636 3.25763L21.8476 15.8443C22.9376 17.6774 21.6165 19.9998 19.4839 19.9998H4.51593C2.38326 19.9998 1.06225 17.6774 2.15221 15.8443L9.63618 3.25763ZM12 7.99976C12.4142 7.99976 12.75 8.33554 12.75 8.74976V12.7498C12.75 13.164 12.4142 13.4998 12 13.4998C11.5858 13.4998 11.25 13.164 11.25 12.7498V8.74976C11.25 8.33554 11.5858 7.99976 12 7.99976ZM13 15.4998C13 16.052 12.5523 16.4998 12 16.4998C11.4477 16.4998 11 16.052 11 15.4998C11 14.9475 11.4477 14.4998 12 14.4998C12.5523 14.4998 13 14.9475 13 15.4998Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
diff --git a/components/icons/eyedropper.tsx b/components/icons/eyedropper.tsx
deleted file mode 100644
index 68c0a89..0000000
--- a/components/icons/eyedropper.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { SVGProps } from "react";
-
-export const EyedropperIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    aria-hidden="true"
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g>
-      <path
-        d="M14.958 13.7498L9.78807 18.9197C9.44106 19.2667 9.00729 19.5146 8.53221 19.6375L7.11326 20.0047C6.75046 20.0985 6.41895 20.2882 6.15428 20.5535C5.40675 21.3009 4.19476 21.3009 3.44725 20.5535C2.69988 19.806 2.69987 18.594 3.44725 17.8465C3.71059 17.5825 3.89936 17.2533 3.99314 16.8924L4.36228 15.4676C4.48543 14.9934 4.73362 14.5601 5.08006 14.2137L10.251 9.04276L14.958 13.7498Z"
-        fill="currentColor"
-      />
-      <path
-        d="M15.7969 3.73124C17.0554 2.65253 18.9323 2.72427 20.1045 3.89628C21.2766 5.06844 21.3482 6.94527 20.2695 8.2039L19.622 8.95976C19.2215 9.42723 19.001 10.0229 19.001 10.6385V10.8787C19.0008 11.409 18.79 11.9178 18.415 12.2928C17.634 13.0735 16.3679 13.0735 15.5869 12.2928L11.708 8.41386C10.9271 7.63288 10.9272 6.36678 11.708 5.58573C12.083 5.21073 12.5917 4.99988 13.1221 4.99979H13.3623C13.9783 4.99979 14.5743 4.77873 15.042 4.37772L15.7969 3.73124Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
diff --git a/components/icons/file-bend.tsx b/components/icons/file-bend.tsx
deleted file mode 100644
index 884479b..0000000
--- a/components/icons/file-bend.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { SVGProps } from "react";
-
-export const FileBendIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    aria-hidden="true"
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g>
-      <path
-        d="M12 2H6.75C5.23122 2 4 3.23122 4 4.75V19.25C4 20.7688 5.23122 22 6.75 22H17.25C18.7688 22 20 20.7688 20 19.25V10H14.75C13.2312 10 12 8.76878 12 7.25V2Z"
-        fill="currentColor"
-      />
-      <path
-        d="M19.5566 8.49993C19.5343 8.47493 19.5112 8.45051 19.4874 8.4267L13.5732 2.51249C13.5494 2.48868 13.525 2.46564 13.5 2.44336V7.24993C13.5 7.94028 14.0596 8.49993 14.75 8.49993H19.5566Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
diff --git a/components/icons/file-chart.tsx b/components/icons/file-chart.tsx
deleted file mode 100644
index 4db3623..0000000
--- a/components/icons/file-chart.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { SVGProps } from "react";
-
-export const FileChartIcon = (props: SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      aria-hidden="true"
-      width="24px"
-      height="24px"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g>
-        <path
-          d="M11.9216 2.75H7.75C6.09315 2.75 4.75 4.09315 4.75 5.75V18.25C4.75 19.9069 6.09315 21.25 7.75 21.25H16.25C17.9069 21.25 19.25 19.9069 19.25 18.25V10.0784C19.25 9.54799 19.0393 9.03929 18.6642 8.66421L13.3358 3.33579C12.9607 2.96071 12.452 2.75 11.9216 2.75Z"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-        />
-        <path
-          d="M12.75 3.25V7.25C12.75 8.35457 13.6454 9.25 14.75 9.25H18.75"
-          stroke="currentColor"
-          strokeWidth="1.5"
-        />
-        <path d="M8.5 17.25V15.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-        <path d="M12 17.25V12.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-        <path d="M15.5 17.25V14.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-      </g>
-    </svg>
-  );
-};
diff --git a/components/icons/file-text.tsx b/components/icons/file-text.tsx
deleted file mode 100644
index 237ed21..0000000
--- a/components/icons/file-text.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { SVGProps } from "react";
-
-export const FileTextIcon = (props: SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      aria-hidden="true"
-      width="24px"
-      height="24px"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g>
-        <path
-          d="M11.9216 2.75H7.75C6.09315 2.75 4.75 4.09315 4.75 5.75V18.25C4.75 19.9069 6.09315 21.25 7.75 21.25H16.25C17.9069 21.25 19.25 19.9069 19.25 18.25V10.0784C19.25 9.54799 19.0393 9.03929 18.6642 8.66421L13.3358 3.33579C12.9607 2.96071 12.452 2.75 11.9216 2.75Z"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-        />
-        <path
-          d="M12.75 3.25V7.25C12.75 8.35457 13.6454 9.25 14.75 9.25H18.75"
-          stroke="currentColor"
-          strokeWidth="1.5"
-        />
-        <path d="M8.75 13.25H12.25" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-        <path d="M8.75 17.25H15.25" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-      </g>
-    </svg>
-  );
-};
diff --git a/components/icons/github.tsx b/components/icons/github.tsx
deleted file mode 100644
index 1c4e6f0..0000000
--- a/components/icons/github.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { SVGProps } from "react";
-
-export const GitHubIcon = (props: SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      aria-hidden="false"
-      role="img"
-      aria-label="github"
-      width="24px"
-      height="24px"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M12 1.95068C17.525 1.95068 22 6.42568 22 11.9507C21.9995 14.0459 21.3419 16.0883 20.1198 17.7902C18.8977 19.4922 17.1727 20.768 15.1875 21.4382C14.6875 21.5382 14.5 21.2257 14.5 20.9632C14.5 20.6257 14.5125 19.5507 14.5125 18.2132C14.5125 17.2757 14.2 16.6757 13.8375 16.3632C16.0625 16.1132 18.4 15.2632 18.4 11.4257C18.4 10.3257 18.0125 9.43818 17.375 8.73818C17.475 8.48818 17.825 7.46318 17.275 6.08818C17.275 6.08818 16.4375 5.81318 14.525 7.11318C13.725 6.88818 12.875 6.77568 12.025 6.77568C11.175 6.77568 10.325 6.88818 9.525 7.11318C7.6125 5.82568 6.775 6.08818 6.775 6.08818C6.225 7.46318 6.575 8.48818 6.675 8.73818C6.0375 9.43818 5.65 10.3382 5.65 11.4257C5.65 15.2507 7.975 16.1132 10.2 16.3632C9.9125 16.6132 9.65 17.0507 9.5625 17.7007C8.9875 17.9632 7.55 18.3882 6.65 16.8757C6.4625 16.5757 5.9 15.8382 5.1125 15.8507C4.275 15.8632 4.775 16.3257 5.125 16.5132C5.55 16.7507 6.0375 17.6382 6.15 17.9257C6.35 18.4882 7 19.5632 9.5125 19.1007C9.5125 19.9382 9.525 20.7257 9.525 20.9632C9.525 21.2257 9.3375 21.5257 8.8375 21.4382C6.8458 20.7752 5.11342 19.502 3.88611 17.799C2.65881 16.096 1.9989 14.0498 2 11.9507C2 6.42568 6.475 1.95068 12 1.95068Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-};
diff --git a/components/icons/globe.tsx b/components/icons/globe.tsx
deleted file mode 100644
index 4791664..0000000
--- a/components/icons/globe.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { SVGProps } from "react";
-
-export const GlobeIcon = (props: SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      aria-hidden="true"
-      width="24px"
-      height="24px"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g>
-        <circle cx="12" cy="12" r="9.25" stroke="currentColor" strokeWidth="1.5" />
-        <path
-          d="M12 2.75C12 2.75 16.25 6.5 16.25 12C16.25 17.5 12 21.25 12 21.25"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M12 2.75C12 2.75 7.75 6.5 7.75 12C7.75 17.5 12 21.25 12 21.25"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path d="M3.25 12H20.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-      </g>
-    </svg>
-  );
-};
diff --git a/components/icons/image-alt.tsx b/components/icons/image-alt.tsx
deleted file mode 100644
index 8a3cd6a..0000000
--- a/components/icons/image-alt.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { SVGProps } from "react";
-
-export const ImageAltIcon = (props: SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      aria-hidden="true"
-      width="24px"
-      height="24px"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g>
-        <path
-          d="M6.75 17.25H12.25M15.25 17.25H17.25M20.25 14.25V6.75C20.25 5.09315 18.9069 3.75 17.25 3.75H6.75C5.09315 3.75 3.75 5.09315 3.75 6.75V12.0577M20.25 14.25V17.25C20.25 18.9069 18.9069 20.25 17.25 20.25H6.75C5.09315 20.25 3.75 18.9069 3.75 17.25V14.25M20.25 14.25H14.2767M3.75 14.25V12.0577M3.75 14.25H14.2767M3.75 12.0577L5.80016 9.95496C6.97827 8.74664 8.92087 8.74747 10.098 9.9568L14.2767 14.25M17.25 8.25C17.25 9.07843 16.5784 9.75 15.75 9.75C14.9216 9.75 14.25 9.07843 14.25 8.25C14.25 7.42157 14.9216 6.75 15.75 6.75C16.5784 6.75 17.25 7.42157 17.25 8.25Z"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </g>
-    </svg>
-  );
-};
diff --git a/components/icons/input-form.tsx b/components/icons/input-form.tsx
deleted file mode 100644
index 71980e9..0000000
--- a/components/icons/input-form.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { SVGProps } from "react";
-
-export const InputFormIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    aria-hidden="true"
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g>
-      <path d="M9 21H7.5V3H9V21Z" fill="currentColor" />
-      <path
-        d="M6 18H4.75C3.23122 18 2 16.7688 2 15.25V8.75C2 7.23122 3.23122 6 4.75 6H6V18Z"
-        fill="currentColor"
-      />
-      <path
-        d="M19.25 6C20.7688 6 22 7.23122 22 8.75V15.25C22 16.7688 20.7688 18 19.25 18H10.5V6H19.25Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
diff --git a/components/icons/intentface-logo.tsx b/components/icons/intentface-logo.tsx
deleted file mode 100644
index fdda4a8..0000000
--- a/components/icons/intentface-logo.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import type { SVGProps } from "react";
-
-export const IntentfaceLogo = (props: SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      width={128}
-      height={128}
-      viewBox="0 0 128 128"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-      {...props}
-    >
-      <foreignObject x={-2} y={-2} width={132} height={131.996}>
-        <div
-          style={{
-            backdropFilter: "blur(1px)",
-            clipPath: "url(#bgblur_0_18_60_clip_path)",
-            height: "100%",
-            width: "100%",
-          }}
-        />
-      </foreignObject>
-      <g filter="url(#filter0_i_18_60)" data-figma-bg-blur-radius={2}>
-        <path
-          d="M67.0664 0.010458C67.6187 0.0114424 68.0656 0.459962 68.0646 1.01225L67.9847 45.5377C67.9829 46.5618 69.3388 46.9264 69.8508 46.0394L92.1081 7.4796C92.3842 7.00121 92.9959 6.83731 93.4742 7.11353L98.5493 10.0442C99.0275 10.3203 99.1913 10.9318 98.9153 11.4101L76.6218 50.0329C76.1103 50.919 77.102 51.9104 77.988 51.3988L116.597 29.1026C117.075 28.8263 117.687 28.9903 117.963 29.4687L120.893 34.5451C121.169 35.0234 121.005 35.6348 120.527 35.9109L81.9145 58.2096C81.0285 58.7212 81.3915 60.0755 82.4146 60.0755H127C127.552 60.0755 128 60.5232 128 61.0755V66.9376C128 67.4899 127.552 67.9376 127 67.9376H82.4177C81.3947 67.9376 81.0317 69.2919 81.9176 69.8036L120.527 92.1C121.005 92.3761 121.169 92.9876 120.893 93.4658L117.963 98.5423C117.687 99.0207 117.075 99.1846 116.597 98.9084L77.9989 76.6187C77.1129 76.107 76.1213 77.0985 76.6327 77.9846L98.9136 116.585C99.1896 117.063 99.0258 117.675 98.5476 117.951L93.473 120.882C92.9946 121.158 92.3829 120.994 92.1067 120.516L69.7849 81.8446C69.2739 80.9593 67.9207 81.3205 67.9188 82.3427L67.8393 126.998C67.8383 127.551 67.3898 127.997 66.8375 127.996L61.0605 127.986C60.5089 127.985 60.0623 127.538 60.0623 126.986V80.5185L60.0653 78.7195C60.0653 78.7186 60.0642 78.7183 60.0638 78.7191C60.0634 78.7198 60.0623 78.7195 60.0623 78.7187V69.1451C60.0623 68.5928 59.6145 68.1451 59.0623 68.1451H0.999999C0.447714 68.1451 0 67.6974 0 67.1451V61.0751C0 60.5228 0.447715 60.0751 1 60.0751H59.0623C59.6146 60.0751 60.0623 59.6274 60.0623 59.0751V49.3318C60.0623 49.3165 60.0825 49.3111 60.0901 49.3243C60.0977 49.3375 60.1179 49.3322 60.118 49.3169L60.2045 0.99822C60.2055 0.445939 60.654 -0.000971992 61.2063 1.24303e-05L67.0664 0.010458Z"
-          fill="#7A7A7A"
-          fillOpacity={0.24}
-        />
-      </g>
-      <defs>
-        <filter
-          id="filter0_i_18_60"
-          x={-2}
-          y={-2}
-          width={132}
-          height={131.996}
-          filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
-        >
-          <feFlood floodOpacity={0} result="BackgroundImageFix" />
-          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-          <feColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <feOffset dy={1} />
-          <feGaussianBlur stdDeviation={1.5} />
-          <feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
-          <feColorMatrix
-            type="matrix"
-            values="0 0 0 0 0.419608 0 0 0 0 0.419608 0 0 0 0 0.419608 0 0 0 0.12 0"
-          />
-          <feBlend mode="normal" in2="shape" result="effect1_innerShadow_18_60" />
-        </filter>
-        <clipPath id="bgblur_0_18_60_clip_path" transform="translate(2 2)">
-          <path d="M67.0664 0.010458C67.6187 0.0114424 68.0656 0.459962 68.0646 1.01225L67.9847 45.5377C67.9829 46.5618 69.3388 46.9264 69.8508 46.0394L92.1081 7.4796C92.3842 7.00121 92.9959 6.83731 93.4742 7.11353L98.5493 10.0442C99.0275 10.3203 99.1913 10.9318 98.9153 11.4101L76.6218 50.0329C76.1103 50.919 77.102 51.9104 77.988 51.3988L116.597 29.1026C117.075 28.8263 117.687 28.9903 117.963 29.4687L120.893 34.5451C121.169 35.0234 121.005 35.6348 120.527 35.9109L81.9145 58.2096C81.0285 58.7212 81.3915 60.0755 82.4146 60.0755H127C127.552 60.0755 128 60.5232 128 61.0755V66.9376C128 67.4899 127.552 67.9376 127 67.9376H82.4177C81.3947 67.9376 81.0317 69.2919 81.9176 69.8036L120.527 92.1C121.005 92.3761 121.169 92.9876 120.893 93.4658L117.963 98.5423C117.687 99.0207 117.075 99.1846 116.597 98.9084L77.9989 76.6187C77.1129 76.107 76.1213 77.0985 76.6327 77.9846L98.9136 116.585C99.1896 117.063 99.0258 117.675 98.5476 117.951L93.473 120.882C92.9946 121.158 92.3829 120.994 92.1067 120.516L69.7849 81.8446C69.2739 80.9593 67.9207 81.3205 67.9188 82.3427L67.8393 126.998C67.8383 127.551 67.3898 127.997 66.8375 127.996L61.0605 127.986C60.5089 127.985 60.0623 127.538 60.0623 126.986V80.5185L60.0653 78.7195C60.0653 78.7186 60.0642 78.7183 60.0638 78.7191C60.0634 78.7198 60.0623 78.7195 60.0623 78.7187V69.1451C60.0623 68.5928 59.6145 68.1451 59.0623 68.1451H0.999999C0.447714 68.1451 0 67.6974 0 67.1451V61.0751C0 60.5228 0.447715 60.0751 1 60.0751H59.0623C59.6146 60.0751 60.0623 59.6274 60.0623 59.0751V49.3318C60.0623 49.3165 60.0825 49.3111 60.0901 49.3243C60.0977 49.3375 60.1179 49.3322 60.118 49.3169L60.2045 0.99822C60.2055 0.445939 60.654 -0.000971992 61.2063 1.24303e-05L67.0664 0.010458Z" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-};
diff --git a/components/icons/logo-tile.tsx b/components/icons/logo-tile.tsx
new file mode 100644
index 0000000..aeed2b8
--- /dev/null
+++ b/components/icons/logo-tile.tsx
@@ -0,0 +1,34 @@
+import { cn } from "@/lib/utils";
+
+type LogoTileProps = {
+  size?: "sm" | "lg";
+  className?: string;
+};
+
+// The Intentface asterisk, white on a cobalt tile lit like the send button.
+export const LogoTile = ({ size = "sm", className }: LogoTileProps) => (
+  <span
+    aria-hidden="true"
+    className={cn(
+      "flex shrink-0 items-center justify-center bg-accent-raised shadow-logo",
+      size === "sm" ? "size-6 rounded-md" : "size-12 rounded-xl shadow-logo-lg",
+      className,
+    )}
+  >
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 128 128"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn(
+        "drop-shadow-[0_1px_1px_oklch(30%_0.12_258/0.45)]",
+        size === "sm" ? "size-[13px]" : "size-[26px]",
+      )}
+    >
+      <path
+        d="M67.066 0.01C67.619 0.011 68.066 0.46 68.065 1.012L67.985 45.538C67.983 46.562 69.339 46.926 69.851 46.039L92.108 7.48C92.384 7.001 92.996 6.837 93.474 7.114L98.549 10.044C99.028 10.32 99.191 10.932 98.915 11.41L76.622 50.033C76.11 50.919 77.102 51.91 77.988 51.399L116.597 29.103C117.075 28.826 117.687 28.99 117.963 29.469L120.893 34.545C121.169 35.023 121.005 35.635 120.527 35.911L81.915 58.21C81.028 58.721 81.391 60.075 82.415 60.075H127C127.552 60.075 128 60.523 128 61.075V66.938C128 67.49 127.552 67.938 127 67.938H82.418C81.395 67.938 81.032 69.292 81.918 69.804L120.527 92.1C121.005 92.376 121.169 92.988 120.893 93.466L117.963 98.542C117.687 99.021 117.075 99.185 116.597 98.908L77.999 76.619C77.113 76.107 76.121 77.099 76.633 77.985L98.914 116.585C99.19 117.063 99.026 117.675 98.548 117.951L93.473 120.882C92.995 121.158 92.383 120.994 92.107 120.516L69.785 81.845C69.274 80.959 67.921 81.32 67.919 82.343L67.839 126.998C67.838 127.551 67.39 127.997 66.838 127.996L61.06 127.986C60.509 127.985 60.062 127.538 60.062 126.986V80.519L60.065 78.719C60.065 78.719 60.064 78.718 60.064 78.719C60.063 78.72 60.062 78.719 60.062 78.719V69.145C60.062 68.593 59.614 68.145 59.062 68.145H1C0.448 68.145 0 67.697 0 67.145V61.075C0 60.523 0.448 60.075 1 60.075H59.062C59.615 60.075 60.062 59.627 60.062 59.075V49.332C60.062 49.316 60.083 49.311 60.09 49.324C60.098 49.337 60.118 49.332 60.118 49.317L60.205 0.998C60.206 0.446 60.654 -0.001 61.206 1.243e-05L67.066 0.01Z"
+        fill="#FFFFFF"
+      />
+    </svg>
+  </span>
+);
diff --git a/components/icons/markdown.tsx b/components/icons/markdown.tsx
deleted file mode 100644
index 5d46e66..0000000
--- a/components/icons/markdown.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { SVGProps } from "react";
-
-export const MarkdownIcon = (props: SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      aria-hidden="false"
-      role="img"
-      aria-label="markdown"
-      width="24px"
-      height="24px"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M5.75 4C3.67893 4 2 5.67893 2 7.75V16.25C2 18.3211 3.67893 20 5.75 20H18.25C20.3211 20 22 18.3211 22 16.25V7.75C22 5.67893 20.3211 4 18.25 4H5.75ZM7.28033 9.21967C7.06583 9.00517 6.74324 8.941 6.46299 9.05709C6.18273 9.17318 6 9.44665 6 9.75V14.25C6 14.6642 6.33579 15 6.75 15C7.16421 15 7.5 14.6642 7.5 14.25V11.5607L8.46967 12.5303C8.76256 12.8232 9.23744 12.8232 9.53033 12.5303L10.5 11.5607V14.25C10.5 14.6642 10.8358 15 11.25 15C11.6642 15 12 14.6642 12 14.25V9.75C12 9.44665 11.8173 9.17318 11.537 9.05709C11.2568 8.941 10.9342 9.00517 10.7197 9.21967L9 10.9393L7.28033 9.21967ZM16.5 9.75C16.5 9.33579 16.1642 9 15.75 9C15.3358 9 15 9.33579 15 9.75V12.4393L14.5303 11.9697C14.2374 11.6768 13.7626 11.6768 13.4697 11.9697C13.1768 12.2626 13.1768 12.7374 13.4697 13.0303L15.2197 14.7803C15.5126 15.0732 15.9874 15.0732 16.2803 14.7803L18.0303 13.0303C18.3232 12.7374 18.3232 12.2626 18.0303 11.9697C17.7374 11.6768 17.2626 11.6768 16.9697 11.9697L16.5 12.4393V9.75Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-};
diff --git a/components/icons/moon.tsx b/components/icons/moon.tsx
deleted file mode 100644
index c75368c..0000000
--- a/components/icons/moon.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { SVGProps } from "react";
-
-export const MoonIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    aria-hidden="true"
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g>
-      <path
-        d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.9319 21.9993 11.8639 21.998 11.7962C21.9924 11.5186 21.834 11.2669 21.5862 11.1417C21.3384 11.0166 21.0418 11.0385 20.8151 11.1988C19.8784 11.861 18.7358 12.25 17.5 12.25C14.3244 12.25 11.75 9.67564 11.75 6.5C11.75 5.26425 12.139 4.12157 12.8012 3.18485C12.9615 2.95819 12.9834 2.66155 12.8583 2.41377C12.7331 2.16599 12.4814 2.0076 12.2038 2.00204C12.136 2.00068 12.0681 2 12 2Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
diff --git a/components/icons/npm.tsx b/components/icons/npm.tsx
deleted file mode 100644
index 976615e..0000000
--- a/components/icons/npm.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { SVGProps } from "react";
-
-export const NpmIcon = (props: SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      aria-hidden="false"
-      role="img"
-      aria-label="npm"
-      width="24px"
-      height="24px"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path d="M3 21H12V7.5H16.5V21H21V3H3V21Z" fill="currentColor" />
-    </svg>
-  );
-};
diff --git a/components/icons/open-quote-2.tsx b/components/icons/open-quote-2.tsx
deleted file mode 100644
index 5df51fc..0000000
--- a/components/icons/open-quote-2.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { SVGProps } from "react";
-
-export const OpenQuote2Icon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    aria-hidden="true"
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g>
-      <path
-        d="M19.25 20C20.7688 20 22 18.7683 22 17.2489V12.9614C22 11.442 20.7688 10.2103 19.25 10.2103H18.5V4.74375C18.5 4.49612 18.3779 4.26443 18.1736 4.12457C17.7059 3.80438 17.1523 4.17519 16.7475 4.41114C16.3321 4.65321 15.7803 5.02842 15.2275 5.56539C14.1128 6.64821 13 8.38727 13 10.9606V17.2503C13 18.7703 14.2319 20 15.75 20H19.25Z"
-        fill="currentColor"
-      />
-      <path
-        d="M8.25 20C9.76878 20 11 18.7683 11 17.2489V12.9614C11 11.442 9.76878 10.2103 8.25 10.2103H7.5V4.74375C7.5 4.49612 7.37786 4.26443 7.17359 4.12457C6.70593 3.80439 6.15229 4.17519 5.74746 4.41114C5.33213 4.65321 4.78033 5.02841 4.22754 5.56539C3.11281 6.64821 2 8.38727 2 10.9606V17.2503C2 18.7703 3.23189 20 4.75 20H8.25Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
diff --git a/components/icons/paper-plane.tsx b/components/icons/paper-plane.tsx
deleted file mode 100644
index f9c9553..0000000
--- a/components/icons/paper-plane.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { SVGProps } from "react";
-
-export const PaperPlaneIcon = (props: SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      aria-hidden="true"
-      width="24px"
-      height="24px"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g>
-        <path
-          d="M2.66936 5.12886C2.12122 3.64104 3.6759 2.24953 5.09409 2.95862L20.0468 10.435C21.3366 11.0799 21.3366 12.9205 20.0468 13.5655L5.09409 21.0418C3.67589 21.7509 2.12122 20.3594 2.66936 18.8715L4.92467 12.75H9.25021C9.66442 12.75 10.0002 12.4142 10.0002 12C10.0002 11.5858 9.66442 11.25 9.25021 11.25H4.92452L2.66936 5.12886Z"
-          fill="currentColor"
-        />
-      </g>
-    </svg>
-  );
-};
diff --git a/components/icons/paperclip.tsx b/components/icons/paperclip.tsx
deleted file mode 100644
index bed101c..0000000
--- a/components/icons/paperclip.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { SVGProps } from "react";
-
-export function PaperClipIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      aria-hidden="true"
-      width="24px"
-      height="24px"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g>
-        <path
-          d="M5.75 10.75V15.25C5.75 18.5637 8.43629 21.25 11.75 21.25H12.25C15.5637 21.25 18.25 18.5637 18.25 15.25V7C18.25 4.65279 16.3472 2.75 14 2.75C11.6528 2.75 9.75 4.65279 9.75 7V14.875C9.75 16.0486 10.7014 17 11.875 17C13.0486 17 14 16.0486 14 14.875V7.75"
-          stroke="currentColor"
-          strokeWidth="1.75"
-          strokeLinecap="round"
-        ></path>
-      </g>
-    </svg>
-  );
-}
diff --git a/components/icons/playground.tsx b/components/icons/playground.tsx
deleted file mode 100644
index 9f90473..0000000
--- a/components/icons/playground.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import type { SVGProps } from "react";
-
-export const PlaygroundIcon = (props: SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      aria-hidden="false"
-      role="img"
-      aria-label="playground, forms, shapes, geo"
-      width="24px"
-      height="24px"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M15.4278 3.03394C14.4945 2.78414 13.5354 3.3379 13.2851 4.27103L12.2008 8.3132C11.9503 9.24706 12.5046 10.2071 13.4386 10.4571L17.4871 11.5407C18.4203 11.7905 19.3795 11.2367 19.6298 10.3036L20.7141 6.26142C20.9646 5.32756 20.4103 4.36752 19.4763 4.11753L15.4278 3.03394Z"
-        fill="currentColor"
-      />
-      <path
-        d="M5.47325 6.41118C5.26797 6.23912 4.98651 6.18959 4.73483 6.28125C4.48315 6.3729 4.29945 6.59182 4.25289 6.8556L3.01144 13.8885C2.96486 14.1523 3.06257 14.421 3.26777 14.5933C3.47297 14.7655 3.75448 14.8153 4.00628 14.7237L10.7244 12.2812C10.9763 12.1896 11.1602 11.9705 11.2067 11.7065C11.2533 11.4425 11.1553 11.1738 10.9499 11.0016L5.47325 6.41118Z"
-        fill="currentColor"
-      />
-      <path
-        d="M14.0098 13.3154C11.8866 13.3154 10.1641 15.0349 10.1641 17.1577C10.1641 19.2806 11.8866 21 14.0098 21C16.1329 21 17.8555 19.2806 17.8555 17.1577C17.8555 15.0349 16.1329 13.3154 14.0098 13.3154Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-};
diff --git a/components/icons/plus-medium.tsx b/components/icons/plus-medium.tsx
deleted file mode 100644
index a67d2e9..0000000
--- a/components/icons/plus-medium.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { SVGProps } from "react";
-
-export const PlusMediumIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    aria-hidden="true"
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g>
-      <path
-        d="M11.25 18.75V12.75H5.25C4.83579 12.75 4.5 12.4142 4.5 12C4.5 11.5858 4.83579 11.25 5.25 11.25H11.25V5.25C11.25 4.83579 11.5858 4.5 12 4.5C12.4142 4.5 12.75 4.83579 12.75 5.25V11.25H18.75C19.1642 11.25 19.5 11.5858 19.5 12C19.5 12.4142 19.1642 12.75 18.75 12.75H12.75V18.75C12.75 19.1642 12.4142 19.5 12 19.5C11.5858 19.5 11.25 19.1642 11.25 18.75Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
diff --git a/components/icons/refresh.tsx b/components/icons/refresh.tsx
deleted file mode 100644
index 14c2e29..0000000
--- a/components/icons/refresh.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { SVGProps } from "react";
-
-export const RefreshIcon = (props: SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      aria-hidden="true"
-      width="24px"
-      height="24px"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g>
-        <path
-          d="M6.3448 7C7.73561 5.46681 9.77612 4.5 12 4.5C16.1421 4.5 19.5 7.85786 19.5 12C19.5 12.3181 19.4802 12.6313 19.4419 12.9384C19.3907 13.3495 19.6823 13.7242 20.0934 13.7755C20.5044 13.8267 20.8792 13.5351 20.9304 13.1241C20.9764 12.7555 21 12.3803 21 12C21 7.02944 16.9706 3 12 3C9.4791 3 7.1554 4.03743 5.5 5.71122V3.75C5.5 3.33579 5.16421 3 4.75 3C4.33579 3 4 3.33579 4 3.75V7C4 7.82843 4.67157 8.5 5.5 8.5H8.75C9.16421 8.5 9.5 8.16421 9.5 7.75C9.5 7.33579 9.16421 7 8.75 7H6.3448Z"
-          fill="currentColor"
-        />
-        <path
-          d="M4.55806 11.0616C4.60932 10.6505 4.31766 10.2758 3.90663 10.2245C3.4956 10.1733 3.12085 10.4649 3.06959 10.8759C3.02364 11.2445 3 11.6197 3 12C3 16.9706 7.02944 21 12 21C14.5269 21 16.8557 19.9576 18.5118 18.2768V20.25C18.5118 20.6642 18.8476 21 19.2618 21C19.6761 21 20.0118 20.6642 20.0118 20.25V17C20.0118 16.1716 19.3403 15.5 18.5118 15.5H15.2618C14.8476 15.5 14.5118 15.8358 14.5118 16.25C14.5118 16.6642 14.8476 17 15.2618 17H17.6552C16.2644 18.5332 14.2239 19.5 12 19.5C7.85786 19.5 4.5 16.1421 4.5 12C4.5 11.6819 4.51977 11.3687 4.55806 11.0616Z"
-          fill="currentColor"
-        />
-      </g>
-    </svg>
-  );
-};
diff --git a/components/icons/search-line-sparkle.tsx b/components/icons/search-line-sparkle.tsx
deleted file mode 100644
index 540f241..0000000
--- a/components/icons/search-line-sparkle.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import type { SVGProps } from "react";
-
-export const SearchLineSparkleIcon = (props: SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      aria-hidden="true"
-      width="24px"
-      height="24px"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g>
-        <path
-          d="M13.25 21.25H7.75C6.09315 21.25 4.75 19.9069 4.75 18.25V5.75C4.75 4.09315 6.09315 2.75 7.75 2.75H16.25C17.9069 2.75 19.25 4.09315 19.25 5.75V11.75"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M8.75 6.75H15.25M8.75 10.75H12.25"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M19.2405 16.1852L18.5436 14.3733C18.4571 14.1484 18.241 14 18 14C17.759 14 17.5429 14.1484 17.4564 14.3733L16.7595 16.1852C16.658 16.4493 16.4493 16.658 16.1852 16.7595L14.3733 17.4564C14.1484 17.5429 14 17.759 14 18C14 18.241 14.1484 18.4571 14.3733 18.5436L16.1852 19.2405C16.4493 19.342 16.658 19.5507 16.7595 19.8148L17.4564 21.6267C17.5429 21.8516 17.759 22 18 22C18.241 22 18.4571 21.8516 18.5436 21.6267L19.2405 19.8148C19.342 19.5507 19.5507 19.342 19.8148 19.2405L21.6267 18.5436C21.8516 18.4571 22 18.241 22 18C22 17.759 21.8516 17.5429 21.6267 17.4564L19.8148 16.7595C19.5507 16.658 19.342 16.4493 19.2405 16.1852Z"
-          fill="currentColor"
-        />
-      </g>
-    </svg>
-  );
-};
diff --git a/components/icons/send.tsx b/components/icons/send.tsx
deleted file mode 100644
index fcaa5c8..0000000
--- a/components/icons/send.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { SVGProps } from "react";
-
-export function SendIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      aria-hidden="true"
-      width="24px"
-      height="24px"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g>
-        <path
-          d="M20.9021 5.2869C21.3196 3.9415 20.0574 2.6793 18.712 3.09684L2.18837 8.22487C0.498062 8.74945 0.565609 11.1647 2.28263 11.594L10.235 13.5821C10.3245 13.6045 10.3945 13.6744 10.4169 13.764L12.4049 21.7163C12.8342 23.4333 15.2495 23.5009 15.7741 21.8106L20.9021 5.2869Z"
-          fill="currentColor"
-        />
-      </g>
-    </svg>
-  );
-}
diff --git a/components/icons/settings-slider-three.tsx b/components/icons/settings-slider-three.tsx
deleted file mode 100644
index 41c094f..0000000
--- a/components/icons/settings-slider-three.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { SVGProps } from "react";
-
-export const SettingsSliderThreeIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    aria-hidden="true"
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M5.70123 2.99707C6.11545 2.99707 6.45123 3.33286 6.45123 3.74707V10.25C6.45123 10.6642 6.11545 11 5.70123 11C5.28702 11 4.95123 10.6642 4.95123 10.25V3.74707C4.95123 3.33286 5.28702 2.99707 5.70123 2.99707ZM18.2984 2.99707C18.7126 2.99707 19.0484 3.33286 19.0484 3.74707V12.2508C19.0484 12.665 18.7126 13.0008 18.2984 13.0008C17.8842 13.0008 17.5484 12.665 17.5484 12.2508V3.74707C17.5484 3.33286 17.8842 2.99707 18.2984 2.99707ZM11.9998 3.24707C12.4141 3.24707 12.7498 3.58286 12.7498 3.99707V8.49902H13.9998C14.414 8.49902 14.7498 8.83481 14.7498 9.24902C14.7498 9.66324 14.414 9.99902 13.9998 9.99902H9.99982C9.5856 9.99902 9.24982 9.66324 9.24982 9.24902C9.24982 8.83481 9.5856 8.49902 9.99982 8.49902H11.2498V3.99707C11.2498 3.58286 11.5856 3.24707 11.9998 3.24707ZM11.9998 12.0005C12.414 12.0005 12.7498 12.3363 12.7498 12.7505V20.0038C12.7498 20.418 12.414 20.7538 11.9998 20.7538C11.5856 20.7538 11.2498 20.418 11.2498 20.0038V12.7505C11.2498 12.3363 11.5856 12.0005 11.9998 12.0005ZM2.99609 13.7515C2.99609 13.3373 3.33188 13.0015 3.74609 13.0015H7.74982C8.16403 13.0015 8.49982 13.3373 8.49982 13.7515C8.49982 14.1657 8.16403 14.5015 7.74982 14.5015H6.45123V20.254C6.45123 20.6682 6.11545 21.004 5.70123 21.004C5.28702 21.004 4.95123 20.6682 4.95123 20.254V14.5015H3.74609C3.33188 14.5015 2.99609 14.1657 2.99609 13.7515ZM15.4998 15.752C15.4998 15.3377 15.8356 15.002 16.2498 15.002H20.2498C20.664 15.002 20.9998 15.3377 20.9998 15.752C20.9998 16.1662 20.664 16.502 20.2498 16.502H19.0484V20.2536C19.0484 20.6678 18.7126 21.0036 18.2984 21.0036C17.8842 21.0036 17.5484 20.6678 17.5484 20.2536V16.502H16.2498C15.8356 16.502 15.4998 16.1662 15.4998 15.752Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
diff --git a/components/icons/settings.tsx b/components/icons/settings.tsx
deleted file mode 100644
index ef4999d..0000000
--- a/components/icons/settings.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import type { ComponentProps } from "react";
-
-export const SettingsIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    aria-hidden="true"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g>
-      <path
-        d="M20.25 11.9998C20.25 13.5027 19.8481 14.9118 19.146 16.1254C18.4216 17.3774 17.3777 18.4213 16.1257 19.1457C14.9121 19.8479 13.503 20.2498 12 20.2498C10.497 20.2498 9.08794 19.8479 7.87432 19.1457C6.62238 18.4214 5.57847 17.3774 4.8541 16.1255C4.1519 14.9119 3.75 13.5028 3.75 11.9998C3.75 10.4968 4.15194 9.08764 4.85418 7.87399C5.57854 6.62212 6.62243 5.57825 7.87431 4.85392C9.08793 4.15172 10.497 3.74982 12 3.74982C13.503 3.74982 14.9121 4.15172 16.1257 4.85392C17.3776 5.57828 18.4215 6.6222 19.1459 7.87413C19.8481 9.08775 20.25 10.4968 20.25 11.9998Z"
-        stroke="currentColor"
-        strokeWidth="1.75"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      ></path>
-      <path
-        d="M14.25 11.9998C14.25 13.2425 13.2426 14.2498 12 14.2498C11.5901 14.2498 11.2058 14.1402 10.8748 13.9487C10.2024 13.5596 9.75 12.8326 9.75 11.9998C9.75 11.1671 10.2024 10.44 10.8748 10.0509C11.2058 9.85943 11.5901 9.74982 12 9.74982C13.2426 9.74982 14.25 10.7572 14.25 11.9998Z"
-        stroke="currentColor"
-        strokeWidth="1.75"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      ></path>
-      <path
-        d="M12 20.2498L12 22.25"
-        stroke="currentColor"
-        strokeWidth="1.75"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      ></path>
-      <path
-        d="M3.75001 11.9998H1.75"
-        stroke="currentColor"
-        strokeWidth="1.75"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      ></path>
-      <path
-        d="M12 3.74981L12 1.75"
-        stroke="currentColor"
-        strokeWidth="1.75"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      ></path>
-      <path
-        d="M14.25 11.9998H20.25L22.25 12"
-        stroke="currentColor"
-        strokeWidth="1.75"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      ></path>
-      <path
-        d="M6.875 3.12305L7.87431 4.85391L10.8748 10.0509"
-        stroke="currentColor"
-        strokeWidth="1.75"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      ></path>
-      <path
-        d="M16.125 19.1457L17.1243 20.8766"
-        stroke="currentColor"
-        strokeWidth="1.75"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      ></path>
-      <path
-        d="M3.12305 6.87463L4.85399 7.87399"
-        stroke="currentColor"
-        strokeWidth="1.75"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      ></path>
-      <path
-        d="M19.1465 16.1254L20.8773 17.1246"
-        stroke="currentColor"
-        strokeWidth="1.75"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      ></path>
-      <path
-        d="M3.12305 17.1248L4.85391 16.1255"
-        stroke="currentColor"
-        strokeWidth="1.75"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      ></path>
-      <path
-        d="M19.1465 7.87413L20.8773 6.87482"
-        stroke="currentColor"
-        strokeWidth="1.75"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      ></path>
-      <path
-        d="M6.875 20.8765L7.87431 19.1457L10.8748 13.9487"
-        stroke="currentColor"
-        strokeWidth="1.75"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      ></path>
-      <path
-        d="M16.125 4.85391L17.1243 3.12305"
-        stroke="currentColor"
-        strokeWidth="1.75"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      ></path>
-    </g>
-  </svg>
-);
diff --git a/components/icons/sidebar.tsx b/components/icons/sidebar.tsx
deleted file mode 100644
index cc2cf3a..0000000
--- a/components/icons/sidebar.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { SVGProps } from "react";
-
-export const SidebarIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    aria-hidden="true"
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      d="M2.75 6.75C2.75 5.64543 3.64543 4.75 4.75 4.75H19.25C20.3546 4.75 21.25 5.64543 21.25 6.75V17.25C21.25 18.3546 20.3546 19.25 19.25 19.25H4.75C3.64543 19.25 2.75 18.3546 2.75 17.25V6.75Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinejoin="round"
-    />
-    <path d="M6.25 8.25V15.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-  </svg>
-);
diff --git a/components/icons/spreadsheet.tsx b/components/icons/spreadsheet.tsx
deleted file mode 100644
index 0f7abd6..0000000
--- a/components/icons/spreadsheet.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { SVGProps } from "react";
-
-export const SpreadsheetIcon = (props: SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      aria-hidden="true"
-      width="24px"
-      height="24px"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g>
-        <path
-          d="M19.923 5.38803L19.2548 5.72852V5.72852L19.923 5.38803ZM18.612 4.07698L18.9525 3.40873V3.40873L18.612 4.07698ZM5.38803 4.07698L5.72852 4.74524V4.74524L5.38803 4.07698ZM4.07698 5.38803L4.74524 5.72852V5.72852L4.07698 5.38803ZM4.07698 18.612L3.40873 18.9525H3.40873L4.07698 18.612ZM5.38803 19.923L5.72852 19.2548H5.72852L5.38803 19.923ZM18.612 19.923L18.2715 19.2548H18.2715L18.612 19.923ZM19.923 18.612L19.2548 18.2715V18.2715L19.923 18.612ZM20.25 8.55H19.5V15.45H20.25H21V8.55H20.25ZM20.25 8.55H21C21 7.7223 21.0006 7.05641 20.9566 6.51853C20.912 5.97189 20.8176 5.49175 20.5913 5.04754L19.923 5.38803L19.2548 5.72852C19.3554 5.92604 19.4245 6.1868 19.4616 6.64068C19.4994 7.10331 19.5 7.69755 19.5 8.55H20.25ZM19.923 5.38803L20.5913 5.04754C20.2318 4.34193 19.6581 3.76825 18.9525 3.40873L18.612 4.07698L18.2715 4.74524C18.6948 4.96095 19.0391 5.30516 19.2548 5.72852L19.923 5.38803ZM15.45 3.75V4.5C16.3025 4.5 16.8967 4.50058 17.3593 4.53838C17.8132 4.57546 18.074 4.6446 18.2715 4.74524L18.612 4.07698L18.9525 3.40873C18.5082 3.18238 18.0281 3.08803 17.4815 3.04336C16.9436 2.99942 16.2777 3 15.45 3V3.75ZM8.55 3.75V4.5H15.45V3.75V3H8.55V3.75ZM8.55 3.75V3C7.7223 3 7.05641 2.99942 6.51853 3.04336C5.97189 3.08803 5.49175 3.18238 5.04754 3.40873L5.38803 4.07698L5.72852 4.74524C5.92604 4.6446 6.1868 4.57546 6.64068 4.53838C7.10331 4.50058 7.69755 4.5 8.55 4.5V3.75ZM4.07698 5.38803L4.74524 5.72852C4.96095 5.30516 5.30516 4.96095 5.72852 4.74524L5.38803 4.07698L5.04754 3.40873C4.34193 3.76825 3.76825 4.34193 3.40873 5.04754L4.07698 5.38803ZM3.75 8.55H4.5C4.5 7.69755 4.50058 7.10331 4.53838 6.64068C4.57546 6.1868 4.6446 5.92604 4.74524 5.72852L4.07698 5.38803L3.40873 5.04754C3.18238 5.49175 3.08803 5.97189 3.04336 6.51853C2.99942 7.05641 3 7.7223 3 8.55H3.75ZM3.75 15.45H4.5V8.55H3.75H3V15.45H3.75ZM3.75 15.45H3C3 16.2777 2.99942 16.9436 3.04336 17.4815C3.08803 18.0281 3.18238 18.5082 3.40873 18.9525L4.07698 18.612L4.74524 18.2715C4.6446 18.074 4.57546 17.8132 4.53838 17.3593C4.50058 16.8967 4.5 16.3025 4.5 15.45H3.75ZM5.38803 19.923L5.72852 19.2548C5.30516 19.0391 4.96095 18.6948 4.74524 18.2715L4.07698 18.612L3.40873 18.9525C3.76825 19.6581 4.34193 20.2318 5.04754 20.5913L5.38803 19.923ZM8.55 20.25V19.5C7.69755 19.5 7.10331 19.4994 6.64068 19.4616C6.1868 19.4245 5.92604 19.3554 5.72852 19.2548L5.38803 19.923L5.04754 20.5913C5.49175 20.8176 5.97189 20.912 6.51853 20.9566C7.05641 21.0006 7.7223 21 8.55 21V20.25ZM15.45 20.25V19.5H8.55V20.25V21H15.45V20.25ZM15.45 20.25V21C16.2777 21 16.9436 21.0006 17.4815 20.9566C18.0281 20.912 18.5082 20.8176 18.9525 20.5913L18.612 19.923L18.2715 19.2548C18.074 19.3554 17.8132 19.4245 17.3593 19.4616C16.8967 19.4994 16.3025 19.5 15.45 19.5V20.25ZM19.923 18.612L19.2548 18.2715C19.0391 18.6948 18.6948 19.0391 18.2715 19.2548L18.612 19.923L18.9525 20.5913C19.6581 20.2318 20.2318 19.6581 20.5913 18.9525L19.923 18.612ZM20.25 15.45H19.5C19.5 16.3025 19.4994 16.8967 19.4616 17.3593C19.4245 17.8132 19.3554 18.074 19.2548 18.2715L19.923 18.612L20.5913 18.9525C20.8176 18.5082 20.912 18.0281 20.9566 17.4815C21.0006 16.9436 21 16.2777 21 15.45H20.25Z"
-          fill="currentColor"
-        />
-        <path
-          d="M9.75 3.75V9.75V20.25"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="square"
-        />
-        <path
-          d="M3.75 9.75H9.75H20.25"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="square"
-        />
-      </g>
-    </svg>
-  );
-};
diff --git a/components/icons/square-lines.tsx b/components/icons/square-lines.tsx
deleted file mode 100644
index ab4d9ae..0000000
--- a/components/icons/square-lines.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { SVGProps } from "react";
-
-export const SquareLinesIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    aria-hidden="true"
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M3 5.75C3 4.23122 4.23122 3 5.75 3H18.25C19.7688 3 21 4.23122 21 5.75V18.25C21 19.7688 19.7688 21 18.25 21H5.75C4.23122 21 3 19.7688 3 18.25V5.75ZM8 14C8 13.5858 8.33579 13.25 8.75 13.25H13.25C13.6642 13.25 14 13.5858 14 14C14 14.4142 13.6642 14.75 13.25 14.75H8.75C8.33579 14.75 8 14.4142 8 14ZM8.75 9.25C8.33579 9.25 8 9.58579 8 10C8 10.4142 8.33579 10.75 8.75 10.75H15.25C15.6642 10.75 16 10.4142 16 10C16 9.58579 15.6642 9.25 15.25 9.25H8.75Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
diff --git a/components/icons/stop.tsx b/components/icons/stop.tsx
deleted file mode 100644
index 7f7d15c..0000000
--- a/components/icons/stop.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { SVGProps } from "react";
-
-export function StopIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      aria-hidden="true"
-      width="24px"
-      height="24px"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <rect x="6" y="6" width="12" height="12" rx="3" fill="currentColor" />
-    </svg>
-  );
-}
diff --git a/components/icons/sun.tsx b/components/icons/sun.tsx
deleted file mode 100644
index 0a61624..0000000
--- a/components/icons/sun.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import type { SVGProps } from "react";
-
-// The source clipped to a 0,0,24,24 rect identical to the viewBox (a no-op), so
-// the clipPath def is dropped — the rays already sit inside the box.
-export const SunIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    aria-hidden="true"
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g>
-      <path
-        d="M12 20C12.4142 20 12.75 20.3358 12.75 20.75V23.25C12.75 23.6642 12.4142 24 12 24C11.5858 24 11.25 23.6642 11.25 23.25V20.75C11.25 20.3358 11.5858 20 12 20Z"
-        fill="currentColor"
-      />
-      <path
-        d="M5.28223 17.6572C5.57512 17.3643 6.04988 17.3643 6.34277 17.6572C6.63567 17.9501 6.63567 18.4249 6.34277 18.7178L4.5752 20.4854C4.28229 20.7781 3.8075 20.7782 3.51465 20.4854C3.2218 20.1925 3.22189 19.7177 3.51465 19.4248L5.28223 17.6572Z"
-        fill="currentColor"
-      />
-      <path
-        d="M17.6572 17.6572C17.9501 17.3643 18.4249 17.3643 18.7178 17.6572L20.4854 19.4248C20.7781 19.7177 20.7782 20.1925 20.4854 20.4854C20.1925 20.7782 19.7177 20.7781 19.4248 20.4854L17.6572 18.7178C17.3643 18.4249 17.3643 17.9501 17.6572 17.6572Z"
-        fill="currentColor"
-      />
-      <path
-        d="M7.75781 7.75781C10.101 5.41467 13.899 5.41467 16.2422 7.75781C18.5853 10.101 18.5853 13.899 16.2422 16.2422C13.899 18.5853 10.101 18.5853 7.75781 16.2422C5.41467 13.899 5.41467 10.101 7.75781 7.75781Z"
-        fill="currentColor"
-      />
-      <path
-        d="M3.25 11.25C3.66421 11.25 3.99999 11.5858 4 12C4 12.4142 3.66421 12.75 3.25 12.75H0.75C0.335786 12.75 0 12.4142 0 12C5.66941e-06 11.5858 0.33579 11.25 0.75 11.25H3.25Z"
-        fill="currentColor"
-      />
-      <path
-        d="M23.25 11.25C23.6642 11.25 24 11.5858 24 12C24 12.4142 23.6642 12.75 23.25 12.75H20.75C20.3358 12.75 20 12.4142 20 12C20 11.5858 20.3358 11.25 20.75 11.25H23.25Z"
-        fill="currentColor"
-      />
-      <path
-        d="M3.51465 3.51465C3.8075 3.2218 4.28229 3.22188 4.5752 3.51465L6.34277 5.28223C6.63567 5.57512 6.63567 6.04988 6.34277 6.34277C6.04988 6.63567 5.57512 6.63567 5.28223 6.34277L3.51465 4.5752C3.22188 4.28229 3.2218 3.8075 3.51465 3.51465Z"
-        fill="currentColor"
-      />
-      <path
-        d="M19.4248 3.51465C19.7177 3.22189 20.1925 3.22181 20.4854 3.51465C20.7782 3.8075 20.7781 4.28229 20.4854 4.5752L18.7178 6.34277C18.4249 6.63567 17.9501 6.63567 17.6572 6.34277C17.3643 6.04988 17.3643 5.57512 17.6572 5.28223L19.4248 3.51465Z"
-        fill="currentColor"
-      />
-      <path
-        d="M12 0C12.4142 0 12.75 0.335786 12.75 0.75V3.25C12.75 3.66421 12.4142 4 12 4C11.5858 4 11.25 3.66421 11.25 3.25V0.75C11.25 0.335786 11.5858 0 12 0Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
diff --git a/components/icons/trash.tsx b/components/icons/trash.tsx
deleted file mode 100644
index 3fa7e58..0000000
--- a/components/icons/trash.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { SVGProps } from "react";
-
-export const TrashIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    aria-hidden="true"
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M7.86847 5H3.25C2.83579 5 2.5 5.33579 2.5 5.75C2.5 6.16421 2.83579 6.5 3.25 6.5H3.99997C3.99999 6.5174 4.00061 6.53492 4.00184 6.55253L4.90696 19.4426C5.00811 20.8831 6.20617 22 7.6502 22H16.3498C17.7938 22 18.9919 20.8831 19.093 19.4426L19.9982 6.55253C19.9994 6.53492 20 6.5174 20 6.5H20.75C21.1642 6.5 21.5 6.16421 21.5 5.75C21.5 5.33579 21.1642 5 20.75 5H16.1315C15.6816 3.13507 14.003 1.75 12 1.75C9.99701 1.75 8.31844 3.13507 7.86847 5ZM9.43728 5H14.5627C14.1628 3.97583 13.1658 3.25 12 3.25C10.8342 3.25 9.83724 3.97583 9.43728 5ZM10 9.75C10.4142 9.75 10.75 10.0858 10.75 10.5V16.25C10.75 16.6642 10.4142 17 10 17C9.58579 17 9.25 16.6642 9.25 16.25V10.5C9.25 10.0858 9.58579 9.75 10 9.75ZM14 9.75C14.4142 9.75 14.75 10.0858 14.75 10.5V16.25C14.75 16.6642 14.4142 17 14 17C13.5858 17 13.25 16.6642 13.25 16.25V10.5C13.25 10.0858 13.5858 9.75 14 9.75Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
diff --git a/components/model-selector.tsx b/components/model-selector.tsx
index f49311d..7fc2ed6 100644
--- a/components/model-selector.tsx
+++ b/components/model-selector.tsx
@@ -1,7 +1,6 @@
 "use client";
+import { Check, ChevronDown } from "@keyline-icons/react";
 
-import { CheckMarkMediumIcon } from "@/components/icons/check-mark-medium";
-import { ChevronGrabberVerticalIcon } from "@/components/icons/chevron-grabber-vertical";
 import { ClaudeIcon } from "@/components/icons/claude";
 import { GeminiIcon } from "@/components/icons/gemini";
 import { GrokIcon } from "@/components/icons/grok";
@@ -52,10 +51,10 @@ export const ModelSelector = ({ value, onValueChange }: ModelSelectorProps) => {
     <DropdownMenu>
       <DropdownMenu.Trigger
         render={
-          <Button variant="ghost" size="md" type="button" className="rounded-full gap-1.5">
+          <Button variant="ghost" size="sm" type="button" className="gap-1 pr-1.5 pl-2 text-sm">
             {CurrentProviderIcon ? <CurrentProviderIcon className="text-ink-secondary" /> : null}
             <span>{currentLabel}</span>
-            <ChevronGrabberVerticalIcon className="text-ink-tertiary" />
+            <ChevronDown className="size-[13px] text-ink-tertiary" />
           </Button>
         }
       />
@@ -73,7 +72,7 @@ export const ModelSelector = ({ value, onValueChange }: ModelSelectorProps) => {
                 {group.models.map((model) => {
                   return (
                     <DropdownMenu.Item key={model.id} onClick={() => onValueChange(model.id)}>
-                      <CheckMarkMediumIcon className={cn(value !== model.id && "opacity-0")} />
+                      <Check className={cn(value !== model.id && "opacity-0")} />
                       <span>{model.label}</span>
                     </DropdownMenu.Item>
                   );
diff --git a/components/playground-settings.tsx b/components/playground-settings.tsx
index 1aa8012..719688d 100644
--- a/components/playground-settings.tsx
+++ b/components/playground-settings.tsx
@@ -1,36 +1,28 @@
 "use client";
+import { Monitor, Moon, Settings as SettingsIcon, Sun, X } from "@keyline-icons/react";
 
-// Playground settings — a Linear-style display-options popover behind a single
-// icon trigger in the chat area's top-right corner, on every chat page. The
-// panel is split into four tabs (Theme / Thread / Composer / Key), mirroring
-// Linear's List/Board/Timeline switcher. Configuration persists via the
-// settings store; demo triggers (ask-user questions, the context strip) are
-// ephemeral playground-store state. The visitor's OpenAI key deliberately
-// persists nowhere client-side — see KeyTab. Desktop-only — hidden below md.
+// Playground settings — a Linear-style floating sidebar docked in the chat
+// area's top-right corner, on every chat page. Opening it pushes the chat over
+// rather than covering it. Three tabs: Theme / Chat / Key. Configuration
+// persists via the settings store; demo triggers (ask-user questions, the
+// context strip) are ephemeral playground-store state. The visitor's OpenAI key
+// deliberately persists nowhere client-side — see KeyTab. Desktop-only.
 
 import { Tabs } from "@base-ui/react/tabs";
 import { AnimatePresence, MotionConfig, motion } from "motion/react";
-import { type ReactNode, useState } from "react";
+import { type ReactNode, useId, useRef, useState } from "react";
+import { flushSync } from "react-dom";
 import type { ComposerSubmitOn } from "@/components/ai/composer";
 import type { ThreadAutoScrollMode } from "@/components/ai/thread";
-import { AppearanceIcon } from "@/components/icons/appearance";
-import { InputFormIcon } from "@/components/icons/input-form";
-import { MoonIcon } from "@/components/icons/moon";
-import { OpenAIIcon } from "@/components/icons/openai";
-import { SettingsIcon } from "@/components/icons/settings";
-import { SettingsSliderThreeIcon } from "@/components/icons/settings-slider-three";
-import { SquareLinesIcon } from "@/components/icons/square-lines";
-import { SunIcon } from "@/components/icons/sun";
 import Button from "@/components/ui/button";
 import { ColorPill } from "@/components/ui/color-pill";
 import { IconButton } from "@/components/ui/icon-button";
 import Input from "@/components/ui/input";
 import { Kbd } from "@/components/ui/kbd";
-import { Popover } from "@/components/ui/popover";
 import { PresetSwatch } from "@/components/ui/preset-swatch";
-import { Scaler } from "@/components/ui/scaler";
 import Select from "@/components/ui/select";
 import { Settings } from "@/components/ui/settings";
+import { Slider } from "@/components/ui/slider";
 import { Switch } from "@/components/ui/switch";
 import { ToggleGroup } from "@/components/ui/toggle-group";
 import { useApiKey } from "@/hooks/use-api-key";
@@ -47,10 +39,10 @@ import { usePlaygroundStore } from "@/lib/store/playground";
 import { type CommandSurface, useSettingsStore } from "@/lib/store/settings";
 import { cn } from "@/lib/utils";
 
-// Right-aligned compact controls share one footprint across the rows.
-const COMPACT_CONTROL_CLASS = "h-8 w-28 shrink-0";
+// Right-aligned compact selects share one footprint across the rows.
+const COMPACT_CONTROL_CLASS = "h-7 w-[8.5rem] shrink-0";
 
-const PLAYGROUND_ROW_CLASS = "min-h-11 border-0 px-3 py-2";
+const PLAYGROUND_ROW_CLASS = "min-h-14 border-0 px-3.5 py-2.5";
 
 // Label (with optional description) and control on one row.
 const LabeledRow = ({
@@ -73,7 +65,7 @@ const LabeledRow = ({
 
 // Divider-separated group inside a tab panel.
 const SettingsSection = ({ children }: { children: ReactNode }) => (
-  <div className="border-b border-primary-border py-1 last:border-0">{children}</div>
+  <div className="border-ink-primary/6 border-b py-1 last:border-0">{children}</div>
 );
 
 // Inline boolean row. The Settings.Label span carries no id, so the switch
@@ -120,11 +112,11 @@ const CUSTOM_PRESET_VALUE = "__custom__";
 const MODE_OPTIONS: ReadonlyArray<{
   value: InterfaceThemeMode;
   label: string;
-  Icon: typeof SunIcon;
+  Icon: typeof Sun;
 }> = [
-  { value: "light", label: "Light", Icon: SunIcon },
-  { value: "dark", label: "Dark", Icon: MoonIcon },
-  { value: "system", label: "System", Icon: AppearanceIcon },
+  { value: "light", label: "Light", Icon: Sun },
+  { value: "dark", label: "Dark", Icon: Moon },
+  { value: "system", label: "System", Icon: Monitor },
 ];
 
 const ThemeTab = () => {
@@ -145,7 +137,7 @@ const ThemeTab = () => {
 
   return (
     <div className="py-1">
-      <LabeledRow label="Mode" description="Light, dark, or follow the system">
+      <LabeledRow label="Mode" description="Light, dark or system.">
         <ToggleGroup
           variant="segmented"
           value={mode}
@@ -160,11 +152,11 @@ const ThemeTab = () => {
         </ToggleGroup>
       </LabeledRow>
 
-      <LabeledRow label="Preset" description="Pick a starter palette">
+      <LabeledRow label="Preset" description="A starting palette.">
         <Select value={selectedPresetValue} onValueChange={handlePresetChange}>
-          <Select.Trigger className={cn(COMPACT_CONTROL_CLASS, "rounded-md px-1")} size="sm">
+          <Select.Trigger className={cn(COMPACT_CONTROL_CLASS, "pr-1.5 pl-[5px]")} size="sm">
             <Select.Value>
-              <div className="flex items-center gap-2">
+              <div className="flex items-center gap-1.5">
                 <PresetSwatch seeds={seeds} />
                 <span>{preset?.label ?? "Custom"}</span>
               </div>
@@ -187,44 +179,49 @@ const ThemeTab = () => {
         </Select>
       </LabeledRow>
 
-      <LabeledRow label="Accent" description="Buttons, links, and focus rings">
+      <LabeledRow label="Accent" description="Buttons, links and focus.">
         <ColorPill
           size="compact"
-          className={COMPACT_CONTROL_CLASS}
           value={seeds.acc}
           onValueChange={(value) => setSeed("acc", value)}
         />
       </LabeledRow>
 
-      <LabeledRow label="Background" description="Workspace base color">
+      <LabeledRow label="Background" description="Surfaces derive from it.">
         <ColorPill
           size="compact"
-          className={COMPACT_CONTROL_CLASS}
           value={seeds.bg}
           onValueChange={(value) => setSeed("bg", value)}
         />
       </LabeledRow>
 
-      <LabeledRow label="Foreground" description="Workspace text color">
+      <LabeledRow label="Foreground" description="Text and icons.">
         <ColorPill
           size="compact"
-          className={COMPACT_CONTROL_CLASS}
           value={seeds.fg}
           onValueChange={(value) => setSeed("fg", value)}
         />
       </LabeledRow>
 
-      <LabeledRow label="Contrast" description="Surface elevation strength">
-        <Scaler
-          size="compact"
-          className={COMPACT_CONTROL_CLASS}
+      <LabeledRow label="Contrast" description="Surface separation.">
+        <Slider
+          aria-label="Contrast"
+          className="w-[6.5rem]"
           value={seeds.con}
-          onValueChange={(value) => setSeed("con", value)}
+          onValueChange={(value) => {
+            if (typeof value === "number") setSeed("con", value);
+          }}
           min={CONTRAST_MIN}
           max={CONTRAST_MAX}
           step={CONTRAST_STEP}
-          tickStep={0.05}
-        />
+        >
+          <Slider.Control>
+            <Slider.Track>
+              <Slider.Indicator />
+              <Slider.Thumb aria-label="Contrast" />
+            </Slider.Track>
+          </Slider.Control>
+        </Slider>
       </LabeledRow>
     </div>
   );
@@ -258,7 +255,7 @@ const ThreadTab = () => {
             if (value) setScrollMode(value);
           }}
         >
-          <Select.Trigger className={cn(COMPACT_CONTROL_CLASS, "rounded-md")} size="sm">
+          <Select.Trigger className={COMPACT_CONTROL_CLASS} size="sm">
             <Select.Value>
               {SCROLL_MODE_OPTIONS.find((option) => option.value === scrollMode)?.label}
             </Select.Value>
@@ -327,7 +324,7 @@ const ComposerTab = () => {
               if (value) setCommandSurface(value);
             }}
           >
-            <Select.Trigger className={cn(COMPACT_CONTROL_CLASS, "rounded-md")} size="sm">
+            <Select.Trigger className={COMPACT_CONTROL_CLASS} size="sm">
               <Select.Value>
                 {COMMAND_SURFACE_OPTIONS.find((option) => option.value === commandSurface)?.label}
               </Select.Value>
@@ -348,7 +345,7 @@ const ComposerTab = () => {
               if (value) setSubmitOn(value);
             }}
           >
-            <Select.Trigger className={cn(COMPACT_CONTROL_CLASS, "rounded-md")} size="sm">
+            <Select.Trigger className={COMPACT_CONTROL_CLASS} size="sm">
               <Select.Value>
                 {SUBMIT_OPTIONS.find((option) => option.value === submitOn)?.label}
               </Select.Value>
@@ -411,14 +408,10 @@ const ComposerTab = () => {
             <Settings.Description>Fire a demo question flow</Settings.Description>
           </Settings.LabelGroup>
           <Settings.Control className="w-auto gap-1.5">
-            <Button size="xs" variant="secondary" onClick={() => setDemoQuestions(singleQuestion)}>
+            <Button size="xs" variant="primary" onClick={() => setDemoQuestions(singleQuestion)}>
               Single
             </Button>
-            <Button
-              size="xs"
-              variant="secondary"
-              onClick={() => setDemoQuestions(multipleQuestions)}
-            >
+            <Button size="xs" variant="primary" onClick={() => setDemoQuestions(multipleQuestions)}>
               Multi
             </Button>
           </Settings.Control>
@@ -455,7 +448,7 @@ const KeyTab = () => {
         {isSet ? (
           <LabeledRow label="OpenAI API key" description="Set on this device.">
             <Button
-              variant="secondary"
+              variant="primary"
               onClick={clear}
               disabled={isSubmitting}
               aria-label="Clear the stored OpenAI API key"
@@ -464,7 +457,7 @@ const KeyTab = () => {
             </Button>
           </LabeledRow>
         ) : (
-          <div className="flex flex-col gap-2 px-3 py-2">
+          <div className="flex flex-col gap-2 px-3.5 py-2.5">
             <Settings.LabelGroup>
               <Settings.Label>OpenAI API key</Settings.Label>
               <Settings.Description>
@@ -495,9 +488,9 @@ const KeyTab = () => {
         )}
         {/* Outside the branches on purpose: clear() runs from the is-set side, so
             an error rendered only in the not-set branch could never be seen. */}
-        {error && <p className="px-3 pb-2 text-destructive text-xs">{error}</p>}
+        {error && <p className="px-3.5 pb-2 text-red-600 text-xs dark:text-red-400">{error}</p>}
       </SettingsSection>
-      <p className="px-3 py-2 text-xs text-ink-tertiary">
+      <p className="px-3.5 py-2.5 text-ink-secondary text-xs leading-[18px]">
         Your key is sent to this site's server to forward each request to OpenAI, and is kept only
         for the length of that request — never written to disk or logged. It is stored in your
         browser in a cookie that scripts cannot read.{" "}
@@ -515,16 +508,25 @@ const KeyTab = () => {
   );
 };
 
+// Thread and composer options share one tab: both shape the chat itself.
+const ChatTab = () => (
+  <>
+    <SettingsSection>
+      <ThreadTab />
+    </SettingsSection>
+    <ComposerTab />
+  </>
+);
+
 const PLAYGROUND_TABS = [
-  { value: "theme", label: "Theme", Icon: SettingsSliderThreeIcon, content: <ThemeTab /> },
-  { value: "thread", label: "Thread", Icon: SquareLinesIcon, content: <ThreadTab /> },
-  { value: "composer", label: "Composer", Icon: InputFormIcon, content: <ComposerTab /> },
-  { value: "key", label: "Key", Icon: OpenAIIcon, content: <KeyTab /> },
+  { value: "theme", label: "Theme", content: <ThemeTab /> },
+  { value: "chat", label: "Chat", content: <ChatTab /> },
+  { value: "key", label: "Key", content: <KeyTab /> },
 ] as const;
 
 type PlaygroundTabValue = (typeof PLAYGROUND_TABS)[number]["value"];
 
-// One spring for the shell's height and the panels' travel, so everything settles
+// One spring for the card's height and the panels' travel, so everything settles
 // together. bounce: 0 keeps a settings panel from wobbling.
 const PANEL_SPRING = { duration: 0.5, type: "spring", bounce: 0 } as const;
 
@@ -537,10 +539,21 @@ const panelVariants = {
   exit: (direction: number) => ({ x: `${-110 * direction}%`, opacity: 0 }),
 };
 
+/**
+ * The gear trigger plus the docked card. Rendered as a flex sibling of the
+ * thread: the slot animates its width so the chat column narrows and re-centres
+ * instead of sitting under the card. The card stays mounted (inert while closed)
+ * and slides in from the right edge, where the viewport clips it.
+ */
 export const PlaygroundSettings = () => {
-  // The four panels differ in height, so the shell animates to the measured
-  // content. Because it is a ResizeObserver, content that grows *inside* a tab
-  // (the key form revealing a validation error) animates too, not just switches.
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const cardRef = useRef<HTMLElement>(null);
+  const panelId = useId();
+
+  // The panels differ in height, so the card animates to the measured content.
+  // Because it is a ResizeObserver, content that grows *inside* a tab (the key
+  // form revealing a validation error) animates too, not just switches.
   const [panelRef, { height }] = useMeasure<HTMLDivElement>();
 
   // Controlled rather than defaultValue: the slide needs to know which way the
@@ -556,50 +569,87 @@ export const PlaygroundSettings = () => {
     setActiveTab(next);
   };
 
+  // Focus follows the toggle: into the card on open, back to the gear on close.
+  // preventScroll: the card starts off-screen, and a plain focus() would scroll
+  // the clipped viewport sideways to reveal it.
+  const show = () => {
+    flushSync(() => setOpen(true));
+    cardRef.current?.focus({ preventScroll: true });
+  };
+  const hide = () => {
+    flushSync(() => setOpen(false));
+    triggerRef.current?.focus({ preventScroll: true });
+  };
+
   const activePanel = PLAYGROUND_TABS.find((tab) => tab.value === activeTab);
 
   return (
-    <div data-slot="playground-settings" className="absolute top-2 right-2 z-20 hidden md:block">
-      <Popover>
-        <Popover.Trigger
-          render={
-            <IconButton
-              variant="primary"
-              className="rounded-full"
-              aria-label="Playground settings"
-            />
-          }
-        >
-          <SettingsIcon className="size-4" />
-        </Popover.Trigger>
-        <Popover.Content
-          align="end"
-          sideOffset={4}
-          className="w-96 border-0 p-0 shadow-none smooth-shadow-ring-sm!"
+    <>
+      <IconButton
+        ref={triggerRef}
+        variant="primary"
+        aria-label="Playground settings"
+        aria-expanded={open}
+        aria-controls={panelId}
+        onClick={show}
+        className={cn(
+          "absolute top-3 right-3 z-20 hidden transition-[opacity,visibility] duration-200 md:inline-flex",
+          open && "invisible opacity-0",
+        )}
+      >
+        <SettingsIcon />
+      </IconButton>
+      <div
+        data-slot="playground-settings"
+        data-open={open ? "" : undefined}
+        className="relative hidden w-0 shrink-0 transition-[width] duration-200 ease-out data-open:w-[328px] motion-reduce:transition-none md:block"
+      >
+        <aside
+          ref={cardRef}
+          id={panelId}
+          tabIndex={-1}
+          aria-label="Playground settings"
+          inert={!open}
+          onKeyDown={(event) => {
+            if (event.key === "Escape" && !event.defaultPrevented) hide();
+          }}
+          className={cn(
+            "absolute top-3 right-3 z-20 flex max-h-[calc(100%-1.5rem)] w-[304px] flex-col overflow-hidden rounded-2xl bg-primary-bg shadow-card outline-none",
+            "transition-transform duration-200 ease-out motion-reduce:transition-none",
+            open ? "translate-x-0" : "pointer-events-none translate-x-[calc(100%+1rem)]",
+          )}
         >
-          <Tabs.Root value={activeTab} onValueChange={handleTabChange}>
-            <Tabs.List className="flex gap-1 border-b border-primary-border p-2">
-              {PLAYGROUND_TABS.map((tab) => (
-                <Tabs.Tab
-                  key={tab.value}
-                  value={tab.value}
-                  className={cn(
-                    "flex h-8 shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-full px-2.5 text-sm font-medium text-ink-secondary outline-none transition-colors border border-transparent",
-                    "hover:bg-primary-bg-hover hover:text-ink-primary focus-visible:ring-2 focus-visible:ring-accent-bg/50",
-                    "data-active:bg-primary-bg data-active:text-ink-primary data-active:border-primary-border-active",
-                    "[&>svg]:size-3.5 [&>svg]:shrink-0 [&>svg]:text-ink-tertiary data-active:[&>svg]:text-ink-primary",
-                  )}
-                >
-                  <tab.Icon />
-                  {tab.label}
-                </Tabs.Tab>
-              ))}
-            </Tabs.List>
+          {/* Capped at the viewport: the tab bar stays, the panel below scrolls. */}
+          <Tabs.Root
+            value={activeTab}
+            onValueChange={handleTabChange}
+            className="flex min-h-0 flex-col"
+          >
+            <div className="flex shrink-0 items-center gap-1.5 p-2 shadow-[inset_0_-1px_0_color-mix(in_oklab,var(--color-ink-primary)_6%,transparent)]">
+              <Tabs.List className="flex flex-1 gap-0.5 rounded-full bg-base-bg p-0.5">
+                {PLAYGROUND_TABS.map((tab) => (
+                  <Tabs.Tab
+                    key={tab.value}
+                    value={tab.value}
+                    className={cn(
+                      "flex h-7 flex-1 cursor-pointer items-center justify-center rounded-full font-medium text-ink-secondary text-sm transition-[color,background-color,box-shadow]",
+                      "hover:text-ink-primary focus-visible:outline-2 focus-visible:outline-accent-bg/60 focus-visible:outline-offset-1",
+                      "data-active:bg-raised data-active:text-ink-primary data-active:shadow-raised",
+                    )}
+                  >
+                    {tab.label}
+                  </Tabs.Tab>
+                ))}
+              </Tabs.List>
+              <IconButton variant="ghost" aria-label="Close settings" onClick={hide}>
+                <X />
+              </IconButton>
+            </div>
             <MotionConfig transition={PANEL_SPRING}>
               <motion.div
                 initial={false}
                 animate={{ height: height || "auto" }}
-                className="overflow-hidden"
+                className="scroll-mask-y min-h-0 overflow-y-auto overscroll-contain"
               >
                 <div ref={panelRef} className="relative">
                   <Tabs.Panel value={activeTab}>
@@ -611,6 +661,7 @@ export const PlaygroundSettings = () => {
                         animate="active"
                         exit="exit"
                         custom={direction}
+                        className="py-1"
                       >
                         {activePanel?.content}
                       </motion.div>
@@ -620,8 +671,8 @@ export const PlaygroundSettings = () => {
               </motion.div>
             </MotionConfig>
           </Tabs.Root>
-        </Popover.Content>
-      </Popover>
-    </div>
+        </aside>
+      </div>
+    </>
   );
 };
diff --git a/components/site-shell.tsx b/components/site-shell.tsx
new file mode 100644
index 0000000..34bd972
--- /dev/null
+++ b/components/site-shell.tsx
@@ -0,0 +1,213 @@
+"use client";
+/// <reference types="react/canary" />
+
+import { BookOpen } from "@keyline-icons/react";
+// Keyline has no brand or sandbox icons, so these stay on Tabler.
+import { IconBrandGithub, IconBrandNpm, IconSandbox } from "@tabler/icons-react";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { type ReactNode, useEffect, useState, ViewTransition } from "react";
+import { ChatNav } from "@/components/chat-nav";
+import { DocsNav, type DocsTree, toGroups, toSuggestions } from "@/components/docs/docs-nav";
+import { DocsSearch } from "@/components/docs/docs-search";
+import { DocsThemeToggle } from "@/components/docs/docs-theme-toggle";
+import { LogoTile } from "@/components/icons/logo-tile";
+import { IconButton } from "@/components/ui/icon-button";
+import { Kbd } from "@/components/ui/kbd";
+import { Sidebar } from "@/components/ui/sidebar";
+import Tooltip from "@/components/ui/tooltip";
+import { useAsRef } from "@/hooks/use-as-ref";
+import { cn } from "@/lib/utils";
+
+type Mode = "docs" | "playground";
+
+// Declaration order is slide order: Docs sits left of Playground.
+// `key` is the second half of its G-then-key shortcut.
+const MODES: { value: Mode; label: string; icon: ReactNode; key: string }[] = [
+  { value: "docs", label: "Docs", icon: <BookOpen />, key: "D" },
+  { value: "playground", label: "Playground", icon: <IconSandbox />, key: "P" },
+];
+
+// The chat routes are the playground; every other page is the docs.
+const modeOf = (pathname: string): Mode =>
+  pathname === "/playground" || pathname.startsWith("/chat/") ? "playground" : "docs";
+
+// G then D / G then P switch sides, like Linear's go-to sequences: the second
+// key has to follow within a second.
+const SEQUENCE_MS = 1000;
+
+// Plain-letter shortcuts must never fire while someone is typing.
+const isTyping = (target: EventTarget | null) =>
+  target instanceof HTMLElement &&
+  (target.isContentEditable || target.closest("input, textarea, select") !== null);
+
+const useGoToShortcuts = (go: (mode: Mode) => void) => {
+  const goRef = useAsRef(go);
+
+  useEffect(() => {
+    let armedAt = 0;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.defaultPrevented || event.repeat || event.metaKey || event.ctrlKey || event.altKey)
+        return;
+      if (isTyping(event.target)) return;
+      const key = event.key.toUpperCase();
+      const target = MODES.find((mode) => mode.key === key);
+      if (target && Date.now() - armedAt < SEQUENCE_MS) {
+        event.preventDefault();
+        armedAt = 0;
+        goRef.current(target.value);
+        return;
+      }
+      armedAt = key === "G" ? Date.now() : 0;
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, []);
+};
+
+/**
+ * One shell for the whole site, mounted in the root layout so moving between the
+ * docs and the playground keeps the sidebar — its open state and width — and
+ * only its body slides over, picked by the icon switch in the header. The
+ * collapse button sits in each side's top bar instead. A client component because `Sidebar` is an
+ * `Object.assign` compound, which a server component would read as a proxy.
+ *
+ * It reads no cookie: the docs stay statically rendered, so every full load
+ * starts with the sidebar open.
+ */
+export const SiteShell = ({
+  tree,
+  version,
+  children,
+}: {
+  tree: DocsTree;
+  /** The released package version, shown in the footer and linked to its notes. */
+  version: string;
+  children: ReactNode;
+}) => {
+  const pathname = usePathname();
+  const mode = modeOf(pathname);
+  const groups = toGroups(tree.children);
+
+  // Each side reopens on the page you left it at.
+  const [lastPath, setLastPath] = useState<Record<Mode, string>>({
+    docs: "/",
+    playground: "/playground",
+  });
+  if (lastPath[mode] !== pathname) setLastPath({ ...lastPath, [mode]: pathname });
+
+  const router = useRouter();
+  useGoToShortcuts((next) => {
+    if (next !== mode) router.push(lastPath[next]);
+  });
+
+  return (
+    <Sidebar.Provider>
+      <Sidebar>
+        {/* Centred on the viewport's top bar: both start 8px down, and the bar
+            (52px) sits under the viewport's 1px border, hence 54px. The extra
+            height is taken back from the gap below. */}
+        <Sidebar.Header className="-mb-2 h-[54px] shrink-0 flex-row items-center justify-between pr-0.5 pl-1">
+          <Link
+            href="/"
+            className="flex items-center gap-2.5 text-ink-primary"
+            aria-label="@intentface/chat"
+          >
+            <LogoTile />
+            <span className="font-semibold text-md tracking-[-0.01em]">intentface/chat</span>
+          </Link>
+          <div className="flex items-center gap-1">
+            <DocsSearch suggestions={toSuggestions(groups)} />
+            <nav aria-label="Site" className="flex gap-0.5 rounded-full bg-ink-primary/5 p-0.5">
+              {MODES.map(({ value, label, icon, key }) => (
+                <Tooltip key={value}>
+                  <Tooltip.Trigger
+                    render={
+                      <Link
+                        href={lastPath[value]}
+                        aria-label={label}
+                        aria-current={mode === value ? "true" : undefined}
+                        aria-keyshortcuts={`G ${key}`}
+                        className={cn(
+                          "grid size-6 place-items-center rounded-full transition-[color,background-color,box-shadow] [&>svg]:size-[15px]",
+                          "focus-visible:outline-2 focus-visible:outline-accent-bg/60 focus-visible:outline-offset-1",
+                          mode === value
+                            ? "bg-raised text-ink-primary shadow-raised"
+                            : "text-ink-secondary hover:text-ink-primary",
+                        )}
+                      >
+                        {icon}
+                      </Link>
+                    }
+                  />
+                  <Tooltip.Content side="bottom" className="flex items-center gap-2">
+                    {label}
+                    <span className="flex gap-0.5">
+                      <Kbd size="sm">G</Kbd>
+                      <Kbd size="sm">{key}</Kbd>
+                    </span>
+                  </Tooltip.Content>
+                </Tooltip>
+              ))}
+            </nav>
+          </div>
+        </Sidebar.Header>
+        <Sidebar.Views value={mode}>
+          <Sidebar.View value="docs">
+            <DocsNav groups={groups} />
+          </Sidebar.View>
+          <Sidebar.View value="playground">
+            <ChatNav />
+          </Sidebar.View>
+        </Sidebar.Views>
+        {/* Shared by both sides, so it stays put while the views slide. */}
+        <Sidebar.Footer className="flex-row items-center justify-between border-ink-primary/8 border-t pt-2 pr-1 pl-0.5">
+          <Link
+            href="/changelog"
+            aria-label={`Version ${version}, see the changelog`}
+            className="flex h-7 items-center rounded-md px-1.5 font-mono text-ink-secondary text-xs transition-colors hover:bg-ink-primary/5 hover:text-ink-primary focus-visible:outline-2 focus-visible:outline-accent-bg/60"
+          >
+            v{version}
+          </Link>
+          <div className="flex items-center gap-0.5">
+            <FooterLink
+              href="https://github.com/Intentface/intentface-chat"
+              label="GitHub"
+              icon={<IconBrandGithub />}
+            />
+            <FooterLink
+              href="https://www.npmjs.com/package/@intentface/chat"
+              label="npm"
+              icon={<IconBrandNpm />}
+            />
+            <DocsThemeToggle />
+          </div>
+        </Sidebar.Footer>
+      </Sidebar>
+      <Sidebar.Inset>
+        <Sidebar.Viewport>
+          {/* Keyed by side: switching sides swaps the boundary, so the old and new
+              viewport cross-dissolve; pages within a side don't animate. */}
+          <ViewTransition key={mode} name="site-viewport" update="none">
+            {children}
+          </ViewTransition>
+        </Sidebar.Viewport>
+      </Sidebar.Inset>
+    </Sidebar.Provider>
+  );
+};
+
+const FooterLink = ({ href, label, icon }: { href: string; label: string; icon: ReactNode }) => (
+  <IconButton
+    variant="ghost"
+    size="sm"
+    nativeButton={false}
+    aria-label={label}
+    className="rounded-md"
+    render={
+      <a href={href} target="_blank" rel="noreferrer">
+        {icon}
+      </a>
+    }
+  />
+);
diff --git a/components/ui/button-group.tsx b/components/ui/button-group.tsx
index 25e5119..b0c1ffd 100644
--- a/components/ui/button-group.tsx
+++ b/components/ui/button-group.tsx
@@ -43,7 +43,7 @@ function ButtonGroupText({ className, render, ...props }: useRender.ComponentPro
     props: mergeProps<"div">(
       {
         className: cn(
-          "bg-muted gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
+          "bg-base-bg text-ink-secondary gap-2 rounded-lg px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
           className,
         ),
       },
@@ -66,7 +66,7 @@ function ButtonGroupSeparator({
       data-slot="button-group-separator"
       orientation={orientation}
       className={cn(
-        "bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+        "bg-ink-primary/8 relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
         className,
       )}
       {...props}
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 7981b2b..a43a1e4 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -6,25 +6,30 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none active:scale-[0.98] cursor-pointer",
+  [
+    "group/button inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-full font-medium text-sm transition-[color,background-color,box-shadow,scale] active:scale-[0.98]",
+    "focus-visible:outline-2 focus-visible:outline-accent-bg/60 focus-visible:outline-offset-2",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  ],
   {
     variants: {
       variant: {
-        primary:
-          "bg-primary-bg border-primary-border text-ink-primary hover:bg-primary-bg-hover hover:border-primary-border-hover",
-        secondary:
-          "bg-secondary-bg border-secondary-border text-ink-primary hover:bg-secondary-bg-hover",
-        tertiary:
-          "bg-tertiary-bg border-tertiary-border text-ink-primary hover:bg-tertiary-bg-hover",
-        ghost: "hover:bg-primary-bg-hover",
-        link: "text-primary-bg underline-offset-4 hover:underline",
+        // Raised: lit from above, the default control on any surface.
+        primary: "bg-raised text-ink-primary shadow-raised hover:bg-raised-hover",
+        // Flat fills for secondary actions that shouldn't lift off the surface.
+        secondary: "bg-base-bg text-ink-primary hover:bg-base-bg-hover",
+        tertiary: "bg-tertiary-bg text-ink-primary hover:bg-tertiary-bg-hover",
+        accent: "bg-accent-raised text-white shadow-accent hover:bg-accent-raised-hover",
+        ghost: "text-ink-body hover:bg-ink-primary/5 hover:text-ink-primary",
+        link: "text-accent-bg underline-offset-4 hover:underline",
       },
       size: {
-        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-        md: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
-        xl: "h-10 gap-2 px-3 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        xs: "h-6 gap-1 px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        md: "h-8 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        lg: "h-9 gap-1.5 px-3.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        xl: "h-10 gap-2 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
       },
     },
     defaultVariants: {
diff --git a/components/ui/checkbox.tsx b/components/ui/checkbox.tsx
index b387e07..cbad6bc 100644
--- a/components/ui/checkbox.tsx
+++ b/components/ui/checkbox.tsx
@@ -1,17 +1,17 @@
 "use client";
 
 import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+import { Check } from "@keyline-icons/react";
 
-import { CheckMarkMediumIcon } from "@/components/icons/check-mark-medium";
 import { cn } from "@/lib/utils";
 
 const Checkbox = ({ className, ...props }: CheckboxPrimitive.Root.Props) => (
   <CheckboxPrimitive.Root
     data-slot="checkbox"
     className={cn(
-      "flex size-4 items-center justify-center rounded-[4px] border border-tertiary-border bg-tertiary-bg transition-colors",
-      "data-checked:bg-tertiary-bg-active data-checked:text-ink-primary",
-      "focus-visible:ring-2 focus-visible:ring-slate-8 focus-visible:outline-none",
+      "flex size-4 items-center justify-center rounded-[4px] bg-raised shadow-raised transition-[background-color,box-shadow]",
+      "data-checked:bg-accent-raised data-checked:text-white data-checked:shadow-accent",
+      "focus-visible:outline-2 focus-visible:outline-accent-bg/60 focus-visible:outline-offset-2",
       "disabled:cursor-not-allowed disabled:opacity-50",
       "peer relative shrink-0",
       className,
@@ -22,7 +22,7 @@ const Checkbox = ({ className, ...props }: CheckboxPrimitive.Root.Props) => (
       data-slot="checkbox-indicator"
       className="grid place-content-center text-current transition-none [&>svg]:size-3"
     >
-      <CheckMarkMediumIcon />
+      <Check strokeWidth={2.5} />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 );
diff --git a/components/ui/color-pill.tsx b/components/ui/color-pill.tsx
index dcf1e9f..6623f45 100644
--- a/components/ui/color-pill.tsx
+++ b/components/ui/color-pill.tsx
@@ -3,8 +3,6 @@
 import { useCallback, useState } from "react";
 import { HexColorPicker } from "react-colorful";
 
-import { ChevronDownMediumIcon } from "@/components/icons/chevron-down-medium";
-import { EyedropperIcon } from "@/components/icons/eyedropper";
 import { Popover } from "@/components/ui/popover";
 import { HexSchema } from "@/lib/interface-theme";
 import { cn } from "@/lib/utils";
@@ -19,10 +17,11 @@ type ColorPillProps = {
 };
 
 const colorPillSizes = {
-  default: "box-border h-9 w-full px-2.5",
-  compact: "box-border h-8 w-28 shrink-0 px-2",
+  default: "h-9 w-full pr-2.5 pl-2",
+  compact: "h-7 w-[5.75rem] shrink-0 pr-2 pl-1.5",
 } as const;
 
+// A raised field: the swatch opens the picker, the hex text is editable.
 export const ColorPill = ({
   id,
   value,
@@ -44,33 +43,26 @@ export const ColorPill = ({
     <Popover>
       <div
         className={cn(
-          "relative flex items-center gap-1.5 rounded-md border border-primary-border",
+          "relative flex items-center gap-2 rounded-[7px] bg-raised shadow-raised",
           colorPillSizes[size],
           className,
         )}
-        style={{
-          background: value,
-          color: `oklch(from ${value} calc(round(1 - l)) 0 0)`,
-        }}
       >
         <Popover.Trigger
           disabled={disabled}
-          className="flex size-5 shrink-0 items-center justify-center rounded-sm outline-none transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-accent-bg/50 disabled:cursor-not-allowed disabled:opacity-50"
+          className="size-4 shrink-0 cursor-pointer rounded-[4px] shadow-[inset_0_0_0_1px_rgb(0_0_0/0.12)] transition-opacity hover:opacity-85 focus-visible:outline-2 focus-visible:outline-accent-bg/60 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:shadow-[inset_0_0_0_1px_rgb(255_255_255/0.14)]"
+          style={{ background: value }}
           aria-label="Pick color"
-        >
-          <EyedropperIcon className="size-3.5" />
-        </Popover.Trigger>
+        />
         <input
           id={id}
-          value={draft ?? value}
+          value={(draft ?? value).replace(/^#/, "")}
           onChange={(event) => setDraft(event.target.value)}
           onBlur={handleBlur}
           disabled={disabled}
           spellCheck={false}
-          className="flex-1 bg-transparent font-mono text-xs uppercase outline-none disabled:cursor-not-allowed disabled:opacity-50"
-        />
-        <ChevronDownMediumIcon
-          className={cn("size-3 shrink-0 opacity-70", size === "compact" && "hidden")}
+          aria-label="Hex color"
+          className="w-full min-w-0 flex-1 bg-transparent font-mono text-ink-body text-xs uppercase outline-none disabled:cursor-not-allowed disabled:opacity-50"
         />
       </div>
       <Popover.Content align="end" className="w-auto p-2">
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index 77f23db..43eb550 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -22,7 +22,7 @@ const DialogContent = ({
   <DialogPrimitive.Portal>
     <DialogPrimitive.Backdrop
       className={cn(
-        "fixed inset-0 z-50 bg-black/50",
+        "fixed inset-0 z-50 bg-zinc-950/16 dark:bg-black/36",
         "data-open:animate-in data-open:fade-in-0",
         "data-closed:animate-out data-closed:fade-out-0",
       )}
@@ -30,7 +30,7 @@ const DialogContent = ({
     <DialogPrimitive.Popup
       className={cn(
         "fixed top-1/2 left-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2",
-        "rounded-xl border border-secondary-border bg-secondary-bg p-6 shadow-lg",
+        "rounded-2xl bg-primary-bg p-6 shadow-overlay",
         "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
         "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         "duration-150",
diff --git a/components/ui/drawer.tsx b/components/ui/drawer.tsx
index d0fb50a..aa7a43f 100644
--- a/components/ui/drawer.tsx
+++ b/components/ui/drawer.tsx
@@ -28,10 +28,10 @@ const DrawerContent = ({
 }) => {
   return (
     <DrawerPrimitive.Portal>
-      <DrawerPrimitive.Backdrop className="data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 z-50 bg-black/50" />
+      <DrawerPrimitive.Backdrop className="data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 z-50 bg-zinc-950/16 dark:bg-black/36" />
       <DrawerPrimitive.Popup
         className={cn(
-          "bg-background fixed z-50 flex flex-col gap-4 shadow-lg transition-transform duration-200 ease-in-out",
+          "bg-primary-bg fixed z-50 flex flex-col gap-4 shadow-overlay transition-transform duration-200 ease-in-out",
           side === "right" &&
             "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm data-closed:translate-x-full",
           side === "left" &&
@@ -69,7 +69,7 @@ const DrawerDescription = ({
 }: React.ComponentProps<typeof DrawerPrimitive.Description>) => (
   <DrawerPrimitive.Description
     data-slot="sheet-description"
-    className={cn("text-muted-foreground text-sm", className)}
+    className={cn("text-ink-secondary text-sm", className)}
     {...props}
   />
 );
diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx
index 335b5d2..d846425 100644
--- a/components/ui/dropdown-menu.tsx
+++ b/components/ui/dropdown-menu.tsx
@@ -1,10 +1,8 @@
 "use client";
 
 import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { Check, ChevronRight, CircleFull } from "@keyline-icons/react";
 import type { ComponentProps, ReactNode } from "react";
-import { ArrowTriangleRightIcon } from "@/components/icons/arrow-triangle-right";
-import { CheckMarkMediumIcon } from "@/components/icons/check-mark-medium";
-import { CircleIcon } from "@/components/icons/circle";
 import { cn } from "@/lib/utils";
 
 function DropdownMenuRoot({ ...props }: MenuPrimitive.Root.Props) {
@@ -40,7 +38,7 @@ function DropdownMenuContent({
         <MenuPrimitive.Popup
           data-slot="dropdown-menu-content"
           className={cn(
-            "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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  bg-primary-bg text-ink-primary border border-primary-border min-w-32 rounded-lg p-1 shadow-md ring-0 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden",
+            "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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  bg-primary-bg text-ink-primary min-w-32 rounded-xl p-1 shadow-overlay ring-0 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden",
             className,
           )}
           {...props}
@@ -66,7 +64,7 @@ function DropdownMenuLabel({
       data-slot="dropdown-menu-label"
       data-inset={inset}
       className={cn(
-        "text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7",
+        "text-ink-secondary px-1.5 py-1 text-xs font-medium data-inset:pl-7",
         className,
       )}
       {...props}
@@ -89,8 +87,8 @@ function DropdownMenuItem({
       data-inset={inset ? "" : undefined}
       data-destructive={destructive ? "" : undefined}
       className={cn(
-        "flex items-center gap-2 rounded-sm cursor-pointer px-2 h-8 text-sm outline-none select-none",
-        "data-highlighted:text-ink-primary data-highlighted:bg-primary-bg-hover",
+        "flex items-center gap-2 rounded-lg cursor-pointer px-2 h-8 text-sm outline-none select-none",
+        "data-highlighted:text-ink-primary data-highlighted:bg-ink-primary/5",
         "data-disabled:pointer-events-none data-disabled:opacity-50",
         "data-destructive:text-destructive-foreground data-destructive:bg-destructive data-destructive:data-highlighted:bg-destructive/90",
         "data-inset:pl-7",
@@ -119,8 +117,8 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "group/dropdown-menu-sub-trigger gap-1.5 rounded-md px-1.5 h-8 text-sm font-book [&_svg:not([class*='size-'])]:size-4 [&_svg]:text-ink-secondary flex cursor-pointer items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        "data-highlighted:bg-primary-bg-hover data-popup-open:bg-primary-bg-hover",
+        "group/dropdown-menu-sub-trigger gap-1.5 rounded-lg px-1.5 h-8 text-sm font-book [&_svg:not([class*='size-'])]:size-4 [&_svg]:text-ink-secondary flex cursor-pointer items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "data-highlighted:bg-ink-primary/5 data-popup-open:bg-ink-primary/5",
         "data-disabled:pointer-events-none data-disabled:opacity-50",
         "data-inset:pl-7",
         className,
@@ -128,7 +126,7 @@ function DropdownMenuSubTrigger({
       {...props}
     >
       {children}
-      <ArrowTriangleRightIcon className="cn-rtl-flip ml-auto size-2 text-ink-tertiary group-data-highlighted/dropdown-menu-sub-trigger:text-ink-primary" />
+      <ChevronRight className="cn-rtl-flip ml-auto size-2 text-ink-tertiary group-data-highlighted/dropdown-menu-sub-trigger:text-ink-primary" />
     </MenuPrimitive.SubmenuTrigger>
   );
 }
@@ -145,7 +143,7 @@ function DropdownMenuSubContent({
     <DropdownMenuContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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  bg-primary-bg text-ink-primary min-w-[96px] rounded-lg p-1 shadow-lg duration-100 w-auto",
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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  bg-primary-bg text-ink-primary min-w-[96px] rounded-xl p-1 shadow-overlay duration-100 w-auto",
         className,
       )}
       align={align}
@@ -179,7 +177,7 @@ function DropdownMenuCheckboxItem({
     <MenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
-        "data-highlighted:bg-primary-bg-hover gap-1.5 rounded-md px-2 h-8 text-sm font-book [&_svg:not([class*='size-'])]:size-4 relative flex  cursor-pointer items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "data-highlighted:bg-ink-primary/5 gap-1.5 rounded-lg px-2 h-8 text-sm font-book [&_svg:not([class*='size-'])]:size-4 relative flex  cursor-pointer items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       checked={checked}
@@ -187,7 +185,7 @@ function DropdownMenuCheckboxItem({
     >
       <DropdownMenuIndicator data-slot="dropdown-menu-checkbox-item-indicator">
         <MenuPrimitive.CheckboxItemIndicator>
-          <CheckMarkMediumIcon />
+          <Check />
         </MenuPrimitive.CheckboxItemIndicator>
       </DropdownMenuIndicator>
       {children}
@@ -212,14 +210,14 @@ function DropdownMenuRadioItem({
       data-slot="dropdown-menu-radio-item"
       data-inset={inset}
       className={cn(
-        "data-highlighted:bg-primary-bg-hover gap-1.5 rounded-md h-8 px-2 text-sm font-book data-inset:pl-7 [&_svg:not([class*='size-'])]:size-3.5 relative flex  cursor-pointer items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "data-highlighted:bg-ink-primary/5 gap-1.5 rounded-lg h-8 px-2 text-sm font-book data-inset:pl-7 [&_svg:not([class*='size-'])]:size-3.5 relative flex  cursor-pointer items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}
     >
       <DropdownMenuIndicator data-slot="dropdown-menu-radio-item-indicator">
         <MenuPrimitive.RadioItemIndicator>
-          <CircleIcon className="size-2" />
+          <CircleFull className="size-2" />
         </MenuPrimitive.RadioItemIndicator>
       </DropdownMenuIndicator>
       {children}
@@ -240,8 +238,8 @@ function DropdownMenuSwitchItem({
       data-slot="dropdown-menu-switch-item"
       closeOnClick={closeOnClick}
       className={cn(
-        "group/dropdown-menu-switch-item flex flex-nowrap items-center gap-2 rounded-sm  cursor-pointer px-2 h-8 text-sm font-book outline-none select-none whitespace-nowrap",
-        "data-highlighted:text-ink-primary data-highlighted:bg-primary-bg-hover",
+        "group/dropdown-menu-switch-item flex flex-nowrap items-center gap-2 rounded-lg  cursor-pointer px-2 h-8 text-sm font-book outline-none select-none whitespace-nowrap",
+        "data-highlighted:text-ink-primary data-highlighted:bg-ink-primary/5",
         "data-disabled:pointer-events-none data-disabled:opacity-50",
         "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3.5 [&_svg]:shrink-0 data-highlighted:[&_svg]:text-ink-primary",
         className,
@@ -251,11 +249,11 @@ function DropdownMenuSwitchItem({
       {children}
       <DropdownMenuIndicator
         data-slot="dropdown-menu-switch-item-indicator"
-        className="px-0.5 flex items-center justify-start h-4 w-7 rounded-full transition-colors bg-base-bg group-data-checked/dropdown-menu-switch-item:bg-accent-bg"
+        className="px-0.5 flex items-center justify-start h-4 w-7 rounded-full transition-colors bg-ink-primary/15 group-data-checked/dropdown-menu-switch-item:bg-accent-bg"
       >
         <MenuPrimitive.CheckboxItemIndicator
           keepMounted
-          className="size-3 rounded-full bg-white transition-transform data-checked:translate-x-3"
+          className="size-3 rounded-full bg-white shadow-[0_0_0_0.5px_rgb(0_0_0/0.08),0_1px_2px_rgb(0_0_0/0.2),0_2px_4px_-1px_rgb(0_0_0/0.12)] transition-transform data-checked:translate-x-3"
         />
       </DropdownMenuIndicator>
     </MenuPrimitive.CheckboxItem>
@@ -266,7 +264,7 @@ function DropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.
   return (
     <MenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
-      className={cn("bg-primary-border -mx-1 my-1 h-px", className)}
+      className={cn("bg-ink-primary/6 -mx-1 my-1 h-px", className)}
       {...props}
     />
   );
@@ -276,10 +274,7 @@ function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"spa
   return (
     <span
       data-slot="dropdown-menu-shortcut"
-      className={cn(
-        "text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest",
-        className,
-      )}
+      className={cn("text-ink-tertiary ml-auto text-xs tracking-widest", className)}
       {...props}
     />
   );
diff --git a/components/ui/hover-card.tsx b/components/ui/hover-card.tsx
index 1f6689e..4802e39 100644
--- a/components/ui/hover-card.tsx
+++ b/components/ui/hover-card.tsx
@@ -33,7 +33,7 @@ function HoverCardContent({
         <PreviewCardPrimitive.Popup
           data-slot="hover-card-content"
           className={cn(
-            "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 border border-slate-7 bg-primary-bg text-ink-primary w-64 rounded-lg p-2 text-sm shadow-md duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 origin-(--transform-origin) outline-hidden",
+            "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 bg-primary-bg text-ink-primary w-64 rounded-xl p-2 text-sm shadow-overlay duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 origin-(--transform-origin) outline-hidden",
             className,
           )}
           {...props}
diff --git a/components/ui/icon-button.tsx b/components/ui/icon-button.tsx
index 7016287..01a3d70 100644
--- a/components/ui/icon-button.tsx
+++ b/components/ui/icon-button.tsx
@@ -6,26 +6,29 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const iconButtonVariants = cva(
-  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20  aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none active:scale-x-[0.99] cursor-pointer",
+  [
+    "group/button inline-flex shrink-0 cursor-pointer select-none items-center justify-center rounded-full font-medium transition-[color,background-color,box-shadow,scale] active:scale-[0.97]",
+    "focus-visible:outline-2 focus-visible:outline-accent-bg/60 focus-visible:outline-offset-2",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  ],
   {
     variants: {
       variant: {
         primary:
-          "bg-primary-bg border-primary-border text-ink-secondary hover:text-ink-primary hover:border-primary-border-hover hover:bg-primary-bg-hover",
-        secondary:
-          "bg-secondary-bg text-ink-secondary hover:text-ink-primary hover:border-secondary-border-hover hover:bg-secondary-bg-hover border-secondary-border",
+          "bg-raised text-ink-body shadow-raised hover:bg-raised-hover hover:text-ink-primary",
+        secondary: "bg-base-bg text-ink-secondary hover:bg-base-bg-hover hover:text-ink-primary",
         tertiary:
-          "bg-tertiary-bg text-ink-secondary hover:text-ink-primary hover:border-tertiary-border-hover hover:bg-tertiary-bg-hover border-tertiary-border",
-        accent: "bg-accent-bg text-white hover:bg-accent-bg-hover",
+          "bg-tertiary-bg text-ink-secondary hover:bg-tertiary-bg-hover hover:text-ink-primary",
+        accent: "bg-accent-raised text-white shadow-accent hover:bg-accent-raised-hover",
         ghost:
-          "hover:bg-primary-bg-hover hover:text-ink-primary text-ink-secondary aria-expanded:bg-muted aria-expanded:text-foreground",
-        link: "text-primary-bg underline-offset-4 hover:underline",
+          "text-ink-secondary hover:bg-ink-primary/5 hover:text-ink-primary aria-expanded:bg-ink-primary/5 aria-expanded:text-ink-primary",
+        link: "text-accent-bg underline-offset-4 hover:underline",
       },
       size: {
-        "2xs":
-          "size-4 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-2.5",
-        xs: "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-        sm: "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3.5",
+        "2xs": "size-4 [&_svg:not([class*='size-'])]:size-2.5",
+        xs: "size-6 [&_svg:not([class*='size-'])]:size-3",
+        sm: "size-7 [&_svg:not([class*='size-'])]:size-3.5",
         md: "size-8 [&_svg:not([class*='size-'])]:size-4",
         lg: "size-9 [&_svg:not([class*='size-'])]:size-4.5",
         xl: "size-10 [&_svg:not([class*='size-'])]:size-5",
diff --git a/components/ui/input-group.tsx b/components/ui/input-group.tsx
index e9addda..ef227ba 100644
--- a/components/ui/input-group.tsx
+++ b/components/ui/input-group.tsx
@@ -12,7 +12,7 @@ function InputGroupRoot({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="input-group"
       role="group"
       className={cn(
-        "border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto",
+        "h-8 rounded-[7px] bg-primary-bg shadow-card transition-shadow has-[[data-slot=input-group-control]:focus-visible]:outline-2 has-[[data-slot=input-group-control]:focus-visible]:outline-accent-bg/60 has-[[data-slot=input-group-control]:focus-visible]:outline-offset-1 has-[[data-slot][aria-invalid=true]]:outline-2 has-[[data-slot][aria-invalid=true]]:outline-red-500/60 has-disabled:opacity-50 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto",
         className,
       )}
       {...props}
@@ -21,7 +21,7 @@ function InputGroupRoot({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 const inputGroupAddonVariants = cva(
-  "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
+  "text-ink-secondary h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
   {
     variants: {
       align: {
@@ -65,7 +65,7 @@ function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       className={cn(
-        "text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
+        "text-ink-secondary gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
         className,
       )}
       {...props}
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
index f5d9671..f0903d6 100644
--- a/components/ui/input.tsx
+++ b/components/ui/input.tsx
@@ -9,7 +9,13 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        // Fields are rounded squares with the crisp card ring.
+        "h-8 w-full min-w-0 rounded-[7px] bg-primary-bg px-2.5 py-1 text-base text-ink-primary shadow-card transition-shadow md:text-sm",
+        "placeholder:text-ink-tertiary",
+        "focus-visible:outline-2 focus-visible:outline-accent-bg/60 focus-visible:outline-offset-1",
+        "aria-invalid:outline-2 aria-invalid:outline-red-500/60",
+        "file:inline-flex file:h-6 file:border-0 file:bg-transparent file:font-medium file:text-ink-primary file:text-sm",
+        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}
diff --git a/components/ui/kbd.tsx b/components/ui/kbd.tsx
index 6a538e6..aba7820 100644
--- a/components/ui/kbd.tsx
+++ b/components/ui/kbd.tsx
@@ -5,17 +5,18 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const kbdVariants = cva(
-  "flex shrink-0 select-none items-center justify-center rounded-sm border font-medium font-sans leading-none [&_svg]:stroke-[2.5]",
+  "flex shrink-0 select-none items-center justify-center font-medium font-mono leading-none [&_svg]:stroke-[2.5]",
   {
     variants: {
       size: {
-        sm: "h-4 min-w-4 px-1 text-2xs [&>svg]:size-2.5",
-        md: "h-5 min-w-5 px-1.5 text-xs [&>svg]:size-3",
-        lg: "h-6 min-w-6 px-1.5 text-sm [&>svg]:size-3.5",
+        sm: "h-4 min-w-4 rounded-[4px] px-1 text-[10px] [&>svg]:size-2.5",
+        md: "h-5 min-w-5 rounded-[5px] px-1.5 text-2xs [&>svg]:size-3",
+        lg: "h-6 min-w-6 rounded-[6px] px-1.5 text-xs [&>svg]:size-3.5",
       },
       variant: {
-        default: "border-secondary-border bg-secondary-bg text-ink-secondary",
-        frosted: "border-white/15 bg-white/25 text-white backdrop-blur-sm",
+        // A small raised key, same lighting as buttons.
+        default: "bg-raised text-ink-secondary shadow-raised",
+        frosted: "border border-white/15 bg-white/25 text-white backdrop-blur-sm",
       },
       square: {
         true: "",
diff --git a/components/ui/markdown.tsx b/components/ui/markdown.tsx
index 31cf575..1f0ca94 100644
--- a/components/ui/markdown.tsx
+++ b/components/ui/markdown.tsx
@@ -28,7 +28,7 @@ const CitationBadge = ({ href }: { href: string }) => {
       href={href}
       target="_blank"
       rel="noopener noreferrer"
-      className="inline-flex items-center gap-1 rounded-xs bg-primary-bg-hover px-0.5 h-lh text-xs text-ink-secondary no-underline transition-colors hover:bg-primary-bg-hover hover:text-ink-primary"
+      className="inline-flex h-lh items-center gap-1 rounded-full bg-ink-primary/6 px-1.5 text-ink-secondary text-xs no-underline transition-colors hover:bg-ink-primary/10 hover:text-ink-primary"
     >
       <img
         src={`https://www.google.com/s2/favicons?domain=${domain}&sz=32`}
@@ -66,7 +66,7 @@ const Markdown = ({
     controls={false}
     components={{ ...markdownComponents, ...components }}
     className={cn(
-      "text-md [&_p]:whitespace-pre-wrap [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+      "text-md leading-6 [&_p]:whitespace-pre-wrap [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
       className,
     )}
     {...props}
diff --git a/components/ui/popover.tsx b/components/ui/popover.tsx
index da153cd..d551b1e 100644
--- a/components/ui/popover.tsx
+++ b/components/ui/popover.tsx
@@ -34,7 +34,7 @@ const PopoverContent = ({
       <PopoverPrimitive.Popup
         data-slot="popover-content"
         className={cn(
-          "z-50 origin-(--transform-origin) rounded-lg border border-primary-border bg-primary-bg p-3 shadow-md outline-none",
+          "z-50 origin-(--transform-origin) rounded-xl bg-primary-bg p-3 shadow-overlay outline-none",
           "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
           "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
diff --git a/components/ui/preset-swatch.tsx b/components/ui/preset-swatch.tsx
index 2db9434..a640396 100644
--- a/components/ui/preset-swatch.tsx
+++ b/components/ui/preset-swatch.tsx
@@ -10,7 +10,7 @@ type PresetSwatchProps = {
 export const PresetSwatch = ({ seeds, className, style, ...props }: PresetSwatchProps) => (
   <div
     className={cn(
-      "flex size-6 shrink-0 items-center justify-center rounded-md text-2xs font-[550] leading-none",
+      "flex size-[18px] shrink-0 items-center justify-center rounded-[5px] font-[550] text-[9px] leading-none shadow-[inset_0_0_0_1px_rgb(0_0_0/0.1)] dark:shadow-[inset_0_0_0_1px_rgb(255_255_255/0.1)]",
       className,
     )}
     style={{ background: seeds.bg, color: seeds.acc, ...style }}
diff --git a/components/ui/radio-group.tsx b/components/ui/radio-group.tsx
index 004d575..3a22e13 100644
--- a/components/ui/radio-group.tsx
+++ b/components/ui/radio-group.tsx
@@ -17,9 +17,9 @@ const RadioGroupItem = ({ className, children, ...props }: RadioPrimitive.Root.P
   <RadioPrimitive.Root
     data-slot="radio-group-item"
     className={cn(
-      "relative flex items-center justify-center aspect-square size-4 shrink-0 rounded-full border border-slate-9 bg-primary-bg-hover transition-colors",
-      "data-checked:border-slate-12 data-checked:bg-primary-bg",
-      "focus-visible:ring-2 focus-visible:ring-slate-8 focus-visible:outline-none",
+      "relative flex items-center justify-center aspect-square size-4 shrink-0 rounded-full bg-raised shadow-raised transition-[background-color,box-shadow]",
+      "data-checked:bg-accent-raised data-checked:shadow-accent",
+      "focus-visible:outline-2 focus-visible:outline-accent-bg/60 focus-visible:outline-offset-2",
       "disabled:cursor-not-allowed disabled:opacity-50",
       "peer",
       className,
@@ -31,7 +31,7 @@ const RadioGroupItem = ({ className, children, ...props }: RadioPrimitive.Root.P
         data-slot="radio-group-indicator"
         className="flex size-full items-center justify-center shrink-0"
       >
-        <span className="size-1.5 shrink-0 rounded-full bg-primary-bg" />
+        <span className="size-1.5 shrink-0 rounded-full bg-white" />
       </RadioPrimitive.Indicator>
     )}
   </RadioPrimitive.Root>
diff --git a/components/ui/scaler.tsx b/components/ui/scaler.tsx
deleted file mode 100644
index fd55ed7..0000000
--- a/components/ui/scaler.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-"use client";
-
-import { Slider as SliderPrimitive } from "@base-ui/react/slider";
-
-import { cn } from "@/lib/utils";
-
-type ScalerProps = {
-  value: number;
-  onValueChange: (value: number) => void;
-  min: number;
-  max: number;
-  step: number;
-  tickStep?: number;
-  disabled?: boolean;
-  size?: "default" | "compact";
-  className?: string;
-};
-
-const scalerSizes = {
-  default: "box-border h-9 w-full",
-  compact:
-    "box-border m-0 h-8 w-28 shrink-0 overflow-hidden rounded-md border border-primary-border p-0",
-} as const;
-
-export const Scaler = ({
-  value,
-  onValueChange,
-  min,
-  max,
-  step,
-  tickStep,
-  disabled,
-  size = "default",
-  className,
-}: ScalerProps) => {
-  const tickCount = !tickStep ? 0 : Math.max(0, Math.floor((max - min) / tickStep) - 1);
-
-  const handleValueChange = (next: number | readonly number[]) => {
-    const value = typeof next === "number" ? next : next[0];
-    onValueChange(value);
-  };
-
-  return (
-    <SliderPrimitive.Root
-      value={value}
-      onValueChange={handleValueChange}
-      min={min}
-      max={max}
-      step={step}
-      disabled={disabled}
-      className={cn("group relative touch-none", scalerSizes[size], className)}
-    >
-      <SliderPrimitive.Control className="relative flex h-full w-full items-stretch">
-        <SliderPrimitive.Track
-          className={cn(
-            "relative h-full w-full overflow-hidden bg-base-bg",
-            size === "default" && "rounded-md",
-          )}
-        >
-          {tickCount > 0 && (
-            <div
-              className={cn(
-                "pointer-events-none absolute z-0 flex items-stretch justify-between",
-                size === "compact" ? "inset-x-1.5 inset-y-2 pr-7" : "inset-x-3 inset-y-2.5",
-              )}
-            >
-              {Array.from({ length: tickCount }, (_, i) => (
-                <span key={i} className="w-px bg-ink-primary/15" />
-              ))}
-            </div>
-          )}
-          <SliderPrimitive.Indicator className="rounded-none bg-ink-primary/10" />
-          <SliderPrimitive.Thumb className="h-4 w-0.5 rounded-full border-0 bg-ink-primary opacity-0 shadow-none transition-opacity group-hover:opacity-80 focus-visible:opacity-100 data-active:opacity-100" />
-        </SliderPrimitive.Track>
-      </SliderPrimitive.Control>
-      <div
-        className={cn(
-          "pointer-events-none absolute inset-0 z-10 flex items-center justify-end",
-          size === "compact" ? "px-2" : "px-3",
-        )}
-      >
-        <span
-          className={cn(
-            "tabular-nums text-ink-secondary",
-            size === "compact" ? "text-xs" : "text-sm",
-          )}
-        >
-          {value.toFixed(2)}
-        </span>
-      </div>
-    </SliderPrimitive.Root>
-  );
-};
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
index 930af61..e241114 100644
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -1,45 +1,38 @@
 "use client";
 
 import { Select as SelectPrimitive } from "@base-ui/react/select";
+import { Check, ChevronDown, ChevronsUpDown, ChevronUp } from "@keyline-icons/react";
 import { cva, type VariantProps } from "class-variance-authority";
 import type * as React from "react";
 import { cn } from "@/lib/utils";
-import { CheckMarkMediumIcon } from "../icons/check-mark-medium";
-import { ChevronDownMediumIcon } from "../icons/chevron-down-medium";
-import { ChevronGrabberVerticalIcon } from "../icons/chevron-grabber-vertical";
-import { ChevronTopMediumIcon } from "../icons/chevron-top-medium";
 
 const selectTriggerVariants = cva(
   [
     // Layout
     "flex w-fit items-center justify-between gap-1.5",
     "whitespace-nowrap",
-    // Base styles
-    "rounded-lg border text-sm",
-    "cursor-pointer select-none outline-none",
-    "transition-colors",
+    // Base styles: fields are rounded squares, not pills
+    "rounded-[7px] text-sm text-ink-primary",
+    "cursor-pointer select-none",
+    "transition-[background-color,box-shadow]",
     // Focus states
-    "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
-    // Invalid states
-    "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20",
-    "dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+    "focus-visible:outline-2 focus-visible:outline-accent-bg/60 focus-visible:outline-offset-2",
     // Disabled state
     "disabled:cursor-not-allowed disabled:opacity-50",
     // Placeholder styling
-    "data-placeholder:text-muted-foreground",
+    "data-placeholder:text-ink-tertiary",
     // Select value (child) styling
     "*:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center",
     "*:data-[slot=select-value]:gap-1.5 *:data-[slot=select-value]:line-clamp-1",
     // Select icon (child) styling
     "*:data-[slot=select-icon]:pointer-events-none *:data-[slot=select-icon]:shrink-0",
-    "*:data-[slot=select-icon]:text-muted-foreground",
+    "*:data-[slot=select-icon]:text-ink-tertiary",
   ],
   {
     variants: {
       variant: {
-        primary:
-          "border-border bg-primary-bg hover:bg-primary-bg-hover hover:border-primary-border-hover aria-expanded:bg-muted aria-expanded:text-foreground",
-        ghost: "border-transparent hover:bg-primary-bg-hover aria-expanded:bg-primary-bg-hover",
+        primary: "bg-raised shadow-raised hover:bg-raised-hover aria-expanded:bg-raised-hover",
+        ghost: "hover:bg-ink-primary/5 aria-expanded:bg-ink-primary/5",
       },
       size: {
         sm: "h-8 pr-2 pl-2.5 text-sm *:data-[slot=select-value]:text-sm *:data-[slot=select-icon]:size-3.5",
@@ -80,7 +73,7 @@ function SelectTrigger({
       {...props}
     >
       {children}
-      <SelectPrimitive.Icon data-slot="select-icon" render={<ChevronGrabberVerticalIcon />} />
+      <SelectPrimitive.Icon data-slot="select-icon" render={<ChevronsUpDown />} />
     </SelectPrimitive.Trigger>
   );
 }
@@ -118,8 +111,8 @@ function SelectContent({
               "relative isolate z-50 min-w-36 origin-(--transform-origin) max-h-(--available-height)",
               // "w-(--anchor-width)",
               // Styling
-              "rounded-lg p-1 shadow-md",
-              "bg-primary-bg text-ink-primary border border-primary-border",
+              "rounded-xl p-1 shadow-overlay",
+              "bg-primary-bg text-ink-primary",
               // Overflow
               "overflow-x-hidden overflow-y-auto",
               // Animation base
@@ -164,7 +157,7 @@ const SelectLabel = ({ className, ...props }: SelectPrimitive.GroupLabel.Props)
   return (
     <SelectPrimitive.GroupLabel
       data-slot="select-label"
-      className={cn(["px-1.5 py-1 text-xs text-muted-foreground"], className)}
+      className={cn(["px-1.5 py-1 text-xs text-ink-secondary"], className)}
       {...props}
     />
   );
@@ -175,10 +168,9 @@ const SelectItem = ({ className, children, ...props }: SelectPrimitive.Item.Prop
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "relative cursor-pointer select-none outline-hidden h-8 px-2 rounded-md text-sm flex w-full items-center gap-2",
+        "relative cursor-pointer select-none outline-hidden h-8 px-2 rounded-lg text-sm flex w-full items-center gap-2",
         // Focus states
-        "data-highlighted:bg-primary-bg-hover",
-        "not-data-[variant=destructive]:focus:**:text-accent-foreground",
+        "data-highlighted:bg-ink-primary/5",
         // Disabled states
         "data-disabled:pointer-events-none data-disabled:opacity-50",
         // SVG styling
@@ -196,7 +188,7 @@ const SelectItem = ({ className, children, ...props }: SelectPrimitive.Item.Prop
 
       <div className={cn(["pointer-events-none flex size-4 shrink-0 items-center justify-center"])}>
         <SelectPrimitive.ItemIndicator>
-          <CheckMarkMediumIcon className="pointer-events-none" />
+          <Check className="pointer-events-none" />
         </SelectPrimitive.ItemIndicator>
       </div>
     </SelectPrimitive.Item>
@@ -207,7 +199,7 @@ const SelectSeparator = ({ className, ...props }: SelectPrimitive.Separator.Prop
   return (
     <SelectPrimitive.Separator
       data-slot="select-separator"
-      className={cn(["-mx-1 my-1 h-px pointer-events-none bg-border"], className)}
+      className={cn(["-mx-1 my-1 h-px pointer-events-none bg-ink-primary/6"], className)}
       {...props}
     />
   );
@@ -226,7 +218,7 @@ const SelectScrollUpButton = ({
           "top-0 z-10 flex w-full items-center justify-center",
           "py-1",
           // Styling
-          "cursor-default hover:bg-primary-bg-hover",
+          "cursor-default hover:bg-ink-primary/5",
           // SVG sizing
           "[&_svg:not([class*='size-'])]:size-4",
         ],
@@ -234,7 +226,7 @@ const SelectScrollUpButton = ({
       )}
       {...props}
     >
-      <ChevronTopMediumIcon />
+      <ChevronUp />
     </SelectPrimitive.ScrollUpArrow>
   );
 };
@@ -251,7 +243,7 @@ const SelectScrollDownButton = ({
         "bottom-0 z-10 flex w-full items-center justify-center",
         "py-1",
         // Styling
-        "cursor-default hover:bg-primary-bg-hover",
+        "cursor-default hover:bg-ink-primary/5",
         // SVG sizing
         "[&_svg:not([class*='size-'])]:size-4",
 
@@ -259,7 +251,7 @@ const SelectScrollDownButton = ({
       )}
       {...props}
     >
-      <ChevronDownMediumIcon />
+      <ChevronDown />
     </SelectPrimitive.ScrollDownArrow>
   );
 };
diff --git a/components/ui/separator.tsx b/components/ui/separator.tsx
index e91bc00..6f6692d 100644
--- a/components/ui/separator.tsx
+++ b/components/ui/separator.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
 
-const separatorVariants = cva("bg-slate-7 shrink-0", {
+const separatorVariants = cva("bg-ink-primary/8 shrink-0", {
   variants: {
     type: {
       line: "data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",
diff --git a/components/ui/settings.tsx b/components/ui/settings.tsx
index 1297ce7..ffc77f9 100644
--- a/components/ui/settings.tsx
+++ b/components/ui/settings.tsx
@@ -41,7 +41,7 @@ const SettingsSubtitle = ({ className, children, ...props }: ComponentProps<"p">
 const SettingsCard = ({ className, children, ...props }: ComponentProps<"div">) => (
   <div
     data-slot="settings-card"
-    className={cn("flex flex-col rounded-lg border border-primary-border bg-primary-bg", className)}
+    className={cn("flex flex-col rounded-xl bg-primary-bg shadow-card", className)}
     {...props}
   >
     {children}
@@ -52,7 +52,7 @@ const SettingsRow = ({ className, children, ...props }: ComponentProps<"div">) =
   <div
     data-slot="settings-row"
     className={cn(
-      "flex min-h-14 items-center gap-3 border-b border-primary-border p-3 last-of-type:border-0",
+      "flex min-h-14 items-center gap-3 border-ink-primary/6 border-b p-3 last-of-type:border-0",
       className,
     )}
     {...props}
@@ -62,7 +62,11 @@ const SettingsRow = ({ className, children, ...props }: ComponentProps<"div">) =
 );
 
 const SettingsLabel = ({ className, children, ...props }: ComponentProps<"span">) => (
-  <span data-slot="settings-label" className={cn("text-sm text-ink-primary", className)} {...props}>
+  <span
+    data-slot="settings-label"
+    className={cn("font-medium text-ink-primary text-sm", className)}
+    {...props}
+  >
     {children}
   </span>
 );
diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx
index 39b18b1..636e986 100644
--- a/components/ui/sidebar.tsx
+++ b/components/ui/sidebar.tsx
@@ -1,24 +1,26 @@
 "use client";
 
 import { useRender } from "@base-ui/react/use-render";
-import { SHELL_SIDEBAR_WIDTH_VAR, Shell, useShell } from "@intentface/chat/shell";
+import { Shell, useShell } from "@intentface/chat/shell";
+import { PanelLeft } from "@keyline-icons/react";
 import { cva, type VariantProps } from "class-variance-authority";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import {
   type ComponentProps,
-  type CSSProperties,
   createContext,
+  type ReactNode,
+  useCallback,
   useContext,
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from "react";
-import { SidebarIcon } from "@/components/icons/sidebar";
 import Drawer from "@/components/ui/drawer";
 import Input from "@/components/ui/input";
 import Separator from "@/components/ui/separator";
 import Tooltip from "@/components/ui/tooltip";
 import { useIsMobile } from "@/hooks/use-mobile";
-import { writeSidebarLayout } from "@/lib/sidebar-cookie";
 import { cn } from "@/lib/utils";
 import { IconButton } from "./icon-button";
 
@@ -72,17 +74,13 @@ const useSidebar = () => {
 
 const SidebarProvider = ({
   defaultOpen = true,
-  width,
   open,
   onOpenChange,
   className,
   children,
   ...props
 }: ComponentProps<"div"> & {
-  /** Read it from the request with `readSidebarLayout` so the first paint is already right. */
   defaultOpen?: boolean;
-  /** A restored width, applied as the custom property the sidebar's `width` reads. */
-  width?: number;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
 }) => {
@@ -99,20 +97,8 @@ const SidebarProvider = ({
       <Shell.Root
         defaultOpen={defaultOpen}
         open={open}
-        // Where the layout is kept is this app's business, not the package's —
-        // see lib/sidebar-cookie.
-        onOpenChange={(next) => {
-          onOpenChange?.(next);
-          writeSidebarLayout({ open: next });
-        }}
+        onOpenChange={onOpenChange}
         data-slot="sidebar-wrapper"
-        // A restored width goes back the way the grip writes it: the
-        // custom property. There is no prop for it, because the width is CSS's.
-        style={
-          width === undefined
-            ? undefined
-            : ({ [SHELL_SIDEBAR_WIDTH_VAR]: `${width}px` } as CSSProperties)
-        }
         className={cn("group/sidebar-wrapper flex min-h-svh w-full bg-base-bg", className)}
         {...props}
       >
@@ -204,29 +190,27 @@ const SidebarRoot = ({
       {/* Shell.Sidebar brings the hotspot hold/release pointer handlers with it. */}
       <Shell.Sidebar
         side={side}
-        onResize={(next) => writeSidebarLayout({ width: next })}
         data-slot="sidebar"
         className={cn(
-          "fixed z-10 hidden w-(--sidebar-width) border border-transparent bg-base-bg overflow-hidden transition-[left,right,top,bottom,border-color,border-radius,box-shadow] duration-150 ease-linear motion-reduce:transition-none md:flex",
+          "fixed z-30 hidden w-(--sidebar-width) border border-transparent bg-base-bg overflow-hidden transition-[left,right,top,bottom,border-color,border-radius,box-shadow] duration-150 ease-linear motion-reduce:transition-none md:flex",
           side === "left"
             ? cn(
                 "left-0 inset-y-0",
                 "group-data-[state=collapsed]:-left-(--sidebar-width)",
                 "group-data-[state=collapsed]:group-data-hotspot:left-2",
-                "group-data-[state=collapsed]:inset-y-2 group-data-[state=collapsed]:rounded-xl group-data-[state=collapsed]:border-secondary-border",
-                "group-data-hotspot:shadow-lg",
+                "group-data-[state=collapsed]:inset-y-2 group-data-[state=collapsed]:rounded-xl",
+                "group-data-hotspot:shadow-overlay",
               )
             : "right-0 inset-y-0 group-data-[state=collapsed]:-right-(--sidebar-width)",
           className,
         )}
         {...props}
       >
-        <div
-          className={cn(
-            "flex h-full w-full flex-col py-2 pl-2",
-            "group-data-[state=collapsed]:p-2 group-data-[state=collapsed]:gap-2",
-          )}
-        >
+        {/* Only a sliver of right padding while flush: the viewport's own p-2
+            supplies most of the seam, so the two add up to the 12px left edge.
+            The floating card pads all four sides, because then it has edges of
+            its own. */}
+        <div className="flex h-full w-full flex-col gap-4 pt-2 pr-1 pb-3 pl-3 group-data-[state=collapsed]:p-2">
           {children}
         </div>
       </Shell.Sidebar>
@@ -238,7 +222,7 @@ const SidebarRoot = ({
       {side === "left" && (
         <Shell.Hotspot
           data-slot="sidebar-hotspot"
-          className="fixed inset-y-0 left-0 z-20 hidden w-5 group-data-[state=collapsed]:block"
+          className="fixed inset-y-0 left-0 z-40 hidden w-5 group-data-[state=collapsed]:block"
         />
       )}
     </div>
@@ -252,10 +236,15 @@ const SidebarTrigger = ({ className, onClick, ...props }: ComponentProps<"button
     <IconButton
       data-slot="sidebar-trigger"
       variant="ghost"
-      className={cn("hover:bg-base-bg-hover", className)}
+      // Shell.Trigger sets aria-expanded, which ghost paints as a pressed menu
+      // trigger; an open sidebar isn't "pressed", so only hover tints it.
+      className={cn(
+        "rounded-md aria-expanded:not-hover:bg-transparent aria-expanded:not-hover:text-ink-secondary",
+        className,
+      )}
       {...props}
     >
-      <SidebarIcon />
+      <PanelLeft />
       <span className="sr-only">Toggle Sidebar</span>
     </IconButton>
   );
@@ -271,10 +260,10 @@ const SidebarTrigger = ({ className, onClick, ...props }: ComponentProps<"button
         toggleSidebar();
       }}
       variant="ghost"
-      className={cn("hover:bg-base-bg-hover", className)}
+      className={cn("rounded-md", className)}
       {...props}
     >
-      <SidebarIcon />
+      <PanelLeft />
       <span className="sr-only">Toggle Sidebar</span>
     </IconButton>
   ) : (
@@ -305,8 +294,12 @@ const SidebarViewport = ({ className, children, ...props }: ComponentProps<"div"
   <div
     data-slot="sidebar-viewport"
     className={cn(
-      "flex h-full min-h-0 flex-1 bg-secondary-bg overflow-hidden border border-transparent",
-      "group-data-expanded/sidebar-inset:border-secondary-border group-data-expanded/sidebar-inset:rounded-xl",
+      // clip, not hidden: a clipping box can't be scrolled by focus() or scrollIntoView.
+      "relative flex h-full min-h-0 flex-1 bg-secondary-bg overflow-clip",
+      "group-data-expanded/sidebar-inset:rounded-xl group-data-expanded/sidebar-inset:border group-data-expanded/sidebar-inset:border-transparent group-data-expanded/sidebar-inset:shadow-card",
+      // Dark: the card's inset edge is a real border, so content (sticky bars,
+      // thread fades) is clipped inside it instead of painting over it.
+      "dark:group-data-expanded/sidebar-inset:border-white/6 dark:group-data-expanded/sidebar-inset:border-t-white/11 dark:group-data-expanded/sidebar-inset:shadow-[0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]",
       className,
     )}
     {...props}
@@ -316,23 +309,15 @@ const SidebarViewport = ({ className, children, ...props }: ComponentProps<"div"
 );
 
 const SidebarInput = ({ className, ...props }: ComponentProps<typeof Input>) => {
-  return (
-    <Input
-      data-slot="sidebar-input"
-      className={cn(
-        "bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none",
-        className,
-      )}
-      {...props}
-    />
-  );
+  return <Input data-slot="sidebar-input" className={cn("h-8 w-full", className)} {...props} />;
 };
 
 const SidebarHeader = ({ className, ...props }: ComponentProps<"div">) => {
   return (
     <div
       data-slot="sidebar-header"
-      className={cn("flex flex-col p-2 gap-2", className)}
+      // No padding of its own; the panel wrapper supplies it, as for the footer.
+      className={cn("flex flex-col gap-2", className)}
       {...props}
     />
   );
@@ -346,11 +331,111 @@ const SidebarFooter = ({ className, ...props }: ComponentProps<"div">) => {
 
 const SidebarSeparator = ({ className, ...props }: ComponentProps<typeof Separator>) => {
   return (
-    <Separator
-      data-slot="sidebar-separator"
-      className={cn("bg-sidebar-border mx-2 w-auto", className)}
-      {...props}
-    />
+    <Separator data-slot="sidebar-separator" className={cn("mx-2 w-auto", className)} {...props} />
+  );
+};
+
+/**
+ * Navs that replace one another in the sidebar, shaped like Tabs: the root's
+ * `value` names the view shown and each `Sidebar.View` declares its own. A view
+ * declared later slides in from the right, an earlier one from the left.
+ */
+type SidebarViewsDirection = "forward" | "backward";
+
+type SidebarViewsState = {
+  value: string;
+  direction: SidebarViewsDirection;
+  register: (value: string) => void;
+};
+
+const SidebarViewsContext = createContext<SidebarViewsState | null>(null);
+
+const useSidebarViews = () => {
+  const context = useContext(SidebarViewsContext);
+  if (!context) throw new Error("Sidebar.View must be rendered inside Sidebar.Views");
+  return context;
+};
+
+const SidebarViews = ({
+  value,
+  className,
+  ...props
+}: ComponentProps<"div"> & {
+  /** The `value` of the view on screen. */
+  value: string;
+}) => {
+  // Declaration order, as the views first render: there is no list to read it from.
+  const order = useRef<string[]>([]);
+  const [shown, setShown] = useState<{ value: string; direction: SidebarViewsDirection }>({
+    value,
+    direction: "forward",
+  });
+
+  // Decided while rendering, so the leaving and arriving views agree on the direction.
+  if (shown.value !== value) {
+    const from = order.current.indexOf(shown.value);
+    const to = order.current.indexOf(value);
+    setShown({ value, direction: to < from ? "backward" : "forward" });
+  }
+
+  const register = useCallback((view: string) => {
+    if (!order.current.includes(view)) order.current.push(view);
+  }, []);
+
+  return (
+    <SidebarViewsContext.Provider value={{ value, direction: shown.direction, register }}>
+      <div
+        data-slot="sidebar-views"
+        // Bleeds 4px each side like Content, so raised rows keep their ring.
+        className={cn("relative -mx-1 min-h-0 flex-1 overflow-hidden", className)}
+        {...props}
+      />
+    </SidebarViewsContext.Provider>
+  );
+};
+
+const VIEW_TRANSITION = { duration: 0.22, ease: [0.22, 1, 0.36, 1] } as const;
+
+const SidebarView = ({
+  value,
+  className,
+  children,
+}: {
+  value: string;
+  className?: string;
+  children?: ReactNode;
+}) => {
+  const { value: shown, direction, register } = useSidebarViews();
+  register(value);
+
+  // Reduced motion cross-fades instead: a lateral slide is what it asks to avoid.
+  const reduceMotion = useReducedMotion();
+  const offset = (side: 1 | -1) =>
+    reduceMotion ? { opacity: 0 } : { opacity: 0, x: `${side * 100}%` };
+  const variants = {
+    enter: (to: SidebarViewsDirection) => offset(to === "forward" ? 1 : -1),
+    shown: { opacity: 1, x: 0 },
+    exit: (to: SidebarViewsDirection) => offset(to === "forward" ? -1 : 1),
+  };
+
+  return (
+    // Each view owns its presence, so the leaving one still reads the direction.
+    <AnimatePresence custom={direction} initial={false}>
+      {shown === value ? (
+        <motion.div
+          data-slot="sidebar-view"
+          custom={direction}
+          variants={variants}
+          initial="enter"
+          animate="shown"
+          exit="exit"
+          transition={VIEW_TRANSITION}
+          className={cn("absolute inset-0 flex flex-col gap-4 px-1", className)}
+        >
+          {children}
+        </motion.div>
+      ) : null}
+    </AnimatePresence>
   );
 };
 
@@ -358,7 +443,13 @@ const SidebarContent = ({ className, ...props }: ComponentProps<"div">) => {
   return (
     <div
       data-slot="sidebar-content"
-      className={cn("flex min-h-0 flex-1 flex-col gap-2 overflow-auto", className)}
+      // The scroller clips, so it bleeds 4px each side: raised rows keep their
+      // ring and shadow, and stay aligned with the header. Its edges fade where it
+      // can still scroll.
+      className={cn(
+        "scroll-mask-y -mx-1 flex min-h-0 flex-1 flex-col gap-2 overflow-auto px-1 pb-1",
+        className,
+      )}
       {...props}
     />
   );
@@ -382,7 +473,7 @@ const SidebarGroupLabel = ({ className, render, ...props }: useRender.ComponentP
       "data-slot": "sidebar-group-label",
       ...props,
       className: cn(
-        "text-ink-tertiary flex shrink-0 items-center rounded-md px-2 py-1.5 text-sm font-medium outline-hidden focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "text-ink-secondary flex h-7 shrink-0 items-center rounded-md px-2 text-xs font-medium focus-visible:outline-2 focus-visible:outline-accent-bg/60 [&>svg]:size-4 [&>svg]:shrink-0",
         className,
       ),
     },
@@ -401,7 +492,7 @@ const SidebarGroupAction = ({
       "data-slot": "sidebar-group-action",
       ...props,
       className: cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "text-ink-secondary hover:bg-ink-primary/5 hover:text-ink-primary absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform focus-visible:outline-2 focus-visible:outline-accent-bg/60 [&>svg]:size-4 [&>svg]:shrink-0",
         "after:absolute after:-inset-2 after:md:hidden",
         className,
       ),
@@ -416,7 +507,7 @@ const SidebarGroupContent = ({ className, ...props }: ComponentProps<"div">) =>
 const SidebarMenu = ({ className, ...props }: ComponentProps<"ul">) => (
   <ul
     data-slot="sidebar-menu"
-    className={cn("flex w-full min-w-0 flex-col gap-0.5", className)}
+    className={cn("flex w-full min-w-0 flex-col gap-px", className)}
     {...props}
   />
 );
@@ -432,13 +523,15 @@ const SidebarMenuItem = ({ className, ...props }: ComponentProps<"li">) => (
 const sidebarMenuButtonVariants = cva(
   [
     "peer/menu-button cursor-pointer flex w-full items-center gap-2",
-    "overflow-hidden rounded-md px-2 h-8 font-medium text-left text-md/none text-ink-secondary outline-hidden",
-    "focus-visible:ring-1",
-    "hover:bg-base-bg-hover hover:text-ink-primary data-active:bg-base-bg-hover data-active:text-ink-primary",
+    "overflow-hidden rounded-md px-2 h-[30px] font-medium text-left text-sm/none text-ink-body",
+    "focus-visible:outline-2 focus-visible:outline-accent-bg/60 focus-visible:-outline-offset-2",
+    // Hover is a faint wash; the active row rises like a button.
+    "hover:bg-ink-primary/5 hover:text-ink-primary",
+    "data-active:bg-raised-selected data-active:text-ink-primary data-active:shadow-raised",
     "disabled:pointer-events-none disabled:opacity-50",
     "group-has-data-[slot=sidebar-menu-action]/menu-item:pr-1",
     "aria-disabled:pointer-events-none aria-disabled:opacity-50",
-    "data-popup-open:bg-base-bg-hover data-popup-open:text-ink-primary",
+    "data-popup-open:bg-ink-primary/5 data-popup-open:text-ink-primary",
     "[&>span:last-child]:truncate [&_svg]:text-ink-secondary [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:pointer-events-none hover:[&>svg]:text-ink-primary data-active:[&>svg]:text-ink-primary",
   ],
   {
@@ -524,7 +617,7 @@ const SidebarMenuAction = ({
       onClick: handleClick,
       ...props,
       className: cn(
-        "hover:bg-primary-bg-hover text-ink-secondary cursor-pointer hover:text-ink-primary flex aspect-square size-5 items-center justify-center rounded-sm outline-hidden focus-visible:ring-1 [&>svg]:size-3.5 [&>svg]:shrink-0",
+        "hover:bg-ink-primary/6 text-ink-secondary cursor-pointer hover:text-ink-primary flex aspect-square size-5 items-center justify-center rounded-sm focus-visible:outline-2 focus-visible:outline-accent-bg/60 [&>svg]:size-3.5 [&>svg]:shrink-0",
         showOnHover &&
           "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-popup-open:opacity-100 data-pressed:opacity-100 md:opacity-0",
         className,
@@ -537,8 +630,8 @@ const SidebarMenuBadge = ({ className, ...props }: ComponentProps<"div">) => (
   <div
     data-slot="sidebar-menu-badge"
     className={cn(
-      "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums",
-      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+      "text-ink-secondary pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums",
+      "peer-hover/menu-button:text-ink-primary peer-data-[active=true]/menu-button:text-ink-primary",
       className,
     )}
     {...props}
@@ -549,7 +642,7 @@ const SidebarMenuSub = ({ className, ...props }: ComponentProps<"ul">) => (
   <ul
     data-slot="sidebar-menu-sub"
     className={cn(
-      "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+      "border-ink-primary/8 mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
       "group-data-[collapsible=icon]:hidden",
       className,
     )}
@@ -580,8 +673,8 @@ const SidebarMenuSubButton = ({
       "data-active": isActive,
       ...props,
       className: cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        "text-ink-body hover:bg-ink-primary/5 hover:text-ink-primary active:bg-ink-primary/8 [&>svg]:text-ink-secondary flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 focus-visible:outline-2 focus-visible:outline-accent-bg/60 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "data-[active=true]:bg-raised-selected data-[active=true]:text-ink-primary data-[active=true]:shadow-raised",
         size === "sm" && "text-xs",
         size === "md" && "text-sm",
         "group-data-[collapsible=icon]:hidden",
@@ -613,6 +706,8 @@ const Sidebar = Object.assign(SidebarRoot, {
   Provider: SidebarProvider,
   Separator: SidebarSeparator,
   Trigger: SidebarTrigger,
+  View: SidebarView,
+  Views: SidebarViews,
 });
 
 export { useSidebar, Sidebar };
diff --git a/components/ui/skeleton.tsx b/components/ui/skeleton.tsx
index a9ea8e6..bd92365 100644
--- a/components/ui/skeleton.tsx
+++ b/components/ui/skeleton.tsx
@@ -4,7 +4,7 @@ const Skeleton = ({ className, ...props }: React.ComponentProps<"div">) => {
   return (
     <div
       data-slot="skeleton"
-      className={cn("animate-pulse rounded-md bg-muted", className)}
+      className={cn("animate-pulse rounded-md bg-ink-primary/6", className)}
       {...props}
     />
   );
diff --git a/components/ui/slider.tsx b/components/ui/slider.tsx
index 577240d..ca6e1a9 100644
--- a/components/ui/slider.tsx
+++ b/components/ui/slider.tsx
@@ -24,7 +24,7 @@ const SliderTrack = ({
   ...props
 }: React.ComponentProps<typeof SliderPrimitive.Track>) => (
   <SliderPrimitive.Track
-    className={cn("h-1 w-full rounded-full bg-base-bg-active", className)}
+    className={cn("h-1 w-full rounded-full bg-ink-primary/15", className)}
     {...props}
   />
 );
@@ -42,8 +42,8 @@ const SliderThumb = ({
 }: React.ComponentProps<typeof SliderPrimitive.Thumb>) => (
   <SliderPrimitive.Thumb
     className={cn(
-      "h-4 w-6 rounded-full border-2 border-accent-bg bg-primary-bg shadow-sm",
-      "focus-visible:ring-2 focus-visible:ring-accent-bg/50 focus-visible:outline-none",
+      "size-4 rounded-full bg-white shadow-[0_0_0_0.5px_rgb(0_0_0/0.08),0_1px_2px_rgb(0_0_0/0.2),0_2px_4px_-1px_rgb(0_0_0/0.12)]",
+      "focus-visible:outline-2 focus-visible:outline-accent-bg/60 focus-visible:outline-offset-2",
       className,
     )}
     {...props}
diff --git a/components/ui/switch.tsx b/components/ui/switch.tsx
index 8d6deeb..594b1a1 100644
--- a/components/ui/switch.tsx
+++ b/components/ui/switch.tsx
@@ -9,8 +9,8 @@ const Switch = ({ className, ...props }: SwitchPrimitive.Root.Props) => (
     data-slot="switch"
     className={cn(
       "inline-flex h-4 w-7 shrink-0 cursor-pointer items-center rounded-full px-0.5 transition-colors",
-      "bg-base-bg-active data-checked:bg-accent-bg",
-      "focus-visible:ring-2 focus-visible:ring-accent-bg/50 focus-visible:outline-none",
+      "bg-ink-primary/15 data-checked:bg-accent-bg",
+      "focus-visible:outline-2 focus-visible:outline-accent-bg/60 focus-visible:outline-offset-2",
       "disabled:cursor-not-allowed disabled:opacity-50",
       className,
     )}
@@ -18,7 +18,8 @@ const Switch = ({ className, ...props }: SwitchPrimitive.Root.Props) => (
   >
     <SwitchPrimitive.Thumb
       data-slot="switch-thumb"
-      className="block size-3 rounded-full bg-primary-bg shadow-xs transition-transform data-checked:translate-x-3"
+      // The thumb stays light in both themes, like a physical toggle.
+      className="block size-3 rounded-full bg-white shadow-[0_0_0_0.5px_rgb(0_0_0/0.08),0_1px_2px_rgb(0_0_0/0.2),0_2px_4px_-1px_rgb(0_0_0/0.12)] transition-transform data-checked:translate-x-3"
     />
   </SwitchPrimitive.Root>
 );
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
index c44cd47..cab6f8e 100644
--- a/components/ui/textarea.tsx
+++ b/components/ui/textarea.tsx
@@ -7,7 +7,11 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        "flex field-sizing-content min-h-16 w-full rounded-[7px] bg-primary-bg px-2.5 py-2 text-base text-ink-primary shadow-card transition-shadow md:text-sm",
+        "placeholder:text-ink-tertiary",
+        "focus-visible:outline-2 focus-visible:outline-accent-bg/60 focus-visible:outline-offset-1",
+        "aria-invalid:outline-2 aria-invalid:outline-red-500/60",
+        "disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}
diff --git a/components/ui/toggle-group.tsx b/components/ui/toggle-group.tsx
index 281260f..fa92c7e 100644
--- a/components/ui/toggle-group.tsx
+++ b/components/ui/toggle-group.tsx
@@ -15,7 +15,8 @@ const toggleGroupRootVariants = cva("inline-flex items-center", {
   variants: {
     variant: {
       default: "gap-1",
-      segmented: "w-fit gap-0 rounded-full border border-primary-border bg-primary-bg p-0.5",
+      // A sunken track; the pressed item rises out of it.
+      segmented: "w-fit gap-0.5 rounded-full bg-base-bg p-0.5",
     },
   },
   defaultVariants: {
@@ -25,9 +26,9 @@ const toggleGroupRootVariants = cva("inline-flex items-center", {
 
 const toggleGroupItemVariants = cva(
   [
-    "inline-flex items-center border border-transparent justify-center gap-1.5 whitespace-nowrap",
-    "transition-colors outline-none cursor-pointer select-none",
-    "focus-visible:ring-2 focus-visible:ring-accent-bg/50",
+    "inline-flex items-center justify-center gap-1.5 whitespace-nowrap",
+    "transition-[color,background-color,box-shadow] cursor-pointer select-none",
+    "focus-visible:outline-2 focus-visible:outline-accent-bg/60 focus-visible:outline-offset-1",
     "disabled:cursor-not-allowed disabled:opacity-50",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0",
   ],
@@ -35,12 +36,12 @@ const toggleGroupItemVariants = cva(
     variants: {
       variant: {
         default: [
-          "rounded-full text-ink-secondary hover:text-ink-primary",
-          "data-pressed:bg-tertiary-bg data-pressed:text-ink-primary",
+          "rounded-full text-ink-secondary hover:bg-ink-primary/5 hover:text-ink-primary",
+          "data-pressed:bg-ink-primary/6 data-pressed:text-ink-primary",
         ],
         segmented: [
-          "rounded-full text-ink-tertiary shadow-none hover:text-ink-secondary",
-          "data-pressed:bg-quaternary-bg data-pressed:text-ink-primary data-pressed:border-tertiary-border",
+          "rounded-full text-ink-secondary hover:text-ink-primary",
+          "data-pressed:bg-raised data-pressed:text-ink-primary data-pressed:shadow-raised",
         ],
       },
       size: {
@@ -50,9 +51,9 @@ const toggleGroupItemVariants = cva(
       },
     },
     compoundVariants: [
-      { variant: "segmented", size: "xs", class: "size-7 px-0" },
-      { variant: "segmented", size: "sm", class: "size-8 px-0" },
-      { variant: "segmented", size: "md", class: "size-9 px-0" },
+      { variant: "segmented", size: "xs", class: "h-6 w-7 px-0" },
+      { variant: "segmented", size: "sm", class: "h-7 w-8 px-0" },
+      { variant: "segmented", size: "md", class: "h-8 w-9 px-0" },
     ],
     defaultVariants: {
       variant: "default",
diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx
index e7d2c55..32cb39c 100644
--- a/components/ui/tooltip.tsx
+++ b/components/ui/tooltip.tsx
@@ -28,11 +28,11 @@ const TooltipArrow = ({ ...props }: TooltipPrimitive.Arrow.Props) => {
         />
         <path
           d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-          className="fill-slate-1"
+          className="fill-primary-bg"
         />
         <path
           d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-          className="fill-slate-1"
+          className="fill-primary-bg"
         />
       </svg>
     </TooltipPrimitive.Arrow>
@@ -61,7 +61,7 @@ function TooltipContent({
         <TooltipPrimitive.Popup
           data-slot="tooltip-content"
           className={cn(
-            "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-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 rounded-md px-2 py-1 text-xs data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-primary-bg border border-primary-border text-ink-primary z-50 w-fit max-w-xs origin-(--transform-origin)",
+            "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-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 rounded-lg px-2 py-1 text-xs data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-primary-bg shadow-overlay text-ink-primary z-50 w-fit max-w-xs origin-(--transform-origin)",
             className,
           )}
           {...props}
diff --git a/content/docs/build-a-chat/demos/composer.tsx b/content/docs/build-a-chat/demos/composer.tsx
index f5ca18c..a731f74 100644
--- a/content/docs/build-a-chat/demos/composer.tsx
+++ b/content/docs/build-a-chat/demos/composer.tsx
@@ -2,22 +2,52 @@
 
 import { Composer, type ComposerSubmitData } from "@intentface/chat/composer";
 import { Message } from "@intentface/chat/message";
-import { Thread } from "@intentface/chat/thread";
-import { type ComponentProps, useState } from "react";
+import { Thread, useThread } from "@intentface/chat/thread";
+import { ArrowDown, ArrowUp } from "@keyline-icons/react";
+import { useState } from "react";
 
 type ChatMessage = { id: string; role: "user" | "assistant"; text: string };
 
 const INITIAL: ChatMessage[] = [
-  { id: "1", role: "user", text: "Where does the composer put its reply?" },
+  { id: "1", role: "user", text: "What does Composer.Root render?" },
   {
     id: "2",
     role: "assistant",
+    text: "A form. Enter submits it, and onSubmit receives a ComposerSubmitData describing what was sent.",
+  },
+  { id: "3", role: "user", text: "Does it clear itself afterwards?" },
+  {
+    id: "4",
+    role: "assistant",
+    text: "Yes, once your handler runs. Anything you want to keep — the text, the files — is already in the data you were handed.",
+  },
+  { id: "5", role: "user", text: "Can I stop an empty message from sending?" },
+  {
+    id: "6",
+    role: "assistant",
+    text: "Check the text in onSubmit and return early, the way this demo does.",
+  },
+  { id: "7", role: "user", text: "Where does the composer put its reply?" },
+  {
+    id: "8",
+    role: "assistant",
     text: "Nowhere — onSubmit hands you the text and you decide. Here it just appends to local state.",
   },
 ];
 
+// A turn is a user message and whatever answers it, so the newest one lands
+// whole — the reserve goes on the last child.
+const toTurns = (messages: ChatMessage[]) =>
+  messages.reduce<ChatMessage[][]>((turns, message) => {
+    const current = turns.at(-1);
+    if (message.role === "user" || !current) turns.push([message]);
+    else current.push(message);
+    return turns;
+  }, []);
+
 // Stage 3 — a docked composer appending to local state. Thread measures the
-// dock and publishes the reserve as --thread-overlay-bottom-height.
+// dock and publishes the reserve as --thread-overlay-bottom-height. Scroll up and
+// the button above the composer brings you back to the latest turn.
 export const ComposerStage = () => {
   const [messages, setMessages] = useState<ChatMessage[]>(INITIAL);
 
@@ -30,39 +60,49 @@ export const ComposerStage = () => {
   };
 
   return (
-    <div className="h-[360px] w-full max-w-xl overflow-hidden rounded-xl border border-[#f0f0f0] bg-white dark:border-[#262626] dark:bg-[#111111]">
+    <div className="h-[400px] w-full max-w-xl overflow-hidden rounded-xl bg-white shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:bg-zinc-900">
       <Thread.Root className="relative flex h-full w-full overflow-hidden [--thread-overlay-top-height:1rem]">
+        {/* Measured by the primitive: a landed turn sits this far below the top. */}
+        <Thread.Overlay
+          direction="top"
+          className="inset-x-0 top-0 z-1 h-(--thread-overlay-top-height) bg-linear-to-b from-white to-transparent dark:from-zinc-900"
+        />
         <Thread.Viewport className="h-full w-full overflow-x-hidden overflow-y-auto outline-none [overflow-anchor:auto]">
           <div className="relative flex min-h-full w-full flex-col items-center pt-(--thread-overlay-top-height) pb-(--thread-overlay-bottom-height)">
             <Thread.Content className="mx-auto flex min-h-full w-full flex-col gap-4 px-4 [&>*:last-child]:min-h-(--thread-turn-min-height,0px)">
-              {messages.map((message, index) => (
-                <Message.Root
-                  key={message.id}
-                  role={message.role}
-                  isLast={index === messages.length - 1}
-                  className="group flex w-full flex-col gap-1 data-[role=user]:items-end"
-                >
-                  <Message.Text className="text-sm leading-[1.7] text-[#1a1a1a] group-data-[role=user]:min-h-9 group-data-[role=user]:max-w-[80%] group-data-[role=user]:rounded-2xl group-data-[role=user]:border group-data-[role=user]:border-[#f0f0f0] group-data-[role=user]:bg-white group-data-[role=user]:px-3 group-data-[role=user]:py-1.5 group-data-[role=user]:shadow-xs dark:text-[#fcfcfc] dark:group-data-[role=user]:border-[#262626] dark:group-data-[role=user]:bg-[#181818]">
-                    {message.text}
-                  </Message.Text>
-                </Message.Root>
+              {toTurns(messages).map((turn) => (
+                <Message.Turn key={turn[0].id} className="flex flex-col gap-4">
+                  {turn.map((message) => (
+                    <Message.Root
+                      key={message.id}
+                      role={message.role}
+                      isLast={message.id === messages.at(-1)?.id}
+                      className="group flex w-full flex-col gap-1.5 data-[role=user]:items-end"
+                    >
+                      <Message.Text className="text-sm text-zinc-700 leading-6 group-data-[role=user]:max-w-[80%] group-data-[role=user]:rounded-[20px] group-data-[role=user]:bg-white group-data-[role=user]:px-3.5 group-data-[role=user]:py-1.5 group-data-[role=user]:text-zinc-900 group-data-[role=user]:shadow-[0_0_0_1px_rgb(0_0_0/0.08),0_1px_2px_rgb(0_0_0/0.04)] dark:text-zinc-300 dark:group-data-[role=user]:bg-zinc-800 dark:group-data-[role=user]:text-zinc-100 dark:group-data-[role=user]:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16)]">
+                        {message.text}
+                      </Message.Text>
+                    </Message.Root>
+                  ))}
+                </Message.Turn>
               ))}
             </Thread.Content>
           </div>
         </Thread.Viewport>
         <Thread.Composer className="absolute inset-x-0 bottom-0 z-2 w-full">
-          <div className="flex w-full flex-col items-center px-4 pb-4">
+          <div className="relative flex w-full flex-col items-center px-4 pb-4">
+            <ScrollButton />
             <Composer.Root onSubmit={handleSubmit} className="flex w-full flex-col">
-              <Composer.Container className="cursor-text rounded-2xl border border-[#f0f0f0] bg-white shadow-xs transition-colors focus-within:border-[#ececec] dark:border-[#262626] dark:bg-[#181818] dark:focus-within:border-[#2d2d2d]">
-                <Composer.Textarea className="max-h-32 min-h-8 overflow-y-auto px-4 pt-3 text-sm **:data-composer-editor:w-full **:data-composer-editor:max-w-none **:data-composer-editor:leading-[1.7] [&_[data-composer-editor]:focus]:outline-none">
+              <Composer.Container className="cursor-text rounded-xl bg-white p-1 shadow-[0_0_0_1px_rgb(0_0_0/0.08),0_1px_2px_-1px_rgb(0_0_0/0.08),0_6px_16px_-6px_rgb(0_0_0/0.1)] dark:bg-zinc-800 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.06),inset_0_0_0_1px_rgb(255_255_255/0.07),0_0_0_1px_rgb(0_0_0/0.2),0_1px_2px_rgb(0_0_0/0.12),0_6px_16px_-6px_rgb(0_0_0/0.22)]">
+                <Composer.Textarea className="max-h-32 min-h-12 overflow-y-auto px-2.5 pt-2.5 text-sm text-zinc-900 dark:text-zinc-100 **:data-composer-editor:w-full **:data-composer-editor:max-w-none **:data-composer-editor:leading-6 [&_[data-composer-editor]:focus]:outline-none">
                   <Composer.Placeholder
                     placeholder="Send a message…"
-                    className="leading-[1.7] text-[#949494] dark:text-[#6f6f6f]"
+                    className="text-zinc-400 leading-6 dark:text-zinc-500"
                   />
                 </Composer.Textarea>
-                <Composer.Actions className="flex justify-end gap-2 p-2">
-                  <Composer.Submit className="flex size-8 items-center justify-center rounded-full bg-[#1a1a1a] text-white transition-opacity disabled:opacity-40 dark:bg-[#fcfcfc] dark:text-[#111111]">
-                    <SendIcon />
+                <Composer.Actions className="flex h-12 items-center justify-end px-2.5">
+                  <Composer.Submit className="flex size-7 cursor-pointer items-center justify-center rounded-full bg-[#0169cc] bg-linear-to-b from-[oklch(57.2%_0.166_253.2)] to-[oklch(52.9%_0.173_255)] text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.28),0_0_0_1px_oklch(46.5%_0.146_254.8),0_1px_2px_rgb(1_105_204/0.35)] transition-opacity focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2 disabled:cursor-default disabled:opacity-40">
+                    <ArrowUp className="size-[15px]" />
                   </Composer.Submit>
                 </Composer.Actions>
               </Composer.Container>
@@ -74,19 +114,20 @@ export const ComposerStage = () => {
   );
 };
 
-const SendIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M8 13V3m0 0L3.5 7.5M8 3l4.5 4.5" />
-  </svg>
-);
+// useThread exposes the scroll state the viewport tracks; the button is yours.
+const ScrollButton = () => {
+  const { isAtBottom, scrollToBottom } = useThread();
+
+  if (isAtBottom) return null;
+
+  return (
+    <button
+      type="button"
+      onClick={() => scrollToBottom()}
+      aria-label="Scroll to latest"
+      className="absolute -top-10 z-10 flex size-8 cursor-pointer items-center justify-center rounded-full bg-white bg-linear-to-b from-white to-[#fdfdfd] text-zinc-500 shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)] transition-colors hover:from-[#fafafa] hover:to-[#f6f6f6] hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2 dark:bg-[#2d2d30] dark:from-[#313134] dark:to-[#2a2a2d] dark:text-zinc-400 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:hover:from-[#38383b] dark:hover:to-[#313134] dark:hover:text-zinc-100"
+    >
+      <ArrowDown className="size-[15px]" />
+    </button>
+  );
+};
diff --git a/content/docs/build-a-chat/demos/messages.tsx b/content/docs/build-a-chat/demos/messages.tsx
index 694daaf..33bafca 100644
--- a/content/docs/build-a-chat/demos/messages.tsx
+++ b/content/docs/build-a-chat/demos/messages.tsx
@@ -20,7 +20,7 @@ const MESSAGES = [
 
 // Stage 2 — the same thread, with each row now a Message that reports its role.
 export const MessagesStage = () => (
-  <div className="h-[280px] w-full max-w-xl overflow-hidden rounded-xl border border-[#f0f0f0] bg-white dark:border-[#262626] dark:bg-[#111111]">
+  <div className="h-[280px] w-full max-w-xl overflow-hidden rounded-xl bg-white shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:bg-zinc-900">
     <Thread.Root className="relative flex h-full w-full overflow-hidden">
       <Thread.Viewport className="h-full w-full overflow-x-hidden overflow-y-auto outline-none [overflow-anchor:auto]">
         <Thread.Content className="mx-auto flex w-full flex-col gap-4 p-4">
@@ -29,10 +29,10 @@ export const MessagesStage = () => (
               key={message.id}
               role={message.role}
               isLast={index === MESSAGES.length - 1}
-              className="group flex w-full flex-col gap-1 data-[role=user]:items-end"
+              className="group flex w-full flex-col gap-1.5 data-[role=user]:items-end"
             >
               {/* data-role sits on Root, so the bubble reads it through the group. */}
-              <Message.Text className="text-sm leading-[1.7] text-[#1a1a1a] group-data-[role=user]:min-h-9 group-data-[role=user]:max-w-[80%] group-data-[role=user]:rounded-2xl group-data-[role=user]:border group-data-[role=user]:border-[#f0f0f0] group-data-[role=user]:bg-white group-data-[role=user]:px-3 group-data-[role=user]:py-1.5 group-data-[role=user]:shadow-xs dark:text-[#fcfcfc] dark:group-data-[role=user]:border-[#262626] dark:group-data-[role=user]:bg-[#181818]">
+              <Message.Text className="text-sm text-zinc-700 leading-6 group-data-[role=user]:max-w-[80%] group-data-[role=user]:rounded-[20px] group-data-[role=user]:bg-white group-data-[role=user]:px-3.5 group-data-[role=user]:py-1.5 group-data-[role=user]:text-zinc-900 group-data-[role=user]:shadow-[0_0_0_1px_rgb(0_0_0/0.08),0_1px_2px_rgb(0_0_0/0.04)] dark:text-zinc-300 dark:group-data-[role=user]:bg-zinc-800 dark:group-data-[role=user]:text-zinc-100 dark:group-data-[role=user]:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16)]">
                 {message.text}
               </Message.Text>
             </Message.Root>
diff --git a/content/docs/build-a-chat/demos/thread.tsx b/content/docs/build-a-chat/demos/thread.tsx
index 2b14412..fcc8714 100644
--- a/content/docs/build-a-chat/demos/thread.tsx
+++ b/content/docs/build-a-chat/demos/thread.tsx
@@ -13,12 +13,12 @@ const LINES = [
 
 // Stage 1 — just the scroll container, filled with plain rows.
 export const ThreadStage = () => (
-  <div className="h-[280px] w-full max-w-xl overflow-hidden rounded-xl border border-[#f0f0f0] bg-white dark:border-[#262626] dark:bg-[#111111]">
+  <div className="h-[280px] w-full max-w-xl overflow-hidden rounded-xl bg-white shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:bg-zinc-900">
     <Thread.Root className="relative flex h-full w-full overflow-hidden">
       <Thread.Viewport className="h-full w-full overflow-x-hidden overflow-y-auto outline-none [overflow-anchor:auto]">
         <Thread.Content className="mx-auto flex w-full flex-col gap-4 p-4">
           {LINES.map((line) => (
-            <p key={line} className="text-sm leading-[1.7] text-[#1a1a1a] dark:text-[#fcfcfc]">
+            <p key={line} className="text-sm text-zinc-700 leading-6 dark:text-zinc-300">
               {line}
             </p>
           ))}
diff --git a/content/docs/changelog.mdx b/content/docs/changelog.mdx
new file mode 100644
index 0000000..5f9bec4
--- /dev/null
+++ b/content/docs/changelog.mdx
@@ -0,0 +1,14 @@
+---
+title: Changelog
+description: Every release of @intentface/chat, newest first.
+---
+
+{/* Changesets writes packages/chat/CHANGELOG.md on every release; it is included
+    here at build time, so this page is always the released notes. Its own
+    `# @intentface/chat` title is hidden, and the first version keeps no rule. */}
+
+<div className="[&>h1]:hidden [&>h1+h2]:mt-0 [&>h1+h2]:border-0 [&>h1+h2]:pt-0">
+
+<include>../../packages/chat/CHANGELOG.md</include>
+
+</div>
diff --git a/content/docs/handbook/accessibility.mdx b/content/docs/handbook/accessibility.mdx
index a818779..3dc0939 100644
--- a/content/docs/handbook/accessibility.mdx
+++ b/content/docs/handbook/accessibility.mdx
@@ -1,110 +1,69 @@
 ---
 title: Accessibility
-description: The accessibility features the primitives provide, and what your application still has to supply.
+description: What the primitives guarantee, and what your application still has to supply.
 ---
 
-The primitives handle ARIA attributes, roles, keyboard navigation, and focus
-management. Because the package renders no styles, anything visual — contrast,
-focus indication — is your application's responsibility.
-
-## Keyboard navigation
+The primitives own roles, relationships, keyboard behaviour and focus movement.
+They render no styles, so everything visual is yours — and some of it is not
+optional.
+
+## What you have to supply
+
+- **Focus indication.** Focus moves correctly; nothing paints it. Style
+  `:focus-visible` yourself, and remember that in command lists and ask-user
+  options the highlight *is* the indicator, so a faint highlight is a missing
+  focus ring rather than a soft hover.
+- **Contrast.** No colour ships with the package.
+- **Speaker identity.** A message's `role` reaches the DOM as `data-role` only.
+  Alignment and colour carry it to sighted readers and to nobody else, so add a
+  visually hidden prefix or an `aria-label`.
+- **Status copy.** Validation emits a code, not a message, and nothing announces
+  "generating" beyond a button label. Add your own `role="status"` region where
+  in-flight state matters, and `role="alert"` for failures.
+- **Anything you build in a seam.** A surface lifted through a render prop
+  inherits that pattern's obligations — a hover preview still has to open on
+  focus and close on Escape.
+
+## Keyboard
 
 The primitives follow the [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/).
-The composer's editor interprets keys by mode: an open command list, or an active
-ask-user flow, takes priority over normal typing. A primitive that claims keys of
-its own documents them in a key table on its page; one that relies on native focus
-order does not.
-
-Anything draggable is also operable from the keyboard. The shell's grip resizes
-the sidebar with the arrow keys once focused, so no layout a visitor can reach
-with a pointer is closed to them without one.
-
-A strip or a tree is one tab stop, not one per item. Focus follows the arrow
-keys without selecting, which is manual activation; a primitive that should
-select as focus moves says so through a prop rather than by default. The nav is a roving-tabindex widget:
-exactly one row is tabbable and the arrow keys move focus between rows. Before
-that state is seeded — a server render, or the frame before hydration — the
-active row carries the tab stop, which keeps a row rendered as a real anchor
-reachable without JavaScript. A field inside the tree keeps its own arrow keys,
-or its caret could never move.
-
-Command lists and ask-user options move a highlight rather than DOM focus, so the
-caret stays in the editor while you navigate. Arrowing past the end of a list
-keeps focus in place; arrowing up past the first ask-user option returns to the
-editor.
-
-## Focus management
-
-Focus is managed automatically after interaction — the composer restores the
-caret after selecting a command item, and ask-user recovers arrow navigation if a
-click elsewhere drops focus to the body.
-
-In command lists and ask-user options the highlight *is* the focus indication —
-focus follows it rather than moving separately, so styling the highlight faintly
-removes the focus indicator rather than softening a hover effect.
-
-## Roles and relationships
-
-The composer's editor is wired to its command list as a combobox: `aria-expanded`,
-`aria-controls`, and `aria-activedescendant` reference a `listbox`, and the active
-row carries `aria-selected`. Ask-user renders a labelled `radiogroup`, or
-checkboxes with `aria-checked` for multi-select questions. Disabled options are
-announced but skipped by highlight and selection.
-
-`Steps` marks the active item with `aria-current="step"`. `Reasoning.Root` carries
-`aria-busy` while streaming.
-
-Disclosure controls announce both their state and what they govern: the shell's
-trigger is a `<button>` with `aria-expanded` and an `aria-controls` pointing at
-the sidebar it opens. Its grip is a focusable `role="separator"` carrying
-`aria-orientation` and the `aria-valuenow` / `aria-valuemin` / `aria-valuemax`
-trio, and it always carries a value, falling back to the minimum before the first
-measurement lands — a focusable separator without one is an invalid widget.
-
-A part that exists only for the pointer is hidden from everything else. The
-shell's hotspot, the strip that floats a collapsed sidebar back out on hover, is
-`aria-hidden`, because the trigger already covers the same state change for
-keyboard and screen-reader users.
-
-The nav's trigger carries the same `aria-expanded` and `aria-controls` pair,
-pointing at the list it governs. Disabled rows get `aria-disabled` rather than
-leaving the focus ring, so they stay discoverable. `Nav.Action` sits outside the
-roving order and stops every event it handles, or activating it would also
-activate the row wrapped around it.
-
-Where a row is not a native control, activation is wired by hand. That is the
-price of a row that can hold an action rather than being a `<button>`, and a row
-that already activates itself — a real button, or an anchor swapped in through
-`render` — is left alone rather than activated twice.
-
-Where the standard role cannot describe the widget, the primitives say so and
-choose a different one rather than fail silently. A closable, open-ended tab
-strip is a `toolbar` of disclosures, not a `tablist`: a tablist may own only
-tabs, leaving nowhere for a close button, and it requires one selected tab, so
-"nothing open" is not a state it can express. Each trigger then carries
-`aria-expanded` and an `aria-controls` that only claims a viewport really in the
-document. Static, always-one-selected tabs are a different widget, and `tablist`
-is right for those.
-
-A floating surface that you work behind is non-modal throughout: no backdrop, no
-scroll lock, no focus trap, and no dismissal on outside press. Focus is never
-taken from you, but it is also never returned, so give such a surface its own
-close control — `Escape` then duplicates it rather than being the only way out.
-
-## Accessible labels
-
-Interactive parts carry default accessible names; containers do not, since they
-are not controls. `Composer.Submit` announces as "Stop generating" while
-generating rather than "Send message". `Attachments.Remove` takes a `filename` so
-each remove button announces its own item.
-
-All defaults are overridable via `aria-label` or `aria-labelledby`. Anything
-announced as content rather than as a name — status text, validation messages —
-is text you render, so it is localised wherever your copy lives.
+
+A composite widget is one tab stop, not one per item: the arrow keys move within
+it and Tab moves past it. Focus follows the arrows without selecting, and a
+primitive that should select as focus moves says so through a prop. Anything
+draggable is operable from the keyboard too.
+
+Which keys a primitive claims is on its own page, in a Keyboard table. A
+primitive with no table claims none and relies on native focus order.
+
+## Names
+
+Interactive parts ship default accessible names and containers do not, because
+containers are not controls. Every default is overridable through `aria-label`
+or `aria-labelledby`.
+
+Where a name would otherwise repeat down a list, the part takes the
+distinguishing piece as a prop rather than guessing. `Attachments.Remove` takes
+a `filename`, so five buttons in a row do not all announce "Remove attachment".
+
+Anything announced as content rather than as a name is text you render, so it is
+localised wherever the rest of your copy lives.
+
+## Deviations
+
+Twice, the standard role cannot describe the widget, and the primitive says so
+rather than failing quietly. Both are argued on the page that makes the choice:
+
+- [Tabs](/primitives/tabs#why-a-toolbar-and-not-a-tablist) is a `toolbar` of
+  disclosures, because a `tablist` may hold only tabs and must always have one
+  selected.
+- The [composer](/primitives/composer)'s editor omits `aria-expanded`, because
+  ARIA forbids it on `textbox` and `role="combobox"` would forbid
+  `aria-multiline`.
 
 ## Testing
 
 The package runs an axe-based suite over the composer combobox wiring, the
 ask-user flows, the display primitives' status attributes, and accessible names
-across controls. Automated checks can't evaluate contrast or focus visibility in
-your styling, so those need your own pass.
+across controls. Automated checks cannot evaluate contrast or focus visibility
+in your styling, so those need your own pass.
diff --git a/content/docs/index.mdx b/content/docs/index.mdx
index 7f05f43..a5075d0 100644
--- a/content/docs/index.mdx
+++ b/content/docs/index.mdx
@@ -46,9 +46,17 @@ with no adapter.
 | `/composer` | Contenteditable editor, inline chips, prefix command lists, attachments, ask-user flow |
 | `/thread` | Scroll container: at-bottom detection, auto-follow, dock measurement, prepend restoration |
 | `/message` | Message parts, turn grouping, chip-segmented text |
-| `/steps`, `/reasoning` | Tool-call timelines and reasoning disclosure |
-| `/chip`, `/attachments`, `/ask-user` | The remaining building blocks |
-| `/types`, `/message-utils`, `/chip-markdown` | The message contract, part utilities, and the chip wire format |
+| `/steps` | Collapsible timeline of a run: reasoning, tool calls and answered questions |
+| `/reasoning` | Reasoning disclosure that tracks streaming state and elapsed time |
+| `/chip` | Inline tokens for composer mentions and chips in messages |
+| `/attachments` | Attachment tray: items, remove, drop zone and file picker |
+| `/ask-user` | Parts for the questions a model asks the user |
+| `/shell` | Collapsible, resizable sidebar beside the viewport |
+| `/nav` | Nav tree with roving focus, typeahead and collapsible groups |
+| `/tabs` | Closable tabs whose panel renders in the layout or in a popover |
+| `/types` | The structural message contract |
+| `/message-utils` | Pure helpers over messages: part segments, turn grouping, text and file info |
+| `/chip-markdown` | Encode and parse the chip wire format inside message text |
 
 ## Next steps
 
diff --git a/content/docs/meta.json b/content/docs/meta.json
index b08154e..b21213c 100644
--- a/content/docs/meta.json
+++ b/content/docs/meta.json
@@ -1,4 +1,12 @@
 {
   "title": "Documentation",
-  "pages": ["index", "quick-start", "build-a-chat", "handbook", "primitives"]
+  "pages": [
+    "---Get started---",
+    "index",
+    "quick-start",
+    "build-a-chat",
+    "changelog",
+    "handbook",
+    "primitives"
+  ]
 }
diff --git a/content/docs/primitives/attachments.mdx b/content/docs/primitives/attachments.mdx
index 3b45a40..34f5f15 100644
--- a/content/docs/primitives/attachments.mdx
+++ b/content/docs/primitives/attachments.mdx
@@ -5,6 +5,7 @@ source: attachments
 ---
 
 import { Basic } from './attachments/demos/basic';
+import { Dropzone } from './attachments/demos/dropzone';
 
 <Demo component={<Basic />} file="primitives/attachments/demos/basic.tsx" />
 
@@ -48,14 +49,18 @@ With a drop zone and a picker trigger:
 </>
 ```
 
-## Accessibility
+## Examples
 
-`Attachments.Remove` and `Attachments.Trigger` are real buttons with default
-overridable names ("Remove attachment" / "Add attachment"). Pass `filename` to
-`Remove` so each chip announces distinctly ("Remove report.pdf") — without it,
-N remove buttons all read the same. `Attachments.Error` is a `role="alert"`
-live region: content appearing inside it announces immediately (the copy is
-still yours).
+### Dropping, picking and rejecting files
+
+The whole intake path in one tray. The package ships the mechanics —
+`matchesAccept` and `toAttachmentItem` are plain functions — and none of the
+policy: what counts as too large, and what the message says, are yours.
+
+Validation emits a code rather than copy, which is why the wording lives in one
+map in the demo and can be localised there.
+
+<Demo component={<Dropzone />} file="primitives/attachments/demos/dropzone.tsx" />
 
 ## API reference
 
@@ -64,14 +69,14 @@ Every part accepts `className`, `style`, and `render` (see
 
 ### Attachments
 
-The tray container. Renders `data-attachments` and takes no props of its own —
-mount it conditionally when there are items to show.
+The tray container. Mount it only when there are items to show; it renders no
+layout of its own. Renders a `<div>` element.
 
 ### Attachments.Item
 
-One attachment chip — a structural slot with no props of its own. Render the
-filename, size, thumbnail or icon inside it however you like. Renders
-`data-attachments-item`.
+One attachment, as a structural slot with no media taxonomy of its own. Read
+the item's `mediaType` and decide what an image or a PDF looks like. Renders a
+`<div>` element.
 
 export const itemAttrs = [
   { attribute: "data-attachments-item", description: "The chip." },
@@ -81,8 +86,9 @@ export const itemAttrs = [
 
 ### Attachments.Remove
 
-Removal affordance, shown on hover. Renders `<button data-attachments-remove>`
-named "Remove attachment", or `Remove {filename}` when `filename` is set.
+The removal affordance. Named "Remove attachment" by default, or
+`Remove {filename}` when `filename` is set, so a row of them does not announce
+identically. Renders a `<button>` element.
 
 export const removeProps = [
   { name: "onRemove", type: "() => void", default: "(required)", description: "Called when the button is clicked." },
@@ -93,9 +99,9 @@ export const removeProps = [
 
 ### Attachments.Dropzone
 
-Drop overlay. Renders `data-attachments-dropzone`. Pass `portalSelector` to
-portal it elsewhere — into the app shell, for instance, so files can be dropped
-anywhere.
+The drop overlay. `portalSelector` only moves where it renders (e.g. over an
+app shell region); where files can be dropped is `Composer.Attachments`'
+`globalDrop`, not this part. Renders a `<div>` element.
 
 export const dropzoneProps = [
   { name: "visible", type: "boolean", default: "false", description: "Show the overlay (while files are dragged over the scope)." },
@@ -114,16 +120,15 @@ export const dropzoneAttrs = [
 
 ### Attachments.Error
 
-Validation message slot. Renders `<span role="alert" data-attachments-error>`,
-so content appearing inside it announces immediately. Validation emits a
-structured `AttachmentErrorCode` (`"accept"`, `"max_file_size"`, `"max_files"`)
-on the composer's attachments state — you map codes to your own (localized)
-copy; the package ships no messages.
+The validation slot, as a live region: whatever appears inside announces
+immediately. Validation emits an `AttachmentErrorCode` — `"accept"`,
+`"max_file_size"` or `"max_files"` — never copy, so the message is yours to
+write and localise. Renders a `<span>` element with `role="alert"`.
 
 ### Attachments.Trigger
 
-The file-picker button. Renders `<button data-attachments-trigger>` named
-"Add attachment" by default.
+The file-picker button, named "Add attachment" by default. The package owns no
+file input; wire this to your own. Renders a `<button>` element.
 
 ## Utilities
 
diff --git a/content/docs/primitives/attachments/demos/basic.tsx b/content/docs/primitives/attachments/demos/basic.tsx
index 0365346..d3d9884 100644
--- a/content/docs/primitives/attachments/demos/basic.tsx
+++ b/content/docs/primitives/attachments/demos/basic.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { type AttachmentItem, Attachments } from "@intentface/chat/attachments";
-import { type ComponentProps, useState } from "react";
+import { File, X } from "@keyline-icons/react";
+import { useState } from "react";
 
 // A removable strip driven by local state — the parts are structural slots and
 // impose no media taxonomy, so icons and layout are yours to decide.
@@ -24,7 +25,7 @@ export const Basic = () => {
       <button
         type="button"
         onClick={() => setItems(INITIAL)}
-        className="cursor-pointer rounded-full border border-[#f0f0f0] bg-white px-4 py-1.5 text-sm font-medium text-[#686868] transition-colors hover:bg-[#fafafa] dark:border-[#262626] dark:bg-[#181818] dark:text-[#9b9b9b] dark:hover:bg-[#232323]"
+        className={`h-8 cursor-pointer rounded-full px-3.5 font-medium text-[13px] text-zinc-900 hover:from-[#fafafa] hover:to-[#f6f6f6] dark:hover:from-[#38383b] dark:hover:to-[#313134] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0169cc]/60 dark:text-zinc-100 ${RAISED}`}
       >
         Reset
       </button>
@@ -32,23 +33,25 @@ export const Basic = () => {
   }
 
   return (
-    <Attachments.Root className="flex w-full max-w-md flex-wrap gap-2">
+    <Attachments.Root className="flex w-full max-w-md flex-wrap gap-1.5">
       {items.map((item) => (
         <Attachments.Item
           key={item.id}
-          className="flex items-center gap-2 rounded-xl border border-[#f0f0f0] bg-white py-1.5 pr-1.5 pl-2.5 text-xs dark:border-[#262626] dark:bg-[#181818]"
+          className={`flex h-6 items-center gap-1.5 rounded-[7px] pr-2 pl-1.5 ${RAISED}`}
         >
-          <FileIcon className="text-[#949494]" />
-          <span className="max-w-40 truncate">{item.filename}</span>
-          <span className="text-[#949494] dark:text-[#6f6f6f]">
+          <File className="size-3.5 shrink-0 text-zinc-500 dark:text-zinc-400" />
+          <span className="max-w-40 truncate font-medium text-xs text-zinc-900 dark:text-zinc-100">
+            {item.filename}
+          </span>
+          <span className="font-mono text-[11px] text-zinc-400 dark:text-zinc-500">
             {formatFileSize(item.fileSize)}
           </span>
           <Attachments.Remove
             onRemove={() => setItems((current) => current.filter((it) => it.id !== item.id))}
             filename={item.filename}
-            className="flex size-5 cursor-pointer items-center justify-center rounded-full text-[#949494] transition-colors hover:bg-[#f4f4f4] hover:text-[#1a1a1a] dark:hover:bg-[#232323] dark:hover:text-[#fcfcfc]"
+            className="-mr-1 flex size-4 cursor-pointer items-center justify-center rounded-full text-zinc-400 transition-colors hover:bg-zinc-950/5 hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0169cc]/60 dark:text-zinc-500 dark:hover:bg-white/8 dark:hover:text-zinc-100"
           >
-            <CrossIcon />
+            <X className="size-[11px]" />
           </Attachments.Remove>
         </Attachments.Item>
       ))}
@@ -63,35 +66,6 @@ const formatFileSize = (bytes?: number) => {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 };
 
-const FileIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    width="14"
-    height="14"
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M9 1.5H4.5A1.5 1.5 0 0 0 3 3v10a1.5 1.5 0 0 0 1.5 1.5h7A1.5 1.5 0 0 0 13 13V5.5L9 1.5Z" />
-    <path d="M9 1.5v4h4" />
-  </svg>
-);
-
-const CrossIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    width="12"
-    height="12"
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="m4.5 4.5 7 7m-7 0 7-7" />
-  </svg>
-);
+// The raised surface shared by the reset button and each attachment chip.
+const RAISED =
+  "bg-white bg-linear-to-b from-white to-[#fdfdfd] shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)] dark:bg-[#2d2d30] dark:from-[#313134] dark:to-[#2a2a2d] dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]";
diff --git a/content/docs/primitives/attachments/demos/dropzone.tsx b/content/docs/primitives/attachments/demos/dropzone.tsx
new file mode 100644
index 0000000..ef56ab1
--- /dev/null
+++ b/content/docs/primitives/attachments/demos/dropzone.tsx
@@ -0,0 +1,159 @@
+"use client";
+
+import {
+  type AttachmentErrorCode,
+  type AttachmentItem,
+  Attachments,
+  matchesAccept,
+  revokeAttachmentUrl,
+  toAttachmentItem,
+} from "@intentface/chat/attachments";
+import { X } from "@keyline-icons/react";
+import { type DragEvent, useEffect, useRef, useState } from "react";
+
+const ACCEPT = "image/*,.pdf";
+const MAX_BYTES = 2 * 1024 * 1024;
+
+/*
+ * The whole intake path: drop a file on the panel, or pick one with the
+ * button, and watch a rejected file land in the error slot.
+ *
+ * The package ships the mechanics and none of the policy. `matchesAccept` and
+ * `toAttachmentItem` are plain functions you call where you like; what counts
+ * as too large, and what the message says when something is rejected, are
+ * decided here. Validation emits a *code*, never copy, so the wording below is
+ * ours to localise.
+ */
+export const Dropzone = () => {
+  const [items, setItems] = useState<AttachmentItem[]>([]);
+  const [dragging, setDragging] = useState(false);
+  const [error, setError] = useState<AttachmentErrorCode | null>(null);
+  const input = useRef<HTMLInputElement>(null);
+  const depth = useRef(0);
+
+  // Blob URLs outlive the component unless something revokes them: a removed
+  // item's on removal, and whatever is still minted when the demo unmounts.
+  const minted = useRef(new Set<AttachmentItem>());
+  useEffect(() => {
+    const live = minted.current;
+    return () => live.forEach(revokeAttachmentUrl);
+  }, []);
+
+  const add = (files: FileList | null) => {
+    if (!files?.length) return;
+    setError(null);
+
+    for (const file of Array.from(files)) {
+      if (!matchesAccept(file, ACCEPT)) return setError("accept");
+      if (file.size > MAX_BYTES) return setError("max_file_size");
+      const item = toAttachmentItem(file);
+      minted.current.add(item);
+      setItems((current) => [...current, item]);
+    }
+  };
+
+  // dragenter/dragleave fire for every child element, so a bare boolean
+  // flickers as the pointer crosses the tray. Counting depth does not.
+  const onDragEnter = (event: DragEvent) => {
+    event.preventDefault();
+    depth.current += 1;
+    setDragging(true);
+  };
+  const onDragLeave = () => {
+    depth.current -= 1;
+    if (depth.current <= 0) setDragging(false);
+  };
+  const onDrop = (event: DragEvent) => {
+    event.preventDefault();
+    depth.current = 0;
+    setDragging(false);
+    add(event.dataTransfer.files);
+  };
+
+  // A drop target is a pointer-only convenience, not a control. Giving it a role
+  // would announce an affordance no keyboard user can reach; the picker button
+  // below is the accessible route to the same thing.
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: drop target, not a control
+    <div
+      onDragEnter={onDragEnter}
+      onDragOver={(event) => event.preventDefault()}
+      onDragLeave={onDragLeave}
+      onDrop={onDrop}
+      className="relative flex w-full max-w-lg flex-col gap-3 rounded-xl border border-zinc-950/15 border-dashed bg-zinc-950/[0.02] p-3 has-data-[visible]:border-[#0169cc]/60 has-data-[visible]:bg-[#0169cc]/5 dark:border-white/15 dark:bg-white/[0.03] dark:has-data-[visible]:border-[#4c9bea]/60 dark:has-data-[visible]:bg-[#4c9bea]/10"
+    >
+      <Attachments.Dropzone
+        visible={dragging}
+        className="pointer-events-none absolute inset-0 z-10 hidden place-items-center rounded-[11px] bg-white/80 font-medium text-[#0169cc] text-[13px] data-[visible]:grid dark:bg-zinc-900/80 dark:text-[#4c9bea]"
+      >
+        Drop to attach
+      </Attachments.Dropzone>
+
+      {items.length > 0 && (
+        <Attachments.Root className="flex flex-wrap gap-1.5">
+          {items.map((item) => (
+            <Attachments.Item
+              key={item.id}
+              className={`group/item flex h-6 items-center gap-1.5 rounded-[7px] px-2 font-medium text-xs text-zinc-900 dark:text-zinc-100 ${RAISED}`}
+            >
+              <span className="max-w-40 truncate">{item.filename}</span>
+              <Attachments.Remove
+                filename={item.filename}
+                onRemove={() => {
+                  revokeAttachmentUrl(item);
+                  minted.current.delete(item);
+                  setItems((current) => current.filter((candidate) => candidate.id !== item.id));
+                }}
+                className="-mr-1 grid size-4 cursor-pointer place-items-center rounded-full text-zinc-400 opacity-0 transition-opacity hover:text-zinc-900 focus-visible:opacity-100 group-hover/item:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0169cc]/60 dark:text-zinc-500 dark:hover:text-zinc-100"
+              >
+                <X className="size-[11px]" />
+              </Attachments.Remove>
+            </Attachments.Item>
+          ))}
+        </Attachments.Root>
+      )}
+
+      <div className="flex items-center gap-3">
+        <Attachments.Trigger
+          onClick={() => input.current?.click()}
+          className={`h-8 shrink-0 cursor-pointer rounded-full px-3.5 font-medium text-[13px] text-zinc-900 hover:from-[#fafafa] hover:to-[#f6f6f6] dark:hover:from-[#38383b] dark:hover:to-[#313134] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0169cc]/60 dark:text-zinc-100 ${RAISED}`}
+        >
+          Add attachment
+        </Attachments.Trigger>
+
+        {/* The package owns no file input; this one is ours. */}
+        <input
+          ref={input}
+          type="file"
+          multiple
+          accept={ACCEPT}
+          onChange={(event) => {
+            add(event.target.files);
+            event.target.value = "";
+          }}
+          className="hidden"
+        />
+
+        <span className="text-xs text-zinc-500 dark:text-zinc-400">
+          Images and PDFs, up to 2 MB. Try a .txt to see a rejection.
+        </span>
+      </div>
+
+      {/* A live region: whatever appears inside announces immediately. */}
+      <Attachments.Error className="text-red-600 text-xs empty:hidden dark:text-red-400">
+        {error === null ? null : MESSAGES[error]}
+      </Attachments.Error>
+    </div>
+  );
+};
+
+/** Codes in, copy out — the only place wording lives. */
+const MESSAGES: Record<AttachmentErrorCode, string> = {
+  accept: "That file type is not accepted. Images and PDFs only.",
+  max_file_size: "That file is larger than 2 MB.",
+  max_files: "Too many files at once.",
+};
+
+// The raised surface shared by each attachment chip and the picker button.
+const RAISED =
+  "bg-white bg-linear-to-b from-white to-[#fdfdfd] shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)] dark:bg-[#2d2d30] dark:from-[#313134] dark:to-[#2a2a2d] dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]";
diff --git a/content/docs/primitives/chip.mdx b/content/docs/primitives/chip.mdx
index 9889baa..d04a85e 100644
--- a/content/docs/primitives/chip.mdx
+++ b/content/docs/primitives/chip.mdx
@@ -5,6 +5,7 @@ source: chip
 ---
 
 import { Basic } from './chip/demos/basic';
+import { Preview } from './chip/demos/preview';
 
 <Demo component={<Basic />} file="primitives/chip/demos/basic.tsx" />
 
@@ -37,18 +38,19 @@ never rendered inline:
 </Chip.Root>
 ```
 
-## Accessibility
+## Examples
 
-The chip is inline text: in messages the label reads as part of the sentence,
-and `Chip.Icon` is `aria-hidden` so decoration never announces. In the
-composer's editor, committed chips carry an `aria-label` of
-`{label}, {prefix} mention` so they announce as atomic tokens rather than
-bare words.
+### Building the preview surface
 
-The package never renders the hover preview — `renderWithPreview` is the seam.
-Whatever surface the styled layer lifts it into must honor the hover-card
-contract: open on keyboard focus as well as hover, and dismiss with Escape
-(a Base UI Hover Card, for instance, does both).
+`Chip.Preview` renders nothing itself. `renderWithPreview` hands you the badge
+and the preview content and lets you decide what surface they go in, which is
+what keeps a floating-UI dependency out of the package.
+
+Whatever you build there inherits the hover-card obligations: it opens on
+keyboard focus as well as hover, and Escape dismisses it. A CSS-only `:hover`
+panel looks right and cannot be reached without a pointer.
+
+<Demo component={<Preview />} file="primitives/chip/demos/preview.tsx" />
 
 ## API reference
 
@@ -57,35 +59,39 @@ Every part accepts `className`, `style`, and `render` (see
 
 ### Chip
 
-The inline token surface. Renders `data-chip`. A `Chip.Preview` child
-wraps it in a hover card.
+The inline token surface. Flows with the surrounding text rather than breaking
+the line box, and lifts a `Chip.Preview` child into whatever surface
+`renderWithPreview` builds. Renders a `<span>` element.
 
 export const rootProps = [
-  { name: "variant", type: '"primary" | "accent" | "warning"', default: '"primary"', description: "Tints the chip surface." },
+  { name: "variant", type: "string", default: "undefined", description: "An opaque styling hook, surfaced as data-variant. The package takes no view on the values; the demo uses primary, accent and warning." },
+  { name: "renderWithPreview", type: "(badge: ReactElement, preview: ReactNode) => ReactNode", description: "Called when a Chip.Preview child is present. Receives the rendered badge and the preview content; compose your own popup around them. Without it the preview content is ignored." },
 ];
 
 <PropsTable rows={rootProps} />
 
 export const rootAttrs = [
   { attribute: "data-chip", description: "The token element." },
-  { attribute: "data-variant", values: '"primary" | "accent" | "warning"', description: "The active variant, for styling." },
+  { attribute: "data-variant", values: "string", description: "The `variant` prop as given, for styling." },
 ];
 
 <AttributesTable rows={rootAttrs} />
 
 ### Chip.Icon
 
-Leading inline icon, baseline-aligned to the label and `aria-hidden`. Renders
-`data-chip-icon`.
+Leading inline icon, baseline-aligned to the label and `aria-hidden`, so
+decoration stays out of the chip's accessible name. Renders a `<span>` element.
 
 ### Chip.Label
 
-The chip text. Renders `data-chip-label`.
+The chip's text, which reads as part of the sentence around it. Renders a
+`<span>` element.
 
 ### Chip.Preview
 
-Marker child — its content becomes the hover-card body. **Renders nothing
-inline** (logic-only); the root lifts it into the preview surface.
+Marker child whose content becomes the preview body. Renders nothing inline:
+`Chip.Root` inspects its children and routes this through `renderWithPreview`,
+so the package never owns a popup.
 
 export const previewProps = [
   { name: "children", type: "ReactNode", default: "(required)", description: "The hover-card body." },
diff --git a/content/docs/primitives/chip/demos/basic.tsx b/content/docs/primitives/chip/demos/basic.tsx
index 5f945ee..c501aaf 100644
--- a/content/docs/primitives/chip/demos/basic.tsx
+++ b/content/docs/primitives/chip/demos/basic.tsx
@@ -1,16 +1,17 @@
 "use client";
 
 import { Chip } from "@intentface/chat/chip";
-import type { ComponentProps, ReactElement, ReactNode } from "react";
+import { Globe } from "@keyline-icons/react";
+import type { ReactElement, ReactNode } from "react";
 
 // Chips flow inline with text. `variant` is an opaque string surfaced as
 // data-variant, so the tinting rules are entirely yours.
 export const Basic = () => (
-  <p className="max-w-md text-sm leading-8 text-[#1a1a1a] dark:text-[#fcfcfc]">
+  <p className="max-w-md text-sm text-zinc-700 leading-8 dark:text-zinc-300">
     Pulled results from{" "}
     <Chip.Root variant="accent" className={CHIP_CLASS}>
       <Chip.Icon className="flex items-center">
-        <GlobeIcon />
+        <Globe className="size-3.5" />
       </Chip.Icon>
       <Chip.Label>web-search</Chip.Label>
     </Chip.Root>{" "}
@@ -28,7 +29,7 @@ export const Basic = () => (
 );
 
 const CHIP_CLASS =
-  "mx-0.5 inline-flex items-center gap-1 rounded-md border border-[#f0f0f0] bg-[#f4f4f4] px-1.5 py-0.5 align-baseline text-xs font-medium data-[variant=accent]:border-blue-200 data-[variant=accent]:bg-blue-50 data-[variant=accent]:text-blue-700 data-[variant=warning]:border-amber-200 data-[variant=warning]:bg-amber-50 data-[variant=warning]:text-amber-700 dark:border-[#2d2d2d] dark:bg-[#232323] dark:data-[variant=accent]:border-blue-900 dark:data-[variant=accent]:bg-blue-950 dark:data-[variant=accent]:text-blue-300 dark:data-[variant=warning]:border-amber-900 dark:data-[variant=warning]:bg-amber-950 dark:data-[variant=warning]:text-amber-300";
+  "mx-0.5 inline-flex h-6 items-center gap-1 rounded-full bg-white bg-linear-to-b from-white to-[#fdfdfd] px-2 align-middle font-medium text-xs text-zinc-900 shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)] data-[variant=accent]:bg-[#0169cc]/10 data-[variant=accent]:bg-none data-[variant=accent]:text-[#0169cc] data-[variant=accent]:shadow-none data-[variant=warning]:bg-amber-500/12 data-[variant=warning]:bg-none data-[variant=warning]:text-amber-700 data-[variant=warning]:shadow-none dark:bg-[#2d2d30] dark:from-[#313134] dark:to-[#2a2a2d] dark:text-zinc-100 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:data-[variant=accent]:bg-[#4c9bea]/15 dark:data-[variant=accent]:text-[#4c9bea] dark:data-[variant=accent]:shadow-none dark:data-[variant=warning]:bg-amber-500/12 dark:data-[variant=warning]:text-amber-300 dark:data-[variant=warning]:shadow-none";
 
 // Chip.Preview renders nothing on its own — Root hands you the badge and the
 // preview content, and you compose whatever popup you want. This one is pure
@@ -36,24 +37,8 @@ const CHIP_CLASS =
 const renderWithPreview = (badge: ReactElement, preview: ReactNode) => (
   <span className="group relative inline-block">
     {badge}
-    <span className="pointer-events-none absolute bottom-full left-1/2 z-10 mb-1 w-52 -translate-x-1/2 rounded-lg border border-[#f0f0f0] bg-white p-2 text-xs leading-snug text-[#686868] opacity-0 shadow-md transition-opacity group-hover:opacity-100 dark:border-[#2d2d2d] dark:bg-[#181818] dark:text-[#9b9b9b]">
+    <span className="pointer-events-none absolute bottom-full left-1/2 z-10 mb-1.5 w-52 -translate-x-1/2 rounded-xl bg-white p-2.5 text-xs text-zinc-500 leading-snug opacity-0 shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_12px_32px_-8px_rgb(0_0_0/0.16)] transition-opacity group-hover:opacity-100 dark:bg-zinc-800 dark:text-zinc-400 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.06),inset_0_0_0_1px_rgb(255_255_255/0.07),0_0_0_1px_rgb(0_0_0/0.16),0_12px_32px_-8px_rgb(0_0_0/0.4)]">
       {preview}
     </span>
   </span>
 );
-
-const GlobeIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    width="12"
-    height="12"
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    aria-hidden="true"
-    {...props}
-  >
-    <circle cx="8" cy="8" r="6" />
-    <path d="M2 8h12M8 2c1.7 1.8 2.5 3.8 2.5 6S9.7 12.2 8 14C6.3 12.2 5.5 10.2 5.5 8S6.3 3.8 8 2Z" />
-  </svg>
-);
diff --git a/content/docs/primitives/chip/demos/preview.tsx b/content/docs/primitives/chip/demos/preview.tsx
new file mode 100644
index 0000000..6932227
--- /dev/null
+++ b/content/docs/primitives/chip/demos/preview.tsx
@@ -0,0 +1,97 @@
+"use client";
+
+import { Chip } from "@intentface/chat/chip";
+import { type ReactElement, type ReactNode, useEffect, useRef, useState } from "react";
+
+/*
+ * `Chip.Preview` renders nothing itself. `renderWithPreview` hands you the
+ * badge and the preview content and lets you decide what surface they go in,
+ * which is the seam that keeps the package free of a floating library.
+ *
+ * Whatever you build there inherits the hover-card obligations: it has to open
+ * on keyboard focus as well as hover, and Escape has to dismiss it. A CSS-only
+ * `:hover` panel looks right and is unreachable without a pointer.
+ */
+export const Preview = () => (
+  <p className="max-w-md text-sm text-zinc-700 leading-8 dark:text-zinc-300">
+    Cited{" "}
+    <Chip.Root className={chipClass} renderWithPreview={renderWithPreview}>
+      <Chip.Label>rfc-1149</Chip.Label>
+      <Chip.Preview>
+        <span className="font-medium text-zinc-900 dark:text-zinc-100">
+          A Standard for the Transmission of IP Datagrams on Avian Carriers
+        </span>
+        <span className="mt-1 block">Network Working Group, April 1990.</span>
+      </Chip.Preview>
+    </Chip.Root>{" "}
+    and{" "}
+    <Chip.Root variant="accent" className={chipClass} renderWithPreview={renderWithPreview}>
+      <Chip.Label>rfc-2324</Chip.Label>
+      <Chip.Preview>
+        <span className="font-medium text-zinc-900 dark:text-zinc-100">
+          Hyper Text Coffee Pot Control Protocol
+        </span>
+        <span className="mt-1 block">Network Working Group, April 1998.</span>
+      </Chip.Preview>
+    </Chip.Root>
+    . Tab to a chip, or hover it.
+  </p>
+);
+
+/**
+ * Hover and focus both open it, Escape and blur both close it, and the panel is
+ * `aria-hidden` while closed so it never reaches a screen reader out of turn.
+ * A real app would reach for a positioned hover card instead of hand-rolling
+ * this; the obligations are the same either way.
+ */
+const renderWithPreview = (badge: ReactElement, preview: ReactNode) => (
+  <PreviewSurface badge={badge} preview={preview} />
+);
+
+const PreviewSurface = ({ badge, preview }: { badge: ReactElement; preview: ReactNode }) => {
+  const [open, setOpen] = useState(false);
+  const host = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open]);
+
+  return (
+    <span ref={host} className="relative inline-block">
+      {/* A real button, not a span with a tabIndex: this is the control that
+          discloses the preview, so it should be one. It carries the pointer and
+          focus handlers too, which keeps every listener on an element that can
+          actually receive them. */}
+      <button
+        type="button"
+        onPointerEnter={() => setOpen(true)}
+        onPointerLeave={() => setOpen(false)}
+        onFocus={() => setOpen(true)}
+        onBlur={() => setOpen(false)}
+        className="inline-flex cursor-pointer rounded-full align-middle focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2"
+      >
+        {badge}
+      </button>
+
+      <span
+        aria-hidden={!open}
+        className={[
+          "pointer-events-none absolute bottom-full left-1/2 z-10 mb-1.5 w-56 -translate-x-1/2",
+          "rounded-xl bg-white p-2.5 text-left text-xs text-zinc-500 leading-snug shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_12px_32px_-8px_rgb(0_0_0/0.16)]",
+          "transition-opacity duration-150 dark:bg-zinc-800 dark:text-zinc-400 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.06),inset_0_0_0_1px_rgb(255_255_255/0.07),0_0_0_1px_rgb(0_0_0/0.16),0_12px_32px_-8px_rgb(0_0_0/0.4)]",
+          open ? "opacity-100" : "opacity-0",
+        ].join(" ")}
+      >
+        {preview}
+      </span>
+    </span>
+  );
+};
+
+const chipClass =
+  "mx-0.5 inline-flex h-6 items-center gap-1 rounded-full bg-white bg-linear-to-b from-white to-[#fdfdfd] px-2 align-middle font-medium text-xs text-zinc-900 shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)] data-[variant=accent]:bg-[#0169cc]/10 data-[variant=accent]:bg-none data-[variant=accent]:text-[#0169cc] data-[variant=accent]:shadow-none dark:bg-[#2d2d30] dark:from-[#313134] dark:to-[#2a2a2d] dark:text-zinc-100 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:data-[variant=accent]:bg-[#4c9bea]/15 dark:data-[variant=accent]:text-[#4c9bea] dark:data-[variant=accent]:shadow-none";
diff --git a/content/docs/primitives/composer.mdx b/content/docs/primitives/composer.mdx
index 4bdf2e4..4361f7d 100644
--- a/content/docs/primitives/composer.mdx
+++ b/content/docs/primitives/composer.mdx
@@ -20,6 +20,7 @@ import { Store } from './composer/demos/store';
 - **Prefix commands** — type `/`, `@`, or other prefixes to open command lists.
 - **Panel** — hosts command results, live steps, or an ask-user prompt above the field.
 - **Headless** — behavior lives in `@intentface/chat`; the demos below show one way to style it, and every class in them is yours to change.
+- **Isolate it from your stream** — see [Why the composer needs isolating](#why-the-composer-needs-isolating). The editor is the most expensive thing on the page to re-render per token.
 - **Get started** — see [Quick start](/quick-start) to add the package.
 
 ## Anatomy
@@ -59,7 +60,7 @@ The bare nesting — every part is optional except `Composer` and `Container`:
 `Composer.Panel` takes plain children or a callback receiving the composer
 state, and shows only while its resolved content is non-empty. Gate each part on
 the state it belongs to (`commands.active`, `askUser.active`, …) and the panel
-opens and closes to match — priority is just the order of your branches.
+opens and closes to match — priority is the order of your branches.
 
 ## Examples
 
@@ -111,24 +112,18 @@ back.
 
 <Demo component={<Controlled />} file="primitives/composer/demos/controlled.tsx" />
 
-### External store
+### Reaching a composer from outside
 
-`Composer.createStore()` returns a handle you own. Pass it via `store` and
-drive the composer from anywhere — a toolbar, a shortcut — through
-`store.controller`, with no context or ref threading.
+Every `Composer.Root` creates its own isolated store, so several composers can
+share a page with no wiring at all. Reaching into one from outside its tree is
+the case that needs a handle: `Composer.createStore()` returns one you own, and
+passing it as `store` lets a toolbar, a shortcut or a status bar drive the
+composer through `store.controller` or `useComposerStore`, with no context or
+ref threading.
 
 <Demo component={<Store />} file="primitives/composer/demos/store.tsx" />
 
-## Multiple instances
-
-Every `<Composer.Root>` creates its own isolated store, so several composers can
-live on one page with no wiring. To reach a composer from outside its tree —
-toolbars, keyboard shortcuts, status bars — create an explicit handle with
-`Composer.createStore()`, pass it via the `store` prop, and use
-`store.controller` (imperative) or `useComposerStore(store, selector)`
-(reactive).
-
-## Performance
+## Why the composer needs isolating
 
 Typing costs nothing outside the composer: editor state lives in the store and
 parts subscribe by slice with `useComposer(selector)`, so a keystroke
@@ -166,35 +161,35 @@ ask-user being active, takes priority over normal typing.
 **Normal typing**
 
 export const normalKeys = [
-  { attribute: "Enter", description: "Submit the form (requestSubmit)." },
-  { attribute: "Shift + Enter", description: "Insert a soft line break." },
-  { attribute: "Backspace", description: "When the editor is empty and attachments exist, remove the last attachment." },
+  { keys: "Enter", description: "Submit the form (requestSubmit)." },
+  { keys: "Shift + Enter", description: "Insert a soft line break." },
+  { keys: "Backspace", description: "When the editor is empty and attachments exist, remove the last attachment." },
 ];
 
-<AttributesTable rows={normalKeys} />
+<KeysTable rows={normalKeys} />
 
 **Command list open**
 
 export const commandKeys = [
-  { attribute: "ArrowUp / ArrowDown", description: "Move the highlight through the items." },
-  { attribute: "ArrowLeft / ArrowRight", description: "Move the caret within the trigger token." },
-  { attribute: "Enter / Tab", description: "Select the highlighted item." },
-  { attribute: "Escape", description: "Close the command list." },
+  { keys: "ArrowUp / ArrowDown", description: "Move the highlight through the items." },
+  { keys: "ArrowLeft / ArrowRight", description: "Move the caret within the trigger token." },
+  { keys: "Enter / Tab", description: "Select the highlighted item." },
+  { keys: "Escape", description: "Close the command list." },
 ];
 
-<AttributesTable rows={commandKeys} />
+<KeysTable rows={commandKeys} />
 
 **Ask-user active**
 
 export const askUserKeys = [
-  { attribute: "ArrowUp / ArrowDown", description: "Navigate options; up past the first refocuses the editor." },
-  { attribute: "ArrowLeft / ArrowRight", description: "Go to the previous / next question." },
-  { attribute: "Enter", description: "Select the highlighted option." },
-  { attribute: "Escape", description: "Dismiss the current step." },
-  { attribute: "Any character", description: "Focus the editor and start typing a free-text answer." },
+  { keys: "ArrowUp / ArrowDown", description: "Navigate options; up past the first refocuses the editor." },
+  { keys: "ArrowLeft / ArrowRight", description: "Go to the previous / next question." },
+  { keys: "Enter", description: "Select the highlighted option." },
+  { keys: "Escape", description: "Dismiss the current step." },
+  { keys: "Any character", description: "Focus the editor and start typing a free-text answer." },
 ];
 
-<AttributesTable rows={askUserKeys} />
+<KeysTable rows={askUserKeys} />
 
 While `isGenerating`, `Escape` inside the composer calls `Submit`'s `onStop` (via
 `useComposerSubmit`): from the editor, a button, or a part a positioned `Panel`
@@ -207,65 +202,6 @@ To keep Escape for something else, call `event.preventPrimitiveHandler()` in
 `Composer.Root`'s `onKeyDown`. To stop from anywhere in the chat, handle Escape on
 its container — the floating dock on the Tabs page does this on `Thread.Root`.
 
-## Accessibility
-
-### Command popup (combobox)
-
-The editor is a `role="textbox"` with combobox wiring: `aria-autocomplete="list"`,
-`aria-haspopup="listbox"`, plus `aria-controls` and `aria-activedescendant`
-while a trigger popup is open. The popup renders `role="listbox"` (labelled
-"Suggestions", overridable) with `role="option"` rows carrying stable ids and
-`aria-selected` on the highlight — keyboard selection stays in the editor, so
-rows are never tab stops. Grouped lists wrap in `role="group"` labelled by
-their `CommandGroupLabel`. Async resolution sets `aria-busy` on the listbox and
-the empty state is a `role="status"` region. Committed mention chips announce
-as atomic tokens ("Label, @ mention").
-
-One deliberate deviation from the strict APG combobox pattern: `aria-expanded`
-is omitted — ARIA 1.2 forbids it on `textbox`, and switching to
-`role="combobox"` would forbid `aria-multiline`, which matters more for a
-multiline chat field. The popup announces through `aria-haspopup` and live
-`aria-activedescendant` narration instead. Tab selects the highlighted option
-while the popup is open (Linear-style) rather than moving focus.
-
-The placeholder overlay is `aria-hidden` — assistive tech hears the string
-`placeholder` prop via `aria-placeholder`. When rich `children` replace the
-string, keep a `placeholder` string alongside (children win visually) so the
-hint still announces.
-
-### Ask-user questions
-
-While `questions` are active, the options form a labelled group: `AskUser.Options`
-renders `role="radiogroup"` (single-select) or `role="group"` (multi-select),
-named by `AskUser.Label` and described by `AskUser.StepLabel` automatically.
-Each `AskUser.Option` is the real control — `role="radio"` / `role="checkbox"`
-with `aria-checked` — and holds the group's single tab stop via roving
-`tabindex`: DOM focus follows the highlight, entering the group on arrival and
-moving with ArrowUp/ArrowDown. Enter and Space select; Escape dismisses the
-step (from the options or the editor); typing any character returns focus to
-the editor as a free-text answer. Never nest an interactive control inside an
-option — the option itself is the control, and the composer's question-mode
-key handling treats native inputs as foreign editables.
-
-- **Form semantics.** The root renders a `<form>`; `Enter` submits and
-  `Submit` is a real submit button, so the composer works with standard form
-  and assistive-tech expectations.
-- **Click-to-focus.** `Container` is a mouse-only focus passthrough: clicking
-  its chrome focuses the editor, but clicks on nested buttons, links, and
-  inputs pass through. It carries no role and no tab stop — keyboard users tab
-  straight to the editor.
-- **Ask-user focus.** Activating `questions` moves focus into the options
-  group; typing any character returns focus to the editor for a free-text
-  answer.
-- **Default names.** `Submit` is named "Send message", flipping to
-  "Stop generating" while generating so the morphed control announces
-  correctly; `AttachmentTrigger` is named "Add attachment". Both are
-  overridable via `aria-label`.
-- **Busy states.** Submitting/generating are exposed as `data-submitting` on
-  the root and the `Submit` label flip — the package emits no live-region copy;
-  add a consumer-owned `role="status"` region if you want in-flight
-  announcements beyond the button state.
-
 ## API reference
 
 Every part accepts `className`, `style`, and `render` (see
@@ -306,6 +242,29 @@ Returns a `ComposerStore` handle. Pass it to `store`, read it with
 `store.controller` (`focus`, `blur`, `clear`, `insertText`, `insertChip`,
 `getText`, `setText`, `serialize`, `ensureFocus`).
 
+```tsx
+import { Composer, useComposerStore } from "@intentface/chat/composer";
+
+// Created outside the tree, so anything can reach it: no context, no ref.
+const store = Composer.createStore();
+
+export const Chat = () => {
+  const hasContent = useComposerStore(store, (composer) => composer.textarea.hasContent);
+
+  return (
+    <>
+      <Composer.Root store={store} onSubmit={send}>{/* … */}</Composer.Root>
+      <button type="button" onClick={() => store.controller.insertText("@channel ")}>
+        Mention the channel
+      </button>
+      <button type="button" disabled={!hasContent} onClick={() => store.controller.clear()}>
+        Clear
+      </button>
+    </>
+  );
+};
+```
+
 `onSubmit` receives a discriminated `ComposerSubmitData`:
 
 ```ts
@@ -424,7 +383,7 @@ export const attachmentsProps = [
   { name: "maxFiles", type: "number", default: "unlimited", description: "Maximum file count." },
   { name: "maxFileSize", type: "number", default: "unlimited", description: "Maximum size per file." },
   { name: "multiple", type: "boolean", default: "true", description: "Allow selecting multiple files." },
-  { name: "globalDrop", type: "boolean", default: "false", description: "Accept drops anywhere in the document, not just over the composer." },
+  { name: "globalDrop", type: "boolean", default: "false", description: "Accept drops anywhere in the document, not only over the composer." },
   { name: "children", type: "ReactNode", description: "The visible strip / drop zone." },
 ];
 
diff --git a/content/docs/primitives/composer/demos/ask-user-flow.tsx b/content/docs/primitives/composer/demos/ask-user-flow.tsx
index 34cc75f..381b32f 100644
--- a/content/docs/primitives/composer/demos/ask-user-flow.tsx
+++ b/content/docs/primitives/composer/demos/ask-user-flow.tsx
@@ -1,13 +1,9 @@
 "use client";
 
-import { AskUser } from "@intentface/chat/ask-user";
-import {
-  type AskUserQuestion,
-  Composer,
-  type ComposerSubmitData,
-  useComposer,
-} from "@intentface/chat/composer";
-import { type ComponentProps, useState } from "react";
+import { type AskUserQuestion, Composer, type ComposerSubmitData } from "@intentface/chat/composer";
+import { ArrowUp } from "@keyline-icons/react";
+import { useState } from "react";
+import { Controls, Prompt } from "./ask-user";
 
 // Setting `questions` arms the flow and flips askUser.active. Answering or
 // skipping the last one fires onSubmit with { kind: "answers" }.
@@ -64,21 +60,21 @@ export const AskUserFlow = () => {
             composer upward; the default is a portaled overlay. */}
         <Composer.Panel
           anchor={false}
-          className="mb-2 overflow-hidden rounded-2xl border border-[#f0f0f0] bg-white dark:border-[#262626] dark:bg-[#181818]"
+          className="mb-2 overflow-hidden rounded-xl bg-white shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] dark:bg-zinc-800 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]"
         >
           {!done && <Prompt />}
         </Composer.Panel>
-        <Composer.Container className="cursor-text rounded-2xl border border-[#f0f0f0] bg-white shadow-xs transition-colors focus-within:border-[#ececec] dark:border-[#262626] dark:bg-[#181818] dark:focus-within:border-[#2d2d2d]">
-          <Composer.Textarea className="max-h-32 min-h-8 overflow-y-auto px-4 pt-3 text-sm **:data-composer-editor:w-full **:data-composer-editor:max-w-none **:data-composer-editor:leading-[1.7] [&_[data-composer-editor]:focus]:outline-none">
+        <Composer.Container className="cursor-text rounded-xl bg-white p-1 shadow-[0_0_0_1px_rgb(0_0_0/0.08),0_1px_2px_-1px_rgb(0_0_0/0.08),0_6px_16px_-6px_rgb(0_0_0/0.1)] dark:bg-zinc-800 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.06),inset_0_0_0_1px_rgb(255_255_255/0.07),0_0_0_1px_rgb(0_0_0/0.2),0_1px_2px_rgb(0_0_0/0.12),0_6px_16px_-6px_rgb(0_0_0/0.22)]">
+          <Composer.Textarea className="max-h-32 min-h-12 overflow-y-auto px-2.5 pt-2.5 text-sm text-zinc-900 dark:text-zinc-100 **:data-composer-editor:w-full **:data-composer-editor:max-w-none **:data-composer-editor:leading-6 [&_[data-composer-editor]:focus]:outline-none">
             <Composer.Placeholder
               placeholder={done ? "All set — reset to try again" : "Or type your own answer…"}
-              className="leading-[1.7] text-[#949494] dark:text-[#6f6f6f]"
+              className="text-zinc-400 leading-6 dark:text-zinc-500"
             />
           </Composer.Textarea>
-          <Composer.Actions className="flex items-center justify-end gap-2 p-2">
+          <Composer.Actions className="flex h-12 items-center justify-end gap-1.5 px-2.5">
             {done ? (
-              <Composer.Submit className="flex size-8 items-center justify-center rounded-full bg-[#1a1a1a] text-white transition-opacity disabled:opacity-40 dark:bg-[#fcfcfc] dark:text-[#111111]">
-                <SendIcon />
+              <Composer.Submit className="flex size-7 cursor-pointer items-center justify-center rounded-full bg-[#0169cc] bg-linear-to-b from-[oklch(57.2%_0.166_253.2)] to-[oklch(52.9%_0.173_255)] text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.28),0_0_0_1px_oklch(46.5%_0.146_254.8),0_1px_2px_rgb(1_105_204/0.35)] transition-opacity focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2 disabled:cursor-default disabled:opacity-40">
+                <ArrowUp className="size-[15px]" />
               </Composer.Submit>
             ) : (
               <Controls />
@@ -90,7 +86,7 @@ export const AskUserFlow = () => {
         <button
           type="button"
           onClick={reset}
-          className="cursor-pointer rounded-full border border-[#f0f0f0] bg-white px-4 py-1.5 text-sm font-medium text-[#686868] transition-colors hover:bg-[#fafafa] dark:border-[#262626] dark:bg-[#181818] dark:text-[#9b9b9b] dark:hover:bg-[#232323]"
+          className="h-8 cursor-pointer rounded-full bg-white bg-linear-to-b from-white to-[#fdfdfd] px-3 font-medium text-[13px] text-zinc-900 shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)] transition-colors hover:from-[#fafafa] hover:to-[#f6f6f6] focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2 dark:bg-[#2d2d30] dark:from-[#313134] dark:to-[#2a2a2d] dark:text-zinc-100 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:hover:from-[#38383b] dark:hover:to-[#313134]"
         >
           Reset questions
         </button>
@@ -98,126 +94,3 @@ export const AskUserFlow = () => {
     </div>
   );
 };
-
-// The parts are structural; the current question and selections come from the
-// composer's askUser slice.
-const Prompt = () => {
-  const askUser = useComposer((composer) => composer.askUser);
-  const question = askUser.questions?.[askUser.step];
-
-  if (!question) return null;
-
-  const entry = askUser.answers.get(askUser.step);
-  const total = askUser.questions?.length ?? 0;
-
-  return (
-    <AskUser.Root className="flex flex-col gap-1 p-2">
-      <AskUser.Header className="flex h-7 items-center gap-2 px-2">
-        <AskUser.Label className="text-sm font-medium">{question.question}</AskUser.Label>
-        {!askUser.isSingle && total > 1 && (
-          <AskUser.Navigation className="ml-auto flex items-center gap-1 text-[#949494] dark:text-[#6f6f6f]">
-            <AskUser.Previous
-              onClick={askUser.goBack}
-              disabled={askUser.step === 0}
-              aria-label="Previous question"
-              className="cursor-pointer rounded-md px-1.5 disabled:opacity-30"
-            >
-              ‹
-            </AskUser.Previous>
-            <AskUser.StepLabel className="text-xs tabular-nums">
-              {({ current, total: count }) => `${current} of ${count}`}
-            </AskUser.StepLabel>
-            <AskUser.Next
-              onClick={askUser.goNext}
-              disabled={askUser.step === total - 1}
-              aria-label="Next question"
-              className="cursor-pointer rounded-md px-1.5 disabled:opacity-30"
-            >
-              ›
-            </AskUser.Next>
-          </AskUser.Navigation>
-        )}
-      </AskUser.Header>
-      {question.options && (
-        <AskUser.Options
-          ref={askUser.optionsRef}
-          multiSelect={Boolean(question.multiSelect)}
-          groupName={`question-${askUser.step}`}
-          className="flex flex-col"
-        >
-          {question.options.map((option) => {
-            const selected = Boolean(entry?.selected.has(option.label));
-            return (
-              <AskUser.Option
-                key={option.label}
-                value={option.label}
-                selected={selected}
-                onSelect={() => askUser.toggleOption(option.label)}
-                className="flex cursor-pointer items-start gap-2 rounded-[10px] p-2 outline-none transition-colors data-highlighted:bg-[#f4f4f4] dark:data-highlighted:bg-[#232323]"
-              >
-                {/* Decorative: the Option itself carries the radio/checkbox role. */}
-                <span
-                  aria-hidden="true"
-                  className={`mt-px flex size-4 shrink-0 items-center justify-center rounded border text-[10px] ${
-                    selected
-                      ? "border-[#1a1a1a] bg-[#1a1a1a] text-white dark:border-[#fcfcfc] dark:bg-[#fcfcfc] dark:text-[#111111]"
-                      : "border-[#ececec] dark:border-[#2d2d2d]"
-                  }`}
-                >
-                  {selected ? "✓" : ""}
-                </span>
-                <AskUser.OptionContent className="flex flex-col gap-0.5">
-                  <AskUser.OptionLabel className="text-sm leading-tight">
-                    {option.label}
-                  </AskUser.OptionLabel>
-                  {option.description && (
-                    <AskUser.OptionDescription className="text-xs text-[#949494] dark:text-[#6f6f6f]">
-                      {option.description}
-                    </AskUser.OptionDescription>
-                  )}
-                </AskUser.OptionContent>
-              </AskUser.Option>
-            );
-          })}
-        </AskUser.Options>
-      )}
-    </AskUser.Root>
-  );
-};
-
-// Dismiss is a plain button you wire up; Continue is type=submit, so the
-// enclosing Composer.Root form drives it.
-const Controls = () => {
-  const askUser = useComposer((composer) => composer.askUser);
-
-  return (
-    <>
-      <AskUser.Dismiss
-        onClick={askUser.dismissStep}
-        className="cursor-pointer rounded-full px-3 py-1.5 text-sm text-[#949494] transition-colors hover:bg-[#f4f4f4] hover:text-[#1a1a1a] dark:text-[#6f6f6f] dark:hover:bg-[#232323] dark:hover:text-[#fcfcfc]"
-      >
-        Skip
-      </AskUser.Dismiss>
-      <AskUser.Continue className="cursor-pointer rounded-full bg-[#1a1a1a] px-3.5 py-1.5 text-sm font-medium text-white dark:bg-[#fcfcfc] dark:text-[#111111]">
-        {askUser.isLastStep ? "Done" : "Continue"}
-      </AskUser.Continue>
-    </>
-  );
-};
-
-const SendIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M8 13V3m0 0L3.5 7.5M8 3l4.5 4.5" />
-  </svg>
-);
diff --git a/content/docs/primitives/composer/demos/ask-user.tsx b/content/docs/primitives/composer/demos/ask-user.tsx
new file mode 100644
index 0000000..ff9bafc
--- /dev/null
+++ b/content/docs/primitives/composer/demos/ask-user.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import { AskUser } from "@intentface/chat/ask-user";
+import { useComposer } from "@intentface/chat/composer";
+
+// The parts are structural; the current question and selections come from the
+// composer's askUser slice.
+export const Prompt = () => {
+  const askUser = useComposer((composer) => composer.askUser);
+  const question = askUser.questions?.[askUser.step];
+
+  if (!question) return null;
+
+  const entry = askUser.answers.get(askUser.step);
+  const total = askUser.questions?.length ?? 0;
+
+  return (
+    <AskUser.Root className="flex flex-col gap-0.5 p-1">
+      <AskUser.Header className="flex h-[34px] items-center gap-2 pr-1 pl-2.5">
+        <AskUser.Label className="font-medium text-[13px] text-zinc-900 dark:text-zinc-100">
+          {question.question}
+        </AskUser.Label>
+        {!askUser.isSingle && total > 1 && (
+          <AskUser.Navigation className="ml-auto flex items-center gap-0.5 text-zinc-400 dark:text-zinc-500">
+            <AskUser.Previous
+              onClick={askUser.goBack}
+              disabled={askUser.step === 0}
+              aria-label="Previous question"
+              className={STEP_BUTTON_CLASS}
+            >
+              ‹
+            </AskUser.Previous>
+            <AskUser.StepLabel className="text-xs tabular-nums">
+              {({ current, total: count }) => `${current} of ${count}`}
+            </AskUser.StepLabel>
+            <AskUser.Next
+              onClick={askUser.goNext}
+              disabled={askUser.step === total - 1}
+              aria-label="Next question"
+              className={STEP_BUTTON_CLASS}
+            >
+              ›
+            </AskUser.Next>
+          </AskUser.Navigation>
+        )}
+      </AskUser.Header>
+      {question.options && (
+        <AskUser.Options
+          ref={askUser.optionsRef}
+          multiSelect={Boolean(question.multiSelect)}
+          groupName={`question-${askUser.step}`}
+          className="flex flex-col"
+        >
+          {question.options.map((option) => {
+            const selected = Boolean(entry?.selected.has(option.label));
+            return (
+              <AskUser.Option
+                key={option.label}
+                value={option.label}
+                selected={selected}
+                onSelect={() => askUser.toggleOption(option.label)}
+                className="flex cursor-pointer items-start gap-2.5 rounded-lg px-2.5 py-2 outline-none transition-colors data-highlighted:bg-zinc-950/5 dark:data-highlighted:bg-white/8"
+              >
+                {/* Decorative: the Option itself carries the radio/checkbox role. */}
+                <span
+                  aria-hidden="true"
+                  className={`mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-[5px] text-[10px] ${
+                    selected
+                      ? "bg-[#0169cc] bg-linear-to-b from-[oklch(57.2%_0.166_253.2)] to-[oklch(52.9%_0.173_255)] text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.28),0_0_0_1px_oklch(46.5%_0.146_254.8),0_1px_2px_rgb(1_105_204/0.35)]"
+                      : "bg-white bg-linear-to-b from-white to-[#fdfdfd] shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)] dark:bg-[#2d2d30] dark:from-[#313134] dark:to-[#2a2a2d] dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]"
+                  }`}
+                >
+                  {selected ? "✓" : ""}
+                </span>
+                <AskUser.OptionContent className="flex flex-col gap-0.5">
+                  <AskUser.OptionLabel className="font-medium text-[13px] text-zinc-900 leading-5 dark:text-zinc-100">
+                    {option.label}
+                  </AskUser.OptionLabel>
+                  {option.description && (
+                    <AskUser.OptionDescription className="text-xs text-zinc-500 dark:text-zinc-400">
+                      {option.description}
+                    </AskUser.OptionDescription>
+                  )}
+                </AskUser.OptionContent>
+              </AskUser.Option>
+            );
+          })}
+        </AskUser.Options>
+      )}
+    </AskUser.Root>
+  );
+};
+
+// Dismiss is a plain button you wire up; Continue is type=submit, so the
+// enclosing Composer.Root form drives it.
+export const Controls = () => {
+  const askUser = useComposer((composer) => composer.askUser);
+
+  return (
+    <>
+      <AskUser.Dismiss
+        onClick={askUser.dismissStep}
+        className="h-7 cursor-pointer rounded-full px-3 font-medium text-[13px] text-zinc-500 transition-colors hover:bg-zinc-950/5 hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2 dark:text-zinc-400 dark:hover:bg-white/8 dark:hover:text-zinc-100"
+      >
+        Skip
+      </AskUser.Dismiss>
+      <AskUser.Continue className="h-7 cursor-pointer rounded-full bg-[#0169cc] bg-linear-to-b from-[oklch(57.2%_0.166_253.2)] to-[oklch(52.9%_0.173_255)] shadow-[inset_0_1px_0_rgb(255_255_255/0.28),0_0_0_1px_oklch(46.5%_0.146_254.8),0_1px_2px_rgb(1_105_204/0.35)] px-3 font-medium text-[13px] text-white transition-opacity focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2 disabled:cursor-default disabled:opacity-40">
+        {askUser.isLastStep ? "Done" : "Continue"}
+      </AskUser.Continue>
+    </>
+  );
+};
+
+const STEP_BUTTON_CLASS =
+  "flex size-6 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-zinc-950/5 hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-30 dark:hover:bg-white/8 dark:hover:text-zinc-100";
diff --git a/content/docs/primitives/composer/demos/attachments.tsx b/content/docs/primitives/composer/demos/attachments.tsx
index 3fe732c..970d3fd 100644
--- a/content/docs/primitives/composer/demos/attachments.tsx
+++ b/content/docs/primitives/composer/demos/attachments.tsx
@@ -2,7 +2,7 @@
 
 import { Attachments } from "@intentface/chat/attachments";
 import { Composer, type ComposerSubmitData, useComposer } from "@intentface/chat/composer";
-import type { ComponentProps } from "react";
+import { ArrowUp, Paperclip, X } from "@keyline-icons/react";
 
 // Composer.Attachments carries the policy and the hidden file input; the strip
 // itself is yours. Files can be picked with the trigger or dropped on the composer.
@@ -17,25 +17,25 @@ export const AttachmentsDemo = () => {
     // Reserve height so the strip appearing grows the composer upward.
     <div className="flex min-h-[220px] w-full max-w-xl flex-col justify-end">
       <Composer.Root onSubmit={handleSubmit} className="flex flex-col">
-        <Composer.Container className="cursor-text rounded-2xl border border-[#f0f0f0] bg-white shadow-xs transition-colors focus-within:border-[#ececec] dark:border-[#262626] dark:bg-[#181818] dark:focus-within:border-[#2d2d2d]">
+        <Composer.Container className="cursor-text rounded-xl bg-white p-1 shadow-[0_0_0_1px_rgb(0_0_0/0.08),0_1px_2px_-1px_rgb(0_0_0/0.08),0_6px_16px_-6px_rgb(0_0_0/0.1)] dark:bg-zinc-800 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.06),inset_0_0_0_1px_rgb(255_255_255/0.07),0_0_0_1px_rgb(0_0_0/0.2),0_1px_2px_rgb(0_0_0/0.12),0_6px_16px_-6px_rgb(0_0_0/0.22)]">
           <Composer.Attachments accept="image/*,application/pdf" maxFiles={4}>
             <Strip />
           </Composer.Attachments>
-          <Composer.Textarea className="max-h-32 min-h-8 overflow-y-auto px-4 pt-3 text-sm **:data-composer-editor:w-full **:data-composer-editor:max-w-none **:data-composer-editor:leading-[1.7] [&_[data-composer-editor]:focus]:outline-none">
+          <Composer.Textarea className="max-h-32 min-h-12 overflow-y-auto px-2.5 pt-2.5 text-sm text-zinc-900 dark:text-zinc-100 **:data-composer-editor:w-full **:data-composer-editor:max-w-none **:data-composer-editor:leading-6 [&_[data-composer-editor]:focus]:outline-none">
             <Composer.Placeholder
               placeholder="Attach a file, or drag one in…"
-              className="leading-[1.7] text-[#949494] dark:text-[#6f6f6f]"
+              className="text-zinc-400 leading-6 dark:text-zinc-500"
             />
           </Composer.Textarea>
-          <Composer.Actions className="flex items-center justify-end gap-1 p-2">
+          <Composer.Actions className="flex h-12 items-center justify-between px-2.5">
             <Composer.AttachmentTrigger
               aria-label="Attach a file"
-              className="flex size-8 cursor-pointer items-center justify-center rounded-full text-[#949494] transition-colors hover:bg-[#f4f4f4] hover:text-[#1a1a1a] dark:text-[#6f6f6f] dark:hover:bg-[#232323] dark:hover:text-[#fcfcfc]"
+              className="flex size-7 cursor-pointer items-center justify-center rounded-full bg-white bg-linear-to-b from-white to-[#fdfdfd] text-zinc-700 shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)] transition-colors hover:from-[#fafafa] hover:to-[#f6f6f6] hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2 dark:bg-[#2d2d30] dark:from-[#313134] dark:to-[#2a2a2d] dark:text-zinc-300 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:hover:from-[#38383b] dark:hover:to-[#313134] dark:hover:text-zinc-100"
             >
-              <PaperclipIcon />
+              <Paperclip className="size-[15px]" />
             </Composer.AttachmentTrigger>
-            <Composer.Submit className="flex size-8 items-center justify-center rounded-full bg-[#1a1a1a] text-white transition-opacity disabled:opacity-40 dark:bg-[#fcfcfc] dark:text-[#111111]">
-              <SendIcon />
+            <Composer.Submit className="flex size-7 cursor-pointer items-center justify-center rounded-full bg-[#0169cc] bg-linear-to-b from-[oklch(57.2%_0.166_253.2)] to-[oklch(52.9%_0.173_255)] text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.28),0_0_0_1px_oklch(46.5%_0.146_254.8),0_1px_2px_rgb(1_105_204/0.35)] transition-opacity focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2 disabled:cursor-default disabled:opacity-40">
+              <ArrowUp className="size-[15px]" />
             </Composer.Submit>
           </Composer.Actions>
         </Composer.Container>
@@ -52,22 +52,24 @@ const Strip = () => {
   if (attachments.items.length === 0) return null;
 
   return (
-    <Attachments.Root className="flex flex-wrap gap-2 px-3 pt-3">
+    <Attachments.Root className="flex flex-wrap gap-1.5 px-2.5 pt-2.5">
       {attachments.items.map((item) => (
         <Attachments.Item
           key={item.id}
-          className="flex items-center gap-2 rounded-xl border border-[#f0f0f0] bg-[#fafafa] py-1.5 pr-1.5 pl-2.5 text-xs dark:border-[#262626] dark:bg-[#1f1f1f]"
+          className="flex h-6 items-center gap-1.5 rounded-[7px] bg-white bg-linear-to-b from-white to-[#fdfdfd] pr-1 pl-2 shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)] dark:bg-[#2d2d30] dark:from-[#313134] dark:to-[#2a2a2d] dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]"
         >
-          <span className="max-w-40 truncate">{item.filename ?? "file"}</span>
-          <span className="text-[#949494] dark:text-[#6f6f6f]">
+          <span className="max-w-40 truncate font-medium text-xs text-zinc-900 dark:text-zinc-100">
+            {item.filename ?? "file"}
+          </span>
+          <span className="font-mono text-[11px] text-zinc-400 dark:text-zinc-500">
             {formatFileSize(item.fileSize)}
           </span>
           <Attachments.Remove
             onRemove={() => attachments.remove(item.id)}
             filename={item.filename}
-            className="flex size-5 cursor-pointer items-center justify-center rounded-full text-[#949494] transition-colors hover:bg-[#ececec] hover:text-[#1a1a1a] dark:hover:bg-[#2d2d2d] dark:hover:text-[#fcfcfc]"
+            className="flex size-4 cursor-pointer items-center justify-center rounded-full text-zinc-400 transition-colors hover:bg-zinc-950/5 hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2 dark:text-zinc-500 dark:hover:bg-white/8 dark:hover:text-zinc-100"
           >
-            <CrossIcon />
+            <X className="size-[11px]" />
           </Attachments.Remove>
         </Attachments.Item>
       ))}
@@ -81,53 +83,3 @@ const formatFileSize = (bytes?: number) => {
   if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 };
-
-const PaperclipIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M13 7.5 8 12.5a3 3 0 0 1-4.5-4L9 3a2 2 0 0 1 3 3l-5.5 5.5a1 1 0 0 1-1.5-1.5L10 5" />
-  </svg>
-);
-
-const CrossIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    width="12"
-    height="12"
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="m4.5 4.5 7 7m-7 0 7-7" />
-  </svg>
-);
-
-const SendIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M8 13V3m0 0L3.5 7.5M8 3l4.5 4.5" />
-  </svg>
-);
diff --git a/content/docs/primitives/composer/demos/basic.tsx b/content/docs/primitives/composer/demos/basic.tsx
index a5571d0..1174e81 100644
--- a/content/docs/primitives/composer/demos/basic.tsx
+++ b/content/docs/primitives/composer/demos/basic.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Composer, type ComposerSubmitData } from "@intentface/chat/composer";
-import type { ComponentProps } from "react";
+import { ArrowUp } from "@keyline-icons/react";
 
 // Every <Composer.Root> owns an isolated store, so a bare composer needs no
 // setup beyond an onSubmit handler.
@@ -14,38 +14,21 @@ export const Basic = () => {
 
   return (
     <Composer.Root onSubmit={handleSubmit} className="flex w-full max-w-xl flex-col">
-      <Composer.Container className="cursor-text rounded-2xl border border-[#f0f0f0] bg-white shadow-xs transition-colors focus-within:border-[#ececec] dark:border-[#262626] dark:bg-[#181818] dark:focus-within:border-[#2d2d2d]">
+      <Composer.Container className="cursor-text rounded-xl bg-white p-1 shadow-[0_0_0_1px_rgb(0_0_0/0.08),0_1px_2px_-1px_rgb(0_0_0/0.08),0_6px_16px_-6px_rgb(0_0_0/0.1)] dark:bg-zinc-800 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.06),inset_0_0_0_1px_rgb(255_255_255/0.07),0_0_0_1px_rgb(0_0_0/0.2),0_1px_2px_rgb(0_0_0/0.12),0_6px_16px_-6px_rgb(0_0_0/0.22)]">
         {/* The editable element is engine-owned and out of JSX reach, so it is
             styled through the data-composer-editor variants. */}
-        <Composer.Textarea className="max-h-32 min-h-8 overflow-y-auto px-4 pt-3 text-sm **:data-composer-editor:w-full **:data-composer-editor:max-w-none **:data-composer-editor:leading-[1.7] [&_[data-composer-editor]:focus]:outline-none">
+        <Composer.Textarea className="max-h-32 min-h-12 overflow-y-auto px-2.5 pt-2.5 text-sm text-zinc-900 dark:text-zinc-100 **:data-composer-editor:w-full **:data-composer-editor:max-w-none **:data-composer-editor:leading-6 [&_[data-composer-editor]:focus]:outline-none">
           <Composer.Placeholder
             placeholder="Send a message…"
-            className="leading-[1.7] text-[#949494] dark:text-[#6f6f6f]"
+            className="text-zinc-400 leading-6 dark:text-zinc-500"
           />
         </Composer.Textarea>
-        <Composer.Actions className="flex justify-end gap-2 p-2">
-          <Composer.Submit className="flex size-8 items-center justify-center rounded-full bg-[#1a1a1a] text-white transition-opacity disabled:opacity-40 dark:bg-[#fcfcfc] dark:text-[#111111]">
-            <SendIcon />
+        <Composer.Actions className="flex h-12 items-center justify-end px-2.5">
+          <Composer.Submit className="flex size-7 cursor-pointer items-center justify-center rounded-full bg-[#0169cc] bg-linear-to-b from-[oklch(57.2%_0.166_253.2)] to-[oklch(52.9%_0.173_255)] text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.28),0_0_0_1px_oklch(46.5%_0.146_254.8),0_1px_2px_rgb(1_105_204/0.35)] transition-opacity focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2 disabled:cursor-default disabled:opacity-40">
+            <ArrowUp className="size-[15px]" />
           </Composer.Submit>
         </Composer.Actions>
       </Composer.Container>
     </Composer.Root>
   );
 };
-
-const SendIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M8 13V3m0 0L3.5 7.5M8 3l4.5 4.5" />
-  </svg>
-);
diff --git a/content/docs/primitives/composer/demos/commands.tsx b/content/docs/primitives/composer/demos/commands.tsx
index ac2ca46..af47379 100644
--- a/content/docs/primitives/composer/demos/commands.tsx
+++ b/content/docs/primitives/composer/demos/commands.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { type CommandItemData, Composer, type ComposerSubmitData } from "@intentface/chat/composer";
-import type { ComponentProps } from "react";
+import { ArrowUp } from "@keyline-icons/react";
 
 const MENTIONS: CommandItemData[] = [
   { value: "readme", label: "README.md", description: "Project overview" },
@@ -31,27 +31,27 @@ export const Commands = () => {
             composer upward; the default is a portaled overlay. */}
         <Composer.Panel
           anchor={false}
-          className="mb-2 overflow-hidden rounded-2xl border border-[#f0f0f0] bg-white dark:border-[#262626] dark:bg-[#181818]"
+          className="mb-2 overflow-hidden rounded-xl bg-white p-1 shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] dark:bg-zinc-800 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]"
         >
           {(composer) =>
             composer.commands.active ? (
               // data-empty and data-loading land on Command; the group gates
               // which child shows.
-              <Composer.Command prefix="@" className="group/list flex flex-col p-1">
-                <Composer.CommandEmpty className="hidden h-8 items-center rounded-[10px] px-3 text-sm text-[#949494] group-data-empty/list:flex dark:text-[#6f6f6f]">
+              <Composer.Command prefix="@" className="group/list flex flex-col">
+                <Composer.CommandEmpty className="hidden h-8 items-center rounded-lg px-2 text-[13px] text-zinc-400 group-data-empty/list:flex dark:text-zinc-500">
                   No files found.
                 </Composer.CommandEmpty>
                 <Composer.CommandList className="flex max-h-56 flex-col overflow-y-auto group-data-empty/list:hidden">
                   {(item) => (
                     <Composer.CommandItem
                       value={item.value}
-                      className="flex h-8 w-full cursor-pointer items-center gap-2.5 rounded-[10px] px-3 text-sm outline-none select-none data-highlighted:bg-[#f4f4f4] dark:data-highlighted:bg-[#232323]"
+                      className="flex h-8 w-full cursor-pointer select-none items-center gap-2.5 rounded-lg px-2 text-[13px] outline-none data-highlighted:bg-zinc-950/5 dark:data-highlighted:bg-white/8"
                     >
-                      <Composer.CommandItemLabel className="font-medium">
+                      <Composer.CommandItemLabel className="font-medium text-zinc-900 dark:text-zinc-100">
                         {item.label}
                       </Composer.CommandItemLabel>
                       {item.description && (
-                        <Composer.CommandItemDescription className="truncate text-xs text-[#949494] dark:text-[#6f6f6f]">
+                        <Composer.CommandItemDescription className="truncate text-xs text-zinc-400 dark:text-zinc-500">
                           {item.description}
                         </Composer.CommandItemDescription>
                       )}
@@ -62,16 +62,16 @@ export const Commands = () => {
             ) : null
           }
         </Composer.Panel>
-        <Composer.Container className="cursor-text rounded-2xl border border-[#f0f0f0] bg-white shadow-xs transition-colors focus-within:border-[#ececec] dark:border-[#262626] dark:bg-[#181818] dark:focus-within:border-[#2d2d2d]">
-          <Composer.Textarea className="max-h-32 min-h-8 overflow-y-auto px-4 pt-3 text-sm **:data-composer-editor:w-full **:data-composer-editor:max-w-none **:data-composer-editor:leading-[1.7] [&_[data-composer-editor]:focus]:outline-none **:data-command-badge:rounded-sm **:data-command-badge:bg-[#f4f4f4] **:data-command-badge:px-0.5 **:data-command-badge:dark:bg-[#232323] **:data-command-hint:text-[#949494]">
+        <Composer.Container className="cursor-text rounded-xl bg-white p-1 shadow-[0_0_0_1px_rgb(0_0_0/0.08),0_1px_2px_-1px_rgb(0_0_0/0.08),0_6px_16px_-6px_rgb(0_0_0/0.1)] dark:bg-zinc-800 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.06),inset_0_0_0_1px_rgb(255_255_255/0.07),0_0_0_1px_rgb(0_0_0/0.2),0_1px_2px_rgb(0_0_0/0.12),0_6px_16px_-6px_rgb(0_0_0/0.22)]">
+          <Composer.Textarea className="max-h-32 min-h-12 overflow-y-auto px-2.5 pt-2.5 text-sm text-zinc-900 dark:text-zinc-100 **:data-composer-editor:w-full **:data-composer-editor:max-w-none **:data-composer-editor:leading-6 [&_[data-composer-editor]:focus]:outline-none **:data-command-badge:rounded-sm **:data-command-badge:bg-[#0169cc]/10 **:data-command-badge:px-0.5 **:data-command-badge:text-[#0169cc] **:data-command-badge:dark:bg-[#4c9bea]/15 **:data-command-badge:dark:text-[#4c9bea] **:data-command-hint:text-zinc-400 **:data-command-hint:dark:text-zinc-500">
             <Composer.Placeholder
               placeholder="Type @ to mention a file…"
-              className="leading-[1.7] text-[#949494] dark:text-[#6f6f6f]"
+              className="text-zinc-400 leading-6 dark:text-zinc-500"
             />
           </Composer.Textarea>
-          <Composer.Actions className="flex justify-end gap-2 p-2">
-            <Composer.Submit className="flex size-8 items-center justify-center rounded-full bg-[#1a1a1a] text-white transition-opacity disabled:opacity-40 dark:bg-[#fcfcfc] dark:text-[#111111]">
-              <SendIcon />
+          <Composer.Actions className="flex h-12 items-center justify-end px-2.5">
+            <Composer.Submit className="flex size-7 cursor-pointer items-center justify-center rounded-full bg-[#0169cc] bg-linear-to-b from-[oklch(57.2%_0.166_253.2)] to-[oklch(52.9%_0.173_255)] text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.28),0_0_0_1px_oklch(46.5%_0.146_254.8),0_1px_2px_rgb(1_105_204/0.35)] transition-opacity focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2 disabled:cursor-default disabled:opacity-40">
+              <ArrowUp className="size-[15px]" />
             </Composer.Submit>
           </Composer.Actions>
         </Composer.Container>
@@ -79,20 +79,3 @@ export const Commands = () => {
     </div>
   );
 };
-
-const SendIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M8 13V3m0 0L3.5 7.5M8 3l4.5 4.5" />
-  </svg>
-);
diff --git a/content/docs/primitives/composer/demos/controlled.tsx b/content/docs/primitives/composer/demos/controlled.tsx
index 12c8acf..5c942db 100644
--- a/content/docs/primitives/composer/demos/controlled.tsx
+++ b/content/docs/primitives/composer/demos/controlled.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { Composer, type ComposerSubmitData } from "@intentface/chat/composer";
-import { type ComponentProps, useState } from "react";
+import { ArrowUp } from "@keyline-icons/react";
+import { useState } from "react";
 
 // The Textarea's plain-text value is controlled by the parent: the buttons
 // drive it, and typing reports back through onValueChange.
@@ -17,37 +18,33 @@ export const Controlled = () => {
   return (
     <div className="flex w-full max-w-xl flex-col items-center gap-3">
       <Composer.Root onSubmit={handleSubmit} className="flex w-full flex-col">
-        <Composer.Container className="cursor-text rounded-2xl border border-[#f0f0f0] bg-white shadow-xs transition-colors focus-within:border-[#ececec] dark:border-[#262626] dark:bg-[#181818] dark:focus-within:border-[#2d2d2d]">
+        <Composer.Container className="cursor-text rounded-xl bg-white p-1 shadow-[0_0_0_1px_rgb(0_0_0/0.08),0_1px_2px_-1px_rgb(0_0_0/0.08),0_6px_16px_-6px_rgb(0_0_0/0.1)] dark:bg-zinc-800 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.06),inset_0_0_0_1px_rgb(255_255_255/0.07),0_0_0_1px_rgb(0_0_0/0.2),0_1px_2px_rgb(0_0_0/0.12),0_6px_16px_-6px_rgb(0_0_0/0.22)]">
           <Composer.Textarea
             value={text}
             onValueChange={setText}
-            className="max-h-32 min-h-8 overflow-y-auto px-4 pt-3 text-sm **:data-composer-editor:w-full **:data-composer-editor:max-w-none **:data-composer-editor:leading-[1.7] [&_[data-composer-editor]:focus]:outline-none"
+            className="max-h-32 min-h-12 overflow-y-auto px-2.5 pt-2.5 text-sm text-zinc-900 dark:text-zinc-100 **:data-composer-editor:w-full **:data-composer-editor:max-w-none **:data-composer-editor:leading-6 [&_[data-composer-editor]:focus]:outline-none"
           >
             <Composer.Placeholder
               placeholder="Controlled by the parent…"
-              className="leading-[1.7] text-[#949494] dark:text-[#6f6f6f]"
+              className="text-zinc-400 leading-6 dark:text-zinc-500"
             />
           </Composer.Textarea>
-          <Composer.Actions className="flex justify-end gap-2 p-2">
-            <Composer.Submit className="flex size-8 items-center justify-center rounded-full bg-[#1a1a1a] text-white transition-opacity disabled:opacity-40 dark:bg-[#fcfcfc] dark:text-[#111111]">
-              <SendIcon />
+          <Composer.Actions className="flex h-12 items-center justify-end px-2.5">
+            <Composer.Submit className="flex size-7 cursor-pointer items-center justify-center rounded-full bg-[#0169cc] bg-linear-to-b from-[oklch(57.2%_0.166_253.2)] to-[oklch(52.9%_0.173_255)] text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.28),0_0_0_1px_oklch(46.5%_0.146_254.8),0_1px_2px_rgb(1_105_204/0.35)] transition-opacity focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2 disabled:cursor-default disabled:opacity-40">
+              <ArrowUp className="size-[15px]" />
             </Composer.Submit>
           </Composer.Actions>
         </Composer.Container>
       </Composer.Root>
-      <div className="flex items-center gap-2">
+      <div className="flex items-center justify-center gap-2">
         <button
           type="button"
           onClick={() => setText("Summarize this thread")}
-          className="cursor-pointer rounded-full border border-[#f0f0f0] bg-white px-4 py-1.5 text-sm font-medium text-[#686868] transition-colors hover:bg-[#fafafa] dark:border-[#262626] dark:bg-[#181818] dark:text-[#9b9b9b] dark:hover:bg-[#232323]"
+          className={BUTTON_CLASS}
         >
           Set prompt
         </button>
-        <button
-          type="button"
-          onClick={() => setText("")}
-          className="cursor-pointer rounded-full border border-[#f0f0f0] bg-white px-4 py-1.5 text-sm font-medium text-[#686868] transition-colors hover:bg-[#fafafa] dark:border-[#262626] dark:bg-[#181818] dark:text-[#9b9b9b] dark:hover:bg-[#232323]"
-        >
+        <button type="button" onClick={() => setText("")} className={BUTTON_CLASS}>
           Clear
         </button>
       </div>
@@ -55,19 +52,5 @@ export const Controlled = () => {
   );
 };
 
-const SendIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M8 13V3m0 0L3.5 7.5M8 3l4.5 4.5" />
-  </svg>
-);
+const BUTTON_CLASS =
+  "h-8 cursor-pointer rounded-full bg-white bg-linear-to-b from-white to-[#fdfdfd] px-3 font-medium text-[13px] text-zinc-900 shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)] transition-colors hover:from-[#fafafa] hover:to-[#f6f6f6] focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2 dark:bg-[#2d2d30] dark:from-[#313134] dark:to-[#2a2a2d] dark:text-zinc-100 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:hover:from-[#38383b] dark:hover:to-[#313134]";
diff --git a/content/docs/primitives/composer/demos/popover.tsx b/content/docs/primitives/composer/demos/popover.tsx
index 1dc6ac3..e1f34c8 100644
--- a/content/docs/primitives/composer/demos/popover.tsx
+++ b/content/docs/primitives/composer/demos/popover.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { type CommandItemData, Composer, type ComposerSubmitData } from "@intentface/chat/composer";
-import type { ComponentProps } from "react";
+import { ArrowUp } from "@keyline-icons/react";
 
 const MENTIONS: CommandItemData[] = [
   { value: "readme", label: "README.md", description: "Project overview" },
@@ -25,27 +25,28 @@ export const Popover = () => {
       className="flex w-full max-w-xl flex-col"
     >
       {/* Positioning sets --anchor-width and --anchor-available-height; the
-          width and max-height are yours to derive from them. */}
-      <Composer.Popover className="absolute z-50 w-72 overflow-hidden rounded-2xl border border-[#f0f0f0] bg-white shadow-lg dark:border-[#262626] dark:bg-[#181818]">
+          width and max-height are yours to derive from them. It stays mounted, so
+          data-closed hides it; it rises in from @starting-style on open. */}
+      <Composer.Popover className="absolute z-50 w-72 overflow-hidden rounded-xl bg-white p-1 transition-[opacity,translate] duration-150 ease-out starting:translate-y-1.5 starting:opacity-0 data-closed:hidden shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_12px_32px_-8px_rgb(0_0_0/0.16)] dark:bg-zinc-800 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.06),inset_0_0_0_1px_rgb(255_255_255/0.07),0_0_0_1px_rgb(0_0_0/0.16),0_12px_32px_-8px_rgb(0_0_0/0.4)]">
         {(composer) =>
           composer.commands.active ? (
             // data-empty and data-loading land on Command; the group gates
             // which child shows.
-            <Composer.Command prefix="@" className="group/list flex flex-col p-1">
-              <Composer.CommandEmpty className="hidden h-8 items-center rounded-[10px] px-3 text-sm text-[#949494] group-data-empty/list:flex dark:text-[#6f6f6f]">
+            <Composer.Command prefix="@" className="group/list flex flex-col">
+              <Composer.CommandEmpty className="hidden h-8 items-center rounded-lg px-2 text-[13px] text-zinc-400 group-data-empty/list:flex dark:text-zinc-500">
                 No files found.
               </Composer.CommandEmpty>
               <Composer.CommandList className="flex max-h-56 flex-col overflow-y-auto group-data-empty/list:hidden">
                 {(item) => (
                   <Composer.CommandItem
                     value={item.value}
-                    className="flex h-8 w-full cursor-pointer items-center gap-2.5 rounded-[10px] px-3 text-sm outline-none select-none data-highlighted:bg-[#f4f4f4] dark:data-highlighted:bg-[#232323]"
+                    className="flex h-8 w-full cursor-pointer select-none items-center gap-2.5 rounded-lg px-2 text-[13px] outline-none data-highlighted:bg-zinc-950/5 dark:data-highlighted:bg-white/8"
                   >
-                    <Composer.CommandItemLabel className="font-medium">
+                    <Composer.CommandItemLabel className="font-medium text-zinc-900 dark:text-zinc-100">
                       {item.label}
                     </Composer.CommandItemLabel>
                     {item.description && (
-                      <Composer.CommandItemDescription className="truncate text-xs text-[#949494] dark:text-[#6f6f6f]">
+                      <Composer.CommandItemDescription className="truncate text-xs text-zinc-400 dark:text-zinc-500">
                         {item.description}
                       </Composer.CommandItemDescription>
                     )}
@@ -56,36 +57,19 @@ export const Popover = () => {
           ) : null
         }
       </Composer.Popover>
-      <Composer.Container className="cursor-text rounded-2xl border border-[#f0f0f0] bg-white shadow-xs transition-colors focus-within:border-[#ececec] dark:border-[#262626] dark:bg-[#181818] dark:focus-within:border-[#2d2d2d]">
-        <Composer.Textarea className="max-h-32 min-h-8 overflow-y-auto px-4 pt-3 text-sm **:data-composer-editor:w-full **:data-composer-editor:max-w-none **:data-composer-editor:leading-[1.7] [&_[data-composer-editor]:focus]:outline-none **:data-command-badge:rounded-sm **:data-command-badge:bg-[#f4f4f4] **:data-command-badge:px-0.5 **:data-command-badge:dark:bg-[#232323] **:data-command-hint:text-[#949494]">
+      <Composer.Container className="cursor-text rounded-xl bg-white p-1 shadow-[0_0_0_1px_rgb(0_0_0/0.08),0_1px_2px_-1px_rgb(0_0_0/0.08),0_6px_16px_-6px_rgb(0_0_0/0.1)] dark:bg-zinc-800 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.06),inset_0_0_0_1px_rgb(255_255_255/0.07),0_0_0_1px_rgb(0_0_0/0.2),0_1px_2px_rgb(0_0_0/0.12),0_6px_16px_-6px_rgb(0_0_0/0.22)]">
+        <Composer.Textarea className="max-h-32 min-h-12 overflow-y-auto px-2.5 pt-2.5 text-sm text-zinc-900 dark:text-zinc-100 **:data-composer-editor:w-full **:data-composer-editor:max-w-none **:data-composer-editor:leading-6 [&_[data-composer-editor]:focus]:outline-none **:data-command-badge:rounded-sm **:data-command-badge:bg-[#0169cc]/10 **:data-command-badge:px-0.5 **:data-command-badge:text-[#0169cc] **:data-command-badge:dark:bg-[#4c9bea]/15 **:data-command-badge:dark:text-[#4c9bea] **:data-command-hint:text-zinc-400 **:data-command-hint:dark:text-zinc-500">
           <Composer.Placeholder
             placeholder="Type @ to mention a file…"
-            className="leading-[1.7] text-[#949494] dark:text-[#6f6f6f]"
+            className="text-zinc-400 leading-6 dark:text-zinc-500"
           />
         </Composer.Textarea>
-        <Composer.Actions className="flex justify-end gap-2 p-2">
-          <Composer.Submit className="flex size-8 items-center justify-center rounded-full bg-[#1a1a1a] text-white transition-opacity disabled:opacity-40 dark:bg-[#fcfcfc] dark:text-[#111111]">
-            <SendIcon />
+        <Composer.Actions className="flex h-12 items-center justify-end px-2.5">
+          <Composer.Submit className="flex size-7 cursor-pointer items-center justify-center rounded-full bg-[#0169cc] bg-linear-to-b from-[oklch(57.2%_0.166_253.2)] to-[oklch(52.9%_0.173_255)] text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.28),0_0_0_1px_oklch(46.5%_0.146_254.8),0_1px_2px_rgb(1_105_204/0.35)] transition-opacity focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2 disabled:cursor-default disabled:opacity-40">
+            <ArrowUp className="size-[15px]" />
           </Composer.Submit>
         </Composer.Actions>
       </Composer.Container>
     </Composer.Root>
   );
 };
-
-const SendIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M8 13V3m0 0L3.5 7.5M8 3l4.5 4.5" />
-  </svg>
-);
diff --git a/content/docs/primitives/composer/demos/store.tsx b/content/docs/primitives/composer/demos/store.tsx
index dff3e5e..10d65be 100644
--- a/content/docs/primitives/composer/demos/store.tsx
+++ b/content/docs/primitives/composer/demos/store.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Composer, type ComposerSubmitData } from "@intentface/chat/composer";
-import type { ComponentProps } from "react";
+import { ArrowUp } from "@keyline-icons/react";
 
 // A store handle created outside the tree. The button drives the composer
 // through store.controller — no context, no hook, no ref threading.
@@ -17,16 +17,16 @@ export const Store = () => {
   return (
     <div className="flex w-full max-w-xl flex-col items-center gap-3">
       <Composer.Root store={store} onSubmit={handleSubmit} className="flex w-full flex-col">
-        <Composer.Container className="cursor-text rounded-2xl border border-[#f0f0f0] bg-white shadow-xs transition-colors focus-within:border-[#ececec] dark:border-[#262626] dark:bg-[#181818] dark:focus-within:border-[#2d2d2d]">
-          <Composer.Textarea className="max-h-32 min-h-8 overflow-y-auto px-4 pt-3 text-sm **:data-composer-editor:w-full **:data-composer-editor:max-w-none **:data-composer-editor:leading-[1.7] [&_[data-composer-editor]:focus]:outline-none">
+        <Composer.Container className="cursor-text rounded-xl bg-white p-1 shadow-[0_0_0_1px_rgb(0_0_0/0.08),0_1px_2px_-1px_rgb(0_0_0/0.08),0_6px_16px_-6px_rgb(0_0_0/0.1)] dark:bg-zinc-800 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.06),inset_0_0_0_1px_rgb(255_255_255/0.07),0_0_0_1px_rgb(0_0_0/0.2),0_1px_2px_rgb(0_0_0/0.12),0_6px_16px_-6px_rgb(0_0_0/0.22)]">
+          <Composer.Textarea className="max-h-32 min-h-12 overflow-y-auto px-2.5 pt-2.5 text-sm text-zinc-900 dark:text-zinc-100 **:data-composer-editor:w-full **:data-composer-editor:max-w-none **:data-composer-editor:leading-6 [&_[data-composer-editor]:focus]:outline-none">
             <Composer.Placeholder
               placeholder="Driven by an external store handle…"
-              className="leading-[1.7] text-[#949494] dark:text-[#6f6f6f]"
+              className="text-zinc-400 leading-6 dark:text-zinc-500"
             />
           </Composer.Textarea>
-          <Composer.Actions className="flex justify-end gap-2 p-2">
-            <Composer.Submit className="flex size-8 items-center justify-center rounded-full bg-[#1a1a1a] text-white transition-opacity disabled:opacity-40 dark:bg-[#fcfcfc] dark:text-[#111111]">
-              <SendIcon />
+          <Composer.Actions className="flex h-12 items-center justify-end px-2.5">
+            <Composer.Submit className="flex size-7 cursor-pointer items-center justify-center rounded-full bg-[#0169cc] bg-linear-to-b from-[oklch(57.2%_0.166_253.2)] to-[oklch(52.9%_0.173_255)] text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.28),0_0_0_1px_oklch(46.5%_0.146_254.8),0_1px_2px_rgb(1_105_204/0.35)] transition-opacity focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2 disabled:cursor-default disabled:opacity-40">
+              <ArrowUp className="size-[15px]" />
             </Composer.Submit>
           </Composer.Actions>
         </Composer.Container>
@@ -34,27 +34,10 @@ export const Store = () => {
       <button
         type="button"
         onClick={() => store.controller.insertText("@channel ")}
-        className="cursor-pointer rounded-full border border-[#f0f0f0] bg-white px-4 py-1.5 text-sm font-medium text-[#686868] transition-colors hover:bg-[#fafafa] dark:border-[#262626] dark:bg-[#181818] dark:text-[#9b9b9b] dark:hover:bg-[#232323]"
+        className="h-8 cursor-pointer rounded-full bg-white bg-linear-to-b from-white to-[#fdfdfd] px-3 font-medium text-[13px] text-zinc-900 shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)] transition-colors hover:from-[#fafafa] hover:to-[#f6f6f6] focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2 dark:bg-[#2d2d30] dark:from-[#313134] dark:to-[#2a2a2d] dark:text-zinc-100 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:hover:from-[#38383b] dark:hover:to-[#313134]"
       >
         Insert from outside
       </button>
     </div>
   );
 };
-
-const SendIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M8 13V3m0 0L3.5 7.5M8 3l4.5 4.5" />
-  </svg>
-);
diff --git a/content/docs/primitives/message.mdx b/content/docs/primitives/message.mdx
index d1bbc7a..2accd09 100644
--- a/content/docs/primitives/message.mdx
+++ b/content/docs/primitives/message.mdx
@@ -5,6 +5,8 @@ source: message
 ---
 
 import { Basic } from './message/demos/basic';
+import { Chips } from './message/demos/chips';
+import { Selection } from './message/demos/selection';
 
 <Demo component={<Basic />} file="primitives/message/demos/basic.tsx" />
 
@@ -13,6 +15,7 @@ import { Basic } from './message/demos/basic';
 - **One turn's container** — `Message.Root` reports the role and position as data attributes and renders no layout of its own.
 - **Segmented text** — `Message.Text` reconstructs inline chips from the wire format and takes render callbacks for both runs and chips.
 - **Everything else is yours** — bubbles, avatars, copy buttons, source pills, attachment previews and markdown rendering are composed by you around these parts.
+- **Memoise your row, not ours** — see [Why the memo boundary is yours](#why-the-memo-boundary-is-yours). Getting this wrong re-renders every message on every stream chunk.
 - **Get started** — see [Quick start](/quick-start) to add the package.
 
 ## Anatomy
@@ -42,7 +45,27 @@ attributes:
 </Message.Root>
 ```
 
-## Performance
+## Examples
+
+### Reconstructing chips from the text
+
+The wire format is a markdown-shaped link, `[Label](chip:prefix:value)`, with
+everything the chip needs inside the token. A stored message therefore rebuilds
+its own chips from its text alone, with no sidecar metadata to keep in sync.
+`renderChip` decides what one looks like at render time.
+
+<Demo component={<Chips />} file="primitives/message/demos/chips.tsx" />
+
+### Acting on a text selection
+
+Selection is a hook rather than a part, so the toolbar it drives stays yours.
+`useMessageSelection` takes the element to scope to and reports the settled
+selection inside it. Scoping is the point: a drag across two messages, or
+anywhere else on the page, reports nothing.
+
+<Demo component={<Selection />} file="primitives/message/demos/selection.tsx" />
+
+## Why the memo boundary is yours
 
 Message is compositional — you pass its parts as children — which means the
 package cannot memoize rows for you: a parent re-render re-creates the children
@@ -81,20 +104,6 @@ Three rules keep the memo effective while a reply streams:
 Done right, a stream chunk re-renders exactly one row. See
 [Composer performance](/primitives/composer#performance) for the full render model.
 
-## Accessibility
-
-- **Role** drives `data-role`, and error/last state drive `data-error`/`data-last`
-  on the root, so styling and assistive context stay in sync.
-- **Speaker identity is yours to announce.** `role` is an opaque string the
-  package only surfaces as `data-role` — alignment and colour are invisible to
-  assistive tech. Give each message a visually-hidden `{role} said` prefix, or
-  an `aria-label` on the root, so a transcript read top-to-bottom attributes
-  its turns.
-- **Error, stopped and loading markers** are your markup: give an inline failure
-  marker `role="alert"` so it announces immediately, and quieter states
-  ("stopped", "generating…") `role="status"`.
-- **Actions** you add should be real buttons with accessible names.
-
 ## API reference
 
 All three parts accept `className`, `style`, and `render`
@@ -102,7 +111,9 @@ All three parts accept `className`, `style`, and `render`
 
 ### Message.Root
 
-The container. Renders `data-message`.
+One turn's container. Reports the role and position as data attributes and
+renders no layout of its own, so the bubble, avatar and actions around it stay
+yours. Renders a `<div>` element.
 
 export const rootProps = [
   { name: "role", type: "string", default: "(required)", description: "Opaque role string surfaced as data-role; you own the set (commonly system / user / assistant)." },
@@ -123,13 +134,14 @@ export const rootAttrs = [
 
 ### Message.Turn
 
-Groups consecutive messages from one role into a single visual turn. Renders
-`data-message-turn` and takes no props of its own beyond the shared ones.
+Groups consecutive messages from one role into a single visual turn. Renders a
+`<div>` element, and takes no props of its own beyond the shared ones.
 
 ### Message.Text
 
-Plain text with inline chips reconstructed from the wire format. Renders
-`data-message-text`.
+Message text with inline chips reconstructed from the wire format, so a stored
+message rebuilds its own chips with no sidecar metadata. Renders a `<span>`
+element.
 
 export const textProps = [
   { name: "children", type: "string", default: "(required)", description: "The message text; chip tokens are parsed out and rendered." },
diff --git a/content/docs/primitives/message/demos/basic.tsx b/content/docs/primitives/message/demos/basic.tsx
index 9c499fc..09821bc 100644
--- a/content/docs/primitives/message/demos/basic.tsx
+++ b/content/docs/primitives/message/demos/basic.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { Message } from "@intentface/chat/message";
-import { type ComponentProps, useState } from "react";
+import { Check, Copy } from "@keyline-icons/react";
+import { useState } from "react";
 
 // Message.Root stamps data-role / data-last / data-error and imposes no layout;
 // the bubble, alignment, and actions are all yours.
@@ -15,16 +16,16 @@ const MESSAGES = [
 ];
 
 export const Basic = () => (
-  <div className="flex w-full max-w-xl flex-col gap-4">
+  <div className="flex w-full max-w-xl flex-col gap-5">
     {MESSAGES.map((message, index) => (
       <Message.Root
         key={message.id}
         role={message.role}
         isLast={index === MESSAGES.length - 1}
-        className="group flex w-full flex-col gap-1 data-[role=user]:items-end"
+        className="group flex w-full flex-col gap-1.5 data-[role=user]:items-end"
       >
         {/* data-role sits on Root, so the bubble reads it through the group. */}
-        <Message.Text className="text-sm leading-[1.7] text-[#1a1a1a] group-data-[role=user]:min-h-9 group-data-[role=user]:max-w-[80%] group-data-[role=user]:rounded-2xl group-data-[role=user]:border group-data-[role=user]:border-[#f0f0f0] group-data-[role=user]:bg-white group-data-[role=user]:px-3 group-data-[role=user]:py-1.5 group-data-[role=user]:shadow-xs dark:text-[#fcfcfc] dark:group-data-[role=user]:border-[#262626] dark:group-data-[role=user]:bg-[#181818]">
+        <Message.Text className="text-sm text-zinc-700 leading-6 group-data-[role=user]:max-w-[80%] group-data-[role=user]:rounded-[20px] group-data-[role=user]:bg-white group-data-[role=user]:px-3.5 group-data-[role=user]:py-1.5 group-data-[role=user]:text-zinc-900 group-data-[role=user]:leading-6 group-data-[role=user]:shadow-[0_0_0_1px_rgb(0_0_0/0.08),0_1px_2px_rgb(0_0_0/0.04)] dark:text-zinc-300 dark:group-data-[role=user]:bg-zinc-800 dark:group-data-[role=user]:text-zinc-100 dark:group-data-[role=user]:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16)]">
           {message.text}
         </Message.Text>
         {message.role === "assistant" && <CopyButton value={message.text} />}
@@ -47,43 +48,9 @@ const CopyButton = ({ value }: { value: string }) => {
       type="button"
       onClick={handleCopy}
       aria-label="Copy message"
-      className="flex size-7 cursor-pointer items-center justify-center rounded-md text-[#949494] transition-colors hover:bg-[#f4f4f4] hover:text-[#1a1a1a] dark:text-[#6f6f6f] dark:hover:bg-[#232323] dark:hover:text-[#fcfcfc]"
+      className="-ml-1.5 flex size-7 cursor-pointer items-center justify-center rounded-full text-zinc-400 transition-colors hover:bg-zinc-950/5 hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 dark:text-zinc-500 dark:hover:bg-white/8 dark:hover:text-zinc-100"
     >
-      {copied ? <CheckIcon /> : <CopyIcon />}
+      {copied ? <Check className="size-[15px]" /> : <Copy className="size-[15px]" />}
     </button>
   );
 };
-
-const CopyIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    width="14"
-    height="14"
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <rect x="5.5" y="5.5" width="8" height="8" rx="1.5" />
-    <path d="M10.5 3.5v-.5a1.5 1.5 0 0 0-1.5-1.5H3a1.5 1.5 0 0 0-1.5 1.5v6A1.5 1.5 0 0 0 3 10.5h.5" />
-  </svg>
-);
-
-const CheckIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    width="14"
-    height="14"
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="m2.5 8.5 4 4 7-9" />
-  </svg>
-);
diff --git a/content/docs/primitives/message/demos/chips.tsx b/content/docs/primitives/message/demos/chips.tsx
new file mode 100644
index 0000000..031761a
--- /dev/null
+++ b/content/docs/primitives/message/demos/chips.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import { Chip } from "@intentface/chat/chip";
+import { Message, type MessageChipSegment } from "@intentface/chat/message";
+import { File, FileText, Wrench } from "@keyline-icons/react";
+
+/*
+ * A message whose text carries inline chip references, and the renderers that
+ * turn them back into chips.
+ *
+ * The wire format is a markdown-shaped link: `[Label](chip:prefix:value)`, with
+ * everything the chip needs riding along inside the token. That is the point —
+ * a stored message reconstructs its own chips from its text alone, with no
+ * sidecar array of metadata to keep in sync or migrate.
+ *
+ * `Message.Text` parses the tokens and calls `renderChip` for each one. What a
+ * chip looks like, and whether a prefix earns a different variant, is decided
+ * here at render time rather than baked into the stored text.
+ */
+const TEXT =
+  "I compared [pricing.tsx](chip:file:src/app/pricing.tsx) against " +
+  "[the Q3 brief](chip:doc:q3-brief) and pulled figures from " +
+  "[web-search](chip:tool:web-search). The deprecated rate in " +
+  "[legacy.ts](chip:file:src/legacy.ts) is the only mismatch.";
+
+export const Chips = () => (
+  <div className="w-full max-w-xl">
+    {/* biome-ignore lint/a11y/useValidAriaRole: `role` is the message's author, not an ARIA role */}
+    <Message.Root role="assistant">
+      <Message.Text
+        renderChip={renderChip}
+        className="text-sm text-zinc-700 leading-8 dark:text-zinc-300"
+      >
+        {TEXT}
+      </Message.Text>
+    </Message.Root>
+  </div>
+);
+
+/** The prefix decides the variant and the icon; neither is stored in the text. */
+const renderChip = (chip: MessageChipSegment, index: number) => (
+  <Chip.Root
+    key={`${chip.prefix}-${chip.value}-${index}`}
+    variant={chip.prefix === "tool" ? "accent" : "primary"}
+    className="mx-0.5 inline-flex h-6 items-center gap-1 rounded-full bg-white bg-linear-to-b from-white to-[#fdfdfd] px-2 align-middle font-medium text-xs text-zinc-900 shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)] data-[variant=accent]:bg-[#0169cc]/10 data-[variant=accent]:bg-none data-[variant=accent]:text-[#0169cc] data-[variant=accent]:shadow-none dark:bg-[#2d2d30] dark:from-[#313134] dark:to-[#2a2a2d] dark:text-zinc-100 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:data-[variant=accent]:bg-[#4c9bea]/15 dark:data-[variant=accent]:text-[#4c9bea] dark:data-[variant=accent]:shadow-none"
+  >
+    <Chip.Icon className="flex items-center">
+      {chip.prefix === "file" ? (
+        <File className="size-3.5" />
+      ) : chip.prefix === "doc" ? (
+        <FileText className="size-3.5" />
+      ) : (
+        <Wrench className="size-3.5" />
+      )}
+    </Chip.Icon>
+    <Chip.Label>{chip.label}</Chip.Label>
+  </Chip.Root>
+);
diff --git a/content/docs/primitives/message/demos/selection.tsx b/content/docs/primitives/message/demos/selection.tsx
new file mode 100644
index 0000000..d2591dc
--- /dev/null
+++ b/content/docs/primitives/message/demos/selection.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import { Message, useMessageSelection } from "@intentface/chat/message";
+import { useState } from "react";
+
+/*
+ * Selection is exposed as a hook rather than a part, so the toolbar it drives
+ * stays entirely yours — this one is a small bar, but a popover anchored to the
+ * range would read the same value.
+ *
+ * `useMessageSelection` takes the element to scope to and returns the settled
+ * selection inside it, or null. Scoping is the whole point: dragging across two
+ * messages, or selecting in the page around them, reports nothing here.
+ */
+export const Selection = () => {
+  const [scope, setScope] = useState<HTMLElement | null>(null);
+  const selection = useMessageSelection(scope);
+  const [quoted, setQuoted] = useState<string | null>(null);
+
+  return (
+    <div className="flex w-full max-w-xl flex-col gap-3">
+      {/* biome-ignore lint/a11y/useValidAriaRole: `role` is the message's author, not an ARIA role */}
+      <Message.Root
+        role="assistant"
+        ref={setScope}
+        className="rounded-xl bg-white px-4 py-3.5 shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] dark:bg-zinc-800 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]"
+      >
+        <Message.Text className="text-sm text-zinc-700 leading-6 dark:text-zinc-300">
+          useMemo caches a computed value and useCallback caches a function reference. Reach for
+          either only when something downstream is memoised, because the comparison itself is not
+          free. Select any of this sentence.
+        </Message.Text>
+      </Message.Root>
+
+      {/* Rendered outside the message, and still scoped to it. */}
+      <div className="flex min-h-8 items-center justify-center gap-2">
+        {selection ? (
+          <>
+            <span className="max-w-64 truncate text-xs text-zinc-400 dark:text-zinc-500">
+              “{selection.text}”
+            </span>
+            <button
+              type="button"
+              onClick={() => setQuoted(selection.text)}
+              className="h-8 shrink-0 cursor-pointer rounded-full bg-white bg-linear-to-b from-white to-[#fdfdfd] px-3.5 font-medium text-[13px] text-zinc-900 shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)] hover:from-[#fafafa] hover:to-[#f6f6f6] focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2 dark:bg-[#2d2d30] dark:from-[#313134] dark:to-[#2a2a2d] dark:text-zinc-100 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:hover:from-[#38383b] dark:hover:to-[#313134]"
+            >
+              Quote
+            </button>
+          </>
+        ) : (
+          <span className="text-xs text-zinc-400 dark:text-zinc-500">
+            Nothing selected in this message.
+          </span>
+        )}
+      </div>
+
+      {quoted && (
+        <blockquote className="border-zinc-950/10 border-l-2 pl-3 text-sm text-zinc-500 italic leading-6 dark:border-white/10 dark:text-zinc-400">
+          {quoted}
+        </blockquote>
+      )}
+    </div>
+  );
+};
diff --git a/content/docs/primitives/nav.mdx b/content/docs/primitives/nav.mdx
index 213bebd..75933a8 100644
--- a/content/docs/primitives/nav.mdx
+++ b/content/docs/primitives/nav.mdx
@@ -260,7 +260,7 @@ These are the widget's own keys, not global ones: the handler sits on
 `Nav.Root`, so nothing fires unless focus is already inside the tree.
 
 export const keys = [
-  { keys: "Arrow up / down", description: "Move focus to the previous or next visible row. Collapsed lists are unmounted, so their rows are simply not there to land on." },
+  { keys: "Arrow up / down", description: "Move focus to the previous or next visible row. Collapsed lists are unmounted, so their rows are not there to land on." },
   { keys: "Arrow right", description: "On a closed group, open it; on an open one, step into it. On a leaf, nothing." },
   { keys: "Arrow left", description: "On an open group, close it; otherwise step out to the parent group's trigger — which is where the row came from." },
   { keys: "Enter / Space", description: "Activate the focused row: toggle a group, or go to its page when the trigger holds a Nav.Toggle." },
diff --git a/content/docs/primitives/nav/demos/basic.tsx b/content/docs/primitives/nav/demos/basic.tsx
index e93a9ab..a28a07c 100644
--- a/content/docs/primitives/nav/demos/basic.tsx
+++ b/content/docs/primitives/nav/demos/basic.tsx
@@ -1,7 +1,9 @@
 "use client";
 
 import { Nav } from "@intentface/chat/nav";
+import { ChevronDown, Home, Inbox, MessageSquare, Package } from "@keyline-icons/react";
 import { type ComponentProps, useState } from "react";
+import "./rail.css";
 
 /*
  * Modelled on the hard case: a section group with no rail, a group two levels
@@ -10,7 +12,7 @@ import { type ComponentProps, useState } from "react";
  * child.
  *
  * All of it is one `Nav.Group` nesting inside itself. There is no second set of
- * parts for the nesting and no depth-aware CSS — the rail recipe below is a
+ * parts for the nesting and no depth-aware CSS — the rail recipe in rail.css is a
  * single rule that works at any depth. The Root's `guide` is the default every
  * list inherits — "indent", a lane with nothing drawn in it — and lists opt
  * out with "none" or up to "branches" where the tree forks.
@@ -28,8 +30,7 @@ export const Basic = () => {
   const [current, setCurrent] = useState("chat-views");
 
   return (
-    <div className="nav-demo w-64 rounded-xl border border-[#f0f0f0] bg-white py-2 [--rail:#e4e4e4] dark:border-[#262626] dark:bg-[#111111] dark:[--rail:#2d2d2d]">
-      <RailRecipe />
+    <div className="relative nav-demo w-64 rounded-xl bg-[#f5f5f6] shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] py-2 [--rail:#e4e4e7] dark:bg-[#131315] dark:shadow-[0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:after:pointer-events-none dark:after:absolute dark:after:inset-0 dark:after:z-50 dark:after:rounded-[inherit] dark:after:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06)] dark:[--rail:#2b2b2e]">
       <Nav.Root
         aria-label="Main"
         guide="indent"
@@ -45,7 +46,7 @@ export const Basic = () => {
             render={link("/overview", () => setCurrent("overview"))}
           >
             <Nav.Icon>
-              <HomeIcon />
+              <Home className="size-4" />
             </Nav.Icon>
             <Nav.Label className="min-w-0 truncate">Overview</Nav.Label>
           </Nav.Item>
@@ -57,7 +58,7 @@ export const Basic = () => {
             render={link("/inbox", () => setCurrent("inbox"))}
           >
             <Nav.Icon>
-              <InboxIcon />
+              <Inbox className="size-4" />
             </Nav.Icon>
             <Nav.Label className="min-w-0 truncate">Inbox</Nav.Label>
           </Nav.Item>
@@ -75,7 +76,7 @@ export const Basic = () => {
               <Nav.Group value="intentface">
                 <Nav.Trigger className={rowClass}>
                   <Nav.Icon>
-                    <BoxIcon />
+                    <Package className="size-4" />
                   </Nav.Icon>
                   <Nav.Label className="min-w-0 truncate">Intentface</Nav.Label>
                   <Chevron />
@@ -91,7 +92,7 @@ export const Basic = () => {
                     render={link("/intentface/home", () => setCurrent("team-home"))}
                   >
                     <Nav.Icon>
-                      <HomeIcon />
+                      <Home className="size-4" />
                     </Nav.Icon>
                     <Nav.Label className="min-w-0 truncate">Home</Nav.Label>
                   </Nav.Item>
@@ -103,7 +104,7 @@ export const Basic = () => {
                     render={link("/intentface/issues", () => setCurrent("team-issues"))}
                   >
                     <Nav.Icon>
-                      <InboxIcon />
+                      <Inbox className="size-4" />
                     </Nav.Icon>
                     <Nav.Label className="min-w-0 truncate">Issues</Nav.Label>
                   </Nav.Item>
@@ -114,7 +115,7 @@ export const Basic = () => {
                   <Nav.Group value="chat">
                     <Nav.Trigger className={rowClass}>
                       <Nav.Icon>
-                        <ChatIcon />
+                        <MessageSquare className="size-4" />
                       </Nav.Icon>
                       <Nav.Label className="min-w-0 truncate">Chat</Nav.Label>
                       <Chevron />
@@ -145,7 +146,7 @@ export const Basic = () => {
                   <Nav.Group value="website">
                     <Nav.Trigger className={rowClass}>
                       <Nav.Icon>
-                        <BoxIcon />
+                        <Package className="size-4" />
                       </Nav.Icon>
                       <Nav.Label className="min-w-0 truncate">Website</Nav.Label>
                       <Chevron />
@@ -195,21 +196,25 @@ const listClass = "flex flex-col gap-0.5";
  * One row style for leaves and group headings alike — in a sidebar they are the
  * same thing you click, and the only visible difference is the chevron.
  *
- * The explicit height is load-bearing: 14px text has a fractional line-height,
+ * The explicit height is load-bearing: 13px text has a fractional line-height,
  * so padded rows land on a fraction of a pixel and nothing lines up. And no
  * `truncate` here — `overflow: hidden` on a row would clip the ::before and
  * ::after that draw the rail, which sit outside its box. The label truncates
  * instead, which is what a separate part is for.
  */
 const rowClass = [
-  "group/row flex h-8 shrink-0 cursor-pointer select-none items-center gap-2 rounded-md px-2 text-sm",
+  "group/row flex h-[30px] shrink-0 cursor-pointer select-none items-center gap-2 rounded-md px-2 font-medium text-[13px]",
   // No `outline-none` here: it sets --tw-outline-style: none, and the
   // focus-visible ring below resolves its style from that very variable — so
   // the ring would be 2px of nothing.
-  "text-[#686868] no-underline transition-colors dark:text-[#9b9b9b]",
-  "hover:bg-[#f4f4f4] hover:text-[#1a1a1a] dark:hover:bg-[#232323] dark:hover:text-[#fcfcfc]",
-  "focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-[#1a1a1a] dark:focus-visible:outline-[#fcfcfc]",
-  "data-[active]:bg-[#ececec] data-[active]:text-[#1a1a1a] dark:data-[active]:bg-[#2d2d2d] dark:data-[active]:text-[#fcfcfc]",
+  "text-zinc-700 no-underline transition-colors dark:text-zinc-300",
+  "hover:bg-zinc-950/5 hover:text-zinc-900 dark:hover:bg-white/8 dark:hover:text-zinc-100",
+  // Inset: the collapsing lists clip their overflow, so an outset ring would be cut.
+  "focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-[#0169cc]/60",
+  // The selected row is raised off the sidebar. Its ring is inset because the
+  // collapsing lists would clip one drawn outside the row.
+  "data-[active]:bg-white data-[active]:bg-linear-to-b data-[active]:from-white data-[active]:to-[#fdfdfd] data-[active]:text-zinc-900 data-[active]:shadow-[inset_0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)]",
+  "dark:data-[active]:bg-[#2d2d30] dark:data-[active]:from-[#29292c] dark:data-[active]:to-[#242427] dark:data-[active]:text-zinc-100 dark:data-[active]:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]",
   "data-[disabled]:pointer-events-none data-[disabled]:opacity-40",
   "[&_svg]:size-4 [&_svg]:shrink-0",
 ].join(" ");
@@ -220,139 +225,5 @@ const rowClass = [
  * reading `data-closed` off the enclosing trigger, so nothing is threaded down.
  */
 const Chevron = () => (
-  <ChevronIcon className="ml-auto !size-3 text-[#949494] transition-transform group-data-[closed]/row:-rotate-90 dark:text-[#6f6f6f]" />
-);
-
-/*
- * The rail, its branches and the collapse. The package publishes the signal
- * (`data-rail`, `data-branches`, `data-open`); the geometry is yours. Copy it
- * and change the numbers:
- *
- *   15px  hangs the rail under the centre of a size-4 icon at px-2, so it drops
- *         out of the parent's icon rather than beside it.
- *   7px   the rail's lane. It is the list's padding rather than the row's,
- *         because an active row paints a background and would cover a line
- *         drawn inside its own box.
- *   6px   the elbow's corner radius. The curve pulls the vertical away 6px
- *         early, so the continuation starts 6px above the row's centre.
- *   2px   the gap between rows, bridged so the line reads as unbroken.
- */
-const RailRecipe = () => (
-  <style>{`
-.nav-demo [data-nav-group] > [data-nav-list] {
-  height: var(--nav-list-height);
-  overflow: hidden;
-  opacity: 1;
-  transition: height 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease-out;
-}
-.nav-demo [data-nav-list][data-starting-style],
-.nav-demo [data-nav-list][data-ending-style] { height: 0; opacity: 0; }
-.nav-demo [data-nav-list] > * { flex-shrink: 0; }
-.nav-demo [data-nav-list][data-indent] {
-  --nav-row: 2rem;
-  margin-top: 2px;
-  margin-left: 15px;
-  padding-left: 7px;
-}
-.nav-demo [data-nav-list][data-rail] > * { position: relative; overflow: visible; }
-.nav-demo [data-nav-list][data-rail] > *::before,
-.nav-demo [data-nav-list][data-rail] > *::after {
-  content: "";
-  position: absolute;
-  left: -7px;
-  border-color: var(--rail);
-  border-left-width: 1px;
-}
-.nav-demo [data-nav-list][data-rail] > *::before {
-  top: -2px;
-  width: 6px;
-  height: calc(var(--nav-row) / 2 + 2px);
-}
-.nav-demo [data-nav-list][data-rail] > *::after {
-  top: calc(var(--nav-row) / 2 - 6px);
-  bottom: -2px;
-}
-.nav-demo [data-nav-list][data-rail] > *:last-child::after { display: none; }
-.nav-demo [data-nav-list][data-branches] > [data-nav-group]::before {
-  border-bottom-width: 1px;
-  border-bottom-left-radius: 6px;
-}
-@media (prefers-reduced-motion: reduce) {
-  .nav-demo [data-nav-group] > [data-nav-list] { transition: none; }
-}
-`}</style>
-);
-
-const HomeIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.3"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M2.5 6.5 8 2.5l5.5 4v6a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1v-6Z" strokeLinejoin="round" />
-  </svg>
-);
-
-const InboxIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.3"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M2.5 8.5h3l1 2h3l1-2h3v3a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1v-3Z" strokeLinejoin="round" />
-    <path
-      d="M2.5 8.5l1.6-4.2a1 1 0 0 1 .94-.65h5.92a1 1 0 0 1 .94.65l1.6 4.2"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-const BoxIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.3"
-    aria-hidden="true"
-    {...props}
-  >
-    <rect x="2.5" y="2.5" width="11" height="11" rx="2.5" strokeLinejoin="round" />
-  </svg>
-);
-
-const ChatIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.3"
-    aria-hidden="true"
-    {...props}
-  >
-    <path
-      d="M13.5 8.5a4.5 4.5 0 0 1-4.5 4.5H6l-3 2v-2.6A4.5 4.5 0 0 1 6 4h3a4.5 4.5 0 0 1 4.5 4.5Z"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-const ChevronIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="m4 6.5 4 4 4-4" />
-  </svg>
+  <ChevronDown className="ml-auto !size-3 text-zinc-400 transition-transform group-data-[closed]/row:-rotate-90 dark:text-zinc-500" />
 );
diff --git a/content/docs/primitives/nav/demos/collapse.css b/content/docs/primitives/nav/demos/collapse.css
new file mode 100644
index 0000000..b387332
--- /dev/null
+++ b/content/docs/primitives/nav/demos/collapse.css
@@ -0,0 +1,27 @@
+/*
+ * Deliberately slow. `flex-shrink: 0` on the rows is load-bearing: the
+ * collapsing list squeezes to nothing, and a flex item shrinks below its own
+ * height when the column runs short — so without it the rows compress instead
+ * of sliding up behind the clip.
+ */
+
+.collapse-demo [data-nav-group] > [data-nav-list] {
+  height: var(--nav-list-height);
+  overflow: hidden;
+  opacity: 1;
+  transition:
+    height 500ms cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 500ms ease-out;
+}
+.collapse-demo [data-nav-list][data-starting-style],
+.collapse-demo [data-nav-list][data-ending-style] {
+  height: 0;
+  opacity: 0;
+}
+.collapse-demo [data-nav-list] > * {
+  flex-shrink: 0;
+}
+.collapse-demo [data-nav-list][data-indent] {
+  margin-left: 15px;
+  padding-left: 7px;
+}
diff --git a/content/docs/primitives/nav/demos/collapse.tsx b/content/docs/primitives/nav/demos/collapse.tsx
index c9c550c..be3ea48 100644
--- a/content/docs/primitives/nav/demos/collapse.tsx
+++ b/content/docs/primitives/nav/demos/collapse.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { Nav } from "@intentface/chat/nav";
-import type { ComponentProps } from "react";
+import { ChevronDown } from "@keyline-icons/react";
+import "./collapse.css";
 
 /*
  * The collapse, slowed to 500ms so the mechanism is visible.
@@ -17,9 +18,7 @@ import type { ComponentProps } from "react";
  * inner one, and watch the outer keep growing.
  */
 export const Collapse = () => (
-  <div className="collapse-demo w-72 rounded-xl border border-[#f0f0f0] bg-white py-2 dark:border-[#262626] dark:bg-[#111111]">
-    <CollapseRecipe />
-
+  <div className="relative collapse-demo w-72 rounded-xl bg-[#f5f5f6] shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] py-2 dark:bg-[#131315] dark:shadow-[0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:after:pointer-events-none dark:after:absolute dark:after:inset-0 dark:after:z-50 dark:after:rounded-[inherit] dark:after:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06)]">
     <Nav.Root
       aria-label="Collapse"
       guide="indent"
@@ -68,48 +67,13 @@ export const Collapse = () => (
 const listClass = "flex flex-col gap-0.5";
 
 const rowClass = [
-  "group/row flex h-8 shrink-0 cursor-pointer select-none items-center gap-2 rounded-md px-2 text-sm",
-  "text-[#686868] transition-colors dark:text-[#9b9b9b]",
-  "hover:bg-[#f4f4f4] hover:text-[#1a1a1a] dark:hover:bg-[#232323] dark:hover:text-[#fcfcfc]",
-  "focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-[#1a1a1a] dark:focus-visible:outline-[#fcfcfc]",
+  "group/row flex h-[30px] shrink-0 cursor-pointer select-none items-center gap-2 rounded-md px-2 font-medium text-[13px]",
+  "text-zinc-700 transition-colors dark:text-zinc-300",
+  "hover:bg-zinc-950/5 hover:text-zinc-900 dark:hover:bg-white/8 dark:hover:text-zinc-100",
+  // Inset: the collapsing lists clip their overflow, so an outset ring would be cut.
+  "focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-[#0169cc]/60",
 ].join(" ");
 
 const Chevron = () => (
-  <ChevronIcon className="ml-auto size-3 text-[#949494] transition-transform group-data-closed/row:-rotate-90 dark:text-[#6f6f6f]" />
-);
-
-/*
- * Deliberately slow. `flex-shrink: 0` on the rows is load-bearing: the
- * collapsing list squeezes to nothing, and a flex item shrinks below its own
- * height when the column runs short — so without it the rows compress instead
- * of sliding up behind the clip.
- */
-const CollapseRecipe = () => (
-  <style>{`
-.collapse-demo [data-nav-group] > [data-nav-list] {
-  height: var(--nav-list-height);
-  overflow: hidden;
-  opacity: 1;
-  transition: height 500ms cubic-bezier(0.4, 0, 0.2, 1), opacity 500ms ease-out;
-}
-.collapse-demo [data-nav-list][data-starting-style],
-.collapse-demo [data-nav-list][data-ending-style] { height: 0; opacity: 0; }
-.collapse-demo [data-nav-list] > * { flex-shrink: 0; }
-.collapse-demo [data-nav-list][data-indent] { margin-left: 15px; padding-left: 7px; }
-`}</style>
-);
-
-const ChevronIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="m4 6.5 4 4 4-4" />
-  </svg>
+  <ChevronDown className="ml-auto size-3 text-zinc-400 transition-transform group-data-closed/row:-rotate-90 dark:text-zinc-500" />
 );
diff --git a/content/docs/primitives/nav/demos/destination.tsx b/content/docs/primitives/nav/demos/destination.tsx
index d7918b2..4c59d0e 100644
--- a/content/docs/primitives/nav/demos/destination.tsx
+++ b/content/docs/primitives/nav/demos/destination.tsx
@@ -19,21 +19,30 @@ export const Destination = () => {
 
   return (
     <div className="flex w-full max-w-xl flex-col gap-3 sm:flex-row">
-      <div className="w-full shrink-0 rounded-xl border border-[#f0f0f0] bg-white py-2 sm:w-60 dark:border-[#262626] dark:bg-[#111111]">
+      <div className="relative w-full shrink-0 rounded-xl bg-[#f5f5f6] shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] py-2 sm:w-60 dark:bg-[#131315] dark:shadow-[0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:after:pointer-events-none dark:after:absolute dark:after:inset-0 dark:after:z-50 dark:after:rounded-[inherit] dark:after:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06)]">
         <Nav.Root
           aria-label="Documentation"
           defaultExpanded={["guides"]}
           render={<nav />}
           className="flex flex-col px-2"
         >
-          <Nav.List className={listClass}>
+          <Nav.List className="flex flex-col gap-0.5">
             <Nav.Group value="guides">
               <Nav.Trigger
                 active={page === "guides"}
                 onClick={() => setPage("guides")}
                 className={rowClass}
               >
-                <Nav.Toggle aria-label="More Guides pages" className={toggleClass}>
+                {/* Its own hit area, a little larger than the glyph, so the caret is an
+                    easy target and the rest of the row stays the destination. */}
+                <Nav.Toggle
+                  aria-label="More Guides pages"
+                  className={[
+                    "-ml-1 flex size-5 shrink-0 items-center justify-center rounded-full text-zinc-400 dark:text-zinc-500",
+                    "transition-transform data-closed:-rotate-90",
+                    "hover:bg-zinc-950/5 hover:text-zinc-900 dark:hover:bg-white/8 dark:hover:text-zinc-100",
+                  ].join(" ")}
+                >
                   <ChevronIcon className="size-3" />
                 </Nav.Toggle>
                 <Nav.Label className="min-w-0 truncate">Guides</Nav.Label>
@@ -56,7 +65,12 @@ export const Destination = () => {
 
             <Nav.Group value="reference">
               <Nav.Trigger className={rowClass}>
-                <span aria-hidden="true" className={chevronClass}>
+                {/* Decoration only: it turns with the row it sits in, through the row's
+                    data-closed. */}
+                <span
+                  aria-hidden="true"
+                  className="-ml-1 flex size-5 shrink-0 items-center justify-center text-zinc-400 transition-transform group-data-closed/row:-rotate-90 dark:text-zinc-500"
+                >
                   <ChevronIcon className="size-3" />
                 </span>
                 <Nav.Label className="min-w-0 truncate">Reference</Nav.Label>
@@ -80,36 +94,25 @@ export const Destination = () => {
         </Nav.Root>
       </div>
 
-      <div className="flex min-h-32 flex-1 items-center justify-center rounded-xl border border-[#f0f0f0] bg-white text-sm text-[#686868] dark:border-[#262626] dark:bg-[#111111] dark:text-[#9b9b9b]">
-        Showing <span className="ml-1 font-medium text-[#1a1a1a] dark:text-[#fcfcfc]">{page}</span>
+      <div className="flex min-h-32 flex-1 items-center justify-center rounded-xl bg-white shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] text-[13px] text-zinc-500 dark:bg-zinc-900 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:text-zinc-400">
+        Showing <span className="ml-1 font-medium text-zinc-900 dark:text-zinc-100">{page}</span>
       </div>
     </div>
   );
 };
 
-const listClass = "flex flex-col gap-0.5";
 const nestedClass = "ml-[15px] flex flex-col gap-0.5 pl-[7px]";
 
 const rowClass = [
-  "group/row flex h-8 shrink-0 cursor-pointer select-none items-center gap-1.5 rounded-md px-2 text-sm",
-  "text-[#686868] transition-colors dark:text-[#9b9b9b]",
-  "hover:bg-[#f4f4f4] hover:text-[#1a1a1a] dark:hover:bg-[#232323] dark:hover:text-[#fcfcfc]",
-  "data-active:bg-[#f4f4f4] data-active:text-[#1a1a1a] dark:data-active:bg-[#232323] dark:data-active:text-[#fcfcfc]",
-  "focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-[#1a1a1a] dark:focus-visible:outline-[#fcfcfc]",
+  "group/row flex h-[30px] shrink-0 cursor-pointer select-none items-center gap-1.5 rounded-md px-2 font-medium text-[13px]",
+  "text-zinc-700 transition-colors dark:text-zinc-300",
+  "hover:bg-zinc-950/5 hover:text-zinc-900 dark:hover:bg-white/8 dark:hover:text-zinc-100",
+  // The selected row is raised off the sidebar.
+  "data-active:bg-white data-active:bg-linear-to-b data-active:from-white data-active:to-[#fdfdfd] data-active:text-zinc-900 data-active:shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)]",
+  "dark:data-active:bg-[#2d2d30] dark:data-active:from-[#29292c] dark:data-active:to-[#242427] dark:data-active:text-zinc-100 dark:data-active:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]",
+  "focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-[#0169cc]/60",
 ].join(" ");
 
-/* Its own hit area, a little larger than the glyph, so the caret is an easy
-   target and the rest of the row stays the destination. */
-const toggleClass = [
-  "-ml-1 flex size-5 shrink-0 items-center justify-center rounded text-[#949494] dark:text-[#6f6f6f]",
-  "transition-transform data-closed:-rotate-90",
-  "hover:bg-[#e8e8e8] hover:text-[#1a1a1a] dark:hover:bg-[#2e2e2e] dark:hover:text-[#fcfcfc]",
-].join(" ");
-
-/* Decoration only: it turns with the row it sits in, through the row's data-closed. */
-const chevronClass =
-  "-ml-1 flex size-5 shrink-0 items-center justify-center text-[#949494] transition-transform group-data-closed/row:-rotate-90 dark:text-[#6f6f6f]";
-
 const ChevronIcon = (props: ComponentProps<"svg">) => (
   <svg
     viewBox="0 0 16 16"
diff --git a/content/docs/primitives/nav/demos/external.css b/content/docs/primitives/nav/demos/external.css
new file mode 100644
index 0000000..c858977
--- /dev/null
+++ b/content/docs/primitives/nav/demos/external.css
@@ -0,0 +1,20 @@
+.external-nav-demo [data-nav-group] > [data-nav-list] {
+  height: var(--nav-list-height);
+  overflow: hidden;
+  opacity: 1;
+  transition:
+    height 200ms cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 200ms ease-out;
+}
+.external-nav-demo [data-nav-list][data-starting-style],
+.external-nav-demo [data-nav-list][data-ending-style] {
+  height: 0;
+  opacity: 0;
+}
+.external-nav-demo [data-nav-list] > * {
+  flex-shrink: 0;
+}
+.external-nav-demo [data-nav-list][data-indent] {
+  margin-left: 15px;
+  padding-left: 7px;
+}
diff --git a/content/docs/primitives/nav/demos/external.tsx b/content/docs/primitives/nav/demos/external.tsx
index f53bad6..737d9f4 100644
--- a/content/docs/primitives/nav/demos/external.tsx
+++ b/content/docs/primitives/nav/demos/external.tsx
@@ -1,7 +1,9 @@
 "use client";
 
 import { Nav, type NavStore, useNavStore } from "@intentface/chat/nav";
-import { type ComponentProps, useState } from "react";
+import { ChevronDown } from "@keyline-icons/react";
+import { useState } from "react";
+import "./external.css";
 
 const GROUPS = ["workspace", "projects", "archive"];
 
@@ -26,7 +28,7 @@ export const ExternalNav = () => {
         aria-label="Workspace"
         guide="indent"
         render={<nav />}
-        className="flex w-72 flex-col gap-0.5 rounded-xl border border-[#f0f0f0] bg-white px-2 py-2 dark:border-[#262626] dark:bg-[#111111]"
+        className="relative flex w-72 flex-col gap-0.5 rounded-xl bg-[#f5f5f6] shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] px-2 py-2 dark:bg-[#131315] dark:shadow-[0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:after:pointer-events-none dark:after:absolute dark:after:inset-0 dark:after:z-50 dark:after:rounded-[inherit] dark:after:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06)]"
       >
         <Nav.List guide="none" className={listClass}>
           {GROUPS.map((value) => (
@@ -49,7 +51,6 @@ export const ExternalNav = () => {
       </Nav.Root>
 
       <Controls store={store} />
-      <CollapseRecipe />
     </div>
   );
 };
@@ -85,47 +86,18 @@ const Controls = ({ store }: { store: NavStore }) => {
 };
 
 const buttonClass =
-  "h-8 cursor-pointer rounded-full border border-[#e4e4e4] bg-white px-4 font-medium text-[#1a1a1a] text-sm transition-colors hover:bg-[#f4f4f4] disabled:cursor-default disabled:opacity-40 disabled:hover:bg-white focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-[#1a1a1a] dark:border-[#2d2d2d] dark:bg-[#181818] dark:text-[#fcfcfc] dark:hover:bg-[#232323] dark:focus-visible:outline-[#fcfcfc]";
+  "h-8 cursor-pointer rounded-full bg-white bg-linear-to-b from-white to-[#fdfdfd] shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)] px-4 font-medium text-[13px] text-zinc-900 enabled:hover:from-[#fafafa] enabled:hover:to-[#f6f6f6] disabled:cursor-default disabled:opacity-40 focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2 dark:bg-[#2d2d30] dark:from-[#313134] dark:to-[#2a2a2d] dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:text-zinc-100 dark:enabled:hover:from-[#38383b] dark:enabled:hover:to-[#313134]";
 
 const listClass = "flex flex-col gap-0.5";
 
 const rowClass = [
-  "group/row flex h-8 shrink-0 cursor-pointer select-none items-center gap-2 rounded-md px-2 text-sm",
-  "text-[#686868] transition-colors dark:text-[#9b9b9b]",
-  "hover:bg-[#f4f4f4] hover:text-[#1a1a1a] dark:hover:bg-[#232323] dark:hover:text-[#fcfcfc]",
-  "focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-[#1a1a1a] dark:focus-visible:outline-[#fcfcfc]",
+  "group/row flex h-[30px] shrink-0 cursor-pointer select-none items-center gap-2 rounded-md px-2 font-medium text-[13px]",
+  "text-zinc-700 transition-colors dark:text-zinc-300",
+  "hover:bg-zinc-950/5 hover:text-zinc-900 dark:hover:bg-white/8 dark:hover:text-zinc-100",
+  // Inset: the collapsing lists clip their overflow, so an outset ring would be cut.
+  "focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-[#0169cc]/60",
 ].join(" ");
 
 const Chevron = () => (
-  <ChevronIcon className="ml-auto size-3 text-[#949494] transition-transform group-data-closed/row:-rotate-90 dark:text-[#6f6f6f]" />
-);
-
-const CollapseRecipe = () => (
-  <style>{`
-.external-nav-demo [data-nav-group] > [data-nav-list] {
-  height: var(--nav-list-height);
-  overflow: hidden;
-  opacity: 1;
-  transition: height 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease-out;
-}
-.external-nav-demo [data-nav-list][data-starting-style],
-.external-nav-demo [data-nav-list][data-ending-style] { height: 0; opacity: 0; }
-.external-nav-demo [data-nav-list] > * { flex-shrink: 0; }
-.external-nav-demo [data-nav-list][data-indent] { margin-left: 15px; padding-left: 7px; }
-`}</style>
-);
-
-const ChevronIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="m4 6.5 4 4 4-4" />
-  </svg>
+  <ChevronDown className="ml-auto size-3 text-zinc-400 transition-transform group-data-closed/row:-rotate-90 dark:text-zinc-500" />
 );
diff --git a/content/docs/primitives/nav/demos/guides-rail.css b/content/docs/primitives/nav/demos/guides-rail.css
new file mode 100644
index 0000000..3d50283
--- /dev/null
+++ b/content/docs/primitives/nav/demos/guides-rail.css
@@ -0,0 +1,56 @@
+/*
+ * One stylesheet for all four trees. Because the attributes are cumulative,
+ * the `[data-indent]` rule sizes the lane for indent, rail and branches alike,
+ * and `[data-rail]` draws for rail and branches alike.
+ */
+
+.guides-demo [data-nav-group] > [data-nav-list] {
+  height: var(--nav-list-height);
+  overflow: hidden;
+  opacity: 1;
+  transition:
+    height 200ms cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 200ms ease-out;
+}
+.guides-demo [data-nav-list][data-starting-style],
+.guides-demo [data-nav-list][data-ending-style] {
+  height: 0;
+  opacity: 0;
+}
+.guides-demo [data-nav-list] > * {
+  flex-shrink: 0;
+}
+.guides-demo [data-nav-list][data-indent] {
+  --nav-row: 30px;
+  margin-top: 2px;
+  margin-left: 15px;
+  padding-left: 7px;
+}
+.guides-demo [data-nav-list][data-rail] > * {
+  position: relative;
+  overflow: visible;
+}
+.guides-demo [data-nav-list][data-rail] > *::before,
+.guides-demo [data-nav-list][data-rail] > *::after {
+  content: "";
+  position: absolute;
+  left: -7px;
+  border-color: var(--rail);
+  border-left-width: 1px;
+}
+.guides-demo [data-nav-list][data-rail] > *::before {
+  top: -2px;
+  width: 6px;
+  height: calc(var(--nav-row) / 2 + 2px);
+}
+.guides-demo [data-nav-list][data-rail] > *::after {
+  top: calc(var(--nav-row) / 2 - 6px);
+  bottom: -2px;
+}
+.guides-demo [data-nav-list][data-rail] > *:last-child::after {
+  display: none;
+}
+.guides-demo [data-nav-list][data-branches] > [data-nav-group]::before {
+  border-bottom-width: 1px;
+  border-bottom-left-radius: 6px;
+}
diff --git a/content/docs/primitives/nav/demos/guides.tsx b/content/docs/primitives/nav/demos/guides.tsx
index 6180c23..bd36889 100644
--- a/content/docs/primitives/nav/demos/guides.tsx
+++ b/content/docs/primitives/nav/demos/guides.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { Nav } from "@intentface/chat/nav";
-import type { ComponentProps } from "react";
+import { ChevronDown, Home, Package } from "@keyline-icons/react";
+import "./guides-rail.css";
 
 /*
  * The same tree four times, once per `guide` value, so the rungs can be
@@ -9,8 +10,8 @@ import type { ComponentProps } from "react";
  *
  * The attributes are cumulative — "rail" emits `data-indent` as well, and
  * "branches" emits all three — which is why one stylesheet covers every value
- * without wrapping a selector in `:is()`. The geometry below is the same
- * recipe the Nav page documents; only the `guide` prop changes.
+ * without wrapping a selector in `:is()`. The geometry in guides-rail.css is
+ * the same recipe the Nav page documents; only the `guide` prop changes.
  */
 export const Guides = () => (
   <div className="guides-demo grid w-full grid-cols-2 gap-3 lg:grid-cols-4">
@@ -18,8 +19,6 @@ export const Guides = () => (
     <GuideTree guide="indent" caption="The lane exists, nothing drawn in it." />
     <GuideTree guide="rail" caption="A line down the lane." />
     <GuideTree guide="branches" caption="Elbows off the rail, on groups only." />
-
-    <RailRecipe />
   </div>
 );
 
@@ -28,10 +27,10 @@ type GuideValue = "none" | "indent" | "rail" | "branches";
 const GuideTree = ({ guide, caption }: { guide: GuideValue; caption: string }) => (
   <div className="flex min-w-0 flex-col gap-2">
     <div className="flex items-baseline gap-2">
-      <code className="font-mono text-[#1a1a1a] text-xs dark:text-[#fcfcfc]">{guide}</code>
+      <code className="font-mono text-xs text-zinc-900 dark:text-zinc-100">{guide}</code>
     </div>
 
-    <div className="rounded-xl border border-[#f0f0f0] bg-white py-2 [--rail:#e4e4e4] dark:border-[#262626] dark:bg-[#111111] dark:[--rail:#2d2d2d]">
+    <div className="relative rounded-xl bg-[#f5f5f6] shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] py-2 [--rail:#e4e4e7] dark:bg-[#131315] dark:shadow-[0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:after:pointer-events-none dark:after:absolute dark:after:inset-0 dark:after:z-50 dark:after:rounded-[inherit] dark:after:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06)] dark:[--rail:#2b2b2e]">
       <Nav.Root
         aria-label={`Guide: ${guide}`}
         guide={guide}
@@ -44,7 +43,7 @@ const GuideTree = ({ guide, caption }: { guide: GuideValue; caption: string }) =
         <Nav.List guide="none" className={listClass}>
           <Nav.Item value="overview" active className={rowClass}>
             <Nav.Icon>
-              <HomeIcon />
+              <Home className="size-4" />
             </Nav.Icon>
             <Nav.Label className="min-w-0 truncate">Overview</Nav.Label>
           </Nav.Item>
@@ -52,7 +51,7 @@ const GuideTree = ({ guide, caption }: { guide: GuideValue; caption: string }) =
           <Nav.Group value="chat">
             <Nav.Trigger className={rowClass}>
               <Nav.Icon>
-                <BoxIcon />
+                <Package className="size-4" />
               </Nav.Icon>
               <Nav.Label className="min-w-0 truncate">Chat</Nav.Label>
               <Chevron />
@@ -83,112 +82,26 @@ const GuideTree = ({ guide, caption }: { guide: GuideValue; caption: string }) =
       </Nav.Root>
     </div>
 
-    <p className="text-[#686868] text-xs leading-5 dark:text-[#9b9b9b]">{caption}</p>
+    <p className="text-xs text-zinc-500 leading-5 dark:text-zinc-400">{caption}</p>
   </div>
 );
 
 const listClass = "flex flex-col gap-0.5";
 
-// The explicit height is load-bearing: 14px text has a fractional line-height,
+// The explicit height is load-bearing: 13px text has a fractional line-height,
 // so padded rows land on a fraction of a pixel and the rail stops lining up.
 const rowClass = [
-  "group/row flex h-8 shrink-0 cursor-pointer select-none items-center gap-2 rounded-md px-2 text-sm",
-  "text-[#686868] no-underline transition-colors dark:text-[#9b9b9b]",
-  "hover:bg-[#f4f4f4] hover:text-[#1a1a1a] dark:hover:bg-[#232323] dark:hover:text-[#fcfcfc]",
-  "focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-[#1a1a1a] dark:focus-visible:outline-[#fcfcfc]",
-  "data-[active]:bg-[#ececec] data-[active]:text-[#1a1a1a] dark:data-[active]:bg-[#2d2d2d] dark:data-[active]:text-[#fcfcfc]",
+  "group/row flex h-[30px] shrink-0 cursor-pointer select-none items-center gap-2 rounded-md px-2 font-medium text-[13px]",
+  "text-zinc-700 no-underline transition-colors dark:text-zinc-300",
+  "hover:bg-zinc-950/5 hover:text-zinc-900 dark:hover:bg-white/8 dark:hover:text-zinc-100",
+  // Inset: the collapsing lists clip their overflow, so an outset ring would be cut.
+  "focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-[#0169cc]/60",
+  // The selected row is raised off the sidebar.
+  "data-[active]:bg-white data-[active]:bg-linear-to-b data-[active]:from-white data-[active]:to-[#fdfdfd] data-[active]:text-zinc-900 data-[active]:shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)]",
+  "dark:data-[active]:bg-[#2d2d30] dark:data-[active]:from-[#29292c] dark:data-[active]:to-[#242427] dark:data-[active]:text-zinc-100 dark:data-[active]:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]",
   "[&_svg]:size-4 [&_svg]:shrink-0",
 ].join(" ");
 
 const Chevron = () => (
-  <ChevronIcon className="ml-auto size-3! text-[#949494] transition-transform group-data-closed/row:-rotate-90 dark:text-[#6f6f6f]" />
-);
-
-/*
- * One stylesheet for all four trees. Because the attributes are cumulative,
- * the `[data-indent]` rule sizes the lane for indent, rail and branches alike,
- * and `[data-rail]` draws for rail and branches alike.
- */
-const RailRecipe = () => (
-  <style>{`
-.guides-demo [data-nav-group] > [data-nav-list] {
-  height: var(--nav-list-height);
-  overflow: hidden;
-  opacity: 1;
-  transition: height 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease-out;
-}
-.guides-demo [data-nav-list][data-starting-style],
-.guides-demo [data-nav-list][data-ending-style] { height: 0; opacity: 0; }
-.guides-demo [data-nav-list] > * { flex-shrink: 0; }
-.guides-demo [data-nav-list][data-indent] {
-  --nav-row: 2rem;
-  margin-top: 2px;
-  margin-left: 15px;
-  padding-left: 7px;
-}
-.guides-demo [data-nav-list][data-rail] > * { position: relative; overflow: visible; }
-.guides-demo [data-nav-list][data-rail] > *::before,
-.guides-demo [data-nav-list][data-rail] > *::after {
-  content: "";
-  position: absolute;
-  left: -7px;
-  border-color: var(--rail);
-  border-left-width: 1px;
-}
-.guides-demo [data-nav-list][data-rail] > *::before {
-  top: -2px;
-  width: 6px;
-  height: calc(var(--nav-row) / 2 + 2px);
-}
-.guides-demo [data-nav-list][data-rail] > *::after {
-  top: calc(var(--nav-row) / 2 - 6px);
-  bottom: -2px;
-}
-.guides-demo [data-nav-list][data-rail] > *:last-child::after { display: none; }
-.guides-demo [data-nav-list][data-branches] > [data-nav-group]::before {
-  border-bottom-width: 1px;
-  border-bottom-left-radius: 6px;
-}
-`}</style>
-);
-
-const HomeIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.3"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M2.5 6.5 8 2.5l5.5 4v6a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1v-6Z" strokeLinejoin="round" />
-  </svg>
-);
-
-const BoxIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.3"
-    aria-hidden="true"
-    {...props}
-  >
-    <rect x="2.5" y="2.5" width="11" height="11" rx="2.5" strokeLinejoin="round" />
-  </svg>
-);
-
-const ChevronIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="m4 6.5 4 4 4-4" />
-  </svg>
+  <ChevronDown className="ml-auto size-3! text-zinc-400 transition-transform group-data-closed/row:-rotate-90 dark:text-zinc-500" />
 );
diff --git a/content/docs/primitives/nav/demos/rail.css b/content/docs/primitives/nav/demos/rail.css
new file mode 100644
index 0000000..755852e
--- /dev/null
+++ b/content/docs/primitives/nav/demos/rail.css
@@ -0,0 +1,72 @@
+/*
+ * The rail, its branches and the collapse. The package publishes the signal
+ * (`data-rail`, `data-branches`, `data-open`); the geometry is yours. Copy it
+ * and change the numbers:
+ *
+ *   15px  hangs the rail under the centre of a size-4 icon at px-2, so it drops
+ *         out of the parent's icon rather than beside it.
+ *   7px   the rail's lane. It is the list's padding rather than the row's,
+ *         because an active row paints a background and would cover a line
+ *         drawn inside its own box.
+ *   6px   the elbow's corner radius. The curve pulls the vertical away 6px
+ *         early, so the continuation starts 6px above the row's centre.
+ *   2px   the gap between rows, bridged so the line reads as unbroken. The
+ *         bridges overlap, so --rail must be an opaque colour: a translucent
+ *         one would double up into visible dashes.
+ */
+
+.nav-demo [data-nav-group] > [data-nav-list] {
+  height: var(--nav-list-height);
+  overflow: hidden;
+  opacity: 1;
+  transition:
+    height 200ms cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 200ms ease-out;
+}
+.nav-demo [data-nav-list][data-starting-style],
+.nav-demo [data-nav-list][data-ending-style] {
+  height: 0;
+  opacity: 0;
+}
+.nav-demo [data-nav-list] > * {
+  flex-shrink: 0;
+}
+.nav-demo [data-nav-list][data-indent] {
+  --nav-row: 30px;
+  margin-top: 2px;
+  margin-left: 15px;
+  padding-left: 7px;
+}
+.nav-demo [data-nav-list][data-rail] > * {
+  position: relative;
+  overflow: visible;
+}
+.nav-demo [data-nav-list][data-rail] > *::before,
+.nav-demo [data-nav-list][data-rail] > *::after {
+  content: "";
+  position: absolute;
+  left: -7px;
+  border-color: var(--rail);
+  border-left-width: 1px;
+}
+.nav-demo [data-nav-list][data-rail] > *::before {
+  top: -2px;
+  width: 6px;
+  height: calc(var(--nav-row) / 2 + 2px);
+}
+.nav-demo [data-nav-list][data-rail] > *::after {
+  top: calc(var(--nav-row) / 2 - 6px);
+  bottom: -2px;
+}
+.nav-demo [data-nav-list][data-rail] > *:last-child::after {
+  display: none;
+}
+.nav-demo [data-nav-list][data-branches] > [data-nav-group]::before {
+  border-bottom-width: 1px;
+  border-bottom-left-radius: 6px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .nav-demo [data-nav-group] > [data-nav-list] {
+    transition: none;
+  }
+}
diff --git a/content/docs/primitives/reasoning.mdx b/content/docs/primitives/reasoning.mdx
index ed36d4c..25d8742 100644
--- a/content/docs/primitives/reasoning.mdx
+++ b/content/docs/primitives/reasoning.mdx
@@ -5,6 +5,7 @@ source: reasoning
 ---
 
 import { Basic } from './reasoning/demos/basic';
+import { Streaming } from './reasoning/demos/streaming';
 
 <Demo component={<Basic />} file="primitives/reasoning/demos/basic.tsx" />
 
@@ -34,25 +35,20 @@ Driven from a streaming message, passing the reasoning parts' text:
 </Reasoning.Root>
 ```
 
-## useReasoning
-
-Read the disclosure state from anywhere inside `<Reasoning.Root>`:
+## Examples
 
-export const hookMembers = [
-  { name: "isStreaming", type: "boolean", description: "Whether reasoning is still streaming in." },
-  { name: "isOpen", type: "boolean", description: "Whether the panel is open." },
-  { name: "setIsOpen", type: "(open: boolean) => void", description: "Toggle the panel." },
-  { name: "duration", type: "number | undefined", description: "Tracked streaming duration in seconds." },
-];
+### Tracking the streaming state
 
-<PropsTable rows={hookMembers} />
+`isStreaming` is the only input. While it is true the root carries
+`data-streaming` and `aria-busy`; the moment it flips false the elapsed time is
+captured and handed back as `duration`, so the trigger's label changes without
+you timing anything.
 
-## Accessibility
+<Demo component={<Streaming />} file="primitives/reasoning/demos/streaming.tsx" />
 
-Built on a disclosure: `Reasoning.Trigger` is a `<button>` with `aria-expanded`
-and `aria-controls` pointing at the panel, so screen readers announce the
-collapsed/expanded state and the relationship. While `isStreaming`, the root
-carries `aria-busy` so assistive tech knows the content is still updating.
+The panel animates through `--panel-height`, which is published only while a
+transition runs and released once it settles open. That release is what lets an
+open panel keep growing as sections stream into it.
 
 ## API reference
 
@@ -61,7 +57,9 @@ Every part accepts `className`, `style`, and `render` (see
 
 ### Reasoning
 
-The disclosure root. Renders `data-reasoning`.
+The disclosure root. Tracks how long `isStreaming` stayed true and hands the
+elapsed seconds back through `useReasoning`, so a label can change without the
+consumer timing anything. Renders a `<div>` element.
 
 export const rootProps = [
   { name: "isStreaming", type: "boolean", default: "false", description: "While true the trigger shimmers; the streamed duration is captured when it flips false." },
@@ -84,9 +82,9 @@ export const rootAttrs = [
 
 ### Reasoning.Trigger
 
-The toggle. Renders a `<button>` with `data-reasoning-trigger`. It ships no
-copy — supply the label as children, and read `isStreaming` and `duration` from
-`useReasoning()` if you want it to change while thinking.
+The toggle. Ships no copy: supply the label as children, and read `isStreaming`
+and `duration` from `useReasoning` if it should change while the model is
+thinking. Renders a `<button>` element.
 
 export const triggerProps = [
   { name: "children", type: "ReactNode", description: "The trigger content — a label, a chevron, whatever you need." },
@@ -104,8 +102,9 @@ export const triggerAttrs = [
 
 ### Reasoning.Content
 
-The collapsible panel. Renders `data-reasoning-content`. Bold `**Header**`
-lines split the text into sections rendered as markdown.
+The collapsible panel. Publishes its measured height while a transition runs
+and releases it once settled open, so a panel that is open keeps growing as text
+streams in. Renders a `<div>` element.
 
 export const contentProps = [
   { name: "children", type: "string | string[]", default: "(required)", description: "Reasoning text; bold headers split it into sections." },
@@ -124,3 +123,16 @@ export const contentAttrs = [
 ];
 
 <AttributesTable rows={contentAttrs} />
+
+## useReasoning
+
+Read the disclosure state from anywhere inside `<Reasoning.Root>`:
+
+export const hookMembers = [
+  { name: "isStreaming", type: "boolean", description: "Whether reasoning is still streaming in." },
+  { name: "isOpen", type: "boolean", description: "Whether the panel is open." },
+  { name: "setIsOpen", type: "(open: boolean) => void", description: "Toggle the panel." },
+  { name: "duration", type: "number | undefined", description: "Tracked streaming duration in seconds." },
+];
+
+<PropsTable rows={hookMembers} />
diff --git a/content/docs/primitives/reasoning/demos/basic.tsx b/content/docs/primitives/reasoning/demos/basic.tsx
index 168bdb7..2b20372 100644
--- a/content/docs/primitives/reasoning/demos/basic.tsx
+++ b/content/docs/primitives/reasoning/demos/basic.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Reasoning } from "@intentface/chat/reasoning";
-import type { ComponentProps } from "react";
+import { Brain, ChevronDown } from "@keyline-icons/react";
 
 // A completed reasoning block. The parts ship no copy and no layout — the
 // trigger label and the section structure below are both yours.
@@ -19,53 +19,19 @@ const SECTIONS = [
 export const Basic = () => (
   <div className="w-full max-w-xl">
     <Reasoning.Root defaultOpen className="flex flex-col gap-1">
-      <Reasoning.Trigger className="group flex w-fit cursor-pointer items-center gap-2 text-sm text-[#686868] transition-colors hover:text-[#1a1a1a] dark:text-[#9b9b9b] dark:hover:text-[#fcfcfc]">
-        <BrainIcon />
+      <Reasoning.Trigger className="group flex w-fit cursor-pointer items-center gap-2 rounded-full font-medium text-[13px] text-zinc-500 transition-colors hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2 dark:text-zinc-400 dark:hover:text-zinc-100">
+        <Brain className="size-[15px]" />
         Thought for a few seconds
-        <ChevronIcon className="transition-transform group-data-closed:rotate-180" />
+        <ChevronDown className="size-3 transition-transform group-data-closed:rotate-180" />
       </Reasoning.Trigger>
-      <Reasoning.Content className="flex flex-col gap-3 pl-6 text-sm">
+      <Reasoning.Content className="flex flex-col gap-3 pl-6 text-[13px]">
         {SECTIONS.map((section) => (
           <div key={section.header} className="flex flex-col gap-0.5">
-            <span className="font-medium text-[#1a1a1a] dark:text-[#fcfcfc]">{section.header}</span>
-            <p className="leading-[1.7] text-[#686868] dark:text-[#9b9b9b]">{section.body}</p>
+            <span className="font-medium text-zinc-900 dark:text-zinc-100">{section.header}</span>
+            <p className="text-zinc-500 leading-5 dark:text-zinc-400">{section.body}</p>
           </div>
         ))}
       </Reasoning.Content>
     </Reasoning.Root>
   </div>
 );
-
-const BrainIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.3"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M8 2.5a2 2 0 0 0-2 2 2 2 0 0 0-1.5 3.3A2 2 0 0 0 6 11.5a2 2 0 0 0 4 0 2 2 0 0 0 1.5-3.7A2 2 0 0 0 10 4.5a2 2 0 0 0-2-2Z" />
-    <path d="M8 2.5v11" />
-  </svg>
-);
-
-const ChevronIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    width="14"
-    height="14"
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="m4 10 4-4 4 4" />
-  </svg>
-);
diff --git a/content/docs/primitives/reasoning/demos/streaming.css b/content/docs/primitives/reasoning/demos/streaming.css
new file mode 100644
index 0000000..c21da26
--- /dev/null
+++ b/content/docs/primitives/reasoning/demos/streaming.css
@@ -0,0 +1,19 @@
+/*
+ * `--panel-height` is published only while a transition runs, and released once
+ * the panel settles open. That release is what lets the open panel keep growing
+ * as sections stream in: with the property gone the declaration is invalid at
+ * computed-value time and `height` lands back on `auto`.
+ */
+
+.reasoning-demo [data-reasoning-content] {
+  height: var(--panel-height);
+  overflow: hidden;
+  transition:
+    height 200ms cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 200ms ease-out;
+}
+.reasoning-demo [data-reasoning-content][data-starting-style],
+.reasoning-demo [data-reasoning-content][data-ending-style] {
+  height: 0;
+  opacity: 0;
+}
diff --git a/content/docs/primitives/reasoning/demos/streaming.tsx b/content/docs/primitives/reasoning/demos/streaming.tsx
new file mode 100644
index 0000000..bcfc354
--- /dev/null
+++ b/content/docs/primitives/reasoning/demos/streaming.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import { Reasoning, useReasoning } from "@intentface/chat/reasoning";
+import { Brain, ChevronDown } from "@keyline-icons/react";
+import { useEffect, useRef, useState } from "react";
+import "./streaming.css";
+
+const SECTIONS = [
+  "Check the existing layout, then decide which axis needs centering.",
+  "The parent is already a flex row, so only the cross axis is missing.",
+  "Confirm the element centers both horizontally and vertically.",
+];
+
+/*
+ * The part of Reasoning the hero demo cannot show: what happens while the
+ * model is still thinking.
+ *
+ * `isStreaming` is the only input. The root carries `data-streaming` and
+ * `aria-busy` while it is true, and the moment it flips false the elapsed time
+ * is captured and handed back through `useReasoning().duration` — so the
+ * trigger's label changes without the consumer timing anything.
+ *
+ * The text arrives on a timer here rather than from a model; the primitive
+ * neither knows nor cares where it comes from.
+ */
+export const Streaming = () => {
+  const [streaming, setStreaming] = useState(false);
+  const [shown, setShown] = useState<string[]>([]);
+  const timers = useRef<ReturnType<typeof setTimeout>[]>([]);
+
+  useEffect(() => () => timers.current.forEach(clearTimeout), []);
+
+  const replay = () => {
+    timers.current.forEach(clearTimeout);
+    timers.current = [];
+    setShown([]);
+    setStreaming(true);
+
+    SECTIONS.forEach((section, index) => {
+      timers.current.push(
+        setTimeout(() => setShown((current) => [...current, section]), (index + 1) * 700),
+      );
+    });
+    timers.current.push(setTimeout(() => setStreaming(false), (SECTIONS.length + 1) * 700));
+  };
+
+  return (
+    <div className="reasoning-demo flex w-full max-w-xl flex-col gap-3">
+      <Reasoning.Root isStreaming={streaming} defaultOpen className="flex flex-col gap-1">
+        <TriggerLabel />
+        <Reasoning.Content className="flex flex-col gap-2 pl-6 text-[13px] text-zinc-500 leading-5 dark:text-zinc-400">
+          {shown.length === 0 ? (
+            <span className="text-zinc-400 dark:text-zinc-500">Nothing yet.</span>
+          ) : (
+            shown.map((section) => <p key={section}>{section}</p>)
+          )}
+        </Reasoning.Content>
+      </Reasoning.Root>
+
+      <div className="flex justify-center">
+        <button
+          type="button"
+          onClick={replay}
+          disabled={streaming}
+          className="h-8 cursor-pointer rounded-full bg-white bg-linear-to-b from-white to-[#fdfdfd] px-3 font-medium text-[13px] text-zinc-900 shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)] transition-colors hover:from-[#fafafa] hover:to-[#f6f6f6] focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2 disabled:cursor-default disabled:opacity-40 dark:bg-[#2d2d30] dark:from-[#313134] dark:to-[#2a2a2d] dark:text-zinc-100 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:hover:from-[#38383b] dark:hover:to-[#313134]"
+        >
+          {streaming ? "Thinking…" : "Replay"}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * The trigger ships no copy. `useReasoning` is how the label learns what to
+ * say: `isStreaming` while it runs, then `duration` once the package has
+ * captured it.
+ */
+const TriggerLabel = () => {
+  const { isStreaming, duration } = useReasoning();
+
+  return (
+    <Reasoning.Trigger className="group flex w-fit cursor-pointer items-center gap-2 rounded-full font-medium text-[13px] text-zinc-500 transition-colors hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2 dark:text-zinc-400 dark:hover:text-zinc-100">
+      <Brain className="size-[15px]" />
+      <span className={isStreaming ? "animate-pulse" : undefined}>
+        {isStreaming
+          ? "Thinking…"
+          : duration === undefined
+            ? "Reasoning"
+            : `Thought for ${duration}s`}
+      </span>
+      <ChevronDown className="size-3 transition-transform group-data-closed:rotate-180" />
+    </Reasoning.Trigger>
+  );
+};
diff --git a/content/docs/primitives/shell.mdx b/content/docs/primitives/shell.mdx
index d45c9cb..0514d06 100644
--- a/content/docs/primitives/shell.mdx
+++ b/content/docs/primitives/shell.mdx
@@ -164,7 +164,7 @@ Taking the sidebar out of flow is not a styling preference, and the primitive
 does not work without it.
 
 All three states are one element morphing between three positions: flush while
-expanded, off-canvas while collapsed, floating just inside the edge while the
+expanded, off-canvas while collapsed, floating slightly inside the edge while the
 hotspot holds it out. A sidebar left in flow can only animate its own width. It can never
 float over the content, so the hotspot has nothing to slide across and the state
 has nowhere to exist.
diff --git a/content/docs/primitives/shell/demos/basic.tsx b/content/docs/primitives/shell/demos/basic.tsx
index 267d2f3..c936b7d 100644
--- a/content/docs/primitives/shell/demos/basic.tsx
+++ b/content/docs/primitives/shell/demos/basic.tsx
@@ -1,8 +1,9 @@
 "use client";
 
-import { Nav } from "@intentface/chat/nav";
 import { Shell } from "@intentface/chat/shell";
-import type { ComponentProps } from "react";
+import { ChevronDown, PanelLeft } from "@keyline-icons/react";
+import { Logo } from "./logo";
+import { SidebarNav } from "./sidebar-nav";
 
 /*
  * A shell the way it is meant to be used: a sidebar that collapses, floats out
@@ -23,7 +24,7 @@ import type { ComponentProps } from "react";
 export const Basic = () => (
   <Shell.Root
     defaultOpen
-    className="group/shell relative flex h-128 w-full overflow-hidden rounded-xl border border-[#f0f0f0] bg-[#fafafa] [--shell-sidebar-width:224px] dark:border-[#262626] dark:bg-[#111111]"
+    className="group/shell relative flex h-128 w-full overflow-hidden rounded-xl bg-[#f5f5f6] shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] [--shell-sidebar-width:224px] dark:bg-[#131315] dark:shadow-[0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:after:pointer-events-none dark:after:absolute dark:after:inset-0 dark:after:z-50 dark:after:rounded-[inherit] dark:after:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06)]"
   >
     {/* Not rendering this is how you opt out of hotspot. */}
     <Shell.Hotspot className="absolute inset-y-0 left-0 z-20 hidden w-5 data-[state=collapsed]:block" />
@@ -43,76 +44,43 @@ export const Basic = () => (
         "absolute inset-y-0 left-0 z-10 flex w-(--shell-sidebar-width) min-w-[184px] max-w-[320px] flex-col overflow-hidden pt-2",
         // Always opaque: the content card passes beneath the panel while the two
         // animate, so a transparent expanded state would show it through.
-        "bg-[#fafafa] dark:bg-[#111111]",
-        "border border-transparent transition-[left,top,bottom,padding-top,background-color,border-color,border-radius,box-shadow] duration-150 ease-linear",
+        "bg-[#f5f5f6] dark:bg-[#131315]",
+        "transition-[left,top,bottom,padding-top,background-color,border-radius,box-shadow] duration-150 ease-linear",
         // The card geometry is baked into the whole collapsed state. Off-canvas
         // it is invisible, so the hotspot animates `left` alone — the panel never
         // changes height mid-slide. Only expand/collapse morphs card ↔ flat.
         // The card's own inset supplies the 8px, so the padding goes — and
         // because both transition, the header stays put while the edge moves.
-        "data-[state=collapsed]:-left-(--shell-sidebar-width) data-[state=collapsed]:inset-y-2 data-[state=collapsed]:rounded-xl data-[state=collapsed]:pt-0",
-        "data-[state=collapsed]:bg-white data-[state=collapsed]:not-data-[hotspot]:border-[#f0f0f0]",
-        "dark:data-[state=collapsed]:bg-[#181818] dark:data-[state=collapsed]:not-data-[hotspot]:border-[#262626]",
-        "data-[state=collapsed]:data-[hotspot]:left-2 data-[hotspot]:smooth-shadow-ring-lg",
+        "data-[state=collapsed]:-left-(--shell-sidebar-width) data-[state=collapsed]:inset-y-2 data-[state=collapsed]:rounded-lg data-[state=collapsed]:pt-0",
+        "data-[state=collapsed]:bg-white data-[state=collapsed]:not-data-[hotspot]:shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)]",
+        "dark:data-[state=collapsed]:bg-zinc-900 dark:data-[state=collapsed]:not-data-[hotspot]:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]",
+        // Floated out by the hotspot it lifts to overlay elevation.
+        "data-[state=collapsed]:data-[hotspot]:left-2 data-[hotspot]:shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_12px_32px_-8px_rgb(0_0_0/0.16)]",
+        "dark:data-[hotspot]:shadow-[inset_0_1px_0_rgb(255_255_255/0.06),inset_0_0_0_1px_rgb(255_255_255/0.07),0_0_0_1px_rgb(0_0_0/0.16),0_12px_32px_-8px_rgb(0_0_0/0.4)]",
         "motion-reduce:transition-none",
       ].join(" ")}
     >
-      {/* Same columns as a nav row: pl-4 puts the badge where a row's icon
-          sits (Nav px-2 + row px-2), the badge is icon-sized, and gap-2 lands
-          the title where a row's label starts. */}
-      <div className="flex h-11 shrink-0 items-center gap-2 pr-2 pl-4">
-        <span className="grid size-4 shrink-0 place-items-center rounded-[4px] bg-[#1a1a1a] font-semibold text-[9px] text-white dark:bg-[#fcfcfc] dark:text-[#111111]">
-          ui
+      {/* Same columns as a nav row: the 20px logo tile centres on a row's 16px
+          icon (Nav px-2 + row px-2, less 2px), and gap-1.5 lands the title
+          where a row's label starts. */}
+      <div className="flex h-11 shrink-0 items-center gap-1.5 pr-2 pl-3.5">
+        <span className="grid size-5 shrink-0 place-items-center rounded-[5px] bg-[#0169cc] bg-linear-to-b from-[oklch(57.2%_0.166_253.2)] to-[oklch(52.9%_0.173_255)] shadow-[inset_0_1px_0_rgb(255_255_255/0.28),inset_0_-2px_3px_oklch(30%_0.12_258/0.35),0_0_0_1px_oklch(46.5%_0.146_254.8),0_1px_2px_rgb(1_105_204/0.35)]">
+          <Logo />
         </span>
-        <span className="min-w-0 flex-1 truncate font-medium text-[#1a1a1a] text-sm dark:text-[#fcfcfc]">
+        <span className="min-w-0 flex-1 truncate font-semibold text-[13px] text-zinc-900 tracking-[-0.01em] dark:text-zinc-100">
           @intentface/chat
         </span>
-        <Shell.Trigger aria-label="Collapse sidebar" className={iconButtonClass}>
-          <PanelLeftIcon />
+        <Shell.Trigger
+          aria-label="Collapse sidebar"
+          className="grid size-7 shrink-0 cursor-pointer select-none place-items-center rounded-full text-zinc-400 transition-colors hover:bg-zinc-950/5 hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2 dark:text-zinc-500 dark:hover:bg-white/8 dark:hover:text-zinc-100"
+        >
+          <PanelLeft className="size-[15px]" />
         </Shell.Trigger>
       </div>
 
       {/* The nav is its own primitive — see the Nav page for the tree, the
           rail and the keyboard model. Here it is just what a sidebar holds. */}
-      <Nav.Root
-        aria-label="Main"
-        guide="none"
-        defaultExpanded={["workspace"]}
-        render={<nav />}
-        className="flex min-h-0 flex-1 flex-col gap-0.5 overflow-auto px-2 pb-2"
-      >
-        <Nav.List className="flex flex-col gap-0.5">
-          <Nav.Item value="overview" active className={rowClass}>
-            <Nav.Icon>
-              <HomeIcon />
-            </Nav.Icon>
-            <Nav.Label className="min-w-0 truncate">Overview</Nav.Label>
-          </Nav.Item>
-          <Nav.Item value="inbox" className={rowClass}>
-            <Nav.Icon>
-              <InboxIcon />
-            </Nav.Icon>
-            <Nav.Label className="min-w-0 truncate">Inbox</Nav.Label>
-          </Nav.Item>
-
-          <Nav.Group value="workspace" className="mt-3">
-            <Nav.Trigger className={rowClass}>
-              <Nav.Label className="min-w-0 truncate">Workspace</Nav.Label>
-              <ChevronIcon className="ml-auto !size-3 text-[#949494] transition-transform group-data-[closed]/row:-rotate-90" />
-            </Nav.Trigger>
-            <Nav.List className="flex flex-col gap-0.5">
-              {["Initiatives", "Projects", "Views", "Loops"].map((label) => (
-                <Nav.Item key={label} value={label.toLowerCase()} className={rowClass}>
-                  <Nav.Icon>
-                    <BoxIcon />
-                  </Nav.Icon>
-                  <Nav.Label className="min-w-0 truncate">{label}</Nav.Label>
-                </Nav.Item>
-              ))}
-            </Nav.List>
-          </Nav.Group>
-        </Nav.List>
-      </Nav.Root>
+      <SidebarNav />
     </Shell.Sidebar>
 
     {/* A sibling of the sidebar, not a child: the sidebar clips its overflow
@@ -128,12 +96,12 @@ export const Basic = () => (
         // Masked rather than gradient-filled, so the hairline keeps a single
         // background-color to transition while both ends fall away. The stops
         // are pixels, not percentages: the fade has to land fully transparent
-        // 20px in — the card's 8px inset plus its 12px radius, where the corner
+        // 16px in — the card's 8px inset plus its 8px radius, where the corner
         // arc leaves the straight edge — and that distance is fixed, not a
         // share of the height.
-        "before:[mask-image:linear-gradient(to_bottom,transparent_20px,black_76px,black_calc(100%-76px),transparent_calc(100%-20px))]",
-        "hover:before:bg-[#1a1a1a] data-[resizing]:before:bg-[#1a1a1a] dark:hover:before:bg-[#fcfcfc] dark:data-[resizing]:before:bg-[#fcfcfc]",
-        "focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-[#1a1a1a] dark:focus-visible:outline-[#fcfcfc]",
+        "before:[mask-image:linear-gradient(to_bottom,transparent_16px,black_72px,black_calc(100%-72px),transparent_calc(100%-16px))]",
+        "hover:before:bg-[#0169cc] data-[resizing]:before:bg-[#0169cc] dark:hover:before:bg-[#4c9bea] dark:data-[resizing]:before:bg-[#4c9bea]",
+        "focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-[#0169cc]/60",
         "data-[state=collapsed]:hidden",
       ].join(" ")}
     />
@@ -141,24 +109,24 @@ export const Basic = () => (
     {/* The gutter only exists while the sidebar does: collapsed, the card runs
         edge to edge. */}
     <Shell.Viewport className="flex min-w-0 flex-1 flex-col p-2">
-      <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border border-[#f0f0f0] bg-white dark:border-[#262626] dark:bg-[#181818]">
-        <div className="flex h-11 shrink-0 items-center gap-1 border-[#f0f0f0] border-b px-3 dark:border-[#262626]">
-          <span className="px-1 text-[#949494] text-sm dark:text-[#6f6f6f]">Docs</span>
-          <ChevronIcon className="size-3 -rotate-90 text-[#949494] dark:text-[#6f6f6f]" />
-          <span className="px-1 font-medium text-[#1a1a1a] text-sm dark:text-[#fcfcfc]">
+      <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg bg-white shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] dark:bg-zinc-900 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]">
+        <div className="flex h-11 shrink-0 items-center gap-1 border-zinc-950/6 border-b px-3 dark:border-white/6">
+          <span className="px-1 text-[13px] text-zinc-500 dark:text-zinc-400">Docs</span>
+          <ChevronDown className="size-3 -rotate-90 text-zinc-400 dark:text-zinc-500" />
+          <span className="px-1 font-medium text-[13px] text-zinc-900 dark:text-zinc-100">
             Overview
           </span>
         </div>
         <article className="min-h-0 flex-1 overflow-auto px-8 py-8">
-          <h1 className="mb-6 font-semibold text-[#1a1a1a] text-2xl tracking-tight dark:text-[#fcfcfc]">
+          <h1 className="mb-5 font-semibold text-base text-zinc-900 tracking-tight dark:text-zinc-100">
             Overview
           </h1>
-          <p className="mb-4 text-[#686868] text-sm leading-[1.7] dark:text-[#9b9b9b]">
+          <p className="mb-4 text-sm text-zinc-700 leading-[1.7] dark:text-zinc-300">
             Collapse the sidebar with the button in its header, then rest the pointer against the
             left edge to float it back out as a card. Drag the divider to resize it, or nudge it
             with the arrow keys once the handle has focus.
           </p>
-          <p className="text-[#686868] text-sm leading-[1.7] dark:text-[#9b9b9b]">
+          <p className="text-sm text-zinc-700 leading-[1.7] dark:text-zinc-300">
             The width and the range it may be dragged through are this stylesheet&apos;s; the
             primitive only measures and reports back.
           </p>
@@ -167,90 +135,3 @@ export const Basic = () => (
     </Shell.Viewport>
   </Shell.Root>
 );
-
-const iconButtonClass =
-  "grid size-7 shrink-0 cursor-pointer select-none place-items-center rounded-md text-[#686868] transition-colors hover:bg-[#f4f4f4] hover:text-[#1a1a1a] focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-[#1a1a1a] dark:text-[#9b9b9b] dark:hover:bg-[#232323] dark:hover:text-[#fcfcfc] dark:focus-visible:outline-[#fcfcfc]";
-
-// An explicit height is load-bearing: 14px text has a fractional line-height,
-// so padded rows land on a fraction of a pixel and nothing lines up.
-const rowClass = [
-  "group/row flex h-8 shrink-0 cursor-pointer select-none items-center gap-2 rounded-md px-2 text-sm",
-  "text-[#686868] transition-colors hover:bg-[#f4f4f4] hover:text-[#1a1a1a] dark:text-[#9b9b9b] dark:hover:bg-[#232323] dark:hover:text-[#fcfcfc]",
-  "focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-[#1a1a1a] dark:focus-visible:outline-[#fcfcfc]",
-  "data-[active]:bg-[#ececec] data-[active]:text-[#1a1a1a] dark:data-[active]:bg-[#2d2d2d] dark:data-[active]:text-[#fcfcfc]",
-  "[&_svg]:size-4 [&_svg]:shrink-0",
-].join(" ");
-
-const PanelLeftIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.3"
-    strokeLinejoin="round"
-    className="size-4"
-    aria-hidden="true"
-    {...props}
-  >
-    <rect x="2" y="3" width="12" height="10" rx="2" />
-    <path d="M6.5 3v10" />
-  </svg>
-);
-
-const HomeIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.3"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M2.5 6.5 8 2.5l5.5 4v6a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1v-6Z" strokeLinejoin="round" />
-  </svg>
-);
-
-const InboxIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.3"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M2.5 8.5h3l1 2h3l1-2h3v3a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1v-3Z" strokeLinejoin="round" />
-    <path
-      d="M2.5 8.5l1.6-4.2a1 1 0 0 1 .94-.65h5.92a1 1 0 0 1 .94.65l1.6 4.2"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-const BoxIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.3"
-    aria-hidden="true"
-    {...props}
-  >
-    <rect x="2.5" y="2.5" width="11" height="11" rx="2.5" strokeLinejoin="round" />
-  </svg>
-);
-
-const ChevronIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="m4 6.5 4 4 4-4" />
-  </svg>
-);
diff --git a/content/docs/primitives/shell/demos/external.tsx b/content/docs/primitives/shell/demos/external.tsx
index 118397c..eb24987 100644
--- a/content/docs/primitives/shell/demos/external.tsx
+++ b/content/docs/primitives/shell/demos/external.tsx
@@ -29,22 +29,23 @@ export const External = () => {
       <Shell.Root
         store={store}
         defaultOpen
-        className="group/shell relative flex h-96 w-full overflow-hidden rounded-xl border border-[#f0f0f0] bg-[#fafafa] [--shell-sidebar-width:200px] dark:border-[#262626] dark:bg-[#111111]"
+        className="group/shell relative flex h-96 w-full overflow-hidden rounded-xl bg-[#f5f5f6] shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] [--shell-sidebar-width:200px] dark:bg-[#131315] dark:shadow-[0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:after:pointer-events-none dark:after:absolute dark:after:inset-0 dark:after:z-50 dark:after:rounded-[inherit] dark:after:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06)]"
       >
         <div
           data-slot="shell-gutter"
           className="w-(--shell-sidebar-width) shrink-0 transition-[width] duration-150 ease-linear group-data-[state=collapsed]/shell:w-0"
         />
 
-        <Shell.Sidebar className="absolute inset-y-0 left-0 z-10 flex w-(--shell-sidebar-width) flex-col overflow-hidden bg-[#fafafa] transition-[left] duration-150 ease-linear data-[state=collapsed]:-left-(--shell-sidebar-width) dark:bg-[#111111]">
-          <div className="flex h-11 shrink-0 items-center px-4 font-medium text-[#1a1a1a] text-sm dark:text-[#fcfcfc]">
+        <Shell.Sidebar className="absolute inset-y-0 left-0 z-10 flex w-(--shell-sidebar-width) flex-col overflow-hidden bg-[#f5f5f6] transition-[left] duration-150 ease-linear data-[state=collapsed]:-left-(--shell-sidebar-width) dark:bg-[#131315]">
+          <div className="flex h-11 shrink-0 items-center px-4 font-medium text-[13px] text-zinc-900 dark:text-zinc-100">
             Workspace
           </div>
           <div className="flex flex-col gap-0.5 px-2">
+            {/* The first row stands in for the current page. */}
             {["Overview", "Inbox", "Projects"].map((label) => (
               <div
                 key={label}
-                className="flex h-8 items-center rounded-md px-2 text-[#686868] text-sm dark:text-[#9b9b9b]"
+                className="flex h-[30px] items-center rounded-md px-2 font-medium text-[13px] text-zinc-700 transition-colors hover:bg-zinc-950/5 hover:text-zinc-900 first:bg-white first:bg-linear-to-b first:from-white first:to-[#fdfdfd] first:text-zinc-900 first:shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)] dark:text-zinc-300 dark:hover:bg-white/8 dark:hover:text-zinc-100 dark:first:bg-[#2d2d30] dark:first:from-[#29292c] dark:first:to-[#242427] dark:first:text-zinc-100 dark:first:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]"
               >
                 {label}
               </div>
@@ -53,7 +54,7 @@ export const External = () => {
         </Shell.Sidebar>
 
         <Shell.Viewport className="flex min-w-0 flex-1 flex-col p-2">
-          <div className="flex min-h-0 flex-1 items-center justify-center rounded-xl border border-[#f0f0f0] bg-white text-[#686868] text-sm dark:border-[#262626] dark:bg-[#181818] dark:text-[#9b9b9b]">
+          <div className="flex min-h-0 flex-1 items-center justify-center rounded-lg bg-white shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] text-[13px] text-zinc-500 dark:bg-zinc-900 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:text-zinc-400">
             Content
           </div>
         </Shell.Viewport>
@@ -78,7 +79,7 @@ const ExternalTrigger = ({ store }: { store: ShellStore }) => {
       <button
         type="button"
         onClick={() => store.getSnapshot().toggle()}
-        className="flex h-8 cursor-pointer items-center rounded-full border border-[#e4e4e4] bg-white px-4 font-medium text-[#1a1a1a] text-sm transition-colors hover:bg-[#f4f4f4] focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-[#1a1a1a] dark:border-[#2d2d2d] dark:bg-[#181818] dark:text-[#fcfcfc] dark:hover:bg-[#232323] dark:focus-visible:outline-[#fcfcfc]"
+        className="flex h-8 cursor-pointer items-center rounded-full bg-white bg-linear-to-b from-white to-[#fdfdfd] shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)] px-4 font-medium text-[13px] text-zinc-900 hover:from-[#fafafa] hover:to-[#f6f6f6] focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2 dark:bg-[#2d2d30] dark:from-[#313134] dark:to-[#2a2a2d] dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:hover:from-[#38383b] dark:hover:to-[#313134] dark:text-zinc-100"
       >
         {open ? "Collapse" : "Expand"}
       </button>
diff --git a/content/docs/primitives/shell/demos/grip.tsx b/content/docs/primitives/shell/demos/grip.tsx
index 193abab..c61d189 100644
--- a/content/docs/primitives/shell/demos/grip.tsx
+++ b/content/docs/primitives/shell/demos/grip.tsx
@@ -21,19 +21,20 @@ import { Shell } from "@intentface/chat/shell";
 export const Grip = () => (
   <Shell.Root
     defaultOpen
-    className="group/shell relative flex h-80 w-full overflow-hidden rounded-xl border border-[#f0f0f0] bg-[#fafafa] [--shell-sidebar-width:220px] dark:border-[#262626] dark:bg-[#111111]"
+    className="group/shell relative flex h-80 w-full overflow-hidden rounded-xl bg-[#f5f5f6] shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] [--shell-sidebar-width:220px] dark:bg-[#131315] dark:shadow-[0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:after:pointer-events-none dark:after:absolute dark:after:inset-0 dark:after:z-50 dark:after:rounded-[inherit] dark:after:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06)]"
   >
     <div data-slot="shell-gutter" className="w-(--shell-sidebar-width) shrink-0" />
 
-    <Shell.Sidebar className="absolute inset-y-0 left-0 z-10 flex w-(--shell-sidebar-width) min-w-[180px] max-w-[300px] flex-col bg-[#fafafa] dark:bg-[#111111]">
-      <div className="flex h-11 shrink-0 items-center px-4 font-medium text-[#1a1a1a] text-sm dark:text-[#fcfcfc]">
+    <Shell.Sidebar className="absolute inset-y-0 left-0 z-10 flex w-(--shell-sidebar-width) min-w-[180px] max-w-[300px] flex-col bg-[#f5f5f6] dark:bg-[#131315]">
+      <div className="flex h-11 shrink-0 items-center px-4 font-medium text-[13px] text-zinc-900 dark:text-zinc-100">
         Workspace
       </div>
       <div className="flex flex-col gap-0.5 px-2">
+        {/* The first row stands in for the current page. */}
         {["Overview", "Inbox", "Projects"].map((label) => (
           <div
             key={label}
-            className="flex h-8 items-center rounded-md px-2 text-[#686868] text-sm dark:text-[#9b9b9b]"
+            className="flex h-[30px] items-center rounded-md px-2 font-medium text-[13px] text-zinc-700 transition-colors hover:bg-zinc-950/5 hover:text-zinc-900 first:bg-white first:bg-linear-to-b first:from-white first:to-[#fdfdfd] first:text-zinc-900 first:shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)] dark:text-zinc-300 dark:hover:bg-white/8 dark:hover:text-zinc-100 dark:first:bg-[#2d2d30] dark:first:from-[#29292c] dark:first:to-[#242427] dark:first:text-zinc-100 dark:first:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]"
           >
             {label}
           </div>
@@ -52,14 +53,14 @@ export const Grip = () => (
           // fingertip, while the 4px pill drawn inside it stays thin — which
           // is the point of separating the target from the affordance.
           "group/grip -right-2.5 absolute inset-y-0 w-5 cursor-col-resize select-none",
-          "focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-[#1a1a1a] dark:focus-visible:outline-[#fcfcfc]",
+          "focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-[#0169cc]/60",
         ].join(" ")}
       >
         <span
           aria-hidden="true"
           className={[
             "pointer-events-none absolute left-1/2 h-9 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full",
-            "bg-[#b0b0b0] dark:bg-[#5c5c5c]",
+            "bg-zinc-400 dark:bg-zinc-600",
             // Clamped by half its own height at each end, so it never hangs
             // out of the track. Centred at rest, so a keyboard user focusing
             // the grip finds it somewhere sensible rather than at the top.
@@ -74,7 +75,7 @@ export const Grip = () => (
     </Shell.Sidebar>
 
     <Shell.Viewport className="flex min-w-0 flex-1 flex-col p-2">
-      <div className="flex min-h-0 flex-1 items-center justify-center rounded-xl border border-[#f0f0f0] bg-white px-4 text-center text-[#686868] text-sm dark:border-[#262626] dark:bg-[#181818] dark:text-[#9b9b9b]">
+      <div className="flex min-h-0 flex-1 items-center justify-center rounded-lg bg-white shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] px-4 text-center text-[13px] text-zinc-500 dark:bg-zinc-900 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:text-zinc-400">
         Move the pointer onto the sidebar's right edge. The handle appears and follows it.
       </div>
     </Shell.Viewport>
diff --git a/content/docs/primitives/shell/demos/hotspot.tsx b/content/docs/primitives/shell/demos/hotspot.tsx
index 7db6e27..38e4a48 100644
--- a/content/docs/primitives/shell/demos/hotspot.tsx
+++ b/content/docs/primitives/shell/demos/hotspot.tsx
@@ -26,7 +26,7 @@ export const HotspotDemo = () => {
     <div className="flex w-full flex-col gap-3">
       <Shell.Root
         store={store}
-        className="group/shell relative flex h-80 w-full overflow-hidden rounded-xl border border-[#f0f0f0] bg-[#fafafa] [--shell-sidebar-width:200px] dark:border-[#262626] dark:bg-[#111111]"
+        className="group/shell relative flex h-80 w-full overflow-hidden rounded-xl bg-[#f5f5f6] shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] [--shell-sidebar-width:200px] dark:bg-[#131315] dark:shadow-[0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:after:pointer-events-none dark:after:absolute dark:after:inset-0 dark:after:z-50 dark:after:rounded-[inherit] dark:after:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06)]"
       >
         {/* Invisible in a real app. Tinted here so there is something to aim at,
         since the whole point is a hit area you cannot otherwise see.
@@ -39,7 +39,7 @@ export const HotspotDemo = () => {
         Not rendering this part at all is how you opt out of hotspot. */}
         <Shell.Hotspot
           className={[
-            "absolute inset-y-2 left-2 z-0 w-7 rounded-xl border border-[#c9d8f0] border-dashed bg-[#eaf1fb] dark:border-[#2b3a52] dark:bg-[#16202e]",
+            "absolute inset-y-2 left-2 z-0 w-7 rounded-lg border border-[#0169cc]/60 border-dashed bg-[#0169cc]/5 dark:border-[#4c9bea]/50 dark:bg-[#4c9bea]/10",
             // Faded rather than toggled with `display`, so it arrives and leaves
             // with the sidebar instead of popping. `pointer-events` still switches
             // outright: a transparent strip that swallowed clicks would be worse
@@ -59,27 +59,30 @@ export const HotspotDemo = () => {
             "absolute inset-y-0 left-0 z-10 flex w-(--shell-sidebar-width) flex-col overflow-hidden pt-2",
             // Always opaque: the content card passes beneath the panel while the
             // two animate, so a transparent expanded state would show it through.
-            "bg-[#fafafa] dark:bg-[#111111]",
-            "border border-transparent transition-[left,top,bottom,padding-top,background-color,border-color,border-radius,box-shadow] duration-150 ease-linear",
+            "bg-[#f5f5f6] dark:bg-[#131315]",
+            "transition-[left,top,bottom,padding-top,background-color,border-radius,box-shadow] duration-150 ease-linear",
             // The collapsed state carries the card. The hotspoted state moves it.
-            "data-[state=collapsed]:-left-(--shell-sidebar-width) data-[state=collapsed]:inset-y-2 data-[state=collapsed]:rounded-xl data-[state=collapsed]:pt-0",
-            "data-[state=collapsed]:bg-white data-[state=collapsed]:not-data-[hotspot]:border-[#f0f0f0]",
-            "dark:data-[state=collapsed]:bg-[#181818] dark:data-[state=collapsed]:not-data-[hotspot]:border-[#262626]",
-            "data-[state=collapsed]:data-[hotspot]:left-2 data-[hotspot]:shadow-[0_6px_20px_rgba(0,0,0,0.07)] dark:data-[hotspot]:shadow-[0_6px_20px_rgba(0,0,0,0.4)]",
+            "data-[state=collapsed]:-left-(--shell-sidebar-width) data-[state=collapsed]:inset-y-2 data-[state=collapsed]:rounded-lg data-[state=collapsed]:pt-0",
+            "data-[state=collapsed]:bg-white data-[state=collapsed]:not-data-[hotspot]:shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)]",
+            "dark:data-[state=collapsed]:bg-zinc-900 dark:data-[state=collapsed]:not-data-[hotspot]:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]",
+            // Floated out by the hotspot it lifts to overlay elevation.
+            "data-[state=collapsed]:data-[hotspot]:left-2 data-[hotspot]:shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_12px_32px_-8px_rgb(0_0_0/0.16)]",
+            "dark:data-[hotspot]:shadow-[inset_0_1px_0_rgb(255_255_255/0.06),inset_0_0_0_1px_rgb(255_255_255/0.07),0_0_0_1px_rgb(0_0_0/0.16),0_12px_32px_-8px_rgb(0_0_0/0.4)]",
           ].join(" ")}
         >
           <div className="flex h-11 shrink-0 items-center justify-between gap-2 px-4">
-            <span className="font-medium text-[#1a1a1a] text-sm dark:text-[#fcfcfc]">
+            <span className="font-medium text-[13px] text-zinc-900 dark:text-zinc-100">
               Workspace
             </span>
             <TriggerLabel />
           </div>
 
           <div className="flex flex-col gap-0.5 px-2">
+            {/* The first row stands in for the current page. */}
             {["Overview", "Inbox", "Projects"].map((label) => (
               <div
                 key={label}
-                className="flex h-8 items-center rounded-md px-2 text-[#686868] text-sm dark:text-[#9b9b9b]"
+                className="flex h-[30px] items-center rounded-md px-2 font-medium text-[13px] text-zinc-700 transition-colors hover:bg-zinc-950/5 hover:text-zinc-900 first:bg-white first:bg-linear-to-b first:from-white first:to-[#fdfdfd] first:text-zinc-900 first:shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)] dark:text-zinc-300 dark:hover:bg-white/8 dark:hover:text-zinc-100 dark:first:bg-[#2d2d30] dark:first:from-[#29292c] dark:first:to-[#242427] dark:first:text-zinc-100 dark:first:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]"
               >
                 {label}
               </div>
@@ -88,10 +91,10 @@ export const HotspotDemo = () => {
         </Shell.Sidebar>
 
         <Shell.Viewport className="flex min-w-0 flex-1 flex-col p-2">
-          <div className="flex min-h-0 flex-1 items-center justify-center rounded-xl border border-[#f0f0f0] bg-white px-4 dark:border-[#262626] dark:bg-[#181818]">
+          <div className="flex min-h-0 flex-1 items-center justify-center rounded-lg bg-white shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] px-4 dark:bg-zinc-900 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]">
             {/* Capped: a line of prose spanning the whole viewport is unreadable,
             and this one runs behind the strip at the left edge. */}
-            <p className="max-w-56 text-balance text-center text-[#686868] text-sm dark:text-[#9b9b9b]">
+            <p className="max-w-56 text-balance text-center text-[13px] text-zinc-500 dark:text-zinc-400">
               Rest the pointer on the strip at the left edge.
             </p>
           </div>
@@ -112,7 +115,7 @@ const ExternalTrigger = ({ store }: { store: ShellStore }) => {
       <button
         type="button"
         onClick={() => store.getSnapshot().toggle()}
-        className="flex h-8 cursor-pointer items-center rounded-full border border-[#e4e4e4] bg-white px-4 font-medium text-[#1a1a1a] text-sm transition-colors hover:bg-[#f4f4f4] focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-[#1a1a1a] dark:border-[#2d2d2d] dark:bg-[#181818] dark:text-[#fcfcfc] dark:hover:bg-[#232323] dark:focus-visible:outline-[#fcfcfc]"
+        className="flex h-8 cursor-pointer items-center rounded-full bg-white bg-linear-to-b from-white to-[#fdfdfd] shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)] px-4 font-medium text-[13px] text-zinc-900 hover:from-[#fafafa] hover:to-[#f6f6f6] focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2 dark:bg-[#2d2d30] dark:from-[#313134] dark:to-[#2a2a2d] dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:hover:from-[#38383b] dark:hover:to-[#313134] dark:text-zinc-100"
       >
         {open ? "Collapse" : "Expand"}
       </button>
@@ -132,7 +135,7 @@ const TriggerLabel = () => {
   return (
     <Shell.Trigger
       aria-label={open ? "Collapse sidebar" : "Pin sidebar open"}
-      className="cursor-pointer rounded text-[#686868] text-xs transition-colors hover:text-[#1a1a1a] focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-[#1a1a1a] dark:text-[#9b9b9b] dark:hover:text-[#fcfcfc] dark:focus-visible:outline-[#fcfcfc]"
+      className="-mr-2 flex h-6 cursor-pointer items-center rounded-full px-2 font-medium text-xs text-zinc-500 transition-colors hover:bg-zinc-950/5 hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2 dark:text-zinc-400 dark:hover:bg-white/8 dark:hover:text-zinc-100"
     >
       {open ? "Hide" : "Pin"}
     </Shell.Trigger>
diff --git a/content/docs/primitives/shell/demos/logo.tsx b/content/docs/primitives/shell/demos/logo.tsx
new file mode 100644
index 0000000..d9861ac
--- /dev/null
+++ b/content/docs/primitives/shell/demos/logo.tsx
@@ -0,0 +1,8 @@
+export const Logo = () => (
+  <svg aria-hidden="true" viewBox="0 0 128 128" className="size-[11px]">
+    <path
+      d="M67.066 0.01C67.619 0.011 68.066 0.46 68.065 1.012L67.985 45.538C67.983 46.562 69.339 46.926 69.851 46.039L92.108 7.48C92.384 7.001 92.996 6.837 93.474 7.114L98.549 10.044C99.028 10.32 99.191 10.932 98.915 11.41L76.622 50.033C76.11 50.919 77.102 51.91 77.988 51.399L116.597 29.103C117.075 28.826 117.687 28.99 117.963 29.469L120.893 34.545C121.169 35.023 121.005 35.635 120.527 35.911L81.915 58.21C81.028 58.721 81.391 60.075 82.415 60.075H127C127.552 60.075 128 60.523 128 61.075V66.938C128 67.49 127.552 67.938 127 67.938H82.418C81.395 67.938 81.032 69.292 81.918 69.804L120.527 92.1C121.005 92.376 121.169 92.988 120.893 93.466L117.963 98.542C117.687 99.021 117.075 99.185 116.597 98.908L77.999 76.619C77.113 76.107 76.121 77.099 76.633 77.985L98.914 116.585C99.19 117.063 99.026 117.675 98.548 117.951L93.473 120.882C92.995 121.158 92.383 120.994 92.107 120.516L69.785 81.845C69.274 80.959 67.921 81.32 67.919 82.343L67.839 126.998C67.838 127.551 67.39 127.997 66.838 127.996L61.06 127.986C60.509 127.985 60.062 127.538 60.062 126.986V80.519L60.065 78.719C60.065 78.719 60.064 78.718 60.064 78.719C60.063 78.72 60.062 78.719 60.062 78.719V69.145C60.062 68.593 59.614 68.145 59.062 68.145H1C0.448 68.145 0 67.697 0 67.145V61.075C0 60.523 0.448 60.075 1 60.075H59.062C59.615 60.075 60.062 59.627 60.062 59.075V49.332C60.062 49.316 60.083 49.311 60.09 49.324C60.098 49.337 60.118 49.332 60.118 49.317L60.205 0.998C60.206 0.446 60.654 -0.001 61.206 1.243e-05L67.066 0.01Z"
+      fill="#fff"
+    />
+  </svg>
+);
diff --git a/content/docs/primitives/shell/demos/range.tsx b/content/docs/primitives/shell/demos/range.tsx
index 830df80..fe53950 100644
--- a/content/docs/primitives/shell/demos/range.tsx
+++ b/content/docs/primitives/shell/demos/range.tsx
@@ -15,12 +15,12 @@ import { Shell, useShell } from "@intentface/chat/shell";
 export const Range = () => (
   <Shell.Root
     defaultOpen
-    className="group/shell relative flex h-80 w-full overflow-hidden rounded-xl border border-[#f0f0f0] bg-[#fafafa] [--shell-sidebar-width:200px] dark:border-[#262626] dark:bg-[#111111]"
+    className="group/shell relative flex h-80 w-full overflow-hidden rounded-xl bg-[#f5f5f6] shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] [--shell-sidebar-width:200px] dark:bg-[#131315] dark:shadow-[0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:after:pointer-events-none dark:after:absolute dark:after:inset-0 dark:after:z-50 dark:after:rounded-[inherit] dark:after:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06)]"
   >
     <div data-slot="shell-gutter" className="w-(--shell-sidebar-width) shrink-0" />
 
-    <Shell.Sidebar className="absolute inset-y-0 left-0 z-10 flex w-(--shell-sidebar-width) min-w-[160px] max-w-[260px] flex-col bg-[#fafafa] dark:bg-[#111111]">
-      <div className="flex h-11 shrink-0 items-center px-4 font-medium text-[#1a1a1a] text-sm dark:text-[#fcfcfc]">
+    <Shell.Sidebar className="absolute inset-y-0 left-0 z-10 flex w-(--shell-sidebar-width) min-w-[160px] max-w-[260px] flex-col bg-[#f5f5f6] dark:bg-[#131315]">
+      <div className="flex h-11 shrink-0 items-center px-4 font-medium text-[13px] text-zinc-900 dark:text-zinc-100">
         Drag the divider
       </div>
 
@@ -30,12 +30,12 @@ export const Range = () => (
           while the divider stays thin. */}
       <Shell.Grip
         aria-label="Resize sidebar"
-        className="-right-[3px] absolute inset-y-0 w-1.5 cursor-col-resize select-none before:absolute before:inset-y-0 before:left-1/2 before:w-px before:-translate-x-1/2 before:bg-[#e4e4e4] before:transition-colors hover:before:bg-[#1a1a1a] data-[resizing]:before:bg-[#1a1a1a] dark:before:bg-[#2d2d2d] dark:hover:before:bg-[#fcfcfc] dark:data-[resizing]:before:bg-[#fcfcfc]"
+        className="-right-[3px] absolute inset-y-0 w-1.5 cursor-col-resize select-none before:absolute before:inset-y-0 before:left-1/2 before:w-px before:-translate-x-1/2 before:bg-zinc-950/10 before:transition-colors hover:before:bg-[#0169cc] data-[resizing]:before:bg-[#0169cc] focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 dark:before:bg-white/10 dark:hover:before:bg-[#4c9bea] dark:data-[resizing]:before:bg-[#4c9bea]"
       />
     </Shell.Sidebar>
 
     <Shell.Viewport className="flex min-w-0 flex-1 flex-col p-2">
-      <div className="flex min-h-0 flex-1 items-center justify-center rounded-xl border border-[#f0f0f0] bg-white px-4 text-center text-[#686868] text-sm dark:border-[#262626] dark:bg-[#181818] dark:text-[#9b9b9b]">
+      <div className="flex min-h-0 flex-1 items-center justify-center rounded-lg bg-white shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] px-4 text-center text-[13px] text-zinc-500 dark:bg-zinc-900 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:text-zinc-400">
         The sidebar stops at 160px and 260px. The browser clamps it, not the primitive.
       </div>
     </Shell.Viewport>
@@ -51,7 +51,7 @@ const WidthReadout = () => {
   const width = useShell((shell) => shell.width);
 
   return (
-    <div className="px-4 text-[#949494] text-sm tabular-nums dark:text-[#6f6f6f]">
+    <div className="px-4 font-mono text-xs text-zinc-400 tabular-nums dark:text-zinc-500">
       {width === null ? "measuring…" : `${Math.round(width)}px`}
     </div>
   );
diff --git a/content/docs/primitives/shell/demos/sidebar-nav.tsx b/content/docs/primitives/shell/demos/sidebar-nav.tsx
new file mode 100644
index 0000000..6e83803
--- /dev/null
+++ b/content/docs/primitives/shell/demos/sidebar-nav.tsx
@@ -0,0 +1,57 @@
+import { Nav } from "@intentface/chat/nav";
+import { ChevronDown, Home, Inbox, Package } from "@keyline-icons/react";
+
+export const SidebarNav = () => (
+  <Nav.Root
+    aria-label="Main"
+    guide="none"
+    defaultExpanded={["workspace"]}
+    render={<nav />}
+    className="flex min-h-0 flex-1 flex-col gap-0.5 overflow-auto px-2 pb-2"
+  >
+    <Nav.List className="flex flex-col gap-0.5">
+      <Nav.Item value="overview" active className={rowClass}>
+        <Nav.Icon>
+          <Home className="size-4" />
+        </Nav.Icon>
+        <Nav.Label className="min-w-0 truncate">Overview</Nav.Label>
+      </Nav.Item>
+      <Nav.Item value="inbox" className={rowClass}>
+        <Nav.Icon>
+          <Inbox className="size-4" />
+        </Nav.Icon>
+        <Nav.Label className="min-w-0 truncate">Inbox</Nav.Label>
+      </Nav.Item>
+
+      <Nav.Group value="workspace" className="mt-3">
+        <Nav.Trigger className={rowClass}>
+          <Nav.Label className="min-w-0 truncate">Workspace</Nav.Label>
+          <ChevronDown className="ml-auto !size-3 text-zinc-400 transition-transform group-data-[closed]/row:-rotate-90 dark:text-zinc-500" />
+        </Nav.Trigger>
+        <Nav.List className="flex flex-col gap-0.5">
+          {["Initiatives", "Projects", "Views", "Loops"].map((label) => (
+            <Nav.Item key={label} value={label.toLowerCase()} className={rowClass}>
+              <Nav.Icon>
+                <Package className="size-4" />
+              </Nav.Icon>
+              <Nav.Label className="min-w-0 truncate">{label}</Nav.Label>
+            </Nav.Item>
+          ))}
+        </Nav.List>
+      </Nav.Group>
+    </Nav.List>
+  </Nav.Root>
+);
+
+// An explicit height is load-bearing: 13px text has a fractional line-height,
+// so padded rows land on a fraction of a pixel and nothing lines up.
+const rowClass = [
+  "group/row flex h-[30px] shrink-0 cursor-pointer select-none items-center gap-2 rounded-md px-2 font-medium text-[13px]",
+  "text-zinc-700 transition-colors hover:bg-zinc-950/5 hover:text-zinc-900 dark:text-zinc-300 dark:hover:bg-white/8 dark:hover:text-zinc-100",
+  // Inset ring: the nav scrolls, so an outset one would clip at its edges.
+  "focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-[#0169cc]/60",
+  // The selected row is raised off the sidebar.
+  "data-[active]:bg-white data-[active]:bg-linear-to-b data-[active]:from-white data-[active]:to-[#fdfdfd] data-[active]:text-zinc-900 data-[active]:shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)]",
+  "dark:data-[active]:bg-[#2d2d30] dark:data-[active]:from-[#29292c] dark:data-[active]:to-[#242427] dark:data-[active]:text-zinc-100 dark:data-[active]:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]",
+  "[&_svg]:size-4 [&_svg]:shrink-0",
+].join(" ");
diff --git a/content/docs/primitives/steps.mdx b/content/docs/primitives/steps.mdx
index 3c3c471..a9a9494 100644
--- a/content/docs/primitives/steps.mdx
+++ b/content/docs/primitives/steps.mdx
@@ -5,6 +5,7 @@ source: steps
 ---
 
 import { Basic } from './steps/demos/basic';
+import { Status } from './steps/demos/status';
 
 <Demo component={<Basic />} file="primitives/steps/demos/basic.tsx" />
 
@@ -12,8 +13,10 @@ import { Basic } from './steps/demos/basic';
 
 - **Recursive disclosure tree** — every node is a `Steps.Item` with a `Trigger` and a `Panel`, and panels can hold further items, so timelines nest arbitrarily.
 - **Status-driven** — each item's `status` (`complete` / `active` / `pending`) flows to its `Icon` and `Label` via context; active items open by default.
-- **Nesting** — a nested item surfaces `data-nested` for the indent rail; a static row is just an `Icon` + `Label` in a `<div>`.
+- **Nesting** — a nested item surfaces `data-nested` for the indent rail; a static row is an `Icon` and a `Label` in a `<div>`.
 - **You compose the rows** — the primitive ships the disclosure + status plumbing; row content (icons, tool-call summaries) is yours to render.
+- **No composite keyboard model** — each trigger is a real button, so the tree is plain sequential tab order with no roving focus to learn.
+- **Panels animate from a published height** — see [Why the panel releases its height](#why-the-panel-releases-its-height), which is also why an open panel keeps growing.
 - **Get started** — see [Quick start](/quick-start) to add the package.
 
 ## Anatomy
@@ -53,16 +56,18 @@ A timeline is a top-level item whose panel holds rows; a row is an `Icon` +
 </Steps.Root>
 ```
 
-## Status
+## Examples
 
-`status` is an opaque `string` — you own the set (commonly `"complete"`,
-`"active"`, `"pending"`, but add `"error"`/`"skipped"`/anything). `Steps.Item`
-takes a `status` and publishes it through context; `Steps.Icon` and
-`Steps.Label` inherit it, or override with their own `status`. Resolution is
-*own prop → inherited → `"complete"`*. Every status-aware part reflects it as
-`data-status` for styling.
+### Driving rows from status
 
-## Height transitions
+`status` is an opaque string. The package resolves it — own prop, then inherited
+from the enclosing item, then `"complete"` — and reflects it as `data-status`.
+It never decides what the set is, so the `"error"` below is a string this demo
+invented and then styled.
+
+<Demo component={<Status />} file="primitives/steps/demos/status.tsx" />
+
+## Why the panel releases its height
 
 The panel publishes its measured height as `--panel-height` while an open or
 close transition runs, and **releases it once the panel settles open**. So
@@ -71,9 +76,9 @@ variable no longer written — becomes invalid at computed-value time and falls
 back to `auto`. That is what lets an open panel track content appearing inside
 it, rather than staying pinned to the height it had when it opened.
 
-The demo at the top of this page uses it. Collapse and expand the timeline to
-see the transition, then expand **Searched the web** while the timeline is
-already open — the outer panel grows to fit the detail instead of clipping it.
+The demo at the top of this page uses it. Collapse and expand the timeline,
+then expand **Searched the web** while the timeline is already open — the outer
+panel grows to fit the detail instead of clipping it.
 
 Two details in that demo are load-bearing. `data-starting-style` and
 `data-ending-style` clamp the height to `0` on the transitional frames, and they
@@ -82,34 +87,6 @@ And `[&>*]:shrink-0` guards the measurement: a flex column clamped to `height: 0
 puts every child under shrink pressure, and a child that collapses to nothing
 makes the panel measure itself as `0px`.
 
-## Keyboard
-
-Each item is a standard disclosure: `Steps.Trigger` is a real button, so
-`Tab` moves between triggers and `Enter`/`Space` toggle the nearest item.
-Nested items nest their own triggers — there is no roving focus or composite
-widget; the tree is plain sequential tab order.
-
-## Accessibility
-
-Disclosure semantics are inherited from the underlying Collapsible:
-`aria-expanded`/`aria-controls` on the trigger, an id-linked, `hidden`-managed
-panel. The item whose `status` is `"active"` additionally carries
-`aria-current="step"` — the same "active" convention `defaultOpen` already
-keys off.
-
-Status itself is invisible to assistive tech by default: `Steps.Icon` is
-`aria-hidden` and color never announces. Mount `Steps.Status` inside rows
-whose status matters — it renders a visually-hidden span speaking the resolved
-status string, and takes `children` for localized copy:
-
-```tsx
-<Steps.Trigger>
-  <Steps.Icon />
-  <Steps.Label>Searching the web</Steps.Label>
-  <Steps.Status />
-</Steps.Trigger>
-```
-
 ## API reference
 
 Every part accepts `className`, `style`, and `render` (see
@@ -117,11 +94,14 @@ Every part accepts `className`, `style`, and `render` (see
 
 ### Steps
 
-The timeline root. Renders `data-steps`. No part-specific props.
+The timeline container. Ships the disclosure and status plumbing and no row
+content: what a tool call or a reasoning step looks like is yours. Renders a
+`<div>` element.
 
 ### Steps.Item
 
-One node of the tree (a disclosure). Renders `data-steps-item`, plus
+One node of the tree, and the unit that nests: an item's panel may hold further
+items, so a timeline goes as deep as the run did. Renders a `<div>` element, plus
 `aria-current="step"` while `status` is `"active"`.
 
 export const itemProps = [
@@ -145,14 +125,18 @@ export const itemAttrs = [
 
 ### Steps.Trigger
 
-Toggles the nearest item. Renders a `<button data-steps-trigger>`
+The row that expands an item. A real button, so the tree is plain sequential tab
+order rather than a composite widget with its own keyboard model. Renders a
+`<button>` element
 (`aria-expanded`, `aria-controls`). Carries `data-open`/`data-closed` for the
 chevron. The styled layer groups it as `group/steps-trigger` so children read
 `group-data-open/steps-trigger:…`.
 
 ### Steps.Panel
 
-The nearest item's disclosure area — lays out the timeline column. Renders
+The collapsible body. Publishes its measured height while a transition runs and
+releases it once settled open, so an open panel grows with content that arrives
+inside it. Renders
 `data-steps-panel`.
 
 export const panelProps = [
@@ -174,7 +158,9 @@ export const panelAttrs = [
 
 ### Steps.Icon
 
-Status indicator. Renders `<span data-steps-icon aria-hidden>`.
+The row's status glyph, `aria-hidden` because colour and shape announce
+nothing. Resolves `status` from its own prop, then the enclosing item. Renders a
+`<span>` element.
 
 export const iconProps = [
   { name: "status", type: "string", description: "Overrides the inherited status for this icon." },
@@ -191,7 +177,8 @@ export const iconAttrs = [
 
 ### Steps.Label
 
-Row text. Renders `<span data-steps-label>`.
+The row's text. Resolves `status` the same way the icon does, so one attribute
+drives both. Renders a `<span>` element.
 
 export const labelProps = [
   { name: "status", type: "string", description: "Overrides the inherited status for this label." },
@@ -208,13 +195,15 @@ export const labelAttrs = [
 
 ### Steps.Status
 
-Visually-hidden status announcement. Renders `<span data-steps-status>` with
-screen-reader-only styling (overridable via `style`/`className`), containing
-the resolved status string unless `children` provide localized copy.
+The status as text for assistive technology. Renders a visually hidden `<span>`
+holding the resolved status string; pass `children` to localise the wording,
+and `style`/`className` to override the hiding. It is not a live region: a
+screen reader reads it when it reaches the row, but a change is not announced
+as it happens. Wrap the list in your own `role="status"` region if it should be.
 
 export const statusProps = [
-  { name: "status", type: "string", description: "Overrides the inherited status for this announcement." },
-  { name: "children", type: "ReactNode", default: "the resolved status string", description: "Localized copy to announce instead of the raw status value." },
+  { name: "status", type: "string", description: "Overrides the inherited status for this text." },
+  { name: "children", type: "ReactNode", default: "the resolved status string", description: "Localized copy to read instead of the raw status value." },
 ];
 
 <PropsTable rows={statusProps} />
diff --git a/content/docs/primitives/steps/demos/basic.tsx b/content/docs/primitives/steps/demos/basic.tsx
index 236e681..f780b76 100644
--- a/content/docs/primitives/steps/demos/basic.tsx
+++ b/content/docs/primitives/steps/demos/basic.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Steps } from "@intentface/chat/steps";
-import type { ComponentProps } from "react";
+import { Check, ChevronDown, Circle } from "@keyline-icons/react";
 
 // Steps is recursive: an item's panel can hold rows and further items. A nested
 // panel picks up data-nested, which is how the rail indent is drawn.
@@ -14,61 +14,82 @@ import type { ComponentProps } from "react";
 //
 // The panels animate their height from --panel-height (see PANEL_CLASS). Collapse
 // and expand the timeline to see it; expand "Searched the web" while the timeline
-// is already open to see the outer panel grow to fit, rather than clipping.
+// is already open to see the outer panel grow to fit, rather than clipping. A rail
+// joins the step icons (RAIL_CLASS).
+//
+// The question above and the half-written reply below are only context: the
+// steps sit inside an assistant turn, the way they do in a chat.
 export const Basic = () => (
-  <div className="w-full max-w-xl">
+  // Sized for the fully expanded state, so opening and closing steps never
+  // shifts the page around the demo.
+  <div className="flex min-h-80 w-full max-w-xl flex-col gap-4">
+    <p className="max-w-[80%] self-end rounded-[20px] bg-white px-3.5 py-1.5 text-sm text-zinc-900 leading-6 shadow-[0_0_0_1px_rgb(0_0_0/0.08),0_1px_2px_rgb(0_0_0/0.04)] dark:bg-zinc-800 dark:text-zinc-100 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16)]">
+      What changed about refs in React 19?
+    </p>
     <Steps.Root className="w-full">
       <Steps.Item defaultOpen>
-        <Steps.Trigger className={`${TRIGGER_CLASS} py-1`}>
+        <Steps.Trigger className={`${TRIGGER_CLASS} font-medium`}>
           <span>Worked for 3 seconds</span>
-          <ChevronIcon className="size-4 shrink-0 -rotate-90 transition-transform group-data-open/steps-trigger:rotate-0" />
+          <ChevronDown className="size-[15px] shrink-0 -rotate-90 transition-transform group-data-open/steps-trigger:rotate-0" />
         </Steps.Trigger>
 
-        <Steps.Panel className={`${PANEL_CLASS}`}>
-          <div className="flex items-center gap-2 py-0.5">
+        <Steps.Panel className={PANEL_CLASS}>
+          {/* Each step is a column: a piece of rail, then icon and label in a row.
+              The first step has nothing above it to connect to. */}
+          <div className="flex h-7 items-center gap-2.5">
             <Steps.Icon className={ICON_CLASS}>
-              <CheckIcon />
+              <Check className="size-[15px]" />
             </Steps.Icon>
             <Steps.Label className={LABEL_CLASS}>Read the request</Steps.Label>
           </div>
 
           {/* Closed by default, so opening it grows the settled outer panel. */}
           <Steps.Item>
-            <Steps.Trigger className={`${TRIGGER_CLASS} py-0.5`}>
+            <span aria-hidden="true" className={RAIL_CLASS} />
+            <Steps.Trigger className={TRIGGER_CLASS}>
               <Steps.Icon className={`relative ${ICON_CLASS}`}>
                 <span className="transition-opacity group-hover/steps-trigger:opacity-0 group-focus-visible/steps-trigger:opacity-0 group-data-open/steps-trigger:opacity-0">
-                  <CheckIcon />
+                  <Check className="size-[15px]" />
                 </span>
-                <ChevronIcon className="absolute size-4 opacity-0 transition-all group-hover/steps-trigger:opacity-100 group-focus-visible/steps-trigger:opacity-100 group-data-open/steps-trigger:rotate-180 group-data-open/steps-trigger:opacity-100" />
+                <ChevronDown className="absolute size-[15px] opacity-0 transition-all group-hover/steps-trigger:opacity-100 group-focus-visible/steps-trigger:opacity-100 group-data-open/steps-trigger:rotate-180 group-data-open/steps-trigger:opacity-100" />
               </Steps.Icon>
               <Steps.Label className={LABEL_CLASS}>Searched the web</Steps.Label>
             </Steps.Trigger>
             <Steps.Panel className={PANEL_CLASS}>
-              <span className="py-0.5 text-sm text-[#686868] dark:text-[#9b9b9b]">
+              <span className="py-1.5 text-[13px] text-zinc-500 leading-5 dark:text-zinc-400">
                 Found three relevant sources and skimmed each. This detail is what the outer panel
                 has to make room for.
               </span>
             </Steps.Panel>
           </Steps.Item>
 
-          <div className="flex items-center gap-2 py-0.5">
-            <Steps.Icon status="active" className={ICON_CLASS}>
-              <CircleIcon className="animate-pulse" />
-            </Steps.Icon>
-            <Steps.Label status="active" className={LABEL_CLASS}>
-              Writing the answer
-            </Steps.Label>
+          <div className="flex flex-col">
+            <span aria-hidden="true" className={RAIL_CLASS} />
+            <div className="flex h-7 items-center gap-2.5">
+              <Steps.Icon status="active" className={ICON_CLASS}>
+                <Circle className="size-[15px] animate-pulse" />
+              </Steps.Icon>
+              <Steps.Label status="active" className={LABEL_CLASS}>
+                Writing the answer
+              </Steps.Label>
+            </div>
           </div>
         </Steps.Panel>
       </Steps.Item>
     </Steps.Root>
+    <p className="text-sm text-zinc-700 leading-6 dark:text-zinc-300">
+      Function components now take <code className="font-mono text-[13px]">ref</code> as a plain
+      prop, so most <code className="font-mono text-[13px]">forwardRef</code> wrappers can go. Ref
+      callbacks can also return a cleanup function
+      <span className="ml-0.5 inline-block h-4 w-0.5 translate-y-0.5 animate-pulse rounded-full bg-zinc-400 dark:bg-zinc-500" />
+    </p>
   </div>
 );
 
 // The group name children read open state through — `steps-trigger` is the name
 // the styled layer uses, so these classes port between the two unchanged.
 const TRIGGER_CLASS =
-  "group/steps-trigger flex w-full cursor-pointer items-center gap-2 text-sm text-[#686868] transition-colors hover:text-[#1a1a1a] dark:text-[#9b9b9b] dark:hover:text-[#fcfcfc]";
+  "group/steps-trigger flex h-7 w-full cursor-pointer items-center gap-2.5 rounded-md text-[13px] text-zinc-500 transition-colors hover:text-zinc-900 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#0169cc]/60 dark:text-zinc-400 dark:hover:text-zinc-100";
 
 // Height animates from --panel-height, which the panel publishes while a
 // transition runs and releases once open — so this both animates the open/close
@@ -80,52 +101,16 @@ const TRIGGER_CLASS =
 // every child under shrink pressure, and a child collapsing to nothing would make
 // the panel measure itself as 0px.
 const PANEL_CLASS =
-  "flex flex-col overflow-hidden h-(--panel-height) transition-[height] duration-200 ease-out data-starting-style:h-0 data-ending-style:h-0 [&>*]:shrink-0 in-data-nested:ml-2 in-data-nested:border-l in-data-nested:border-[#f0f0f0] in-data-nested:pl-4 dark:in-data-nested:border-[#262626]";
+  "flex flex-col overflow-hidden h-(--panel-height) transition-[height] duration-200 ease-out data-starting-style:h-0 data-ending-style:h-0 [&>*]:shrink-0 in-data-nested:ml-[7px] in-data-nested:border-l in-data-nested:border-zinc-950/10 in-data-nested:pl-[17px] dark:in-data-nested:border-white/10";
+
+// A piece of rail above a step, centred on the 15px icon column. An open nested
+// panel draws the same line down its left edge, so the rail stays unbroken.
+const RAIL_CLASS = "ml-[7px] block h-2 w-px bg-zinc-950/10 dark:bg-white/10";
 
 // Status is inherited from the enclosing item and surfaced as data-status, so
 // one class string covers every state.
 const ICON_CLASS =
-  "flex size-4 shrink-0 items-center justify-center data-[status=complete]:text-[#686868] data-[status=active]:text-[#1a1a1a] data-[status=pending]:text-[#949494] dark:data-[status=complete]:text-[#9b9b9b] dark:data-[status=active]:text-[#fcfcfc] dark:data-[status=pending]:text-[#6f6f6f]";
+  "flex size-[15px] shrink-0 items-center justify-center data-[status=complete]:text-zinc-500 data-[status=active]:text-zinc-900 data-[status=pending]:text-zinc-400 dark:data-[status=complete]:text-zinc-400 dark:data-[status=active]:text-zinc-100 dark:data-[status=pending]:text-zinc-500";
 
 const LABEL_CLASS =
-  "text-left text-sm data-[status=complete]:text-[#686868] data-[status=active]:font-medium data-[status=active]:text-[#1a1a1a] data-[status=pending]:text-[#949494] dark:data-[status=complete]:text-[#9b9b9b] dark:data-[status=active]:text-[#fcfcfc] dark:data-[status=pending]:text-[#6f6f6f]";
-
-const ChevronIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="m4 6 4 4 4-4" />
-  </svg>
-);
-
-const CheckIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    width="14"
-    height="14"
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.75"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="m2.5 8.5 4 4 7-9" />
-  </svg>
-);
-
-const CircleIcon = (props: ComponentProps<"svg">) => (
-  <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
-    <circle cx="8" cy="8" r="4" />
-  </svg>
-);
+  "text-left text-[13px] data-[status=complete]:text-zinc-700 data-[status=active]:font-medium data-[status=active]:text-zinc-900 data-[status=pending]:text-zinc-400 dark:data-[status=complete]:text-zinc-300 dark:data-[status=active]:text-zinc-100 dark:data-[status=pending]:text-zinc-500";
diff --git a/content/docs/primitives/steps/demos/status.tsx b/content/docs/primitives/steps/demos/status.tsx
new file mode 100644
index 0000000..c08652d
--- /dev/null
+++ b/content/docs/primitives/steps/demos/status.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import { Steps } from "@intentface/chat/steps";
+import { Check, ChevronDown, LoaderCircle, X } from "@keyline-icons/react";
+import { useEffect, useRef, useState } from "react";
+
+const ROWS = ["Read the request", "Searched the web", "Checked the cache", "Wrote the answer"];
+
+/*
+ * `status` is an opaque string. The package resolves it — own prop, then
+ * inherited from the enclosing item, then "complete" — and reflects it as
+ * `data-status`. It never decides what the set is.
+ *
+ * So "error" below is not a feature; it is a string this demo invented and then
+ * styled — here with nothing but its glyph. Run it and watch each step arrive
+ * active and settle as complete, with one failing on the way.
+ *
+ * The entrance is plain CSS: each step's row grows from 0fr to 1fr, then its icon
+ * fades in, then its label, all from @starting-style (Tailwind's `starting:` variant).
+ */
+
+// A step stays active this long before it settles, and the next one arrives
+// after a short pause.
+const ACTIVE_MS = 1400;
+const PAUSE_MS = 400;
+export const Status = () => {
+  // Steps that have appeared, and steps that have settled.
+  const [appeared, setAppeared] = useState(ROWS.length);
+  const [settled, setSettled] = useState(ROWS.length);
+  // Bumped per run so every row remounts and plays its entrance again.
+  const [run, setRun] = useState(0);
+  const timers = useRef<ReturnType<typeof setTimeout>[]>([]);
+
+  useEffect(() => () => timers.current.forEach(clearTimeout), []);
+
+  const start = () => {
+    timers.current.forEach(clearTimeout);
+    timers.current = [];
+    setRun((current) => current + 1);
+    setAppeared(0);
+    setSettled(0);
+    ROWS.forEach((_, index) => {
+      const start = index * (ACTIVE_MS + PAUSE_MS);
+      timers.current.push(setTimeout(() => setAppeared(index + 1), start));
+      timers.current.push(setTimeout(() => setSettled(index + 1), start + ACTIVE_MS));
+    });
+  };
+
+  const statusFor = (index: number) => {
+    if (index >= settled) return "active";
+    return index === 2 ? "error" : "complete";
+  };
+
+  const running = settled < ROWS.length;
+  const visible = ROWS.slice(0, appeared);
+
+  return (
+    <div className="flex w-full max-w-lg flex-col gap-4">
+      {/* Reserves the finished list's height (28px header + four 28px steps with
+          8px of rail between them), so the button below stays put while steps
+          arrive or the list collapses. */}
+      <Steps.Root className="min-h-[164px] w-full">
+        <Steps.Item defaultOpen>
+          <Steps.Trigger className="group/steps-trigger flex h-7 w-full cursor-pointer items-center gap-2.5 rounded-md text-[13px] text-zinc-500 transition-colors hover:text-zinc-900 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#0169cc]/60 dark:text-zinc-400 dark:hover:text-zinc-100">
+            <span className="font-medium">{running ? "Working…" : "Worked for 3 seconds"}</span>
+            <ChevronDown className="size-[15px] shrink-0 -rotate-90 transition-transform group-data-open/steps-trigger:rotate-0" />
+          </Steps.Trigger>
+
+          {/* Collapsing animates the height from --panel-height, which the panel
+              publishes while it transitions; [&>*]:shrink-0 keeps the measure honest. */}
+          <Steps.Panel className="flex h-(--panel-height) flex-col overflow-hidden transition-[height] duration-200 ease-out data-ending-style:h-0 data-starting-style:h-0 [&>*]:shrink-0">
+            {visible.map((row, index) => {
+              const status = statusFor(index);
+              return (
+                // The row grows first (0–300ms), then the icon fades in (300–600ms),
+                // then the label (600–900ms).
+                <div
+                  key={`${run}-${row}`}
+                  className="grid grid-rows-[1fr] transition-[grid-template-rows] duration-300 ease-out starting:grid-rows-[0fr]"
+                >
+                  <div className="flex min-h-0 flex-col overflow-hidden">
+                    {/* A piece of rail joins this step to the one above. */}
+                    {index > 0 && (
+                      <span
+                        aria-hidden="true"
+                        className="ml-[7px] block h-2 w-px shrink-0 bg-zinc-950/10 dark:bg-white/10"
+                      />
+                    )}
+                    <div className="flex h-7 shrink-0 items-center gap-2.5">
+                      {/* Every rule here keys off data-status. The package supplies the
+                          attribute and takes no view on what the values mean. */}
+                      <Steps.Icon
+                        status={status}
+                        className="grid size-[15px] shrink-0 place-items-center text-zinc-500 transition-opacity delay-300 duration-300 ease-out starting:opacity-0 data-[status=active]:text-zinc-900 dark:text-zinc-400 dark:data-[status=active]:text-zinc-100"
+                      >
+                        {status === "complete" ? (
+                          <Check className="size-[15px]" />
+                        ) : status === "error" ? (
+                          <X className="size-[15px]" />
+                        ) : (
+                          <LoaderCircle className="size-[15px] animate-spin" />
+                        )}
+                      </Steps.Icon>
+
+                      <Steps.Label
+                        status={status}
+                        className="text-[13px] text-zinc-700 transition-[opacity,translate] delay-[600ms] duration-300 ease-out starting:-translate-x-2 starting:opacity-0 data-[status=active]:font-medium data-[status=active]:text-zinc-900 data-[status=error]:text-zinc-500 dark:text-zinc-300 dark:data-[status=active]:text-zinc-100 dark:data-[status=error]:text-zinc-400"
+                      >
+                        {row}
+                      </Steps.Label>
+
+                      {/* Visually hidden, and the only thing that speaks the status:
+                          the icon is aria-hidden and colour announces nothing. */}
+                      <Steps.Status status={status} />
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </Steps.Panel>
+        </Steps.Item>
+      </Steps.Root>
+
+      <div className="flex justify-center">
+        <button
+          type="button"
+          onClick={start}
+          disabled={running}
+          className="h-8 cursor-pointer rounded-full bg-white bg-linear-to-b from-white to-[#fdfdfd] px-3.5 font-medium text-[13px] text-zinc-900 shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)] hover:from-[#fafafa] hover:to-[#f6f6f6] focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2 disabled:cursor-default disabled:opacity-40 dark:bg-[#2d2d30] dark:from-[#313134] dark:to-[#2a2a2d] dark:text-zinc-100 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:hover:from-[#38383b] dark:hover:to-[#313134]"
+        >
+          {running ? "Running…" : "Run again"}
+        </button>
+      </div>
+    </div>
+  );
+};
diff --git a/content/docs/primitives/tabs.mdx b/content/docs/primitives/tabs.mdx
index 7c67990..9848519 100644
--- a/content/docs/primitives/tabs.mdx
+++ b/content/docs/primitives/tabs.mdx
@@ -20,6 +20,7 @@ import { ConfirmClose } from './tabs/demos/confirm-close';
 - **Order is data** — `items` is an ordered array on the store, not something derived from the DOM. Drag it with whatever library you like through `render`; the result is a state change like any other.
 - **One viewport, not a panel per tab** — switching re-renders the same box, which is what lets a floating surface move rather than tear itself down.
 - **In the layout or anchored** — wrapping the viewport in `Portal` › `Positioner` › `Popup` is the entire difference between the two.
+- **A toolbar, not a tablist** — see [Why a toolbar and not a tablist](#why-a-toolbar-and-not-a-tablist). ARIA's tablist cannot describe a closable, open-ended strip.
 - **Get started** — see [Quick start](/quick-start) to add the package.
 
 ## Anatomy
diff --git a/content/docs/primitives/tabs/demos/anchored.tsx b/content/docs/primitives/tabs/demos/anchored.tsx
index 81d6f08..2584fbb 100644
--- a/content/docs/primitives/tabs/demos/anchored.tsx
+++ b/content/docs/primitives/tabs/demos/anchored.tsx
@@ -1,10 +1,9 @@
 "use client";
 
-import { Composer, type ComposerSubmitData } from "@intentface/chat/composer";
-import { Message } from "@intentface/chat/message";
 import { Tabs, useTabs } from "@intentface/chat/tabs";
-import { Thread } from "@intentface/chat/thread";
-import { type ComponentProps, type KeyboardEvent, useRef, useState } from "react";
+import { MessageSquare, Minus, Sparkles, X } from "@keyline-icons/react";
+import { useRef, useState } from "react";
+import { ChatThread, NewChat, REPLIES, SEEDED, type Turn } from "./chat";
 
 /*
  * A chat dock in the corner of a page. The same Root, List and Viewport as the
@@ -31,55 +30,6 @@ const dockStore = Tabs.createStore();
 /** The draft's value. It is never in `items` — that is the whole point. */
 const DRAFT = "new-chat";
 
-type Turn = { id: string; role: "user" | "assistant"; text: string };
-type Chat = { name: string; turns: Turn[] };
-
-const REPLIES = [
-  "Right — and the reason is that a function is compared by identity, so a fresh one each render reads as a change.",
-  "In this case, nothing: the parent only re-renders when its own state moves, and none of it does here.",
-  "It depends what is downstream of it. A memo-wrapped child cares; a plain one doesn't.",
-];
-
-// Different lengths on purpose: switching tabs has to visibly change the
-// panel, since that is what the dock is here to demonstrate.
-const SEEDED: Record<string, Chat> = {
-  "chat-1": {
-    name: "Notes",
-    turns: [
-      { id: "1", role: "user", text: "What's the difference between useMemo and useCallback?" },
-      {
-        id: "2",
-        role: "assistant",
-        text: "useMemo caches a computed value; useCallback caches a function reference. useCallback(fn, deps) is just useMemo(() => fn, deps).",
-      },
-      { id: "3", role: "user", text: "So when do I actually need useCallback?" },
-      { id: "4", role: "assistant", text: REPLIES[2] as string },
-    ],
-  },
-  "chat-2": {
-    name: "Follow-up",
-    turns: [
-      { id: "1", role: "user", text: "Does the parent re-render when I pass a new callback?" },
-      { id: "2", role: "assistant", text: REPLIES[1] as string },
-    ],
-  },
-  "chat-3": {
-    name: "Summary",
-    turns: [
-      { id: "1", role: "user", text: "Summarise the thread so far." },
-      {
-        id: "2",
-        role: "assistant",
-        text: "Cache values with useMemo, cache functions with useCallback, and reach for either only when something downstream is memoised.",
-      },
-      { id: "3", role: "user", text: "Why does identity matter for the function case?" },
-      { id: "4", role: "assistant", text: REPLIES[0] as string },
-      { id: "5", role: "user", text: "Got it." },
-      { id: "6", role: "assistant", text: "That's the whole of it." },
-    ],
-  },
-};
-
 let created = 0;
 
 export const Anchored = () => {
@@ -156,19 +106,19 @@ export const Anchored = () => {
   return (
     <div
       ref={setFrame}
-      className="relative flex h-[36rem] w-full flex-col overflow-hidden rounded-xl border border-[#f0f0f0] bg-white dark:border-[#262626] dark:bg-[#181818]"
+      className="relative flex h-[36rem] w-full flex-col overflow-hidden rounded-xl bg-[#f5f5f6] shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] dark:bg-[#131315] dark:shadow-[0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:after:pointer-events-none dark:after:absolute dark:after:inset-0 dark:after:z-50 dark:after:rounded-[inherit] dark:after:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06)]"
     >
       {/* The page the dock sits over. */}
-      <article className="min-h-0 flex-1 overflow-hidden px-10 py-8">
-        <h1 className="mb-6 font-semibold text-[#1a1a1a] text-2xl tracking-tight dark:text-[#fcfcfc]">
+      <article className="mx-2 mt-2 min-h-0 flex-1 overflow-hidden rounded-lg bg-white px-10 py-8 shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] dark:bg-zinc-900 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]">
+        <h1 className="mb-5 font-semibold text-base text-zinc-900 tracking-tight dark:text-zinc-100">
           Getting started
         </h1>
-        <p className="mb-4 max-w-2xl text-[#686868] text-sm leading-[1.7] dark:text-[#9b9b9b]">
+        <p className="mb-4 max-w-2xl text-sm text-zinc-700 leading-[1.7] dark:text-zinc-300">
           A chat dock is something you work <em>behind</em>: non-modal throughout, with no backdrop,
           no scroll lock, no focus trap, and no dismissal on outside press. Open a chat below, then
           keep reading — the page stays yours.
         </p>
-        <p className="max-w-2xl text-[#686868] text-sm leading-[1.7] dark:text-[#9b9b9b]">
+        <p className="max-w-2xl text-sm text-zinc-700 leading-[1.7] dark:text-zinc-300">
           The Agent button is a trigger written outside the list. Its value is never in the
           collection, so it anchors a draft to itself without creating a tab — send something and a
           tab appears, titled by what you typed.
@@ -177,7 +127,7 @@ export const Anchored = () => {
 
       {/* A row in the layout rather than a fixed overlay, so it sits beside the
           content instead of on top of it. */}
-      <div className="flex shrink-0 items-center justify-end gap-0.5 overflow-x-auto px-2 pb-2">
+      <div className="flex shrink-0 items-center justify-end gap-0.5 overflow-x-auto p-2">
         <Tabs.Root
           store={dockStore}
           defaultItems={Object.keys(SEEDED)}
@@ -186,22 +136,25 @@ export const Anchored = () => {
           <Tabs.List aria-label="Chats" className="flex items-center gap-0.5">
             {(id) => (
               <Tabs.Trigger value={id} aria-label={title(id)} className={dockTabClass}>
-                <Tabs.Icon className="[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:opacity-60">
-                  <ChatIcon />
+                <Tabs.Icon className="text-zinc-500 dark:text-zinc-400 [&>svg]:size-[15px] [&>svg]:shrink-0">
+                  <MessageSquare className="size-[15px]" />
                 </Tabs.Icon>
                 <span className="min-w-0 truncate">{title(id)}</span>
                 <Tabs.Action
                   className={[
-                    "absolute inset-y-0 right-0 flex items-center bg-inherit pr-1 pl-3",
+                    // Inset 1px with a matching corner, so the cover never paints over the
+                    // tab's ring and top highlight; it inherits the face's gradient too,
+                    // not just its colour, so it doesn't read as a flat block.
+                    "absolute inset-y-px right-px flex items-center rounded-r-[5px] bg-inherit [background-image:inherit] pr-1 pl-3",
                     "[mask-image:linear-gradient(to_right,transparent,#000_0.5rem)]",
                     "opacity-0 transition-opacity group-hover/tab:opacity-100 group-data-[selected]/tab:opacity-100",
                   ].join(" ")}
                 >
                   <Tabs.Close
                     aria-label={`Close ${title(id)}`}
-                    className="grid size-5 shrink-0 cursor-pointer select-none place-items-center rounded text-[#686868] transition-colors hover:bg-[#e4e4e4] hover:text-[#1a1a1a] dark:text-[#9b9b9b] dark:hover:bg-[#333333] dark:hover:text-[#fcfcfc]"
+                    className="grid size-5 shrink-0 cursor-pointer select-none place-items-center rounded-full text-zinc-400 transition-colors hover:bg-zinc-950/5 hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0169cc]/60 dark:text-zinc-500 dark:hover:bg-white/8 dark:hover:text-zinc-100"
                   >
-                    <CloseIcon />
+                    <X className="size-3.5" />
                   </Tabs.Close>
                 </Tabs.Action>
               </Tabs.Trigger>
@@ -212,8 +165,8 @@ export const Anchored = () => {
               stop rather than joining the roving focus — but it carries the same
               disclosure ARIA a tab does. */}
           <Tabs.Trigger value={DRAFT} className={`${dockTabClass} ml-1 max-w-none`}>
-            <Tabs.Icon className="[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:opacity-60">
-              <AgentIcon />
+            <Tabs.Icon className="text-zinc-500 dark:text-zinc-400 [&>svg]:size-[15px] [&>svg]:shrink-0">
+              <Sparkles className="size-[15px]" />
             </Tabs.Icon>
             Agent
           </Tabs.Trigger>
@@ -232,7 +185,10 @@ export const Anchored = () => {
                   className={[
                     "flex h-[min(30rem,var(--anchor-available-height,30rem))] w-[min(24rem,var(--anchor-available-width,24rem))] flex-col overflow-hidden",
                     // The ring is baked into the shadow — no border on top.
-                    "rounded-xl bg-white smooth-shadow-ring-lg dark:bg-[#181818]",
+                    "rounded-xl bg-white p-1 shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_12px_32px_-8px_rgb(0_0_0/0.16)]",
+                    // A chat window, so it takes the panel colour; its bubble and
+                    // composer lift off it, as in a full-size chat.
+                    "dark:bg-zinc-900 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.06),inset_0_0_0_1px_rgb(255_255_255/0.07),0_0_0_1px_rgb(0_0_0/0.16),0_12px_32px_-8px_rgb(0_0_0/0.4)]",
                     // Anchored top/end, so it grows from its bottom-right corner — the tab.
                     "origin-bottom-right transition-[opacity,scale,translate] duration-150 ease-out",
                     "data-[starting-style]:translate-y-1 data-[ending-style]:translate-y-1",
@@ -280,8 +236,8 @@ const DockHeader = ({ title }: { title: (id: string) => string }) => {
   const isDraft = open === DRAFT;
 
   return (
-    <header className="flex h-10 shrink-0 items-center gap-1 px-2.5">
-      <span className="min-w-0 flex-1 truncate font-medium text-[#1a1a1a] text-sm dark:text-[#fcfcfc]">
+    <header className="flex h-10 shrink-0 items-center gap-0.5 pr-1 pl-2.5">
+      <span className="min-w-0 flex-1 truncate font-medium text-[13px] text-zinc-900 dark:text-zinc-100">
         {open === null || isDraft ? null : title(open)}
       </span>
       <button
@@ -290,7 +246,7 @@ const DockHeader = ({ title }: { title: (id: string) => string }) => {
         onClick={() => select(null)}
         className={iconButtonClass}
       >
-        <MinusIcon />
+        <Minus className="size-[15px]" />
       </button>
       <button
         type="button"
@@ -303,226 +259,27 @@ const DockHeader = ({ title }: { title: (id: string) => string }) => {
         }}
         className={iconButtonClass}
       >
-        <CloseIcon />
+        <X className="size-[15px]" />
       </button>
     </header>
   );
 };
 
-// Thread measures its docked composer and publishes the reserve as
-// --thread-overlay-bottom-height, so the last message never hides behind it.
-const ChatThread = ({
-  chat,
-  onSend,
-  generating,
-  onStop,
-}: {
-  chat: Chat | undefined;
-  onSend: (text: string) => void;
-  generating: boolean;
-  onStop: () => void;
-}) => {
-  if (!chat) return null;
-
-  // `bottom` rather than the default `follow`: it is the one mode that reserves
-  // no viewport for the last turn. In a dock this small the reserve would push
-  // every earlier turn out of sight, so each chat would look like one exchange.
-  // Escape in the transcript stops the reply too; the composer handles its own first.
-  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
-    if (event.key !== "Escape" || event.defaultPrevented || !generating) return;
-    event.preventDefault();
-    onStop();
-  };
-
-  return (
-    <Thread.Root
-      autoScroll="bottom"
-      onKeyDown={handleKeyDown}
-      className="relative flex h-full w-full overflow-hidden [--thread-overlay-top-height:0.75rem]"
-    >
-      <Thread.Viewport className="h-full w-full overflow-x-hidden overflow-y-auto outline-none [overflow-anchor:auto]">
-        <div className="relative flex min-h-full w-full flex-col pt-(--thread-overlay-top-height) pb-(--thread-overlay-bottom-height)">
-          <Thread.Content className="flex w-full flex-col justify-end gap-3 px-3">
-            {chat.turns.map((turn, index) => (
-              <Message.Root
-                key={turn.id}
-                role={turn.role}
-                isLast={index === chat.turns.length - 1}
-                className="group flex w-full flex-col data-[role=user]:items-end"
-              >
-                <Message.Text className="text-[#1a1a1a] text-sm leading-[1.7] group-data-[role=user]:max-w-[85%] group-data-[role=user]:rounded-2xl group-data-[role=user]:rounded-br-md group-data-[role=user]:bg-[#f4f4f4] group-data-[role=user]:px-3 group-data-[role=user]:py-1.5 dark:text-[#fcfcfc] dark:group-data-[role=user]:bg-[#262626]">
-                  {turn.text}
-                </Message.Text>
-              </Message.Root>
-            ))}
-          </Thread.Content>
-        </div>
-      </Thread.Viewport>
-      <Thread.Composer className="absolute inset-x-0 bottom-0 z-2 w-full p-2 pt-0">
-        <DockComposer
-          placeholder="Reply…"
-          onSubmit={onSend}
-          generating={generating}
-          onStop={onStop}
-        />
-      </Thread.Composer>
-    </Thread.Root>
-  );
-};
-
-/**
- * A chat that does not exist yet. The one place real words survive: a draft
- * that looks like an empty chat gives no hint that sending it creates a tab.
- */
-const NewChat = ({ onStart }: { onStart: (text: string) => void }) => (
-  <div className="flex h-full flex-col">
-    <div className="flex flex-1 flex-col items-center justify-center gap-1.5 px-6 text-center">
-      <AgentIcon className="size-5 text-[#949494] dark:text-[#6f6f6f]" />
-      <p className="font-medium text-[#1a1a1a] text-sm dark:text-[#fcfcfc]">Ask the agent</p>
-      <p className="text-[#686868] text-sm leading-[1.7] dark:text-[#9b9b9b]">
-        This is a draft — it becomes a tab once you send something.
-      </p>
-    </div>
-    <div className="shrink-0 p-2 pt-0">
-      <DockComposer placeholder="Ask anything…" onSubmit={onStart} />
-    </div>
-  </div>
-);
-
-// The composer clears itself on submit, so the handler only has to act on the
-// text. Every Composer.Root owns an isolated store — no setup beyond onSubmit.
-const DockComposer = ({
-  placeholder,
-  onSubmit,
-  generating = false,
-  onStop,
-}: {
-  placeholder: string;
-  onSubmit: (text: string) => void;
-  generating?: boolean;
-  onStop?: () => void;
-}) => {
-  const handleSubmit = (data: ComposerSubmitData) => {
-    if (data.kind !== "message") return;
-    const text = data.text.trim();
-    if (text) onSubmit(text);
-  };
-
-  return (
-    <Composer.Root onSubmit={handleSubmit} className="flex w-full flex-col">
-      <Composer.Container className="cursor-text rounded-xl border border-[#f0f0f0] bg-white shadow-xs transition-colors focus-within:border-[#ececec] dark:border-[#262626] dark:bg-[#111111] dark:focus-within:border-[#2d2d2d]">
-        <Composer.Textarea className="max-h-32 min-h-10 overflow-y-auto px-3 pt-2.5 text-sm **:data-composer-editor:w-full **:data-composer-editor:max-w-none **:data-composer-editor:leading-[1.7] [&_[data-composer-editor]:focus]:outline-none">
-          <Composer.Placeholder
-            placeholder={placeholder}
-            className="leading-[1.7] text-[#949494] dark:text-[#6f6f6f]"
-          />
-        </Composer.Textarea>
-        <Composer.Actions className="flex justify-end p-1.5 pt-0">
-          {/* While a reply is coming, the button and Escape in the composer stop it. */}
-          <Composer.Submit
-            isGenerating={generating}
-            onStop={onStop}
-            aria-label={generating ? "Stop" : "Send"}
-            className="flex size-7 items-center justify-center rounded-full bg-[#1a1a1a] text-white transition-opacity disabled:opacity-30 dark:bg-[#fcfcfc] dark:text-[#111111]"
-          >
-            {generating ? <StopIcon /> : <ArrowUpIcon />}
-          </Composer.Submit>
-        </Composer.Actions>
-      </Composer.Container>
-    </Composer.Root>
-  );
-};
-
 const dockTabClass = [
-  "group/tab relative flex h-7 max-w-40 shrink-0 cursor-pointer select-none items-center gap-1.5 overflow-hidden",
-  "rounded-md px-2.5 text-[#686868] text-sm transition-colors dark:text-[#9b9b9b]",
-  "hover:bg-[#f4f4f4] dark:hover:bg-[#232323]",
-  "focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-[#1a1a1a] dark:focus-visible:outline-[#fcfcfc]",
-  "data-[selected]:bg-[#ececec] data-[selected]:text-[#1a1a1a] dark:data-[selected]:bg-[#2d2d2d] dark:data-[selected]:text-[#fcfcfc]",
+  "group/tab relative flex h-[30px] max-w-40 shrink-0 cursor-pointer select-none items-center gap-1.5 overflow-hidden",
+  "rounded-md px-2.5 font-medium text-[13px] text-zinc-700 transition-colors dark:text-zinc-300",
+  // Opaque rather than a translucent wash: the action inherits this colour, and
+  // a wash painted twice would show as a darker band behind the ×.
+  "hover:bg-[#e9e9ea] dark:hover:bg-[#262628]",
+  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0169cc]/60",
+  "data-[selected]:bg-white data-[selected]:bg-linear-to-b data-[selected]:from-white data-[selected]:to-[#fdfdfd] data-[selected]:text-zinc-900",
+  "data-[selected]:shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)]",
+  "dark:data-[selected]:bg-[#2d2d30] dark:data-[selected]:from-[#313134] dark:data-[selected]:to-[#2a2a2d] dark:data-[selected]:text-zinc-100",
+  "dark:data-[selected]:shadow-[0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]",
+  // The inset ring and top highlight go on an overlay above the content, so the
+  // close button's fading cover can't paint over them.
+  "dark:data-[selected]:after:pointer-events-none dark:data-[selected]:after:absolute dark:data-[selected]:after:inset-0 dark:data-[selected]:after:rounded-[inherit] dark:data-[selected]:after:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05)]",
 ].join(" ");
 
 const iconButtonClass =
-  "grid size-6 shrink-0 cursor-pointer select-none place-items-center rounded-md text-[#949494] transition-colors hover:bg-[#f4f4f4] hover:text-[#1a1a1a] focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-[#1a1a1a] dark:text-[#6f6f6f] dark:hover:bg-[#232323] dark:hover:text-[#fcfcfc] dark:focus-visible:outline-[#fcfcfc]";
-
-const ChatIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.3"
-    aria-hidden="true"
-    {...props}
-  >
-    <path
-      d="M13.5 8.5a4.5 4.5 0 0 1-4.5 4.5H6l-3 2v-2.6A4.5 4.5 0 0 1 6 4h3a4.5 4.5 0 0 1 4.5 4.5Z"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-const AgentIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.3"
-    aria-hidden="true"
-    {...props}
-  >
-    <rect x="3" y="5" width="10" height="8" rx="2.5" strokeLinejoin="round" />
-    <path d="M8 2.5V5" strokeLinecap="round" />
-    <path d="M6.5 9h.01M9.5 9h.01" strokeLinecap="round" strokeWidth="1.8" />
-  </svg>
-);
-
-const ArrowUpIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="size-4"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M8 13V3m0 0L3.5 7.5M8 3l4.5 4.5" />
-  </svg>
-);
-
-const StopIcon = (props: ComponentProps<"svg">) => (
-  <svg viewBox="0 0 16 16" fill="currentColor" className="size-3" aria-hidden="true" {...props}>
-    <rect x="3" y="3" width="10" height="10" rx="1.5" />
-  </svg>
-);
-
-const MinusIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    className="size-3.5"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M3.5 8h9" />
-  </svg>
-);
-
-const CloseIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    className="size-3.5"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="m4.5 4.5 7 7M11.5 4.5l-7 7" />
-  </svg>
-);
+  "grid size-7 shrink-0 cursor-pointer select-none place-items-center rounded-full text-zinc-400 transition-colors hover:bg-zinc-950/5 hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0169cc]/60 dark:text-zinc-500 dark:hover:bg-white/8 dark:hover:text-zinc-100";
diff --git a/content/docs/primitives/tabs/demos/basic.tsx b/content/docs/primitives/tabs/demos/basic.tsx
index 50e352a..64044b5 100644
--- a/content/docs/primitives/tabs/demos/basic.tsx
+++ b/content/docs/primitives/tabs/demos/basic.tsx
@@ -1,7 +1,10 @@
 "use client";
 
 import { Tabs, useTabs } from "@intentface/chat/tabs";
-import { type ComponentProps, Fragment, type ReactNode, useEffect, useRef, useState } from "react";
+import { File, Plus, X } from "@keyline-icons/react";
+import { useState } from "react";
+import { type Document, DocumentBody, LOREM, SEEDED } from "./document";
+import { TabStrip } from "./tab-strip";
 
 /*
  * Document tabs across the window chrome, with the content in a card beneath.
@@ -13,53 +16,11 @@ import { type ComponentProps, Fragment, type ReactNode, useEffect, useRef, useSt
  * why this is a toolbar of disclosures rather than an ARIA tablist.
  */
 
-type Document = { name: string; sections: { heading: string; paragraphs: string[] }[] };
-
-const LOREM = {
-  short:
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-  medium:
-    "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
-  long: "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.",
-};
-
-// Different lengths on purpose: switching tabs has to visibly change the
-// viewport, since that is the thing being demonstrated.
-const SEEDED: Record<string, Document> = {
-  "doc-1": {
-    name: "Getting started",
-    sections: [
-      { heading: "Overview", paragraphs: [LOREM.short, LOREM.medium] },
-      { heading: "Before you begin", paragraphs: [LOREM.long] },
-    ],
-  },
-  "doc-2": {
-    name: "Installation",
-    sections: [
-      { heading: "Package manager", paragraphs: [LOREM.medium] },
-      { heading: "Peer dependencies", paragraphs: [LOREM.short, LOREM.long] },
-    ],
-  },
-  "doc-3": {
-    name: "Design tokens",
-    sections: [
-      { heading: "Surfaces", paragraphs: [LOREM.long, LOREM.short] },
-      { heading: "State", paragraphs: [LOREM.medium] },
-      { heading: "Typography", paragraphs: [LOREM.short] },
-    ],
-  },
-  "doc-4": {
-    name: "Accessibility",
-    sections: [{ heading: "Roles", paragraphs: [LOREM.medium] }],
-  },
-};
-
 export const Basic = () => {
   const [documents, setDocuments] = useState(SEEDED);
 
   return (
-    <div className="tabs-demo flex h-[32rem] w-full flex-col overflow-hidden rounded-xl border border-[#f0f0f0] bg-[#fafafa] dark:border-[#262626] dark:bg-[#111111]">
-      <ScrollMask />
+    <div className="relative tabs-demo flex h-[32rem] w-full flex-col overflow-hidden rounded-xl bg-[#f5f5f6] shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] dark:bg-[#131315] dark:shadow-[0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:after:pointer-events-none dark:after:absolute dark:after:inset-0 dark:after:z-50 dark:after:rounded-[inherit] dark:after:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06)]">
       <Tabs.Root
         defaultItems={Object.keys(SEEDED)}
         defaultValue="doc-1"
@@ -79,8 +40,8 @@ export const Basic = () => {
                   aria-label={documents[id]?.name ?? id}
                   className={tabClass}
                 >
-                  <Tabs.Icon className="[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:opacity-60">
-                    <FileIcon />
+                  <Tabs.Icon className="text-zinc-500 dark:text-zinc-400 [&>svg]:size-[15px] [&>svg]:shrink-0">
+                    <File className="size-[15px]" />
                   </Tabs.Icon>
                   <span className="min-w-0 truncate">{documents[id]?.name ?? id}</span>
 
@@ -90,16 +51,19 @@ export const Basic = () => {
                     itself on hover and while the tab is open. */}
                   <Tabs.Action
                     className={[
-                      "absolute inset-y-0 right-0 flex items-center bg-inherit pr-1.5 pl-3",
+                      // Inset 1px with a matching corner, so the cover never paints over the
+                      // tab's ring and top highlight; it inherits the face's gradient too,
+                      // not just its colour, so it doesn't read as a flat block.
+                      "absolute inset-y-px right-px flex items-center rounded-r-[5px] bg-inherit [background-image:inherit] pr-1.5 pl-3",
                       "[mask-image:linear-gradient(to_right,transparent,#000_0.5rem)]",
                       "opacity-0 transition-opacity group-hover/tab:opacity-100 group-data-[selected]/tab:opacity-100",
                     ].join(" ")}
                   >
                     <Tabs.Close
                       aria-label={`Close ${documents[id]?.name ?? id}`}
-                      className="grid size-5 shrink-0 cursor-pointer select-none place-items-center rounded-md text-[#686868] transition-colors hover:bg-[#e4e4e4] hover:text-[#1a1a1a] dark:text-[#9b9b9b] dark:hover:bg-[#333333] dark:hover:text-[#fcfcfc]"
+                      className="grid size-5 shrink-0 cursor-pointer select-none place-items-center rounded-full text-zinc-400 transition-colors hover:bg-zinc-950/5 hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0169cc]/60 dark:text-zinc-500 dark:hover:bg-white/8 dark:hover:text-zinc-100"
                     >
-                      <CloseIcon />
+                      <X className="size-3.5" />
                     </Tabs.Close>
                   </Tabs.Action>
                 </Tabs.Trigger>
@@ -114,7 +78,7 @@ export const Basic = () => {
 
         {/* Hidden rather than absent when nothing is open, so the card's
             place in the layout is held. */}
-        <Tabs.Viewport className="mx-2 mb-2 min-h-0 flex-1 overflow-auto rounded-md border border-[#f0f0f0] bg-white data-[empty]:invisible dark:border-[#262626] dark:bg-[#181818]">
+        <Tabs.Viewport className="mx-2 mb-2 min-h-0 flex-1 overflow-auto rounded-lg bg-white shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] data-[empty]:invisible dark:bg-zinc-900 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]">
           {(id) => <DocumentBody document={documents[id]} />}
         </Tabs.Viewport>
       </Tabs.Root>
@@ -122,67 +86,6 @@ export const Basic = () => {
   );
 };
 
-/*
- * The scrolling half of the strip. Its edges fade only where tabs are hidden
- * behind them — see ScrollMask below — and the open tab is brought into view
- * whenever the selection moves, since a tab added at the end would otherwise
- * open off-screen.
- */
-const TabStrip = ({ children }: { children: ReactNode }) => {
-  const ref = useRef<HTMLDivElement | null>(null);
-  const value = useTabs((tabs) => tabs.value);
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: `value` is the trigger, not an input — the open tab is found off the DOM, and this has to re-run whenever the selection moves.
-  useEffect(() => {
-    ref.current
-      ?.querySelector("[data-tabs-trigger][data-selected]")
-      ?.scrollIntoView({ block: "nearest", inline: "nearest" });
-  }, [value]);
-
-  return (
-    <div
-      ref={ref}
-      className="scroll-mask-x min-w-0 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
-    >
-      {children}
-    </div>
-  );
-};
-
-/*
- * Scroll-position-driven edge fades, with no JavaScript: a scroll timeline
- * animates two registered custom properties, and those feed the mask. At the
- * start the left mask is fully opaque; from 10% in, it fades. The right mask
- * does the reverse. Unsupported browsers get hard edges, which is fine.
- * After https://twilson.net/scroll-mask.
- */
-const ScrollMask = () => (
-  <style>{`
-@property --tabs-demo-mask-l { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }
-@property --tabs-demo-mask-r { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }
-
-@keyframes tabs-demo-scroll-mask {
-  0% { --tabs-demo-mask-l: 100%; }
-  10%, 100% { --tabs-demo-mask-l: var(--tabs-demo-fade-from); }
-  0%, 90% { --tabs-demo-mask-r: var(--tabs-demo-fade-from); }
-  100% { --tabs-demo-mask-r: 100%; }
-}
-
-@supports (animation-timeline: scroll()) {
-  .tabs-demo .scroll-mask-x {
-    --tabs-demo-fade-from: calc(100% - 1.5rem);
-    mask-image:
-      linear-gradient(to left, black, black var(--tabs-demo-mask-l), transparent),
-      linear-gradient(to right, black, black var(--tabs-demo-mask-r), transparent);
-    mask-composite: intersect;
-    -webkit-mask-composite: source-in;
-    animation: tabs-demo-scroll-mask linear;
-    animation-timeline: scroll(self inline);
-  }
-}
-`}</style>
-);
-
 /** `open()` adds the tab and selects it in one move — nothing here cleans up. */
 const NewDocument = ({ onCreate }: { onCreate: (id: string, document: Document) => void }) => {
   const open = useTabs((tabs) => tabs.open);
@@ -201,42 +104,13 @@ const NewDocument = ({ onCreate }: { onCreate: (id: string, document: Document)
         setDrafts((count) => count + 1);
         open(id);
       }}
-      className="grid size-7 shrink-0 cursor-pointer select-none place-items-center rounded-md text-[#686868] transition-colors hover:bg-[#f4f4f4] hover:text-[#1a1a1a] focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-[#1a1a1a] dark:text-[#9b9b9b] dark:hover:bg-[#232323] dark:hover:text-[#fcfcfc] dark:focus-visible:outline-[#fcfcfc]"
+      className="grid size-7 shrink-0 cursor-pointer select-none place-items-center rounded-full text-zinc-400 transition-colors hover:bg-zinc-950/5 hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0169cc]/60 dark:text-zinc-500 dark:hover:bg-white/8 dark:hover:text-zinc-100"
     >
-      <PlusIcon />
+      <Plus className="size-[15px]" />
     </button>
   );
 };
 
-// Left-aligned with a deep left pad, not centred — centring in a wide card
-// pushes the prose into the middle and leaves it looking adrift.
-const DocumentBody = ({ document }: { document: Document | undefined }) => {
-  if (!document) return null;
-
-  return (
-    <article className="max-w-2xl px-10 py-8">
-      <h1 className="mb-6 text-balance font-semibold text-[#1a1a1a] text-2xl leading-[1.2] tracking-tight dark:text-[#fcfcfc]">
-        {document.name}
-      </h1>
-      {document.sections.map((section) => (
-        <Fragment key={section.heading}>
-          <h2 className="mt-7 mb-2 font-semibold text-[#1a1a1a] text-base tracking-tight dark:text-[#fcfcfc]">
-            {section.heading}
-          </h2>
-          {section.paragraphs.map((paragraph) => (
-            <p
-              key={paragraph}
-              className="mb-4 text-[#686868] text-sm leading-[1.7] dark:text-[#9b9b9b]"
-            >
-              {paragraph}
-            </p>
-          ))}
-        </Fragment>
-      ))}
-    </article>
-  );
-};
-
 /*
  * The selected tab is lifted onto a card. `group/tab` is declared here rather
  * than on the strip, which is what lets `Action` reveal itself on hover without
@@ -246,56 +120,19 @@ const DocumentBody = ({ document }: { document: Document | undefined }) => {
  * against this box, and the label has to clip under it.
  */
 const tabClass = [
-  "group/tab relative flex h-7 max-w-56 shrink-0 cursor-pointer select-none items-center gap-1.5 overflow-hidden",
-  "rounded-md px-2.5 text-[#686868] text-sm transition-[background-color,color] duration-200 dark:text-[#9b9b9b]",
-  "hover:bg-[#f4f4f4] dark:hover:bg-[#232323]",
-  "focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-[#1a1a1a] dark:focus-visible:outline-[#fcfcfc]",
-  // A real border, transparent until selected. A shadow ring would sit outside
-  // the box, and the scroller clips anything past its content height.
-  "border border-transparent data-[selected]:border-[#f0f0f0] data-[selected]:bg-white data-[selected]:text-[#1a1a1a]",
-  "dark:data-[selected]:border-[#262626] dark:data-[selected]:bg-[#181818] dark:data-[selected]:text-[#fcfcfc]",
+  "group/tab relative flex h-[30px] max-w-56 shrink-0 cursor-pointer select-none items-center gap-1.5 overflow-hidden",
+  "rounded-md px-2.5 font-medium text-[13px] text-zinc-700 transition-[background-color,color] duration-200 dark:text-zinc-300",
+  // Opaque rather than a translucent wash: the action inherits this colour, and
+  // a wash painted twice would show as a darker band behind the ×.
+  "hover:bg-[#e9e9ea] dark:hover:bg-[#262628]",
+  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0169cc]/60",
+  // The raised ring is a shadow outside the box, so TabStrip pads the scroller
+  // to keep it (and the focus outline) from being clipped.
+  "data-[selected]:bg-white data-[selected]:bg-linear-to-b data-[selected]:from-white data-[selected]:to-[#fdfdfd] data-[selected]:text-zinc-900",
+  "data-[selected]:shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)]",
+  "dark:data-[selected]:bg-[#2d2d30] dark:data-[selected]:from-[#313134] dark:data-[selected]:to-[#2a2a2d] dark:data-[selected]:text-zinc-100",
+  "dark:data-[selected]:shadow-[0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]",
+  // The inset ring and top highlight go on an overlay above the content, so the
+  // close button's fading cover can't paint over them.
+  "dark:data-[selected]:after:pointer-events-none dark:data-[selected]:after:absolute dark:data-[selected]:after:inset-0 dark:data-[selected]:after:rounded-[inherit] dark:data-[selected]:after:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05)]",
 ].join(" ");
-
-const FileIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.3"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M4 2h5l3 3v9H4V2Z" strokeLinejoin="round" />
-    <path d="M9 2v3h3" strokeLinejoin="round" />
-  </svg>
-);
-
-const PlusIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    className="size-4"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M8 3v10M3 8h10" />
-  </svg>
-);
-
-const CloseIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    className="size-3"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="m4.5 4.5 7 7M11.5 4.5l-7 7" />
-  </svg>
-);
diff --git a/content/docs/primitives/tabs/demos/chat.tsx b/content/docs/primitives/tabs/demos/chat.tsx
new file mode 100644
index 0000000..4ddaeaa
--- /dev/null
+++ b/content/docs/primitives/tabs/demos/chat.tsx
@@ -0,0 +1,180 @@
+"use client";
+
+import { Composer, type ComposerSubmitData } from "@intentface/chat/composer";
+import { Message } from "@intentface/chat/message";
+import { Thread } from "@intentface/chat/thread";
+import { ArrowUp, Sparkles, Stop } from "@keyline-icons/react";
+import type { KeyboardEvent } from "react";
+
+export type Turn = { id: string; role: "user" | "assistant"; text: string };
+export type Chat = { name: string; turns: Turn[] };
+
+export const REPLIES = [
+  "Right — and the reason is that a function is compared by identity, so a fresh one each render reads as a change.",
+  "In this case, nothing: the parent only re-renders when its own state moves, and none of it does here.",
+  "It depends what is downstream of it. A memo-wrapped child cares; a plain one doesn't.",
+];
+
+// Different lengths on purpose: switching tabs has to visibly change the
+// panel, since that is what the dock is here to demonstrate.
+export const SEEDED: Record<string, Chat> = {
+  "chat-1": {
+    name: "Notes",
+    turns: [
+      { id: "1", role: "user", text: "What's the difference between useMemo and useCallback?" },
+      {
+        id: "2",
+        role: "assistant",
+        text: "useMemo caches a computed value; useCallback caches a function reference. useCallback(fn, deps) is just useMemo(() => fn, deps).",
+      },
+      { id: "3", role: "user", text: "So when do I actually need useCallback?" },
+      { id: "4", role: "assistant", text: REPLIES[2] as string },
+    ],
+  },
+  "chat-2": {
+    name: "Follow-up",
+    turns: [
+      { id: "1", role: "user", text: "Does the parent re-render when I pass a new callback?" },
+      { id: "2", role: "assistant", text: REPLIES[1] as string },
+    ],
+  },
+  "chat-3": {
+    name: "Summary",
+    turns: [
+      { id: "1", role: "user", text: "Summarise the thread so far." },
+      {
+        id: "2",
+        role: "assistant",
+        text: "Cache values with useMemo, cache functions with useCallback, and reach for either only when something downstream is memoised.",
+      },
+      { id: "3", role: "user", text: "Why does identity matter for the function case?" },
+      { id: "4", role: "assistant", text: REPLIES[0] as string },
+      { id: "5", role: "user", text: "Got it." },
+      { id: "6", role: "assistant", text: "That's the whole of it." },
+    ],
+  },
+};
+
+// Thread measures its docked composer and publishes the reserve as
+// --thread-overlay-bottom-height, so the last message never hides behind it.
+export const ChatThread = ({
+  chat,
+  onSend,
+  generating,
+  onStop,
+}: {
+  chat: Chat | undefined;
+  onSend: (text: string) => void;
+  generating: boolean;
+  onStop: () => void;
+}) => {
+  if (!chat) return null;
+
+  // `bottom` rather than the default `follow`: it is the one mode that reserves
+  // no viewport for the last turn. In a dock this small the reserve would push
+  // every earlier turn out of sight, so each chat would look like one exchange.
+  // Escape in the transcript stops the reply too; the composer handles its own first.
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key !== "Escape" || event.defaultPrevented || !generating) return;
+    event.preventDefault();
+    onStop();
+  };
+
+  return (
+    <Thread.Root
+      autoScroll="bottom"
+      onKeyDown={handleKeyDown}
+      className="relative flex h-full w-full overflow-hidden [--thread-overlay-top-height:0.75rem]"
+    >
+      <Thread.Viewport className="h-full w-full overflow-x-hidden overflow-y-auto outline-none [overflow-anchor:auto]">
+        <div className="relative flex min-h-full w-full flex-col pt-(--thread-overlay-top-height) pb-(--thread-overlay-bottom-height)">
+          <Thread.Content className="flex w-full flex-col justify-end gap-4 px-2.5">
+            {chat.turns.map((turn, index) => (
+              <Message.Root
+                key={turn.id}
+                role={turn.role}
+                isLast={index === chat.turns.length - 1}
+                className="group flex w-full flex-col data-[role=user]:items-end"
+              >
+                <Message.Text className="text-sm text-zinc-700 leading-6 group-data-[role=user]:max-w-[80%] group-data-[role=user]:rounded-[20px] group-data-[role=user]:bg-white group-data-[role=user]:px-3.5 group-data-[role=user]:py-1.5 group-data-[role=user]:text-zinc-900 group-data-[role=user]:leading-6 group-data-[role=user]:shadow-[0_0_0_1px_rgb(0_0_0/0.08),0_1px_2px_rgb(0_0_0/0.04)] dark:text-zinc-300 dark:group-data-[role=user]:bg-zinc-800 dark:group-data-[role=user]:text-zinc-100 dark:group-data-[role=user]:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16)]">
+                  {turn.text}
+                </Message.Text>
+              </Message.Root>
+            ))}
+          </Thread.Content>
+        </div>
+      </Thread.Viewport>
+      <Thread.Composer className="absolute inset-x-0 bottom-0 z-2 w-full p-1 pt-0">
+        <DockComposer
+          placeholder="Reply…"
+          onSubmit={onSend}
+          generating={generating}
+          onStop={onStop}
+        />
+      </Thread.Composer>
+    </Thread.Root>
+  );
+};
+
+/**
+ * A chat that does not exist yet. The one place real words survive: a draft
+ * that looks like an empty chat gives no hint that sending it creates a tab.
+ */
+export const NewChat = ({ onStart }: { onStart: (text: string) => void }) => (
+  <div className="flex h-full flex-col">
+    <div className="flex flex-1 flex-col items-center justify-center gap-1.5 px-6 text-center">
+      <Sparkles className="size-5 text-zinc-500 dark:text-zinc-400" />
+      <p className="font-medium text-[13px] text-zinc-900 dark:text-zinc-100">Ask the agent</p>
+      <p className="text-[13px] text-zinc-500 leading-5 dark:text-zinc-400">
+        This is a draft — it becomes a tab once you send something.
+      </p>
+    </div>
+    <div className="shrink-0 p-1 pt-0">
+      <DockComposer placeholder="Ask anything…" onSubmit={onStart} />
+    </div>
+  </div>
+);
+
+// The composer clears itself on submit, so the handler only has to act on the
+// text. Every Composer.Root owns an isolated store — no setup beyond onSubmit.
+const DockComposer = ({
+  placeholder,
+  onSubmit,
+  generating = false,
+  onStop,
+}: {
+  placeholder: string;
+  onSubmit: (text: string) => void;
+  generating?: boolean;
+  onStop?: () => void;
+}) => {
+  const handleSubmit = (data: ComposerSubmitData) => {
+    if (data.kind !== "message") return;
+    const text = data.text.trim();
+    if (text) onSubmit(text);
+  };
+
+  return (
+    <Composer.Root onSubmit={handleSubmit} className="flex w-full flex-col">
+      <Composer.Container className="cursor-text rounded-xl bg-white p-1 shadow-[0_0_0_1px_rgb(0_0_0/0.08),0_1px_2px_-1px_rgb(0_0_0/0.08),0_6px_16px_-6px_rgb(0_0_0/0.1)] dark:bg-zinc-800 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.06),inset_0_0_0_1px_rgb(255_255_255/0.07),0_0_0_1px_rgb(0_0_0/0.2),0_1px_2px_rgb(0_0_0/0.12),0_6px_16px_-6px_rgb(0_0_0/0.22)]">
+        <Composer.Textarea className="max-h-32 min-h-12 overflow-y-auto px-2.5 pt-2.5 text-sm text-zinc-900 dark:text-zinc-100 **:data-composer-editor:w-full **:data-composer-editor:max-w-none **:data-composer-editor:leading-6 [&_[data-composer-editor]:focus]:outline-none">
+          <Composer.Placeholder
+            placeholder={placeholder}
+            className="text-zinc-400 leading-6 dark:text-zinc-500"
+          />
+        </Composer.Textarea>
+        <Composer.Actions className="flex h-12 items-center justify-end px-2.5">
+          {/* While a reply is coming, the button and Escape in the composer stop it. */}
+          <Composer.Submit
+            isGenerating={generating}
+            onStop={onStop}
+            aria-label={generating ? "Stop" : "Send"}
+            className="flex size-7 cursor-pointer items-center justify-center rounded-full bg-[#0169cc] bg-linear-to-b from-[oklch(57.2%_0.166_253.2)] to-[oklch(52.9%_0.173_255)] text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.28),0_0_0_1px_oklch(46.5%_0.146_254.8),0_1px_2px_rgb(1_105_204/0.35)] transition-opacity focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2 disabled:cursor-default disabled:opacity-40"
+          >
+            {generating ? <Stop className="size-[15px]" /> : <ArrowUp className="size-[15px]" />}
+          </Composer.Submit>
+        </Composer.Actions>
+      </Composer.Container>
+    </Composer.Root>
+  );
+};
diff --git a/content/docs/primitives/tabs/demos/closing.tsx b/content/docs/primitives/tabs/demos/closing.tsx
index 7c8f07e..da6d0e1 100644
--- a/content/docs/primitives/tabs/demos/closing.tsx
+++ b/content/docs/primitives/tabs/demos/closing.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { Tabs } from "@intentface/chat/tabs";
-import { type ComponentProps, createElement, type ReactElement } from "react";
+import { Archive, Inbox, Pen, Send, X } from "@keyline-icons/react";
+import { createElement } from "react";
 
 /*
  * The three close policies side by side. Close the open tab in each strip and
@@ -39,7 +40,7 @@ const Strip = ({
   caption: string;
 }) => (
   <div className="flex flex-col gap-2">
-    <code className="font-mono text-[#1a1a1a] text-xs dark:text-[#fcfcfc]">
+    <code className="font-mono text-xs text-zinc-900 dark:text-zinc-100">
       {policy === "unset" ? "selectOnClose unset" : `selectOnClose="${policy}"`}
     </code>
 
@@ -47,144 +48,60 @@ const Strip = ({
       defaultItems={TABS}
       defaultValue="Drafts"
       selectOnClose={policy === "unset" ? undefined : policy}
-      className="flex flex-col gap-1.5"
+      className="relative flex flex-col gap-2 rounded-xl bg-[#f5f5f6] p-2 shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] dark:bg-[#131315] dark:shadow-[0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:after:pointer-events-none dark:after:absolute dark:after:inset-0 dark:after:z-50 dark:after:rounded-[inherit] dark:after:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06)]"
     >
       <Tabs.List aria-label={`Tabs, ${policy}`} className="flex shrink-0 items-center gap-1">
         {(id) => (
           <Tabs.Trigger value={id} aria-label={id} className={tabClass}>
-            <Tabs.Icon className="shrink-0 text-[#949494] dark:text-[#6f6f6f] [&>svg]:size-3.5">
-              {createElement(TAB_ICONS[id] ?? InboxIcon)}
+            <Tabs.Icon className="shrink-0 text-zinc-500 dark:text-zinc-400 [&>svg]:size-[15px]">
+              {createElement(TAB_ICONS[id] ?? Inbox)}
             </Tabs.Icon>
             <span className="min-w-0 truncate">{id}</span>
 
             <Tabs.Action className="absolute inset-y-0 right-1.5 flex items-center opacity-0 transition-opacity group-hover/tab:opacity-100 group-data-[selected]/tab:opacity-100">
               <Tabs.Close
                 aria-label={`Close ${id}`}
-                className="grid size-5 shrink-0 cursor-pointer place-items-center rounded text-[#949494] transition-colors hover:bg-[#dcdcdc] hover:text-[#1a1a1a] dark:text-[#6f6f6f] dark:hover:bg-[#3d3d3d] dark:hover:text-[#fcfcfc]"
+                className="grid size-5 shrink-0 cursor-pointer place-items-center rounded-full text-zinc-400 transition-colors hover:bg-zinc-950/5 hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0169cc]/60 dark:text-zinc-500 dark:hover:bg-white/8 dark:hover:text-zinc-100"
               >
-                <CloseIcon />
+                <X className="size-3.5" />
               </Tabs.Close>
             </Tabs.Action>
           </Tabs.Trigger>
         )}
       </Tabs.List>
 
-      <Tabs.Viewport className="flex h-20 items-center justify-center rounded-xl border border-[#f0f0f0] bg-white px-4 text-sm dark:border-[#262626] dark:bg-[#111111]">
-        {(id) => <span className="text-[#686868] dark:text-[#9b9b9b]">{id}</span>}
+      <Tabs.Viewport className="flex h-20 items-center justify-center rounded-lg bg-white px-4 text-[13px] shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] dark:bg-zinc-900 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]">
+        {(id) => <span className="text-zinc-500 dark:text-zinc-400">{id}</span>}
       </Tabs.Viewport>
     </Tabs.Root>
 
-    <p className="text-[#686868] text-xs leading-5 dark:text-[#9b9b9b]">{caption}</p>
+    <p className="text-xs text-zinc-500 leading-5 dark:text-zinc-400">{caption}</p>
   </div>
 );
 
 const tabClass = [
-  // No strip behind the tabs: they sit on the page ground, and the open one is
-  // a white card matching the panel below, so the selection reads as continuous
+  // No strip behind the tabs: they sit on the frame's ground, and the open one
+  // is raised to match the panel below, so the selection reads as continuous
   // with its content rather than as a highlighted button.
-  "group/tab relative flex h-8 w-40 shrink-0 cursor-pointer select-none items-center gap-2 overflow-hidden",
+  "group/tab relative flex h-[30px] w-40 min-w-0 shrink cursor-pointer select-none items-center gap-2 overflow-hidden",
   // pr-7 reserves the close button's slot permanently. Overlaying it would
   // cover the label on any short title, and padding it in on hover would make
   // every tab jump the moment you point at one.
-  "rounded-lg pr-7 pl-2.5 text-[#686868] text-sm transition-colors dark:text-[#9b9b9b]",
-  "hover:bg-[#e7e7e7] dark:hover:bg-[#262626]",
-  "focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-[#1a1a1a] dark:focus-visible:outline-[#fcfcfc]",
-  "data-[selected]:bg-white data-[selected]:text-[#1a1a1a] data-[selected]:shadow-[0_1px_2px_rgba(0,0,0,0.06)]",
-  "dark:data-[selected]:bg-[#2d2d2d] dark:data-[selected]:text-[#fcfcfc]",
+  "rounded-md pr-7 pl-2.5 font-medium text-[13px] text-zinc-700 transition-colors dark:text-zinc-300",
+  "hover:bg-zinc-950/5 dark:hover:bg-white/8",
+  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0169cc]/60",
+  "data-[selected]:bg-white data-[selected]:bg-linear-to-b data-[selected]:from-white data-[selected]:to-[#fdfdfd] data-[selected]:text-zinc-900",
+  "data-[selected]:shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)]",
+  "dark:data-[selected]:bg-[#2d2d30] dark:data-[selected]:from-[#313134] dark:data-[selected]:to-[#2a2a2d] dark:data-[selected]:text-zinc-100",
+  "dark:data-[selected]:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]",
 ].join(" ");
 
-const CloseIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    className="size-3"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="m4.5 4.5 7 7m0-7-7 7" />
-  </svg>
-);
-
 /* Per-tab icons rather than one generic page glyph — a strip of identical
    icons carries no information, and the whole point of a tab icon is telling
    the tabs apart at a glance. */
-const TAB_ICONS: Record<string, (props: ComponentProps<"svg">) => ReactElement> = {
-  Inbox: InboxIcon,
-  Drafts: PencilIcon,
-  Sent: SendIcon,
-  Archive: ArchiveIcon,
+const TAB_ICONS: Record<string, typeof Inbox> = {
+  Inbox: Inbox,
+  Drafts: Pen,
+  Sent: Send,
+  Archive: Archive,
 };
-
-function InboxIcon(props: ComponentProps<"svg">) {
-  return (
-    <svg
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.3"
-      aria-hidden="true"
-      {...props}
-    >
-      <path
-        d="M2.5 8.5h3l1 2h3l1-2h3v3a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1v-3Z"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M2.5 8.5 4.1 4.3a1 1 0 0 1 .94-.65h5.92a1 1 0 0 1 .94.65l1.6 4.2"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-function PencilIcon(props: ComponentProps<"svg">) {
-  return (
-    <svg
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.3"
-      aria-hidden="true"
-      {...props}
-    >
-      <path d="m10.6 3.1 2.3 2.3-7.2 7.2-3 .7.7-3 7.2-7.2Z" strokeLinejoin="round" />
-      <path d="m9.4 4.3 2.3 2.3" strokeLinecap="round" />
-    </svg>
-  );
-}
-
-function SendIcon(props: ComponentProps<"svg">) {
-  return (
-    <svg
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.3"
-      aria-hidden="true"
-      {...props}
-    >
-      <path d="M13.4 2.6 2.6 6.4l4.4 2.6 2.6 4.4 3.8-10.8Z" strokeLinejoin="round" />
-      <path d="M13.4 2.6 7 9" strokeLinecap="round" />
-    </svg>
-  );
-}
-
-function ArchiveIcon(props: ComponentProps<"svg">) {
-  return (
-    <svg
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.3"
-      aria-hidden="true"
-      {...props}
-    >
-      <rect x="2.5" y="2.6" width="11" height="3" rx="1" strokeLinejoin="round" />
-      <path d="M3.6 5.6v6.8a1 1 0 0 0 1 1h6.8a1 1 0 0 0 1-1V5.6" strokeLinejoin="round" />
-      <path d="M6.6 8.4h2.8" strokeLinecap="round" />
-    </svg>
-  );
-}
diff --git a/content/docs/primitives/tabs/demos/confirm-close.tsx b/content/docs/primitives/tabs/demos/confirm-close.tsx
index 2d459b3..a5e4630 100644
--- a/content/docs/primitives/tabs/demos/confirm-close.tsx
+++ b/content/docs/primitives/tabs/demos/confirm-close.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import { Tabs, useTabs } from "@intentface/chat/tabs";
-import { type ComponentProps, useState } from "react";
+import { Tabs } from "@intentface/chat/tabs";
+import { type ComponentProps, useRef, useState } from "react";
+import { type Asking, Prompt } from "./confirm-prompt";
 
 /*
  * Closing a tab with unsaved changes asks first.
@@ -10,6 +11,9 @@ import { type ComponentProps, useState } from "react";
  * landing. The × and Delete report "close-press" and "keyboard", so cancelling
  * those keeps the tab while the prompt waits. Discard then calls `close()` from
  * code, which reports "imperative-action" and goes through.
+ *
+ * The prompt is a small popover under the tab being closed, placed from that
+ * tab's own offset — no floating library needed for a demo this size.
  */
 
 const DOCUMENTS = ["Brief", "Roadmap", "Notes"];
@@ -17,10 +21,12 @@ const UNSAVED = new Set(["Roadmap"]);
 
 export const ConfirmClose = () => {
   const [items, setItems] = useState(DOCUMENTS);
-  const [asking, setAsking] = useState<string | null>(null);
+  const [asking, setAsking] = useState<Asking | null>(null);
+  const rootRef = useRef<HTMLDivElement>(null);
 
   return (
     <Tabs.Root
+      ref={rootRef}
       items={items}
       defaultValue="Roadmap"
       selectOnClose="adjacent"
@@ -29,28 +35,34 @@ export const ConfirmClose = () => {
         const byUser = eventDetails.reason === "close-press" || eventDetails.reason === "keyboard";
         if (closing && byUser && UNSAVED.has(closing)) {
           eventDetails.cancel();
-          setAsking(closing);
+          // Anchor under the tab: its offset within the (positioned) root.
+          const tab = rootRef.current?.querySelector<HTMLElement>(`[data-tab="${closing}"]`);
+          setAsking({
+            value: closing,
+            left: tab?.offsetLeft ?? 0,
+            top: (tab?.offsetTop ?? 0) + (tab?.offsetHeight ?? 0) + 6,
+          });
           return;
         }
         setItems(next);
       }}
-      className="flex w-full flex-col gap-1.5"
+      className="relative flex w-full flex-col gap-2 rounded-xl bg-[#f5f5f6] p-2 shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] dark:bg-[#131315] dark:shadow-[0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:after:pointer-events-none dark:after:absolute dark:after:inset-0 dark:after:z-50 dark:after:rounded-[inherit] dark:after:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06)]"
     >
       <Tabs.List aria-label="Documents" className="flex shrink-0 items-center gap-1">
         {(id) => (
-          <Tabs.Trigger value={id} className={tabClass}>
+          <Tabs.Trigger value={id} data-tab={id} className={tabClass}>
             <span className="min-w-0 truncate">{id}</span>
             {UNSAVED.has(id) ? (
               <span
                 role="img"
                 aria-label="Unsaved changes"
-                className="size-1.5 shrink-0 rounded-full bg-[#949494] dark:bg-[#6f6f6f]"
+                className="size-1.5 shrink-0 rounded-full bg-zinc-400 dark:bg-zinc-500"
               />
             ) : null}
             <Tabs.Action className="absolute inset-y-0 right-1.5 flex items-center">
               <Tabs.Close
                 aria-label={`Close ${id}`}
-                className="grid size-5 shrink-0 cursor-pointer place-items-center rounded text-[#949494] transition-colors hover:bg-[#dcdcdc] hover:text-[#1a1a1a] dark:text-[#6f6f6f] dark:hover:bg-[#3d3d3d] dark:hover:text-[#fcfcfc]"
+                className="grid size-5 shrink-0 cursor-pointer place-items-center rounded-full text-zinc-400 transition-colors hover:bg-zinc-950/5 hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0169cc]/60 dark:text-zinc-500 dark:hover:bg-white/8 dark:hover:text-zinc-100"
               >
                 <CloseIcon />
               </Tabs.Close>
@@ -59,52 +71,27 @@ export const ConfirmClose = () => {
         )}
       </Tabs.List>
 
-      <Tabs.Viewport className="flex h-24 items-center justify-center rounded-xl border border-[#f0f0f0] bg-white px-4 text-sm dark:border-[#262626] dark:bg-[#111111]">
-        {(id) => <span className="text-[#686868] dark:text-[#9b9b9b]">{id}</span>}
+      <Tabs.Viewport className="flex h-24 items-center justify-center rounded-lg bg-white px-4 text-[13px] shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] dark:bg-zinc-900 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]">
+        {(id) => <span className="text-zinc-500 dark:text-zinc-400">{id}</span>}
       </Tabs.Viewport>
 
-      {asking ? <Prompt value={asking} onAnswer={() => setAsking(null)} /> : null}
+      {asking ? <Prompt asking={asking} onAnswer={() => setAsking(null)} /> : null}
     </Tabs.Root>
   );
 };
 
-/** Inside the Root, so Discard can close the tab the same way any code would. */
-const Prompt = ({ value, onAnswer }: { value: string; onAnswer: () => void }) => {
-  const close = useTabs((tabs) => tabs.close);
-
-  return (
-    <div role="alert" className="flex items-center gap-3 px-1 text-sm">
-      <span className="text-[#1a1a1a] dark:text-[#fcfcfc]">{`Discard your changes to ${value}?`}</span>
-      <button
-        type="button"
-        onClick={() => {
-          onAnswer();
-          close(value);
-        }}
-        className={buttonClass}
-      >
-        Discard
-      </button>
-      <button type="button" onClick={onAnswer} className={buttonClass}>
-        Keep
-      </button>
-    </div>
-  );
-};
-
 const tabClass = [
-  "relative flex h-8 w-40 shrink-0 cursor-pointer select-none items-center gap-2 overflow-hidden",
+  "relative flex h-[30px] w-40 min-w-0 shrink cursor-pointer select-none items-center gap-2 overflow-hidden",
   // pr-7 reserves the close button's slot, so the label never runs under it.
-  "rounded-lg pr-7 pl-2.5 text-[#686868] text-sm transition-colors dark:text-[#9b9b9b]",
-  "hover:bg-[#e7e7e7] dark:hover:bg-[#262626]",
-  "focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-[#1a1a1a] dark:focus-visible:outline-[#fcfcfc]",
-  "data-[selected]:bg-white data-[selected]:text-[#1a1a1a] data-[selected]:shadow-[0_1px_2px_rgba(0,0,0,0.06)]",
-  "dark:data-[selected]:bg-[#2d2d2d] dark:data-[selected]:text-[#fcfcfc]",
+  "rounded-md pr-7 pl-2.5 font-medium text-[13px] text-zinc-700 transition-colors dark:text-zinc-300",
+  "hover:bg-zinc-950/5 dark:hover:bg-white/8",
+  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0169cc]/60",
+  "data-[selected]:bg-white data-[selected]:bg-linear-to-b data-[selected]:from-white data-[selected]:to-[#fdfdfd] data-[selected]:text-zinc-900",
+  "data-[selected]:shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)]",
+  "dark:data-[selected]:bg-[#2d2d30] dark:data-[selected]:from-[#313134] dark:data-[selected]:to-[#2a2a2d] dark:data-[selected]:text-zinc-100",
+  "dark:data-[selected]:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]",
 ].join(" ");
 
-const buttonClass =
-  "h-7 cursor-pointer rounded-md border border-[#e7e7e7] px-2.5 text-[#1a1a1a] text-xs transition-colors hover:bg-[#f4f4f4] dark:border-[#3d3d3d] dark:text-[#fcfcfc] dark:hover:bg-[#262626]";
-
 const CloseIcon = (props: ComponentProps<"svg">) => (
   <svg
     viewBox="0 0 16 16"
diff --git a/content/docs/primitives/tabs/demos/confirm-prompt.tsx b/content/docs/primitives/tabs/demos/confirm-prompt.tsx
new file mode 100644
index 0000000..6edc1e6
--- /dev/null
+++ b/content/docs/primitives/tabs/demos/confirm-prompt.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import { useTabs } from "@intentface/chat/tabs";
+
+export type Asking = { value: string; left: number; top: number };
+
+/** Inside the Root, so Discard can close the tab the same way any code would. */
+export const Prompt = ({ asking, onAnswer }: { asking: Asking; onAnswer: () => void }) => {
+  const close = useTabs((tabs) => tabs.close);
+
+  return (
+    <div
+      role="alertdialog"
+      aria-labelledby="confirm-close-title"
+      aria-describedby="confirm-close-description"
+      style={{ left: asking.left, top: asking.top }}
+      // Escape answers "keep"; preventDefault so the tabs don't also act on it.
+      onKeyDown={(event) => {
+        if (event.key !== "Escape") return;
+        event.preventDefault();
+        onAnswer();
+      }}
+      className="absolute z-60 flex w-64 flex-col gap-3 rounded-xl bg-white p-3 shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_12px_32px_-8px_rgb(0_0_0/0.16)] transition-[opacity,translate] duration-150 ease-out starting:-translate-y-1 starting:opacity-0 dark:bg-zinc-800 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.06),inset_0_0_0_1px_rgb(255_255_255/0.07),0_0_0_1px_rgb(0_0_0/0.16),0_12px_32px_-8px_rgb(0_0_0/0.4)]"
+    >
+      <div className="flex flex-col gap-1">
+        <p
+          id="confirm-close-title"
+          className="font-medium text-[13px] text-zinc-900 dark:text-zinc-100"
+        >
+          Discard changes?
+        </p>
+        <p
+          id="confirm-close-description"
+          className="text-xs text-zinc-500 leading-[18px] dark:text-zinc-400"
+        >
+          {`${asking.value} has unsaved changes. Closing it throws them away.`}
+        </p>
+      </div>
+      <div className="flex justify-end gap-1.5">
+        {/* The safe answer takes focus, so a stray Enter keeps the work. */}
+        <button type="button" ref={focusOnMount} onClick={onAnswer} className={buttonClass}>
+          Keep
+        </button>
+        <button
+          type="button"
+          onClick={() => {
+            onAnswer();
+            close(asking.value);
+          }}
+          className="h-7 cursor-pointer rounded-full bg-[#0169cc] bg-linear-to-b from-[oklch(57.2%_0.166_253.2)] to-[oklch(52.9%_0.173_255)] px-3 font-medium text-[13px] text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.28),0_0_0_1px_oklch(46.5%_0.146_254.8),0_1px_2px_rgb(1_105_204/0.35)] focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2"
+        >
+          Discard
+        </button>
+      </div>
+    </div>
+  );
+};
+
+// A stable ref callback, so focus moves once when the prompt mounts.
+const focusOnMount = (element: HTMLButtonElement | null) => element?.focus();
+
+const buttonClass = [
+  "h-7 cursor-pointer rounded-full px-3 font-medium text-[13px] text-zinc-900 transition-colors dark:text-zinc-100",
+  "bg-white bg-linear-to-b from-white to-[#fdfdfd] hover:from-[#fafafa] hover:to-[#f6f6f6]",
+  "shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)]",
+  "dark:bg-[#2d2d30] dark:from-[#313134] dark:to-[#2a2a2d] dark:hover:from-[#38383b] dark:hover:to-[#313134]",
+  "dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]",
+  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0169cc]/60",
+].join(" ");
diff --git a/content/docs/primitives/tabs/demos/document.tsx b/content/docs/primitives/tabs/demos/document.tsx
new file mode 100644
index 0000000..8d2b6ee
--- /dev/null
+++ b/content/docs/primitives/tabs/demos/document.tsx
@@ -0,0 +1,71 @@
+import { Fragment } from "react";
+
+export type Document = { name: string; sections: { heading: string; paragraphs: string[] }[] };
+
+export const LOREM = {
+  short:
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  medium:
+    "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+  long: "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.",
+};
+
+// Different lengths on purpose: switching tabs has to visibly change the
+// viewport, since that is the thing being demonstrated.
+export const SEEDED: Record<string, Document> = {
+  "doc-1": {
+    name: "Getting started",
+    sections: [
+      { heading: "Overview", paragraphs: [LOREM.short, LOREM.medium] },
+      { heading: "Before you begin", paragraphs: [LOREM.long] },
+    ],
+  },
+  "doc-2": {
+    name: "Installation",
+    sections: [
+      { heading: "Package manager", paragraphs: [LOREM.medium] },
+      { heading: "Peer dependencies", paragraphs: [LOREM.short, LOREM.long] },
+    ],
+  },
+  "doc-3": {
+    name: "Design tokens",
+    sections: [
+      { heading: "Surfaces", paragraphs: [LOREM.long, LOREM.short] },
+      { heading: "State", paragraphs: [LOREM.medium] },
+      { heading: "Typography", paragraphs: [LOREM.short] },
+    ],
+  },
+  "doc-4": {
+    name: "Accessibility",
+    sections: [{ heading: "Roles", paragraphs: [LOREM.medium] }],
+  },
+};
+
+// Left-aligned with a deep left pad, not centred — centring in a wide card
+// pushes the prose into the middle and leaves it looking adrift.
+export const DocumentBody = ({ document }: { document: Document | undefined }) => {
+  if (!document) return null;
+
+  return (
+    <article className="max-w-2xl px-10 py-8">
+      <h1 className="mb-5 text-balance font-semibold text-base text-zinc-900 leading-snug tracking-tight dark:text-zinc-100">
+        {document.name}
+      </h1>
+      {document.sections.map((section) => (
+        <Fragment key={section.heading}>
+          <h2 className="mt-6 mb-1.5 font-semibold text-sm text-zinc-900 tracking-tight dark:text-zinc-100">
+            {section.heading}
+          </h2>
+          {section.paragraphs.map((paragraph) => (
+            <p
+              key={paragraph}
+              className="mb-4 text-sm text-zinc-700 leading-[1.7] dark:text-zinc-300"
+            >
+              {paragraph}
+            </p>
+          ))}
+        </Fragment>
+      ))}
+    </article>
+  );
+};
diff --git a/content/docs/primitives/tabs/demos/external.tsx b/content/docs/primitives/tabs/demos/external.tsx
index 9a6ceb9..58d25dc 100644
--- a/content/docs/primitives/tabs/demos/external.tsx
+++ b/content/docs/primitives/tabs/demos/external.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { Tabs, type TabsStore, useTabsStore } from "@intentface/chat/tabs";
-import { type ComponentProps, createElement, type ReactElement, useState } from "react";
+import { Archive, Inbox, Pen, Send, X } from "@keyline-icons/react";
+import { createElement, useState } from "react";
 
 /*
  * Opening a tab from somewhere else in the app.
@@ -24,28 +25,28 @@ export const ExternalTabs = () => {
         defaultItems={["Inbox"]}
         defaultValue="Inbox"
         selectOnClose="adjacent"
-        className="flex flex-col gap-1.5"
+        className="relative flex flex-col gap-2 rounded-xl bg-[#f5f5f6] p-2 shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] dark:bg-[#131315] dark:shadow-[0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:after:pointer-events-none dark:after:absolute dark:after:inset-0 dark:after:z-50 dark:after:rounded-[inherit] dark:after:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06)]"
       >
         <Tabs.List aria-label="Documents" className="flex shrink-0 flex-wrap items-center gap-1">
           {(id) => (
             <Tabs.Trigger value={id} aria-label={id} className={tabClass}>
-              <Tabs.Icon className="shrink-0 text-[#949494] dark:text-[#6f6f6f] [&>svg]:size-3.5">
-                {createElement(TAB_ICONS[id] ?? InboxIcon)}
+              <Tabs.Icon className="shrink-0 text-zinc-500 dark:text-zinc-400 [&>svg]:size-[15px]">
+                {createElement(TAB_ICONS[id] ?? Inbox)}
               </Tabs.Icon>
               <span className="min-w-0 truncate">{id}</span>
               <Tabs.Action className="absolute inset-y-0 right-1.5 flex items-center opacity-0 transition-opacity group-hover/tab:opacity-100 group-data-[selected]/tab:opacity-100">
                 <Tabs.Close
                   aria-label={`Close ${id}`}
-                  className="grid size-5 shrink-0 cursor-pointer place-items-center rounded text-[#949494] transition-colors hover:bg-[#dcdcdc] hover:text-[#1a1a1a] dark:text-[#6f6f6f] dark:hover:bg-[#3d3d3d] dark:hover:text-[#fcfcfc]"
+                  className="grid size-5 shrink-0 cursor-pointer place-items-center rounded-full text-zinc-400 transition-colors hover:bg-zinc-950/5 hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0169cc]/60 dark:text-zinc-500 dark:hover:bg-white/8 dark:hover:text-zinc-100"
                 >
-                  <CloseIcon />
+                  <X className="size-3.5" />
                 </Tabs.Close>
               </Tabs.Action>
             </Tabs.Trigger>
           )}
         </Tabs.List>
 
-        <Tabs.Viewport className="flex h-24 items-center justify-center rounded-xl border border-[#f0f0f0] bg-white px-4 text-sm text-[#686868] dark:border-[#262626] dark:bg-[#111111] dark:text-[#9b9b9b]">
+        <Tabs.Viewport className="flex h-24 items-center justify-center rounded-lg bg-white px-4 text-[13px] text-zinc-500 shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] dark:bg-zinc-900 dark:text-zinc-400 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]">
           {(id) => <span>{id}</span>}
         </Tabs.Viewport>
       </Tabs.Root>
@@ -62,13 +63,13 @@ const Launcher = ({ store }: { store: TabsStore }) => {
   const items = useTabsStore(store, (tabs) => tabs.items);
 
   return (
-    <div className="flex flex-wrap items-center gap-2">
+    <div className="flex flex-wrap items-center justify-center gap-2">
       {DOCUMENTS.map((id) => (
         <button
           key={id}
           type="button"
           onClick={() => store.getSnapshot().open(id)}
-          className="h-8 cursor-pointer rounded-full border border-[#e4e4e4] bg-white px-4 font-medium text-[#1a1a1a] text-sm transition-colors hover:bg-[#f4f4f4] focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-[#1a1a1a] dark:border-[#2d2d2d] dark:bg-[#181818] dark:text-[#fcfcfc] dark:hover:bg-[#232323] dark:focus-visible:outline-[#fcfcfc]"
+          className="h-8 cursor-pointer rounded-full bg-white bg-linear-to-b from-white to-[#fdfdfd] px-4 font-medium text-[13px] text-zinc-900 shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)] transition-colors hover:from-[#fafafa] hover:to-[#f6f6f6] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0169cc]/60 dark:bg-[#2d2d30] dark:from-[#313134] dark:to-[#2a2a2d] dark:text-zinc-100 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:hover:from-[#38383b] dark:hover:to-[#313134]"
         >
           {items.includes(id) ? `Go to ${id}` : `Open ${id}`}
         </button>
@@ -78,112 +79,28 @@ const Launcher = ({ store }: { store: TabsStore }) => {
 };
 
 const tabClass = [
-  // No strip behind the tabs: they sit on the page ground, and the open one is
-  // a white card matching the panel below, so the selection reads as continuous
+  // No strip behind the tabs: they sit on the frame's ground, and the open one
+  // is raised to match the panel below, so the selection reads as continuous
   // with its content rather than as a highlighted button.
-  "group/tab relative flex h-8 w-40 shrink-0 cursor-pointer select-none items-center gap-2 overflow-hidden",
+  "group/tab relative flex h-[30px] w-40 min-w-0 shrink cursor-pointer select-none items-center gap-2 overflow-hidden",
   // pr-7 reserves the close button's slot permanently. Overlaying it would
   // cover the label on any short title, and padding it in on hover would make
   // every tab jump the moment you point at one.
-  "rounded-lg pr-7 pl-2.5 text-[#686868] text-sm transition-colors dark:text-[#9b9b9b]",
-  "hover:bg-[#e7e7e7] dark:hover:bg-[#262626]",
-  "focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-[#1a1a1a] dark:focus-visible:outline-[#fcfcfc]",
-  "data-[selected]:bg-white data-[selected]:text-[#1a1a1a] data-[selected]:shadow-[0_1px_2px_rgba(0,0,0,0.06)]",
-  "dark:data-[selected]:bg-[#2d2d2d] dark:data-[selected]:text-[#fcfcfc]",
+  "rounded-md pr-7 pl-2.5 font-medium text-[13px] text-zinc-700 transition-colors dark:text-zinc-300",
+  "hover:bg-zinc-950/5 dark:hover:bg-white/8",
+  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0169cc]/60",
+  "data-[selected]:bg-white data-[selected]:bg-linear-to-b data-[selected]:from-white data-[selected]:to-[#fdfdfd] data-[selected]:text-zinc-900",
+  "data-[selected]:shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)]",
+  "dark:data-[selected]:bg-[#2d2d30] dark:data-[selected]:from-[#313134] dark:data-[selected]:to-[#2a2a2d] dark:data-[selected]:text-zinc-100",
+  "dark:data-[selected]:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]",
 ].join(" ");
 
-const CloseIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    className="size-3"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="m4.5 4.5 7 7m0-7-7 7" />
-  </svg>
-);
-
 /* Per-tab icons rather than one generic page glyph — a strip of identical
    icons carries no information, and the whole point of a tab icon is telling
    the tabs apart at a glance. */
-const TAB_ICONS: Record<string, (props: ComponentProps<"svg">) => ReactElement> = {
-  Inbox: InboxIcon,
-  Drafts: PencilIcon,
-  Sent: SendIcon,
-  Archive: ArchiveIcon,
+const TAB_ICONS: Record<string, typeof Inbox> = {
+  Inbox: Inbox,
+  Drafts: Pen,
+  Sent: Send,
+  Archive: Archive,
 };
-
-function InboxIcon(props: ComponentProps<"svg">) {
-  return (
-    <svg
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.3"
-      aria-hidden="true"
-      {...props}
-    >
-      <path
-        d="M2.5 8.5h3l1 2h3l1-2h3v3a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1v-3Z"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M2.5 8.5 4.1 4.3a1 1 0 0 1 .94-.65h5.92a1 1 0 0 1 .94.65l1.6 4.2"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-function PencilIcon(props: ComponentProps<"svg">) {
-  return (
-    <svg
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.3"
-      aria-hidden="true"
-      {...props}
-    >
-      <path d="m10.6 3.1 2.3 2.3-7.2 7.2-3 .7.7-3 7.2-7.2Z" strokeLinejoin="round" />
-      <path d="m9.4 4.3 2.3 2.3" strokeLinecap="round" />
-    </svg>
-  );
-}
-
-function SendIcon(props: ComponentProps<"svg">) {
-  return (
-    <svg
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.3"
-      aria-hidden="true"
-      {...props}
-    >
-      <path d="M13.4 2.6 2.6 6.4l4.4 2.6 2.6 4.4 3.8-10.8Z" strokeLinejoin="round" />
-      <path d="M13.4 2.6 7 9" strokeLinecap="round" />
-    </svg>
-  );
-}
-
-function ArchiveIcon(props: ComponentProps<"svg">) {
-  return (
-    <svg
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.3"
-      aria-hidden="true"
-      {...props}
-    >
-      <rect x="2.5" y="2.6" width="11" height="3" rx="1" strokeLinejoin="round" />
-      <path d="M3.6 5.6v6.8a1 1 0 0 0 1 1h6.8a1 1 0 0 0 1-1V5.6" strokeLinejoin="round" />
-      <path d="M6.6 8.4h2.8" strokeLinecap="round" />
-    </svg>
-  );
-}
diff --git a/content/docs/primitives/tabs/demos/hover-motion.css b/content/docs/primitives/tabs/demos/hover-motion.css
new file mode 100644
index 0000000..040e194
--- /dev/null
+++ b/content/docs/primitives/tabs/demos/hover-motion.css
@@ -0,0 +1,24 @@
+/* The surface fades and drops in; the switch between floating tabs is the
+   positioner moving, so it only needs the top/left transition. */
+
+[data-tabs-positioner]:has(> .hover-demo-popup) {
+  transition:
+    top 150ms ease-out,
+    left 150ms ease-out;
+}
+.hover-demo-popup {
+  transition:
+    opacity 150ms ease-out,
+    transform 150ms ease-out;
+}
+.hover-demo-popup[data-starting-style],
+.hover-demo-popup[data-ending-style] {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-tabs-positioner]:has(> .hover-demo-popup),
+  .hover-demo-popup {
+    transition: none;
+  }
+}
diff --git a/content/docs/primitives/tabs/demos/hover.tsx b/content/docs/primitives/tabs/demos/hover.tsx
index b27694f..f337d28 100644
--- a/content/docs/primitives/tabs/demos/hover.tsx
+++ b/content/docs/primitives/tabs/demos/hover.tsx
@@ -1,53 +1,32 @@
 "use client";
 
 import { Tabs } from "@intentface/chat/tabs";
-import { type ComponentProps, useState } from "react";
+import { useState } from "react";
+import "./hover-motion.css";
+import { BubbleIcon, FileIcon } from "./icons";
+import { Body, Preview, TABS } from "./pages";
 
 /*
- * A page strip where a conversation can be glanced at without leaving the page.
+ * A page strip where any tab can be glanced at without leaving the page.
  *
  * The page is this component's own state, not the tabs' selection: pressing a
  * tab opens it in the card below. The tabs' selection is only what floats.
- * Conversations open on hover and float over the page; press one and it
- * becomes the page instead.
+ * Hovering a tab floats a preview over the page, a document as a mini page and
+ * a conversation as a small chat; press one and it becomes the page instead.
  *
  * `onValueChange` tells the two apart by `eventDetails.reason`. Click into the
  * reply field and the float stays, however far the mouse wanders; Escape or
  * pressing a tab ends it.
  */
 
-type Tab = { name: string; kind: "document" | "conversation"; lines: string[] };
-
-const TABS: Record<string, Tab> = {
-  brief: {
-    name: "Launch brief",
-    kind: "document",
-    lines: ["Ship the beta to the waitlist on the 14th.", "Pricing stays as drafted."],
-  },
-  roadmap: {
-    name: "Roadmap",
-    kind: "document",
-    lines: ["Q4: offline drafts, shared views.", "Q1: the public API."],
-  },
-  "chat-launch": {
-    name: "Launch questions",
-    kind: "conversation",
-    lines: ["Is the 14th still realistic?", "Yes, if the waitlist email goes out on the 12th."],
-  },
-  "chat-pricing": {
-    name: "Pricing check",
-    kind: "conversation",
-    lines: ["Do we discount annual plans?", "Two months free, same as last year."],
-  },
-};
-
 export const Hover = () => {
   const [page, setPage] = useState("brief");
   const [floating, setFloating] = useState<string | null>(null);
+  // Replies typed into a floating conversation, kept per tab for this visit.
+  const [replies, setReplies] = useState<Record<string, string[]>>({});
 
   return (
-    <div className="flex h-96 w-full flex-col overflow-hidden rounded-xl border border-[#f0f0f0] bg-[#fafafa] dark:border-[#262626] dark:bg-[#111111]">
-      <HoverMotion />
+    <div className="relative flex h-96 w-full flex-col overflow-hidden rounded-xl bg-[#f5f5f6] shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] dark:bg-[#131315] dark:shadow-[0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:after:pointer-events-none dark:after:absolute dark:after:inset-0 dark:after:z-50 dark:after:rounded-[inherit] dark:after:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06)]">
       <Tabs.Root
         defaultItems={Object.keys(TABS)}
         value={floating}
@@ -69,11 +48,11 @@ export const Hover = () => {
             return (
               <Tabs.Trigger
                 value={id}
-                openOnHover={tab?.kind === "conversation"}
+                openOnHover
                 aria-current={id === page ? "page" : undefined}
                 className={tabClass}
               >
-                <Tabs.Icon className="[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:opacity-60">
+                <Tabs.Icon className="text-zinc-500 dark:text-zinc-400 [&>svg]:size-[15px] [&>svg]:shrink-0">
                   {tab?.kind === "conversation" ? <BubbleIcon /> : <FileIcon />}
                 </Tabs.Icon>
                 <span className="min-w-0 truncate">{tab?.name ?? id}</span>
@@ -82,14 +61,32 @@ export const Hover = () => {
           }}
         </Tabs.List>
 
-        <div className="mx-2 mb-2 min-h-0 flex-1 overflow-auto rounded-md border border-[#f0f0f0] bg-white dark:border-[#262626] dark:bg-[#181818]">
-          <Body tab={TABS[page]} />
+        <div className="mx-2 mb-2 min-h-0 flex-1 overflow-auto rounded-lg bg-white shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] dark:bg-zinc-900 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]">
+          <Body tab={TABS[page]} replies={replies[page]} />
         </div>
 
         <Tabs.Portal>
           <Tabs.Positioner side="bottom" align="start" sideOffset={6}>
-            <Tabs.Popup className="hover-demo-popup w-80 overflow-hidden rounded-xl border border-[#f0f0f0] bg-white shadow-lg dark:border-[#262626] dark:bg-[#181818]">
-              <Tabs.Viewport>{(id) => <Conversation tab={TABS[id]} />}</Tabs.Viewport>
+            <Tabs.Popup className="hover-demo-popup w-80 overflow-hidden rounded-xl bg-white p-1 shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_12px_32px_-8px_rgb(0_0_0/0.16)] dark:bg-zinc-900 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.06),inset_0_0_0_1px_rgb(255_255_255/0.07),0_0_0_1px_rgb(0_0_0/0.16),0_12px_32px_-8px_rgb(0_0_0/0.4)]">
+              <Tabs.Viewport>
+                {(id) => (
+                  <Preview
+                    tab={TABS[id]}
+                    replies={replies[id]}
+                    // Opening is the same as pressing the tab: it becomes the page.
+                    onOpen={() => {
+                      setPage(id);
+                      setFloating(null);
+                    }}
+                    onReply={(text) =>
+                      setReplies((current) => ({
+                        ...current,
+                        [id]: [...(current[id] ?? []), text],
+                      }))
+                    }
+                  />
+                )}
+              </Tabs.Viewport>
             </Tabs.Popup>
           </Tabs.Positioner>
         </Tabs.Portal>
@@ -98,96 +95,16 @@ export const Hover = () => {
   );
 };
 
-const Body = ({ tab }: { tab: Tab | undefined }) =>
-  tab ? (
-    <article className="px-8 py-6">
-      <h1 className="mb-4 font-semibold text-[#1a1a1a] text-xl tracking-tight dark:text-[#fcfcfc]">
-        {tab.name}
-      </h1>
-      {tab.lines.map((line) => (
-        <p key={line} className="mb-2 text-[#686868] text-sm leading-[1.7] dark:text-[#9b9b9b]">
-          {line}
-        </p>
-      ))}
-    </article>
-  ) : null;
-
-const Conversation = ({ tab }: { tab: Tab | undefined }) =>
-  tab ? (
-    <div className="flex flex-col gap-3 p-3">
-      <p className="font-medium text-[#1a1a1a] text-sm dark:text-[#fcfcfc]">{tab.name}</p>
-      {tab.lines.map((line, index) => (
-        <p
-          key={line}
-          className={[
-            "max-w-[85%] rounded-lg px-2.5 py-1.5 text-sm",
-            index % 2 === 0
-              ? "self-end bg-[#f4f4f4] text-[#1a1a1a] dark:bg-[#232323] dark:text-[#fcfcfc]"
-              : "text-[#686868] dark:text-[#9b9b9b]",
-          ].join(" ")}
-        >
-          {line}
-        </p>
-      ))}
-      <input
-        aria-label={`Reply in ${tab.name}`}
-        placeholder="Reply…"
-        className="h-8 rounded-md border border-[#f0f0f0] bg-transparent px-2.5 text-sm outline-none focus:border-[#c4c4c4] dark:border-[#262626] dark:focus:border-[#4a4a4a]"
-      />
-    </div>
-  ) : null;
-
-/* The surface fades and drops in; the switch between floating tabs is the
-   positioner moving, so it only needs the top/left transition. */
-const HoverMotion = () => (
-  <style>{`
-[data-tabs-positioner]:has(> .hover-demo-popup) { transition: top 150ms ease-out, left 150ms ease-out; }
-.hover-demo-popup { transition: opacity 150ms ease-out, transform 150ms ease-out; }
-.hover-demo-popup[data-starting-style], .hover-demo-popup[data-ending-style] { opacity: 0; transform: translateY(-4px); }
-@media (prefers-reduced-motion: reduce) {
-  [data-tabs-positioner]:has(> .hover-demo-popup), .hover-demo-popup { transition: none; }
-}
-`}</style>
-);
-
 const tabClass = [
-  "relative flex h-7 max-w-48 shrink-0 cursor-pointer select-none items-center gap-1.5 overflow-hidden",
-  "rounded-md px-2.5 text-[#686868] text-sm transition-[background-color,color] duration-200 dark:text-[#9b9b9b]",
-  "hover:bg-[#f4f4f4] dark:hover:bg-[#232323]",
-  "focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-[#1a1a1a] dark:focus-visible:outline-[#fcfcfc]",
+  "relative flex h-[30px] max-w-48 shrink-0 cursor-pointer select-none items-center gap-1.5 overflow-hidden",
+  "rounded-md px-2.5 font-medium text-[13px] text-zinc-700 transition-[background-color,color] duration-200 dark:text-zinc-300",
+  "hover:bg-zinc-950/5 dark:hover:bg-white/8",
+  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0169cc]/60",
   // The page you are on, which this demo marks itself with aria-current.
-  "border border-transparent aria-[current=page]:border-[#f0f0f0] aria-[current=page]:bg-white aria-[current=page]:text-[#1a1a1a]",
-  "dark:aria-[current=page]:border-[#262626] dark:aria-[current=page]:bg-[#181818] dark:aria-[current=page]:text-[#fcfcfc]",
+  "aria-[current=page]:bg-white aria-[current=page]:bg-linear-to-b aria-[current=page]:from-white aria-[current=page]:to-[#fdfdfd] aria-[current=page]:text-zinc-900",
+  "aria-[current=page]:shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)]",
+  "dark:aria-[current=page]:bg-[#2d2d30] dark:aria-[current=page]:from-[#313134] dark:aria-[current=page]:to-[#2a2a2d] dark:aria-[current=page]:text-zinc-100",
+  "dark:aria-[current=page]:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]",
   // The floating tab is the tabs' selection, and keeps its hover colour while you are over the surface.
-  "data-[selected]:bg-[#f4f4f4] data-[selected]:text-[#1a1a1a] dark:data-[selected]:bg-[#232323] dark:data-[selected]:text-[#fcfcfc]",
+  "data-[selected]:bg-zinc-950/5 data-[selected]:text-zinc-900 dark:data-[selected]:bg-white/8 dark:data-[selected]:text-zinc-100",
 ].join(" ");
-
-const FileIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.3"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M4 2h5l3 3v9H4V2Z" strokeLinejoin="round" />
-    <path d="M9 2v3h3" strokeLinejoin="round" />
-  </svg>
-);
-
-const BubbleIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.3"
-    aria-hidden="true"
-    {...props}
-  >
-    <path
-      d="M2.5 4.5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v4.5a2 2 0 0 1-2 2H7l-3 2.5v-2.5h0a2 2 0 0 1-1.5-2V4.5Z"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
diff --git a/content/docs/primitives/tabs/demos/icons.tsx b/content/docs/primitives/tabs/demos/icons.tsx
new file mode 100644
index 0000000..cc29ad5
--- /dev/null
+++ b/content/docs/primitives/tabs/demos/icons.tsx
@@ -0,0 +1,31 @@
+import type { ComponentProps } from "react";
+
+export const FileIcon = (props: ComponentProps<"svg">) => (
+  <svg
+    viewBox="0 0 16 16"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.3"
+    aria-hidden="true"
+    {...props}
+  >
+    <path d="M4 2h5l3 3v9H4V2Z" strokeLinejoin="round" />
+    <path d="M9 2v3h3" strokeLinejoin="round" />
+  </svg>
+);
+
+export const BubbleIcon = (props: ComponentProps<"svg">) => (
+  <svg
+    viewBox="0 0 16 16"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.3"
+    aria-hidden="true"
+    {...props}
+  >
+    <path
+      d="M2.5 4.5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v4.5a2 2 0 0 1-2 2H7l-3 2.5v-2.5h0a2 2 0 0 1-1.5-2V4.5Z"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/content/docs/primitives/tabs/demos/pages.tsx b/content/docs/primitives/tabs/demos/pages.tsx
new file mode 100644
index 0000000..30da291
--- /dev/null
+++ b/content/docs/primitives/tabs/demos/pages.tsx
@@ -0,0 +1,229 @@
+"use client";
+
+import { ArrowUp, ArrowUpRight } from "@keyline-icons/react";
+import type { FormEvent } from "react";
+import { BubbleIcon } from "./icons";
+
+// A document is a few Markdown-ish blocks; a conversation is the exchange.
+type Block = { kind: "p" | "h2" | "li"; text: string };
+
+export type Tab =
+  | { name: string; kind: "document"; blocks: Block[] }
+  | { name: string; kind: "conversation"; lines: string[] };
+
+export const TABS: Record<string, Tab> = {
+  brief: {
+    name: "Launch brief",
+    kind: "document",
+    blocks: [
+      { kind: "p", text: "Ship the beta to the waitlist on the 14th." },
+      { kind: "h2", text: "Scope" },
+      { kind: "li", text: "Invite-only, 500 seats" },
+      { kind: "li", text: "Pricing stays as drafted" },
+      { kind: "li", text: "Feedback through the in-app widget" },
+      { kind: "h2", text: "Owners" },
+      { kind: "p", text: "Design owns the launch page; engineering owns the waitlist email." },
+    ],
+  },
+  roadmap: {
+    name: "Roadmap",
+    kind: "document",
+    blocks: [
+      { kind: "p", text: "What ships next, by quarter." },
+      { kind: "h2", text: "Q4" },
+      { kind: "li", text: "Offline drafts" },
+      { kind: "li", text: "Shared views" },
+      { kind: "h2", text: "Q1" },
+      { kind: "li", text: "The public API" },
+      { kind: "li", text: "Usage-based pricing" },
+    ],
+  },
+  "chat-launch": {
+    name: "Launch questions",
+    kind: "conversation",
+    lines: ["Is the 14th still realistic?", "Yes, if the waitlist email goes out on the 12th."],
+  },
+  "chat-pricing": {
+    name: "Pricing check",
+    kind: "conversation",
+    lines: ["Do we discount annual plans?", "Two months free, same as last year."],
+  },
+};
+
+// The blocks at two sizes: the open page, and the preview's mini page.
+const Blocks = ({ blocks, mini }: { blocks: Block[]; mini?: boolean }) => (
+  <div className={mini ? "flex flex-col gap-1" : "flex flex-col gap-2"}>
+    {blocks.map((block) =>
+      block.kind === "h2" ? (
+        <h2
+          key={block.text}
+          className={[
+            "font-semibold text-zinc-900 dark:text-zinc-100",
+            mini ? "pt-1.5 text-[11px]" : "pt-3 text-sm",
+          ].join(" ")}
+        >
+          {block.text}
+        </h2>
+      ) : (
+        <p
+          key={block.text}
+          className={[
+            "text-zinc-700 dark:text-zinc-300",
+            mini ? "text-[11px] leading-4" : "text-sm leading-[1.7]",
+            block.kind === "li" &&
+              "relative pl-3.5 before:absolute before:left-1 before:content-['•'] before:text-zinc-400",
+          ]
+            .filter(Boolean)
+            .join(" ")}
+        >
+          {block.text}
+        </p>
+      ),
+    )}
+  </div>
+);
+
+// A conversation's own lines, then whatever was replied in this session.
+const messagesOf = (tab: Extract<Tab, { kind: "conversation" }>, replies: string[]) => [
+  ...tab.lines.map((text, index) => ({ text, mine: index % 2 === 0 })),
+  ...replies.map((text) => ({ text, mine: true })),
+];
+
+export const Body = ({ tab, replies = [] }: { tab: Tab | undefined; replies?: string[] }) =>
+  tab ? (
+    <article className="px-8 py-6">
+      <h1 className="mb-3 font-semibold text-base text-zinc-900 tracking-tight dark:text-zinc-100">
+        {tab.name}
+      </h1>
+      {tab.kind === "document" ? (
+        <Blocks blocks={tab.blocks} />
+      ) : (
+        messagesOf(tab, replies).map((message, index) => (
+          <p
+            key={`${index}-${message.text}`}
+            className="mb-2 text-sm text-zinc-700 leading-[1.7] dark:text-zinc-300"
+          >
+            {message.text}
+          </p>
+        ))
+      )}
+    </article>
+  ) : null;
+
+type PreviewProps = {
+  tab: Tab | undefined;
+  replies?: string[];
+  /** Turns the previewed tab into the page. */
+  onOpen: () => void;
+  onReply: (text: string) => void;
+};
+
+// What floats on hover: a document as a mini page, a conversation as a small chat.
+export const Preview = ({ tab, replies = [], onOpen, onReply }: PreviewProps) =>
+  tab?.kind === "document" ? (
+    <DocumentPreview tab={tab} onOpen={onOpen} />
+  ) : tab?.kind === "conversation" ? (
+    <Conversation tab={tab} replies={replies} onReply={onReply} />
+  ) : null;
+
+// A Notion-style mini page: the title with an Open action, then the document cut
+// off under a fade. As tall as a conversation, so the popup only glides between them.
+const DocumentPreview = ({
+  tab,
+  onOpen,
+}: {
+  tab: Extract<Tab, { kind: "document" }>;
+  onOpen: () => void;
+}) => (
+  <div className="h-[221px] overflow-hidden px-4 pt-3 mask-[linear-gradient(to_bottom,black_70%,transparent)]">
+    <div className="mb-2 flex items-center justify-between gap-2">
+      <p className="truncate font-semibold text-base text-zinc-900 tracking-tight dark:text-zinc-100">
+        {tab.name}
+      </p>
+      <button
+        type="button"
+        aria-label={`Open ${tab.name}`}
+        onClick={onOpen}
+        className="grid size-6 shrink-0 cursor-pointer place-items-center rounded-md text-zinc-500 hover:bg-zinc-950/5 hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 dark:text-zinc-400 dark:hover:bg-white/8 dark:hover:text-zinc-100"
+      >
+        <ArrowUpRight className="size-3.5" />
+      </button>
+    </div>
+    <Blocks blocks={tab.blocks} mini />
+  </div>
+);
+
+// Keeps the newest message in view: runs as it mounts, scrolling only the
+// message list, never the page around it.
+const pinToEnd = (node: HTMLElement | null) => {
+  const list = node?.parentElement;
+  if (list) list.scrollTop = list.scrollHeight;
+};
+
+// A small chat window: header, the exchange, and a composer-style reply field.
+const Conversation = ({
+  tab,
+  replies,
+  onReply,
+}: {
+  tab: Extract<Tab, { kind: "conversation" }>;
+  replies: string[];
+  onReply: (text: string) => void;
+}) => {
+  const messages = messagesOf(tab, replies);
+
+  const send = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const text = String(new FormData(event.currentTarget).get("reply") ?? "").trim();
+    if (!text) return;
+    onReply(text);
+    event.currentTarget.reset();
+  };
+
+  return (
+    <div className="flex flex-col">
+      <div className="flex h-9 items-center gap-1.5 px-2.5">
+        <BubbleIcon className="size-[15px] text-zinc-500 dark:text-zinc-400" />
+        <p className="font-medium text-[13px] text-zinc-900 dark:text-zinc-100">{tab.name}</p>
+      </div>
+      {/* One height for every conversation: the popup only glides sideways
+          between tabs instead of snapping taller or shorter mid-slide. */}
+      <div className="flex h-36 flex-col gap-4 overflow-y-auto px-2.5 py-4">
+        {messages.map((message, index) => (
+          <p
+            key={`${index}-${message.text}`}
+            ref={index === messages.length - 1 ? pinToEnd : undefined}
+            className={[
+              "shrink-0 text-sm leading-6",
+              message.mine
+                ? "max-w-[80%] self-end rounded-[20px] bg-white px-3.5 py-1.5 text-zinc-900 shadow-[0_0_0_1px_rgb(0_0_0/0.08),0_1px_2px_rgb(0_0_0/0.04)] dark:bg-zinc-800 dark:text-zinc-100 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16)]"
+                : "text-zinc-700 dark:text-zinc-300",
+            ].join(" ")}
+          >
+            {message.text}
+          </p>
+        ))}
+      </div>
+      {/* The focus ring sits on the card, so the input itself draws none. */}
+      <form
+        onSubmit={send}
+        className="flex items-center gap-1 rounded-xl bg-white p-1 pl-2.5 shadow-[0_0_0_1px_rgb(0_0_0/0.08),0_1px_2px_-1px_rgb(0_0_0/0.08),0_6px_16px_-6px_rgb(0_0_0/0.1)] has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-[#0169cc]/60 has-[input:focus-visible]:outline-offset-2 dark:bg-zinc-800 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.06),inset_0_0_0_1px_rgb(255_255_255/0.07),0_0_0_1px_rgb(0_0_0/0.2),0_1px_2px_rgb(0_0_0/0.12),0_6px_16px_-6px_rgb(0_0_0/0.22)]"
+      >
+        <input
+          name="reply"
+          aria-label={`Reply in ${tab.name}`}
+          placeholder="Reply…"
+          autoComplete="off"
+          className="h-8 min-w-0 flex-1 bg-transparent text-sm text-zinc-900 outline-none placeholder:text-zinc-400 dark:text-zinc-100 dark:placeholder:text-zinc-500"
+        />
+        <button
+          type="submit"
+          aria-label="Send reply"
+          className="flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-full bg-[#0169cc] bg-linear-to-b from-[oklch(57.2%_0.166_253.2)] to-[oklch(52.9%_0.173_255)] text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.28),0_0_0_1px_oklch(46.5%_0.146_254.8),0_1px_2px_rgb(1_105_204/0.35)] focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2"
+        >
+          <ArrowUp className="size-[15px]" />
+        </button>
+      </form>
+    </div>
+  );
+};
diff --git a/content/docs/primitives/tabs/demos/tab-strip.css b/content/docs/primitives/tabs/demos/tab-strip.css
new file mode 100644
index 0000000..697643b
--- /dev/null
+++ b/content/docs/primitives/tabs/demos/tab-strip.css
@@ -0,0 +1,48 @@
+/*
+ * Scroll-position-driven edge fades, with no JavaScript: a scroll timeline
+ * animates two registered custom properties, and those feed the mask. At the
+ * start the left mask is fully opaque; from 10% in, it fades. The right mask
+ * does the reverse. Unsupported browsers get hard edges, which is fine.
+ * After https://twilson.net/scroll-mask.
+ */
+
+@property --tabs-demo-mask-l {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tabs-demo-mask-r {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@keyframes tabs-demo-scroll-mask {
+  0% {
+    --tabs-demo-mask-l: 100%;
+    --tabs-demo-mask-r: var(--tabs-demo-fade-from);
+  }
+  10% {
+    --tabs-demo-mask-l: var(--tabs-demo-fade-from);
+  }
+  90% {
+    --tabs-demo-mask-r: var(--tabs-demo-fade-from);
+  }
+  100% {
+    --tabs-demo-mask-l: var(--tabs-demo-fade-from);
+    --tabs-demo-mask-r: 100%;
+  }
+}
+
+@supports (animation-timeline: scroll()) {
+  .tabs-demo .scroll-mask-x {
+    --tabs-demo-fade-from: calc(100% - 1.5rem);
+    mask-image:
+      linear-gradient(to left, black, black var(--tabs-demo-mask-l), transparent),
+      linear-gradient(to right, black, black var(--tabs-demo-mask-r), transparent);
+    mask-composite: intersect;
+    -webkit-mask-composite: source-in;
+    animation: tabs-demo-scroll-mask linear;
+    animation-timeline: scroll(self inline);
+  }
+}
diff --git a/content/docs/primitives/tabs/demos/tab-strip.tsx b/content/docs/primitives/tabs/demos/tab-strip.tsx
new file mode 100644
index 0000000..1729420
--- /dev/null
+++ b/content/docs/primitives/tabs/demos/tab-strip.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { useTabs } from "@intentface/chat/tabs";
+import { type ReactNode, useEffect, useRef } from "react";
+import "./tab-strip.css";
+
+/*
+ * The scrolling half of the strip. Its edges fade only where tabs are hidden
+ * behind them — see tab-strip.css — and the open tab is brought into view
+ * whenever the selection moves, since a tab added at the end would otherwise
+ * open off-screen.
+ */
+export const TabStrip = ({ children }: { children: ReactNode }) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const value = useTabs((tabs) => tabs.value);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `value` is the trigger, not an input — the open tab is found off the DOM, and this has to re-run whenever the selection moves.
+  useEffect(() => {
+    ref.current
+      ?.querySelector("[data-tabs-trigger][data-selected]")
+      ?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }, [value]);
+
+  return (
+    <div
+      ref={ref}
+      className="scroll-mask-x -mx-1 -my-1.5 min-w-0 overflow-x-auto px-1 py-1.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+    >
+      {children}
+    </div>
+  );
+};
diff --git a/content/docs/primitives/thread.mdx b/content/docs/primitives/thread.mdx
index 4573546..d3965cc 100644
--- a/content/docs/primitives/thread.mdx
+++ b/content/docs/primitives/thread.mdx
@@ -4,7 +4,9 @@ description: The scroll container — at-bottom detection, auto-follow, docked-c
 source: thread
 ---
 
+import { AutoScroll } from './thread/demos/autoscroll';
 import { Basic } from './thread/demos/basic';
+import { Jump } from './thread/demos/jump';
 
 <Demo component={<Basic />} file="primitives/thread/demos/basic.tsx" />
 
@@ -14,6 +16,7 @@ import { Basic } from './thread/demos/basic';
 - **Auto-scroll modes** — `off` / `bottom` / `jump` / `follow` via the `autoScroll` prop (see below).
 - **Composer inset** — measures the docked composer to reserve space; the overlays fade the top and bottom edges.
 - **Owns no data** — you map your messages in; rows are addressable by a `data-message-id` attribute.
+- **Cheap while streaming** — no scroll handler and no re-render per token; see [Why the scroll subsystem is cheap](#why-the-scroll-subsystem-is-cheap).
 - **Get started** — see [Quick start](/quick-start) to add the package.
 
 ## Anatomy
@@ -22,9 +25,11 @@ The bare nesting — `Thread` provides the scroll context its parts read:
 
 ```tsx
 <Thread.Root>
-  <Thread.Viewport>{/* messages */}</Thread.Viewport>
-  <Thread.Composer>{/* composer */}</Thread.Composer>
-  <Thread.ScrollButton />
+  <Thread.Overlay />
+  <Thread.Viewport>
+    <Thread.Content />
+  </Thread.Viewport>
+  <Thread.Composer />
 </Thread.Root>
 ```
 
@@ -41,16 +46,21 @@ A realistic surface with overlays and a message list:
   <Thread.Composer>
     <Composer.Root onSubmit={sendMessage}>{/* … */}</Composer.Root>
   </Thread.Composer>
-  <Thread.ScrollButton />
+  {/* Not a part: a scroll-to-bottom control is yours, built from
+      `useThread()`'s `isAtBottom` and `scrollToBottom`. */}
+  <ScrollToBottomButton />
   <Thread.Overlay direction="bottom" />
 </Thread.Root>
 ```
 
-## Auto-scroll
+## Examples
+
+### Choosing an auto-scroll mode
 
-`autoScroll` controls how the newest turn lands and whether the view follows a
-stream. `Thread.Viewport` maps `--thread-turn-min-height` onto its last child,
-so the reserve that lets the newest turn land at the top is wired for you.
+`autoScroll` decides two things at once: where a new turn lands, and whether the
+view keeps following while text streams into it. In `"follow"` and `"jump"` the
+newest turn reserves a full visible area so it can land at the top;
+[Sizing the last turn](#sizing-the-last-turn) shows the markup that keeps it exact.
 
 export const autoScrollModes = [
   { value: '"follow"', default: true, description: "Newest lands at the top; the view follows the stream (ChatGPT-style)." },
@@ -61,6 +71,8 @@ export const autoScrollModes = [
 
 <ValuesTable rows={autoScrollModes} />
 
+<Demo component={<AutoScroll />} file="primitives/thread/demos/autoscroll.tsx" />
+
 ### Opening position
 
 Where a saved transcript opens is a consequence of the mode — there is no
@@ -76,48 +88,57 @@ releases it: a large code block landing at once won't drop the follow
 mid-stream. Once you scroll up, the follow can't scroll again until you return
 to the bottom.
 
-## useThread
+### Sizing the last turn
 
-Read the scroll state and issue commands from anywhere inside `<Thread.Root>`:
+A turn lands at the top because it is at least one visible area tall. The thread
+measures that area — the root's height minus the top overlay and the docked
+composer — and publishes it as `--thread-turn-min-height` on `Thread.Content`.
+Three pieces of markup make the landing exact:
 
-export const useThreadMembers = [
-  { name: "isAtTop", type: "boolean", description: "Whether the top sentinel is in view (start of the transcript) — pairs with load-older-history. Subscribes the caller; independent of isAtBottom." },
-  { name: "isAtBottom", type: "boolean", description: "Whether the bottom sentinel is in view. Subscribes the caller — only components that read it re-render on flips." },
-  { name: "scrollToBottom", type: "(behavior?) => void", description: "Scroll to the live end." },
-  { name: "scrollToTop", type: "(behavior?) => void", description: "Scroll to the start; releases the follow." },
-  { name: "scrollToMessage", type: "(id, options?) => boolean", description: "Scroll to a row carrying data-message-id={id}. Options: align (\"start\" | \"center\" | \"end\" | \"nearest\"), behavior. Called before the transcript loads (a deep link), the jump is queued and runs when the row mounts. Returns false only when the id is absent from a loaded transcript." },
-];
-
-<PropsTable rows={useThreadMembers} />
-
-`scrollToMessage` resolves rows lazily by the `data-message-id` attribute — put
-it on each row you want addressable; there is no wrapper component and no
-per-row cost:
+- **Give the reserve to the whole turn.** Apply the variable to the last child,
+  and make that child the turn: wrap each question and its reply in
+  `Message.Turn`. On a bare reply, the question above it is pushed off the top.
+- **Mount a top overlay.** Its height is the gap a landed turn keeps from the
+  top edge. Without one, the turn lands flush against it.
+- **Pad the content by the same insets.** Use `--thread-overlay-top-height` and
+  `--thread-overlay-bottom-height` on the wrapper inside the viewport. Any other
+  vertical padding or margin between the viewport and the turns shifts the
+  landing by that much.
 
 ```tsx
-{turns.map((turn) => (
-  <Message.Turn key={turn.key} data-message-id={turn.id}>{/* … */}</Message.Turn>
-))}
+<Thread.Root className="relative h-full [--thread-overlay-top-height:1rem]">
+  <Thread.Overlay direction="top" className="inset-x-0 top-0 h-(--thread-overlay-top-height)" />
+  <Thread.Viewport className="h-full overflow-y-auto">
+    <div className="flex min-h-full flex-col pt-(--thread-overlay-top-height) pb-(--thread-overlay-bottom-height)">
+      <Thread.Content className="flex flex-col gap-4 [&>*:last-child]:min-h-(--thread-turn-min-height,0px)">
+        {turns.map((turn) => (
+          <Message.Turn key={turn.key}>{/* question, then reply */}</Message.Turn>
+        ))}
+      </Thread.Content>
+    </div>
+  </Thread.Viewport>
+  <Thread.Composer className="absolute inset-x-0 bottom-0">{/* … */}</Thread.Composer>
+</Thread.Root>
 ```
 
-## useThreadVisibility
+The composer's height is measured and written to `--thread-overlay-bottom-height`
+for you. Without a `Thread.Composer`, the area leaves 128px at the bottom, so set
+`--thread-overlay-bottom-height: 128px` for the padding to match.
 
-Track which rows are in view — e.g. to highlight the active turn in an outline.
-Subscribing lazily creates the tracking observers; when the last subscriber
-unmounts they are torn down, so threads that never call it pay nothing. Rows
-are identified by the same `data-message-id` attribute `scrollToMessage` uses.
+### Jumping to a message
 
-export const visibilityMembers = [
-  { name: "visibleMessageIds", type: "string[]", description: "Rows intersecting the viewport, in document order." },
-  { name: "currentMessageId", type: "string | null", description: "The topmost visible row — the one being read." },
-];
+`scrollToMessage` finds a row by the `data-message-id` attribute you put on it.
+There is no wrapper part and no registry: rows resolve lazily at call time, so a
+long transcript adds no per-row setup, only the lookup when you jump.
+`useThreadVisibility` reads the same attribute to report which rows are on
+screen, and creates its observers only once something subscribes.
 
-<PropsTable rows={visibilityMembers} />
+<Demo component={<Jump />} file="primitives/thread/demos/jump.tsx" />
 
-## Performance
+## Why the scroll subsystem is cheap
 
-Thread's scroll subsystem is built to cost nothing while a reply streams — you
-don't need to optimize around it:
+Thread's scroll subsystem is built to stay out of the way while a reply streams:
+the work it does is event-driven and small, not per token or per frame.
 
 - **No scroll handler.** Edge detection is an IntersectionObserver sentinel per
   edge, computed off the main thread. Scrolling runs zero JavaScript.
@@ -126,7 +147,7 @@ don't need to optimize around it:
   reads, no animation-frame polling.
 - **Edge state lives in external stores** (one per edge), so a flip re-renders
   only the components that read it (your scroll button) — never the Thread tree.
-- **Lazy capabilities stay free until used**: visibility tracking creates its
+- **Lazy capabilities cost nothing until used**: visibility tracking creates its
   observers on the first `useThreadVisibility` subscriber and tears them down
   with the last; the prepend-preservation scroll listener exists only when
   `preserveScrollOnPrepend` is set.
@@ -147,21 +168,6 @@ unfollowed while pinned there.
 An upward wheel or a downward touch-drag releases follow the same way; a
 scrollbar drag away from the bottom releases it via the sentinel.
 
-## Accessibility
-
-- **Viewport** is a focusable `role="region"` with a default
-  `aria-label="Messages"` (overridable), so it's reachable and scrollable by
-  keyboard.
-- **Content column** is a `role="log"` with `aria-relevant="additions"`: a turn
-  announces when its row is **added**. In-place text mutation — tokens
-  streaming into an existing row — deliberately does not re-announce
-  (token-by-token narration would be noise). If you want end-of-response
-  announcements, add a consumer-owned `role="status"` region that flips on
-  completion.
-- **Reduced motion.** Programmatic scrolls requested as `"smooth"`
-  (`scrollToBottom`, `scrollToTop`, `scrollToMessage`, and the auto-follow)
-  downgrade to instant when the OS has `prefers-reduced-motion` set.
-
 ## API reference
 
 Every part accepts `className`, `style`, and `render` (see
@@ -264,3 +270,41 @@ export const cssVars = [
 ];
 
 <AttributesTable rows={cssVars} />
+
+## useThread
+
+Read the scroll state and issue commands from anywhere inside `<Thread.Root>`:
+
+export const useThreadMembers = [
+  { name: "isAtTop", type: "boolean", description: "Whether the top sentinel is in view (start of the transcript) — pairs with load-older-history. Subscribes the caller; independent of isAtBottom." },
+  { name: "isAtBottom", type: "boolean", description: "Whether the bottom sentinel is in view. Subscribes the caller — only components that read it re-render on flips." },
+  { name: "scrollToBottom", type: "(behavior?) => void", description: "Scroll to the live end." },
+  { name: "scrollToTop", type: "(behavior?) => void", description: "Scroll to the start; releases the follow." },
+  { name: "scrollToMessage", type: "(id, options?) => boolean", description: "Scroll to a row carrying data-message-id={id}. Options: align (\"start\" | \"center\" | \"end\" | \"nearest\"), behavior. Called before the transcript loads (a deep link), the jump is queued and runs when the row mounts. Returns false only when the id is absent from a loaded transcript." },
+];
+
+<PropsTable rows={useThreadMembers} />
+
+`scrollToMessage` resolves rows lazily by the `data-message-id` attribute — put
+it on each row you want addressable; there is no wrapper component and no
+per-row cost:
+
+```tsx
+{turns.map((turn) => (
+  <Message.Turn key={turn.key} data-message-id={turn.id}>{/* … */}</Message.Turn>
+))}
+```
+
+## useThreadVisibility
+
+Track which rows are in view — e.g. to highlight the active turn in an outline.
+Subscribing lazily creates the tracking observers; when the last subscriber
+unmounts they are torn down, so threads that never call it pay nothing. Rows
+are identified by the same `data-message-id` attribute `scrollToMessage` uses.
+
+export const visibilityMembers = [
+  { name: "visibleMessageIds", type: "string[]", description: "Rows intersecting the viewport, in document order." },
+  { name: "currentMessageId", type: "string | null", description: "The topmost visible row — the one being read." },
+];
+
+<PropsTable rows={visibilityMembers} />
diff --git a/content/docs/primitives/thread/demos/autoscroll.tsx b/content/docs/primitives/thread/demos/autoscroll.tsx
new file mode 100644
index 0000000..1e146ba
--- /dev/null
+++ b/content/docs/primitives/thread/demos/autoscroll.tsx
@@ -0,0 +1,204 @@
+"use client";
+
+import { Composer, type ComposerSubmitData } from "@intentface/chat/composer";
+import { Message } from "@intentface/chat/message";
+import { Thread } from "@intentface/chat/thread";
+import { ArrowUp } from "@keyline-icons/react";
+import { useEffect, useRef, useState } from "react";
+
+type Exchange = { id: string; question: string; answer: string };
+
+const SEED: Exchange[] = [
+  {
+    id: "1",
+    question: "Why does my list re-render on every keystroke?",
+    answer:
+      "Because the parent holding the input state re-renders, and every child re-renders with it unless something stops the cascade.",
+  },
+  {
+    id: "2",
+    question: "Can I just memo the list?",
+    answer:
+      "You can, but only if its props keep reference identity. A fresh array or an inline callback defeats it silently.",
+  },
+];
+
+const MODES = ["follow", "bottom", "jump", "off"] as const;
+type Mode = (typeof MODES)[number];
+
+const CAPTIONS: Record<Mode, string> = {
+  follow: "Newest lands at the top and the view follows the stream.",
+  bottom: "Newest lands at the bottom and the view follows the stream.",
+  jump: "Newest lands at the top; the view does not follow.",
+  off: "A plain scroll area — no landing, no follow, no reserve.",
+};
+
+const PROMPT = "Is memoising the list enough?";
+
+const REPLY =
+  "Memoisation compares props, so the comparison itself has to be cheaper than the render you are avoiding. That is usually true for a list and rarely true for a single row.";
+
+/*
+ * The four modes, on the same transcript.
+ *
+ * `autoScroll` decides two things at once: where a new turn lands, and whether
+ * the view keeps following while text streams into it. The composer comes
+ * prefilled — send it in each mode and watch the difference. In `follow` and
+ * `jump`, notice the space reserved beneath the newest turn: it is what lets the
+ * turn land at the top.
+ *
+ * Each question and its reply share a Message.Turn, so the reserve the primitive
+ * publishes lands on the whole turn (it goes on the last child). The docked
+ * composer is measured, so the reserve fills exactly the visible area.
+ *
+ * Remounting on a mode change is this demo's doing, not a requirement: the key
+ * forces a fresh scroll subsystem so each mode is observed from its own
+ * opening position rather than wherever the last one left the scroller.
+ */
+export const AutoScroll = () => {
+  const [mode, setMode] = useState<Mode>("follow");
+  const [exchanges, setExchanges] = useState<Exchange[]>(SEED);
+  const [draft, setDraft] = useState(PROMPT);
+  const [streaming, setStreaming] = useState(false);
+  const timers = useRef<ReturnType<typeof setTimeout>[]>([]);
+
+  useEffect(() => () => timers.current.forEach(clearTimeout), []);
+
+  const handleSubmit = (data: ComposerSubmitData) => {
+    if (data.kind !== "message" || !data.text.trim() || streaming) return;
+    timers.current.forEach(clearTimeout);
+    timers.current = [];
+
+    const id = `${Date.now()}`;
+    setExchanges((current) => [...current, { id, question: data.text, answer: "" }]);
+    setStreaming(true);
+
+    // Word by word, so following is something you can actually watch.
+    const words = REPLY.split(" ");
+    words.forEach((_, index) => {
+      timers.current.push(
+        setTimeout(() => {
+          setExchanges((current) =>
+            current.map((exchange) =>
+              exchange.id === id
+                ? { ...exchange, answer: words.slice(0, index + 1).join(" ") }
+                : exchange,
+            ),
+          );
+        }, index * 60),
+      );
+    });
+    // Refill the composer once the reply is done, so the next send is one click.
+    timers.current.push(
+      setTimeout(() => {
+        setStreaming(false);
+        setDraft(PROMPT);
+      }, words.length * 60),
+    );
+  };
+
+  return (
+    <div className="flex w-full max-w-xl flex-col gap-3">
+      <div className="flex flex-wrap items-center gap-0.5 self-center rounded-full bg-zinc-100 p-0.5 dark:bg-[#131315]">
+        {MODES.map((candidate) => (
+          <button
+            key={candidate}
+            type="button"
+            onClick={() => {
+              // A reply still streaming belongs to the old transcript: stop it.
+              timers.current.forEach(clearTimeout);
+              timers.current = [];
+              setStreaming(false);
+              setMode(candidate);
+              setExchanges(SEED);
+              setDraft(PROMPT);
+            }}
+            className={[
+              "h-7 cursor-pointer rounded-full px-3 font-medium font-mono text-[13px] transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0169cc]/60",
+              candidate === mode
+                ? `${RAISED} text-zinc-900 dark:text-zinc-100`
+                : "text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100",
+            ].join(" ")}
+          >
+            {candidate}
+          </button>
+        ))}
+      </div>
+
+      <div className="h-[26rem] w-full overflow-hidden rounded-xl bg-white shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] dark:bg-zinc-900 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]">
+        <Thread.Root
+          key={mode}
+          autoScroll={mode}
+          className="relative flex h-full w-full overflow-hidden [--thread-overlay-top-height:1rem]"
+        >
+          {/* Measured by the primitive: a landed turn sits this far below the top. */}
+          <Thread.Overlay
+            direction="top"
+            className="inset-x-0 top-0 z-1 h-(--thread-overlay-top-height) bg-linear-to-b from-white to-transparent dark:from-zinc-900"
+          />
+          <Thread.Viewport className="h-full w-full overflow-x-hidden overflow-y-auto outline-none [overflow-anchor:auto]">
+            <div className="relative flex min-h-full w-full flex-col pt-(--thread-overlay-top-height) pb-(--thread-overlay-bottom-height)">
+              {/* The reserve the primitive publishes lands on the last child: the newest turn. */}
+              <Thread.Content className="flex min-h-full w-full flex-col gap-5 px-4 [&>*:last-child]:min-h-(--thread-turn-min-height,0px)">
+                {exchanges.map((exchange, index) => (
+                  <Message.Turn key={exchange.id} className="flex flex-col gap-5">
+                    {/* biome-ignore lint/a11y/useValidAriaRole: `role` is the message's author, not an ARIA role */}
+                    <Message.Root role="user" className="group flex w-full flex-col items-end">
+                      <Message.Text className="max-w-[80%] rounded-[20px] bg-white px-3.5 py-1.5 text-sm text-zinc-900 leading-6 shadow-[0_0_0_1px_rgb(0_0_0/0.08),0_1px_2px_rgb(0_0_0/0.04)] dark:bg-zinc-800 dark:text-zinc-100 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16)]">
+                        {exchange.question}
+                      </Message.Text>
+                    </Message.Root>
+                    {exchange.answer && (
+                      // biome-ignore lint/a11y/useValidAriaRole: `role` is the message's author, not an ARIA role
+                      <Message.Root
+                        role="assistant"
+                        isLast={index === exchanges.length - 1}
+                        className="group flex w-full flex-col"
+                      >
+                        <Message.Text className="text-sm text-zinc-700 leading-6 dark:text-zinc-300">
+                          {exchange.answer}
+                        </Message.Text>
+                      </Message.Root>
+                    )}
+                  </Message.Turn>
+                ))}
+              </Thread.Content>
+            </div>
+          </Thread.Viewport>
+          <Thread.Composer className="absolute inset-x-0 bottom-0 z-2 w-full">
+            <div className="flex w-full flex-col px-4 pb-4">
+              <Composer.Root onSubmit={handleSubmit} className="flex w-full flex-col">
+                <Composer.Container className="cursor-text rounded-xl bg-white p-1 shadow-[0_0_0_1px_rgb(0_0_0/0.08),0_1px_2px_-1px_rgb(0_0_0/0.08),0_6px_16px_-6px_rgb(0_0_0/0.1)] dark:bg-zinc-800 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.06),inset_0_0_0_1px_rgb(255_255_255/0.07),0_0_0_1px_rgb(0_0_0/0.2),0_1px_2px_rgb(0_0_0/0.12),0_6px_16px_-6px_rgb(0_0_0/0.22)]">
+                  <Composer.Textarea
+                    value={draft}
+                    onValueChange={setDraft}
+                    className="max-h-32 min-h-10 overflow-y-auto px-2.5 pt-2.5 text-sm text-zinc-900 dark:text-zinc-100 **:data-composer-editor:w-full **:data-composer-editor:max-w-none **:data-composer-editor:leading-6 [&_[data-composer-editor]:focus]:outline-none"
+                  >
+                    <Composer.Placeholder
+                      placeholder="Ask a follow-up…"
+                      className="text-zinc-400 leading-6 dark:text-zinc-500"
+                    />
+                  </Composer.Textarea>
+                  <Composer.Actions className="flex h-11 items-center justify-end px-2.5">
+                    <Composer.Submit
+                      disabled={streaming}
+                      className="flex size-7 cursor-pointer items-center justify-center rounded-full bg-[#0169cc] bg-linear-to-b from-[oklch(57.2%_0.166_253.2)] to-[oklch(52.9%_0.173_255)] text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.28),0_0_0_1px_oklch(46.5%_0.146_254.8),0_1px_2px_rgb(1_105_204/0.35)] transition-opacity focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2 disabled:cursor-default disabled:opacity-40"
+                    >
+                      <ArrowUp className="size-[15px]" />
+                    </Composer.Submit>
+                  </Composer.Actions>
+                </Composer.Container>
+              </Composer.Root>
+            </div>
+          </Thread.Composer>
+        </Thread.Root>
+      </div>
+
+      <p className="text-center text-xs text-zinc-500 dark:text-zinc-400">{CAPTIONS[mode]}</p>
+    </div>
+  );
+};
+
+// The raised surface of the selected mode.
+const RAISED =
+  "bg-white bg-linear-to-b from-white to-[#fdfdfd] shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)] dark:bg-[#2d2d30] dark:from-[#313134] dark:to-[#2a2a2d] dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]";
diff --git a/content/docs/primitives/thread/demos/basic.tsx b/content/docs/primitives/thread/demos/basic.tsx
index 82e44f9..e587dea 100644
--- a/content/docs/primitives/thread/demos/basic.tsx
+++ b/content/docs/primitives/thread/demos/basic.tsx
@@ -3,7 +3,8 @@
 import { Composer, type ComposerSubmitData } from "@intentface/chat/composer";
 import { Message } from "@intentface/chat/message";
 import { Thread, useThread } from "@intentface/chat/thread";
-import { type ComponentProps, useState } from "react";
+import { ArrowDown, ArrowUp } from "@keyline-icons/react";
+import { useState } from "react";
 
 type DemoMessage = { id: string; role: "user" | "assistant"; text: string };
 
@@ -26,6 +27,9 @@ const REPLY = "Good question — the short answer is it depends on what you're o
 
 // Thread measures its docked composer and publishes the reserve as
 // --thread-overlay-bottom-height, so the scroll area never hides behind it.
+// autoScroll="bottom" pins the transcript to the composer: the latest turn sits
+// right above it instead of landing at the top over an empty reserve. Messages
+// and composer share one centred column, narrower than the window.
 export const Basic = () => {
   const [messages, setMessages] = useState<DemoMessage[]>(INITIAL);
 
@@ -39,20 +43,23 @@ export const Basic = () => {
   };
 
   return (
-    <div className="h-[440px] w-full max-w-xl overflow-hidden rounded-xl border border-[#f0f0f0] bg-white dark:border-[#262626] dark:bg-[#111111]">
-      <Thread.Root className="relative flex h-full w-full overflow-hidden [--thread-overlay-top-height:1rem]">
+    <div className="h-[440px] w-full max-w-xl overflow-hidden rounded-xl bg-white shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:bg-zinc-900">
+      <Thread.Root
+        autoScroll="bottom"
+        className="relative flex h-full w-full overflow-hidden [--thread-overlay-top-height:1rem]"
+      >
         <Thread.Viewport className="h-full w-full overflow-x-hidden overflow-y-auto outline-none [overflow-anchor:auto]">
           <div className="relative flex min-h-full w-full flex-col items-center pt-(--thread-overlay-top-height) pb-(--thread-overlay-bottom-height)">
             {/* The last child carries the auto-scroll reserve the primitive sets. */}
-            <Thread.Content className="mx-auto flex min-h-full w-full flex-col gap-4 px-4 [&>*:last-child]:min-h-(--thread-turn-min-height,0px)">
+            <Thread.Content className="mx-auto flex min-h-full w-full max-w-lg flex-col justify-end gap-5 px-4 [&>*:last-child]:min-h-(--thread-turn-min-height,0px)">
               {messages.map((message, index) => (
                 <Message.Root
                   key={message.id}
                   role={message.role}
                   isLast={index === messages.length - 1}
-                  className="group flex w-full flex-col gap-1 data-[role=user]:items-end"
+                  className="group flex w-full flex-col gap-1.5 data-[role=user]:items-end"
                 >
-                  <Message.Text className="text-sm leading-[1.7] text-[#1a1a1a] group-data-[role=user]:min-h-9 group-data-[role=user]:max-w-[80%] group-data-[role=user]:rounded-2xl group-data-[role=user]:border group-data-[role=user]:border-[#f0f0f0] group-data-[role=user]:bg-white group-data-[role=user]:px-3 group-data-[role=user]:py-1.5 group-data-[role=user]:shadow-xs dark:text-[#fcfcfc] dark:group-data-[role=user]:border-[#262626] dark:group-data-[role=user]:bg-[#181818]">
+                  <Message.Text className="text-sm text-zinc-700 leading-6 group-data-[role=user]:max-w-[80%] group-data-[role=user]:rounded-[20px] group-data-[role=user]:bg-white group-data-[role=user]:px-3.5 group-data-[role=user]:py-1.5 group-data-[role=user]:text-zinc-900 group-data-[role=user]:leading-6 group-data-[role=user]:shadow-[0_0_0_1px_rgb(0_0_0/0.08),0_1px_2px_rgb(0_0_0/0.04)] dark:text-zinc-300 dark:group-data-[role=user]:bg-zinc-800 dark:group-data-[role=user]:text-zinc-100 dark:group-data-[role=user]:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16)]">
                     {message.text}
                   </Message.Text>
                 </Message.Root>
@@ -61,19 +68,19 @@ export const Basic = () => {
           </div>
         </Thread.Viewport>
         <Thread.Composer className="absolute inset-x-0 bottom-0 z-2 w-full">
-          <div className="relative flex w-full flex-col items-center px-4 pb-4">
+          <div className="relative mx-auto flex w-full max-w-lg flex-col items-center px-4 pb-4">
             <ScrollButton />
             <Composer.Root onSubmit={handleSubmit} className="flex w-full flex-col">
-              <Composer.Container className="cursor-text rounded-2xl border border-[#f0f0f0] bg-white shadow-xs transition-colors focus-within:border-[#ececec] dark:border-[#262626] dark:bg-[#181818] dark:focus-within:border-[#2d2d2d]">
-                <Composer.Textarea className="max-h-32 min-h-8 overflow-y-auto px-4 pt-3 text-sm **:data-composer-editor:w-full **:data-composer-editor:max-w-none **:data-composer-editor:leading-[1.7] [&_[data-composer-editor]:focus]:outline-none">
+              <Composer.Container className="cursor-text rounded-xl bg-white p-1 shadow-[0_0_0_1px_rgb(0_0_0/0.08),0_1px_2px_-1px_rgb(0_0_0/0.08),0_6px_16px_-6px_rgb(0_0_0/0.1)] dark:bg-zinc-800 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.06),inset_0_0_0_1px_rgb(255_255_255/0.07),0_0_0_1px_rgb(0_0_0/0.2),0_1px_2px_rgb(0_0_0/0.12),0_6px_16px_-6px_rgb(0_0_0/0.22)]">
+                <Composer.Textarea className="max-h-32 min-h-12 overflow-y-auto px-2.5 pt-2.5 text-sm text-zinc-900 dark:text-zinc-100 **:data-composer-editor:w-full **:data-composer-editor:max-w-none **:data-composer-editor:leading-6 [&_[data-composer-editor]:focus]:outline-none">
                   <Composer.Placeholder
                     placeholder="Ask a follow-up…"
-                    className="leading-[1.7] text-[#949494] dark:text-[#6f6f6f]"
+                    className="text-zinc-400 leading-6 dark:text-zinc-500"
                   />
                 </Composer.Textarea>
-                <Composer.Actions className="flex justify-end gap-2 p-2">
-                  <Composer.Submit className="flex size-8 items-center justify-center rounded-full bg-[#1a1a1a] text-white transition-opacity disabled:opacity-40 dark:bg-[#fcfcfc] dark:text-[#111111]">
-                    <SendIcon />
+                <Composer.Actions className="flex h-12 items-center justify-end px-2.5">
+                  <Composer.Submit className="flex size-7 cursor-pointer items-center justify-center rounded-full bg-[#0169cc] bg-linear-to-b from-[oklch(57.2%_0.166_253.2)] to-[oklch(52.9%_0.173_255)] text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.28),0_0_0_1px_oklch(46.5%_0.146_254.8),0_1px_2px_rgb(1_105_204/0.35)] transition-opacity focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2 disabled:cursor-default disabled:opacity-40">
+                    <ArrowUp className="size-[15px]" />
                   </Composer.Submit>
                 </Composer.Actions>
               </Composer.Container>
@@ -96,43 +103,9 @@ const ScrollButton = () => {
       type="button"
       onClick={() => scrollToBottom()}
       aria-label="Scroll to latest"
-      className="absolute -top-10 z-10 flex size-8 cursor-pointer items-center justify-center rounded-full border border-[#f0f0f0] bg-white text-[#686868] shadow-xs transition-colors hover:text-[#1a1a1a] dark:border-[#262626] dark:bg-[#181818] dark:text-[#9b9b9b] dark:hover:text-[#fcfcfc]"
+      className="absolute -top-10 z-10 flex size-8 cursor-pointer items-center justify-center rounded-full bg-white bg-linear-to-b from-white to-[#fdfdfd] shadow-[inset_0_1px_0_#fff,0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.07),0_2px_6px_-2px_rgb(0_0_0/0.05)] dark:bg-[#2d2d30] dark:from-[#313134] dark:to-[#2a2a2d] dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.1),inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] text-zinc-500 transition-colors hover:text-zinc-900 hover:from-[#fafafa] hover:to-[#f6f6f6] dark:hover:from-[#38383b] dark:hover:to-[#313134] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0169cc]/60 dark:text-zinc-400 dark:hover:text-zinc-100"
     >
-      <ArrowDownIcon />
+      <ArrowDown className="size-[15px]" />
     </button>
   );
 };
-
-const ArrowDownIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M8 3v10m0 0 4.5-4.5M8 13l-4.5-4.5" />
-  </svg>
-);
-
-const SendIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M8 13V3m0 0L3.5 7.5M8 3l4.5 4.5" />
-  </svg>
-);
diff --git a/content/docs/primitives/thread/demos/jump.tsx b/content/docs/primitives/thread/demos/jump.tsx
new file mode 100644
index 0000000..b1bb3cb
--- /dev/null
+++ b/content/docs/primitives/thread/demos/jump.tsx
@@ -0,0 +1,138 @@
+"use client";
+
+import { Message } from "@intentface/chat/message";
+import { Thread, useThread, useThreadVisibility } from "@intentface/chat/thread";
+
+const EXCHANGES = [
+  {
+    question: "How does scrollToMessage find a row?",
+    answer: "By the data-message-id attribute you put on it, looked up at call time.",
+  },
+  {
+    question: "Do rows have to be registered first?",
+    answer: "No. Nothing is registered up front, so there is no wrapper part to render.",
+  },
+  {
+    question: "What does a long transcript cost?",
+    answer: "The same as a short one: rows are resolved lazily, only when you jump.",
+  },
+  {
+    question: "How does the outline know what I'm reading?",
+    answer: "useThreadVisibility reads the same attribute to report which rows are on screen.",
+  },
+  {
+    question: "And when nothing subscribes to it?",
+    answer: "Its observers are created on the first subscriber, so an unused one costs nothing.",
+  },
+  {
+    question: "Can I align the target differently?",
+    answer: "Pass align: start, center or end; this outline lands each question at the top.",
+  },
+  {
+    question: "Does it work with streaming?",
+    answer: "Yes. Jumping releases the follow, the same as scrolling away by hand.",
+  },
+];
+
+// Every message is addressable; the outline jumps to questions.
+const TURNS = EXCHANGES.flatMap((exchange, index) => [
+  { id: `q-${index + 1}`, role: "user" as const, text: exchange.question },
+  { id: `a-${index + 1}`, role: "assistant" as const, text: exchange.answer },
+]);
+
+const QUESTIONS = TURNS.filter((turn) => turn.role === "user");
+
+/*
+ * Addressing a row without registering it.
+ *
+ * `scrollToMessage` finds a row by the `data-message-id` attribute you put on
+ * it. There is no wrapper part and no registry: rows are resolved lazily at
+ * call time, so a long transcript adds no per-row setup, only the lookup.
+ *
+ * `useThreadVisibility` is the other half. It reads the same attribute to
+ * report which rows are on screen, and it creates its observers on the first
+ * subscriber — a thread that never calls it pays nothing.
+ */
+export const Jump = () => (
+  <div className="h-80 w-full max-w-xl overflow-hidden rounded-xl bg-white shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] dark:bg-zinc-900 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)]">
+    <Thread.Root autoScroll="off" className="relative flex h-full w-full overflow-hidden">
+      <Thread.Viewport className="h-full min-w-0 flex-1 overflow-y-auto outline-none">
+        {/* Right padding keeps the text clear of the ladder. */}
+        <Thread.Content className="flex w-full flex-col gap-5 py-4 pr-12 pl-4">
+          {TURNS.map((turn) => (
+            <Message.Root
+              key={turn.id}
+              role={turn.role}
+              data-message-id={turn.id}
+              className="group flex w-full flex-col data-[role=user]:items-end"
+            >
+              <Message.Text className="text-sm text-zinc-700 leading-6 group-data-[role=user]:max-w-[80%] group-data-[role=user]:rounded-[20px] group-data-[role=user]:bg-white group-data-[role=user]:px-3.5 group-data-[role=user]:py-1.5 group-data-[role=user]:text-zinc-900 group-data-[role=user]:shadow-[0_0_0_1px_rgb(0_0_0/0.08),0_1px_2px_rgb(0_0_0/0.04)] dark:text-zinc-300 dark:group-data-[role=user]:bg-zinc-800 dark:group-data-[role=user]:text-zinc-100 dark:group-data-[role=user]:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16)]">
+                {turn.text}
+              </Message.Text>
+            </Message.Root>
+          ))}
+        </Thread.Content>
+      </Thread.Viewport>
+
+      {/* Inside the Root, which is how it reaches the scroll context; the
+          ladder is this demo's, not a part of the package. */}
+      <Ladder />
+    </Thread.Root>
+  </div>
+);
+
+/**
+ * A Notion-style ladder on the right edge: one tick per question, the one being
+ * read in ink. Hovering it (or tabbing into it) opens the outline in its place.
+ */
+const Ladder = () => {
+  const { scrollToMessage } = useThread();
+  const { currentMessageId } = useThreadVisibility();
+
+  // A reply belongs to the question before it, so either one marks that turn.
+  const currentIndex = TURNS.findIndex((turn) => turn.id === currentMessageId);
+  const activeId = currentIndex === -1 ? null : TURNS[currentIndex - (currentIndex % 2)].id;
+
+  return (
+    <nav
+      aria-label="Transcript outline"
+      className="group/ladder absolute top-1/2 right-1.5 z-10 -translate-y-1/2"
+    >
+      {/* Decorative: the outline below carries the buttons. */}
+      <div
+        aria-hidden="true"
+        className="flex flex-col items-end gap-2.5 p-2 transition-opacity group-focus-within/ladder:opacity-0 group-hover/ladder:opacity-0"
+      >
+        {QUESTIONS.map((question) => (
+          <span
+            key={question.id}
+            className={[
+              "h-0.5 w-4 rounded-full transition-colors",
+              question.id === activeId
+                ? "bg-zinc-900 dark:bg-zinc-100"
+                : "bg-zinc-300 dark:bg-zinc-600",
+            ].join(" ")}
+          />
+        ))}
+      </div>
+      <div className="pointer-events-none absolute top-1/2 right-0 flex w-60 origin-right -translate-y-1/2 scale-95 flex-col gap-px rounded-xl bg-white p-1 opacity-0 shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_12px_32px_-8px_rgb(0_0_0/0.16)] transition-[opacity,scale] duration-150 group-focus-within/ladder:pointer-events-auto group-focus-within/ladder:scale-100 group-focus-within/ladder:opacity-100 group-hover/ladder:pointer-events-auto group-hover/ladder:scale-100 group-hover/ladder:opacity-100 dark:bg-zinc-800 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.06),inset_0_0_0_1px_rgb(255_255_255/0.07),0_0_0_1px_rgb(0_0_0/0.16),0_12px_32px_-8px_rgb(0_0_0/0.4)]">
+        {QUESTIONS.map((question) => (
+          <button
+            key={question.id}
+            type="button"
+            aria-current={question.id === activeId ? "true" : undefined}
+            onClick={() => scrollToMessage(question.id, { align: "start" })}
+            className={[
+              "flex h-8 shrink-0 cursor-pointer items-center rounded-lg px-2.5 text-left text-[13px] transition-colors focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:-outline-offset-2",
+              question.id === activeId
+                ? "bg-zinc-950/5 font-medium text-zinc-900 dark:bg-white/8 dark:text-zinc-100"
+                : "text-zinc-500 hover:bg-zinc-950/5 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-white/8 dark:hover:text-zinc-100",
+            ].join(" ")}
+          >
+            <span className="truncate">{question.text}</span>
+          </button>
+        ))}
+      </div>
+    </nav>
+  );
+};
diff --git a/content/docs/quick-start/demos/hero.tsx b/content/docs/quick-start/demos/hero.tsx
index 7b11fa7..6209526 100644
--- a/content/docs/quick-start/demos/hero.tsx
+++ b/content/docs/quick-start/demos/hero.tsx
@@ -3,7 +3,8 @@
 import { Composer, type ComposerSubmitData } from "@intentface/chat/composer";
 import { Message } from "@intentface/chat/message";
 import { Thread } from "@intentface/chat/thread";
-import { type ComponentProps, useState } from "react";
+import { ArrowUp } from "@keyline-icons/react";
+import { useState } from "react";
 
 type ChatMessage = { id: string; role: "user" | "assistant"; text: string };
 
@@ -30,8 +31,13 @@ export const Hero = () => {
   };
 
   return (
-    <div className="h-[360px] w-full max-w-xl overflow-hidden rounded-xl border border-[#f0f0f0] bg-white dark:border-[#262626] dark:bg-[#111111]">
+    <div className="h-[360px] w-full max-w-xl overflow-hidden rounded-xl bg-white shadow-[0_0_0_1px_rgb(0_0_0/0.075),0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_-2px_rgb(0_0_0/0.05)] dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.1)] dark:bg-zinc-900">
       <Thread.Root className="relative flex h-full w-full overflow-hidden [--thread-overlay-top-height:1rem]">
+        {/* Measured by the primitive: a landed turn sits this far below the top. */}
+        <Thread.Overlay
+          direction="top"
+          className="inset-x-0 top-0 z-1 h-(--thread-overlay-top-height) bg-linear-to-b from-white to-transparent dark:from-zinc-900"
+        />
         <Thread.Viewport className="h-full w-full overflow-x-hidden overflow-y-auto outline-none [overflow-anchor:auto]">
           <div className="relative flex min-h-full w-full flex-col items-center pt-(--thread-overlay-top-height) pb-(--thread-overlay-bottom-height)">
             <Thread.Content className="mx-auto flex min-h-full w-full flex-col gap-4 px-4 [&>*:last-child]:min-h-(--thread-turn-min-height,0px)">
@@ -40,9 +46,9 @@ export const Hero = () => {
                   key={message.id}
                   role={message.role}
                   isLast={index === messages.length - 1}
-                  className="group flex w-full flex-col gap-1 data-[role=user]:items-end"
+                  className="group flex w-full flex-col gap-1.5 data-[role=user]:items-end"
                 >
-                  <Message.Text className="text-sm leading-[1.7] text-[#1a1a1a] group-data-[role=user]:min-h-9 group-data-[role=user]:max-w-[80%] group-data-[role=user]:rounded-2xl group-data-[role=user]:border group-data-[role=user]:border-[#f0f0f0] group-data-[role=user]:bg-white group-data-[role=user]:px-3 group-data-[role=user]:py-1.5 group-data-[role=user]:shadow-xs dark:text-[#fcfcfc] dark:group-data-[role=user]:border-[#262626] dark:group-data-[role=user]:bg-[#181818]">
+                  <Message.Text className="text-sm text-zinc-700 leading-6 group-data-[role=user]:max-w-[80%] group-data-[role=user]:rounded-[20px] group-data-[role=user]:bg-white group-data-[role=user]:px-3.5 group-data-[role=user]:py-1.5 group-data-[role=user]:text-zinc-900 group-data-[role=user]:shadow-[0_0_0_1px_rgb(0_0_0/0.08),0_1px_2px_rgb(0_0_0/0.04)] dark:text-zinc-300 dark:group-data-[role=user]:bg-zinc-800 dark:group-data-[role=user]:text-zinc-100 dark:group-data-[role=user]:shadow-[inset_0_1px_0_rgb(255_255_255/0.05),inset_0_0_0_1px_rgb(255_255_255/0.06),0_0_0_1px_rgb(0_0_0/0.16)]">
                     {message.text}
                   </Message.Text>
                 </Message.Root>
@@ -53,18 +59,18 @@ export const Hero = () => {
         <Thread.Composer className="absolute inset-x-0 bottom-0 z-2 w-full">
           <div className="flex w-full flex-col items-center px-4 pb-4">
             <Composer.Root onSubmit={handleSubmit} className="flex w-full flex-col">
-              <Composer.Container className="cursor-text rounded-2xl border border-[#f0f0f0] bg-white shadow-xs transition-colors focus-within:border-[#ececec] dark:border-[#262626] dark:bg-[#181818] dark:focus-within:border-[#2d2d2d]">
+              <Composer.Container className="cursor-text rounded-xl bg-white p-1 shadow-[0_0_0_1px_rgb(0_0_0/0.08),0_1px_2px_-1px_rgb(0_0_0/0.08),0_6px_16px_-6px_rgb(0_0_0/0.1)] dark:bg-zinc-800 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.06),inset_0_0_0_1px_rgb(255_255_255/0.07),0_0_0_1px_rgb(0_0_0/0.2),0_1px_2px_rgb(0_0_0/0.12),0_6px_16px_-6px_rgb(0_0_0/0.22)]">
                 {/* The editable element is engine-owned and out of JSX reach, so
                     it is styled through the data-composer-editor variants. */}
-                <Composer.Textarea className="max-h-32 min-h-8 overflow-y-auto px-4 pt-3 text-sm **:data-composer-editor:w-full **:data-composer-editor:max-w-none **:data-composer-editor:leading-[1.7] [&_[data-composer-editor]:focus]:outline-none">
+                <Composer.Textarea className="max-h-32 min-h-12 overflow-y-auto px-2.5 pt-2.5 text-sm text-zinc-900 dark:text-zinc-100 **:data-composer-editor:w-full **:data-composer-editor:max-w-none **:data-composer-editor:leading-6 [&_[data-composer-editor]:focus]:outline-none">
                   <Composer.Placeholder
                     placeholder="Send a message…"
-                    className="leading-[1.7] text-[#949494] dark:text-[#6f6f6f]"
+                    className="text-zinc-400 leading-6 dark:text-zinc-500"
                   />
                 </Composer.Textarea>
-                <Composer.Actions className="flex justify-end gap-2 p-2">
-                  <Composer.Submit className="flex size-8 items-center justify-center rounded-full bg-[#1a1a1a] text-white transition-opacity disabled:opacity-40 dark:bg-[#fcfcfc] dark:text-[#111111]">
-                    <SendIcon />
+                <Composer.Actions className="flex h-12 items-center justify-end px-2.5">
+                  <Composer.Submit className="flex size-7 cursor-pointer items-center justify-center rounded-full bg-[#0169cc] bg-linear-to-b from-[oklch(57.2%_0.166_253.2)] to-[oklch(52.9%_0.173_255)] text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.28),0_0_0_1px_oklch(46.5%_0.146_254.8),0_1px_2px_rgb(1_105_204/0.35)] transition-opacity focus-visible:outline-2 focus-visible:outline-[#0169cc]/60 focus-visible:outline-offset-2 disabled:cursor-default disabled:opacity-40">
+                    <ArrowUp className="size-[15px]" />
                   </Composer.Submit>
                 </Composer.Actions>
               </Composer.Container>
@@ -75,20 +81,3 @@ export const Hero = () => {
     </div>
   );
 };
-
-const SendIcon = (props: ComponentProps<"svg">) => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M8 13V3m0 0L3.5 7.5M8 3l4.5 4.5" />
-  </svg>
-);
diff --git a/hooks/use-as-ref.ts b/hooks/use-as-ref.ts
new file mode 100644
index 0000000..56833c8
--- /dev/null
+++ b/hooks/use-as-ref.ts
@@ -0,0 +1,11 @@
+import { useLayoutEffect, useRef } from "react";
+
+// Mirror a value into a ref so long-lived listeners always see the latest one
+// without re-subscribing. The layout effect updates it before any event fires.
+export const useAsRef = <T>(value: T) => {
+  const ref = useRef(value);
+  useLayoutEffect(() => {
+    ref.current = value;
+  });
+  return ref;
+};
diff --git a/lib/ai/chip-icons.tsx b/lib/ai/chip-icons.tsx
index 72bcf59..cefb468 100644
--- a/lib/ai/chip-icons.tsx
+++ b/lib/ai/chip-icons.tsx
@@ -1,24 +1,30 @@
+import {
+  Brain,
+  Bug,
+  ChartBar,
+  Code,
+  FileText,
+  Globe,
+  Image,
+  MapPin,
+  MessageSquareSparkles,
+  Table,
+} from "@keyline-icons/react";
 import type { ReactNode } from "react";
-import { BrainIcon } from "@/components/icons/brain";
-import { BubbleWideSparkleIcon } from "@/components/icons/bubble-wide-sparkle";
-import { BugIcon } from "@/components/icons/bug";
-import { CodeIcon } from "@/components/icons/code";
-import { FileChartIcon } from "@/components/icons/file-chart";
-import { FileTextIcon } from "@/components/icons/file-text";
-import { GlobeIcon } from "@/components/icons/globe";
-import { ImageAltIcon } from "@/components/icons/image-alt";
-import { SpreadsheetIcon } from "@/components/icons/spreadsheet";
 
+// Outlined Keyline glyphs, matching the rest of the app. MapPin stands in for
+// "map" because Keyline's Map would shadow the global Map.
 export const CHIP_ICONS = {
-  brain: <BrainIcon />,
-  bug: <BugIcon />,
-  bubbleWideSparkle: <BubbleWideSparkleIcon />,
-  code: <CodeIcon />,
-  fileChart: <FileChartIcon />,
-  fileText: <FileTextIcon />,
-  globe: <GlobeIcon />,
-  imageAlt: <ImageAltIcon />,
-  spreadsheet: <SpreadsheetIcon />,
+  brain: <Brain />,
+  bug: <Bug />,
+  bubbleWideSparkle: <MessageSquareSparkles />,
+  code: <Code />,
+  fileChart: <ChartBar />,
+  fileText: <FileText />,
+  globe: <Globe />,
+  imageAlt: <Image />,
+  map: <MapPin />,
+  spreadsheet: <Table />,
 } satisfies Record<string, ReactNode>;
 
 export type ChipIconKey = keyof typeof CHIP_ICONS;
diff --git a/lib/docs/code-theme.ts b/lib/docs/code-theme.ts
new file mode 100644
index 0000000..36ed88b
--- /dev/null
+++ b/lib/docs/code-theme.ts
@@ -0,0 +1,53 @@
+/**
+ * The docs' code theme. Code blocks are dark in both modes, so one theme does:
+ * white keywords and tags, blue attributes, green strings, zinc text.
+ */
+export const codeTheme = {
+  name: "intentface-code",
+  type: "dark" as const,
+  colors: {
+    "editor.background": "#00000000",
+    "editor.foreground": "#d4d4d8",
+  },
+  tokenColors: [
+    {
+      scope: ["comment", "punctuation.definition.comment"],
+      settings: { foreground: "#71717a", fontStyle: "italic" },
+    },
+    {
+      scope: [
+        "keyword",
+        "storage",
+        "storage.type",
+        "storage.modifier",
+        "variable.language",
+        "entity.name.tag",
+        "support.class.component",
+        "entity.name.type",
+        "entity.name.class",
+        "support.type.primitive",
+      ],
+      settings: { foreground: "#ffffff" },
+    },
+    {
+      scope: [
+        "entity.other.attribute-name",
+        "support.type.property-name",
+        "meta.object-literal.key",
+      ],
+      settings: { foreground: "#9cc2f5" },
+    },
+    {
+      scope: ["string", "string.quoted", "string.template", "punctuation.definition.string"],
+      settings: { foreground: "#a6d7b8" },
+    },
+    {
+      scope: ["constant.numeric", "constant.language"],
+      settings: { foreground: "#f0c38e" },
+    },
+    {
+      scope: ["entity.name.function", "support.function"],
+      settings: { foreground: "#e4e4e7" },
+    },
+  ],
+};
diff --git a/lib/docs/demo-files.ts b/lib/docs/demo-files.ts
new file mode 100644
index 0000000..98078bf
--- /dev/null
+++ b/lib/docs/demo-files.ts
@@ -0,0 +1,64 @@
+import { readFile } from "node:fs/promises";
+import path from "node:path";
+
+const DOCS_DIR = path.join(process.cwd(), "content", "docs");
+
+// `from "./x"`, `from "../x"` and side-effect `import "./x.css"`.
+const LOCAL_IMPORT = /(?:\bfrom\s+|\bimport\s+)["'](\.{1,2}\/[^"']+)["']/g;
+const EXTENSIONS = ["", ".tsx", ".ts", ".css", "/index.tsx", "/index.ts"];
+
+export type DemoFile = {
+  /** Path under content/docs. */
+  file: string;
+  /** The tab label: the path relative to the entry's directory. */
+  name: string;
+  source: string;
+};
+
+const readInDocs = async (file: string) => {
+  // Defence in depth: paths come from our own MDX and demos, but never let one
+  // escape content/docs.
+  const resolved = path.resolve(DOCS_DIR, file);
+  if (!resolved.startsWith(`${DOCS_DIR}${path.sep}`)) return null;
+  try {
+    return await readFile(resolved, "utf8");
+  } catch {
+    return null;
+  }
+};
+
+const resolveImport = async (from: string, specifier: string) => {
+  const base = path.join(path.dirname(from), specifier);
+  for (const extension of EXTENSIONS) {
+    const source = await readInDocs(base + extension);
+    if (source !== null) return { file: base + extension, source };
+  }
+  return null;
+};
+
+/**
+ * A demo's entry file followed by every local file it imports, depth-first and
+ * deduped — the files that run are the files displayed, one tab each.
+ */
+export const readDemoFiles = async (entry: string): Promise<DemoFile[]> => {
+  const entrySource = await readInDocs(entry);
+  if (entrySource === null) return [];
+
+  const root = path.dirname(entry);
+  const files: DemoFile[] = [];
+  const seen = new Set<string>();
+
+  const visit = async (file: string, source: string) => {
+    seen.add(file);
+    files.push({ file, name: path.relative(root, file), source });
+    for (const [, specifier] of source.matchAll(LOCAL_IMPORT)) {
+      const imported = await resolveImport(file, specifier);
+      if (imported && !seen.has(imported.file)) await visit(imported.file, imported.source);
+    }
+  };
+
+  await visit(entry, entrySource);
+  return files;
+};
+
+export const languageOf = (file: string) => path.extname(file).slice(1) || "tsx";
diff --git a/lib/docs/expand-demos.ts b/lib/docs/expand-demos.ts
index 5859cc8..fb75c9e 100644
--- a/lib/docs/expand-demos.ts
+++ b/lib/docs/expand-demos.ts
@@ -1,9 +1,6 @@
-import { readFile } from "node:fs/promises";
-import path from "node:path";
+import { languageOf, readDemoFiles } from "./demo-files";
 import { PACKAGE_MANAGERS } from "./package-managers";
 
-const DOCS_DIR = path.join(process.cwd(), "content", "docs");
-
 // <InstallationBlock packageName="@intentface/chat" />
 const INSTALL_TAG = /<InstallationBlock\b[\s\S]*?\spackageName="([^"]+)"[\s\S]*?\/>/g;
 
@@ -30,26 +27,23 @@ export const expandDemos = async (markdown: string): Promise<string> => {
   const files = [...expanded.matchAll(DEMO_TAG)].map(([, file]) => file);
   if (files.length === 0) return expanded;
 
-  const sources = new Map<string, string>();
+  // A demo split across local imports expands to one fenced block per file. An
+  // unreadable entry leaves the tag untouched rather than a half-broken page.
+  const blocks = new Map<string, string>();
   await Promise.all(
     [...new Set(files)].map(async (file) => {
-      // Defence in depth: `file` comes from our own MDX, but never let a path
-      // escape content/docs.
-      const resolved = path.resolve(DOCS_DIR, file);
-      if (!resolved.startsWith(`${DOCS_DIR}${path.sep}`)) return;
-      try {
-        sources.set(file, await readFile(resolved, "utf8"));
-      } catch {
-        // Leave the tag untouched rather than emit a half-broken page.
-      }
+      const demoFiles = await readDemoFiles(file);
+      if (demoFiles.length === 0) return;
+      const fenced = demoFiles.map(
+        (demoFile) =>
+          `\`\`\`${languageOf(demoFile.file)} title="${demoFile.file}"\n${demoFile.source.trimEnd()}\n\`\`\``,
+      );
+      blocks.set(file, fenced.join("\n\n"));
     }),
   );
 
   return expanded
     .replace(DEMO_IMPORT, "")
-    .replace(DEMO_TAG, (tag, file: string) => {
-      const source = sources.get(file);
-      return source ? `\`\`\`tsx title="${file}"\n${source.trimEnd()}\n\`\`\`` : tag;
-    })
+    .replace(DEMO_TAG, (tag, file: string) => blocks.get(file) ?? tag)
     .replace(/\n{3,}/g, "\n\n");
 };
diff --git a/lib/docs/source.ts b/lib/docs/source.ts
index 7ad16c7..7a63fd8 100644
--- a/lib/docs/source.ts
+++ b/lib/docs/source.ts
@@ -33,3 +33,29 @@ export const getPage = (slug: string[] | undefined): DocPage | undefined =>
   source.getPage(slug) as DocPage | undefined;
 
 export const getPages = (): DocPage[] => source.getPages() as DocPage[];
+
+/**
+ * The sidebar group a page sits in — its folder, or the separator above it for
+ * root pages. The breadcrumb's first segment.
+ */
+export const getSectionLabel = (url: string): string | undefined => {
+  let separator: string | undefined;
+
+  for (const node of source.pageTree.children) {
+    switch (node.type) {
+      case "separator":
+        separator = typeof node.name === "string" ? node.name : undefined;
+        break;
+      case "folder":
+        if (node.children.some((child) => child.type === "page" && child.url === url)) {
+          return typeof node.name === "string" ? node.name : undefined;
+        }
+        break;
+      case "page":
+        if (node.url === url) return separator;
+        break;
+    }
+  }
+
+  return undefined;
+};
diff --git a/lib/interface-theme.ts b/lib/interface-theme.ts
index 4a64460..6018f07 100644
--- a/lib/interface-theme.ts
+++ b/lib/interface-theme.ts
@@ -40,15 +40,15 @@ export type PresetDefinition = {
 
 export const DEFAULT_LIGHT_SEEDS: CustomSeeds = {
   bg: "#ffffff",
-  fg: "#1a1a1a",
+  fg: "#18181b",
   acc: "#0169cc",
   con: CONTRAST_DEFAULT,
 };
 
 export const DEFAULT_DARK_SEEDS: CustomSeeds = {
-  bg: "#111111",
-  fg: "#fcfcfc",
-  acc: "#4a9eed",
+  bg: "#18181b",
+  fg: "#f4f4f5",
+  acc: "#4c9bea",
   con: CONTRAST_DEFAULT,
 };
 
diff --git a/lib/sidebar-cookie.ts b/lib/sidebar-cookie.ts
deleted file mode 100644
index fae29fe..0000000
--- a/lib/sidebar-cookie.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * Where this app keeps the sidebar's layout.
- *
- * The package has no opinion about any of it: `Shell` reports changes out
- * through `onOpenChange` / `onWidthChange` and takes them back as
- * `defaultOpen` / `defaultWidth`, so the format, the key and the cookie flags
- * below are ours to choose — and ours to change without waiting on a release.
- *
- * A cookie rather than localStorage because it is readable from the request,
- * which is what lets the layout paint the right thing on the first frame
- * instead of snapping a frame later.
- */
-
-const KEY = "sidebar";
-const MAX_AGE = 60 * 60 * 24 * 365;
-
-export type SidebarLayout = { open: boolean; width?: number };
-
-/**
- * Validate on the way in, always. Stored state outlives the code that wrote
- * it: a value from an older release, a half-written entry, or something
- * another script left under the same key. Anything unexpected is discarded in
- * favour of the defaults, because a sidebar that opens at its default width is
- * a non-event and one that crashes on a stale cookie is not.
- */
-export const parseSidebarLayout = (raw: string | null | undefined): SidebarLayout | null => {
-  if (!raw) return null;
-
-  let value: unknown;
-  try {
-    value = JSON.parse(raw);
-  } catch {
-    return null;
-  }
-
-  if (typeof value !== "object" || value === null) return null;
-
-  const { open, width } = value as Record<string, unknown>;
-  if (typeof open !== "boolean") return null;
-  if (width === undefined) return { open };
-  if (typeof width !== "number" || !Number.isFinite(width) || width <= 0) return null;
-
-  return { open, width };
-};
-
-/** Pull our entry out of a `Cookie` header or `document.cookie`. */
-const scan = (cookies: string) => {
-  const prefix = `${KEY}=`;
-  for (const part of cookies.split(";")) {
-    const entry = part.trim();
-    if (entry.startsWith(prefix)) {
-      try {
-        return decodeURIComponent(entry.slice(prefix.length));
-      } catch {
-        // `decodeURIComponent` throws on a value like `%`. Treat a malformed
-        // entry as absent: the write path runs inside Shell's `onOpenChange`,
-        // which the store calls *before* committing, so a throw here would
-        // stop the sidebar toggling at all rather than merely fail to persist.
-        return null;
-      }
-    }
-  }
-  return null;
-};
-
-/** Server-side: read it off a request's `Cookie` header. */
-export const readSidebarLayout = (cookieHeader: string | null | undefined) =>
-  cookieHeader ? parseSidebarLayout(scan(cookieHeader)) : null;
-
-/** Client-side: merge one field into whatever is stored and write it back. */
-export const writeSidebarLayout = (patch: Partial<SidebarLayout>) => {
-  if (typeof document === "undefined") return;
-
-  const current = parseSidebarLayout(scan(document.cookie)) ?? { open: true };
-  const next = JSON.stringify({ ...current, ...patch });
-  // biome-ignore lint/suspicious/noDocumentCookie: the Cookie Store API is still absent from Safari and Firefox.
-  document.cookie = `${KEY}=${encodeURIComponent(next)}; path=/; max-age=${MAX_AGE}; samesite=lax`;
-};
diff --git a/mdx-components.tsx b/mdx-components.tsx
index 8a230b3..459796f 100644
--- a/mdx-components.tsx
+++ b/mdx-components.tsx
@@ -30,58 +30,80 @@ const heading =
 
 const proseComponents: MDXComponents = {
   h1: (props) => (
-    <h1 className="font-semibold text-2xl text-ink-primary tracking-tight" {...props} />
+    <h1
+      className="font-semibold text-[32px] text-ink-primary leading-[38px] tracking-[-0.02em]"
+      {...props}
+    />
+  ),
+  // Every section opens on a hairline rule, like the Paper sheets.
+  h2: heading(
+    "h2",
+    "mt-12 mb-3.5 border-ink-primary/6 border-t pt-8 font-semibold text-[20px] text-ink-primary leading-7 tracking-[-0.01em]",
   ),
-  h2: heading("h2", "mt-10 mb-3 font-semibold text-ink-primary text-xl"),
-  h3: heading("h3", "mt-8 mb-2 font-semibold text-ink-primary text-lg"),
-  h4: heading("h4", "mt-6 mb-2 font-medium text-ink-primary"),
-  p: (props) => <p className="my-4 text-lg text-ink-secondary leading-7" {...props} />,
+  h3: heading("h3", "mt-8 mb-2 font-semibold text-ink-primary text-xl tracking-[-0.01em]"),
+  h4: heading("h4", "mt-6 mb-2 font-semibold text-ink-primary text-lg"),
+  p: (props) => <p className="my-4 text-ink-body text-lg leading-6" {...props} />,
   ul: (props) => (
-    <ul className="my-4 ml-6 flex list-disc flex-col gap-2 text-lg text-ink-secondary" {...props} />
+    <ul
+      className="my-4 ml-5 flex list-disc flex-col gap-1.5 text-ink-body text-lg marker:text-ink-tertiary"
+      {...props}
+    />
   ),
   ol: (props) => (
     <ol
-      className="my-4 ml-6 flex list-decimal flex-col gap-2 text-lg text-ink-secondary"
+      className="my-4 ml-5 flex list-decimal flex-col gap-1.5 text-ink-body text-lg marker:text-ink-tertiary"
       {...props}
     />
   ),
-  li: (props) => <li className="text-lg leading-7" {...props} />,
-  strong: (props) => <strong className="font-medium text-ink-primary" {...props} />,
-  b: (props) => <b className="font-medium text-ink-primary" {...props} />,
+  li: (props) => <li className="pl-1 text-lg leading-6" {...props} />,
+  strong: (props) => <strong className="font-semibold text-ink-primary" {...props} />,
+  b: (props) => <b className="font-semibold text-ink-primary" {...props} />,
   a: ({ href, ...props }: ComponentProps<"a">) => (
     <Link
       href={href ?? "#"}
-      className="font-medium text-accent-bg underline underline-offset-4 hover:text-accent-bg-hover"
+      // A link that is only a code badge (a commit hash) drops the underline; the
+      // badge darkens on hover instead.
+      className="font-medium text-accent-bg underline decoration-accent-bg/30 underline-offset-4 transition-colors hover:decoration-accent-bg has-[>code]:no-underline [&>code]:transition-colors hover:[&>code]:bg-ink-primary/10"
       {...props}
     />
   ),
   blockquote: (props) => (
     <blockquote
-      className="my-4 border-accent-bg border-l-2 pl-4 text-ink-tertiary italic"
+      className="my-5 border-ink-primary/10 border-l-2 pl-4 text-ink-body [&>p]:my-2"
       {...props}
     />
   ),
+  hr: (props) => <hr className="my-10 border-ink-primary/6" {...props} />,
+  // The ReferenceTable frame in one table: the header sits in the tray and the
+  // rows form the inset panel, its edge and corners drawn by the outer cells.
   table: (props) => (
-    <div className="my-6 overflow-x-auto">
-      <table className="w-full border-collapse text-sm" {...props} />
+    <div className="my-6 overflow-x-auto rounded-xl bg-table-tray p-[5px] shadow-card">
+      <table className="w-full border-separate border-spacing-0 text-sm" {...props} />
     </div>
   ),
   th: (props) => (
     <th
-      className="border-secondary-border border-b px-3 py-2.5 align-top text-left font-medium text-ink-primary"
+      className="h-[31px] px-4 pb-[5px] text-left align-middle font-medium text-ink-secondary text-xs"
       {...props}
     />
   ),
   td: (props) => (
     <td
-      className="border-secondary-border/60 border-b px-3 py-2.5 align-top text-ink-secondary"
+      className={cn(
+        "bg-table-panel px-4 py-3 align-top text-ink-body [&>code]:whitespace-nowrap",
+        "border-black/6 first:border-l last:border-r dark:border-white/7",
+        "[tr:first-child>&]:border-t [tr:last-child>&]:border-b",
+        "[tr+tr>&]:border-t [tr+tr>&]:border-t-ink-primary/6",
+        "[tr:first-child>&:first-child]:rounded-tl-md [tr:first-child>&:last-child]:rounded-tr-md",
+        "[tr:last-child>&:first-child]:rounded-bl-md [tr:last-child>&:last-child]:rounded-br-md",
+      )}
       {...props}
     />
   ),
   // Inline code; fenced blocks arrive as <pre><code> and are handled by `pre`.
   code: (props) => (
     <code
-      className="rounded border border-base-border bg-base-bg px-1 py-px font-mono text-[0.85em] text-ink-primary"
+      className="rounded-[4px] bg-ink-primary/6 px-1.5 py-px font-mono text-[0.85em] text-ink-primary"
       {...props}
     />
   ),
diff --git a/next.config.ts b/next.config.ts
index f936124..d4e90be 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -21,6 +21,9 @@ const chatSourceAliases = {
 
 const nextConfig: NextConfig = {
   transpilePackages: ["@intentface/chat"],
+  // React's <ViewTransition>: switching between the docs and the playground
+  // cross-dissolves the viewport (see SiteShell).
+  experimental: { viewTransition: true },
   turbopack: { resolveAlias: chatSourceAliases },
   // Any docs page is readable as markdown by appending `.md` — the convention
   // agents expect, and guessable from a page URL. It maps onto the same handler
diff --git a/package.json b/package.json
index a03ea9f..0346e76 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,8 @@
     "@ai-sdk/react": "^3.0.220",
     "@base-ui/react": "^1.6.0",
     "@intentface/chat": "workspace:*",
+    "@keyline-icons/react": "^1.4.0",
+    "@tabler/icons-react": "^3.46.0",
     "ai": "^6.0.218",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
diff --git a/packages/chat/README.md b/packages/chat/README.md
index a497ef3..c9c9cd5 100644
--- a/packages/chat/README.md
+++ b/packages/chat/README.md
@@ -4,9 +4,44 @@ Headless chat UI primitives for React — the behavior, state, and wire formats
 for building AI chat interfaces, with no styling of their own.
 
 This is the Base UI model applied to chat: **the package owns behavior, you own
-every class.** There is no pre-styled `@intentface/chat` package. The demos on
-each [docs](https://ui.intentface.com) page show how the parts fit together
-and are meant to be copied and restyled.
+every class.** There is no styled companion package and no theme to opt out of.
+The demos on each [docs](https://ui.intentface.com) page are self-contained
+Tailwind, meant to be copied and restyled.
+
+```tsx
+"use client";
+import { Composer } from "@intentface/chat/composer";
+import { Message } from "@intentface/chat/message";
+import { Thread } from "@intentface/chat/thread";
+
+export const Chat = ({ messages, send }: ChatProps) => (
+  <Thread.Root autoScroll="follow" className="relative flex h-dvh flex-col">
+    <Thread.Viewport className="flex-1 overflow-y-auto">
+      <Thread.Content className="mx-auto flex max-w-2xl flex-col gap-4 p-4">
+        {messages.map((message) => (
+          <Message.Root key={message.id} role={message.role}>
+            <Message.Text>{message.text}</Message.Text>
+          </Message.Root>
+        ))}
+      </Thread.Content>
+    </Thread.Viewport>
+
+    <Thread.Composer className="p-4">
+      <Composer.Root onSubmit={send}>
+        <Composer.Container className="rounded-xl border p-2">
+          <Composer.Textarea placeholder="Ask anything" />
+          <Composer.Actions>
+            <Composer.Submit>Send</Composer.Submit>
+          </Composer.Actions>
+        </Composer.Container>
+      </Composer.Root>
+    </Thread.Composer>
+  </Thread.Root>
+);
+```
+
+Every class above is yours; delete them and the chat still works, it just looks
+like unstyled HTML.
 
 ## Status
 
@@ -30,14 +65,18 @@ it beyond two small runtime deps (`@floating-ui/dom` for anchored positioning,
 
 Each primitive is a separate entry point, exporting an unstyled compound
 component that renders semantic DOM with `data-*` state attributes, context
-hooks, and a `render` prop for swapping the underlying element:
+hooks, and a `render` prop for swapping the underlying element. The last three
+are app-shell parts rather than chat parts, and are useful on their own:
 
 | Import | What it is |
 | --- | --- |
-| `@intentface/chat/composer` | Rich-text input over a purpose-built contenteditable engine: `/` and `@` command palette, inline chips, attachments, ask-user flow. One store per `<Composer>`, or bring your own via `Composer.createStore()`. |
-| `@intentface/chat/thread` | Scroll container with at-bottom detection and auto-follow. |
-| `@intentface/chat/message` | Message parts, turns, chip-segmented text, sources, actions. |
+| `@intentface/chat/composer` | Rich-text input over a purpose-built contenteditable engine: `/` and `@` command palette, inline chips, attachments, ask-user flow. One store per `<Composer.Root>`, or bring your own via `Composer.createStore()`. |
+| `@intentface/chat/thread` | Scroll container with at-bottom detection, auto-follow, and docked-composer measurement. |
+| `@intentface/chat/message` | Message parts, turns, chip-segmented text, selection hooks. |
 | `@intentface/chat/steps`, `/reasoning` | Tool-call timelines and reasoning disclosure. |
+| `@intentface/chat/shell` | A collapsible, resizable sidebar beside the viewport it shares the screen with, with an edge hotspot. |
+| `@intentface/chat/nav` | A nav tree with roving focus, typeahead, collapsible groups, and a guide ladder down the left edge. |
+| `@intentface/chat/tabs` | An open-ended, closable tab collection whose panel renders in the layout or anchored to its own tab. |
 | `@intentface/chat/chip`, `/attachments`, `/ask-user` | The remaining building blocks. |
 | `@intentface/chat/types` | The structural message contract + part type guards. |
 | `@intentface/chat/message-utils` | Part segmentation, turn grouping, reasoning/source derivation. |
diff --git a/packages/chat/src/attachments/attachments.tsx b/packages/chat/src/attachments/attachments.tsx
index aad5f9b..94ef6ea 100644
--- a/packages/chat/src/attachments/attachments.tsx
+++ b/packages/chat/src/attachments/attachments.tsx
@@ -86,6 +86,11 @@ export const matchesAccept = (file: File, accept: string): boolean => {
 
 export type AttachmentsRootProps = PrimitiveProps<"div">;
 
+/**
+ * The tray container. Mount it only when there are items to show; it renders
+ * no layout of its own.
+ * Renders a `<div>` element.
+ */
 export const AttachmentsRoot = ({
   className,
   render,
@@ -103,6 +108,11 @@ export type AttachmentsItemProps = PrimitiveProps<"div">;
 // Generic structural slot for one attachment. It carries no media taxonomy —
 // categorization (image/pdf/file, icons, thumbnails) belongs to the styled
 // layer, which reads the item's raw mediaType however it wants.
+/**
+ * One attachment, as a structural slot with no media taxonomy of its own.
+ * Read the item's `mediaType` and decide what an image or a PDF looks like.
+ * Renders a `<div>` element.
+ */
 export const AttachmentsItem = ({
   className,
   render,
@@ -121,6 +131,12 @@ export type AttachmentsRemoveProps = PrimitiveProps<"button"> & {
   filename?: string;
 };
 
+/**
+ * The removal affordance. Named "Remove attachment" by default, or
+ * "Remove {filename}" when `filename` is set, so a row of them does not
+ * announce identically.
+ * Renders a `<button>` element.
+ */
 export const AttachmentsRemove = ({
   onRemove,
   filename,
@@ -158,6 +174,12 @@ export type AttachmentsDropzoneProps = PrimitiveProps<"div", AttachmentsDropzone
   children?: ReactNode;
 };
 
+/**
+ * The drop overlay. `portalSelector` only moves where it renders (e.g. over an
+ * app shell region); where files can be dropped is `Composer.Attachments`'
+ * `globalDrop`, not this part.
+ * Renders a `<div>` element.
+ */
 export const AttachmentsDropzone = ({
   visible = false,
   keepMounted = false,
@@ -194,6 +216,11 @@ export type AttachmentsErrorProps = PrimitiveProps<"span">;
 
 // role="alert" (assertive): a rejected pick/drop is a user-action failure that
 // should announce immediately. The copy inside stays the consumer's.
+/**
+ * The validation slot, as a live region: whatever appears inside announces
+ * immediately. Validation emits a code, never copy, so the message is yours.
+ * Renders a `<span>` element with `role="alert"`.
+ */
 export const AttachmentsError = ({
   className,
   render,
@@ -208,6 +235,11 @@ export const AttachmentsError = ({
 
 export type AttachmentsTriggerProps = PrimitiveProps<"button">;
 
+/**
+ * The file-picker button, named "Add attachment" by default. The package owns
+ * no file input; wire this to your own.
+ * Renders a `<button>` element.
+ */
 export const AttachmentsTrigger = ({
   className,
   render,
diff --git a/packages/chat/src/chip/chip.tsx b/packages/chat/src/chip/chip.tsx
index b2e9a6f..27ecbfe 100644
--- a/packages/chat/src/chip/chip.tsx
+++ b/packages/chat/src/chip/chip.tsx
@@ -12,8 +12,11 @@ import { useRenderElement } from "../internal/render/useRenderElement";
 
 type ChipPreviewProps = { children: ReactNode };
 
-// Marker component — never renders directly. ChipRoot inspects its children
-// and routes ChipPreview's content into `renderWithPreview`.
+/**
+ * Marker child whose content becomes the preview body. Renders nothing inline:
+ * `Chip.Root` inspects its children and routes this through
+ * `renderWithPreview`, so the package never owns a popup.
+ */
 export const ChipPreview = (_props: ChipPreviewProps): ReactNode => null;
 
 export type ChipState = {
@@ -31,6 +34,12 @@ export type ChipRootProps = PrimitiveProps<"span", ChipState> & {
   renderWithPreview?: (badge: ReactElement, preview: ReactNode) => ReactNode;
 };
 
+/**
+ * The inline token surface. Flows with the surrounding text rather than
+ * breaking the line box, and lifts a `Chip.Preview` child into whatever
+ * surface `renderWithPreview` builds.
+ * Renders a `<span>` element.
+ */
 export const ChipRoot = ({
   variant,
   renderWithPreview,
@@ -64,6 +73,11 @@ export const ChipRoot = ({
 
 export type ChipIconProps = PrimitiveProps<"span">;
 
+/**
+ * Leading inline icon, baseline-aligned to the label and `aria-hidden`, so
+ * decoration stays out of the chip's accessible name.
+ * Renders a `<span>` element.
+ */
 export const ChipIcon = ({ className, render, style, ...elementProps }: ChipIconProps) =>
   useRenderElement(
     "span",
@@ -73,6 +87,10 @@ export const ChipIcon = ({ className, render, style, ...elementProps }: ChipIcon
 
 export type ChipLabelProps = PrimitiveProps<"span">;
 
+/**
+ * The chip's text, which reads as part of the sentence around it.
+ * Renders a `<span>` element.
+ */
 export const ChipLabel = ({ className, render, style, ...elementProps }: ChipLabelProps) =>
   useRenderElement(
     "span",
diff --git a/packages/chat/src/message/message.tsx b/packages/chat/src/message/message.tsx
index 8ed4cb0..920fcd3 100644
--- a/packages/chat/src/message/message.tsx
+++ b/packages/chat/src/message/message.tsx
@@ -37,6 +37,12 @@ export type MessageRootProps = Omit<PrimitiveProps<"div", MessageState>, "role">
   isError?: boolean;
 };
 
+/**
+ * One turn's container. Reports the role and position as data attributes and
+ * renders no layout of its own, so the bubble, avatar and actions around it
+ * stay yours.
+ * Renders a `<div>` element.
+ */
 export const MessageRoot = ({
   role,
   isLast = false,
@@ -64,6 +70,10 @@ export const MessageRoot = ({
 
 export type MessageTurnProps = PrimitiveProps<"div">;
 
+/**
+ * Groups consecutive messages from one role into a single visual turn.
+ * Renders a `<div>` element.
+ */
 export const MessageTurn = ({ className, render, style, ...elementProps }: MessageTurnProps) =>
   useRenderElement(
     "div",
@@ -90,6 +100,11 @@ export type MessageTextProps = Omit<PrimitiveProps<"span">, "children"> & {
   renderChip?: (chip: MessageChipSegment, index: number) => ReactNode;
 };
 
+/**
+ * Message text with inline chips reconstructed from the wire format, so a
+ * stored message rebuilds its own chips with no sidecar metadata.
+ * Renders a `<span>` element.
+ */
 export const MessageText = ({
   children,
   className,
diff --git a/packages/chat/src/reasoning/reasoning.tsx b/packages/chat/src/reasoning/reasoning.tsx
index 6d1970b..2aea16d 100644
--- a/packages/chat/src/reasoning/reasoning.tsx
+++ b/packages/chat/src/reasoning/reasoning.tsx
@@ -42,6 +42,12 @@ export type ReasoningRootProps = Omit<ComponentProps<typeof Collapsible>, "onOpe
   onOpenChange?: (open: boolean) => void;
 };
 
+/**
+ * The disclosure root. Tracks how long `isStreaming` stayed true and hands the
+ * elapsed seconds back through `useReasoning`, so a label can change without
+ * the consumer timing anything.
+ * Renders a `<div>` element.
+ */
 export const ReasoningRoot = memo(
   ({
     isStreaming = false,
@@ -111,12 +117,24 @@ ReasoningRoot.displayName = "Reasoning";
 
 export type ReasoningTriggerProps = ComponentProps<typeof Collapsible.Trigger>;
 
+/**
+ * The toggle. Ships no copy: supply the label as children, and read
+ * `isStreaming` and `duration` from `useReasoning` if it should change while
+ * the model is thinking.
+ * Renders a `<button>` element.
+ */
 export const ReasoningTrigger = (props: ReasoningTriggerProps) => (
   <Collapsible.Trigger data-reasoning-trigger="" {...props} />
 );
 
 export type ReasoningContentProps = ComponentProps<typeof Collapsible.Panel>;
 
+/**
+ * The collapsible panel. Publishes its measured height while a transition runs
+ * and releases it once settled open, so a panel that is open keeps growing as
+ * text streams in.
+ * Renders a `<div>` element.
+ */
 export const ReasoningContent = (props: ReasoningContentProps) => (
   <Collapsible.Panel data-reasoning-content="" {...props} />
 );
diff --git a/packages/chat/src/steps/steps.tsx b/packages/chat/src/steps/steps.tsx
index 4c8a269..6f8ef15 100644
--- a/packages/chat/src/steps/steps.tsx
+++ b/packages/chat/src/steps/steps.tsx
@@ -34,6 +34,11 @@ const visuallyHiddenStyle: CSSProperties = {
 
 export type StepsRootProps = PrimitiveProps<"div">;
 
+/**
+ * The timeline container. Ships the disclosure and status plumbing and no row
+ * content: what a tool call or a reasoning step looks like is yours.
+ * Renders a `<div>` element.
+ */
 export const StepsRoot = ({ className, render, style, ...elementProps }: StepsRootProps) =>
   useRenderElement(
     "div",
@@ -67,6 +72,12 @@ export type StepsItemProps = ComponentProps<typeof Collapsible> & {
   status?: StepStatus;
 };
 
+/**
+ * One node of the tree, and the unit that nests: an item's panel may hold
+ * further items, so a timeline goes as deep as the run did. Publishes its
+ * `status` to the icon and label through context.
+ * Renders a `<div>` element.
+ */
 export const StepsItem = ({ status = "complete", defaultOpen, ...props }: StepsItemProps) => {
   const isNested = use(NestedContext);
 
@@ -92,6 +103,11 @@ StepsItem.displayName = "StepsItem";
 
 export type StepsTriggerProps = ComponentProps<typeof Collapsible.Trigger>;
 
+/**
+ * The row that expands an item. A real button, so the tree is plain sequential
+ * tab order rather than a composite widget with its own keyboard model.
+ * Renders a `<button>` element.
+ */
 export const StepsTrigger = (props: StepsTriggerProps) => (
   <Collapsible.Trigger data-steps-trigger="" {...props} />
 );
@@ -100,6 +116,12 @@ StepsTrigger.displayName = "StepsTrigger";
 
 export type StepsPanelProps = ComponentProps<typeof Collapsible.Panel>;
 
+/**
+ * The collapsible body. Publishes its measured height while a transition runs
+ * and releases it once settled open, so an open panel grows with content that
+ * arrives inside it.
+ * Renders a `<div>` element.
+ */
 export const StepsPanel = (props: StepsPanelProps) => (
   <Collapsible.Panel data-steps-panel="" {...props} />
 );
@@ -115,6 +137,11 @@ export type StepsIconProps = PrimitiveProps<"span", { status: StepStatus }> & {
   status?: StepStatus;
 };
 
+/**
+ * The row's status glyph, `aria-hidden` because colour and shape announce
+ * nothing. Resolves `status` from its own prop, then the enclosing item.
+ * Renders a `<span>` element.
+ */
 export const StepsIcon = ({
   status,
   className,
@@ -140,6 +167,11 @@ export type StepsLabelProps = PrimitiveProps<"span", { status: StepStatus }> & {
   status?: StepStatus;
 };
 
+/**
+ * The row's text. Resolves `status` the same way the icon does, so one
+ * attribute drives both.
+ * Renders a `<span>` element.
+ */
 export const StepsLabel = ({
   status,
   className,
@@ -171,6 +203,11 @@ export type StepsStatusProps = PrimitiveProps<"span", { status: StepStatus }> &
   status?: StepStatus;
 };
 
+/**
+ * The only part that speaks the status. Renders a visually hidden span saying
+ * the resolved status string; pass `children` to localise the wording.
+ * Renders a `<span>` element.
+ */
 export const StepsStatus = ({
   status,
   children,
diff --git a/scripts/audit-docs.mjs b/scripts/audit-docs.mjs
index cb86106..6d5cfc5 100644
--- a/scripts/audit-docs.mjs
+++ b/scripts/audit-docs.mjs
@@ -123,7 +123,10 @@ for (const [slug, namespace] of Object.entries(NAMESPACES)) {
   const page = readFileSync(path.join(DOCS, `${slug}.mdx`), "utf8");
   const findings = [];
 
-  for (const section of page.split(/^### /m).slice(1)) {
+  for (const block of page.split(/^### /m).slice(1)) {
+    // A part's section ends at the next `##` too, so a hook documented under its
+    // own `##` heading isn't read as the preceding part's props.
+    const section = block.split(/^## /m)[0];
     const heading = section.split("\n", 1)[0].trim().replace(/\(\)$/, "");
     let part;
     if (heading.startsWith(`${namespace}.`)) part = heading.slice(namespace.length + 1);