@fusion.dev/helix-headless 0.218.0 → 0.220.0

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

@@ -1,19 +1,39 @@
 import { __decorate } from "tslib";
-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 { customElement, DelayController, deepActiveElement, HelixFormElement, HelixSendEvent, HelixStopEvent, HelixTypingEvent, hostAria, MixinVoice, markRegion, motionPaused, numberConverter, onMotionChange, pressedOwnControl, reducedMotion, SPOKEN_RULE, timeConverter, words, } from '@fusion.dev/helix-core';
+import { arrowElbowDownLeft, stop } 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';
+import { html as staticHtml } from 'lit/static-html.js';
+import '../../tooltip/index.js';
+const EXAMPLE_SHOWN = 6500;
+const EXAMPLE_SHORT = 40;
+const EXAMPLE_PER_CHARACTER = 60;
+const EXAMPLE_LONGEST = 10000;
+const EXAMPLE_LEAVE = 250;
+const EXAMPLE_CROSS = 100;
+const EXAMPLE_ENTER = 350;
+export function exampleShown(example) {
+    const extra = Math.max(0, Array.from(example).length - EXAMPLE_SHORT);
+    return Math.min(EXAMPLE_LONGEST, EXAMPLE_SHOWN + extra * EXAMPLE_PER_CHARACTER);
+}
 let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends MixinVoice(HelixFormElement) {
     constructor() {
         super(...arguments);
+        this.attached = false;
+        this.busy = false;
         this.feedback = '';
         this.label = 'Message';
         this.placeholder = '';
+        this.placeholders = [];
+        this.queue = false;
         this.required = false;
         this.rows = 1;
+        this.sendDisabled = false;
         this.sendLabel = 'Send';
+        this.sendReason = '';
+        this.stopLabel = 'Stop';
         this.submitOn = 'enter';
         this.typingTimeout = 3000;
         this.value = '';
@@ -22,6 +42,9 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends MixinVoi
         this.touched = false;
         this.edited = false;
         this.shownInvalid = false;
+        this.example = 0;
+        this.focused = false;
+        this.onScreen = true;
         this.pause = new DelayController(this, { renders: false });
         this.touch = () => {
             this.touched = true;
@@ -32,6 +55,19 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends MixinVoi
                 this.touch();
             }
         };
+        this.handleAttachmentsDown = (event) => {
+            const region = event.currentTarget;
+            if (event.button !== 0 || pressedOwnControl(event, region) || this.isDisabled) {
+                return;
+            }
+            event.preventDefault();
+            this.partNamed('field')?.focus();
+        };
+        this.focusedOn = 'elsewhere';
+        this.handleFocus = (event) => {
+            this.focused = event.type === 'focus';
+            this.turnExamples();
+        };
         this.handleInput = (event) => {
             event.stopPropagation();
             this.value = event.target.value;
@@ -42,6 +78,9 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends MixinVoi
         this.handleSend = () => {
             this.send();
         };
+        this.handleStop = () => {
+            this.dispatchEvent(new HelixStopEvent());
+        };
         this.handleKey = (event) => {
             if (event.key !== 'Enter' || this.submitOn !== 'enter') {
                 return;
@@ -77,7 +116,7 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends MixinVoi
     send() {
         this.stopListening();
         const value = this.value.trim();
-        if (this.isDisabled) {
+        if (this.isDisabled || this.sendDisabled || (this.busy && !this.queue)) {
             return false;
         }
         if (value === '') {
@@ -116,12 +155,154 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends MixinVoi
         this.value = typeof state === 'string' ? state : this.declared;
     }
     markEmpty() {
-        for (const name of ['start', 'end']) {
+        for (const name of ['attachments', 'start', 'end']) {
             markRegion(this.renderRoot, name, [name]);
         }
     }
+    get idling() {
+        return (this.knownChildren.some((child) => child.getAttribute('slot') === 'idle') &&
+            !this.busy &&
+            !this.attached &&
+            this.value.trim() === '');
+    }
+    get carrying() {
+        return this.knownChildren.some((child) => child.getAttribute('slot') === 'attachments');
+    }
+    noteFocus() {
+        if (!this.hasUpdated) {
+            this.focusedOn = 'elsewhere';
+            return;
+        }
+        const active = deepActiveElement();
+        const send = this.partNamed('send');
+        const idle = this.renderRoot
+            ?.querySelector('slot[name="idle"]')
+            ?.assignedElements({ flatten: true });
+        this.focusedOn =
+            active !== null && active === send
+                ? 'send'
+                : active !== null && idle?.some((element) => element === active || element.contains(active))
+                    ? 'idle'
+                    : 'elsewhere';
+    }
+    keepFocus() {
+        if (this.focusedOn === 'send' && this.idling) {
+            const idle = this.renderRoot
+                ?.querySelector('slot[name="idle"]')
+                ?.assignedElements({ flatten: true })[0];
+            idle?.focus();
+        }
+        else if (this.focusedOn === 'idle' && !this.idling) {
+            this.partNamed('send')?.focus();
+        }
+        this.focusedOn = 'elsewhere';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.unmoved ??= onMotionChange(() => this.turnExamples());
+        if (typeof IntersectionObserver === 'function' && this.sight === undefined) {
+            this.sight = new IntersectionObserver((entries) => {
+                const seen = entries.at(-1)?.isIntersecting ?? this.onScreen;
+                if (seen !== this.onScreen) {
+                    this.onScreen = seen;
+                    this.turnExamples();
+                }
+            });
+            this.sight.observe(this);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.unmoved?.();
+        this.unmoved = undefined;
+        this.sight?.disconnect();
+        this.sight = undefined;
+        this.onScreen = true;
+        this.stopExamples();
+    }
+    renderExamples() {
+        const { length } = this.placeholders;
+        const at = (index) => ({ index, text: this.placeholders[index % length] ?? '' });
+        const leaving = this.leavingExample;
+        return this.renderExample(at(this.example), leaving === undefined ? undefined : at(leaving));
+    }
+    get shownPlaceholder() {
+        const { length } = this.placeholders;
+        return length > 0 ? (this.placeholders[this.example % length] ?? '') : this.placeholder;
+    }
+    turnExamples() {
+        const free = this.isConnected &&
+            this.placeholders.length > 1 &&
+            this.value === '' &&
+            this.onScreen &&
+            !reducedMotion() &&
+            !motionPaused();
+        if (!free) {
+            this.stopExamples();
+            return;
+        }
+        if (this.focused) {
+            clearTimeout(this.turning);
+            this.turning = undefined;
+            return;
+        }
+        if (this.turning === undefined && this.crossing === undefined && this.leaving === undefined) {
+            this.turning = setTimeout(() => this.leaveExample(), exampleShown(this.shownPlaceholder));
+        }
+    }
+    leaveExample() {
+        this.turning = undefined;
+        if (reducedMotion() || motionPaused()) {
+            this.stopExamples();
+            return;
+        }
+        clearTimeout(this.entering);
+        this.entering = undefined;
+        this.toggleState('example-entering', false);
+        this.toggleState('example-leaving', true);
+        this.leavingExample = this.example;
+        this.crossing = setTimeout(() => this.arriveExample(), EXAMPLE_CROSS);
+        this.leaving = setTimeout(() => {
+            this.leaving = undefined;
+            this.leavingExample = undefined;
+            this.toggleState('example-leaving', false);
+        }, EXAMPLE_LEAVE);
+    }
+    arriveExample() {
+        this.crossing = undefined;
+        this.example = (this.example + 1) % Math.max(this.placeholders.length, 1);
+        this.toggleState('example-entering', true);
+        this.entering = setTimeout(() => {
+            this.entering = undefined;
+            this.toggleState('example-entering', false);
+            this.exampleLanded();
+        }, EXAMPLE_ENTER);
+        this.turnExamples();
+    }
+    stopExamples() {
+        clearTimeout(this.turning);
+        clearTimeout(this.crossing);
+        clearTimeout(this.leaving);
+        clearTimeout(this.entering);
+        this.turning = undefined;
+        this.crossing = undefined;
+        this.leaving = undefined;
+        this.entering = undefined;
+        this.leavingExample = undefined;
+        this.toggleState('example-leaving', false);
+        this.toggleState('example-entering', false);
+        this.exampleLanded();
+    }
+    exampleLanded() { }
+    renderExample(_example, _leaving) {
+        return nothing;
+    }
     updated(changed) {
         super.updated(changed);
+        this.keepFocus();
+        if (changed.has('placeholders') || changed.has('value')) {
+            this.turnExamples();
+        }
         this.markEmpty();
         if (changed.has('value')) {
             this.internals.setFormValue(this.value, this.value);
@@ -139,6 +320,7 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends MixinVoi
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
+        this.finishHydration();
         this.addEventListener('invalid', () => {
             if (!this.checkingValidity) {
                 this.touch();
@@ -148,32 +330,42 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends MixinVoi
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label, role: 'group' });
+        this.noteFocus();
     }
     renderSend() {
-        return html `<button
+        const mark = this.busy ? stop : arrowElbowDownLeft;
+        const held = this.sendDisabled && !this.busy;
+        const reasoned = held && !this.isDisabled && this.sendReason !== '';
+        const control = html `<button
       part="send"
       type="button"
-      aria-label=${this.sendLabel}
-      ?disabled=${this.isDisabled}
-      @click=${this.handleSend}
+      aria-label=${this.busy ? this.stopLabel : this.sendLabel}
+      aria-disabled=${reasoned ? 'true' : nothing}
+      aria-describedby=${reasoned ? 'send-reason' : nothing}
+      ?disabled=${this.isDisabled || (held && !reasoned)}
+      @click=${this.busy ? this.handleStop : this.handleSend}
     >
-      <svg
-        part="mark"
-        fill="currentColor"
-        viewBox=${arrowElbowDownLeft.viewBox}
-        aria-hidden="true"
-      >
-        ${unsafeSVG(arrowElbowDownLeft.content)}
+      <svg part="mark" fill="currentColor" viewBox=${mark.viewBox} aria-hidden="true">
+        ${unsafeSVG(mark.content)}
       </svg>
     </button>`;
+        if (!reasoned) {
+            return control;
+        }
+        return staticHtml `<${this.tag('tooltip')} id="send-reason" content=${this.sendReason}
+      exportparts="arrow: reason-arrow, arrow-bottom: reason-arrow-bottom, arrow-left: reason-arrow-left, arrow-right: reason-arrow-right, arrow-top: reason-arrow-top, surface: reason-surface, surface-bottom: reason-surface-bottom, surface-left: reason-surface-left, surface-right: reason-surface-right, surface-top: reason-surface-top"
+      >${control}</${this.tag('tooltip')}>`;
     }
     render() {
         return html `<div part="composer">
+      <div part="attachments" ?hidden=${!this.carrying} @mousedown=${this.handleAttachmentsDown}
+        ><slot name="attachments" @slotchange=${() => this.markEmpty()}></slot
+      ></div>
       <textarea
         part="field"
         .value=${live(this.value)}
         aria-label=${this.label}
-        placeholder=${this.placeholder}
+        placeholder=${this.shownPlaceholder}
         rows=${this.rows}
         ?required=${this.required}
         minlength=${this.minLength ?? nothing}
@@ -181,20 +373,36 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends MixinVoi
         aria-invalid=${this.shownInvalid ? 'true' : nothing}
         aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
         ?disabled=${this.isDisabled}
+        @blur=${this.handleFocus}
         @change=${this.handleChange}
+        @focus=${this.handleFocus}
         @input=${this.handleInput}
         @keydown=${this.handleKey}
       ></textarea>
+      ${this.placeholders.length > 1 ? this.renderExamples() : nothing}
       <div part="tools">
-        <span part="start"><slot name="start"></slot></span>
-        <span part="end"><slot name="end"></slot></span>
-        ${this.renderVoice()}${this.renderSend()}
+        <span part="start"><slot name="start" @slotchange=${() => this.markEmpty()}></slot></span>
+        <span part="end"><slot name="end" @slotchange=${() => this.markEmpty()}></slot></span>
+        ${this.renderVoice()}
+        <span part="idle" ?hidden=${!this.idling}
+          ><slot
+            name="idle"
+            @slotchange=${() => this.requestUpdate()}
+          ></slot
+        ></span>
+        ${this.idling ? nothing : this.renderSend()}
       </div>
     </div>${this.feedback === ''
             ? nothing
             : html `<p part="feedback" id="feedback" role="alert">${this.feedback}</p>`}`;
     }
 };
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessChatComposer.prototype, "attached", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessChatComposer.prototype, "busy", void 0);
 __decorate([
     property()
 ], HelixHeadlessChatComposer.prototype, "feedback", void 0);
@@ -211,16 +419,32 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessChatComposer.prototype, "placeholder", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessChatComposer.prototype, "placeholders", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessChatComposer.prototype, "queue", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessChatComposer.prototype, "required", void 0);
 __decorate([
     property({ converter: numberConverter('rows', 1) })
 ], HelixHeadlessChatComposer.prototype, "rows", void 0);
+__decorate([
+    property({ attribute: 'send-disabled', type: Boolean })
+], HelixHeadlessChatComposer.prototype, "sendDisabled", void 0);
 __decorate([
     words,
     property({ attribute: 'send-label' })
 ], HelixHeadlessChatComposer.prototype, "sendLabel", void 0);
+__decorate([
+    property({ attribute: 'send-reason' })
+], HelixHeadlessChatComposer.prototype, "sendReason", void 0);
+__decorate([
+    words,
+    property({ attribute: 'stop-label' })
+], HelixHeadlessChatComposer.prototype, "stopLabel", void 0);
 __decorate([
     property({ attribute: 'submit-on' })
 ], HelixHeadlessChatComposer.prototype, "submitOn", void 0);
@@ -233,6 +457,12 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessChatComposer.prototype, "shownInvalid", void 0);
+__decorate([
+    state()
+], HelixHeadlessChatComposer.prototype, "example", void 0);
+__decorate([
+    state()
+], HelixHeadlessChatComposer.prototype, "leavingExample", void 0);
 HelixHeadlessChatComposer = __decorate([
     customElement('helix-headless-chat-composer')
 ], HelixHeadlessChatComposer);

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

@@ -26,6 +26,11 @@ export declare const FAILED_LABEL = "Not sent";
  * a page in another language sets them once there. The time moves on by
  * itself, so "now" becomes "1 minute ago" while the page is open.
  *
+ * **What a turn carries goes in `attachments`**, above the bubble rather
+ * in it: a picture inside a tinted bubble is framed twice, and one sent with
+ * no words is an empty bubble around it. It sits against the same edge as the
+ * turn, and the words keep their bubble under it.
+ *
  * **An agent's work goes in `work`, and its answer in the content.** The work,
  * its thinking, the commands it ran and what they printed, is a record read
  * the way a log is, so a `Log` with `separation="plain"` and `quiet` sits there
@@ -40,6 +45,7 @@ export declare const FAILED_LABEL = "Not sent";
  *
  * @slot - The turn's content.
  * @slot actions - Controls for the turn, such as copy, retry, or react.
+ * @slot attachments - What the turn carries, such as images or files, above its content and outside the bubble, against the author's edge.
  * @slot avatar - The author's avatar.
  * @slot indicator - The indicator shown before the first token arrives.
  * Defaults to the typing indicator.
@@ -49,6 +55,7 @@ export declare const FAILED_LABEL = "Not sent";
  * @event {HelixSendEvent} helix-send - Fired when the user retries a failed message. Cancelable: if it is not canceled, the turn is sent again. Canceling it leaves the failure and the retry button as they were.
  *
  * @csspart actions - The controls on the turn, beside its time.
+ * @csspart attachments - The box around the `attachments` slot, above the content and outside the bubble.
  * @csspart avatar - The box around the `avatar` slot.
  * @csspart body - The content and the line under it.
  * @csspart content - Your own markup.

package/dist/chat/message/chat-message.js

@@ -108,7 +108,7 @@ let HelixHeadlessChatMessage = class HelixHeadlessChatMessage extends HelixEleme
     }
     markEmpty() {
         markRegion(this.renderRoot, 'content', [''], { hide: false });
-        for (const name of ['work', 'sources', 'actions']) {
+        for (const name of ['work', 'attachments', 'sources', 'actions']) {
             markRegion(this.renderRoot, name, [name]);
         }
     }
@@ -121,6 +121,7 @@ let HelixHeadlessChatMessage = class HelixHeadlessChatMessage extends HelixEleme
       <span part="avatar"><slot name="avatar"></slot></span>
       <div part="body">
         <div part="work"><slot name="work" @slotchange=${this.handleFill}></slot></div>
+        <div part="attachments"><slot name="attachments" @slotchange=${this.handleFill}></slot></div>
         <div part="content">
           <slot @slotchange=${this.handleFill}></slot>
           ${this.renderIndicator()}

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

@@ -138,6 +138,7 @@ declare const HelixHeadlessChat_base: (new (...args: any[]) => import("@fusion.d
  * @csspart log - The transcript, which scrolls. On this tier, it needs only a block size.
  * @csspart message - The message drawn for a turn from `turns`, forwarded whole.
  * @csspart message-actions - The controls on a turn from `turns`, beside its time.
+ * @csspart message-attachments - The attachments above the bubble of a turn from `turns`.
  * @csspart message-avatar - The avatar box of a turn from `turns`.
  * @csspart message-avatar-mine - The avatar box of a turn from `turns` by `me`.
  * @csspart message-body - The content of a turn from `turns`, and the line under it.

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

@@ -705,7 +705,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         return html `<div part="before" role="presentation" style="block-size: ${before}px; flex: none"></div>
       ${repeat(this.turns.slice(first, last), (turn, offset) => turn.key ?? first + offset, (turn, offset) => html `<div part="turn" data-index=${first + offset}>
             <${message}
-              exportparts="actions: message-actions, avatar: message-avatar, body: message-body,
+              exportparts="actions: message-actions, attachments: message-attachments, avatar: message-avatar, body: message-body,
                 content: message-content, indicator: message-indicator, mark: message-mark, message,
                 meta: message-meta, retry: message-retry, sources: message-sources,
                 state: message-state, time: message-time, work: message-work${secondNames(SECOND_NAMES.author, turn.author)}${secondNames(SECOND_NAMES.state, turn.state)}"

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

@@ -1,6 +1,7 @@
-import { AriaForwardController, HelixFormElement, ListedController } from '@fusion.dev/helix-core';
+import { AriaForwardController, findRanges, HelixFormElement, ListedController } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import '../../button/index.js';
+import '../../find/index.js';
 import '../../icon-button/index.js';
 import '../../toolbar/index.js';
 /** A problem in the text, from a linter or a language server, by where it is. */
@@ -81,8 +82,8 @@ export declare const positionOf: (value: string, at: number) => {
     column: number;
     line: number;
 };
-/** Where a query matches in a text, as `[from, to]` offsets, with no empty match. */
-export declare const findRanges: (text: string, query: EditorFindQuery) => Array<[number, number]>;
+/** Where a query matches in a text, as `[from, to]` offsets, with no empty match. Find's own, from core. */
+export { findRanges };
 declare const HelixHeadlessCodeEditor_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
  * @summary An editor for a file of code, drawn by a code editor you connect.
@@ -128,6 +129,7 @@ declare const HelixHeadlessCodeEditor_base: (new (...args: any[]) => import("@fu
  *
  * @event {Event} change - The reader finished an edit and focus left the code, in the engine or the plain field.
  * @event {HelixBeforeChangeEvent} helix-before-change - The text is about to change. Cancelable: cancel it to keep the current text.
+ * @event {HelixFoundEvent} helix-found - The find bar searched or moved among the matches, with `count` and the selected match's `index`, counting from 0, or -1 for none.
  * @event {Event} input - Fired after the text changes.
  *
  * @csspart body - The box the code is drawn in, between the header and the problems.
@@ -142,9 +144,9 @@ declare const HelixHeadlessCodeEditor_base: (new (...args: any[]) => import("@fu
  * @csspart diagnostics - The list of problems under the code, while there are any.
  * @csspart feedback - The message that says what is wrong.
  * @csspart field - The frame around the header, the code, the problems and the status line.
- * @csspart find - The button in the header that opens the find bar.
- * @csspart find-bar - The find bar under the header, while it is open.
- * @csspart find-button - The Find button's inner button.
+ * @csspart find - The find bar under the header, where the reader searches the code: a Find of its own.
+ * @csspart find-actions - The find bar's `actions` slot, which the editor fills with nothing.
+ * @csspart find-bar - The find bar's strip: the replace toggle, the field, the count, the toolbar, and the replace row while it shows.
  * @csspart find-close - The button that closes the find bar.
  * @csspart find-close-button - The close button's inner button.
  * @csspart find-close-live - The close button's live region, which speaks while the button is pending.
@@ -154,10 +156,11 @@ declare const HelixHeadlessCodeEditor_base: (new (...args: any[]) => import("@fu
  * @csspart find-controls-toolbar - The box inside the find bar's toolbar that lays its buttons out.
  * @csspart find-count - Which match is selected, of how many.
  * @csspart find-field - The field the search is typed in.
- * @csspart find-live - The Find button's live region, which speaks while the button is pending.
+ * @csspart find-live - The find bar's live region, which says the count as it changes.
  * @csspart find-match-case - The option that finds only the same case. Pressed while it applies.
  * @csspart find-match-case-button - The match case button's inner button.
  * @csspart find-match-case-live - The match case button's live region, which speaks while the button is pending.
+ * @csspart find-match-case-pressed - The match case option while it applies, beside `find-match-case`.
  * @csspart find-match-case-spinner - The ring the match case button turns while it is pending.
  * @csspart find-match-case-text - The box the match case button's icon sits in.
  * @csspart find-next - The button that selects the next match.
@@ -173,18 +176,34 @@ declare const HelixHeadlessCodeEditor_base: (new (...args: any[]) => import("@fu
  * @csspart find-regex - The option that reads the search as a regular expression. Pressed while it applies.
  * @csspart find-regex-button - The regular expression button's inner button.
  * @csspart find-regex-live - The regular expression button's live region, which speaks while the button is pending.
+ * @csspart find-regex-pressed - The regular expression option while it applies, beside `find-regex`.
  * @csspart find-regex-spinner - The ring the regular expression button turns while it is pending.
  * @csspart find-regex-text - The box the regular expression button's icon sits in.
- * @csspart find-replace - The button that shows the replace field under the find field. Expanded while it shows.
- * @csspart find-replace-button - The find and replace button's inner button.
- * @csspart find-replace-live - The find and replace button's live region, which speaks while the button is pending.
- * @csspart find-replace-spinner - The ring the find and replace button turns while it is pending.
- * @csspart find-replace-text - The box the find and replace button's icon sits in.
- * @csspart find-spinner - The ring the Find button turns while it is pending.
- * @csspart find-text - The box the Find button's icon sits in.
+ * @csspart find-replace - The button that replaces the selected match.
+ * @csspart find-replace-all - The button that replaces every match.
+ * @csspart find-replace-all-button - The Replace all button's inner button.
+ * @csspart find-replace-all-live - The Replace all button's live region, which speaks while the button is pending.
+ * @csspart find-replace-all-spinner - The ring the Replace all button turns while it is pending.
+ * @csspart find-replace-all-text - The box the Replace all button's words sits in.
+ * @csspart find-replace-button - The Replace button's inner button.
+ * @csspart find-replace-field - The field the replacement is typed in.
+ * @csspart find-replace-live - The Replace button's live region, which speaks while the button is pending.
+ * @csspart find-replace-spinner - The ring the Replace button turns while it is pending.
+ * @csspart find-replace-text - The box the Replace button's words sits in.
+ * @csspart find-replace-toggle - The button that shows the replace field under the find field. Expanded while it shows. Not drawn while `readonly`.
+ * @csspart find-replace-toggle-button - The find and replace button's inner button.
+ * @csspart find-replace-toggle-live - The find and replace button's live region, which speaks while the button is pending.
+ * @csspart find-replace-toggle-spinner - The ring the find and replace button turns while it is pending.
+ * @csspart find-replace-toggle-text - The box the find and replace button's icon sits in.
+ * @csspart find-toggle - The button in the header that opens and closes the find bar. Expanded while it is open.
+ * @csspart find-toggle-button - The Find button's inner button.
+ * @csspart find-toggle-live - The Find button's live region, which speaks while the button is pending.
+ * @csspart find-toggle-spinner - The ring the Find button turns while it is pending.
+ * @csspart find-toggle-text - The box the Find button's icon sits in.
  * @csspart find-whole-word - The option that finds only whole words. Pressed while it applies.
  * @csspart find-whole-word-button - The whole word button's inner button.
  * @csspart find-whole-word-live - The whole word button's live region, which speaks while the button is pending.
+ * @csspart find-whole-word-pressed - The whole word option while it applies, beside `find-whole-word`.
  * @csspart find-whole-word-spinner - The ring the whole word button turns while it is pending.
  * @csspart find-whole-word-text - The box the whole word button's icon sits in.
  * @csspart header - The strip above the code: the name, the language, and the controls.
@@ -193,27 +212,14 @@ declare const HelixHeadlessCodeEditor_base: (new (...args: any[]) => import("@fu
  * @csspart language - The language's name in the header.
  * @csspart position - The caret's line and column, in the status line.
  * @csspart problem-count - How many problems there are, in the status line.
- * @csspart replace - The button that replaces the selected match.
- * @csspart replace-all - The button that replaces every match.
- * @csspart replace-all-button - The Replace all button's inner button.
- * @csspart replace-all-live - The Replace all button's live region, which speaks while the button is pending.
- * @csspart replace-all-spinner - The ring the Replace all button turns while it is pending.
- * @csspart replace-all-text - The box the Replace all button's words sit in.
- * @csspart replace-button - The Replace button's inner button.
- * @csspart replace-field - The field the replacement is typed in.
- * @csspart replace-live - The Replace button's live region, which speaks while the button is pending.
- * @csspart replace-spinner - The ring the Replace button turns while it is pending.
- * @csspart replace-text - The box the Replace button's words sit in.
  * @csspart status - The strip under the code.
  * @csspart view - Where an engine draws, while one is connected.
  *
  * @cssstate connected - An engine draws the editor.
  * @cssstate find-open - The find bar is open.
  * @cssstate invalid - The editor has an error to show, from `required` or your `feedback`.
- * @cssstate replace-open - The replace field shows under the find field.
  */
 export declare class HelixHeadlessCodeEditor extends HelixHeadlessCodeEditor_base {
-    protected static markRules: string[];
     /**
      * The key this family's words are registered under, its styled tag:
      * `registerWords('de', { 'helix-code-editor': { findLabel: 'Suchen' } })`.
@@ -286,13 +292,10 @@ export declare class HelixHeadlessCodeEditor extends HelixHeadlessCodeEditor_bas
     wrap: boolean;
     /** Where the caret is, as an offset into the value. */
     private caret;
-    /** Whether the find bar is open. */
+    /** Whether the find bar is open, as it last said. */
     private findOpen;
-    /** Where the search stands, or nothing before one. */
-    private found;
-    /** Whether the replace field shows under the find field. */
-    private replaceOpen;
-    private query;
+    /** The find bar drawn now, and how a search is reported to it. */
+    private find;
     private view;
     /** Whether Escape came just before, which lets Tab leave the plain field. */
     private escaped;
@@ -303,8 +306,6 @@ export declare class HelixHeadlessCodeEditor extends HelixHeadlessCodeEditor_bas
     /** The textarea, which the form's validity is read from either way. */
     private get control();
     private get engineState();
-    /** Whether the search can be read, which a regular expression may not be. */
-    private get readable();
     /** Puts the caret in the editor, as a label pointing at it would. */
     focus(options?: FocusOptions): void;
     /** Selects a range of the code and puts the caret there, in the engine or the plain field. */
@@ -319,19 +320,18 @@ export declare class HelixHeadlessCodeEditor extends HelixHeadlessCodeEditor_bas
     private readonly handleViewFocusOut;
     /** Opens the find bar, with the selection as the search where one is selected, and puts focus in its field. */
     private openFind;
-    /** Closes the find bar, takes the marks away, and puts focus back in the code. */
-    private closeFind;
+    /** Hands the find bar drawn now the editor to search through, once per bar. */
+    private attachFind;
+    /** The editor, as the find bar searches through it: the engine, or the plain field. */
+    private readonly finder;
     /** Finds the search and selects a match, in the engine or the plain field. */
-    private search;
-    /** Replaces the selected match, or every match, through `requestValue`. */
-    private replace;
-    /** Turns one of the find bar's options on or off, and searches again with it. */
-    private toggleOption;
+    private findIn;
+    /** Replaces the selected match, or every match, through `requestValue`, and finds the next. */
+    private replaceIn;
+    /** The find bar opened or closed, which the Find button shows. */
+    private readonly handleFindToggle;
     /** The find key opens the find bar from anywhere in the editor, ahead of the browser's own. */
     private readonly handleKeys;
-    private readonly handleFindInput;
-    private readonly handleReplaceInput;
-    private readonly handleFindKeys;
     /** An edit in the textarea, which has taken the character already: put back where it is refused. */
     private readonly handleInput;
     /** Relayed, because `change` does not cross a shadow boundary on its own. */
@@ -343,14 +343,12 @@ export declare class HelixHeadlessCodeEditor extends HelixHeadlessCodeEditor_bas
      * Escape came just before it, which lets the reader leave.
      */
     private readonly handleKeydown;
-    /** The words the find bar's count says, or its regular expression's fault. */
-    private get countText();
     /** The header: the name, the language, and the toolbar of the page's actions and Find. */
     protected renderHeader(): TemplateResult;
     /**
-     * The find bar, kept in the tree while closed so its fields keep what was
-     * typed. The fields stand outside the toolbar, which leaves the arrows to a
-     * text field.
+     * The find bar, a Find of the editor's own that searches the engine or the
+     * plain field, kept in the tree while closed so its fields keep what was
+     * typed. The editor takes the find key itself, so the bar takes none.
      */
     protected renderFind(): TemplateResult;
     /** The problems, each a button that moves the caret to it, in its tone. */
@@ -364,4 +362,3 @@ declare global {
         'helix-headless-code-editor': HelixHeadlessCodeEditor;
     }
 }
-export {};