@thewhatmatters/wmds 0.2.0 → 0.4.0

package/CHANGELOG.md

@@ -7,6 +7,35 @@ Every release of `@thewhatmatters/wmds` is listed here, newest first.
 - **Pasted patterns:** when a release changes a **Pattern — …** story's Show code, it is named under Consumer actions so apps re-copy it.
 - **How to add an entry** (contributors): add your change to the top entry. If that version is already on npm (`npm view @thewhatmatters/wmds versions`), start a new entry above it and bump `version` in `package.json` to match. `npm run check:changelog` enforces the format.
 
+## 0.4.0
+
+**ChatDock** is the site assistant: a pinned composer that shows suggested questions on hover and opens into a chat window, instead of a separate ask page. **PromptBar** gains `start` and `end` slots. **Components/PromptBar → Pattern — marketing composer** is removed. See **ADR-0039**.
+
+### Consumer actions
+
+1. **Replace the marketing composer and the ask page with ChatDock** (the WhatMatters site). Paste **Components/ChatDock → Pattern — chat dock** (`node_modules/@thewhatmatters/wmds/docs/patterns/components-chatdock--pattern-chat-dock.tsx`), pass your assistant request as `ask` and open **IntakeModal** from `onStartProject`, and mount it once in the marketing layout. Then delete the pasted **Pattern — marketing composer** (`npx wmds-check` reports it as `pattern-removed`), the ask page component (`components/ask-what-matters.tsx`), and its `/ask` route. Redirect `/ask` to the homepage if it has inbound links.
+2. **Reply content is yours to render.** `messages[].content` takes text or Markdown your app has already rendered; WMDS does not parse Markdown.
+3. **No other changes.** **PromptBar**'s new `start` and `end` props are optional; existing bars render as before.
+
+### Added
+
+- **ChatDock** (`ChatDock`, `chatDockDefaultLabels`, `chatDockPlacements`, and the `ChatDock*` types).
+- **PromptBar** `start` (brand mark) and `end` (extra inset controls before send).
+
+### Removed
+
+- **Components/PromptBar → Pattern — marketing composer**.
+
+## 0.3.0
+
+Storybook no longer mirrors product sites. The **Sites/** section (WhatMatters and PitchKit pages) is removed, and so are its `sites-…` files in `docs/patterns/`. No component, prop, token, or export changed.
+
+### Consumer actions
+
+1. **Pasted Sites patterns are now the app's own code.** If the app pasted any **Sites/WhatMatters/…** or **Sites/PitchKit/…** pattern (for example the ask page, the Start a project intake, or RFP submitted), keep the file and delete its three header lines (`// @thewhatmatters/wmds@…`, `// Storybook: Sites/…`, `// Show code — …`). Until then, `npx wmds-check` reports `pattern-removed` for that file.
+2. **Skip the 0.2.0 steps that re-copy Sites patterns** if they are still open: the **Sites/** bullets under 0.2.0 step 9, and the re-copy in steps 11, 12, and 13. Make those changes in the app's own files instead: the Button props from step 11, starting the ask page from `q` (step 12), and the RFP `onSubmit` (step 13).
+3. **Components/PromptBar → Pattern — marketing composer:** its Show code comment no longer names a site component; the code is unchanged. Re-copy it, or update the version in its header line.
+
 ## 0.2.0
 
 First release on npm. Earlier builds were installed from git commits and all reported `0.1.0`.

package/CONSUMING.md

@@ -25,7 +25,7 @@ import "@thewhatmatters/wmds/styles.css";
 </span>
 ```
 
-Find a component A–Z under **Components/** (or by category on **Components → Overview**), read **Guides/** for cross-component choices, and use **Sites/** for approved pages and flows (**Sites/WhatMatters/…**, **Sites/PitchKit/…**) — copy the named **Pattern** story JSX and state wiring; do not re-style with utilities. Sites and Guides pages are not exported from the package.
+Find a component A–Z under **Components/** (or by category on **Components → Overview**), read **Guides/** for cross-component choices — copy the named **Pattern** story JSX and state wiring; do not re-style with utilities. Guides pages are not exported from the package. Product pages and flows are each app's own code; WMDS Storybook does not mirror them.
 
 **Show code is the product contract.** Pattern story **Show code** (`storyCopySource`) is the drop-in implementation for consuming apps. It must stay a literal mirror of the live canvas — same layout, chrome, spacing, and typography. Copy Show code; do not choose between the Storybook iframe and an older freeze, and do not reconstruct the page from Storybook-only example modules (`*Example.tsx`, `*Styles.ts`). When the canvas changes, Show code is updated to match; apps re-copy the new freeze.
 
@@ -264,7 +264,8 @@ import {
 | `Chip` | `size`, `value`, `selected`, `onRemove`, `icon`, `count`, `readOnly` | Components/Chip — use `ChipFilterGroup` for multi-select filters |
 | `Input` | `label`, `description`, `status`, `message`, `loading`, `endBadge`, `icon`, `size` | Components/Input — pill shell; Required via `endBadge={<Badge>…</Badge>}` |
 | `Search` | `size`, `placeholder`, `onSubmit` | Components/Search — inline input + button row |
-| `PromptBar` | `value`, `onValueChange`, `onSend`, `placeholder` (default Ask anything…) | Components/PromptBar — **Pattern — prompt bar**. Wide pill, inline field (one line empty, up to 3 lines, then scroll), inset **IconButton** send. Muted until there is text, then `--color-brand` (`#011272`). Enter sends. Page pattern: **Sites/WhatMatters/Prompt chat → Pattern — landing to chat** (motion into a thread that keeps growing on a narrowed page grid, `--grid-max: 40rem`: the page shell is `h-[100svh]` and the thread scrolls inside that column when it is taller than the viewport, and reserves the composer's measured height plus the space under the pill, including while a reply is still growing, so the reply and its follow-ups finish above the composer, follow-ups and **PromptBar** share that column and the bar stays pinned; a follow-up appends in the same thread; a collapsed Thought-for timer (expandable while thinking) as a fleeting supporting muted status that leaves when the reply starts, then a word stream with one **TextLink** and hover-revealed **IconButton** actions; chat reuses **SiteNav**; the brand mark returns home). Voice and attachments are not part of this version. |
+| `PromptBar` | `value`, `onValueChange`, `onSend`, `placeholder` (default Ask anything…), `start`, `end` | Components/PromptBar — **Pattern — prompt bar**. Wide pill, inline field (one line empty, up to 3 lines, then scroll), inset **IconButton** send. Muted until there is text, then `--color-brand` (`#011272`). Enter sends. `start` takes the brand mark; `end` takes extra inset controls. Voice and attachments are not part of this version. |
+| `ChatDock` | `title`, `subtitle`, `mark`, `greeting`, `messages`, `thinking`, `suggestions`, `onSend`, `onSuggestionSelect`, `disclaimer` | Components/ChatDock — **Pattern — chat dock**. The site assistant: a pinned **PromptBar** with suggested-question pills on hover that opens into a non-modal chat window (full screen on phones). The app owns the conversation and the request. Replaces the separate ask page. |
 | `Card` | `variant`, `shape`, `padding` | Components/Card/Card — `Card.Header` (`start` | `end`), **`Card.Body` slot** (no default fill), `Card.Footer` |
 | `Accordion` | `variant`, `Accordion.Item` `leading` / `label` / `trailing` / `open` | Components/Accordion — FAQ, settings sections |
 | `TaskRows` | `variant`, `status`, `meta`, `detailsLayout`, `TaskRows.Detail` | Components/TaskRows — **Pattern — status rows**, **capsules**, **action details** (`Detail variant="button"`), **tag chips** (`Chip readOnly size="sm"`), detail lines (`Detail` + `onPress` → `Button layout="row"`) |
@@ -276,9 +277,9 @@ import {
 | `HeroTileStack` | `tiles`, `tileSize`, `strength`, `velocityFactor`, `maxVertical`, `spring` | Components/HeroTileStack — **Pattern — marketing hero**. Square tiles, `--hero-tile-size`, max `tileSize` (400px), tighter pile below `md`. Scatter distances scale with the painted tile. Place **SiteNav** above the hero; the hero section is `min-h-[calc(100svh-var(--site-nav-height))]`, `shrink-0`, and `justify-center-safe`. It centers when the copy fits. When the copy is taller, the section grows and the content starts below the nav with the section's top padding. **HeroIntro** is the `h1` (`lead` + children) on centered `type-display-2` at normal weight and display-2 leading, the same size and line-height as the gallery statement. The first sentence wraps, including from `md`; the rest always starts on the next line. The sequenced hero h1 is only “An Austin, TX studio specializing in brand and product design.” (“Austin,” and “TX” stay together). A rock **RiveHand** sits `inline` immediately after “TX”, inside that nowrap phrase (drawn hand about 1.15em, centered, `aria-hidden`). That heading has no second sentence and no circle or pill. The gallery statement places the point hand after “is a first impression”. It sits on `grid-page` (same `--grid-max`, margin, gap, and column count as the guides): columns 4–9 from `lg` (`lg:col-start-4 lg:col-end-10`, 6 of 12 columns, centered), full width of that page grid below `lg`. The tile fan is the last element. Pointer over the fan springs tiles left and right away from it; a quick move adds a small vertical nudge that settles when the pointer slows; leave springs them back. Default `strength` (`120`) stays near the stack — raise it for a wider scatter. `velocityFactor` (`0.02`) and `maxVertical` (`24`) tune that nudge. Reduced motion stays on the resting fan. Coarse pointers get one gentle tap scatter, then a spring back. |
 | `ScrollHorizontal` | `items` (`id`, `label`, optional `color`), `heading` (`sr-only` while pinned, visible when motion is reduced; omitted when `intro` is set), `intro` (`ScrollHorizontal.Intro`: `eyebrow`, `statement`, optional `action` — `{ label, onClick }` for a modal button or `{ label, href }` for Button `render={<a href />}`), `expandLast` (default false), `expanded`, `className` (layout only, root) | Components/ScrollHorizontal — **Pattern — project gallery**. Also under the hero in **HeroTileStack** and **FooterReveal** **Pattern — marketing hero** (`expandLast`). Each card is a solid token-color placeholder; `label` is the accessible name (`sr-only`). `heading` names the section and stays `sr-only` on the pinned window. `intro` (**Pattern — gallery intro**, and the marketing-hero-with-gallery-intro stories) is the first panel: **Badge** label pill (neutral, the category pill), `type-display-2` statement through **TextSequence** (normal weight, once when the panel scrolls into view), **Button** `role="secondary"` labeled Start a project (no className, no icon). Pass `action={{ label: "Start a project", onClick }}` to open the project modal, or `href` when the action navigates. **FooterReveal → Pattern — marketing hero ruled grid** is the full page: sequenced hero, this intro, `expandLast`, and **FooterReveal.Ruled**. The statement is “Every screen is a first impression and we make yours the one they remember.” with an asterisk after screen, a point **RiveHand** after impression, and a diamond after yours. The eyebrow names the section. The `h2` keeps the plain sentence. At rest the panel's left edge is the page-grid content start; scroll carries it off with the tiles. Tiles follow to the right. Reduced motion stacks the intro above the row. `expandLast` still parks the last card on center before the grow. `300svh` track (`shrink-0` so a flex parent keeps that height), sticky `h-svh` window, translate from the first card centered to the last. `expandLast` uses a `400svh` track: same horizontal distance, then the last tile grows (`clip-path`) to fill the window edge to edge with radius 0 and scrolls away. `expanded` is the slot on that tile. 400×500 / `gap-8` from `sm`; 280×350 / `gap-4` below `sm`; `rounded-xl`. Reduced motion is a native horizontal scroller (`py-12`), including `MotionConfig` `reducedMotion="always"`; with `expandLast` the last tile follows as a static `h-svh` section. The section ends on that tile. **FooterReveal → Pattern — marketing hero** sets `!py-0` on the guide `grid-page` so the tile meets the footer with no page-background strip. |
 | `RiveHand` | `hand` (`point` \| `rock`), `size`, `active`, `idle` (default true), `entrance` (`slide-up` \| `grow` \| `none`, default `none`), `className`, `aria-hidden` | Components/HeroTileStack — **Pattern — marketing hero**. `point` is artboard `31_Cigarette` (cigarette removed). `rock` is `29_Rock`. `handFill` is `--color-surface` (fallback `--color-background-surface`; white in light mode). `outline` is `--color-brand` (`#011272` in both themes; hardcoded fallback `#011272`). `inline` sizes the canvas past the artboard padding so the drawn hand is about 1.15em, the drawn hand is centered on the line, and the line box does not grow. Inside a TextSequence the slot pops on the beat halfway between the words beside it, with the same scale, rotation, and `back.out(1.8)` ease as the circle and pill. Idle starts after that pop. The sequenced hero places the rock hand immediately after “TX”, inside the same nowrap phrase. The gallery statement places the point hand after “is a first impression”. `entrance="none"`. `idle` holds `Boolean 1` for 1.1s, then waits a random 1–2s before the next pulse, per hand, while the tab is visible and the sized hand box is in view. Reduced motion draws one static frame once that box has size, then pauses. The sequence pop and idle timers stay off. SSR and hydration render that resting pose; the entrance starts after mount only when motion is allowed. `npm install @rive-app/react-canvas`. Serve `public/rive/interactive-icon-set.riv` at `/rive/interactive-icon-set.riv` and `rive.wasm` at `/rive/rive.wasm`. The pattern file starts with `"use client"`. CC BY 4.0, Silvia Sguotti and Gabriele Montinaro. |
-| `ConfettiProvider` | `useConfettiOnMount()`, `useConfetti().fire()`, `origin`, `confettiDefaultColors` | Components/Confetti — playground. **Sites/WhatMatters/RFP submitted → Pattern — RFP submitted**. Fire on the confirmation surface after the async action resolves, not on the submit click. `fire()` does nothing under reduced motion. |
+| `ConfettiProvider` | `useConfettiOnMount()`, `useConfetti().fire()`, `origin`, `confettiDefaultColors` | Components/Confetti — playground. **IntakeConfirmation** is the reference composition. Fire on the confirmation surface after the async action resolves, not on the submit click. `fire()` does nothing under reduced motion. |
 
-Copy flow patterns from **Sites/** in Storybook when they ship. See **`src/package.manifest.ts`** for the export contract.
+See **`src/package.manifest.ts`** for the export contract.
 
 ### Cluster scale in detail rails
 

package/README.md

@@ -1,6 +1,6 @@
 # WMDS — WhatMatters Design System
 
-Tailwind v4 theme + **pattern-first** Storybook catalog. **Storybook is canonical** — prescribed components and Sites patterns, not utility-class soup.
+Tailwind v4 theme + **pattern-first** Storybook catalog. **Storybook is canonical** — prescribed components and their patterns, not utility-class soup.
 
 ## Stack
 
@@ -52,11 +52,11 @@ npm run validate:composition  # molecules/organisms must compose atoms (CI)
 
 The list is `src/package.manifest.ts`. `npm run build` fails when it and `src/index.ts` disagree.
 
-**Storybook-only:** **Sites/** (pages and flows per product — WhatMatters, PitchKit) and **Guides/** (cross-component guidance) — page-level compositions for copy-paste; not package exports.
+**Storybook-only:** **Guides/** (cross-component guidance) — page-level compositions for copy-paste; not package exports. Product pages live in each product's app.
 
 **Motion:** CSS tokens for simple transitions; [`motion/react`](https://motion.dev/docs/react) for gestures, layout, and enter/exit. Helpers in **`src/lib/motion.ts`** (reads Theme CSS vars).
 
-**Architecture:** Theme → lib → Atoms → Molecules → Organisms → Sites / Guides. **Pattern-first** for consumers ([ADR-0004](docs/adr/0004-pattern-first-not-utility-first.md)). **Mobile-first** on all tiers ([ADR-0003](docs/adr/0003-responsive-mobile-first.md)). See ADR-0001, ADR-0002.
+**Architecture:** Theme → lib → Atoms → Molecules → Organisms → Guides. **Pattern-first** for consumers ([ADR-0004](docs/adr/0004-pattern-first-not-utility-first.md)). **Mobile-first** on all tiers ([ADR-0003](docs/adr/0003-responsive-mobile-first.md)). See ADR-0001, ADR-0002.
 
 ## Paper
 

package/dist/components/molecules/PromptBar/PromptBar.d.ts

@@ -1,4 +1,4 @@
-import { type TextareaHTMLAttributes } from "react";
+import { type ReactNode, type TextareaHTMLAttributes } from "react";
 /** Layout-only — width, margin, flex placement. Not for colors. */
 export type PromptBarLayoutClassName = string;
 export declare const promptBarPlaceholder = "Ask anything\u2026";
@@ -21,6 +21,16 @@ export interface PromptBarProps extends Omit<TextareaHTMLAttributes<HTMLTextArea
     /** Accessible name for the send control. Default: "Send". */
     sendLabel?: string;
     disabled?: boolean;
+    /**
+     * Leading slot inside the pill — a brand mark or **Avatar** `sm` (2.25rem). Decorative or
+     * labeled by the caller; not a control.
+     */
+    start?: ReactNode;
+    /**
+     * Extra inset controls before send — for example a mic **IconButton** `sm` `role="secondary"`.
+     * The caller owns the handler and accessible name.
+     */
+    end?: ReactNode;
     className?: PromptBarLayoutClassName;
 }
 /**

package/dist/components/molecules/PromptBar/PromptBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PromptBar.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/PromptBar/PromptBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,sBAAsB,EAC5B,MAAM,OAAO,CAAC;AAaf,mEAAmE;AACnE,MAAM,MAAM,wBAAwB,GAAG,MAAM,CAAC;AAE9C,eAAO,MAAM,oBAAoB,uBAAkB,CAAC;AAEpD,MAAM,WAAW,cACf,SAAQ,IAAI,CACV,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,UAAU,GAAG,WAAW,GAAG,cAAc,GAAG,UAAU,GAAG,aAAa,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CACnG;IACD,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0BAA0B;IAC1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,wBAAwB,CAAC;CACtC;AAMD;;;;;GAKG;AACH,eAAO,MAAM,SAAS,gHA2EpB,CAAC"}
+{"version":3,"file":"PromptBar.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/PromptBar/PromptBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,sBAAsB,EAC5B,MAAM,OAAO,CAAC;AAgBf,mEAAmE;AACnE,MAAM,MAAM,wBAAwB,GAAG,MAAM,CAAC;AAE9C,eAAO,MAAM,oBAAoB,uBAAkB,CAAC;AAEpD,MAAM,WAAW,cACf,SAAQ,IAAI,CACV,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,UAAU,GAAG,WAAW,GAAG,cAAc,GAAG,UAAU,GAAG,aAAa,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CACnG;IACD,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0BAA0B;IAC1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,SAAS,CAAC,EAAE,wBAAwB,CAAC;CACtC;AAMD;;;;;GAKG;AACH,eAAO,MAAM,SAAS,gHAqFpB,CAAC"}

package/dist/components/molecules/PromptBar/PromptBar.js

@@ -2,55 +2,66 @@
 import { cn as e } from "../../../lib/cn.js";
 import { IconButton as t } from "../../atoms/IconButton/IconButton.js";
 import { TextArea as n } from "../../atoms/TextArea/TextArea.js";
-import { promptBarFieldClasses as r, promptBarSendClasses as i, promptBarSendMutedClasses as a, promptBarSendReadyClasses as o, promptBarShellClasses as s } from "./promptBarStyles.js";
-import { forwardRef as c, useState as l } from "react";
-import { ArrowRight as u } from "lucide-react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { promptBarEndSlotClasses as r, promptBarFieldClasses as i, promptBarSendClasses as a, promptBarSendMutedClasses as o, promptBarSendReadyClasses as s, promptBarShellClasses as c, promptBarShellStartPadClasses as l, promptBarStartSlotClasses as u } from "./promptBarStyles.js";
+import { forwardRef as d, useState as f } from "react";
+import { ArrowRight as p } from "lucide-react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/components/molecules/PromptBar/PromptBar.tsx
-var p = "Ask anything…";
-function m(e) {
+var g = "Ask anything…";
+function _(e) {
 	return e.trim().length > 0;
 }
-var h = c(function({ value: c, defaultValue: h = "", onValueChange: g, onSend: _, placeholder: v = p, "aria-label": y = "Ask anything", sendLabel: b = "Send", disabled: x = !1, className: S, onKeyDown: C, ...w }, T) {
-	let E = c !== void 0, [D, O] = l(h), k = E ? c : D, A = !x && m(k);
-	function j(e) {
-		E || O(e), g?.(e);
+var v = d(function({ value: d, defaultValue: v = "", onValueChange: y, onSend: b, placeholder: x = g, "aria-label": S = "Ask anything", sendLabel: C = "Send", disabled: w = !1, start: T, end: E, className: D, onKeyDown: O, ...k }, A) {
+	let j = d !== void 0, [M, N] = f(v), P = j ? d : M, F = !w && _(P);
+	function I(e) {
+		j || N(e), y?.(e);
 	}
-	function M() {
-		A && (_?.(k), E || O(""));
+	function L() {
+		F && (b?.(P), j || N(""));
 	}
-	function N(e) {
-		C?.(e), !e.defaultPrevented && (e.key !== "Enter" || e.shiftKey || e.nativeEvent.isComposing || (e.preventDefault(), M()));
+	function R(e) {
+		O?.(e), !e.defaultPrevented && (e.key !== "Enter" || e.shiftKey || e.nativeEvent.isComposing || (e.preventDefault(), L()));
 	}
-	return /* @__PURE__ */ f("div", {
-		className: e(s, S),
-		children: [/* @__PURE__ */ d(n, {
-			...w,
-			ref: T,
-			inline: !0,
-			rows: 1,
-			resize: "none",
-			value: k,
-			placeholder: v,
-			"aria-label": y,
-			disabled: x,
-			className: r,
-			onChange: (e) => {
-				j(e.target.value);
-			},
-			onKeyDown: N
-		}), /* @__PURE__ */ d(t, {
-			type: "button",
-			role: "primary",
-			size: "sm",
-			icon: /* @__PURE__ */ d(u, { strokeWidth: 2 }),
-			"aria-label": b,
-			title: b,
-			disabled: !A,
-			className: e(i, A ? o : a),
-			onClick: M
-		})]
+	return /* @__PURE__ */ h("div", {
+		className: e(c, T == null ? l.field : l.slot, D),
+		children: [
+			T == null ? null : /* @__PURE__ */ m("div", {
+				className: u,
+				children: T
+			}),
+			/* @__PURE__ */ m(n, {
+				...k,
+				ref: A,
+				inline: !0,
+				rows: 1,
+				resize: "none",
+				value: P,
+				placeholder: x,
+				"aria-label": S,
+				disabled: w,
+				className: i,
+				onChange: (e) => {
+					I(e.target.value);
+				},
+				onKeyDown: R
+			}),
+			E == null ? null : /* @__PURE__ */ m("div", {
+				className: r,
+				children: E
+			}),
+			/* @__PURE__ */ m(t, {
+				type: "button",
+				role: "primary",
+				size: "sm",
+				icon: /* @__PURE__ */ m(p, { strokeWidth: 2 }),
+				"aria-label": C,
+				title: C,
+				disabled: !F,
+				className: e(a, F ? s : o),
+				onClick: L
+			})
+		]
 	});
 });
 //#endregion
-export { h as PromptBar, p as promptBarPlaceholder };
+export { v as PromptBar, g as promptBarPlaceholder };

package/dist/components/molecules/PromptBar/promptBarStyles.d.ts

@@ -5,6 +5,21 @@
  * The shell owns the single focus ring (inset, so it does not stack a second edge).
  */
 export declare const promptBarShellClasses: string;
+/**
+ * Leading inset. The text starts 1.25rem in; with a `start` slot the slot takes the same
+ * 0.5rem inset as the send circle, and the field keeps 0.25rem more air than the shell gap.
+ */
+export declare const promptBarShellStartPadClasses: {
+    readonly field: "pl-5";
+    readonly slot: "pl-2";
+};
+/**
+ * Leading slot — a brand mark or avatar at the send circle's size (2.25rem), pinned to the
+ * last line like the send control.
+ */
+export declare const promptBarStartSlotClasses = "mr-1 flex size-9 shrink-0 items-center justify-center";
+/** Trailing slot — extra inset controls (for example a mic **IconButton** `sm`) before send. */
+export declare const promptBarEndSlotClasses = "flex shrink-0 items-end gap-2";
 /**
  * Empty is one line — min height matches the send circle, with padding that centers that line.
  * Grows with the text, stops at three lines (`max-h`), then scrolls.

package/dist/components/molecules/PromptBar/promptBarStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"promptBarStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/PromptBar/promptBarStyles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,QAGN,CAAC;AAE7B;;;GAGG;AACH,eAAO,MAAM,qBAAqB,QAEf,CAAC;AAEpB;;GAEG;AACH,eAAO,MAAM,oBAAoB,kFACgD,CAAC;AAElF,0DAA0D;AAC1D,eAAO,MAAM,yBAAyB,8DAA8D,CAAC;AAErG;;;GAGG;AACH,eAAO,MAAM,yBAAyB,qDAAqD,CAAC"}
+{"version":3,"file":"promptBarStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/PromptBar/promptBarStyles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,QAGN,CAAC;AAE7B;;;GAGG;AACH,eAAO,MAAM,6BAA6B;;;CAGhC,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,yBAAyB,0DAA0D,CAAC;AAEjG,gGAAgG;AAChG,eAAO,MAAM,uBAAuB,kCAAkC,CAAC;AAEvE;;;GAGG;AACH,eAAO,MAAM,qBAAqB,QAEf,CAAC;AAEpB;;GAEG;AACH,eAAO,MAAM,oBAAoB,kFACgD,CAAC;AAElF,0DAA0D;AAC1D,eAAO,MAAM,yBAAyB,8DAA8D,CAAC;AAErG;;;GAGG;AACH,eAAO,MAAM,yBAAyB,qDAAqD,CAAC"}

package/dist/components/molecules/PromptBar/promptBarStyles.js

@@ -1,6 +1,9 @@
 "use client";
 import { focusRingTransitionClasses as e } from "../../../lib/motion.js";
 //#region src/components/molecules/PromptBar/promptBarStyles.ts
-var t = "flex w-full items-end gap-2 rounded-[1.625rem] border border-border-control bg-surface p-2 pl-5 focus-within:outline-none focus-within:ring-2 focus-within:ring-inset focus-within:ring-focus-ring " + e, n = "min-h-9 min-w-0 flex-1 overflow-y-auto py-2 type-body [field-sizing:content] max-h-[4.75rem]", r = "focus-visible:!ring-0 focus-visible:!ring-offset-0 focus-visible:!shadow-none", i = "!bg-brand !text-on-brand hover:!bg-brand active:!bg-brand", a = "!bg-neutral !text-disabled disabled:!opacity-100";
+var t = "flex w-full items-end gap-2 rounded-[1.625rem] border border-border-control bg-surface p-2 focus-within:outline-none focus-within:ring-2 focus-within:ring-inset focus-within:ring-focus-ring " + e, n = {
+	field: "pl-5",
+	slot: "pl-2"
+}, r = "mr-1 flex size-9 shrink-0 items-center justify-center", i = "flex shrink-0 items-end gap-2", a = "min-h-9 min-w-0 flex-1 overflow-y-auto py-2 type-body [field-sizing:content] max-h-[4.75rem]", o = "focus-visible:!ring-0 focus-visible:!ring-offset-0 focus-visible:!shadow-none", s = "!bg-brand !text-on-brand hover:!bg-brand active:!bg-brand", c = "!bg-neutral !text-disabled disabled:!opacity-100";
 //#endregion
-export { n as promptBarFieldClasses, r as promptBarSendClasses, a as promptBarSendMutedClasses, i as promptBarSendReadyClasses, t as promptBarShellClasses };
+export { i as promptBarEndSlotClasses, a as promptBarFieldClasses, o as promptBarSendClasses, c as promptBarSendMutedClasses, s as promptBarSendReadyClasses, t as promptBarShellClasses, n as promptBarShellStartPadClasses, r as promptBarStartSlotClasses };

package/dist/components/organisms/ChatDock/ChatDock.d.ts

@@ -0,0 +1,93 @@
+import { type ReactElement, type ReactNode } from "react";
+import { type ChatDockPlacement } from "./chatDockStyles";
+export { chatDockPlacements, type ChatDockPlacement } from "./chatDockStyles";
+/** Layout-only — margin and placement. Not for colors or type. */
+export type ChatDockLayoutClassName = string;
+export interface ChatDockSuggestion {
+    id: string;
+    label: string;
+    /** Leading Lucide icon element, for example `<DollarSign />`. */
+    icon?: ReactElement;
+    /**
+     * Sent as the visitor's message when chosen. Suggestions with a prompt also show as pills
+     * above the resting composer. Omit it for an action such as **Get started** — then only
+     * `onSuggestionSelect` runs.
+     */
+    prompt?: string;
+}
+export interface ChatDockMessage {
+    id: string;
+    role: "user" | "assistant";
+    /** Text, or Markdown the app has already rendered. ChatDock does not parse Markdown. */
+    content: ReactNode;
+}
+export interface ChatDockLabels {
+    /** Close control. Default: "Close chat". */
+    close: string;
+    /** Shown while `thinking`. Default: "Thinking…". */
+    thinking: string;
+    /** Accessible name for the message list. Default: "Conversation". */
+    conversation: string;
+    /** Accessible name for the suggestion groups. Default: "Suggested questions". */
+    suggestions: string;
+    /** Accessible name for the field. Default: "Ask anything". */
+    field: string;
+    /** Send control. Default: "Send". */
+    send: string;
+}
+export declare const chatDockDefaultLabels: ChatDockLabels;
+export interface ChatDockProps {
+    /** Window title — usually the product or brand name. */
+    title: string;
+    /** Line under the title. */
+    subtitle?: string;
+    /**
+     * Brand mark — **Avatar** `size="md"` (2.25rem). Shown at the start of the composer and in
+     * the window header.
+     */
+    mark?: ReactNode;
+    /** First assistant message, always at the top of the window. */
+    greeting?: ReactNode;
+    /** The conversation, oldest first. The app owns it and appends replies as they stream. */
+    messages?: ChatDockMessage[];
+    /** Shows the thinking row after the last message while a reply is on its way. */
+    thinking?: boolean;
+    /** Pills above the resting composer (those with a `prompt`) and rows in the window. */
+    suggestions?: ChatDockSuggestion[];
+    /** Receives the visitor's message — typed, or a suggestion's `prompt`. */
+    onSend: (prompt: string) => void;
+    /** Every suggestion choice, including actions without a `prompt`. */
+    onSuggestionSelect?: (suggestion: ChatDockSuggestion) => void;
+    /** Controlled open state. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Field placeholder. Default: "Ask anything…". */
+    placeholder?: string;
+    /** One line under the window's composer — for example what the assistant can't do. */
+    disclaimer?: ReactNode;
+    labels?: Partial<ChatDockLabels>;
+    /** `fixed` (default) pins the dock to the viewport; `inline` keeps it in flow for specimens. */
+    placement?: ChatDockPlacement;
+    className?: ChatDockLayoutClassName;
+}
+/** Pills above the resting composer: suggestions that send a prompt. */
+export declare function chatDockPillSuggestions(suggestions: readonly ChatDockSuggestion[]): ChatDockSuggestion[];
+/** Suggestion rows show until the conversation starts. */
+export declare function chatDockShowsSuggestionRows(suggestions: readonly ChatDockSuggestion[], messages: readonly ChatDockMessage[]): boolean;
+/**
+ * Window reveal. Closed, the clip is the resting composer's strip at the bottom of the window
+ * (full width, 3.25rem tall, pill radius); open, it is the whole card at the shell radius. Both
+ * strings share one shape so Motion can interpolate them. The clip is cleared once open so the
+ * card's shadow is not cut off.
+ */
+export declare const chatDockClosedClip = "inset(calc(100% - 3.25rem) 0rem 0rem 0rem round 1.625rem)";
+export declare const chatDockOpenClip = "inset(calc(0% - 0rem) 0rem 0rem 0rem round 1rem)";
+/**
+ * Pinned prompt that opens into a chat window. At rest it is a **PromptBar** with the brand
+ * mark; hovering shows suggestion pills above it. Focusing or typing opens a non-modal window
+ * in its place — header, conversation, suggestion rows, composer, and an optional disclaimer.
+ * Escape or Close returns to the resting bar. The page behind stays usable.
+ */
+export declare function ChatDock({ title, subtitle, mark, greeting, messages, thinking, suggestions, onSend, onSuggestionSelect, open: openProp, defaultOpen, onOpenChange, placeholder, disclaimer, labels: labelsProp, placement, className, }: ChatDockProps): import("react").JSX.Element;
+//# sourceMappingURL=ChatDock.d.ts.map

package/dist/components/organisms/ChatDock/ChatDock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatDock.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/ChatDock/ChatDock.tsx"],"names":[],"mappings":"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"}

package/dist/components/organisms/ChatDock/ChatDock.js

@@ -0,0 +1,255 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { motionBeatSeconds as t, motionTransitionProp as n, readMotionDurationSeconds as ee } from "../../../lib/motion.js";
+import { ButtonIcon as r } from "../../atoms/Button/ButtonIcon.js";
+import { Button as i } from "../../atoms/Button/Button.js";
+import { Status as te } from "../../atoms/Status/Status.js";
+import { PromptBar as a } from "../../molecules/PromptBar/PromptBar.js";
+import { OverlayPanelHeader as ne } from "../Dialog/OverlayPanelHeader.js";
+import { chatDockAssistantMessageClasses as o, chatDockComposerClasses as re, chatDockDisclaimerClasses as ie, chatDockDockClasses as ae, chatDockGridClasses as oe, chatDockPillClasses as se, chatDockPillsClasses as ce, chatDockPlacements as s, chatDockRootClasses as le, chatDockSuggestionLabelClasses as ue, chatDockSuggestionListClasses as de, chatDockSuggestionRowContentClasses as fe, chatDockThinkingClasses as pe, chatDockThreadClasses as me, chatDockUserMessageClasses as he, chatDockWindowClasses as ge } from "./chatDockStyles.js";
+import { useEffect as _e, useId as c, useLayoutEffect as ve, useRef as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { AnimatePresence as p, motion as m, useReducedMotion as ye } from "motion/react";
+//#region src/components/organisms/ChatDock/ChatDock.tsx
+var h = {
+	close: "Close chat",
+	thinking: "Thinking…",
+	conversation: "Conversation",
+	suggestions: "Suggested questions",
+	field: "Ask anything",
+	send: "Send"
+};
+function g(e) {
+	return e.filter((e) => e.prompt != null && e.prompt.trim() !== "");
+}
+function _(e, t) {
+	return e.length > 0 && t.length === 0;
+}
+var v = 48, y = "inset(calc(100% - 3.25rem) 0rem 0rem 0rem round 1.625rem)", b = "inset(calc(0% - 0rem) 0rem 0rem 0rem round 1rem)";
+function x({ title: s, subtitle: x, mark: S, greeting: C, messages: w = [], thinking: be = !1, suggestions: T = [], onSend: xe, onSuggestionSelect: Se, open: E, defaultOpen: D = !1, onOpenChange: Ce, placeholder: O, disclaimer: k, labels: A, placement: j = "fixed", className: we }) {
+	let M = {
+		...h,
+		...A
+	}, N = c(), P = c(), F = ye(), I = E !== void 0, [Te, Ee] = u(D), L = I ? E : Te, [R, z] = u(""), B = l(null), V = l(null), H = l(null), U = l(!0), W = l(!1), G = l(L), K = l(L);
+	function q(e) {
+		e !== L && (I || Ee(e), Ce?.(e));
+	}
+	function J(e) {
+		let t = e.trim();
+		t !== "" && (q(!0), U.current = !0, z(""), xe(t));
+	}
+	function Y(e) {
+		Se?.(e), e.prompt != null && J(e.prompt);
+	}
+	_e(() => {
+		L && !G.current ? V.current?.focus() : !L && G.current && (K.current = !1, W.current = !0, B.current?.focus(), W.current = !1), G.current = L;
+	}, [L]), ve(() => {
+		let e = H.current;
+		e != null && U.current && (e.scrollTop = e.scrollHeight);
+	});
+	function De(e) {
+		e.key !== "Escape" || e.defaultPrevented || (e.preventDefault(), q(!1));
+	}
+	let X = g(T), Oe = _(T, w), ke = n("medium"), Z = n("fast"), Q = F ? {
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: { opacity: 0 }
+	} : {
+		initial: {
+			clipPath: y,
+			opacity: .6
+		},
+		animate: {
+			clipPath: b,
+			opacity: 1,
+			transitionEnd: { clipPath: "none" }
+		},
+		exit: {
+			clipPath: [b, y],
+			opacity: [1, .6]
+		}
+	}, $ = F || K.current ? {} : {
+		initial: {
+			opacity: 0,
+			y: 8
+		},
+		animate: {
+			opacity: 1,
+			y: 0
+		},
+		transition: {
+			...Z,
+			delay: t(1)
+		}
+	}, Ae = F ? 0 : ee("medium") * .6;
+	return /* @__PURE__ */ d("div", {
+		className: e(le[j], we),
+		"data-open": L ? "" : void 0,
+		children: /* @__PURE__ */ d("div", {
+			className: oe,
+			children: /* @__PURE__ */ d("div", {
+				className: "band",
+				children: /* @__PURE__ */ d(p, {
+					initial: !1,
+					mode: "popLayout",
+					children: L ? /* @__PURE__ */ f(m.section, {
+						role: "dialog",
+						"aria-modal": "false",
+						"aria-labelledby": N,
+						"aria-describedby": x == null ? void 0 : P,
+						className: ge[j],
+						initial: Q.initial,
+						animate: Q.animate,
+						exit: Q.exit,
+						transition: ke,
+						onKeyDown: De,
+						children: [
+							/* @__PURE__ */ d(ne, {
+								titleId: N,
+								descriptionId: P,
+								title: s,
+								description: x,
+								headerStart: S,
+								closeLabel: M.close,
+								onClose: () => q(!1),
+								delineated: !0
+							}),
+							/* @__PURE__ */ f("div", {
+								ref: H,
+								className: me,
+								role: "log",
+								"aria-label": M.conversation,
+								onScroll: (e) => {
+									let t = e.currentTarget;
+									U.current = t.scrollHeight - t.scrollTop - t.clientHeight <= v;
+								},
+								children: [C == null ? null : /* @__PURE__ */ d(m.div, {
+									className: o,
+									...$,
+									children: C
+								}), /* @__PURE__ */ f(p, {
+									initial: !1,
+									children: [w.map((e) => /* @__PURE__ */ d(m.div, {
+										"data-role": e.role,
+										className: e.role === "user" ? he : o,
+										initial: !F && {
+											opacity: 0,
+											y: 8
+										},
+										animate: {
+											opacity: 1,
+											y: 0
+										},
+										transition: Z,
+										children: e.content
+									}, e.id)), be ? /* @__PURE__ */ f(m.div, {
+										className: pe,
+										initial: !F && { opacity: 0 },
+										animate: { opacity: 1 },
+										exit: {
+											opacity: 0,
+											transition: { duration: 0 }
+										},
+										transition: Z,
+										children: [/* @__PURE__ */ d(te, {
+											variant: "dot",
+											tone: "neutral",
+											pulsing: !0,
+											besideLabel: !0
+										}), /* @__PURE__ */ d("span", { children: M.thinking })]
+									}, "thinking") : null]
+								})]
+							}),
+							Oe ? /* @__PURE__ */ d(m.div, {
+								className: de,
+								role: "group",
+								"aria-label": M.suggestions,
+								...$,
+								children: T.map((e) => /* @__PURE__ */ d(i, {
+									type: "button",
+									role: "ghost",
+									layout: "row",
+									onClick: () => Y(e),
+									children: /* @__PURE__ */ f("span", {
+										className: fe,
+										children: [e.icon == null ? null : /* @__PURE__ */ d(r, {
+											size: "md",
+											children: e.icon
+										}), /* @__PURE__ */ d("span", {
+											className: ue,
+											children: e.label
+										})]
+									})
+								}, e.id))
+							}) : null,
+							/* @__PURE__ */ d("div", {
+								className: re,
+								children: /* @__PURE__ */ d(a, {
+									ref: V,
+									value: R,
+									onValueChange: z,
+									onSend: J,
+									placeholder: O,
+									"aria-label": M.field,
+									sendLabel: M.send
+								})
+							}),
+							k == null ? null : /* @__PURE__ */ d("p", {
+								className: ie,
+								children: k
+							})
+						]
+					}, "window") : /* @__PURE__ */ f(m.div, {
+						className: ae,
+						initial: { opacity: 0 },
+						animate: {
+							opacity: 1,
+							transition: {
+								...Z,
+								delay: Ae
+							}
+						},
+						exit: {
+							opacity: 0,
+							transition: { duration: 0 }
+						},
+						children: [X.length > 0 ? /* @__PURE__ */ d("div", {
+							className: ce,
+							role: "group",
+							"aria-label": M.suggestions,
+							children: X.map((e, t) => /* @__PURE__ */ d("span", {
+								className: se,
+								style: { "--chat-dock-pill-index": t },
+								children: /* @__PURE__ */ d(i, {
+									type: "button",
+									role: "secondary",
+									size: "md",
+									icon: e.icon,
+									onClick: () => Y(e),
+									children: e.label
+								})
+							}, e.id))
+						}) : null, /* @__PURE__ */ d(a, {
+							ref: B,
+							value: R,
+							onValueChange: (e) => {
+								z(e), q(!0);
+							},
+							onSend: J,
+							onFocus: () => {
+								W.current || q(!0);
+							},
+							onClick: () => q(!0),
+							start: S,
+							placeholder: O,
+							"aria-label": M.field,
+							sendLabel: M.send
+						})]
+					}, "rest")
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { x as ChatDock, y as chatDockClosedClip, h as chatDockDefaultLabels, b as chatDockOpenClip, g as chatDockPillSuggestions, s as chatDockPlacements, _ as chatDockShowsSuggestionRows };