omni-viewer-core 0.1.0

package/dist/viewers/toml/controller.d.ts

@@ -0,0 +1,38 @@
+import { type TomlNode } from '../../parsers/toml/index.js';
+import type { Diagnostic } from '../../parsers/types.js';
+export type TomlAction = {
+    type: 'set-mode';
+    mode: 'tree' | 'flat' | 'json' | 'raw';
+} | {
+    type: 'set-search';
+    search: string;
+} | {
+    type: 'toggle-node';
+    id: string;
+} | {
+    type: 'expand-all';
+} | {
+    type: 'collapse-all';
+} | {
+    type: 'edit-source';
+    text: string;
+};
+export interface TomlViewState {
+    status: 'ok' | 'partial' | 'failed';
+    root: TomlNode | null;
+    text: string;
+    mode: 'tree' | 'flat' | 'json' | 'raw';
+    diagnostics: readonly Diagnostic[];
+    search: string;
+    expanded: ReadonlySet<string>;
+}
+export interface TomlController {
+    readonly state: TomlViewState;
+    dispatch(action: TomlAction): void;
+    subscribe(listener: (state: TomlViewState) => void): () => void;
+    nodePath(id: string): string;
+    nodeValue(id: string): string;
+    nodeJson(id: string): string;
+    documentJson(): string;
+}
+export declare function createTomlController(input: Uint8Array | string): TomlController;

package/dist/viewers/toml/controller.js

@@ -0,0 +1,61 @@
+import { asciiLower } from '../../parsers/csv/index.js';
+import { parseToml } from '../../parsers/toml/index.js';
+export function createTomlController(input) {
+    const listeners = new Set();
+    const nodes = new Map();
+    const decode = (value) => typeof value === 'string' ? value : new TextDecoder().decode(value);
+    const state = { status: 'ok', root: null, text: decode(input), mode: 'tree', diagnostics: [], search: '', expanded: new Set() };
+    const index = () => {
+        nodes.clear();
+        const result = parseToml(state.text).result;
+        state.status = result.status;
+        state.diagnostics = result.diagnostics;
+        state.root = result.status === 'failed' ? null : result.document.root;
+        const walk = (node) => { nodes.set(node.path || '$', node); for (const child of node.children ?? [])
+            walk(child); };
+        if (state.root)
+            walk(state.root);
+    };
+    const plain = (node) => node.children ? node.kind === 'array' ? node.children.map(plain) : Object.fromEntries(node.children.map(child => [child.key, plain(child)])) : node.kind === 'integer' || node.kind === 'float' || node.kind === 'datetime' ? node.raw : node.value;
+    const notify = () => listeners.forEach(listener => listener(state));
+    index();
+    if (state.root)
+        state.expanded = new Set([state.root.path || '$', ...(state.root.children ?? []).filter(node => !!node.children?.length).map(node => node.path)]);
+    return {
+        state,
+        subscribe(listener) { listeners.add(listener); return () => listeners.delete(listener); },
+        nodePath: id => nodes.get(id)?.path ?? '', nodeValue: id => nodes.get(id)?.raw ?? '',
+        nodeJson: id => JSON.stringify(plain(nodes.get(id) ?? state.root), null, 2),
+        documentJson: () => state.root ? JSON.stringify(plain(state.root), null, 2) : '',
+        dispatch(action) {
+            if (action.type === 'edit-source') {
+                state.text = action.text;
+                index();
+            }
+            else if (action.type === 'set-mode')
+                state.mode = action.mode;
+            else if (action.type === 'set-search') {
+                state.search = action.search;
+                const query = asciiLower(action.search);
+                if (query)
+                    nodes.forEach(node => { if (asciiLower(`${node.key} ${node.path} ${node.raw}`).includes(query)) {
+                        let current = node;
+                        while (current) {
+                            state.expanded = new Set([...state.expanded, current.path || '$']);
+                            current = [...nodes.values()].find(candidate => candidate.children?.includes(current));
+                        }
+                    } });
+            }
+            else if (action.type === 'toggle-node') {
+                const expanded = new Set(state.expanded);
+                expanded.has(action.id) ? expanded.delete(action.id) : expanded.add(action.id);
+                state.expanded = expanded;
+            }
+            else if (action.type === 'expand-all')
+                state.expanded = new Set(nodes.keys());
+            else
+                state.expanded = new Set();
+            notify();
+        }
+    };
+}

package/dist/viewers/toml/index.d.ts

@@ -0,0 +1,18 @@
+import type { ClipboardService, FileSaveService, FileWritebackService, HostContext } from '../../host/index.js';
+import type { MountOptions, ViewerHandle, ViewerInput } from '../types.js';
+export * from './controller.js';
+export { structuredViewerCss as tomlViewerCss } from '../structured-styles.js';
+export declare const TOML_VIEWER_META: {
+    id: string;
+    displayNameKey: string;
+    extensions: string[];
+    priority: number;
+    requiredServices: readonly [];
+    optionalServices: readonly ["clipboard", "save", "writeback"];
+    inputOwnership: "borrows";
+};
+export declare function mountTomlViewer(input: ViewerInput, container: HTMLElement, ctx: HostContext & {
+    clipboard?: ClipboardService;
+    save?: FileSaveService;
+    writeback?: FileWritebackService;
+}, options?: MountOptions): Promise<ViewerHandle>;

package/dist/viewers/toml/index.js

@@ -0,0 +1,34 @@
+import { mountStructured } from '../structured.js';
+import { structuredViewerCss } from '../structured-styles.js';
+import { createTomlController } from './controller.js';
+export * from './controller.js';
+export { structuredViewerCss as tomlViewerCss } from '../structured-styles.js';
+export const TOML_VIEWER_META = { id: 'toml', displayNameKey: 'toml.treeView', extensions: ['toml'], priority: 10, requiredServices: [], optionalServices: ['clipboard', 'save', 'writeback'], inputOwnership: 'borrows' };
+/** Lightweight TOML source highlighting that preserves the editable textarea. */
+function renderTomlSource(target, text) {
+    target.replaceChildren();
+    const span = (className, value) => {
+        const node = document.createElement('span');
+        node.className = className;
+        node.textContent = value;
+        return node;
+    };
+    for (const line of text.split('\n')) {
+        const commentAt = line.search(/\s#/);
+        const source = commentAt >= 0 ? line.slice(0, commentAt) : line;
+        const comment = commentAt >= 0 ? line.slice(commentAt) : '';
+        const table = /^(\s*\[\[?.+?\]?\]\s*)$/.exec(source);
+        const assignment = /^(\s*[^=]+?\s*)(=)(.*)$/.exec(source);
+        if (table)
+            target.appendChild(span('omni-structured__source-table', source));
+        else if (assignment) {
+            target.append(span('omni-structured__source-key', assignment[1]), document.createTextNode('='), span('omni-structured__source-value', assignment[3]));
+        }
+        else
+            target.appendChild(document.createTextNode(source));
+        if (comment)
+            target.appendChild(span('omni-structured__source-comment', comment));
+        target.appendChild(document.createTextNode('\n'));
+    }
+}
+export function mountTomlViewer(input, container, ctx, options = {}) { return Promise.resolve(mountStructured(input, container, ctx, options, 'omni-viewer--toml', structuredViewerCss, createTomlController(input.data), renderTomlSource)); }

package/dist/viewers/types.d.ts

@@ -0,0 +1,36 @@
+export interface ViewerInput {
+    fileName: string;
+    /** Whole file bytes. Streaming readers are a v2 concern. */
+    data: Uint8Array;
+    lastModified?: number;
+}
+export interface ViewerHandle {
+    /**
+     * Tear down the viewer: cancel in-flight async work, remove listeners,
+     * terminate workers, clear the container. Nothing may remain after this
+     * call (verified by the viewer contract tests).
+     */
+    dispose(): void;
+}
+export interface MountOptions {
+    /**
+     * Cancels initialization (tab switch, file reselect). When aborted, mount
+     * rejects with an 'aborted' error after cleaning up anything it acquired.
+     */
+    signal?: AbortSignal;
+    /**
+     * Style isolation mode (DESIGN.md §6 reverse-contamination contract).
+     * 'shadow' (default): render inside a shadow root with core CSS injected
+     * there — host global styles cannot leak in, and --omni-* custom
+     * properties still pierce the boundary.
+     * 'scoped': render directly into the container under a scope class; the
+     * adapter is responsible for loading the core CSS into the document.
+     */
+    styleIsolation?: 'shadow' | 'scoped';
+}
+export declare class MountAbortedError extends Error {
+    readonly name = "MountAbortedError";
+    constructor();
+}
+/** Root scope class applied to every core viewer root element. */
+export declare const VIEWER_ROOT_CLASS = "omni-viewer";

package/dist/viewers/types.js

@@ -0,0 +1,9 @@
+// Viewer layer contracts (DESIGN.md §3-②).
+export class MountAbortedError extends Error {
+    name = 'MountAbortedError';
+    constructor() {
+        super('mount aborted');
+    }
+}
+/** Root scope class applied to every core viewer root element. */
+export const VIEWER_ROOT_CLASS = 'omni-viewer';

package/dist/viewers/video/controller.d.ts

@@ -0,0 +1,29 @@
+export declare const VIDEO_MIN_ZOOM = 0.25;
+export declare const VIDEO_MAX_ZOOM = 4;
+export declare const VIDEO_ZOOM_STEP = 0.25;
+export declare const VIDEO_SPEED_OPTIONS: readonly [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 4];
+export interface VideoViewState {
+    zoom: number;
+    speed: number;
+}
+export type VideoAction = {
+    type: 'zoom-in';
+} | {
+    type: 'zoom-out';
+} | {
+    type: 'zoom-fit';
+} | {
+    type: 'set-zoom';
+    zoom: number;
+} | {
+    type: 'set-speed';
+    speed: number;
+};
+export interface VideoController {
+    readonly state: VideoViewState;
+    dispatch(action: VideoAction): void;
+    subscribe(listener: (state: VideoViewState) => void): () => void;
+}
+export declare function createVideoController(): VideoController;
+/** mm:ss (or h:mm:ss) display used by the progress row and info panel. */
+export declare function formatMediaTime(seconds: number): string;

package/dist/viewers/video/controller.js

@@ -0,0 +1,54 @@
+// DOM-free playback presentation state for the video viewer. Time/played
+// state lives on the media element (the browser owns it); the controller only
+// holds the pure, testable knobs the toolbar mutates: zoom and playback speed.
+export const VIDEO_MIN_ZOOM = 0.25;
+export const VIDEO_MAX_ZOOM = 4;
+export const VIDEO_ZOOM_STEP = 0.25;
+export const VIDEO_SPEED_OPTIONS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 4];
+const clampZoom = (zoom) => Math.min(VIDEO_MAX_ZOOM, Math.max(VIDEO_MIN_ZOOM, Math.round(zoom / VIDEO_ZOOM_STEP) * VIDEO_ZOOM_STEP));
+export function createVideoController() {
+    let zoom = 1;
+    let speed = 1;
+    const listeners = new Set();
+    const snapshot = () => ({ zoom, speed });
+    const emit = () => listeners.forEach((listener) => listener(snapshot()));
+    return {
+        get state() { return snapshot(); },
+        dispatch(action) {
+            const before = snapshot();
+            switch (action.type) {
+                case 'zoom-in':
+                    zoom = clampZoom(zoom + VIDEO_ZOOM_STEP);
+                    break;
+                case 'zoom-out':
+                    zoom = clampZoom(zoom - VIDEO_ZOOM_STEP);
+                    break;
+                case 'zoom-fit':
+                    zoom = 1;
+                    break;
+                case 'set-zoom':
+                    zoom = clampZoom(action.zoom);
+                    break;
+                case 'set-speed':
+                    if (VIDEO_SPEED_OPTIONS.includes(action.speed))
+                        speed = action.speed;
+                    break;
+            }
+            if (zoom !== before.zoom || speed !== before.speed)
+                emit();
+        },
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        }
+    };
+}
+/** mm:ss (or h:mm:ss) display used by the progress row and info panel. */
+export function formatMediaTime(seconds) {
+    if (!Number.isFinite(seconds) || seconds < 0)
+        return '0:00';
+    const whole = Math.floor(seconds);
+    const h = Math.floor(whole / 3600), m = Math.floor((whole % 3600) / 60), s = whole % 60;
+    const ms = `${m}:${String(s).padStart(2, '0')}`;
+    return h > 0 ? `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}` : ms;
+}

package/dist/viewers/video/index.d.ts

@@ -0,0 +1,18 @@
+import type { HostContext } from '../../host/index.js';
+import type { MediaMountOptions } from '../media.js';
+import { type ViewerHandle, type ViewerInput } from '../types.js';
+export { parseVideoInfo } from '../../parsers/video/index.js';
+export { videoViewerCss } from './styles.js';
+export { createVideoController, formatMediaTime, VIDEO_MIN_ZOOM, VIDEO_MAX_ZOOM, VIDEO_ZOOM_STEP, VIDEO_SPEED_OPTIONS, type VideoAction, type VideoController, type VideoViewState } from './controller.js';
+export type VideoViewerContext = HostContext;
+export type VideoMountOptions = MediaMountOptions;
+export declare const VIDEO_VIEWER_META: {
+    id: string;
+    displayNameKey: string;
+    extensions: string[];
+    priority: number;
+    requiredServices: readonly [];
+    optionalServices: readonly [];
+    inputOwnership: "borrows";
+};
+export declare function mountVideoViewer(input: ViewerInput, container: HTMLElement, ctx: VideoViewerContext, options?: VideoMountOptions): Promise<ViewerHandle>;

package/dist/viewers/video/index.js

@@ -0,0 +1,305 @@
+import { parseVideoInfo } from '../../parsers/video/index.js';
+import { MountAbortedError, VIEWER_ROOT_CLASS } from '../types.js';
+import { createVideoController, formatMediaTime, VIDEO_SPEED_OPTIONS } from './controller.js';
+import { videoViewerCss } from './styles.js';
+export { parseVideoInfo } from '../../parsers/video/index.js';
+export { videoViewerCss } from './styles.js';
+export { createVideoController, formatMediaTime, VIDEO_MIN_ZOOM, VIDEO_MAX_ZOOM, VIDEO_ZOOM_STEP, VIDEO_SPEED_OPTIONS } from './controller.js';
+export const VIDEO_VIEWER_META = {
+    id: 'video',
+    displayNameKey: 'video.title',
+    extensions: ['mp4', 'mts', 'm2ts', 'avi', 'mov', 'wmv', 'flv', 'webm', 'mkv'],
+    priority: 20,
+    requiredServices: [],
+    optionalServices: [],
+    inputOwnership: 'borrows'
+};
+const SKIP_SECONDS = 10;
+const DEFAULT_MAX_BYTES = 128 * 1024 * 1024;
+export async function mountVideoViewer(input, container, ctx, options = {}) {
+    if (options.signal?.aborted)
+        throw new MountAbortedError();
+    const t = (key, args) => ctx.i18n.t(key, args);
+    const info = parseVideoInfo(input.fileName, input.data);
+    const maxBytes = options.maxBytes ?? DEFAULT_MAX_BYTES;
+    const root = options.styleIsolation !== 'scoped' && container.attachShadow
+        ? (container.shadowRoot ?? container.attachShadow({ mode: 'open' }))
+        : container;
+    if (root === container)
+        container.classList.add(VIEWER_ROOT_CLASS, 'omni-viewer--video');
+    else {
+        const style = document.createElement('style');
+        style.textContent = videoViewerCss;
+        root.append(style);
+    }
+    const controller = createVideoController();
+    const disposers = [];
+    const listen = (target, type, handler, opts) => {
+        target.addEventListener(type, handler, opts);
+        disposers.push(() => target.removeEventListener(type, handler, opts));
+    };
+    const shell = element('section', `${VIEWER_ROOT_CLASS} omni-video`);
+    shell.tabIndex = 0;
+    // Header: file name + mime/size.
+    const header = element('header', 'omni-video__header');
+    header.append(element('div', 'omni-video__title', input.fileName), element('div', 'omni-video__meta', `${info.mimeType} · ${formatBytes(input.data.byteLength)}`));
+    // File info panel (populated on loadedmetadata).
+    const infoPanel = element('div', 'omni-video__info');
+    infoPanel.hidden = true;
+    const durationValue = infoItem(infoPanel, t('video.info.duration'));
+    const resolutionValue = infoItem(infoPanel, t('video.info.resolution'));
+    const formatValue = infoItem(infoPanel, t('video.info.format'));
+    const sizeValue = infoItem(infoPanel, t('video.info.fileSize'));
+    formatValue.textContent = info.format;
+    sizeValue.textContent = formatBytes(input.data.byteLength);
+    // Toolbar.
+    const controls = element('div', 'omni-video__controls');
+    const playPause = button(t('video.play'));
+    const stop = button(t('video.stop'));
+    const skipBack = button(t('video.skipBack', { seconds: SKIP_SECONDS }));
+    const skipForward = button(t('video.skipForward', { seconds: SKIP_SECONDS }));
+    const transportGroup = element('div', 'omni-video__group');
+    transportGroup.append(playPause, stop, skipBack, skipForward);
+    const speedGroup = element('div', 'omni-video__group');
+    const speedLabel = element('label', 'omni-video__group-label', t('video.speed'));
+    const speedSelect = document.createElement('select');
+    speedSelect.className = 'omni-video__select';
+    for (const speed of VIDEO_SPEED_OPTIONS) {
+        const option = document.createElement('option');
+        option.value = String(speed);
+        option.textContent = `${speed}x`;
+        option.selected = speed === 1;
+        speedSelect.append(option);
+    }
+    speedLabel.append(speedSelect);
+    speedGroup.append(speedLabel);
+    const zoomGroup = element('div', 'omni-video__group');
+    const zoomOut = button('−', t('video.zoomOut'));
+    const zoomLabel = element('span', 'omni-video__zoom-label', '100%');
+    const zoomIn = button('+', t('video.zoomIn'));
+    const zoomFit = button(t('video.zoomFit'));
+    zoomGroup.append(element('span', 'omni-video__group-label', t('video.zoom')), zoomOut, zoomLabel, zoomIn, zoomFit);
+    controls.append(transportGroup, speedGroup, zoomGroup);
+    // Progress row.
+    const progressRow = element('div', 'omni-video__progress-row');
+    const currentTime = element('span', 'omni-video__time', '0:00');
+    const bar = element('div', 'omni-video__bar');
+    const barFilled = element('div', 'omni-video__bar-filled');
+    barFilled.append(element('div', 'omni-video__bar-handle'));
+    bar.append(barFilled);
+    const totalTime = element('span', 'omni-video__time', '0:00');
+    progressRow.append(currentTime, bar, totalTime);
+    // Stage.
+    const stage = element('main', 'omni-video__stage');
+    const wrapper = element('div', 'omni-video__wrapper');
+    const video = document.createElement('video');
+    video.preload = input.data.byteLength > 50 * 1024 * 1024 ? 'metadata' : 'auto';
+    wrapper.append(video);
+    const warning = element('div', 'omni-video__warning');
+    warning.hidden = true;
+    shell.append(header, infoPanel, controls, progressRow, stage, warning);
+    root.append(shell);
+    const showWarning = (message) => {
+        warning.hidden = false;
+        warning.textContent = [...info.warnings, message].filter(Boolean).join('\n');
+    };
+    const setControlsEnabled = (enabled) => {
+        for (const control of [playPause, stop, skipBack, skipForward, speedSelect, zoomOut, zoomIn, zoomFit]) {
+            control.disabled = !enabled;
+        }
+    };
+    let url;
+    let hasSource = false;
+    if (input.data.byteLength === 0)
+        showWarning(t('video.error.empty'));
+    else if (input.data.byteLength > maxBytes)
+        showWarning(t('video.error.tooLarge', { limit: formatBytes(maxBytes) }));
+    else {
+        try {
+            const create = options.createObjectUrl ?? URL.createObjectURL.bind(URL);
+            url = create(new Blob([blobPart(input.data)], { type: info.mimeType }));
+            video.src = url;
+            stage.append(wrapper);
+            hasSource = true;
+            if (info.warnings.length)
+                showWarning('');
+        }
+        catch {
+            showWarning(t('video.error.source'));
+        }
+    }
+    setControlsEnabled(hasSource);
+    // Media element wiring.
+    const refreshProgress = () => {
+        currentTime.textContent = formatMediaTime(video.currentTime);
+        if (Number.isFinite(video.duration) && video.duration > 0) {
+            barFilled.style.width = `${(video.currentTime / video.duration) * 100}%`;
+        }
+    };
+    listen(video, 'loadedmetadata', () => {
+        totalTime.textContent = formatMediaTime(video.duration);
+        durationValue.textContent = formatMediaTime(video.duration);
+        if (video.videoWidth && video.videoHeight)
+            resolutionValue.textContent = `${video.videoWidth}×${video.videoHeight}`;
+        infoPanel.hidden = false;
+    });
+    listen(video, 'play', () => { playPause.textContent = t('video.pause'); });
+    listen(video, 'pause', () => { playPause.textContent = t('video.play'); });
+    listen(video, 'ended', () => { playPause.textContent = t('video.play'); });
+    listen(video, 'timeupdate', () => { if (!dragging)
+        refreshProgress(); });
+    listen(video, 'error', () => showWarning(t('video.error.decode')));
+    // Transport.
+    listen(playPause, 'click', () => {
+        if (video.paused || video.ended)
+            void video.play()?.catch?.(() => showWarning(t('video.error.decode')));
+        else
+            video.pause();
+    });
+    listen(stop, 'click', () => { video.pause(); video.currentTime = 0; refreshProgress(); });
+    listen(skipBack, 'click', () => { video.currentTime = Math.max(0, video.currentTime - SKIP_SECONDS); refreshProgress(); });
+    listen(skipForward, 'click', () => {
+        const limit = Number.isFinite(video.duration) ? video.duration : video.currentTime + SKIP_SECONDS;
+        video.currentTime = Math.min(limit, video.currentTime + SKIP_SECONDS);
+        refreshProgress();
+    });
+    listen(speedSelect, 'change', () => controller.dispatch({ type: 'set-speed', speed: Number(speedSelect.value) }));
+    // Seek by click/drag on the progress bar. Document-level listeners are
+    // required for drags that leave the bar; both are torn down on dispose.
+    let dragging = false;
+    const seekToPointer = (event) => {
+        const rect = bar.getBoundingClientRect();
+        if (rect.width <= 0 || !Number.isFinite(video.duration) || video.duration <= 0)
+            return;
+        const ratio = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width));
+        video.currentTime = ratio * video.duration;
+        barFilled.style.width = `${ratio * 100}%`;
+        currentTime.textContent = formatMediaTime(video.currentTime);
+    };
+    listen(bar, 'mousedown', (event) => {
+        if (!hasSource)
+            return;
+        dragging = true;
+        bar.classList.add('omni-video__bar--dragging');
+        seekToPointer(event);
+    });
+    listen(document, 'mousemove', (event) => { if (dragging)
+        seekToPointer(event); });
+    listen(document, 'mouseup', () => {
+        if (!dragging)
+            return;
+        dragging = false;
+        bar.classList.remove('omni-video__bar--dragging');
+    });
+    // Zoom.
+    listen(zoomIn, 'click', () => controller.dispatch({ type: 'zoom-in' }));
+    listen(zoomOut, 'click', () => controller.dispatch({ type: 'zoom-out' }));
+    listen(zoomFit, 'click', () => controller.dispatch({ type: 'zoom-fit' }));
+    listen(stage, 'wheel', (event) => {
+        if (!event.ctrlKey && !event.metaKey)
+            return;
+        event.preventDefault();
+        controller.dispatch({ type: event.deltaY > 0 ? 'zoom-out' : 'zoom-in' });
+    }, { passive: false });
+    const applyState = (state) => {
+        wrapper.style.transform = state.zoom === 1 ? '' : `scale(${state.zoom})`;
+        zoomLabel.textContent = `${Math.round(state.zoom * 100)}%`;
+        stage.classList.toggle('omni-video__stage--zoomed', state.zoom > 1);
+        video.playbackRate = state.speed;
+        speedSelect.value = String(state.speed);
+    };
+    disposers.push(controller.subscribe(applyState));
+    // Keyboard shortcuts, scoped to the viewer (shell is focusable).
+    listen(shell, 'keydown', (event) => {
+        if (!hasSource)
+            return;
+        const key = event.key;
+        if (key === ' ')
+            playPause.click();
+        else if (key === 'ArrowLeft')
+            skipBack.click();
+        else if (key === 'ArrowRight')
+            skipForward.click();
+        else if (key === 'Home') {
+            video.currentTime = 0;
+            refreshProgress();
+        }
+        else if (key === 'End' && Number.isFinite(video.duration)) {
+            video.currentTime = video.duration;
+            refreshProgress();
+        }
+        else if (key === '+' || key === '=')
+            zoomIn.click();
+        else if (key === '-')
+            zoomOut.click();
+        else if (key === '0')
+            zoomFit.click();
+        else
+            return;
+        event.preventDefault();
+    });
+    if (options.signal?.aborted) {
+        cleanup();
+        throw new MountAbortedError();
+    }
+    let disposed = false;
+    function cleanup() {
+        video.pause();
+        video.removeAttribute('src');
+        video.load();
+        disposers.forEach((dispose) => dispose());
+        if (url)
+            (options.revokeObjectUrl ?? URL.revokeObjectURL.bind(URL))(url);
+        shell.remove();
+        if (root === container)
+            container.classList.remove(VIEWER_ROOT_CLASS, 'omni-viewer--video');
+        else
+            root.replaceChildren();
+    }
+    return {
+        dispose() {
+            if (disposed)
+                return;
+            disposed = true;
+            cleanup();
+        }
+    };
+}
+function element(tag, className, text) {
+    const node = document.createElement(tag);
+    if (className)
+        node.className = className;
+    if (text !== undefined)
+        node.textContent = text;
+    return node;
+}
+function button(label, title) {
+    const node = document.createElement('button');
+    node.type = 'button';
+    node.className = 'omni-video__btn';
+    node.textContent = label;
+    if (title)
+        node.title = title;
+    return node;
+}
+function infoItem(panel, label) {
+    const item = element('div', 'omni-video__info-item');
+    const value = element('div', 'omni-video__info-value', '--');
+    item.append(element('div', 'omni-video__info-label', label), value);
+    panel.append(item);
+    return value;
+}
+function blobPart(data) {
+    return data.buffer instanceof ArrayBuffer ? data : new Uint8Array(data);
+}
+function formatBytes(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    const units = ['KiB', 'MiB', 'GiB'];
+    let value = bytes / 1024, index = 0;
+    while (value >= 1024 && index < 2) {
+        value /= 1024;
+        index++;
+    }
+    return `${value.toFixed(value >= 10 ? 1 : 2)} ${units[index]}`;
+}

package/dist/viewers/video/styles.d.ts

@@ -0,0 +1 @@
+export declare const videoViewerCss = "\n/* Reverse-contamination guard (DESIGN.md \u00A76). */\n.omni-viewer--video {\n    all: initial;\n}\n.omni-viewer--video :where(button, select, option, input, label, video) {\n    all: revert;\n}\n\n:host, .omni-viewer--video {\n    display: block;\n    height: 100%;\n    box-sizing: border-box;\n    color: var(--omni-fg, #d4d4d4);\n    background: var(--omni-bg, #1e1e1e);\n    font-family: var(--omni-font, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);\n    font-size: var(--omni-font-size, 13px);\n}\n\n.omni-video { display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; height: 100%; padding: 16px; }\n.omni-video * { box-sizing: border-box; }\n\n.omni-video__header { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }\n.omni-video__title { font-size: 16px; font-weight: 650; overflow-wrap: anywhere; }\n.omni-video__meta { color: var(--omni-muted, #9d9d9d); white-space: nowrap; }\n\n.omni-video__info { display: flex; gap: 18px; padding: 6px 10px; border: 1px solid var(--omni-border, #444); border-radius: 6px; background: var(--omni-panel-bg, #252526); }\n.omni-video__info[hidden] { display: none; }\n.omni-video__info-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }\n.omni-video__info-label { font-size: 10px; opacity: 0.7; }\n.omni-video__info-value { font-family: var(--omni-mono, ui-monospace, Menlo, monospace); font-weight: 500; }\n\n.omni-video__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px; border: 1px solid var(--omni-border, #444); border-radius: 8px; background: var(--omni-panel-bg, #252526); }\n.omni-video__group { display: flex; align-items: center; gap: 5px; }\n.omni-video__group-label { font-size: 12px; color: var(--omni-muted, #9d9d9d); }\n\n.omni-video__btn {\n    background: var(--omni-accent, #0e639c); color: var(--omni-accent-fg, #fff);\n    border: none; padding: 5px 11px; border-radius: 4px; cursor: pointer; font-size: 12px; font-family: inherit;\n}\n.omni-video__btn:hover { background: var(--omni-accent-hover, #1177bb); }\n.omni-video__btn:disabled { opacity: 0.5; cursor: not-allowed; }\n\n.omni-video__select {\n    background: var(--omni-input-bg, #3c3c3c); color: var(--omni-fg, #d4d4d4);\n    border: 1px solid var(--omni-border, #444); padding: 4px 8px; border-radius: 4px; font-size: 12px; font-family: inherit;\n}\n.omni-video__zoom-label { font-family: var(--omni-mono, ui-monospace, Menlo, monospace); font-size: 12px; min-width: 42px; text-align: center; color: var(--omni-muted, #9d9d9d); }\n\n.omni-video__progress-row { display: flex; align-items: center; gap: 10px; padding: 4px 6px; border: 1px solid var(--omni-border, #444); border-radius: 8px; background: var(--omni-panel-bg, #252526); }\n.omni-video__time { font-family: var(--omni-mono, ui-monospace, Menlo, monospace); font-size: 12px; min-width: 52px; text-align: center; }\n.omni-video__bar { flex: 1; height: 8px; background: var(--omni-input-bg, #3c3c3c); border-radius: 4px; cursor: pointer; position: relative; }\n.omni-video__bar:hover, .omni-video__bar--dragging { height: 12px; }\n.omni-video__bar-filled { height: 100%; width: 0%; background: var(--omni-accent, #0e639c); border-radius: 4px; pointer-events: none; position: relative; }\n.omni-video__bar-handle {\n    width: 14px; height: 14px; background: var(--omni-accent-fg, #fff); border: 2px solid var(--omni-accent, #0e639c);\n    border-radius: 50%; position: absolute; right: -7px; top: 50%; transform: translateY(-50%);\n    opacity: 0; transition: opacity 0.15s; pointer-events: none;\n}\n.omni-video__bar:hover .omni-video__bar-handle, .omni-video__bar--dragging .omni-video__bar-handle { opacity: 1; }\n\n.omni-video__stage {\n    flex: 1; min-height: 240px; display: flex; justify-content: center; align-items: center;\n    border: 1px solid var(--omni-border, #444); border-radius: 8px; background: #000; overflow: hidden; position: relative;\n}\n.omni-video__stage--zoomed { overflow: auto; }\n.omni-video__wrapper { transition: transform 0.2s ease; transform-origin: center center; }\n.omni-video video { display: block; max-width: 100%; max-height: 70vh; background: #000; }\n\n.omni-video__warning {\n    padding: 10px 12px; border: 1px solid #b98b2f; border-radius: 7px;\n    background: #3b2d10; color: #ffd98a; white-space: pre-wrap;\n}\n.omni-video__warning[hidden] { display: none; }\n";