omni-viewer-core 0.1.0

package/dist/viewers/shapefile/index.js

@@ -0,0 +1,336 @@
+import { parseDbf } from '../../parsers/shapefile/dbf.js';
+import { parseShapefile } from '../../parsers/shapefile/index.js';
+import { isGeographicWkt, projectionName, reprojectModel } from '../../parsers/shapefile/reproject.js';
+import { MountAbortedError, VIEWER_ROOT_CLASS } from '../types.js';
+import { shapefileViewerCss } from './styles.js';
+export { parseShapefile } from '../../parsers/shapefile/index.js';
+export { parseDbf } from '../../parsers/shapefile/dbf.js';
+export { isGeographicWkt, projectionName, reprojectModel } from '../../parsers/shapefile/reproject.js';
+export { shapefileViewerCss } from './styles.js';
+export const SHAPEFILE_VIEWER_META = {
+    id: 'shapefile',
+    displayNameKey: 'shapefile.title',
+    extensions: ['shp'],
+    priority: 20,
+    requiredServices: [],
+    optionalServices: [],
+    inputOwnership: 'borrows'
+};
+const ZOOM_FACTOR = 1.5;
+export async function mountShapefileViewer(input, container, ctx, options = {}) {
+    if (options.signal?.aborted)
+        throw new MountAbortedError();
+    const t = (key, args) => ctx.i18n.t(key, args);
+    let model = parseShapefile(input.data, {
+        ...(options.signal ? { signal: options.signal } : {}),
+        ...(options.maxBytes ? { maxBytes: options.maxBytes } : {}),
+        ...(options.maxFeatures ? { maxFeatures: options.maxFeatures } : {}),
+        ...(options.maxVertices ? { maxVertices: options.maxVertices } : {})
+    });
+    const warnings = [...model.warnings];
+    // Optional .prj reprojection to WGS84 (only for projected systems).
+    let projectionLabel = null;
+    const wkt = options.sidecars?.prj?.trim();
+    if (wkt) {
+        projectionLabel = projectionName(wkt) ?? wkt.slice(0, 40);
+        if (!isGeographicWkt(wkt) && options.createReprojector) {
+            try {
+                const convert = options.createReprojector(wkt);
+                if (convert) {
+                    model = reprojectModel(model, convert);
+                    projectionLabel = `${projectionLabel} → WGS84`;
+                }
+            }
+            catch {
+                warnings.push(t('shapefile.reprojectFailed'));
+            }
+        }
+    }
+    // Optional .dbf attribute table; records pair with features by ordinal.
+    let attributes = null;
+    if (options.sidecars?.dbf) {
+        try {
+            attributes = parseDbf(options.sidecars.dbf, {
+                ...(options.signal ? { signal: options.signal } : {}),
+                ...(options.maxFeatures ? { maxRecords: options.maxFeatures } : {})
+            });
+            warnings.push(...attributes.warnings);
+        }
+        catch (error) {
+            warnings.push(`${t('shapefile.dbfFailed')} ${error instanceof Error ? error.message : String(error)}`);
+        }
+    }
+    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--shapefile');
+    else {
+        const style = document.createElement('style');
+        style.textContent = shapefileViewerCss;
+        root.append(style);
+    }
+    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-shp`);
+    const header = element('header', 'omni-shp__header');
+    const title = element('div', 'omni-shp__title', input.fileName);
+    const summaryParts = [
+        model.shapeTypeName,
+        `${model.features.length.toLocaleString()} features`,
+        `${model.vertexCount.toLocaleString()} vertices`
+    ];
+    if (attributes)
+        summaryParts.push(`${attributes.fields.length.toLocaleString()} attribute fields`);
+    const summary = element('div', 'omni-shp__summary', summaryParts.join(' · '));
+    header.append(title, summary);
+    const toolbar = element('div', 'omni-shp__toolbar');
+    const zoomIn = button(t('shapefile.zoomIn'));
+    const zoomOut = button(t('shapefile.zoomOut'));
+    const reset = button(t('shapefile.reset'));
+    toolbar.append(zoomIn, zoomOut, reset);
+    if (projectionLabel)
+        toolbar.append(element('span', 'omni-shp__projection', t('shapefile.projection', { name: projectionLabel })));
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.classList.add('omni-shp__map');
+    svg.setAttribute('role', 'img');
+    const initialView = renderModel(svg, model);
+    let view = initialView ? { ...initialView } : null;
+    const attributesPanel = element('div', 'omni-shp__attributes');
+    const attributesTitle = element('div', 'omni-shp__attributes-title', t('shapefile.attributes'));
+    const attributesBody = element('div');
+    attributesBody.className = 'omni-shp__attributes-empty';
+    attributesBody.textContent = t('shapefile.noSelection');
+    attributesPanel.append(attributesTitle, attributesBody);
+    const warning = element('div', 'omni-shp__warning');
+    warning.hidden = warnings.length === 0;
+    warning.textContent = warnings.join('\n');
+    shell.append(header, toolbar, svg, attributesPanel, warning);
+    root.append(shell);
+    // --- pan / zoom ---------------------------------------------------------
+    const applyView = () => {
+        if (view)
+            svg.setAttribute('viewBox', `${view.x} ${view.y} ${view.w} ${view.h}`);
+    };
+    const zoomAt = (factor, cx, cy) => {
+        if (!view)
+            return;
+        const centerX = cx ?? view.x + view.w / 2;
+        const centerY = cy ?? view.y + view.h / 2;
+        view = {
+            x: centerX - (centerX - view.x) / factor,
+            y: centerY - (centerY - view.y) / factor,
+            w: view.w / factor,
+            h: view.h / factor
+        };
+        applyView();
+    };
+    listen(zoomIn, 'click', () => zoomAt(ZOOM_FACTOR));
+    listen(zoomOut, 'click', () => zoomAt(1 / ZOOM_FACTOR));
+    listen(reset, 'click', () => { if (initialView) {
+        view = { ...initialView };
+        applyView();
+    } });
+    listen(svg, 'wheel', ((event) => {
+        if (!view)
+            return;
+        event.preventDefault();
+        const rect = svg.getBoundingClientRect();
+        const point = rect.width > 0 && rect.height > 0
+            ? {
+                x: view.x + ((event.clientX - rect.left) / rect.width) * view.w,
+                y: view.y + ((event.clientY - rect.top) / rect.height) * view.h
+            }
+            : undefined;
+        zoomAt(event.deltaY > 0 ? 1 / ZOOM_FACTOR : ZOOM_FACTOR, point?.x, point?.y);
+    }), { passive: false });
+    let panFrom = null;
+    listen(svg, 'pointerdown', ((event) => {
+        if (!view)
+            return;
+        panFrom = { clientX: event.clientX, clientY: event.clientY, view: { ...view } };
+        svg.classList.add('is-panning');
+    }));
+    listen(document, 'pointermove', ((event) => {
+        if (!panFrom || !view)
+            return;
+        const rect = svg.getBoundingClientRect();
+        if (rect.width <= 0 || rect.height <= 0)
+            return;
+        view = {
+            ...view,
+            x: panFrom.view.x - ((event.clientX - panFrom.clientX) / rect.width) * panFrom.view.w,
+            y: panFrom.view.y - ((event.clientY - panFrom.clientY) / rect.height) * panFrom.view.h
+        };
+        applyView();
+    }));
+    listen(document, 'pointerup', (() => {
+        panFrom = null;
+        svg.classList.remove('is-panning');
+    }));
+    // --- feature selection ---------------------------------------------------
+    let selected = null;
+    const renderAttributes = (featureIndex) => {
+        const feature = model.features[featureIndex];
+        attributesTitle.textContent = `${t('shapefile.attributes')} — ${t('shapefile.featureLabel', { id: feature?.id ?? featureIndex + 1 })}`;
+        const record = attributes?.records[featureIndex];
+        if (!record) {
+            attributesBody.className = 'omni-shp__attributes-empty';
+            attributesBody.textContent = t(attributes ? 'shapefile.noRecord' : 'shapefile.noAttributes');
+            return;
+        }
+        attributesBody.className = '';
+        const table = document.createElement('table');
+        for (const field of attributes.fields) {
+            const row = document.createElement('tr');
+            const name = document.createElement('th');
+            name.textContent = field.name;
+            const value = document.createElement('td');
+            value.textContent = formatValue(record[field.name]);
+            row.append(name, value);
+            table.append(row);
+        }
+        attributesBody.replaceChildren(table);
+    };
+    listen(svg, 'click', ((event) => {
+        const target = event.target.closest?.('[data-feature]');
+        selected?.classList.remove('is-selected');
+        if (!target) {
+            selected = null;
+            attributesTitle.textContent = t('shapefile.attributes');
+            attributesBody.className = 'omni-shp__attributes-empty';
+            attributesBody.textContent = t('shapefile.noSelection');
+            return;
+        }
+        selected = target;
+        target.classList.add('is-selected');
+        renderAttributes(Number(target.getAttribute('data-feature')));
+    }));
+    if (options.signal?.aborted) {
+        disposers.forEach((dispose) => dispose());
+        shell.remove();
+        throw new MountAbortedError();
+    }
+    return {
+        dispose() {
+            disposers.forEach((dispose) => dispose());
+            shell.remove();
+            if (root === container)
+                container.classList.remove(VIEWER_ROOT_CLASS, 'omni-viewer--shapefile');
+            else
+                root.replaceChildren();
+        }
+    };
+}
+// --- SVG rendering (source coordinates, y flipped) ---------------------------
+function renderModel(svg, model) {
+    const bbox = model.bbox && (model.bbox[2] > model.bbox[0] || model.bbox[3] > model.bbox[1])
+        ? model.bbox
+        : deriveBBox(model);
+    if (!bbox)
+        return null;
+    const [minX, minY, maxX, maxY] = bbox;
+    const span = Math.max(maxX - minX, maxY - minY);
+    const pad = span * 0.03 || 1;
+    const viewWidth = maxX - minX + 2 * pad;
+    const viewHeight = maxY - minY + 2 * pad;
+    const pointRadius = Math.max(viewWidth, viewHeight) * 0.006;
+    const view = { x: minX - pad, y: -(maxY + pad), w: viewWidth, h: viewHeight };
+    svg.setAttribute('viewBox', `${view.x} ${view.y} ${view.w} ${view.h}`);
+    model.features.forEach((feature, index) => {
+        if (feature.geometry)
+            appendGeometry(svg, feature.geometry, pointRadius, index);
+    });
+    return view;
+}
+function appendGeometry(svg, g, pointRadius, featureIndex) {
+    const ns = 'http://www.w3.org/2000/svg';
+    const tag = (node) => node.setAttribute('data-feature', String(featureIndex));
+    const point = (coordinates) => {
+        const c = document.createElementNS(ns, 'circle');
+        c.classList.add('omni-shp__point');
+        c.setAttribute('cx', String(coordinates[0]));
+        c.setAttribute('cy', String(-coordinates[1]));
+        c.setAttribute('r', String(pointRadius));
+        tag(c);
+        svg.append(c);
+    };
+    if (g.type === 'Point') {
+        point(g.coordinates);
+        return;
+    }
+    if (g.type === 'MultiPoint') {
+        g.coordinates.forEach(point);
+        return;
+    }
+    if (g.type === 'LineString' || g.type === 'MultiLineString') {
+        const groups = g.type === 'LineString' ? [g.coordinates] : g.coordinates;
+        for (const points of groups) {
+            const p = document.createElementNS(ns, 'path');
+            p.classList.add('omni-shp__geometry');
+            p.setAttribute('d', points.map((x, i) => `${i ? 'L' : 'M'}${x[0]} ${-x[1]}`).join(' '));
+            p.setAttribute('fill', 'none');
+            tag(p);
+            svg.append(p);
+        }
+        return;
+    }
+    const polygons = g.type === 'Polygon' ? [g.coordinates] : g.coordinates;
+    for (const rings of polygons) {
+        const p = document.createElementNS(ns, 'path');
+        p.classList.add('omni-shp__geometry');
+        p.setAttribute('d', rings.map(points => points.map((x, i) => `${i ? 'L' : 'M'}${x[0]} ${-x[1]}`).join(' ') + ' Z').join(' '));
+        p.setAttribute('fill-rule', 'evenodd');
+        p.setAttribute('clip-rule', 'evenodd');
+        tag(p);
+        svg.append(p);
+    }
+}
+function deriveBBox(model) {
+    let b = null;
+    const visit = (p) => {
+        b = b ? [Math.min(b[0], p[0]), Math.min(b[1], p[1]), Math.max(b[2], p[0]), Math.max(b[3], p[1])] : [p[0], p[1], p[0], p[1]];
+    };
+    for (const f of model.features) {
+        const g = f.geometry;
+        if (!g)
+            continue;
+        if (g.type === 'Point')
+            visit(g.coordinates);
+        else if (g.type === 'MultiLineString' || g.type === 'Polygon')
+            for (const ring of g.coordinates)
+                ring.forEach(visit);
+        else if (g.type === 'MultiPolygon')
+            for (const polygon of g.coordinates)
+                for (const ring of polygon)
+                    ring.forEach(visit);
+        else
+            g.coordinates.forEach(visit);
+    }
+    return b;
+}
+function formatValue(value) {
+    if (value === null || value === undefined || value === '')
+        return '—';
+    if (typeof value === 'boolean')
+        return value ? 'true' : 'false';
+    return String(value);
+}
+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) {
+    const node = document.createElement('button');
+    node.type = 'button';
+    node.className = 'omni-shp__btn';
+    node.textContent = label;
+    return node;
+}

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

@@ -0,0 +1,7 @@
+import type { ShapefileMountOptions, ShapefileViewerContext } from './index.js';
+import type { ViewerHandle, ViewerInput } from '../types.js';
+export * from './index.js';
+/** mountShapefileViewer with a proj4-backed WKT→WGS84 reprojector. Because
+ *  mount options are synchronous, proj4 is loaded first; when the peer is
+ *  missing the viewer simply renders native coordinates. */
+export declare function mountSelfLoadingShapefileViewer(input: ViewerInput, container: HTMLElement, ctx: ShapefileViewerContext, options?: Omit<ShapefileMountOptions, 'createReprojector'>): Promise<ViewerHandle>;

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

@@ -0,0 +1,32 @@
+// Opt-in self-loading entry (ADR 14): the only place in the core where the
+// optional peer `proj4` is actually imported. Platforms whose bundler
+// resolves the peer use this; others import `viewers/shapefile` and inject
+// their own `createReprojector`.
+import { mountShapefileViewer } from './index.js';
+export * from './index.js';
+let proj4Promise;
+async function loadProj4() {
+    proj4Promise ??= import('proj4')
+        .then((module) => {
+        const mod = module;
+        return mod.default ?? module;
+    })
+        .catch(() => null);
+    return proj4Promise;
+}
+/** mountShapefileViewer with a proj4-backed WKT→WGS84 reprojector. Because
+ *  mount options are synchronous, proj4 is loaded first; when the peer is
+ *  missing the viewer simply renders native coordinates. */
+export async function mountSelfLoadingShapefileViewer(input, container, ctx, options = {}) {
+    const proj4 = await loadProj4();
+    const createReprojector = proj4
+        ? (wkt) => {
+            const transform = proj4(wkt, 'EPSG:4326');
+            return (position) => transform.forward([position[0], position[1]]);
+        }
+        : undefined;
+    return mountShapefileViewer(input, container, ctx, {
+        ...options,
+        ...(createReprojector ? { createReprojector } : {})
+    });
+}

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

@@ -0,0 +1 @@
+export declare const shapefileViewerCss = "\n.omni-shp{box-sizing:border-box;min-height:100%;padding:16px;background:var(--omni-bg,#1e1e1e);color:var(--omni-fg,#ddd);font:14px/1.45 system-ui,sans-serif}\n.omni-shp *{box-sizing:border-box}\n.omni-shp__header{display:flex;justify-content:space-between;gap:16px;margin-bottom:12px}\n.omni-shp__title{font-size:18px;font-weight:650}\n.omni-shp__summary{color:var(--omni-muted,#aaa)}\n.omni-shp__toolbar{display:flex;align-items:center;gap:8px;margin-bottom:10px}\n.omni-shp__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}\n.omni-shp__btn:hover{background:var(--omni-accent-hover,#1177bb)}\n.omni-shp__projection{margin-left:auto;color:var(--omni-muted,#aaa);font-size:12px}\n.omni-shp__map{width:100%;height:min(62vh,640px);border:1px solid var(--omni-border,#444);border-radius:8px;background:#eef2f5;cursor:grab;touch-action:none}\n.omni-shp__map.is-panning{cursor:grabbing}\n.omni-shp__geometry{fill:rgba(47,126,216,.24);stroke:#1d66b1;stroke-width:1.5;vector-effect:non-scaling-stroke}\n.omni-shp__geometry:hover{fill:rgba(47,126,216,.42)}\n.omni-shp__point{fill:#d64045;stroke:#fff;vector-effect:non-scaling-stroke}\n.omni-shp__point:hover{fill:#ff5a60}\n.omni-shp__geometry.is-selected,.omni-shp__point.is-selected{stroke:#ffb020;stroke-width:2.5}\n.omni-shp__attributes{margin-top:10px;border:1px solid var(--omni-border,#444);border-radius:8px;background:var(--omni-panel-bg,#252526);padding:10px 12px}\n.omni-shp__attributes-title{font-weight:600;margin-bottom:6px}\n.omni-shp__attributes-empty{color:var(--omni-muted,#aaa)}\n.omni-shp__attributes table{border-collapse:collapse;width:100%}\n.omni-shp__attributes th,.omni-shp__attributes td{text-align:left;border-bottom:1px solid var(--omni-border,#3a3a3a);padding:3px 8px;font-size:12px}\n.omni-shp__attributes th{color:var(--omni-muted,#aaa);font-weight:500;width:35%}\n.omni-shp__warning{margin-top:10px;padding:10px;border:1px solid #b98b2f;border-radius:6px;background:#3b2d10;color:#ffd98a;white-space:pre-wrap}\n.omni-shp__warning[hidden]{display:none}\n";

package/dist/viewers/shapefile/styles.js

@@ -0,0 +1,28 @@
+// Shapefile viewer stylesheet. Single source for both delivery forms
+// (DESIGN.md §6). Only --omni-* tokens.
+export const shapefileViewerCss = `
+.omni-shp{box-sizing:border-box;min-height:100%;padding:16px;background:var(--omni-bg,#1e1e1e);color:var(--omni-fg,#ddd);font:14px/1.45 system-ui,sans-serif}
+.omni-shp *{box-sizing:border-box}
+.omni-shp__header{display:flex;justify-content:space-between;gap:16px;margin-bottom:12px}
+.omni-shp__title{font-size:18px;font-weight:650}
+.omni-shp__summary{color:var(--omni-muted,#aaa)}
+.omni-shp__toolbar{display:flex;align-items:center;gap:8px;margin-bottom:10px}
+.omni-shp__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-shp__btn:hover{background:var(--omni-accent-hover,#1177bb)}
+.omni-shp__projection{margin-left:auto;color:var(--omni-muted,#aaa);font-size:12px}
+.omni-shp__map{width:100%;height:min(62vh,640px);border:1px solid var(--omni-border,#444);border-radius:8px;background:#eef2f5;cursor:grab;touch-action:none}
+.omni-shp__map.is-panning{cursor:grabbing}
+.omni-shp__geometry{fill:rgba(47,126,216,.24);stroke:#1d66b1;stroke-width:1.5;vector-effect:non-scaling-stroke}
+.omni-shp__geometry:hover{fill:rgba(47,126,216,.42)}
+.omni-shp__point{fill:#d64045;stroke:#fff;vector-effect:non-scaling-stroke}
+.omni-shp__point:hover{fill:#ff5a60}
+.omni-shp__geometry.is-selected,.omni-shp__point.is-selected{stroke:#ffb020;stroke-width:2.5}
+.omni-shp__attributes{margin-top:10px;border:1px solid var(--omni-border,#444);border-radius:8px;background:var(--omni-panel-bg,#252526);padding:10px 12px}
+.omni-shp__attributes-title{font-weight:600;margin-bottom:6px}
+.omni-shp__attributes-empty{color:var(--omni-muted,#aaa)}
+.omni-shp__attributes table{border-collapse:collapse;width:100%}
+.omni-shp__attributes th,.omni-shp__attributes td{text-align:left;border-bottom:1px solid var(--omni-border,#3a3a3a);padding:3px 8px;font-size:12px}
+.omni-shp__attributes th{color:var(--omni-muted,#aaa);font-weight:500;width:35%}
+.omni-shp__warning{margin-top:10px;padding:10px;border:1px solid #b98b2f;border-radius:6px;background:#3b2d10;color:#ffd98a;white-space:pre-wrap}
+.omni-shp__warning[hidden]{display:none}
+`;

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

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

package/dist/viewers/stp/index.js

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

package/dist/viewers/structured-styles.d.ts

@@ -0,0 +1 @@
+export declare const structuredViewerCss = ":host,.omni-viewer--toml,.omni-viewer--yaml{display:block;height:100%;color:var(--omni-fg,#ddd);background:var(--omni-bg,#1e1e1e);font:13px var(--omni-font,system-ui)}.omni-structured{height:100%;display:flex;flex-direction:column;box-sizing:border-box}.omni-structured__bar{display:flex;gap:5px;align-items:center;padding:6px;border-bottom:1px solid var(--omni-border,#444)}.omni-structured button,.omni-structured input,.omni-structured select{font:inherit;background:var(--omni-button-bg,#333);color:inherit;border:1px solid var(--omni-border,#555);border-radius:3px;padding:3px 7px}.omni-structured button:disabled{opacity:.5}.omni-structured__search{min-width:180px}.omni-structured__diagnostics{white-space:pre-wrap;color:var(--omni-error,#f48771);padding:6px;border-bottom:1px solid var(--omni-border,#444)}.omni-structured__workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:12px;flex:1;min-height:0;padding:12px}.omni-structured__pane{display:flex;flex-direction:column;min-width:0;min-height:0;border:1px solid var(--omni-border,#444);border-radius:8px;overflow:hidden;background:var(--omni-input-bg,#171717)}.omni-structured__pane-header{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1px solid var(--omni-border,#444)}.omni-structured__pane-header span{color:var(--omni-fg-muted,#999)}.omni-structured__editor,.omni-structured__tree{box-sizing:border-box;flex:1;min-height:0;padding:10px;background:transparent;color:inherit;font:inherit;font-family:var(--omni-font-mono,ui-monospace,monospace)}.omni-structured__editor{resize:none;border:0;outline:none;line-height:1.5;white-space:pre;overflow:auto}.omni-structured__source-surface{position:relative;flex:1;min-height:0;overflow:hidden}.omni-structured__source-highlight{position:absolute;inset:0;box-sizing:border-box;margin:0;padding:10px;overflow:auto;pointer-events:none;font:inherit;font-family:var(--omni-font-mono,ui-monospace,monospace);line-height:1.5;white-space:pre}.omni-structured__pane--highlighted-source .omni-structured__editor{position:relative;z-index:1;width:100%;height:100%;padding:10px;color:transparent;caret-color:var(--omni-fg,#ddd);-webkit-text-fill-color:transparent}.omni-structured__source-key{color:#9cdcfe}.omni-structured__source-value{color:#ce9178}.omni-structured__source-table{color:#c586c0}.omni-structured__source-comment{color:var(--omni-fg-muted,#999)}.omni-structured__tree{overflow:auto}.omni-structured__node{display:flex;gap:6px;align-items:baseline;min-height:25px}.omni-structured__toggle{width:24px;padding:0!important;border:0!important;background:transparent!important}.omni-structured__key{color:var(--omni-accent,#5aa9e6)}.omni-structured__kind{color:var(--omni-fg-muted,#999)}.omni-structured__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.omni-structured__actions{margin-left:auto;display:flex;gap:4px;opacity:0}.omni-structured__node:hover .omni-structured__actions,.omni-structured__actions:focus-within{opacity:1}.omni-structured__raw-preview,.omni-structured__json-preview{flex:1;min-height:0;margin:0;padding:10px;overflow:auto;font-family:var(--omni-font-mono,ui-monospace,monospace);line-height:1.5}.omni-structured__flat-row .omni-structured__key{flex-shrink:0}@media(max-width:720px){.omni-structured__workspace{grid-template-columns:1fr;overflow:auto}.omni-structured__pane{min-height:320px}}";

package/dist/viewers/structured-styles.js

@@ -0,0 +1 @@
+export const structuredViewerCss = `:host,.omni-viewer--toml,.omni-viewer--yaml{display:block;height:100%;color:var(--omni-fg,#ddd);background:var(--omni-bg,#1e1e1e);font:13px var(--omni-font,system-ui)}.omni-structured{height:100%;display:flex;flex-direction:column;box-sizing:border-box}.omni-structured__bar{display:flex;gap:5px;align-items:center;padding:6px;border-bottom:1px solid var(--omni-border,#444)}.omni-structured button,.omni-structured input,.omni-structured select{font:inherit;background:var(--omni-button-bg,#333);color:inherit;border:1px solid var(--omni-border,#555);border-radius:3px;padding:3px 7px}.omni-structured button:disabled{opacity:.5}.omni-structured__search{min-width:180px}.omni-structured__diagnostics{white-space:pre-wrap;color:var(--omni-error,#f48771);padding:6px;border-bottom:1px solid var(--omni-border,#444)}.omni-structured__workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:12px;flex:1;min-height:0;padding:12px}.omni-structured__pane{display:flex;flex-direction:column;min-width:0;min-height:0;border:1px solid var(--omni-border,#444);border-radius:8px;overflow:hidden;background:var(--omni-input-bg,#171717)}.omni-structured__pane-header{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1px solid var(--omni-border,#444)}.omni-structured__pane-header span{color:var(--omni-fg-muted,#999)}.omni-structured__editor,.omni-structured__tree{box-sizing:border-box;flex:1;min-height:0;padding:10px;background:transparent;color:inherit;font:inherit;font-family:var(--omni-font-mono,ui-monospace,monospace)}.omni-structured__editor{resize:none;border:0;outline:none;line-height:1.5;white-space:pre;overflow:auto}.omni-structured__source-surface{position:relative;flex:1;min-height:0;overflow:hidden}.omni-structured__source-highlight{position:absolute;inset:0;box-sizing:border-box;margin:0;padding:10px;overflow:auto;pointer-events:none;font:inherit;font-family:var(--omni-font-mono,ui-monospace,monospace);line-height:1.5;white-space:pre}.omni-structured__pane--highlighted-source .omni-structured__editor{position:relative;z-index:1;width:100%;height:100%;padding:10px;color:transparent;caret-color:var(--omni-fg,#ddd);-webkit-text-fill-color:transparent}.omni-structured__source-key{color:#9cdcfe}.omni-structured__source-value{color:#ce9178}.omni-structured__source-table{color:#c586c0}.omni-structured__source-comment{color:var(--omni-fg-muted,#999)}.omni-structured__tree{overflow:auto}.omni-structured__node{display:flex;gap:6px;align-items:baseline;min-height:25px}.omni-structured__toggle{width:24px;padding:0!important;border:0!important;background:transparent!important}.omni-structured__key{color:var(--omni-accent,#5aa9e6)}.omni-structured__kind{color:var(--omni-fg-muted,#999)}.omni-structured__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.omni-structured__actions{margin-left:auto;display:flex;gap:4px;opacity:0}.omni-structured__node:hover .omni-structured__actions,.omni-structured__actions:focus-within{opacity:1}.omni-structured__raw-preview,.omni-structured__json-preview{flex:1;min-height:0;margin:0;padding:10px;overflow:auto;font-family:var(--omni-font-mono,ui-monospace,monospace);line-height:1.5}.omni-structured__flat-row .omni-structured__key{flex-shrink:0}@media(max-width:720px){.omni-structured__workspace{grid-template-columns:1fr;overflow:auto}.omni-structured__pane{min-height:320px}}`;

package/dist/viewers/structured.d.ts

@@ -0,0 +1,36 @@
+import type { ClipboardService, FileSaveService, FileWritebackService, HostContext } from '../host/index.js';
+import { type MountOptions, type ViewerHandle, type ViewerInput } from './types.js';
+export interface StructuredNode {
+    key: string;
+    path: string;
+    kind: string;
+    raw?: string;
+    value?: unknown;
+    children?: readonly StructuredNode[];
+}
+export interface StructuredState {
+    text: string;
+    mode: 'tree' | 'flat' | 'json' | 'raw';
+    search: string;
+    expanded: ReadonlySet<string>;
+    diagnostics: readonly {
+        messageKey: string;
+        location?: string;
+    }[];
+}
+export interface StructuredController<S extends StructuredState> {
+    readonly state: S;
+    subscribe(listener: (state: S) => void): () => void;
+    dispatch(action: unknown): void;
+    nodePath(id: string): string;
+    nodeValue(id: string): string;
+    nodeJson?(id: string): string;
+    documentJson?(): string;
+}
+export type StructuredContext = HostContext & {
+    clipboard?: ClipboardService;
+    save?: FileSaveService;
+    writeback?: FileWritebackService;
+};
+export type StructuredSourceHighlighter = (target: HTMLElement, text: string) => void;
+export declare function mountStructured<S extends StructuredState>(input: ViewerInput, container: HTMLElement, ctx: StructuredContext, options: MountOptions, className: string, css: string, controller: StructuredController<S>, sourceHighlighter?: StructuredSourceHighlighter): ViewerHandle;

package/dist/viewers/structured.js

@@ -0,0 +1,138 @@
+import { asciiLower } from '../parsers/csv/index.js';
+import { VIEWER_ROOT_CLASS } from './types.js';
+export function mountStructured(input, container, ctx, options, className, css, controller, sourceHighlighter) {
+    let root;
+    if ((options.styleIsolation ?? 'shadow') === 'shadow' && typeof container.attachShadow === 'function') {
+        root = container.shadowRoot ?? container.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = css;
+        root.append(style);
+    }
+    else {
+        container.classList.add(VIEWER_ROOT_CLASS, className);
+        root = container;
+    }
+    const el = (tag, cls, value) => { const node = document.createElement(tag); if (cls)
+        node.className = cls; if (value !== undefined)
+        node.textContent = value; return node; };
+    const frame = el('div', 'omni-structured');
+    root.append(frame);
+    const disposers = [];
+    const on = (node, type, listener) => { node.addEventListener(type, listener); disposers.push(() => node.removeEventListener(type, listener)); };
+    const toolbar = el('div', 'omni-structured__bar');
+    const expand = el('button', undefined, ctx.i18n.t('structured.expandAll'));
+    const collapse = el('button', undefined, ctx.i18n.t('structured.collapseAll'));
+    const search = el('input', 'omni-structured__search');
+    const documentSelect = el('select');
+    const save = el('button', undefined, ctx.i18n.t('json.save'));
+    const saveAs = el('button', undefined, ctx.i18n.t('json.saveAs'));
+    search.type = 'search';
+    search.placeholder = ctx.i18n.t('structured.search');
+    [expand, collapse, save, saveAs].forEach(button => { button.type = 'button'; });
+    on(expand, 'click', () => controller.dispatch({ type: 'expand-all' }));
+    on(collapse, 'click', () => controller.dispatch({ type: 'collapse-all' }));
+    on(search, 'input', () => controller.dispatch({ type: 'set-search', search: search.value }));
+    on(save, 'click', () => { if (ctx.writeback)
+        void ctx.writeback.write(new TextEncoder().encode(controller.state.text)); });
+    on(saveAs, 'click', () => { if (ctx.save)
+        void ctx.save.saveFile(input.fileName, new TextEncoder().encode(controller.state.text), 'text/plain'); });
+    toolbar.append(expand, collapse, search, documentSelect, save, saveAs);
+    const diagnostics = el('div', 'omni-structured__diagnostics');
+    diagnostics.setAttribute('aria-live', 'polite');
+    const workspace = el('div', 'omni-structured__workspace');
+    const sourcePane = el('section', 'omni-structured__pane omni-structured__editor-pane');
+    const sourceHeader = el('header', 'omni-structured__pane-header');
+    sourceHeader.append(el('strong', undefined, ctx.i18n.t('json.editor.title')), el('span', undefined, ctx.i18n.t('json.editor.description')));
+    const editor = el('textarea', 'omni-structured__editor');
+    editor.spellcheck = false;
+    on(editor, 'input', () => controller.dispatch({ type: 'edit-source', text: editor.value }));
+    const sourceHighlight = sourceHighlighter ? el('pre', 'omni-structured__source-highlight') : undefined;
+    if (sourceHighlight) {
+        const surface = el('div', 'omni-structured__source-surface');
+        surface.append(sourceHighlight, editor);
+        on(editor, 'scroll', () => { sourceHighlight.scrollTop = editor.scrollTop; sourceHighlight.scrollLeft = editor.scrollLeft; });
+        sourcePane.classList.add('omni-structured__pane--highlighted-source');
+        sourcePane.append(sourceHeader, surface);
+    }
+    else
+        sourcePane.append(sourceHeader, editor);
+    const previewPane = el('section', 'omni-structured__pane omni-structured__preview-pane');
+    const previewHeader = el('header', 'omni-structured__pane-header');
+    const treeMode = el('button', undefined, ctx.i18n.t('structured.tree'));
+    const flatMode = el('button', undefined, ctx.i18n.t('structured.flat'));
+    const jsonMode = el('button', undefined, ctx.i18n.t('structured.json'));
+    const rawMode = el('button', undefined, ctx.i18n.t('structured.raw'));
+    treeMode.type = flatMode.type = jsonMode.type = rawMode.type = 'button';
+    on(treeMode, 'click', () => controller.dispatch({ type: 'set-mode', mode: 'tree' }));
+    on(flatMode, 'click', () => controller.dispatch({ type: 'set-mode', mode: 'flat' }));
+    on(jsonMode, 'click', () => controller.dispatch({ type: 'set-mode', mode: 'json' }));
+    on(rawMode, 'click', () => controller.dispatch({ type: 'set-mode', mode: 'raw' }));
+    const modes = el('span', 'omni-structured__preview-modes');
+    modes.append(treeMode, flatMode);
+    if (controller.documentJson)
+        modes.append(jsonMode);
+    modes.append(rawMode);
+    previewHeader.append(el('strong', undefined, ctx.i18n.t('json.preview.title')), el('span', undefined, ctx.i18n.t('structured.treeDescription')), modes);
+    const treeBody = el('div', 'omni-structured__tree');
+    const flatBody = el('div', 'omni-structured__tree omni-structured__flat');
+    const jsonPreview = el('pre', 'omni-structured__json-preview');
+    const rawPreview = el('pre', 'omni-structured__raw-preview');
+    previewPane.append(previewHeader, treeBody, flatBody, jsonPreview, rawPreview);
+    workspace.append(sourcePane, previewPane);
+    frame.append(toolbar, diagnostics, workspace);
+    const copy = (value) => { if (value !== undefined)
+        void ctx.clipboard?.writeText(value); };
+    const subtreeMatches = (node, query) => !query || asciiLower(`${node.key} ${node.path} ${node.raw ?? node.value ?? ''}`).includes(query) || !!node.children?.some(child => subtreeMatches(child, query));
+    const renderFlatRows = (node, query, out) => { if (node.children?.length) {
+        for (const child of node.children)
+            renderFlatRows(child, query, out);
+        return;
+    } const value = node.raw ?? String(node.value ?? ''); if (query && !asciiLower(`${node.key} ${node.path} ${value}`).includes(query))
+        return; const row = el('div', 'omni-structured__node omni-structured__flat-row'); row.append(el('span', 'omni-structured__key', node.path || '$'), el('span', 'omni-structured__value', value)); out.push(row); };
+    const renderNode = (node, depth, state) => { const id = node.path || '$', query = asciiLower(state.search.trim()); if (!subtreeMatches(node, query))
+        return null; const wrap = el('div'); const row = el('div', 'omni-structured__node'); row.style.paddingInlineStart = `${depth * 16}px`; const hasChildren = !!node.children?.length; if (hasChildren) {
+        const toggle = el('button', 'omni-structured__toggle', state.expanded.has(id) ? '▾' : '▸');
+        toggle.type = 'button';
+        toggle.setAttribute('aria-expanded', String(state.expanded.has(id)));
+        toggle.setAttribute('aria-label', ctx.i18n.t(state.expanded.has(id) ? 'structured.collapse' : 'structured.expand'));
+        toggle.addEventListener('click', () => controller.dispatch({ type: 'toggle-node', id }));
+        row.append(toggle);
+    }
+    else
+        row.append(el('span', 'omni-structured__toggle')); row.append(el('span', 'omni-structured__key', node.key || '$'), el('span', 'omni-structured__kind', node.kind), el('span', 'omni-structured__value', node.raw ?? String(node.value ?? ''))); const actions = el('span', 'omni-structured__actions'); for (const [key, value] of [['structured.copyPath', controller.nodePath(id)], ['structured.copyValue', controller.nodeValue(id)], ['structured.copyJson', controller.nodeJson?.(id)]]) {
+        if (value === undefined)
+            continue;
+        const button = el('button', undefined, ctx.i18n.t(key));
+        button.type = 'button';
+        button.disabled = !ctx.clipboard;
+        button.title = ctx.clipboard ? '' : ctx.i18n.t('common.noClipboard');
+        button.addEventListener('click', () => copy(value));
+        actions.append(button);
+    } row.append(actions); wrap.append(row); if (hasChildren && state.expanded.has(id))
+        for (const child of node.children) {
+            const rendered = renderNode(child, depth + 1, state);
+            if (rendered)
+                wrap.append(rendered);
+        } return wrap; };
+    const render = (state) => { if (editor.value !== state.text && document.activeElement !== editor)
+        editor.value = state.text; if (sourceHighlight && sourceHighlighter)
+        sourceHighlighter(sourceHighlight, state.text); if (sourceHighlighter)
+        sourceHighlighter(rawPreview, state.text);
+    else
+        rawPreview.textContent = state.text; search.value = state.search; treeMode.setAttribute('aria-pressed', String(state.mode === 'tree')); flatMode.setAttribute('aria-pressed', String(state.mode === 'flat')); jsonMode.setAttribute('aria-pressed', String(state.mode === 'json')); rawMode.setAttribute('aria-pressed', String(state.mode === 'raw')); treeBody.style.display = state.mode === 'tree' ? '' : 'none'; flatBody.style.display = state.mode === 'flat' ? '' : 'none'; jsonPreview.style.display = state.mode === 'json' ? '' : 'none'; rawPreview.style.display = state.mode === 'raw' ? '' : 'none'; jsonPreview.textContent = state.mode === 'json' ? controller.documentJson?.() ?? '' : ''; expand.disabled = collapse.disabled = state.mode !== 'tree'; save.disabled = !ctx.writeback; save.title = ctx.writeback ? '' : ctx.i18n.t('common.noWriteback'); saveAs.disabled = !ctx.save; saveAs.title = ctx.save ? '' : ctx.i18n.t('common.noFileSave'); diagnostics.replaceChildren(); diagnostics.style.display = state.diagnostics.length ? '' : 'none'; for (const diagnostic of state.diagnostics)
+        diagnostics.append(el('div', undefined, `${ctx.i18n.t(diagnostic.messageKey)}${diagnostic.location ? ` (${diagnostic.location})` : ''}`)); const shaped = state; const docs = shaped.documents; documentSelect.replaceChildren(); documentSelect.style.display = docs && docs.length > 1 ? '' : 'none'; if (docs && docs.length > 1) {
+        docs.forEach((_, index) => { const option = el('option', undefined, String(index + 1)); option.value = String(index); option.selected = index === shaped.selectedDocument; documentSelect.append(option); });
+        documentSelect.onchange = () => controller.dispatch({ type: 'select-document', index: Number(documentSelect.value) });
+    } treeBody.replaceChildren(); flatBody.replaceChildren(); const roots = shaped.root ? [shaped.root] : docs ? [docs[shaped.selectedDocument ?? 0]].filter((node) => !!node) : []; roots.forEach(node => { const rendered = renderNode(node, 0, state); if (rendered)
+        treeBody.append(rendered); }); if (state.mode === 'flat') {
+        const rows = [];
+        roots.forEach(node => renderFlatRows(node, asciiLower(state.search.trim()), rows));
+        flatBody.append(...rows);
+    } };
+    const unsubscribe = controller.subscribe(render);
+    render(controller.state);
+    return { dispose() { unsubscribe(); disposers.splice(0).forEach(dispose => dispose()); frame.remove(); if (root instanceof ShadowRoot)
+            root.replaceChildren();
+        else
+            container.classList.remove(VIEWER_ROOT_CLASS, className); } };
+}