@webjsdev/ui 0.3.16 → 0.4.0

package/packages/registry/components/message-scroller.ts

@@ -0,0 +1,470 @@
+/**
+ * Message scroller: the scroll container for a chat transcript. Tier-2. A
+ * port of shadcn's MessageScroller (the headless primitive in
+ * `@shadcn/react`, styled): it opens at the newest message, follows new ones
+ * while the reader is at the end, leaves them where they are once they have
+ * scrolled up, and offers a button back to the end.
+ *
+ * shadcn parity:
+ *   MessageScroller.Provider + MessageScroller
+ *                            → <ui-message-scroller auto-scroll default-scroll-position
+ *                                scroll-edge-threshold scroll-previous-item-peek>
+ *   MessageScrollerViewport  → <ui-message-scroller-viewport>
+ *   MessageScrollerContent   → <ui-message-scroller-content> (a role="log")
+ *   MessageScrollerItem (messageId, scrollAnchor)
+ *                            → <ui-message-scroller-item message-id scroll-anchor>
+ *   MessageScrollerButton direction, children
+ *                            → <ui-message-scroller-button direction="end" | "start" label>,
+ *                              its children in place of the arrow
+ *   useMessageScroller()     → the element: scrollToEnd(), scrollToStart(), scrollToMessage(id)
+ *   useMessageScrollerScrollable()
+ *                            → `scrollable` ({ start, end }) and `ui-scrollable-change`
+ *   useMessageScrollerVisibility()
+ *                            → `visibleMessageIds` and `ui-visibility-change`
+ *
+ * `default-scroll-position` is where it opens: "end" (the default), "start",
+ * or "last-anchor", the last item marked `scroll-anchor` at the top (a new
+ * question with the answer streaming in under it). The transcript is always
+ * served visible, so it reads with JavaScript off (the opening position is
+ * then the start, the browser's own). A scroller the browser builds on the
+ * client, which has never painted, is held invisible until that position
+ * applies, so the reader never sees a jump; one the server rendered moves
+ * to it once its script runs.
+ * After that, an item that ARRIVES marked `scroll-anchor` (the question a
+ * reader just sent) settles near the top with `scroll-previous-item-peek`
+ * pixels (64 by default, shadcn's) of the previous turn still in view, and stays there while the reply streams in below it: a
+ * tail spacer at the end of the list makes the room, and shrinks as the
+ * reply grows. Once the reply fills the viewport, `auto-scroll` follows it.
+ * Messages added at the top keep the reader's place through the browser's
+ * own scroll anchoring. `scroll-edge-threshold` (8 pixels by default,
+ * shadcn's) is how near an edge counts as being at it: what keeps the
+ * scroller following, and what shows the button.
+ *
+ * A11y (handled by the element, plus your part): the content is a
+ * `role="log"` that announces additions, and the button is named "Scroll to
+ * end" / "Scroll to start" (or its `label`) and is inert while there is
+ * nowhere to go. Your
+ * part: label the transcript (`aria-label` on `<ui-message-scroller-content>`).
+ *
+ * @example
+ * ```html
+ * <ui-message-scroller auto-scroll class="h-96">
+ *   <ui-message-scroller-viewport>
+ *     <ui-message-scroller-content aria-label="Conversation">
+ *       <ui-message-scroller-item message-id="m1">Hello</ui-message-scroller-item>
+ *       <ui-message-scroller-item message-id="m2" scroll-anchor>What is WebJs?</ui-message-scroller-item>
+ *     </ui-message-scroller-content>
+ *   </ui-message-scroller-viewport>
+ *   <ui-message-scroller-button></ui-message-scroller-button>
+ * </ui-message-scroller>
+ * ```
+ */
+import { WebComponent, html, prop, signal, nothing } from '@webjsdev/core';
+import { cn, takeAuthoredClass } from '../lib/utils.ts';
+import { buttonClass, type ButtonVariant, type ButtonSize } from './button.ts';
+
+/** The frame's classes (the element applies them). */
+export const messageScrollerClass = (): string =>
+  'cn-message-scroller group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden';
+/** The scrolling viewport (the element applies them). */
+export const messageScrollerViewportClass = (): string =>
+  'cn-message-scroller-viewport size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent data-[pending-scroll]:invisible';
+/** The message list (the element applies them). */
+export const messageScrollerContentClass = (): string =>
+  'cn-message-scroller-content flex h-max min-h-full flex-col';
+/** One message (the element puts them on the item itself). */
+export const messageScrollerItemClass = (): string =>
+  'cn-message-scroller-item min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]';
+/** The scroll button (the element applies them). */
+export const messageScrollerButtonClass = (): string =>
+  'cn-message-scroller-button absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180';
+
+const ROOT = 'ui-message-scroller';
+// How near an edge counts as being at it, in pixels, and how much of the
+// previous turn stays in view above a newly anchored one: shadcn's defaults
+// (DEFAULT_SCROLL_EDGE_THRESHOLD and DEFAULT_SCROLL_PREVIOUS_ITEM_PEEK).
+const EDGE = 8;
+const PEEK = 64;
+
+// shadcn's className lands on the element each part renders (the frame, the
+// viewport, the list, the button), so each host hands its authored class to
+// that element and becomes display: contents. A block host would otherwise
+// sit between the frame's flex column and the viewport, the viewport would
+// grow to its content, and nothing would scroll.
+function takeAuthored(part: HTMLElement): string | null {
+  return takeAuthoredClass(part, 'contents');
+}
+
+function rootOf(el: Element): UiMessageScroller | null {
+  return (typeof el.closest === 'function' ? el.closest(ROOT) : null) as UiMessageScroller | null;
+}
+
+// --------------------------------------------------------------------------
+// <ui-message-scroller>
+// --------------------------------------------------------------------------
+
+export class UiMessageScroller extends WebComponent({
+  autoScroll: prop(Boolean, { attribute: 'auto-scroll' }),
+  defaultScrollPosition: prop<'end' | 'start' | 'last-anchor'>(String, { attribute: 'default-scroll-position' }),
+  scrollEdgeThreshold: prop(Number, { attribute: 'scroll-edge-threshold' }),
+  scrollPreviousItemPeek: prop(Number, { attribute: 'scroll-previous-item-peek' }),
+}) {
+  // Served visible: a transcript must read with JavaScript off.
+  readonly pending = signal(false);
+  /** The edges the viewport can still scroll toward. */
+  scrollable = { start: false, end: false };
+  /** The messages on screen, by `message-id`. */
+  visibleMessageIds: string[] = [];
+  _following = true;
+  _opened = false;
+  _resize: ResizeObserver | null = null;
+  _visible: IntersectionObserver | null = null;
+  _shown = new Set<string>();
+  // Turn anchoring: the anchored items already placed, the one being held,
+  // the scroll position that holds it, and the tail spacer's height.
+  _anchored = new WeakSet<Element>();
+  _held: Element | null = null;
+  _heldTop = 0;
+  _spacerHeight = 0;
+  _growFrame = 0;
+
+  constructor() {
+    super();
+    this.autoScroll = false;
+    this.defaultScrollPosition = 'end';
+    this.scrollEdgeThreshold = EDGE;
+    this.scrollPreviousItemPeek = PEEK;
+  }
+
+  connectedCallback(): void {
+    // A scroller built in the browser has not painted yet, so it is held
+    // invisible until its opening position applies. One the server rendered
+    // has painted already (its frame is in the markup), and hiding it now
+    // would blank text the reader can see, so it moves in place instead.
+    if (!this._opened && typeof this.querySelector === 'function' && !this.querySelector('[data-slot="message-scroller"]')) this.pending.set(true);
+    super.connectedCallback?.();
+    queueMicrotask(() => this._setup());
+  }
+
+  _edge(): number {
+    const n = Number(this.scrollEdgeThreshold);
+    return Number.isFinite(n) && n >= 0 ? n : EDGE;
+  }
+
+  _peek(): number {
+    const n = Number(this.scrollPreviousItemPeek);
+    return Number.isFinite(n) && n >= 0 ? n : PEEK;
+  }
+
+  disconnectedCallback(): void {
+    cancelAnimationFrame(this._growFrame);
+    this._resize?.disconnect();
+    this._visible?.disconnect();
+    this._resize = null;
+    this._visible = null;
+    super.disconnectedCallback?.();
+  }
+
+  render() {
+    return html`<div data-slot="message-scroller" ?data-pending-scroll=${this.pending.get()} class=${cn(messageScrollerClass(), takeAuthored(this))}><slot></slot></div>`;
+  }
+
+  viewport(): HTMLElement | null {
+    return this.querySelector<HTMLElement>('[data-slot="message-scroller-viewport"]');
+  }
+
+  _content(): HTMLElement | null {
+    return this.querySelector<HTMLElement>('[data-slot="message-scroller-content"]');
+  }
+
+  _items(): UiMessageScrollerItem[] {
+    if (typeof this.querySelectorAll !== 'function') return [];
+    return Array.from(this.querySelectorAll<UiMessageScrollerItem>('ui-message-scroller-item')).filter((i) => rootOf(i) === this);
+  }
+
+  _setup(): void {
+    const viewport = this.viewport();
+    const content = this._content();
+    if (!viewport || !content) {
+      requestAnimationFrame(() => this._setup());
+      return;
+    }
+    viewport.addEventListener('scroll', this._onScroll, { passive: true });
+    // New or growing messages: follow them if the reader is at the end.
+    if (typeof ResizeObserver === 'function') {
+      // Following the end is decided at once, before the next frame's scroll
+      // event can read the grown list as "scrolled away". The spacer is fitted
+      // a frame later, since resizing it inside the observed content would
+      // otherwise loop the observer; its own resize then comes back here.
+      this._resize = new ResizeObserver(() => {
+        this._onGrow();
+        cancelAnimationFrame(this._growFrame);
+        this._growFrame = requestAnimationFrame(() => this._fitSpacer());
+      });
+      this._resize.observe(content);
+    }
+    if (typeof IntersectionObserver === 'function') {
+      this._visible = new IntersectionObserver(this._onIntersect, { root: viewport });
+      for (const item of this._items()) this._visible.observe(item);
+    }
+    requestAnimationFrame(() => this._open());
+  }
+
+  // The opening position, applied once the messages have laid out.
+  _open(): void {
+    const viewport = this.viewport();
+    if (!viewport) return;
+    const pos = this.defaultScrollPosition;
+    if (pos === 'start') viewport.scrollTop = 0;
+    else if (pos === 'last-anchor') {
+      const anchors = this._items().filter((i) => i.hasAttribute('scroll-anchor'));
+      const last = anchors[anchors.length - 1];
+      if (last) this._scrollToItem(last, 'start', 'auto');
+      else viewport.scrollTop = viewport.scrollHeight;
+    } else viewport.scrollTop = viewport.scrollHeight;
+    this._opened = true;
+    // The turns present at open are placed by the opening position.
+    for (const item of this._items()) if (item.hasAttribute('scroll-anchor')) this._anchored.add(item);
+    this._following = this._atEnd();
+    this.pending.set(false);
+    // The viewport draws its own pending flag, so it redraws with it.
+    this.querySelector<UiMessageScrollerViewport>('ui-message-scroller-viewport')?.requestUpdate?.();
+    this._measure();
+  }
+
+  _atEnd(): boolean {
+    const v = this.viewport();
+    return !!v && v.scrollHeight - v.scrollTop - v.clientHeight <= this._edge();
+  }
+
+  _onScroll = (): void => {
+    // A scroll the reader makes away from the end stops the following; one
+    // back to the end resumes it.
+    if (this._opened) this._following = this._atEnd();
+    this._measure();
+  };
+
+  _onGrow = (): void => {
+    if (!this._opened) return;
+    if (this.autoScroll && this._following) {
+      const v = this.viewport();
+      if (v) {
+        v.setAttribute('data-autoscrolling', '');
+        v.scrollTop = v.scrollHeight;
+        requestAnimationFrame(() => v.removeAttribute('data-autoscrolling'));
+      }
+    }
+    this._measure();
+  };
+
+  _measure(): void {
+    const v = this.viewport();
+    if (!v) return;
+    const edge = this._edge();
+    const next = { start: v.scrollTop > edge, end: v.scrollHeight - v.scrollTop - v.clientHeight > edge };
+    if (next.start !== this.scrollable.start || next.end !== this.scrollable.end) {
+      this.scrollable = next;
+      this.dispatchEvent(new CustomEvent('ui-scrollable-change', { bubbles: true, detail: { ...next } }));
+    }
+    for (const b of Array.from(this.querySelectorAll<UiMessageScrollerButton>('ui-message-scroller-button'))) b.requestUpdate?.();
+  }
+
+  _onIntersect = (entries: IntersectionObserverEntry[]): void => {
+    for (const e of entries) {
+      const id = (e.target as Element).getAttribute('message-id');
+      if (!id) continue;
+      if (e.isIntersecting) this._shown.add(id);
+      else this._shown.delete(id);
+    }
+    const ids = this._items().map((i) => i.getAttribute('message-id')).filter((id): id is string => !!id && this._shown.has(id));
+    this.visibleMessageIds = ids;
+    this.dispatchEvent(new CustomEvent('ui-visibility-change', { bubbles: true, detail: { visibleMessageIds: ids } }));
+  };
+
+  // An item that arrives after setup is tracked too.
+  _itemConnected(item: UiMessageScrollerItem): void {
+    this._visible?.observe(item);
+    // A new turn marked scroll-anchor settles near the top, a peek of the
+    // previous turn above it, as shadcn's does. Placed once per item, since
+    // an item can connect again when the list re-renders around it.
+    if (this._opened && item.hasAttribute('scroll-anchor') && !this._anchored.has(item)) {
+      this._anchored.add(item);
+      requestAnimationFrame(() => this._anchorTurn(item));
+    }
+  }
+
+  _spacer(): HTMLElement | null {
+    return this.querySelector<HTMLElement>('[data-message-scroller-spacer]');
+  }
+
+  // Scroll a new anchored turn to the top, keeping the peek of the turn
+  // before it, with room made below by the tail spacer when the conversation
+  // is still too short to scroll that far.
+  _anchorTurn(item: Element): void {
+    const v = this.viewport();
+    const content = this._content();
+    if (!v || !content || !item.isConnected) return;
+    const pad = parseFloat(getComputedStyle(content).paddingTop) || 0;
+    // Where the turn sits in the layout, read through offsetTop so a
+    // transform on it (an entrance sliding it up) does not move the target.
+    const listTop = v.scrollTop + content.getBoundingClientRect().top - v.getBoundingClientRect().top;
+    const top = listTop + (item as HTMLElement).offsetTop - content.offsetTop;
+    this._held = item;
+    this._heldTop = Math.max(0, top - pad - this._peek());
+    this._fitSpacer();
+    v.scrollTo({ top: this._heldTop, behavior: this._behavior() });
+  }
+
+  // The spacer fills exactly the room the held turn needs below it, so it
+  // shrinks as the reply streams in and the turn stays where it is. Once the
+  // reply fills the viewport the spacer is gone, and a following viewport
+  // (auto-scroll) takes over from the end.
+  _fitSpacer(): void {
+    const v = this.viewport();
+    const spacer = this._spacer();
+    if (!v || !spacer) return;
+    if (this._held && !this._held.isConnected) this._held = null;
+    const natural = v.scrollHeight - this._spacerHeight;
+    const next = this._held ? Math.max(0, Math.ceil(this._heldTop + v.clientHeight - natural)) : 0;
+    if (next === this._spacerHeight) return;
+    this._spacerHeight = next;
+    if (next === 0) this._held = null;
+    const content = this._content();
+    const gap = content ? parseFloat(getComputedStyle(content).rowGap) || 0 : 0;
+    spacer.hidden = next === 0;
+    spacer.style.height = `${next}px`;
+    // The list's flex gap would add itself above the spacer, so it is taken
+    // back. The spacer is never the browser's scroll anchor (overflow-anchor:
+    // none): it is the last thing in view, so the browser would keep IT in
+    // place as the reply grows above it, pushing the held turn up a line at
+    // a time.
+    spacer.style.marginTop = next > 0 ? `${-gap}px` : '';
+  }
+
+  _scrollToItem(item: Element, align: 'start' | 'center' | 'end' | 'nearest', behavior: ScrollBehavior): void {
+    const v = this.viewport();
+    if (!v) return;
+    const vr = v.getBoundingClientRect();
+    const ir = item.getBoundingClientRect();
+    let top = v.scrollTop + (ir.top - vr.top);
+    if (align === 'end') top -= vr.height - ir.height;
+    else if (align === 'center') top -= (vr.height - ir.height) / 2;
+    else if (align === 'nearest') {
+      if (ir.top >= vr.top && ir.bottom <= vr.bottom) return;
+      if (ir.bottom > vr.bottom) top -= vr.height - ir.height;
+    }
+    v.scrollTo({ top, behavior });
+  }
+
+  _behavior(): ScrollBehavior {
+    return typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth';
+  }
+
+  /** Scroll to the newest message, and follow new ones again. */
+  scrollToEnd(): void {
+    const v = this.viewport();
+    if (!v) return;
+    this._following = true;
+    v.scrollTo({ top: v.scrollHeight, behavior: this._behavior() });
+  }
+
+  /** Scroll to the oldest message. */
+  scrollToStart(): void {
+    this.viewport()?.scrollTo({ top: 0, behavior: this._behavior() });
+  }
+
+  /** Scroll the message with `id` into view. */
+  scrollToMessage(id: string, opts: { align?: 'start' | 'center' | 'end' | 'nearest'; behavior?: ScrollBehavior } = {}): void {
+    const item = this._items().find((i) => i.getAttribute('message-id') === id);
+    if (item) this._scrollToItem(item, opts.align ?? 'start', opts.behavior ?? this._behavior());
+  }
+}
+UiMessageScroller.register('ui-message-scroller');
+
+// --------------------------------------------------------------------------
+// <ui-message-scroller-viewport> and <ui-message-scroller-content>
+// --------------------------------------------------------------------------
+
+export class UiMessageScrollerViewport extends WebComponent {
+  render() {
+    const pending = rootOf(this)?.pending?.get() ?? false;
+    return html`<div data-slot="message-scroller-viewport" ?data-pending-scroll=${!!pending} class=${cn(messageScrollerViewportClass(), takeAuthored(this))}><slot></slot></div>`;
+  }
+}
+UiMessageScrollerViewport.register('ui-message-scroller-viewport');
+
+export class UiMessageScrollerContent extends WebComponent {
+  render() {
+    return html`<div
+      data-slot="message-scroller-content"
+      role="log"
+      aria-relevant="additions"
+      aria-label=${this.getAttribute?.('aria-label') || nothing}
+      class=${cn(messageScrollerContentClass(), takeAuthored(this))}
+    ><slot></slot><div data-message-scroller-spacer aria-hidden="true" hidden style="overflow-anchor: none"></div></div>`;
+  }
+}
+UiMessageScrollerContent.register('ui-message-scroller-content');
+
+// --------------------------------------------------------------------------
+// <ui-message-scroller-item>
+// --------------------------------------------------------------------------
+
+export class UiMessageScrollerItem extends WebComponent {
+  _authored: string | null = null;
+
+  connectedCallback(): void {
+    super.connectedCallback?.();
+    rootOf(this)?._itemConnected(this);
+  }
+
+  // An item is a flex child of the column, so it carries its own classes.
+  render() {
+    this._authored = takeAuthoredClass(this);
+    if (typeof this.setAttribute === 'function') {
+      this.setAttribute('class', cn(messageScrollerItemClass(), this._authored));
+      this.setAttribute('data-slot', 'message-scroller-item');
+    }
+    return html`<slot></slot>`;
+  }
+}
+UiMessageScrollerItem.register('ui-message-scroller-item');
+
+// --------------------------------------------------------------------------
+// <ui-message-scroller-button>
+// --------------------------------------------------------------------------
+
+export class UiMessageScrollerButton extends WebComponent({
+  direction: prop<'end' | 'start'>(String),
+  // The button's accessible name, for a transcript in another language.
+  label: String,
+  variant: String,
+  size: String,
+}) {
+  constructor() {
+    super();
+    this.direction = 'end';
+    this.variant = 'secondary';
+    this.size = 'icon-sm';
+  }
+
+  render() {
+    const root = rootOf(this);
+    const toStart = this.direction === 'start';
+    const active = !!root && (toStart ? root.scrollable.start : root.scrollable.end);
+    return html`<button
+      type="button"
+      data-slot="message-scroller-button"
+      data-direction=${toStart ? 'start' : 'end'}
+      data-variant=${this.variant}
+      data-size=${this.size}
+      data-active=${active ? 'true' : 'false'}
+      tabindex=${active ? nothing : '-1'}
+      aria-hidden=${active ? nothing : 'true'}
+      class=${cn(buttonClass({ variant: this.variant as ButtonVariant, size: this.size as ButtonSize }), messageScrollerButtonClass(), takeAuthored(this))}
+      @click=${() => (toStart ? root?.scrollToStart() : root?.scrollToEnd())}
+      aria-label=${this.label || nothing}
+    ><slot><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14"></path><path d="m19 12-7 7-7-7"></path></svg>${this.label ? '' : html`<span class="sr-only">${toStart ? 'Scroll to start' : 'Scroll to end'}</span>`}</slot></button>`;
+  }
+}
+UiMessageScrollerButton.register('ui-message-scroller-button');

package/packages/registry/components/message.ts

@@ -0,0 +1,69 @@
+/**
+ * Message: one entry in a conversation (a chat bubble with its avatar,
+ * header and footer), and the group that stacks several. Tier-1 class
+ * helper; compose with plain elements, and pair with the bubble helpers for
+ * the speech bubble itself.
+ *
+ * shadcn parity:
+ *   MessageGroup     → messageGroupClass()
+ *   Message          → messageClass(), with data-align="start" | "end"
+ *   MessageAvatar    → messageAvatarClass()
+ *   MessageContent   → messageContentClass()
+ *   MessageHeader    → messageHeaderClass()
+ *   MessageFooter    → messageFooterClass()
+ *
+ * `data-align="end"` on the message mirrors it to the inline end (the user's
+ * own messages), and the footer follows. Alignment is logical, so it flips
+ * under `dir="rtl"`.
+ *
+ * A11y (required for accessible output): render the conversation as a list
+ * (`<ol>` of messages, or `role="log"` on the container when new messages
+ * arrive live, which also makes them announced). Each message should say who
+ * sent it in text a screen reader reaches, the header or a visually hidden
+ * name, and an avatar image needs `alt` (or `alt=""` when the name is
+ * already in the header).
+ *
+ * Design tokens used: --muted, --muted-foreground.
+ *
+ * @example
+ * ```html
+ * <ol class=${messageGroupClass()} role="log" aria-label="Conversation">
+ *   <li class=${messageClass()} data-align="end">
+ *     <div class=${messageContentClass()}>
+ *       <div class=${messageHeaderClass()}>You</div>
+ *       <p>Can you ship it today?</p>
+ *     </div>
+ *   </li>
+ * </ol>
+ * ```
+ */
+
+/** The stack of messages. */
+export function messageGroupClass(): string {
+  return 'cn-message-group flex min-w-0 flex-col';
+}
+
+/** One message row. `data-align="end"` mirrors it to the inline end. */
+export function messageClass(): string {
+  return 'cn-message group/message relative flex w-full min-w-0 data-[align=end]:flex-row-reverse';
+}
+
+/** The sender's avatar beside the message. */
+export function messageAvatarClass(): string {
+  return 'cn-message-avatar flex w-fit shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-muted';
+}
+
+/** The column holding the header, the bubble and the footer. */
+export function messageContentClass(): string {
+  return 'cn-message-content flex w-full min-w-0 flex-col wrap-break-word';
+}
+
+/** The sender name and time above the bubble. */
+export function messageHeaderClass(): string {
+  return 'cn-message-header flex max-w-full min-w-0 items-center';
+}
+
+/** Actions or status below the bubble. */
+export function messageFooterClass(): string {
+  return 'cn-message-footer flex max-w-full min-w-0 items-center group-data-[align=end]/message:justify-end';
+}

package/packages/registry/components/native-select.ts

@@ -73,18 +73,18 @@ export type NativeSelectSize = 'default' | 'sm';
 // convention that every part has a class helper.
 
 export const nativeSelectWrapperClass = (): string =>
-  'group/native-select relative w-fit has-[select:disabled]:opacity-50';
+  'cn-native-select-wrapper group/native-select relative w-fit has-[select:disabled]:opacity-50';
 
 export function nativeSelectClass(): string {
   return cn(
-    'h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1 dark:bg-input/30 dark:hover:bg-input/50',
-    'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
-    'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
+    'cn-native-select outline-none disabled:pointer-events-none disabled:cursor-not-allowed',
+    'cn-native-select-part-2',
+    'cn-native-select-part-3',
   );
 }
 
 export const nativeSelectIconClass = (): string =>
-  'pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 text-muted-foreground opacity-50 select-none';
+  'cn-native-select-icon pointer-events-none absolute select-none';
 
 /** Option / optgroup styling: forces themed background even in dark mode. */
 export const nativeSelectOptionClass = (): string => 'bg-[Canvas] text-[CanvasText]';