@zoneflow/renderer-dom 0.0.2 → 0.0.3

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/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@zoneflow/renderer-dom",
-  "version": "0.0.2",
+  "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": "https://github.com/groobee/zoneflow.git",
@@ -16,7 +18,7 @@
     "dist"
   ],
   "dependencies": {
-    "@zoneflow/core": "0.0.2"
+    "@zoneflow/core": "0.0.3"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",