omni-viewer-core 0.1.0

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

@@ -0,0 +1 @@
+export declare const csvViewerCss = "\n/* Reverse-contamination guard (DESIGN.md \u00A76): in 'scoped' mode the viewer\n   renders inside host DOM, so host global styles (element selectors for\n   button/table/input etc.) must be explicitly neutralized. Harmless in\n   shadow mode. Custom properties are exempt from 'all', so the --omni-*\n   theme tokens still pierce. Component rules below override the guard\n   (later in the sheet + higher specificity). */\n.omni-viewer--csv {\n    all: initial;\n}\n.omni-viewer--csv :where(button, select, option, input, label, a,\n    table, thead, tbody, tr, th, td, pre, code) {\n    all: revert;\n}\n\n:host, .omni-viewer--csv {\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.omni-csv {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n}\n.omni-csv__toolbar {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 8px;\n    padding: 8px;\n    border-bottom: 1px solid var(--omni-border, #3c3c3c);\n}\n.omni-csv__toolbar label {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n.omni-csv__toolbar select,\n.omni-csv__toolbar button {\n    font: inherit;\n    color: var(--omni-fg, #d4d4d4);\n    background: var(--omni-button-bg, #3a3d41);\n    border: 1px solid var(--omni-border, #3c3c3c);\n    border-radius: 4px;\n    padding: 4px 8px;\n    cursor: pointer;\n}\n.omni-csv__toolbar button:hover:not(:disabled) {\n    background: var(--omni-button-hover-bg, #45494e);\n}\n.omni-csv__toolbar button:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n.omni-csv__toolbar button[aria-pressed=\"true\"] {\n    background: var(--omni-accent, #0e639c);\n    border-color: var(--omni-accent, #0e639c);\n    color: var(--omni-accent-fg, #ffffff);\n}\n.omni-csv__toolbar input[type=\"search\"] {\n    font: inherit;\n    color: var(--omni-fg, #d4d4d4);\n    background: var(--omni-input-bg, #3c3c3c);\n    border: 1px solid var(--omni-border, #3c3c3c);\n    border-radius: 4px;\n    padding: 4px 8px;\n    min-width: 140px;\n}\n.omni-csv__spacer { flex: 1; }\n.omni-csv__dirty {\n    color: var(--omni-warning-fg, #cca700);\n    white-space: nowrap;\n}\n.omni-csv__cell-input {\n    font: inherit;\n    color: var(--omni-fg, #d4d4d4);\n    background: var(--omni-input-bg, #3c3c3c);\n    border: 1px solid var(--omni-accent, #0e639c);\n    border-radius: 2px;\n    padding: 2px 4px;\n    width: 100%;\n    box-sizing: border-box;\n}\n.omni-csv__menu {\n    position: absolute;\n    z-index: 10;\n    display: flex;\n    flex-direction: column;\n    min-width: 160px;\n    background: var(--omni-bg-secondary, #252526);\n    border: 1px solid var(--omni-border, #3c3c3c);\n    border-radius: 6px;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);\n    padding: 4px;\n}\n.omni-csv__menu button {\n    font: inherit;\n    text-align: left;\n    color: var(--omni-fg, #d4d4d4);\n    background: transparent;\n    border: none;\n    border-radius: 4px;\n    padding: 6px 10px;\n    cursor: pointer;\n}\n.omni-csv__menu button:hover {\n    background: var(--omni-button-hover-bg, #45494e);\n}\n.omni-csv__table .omni-csv__rownum {\n    color: var(--omni-fg-muted, #9d9d9d);\n    text-align: right;\n    user-select: none;\n}\n.omni-csv__table thead th.omni-csv__rownum {\n    cursor: default;\n}\n.omni-csv__table thead th.omni-csv__rownum:hover {\n    background: var(--omni-bg-secondary, #252526);\n}\n.omni-csv__meta {\n    color: var(--omni-fg-muted, #9d9d9d);\n    white-space: nowrap;\n}\n.omni-csv__diagnostics {\n    padding: 4px 8px;\n    color: var(--omni-warning-fg, #cca700);\n    border-bottom: 1px solid var(--omni-border, #3c3c3c);\n}\n.omni-csv__diag-error {\n    color: var(--omni-error-fg, #f48771);\n    font-weight: 600;\n}\n.omni-csv__body {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n}\n.omni-csv__table {\n    border-collapse: collapse;\n    width: max-content;\n    min-width: 100%;\n}\n.omni-csv__table th,\n.omni-csv__table td {\n    border: 1px solid var(--omni-border, #3c3c3c);\n    padding: 4px 8px;\n    text-align: left;\n    white-space: nowrap;\n    max-width: 480px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n/* Empty cells do not create a line box by themselves, making a newly\n   inserted blank row shorter than populated rows. Keep an invisible-width\n   non-breaking space so every table row uses the normal cell height. */\n.omni-csv__table td:empty::before {\n    content: \"\\00a0\";\n}\n.omni-csv__table thead th {\n    position: sticky;\n    top: 0;\n    background: var(--omni-bg-secondary, #252526);\n    cursor: pointer;\n    user-select: none;\n}\n.omni-csv__table thead th:hover {\n    background: var(--omni-button-hover-bg, #45494e);\n}\n.omni-csv__table tbody tr:nth-child(even) td {\n    background: var(--omni-bg-secondary, #252526);\n}\n.omni-csv__sort-indicator {\n    margin-left: 4px;\n    color: var(--omni-accent, #0e639c);\n}\n.omni-csv__resize-handle {\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 7px;\n    height: 100%;\n    cursor: col-resize;\n    user-select: none;\n    touch-action: none;\n}\n.omni-csv__resize-handle:hover {\n    background: var(--omni-accent, #0e639c);\n    opacity: 0.6;\n}\n.omni-csv__raw {\n    margin: 0;\n    padding: 8px;\n    font-family: var(--omni-font-mono, \"SF Mono\", Monaco, Menlo, Consolas, monospace);\n    white-space: pre;\n}\n.omni-csv__raw-edit {\n    display: block;\n    width: 100%;\n    min-height: 100%;\n    box-sizing: border-box;\n    border: 0;\n    resize: none;\n    font-size: inherit;\n    line-height: inherit;\n    color: var(--omni-fg, #d4d4d4);\n    background: transparent;\n}\n.omni-csv__raw-edit:focus {\n    outline: none;\n}\n.omni-csv__table thead .omni-csv__stats-row th {\n    top: var(--omni-csv-head-h, 24px);\n    cursor: default;\n    color: var(--omni-fg-muted, #9d9d9d);\n    font-weight: 400;\n    font-size: 0.92em;\n    white-space: nowrap;\n}\n.omni-csv__table thead .omni-csv__stats-row th:hover {\n    background: var(--omni-bg-secondary, #252526);\n}\n.omni-csv__footer {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 6px 8px;\n    border-top: 1px solid var(--omni-border, #3c3c3c);\n}\n.omni-csv__footer button {\n    font: inherit;\n    color: var(--omni-fg, #d4d4d4);\n    background: var(--omni-button-bg, #3a3d41);\n    border: 1px solid var(--omni-border, #3c3c3c);\n    border-radius: 4px;\n    padding: 2px 10px;\n    cursor: pointer;\n}\n.omni-csv__footer button:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n.omni-csv__empty {\n    padding: 24px;\n    text-align: center;\n    color: var(--omni-fg-muted, #9d9d9d);\n}\n.omni-csv__toast {\n    position: absolute;\n    right: 12px;\n    bottom: 44px;\n    background: var(--omni-accent, #0e639c);\n    color: var(--omni-accent-fg, #ffffff);\n    border-radius: 4px;\n    padding: 4px 10px;\n    opacity: 0.95;\n}\n";

package/dist/viewers/csv/styles.js

@@ -0,0 +1,267 @@
+// CSV viewer stylesheet. Single source for both delivery forms (DESIGN.md §6):
+// the build emits dist/styles/csv.css from this constant, and the renderer
+// injects it into the shadow root. Only --omni-* tokens (with fallbacks) —
+// never --vscode-* or platform variables.
+export const csvViewerCss = `
+/* Reverse-contamination guard (DESIGN.md §6): in 'scoped' mode the viewer
+   renders inside host DOM, so host global styles (element selectors for
+   button/table/input etc.) must be explicitly neutralized. Harmless in
+   shadow mode. Custom properties are exempt from 'all', so the --omni-*
+   theme tokens still pierce. Component rules below override the guard
+   (later in the sheet + higher specificity). */
+.omni-viewer--csv {
+    all: initial;
+}
+.omni-viewer--csv :where(button, select, option, input, label, a,
+    table, thead, tbody, tr, th, td, pre, code) {
+    all: revert;
+}
+
+:host, .omni-viewer--csv {
+    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-csv {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+}
+.omni-csv__toolbar {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 8px;
+    border-bottom: 1px solid var(--omni-border, #3c3c3c);
+}
+.omni-csv__toolbar label {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+}
+.omni-csv__toolbar select,
+.omni-csv__toolbar button {
+    font: inherit;
+    color: var(--omni-fg, #d4d4d4);
+    background: var(--omni-button-bg, #3a3d41);
+    border: 1px solid var(--omni-border, #3c3c3c);
+    border-radius: 4px;
+    padding: 4px 8px;
+    cursor: pointer;
+}
+.omni-csv__toolbar button:hover:not(:disabled) {
+    background: var(--omni-button-hover-bg, #45494e);
+}
+.omni-csv__toolbar button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+.omni-csv__toolbar button[aria-pressed="true"] {
+    background: var(--omni-accent, #0e639c);
+    border-color: var(--omni-accent, #0e639c);
+    color: var(--omni-accent-fg, #ffffff);
+}
+.omni-csv__toolbar input[type="search"] {
+    font: inherit;
+    color: var(--omni-fg, #d4d4d4);
+    background: var(--omni-input-bg, #3c3c3c);
+    border: 1px solid var(--omni-border, #3c3c3c);
+    border-radius: 4px;
+    padding: 4px 8px;
+    min-width: 140px;
+}
+.omni-csv__spacer { flex: 1; }
+.omni-csv__dirty {
+    color: var(--omni-warning-fg, #cca700);
+    white-space: nowrap;
+}
+.omni-csv__cell-input {
+    font: inherit;
+    color: var(--omni-fg, #d4d4d4);
+    background: var(--omni-input-bg, #3c3c3c);
+    border: 1px solid var(--omni-accent, #0e639c);
+    border-radius: 2px;
+    padding: 2px 4px;
+    width: 100%;
+    box-sizing: border-box;
+}
+.omni-csv__menu {
+    position: absolute;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    min-width: 160px;
+    background: var(--omni-bg-secondary, #252526);
+    border: 1px solid var(--omni-border, #3c3c3c);
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+    padding: 4px;
+}
+.omni-csv__menu button {
+    font: inherit;
+    text-align: left;
+    color: var(--omni-fg, #d4d4d4);
+    background: transparent;
+    border: none;
+    border-radius: 4px;
+    padding: 6px 10px;
+    cursor: pointer;
+}
+.omni-csv__menu button:hover {
+    background: var(--omni-button-hover-bg, #45494e);
+}
+.omni-csv__table .omni-csv__rownum {
+    color: var(--omni-fg-muted, #9d9d9d);
+    text-align: right;
+    user-select: none;
+}
+.omni-csv__table thead th.omni-csv__rownum {
+    cursor: default;
+}
+.omni-csv__table thead th.omni-csv__rownum:hover {
+    background: var(--omni-bg-secondary, #252526);
+}
+.omni-csv__meta {
+    color: var(--omni-fg-muted, #9d9d9d);
+    white-space: nowrap;
+}
+.omni-csv__diagnostics {
+    padding: 4px 8px;
+    color: var(--omni-warning-fg, #cca700);
+    border-bottom: 1px solid var(--omni-border, #3c3c3c);
+}
+.omni-csv__diag-error {
+    color: var(--omni-error-fg, #f48771);
+    font-weight: 600;
+}
+.omni-csv__body {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+}
+.omni-csv__table {
+    border-collapse: collapse;
+    width: max-content;
+    min-width: 100%;
+}
+.omni-csv__table th,
+.omni-csv__table td {
+    border: 1px solid var(--omni-border, #3c3c3c);
+    padding: 4px 8px;
+    text-align: left;
+    white-space: nowrap;
+    max-width: 480px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+/* Empty cells do not create a line box by themselves, making a newly
+   inserted blank row shorter than populated rows. Keep an invisible-width
+   non-breaking space so every table row uses the normal cell height. */
+.omni-csv__table td:empty::before {
+    content: "\\00a0";
+}
+.omni-csv__table thead th {
+    position: sticky;
+    top: 0;
+    background: var(--omni-bg-secondary, #252526);
+    cursor: pointer;
+    user-select: none;
+}
+.omni-csv__table thead th:hover {
+    background: var(--omni-button-hover-bg, #45494e);
+}
+.omni-csv__table tbody tr:nth-child(even) td {
+    background: var(--omni-bg-secondary, #252526);
+}
+.omni-csv__sort-indicator {
+    margin-left: 4px;
+    color: var(--omni-accent, #0e639c);
+}
+.omni-csv__resize-handle {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 7px;
+    height: 100%;
+    cursor: col-resize;
+    user-select: none;
+    touch-action: none;
+}
+.omni-csv__resize-handle:hover {
+    background: var(--omni-accent, #0e639c);
+    opacity: 0.6;
+}
+.omni-csv__raw {
+    margin: 0;
+    padding: 8px;
+    font-family: var(--omni-font-mono, "SF Mono", Monaco, Menlo, Consolas, monospace);
+    white-space: pre;
+}
+.omni-csv__raw-edit {
+    display: block;
+    width: 100%;
+    min-height: 100%;
+    box-sizing: border-box;
+    border: 0;
+    resize: none;
+    font-size: inherit;
+    line-height: inherit;
+    color: var(--omni-fg, #d4d4d4);
+    background: transparent;
+}
+.omni-csv__raw-edit:focus {
+    outline: none;
+}
+.omni-csv__table thead .omni-csv__stats-row th {
+    top: var(--omni-csv-head-h, 24px);
+    cursor: default;
+    color: var(--omni-fg-muted, #9d9d9d);
+    font-weight: 400;
+    font-size: 0.92em;
+    white-space: nowrap;
+}
+.omni-csv__table thead .omni-csv__stats-row th:hover {
+    background: var(--omni-bg-secondary, #252526);
+}
+.omni-csv__footer {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 8px;
+    border-top: 1px solid var(--omni-border, #3c3c3c);
+}
+.omni-csv__footer button {
+    font: inherit;
+    color: var(--omni-fg, #d4d4d4);
+    background: var(--omni-button-bg, #3a3d41);
+    border: 1px solid var(--omni-border, #3c3c3c);
+    border-radius: 4px;
+    padding: 2px 10px;
+    cursor: pointer;
+}
+.omni-csv__footer button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+.omni-csv__empty {
+    padding: 24px;
+    text-align: center;
+    color: var(--omni-fg-muted, #9d9d9d);
+}
+.omni-csv__toast {
+    position: absolute;
+    right: 12px;
+    bottom: 44px;
+    background: var(--omni-accent, #0e639c);
+    color: var(--omni-accent-fg, #ffffff);
+    border-radius: 4px;
+    padding: 4px 10px;
+    opacity: 0.95;
+}
+`;

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

@@ -0,0 +1,15 @@
+import type { AutomotiveViewerContext } from '../automotive/index.js';
+import type { MountOptions, ViewerHandle, ViewerInput } from '../types.js';
+export { parseDb3 } from '../../parsers/automotive/index.js';
+export { automotiveViewerCss as db3ViewerCss } from '../automotive/styles.js';
+export type Db3ViewerContext = AutomotiveViewerContext;
+export declare const DB3_VIEWER_META: {
+    id: string;
+    displayNameKey: string;
+    extensions: string[];
+    priority: number;
+    requiredServices: readonly [];
+    optionalServices: readonly ["clipboard"];
+    inputOwnership: "borrows";
+};
+export declare const mountDb3Viewer: (input: ViewerInput, container: HTMLElement, ctx: Db3ViewerContext, options?: MountOptions) => Promise<ViewerHandle>;

package/dist/viewers/db3/index.js

@@ -0,0 +1,5 @@
+import { mountAutomotiveViewer } from '../automotive/index.js';
+export { parseDb3 } from '../../parsers/automotive/index.js';
+export { automotiveViewerCss as db3ViewerCss } from '../automotive/styles.js';
+export const DB3_VIEWER_META = { id: 'db3', displayNameKey: 'db3.title', extensions: ['db3'], priority: 20, requiredServices: [], optionalServices: ['clipboard'], inputOwnership: 'borrows' };
+export const mountDb3Viewer = (input, container, ctx, options = {}) => mountAutomotiveViewer('db3', input, container, ctx, options);

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

@@ -0,0 +1,15 @@
+import type { AutomotiveViewerContext } from '../automotive/index.js';
+import type { MountOptions, ViewerHandle, ViewerInput } from '../types.js';
+export { parseDbc } from '../../parsers/dbc/index.js';
+export { automotiveViewerCss as dbcViewerCss } from '../automotive/styles.js';
+export type DbcViewerContext = AutomotiveViewerContext;
+export declare const DBC_VIEWER_META: {
+    id: string;
+    displayNameKey: string;
+    extensions: string[];
+    priority: number;
+    requiredServices: readonly [];
+    optionalServices: readonly ["clipboard"];
+    inputOwnership: "borrows";
+};
+export declare const mountDbcViewer: (input: ViewerInput, container: HTMLElement, ctx: DbcViewerContext, options?: MountOptions) => Promise<ViewerHandle>;

package/dist/viewers/dbc/index.js

@@ -0,0 +1,5 @@
+import { mountAutomotiveViewer } from '../automotive/index.js';
+export { parseDbc } from '../../parsers/dbc/index.js';
+export { automotiveViewerCss as dbcViewerCss } from '../automotive/styles.js';
+export const DBC_VIEWER_META = { id: 'dbc', displayNameKey: 'dbc.title', extensions: ['dbc'], priority: 20, requiredServices: [], optionalServices: ['clipboard'], inputOwnership: 'borrows' };
+export const mountDbcViewer = (input, container, ctx, options = {}) => mountAutomotiveViewer('dbc', input, container, ctx, options);

package/dist/viewers/diagram.d.ts

@@ -0,0 +1,14 @@
+import type { HostContext } from '../host/index.js';
+import { type MountOptions, type ViewerHandle, type ViewerInput } from './types.js';
+export declare const diagramViewerCss = ".omni-diagram{box-sizing:border-box;min-height:100%;padding:18px;background:var(--omni-bg,#1e1e1e);color:var(--omni-fg,#ddd);font:14px/1.45 system-ui,sans-serif}.omni-diagram *{box-sizing:border-box}.omni-diagram__header{display:flex;justify-content:space-between;gap:16px;margin-bottom:12px}.omni-diagram__title{font-size:18px;font-weight:650;overflow-wrap:anywhere}.omni-diagram__stage{overflow:auto;min-height:300px;padding:18px;border:1px solid var(--omni-border,#444);border-radius:8px;background:#fff;color:#111}.omni-diagram__stage svg{display:block;max-width:100%;height:auto;margin:auto}.omni-diagram__warning{margin-top:12px;padding:10px;border:1px solid #b98b2f;border-radius:6px;background:#3b2d10;color:#ffd98a;white-space:pre-wrap}.omni-diagram__source-details{margin-top:12px}.omni-diagram__source-details summary{cursor:pointer}.omni-diagram__source{max-height:240px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}";
+export interface DiagramMountOptions extends MountOptions {
+    renderMermaid?(id: string, source: string): Promise<string>;
+    renderPlantUml?(source: string, document: Document): SVGElement | string;
+    maxSvgBytes?: number;
+    maxSvgNodes?: number;
+}
+export declare function mountDiagramViewer(kind: 'mermaid' | 'plantuml', parsed: {
+    source: string;
+    warnings: string[];
+}, input: ViewerInput, container: HTMLElement, _ctx: HostContext, options?: DiagramMountOptions): Promise<ViewerHandle>;
+export declare function sanitizeSvg(svg: string, maxBytes?: number, maxNodes?: number): SVGElement;

package/dist/viewers/diagram.js

@@ -0,0 +1,95 @@
+import { MountAbortedError, VIEWER_ROOT_CLASS } from './types.js';
+export const diagramViewerCss = `.omni-diagram{box-sizing:border-box;min-height:100%;padding:18px;background:var(--omni-bg,#1e1e1e);color:var(--omni-fg,#ddd);font:14px/1.45 system-ui,sans-serif}.omni-diagram *{box-sizing:border-box}.omni-diagram__header{display:flex;justify-content:space-between;gap:16px;margin-bottom:12px}.omni-diagram__title{font-size:18px;font-weight:650;overflow-wrap:anywhere}.omni-diagram__stage{overflow:auto;min-height:300px;padding:18px;border:1px solid var(--omni-border,#444);border-radius:8px;background:#fff;color:#111}.omni-diagram__stage svg{display:block;max-width:100%;height:auto;margin:auto}.omni-diagram__warning{margin-top:12px;padding:10px;border:1px solid #b98b2f;border-radius:6px;background:#3b2d10;color:#ffd98a;white-space:pre-wrap}.omni-diagram__source-details{margin-top:12px}.omni-diagram__source-details summary{cursor:pointer}.omni-diagram__source{max-height:240px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}`;
+export async function mountDiagramViewer(kind, parsed, input, container, _ctx, options = {}) {
+    if (options.signal?.aborted)
+        throw new MountAbortedError();
+    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--${kind}`);
+    else {
+        const s = document.createElement('style');
+        s.textContent = diagramViewerCss;
+        root.append(s);
+    }
+    const shell = document.createElement('section');
+    shell.className = `${VIEWER_ROOT_CLASS} omni-diagram omni-diagram--${kind}`;
+    const header = document.createElement('header');
+    header.className = 'omni-diagram__header';
+    const title = document.createElement('div');
+    title.className = 'omni-diagram__title';
+    title.textContent = input.fileName;
+    const meta = document.createElement('div');
+    meta.textContent = kind === 'mermaid' ? 'Mermaid' : 'PlantUML';
+    header.append(title, meta);
+    const stage = document.createElement('main');
+    stage.className = 'omni-diagram__stage';
+    stage.setAttribute('role', 'img');
+    const warning = document.createElement('div');
+    warning.className = 'omni-diagram__warning';
+    warning.hidden = true;
+    const sourceDetails = document.createElement('details');
+    sourceDetails.className = 'omni-diagram__source-details';
+    const sourceSummary = document.createElement('summary');
+    sourceSummary.textContent = 'Source';
+    const source = document.createElement('pre');
+    source.className = 'omni-diagram__source';
+    source.textContent = parsed.source;
+    sourceDetails.append(sourceSummary, source);
+    shell.append(header, stage, warning, sourceDetails);
+    root.append(shell);
+    let disposed = false;
+    const show = (values) => { warning.hidden = values.length === 0; warning.textContent = values.join('\n'); };
+    show(parsed.warnings);
+    try {
+        let svg;
+        if (kind === 'mermaid' && options.renderMermaid)
+            svg = await abortable(options.renderMermaid(`omni-mermaid-${nextId++}`, parsed.source), options.signal);
+        else if (kind === 'plantuml' && options.renderPlantUml) {
+            const out = options.renderPlantUml(parsed.source, document);
+            svg = typeof out === 'string' ? out : new XMLSerializer().serializeToString(out);
+        }
+        else {
+            sourceDetails.open = true;
+            show([...parsed.warnings, `${kind === 'mermaid' ? 'Mermaid' : 'PlantUML'} renderer is not installed. The source is shown below.`]);
+        }
+        if (svg && !disposed) {
+            const safe = sanitizeSvg(svg, options.maxSvgBytes ?? 2_000_000, options.maxSvgNodes ?? 20_000);
+            stage.replaceChildren(safe);
+        }
+    }
+    catch (error) {
+        sourceDetails.open = true;
+        show([...parsed.warnings, `Diagram rendering failed: ${error instanceof Error ? error.message : String(error)}`]);
+    }
+    if (options.signal?.aborted) {
+        disposed = true;
+        shell.remove();
+        throw new MountAbortedError();
+    }
+    return { dispose() { disposed = true; shell.remove(); if (root === container)
+            container.classList.remove(VIEWER_ROOT_CLASS, `omni-viewer--${kind}`);
+        else
+            root.replaceChildren(); } };
+}
+let nextId = 1;
+export function sanitizeSvg(svg, maxBytes = 2_000_000, maxNodes = 20_000) { if (new TextEncoder().encode(svg).byteLength > maxBytes)
+    throw new Error('Rendered SVG exceeds the size limit.'); const doc = new DOMParser().parseFromString(svg, 'image/svg+xml'); const root = doc.documentElement; if (root.localName !== 'svg' || root.querySelector('parsererror'))
+    throw new Error('Renderer returned invalid SVG.'); const nodes = [root, ...root.querySelectorAll('*')]; if (nodes.length > maxNodes)
+    throw new Error('Rendered SVG exceeds the node limit.'); for (const node of nodes) {
+    if (['script', 'foreignObject', 'iframe', 'object', 'embed', 'audio', 'video', 'image', 'feImage', 'animate', 'set'].includes(node.localName)) {
+        node.remove();
+        continue;
+    }
+    if (node.localName === 'style' && /(?:@import|url\s*\(|expression\s*\()/i.test(node.textContent ?? '')) {
+        node.remove();
+        continue;
+    }
+    for (const attr of [...node.attributes]) {
+        const name = attr.name.toLowerCase(), value = attr.value.trim();
+        if (name.startsWith('on') || name === 'srcdoc' || /^javascript:/i.test(value) || /url\s*\(\s*(?!["']?#)/i.test(value) || name === 'style' && /url\s*\(/i.test(value) || ['href', 'xlink:href'].includes(name) && !value.startsWith('#'))
+            node.removeAttribute(attr.name);
+    }
+} return document.importNode(root, true); }
+function abortable(promise, signal) { if (!signal)
+    return promise; if (signal.aborted)
+    return Promise.reject(new MountAbortedError()); return new Promise((resolve, reject) => { const abort = () => reject(new MountAbortedError()); signal.addEventListener('abort', abort, { once: true }); promise.then(value => { signal.removeEventListener('abort', abort); resolve(value); }, error => { signal.removeEventListener('abort', abort); reject(error); }); }); }

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

@@ -0,0 +1,108 @@
+import type { Diagnostic, ParseFailure, ParseResult } from '../../parsers/types.js';
+import { type ColumnType, type SortState } from '../../parsers/csv/index.js';
+import type { ExcelWorkbook } from '../../parsers/excel/index.js';
+import { type GridView } from './grid.js';
+export declare const EXCEL_DEFAULT_PAGE_SIZE = 100;
+export declare const EXCEL_UNDO_STACK_LIMIT = 200;
+export type RowId = number;
+export interface ExcelViewState {
+    status: 'ok' | 'partial' | 'failed';
+    failure: ParseFailure | null;
+    diagnostics: Diagnostic[];
+    sheetNames: string[];
+    sheetIndex: number;
+    sheetName: string;
+    headers: string[];
+    columnCount: number;
+    /** Data rows in the current sheet (excludes the header row). */
+    rowCount: number;
+    sort: SortState;
+    sortedColumnType: ColumnType | null;
+    search: string;
+    matchedRowCount: number;
+    matchedCellCount: number;
+    page: number;
+    pageCount: number;
+    pageSize: number;
+    /** 'table' = editable data table, 'grid' = read-only WYSIWYG (X3), 'raw' = JSON. */
+    viewMode: 'table' | 'grid' | 'raw';
+    /** Current page's rows (display strings), sorted then search-filtered. */
+    visibleRows: string[][];
+    /** RowIds for visibleRows, in the same order — stable across sort/filter. */
+    visibleRowIds: RowId[];
+    /** Editing is possible only for a fully parsed workbook (status 'ok'). */
+    editable: boolean;
+    canUndo: boolean;
+    canRedo: boolean;
+    /** Current sheet has unsaved edits. */
+    dirty: boolean;
+    /** Any sheet in the workbook has unsaved edits (drives the save button). */
+    workbookDirty: boolean;
+}
+export type ExcelAction = {
+    type: 'switch-sheet';
+    index: number;
+} | {
+    type: 'sort-column';
+    columnIndex: number;
+} | {
+    type: 'set-search';
+    search: string;
+} | {
+    type: 'set-page';
+    page: number;
+} | {
+    type: 'next-page';
+} | {
+    type: 'prev-page';
+} | {
+    type: 'set-page-size';
+    pageSize: number;
+} | {
+    type: 'set-view-mode';
+    mode: 'table' | 'grid' | 'raw';
+} | {
+    type: 'edit-cell';
+    rowId: RowId;
+    columnIndex: number;
+    value: string;
+} | {
+    type: 'edit-header';
+    columnIndex: number;
+    value: string;
+} | {
+    type: 'insert-row';
+    afterRowId: RowId | 'end';
+} | {
+    type: 'delete-row';
+    rowId: RowId;
+} | {
+    type: 'undo';
+} | {
+    type: 'redo';
+};
+export interface ExcelControllerOptions {
+    pageSize?: number;
+}
+export interface ExcelController {
+    readonly state: ExcelViewState;
+    dispatch(action: ExcelAction): void;
+    subscribe(listener: (state: ExcelViewState) => void): () => void;
+    /** Display cells (`w`) of a row by its immutable id. */
+    getRowById(rowId: RowId): readonly string[];
+    /** Display result (sorted + filtered) as TSV, headers included (copy). */
+    toTsv(): string;
+    /** Display result as an excel-export@1 JSON envelope (copy). */
+    toJson(): string;
+    /** Full current sheet as pretty JSON, unfiltered (raw view). */
+    rawJson(): string;
+    /** Workbook with in-session edits applied — for type-preserving export
+     *  (serializeWorkbook). Untouched sheets return their original model. */
+    getWorkbook(): ExcelWorkbook;
+    /** Grid-mode view (X3) of the current sheet — read-only render of the
+     *  original parsed file (styles/merges/dims), independent of edits. */
+    getGrid(): GridView | null;
+    /** Mark the current edit depth of every sheet as saved (clears dirty). */
+    markSaved(): void;
+}
+export declare function createExcelController(result: ParseResult<ExcelWorkbook>, options?: ExcelControllerOptions): ExcelController;