@fusion.dev/helix-headless 0.215.3 → 0.216.0

package/dist/area-chart/root/area-chart-root.d.ts

@@ -120,6 +120,7 @@ declare const HelixHeadlessAreaChart_base: typeof HelixElement & (new (...args:
  * @csspart loading - The words in place of the drawing while `loading` is set and there are no readings: the `loading` slot, falling back to `loading-text`.
  * @csspart mark - The invisible point the tooltip is anchored to.
  * @csspart plot - The drawing, which takes focus to be read by key. With nothing to draw, a group named as the chart is, holding the `empty` or `loading` part.
+ * @csspart sonify - The button that plays the chart as sound, under `sonify`.
  * @csspart summary - The total and each part's share at the latest reading, written as a sentence for screen readers.
  * @csspart svg - The drawing surface the bands sit on.
  * @csspart table - The readings as a table, for a screen reader, rendered only where they were drawn from `data`, a page of them at a time past a few hundred. Hide it visually.

package/dist/area-chart/root/area-chart-root.js

@@ -112,7 +112,7 @@ let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartStat
         const slot = PLOT_WIDTH / rows.length;
         const x = linear([0, Math.max(rows.length - 1, 1)], [slot / 2, PLOT_WIDTH - slot / 2]);
         return html `${this.valueAxis ? this.renderAxis(y, domain) : nothing}${this.renderPlot(stack, rows.length, x, y, domain)}
-      ${this.renderLabels(rows.map((row) => row.label))} ${this.renderSummary(stack, rows)}${this.renderTable()}`;
+      ${this.renderLabels(rows.map((row) => row.label))} ${this.renderSummary(stack, rows)}${this.renderSonify()}${this.renderTable()}`;
     }
     renderAxis(y, domain) {
         const locale = wordsLocale(this);

package/dist/bar-chart/root/bar-chart-root.d.ts

@@ -104,6 +104,7 @@ declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: a
  * @csspart loading - The words in place of the drawing while `loading` is set and there are no readings: the `loading` slot, falling back to `loading-text`.
  * @csspart mark - The invisible point the tooltip is anchored to.
  * @csspart plot - The drawing, which takes focus to be read by key. With nothing to draw, a group named as the chart is, holding the `empty` or `loading` part.
+ * @csspart sonify - The button that plays the chart as sound, under `sonify`.
  * @csspart summary - The chart's name and each series' highest reading, written as a sentence for screen readers. Hide it visually.
  * @csspart svg - The drawing surface the bars and lines sit on.
  * @csspart table - The readings as a table, for a screen reader, rendered only where they were drawn from `data`, a page of them at a time past a few hundred. Hide it visually.

package/dist/bar-chart/root/bar-chart-root.js

@@ -63,7 +63,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartStatus
             : undefined;
         return html `${z === undefined && !this.valueAxis
             ? nothing
-            : this.renderAxis(y, domain, 'primary', sideways, widest)}${this.renderPlot(series, categories, y, domain, floor, z)}${z === undefined ? nothing : this.renderAxis(z, other, 'secondary', sideways, widest, tint)}${this.renderLabels(categories)}${this.renderSummary(series)}${this.renderTable()}`;
+            : this.renderAxis(y, domain, 'primary', sideways, widest)}${this.renderPlot(series, categories, y, domain, floor, z)}${z === undefined ? nothing : this.renderAxis(z, other, 'secondary', sideways, widest, tint)}${this.renderLabels(categories)}${this.renderSummary(series)}${this.renderSonify()}${this.renderTable()}`;
     }
     frameOf(series, count) {
         const key = [

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, HelixFormElementBase } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixFormElementBase, ListedController } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary Triggers an action, submits a form, or navigates.
@@ -66,6 +66,8 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * @interactive button
  */
 export declare class HelixHeadlessButton extends HelixFormElementBase {
+    /** On the page's list of controls, where a command palette and a shortcut overlay find it. */
+    protected readonly listed: ListedController;
     /**
      * The key this family's words are registered under, its styled tag:
      * `registerWords('de', { 'helix-button': { pendingLabel: 'Wird geladen' } })`.

package/dist/button/root/button-root.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { AriaForwardController, customElement, defaultButton, drawStatus, elementById, HelixFallbackCommandEvent, HelixFormElementBase, HelixPressEvent, pressType, StatusController, submitsOnEnter, supportsInvokers, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, defaultButton, drawStatus, elementById, HelixFallbackCommandEvent, HelixFormElementBase, HelixPressEvent, ListedController, pressType, StatusController, submitsOnEnter, supportsInvokers, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { submitAs } from '../submitter.js';
@@ -21,6 +21,7 @@ const afterDispatch = (click, then) => {
 let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElementBase {
     constructor() {
         super(...arguments);
+        this.listed = new ListedController(this, 'press', () => this.internals?.ariaKeyShortcuts);
         this.aria = new AriaForwardController(this, {
             label: () => this.forwardsLabel,
             target: () => this.partNamed('button'),

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

@@ -1,5 +1,6 @@
 import { HelixFormElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
+declare const HelixHeadlessChatComposer_base: (new (...args: any[]) => import("@fusion.dev/helix-core").VoiceElement) & typeof HelixFormElement;
 /**
  * @summary A field for writing a turn in a conversation.
  *
@@ -15,6 +16,13 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * The composer clears only when no listener cancels the send, so the text is
  * kept when you cancel a send that failed.
  *
+ * **Set `voice` for dictation.** A microphone button before send listens
+ * through the page's speech engine, the browser's own unless
+ * `registerSpeechEngine` gave the page another, and types what it hears at the
+ * caret as the reader speaks, each guess replaced by the next. Press it again,
+ * press Escape, or send, and it stops. Where the browser has no engine, as in
+ * Firefox, no button is drawn.
+ *
  * **In a form, the draft is the composer's value**, submitted under `name`,
  * and an empty draft submits an empty entry, as a native textarea does. A
  * form reset puts back the `value` the markup declared, and a `<fieldset
@@ -48,6 +56,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @slot end - Content under the field, beside the send button.
  * @slot start - Content under the field at the leading edge, such as an attachment button or a model picker.
  *
+ * @event {HelixBeforeListenEvent} helix-before-listen - The dictation button was pressed. Cancelable: cancel it to keep the composer from listening.
+ * @event {HelixListenEvent} helix-listen - Dictation settled on a phrase and put it in the draft, after the draft's own `input`.
  * @event {HelixSendEvent} helix-send - Fired when the user sends their turn, and cancelable.
  * @event {HelixTypingEvent} helix-typing - The user started or stopped writing, with `typing` saying which, as the composer's `typing` does.
  * @event {Event} input - The user changed the text. Read it from `value`, for a typing indicator or a saved draft. Bubbles and is composed, as a native field's is.
@@ -60,10 +70,15 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart send - The send button.
  * @csspart start - The box around the `start` slot.
  * @csspart tools - The row under the field.
+ * @csspart voice - The dictation button, under `voice`, before the send button.
+ * @csspart voice-listening - The dictation button while it listens. Set alongside `voice`.
+ * @csspart voice-status - What a screen reader hears as dictation starts and stops, drawn for no one else.
  *
  * @cssstate invalid - The draft fails `required`, `minlength`, `maxlength`, or a custom error, and the reader has tried to send or submit it, or edited the field and left it. Or `feedback` is set.
+ * @cssstate listening - While the composer listens for dictation. The element sets `--dictation-level` on itself meanwhile, from 0 to 1, for a meter.
  */
-export declare class HelixHeadlessChatComposer extends HelixFormElement {
+export declare class HelixHeadlessChatComposer extends HelixHeadlessChatComposer_base {
+    protected static markRules: string[];
     /**
      * The key this part's words are registered under, its styled tag:
      * `registerWords('de', { 'helix-chat-composer': { sendLabel: 'Senden' } })`.
@@ -158,6 +173,7 @@ export declare class HelixHeadlessChatComposer extends HelixFormElement {
     get typing(): boolean;
     /** Records whether the user is writing, and says so when that changed. */
     private markTyping;
+    protected voiceField(): HTMLTextAreaElement | null;
     /**
      * Sends what is written, and returns whether the send went through.
      *
@@ -254,3 +270,4 @@ declare global {
         'helix-headless-chat-composer': HelixHeadlessChatComposer;
     }
 }
+export {};

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

@@ -1,11 +1,11 @@
 import { __decorate } from "tslib";
-import { customElement, DelayController, HelixFormElement, HelixSendEvent, HelixTypingEvent, hostAria, markRegion, numberConverter, timeConverter, words, } from '@fusion.dev/helix-core';
+import { customElement, DelayController, HelixFormElement, HelixSendEvent, HelixTypingEvent, hostAria, MixinVoice, markRegion, numberConverter, SPOKEN_RULE, timeConverter, words, } from '@fusion.dev/helix-core';
 import { arrowElbowDownLeft } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFormElement {
+let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends MixinVoice(HelixFormElement) {
     constructor() {
         super(...arguments);
         this.feedback = '';
@@ -53,6 +53,7 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
             this.send();
         };
     }
+    static { this.markRules = [SPOKEN_RULE]; }
     static { this.words = 'helix-chat-composer'; }
     get typing() {
         return this.writing;
@@ -70,7 +71,11 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
         this.writing = typing;
         this.dispatchEvent(new HelixTypingEvent({ typing }));
     }
+    voiceField() {
+        return this.partNamed('field');
+    }
     send() {
+        this.stopListening();
         const value = this.value.trim();
         if (this.isDisabled) {
             return false;
@@ -183,7 +188,7 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
       <div part="tools">
         <span part="start"><slot name="start"></slot></span>
         <span part="end"><slot name="end"></slot></span>
-        ${this.renderSend()}
+        ${this.renderVoice()}${this.renderSend()}
       </div>
     </div>${this.feedback === ''
             ? nothing

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, HelixFormElement, HostClickController } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixFormElement, HostClickController, ListedController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessCheckbox_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerCheckedInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
@@ -66,6 +66,8 @@ declare const HelixHeadlessCheckbox_base: (new (...args: any[]) => import("@fusi
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
  */
 export declare class HelixHeadlessCheckbox extends HelixHeadlessCheckbox_base {
+    /** On the page's list of controls, where a command palette and a shortcut overlay find it. */
+    protected readonly listed: ListedController;
     /**
      * The key this family's words are registered under, its styled tag:
      * `registerWords('de', { 'helix-checkbox': { valueMissingMessage: '...' } })`.

package/dist/checkbox/root/checkbox-root.js

@@ -1,10 +1,11 @@
 import { __decorate } from "tslib";
-import { AriaForwardController, customElement, HelixFormElement, HostClickController, MixinControllerChecked, MixinField, slotFilled, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, HelixFormElement, HostClickController, ListedController, MixinControllerChecked, MixinField, slotFilled, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessCheckbox = class HelixHeadlessCheckbox extends MixinControllerChecked(MixinField(HelixFormElement)) {
     constructor() {
         super(...arguments);
+        this.listed = new ListedController(this, 'press', () => this.internals?.ariaKeyShortcuts);
         this.aria = new AriaForwardController(this, {
             target: () => this.partNamed('control'),
         });

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

@@ -13,3 +13,12 @@
  * box and colors, so the wrapper's `style` and `class` go with it.
  */
 export declare const highlightedLines: (markup: string) => string;
+/**
+ * Highlighted markup cut into one string per line, each closing what is open
+ * at its end and opening it again on the next, so a token that runs over a
+ * line break, such as a block comment, is drawn whole on both lines.
+ *
+ * What lets a block that grows redraw only the lines that changed: a line is
+ * replaced when its own markup differs, and every other line keeps its nodes.
+ */
+export declare const highlightedLineList: (markup: string) => string[];

package/dist/code-block/highlight.js

@@ -2,3 +2,42 @@ export const highlightedLines = (markup) => {
     const lines = /^\s*<pre\b[^>]*>\s*<code\b[^>]*>([\s\S]*)<\/code>\s*<\/pre>\s*$/i.exec(markup)?.[1];
     return lines === undefined || /<\/?pre\b/i.test(lines) ? markup : lines;
 };
+const VOID_TAGS = new Set(['br', 'img', 'wbr']);
+export const highlightedLineList = (markup) => {
+    const lines = [];
+    const open = [];
+    let line = '';
+    for (const [, tag, text] of markup.matchAll(/(<[^>]*>)|([^<]+)/g)) {
+        if (tag !== undefined) {
+            line += tag;
+            const name = /^<\/?([A-Za-z][\w-]*)/.exec(tag)?.[1]?.toLowerCase();
+            if (name === undefined || VOID_TAGS.has(name) || tag.endsWith('/>')) {
+                continue;
+            }
+            if (tag.startsWith('</')) {
+                const at = open.map((one) => one.name).lastIndexOf(name);
+                if (at >= 0) {
+                    open.splice(at);
+                }
+            }
+            else {
+                open.push({ name, tag });
+            }
+            continue;
+        }
+        const pieces = (text ?? '').split('\n');
+        pieces.forEach((piece, index) => {
+            if (index > 0) {
+                lines.push(line +
+                    open
+                        .map((one) => `</${one.name}>`)
+                        .reverse()
+                        .join(''));
+                line = open.map((one) => one.tag).join('');
+            }
+            line += piece;
+        });
+    }
+    lines.push(line);
+    return lines;
+};

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

@@ -0,0 +1,44 @@
+import type { CSSResult, ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * Turns code into highlighted markup for a `language`, or returns `undefined`
+ * for a language it does not read, which the element then draws plain.
+ */
+export type CodeBlockHighlighter = (code: string, language: string) => string | undefined;
+/**
+ * An element that draws with the registered highlighter: Code Block and Code
+ * Input. Told when the registration changes, so it draws again.
+ */
+export interface HighlighterConsumer extends Element {
+    highlighterChanged(): void;
+}
+/** The highlighter a page registered, or nothing where it registered none. */
+export declare const registeredHighlighter: () => CodeBlockHighlighter | undefined;
+/**
+ * Keeps an element that draws with the registered highlighter on the page's
+ * list while it is connected, with the registered sheet in its shadow root,
+ * so a registration reaches it without searching the page.
+ */
+export declare class HighlighterController implements ReactiveController {
+    private readonly host;
+    constructor(host: ReactiveControllerHost & HighlighterConsumer);
+    hostConnected(): void;
+    hostDisconnected(): void;
+}
+/**
+ * Gives every Code Block and Code Input of both tiers a highlighter, for the
+ * ones that set no `highlight` of their own, and the sheet that colors what
+ * it returns.
+ *
+ * **Opt-in, so a page that shows plain code carries no grammar.** Helix ships
+ * none: a grammar is the larger part of any highlighter, and an element that
+ * registers one for every page makes every page pay for it. A page that wants
+ * color calls this once, or imports an entry that calls it, such as
+ * `@fusion.dev/helix-sandbox/code-block`. `sheet` is adopted into every
+ * consumer's shadow root, for a highlighter that writes classes, since a
+ * page's own stylesheet does not reach inside one.
+ *
+ * An element's own `highlight` wins over this. Elements already on the page
+ * draw again with it, and every element built after has it. `undefined` takes
+ * it away again.
+ */
+export declare const registerHighlighter: (highlighter: CodeBlockHighlighter | undefined, sheet?: CSSResult) => void;

package/dist/code-block/highlighter.js

@@ -0,0 +1,44 @@
+const SLOT = Symbol.for('fusion.dev/helix/highlighter');
+const store = globalThis;
+store[SLOT] ??= { consumers: new Set(), registered: undefined, sheets: new Set() };
+const registry = store[SLOT];
+export const registeredHighlighter = () => registry.registered?.highlighter;
+const adoptSheet = (root) => {
+    if (!root) {
+        return;
+    }
+    const sheet = registry.registered?.sheet?.styleSheet;
+    const kept = root.adoptedStyleSheets.filter((one) => one === sheet || !registry.sheets.has(one));
+    const next = sheet && !kept.includes(sheet) ? [...kept, sheet] : kept;
+    if (next.length !== root.adoptedStyleSheets.length ||
+        next.some((one, at) => one !== root.adoptedStyleSheets[at])) {
+        root.adoptedStyleSheets = next;
+    }
+};
+export class HighlighterController {
+    constructor(host) {
+        this.host = host;
+        host.addController(this);
+    }
+    hostConnected() {
+        registry.consumers.add(this.host);
+        adoptSheet(this.host.shadowRoot);
+    }
+    hostDisconnected() {
+        registry.consumers.delete(this.host);
+    }
+}
+export const registerHighlighter = (highlighter, sheet) => {
+    registry.registered = highlighter ? { highlighter, sheet } : undefined;
+    if (sheet?.styleSheet) {
+        registry.sheets.add(sheet.styleSheet);
+    }
+    for (const consumer of registry.consumers) {
+        if (!consumer.isConnected) {
+            registry.consumers.delete(consumer);
+            continue;
+        }
+        adoptSheet(consumer.shadowRoot);
+        consumer.highlighterChanged();
+    }
+};

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

@@ -1,2 +1,3 @@
+export * from './highlighter.js';
 export * from './patch.js';
 export * from './root/code-block-root.js';

package/dist/code-block/index.js

@@ -1,2 +1,3 @@
+export * from './highlighter.js';
 export * from './patch.js';
 export * from './root/code-block-root.js';

package/dist/code-block/keyed-lines.d.ts

@@ -0,0 +1,23 @@
+import { type ChildPart, Directive, type PartInfo } from 'lit/directive.js';
+/**
+ * Draws highlighted markup line by line, and on each change replaces only the
+ * lines whose markup changed.
+ *
+ * **Why not `unsafeHTML`**, which this replaced: it rebuilds every node of the
+ * block on every change, so a block that grows a line at a time, as a streamed
+ * reply's does, threw away its whole drawing for each character, and a reader's
+ * selection in it with the drawing. Here an unchanged line keeps its nodes. A
+ * line break between lines is a text node of its own, as it was, so the shadow
+ * root holds the same nodes `unsafeHTML` drew and no rule that styles them sees
+ * a wrapper.
+ */
+declare class KeyedLines extends Directive {
+    /** Each line's markup as drawn, and its nodes, the break before it first from the second line on. */
+    private lines;
+    constructor(info: PartInfo);
+    render(markup: string): unknown;
+    update(part: ChildPart, [markup]: [string]): unknown;
+}
+/** Highlighted markup drawn so that a change redraws only the lines it changed. */
+export declare const keyedLines: (markup: string) => import("lit-html/directive.js").DirectiveResult<typeof KeyedLines>;
+export {};

package/dist/code-block/keyed-lines.js

@@ -0,0 +1,75 @@
+import { noChange } from 'lit';
+import { Directive, directive, PartType } from 'lit/directive.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { highlightedLineList } from './highlight.js';
+class KeyedLines extends Directive {
+    constructor(info) {
+        super(info);
+        this.lines = [];
+        if (info.type !== PartType.CHILD) {
+            throw new Error('keyedLines belongs in a child position');
+        }
+    }
+    render(markup) {
+        return unsafeHTML(markup);
+    }
+    update(part, [markup]) {
+        const parent = part.parentNode;
+        const document = parent.ownerDocument ?? parent;
+        const end = part.endNode;
+        const start = part.startNode;
+        if (end === null &&
+            this.lines.length === 0 &&
+            start?.nodeType === 8 &&
+            start.data.startsWith('lit-part')) {
+            return this.render(markup);
+        }
+        const next = highlightedLineList(markup);
+        if (this.lines.length === 0) {
+            for (let node = start?.nextSibling; node && node !== end;) {
+                const following = node.nextSibling;
+                node.parentNode?.removeChild(node);
+                node = following;
+            }
+        }
+        const parse = (line) => {
+            const template = document.createElement('template');
+            template.innerHTML = line;
+            return [...template.content.childNodes];
+        };
+        next.forEach((line, index) => {
+            const drawn = this.lines[index];
+            if (drawn?.markup === line) {
+                return;
+            }
+            const nodes = parse(line);
+            if (drawn) {
+                const own = index > 0 ? drawn.nodes.slice(1) : drawn.nodes;
+                const after = this.lines[index + 1]?.nodes[0] ?? end;
+                for (const node of nodes) {
+                    parent.insertBefore(node, after);
+                }
+                for (const node of own) {
+                    node.parentNode?.removeChild(node);
+                }
+                this.lines[index] = {
+                    markup: line,
+                    nodes: index > 0 ? [drawn.nodes[0], ...nodes] : nodes,
+                };
+                return;
+            }
+            const all = index > 0 ? [document.createTextNode('\n'), ...nodes] : nodes;
+            for (const node of all) {
+                parent.insertBefore(node, end);
+            }
+            this.lines[index] = { markup: line, nodes: all };
+        });
+        for (const gone of this.lines.splice(next.length)) {
+            for (const node of gone.nodes) {
+                node.parentNode?.removeChild(node);
+            }
+        }
+        return noChange;
+    }
+}
+export const keyedLines = directive(KeyedLines);

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

@@ -1,28 +1,7 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type CSSResult, type PropertyValues, type TemplateResult } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../copy-button/index.js';
-/**
- * Turns code into highlighted markup for a block's `language`, or returns
- * `undefined` for a language it does not read, which the block then draws
- * plain.
- */
-export type CodeBlockHighlighter = (code: string, language: string) => string | undefined;
-/**
- * Gives every Code Block of both tiers a highlighter, for the blocks that set
- * no `highlight` of their own, and the sheet that colors what it returns.
- *
- * **Opt-in, so a page that shows plain code carries no grammar.** Code Block
- * ships none: a grammar is the larger part of any highlighter, and a block
- * that registers one for every page makes every page pay for it. A page that
- * wants color calls this once, or imports an entry that calls it. `sheet` is
- * adopted into every block's shadow root, for a highlighter that writes
- * classes, since a page's own stylesheet does not reach inside a block.
- *
- * A block's own `highlight` wins over this. Blocks already on the page draw
- * again with it, and every block built after has it. `undefined` takes it
- * away again.
- */
-export declare const registerHighlighter: (highlighter: CodeBlockHighlighter | undefined, sheet?: CSSResult) => void;
+import { HighlighterController } from '../highlighter.js';
 /**
  * @summary A block of code with an optional name and a copy button.
  *
@@ -524,6 +503,10 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;
+    /** On the page's list of elements a highlighter registration reaches. */
+    protected readonly highlighting: HighlighterController;
+    /** The page registered another highlighter: draws again with it. */
+    highlighterChanged(): void;
     protected render(): TemplateResult;
     /**
      * The button that shows every line of a capped block, and fewer again, or

package/dist/code-block/root/code-block-root.js

@@ -2,33 +2,13 @@ import { __decorate } from "tslib";
 import { customElement, formatWords, HelixBeforeToggleEvent, HelixElement, HelixToggleEvent, inlineStep, requestChange, requestValue, stopPress, words, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { html } from 'lit/static-html.js';
 import '../../copy-button/index.js';
 import { highlightedLines } from '../highlight.js';
+import { HighlighterController, registeredHighlighter } from '../highlighter.js';
+import { keyedLines } from '../keyed-lines.js';
 import { gutterNumbers, lineCount, lineRuns, lineSpans } from '../lines.js';
 import { foldContext, pairLines, parsePatch, } from '../patch.js';
-let registered;
-const adoptRegistered = (block) => {
-    const root = block.shadowRoot;
-    const sheet = registered?.sheet?.styleSheet;
-    if (root && sheet && !root.adoptedStyleSheets.includes(sheet)) {
-        root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
-    }
-};
-const blocksOnPage = (root = document) => [...root.querySelectorAll('*')].flatMap((node) => [
-    ...(node instanceof HelixHeadlessCodeBlock ? [node] : []),
-    ...(node.shadowRoot ? blocksOnPage(node.shadowRoot) : []),
-]);
-export const registerHighlighter = (highlighter, sheet) => {
-    registered = highlighter ? { highlighter, sheet } : undefined;
-    if (typeof globalThis.document?.querySelectorAll === 'function') {
-        for (const block of blocksOnPage()) {
-            adoptRegistered(block);
-            block.requestUpdate();
-        }
-    }
-};
 const isBlock = (element) => element?.localName.endsWith('code-block') === true;
 const blocksIn = (host) => [...host.children].filter((child) => child.slot === '' && isBlock(child));
 const nameOf = (block) => {
@@ -102,6 +82,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         };
         this.hid = new Set();
         this.fileCount = 0;
+        this.highlighting = new HighlighterController(this);
     }
     static { this.words = 'helix-code-block'; }
     toggleWrap() {
@@ -352,7 +333,9 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();
-        adoptRegistered(this);
+    }
+    highlighterChanged() {
+        this.requestUpdate();
     }
     render() {
         const blocks = this.blocks;
@@ -365,7 +348,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         }
         const text = this.text;
         let highlighted;
-        const highlight = this.highlight ?? registered?.highlighter;
+        const highlight = this.highlight ?? registeredHighlighter();
         try {
             const markup = highlight && text !== '' ? highlight(text, this.language) : undefined;
             highlighted = markup === undefined ? undefined : highlightedLines(markup);
@@ -382,7 +365,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
             : [];
         const code = highlighted === undefined
             ? html `<code part="code">${marks}<slot @slotchange=${() => this.requestUpdate()}></slot></code>`
-            : html `<code part="code">${marks}${unsafeHTML(highlighted)}</code><slot
+            : html `<code part="code">${marks}${keyedLines(highlighted)}</code><slot
               hidden
               @slotchange=${() => this.requestUpdate()}
             ></slot>`;

package/dist/code-editor/index.d.ts

@@ -0,0 +1 @@
+export * from './root/code-editor-root.js';

package/dist/code-editor/index.js

@@ -0,0 +1 @@
+export * from './root/code-editor-root.js';