@clivly/chat-widget 0.15.0 → 0.17.0

package/README.md

@@ -211,6 +211,45 @@ createChatSessionHandler({
 Use both together for a signed-in user: `defaultVisitor` removes the form,
 `resolveUser` is what makes it trustworthy.
 
+## Placement and launcher
+
+The widget floats in the bottom-right corner of the viewport, clear of the
+device's safe-area insets. Below 48rem the launcher is a 48px icon-only
+button, so it does not cover the host page's pagination or form controls; on
+wider screens it is a pill with an icon and your `launcherLabel`. The label is
+the button's accessible name either way, and `aria-expanded` reports whether
+the panel is open.
+
+| React prop | Script attribute | Values | Default |
+| --- | --- | --- | --- |
+| `placement` | `data-placement` | `"bottom-right"`, `"bottom-left"`, `"inline"` | `"bottom-right"` |
+| `launcher` | `data-launcher` | `"auto"`, `"pill"`, `"icon"` | `"auto"` |
+
+- `"inline"` renders the widget in normal flow, for a host that positions it
+  itself. This was the only behaviour before 0.16.
+- `"auto"` switches between the pill and the icon at 48rem; `"pill"` and
+  `"icon"` pin one shape at every width.
+- A floating widget stacks at `--clivly-chat-z-index` (default `2147483000`).
+  Lower it to sit beneath your own dialogs:
+
+```tsx
+<ChatWidget
+  style={{ "--clivly-chat-z-index": 40 } as React.CSSProperties}
+  /* … */
+/>
+```
+
+```html
+<script
+  src="https://api.clivly.com/widget.js"
+  data-widget-id="support"
+  data-session-url="/api/clivly/widget/session"
+  data-placement="bottom-left"
+  data-launcher="icon"
+  defer
+></script>
+```
+
 ## Theming
 
 The widget ships light and dark palettes and follows the host app by default.

package/dist/browser-mount.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let react_dom_client = require("react-dom/client");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/theme.ts
+// src/theme.ts
 const DARK_MEDIA_QUERY = "(prefers-color-scheme: dark)";
 /** The attribute set by next-themes, daisyUI, and most `data-*` theme setups. */
 const THEME_ATTRIBUTE = "data-theme";
@@ -110,8 +110,51 @@ function parseTheme(value) {
 	if (value === "auto" || value === "dark" || value === "light") return value;
 	return "auto";
 }
-//#endregion
-//#region src/chat-widget.tsx
+// src/visitor-token-storage.ts
+/** Normalised the way the server matches contacts: trimmed, lower-case. */
+function normalizeVisitorEmail(email) {
+	return email.trim().toLowerCase();
+}
+const HASH_MODULUS = 4294967291;
+/**
+* A polynomial string hash, reduced mod a prime below 2^32: stable,
+* synchronous, and exact in doubles (every intermediate stays under 2^53).
+* Not a security primitive.
+*/
+function shortHash(value) {
+	let hash = 5381;
+	for (const char of value) hash = (hash * 33 + (char.codePointAt(0) ?? 0)) % HASH_MODULUS;
+	return hash.toString(16).padStart(8, "0");
+}
+function visitorTokenKey(widgetId, email) {
+	return `clivly-chat-widget:${widgetId}:visitor-token:${shortHash(normalizeVisitorEmail(email))}`;
+}
+/** The single per-widget key every widget before this change wrote. */
+function legacyVisitorTokenKey(widgetId) {
+	return `clivly-chat-widget:${widgetId}:visitor-token`;
+}
+/**
+* The token to offer for this person. Falls back to the legacy per-widget
+* token once, so visitors who chatted before this change still resume — the
+* server only honours it if they are the identity that thread belongs to.
+*/
+function readVisitorToken(storage, widgetId, email) {
+	if (!storage) return null;
+	try {
+		return storage.getItem(visitorTokenKey(widgetId, email)) ?? storage.getItem(legacyVisitorTokenKey(widgetId));
+	} catch {
+		return null;
+	}
+}
+/** Store this person's token and retire the legacy shared one. */
+function writeVisitorToken(storage, widgetId, email, token) {
+	if (!storage) return;
+	try {
+		storage.setItem(visitorTokenKey(widgetId, email), token);
+		storage.removeItem?.(legacyVisitorTokenKey(widgetId));
+	} catch {}
+}
+// src/chat-widget.tsx
 const DELIVERY_LABELS = {
 	failed: "Failed to send",
 	pending: "Sending…",
@@ -170,16 +213,95 @@ const WIDGET_STYLES = `
     font-size: max(16px, 1em);
   }
 }
+/* Floating placements. The insets keep the launcher off a phone's home
+   indicator and rounded corners; --clivly-chat-z-index lets a host slot it
+   beneath its own dialogs. */
+.clivly-chat-widget[data-clivly-placement="bottom-right"],
+.clivly-chat-widget[data-clivly-placement="bottom-left"] {
+  bottom: max(1.25rem, env(safe-area-inset-bottom));
+  position: fixed;
+  z-index: var(--clivly-chat-z-index, 2147483000);
+}
+.clivly-chat-widget[data-clivly-placement="bottom-right"] {
+  right: max(1.25rem, env(safe-area-inset-right));
+}
+.clivly-chat-widget[data-clivly-placement="bottom-left"] {
+  left: max(1.25rem, env(safe-area-inset-left));
+}
 .clivly-chat-widget__launcher {
   align-items: center;
   background: var(--clivly-chat-accent);
   border: 0;
   border-radius: 999px;
+  box-shadow:
+    0 2px 6px rgba(0, 0, 0, 0.18),
+    0 10px 28px -10px var(--clivly-chat-accent);
   color: var(--clivly-chat-accent-contrast);
   cursor: pointer;
   display: inline-flex;
+  font-weight: 500;
   gap: 0.5rem;
-  padding: 0.85rem 1.1rem;
+  justify-content: center;
+  min-height: 3rem;
+  padding: 0 1.15rem;
+  transition: transform 150ms ease-out, filter 150ms ease-out;
+}
+.clivly-chat-widget__launcher:hover {
+  filter: brightness(1.06);
+  transform: translateY(-1px);
+}
+.clivly-chat-widget__launcher:active {
+  transform: scale(0.96);
+}
+.clivly-chat-widget__launcher:focus-visible {
+  outline: 2px solid var(--clivly-chat-accent);
+  outline-offset: 3px;
+}
+.clivly-chat-widget__launcher-icon {
+  flex-shrink: 0;
+  height: 1.25rem;
+  width: 1.25rem;
+}
+/* Icon-only: a 48px circle — a comfortable touch target that does not cover
+   the host's pagination, toolbars or form controls the way a labelled pill
+   does on a phone. The label is clipped, not removed, so it stays the
+   button's accessible name. */
+.clivly-chat-widget[data-clivly-launcher="icon"] .clivly-chat-widget__launcher {
+  height: 3rem;
+  padding: 0;
+  width: 3rem;
+}
+.clivly-chat-widget[data-clivly-launcher="icon"] .clivly-chat-widget__launcher-label {
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+@media (width < 48rem) {
+  .clivly-chat-widget[data-clivly-launcher="auto"] .clivly-chat-widget__launcher {
+    height: 3rem;
+    padding: 0;
+    width: 3rem;
+  }
+  .clivly-chat-widget[data-clivly-launcher="auto"] .clivly-chat-widget__launcher-label {
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .clivly-chat-widget__launcher {
+    transition: none;
+  }
+  .clivly-chat-widget__launcher:hover,
+  .clivly-chat-widget__launcher:active {
+    transform: none;
+  }
 }
 .clivly-chat-widget__panel {
   background: var(--clivly-chat-panel);
@@ -195,6 +317,19 @@ const WIDGET_STYLES = `
   bottom: 4.5rem;
   width: min(24rem, calc(100vw - 2rem));
 }
+/* Opens toward the page from whichever corner the launcher is in. */
+.clivly-chat-widget[data-clivly-placement="bottom-left"] .clivly-chat-widget__panel {
+  left: 0;
+  right: auto;
+}
+/* dvh: on a phone vh includes the collapsed URL bar, so a 75vh panel's top
+   edge could slide under it. The 48px launcher sits lower than the pill. */
+@media (width < 48rem) {
+  .clivly-chat-widget__panel {
+    bottom: 4rem;
+    height: min(44rem, calc(100dvh - 6.5rem));
+  }
+}
 .clivly-chat-widget__header {
   border-bottom: 1px solid var(--clivly-chat-border);
   display: flex;
@@ -441,9 +576,6 @@ function createLocalMessage(message, delivery = "sent") {
 		delivery
 	};
 }
-function createStorageKey(widgetId) {
-	return `clivly-chat-widget:${widgetId}:visitor-token`;
-}
 function formatTimestamp(value) {
 	const date = new Date(value);
 	if (Number.isNaN(date.getTime())) return "";
@@ -562,6 +694,45 @@ function automationBadge(message) {
 	if (message.senderType !== "system" || !message.automation) return null;
 	return AUTOMATION_BADGES[message.automation] ?? "Automated";
 }
+/**
+* The button that opens and closes the panel. Its size and shape come from the
+* root's `data-clivly-launcher` (see WIDGET_STYLES); the label is always its
+* accessible name, and `aria-controls` names the panel only while it exists.
+*/
+function Launcher({ label, onToggle, open, panelId }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		"aria-controls": open ? panelId : void 0,
+		"aria-expanded": open,
+		className: "clivly-chat-widget__launcher",
+		onClick: onToggle,
+		type: "button",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LauncherIcon, { open }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "clivly-chat-widget__launcher-label",
+			children: label
+		})]
+	});
+}
+/**
+* A chat bubble while closed, a cross while open — so the icon-only launcher
+* still tells a sighted visitor what tapping it will do. Decorative: the
+* label and `aria-expanded` carry the meaning for assistive technology.
+* Inline SVG because the script-tag build renders inside a shadow root with no
+* icon font or stylesheet of the host's to borrow.
+*/
+function LauncherIcon({ open }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		"aria-hidden": "true",
+		className: "clivly-chat-widget__launcher-icon",
+		fill: "none",
+		focusable: "false",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: 2,
+		viewBox: "0 0 24 24",
+		children: open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18 6 6 18M6 6l12 12" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" })
+	});
+}
 function MessageBubble({ message }) {
 	const badge = automationBadge(message);
 	const author = badge ? (message.author ?? "").replace(AUTHOR_LABEL_SUFFIX, "") : message.author;
@@ -672,9 +843,10 @@ function isCompleteVisitor(visitor) {
 * the visitor is told to wait for something that will never arrive. The third
 * string keeps the status honest in all three states.
 */
-function composerStatusText(hasTransport, isReady) {
+function composerStatusText(hasTransport, isReady, reconnecting) {
 	if (!hasTransport) return "Chat is unavailable";
-	return isReady ? "Conversation ready" : "Connecting…";
+	if (isReady) return "Conversation ready";
+	return reconnecting ? "Reconnecting…" : "Connecting…";
 }
 /**
 * Guided options under the greeting. Native buttons in a labelled group, so
@@ -740,8 +912,125 @@ function StatusNotice({ assistantThinking, email, showWaitingNotice }) {
 		children: waitingNoticeText(email)
 	});
 }
-function ChatWidget({ className, createTransport, defaultVisitor, getSession, initiallyOpen = false, launcherLabel = "Chat with us", storage = DEFAULT_STORAGE, style, theme = "auto", widgetId }) {
+const RECONNECT_BASE_MS = 1e3;
+const RECONNECT_MAX_MS = 3e4;
+/**
+* How long to wait before reconnect attempt `attempt` (0-based): doubling from
+* one second to a 30-second ceiling, ±25% jitter so a fleet of widgets dropped
+* by the same server restart doesn't reconnect in lockstep.
+*/
+function reconnectDelayMs(attempt, random = Math.random) {
+	const base = Math.min(RECONNECT_MAX_MS, RECONNECT_BASE_MS * 2 ** attempt);
+	return Math.round(base * (.75 + random() * .5));
+}
+/**
+* Keep the socket for `session` open, and reconnect when it drops — a laptop
+* waking, a network change, a server deploy — instead of leaving the visitor at
+* "Connecting…" until they reload. A reconnect refreshes the session (same
+* conversation, fresh token) and the server's snapshot on connect brings back
+* anything that arrived meanwhile. Returns whether a reconnect is pending.
+*/
+function useLiveConnection({ actions, createTransport, refreshSession, session, setIsReady, transportRef }) {
+	const [reconnecting, setReconnecting] = (0, react.useState)(false);
+	const attemptRef = (0, react.useRef)(0);
+	const refreshRef = (0, react.useRef)(refreshSession);
+	const actionsRef = (0, react.useRef)(actions);
+	(0, react.useEffect)(() => {
+		refreshRef.current = refreshSession;
+		actionsRef.current = actions;
+	});
+	(0, react.useEffect)(() => {
+		transportRef.current?.close();
+		transportRef.current = null;
+		setIsReady(false);
+		if (!(session && createTransport)) return;
+		let disposed = false;
+		let timer;
+		const retry = () => {
+			timer = void 0;
+			refreshRef.current(session).catch(() => {
+				scheduleReconnect();
+			});
+		};
+		const scheduleReconnect = () => {
+			if (disposed || timer !== void 0) return;
+			setReconnecting(true);
+			timer = setTimeout(retry, reconnectDelayMs(attemptRef.current));
+			attemptRef.current += 1;
+		};
+		const retryNow = () => {
+			if (timer !== void 0) {
+				clearTimeout(timer);
+				retry();
+			}
+		};
+		window.addEventListener("online", retryNow);
+		const connection = createTransport({
+			handlers: {
+				onClose: () => {
+					setIsReady(false);
+					actionsRef.current.setAssistantThinking(false);
+					scheduleReconnect();
+				},
+				onError: (transportError) => {
+					if (attemptRef.current === 0) actionsRef.current.setError(transportError.message);
+				},
+				onEvent: (event) => {
+					applyServerEvent(event, {
+						...actionsRef.current,
+						setIsReady
+					});
+				},
+				onOpen: () => {
+					if (attemptRef.current > 0) actionsRef.current.setError(null);
+					attemptRef.current = 0;
+					setReconnecting(false);
+					setIsReady(true);
+				}
+			},
+			session
+		});
+		transportRef.current = connection;
+		return () => {
+			disposed = true;
+			if (timer !== void 0) clearTimeout(timer);
+			window.removeEventListener("online", retryNow);
+			connection.close();
+			if (transportRef.current === connection) transportRef.current = null;
+		};
+	}, [createTransport, session]);
+	return reconnecting;
+}
+/** Who the host says is signed in: their normalised email, or null. */
+function hostIdentityOf(defaultVisitor) {
+	return isCompleteVisitor(defaultVisitor) ? normalizeVisitorEmail(defaultVisitor.email) : null;
+}
+/**
+* The host's signed-in visitor changed under an open session — a sign-out, or
+* a different account signing in without a page reload. The session on
+* screen is the previous person's: drop it, its transcript and its socket, so
+* the next open starts as whoever is signed in now (chat widget session
+* review 2026-10-28, S1). A session the visitor started from the pre-chat
+* form is theirs and is left alone.
+*/
+function useResetOnHostIdentityChange({ generationRef, hostIdentity, identityRef, reset, sessionSourceRef }) {
+	const resetRef = (0, react.useRef)(reset);
+	(0, react.useEffect)(() => {
+		resetRef.current = reset;
+	});
+	(0, react.useEffect)(() => {
+		const current = identityRef.current;
+		if (!(current && sessionSourceRef.current === "host")) return;
+		if (hostIdentity === normalizeVisitorEmail(current.email)) return;
+		generationRef.current += 1;
+		identityRef.current = null;
+		sessionSourceRef.current = null;
+		resetRef.current();
+	}, [hostIdentity]);
+}
+function ChatWidget({ className, createTransport, defaultVisitor, getSession, initiallyOpen = false, launcher = "auto", launcherLabel = "Chat with us", placement = "bottom-right", storage = DEFAULT_STORAGE, style, theme = "auto", widgetId }) {
 	const [isOpen, setIsOpen] = (0, react.useState)(initiallyOpen);
+	const panelId = (0, react.useId)();
 	const [error, setError] = (0, react.useState)(null);
 	const [isConnecting, setIsConnecting] = (0, react.useState)(false);
 	const [isReady, setIsReady] = (0, react.useState)(false);
@@ -756,6 +1045,12 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 	});
 	const transportRef = (0, react.useRef)(null);
 	const listRef = (0, react.useRef)(null);
+	const identityRef = (0, react.useRef)(null);
+	const sessionSourceRef = (0, react.useRef)(null);
+	const generationRef = (0, react.useRef)(0);
+	const hostIdentity = hostIdentityOf(defaultVisitor);
+	const latestHostIdentityRef = (0, react.useRef)(hostIdentity);
+	latestHostIdentityRef.current = hostIdentity;
 	(0, react.useEffect)(() => {
 		if (createTransport) return;
 		console.warn("[clivly] <ChatWidget> was given no createTransport, so messages cannot be sent. Pass createTransport={createClivlyTransport()} — see https://www.npmjs.com/package/@clivly/chat-widget#five-minute-quick-start");
@@ -771,41 +1066,32 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 		if (!listRef.current) return;
 		listRef.current.scrollTop = listRef.current.scrollHeight;
 	}, [messages]);
-	(0, react.useEffect)(() => {
-		transportRef.current?.close();
-		transportRef.current = null;
-		setIsReady(false);
-		if (!(session && createTransport)) return;
-		const connection = createTransport({
-			handlers: {
-				onClose: () => {
-					setIsReady(false);
-					setAssistantThinking(false);
-				},
-				onError: (transportError) => {
-					setError(transportError.message);
-				},
-				onEvent: (event) => {
-					applyServerEvent(event, {
-						setAssistantThinking,
-						setError,
-						setIsReady,
-						setMessages,
-						setSupportState
-					});
-				},
-				onOpen: () => {
-					setIsReady(true);
-				}
-			},
-			session
-		});
-		transportRef.current = connection;
-		return () => {
-			connection.close();
-			if (transportRef.current === connection) transportRef.current = null;
-		};
-	}, [createTransport, session]);
+	const reconnecting = useLiveConnection({
+		actions: {
+			setAssistantThinking,
+			setError,
+			setMessages,
+			setSupportState
+		},
+		createTransport,
+		refreshSession: async (current) => {
+			const identity = identityRef.current;
+			if (!identity) throw new Error("No visitor to reconnect as.");
+			const generation = generationRef.current;
+			const next = await getSession({
+				visitor: identity,
+				visitorToken: current.visitorToken,
+				widgetId
+			});
+			if (generation !== generationRef.current) return;
+			writeVisitorToken(storage, widgetId, identity.email, next.visitorToken);
+			setSupportState(next.support?.state ?? null);
+			setSession(next);
+		},
+		session,
+		setIsReady,
+		transportRef
+	});
 	(0, react.useEffect)(() => {
 		if (!(isOpen && isReady)) return;
 		const markReadIfVisible = () => {
@@ -823,30 +1109,53 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 		isReady,
 		messages
 	]);
-	const startSession = (0, react.useCallback)(async (identity) => {
+	const startSession = (0, react.useCallback)(async (identity, source = "form") => {
 		setError(null);
 		setIsConnecting(true);
+		const generation = generationRef.current;
+		const isStale = () => generation !== generationRef.current || source === "host" && normalizeVisitorEmail(identity.email) !== latestHostIdentityRef.current;
 		try {
 			const nextSession = await getSession({
 				visitor: identity,
-				visitorToken: storage?.getItem(createStorageKey(widgetId)) ?? null,
+				visitorToken: readVisitorToken(storage, widgetId, identity.email),
 				widgetId
 			});
-			storage?.setItem(createStorageKey(widgetId), nextSession.visitorToken);
+			if (isStale()) return;
+			writeVisitorToken(storage, widgetId, identity.email, nextSession.visitorToken);
+			identityRef.current = identity;
+			sessionSourceRef.current = source;
 			setSupportState(nextSession.support?.state ?? null);
 			setSession(nextSession);
 			setMessages(sortMessages(nextSession.messages.map((message) => createLocalMessage(message))));
 		} catch (sessionError) {
+			if (isStale()) return;
 			const resolved = sessionError instanceof Error ? sessionError : /* @__PURE__ */ new Error("Failed to start the conversation.");
 			setError(resolved.message);
 		} finally {
-			setIsConnecting(false);
+			if (generation === generationRef.current) setIsConnecting(false);
 		}
 	}, [
 		getSession,
 		storage,
 		widgetId
 	]);
+	useResetOnHostIdentityChange({
+		generationRef,
+		hostIdentity,
+		identityRef,
+		reset: () => {
+			setSession(null);
+			setMessages([]);
+			setSupportState(null);
+			setError(null);
+			setIsConnecting(false);
+			setVisitor({
+				email: defaultVisitor?.email ?? "",
+				name: defaultVisitor?.name ?? ""
+			});
+		},
+		sessionSourceRef
+	});
 	const submitVisitor = async (event) => {
 		event.preventDefault();
 		await startSession(visitor);
@@ -857,7 +1166,7 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 		startSession({
 			email: defaultVisitor.email.trim(),
 			name: defaultVisitor.name.trim()
-		}).catch(() => {});
+		}, "host").catch(() => {});
 	}, [
 		defaultVisitor,
 		error,
@@ -910,21 +1219,24 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 	const topics = visibleTopics(session, supportState);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: `clivly-chat-widget ${className ?? ""}`.trim(),
+		"data-clivly-launcher": launcher,
+		"data-clivly-placement": placement,
 		"data-clivly-theme": resolvedTheme,
 		style: themeStyle,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: WIDGET_STYLES }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				className: "clivly-chat-widget__launcher",
-				onClick: () => {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Launcher, {
+				label: launcherLabel,
+				onToggle: () => {
 					setIsOpen((open) => !open);
 				},
-				type: "button",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: launcherLabel })
+				open: isOpen,
+				panelId
 			}),
 			isOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 				"aria-label": panelTitle,
 				className: "clivly-chat-widget__panel",
+				id: panelId,
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
 						className: "clivly-chat-widget__header",
@@ -997,8 +1309,9 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "clivly-chat-widget__actions",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								"aria-live": "polite",
 								className: "clivly-chat-widget__subtitle",
-								children: composerStatusText(Boolean(createTransport), isReady)
+								children: composerStatusText(Boolean(createTransport), isReady, reconnecting)
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								className: "clivly-chat-widget__button",
 								disabled: !(messageDraft.trim() && canSend),
@@ -1082,8 +1395,7 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 		]
 	});
 }
-//#endregion
-//#region src/transport.ts
+// src/transport.ts
 function isServerEvent(value) {
 	if (typeof value !== "object" || value === null) return false;
 	return typeof value.type === "string";
@@ -1128,8 +1440,7 @@ function createWebSocketTransport({ createSocket = (url, protocols) => new WebSo
 		};
 	};
 }
-//#endregion
-//#region src/clivly-transport.ts
+// src/clivly-transport.ts
 /**
 * The transport a host app should use against a real Clivly backend.
 *
@@ -1146,8 +1457,26 @@ function createClivlyTransport(options = {}) {
 		}
 	});
 }
-//#endregion
-//#region src/session.ts
+// src/layout.ts
+const PLACEMENTS = [
+	"bottom-left",
+	"bottom-right",
+	"inline"
+];
+const LAUNCHERS = [
+	"auto",
+	"icon",
+	"pill"
+];
+/** A script tag's `data-placement`; anything unrecognised floats bottom-right. */
+function parsePlacement(value) {
+	return PLACEMENTS.find((placement) => placement === value) ?? "bottom-right";
+}
+/** A script tag's `data-launcher`; anything unrecognised is `"auto"`. */
+function parseLauncher(value) {
+	return LAUNCHERS.find((launcher) => launcher === value) ?? "auto";
+}
+// src/session.ts
 function isWidgetSessionPayload(value) {
 	return typeof value === "object" && value !== null;
 }
@@ -1169,8 +1498,7 @@ function createSessionFetcher({ fetchImpl = fetch, sessionUrl }) {
 		return data;
 	};
 }
-//#endregion
-//#region src/browser-mount.tsx
+// src/browser-mount.tsx
 const MOUNTED_DATA_ATTR = "clivlyMounted";
 /**
 * The identity a script-tag host already knows, read off the tag.
@@ -1244,6 +1572,8 @@ function mountChatWidgetScript(script = document.currentScript) {
 	const { root, setTheme } = createWidgetMount({
 		container,
 		defaultVisitor: readScriptVisitor(script.dataset),
+		launcher: parseLauncher(script.dataset.launcher),
+		placement: parsePlacement(script.dataset.placement),
 		sessionUrl,
 		socketUrlTemplate: script.dataset.socketUrlTemplate,
 		theme: parseTheme(script.dataset.theme),
@@ -1260,7 +1590,6 @@ function autoMountChatWidgetScript(script = document.currentScript) {
 	if (!script || scriptAlreadyMounted(script)) return null;
 	return mountChatWidgetScript(script);
 }
-//#endregion
 exports.autoMountChatWidgetScript = autoMountChatWidgetScript;
 exports.mountChatWidget = mountChatWidget;
 exports.mountChatWidgetScript = mountChatWidgetScript;