@aceshooting/lyra-ui 1.1.0 → 2.0.0

package/dist/components/citation-badge/citation-badge.styles.js

@@ -0,0 +1,96 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: inline-flex;
+    vertical-align: baseline;
+    line-height: 1;
+    /* Per-status accent -- one pair of custom properties swapped by the
+       :host([status]) rules below rather than repeating background/color
+       per part per status. 'default' (and any unrecognized status) stays
+       plain/neutral -- transparent background, quiet text -- rather than
+       inventing a seventh visual tone for "no signal at all". */
+    --lyra-citation-badge-accent: var(--lyra-color-text-quiet);
+    --lyra-citation-badge-bg: transparent;
+    --lyra-citation-badge-border: transparent;
+  }
+
+  :host([status='high']),
+  :host([status='verified']) {
+    --lyra-citation-badge-accent: var(--lyra-color-success);
+    --lyra-citation-badge-bg: var(--lyra-color-success-quiet);
+  }
+  :host([status='medium']),
+  :host([status='low']) {
+    --lyra-citation-badge-accent: var(--lyra-color-warning);
+    --lyra-citation-badge-bg: var(--lyra-color-warning-quiet);
+  }
+  /* Deliberately its own danger tone, not grouped with 'low' -- see the
+     component doc's status-coloring note: "hasn't been checked" reads as a
+     distinct (riskier) claim from "checked but uncertain". */
+  :host([status='unverified']) {
+    --lyra-citation-badge-accent: var(--lyra-color-danger);
+    --lyra-citation-badge-bg: var(--lyra-color-danger-quiet);
+  }
+
+  .wrapper {
+    display: inline-flex;
+  }
+
+  [part='base'] {
+    display: inline-flex;
+    align-items: baseline;
+    box-sizing: border-box;
+    padding: 0 0.3em;
+    border: 1px solid var(--lyra-citation-badge-border);
+    border-radius: calc(var(--lyra-radius) * 0.6);
+    background: var(--lyra-citation-badge-bg);
+    color: var(--lyra-citation-badge-accent);
+    font: inherit;
+    font-size: 0.75em;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.5;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition:
+      background-color var(--lyra-transition-fast),
+      border-color var(--lyra-transition-fast);
+  }
+  [part='base']:hover {
+    border-color: var(--lyra-citation-badge-accent);
+  }
+  [part='base']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+
+  [part='bracket'] {
+    opacity: 0.7;
+  }
+
+  /* Positioned by internal/positioner.js's place() -- same fixed/z-index/
+     max-size shape as lyra-tool-call-chip's own [part='tooltip']. No open/
+     close transition, for the same reason that one has none: a preview
+     that tracks the pointer/focus target should appear instantly, not
+     chase a fade. */
+  [part='popover'] {
+    position: fixed;
+    z-index: 900;
+    box-sizing: border-box;
+    max-inline-size: min(90vw, 22rem);
+    padding: var(--lyra-space-s) var(--lyra-space-m);
+    background: var(--lyra-color-surface);
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    box-shadow: var(--lyra-shadow);
+    font-size: 0.8125rem;
+    line-height: 1.4;
+    color: var(--lyra-color-text);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='base'] {
+      transition: none !important;
+    }
+  }
+`;

package/dist/components/code-block/code-block.d.ts

@@ -0,0 +1,89 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import '../skeleton/skeleton.js';
+/**
+ * `<lyra-code-block>` — fenced code display with optional lazy syntax
+ * highlighting and a copy button. No highlighting grammar ships in this
+ * component itself: it lazy-loads the optional peer dependency `shiki` (see
+ * `code-loader.ts`) for the actual tokenizing, and degrades to a plain
+ * `<pre><code>` when that peer isn't installed or `language` is unset/
+ * unrecognized — the exact same optional-peer shape `<lyra-markdown>` and
+ * `<lyra-chart>` already establish. That fallback is the *default* rendering
+ * path, not a degraded one: unhighlighted code is perfectly usable, and it's
+ * what every instance renders at zero extra bytes until shiki resolves.
+ *
+ * A `<lyra-skeleton>` placeholder stands in only while shiki itself is
+ * loading for the very first time on the page (cached — see
+ * `loadShikiHighlighter()`) and `language` is set. It's deliberately *not*
+ * shown again for a subsequent per-language grammar load (e.g. a second
+ * `<lyra-code-block>` requesting a language no earlier instance has used
+ * yet) — that grammar fetch is typically fast, and the plain-text fallback
+ * is already a perfectly readable placeholder for it, so a second
+ * loading-chrome state would add complexity for little practical benefit.
+ *
+ * @customElement lyra-code-block
+ * @event lyra-copy - The copy button was activated. `detail: { text }` is
+ *   always the raw `code` value (never the highlighted HTML), and always
+ *   fires regardless of whether the actual OS clipboard write succeeded —
+ *   same convention as `<lyra-json-viewer>`'s own copy button.
+ * @csspart base - The outer container.
+ * @csspart header - The row above the code (filename/language/copy/toggle),
+ *   present whenever there's anything to put in it.
+ * @csspart filename - The `filename` text, when set.
+ * @csspart language - The `language` badge, when set, so the language is
+ *   exposed to assistive tech as visible text rather than only a `language`
+ *   attribute a screen reader would never announce.
+ * @csspart copy-button - The copy-to-clipboard button, when `copyable`.
+ * @csspart toggle - The collapse/expand chevron button, when `collapsible`.
+ * @csspart body - The scrollable region wrapping the code (or the loading
+ *   skeleton); respects `max-height`, `hidden` while `collapsible` and
+ *   `collapsed`.
+ * @csspart pre - The rendered `<pre>` — shiki's own in the highlighted path,
+ *   this component's own plain one in the fallback path.
+ * @csspart code - The rendered `<code>`, same split as `pre` above.
+ */
+export declare class LyraCodeBlock extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The raw source text. */
+    code: string;
+    /** A shiki-recognized language id or alias (e.g. `"javascript"`,
+     *  `"python"`, `"json"`). When unset, or when shiki doesn't recognize it,
+     *  the code renders as plain unhighlighted text regardless of whether
+     *  shiki itself is available. */
+    language: string;
+    /** Shown in the header above the code, when set. */
+    filename: string;
+    /** Whether the code region can be collapsed via a header toggle. */
+    collapsible: boolean;
+    /** Whether the code region is currently hidden. Only has a visible effect
+     *  while `collapsible` is also true. */
+    collapsed: boolean;
+    /** Shows a copy-to-clipboard button in the header. */
+    copyable: boolean;
+    /** A CSS length (e.g. `"20rem"`); once set, the code scrolls internally
+     *  past this height instead of growing the page. */
+    maxHeight: string;
+    private highlightedHtml;
+    private shikiReady;
+    private justCopied;
+    private highlighter?;
+    private highlightToken;
+    private copyTimeoutId?;
+    private readonly bodyId;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(): void;
+    private syncHighlight;
+    private tokenize;
+    private writeClipboard;
+    private copy;
+    private toggleCollapsed;
+    private renderHeader;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-code-block': LyraCodeBlock;
+    }
+}

package/dist/components/code-block/code-block.js

@@ -0,0 +1,317 @@
+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 { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { nextId } from '../../internal/a11y.js';
+import { chevronIcon } from '../../internal/icons.js';
+import { loadShikiHighlighter, loadShikiLanguage, SHIKI_THEMES } from './code-loader.js';
+import { styles } from './code-block.styles.js';
+import '../skeleton/skeleton.js';
+/** How long the copy button's confirmation state lasts before reverting. */
+const COPY_CONFIRM_MS = 1500;
+/**
+ * Rewrites shiki's generated `<pre>`/`<code>` hast nodes so they carry this
+ * component's own `part="pre"`/`part="code"` hooks — the same single-pass
+ * "inject part attributes while rendering, not a second DOM walk after
+ * insertion" approach `<lyra-markdown>`'s renderer override uses, applied
+ * here via shiki's own transformer API instead of a custom marked renderer.
+ * Also strips shiki's own default `tabindex="0"` from the `<pre>` — this
+ * component's `[part="body"]` wrapper (see `render()`) is the single
+ * scrollable/focusable region for the code area, and leaving shiki's own
+ * tabindex in place would add a second, redundant tab stop over the same
+ * scrollable content.
+ */
+const partTransformer = {
+    name: 'lyra-code-block-parts',
+    pre(node) {
+        node.properties.part = ['pre'];
+        delete node.properties.tabindex;
+    },
+    code(node) {
+        node.properties.part = ['code'];
+    },
+};
+/**
+ * `<lyra-code-block>` — fenced code display with optional lazy syntax
+ * highlighting and a copy button. No highlighting grammar ships in this
+ * component itself: it lazy-loads the optional peer dependency `shiki` (see
+ * `code-loader.ts`) for the actual tokenizing, and degrades to a plain
+ * `<pre><code>` when that peer isn't installed or `language` is unset/
+ * unrecognized — the exact same optional-peer shape `<lyra-markdown>` and
+ * `<lyra-chart>` already establish. That fallback is the *default* rendering
+ * path, not a degraded one: unhighlighted code is perfectly usable, and it's
+ * what every instance renders at zero extra bytes until shiki resolves.
+ *
+ * A `<lyra-skeleton>` placeholder stands in only while shiki itself is
+ * loading for the very first time on the page (cached — see
+ * `loadShikiHighlighter()`) and `language` is set. It's deliberately *not*
+ * shown again for a subsequent per-language grammar load (e.g. a second
+ * `<lyra-code-block>` requesting a language no earlier instance has used
+ * yet) — that grammar fetch is typically fast, and the plain-text fallback
+ * is already a perfectly readable placeholder for it, so a second
+ * loading-chrome state would add complexity for little practical benefit.
+ *
+ * @customElement lyra-code-block
+ * @event lyra-copy - The copy button was activated. `detail: { text }` is
+ *   always the raw `code` value (never the highlighted HTML), and always
+ *   fires regardless of whether the actual OS clipboard write succeeded —
+ *   same convention as `<lyra-json-viewer>`'s own copy button.
+ * @csspart base - The outer container.
+ * @csspart header - The row above the code (filename/language/copy/toggle),
+ *   present whenever there's anything to put in it.
+ * @csspart filename - The `filename` text, when set.
+ * @csspart language - The `language` badge, when set, so the language is
+ *   exposed to assistive tech as visible text rather than only a `language`
+ *   attribute a screen reader would never announce.
+ * @csspart copy-button - The copy-to-clipboard button, when `copyable`.
+ * @csspart toggle - The collapse/expand chevron button, when `collapsible`.
+ * @csspart body - The scrollable region wrapping the code (or the loading
+ *   skeleton); respects `max-height`, `hidden` while `collapsible` and
+ *   `collapsed`.
+ * @csspart pre - The rendered `<pre>` — shiki's own in the highlighted path,
+ *   this component's own plain one in the fallback path.
+ * @csspart code - The rendered `<code>`, same split as `pre` above.
+ */
+export class LyraCodeBlock extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** The raw source text. */
+        this.code = '';
+        /** A shiki-recognized language id or alias (e.g. `"javascript"`,
+         *  `"python"`, `"json"`). When unset, or when shiki doesn't recognize it,
+         *  the code renders as plain unhighlighted text regardless of whether
+         *  shiki itself is available. */
+        this.language = '';
+        /** Shown in the header above the code, when set. */
+        this.filename = '';
+        /** Whether the code region can be collapsed via a header toggle. */
+        this.collapsible = false;
+        /** Whether the code region is currently hidden. Only has a visible effect
+         *  while `collapsible` is also true. */
+        this.collapsed = false;
+        /** Shows a copy-to-clipboard button in the header. */
+        this.copyable = true;
+        /** A CSS length (e.g. `"20rem"`); once set, the code scrolls internally
+         *  past this height instead of growing the page. */
+        this.maxHeight = '';
+        // `null` covers every reason the plain-text fallback is showing: shiki
+        // isn't installed, `language` is unset, or `language` isn't shiki-
+        // recognized -- `render()` doesn't need to (and can't usefully) tell these
+        // apart, same rationale as <lyra-markdown>'s identically-shaped field.
+        this.highlightedHtml = null;
+        // Becomes true once the shared shiki-loading promise has settled, whether
+        // or not it actually resolved to a highlighter -- gates the skeleton (see
+        // the class doc's second paragraph), not the highlighting itself.
+        this.shikiReady = false;
+        this.justCopied = false;
+        // Guards the async per-language load in syncHighlight() against a
+        // `code`/`language` change that arrives before a previous load resolves --
+        // only the result matching the *current* token is ever applied.
+        this.highlightToken = 0;
+        this.bodyId = nextId('code-block-body');
+        this.copy = () => {
+            this.writeClipboard(this.code);
+            this.emit('lyra-copy', { text: this.code });
+            this.justCopied = true;
+            clearTimeout(this.copyTimeoutId);
+            this.copyTimeoutId = setTimeout(() => {
+                this.justCopied = false;
+            }, COPY_CONFIRM_MS);
+        };
+        this.toggleCollapsed = () => {
+            this.collapsed = !this.collapsed;
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    connectedCallback() {
+        super.connectedCallback();
+        void loadShikiHighlighter().then((hl) => {
+            this.highlighter = hl;
+            this.shikiReady = true;
+            this.syncHighlight();
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        clearTimeout(this.copyTimeoutId);
+    }
+    // Mutating `highlightedHtml` here (rather than in `updated()`) absorbs the
+    // synchronous case -- language already loaded, see `syncHighlight()` --
+    // into this same update cycle instead of scheduling a second one, Lit's
+    // documented pattern for deriving one reactive property from a change to
+    // others (same approach <lyra-markdown>'s `willUpdate` takes).
+    willUpdate(changed) {
+        if (this.shikiReady && (changed.has('code') || changed.has('language'))) {
+            this.syncHighlight();
+        }
+    }
+    updated() {
+        const showingSkeleton = !this.shikiReady && !!this.language;
+        if (showingSkeleton)
+            this.setAttribute('aria-busy', 'true');
+        else
+            this.removeAttribute('aria-busy');
+    }
+    syncHighlight() {
+        const hl = this.highlighter;
+        const lang = this.language;
+        if (!hl || !lang) {
+            this.highlightedHtml = null;
+            return;
+        }
+        if (hl.getLoadedLanguages().includes(lang)) {
+            this.highlightedHtml = this.tokenize(hl, lang);
+            return;
+        }
+        // Grammar not loaded yet -- show the plain-text fallback in the
+        // meantime rather than leaving a *previous* code/language value's stale
+        // highlighted markup on screen while this one loads.
+        this.highlightedHtml = null;
+        const token = ++this.highlightToken;
+        void loadShikiLanguage(hl, lang).then((ok) => {
+            if (token !== this.highlightToken)
+                return; // superseded by a newer code/language change
+            this.highlightedHtml = ok ? this.tokenize(hl, lang) : null;
+        });
+    }
+    tokenize(hl, lang) {
+        try {
+            return hl.codeToHtml(this.code, {
+                lang,
+                // shiki's generated per-token colors are theme-specific inline
+                // styles/CSS variables (from SHIKI_THEMES's github-light/github-dark
+                // theme data), not this library's --lyra-* design tokens -- the one
+                // deliberate exception to every other color in this component being
+                // a --lyra-* token. See the dark-mode override in
+                // code-block.styles.ts for how the dark half of this activates.
+                themes: SHIKI_THEMES,
+                transformers: [partTransformer],
+            });
+        }
+        catch {
+            // Malformed input for this grammar, or any other shiki-internal
+            // failure -- fall back to plain text rather than a blank code block.
+            return null;
+        }
+    }
+    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. Same
+            // precedent as <lyra-json-viewer>'s own copy button.
+            void navigator.clipboard?.writeText(text)?.catch(() => { });
+        }
+        catch {
+            // see above
+        }
+    }
+    renderHeader() {
+        return html `
+      <div part="header">
+        ${this.collapsible
+            ? html `
+              <button
+                part="toggle"
+                type="button"
+                aria-expanded=${this.collapsed ? 'false' : 'true'}
+                aria-controls=${this.bodyId}
+                aria-label=${this.collapsed ? 'Expand code' : 'Collapse code'}
+                @click=${this.toggleCollapsed}
+              >
+                <span class="chevron" aria-hidden="true">${chevronIcon()}</span>
+              </button>
+            `
+            : nothing}
+        ${this.filename ? html `<span part="filename">${this.filename}</span>` : nothing}
+        ${this.language ? html `<span part="language">${this.language}</span>` : nothing}
+        ${this.copyable
+            ? html `
+              <button
+                part="copy-button"
+                type="button"
+                aria-label=${this.justCopied ? 'Copied to clipboard' : 'Copy code'}
+                @click=${this.copy}
+              >
+                ${this.justCopied ? 'Copied!' : 'Copy'}
+              </button>
+            `
+            : nothing}
+      </div>
+    `;
+    }
+    // `[part="body"]` is `tabindex="0"` because it's the scrollable region for
+    // arbitrarily-wide/tall code (max-height, plus horizontal overflow from
+    // long lines) -- a scrollable region with no other focusable content of
+    // its own is otherwise unreachable by keyboard, same reasoning
+    // lyra-virtual-list's own `[part="base"]` documents for its identical
+    // tabindex. `role="group"` (rather than e.g. `region`, a page landmark
+    // role) plus `aria-label` gives it an accessible name without claiming
+    // landmark/navigation significance for what is, structurally, just one
+    // small piece of a larger document.
+    render() {
+        const hasHeader = !!this.filename || !!this.language || this.copyable || this.collapsible;
+        const showSkeleton = !this.shikiReady && !!this.language;
+        const bodyHidden = this.collapsible && this.collapsed;
+        const bodyLabel = this.filename || (this.language ? `${this.language} code` : 'Code');
+        return html `
+      <div part="base">
+        ${hasHeader ? this.renderHeader() : nothing}
+        <div
+          part="body"
+          id=${this.bodyId}
+          role="group"
+          aria-label=${bodyLabel}
+          tabindex="0"
+          ?hidden=${bodyHidden}
+          style=${this.maxHeight ? `--lyra-code-block-max-height:${this.maxHeight}` : nothing}
+        >
+          ${showSkeleton
+            ? html `<lyra-skeleton variant="rect"></lyra-skeleton>`
+            : this.highlightedHtml !== null
+                ? unsafeHTML(this.highlightedHtml)
+                : html `<pre part="pre"><code part="code">${this.code}</code></pre>`}
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property()
+], LyraCodeBlock.prototype, "code", void 0);
+__decorate([
+    property()
+], LyraCodeBlock.prototype, "language", void 0);
+__decorate([
+    property()
+], LyraCodeBlock.prototype, "filename", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraCodeBlock.prototype, "collapsible", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraCodeBlock.prototype, "collapsed", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraCodeBlock.prototype, "copyable", void 0);
+__decorate([
+    property({ attribute: 'max-height' })
+], LyraCodeBlock.prototype, "maxHeight", void 0);
+__decorate([
+    state()
+], LyraCodeBlock.prototype, "highlightedHtml", void 0);
+__decorate([
+    state()
+], LyraCodeBlock.prototype, "shikiReady", void 0);
+__decorate([
+    state()
+], LyraCodeBlock.prototype, "justCopied", void 0);
+defineElement('code-block', LyraCodeBlock);

package/dist/components/code-block/code-block.styles.d.ts

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