@nonoun/native-chat 0.1.1

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

@@ -0,0 +1,21 @@
+import { NativeElement } from '@nonoun/native-ui';
+/**
+ * Chat message input with textarea, submit button, and Enter-to-send behavior.
+ * @attr {boolean} disabled - Disables interaction
+ * @attr {boolean} no-enter-submit - Disables Enter key submission
+ * @attr {boolean} no-auto-clear - Prevents clearing the textarea after send
+ * @fires native:send - Fired on submit with `{ value }` detail
+ */
+export declare class NChatInput extends NativeElement {
+    #private;
+    static observedAttributes: string[];
+    constructor();
+    get value(): string;
+    set value(val: string);
+    get disabled(): boolean;
+    set disabled(val: boolean);
+    attributeChangedCallback(name: string, old: string | null, val: string | null): void;
+    setup(): void;
+    teardown(): void;
+}
+//# sourceMappingURL=chat-input-element.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chat-input-element.d.ts","sourceRoot":"","sources":["../src/chat-input-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAgC,MAAM,mBAAmB,CAAC;AAGhF;;;;;;GAMG;AACH,qBAAa,UAAW,SAAQ,aAAa;;IAC3C,MAAM,CAAC,kBAAkB,WAAgB;;IAczC,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAEpB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAC,GAAG,EAAE,OAAO,EAGxB;IAID,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAYpF,KAAK,IAAI,IAAI;IA6Bb,QAAQ,IAAI,IAAI;CAqFjB"}

package/dist/chat-panel-element-CYzB2qY7.js

@@ -0,0 +1,107 @@
+import { NativeElement as e, createDisabledEffect as t, signal as n } from "@nonoun/native-ui";
+/**
+* Chat message input with textarea, submit button, and Enter-to-send behavior.
+* @attr {boolean} disabled - Disables interaction
+* @attr {boolean} no-enter-submit - Disables Enter key submission
+* @attr {boolean} no-auto-clear - Prevents clearing the textarea after send
+* @fires native:send - Fired on submit with `{ value }` detail
+*/
+var r = class extends e {
+	static observedAttributes = ["disabled"];
+	#e;
+	#t = n(!1);
+	#n = null;
+	#r = null;
+	constructor() {
+		super(), this.#e = this.attachInternals();
+	}
+	get value() {
+		return this.#n?.value ?? "";
+	}
+	set value(e) {
+		this.#n && (this.#n.value = e);
+	}
+	get disabled() {
+		return this.#t.value;
+	}
+	set disabled(e) {
+		this.#t.value = e, this.toggleAttribute("disabled", e);
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) {
+			switch (e) {
+				case "disabled":
+					this.#t.value = n !== null;
+					break;
+			}
+			super.attributeChangedCallback(e, t, n);
+		}
+	}
+	setup() {
+		super.setup(), this.addEffect(t(this, this.#t, this.#e)), this.deferChildren(() => {
+			this.#i(), this.addEffect(() => {
+				let e = this.#t.value;
+				this.#n && this.#n.toggleAttribute("disabled", e), this.#r && (e ? this.#r.setAttribute("disabled", "") : this.#o());
+			});
+		}), this.addEventListener("native:input", this.#s), this.addEventListener("native:press", this.#c), this.addEventListener("keydown", this.#l);
+	}
+	teardown() {
+		this.removeEventListener("native:input", this.#s), this.removeEventListener("native:press", this.#c), this.removeEventListener("keydown", this.#l), this.#n = null, this.#r = null, super.teardown();
+	}
+	#i() {
+		this.#n = this.querySelector(":scope > n-textarea"), this.#r = this.querySelector("[data-submit]") ?? this.#a();
+	}
+	#a() {
+		let e = this.querySelector(":scope > n-chat-input-actions");
+		if (!e) return null;
+		let t = e.querySelectorAll("n-button[variant=\"primary\"]");
+		return t.length ? t[t.length - 1] : null;
+	}
+	#o() {
+		!this.#r || this.#t.value || (this.value.trim() ? this.#r.removeAttribute("disabled") : this.#r.setAttribute("disabled", ""));
+	}
+	#s = (e) => {
+		this.#t.value || this.#o();
+	};
+	#c = (e) => {
+		this.#t.value || e.target === this.#r && this.#u();
+	};
+	#l = (e) => {
+		if (this.#t.value || this.hasAttribute("no-enter-submit")) return;
+		let t = e;
+		if (t.isComposing) return;
+		let n = t.target;
+		!this.#n?.contains(n) && n !== this.#n || t.key === "Enter" && !t.shiftKey && !t.ctrlKey && !t.metaKey && (t.preventDefault(), this.value.trim() && this.#u());
+	};
+	#u() {
+		let e = this.value.trim();
+		e && this.dispatchEvent(new CustomEvent("native:send", {
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0,
+			detail: { value: e }
+		})) && !this.hasAttribute("no-auto-clear") && (this.value = "", this.#r?.setAttribute("disabled", ""));
+	}
+}, i = class extends e {
+	setup() {
+		super.setup();
+		let e = document.createElement("n-header");
+		e.setAttribute("dividers", "");
+		let t = document.createElement("n-icon");
+		t.setAttribute("name", "chat-dots"), t.setAttribute("slot", "leading"), e.appendChild(t);
+		let n = document.createElement("span");
+		n.setAttribute("slot", "label"), n.textContent = "Assistant", e.appendChild(n);
+		let r = document.createElement("n-body"), i = document.createElement("n-chat-content");
+		r.appendChild(i);
+		let a = document.createElement("n-footer");
+		a.setAttribute("dividers", "");
+		let o = document.createElement("n-chat-input"), s = document.createElement("n-textarea");
+		s.setAttribute("placeholder", "Ask anything"), s.setAttribute("autogrow", ""), s.setAttribute("rows", "3"), o.appendChild(s);
+		let c = document.createElement("n-chat-input-actions"), l = document.createElement("n-button");
+		l.setAttribute("variant", "primary"), l.setAttribute("intent", "accent"), l.textContent = "Send", c.appendChild(l), o.appendChild(c), a.appendChild(o), this.append(e, r, a);
+	}
+	teardown() {
+		this.innerHTML = "", super.teardown();
+	}
+};
+export { r as n, i as t };

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

@@ -0,0 +1,25 @@
+import { NativeElement } from '@nonoun/native-ui';
+/**
+ * Stamped panel for the chat interface.
+ *
+ * Creates `<n-header>` (icon, title), `<n-body>` containing
+ * `<n-chat-content>`, and `<n-footer>` with `<n-chat-input>` directly
+ * as children. The host element itself is the panel surface.
+ *
+ * Usage:
+ * ```html
+ * <native-chat-panel></native-chat-panel>
+ * ```
+ *
+ * Listen for messages:
+ * ```js
+ * panel.addEventListener('native:send', (e) => {
+ *   console.log(e.detail.value);
+ * });
+ * ```
+ */
+export declare class NChatPanel extends NativeElement {
+    setup(): void;
+    teardown(): void;
+}
+//# sourceMappingURL=chat-panel-element.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chat-panel-element.d.ts","sourceRoot":"","sources":["../src/chat-panel-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,UAAW,SAAQ,aAAa;IAC3C,KAAK,IAAI,IAAI;IAgDb,QAAQ,IAAI,IAAI;CAIjB"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import './register.ts';
+export { NChatInput } from './chat-input-element.ts';
+export { NChatPanel } from './chat-panel-element.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/native-chat.css

@@ -0,0 +1,149 @@
+@layer ui {
+
+  :where(n-chat-input):not(:defined) { visibility: hidden; }
+
+  /* ╭──────────────────────────────────────────────────────────╮
+     │  n-chat                                                 │
+     │  Chat controller. display:contents — no visual          │
+     │  presence. The inner n-panel provides structure.        │
+     │  n-chat wires gateway / gen-UI framework behavior.      │
+     ╰──────────────────────────────────────────────────────────╯ */
+
+  :where(n-chat) {
+    display: contents;
+  }
+
+  :where(native-chat-panel) {
+    --n-ground: var(--n-panel);
+
+    container-type: inline-size;
+    display: flex;
+    flex: 1 1 0%;
+    min-width: 0;
+    flex-direction: column;
+    background: var(--n-ground);
+    border-radius: var(--n-radius);
+    overflow: hidden;
+
+    font-size: var(--n-font-size);
+    line-height: var(--n-line-height);
+  }
+
+  /* ── Sub-container integration ── */
+
+  :where(native-chat-panel) > :where(n-header) {
+    border-bottom: 1px solid var(--n-border-muted);
+  }
+
+  :where(native-chat-panel) > :where(n-footer) {
+    border-top: 1px solid var(--n-border-muted);
+  }
+
+  /* WHY: Wide padding only above 22rem — asides (280–480px) keep compact defaults. */
+  @container (min-width: 22rem) {
+    :where(native-chat-panel) > :where(n-header) {
+      padding-inline: calc(var(--n-space) * 8);
+    }
+
+    :where(native-chat-panel) > :where(n-body) {
+      padding-inline: calc(var(--n-space) * 8);
+    }
+
+    :where(native-chat-panel) > :where(n-footer) {
+      padding-inline: calc(var(--n-space) * 8);
+    }
+  }
+
+  /* ── n-chat-content ── */
+  /* Message stream layout. Lives inside n-card-body which handles
+     scrolling, padding, and flex: 1. Content just manages message gap. */
+
+  :where(n-chat-content) {
+    display: flex;
+    flex: 1 1 0%;
+    min-width: 0;
+    min-height: 0;
+    flex-direction: column;
+    gap: calc(var(--n-space) * 2);
+  }
+
+  /* ── n-chat-input ── */
+  /* Rounded surface containing textarea + actions row.
+     WHY: Single surface wraps everything — textarea fills the top,
+     actions row sits bottom-right. Compact mode lays out as a
+     single horizontal row. */
+
+  :where(n-chat-input) {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    background: var(--n-control);
+    border: 1px solid var(--n-border-muted);
+    border-radius: var(--n-radius);
+  }
+
+  /* Compact: single row — textarea and actions side by side */
+  :where(n-chat-input[compact]) {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  /* Textarea inside input — transparent, borderless, fills space.
+     WHY: Override custom properties so all states (hover, filled, focus)
+     resolve to transparent. The wrapper provides the visual surface. */
+  :where(n-chat-input) > :where(n-textarea) {
+    --n-background: transparent;
+    --n-background-hover: transparent;
+    --n-background-active: transparent;
+    --n-border-color: transparent;
+    --n-border-color-hover: transparent;
+    --n-border-color-active: transparent;
+
+    border: none;
+    border-radius: 0;
+    resize: none;
+  }
+
+  :where(n-chat-input) > :where(n-textarea):not(:state(empty)),
+  :where(n-chat-input) > :where(n-textarea):not(:state(empty)):hover {
+    background: transparent;
+    border-color: transparent;
+  }
+
+  :where(n-chat-input) > :where(n-textarea):focus {
+    border-color: transparent;
+    outline: none;
+  }
+
+  /* ── n-chat-input-attachments ── */
+  /* Optional attachment zone above the textarea. */
+
+  :where(n-chat-input-attachments) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc(var(--n-space) * 2);
+    padding-block: var(--n-space);
+    padding-inline: calc(var(--n-space-k) * var(--n-space));
+  }
+
+  /* ── n-chat-input-actions ── */
+  /* Bottom action row: [+][model][mic][submit] — right-aligned. */
+
+  :where(n-chat-input-actions) {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: calc(var(--n-space) * 2);
+    padding-block: var(--n-space);
+    padding-inline: calc(var(--n-space-k) * var(--n-space));
+    min-width: 0;
+  }
+
+  /* In compact mode, actions shrink-wrap with no extra padding */
+  :where(n-chat-input[compact]) > :where(n-chat-input-actions) {
+    flex: none;
+    padding-block: 0;
+    padding-inline-start: 0;
+  }
+
+}

package/dist/native-chat.js

@@ -0,0 +1,2 @@
+import { n as e, t } from "./chat-panel-element-CYzB2qY7.js";
+export { e as NChatInput, t as NChatPanel };

package/dist/register.d.ts

@@ -0,0 +1,4 @@
+import { NChatInput } from './chat-input-element.ts';
+import { NChatPanel } from './chat-panel-element.ts';
+export { NChatInput, NChatPanel };
+//# sourceMappingURL=register.d.ts.map

package/dist/register.d.ts.map

@@ -0,0 +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;AAarD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC"}

package/dist/register.js

@@ -0,0 +1,4 @@
+import { n as e, t } from "./chat-panel-element-CYzB2qY7.js";
+import { NButton as n, NIcon as r, NTextarea as i, define as a, registerIcon as o } from "@nonoun/native-ui";
+a("n-chat-input", e), a("native-chat-panel", t), a("n-textarea", i), a("n-button", n), a("n-icon", r), o("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>");
+export { e as NChatInput, t as NChatPanel };

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@nonoun/native-chat",
+  "version": "0.1.1",
+  "description": "Chat input and message layout components for @nonoun/native-ui",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/native-chat.js",
+  "module": "./dist/native-chat.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/native-chat.js"
+    },
+    "./register": {
+      "types": "./dist/register.d.ts",
+      "default": "./dist/register.js"
+    },
+    "./css": "./dist/native-chat.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "./dist/register.js"
+  ],
+  "peerDependencies": {
+    "@nonoun/native-ui": ">=0.6.0"
+  },
+  "scripts": {
+    "build": "npm run build:js && npm run build:css && npm run build:types",
+    "build:js": "vite build",
+    "build:css": "cp src/chat.css dist/native-chat.css",
+    "build:types": "tsc -p tsconfig.build.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}