@zoneflow/renderer-dom 0.0.1 → 0.0.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 GROOBEE
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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,55 @@ 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 } = params;
+    const badge = document.createElement("div");
+    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: "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)",
+        fontSize: "12px",
+        lineHeight: "1",
+        fontWeight: "700",
+        pointerEvents: "none",
+        zIndex: 2,
+    });
+    owner.appendChild(badge);
+}
 function getOpacity(emphasis) {
     switch (emphasis) {
         case "strong":
@@ -190,10 +239,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 +263,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"
+                ? "#b45309"
+                : targetDisplay.status === "unconfigured"
+                    ? "#b45309"
+                    : context.theme.zoneSubtext,
             fontSize: "11px",
+            fontWeight: targetDisplay.status === "resolved" ? 500 : 700,
         });
         return;
     }
@@ -664,6 +723,16 @@ export const domDrawEngine = {
                 topBandOpacity: 0.72,
             });
             pathEl.appendChild(pathChromeEl);
+            const targetDisplay = resolvePathTargetDisplay({
+                model: input.model,
+                pathVisual,
+            });
+            if (targetDisplay.status !== "resolved") {
+                createPathStatusBadge({
+                    owner: pathEl,
+                    status: targetDisplay.status,
+                });
+            }
             for (const slot of Object.keys(componentLayout?.slots ?? {})) {
                 createPathSlotHost({
                     pathVisual,

package/dist/engines/graphLayoutEngine.js

@@ -2,12 +2,6 @@ export const DEFAULT_PATH_NODE_WIDTH = 120;
 export const DEFAULT_PATH_NODE_HEIGHT = 32;
 export const DEFAULT_PATH_NODE_OFFSET_X = 32;
 export const DEFAULT_PATH_NODE_GAP_Y = 40;
-function typedEntries(record) {
-    return Object.entries(record);
-}
-function typedValues(record) {
-    return Object.values(record);
-}
 function rectFromLayout(layout) {
     return {
         x: layout.x,
@@ -62,7 +56,9 @@ function resolveLayout(model, layoutModel) {
         zoneCache.set(zoneId, worldPos);
         return worldPos;
     }
-    for (const [typedZoneId, layout] of typedEntries(layoutModel.zoneLayoutsById)) {
+    const zoneLayoutIds = Object.keys(layoutModel.zoneLayoutsById);
+    for (const typedZoneId of zoneLayoutIds) {
+        const layout = layoutModel.zoneLayoutsById[typedZoneId];
         const worldPos = resolveZonePosition(typedZoneId);
         const anchors = layout.anchors;
         const resolvedAnchors = {
@@ -88,7 +84,9 @@ function resolveLayout(model, layoutModel) {
             anchors: resolvedAnchors,
         };
     }
-    for (const [pathId, pathLayout] of typedEntries(layoutModel.pathLayoutsById)) {
+    const pathLayoutIds = Object.keys(layoutModel.pathLayoutsById);
+    for (const pathId of pathLayoutIds) {
+        const pathLayout = layoutModel.pathLayoutsById[pathId];
         resolvedPathLayouts[pathId] = {
             ...pathLayout,
         };
@@ -133,7 +131,9 @@ function resolvePathNodeAnchors(rect) {
 function createZoneVisualNodes(params) {
     const { model, layoutModel } = params;
     const result = {};
-    for (const [typedZoneId, zone] of typedEntries(model.zonesById)) {
+    const zoneIds = Object.keys(model.zonesById);
+    for (const typedZoneId of zoneIds) {
+        const zone = model.zonesById[typedZoneId];
         const zoneLayout = layoutModel.zoneLayoutsById[typedZoneId];
         if (!zoneLayout)
             continue;
@@ -150,7 +150,9 @@ function createZoneVisualNodes(params) {
 function createPathVisualNodes(params) {
     const { model, layoutModel, zonesById } = params;
     const result = {};
-    for (const zone of typedValues(model.zonesById)) {
+    const zoneIds = Object.keys(model.zonesById);
+    for (const zoneId of zoneIds) {
+        const zone = model.zonesById[zoneId];
         const sourceZoneVisual = zonesById[zone.id];
         if (!sourceZoneVisual)
             continue;
@@ -187,7 +189,9 @@ function createPathVisualNodes(params) {
 function createEdgeVisuals(params) {
     const { model, zonesById, pathsById } = params;
     const result = {};
-    for (const zone of typedValues(model.zonesById)) {
+    const zoneIds = Object.keys(model.zonesById);
+    for (const zoneId of zoneIds) {
+        const zone = model.zonesById[zoneId];
         const sourceZoneVisual = zonesById[zone.id];
         if (!sourceZoneVisual)
             continue;

package/package.json

@@ -1,23 +1,27 @@
 {
   "name": "@zoneflow/renderer-dom",
-  "version": "0.0.1",
+  "version": "0.0.3",
+  "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": "git@github-groobee:groobee/zoneflow.git",
+    "url": "https://github.com/groobee/zoneflow.git",
     "directory": "packages/renderer-dom"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "dependencies": {
-    "@zoneflow/core": "workspace:*"
+    "@zoneflow/core": "0.0.3"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",
     "type-check": "tsc -p tsconfig.json --noEmit"
   }
-}
+}