@eclipse-lyra/extension-media-viewer 0.0.0

package/dist/i18n.json.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+  "namespace": "extensions",
+  "en": {
+    "EXT_MEDIAVIEWER_NAME": "Media Viewer",
+    "EXT_MEDIAVIEWER_DESC": "View PDF, image, and HTML files in the browser"
+  },
+  "de": {
+    "EXT_MEDIAVIEWER_NAME": "Medien-Viewer",
+    "EXT_MEDIAVIEWER_DESC": "PDF-, Bild- und HTML-Dateien im Browser anzeigen"
+  }
+};
+
+export default _default;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":""}

package/dist/index.js

@@ -0,0 +1,20 @@
+import { contributionRegistry, SYSTEM_LANGUAGE_BUNDLES, i18nLazy, extensionRegistry } from "@eclipse-lyra/core";
+import pkg from "../package.json";
+const namespace = "extensions";
+const en = { "EXT_MEDIAVIEWER_NAME": "Media Viewer", "EXT_MEDIAVIEWER_DESC": "View PDF, image, and HTML files in the browser" };
+const de = { "EXT_MEDIAVIEWER_NAME": "Medien-Viewer", "EXT_MEDIAVIEWER_DESC": "PDF-, Bild- und HTML-Dateien im Browser anzeigen" };
+const bundle = {
+  namespace,
+  en,
+  de
+};
+contributionRegistry.registerContribution(SYSTEM_LANGUAGE_BUNDLES, bundle);
+const t = i18nLazy("extensions");
+extensionRegistry.registerExtension({
+  id: pkg.name,
+  name: t("EXT_MEDIAVIEWER_NAME"),
+  description: t("EXT_MEDIAVIEWER_DESC"),
+  loader: () => import("./media-viewer-extension-B1XTrSmY.js"),
+  icon: "image"
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { extensionRegistry, i18nLazy, contributionRegistry, SYSTEM_LANGUAGE_BUNDLES } from '@eclipse-lyra/core';\nimport bundle from './i18n.json';\nimport pkg from '../package.json';\n\ncontributionRegistry.registerContribution(SYSTEM_LANGUAGE_BUNDLES, bundle as any);\n\nconst t = i18nLazy('extensions');\n\nextensionRegistry.registerExtension({\n  id: pkg.name,\n  name: t('EXT_MEDIAVIEWER_NAME'),\n  description: t('EXT_MEDIAVIEWER_DESC'),\n  loader: () => import(\"./media-viewer-extension\"),\n  icon: \"image\",\n  \n  \n});\n"],"names":[],"mappings":";;;;;;;;;;AAIA,qBAAqB,qBAAqB,yBAAyB,MAAa;AAEhF,MAAM,IAAI,SAAS,YAAY;AAE/B,kBAAkB,kBAAkB;AAAA,EAClC,IAAI,IAAI;AAAA,EACR,MAAM,EAAE,sBAAsB;AAAA,EAC9B,aAAa,EAAE,sBAAsB;AAAA,EACrC,QAAQ,MAAM,OAAO,sCAA0B;AAAA,EAC/C,MAAM;AAGR,CAAC;"}

package/dist/media-viewer-extension-B1XTrSmY.js

@@ -0,0 +1,275 @@
+import { property, state, customElement } from "lit/decorators.js";
+import { html, nothing, css } from "lit";
+import { LyraPart, File, editorRegistry } from "@eclipse-lyra/core";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const SUPPORTED_EXTENSIONS = [
+  ".pdf",
+  ".jpg",
+  ".jpeg",
+  ".png",
+  ".gif",
+  ".svg",
+  ".webp",
+  ".bmp",
+  ".ico"
+];
+const getFileIcon = (fileName) => {
+  const lowerName = fileName.toLowerCase();
+  if (lowerName.endsWith(".pdf")) return "file-pdf";
+  if (lowerName.match(/\.(jpg|jpeg|png|gif|webp|bmp|ico|svg)$/)) return "image";
+  return "file";
+};
+const isSupportedMediaFile = (file) => {
+  const fileName = file.getName().toLowerCase();
+  return SUPPORTED_EXTENSIONS.some((ext) => fileName.endsWith(ext));
+};
+const IMAGE_EXTENSIONS = [".jpg", ".jpeg", ".png", ".gif", ".svg", ".webp", ".bmp", ".ico"];
+const isImageFile = (file) => {
+  const name = file.getName().toLowerCase();
+  return IMAGE_EXTENSIONS.some((ext) => name.endsWith(ext));
+};
+editorRegistry.registerEditorInputHandler({
+  editorId: "system.media-viewer",
+  label: "Media viewer",
+  canHandle: (input) => input instanceof File && isSupportedMediaFile(input),
+  handle: async (input) => {
+    const editorInput = {
+      title: input.getName(),
+      data: input,
+      key: input.getName(),
+      icon: getFileIcon(input.getName()),
+      noOverflow: false,
+      state: {}
+    };
+    editorInput.widgetFactory = () => html`
+            <lyra-media-viewer .input=${editorInput}></lyra-media-viewer>`;
+    return editorInput;
+  },
+  ranking: 1e3
+});
+let LyraMediaViewer = class extends LyraPart {
+  constructor() {
+    super(...arguments);
+    this.imageNaturalWidth = 0;
+    this.imageNaturalHeight = 0;
+    this.overlays = [];
+    this.onImageLoad = (e) => {
+      const img = e.target;
+      if (img?.naturalWidth && img?.naturalHeight) {
+        this.imageNaturalWidth = img.naturalWidth;
+        this.imageNaturalHeight = img.naturalHeight;
+      }
+    };
+  }
+  getMediaUrl() {
+    return this.mediaUrl;
+  }
+  getIsImage() {
+    return !!(this.input?.data instanceof File && this.mediaUrl && isImageFile(this.input.data));
+  }
+  getImageDimensions() {
+    return { width: this.imageNaturalWidth, height: this.imageNaturalHeight };
+  }
+  /** Set overlays drawn on the image (e.g. from object detection or other extensions). Coordinates in 0–1. */
+  setOverlays(overlays) {
+    this.overlays = overlays ?? [];
+  }
+  getOverlays() {
+    return [...this.overlays];
+  }
+  clearOverlays() {
+    this.overlays = [];
+  }
+  doClose() {
+    if (this.mediaUrl && this.mediaUrl.startsWith("blob:")) {
+      URL.revokeObjectURL(this.mediaUrl);
+    }
+    this.input = void 0;
+    this.mediaUrl = void 0;
+    this.overlays = [];
+    this.imageNaturalWidth = 0;
+    this.imageNaturalHeight = 0;
+  }
+  async doInitUI() {
+    await this.loadMedia();
+  }
+  async loadMedia() {
+    if (!this.input?.data || !(this.input.data instanceof File)) {
+      return;
+    }
+    const file = this.input.data;
+    const url = await file.getContents({ uri: true });
+    this.mediaUrl = url;
+    this.overlays = [];
+  }
+  render() {
+    if (!this.mediaUrl) {
+      return html`
+                <div style="display: flex; align-items: center; justify-content: center; height: 100%;">
+                    <wa-spinner></wa-spinner>
+                </div>
+            `;
+    }
+    const isImage = this.getIsImage();
+    if (isImage) {
+      const w = this.imageNaturalWidth || 1;
+      const h = this.imageNaturalHeight || 1;
+      const aspectRatio = w / h;
+      return html`
+                <div class="image-container">
+                    <div
+                        class="image-wrapper"
+                        style="aspect-ratio: ${aspectRatio};"
+                    >
+                        <img
+                            class="media-image"
+                            src="${this.mediaUrl}"
+                            alt=""
+                            @load=${this.onImageLoad}
+                        />
+                        ${this.overlays.length > 0 ? html`
+                            <div class="overlay-layer">
+                                ${this.overlays.map((o) => o.type === "bbox" ? html`
+                                    <div
+                                        class="overlay-bbox"
+                                        style="left: ${o.left * 100}%; top: ${o.top * 100}%; width: ${o.width * 100}%; height: ${o.height * 100}%;${o.color ? ` --overlay-color: ${o.color};` : ""}"
+                                        title="${o.label ?? ""}"
+                                    >
+                                        ${o.label ? html`<span class="overlay-label">${o.label}</span>` : nothing}
+                                    </div>
+                                ` : o.type === "mask" ? html`
+                                    <img
+                                        class="overlay-mask"
+                                        src="${o.dataUrl}"
+                                        alt="${o.label ?? ""}"
+                                        title="${o.label ?? ""}"
+                                    />
+                                ` : nothing)}
+                            </div>
+                        ` : nothing}
+                    </div>
+                </div>
+            `;
+    }
+    return html`
+            <div class="media-iframe-container">
+                <iframe
+                    src="${this.mediaUrl}"
+                    class="media-iframe"
+                    title="Media Viewer"></iframe>
+            </div>
+        `;
+  }
+};
+LyraMediaViewer.styles = css`
+        :host {
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            width: 100%;
+            height: 100%;
+            background: var(--wa-color-surface-default, #1a1a1a);
+        }
+
+        .image-container {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+        }
+
+        .image-wrapper {
+            position: relative;
+            max-width: 100%;
+            max-height: 100%;
+        }
+
+        .media-iframe-container {
+            position: absolute;
+            inset: 0;
+            min-height: 0;
+        }
+
+        .media-iframe {
+            display: block;
+            width: 100%;
+            height: 100%;
+            border: 0;
+        }
+
+        .media-image {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+
+        .overlay-layer {
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+        }
+
+        .overlay-bbox {
+            position: absolute;
+            border: 2px solid var(--overlay-color, var(--wa-color-brand-fill, #0d6efd));
+            background: color-mix(in srgb, var(--overlay-color, #0d6efd) 15%, transparent);
+            pointer-events: auto;
+            box-sizing: border-box;
+        }
+
+        .overlay-label {
+            position: absolute;
+            left: 0;
+            top: -1.25em;
+            font-size: 0.7rem;
+            white-space: nowrap;
+            background: var(--overlay-color, var(--wa-color-brand-fill, #0d6efd));
+            color: var(--wa-color-surface-default, #fff);
+            padding: 1px 4px;
+            border-radius: 2px;
+        }
+
+        .overlay-mask {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: fill;
+            pointer-events: none;
+        }
+    `;
+__decorateClass([
+  property({ attribute: false })
+], LyraMediaViewer.prototype, "input", 2);
+__decorateClass([
+  state()
+], LyraMediaViewer.prototype, "mediaUrl", 2);
+__decorateClass([
+  state()
+], LyraMediaViewer.prototype, "imageNaturalWidth", 2);
+__decorateClass([
+  state()
+], LyraMediaViewer.prototype, "imageNaturalHeight", 2);
+__decorateClass([
+  state()
+], LyraMediaViewer.prototype, "overlays", 2);
+LyraMediaViewer = __decorateClass([
+  customElement("lyra-media-viewer")
+], LyraMediaViewer);
+export {
+  LyraMediaViewer
+};
+//# sourceMappingURL=media-viewer-extension-B1XTrSmY.js.map

package/dist/media-viewer-extension-B1XTrSmY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-viewer-extension-B1XTrSmY.js","sources":["../src/media-viewer-extension.ts"],"sourcesContent":["import { customElement, property, state } from \"lit/decorators.js\";\nimport { css, html, nothing } from \"lit\";\nimport { LyraPart, EditorInput, editorRegistry, File } from \"@eclipse-lyra/core\";\n\nconst SUPPORTED_EXTENSIONS = [\n    '.pdf',\n    '.jpg', '.jpeg', '.png', '.gif', '.svg', '.webp', '.bmp', '.ico'\n];\n\nconst getFileIcon = (fileName: string): string => {\n    const lowerName = fileName.toLowerCase();\n    if (lowerName.endsWith('.pdf')) return 'file-pdf';\n    if (lowerName.match(/\\.(jpg|jpeg|png|gif|webp|bmp|ico|svg)$/)) return 'image';\n    return 'file';\n};\n\nconst isSupportedMediaFile = (file: File): boolean => {\n    const fileName = file.getName().toLowerCase();\n    return SUPPORTED_EXTENSIONS.some(ext => fileName.endsWith(ext));\n};\n\nconst IMAGE_EXTENSIONS = ['.jpg', '.jpeg', '.png', '.gif', '.svg', '.webp', '.bmp', '.ico'];\n\nconst isImageFile = (file: File): boolean => {\n    const name = file.getName().toLowerCase();\n    return IMAGE_EXTENSIONS.some(ext => name.endsWith(ext));\n};\n\n/** Normalized bounding box overlay (0–1). Used by extensions to draw on the image. */\nexport interface BboxOverlay {\n    type: 'bbox';\n    left: number;\n    top: number;\n    width: number;\n    height: number;\n    label?: string;\n    /** CSS color for border and label (e.g. by category). */\n    color?: string;\n}\n\n/** Segment mask overlay: PNG data URL (alpha where segment is), drawn over the image. */\nexport interface MaskOverlay {\n    type: 'mask';\n    /** Data URL of the mask image (e.g. image/png with alpha). */\n    dataUrl: string;\n    label?: string;\n    color?: string;\n}\n\nexport type MediaViewerOverlay = BboxOverlay | MaskOverlay;\n\neditorRegistry.registerEditorInputHandler({\n    editorId: \"system.media-viewer\",\n    label: \"Media viewer\",\n    canHandle: input => input instanceof File && isSupportedMediaFile(input),\n    handle: async (input: File) => {\n        const editorInput = {\n            title: input.getName(),\n            data: input,\n            key: input.getName(),\n            icon: getFileIcon(input.getName()),\n            noOverflow: false,\n            state: {},\n        } as EditorInput\n        editorInput.widgetFactory = () => html`\n            <lyra-media-viewer .input=${editorInput}></lyra-media-viewer>`\n        return editorInput;\n    },\n    ranking: 1000\n})\n\n@customElement('lyra-media-viewer')\nexport class LyraMediaViewer extends LyraPart {\n    @property({attribute: false})\n    public input?: EditorInput\n\n    @state()\n    private mediaUrl?: string\n\n    @state()\n    private imageNaturalWidth = 0\n\n    @state()\n    private imageNaturalHeight = 0\n\n    @state()\n    private overlays: MediaViewerOverlay[] = []\n\n    getMediaUrl(): string | undefined {\n        return this.mediaUrl;\n    }\n\n    getIsImage(): boolean {\n        return !!(this.input?.data instanceof File && this.mediaUrl && isImageFile(this.input.data));\n    }\n\n    getImageDimensions(): { width: number; height: number } {\n        return { width: this.imageNaturalWidth, height: this.imageNaturalHeight };\n    }\n\n    /** Set overlays drawn on the image (e.g. from object detection or other extensions). Coordinates in 0–1. */\n    setOverlays(overlays: MediaViewerOverlay[]): void {\n        this.overlays = overlays ?? [];\n    }\n\n    getOverlays(): MediaViewerOverlay[] {\n        return [...this.overlays];\n    }\n\n    clearOverlays(): void {\n        this.overlays = [];\n    }\n\n    protected doClose() {\n        if (this.mediaUrl && this.mediaUrl.startsWith('blob:')) {\n            URL.revokeObjectURL(this.mediaUrl)\n        }\n        this.input = undefined\n        this.mediaUrl = undefined\n        this.overlays = []\n        this.imageNaturalWidth = 0\n        this.imageNaturalHeight = 0\n    }\n\n    protected async doInitUI() {\n        await this.loadMedia()\n    }\n\n    private async loadMedia() {\n        if (!this.input?.data || !(this.input.data instanceof File)) {\n            return\n        }\n\n        const file = this.input.data\n        const url = await file.getContents({uri: true}) as string\n        this.mediaUrl = url\n        this.overlays = []\n    }\n\n    private onImageLoad = (e: Event): void => {\n        const img = e.target as HTMLImageElement;\n        if (img?.naturalWidth && img?.naturalHeight) {\n            this.imageNaturalWidth = img.naturalWidth;\n            this.imageNaturalHeight = img.naturalHeight;\n        }\n    }\n\n    protected render() {\n        if (!this.mediaUrl) {\n            return html`\n                <div style=\"display: flex; align-items: center; justify-content: center; height: 100%;\">\n                    <wa-spinner></wa-spinner>\n                </div>\n            `\n        }\n\n        const isImage = this.getIsImage();\n        if (isImage) {\n            const w = this.imageNaturalWidth || 1;\n            const h = this.imageNaturalHeight || 1;\n            const aspectRatio = w / h;\n            return html`\n                <div class=\"image-container\">\n                    <div\n                        class=\"image-wrapper\"\n                        style=\"aspect-ratio: ${aspectRatio};\"\n                    >\n                        <img\n                            class=\"media-image\"\n                            src=\"${this.mediaUrl}\"\n                            alt=\"\"\n                            @load=${this.onImageLoad}\n                        />\n                        ${this.overlays.length > 0 ? html`\n                            <div class=\"overlay-layer\">\n                                ${this.overlays.map((o) => o.type === 'bbox' ? html`\n                                    <div\n                                        class=\"overlay-bbox\"\n                                        style=\"left: ${o.left * 100}%; top: ${o.top * 100}%; width: ${o.width * 100}%; height: ${o.height * 100}%;${o.color ? ` --overlay-color: ${o.color};` : ''}\"\n                                        title=\"${o.label ?? ''}\"\n                                    >\n                                        ${o.label ? html`<span class=\"overlay-label\">${o.label}</span>` : nothing}\n                                    </div>\n                                ` : o.type === 'mask' ? html`\n                                    <img\n                                        class=\"overlay-mask\"\n                                        src=\"${o.dataUrl}\"\n                                        alt=\"${o.label ?? ''}\"\n                                        title=\"${o.label ?? ''}\"\n                                    />\n                                ` : nothing)}\n                            </div>\n                        ` : nothing}\n                    </div>\n                </div>\n            `;\n        }\n\n        return html`\n            <div class=\"media-iframe-container\">\n                <iframe\n                    src=\"${this.mediaUrl}\"\n                    class=\"media-iframe\"\n                    title=\"Media Viewer\"></iframe>\n            </div>\n        `\n    }\n\n    static styles = css`\n        :host {\n            display: flex;\n            flex-direction: column;\n            position: relative;\n            width: 100%;\n            height: 100%;\n            background: var(--wa-color-surface-default, #1a1a1a);\n        }\n\n        .image-container {\n            position: relative;\n            width: 100%;\n            height: 100%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            overflow: hidden;\n        }\n\n        .image-wrapper {\n            position: relative;\n            max-width: 100%;\n            max-height: 100%;\n        }\n\n        .media-iframe-container {\n            position: absolute;\n            inset: 0;\n            min-height: 0;\n        }\n\n        .media-iframe {\n            display: block;\n            width: 100%;\n            height: 100%;\n            border: 0;\n        }\n\n        .media-image {\n            display: block;\n            width: 100%;\n            height: 100%;\n            object-fit: contain;\n        }\n\n        .overlay-layer {\n            position: absolute;\n            inset: 0;\n            pointer-events: none;\n        }\n\n        .overlay-bbox {\n            position: absolute;\n            border: 2px solid var(--overlay-color, var(--wa-color-brand-fill, #0d6efd));\n            background: color-mix(in srgb, var(--overlay-color, #0d6efd) 15%, transparent);\n            pointer-events: auto;\n            box-sizing: border-box;\n        }\n\n        .overlay-label {\n            position: absolute;\n            left: 0;\n            top: -1.25em;\n            font-size: 0.7rem;\n            white-space: nowrap;\n            background: var(--overlay-color, var(--wa-color-brand-fill, #0d6efd));\n            color: var(--wa-color-surface-default, #fff);\n            padding: 1px 4px;\n            border-radius: 2px;\n        }\n\n        .overlay-mask {\n            position: absolute;\n            inset: 0;\n            width: 100%;\n            height: 100%;\n            object-fit: fill;\n            pointer-events: none;\n        }\n    `\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'lyra-media-viewer': LyraMediaViewer\n    }\n}\n\n"],"names":[],"mappings":"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"}

package/dist/media-viewer-extension.d.ts

@@ -0,0 +1,50 @@
+import { LyraPart, EditorInput } from '@eclipse-lyra/core';
+/** Normalized bounding box overlay (0–1). Used by extensions to draw on the image. */
+export interface BboxOverlay {
+    type: 'bbox';
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    label?: string;
+    /** CSS color for border and label (e.g. by category). */
+    color?: string;
+}
+/** Segment mask overlay: PNG data URL (alpha where segment is), drawn over the image. */
+export interface MaskOverlay {
+    type: 'mask';
+    /** Data URL of the mask image (e.g. image/png with alpha). */
+    dataUrl: string;
+    label?: string;
+    color?: string;
+}
+export type MediaViewerOverlay = BboxOverlay | MaskOverlay;
+export declare class LyraMediaViewer extends LyraPart {
+    input?: EditorInput;
+    private mediaUrl?;
+    private imageNaturalWidth;
+    private imageNaturalHeight;
+    private overlays;
+    getMediaUrl(): string | undefined;
+    getIsImage(): boolean;
+    getImageDimensions(): {
+        width: number;
+        height: number;
+    };
+    /** Set overlays drawn on the image (e.g. from object detection or other extensions). Coordinates in 0–1. */
+    setOverlays(overlays: MediaViewerOverlay[]): void;
+    getOverlays(): MediaViewerOverlay[];
+    clearOverlays(): void;
+    protected doClose(): void;
+    protected doInitUI(): Promise<void>;
+    private loadMedia;
+    private onImageLoad;
+    protected render(): import('lit-html').TemplateResult<1>;
+    static styles: import('lit').CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-media-viewer': LyraMediaViewer;
+    }
+}
+//# sourceMappingURL=media-viewer-extension.d.ts.map

package/dist/media-viewer-extension.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-viewer-extension.d.ts","sourceRoot":"","sources":["../src/media-viewer-extension.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAwB,MAAM,oBAAoB,CAAC;AA0BjF,sFAAsF;AACtF,MAAM,WAAW,WAAW;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,yFAAyF;AACzF,MAAM,WAAW,WAAW;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,WAAW,CAAC;AAsB3D,qBACa,eAAgB,SAAQ,QAAQ;IAElC,KAAK,CAAC,EAAE,WAAW,CAAA;IAG1B,OAAO,CAAC,QAAQ,CAAC,CAAQ;IAGzB,OAAO,CAAC,iBAAiB,CAAI;IAG7B,OAAO,CAAC,kBAAkB,CAAI;IAG9B,OAAO,CAAC,QAAQ,CAA2B;IAE3C,WAAW,IAAI,MAAM,GAAG,SAAS;IAIjC,UAAU,IAAI,OAAO;IAIrB,kBAAkB,IAAI;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;IAIvD,4GAA4G;IAC5G,WAAW,CAAC,QAAQ,EAAE,kBAAkB,EAAE,GAAG,IAAI;IAIjD,WAAW,IAAI,kBAAkB,EAAE;IAInC,aAAa,IAAI,IAAI;IAIrB,SAAS,CAAC,OAAO;cAWD,QAAQ;YAIV,SAAS;IAWvB,OAAO,CAAC,WAAW,CAMlB;IAED,SAAS,CAAC,MAAM;IA6DhB,MAAM,CAAC,MAAM,0BAgFZ;CACJ;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,mBAAmB,EAAE,eAAe,CAAA;KACvC;CACJ"}

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@eclipse-lyra/extension-media-viewer",
+  "version": "0.0.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "dependencies": {
+    "@eclipse-lyra/core": "*"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3",
+    "vite": "^7.1.12",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build"
+  }
+}