@miragon/pulse-widget-shell 0.0.0-stage → 0.22.0

package/dist/ui/use-bpmn-viewer.d.ts

@@ -0,0 +1,135 @@
+import { type RefObject } from "react";
+import { type BpmnElement } from "./bpmn-heatmap/heat-utils.js";
+/**
+ * Structural typings for the bpmn-js services the widgets touch. bpmn-js ships
+ * no usable types on `Viewer#get`, so the slice the widgets rely on is declared
+ * once, here — a superset shared by the plain diagram (markers/overlays) and
+ * the heatmap (viewbox/element registry/event bus).
+ */
+export interface BpmnCanvas {
+    /** Fit the diagram into the viewport; `"auto"` centres it. Never zooms in past 1:1. */
+    zoom(mode: "fit-viewport", center?: "auto"): void;
+    zoom(level: number): void;
+    zoom(): number;
+    addMarker(elementId: string, marker: string): void;
+    viewbox(): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        scale: number;
+        /** The diagram's own bounds, in diagram units. */
+        inner?: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        };
+    };
+    getContainer(): HTMLElement;
+    /**
+     * Drop the cached viewbox. diagram-js caches it, the container's size
+     * (`outer`) included, and only recomputes it after this call — a fit after
+     * the frame changed size would otherwise scale against the old size.
+     */
+    resized(): void;
+}
+export interface BpmnOverlays {
+    add: (elementId: string, overlay: {
+        position: object;
+        html: string;
+    }) => void;
+}
+export interface BpmnElementRegistry {
+    getAll: () => BpmnElement[];
+}
+export interface BpmnEventBus {
+    on: (event: string, fn: () => void) => void;
+    off: (event: string, fn: () => void) => void;
+}
+export interface BpmnViewerWithGet {
+    get: ((service: "canvas") => BpmnCanvas) & ((service: "overlays") => BpmnOverlays) & ((service: "elementRegistry") => BpmnElementRegistry) & ((service: "eventBus") => BpmnEventBus);
+}
+/** The diagram frame's height range (U20): never a sliver, never taller than a screenful. */
+export declare const DIAGRAM_MIN_HEIGHT = 240;
+export declare const DIAGRAM_MAX_HEIGHT = 560;
+/** Before the diagram's size and the container's width are known. */
+export declare const DIAGRAM_DEFAULT_HEIGHT = 360;
+/** A diagram's extent in diagram units (bpmn-js draws one unit as one pixel at 1:1). */
+export interface DiagramBounds {
+    width: number;
+    height: number;
+}
+/**
+ * The frame height that shows a diagram whole at the container's width, at
+ * the scale bpmn-js actually draws it: `fit-viewport` shrinks a diagram wider
+ * than the container to its width but never zooms one in past 1:1, so a
+ * small diagram keeps its natural size and gets a frame just as tall. Plus
+ * room for the fit's margin and the zoom bar, clamped to
+ * {@link DIAGRAM_MIN_HEIGHT}–{@link DIAGRAM_MAX_HEIGHT}: a wide, flat process
+ * gets a low frame instead of a fixed 400 px with half of it empty; a tall
+ * one stops at a screenful and stays pannable.
+ */
+export declare function diagramHeight(bounds: DiagramBounds | null, width: number): number;
+/**
+ * The extent of the diagram bpmn-js shows (the document's first
+ * `BPMNDiagram`: shapes, labels and edge waypoints), read from the XML's
+ * diagram interchange BEFORE the import — so the frame has its height on the
+ * first paint and does not jump once the diagram is drawn, or when a view
+ * swaps one diagram widget for another over the same XML. Null for a
+ * document without readable DI; the hook then measures the drawn diagram.
+ */
+export declare function diagramBoundsFromXml(xml: string): DiagramBounds | null;
+export interface UseBpmnViewerOptions {
+    bpmnXml: string;
+    /**
+     * Runs after a successful `importXML` (the canvas is already fitted). This is
+     * where a caller applies its decoration — markers/overlays, a heat canvas,
+     * event-bus subscriptions. May return a cleanup function, which runs before
+     * the viewer is destroyed. The latest callback is read at import time, so a
+     * new function identity alone never re-imports the diagram.
+     */
+    onImported?: (viewer: BpmnViewerWithGet) => void | (() => void);
+    /**
+     * Extra value folded into the mount effect's dependencies: when its identity
+     * changes the viewer is torn down and the XML re-imported (bpmn-js decoration
+     * is add-only, so "redecorate" means "remount"). Leave unset for viewers that
+     * only re-import when the XML itself changes.
+     */
+    reimportKey?: unknown;
+    /**
+     * Refit the diagram (rAF-debounced) whenever the container resizes. Off by
+     * default — the heatmap deliberately preserves the operator's pan/zoom and
+     * only repaints its overlay on resize.
+     */
+    fitOnResize?: boolean;
+}
+export interface UseBpmnViewerResult {
+    /**
+     * Attach to the div the viewer should render into. The hook paints that div
+     * as the fixed light BPMN canvas, in every theme.
+     */
+    containerRef: RefObject<HTMLDivElement | null>;
+    /**
+     * The frame height for this diagram at the container's current width
+     * ({@link diagramHeight}): set it as the container's (or its wrapper's)
+     * height unless the widget has a fixed one. Known on the first paint when
+     * the XML carries its diagram interchange; the hook refits when it changes.
+     */
+    height: number;
+    /** Import failure message, or `null` while the diagram renders fine. */
+    importError: string | null;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    /** Fit to the viewport, centred, with the shared 0.95 breathing-room factor. */
+    fit: () => void;
+}
+/**
+ * Owns the bpmn-js NavigatedViewer lifecycle shared by every BPMN widget:
+ * the light canvas on `containerRef`, its height, mount, `importXML`, initial
+ * fit-to-viewport (centred, ×0.95), import-error state, zoom handlers, and
+ * teardown (`viewer.destroy()`).
+ * Callers layer their distinctive behavior on top via {@link UseBpmnViewerOptions.onImported}.
+ */
+export declare function useBpmnViewer({ bpmnXml, onImported, reimportKey, fitOnResize, }: UseBpmnViewerOptions): UseBpmnViewerResult;
+//# sourceMappingURL=use-bpmn-viewer.d.ts.map

package/dist/ui/use-bpmn-viewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-bpmn-viewer.d.ts","sourceRoot":"","sources":["../../src/ui/use-bpmn-viewer.ts"],"names":[],"mappings":"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"}

package/dist/ui/use-bpmn-viewer.js

@@ -0,0 +1,257 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import NavigatedViewer from "bpmn-js/lib/NavigatedViewer";
+import { BPMN_TOKENS, cdVar } from "./bpmn-tokens.js";
+import { useInlineBudget } from "./inline-budget.js";
+/**
+ * Paint the canvas every BPMN widget renders on: a fixed LIGHT surface in both
+ * themes (modeler-tool-design §10: the paper stays light), like Camunda
+ * Cockpit. bpmn-js paints near-black strokes and labels and white fills
+ * straight into the SVG; on the dark card those sequence flows and external
+ * labels were unreadable, and a light canvas also keeps the overlay tints
+ * (`BPMN_TOKENS`) and the heatmap's multiply blend exactly as designed. The
+ * container becomes a forced-light island (`data-theme-mode="light"`), so
+ * anything themed inside it renders light too, and takes the paper token
+ * inline, so it beats any themed background class a widget puts on it — the
+ * hook owns the canvas, no call site opts in.
+ */
+function paintLightCanvas(container) {
+    container.setAttribute("data-theme-mode", "light");
+    container.style.setProperty("background-color", cdVar(BPMN_TOKENS.paper));
+    container.style.setProperty("color-scheme", "light");
+}
+/** The diagram frame's height range (U20): never a sliver, never taller than a screenful. */
+export const DIAGRAM_MIN_HEIGHT = 240;
+export const DIAGRAM_MAX_HEIGHT = 560;
+/** Before the diagram's size and the container's width are known. */
+export const DIAGRAM_DEFAULT_HEIGHT = 360;
+/** Room above and below the fitted diagram: the fit's 0.95 margin plus the zoom bar's reach. */
+const DIAGRAM_HEIGHT_PADDING = 48;
+/**
+ * The frame height that shows a diagram whole at the container's width, at
+ * the scale bpmn-js actually draws it: `fit-viewport` shrinks a diagram wider
+ * than the container to its width but never zooms one in past 1:1, so a
+ * small diagram keeps its natural size and gets a frame just as tall. Plus
+ * room for the fit's margin and the zoom bar, clamped to
+ * {@link DIAGRAM_MIN_HEIGHT}–{@link DIAGRAM_MAX_HEIGHT}: a wide, flat process
+ * gets a low frame instead of a fixed 400 px with half of it empty; a tall
+ * one stops at a screenful and stays pannable.
+ */
+export function diagramHeight(bounds, width) {
+    if (!bounds || !(bounds.width > 0) || !(bounds.height > 0) || !(width > 0)) {
+        return DIAGRAM_DEFAULT_HEIGHT;
+    }
+    const scale = Math.min(1, width / bounds.width);
+    const fitted = Math.ceil(bounds.height * scale) + DIAGRAM_HEIGHT_PADDING;
+    return Math.min(DIAGRAM_MAX_HEIGHT, Math.max(DIAGRAM_MIN_HEIGHT, fitted));
+}
+const BPMN_DI = "http://www.omg.org/spec/BPMN/20100524/DI";
+const DD_DC = "http://www.omg.org/spec/DD/20100524/DC";
+const DD_DI = "http://www.omg.org/spec/DD/20100524/DI";
+/** A numeric attribute, NaN when it is missing or no number. */
+function numberAttr(el, name) {
+    const value = el.getAttribute(name);
+    return value === null ? Number.NaN : Number(value);
+}
+/**
+ * The extent of the diagram bpmn-js shows (the document's first
+ * `BPMNDiagram`: shapes, labels and edge waypoints), read from the XML's
+ * diagram interchange BEFORE the import — so the frame has its height on the
+ * first paint and does not jump once the diagram is drawn, or when a view
+ * swaps one diagram widget for another over the same XML. Null for a
+ * document without readable DI; the hook then measures the drawn diagram.
+ */
+export function diagramBoundsFromXml(xml) {
+    if (!xml || typeof DOMParser === "undefined")
+        return null;
+    const doc = new DOMParser().parseFromString(xml, "application/xml");
+    if (doc.getElementsByTagName("parsererror").length > 0)
+        return null;
+    // Matched by namespace and local name (any prefix: `dc:`, `omgdc:` …),
+    // walking the elements: `getElementsByTagNameNS` is not reliable in every
+    // DOM the kit's tests run in.
+    const is = (el, ns, name) => el.namespaceURI === ns && el.localName === name;
+    const diagram = Array.from(doc.getElementsByTagName("*")).find((el) => is(el, BPMN_DI, "BPMNDiagram"));
+    if (!diagram)
+        return null;
+    const box = { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity };
+    const extend = (x, y, width, height) => {
+        if (![x, y, width, height].every(Number.isFinite))
+            return;
+        box.minX = Math.min(box.minX, x);
+        box.minY = Math.min(box.minY, y);
+        box.maxX = Math.max(box.maxX, x + width);
+        box.maxY = Math.max(box.maxY, y + height);
+    };
+    for (const el of Array.from(diagram.getElementsByTagName("*"))) {
+        if (is(el, DD_DC, "Bounds")) {
+            extend(numberAttr(el, "x"), numberAttr(el, "y"), numberAttr(el, "width"), numberAttr(el, "height"));
+        }
+        else if (is(el, DD_DI, "waypoint")) {
+            extend(numberAttr(el, "x"), numberAttr(el, "y"), 0, 0);
+        }
+    }
+    const width = box.maxX - box.minX;
+    const height = box.maxY - box.minY;
+    return width > 0 && height > 0 ? { width, height } : null;
+}
+/** The drawn diagram's extent from the viewer, or null when it has none to report. */
+function drawnBounds(canvas) {
+    try {
+        const inner = canvas.viewbox().inner;
+        return inner && inner.width > 0 && inner.height > 0
+            ? { width: inner.width, height: inner.height }
+            : null;
+    }
+    catch {
+        return null;
+    }
+}
+const FALLBACK_IMPORT_ERROR = "Failed to render the BPMN diagram.";
+/** Zoom clamp — matches bpmn-js's own navigation limits, keeps ± buttons sane. */
+const ZOOM_MIN = 0.2;
+const ZOOM_MAX = 4;
+/**
+ * Owns the bpmn-js NavigatedViewer lifecycle shared by every BPMN widget:
+ * the light canvas on `containerRef`, its height, mount, `importXML`, initial
+ * fit-to-viewport (centred, ×0.95), import-error state, zoom handlers, and
+ * teardown (`viewer.destroy()`).
+ * Callers layer their distinctive behavior on top via {@link UseBpmnViewerOptions.onImported}.
+ */
+export function useBpmnViewer({ bpmnXml, onImported, reimportKey, fitOnResize = false, }) {
+    const containerRef = useRef(null);
+    const viewerRef = useRef(null);
+    const [importError, setImportError] = useState(null);
+    // The drawn diagram's extent, for an XML whose DI the kit could not read;
+    // tagged with its XML so a new diagram never inherits the last one's.
+    const [drawn, setDrawn] = useState(null);
+    const [width, setWidth] = useState(0);
+    // Latest callback, read at import time so identity changes don't remount.
+    // Synced in an effect (not during render) so a discarded render can't leak
+    // into the ref; declared before the mount effect below, so the ref is already
+    // current by the time an import can read it.
+    const onImportedRef = useRef(onImported);
+    useEffect(() => {
+        onImportedRef.current = onImported;
+    });
+    // Before paint, so the canvas never shows the themed card for a frame; on
+    // every commit, since the ref may now point at a different element.
+    useLayoutEffect(() => {
+        if (containerRef.current)
+            paintLightCanvas(containerRef.current);
+    });
+    const getCanvas = useCallback(() => {
+        if (!viewerRef.current)
+            return null;
+        return viewerRef.current.get("canvas");
+    }, []);
+    const fit = useCallback(() => {
+        const canvas = getCanvas();
+        if (!canvas)
+            return;
+        canvas.resized();
+        // Centred: a diagram smaller than the frame sits in its middle instead of
+        // at its own top-left offset, with the empty room on one side.
+        canvas.zoom("fit-viewport", "auto");
+        canvas.zoom(canvas.zoom() * 0.95);
+    }, [getCanvas]);
+    const zoomIn = useCallback(() => {
+        const canvas = getCanvas();
+        if (canvas)
+            canvas.zoom(Math.min(ZOOM_MAX, canvas.zoom() * 1.1));
+    }, [getCanvas]);
+    const zoomOut = useCallback(() => {
+        const canvas = getCanvas();
+        if (canvas)
+            canvas.zoom(Math.max(ZOOM_MIN, canvas.zoom() * 0.9));
+    }, [getCanvas]);
+    // The container's width drives the frame height: read before the first
+    // paint (a layout effect), so the frame never shows the default first, then
+    // followed on every resize.
+    useLayoutEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        setWidth(container.clientWidth);
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(() => setWidth(container.clientWidth));
+        observer.observe(container);
+        return () => observer.disconnect();
+    }, [bpmnXml]);
+    const xmlBounds = useMemo(() => diagramBoundsFromXml(bpmnXml), [bpmnXml]);
+    const bounds = xmlBounds ?? (drawn?.xml === bpmnXml ? drawn.bounds : null);
+    // Inline in a chat the frame stays low enough to leave room for the rest of
+    // the card (#396); fullscreen draws it at its own height.
+    const { diagramMaxHeight } = useInlineBudget();
+    const height = Math.min(diagramHeight(bounds, width), diagramMaxHeight ?? Infinity);
+    // The frame took a new height: fit the diagram into it. A height change
+    // from a new width refits only a viewer that refits on resize anyway — the
+    // heatmap keeps the operator's pan and zoom; a new diagram size refits both.
+    const refitOn = fitOnResize ? height : bounds;
+    useLayoutEffect(() => {
+        fit();
+    }, [refitOn, fit]);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container || !bpmnXml)
+            return;
+        const viewer = new NavigatedViewer({ container });
+        viewerRef.current = viewer;
+        let cancelled = false;
+        let importCleanup = null;
+        setImportError(null);
+        void (async () => {
+            try {
+                await viewer.importXML(bpmnXml);
+            }
+            catch (err) {
+                if (cancelled)
+                    return;
+                setImportError(err instanceof Error ? err.message : FALLBACK_IMPORT_ERROR);
+                return;
+            }
+            if (cancelled)
+                return;
+            fit();
+            const canvas = getCanvas();
+            if (canvas)
+                setDrawn({ xml: bpmnXml, bounds: drawnBounds(canvas) });
+            // Decoration failures (e.g. no 2D canvas context for the heat LUT) must
+            // surface like import failures — outside this try they'd be a silent
+            // unhandled rejection and the widget would render an undecorated diagram.
+            try {
+                const cleanup = onImportedRef.current?.(viewer);
+                importCleanup = typeof cleanup === "function" ? cleanup : null;
+            }
+            catch (err) {
+                setImportError(err instanceof Error ? err.message : FALLBACK_IMPORT_ERROR);
+            }
+        })();
+        let rafId = null;
+        let observer = null;
+        if (fitOnResize) {
+            observer = new ResizeObserver(() => {
+                if (rafId !== null)
+                    cancelAnimationFrame(rafId);
+                rafId = requestAnimationFrame(() => {
+                    rafId = null;
+                    fit();
+                });
+            });
+            observer.observe(container);
+        }
+        return () => {
+            cancelled = true;
+            if (rafId !== null)
+                cancelAnimationFrame(rafId);
+            observer?.disconnect();
+            importCleanup?.();
+            viewerRef.current = null;
+            viewer.destroy();
+        };
+        // `reimportKey` is a deliberate extra dependency: it lets callers force a
+        // teardown + re-import when their decoration inputs change.
+    }, [bpmnXml, reimportKey, fitOnResize, fit, getCanvas]);
+    return { containerRef, height, importError, zoomIn, zoomOut, fit };
+}
+//# sourceMappingURL=use-bpmn-viewer.js.map

package/dist/ui/use-bpmn-viewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-bpmn-viewer.js","sourceRoot":"","sources":["../../src/ui/use-bpmn-viewer.ts"],"names":[],"mappings":"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"}

package/dist/ui/use-bpmn-viewer.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=use-bpmn-viewer.test.d.ts.map

package/dist/ui/use-bpmn-viewer.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-bpmn-viewer.test.d.ts","sourceRoot":"","sources":["../../src/ui/use-bpmn-viewer.test.tsx"],"names":[],"mappings":""}

package/dist/ui/use-bpmn-viewer.test.js

@@ -0,0 +1,239 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment happy-dom
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { act, cleanup, render, screen, waitFor } from "@testing-library/react";
+import { DIAGRAM_MAX_HEIGHT, DIAGRAM_MIN_HEIGHT, diagramBoundsFromXml, diagramHeight, useBpmnViewer, } from "./use-bpmn-viewer.js";
+// bpmn-js needs a real SVG engine, which happy-dom does not provide — a
+// recording stub stands in. (The full lifecycle suite runs in the camunda7
+// connector, through the widgets' entry point; this one pins what the hook
+// itself owns for EVERY consumer: the canvas and its frame.)
+const mock = vi.hoisted(() => {
+    /**
+     * diagram-js's Canvas as far as fitting goes: the viewbox — the container's
+     * size (`outer`) included — is cached on first read and only dropped by
+     * `resized()`; `fit-viewport` scales against that cached size, never past
+     * 1:1, and with a centre ("auto") centres the diagram (Canvas.js 15.27).
+     */
+    class FakeCanvas {
+        container;
+        static inner = { x: 150, y: 80, width: 400, height: 700 };
+        cached = null;
+        level = 1;
+        fits = [];
+        constructor(container) {
+            this.container = container;
+        }
+        size() {
+            return {
+                width: this.container.clientWidth,
+                height: Number.parseFloat(this.container.style.height) || 0,
+            };
+        }
+        viewbox() {
+            this.cached ??= { outer: this.size() };
+            return {
+                x: 0,
+                y: 0,
+                width: this.cached.outer.width,
+                height: this.cached.outer.height,
+                scale: this.level,
+                inner: FakeCanvas.inner,
+                outer: this.cached.outer,
+            };
+        }
+        resized() {
+            this.cached = null;
+        }
+        zoom(arg, center) {
+            if (arg === undefined)
+                return this.level;
+            if (arg === "fit-viewport") {
+                const { outer, inner } = this.viewbox();
+                this.level = Math.min(1, outer.width / inner.width, outer.height / inner.height);
+                this.fits.push({ outerHeight: outer.height, scale: this.level, center });
+                // Setting the viewbox re-reads the size and refills the cache.
+                this.cached = { outer: this.size() };
+                return this.level;
+            }
+            this.level = arg;
+            return this.level;
+        }
+    }
+    class MockViewer {
+        static containers = [];
+        static canvases = [];
+        canvas;
+        constructor(opts) {
+            MockViewer.containers.push(opts.container);
+            this.canvas = new FakeCanvas(opts.container);
+            MockViewer.canvases.push(this.canvas);
+        }
+        importXML() {
+            return Promise.resolve({ warnings: [] });
+        }
+        get() {
+            return this.canvas;
+        }
+        destroy() { }
+    }
+    return { MockViewer, FakeCanvas };
+});
+vi.mock("bpmn-js/lib/NavigatedViewer", () => ({ default: mock.MockViewer }));
+const XML = "<bpmn:definitions/>";
+/** The test-host's invoice diagram, reduced to its DI: x 129–590, y 102–319. */
+const INVOICE_DI = `<?xml version="1.0" encoding="UTF-8"?>
+<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="d">
+  <bpmn:process id="invoice" />
+  <bpmndi:BPMNDiagram id="main">
+    <bpmndi:BPMNPlane id="p" bpmnElement="invoice">
+      <bpmndi:BPMNShape id="s1" bpmnElement="start">
+        <dc:Bounds x="152" y="182" width="36" height="36" />
+        <bpmndi:BPMNLabel><dc:Bounds x="129" y="225" width="83" height="14" /></bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="s2" bpmnElement="paid">
+        <dc:Bounds x="532" y="102" width="36" height="36" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="s3" bpmnElement="rejected">
+        <bpmndi:BPMNLabel><dc:Bounds x="510" y="305" width="80" height="14" /></bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="e1" bpmnElement="flow">
+        <di:waypoint x="440" y="225" />
+        <di:waypoint x="532" y="280" />
+      </bpmndi:BPMNEdge>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+  <bpmndi:BPMNDiagram id="drilldown">
+    <bpmndi:BPMNPlane id="p2" bpmnElement="sub">
+      <bpmndi:BPMNShape id="far" bpmnElement="x"><dc:Bounds x="5000" y="5000" width="10" height="10" /></bpmndi:BPMNShape>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>`;
+/**
+ * A widget that only attaches the ref — no canvas class, and a themed card
+ * background on the container, the way a new BPMN widget would start out.
+ */
+function Diagram({ xml, element = "a", loading = false, }) {
+    const { containerRef } = useBpmnViewer({ bpmnXml: xml });
+    if (loading)
+        return _jsx("p", { children: "Loading\u2026" });
+    return _jsx("div", { ref: containerRef, className: "bg-card", "data-testid": "canvas" }, element);
+}
+/** A widget that sizes its frame from the hook, like BpmnDiagram and BpmnHeatmap. */
+function Framed({ xml, fitOnResize = false }) {
+    const { containerRef, height } = useBpmnViewer({ bpmnXml: xml, fitOnResize });
+    return _jsx("div", { ref: containerRef, "data-testid": "canvas", style: { height: `${height}px` } });
+}
+const canvas = () => screen.getByTestId("canvas");
+function expectLightCanvas(el) {
+    expect(el.style.getPropertyValue("background-color")).toBe("var(--cd-weiss)");
+    expect(el.getAttribute("data-theme-mode")).toBe("light");
+    expect(el.style.getPropertyValue("color-scheme")).toBe("light");
+}
+afterEach(() => {
+    cleanup();
+    mock.MockViewer.containers.length = 0;
+    mock.MockViewer.canvases.length = 0;
+    document.documentElement.classList.remove("dark");
+});
+describe("useBpmnViewer canvas (#339, N122)", () => {
+    it("paints the container as the fixed light canvas in a dark document — no call site opts in", async () => {
+        document.documentElement.classList.add("dark");
+        render(_jsx(Diagram, { xml: XML }));
+        await waitFor(() => expect(mock.MockViewer.containers).toEqual([canvas()]));
+        expectLightCanvas(canvas());
+    });
+    it("paints before any viewer exists, and again when the ref moves to a new element", () => {
+        const { rerender } = render(_jsx(Diagram, { xml: "" }));
+        // No XML yet, so no viewer — the canvas is light from the first paint.
+        expect(mock.MockViewer.containers).toEqual([]);
+        const first = canvas();
+        expectLightCanvas(first);
+        rerender(_jsx(Diagram, { xml: "", element: "b" }));
+        expect(canvas()).not.toBe(first);
+        expectLightCanvas(canvas());
+    });
+    it("waits for a container a loading widget has not rendered yet", () => {
+        const { rerender } = render(_jsx(Diagram, { xml: XML, loading: true }));
+        expect(screen.queryByTestId("canvas")).toBeNull();
+        rerender(_jsx(Diagram, { xml: XML }));
+        expectLightCanvas(canvas());
+    });
+});
+describe("diagramHeight (U20: the frame follows the diagram, 240–560 px)", () => {
+    it("fits a diagram wider than the container at the container width, plus room for the zoom bar", () => {
+        // Scaled to the container: 760 / 1600 of 600 is 285, plus 48.
+        expect(diagramHeight({ width: 1600, height: 600 }, 760)).toBe(333);
+        expect(diagramHeight({ width: 1520, height: 760 }, 760)).toBe(380 + 48);
+    });
+    it("never zooms a diagram narrower than the container past 1:1 (bpmn-js does not)", () => {
+        // The invoice diagram at a 710 px container: drawn at 461 × 217, so the
+        // frame is 217 + 48 — not 710 × 0.47 / 0.95 + 48 = 400 with half of it empty.
+        expect(diagramHeight({ width: 461, height: 217 }, 710)).toBe(265);
+        // Fullscreen makes no difference to a diagram that already fits.
+        expect(diagramHeight({ width: 461, height: 217 }, 1400)).toBe(265);
+    });
+    it("never a sliver, never more than a screenful", () => {
+        expect(diagramHeight({ width: 2000, height: 100 }, 760)).toBe(DIAGRAM_MIN_HEIGHT);
+        expect(diagramHeight({ width: 400, height: 1200 }, 760)).toBe(DIAGRAM_MAX_HEIGHT);
+        expect([DIAGRAM_MIN_HEIGHT, DIAGRAM_MAX_HEIGHT]).toEqual([240, 560]);
+    });
+    it("keeps the default until both the size and the width are known", () => {
+        expect(diagramHeight(null, 760)).toBe(360);
+        expect(diagramHeight({ width: 0, height: 100 }, 760)).toBe(360);
+        expect(diagramHeight({ width: 100, height: Number.NaN }, 760)).toBe(360);
+        expect(diagramHeight({ width: 461, height: 217 }, 0)).toBe(360);
+    });
+});
+describe("diagramBoundsFromXml (the frame is sized before the import)", () => {
+    it("reads the first diagram's shapes, labels and waypoints, whatever their prefix", () => {
+        expect(diagramBoundsFromXml(INVOICE_DI)).toEqual({ width: 461, height: 217 });
+        // Older modelers write the DC namespace as `omgdc:`; the namespace counts.
+        const omg = INVOICE_DI.replaceAll("dc:Bounds", "omgdc:Bounds").replace('xmlns:dc="', 'xmlns:omgdc="');
+        expect(diagramBoundsFromXml(omg)).toEqual({ width: 461, height: 217 });
+    });
+    it("is null without readable DI", () => {
+        expect(diagramBoundsFromXml("")).toBeNull();
+        expect(diagramBoundsFromXml("<not xml")).toBeNull();
+        expect(diagramBoundsFromXml(XML)).toBeNull();
+    });
+});
+describe("useBpmnViewer frame and fit", () => {
+    let clientWidth;
+    beforeEach(() => {
+        clientWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "clientWidth");
+        Object.defineProperty(HTMLElement.prototype, "clientWidth", {
+            configurable: true,
+            get: () => 710,
+        });
+    });
+    afterEach(() => {
+        if (clientWidth)
+            Object.defineProperty(HTMLElement.prototype, "clientWidth", clientWidth);
+        else
+            Reflect.deleteProperty(HTMLElement.prototype, "clientWidth");
+    });
+    it("has the diagram's height on the first paint when the XML carries its DI", () => {
+        render(_jsx(Framed, { xml: INVOICE_DI }));
+        // No await: sized in the first commit, before bpmn-js imported anything.
+        expect(canvas().style.height).toBe("265px");
+    });
+    it("fits centred, after dropping diagram-js's cached viewbox", async () => {
+        render(_jsx(Framed, { xml: INVOICE_DI }));
+        await waitFor(() => expect(mock.MockViewer.canvases[0]?.fits.length).toBeGreaterThan(0));
+        expect(mock.MockViewer.canvases[0].fits[0]).toMatchObject({ center: "auto", outerHeight: 265 });
+    });
+    it("refits a heatmap-style viewer against the NEW frame once the drawn diagram sized it", async () => {
+        // No DI in the XML: the frame starts at the default, the import fits at
+        // 360 px (and diagram-js caches that size), then the drawn 400 × 700
+        // diagram makes the frame 560 px. The refit must see 560, not the cache.
+        mock.FakeCanvas.inner = { x: 150, y: 80, width: 400, height: 700 };
+        render(_jsx(Framed, { xml: XML }));
+        expect(canvas().style.height).toBe("360px");
+        await waitFor(() => expect(canvas().style.height).toBe("560px"));
+        await act(async () => { });
+        const fits = mock.MockViewer.canvases[0].fits;
+        expect(fits[0]).toMatchObject({ outerHeight: 360, scale: 360 / 700 });
+        expect(fits.at(-1)).toMatchObject({ outerHeight: 560, scale: 0.8 });
+    });
+});
+//# sourceMappingURL=use-bpmn-viewer.test.js.map