@nonoun/native-chat 0.1.2 → 0.2.1

package/dist/native-chat.css

@@ -1,6 +1,53 @@
+/* ════════════════════════════════════════════════════
+   native-chat — Chat component styles
+   ════════════════════════════════════════════════════ */
+
 @layer ui {
 
-  :where(n-chat-input):not(:defined) { visibility: hidden; }
+  /* ── :not(:defined) visibility guards ── */
+
+  :where(n-chat-input):not(:defined),
+  :where(n-chat-feed):not(:defined),
+  :where(n-chat-avatar):not(:defined),
+  :where(n-chat-message):not(:defined),
+  :where(n-chat-messages):not(:defined),
+  :where(n-chat-message-text):not(:defined),
+  :where(n-chat-message-activity):not(:defined),
+  :where(n-chat-message-seed):not(:defined),
+  :where(n-chat-message-genui):not(:defined),
+  :where(n-chat-input-structured):not(:defined) { visibility: hidden; }
+
+  /* ══════════════════════════════════════════════════
+     Chat Token Definitions
+     ══════════════════════════════════════════════════ */
+
+  :where(n-chat-feed),
+  :where(native-chat-panel) {
+    /* Feed */
+    --n-chat-gap: calc(var(--n-space) * 4);
+    --n-chat-message-gap: calc(var(--n-space) * 2);
+
+    /* Bubbles */
+    --n-chat-bubble-user: var(--n-button);
+    --n-chat-bubble-user-color: white;
+    --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-padding-block: calc(var(--n-space) * 2);
+    --n-chat-bubble-padding-inline: calc(var(--n-space) * 3);
+    --n-chat-bubble-max-width: 85%;
+
+    /* Avatar */
+    --n-chat-avatar-size: var(--n-size);
+    --n-chat-avatar-background: var(--n-control);
+    --n-chat-avatar-color: var(--n-ink-muted);
+
+    /* Activity */
+    --n-chat-activity-color: var(--n-ink-muted);
+
+    /* Prose */
+    --n-chat-prose-gap: calc(var(--n-space) * 2);
+  }
 
   /* ╭──────────────────────────────────────────────────────────╮
      │  n-chat                                                 │
@@ -13,6 +60,10 @@
     display: contents;
   }
 
+  /* ══════════════════════════════════════════════════
+     native-chat-panel
+     ══════════════════════════════════════════════════ */
+
   :where(native-chat-panel) {
     --n-ground: var(--n-panel);
 
@@ -55,8 +106,6 @@
   }
 
   /* ── n-chat-content ── */
-  /* Message stream layout. Lives inside n-body which handles
-     scrolling, padding, and flex: 1. Content just manages message gap. */
 
   :where(n-chat-content) {
     display: flex;
@@ -67,35 +116,436 @@
     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) {
-    --n-background: var(--n-control);
-    --n-border-color: var(--n-border-muted);
+  /* ══════════════════════════════════════════════════
+     n-chat-feed — scrollable thread coordinator
+     ══════════════════════════════════════════════════ */
 
+  :where(n-chat-feed) {
     display: flex;
+    flex-direction: column;
+    gap: var(--n-chat-gap);
     flex: 1 1 0%;
+    min-height: 0;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scroll-behavior: smooth;
+    padding-block: calc(var(--n-space) * 4);
+  }
+
+  /* ── Date separator ── */
+
+  :where(n-chat-feed) > :where(.n-chat-date-separator) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-block: var(--n-space);
+    font-size: var(--n-font-size-sm);
+    color: var(--n-ink-muted);
+    user-select: none;
+  }
+
+  :where(n-chat-feed[hidden]) { display: none; }
+
+  /* ══════════════════════════════════════════════════
+     n-chat-messages — message group (bubble cluster)
+     ══════════════════════════════════════════════════ */
+
+  :where(n-chat-messages) {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--n-chat-message-gap);
+    align-self: flex-start;
+  }
+
+  /* User messages: right-aligned, avatar on right */
+  [role="user"]:where(n-chat-messages) {
+    align-self: flex-end;
+    flex-direction: row-reverse;
+  }
+
+  /* Message column (everything except avatar) */
+  :where(n-chat-messages) > :where(:not(n-chat-avatar)) {
+    display: flex;
     flex-direction: column;
+    gap: calc(var(--n-space));
+    max-width: var(--n-chat-bubble-max-width);
     min-width: 0;
-    background: var(--n-background);
-    border: 1px solid var(--n-border-color);
-    border-radius: var(--n-radius);
   }
 
+  :where(n-chat-messages[hidden]) { display: none; }
+
+  /* ══════════════════════════════════════════════════
+     n-chat-avatar — sender avatar
+     ══════════════════════════════════════════════════ */
+
+  :where(n-chat-avatar) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    width: var(--n-chat-avatar-size);
+    height: var(--n-chat-avatar-size);
+    border-radius: 50%;
+    background: var(--n-chat-avatar-background);
+    color: var(--n-chat-avatar-color);
+
+    font-size: calc(var(--n-chat-avatar-size) * 0.4);
+    font-weight: 600;
+    line-height: 1;
+    overflow: hidden;
+    user-select: none;
+  }
+
+  :where(n-chat-avatar) > :where(img) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: inherit;
+  }
+
+  :where(n-chat-avatar) > :where(n-icon) {
+    font-size: calc(var(--n-chat-avatar-size) * 0.5);
+  }
+
+  :where(n-chat-avatar[hidden]) { display: none; }
+
+  /* ══════════════════════════════════════════════════
+     n-chat-message — individual message bubble
+     ══════════════════════════════════════════════════ */
+
+  :where(n-chat-message) {
+    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);
+    border-radius: var(--n-chat-bubble-radius);
+
+    background: var(--n-chat-bubble-assistant);
+    color: var(--n-chat-bubble-assistant-color);
+
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
+
+  /* User bubble */
+  [role="user"]:where(n-chat-message) {
+    background: var(--n-chat-bubble-user);
+    color: var(--n-chat-bubble-user-color);
+  }
+
+  /* Streaming status */
+  [status="streaming"]:where(n-chat-message) {
+    opacity: 0.85;
+  }
+
+  /* Error status */
+  [status="error"]:where(n-chat-message) {
+    border: 1px solid var(--n-border-danger);
+  }
+
+  /* ── Message actions toolbar ── */
+
+  :where(n-chat-message) > :where(.n-chat-message-actions) {
+    opacity: 0;
+    transition: opacity var(--n-duration) var(--n-easing);
+  }
+
+  :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) {
+    opacity: 1;
+  }
+
+  :where(n-chat-message[hidden]) { display: none; }
+
+  /* ══════════════════════════════════════════════════
+     n-chat-message-text — rich text / markdown
+     ══════════════════════════════════════════════════ */
+
+  :where(n-chat-message-text) {
+    display: block;
+  }
+
+  /* ── Prose reset — typography inside rendered markdown ── */
+
+  :where(n-chat-message-text) :where(.n-chat-prose) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--n-chat-prose-gap);
+  }
+
+  /* Universal block margin reset — flexbox gap handles spacing,
+     so all block-level children must have zero margin */
+  :where(n-chat-message-text) :where(
+    p, h1, h2, h3, h4, h5, h6,
+    ul, ol, li,
+    blockquote, pre, hr,
+    div, figure, figcaption,
+    dl, dt, dd, details, summary
+  ) {
+    margin: 0;
+  }
+
+  :where(n-chat-message-text) :where(h1, h2, h3, h4, h5, h6) {
+    font-weight: 600;
+    line-height: 1.3;
+  }
+
+  :where(n-chat-message-text) :where(h1) { font-size: 1.4em; }
+  :where(n-chat-message-text) :where(h2) { font-size: 1.25em; }
+  :where(n-chat-message-text) :where(h3) { font-size: 1.1em; }
+
+  :where(n-chat-message-text) :where(ul, ol) {
+    padding-inline-start: 1.5em;
+  }
+
+  :where(n-chat-message-text) :where(li) {
+    margin-block: calc(var(--n-space) * 0.5);
+  }
+
+  :where(n-chat-message-text) :where(blockquote) {
+    padding-inline-start: calc(var(--n-space) * 3);
+    border-inline-start: 3px solid var(--n-border-muted);
+    color: var(--n-ink-muted);
+  }
+
+  :where(n-chat-message-text) :where(code) {
+    font-family: var(--n-font-mono);
+    font-size: 0.9em;
+    padding-block: 0.1em;
+    padding-inline: 0.3em;
+    background: var(--n-control);
+    border-radius: calc(var(--n-radius) * 0.5);
+  }
+
+  :where(n-chat-message-text) :where(pre) {
+    padding: calc(var(--n-space) * 2);
+    background: var(--n-control);
+    border-radius: calc(var(--n-radius) * 0.5);
+    overflow-x: auto;
+    scrollbar-width: thin;
+  }
+
+  :where(n-chat-message-text) :where(pre) :where(code) {
+    padding: 0;
+    background: transparent;
+    border-radius: 0;
+  }
+
+  :where(n-chat-message-text) :where(a) {
+    color: var(--n-ink-accent);
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+  }
 
-  /* Compact: single row — textarea and actions side by side */
+  :where(n-chat-message-text) :where(hr) {
+    border: none;
+    border-top: 1px solid var(--n-border-muted);
+  }
+
+  :where(n-chat-message-text[hidden]) { display: none; }
+
+  /* ══════════════════════════════════════════════════
+     n-chat-message-activity — typing / thinking
+     ══════════════════════════════════════════════════ */
+
+  :where(n-chat-message-activity) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--n-space);
+    color: var(--n-chat-activity-color);
+    font-size: var(--n-font-size-sm);
+    padding-block: var(--n-space);
+    align-self: flex-start;
+  }
+
+  :where(n-chat-message-activity) > :where(.n-chat-activity-row) {
+    display: inline-flex;
+    align-items: center;
+    gap: calc(var(--n-space) * 1.5);
+  }
+
+  :where(n-chat-message-activity) :where(.n-chat-activity-time) {
+    font-variant-numeric: tabular-nums;
+    min-width: 2.5em;
+  }
+
+  :where(n-chat-message-activity) :where(.n-chat-activity-sep) {
+    opacity: 0.4;
+  }
+
+  /* Animated dots */
+  :where(n-chat-message-activity) :where(.n-chat-activity-dots) {
+    display: inline-flex;
+    gap: 0.2em;
+    margin-inline-start: 0.25em;
+  }
+
+  :where(n-chat-message-activity) :where(.n-chat-activity-dots) > :where(i) {
+    display: block;
+    width: 0.25em;
+    height: 0.25em;
+    border-radius: 50%;
+    background: currentColor;
+    animation: n-chat-dot-pulse 1.2s ease-in-out infinite;
+  }
+
+  :where(n-chat-message-activity) :where(.n-chat-activity-dots) > :where(i:nth-child(2)) {
+    animation-delay: 0.2s;
+  }
+
+  :where(n-chat-message-activity) :where(.n-chat-activity-dots) > :where(i:nth-child(3)) {
+    animation-delay: 0.4s;
+  }
+
+  @keyframes n-chat-dot-pulse {
+    0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
+    30% { opacity: 1; transform: scale(1); }
+  }
+
+  /* Expandable state */
+  :where(n-chat-message-activity) > :where(.n-chat-activity-row) {
+    cursor: default;
+  }
+
+  [expandable]:where(n-chat-message-activity) > :where(.n-chat-activity-row) {
+    cursor: pointer;
+  }
+
+  [expandable]:where(n-chat-message-activity) > :where(.n-chat-activity-row)::before {
+    content: '▶';
+    font-size: 0.65em;
+    transition: transform var(--n-duration) var(--n-easing);
+  }
+
+  [expanded][expandable]:where(n-chat-message-activity) > :where(.n-chat-activity-row)::before {
+    transform: rotate(90deg);
+  }
+
+  :where(n-chat-message-activity) > :where(.n-chat-activity-content) {
+    padding-inline-start: calc(var(--n-space) * 3);
+    font-family: var(--n-font-mono);
+    font-size: var(--n-font-size-sm);
+    max-height: 20rem;
+    overflow-y: auto;
+    scrollbar-width: thin;
+  }
+
+  :where(n-chat-message-activity[hidden]) { display: none; }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(n-chat-message-activity) :where(.n-chat-activity-dots) > :where(i) {
+      animation: none;
+    }
+  }
+
+  /* ══════════════════════════════════════════════════
+     n-chat-message-seed — suggestion chips
+     ══════════════════════════════════════════════════ */
+
+  :where(n-chat-message-seed) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--n-space);
+    padding-block: var(--n-space);
+    align-self: flex-start;
+  }
+
+  :where(n-chat-message-seed)[aria-disabled="true"] {
+    pointer-events: none;
+  }
+
+  :where(n-chat-message-seed[hidden]) { display: none; }
+
+  /* ══════════════════════════════════════════════════
+     n-chat-message-genui — schema-rendered UI
+     ══════════════════════════════════════════════════ */
+
+  :where(n-chat-message-genui) {
+    display: block;
+    min-width: 0;
+  }
+
+  :where(n-chat-message-genui) > :where(.n-chat-genui-container) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--n-space);
+  }
+
+  :where(n-chat-message-genui) :where(.n-chat-genui-error) {
+    padding: var(--n-space);
+    color: var(--n-ink-danger);
+    font-size: var(--n-font-size-sm);
+  }
+
+  :where(n-chat-message-genui) :where(.n-chat-genui-preview) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: calc(var(--n-space) * 2);
+  }
+
+  :where(n-chat-message-genui[hidden]) { display: none; }
+
+  /* ══════════════════════════════════════════════════
+     n-chat-input-structured — multi-choice input
+     ══════════════════════════════════════════════════ */
+
+  :where(n-chat-input-structured) {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--n-space) * 2);
+    padding: calc(var(--n-space) * 3);
+    background: var(--n-card);
+    border-radius: var(--n-chat-bubble-radius);
+    align-self: stretch;
+  }
+
+  :where(n-chat-input-structured) > :where(.n-chat-structured-question) {
+    font-weight: 600;
+  }
+
+  :where(n-chat-input-structured) > :where(.n-chat-structured-options) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--n-space);
+  }
+
+  :where(n-chat-input-structured) > :where(.n-chat-structured-actions) {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--n-space);
+  }
+
+  :where(n-chat-input-structured)[aria-disabled="true"] {
+    pointer-events: none;
+  }
+
+  :where(n-chat-input-structured[hidden]) { display: none; }
+
+  /* ══════════════════════════════════════════════════
+     n-chat-input — composer
+     ══════════════════════════════════════════════════ */
+
+  :where(n-chat-input) {
+    display: flex;
+    flex: 1 1 0%;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  /* Compact: single row */
   :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. */
+  /* Textarea inside input — fully transparent, no padding */
   :where(n-chat-input) > :where(n-textarea) {
     --n-background: transparent;
     --n-background-hover: transparent;
@@ -104,6 +554,7 @@
     --n-border-color-hover: transparent;
     --n-border-color-active: transparent;
 
+    padding: 0;
     border: none;
     border-radius: 0;
     resize: none;
@@ -121,34 +572,25 @@
   }
 
   /* ── 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

@@ -1,2 +1,2 @@
-import { n as e, t } from "./chat-panel-element-CXPbtkyi.js";
-export { e as NChatInput, t as NChatPanel };
+import { a as e, c as t, d as n, f as r, i, l as a, m as o, n as s, o as c, p as l, r as u, s as d, t as f, u as p } from "./chat-input-structured-element-CbDnI4zv.js";
+export { n as NChatAvatar, r as NChatFeed, o as NChatInput, f as NChatInputStructured, p as NChatMessage, i as NChatMessageActivity, s as NChatMessageGenUI, u as NChatMessageSeed, e as NChatMessageText, a as NChatMessages, l as NChatPanel, c as renderInline, d as renderMarkdown, t as sanitizeHtml };

package/dist/register.d.ts

@@ -1,4 +1,13 @@
 import { NChatInput } from './chat-input-element.ts';
 import { NChatPanel } from './chat-panel-element.ts';
-export { NChatInput, NChatPanel };
+import { NChatFeed } from './feed/chat-feed-element.ts';
+import { NChatAvatar } from './avatar/chat-avatar-element.ts';
+import { NChatMessage } from './message/chat-message-element.ts';
+import { NChatMessages } from './message/chat-messages-element.ts';
+import { NChatMessageText } from './message/chat-message-text-element.ts';
+import { NChatMessageActivity } from './message/chat-message-activity-element.ts';
+import { NChatMessageSeed } from './message/chat-message-seed-element.ts';
+import { NChatMessageGenUI } from './message/chat-message-genui-element.ts';
+import { NChatInputStructured } from './message/chat-input-structured-element.ts';
+export { NChatInput, NChatPanel, NChatFeed, NChatAvatar, NChatMessage, NChatMessages, NChatMessageText, NChatMessageActivity, NChatMessageSeed, NChatMessageGenUI, NChatInputStructured, };
 //# sourceMappingURL=register.d.ts.map

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

package/dist/register.js

@@ -1,4 +1,4 @@
-import { n as e, t } from "./chat-panel-element-CXPbtkyi.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 };
+import { a as e, d as t, f as n, i as r, l as i, m as a, n as o, p as s, r as c, t as l, u } from "./chat-input-structured-element-CbDnI4zv.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", a), _("native-chat-panel", s), _("n-chat-feed", n), _("n-chat-avatar", t), _("n-chat-message", u), _("n-chat-messages", i), _("n-chat-message-text", e), _("n-chat-message-activity", r), _("n-chat-message-seed", c), _("n-chat-message-genui", o), _("n-chat-input-structured", l), _("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 { t as NChatAvatar, n as NChatFeed, a as NChatInput, l as NChatInputStructured, u as NChatMessage, r as NChatMessageActivity, o as NChatMessageGenUI, c as NChatMessageSeed, e as NChatMessageText, i as NChatMessages, s as NChatPanel };

package/package.json

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