@nonoun/native-chat 0.4.0 → 0.5.2

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

@@ -132,13 +132,20 @@ var i = class extends e {
 		}
 	}
 }, a = class extends e {
-	static observedAttributes = ["show-stop", "show-restart"];
+	static observedAttributes = [
+		"show-stop",
+		"show-restart",
+		"auto-focus-policy",
+		"open"
+	];
 	#e = r(!1);
 	#t = r(!1);
-	#n = null;
-	#r = null;
+	#n = r("open-request");
+	#r = r(!1);
 	#i = null;
 	#a = null;
+	#o = null;
+	#s = null;
 	attributeChangedCallback(e, t, n) {
 		if (t !== n) {
 			switch (e) {
@@ -148,6 +155,14 @@ var i = class extends e {
 				case "show-restart":
 					this.#t.value = n !== null;
 					break;
+				case "auto-focus-policy":
+					this.#n.value = n ?? "open-request";
+					break;
+				case "open": {
+					let e = this.#r.value;
+					this.#r.value = n !== null, !e && n !== null ? this.#f(void 0, !1) : e && n === null && this.#p(void 0);
+					break;
+				}
 			}
 			super.attributeChangedCallback(e, t, n);
 		}
@@ -164,8 +179,30 @@ var i = class extends e {
 	set showRestart(e) {
 		this.#t.value = e, this.toggleAttribute("show-restart", e);
 	}
+	get autoFocusPolicy() {
+		return this.#n.value;
+	}
+	set autoFocusPolicy(e) {
+		this.#n.value = e, this.setAttribute("auto-focus-policy", e);
+	}
+	/** Open the panel. Optionally focus the composer. */
+	open(e) {
+		let t = this.#r.value;
+		this.#r.value = !0, this.toggleAttribute("open", !0);
+		let n = this.#n.value, r = e?.focusComposer ?? !1, i = n !== "never" && (n === "open-request" ? r : !1);
+		t || this.#f(e?.reason, i), i && this.focusComposer({ cursor: "end" }, "api");
+	}
+	/** Close the panel. */
+	close(e) {
+		let t = this.#r.value;
+		this.#r.value = !1, this.removeAttribute("open"), t && this.#p(e);
+	}
+	/** Focus the composer input. */
+	focusComposer(e, t = "api") {
+		this.#l(e ?? {}, t, 0);
+	}
 	setup() {
-		super.setup();
+		super.setup(), this.hasAttribute("open") && (this.#r.value = !0);
 		let e = document.createElement("n-header");
 		e.setAttribute("dividers", "");
 		let t = document.createElement("n-icon");
@@ -173,11 +210,11 @@ var i = class extends e {
 		let n = document.createElement("span");
 		n.setAttribute("slot", "label"), n.textContent = "Assistant", e.appendChild(n);
 		let r = document.createElement("span");
-		r.setAttribute("slot", "trailing"), r.style.display = "inline-flex", r.style.alignItems = "center", r.style.gap = "calc(var(--n-space) * 2)", e.appendChild(r), this.#a = r;
+		r.setAttribute("slot", "trailing"), r.style.display = "inline-flex", r.style.alignItems = "center", r.style.gap = "calc(var(--n-space) * 2)", e.appendChild(r), this.#s = r;
 		let i = document.createElement("n-body"), a = document.createElement("n-chat-content");
 		i.appendChild(a);
 		let o = document.createElement("n-footer");
-		o.setAttribute("dividers", ""), this.#n = o;
+		o.setAttribute("dividers", ""), this.#i = o;
 		let s = document.createElement("n-chat-input");
 		s.setAttribute("variant", "plain");
 		let c = document.createElement("n-textarea");
@@ -189,41 +226,117 @@ var i = class extends e {
 		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(() => {
 			let e = this.#e.value;
-			if (e && !this.#r) {
+			if (e && !this.#a) {
 				let e = document.createElement("n-button");
-				e.setAttribute("variant", "ghost"), e.setAttribute("inline", ""), e.setAttribute("aria-label", "Stop"), e.innerHTML = "<n-icon name=\"stop\"></n-icon>", e.addEventListener("native:press", this.#s), this.#r = e, this.#a?.prepend(e);
-			} else !e && this.#r && (this.#r.removeEventListener("native:press", this.#s), this.#r.remove(), this.#r = null);
+				e.setAttribute("variant", "ghost"), e.setAttribute("inline", ""), e.setAttribute("aria-label", "Stop"), e.innerHTML = "<n-icon name=\"stop\"></n-icon>", e.addEventListener("native:press", this.#h), this.#a = e, this.#s?.prepend(e);
+			} else !e && this.#a && (this.#a.removeEventListener("native:press", this.#h), this.#a.remove(), this.#a = null);
 		}), this.addEffect(() => {
 			let e = this.#t.value;
-			if (e && !this.#i) {
+			if (e && !this.#o) {
 				let e = document.createElement("n-button");
-				e.setAttribute("variant", "ghost"), e.setAttribute("inline", ""), e.setAttribute("aria-label", "Restart"), e.innerHTML = "<n-icon name=\"arrow-counter-clockwise\"></n-icon>", e.addEventListener("native:press", this.#c), this.#i = e;
-				let t = this.#r?.nextSibling ?? this.#a?.firstChild ?? null;
-				this.#a?.insertBefore(e, t);
-			} else !e && this.#i && (this.#i.removeEventListener("native:press", this.#c), this.#i.remove(), this.#i = null);
+				e.setAttribute("variant", "ghost"), e.setAttribute("inline", ""), e.setAttribute("aria-label", "Restart"), e.innerHTML = "<n-icon name=\"arrow-counter-clockwise\"></n-icon>", e.addEventListener("native:press", this.#g), this.#o = e;
+				let t = this.#a?.nextSibling ?? this.#s?.firstChild ?? null;
+				this.#s?.insertBefore(e, t);
+			} else !e && this.#o && (this.#o.removeEventListener("native:press", this.#g), this.#o.remove(), this.#o = null);
 		}), this.deferChildren(() => {
-			this.#o();
+			this.#c();
+		}), this.#n.value === "ready" && queueMicrotask(() => {
+			this.isConnected && this.focusComposer({ cursor: "end" }, "policy");
 		});
 	}
 	teardown() {
-		this.#r && this.#r.removeEventListener("native:press", this.#s), this.#i && this.#i.removeEventListener("native:press", this.#c), this.#n = null, this.#r = null, this.#i = null, this.#a = null, this.innerHTML = "", super.teardown();
+		this.#a && this.#a.removeEventListener("native:press", this.#h), this.#o && this.#o.removeEventListener("native:press", this.#g), this.#i = null, this.#a = null, this.#o = null, this.#s = null, this.innerHTML = "", super.teardown();
 	}
-	#o() {
+	#c() {
 		let e = this.querySelector(":scope > [slot=\"header-trailing\"]");
-		e && this.#a && this.#a.appendChild(e);
+		e && this.#s && this.#s.appendChild(e);
 		let t = this.querySelector(":scope > [slot=\"footer-leading\"]");
-		if (t && this.#n) {
-			let e = this.#n.querySelector(":scope > n-chat-input");
-			this.#n.insertBefore(t, e);
+		if (t && this.#i) {
+			let e = this.#i.querySelector(":scope > n-chat-input");
+			this.#i.insertBefore(t, e);
+		}
+	}
+	#l(e, t, n) {
+		let r = this.#u();
+		if (!r) {
+			if (n < 2) {
+				queueMicrotask(() => this.#l(e, t, n + 1));
+				return;
+			}
+			this.#m("composer-unavailable", 3);
+			return;
 		}
+		if (r.disabled) {
+			if (n < 2) {
+				queueMicrotask(() => this.#l(e, t, n + 1));
+				return;
+			}
+			this.#m("disabled", 3);
+			return;
+		}
+		let i = r.querySelector("n-textarea"), a = i ?? r;
+		try {
+			a.focus();
+		} catch {
+			if (n < 2) {
+				queueMicrotask(() => this.#l(e, t, n + 1));
+				return;
+			}
+			this.#m("blocked", 3);
+			return;
+		}
+		e.cursor && e.cursor !== "preserve" && i && this.#d(i, e.cursor), this.dispatchEvent(new CustomEvent("native:composer-focused", {
+			bubbles: !0,
+			composed: !0,
+			detail: { by: t }
+		}));
+	}
+	#u() {
+		return this.querySelector("n-chat-input");
+	}
+	#d(e, t) {
+		let n = e.ownerDocument.getSelection?.();
+		if (!n) return;
+		let r = e.firstChild ?? e, i = t === "end" ? r.textContent?.length ?? 0 : 0;
+		try {
+			let e = document.createRange();
+			e.setStart(r, i), e.collapse(!0), n.removeAllRanges(), n.addRange(e);
+		} catch {}
+	}
+	#f(e, t) {
+		this.dispatchEvent(new CustomEvent("native:chat-opened", {
+			bubbles: !0,
+			composed: !0,
+			detail: {
+				source: e,
+				focusComposer: t
+			}
+		}));
+	}
+	#p(e) {
+		this.dispatchEvent(new CustomEvent("native:chat-closed", {
+			bubbles: !0,
+			composed: !0,
+			detail: { reason: e }
+		}));
 	}
-	#s = () => {
+	#m(e, t) {
+		this.dispatchEvent(new CustomEvent("native:composer-focus-failed", {
+			bubbles: !0,
+			composed: !0,
+			detail: {
+				reason: e,
+				attempts: t
+			}
+		}));
+	}
+	#h = () => {
 		this.dispatchEvent(new CustomEvent("native:chat-stop", {
 			bubbles: !0,
 			composed: !0
 		}));
 	};
-	#c = () => {
+	#g = () => {
 		this.dispatchEvent(new CustomEvent("native:chat-restart", {
 			bubbles: !0,
 			composed: !0
@@ -458,6 +571,7 @@ const u = {
 * @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
 * @fires native:message-action - Fired when an action button is clicked
 * @fires native:continue-request - Fired when continue is requested for a partial message
 */
@@ -468,14 +582,16 @@ var f = class extends e {
 		"timestamp",
 		"status",
 		"actions",
-		"actions-style"
+		"actions-style",
+		"actions-position"
 	];
 	#e;
 	#t = r("assistant");
 	#n = r("sent");
 	#r = r(null);
 	#i = r("label");
-	#a = null;
+	#a = r("inside");
+	#o = null;
 	constructor() {
 		super(), this.#e = this.attachInternals();
 	}
@@ -509,6 +625,12 @@ var f = class extends e {
 	set actionsStyle(e) {
 		this.#i.value = e, this.setAttribute("actions-style", e);
 	}
+	get actionsPosition() {
+		return this.#a.value;
+	}
+	set actionsPosition(e) {
+		this.#a.value = e, this.setAttribute("actions-position", e);
+	}
 	attributeChangedCallback(e, t, n) {
 		if (t !== n) {
 			switch (e) {
@@ -524,34 +646,37 @@ var f = class extends e {
 				case "actions-style":
 					this.#i.value = n ?? "label";
 					break;
+				case "actions-position":
+					this.#a.value = n ?? "inside";
+					break;
 			}
 			super.attributeChangedCallback(e, t, n);
 		}
 	}
 	setup() {
 		super.setup(), this.addEffect(() => {
-			let e = this.#t.value, t = this.#r.value, n = this.#i.value, r = this.#n.value;
-			this.#o(e, t, n, r);
-		}), this.#e.role = "article", this.addEventListener("native:press", this.#s);
+			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);
 	}
 	teardown() {
-		this.removeEventListener("native:press", this.#s), this.#a = null, super.teardown();
-	}
-	#o(e, t, n, r) {
-		if (this.#a &&= (this.#a.remove(), null), t === "none" || this.querySelector("[slot=\"actions\"]")) return;
-		let i;
-		if (i = t ? t.split(",").map((e) => e.trim()).filter(Boolean) : d[e] ?? [], r === "partial" && !i.includes("continue") && (i = [...i, "continue"]), i.length === 0) return;
-		let a = document.createElement("n-toolbar");
-		a.className = "n-chat-message-actions", a.setAttribute("padding", "none"), a.setAttribute("aria-label", "Message actions"), n !== "label" && a.setAttribute("data-style", n);
-		for (let e of i) {
+		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 && a.appendChild(p(e, t, n));
+			t && o.appendChild(p(e, t, n));
 		}
-		a.children.length > 0 && (this.appendChild(a), this.#a = a);
+		o.children.length !== 0 && (r === "below" ? this.after(o) : this.appendChild(o), this.#o = o);
 	}
-	#s = (e) => {
+	#c = (e) => {
 		let t = e.target, n = t?.getAttribute("data-action");
-		if (n && this.#a?.contains(t)) {
+		if (n && this.#o?.contains(t)) {
 			if (e.stopPropagation(), n === "continue") {
 				this.dispatchEvent(new CustomEvent("native:continue-request", {
 					bubbles: !0,
@@ -596,9 +721,14 @@ 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
 */
 var m = class extends e {
-	static observedAttributes = ["role", "sender"];
+	static observedAttributes = [
+		"role",
+		"sender",
+		"avatar-align"
+	];
 	#e;
 	constructor() {
 		super(), this.#e = this.attachInternals();

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

@@ -1,4 +1,12 @@
 import { NativeElement } from '@nonoun/native-ui';
+export type AutoFocusPolicy = 'open-request' | 'ready' | 'never';
+export interface ChatPanelOpenOptions {
+    focusComposer?: boolean;
+    reason?: string;
+}
+export interface FocusComposerOptions {
+    cursor?: 'start' | 'end' | 'preserve';
+}
 /**
  * Stamped panel for the chat interface.
  *
@@ -28,9 +36,14 @@ import { NativeElement } from '@nonoun/native-ui';
  * ```
  * @attr {boolean} show-stop - Show a stop button in the header; fires `native:chat-stop`
  * @attr {boolean} show-restart - Show a restart button in the header; fires `native:chat-restart`
+ * @attr {string} auto-focus-policy - When to auto-focus the composer: 'open-request' (default), 'ready', 'never'
  * @fires native:chat-stop - Fired when the stop button is pressed
  * @fires native:chat-restart - Fired when the restart button is pressed
  * @fires native:send - Fired on submit with `{ value }` detail
+ * @fires native:chat-opened - Fired when the panel opens
+ * @fires native:chat-closed - Fired when the panel closes
+ * @fires native:composer-focused - Fired when the composer receives focus via API/policy
+ * @fires native:composer-focus-failed - Fired when focusComposer() fails after retries
  */
 export declare class NChatPanel extends NativeElement {
     #private;
@@ -40,6 +53,14 @@ export declare class NChatPanel extends NativeElement {
     set showStop(val: boolean);
     get showRestart(): boolean;
     set showRestart(val: boolean);
+    get autoFocusPolicy(): AutoFocusPolicy;
+    set autoFocusPolicy(val: AutoFocusPolicy);
+    /** Open the panel. Optionally focus the composer. */
+    open(options?: ChatPanelOpenOptions): void;
+    /** Close the panel. */
+    close(reason?: string): void;
+    /** Focus the composer input. */
+    focusComposer(options?: FocusComposerOptions, by?: 'api' | 'user' | 'policy'): void;
     setup(): void;
     teardown(): void;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"chat-panel-element.d.ts","sourceRoot":"","sources":["../src/chat-panel-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAU,MAAM,mBAAmB,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,qBAAa,UAAW,SAAQ,aAAa;;IAC3C,MAAM,CAAC,kBAAkB,WAAiC;IAa1D,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAepF,IAAI,QAAQ,IAAI,OAAO,CAAiC;IACxD,IAAI,QAAQ,CAAC,GAAG,EAAE,OAAO,EAGxB;IAED,IAAI,WAAW,IAAI,OAAO,CAAoC;IAC9D,IAAI,WAAW,CAAC,GAAG,EAAE,OAAO,EAG3B;IAID,KAAK,IAAI,IAAI;IA4Hb,QAAQ,IAAI,IAAI;CA6CjB"}
+{"version":3,"file":"chat-panel-element.d.ts","sourceRoot":"","sources":["../src/chat-panel-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAU,MAAM,mBAAmB,CAAC;AAI1D,MAAM,MAAM,eAAe,GAAG,cAAc,GAAG,OAAO,GAAG,OAAO,CAAC;AAEjE,MAAM,WAAW,oBAAoB;IACnC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,UAAU,CAAC;CACvC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,qBAAa,UAAW,SAAQ,aAAa;;IAC3C,MAAM,CAAC,kBAAkB,WAA8D;IAevF,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IA4BpF,IAAI,QAAQ,IAAI,OAAO,CAAiC;IACxD,IAAI,QAAQ,CAAC,GAAG,EAAE,OAAO,EAGxB;IAED,IAAI,WAAW,IAAI,OAAO,CAAoC;IAC9D,IAAI,WAAW,CAAC,GAAG,EAAE,OAAO,EAG3B;IAED,IAAI,eAAe,IAAI,eAAe,CAAwC;IAC9E,IAAI,eAAe,CAAC,GAAG,EAAE,eAAe,EAGvC;IAED,qDAAqD;IACrD,IAAI,CAAC,OAAO,CAAC,EAAE,oBAAoB,GAAG,IAAI;IAkB1C,uBAAuB;IACvB,KAAK,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI;IAU5B,gCAAgC;IAChC,aAAa,CAAC,OAAO,CAAC,EAAE,oBAAoB,EAAE,EAAE,GAAE,KAAK,GAAG,MAAM,GAAG,QAAgB,GAAG,IAAI;IAM1F,KAAK,IAAI,IAAI;IA0Ib,QAAQ,IAAI,IAAI;CA2JjB"}

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import './register.ts';
 export { NChatInput } from './chat-input-element.ts';
 export { NChatPanel } from './chat-panel-element.ts';
+export type { AutoFocusPolicy, ChatPanelOpenOptions, FocusComposerOptions } from './chat-panel-element.ts';
 export { NChatFeed } from './feed/index.ts';
 export { NChatAvatar } from './avatar/index.ts';
 export { NChatMessage, NChatMessages, NChatMessageText, NChatMessageActivity, NChatMessageSeed, NChatMessageGenUI, NChatInputStructured, } from './message/index.ts';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AAGvB,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGrD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EACL,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,oBAAoB,EACpB,gBAAgB,EAChB,iBAAiB,EACjB,oBAAoB,GACrB,MAAM,oBAAoB,CAAC;AAG5B,YAAY,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAGnF,YAAY,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AACzE,YAAY,EAAE,gBAAgB,EAAE,MAAM,4CAA4C,CAAC;AACnF,YAAY,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAGzE,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AAGpG,YAAY,EACV,eAAe,EACf,YAAY,EACZ,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,cAAc,EACd,eAAe,EACf,sBAAsB,EACtB,YAAY,EACZ,eAAe,GAChB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,QAAQ,EACR,WAAW,EACX,SAAS,EACT,YAAY,EACZ,gBAAgB,EAChB,mBAAmB,EACnB,iBAAiB,EACjB,iBAAiB,EACjB,YAAY,GACb,MAAM,mBAAmB,CAAC;AAG3B,YAAY,EACV,oBAAoB,EACpB,eAAe,EACf,cAAc,EACd,cAAc,EACd,cAAc,EACd,iBAAiB,GAClB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AAGvB,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAG3G,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EACL,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,oBAAoB,EACpB,gBAAgB,EAChB,iBAAiB,EACjB,oBAAoB,GACrB,MAAM,oBAAoB,CAAC;AAG5B,YAAY,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAGnF,YAAY,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AACzE,YAAY,EAAE,gBAAgB,EAAE,MAAM,4CAA4C,CAAC;AACnF,YAAY,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAGzE,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AAGpG,YAAY,EACV,eAAe,EACf,YAAY,EACZ,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,cAAc,EACd,eAAe,EACf,sBAAsB,EACtB,YAAY,EACZ,eAAe,GAChB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,QAAQ,EACR,WAAW,EACX,SAAS,EACT,YAAY,EACZ,gBAAgB,EAChB,mBAAmB,EACnB,iBAAiB,EACjB,iBAAiB,EACjB,YAAY,GACb,MAAM,mBAAmB,CAAC;AAG3B,YAAY,EACV,oBAAoB,EACpB,eAAe,EACf,cAAc,EACd,cAAc,EACd,cAAc,EACd,iBAAiB,GAClB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,sBAAsB,CAAC"}

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

@@ -17,6 +17,7 @@ export declare const ROLE_DEFAULTS: Record<string, string[]>;
  * @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
  * @fires native:message-action - Fired when an action button is clicked
  * @fires native:continue-request - Fired when continue is requested for a partial message
  */
@@ -34,6 +35,8 @@ export declare class NChatMessage extends NativeElement {
     set actions(val: string | null);
     get actionsStyle(): string;
     set actionsStyle(val: string);
+    get actionsPosition(): string;
+    set actionsPosition(val: string);
     attributeChangedCallback(name: string, old: string | null, val: string | null): void;
     setup(): void;
     teardown(): void;

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;;;;;;;;;;;;;;GAcG;AACH,qBAAa,YAAa,SAAQ,aAAa;;IAC7C,MAAM,CAAC,kBAAkB,WAA6E;;IAgBtG,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;IAID,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAapF,KAAK,IAAI,IAAI;IAkBb,QAAQ,IAAI,IAAI;CAoFjB"}
+{"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"}

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

@@ -16,6 +16,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
  */
 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;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,aAAc,SAAQ,aAAa;;IAC9C,MAAM,CAAC,kBAAkB,WAAsB;;IAS/C,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;;;;;;;;;;;;;;;;;;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"}

package/dist/native-chat.css

@@ -33,6 +33,8 @@
     --n-chat-bubble-assistant: var(--n-card);
     --n-chat-bubble-assistant-color: var(--n-ink);
     --n-chat-bubble-radius: var(--n-radius);
+    --n-chat-bubble-radius-avatar-side: var(--n-chat-bubble-radius);
+    --n-chat-bubble-radius-far-side: var(--n-chat-bubble-radius);
     --n-chat-bubble-padding-block: calc(var(--n-space) * 2);
     --n-chat-bubble-padding-inline: calc(var(--n-space) * 3);
     --n-chat-bubble-max-width: 85%;
@@ -67,6 +69,15 @@
   :where(native-chat-panel) {
     --n-ground: var(--n-panel);
 
+    /* Section surface token hooks — override on native-chat-panel to theme sections */
+    --n-chat-panel-header-background: transparent;
+    --n-chat-panel-header-border: var(--n-border-muted);
+    --n-chat-panel-header-label-font-weight: inherit;
+    --n-chat-panel-header-label-letter-spacing: inherit;
+    --n-chat-panel-body-background: transparent;
+    --n-chat-panel-footer-background: transparent;
+    --n-chat-panel-footer-border: var(--n-border-muted);
+
     container-type: inline-size;
     display: flex;
     flex: 1 1 0%;
@@ -83,11 +94,22 @@
   /* ── Sub-container integration ── */
 
   :where(native-chat-panel) > :where(n-header) {
-    border-bottom: 1px solid var(--n-border-muted);
+    background: var(--n-chat-panel-header-background);
+    border-bottom: 1px solid var(--n-chat-panel-header-border);
+  }
+
+  :where(native-chat-panel) > :where(n-header) :where([slot="label"]) {
+    font-weight: var(--n-chat-panel-header-label-font-weight);
+    letter-spacing: var(--n-chat-panel-header-label-letter-spacing);
+  }
+
+  :where(native-chat-panel) > :where(n-body) {
+    background: var(--n-chat-panel-body-background);
   }
 
   :where(native-chat-panel) > :where(n-footer) {
-    border-top: 1px solid var(--n-border-muted);
+    background: var(--n-chat-panel-footer-background);
+    border-top: 1px solid var(--n-chat-panel-footer-border);
   }
 
   /* WHY: Wide padding only above 22rem — asides (280–480px) keep compact defaults. */
@@ -193,6 +215,15 @@
     min-width: 0;
   }
 
+  /* Avatar alignment */
+  [avatar-align="center"]:where(n-chat-messages) {
+    align-items: center;
+  }
+
+  [avatar-align="bottom"]:where(n-chat-messages) {
+    align-items: flex-end;
+  }
+
   :where(n-chat-messages[hidden]) { display: none; }
 
   /* ══════════════════════════════════════════════════
@@ -242,7 +273,13 @@
 
     padding-block: var(--n-chat-bubble-padding-block);
     padding-inline: var(--n-chat-bubble-padding-inline);
-    border-radius: var(--n-chat-bubble-radius);
+
+    /* Asymmetric radius: assistant = avatar on left */
+    border-radius:
+      var(--n-chat-bubble-radius-avatar-side)
+      var(--n-chat-bubble-radius-far-side)
+      var(--n-chat-bubble-radius-far-side)
+      var(--n-chat-bubble-radius-avatar-side);
 
     background: var(--n-chat-bubble-assistant);
     color: var(--n-chat-bubble-assistant-color);
@@ -251,8 +288,14 @@
     overflow-wrap: break-word;
   }
 
-  /* User bubble */
+  /* User bubble: avatar on right — flip avatar-side / far-side corners */
   [role="user"]:where(n-chat-message) {
+    border-radius:
+      var(--n-chat-bubble-radius-far-side)
+      var(--n-chat-bubble-radius-avatar-side)
+      var(--n-chat-bubble-radius-avatar-side)
+      var(--n-chat-bubble-radius-far-side);
+
     background: var(--n-chat-bubble-user);
     color: var(--n-chat-bubble-user-color);
   }
@@ -290,6 +333,26 @@
     opacity: 1;
   }
 
+  /* ── Below-bubble actions position ── */
+
+  /* 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) {
+    opacity: 0;
+    transition: opacity var(--n-duration) var(--n-easing);
+  }
+
+  [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 {
+    opacity: 1;
+  }
+
+  /* Partial status — always show below-bubble actions */
+  [status="partial"][actions-position="below"]:where(n-chat-message) + :where(.n-chat-message-actions) {
+    opacity: 1;
+  }
+
   :where(n-chat-message[hidden]) { display: none; }
 
   /* ══════════════════════════════════════════════════

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-C80qP8yg.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-uXGIe-HI.js";
 /**
 * Parse a Server-Sent Events (SSE) response stream into ChatStreamChunk values.
 *

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-C80qP8yg.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-uXGIe-HI.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>");
 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.4.0",
+  "version": "0.5.2",
   "description": "Chat input and message layout components for @nonoun/native-ui",
   "license": "MIT",
   "type": "module",