@oh-just-another/editor 0.58.0

package/dist/capabilities.d.ts

@@ -0,0 +1,78 @@
+import { type RendererBackend } from "@oh-just-another/renderer-canvas";
+/**
+ * Capability profile chosen for a `<Diagram>` mount. Calculated once
+ * via {@link detectCapabilities}; flows downstream into the renderer
+ * backend, WASM opt-ins, worker pool, tile cache, etc. The result is
+ * also logged to the console at boot so the host can see exactly
+ * what's been activated.
+ *
+ * Hosts may override individual fields via `<Diagram capabilities={…}>`
+ * — passing a partial profile shallow-merges over the auto-detect
+ * result, so e.g. `{ wasmText: false }` forces Canvas2D measureText
+ * even on a browser that would happily run the bundled WASM.
+ */
+export interface CapabilityProfile {
+    /**
+     * Renderer backend the kernel will activate. `auto` is never the
+     * final value — detection collapses it to one of the concrete
+     * choices before mount.
+     */
+    readonly renderer: RendererBackend;
+    /** Use the bundled `WasmTextShaper` for wrap measurements. */
+    readonly wasmText: boolean;
+    /**
+     * Use the bundled `WasmRasterizer` for path flatten / stroke-to-
+     * fill. Currently only the WebGL2 backend calls into the
+     * rasterizer (Canvas2D has native `ctx.bezierCurveTo` which is
+     * faster than any WASM round-trip); detection still flips this
+     * field on for any backend so the host knows the wasm is loaded.
+     */
+    readonly wasmRaster: boolean;
+    /**
+     * Spawn OffscreenCanvas workers per layer for the main render
+     * pass. Independent from `renderer === "offscreen"` — even with
+     * a Canvas2D main path the tile pre-rasterisation can be off-
+     * thread. Set false on Safari < 16.4 (no OffscreenCanvas).
+     */
+    readonly workers: boolean;
+    /**
+     * Use the tile cache compositor for very large scenes. Only kicks
+     * in when scene size crosses `LARGE_SCENE_HIT_THRESHOLD` —
+     * smaller scenes pay no overhead from this flag.
+     */
+    readonly tiles: boolean;
+    /**
+     * Whether `pointer: coarse` was reported (touch primary input).
+     * Editor uses this for hit-slop tuning; surfaced here so the
+     * console log shows the chosen modality.
+     */
+    readonly touch: boolean;
+}
+/**
+ * What the host can pass to `<Diagram capabilities={…}>`. Each
+ * field becomes `auto` when omitted, meaning "let the detector
+ * pick"; anything else short-circuits detection for that field.
+ */
+export interface CapabilityOverrides {
+    readonly renderer?: RendererBackend | "auto";
+    readonly wasmText?: boolean | "auto";
+    readonly wasmRaster?: boolean | "auto";
+    readonly workers?: boolean | "auto";
+    readonly tiles?: boolean | "auto";
+}
+/**
+ * Run the auto-detection sweep and apply caller overrides. Always
+ * async because WebGPU detection requires `await requestAdapter()`.
+ *
+ * Override semantics:
+ *   • absent / `"auto"` → detector picks
+ *   • concrete value (renderer string, true, false) → wins outright
+ */
+export declare const detectCapabilities: (overrides?: CapabilityOverrides) => Promise<CapabilityProfile>;
+/**
+ * One-line console.log of the unpacked profile — a fixed format so the
+ * host can grep it in DevTools. Runs once on mount; repeated calls
+ * print a new line.
+ */
+export declare const logCapabilities: (profile: CapabilityProfile) => void;
+//# sourceMappingURL=capabilities.d.ts.map

package/dist/capabilities.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"capabilities.d.ts","sourceRoot":"","sources":["../src/capabilities.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,kCAAkC,CAAC;AAE1C;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,QAAQ,CAAC,QAAQ,EAAE,eAAe,CAAC;IACnC,8DAA8D;IAC9D,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B;;;;;;OAMG;IACH,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B;;;;;OAKG;IACH,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;CACzB;AAED;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,QAAQ,CAAC,EAAE,eAAe,GAAG,MAAM,CAAC;IAC7C,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACrC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACvC,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACpC,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACnC;AAmCD;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB,GAC7B,YAAW,mBAAwB,KAClC,OAAO,CAAC,iBAAiB,CAoB3B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,SAAS,iBAAiB,KAAG,IAoB5D,CAAC"}

package/dist/capabilities.js

@@ -0,0 +1,74 @@
+import { isWebGL2Available, isWebGPUAvailable, } from "@oh-just-another/renderer-canvas";
+const supportsOffscreenCanvas = () => {
+    if (typeof OffscreenCanvas === "undefined")
+        return false;
+    if (typeof HTMLCanvasElement === "undefined")
+        return false;
+    return typeof HTMLCanvasElement.prototype.transferControlToOffscreen === "function";
+};
+const supportsWorkers = () => typeof Worker !== "undefined";
+const supportsWasm = () => typeof WebAssembly !== "undefined" && typeof WebAssembly.instantiate === "function";
+const isTouchPrimary = () => {
+    if (typeof matchMedia !== "function")
+        return false;
+    try {
+        return matchMedia("(pointer: coarse)").matches;
+    }
+    catch {
+        return false;
+    }
+};
+/**
+ * Pick the best renderer the runtime actually supports. WebGPU is
+ * surrogated to WebGL2 today (no GPU pipeline shipped) — the
+ * detector returns `webgl2` when WebGPU is present so the host
+ * still gets the highest-fidelity available path.
+ */
+const detectRenderer = async () => {
+    if (await isWebGPUAvailable())
+        return "webgl2";
+    if (isWebGL2Available())
+        return "webgl2";
+    if (supportsOffscreenCanvas() && supportsWorkers())
+        return "offscreen";
+    return "canvas2d";
+};
+/**
+ * Run the auto-detection sweep and apply caller overrides. Always
+ * async because WebGPU detection requires `await requestAdapter()`.
+ *
+ * Override semantics:
+ *   • absent / `"auto"` → detector picks
+ *   • concrete value (renderer string, true, false) → wins outright
+ */
+export const detectCapabilities = async (overrides = {}) => {
+    const renderer = overrides.renderer && overrides.renderer !== "auto"
+        ? overrides.renderer
+        : await detectRenderer();
+    const wasmText = overrides.wasmText !== undefined && overrides.wasmText !== "auto"
+        ? overrides.wasmText
+        : supportsWasm();
+    const wasmRaster = overrides.wasmRaster !== undefined && overrides.wasmRaster !== "auto"
+        ? overrides.wasmRaster
+        : supportsWasm() && renderer === "webgl2";
+    const workers = overrides.workers !== undefined && overrides.workers !== "auto"
+        ? overrides.workers
+        : supportsOffscreenCanvas() && supportsWorkers();
+    const tiles = overrides.tiles !== undefined && overrides.tiles !== "auto" ? overrides.tiles : true;
+    return { renderer, wasmText, wasmRaster, workers, tiles, touch: isTouchPrimary() };
+};
+/**
+ * One-line console.log of the unpacked profile — a fixed format so the
+ * host can grep it in DevTools. Runs once on mount; repeated calls
+ * print a new line.
+ */
+export const logCapabilities = (profile) => {
+    const reason = profile.renderer === "webgl2"
+        ? "WebGL2"
+        : profile.renderer === "offscreen"
+            ? "OffscreenCanvas + Worker"
+            : "Canvas2D";
+    // eslint-disable-next-line no-console
+    console.log("%c[diagram]%c renderer=%s, wasmText=%s, wasmRaster=%s, workers=%s, tiles=%s, touch=%s (%s)", "color: #1a73e8; font-weight: 700", "color: inherit", profile.renderer, profile.wasmText, profile.wasmRaster, profile.workers, profile.tiles, profile.touch, reason);
+};
+//# sourceMappingURL=capabilities.js.map

package/dist/capabilities.js.map

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

package/dist/dom-focus.d.ts

@@ -0,0 +1,8 @@
+/**
+ * True when the keyboard event is aimed at an editable element — a text
+ * field, `<select>`, or any `contenteditable` host. Global keyboard
+ * handlers (hotkeys, snap-suppress modifier tracking) must bail when this
+ * is true so the user's typing isn't hijacked by canvas shortcuts.
+ */
+export declare const isEditableTarget: (target: EventTarget | null) => boolean;
+//# sourceMappingURL=dom-focus.d.ts.map

package/dist/dom-focus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-focus.d.ts","sourceRoot":"","sources":["../src/dom-focus.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,QAAQ,WAAW,GAAG,IAAI,KAAG,OAI7D,CAAC"}

package/dist/dom-focus.js

@@ -0,0 +1,13 @@
+/**
+ * True when the keyboard event is aimed at an editable element — a text
+ * field, `<select>`, or any `contenteditable` host. Global keyboard
+ * handlers (hotkeys, snap-suppress modifier tracking) must bail when this
+ * is true so the user's typing isn't hijacked by canvas shortcuts.
+ */
+export const isEditableTarget = (target) => {
+    if (!(target instanceof HTMLElement))
+        return false;
+    const tag = target.tagName;
+    return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || target.isContentEditable;
+};
+//# sourceMappingURL=dom-focus.js.map

package/dist/dom-focus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-focus.js","sourceRoot":"","sources":["../src/dom-focus.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,MAA0B,EAAW,EAAE;IACtE,IAAI,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC;QAAE,OAAO,KAAK,CAAC;IACnD,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC;IAC3B,OAAO,GAAG,KAAK,OAAO,IAAI,GAAG,KAAK,UAAU,IAAI,GAAG,KAAK,QAAQ,IAAI,MAAM,CAAC,iBAAiB,CAAC;AAC/F,CAAC,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Public API of `@oh-just-another/editor` — the drop-in diagram editor.
+ * Import `<Editor>` and mount.
+ *
+ * ```tsx
+ * import { Editor } from "@oh-just-another/editor";
+ *
+ * function App() {
+ *   return <Editor />;
+ * }
+ * ```
+ *
+ * Drive it programmatically via a `ref` — `EditorAPI` exposes curated
+ * verbs (mode / selection / undo-redo / zoom / scene) plus `editor`, the
+ * full live engine (`EditorInstance` from `@oh-just-another/state`) as the
+ * power-user escape hatch. See `EditorProps` for the customisation surface.
+ *
+ * `Diagram` is a deprecated alias for `Editor`, kept for back-compat.
+ */
+export { Diagram as Editor, Diagram, type DiagramAPI as EditorAPI, type DiagramAPI, type DiagramProps as EditorProps, type DiagramProps, type DiagramTheme as EditorTheme, type DiagramTheme, } from "./Diagram.js";
+export { detectCapabilities, logCapabilities, type CapabilityProfile, type CapabilityOverrides, } from "./capabilities.js";
+export { isEditableTarget } from "./dom-focus.js";
+export { exportSceneToPng, type PngExportBackground, type PngExportOptions } from "./png-export.js";
+export { registerBounder, registerLayoutKind } from "@oh-just-another/scene";
+export { registerElementRenderer, registerAnimationAdapter } from "@oh-just-another/renderer-core";
+export { registerMigration } from "@oh-just-another/serialization";
+export type { ElementId } from "@oh-just-another/types";
+export type { Editor as EditorInstance, Mode, FileDropHandler } from "@oh-just-another/state";
+export type { Scene, LayoutKindEntry } from "@oh-just-another/scene";
+export type { Template } from "@oh-just-another/templates";
+export type { AnimatedSourceAdapter } from "@oh-just-another/renderer-core";
+export type { RendererBackend } from "@oh-just-another/renderer-canvas";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EACL,OAAO,IAAI,MAAM,EACjB,OAAO,EACP,KAAK,UAAU,IAAI,SAAS,EAC5B,KAAK,UAAU,EACf,KAAK,YAAY,IAAI,WAAW,EAChC,KAAK,YAAY,EACjB,KAAK,YAAY,IAAI,WAAW,EAChC,KAAK,YAAY,GAClB,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,GACzB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,KAAK,mBAAmB,EAAE,KAAK,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAKpG,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC7E,OAAO,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AACnG,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAOnE,YAAY,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACxD,YAAY,EAAE,MAAM,IAAI,cAAc,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC9F,YAAY,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACrE,YAAY,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAC3D,YAAY,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC5E,YAAY,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC"}

package/dist/index.js

@@ -0,0 +1,30 @@
+/**
+ * Public API of `@oh-just-another/editor` — the drop-in diagram editor.
+ * Import `<Editor>` and mount.
+ *
+ * ```tsx
+ * import { Editor } from "@oh-just-another/editor";
+ *
+ * function App() {
+ *   return <Editor />;
+ * }
+ * ```
+ *
+ * Drive it programmatically via a `ref` — `EditorAPI` exposes curated
+ * verbs (mode / selection / undo-redo / zoom / scene) plus `editor`, the
+ * full live engine (`EditorInstance` from `@oh-just-another/state`) as the
+ * power-user escape hatch. See `EditorProps` for the customisation surface.
+ *
+ * `Diagram` is a deprecated alias for `Editor`, kept for back-compat.
+ */
+export { Diagram as Editor, Diagram, } from "./Diagram.js";
+export { detectCapabilities, logCapabilities, } from "./capabilities.js";
+export { isEditableTarget } from "./dom-focus.js";
+export { exportSceneToPng } from "./png-export.js";
+// Plug-in registries from the underlying packages, surfaced here so the
+// umbrella package is the single import for extending the editor without
+// reaching into the lower-level packages.
+export { registerBounder, registerLayoutKind } from "@oh-just-another/scene";
+export { registerElementRenderer, registerAnimationAdapter } from "@oh-just-another/renderer-core";
+export { registerMigration } from "@oh-just-another/serialization";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EACL,OAAO,IAAI,MAAM,EACjB,OAAO,GAOR,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,kBAAkB,EAClB,eAAe,GAGhB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAmD,MAAM,iBAAiB,CAAC;AAEpG,wEAAwE;AACxE,yEAAyE;AACzE,0CAA0C;AAC1C,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC7E,OAAO,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AACnG,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC"}

package/dist/png-export.d.ts

@@ -0,0 +1,36 @@
+import { type Scene } from "@oh-just-another/scene";
+/**
+ * Browser-side PNG export — renders the **full scene** (not just the
+ * current viewport) into an OffscreenCanvas via the standard
+ * `renderScene` + `renderLinks` pipeline, then converts to a PNG blob.
+ *
+ * Three variants, exposed as separate menu items:
+ *
+ *   • "transparent"     — no background fill, PNG alpha channel preserved.
+ *   • "color"           — solid fill in the host's canvas colour.
+ *   • "color-and-grid"  — solid fill + the same grid the user sees on
+ *                         the canvas (same gridSize / gridStyle).
+ *
+ * This host-side helper is used instead of `@oh-just-another/exporter.exportPng`
+ * because exporter's path goes through `@headless.renderToPng`, which pulls
+ * `@resvg/resvg-js` (~3 MB WASM peer dep). For a browser host the kernel's
+ * `Canvas2DTarget` + `renderScene` are already on hand — no extra
+ * dependency, no SVG round-trip, identical visual output.
+ *
+ * Returns `null` when the scene has no shapes (host shows an alert).
+ */
+/** Variant selector — drives background / grid handling. */
+export type PngExportBackground = "transparent" | "color" | "color-and-grid";
+export interface PngExportOptions {
+    readonly background: PngExportBackground;
+    /** Device-pixel scale. 2 = retina-quality (host default). */
+    readonly scale: number;
+    /**
+     * CSS colour string used for the solid background fill. Ignored when
+     * `background === "transparent"`. Host reads the current
+     * `--du-canvas-bg` CSS variable so the PNG matches what the user sees.
+     */
+    readonly backgroundColor: string;
+}
+export declare const exportSceneToPng: (scene: Scene, options: PngExportOptions) => Promise<Blob | null>;
+//# sourceMappingURL=png-export.d.ts.map

package/dist/png-export.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"png-export.d.ts","sourceRoot":"","sources":["../src/png-export.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,KAAK,EACX,MAAM,wBAAwB,CAAC;AAKhC;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,4DAA4D;AAC5D,MAAM,MAAM,mBAAmB,GAAG,aAAa,GAAG,OAAO,GAAG,gBAAgB,CAAC;AAE7E,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,UAAU,EAAE,mBAAmB,CAAC;IACzC,6DAA6D;IAC7D,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,QAAQ,CAAC,eAAe,EAAE,MAAM,CAAC;CAClC;AAUD,eAAO,MAAM,gBAAgB,GAC3B,OAAO,KAAK,EACZ,SAAS,gBAAgB,KACxB,OAAO,CAAC,IAAI,GAAG,IAAI,CA6DrB,CAAC"}

package/dist/png-export.js

@@ -0,0 +1,84 @@
+import { getLayersInOrder, getElementWorldBounds, getElementsInLayer, } from "@oh-just-another/scene";
+import { renderLinks, renderGrid, renderScene } from "@oh-just-another/renderer-core";
+import { createOffscreenCanvas2DTarget } from "@oh-just-another/renderer-canvas";
+/**
+ * Padding around the scene bbox, in world units. Matches the
+ * `zoomToFit` default so the exported framing feels like "what fit
+ * on screen would look like". Hosts that want a tight bbox can crop
+ * after the fact.
+ */
+const EXPORT_PADDING_WORLD = 20;
+export const exportSceneToPng = async (scene, options) => {
+    if (typeof OffscreenCanvas === "undefined")
+        return null;
+    const bbox = computeSceneBbox(scene);
+    if (!bbox)
+        return null; // empty scene — host shows an alert
+    const padded = {
+        x: bbox.x - EXPORT_PADDING_WORLD,
+        y: bbox.y - EXPORT_PADDING_WORLD,
+        width: bbox.width + 2 * EXPORT_PADDING_WORLD,
+        height: bbox.height + 2 * EXPORT_PADDING_WORLD,
+    };
+    const canvasW = Math.max(1, Math.ceil(padded.width * options.scale));
+    const canvasH = Math.max(1, Math.ceil(padded.height * options.scale));
+    const { canvas, target } = createOffscreenCanvas2DTarget(canvasW, canvasH);
+    // Background fill via the kernel target before shapes render (with
+    // skipClear so the fill survives the renderScene pass). Drawing
+    // through the target keeps it backend-agnostic — the same path works
+    // for any RenderTarget impl.
+    if (options.background !== "transparent") {
+        target.setFill(options.backgroundColor);
+        target.beginPath();
+        target.rect(0, 0, canvasW, canvasH);
+        target.fill();
+    }
+    // Synthesise a viewport that maps the padded world bbox onto the
+    // OffscreenCanvas backbuffer at the requested scale.
+    // `pan = (padded.x, padded.y)` → world origin pixel (0, 0).
+    // `zoom = scale` → world unit covers `scale` device pixels.
+    // `size = canvasW × canvasH` → renderers see the full backbuffer.
+    const exportScene = {
+        ...scene,
+        viewport: {
+            pan: { x: padded.x, y: padded.y },
+            zoom: options.scale,
+            rotation: 0,
+            size: { width: canvasW, height: canvasH },
+            ...(scene.viewport.gridSize !== undefined ? { gridSize: scene.viewport.gridSize } : {}),
+            ...(scene.viewport.gridStyle !== undefined ? { gridStyle: scene.viewport.gridStyle } : {}),
+        },
+    };
+    // Grid pass — only for the color-and-grid variant. Skipped when the
+    // scene has no gridSize (user disabled it).
+    if (options.background === "color-and-grid" &&
+        exportScene.viewport.gridSize &&
+        exportScene.viewport.gridSize > 0) {
+        renderGrid(exportScene, target);
+    }
+    // Shapes (skipClear: true so background / grid survive).
+    renderScene(exportScene, target, { skipClear: true });
+    renderLinks(exportScene, target);
+    return canvas.convertToBlob({ type: "image/png" });
+};
+const computeSceneBbox = (scene) => {
+    let acc = null;
+    for (const layer of getLayersInOrder(scene)) {
+        if (!layer.visible)
+            continue;
+        for (const shape of getElementsInLayer(scene, layer.id)) {
+            const b = getElementWorldBounds(shape);
+            acc = acc ? unionBounds(acc, b) : b;
+        }
+    }
+    return acc;
+};
+/** Inlined AABB union — avoids pulling `@math` into the host package. */
+const unionBounds = (a, b) => {
+    const x = Math.min(a.x, b.x);
+    const y = Math.min(a.y, b.y);
+    const right = Math.max(a.x + a.width, b.x + b.width);
+    const bottom = Math.max(a.y + a.height, b.y + b.height);
+    return { x, y, width: right - x, height: bottom - y };
+};
+//# sourceMappingURL=png-export.js.map

package/dist/png-export.js.map

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

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@oh-just-another/editor",
+  "version": "0.58.0",
+  "description": "Drop-in diagram editor as a single React component. Auto-detects renderer / WASM / worker capabilities and exposes a programmatic editor API.",
+  "license": "MIT",
+  "author": "Rustam Garifulin <rustam@n69.in>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/oh-just-another/diagram.git",
+    "directory": "packages/editor"
+  },
+  "homepage": "https://github.com/oh-just-another/diagram#readme",
+  "bugs": "https://github.com/oh-just-another/diagram/issues",
+  "keywords": [
+    "diagram",
+    "canvas",
+    "svg",
+    "editor",
+    "graph",
+    "drawing"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "lucide-react": "^1.16.0",
+    "@oh-just-another/raster-wasm": "0.57.0",
+    "@oh-just-another/react-ui": "0.57.1",
+    "@oh-just-another/renderer-canvas": "0.58.0",
+    "@oh-just-another/renderer-core": "0.57.0",
+    "@oh-just-another/renderer-svg": "0.57.0",
+    "@oh-just-another/state": "0.57.0",
+    "@oh-just-another/templates": "0.57.0",
+    "@oh-just-another/scene": "0.57.0",
+    "@oh-just-another/text-wasm": "0.57.0",
+    "@oh-just-another/serialization": "0.57.0",
+    "@oh-just-another/types": "0.57.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "jsdom": "^25.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "scripts": {
+    "build": "tsc -b tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint src tests",
+    "clean": "rm -rf dist *.tsbuildinfo"
+  }
+}