@fusion.dev/helix-headless 0.219.0 → 0.221.0

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

@@ -1,10 +1,11 @@
-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. */
-export interface EditorDiagnostic {
+export interface CodeEditorDiagnostic {
     /** Where it starts and ends, as offsets into the value. */
     from: number;
     message: string;
@@ -13,8 +14,8 @@ export interface EditorDiagnostic {
     tone?: 'danger' | 'info' | 'warning';
 }
 /** What an editor shows, which an engine draws. */
-export interface EditorEngineState {
-    diagnostics: readonly EditorDiagnostic[];
+export interface CodeEditorEngineState {
+    diagnostics: readonly CodeEditorDiagnostic[];
     /** The editor's name, for the engine's text area. */
     label: string;
     /** The language to highlight, such as `ts`, `css`, `md` or `rust`. Empty is plain text. */
@@ -26,14 +27,14 @@ export interface EditorEngineState {
     wrap: boolean;
 }
 /** What the editor tells the engine, which the engine calls as the reader works. */
-export interface EditorEngineListeners {
+export interface CodeEditorEngineListeners {
     /** The caret or selection moved, as offsets into the value. */
     caret?(from: number, to: number): void;
     /** The reader changed the text. Returns whether the change stands, so the engine can refuse one the page refused. */
     change(value: string): boolean;
 }
 /** What the find bar asks an engine to look for. */
-export interface EditorFindQuery {
+export interface CodeEditorFindQuery {
     caseSensitive: boolean;
     regex: boolean;
     /** What Replace puts in place of a match. */
@@ -42,12 +43,12 @@ export interface EditorFindQuery {
     wholeWord: boolean;
 }
 /** Where a search stands: how many matches, and which is selected, counting from 0, or -1 for none. */
-export interface EditorFindResult {
+export interface CodeEditorFindResult {
     count: number;
     index: number;
 }
 /** An engine drawing one editor, which the editor drives. */
-export interface EditorEngineView {
+export interface CodeEditorEngineView {
     /** Takes the engine out of the page. */
     destroy(): void;
     /**
@@ -55,34 +56,34 @@ export interface EditorEngineView {
      * or previous from the selected one. Marks every match while the find bar
      * is open.
      */
-    find?(query: EditorFindQuery, direction: 'first' | 'next' | 'previous'): EditorFindResult;
+    find?(query: CodeEditorFindQuery, direction: 'first' | 'next' | 'previous'): CodeEditorFindResult;
     /** Takes the marks a search drew away, as the find bar closes. */
     findEnd?(): void;
     /** Puts the caret in the engine's text area. */
     focus?(): void;
     /** Replaces the selected match, or every match, and returns where the search stands after. */
-    replace?(query: EditorFindQuery, all: boolean): EditorFindResult;
+    replace?(query: CodeEditorFindQuery, all: boolean): CodeEditorFindResult;
     /** Selects a range, scrolls it into view and puts the caret there. */
     select?(from: number, to: number): void;
     /** Shows a new state: a value set from outside, a language, diagnostics. */
-    update(state: EditorEngineState): void;
+    update(state: CodeEditorEngineState): void;
 }
 /**
  * Something that draws a code editor, such as CodeMirror through
- * `@fusion.dev/helix-editor`. The editor hands it an element to draw in.
+ * `@fusion.dev/helix-code-editor`. The editor hands it an element to draw in.
  */
-export interface EditorEngine {
-    mount(parent: HTMLElement, state: EditorEngineState, listeners: EditorEngineListeners): EditorEngineView;
+export interface CodeEditorEngine {
+    mount(parent: HTMLElement, state: CodeEditorEngineState, listeners: CodeEditorEngineListeners): CodeEditorEngineView;
 }
 /** Each diagnostic's line, counted from 1, by its start, from one pass over the value. */
-export declare const diagnosticLines: (value: string, diagnostics: readonly EditorDiagnostic[]) => number[];
+export declare const diagnosticLines: (value: string, diagnostics: readonly CodeEditorDiagnostic[]) => number[];
 /** The line and column an offset is at, each counted from 1. */
 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.
@@ -91,8 +92,8 @@ declare const HelixHeadlessCodeEditor_base: (new (...args: any[]) => import("@fu
  * A pane for working on a file: a header with its name, its language and the
  * page's own actions, the code, the problems in it, and a status line that
  * says where the caret is. On its own the code is a `<textarea>` in the code
- * face. Connect an engine and it draws the code instead: `connectEditor` from
- * `@fusion.dev/helix-editor` connects CodeMirror, with highlighting in your
+ * face. Connect an engine and it draws the code instead: `connectCodeEditor` from
+ * `@fusion.dev/helix-code-editor` connects CodeMirror, with highlighting in your
  * theme's syntax colors, line numbers, folding, bracket matching and history.
  * The value, the form, validation and the events stay the editor's, so a page
  * reads and writes it the same either way.
@@ -118,7 +119,7 @@ declare const HelixHeadlessCodeEditor_base: (new (...args: any[]) => import("@fu
  *
  * @since 0.216.0
  * @status experimental
- * @category inputs
+ * @category editors
  * @aliases Code editor, CodeMirror, File editor, IDE, Monaco
  * @documentation https://fusion.dev/helix/components/code-editor
  *
@@ -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' } })`.
@@ -229,14 +235,14 @@ export declare class HelixHeadlessCodeEditor extends HelixHeadlessCodeEditor_bas
     /** How one problem in the list reads. `{line}` is its line and `{message}` what it says. */
     diagnosticLabel: string;
     /** The problems in the text, each underlined and listed under the editor. */
-    diagnostics: readonly EditorDiagnostic[];
+    diagnostics: readonly CodeEditorDiagnostic[];
     /** The list of problems' name. */
     diagnosticsLabel: string;
     /**
      * What draws the editor, such as `codeMirrorEngine()` from
-     * `@fusion.dev/helix-editor`. Absent, the editor is a plain text field.
+     * `@fusion.dev/helix-code-editor`. Absent, the editor is a plain text field.
      */
-    engine: EditorEngine | undefined;
+    engine: CodeEditorEngine | undefined;
     /** The name of the find bar's Close button. */
     findCloseLabel: string;
     /** The name of the find bar's toolbar, read by screen readers. */
@@ -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 {};