omni-viewer-core 0.1.0

package/dist/viewers/ppt/chart.js

@@ -0,0 +1,83 @@
+const finite = (value) => typeof value === 'number' && Number.isFinite(value);
+export function computeChartBounds(data) { const explicitMin = data.valueAxis?.min, explicitMax = data.valueAxis?.max; if (data.kind === 'stackedColumn') {
+    const positive = data.categories.map((_, i) => data.series.reduce((sum, s) => sum + Math.max(0, s.values[i] ?? 0), 0)), negative = data.categories.map((_, i) => data.series.reduce((sum, s) => sum + Math.min(0, s.values[i] ?? 0), 0));
+    const min = finite(explicitMin) ? explicitMin : Math.min(0, ...negative), max = finite(explicitMax) ? explicitMax : Math.max(1, ...positive);
+    return min < max ? { min, max } : { min, max: min + 1 };
+} const values = data.series.flatMap(s => s.values).filter(finite); let min = finite(explicitMin) ? explicitMin : Math.min(0, ...values), max = finite(explicitMax) ? explicitMax : Math.max(1, ...values); if (min >= max) {
+    const pad = Math.max(1, Math.abs(max || 1) * .1);
+    min -= pad;
+    max += pad;
+} return { min, max }; }
+const decimals = (format) => format?.match(/0\.([0#]+)/)?.[1]?.length ?? 0;
+export function formatChartValue(value, format) { const places = decimals(format), fixed = Math.abs(value).toFixed(places), parts = fixed.split('.'), whole = (parts[0] ?? '0').replace(/\B(?=(\d{3})+(?!\d))/g, ','), numeric = parts[1] === undefined ? whole : `${whole}.${parts[1]}`, prefixed = format?.includes('$') ? `$${numeric}` : numeric; if (value >= 0)
+    return prefixed; return format && /;\s*\\?\(.*0/.test(format) ? `(${prefixed})` : `-${prefixed}`; }
+const niceStep = (span) => { const rough = Math.max(span, 1e-6) / 8, p = 10 ** Math.floor(Math.log10(rough)), n = rough / p; return (n > 5 ? 10 : n > 2 ? 5 : n > 1 ? 2 : 1) * p; };
+function legend(ctx, w, h, data, line) { const style = data.legend ?? {}, font = Math.max(10, style.fontSizePx ?? 12), items = data.series.map((s, i) => ({ color: s.color || '#999999', label: s.name || `Series ${i + 1}` })), swatch = line ? 18 : 10, gap = 22, total = items.reduce((n, item) => n + swatch + 6 + item.label.length * font * .55 + gap, 0); let x = Math.max(8, (w - total) / 2); ctx.font = `400 ${font}px Arial, sans-serif`; ctx.textAlign = 'left'; ctx.textBaseline = 'alphabetic'; for (const item of items) {
+    if (line) {
+        ctx.strokeStyle = item.color;
+        ctx.lineWidth = 2.5;
+        ctx.beginPath();
+        ctx.moveTo(x, h - 11);
+        ctx.lineTo(x + swatch, h - 11);
+        ctx.stroke();
+    }
+    else {
+        ctx.fillStyle = item.color;
+        ctx.fillRect(x, h - 16, swatch, swatch);
+    }
+    x += swatch + 6;
+    ctx.fillStyle = style.color ?? '#222222';
+    ctx.fillText(item.label, x, h - 7);
+    x += item.label.length * font * .55 + gap;
+} }
+function axes(ctx, w, h, data, bounds) { const m = { left: 74, right: 20, top: 20, bottom: 88 }, pw = w - m.left - m.right, ph = h - m.top - m.bottom, axis = data.valueAxis ?? {}, format = axis.numFmt ?? (data.kind === 'stackedColumn' ? '$#,##0.0' : '0.0'), step = finite(axis.majorUnit) && axis.majorUnit > 0 ? axis.majorUnit : niceStep(bounds.max - bounds.min), y = (value) => m.top + (bounds.max - value) / (bounds.max - bounds.min) * ph; ctx.strokeStyle = axis.gridColor ?? 'rgba(0,0,0,0.22)'; ctx.lineWidth = 1; for (let tick = Math.floor(bounds.min / step) * step, count = 0; tick <= bounds.max + step * .5 && count++ < 250; tick += step) {
+    const py = y(tick);
+    ctx.beginPath();
+    ctx.moveTo(m.left, py);
+    ctx.lineTo(m.left + pw, py);
+    ctx.stroke();
+    ctx.fillStyle = axis.color ?? '#222222';
+    ctx.font = `400 ${Math.max(10, axis.fontSizePx ?? 11)}px Arial, sans-serif`;
+    ctx.textAlign = 'right';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(formatChartValue(tick, format), m.left - 12, py);
+} const cross = finite(axis.crossesAt) ? axis.crossesAt : 0; ctx.strokeStyle = axis.lineColor ?? '#111111'; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(m.left, y(cross)); ctx.lineTo(m.left + pw, y(cross)); ctx.stroke(); return { ...m, pw, ph, y, format }; }
+function label(ctx, series, value, x, y, height, axisFormat) { const style = series.dataLabel ?? {}; if (style.showValue === false || Math.abs(value) < .1 || height <= 12)
+    return; ctx.fillStyle = style.color ?? '#ffffff'; ctx.font = `400 ${Math.max(9, style.fontSizePx ?? 11)}px Arial, sans-serif`; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(formatChartValue(value, style.numFmt ?? series.valueFormat ?? axisFormat), x, y); }
+function stacked(ctx, w, h, data, bounds) { const a = axes(ctx, w, h, data, bounds), group = a.pw / data.categories.length, gap = finite(data.gapWidth) ? Math.max(.2, Math.min(.9, 1 - data.gapWidth / 300)) : .58, bar = Math.max(8, group * gap), category = data.categoryAxis ?? {}; data.categories.forEach((name, i) => { const cx = a.left + group * i + group / 2; let pos = 0, neg = 0; for (const series of data.series) {
+    const value = series.values[i] ?? 0;
+    if (!finite(value) || value === 0)
+        continue;
+    const from = value >= 0 ? pos : neg;
+    if (value >= 0)
+        pos += value;
+    else
+        neg += value;
+    const to = value >= 0 ? pos : neg, top = Math.min(a.y(from), a.y(to)), height = Math.max(1, Math.abs(a.y(from) - a.y(to)));
+    ctx.fillStyle = series.color || '#d10000';
+    ctx.fillRect(cx - bar / 2, top, bar, height);
+    label(ctx, series, value, cx, top + height / 2, height, a.format);
+} ctx.fillStyle = category.color ?? '#222222'; ctx.font = `400 ${Math.max(10, category.fontSizePx ?? 11)}px Arial, sans-serif`; ctx.textAlign = 'center'; ctx.textBaseline = 'alphabetic'; ctx.fillText(name, cx, h - 16); }); legend(ctx, w, h, data, false); }
+function line(ctx, w, h, data, bounds) { const a = axes(ctx, w, h, data, bounds), x = (i) => data.categories.length === 1 ? a.left + a.pw / 2 : a.left + a.pw * i / Math.max(1, data.categories.length - 1), category = data.categoryAxis ?? {}; data.categories.forEach((name, i) => { ctx.fillStyle = category.color ?? '#222222'; ctx.font = `400 ${Math.max(10, category.fontSizePx ?? 11)}px Arial, sans-serif`; ctx.textAlign = 'center'; ctx.textBaseline = 'alphabetic'; ctx.fillText(name, x(i), h - 16); }); data.series.forEach((series, seriesIndex) => { const points = series.values.map((value, i) => ({ value, i })).filter(point => finite(point.value)); if (!points.length)
+    return; ctx.strokeStyle = series.color || '#4472c4'; ctx.lineWidth = 3; ctx.beginPath(); points.forEach((point, i) => i ? ctx.lineTo(x(point.i), a.y(point.value)) : ctx.moveTo(x(point.i), a.y(point.value))); ctx.stroke(); for (const point of points) {
+    const px = x(point.i), py = a.y(point.value);
+    ctx.fillStyle = '#fff';
+    ctx.beginPath();
+    ctx.arc(px, py, 4.5, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.strokeStyle = series.color || '#4472c4';
+    ctx.stroke();
+    const style = series.dataLabel ?? {};
+    if (style.showValue !== false) {
+        ctx.fillStyle = style.color ?? series.color ?? '#222';
+        ctx.font = `600 ${Math.max(9, style.fontSizePx ?? 11)}px Arial, sans-serif`;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'bottom';
+        ctx.fillText(formatChartValue(point.value, style.numFmt ?? series.valueFormat ?? a.format), px, py - 10 - seriesIndex * 2);
+    }
+} }); legend(ctx, w, h, data, true); }
+export function drawChart(canvas, data) { const ctx = canvas.getContext('2d'); if (!ctx || !data.categories.length || !data.series.length)
+    return; ctx.clearRect(0, 0, canvas.width, canvas.height); const bounds = computeChartBounds(data); if (data.kind === 'stackedColumn')
+    stacked(ctx, canvas.width, canvas.height, data, bounds);
+else
+    line(ctx, canvas.width, canvas.height, data, bounds); }

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

@@ -0,0 +1,34 @@
+export type PptRenderMode = 'continuous' | 'single';
+export interface PptViewState {
+    currentSlide: number;
+    zoom: number;
+    mode: PptRenderMode;
+    slideCount: number;
+}
+export type PptAction = {
+    type: 'next';
+} | {
+    type: 'previous';
+} | {
+    type: 'jump';
+    slide: number;
+} | {
+    type: 'zoom-in';
+} | {
+    type: 'zoom-out';
+} | {
+    type: 'reset-zoom';
+} | {
+    type: 'set-mode';
+    mode: PptRenderMode;
+};
+export interface PptController {
+    readonly state: PptViewState;
+    dispatch(action: PptAction): void;
+    subscribe(listener: (state: PptViewState) => void): () => void;
+}
+export declare const PPT_CONTINUOUS_THRESHOLD = 100;
+export declare const PPT_MIN_ZOOM = 0.25;
+export declare const PPT_MAX_ZOOM = 4;
+export declare const PPT_ZOOM_STEP = 0.1;
+export declare function createPptController(slideCount: number): PptController;

package/dist/viewers/ppt/controller.js

@@ -0,0 +1,27 @@
+export const PPT_CONTINUOUS_THRESHOLD = 100;
+export const PPT_MIN_ZOOM = 0.25;
+export const PPT_MAX_ZOOM = 4;
+export const PPT_ZOOM_STEP = 0.1;
+export function createPptController(slideCount) { const count = Math.max(0, Math.floor(slideCount)); let currentSlide = count ? 1 : 0; let zoom = 1; let mode = count > PPT_CONTINUOUS_THRESHOLD ? 'single' : 'continuous'; const listeners = new Set(); const state = () => ({ currentSlide, zoom, mode, slideCount: count }); const emit = () => { const s = state(); listeners.forEach(l => l(s)); }; return { get state() { return state(); }, dispatch(a) { switch (a.type) {
+        case 'next':
+            currentSlide = Math.min(count, currentSlide + 1);
+            break;
+        case 'previous':
+            currentSlide = Math.max(count ? 1 : 0, currentSlide - 1);
+            break;
+        case 'jump':
+            currentSlide = count ? Math.max(1, Math.min(count, Math.floor(a.slide))) : 0;
+            break;
+        case 'zoom-in':
+            zoom = Math.min(PPT_MAX_ZOOM, Math.round((zoom + PPT_ZOOM_STEP) * 100) / 100);
+            break;
+        case 'zoom-out':
+            zoom = Math.max(PPT_MIN_ZOOM, Math.round((zoom - PPT_ZOOM_STEP) * 100) / 100);
+            break;
+        case 'reset-zoom':
+            zoom = 1;
+            break;
+        case 'set-mode':
+            mode = a.mode;
+            break;
+    } emit(); }, subscribe(l) { listeners.add(l); return () => listeners.delete(l); } }; }

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

@@ -0,0 +1,33 @@
+import type { HostContext } from '../../host/index.js';
+import { type PptxParserDeps } from '../../parsers/pptx/index.js';
+import type { SlideDeck } from '../../parsers/slide-model.js';
+import type { ParseOptions, ParseOutcome, ResourceLimits } from '../../parsers/types.js';
+import { type PdfJsModule } from '../pdf/index.js';
+import { type MountOptions, type ViewerInput } from '../types.js';
+import { type PptController } from './controller.js';
+export * from './controller.js';
+export { pptViewerCss } from './styles.js';
+export * from '../../parsers/slide-model.js';
+export declare const PPT_VIEWER_META: {
+    id: string;
+    displayNameKey: string;
+    extensions: string[];
+    priority: number;
+    requiredServices: readonly [];
+    optionalServices: readonly [];
+    inputOwnership: "borrows";
+};
+export interface PptViewerDeps extends Partial<PptxParserDeps> {
+    convertToPdf?(input: Uint8Array, signal?: AbortSignal): Promise<Uint8Array>;
+    loadPdfjs?(): Promise<PdfJsModule>;
+    parseLegacyPptx?(input: Uint8Array, options: ParseOptions): Promise<ParseOutcome<SlideDeck>>;
+}
+export interface PptViewerHandle {
+    readonly controller: PptController;
+    readonly mode: 'slides' | 'pdf';
+    dispose(): void;
+}
+export interface PptMountOptions extends MountOptions {
+    limits?: ResourceLimits;
+}
+export declare function mountPptViewer(input: ViewerInput, container: HTMLElement, ctx: HostContext, deps?: PptViewerDeps, options?: PptMountOptions): Promise<PptViewerHandle>;

package/dist/viewers/ppt/index.js

@@ -0,0 +1,101 @@
+import { parsePptBinaryVscode } from '../../parsers/ppt-binary/index.js';
+import { openPptxZip, parsePptx, parsePptxVscode } from '../../parsers/pptx/index.js';
+import { mountPdfViewer } from '../pdf/index.js';
+import { MountAbortedError, VIEWER_ROOT_CLASS } from '../types.js';
+import { createPptController } from './controller.js';
+import { renderSlide } from './render.js';
+import { pptViewerCss } from './styles.js';
+export * from './controller.js';
+export { pptViewerCss } from './styles.js';
+export * from '../../parsers/slide-model.js';
+export const PPT_VIEWER_META = { id: 'ppt', displayNameKey: 'ppt.title', extensions: ['pptx', 'ppt'], priority: 15, requiredServices: [], optionalServices: [], inputOwnership: 'borrows' };
+const el = (tag, cls, text) => { const value = document.createElement(tag); if (cls)
+    value.className = cls; if (text !== undefined)
+    value.textContent = text; return value; };
+const pdfName = (name) => name.replace(/\.pptx?$/i, '.pdf');
+async function mountPdfFallback(input, container, ctx, deps, options, originalMessageKey) {
+    if (!deps.convertToPdf)
+        throw new Error(ctx.i18n.t(originalMessageKey));
+    if (!deps.loadPdfjs)
+        throw new Error(ctx.i18n.t('diag.ppt.pdf-missing-dependency'));
+    const bytes = await deps.convertToPdf(input.data, options.signal);
+    if (options.signal?.aborted)
+        throw new MountAbortedError();
+    const pdf = await mountPdfViewer({ fileName: pdfName(input.fileName), data: bytes, ...(input.lastModified === undefined ? {} : { lastModified: input.lastModified }) }, container, ctx, { loadPdfjs: deps.loadPdfjs }, options);
+    return { controller: createPptController(0), mode: 'pdf', dispose: () => pdf.dispose() };
+}
+export async function mountPptViewer(input, container, ctx, deps = {}, options = {}) {
+    if (options.signal?.aborted)
+        throw new MountAbortedError();
+    const isPptx = input.fileName.toLowerCase().endsWith('.pptx');
+    const outcome = isPptx ? await parsePptxVscode(input.data, options) : await parsePptBinaryVscode(input.data, options);
+    if (options.signal?.aborted)
+        throw new MountAbortedError();
+    if (outcome.result.status === 'failed') {
+        if (outcome.result.failure.code !== 'invalid-format')
+            throw new Error(ctx.i18n.t(outcome.result.failure.messageKey, outcome.result.failure.args));
+        return mountPdfFallback(input, container, ctx, deps, options, outcome.result.failure.messageKey);
+    }
+    let deck = outcome.result.document;
+    if (deck.totalSlides === 0 || deck.slides.length === 0)
+        return mountPdfFallback(input, container, ctx, deps, options, 'diag.ppt.empty');
+    if (!deck.slides.some(slide => slide.elements.length > 0)) {
+        if (isPptx) {
+            const legacy = await (deps.parseLegacyPptx?.(input.data, options) ?? parsePptx(input.data, { openZip: openPptxZip }, options));
+            if (legacy.result.status !== 'failed' && legacy.result.document.slides.some(slide => slide.elements.length > 0))
+                deck = legacy.result.document;
+            else
+                return mountPdfFallback(input, container, ctx, deps, options, 'diag.ppt.empty');
+        }
+        else
+            return mountPdfFallback(input, container, ctx, deps, options, 'diag.ppt.empty');
+    }
+    const root = options.styleIsolation !== 'scoped' && typeof container.attachShadow === 'function' ? (container.shadowRoot ?? container.attachShadow({ mode: 'open' })) : container;
+    if (root === container)
+        container.classList.add(VIEWER_ROOT_CLASS, 'omni-viewer--ppt');
+    else {
+        root.replaceChildren();
+        const style = el('style');
+        style.textContent = pptViewerCss;
+        root.append(style);
+    }
+    const frame = el('section', 'omni-ppt'), toolbar = el('div', 'omni-ppt__toolbar'), prev = el('button', undefined, '‹'), next = el('button', undefined, '›'), jump = el('select'), count = el('span'), minus = el('button', undefined, '−'), plus = el('button', undefined, '+'), reset = el('button', undefined, '100%'), mode = el('button');
+    prev.setAttribute('aria-label', ctx.i18n.t('ppt.previous'));
+    next.setAttribute('aria-label', ctx.i18n.t('ppt.next'));
+    jump.setAttribute('aria-label', ctx.i18n.t('ppt.jump'));
+    deck.slides.forEach(slide => { const option = el('option'); option.value = String(slide.slideNumber); const title = slide.elements.find(element => element.isTitle)?.paragraphs?.map(paragraph => paragraph.text).join(' '); option.textContent = `Slide ${slide.slideNumber}${title ? `: ${title}` : ''}`; jump.append(option); });
+    toolbar.append(prev, next, jump, count, minus, plus, reset, mode);
+    const viewport = el('div', 'omni-ppt__viewport'), slides = el('div', 'omni-ppt__slides');
+    viewport.append(slides);
+    frame.append(toolbar, viewport);
+    root.append(frame);
+    const controller = createPptController(deck.totalSlides);
+    const render = (state = controller.state) => { count.textContent = `${state.currentSlide} / ${state.slideCount}`; reset.textContent = `${Math.round(state.zoom * 100)}%`; mode.textContent = ctx.i18n.t(state.mode === 'continuous' ? 'ppt.mode.single' : 'ppt.mode.continuous'); jump.value = String(state.currentSlide); slides.replaceChildren(); const shown = state.mode === 'single' ? deck.slides.filter(slide => slide.slideNumber === state.currentSlide) : deck.slides; shown.forEach(slide => slides.append(renderSlide(slide, state.zoom))); };
+    const scrollCurrent = () => { if (controller.state.mode !== 'continuous')
+        return; slides.querySelector(`[aria-label="Slide ${controller.state.currentSlide}"]`)?.scrollIntoView({ block: 'start' }); };
+    const navigate = (action) => { controller.dispatch(action); scrollCurrent(); };
+    const onKeydown = (event) => { if (!(event.ctrlKey || event.metaKey))
+        return; if (event.key === '=' || event.key === '+') {
+        event.preventDefault();
+        controller.dispatch({ type: 'zoom-in' });
+    }
+    else if (event.key === '-') {
+        event.preventDefault();
+        controller.dispatch({ type: 'zoom-out' });
+    }
+    else if (event.key === '0') {
+        event.preventDefault();
+        controller.dispatch({ type: 'reset-zoom' });
+    } };
+    const off = controller.subscribe(render);
+    prev.onclick = () => navigate({ type: 'previous' });
+    next.onclick = () => navigate({ type: 'next' });
+    jump.onchange = () => navigate({ type: 'jump', slide: Number(jump.value) });
+    minus.onclick = () => controller.dispatch({ type: 'zoom-out' });
+    plus.onclick = () => controller.dispatch({ type: 'zoom-in' });
+    reset.onclick = () => controller.dispatch({ type: 'reset-zoom' });
+    mode.onclick = () => controller.dispatch({ type: 'set-mode', mode: controller.state.mode === 'continuous' ? 'single' : 'continuous' });
+    document.addEventListener('keydown', onKeydown);
+    render();
+    return { controller, mode: 'slides', dispose() { off(); document.removeEventListener('keydown', onKeydown); frame.remove(); } };
+}

package/dist/viewers/ppt/render.d.ts

@@ -0,0 +1,5 @@
+import type { Slide, SlideElement } from '../../parsers/slide-model.js';
+export declare function getReadableTextColor(background: string): '#ffffff' | '#111111';
+export declare function presetGeomToSvgPath(preset: string | undefined, w: number, h: number): string | undefined;
+export declare function renderSlideElement(e: SlideElement, fallbackColor?: string): HTMLElement;
+export declare function renderSlide(slide: Slide, zoom: number): HTMLElement;

package/dist/viewers/ppt/render.js

@@ -0,0 +1,144 @@
+import { drawChart } from './chart.js';
+const HTML_NS = 'http://www.w3.org/1999/xhtml', SVG_NS = 'http://www.w3.org/2000/svg';
+const node = (tag, cls) => { const value = document.createElementNS(HTML_NS, tag); if (cls)
+    value.className = cls; return value; };
+const paragraphAlign = (value) => value === 'ctr' ? 'center' : value === 'r' ? 'right' : value === 'just' || value === 'dist' ? 'justify' : value === 'l' ? 'left' : value ?? '';
+export function getReadableTextColor(background) { const raw = background.replace('#', '').trim(), hex = raw.length === 3 ? raw.split('').map(value => value + value).join('') : raw; if (!/^[0-9a-f]{6}$/i.test(hex))
+    return '#111111'; const r = parseInt(hex.slice(0, 2), 16), g = parseInt(hex.slice(2, 4), 16), b = parseInt(hex.slice(4, 6), 16); return (.299 * r + .587 * g + .114 * b) / 255 < .58 ? '#ffffff' : '#111111'; }
+function frame(e, kind = e.type) { const box = node('div', `omni-ppt__element omni-ppt__${kind}`); Object.assign(box.style, { left: `${e.x}px`, top: `${e.y}px`, width: `${e.width}px`, height: `${e.height}px`, zIndex: String(e.zIndex), transform: `${e.rotateDeg ? `rotate(${e.rotateDeg}deg) ` : ''}${e.flipH ? 'scaleX(-1) ' : ''}${e.flipV ? 'scaleY(-1)' : ''}`.trim(), transformOrigin: 'top left' }); return box; }
+function applyParagraphStyle(target, p, e, fallbackColor) { const level = Math.max(0, p.level || 0), fontSize = p.fontSizePx ?? (e.isTitle ? 52 : Math.max(16, 24 - level * 2)); target.style.marginLeft = `${level * 16}px`; target.style.textAlign = paragraphAlign(p.align); target.style.fontSize = `${fontSize}px`; target.style.lineHeight = `${Math.max(18, Math.round(fontSize * 1.18))}px`; target.style.color = p.color ?? fallbackColor; target.style.fontWeight = p.bold ? '700' : '400'; if (p.italic)
+    target.style.fontStyle = 'italic'; if (e.textStylePreset === 'cover-title') {
+    target.style.fontFamily = "'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif";
+    target.style.fontWeight = p.bold ? '700' : '400';
+    target.style.letterSpacing = '-2px';
+    target.style.lineHeight = `${Math.max(24, Math.round(fontSize * .98))}px`;
+}
+else if (e.textStylePreset === 'cover-subtitle') {
+    target.style.fontFamily = "'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif";
+    target.style.fontWeight = p.bold ? '700' : '300';
+    target.style.letterSpacing = '-1px';
+    target.style.lineHeight = `${Math.max(20, Math.round(fontSize * 1.02))}px`;
+} }
+function textElement(e, fallbackColor) { const box = frame(e, 'text'); if (e.textStylePreset)
+    box.dataset.textPreset = e.textStylePreset; if (e.fillColor)
+    box.style.backgroundColor = e.fillColor; if (e.borderColor)
+    box.style.border = `${Math.max(1, e.borderWidthPx ?? 1)}px solid ${e.borderColor}`; const paragraphs = e.paragraphs ?? [], likelyList = !e.isTitle && paragraphs.length >= 3; for (const p of paragraphs) {
+    const line = node('p', 'omni-ppt__text-line');
+    applyParagraphStyle(line, p, e, fallbackColor);
+    if (p.bullet || (likelyList && p.text.trim())) {
+        const bullet = node('span', 'omni-ppt__bullet');
+        bullet.textContent = '•';
+        bullet.style.color = p.color ?? fallbackColor;
+        line.append(bullet);
+    }
+    if (p.runs?.length) {
+        for (const r of p.runs) {
+            const span = node('span');
+            span.textContent = r.text;
+            if (r.fontSizePx)
+                span.style.fontSize = `${r.fontSizePx}px`;
+            span.style.color = r.color ?? p.color ?? fallbackColor;
+            if (r.bold)
+                span.style.fontWeight = '700';
+            if (r.italic)
+                span.style.fontStyle = 'italic';
+            line.append(span);
+        }
+    }
+    else
+        line.append(document.createTextNode(p.text));
+    box.append(line);
+} return box; }
+function imageElement(e) { const box = frame(e, 'image'), img = node('img', 'omni-ppt__image'); img.src = e.src ?? ''; img.alt = ''; const crop = e.srcRect; if (crop && (crop.l || crop.t || crop.r || crop.b)) {
+    const visibleW = Math.max(1, 100 - crop.l - crop.r), visibleH = Math.max(1, 100 - crop.t - crop.b), scaleW = 100 / visibleW, scaleH = 100 / visibleH;
+    Object.assign(img.style, { position: 'absolute', width: `${100 * scaleW}%`, height: `${100 * scaleH}%`, left: `${-crop.l * scaleW}%`, top: `${-crop.t * scaleH}%`, objectFit: 'fill', maxWidth: 'none', maxHeight: 'none' });
+    box.style.overflow = 'hidden';
+} box.append(img); return box; }
+function tableElement(e) { const box = frame(e, 'table'), table = node('table', 'omni-ppt__table'); (e.tableRows ?? []).forEach((row, rowIndex) => { const tr = node('tr'); row.forEach(value => { const cell = node(rowIndex === 0 ? 'th' : 'td'); cell.textContent = value; tr.append(cell); }); table.append(tr); }); box.append(table); return box; }
+function chartElement(e) { const box = frame(e, 'chart'); if (e.chartData) {
+    const canvas = node('canvas');
+    canvas.width = Math.max(300, Math.floor(e.width));
+    canvas.height = Math.max(180, Math.floor(e.height));
+    canvas.style.width = '100%';
+    canvas.style.height = '100%';
+    box.append(canvas);
+    queueMicrotask(() => drawChart(canvas, e.chartData));
+}
+else {
+    box.textContent = e.chartTitle ?? (e.chartKind === 'smartart' ? 'SmartArt' : 'Chart');
+} return box; }
+export function presetGeomToSvgPath(preset, w, h) { if (!preset || w <= 0 || h <= 0)
+    return; switch (preset) {
+    case 'rightArrow': {
+        const bh = h * .6, top = (h - bh) / 2, head = Math.min(w * .35, h * .9), right = w - head;
+        return `M 0 ${top} L ${right} ${top} L ${right} 0 L ${w} ${h / 2} L ${right} ${h} L ${right} ${top + bh} L 0 ${top + bh} Z`;
+    }
+    case 'leftArrow': {
+        const bh = h * .6, top = (h - bh) / 2, head = Math.min(w * .35, h * .9);
+        return `M ${w} ${top} L ${head} ${top} L ${head} 0 L 0 ${h / 2} L ${head} ${h} L ${head} ${top + bh} L ${w} ${top + bh} Z`;
+    }
+    case 'upArrow': {
+        const bw = w * .6, left = (w - bw) / 2, head = Math.min(h * .35, w * .9);
+        return `M ${left} ${h} L ${left} ${head} L 0 ${head} L ${w / 2} 0 L ${w} ${head} L ${left + bw} ${head} L ${left + bw} ${h} Z`;
+    }
+    case 'downArrow': {
+        const bw = w * .6, left = (w - bw) / 2, bottom = h - Math.min(h * .35, w * .9);
+        return `M ${left} 0 L ${left + bw} 0 L ${left + bw} ${bottom} L ${w} ${bottom} L ${w / 2} ${h} L 0 ${bottom} L ${left} ${bottom} Z`;
+    }
+    case 'roundRect': {
+        const r = Math.min(w, h) * .12;
+        return `M ${r} 0 L ${w - r} 0 Q ${w} 0 ${w} ${r} L ${w} ${h - r} Q ${w} ${h} ${w - r} ${h} L ${r} ${h} Q 0 ${h} 0 ${h - r} L 0 ${r} Q 0 0 ${r} 0 Z`;
+    }
+    case 'ellipse':
+    case 'oval': return `M ${w / 2} 0 A ${w / 2} ${h / 2} 0 1 0 ${w / 2} ${h} A ${w / 2} ${h / 2} 0 1 0 ${w / 2} 0 Z`;
+    case 'triangle': return `M ${w / 2} 0 L ${w} ${h} L 0 ${h} Z`;
+    case 'rect': return `M 0 0 L ${w} 0 L ${w} ${h} L 0 ${h} Z`;
+    default: return;
+} }
+function marker(defs, id, type, color) { const value = document.createElementNS(SVG_NS, 'marker'); value.id = id; value.setAttribute('markerWidth', '8'); value.setAttribute('markerHeight', '8'); value.setAttribute('refX', type === 'start' ? '0' : '8'); value.setAttribute('refY', '4'); value.setAttribute('orient', 'auto'); value.setAttribute('markerUnits', 'strokeWidth'); const path = document.createElementNS(SVG_NS, 'path'); path.setAttribute('d', type === 'circle' ? 'M 4 1 A 3 3 0 1 0 4 7 A 3 3 0 1 0 4 1' : 'M 0 0 L 8 4 L 0 8 Z'); path.setAttribute('fill', color); value.append(path); defs.append(value); }
+function shapeElement(e) { const box = frame(e, 'shape'), w = Math.max(1, Math.abs(e.width)), h = Math.max(1, Math.abs(e.height)), svg = document.createElementNS(SVG_NS, 'svg'); svg.setAttribute('width', String(w)); svg.setAttribute('height', String(h)); svg.setAttribute('viewBox', `0 0 ${w} ${h}`); const stroke = e.borderColor ?? '#000', strokeWidth = String(Math.max(1, e.borderWidthPx ?? 1)); if (e.presetGeom === 'line' || e.presetGeom === 'straightConnector1') {
+    box.style.transform = e.rotateDeg ? `rotate(${e.rotateDeg}deg)` : '';
+    const defs = document.createElementNS(SVG_NS, 'defs'), suffix = `${e.zIndex}-${Math.round(e.x)}-${Math.round(e.y)}`;
+    marker(defs, `arrow-${suffix}`, 'end', stroke);
+    marker(defs, `circle-${suffix}`, 'circle', stroke);
+    svg.append(defs);
+    const line = document.createElementNS(SVG_NS, 'line');
+    line.setAttribute('x1', String(e.flipH ? w : 0));
+    line.setAttribute('y1', String(e.flipV ? h : 0));
+    line.setAttribute('x2', String(e.flipH ? 0 : w));
+    line.setAttribute('y2', String(e.flipV ? 0 : h));
+    line.setAttribute('stroke', stroke);
+    line.setAttribute('stroke-width', strokeWidth);
+    const markerUrl = (type) => type && ['oval', 'diamond'].includes(type) ? `url(#circle-${suffix})` : type && ['arrow', 'triangle', 'stealth'].includes(type) ? `url(#arrow-${suffix})` : undefined;
+    const start = markerUrl(e.headEnd), end = markerUrl(e.tailEnd);
+    if (start)
+        line.setAttribute('marker-start', start);
+    if (end)
+        line.setAttribute('marker-end', end);
+    svg.append(line);
+    box.style.overflow = 'visible';
+    box.append(svg);
+    return box;
+} const d = e.customSvgPath ?? presetGeomToSvgPath(e.presetGeom, w, h); if (d) {
+    const path = document.createElementNS(SVG_NS, 'path');
+    path.setAttribute('d', d);
+    path.setAttribute('fill', e.fillColor ?? 'none');
+    path.setAttribute('stroke', e.borderColor ?? 'none');
+    path.setAttribute('stroke-width', strokeWidth);
+    svg.append(path);
+    box.append(svg);
+}
+else {
+    if (e.fillColor)
+        box.style.background = e.fillColor;
+    if (e.borderColor)
+        box.style.border = `${strokeWidth}px solid ${e.borderColor}`;
+} return box; }
+export function renderSlideElement(e, fallbackColor = '#111111') { switch (e.type) {
+    case 'text': return textElement(e, fallbackColor);
+    case 'image': return imageElement(e);
+    case 'table': return tableElement(e);
+    case 'chart': return chartElement(e);
+    default: return shapeElement(e);
+} }
+export function renderSlide(slide, zoom) { const article = node('article', 'omni-ppt__slide'); article.setAttribute('aria-label', `Slide ${slide.slideNumber}`); Object.assign(article.style, { width: `${slide.widthPx}px`, height: `${slide.heightPx}px`, background: slide.backgroundColor, transform: `scale(${zoom})`, marginBottom: `${slide.heightPx * (zoom - 1)}px` }); const fallbackColor = getReadableTextColor(slide.backgroundColor); slide.elements.map(element => element.type === 'image' && !!element.src && element.width >= slide.widthPx * .8 && element.height >= slide.heightPx * .8 && element.zIndex < 0 ? { ...element, zIndex: 0 } : element).sort((a, b) => a.zIndex - b.zIndex).forEach(element => article.append(renderSlideElement(element, fallbackColor))); return article; }

package/dist/viewers/ppt/self-loading.d.ts

@@ -0,0 +1,9 @@
+import type { HostContext } from '../../host/index.js';
+import type { ViewerInput } from '../types.js';
+import type { PdfJsModule } from '../pdf/index.js';
+import { type PptMountOptions, type PptViewerDeps, type PptViewerHandle } from './index.js';
+export * from './index.js';
+export declare const selfLoadingPptPdfDeps: {
+    loadPdfjs: () => Promise<PdfJsModule>;
+};
+export declare function mountSelfLoadingPptViewer(input: ViewerInput, container: HTMLElement, ctx: HostContext, deps?: Omit<PptViewerDeps, 'loadPdfjs'>, options?: PptMountOptions): Promise<PptViewerHandle>;

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

@@ -0,0 +1,4 @@
+import { mountPptViewer } from './index.js';
+export * from './index.js';
+export const selfLoadingPptPdfDeps = { loadPdfjs: () => import('pdfjs-dist/build/pdf.mjs') };
+export function mountSelfLoadingPptViewer(input, container, ctx, deps = {}, options = {}) { return mountPptViewer(input, container, ctx, { ...deps, ...selfLoadingPptPdfDeps }, options); }

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

@@ -0,0 +1 @@
+export declare const pptViewerCss = ":host,.omni-viewer--ppt{color:var(--omni-fg,#ddd);font:13px system-ui}.omni-ppt{height:100%;display:flex;flex-direction:column;background:var(--omni-bg,#181818)}.omni-ppt__toolbar{display:flex;gap:6px;align-items:center;padding:8px;border-bottom:1px solid var(--omni-border,#444)}.omni-ppt__toolbar button,.omni-ppt__toolbar select{background:var(--omni-control-bg,#292929);color:inherit;border:1px solid var(--omni-border,#555);border-radius:4px;padding:4px 8px}.omni-ppt__viewport{overflow:auto;flex:1;padding:20px}.omni-ppt__slides{display:flex;flex-direction:column;align-items:center;gap:20px}.omni-ppt__slide{position:relative;overflow:hidden;box-shadow:0 2px 12px #0008;transform-origin:top center;flex:none}.omni-ppt__element{position:absolute;box-sizing:border-box;overflow:hidden}.omni-ppt__text{white-space:pre-wrap}.omni-ppt__text p{margin:0}.omni-ppt__image{width:100%;height:100%;object-fit:contain}.omni-ppt__table{border-collapse:collapse;width:100%;height:100%;color:#111}.omni-ppt__table td{border:1px solid #777;padding:3px}.omni-ppt__shape{width:100%;height:100%}.omni-ppt__empty{padding:32px;text-align:center}";

package/dist/viewers/ppt/styles.js

@@ -0,0 +1 @@
+export const pptViewerCss = `:host,.omni-viewer--ppt{color:var(--omni-fg,#ddd);font:13px system-ui}.omni-ppt{height:100%;display:flex;flex-direction:column;background:var(--omni-bg,#181818)}.omni-ppt__toolbar{display:flex;gap:6px;align-items:center;padding:8px;border-bottom:1px solid var(--omni-border,#444)}.omni-ppt__toolbar button,.omni-ppt__toolbar select{background:var(--omni-control-bg,#292929);color:inherit;border:1px solid var(--omni-border,#555);border-radius:4px;padding:4px 8px}.omni-ppt__viewport{overflow:auto;flex:1;padding:20px}.omni-ppt__slides{display:flex;flex-direction:column;align-items:center;gap:20px}.omni-ppt__slide{position:relative;overflow:hidden;box-shadow:0 2px 12px #0008;transform-origin:top center;flex:none}.omni-ppt__element{position:absolute;box-sizing:border-box;overflow:hidden}.omni-ppt__text{white-space:pre-wrap}.omni-ppt__text p{margin:0}.omni-ppt__image{width:100%;height:100%;object-fit:contain}.omni-ppt__table{border-collapse:collapse;width:100%;height:100%;color:#111}.omni-ppt__table td{border:1px solid #777;padding:3px}.omni-ppt__shape{width:100%;height:100%}.omni-ppt__empty{padding:32px;text-align:center}`;

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

@@ -0,0 +1,17 @@
+import type { ClipboardService, HostContext } from '../../host/index.js';
+import { type MountOptions, type ViewerHandle, type ViewerInput } from '../types.js';
+export { protoViewerCss } from './styles.js';
+export { parseProto } from '../../parsers/proto/index.js';
+export declare const PROTO_VIEWER_META: {
+    id: string;
+    displayNameKey: string;
+    extensions: string[];
+    priority: number;
+    requiredServices: readonly [];
+    optionalServices: readonly ["clipboard"];
+    inputOwnership: "borrows";
+};
+export type ProtoViewerContext = HostContext & {
+    clipboard?: ClipboardService;
+};
+export declare function mountProtoViewer(input: ViewerInput, container: HTMLElement, ctx: ProtoViewerContext, options?: MountOptions): Promise<ViewerHandle>;