@aceshooting/lyra-ui 2.0.0 → 2.2.0

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

@@ -1,317 +1,6 @@
-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';
+export * from './code-block.class.js';
+import { LyraCodeBlock } from './code-block.class.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);
+import "../skeleton/skeleton.js";
 defineElement('code-block', LyraCodeBlock);
+//# sourceMappingURL=code-block.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.js","sourceRoot":"","sources":["../../../src/components/code-block/code-block.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,yBAAyB,CAAC;AACjC,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC"}

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

@@ -1 +1,2 @@
 export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=code-block.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.styles.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/code-block.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA4LlB,CAAC"}

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

@@ -11,11 +11,11 @@ export const styles = css `
        host page can retheme it -- same rationale as --lyra-markdown-font-mono
        and --lyra-json-viewer-font, no shared --wa-*/--lyra-* monospace token
        exists to resolve through. */
-    --lyra-code-block-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    font-size: 0.8125rem;
+    --lyra-code-block-font: var(--lyra-font-mono);
+    font-size: var(--lyra-font-size-sm);
   }
   [part='base'] {
-    border: 1px solid var(--lyra-color-border);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     border-radius: var(--lyra-radius);
     background: var(--lyra-color-surface);
     overflow: hidden;
@@ -25,7 +25,7 @@ export const styles = css `
     align-items: center;
     gap: var(--lyra-space-xs);
     padding: var(--lyra-space-xs) var(--lyra-space-s);
-    border-block-end: 1px solid var(--lyra-color-border);
+    border-block-end: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     /* --lyra-color-surface (not -brand-quiet) -- pairing
        --lyra-color-text-quiet (the toggle/copy-button color below) against
        --lyra-color-brand-quiet fails WCAG AA contrast in this token
@@ -36,11 +36,12 @@ export const styles = css `
     font-family: var(--lyra-font);
   }
   [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 header row, same reasoning as lyra-json-viewer's own toggle. */
-    inline-size: 1.25rem;
-    block-size: 1.25rem;
+    /* Keep the glyph compact while giving the interactive box the shared
+       minimum target size. */
+    inline-size: var(--lyra-size-1-25rem);
+    block-size: var(--lyra-size-1-25rem);
+    min-inline-size: var(--lyra-icon-button-size);
+    min-block-size: var(--lyra-icon-button-size);
     flex: 0 0 auto;
     display: inline-flex;
     align-items: center;
@@ -73,14 +74,14 @@ export const styles = css `
     text-overflow: ellipsis;
     white-space: nowrap;
     font-family: var(--lyra-code-block-font);
-    font-size: 0.75rem;
-    font-weight: 600;
+    font-size: var(--lyra-font-size-xs);
+    font-weight: var(--lyra-font-weight-semibold);
     color: var(--lyra-color-text);
   }
   [part='language'] {
     flex: 0 0 auto;
-    padding: 0.0625rem 0.4375rem;
-    border-radius: 999px;
+    padding: var(--lyra-size-0-0625rem) var(--lyra-size-0-4375rem);
+    border-radius: var(--lyra-radius-pill);
     /* --lyra-color-brand + -brand-quiet (not -text-quiet + -surface) --
        this pill needs to read as distinct from the [part="header"]
        background it sits on (also -surface as of the comment above), and
@@ -89,10 +90,10 @@ export const styles = css `
        -text-quiet on -brand-quiet. */
     background: var(--lyra-color-brand-quiet);
     color: var(--lyra-color-brand);
-    font-size: 0.6875rem;
-    line-height: 1.4;
+    font-size: var(--lyra-size-0-6875rem);
+    line-height: var(--lyra-line-height-1-4);
     text-transform: uppercase;
-    letter-spacing: 0.02em;
+    letter-spacing: var(--lyra-size-0-02em);
   }
   /* Pushed to the end of the header whether or not filename/language
      precede it -- margin-inline-start:auto works whether this is the first
@@ -104,9 +105,11 @@ export const styles = css `
     background: none;
     color: var(--lyra-color-text-quiet);
     font: inherit;
-    font-size: 0.75rem;
-    line-height: 1;
-    padding: 0.1875rem var(--lyra-space-xs);
+    font-size: var(--lyra-font-size-xs);
+    line-height: var(--lyra-line-height-none);
+    min-inline-size: var(--lyra-icon-button-size);
+    min-block-size: var(--lyra-icon-button-size);
+    padding: var(--lyra-size-0-1875rem) var(--lyra-space-xs);
     border-radius: var(--lyra-radius);
     cursor: pointer;
   }
@@ -137,7 +140,7 @@ export const styles = css `
     display: block;
     padding: var(--lyra-space-s) var(--lyra-space-m);
     --lyra-skeleton-w: 100%;
-    --lyra-skeleton-h: 8rem;
+    --lyra-skeleton-h: var(--lyra-size-8rem);
   }
   [part='pre'] {
     margin: 0;
@@ -151,7 +154,7 @@ export const styles = css `
     background: var(--lyra-color-surface);
     font-family: var(--lyra-code-block-font);
     font-size: inherit;
-    line-height: 1.5;
+    line-height: var(--lyra-line-height-normal);
     white-space: pre;
   }
   [part='code'] {
@@ -185,3 +188,4 @@ export const styles = css `
     }
   }
 `;
+//# sourceMappingURL=code-block.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.styles.js","sourceRoot":"","sources":["../../../src/components/code-block/code-block.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4LxB,CAAC"}

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

@@ -1,7 +1,19 @@
-import type { Highlighter, BundledTheme } from 'shiki';
+import type { OptionalPeerApi } from '../../internal/optional-peer-types.js';
 /** Re-exported under a component-scoped name so importers don't need their
  *  own `import type { Highlighter } from 'shiki'`. */
-export type ShikiHighlighter = Highlighter;
+export type ShikiHighlighter = OptionalPeerApi;
+/** Re-exported under a component-scoped name — see `loadShikiHighlighterCore()`
+ *  below. Structurally similar to `ShikiHighlighter` (both are
+ *  `HighlighterGeneric<...>` instances providing `codeToHtml()` etc.) but
+ *  typed with no bundled-language/theme keys of its own (`never`, since
+ *  `createHighlighterCore()` has no built-in bundle to know about), which is
+ *  why it's a distinct exported type rather than reusing `ShikiHighlighter`. */
+export type ShikiHighlighterCore = OptionalPeerApi;
+/** Re-exported under a component-scoped name — the shape of one pre-imported
+ *  shiki grammar module's default export (e.g. `import bash from
+ *  'shiki/langs/bash.mjs'`), and what `<lyra-code-block>`'s `languages`
+ *  property maps language ids to. See `loadShikiHighlighterCore()` below. */
+export type ShikiLanguageInput = OptionalPeerApi;
 /**
  * The two bundled themes every highlighter instance is seeded with, so a
  * single `codeToHtml()` call can emit a light *and* dark rendering at once
@@ -12,10 +24,10 @@ export type ShikiHighlighter = Highlighter;
  * `prefers-color-scheme` block in `code-block.styles.ts` for how the dark
  * variant actually activates.
  */
-export declare const SHIKI_LIGHT_THEME: BundledTheme;
-export declare const SHIKI_DARK_THEME: BundledTheme;
+export declare const SHIKI_LIGHT_THEME: string;
+export declare const SHIKI_DARK_THEME: string;
 /** Passed directly as `codeToHtml()`'s `themes` option — see `tokenize()` in `code-block.ts`. */
-export declare const SHIKI_THEMES: Record<'light' | 'dark', BundledTheme>;
+export declare const SHIKI_THEMES: Record<'light' | 'dark', string>;
 /**
  * Lazily loads the optional peer dependency `shiki` once per page and builds
  * (and caches) a single `Highlighter` instance seeded with `SHIKI_THEMES` and
@@ -42,3 +54,35 @@ export declare function loadShikiHighlighter(): Promise<ShikiHighlighter | null>
  * succeed on every future render.
  */
 export declare function loadShikiLanguage(hl: ShikiHighlighter, lang: string): Promise<boolean>;
+/**
+ * Builds (and caches — see `highlighterCores` above) a fine-grained
+ * `HighlighterCore` seeded with `SHIKI_THEMES` and *only* the grammars in
+ * `languages`, via shiki's own "fine-grained bundle" recipe:
+ * `createHighlighterCore()` (`shiki/core`) plus an explicit oniguruma engine
+ * (`shiki/engine/oniguruma` + the `shiki/wasm` binary) instead of
+ * `loadShikiHighlighter()`'s `createHighlighter()` (plain `shiki`).
+ *
+ * The point isn't runtime cost — `loadShikiHighlighter()`'s per-language
+ * `loadLanguage()` dynamic import is already well-optimized for that (see its
+ * doc comment). It's *build output*: `shiki`'s main entry point (what
+ * `loadShikiHighlighter()` imports) bundles a lookup table of dynamic
+ * `import()` calls, one per shiki-supported language (~200 of them), because
+ * `loadLanguage(lang: string)` resolves that string against the table at
+ * runtime — a bundler can't statically narrow which of those ~200 entries a
+ * given app will ever actually request, so it conservatively emits a
+ * build-output chunk for every one of them. `shiki/core` has no such
+ * table — a bundler only ever sees the exact grammar modules a caller
+ * `import`s for `languages` itself, so a consumer with a known, fixed
+ * language set gets a build output scoped to just those languages instead of
+ * shiki's full bundled set.
+ *
+ * This is *only* ever consulted for languages present in `languages` — see
+ * `<lyra-code-block>`'s `syncHighlight()`. A language absent from it still
+ * falls back to the ordinary `loadShikiHighlighter()` + `loadShikiLanguage()`
+ * dynamic-import path entirely unchanged, so a caller can pin its own known
+ * set while still letting an unexpected language through. Resolves to `null`
+ * (with a one-time `console.warn`, same convention as `loadShikiHighlighter()`)
+ * if building the fine-grained highlighter fails for any reason.
+ */
+export declare function loadShikiHighlighterCore(languages: Record<string, ShikiLanguageInput>): Promise<ShikiHighlighterCore | null>;
+//# sourceMappingURL=code-loader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"code-loader.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/code-loader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAE7E;sDACsD;AACtD,MAAM,MAAM,gBAAgB,GAAG,eAAe,CAAC;AAE/C;;;;;gFAKgF;AAChF,MAAM,MAAM,oBAAoB,GAAG,eAAe,CAAC;AAEnD;;;6EAG6E;AAC7E,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC;AAEjD;;;;;;;;;GASG;AACH,eAAO,MAAM,iBAAiB,EAAE,MAAuB,CAAC;AACxD,eAAO,MAAM,gBAAgB,EAAE,MAAsB,CAAC;AAEtD,iGAAiG;AACjG,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,OAAO,GAAG,MAAM,EAAE,MAAM,CAGzD,CAAC;AAYF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,oBAAoB,IAAI,OAAO,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAcvE;AAED;;;;;;;;;GASG;AACH,wBAAsB,iBAAiB,CAAC,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAc5F;AAaD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,wBAAwB,CACtC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,GAC5C,OAAO,CAAC,oBAAoB,GAAG,IAAI,CAAC,CA2BtC"}

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

@@ -77,3 +77,67 @@ export async function loadShikiLanguage(hl, lang) {
         return false;
     }
 }
+/** One cached `ShikiHighlighterCore` promise per distinct `languages` object
+ *  a caller has passed in — keyed by object identity (not content), so a
+ *  consumer that keeps passing the *same* `languages` map reference (the
+ *  normal case: a module-level constant, not a fresh object literal on every
+ *  render) only ever builds one highlighter for it, same "the highlighter
+ *  itself is the expensive part" rationale as `loadShikiHighlighter()`'s
+ *  single cached instance above. A `WeakMap` lets an abandoned `languages`
+ *  object (and its highlighter) be garbage-collected once nothing else
+ *  references it. */
+const highlighterCores = new WeakMap();
+/**
+ * Builds (and caches — see `highlighterCores` above) a fine-grained
+ * `HighlighterCore` seeded with `SHIKI_THEMES` and *only* the grammars in
+ * `languages`, via shiki's own "fine-grained bundle" recipe:
+ * `createHighlighterCore()` (`shiki/core`) plus an explicit oniguruma engine
+ * (`shiki/engine/oniguruma` + the `shiki/wasm` binary) instead of
+ * `loadShikiHighlighter()`'s `createHighlighter()` (plain `shiki`).
+ *
+ * The point isn't runtime cost — `loadShikiHighlighter()`'s per-language
+ * `loadLanguage()` dynamic import is already well-optimized for that (see its
+ * doc comment). It's *build output*: `shiki`'s main entry point (what
+ * `loadShikiHighlighter()` imports) bundles a lookup table of dynamic
+ * `import()` calls, one per shiki-supported language (~200 of them), because
+ * `loadLanguage(lang: string)` resolves that string against the table at
+ * runtime — a bundler can't statically narrow which of those ~200 entries a
+ * given app will ever actually request, so it conservatively emits a
+ * build-output chunk for every one of them. `shiki/core` has no such
+ * table — a bundler only ever sees the exact grammar modules a caller
+ * `import`s for `languages` itself, so a consumer with a known, fixed
+ * language set gets a build output scoped to just those languages instead of
+ * shiki's full bundled set.
+ *
+ * This is *only* ever consulted for languages present in `languages` — see
+ * `<lyra-code-block>`'s `syncHighlight()`. A language absent from it still
+ * falls back to the ordinary `loadShikiHighlighter()` + `loadShikiLanguage()`
+ * dynamic-import path entirely unchanged, so a caller can pin its own known
+ * set while still letting an unexpected language through. Resolves to `null`
+ * (with a one-time `console.warn`, same convention as `loadShikiHighlighter()`)
+ * if building the fine-grained highlighter fails for any reason.
+ */
+export function loadShikiHighlighterCore(languages) {
+    let cached = highlighterCores.get(languages);
+    if (!cached) {
+        cached = Promise.all([
+            import('shiki/core'),
+            import('shiki/engine/oniguruma'),
+            import('shiki/themes/github-light.mjs'),
+            import('shiki/themes/github-dark.mjs'),
+        ])
+            .then(([{ createHighlighterCore }, { createOnigurumaEngine }, light, dark]) => createHighlighterCore({
+            themes: [light.default, dark.default],
+            langs: Object.values(languages),
+            engine: createOnigurumaEngine(import('shiki/wasm')),
+        }))
+            .catch((err) => {
+            console.warn("<lyra-code-block>'s `languages` property failed to build a fine-grained shiki highlighter — " +
+                'falling back to plain unhighlighted text for the languages it covers:', err);
+            return null;
+        });
+        highlighterCores.set(languages, cached);
+    }
+    return cached;
+}
+//# sourceMappingURL=code-loader.js.map

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

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