@aceshooting/lyra-ui 2.1.0 → 2.2.0

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

@@ -0,0 +1,333 @@
+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 { nextId } from '../../internal/a11y.js';
+import { chevronIcon } from '../../internal/icons.js';
+import { loadShikiHighlighter, loadShikiLanguage, loadShikiHighlighterCore, SHIKI_THEMES, } from './code-loader.js';
+import { styles } from './code-block.styles.js';
+import '../skeleton/skeleton.class.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'];
+    },
+};
+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 = '';
+        /** When `true`, skips the default `loadShikiHighlighter()` call in `connectedCallback()`
+         *  entirely — for a consumer whose `languages` map already covers every language every instance
+         *  will ever render, so the bundler has no reachable path from this component to shiki's
+         *  ~200-language dynamic-import table. A `language` value absent from `languages` while this is
+         *  `true` renders the plain-text fallback (no attempt to fall back to the now-unloaded default
+         *  highlighter) rather than hanging. `false` (the default) reproduces today's unconditional
+         *  `loadShikiHighlighter()` call exactly. */
+        this.languagesOnly = false;
+        // `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;
+            this.emit('lyra-toggle', { collapsed: this.collapsed });
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.languagesOnly)
+            return;
+        void loadShikiHighlighter().then((hl) => {
+            this.highlighter = hl;
+            this.shikiReady = true;
+            this.syncHighlight();
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        clearTimeout(this.copyTimeoutId);
+    }
+    // The `languages` entry for the *current* `language`, if any -- shared by
+    // `willUpdate()`/`updated()`/`render()`/`syncHighlight()` so they all agree
+    // on whether this render is taking the fine-grained `languages` path or
+    // the default `loadShikiHighlighter()` one.
+    preSuppliedGrammar() {
+        return this.languages?.[this.language];
+    }
+    // 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 (!(changed.has('code') || changed.has('language') || changed.has('languages')))
+            return;
+        // The default path still waits on `shikiReady` (the shared
+        // `loadShikiHighlighter()` singleton), same as always. A `language`
+        // covered by `languages` doesn't need that singleton at all, so it can
+        // sync as soon as the relevant property actually changes, instead of
+        // waiting on an unrelated (and, for a `languages`-only consumer,
+        // possibly never-needed) full-bundle load to finish first.
+        if (this.shikiReady || this.preSuppliedGrammar()) {
+            this.syncHighlight();
+        }
+    }
+    updated() {
+        // `languagesOnly` skips the default loader entirely (see connectedCallback()), so
+        // `shikiReady` never becomes true for it -- treat that as "nothing to wait for" rather than
+        // "still loading", the same way a `preSuppliedGrammar()` match already does.
+        const showingSkeleton = !this.shikiReady && !this.languagesOnly && !!this.language && !this.preSuppliedGrammar();
+        if (showingSkeleton)
+            this.setAttribute('aria-busy', 'true');
+        else
+            this.removeAttribute('aria-busy');
+    }
+    syncHighlight() {
+        // Bumped unconditionally -- on *every* call, not just the async branch
+        // below -- so that a call landing on the synchronous already-loaded
+        // branch still invalidates any earlier in-flight load from a previous
+        // call. Without this, a load kicked off by an older call can resolve
+        // after a newer call has already rendered correct synchronous output,
+        // and overwrite it with stale tokenization.
+        const token = ++this.highlightToken;
+        const lang = this.language;
+        if (!lang) {
+            this.highlightedHtml = null;
+            return;
+        }
+        const languages = this.languages;
+        if (languages?.[lang]) {
+            // Fine-grained opt-in path -- entirely separate from `this.highlighter`
+            // below, see `loadShikiHighlighterCore()`'s doc comment for why.
+            this.highlightedHtml = null;
+            void loadShikiHighlighterCore(languages).then((hl) => {
+                if (token !== this.highlightToken)
+                    return; // superseded by a newer code/language/languages change
+                this.highlightedHtml = hl ? this.tokenize(hl, lang) : null;
+            });
+            return;
+        }
+        const hl = this.highlighter;
+        if (!hl) {
+            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;
+        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.localize(this.collapsed ? 'expand' : '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 ? `${this.localize('copied')} to clipboard` : `${this.localize('copy')} code`}
+                @click=${this.copy}
+              >
+                ${this.justCopied ? this.localize('copied') : this.localize('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;
+        // See updated()'s identical condition for why languagesOnly is excluded here too.
+        const showSkeleton = !this.shikiReady && !this.languagesOnly && !!this.language && !this.preSuppliedGrammar();
+        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([
+    property({ attribute: false })
+], LyraCodeBlock.prototype, "languages", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'languages-only' })
+], LyraCodeBlock.prototype, "languagesOnly", void 0);
+__decorate([
+    state()
+], LyraCodeBlock.prototype, "highlightedHtml", void 0);
+__decorate([
+    state()
+], LyraCodeBlock.prototype, "shikiReady", void 0);
+__decorate([
+    state()
+], LyraCodeBlock.prototype, "justCopied", void 0);
+//# sourceMappingURL=code-block.class.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.class.js","sourceRoot":"","sources":["../../../src/components/code-block/code-block.class.ts"],"names":[],"mappings":"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"}

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

@@ -1,127 +1,3 @@
-import { type TemplateResult, type PropertyValues } from 'lit';
-import { LyraElement } from '../../internal/lyra-element.js';
-import { type ShikiLanguageInput } from './code-loader.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.
- *
- * `languages` is an additive, opt-in escape hatch from that default path for
- * a consumer whose language set is fixed and known ahead of time: a map of
- * language id to an already-imported shiki grammar module (e.g. `import bash
- * from 'shiki/langs/bash.mjs'`). When `language` matches a key in `languages`,
- * this component seeds a fine-grained `createHighlighterCore()` highlighter
- * with *only* the pre-supplied grammars (see `code-loader.ts`'s
- * `loadShikiHighlighterCore()`) instead of waiting on `loadShikiHighlighter()`
- * and its dynamic per-language `loadLanguage()` import. The payoff isn't
- * runtime cost — the default dynamic-import path is already well-optimized
- * for that — it's *build output*: shiki's main entry point bundles a dynamic
- * `import()` per bundled language (~200 of them) because a bundler can't
- * statically narrow which of those a `loadLanguage(lang: string)` call might
- * request at runtime, so it conservatively emits a build-output chunk for
- * every one of them. `shiki/core`'s fine-grained API has no such table — a
- * bundler only ever sees the exact grammar modules `languages` itself
- * `import`s, so a consumer who pins its full language set this way trades a
- * hand-maintained list for a build output scoped to just those languages
- * instead of shiki's entire bundled set. A language requested but absent
- * from `languages` still falls back to the ordinary dynamic-import path
- * unchanged, so this is a partial opt-in, not a replacement for it.
- *
- * @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.
- * @event lyra-toggle - The collapse/expand header button was activated.
- *   `detail: { collapsed }` — same event name and shape convention as
- *   `<lyra-thinking-panel>`'s own `lyra-toggle`.
- * @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;
-    /** A map of language id to an already-imported shiki grammar module's
-     *  default export (e.g. `{ bash: bashGrammar }` where `bashGrammar` came
-     *  from a module-scope `import bash from 'shiki/langs/bash.mjs'`). When
-     *  `language` matches a key here, highlighting for it is seeded from
-     *  exactly this pre-supplied grammar via a fine-grained
-     *  `createHighlighterCore()` highlighter, bypassing the default
-     *  `loadShikiHighlighter()` singleton and its dynamic per-language
-     *  `loadLanguage()` import entirely for that language — see the class doc
-     *  above for the build-output rationale. A `language` value absent from
-     *  this map (or left unset, or when `languages` itself is unset) falls
-     *  back to that default dynamic-import path unchanged. */
-    languages?: Record<string, ShikiLanguageInput>;
-    private highlightedHtml;
-    private shikiReady;
-    private justCopied;
-    private highlighter?;
-    private highlightToken;
-    private copyTimeoutId?;
-    private readonly bodyId;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private preSuppliedGrammar;
-    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;
-    }
-}
+export * from './code-block.class.js';
+import "../skeleton/skeleton.js";
+//# sourceMappingURL=code-block.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/code-block.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AAGtC,OAAO,yBAAyB,CAAC"}