@aceshooting/lyra-ui 1.2.0 → 2.1.0

package/dist/components/json-viewer/json-viewer.d.ts

@@ -0,0 +1,70 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/**
+ * `<lyra-json-viewer>` — a collapsible, copyable tree view for an arbitrary
+ * JSON-serializable value (object/array/string/number/boolean/null/
+ * undefined). Serves as the fallback renderer wherever a raw payload (tool
+ * call arguments, a tool result, an API response) needs inspecting without a
+ * bespoke view.
+ *
+ * Expand/collapse state is keyed by structural path (not by object identity),
+ * so it survives a `data` reassignment that keeps the same shape -- e.g. a
+ * streaming tool result being patched in place.
+ *
+ * @customElement lyra-json-viewer
+ * @event lyra-copy - `detail: { text }` -- fired by the top-level copy button or a per-node one. Fires even when `navigator.clipboard` silently failed or is unavailable (insecure context, older browser, stubbed-out test environment), so a consumer can still observe copy *intent*.
+ * @csspart base - The root scroll container; respects `max-height`.
+ * @csspart toolbar - The wrapper around the top-level copy button (only rendered when `copyable`).
+ * @csspart tree - The wrapper around the rendered node tree.
+ * @csspart key - An object property key or array index label.
+ * @csspart value - A primitive value's text -- carries `data-type` (`string`/`number`/`boolean`/`null`/`undefined`, or `circular` for a self-reference marker in place of a re-visited container's subtree) for per-type coloring, and `data-match` while it matches `search`.
+ * @csspart bracket - A `{`, `}`, `[`, or `]` delimiter.
+ * @csspart toggle - A container node's expand/collapse button (hidden, but present for row alignment, on leaf/empty nodes).
+ * @csspart copy-button - A copy-to-clipboard button -- the top-level one (in `toolbar`, labelled "Copy JSON to clipboard") or a per-node one (only rendered when `copyable`; labelled with its own key/type, e.g. "Copy age", so assistive tech can tell rows apart).
+ */
+export declare class LyraJsonViewer extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The value to render. Any JSON-serializable value, plus `undefined`. */
+    data: unknown;
+    /** Nodes at or beyond this nesting depth (root = 0) start collapsed. Omit/undefined: nothing auto-collapses. */
+    collapsedDepth?: number;
+    /** A CSS length (e.g. `"20rem"`); once set, the viewer scrolls internally past this height instead of growing the page. */
+    maxHeight: string;
+    /** Shows copy-to-clipboard affordances: one for the whole value, plus one per node. */
+    copyable: boolean;
+    /** Case-insensitive substring match against keys/values; matches are highlighted and their ancestors auto-expanded. */
+    search: string;
+    /**
+     * Per-path (`JSON.stringify(path)`) explicit expand/collapse, overriding
+     * the `collapsedDepth`/search defaults once a node's toggle has been used.
+     * Pruned in `willUpdate()` (to the paths still reachable in the tree)
+     * whenever `data` changes, so a long-lived instance bound to reshaping
+     * data -- this component's own stated streaming use case -- doesn't
+     * accumulate one entry per path ever toggled for the life of the instance.
+     */
+    private expandedOverrides;
+    /** Memoized result of the last `computeSearch()` walk -- see `willUpdate()`. */
+    private searchState;
+    private isExpanded;
+    private toggleNode;
+    private writeClipboard;
+    private copy;
+    /**
+     * Builds the key/value-match sets, the ancestor-paths-of-a-match set that
+     * `search` drives, and the full set of path keys reachable in the tree
+     * (`paths`, used to prune `expandedOverrides` -- see `willUpdate()`).
+     * Guards against a self-referencing `data` the same way `renderNode()`
+     * does: a container value already on the current recursion path is
+     * treated as a leaf instead of being walked again.
+     */
+    private computeSearch;
+    private renderCopyButton;
+    private renderNode;
+    protected willUpdate(changed: PropertyValues): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-json-viewer': LyraJsonViewer;
+    }
+}

package/dist/components/json-viewer/json-viewer.js

@@ -0,0 +1,361 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { chevronIcon } from '../../internal/icons.js';
+import { styles } from './json-viewer.styles.js';
+const EMPTY_SEARCH = {
+    keyMatches: new Set(),
+    valueMatches: new Set(),
+    forceExpand: new Set(),
+    paths: new Set(),
+};
+function isPlainContainer(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+/** `[key, value]` pairs for an object's own enumerable properties or an array's indices; `[]` for anything else. */
+function entriesOf(value) {
+    if (Array.isArray(value))
+        return value.map((v, i) => [i, v]);
+    if (isPlainContainer(value))
+        return Object.entries(value);
+    return [];
+}
+function valueType(value) {
+    if (value === null)
+        return 'null';
+    if (value === undefined)
+        return 'undefined';
+    if (Array.isArray(value))
+        return 'array';
+    const t = typeof value;
+    if (t === 'string' || t === 'number' || t === 'boolean')
+        return t;
+    if (t === 'object')
+        return 'object';
+    // function/symbol/bigint -- not valid JSON, but rendering *something*
+    // sensible beats throwing on a value a caller handed us by mistake.
+    return 'string';
+}
+function formatPrimitive(value, type) {
+    switch (type) {
+        case 'string':
+            // `type` here also covers valueType()'s function/symbol/bigint
+            // fallback (see the comment there) -- JSON.stringify() throws a
+            // TypeError for a BigInt, so only an actual string gets the
+            // quoted/escaped treatment; everything else falls back to a plain
+            // String() coercion, which renders "sensibly" without throwing.
+            return typeof value === 'string' ? JSON.stringify(value) : String(value);
+        case 'null':
+            return 'null';
+        case 'undefined':
+            return 'undefined';
+        default:
+            return String(value);
+    }
+}
+function previewText(value, type, count) {
+    if (type === 'array')
+        return `${count} ${count === 1 ? 'item' : 'items'}`;
+    return `${count} ${count === 1 ? 'key' : 'keys'}`;
+}
+/**
+ * `<lyra-json-viewer>` — a collapsible, copyable tree view for an arbitrary
+ * JSON-serializable value (object/array/string/number/boolean/null/
+ * undefined). Serves as the fallback renderer wherever a raw payload (tool
+ * call arguments, a tool result, an API response) needs inspecting without a
+ * bespoke view.
+ *
+ * Expand/collapse state is keyed by structural path (not by object identity),
+ * so it survives a `data` reassignment that keeps the same shape -- e.g. a
+ * streaming tool result being patched in place.
+ *
+ * @customElement lyra-json-viewer
+ * @event lyra-copy - `detail: { text }` -- fired by the top-level copy button or a per-node one. Fires even when `navigator.clipboard` silently failed or is unavailable (insecure context, older browser, stubbed-out test environment), so a consumer can still observe copy *intent*.
+ * @csspart base - The root scroll container; respects `max-height`.
+ * @csspart toolbar - The wrapper around the top-level copy button (only rendered when `copyable`).
+ * @csspart tree - The wrapper around the rendered node tree.
+ * @csspart key - An object property key or array index label.
+ * @csspart value - A primitive value's text -- carries `data-type` (`string`/`number`/`boolean`/`null`/`undefined`, or `circular` for a self-reference marker in place of a re-visited container's subtree) for per-type coloring, and `data-match` while it matches `search`.
+ * @csspart bracket - A `{`, `}`, `[`, or `]` delimiter.
+ * @csspart toggle - A container node's expand/collapse button (hidden, but present for row alignment, on leaf/empty nodes).
+ * @csspart copy-button - A copy-to-clipboard button -- the top-level one (in `toolbar`, labelled "Copy JSON to clipboard") or a per-node one (only rendered when `copyable`; labelled with its own key/type, e.g. "Copy age", so assistive tech can tell rows apart).
+ */
+export class LyraJsonViewer extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** A CSS length (e.g. `"20rem"`); once set, the viewer scrolls internally past this height instead of growing the page. */
+        this.maxHeight = '';
+        /** Shows copy-to-clipboard affordances: one for the whole value, plus one per node. */
+        this.copyable = false;
+        /** Case-insensitive substring match against keys/values; matches are highlighted and their ancestors auto-expanded. */
+        this.search = '';
+        /**
+         * Per-path (`JSON.stringify(path)`) explicit expand/collapse, overriding
+         * the `collapsedDepth`/search defaults once a node's toggle has been used.
+         * Pruned in `willUpdate()` (to the paths still reachable in the tree)
+         * whenever `data` changes, so a long-lived instance bound to reshaping
+         * data -- this component's own stated streaming use case -- doesn't
+         * accumulate one entry per path ever toggled for the life of the instance.
+         */
+        this.expandedOverrides = new Map();
+        /** Memoized result of the last `computeSearch()` walk -- see `willUpdate()`. */
+        this.searchState = EMPTY_SEARCH;
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    isExpanded(pathKey, depth, forceExpand) {
+        const override = this.expandedOverrides.get(pathKey);
+        if (override !== undefined)
+            return override;
+        if (forceExpand.has(pathKey))
+            return true;
+        if (this.collapsedDepth !== undefined && depth >= this.collapsedDepth)
+            return false;
+        return true;
+    }
+    toggleNode(pathKey, currentlyExpanded) {
+        const next = new Map(this.expandedOverrides);
+        next.set(pathKey, !currentlyExpanded);
+        this.expandedOverrides = next;
+    }
+    writeClipboard(text) {
+        try {
+            // navigator.clipboard is absent in insecure contexts / older browsers,
+            // and some engines throw synchronously rather than rejecting -- either
+            // way this is best-effort; copy() below always emits lyra-copy
+            // regardless of whether the OS clipboard was actually reached.
+            void navigator.clipboard?.writeText(text)?.catch(() => { });
+        }
+        catch {
+            // see above
+        }
+    }
+    copy(value) {
+        const text = value === undefined
+            ? 'undefined'
+            : // A BigInt anywhere inside `value` (not just at the root) throws a
+                // TypeError from the default JSON.stringify() serializer the same
+                // way formatPrimitive()'s unguarded call used to -- the replacer
+                // downgrades it to its decimal string form instead.
+                JSON.stringify(value, (_key, v) => (typeof v === 'bigint' ? v.toString() : v), 2);
+        this.writeClipboard(text);
+        this.emit('lyra-copy', { text });
+    }
+    /**
+     * Builds the key/value-match sets, the ancestor-paths-of-a-match set that
+     * `search` drives, and the full set of path keys reachable in the tree
+     * (`paths`, used to prune `expandedOverrides` -- see `willUpdate()`).
+     * Guards against a self-referencing `data` the same way `renderNode()`
+     * does: a container value already on the current recursion path is
+     * treated as a leaf instead of being walked again.
+     */
+    computeSearch() {
+        const query = this.search.trim().toLowerCase();
+        const keyMatches = new Set();
+        const valueMatches = new Set();
+        const forceExpand = new Set();
+        const paths = new Set();
+        const ancestors = new WeakSet();
+        const markAncestors = (path) => {
+            for (let i = path.length - 1; i >= 0; i--)
+                forceExpand.add(JSON.stringify(path.slice(0, i)));
+        };
+        const walk = (value, path, keyLabel) => {
+            const pathKey = JSON.stringify(path);
+            paths.add(pathKey);
+            const type = valueType(value);
+            if (query) {
+                let hit = false;
+                if (keyLabel !== undefined && keyLabel.toLowerCase().includes(query)) {
+                    keyMatches.add(pathKey);
+                    hit = true;
+                }
+                if (type !== 'object' && type !== 'array' && formatPrimitive(value, type).toLowerCase().includes(query)) {
+                    valueMatches.add(pathKey);
+                    hit = true;
+                }
+                if (hit)
+                    markAncestors(path);
+            }
+            if ((type === 'object' || type === 'array') && !ancestors.has(value)) {
+                ancestors.add(value);
+                for (const [k, v] of entriesOf(value))
+                    walk(v, [...path, k], String(k));
+                ancestors.delete(value);
+            }
+        };
+        walk(this.data, []);
+        return { keyMatches, valueMatches, forceExpand, paths };
+    }
+    renderCopyButton(value, label) {
+        if (!this.copyable)
+            return nothing;
+        return html `
+      <button
+        part="copy-button"
+        type="button"
+        aria-label="Copy ${label ?? 'value'}"
+        @click=${(e) => {
+            e.stopPropagation();
+            this.copy(value);
+        }}
+      >
+        Copy
+      </button>
+    `;
+    }
+    renderNode(value, path, keyLabel, depth, search, ancestors) {
+        const pathKey = JSON.stringify(path);
+        const type = valueType(value);
+        // A container value already on the current recursion path (i.e. `data`
+        // self-references, directly or through a longer cycle) gets rendered as
+        // a leaf marker instead of recursing again -- recursing would blow the
+        // stack instead of degrading gracefully.
+        const isCircular = (type === 'object' || type === 'array') && ancestors.has(value);
+        const isContainer = (type === 'object' || type === 'array') && !isCircular;
+        const entries = isContainer ? entriesOf(value) : [];
+        const hasEntries = entries.length > 0;
+        const expanded = hasEntries && this.isExpanded(pathKey, depth, search.forceExpand);
+        const indentStyle = `padding-inline-start:calc(${depth} * var(--lyra-space-l))`;
+        const toggleLabel = keyLabel ?? (type === 'array' ? 'array' : type === 'object' ? 'object' : 'value');
+        const openBracket = type === 'array' ? '[' : '{';
+        const closeBracket = type === 'array' ? ']' : '}';
+        // Computed eagerly -- in this same synchronous call, rather than left for
+        // lit-html's `repeat` directive to invoke lazily during commit -- so the
+        // `ancestors.add()`/`.delete()` pair below brackets exactly the values on
+        // the real recursive descent through *this* subtree, regardless of
+        // whenever lit-html itself gets around to resolving the directive.
+        let childRows = [];
+        if (isContainer && expanded) {
+            ancestors.add(value);
+            childRows = entries.map(([k, v]) => this.renderNode(v, [...path, k], String(k), depth + 1, search, ancestors));
+            ancestors.delete(value);
+        }
+        const headRow = html `
+      <div class="row" style=${indentStyle}>
+        <button
+          part="toggle"
+          type="button"
+          ?hidden=${!hasEntries}
+          tabindex=${hasEntries ? nothing : -1}
+          aria-hidden=${hasEntries ? nothing : 'true'}
+          aria-expanded=${hasEntries ? (expanded ? 'true' : 'false') : nothing}
+          aria-label=${hasEntries ? `${expanded ? 'Collapse' : 'Expand'} ${toggleLabel}` : nothing}
+          @click=${() => hasEntries && this.toggleNode(pathKey, expanded)}
+        >
+          <span class="chevron" style=${`transform:rotate(${expanded ? '90deg' : '0deg'})`}>${chevronIcon()}</span>
+        </button>
+        ${keyLabel !== undefined
+            ? html `<span part="key" ?data-match=${search.keyMatches.has(pathKey)}>${keyLabel}</span
+              ><span class="colon">:</span>`
+            : nothing}
+        ${isCircular
+            ? html `
+              <span part="bracket">${openBracket}</span>
+              <span part="value" data-type="circular">Circular reference</span>
+              <span part="bracket">${closeBracket}</span>
+            `
+            : isContainer
+                ? html `
+                <span part="bracket">${openBracket}</span>
+                ${hasEntries && !expanded
+                    ? html `<span class="preview">${previewText(value, type, entries.length)}</span>`
+                    : nothing}
+                ${!expanded ? html `<span part="bracket">${closeBracket}</span>` : nothing}
+              `
+                : html `<span part="value" data-type=${type} ?data-match=${search.valueMatches.has(pathKey)}
+                >${formatPrimitive(value, type)}</span
+              >`}
+        ${this.renderCopyButton(value, toggleLabel)}
+      </div>
+    `;
+        // Always returned from this one call site, with a single conditional
+        // hole for the children block -- switching between *returning headRow
+        // bare* and *wrapping it in a bigger template* (two different template
+        // shapes at the same tree position) would make lit-html tear down and
+        // recreate the whole subtree on every expand/collapse instead of
+        // patching in place, destroying the toggle button's DOM identity (and
+        // with it, real DOM focus) on every click.
+        return html `
+      ${headRow}
+      ${isContainer && expanded
+            ? html `
+            <div class="children">
+              ${repeat(entries, ([k]) => JSON.stringify([...path, k]), (_entry, i) => childRows[i])}
+            </div>
+            <div class="row" style=${indentStyle}>
+              <span class="toggle-space" aria-hidden="true"></span>
+              <span part="bracket">${closeBracket}</span>
+            </div>
+          `
+            : nothing}
+    `;
+    }
+    willUpdate(changed) {
+        if (!this.hasUpdated || changed.has('data') || changed.has('search')) {
+            const next = this.computeSearch();
+            if (!this.hasUpdated || changed.has('data')) {
+                // A path with no entry in `next.paths` no longer exists anywhere in
+                // the new tree, so its override has nothing left to apply to --
+                // dropping it here (rather than never, as before) is what keeps a
+                // long-lived instance bound to reshaping data from accumulating one
+                // Map entry per distinct path ever toggled over its whole lifetime.
+                let pruned = null;
+                for (const key of this.expandedOverrides.keys()) {
+                    if (!next.paths.has(key)) {
+                        pruned ??= new Map(this.expandedOverrides);
+                        pruned.delete(key);
+                    }
+                }
+                if (pruned)
+                    this.expandedOverrides = pruned;
+            }
+            this.searchState = next;
+        }
+    }
+    render() {
+        return html `
+      <div part="base" style=${this.maxHeight ? `--lyra-json-viewer-max-height:${this.maxHeight}` : nothing}>
+        ${this.copyable
+            ? html `<div part="toolbar">
+              <button
+                part="copy-button"
+                type="button"
+                aria-label="Copy JSON to clipboard"
+                @click=${() => this.copy(this.data)}
+              >
+                Copy
+              </button>
+            </div>`
+            : nothing}
+        <div part="tree">${this.renderNode(this.data, [], undefined, 0, this.searchState, new WeakSet())}</div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], LyraJsonViewer.prototype, "data", void 0);
+__decorate([
+    property({ type: Number, attribute: 'collapsed-depth' })
+], LyraJsonViewer.prototype, "collapsedDepth", void 0);
+__decorate([
+    property({ attribute: 'max-height' })
+], LyraJsonViewer.prototype, "maxHeight", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraJsonViewer.prototype, "copyable", void 0);
+__decorate([
+    property()
+], LyraJsonViewer.prototype, "search", void 0);
+__decorate([
+    state()
+], LyraJsonViewer.prototype, "expandedOverrides", void 0);
+defineElement('json-viewer', LyraJsonViewer);

package/dist/components/json-viewer/json-viewer.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/json-viewer/json-viewer.styles.js

@@ -0,0 +1,177 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    /* Consumer-tunable scroll cap -- 'none' means the viewer grows with its
+       content, matching every other block-level component in this library
+       until a caller opts into an internal scrollbar via the max-height
+       attribute. */
+    --lyra-json-viewer-max-height: none;
+    /* Contained here (rather than left as a bare font-family literal) so a
+       host page can retheme it, same rationale as --lyra-widget-overlay-color
+       in widget.styles.ts -- no shared --wa-*/--lyra-* monospace token exists
+       to resolve through. */
+    --lyra-json-viewer-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-family: var(--lyra-json-viewer-font);
+    font-size: 0.8125rem;
+    line-height: 1.6;
+  }
+  [part='base'] {
+    display: block;
+    max-block-size: var(--lyra-json-viewer-max-height);
+    overflow: auto;
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    background: var(--lyra-color-surface);
+  }
+  [part='toolbar'] {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 1;
+    display: flex;
+    justify-content: flex-end;
+    padding: var(--lyra-space-xs) var(--lyra-space-s);
+    border-block-end: 1px solid var(--lyra-color-border);
+    background: var(--lyra-color-surface);
+  }
+  [part='tree'] {
+    padding: var(--lyra-space-s);
+  }
+  .row {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--lyra-space-xs);
+    min-inline-size: 0;
+    border-radius: var(--lyra-radius);
+  }
+  .row:hover {
+    background: var(--lyra-color-brand-quiet);
+  }
+  .row:hover [part='copy-button'],
+  .row:focus-within [part='copy-button'] {
+    opacity: 1;
+  }
+  [part='toggle'] {
+    /* Deliberately smaller than the shared --lyra-icon-button-size (2.5rem,
+       meant for a standalone icon-only button) -- this sits inline in a
+       dense, arbitrarily-deep tree row, same reasoning as lyra-tree-node's
+       own toggle. */
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
+    margin-block-start: 0.1875rem;
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    background: none;
+    color: var(--lyra-color-text-quiet);
+    border-radius: var(--lyra-radius);
+    cursor: pointer;
+  }
+  /* The UA '[hidden] { display: none }' rule is author-overridable by any
+     same-origin declaration for that element regardless of specificity --
+     author rules always win over user-agent rules unless !important is
+     involved -- so this only needs to add visibility, not re-declare
+     display. Keeping the box (rather than display:none) preserves this
+     leaf/empty row's alignment with sibling rows that do have a chevron. */
+  [part='toggle'][hidden] {
+    visibility: hidden;
+  }
+  [part='toggle'] .chevron {
+    display: inline-flex;
+    transition: transform var(--lyra-transition-fast);
+  }
+  [part='toggle']:not([hidden]):hover {
+    background: var(--lyra-color-brand-quiet);
+    color: var(--lyra-color-brand);
+  }
+  [part='toggle']:focus-visible,
+  [part='copy-button']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  .toggle-space {
+    inline-size: 1.25rem;
+    flex: 0 0 auto;
+  }
+  [part='key'] {
+    flex: 0 0 auto;
+    font-weight: 600;
+    color: var(--lyra-color-text);
+  }
+  .colon {
+    flex: 0 0 auto;
+    color: var(--lyra-color-text-quiet);
+    margin-inline-end: var(--lyra-space-xs);
+  }
+  [part='bracket'] {
+    flex: 0 0 auto;
+    color: var(--lyra-color-text-quiet);
+  }
+  [part='key'][data-match],
+  [part='value'][data-match] {
+    background: var(--lyra-color-warning-quiet);
+    border-radius: 0.1875rem;
+    box-shadow: 0 0 0 0.125rem var(--lyra-color-warning-quiet);
+  }
+  [part='value'] {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+    white-space: pre-wrap;
+  }
+  [part='value'][data-type='string'] {
+    color: var(--lyra-color-success);
+  }
+  [part='value'][data-type='number'] {
+    color: var(--lyra-color-brand);
+  }
+  [part='value'][data-type='boolean'] {
+    color: var(--lyra-color-warning);
+  }
+  [part='value'][data-type='null'],
+  [part='value'][data-type='undefined'],
+  [part='value'][data-type='circular'] {
+    color: var(--lyra-color-text-quiet);
+    font-style: italic;
+  }
+  .preview {
+    flex: 0 0 auto;
+    color: var(--lyra-color-text-quiet);
+    font-style: italic;
+    margin-inline: var(--lyra-space-xs);
+  }
+  [part='copy-button'] {
+    flex: 0 0 auto;
+    margin-inline-start: auto;
+    border: none;
+    background: none;
+    color: var(--lyra-color-text-quiet);
+    font: inherit;
+    font-size: 0.75rem;
+    line-height: 1;
+    padding: 0.125rem var(--lyra-space-xs);
+    border-radius: var(--lyra-radius);
+    cursor: pointer;
+  }
+  [part='copy-button']:hover {
+    background: var(--lyra-color-brand-quiet);
+    color: var(--lyra-color-brand);
+  }
+  /* Per-node copy buttons stay out of the way until the row is actually
+     being interacted with -- the toolbar's own top-level copy button is
+     exempt (it has no ancestor .row, so this rule never matches it). */
+  .row [part='copy-button'] {
+    opacity: 0;
+  }
+  .row [part='copy-button']:focus-visible {
+    opacity: 1;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [part='toggle'] .chevron {
+      transition: none !important;
+    }
+  }
+`;