@zoneflow/renderer-dom 0.0.21 → 0.0.22

package/dist/diffDecorations.d.ts

@@ -0,0 +1,67 @@
+import type { UniverseModelDiff } from "@zoneflow/core";
+import type { ResolvePathColor, ResolvePathLineColor, ResolvePathStyle } from "./types";
+import type { ResolveZoneColor, ResolveZoneStyle, ZoneStyleOverride } from "./zoneShape";
+export type DiffDecorationStatus = "removed" | "added" | "changed";
+/** Default status colors — red / green / amber. */
+export declare const DIFF_DECORATION_COLORS: Record<DiffDecorationStatus, string>;
+export type DiffDecorationOptions = {
+    /** Per-status color overrides. Defaults to {@link DIFF_DECORATION_COLORS}. */
+    colors?: Partial<Record<DiffDecorationStatus, string>>;
+    /**
+     * Style applied to zones marked removed (the "ghost"). Defaults to a dashed
+     * outline at 45% opacity. Pass `null` to disable the ghost and keep only
+     * the accent color.
+     */
+    removedZoneStyle?: ZoneStyleOverride | null;
+    /**
+     * Blink elements marked removed (zones, path nodes/labels, connector
+     * lines). On by default — colors alone are ambiguous when the app already
+     * colors zones/paths for its own meaning. Set `false` for static colors
+     * only. (Pulse is suppressed by the renderer under
+     * `prefers-reduced-motion` regardless.)
+     */
+    pulseRemoved?: boolean;
+    /**
+     * Resolvers to fall back to for elements the diff does not mark — so the
+     * decorations can wrap an app's existing presentation (e.g. `meta.color`
+     * based resolvers) instead of replacing it.
+     */
+    base?: {
+        resolveZoneColor?: ResolveZoneColor;
+        resolveZoneStyle?: ResolveZoneStyle;
+        resolvePathColor?: ResolvePathColor;
+        resolvePathLineColor?: ResolvePathLineColor;
+        resolvePathStyle?: ResolvePathStyle;
+    };
+};
+export type DiffDecorations = {
+    resolveZoneColor: ResolveZoneColor;
+    resolveZoneStyle: ResolveZoneStyle;
+    resolvePathColor: ResolvePathColor;
+    resolvePathLineColor: ResolvePathLineColor;
+    resolvePathStyle: ResolvePathStyle;
+};
+/**
+ * Turn a {@link UniverseModelDiff} into the presentation resolvers that
+ * paint diff status onto the canvas:
+ *
+ * - removed → red accent, red connector lines, dashed ghost zones, and a
+ *   blink (pulse) so removal stands out even in apps that already use color
+ *   for their own meaning
+ * - added → green accent / lines
+ * - changed → amber accent / lines
+ *
+ * The resolvers match purely by id, so they work with whichever side of the
+ * diff you render: draw the `before` model to preview removals and changes
+ * ("what will happen"), or the `after` model to review additions and changes
+ * ("what just happened"). Ids absent from the rendered model simply never
+ * come up.
+ *
+ * @example
+ * const diff = diffUniverseModels(model, cleaned);
+ * const deco = createDiffDecorations(diff, {
+ *   base: { resolvePathColor: myMetaColorResolver },
+ * });
+ * <UniverseCanvas model={model} {...deco} />
+ */
+export declare function createDiffDecorations(diff: UniverseModelDiff, options?: DiffDecorationOptions): DiffDecorations;

package/dist/diffDecorations.js

@@ -0,0 +1,99 @@
+/** Default status colors — red / green / amber. */
+export const DIFF_DECORATION_COLORS = {
+    removed: "#dc2626",
+    added: "#16a34a",
+    changed: "#d97706",
+};
+const DEFAULT_REMOVED_ZONE_STYLE = {
+    borderStyle: "dashed",
+    opacity: 0.45,
+};
+/**
+ * Turn a {@link UniverseModelDiff} into the presentation resolvers that
+ * paint diff status onto the canvas:
+ *
+ * - removed → red accent, red connector lines, dashed ghost zones, and a
+ *   blink (pulse) so removal stands out even in apps that already use color
+ *   for their own meaning
+ * - added → green accent / lines
+ * - changed → amber accent / lines
+ *
+ * The resolvers match purely by id, so they work with whichever side of the
+ * diff you render: draw the `before` model to preview removals and changes
+ * ("what will happen"), or the `after` model to review additions and changes
+ * ("what just happened"). Ids absent from the rendered model simply never
+ * come up.
+ *
+ * @example
+ * const diff = diffUniverseModels(model, cleaned);
+ * const deco = createDiffDecorations(diff, {
+ *   base: { resolvePathColor: myMetaColorResolver },
+ * });
+ * <UniverseCanvas model={model} {...deco} />
+ */
+export function createDiffDecorations(diff, options = {}) {
+    const colors = { ...DIFF_DECORATION_COLORS, ...options.colors };
+    const pulseRemoved = options.pulseRemoved ?? true;
+    const baseRemovedZoneStyle = options.removedZoneStyle === undefined
+        ? DEFAULT_REMOVED_ZONE_STYLE
+        : options.removedZoneStyle;
+    const removedZoneStyle = baseRemovedZoneStyle === null
+        ? pulseRemoved
+            ? { pulse: true }
+            : null
+        : pulseRemoved
+            ? { ...baseRemovedZoneStyle, pulse: true }
+            : baseRemovedZoneStyle;
+    const removedPathStyle = pulseRemoved
+        ? { pulse: true }
+        : null;
+    const base = options.base ?? {};
+    const zoneStatusById = new Map();
+    for (const zoneId of diff.zones.removed)
+        zoneStatusById.set(zoneId, "removed");
+    for (const zoneId of diff.zones.added)
+        zoneStatusById.set(zoneId, "added");
+    for (const zoneId of Object.keys(diff.zones.changed)) {
+        zoneStatusById.set(zoneId, "changed");
+    }
+    const pathStatusById = new Map();
+    for (const ref of diff.paths.removed)
+        pathStatusById.set(ref.pathId, "removed");
+    for (const ref of diff.paths.added)
+        pathStatusById.set(ref.pathId, "added");
+    for (const pathId of Object.keys(diff.paths.changed)) {
+        pathStatusById.set(pathId, "changed");
+    }
+    return {
+        resolveZoneColor: (zone) => {
+            const status = zoneStatusById.get(zone.id);
+            return status ? colors[status] : base.resolveZoneColor?.(zone);
+        },
+        resolveZoneStyle: (zone) => {
+            const baseStyle = base.resolveZoneStyle?.(zone) ?? undefined;
+            if (zoneStatusById.get(zone.id) === "removed" && removedZoneStyle) {
+                // Merge so an app's own zone styling (e.g. a custom border) survives
+                // under the diff ghost/pulse instead of being dropped.
+                return { ...baseStyle, ...removedZoneStyle };
+            }
+            return baseStyle;
+        },
+        resolvePathColor: (path) => {
+            const status = pathStatusById.get(path.id);
+            return status ? colors[status] : base.resolvePathColor?.(path);
+        },
+        resolvePathLineColor: (path) => {
+            const status = pathStatusById.get(path.id);
+            return status ? colors[status] : base.resolvePathLineColor?.(path);
+        },
+        resolvePathStyle: (path) => {
+            const baseStyle = base.resolvePathStyle?.(path) ?? undefined;
+            if (pathStatusById.get(path.id) === "removed" && removedPathStyle) {
+                // A removed path that the app also marks (e.g. dashed "unconfigured")
+                // stays dashed AND gains the removal pulse.
+                return { ...baseStyle, ...removedPathStyle };
+            }
+            return baseStyle;
+        },
+    };
+}

package/dist/engines/drawEngine.js

@@ -1,7 +1,7 @@
 import { resolveZoneAnchorRect } from "../anchors";
 import { normalizeZoneShape } from "../zoneShape";
 import { getZoneDepth, isZoneInputEnabled, isZoneOutputEnabled, } from "@zoneflow/core";
-import { appendEdgeFlowStyle, resolveCollapsedEdgeStroke, resolveDrawableEdgeSegments, resolveEdgeFlowMotion, } from "./edgeFlow";
+import { appendEdgeFlowStyle, appendPulseStyle, resolveCollapsedEdgeStroke, resolveDrawableEdgeSegments, resolveEdgeFlowMotion, } from "./edgeFlow";
 const SCENE_PADDING = 64;
 const RENDER_Z_INDEX = {
     backgroundLayer: 0,
@@ -13,6 +13,8 @@ const RENDER_Z_INDEX = {
     pathLayer: 30,
 };
 const EDGE_FLOW_CLASS = "zoneflow-edge-flow";
+const PULSE_CLASS = "zoneflow-pulse";
+const PULSE_ANIMATION_NAME = "zoneflow-pulse";
 function applyStyles(el, styles) {
     for (const [key, value] of Object.entries(styles)) {
         // @ts-expect-error CSSStyleDeclaration index access
@@ -175,6 +177,19 @@ function getEdgeColor(params) {
         ? params.theme.pathEdge
         : params.theme.pathInboundEdge;
 }
+// SVG stroke-dasharray for a consumer-chosen line style. Dotted relies on the
+// round linecap (already set on every edge stroke) to render the ~0-length
+// dashes as dots. Returns null for solid/undefined (no dash pattern).
+function getEdgeDashPattern(lineStyle) {
+    switch (lineStyle) {
+        case "dashed":
+            return "7 6";
+        case "dotted":
+            return "0.1 6";
+        default:
+            return null;
+    }
+}
 function getBezierCurvePathD(params) {
     const { source, target } = params;
     const distanceX = Math.abs(target.x - source.x);
@@ -500,6 +515,13 @@ function drawEdges(params) {
         className: EDGE_FLOW_CLASS,
         motion: edgeFlowMotion,
     });
+    // CSS rules are document-global even from an SVG <style>, so this also
+    // powers the pulse class on the DOM zone/path layers.
+    appendPulseStyle({
+        svg,
+        animationName: PULSE_ANIMATION_NAME,
+        className: PULSE_CLASS,
+    });
     for (const [pathId, edges] of Object.entries(input.pipeline.graphLayout.edgesByPathId)) {
         const visibility = input.pipeline.visibility.pathVisibilityById[pathId];
         if (!visibility?.shouldRenderEdge)
@@ -509,27 +531,66 @@ function drawEdges(params) {
             edges,
             visibility,
         });
+        // Consumer-resolved per-path line color overrides the theme's edge colors
+        // for every segment of this path, collapsed ones included.
+        const pathVisual = input.pipeline.graphLayout.pathsById[pathId];
+        const lineColor = pathVisual
+            ? input.resolvePathLineColor?.(pathVisual.path) ?? undefined
+            : undefined;
+        const pathStyle = pathVisual
+            ? input.resolvePathStyle?.(pathVisual.path) ?? undefined
+            : undefined;
+        // Pulsing segments are wrapped in a group so the blink animates the
+        // group's opacity without fighting the per-stroke flow animation class.
+        let edgeOwner = svg;
+        if (pathStyle?.pulse) {
+            const pulseGroup = createSvgElement("g");
+            pulseGroup.setAttribute("class", PULSE_CLASS);
+            svg.appendChild(pulseGroup);
+            edgeOwner = pulseGroup;
+        }
+        // dashed/dotted draws a single static patterned stroke and suppresses the
+        // moving flow layers — a flowing dash on top of a static dash reads as
+        // noise, and an inert path is exactly what "not wired up yet" should look
+        // like. Solid keeps the normal base + animated flow stack.
+        const patterned = getEdgeDashPattern(pathStyle?.lineStyle);
         for (const { edge, collapsed } of drawableEdges) {
-            const stroke = collapsed
-                ? resolveCollapsedEdgeStroke(input.theme)
-                : getEdgeColor({
-                    kind: edge.kind,
-                    theme: input.theme,
-                });
+            const stroke = lineColor ??
+                (collapsed
+                    ? resolveCollapsedEdgeStroke(input.theme)
+                    : getEdgeColor({
+                        kind: edge.kind,
+                        theme: input.theme,
+                    }));
             const pathD = getBezierCurvePathD({
                 source: edge.source,
                 target: edge.target,
             });
             const opacity = getOpacity(visibility.emphasis);
+            const baseWidth = edge.kind === "path-to-zone" ? 2.25 : 1.85;
+            if (patterned) {
+                const dashed = createSvgElement("path");
+                dashed.setAttribute("d", pathD);
+                dashed.setAttribute("fill", "none");
+                dashed.setAttribute("stroke", stroke);
+                dashed.setAttribute("stroke-width", String(baseWidth));
+                dashed.setAttribute("stroke-linecap", "round");
+                dashed.setAttribute("stroke-linejoin", "round");
+                dashed.setAttribute("stroke-dasharray", patterned);
+                // Sole layer, so render it at full emphasis (no faint base stack).
+                dashed.setAttribute("opacity", String(opacity * 0.9));
+                edgeOwner.appendChild(dashed);
+                continue;
+            }
             const path = createSvgElement("path");
             path.setAttribute("d", pathD);
             path.setAttribute("fill", "none");
             path.setAttribute("stroke", stroke);
-            path.setAttribute("stroke-width", edge.kind === "path-to-zone" ? "2.25" : "1.85");
+            path.setAttribute("stroke-width", String(baseWidth));
             path.setAttribute("stroke-linecap", "round");
             path.setAttribute("stroke-linejoin", "round");
             path.setAttribute("opacity", String(opacity * 0.42));
-            svg.appendChild(path);
+            edgeOwner.appendChild(path);
             const flowGlow = createSvgElement("path");
             flowGlow.setAttribute("d", pathD);
             flowGlow.setAttribute("fill", "none");
@@ -541,7 +602,7 @@ function drawEdges(params) {
             flowGlow.setAttribute("stroke-dashoffset", edgeFlowMotion.dashOffset);
             flowGlow.setAttribute("opacity", String(opacity * 0.18));
             flowGlow.setAttribute("class", EDGE_FLOW_CLASS);
-            svg.appendChild(flowGlow);
+            edgeOwner.appendChild(flowGlow);
             const flow = createSvgElement("path");
             flow.setAttribute("d", pathD);
             flow.setAttribute("fill", "none");
@@ -553,7 +614,7 @@ function drawEdges(params) {
             flow.setAttribute("stroke-dashoffset", edgeFlowMotion.dashOffset);
             flow.setAttribute("opacity", String(opacity * 0.94));
             flow.setAttribute("class", EDGE_FLOW_CLASS);
-            svg.appendChild(flow);
+            edgeOwner.appendChild(flow);
         }
     }
 }
@@ -869,19 +930,28 @@ export const domDrawEngine = {
             const zoneBodyEl = document.createElement("div");
             zoneEl.dataset.zoneflowZoneId = zoneVisual.zoneId;
             zoneBodyEl.dataset.zoneflowZoneBody = zoneVisual.zoneId;
+            // Consumer-resolved style overrides (diff-preview ghosts etc.). Opacity
+            // composes onto the visibility-driven value and dims the whole subtree —
+            // body, slots, and anchors alike.
+            const zoneStyle = input.resolveZoneStyle?.(zoneVisual.zone) ?? undefined;
+            const zoneStyleOpacity = Math.min(Math.max(zoneStyle?.opacity ?? 1, 0), 1);
             applyStyles(zoneEl, {
                 position: "absolute",
                 left: `${zoneVisual.rect.x}px`,
                 top: `${zoneVisual.rect.y}px`,
                 width: `${zoneVisual.rect.width}px`,
                 height: `${zoneVisual.rect.height}px`,
-                opacity: getOpacity(visibility.emphasis),
+                opacity: getOpacity(visibility.emphasis) * zoneStyleOpacity,
                 overflow: "visible",
                 zIndex: zoneDepth + RENDER_Z_INDEX.zoneBase,
                 // zoneLayer 가 pointer-events: none 이고 이 속성은 상속되므로,
                 // 명시하지 않으면 카드에서 슬롯 사각형 밖 영역의 클릭이 배경으로 빠진다.
                 pointerEvents: "auto",
             });
+            if (zoneStyle?.pulse) {
+                // Pulses from the inline opacity above, so it composes with ghosting.
+                zoneEl.classList.add(PULSE_CLASS);
+            }
             const shape = normalizeZoneShape(input.resolveZoneShape?.(zoneVisual.zone));
             // Consumer-resolved per-zone color overrides the theme's border + accent
             // (body background and text stay theme-driven to preserve contrast).
@@ -938,7 +1008,7 @@ export const domDrawEngine = {
                     width: "100%",
                     height: "100%",
                     borderRadius: shape.borderRadius,
-                    border: `1px solid ${zoneBorderColor}`,
+                    border: `1px ${zoneStyle?.borderStyle ?? "solid"} ${zoneBorderColor}`,
                     background: theme.surface.zone.background,
                     boxSizing: "border-box",
                     boxShadow: theme.surface.zone.shadow,
@@ -1008,6 +1078,9 @@ export const domDrawEngine = {
                 // pathLayer 의 pointer-events: none 상속 차단 — zoneEl 과 동일한 이유.
                 pointerEvents: "auto",
             });
+            if (input.resolvePathStyle?.(pathVisual.path)?.pulse) {
+                pathEl.classList.add(PULSE_CLASS);
+            }
             pathEl.addEventListener("click", (event) => {
                 event.stopPropagation();
                 interactionHandlers?.onPathClick?.(pathVisual.pathId);

package/dist/engines/edgeFlow.d.ts

@@ -8,6 +8,18 @@ export type EdgeFlowMotion = {
     dashOffset: string;
 };
 export declare function resolveEdgeFlowMotion(theme: ZoneflowTheme): EdgeFlowMotion;
+/**
+ * Inject the shared blink animation used by pulse-decorated elements (diff
+ * previews etc.). The keyframes only define the 50% stop, so each element
+ * pulses from its own current opacity — ghosted zones dip from 0.45, full
+ * elements from 1. The <style> lives inside the edge SVG but CSS rules are
+ * document-global, so the same class works on the DOM zone/path layers too.
+ */
+export declare function appendPulseStyle(params: {
+    svg: SVGSVGElement;
+    animationName: string;
+    className: string;
+}): void;
 export declare function appendEdgeFlowStyle(params: {
     svg: SVGSVGElement;
     animationName: string;

package/dist/engines/edgeFlow.js

@@ -16,6 +16,31 @@ export function resolveEdgeFlowMotion(theme) {
         dashOffset: String(cycleLength),
     };
 }
+/**
+ * Inject the shared blink animation used by pulse-decorated elements (diff
+ * previews etc.). The keyframes only define the 50% stop, so each element
+ * pulses from its own current opacity — ghosted zones dip from 0.45, full
+ * elements from 1. The <style> lives inside the edge SVG but CSS rules are
+ * document-global, so the same class works on the DOM zone/path layers too.
+ */
+export function appendPulseStyle(params) {
+    const { svg, animationName, className } = params;
+    const style = document.createElementNS("http://www.w3.org/2000/svg", "style");
+    style.textContent = `
+@keyframes ${animationName} {
+  50% { opacity: 0.12; }
+}
+.${className} {
+  animation: ${animationName} 1100ms ease-in-out infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .${className} {
+    animation: none;
+  }
+}
+  `;
+    svg.appendChild(style);
+}
 export function appendEdgeFlowStyle(params) {
     const { svg, animationName, className, motion } = params;
     const style = document.createElementNS("http://www.w3.org/2000/svg", "style");

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export * from "./theme";
 export * from "./themes/defaultTheme";
 export * from "./types";
 export * from "./zoneShape";
+export * from "./diffDecorations";
 export * from "./anchors";
 export * from "./pipeline";
 export * from "./renderer";

package/dist/index.js

@@ -2,6 +2,7 @@ export * from "./theme";
 export * from "./themes/defaultTheme";
 export * from "./types";
 export * from "./zoneShape";
+export * from "./diffDecorations";
 export * from "./anchors";
 export * from "./pipeline";
 export * from "./renderer";

package/dist/renderer.js

@@ -69,7 +69,7 @@ export function createRenderer() {
         update(input) {
             if (!host)
                 return;
-            const { model, layoutModel, theme, textScale = "md", camera = DEFAULT_CAMERA, graphLayoutEngine = defaultGraphLayoutEngine, densityEngine = defaultDensityEngine, visibilityEngine = defaultVisibilityEngine, componentLayoutEngine = defaultComponentLayoutEngine, drawEngine = domDrawEngine, zoneComponentRenderers, pathComponentRenderers, resolveZoneShape, resolveZoneColor, resolvePathColor, backgroundRenderer, gridOptions, interactionHandlers, exclusionState, debug, } = input;
+            const { model, layoutModel, theme, textScale = "md", camera = DEFAULT_CAMERA, graphLayoutEngine = defaultGraphLayoutEngine, densityEngine = defaultDensityEngine, visibilityEngine = defaultVisibilityEngine, componentLayoutEngine = defaultComponentLayoutEngine, drawEngine = domDrawEngine, zoneComponentRenderers, pathComponentRenderers, resolveZoneShape, resolveZoneColor, resolveZoneStyle, resolvePathColor, resolvePathLineColor, resolvePathStyle, backgroundRenderer, gridOptions, interactionHandlers, exclusionState, debug, } = input;
             const mergedTheme = resolveTheme(theme);
             const viewportInfo = resolveViewportInfo(host, camera, input);
             const pipeline = runRenderPipeline({
@@ -121,7 +121,10 @@ export function createRenderer() {
                 pathComponentRenderers,
                 resolveZoneShape,
                 resolveZoneColor,
+                resolveZoneStyle,
                 resolvePathColor,
+                resolvePathLineColor,
+                resolvePathStyle,
                 backgroundRenderer,
                 gridOptions,
                 interactionHandlers,

package/dist/types.d.ts

@@ -1,6 +1,6 @@
 import type { AnchorRect, Path, PathId, Point, UniverseId, UniverseLayoutModel, UniverseModel, Zone, ZoneId } from "@zoneflow/core";
 import type { TextScaleLevel, ZoneflowTheme } from "./theme";
-import type { ResolveZoneColor, ResolveZoneShape } from "./zoneShape";
+import type { ResolveZoneColor, ResolveZoneShape, ResolveZoneStyle } from "./zoneShape";
 export type CameraState = {
     x: number;
     y: number;
@@ -155,6 +155,46 @@ export type PathComponentRendererMap = Partial<Record<PathComponentSlotName, Pat
  * is affected — the rule/target/body slots stay theme-driven for contrast.
  */
 export type ResolvePathColor = (path: Path) => string | null | undefined;
+/**
+ * Resolver invoked once per path to decide the color of its connector lines
+ * (the zone→path and path→zone edge strokes, including the flow animation).
+ * Return `undefined`/`null` to fall back to the theme's edge colors. The
+ * override also applies to the path's collapsed edge segments so a decorated
+ * path stays recognizable while a subtree is folded. Pair with
+ * {@link ResolvePathColor} when the label should match the line — built for
+ * states like a diff preview ("this connection will be removed/retargeted").
+ */
+export type ResolvePathLineColor = (path: Path) => string | null | undefined;
+/**
+ * Per-path presentation overrides beyond color — the path-side counterpart
+ * of {@link ZoneStyleOverride}.
+ */
+export type PathLineStyle = "solid" | "dashed" | "dotted";
+export type PathStyleOverride = {
+    /**
+     * Blink the path's node (label slots included) and its connector lines.
+     * Built for diff previews where color alone is ambiguous because apps may
+     * color paths for their own reasons. Disabled automatically under
+     * `prefers-reduced-motion`.
+     */
+    pulse?: boolean;
+    /**
+     * Dash pattern for the path's connector lines. `"dashed"`/`"dotted"` draw a
+     * single static stroke (the moving flow animation is suppressed so the
+     * pattern stays legible), which reads as "inert / not yet wired up" — e.g.
+     * an unconfigured path with no rule or target. Defaults to `"solid"` (the
+     * normal animated flow). Pair with {@link ResolvePathLineColor} to also tint
+     * it, and with the node `border-style` is left untouched — only the
+     * connector line is affected.
+     */
+    lineStyle?: PathLineStyle;
+};
+/**
+ * Resolver invoked once per path to decide its style overrides. Return
+ * `undefined`/`null` for the default presentation. Purely presentational —
+ * geometry and hit-testing are unaffected.
+ */
+export type ResolvePathStyle = (path: Path) => PathStyleOverride | null | undefined;
 export type ZoneComponentMount = {
     key: string;
     zoneId: ZoneId;
@@ -232,7 +272,10 @@ export type RendererDrawInput = {
     pathComponentRenderers?: PathComponentRendererMap;
     resolveZoneShape?: ResolveZoneShape;
     resolveZoneColor?: ResolveZoneColor;
+    resolveZoneStyle?: ResolveZoneStyle;
     resolvePathColor?: ResolvePathColor;
+    resolvePathLineColor?: ResolvePathLineColor;
+    resolvePathStyle?: ResolvePathStyle;
     backgroundRenderer?: BackgroundRenderer;
     gridOptions?: GridOptions;
     interactionHandlers?: RendererInteractionHandlers;
@@ -298,7 +341,10 @@ export type RendererInput = {
     pathComponentRenderers?: PathComponentRendererMap;
     resolveZoneShape?: ResolveZoneShape;
     resolveZoneColor?: ResolveZoneColor;
+    resolveZoneStyle?: ResolveZoneStyle;
     resolvePathColor?: ResolvePathColor;
+    resolvePathLineColor?: ResolvePathLineColor;
+    resolvePathStyle?: ResolvePathStyle;
     backgroundRenderer?: BackgroundRenderer;
     gridOptions?: GridOptions;
     interactionHandlers?: RendererInteractionHandlers;

package/dist/zoneShape.d.ts

@@ -52,6 +52,38 @@ export type ResolveZoneShape = (zone: Zone) => ZoneShape | null | undefined;
  * background and text stay theme-driven so contrast is preserved.
  */
 export type ResolveZoneColor = (zone: Zone) => string | null | undefined;
+/**
+ * Per-zone presentation overrides beyond color — built for transient states
+ * like a diff preview's "will be removed" ghost (dashed outline + dimmed).
+ */
+export type ZoneStyleOverride = {
+    /**
+     * CSS `border-style` for the zone outline. Applies to radius-based shapes;
+     * clipped shapes (diamond/hexagon/custom `clipPath`) synthesize their
+     * outline from a fill layer, so `borderStyle` is ignored there.
+     */
+    borderStyle?: "solid" | "dashed" | "dotted";
+    /**
+     * 0..1 multiplier composed onto the zone's computed visibility opacity.
+     * Dims the whole zone including its slots and anchors.
+     */
+    opacity?: number;
+    /**
+     * Blink the whole zone (slots and anchors included) — for states color
+     * alone can't carry, e.g. "will be removed" in a diff preview where apps
+     * may already use colors for their own meaning. Pulses from the zone's
+     * computed opacity, so it composes with `opacity`. Disabled automatically
+     * under `prefers-reduced-motion`.
+     */
+    pulse?: boolean;
+};
+/**
+ * Resolver invoked once per zone to decide its style overrides. Return
+ * `undefined`/`null` for the default presentation. Like
+ * {@link ResolveZoneColor}, purely presentational — geometry, hit-testing,
+ * and anchors are unaffected.
+ */
+export type ResolveZoneStyle = (zone: Zone) => ZoneStyleOverride | null | undefined;
 /** Normalized geometry consumed by the draw engine. */
 export type ResolvedZoneShape = {
     borderRadius: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zoneflow/renderer-dom",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "license": "MIT",
   "description": "Low-level DOM renderer engines for Zoneflow.",
   "type": "module",
@@ -19,10 +19,14 @@
     "dist"
   ],
   "dependencies": {
-    "@zoneflow/core": "0.0.21"
+    "@zoneflow/core": "0.0.22"
+  },
+  "devDependencies": {
+    "vitest": "^4.1.8"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",
-    "type-check": "tsc -p tsconfig.json --noEmit"
+    "type-check": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run"
   }
 }