@aceshooting/lyra-ui 1.2.0 → 2.1.0

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

@@ -0,0 +1,359 @@
+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';
+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();
+        this.armContainerResizeObserver();
+    }
+    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);
+        this.containerResizeObserver?.disconnect();
+    }
+    /** Creates (idempotently) and (re-)observes the containing element with a
+     *  `ResizeObserver` that just requests a re-render on every callback --
+     *  `containerPx()`/`currentSizePx()` already read the live DOM on every
+     *  render, so there's no separate cached value to update here, only the
+     *  render that was otherwise never being triggered. A no-op when not yet
+     *  connected (no `parentElement`). */
+    armContainerResizeObserver() {
+        if (!this.parentElement)
+            return;
+        this.containerResizeObserver ??= new ResizeObserver(() => this.requestUpdate());
+        this.containerResizeObserver.observe(this.parentElement);
+    }
+    // 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);

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,159 @@
+import { css } from 'lit';
+export const styles = css `
+  /* No :host position/inset is imposed here -- unlike an overlay component,
+     lyra-dock-panel deliberately stays layout-agnostic (see the class doc):
+     drop it as an absolutely-positioned child of a position:relative parent,
+     or as a flex item alongside your existing content, and it only manages
+     its own size along the resize axis plus filling the cross axis. */
+  :host {
+    display: block;
+    box-sizing: border-box;
+    /* Themeable persistent-rail width/height while collapsed -- overridable
+       from outside since it's a plain custom property, not a JS prop (see
+       the class doc for why collapse hides content rather than zeroing the
+       box). Reuses the shared icon-button tap-target token so the collapse
+       toggle sitting on the rail stays comfortably tappable by default. */
+    --lyra-dock-panel-collapsed-size: var(--lyra-icon-button-size);
+    position: relative;
+  }
+  :host([edge='start']),
+  :host([edge='end']) {
+    block-size: 100%;
+  }
+  :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);
+  }
+
+  [part='base'] {
+    position: relative;
+    inline-size: 100%;
+    block-size: 100%;
+    background: var(--lyra-color-surface);
+    border: 1px solid var(--lyra-color-border);
+    overflow: hidden;
+  }
+
+  [part='content'] {
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: auto;
+  }
+  [part='content'][hidden] {
+    display: none;
+  }
+
+  /* The draggable edge -- always the panel's *inner* boundary (opposite the
+     docked/pinned edge), positioned with logical insets so it mirrors
+     automatically under RTL for the start/end edges. */
+  [part='handle'] {
+    position: absolute;
+    background: var(--lyra-color-border);
+    touch-action: none;
+  }
+  [part='handle']:hover,
+  [part='handle']:focus-visible {
+    background: var(--lyra-color-brand);
+  }
+  [part='handle']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: calc(-1 * var(--lyra-focus-ring-width));
+  }
+  /* Transparent hit-slop, widening the draggable/tappable box along the
+     resize axis only, without changing the handle's visible 3px thickness --
+     same technique as lyra-split's divider. */
+  [part='handle']::before {
+    content: '';
+    position: absolute;
+    inset: -6px;
+  }
+
+  :host([edge='start']) [part='handle'] {
+    inset-block: 0;
+    inset-inline-end: 0;
+    inline-size: 3px;
+    cursor: col-resize;
+  }
+  :host([edge='end']) [part='handle'] {
+    inset-block: 0;
+    inset-inline-start: 0;
+    inline-size: 3px;
+    cursor: col-resize;
+  }
+  :host([edge='top']) [part='handle'] {
+    inset-inline: 0;
+    inset-block-end: 0;
+    block-size: 3px;
+    cursor: row-resize;
+  }
+  :host([edge='bottom']) [part='handle'] {
+    inset-inline: 0;
+    inset-block-start: 0;
+    block-size: 3px;
+    cursor: row-resize;
+  }
+
+  [part='collapse-toggle'] {
+    position: absolute;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+    padding: 0;
+    border: 1px 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;
+    transition: background var(--lyra-transition-fast), color var(--lyra-transition-fast);
+    z-index: 1;
+  }
+  [part='collapse-toggle']:hover {
+    background: var(--lyra-color-brand-quiet);
+    color: var(--lyra-color-brand);
+  }
+  [part='collapse-toggle']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+
+  :host([edge='start']) [part='collapse-toggle'] {
+    inset-inline-end: var(--lyra-space-xs);
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+  }
+  :host([edge='end']) [part='collapse-toggle'] {
+    inset-inline-start: var(--lyra-space-xs);
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+  }
+  :host([edge='top']) [part='collapse-toggle'] {
+    inset-block-end: var(--lyra-space-xs);
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+  }
+  :host([edge='bottom']) [part='collapse-toggle'] {
+    inset-block-start: var(--lyra-space-xs);
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+  }
+`;

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

@@ -0,0 +1,143 @@
+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 declare class LyraDocumentPreview extends LyraElement {
+    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;
+    }
+}