@fusion.dev/helix-headless 0.212.2 → 0.213.0

package/dist/terminal/keys.js

@@ -1,11 +1,16 @@
 import { ariaChord, matchesChord } from '@fusion.dev/helix-core';
 const CHORDS = {
-    apple: { copy: undefined, find: 'cmd+f', 'tab-focus': 'ctrl+shift+m' },
-    other: { copy: 'ctrl+shift+c', find: 'ctrl+shift+f', 'tab-focus': 'ctrl+m' },
+    apple: { copy: undefined, find: 'cmd+f', paste: undefined, 'tab-focus': 'ctrl+shift+m' },
+    other: {
+        copy: 'ctrl+shift+c',
+        find: 'ctrl+shift+f',
+        paste: 'ctrl+shift+v',
+        'tab-focus': 'ctrl+m',
+    },
 };
 export const chordOf = (shortcut, apple) => CHORDS[apple ? 'apple' : 'other'][shortcut];
 export const shortcutOf = (press, apple) => {
-    for (const shortcut of ['copy', 'find', 'tab-focus']) {
+    for (const shortcut of ['copy', 'find', 'paste', 'tab-focus']) {
         const chord = chordOf(shortcut, apple);
         if (chord !== undefined && matchesChord(press, chord, apple)) {
             return shortcut;

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

@@ -7,8 +7,14 @@ import '../../toolbar/index.js';
 export interface TerminalFindOptions {
     /** Toward the top of the output, for the previous match. */
     backward: boolean;
+    /** Whether case has to match, so "Error" does not find "error". */
+    caseSensitive: boolean;
     /** Whether the search is the reader still typing, which stays on the match it has where it still matches. */
     incremental: boolean;
+    /** Whether `query` is a regular expression, in JavaScript's syntax, which the frame has checked reads. */
+    regex: boolean;
+    /** Whether a match has to be a whole word. */
+    wholeWord: boolean;
 }
 /** What the frame asks of whatever draws the terminal, as the frame's settings stand. */
 export interface TerminalSettings {
@@ -120,6 +126,8 @@ export interface TerminalSink {
  *   Shift+Enter move between the matches, and Escape closes the bar and
  *   returns focus to the terminal.
  * - Control+Shift+C copies the selection. On a Mac, Command+C does.
+ * - Control+Shift+V pastes, as it does in the browser, and the program reads
+ *   it as typed text. On a Mac, Command+V does.
  * - Control+M, or Control+Shift+M on a Mac, switches Tab between typing in the
  *   terminal and moving focus out of it. The status line says when Tab moves
  *   focus, and the terminal's input describes the key to a screen reader.
@@ -142,11 +150,14 @@ export interface TerminalSink {
  * @slot clear-icon - Replaces the glyph inside the clear button.
  * @slot copy-icon - Replaces the glyph inside the copy button.
  * @slot exit-actions - Controls of your own beside Restart, shown once the process exits, such as a button that opens the whole log.
- * @slot find-actions - Controls of your own in the find bar, between the count and the buttons that move between matches.
+ * @slot find-actions - Controls of your own in the find bar, between its options and the buttons that move between matches.
  * @slot find-close-icon - Replaces the glyph inside the button that closes the find bar.
  * @slot find-icon - Replaces the glyph inside the find button.
+ * @slot find-match-case-icon - Replaces the glyph inside the match case button.
  * @slot find-next-icon - Replaces the glyph inside the next match button.
  * @slot find-previous-icon - Replaces the glyph inside the previous match button.
+ * @slot find-regex-icon - Replaces the glyph inside the regular expression button.
+ * @slot find-whole-word-icon - Replaces the glyph inside the whole word button.
  * @slot fullscreen-icon - Replaces the glyph inside the fullscreen button.
  * @slot label - The terminal's name in the header, such as an icon beside the shell's name. Replaces `label` there.
  * @slot restart-icon - Replaces the glyph inside the Restart button.
@@ -187,6 +198,11 @@ export interface TerminalSink {
  * @csspart find-count - Which match is current and how many there are, such as "3 of 12 matches".
  * @csspart find-field - The search field in the find bar.
  * @csspart find-live - The find button's live region, which speaks while the button is pending.
+ * @csspart find-match-case - The button that matches case in the find bar. Pressed while it does.
+ * @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-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 moves to the next match.
  * @csspart find-next-button - The next match button's inner button.
  * @csspart find-next-live - The next match button's live region, which speaks while the button is pending.
@@ -197,8 +213,18 @@ export interface TerminalSink {
  * @csspart find-previous-live - The previous match button's live region, which speaks while the button is pending.
  * @csspart find-previous-spinner - The ring the previous match button turns while it is pending.
  * @csspart find-previous-text - The box the previous match button's icon sits in.
+ * @csspart find-regex - The button that reads the find field as a regular expression. Pressed while it does.
+ * @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-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-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-whole-word - The button that matches whole words only in the find bar. Pressed while it does.
+ * @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-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 fullscreen - The button that makes the terminal fill the screen. Pressed while it does.
  * @csspart fullscreen-button - The fullscreen button's inner button.
  * @csspart fullscreen-live - The fullscreen button's live region, which speaks while the button is pending.
@@ -285,12 +311,32 @@ export declare class HelixHeadlessTerminal extends HelixElement {
     findCloseLabel: string;
     /** The name of the find bar's row of buttons, read by screen readers. */
     findControlsLabel: string;
+    /** What the find bar says when its regular expression cannot be read. */
+    findInvalidLabel: string;
     /** The find button's label, and the find field's name and placeholder. */
     findLabel: string;
+    /**
+     * Whether the find bar matches case, so "Error" does not find "error". The
+     * reader turns it on and off from the bar.
+     */
+    findMatchCase: boolean;
+    /** The match case button's label. */
+    findMatchCaseLabel: string;
     /** The next match button's label. */
     findNextLabel: string;
     /** The previous match button's label. */
     findPreviousLabel: string;
+    /**
+     * Whether the find bar reads what the reader types as a regular expression,
+     * in JavaScript's syntax. The reader turns it on and off from the bar.
+     */
+    findRegex: boolean;
+    /** The regular expression button's label. */
+    findRegexLabel: string;
+    /** Whether the find bar matches whole words only. The reader turns it on and off from the bar. */
+    findWholeWord: boolean;
+    /** The whole word button's label. */
+    findWholeWordLabel: string;
     /** The fullscreen button's label. */
     fullscreenLabel: string;
     /** The name of the element the reader types into, which the renderer draws. */
@@ -336,6 +382,8 @@ export declare class HelixHeadlessTerminal extends HelixElement {
     private matchIndex;
     /** How many matches the search found, or `undefined` before one ran. */
     private matchCount;
+    /** Whether the regular expression in the field cannot be read, which the count says instead. */
+    private invalid;
     /** Whether Tab moves focus, after Control+M. */
     private tabMovesFocus;
     /** Whether any text is selected in the grid. */
@@ -437,6 +485,8 @@ export declare class HelixHeadlessTerminal extends HelixElement {
     private closeFind;
     /** Searches for what the field holds, toward the bottom or with `backward` toward the top. */
     private search;
+    /** Turns one of the find bar's options on or off, and searches again with it, staying on a match that still matches. */
+    private toggleOption;
     private readonly handleFindInput;
     private readonly handleFindKeys;
     /** Copies the selection, and says so. */

package/dist/terminal/root/terminal-root.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { CopyController, customElement, drawIcon, FullscreenController, formatWords, HelixElement, HelixTerminalBellEvent, HelixTerminalInputEvent, HelixTerminalLinkEvent, HelixTerminalResizeEvent, HelixTerminalRestartEvent, HelixTerminalTitleEvent, numberConverter, onApple, stopPress, words, } from '@fusion.dev/helix-core';
-import { arrowClockwise, broom, caretDown, caretUp, copy, cornersOut, magnifyingGlass, x, } from '@fusion.dev/helix-icons';
+import { arrowClockwise, asterisk, broom, caretDown, caretUp, copy, cornersOut, magnifyingGlass, textAa, textAUnderline, x, } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { keyed } from 'lit/directives/keyed.js';
@@ -10,6 +10,15 @@ import '../../button/index.js';
 import '../../icon-button/index.js';
 import '../../toolbar/index.js';
 import { isTab, shortcutOf, spokenChord } from '../keys.js';
+const readable = (source) => {
+    try {
+        new RegExp(source);
+        return true;
+    }
+    catch {
+        return false;
+    }
+};
 const ANSI = ['black', 'red', 'green', 'yellow', 'blue', 'magenta', 'cyan', 'white'];
 const camel = (name) => name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
 const unset = (color) => color === '' || color === 'transparent' || /^rgba\(\s*0,\s*0,\s*0,\s*0\s*\)$/.test(color);
@@ -27,9 +36,16 @@ let HelixHeadlessTerminal = class HelixHeadlessTerminal extends HelixElement {
         this.fallbackLabel = 'Terminal';
         this.findCloseLabel = 'Close find';
         this.findControlsLabel = 'Find controls';
+        this.findInvalidLabel = 'Not a valid regular expression';
         this.findLabel = 'Find';
+        this.findMatchCase = false;
+        this.findMatchCaseLabel = 'Match case';
         this.findNextLabel = 'Next match';
         this.findPreviousLabel = 'Previous match';
+        this.findRegex = false;
+        this.findRegexLabel = 'Use regular expression';
+        this.findWholeWord = false;
+        this.findWholeWordLabel = 'Match whole word';
         this.fullscreenLabel = 'Fill the screen';
         this.inputLabel = 'Terminal input';
         this.label = '';
@@ -44,6 +60,7 @@ let HelixHeadlessTerminal = class HelixHeadlessTerminal extends HelixElement {
         this.query = '';
         this.matchIndex = -1;
         this.matchCount = undefined;
+        this.invalid = false;
         this.tabMovesFocus = false;
         this.anySelected = false;
         this.hasActions = false;
@@ -83,6 +100,10 @@ let HelixHeadlessTerminal = class HelixHeadlessTerminal extends HelixElement {
                 void this.copySelection();
                 return;
             }
+            if (shortcut === 'paste') {
+                event.stopPropagation();
+                return;
+            }
             if (shortcut === 'tab-focus') {
                 event.preventDefault();
                 event.stopPropagation();
@@ -279,6 +300,9 @@ let HelixHeadlessTerminal = class HelixHeadlessTerminal extends HelixElement {
                 : renderer.find !== undefined;
     }
     get countText() {
+        if (this.invalid) {
+            return this.findInvalidLabel;
+        }
         return this.matchCount === undefined
             ? ''
             : formatWords(this, 'matchesLabel', {
@@ -365,12 +389,28 @@ let HelixHeadlessTerminal = class HelixHeadlessTerminal extends HelixElement {
         this.focus();
     }
     search(backward, incremental = false) {
-        if (this.query === '') {
+        if (this.query === '' || (this.findRegex && !readable(this.query))) {
+            this.invalid = this.query !== '';
             this.matchCount = undefined;
             this.renderer?.findEnd?.();
+            if (this.invalid) {
+                this.say(this.findInvalidLabel);
+            }
             return;
         }
-        this.renderer?.find?.(this.query, { backward, incremental });
+        this.invalid = false;
+        this.renderer?.find?.(this.query, {
+            backward,
+            caseSensitive: this.findMatchCase,
+            incremental,
+            regex: this.findRegex,
+            wholeWord: this.findWholeWord,
+        });
+    }
+    toggleOption(option) {
+        this[option] = !this[option];
+        this.renderer?.findEnd?.();
+        this.search(false, true);
     }
     async copySelection() {
         const text = this.renderer?.selection?.() ?? '';
@@ -488,6 +528,36 @@ let HelixHeadlessTerminal = class HelixHeadlessTerminal extends HelixElement {
       />
       <span part="find-count" aria-hidden="true">${this.countText}</span>
       <${toolbar} part="find-controls" exportparts="toolbar: find-controls-toolbar" label=${this.findControlsLabel}>
+        <${button}
+          part="find-match-case"
+          exportparts="button: find-match-case-button, live: find-match-case-live, spinner: find-match-case-spinner, text: find-match-case-text"
+          aria-pressed=${this.findMatchCase ? 'true' : 'false'}
+          label=${this.findMatchCaseLabel}
+          @click=${() => this.toggleOption('findMatchCase')}
+          @helix-press=${stopPress}
+        >
+          <slot name="find-match-case-icon">${drawIcon(textAa)}</slot>
+        </${button}>
+        <${button}
+          part="find-whole-word"
+          exportparts="button: find-whole-word-button, live: find-whole-word-live, spinner: find-whole-word-spinner, text: find-whole-word-text"
+          aria-pressed=${this.findWholeWord ? 'true' : 'false'}
+          label=${this.findWholeWordLabel}
+          @click=${() => this.toggleOption('findWholeWord')}
+          @helix-press=${stopPress}
+        >
+          <slot name="find-whole-word-icon">${drawIcon(textAUnderline)}</slot>
+        </${button}>
+        <${button}
+          part="find-regex"
+          exportparts="button: find-regex-button, live: find-regex-live, spinner: find-regex-spinner, text: find-regex-text"
+          aria-pressed=${this.findRegex ? 'true' : 'false'}
+          label=${this.findRegexLabel}
+          @click=${() => this.toggleOption('findRegex')}
+          @helix-press=${stopPress}
+        >
+          <slot name="find-regex-icon">${drawIcon(asterisk)}</slot>
+        </${button}>
         <slot name="find-actions" part="find-actions"></slot>
         <${button}
           part="find-previous"
@@ -615,10 +685,21 @@ __decorate([
     words,
     property({ attribute: 'find-controls-label' })
 ], HelixHeadlessTerminal.prototype, "findControlsLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'find-invalid-label' })
+], HelixHeadlessTerminal.prototype, "findInvalidLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'find-label' })
 ], HelixHeadlessTerminal.prototype, "findLabel", void 0);
+__decorate([
+    property({ attribute: 'find-match-case', type: Boolean })
+], HelixHeadlessTerminal.prototype, "findMatchCase", void 0);
+__decorate([
+    words,
+    property({ attribute: 'find-match-case-label' })
+], HelixHeadlessTerminal.prototype, "findMatchCaseLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'find-next-label' })
@@ -627,6 +708,20 @@ __decorate([
     words,
     property({ attribute: 'find-previous-label' })
 ], HelixHeadlessTerminal.prototype, "findPreviousLabel", void 0);
+__decorate([
+    property({ attribute: 'find-regex', type: Boolean })
+], HelixHeadlessTerminal.prototype, "findRegex", void 0);
+__decorate([
+    words,
+    property({ attribute: 'find-regex-label' })
+], HelixHeadlessTerminal.prototype, "findRegexLabel", void 0);
+__decorate([
+    property({ attribute: 'find-whole-word', type: Boolean })
+], HelixHeadlessTerminal.prototype, "findWholeWord", void 0);
+__decorate([
+    words,
+    property({ attribute: 'find-whole-word-label' })
+], HelixHeadlessTerminal.prototype, "findWholeWordLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'fullscreen-label' })
@@ -679,6 +774,9 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessTerminal.prototype, "matchCount", void 0);
+__decorate([
+    state()
+], HelixHeadlessTerminal.prototype, "invalid", void 0);
 __decorate([
     state()
 ], HelixHeadlessTerminal.prototype, "tabMovesFocus", void 0);