@aceshooting/lyra-ui 1.2.0 → 2.0.0

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

@@ -0,0 +1,283 @@
+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(),
+};
+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':
+            return JSON.stringify(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`) 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`) or a per-node one (only rendered when `copyable`).
+ */
+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. */
+        this.expandedOverrides = new Map();
+    }
+    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' : JSON.stringify(value, null, 2);
+        this.writeClipboard(text);
+        this.emit('lyra-copy', { text });
+    }
+    /** Builds the key/value-match sets and the ancestor-paths-of-a-match set that `search` drives. */
+    computeSearch() {
+        const query = this.search.trim().toLowerCase();
+        if (!query)
+            return EMPTY_SEARCH;
+        const keyMatches = new Set();
+        const valueMatches = new Set();
+        const forceExpand = new Set();
+        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);
+            let hit = false;
+            if (keyLabel !== undefined && keyLabel.toLowerCase().includes(query)) {
+                keyMatches.add(pathKey);
+                hit = true;
+            }
+            const type = valueType(value);
+            if (type !== 'object' && type !== 'array' && formatPrimitive(value, type).toLowerCase().includes(query)) {
+                valueMatches.add(pathKey);
+                hit = true;
+            }
+            if (hit)
+                markAncestors(path);
+            for (const [k, v] of entriesOf(value))
+                walk(v, [...path, k], String(k));
+        };
+        walk(this.data, []);
+        return { keyMatches, valueMatches, forceExpand };
+    }
+    renderCopyButton(value) {
+        if (!this.copyable)
+            return nothing;
+        return html `
+      <button
+        part="copy-button"
+        type="button"
+        aria-label="Copy value"
+        @click=${(e) => {
+            e.stopPropagation();
+            this.copy(value);
+        }}
+      >
+        Copy
+      </button>
+    `;
+    }
+    renderNode(value, path, keyLabel, depth, search) {
+        const pathKey = JSON.stringify(path);
+        const type = valueType(value);
+        const isContainer = type === 'object' || type === 'array';
+        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' ? ']' : '}';
+        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}
+        ${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)}
+      </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]), ([k, v]) => this.renderNode(v, [...path, k], String(k), depth + 1, search))}
+            </div>
+            <div class="row" style=${indentStyle}>
+              <span class="toggle-space" aria-hidden="true"></span>
+              <span part="bracket">${closeBracket}</span>
+            </div>
+          `
+            : nothing}
+    `;
+    }
+    render() {
+        const search = this.computeSearch();
+        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, search)}</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,176 @@
+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'] {
+    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;
+    }
+  }
+`;

package/dist/components/kbd/kbd.d.ts

@@ -0,0 +1,77 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/** A single rendered key token: the compact glyph shown in the key cap, and
+ *  the spelled-out word used in the chip's `aria-label` (glyphs like `⌘`/
+ *  `⇧`/`⌥` are not reliably announced across every screen reader/platform
+ *  combination, so the accessible name always spells them out in full). */
+export interface KbdKeyLabel {
+    visual: string;
+    word: string;
+}
+/**
+ * Resolves one `+`-separated token of a `keys` string to its rendered glyph
+ * and spelled-out word, given whether the shortcut is being shown on macOS.
+ *
+ * Exported as a pure function (parameterized on `isMac` rather than reading
+ * the module-scope platform constant directly) so both the macOS and
+ * non-macOS branches are directly unit-testable without having to spoof
+ * `navigator` in a browser test environment that only ever runs as one
+ * platform.
+ */
+export declare function shortcutTokenLabel(rawToken: string, isMac: boolean): KbdKeyLabel;
+/** Splits a `keys` string (e.g. `'mod+shift+p'`) into its resolved token
+ *  labels, dropping empty segments from stray/leading/trailing `+`s. */
+export declare function parseShortcut(keys: string, isMac: boolean): KbdKeyLabel[];
+/**
+ * `<lyra-kbd>` — a small chip representing a keyboard shortcut, rendering
+ * the platform-appropriate glyph for cross-platform modifier keys (⌘ on
+ * macOS, "Ctrl" elsewhere) from a single platform-neutral `keys` string.
+ *
+ * `keys` is a `+`-separated sequence of tokens, e.g. `"mod+k"` or
+ * `"mod+shift+p"`. Recognized modifier tokens: `mod` (the platform-neutral
+ * primary modifier — ⌘ on macOS, "Ctrl" elsewhere), `alt` (⌥ / "Alt"),
+ * `shift` (⇧ on every platform), and `ctrl` (always the literal Control
+ * key, distinct from `mod`, for a shortcut that's specifically Ctrl even on
+ * macOS). Any other token renders as typed, except a bare single
+ * letter/digit which is upper-cased, with a small built-in map of friendly
+ * labels for common named keys (`enter` → `↵`, `esc` → "Esc", the four
+ * arrow keys → arrow glyphs, plus `tab`/`space`/`backspace`/`delete`/`home`/
+ * `end`/`pageup`/`pagedown`/`plus`/`minus`). `enter` renders as its `↵`
+ * glyph (not the word "Enter") to match the other single-glyph modifier/
+ * arrow keys visually — its spelled-out word form still appears in the
+ * computed `aria-label`.
+ *
+ * Each token renders as its own key cap (`part="key"`); consecutive caps
+ * are joined by a small "+" separator between them, matching how most
+ * cross-platform shortcut documentation (including on macOS, despite the
+ * OS's own native shortcut hints usually running the glyphs together with
+ * no separator) reads unambiguously regardless of how many/which glyphs are
+ * involved.
+ *
+ * The default slot is not used for the normal glyph rendering above — it's
+ * an escape hatch for fully custom content (e.g. an icon instead of a text
+ * glyph) that, when non-empty, replaces the `keys`-driven rendering
+ * entirely and stops this component from asserting its own `aria-label`,
+ * leaving the slotted content to carry its own accessible name.
+ *
+ * @customElement lyra-kbd
+ * @slot - Optional override for fully custom key-cap content, replacing the
+ * `keys`-driven rendering. Leave empty to use `keys`.
+ * @csspart base - The chip's root element.
+ * @csspart key - Each rendered key cap (one per token in `keys`).
+ */
+export declare class LyraKbd extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** A `+`-separated shortcut, e.g. `'mod+k'`. See the class doc for the
+     *  full token grammar. */
+    keys: string;
+    private hasCustomContent;
+    protected willUpdate(): void;
+    private onSlotChange;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-kbd': LyraKbd;
+    }
+}