@fusion.dev/helix-headless 0.162.1 → 0.164.0

package/dist/callout/root/callout-root.d.ts

@@ -15,8 +15,12 @@ declare const HelixHeadlessCallout_base: (new (...args: any[]) => import("@fusio
  * region around it.
  *
  * Set `dismissible` for a note a reader may put away, as Shoelace's `closable`
- * alert does. The button fires `helix-dismiss` and the callout stays until a
- * listener removes it, so the page decides whether it comes back.
+ * alert does. The button fires `helix-dismiss`, and unless a listener cancels
+ * it the callout hides itself: `open` turns false, `:state(exiting)` holds
+ * while its exit animations run, and then it is `hidden`. Remove it in your
+ * listener to take it out of the page, or set `open` to show it again, which
+ * holds `:state(entering)` while it comes back. Focus on its dismiss button
+ * moves to the next callout's, or to the tab stop beside it, once it hides.
  *
  * A callout sets a passage apart inside a document and is read where it sits.
  * For page-level chrome above the masthead that is a live region and can be
@@ -33,13 +37,19 @@ declare const HelixHeadlessCallout_base: (new (...args: any[]) => import("@fusio
  * @slot heading - A heading above the content.
  * @slot icon - Replaces the icon chosen by `tone`.
  *
- * @event {HelixDismissEvent} helix-dismiss - The dismiss button was pressed. The callout does not remove itself, so remove it in response. Cancelable.
+ * @event {HelixDismissEvent} helix-dismiss - The dismiss button was pressed. Unless a listener cancels it, the callout hides itself, and a listener may remove it instead. Cancelable: cancel it to keep the callout showing.
  *
  * @csspart content - The content region.
  * @csspart dismiss - The button that dismisses the callout, shown when `dismissible` is set.
  * @csspart dismiss-mark - The cross on the dismiss button, shown when the `dismiss-icon` slot is empty.
  * @csspart icon - The icon region, an image named for the tone.
  * @csspart icon-mark - The icon for the tone, shown when no icon is slotted.
+ *
+ * @cssstate closed - While `open` is false: the callout was dismissed, and is leaving or hidden.
+ * @cssstate entering - While a callout shown again by `open` runs its entrance animations.
+ * @cssstate exiting - While a dismissed callout runs its exit animations, before it is hidden.
+ * @cssstate has-heading - Something is slotted into `heading`.
+ * @cssstate has-icon - An icon of your own is slotted into `icon`, in place of the tone's.
  */
 export declare class HelixHeadlessCallout extends HelixHeadlessCallout_base {
     /**
@@ -47,7 +57,6 @@ export declare class HelixHeadlessCallout extends HelixHeadlessCallout_base {
      * `registerWords('de', { 'helix-callout': { toneLabels: { danger: 'Fehler' } } })`.
      */
     static words: string;
-    protected willUpdate(changed: PropertyValues): void;
     /**
      * The dismiss button's name, read by screen readers, with `{label}` for
      * what the callout is called: its heading, or the tone's name where it has
@@ -58,6 +67,23 @@ export declare class HelixHeadlessCallout extends HelixHeadlessCallout_base {
      * read as written.
      */
     dismissLabel: string;
+    /** Which journey is the latest, so an entrance settling late leaves an exit alone. */
+    private turn;
+    /** Hidden from a reader once hidden, for the focus hand-off. */
+    protected get present(): boolean;
+    /**
+     * Hides the callout once a dismissal stands, unless the page removed it in
+     * its listener, which is the page's answer and leaves `open` as it was.
+     */
+    dismiss(): boolean;
+    protected willUpdate(changed: PropertyValues): void;
+    /**
+     * Whether the callout is showing. A dismissal nobody canceled turns it
+     * false and the callout hides itself, and setting it true shows the callout
+     * again. Not reflected: open is the resting state, so an `open` attribute
+     * would appear on markup a server sent without it.
+     */
+    open: boolean;
     /**
      * What kind of attention the passage needs.
      *
@@ -116,6 +142,19 @@ export declare class HelixHeadlessCallout extends HelixHeadlessCallout_base {
      */
     private dismissName;
     protected firstUpdated(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    /**
+     * The way out after a dismissal, or back in after `open` is set again.
+     *
+     * **Hidden only once the exit has run**, since a hidden element draws no
+     * animation: `:state(exiting)` holds until every animation on the callout
+     * has finished, or two frames where it has none, and then `hidden` takes it
+     * out of the page and out of the accessibility tree. Shown again at once,
+     * with `:state(entering)` while it arrives.
+     */
+    private journey;
+    /** Says which regions hold something, one call apiece so each pairs with its `@cssstate`. */
+    private readonly readRegions;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/callout/root/callout-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, drawDismiss, drawDismissGlyph, formatWords, HelixElement, hostAria, MixinDismissible, slottedWords, TONE_MARKS, toneMark, words, wordsConverter, } from '@fusion.dev/helix-core';
+import { animationsSettled, customElement, drawDismiss, drawDismissGlyph, formatWords, HelixElement, hostAria, MixinDismissible, slottedWords, TONE_MARKS, toneMark, words, wordsConverter, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
@@ -12,6 +12,8 @@ let HelixHeadlessCallout = class HelixHeadlessCallout extends MixinDismissible(H
     constructor() {
         super(...arguments);
         this.dismissLabel = 'Dismiss {label}';
+        this.turn = 0;
+        this.open = true;
         this.toneLabel = '';
         this.toneLabels = {
             danger: 'Error',
@@ -20,14 +22,34 @@ let HelixHeadlessCallout = class HelixHeadlessCallout extends MixinDismissible(H
             success: 'Success',
             warning: 'Warning',
         };
+        this.readRegions = () => {
+            const filled = (name) => {
+                const slot = this.renderRoot?.querySelector(`slot[name="${name}"]`);
+                return (slot?.assignedNodes({ flatten: true }) ?? []).some((node) => node.parentNode !== slot &&
+                    (node.nodeType === Node.ELEMENT_NODE || node.textContent?.trim() !== ''));
+            };
+            this.toggleState('has-heading', filled('heading'));
+            this.toggleState('has-icon', filled('icon'));
+        };
     }
     static { this.words = 'helix-callout'; }
+    get present() {
+        return this.isConnected && !this.hasAttribute('hidden');
+    }
+    dismiss() {
+        const stands = super.dismiss();
+        if (stands && this.isConnected) {
+            this.open = false;
+        }
+        return stands;
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { role: 'note' });
+        this.toggleState('closed', !this.open);
     }
     renderIcon(icon, _label) {
-        return html `<slot name="icon" aria-hidden="true">
+        return html `<slot name="icon" aria-hidden="true" @slotchange=${this.readRegions}>
       <svg part="icon-mark" fill="currentColor" viewBox=${icon.viewBox} aria-hidden="true">
         ${unsafeSVG(icon.content)}
       </svg>
@@ -48,6 +70,37 @@ let HelixHeadlessCallout = class HelixHeadlessCallout extends MixinDismissible(H
         super.firstUpdated(changed);
         this.finishHydration();
     }
+    updated(changed) {
+        super.updated(changed);
+        this.readRegions();
+        if (changed.has('open') && changed.get('open') !== undefined) {
+            this.journey();
+        }
+        else if (changed.has('open') && !this.open) {
+            this.setAttribute('hidden', '');
+        }
+    }
+    journey() {
+        this.turn += 1;
+        const turn = this.turn;
+        const open = this.open;
+        this.toggleState('entering', open);
+        this.toggleState('exiting', !open);
+        if (open) {
+            this.removeAttribute('hidden');
+        }
+        void animationsSettled(this).then(() => {
+            if (turn !== this.turn) {
+                return;
+            }
+            this.toggleState('entering', false);
+            this.toggleState('exiting', false);
+            if (!open) {
+                this.setAttribute('hidden', '');
+                this.handFocusOn();
+            }
+        });
+    }
     render() {
         const tone = this.tone === 'neutral' ? 'neutral' : toneMark(this.tone) ? (this.tone ?? 'info') : 'info';
         const { icon } = toneMark(tone) ?? TONE_MARKS.info;
@@ -69,6 +122,9 @@ __decorate([
     words,
     property({ attribute: 'dismiss-label' })
 ], HelixHeadlessCallout.prototype, "dismissLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessCallout.prototype, "open", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessCallout.prototype, "tone", void 0);

package/dist/canvas/index.d.ts

@@ -1,4 +1,4 @@
 export { HelixHeadlessCanvasEdge } from './edge/canvas-edge.js';
 export { HelixHeadlessCanvasNode } from './node/canvas-node.js';
-export type { CanvasDocument, CanvasEdge, CanvasEdgeProps, CanvasEnd, CanvasNode, CanvasNodeProps, CanvasPath, CanvasSide, CanvasTone, } from './root/canvas-root.js';
+export type { CanvasDocument, CanvasEdge, CanvasEdgeProps, CanvasEnd, CanvasNode, CanvasNodeProps, CanvasPath, CanvasRoute, CanvasRouteEnds, CanvasSide, CanvasTone, } from './root/canvas-root.js';
 export { fromJsonCanvas, HelixHeadlessCanvas } from './root/canvas-root.js';

package/dist/canvas/root/canvas-document.d.ts

@@ -91,6 +91,39 @@ export declare const port: (node: CanvasNode, side: CanvasSide) => {
 };
 /** How a connector travels between the two cards it joins. */
 export type CanvasPath = 'curve' | 'straight' | 'step';
+/** What a board's `edgeRoute` is given for one connection, in the board's own units. */
+export interface CanvasRouteEnds {
+    /** The connection. */
+    edge: CanvasEdge;
+    /** Where it arrives, on the side of the card it arrives at. */
+    end: {
+        x: number;
+        y: number;
+    };
+    /** The side of the card it leaves. */
+    fromSide: CanvasSide;
+    /** The route the board would draw: the connection's `path`, or the board's. */
+    path: CanvasPath;
+    /** Where it leaves, on the side of the card it leaves. */
+    start: {
+        x: number;
+        y: number;
+    };
+    /** The side of the card it arrives at. */
+    toSide: CanvasSide;
+}
+/**
+ * Draws a connection's line: its SVG path from `start` to `end`, and where its
+ * label sits, the middle of the two ends where it says nothing. Nothing back
+ * draws the board's own.
+ */
+export type CanvasRoute = (ends: CanvasRouteEnds) => {
+    d: string;
+    mid?: {
+        x: number;
+        y: number;
+    } | undefined;
+} | undefined;
 /** A point in the document's own units. */
 type Point = {
     x: number;

package/dist/canvas/root/canvas-root.d.ts

@@ -1,7 +1,7 @@
 import { type CanvasView, HelixElement, type ViewportPanDetail, type ViewportWay, type ViewportZoomDetail } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
-import { type CanvasDocument, type CanvasTone } from './canvas-document.js';
-export type { CanvasDocument, CanvasEdge, CanvasEdgeProps, CanvasEnd, CanvasNode, CanvasNodeProps, CanvasPath, CanvasSide, CanvasTone, } from './canvas-document.js';
+import { type CanvasDocument, type CanvasRoute, type CanvasTone } from './canvas-document.js';
+export type { CanvasDocument, CanvasEdge, CanvasEdgeProps, CanvasEnd, CanvasNode, CanvasNodeProps, CanvasPath, CanvasRoute, CanvasRouteEnds, CanvasSide, CanvasTone, } from './canvas-document.js';
 export { fromJsonCanvas } from './canvas-document.js';
 declare const HelixHeadlessCanvas_base: (new (...args: any[]) => import("@fusion.dev/helix-core").ViewportElement) & typeof HelixElement;
 /**
@@ -92,6 +92,17 @@ declare const HelixHeadlessCanvas_base: (new (...args: any[]) => import("@fusion
  * connection is a new element, and React discards an element the board adds to
  * its markup on the next render, so you write the connection.
  *
+ * **`edgeRoute` draws the connections' lines your own way**: a function from
+ * where a line leaves and arrives, and the sides it does, to its SVG path, for
+ * a route such as one that bends around the cards between. What it returns
+ * is the line drawn, the line pressed and focused, and the one an arrowhead
+ * sits at the end of. Nothing back draws the board's own.
+ *
+ * Add `minimap` to `controls` for a picture of the whole board in a corner:
+ * each card as a box, and a frame around what is on screen. A press or a drag
+ * on it brings that place to the middle of the view. It is for a pointer, and
+ * a screen reader skips it: the arrow keys and `show()` reach every card.
+ *
  * Cards and connections are `helix-canvas-node` and `helix-canvas-edge`
  * elements, so they are in the served markup whichever renderer wrote them. The
  * library fetches nothing, and an array passed to an element is missing from
@@ -148,6 +159,9 @@ declare const HelixHeadlessCanvas_base: (new (...args: any[]) => import("@fusion
  * @csspart label-editor - The field for editing a connection's label or a group's name, placed over that text.
  * @csspart live - A live region that screen readers announce while a connection is being made.
  * @csspart marquee - The box a Shift-drag across the empty board draws, which selects the cards it touches.
+ * @csspart minimap - The picture of the whole board, under `controls="minimap"`.
+ * @csspart minimap-node - One card in the minimap.
+ * @csspart minimap-view - The frame in the minimap around what is on screen.
  * @csspart pan-down - The button that moves the board down.
  * @csspart pan-end - The button that moves the board toward the end of a line of text: right in English.
  * @csspart pan-start - The button that moves the board toward the start of a line of text: left in English.
@@ -210,6 +224,15 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
     controlsLabel: string;
     /** What screen readers hear after a copy, with `{count}` for the cards copied. */
     copiedLabel: string;
+    /**
+     * Draws every connection's line: a function from where it leaves and
+     * arrives, and the sides it does, to its SVG path and where its label sits.
+     *
+     * Absent, or returning nothing for a connection, draws the board's own
+     * route. A function that throws draws the board's own too, and the error is
+     * reported to the page as an uncaught one. Set it as a property.
+     */
+    edgeRoute?: CanvasRoute;
     /** The board's name where `label` is empty. */
     fallbackLabel: string;
     /**
@@ -702,6 +725,8 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
      * both its cards are on the board; nothing where either is not.
      */
     private geometryOf;
+    /** One connection's line, by `edgeRoute` where it draws one, and by the board's own where not. */
+    private draw;
     /** The card an event came from, wherever inside it the event began. */
     private cardOf;
     /**
@@ -1244,6 +1269,29 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
      * the card a keyboard reader is on.
      */
     private renderDraft;
+    /** The part of the document on screen, in its own units. */
+    private get onScreen();
+    /** What the minimap shows: every card and what is on screen, with room around them. */
+    private get minimapArea();
+    /**
+     * A press or a drag on the minimap, which brings the place under it to the
+     * middle of the view.
+     *
+     * **The point is read through the picture's own scale**: the area is drawn
+     * whole and centered in the box, so the box's spare width or height is split
+     * either side of it.
+     */
+    private readonly handleMinimapPointer;
+    /**
+     * The minimap, under `controls="minimap"`: each card as a box, and a frame
+     * around what is on screen.
+     *
+     * **A picture for a pointer**, hidden from screen readers and taking no
+     * focus, as a map's own overview is: the arrow keys and `show()` already take
+     * a keyboard to any card, and a second way that says nothing a reader can
+     * use would be a stop that does nothing.
+     */
+    private renderMinimap;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/canvas/root/canvas-root.js

@@ -733,6 +733,35 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.handleSlotChange = () => {
             this.requestUpdate();
         };
+        this.handleMinimapPointer = (event) => {
+            if (event.type === 'pointermove' && (event.buttons & 1) === 0) {
+                return;
+            }
+            const picture = event.currentTarget;
+            if (event.type === 'pointerdown') {
+                if (event.button !== 0) {
+                    return;
+                }
+                capturePointer(picture, event.pointerId);
+            }
+            event.preventDefault();
+            const area = this.minimapArea;
+            const shown = picture.getBoundingClientRect();
+            const scale = Math.min(shown.width / area.width, shown.height / area.height) || 1;
+            const point = {
+                x: area.x + (event.clientX - shown.left - (shown.width - area.width * scale) / 2) / scale,
+                y: area.y + (event.clientY - shown.top - (shown.height - area.height * scale) / 2) / scale,
+            };
+            const board = extent(this.nodes);
+            const { zoom } = this.at;
+            this.direct = event.type === 'pointermove';
+            this.touched = true;
+            this.at = {
+                ...this.at,
+                x: this.box.width / 2 - (point.x - board.x + MARGIN) * zoom,
+                y: this.box.height / 2 - (point.y - board.y + MARGIN) * zoom,
+            };
+        };
     }
     static { this.words = 'helix-canvas'; }
     static { this.shadowRootOptions = {
@@ -1120,9 +1149,25 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         if (!from || !to) {
             return undefined;
         }
-        const drawn = connector(edge, onPlane(from, origin), onPlane(to, origin), edge.path ?? this.path ?? 'curve', heads(edge));
+        const drawn = this.draw(edge, onPlane(from, origin), onPlane(to, origin), edge.path ?? this.path ?? 'curve', heads(edge));
         return { ...drawn, from, to };
     }
+    draw(edge, from, to, path, drawnHeads) {
+        if (this.edgeRoute) {
+            const { end, fromSide, start, toSide } = ends(edge, from, to);
+            let own;
+            try {
+                own = this.edgeRoute({ edge, end, fromSide, path, start, toSide });
+            }
+            catch (error) {
+                globalThis.reportError?.(error);
+            }
+            if (own?.d) {
+                return { d: own.d, mid: own.mid ?? { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 } };
+            }
+        }
+        return connector(edge, from, to, path, drawnHeads);
+    }
     cardOf(event) {
         return event
             .composedPath()
@@ -2134,7 +2179,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         if (target) {
             const reversed = linking.moving === 'from';
             const [from, to] = reversed ? [target, anchor] : [anchor, target];
-            const drawn = connector({
+            const drawn = this.draw({
                 fromNode: from.id,
                 fromSide: reversed ? linking.toSide : linking.side,
                 id: '',
@@ -2157,6 +2202,53 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         }
         return nothing;
     }
+    get onScreen() {
+        const board = extent(this.nodes);
+        const { height, width } = this.box;
+        const { x, y, zoom } = this.at;
+        return {
+            height: height / zoom,
+            width: width / zoom,
+            x: board.x - MARGIN - x / zoom,
+            y: board.y - MARGIN - y / zoom,
+        };
+    }
+    get minimapArea() {
+        const board = extent(this.nodes);
+        const view = this.onScreen;
+        const x = Math.min(board.x, view.x);
+        const y = Math.min(board.y, view.y);
+        const width = Math.max(board.x + board.width, view.x + view.width) - x;
+        const height = Math.max(board.y + board.height, view.y + view.height) - y;
+        const room = Math.max(width, height) * 0.05;
+        return {
+            height: height + room * 2,
+            width: width + room * 2,
+            x: x - room,
+            y: y - room,
+        };
+    }
+    renderMinimap() {
+        const nodes = this.nodes;
+        if (!this.drawsControls('minimap') || nodes.length === 0) {
+            return nothing;
+        }
+        const area = this.minimapArea;
+        const view = this.onScreen;
+        return html `<svg
+      part="minimap"
+      aria-hidden="true"
+      height="120"
+      preserveAspectRatio="xMidYMid meet"
+      viewBox=${`${area.x} ${area.y} ${area.width} ${area.height}`}
+      width="160"
+      @pointerdown=${this.handleMinimapPointer}
+      @pointermove=${this.handleMinimapPointer}
+    >
+      ${nodes.map((node) => svg `<rect part="minimap-node" data-group=${node.type === 'group' ? '' : nothing} x=${node.x} y=${node.y} width=${node.width} height=${node.height} />`)}
+      ${svg `<rect part="minimap-view" x=${view.x} y=${view.y} width=${view.width} height=${view.height} />`}
+    </svg>`;
+    }
     render() {
         const nodes = this.nodes;
         const drawn = extent(nodes);
@@ -2219,7 +2311,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         <slot name="empty"></slot>
         ${this.renderGestures()}
       </div>
-      ${this.renderControls()}
+      ${this.renderControls()} ${this.renderMinimap()}
       <span part="live" role="status">${this.said}</span>
       <div part="footer">
         <slot name="footer"></slot>
@@ -2255,6 +2347,9 @@ __decorate([
     words,
     property({ attribute: 'copied-label' })
 ], HelixHeadlessCanvas.prototype, "copiedLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessCanvas.prototype, "edgeRoute", void 0);
 __decorate([
     words,
     property({ attribute: 'fallback-label' })

package/dist/chat/composer/chat-composer.js

@@ -113,7 +113,7 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
         }
         const invalid = this.touched && !this.internals.validity.valid;
         this.toggleState('invalid', invalid);
-        this.internals.ariaInvalid = invalid ? 'true' : null;
+        this.internals.ariaInvalid = invalid ? 'true' : 'false';
         if (invalid !== this.shownInvalid) {
             this.shownInvalid = invalid;
         }

package/dist/chat/root/chat-root.d.ts

@@ -517,12 +517,23 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
      * Moves focus to turn `at`, drawing it first where the transcript is
      * windowed and it is not drawn.
      *
-     * **A turn takes focus only once a reader moves to it**, so the
-     * `tabindex="-1"` a turn written as a child needs is written then, long
-     * after any server's markup has hydrated, and never on a turn nobody moved
-     * to.
+     * **A turn takes focus only once a reader moves to it**, so the `tabindex`
+     * it needs is written then, long after any server's markup has hydrated,
+     * and never on a turn nobody moved to.
      */
     private focusTurn;
+    /** The turn that is a tab stop because a reader moved to it. */
+    private stop;
+    /**
+     * Focuses a turn, making it the transcript's one stop a reader moved to.
+     *
+     * **`0`, and never `-1`.** Chromium leaves the whole of a shadow host at a
+     * negative `tabindex` out of the Tab order, its own controls and what is
+     * slotted into it alike, so a turn at `-1` lost its links and its Try again
+     * once a reader had paged through it. The stop moves with the reader, and a
+     * `tabindex` you wrote on a turn is left as it is.
+     */
+    private visit;
     /** The first control in the regions `names` holds, in their order. */
     private firstControlIn;
     /**

package/dist/chat/root/chat-root.js

@@ -524,7 +524,9 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
     }
     async focusTurn(at) {
         const count = this.fed ? this.turns.length : this.messages.length;
-        if (at < count - 1 && this.pinned) {
+        const log = this.log;
+        const scrolls = log !== null && log !== undefined && log.scrollHeight > log.clientHeight;
+        if (at < count - 1 && this.pinned && scrolls) {
             this.requestPinned(false);
         }
         if (this.fed) {
@@ -537,17 +539,27 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
                 this.requestUpdate();
                 await this.updateComplete;
             }
-            drawn()?.focus();
+            const turn = drawn();
+            if (turn) {
+                this.visit(turn);
+            }
             return;
         }
         const message = this.messages[at];
-        if (!message) {
-            return;
+        if (message) {
+            this.visit(message);
         }
-        if (!message.hasAttribute('tabindex')) {
-            message.setAttribute('tabindex', '-1');
+    }
+    visit(turn) {
+        if (this.stop !== turn) {
+            this.stop?.removeAttribute('tabindex');
+            this.stop = undefined;
+            if (!turn.hasAttribute('tabindex')) {
+                turn.setAttribute('tabindex', '0');
+                this.stop = turn;
+            }
         }
-        message.focus();
+        turn.focus();
     }
     firstControlIn(names) {
         for (const name of names) {
@@ -582,7 +594,6 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
               .turnWords=${this.words}
               .turnPosition=${first + offset + 1}
               .turnCount=${this.turns.length}
-              tabindex="-1"
               .failedLabel=${this.failedLabel}
               state=${turn.state ?? nothing}
             >${turn.text}</${message}>

package/dist/code-block/patch.d.ts

@@ -8,11 +8,21 @@
  * depends on, out of a component library. What is left is punctuation: a header
  * per file, a `@@` per hunk, and a first character per line.
  *
+ * **Within a changed line it does compare.** A removed line and the added line
+ * paired with it are compared word by word, which takes two short strings and
+ * no dependency, so a reader sees which words changed without comparing two
+ * whole lines by eye.
+ *
  * **Line numbers come from the hunk headers**, so they are the file's numbers
  * rather than the diff's, which is the only kind a reader can look up. A line
  * that is not in a hunk is not in the output: file headers, `index` lines and
  * `diff --git` are metadata, and a name is taken from them and nothing else.
  */
+/** A run of a changed line's text, and whether the line it is paired with lacks it. */
+export interface DiffPiece {
+    changed: boolean;
+    text: string;
+}
 /** One line of a hunk, as the unified format marks it. */
 export interface DiffLine {
     kind: 'added' | 'context' | 'removed';
@@ -21,6 +31,11 @@ export interface DiffLine {
     /** The number on the new side, absent for a line that only the old side has. */
     new?: number;
     text: string;
+    /**
+     * The line's text in runs, where it replaced a line or was replaced by one
+     * and the two share some words. Absent for every other line.
+     */
+    pieces?: DiffPiece[];
 }
 /** A `@@` header and the lines under it. */
 export interface DiffHunk {
@@ -51,6 +66,16 @@ export interface DiffRow {
  * before it rather than a line of its own, so it is dropped.
  */
 export declare const parsePatch: (patch: string) => DiffFile[];
+/**
+ * The runs of two paired lines that the other line does not have, by the
+ * longest run of words they share in order.
+ *
+ * **Space between two changes is part of the change**, so "a b" replaced by
+ * "c d" is one run, with no gap for the eye to bridge. Two lines
+ * that share no word share nothing worth marking: the whole line is the
+ * change, which its own wash already says, and `undefined` draws it whole.
+ */
+export declare const changedWords: (before: string, after: string) => [DiffPiece[], DiffPiece[]] | undefined;
 /**
  * A hunk's lines paired for a side-by-side view.
  *
@@ -60,3 +85,20 @@ export declare const parsePatch: (patch: string) => DiffFile[];
  * across rather than hunting for it further down.
  */
 export declare const pairLines: (lines: DiffLine[]) => DiffRow[];
+/** A stretch of a hunk's lines: drawn, or unchanged lines folded behind a control. */
+export interface DiffRun {
+    /** Whether the lines are unchanged ones folded away. */
+    folded: boolean;
+    lines: DiffLine[];
+    /** Where the run starts among the hunk's lines, which names a fold. */
+    start: number;
+}
+/**
+ * A hunk's lines with each long run of unchanged lines folded, keeping `keep`
+ * lines on the side of each change, as a code host draws a diff with more
+ * context than a reader needs.
+ *
+ * A fold hides two lines or more: a control in place of one line is no
+ * shorter than the line.
+ */
+export declare const foldContext: (lines: DiffLine[], keep: number) => DiffRun[];