@aceshooting/lyra-ui 2.1.0 → 2.3.0

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

@@ -0,0 +1,363 @@
+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 { 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'];
+    },
+};
+/**
+ * `<lyra-code-block-core>` — a build-lean variant of `<lyra-code-block>` for
+ * a consumer whose `languages` map already covers every language it will
+ * ever render. It only ever calls `loadShikiHighlighterCore(this.languages)`
+ * (see `code-loader.ts`) — never `loadShikiHighlighter()`, the default
+ * ~200-language dynamic-import table loader `<lyra-code-block>` calls
+ * unconditionally unless its runtime `languagesOnly` flag is `true`. A
+ * runtime flag on that same module can't be proven always-`true` by a
+ * bundler, so the unconditional call (and everything shiki's main entry
+ * point can reach from it) always stays in the build output regardless of
+ * how that flag is used. This component's own module never textually
+ * contains a call to (or import of) `loadShikiHighlighter` at all, so a
+ * consumer importing this entry point instead of `code-block.js` gets a
+ * genuinely shiki-full-table-free build.
+ *
+ * A `language` value absent from `languages` always renders the plain
+ * `<pre><code>` fallback — there is no default/full-table highlighter here
+ * to fall back to, unlike `<lyra-code-block>`'s dynamic-import path for an
+ * unmapped language. That fallback is the *default* rendering path, not a
+ * degraded one, same as `<lyra-code-block>`'s own plain-text fallback.
+ *
+ * Everything else — `code`/`language`/`filename`/`copyable`/`collapsible`/
+ * `collapsed`/`maxHeight`, the copy button, the collapse header toggle, the
+ * loading-skeleton behavior while the fine-grained highlighter itself
+ * resolves — matches `<lyra-code-block>` exactly.
+ *
+ * @customElement lyra-code-block-core
+ * @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 class LyraCodeBlockCore 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 it isn't a key in
+         *  `languages`, the code renders as plain unhighlighted text — this
+         *  component has no default/full-table highlighter to fall back to. */
+        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 = '';
+        /** Grammar definitions this instance can highlight, e.g. `{ json: jsonGrammar }` (import from
+         *  `shiki/langs/<name>.mjs`). This component has no default/full-table fallback highlighter --
+         *  a `language` absent from this map always renders the plain-text fallback. Empty (the
+         *  default) never highlights at all. */
+        this.languages = {};
+        // `null` covers every reason the plain-text fallback is showing: `language`
+        // is unset, isn't a key in `languages`, or the fine-grained highlighter
+        // hasn't resolved yet -- `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 loadShikiHighlighterCore()'s promise has settled,
+        // whether or not it actually resolved to a highlighter -- gates the
+        // skeleton (see the class doc), 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 (Object.keys(this.languages).length === 0)
+            return; // no languages supplied -- stays in the plain-text-fallback state permanently, same as languagesOnly + no matching grammar already behaves in lyra-code-block today
+        void loadShikiHighlighterCore(this.languages).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 language is highlightable at all.
+    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;
+        if (this.shikiReady || this.preSuppliedGrammar()) {
+            this.syncHighlight();
+        }
+    }
+    updated() {
+        const showingSkeleton = !this.shikiReady && !!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]) {
+            // Not in the supplied languages map -- there is no default
+            // highlighter to fall back to in this variant, so this always
+            // renders the plain-text fallback, unlike <lyra-code-block>'s
+            // dynamic-import path for an unmapped language.
+            this.highlightedHtml = null;
+            return;
+        }
+        // Mirrors <lyra-code-block>'s own fine-grained branch: calls
+        // loadShikiHighlighterCore() directly rather than only reading a
+        // cached `this.highlighter` -- `languages` may be supplied any time
+        // after `connectedCallback()` already ran (e.g. set as a property right
+        // after creation), so this can't rely solely on that one-time eager
+        // load. loadShikiHighlighterCore() itself caches by `languages` object
+        // identity, so a call here that lands on the same map
+        // connectedCallback() already kicked off just resolves the shared
+        // cached promise instead of loading twice.
+        this.highlightedHtml = null;
+        void loadShikiHighlighterCore(languages).then((hl) => {
+            if (token !== this.highlightToken)
+                return; // superseded by a newer code/language/languages change
+            this.highlighter = hl;
+            this.shikiReady = true;
+            this.highlightedHtml = hl ? 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;
+        const showSkeleton = !this.shikiReady && !!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()
+], LyraCodeBlockCore.prototype, "code", void 0);
+__decorate([
+    property()
+], LyraCodeBlockCore.prototype, "language", void 0);
+__decorate([
+    property()
+], LyraCodeBlockCore.prototype, "filename", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraCodeBlockCore.prototype, "collapsible", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraCodeBlockCore.prototype, "collapsed", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraCodeBlockCore.prototype, "copyable", void 0);
+__decorate([
+    property({ attribute: 'max-height' })
+], LyraCodeBlockCore.prototype, "maxHeight", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraCodeBlockCore.prototype, "languages", void 0);
+__decorate([
+    state()
+], LyraCodeBlockCore.prototype, "highlightedHtml", void 0);
+__decorate([
+    state()
+], LyraCodeBlockCore.prototype, "shikiReady", void 0);
+__decorate([
+    state()
+], LyraCodeBlockCore.prototype, "justCopied", void 0);
+//# sourceMappingURL=code-block-core.class.js.map

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

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

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

@@ -0,0 +1,3 @@
+export * from './code-block-core.class.js';
+import "../skeleton/skeleton.js";
+//# sourceMappingURL=code-block-core.d.ts.map

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

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

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

@@ -0,0 +1,6 @@
+export * from './code-block-core.class.js';
+import { LyraCodeBlockCore } from './code-block-core.class.js';
+import { defineElement } from '../../internal/prefix.js';
+import "../skeleton/skeleton.js";
+defineElement('code-block-core', LyraCodeBlockCore);
+//# sourceMappingURL=code-block-core.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"code-block-core.js","sourceRoot":"","sources":["../../../src/components/code-block/code-block-core.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,yBAAyB,CAAC;AACjC,aAAa,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,CAAC"}

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

@@ -0,0 +1,141 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { type ShikiLanguageInput } from './code-loader.js';
+import '../skeleton/skeleton.class.js';
+export interface LyraCodeBlockEventMap {
+    'lyra-copy': CustomEvent<{
+        text: string;
+    }>;
+}
+/**
+ * `<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<LyraCodeBlockEventMap> {
+    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>;
+    /** 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. */
+    languagesOnly: boolean;
+    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;
+    }
+}
+//# sourceMappingURL=code-block.class.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.class.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/code-block.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG9E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAI7D,OAAO,EAOL,KAAK,kBAAkB,EACxB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,+BAA+B,CAAC;AA4BvC,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,WAAW,CAAC;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC5C;AACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,qBAAa,aAAc,SAAQ,WAAW,CAAC,qBAAqB,CAAC;IACnE,MAAM,CAAC,MAAM,iCAAgC;IAE7C,2BAA2B;IACf,IAAI,SAAM;IAEtB;;;qCAGiC;IACrB,QAAQ,SAAM;IAE1B,oDAAoD;IACxC,QAAQ,SAAM;IAE1B,oEAAoE;IACxB,WAAW,UAAS;IAEhE;4CACwC;IACI,SAAS,UAAS;IAE9D,sDAAsD;IACV,QAAQ,UAAQ;IAE5D;wDACoD;IACb,SAAS,SAAM;IAEtD;;;;;;;;;;8DAU0D;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAE/E;;;;;;iDAM6C;IACa,aAAa,UAAS;IAMvE,OAAO,CAAC,eAAe,CAAuB;IAK9C,OAAO,CAAC,UAAU,CAAS;IAE3B,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,WAAW,CAAC,CAA0B;IAK9C,OAAO,CAAC,cAAc,CAAK;IAE3B,OAAO,CAAC,aAAa,CAAC,CAAgC;IAEtD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA6B;IAEpD,iBAAiB,IAAI,IAAI,CAQxB;IAED,oBAAoB,IAAI,IAAI,CAG3B;IAMD,OAAO,CAAC,kBAAkB;IAS1B,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAWlD;IAED,SAAS,CAAC,OAAO,IAAI,IAAI,CAOxB;IAED,OAAO,CAAC,aAAa;IA6CrB,OAAO,CAAC,QAAQ;IAoBhB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,IAAI,CAQV;IAEF,OAAO,CAAC,eAAe,CAGrB;IAEF,OAAO,CAAC,YAAY;IA4CpB,MAAM,IAAI,cAAc,CA2BvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}