@zoneflow/renderer-dom 0.0.2 → 0.0.4

package/README.md

@@ -0,0 +1,29 @@
+# @zoneflow/renderer-dom
+
+`@zoneflow/renderer-dom`은 Zoneflow의 저수준 DOM 렌더러 엔진 패키지입니다.
+
+이 패키지는 주로 다음을 포함합니다.
+
+- 그래프 레이아웃 파이프라인
+- DOM draw engine
+- renderer frame / mount registry
+- renderer용 타입 정의
+
+대부분의 앱에서는 이 패키지를 직접 사용할 필요가 없습니다.
+일반적인 React 앱은 `@zoneflow/react`를 사용하면 충분합니다.
+
+## 설치
+
+```bash
+pnpm add @zoneflow/renderer-dom
+```
+
+## 언제 직접 쓰나
+
+- React 없이 renderer DOM 레이어를 직접 붙일 때
+- low-level draw engine이나 pipeline을 교체/실험할 때
+- renderer frame을 직접 소비하는 커스텀 환경을 만들 때
+
+일반적인 앱 통합은 `@zoneflow/react`를 우선 사용하는 편이 맞습니다.
+
+레포지토리: [github.com/groobee/zoneflow](https://github.com/groobee/zoneflow)

package/dist/engines/drawEngine.js

@@ -36,6 +36,56 @@ function resolvePathDisplayName(params) {
         return trimmed;
     return params.rule === null ? "Empty" : "Untitled";
 }
+function resolvePathTargetDisplay(params) {
+    const targetZoneId = params.pathVisual.targetZoneId;
+    if (!targetZoneId) {
+        return {
+            label: "—",
+            status: "unconfigured",
+        };
+    }
+    const targetZone = params.model.zonesById[targetZoneId];
+    if (!targetZone) {
+        return {
+            label: "—",
+            status: "missing",
+        };
+    }
+    return {
+        label: targetZone.name,
+        status: "resolved",
+    };
+}
+function createPathStatusBadge(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");
+    badge.textContent = isMissing ? "⚠" : "?";
+    applyStyles(badge, {
+        position: "absolute",
+        right: "10px",
+        top: "10px",
+        width: "22px",
+        height: "22px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "999px",
+        border: tone.border,
+        background: tone.background,
+        color: tone.color,
+        boxShadow: tone.shadow,
+        fontSize: "12px",
+        lineHeight: "1",
+        fontWeight: "700",
+        pointerEvents: "none",
+        zIndex: 2,
+    });
+    owner.appendChild(badge);
+}
 function getOpacity(emphasis) {
     switch (emphasis) {
         case "strong":
@@ -52,8 +102,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;
@@ -190,10 +242,11 @@ function renderPathFallback(host, slot, context) {
         fontFamily: "'IBM Plex Sans', 'Pretendard', sans-serif",
     };
     if (slot === "label") {
-        host.textContent = resolvePathDisplayName({
+        const title = resolvePathDisplayName({
             name: context.path.name,
             rule: context.path.rule,
         });
+        host.textContent = title;
         applyStyles(host, {
             ...base,
             fontSize: "12px",
@@ -213,11 +266,20 @@ function renderPathFallback(host, slot, context) {
         return;
     }
     if (slot === "target") {
-        host.textContent = context.pathVisual.targetZoneId ?? "unresolved";
+        const targetDisplay = resolvePathTargetDisplay({
+            model: context.model,
+            pathVisual: context.pathVisual,
+        });
+        host.textContent = targetDisplay.label;
         applyStyles(host, {
             ...base,
-            color: context.theme.zoneSubtext,
+            color: targetDisplay.status === "missing"
+                ? context.theme.status.warning.color
+                : targetDisplay.status === "unconfigured"
+                    ? context.theme.status.info.color
+                    : context.theme.zoneSubtext,
             fontSize: "11px",
+            fontWeight: targetDisplay.status === "resolved" ? 500 : 700,
         });
         return;
     }
@@ -347,7 +409,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,
@@ -376,7 +441,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");
@@ -385,7 +450,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",
@@ -395,7 +460,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",
     });
@@ -406,7 +471,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);
@@ -419,8 +484,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);
@@ -443,11 +508,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",
@@ -457,7 +522,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",
         });
@@ -592,9 +657,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) => {
@@ -604,9 +669,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);
@@ -646,9 +712,9 @@ 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,
                 overflow: "hidden",
@@ -659,11 +725,23 @@ 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);
+            const targetDisplay = resolvePathTargetDisplay({
+                model: input.model,
+                pathVisual,
+            });
+            if (targetDisplay.status !== "resolved") {
+                createPathStatusBadge({
+                    owner: pathEl,
+                    status: targetDisplay.status,
+                    theme,
+                });
+            }
             for (const slot of Object.keys(componentLayout?.slots ?? {})) {
                 createPathSlotHost({
                     pathVisual,

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,9 +1,11 @@
 {
   "name": "@zoneflow/renderer-dom",
-  "version": "0.0.2",
+  "version": "0.0.4",
+  "description": "Low-level DOM renderer engines for Zoneflow.",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "homepage": "https://github.com/groobee/zoneflow",
   "repository": {
     "type": "git",
     "url": "https://github.com/groobee/zoneflow.git",
@@ -16,7 +18,7 @@
     "dist"
   ],
   "dependencies": {
-    "@zoneflow/core": "0.0.2"
+    "@zoneflow/core": "0.0.4"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",