@zoneflow/renderer-dom 0.0.1

package/dist/anchors.d.ts

@@ -0,0 +1,13 @@
+import type { AnchorRect, Point } from "@zoneflow/core";
+import type { Rect } from "./types";
+export type ZoneAnchorKind = "inlet" | "outlet";
+type AnchorGeometry = {
+    point: Point;
+    rect?: AnchorRect;
+};
+export declare function resolveZoneAnchorRect(params: {
+    zoneRect: Rect;
+    anchor: AnchorGeometry;
+    kind: ZoneAnchorKind;
+}): Rect;
+export {};

package/dist/anchors.js

@@ -0,0 +1,22 @@
+const DEFAULT_ANCHOR_WIDTH = 24;
+const DEFAULT_ANCHOR_ATTACH_DEPTH = 10;
+export function resolveZoneAnchorRect(params) {
+    const { zoneRect, anchor, kind } = params;
+    if (anchor.rect) {
+        return {
+            x: anchor.rect.x,
+            y: anchor.rect.y,
+            width: anchor.rect.width ?? DEFAULT_ANCHOR_WIDTH,
+            height: anchor.rect.height ?? zoneRect.height,
+        };
+    }
+    const x = kind === "inlet"
+        ? zoneRect.x - (DEFAULT_ANCHOR_WIDTH - DEFAULT_ANCHOR_ATTACH_DEPTH)
+        : zoneRect.x + zoneRect.width - DEFAULT_ANCHOR_ATTACH_DEPTH;
+    return {
+        x,
+        y: zoneRect.y,
+        width: DEFAULT_ANCHOR_WIDTH,
+        height: zoneRect.height,
+    };
+}

package/dist/engines/componentLayoutEngine.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentLayoutEngine } from "../types";
+export declare const defaultComponentLayoutEngine: ComponentLayoutEngine;

package/dist/engines/componentLayoutEngine.js

@@ -0,0 +1,200 @@
+const ZONE_PADDING_X = 12;
+const ZONE_PADDING_Y = 10;
+const ZONE_GAP_Y = 6;
+const ZONE_TITLE_HEIGHT = 24;
+const ZONE_TYPE_HEIGHT = 18;
+const ZONE_BADGE_HEIGHT = 20;
+const ZONE_BODY_MIN_HEIGHT = 28;
+const ZONE_FOOTER_HEIGHT = 18;
+const PATH_PADDING_X = 8;
+const PATH_PADDING_Y = 6;
+const PATH_GAP_Y = 4;
+const PATH_LABEL_HEIGHT = 18;
+const PATH_RULE_HEIGHT = 16;
+const PATH_TARGET_HEIGHT = 16;
+const PATH_BODY_MIN_HEIGHT = 20;
+function insetRect(rect, insetX, insetY) {
+    return {
+        x: rect.x + insetX,
+        y: rect.y + insetY,
+        width: Math.max(0, rect.width - insetX * 2),
+        height: Math.max(0, rect.height - insetY * 2),
+    };
+}
+function takeTop(rect, height) {
+    const safeHeight = Math.max(0, Math.min(height, rect.height));
+    return {
+        slot: {
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: safeHeight,
+        },
+        rest: {
+            x: rect.x,
+            y: rect.y + safeHeight,
+            width: rect.width,
+            height: Math.max(0, rect.height - safeHeight),
+        },
+    };
+}
+function takeBottom(rect, height) {
+    const safeHeight = Math.max(0, Math.min(height, rect.height));
+    return {
+        slot: {
+            x: rect.x,
+            y: rect.y + rect.height - safeHeight,
+            width: rect.width,
+            height: safeHeight,
+        },
+        rest: {
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: Math.max(0, rect.height - safeHeight),
+        },
+    };
+}
+function addTopGap(rect, gap) {
+    return {
+        x: rect.x,
+        y: rect.y + Math.min(gap, rect.height),
+        width: rect.width,
+        height: Math.max(0, rect.height - gap),
+    };
+}
+function shouldRenderZoneSlot(density, slot) {
+    switch (density) {
+        case "detail":
+            return true;
+        case "near":
+            return slot === "title" || slot === "type" || slot === "badge";
+        case "mid":
+            return slot === "title";
+        case "far":
+        default:
+            return false;
+    }
+}
+function shouldRenderPathSlot(density, slot) {
+    switch (density) {
+        case "full":
+            return true;
+        case "chip":
+            return slot === "label";
+        case "edge-only":
+        case "hidden":
+        default:
+            return false;
+    }
+}
+function computeZoneSlots(params) {
+    const { rect, density } = params;
+    const slots = {};
+    let content = insetRect(rect, ZONE_PADDING_X, ZONE_PADDING_Y);
+    if (shouldRenderZoneSlot(density, "title") && content.height > 0) {
+        const { slot, rest } = takeTop(content, ZONE_TITLE_HEIGHT);
+        slots.title = slot;
+        content = addTopGap(rest, ZONE_GAP_Y);
+    }
+    if (shouldRenderZoneSlot(density, "type") && content.height > 0) {
+        const { slot, rest } = takeTop(content, ZONE_TYPE_HEIGHT);
+        slots.type = slot;
+        content = addTopGap(rest, ZONE_GAP_Y);
+    }
+    if (shouldRenderZoneSlot(density, "badge") && content.height > 0) {
+        const badgeWidth = Math.min(96, content.width);
+        slots.badge = {
+            x: content.x,
+            y: content.y,
+            width: badgeWidth,
+            height: Math.min(ZONE_BADGE_HEIGHT, content.height),
+        };
+        content = addTopGap({
+            x: content.x,
+            y: content.y + Math.min(ZONE_BADGE_HEIGHT, content.height),
+            width: content.width,
+            height: Math.max(0, content.height - ZONE_BADGE_HEIGHT),
+        }, ZONE_GAP_Y);
+    }
+    if (shouldRenderZoneSlot(density, "footer") && content.height > 0) {
+        const { slot, rest } = takeBottom(content, ZONE_FOOTER_HEIGHT);
+        slots.footer = slot;
+        content = rest;
+    }
+    if (shouldRenderZoneSlot(density, "body") &&
+        content.width > 0 &&
+        content.height >= ZONE_BODY_MIN_HEIGHT) {
+        slots.body = content;
+    }
+    return slots;
+}
+function computePathSlots(params) {
+    const { rect, density } = params;
+    const slots = {};
+    let content = insetRect(rect, PATH_PADDING_X, PATH_PADDING_Y);
+    if (shouldRenderPathSlot(density, "label") && content.height > 0) {
+        const { slot, rest } = takeTop(content, PATH_LABEL_HEIGHT);
+        slots.label = slot;
+        content = addTopGap(rest, PATH_GAP_Y);
+    }
+    if (shouldRenderPathSlot(density, "rule") && content.height > 0) {
+        const { slot, rest } = takeTop(content, PATH_RULE_HEIGHT);
+        slots.rule = slot;
+        content = addTopGap(rest, PATH_GAP_Y);
+    }
+    if (shouldRenderPathSlot(density, "target") && content.height > 0) {
+        const { slot, rest } = takeBottom(content, PATH_TARGET_HEIGHT);
+        slots.target = slot;
+        content = rest;
+    }
+    if (shouldRenderPathSlot(density, "body") &&
+        content.width > 0 &&
+        content.height >= PATH_BODY_MIN_HEIGHT) {
+        slots.body = content;
+    }
+    return slots;
+}
+export const defaultComponentLayoutEngine = {
+    compute(input) {
+        const { graphLayout, density, visibility } = input;
+        const zonesById = Object.fromEntries(Object.values(graphLayout.zonesById).map((zone) => {
+            const zoneVisibility = visibility.zoneVisibilityById[zone.zoneId];
+            const zoneDensity = density.zoneDensityById[zone.zoneId];
+            const slots = zoneVisibility?.shouldRenderBody !== false
+                ? computeZoneSlots({
+                    rect: zone.rect,
+                    density: zoneDensity,
+                })
+                : {};
+            return [
+                zone.zoneId,
+                {
+                    zoneId: zone.zoneId,
+                    slots,
+                },
+            ];
+        }));
+        const pathsById = Object.fromEntries(Object.values(graphLayout.pathsById).map((path) => {
+            const pathVisibility = visibility.pathVisibilityById[path.pathId];
+            const pathDensity = density.pathDensityById[path.pathId];
+            const slots = path.rect && pathVisibility?.shouldRenderNode
+                ? computePathSlots({
+                    rect: path.rect,
+                    density: pathDensity,
+                })
+                : {};
+            return [
+                path.pathId,
+                {
+                    pathId: path.pathId,
+                    slots,
+                },
+            ];
+        }));
+        return {
+            zonesById,
+            pathsById,
+        };
+    },
+};

package/dist/engines/debugDrawEngine.d.ts

@@ -0,0 +1,7 @@
+import type { DebugLayer, RendererDrawInput } from "../types";
+export type DebugDrawInput = RendererDrawInput & {
+    layers?: DebugLayer[];
+};
+export declare const debugDrawEngine: {
+    draw(input: DebugDrawInput): void;
+};

package/dist/engines/debugDrawEngine.js

@@ -0,0 +1,346 @@
+import { isZoneInputEnabled, isZoneOutputEnabled, } from "@zoneflow/core";
+const ANCHOR_SIZE = 8;
+const DEFAULT_DEBUG_LAYERS = [
+    "graph-layout",
+    "edges",
+    "anchors",
+];
+const drawLayerMap = {
+    "graph-layout": drawGraphLayout,
+    density: drawDensity,
+    visibility: drawVisibility,
+    "component-layout": drawComponentLayout,
+    edges: drawEdges,
+    anchors: drawAnchors,
+    viewport: drawViewport,
+};
+function createSvgElement(tag) {
+    return document.createElementNS("http://www.w3.org/2000/svg", tag);
+}
+function sortZoneVisualsForRender(pipeline) {
+    function getDepth(zoneId) {
+        let depth = 0;
+        let current = pipeline.graphLayout.zonesById[zoneId]?.zone;
+        while (current?.parentZoneId) {
+            depth += 1;
+            current = pipeline.graphLayout.zonesById[current.parentZoneId]?.zone;
+        }
+        return depth;
+    }
+    return Object.values(pipeline.graphLayout.zonesById)
+        .map((zone, index) => ({
+        zone,
+        index,
+        depth: getDepth(zone.zoneId),
+    }))
+        .sort((a, b) => a.depth - b.depth || a.index - b.index)
+        .map((entry) => entry.zone);
+}
+function getEdgeColor(kind) {
+    return kind === "zone-to-path" ? "#2563eb" : "#0f766e";
+}
+function getBezierCurvePathD(params) {
+    const { source, target } = params;
+    const sourceLead = Math.min(Math.max(Math.abs(target.x - source.x) * 0.18, 18), 42);
+    const leadSourceX = source.x + sourceLead;
+    const dx = target.x - leadSourceX;
+    const direction = dx >= 0 ? 1 : -1;
+    const handle = Math.min(Math.max(Math.abs(dx) * 0.45, 28), 104);
+    const control1X = leadSourceX + handle * direction;
+    const control2X = target.x - handle * direction;
+    return `M ${source.x} ${source.y} L ${leadSourceX} ${source.y} C ${control1X} ${source.y}, ${control2X} ${target.y}, ${target.x} ${target.y}`;
+}
+function getChevronPathD(params) {
+    const { target, direction } = params;
+    const tipX = target.x - direction * 6;
+    const baseX = tipX - direction * 7;
+    const topY = target.y - 4;
+    const bottomY = target.y + 4;
+    return `M ${baseX} ${topY} L ${tipX} ${target.y} L ${baseX} ${bottomY}`;
+}
+function filterPipelineForExclusion(input) {
+    const excludedZoneIds = new Set(input.exclusionState?.excludedZoneIds ?? []);
+    const excludedPathIds = new Set(input.exclusionState?.excludedPathIds ?? []);
+    if (excludedZoneIds.size === 0 && excludedPathIds.size === 0) {
+        return input.pipeline;
+    }
+    return {
+        ...input.pipeline,
+        graphLayout: {
+            ...input.pipeline.graphLayout,
+            zonesById: Object.fromEntries(Object.entries(input.pipeline.graphLayout.zonesById).filter(([zoneId]) => !excludedZoneIds.has(zoneId))),
+            pathsById: Object.fromEntries(Object.entries(input.pipeline.graphLayout.pathsById).filter(([pathId]) => !excludedPathIds.has(pathId))),
+        },
+        density: {
+            ...input.pipeline.density,
+            zoneDensityById: Object.fromEntries(Object.entries(input.pipeline.density.zoneDensityById).filter(([zoneId]) => !excludedZoneIds.has(zoneId))),
+            pathDensityById: Object.fromEntries(Object.entries(input.pipeline.density.pathDensityById).filter(([pathId]) => !excludedPathIds.has(pathId))),
+        },
+        visibility: {
+            ...input.pipeline.visibility,
+            zoneVisibilityById: Object.fromEntries(Object.entries(input.pipeline.visibility.zoneVisibilityById).filter(([zoneId]) => !excludedZoneIds.has(zoneId))),
+            pathVisibilityById: Object.fromEntries(Object.entries(input.pipeline.visibility.pathVisibilityById).filter(([pathId]) => !excludedPathIds.has(pathId))),
+        },
+        componentLayout: {
+            ...input.pipeline.componentLayout,
+            zonesById: Object.fromEntries(Object.entries(input.pipeline.componentLayout.zonesById).filter(([zoneId]) => !excludedZoneIds.has(zoneId))),
+            pathsById: Object.fromEntries(Object.entries(input.pipeline.componentLayout.pathsById).filter(([pathId]) => !excludedPathIds.has(pathId))),
+        },
+    };
+}
+export const debugDrawEngine = {
+    draw(input) {
+        const { host, camera } = input;
+        const pipeline = filterPipelineForExclusion(input);
+        const layers = input.layers ?? DEFAULT_DEBUG_LAYERS;
+        host.innerHTML = "";
+        const worldRoot = document.createElement("div");
+        worldRoot.style.position = "absolute";
+        worldRoot.style.left = "0";
+        worldRoot.style.top = "0";
+        worldRoot.style.width = "100%";
+        worldRoot.style.height = "100%";
+        worldRoot.style.transform = `translate(${camera.x}px, ${camera.y}px) scale(${camera.zoom})`;
+        worldRoot.style.transformOrigin = "0 0";
+        worldRoot.style.pointerEvents = "none";
+        const screenRoot = document.createElement("div");
+        screenRoot.style.position = "absolute";
+        screenRoot.style.left = "0";
+        screenRoot.style.top = "0";
+        screenRoot.style.width = "100%";
+        screenRoot.style.height = "100%";
+        screenRoot.style.pointerEvents = "none";
+        host.appendChild(worldRoot);
+        host.appendChild(screenRoot);
+        layers.forEach((layer) => {
+            drawLayerMap[layer]?.(worldRoot, pipeline, camera, pipeline.viewportInfo.world);
+        });
+        if (layers.includes("viewport")) {
+            drawHostViewport(screenRoot, pipeline.viewportInfo);
+        }
+    },
+};
+function getDebugFontSize(camera) {
+    return Math.min(24, Math.max(12, 18 / camera.zoom));
+}
+function drawBox(root, rect, color, label, camera) {
+    const el = document.createElement("div");
+    el.style.position = "absolute";
+    el.style.left = `${rect.x}px`;
+    el.style.top = `${rect.y}px`;
+    el.style.width = `${rect.width}px`;
+    el.style.height = `${rect.height}px`;
+    el.style.border = `1px dashed ${color}`;
+    el.style.boxSizing = "border-box";
+    el.style.pointerEvents = "none";
+    if (label) {
+        const text = document.createElement("div");
+        const fontSize = getDebugFontSize(camera);
+        text.textContent = String(label);
+        text.style.fontSize = `${fontSize}px`;
+        text.style.color = color;
+        text.style.position = "absolute";
+        text.style.left = "2px";
+        text.style.top = "2px";
+        text.style.pointerEvents = "none";
+        text.style.background = "rgba(0,0,0,0.6)";
+        text.style.padding = "1px 3px";
+        text.style.borderRadius = "3px";
+        text.style.fontWeight = "600";
+        el.appendChild(text);
+    }
+    root.appendChild(el);
+}
+function drawAnchor(root, point, color, label, camera) {
+    const dot = document.createElement("div");
+    dot.style.position = "absolute";
+    dot.style.left = `${point.x - ANCHOR_SIZE / 2}px`;
+    dot.style.top = `${point.y - ANCHOR_SIZE / 2}px`;
+    dot.style.width = `${ANCHOR_SIZE}px`;
+    dot.style.height = `${ANCHOR_SIZE}px`;
+    dot.style.borderRadius = "999px";
+    dot.style.background = color;
+    dot.style.border = "1px solid white";
+    dot.style.boxSizing = "border-box";
+    dot.style.pointerEvents = "none";
+    if (label) {
+        const text = document.createElement("div");
+        const fontSize = getDebugFontSize(camera);
+        text.textContent = label;
+        text.style.position = "absolute";
+        text.style.left = `${point.x + 6}px`;
+        text.style.top = `${point.y - 6}px`;
+        text.style.fontSize = `${fontSize}px`;
+        text.style.color = color;
+        text.style.whiteSpace = "nowrap";
+        text.style.pointerEvents = "none";
+        text.style.background = "rgba(0,0,0,0.6)";
+        text.style.padding = "1px 3px";
+        text.style.borderRadius = "3px";
+        text.style.fontWeight = "600";
+        root.appendChild(text);
+    }
+    root.appendChild(dot);
+}
+function drawGraphLayout(root, pipeline, camera) {
+    const { graphLayout } = pipeline;
+    sortZoneVisualsForRender(pipeline).forEach((zone) => {
+        drawBox(root, zone.rect, "blue", zone.zone.name, camera);
+    });
+    Object.values(graphLayout.pathsById).forEach((path) => {
+        if (path.rect) {
+            drawBox(root, path.rect, "green", path.path.name, camera);
+        }
+    });
+}
+function drawDensity(root, pipeline, camera) {
+    const { graphLayout, density } = pipeline;
+    Object.values(graphLayout.zonesById).forEach((zone) => {
+        const level = density.zoneDensityById[zone.zoneId];
+        drawBox(root, zone.rect, "purple", level, camera);
+    });
+    Object.values(graphLayout.pathsById).forEach((path) => {
+        if (!path.rect)
+            return;
+        const level = density.pathDensityById[path.pathId];
+        drawBox(root, path.rect, "magenta", level, camera);
+    });
+}
+function drawVisibility(root, pipeline, camera) {
+    const { graphLayout, visibility } = pipeline;
+    Object.values(graphLayout.zonesById).forEach((zone) => {
+        const v = visibility.zoneVisibilityById[zone.zoneId];
+        if (!v)
+            return;
+        const color = !v.isVisible
+            ? "rgba(148,163,184,0.45)"
+            : v.isPartial
+                ? "#f59e0b"
+                : "#f97316";
+        const label = !v.isVisible
+            ? `culled / ${v.emphasis}`
+            : v.isPartial
+                ? `partial / ${v.emphasis}`
+                : `visible / ${v.emphasis}`;
+        drawBox(root, zone.rect, color, label, camera);
+    });
+    Object.values(graphLayout.pathsById).forEach((path) => {
+        if (!path.rect)
+            return;
+        const v = visibility.pathVisibilityById[path.pathId];
+        if (!v)
+            return;
+        const color = !v.isVisible
+            ? "rgba(100,100,100,0.35)"
+            : v.isPartial
+                ? "#d97706"
+                : "#ca8a04";
+        const label = !v.isVisible
+            ? `culled / ${v.emphasis}`
+            : v.shouldRenderNode
+                ? `node / ${v.emphasis}`
+                : `edge-only / ${v.emphasis}`;
+        drawBox(root, path.rect, color, label, camera);
+    });
+}
+function drawComponentLayout(root, pipeline, camera) {
+    const { componentLayout } = pipeline;
+    Object.values(componentLayout.zonesById).forEach((zone) => {
+        Object.entries(zone.slots).forEach(([name, rect]) => {
+            drawBox(root, rect, "red", name, camera);
+        });
+    });
+    Object.values(componentLayout.pathsById ?? {}).forEach((path) => {
+        Object.entries(path.slots).forEach(([name, rect]) => {
+            drawBox(root, rect, "brown", `path:${name}`, camera);
+        });
+    });
+}
+function drawEdges(root, pipeline) {
+    const { edgesByPathId } = pipeline.graphLayout;
+    const svg = createSvgElement("svg");
+    svg.style.position = "absolute";
+    svg.style.left = "0";
+    svg.style.top = "0";
+    svg.style.width = "100%";
+    svg.style.height = "100%";
+    svg.style.overflow = "visible";
+    svg.style.pointerEvents = "none";
+    Object.values(edgesByPathId)
+        .flatMap((edges) => edges)
+        .forEach((edge) => {
+        const path = createSvgElement("path");
+        const stroke = getEdgeColor(edge.kind);
+        path.setAttribute("d", getBezierCurvePathD({
+            source: edge.source,
+            target: edge.target,
+        }));
+        path.setAttribute("fill", "none");
+        path.setAttribute("stroke", stroke);
+        path.setAttribute("stroke-width", edge.kind === "zone-to-path" ? "2" : "2.4");
+        path.setAttribute("stroke-linecap", "round");
+        path.setAttribute("stroke-linejoin", "round");
+        svg.appendChild(path);
+        const chevron = createSvgElement("path");
+        chevron.setAttribute("d", getChevronPathD({
+            target: edge.target,
+            direction: edge.kind === "path-to-zone" ? 1 : edge.target.x >= edge.source.x ? 1 : -1,
+        }));
+        chevron.setAttribute("fill", "none");
+        chevron.setAttribute("stroke", stroke);
+        chevron.setAttribute("stroke-width", edge.kind === "zone-to-path" ? "1.7" : "1.95");
+        chevron.setAttribute("stroke-linecap", "round");
+        chevron.setAttribute("stroke-linejoin", "round");
+        svg.appendChild(chevron);
+    });
+    root.appendChild(svg);
+}
+function drawAnchors(root, pipeline, camera) {
+    const { graphLayout } = pipeline;
+    Object.values(graphLayout.zonesById).forEach((zone) => {
+        const inlet = zone.anchors?.inlet?.point;
+        const outlet = zone.anchors?.outlet?.point;
+        if (inlet && isZoneInputEnabled(zone.zone)) {
+            drawAnchor(root, inlet, "#2563eb", `${zone.zoneId}:in`, camera);
+        }
+        if (outlet && isZoneOutputEnabled(zone.zone)) {
+            drawAnchor(root, outlet, "#dc2626", `${zone.zoneId}:out`, camera);
+        }
+    });
+    Object.values(graphLayout.pathsById).forEach((path) => {
+        if (path.inlet) {
+            drawAnchor(root, path.inlet, "#16a34a", `${path.pathId}:in`, camera);
+        }
+        if (path.outlet) {
+            drawAnchor(root, path.outlet, "#ca8a04", `${path.pathId}:out`, camera);
+        }
+    });
+}
+function drawViewport(root, _pipeline, camera, viewport) {
+    drawBox(root, viewport, "#22c55e", "viewport", camera);
+}
+function drawHostViewport(root, viewportInfo) {
+    const box = document.createElement("div");
+    const { effective, host } = viewportInfo;
+    // 실제 host viewport 전체
+    const hostBox = document.createElement("div");
+    hostBox.style.position = "absolute";
+    hostBox.style.left = `${host.x}px`;
+    hostBox.style.top = `${host.y}px`;
+    hostBox.style.width = `${host.width}px`;
+    hostBox.style.height = `${host.height}px`;
+    hostBox.style.border = "1px dashed rgba(59,130,246,0.9)";
+    hostBox.style.boxSizing = "border-box";
+    hostBox.style.pointerEvents = "none";
+    // effective viewport
+    box.style.position = "absolute";
+    box.style.left = `${effective.x}px`;
+    box.style.top = `${effective.y}px`;
+    box.style.width = `${effective.width}px`;
+    box.style.height = `${effective.height}px`;
+    box.style.border = "2px solid cyan";
+    box.style.boxSizing = "border-box";
+    box.style.pointerEvents = "none";
+    root.appendChild(hostBox);
+    root.appendChild(box);
+}

package/dist/engines/densityEngine.d.ts

@@ -0,0 +1,2 @@
+import type { DensityEngine } from "../types";
+export declare const defaultDensityEngine: DensityEngine;

package/dist/engines/densityEngine.js

@@ -0,0 +1,47 @@
+function getZoneDensity(size, thresholds) {
+    if (size >= thresholds.detail)
+        return "detail";
+    if (size >= thresholds.near)
+        return "near";
+    if (size >= thresholds.mid)
+        return "mid";
+    return "far";
+}
+function getPathDensity(size, thresholds) {
+    if (size >= thresholds.full)
+        return "full";
+    if (size >= thresholds.chip)
+        return "chip";
+    return "edge-only";
+}
+export const defaultDensityEngine = {
+    compute(input) {
+        const { graphLayout, base } = input;
+        const zoom = base.camera.zoom;
+        const theme = base.theme;
+        const zoneDensityById = {};
+        const pathDensityById = {};
+        const zoneThresholds = theme.density.zone;
+        const pathThresholds = theme.density.path;
+        // --- zone ---
+        Object.values(graphLayout.zonesById).forEach((zone) => {
+            const rect = zone.rect;
+            const size = Math.max(rect.width, rect.height) * zoom;
+            zoneDensityById[zone.zoneId] = getZoneDensity(size, zoneThresholds);
+        });
+        // --- path ---
+        Object.values(graphLayout.pathsById).forEach((path) => {
+            const rect = path.rect;
+            if (!rect) {
+                pathDensityById[path.pathId] = "edge-only";
+                return;
+            }
+            const size = Math.max(rect.width, rect.height) * zoom;
+            pathDensityById[path.pathId] = getPathDensity(size, pathThresholds);
+        });
+        return {
+            zoneDensityById,
+            pathDensityById,
+        };
+    },
+};

package/dist/engines/drawEngine.d.ts

@@ -0,0 +1,2 @@
+import type { DrawEngine } from "../types";
+export declare const domDrawEngine: DrawEngine;