@zoneflow/renderer-dom 0.0.18 → 0.0.19

package/dist/engines/drawEngine.js

@@ -334,6 +334,8 @@ function renderPathFallback(host, slot, context) {
         host.textContent = title;
         applyStyles(host, {
             ...base,
+            // Consumer-resolved per-path color (resolvePathColor) overrides the theme.
+            color: context.pathColor ?? context.theme.pathLabel,
             fontSize: "12px",
             fontWeight: 700,
         });
@@ -420,6 +422,7 @@ function createZoneSlotHost(params) {
         componentLayout,
         camera: input.camera,
         theme: input.theme,
+        zoneColor: input.resolveZoneColor?.(zoneVisual.zone) ?? undefined,
         textScale: input.textScale,
     };
     const renderer = input.zoneComponentRenderers?.[slot];
@@ -468,6 +471,7 @@ function createPathSlotHost(params) {
         componentLayout,
         camera: input.camera,
         theme: input.theme,
+        pathColor: input.resolvePathColor?.(pathVisual.path) ?? undefined,
         textScale: input.textScale,
     };
     const renderer = input.pathComponentRenderers?.[slot];

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, 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, resolvePathColor, backgroundRenderer, gridOptions, interactionHandlers, exclusionState, debug, } = input;
             const mergedTheme = resolveTheme(theme);
             const viewportInfo = resolveViewportInfo(host, camera, input);
             const pipeline = runRenderPipeline({
@@ -121,6 +121,7 @@ export function createRenderer() {
                 pathComponentRenderers,
                 resolveZoneShape,
                 resolveZoneColor,
+                resolvePathColor,
                 backgroundRenderer,
                 gridOptions,
                 interactionHandlers,

package/dist/types.d.ts

@@ -111,6 +111,15 @@ export type ZoneComponentRendererContext = {
     componentLayout: ZoneComponentLayout;
     camera: CameraState;
     theme: ZoneflowTheme;
+    /**
+     * Per-zone color resolved once from the consumer's `resolveZoneColor` prop —
+     * the same value that tints the zone's border/accent on the DOM shape
+     * (undefined when not provided or it returned nullish). Symmetric with
+     * {@link PathComponentRendererContext.pathColor}: custom slot renderers can
+     * read this to match the accent instead of reaching into `zone.meta`. The
+     * built-in title/body fallbacks stay theme-driven to preserve contrast.
+     */
+    zoneColor?: string;
     textScale: TextScaleLevel;
 };
 export type PathComponentRendererContext = {
@@ -123,12 +132,29 @@ export type PathComponentRendererContext = {
     componentLayout: PathComponentLayout;
     camera: CameraState;
     theme: ZoneflowTheme;
+    /**
+     * Per-path color resolved once from the consumer's `resolvePathColor` prop
+     * (undefined when not provided or it returned nullish). Single source of
+     * truth for both the DOM fallback label and custom slot renderers — mirrors
+     * how `resolveZoneColor` drives a zone's accent, so slots should read this
+     * rather than reaching into `path.meta` themselves.
+     */
+    pathColor?: string;
     textScale: TextScaleLevel;
 };
 export type ZoneComponentRenderer = (host: HTMLElement, context: ZoneComponentRendererContext) => void;
 export type PathComponentRenderer = (host: HTMLElement, context: PathComponentRendererContext) => void;
 export type ZoneComponentRendererMap = Partial<Record<ZoneComponentSlotName, ZoneComponentRenderer>>;
 export type PathComponentRendererMap = Partial<Record<PathComponentSlotName, PathComponentRenderer>>;
+/**
+ * Resolver invoked once per path to decide its label color. Return a CSS color
+ * to override the path label's text color for that path; return
+ * `undefined`/`null` to fall back to the theme's `pathLabel` color. Like
+ * {@link ResolveZoneColor}, a purely presentational hook decided by the
+ * consumer (e.g. from `path.meta.color`, `path.rule`, …). Only the label text
+ * is affected — the rule/target/body slots stay theme-driven for contrast.
+ */
+export type ResolvePathColor = (path: Path) => string | null | undefined;
 export type ZoneComponentMount = {
     key: string;
     zoneId: ZoneId;
@@ -206,6 +232,7 @@ export type RendererDrawInput = {
     pathComponentRenderers?: PathComponentRendererMap;
     resolveZoneShape?: ResolveZoneShape;
     resolveZoneColor?: ResolveZoneColor;
+    resolvePathColor?: ResolvePathColor;
     backgroundRenderer?: BackgroundRenderer;
     gridOptions?: GridOptions;
     interactionHandlers?: RendererInteractionHandlers;
@@ -271,6 +298,7 @@ export type RendererInput = {
     pathComponentRenderers?: PathComponentRendererMap;
     resolveZoneShape?: ResolveZoneShape;
     resolveZoneColor?: ResolveZoneColor;
+    resolvePathColor?: ResolvePathColor;
     backgroundRenderer?: BackgroundRenderer;
     gridOptions?: GridOptions;
     interactionHandlers?: RendererInteractionHandlers;

package/package.json

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