@aceshooting/lyra-ui 2.1.0 → 2.2.0

package/dist/components/responsive-panel/responsive-panel.js

@@ -1,363 +1,5 @@
-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 { LyraElement } from '../../internal/lyra-element.js';
-import { activateOverlay, deepActiveElement } from '../../internal/overlay-manager.js';
+export * from './responsive-panel.class.js';
+import { LyraResponsivePanel } from './responsive-panel.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { lockScroll } from '../../internal/scroll-lock.js';
-import { styles } from './responsive-panel.styles.js';
-const HEADING_SELECTOR = 'h1, h2, h3, h4, h5, h6, [role="heading"]';
-/**
- * Pure resolution of the `mode` prop + current viewport into the actual
- * presentation. Kept separate from the `matchMedia` listener wiring below so
- * it's independently unit-testable, and so the live-viewport-response logic
- * can be exercised in tests by calling it (or the instance method that wraps
- * it) directly instead of needing control over the real browser window,
- * which `@web/test-runner` doesn't give.
- */
-export function resolveEffectiveMode(mode, belowBreakpoint) {
-    if (mode === 'inline' || mode === 'overlay')
-        return mode;
-    return belowBreakpoint ? 'overlay' : 'inline';
-}
-/**
- * `<lyra-responsive-panel>` — the same slotted content either docked inline
- * in the page's normal layout flow (desktop) or presented as a full-screen/
- * bottom-sheet overlay (mobile), depending on viewport width. Typical uses:
- * a settings panel or a conversation-history sidebar that's a permanent
- * docked pane on a wide screen but a modal on a phone.
- *
- * Breakpoint detection uses `matchMedia('(max-width: ' + mobileBreakpoint +
- * ')')`, re-evaluated live while connected -- resizing/rotating a device
- * that crosses the breakpoint while `mode="auto"` (the default) updates the
- * effective presentation without unmounting or re-creating the slotted
- * content: inline and overlay presentation share the exact same shadow DOM
- * structure (only a css class, and the overlay-only `role`/`aria-modal`
- * attributes and backdrop element, differ), so lit-html's diffing keeps
- * `[part="body"]` and its `<slot>` as the same DOM node across the
- * transition -- scroll position and focus inside the slotted content survive
- * it for free. When an open inline panel becomes modal, focus already inside
- * is preserved and outside focus moves to the first available target. Closing
- * still returns to the opener captured by the original inline open.
- *
- * The overlay presentation uses the library's shared overlay coordinator for
- * focus trapping, Escape/backdrop dismissal, inerting, and stack ordering,
- * while retaining this component's own responsive rendering and close event.
- *
- * Accessible name (overlay presentation only -- the inline presentation has
- * no dialog semantics to name): `label`, when set, is used verbatim. When
- * `label` is empty, this falls back to the `header` slot's content -- a
- * heading element (`h1`–`h6` or `[role="heading"]`) among the slotted header
- * content wins if present, otherwise the header slot's full text content is
- * used, mirroring lyra-dialog's `detectHeading()`/`headingText` fallback (see
- * dialog.ts's module doc for why this uses `aria-label`, a copied string,
- * rather than `aria-labelledby`: the header content is light DOM while
- * `[part="panel"]` lives in this element's shadow tree, and an ID-reference
- * attribute can't resolve across that boundary). A panel opened without
- * either `label` or header content still renders `role="dialog"` with no
- * accessible name -- set one of the two to avoid that.
- *
- * @customElement lyra-responsive-panel
- * @slot - The panel body.
- * @slot header - Optional header content, rendered above the body.
- * @slot footer - Optional footer content (e.g. action buttons), rendered below the body.
- * @event lyra-close - `detail: ResponsivePanelCloseReason`. Fired by the overlay presentation's
- *   built-in dismiss triggers (Escape, backdrop click) and by any `close()` call, in either
- *   presentation -- a plain `open = false` property write does not fire it (matching
- *   lyra-dialog's own precedent: only going through `close()` counts as a dismissal), and this
- *   is deliberately the same event/semantics in both presentations, rather than only being
- *   meaningful for the overlay case, so a consumer only has to wire up one listener regardless
- *   of which presentation is currently active.
- * @event lyra-mode-change - `detail: ResponsivePanelModeChangeDetail`. Fired whenever the
- *   *effective* mode (not the `mode` prop's literal value, which may be `'auto'`) changes between
- *   `'inline'` and `'overlay'` -- crossing the breakpoint while `mode="auto"`, or the host
- *   reassigning `mode` to a value that changes the effective presentation. Never fired for the
- *   initial render, only for a live change thereafter.
- * @csspart base - The root wrapper; `display: none` while closed, positioned `fixed` while open
- *   and in the overlay presentation.
- * @csspart backdrop - The full-viewport scrim behind the panel -- only rendered in the overlay
- *   presentation.
- * @csspart panel - The panel surface itself (`role="dialog"` while open and in the overlay
- *   presentation).
- * @csspart header - The wrapper around the `header` slot.
- * @csspart body - The wrapper around the default slot.
- * @csspart footer - The wrapper around the `footer` slot.
- */
-export class LyraResponsivePanel extends LyraElement {
-    constructor() {
-        super(...arguments);
-        /** Whether the panel is open. In the inline presentation this just means visible/mounted; in
-         *  the overlay presentation this is the actual modal open/closed state. */
-        this.open = false;
-        /** `'auto'` (default) tracks `mobile-breakpoint` live; `'inline'`/`'overlay'` force that
-         *  presentation regardless of viewport width. */
-        this.mode = 'auto';
-        /** Only affects the overlay presentation's visual treatment -- `'fullscreen'` (default) covers
-         *  the whole viewport; `'bottom-sheet'` slides up from the bottom and doesn't cover the full
-         *  height. */
-        this.variant = 'fullscreen';
-        /** Accessible name for the overlay presentation's `role="dialog"`. Unused in the inline
-         *  presentation, which has no dialog semantics to name. When empty, falls back to the `header`
-         *  slot's content -- see the class doc for the full fallback order. */
-        this.label = '';
-        /** CSS length passed to `matchMedia` as `(max-width: <this>)` to decide, in `mode="auto"`,
-         *  whether the effective presentation is `'overlay'` (below/at this width) or `'inline'`
-         *  (above it). */
-        this.mobileBreakpoint = '768px';
-        this.belowBreakpoint = false;
-        this.effectiveMode = 'inline';
-        this.hasHeaderSlot = false;
-        this.hasFooterSlot = false;
-        /** Whether the overlay-only mechanics (scroll-lock and shared overlay registration) are currently
-         *  engaged -- derived from `effectiveMode === 'overlay' && open`, tracked separately from those
-         *  two properties so willUpdate can diff "was engaged" vs "should be engaged now" regardless of
-         *  which of the two changed. */
-        this.overlayChromeActive = false;
-        this.focusOverlayAfterUpdate = false;
-        this.isFirstUpdate = true;
-        this.onMediaChange = (e) => {
-            this.handleBreakpointChange(e.matches);
-        };
-        this.onHeaderSlotChange = (e) => {
-            this.hasHeaderSlot = e.target.assignedElements({ flatten: true }).length > 0;
-            this.headingText = this.detectHeadingText();
-        };
-        this.onFooterSlotChange = (e) => {
-            this.hasFooterSlot = e.target.assignedElements({ flatten: true }).length > 0;
-        };
-        this.onBackdropClick = () => {
-            this.overlayHandle?.dismissBackdrop();
-        };
-    }
-    static { this.styles = [LyraElement.styles, styles]; }
-    willUpdate(changed) {
-        this.isFirstUpdate = !this.hasUpdated;
-        if (this.isFirstUpdate) {
-            this.hasHeaderSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'header');
-            this.hasFooterSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'footer');
-            this.headingText = this.detectHeadingText();
-        }
-        // Must run before the effectiveMode computation below reads
-        // belowBreakpoint: setupMediaQuery() -> handleBreakpointChange() mutates
-        // belowBreakpoint synchronously, and a runtime mobileBreakpoint change is
-        // otherwise the only kind of change in this method that doesn't itself
-        // touch mode/belowBreakpoint, so computing effectiveMode first would read
-        // the not-yet-updated belowBreakpoint and never get another chance to
-        // react -- a property write from inside willUpdate doesn't schedule a
-        // fresh update, it only folds into the one already in progress.
-        // mobileBreakpoint is present on the very first willUpdate too (Lit's
-        // changed-properties map includes every class-field default from
-        // construction), but connectedCallback() already called setupMediaQuery()
-        // once before this first update runs, so repeating it here would be
-        // redundant -- only a live post-mount change should re-run it.
-        if (!this.isFirstUpdate && changed.has('mobileBreakpoint') && this.isConnected) {
-            this.setupMediaQuery();
-        }
-        if (this.isFirstUpdate || changed.has('mode') || changed.has('belowBreakpoint')) {
-            this.effectiveMode = resolveEffectiveMode(this.mode, this.belowBreakpoint);
-        }
-        // Captured on a genuine open transition only, independent of
-        // effectiveMode at that moment -- so it reflects whatever triggered the
-        // open even if a later breakpoint crossing (while still open) switches
-        // the presentation to overlay before close() runs. Deliberately not
-        // folded into the overlayOpen-engage branch below: that branch also
-        // fires when only effectiveMode (not open) changes, which would
-        // re-capture whatever currently has focus (e.g. something inside the
-        // panel) instead of the original external trigger.
-        if (changed.has('open') && this.open) {
-            const active = deepActiveElement(this.ownerDocument);
-            this.lastTrigger = active && typeof active.focus === 'function' ? active : undefined;
-        }
-        const overlayOpen = this.effectiveMode === 'overlay' && this.open;
-        if (overlayOpen !== this.overlayChromeActive) {
-            this.overlayChromeActive = overlayOpen;
-            if (overlayOpen) {
-                this.activateOverlayChrome();
-                // Once the presentation becomes modal, focus cannot remain behind
-                // it. The manager preserves focus that is already inside the panel
-                // and otherwise moves it to the first composed focus target.
-                this.focusOverlayAfterUpdate = true;
-            }
-            else {
-                // Removing modal chrome while the still-open panel becomes inline
-                // must preserve focus in that same panel. Only a real open -> closed
-                // transition restores the opener.
-                this.deactivateOverlayChrome(changed.has('open') && !this.open);
-            }
-        }
-        if (changed.has('open') && !this.open)
-            this.lastTrigger = undefined;
-    }
-    // Runs after render (not willUpdate) so [part="panel"] has already landed
-    // in the DOM before the fallback .focus() call below can rely on it --
-    // mirrors lyra-dialog's identical ordering rationale.
-    updated(changed) {
-        if (!this.isFirstUpdate && changed.has('effectiveMode')) {
-            this.emit('lyra-mode-change', { mode: this.effectiveMode });
-        }
-        if (this.focusOverlayAfterUpdate) {
-            this.focusOverlayAfterUpdate = false;
-            this.overlayHandle?.focusInitial();
-        }
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.setupMediaQuery();
-        // A reconnect (e.g. a drag-and-drop reparent keeping this same element
-        // instance) fires disconnectedCallback then connectedCallback
-        // synchronously with no update in between, so willUpdate never reruns to
-        // notice overlay chrome is still supposed to be active -- restore it.
-        const overlayOpen = resolveEffectiveMode(this.mode, this.belowBreakpoint) === 'overlay' && this.open;
-        if (this.hasUpdated && overlayOpen) {
-            if (this.overlayHandle?.isActive()) {
-                this.overlayHandle.resume();
-            }
-            else {
-                this.activateOverlayChrome();
-            }
-            if (!this.releaseScrollLock)
-                this.releaseScrollLock = lockScroll(this.ownerDocument);
-            queueMicrotask(() => this.overlayHandle?.focusInitial());
-        }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.mediaQuery?.removeEventListener('change', this.onMediaChange);
-        this.mediaQuery = undefined;
-        this.releaseScrollLock?.();
-        this.releaseScrollLock = undefined;
-        this.overlayHandle?.suspend();
-    }
-    activateOverlayChrome() {
-        this.releaseScrollLock ??= lockScroll(this.ownerDocument);
-        this.overlayHandle = activateOverlay({
-            host: this,
-            panel: () => this.shadowRoot?.querySelector('[part="panel"]') ?? null,
-            onEscape: () => this.close('escape'),
-            onBackdrop: () => this.close('backdrop'),
-            restoreFocusTo: this.lastTrigger ?? null,
-        });
-    }
-    deactivateOverlayChrome(restoreFocus = true) {
-        this.releaseScrollLock?.();
-        this.releaseScrollLock = undefined;
-        this.overlayHandle?.deactivate({ restoreFocus });
-        this.overlayHandle = undefined;
-    }
-    setupMediaQuery() {
-        this.mediaQuery?.removeEventListener('change', this.onMediaChange);
-        const view = this.ownerDocument.defaultView;
-        if (!view?.matchMedia) {
-            this.mediaQuery = undefined;
-            return;
-        }
-        this.mediaQuery = view.matchMedia(`(max-width: ${this.mobileBreakpoint})`);
-        this.mediaQuery.addEventListener('change', this.onMediaChange);
-        this.handleBreakpointChange(this.mediaQuery.matches);
-    }
-    /** The breakpoint-response logic itself, kept callable independently of the
-     *  `matchMedia` listener that normally drives it -- tests invoke this
-     *  directly to simulate crossing the breakpoint. */
-    handleBreakpointChange(matches) {
-        this.belowBreakpoint = matches;
-    }
-    // Only direct children slotted into `header` are scanned -- same depth
-    // limit lyra-dialog's own detectHeading() applies to its direct children.
-    // A heading tag among them wins (its own text only, so a header slot mixing
-    // a heading with e.g. a trailing icon button doesn't pull the button's
-    // label into the accessible name); otherwise the header slot's combined
-    // text stands in for it, since this component (unlike lyra-dialog) has a
-    // dedicated header slot that's already the conventional place a heading
-    // would go. Recomputed only on slot assignment changes, not on every
-    // render -- same rationale as lyra-dialog's detectHeading().
-    detectHeadingText() {
-        const headerChildren = Array.from(this.children).filter((el) => el.getAttribute('slot') === 'header');
-        if (headerChildren.length === 0)
-            return undefined;
-        const heading = headerChildren.find((el) => el.matches(HEADING_SELECTOR));
-        if (heading)
-            return heading.textContent?.trim() || undefined;
-        return (headerChildren
-            .map((el) => el.textContent?.trim())
-            .filter(Boolean)
-            .join(' ') || undefined);
-    }
-    /**
-     * Close the panel. `reason` is forwarded as the `lyra-close` detail --
-     * built-in overlay triggers pass `'escape'`/`'backdrop'`; a consumer's own
-     * close affordance (e.g. a footer button, or a docked panel's own toggle)
-     * should call this directly with its own reason string. Fires in both
-     * presentations (see the class doc's `lyra-close` note) but only returns
-     * focus to the trigger that opened it when the overlay presentation is
-     * active, since the inline presentation never took focus away from
-     * anything to begin with.
-     */
-    close(reason = 'api') {
-        if (!this.open)
-            return;
-        this.open = false;
-        this.emit('lyra-close', reason);
-    }
-    render() {
-        const overlay = this.effectiveMode === 'overlay';
-        const accessibleName = this.label || this.headingText;
-        return html `
-      <div part="base" class=${overlay ? 'overlay' : 'inline'}>
-        ${overlay ? html `<div part="backdrop" @click=${this.onBackdropClick}></div>` : nothing}
-        <div
-          part="panel"
-          role=${overlay ? 'dialog' : nothing}
-          aria-modal=${overlay ? 'true' : nothing}
-          aria-label=${overlay && accessibleName ? accessibleName : nothing}
-          tabindex=${overlay ? '-1' : nothing}
-        >
-          <div part="header" ?hidden=${!this.hasHeaderSlot}>
-            <slot name="header" @slotchange=${this.onHeaderSlotChange}></slot>
-          </div>
-          <div part="body">
-            <slot></slot>
-          </div>
-          <div part="footer" ?hidden=${!this.hasFooterSlot}>
-            <slot name="footer" @slotchange=${this.onFooterSlotChange}></slot>
-          </div>
-        </div>
-      </div>
-    `;
-    }
-}
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraResponsivePanel.prototype, "open", void 0);
-__decorate([
-    property({ reflect: true })
-], LyraResponsivePanel.prototype, "mode", void 0);
-__decorate([
-    property({ reflect: true })
-], LyraResponsivePanel.prototype, "variant", void 0);
-__decorate([
-    property()
-], LyraResponsivePanel.prototype, "label", void 0);
-__decorate([
-    property({ attribute: 'mobile-breakpoint' })
-], LyraResponsivePanel.prototype, "mobileBreakpoint", void 0);
-__decorate([
-    state()
-], LyraResponsivePanel.prototype, "belowBreakpoint", void 0);
-__decorate([
-    state()
-], LyraResponsivePanel.prototype, "effectiveMode", void 0);
-__decorate([
-    state()
-], LyraResponsivePanel.prototype, "hasHeaderSlot", void 0);
-__decorate([
-    state()
-], LyraResponsivePanel.prototype, "hasFooterSlot", void 0);
-__decorate([
-    state()
-], LyraResponsivePanel.prototype, "headingText", void 0);
 defineElement('responsive-panel', LyraResponsivePanel);
+//# sourceMappingURL=responsive-panel.js.map

package/dist/components/responsive-panel/responsive-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive-panel.js","sourceRoot":"","sources":["../../../src/components/responsive-panel/responsive-panel.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,CAAC"}

package/dist/components/responsive-panel/responsive-panel.styles.d.ts

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

package/dist/components/responsive-panel/responsive-panel.styles.d.ts.map

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

package/dist/components/responsive-panel/responsive-panel.styles.js

@@ -6,7 +6,7 @@ export const styles = css `
        --wa-*-overlay token exists in the design system to resolve through,
        same rationale as lyra-dialog's own --lyra-dialog-overlay-color and
        lyra-widget's --lyra-widget-overlay-color). */
-    --lyra-responsive-panel-overlay-color: rgb(0 0 0 / 0.5);
+    --lyra-responsive-panel-overlay-color: var(--lyra-color-overlay);
     display: block;
   }
 
@@ -24,7 +24,7 @@ export const styles = css `
     display: flex;
     position: fixed;
     inset: 0;
-    z-index: var(--lyra-overlay-stack-index, 1000);
+    z-index: var(--lyra-overlay-stack-index, var(--lyra-layer-modal));
   }
   /* Bottom-sheet anchors its panel to the block-end edge instead of
      stretching it full-height like fullscreen does. */
@@ -49,7 +49,7 @@ export const styles = css `
   /* Inline (docked) presentation: a normal panel in the page's layout flow,
      bordered like a card so it reads as a distinct region. */
   [part='base']:not(.overlay) [part='panel'] {
-    border: 1px solid var(--lyra-color-border);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     border-radius: var(--lyra-radius);
     overflow: auto;
   }
@@ -71,13 +71,15 @@ export const styles = css `
   :host([variant='bottom-sheet']) [part='base'].overlay [part='panel'] {
     block-size: auto;
     max-block-size: 85vh;
+    max-block-size: 85dvh;
+    padding-block-end: var(--lyra-safe-area-bottom);
     border-start-start-radius: var(--lyra-radius);
     border-start-end-radius: var(--lyra-radius);
   }
 
   [part='header'] {
     padding: var(--lyra-space-m) var(--lyra-space-l);
-    border-block-end: 1px solid var(--lyra-color-border);
+    border-block-end: var(--lyra-border-width-thin) solid var(--lyra-color-border);
   }
   [part='header'][hidden] {
     display: none;
@@ -95,9 +97,10 @@ export const styles = css `
     justify-content: flex-end;
     gap: var(--lyra-space-s);
     padding: var(--lyra-space-m) var(--lyra-space-l);
-    border-block-start: 1px solid var(--lyra-color-border);
+    border-block-start: var(--lyra-border-width-thin) solid var(--lyra-color-border);
   }
   [part='footer'][hidden] {
     display: none;
   }
 `;
+//# sourceMappingURL=responsive-panel.styles.js.map

package/dist/components/responsive-panel/responsive-panel.styles.js.map

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

package/dist/components/result-card/result-card.class.d.ts

@@ -0,0 +1,51 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/**
+ * `<lyra-result-card>` — a small bordered card shell for a custom tool-result
+ * renderer's body (see `<lyra-tool-result-view>`'s `registerToolRenderer()`
+ * in `../tool-result-view/registry.js`). Purely visual, with no state of its
+ * own beyond slot-presence tracking: it gives every custom renderer the same
+ * "small card" language (border, radius, optional title + header actions)
+ * without each one hand-rolling its own box.
+ *
+ * Pairs with `<lyra-result-field>` for the label/value rows that typically
+ * make up the body, though the default slot accepts any content — nothing
+ * here requires a `<lyra-result-field>` specifically.
+ *
+ * @customElement lyra-result-card
+ * @slot - The card body — typically one or more `<lyra-result-field>` rows.
+ * @slot actions - Small header controls (e.g. a copy button), rendered
+ * alongside the title.
+ * @csspart base - The outer bordered container.
+ * @csspart header - The header row wrapping the title and the `actions`
+ * slot. Present in the DOM at all times (so a later `slotchange` on
+ * `actions` is still observed) but `hidden` whenever there is no `title`
+ * and no `actions` content — an untitled, action-less card has no visible
+ * header bar at all.
+ * @csspart title - The title text. Truncates with an ellipsis when it
+ * overflows; carries its own native `title` attribute (the full string) so
+ * hovering the truncated text reveals it via the browser's default tooltip,
+ * scoped to just this element rather than the whole card.
+ * @csspart actions - The wrapper around the `actions` slot. `hidden`
+ * whenever the slot has no assigned content.
+ * @csspart body - The wrapper around the default slot.
+ */
+export declare class LyraResultCard extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Small heading for the card. Leave unset for an untitled card (e.g. a
+     *  bare block of `<lyra-result-field>` rows with no natural heading).
+     *  Rendered into the truncating `[part="title"]` span, which also carries
+     *  this value as its own `title` attribute so the disclosure tooltip is
+     *  scoped to that element rather than the whole host. */
+    title: string;
+    private hasActionsSlot;
+    protected willUpdate(): void;
+    private onActionsSlotChange;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-result-card': LyraResultCard;
+    }
+}
+//# sourceMappingURL=result-card.class.d.ts.map

package/dist/components/result-card/result-card.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"result-card.class.d.ts","sourceRoot":"","sources":["../../../src/components/result-card/result-card.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAG7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBAAa,cAAe,SAAQ,WAAW;IAC7C,MAAM,CAAC,MAAM,iCAAgC;IAE7C;;;;6DAIyD;IAC7C,KAAK,SAAM;IAOd,OAAO,CAAC,cAAc,CAAS;IAExC,SAAS,CAAC,UAAU,IAAI,IAAI,CAI3B;IAED,OAAO,CAAC,mBAAmB,CAEzB;IAEF,MAAM,IAAI,cAAc,CAcvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/components/result-card/result-card.class.js

@@ -0,0 +1,88 @@
+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 { LyraElement } from '../../internal/lyra-element.js';
+import { styles } from './result-card.styles.js';
+/**
+ * `<lyra-result-card>` — a small bordered card shell for a custom tool-result
+ * renderer's body (see `<lyra-tool-result-view>`'s `registerToolRenderer()`
+ * in `../tool-result-view/registry.js`). Purely visual, with no state of its
+ * own beyond slot-presence tracking: it gives every custom renderer the same
+ * "small card" language (border, radius, optional title + header actions)
+ * without each one hand-rolling its own box.
+ *
+ * Pairs with `<lyra-result-field>` for the label/value rows that typically
+ * make up the body, though the default slot accepts any content — nothing
+ * here requires a `<lyra-result-field>` specifically.
+ *
+ * @customElement lyra-result-card
+ * @slot - The card body — typically one or more `<lyra-result-field>` rows.
+ * @slot actions - Small header controls (e.g. a copy button), rendered
+ * alongside the title.
+ * @csspart base - The outer bordered container.
+ * @csspart header - The header row wrapping the title and the `actions`
+ * slot. Present in the DOM at all times (so a later `slotchange` on
+ * `actions` is still observed) but `hidden` whenever there is no `title`
+ * and no `actions` content — an untitled, action-less card has no visible
+ * header bar at all.
+ * @csspart title - The title text. Truncates with an ellipsis when it
+ * overflows; carries its own native `title` attribute (the full string) so
+ * hovering the truncated text reveals it via the browser's default tooltip,
+ * scoped to just this element rather than the whole card.
+ * @csspart actions - The wrapper around the `actions` slot. `hidden`
+ * whenever the slot has no assigned content.
+ * @csspart body - The wrapper around the default slot.
+ */
+export class LyraResultCard extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Small heading for the card. Leave unset for an untitled card (e.g. a
+         *  bare block of `<lyra-result-field>` rows with no natural heading).
+         *  Rendered into the truncating `[part="title"]` span, which also carries
+         *  this value as its own `title` attribute so the disclosure tooltip is
+         *  scoped to that element rather than the whole host. */
+        this.title = '';
+        // See `<lyra-widget>`'s identical `hasActionsSlot` -- a `[part]` wrapper
+        // always contains a literal `<slot>` child regardless of assigned
+        // content, so CSS `:empty` never matches; real emptiness is tracked here
+        // in JS instead and used to both hide the actions wrapper and decide
+        // whether the header row itself has anything to show.
+        this.hasActionsSlot = false;
+        this.onActionsSlotChange = (e) => {
+            this.hasActionsSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    willUpdate() {
+        if (!this.hasUpdated) {
+            this.hasActionsSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'actions');
+        }
+    }
+    render() {
+        const hasTitle = this.title.length > 0;
+        const hasHeader = hasTitle || this.hasActionsSlot;
+        return html `
+      <div part="base">
+        <div part="header" ?hidden=${!hasHeader}>
+          ${hasTitle ? html `<span part="title" title=${this.title}>${this.title}</span>` : nothing}
+          <div part="actions" ?hidden=${!this.hasActionsSlot}>
+            <slot name="actions" @slotchange=${this.onActionsSlotChange}></slot>
+          </div>
+        </div>
+        <div part="body"><slot></slot></div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property()
+], LyraResultCard.prototype, "title", void 0);
+__decorate([
+    state()
+], LyraResultCard.prototype, "hasActionsSlot", void 0);
+//# sourceMappingURL=result-card.class.js.map

package/dist/components/result-card/result-card.class.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"result-card.class.js","sourceRoot":"","sources":["../../../src/components/result-card/result-card.class.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,OAAO,cAAe,SAAQ,WAAW;IAA/C;;QAGE;;;;iEAIyD;QAC7C,UAAK,GAAG,EAAE,CAAC;QAEvB,yEAAyE;QACzE,kEAAkE;QAClE,yEAAyE;QACzE,qEAAqE;QACrE,sDAAsD;QACrC,mBAAc,GAAG,KAAK,CAAC;QAQhC,wBAAmB,GAAG,CAAC,CAAQ,EAAQ,EAAE;YAC/C,IAAI,CAAC,cAAc,GAAI,CAAC,CAAC,MAA0B,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;QACrG,CAAC,CAAC;IAiBJ,CAAC;aAzCQ,WAAM,GAAG,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,AAA/B,CAAgC;IAgBnC,UAAU;QAClB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC,CAAC;QACtG,CAAC;IACH,CAAC;IAMD,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;QACvC,MAAM,SAAS,GAAG,QAAQ,IAAI,IAAI,CAAC,cAAc,CAAC;QAClD,OAAO,IAAI,CAAA;;qCAEsB,CAAC,SAAS;YACnC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,4BAA4B,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO;wCAC1D,CAAC,IAAI,CAAC,cAAc;+CACb,IAAI,CAAC,mBAAmB;;;;;KAKlE,CAAC;IACJ,CAAC;CACF;AAlCa;IAAX,QAAQ,EAAE;6CAAY;AAON;IAAhB,KAAK,EAAE;sDAAgC"}

package/dist/components/result-card/result-card.d.ts

@@ -1,50 +1,2 @@
-import { type TemplateResult } from 'lit';
-import { LyraElement } from '../../internal/lyra-element.js';
-/**
- * `<lyra-result-card>` — a small bordered card shell for a custom tool-result
- * renderer's body (see `<lyra-tool-result-view>`'s `registerToolRenderer()`
- * in `../tool-result-view/registry.js`). Purely visual, with no state of its
- * own beyond slot-presence tracking: it gives every custom renderer the same
- * "small card" language (border, radius, optional title + header actions)
- * without each one hand-rolling its own box.
- *
- * Pairs with `<lyra-result-field>` for the label/value rows that typically
- * make up the body, though the default slot accepts any content — nothing
- * here requires a `<lyra-result-field>` specifically.
- *
- * @customElement lyra-result-card
- * @slot - The card body — typically one or more `<lyra-result-field>` rows.
- * @slot actions - Small header controls (e.g. a copy button), rendered
- * alongside the title.
- * @csspart base - The outer bordered container.
- * @csspart header - The header row wrapping the title and the `actions`
- * slot. Present in the DOM at all times (so a later `slotchange` on
- * `actions` is still observed) but `hidden` whenever there is no `title`
- * and no `actions` content — an untitled, action-less card has no visible
- * header bar at all.
- * @csspart title - The title text. Truncates with an ellipsis when it
- * overflows; carries its own native `title` attribute (the full string) so
- * hovering the truncated text reveals it via the browser's default tooltip,
- * scoped to just this element rather than the whole card.
- * @csspart actions - The wrapper around the `actions` slot. `hidden`
- * whenever the slot has no assigned content.
- * @csspart body - The wrapper around the default slot.
- */
-export declare class LyraResultCard extends LyraElement {
-    static styles: import("lit").CSSResultGroup[];
-    /** Small heading for the card. Leave unset for an untitled card (e.g. a
-     *  bare block of `<lyra-result-field>` rows with no natural heading).
-     *  Rendered into the truncating `[part="title"]` span, which also carries
-     *  this value as its own `title` attribute so the disclosure tooltip is
-     *  scoped to that element rather than the whole host. */
-    title: string;
-    private hasActionsSlot;
-    protected willUpdate(): void;
-    private onActionsSlotChange;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'lyra-result-card': LyraResultCard;
-    }
-}
+export * from './result-card.class.js';
+//# sourceMappingURL=result-card.d.ts.map

package/dist/components/result-card/result-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"result-card.d.ts","sourceRoot":"","sources":["../../../src/components/result-card/result-card.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}