@fusion.dev/helix 0.172.0 → 0.173.0

package/dist/sandbox/root/sandbox-root.js

@@ -13,7 +13,19 @@ const DEFAULT_SPLIT = 50;
 const DEFAULT_PANEL = 160;
 const PANEL_MAX = 0.8;
 const PANE_KEYS = { css: 'styles', html: 'source', js: 'script' };
-const isPaneName = (name) => typeof name === 'string' && Object.hasOwn(PANE_KEYS, name);
+const MODULE = /\.m?js$/;
+const MANIFEST = 'package.json';
+const isPaneName = (name) => typeof name === 'string' &&
+    (Object.hasOwn(PANE_KEYS, name) || MODULE.test(name) || name === MANIFEST);
+const dependenciesOf = (text) => {
+    try {
+        const { dependencies } = JSON.parse(text);
+        return { ...dependencies };
+    }
+    catch {
+        return undefined;
+    }
+};
 const nameOf = (pane) => {
     const { name } = pane;
     return typeof name === 'string' ? name : (pane.getAttribute('name') ?? '');
@@ -30,11 +42,15 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         this.defaultSplit = DEFAULT_SPLIT;
         this.filesLabel = 'Files';
         this.lead = 'source';
+        this.modifiedLabel = 'Modified';
         this.panelCollapsedSize = 0;
         this.panelLabel = 'Resize panel';
         this.panelSize = DEFAULT_PANEL;
         this.previewDelay = 300;
         this.edits = new Map();
+        this.given = new Map();
+        this.texts = new Map();
+        this.drawnModified = new Map();
         this.resting = new DelayController(this, { renders: false });
         this.runEdits = () => {
             for (const [name, value] of this.edits) {
@@ -65,7 +81,7 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
             event.preventDefault();
             this.chooseFile(pane);
             void this.updateComplete.then(() => {
-                this.renderRoot.querySelector(`[part="file"][aria-selected="true"]`)?.focus();
+                this.renderRoot.querySelector(`[part~="file"][aria-selected="true"]`)?.focus();
             });
         };
         this.bodyHeight = 0;
@@ -81,13 +97,22 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
             const { value } = event.detail;
             const pane = event.composedPath()[0];
             const name = pane?.name;
-            if (!isPaneName(name)) {
-                return;
-            }
+            const source = this.sources.find((each) => each === pane || each.contains(pane));
             queueMicrotask(() => {
                 if (event.defaultPrevented) {
                     return;
                 }
+                if (source) {
+                    this.texts.set(source, value);
+                    const modified = this.modifiedOf(source);
+                    if (this.drawnModified.get(source) !== modified) {
+                        this.drawnModified.set(source, modified);
+                        this.requestUpdate();
+                    }
+                }
+                if (!isPaneName(name)) {
+                    return;
+                }
                 this.edits.set(name, value);
                 if (this.previewDelay > 0) {
                     this.resting.start(this.previewDelay, this.runEdits);
@@ -99,10 +124,12 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         };
         this.seed = () => {
             this.readFiles();
-            const slot = this.renderRoot.querySelector('slot[name="source"]');
-            for (const pane of slot?.assignedElements({ flatten: true }) ?? []) {
+            for (const pane of this.sources) {
                 const { name, value } = pane;
                 const text = typeof value === 'string' ? value : pane.getAttribute('value');
+                if (text !== null && !this.given.has(pane)) {
+                    this.given.set(pane, text);
+                }
                 if (isPaneName(name) && text) {
                     this.write(name, text, true);
                 }
@@ -166,12 +193,42 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         };
     }
     static { this.words = 'helix-sandbox'; }
+    get sources() {
+        const slot = this.renderRoot.querySelector('slot[name="source"]');
+        return slot?.assignedElements({ flatten: true }) ?? [];
+    }
+    modifiedOf(pane) {
+        const { modified } = pane;
+        if (typeof modified === 'boolean') {
+            return modified;
+        }
+        return this.texts.has(pane) && this.texts.get(pane) !== this.given.get(pane);
+    }
+    reset() {
+        for (const pane of this.sources) {
+            const { reset } = pane;
+            const text = this.given.get(pane);
+            const name = nameOf(pane);
+            if (typeof reset === 'function') {
+                reset.call(pane);
+            }
+            else if (text !== undefined && this.modifiedOf(pane)) {
+                ;
+                pane.value = text;
+                this.texts.delete(pane);
+                if (isPaneName(name)) {
+                    this.write(name, text, false);
+                }
+            }
+        }
+        this.drawnModified.clear();
+        this.requestUpdate();
+    }
     get shownFile() {
         return this.files.find((pane) => nameOf(pane) === this.file) ?? this.files[0];
     }
     readFiles() {
-        const slot = this.renderRoot.querySelector('slot[name="source"]');
-        const panes = slot?.assignedElements({ flatten: true }) ?? [];
+        const panes = this.sources;
         const files = panes.length > 1 ? panes : [];
         if (files.length !== this.files.length || files.some((pane, at) => pane !== this.files[at])) {
             this.files = files;
@@ -192,10 +249,13 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         return html `<div part="files" role="tablist" aria-label=${this.filesLabel} @keydown=${this.handleFileKey}>
       ${this.files.map((pane, at) => {
             const selected = pane === shown;
-            return html `<button part="file" id=${`file-${at}`} role="tab" type="button"
-          aria-controls="files-panel" aria-selected=${selected ? 'true' : 'false'}
+            const modified = this.modifiedOf(pane);
+            return html `<button part="file${modified ? ' file-modified' : ''}" id=${`file-${at}`}
+          role="tab" type="button" aria-controls="files-panel"
+          aria-describedby=${modified ? 'modified' : nothing} aria-selected=${selected ? 'true' : 'false'}
           tabindex=${selected ? '0' : '-1'} @click=${() => this.chooseFile(pane)}>${fileOf(pane)}</button>`;
         })}
+      <span id="modified" hidden>${this.modifiedLabel}</span>
     </div>`;
     }
     showFile() {
@@ -240,14 +300,24 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         if (!(target instanceof Node)) {
             return false;
         }
-        const slot = this.renderRoot.querySelector('slot[name="source"]');
-        return (slot?.assignedElements({ flatten: true }) ?? []).some((pane) => pane === target || pane.contains(target));
+        return this.sources.some((pane) => pane === target || pane.contains(target));
     }
     write(name, value, seeding) {
+        const dependencies = name === MANIFEST ? dependenciesOf(value) : undefined;
         for (const preview of this.previews) {
-            const key = PANE_KEYS[name];
-            if (!seeding || !preview[key]) {
-                preview[key] = value;
+            if (Object.hasOwn(PANE_KEYS, name)) {
+                const key = PANE_KEYS[name];
+                if (!seeding || !preview[key]) {
+                    preview[key] = value;
+                }
+            }
+            else if (dependencies) {
+                if (!seeding || !preview.dependencies) {
+                    preview.dependencies = dependencies;
+                }
+            }
+            else if (MODULE.test(name) && (!seeding || preview.modules?.[name] === undefined)) {
+                preview.modules = { ...preview.modules, [name]: value };
             }
         }
     }
@@ -394,9 +464,10 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         if (changed.has('files') || changed.has('file')) {
             this.showFile();
         }
+        this.toggleState('modified', this.sources.some((pane) => this.modifiedOf(pane)));
         if (this.files.length > 0) {
             auditName(this, () => {
-                const tabs = [...this.renderRoot.querySelectorAll('[part="file"]')];
+                const tabs = [...this.renderRoot.querySelectorAll('[part~="file"]')];
                 return tabs.find((tab) => !tab.textContent?.trim()) ?? tabs[0];
             }, 'Give each source pane a `label` or a `name`, which its file tab shows.');
         }
@@ -459,6 +530,10 @@ __decorate([
 __decorate([
     property()
 ], HelixSandbox.prototype, "lead", void 0);
+__decorate([
+    words,
+    property({ attribute: 'modified-label' })
+], HelixSandbox.prototype, "modifiedLabel", void 0);
 __decorate([
     property()
 ], HelixSandbox.prototype, "orientation", void 0);

package/dist/sandbox/source/editing.d.ts

@@ -0,0 +1,111 @@
+/**
+ * The editing commands of the source pane, as functions from the source and
+ * the selection to the change they make. Kept apart from the element so each
+ * can be read and tested on text alone.
+ */
+/** A change to the source: `text` in place of what is between `from` and `to`, and the selection after it. */
+export interface SourceEdit {
+    /** Where the replaced text starts. */
+    from: number;
+    /** The selection after the change, its start and its end. */
+    selection: readonly [number, number];
+    /** What replaces the text between `from` and `to`. Empty where the change only moves the caret. */
+    text: string;
+    /** Where the replaced text ends. */
+    to: number;
+}
+/** The comment markers of each syntax: a line marker, or the two around a block. */
+declare const COMMENTS: {
+    readonly css: readonly ['/*', '*/'];
+    readonly html: readonly ['<!--', '-->'];
+    readonly js: readonly ['//'];
+};
+/** A syntax the comment command knows. */
+export type CommentSyntax = keyof typeof COMMENTS;
+/**
+ * The syntax of a pane, read from its `name`: `html`, `css` and `js`, or the
+ * extension of a file name such as `utils.js`. `ts`, `jsx`, `tsx`, `mjs` and
+ * `cjs` are `js`. Anything else has no comments.
+ */
+export declare const syntaxOf: (name: string) => CommentSyntax | undefined;
+/** Indents each line a selection touches by `unit`, leaving blank lines as they are. */
+export declare const indentLines: (source: string, from: number, to: number, unit?: string) => SourceEdit | undefined;
+/** Takes one level of indentation, two spaces or a tab, off each line a selection touches. */
+export declare const outdentLines: (source: string, from: number, to: number) => SourceEdit | undefined;
+/**
+ * What Enter does: a new line with the indentation of the line it breaks, one
+ * level deeper after an opening bracket, and with the closing bracket on a
+ * line of its own where the caret is between a pair. `undefined` for a line
+ * at the margin with no bracket before the caret, which takes the platform's
+ * own Enter.
+ */
+export declare const breakLine: (source: string, from: number, to: number, unit?: string) => SourceEdit | undefined;
+/**
+ * Comments out the lines a selection touches, or uncomments them where they
+ * already are a comment.
+ *
+ * `js` comments each line with `//` at the indentation the lines share. `css`
+ * and `html`, which have no line comment, put one block comment around the
+ * text of the lines.
+ */
+export declare const toggleComment: (source: string, from: number, to: number, syntax: CommentSyntax) => SourceEdit | undefined;
+/**
+ * What typing `key` does where brackets close: a bracket or quote typed with
+ * text selected goes around the text, one typed before a space or the end of
+ * the line closes as well, and a closing one typed before the same character
+ * steps over it. `undefined` where the key types as usual.
+ *
+ * A quote after a letter or a digit is an apostrophe and does not close.
+ */
+export declare const closeBracket: (source: string, from: number, to: number, key: string) => SourceEdit | undefined;
+/**
+ * What Backspace does between a bracket or quote and the character that
+ * closes it, where brackets close: it deletes both.
+ */
+export declare const deletePair: (source: string, from: number, to: number) => SourceEdit | undefined;
+/** A bracket beside the caret, and the bracket that pairs with it where there is one. */
+export interface BracketMatch {
+    /** Where the bracket beside the caret is. */
+    at: number;
+    /** Where the bracket that pairs with it is, or `undefined` where none does. */
+    match: number | undefined;
+}
+/**
+ * The bracket beside the caret and its pair: the one before the caret first,
+ * then the one after it. `skip` leaves out positions inside strings and
+ * comments, where a highlighter has said which those are.
+ */
+export declare const matchBracket: (source: string, at: number, skip?: (index: number) => boolean) => BracketMatch | undefined;
+/** The completions for the word before the caret, and where that word starts. */
+export interface Completions {
+    /** Where the word being completed starts. */
+    from: number;
+    /** The words that complete it, in alphabetical order. */
+    words: string[];
+}
+/**
+ * The completions for the word before the caret: every longer word in the
+ * source or in `extra` that starts with it, whatever its case. `undefined`
+ * where the caret follows no word or nothing completes it.
+ */
+export declare const suggest: (source: string, at: number, extra?: readonly string[]) => Completions | undefined;
+/** The parts of a custom elements manifest that `manifestWords` reads. */
+export interface ManifestLike {
+    modules?: readonly {
+        declarations?: readonly {
+            attributes?: readonly {
+                name: string;
+            }[];
+            cssProperties?: readonly {
+                name: string;
+            }[];
+            tagName?: string;
+        }[];
+    }[];
+}
+/**
+ * The tag names, attribute names and CSS custom properties a custom elements
+ * manifest lists, for a source pane's `completions`. Each name is listed once.
+ */
+export declare const manifestWords: (manifest: ManifestLike) => string[];
+export {};

package/dist/sandbox/source/editing.js

@@ -0,0 +1,185 @@
+const PAIRS = {
+    "'": "'",
+    '"': '"',
+    '(': ')',
+    '[': ']',
+    '{': '}',
+    '`': '`',
+};
+const OPENERS = '([{';
+const CLOSERS = ')]}';
+const BEFORE = /^(?:$|[\s)\]}>;:,"'`])/;
+const COMMENTS = {
+    css: ['/*', '*/'],
+    html: ['<!--', '-->'],
+    js: ['//'],
+};
+export const syntaxOf = (name) => {
+    const extension = name.slice(name.lastIndexOf('.') + 1);
+    if (extension === 'css' || extension === 'html') {
+        return extension;
+    }
+    return /^[cm]?[jt]sx?$/.test(extension) ? 'js' : undefined;
+};
+const linesOf = (source, from, to) => {
+    const start = source.lastIndexOf('\n', from - 1) + 1;
+    const last = to > from && source[to - 1] === '\n' ? to - 1 : to;
+    const end = source.indexOf('\n', last);
+    return [start, end < 0 ? source.length : end];
+};
+const clamp = (at, low, high) => Math.min(high, Math.max(low, at));
+const eachLine = (source, from, to, change) => {
+    const [start, end] = linesOf(source, from, to);
+    const before = source.slice(start, end).split('\n');
+    const after = before.map(change);
+    const text = after.join('\n');
+    if (text === source.slice(start, end)) {
+        return undefined;
+    }
+    const moved = from + (after[0] ?? '').length - (before[0] ?? '').length;
+    const head = from === start && from !== to ? from : clamp(moved, start, start + text.length);
+    const tail = from === to ? head : Math.max(head, to + text.length - (end - start));
+    return { from: start, selection: [head, tail], text, to: end };
+};
+export const indentLines = (source, from, to, unit = '  ') => eachLine(source, from, to, (line) => (line.trim() === '' ? line : `${unit}${line}`));
+export const outdentLines = (source, from, to) => eachLine(source, from, to, (line) => line.replace(/^(?: {1,2}|\t)/, ''));
+export const breakLine = (source, from, to, unit = '  ') => {
+    const start = source.lastIndexOf('\n', from - 1) + 1;
+    const indent = /^[ \t]*/.exec(source.slice(start, from))?.[0] ?? '';
+    const opens = OPENERS.indexOf(source[from - 1] ?? '\n');
+    if (opens < 0 && indent === '') {
+        return undefined;
+    }
+    const line = `\n${indent}${opens < 0 ? '' : unit}`;
+    const text = opens >= 0 && source[to] === CLOSERS[opens] ? `${line}\n${indent}` : line;
+    return { from, selection: [from + line.length, from + line.length], text, to };
+};
+const literal = (text) => text.replace(/[*/]/g, '\\$&');
+export const toggleComment = (source, from, to, syntax) => {
+    const [open, close] = COMMENTS[syntax];
+    const [start, end] = linesOf(source, from, to);
+    const block = source.slice(start, end);
+    if (close === undefined) {
+        const filled = block.split('\n').filter((line) => line.trim() !== '');
+        const on = filled.length > 0 && filled.every((line) => line.trimStart().startsWith(open));
+        const indent = Math.min(...filled.map((line) => line.length - line.trimStart().length));
+        const marker = new RegExp(`^(\\s*)${literal(open)} ?`);
+        return eachLine(source, from, to, (line) => {
+            if (line.trim() === '') {
+                return line;
+            }
+            return on
+                ? line.replace(marker, '$1')
+                : `${line.slice(0, indent)}${open} ${line.slice(indent)}`;
+        });
+    }
+    const lead = block.length - block.trimStart().length;
+    const body = block.trim();
+    const trail = block.slice(lead + body.length);
+    const commented = body.length >= open.length + close.length && body.startsWith(open) && body.endsWith(close);
+    const inner = commented
+        ? body
+            .slice(open.length, body.length - close.length)
+            .replace(/^ /, '')
+            .replace(/ $/, '')
+        : `${open} ${body} ${close}`;
+    const text = `${block.slice(0, lead)}${inner}${trail}`;
+    const shift = commented ? -(open.length + (body[open.length] === ' ' ? 1 : 0)) : open.length + 1;
+    const head = clamp(from >= start + lead ? from + shift : from, start, start + text.length);
+    const tail = from === to ? head : Math.max(head, to + text.length - block.length);
+    return { from: start, selection: [head, tail], text, to: end };
+};
+export const closeBracket = (source, from, to, key) => {
+    const closer = PAIRS[key];
+    const next = source.slice(to);
+    if (from === to && (CLOSERS.includes(key) || closer === key) && next.startsWith(key)) {
+        return { from, selection: [from + 1, from + 1], text: '', to };
+    }
+    if (closer === undefined) {
+        return undefined;
+    }
+    if (from !== to) {
+        return {
+            from,
+            selection: [from + 1, to + 1],
+            text: `${key}${source.slice(from, to)}${closer}`,
+            to,
+        };
+    }
+    if (!BEFORE.test(next) || (closer === key && /[\w'"`]$/.test(source.slice(0, from)))) {
+        return undefined;
+    }
+    return { from, selection: [from + 1, from + 1], text: `${key}${closer}`, to };
+};
+export const deletePair = (source, from, to) => {
+    const opener = source[from - 1];
+    if (from !== to || opener === undefined || PAIRS[opener] !== source[from]) {
+        return undefined;
+    }
+    return { from: from - 1, selection: [from - 1, from - 1], text: '', to: from + 1 };
+};
+const REACH = 10_000;
+export const matchBracket = (source, at, skip = () => false) => {
+    for (const index of [at - 1, at]) {
+        const bracket = source[index];
+        if (bracket === undefined || skip(index)) {
+            continue;
+        }
+        const opens = OPENERS.indexOf(bracket);
+        const closes = CLOSERS.indexOf(bracket);
+        if (opens < 0 && closes < 0) {
+            continue;
+        }
+        const step = opens < 0 ? -1 : 1;
+        const other = opens < 0 ? OPENERS[closes] : CLOSERS[opens];
+        let depth = 0;
+        for (let look = index; look >= 0 && look < source.length && Math.abs(look - index) < REACH; look += step) {
+            if (skip(look)) {
+                continue;
+            }
+            if (source[look] === bracket) {
+                depth += 1;
+            }
+            else if (source[look] === other) {
+                depth -= 1;
+                if (depth === 0) {
+                    return { at: index, match: look };
+                }
+            }
+        }
+        return { at: index, match: undefined };
+    }
+    return undefined;
+};
+const OFFERED = 50;
+const WORDS = /[\w$-]*[A-Za-z_$][\w$-]*/g;
+export const suggest = (source, at, extra = []) => {
+    const word = /[\w$-]*$/.exec(source.slice(Math.max(0, at - 100), at))?.[0] ?? '';
+    if (!/[A-Za-z_$]/.test(word)) {
+        return undefined;
+    }
+    const start = word.toLowerCase();
+    const pool = new Set([...extra, ...(source.match(WORDS) ?? [])]);
+    const words = [...pool]
+        .filter((each) => each.length > word.length && each.toLowerCase().startsWith(start))
+        .sort((a, b) => a.localeCompare(b))
+        .slice(0, OFFERED);
+    return words.length > 0 ? { from: at - word.length, words } : undefined;
+};
+export const manifestWords = (manifest) => {
+    const names = new Set();
+    for (const module of manifest.modules ?? []) {
+        for (const declaration of module.declarations ?? []) {
+            if (declaration.tagName) {
+                names.add(declaration.tagName);
+            }
+            for (const { name } of [
+                ...(declaration.attributes ?? []),
+                ...(declaration.cssProperties ?? []),
+            ]) {
+                names.add(name);
+            }
+        }
+    }
+    return [...names];
+};

package/dist/sandbox/source/sandbox-source.css.js

@@ -1,4 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {display: block;block-size: 100%;}[part="highlight"],
 [part="source"] {border: none;color: var(--helix-color-foreground-muted);font-family: var(--helix-font-mono);font-size: max(var(--helix-text-field-min), var(--helix-text-xs));inline-size: 100%;line-height: var(--helix-leading-normal);min-block-size: var(--sandbox-source-min-block-size, 12rem);padding: var(--helix-space-sm);tab-size: 2;}[part="source"] {background-color: var(--sandbox-source-background-color, var(--helix-color-background));block-size: 100%;display: block;resize: none;}[part="source"]:focus-visible {background-color: var(--helix-color-surface);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="field"] {background-color: var(--sandbox-source-background-color, var(--helix-color-background));block-size: 100%;display: grid;grid-template-rows: minmax(max-content, auto);overflow: auto;}[part="field"]:focus-within {background-color: var(--helix-color-surface);}[part="field"]:has(> [part="source"]:focus-visible) {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="field"] > [part] {grid-area: 1 / 1;letter-spacing: normal;margin: 0;overflow-wrap: break-word;white-space: pre-wrap;}[part="field"] > [part="source"],
-[part="field"] > [part="source"]:focus-visible {-webkit-text-fill-color: transparent;align-self: stretch;background-color: transparent;block-size: auto;caret-color: var(--helix-color-foreground);color: transparent;outline: none;overflow: hidden;}:host([line-numbers]) [part="field"] > [part] {padding-inline-start: calc(var(--helix-space-sm) * 3 + var(--_sandbox-source-gutter, 1ch));}:host([line-numbers]) [part="highlight"] {counter-reset: line;}[part="line"] {counter-increment: line;display: block;min-block-size: 1lh;position: relative;}[part="line"]::before {color: var(--sandbox-source-line-number-color, var(--helix-color-foreground-subtle));content: counter(line);inset-inline-end: calc(100% + var(--helix-space-sm) * 2);position: absolute;text-align: end;}[data-kind="callable"] {color: var(--sandbox-source-callable-color, var(--helix-color-syntax-callable));}[data-kind="comment"] {color: var(--sandbox-source-comment-color, var(--helix-color-syntax-comment));}[data-kind="constant"] {color: var(--sandbox-source-constant-color, var(--helix-color-syntax-constant));}[data-kind="invalid"] {color: var(--sandbox-source-invalid-color, var(--helix-color-syntax-invalid));}[data-kind="keyword"] {color: var(--sandbox-source-keyword-color, var(--helix-color-syntax-keyword));}[data-kind="name"] {color: var(--sandbox-source-name-color, var(--helix-color-syntax-name));}[data-kind="string"] {color: var(--sandbox-source-string-color, var(--helix-color-syntax-string));}[data-kind="tag"] {color: var(--sandbox-source-tag-color, var(--helix-color-syntax-tag));}`);
+[part="field"] > [part="source"]:focus-visible {-webkit-text-fill-color: transparent;align-self: stretch;background-color: transparent;block-size: auto;caret-color: var(--helix-color-foreground);color: transparent;outline: none;overflow: hidden;}:host([line-numbers]) [part="field"] > [part] {padding-inline-start: calc(var(--helix-space-sm) * 3 + var(--_sandbox-source-gutter, 1ch));}:host([line-numbers]) [part="highlight"] {counter-reset: line;}[part="line"] {counter-increment: line;display: block;min-block-size: 1lh;position: relative;}[part="line"]::before {color: var(--sandbox-source-line-number-color, var(--helix-color-foreground-subtle));content: counter(line);inset-inline-end: calc(100% + var(--helix-space-sm) * 2);position: absolute;text-align: end;}[data-kind="callable"] {color: var(--sandbox-source-callable-color, var(--helix-color-syntax-callable));}[data-kind="comment"] {color: var(--sandbox-source-comment-color, var(--helix-color-syntax-comment));}[data-kind="constant"] {color: var(--sandbox-source-constant-color, var(--helix-color-syntax-constant));}[data-kind="invalid"] {color: var(--sandbox-source-invalid-color, var(--helix-color-syntax-invalid));}[data-kind="keyword"] {color: var(--sandbox-source-keyword-color, var(--helix-color-syntax-keyword));}[data-kind="name"] {color: var(--sandbox-source-name-color, var(--helix-color-syntax-name));}[data-kind="string"] {color: var(--sandbox-source-string-color, var(--helix-color-syntax-string));}[data-kind="tag"] {color: var(--sandbox-source-tag-color, var(--helix-color-syntax-tag));}[part="field"]:focus-within [part~="bracket"] {background-color: var(--sandbox-source-bracket-color, var(--helix-color-accent-subtle));border-radius: var(--helix-radii-sm);}[part="field"]:focus-within [part~="bracket-unmatched"] {background-color: transparent;color: var(--sandbox-source-invalid-color, var(--helix-color-syntax-invalid));}[part="field"] {position: relative;}[part="completions"] {background-color: var(--helix-color-surface-overlay);border: var(--sandbox-source-completions-border-width, var(--helix-border-floating)) solid
+var(--helix-color-border);border-radius: var(--helix-radii-sm);box-shadow: var(--sandbox-source-completions-shadow, var(--helix-shadow-floating));font-family: var(--helix-font-mono);font-size: max(var(--helix-text-field-min), var(--helix-text-xs));max-block-size: 12rem;min-inline-size: 8rem;overflow-y: auto;padding: var(--helix-space-2xs);position: absolute;z-index: 1;}[part~="completion"] {border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground);cursor: pointer;padding: var(--helix-space-2xs) var(--helix-space-xs);white-space: nowrap;}[part~="completion-active"] {background-color: var(--helix-color-accent-surface);}`);