@nonoun/native-chat 0.5.3 → 0.5.8

package/README.md

@@ -0,0 +1,332 @@
+# @nonoun/native-chat
+
+Chat UI components for `@nonoun/native-ui` — message feed, composer input, streaming transport, and a top-level panel with imperative host-integration APIs.
+
+## Install
+
+```bash
+npm install @nonoun/native-chat @nonoun/native-ui
+```
+
+## Quick Start
+
+```html
+<link rel="stylesheet" href="node_modules/@nonoun/native-ui/dist/native-ui.css" />
+<link rel="stylesheet" href="node_modules/@nonoun/native-chat/dist/native-chat.css" />
+
+<script type="module">
+  import '@nonoun/native-ui/register';
+  import '@nonoun/native-chat/register';
+</script>
+
+<native-chat-panel auto-focus-policy="open-request">
+  <!-- panel stamps its own children: header, feed, composer -->
+</native-chat-panel>
+```
+
+## Components
+
+| Element | Description |
+|---------|-------------|
+| `native-chat-panel` | Top-level panel — owns lifecycle, focus policy, header actions |
+| `n-chat-feed` | Scrollable message feed with optional virtualization |
+| `n-chat-messages` | Message list wrapper (inside feed) |
+| `n-chat-message` | Single message container with role, status, actions |
+| `n-chat-message-text` | Markdown-rendered text bubble |
+| `n-chat-message-activity` | Typing / system activity indicator |
+| `n-chat-message-seed` | Seed prompt card |
+| `n-chat-message-genui` | Generative UI node renderer |
+| `n-chat-avatar` | Message avatar |
+| `n-chat-input` | Composer with submit, formatting, slash commands |
+| `n-chat-input-structured` | Multi-option structured input picker |
+
+---
+
+## Embedding Guide
+
+### Panel Host API
+
+`native-chat-panel` exposes three imperative methods for host orchestration:
+
+#### `open(options?)`
+
+```ts
+panel.open();
+panel.open({ focusComposer: true, reason: 'deeplink' });
+```
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `focusComposer` | `boolean` | `false` | Request composer focus after opening |
+| `reason` | `string` | — | Why the panel opened (telemetry / debugging) |
+
+Sets the `[open]` attribute. Idempotent — calling `open()` when already open does not re-emit events.
+
+#### `close(reason?)`
+
+```ts
+panel.close();
+panel.close('user-dismiss');
+```
+
+Removes the `[open]` attribute. Idempotent.
+
+#### `focusComposer(options?, by?)`
+
+```ts
+panel.focusComposer();
+panel.focusComposer({ cursor: 'end' }, 'api');
+```
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `cursor` | `'start' \| 'end' \| 'preserve'` | `'end'` | Caret placement after focus |
+| `by` | `'api' \| 'user' \| 'policy'` | `'api'` | Focus source (included in events) |
+
+Retries up to 3 times via microtask if the composer is not yet available or disabled. On success dispatches `native:composer-focused`; on failure dispatches `native:composer-focus-failed`.
+
+---
+
+### Lifecycle Events
+
+All events bubble and are composed (cross shadow DOM). Listen on the panel or any ancestor:
+
+```ts
+const panel = document.querySelector('native-chat-panel');
+
+panel.addEventListener('native:chat-opened', (e) => {
+  console.log('opened', e.detail.source, e.detail.focusComposer);
+});
+
+panel.addEventListener('native:chat-closed', (e) => {
+  console.log('closed', e.detail.reason);
+});
+
+panel.addEventListener('native:send', (e) => {
+  console.log('user sent:', e.detail.value);
+  // Call e.preventDefault() to block auto-clear
+});
+```
+
+| Event | Detail | Notes |
+|-------|--------|-------|
+| `native:chat-opened` | `{ source?: string, focusComposer: boolean }` | After panel opens |
+| `native:chat-closed` | `{ reason?: string }` | After panel closes |
+| `native:composer-focused` | `{ by: 'api' \| 'user' \| 'policy' }` | Composer received focus |
+| `native:composer-focus-failed` | `{ reason: string, attempts: number }` | All focus retries exhausted |
+| `native:send` | `{ value: string }` | User submitted message (**cancelable**) |
+| `native:chat-stop` | — | User clicked stop button |
+| `native:chat-restart` | — | User clicked restart button |
+| `native:message-action` | `{ action: string, messageId: string }` | Message action triggered |
+
+---
+
+### Focus Policy
+
+The `auto-focus-policy` attribute controls when the composer auto-focuses:
+
+| Value | Behavior |
+|-------|----------|
+| `open-request` (default) | Focus composer only when `open({ focusComposer: true })` is called |
+| `ready` | Auto-focus once at panel initialization |
+| `never` | Never auto-focus — host must call `focusComposer()` explicitly |
+
+**Recommended default:** `open-request` — gives the host full control over focus timing.
+
+#### Focus Failure Handling
+
+When `focusComposer()` cannot reach the textarea (not rendered, disabled, or blocked), the panel emits `native:composer-focus-failed` after 3 retry attempts:
+
+```ts
+panel.addEventListener('native:composer-focus-failed', (e) => {
+  const { reason, attempts } = e.detail;
+  // reason: 'composer-unavailable' | 'disabled' | 'blocked'
+  // Show a fallback hint or retry button
+});
+```
+
+**Recommended UX:** Keep the panel open, show a subtle status hint, and let the user retry manually.
+
+---
+
+### Host Orchestration Patterns
+
+#### Deeplink
+
+```ts
+// Parse URL: ?openChat=1
+if (new URLSearchParams(location.search).has('openChat')) {
+  panel.open({ focusComposer: true, reason: 'deeplink' });
+}
+```
+
+#### Notification or External Action
+
+```ts
+notificationButton.addEventListener('click', () => {
+  panel.open({ focusComposer: false, reason: 'notification' });
+});
+```
+
+#### Intercepting Send
+
+```ts
+panel.addEventListener('native:send', (e) => {
+  const { value } = e.detail;
+  if (!value.trim()) {
+    e.preventDefault(); // block auto-clear, ignore empty
+    return;
+  }
+  myTransport.send(value);
+});
+```
+
+---
+
+### Transport Error & Retry
+
+`createChatTransport()` provides a streaming transport layer with built-in error classification and retry logic.
+
+#### Transport States
+
+```
+idle → sending → streaming → ready
+                 ↘ retrying → sending (retry loop)
+                 ↘ rate-limited     (429)
+                 ↘ auth-required    (401/403)
+                 ↘ server-error     (5xx / network)
+                 ↘ offline          (DNS / TypeError)
+```
+
+#### Usage
+
+```ts
+import { createChatTransport } from '@nonoun/native-chat';
+
+const transport = createChatTransport({
+  baseUrl: '/api/chat',
+  format: 'sse',
+  retry: { maxAttempts: 3, baseDelayMs: 1000, maxDelayMs: 30000 },
+  onStateChange(status) {
+    // status: { state, statusCode?, retryInMs?, attempt?, maxAttempts?, error? }
+    switch (status.state) {
+      case 'sending':     showSpinner(); break;
+      case 'streaming':   hideSpinner(); break;
+      case 'retrying':    showRetryBanner(status.retryInMs); break;
+      case 'rate-limited': showRateLimitNotice(status.retryInMs); break;
+      case 'auth-required': redirectToLogin(); break;
+      case 'server-error': showErrorBanner(status.error); break;
+      case 'offline':     showOfflineBanner(); break;
+      case 'ready':       clearAllBanners(); break;
+    }
+  },
+});
+```
+
+#### Defaults & Behavior
+
+| Behavior | Default |
+|----------|---------|
+| Retry | Disabled (`maxAttempts: 1`) |
+| Retryable errors | 429 (rate-limited), 5xx (server error) |
+| Non-retryable | 401/403 (auth-required) — never retried |
+| 429 delay | Respects `Retry-After` header (seconds or HTTP-date) |
+| Backoff | Exponential: `min(maxDelay, baseDelay * 2^attempt + jitter)` |
+| Stream formats | `'sse'`, `'ndjson'`, `'json'` (auto-detected via `detectFormat()`) |
+
+#### Stream End Classification
+
+```ts
+import { classifyStreamEnd } from '@nonoun/native-chat';
+
+// Returns: 'complete' | 'partial' | 'error' | 'stopped'
+```
+
+| Reason | Meaning |
+|--------|---------|
+| `complete` | Server sent explicit done signal |
+| `partial` | Stream ended without completion (truncated) |
+| `error` | Transport or parse error |
+| `stopped` | Consumer aborted (user clicked stop) |
+
+Use `partial` status on messages to offer a "Continue" action.
+
+---
+
+### Message Actions
+
+Messages show contextual action buttons (copy, regenerate, edit, feedback):
+
+```html
+<n-chat-message role="assistant" actions="copy,regenerate,thumbs-up,thumbs-down">
+  <n-chat-message-text>Hello!</n-chat-message-text>
+</n-chat-message>
+```
+
+| Attribute | Values | Default |
+|-----------|--------|---------|
+| `actions` | Comma-separated action IDs, or `"none"` | Role-based defaults |
+| `actions-style` | `'icon' \| 'label' \| 'icon-label'` | `'icon'` |
+| `actions-position` | `'below' \| 'inside'` | `'below'` |
+
+Listen for actions on any ancestor:
+
+```ts
+panel.addEventListener('native:message-action', (e) => {
+  const { action, messageId } = e.detail;
+  if (action === 'copy') navigator.clipboard.writeText(getMessageText(messageId));
+});
+```
+
+---
+
+### Feed Virtualization
+
+For long transcripts, enable virtual scrolling on the feed:
+
+```html
+<n-chat-feed virtual virtual-item-height="80" virtual-overscan="5">
+  <n-chat-messages>...</n-chat-messages>
+</n-chat-feed>
+```
+
+Only visible items (plus overscan buffer) are rendered. The feed emits `native:range-change` with `{ start, end, total }` as the viewport scrolls.
+
+---
+
+## Exports
+
+```ts
+// Components
+import {
+  NChatPanel, NChatInput, NChatFeed, NChatMessage,
+  NChatMessages, NChatMessageText, NChatMessageActivity,
+  NChatAvatar, NChatMessageSeed, NChatMessageGenUI,
+  NChatInputStructured,
+} from '@nonoun/native-chat';
+
+// Stream / Transport
+import {
+  createChatTransport, createChatStream,
+  parseSSE, parseNDJSON, parseJSON, detectFormat,
+  classifyHttpError, classifyStreamEnd, backoffDelay,
+} from '@nonoun/native-chat';
+
+// Types
+import type {
+  AutoFocusPolicy, ChatPanelOpenOptions, FocusComposerOptions,
+  ChatTransportOptions, TransportState, TransportStatus, RetryOptions,
+  ChatStreamEvent, ChatStreamChunk, StreamFormat, StreamEndReason,
+} from '@nonoun/native-chat';
+
+// Utilities
+import { renderMarkdown, renderInline, sanitizeHtml } from '@nonoun/native-chat';
+```
+
+## Peer Dependency
+
+Requires `@nonoun/native-ui >= 0.6.0`.
+
+## License
+
+MIT

package/dist/{chat-input-structured-element-uXGIe-HI.js → chat-input-structured-element-DPKHlnRm.js}

@@ -1,4 +1,4 @@
-import { NativeElement as e, VirtualScrollController as t, createDisabledEffect as n, signal as r } from "@nonoun/native-ui";
+import { NativeElement as e, VirtualScrollController as t, createDisabledEffect as n, signal as r, uid as i } from "@nonoun/native-ui";
 /**
 * Chat message input with textarea, submit button, and Enter-to-send behavior.
 * @attr {boolean} disabled - Disables interaction
@@ -10,7 +10,7 @@ import { NativeElement as e, VirtualScrollController as t, createDisabledEffect
 * @fires native:composer-focus - Fired when the composer textarea gains focus
 * @fires native:composer-blur - Fired when the composer textarea loses focus
 */
-var i = class extends e {
+var a = class extends e {
 	static observedAttributes = ["disabled", "busy"];
 	#e;
 	#t = r(!1);
@@ -131,7 +131,7 @@ var i = class extends e {
 			})) && !this.hasAttribute("no-auto-clear") && (this.value = "", this.#i?.setAttribute("disabled", ""));
 		}
 	}
-}, a = class extends e {
+}, o = class extends e {
 	static observedAttributes = [
 		"show-stop",
 		"show-restart",
@@ -224,7 +224,7 @@ var i = class extends e {
 		let d = document.createElement("n-button");
 		d.setAttribute("variant", "ghost"), d.setAttribute("inline", ""), d.innerHTML = "<n-icon name=\"microphone\"></n-icon>", l.appendChild(d);
 		let f = document.createElement("n-button");
-		f.setAttribute("variant", "primary"), f.setAttribute("intent", "accent"), f.setAttribute("radius", "round"), f.setAttribute("inline", ""), f.setAttribute("disabled", ""), f.classList.add("submit-btn"), f.innerHTML = "<n-icon name=\"arrow-up\"></n-icon>", l.appendChild(f), s.appendChild(l), o.appendChild(s), this.append(e, i, o), this.addEffect(() => {
+		f.setAttribute("variant", "primary"), f.setAttribute("intent", "accent"), f.setAttribute("radius", "round"), f.setAttribute("inline", ""), f.setAttribute("disabled", ""), f.dataset.role = "submit", f.innerHTML = "<n-icon name=\"arrow-up\"></n-icon>", l.appendChild(f), s.appendChild(l), o.appendChild(s), this.append(e, i, o), this.addEffect(() => {
 			let e = this.#e.value;
 			if (e && !this.#a) {
 				let e = document.createElement("n-button");
@@ -342,7 +342,7 @@ var i = class extends e {
 			composed: !0
 		}));
 	};
-}, o = 40, s = class extends e {
+}, s = 40, c = class extends e {
 	static observedAttributes = [
 		"auto-scroll",
 		"scrollable",
@@ -451,7 +451,7 @@ var i = class extends e {
 		}
 	}
 	#f = () => {
-		let e = this.#n.value, t = this.scrollTop + this.clientHeight >= this.scrollHeight - o;
+		let e = this.#n.value, t = this.scrollTop + this.clientHeight >= this.scrollHeight - s;
 		this.#n.value = t, t !== e && this.dispatchEvent(new CustomEvent("native:feed-scroll", {
 			bubbles: !0,
 			composed: !0,
@@ -470,7 +470,7 @@ var i = class extends e {
 		});
 	};
 	#m = (e) => {};
-}, c = class extends e {
+}, l = class extends e {
 	static observedAttributes = [
 		"src",
 		"name",
@@ -510,7 +510,7 @@ var i = class extends e {
 			}
 			if (n) {
 				let e = document.createElement("span");
-				e.className = "n-chat-avatar-initials", e.textContent = l(n), e.setAttribute("aria-hidden", "true"), this.appendChild(e);
+				e.className = "n-chat-avatar-initials", e.textContent = u(n), e.setAttribute("aria-hidden", "true"), this.appendChild(e);
 				return;
 			}
 			let r = document.createElement("n-icon");
@@ -521,11 +521,11 @@ var i = class extends e {
 		this.textContent = "", super.teardown();
 	}
 };
-function l(e) {
+function u(e) {
 	let t = e.trim().split(/\s+/);
 	return t.length === 0 ? "" : t.length === 1 ? t[0][0].toUpperCase() : (t[0][0] + t[t.length - 1][0]).toUpperCase();
 }
-const u = {
+const d = {
 	copy: {
 		label: "Copy",
 		icon: "copy"
@@ -550,7 +550,7 @@ const u = {
 		label: "Continue",
 		icon: "arrow-right"
 	}
-}, d = {
+}, f = {
 	assistant: [
 		"copy",
 		"retry",
@@ -570,12 +570,12 @@ const u = {
 * @attr {string} timestamp - Epoch milliseconds
 * @attr {string} status - `sending` | `sent` | `error` | `streaming` | `partial`
 * @attr {string} actions - Comma-separated action list, or `"none"` to suppress
-* @attr {string} actions-style - `"label"` (default) | `"icon"` | `"icon-label"`
-* @attr {string} actions-position - `"inside"` (default) | `"below"` — toolbar placement
+* @attr {string} actions-style - `"icon"` (default) | `"label"` | `"icon-label"`
+* @attr {string} actions-position - `"below"` (default) | `"inside"` — toolbar placement
 * @fires native:message-action - Fired when an action button is clicked
 * @fires native:continue-request - Fired when continue is requested for a partial message
 */
-var f = class extends e {
+var p = class extends e {
 	static observedAttributes = [
 		"role",
 		"message-id",
@@ -589,9 +589,12 @@ var f = class extends e {
 	#t = r("assistant");
 	#n = r("sent");
 	#r = r(null);
-	#i = r("label");
-	#a = r("inside");
+	#i = r("icon");
+	#a = r("below");
 	#o = null;
+	#s = !1;
+	#c = 0;
+	#l = 0;
 	constructor() {
 		super(), this.#e = this.attachInternals();
 	}
@@ -644,40 +647,73 @@ var f = class extends e {
 					this.#r.value = n;
 					break;
 				case "actions-style":
-					this.#i.value = n ?? "label";
+					this.#i.value = n ?? "icon";
 					break;
 				case "actions-position":
-					this.#a.value = n ?? "inside";
+					this.#a.value = n ?? "below";
 					break;
 			}
 			super.attributeChangedCallback(e, t, n);
 		}
 	}
 	setup() {
-		super.setup(), this.addEffect(() => {
+		super.setup(), this.addEventListener("pointerenter", this.#u), this.addEventListener("pointerleave", this.#d), this.addEffect(() => {
 			let e = this.#t.value, t = this.#r.value, n = this.#i.value, r = this.#a.value, i = this.#n.value;
-			this.#s(e, t, n, r, i);
-		}), this.#e.role = "article", this.addEventListener("native:press", this.#c);
+			this.#p(e, t, n, r, i);
+		}), this.#e.role = "article";
 	}
 	teardown() {
-		this.removeEventListener("native:press", this.#c), this.#o = null, super.teardown();
-	}
-	#s(e, t, n, r, i) {
-		if (this.#o &&= (this.#o.remove(), null), t === "none" || this.querySelector("[slot=\"actions\"]")) return;
-		let a;
-		if (a = t ? t.split(",").map((e) => e.trim()).filter(Boolean) : d[e] ?? [], i === "partial" && !a.includes("continue") && (a = [...a, "continue"]), a.length === 0) return;
-		let o = document.createElement("n-toolbar");
-		o.className = "n-chat-message-actions", o.setAttribute("padding", "none"), o.setAttribute("aria-label", "Message actions"), n !== "label" && o.setAttribute("data-style", n);
-		for (let e of a) {
-			let t = u[e];
-			t && o.appendChild(p(e, t, n));
+		this.removeEventListener("pointerenter", this.#u), this.removeEventListener("pointerleave", this.#d), clearTimeout(this.#c), clearTimeout(this.#l), this.#o &&= (this.#f(), null), super.teardown();
+	}
+	#u = () => {
+		clearTimeout(this.#l), !(!this.#o || !this.#s || this.#n.value === "partial") && (clearTimeout(this.#c), this.#c = window.setTimeout(() => {
+			try {
+				this.#o?.showPopover();
+			} catch {}
+		}, 300));
+	};
+	#d = () => {
+		!this.#s || this.#n.value === "partial" || (clearTimeout(this.#c), clearTimeout(this.#l), this.#l = window.setTimeout(() => {
+			try {
+				this.#o?.hidePopover();
+			} catch {}
+		}, 150));
+	};
+	#f() {
+		if (this.#o) {
+			if (this.#s) {
+				this.#o.removeEventListener("pointerenter", this.#u), this.#o.removeEventListener("pointerleave", this.#d), this.#o.removeEventListener("focusin", this.#u), this.#o.removeEventListener("focusout", this.#d);
+				try {
+					this.#o.hidePopover();
+				} catch {}
+				this.style.removeProperty("anchor-name"), this.#s = !1;
+			}
+			this.#o.removeEventListener("native:press", this.#m), this.#o.remove();
 		}
-		o.children.length !== 0 && (r === "below" ? this.after(o) : this.appendChild(o), this.#o = o);
 	}
-	#c = (e) => {
-		let t = e.target, n = t?.getAttribute("data-action");
-		if (n && this.#o?.contains(t)) {
-			if (e.stopPropagation(), n === "continue") {
+	#p(e, t, n, r, a) {
+		if (this.#o &&= (this.#f(), null), clearTimeout(this.#l), t === "none" || this.querySelector("[slot=\"actions\"]")) return;
+		let o;
+		if (o = t ? t.split(",").map((e) => e.trim()).filter(Boolean) : f[e] ?? [], a === "partial" && !o.includes("continue") && (o = [...o, "continue"]), o.length === 0) return;
+		let s = document.createElement("n-toolbar");
+		s.dataset.role = "actions", s.setAttribute("padding", "tight"), s.setAttribute("aria-label", "Message actions"), n !== "label" && s.setAttribute("data-style", n);
+		for (let e of o) {
+			let t = d[e];
+			t && s.appendChild(m(e, t, n));
+		}
+		if (s.children.length !== 0) {
+			if (s.addEventListener("native:press", this.#m), r === "below") {
+				s.setAttribute("popover", "manual");
+				let e = i("msg");
+				this.style.setProperty("anchor-name", `--${e}`), s.style.setProperty("position-anchor", `--${e}`), this.appendChild(s), this.#s = !0, s.addEventListener("pointerenter", this.#u), s.addEventListener("pointerleave", this.#d), s.addEventListener("focusin", this.#u), s.addEventListener("focusout", this.#d), a === "partial" && s.showPopover();
+			} else this.appendChild(s);
+			this.#o = s;
+		}
+	}
+	#m = (e) => {
+		let t = e.target?.getAttribute("data-action");
+		if (t) {
+			if (e.stopPropagation(), t === "continue") {
 				this.dispatchEvent(new CustomEvent("native:continue-request", {
 					bubbles: !0,
 					composed: !0,
@@ -689,14 +725,14 @@ var f = class extends e {
 				bubbles: !0,
 				composed: !0,
 				detail: {
-					action: n,
+					action: t,
 					messageId: this.messageId
 				}
 			}));
 		}
 	};
 };
-function p(e, t, n) {
+function m(e, t, n) {
 	let r = document.createElement("n-button");
 	if (r.setAttribute("variant", "ghost"), r.setAttribute("size", "sm"), r.setAttribute("inline", ""), r.setAttribute("data-action", e), r.setAttribute("aria-label", t.label), n === "icon" || n === "icon-label") {
 		let e = document.createElement("n-icon");
@@ -707,13 +743,23 @@ function p(e, t, n) {
 /**
 * Message group — cluster of messages from the same sender.
 *
-* Provides alignment (user = right, assistant/system = left) and
-* groups an avatar + message column.
+* Provides a 2×2 grid layout:
+*   - Col 1, row 1–2: avatar (bottom-aligned)
+*   - Col 2, row 1: context area (metadata, reasoning, timestamps)
+*   - Col 2, row 2: messages area (chat bubbles, flex column)
+*
+* On setup, non-avatar children are sorted into two wrapper divs:
+*   - `.n-chat-context` — non-message children (row 1)
+*   - `.n-chat-bubbles` — `n-chat-message` children (row 2)
+*
+* A MutationObserver routes dynamically added children into the
+* correct wrapper automatically.
 *
 * ```html
-* <n-chat-messages role="user" sender="Kim">
-*   <n-chat-avatar name="Kim"></n-chat-avatar>
-*   <n-chat-message role="user" message-id="1">
+* <n-chat-messages role="assistant" sender="AI">
+*   <n-chat-avatar>AI</n-chat-avatar>
+*   <span class="reasoning">Thinking...</span>
+*   <n-chat-message role="assistant">
 *     <n-chat-message-text>Hello!</n-chat-message-text>
 *   </n-chat-message>
 * </n-chat-messages>
@@ -721,15 +767,18 @@ function p(e, t, n) {
 *
 * @attr {string} role - `user` | `assistant` | `system`
 * @attr {string} sender - Display name of the sender
-* @attr {string} avatar-align - `"top"` (default) | `"center"` | `"bottom"` — avatar vertical alignment
+* @attr {string} avatar-align - `"top"` | `"center"` | `"bottom"` (default) — avatar vertical alignment
 */
-var m = class extends e {
+var h = class extends e {
 	static observedAttributes = [
 		"role",
 		"sender",
 		"avatar-align"
 	];
 	#e;
+	#t = null;
+	#n = null;
+	#r = null;
 	constructor() {
 		super(), this.#e = this.attachInternals();
 	}
@@ -739,12 +788,31 @@ var m = class extends e {
 	setup() {
 		super.setup(), this.#e.role = "group";
 		let e = this.getAttribute("sender");
-		e && (this.#e.ariaLabel = `Messages from ${e}`);
+		e && (this.#e.ariaLabel = `Messages from ${e}`), this.#i(), this.#r = new MutationObserver((e) => {
+			for (let t of e) for (let e of t.addedNodes) e instanceof Element && e.localName !== "n-chat-avatar" && (e === this.#t || e === this.#n || (e.localName === "n-chat-message" ? this.#n?.appendChild(e) : this.#t?.appendChild(e)));
+		}), this.#r.observe(this, { childList: !0 });
 	}
 	teardown() {
+		if (this.#r?.disconnect(), this.#r = null, this.#n) {
+			for (; this.#n.firstChild;) this.appendChild(this.#n.firstChild);
+			this.#n.remove(), this.#n = null;
+		}
+		if (this.#t) {
+			for (; this.#t.firstChild;) this.appendChild(this.#t.firstChild);
+			this.#t.remove(), this.#t = null;
+		}
 		super.teardown();
 	}
-}, h = class extends e {
+	#i() {
+		let e = document.createElement("div");
+		e.className = "n-chat-context";
+		let t = document.createElement("div");
+		t.className = "n-chat-bubbles";
+		let n = Array.from(this.childNodes);
+		for (let r of n) r instanceof Element && r.localName === "n-chat-avatar" || (r instanceof Element && r.localName === "n-chat-message" ? t.appendChild(r) : e.appendChild(r));
+		this.appendChild(e), this.appendChild(t), this.#t = e, this.#n = t;
+	}
+}, g = class extends e {
 	static observedAttributes = ["format"];
 	#e = r("markdown");
 	#t = r("");
@@ -768,14 +836,14 @@ var m = class extends e {
 		super.setup(), this.deferChildren(() => {
 			!this.#t.value && this.textContent?.trim() && (this.#t.value = this.textContent.trim()), this.#n = document.createElement("div"), this.#n.className = "n-chat-prose", this.textContent = "", this.appendChild(this.#n), this.addEffect(() => {
 				let e = this.#t.value, t = this.#e.value;
-				this.#n && (t === "plain" ? this.#n.textContent = e : this.#n.innerHTML = y(e));
+				this.#n && (t === "plain" ? this.#n.textContent = e : this.#n.innerHTML = b(e));
 			});
 		});
 	}
 	teardown() {
 		this.#n = null, super.teardown();
 	}
-}, g = new Set([
+}, _ = new Set([
 	"p",
 	"br",
 	"strong",
@@ -795,14 +863,14 @@ var m = class extends e {
 	"blockquote",
 	"hr"
 ]);
-function _(e) {
+function v(e) {
 	return e.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;").replaceAll("'", "&#39;");
 }
-function v(e) {
-	let t = _(e);
+function y(e) {
+	let t = v(e);
 	return t = t.replace(/`([^`]+)`/g, "<code>$1</code>"), t = t.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>"), t = t.replace(/__(.+?)__/g, "<strong>$1</strong>"), t = t.replace(/\*(.+?)\*/g, "<em>$1</em>"), t = t.replace(/(?<!\w)_(.+?)_(?!\w)/g, "<em>$1</em>"), t = t.replace(/\[([^\]]+)\]\((https?:\/\/[^)]+)\)/g, "<a href=\"$2\" rel=\"noopener noreferrer\" target=\"_blank\">$1</a>"), t;
 }
-function y(e) {
+function b(e) {
 	if (!e) return "";
 	let t = e.split("\n"), n = [], r = 0;
 	for (; r < t.length;) {
@@ -811,14 +879,14 @@ function y(e) {
 			let i = e.slice(3).trim(), a = [];
 			for (r += 1; r < t.length && !t[r].startsWith("```");) a.push(t[r]), r += 1;
 			r += 1;
-			let o = i ? ` data-lang="${_(i)}"` : "";
-			n.push(`<pre${o}><code>${_(a.join("\n"))}</code></pre>`);
+			let o = i ? ` data-lang="${v(i)}"` : "";
+			n.push(`<pre${o}><code>${v(a.join("\n"))}</code></pre>`);
 			continue;
 		}
 		let i = e.match(/^(#{1,6})\s+(.+)/);
 		if (i) {
 			let e = i[1].length;
-			n.push(`<h${e}>${v(i[2])}</h${e}>`), r += 1;
+			n.push(`<h${e}>${y(i[2])}</h${e}>`), r += 1;
 			continue;
 		}
 		if (/^---+$/.test(e.trim()) || /^\*\*\*+$/.test(e.trim())) {
@@ -828,19 +896,19 @@ function y(e) {
 		if (e.startsWith("> ")) {
 			let e = [];
 			for (; r < t.length && t[r].startsWith("> ");) e.push(t[r].slice(2)), r += 1;
-			n.push(`<blockquote>${y(e.join("\n"))}</blockquote>`);
+			n.push(`<blockquote>${b(e.join("\n"))}</blockquote>`);
 			continue;
 		}
 		if (/^[-*+]\s/.test(e)) {
 			let e = [];
 			for (; r < t.length && /^[-*+]\s/.test(t[r]);) e.push(t[r].replace(/^[-*+]\s/, "")), r += 1;
-			n.push("<ul>" + e.map((e) => `<li>${v(e)}</li>`).join("") + "</ul>");
+			n.push("<ul>" + e.map((e) => `<li>${y(e)}</li>`).join("") + "</ul>");
 			continue;
 		}
 		if (/^\d+\.\s/.test(e)) {
 			let e = [];
 			for (; r < t.length && /^\d+\.\s/.test(t[r]);) e.push(t[r].replace(/^\d+\.\s/, "")), r += 1;
-			n.push("<ol>" + e.map((e) => `<li>${v(e)}</li>`).join("") + "</ol>");
+			n.push("<ol>" + e.map((e) => `<li>${y(e)}</li>`).join("") + "</ol>");
 			continue;
 		}
 		if (!e.trim()) {
@@ -849,15 +917,15 @@ function y(e) {
 		}
 		let a = [];
 		for (; r < t.length && t[r].trim() && !t[r].startsWith("#") && !t[r].startsWith("```") && !t[r].startsWith("> ") && !/^[-*+]\s/.test(t[r]) && !/^\d+\.\s/.test(t[r]) && !/^---+$/.test(t[r].trim());) a.push(t[r]), r += 1;
-		a.length > 0 && n.push(`<p>${v(a.join("\n"))}</p>`);
+		a.length > 0 && n.push(`<p>${y(a.join("\n"))}</p>`);
 	}
 	return n.join("");
 }
 /** Sanitize rendered HTML — strip any tags not in allowlist. */
-function b(e) {
+function x(e) {
 	return e.replace(/<\/?([a-zA-Z][a-zA-Z0-9]*)[^>]*>/g, (e, t) => {
 		let n = t.toLowerCase();
-		return g.has(n) ? e : "";
+		return _.has(n) ? e : "";
 	});
 }
 /**
@@ -878,7 +946,7 @@ function b(e) {
 * @attr {boolean} expandable - Allow click to expand trace content
 * @fires native:activity-toggle - Fired when trace is expanded/collapsed
 */
-var x = class extends e {
+var S = class extends e {
 	static observedAttributes = [
 		"type",
 		"label",
@@ -936,7 +1004,7 @@ var x = class extends e {
 			this.#r.value ? (this.#p(), this.#e.states.add("active")) : (this.#m(), this.#e.states.delete("active"));
 		}), this.addEffect(() => {
 			if (!this.#c) return;
-			let e = this.#n.value || S(this.#t.value);
+			let e = this.#n.value || C(this.#t.value);
 			this.#c.textContent = e;
 		}), this.addEffect(() => {
 			this.#u && (this.#u.hidden = !this.#r.value);
@@ -966,7 +1034,7 @@ var x = class extends e {
 	#h = () => {
 		if (!this.#r.value || !this.#l) return;
 		let e = performance.now() - this.#o;
-		this.#l.textContent = C(e), this.#s = requestAnimationFrame(this.#h);
+		this.#l.textContent = w(e), this.#s = requestAnimationFrame(this.#h);
 	};
 	#g = () => {
 		this.#i.value && (this.#a.value = !this.#a.value, this.toggleAttribute("expanded", this.#a.value), this.dispatchEvent(new CustomEvent("native:activity-toggle", {
@@ -976,14 +1044,14 @@ var x = class extends e {
 		})));
 	};
 };
-function S(e) {
+function C(e) {
 	switch (e) {
 		case "thinking": return "Thinking…";
 		case "tool-use": return "Using tools…";
 		default: return "Host is typing…";
 	}
 }
-function C(e) {
+function w(e) {
 	let t = Math.floor(e / 1e3);
 	if (t < 60) return `${t}s`;
 	let n = Math.floor(t / 60), r = t % 60;
@@ -1003,7 +1071,7 @@ function C(e) {
 * @attr {boolean} disabled - Disables all chips
 * @fires native:seed-select - Fired when a chip is clicked
 */
-var w = class extends e {
+var T = class extends e {
 	static observedAttributes = ["options", "disabled"];
 	#e;
 	#t = r([]);
@@ -1072,7 +1140,7 @@ var w = class extends e {
 			}
 		}));
 	};
-}, T = new Set([
+}, E = new Set([
 	"script",
 	"style",
 	"link",
@@ -1089,7 +1157,7 @@ var w = class extends e {
 	"frame",
 	"frameset",
 	"noscript"
-]), E = class extends e {
+]), D = class extends e {
 	static observedAttributes = ["schema-type", "mode"];
 	#e;
 	#t = r("a2ui");
@@ -1134,7 +1202,7 @@ var w = class extends e {
 		super.setup(), this.#i = document.createElement("div"), this.#i.className = "n-chat-genui-container", this.appendChild(this.#i), this.addEffect(() => {
 			let e = this.#r.value, t = this.#n.value;
 			if (!this.#i || (this.#i.textContent = "", !e)) return;
-			let n = D(e);
+			let n = O(e);
 			if (n.length > 0) {
 				this.#a(n), this.dispatchEvent(new CustomEvent("native:genui-error", {
 					bubbles: !0,
@@ -1145,7 +1213,7 @@ var w = class extends e {
 			}
 			if (t === "lightbox") this.#o(e);
 			else {
-				let t = O(e);
+				let t = k(e);
 				t && this.#i.appendChild(t);
 			}
 			this.#e.states.add("rendered");
@@ -1162,14 +1230,14 @@ var w = class extends e {
 	#o(e) {
 		if (!this.#i) return;
 		let t = document.createElement("n-card");
-		t.className = "n-chat-genui-preview";
+		t.dataset.role = "preview";
 		let n = document.createElement("span");
 		n.textContent = `Interactive UI (${e.tag})`, t.appendChild(n);
 		let r = document.createElement("n-button");
 		r.setAttribute("variant", "outline"), r.setAttribute("size", "sm"), r.setAttribute("inline", ""), r.textContent = "Open", r.addEventListener("click", () => this.#s(e)), t.appendChild(r), this.#i.appendChild(t);
 	}
 	#s(e) {
-		let t = document.createElement("n-dialog"), n = O(e);
+		let t = document.createElement("n-dialog"), n = k(e);
 		n && t.appendChild(n), this.appendChild(t), requestAnimationFrame(() => {
 			let e = t.querySelector("dialog");
 			e && e.showModal();
@@ -1189,20 +1257,20 @@ var w = class extends e {
 		}));
 	};
 };
-function D(e, t = 0) {
+function O(e, t = 0) {
 	let n = [];
 	if (t > 20) return n.push("Maximum nesting depth (20) exceeded"), n;
 	if (!e.tag || typeof e.tag != "string") return n.push("Node missing required \"tag\" property"), n;
-	if (T.has(e.tag.toLowerCase()) && n.push(`Forbidden tag: <${e.tag}>`), e.children) for (let r of e.children) n.push(...D(r, t + 1));
+	if (E.has(e.tag.toLowerCase()) && n.push(`Forbidden tag: <${e.tag}>`), e.children) for (let r of e.children) n.push(...O(r, t + 1));
 	return n;
 }
-function O(e) {
-	if (T.has(e.tag.toLowerCase())) return null;
+function k(e) {
+	if (E.has(e.tag.toLowerCase())) return null;
 	let t = document.createElement(e.tag);
 	if (e.id && (t.id = e.id), e.slot && (t.slot = e.slot), e.attributes) for (let [n, r] of Object.entries(e.attributes)) t.setAttribute(n, r);
 	if (e.properties) for (let [n, r] of Object.entries(e.properties)) t[n] = r;
 	if (e.text && (t.textContent = e.text), e.children) for (let n of e.children) {
-		let e = O(n);
+		let e = k(n);
 		e && t.appendChild(e);
 	}
 	return t;
@@ -1227,7 +1295,7 @@ function O(e) {
 * @fires native:structured-submit - Fired on submit with selections
 * @fires native:structured-cancel - Fired when dismissed without selecting
 */
-var k = class extends e {
+var A = class extends e {
 	static observedAttributes = [
 		"question",
 		"type",
@@ -1353,4 +1421,4 @@ var k = class extends e {
 		}));
 	};
 };
-export { h as a, b as c, f as d, d as f, i as g, a as h, x as i, m as l, s as m, E as n, v as o, c as p, w as r, y as s, k as t, u };
+export { g as a, x as c, p as d, f, a as g, o as h, S as i, h as l, c as m, D as n, y as o, l as p, T as r, b as s, A as t, d as u };

package/dist/message/chat-message-element.d.ts

@@ -16,8 +16,8 @@ export declare const ROLE_DEFAULTS: Record<string, string[]>;
  * @attr {string} timestamp - Epoch milliseconds
  * @attr {string} status - `sending` | `sent` | `error` | `streaming` | `partial`
  * @attr {string} actions - Comma-separated action list, or `"none"` to suppress
- * @attr {string} actions-style - `"label"` (default) | `"icon"` | `"icon-label"`
- * @attr {string} actions-position - `"inside"` (default) | `"below"` — toolbar placement
+ * @attr {string} actions-style - `"icon"` (default) | `"label"` | `"icon-label"`
+ * @attr {string} actions-position - `"below"` (default) | `"inside"` — toolbar placement
  * @fires native:message-action - Fired when an action button is clicked
  * @fires native:continue-request - Fired when continue is requested for a partial message
  */

package/dist/message/chat-message-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-message-element.d.ts","sourceRoot":"","sources":["../../src/message/chat-message-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAU,MAAM,mBAAmB,CAAC;AAI1D,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,oBAAoB,CAOhE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAGlD,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,YAAa,SAAQ,aAAa;;IAC7C,MAAM,CAAC,kBAAkB,WAAiG;;IAiB1H,IAAI,IAAI,IAAI,MAAM,CAA6B;IAC/C,IAAI,IAAI,CAAC,GAAG,EAAE,MAAM,EAGnB;IAED,IAAI,SAAS,IAAI,MAAM,CAAkD;IAEzE,IAAI,SAAS,IAAI,MAAM,CAAwD;IAE/E,IAAI,MAAM,IAAI,MAAM,CAA+B;IACnD,IAAI,MAAM,CAAC,GAAG,EAAE,MAAM,EAGrB;IAED,IAAI,OAAO,IAAI,MAAM,GAAG,IAAI,CAAgC;IAC5D,IAAI,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,EAO7B;IAED,IAAI,YAAY,IAAI,MAAM,CAAqC;IAC/D,IAAI,YAAY,CAAC,GAAG,EAAE,MAAM,EAG3B;IAED,IAAI,eAAe,IAAI,MAAM,CAAwC;IACrE,IAAI,eAAe,CAAC,GAAG,EAAE,MAAM,EAG9B;IAID,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAcpF,KAAK,IAAI,IAAI;IAmBb,QAAQ,IAAI,IAAI;CA0FjB"}
+{"version":3,"file":"chat-message-element.d.ts","sourceRoot":"","sources":["../../src/message/chat-message-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAe,MAAM,mBAAmB,CAAC;AAI/D,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,oBAAoB,CAOhE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAGlD,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,YAAa,SAAQ,aAAa;;IAC7C,MAAM,CAAC,kBAAkB,WAAiG;;IAoB1H,IAAI,IAAI,IAAI,MAAM,CAA6B;IAC/C,IAAI,IAAI,CAAC,GAAG,EAAE,MAAM,EAGnB;IAED,IAAI,SAAS,IAAI,MAAM,CAAkD;IAEzE,IAAI,SAAS,IAAI,MAAM,CAAwD;IAE/E,IAAI,MAAM,IAAI,MAAM,CAA+B;IACnD,IAAI,MAAM,CAAC,GAAG,EAAE,MAAM,EAGrB;IAED,IAAI,OAAO,IAAI,MAAM,GAAG,IAAI,CAAgC;IAC5D,IAAI,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,EAO7B;IAED,IAAI,YAAY,IAAI,MAAM,CAAqC;IAC/D,IAAI,YAAY,CAAC,GAAG,EAAE,MAAM,EAG3B;IAED,IAAI,eAAe,IAAI,MAAM,CAAwC;IACrE,IAAI,eAAe,CAAC,GAAG,EAAE,MAAM,EAG9B;IAID,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAcpF,KAAK,IAAI,IAAI;IAqBb,QAAQ,IAAI,IAAI;CAoJjB"}

package/dist/message/chat-messages-element.d.ts

@@ -2,13 +2,23 @@ import { NativeElement } from '@nonoun/native-ui';
 /**
  * Message group — cluster of messages from the same sender.
  *
- * Provides alignment (user = right, assistant/system = left) and
- * groups an avatar + message column.
+ * Provides a 2×2 grid layout:
+ *   - Col 1, row 1–2: avatar (bottom-aligned)
+ *   - Col 2, row 1: context area (metadata, reasoning, timestamps)
+ *   - Col 2, row 2: messages area (chat bubbles, flex column)
+ *
+ * On setup, non-avatar children are sorted into two wrapper divs:
+ *   - `.n-chat-context` — non-message children (row 1)
+ *   - `.n-chat-bubbles` — `n-chat-message` children (row 2)
+ *
+ * A MutationObserver routes dynamically added children into the
+ * correct wrapper automatically.
  *
  * ```html
- * <n-chat-messages role="user" sender="Kim">
- *   <n-chat-avatar name="Kim"></n-chat-avatar>
- *   <n-chat-message role="user" message-id="1">
+ * <n-chat-messages role="assistant" sender="AI">
+ *   <n-chat-avatar>AI</n-chat-avatar>
+ *   <span class="reasoning">Thinking...</span>
+ *   <n-chat-message role="assistant">
  *     <n-chat-message-text>Hello!</n-chat-message-text>
  *   </n-chat-message>
  * </n-chat-messages>
@@ -16,7 +26,7 @@ import { NativeElement } from '@nonoun/native-ui';
  *
  * @attr {string} role - `user` | `assistant` | `system`
  * @attr {string} sender - Display name of the sender
- * @attr {string} avatar-align - `"top"` (default) | `"center"` | `"bottom"` — avatar vertical alignment
+ * @attr {string} avatar-align - `"top"` | `"center"` | `"bottom"` (default) — avatar vertical alignment
  */
 export declare class NChatMessages extends NativeElement {
     #private;

package/dist/message/chat-messages-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-messages-element.d.ts","sourceRoot":"","sources":["../../src/message/chat-messages-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,aAAc,SAAQ,aAAa;;IAC9C,MAAM,CAAC,kBAAkB,WAAsC;;IAS/D,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAKpF,KAAK,IAAI,IAAI;IASb,QAAQ,IAAI,IAAI;CAGjB"}
+{"version":3,"file":"chat-messages-element.d.ts","sourceRoot":"","sources":["../../src/message/chat-messages-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBAAa,aAAc,SAAQ,aAAa;;IAC9C,MAAM,CAAC,kBAAkB,WAAsC;;IAY/D,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAKpF,KAAK,IAAI,IAAI;IA8Bb,QAAQ,IAAI,IAAI;CA4CjB"}

package/dist/native-chat.css

@@ -191,37 +191,85 @@
      n-chat-messages — message group (bubble cluster)
      ══════════════════════════════════════════════════ */
 
+  /* 2×2 grid: avatar | context + bubbles.
+     Col 1: avatar (spans both rows, bottom-aligned)
+     Col 2 row 1: .n-chat-context — metadata, reasoning, timestamps
+     Col 2 row 2: .n-chat-bubbles — message bubbles (flex column) */
   :where(n-chat-messages) {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    gap: var(--n-chat-message-gap);
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto 1fr;
+    column-gap: var(--n-chat-message-gap);
     align-self: flex-start;
+    max-width: var(--n-chat-bubble-max-width);
     min-width: 0;
   }
 
-  /* User messages: right-aligned, avatar on right */
-  [role="user"]:where(n-chat-messages) {
-    align-self: flex-end;
-    flex-direction: row-reverse;
+  /* Avatar: col 1, spans both rows, bottom-align */
+  :where(n-chat-messages) > :where(n-chat-avatar) {
+    grid-column: 1;
+    grid-row: 1 / -1;
+    align-self: end;
   }
 
-  /* Message column (everything except avatar) */
-  :where(n-chat-messages) > :where(:not(n-chat-avatar)) {
+  /* Context area: col 2, row 1 — metadata above messages */
+  :where(n-chat-messages) > :where(.n-chat-context) {
+    grid-column: 2;
+    grid-row: 1;
     display: flex;
     flex-direction: column;
-    gap: calc(var(--n-space));
-    max-width: var(--n-chat-bubble-max-width);
+    gap: var(--n-space);
     min-width: 0;
   }
 
-  /* Avatar alignment */
-  [avatar-align="center"]:where(n-chat-messages) {
-    align-items: center;
+  /* Empty context collapses */
+  :where(n-chat-messages) > :where(.n-chat-context:empty) {
+    display: none;
+  }
+
+  /* Bubbles area: col 2, row 2 — flex column of messages */
+  :where(n-chat-messages) > :where(.n-chat-bubbles) {
+    grid-column: 2;
+    grid-row: 2;
+    display: flex;
+    flex-direction: column;
+    gap: var(--n-space);
+    min-width: 0;
+  }
+
+  /* Messages shrink-wrap to content width */
+  :where(.n-chat-bubbles) > :where(n-chat-message) {
+    width: fit-content;
+    max-width: 100%;
+  }
+
+  /* Avatar alignment overrides */
+  [avatar-align="top"]:where(n-chat-messages) > :where(n-chat-avatar) {
+    align-self: start;
+  }
+
+  [avatar-align="center"]:where(n-chat-messages) > :where(n-chat-avatar) {
+    align-self: center;
   }
 
-  [avatar-align="bottom"]:where(n-chat-messages) {
-    align-items: flex-end;
+  /* User messages: right-aligned, avatar on right */
+  [role="user"]:where(n-chat-messages) {
+    grid-template-columns: 1fr auto;
+    align-self: flex-end;
+  }
+
+  [role="user"]:where(n-chat-messages) > :where(n-chat-avatar) {
+    grid-column: 2;
+  }
+
+  [role="user"]:where(n-chat-messages) > :where(.n-chat-context),
+  [role="user"]:where(n-chat-messages) > :where(.n-chat-bubbles) {
+    grid-column: 1;
+  }
+
+  /* User bubbles align to the right edge */
+  [role="user"]:where(n-chat-messages) :where(.n-chat-bubbles) > :where(n-chat-message) {
+    align-self: flex-end;
   }
 
   :where(n-chat-messages[hidden]) { display: none; }
@@ -270,9 +318,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--n-space);
-
-    padding-block: var(--n-chat-bubble-padding-block);
-    padding-inline: var(--n-chat-bubble-padding-inline);
+    overflow: hidden;
 
     /* Asymmetric radius: assistant = avatar on left */
     border-radius:
@@ -317,40 +363,64 @@
 
   /* ── Message actions toolbar ── */
 
-  :where(n-chat-message) > :where(.n-chat-message-actions) {
+  :where(n-chat-message) > :where(n-toolbar[data-role="actions"]) {
     opacity: 0;
     transition: opacity var(--n-duration) var(--n-easing);
+    padding-inline: var(--n-chat-bubble-padding-inline);
   }
 
-  :where(n-chat-message):hover > :where(.n-chat-message-actions),
-  :where(n-chat-message):focus-within > :where(.n-chat-message-actions),
-  :where(n-chat-message[force-hover]) > :where(.n-chat-message-actions) {
+  :where(n-chat-message):hover > :where(n-toolbar[data-role="actions"]),
+  :where(n-chat-message):focus-within > :where(n-toolbar[data-role="actions"]),
+  :where(n-chat-message[force-hover]) > :where(n-toolbar[data-role="actions"]) {
     opacity: 1;
   }
 
   /* Partial status — always show actions (contains continue button) */
-  [status="partial"]:where(n-chat-message) > :where(.n-chat-message-actions) {
+  [status="partial"]:where(n-chat-message) > :where(n-toolbar[data-role="actions"]) {
     opacity: 1;
   }
 
-  /* ── Below-bubble actions position ── */
+  /* ── Below-bubble popover toolbar ── */
 
-  /* When actions-position="below", the toolbar is a sibling of n-chat-message
-     in the message column. Show on message hover via adjacent sibling. */
-  [actions-position="below"]:where(n-chat-message) + :where(.n-chat-message-actions) {
+  /* Popover toolbar: anchored below the message via CSS anchor positioning.
+     Toolbar is a child of n-chat-message with popover="manual", rendered in the
+     top layer. JS shows/hides via pointerenter/pointerleave + showPopover().
+     Entry/exit transition mirrors n-listbox[popover] (perspective + scale). */
+  :where(n-chat-message) > :where(n-toolbar[data-role="actions"][popover]) {
+    position: fixed;
+    inset: auto;
+    top: anchor(bottom);
+    left: anchor(center);
+    translate: -50% 0;
+    margin: 2px 0 0;
+    width: max-content;
+
+    transform-origin: top center;
     opacity: 0;
-    transition: opacity var(--n-duration) var(--n-easing);
+    transform: perspective(800px) scale(0.96) rotateX(-20deg);
+
+    transition:
+      opacity var(--n-duration) var(--n-easing),
+      transform var(--n-duration) var(--n-easing),
+      display var(--n-duration) var(--n-easing) allow-discrete,
+      overlay var(--n-duration) var(--n-easing) allow-discrete;
   }
 
-  [actions-position="below"]:where(n-chat-message):hover + :where(.n-chat-message-actions),
-  [actions-position="below"]:where(n-chat-message[force-hover]) + :where(.n-chat-message-actions),
-  [actions-position="below"]:where(n-chat-message) + :where(.n-chat-message-actions):focus-within {
+  :where(n-chat-message) > :where(n-toolbar[data-role="actions"][popover]):popover-open {
     opacity: 1;
+    transform: none;
   }
 
-  /* Partial status — always show below-bubble actions */
-  [status="partial"][actions-position="below"]:where(n-chat-message) + :where(.n-chat-message-actions) {
-    opacity: 1;
+  @starting-style {
+    :where(n-chat-message) > :where(n-toolbar[data-role="actions"][popover]):popover-open {
+      opacity: 0;
+      transform: perspective(800px) scale(0.96) rotateX(-20deg);
+    }
+  }
+
+  /* Override n-toolbar display to respect popover hidden state */
+  :where(n-toolbar[data-role="actions"][popover]):not(:popover-open) {
+    display: none;
   }
 
   :where(n-chat-message[hidden]) { display: none; }
@@ -361,6 +431,8 @@
 
   :where(n-chat-message-text) {
     display: block;
+    padding-block: var(--n-chat-bubble-padding-block);
+    padding-inline: var(--n-chat-bubble-padding-inline);
   }
 
   /* ── Prose reset — typography inside rendered markdown ── */
@@ -453,6 +525,7 @@
     color: var(--n-chat-activity-color);
     font-size: var(--n-font-size-sm);
     padding-block: var(--n-space);
+    padding-inline: var(--n-chat-bubble-padding-inline);
     align-self: flex-start;
   }
 
@@ -545,6 +618,7 @@
     flex-wrap: wrap;
     gap: var(--n-space);
     padding-block: var(--n-space);
+    padding-inline: var(--n-chat-bubble-padding-inline);
     align-self: flex-start;
   }
 
@@ -575,7 +649,7 @@
     font-size: var(--n-font-size-sm);
   }
 
-  :where(n-chat-message-genui) :where(.n-chat-genui-preview) {
+  :where(n-chat-message-genui) :where(n-card[data-role="preview"]) {
     display: flex;
     align-items: center;
     justify-content: space-between;

package/dist/native-chat.js

@@ -1,4 +1,4 @@
-import { a as e, c as t, d as n, f as r, g as i, h as a, i as o, l as s, m as c, n as l, o as u, p as d, r as f, s as p, t as m, u as h } from "./chat-input-structured-element-uXGIe-HI.js";
+import { a as e, c as t, d as n, f as r, g as i, h as a, i as o, l as s, m as c, n as l, o as u, p as d, r as f, s as p, t as m, u as h } from "./chat-input-structured-element-DPKHlnRm.js";
 /**
 * Parse a Server-Sent Events (SSE) response stream into ChatStreamChunk values.
 *

package/dist/register.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"register.d.ts","sourceRoot":"","sources":["../src/register.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,4CAA4C,CAAC;AAClF,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAC5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,4CAA4C,CAAC;AA6BlF,OAAO,EACL,UAAU,EACV,UAAU,EACV,SAAS,EACT,WAAW,EACX,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,oBAAoB,EACpB,gBAAgB,EAChB,iBAAiB,EACjB,oBAAoB,GACrB,CAAC"}
+{"version":3,"file":"register.d.ts","sourceRoot":"","sources":["../src/register.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,4CAA4C,CAAC;AAClF,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAC5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,4CAA4C,CAAC;AAqClF,OAAO,EACL,UAAU,EACV,UAAU,EACV,SAAS,EACT,WAAW,EACX,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,oBAAoB,EACpB,gBAAgB,EAChB,iBAAiB,EACjB,oBAAoB,GACrB,CAAC"}

package/dist/register.js

@@ -1,4 +1,4 @@
-import { a as e, d as t, g as n, h as r, i, l as a, m as o, n as s, p as c, r as l, t as u } from "./chat-input-structured-element-uXGIe-HI.js";
+import { a as e, d as t, g as n, h as r, i, l as a, m as o, n as s, p as c, r as l, t as u } from "./chat-input-structured-element-DPKHlnRm.js";
 import { NButton as d, NCard as f, NDialog as p, NIcon as m, NTextarea as h, NToolbar as g, define as _, registerIcon as v } from "@nonoun/native-ui";
-_("n-chat-input", n), _("native-chat-panel", r), _("n-chat-feed", o), _("n-chat-avatar", c), _("n-chat-message", t), _("n-chat-messages", a), _("n-chat-message-text", e), _("n-chat-message-activity", i), _("n-chat-message-seed", l), _("n-chat-message-genui", s), _("n-chat-input-structured", u), _("n-textarea", h), _("n-button", d), _("n-icon", m), _("n-toolbar", g), _("n-dialog", p), _("n-card", f), v("chat-dots", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M116,128a12,12,0,1,1,12,12A12,12,0,0,1,116,128ZM84,140a12,12,0,1,0-12-12A12,12,0,0,0,84,140Zm88,0a12,12,0,1,0-12-12A12,12,0,0,0,172,140Zm60-76V192a16,16,0,0,1-16,16H83l-32.6,28.16-.09.07A15.89,15.89,0,0,1,40,240a16.13,16.13,0,0,1-6.8-1.52A15.85,15.85,0,0,1,24,224V64A16,16,0,0,1,40,48H216A16,16,0,0,1,232,64ZM40,224h0ZM216,64H40V224l34.77-30A8,8,0,0,1,80,192H216Z\"/></svg>"), v("user", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8C55.71,194.74,89.05,176,128,176s72.29,18.74,89.07,44a8,8,0,0,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z\"/></svg>"), v("stop", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M200,40H56A16,16,0,0,0,40,56V200a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,160H56V56H200V200Z\"/></svg>"), v("arrow-counter-clockwise", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M224,128a96,96,0,0,1-94.71,96H128A95.38,95.38,0,0,1,62.1,197.8a8,8,0,0,1,11-11.63A80,80,0,1,0,71.43,71.39a3.07,3.07,0,0,1-.26.25L44.59,96H72a8,8,0,0,1,0,16H24a8,8,0,0,1-8-8V56a8,8,0,0,1,16,0V85.8L60.25,60A96,96,0,0,1,224,128Z\"/></svg>");
+_("n-chat-input", n), _("native-chat-panel", r), _("n-chat-feed", o), _("n-chat-avatar", c), _("n-chat-message", t), _("n-chat-messages", a), _("n-chat-message-text", e), _("n-chat-message-activity", i), _("n-chat-message-seed", l), _("n-chat-message-genui", s), _("n-chat-input-structured", u), _("n-textarea", h), _("n-button", d), _("n-icon", m), _("n-toolbar", g), _("n-dialog", p), _("n-card", f), v("chat-dots", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M116,128a12,12,0,1,1,12,12A12,12,0,0,1,116,128ZM84,140a12,12,0,1,0-12-12A12,12,0,0,0,84,140Zm88,0a12,12,0,1,0-12-12A12,12,0,0,0,172,140Zm60-76V192a16,16,0,0,1-16,16H83l-32.6,28.16-.09.07A15.89,15.89,0,0,1,40,240a16.13,16.13,0,0,1-6.8-1.52A15.85,15.85,0,0,1,24,224V64A16,16,0,0,1,40,48H216A16,16,0,0,1,232,64ZM40,224h0ZM216,64H40V224l34.77-30A8,8,0,0,1,80,192H216Z\"/></svg>"), v("user", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8C55.71,194.74,89.05,176,128,176s72.29,18.74,89.07,44a8,8,0,0,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z\"/></svg>"), v("stop", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M200,40H56A16,16,0,0,0,40,56V200a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,160H56V56H200V200Z\"/></svg>"), v("arrow-counter-clockwise", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M224,128a96,96,0,0,1-94.71,96H128A95.38,95.38,0,0,1,62.1,197.8a8,8,0,0,1,11-11.63A80,80,0,1,0,71.43,71.39a3.07,3.07,0,0,1-.26.25L44.59,96H72a8,8,0,0,1,0,16H24a8,8,0,0,1-8-8V56a8,8,0,0,1,16,0V85.8L60.25,60A96,96,0,0,1,224,128Z\"/></svg>"), v("copy", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z\"/></svg>"), v("arrow-clockwise", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M240,56v48a8,8,0,0,1-8,8H184a8,8,0,0,1,0-16H211.4L184.81,71.64l-.25-.24a80,80,0,1,0-1.67,114.78,8,8,0,0,1,11,11.63A95.44,95.44,0,0,1,128,224h-1.32A96,96,0,1,1,195.75,60L224,85.8V56a8,8,0,1,1,16,0Z\"/></svg>"), v("pencil-simple", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z\"/></svg>"), v("thumbs-up", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M234,80.12A24,24,0,0,0,216,72H160V56a40,40,0,0,0-40-40,8,8,0,0,0-7.16,4.42L75.06,96H32a16,16,0,0,0-16,16v88a16,16,0,0,0,16,16H204a24,24,0,0,0,23.82-21l12-96A24,24,0,0,0,234,80.12ZM32,112H72v88H32ZM223.94,97l-12,96a8,8,0,0,1-7.94,7H88V105.89l36.71-73.43A24,24,0,0,1,144,56V80a8,8,0,0,0,8,8h64a8,8,0,0,1,7.94,9Z\"/></svg>"), v("thumbs-down", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M239.82,157l-12-96A24,24,0,0,0,204,40H32A16,16,0,0,0,16,56v88a16,16,0,0,0,16,16H75.06l37.78,75.58A8,8,0,0,0,120,240a40,40,0,0,0,40-40V184h56a24,24,0,0,0,23.82-27ZM72,144H32V56H72Zm150,21.29a7.88,7.88,0,0,1-6,2.71H152a8,8,0,0,0-8,8v24a24,24,0,0,1-19.29,23.54L88,150.11V56H204a8,8,0,0,1,7.94,7l12,96A7.87,7.87,0,0,1,222,165.29Z\"/></svg>"), v("arrow-right", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z\"/></svg>");
 export { c as NChatAvatar, o as NChatFeed, n as NChatInput, u as NChatInputStructured, t as NChatMessage, i as NChatMessageActivity, s as NChatMessageGenUI, l as NChatMessageSeed, e as NChatMessageText, a as NChatMessages, r as NChatPanel };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nonoun/native-chat",
-  "version": "0.5.3",
+  "version": "0.5.8",
   "description": "Chat input and message layout components for @nonoun/native-ui",
   "license": "MIT",
   "type": "module",