rift-ds 1.7.0 → 1.9.0

package/chat/ChatAgentPane.css

@@ -0,0 +1,56 @@
+/* The built-in agent pane. The rail owns its shell; this only says how it
+   sits in the widget's bottom sheet, where it fills the width rather than
+   holding its own column and the sheet's rounded top edge is the surface. */
+.ds-chat-agent-pane--sheet {
+  width: 100%;
+}
+
+/* The pane furniture a host's panes commonly carry: a date heading over a
+   run of rows, and a small card. Host content, offered as classes rather
+   than components so a pane stays whatever the host writes. */
+.ds-chat-agent-pane__group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-100);
+}
+
+.ds-chat-agent-pane__group + .ds-chat-agent-pane__group,
+.ds-chat-agent-pane__card + .ds-chat-agent-pane__group {
+  margin-top: var(--gap-400);
+}
+
+.ds-chat-agent-pane__heading {
+  font-family: var(--font-overline-family);
+  font-size: var(--font-overline-size);
+  font-weight: var(--font-overline-weight);
+  line-height: var(--font-overline-line-height);
+  letter-spacing: var(--font-overline-letter-spacing);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+  padding: var(--padding-100) var(--padding-200);
+  margin: 0;
+}
+
+.ds-chat-agent-pane__card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-200);
+  padding: var(--padding-300);
+  background-color: var(--color-bg-container-secondary);
+  border-radius: var(--radius-400);
+}
+
+.ds-chat-agent-pane__card-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-300);
+}
+
+.ds-chat-agent-pane__card-label {
+  font-family: var(--font-paragraph-sm-emphasis-family);
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+  line-height: var(--font-paragraph-sm-emphasis-line-height);
+  color: var(--color-text-primary);
+}

package/chat/ChatAgentPane.d.ts

@@ -0,0 +1,24 @@
+import { AgentRailProfile, AgentRailTab } from '../components/AgentRail/AgentRail';
+export interface ChatAgentPaneProps {
+    /** The agent this pane belongs to: the portrait block at the top. */
+    profile: AgentRailProfile;
+    /** The panes, in display order: activity, approvals, automations, personalisation, or whatever the agent has. */
+    tabs: AgentRailTab[];
+    /** The tab on stage, when the host owns the state; otherwise the pane keeps its own. */
+    activeTab?: string;
+    /** Fires with the chosen tab's id. */
+    onTabChange?: (id: string) => void;
+    /** The widget seated the pane as a bottom sheet, where it fills the width instead of holding its own column. */
+    overlay: boolean;
+    /** Fires from the pane's own close button, a cross in its top trailing corner. Omit for a pane with no close of its own. */
+    onClose?: () => void;
+}
+/**
+ * The built-in agent pane: an AgentRail the widget seats on the
+ * conversation's trailing edge (inline from ASIDE_RAIL_MIN_WIDTH, a bottom sheet
+ * below, the artifact panel's own rule). A host hands it the agent's profile and panes; the widget owns
+ * whether it is up. The header's agent toggle opens and closes it, and the
+ * pane carries a close of its own in its top corner, where a panel's way
+ * out is looked for.
+ */
+export declare function ChatAgentPane({ profile, tabs, activeTab, onTabChange, overlay, onClose }: ChatAgentPaneProps): import("react").JSX.Element;

package/chat/ChatAgentPane.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { AgentRail } from "../components/AgentRail/AgentRail.js";
+import "./ChatAgentPane.css";
+function ChatAgentPane({ profile, tabs, activeTab, onTabChange, overlay, onClose }) {
+  const [ownTab, setOwnTab] = useState(tabs[0]?.id ?? "");
+  const current = activeTab ?? ownTab;
+  return /* @__PURE__ */ jsx(
+    AgentRail,
+    {
+      className: overlay ? "ds-chat-agent-pane--sheet" : void 0,
+      profile,
+      tabs,
+      activeTab: current,
+      onCollapse: onClose,
+      collapseVariant: "close",
+      collapseLabel: "Close the agent panel",
+      onTabChange: (id) => {
+        setOwnTab(id);
+        onTabChange?.(id);
+      }
+    }
+  );
+}
+export {
+  ChatAgentPane
+};

package/chat/ChatArtifactCard.d.ts

@@ -0,0 +1,13 @@
+import { ChatArtifact } from './types';
+export interface ChatArtifactCardProps {
+    /** The artifact this tile stands for. */
+    artifact: ChatArtifact;
+}
+/**
+ * An artifact's place in the thread: an ArtifactCard wired to the provider,
+ * which opens its artifact in the artifact panel. Pressing the tile of the
+ * artifact already on stage closes the panel again, so the tile is one
+ * control both ways. The widget draws it for every `artifact` card; a host
+ * building its own thread renders it the same way.
+ */
+export declare function ChatArtifactCard({ artifact }: ChatArtifactCardProps): import("react").JSX.Element;

package/chat/ChatArtifactCard.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { ArtifactCard } from "../components/ArtifactCard/ArtifactCard.js";
+import { useChatWidget } from "./context.js";
+function ChatArtifactCard({ artifact }) {
+  const { artifact: onStage, openArtifact, closeArtifact } = useChatWidget();
+  const open = onStage?.id === artifact.id;
+  return /* @__PURE__ */ jsx(
+    ArtifactCard,
+    {
+      title: artifact.title,
+      meta: artifact.meta,
+      icon: artifact.icon,
+      open,
+      onClick: () => open ? closeArtifact() : openArtifact(artifact)
+    }
+  );
+}
+export {
+  ChatArtifactCard
+};

package/chat/ChatArtifactPane.d.ts

@@ -0,0 +1,18 @@
+import { ChatArtifact } from './types';
+export interface ChatArtifactPaneProps {
+    /** The artifact on stage, or null for the empty state: the panel opened before the conversation has made anything. */
+    artifact: ChatArtifact | null;
+    /** Whether the widget is showing the pane at its expanded size. */
+    expanded?: boolean;
+    /** Fires with the next state from the expand toggle; omit where the seat has one size. */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Fires from the pane's close button; omit where another control closes the seat. */
+    onClose?: () => void;
+}
+/**
+ * The built-in artifact pane: an ArtifactPanel drawn from a `ChatArtifact`.
+ * A kind the provider's `artifactRenderers` knows is live React content;
+ * otherwise the artifact's document, URL or source decides the preview. The
+ * widget owns the seat (beside the conversation, or a sheet over it).
+ */
+export declare function ChatArtifactPane({ artifact, expanded, onExpandedChange, onClose }: ChatArtifactPaneProps): import("react").JSX.Element;

package/chat/ChatArtifactPane.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { ArtifactPanel } from "../components/ArtifactPanel/ArtifactPanel.js";
+import { EmptyState } from "../components/EmptyState/EmptyState.js";
+import { useChatWidget } from "./context.js";
+const FRAMEABLE_URL = /^(?:https?:\/\/|\/(?!\/))/i;
+function ChatArtifactPane({ artifact, expanded, onExpandedChange, onClose }) {
+  const { artifactRenderers } = useChatWidget();
+  if (!artifact) {
+    return /* @__PURE__ */ jsx(ArtifactPanel, { title: "Artifacts", icon: "space_dashboard", onClose, children: /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__artifact-empty", children: /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        size: "compact",
+        icon: "draft",
+        title: "Nothing here yet",
+        description: "What the chat makes for you, like a dashboard or a page, opens in this panel."
+      }
+    ) }) });
+  }
+  const custom = Object.hasOwn(artifactRenderers, artifact.kind);
+  const render = artifactRenderers[artifact.kind];
+  const src = artifact.url && FRAMEABLE_URL.test(artifact.url) ? artifact.url : void 0;
+  return /* @__PURE__ */ jsx(
+    ArtifactPanel,
+    {
+      title: artifact.title,
+      meta: artifact.meta,
+      icon: artifact.icon,
+      html: custom ? void 0 : artifact.html,
+      src: custom ? void 0 : src,
+      code: artifact.code ?? (custom ? void 0 : artifact.html),
+      language: artifact.language ?? (artifact.code === void 0 && artifact.html !== void 0 ? "html" : void 0),
+      expanded,
+      onExpandedChange,
+      onClose,
+      children: custom ? render(artifact) : void 0
+    },
+    artifact.id
+  );
+}
+export {
+  ChatArtifactPane
+};

package/chat/ChatLauncher.d.ts

@@ -0,0 +1,64 @@
+import { ReactNode } from 'react';
+import { AiButtonSummary } from '../components/AiButton/AiButton';
+import { ChatWidgetProps } from './ChatWidget';
+/** The id the panel carries, for a host control's `aria-controls`. */
+export declare const CHAT_PANEL_ID = "ds-chat-panel";
+export interface ChatLauncherProps {
+    /** The floating button's text. */
+    label?: string;
+    /** The button's icon. */
+    icon?: string;
+    /**
+     * A TLDR panel the button summons on hover: a pre-written summary and
+     * prompt chips. A tapped chip opens the chat and sends the chip's
+     * `prompt`. Hover-capable devices only: the launcher never renders it on
+     * touch, and never in server HTML.
+     */
+    summary?: AiButtonSummary & {
+        chips?: {
+            id: string;
+            label: string;
+            prompt: string;
+        }[];
+    };
+    /** Render nothing at all: for routes that carry no chrome. */
+    hidden?: boolean;
+    /** The panel's DOM id, for a host control's `aria-controls`. */
+    panelId?: string;
+    /**
+     * The attribute the launcher writes on `<html>` to say how the panel sits
+     * (`docked`, `docked-left`, `takeover`), so the host's stylesheet can pad
+     * the page or hide it. `false` writes none.
+     */
+    hostAttribute?: string | false;
+    /** Accessible name for the panel. */
+    panelLabel?: string;
+    /** Everything the widget takes. The launcher sets the responsive ones itself. */
+    widget?: Omit<ChatWidgetProps, 'fullscreenEnabled' | 'placementEnabled' | 'compact' | 'phone'>;
+    /** Rendered inside the panel after the widget: for a host's extra chrome. */
+    children?: ReactNode;
+}
+/**
+ * The site-wide panel. Mount it once, after the page content, so it sits
+ * last in the tab order and never remounts on navigation, which is what
+ * lets a mid-stream answer keep streaming while the visitor reads a
+ * different page.
+ *
+ * Docked (wide screens) it is a non-modal complementary region: no scrim,
+ * no focus trap, the page stays fully usable beside it. Overlaying (below
+ * the threshold, and in fullscreen view) it is modal: scrim, focus trap,
+ * body scroll locked, Escape closes.
+ *
+ * The visitor picks the seat from the header's Chat position menu: either
+ * edge for the dock (and for the overlay below the threshold), or floating,
+ * a non-modal card that is moved by its header and sized by its edges.
+ * Phones get none of it: the takeover is the only form there.
+ *
+ * The host contract: the launcher sets `hostAttribute` on `<html>` and
+ * writes the chosen dock width to `--ds-chat-width` there; a host's
+ * stylesheet pads the page beside a docked panel and hides it behind a
+ * takeover from those two facts (the package's own stylesheet does not
+ * touch the host's body). The panel's geometry reads `--ds-chat-width`,
+ * `--ds-chat-inset` and `--ds-chat-float-height`, defaulted on `:root`.
+ */
+export declare function ChatLauncher({ label, icon, summary, hidden, panelId, hostAttribute, panelLabel, widget, children, }: ChatLauncherProps): import("react").JSX.Element | null;

package/chat/ChatLauncher.js

@@ -0,0 +1,347 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useSyncExternalStore, useLayoutEffect, useRef, useEffect, useState } from "react";
+import { useScrollLock } from "../behaviors/useScrollLock.js";
+import { AiButton } from "../components/AiButton/AiButton.js";
+import { ChatWidget } from "./ChatWidget.js";
+import { useChatWidget } from "./context.js";
+import { isFloatDragStart, FLOAT_EDGE_GAP, FLOAT_MAX_SCALE, dockWidthFromDrag, clampFloatPosition } from "./placement.js";
+import { DOCK_QUERY, TAKEOVER_QUERY } from "./queries.js";
+import "./ChatWidget.css";
+const CHAT_PANEL_ID = "ds-chat-panel";
+const FLOAT_GRIPS = [
+  { dir: "n", dx: 0, dy: -1 },
+  { dir: "s", dx: 0, dy: 1 },
+  { dir: "e", dx: 1, dy: 0 },
+  { dir: "w", dx: -1, dy: 0 },
+  { dir: "ne", dx: 1, dy: -1 },
+  { dir: "nw", dx: -1, dy: -1 },
+  { dir: "se", dx: 1, dy: 1 },
+  { dir: "sw", dx: -1, dy: 1 }
+];
+const viewportBounds = () => ({
+  left: 0,
+  top: 0,
+  right: window.innerWidth,
+  bottom: window.innerHeight
+});
+const subscribeQuery = (query) => (onChange) => {
+  const media = window.matchMedia(query);
+  media.addEventListener("change", onChange);
+  return () => media.removeEventListener("change", onChange);
+};
+const subscribeDock = subscribeQuery(DOCK_QUERY);
+const readDocked = () => window.matchMedia(DOCK_QUERY).matches;
+const subscribeTakeover = subscribeQuery(TAKEOVER_QUERY);
+const readTakeover = () => window.matchMedia(TAKEOVER_QUERY).matches;
+function ChatLauncher({
+  label = "Ask",
+  icon = "forum",
+  summary,
+  hidden = false,
+  panelId = CHAT_PANEL_ID,
+  hostAttribute = "data-chat",
+  panelLabel = "Chat",
+  widget,
+  children
+}) {
+  const { open, setOpen, panelPhase, view, side, floating, returnFocusRef, send } = useChatWidget();
+  const launchSuggestion = (id) => {
+    const chip = summary?.chips?.find((c) => c.id === id);
+    if (!chip) return;
+    setOpen(true);
+    send(chip.prompt);
+  };
+  const docked = useSyncExternalStore(subscribeDock, readDocked, () => false);
+  const takeover = useSyncExternalStore(subscribeTakeover, readTakeover, () => false);
+  const isFull = view === "full" || takeover;
+  const isFloating = floating && !isFull;
+  const isDocked = docked && !isFull && !isFloating;
+  const modal = open && !hidden && (isFull || !docked && !isFloating);
+  const showPanel = open && !hidden;
+  const renderPanel = (open || panelPhase === "closing") && !hidden;
+  useLayoutEffect(() => {
+    if (!hostAttribute) return;
+    const root = document.documentElement;
+    if (showPanel && takeover) {
+      const scrollY = window.scrollY;
+      root.setAttribute(hostAttribute, "takeover");
+      window.scrollTo({ top: 0, behavior: "instant" });
+      return () => {
+        root.removeAttribute(hostAttribute);
+        window.scrollTo({ top: scrollY, behavior: "instant" });
+      };
+    }
+    if (showPanel && isDocked) {
+      root.setAttribute(hostAttribute, side === "left" ? "docked-left" : "docked");
+      return () => root.removeAttribute(hostAttribute);
+    }
+    root.removeAttribute(hostAttribute);
+  }, [showPanel, isDocked, side, takeover, hostAttribute]);
+  useScrollLock(modal && !takeover);
+  const panelRef = useRef(null);
+  const wasOpen = useRef(false);
+  useEffect(() => {
+    if (wasOpen.current && !open) {
+      const target = returnFocusRef.current;
+      if (target && target.isConnected) target.focus();
+    }
+    wasOpen.current = open;
+  }, [open, returnFocusRef]);
+  const dragRef = useRef(null);
+  const [resizing, setResizing] = useState(false);
+  const beginResize = (e) => {
+    if (e.pointerType === "mouse" && e.button !== 0 || dragRef.current) return;
+    const rect = panelRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    dragRef.current = { startX: e.clientX, width: rect.width };
+    e.currentTarget.setPointerCapture(e.pointerId);
+    setResizing(true);
+    document.documentElement.setAttribute("data-chat-resizing", "");
+  };
+  const moveResize = (e) => {
+    const drag = dragRef.current;
+    if (!drag) return;
+    const width = dockWidthFromDrag(drag.width, e.clientX - drag.startX, side);
+    document.documentElement.style.setProperty("--ds-chat-width", `${width}px`);
+  };
+  const endResize = () => {
+    dragRef.current = null;
+    setResizing(false);
+    document.documentElement.removeAttribute("data-chat-resizing");
+  };
+  const [floatPos, setFloatPos] = useState(null);
+  const moveRef = useRef(null);
+  const clampFloat = (x, y, rect) => clampFloatPosition(x, y, rect, viewportBounds());
+  const beginMove = (e) => {
+    if (!isFloating || moveRef.current) return;
+    if (e.pointerType === "mouse" && e.button !== 0) return;
+    if (!isFloatDragStart(e.target)) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    moveRef.current = { dx: e.clientX - rect.left, dy: e.clientY - rect.top, x: rect.left, y: rect.top };
+    try {
+      e.currentTarget.setPointerCapture(e.pointerId);
+    } catch {
+    }
+    document.documentElement.setAttribute("data-chat-resizing", "");
+  };
+  const moveMove = (e) => {
+    const move = moveRef.current;
+    if (!move) return;
+    const node = e.currentTarget;
+    const next = clampFloat(e.clientX - move.dx, e.clientY - move.dy, node.getBoundingClientRect());
+    move.x = next.x;
+    move.y = next.y;
+    node.style.setProperty("--ds-chat-float-x", `${next.x}px`);
+    node.style.setProperty("--ds-chat-float-y", `${next.y}px`);
+  };
+  const endMove = () => {
+    const move = moveRef.current;
+    if (!move) return;
+    moveRef.current = null;
+    setFloatPos({ x: move.x, y: move.y });
+    document.documentElement.removeAttribute("data-chat-resizing");
+  };
+  const [floatSize, setFloatSize] = useState(null);
+  const sizeRef = useRef(null);
+  const beginSize = (e, dx, dy) => {
+    if (e.pointerType === "mouse" && e.button !== 0 || sizeRef.current) return;
+    const rect = panelRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    e.stopPropagation();
+    const root = getComputedStyle(document.documentElement);
+    const inset = parseFloat(root.getPropertyValue("--ds-chat-inset")) || 0;
+    const minW = parseFloat(root.getPropertyValue("--ds-chat-width")) || rect.width;
+    const restH = parseFloat(root.getPropertyValue("--ds-chat-float-height")) || rect.height;
+    const minH = Math.min(restH, window.innerHeight - inset * 2);
+    sizeRef.current = {
+      dx,
+      dy,
+      startX: e.clientX,
+      startY: e.clientY,
+      rect,
+      minW,
+      minH,
+      next: { x: rect.left, y: rect.top, w: rect.width, h: rect.height }
+    };
+    try {
+      e.currentTarget.setPointerCapture(e.pointerId);
+    } catch {
+    }
+    document.documentElement.setAttribute("data-chat-resizing", "");
+  };
+  const moveSize = (e) => {
+    const drag = sizeRef.current;
+    const node = panelRef.current;
+    if (!drag || !node) return;
+    const { rect, next } = drag;
+    if (drag.dx !== 0) {
+      const room = drag.dx > 0 ? window.innerWidth - FLOAT_EDGE_GAP - rect.left : rect.right - FLOAT_EDGE_GAP;
+      const max = Math.max(drag.minW, Math.min(drag.minW * FLOAT_MAX_SCALE, room));
+      next.w = Math.round(
+        Math.min(max, Math.max(drag.minW, rect.width + drag.dx * (e.clientX - drag.startX)))
+      );
+      next.x = Math.round(drag.dx > 0 ? rect.left : rect.right - next.w);
+    }
+    if (drag.dy !== 0) {
+      const room = drag.dy > 0 ? window.innerHeight - FLOAT_EDGE_GAP - rect.top : rect.bottom - FLOAT_EDGE_GAP;
+      const max = Math.max(drag.minH, Math.min(drag.minH * FLOAT_MAX_SCALE, room));
+      next.h = Math.round(
+        Math.min(max, Math.max(drag.minH, rect.height + drag.dy * (e.clientY - drag.startY)))
+      );
+      next.y = Math.round(drag.dy > 0 ? rect.top : rect.bottom - next.h);
+    }
+    node.style.setProperty("--ds-chat-float-x", `${next.x}px`);
+    node.style.setProperty("--ds-chat-float-y", `${next.y}px`);
+    node.style.setProperty("--ds-chat-float-w", `${next.w}px`);
+    node.style.setProperty("--ds-chat-float-h", `${next.h}px`);
+  };
+  const endSize = () => {
+    const drag = sizeRef.current;
+    if (!drag) return;
+    sizeRef.current = null;
+    setFloatPos({ x: drag.next.x, y: drag.next.y });
+    setFloatSize({ w: drag.next.w, h: drag.next.h });
+    document.documentElement.removeAttribute("data-chat-resizing");
+  };
+  useEffect(() => {
+    if (!isFloating || !floatPos) return;
+    const onResize = () => {
+      const rect = panelRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      setFloatPos((pos) => {
+        if (!pos) return pos;
+        const next = clampFloat(pos.x, pos.y, rect);
+        return next.x === pos.x && next.y === pos.y ? pos : next;
+      });
+    };
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [isFloating, floatPos]);
+  if (hidden) return null;
+  if (!renderPanel) {
+    return /* @__PURE__ */ jsx("div", { className: "ds-chat-launcher__fab", children: /* @__PURE__ */ jsx(
+      AiButton,
+      {
+        label,
+        icon,
+        "aria-expanded": false,
+        "aria-controls": panelId,
+        summary: summary ? {
+          overline: summary.overline,
+          title: summary.title,
+          caption: summary.caption,
+          text: summary.text,
+          suggestions: summary.suggestions ?? summary.chips?.map(({ id, label: chipLabel }) => ({ id, label: chipLabel }))
+        } : void 0,
+        onSummarySuggestion: launchSuggestion,
+        onClick: (event) => {
+          returnFocusRef.current = event.currentTarget;
+          setOpen(true);
+        }
+      }
+    ) });
+  }
+  const handleKeyDown = (event) => {
+    if (event.key === "Escape") {
+      setOpen(false);
+      return;
+    }
+    if (modal && event.key === "Tab" && panelRef.current) {
+      const focusables = panelRef.current.querySelectorAll(
+        'button:not([disabled]), a[href], textarea:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      );
+      if (focusables.length === 0) return;
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+  };
+  const panelClass = [
+    "ds-chat-launcher__panel",
+    side === "left" ? "ds-chat-launcher__panel--left" : "",
+    isFloating ? "ds-chat-launcher__panel--floating" : "",
+    isFull ? "ds-chat-launcher__panel--full" : "",
+    panelPhase === "closing" ? "ds-chat-launcher__panel--closing" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    modal && !isFull && /* @__PURE__ */ jsx("div", { className: "ds-chat-launcher__scrim", onClick: () => setOpen(false), "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: panelRef,
+        id: panelId,
+        className: panelClass,
+        style: isFloating && (floatPos || floatSize) ? {
+          ...floatPos && {
+            "--ds-chat-float-x": `${floatPos.x}px`,
+            "--ds-chat-float-y": `${floatPos.y}px`
+          },
+          ...floatSize && {
+            "--ds-chat-float-w": `${floatSize.w}px`,
+            "--ds-chat-float-h": `${floatSize.h}px`
+          }
+        } : void 0,
+        onPointerDown: beginMove,
+        onPointerMove: moveMove,
+        onPointerUp: endMove,
+        onPointerCancel: endMove,
+        role: modal ? "dialog" : "complementary",
+        "aria-modal": modal || void 0,
+        "aria-label": panelLabel,
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__PURE__ */ jsx(
+            ChatWidget,
+            {
+              ...widget,
+              fullscreenEnabled: !takeover,
+              placementEnabled: !takeover,
+              compact: takeover || !isFull,
+              phone: takeover
+            }
+          ),
+          children,
+          isFloating && FLOAT_GRIPS.map(({ dir, dx, dy }) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "ds-chat-launcher__float-grip",
+              "data-dir": dir,
+              "aria-hidden": "true",
+              onPointerDown: (e) => beginSize(e, dx, dy),
+              onPointerMove: moveSize,
+              onPointerUp: endSize,
+              onPointerCancel: endSize
+            },
+            dir
+          ))
+        ]
+      }
+    ),
+    showPanel && isDocked && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: [
+          "ds-chat-launcher__dock-handle",
+          side === "left" ? "ds-chat-launcher__dock-handle--left" : "",
+          resizing ? "ds-chat-launcher__dock-handle--resizing" : ""
+        ].filter(Boolean).join(" "),
+        "aria-hidden": "true",
+        onPointerDown: beginResize,
+        onPointerMove: moveResize,
+        onPointerUp: endResize,
+        onPointerCancel: endResize
+      }
+    )
+  ] });
+}
+export {
+  CHAT_PANEL_ID,
+  ChatLauncher
+};

package/chat/ChatProvider.d.ts

@@ -0,0 +1,55 @@
+import { ReactNode } from 'react';
+import { ChatArtifactRenderers, ChatCardRenderers, ChatLinkRenderer, FeedbackSink } from './context';
+import { FollowupsSource } from './followups';
+import { ChatPlacement } from './placement';
+import { ThreadsOptions } from './threads';
+import { ChatTransport } from './types';
+import { ChatPlaceholderCopy } from './useChat';
+export interface ChatProviderProps {
+    /**
+     * Where the conversation goes. Defaults to the fetch transport against
+     * `endpoint`, carrying the visitor's model pick. A script from
+     * `scriptChat()` runs the widget with no backend at all.
+     */
+    transport?: ChatTransport;
+    /** The endpoint the default transport posts to. */
+    endpoint?: string;
+    /** The seat the panel opens in. */
+    defaultPlacement?: ChatPlacement;
+    /**
+     * Where follow-up questions come from after an answer commits: a source
+     * function, an endpoint for the built-in fetcher, or `false` for none.
+     * Defaults to the fetcher against `/api/chat/followups`.
+     */
+    followups?: FollowupsSource | string | false;
+    /** The written questions offered when the source returns none. */
+    fallbackFollowups?: readonly string[];
+    /**
+     * Where a thumbs verdict goes: a sink function, an endpoint for the
+     * built-in poster, or `false` to hide the thumbs. Defaults to the poster
+     * against `/api/chat/feedback`. Thumbs only ever show on a turn the
+     * server logged (one with an exchange id).
+     */
+    feedback?: FeedbackSink | string | false;
+    /** Draws `card` events by kind. */
+    renderers?: ChatCardRenderers;
+    /** Draws an artifact's preview by kind, for artifacts that are live React content rather than a document or a URL. */
+    artifactRenderers?: ChatArtifactRenderers;
+    /** Renders a same-site link in an answer. The default is a plain anchor; a Next.js host passes its Link. */
+    renderLink?: ChatLinkRenderer;
+    /** Which hrefs in an answer become links. Everything else renders as text. */
+    isInternalHref?: (href: string) => boolean;
+    /** Seeds the thread lifecycle behind the `threads` and `tabs` slots. */
+    threads?: ThreadsOptions;
+    /** Replacement copy for the hook's placeholder replies. */
+    placeholders?: Partial<ChatPlaceholderCopy>;
+    children: ReactNode;
+}
+/**
+ * The chat's whole client state. Mount it once, high in the tree: a root
+ * layout never remounts on client-side navigation, so the transcript, a
+ * stream in flight, the half-typed draft and the open state survive
+ * clicking between pages for free. A hard reload starts clean by design:
+ * no storage, no persistence.
+ */
+export declare function ChatProvider({ transport, endpoint, defaultPlacement, followups, fallbackFollowups, feedback, renderers, artifactRenderers, renderLink, isInternalHref, threads: threadsOptions, placeholders, children, }: ChatProviderProps): import("react").JSX.Element;