@aceshooting/lyra-ui 2.0.0 → 2.2.0

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

@@ -0,0 +1,272 @@
+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, svg } from 'lit';
+import { property } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { expandIcon } from '../../internal/icons.js';
+import { safeLinkHref as validateLinkHref, safeMediaSrc as validateMediaSrc, } from '../../internal/safe-url.js';
+import { styles } from './media-card.styles.js';
+/** Validates `url` for an `<img>`/`<video>` source. Kept as a public wrapper
+ * so existing imports and generated API metadata remain stable. */
+export function safeMediaSrc(url) {
+    return validateMediaSrc(url);
+}
+/** Validates `url` for the library's download/open link sinks. Kept as a
+ * public wrapper so existing imports and generated API metadata remain stable. */
+export function safeLinkHref(url) {
+    return validateLinkHref(url);
+}
+function detectKind(mimeType) {
+    const mt = mimeType.trim().toLowerCase();
+    if (mt.startsWith('image/'))
+        return 'image';
+    if (mt.startsWith('video/'))
+        return 'video';
+    return 'file';
+}
+// Mirrors the shared icon set's viewBox/stroke conventions
+// (internal/icons.ts's chevronIcon()/closeIcon()/etc.), and is visually
+// identical to `<lyra-attachment-chip>`'s and `<lyra-document-preview>`'s
+// own local `fileGlyph()` -- duplicated rather than imported (these are
+// three independently consumable components, and icons.ts is off limits
+// here) but kept pixel-identical so a "generic file" affordance reads the
+// same wherever it shows up in the library.
+const ICON_VIEW_BOX = '0 0 24 24';
+const ICON_STROKE_WIDTH = '1.75';
+function fileGlyph() {
+    return svg `
+    <svg
+      width="1em"
+      height="1em"
+      viewBox=${ICON_VIEW_BOX}
+      fill="none"
+      stroke="currentColor"
+      stroke-width=${ICON_STROKE_WIDTH}
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    ><path d="M6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
+  `;
+}
+/**
+ * `<lyra-media-card>` — a lightweight inline preview for one already-sent,
+ * already-available attachment inside a rendered chat message body (e.g.
+ * plugged into `<lyra-chat-message>`'s `attachments` slot, or embedded
+ * directly by a markdown/message renderer). Distinct from two other,
+ * similarly-named components in this family: `<lyra-document-preview>` is a
+ * fuller viewer with header chrome and an async server-side-conversion
+ * state machine (`status="converting"`), and `<lyra-attachment-chip>` is a
+ * pre-send queued-file chip with upload progress. This component has
+ * neither concern — it only ever shows a `src` that's already final.
+ *
+ * **Format dispatch.** `kind` selects `'image'` (a plain `<img>`), `'video'`
+ * (a plain `<video controls>`), or `'file'` (an icon + filename chip with a
+ * download/open affordance). Leave `kind` unset to auto-detect from
+ * `mime-type` (`image/*` / `video/*` / anything else -> `'file'`);
+ * explicitly setting `kind` always wins over detection.
+ *
+ * **Safe-URL checking.** `src` is validated before it's ever assigned to an
+ * `<img>`/`<video>` `src` or an `<a href>` — only `http:`/`https:`/`blob:`
+ * (plus `data:` for a *media* `src` only) or a scheme-relative/relative URL
+ * with no scheme at all pass; anything else (`javascript:`, `vbscript:`,
+ * and similarly suspicious schemes) is rejected. `safeMediaSrc()` and
+ * `safeLinkHref()` share a platform-URL-based validator; their sink-specific
+ * allowlists explain why `data:` gets two different answers depending on
+ * where it is used. An `image`/`video` `kind` whose `src` fails the
+ * media-src check falls back to the generic file-chip rendering — this is
+ * the "plain preview unavailable state" a dangerous URL degrades to, rather
+ * than ever reaching a real media/anchor sink. That fallback also re-checks
+ * `src` against the stricter href allowlist for its own download affordance,
+ * but since the href allowlist is a strict subset of the media-src allowlist,
+ * that re-check can only ever change the outcome for a direct/auto-detected
+ * `kind="file"` `src` — an `image`/`video` `src` that already failed the
+ * wider media-src check necessarily fails the narrower href check too, so
+ * the fallback for those two kinds is always the plain, unclickable `span`.
+ *
+ * **The `video` case renders its open affordance separately from `base`.**
+ * `image`/`file` wrap their *entire* card in one native `<button>`/`<a>` —
+ * safe because an `<img>` and a plain icon+text chip have no interactive
+ * content of their own to conflict with. A `<video controls>` element is
+ * itself interactive content (its own play/seek/volume controls), and HTML
+ * forbids nesting interactive content inside a `<button>`/`<a>` — doing so
+ * anyway would also make every click on the video's own controls bubble up
+ * and spuriously fire `lyra-open`. So for `kind="video"`, `base` is a plain,
+ * non-interactive wrapper around `[part="media"]`, and a small separate
+ * `[part="open-button"]` (not one of this component's originally-scoped
+ * parts, added as the "explicit view/open affordance" the class is free to
+ * provide) is the thing that actually fires `lyra-open`.
+ *
+ * **Navigation.** This component never navigates on its own for `image`/
+ * `video` — activating the card only fires `lyra-open`; a host decides what
+ * "open" means (a lightbox, a new tab, whatever). The `file`-chip case is
+ * the one exception: when `src` passes the (stricter) href safety check, the
+ * chip is a real `<a href download>` so a bare drop-in still does something
+ * useful — but `lyra-open` fires first and is `cancelable`; a host that
+ * calls `preventDefault()` on it suppresses that default download/open so it
+ * can substitute its own handling instead.
+ *
+ * @customElement lyra-media-card
+ * @event lyra-open - The card (or, for `kind="video"`, its `open-button`)
+ * was activated. `detail: { src, filename }`. Cancelable — see the class
+ * doc's "Navigation" section for what calling `preventDefault()` on it does
+ * in the `file`-chip case.
+ * @csspart base - The root interactive/container element. A `<button>` for
+ * `kind="image"`, a plain wrapper `<div>` for `kind="video"`, and either an
+ * `<a>` (when `src` passes the href safety check) or a plain `<span>`
+ * (otherwise) for the `file`-chip fallback.
+ * @csspart media - The `<img>` or `<video>` element.
+ * @csspart file-icon - The generic file glyph, shown only in the file-chip fallback.
+ * @csspart filename - The filename text, shown only in the file-chip fallback.
+ * @csspart open-button - The explicit "open" affordance rendered next to
+ * `[part="media"]` for `kind="video"` only — see the class doc.
+ */
+export class LyraMediaCard extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** The media URL. Always re-validated against a safe-scheme allowlist
+         *  before use — see the class doc. */
+        this.src = '';
+        /** Drives auto-detection when `kind` is unset. */
+        this.mimeType = '';
+        /** Shown in the file-chip fallback, used as the download link's suggested
+         *  filename, and folded into the accessible name of the whole card. */
+        this.filename = '';
+        /** Alt text for the image case (and reused as a video label fallback).
+         *  Falls back to `filename`, then a generic per-kind description. */
+        this.alt = '';
+        /** A CSS length (e.g. `"16rem"`); once set, overrides the
+         *  `--lyra-media-card-max-height` custom property for this instance only —
+         *  same contract as `<lyra-document-preview>`'s identically-named prop. */
+        this.maxHeight = '';
+        this.onActivate = () => {
+            this.emitOpen();
+        };
+        // The file-chip's `<a>` provides a real default action (download/open the
+        // resource) so a bare drop-in works with no host wiring, but `lyra-open`
+        // fires first and is cancelable -- a host that preventDefault()s it is
+        // suppressing exactly that default, so the native click also needs
+        // stopping or the download/navigation would proceed anyway.
+        this.onLinkClick = (e) => {
+            if (this.emitOpen().defaultPrevented)
+                e.preventDefault();
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    /** Effective kind used for rendering — `kind` if explicitly set,
+     *  otherwise detected from `mime-type`. */
+    get resolvedKind() {
+        return this.kind ?? detectKind(this.mimeType);
+    }
+    get displayFilename() {
+        return this.filename || 'Untitled file';
+    }
+    /** Accessible name for the card's own actionable element (`base` or, for
+     *  video, `open-button`) — always phrased as the action it performs. */
+    get accessibleLabel() {
+        const name = this.filename || this.alt;
+        return name ? `Open ${name}` : `Open ${this.resolvedKind} attachment`;
+    }
+    get imgAlt() {
+        return this.alt || this.filename || 'Image attachment';
+    }
+    get videoLabel() {
+        return this.alt || this.filename || 'Video attachment';
+    }
+    /** Per-instance override for `--lyra-media-card-max-height`, applied
+     *  inline on `[part="base"]` -- the only mechanism that reliably wins
+     *  over the `:host{}`-declared default from outside the shadow root. */
+    get baseStyle() {
+        return this.maxHeight ? `--lyra-media-card-max-height:${this.maxHeight}` : nothing;
+    }
+    emitOpen() {
+        // Matches whichever safe-URL sink actually rendered (see the class doc):
+        // falls back to a trimmed raw src so a whitespace-padded, otherwise-unsafe
+        // src still reports the same value the DOM would show if it were safe.
+        const src = safeMediaSrc(this.src) ?? safeLinkHref(this.src) ?? this.src.trim();
+        return this.emit('lyra-open', { src, filename: this.filename }, { cancelable: true });
+    }
+    renderImage(src) {
+        return html `
+      <button part="base" type="button" style=${this.baseStyle} aria-label=${this.accessibleLabel} @click=${this.onActivate}>
+        <img part="media" src=${src} alt=${this.imgAlt} />
+      </button>
+    `;
+    }
+    renderVideo(src) {
+        return html `
+      <div part="base" style=${this.baseStyle}>
+        <video part="media" controls src=${src} aria-label=${this.videoLabel}></video>
+        <button part="open-button" type="button" aria-label=${this.accessibleLabel} @click=${this.onActivate}>
+          ${expandIcon()}
+        </button>
+      </div>
+    `;
+    }
+    renderFileFallback() {
+        const href = safeLinkHref(this.src);
+        const name = this.displayFilename;
+        const content = html `
+      <span part="file-icon" aria-hidden="true">${fileGlyph()}</span>
+      <span part="filename" title=${name}>${name}</span>
+    `;
+        if (href) {
+            return html `
+        <a
+          part="base"
+          href=${href}
+          style=${this.baseStyle}
+          download=${this.filename || ''}
+          aria-label=${this.accessibleLabel}
+          @click=${this.onLinkClick}
+        >
+          ${content}
+        </a>
+      `;
+        }
+        // No safe link target -- the "plain preview unavailable state" the class
+        // doc describes: the filename/icon still display, but nothing is
+        // clickable (there's nothing safe to point a download/open affordance
+        // at, and no built-in lightbox to fall back to for this kind).
+        return html `<span part="base" style=${this.baseStyle}>${content}</span>`;
+    }
+    render() {
+        const kind = this.resolvedKind;
+        if (kind === 'image') {
+            const src = safeMediaSrc(this.src);
+            if (src)
+                return this.renderImage(src);
+            return this.renderFileFallback();
+        }
+        if (kind === 'video') {
+            const src = safeMediaSrc(this.src);
+            if (src)
+                return this.renderVideo(src);
+            return this.renderFileFallback();
+        }
+        return this.renderFileFallback();
+    }
+}
+__decorate([
+    property()
+], LyraMediaCard.prototype, "src", void 0);
+__decorate([
+    property({ reflect: true })
+], LyraMediaCard.prototype, "kind", void 0);
+__decorate([
+    property({ attribute: 'mime-type' })
+], LyraMediaCard.prototype, "mimeType", void 0);
+__decorate([
+    property()
+], LyraMediaCard.prototype, "filename", void 0);
+__decorate([
+    property()
+], LyraMediaCard.prototype, "alt", void 0);
+__decorate([
+    property({ attribute: 'max-height' })
+], LyraMediaCard.prototype, "maxHeight", void 0);
+//# sourceMappingURL=media-card.class.js.map

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

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

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

@@ -1,122 +1,2 @@
-import { type TemplateResult } from 'lit';
-import { LyraElement } from '../../internal/lyra-element.js';
-export type MediaCardKind = 'image' | 'video' | 'file';
-export interface MediaCardOpenDetail {
-    src: string;
-    filename: string;
-}
-/** Validates `url` is safe to assign as an `<img>`/`<video>` `src`. Returns
- *  the trimmed url when safe, `null` otherwise -- see the "safe-URL
- *  checking" comment above for the `data:` judgement call and why `URL` is
- *  used instead of a regex. */
-export declare function safeMediaSrc(url: string): string | null;
-/** Validates `url` is safe to assign as an `<a href>` -- stricter than
- *  `safeMediaSrc()`, see the "safe-URL checking" comment above. Returns the
- *  trimmed url when safe, `null` otherwise. */
-export declare function safeLinkHref(url: string): string | null;
-/**
- * `<lyra-media-card>` — a lightweight inline preview for one already-sent,
- * already-available attachment inside a rendered chat message body (e.g.
- * plugged into `<lyra-chat-message>`'s `attachments` slot, or embedded
- * directly by a markdown/message renderer). Distinct from two other,
- * similarly-named components in this family: `<lyra-document-preview>` is a
- * fuller viewer with header chrome and an async server-side-conversion
- * state machine (`status="converting"`), and `<lyra-attachment-chip>` is a
- * pre-send queued-file chip with upload progress. This component has
- * neither concern — it only ever shows a `src` that's already final.
- *
- * **Format dispatch.** `kind` selects `'image'` (a plain `<img>`), `'video'`
- * (a plain `<video controls>`), or `'file'` (an icon + filename chip with a
- * download/open affordance). Leave `kind` unset to auto-detect from
- * `mime-type` (`image/*` / `video/*` / anything else -> `'file'`);
- * explicitly setting `kind` always wins over detection.
- *
- * **Safe-URL checking.** `src` is validated before it's ever assigned to an
- * `<img>`/`<video>` `src` or an `<a href>` — only `http:`/`https:`/`blob:`
- * (plus `data:` for a *media* `src` only) or a scheme-relative/relative URL
- * with no scheme at all pass; anything else (`javascript:`, `vbscript:`,
- * and similarly suspicious schemes) is rejected. See `safeMediaSrc()` /
- * `safeLinkHref()` and their shared "safe-URL checking" comment for exactly
- * why `data:` gets two different answers depending on which DOM sink it's
- * headed for, and why the check is built on `new URL()` rather than a
- * hand-rolled scheme regex. An `image`/`video` `kind` whose `src` fails the
- * media-src check falls back to the generic file-chip rendering (which then
- * separately re-validates `src` against the stricter href allowlist for its
- * own download affordance) — this is the "plain preview unavailable state"
- * a dangerous URL degrades to, rather than ever reaching a real media/anchor
- * sink.
- *
- * **The `video` case renders its open affordance separately from `base`.**
- * `image`/`file` wrap their *entire* card in one native `<button>`/`<a>` —
- * safe because an `<img>` and a plain icon+text chip have no interactive
- * content of their own to conflict with. A `<video controls>` element is
- * itself interactive content (its own play/seek/volume controls), and HTML
- * forbids nesting interactive content inside a `<button>`/`<a>` — doing so
- * anyway would also make every click on the video's own controls bubble up
- * and spuriously fire `lyra-open`. So for `kind="video"`, `base` is a plain,
- * non-interactive wrapper around `[part="media"]`, and a small separate
- * `[part="open-button"]` (not one of this component's originally-scoped
- * parts, added as the "explicit view/open affordance" the class is free to
- * provide) is the thing that actually fires `lyra-open`.
- *
- * **Navigation.** This component never navigates on its own for `image`/
- * `video` — activating the card only fires `lyra-open`; a host decides what
- * "open" means (a lightbox, a new tab, whatever). The `file`-chip case is
- * the one exception: when `src` passes the (stricter) href safety check, the
- * chip is a real `<a href download>` so a bare drop-in still does something
- * useful — but `lyra-open` fires first and is `cancelable`; a host that
- * calls `preventDefault()` on it suppresses that default download/open so it
- * can substitute its own handling instead.
- *
- * @customElement lyra-media-card
- * @event lyra-open - The card (or, for `kind="video"`, its `open-button`)
- * was activated. `detail: { src, filename }`. Cancelable — see the class
- * doc's "Navigation" section for what calling `preventDefault()` on it does
- * in the `file`-chip case.
- * @csspart base - The root interactive/container element. A `<button>` for
- * `kind="image"`, a plain wrapper `<div>` for `kind="video"`, and either an
- * `<a>` (when `src` passes the href safety check) or a plain `<span>`
- * (otherwise) for the `file`-chip fallback.
- * @csspart media - The `<img>` or `<video>` element.
- * @csspart file-icon - The generic file glyph, shown only in the file-chip fallback.
- * @csspart filename - The filename text, shown only in the file-chip fallback.
- * @csspart open-button - The explicit "open" affordance rendered next to
- * `[part="media"]` for `kind="video"` only — see the class doc.
- */
-export declare class LyraMediaCard extends LyraElement {
-    static styles: import("lit").CSSResultGroup[];
-    /** The media URL. Always re-validated against a safe-scheme allowlist
-     *  before use — see the class doc. */
-    src: string;
-    /** Explicit format dispatch. Leave unset to auto-detect from `mime-type`. */
-    kind?: MediaCardKind;
-    /** Drives auto-detection when `kind` is unset. */
-    mimeType: string;
-    /** Shown in the file-chip fallback, used as the download link's suggested
-     *  filename, and folded into the accessible name of the whole card. */
-    filename: string;
-    /** Alt text for the image case (and reused as a video label fallback).
-     *  Falls back to `filename`, then a generic per-kind description. */
-    alt: string;
-    /** Effective kind used for rendering — `kind` if explicitly set,
-     *  otherwise detected from `mime-type`. */
-    private get resolvedKind();
-    private get displayFilename();
-    /** Accessible name for the card's own actionable element (`base` or, for
-     *  video, `open-button`) — always phrased as the action it performs. */
-    private get accessibleLabel();
-    private get imgAlt();
-    private get videoLabel();
-    private emitOpen;
-    private onActivate;
-    private onLinkClick;
-    private renderImage;
-    private renderVideo;
-    private renderFileFallback;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'lyra-media-card': LyraMediaCard;
-    }
-}
+export * from './media-card.class.js';
+//# sourceMappingURL=media-card.d.ts.map

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

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