@thewhatmatters/wmds 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -7,6 +7,25 @@ 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.

package/CONSUMING.md

@@ -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. On the marketing homepage: **Pattern — marketing composer**, which hands off to the app's ask page (`/ask?q=…`). 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"`) |

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 };

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

@@ -0,0 +1,48 @@
+export declare const chatDockPlacements: readonly ["fixed", "inline"];
+/**
+ * `fixed` — page chrome, pinned to the bottom of the viewport on the page grid.
+ * `inline` — specimen in normal flow (Storybook docs, previews).
+ */
+export type ChatDockPlacement = (typeof chatDockPlacements)[number];
+/**
+ * Pinned root. The wrapper ignores pointer events so the page under its edges stays
+ * clickable; only the dock takes input. Sits under **SiteNav** (`z-50`).
+ */
+export declare const chatDockRootClasses: Record<ChatDockPlacement, string>;
+/** The dock's column — the page grid narrowed to the composer width. */
+export declare const chatDockGridClasses = "grid-page [--grid-max:40rem]";
+/** Hover group: the composer plus the suggestion pills above it. */
+export declare const chatDockDockClasses = "group pointer-events-auto relative col-span-full";
+/**
+ * Suggestion pills above the resting composer. Hidden until the dock is hovered; Tailwind's
+ * `hover` variants only apply on hover-capable pointers, so touch never shows them (the open
+ * window lists the same suggestions). Bottom padding, not margin, keeps the gap inside the hover
+ * area so the pointer can travel from the bar to a pill.
+ */
+export declare const chatDockPillsClasses: string;
+/**
+ * One pill. Each rises in one `--motion-stagger` after the one before it (index from
+ * `--chat-dock-pill-index`); all leave together.
+ */
+export declare const chatDockPillClasses: string;
+/**
+ * Chat window — the Card layout shell on the elevated surface. Phones get the whole viewport
+ * (above **SiteNav**); from `md` it sits where the composer was, at a fixed height so arriving
+ * messages scroll inside instead of growing the window.
+ */
+export declare const chatDockWindowClasses: Record<ChatDockPlacement, string>;
+/** Scrolling conversation — greeting, turns, and the thinking row. */
+export declare const chatDockThreadClasses: string;
+/** Assistant text — the greeting and replies. */
+export declare const chatDockAssistantMessageClasses: string;
+/** Visitor turn — right-aligned on the muted fill, at the card body radius. */
+export declare const chatDockUserMessageClasses: string;
+export declare const chatDockThinkingClasses: string;
+/** Suggestion rows in the window — above the composer, under a hairline. */
+export declare const chatDockSuggestionListClasses: string;
+/** Icon + label inside a **Button** `layout="row"` suggestion. */
+export declare const chatDockSuggestionRowContentClasses: string;
+export declare const chatDockSuggestionLabelClasses = "min-w-0 truncate";
+export declare const chatDockComposerClasses: string;
+export declare const chatDockDisclaimerClasses: string;
+//# sourceMappingURL=chatDockStyles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chatDockStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/ChatDock/chatDockStyles.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,kBAAkB,8BAA+B,CAAC;AAE/D;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpE;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAGjE,CAAC;AAEF,wEAAwE;AACxE,eAAO,MAAM,mBAAmB,iCAAiC,CAAC;AAElE,oEAAoE;AACpE,eAAO,MAAM,mBAAmB,qDAAqD,CAAC;AAEtF;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,QAIhC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,QAO/B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAkBnE,CAAC;AAEF,sEAAsE;AACtE,eAAO,MAAM,qBAAqB,QAGjC,CAAC;AAEF,iDAAiD;AACjD,eAAO,MAAM,+BAA+B,QAAyC,CAAC;AAEtF,+EAA+E;AAC/E,eAAO,MAAM,0BAA0B,QAGtC,CAAC;AAEF,eAAO,MAAM,uBAAuB,QAGnC,CAAC;AAEF,4EAA4E;AAC5E,eAAO,MAAM,6BAA6B,QAGzC,CAAC;AAEF,kEAAkE;AAClE,eAAO,MAAM,mCAAmC,QAG/C,CAAC;AAEF,eAAO,MAAM,8BAA8B,qBAAqB,CAAC;AAEjE,eAAO,MAAM,uBAAuB,QAAiD,CAAC;AAEtF,eAAO,MAAM,yBAAyB,QAIrC,CAAC"}