omni-viewer-core 0.1.0

package/dist/viewers/audio/index.js

@@ -0,0 +1,448 @@
+import { parseAudioInfo } from '../../parsers/audio/index.js';
+import { mountMediaViewer } from '../media.js';
+import { MountAbortedError, VIEWER_ROOT_CLASS } from '../types.js';
+import { createAudioController } from './controller.js';
+import { encodeWavFromFloat32 } from './engine.js';
+import { audioViewerCss } from './styles.js';
+import { formatMediaTime } from '../video/controller.js';
+export { parseAudioInfo } from '../../parsers/audio/index.js';
+export { audioViewerCss } from './styles.js';
+export { createAudioController, AUDIO_MIN_ZOOM, AUDIO_MAX_ZOOM } from './controller.js';
+export { createAssetAudioEngine, createWasmAudioEngine, encodeWavFromFloat32 } from './engine.js';
+export const AUDIO_VIEWER_META = {
+    id: 'audio',
+    displayNameKey: 'audio.title',
+    extensions: ['mp3', 'wav', 'pcm', 'aiff', 'aif', 'aifc', 'amr', 'awb', 'ogg', 'flac', 'ac3', 'aac', 'm4a'],
+    priority: 20,
+    requiredServices: [],
+    optionalServices: [],
+    inputOwnership: 'borrows'
+};
+const DEFAULT_MAX_BYTES = 128 * 1024 * 1024;
+const DEFAULT_ANALYZE_BYTES = 50 * 1024 * 1024;
+const ANALYZE_PEAK_COLUMNS = 8000;
+const REGION_COLOR = 'rgba(79,193,255,0.25)';
+export async function mountAudioViewer(input, container, ctx, options = {}) {
+    if (options.signal?.aborted)
+        throw new MountAbortedError();
+    const info = parseAudioInfo(input.fileName, input.data);
+    // No engine, engine failed to load, or the file is not mountable as a
+    // waveform → the plain media player remains the universal fallback.
+    const fallback = (extraWarning) => mountMediaViewer('audio', input, container, ctx, info.mimeType, extraWarning ? [...info.warnings, extraWarning] : info.warnings, options);
+    if (!options.deps)
+        return fallback();
+    const maxBytes = options.maxBytes ?? DEFAULT_MAX_BYTES;
+    if (input.data.byteLength === 0 || input.data.byteLength > maxBytes)
+        return fallback();
+    let library;
+    try {
+        library = await options.deps.loadWaveform();
+    }
+    catch {
+        return fallback(ctx.i18n.t('audio.fallback'));
+    }
+    if (options.signal?.aborted)
+        throw new MountAbortedError();
+    return mountWaveformViewer(input, container, ctx, info, library, options.deps, options);
+}
+async function mountWaveformViewer(input, container, ctx, info, library, deps, options) {
+    const t = (key, args) => ctx.i18n.t(key, args);
+    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--audio');
+    else {
+        const style = document.createElement('style');
+        style.textContent = audioViewerCss;
+        root.append(style);
+    }
+    const controller = createAudioController();
+    const disposers = [];
+    let surferDisposers = [];
+    const listen = (target, type, handler) => {
+        target.addEventListener(type, handler);
+        disposers.push(() => target.removeEventListener(type, handler));
+    };
+    const wsOn = (handle, event, callback) => {
+        const off = handle.on(event, callback);
+        if (typeof off === 'function')
+            surferDisposers.push(off);
+    };
+    const shell = element('section', `${VIEWER_ROOT_CLASS} omni-audio`);
+    const header = element('header', 'omni-audio__header');
+    header.append(element('div', 'omni-audio__title', input.fileName), element('div', 'omni-audio__meta', `${info.mimeType} · ${formatBytes(input.data.byteLength)}`));
+    const infoPanel = element('div', 'omni-audio__info');
+    const durationValue = infoItem(infoPanel, t('audio.info.duration'));
+    const sampleRateValue = infoItem(infoPanel, t('audio.info.sampleRate'));
+    const channelsValue = infoItem(infoPanel, t('audio.info.channels'));
+    const bitDepthValue = infoItem(infoPanel, t('audio.info.bitDepth'));
+    const formatValue = infoItem(infoPanel, t('audio.info.format'));
+    const sizeValue = infoItem(infoPanel, t('audio.info.fileSize'));
+    formatValue.textContent = info.format;
+    sizeValue.textContent = formatBytes(input.data.byteLength);
+    if (info.sampleRate)
+        sampleRateValue.textContent = `${info.sampleRate.toLocaleString()} Hz`;
+    if (info.channels)
+        channelsValue.textContent = channelLabel(info.channels);
+    if (info.bitsPerSample)
+        bitDepthValue.textContent = `${info.bitsPerSample}-bit`;
+    const controls = element('div', 'omni-audio__controls');
+    const playPause = button(t('audio.play'));
+    const stop = button(t('audio.stop'));
+    const loop = button(t('audio.loop'));
+    const clearRegions = button(t('audio.clearRegions'));
+    const transport = element('div', 'omni-audio__group');
+    transport.append(playPause, stop, loop, clearRegions);
+    const volumeGroup = element('div', 'omni-audio__group');
+    const volumeLabel = element('label', 'omni-audio__group-label', t('audio.volume'));
+    const volume = document.createElement('input');
+    volume.type = 'range';
+    volume.min = '0';
+    volume.max = '100';
+    volume.value = '100';
+    volume.className = 'omni-audio__slider';
+    volumeLabel.append(volume);
+    volumeGroup.append(volumeLabel);
+    const zoomGroup = element('div', 'omni-audio__group');
+    const zoomOut = button('−', t('audio.zoomOut'));
+    const zoomLabel = element('span', 'omni-audio__zoom-label', '×1');
+    const zoomIn = button('+', t('audio.zoomIn'));
+    const zoomFit = button(t('audio.zoomFit'));
+    zoomGroup.append(element('span', 'omni-audio__group-label', t('audio.zoom')), zoomOut, zoomLabel, zoomIn, zoomFit);
+    const visGroup = element('div', 'omni-audio__group');
+    const visLabel = element('label', 'omni-audio__group-label', t('audio.visualization'));
+    const visSelect = document.createElement('select');
+    visSelect.className = 'omni-audio__select';
+    for (const [value, key] of [['waveform', 'audio.vis.waveform'], ['spectrogram', 'audio.vis.spectrogram']]) {
+        const option = document.createElement('option');
+        option.value = value;
+        option.textContent = t(key);
+        visSelect.append(option);
+    }
+    if (!library.createSpectrogram)
+        visSelect.disabled = true;
+    visLabel.append(visSelect);
+    visGroup.append(visLabel);
+    const time = element('span', 'omni-audio__time', '0:00 / 0:00');
+    controls.append(transport, volumeGroup, zoomGroup, visGroup, time);
+    const stage = element('div', 'omni-audio__stage');
+    const loading = element('div', 'omni-audio__loading', t('audio.loading'));
+    const timeline = element('div', 'omni-audio__timeline');
+    const waveform = element('div', 'omni-audio__waveform');
+    const spectrogram = element('div', 'omni-audio__spectrogram');
+    stage.append(loading, timeline, waveform, spectrogram);
+    const status = element('div', 'omni-audio__status');
+    const warning = element('div', 'omni-audio__warning');
+    warning.hidden = info.warnings.length === 0;
+    warning.textContent = info.warnings.join('\n');
+    shell.append(header, infoPanel, controls, stage, status, warning);
+    root.append(shell);
+    let url;
+    let surfer;
+    let regions;
+    let spectrogramPlugin;
+    let selectedRegion = null;
+    let ready = false;
+    let disposed = false;
+    let engineTried = false;
+    const createUrl = options.createObjectUrl ?? URL.createObjectURL.bind(URL);
+    const revoke = options.revokeObjectUrl ?? URL.revokeObjectURL.bind(URL);
+    const showWarning = (message) => {
+        warning.hidden = false;
+        warning.textContent = [...info.warnings, message].filter(Boolean).join('\n');
+    };
+    const setControlsEnabled = (enabled) => {
+        for (const control of [playPause, stop, loop, clearRegions, volume, zoomOut, zoomIn, zoomFit]) {
+            control.disabled = !enabled;
+        }
+        if (library.createSpectrogram)
+            visSelect.disabled = !enabled;
+    };
+    setControlsEnabled(false);
+    const refreshTime = () => {
+        if (!surfer)
+            return;
+        time.textContent = `${formatMediaTime(surfer.getCurrentTime())} / ${formatMediaTime(surfer.getDuration())}`;
+    };
+    const refreshStatus = () => {
+        if (selectedRegion) {
+            status.textContent = t('audio.status.region', {
+                start: formatMediaTime(selectedRegion.start),
+                end: formatMediaTime(selectedRegion.end),
+                duration: (selectedRegion.end - selectedRegion.start).toFixed(2)
+            }) + (controller.state.loop ? ` · ${t('audio.status.looping')}` : '');
+        }
+        else {
+            status.textContent = controller.state.loop ? t('audio.status.loopTrack') : '';
+        }
+    };
+    const basePxPerSec = () => {
+        const width = waveform.clientWidth || 800;
+        const duration = surfer?.getDuration() || 0;
+        return duration > 0 ? Math.max(1, width / duration) : 1;
+    };
+    const applyVisualization = (mode) => {
+        if (!surfer)
+            return;
+        if (mode === 'spectrogram' && !spectrogramPlugin && library.createSpectrogram) {
+            const decoded = surfer.getDecodedData();
+            spectrogramPlugin = surfer.registerPlugin(library.createSpectrogram({
+                container: spectrogram, labels: true, height: 200,
+                splitChannels: (decoded?.numberOfChannels ?? 1) > 1
+            }));
+        }
+        if (mode === 'waveform' && spectrogramPlugin) {
+            spectrogramPlugin.destroy?.();
+            spectrogramPlugin = undefined;
+            spectrogram.replaceChildren();
+        }
+        spectrogram.classList.toggle('omni-audio__spectrogram--active', mode === 'spectrogram');
+    };
+    const applyState = (state) => {
+        if (!surfer)
+            return;
+        surfer.setVolume(state.volume);
+        volume.value = String(Math.round(state.volume * 100));
+        zoomLabel.textContent = `×${state.zoom}`;
+        loop.classList.toggle('is-active', state.loop);
+        if (ready)
+            surfer.zoom(basePxPerSec() * state.zoom);
+        applyVisualization(state.visualization);
+        visSelect.value = state.visualization;
+        refreshStatus();
+    };
+    disposers.push(controller.subscribe(applyState));
+    const teardownSurfer = () => {
+        for (const dispose of surferDisposers.splice(0)) {
+            try {
+                dispose();
+            }
+            catch { /* engine own teardown */ }
+        }
+        spectrogramPlugin?.destroy?.();
+        spectrogramPlugin = undefined;
+        try {
+            surfer?.destroy();
+        }
+        catch { /* already torn down */ }
+        surfer = undefined;
+        regions = undefined;
+        selectedRegion = null;
+        ready = false;
+        waveform.replaceChildren();
+        timeline.replaceChildren();
+        spectrogram.replaceChildren();
+    };
+    const onDecodeFailure = () => {
+        if (deps.engine && !engineTried) {
+            engineTried = true;
+            void rebuildViaEngine();
+            return;
+        }
+        loading.remove();
+        showWarning(t('audio.error.decode'));
+    };
+    // Decode in WASM, remux as 16-bit WAV, and rebuild the surfer on a
+    // stream every browser can play.
+    async function rebuildViaEngine() {
+        try {
+            const decoded = await deps.engine.decode(input.data);
+            if (disposed)
+                return;
+            const wav = encodeWavFromFloat32(decoded.pcm, decoded.channels, decoded.sampleRate);
+            teardownSurfer();
+            if (url) {
+                revoke(url);
+                url = undefined;
+            }
+            url = createUrl(new Blob([blobPart(wav)], { type: 'audio/wav' }));
+            if (!buildSurfer({ url }))
+                onDecodeFailure();
+        }
+        catch {
+            if (disposed)
+                return;
+            loading.remove();
+            showWarning(t('audio.error.decode'));
+        }
+    }
+    function buildSurfer(source) {
+        try {
+            surfer = library.createWaveSurfer({
+                container: waveform, height: 128, normalize: true,
+                waveColor: '#4fc1ff', progressColor: '#0e639c', cursorColor: '#ffffff',
+                ...source
+            });
+        }
+        catch {
+            return false;
+        }
+        if (library.createTimeline)
+            surfer.registerPlugin(library.createTimeline({ container: timeline }));
+        if (library.createRegions) {
+            regions = surfer.registerPlugin(library.createRegions());
+            regions.enableDragSelection({ color: REGION_COLOR });
+            wsOn(regions, 'region-created', (payload) => {
+                selectedRegion = payload;
+                refreshStatus();
+            });
+            wsOn(regions, 'region-clicked', (payload) => {
+                selectedRegion = payload;
+                refreshStatus();
+            });
+            wsOn(regions, 'region-out', (payload) => {
+                const region = payload;
+                if (controller.state.loop && selectedRegion && region.id === selectedRegion.id)
+                    region.play();
+            });
+        }
+        wsOn(surfer, 'ready', () => {
+            ready = true;
+            loading.remove();
+            setControlsEnabled(true);
+            const decoded = surfer.getDecodedData();
+            durationValue.textContent = formatMediaTime(surfer.getDuration());
+            if (decoded) {
+                sampleRateValue.textContent = `${decoded.sampleRate.toLocaleString()} Hz`;
+                channelsValue.textContent = channelLabel(decoded.numberOfChannels);
+            }
+            refreshTime();
+            applyState(controller.state);
+        });
+        wsOn(surfer, 'play', () => { playPause.textContent = t('audio.pause'); });
+        wsOn(surfer, 'pause', () => { playPause.textContent = t('audio.play'); });
+        wsOn(surfer, 'timeupdate', refreshTime);
+        wsOn(surfer, 'finish', () => {
+            playPause.textContent = t('audio.play');
+            if (controller.state.loop && !selectedRegion && surfer) {
+                surfer.setTime(0);
+                void surfer.playPause();
+            }
+        });
+        wsOn(surfer, 'error', onDecodeFailure);
+        return true;
+    }
+    try {
+        url = createUrl(new Blob([blobPart(input.data)], { type: info.mimeType }));
+    }
+    catch {
+        teardownShell();
+        return mountMediaViewer('audio', input, container, ctx, info.mimeType, info.warnings, options);
+    }
+    // Large files: analyze peaks in WASM so WaveSurfer skips the expensive
+    // (and memory-hungry) browser decode and streams via a media element.
+    let initialSource = { url };
+    const analyzeBytes = options.engineAnalyzeBytes ?? DEFAULT_ANALYZE_BYTES;
+    if (deps.engine && input.data.byteLength > analyzeBytes) {
+        try {
+            const analysis = await deps.engine.analyze(input.data, ANALYZE_PEAK_COLUMNS);
+            if (options.signal?.aborted) {
+                teardownShell();
+                if (url)
+                    revoke(url);
+                throw new MountAbortedError();
+            }
+            initialSource = { url, peaks: [analysis.peaks], duration: analysis.duration };
+            sampleRateValue.textContent = `${analysis.sampleRate.toLocaleString()} Hz`;
+            channelsValue.textContent = channelLabel(analysis.channels);
+            durationValue.textContent = formatMediaTime(analysis.duration);
+        }
+        catch (error) {
+            if (error instanceof MountAbortedError)
+                throw error;
+            // Analysis is an optimization — fall through to normal decode.
+        }
+    }
+    if (!buildSurfer(initialSource)) {
+        if (url)
+            revoke(url);
+        teardownShell();
+        return mountMediaViewer('audio', input, container, ctx, info.mimeType, [...info.warnings, ctx.i18n.t('audio.fallback')], options);
+    }
+    listen(playPause, 'click', () => { void surfer?.playPause(); });
+    listen(stop, 'click', () => { surfer?.stop(); playPause.textContent = t('audio.play'); refreshTime(); });
+    listen(loop, 'click', () => controller.dispatch({ type: 'toggle-loop' }));
+    listen(clearRegions, 'click', () => {
+        regions?.clearRegions();
+        selectedRegion = null;
+        refreshStatus();
+    });
+    listen(volume, 'input', () => controller.dispatch({ type: 'set-volume', volume: Number(volume.value) / 100 }));
+    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(visSelect, 'change', () => controller.dispatch({
+        type: 'set-visualization',
+        visualization: visSelect.value
+    }));
+    if (options.signal?.aborted) {
+        cleanup();
+        throw new MountAbortedError();
+    }
+    function teardownShell() {
+        shell.remove();
+        if (root === container)
+            container.classList.remove(VIEWER_ROOT_CLASS, 'omni-viewer--audio');
+        else
+            root.replaceChildren();
+    }
+    function cleanup() {
+        disposers.forEach((dispose) => dispose());
+        teardownSurfer();
+        if (url) {
+            revoke(url);
+            url = undefined;
+        }
+        teardownShell();
+    }
+    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-audio__btn';
+    node.textContent = label;
+    if (title)
+        node.title = title;
+    return node;
+}
+function infoItem(panel, label) {
+    const item = element('div', 'omni-audio__info-item');
+    const value = element('div', 'omni-audio__info-value', '--');
+    item.append(element('div', 'omni-audio__info-label', label), value);
+    panel.append(item);
+    return value;
+}
+function channelLabel(channels) {
+    return channels === 1 ? '1 (mono)' : channels === 2 ? '2 (stereo)' : String(channels);
+}
+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/audio/self-loading.d.ts

@@ -0,0 +1,7 @@
+import type { MountOptions, ViewerHandle, ViewerInput } from '../types.js';
+import { type AudioMountOptions, type AudioViewerContext, type AudioViewerDeps } from './index.js';
+export * from './index.js';
+export declare const selfLoadingAudioDeps: AudioViewerDeps;
+/** mountAudioViewer with the core's own dynamic-import waveform loader and
+ *  the AssetService-served WASM decode engine (assets/audio-engine/*). */
+export declare function mountSelfLoadingAudioViewer(input: ViewerInput, container: HTMLElement, ctx: AudioViewerContext, options?: MountOptions & Omit<AudioMountOptions, 'deps'>): Promise<ViewerHandle>;

package/dist/viewers/audio/self-loading.js

@@ -0,0 +1,42 @@
+// Opt-in self-loading entry (ADR 14): the only place in the core where the
+// optional peer `wavesurfer.js` is actually imported. Platforms whose bundler
+// resolves the peer use this; others import `viewers/audio` and inject their
+// own AudioViewerDeps.
+import { createAssetAudioEngine, mountAudioViewer } from './index.js';
+export * from './index.js';
+const staticOf = (module) => {
+    const mod = module;
+    return (mod.default ?? mod);
+};
+export const selfLoadingAudioDeps = {
+    async loadWaveform() {
+        const WaveSurfer = staticOf(await import('wavesurfer.js'));
+        const [regionsResult, timelineResult, spectrogramResult] = await Promise.allSettled([
+            import('wavesurfer.js/dist/plugins/regions.esm.js'),
+            import('wavesurfer.js/dist/plugins/timeline.esm.js'),
+            import('wavesurfer.js/dist/plugins/spectrogram.esm.js')
+        ]);
+        const library = {
+            createWaveSurfer: (options) => WaveSurfer.create(options)
+        };
+        if (regionsResult.status === 'fulfilled') {
+            const Regions = staticOf(regionsResult.value);
+            library.createRegions = () => Regions.create();
+        }
+        if (timelineResult.status === 'fulfilled') {
+            const Timeline = staticOf(timelineResult.value);
+            library.createTimeline = (options) => Timeline.create(options);
+        }
+        if (spectrogramResult.status === 'fulfilled') {
+            const Spectrogram = staticOf(spectrogramResult.value);
+            library.createSpectrogram = (options) => Spectrogram.create(options);
+        }
+        return library;
+    }
+};
+/** mountAudioViewer with the core's own dynamic-import waveform loader and
+ *  the AssetService-served WASM decode engine (assets/audio-engine/*). */
+export function mountSelfLoadingAudioViewer(input, container, ctx, options = {}) {
+    const deps = { ...selfLoadingAudioDeps, engine: createAssetAudioEngine(ctx) };
+    return mountAudioViewer(input, container, ctx, { ...options, deps });
+}

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

@@ -0,0 +1 @@
+export declare const audioViewerCss: string;

package/dist/viewers/audio/styles.js

@@ -0,0 +1,73 @@
+// Audio viewer stylesheet. Single source for both delivery forms (DESIGN.md
+// §6): the build emits dist/styles/audio.css from this constant, and the
+// renderer injects it into the shadow root. Only --omni-* tokens.
+// The media-viewer sheet is included because the audio viewer falls back to
+// the plain media player when no waveform engine is available.
+import { mediaViewerCss } from '../media.js';
+export const audioViewerCss = mediaViewerCss + `
+/* Reverse-contamination guard (DESIGN.md §6). */
+.omni-viewer--audio {
+    all: initial;
+}
+.omni-viewer--audio :where(button, select, option, input, label, audio) {
+    all: revert;
+}
+
+:host, .omni-viewer--audio {
+    display: block;
+    height: 100%;
+    box-sizing: border-box;
+    color: var(--omni-fg, #d4d4d4);
+    background: var(--omni-bg, #1e1e1e);
+    font-family: var(--omni-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
+    font-size: var(--omni-font-size, 13px);
+}
+
+.omni-audio { display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; min-height: 100%; padding: 16px; }
+.omni-audio * { box-sizing: border-box; }
+
+.omni-audio__header { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
+.omni-audio__title { font-size: 16px; font-weight: 650; overflow-wrap: anywhere; }
+.omni-audio__meta { color: var(--omni-muted, #9d9d9d); white-space: nowrap; }
+
+.omni-audio__info { display: flex; flex-wrap: wrap; gap: 18px; padding: 6px 10px; border: 1px solid var(--omni-border, #444); border-radius: 6px; background: var(--omni-panel-bg, #252526); }
+.omni-audio__info-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
+.omni-audio__info-label { font-size: 10px; opacity: 0.7; }
+.omni-audio__info-value { font-family: var(--omni-mono, ui-monospace, Menlo, monospace); font-weight: 500; }
+
+.omni-audio__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); }
+.omni-audio__group { display: flex; align-items: center; gap: 6px; }
+.omni-audio__group-label { font-size: 12px; color: var(--omni-muted, #9d9d9d); }
+
+.omni-audio__btn {
+    background: var(--omni-accent, #0e639c); color: var(--omni-accent-fg, #fff);
+    border: none; padding: 5px 11px; border-radius: 4px; cursor: pointer; font-size: 12px; font-family: inherit;
+}
+.omni-audio__btn:hover { background: var(--omni-accent-hover, #1177bb); }
+.omni-audio__btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.omni-audio__btn.is-active { outline: 2px solid var(--omni-focus, #007fd4); }
+
+.omni-audio__select {
+    background: var(--omni-input-bg, #3c3c3c); color: var(--omni-fg, #d4d4d4);
+    border: 1px solid var(--omni-border, #444); padding: 4px 8px; border-radius: 4px; font-size: 12px; font-family: inherit;
+}
+.omni-audio__slider { width: 90px; }
+.omni-audio__zoom-label { font-family: var(--omni-mono, ui-monospace, Menlo, monospace); font-size: 12px; min-width: 34px; text-align: center; color: var(--omni-muted, #9d9d9d); }
+.omni-audio__time { font-family: var(--omni-mono, ui-monospace, Menlo, monospace); font-size: 12px; min-width: 100px; }
+
+.omni-audio__stage { border: 1px solid var(--omni-border, #444); border-radius: 8px; background: var(--omni-panel-bg, #202021); padding: 12px; overflow: hidden; }
+.omni-audio__timeline { min-height: 20px; }
+.omni-audio__waveform { min-height: 128px; }
+.omni-audio__spectrogram { min-height: 0; }
+.omni-audio__spectrogram--active { min-height: 200px; }
+
+.omni-audio__status { color: var(--omni-muted, #9d9d9d); font-size: 12px; min-height: 16px; }
+
+.omni-audio__loading { display: flex; justify-content: center; align-items: center; min-height: 120px; color: var(--omni-muted, #9d9d9d); }
+
+.omni-audio__warning {
+    padding: 10px 12px; border: 1px solid #b98b2f; border-radius: 7px;
+    background: #3b2d10; color: #ffd98a; white-space: pre-wrap;
+}
+.omni-audio__warning[hidden] { display: none; }
+`;

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

@@ -0,0 +1,8 @@
+import type { ClipboardService, HostContext } from '../../host/index.js';
+import { type AutomotiveFormat } from '../../parsers/automotive/index.js';
+import { type MountOptions, type ViewerHandle, type ViewerInput } from '../types.js';
+export { automotiveViewerCss } from './styles.js';
+export type AutomotiveViewerContext = HostContext & {
+    clipboard?: ClipboardService;
+};
+export declare function mountAutomotiveViewer(format: AutomotiveFormat, input: ViewerInput, container: HTMLElement, ctx: AutomotiveViewerContext, options?: MountOptions): Promise<ViewerHandle>;