@timeax/digital-service-engine 0.0.8 → 0.1.0

package/dist/workspace/index.d.cts

@@ -651,6 +651,7 @@ type EditorEvents = {
     "catalog:change": {
         catalog?: ServiceCatalogState;
         reason: string;
+        snapshot: EditorSnapshot;
     };
     "catalog:active-change": {
         activeNodeId?: string;

package/dist/workspace/index.d.ts

@@ -651,6 +651,7 @@ type EditorEvents = {
     "catalog:change": {
         catalog?: ServiceCatalogState;
         reason: string;
+        snapshot: EditorSnapshot;
     };
     "catalog:active-change": {
         activeNodeId?: string;

package/dist/workspace/index.js

@@ -1316,7 +1316,6 @@ function useLivePolling(params) {
     live,
     workspaceId,
     actor,
-    hasAnyData,
     getCurrentBranchId,
     refreshAll,
     refreshBranchContext,
@@ -1423,11 +1422,6 @@ function useLivePolling(params) {
     disconnect2();
     if (live.mode === "off") {
       setStatus({ connected: false });
-      if (!hasAnyData) {
-        void (async () => {
-          await refreshAll({ strict: false });
-        })();
-      }
       return;
     }
     const adapter = resolveAdapter();
@@ -1463,7 +1457,6 @@ function useLivePolling(params) {
   }, [
     disconnect2,
     live.mode,
-    hasAnyData,
     refreshAll,
     resolveAdapter,
     ctx,
@@ -2817,8 +2810,10 @@ import {
   createContext as createContext2,
   useContext as useContext2,
   useEffect as useEffect7,
+  useLayoutEffect,
   useMemo as useMemo13,
-  useRef as useRef6
+  useRef as useRef6,
+  useState as useState11
 } from "react";
 
 // src/react/canvas/events.ts
@@ -9075,6 +9070,7 @@ var Editor = class {
       "catalog:change",
       {
         catalog: cloneDeep4(this.catalog),
+        snapshot: this.makeSnapshot(reason),
         reason
       }
     );
@@ -9866,8 +9862,8 @@ function CanvasProviderOwned({
     canvasOpts,
     builderOpts
   );
-  useHydrateEditorSnapshot(api, initialSnapshot);
-  return /* @__PURE__ */ jsx2(Ctx.Provider, { value: api, children });
+  const hydrationReady = useHydrateEditorSnapshot(api, initialSnapshot);
+  return /* @__PURE__ */ jsx2(Ctx.Provider, { value: api, children: hydrationReady ? children : null });
 }
 function useCanvasAPI() {
   const api = useContext2(Ctx);
@@ -9895,42 +9891,71 @@ function useCanvasFromBuilder(builder, opts) {
 function useCanvasFromExisting(api) {
   return api;
 }
+var NO_SNAPSHOT_HYDRATION_KEY = "__no_snapshot__";
 function useHydrateEditorSnapshot(api, snapshot) {
-  const hydratedRef = useRef6(null);
-  useEffect7(() => {
-    if (!(snapshot == null ? void 0 : snapshot.props)) return;
-    const hydrationKey = getSnapshotHydrationKey(snapshot);
-    if (hydratedRef.current === hydrationKey) return;
-    hydratedRef.current = hydrationKey;
-    hydrateEditorFromSnapshot(api, snapshot);
-  }, [api, snapshot]);
+  const targetHydrationKey = useMemo13(() => {
+    if (!(snapshot == null ? void 0 : snapshot.props)) return NO_SNAPSHOT_HYDRATION_KEY;
+    return getSnapshotHydrationKey(snapshot);
+  }, [snapshot]);
+  const [hydratedKey, setHydratedKey] = useState11(
+    NO_SNAPSHOT_HYDRATION_KEY
+  );
+  useLayoutEffect(() => {
+    if (hydratedKey === targetHydrationKey) return;
+    if (snapshot == null ? void 0 : snapshot.props) {
+      hydrateEditorFromSnapshot(api, snapshot);
+    }
+    setHydratedKey(targetHydrationKey);
+  }, [api, hydratedKey, snapshot, targetHydrationKey]);
+  return hydratedKey === targetHydrationKey;
 }
 function getSnapshotHydrationKey(snapshot) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   const meta = snapshot.meta;
-  const preferred = (_e = (_d = (_c = (_b = (_a = meta == null ? void 0 : meta.snapshot_id) != null ? _a : meta == null ? void 0 : meta.snapshotId) != null ? _b : meta == null ? void 0 : meta.version_id) != null ? _c : meta == null ? void 0 : meta.versionId) != null ? _d : meta == null ? void 0 : meta.branch_id) != null ? _e : meta == null ? void 0 : meta.branchId;
-  if (preferred != null) {
-    return String(preferred);
-  }
-  const layout = (_f = snapshot.layout) == null ? void 0 : _f.canvas;
+  const metaKey = [
+    (_b = (_a = meta == null ? void 0 : meta.snapshot_id) != null ? _a : meta == null ? void 0 : meta.snapshotId) != null ? _b : "",
+    (_d = (_c = meta == null ? void 0 : meta.version_id) != null ? _c : meta == null ? void 0 : meta.versionId) != null ? _d : "",
+    (_f = (_e = meta == null ? void 0 : meta.branch_id) != null ? _e : meta == null ? void 0 : meta.branchId) != null ? _f : ""
+  ].join("|");
+  const layout = (_g = snapshot.layout) == null ? void 0 : _g.canvas;
   const positionKeys = (layout == null ? void 0 : layout.positions) ? Object.keys(layout.positions).sort().join("|") : "";
   const viewport = (layout == null ? void 0 : layout.viewport) ? `${layout.viewport.x}:${layout.viewport.y}:${layout.viewport.zoom}` : "";
   const selection = (layout == null ? void 0 : layout.selection) ? Array.from(layout.selection).sort().join("|") : "";
-  const catalogKey = snapshot.catalog ? JSON.stringify({
-    opened: (_g = snapshot.catalog.opened) != null ? _g : null,
-    mode: (_h = snapshot.catalog.mode) != null ? _h : null,
-    tab: (_i = snapshot.catalog.tab) != null ? _i : null,
-    query: (_j = snapshot.catalog.query) != null ? _j : null
-  }) : "";
+  const catalogKey = serializeForHydration(snapshot.catalog);
   return [
-    String(((_l = (_k = snapshot.props) == null ? void 0 : _k.fields) != null ? _l : []).length),
-    String(((_n = (_m = snapshot.props) == null ? void 0 : _m.filters) != null ? _n : []).length),
+    metaKey,
+    String(((_i = (_h = snapshot.props) == null ? void 0 : _h.fields) != null ? _i : []).length),
+    String(((_k = (_j = snapshot.props) == null ? void 0 : _j.filters) != null ? _k : []).length),
     positionKeys,
     viewport,
     selection,
     catalogKey
   ].join("::");
 }
+function serializeForHydration(value) {
+  if (value == null) return "";
+  try {
+    return JSON.stringify(sortForHydration(value));
+  } catch {
+    return "__unserializable__";
+  }
+}
+function sortForHydration(value) {
+  if (Array.isArray(value)) {
+    return value.map((entry) => sortForHydration(entry));
+  }
+  if (value && typeof value === "object") {
+    const entries = Object.entries(value).sort(
+      ([a], [b]) => a.localeCompare(b)
+    );
+    const next = {};
+    for (const [key, entry] of entries) {
+      next[key] = sortForHydration(entry);
+    }
+    return next;
+  }
+  return value;
+}
 function hydrateEditorFromSnapshot(api, snapshot) {
   var _a;
   api.refreshGraph();
@@ -9945,30 +9970,66 @@ function hydrateCatalog(api, snapshot) {
   api.editor.clearCatalog();
 }
 function hydrateCanvasLayout(api, canvas) {
+  var _a;
   if (!canvas) return;
-  if (canvas.positions) {
+  const current = api.snapshot();
+  if (canvas.positions && hasPositionDelta(canvas.positions, current.positions)) {
     api.setPositions(canvas.positions);
   }
-  if (canvas.viewport) {
+  if (canvas.viewport && !sameViewport(canvas.viewport, current.viewport)) {
     api.setViewport(canvas.viewport);
   }
+  const currentSelection = api.getSelection().map(String);
   if (canvas.selection) {
     const ids = Array.isArray(canvas.selection) ? canvas.selection : Array.from(canvas.selection);
     if (ids.length > 0) {
-      api.select(ids);
-    } else {
+      if (!sameIdSet(ids.map(String), currentSelection)) {
+        api.select(ids.map(String));
+      }
+    } else if (currentSelection.length > 0) {
       api.clearSelection();
     }
-  } else {
+  } else if (currentSelection.length > 0) {
     api.clearSelection();
   }
-  if (canvas.highlighted) {
-    const ids = Array.isArray(canvas.highlighted) ? canvas.highlighted : Array.from(canvas.highlighted);
-    api.setHighlighted(ids);
+  if ("highlighted" in canvas) {
+    const highlighted = canvas.highlighted;
+    const ids = highlighted ? Array.isArray(highlighted) ? highlighted : Array.from(highlighted) : [];
+    const currentIds = Array.from((_a = current.highlighted) != null ? _a : []).map(String);
+    const nextIds = ids.map(String);
+    if (!sameIdSet(nextIds, currentIds)) {
+      api.setHighlighted(nextIds);
+    }
   }
   if ("hoverId" in canvas) {
-    api.setHover(canvas.hoverId);
+    const nextHoverId = canvas.hoverId;
+    if (current.hoverId !== nextHoverId) {
+      api.setHover(nextHoverId);
+    }
+  }
+}
+function hasPositionDelta(next, current) {
+  for (const id of Object.keys(next)) {
+    const nextPos = next[id];
+    const currentPos = current[id];
+    if (!currentPos || currentPos.x !== nextPos.x || currentPos.y !== nextPos.y) {
+      return true;
+    }
+  }
+  return false;
+}
+function sameViewport(a, b) {
+  if (!a && !b) return true;
+  if (!a || !b) return false;
+  return a.x === b.x && a.y === b.y && a.zoom === b.zoom;
+}
+function sameIdSet(a, b) {
+  if (a.length !== b.length) return false;
+  const set = new Set(a);
+  for (const id of b) {
+    if (!set.has(id)) return false;
   }
+  return true;
 }
 function WorkspaceBootScreen({
   boot
@@ -11952,12 +12013,12 @@ function Workspace(props) {
 }
 
 // src/react/workspace/components/canvas.tsx
-import { useMemo as useMemo19, useState as useState15 } from "react";
+import { useMemo as useMemo19, useState as useState16 } from "react";
 import { Background, ConnectionMode, MiniMap, ReactFlow } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 
 // src/react/workspace/adapters/reactflow/adapter.ts
-import { useCallback as useCallback16, useEffect as useEffect10, useMemo as useMemo17, useRef as useRef9, useState as useState13 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect10, useMemo as useMemo17, useRef as useRef9, useState as useState14 } from "react";
 import { applyNodeChanges, applyEdgeChanges } from "@xyflow/react";
 function rafThrottle(fn, minMs = 80) {
   let frame = 0;
@@ -11983,7 +12044,7 @@ function rafThrottle(fn, minMs = 80) {
   });
 }
 var isCommentId = (id) => id.startsWith("c::");
-function sameIdSet(a, b) {
+function sameIdSet2(a, b) {
   if (a.length !== b.length) return false;
   const s = new Set(a);
   for (const id of b) if (!s.has(id)) return false;
@@ -12061,7 +12122,7 @@ function useReactFlowAdapter(api, options = {}) {
   useEffect10(() => {
     afterConnectRef.current = options.afterConnect;
   }, [options.afterConnect]);
-  const [rf, setRF] = useState13(
+  const [rf, setRF] = useState14(
     () => toRF(api.snapshot(), api, { nodeDecorators, edgeDecorators })
   );
   const relRef = useRef9(api.getEdgeRel());
@@ -12172,7 +12233,7 @@ function useReactFlowAdapter(api, options = {}) {
         const next = Array.from(keep);
         const currRaw = api.getSelection();
         const curr = Array.isArray(currRaw) ? currRaw : Array.from(currRaw);
-        if (!sameIdSet(next, curr)) {
+        if (!sameIdSet2(next, curr)) {
           api.select(keep);
         }
       }
@@ -12290,7 +12351,7 @@ function useReactFlowAdapter(api, options = {}) {
       const next = nodes.map((n) => n.id);
       const currRaw = api.getSelection();
       const curr = Array.isArray(currRaw) ? currRaw : Array.from(currRaw);
-      if (sameIdSet(next, curr)) return;
+      if (sameIdSet2(next, curr)) return;
       api.select(next);
     },
     [api]
@@ -12311,7 +12372,7 @@ function useReactFlowAdapter(api, options = {}) {
 }
 
 // src/react/workspace/adapters/reactflow/toolbar.tsx
-import { useMemo as useMemo18, useState as useState14, useCallback as useCallback17 } from "react";
+import { useMemo as useMemo18, useState as useState15, useCallback as useCallback17 } from "react";
 import { useReactFlow } from "@xyflow/react";
 
 // src/react/workspace/adapters/reactflow/toolbar/merge.ts
@@ -12416,7 +12477,7 @@ function Toolbar({
   renderButton
 }) {
   const rf = useReactFlow();
-  const [openMenuId, setOpenMenuId] = useState14(null);
+  const [openMenuId, setOpenMenuId] = useState15(null);
   const selectionCount = api.getSelection().length;
   const relation = api.getEdgeRel();
   const canUndo = true;
@@ -12947,8 +13008,8 @@ function Canvas({
   toolbarPositionClassName = "left-2 top-2",
   children
 }) {
-  const [showGrid, setShowGrid] = useState15(initialShowGrid);
-  const [showMiniMap, setShowMiniMap] = useState15(initialShowMiniMap);
+  const [showGrid, setShowGrid] = useState16(initialShowGrid);
+  const [showMiniMap, setShowMiniMap] = useState16(initialShowMiniMap);
   const {
     nodes,
     edges,