@aceshooting/lyra-ui 2.0.0 → 2.1.0

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

@@ -11,7 +11,7 @@ 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 { loadShikiHighlighter, loadShikiLanguage, loadShikiHighlighterCore, 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. */
@@ -58,11 +58,35 @@ const partTransformer = {
  * 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.
@@ -127,6 +151,7 @@ export class LyraCodeBlock extends LyraElement {
         };
         this.toggleCollapsed = () => {
             this.collapsed = !this.collapsed;
+            this.emit('lyra-toggle', { collapsed: this.collapsed });
         };
     }
     static { this.styles = [LyraElement.styles, styles]; }
@@ -142,27 +167,65 @@ export class LyraCodeBlock extends LyraElement {
         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 (this.shikiReady && (changed.has('code') || changed.has('language'))) {
+        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() {
-        const showingSkeleton = !this.shikiReady && !!this.language;
+        const showingSkeleton = !this.shikiReady && !!this.language && !this.preSuppliedGrammar();
         if (showingSkeleton)
             this.setAttribute('aria-busy', 'true');
         else
             this.removeAttribute('aria-busy');
     }
     syncHighlight() {
-        const hl = this.highlighter;
+        // 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 (!hl || !lang) {
+        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;
         }
@@ -174,7 +237,6 @@ export class LyraCodeBlock extends LyraElement {
         // 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
@@ -259,7 +321,7 @@ export class LyraCodeBlock extends LyraElement {
     // small piece of a larger document.
     render() {
         const hasHeader = !!this.filename || !!this.language || this.copyable || this.collapsible;
-        const showSkeleton = !this.shikiReady && !!this.language;
+        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 `
@@ -305,6 +367,9 @@ __decorate([
 __decorate([
     property({ attribute: 'max-height' })
 ], LyraCodeBlock.prototype, "maxHeight", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraCodeBlock.prototype, "languages", void 0);
 __decorate([
     state()
 ], LyraCodeBlock.prototype, "highlightedHtml", void 0);

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

@@ -1,7 +1,19 @@
-import type { Highlighter, BundledTheme } from 'shiki';
+import type { Highlighter, BundledTheme, HighlighterCore, LanguageInput } from 'shiki';
 /** Re-exported under a component-scoped name so importers don't need their
  *  own `import type { Highlighter } from 'shiki'`. */
 export type ShikiHighlighter = Highlighter;
+/** 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 = HighlighterCore;
+/** 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 = LanguageInput;
 /**
  * The two bundled themes every highlighter instance is seeded with, so a
  * single `codeToHtml()` call can emit a light *and* dark rendering at once
@@ -42,3 +54,34 @@ 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>;

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

@@ -77,3 +77,66 @@ 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;
+}

package/dist/components/combobox/combobox.d.ts

@@ -24,8 +24,11 @@ export type ComboboxSource = (query: string) => Promise<ComboboxSourceRow[]>;
  * @slot label - Custom label content.
  * @slot hint - Custom hint content.
  * @slot error - Custom error content.
- * @event change - The selection changed.
- * @event input - The user typed in the filter or changed the selection.
+ * @event {Event} change - The selection changed through user interaction. A bubbling,
+ * composed, non-cancelable Event.
+ * @event {InputEvent | Event} input - The user typed in the filter or changed the selection. Text
+ * edits expose the original InputEvent; selection changes emit a bubbling,
+ * composed, non-cancelable Event.
  * @event lyra-show - The listbox opened.
  * @event lyra-hide - The listbox closed.
  * @event lyra-clear - The value was cleared.
@@ -51,6 +54,21 @@ export declare class LyraCombobox extends LyraElement {
     static formAssociated: boolean;
     static styles: import("lit").CSSResultGroup[];
     static properties: {
+        multiple: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            noAccessor: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            noAccessor: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            noAccessor: boolean;
+        };
         value: {
             noAccessor: boolean;
         };
@@ -59,10 +77,7 @@ export declare class LyraCombobox extends LyraElement {
             noAccessor: boolean;
         };
     };
-    multiple: boolean;
     placeholder: string;
-    disabled: boolean;
-    required: boolean;
     label: string;
     hint: string;
     errorText: string;
@@ -70,6 +85,10 @@ export declare class LyraCombobox extends LyraElement {
     withClear: boolean;
     maxOptionsVisible: number;
     emptyText: string;
+    /** Status copy shown in the listbox while a `source` fetch is in flight. */
+    loadingText: string;
+    /** Status copy shown when `maxRender` caps the row list; `{n}` is replaced with the hidden count. */
+    overflowText: string;
     filter: OptionFilter | null;
     source: ComboboxSource | null;
     maxRender: number;
@@ -84,23 +103,40 @@ export declare class LyraCombobox extends LyraElement {
     private asyncRows;
     private sourceTimer?;
     private sourceToken;
+    private _sourceWarmed;
     private _selectedLabelCache;
     private _rowsByValue;
     private internals;
+    private validityController;
     private _fieldsetDisabled;
     private listId;
     private inputId;
     private cleanup?;
     private _isFirstUpdate;
     private _selected;
+    private _multiple;
+    private _disabled;
+    private _required;
     private _defaultSelected;
     private _defaultCaptured;
+    private _restoredStateActive;
     private _name;
     constructor();
+    get form(): HTMLFormElement | null;
+    get labels(): NodeList;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
     connectedCallback(): void;
     protected willUpdate(): void;
     get name(): string;
     set name(next: string);
+    get multiple(): boolean;
+    set multiple(next: boolean);
+    get disabled(): boolean;
+    set disabled(next: boolean);
+    get required(): boolean;
+    set required(next: boolean);
     /** The selected value(s): a string in single mode, a string[] in `multiple` mode. */
     get value(): string | string[];
     set value(next: string | string[]);
@@ -111,6 +147,7 @@ export declare class LyraCombobox extends LyraElement {
      *  own `disabled` IDL property/attribute is never mutated by a fieldset. */
     get effectiveDisabled(): boolean;
     formResetCallback(): void;
+    formStateRestoreCallback(state: string | File | FormData | null, _mode?: 'restore' | 'autocomplete'): void;
     /**
      * Called by the browser when an ancestor `<fieldset disabled>` toggles.
      * Tracked separately from the consumer's own `disabled` (see
@@ -135,6 +172,10 @@ export declare class LyraCombobox extends LyraElement {
     private hide;
     private onDocPointer;
     protected updated(changed: PropertyValues): void;
+    /** Dispatches the platform-style value-event pair used by non-text user
+     * interactions. Text editing keeps and exposes the original InputEvent
+     * from the shadow input so its data/inputType metadata is not lost. */
+    private emitValueEvents;
     private pickRow;
     private removeValue;
     private clear;