docs: fix inaccuracies and trim redundant prose across 12 pages

Accuracy fixes:
- approval-card: remove false "loading state" a11y claim, fix icon
  format description to match PascalCase example
- preferences-panel: remove false hard limits (2 sections, 5 items)
  that don't exist in schema, fix toggle "2-4" to "2+"
- terminal: fix "auto-collapsed" claim (requires maxCollapsedLines)
- message-draft: clarify cancelled outcome hides component
- chart: replace broken Step 3 with actual registration example

Simplification (-122 lines):
- overview: remove "What is tool calling?" section and redundant
  numbered list under "How it works"
- quick-start: remove "What you'll build", "Wire it up" intro,
  "Other frameworks", "Runtime options" sections
- terminal: remove ANSI codes reference and exit code meanings
- weather-widget: replace marketing copy with one-line description
- item-carousel: remove "Design Details" implementation notes
- geo-map: replace 31-line CSS token list with file reference
- plan: remove framework-agnostic disclaimer
- design-guidelines: remove redundant "Receipts" section

Author: Yonom

apps/www/app/docs/approval-card/content.mdx

@@ -142,7 +142,7 @@ Set `variant="destructive"` for dangerous or irreversible actions. The icon back
     },
     icon: {
       description:
-        'Lucide icon name in kebab-case (e.g., "rocket", "trash-2", "alert-triangle")',
+        'Lucide icon name (e.g., "Rocket", "trash-2"). Accepts PascalCase or kebab-case.',
       type: "string",
     },
     metadata: {
@@ -205,7 +205,6 @@ Long metadata values are automatically truncated with an ellipsis. Keep values c
   - `Tab` to move between buttons
   - `Enter` or `Space` to activate focused button
   - `Escape` triggers the cancel action
-- Loading state disables both buttons to prevent double-submission
 - Receipt state uses `role="status"` for screen reader announcements
 - Fade-in animation respects `prefers-reduced-motion`
 

apps/www/app/docs/chart/content.mdx

@@ -60,16 +60,22 @@ import { Chart } from "@/components/tool-ui/chart";
 Register this renderer so tool results display as `Chart`.
 
 ```tsx
-<Chart
-  id="clickable"
-  type="line"
-  data={data}
-  xKey="time"
-  series={[{ key: "value", label: "Value" }]}
-  onDataPointClick={(point) => {
-    console.log("Clicked:", point.xValue, point.yValue);
-  }}
-/>
+import { type Toolkit } from "@assistant-ui/react";
+import { Chart } from "@/components/tool-ui/chart";
+import { safeParseSerializableChart } from "@/components/tool-ui/chart/schema";
+
+export const toolkit: Toolkit = {
+  showChart: {
+    type: "backend",
+    render: ({ result }) => {
+      const parsed = safeParseSerializableChart(result);
+      if (!parsed) {
+        return null;
+      }
+      return <Chart {...parsed} />;
+    },
+  },
+};
 ```
 
 </Step>

apps/www/app/docs/design-guidelines/content.mdx

@@ -160,12 +160,6 @@ If the assistant can't point at something later, you lose half the value of rend
 
 Use stable IDs from your backend — database IDs, canonical URLs — not array indexes or render-time UUIDs. Anything the user can act on should have an ID the assistant can cite.
 
-## Receipts
-
-When a user takes an action with consequences, the tool UI should transition to a receipt — a read-only confirmation of what happened. This gives the user proof and the assistant something to cite later.
-
-See the [Receipts](/docs/receipts) page for patterns and copy guidance.
-
 ## Anti-Patterns
 
 - **Input fields:** Input fields compete with the main chat composer. Ask whether the assistant could gather that information through conversation, or link to a form outside the chat.

apps/www/app/docs/geo-map/content.mdx

@@ -151,39 +151,7 @@ Theme behavior:
 />
 ```
 
-Supported token keys:
-
-- `--geo-map-canvas-bg`
-- `--geo-map-tooltip-bg`
-- `--geo-map-tooltip-fg`
-- `--geo-map-tooltip-shadow`
-- `--geo-map-tooltip-radius`
-- `--geo-map-tooltip-padding`
-- `--geo-map-tooltip-font-size`
-- `--geo-map-tooltip-font-weight`
-- `--geo-map-tooltip-line-height`
-- `--geo-map-popup-margin-bottom`
-- `--geo-map-popup-border`
-- `--geo-map-popup-radius`
-- `--geo-map-popup-bg`
-- `--geo-map-popup-fg`
-- `--geo-map-popup-shadow`
-- `--geo-map-popup-blur`
-- `--geo-map-popup-content-padding`
-- `--geo-map-popup-max-width`
-- `--geo-map-popup-font-family`
-- `--geo-map-zoom-bg`
-- `--geo-map-zoom-fg`
-- `--geo-map-zoom-border`
-- `--geo-map-zoom-hover-bg`
-- `--geo-map-zoom-hover-fg`
-- `--geo-map-zoom-disabled-bg`
-- `--geo-map-zoom-disabled-fg`
-- `--geo-map-zoom-shadow`
-- `--geo-map-zoom-focus-ring`
-- `--geo-map-zoom-radius`
-- `--geo-map-zoom-size`
-- `--geo-map-zoom-font-size`
+See `geo-map-theme.module.css` for all available token keys.
 
 ## Props
 

apps/www/app/docs/item-carousel/content.mdx

@@ -129,22 +129,6 @@ export const toolkit: Toolkit = {
   </Feature>
 </FeatureGrid>
 
-## Design Details
-
-How the carousel handles common interaction patterns:
-
-**Responsive button layout:** Each card is a container (`@container/card`). Narrow cards stack buttons vertically with the primary on top. Above 176px, buttons flow horizontally with the primary on the right. `flex-col-reverse` keeps DOM order consistent while adapting visual hierarchy.
-
-**Equal card heights:** Cards use CSS Grid (`grid-flow-col` with `auto-cols-max`). Grid cells match heights automatically, so a two-line title aligns with one-line neighbors.
-
-**Smooth scroll animation:** Custom JavaScript scrolling with a cubic-bezier ease-out curve. Respects `prefers-reduced-motion` with an instant-scroll fallback. Snap positions are calculated dynamically from card offsets.
-
-**Image handling:** Accepts image URLs or hex color fallbacks. Images use `loading="lazy"` and `decoding="async"`. On hover, images scale up 5% with a `duration-200` transform transition.
-
-**Overlay click target:** Interactive cards render a full-card overlay button (`absolute inset-0`, `z-10`) for `onItemClick`, while action buttons sit above it (`z-20`) so primary actions stay independently clickable.
-
-**Touch optimization:** `touch-manipulation` eliminates the 300ms tap delay on iOS. Navigation buttons appear only on hover/focus (desktop) with backdrop blur.
-
 ## Props
 
 <TypeTable

apps/www/app/docs/message-draft/content.mdx

@@ -145,7 +145,7 @@ Configure the countdown length with `undoGracePeriod` (in milliseconds).
 
 ## Receipt States
 
-Pass `outcome` to render a one-line receipt. Useful for showing the final state in conversation history.
+Pass `outcome="sent"` to render a one-line confirmation receipt. `outcome="cancelled"` hides the component entirely.
 
 ## Props
 

apps/www/app/docs/overview/content.mdx

@@ -50,15 +50,7 @@ Tool UI is a component library built for this. Each component turns a specific k
   </MockThread>
 </div>
 
-Same data, different experience. The left side either dumps JSON to the user or, with a markdown renderer like MDX, gives you a plain text link. The right side renders a clickable card that looks and behaves like a native part of the conversation.
-
-## What is tool calling?
-
-Tool calling happens when the assistant _does_ something instead of _saying_ something. The user asks "find me flights to Tokyo," and instead of describing options in a paragraph, the assistant calls a search tool and returns structured results.
-
-You define the functions the model can invoke: searching a database, fetching a URL, running a calculation. The model decides when to call them based on the conversation. It sends structured arguments, your server executes the function, and a result comes back.
-
-Usually that result is plain text or JSON dumped into the chat. Tool UI handles what comes after: **rendering those results as real UI**.
+Same data, different experience.
 
 ## What if tool results could render UI?
 
@@ -121,16 +113,8 @@ flowchart LR
 
 `} />
 
-1. **The assistant calls a tool.** Based on the conversation, the model invokes a tool you've defined (e.g., `previewLink`, `searchFlights`).
-2. **The tool returns JSON.** Your server-side function executes and returns structured data matching an `outputSchema`.
-3. **The schema matches. A component renders.** On the client, a registered renderer parses the JSON against the component's schema. If it matches, the component renders inline in the chat message.
-4. **The user interacts.** For display components, this is the end. For interactive components (decisions, approvals), the user takes an action.
-5. **The result returns.** The user's choice is sent back to the assistant as a tool result via `addResult`, continuing the conversation.
-
 ### Minimal example
 
-The server defines a tool with a typed output schema. The client registers a renderer that maps that output to a component.
-
 **Server:** define a tool that returns structured data.
 
 ```ts title="app/api/chat/route.ts"

apps/www/app/docs/plan/content.mdx

@@ -106,8 +106,6 @@ export const toolkit: Toolkit = {
 
 </Steps>
 
-These snippets use [assistant-ui](https://assistant-ui.com) for end-to-end wiring, but the Plan component itself is framework-agnostic at the UI layer: you can use it in any React codebase with any LLM SDK or tool-calling interface that can provide compatible props.
-
 ## Key Features
 
 <FeatureGrid>

apps/www/app/docs/preferences-panel/content.mdx

@@ -181,8 +181,7 @@ import { PreferencesPanel } from "@/components/tool-ui/preferences-panel";
       type: "string",
     },
     sections: {
-      description:
-        "Preference sections with controls (max 2 sections, max 5 total items)",
+      description: "Preference sections with controls",
       type: "PreferenceSection[]",
       required: true,
     },
@@ -262,8 +261,7 @@ Use the receipt variant to display confirmed preferences or validation errors.
       type: "string",
     },
     items: {
-      description:
-        "Preference controls in this section. Each section supports 1-3 items.",
+      description: "Preference controls in this section",
       type: "PreferenceItem[]",
       required: true,
     },
@@ -290,7 +288,7 @@ Use the receipt variant to display confirmed preferences or validation errors.
     },
     type: {
       description:
-        "Control type: switch (binary), toggle (2-4 options), select (5+ options)",
+        "Control type: switch (binary), toggle (2+ options), select (5+ options)",
       type: '"switch" | "toggle" | "select"',
       required: true,
     },
@@ -333,13 +331,10 @@ Use the receipt variant to display confirmed preferences or validation errors.
   }}
 />
 
-## Limits
+## Control Type Guide
 
-- **Sections**: 2 maximum per panel
-- **Items per section**: 3 maximum
-- **Total items**: 5 maximum across all sections
-- **Toggle options**: 2-4 choices (use select for more)
-- **Select options**: 5+ choices (use toggle for fewer)
+- **Toggle options**: minimum 2 choices (use select for 5+)
+- **Select options**: minimum 5 choices (use toggle for fewer)
 
 ## Accessibility
 

apps/www/app/docs/quick-start/content.mdx

@@ -19,9 +19,7 @@ import { Bot } from "lucide-react";
   </AlertDescription>
 </Alert>
 
-Add a Tool UI component to a chat app. By the end you'll have an assistant that renders a rich link preview card instead of raw JSON.
-
-**What you'll build:** A backend tool that fetches link metadata, and a frontend renderer that turns the JSON response into an interactive LinkPreview card, all wired together through [assistant-ui](https://www.assistant-ui.com/).
+Add a Tool UI component to a chat app powered by [assistant-ui](https://www.assistant-ui.com/).
 
 ## Install
 
@@ -69,8 +67,6 @@ This copies the source files into your project. The code is yours - change it ho
 
 ## Wire it up
 
-Two pieces connect the component to the conversation: a **backend tool** that returns structured data when the model calls it, and a **frontend renderer** that turns that data into the LinkPreview component.
-
 <Steps>
 
 <Step title="Define a backend tool">
@@ -204,16 +200,6 @@ Components like [Option List](/docs/option-list) and [Approval Card](/docs/appro
 
 For the full implementation pattern, including how to forward frontend tools through your API route and enable auto-continue after user decisions, see the [Advanced](/docs/advanced) page.
 
-## Other frameworks
-
-Tool UI components work with any React app. Without assistant-ui, you manually parse tool outputs and render components. Use assistant-ui for the best experience.
-
-Tool UI components are installed from registry entries, and each entry includes `components/tool-ui/shared` automatically.
-
-## Runtime options
-
-[assistant-ui](https://www.assistant-ui.com/) supports multiple runtimes: [AI SDK](https://ai-sdk.dev/), [LangGraph](https://langchain-ai.github.io/langgraphjs/), LangServe, [Mastra](https://mastra.dev/), or custom backends. The examples above use AI SDK v6.
-
 ## Next steps
 
 - [**Gallery**](/docs/gallery): Browse all available components