@intentface/chat 0.1.2 → 0.2.1

package/README.md

@@ -5,7 +5,7 @@ for building AI chat interfaces, with no styling of their own.
 
 This is the Base UI model applied to chat: **the package owns behavior, you own
 every class.** There is no pre-styled `@intentface/chat` package. The demos on
-each [docs](https://intentface.dev/docs) page show how the parts fit together
+each [docs](https://ui.intentface.com) page show how the parts fit together
 and are meant to be copied and restyled.
 
 ## Status
@@ -101,7 +101,7 @@ directive and import fine anywhere.
 ## Docs
 
 Full guides, live demos, and the API reference at
-[intentface.dev/docs](https://intentface.dev/docs).
+[ui.intentface.com](https://ui.intentface.com).
 
 ## License
 

package/dist/composer/editor-dom.d.ts

@@ -9,12 +9,19 @@ export type ReadableNode = {
     getAttribute?: (name: string) => string | null;
 };
 export declare const toReadable: (node: Node) => ReadableNode;
+/** The writer marks its padding <br>; the reader recognizes it structurally. */
+export declare const PADDING_BREAK_ATTRIBUTE = "data-padding-break";
 export declare const readDocumentFromDom: (root: ReadableNode, resolveChip: (id: string) => ChipData | null, makeId?: () => string) => {
     doc: SegmentDoc;
     dirty: boolean;
 };
 /** Logical position of (node, offset), or null when the point isn't inside root. */
 export declare const logicalRangeFromDom: (root: ReadableNode, targetNode: ReadableNode, targetOffset: number) => number | null;
+/** DOM point for a logical position, preferring text-node points. */
+export declare const domPointFromLogical: (root: HTMLElement, position: number) => {
+    node: Node;
+    offset: number;
+};
 export type DomNodeSpec = {
     kind: "text";
     text: string;
@@ -32,16 +39,12 @@ export declare const documentToDomSpec: (doc: SegmentDoc) => DomNodeSpec[];
  * chip content. Returns the live id → element map for the portal layer.
  */
 export declare const renderDocumentToDom: (root: HTMLElement, doc: SegmentDoc) => Map<string, HTMLElement>;
-/** DOM point for a logical position, preferring text-node points. */
-export declare const domPointFromLogical: (root: HTMLElement, position: number) => {
-    node: Node;
-    offset: number;
-};
 export declare const readSelectionRange: (root: HTMLElement) => {
     start: number;
     end: number;
 } | null;
 export declare const writeCaretToDom: (root: HTMLElement, start: number, end?: number) => void;
+export declare const scrollCaretIntoView: (root: HTMLElement) => void;
 export type BadgeToken = {
     start: number;
     end: number;
@@ -52,4 +55,3 @@ export type BadgeToken = {
  * changed — the caller must restore the caret afterwards.
  */
 export declare const syncBadge: (root: HTMLElement, token: BadgeToken | null) => boolean;
-export declare const scrollCaretIntoView: (root: HTMLElement) => void;

package/dist/composer/editor-dom.js

@@ -3,14 +3,33 @@
 // minimal structural node view, so tests need no DOM); the materializers at
 // the bottom are thin real-DOM wrappers over the pure spec builder.
 //
+// One taxonomy, three walkers: classifyNode below is the single answer to
+// "what is this node?", and leafWidth the single answer to "how many logical
+// positions does it occupy?". The reader, logicalRangeFromDom and
+// domPointFromLogical all defer to them — when they disagree the caret and the
+// model desync, so the rule lives in exactly one place.
+//
 // Writer/reader pact for line breaks: every "\n" renders as <br>, plus one
 // padding <br> when the document is empty or ends with "\n" (an unpadded
-// trailing line is unreachable/zero-height). The reader inverts this by
-// dropping exactly one trailing "\n" when the last rendered node was a <br>.
-// Round-trips: "" ↔ <br>, "a\n" ↔ a<br><br>, "a\n\n" ↔ a<br><br><br>.
+// trailing line is unreachable/zero-height). The padding carries
+// data-padding-break, so the reader identifies it structurally rather than
+// inferring it from position — a native edit that strands it mid-document then
+// reads as scaffolding (dropped, dirty) instead of a phantom newline. Unmarked
+// trailing <br>s are the browser's own (Chrome keeps an emptied line box
+// alive); the trailing trim covers those too.
+// Round-trips: "" ↔ <br·pad>, "a\n" ↔ a<br><br·pad>, "a\n\n" ↔ a<br><br><br·pad>.
 import { nextChipId } from "./segments.js";
 const TEXT_NODE = 3;
 const ELEMENT_NODE = 1;
+export const toReadable = (node) => node;
+const childrenOf = (node) => Array.from(node.childNodes);
+// ---------------------------------------------------------------------------
+// Node taxonomy — the shared vocabulary. Every walker in this file switches on
+// a NodeClass rather than re-deriving node kinds from attributes, so they
+// cannot drift apart.
+// ---------------------------------------------------------------------------
+/** The writer marks its padding <br>; the reader recognizes it structurally. */
+export const PADDING_BREAK_ATTRIBUTE = "data-padding-break";
 // Elements whose appearance inside the editable means something rewrote our
 // flat structure (paste leftovers, extensions) — content still reads, but the
 // document gets renormalized from the model afterwards.
@@ -30,26 +49,94 @@ const BLOCK_NODE_NAMES = new Set([
     "H6",
     "TABLE",
 ]);
-export const toReadable = (node) => node;
-const chipIdOf = (node) => node.nodeType === ELEMENT_NODE ? (node.getAttribute?.("data-chip-id") ?? null) : null;
-// Non-editable elements without a chip identity are pure presentation (the
-// badge's hint span) — invisible to the model: the reader skips them and the
-// position mappers give them zero width.
-const isPresentationOnly = (node) => node.nodeType === ELEMENT_NODE &&
-    node.getAttribute?.("contenteditable") === "false" &&
-    chipIdOf(node) === null;
-// ---------------------------------------------------------------------------
-// Reader — DOM → segments. Adjacent text concatenates (fragmentation is
-// normalized logically, never via root.normalize() — WebKit collapses the
-// caret when the selection's text node gets merged), NBSP reads as a plain
-// space, badge spans and unknown inline elements are transparent wrappers,
-// chip spans resolve through the registry.
-// ---------------------------------------------------------------------------
-export const readDocumentFromDom = (root, resolveChip, makeId = nextChipId) => {
+// Precedence is load-bearing: a chip span is also contenteditable="false", so
+// the chip test must come before the presentation test.
+const classifyNode = (node) => {
+    if (node.nodeType === TEXT_NODE)
+        return { kind: "text", text: node.data ?? "" };
+    if (node.nodeType !== ELEMENT_NODE)
+        return { kind: "ignored" };
+    if (node.nodeName === "BR") {
+        const marked = (node.getAttribute?.(PADDING_BREAK_ATTRIBUTE) ?? null) !== null;
+        return marked ? { kind: "padding" } : { kind: "break" };
+    }
+    const chipId = node.getAttribute?.("data-chip-id") ?? null;
+    if (chipId !== null)
+        return { kind: "chip", id: chipId };
+    if (node.getAttribute?.("contenteditable") === "false")
+        return { kind: "presentation" };
+    if (BLOCK_NODE_NAMES.has(node.nodeName))
+        return { kind: "block" };
+    return { kind: "wrapper" };
+};
+/**
+ * Logical positions a leaf occupies. Containers are the sum of their children,
+ * so they are not leaves and answer 0 here — the walkers descend instead.
+ */
+const leafWidth = (classified) => {
+    switch (classified.kind) {
+        case "text":
+            return classified.text.length;
+        case "break":
+        case "chip":
+            return 1;
+        default:
+            return 0;
+    }
+};
+const tokenizeDom = (root) => {
+    const tokens = [];
+    let dirty = false;
+    const descend = (node) => {
+        for (const child of childrenOf(node))
+            visit(child);
+    };
+    const visit = (node) => {
+        const classified = classifyNode(node);
+        switch (classified.kind) {
+            case "text":
+                // Empty text nodes are editing residue — dropping them keeps the
+                // padding rules below looking at real neighbours.
+                if (classified.text.length > 0)
+                    tokens.push(classified);
+                return;
+            case "break":
+            case "padding":
+                tokens.push({ kind: classified.kind });
+                return;
+            case "chip":
+                tokens.push(classified);
+                return;
+            case "presentation":
+            case "ignored":
+                return;
+            case "block":
+                dirty = true;
+                descend(node);
+                return;
+            case "wrapper":
+                descend(node);
+                return;
+        }
+    };
+    descend(root);
+    return { tokens, dirty };
+};
+/**
+ * Drop the writer's trailing line-box scaffolding: our own marked padding, or
+ * an unmarked <br> the browser added to keep an emptied last line alive. Any
+ * padding token that survives this was stranded mid-document.
+ */
+const trimTrailingPadding = (tokens) => {
+    const last = tokens.at(-1);
+    if (last?.kind === "padding" || last?.kind === "break")
+        return tokens.slice(0, -1);
+    return tokens;
+};
+const foldTokens = (tokens, resolveChip, makeId) => {
     const doc = [];
     let dirty = false;
     let pendingText = "";
-    let lastWasBreak = false;
     const seenChipIds = new Set();
     const flushText = () => {
         if (pendingText.length === 0)
@@ -63,140 +150,156 @@ export const readDocumentFromDom = (root, resolveChip, makeId = nextChipId) => {
         }
         pendingText = "";
     };
-    const visit = (node) => {
-        if (node.nodeType === TEXT_NODE) {
-            const content = (node.data ?? "").replace(/\u00A0/g, " ");
-            if (content.length > 0) {
-                pendingText += content;
-                lastWasBreak = false;
-            }
-            return;
-        }
-        if (node.nodeType !== ELEMENT_NODE)
-            return;
-        if (node.nodeName === "BR") {
-            pendingText += "\n";
-            lastWasBreak = true;
-            return;
-        }
-        const chipId = chipIdOf(node);
-        if (chipId !== null) {
-            // Chip span content is presentation — never read. Unknown ids are
-            // leftovers from DOM the model doesn't know (mark dirty, skip);
-            // duplicated ids (clone paths) get a fresh identity.
-            const chip = resolveChip(chipId);
-            if (!chip) {
+    for (const token of trimTrailingPadding(tokens)) {
+        switch (token.kind) {
+            case "text":
+                // Adjacent text concatenates logically, never via root.normalize() —
+                // WebKit collapses the caret when the selection's node gets merged.
+                pendingText += token.text.replace(/\u00A0/g, " ");
+                break;
+            case "break":
+                pendingText += "\n";
+                break;
+            case "padding":
+                // Survived the trim, so it is not the trailing scaffolding: a native
+                // edit stranded it mid-document. Not content — repaint from the model.
                 dirty = true;
-                return;
+                break;
+            case "chip": {
+                // Unknown ids are leftovers from DOM the model doesn't know (mark
+                // dirty, skip); duplicated ids (clone paths) get a fresh identity.
+                const chip = resolveChip(token.id);
+                if (!chip) {
+                    dirty = true;
+                    break;
+                }
+                flushText();
+                const id = seenChipIds.has(token.id) ? makeId() : token.id;
+                seenChipIds.add(token.id);
+                doc.push({ type: "chip", id, chip });
+                break;
             }
-            flushText();
-            const id = seenChipIds.has(chipId) ? makeId() : chipId;
-            seenChipIds.add(chipId);
-            doc.push({ type: "chip", id, chip });
-            lastWasBreak = false;
-            return;
         }
-        // Presentation-only elements (the badge's hint span) never reach the model.
-        if (isPresentationOnly(node))
-            return;
-        // Badge span / unknown inline: transparent wrapper. Block elements also
-        // read through, but flag the document for renormalization.
-        if (BLOCK_NODE_NAMES.has(node.nodeName))
-            dirty = true;
-        for (const child of Array.from(node.childNodes))
-            visit(child);
-    };
-    for (const child of Array.from(root.childNodes))
-        visit(child);
-    // Invert the writer's padding <br>: one trailing "\n" is the padding, not
-    // content — but only when a <br> was actually the last rendered node.
-    if (lastWasBreak && pendingText.endsWith("\n")) {
-        pendingText = pendingText.slice(0, -1);
     }
     flushText();
     return { doc, dirty };
 };
+export const readDocumentFromDom = (root, resolveChip, makeId = nextChipId) => {
+    const { tokens, dirty: structureDirty } = tokenizeDom(root);
+    const { doc, dirty: contentDirty } = foldTokens(tokens, resolveChip, makeId);
+    return { doc, dirty: structureDirty || contentDirty };
+};
 // ---------------------------------------------------------------------------
-// Position mapping — DOM points ↔ logical positions. Chips count 1, <br>
-// counts 1 (it renders a "\n"), badge/unknown wrappers are transparent.
+// Position mapping — DOM points ↔ logical positions, inverses of each other
+// over leafWidth. Chips count 1, a real <br> counts 1 (it renders a "\n"),
+// padding and presentation count 0, wrappers are transparent.
 // ---------------------------------------------------------------------------
 /** Logical position of (node, offset), or null when the point isn't inside root. */
 export const logicalRangeFromDom = (root, targetNode, targetOffset) => {
     let position = 0;
     let found = null;
-    const visit = (node) => {
-        if (node === targetNode && node.nodeType !== TEXT_NODE && chipIdOf(node) === null) {
-            // Element point: offset is a child index — resolve by walking children
-            // until the index, then record.
-            const children = Array.from(node.childNodes).slice(0, targetOffset);
-            for (const child of children) {
-                if (measure(child))
-                    return true;
-            }
-            found = position;
-            return true;
-        }
-        if (node.nodeType === TEXT_NODE) {
-            if (node === targetNode) {
-                found = position + Math.min(targetOffset, (node.data ?? "").length);
-                return true;
-            }
-            position += (node.data ?? "").length;
-            return false;
-        }
-        if (node.nodeType !== ELEMENT_NODE)
-            return false;
-        if (node.nodeName === "BR") {
-            position += 1;
-            return false;
-        }
-        if (chipIdOf(node) !== null) {
-            // A point inside a chip clamps to the chip's start.
-            if (node === targetNode || contains(node, targetNode)) {
-                found = position;
-                return true;
-            }
-            position += 1;
-            return false;
-        }
-        // Presentation-only elements are zero-width; a point inside one clamps to
-        // its boundary.
-        if (isPresentationOnly(node)) {
-            if (node === targetNode || contains(node, targetNode)) {
-                found = position;
-                return true;
-            }
-            return false;
-        }
-        for (const child of Array.from(node.childNodes)) {
+    const contains = (parent, target) => childrenOf(parent).some((child) => child === target || contains(child, target));
+    // Element point: the offset is a child index — advance past that many
+    // children, then record where we landed.
+    const measureUpTo = (node, childIndex) => {
+        for (const child of childrenOf(node).slice(0, childIndex)) {
             if (visit(child))
                 return true;
         }
         return false;
     };
-    // Advance `position` past a whole subtree (used for element-point offsets).
-    const measure = (node) => visit(node);
-    const contains = (parent, target) => {
-        for (const child of Array.from(parent.childNodes)) {
-            if (child === target || contains(child, target))
+    const visit = (node) => {
+        const classified = classifyNode(node);
+        if (node === targetNode && classified.kind !== "text" && classified.kind !== "chip") {
+            if (measureUpTo(node, targetOffset))
                 return true;
+            found = position;
+            return true;
+        }
+        switch (classified.kind) {
+            case "text":
+                if (node === targetNode) {
+                    found = position + Math.min(targetOffset, classified.text.length);
+                    return true;
+                }
+                position += leafWidth(classified);
+                return false;
+            case "break":
+            case "padding":
+                position += leafWidth(classified);
+                return false;
+            // A point inside a chip or a hint span clamps to that node's start; they
+            // differ only in width.
+            case "chip":
+            case "presentation":
+                if (node === targetNode || contains(node, targetNode)) {
+                    found = position;
+                    return true;
+                }
+                position += leafWidth(classified);
+                return false;
+            case "wrapper":
+            case "block":
+                for (const child of childrenOf(node)) {
+                    if (visit(child))
+                        return true;
+                }
+                return false;
+            case "ignored":
+                return false;
         }
-        return false;
     };
     if (root === targetNode) {
-        const children = Array.from(root.childNodes).slice(0, targetOffset);
-        for (const child of children) {
-            if (measure(child))
-                return found;
-        }
-        return position;
+        return measureUpTo(root, targetOffset) ? found : position;
     }
-    for (const child of Array.from(root.childNodes)) {
+    for (const child of childrenOf(root)) {
         if (visit(child))
             return found;
     }
     return found;
 };
+/** DOM point for a logical position, preferring text-node points. */
+export const domPointFromLogical = (root, position) => {
+    let remaining = position;
+    const walk = (parent) => {
+        for (let index = 0; index < parent.childNodes.length; index++) {
+            const child = parent.childNodes[index];
+            if (!child)
+                continue;
+            const classified = classifyNode(toReadable(child));
+            switch (classified.kind) {
+                case "text": {
+                    const width = leafWidth(classified);
+                    if (remaining <= width)
+                        return { node: child, offset: remaining };
+                    remaining -= width;
+                    continue;
+                }
+                // Atomic children: the point is the gap before them. Padding is
+                // zero-width, so the caret can never be written past the model's end.
+                case "break":
+                case "padding":
+                case "chip":
+                    if (remaining === 0)
+                        return { node: parent, offset: index };
+                    remaining -= leafWidth(classified);
+                    continue;
+                case "presentation":
+                case "ignored":
+                    continue;
+                case "wrapper":
+                case "block": {
+                    const inner = walk(child);
+                    if (inner)
+                        return inner;
+                    continue;
+                }
+            }
+        }
+        return remaining === 0 ? { node: parent, offset: parent.childNodes.length } : null;
+    };
+    return walk(root) ?? { node: root, offset: root.childNodes.length };
+};
 export const documentToDomSpec = (doc) => {
     const specs = [];
     for (const segment of doc) {
@@ -236,6 +339,12 @@ const createChipSpan = (id) => {
     span.style.whiteSpace = "normal";
     return span;
 };
+const createBreak = (padding) => {
+    const br = document.createElement("br");
+    if (padding)
+        br.setAttribute(PADDING_BREAK_ATTRIBUTE, "");
+    return br;
+};
 /**
  * Render the canonical child list. Existing chip spans are reused by id —
  * moving a node preserves its React portal; recreating it would remount the
@@ -254,7 +363,7 @@ export const renderDocumentToDom = (root, doc) => {
         if (spec.kind === "text")
             return document.createTextNode(spec.text);
         if (spec.kind === "br")
-            return document.createElement("br");
+            return createBreak(spec.padding);
         const span = existingSpans.get(spec.id) ?? createChipSpan(spec.id);
         // Without an accessible boundary the chip reads as bare prose inside the
         // textbox — label + type gives AT an atomic token ("Rasmus, @ mention").
@@ -267,42 +376,10 @@ export const renderDocumentToDom = (root, doc) => {
     root.replaceChildren(...children);
     return chipElements;
 };
-/** DOM point for a logical position, preferring text-node points. */
-export const domPointFromLogical = (root, position) => {
-    let remaining = position;
-    const walk = (parent) => {
-        for (let index = 0; index < parent.childNodes.length; index++) {
-            const child = parent.childNodes[index];
-            if (!child)
-                continue;
-            if (child.nodeType === TEXT_NODE) {
-                const length = child.data.length;
-                if (remaining <= length)
-                    return { node: child, offset: remaining };
-                remaining -= length;
-                continue;
-            }
-            if (child.nodeType !== ELEMENT_NODE)
-                continue;
-            const element = child;
-            if (element.nodeName === "BR" || element.hasAttribute("data-chip-id")) {
-                if (remaining === 0)
-                    return { node: parent, offset: index };
-                remaining -= 1;
-                continue;
-            }
-            // Presentation-only (the badge's hint span): zero width, never a target.
-            if (isPresentationOnly(toReadable(element)))
-                continue;
-            // Transparent wrapper (badge span): descend.
-            const inner = walk(element);
-            if (inner)
-                return inner;
-        }
-        return remaining === 0 ? { node: parent, offset: parent.childNodes.length } : null;
-    };
-    return walk(root) ?? { node: root, offset: root.childNodes.length };
-};
+// ---------------------------------------------------------------------------
+// Selection — reading the caret out of the document and writing it back, plus
+// keeping it visible after a programmatic write.
+// ---------------------------------------------------------------------------
 export const readSelectionRange = (root) => {
     const selection = root.ownerDocument.getSelection();
     if (!selection || selection.rangeCount === 0)
@@ -324,6 +401,30 @@ export const writeCaretToDom = (root, start, end = start) => {
     const focus = end === start ? anchor : domPointFromLogical(root, end);
     selection.setBaseAndExtent(anchor.node, anchor.offset, focus.node, focus.offset);
 };
+// Native typing auto-scrolls; programmatic writes don't. Nudge only the nearest
+// scrollable ancestor (never scrollIntoView — it yanks the whole page).
+export const scrollCaretIntoView = (root) => {
+    const selection = root.ownerDocument.getSelection();
+    if (!selection || selection.rangeCount === 0)
+        return;
+    const rect = selection.getRangeAt(0).getBoundingClientRect();
+    let scroller = root;
+    while (scroller && scroller !== root.ownerDocument.body) {
+        const { overflowY } = getComputedStyle(scroller);
+        if ((overflowY === "auto" || overflowY === "scroll") &&
+            scroller.scrollHeight > scroller.clientHeight) {
+            break;
+        }
+        scroller = scroller.parentElement;
+    }
+    if (!scroller || scroller === root.ownerDocument.body)
+        return;
+    const view = scroller.getBoundingClientRect();
+    if (rect.top < view.top)
+        scroller.scrollTop -= view.top - rect.top;
+    else if (rect.bottom > view.bottom)
+        scroller.scrollTop += rect.bottom - view.bottom;
+};
 const badgeSpansOf = (root) => [
     ...root.querySelectorAll("[data-command-badge]"),
 ];
@@ -334,7 +435,7 @@ const unwrapBadgeSpan = (span) => {
     // Presentation children (the hint span) are the badge's own chrome — they
     // die with it rather than spilling into content.
     for (const child of [...span.children]) {
-        if (isPresentationOnly(toReadable(child)))
+        if (classifyNode(toReadable(child)).kind === "presentation")
             child.remove();
     }
     while (span.firstChild)
@@ -402,30 +503,3 @@ export const syncBadge = (root, token) => {
     range.insertNode(span);
     return true;
 };
-// ---------------------------------------------------------------------------
-// Caret visibility — native typing auto-scrolls; programmatic writes don't.
-// Nudge only the nearest scrollable ancestor (never scrollIntoView — it
-// yanks the whole page).
-// ---------------------------------------------------------------------------
-export const scrollCaretIntoView = (root) => {
-    const selection = root.ownerDocument.getSelection();
-    if (!selection || selection.rangeCount === 0)
-        return;
-    const rect = selection.getRangeAt(0).getBoundingClientRect();
-    let scroller = root;
-    while (scroller && scroller !== root.ownerDocument.body) {
-        const { overflowY } = getComputedStyle(scroller);
-        if ((overflowY === "auto" || overflowY === "scroll") &&
-            scroller.scrollHeight > scroller.clientHeight) {
-            break;
-        }
-        scroller = scroller.parentElement;
-    }
-    if (!scroller || scroller === root.ownerDocument.body)
-        return;
-    const view = scroller.getBoundingClientRect();
-    if (rect.top < view.top)
-        scroller.scrollTop -= view.top - rect.top;
-    else if (rect.bottom > view.bottom)
-        scroller.scrollTop += rect.bottom - view.bottom;
-};

package/dist/internal/collapsible.js

@@ -6,7 +6,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // presence attributes (data-open / data-closed) generated from state, plus
 // the animation contract: data-starting-style on the panel's first open
 // frame, data-ending-style while its exit animations run (hide/unmount waits
-// for them), and the panel's natural height as --collapsible-panel-height.
+// for them), and the panel's natural height as --panel-height. That value is
+// released once the open transition settles, so an open panel falls back to
+// `auto` and tracks content that grows underneath it.
 // Every part supports the Base UI render prop.
 import { createContext, use, useCallback, useId, useRef, useState, } from "react";
 import { useOpenTransition } from "./render/transition.js";
@@ -76,9 +78,10 @@ const CollapsiblePanel = ({ keepMounted = false, className, render, style, ...el
             {
                 id: panelId,
                 hidden,
-                style: height !== null
-                    ? { "--collapsible-panel-height": `${height}px` }
-                    : undefined,
+                // Once the open transition settles the height is released back to null, so the
+                // property stops being written and a `height: var(…)` consumer falls back to auto
+                // — that is what lets an open panel track content that grows.
+                style: height !== null ? { "--panel-height": `${height}px` } : undefined,
             },
             elementProps,
         ],

package/dist/internal/render/transition.d.ts

@@ -35,12 +35,6 @@ export type UseOpenTransitionOptions = {
     /** Called when the close animation completes, alongside the internal unmount. */
     onClosed?: () => void;
 };
-/**
- * Drives a Base UI-style open/close for an element: keeps it `mounted` through the exit,
- * reports `transitionStatus` (feed it to a stateAttributesMapping for data-open/closed/
- * starting-style/ending-style), optionally measures its natural `height`, and unmounts once
- * `element.getAnimations()` resolve. Composes useTransitionStatus + useOpenChangeComplete.
- */
 export declare const useOpenTransition: (open: boolean, ref: RefObject<HTMLElement | null>, { measureHeight, onClosed }?: UseOpenTransitionOptions) => {
     mounted: boolean;
     transitionStatus: TransitionStatus;

package/dist/internal/render/transition.js

@@ -176,24 +176,67 @@ export const useOpenChangeComplete = ({ enabled = true, open, ref, onComplete: o
  * starting-style/ending-style), optionally measures its natural `height`, and unmounts once
  * `element.getAnimations()` resolve. Composes useTransitionStatus + useOpenChangeComplete.
  */
+// Inline alignment can distort a scroll-based measurement, so it is neutralized for the read
+// and restored immediately after (Base UI does the same before measuring a collapsible).
+const ALIGNMENT_PROPERTIES = ["justify-content", "align-items", "align-content", "justify-items"];
+const measureNaturalHeight = (element) => {
+    const saved = ALIGNMENT_PROPERTIES.map((property) => [
+        property,
+        element.style.getPropertyValue(property),
+        element.style.getPropertyPriority(property),
+    ]);
+    for (const [property] of saved) {
+        element.style.setProperty(property, "initial", "important");
+    }
+    const naturalHeight = element.scrollHeight;
+    for (const [property, value, priority] of saved) {
+        if (value)
+            element.style.setProperty(property, value, priority);
+        else
+            element.style.removeProperty(property);
+    }
+    return naturalHeight;
+};
 export const useOpenTransition = (open, ref, { measureHeight = false, onClosed } = {}) => {
-    const { mounted, setMounted, transitionStatus } = useTransitionStatus(open);
+    // Both flags on: `idle` is the settled-open status the height release gates on, and
+    // deferring `ending` by a frame leaves one frame where a closing panel is still at its
+    // open size — which is where the close has to be measured.
+    const { mounted, setMounted, transitionStatus } = useTransitionStatus(open, true, true);
     const [height, setHeight] = useState(null);
-    // Measure on the transitional frames (before the CSS transition runs). scrollHeight is the
-    // natural content height regardless of any clamp the data-starting/ending-style sets.
     useIsoLayoutEffect(() => {
         if (!measureHeight)
             return;
-        if (transitionStatus === "starting" || transitionStatus === "ending") {
-            const element = ref.current;
-            if (element)
-                setHeight(element.scrollHeight);
+        const element = ref.current;
+        if (!element)
+            return;
+        // Closing: measure on the deferred frame. By the `ending` frame the consumer's closed
+        // styles have landed, so we would measure the clamped box instead of the natural one.
+        if (!open && mounted && (transitionStatus === "idle" || transitionStatus === "starting")) {
+            setHeight(measureNaturalHeight(element));
+            return;
         }
-    }, [measureHeight, transitionStatus, ref]);
+        // Opening: measure on the first frame, before the transition runs.
+        if (open && transitionStatus === "starting") {
+            setHeight(measureNaturalHeight(element));
+        }
+    }, [measureHeight, open, mounted, transitionStatus, ref]);
+    // Release the measurement once the open transition settles, so the panel tracks content
+    // that grows while it is open. With `height` null the custom property is never written, so
+    // a consumer's `height: var(--…)` is invalid at computed-value time and falls back to
+    // `auto`. The close re-measures a pixel value first, so it still animates from a number.
+    useOpenChangeComplete({
+        open: true,
+        ref,
+        enabled: measureHeight && open && mounted && transitionStatus === "idle",
+        onComplete: () => setHeight(null),
+    });
     useOpenChangeComplete({
         open,
         ref,
-        enabled: !open && mounted,
+        // Gated on `ending`, not merely `!open`: with the ending state deferred by a frame, an
+        // earlier check would call getAnimations() before the closed styles applied, find
+        // nothing running, and cut the exit off.
+        enabled: !open && mounted && transitionStatus === "ending",
         onComplete: () => {
             setMounted(false);
             onClosed?.();

package/dist/thread/geometry.d.ts

@@ -1,18 +1,23 @@
 export declare const prefersReducedMotion: () => boolean;
 export declare const resolveScrollBehavior: (behavior: ScrollBehavior) => ScrollBehavior;
 export declare const scrollContainerTo: (el: HTMLElement, top: number, behavior: ScrollBehavior) => void;
+export type ViewportBox = {
+    width: number;
+    height: number;
+};
+export declare const readViewportBox: (el: HTMLElement | null) => ViewportBox;
+export declare const sameViewportBox: (a: ViewportBox, b: ViewportBox) => boolean;
 export declare const wasPrepended: (mutations: MutationRecord[], previousFirst: Element | null, content: HTMLElement) => boolean;
 export declare const DEFAULT_BOTTOM_OFFSET = 128;
-export declare const DEFAULT_DOCK_SELECTOR = "[data-composer-context-window], [data-composer-container]";
-export declare const queryDockParts: (root: HTMLElement, dockSelector: string) => Element[];
+export declare const DOCK_SELECTOR = "[data-thread-composer]";
+export declare const queryDock: (root: HTMLElement) => HTMLElement | null;
 /**
- * Height (px) to reserve at the bottom for the dock parts matching
- * `dockSelector` — but NOT the command-list / ask-user panel. The dock is
- * bottom-anchored, so it sits in a fixed region while the panel grows upward
- * above it. The inset is measured from a single reference — the bottom-most
- * match's top to the root's bottom — not a sum of matches, so a taller part
- * stacked above must fit within COMPOSER_GAP. Returns null when no dock is
- * mounted yet.
+ * Height (px) to reserve at the bottom for the dock: its top edge down to the
+ * root's bottom, plus the content gap. Measured against the root's bottom
+ * rather than the slot's own height, so a dock that floats above the bottom
+ * edge still reserves the space beneath it. Parts that must NOT reserve space
+ * — the command-list / ask-user panel, the scroll button — are positioned out
+ * of the slot's flow. Returns null when the slot isn't mounted yet.
  */
-export declare const measureDockInset: (root: HTMLElement, dockSelector: string) => number | null;
+export declare const measureDockInset: (root: HTMLElement) => number | null;
 export declare const measureTopInset: (root: HTMLElement) => number;

package/dist/thread/geometry.js

@@ -11,6 +11,8 @@ export const resolveScrollBehavior = (behavior) => behavior === "smooth" && pref
 export const scrollContainerTo = (el, top, behavior) => {
     el.scrollTo({ top, behavior: resolveScrollBehavior(behavior) });
 };
+export const readViewportBox = (el) => el ? { width: el.clientWidth, height: el.clientHeight } : { width: 0, height: 0 };
+export const sameViewportBox = (a, b) => a.width === b.width && a.height === b.height;
 // A prepend = rows were added, nothing removed, and the previously-first row
 // is still connected but no longer first (older history loading in above).
 export const wasPrepended = (mutations, previousFirst, content) => previousFirst?.isConnected === true &&
@@ -22,36 +24,23 @@ export const DEFAULT_BOTTOM_OFFSET = 128;
 // Breathing room between the last line of content and the composer dock. The
 // bottom overlay spans it in the styled layer.
 const COMPOSER_GAP = 32;
-export const DEFAULT_DOCK_SELECTOR = "[data-composer-context-window], [data-composer-container]";
-// `dockSelector` is public API, so it may be an invalid selector string.
-// Degrade to "no dock parts" rather than letting querySelectorAll throw a
-// SyntaxError inside the layout effect (which would crash the render).
-export const queryDockParts = (root, dockSelector) => {
-    try {
-        return [...root.querySelectorAll(dockSelector)];
-    }
-    catch {
-        return [];
-    }
-};
+// The dock is the Thread.Composer slot — the one element the thread reserves
+// space for. Null until it mounts.
+export const DOCK_SELECTOR = "[data-thread-composer]";
+export const queryDock = (root) => root.querySelector(DOCK_SELECTOR);
 /**
- * Height (px) to reserve at the bottom for the dock parts matching
- * `dockSelector` — but NOT the command-list / ask-user panel. The dock is
- * bottom-anchored, so it sits in a fixed region while the panel grows upward
- * above it. The inset is measured from a single reference — the bottom-most
- * match's top to the root's bottom — not a sum of matches, so a taller part
- * stacked above must fit within COMPOSER_GAP. Returns null when no dock is
- * mounted yet.
+ * Height (px) to reserve at the bottom for the dock: its top edge down to the
+ * root's bottom, plus the content gap. Measured against the root's bottom
+ * rather than the slot's own height, so a dock that floats above the bottom
+ * edge still reserves the space beneath it. Parts that must NOT reserve space
+ * — the command-list / ask-user panel, the scroll button — are positioned out
+ * of the slot's flow. Returns null when the slot isn't mounted yet.
  */
-export const measureDockInset = (root, dockSelector) => {
-    let dockTop = null;
-    for (const part of queryDockParts(root, dockSelector)) {
-        const top = part.getBoundingClientRect().top;
-        if (dockTop === null || top > dockTop)
-            dockTop = top;
-    }
-    if (dockTop === null)
+export const measureDockInset = (root) => {
+    const dock = queryDock(root);
+    if (!dock)
         return null;
+    const dockTop = dock.getBoundingClientRect().top;
     return Math.round(root.getBoundingClientRect().bottom - dockTop + COMPOSER_GAP);
 };
 // Top inset reserved by the top overlay, measured straight off the rendered

package/dist/thread/thread.d.ts

@@ -37,17 +37,8 @@ export type ThreadRootProps = PrimitiveProps<"div"> & {
      * current, so leave it off unless older content actually loads in above.
      */
     preserveScrollOnPrepend?: boolean;
-    /**
-     * CSS selector for the bottom-docked parts the thread reserves space for.
-     * Every match is observed for resize, but the reserved inset is measured
-     * from a single reference — the bottom-most match's top edge, not a sum of
-     * matches — so a taller part stacked above it must fit within the content
-     * gap. Must be a valid CSS selector. Defaults to the styled composer's dock
-     * slots.
-     */
-    dockSelector?: string;
 };
-export declare const ThreadRoot: ({ autoScroll, preserveScrollOnPrepend, dockSelector, className, render, style, ...elementProps }: ThreadRootProps) => import("react").JSX.Element;
+export declare const ThreadRoot: ({ autoScroll, preserveScrollOnPrepend, className, render, style, ...elementProps }: ThreadRootProps) => import("react").JSX.Element;
 export type ThreadOverlayState = {
     /** Which edge this overlay marks, surfaced as data-thread-overlay. */
     direction: "top" | "bottom";

package/dist/thread/thread.js

@@ -12,7 +12,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { createContext, memo, use, useCallback, useEffect, useInsertionEffect, useLayoutEffect, useMemo, useRef, useSyncExternalStore, } from "react";
 import { useRefWithInit } from "../internal/render/useRefWithInit.js";
 import { useRenderElement } from "../internal/render/useRenderElement.js";
-import { DEFAULT_BOTTOM_OFFSET, DEFAULT_DOCK_SELECTOR, measureDockInset, measureTopInset, queryDockParts, resolveScrollBehavior, scrollContainerTo, wasPrepended, } from "./geometry.js";
+import { DEFAULT_BOTTOM_OFFSET, measureDockInset, measureTopInset, queryDock, readViewportBox, resolveScrollBehavior, sameViewportBox, scrollContainerTo, wasPrepended, } from "./geometry.js";
 import { createEdgeStore, createVisibilityStore, EMPTY_VISIBILITY, } from "./stores.js";
 // Latest-ref: read the current value from long-lived effects/callbacks without
 // re-subscribing them when it changes.
@@ -299,14 +299,24 @@ const useThreadScroll = (rootRef, mode, preserveScrollOnPrepend) => {
         // late, so a position check here would scroll on stale "at bottom" the
         // instant after the user wheels up, hijacking their scroll and re-arming
         // the follow in a loop they can't escape.
+        //
+        // A resize alone can't say whether content grew or the viewport did: the
+        // reserve tracks --thread-turn-area, so a container animating open resizes
+        // `content` every frame. Only a viewport change moves the scroller's own
+        // box — re-pin those instantly instead of smooth-scrolling a moving target
+        // for the length of the animation.
+        let viewport = readViewportBox(scrollRef.current);
         const follow = () => {
+            const previous = viewport;
+            viewport = readViewportBox(scrollRef.current);
+            const resized = !sameViewportBox(previous, viewport);
             if (skipNextResize) {
                 skipNextResize = false;
                 return;
             }
-            if (followingRef.current) {
-                scrollToBottom("smooth");
-            }
+            if (!followingRef.current)
+                return;
+            scrollToBottom(resized ? "instant" : "smooth");
         };
         land();
         const turns = new MutationObserver(land);
@@ -517,32 +527,34 @@ const useThreadScroll = (rootRef, mode, preserveScrollOnPrepend) => {
  *   (--thread-turn-min-height) to it; otherwise the reserve falls back to 0.
  * Recomputes only on root (window) / composer-dock resize — never per token.
  */
-const useThreadInsets = (rootRef, dockSelector) => {
+const useThreadInsets = (rootRef) => {
     useLayoutEffect(() => {
         const root = rootRef.current;
         if (!root)
             return;
+        // Read both insets before writing either property: a write followed by a forced
+        // layout read dips scrollHeight for a frame, and that scrollTop clamp is final.
         const apply = () => {
-            const bottomInset = measureDockInset(root, dockSelector);
+            const bottomInset = measureDockInset(root);
+            const topInset = measureTopInset(root);
+            const area = Math.max(0, Math.round(root.clientHeight - topInset - (bottomInset ?? DEFAULT_BOTTOM_OFFSET)));
             if (bottomInset !== null) {
                 root.style.setProperty("--thread-overlay-bottom-height", `${bottomInset}px`);
             }
-            const topInset = measureTopInset(root);
-            const area = Math.max(0, Math.round(root.clientHeight - topInset - (bottomInset ?? DEFAULT_BOTTOM_OFFSET)));
             root.style.setProperty("--thread-turn-area", `${area}px`);
         };
         apply();
         const observer = new ResizeObserver(apply);
         observer.observe(root);
-        for (const part of queryDockParts(root, dockSelector)) {
-            observer.observe(part);
-        }
+        const dock = queryDock(root);
+        if (dock)
+            observer.observe(dock);
         return () => observer.disconnect();
-    }, [dockSelector, rootRef]);
+    }, [rootRef]);
 };
-export const ThreadRoot = ({ autoScroll = "follow", preserveScrollOnPrepend = false, dockSelector = DEFAULT_DOCK_SELECTOR, className, render, style, ...elementProps }) => {
+export const ThreadRoot = ({ autoScroll = "follow", preserveScrollOnPrepend = false, className, render, style, ...elementProps }) => {
     const rootRef = useRef(null);
-    useThreadInsets(rootRef, dockSelector);
+    useThreadInsets(rootRef);
     const scroll = useThreadScroll(rootRef, autoScroll, preserveScrollOnPrepend);
     const element = useRenderElement("div", { className, render, style }, {
         ref: rootRef,

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@intentface/chat",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "description": "Headless chat UI primitives — unstyled compound components, hooks, and wire formats for building AI chat interfaces.",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
   "author": "Intentface",
-  "homepage": "https://intentface.dev",
+  "homepage": "https://ui.intentface.com",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Intentface/intentface-chat.git",
@@ -80,8 +80,8 @@
     "build": "rm -rf dist && tsc -p tsconfig.build.json && node scripts/add-dist-extensions.mjs && node scripts/smoke-dist.mjs",
     "test": "bun test",
     "typecheck": "tsc --noEmit",
-    "prepack": "bun run build && node scripts/swap-exports.mjs pre",
-    "postpack": "node scripts/swap-exports.mjs post"
+    "verify:release": "bun run typecheck && bun test && bun run build && publint",
+    "prepack": "bun run build"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
@@ -98,6 +98,7 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "axe-core": "^4.12.1",
+    "publint": "0.3.23",
     "typescript": "^5"
   },
   "publishConfig": {