@adecore/editor 0.22.0 → 0.23.0

package/dist/attribution.d.ts

@@ -1,28 +1,29 @@
 import type { DocumentChange } from '@adecore/editor-core';
+import type { EditorLineHighlight } from './types.ts';
 export declare const AGENT_COLORS: readonly ['--agent-1', '--agent-2', '--agent-3', '--agent-4', '--agent-5', '--agent-6'];
 export interface AttributedLines {
     readonly id: string;
     readonly color: string;
     readonly sign?: string;
     readonly fill?: string;
+    readonly bar?: 'solid' | 'hatched';
+    readonly emphasis?: readonly {
+        from: number;
+        to: number;
+    }[];
 }
 export declare function tintValue(color: string): string;
 export declare function colorValue(color: string): string;
 export declare class AttributionRuns {
     private runs;
     get size(): number;
-    set(marks: readonly {
+    set(marks: readonly (EditorLineHighlight & {
         id: string;
-        startLine: number;
-        endLine: number;
-        color: string;
-        sign?: string;
-        fill?: string;
-    }[], lineCount: number, lineBounds: (line: number) => {
+    })[], lineCount: number, lineBounds: (line: number) => {
         start: number;
         end: number;
     }): void;
     clear(): void;
-    map(changes: readonly DocumentChange[]): void;
+    map(changes: readonly DocumentChange[], map?: (offset: number) => number): void;
     linesIn(first: number, last: number, from: number, to: number, lineOf: (offset: number) => number): Map<number, AttributedLines>;
 }

package/dist/attribution.js

@@ -1,4 +1,4 @@
-import { mapOffset } from './offsets.js';
+import { offsetMapper } from './offsets.js';
 /* The custom properties of the agent palette, defined in `editor.css` for both themes. */
 export const AGENT_COLORS = ['--agent-1', '--agent-2', '--agent-3', '--agent-4', '--agent-5', '--agent-6'];
 /* A color washed out to a background that text stays readable on in either theme. */
@@ -11,8 +11,8 @@ export function colorValue(color) {
 }
 /*
  * The runs of lines a host attributed, anchored by offsets so they follow their text through edits. An
- * edit costs one mapping of two offsets per run, and a read works out the lines of only the runs that
- * reach the lines asked for.
+ * edit maps each run and its emphasized ranges, and a read works out the lines of only the runs
+ * that reach the lines asked for.
  */
 export class AttributionRuns {
     runs = [];
@@ -25,16 +25,38 @@ export class AttributionRuns {
         this.runs = marks.map((mark) => {
             const start = clamp(mark.startLine);
             const end = Math.max(start, clamp(mark.endLine));
-            return { id: mark.id, color: mark.color, sign: mark.sign, fill: mark.fill, from: lineBounds(start).start, to: lineBounds(end).end };
+            const emphasis = (mark.emphasis ?? []).slice(0, end - start + 1).flatMap((ranges, index) => {
+                const bounds = lineBounds(start + index);
+                const length = bounds.end - bounds.start;
+                return ranges.flatMap(([from, to]) => {
+                    if (!Number.isFinite(from) || !Number.isFinite(to)) {
+                        return [];
+                    }
+                    const first = Math.min(length, Math.max(0, Math.trunc(from)));
+                    const last = Math.min(length, Math.max(0, Math.trunc(to)));
+                    return last > first ? [{ from: bounds.start + first, to: bounds.start + last }] : [];
+                });
+            });
+            return {
+                id: mark.id,
+                color: mark.color,
+                sign: mark.sign,
+                fill: mark.fill,
+                bar: mark.bar,
+                from: lineBounds(start).start,
+                to: lineBounds(end).end,
+                emphasis
+            };
         });
     }
     clear() {
         this.runs = [];
     }
-    map(changes) {
+    map(changes, map = offsetMapper(changes)) {
         for (const run of this.runs) {
-            run.from = mapOffset(run.from, changes);
-            run.to = mapOffset(run.to, changes);
+            run.from = map(run.from);
+            run.to = map(run.to);
+            run.emphasis = run.emphasis.map((range) => ({ from: map(range.from), to: map(range.to) })).filter((range) => range.to > range.from);
         }
     }
     /* The run on each line from `first` to `last`, zero-based, where `from` and `to` are the offsets they span; where runs overlap the one set last wins. */
@@ -44,10 +66,23 @@ export class AttributionRuns {
             if (run.to < from || run.from > to) {
                 continue;
             }
-            const value = { id: run.id, color: run.color, sign: run.sign, fill: run.fill };
+            const value = { id: run.id, color: run.color, sign: run.sign, fill: run.fill, bar: run.bar };
+            const emphasis = new Map();
+            for (const range of run.emphasis) {
+                if (range.to <= from || range.from > to) {
+                    continue;
+                }
+                const endLine = Math.min(lineOf(range.to - 1), last);
+                for (let line = Math.max(lineOf(range.from), first); line <= endLine; line++) {
+                    const ranges = emphasis.get(line) ?? [];
+                    ranges.push(range);
+                    emphasis.set(line, ranges);
+                }
+            }
             const end = Math.min(Math.max(lineOf(run.from), lineOf(run.to)), last);
             for (let line = Math.max(lineOf(run.from), first); line <= end; line++) {
-                lines.set(line, value);
+                const ranges = emphasis.get(line);
+                lines.set(line, ranges === undefined ? value : { ...value, emphasis: ranges });
             }
         }
         return lines;

package/dist/bidi.d.ts

@@ -0,0 +1,44 @@
+export declare const BIDI_CONTROLS: {
+    readonly '‪': {
+        readonly label: 'LRE';
+    };
+    readonly '‫': {
+        readonly label: 'RLE';
+    };
+    readonly '‬': {
+        readonly label: 'PDF';
+    };
+    readonly '‭': {
+        readonly label: 'LRO';
+    };
+    readonly '‮': {
+        readonly label: 'RLO';
+    };
+    readonly '⁦': {
+        readonly label: 'LRI';
+    };
+    readonly '⁧': {
+        readonly label: 'RLI';
+    };
+    readonly '⁨': {
+        readonly label: 'FSI';
+    };
+    readonly '⁩': {
+        readonly label: 'PDI';
+    };
+    readonly '‎': {
+        readonly label: 'LRM';
+    };
+    readonly '‏': {
+        readonly label: 'RLM';
+    };
+    readonly '؜': {
+        readonly label: 'ALM';
+    };
+};
+type BidiControl = keyof typeof BIDI_CONTROLS;
+export declare const BIDI_COLUMNS = 3;
+export declare const BIDI_PATTERN: RegExp;
+export declare function bidiControl(character: string): (typeof BIDI_CONTROLS)[BidiControl] | null;
+export declare function visibleBidi(text: string): string;
+export {};

package/dist/bidi.js

@@ -0,0 +1,26 @@
+/* The label drawn for each control character. The boxes are visual: assistive technology reads the raw characters from the input. */
+export const BIDI_CONTROLS = {
+    '‪': { label: 'LRE' },
+    '‫': { label: 'RLE' },
+    '‬': { label: 'PDF' },
+    '‭': { label: 'LRO' },
+    '‮': { label: 'RLO' },
+    '⁦': { label: 'LRI' },
+    '⁧': { label: 'RLI' },
+    '⁨': { label: 'FSI' },
+    '⁩': { label: 'PDI' },
+    '‎': { label: 'LRM' },
+    '‏': { label: 'RLM' },
+    '؜': { label: 'ALM' }
+};
+/* Every label is this many columns wide, so the placeholder is a box of fixed size in the grid. */
+export const BIDI_COLUMNS = 3;
+export const BIDI_PATTERN = /[‪-‮⁦-⁩‎‏؜]/g;
+/* The placeholder of a bidirectional control character, or null for any other text. */
+export function bidiControl(character) {
+    return character.length === 1 ? (BIDI_CONTROLS[character] ?? null) : null;
+}
+/* Text a person reads but the editor never edits, such as a hint or a suggestion: each control is spelled out in brackets so none reaches the DOM. */
+export function visibleBidi(text) {
+    return text.replace(BIDI_PATTERN, (character) => `[${BIDI_CONTROLS[character].label}]`);
+}

package/dist/column-selection.js

@@ -1,3 +1,4 @@
+import { stopCount, xOfStop } from './geometry-stops.js';
 import { TEXT_PADDING } from './layout.js';
 /* The cell of a monospaced grid an x falls in, which stands in for the visual column since a tab is a whole number of cells. */
 export function cellAt(layout, x) {
@@ -25,7 +26,7 @@ export function columnSelections(layout, from, to) {
             continue;
         }
         const geometry = layout.geometry(row);
-        const endX = geometry.rowStarts.length > 1 ? geometry.rowEnds[0] : geometry.before[geometry.before.length - 1];
+        const endX = geometry.rowStarts.length > 1 ? geometry.rowEnds[0] : xOfStop(geometry, stopCount(geometry) - 1);
         const offsetAt = (cell) => layout.offsetAtX(geometry, 0, TEXT_PADDING + cell * charWidth).offset;
         if (cellAt(layout, endX + TEXT_PADDING) < left) {
             if (left === right) {

package/dist/controller.d.ts

@@ -1,5 +1,5 @@
 import type { Keymap } from './keymap-table.ts';
-import type { EditorClickHandler, EditorContextMenu, EditorKeyHandler, EditorRunCommand, EditorSelectionRanges, KeyChord } from './types.ts';
+import type { EditorClickHandler, EditorInlayClickHandler, EditorContextMenu, EditorKeyHandler, EditorRunCommand, EditorSelectionRanges, KeyChord } from './types.ts';
 import type { EditorView } from './view.ts';
 export interface ControllerOptions {
     keymap?: Keymap;
@@ -11,10 +11,13 @@ export interface ControllerOptions {
 export declare class InputController {
     private readonly native;
     private readonly pointer;
+    private readonly touch;
     private readonly cleanup;
     private readonly keyHandlers;
     private readonly gesture;
     private readonly clickHandlers;
+    private readonly inlayHandlers;
+    private lastInlayPress;
     private readonly contextListeners;
     private readonly subscription;
     private historyGroup;
@@ -52,11 +55,13 @@ export declare class InputController {
     private run;
     onKeyDown(handler: EditorKeyHandler): () => void;
     onClick(handler: EditorClickHandler): () => void;
+    onInlayClick(handler: EditorInlayClickHandler): () => void;
     onContextMenu(listener: (menu: EditorContextMenu) => void): () => void;
     private keydown;
     private beforeInput;
     private copy;
     private pointerDown;
+    private takenByInlayHandler;
     private takenByHost;
     private positionOf;
     private contextMenu;

package/dist/controller.js

@@ -5,6 +5,7 @@ import { DoubleModifierGesture } from './modifier-gesture.js';
 import { NativeInput } from './native-input.js';
 import { columnSelections, sameCell } from './column-selection.js';
 import { PointerSelection } from './pointer.js';
+import { TouchSelection } from './touch.js';
 const MODIFYING = new Set([
     'deleteWordLeft',
     'deleteWordRight',
@@ -53,6 +54,8 @@ function selectionSignature(selections) {
 }
 /* Typing in the same stretch is one undo step until a pause this long. */
 const TYPING_PAUSE_MS = 750;
+/* A second press on the same hint within this many milliseconds is a double click. */
+const DOUBLE_PRESS_MS = 500;
 /*
  * What a person does to the editor: keys, typing, the clipboard, an input method, the mouse. It turns
  * each into a command on the model and leaves the drawing to the view.
@@ -60,10 +63,13 @@ const TYPING_PAUSE_MS = 750;
 export class InputController {
     native;
     pointer;
+    touch;
     cleanup = [];
     keyHandlers = new Set();
     gesture;
     clickHandlers = new Set();
+    inlayHandlers = new Set();
+    lastInlayPress = null;
     contextListeners = new Set();
     subscription;
     historyGroup = 0;
@@ -117,6 +123,16 @@ export class InputController {
             focus: () => view.focus(),
             scrolled: () => view.requestRender()
         });
+        this.touch = new TouchSelection({
+            model,
+            offsetAt: (x, y) => view.offsetAtPoint(x, y),
+            camelHumps: () => view.settings.smartKeys.camelHumps,
+            lineAt: (offset) => {
+                const row = view.layout.rowForLine(model.positionAt(offset).line);
+                return row.kind === 'text' ? { from: model.getLine(row.line).start, to: model.getLine(row.lastLine).next } : { from: offset, to: offset };
+            },
+            focus: () => view.focus()
+        });
         this.subscription = model.subscribe(() => {
             if (!this.keepDesiredXs) {
                 this.desiredXs = [];
@@ -165,22 +181,45 @@ export class InputController {
         this.listen(input, 'cut', (event) => this.copy(event, true));
         this.listen(viewport, 'scroll', () => this.view.scrolled());
         this.listen(viewport, 'wheel', () => this.view.cancelScroll());
-        this.listen(viewport, 'touchstart', () => this.view.cancelScroll());
         this.listen(viewport, 'pointermove', (event) => this.view.hoverMoved(event));
-        this.listen(viewport, 'pointerleave', () => this.view.setHover(null));
+        this.listen(viewport, 'pointerleave', () => {
+            this.view.setHover(null);
+            this.view.setInlayHover(null);
+        });
         this.listen(viewport, 'pointerdown', (event) => this.pointerDown(event));
         this.listen(viewport, 'contextmenu', (event) => this.contextMenu(event));
         this.listen(this.view.gutterElement, 'pointerdown', (event) => this.gutterDown(event));
         this.listen(this.view.stickyElement, 'pointerdown', (event) => this.stickyDown(event));
-        const move = (event) => this.pointer.move(event);
+        const move = (event) => {
+            this.pointer.move(event);
+            this.touch.move(event);
+        };
         const end = (event) => {
             this.pointer.end(event);
+            this.touch.end(event);
             this.historyGroup++;
         };
         document.addEventListener('pointermove', move);
         document.addEventListener('pointerup', end);
         document.addEventListener('pointercancel', end);
+        // The on-screen keyboard shrinks the visual viewport and not the layout one, which would leave the caret behind it.
+        const visualViewport = document.defaultView?.visualViewport;
+        let keyboardHeight = visualViewport?.height ?? 0;
+        let keyboardScale = visualViewport?.scale ?? 1;
+        const keyboard = () => {
+            const height = visualViewport?.height ?? 0;
+            const scale = visualViewport?.scale ?? 1;
+            // Zooming in shrinks the visual viewport too, and must not pull the view back to the caret.
+            const shrunk = height < keyboardHeight && scale === keyboardScale;
+            keyboardHeight = height;
+            keyboardScale = scale;
+            if (shrunk && this.view.focused) {
+                this.view.revealCaret();
+            }
+        };
+        visualViewport?.addEventListener('resize', keyboard);
         this.cleanup.push(() => {
+            visualViewport?.removeEventListener('resize', keyboard);
             document.removeEventListener('pointermove', move);
             document.removeEventListener('pointerup', end);
             document.removeEventListener('pointercancel', end);
@@ -189,6 +228,7 @@ export class InputController {
     dispose() {
         this.subscription.dispose();
         this.pointer.dispose();
+        this.touch.dispose();
         for (const remove of this.cleanup) {
             remove();
         }
@@ -267,6 +307,9 @@ export class InputController {
     /* Folding is the view's, since it knows where the ranges are. */
     viewCommand(name) {
         const { view } = this;
+        if (view.settings.folding === false && name !== 'toggleColumnMode') {
+            return false;
+        }
         const run = {
             collapseRegion: () => view.collapseRegion(),
             expandRegion: () => view.expandRegion(),
@@ -580,6 +623,9 @@ export class InputController {
     onClick(handler) {
         return subscribe(this.clickHandlers, handler);
     }
+    onInlayClick(handler) {
+        return subscribe(this.inlayHandlers, handler);
+    }
     onContextMenu(listener) {
         return subscribe(this.contextListeners, listener);
     }
@@ -680,13 +726,48 @@ export class InputController {
         if (event.button !== 0 || target.closest('button, a, input, textarea, [contenteditable], .se-block, .se-gutter, .se-sticky')) {
             return;
         }
+        // Cancels the compatibility mouse events, whose focus change would close the keyboard a tap opened; scrolling is not affected.
         event.preventDefault();
+        if (this.takenByInlayHandler(event)) {
+            return;
+        }
+        if (event.pointerType === 'touch') {
+            this.touch.start(event, 'text', () => this.takenByHost(event));
+            return;
+        }
         if (this.takenByHost(event)) {
             this.view.focus();
             return;
         }
         this.pointer.start(event);
     }
+    /* Whether a handler of the host took a press on a hint, which then moves neither the caret nor the focus. */
+    takenByInlayHandler(event) {
+        const inlay = this.inlayHandlers.size === 0 ? null : this.view.inlayAt(event.target);
+        if (inlay === null) {
+            return false;
+        }
+        const now = Date.now();
+        const again = this.lastInlayPress?.id === inlay.id && now - this.lastInlayPress.at <= DOUBLE_PRESS_MS;
+        this.lastInlayPress = again ? null : { id: inlay.id, at: now };
+        const touch = event.pointerType === 'touch';
+        const click = {
+            id: inlay.id,
+            part: inlay.part,
+            mod: this.options.apple ? event.metaKey : event.ctrlKey,
+            alt: event.altKey,
+            shift: event.shiftKey,
+            clicks: again ? 2 : 1,
+            touch
+        };
+        if (![...this.inlayHandlers].some((handler) => handler(click))) {
+            return false;
+        }
+        if (!touch) {
+            this.view.focus();
+        }
+        return true;
+    }
     /* Whether a handler of the host took a press on a character, such as a Mod+click that follows a name. */
     takenByHost(event) {
         if (this.clickHandlers.size === 0) {
@@ -709,6 +790,10 @@ export class InputController {
         return { line, character: column };
     }
     contextMenu(event) {
+        if (this.contextListeners.size === 0 && this.touch.pressed) {
+            event.preventDefault();
+            return;
+        }
         if (this.contextListeners.size === 0 || event.target?.closest?.('.se-sticky')) {
             return;
         }
@@ -732,6 +817,7 @@ export class InputController {
     }
     /* A press on a line number selects the line. */
     gutterDown(event) {
+        this.view.cancelScroll();
         if (event.button !== 0) {
             return;
         }
@@ -753,6 +839,10 @@ export class InputController {
             this.view.focus();
             return;
         }
+        if (event.pointerType === 'touch') {
+            this.touch.start(event, 'gutter');
+            return;
+        }
         this.pointer.start(event, 'gutter');
         this.view.focus();
     }

package/dist/editor.css

@@ -12,10 +12,14 @@
     --editor-guide-active: color-mix(in srgb, var(--text) 24%, transparent);
     --editor-margin: color-mix(in srgb, var(--text) 14%, transparent);
     --editor-whitespace: color-mix(in srgb, var(--text) 30%, transparent);
+    --editor-bidi: var(--status-needs-you);
     --editor-hatch: color-mix(in srgb, var(--text) 12%, transparent);
     --editor-added: var(--status-idle);
     --editor-modified: var(--accent);
     --editor-deleted: var(--status-error);
+    --editor-mark-number-mix: 72%;
+    --editor-mark-bar-width: 3px;
+    --editor-mark-gap: 4px;
     --editor-sticky-shadow: color-mix(in srgb, black 12%, transparent);
     --agent-1: #c4602f;
     --agent-2: #7c4dd8;
@@ -34,6 +38,7 @@
     --editor-margin: color-mix(in srgb, var(--text) 16%, transparent);
     --editor-whitespace: color-mix(in srgb, var(--text) 32%, transparent);
     --editor-hatch: color-mix(in srgb, var(--text) 10%, transparent);
+    --editor-mark-number-mix: 82%;
     --editor-sticky-shadow: color-mix(in srgb, black 60%, transparent);
 }
 
@@ -69,6 +74,7 @@
     overflow: auto;
     overflow-anchor: none;
     overscroll-behavior: contain;
+    touch-action: pan-x pan-y pinch-zoom;
     scrollbar-width: thin;
     scrollbar-color: color-mix(in srgb, var(--text) 25%, transparent) transparent;
 }
@@ -177,10 +183,23 @@
     white-space: pre;
     letter-spacing: 0;
     direction: ltr;
+    unicode-bidi: bidi-override;
 }
 .se-run {
     position: absolute;
     white-space: pre;
+    unicode-bidi: bidi-override;
+}
+.se-bidi {
+    position: absolute;
+    box-sizing: border-box;
+    overflow: hidden;
+    border-radius: var(--radius-xs);
+    box-shadow: inset 0 0 0 1px var(--editor-bidi);
+    color: var(--editor-bidi);
+    text-align: center;
+    user-select: none;
+    pointer-events: none;
 }
 
 .se-gutter {
@@ -216,6 +235,31 @@
 .se-active-number {
     color: var(--text-muted);
 }
+/* A line a host marked with a bar: the number in a shade of the mark that reads on the tint, and a bar along the edge. */
+/* The tint stops short of the code, so the cell and the line read as two surfaces. */
+.se-line-marked {
+    align-items: flex-start;
+    background: linear-gradient(to right, var(--se-tint, transparent) calc(100% - var(--editor-mark-gap)), transparent 0);
+}
+.se-line-marked > span:first-child {
+    display: flex;
+    align-items: center;
+    height: var(--se-line);
+    color: color-mix(in srgb, var(--se-mark) var(--editor-mark-number-mix), var(--text));
+}
+.se-line-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: var(--editor-mark-bar-width);
+    height: 100%;
+}
+.se-line-bar-solid {
+    background: var(--se-mark);
+}
+.se-line-bar-hatched {
+    background: repeating-linear-gradient(135deg, var(--se-mark) 0 2px, transparent 2px 4px);
+}
 .se-fold-toggle {
     position: absolute;
     top: 0;
@@ -299,6 +343,14 @@
     mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z'/%3E%3C/svg%3E")
         center / contain no-repeat;
 }
+.se-gutter-marker[aria-pressed='true'] {
+    color: var(--accent);
+}
+/* Lucide's book-open. */
+.se-gutter-marker[data-icon='book-open']::before {
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E")
+        center / contain no-repeat;
+}
 .se-change {
     position: absolute;
     top: 0;
@@ -337,9 +389,13 @@
     font-size: max(12px, calc(var(--code-font-size, 13px) - 2px));
     line-height: 1;
 }
-.se-line-highlight {
+.se-line-highlight,
+.se-line-emphasis {
     position: absolute;
 }
+.se-line-emphasis {
+    border-radius: 2px;
+}
 
 /* Code a host draws in a widget row: the editor's face, with the gutter column the document has. */
 .se-code-block {
@@ -685,6 +741,11 @@
     white-space: pre;
     cursor: default;
 }
+.se-inlay-link {
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    cursor: pointer;
+}
 .se-composition {
     position: absolute;
     white-space: pre;
@@ -717,6 +778,13 @@
     white-space: pre-wrap;
     overflow-wrap: anywhere;
 }
+/* Lines the host drew in place of the text: a row in the text column that scrolls with the code, selectable as the page's own text is. */
+.se-block.se-replacement {
+    padding: 0;
+    color: var(--text);
+    white-space: normal;
+    user-select: text;
+}
 /* The host's own row runs the width of the editor over the gutter and under the pinned headers, so the code layer has no stacking of its own. */
 .se-block.se-widget {
     z-index: 4;
@@ -790,6 +858,18 @@
     white-space: pre;
     pointer-events: none;
 }
+.se-sr-only,
+.se-live {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+}
 .se-notice {
     position: absolute;
     right: 16px;