@zoneflow/renderer-dom 0.0.3 → 0.0.5

package/dist/engines/drawEngine.js

@@ -1,6 +1,14 @@
 import { resolveZoneAnchorRect } from "../anchors";
 import { getZoneDepth, isZoneInputEnabled, isZoneOutputEnabled, } from "@zoneflow/core";
 const SCENE_PADDING = 64;
+const RENDER_Z_INDEX = {
+    zoneBase: 1,
+    pathNode: 1,
+    pathStatusBadge: 2,
+    zoneLayer: 10,
+    edgeLayer: 20,
+    pathLayer: 30,
+};
 function applyStyles(el, styles) {
     for (const [key, value] of Object.entries(styles)) {
         // @ts-expect-error CSSStyleDeclaration index access
@@ -57,8 +65,9 @@ function resolvePathTargetDisplay(params) {
     };
 }
 function createPathStatusBadge(params) {
-    const { owner, status } = params;
+    const { owner, status, theme } = params;
     const badge = document.createElement("div");
+    const tone = status === "missing" ? theme.status.warning : theme.status.info;
     const isMissing = status === "missing";
     badge.title = isMissing ? "Broken path target" : "Path target not set";
     badge.setAttribute("aria-label", isMissing ? "Broken path target" : "Path target not set");
@@ -73,15 +82,15 @@ function createPathStatusBadge(params) {
         alignItems: "center",
         justifyContent: "center",
         borderRadius: "999px",
-        border: "1px solid rgba(217, 119, 6, 0.24)",
-        background: "linear-gradient(180deg, rgba(255,251,235,0.98) 0%, rgba(254,243,199,0.98) 100%)",
-        color: "#b45309",
-        boxShadow: "0 6px 14px rgba(180, 83, 9, 0.16)",
+        border: tone.border,
+        background: tone.background,
+        color: tone.color,
+        boxShadow: tone.shadow,
         fontSize: "12px",
         lineHeight: "1",
         fontWeight: "700",
         pointerEvents: "none",
-        zIndex: 2,
+        zIndex: RENDER_Z_INDEX.pathStatusBadge,
     });
     owner.appendChild(badge);
 }
@@ -101,8 +110,10 @@ function getOpacity(emphasis) {
 function createSvgElement(tag) {
     return document.createElementNS("http://www.w3.org/2000/svg", tag);
 }
-function getEdgeColor(kind, themePathEdge) {
-    return kind === "zone-to-path" ? themePathEdge : "#0f766e";
+function getEdgeColor(params) {
+    return params.kind === "zone-to-path"
+        ? params.theme.pathEdge
+        : params.theme.pathInboundEdge;
 }
 function getBezierCurvePathD(params) {
     const { source, target } = params;
@@ -271,9 +282,9 @@ function renderPathFallback(host, slot, context) {
         applyStyles(host, {
             ...base,
             color: targetDisplay.status === "missing"
-                ? "#b45309"
+                ? context.theme.status.warning.color
                 : targetDisplay.status === "unconfigured"
-                    ? "#b45309"
+                    ? context.theme.status.info.color
                     : context.theme.zoneSubtext,
             fontSize: "11px",
             fontWeight: targetDisplay.status === "resolved" ? 500 : 700,
@@ -406,7 +417,10 @@ function drawEdges(params) {
         if (!visibility?.shouldRenderEdge)
             continue;
         for (const edge of edges) {
-            const stroke = getEdgeColor(edge.kind, input.theme.pathEdge);
+            const stroke = getEdgeColor({
+                kind: edge.kind,
+                theme: input.theme,
+            });
             const path = createSvgElement("path");
             path.setAttribute("d", getBezierCurvePathD({
                 source: edge.source,
@@ -435,7 +449,7 @@ function drawEdges(params) {
     }
 }
 function createSurfaceChrome(params) {
-    const { owner, accent, radius, topBandOpacity = 0.64 } = params;
+    const { owner, accent, radius, theme, topBandOpacity = 0.64 } = params;
     const chrome = document.createElement("div");
     const topBand = document.createElement("div");
     const cornerGlow = document.createElement("div");
@@ -444,7 +458,7 @@ function createSurfaceChrome(params) {
         inset: "0",
         borderRadius: radius,
         pointerEvents: "none",
-        background: "linear-gradient(180deg, rgba(255,255,255,0.74) 0%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 100%)",
+        background: theme.surface.chrome.overlay,
     });
     applyStyles(topBand, {
         position: "absolute",
@@ -454,7 +468,7 @@ function createSurfaceChrome(params) {
         height: "44px",
         borderTopLeftRadius: radius,
         borderTopRightRadius: radius,
-        background: `linear-gradient(90deg, ${accent} 0%, rgba(255,255,255,0.04) 72%)`,
+        background: `linear-gradient(90deg, ${accent} 0%, ${theme.surface.chrome.accentFade} 72%)`,
         opacity: topBandOpacity,
         pointerEvents: "none",
     });
@@ -465,7 +479,7 @@ function createSurfaceChrome(params) {
         width: "116px",
         height: "116px",
         borderRadius: "999px",
-        background: "radial-gradient(circle, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.22) 36%, rgba(255,255,255,0) 72%)",
+        background: theme.surface.chrome.glow,
         pointerEvents: "none",
     });
     chrome.appendChild(topBand);
@@ -478,8 +492,8 @@ function drawZoneAnchors(params) {
         ? input.theme.zoneActionBorder
         : input.theme.zoneContainerBorder;
     const anchorAccentColor = zone.zone.zoneType === "action"
-        ? "rgba(245, 158, 11, 0.96)"
-        : "rgba(37, 99, 235, 0.96)";
+        ? input.theme.surface.anchor.actionAccent
+        : input.theme.surface.anchor.containerAccent;
     const shouldRenderAnchor = (kind) => kind === "inlet"
         ? isZoneInputEnabled(zone.zone)
         : isZoneOutputEnabled(zone.zone);
@@ -502,11 +516,11 @@ function drawZoneAnchors(params) {
             width: `${rect.width}px`,
             height: `${rect.height}px`,
             borderRadius: "0",
-            background: "linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(247,250,253,0.98) 100%)",
+            background: input.theme.surface.anchor.background,
             border: `1px solid ${zoneBorderColor}`,
             borderRight: kind === "inlet" ? "none" : `1px solid ${zoneBorderColor}`,
             borderLeft: kind === "outlet" ? "none" : `1px solid ${zoneBorderColor}`,
-            boxShadow: "0 18px 28px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255,255,255,0.9)",
+            boxShadow: input.theme.surface.anchor.shadow,
             boxSizing: "border-box",
             overflow: "hidden",
             pointerEvents: "none",
@@ -516,7 +530,7 @@ function drawZoneAnchors(params) {
             top: "0",
             bottom: "0",
             width: "10px",
-            background: "linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(247,250,253,0.98) 100%)",
+            background: input.theme.surface.anchor.background,
             right: kind === "inlet" ? "0" : "auto",
             left: kind === "outlet" ? "0" : "auto",
         });
@@ -590,7 +604,7 @@ export const domDrawEngine = {
             height: `${sceneBounds.height}px`,
             overflow: "visible",
             pointerEvents: "none",
-            zIndex: 20,
+            zIndex: RENDER_Z_INDEX.edgeLayer,
         });
         applyStyles(zoneLayer, {
             position: "absolute",
@@ -598,7 +612,7 @@ export const domDrawEngine = {
             top: "0",
             width: `${sceneBounds.width}px`,
             height: `${sceneBounds.height}px`,
-            zIndex: 10,
+            zIndex: RENDER_Z_INDEX.zoneLayer,
         });
         applyStyles(pathLayer, {
             position: "absolute",
@@ -606,7 +620,7 @@ export const domDrawEngine = {
             top: "0",
             width: `${sceneBounds.width}px`,
             height: `${sceneBounds.height}px`,
-            zIndex: 30,
+            zIndex: RENDER_Z_INDEX.pathLayer,
         });
         worldRoot.appendChild(edgeSvg);
         worldRoot.appendChild(zoneLayer);
@@ -639,7 +653,7 @@ export const domDrawEngine = {
                 height: `${zoneVisual.rect.height}px`,
                 opacity: getOpacity(visibility.emphasis),
                 overflow: "visible",
-                zIndex: zoneDepth + 1,
+                zIndex: zoneDepth + RENDER_Z_INDEX.zoneBase,
             });
             applyStyles(zoneBodyEl, {
                 position: "absolute",
@@ -651,9 +665,9 @@ export const domDrawEngine = {
                 border: `1px solid ${zoneVisual.zone.zoneType === "action"
                     ? theme.zoneActionBorder
                     : theme.zoneContainerBorder}`,
-                background: "linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(248,250,252,0.98) 100%)",
+                background: theme.surface.zone.background,
                 boxSizing: "border-box",
-                boxShadow: "0 18px 34px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(15, 23, 42, 0.05)",
+                boxShadow: theme.surface.zone.shadow,
                 overflow: "hidden",
             });
             zoneEl.addEventListener("click", (event) => {
@@ -663,9 +677,10 @@ export const domDrawEngine = {
             createSurfaceChrome({
                 owner: zoneChromeEl,
                 accent: zoneVisual.zone.zoneType === "action"
-                    ? "rgba(245, 158, 11, 0.18)"
-                    : "rgba(37, 99, 235, 0.12)",
+                    ? theme.surface.zone.actionAccent
+                    : theme.surface.zone.containerAccent,
                 radius: "0",
+                theme,
             });
             zoneBodyEl.appendChild(zoneChromeEl);
             zoneEl.appendChild(zoneBodyEl);
@@ -705,11 +720,11 @@ export const domDrawEngine = {
                 height: `${pathVisual.rect.height}px`,
                 borderRadius: "18px",
                 border: `1px solid ${theme.pathEdge}`,
-                background: "linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(246,248,252,0.98) 100%)",
+                background: theme.surface.path.background,
                 boxSizing: "border-box",
-                boxShadow: "0 16px 26px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(15, 23, 42, 0.05)",
+                boxShadow: theme.surface.path.shadow,
                 opacity: getOpacity(visibility.emphasis),
-                zIndex: 1,
+                zIndex: RENDER_Z_INDEX.pathNode,
                 overflow: "hidden",
             });
             pathEl.addEventListener("click", (event) => {
@@ -718,8 +733,9 @@ export const domDrawEngine = {
             });
             createSurfaceChrome({
                 owner: pathChromeEl,
-                accent: "rgba(56, 189, 248, 0.16)",
+                accent: theme.surface.path.accent,
                 radius: "18px",
+                theme,
                 topBandOpacity: 0.72,
             });
             pathEl.appendChild(pathChromeEl);
@@ -731,6 +747,7 @@ export const domDrawEngine = {
                 createPathStatusBadge({
                     owner: pathEl,
                     status: targetDisplay.status,
+                    theme,
                 });
             }
             for (const slot of Object.keys(componentLayout?.slots ?? {})) {

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./theme";
+export * from "./themes/defaultTheme";
 export * from "./types";
 export * from "./anchors";
 export * from "./pipeline";

package/dist/index.js

@@ -1,4 +1,5 @@
 export * from "./theme";
+export * from "./themes/defaultTheme";
 export * from "./types";
 export * from "./anchors";
 export * from "./pipeline";

package/dist/theme.d.ts

@@ -1,3 +1,9 @@
+export type ZoneflowStatusTone = {
+    border: string;
+    background: string;
+    color: string;
+    shadow: string;
+};
 export type ZoneflowTheme = {
     background: string;
     zoneTitle: string;
@@ -7,7 +13,36 @@ export type ZoneflowTheme = {
     zoneBadgeBg: string;
     pathLabel: string;
     pathEdge: string;
+    pathInboundEdge: string;
     selection: string;
+    surface: {
+        chrome: {
+            overlay: string;
+            glow: string;
+            accentFade: string;
+        };
+        zone: {
+            background: string;
+            shadow: string;
+            containerAccent: string;
+            actionAccent: string;
+        };
+        path: {
+            background: string;
+            shadow: string;
+            accent: string;
+        };
+        anchor: {
+            background: string;
+            shadow: string;
+            containerAccent: string;
+            actionAccent: string;
+        };
+    };
+    status: {
+        info: ZoneflowStatusTone;
+        warning: ZoneflowStatusTone;
+    };
     density: {
         zone: {
             detail: number;

package/dist/themes/defaultTheme.js

@@ -10,7 +10,46 @@ export const defaultTheme = {
     zoneBadgeBg: "#e0f2fe",
     pathLabel: "#1e293b",
     pathEdge: "#7a8aa0",
+    pathInboundEdge: "#0f766e",
     selection: "#2e90fa",
+    surface: {
+        chrome: {
+            overlay: "linear-gradient(180deg, rgba(255,255,255,0.74) 0%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 100%)",
+            glow: "radial-gradient(circle, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.22) 36%, rgba(255,255,255,0) 72%)",
+            accentFade: "rgba(255,255,255,0.04)",
+        },
+        zone: {
+            background: "linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(248,250,252,0.98) 100%)",
+            shadow: "0 18px 34px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(15, 23, 42, 0.05)",
+            containerAccent: "rgba(37, 99, 235, 0.12)",
+            actionAccent: "rgba(245, 158, 11, 0.18)",
+        },
+        path: {
+            background: "linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(246,248,252,0.98) 100%)",
+            shadow: "0 16px 26px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(15, 23, 42, 0.05)",
+            accent: "rgba(56, 189, 248, 0.16)",
+        },
+        anchor: {
+            background: "linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(247,250,253,0.98) 100%)",
+            shadow: "0 18px 28px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255,255,255,0.9)",
+            containerAccent: "rgba(37, 99, 235, 0.96)",
+            actionAccent: "rgba(245, 158, 11, 0.96)",
+        },
+    },
+    status: {
+        info: {
+            border: "1px solid rgba(217, 119, 6, 0.24)",
+            background: "linear-gradient(180deg, rgba(255,251,235,0.98) 0%, rgba(254,243,199,0.98) 100%)",
+            color: "#b45309",
+            shadow: "0 6px 14px rgba(180, 83, 9, 0.16)",
+        },
+        warning: {
+            border: "1px solid rgba(217, 119, 6, 0.24)",
+            background: "linear-gradient(180deg, rgba(255,251,235,0.98) 0%, rgba(254,243,199,0.98) 100%)",
+            color: "#b45309",
+            shadow: "0 6px 14px rgba(180, 83, 9, 0.16)",
+        },
+    },
     density: {
         zone: {
             detail: 200,
@@ -32,6 +71,34 @@ export function resolveTheme(theme) {
     return {
         ...defaultTheme,
         ...theme,
+        surface: {
+            chrome: {
+                ...defaultTheme.surface.chrome,
+                ...theme.surface?.chrome,
+            },
+            zone: {
+                ...defaultTheme.surface.zone,
+                ...theme.surface?.zone,
+            },
+            path: {
+                ...defaultTheme.surface.path,
+                ...theme.surface?.path,
+            },
+            anchor: {
+                ...defaultTheme.surface.anchor,
+                ...theme.surface?.anchor,
+            },
+        },
+        status: {
+            info: {
+                ...defaultTheme.status.info,
+                ...theme.status?.info,
+            },
+            warning: {
+                ...defaultTheme.status.warning,
+                ...theme.status?.warning,
+            },
+        },
         density: {
             zone: {
                 ...defaultTheme.density.zone,

package/package.json

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