@aceshooting/lyra-ui 2.0.0 → 2.2.0

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

@@ -1,345 +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 } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './dock-panel.class.js';
+import { LyraDockPanel } from './dock-panel.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { isRtl } from '../../internal/rtl.js';
-import { nextId } from '../../internal/a11y.js';
-import { chevronIcon } from '../../internal/icons.js';
-import { styles } from './dock-panel.styles.js';
-/** Arrow-key step, in px, per keydown on the resize handle. */
-const KEYBOARD_STEP_PX = 16;
-const LENGTH_RE = /^(-?[\d.]+)(px|rem|em|vw|vh|%)?$/;
-/**
- * Resolves an arbitrary CSS length (`px`, `rem`, `em`, `vw`, `vh`, `%`, or a
- * bare/unitless number treated as `px`) to a live pixel value, without a DOM
- * probe measurement -- `min-size`/`max-size` are pure constraints that are
- * never themselves rendered anywhere, so there's nothing to measure; the
- * *current* `size` is instead always read back from the host's own
- * `getBoundingClientRect()` (see `currentSizePx()`), which handles any unit
- * for free since the browser already resolved it during layout. Returns
- * `undefined` for an empty/unparseable string.
- */
-export function parseLengthPx(length, containerPx, fontSizeEl = document.documentElement) {
-    const trimmed = length.trim();
-    if (!trimmed)
-        return undefined;
-    const match = LENGTH_RE.exec(trimmed);
-    if (!match)
-        return undefined;
-    const value = parseFloat(match[1]);
-    switch (match[2]) {
-        case '%':
-            return (value / 100) * containerPx;
-        case 'rem':
-            return value * parseFloat(getComputedStyle(document.documentElement).fontSize);
-        case 'em':
-            return value * parseFloat(getComputedStyle(fontSizeEl).fontSize);
-        case 'vw':
-            return (value / 100) * window.innerWidth;
-        case 'vh':
-            return (value / 100) * window.innerHeight;
-        default:
-            return value;
-    }
-}
-/**
- * `<lyra-dock-panel>` — a single panel docked to one edge of whatever
- * contains it, resizable by dragging its inner edge. Unlike `<lyra-split>`
- * (which owns and lays out N sibling panels, and requires restructuring a
- * layout so every panel becomes its direct child), this is one self-
- * contained element you drop next to your existing content -- typically as
- * an absolutely-positioned child of a `position: relative` parent, or as a
- * flex item alongside a main-content sibling. It deliberately imposes no
- * `position`/`inset` of its own (see the styles module): it only manages its
- * own size along the resize axis (`inline-size` for `start`/`end`,
- * `block-size` for `top`/`bottom`) and fills 100% of the cross axis, leaving
- * where it sits in the page entirely up to the consumer's own layout.
- *
- * `lyra-split` stays the right primitive for the multi-sibling-panel case;
- * this is the primitive for the single-edge-docked case, kept as a separate
- * component rather than a second mode bolted onto `lyra-split`'s API.
- *
- * Pointer-drag-resize mirrors `lyra-split`'s pointer-capture technique
- * (pointerdown captures the pointer on the handle, pointermove computes a
- * new size, pointerup/pointercancel/lostpointercapture all release it) but
- * for a single draggable edge instead of N-1 dividers between N panels, and
- * reasons in raw pixels throughout rather than percent -- `size` is a CSS
- * length, and pointer movement is naturally pixels, so there's no percent
- * domain to convert through here. Every resize (drag step, drag release, or
- * keyboard step) always commits `size` as a `px` string regardless of what
- * unit `size`/`min-size`/`max-size` were originally expressed in -- a drag
- * inherently produces a pixel-precise result, so re-expressing it in the
- * caller's original unit (e.g. back into `rem`) would just be lossy
- * re-derivation for no benefit.
- *
- * Collapsing hides the slotted content but keeps the panel itself at a
- * small persistent "rail" width/height (`--lyra-dock-panel-collapsed-size`,
- * default `var(--lyra-icon-button-size)`) rather than collapsing to zero --
- * a zero-size collapsed panel would have nowhere left to host the toggle
- * button that re-expands it. `size` itself is left untouched while
- * collapsed, so re-expanding restores exactly what it was.
- *
- * @customElement lyra-dock-panel
- * @slot - The panel's own content.
- * @event lyra-resize - `detail: { size }` (a `px` CSS length string), fired on every drag step,
- *   drag release, and keyboard step.
- * @event lyra-collapse-change - `detail: { collapsed }`, fired whenever the collapse toggle changes
- *   `collapsed`.
- * @csspart base - The panel root.
- * @csspart content - The wrapper around the default slot; hidden while `collapsed`.
- * @csspart handle - The draggable resize handle on the panel's inner edge. Only rendered when
- *   `resizable` and not `collapsed`.
- * @csspart collapse-toggle - The collapse/expand toggle button. Only rendered when `collapsible`.
- */
-export class LyraDockPanel extends LyraElement {
-    constructor() {
-        super(...arguments);
-        this.edge = 'end';
-        /** The current docked size along the resize axis, as a CSS length (e.g. `"320px"`). */
-        this.size = '280px';
-        /** Minimum resize bound, as a CSS length. */
-        this.minSize = '160px';
-        /** Maximum resize bound, as a CSS length. Empty means "no explicit cap" -- the live extent of
-         *  the containing element is used instead, so the panel still can't be dragged wider/taller than
-         *  its container. */
-        this.maxSize = '';
-        this.collapsible = false;
-        this.collapsed = false;
-        /** When `false`, no drag handle renders at all and the panel is a fixed size. */
-        this.resizable = true;
-        this.drag = null;
-        this.contentId = nextId('dock-panel-content');
-        this.onPointerDown = (e) => {
-            if (!this.resizable || this.collapsed || this.drag)
-                return;
-            this.drag = {
-                pointerId: e.pointerId,
-                startPos: this.axis === 'inline' ? e.clientX : e.clientY,
-                startSizePx: this.currentSizePx(),
-            };
-            e.target.setPointerCapture(e.pointerId);
-            window.addEventListener('pointermove', this.onPointerMove);
-            window.addEventListener('pointerup', this.onPointerUp);
-            // A drag can end without a pointerup: a system gesture / palm rejection
-            // can fire pointercancel, and losing capture (e.g. element removed) fires
-            // lostpointercapture -- both need the same teardown as pointerup or the
-            // handle keeps "resizing" in response to unrelated movement.
-            window.addEventListener('pointercancel', this.onPointerUp);
-            window.addEventListener('lostpointercapture', this.onPointerUp);
-        };
-        this.onPointerMove = (e) => {
-            const drag = this.drag;
-            if (!drag || e.pointerId !== drag.pointerId)
-                return;
-            const pos = this.axis === 'inline' ? e.clientX : e.clientY;
-            const delta = this.growSign * (pos - drag.startPos);
-            this.applySize(drag.startSizePx + delta);
-        };
-        this.onPointerUp = (e) => {
-            if (!this.drag || e.pointerId !== this.drag.pointerId)
-                return;
-            this.drag = null;
-            window.removeEventListener('pointermove', this.onPointerMove);
-            window.removeEventListener('pointerup', this.onPointerUp);
-            window.removeEventListener('pointercancel', this.onPointerUp);
-            window.removeEventListener('lostpointercapture', this.onPointerUp);
-        };
-        this.onHandleKeyDown = (e) => {
-            if (!this.resizable || this.collapsed)
-                return;
-            // The physical "positive direction" key is always Right/Down; growSign
-            // already encodes whether that direction grows or shrinks the panel for
-            // the current edge + RTL-ness, exactly mirroring how onPointerMove folds
-            // it into the drag delta above.
-            const forwardKey = this.axis === 'inline' ? 'ArrowRight' : 'ArrowDown';
-            const backwardKey = this.axis === 'inline' ? 'ArrowLeft' : 'ArrowUp';
-            if (e.key === forwardKey) {
-                e.preventDefault();
-                this.applySize(this.currentSizePx() + this.growSign * KEYBOARD_STEP_PX);
-            }
-            else if (e.key === backwardKey) {
-                e.preventDefault();
-                this.applySize(this.currentSizePx() - this.growSign * KEYBOARD_STEP_PX);
-            }
-        };
-        this.toggleCollapsed = () => {
-            this.collapsed = !this.collapsed;
-            this.emit('lyra-collapse-change', { collapsed: this.collapsed });
-        };
-    }
-    static { this.styles = [LyraElement.styles, styles]; }
-    connectedCallback() {
-        super.connectedCallback();
-        this.applyHostSize();
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.drag = null;
-        window.removeEventListener('pointermove', this.onPointerMove);
-        window.removeEventListener('pointerup', this.onPointerUp);
-        window.removeEventListener('pointercancel', this.onPointerUp);
-        window.removeEventListener('lostpointercapture', this.onPointerUp);
-    }
-    // Applied in willUpdate (before render), not updated (after render): the
-    // handle's aria-valuenow is computed during render from the host's own
-    // live getBoundingClientRect(), so the new inline-size/block-size has to
-    // already be on the host *before* render runs, or aria-valuenow would
-    // read back the size from one update cycle ago.
-    willUpdate(changed) {
-        if (changed.has('size') || changed.has('collapsed') || changed.has('edge')) {
-            this.applyHostSize();
-        }
-    }
-    /** `'inline'` for the `start`/`end` edges (resizing changes `inline-size`), `'block'` for
-     *  `top`/`bottom` (resizing changes `block-size`). */
-    get axis() {
-        return this.edge === 'start' || this.edge === 'end' ? 'inline' : 'block';
-    }
-    /** +1 or -1: which physical pointer-movement/keyboard direction *grows* the panel, folding in
-     *  both which edge is pinned (the opposite edge is what's dragged) and, for the inline axis
-     *  only, the current RTL-ness -- mirrors lyra-split's own horizontal+RTL delta inversion, just
-     *  generalized to four possible pinned edges instead of split's always-LTR-authored pair order. */
-    get growSign() {
-        if (this.edge === 'top')
-            return 1;
-        if (this.edge === 'bottom')
-            return -1;
-        const rtl = isRtl(this);
-        if (this.edge === 'start')
-            return rtl ? -1 : 1;
-        return rtl ? 1 : -1; // edge === 'end'
-    }
-    applyHostSize() {
-        const value = this.collapsed ? 'var(--lyra-dock-panel-collapsed-size)' : this.size;
-        if (this.axis === 'inline') {
-            this.style.inlineSize = value;
-            this.style.blockSize = '';
-        }
-        else {
-            this.style.blockSize = value;
-            this.style.inlineSize = '';
-        }
-    }
-    /** Live pixel size of the containing block along the resize axis, used both to resolve a `%`
-     *  `min-size`/`max-size` and as the `max-size` fallback when unset. Falls back to the viewport
-     *  when there's no parent element (e.g. not yet connected). */
-    containerPx() {
-        const parent = this.parentElement;
-        const rect = parent?.getBoundingClientRect();
-        if (this.axis === 'inline')
-            return rect?.width ?? window.innerWidth;
-        return rect?.height ?? window.innerHeight;
-    }
-    resolveBoundsPx() {
-        const containerPx = this.containerPx();
-        const minPx = Math.max(0, parseLengthPx(this.minSize, containerPx, this) ?? 0);
-        const maxPx = Math.max(minPx, parseLengthPx(this.maxSize, containerPx, this) ?? containerPx);
-        return { minPx, maxPx };
-    }
-    /** The panel's own current rendered size (px) along the resize axis, read straight off the
-     *  live box -- this is what lets `size` be expressed in any CSS unit and still drag/step
-     *  correctly from wherever it actually rendered, with no separate unit-conversion path for the
-     *  "current" value (only `min-size`/`max-size`, which are never themselves rendered, need
-     *  `parseLengthPx`). */
-    currentSizePx() {
-        const rect = this.getBoundingClientRect();
-        return this.axis === 'inline' ? rect.width : rect.height;
-    }
-    applySize(px) {
-        const { minPx, maxPx } = this.resolveBoundsPx();
-        const clamped = Math.min(Math.max(px, minPx), maxPx);
-        this.size = `${Math.round(clamped)}px`;
-        // Apply the new host size synchronously instead of waiting for Lit's
-        // (microtask-batched) update cycle to reach willUpdate: currentSizePx()
-        // measures the *live* box, so back-to-back steps (rapid keyboard repeat,
-        // or another pointermove before a paint) must each see the size the
-        // previous step just committed, not a stale pre-update box.
-        this.applyHostSize();
-        this.emit('lyra-resize', { size: this.size });
-    }
-    /** Rotation (deg) for the collapse-toggle's chevron: it points toward the
-     *  panel's pinned edge when expanded (that's the direction clicking it
-     *  will shrink toward) and away from it when collapsed (the direction
-     *  clicking it will grow toward) -- mirrors lyra-widget's collapse-button
-     *  rotate-the-wrapping-part technique, generalized across four possible
-     *  pinned edges and, for `start`/`end`, RTL. */
-    get toggleChevronDeg() {
-        if (this.edge === 'top')
-            return this.collapsed ? 90 : -90;
-        if (this.edge === 'bottom')
-            return this.collapsed ? -90 : 90;
-        const pinnedPhysicalEnd = this.edge === 'end' ? !isRtl(this) : isRtl(this);
-        return this.collapsed === pinnedPhysicalEnd ? 0 : 180;
-    }
-    handleTemplate() {
-        if (!this.resizable || this.collapsed)
-            return nothing;
-        const { minPx, maxPx } = this.resolveBoundsPx();
-        return html `<div
-      part="handle"
-      role="separator"
-      aria-label="Resize panel"
-      aria-orientation=${this.axis === 'inline' ? 'vertical' : 'horizontal'}
-      aria-valuenow=${Math.round(this.currentSizePx())}
-      aria-valuemin=${Math.round(minPx)}
-      aria-valuemax=${Math.round(maxPx)}
-      tabindex="0"
-      @pointerdown=${this.onPointerDown}
-      @keydown=${this.onHandleKeyDown}
-    ></div>`;
-    }
-    collapseToggleTemplate() {
-        if (!this.collapsible)
-            return nothing;
-        return html `<button
-      part="collapse-toggle"
-      type="button"
-      aria-expanded=${this.collapsed ? 'false' : 'true'}
-      aria-controls=${this.contentId}
-      aria-label=${this.collapsed ? 'Expand panel' : 'Collapse panel'}
-      @click=${this.toggleCollapsed}
-    >
-      <span style=${`display:inline-flex;transform:rotate(${this.toggleChevronDeg}deg)`}
-        >${chevronIcon()}</span
-      >
-    </button>`;
-    }
-    render() {
-        return html `
-      <div part="base">
-        <div part="content" id=${this.contentId} ?hidden=${this.collapsed}>
-          <slot></slot>
-        </div>
-        ${this.handleTemplate()} ${this.collapseToggleTemplate()}
-      </div>
-    `;
-    }
-}
-__decorate([
-    property({ reflect: true })
-], LyraDockPanel.prototype, "edge", void 0);
-__decorate([
-    property()
-], LyraDockPanel.prototype, "size", void 0);
-__decorate([
-    property({ attribute: 'min-size' })
-], LyraDockPanel.prototype, "minSize", void 0);
-__decorate([
-    property({ attribute: 'max-size' })
-], LyraDockPanel.prototype, "maxSize", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraDockPanel.prototype, "collapsible", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraDockPanel.prototype, "collapsed", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraDockPanel.prototype, "resizable", void 0);
 defineElement('dock-panel', LyraDockPanel);
+//# sourceMappingURL=dock-panel.js.map

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

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

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

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

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

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

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

@@ -19,11 +19,25 @@ export const styles = css `
   :host([edge='start']),
   :host([edge='end']) {
     block-size: 100%;
-    min-inline-size: var(--lyra-dock-panel-collapsed-size);
   }
   :host([edge='top']),
   :host([edge='bottom']) {
     inline-size: 100%;
+  }
+  /* The collapsed-rail floor only applies once actually collapsed -- scoped
+     here rather than to the bare [edge] selectors above, so it can never
+     override a smaller explicit min-size (resolved in JS by
+     resolveBoundsPx()) while expanded. An unconditional floor here would
+     silently win over a min-size below the rail token's width, since a CSS
+     min-inline-size/min-block-size always wins over an inline size style
+     regardless of what value applySize() computed and announced via
+     aria-valuenow. */
+  :host([edge='start'][collapsed]),
+  :host([edge='end'][collapsed]) {
+    min-inline-size: var(--lyra-dock-panel-collapsed-size);
+  }
+  :host([edge='top'][collapsed]),
+  :host([edge='bottom'][collapsed]) {
     min-block-size: var(--lyra-dock-panel-collapsed-size);
   }
 
@@ -32,7 +46,7 @@ export const styles = css `
     inline-size: 100%;
     block-size: 100%;
     background: var(--lyra-color-surface);
-    border: 1px solid var(--lyra-color-border);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     overflow: hidden;
   }
 
@@ -67,31 +81,31 @@ export const styles = css `
   [part='handle']::before {
     content: '';
     position: absolute;
-    inset: -6px;
+    inset: var(--lyra-size-neg-6px);
   }
 
   :host([edge='start']) [part='handle'] {
     inset-block: 0;
     inset-inline-end: 0;
-    inline-size: 3px;
+    inline-size: var(--lyra-size-3px);
     cursor: col-resize;
   }
   :host([edge='end']) [part='handle'] {
     inset-block: 0;
     inset-inline-start: 0;
-    inline-size: 3px;
+    inline-size: var(--lyra-size-3px);
     cursor: col-resize;
   }
   :host([edge='top']) [part='handle'] {
     inset-inline: 0;
     inset-block-end: 0;
-    block-size: 3px;
+    block-size: var(--lyra-size-3px);
     cursor: row-resize;
   }
   :host([edge='bottom']) [part='handle'] {
     inset-inline: 0;
     inset-block-start: 0;
-    block-size: 3px;
+    block-size: var(--lyra-size-3px);
     cursor: row-resize;
   }
 
@@ -100,18 +114,18 @@ export const styles = css `
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    inline-size: 1.5rem;
-    block-size: 1.5rem;
+    inline-size: var(--lyra-size-1-5rem);
+    block-size: var(--lyra-size-1-5rem);
     padding: 0;
-    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);
     color: var(--lyra-color-text);
     cursor: pointer;
-    font-size: 0.75rem;
-    line-height: 1;
+    font-size: var(--lyra-font-size-xs);
+    line-height: var(--lyra-line-height-none);
     transition: background var(--lyra-transition-fast), color var(--lyra-transition-fast);
-    z-index: 1;
+    z-index: var(--lyra-layer-content);
   }
   [part='collapse-toggle']:hover {
     background: var(--lyra-color-brand-quiet);
@@ -142,4 +156,11 @@ export const styles = css `
     inset-inline-start: 50%;
     transform: translateX(-50%);
   }
+  @media (prefers-reduced-motion: reduce) {
+    [part='collapse-toggle'],
+    [part='handle'] {
+      transition: none !important;
+    }
+  }
 `;
+//# sourceMappingURL=dock-panel.styles.js.map

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

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

package/dist/components/document-preview/document-preview.class.d.ts

@@ -0,0 +1,153 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export type DocumentPreviewStatus = 'idle' | 'converting' | 'ready' | 'error';
+/**
+ * `<lyra-document-preview>` — a format-dispatching viewer for one document/
+ * attachment, plus the visual state machine for an async server-side
+ * conversion a host app runs in front of it.
+ *
+ * Format dispatch is intentionally minimal (see this family's scope
+ * guidance): only `text/*`/`application/json` (plain, scrollable `<pre>` —
+ * no syntax highlighting; compose `<lyra-code-block>` yourself via the
+ * `unsupported` slot for that) and `image/*` (a contained `<img>`) render
+ * inline. Everything else — PDF, office documents, video, audio, or any
+ * unrecognized MIME type — falls back to a generic "can't preview this"
+ * state: a file glyph, a short message, and (when `src` is set) a native
+ * `<a download>` link. This is a deliberate ceiling, not a gap: this
+ * component ships a dispatch *shell*, not a format registry. The
+ * `unsupported` slot is the escape hatch for every format left out of the
+ * built-in three — plug in a PDF.js viewer, an office-doc renderer, a
+ * `<lyra-code-block>`, or anything else keyed off `mime-type` yourself.
+ *
+ * `status="converting"` is a second, independent axis from format dispatch.
+ * This component does not know your backend's conversion API shape and
+ * therefore owns none of the actual polling/fetch — a host that's converting
+ * a non-natively-previewable format server-side (e.g. .docx → .pdf) polls
+ * its own backend and updates `status`/`progress`/`src` here as that
+ * proceeds. This component only *visualizes* that state: an indeterminate
+ * spinner, or a determinate one once `progress` is supplied. Once the host
+ * flips `status` to `"ready"` (typically alongside a new `src`/`mime-type`
+ * pointing at the converted artifact), normal format dispatch resumes.
+ *
+ * The one piece of async work this component *does* own is fetching a
+ * `text/*`/`application/json` `src` itself (there's no other way to get a
+ * `<pre>`'s text content from a URL) — gated behind the same generation-
+ * counter guard `<lyra-tool-result-view>`'s `resolve()` uses, so a `src`
+ * reassigned mid-fetch can't have a stale response clobber a newer one. A
+ * failure here (network error, non-2xx response) renders inline via
+ * `[part="error"]` and fires `lyra-render-error`, independently of the
+ * host-owned `status` prop — mirrors `<lyra-markdown>`'s identical stance
+ * that a *rendering* failure and a host's own state machine are different
+ * concerns.
+ *
+ * Every `src` is validated for the DOM/API sink that consumes it. Text
+ * fetches and image sources allow relative URLs plus `http:`, `https:`,
+ * `blob:`, and `data:`. Download links deliberately exclude `data:` because
+ * following a `data:text/html` URL can create an active document. Unsafe or
+ * malformed URLs never reach `fetch()`, an image `src`, or an anchor `href`;
+ * they render a non-interactive fallback/error instead.
+ *
+ * Accessibility: the `"converting"` state (no numeric `progress`) is a
+ * `role="status"` region wrapping a visually-hidden "Converting document…"
+ * string. This is a *plain* static region, not routed through
+ * `<lyra-live-region>`/`Announcer` — like `<lyra-typing-indicator>`'s
+ * identical judgement call (see that component's class doc), this only ever
+ * has one thing to announce (entering the state), not a rapidly-repeating
+ * stream of updates, so the coalescing machinery a high-frequency component
+ * needs would be pure overhead here. Once real `progress` is available, the
+ * region becomes a standard `role="progressbar"` instead, which is
+ * self-describing via `aria-valuenow` with no extra live-region wiring
+ * needed. `status="error"` renders `[part="error"]` as `role="alert"` — an
+ * assertive, one-shot failure notice, the same native-role shortcut
+ * `<lyra-live-region>`'s own `mode="assertive"` maps to, without requiring
+ * the announcer machinery here either.
+ *
+ * @customElement lyra-document-preview
+ * @slot unsupported - Escape hatch: when populated, its content renders
+ *   *instead of* the generic download fallback for any `mime-type` this
+ *   component doesn't natively support (i.e. whenever format dispatch would
+ *   otherwise fall through to "generic"). Ignored while `mime-type` resolves
+ *   to `text`/`image` dispatch, or while `status` is `"converting"`/`"error"`.
+ * @event lyra-download - `detail: { src, filename }` — fired when the safe
+ *   generic-download fallback link is activated. The browser download itself
+ *   needs no JS (a plain `<a download>` handles it); this is purely for a host
+ *   that wants to observe/log the download.
+ * @event lyra-render-error - `detail: { error }` — fired when this
+ *   component's own `text/*`/`application/json` `fetch(src)` fails. Distinct
+ *   from `status="error"`, which is entirely host-driven (see the class
+ *   doc).
+ * @csspart base - The root container.
+ * @csspart header - The row above the body, holding `filename`. Hidden entirely when `filename` is unset.
+ * @csspart filename - The filename text.
+ * @csspart body - The wrapper around whichever content is currently showing (text/image preview, the generic fallback, the spinner, or the error message).
+ * @csspart spinner - The converting/loading indicator — indeterminate (`role="status"`) or, once numeric progress is known, a determinate `role="progressbar"`. Used both for `status="converting"` and for this component's own in-flight text fetch.
+ * @csspart error - The error message region (`role="alert"`) — used both for `status="error"` and for a failed text fetch.
+ * @csspart download-link - The `<a download>` affordance in the generic fallback. Only rendered when `src` is set and safe for link navigation.
+ */
+export interface LyraDocumentPreviewEventMap {
+    'lyra-render-error': CustomEvent<{
+        error: unknown;
+    }>;
+    'lyra-download': CustomEvent<{
+        src: string;
+        filename: string;
+    }>;
+}
+export declare class LyraDocumentPreview extends LyraElement<LyraDocumentPreviewEventMap> {
+    static styles: import("lit").CSSResultGroup[];
+    /** URL to fetch (for `text`/`application/json`) or display (`image`, or as
+     *  the generic fallback's download `href`). The value is validated against
+     *  a sink-specific scheme allowlist before use. Optional — gracefully
+     *  absent while, e.g., a conversion is still in progress. */
+    src: string;
+    /** Drives format dispatch — see the class doc. */
+    mimeType: string;
+    /** Shown in the header and used as the download link's suggested filename. */
+    filename: string;
+    /** Host-owned lifecycle state. `"converting"` shows the spinner regardless
+     *  of `mime-type`/`src`; `"error"` shows `errorMessage` regardless of
+     *  either. `"idle"`/`"ready"` both resume normal format dispatch — this
+     *  component doesn't require a host that has no conversion step to ever
+     *  set `"ready"` explicitly. */
+    status: DocumentPreviewStatus;
+    /** 0-100. Only consulted while `status="converting"`. Unset (the default)
+     *  renders the indeterminate spinner instead of a determinate progress bar. */
+    progress?: number;
+    /** Shown (via `[part="error"]`) while `status="error"`. */
+    errorMessage: string;
+    /** A CSS length (e.g. `"24rem"`); once set, `[part="body"]` scrolls
+     *  internally past this height instead of growing the page — same
+     *  contract as `<lyra-json-viewer>`'s identically-named prop. */
+    maxHeight: string;
+    private hasUnsupportedSlot;
+    private textFetch;
+    private fetchGeneration;
+    protected willUpdate(changed: PropertyValues): void;
+    private fetchText;
+    private onUnsupportedSlotChange;
+    private onDownloadClick;
+    /** Renders `[part="spinner"]` -- indeterminate (`role="status"` + a
+     *  visually-hidden label, per the class doc's accessibility note) when
+     *  `progressValue` is absent, or a `role="progressbar"` once it's a finite
+     *  0-100 number. Shared by the host-driven `"converting"` state and this
+     *  component's own in-flight text fetch (which never has a numeric
+     *  progress of its own to report). */
+    private renderSpinner;
+    private renderError;
+    private renderTextPreview;
+    private renderImagePreview;
+    private renderDownloadFallback;
+    /** The `<slot>` element renders unconditionally (not just while
+     *  `hasUnsupportedSlot`) so a slot-assignment change is always observable
+     *  via `slotchange` -- same reasoning as `<lyra-chat-message>`'s
+     *  always-rendered optional slots. */
+    private renderGenericFallback;
+    private renderBody;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-document-preview': LyraDocumentPreview;
+    }
+}
+//# sourceMappingURL=document-preview.class.d.ts.map

package/dist/components/document-preview/document-preview.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"document-preview.class.d.ts","sourceRoot":"","sources":["../../../src/components/document-preview/document-preview.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAA0B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3G,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAK7D,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,YAAY,GAAG,OAAO,GAAG,OAAO,CAAC;AAoF9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkFG;AACH,MAAM,WAAW,2BAA2B;IAC1C,mBAAmB,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IACrD,eAAe,EAAE,WAAW,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACjE;AACD,qBAAa,mBAAoB,SAAQ,WAAW,CAAC,2BAA2B,CAAC;IAC/E,MAAM,CAAC,MAAM,iCAAwC;IAErD;;;iEAG6D;IACjD,GAAG,SAAM;IAErB,kDAAkD;IACZ,QAAQ,SAAM;IAEpD,8EAA8E;IAClE,QAAQ,SAAM;IAE1B;;;;oCAIgC;IACH,MAAM,EAAE,qBAAqB,CAAU;IAEpE;mFAC+E;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE9C,2DAA2D;IACjB,YAAY,SAAM;IAE5D;;qEAEiE;IAC1B,SAAS,SAAM;IAE7C,OAAO,CAAC,kBAAkB,CAAS;IACnC,OAAO,CAAC,SAAS,CAAmC;IAM7D,OAAO,CAAC,eAAe,CAAK;IAE5B,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CA+BlD;YAEa,SAAS;IAiBvB,OAAO,CAAC,uBAAuB,CAE7B;IAEF,OAAO,CAAC,eAAe,CAErB;IAEF;;;;;0CAKsC;IACtC,OAAO,CAAC,aAAa;IA2BrB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,iBAAiB;IAezB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,sBAAsB;IAuB9B;;;0CAGsC;IACtC,OAAO,CAAC,qBAAqB;IAO7B,OAAO,CAAC,UAAU;IAclB,MAAM,IAAI,cAAc,CASvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,mBAAmB,CAAC;KAC9C;CACF"}