@zoneflow/renderer-dom 0.0.15 → 0.0.16

package/dist/engines/drawEngine.js

@@ -1,4 +1,5 @@
 import { resolveZoneAnchorRect } from "../anchors";
+import { normalizeZoneShape } from "../zoneShape";
 import { getZoneDepth, isZoneInputEnabled, isZoneOutputEnabled, } from "@zoneflow/core";
 import { appendEdgeFlowStyle, resolveCollapsedEdgeStroke, resolveDrawableEdgeSegments, resolveEdgeFlowMotion, } from "./edgeFlow";
 const SCENE_PADDING = 64;
@@ -552,11 +553,13 @@ function drawEdges(params) {
         }
     }
 }
+// Depth for clipped shapes: box-shadow is cut away by clip-path, so a
+// polygon-following drop-shadow filter is used instead. Tuned to match the
+// zone surface box-shadow tokens (rgba(15, 23, 42, …)).
+const ZONE_CLIP_SHADOW = "drop-shadow(0 14px 22px rgba(15, 23, 42, 0.12)) drop-shadow(0 3px 6px rgba(15, 23, 42, 0.08))";
 function createSurfaceChrome(params) {
-    const { owner, accent, radius, theme, topBandOpacity = 0.64 } = params;
+    const { owner, accent, radius, theme, header = true, topBandOpacity = 0.64 } = params;
     const chrome = document.createElement("div");
-    const topBand = document.createElement("div");
-    const cornerGlow = document.createElement("div");
     applyStyles(chrome, {
         position: "absolute",
         inset: "0",
@@ -564,43 +567,108 @@ function createSurfaceChrome(params) {
         pointerEvents: "none",
         background: theme.surface.chrome.overlay,
     });
-    applyStyles(topBand, {
-        position: "absolute",
-        left: "0",
-        top: "0",
-        right: "0",
-        height: "44px",
-        borderTopLeftRadius: radius,
-        borderTopRightRadius: radius,
-        background: `linear-gradient(90deg, ${accent} 0%, ${theme.surface.chrome.accentFade} 72%)`,
-        opacity: topBandOpacity,
-        pointerEvents: "none",
-    });
-    applyStyles(cornerGlow, {
-        position: "absolute",
-        right: "-20px",
-        top: "-24px",
-        width: "116px",
-        height: "116px",
-        borderRadius: "999px",
-        background: theme.surface.chrome.glow,
-        pointerEvents: "none",
-    });
-    chrome.appendChild(topBand);
-    chrome.appendChild(cornerGlow);
+    if (header) {
+        const topBand = document.createElement("div");
+        const cornerGlow = document.createElement("div");
+        applyStyles(topBand, {
+            position: "absolute",
+            left: "0",
+            top: "0",
+            right: "0",
+            height: "44px",
+            borderTopLeftRadius: radius,
+            borderTopRightRadius: radius,
+            background: `linear-gradient(90deg, ${accent} 0%, ${theme.surface.chrome.accentFade} 72%)`,
+            opacity: topBandOpacity,
+            pointerEvents: "none",
+        });
+        applyStyles(cornerGlow, {
+            position: "absolute",
+            right: "-20px",
+            top: "-24px",
+            width: "116px",
+            height: "116px",
+            borderRadius: "999px",
+            background: theme.surface.chrome.glow,
+            pointerEvents: "none",
+        });
+        chrome.appendChild(topBand);
+        chrome.appendChild(cornerGlow);
+    }
+    else {
+        // Header-less shapes (circle/pill/diamond/…) keep their accent identity
+        // via a soft top-centered wash instead of the rectangular band.
+        const accentWash = document.createElement("div");
+        applyStyles(accentWash, {
+            position: "absolute",
+            inset: "0",
+            borderRadius: radius,
+            background: `radial-gradient(135% 100% at 50% 0%, ${accent} 0%, ${theme.surface.chrome.accentFade} 70%)`,
+            opacity: 0.85,
+            pointerEvents: "none",
+        });
+        chrome.appendChild(accentWash);
+    }
     owner.appendChild(chrome);
 }
 function drawZoneAnchors(params) {
-    const { owner, zone, input } = params;
-    const zoneBorderColor = zone.zone.zoneType === "action"
-        ? input.theme.zoneActionBorder
-        : input.theme.zoneContainerBorder;
-    const anchorAccentColor = zone.zone.zoneType === "action"
-        ? input.theme.surface.anchor.actionAccent
-        : input.theme.surface.anchor.containerAccent;
+    const { owner, zone, input, mode = "edge" } = params;
+    const zoneColor = input.resolveZoneColor?.(zone.zone) ?? undefined;
+    const zoneBorderColor = zoneColor ??
+        (zone.zone.zoneType === "action"
+            ? input.theme.zoneActionBorder
+            : input.theme.zoneContainerBorder);
+    const anchorAccentColor = zoneColor ??
+        (zone.zone.zoneType === "action"
+            ? input.theme.surface.anchor.actionAccent
+            : input.theme.surface.anchor.containerAccent);
+    const anchorGlowColor = zoneColor
+        ? `color-mix(in srgb, ${zoneColor} 12%, transparent)`
+        : anchorAccentColor.replace("0.96", "0.12");
     const shouldRenderAnchor = (kind) => kind === "inlet"
         ? isZoneInputEnabled(zone.zone)
         : isZoneOutputEnabled(zone.zone);
+    // Vertex mode: a compact dot centered on the left/right edge midpoint,
+    // sitting exactly on a round/diamond node's side. The interactive anchor
+    // geometry is unchanged — this only swaps the visual indicator.
+    if (mode === "vertex") {
+        const dotSize = 14;
+        for (const kind of ["inlet", "outlet"]) {
+            if (!shouldRenderAnchor(kind))
+                continue;
+            const dot = document.createElement("div");
+            const accentDot = document.createElement("div");
+            applyStyles(dot, {
+                position: "absolute",
+                top: "50%",
+                left: kind === "inlet" ? "0" : "auto",
+                right: kind === "outlet" ? "0" : "auto",
+                width: `${dotSize}px`,
+                height: `${dotSize}px`,
+                transform: kind === "inlet"
+                    ? "translate(-50%, -50%)"
+                    : "translate(50%, -50%)",
+                borderRadius: "999px",
+                background: input.theme.surface.anchor.background,
+                border: `1px solid ${zoneBorderColor}`,
+                boxShadow: input.theme.surface.anchor.shadow,
+                boxSizing: "border-box",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                pointerEvents: "none",
+            });
+            applyStyles(accentDot, {
+                width: "6px",
+                height: "6px",
+                borderRadius: "999px",
+                background: anchorAccentColor,
+            });
+            dot.appendChild(accentDot);
+            owner.appendChild(dot);
+        }
+        return;
+    }
     for (const kind of ["inlet", "outlet"]) {
         if (!shouldRenderAnchor(kind))
             continue;
@@ -648,7 +716,7 @@ function drawZoneAnchors(params) {
             background: anchorAccentColor,
             left: kind === "inlet" ? "8px" : "auto",
             right: kind === "outlet" ? "8px" : "auto",
-            boxShadow: `0 0 0 4px ${anchorAccentColor.replace("0.96", "0.12")}`,
+            boxShadow: `0 0 0 4px ${anchorGlowColor}`,
         });
         el.appendChild(seam);
         el.appendChild(accent);
@@ -795,7 +863,6 @@ export const domDrawEngine = {
             const zoneDepth = getZoneDepth(input.model, zoneVisual.zoneId);
             const zoneEl = document.createElement("div");
             const zoneBodyEl = document.createElement("div");
-            const zoneChromeEl = document.createElement("div");
             zoneEl.dataset.zoneflowZoneId = zoneVisual.zoneId;
             zoneBodyEl.dataset.zoneflowZoneBody = zoneVisual.zoneId;
             applyStyles(zoneEl, {
@@ -808,34 +875,82 @@ export const domDrawEngine = {
                 overflow: "visible",
                 zIndex: zoneDepth + RENDER_Z_INDEX.zoneBase,
             });
-            applyStyles(zoneBodyEl, {
-                position: "absolute",
-                left: "0",
-                top: "0",
-                width: "100%",
-                height: "100%",
-                borderRadius: "0",
-                border: `1px solid ${zoneVisual.zone.zoneType === "action"
+            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).
+            const zoneColor = input.resolveZoneColor?.(zoneVisual.zone) ?? undefined;
+            const zoneBorderColor = zoneColor ??
+                (zoneVisual.zone.zoneType === "action"
                     ? theme.zoneActionBorder
-                    : theme.zoneContainerBorder}`,
-                background: theme.surface.zone.background,
-                boxSizing: "border-box",
-                boxShadow: theme.surface.zone.shadow,
-                overflow: "hidden",
-            });
+                    : theme.zoneContainerBorder);
+            const zoneAccentColor = zoneColor
+                ? `color-mix(in srgb, ${zoneColor} 18%, transparent)`
+                : zoneVisual.zone.zoneType === "action"
+                    ? theme.surface.zone.actionAccent
+                    : theme.surface.zone.containerAccent;
+            if (shape.clipPath) {
+                // Clipped polygon (diamond/hexagon/custom). A CSS border would be
+                // cut by clip-path, so the outline is synthesized: a border-colored
+                // base layer with a 1px-inset fill layer on top. Depth comes from a
+                // drop-shadow filter since box-shadow is clipped away.
+                applyStyles(zoneBodyEl, {
+                    position: "absolute",
+                    left: "0",
+                    top: "0",
+                    width: "100%",
+                    height: "100%",
+                    background: zoneBorderColor,
+                    clipPath: shape.clipPath,
+                    boxSizing: "border-box",
+                    overflow: "hidden",
+                    filter: ZONE_CLIP_SHADOW,
+                });
+                const zoneFillEl = document.createElement("div");
+                applyStyles(zoneFillEl, {
+                    position: "absolute",
+                    inset: "1px",
+                    background: theme.surface.zone.background,
+                    clipPath: shape.clipPath,
+                    boxSizing: "border-box",
+                    overflow: "hidden",
+                });
+                zoneBodyEl.appendChild(zoneFillEl);
+                createSurfaceChrome({
+                    owner: zoneFillEl,
+                    accent: zoneAccentColor,
+                    radius: "0",
+                    theme,
+                    header: shape.header,
+                });
+            }
+            else {
+                applyStyles(zoneBodyEl, {
+                    position: "absolute",
+                    left: "0",
+                    top: "0",
+                    width: "100%",
+                    height: "100%",
+                    borderRadius: shape.borderRadius,
+                    border: `1px solid ${zoneBorderColor}`,
+                    background: theme.surface.zone.background,
+                    boxSizing: "border-box",
+                    boxShadow: theme.surface.zone.shadow,
+                    overflow: "hidden",
+                });
+                const zoneChromeEl = document.createElement("div");
+                createSurfaceChrome({
+                    owner: zoneChromeEl,
+                    accent: zoneAccentColor,
+                    radius: shape.borderRadius,
+                    theme,
+                    header: shape.header,
+                });
+                zoneBodyEl.appendChild(zoneChromeEl);
+            }
             zoneEl.addEventListener("click", (event) => {
                 event.stopPropagation();
                 interactionHandlers?.onZoneClick?.(zoneVisual.zoneId);
             });
-            createSurfaceChrome({
-                owner: zoneChromeEl,
-                accent: zoneVisual.zone.zoneType === "action"
-                    ? theme.surface.zone.actionAccent
-                    : theme.surface.zone.containerAccent,
-                radius: "0",
-                theme,
-            });
-            zoneBodyEl.appendChild(zoneChromeEl);
             zoneEl.appendChild(zoneBodyEl);
             for (const slot of Object.keys(componentLayout?.slots ?? {})) {
                 createZoneSlotHost({
@@ -851,6 +966,7 @@ export const domDrawEngine = {
                 owner: zoneEl,
                 zone: zoneVisual,
                 input,
+                mode: shape.anchors,
             });
             zoneLayer.appendChild(zoneEl);
         }

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,6 +1,7 @@
 export * from "./theme";
 export * from "./themes/defaultTheme";
 export * from "./types";
+export * from "./zoneShape";
 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, 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, backgroundRenderer, gridOptions, interactionHandlers, exclusionState, debug, } = input;
             const mergedTheme = resolveTheme(theme);
             const viewportInfo = resolveViewportInfo(host, camera, input);
             const pipeline = runRenderPipeline({
@@ -119,6 +119,8 @@ export function createRenderer() {
                 pipeline,
                 zoneComponentRenderers,
                 pathComponentRenderers,
+                resolveZoneShape,
+                resolveZoneColor,
                 backgroundRenderer,
                 gridOptions,
                 interactionHandlers,

package/dist/types.d.ts

@@ -1,5 +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";
 export type CameraState = {
     x: number;
     y: number;
@@ -203,6 +204,8 @@ export type RendererDrawInput = {
     pipeline: RenderPipelineResult;
     zoneComponentRenderers?: ZoneComponentRendererMap;
     pathComponentRenderers?: PathComponentRendererMap;
+    resolveZoneShape?: ResolveZoneShape;
+    resolveZoneColor?: ResolveZoneColor;
     backgroundRenderer?: BackgroundRenderer;
     gridOptions?: GridOptions;
     interactionHandlers?: RendererInteractionHandlers;
@@ -266,6 +269,8 @@ export type RendererInput = {
     drawEngine?: DrawEngine;
     zoneComponentRenderers?: ZoneComponentRendererMap;
     pathComponentRenderers?: PathComponentRendererMap;
+    resolveZoneShape?: ResolveZoneShape;
+    resolveZoneColor?: ResolveZoneColor;
     backgroundRenderer?: BackgroundRenderer;
     gridOptions?: GridOptions;
     interactionHandlers?: RendererInteractionHandlers;

package/dist/zoneShape.d.ts

@@ -0,0 +1,62 @@
+import type { Zone } from "@zoneflow/core";
+/**
+ * Where a zone's connection anchors are drawn.
+ * - `edge`: the default full-height side tabs (good for rectangular cards).
+ * - `vertex`: a compact dot centered on the left/right edge midpoint
+ *   (good for round/diamond nodes whose sides are not flat).
+ */
+export type ZoneAnchorRenderMode = "edge" | "vertex";
+/** Built-in shape presets. */
+export type ZoneShapeName = "rect" | "rounded" | "pill" | "circle" | "diamond" | "hexagon";
+/**
+ * Fully custom shape spec — the escape hatch for arbitrary geometry.
+ *
+ * Provide either `borderRadius` (rendered with a real CSS border) or
+ * `clipPath` (rendered as a clipped polygon with a synthesized outline).
+ * When `clipPath` is set, `borderRadius` is ignored.
+ */
+export type ZoneShapeSpec = {
+    /** CSS `border-radius` value, e.g. `"14px"`, `"50%"`, `"999px"`. */
+    borderRadius?: string;
+    /**
+     * CSS `clip-path` value, e.g. `"polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)"`.
+     * When set the zone is drawn as a clipped polygon.
+     */
+    clipPath?: string;
+    /**
+     * Whether to draw the rectangular accent header band at the top.
+     * Defaults to `true` for radius-based shapes and `false` for clipped /
+     * fully-rounded shapes (where a rectangular band looks wrong).
+     */
+    header?: boolean;
+    /**
+     * How connection anchors attach. Defaults to `"vertex"` for clipped or
+     * circular shapes and `"edge"` otherwise.
+     */
+    anchors?: ZoneAnchorRenderMode;
+};
+export type ZoneShape = ZoneShapeName | ZoneShapeSpec;
+/**
+ * Resolver invoked once per zone to decide how it is drawn. Return
+ * `undefined`/`null` to fall back to the default rectangle. Purely a
+ * presentation concern — the zone's geometry, hit-testing, and anchor
+ * points are unaffected, so paths still connect exactly as before.
+ */
+export type ResolveZoneShape = (zone: Zone) => ZoneShape | null | undefined;
+/**
+ * Resolver invoked once per zone to decide its accent color. Return a CSS
+ * color to override the zone's border + accent (and matching anchor) for that
+ * zone; return `undefined`/`null` to fall back to the theme's zoneType-based
+ * colors. Like {@link ResolveZoneShape}, a purely presentational hook decided
+ * by the consumer (e.g. from `zone.meta.color`, `zone.action`, …). The body
+ * background and text stay theme-driven so contrast is preserved.
+ */
+export type ResolveZoneColor = (zone: Zone) => string | null | undefined;
+/** Normalized geometry consumed by the draw engine. */
+export type ResolvedZoneShape = {
+    borderRadius: string;
+    clipPath: string | null;
+    header: boolean;
+    anchors: ZoneAnchorRenderMode;
+};
+export declare function normalizeZoneShape(shape: ZoneShape | null | undefined): ResolvedZoneShape;

package/dist/zoneShape.js

@@ -0,0 +1,39 @@
+const DIAMOND_CLIP = "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)";
+const HEXAGON_CLIP = "polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)";
+const RECT_SHAPE = {
+    borderRadius: "0",
+    clipPath: null,
+    header: true,
+    anchors: "edge",
+};
+function specFromName(name) {
+    switch (name) {
+        case "rounded":
+            return { borderRadius: "14px" };
+        case "pill":
+            return { borderRadius: "999px", header: false, anchors: "vertex" };
+        case "circle":
+            return { borderRadius: "50%", header: false, anchors: "vertex" };
+        case "diamond":
+            return { clipPath: DIAMOND_CLIP };
+        case "hexagon":
+            return { clipPath: HEXAGON_CLIP };
+        case "rect":
+        default:
+            return { borderRadius: "0" };
+    }
+}
+export function normalizeZoneShape(shape) {
+    if (!shape)
+        return RECT_SHAPE;
+    const spec = typeof shape === "string" ? specFromName(shape) : shape;
+    const clipPath = spec.clipPath ?? null;
+    const borderRadius = clipPath ? "0" : spec.borderRadius ?? "0";
+    const isRound = !clipPath && borderRadius === "50%";
+    return {
+        borderRadius,
+        clipPath,
+        header: spec.header ?? !clipPath,
+        anchors: spec.anchors ?? (clipPath || isRound ? "vertex" : "edge"),
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zoneflow/renderer-dom",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "license": "MIT",
   "description": "Low-level DOM renderer engines for Zoneflow.",
   "type": "module",
@@ -19,7 +19,7 @@
     "dist"
   ],
   "dependencies": {
-    "@zoneflow/core": "0.0.15"
+    "@zoneflow/core": "0.0.16"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",