@flyfish-dev/dwf-viewer 0.5.0

package/dist/viewer/DwfViewer.js

@@ -0,0 +1,386 @@
+import { openDwfDocument } from '../format/open.js';
+import { transformPoint } from '../render/style.js';
+import { fitPageMatrix, matrixForW2d } from '../render/viewport.js';
+import { PageRenderer } from '../render/PageRenderer.js';
+export class DwfViewer {
+    constructor(container, options = {}) {
+        this.pageIndex = 0;
+        this.zoom = 1;
+        this.panX = 0;
+        this.panY = 0;
+        this.yaw = -0.78;
+        this.pitch = 0.55;
+        this.renderRaf = 0;
+        this.renderSeq = 0;
+        this.currentDpr = 1;
+        this.preferWebgl = options.preferWebgl ?? true;
+        this.preferWasm = options.preferWasm ?? true;
+        this.wasmUrl = options.wasmUrl;
+        this.background = options.background ?? '#ffffff';
+        this.maxDevicePixelRatio = options.maxDevicePixelRatio ?? 2;
+        this.maxCanvasPixels = options.maxCanvasPixels ?? 16777216;
+        this.maxGpuCacheBytes = options.maxGpuCacheBytes;
+        this.maxCachedScenes = options.maxCachedScenes;
+        this.root = document.createElement('div');
+        this.root.className = 'dwfv-root';
+        const toolbar = document.createElement('div');
+        toolbar.className = 'dwfv-toolbar';
+        this.pageSelect = document.createElement('select');
+        this.zoomOutButton = button('−');
+        this.zoomInButton = button('+');
+        this.resetButton = button('适应');
+        this.status = document.createElement('span');
+        this.status.className = 'dwfv-status';
+        toolbar.append('页: ', this.pageSelect, this.zoomOutButton, this.zoomInButton, this.resetButton, this.status);
+        const workspace = document.createElement('div');
+        workspace.className = 'dwfv-workspace';
+        this.treePanel = document.createElement('div');
+        this.treePanel.className = 'dwfv-tree';
+        this.treePanel.style.display = 'none';
+        const stage = document.createElement('div');
+        stage.className = 'dwfv-stage';
+        this.webglCanvas = document.createElement('canvas');
+        this.webglCanvas.className = 'dwfv-canvas dwfv-webgl-canvas';
+        this.webglCanvas.style.visibility = 'hidden';
+        this.canvas = document.createElement('canvas');
+        this.canvas.className = 'dwfv-canvas dwfv-overlay-canvas';
+        this.canvas.style.touchAction = 'none';
+        stage.append(this.webglCanvas, this.canvas);
+        workspace.append(this.treePanel, stage);
+        this.root.append(toolbar, workspace);
+        container.replaceChildren(this.root);
+        this.pageSelect.addEventListener('change', () => { this.pageIndex = this.pageSelect.selectedIndex; this.resetView(); this.populateModelTree(); this.requestRender(); });
+        this.zoomOutButton.addEventListener('click', () => { this.zoomAtCenter(0.8); this.requestRender(); });
+        this.zoomInButton.addEventListener('click', () => { this.zoomAtCenter(1.25); this.requestRender(); });
+        this.resetButton.addEventListener('click', () => { this.resetView(); this.requestRender(); });
+        this.canvas.addEventListener('wheel', (e) => this.onWheel(e), { passive: false });
+        this.canvas.addEventListener('pointerdown', (e) => this.onPointerDown(e));
+        window.addEventListener('pointermove', (e) => this.onPointerMove(e));
+        window.addEventListener('pointerup', () => { this.drag = undefined; });
+        this.canvas.addEventListener('contextmenu', (e) => e.preventDefault());
+        new ResizeObserver(() => this.requestRender()).observe(stage);
+        this.setStatus('选择 .dwf/.dwfx 文件');
+    }
+    setPreferWebgl(value) {
+        this.preferWebgl = value;
+        this.requestRender();
+    }
+    setPreferWasm(value) {
+        this.preferWasm = value;
+        this.requestRender();
+    }
+    async load(input, options = {}) {
+        this.setStatus('解析文件中…');
+        this.renderer?.dispose();
+        this.doc = await openDwfDocument(input, { fileName: options.fileName });
+        this.renderer = new PageRenderer(this.doc);
+        this.pageIndex = options.pageIndex ?? 0;
+        this.zoom = 1;
+        this.panX = this.panY = 0;
+        this.yaw = -0.78;
+        this.pitch = 0.55;
+        this.preferWebgl = options.preferWebgl ?? this.preferWebgl;
+        this.preferWasm = options.preferWasm ?? this.preferWasm;
+        this.wasmUrl = options.wasmUrl ?? this.wasmUrl;
+        this.background = options.background ?? this.background;
+        this.maxGpuCacheBytes = options.maxGpuCacheBytes ?? this.maxGpuCacheBytes;
+        this.maxCachedScenes = options.maxCachedScenes ?? this.maxCachedScenes;
+        this.populatePages();
+        this.populateModelTree();
+        await this.render();
+    }
+    async render() {
+        if (!this.renderer || !this.doc)
+            return undefined;
+        this.resizeCanvasToDisplaySize();
+        const page = this.doc.pageData[this.pageIndex];
+        if (!page)
+            return undefined;
+        const seq = ++this.renderSeq;
+        const task = this.renderer.render(this.pageIndex, this.canvas, {
+            zoom: this.zoom,
+            panX: this.panX,
+            panY: this.panY,
+            preferWebgl: this.preferWebgl,
+            preferWasm: this.preferWasm,
+            wasmUrl: this.wasmUrl,
+            background: this.background,
+            maxGpuCacheBytes: this.maxGpuCacheBytes,
+            maxCachedScenes: this.maxCachedScenes,
+            webglCanvas: this.webglCanvas,
+            yaw: this.yaw,
+            pitch: this.pitch
+        });
+        this.pendingRender = task;
+        try {
+            const stats = await task;
+            if (this.pendingRender === task && seq === this.renderSeq) {
+                const warnCount = stats.warnings.filter(w => w.level !== 'info').length;
+                const dprText = this.currentDpr > 1 ? ` · DPR ${this.currentDpr.toFixed(2)}` : '';
+                this.setStatus(`${this.doc.kind.toUpperCase()} · ${page.kind} · ${stats.backend} · ${stats.commands} ops${dprText}${warnCount ? ` · ${warnCount} 警告` : ''}`, warnCount > 0);
+            }
+            return stats;
+        }
+        catch (err) {
+            if (seq === this.renderSeq)
+                this.setStatus(`渲染失败：${String(err)}`, true);
+            throw err;
+        }
+    }
+    getDocument() {
+        return this.doc;
+    }
+    fit() {
+        this.resetView();
+        this.requestRender();
+    }
+    dispose() {
+        if (this.renderRaf)
+            cancelAnimationFrame(this.renderRaf);
+        this.renderRaf = 0;
+        this.renderer?.dispose();
+        this.renderer = undefined;
+        this.doc = undefined;
+        this.root.replaceChildren();
+    }
+    requestRender() {
+        if (this.renderRaf)
+            return;
+        this.renderRaf = requestAnimationFrame(() => {
+            this.renderRaf = 0;
+            void this.render();
+        });
+    }
+    populatePages() {
+        this.pageSelect.replaceChildren();
+        const pages = this.doc?.pageData ?? [];
+        for (const [i, p] of pages.entries()) {
+            const opt = document.createElement('option');
+            opt.value = String(i);
+            opt.textContent = `${i + 1}. ${p.name} (${p.kind})`;
+            this.pageSelect.append(opt);
+        }
+        this.pageSelect.selectedIndex = Math.max(0, Math.min(this.pageIndex, pages.length - 1));
+    }
+    populateModelTree() {
+        const page = this.doc?.pageData[this.pageIndex];
+        if (!page || page.kind !== 'w3d-model' || !(page.model.sceneTree?.length)) {
+            this.treePanel.style.display = 'none';
+            this.treePanel.replaceChildren();
+            return;
+        }
+        this.treePanel.style.display = '';
+        const header = document.createElement('div');
+        header.className = 'dwfv-tree-header';
+        header.textContent = `模型结构 · ${page.model.stats.nodeCount ?? 0} 节点`;
+        const stats = document.createElement('div');
+        stats.className = 'dwfv-tree-stats';
+        stats.textContent = `${page.model.stats.meshCount} meshes · ${page.model.stats.triangleCount} triangles · ${(page.model.stats.textureCount ?? 0)} textures`;
+        const content = document.createElement('div');
+        content.className = 'dwfv-tree-content';
+        for (const node of page.model.sceneTree)
+            content.append(renderTreeNode(node));
+        this.treePanel.replaceChildren(header, stats, content);
+    }
+    resizeCanvasToDisplaySize() {
+        const rect = this.canvas.getBoundingClientRect();
+        const cssW = Math.max(1, rect.width);
+        const cssH = Math.max(1, rect.height);
+        let dpr = Math.max(1, Math.min(this.maxDevicePixelRatio, window.devicePixelRatio || 1));
+        const pixels = cssW * cssH * dpr * dpr;
+        if (pixels > this.maxCanvasPixels)
+            dpr *= Math.sqrt(this.maxCanvasPixels / pixels);
+        this.currentDpr = dpr;
+        const w = Math.max(1, Math.floor(cssW * dpr));
+        const h = Math.max(1, Math.floor(cssH * dpr));
+        if (this.canvas.width !== w || this.canvas.height !== h) {
+            this.canvas.width = w;
+            this.canvas.height = h;
+        }
+        if (this.webglCanvas.width !== w || this.webglCanvas.height !== h) {
+            this.webglCanvas.width = w;
+            this.webglCanvas.height = h;
+        }
+    }
+    resetView() {
+        this.zoom = 1;
+        this.panX = 0;
+        this.panY = 0;
+        this.yaw = -0.78;
+        this.pitch = 0.55;
+        const page = this.doc?.pageData[this.pageIndex];
+        if (page?.kind === 'w3d-model') {
+            const cam = page.model.initialView?.camera;
+            const pos = cam?.position;
+            const target = cam?.target;
+            if (pos && target) {
+                const dx = pos[0] - target[0];
+                const dy = pos[1] - target[1];
+                const dz = pos[2] - target[2];
+                const dist = Math.hypot(dx, dy, dz);
+                if (dist > 1e-6) {
+                    this.pitch = Math.max(-1.45, Math.min(1.45, Math.asin(dy / dist)));
+                    this.yaw = Math.atan2(dx, dz);
+                    const radius = Math.max(1e-6, page.model.bounds.radius);
+                    this.zoom = Math.max(0.05, Math.min(100, radius * 2.55 / dist));
+                }
+            }
+        }
+    }
+    zoomAtCenter(factor) {
+        this.resizeCanvasToDisplaySize();
+        if (this.is3dPage()) {
+            this.zoom = Math.max(0.05, Math.min(100, this.zoom * factor));
+            return;
+        }
+        const cx = this.canvas.width / 2;
+        const cy = this.canvas.height / 2;
+        this.zoomAroundPoint(factor, cx, cy);
+    }
+    zoomAroundPoint(factor, cx, cy) {
+        const oldZoom = this.zoom;
+        const nextZoom = Math.max(0.05, Math.min(64, oldZoom * factor));
+        if (nextZoom === oldZoom)
+            return;
+        // Keep the drawing coordinate under the cursor fixed.  A simple
+        // `pan = cursor - (cursor - pan) * ratio` is wrong for fit-to-page
+        // transforms, because the fit center also changes with zoom.
+        const anchoredPoint = this.pagePointAtCanvasPoint(cx, cy, oldZoom, this.panX, this.panY);
+        if (anchoredPoint) {
+            const baseMatrix = this.pageMatrixAt(nextZoom, 0, 0);
+            if (baseMatrix) {
+                const [sx, sy] = transformPoint(baseMatrix, anchoredPoint.x, anchoredPoint.y);
+                this.panX = cx - sx;
+                this.panY = cy - sy;
+                this.zoom = nextZoom;
+                return;
+            }
+        }
+        // Generic fallback for unsupported page kinds.
+        const ratio = nextZoom / oldZoom;
+        this.panX = cx - (cx - this.panX) * ratio;
+        this.panY = cy - (cy - this.panY) * ratio;
+        this.zoom = nextZoom;
+    }
+    onWheel(e) {
+        if (!this.doc)
+            return;
+        e.preventDefault();
+        this.resizeCanvasToDisplaySize();
+        const rect = this.canvas.getBoundingClientRect();
+        const cx = (e.clientX - rect.left) * this.currentDpr;
+        const cy = (e.clientY - rect.top) * this.currentDpr;
+        const delta = e.deltaMode === WheelEvent.DOM_DELTA_LINE
+            ? e.deltaY * 16
+            : e.deltaMode === WheelEvent.DOM_DELTA_PAGE
+                ? e.deltaY * Math.max(1, rect.height)
+                : e.deltaY;
+        const factor = Math.exp(-delta * 0.0015);
+        if (this.is3dPage())
+            this.zoom = Math.max(0.05, Math.min(100, this.zoom * factor));
+        else
+            this.zoomAroundPoint(factor, cx, cy);
+        this.requestRender();
+    }
+    onPointerDown(e) {
+        this.canvas.setPointerCapture?.(e.pointerId);
+        if (this.is3dPage())
+            e.preventDefault();
+        const mode = this.is3dPage() ? ((e.button === 2 || e.shiftKey) ? 'pan3d' : 'rotate3d') : 'pan2d';
+        this.drag = { x: e.clientX, y: e.clientY, panX: this.panX, panY: this.panY, yaw: this.yaw, pitch: this.pitch, mode };
+    }
+    onPointerMove(e) {
+        if (!this.drag)
+            return;
+        const dx = e.clientX - this.drag.x;
+        const dy = e.clientY - this.drag.y;
+        if (this.drag.mode === 'rotate3d') {
+            this.yaw = this.drag.yaw + dx * 0.008;
+            this.pitch = Math.max(-1.45, Math.min(1.45, this.drag.pitch + dy * 0.008));
+        }
+        else {
+            this.panX = this.drag.panX + dx * this.currentDpr;
+            this.panY = this.drag.panY + dy * this.currentDpr;
+        }
+        this.requestRender();
+    }
+    is3dPage() {
+        const page = this.doc?.pageData[this.pageIndex];
+        return page?.kind === 'w3d-model';
+    }
+    pagePointAtCanvasPoint(cx, cy, zoom, panX, panY) {
+        const m = this.pageMatrixAt(zoom, panX, panY);
+        if (!m)
+            return undefined;
+        const det = m.a * m.d - m.b * m.c;
+        if (!Number.isFinite(det) || Math.abs(det) < 1e-12)
+            return undefined;
+        const dx = cx - m.e;
+        const dy = cy - m.f;
+        return {
+            x: (m.d * dx - m.c * dy) / det,
+            y: (-m.b * dx + m.a * dy) / det
+        };
+    }
+    pageMatrixAt(zoom, panX, panY) {
+        const page = this.doc?.pageData[this.pageIndex];
+        if (!page)
+            return undefined;
+        const canvasWidth = Math.max(1, this.canvas.width);
+        const canvasHeight = Math.max(1, this.canvas.height);
+        if (page.kind === 'w2d-text')
+            return matrixForW2d(page, canvasWidth, canvasHeight, zoom, panX, panY);
+        if (page.kind === 'xps-fixed-page') {
+            return fitPageMatrix({
+                canvasWidth,
+                canvasHeight,
+                pageWidth: Math.max(1, page.width),
+                pageHeight: Math.max(1, page.height),
+                zoom,
+                panX,
+                panY
+            });
+        }
+        if (page.kind === 'image') {
+            return fitPageMatrix({
+                canvasWidth,
+                canvasHeight,
+                pageWidth: Math.max(1, page.width),
+                pageHeight: Math.max(1, page.height),
+                zoom,
+                panX,
+                panY,
+                margin: 0
+            });
+        }
+        return undefined;
+    }
+    setStatus(text, warn = false) {
+        this.status.textContent = text;
+        this.status.classList.toggle('dwfv-warn', warn);
+    }
+}
+function button(text) {
+    const b = document.createElement('button');
+    b.type = 'button';
+    b.textContent = text;
+    return b;
+}
+function renderTreeNode(node) {
+    const details = document.createElement('details');
+    details.open = node.children.length > 0 && node.children.length < 20;
+    const summary = document.createElement('summary');
+    summary.textContent = node.label || node.id;
+    if (node.meshIds.length > 0)
+        summary.title = `${node.meshIds.length} mesh(es)`;
+    details.append(summary);
+    if (node.contentRefs.length > 0) {
+        const meta = document.createElement('div');
+        meta.className = 'dwfv-tree-meta';
+        meta.textContent = node.contentRefs.slice(0, 3).join(', ');
+        details.append(meta);
+    }
+    for (const child of node.children)
+        details.append(renderTreeNode(child));
+    return details;
+}

package/dist/wasm/WasmRasterBackend.d.ts

@@ -0,0 +1,21 @@
+import { type Matrix2D } from '../render/style.js';
+export interface WasmRasterOptions {
+    wasmUrl?: string;
+}
+export declare class WasmRasterBackend {
+    private readonly wasmUrl;
+    private exports?;
+    private fbPtr;
+    private fbBytes;
+    private width;
+    private height;
+    constructor(options?: WasmRasterOptions);
+    init(): Promise<void>;
+    begin(width: number, height: number, backgroundCss?: string): void;
+    drawPolyline(points: number[], matrix: Matrix2D, strokeCss: string | undefined, thickness?: number): void;
+    drawPolygon(points: number[], matrix: Matrix2D, fillCss: string | undefined): void;
+    toImageData(): ImageData;
+    private allocF32;
+    private ensureMemory;
+    private requireExports;
+}

package/dist/wasm/WasmRasterBackend.js

@@ -0,0 +1,84 @@
+import { colorToRgba32, transformPoint } from '../render/style.js';
+export class WasmRasterBackend {
+    constructor(options = {}) {
+        this.fbPtr = 0;
+        this.fbBytes = 0;
+        this.width = 0;
+        this.height = 0;
+        this.wasmUrl = options.wasmUrl ?? './public/dwfv-render.wasm';
+    }
+    async init() {
+        if (this.exports)
+            return;
+        const response = await fetch(this.wasmUrl);
+        if (!response.ok)
+            throw new Error(`Failed to load WASM raster backend: ${response.status} ${response.statusText}`);
+        const bytes = await response.arrayBuffer();
+        const instance = await WebAssembly.instantiate(bytes, {});
+        this.exports = instance.instance.exports;
+    }
+    begin(width, height, backgroundCss = '#ffffff') {
+        const e = this.requireExports();
+        this.width = Math.max(1, Math.floor(width));
+        this.height = Math.max(1, Math.floor(height));
+        this.fbBytes = this.width * this.height * 4;
+        e.dwfv_reset_heap();
+        this.fbPtr = e.dwfv_alloc(this.fbBytes);
+        this.ensureMemory(this.fbPtr + this.fbBytes);
+        e.dwfv_clear(this.fbPtr, this.width, this.height, colorToRgba32(backgroundCss, 0xffffffff));
+    }
+    drawPolyline(points, matrix, strokeCss, thickness = 1) {
+        const e = this.requireExports();
+        if (points.length < 4 || !strokeCss)
+            return;
+        const count = Math.floor(points.length / 2);
+        const ptr = this.allocF32(count * 2);
+        const heap = new Float32Array(e.memory.buffer, ptr, count * 2);
+        for (let i = 0; i < count; i++) {
+            const [x, y] = transformPoint(matrix, points[i * 2], points[i * 2 + 1]);
+            heap[i * 2] = x;
+            heap[i * 2 + 1] = y;
+        }
+        e.dwfv_draw_polyline(this.fbPtr, this.width, this.height, ptr, count, colorToRgba32(strokeCss, 0xff000000), Math.max(1, thickness));
+    }
+    drawPolygon(points, matrix, fillCss) {
+        const e = this.requireExports();
+        if (points.length < 6 || !fillCss)
+            return;
+        const count = Math.floor(points.length / 2);
+        const ptr = this.allocF32(count * 2);
+        const heap = new Float32Array(e.memory.buffer, ptr, count * 2);
+        for (let i = 0; i < count; i++) {
+            const [x, y] = transformPoint(matrix, points[i * 2], points[i * 2 + 1]);
+            heap[i * 2] = x;
+            heap[i * 2 + 1] = y;
+        }
+        e.dwfv_draw_polygon(this.fbPtr, this.width, this.height, ptr, count, colorToRgba32(fillCss, 0xff000000));
+    }
+    toImageData() {
+        const e = this.requireExports();
+        const src = new Uint8ClampedArray(e.memory.buffer, this.fbPtr, this.fbBytes);
+        // Clone out of wasm memory because future allocations can invalidate the buffer view.
+        return new ImageData(new Uint8ClampedArray(src), this.width, this.height);
+    }
+    allocF32(floatCount) {
+        const e = this.requireExports();
+        const byteCount = floatCount * 4;
+        const ptr = e.dwfv_alloc(byteCount);
+        this.ensureMemory(ptr + byteCount);
+        return ptr;
+    }
+    ensureMemory(requiredBytes) {
+        const e = this.requireExports();
+        const page = 65536;
+        const current = e.memory.buffer.byteLength;
+        if (requiredBytes > current) {
+            e.memory.grow(Math.ceil((requiredBytes - current) / page));
+        }
+    }
+    requireExports() {
+        if (!this.exports)
+            throw new Error('WASM backend is not initialized. Call init() first.');
+        return this.exports;
+    }
+}

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@flyfish-dev/dwf-viewer",
+  "version": "0.5.0",
+  "private": false,
+  "type": "module",
+  "description": "Pure frontend DWF/DWFx viewer with W2D WebGL rendering, W3D/HSF Three.js 3D rendering, DWFx/XPS support, and optional WASM raster fallback.",
+  "license": "AGPL-3.0-only",
+  "author": "flyfish-dev",
+  "homepage": "https://github.com/flyfish-dev/dwf-viewer#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/flyfish-dev/dwf-viewer.git"
+  },
+  "bugs": {
+    "url": "https://github.com/flyfish-dev/dwf-viewer/issues"
+  },
+  "keywords": [
+    "dwf",
+    "dwfx",
+    "w2d",
+    "w3d",
+    "hsf",
+    "xps",
+    "cad",
+    "viewer",
+    "webgl",
+    "threejs",
+    "wasm"
+  ],
+  "sideEffects": [
+    "styles/dwf-viewer.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./styles/dwf-viewer.css",
+    "./wasm/dwfv-render.wasm": "./public/dwfv-render.wasm",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "public/dwfv-render.wasm",
+    "styles/dwf-viewer.css",
+    "README.md",
+    "LICENSE",
+    "NOTICE",
+    "CHANGELOG.md",
+    "PRODUCTION_3D_NOTES.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "packageManager": "npm@11.12.1",
+  "scripts": {
+    "build:wasm": "bash scripts/build-wasm.sh",
+    "build:ts": "tsc -p tsconfig.json",
+    "build": "npm run build:wasm && npm run build:ts",
+    "build:demo": "npm run build && node scripts/build-demo.mjs",
+    "clean": "rm -rf dist demo-dist public/dwfv-render.wasm",
+    "inspect:dwfx": "node scripts/inspect-dwfx.mjs",
+    "validate:production": "node scripts/validate-production.mjs",
+    "check:examples": "node scripts/check-examples.mjs",
+    "check:package": "node scripts/package-check.mjs",
+    "prepublishOnly": "npm run build && npm run validate:production && npm run check:package",
+    "pack:dry": "npm pack --dry-run",
+    "publish:unscoped": "node scripts/publish-npm.mjs dwf-viewer",
+    "publish:scoped": "node scripts/publish-npm.mjs @flyfish-dev/dwf-viewer",
+    "publish:all": "node scripts/publish-npm.mjs dwf-viewer @flyfish-dev/dwf-viewer",
+    "demo:serve": "npm run build:demo && python3 -m http.server 8080 -d demo-dist",
+    "deploy:pages": "npm run build:demo && npx wrangler pages deploy demo-dist"
+  },
+  "devDependencies": {
+    "typescript": "^4.9.5"
+  },
+  "peerDependencies": {
+    "three": ">=0.150.0"
+  },
+  "peerDependenciesMeta": {
+    "three": {
+      "optional": true
+    }
+  }
+}

package/styles/dwf-viewer.css

@@ -0,0 +1,51 @@
+.dwfv-root {
+  height: 100%;
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  color: #111827;
+}
+.dwfv-toolbar {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 8px 12px;
+  background: #fff;
+  border-bottom: 1px solid #e5e7eb;
+}
+.dwfv-toolbar button,
+.dwfv-toolbar select { font: inherit; }
+.dwfv-workspace {
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(220px, 300px) 1fr;
+}
+.dwfv-tree {
+  overflow: auto;
+  border-right: 1px solid #d6d8dd;
+  background: #fff;
+  font-size: 12px;
+  padding: 8px;
+}
+.dwfv-tree[style*="display: none"] + .dwfv-stage { grid-column: 1 / -1; }
+.dwfv-tree-header { font-weight: 700; margin-bottom: 4px; }
+.dwfv-tree-stats { color: #6b7280; margin-bottom: 8px; }
+.dwfv-tree details { margin-left: 8px; }
+.dwfv-tree summary { cursor: pointer; padding: 2px 0; }
+.dwfv-tree-meta {
+  color: #6b7280;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 10px;
+  padding-left: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dwfv-stage { position: relative; overflow: hidden; background: #e5e7eb; }
+.dwfv-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
+.dwfv-webgl-canvas { pointer-events: none; }
+.dwfv-overlay-canvas { pointer-events: auto; touch-action: none; cursor: grab; }
+.dwfv-overlay-canvas:active { cursor: grabbing; }
+.dwfv-status { margin-left: auto; font-size: 12px; color: #4b5563; }
+.dwfv-warn { color: #92400e; }