@timeax/service-builder 0.0.7 → 0.0.9

package/dist/index.js

@@ -3616,6 +3616,136 @@ function commentPosition(anchor, state) {
   }
   return { x: 0, y: 0 };
 }
+function stableDataString(value) {
+  if (value === null || value === void 0) return String(value);
+  if (typeof value !== "object") return String(value);
+  if (Array.isArray(value)) return `[${value.map(stableDataString).join(",")}]`;
+  const obj = value;
+  const keys = Object.keys(obj).sort();
+  return `{${keys.map((key) => `${key}:${stableDataString(obj[key])}`).join(",")}}`;
+}
+function shallowEqualObject(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+  for (const key of aKeys) {
+    if (!(key in b) || a[key] !== b[key]) return false;
+  }
+  return true;
+}
+function applyNodeDecorator(node, decorator) {
+  if (!decorator) return node;
+  const dataPatch = "data" in decorator && decorator.data && typeof decorator.data === "object" ? decorator.data : void 0;
+  const nextData = dataPatch ? { ...node.data, ...dataPatch } : node.data;
+  const nextStyle = "style" in decorator ? decorator.style : node.style;
+  const nextHidden = "hidden" in decorator ? decorator.hidden : node.hidden;
+  const nextSelected = "selected" in decorator ? decorator.selected : node.selected;
+  const dataChanged = dataPatch ? !shallowEqualObject(node.data, nextData) : false;
+  const changed = dataChanged || nextStyle !== node.style || nextHidden !== node.hidden || nextSelected !== node.selected;
+  if (!changed) return node;
+  return {
+    ...node,
+    data: nextData,
+    style: nextStyle,
+    hidden: nextHidden,
+    selected: nextSelected
+  };
+}
+function applyEdgeDecorator(edge, decorator) {
+  if (!decorator) return edge;
+  const dataPatch = "data" in decorator && decorator.data && typeof decorator.data === "object" ? decorator.data : void 0;
+  const nextData = dataPatch ? { ...edge.data, ...dataPatch } : edge.data;
+  const nextStyle = "style" in decorator ? decorator.style : edge.style;
+  const nextHidden = "hidden" in decorator ? decorator.hidden : edge.hidden;
+  const dataChanged = dataPatch ? !shallowEqualObject(edge.data, nextData) : false;
+  const changed = dataChanged || nextStyle !== edge.style || nextHidden !== edge.hidden;
+  if (!changed) return edge;
+  return {
+    ...edge,
+    data: nextData,
+    style: nextStyle,
+    hidden: nextHidden
+  };
+}
+function mergeNodeRuntime(prev, next) {
+  if (prev.type !== next.type) return next;
+  return {
+    ...prev,
+    ...next,
+    data: next.data,
+    style: next.style,
+    hidden: next.hidden,
+    selected: next.selected,
+    position: next.position
+  };
+}
+function mergeEdgeRuntime(prev, next) {
+  return {
+    ...prev,
+    ...next,
+    data: next.data,
+    style: next.style,
+    hidden: next.hidden
+  };
+}
+function mergeWithRuntime(prev, next) {
+  const prevNodesById = new Map(prev.nodes.map((node) => [node.id, node]));
+  const prevEdgesById = new Map(prev.edges.map((edge) => [edge.id, edge]));
+  return {
+    nodes: next.nodes.map((node) => {
+      const prevNode = prevNodesById.get(node.id);
+      return prevNode ? mergeNodeRuntime(prevNode, node) : node;
+    }),
+    edges: next.edges.map((edge) => {
+      const prevEdge = prevEdgesById.get(edge.id);
+      return prevEdge ? mergeEdgeRuntime(prevEdge, edge) : edge;
+    })
+  };
+}
+function modelEquivalent(a, b) {
+  if (a.nodes.length !== b.nodes.length || a.edges.length !== b.edges.length) return false;
+  for (let i = 0; i < a.nodes.length; i += 1) {
+    const left = a.nodes[i];
+    const right = b.nodes[i];
+    if (left.id !== right.id || left.type !== right.type) return false;
+    if (left.position.x !== right.position.x || left.position.y !== right.position.y) return false;
+    if (left.selected !== right.selected) return false;
+    if (left.hidden !== right.hidden) return false;
+    if (!shallowEqualObject(left.style, right.style)) return false;
+    if (!shallowEqualObject(left.data, right.data)) return false;
+  }
+  for (let i = 0; i < a.edges.length; i += 1) {
+    const left = a.edges[i];
+    const right = b.edges[i];
+    if (left.id !== right.id || left.source !== right.source || left.target !== right.target) return false;
+    if (left.hidden !== right.hidden) return false;
+    if (!shallowEqualObject(left.style, right.style)) return false;
+    if (!shallowEqualObject(left.data, right.data)) return false;
+  }
+  return true;
+}
+function buildSnapshotSig(state, api) {
+  const graphNodeSig = state.graph.nodes.map((node) => `${node.id}:${node.kind}:${stableDataString(node.label)}`).join("|");
+  const graphEdgeSig = state.graph.edges.map((edge) => `${edge.kind}:${edge.from}->${edge.to}`).join("|");
+  const positionSig = Object.keys(state.positions).sort().map((id) => {
+    const p = state.positions[id];
+    return `${id}:${p?.x ?? 0},${p?.y ?? 0}`;
+  }).join("|");
+  const commentSig = api.comments.list().filter((thread) => !!thread.anchor).map((thread) => {
+    const anchor = thread.anchor;
+    if (!anchor) return `${thread.id}:none`;
+    if (anchor.type === "free") return `${thread.id}:free:${anchor.position?.x ?? 0},${anchor.position?.y ?? 0}`;
+    if (anchor.type === "node") return `${thread.id}:node:${anchor.nodeId}:${anchor.offset?.dx ?? 0},${anchor.offset?.dy ?? 0}`;
+    return `${thread.id}:${anchor.type ?? "unknown"}`;
+  }).sort().join("|");
+  const selectionSig = Array.from(state.selection ?? []).map(String).sort().join("|");
+  return {
+    graph: `${graphNodeSig}__${graphEdgeSig}__${positionSig}__${commentSig}`,
+    selection: selectionSig
+  };
+}
 function toRF(state, api, opts) {
   const nodes = state.graph.nodes.map((n, index) => {
     const fallback = {
@@ -3683,18 +3813,97 @@ function useReactFlowAdapter(api, options = {}) {
   const lastViewportRef = useRef3(null);
   const interactionInProgressRef = useRef3(false);
   const pendingSyncRef = useRef3(false);
+  const pendingDecoratorSyncRef = useRef3(false);
   const pendingNodeHistoryRef = useRef3({});
   const dragStartPositionsRef = useRef3({});
+  const suppressSelectionSyncRef = useRef3(false);
+  const suppressSelectionTokenRef = useRef3(0);
+  const suppressSelectionRafRef = useRef3(null);
+  const suppressSelectionTimerRef = useRef3(null);
+  const lastAppliedSigRef = useRef3(null);
+  const [rf, setRF] = useState5(
+    () => toRF(api.snapshot(), api, {
+      nodeDecorators: nodeDecoratorsRef.current,
+      edgeDecorators: edgeDecoratorsRef.current
+    })
+  );
+  const beginAdapterSelectionSync = useCallback5(() => {
+    const token = ++suppressSelectionTokenRef.current;
+    suppressSelectionSyncRef.current = true;
+    if (suppressSelectionRafRef.current !== null && typeof cancelAnimationFrame === "function") {
+      cancelAnimationFrame(suppressSelectionRafRef.current);
+      suppressSelectionRafRef.current = null;
+    }
+    if (suppressSelectionTimerRef.current !== null) {
+      clearTimeout(suppressSelectionTimerRef.current);
+      suppressSelectionTimerRef.current = null;
+    }
+    const release = () => {
+      if (suppressSelectionTokenRef.current !== token) return;
+      if (suppressSelectionRafRef.current !== null && typeof cancelAnimationFrame === "function") {
+        cancelAnimationFrame(suppressSelectionRafRef.current);
+        suppressSelectionRafRef.current = null;
+      }
+      if (suppressSelectionTimerRef.current !== null) {
+        clearTimeout(suppressSelectionTimerRef.current);
+        suppressSelectionTimerRef.current = null;
+      }
+      suppressSelectionSyncRef.current = false;
+    };
+    if (typeof requestAnimationFrame === "function") {
+      suppressSelectionRafRef.current = requestAnimationFrame(() => {
+        suppressSelectionRafRef.current = null;
+        release();
+      });
+    }
+    suppressSelectionTimerRef.current = setTimeout(() => {
+      suppressSelectionTimerRef.current = null;
+      release();
+    }, 34);
+  }, []);
   const syncFromSnapshot = useCallback5(() => {
     const snap = api.snapshot();
-    setRF(
-      toRF(snap, api, {
-        nodeDecorators: nodeDecoratorsRef.current,
-        edgeDecorators: edgeDecoratorsRef.current
-      })
-    );
-  }, [api]);
-  const requestSync = useCallback5(() => {
+    const sig = buildSnapshotSig(snap, api);
+    const previousSig = lastAppliedSigRef.current;
+    const graphChanged = !previousSig || previousSig.graph !== sig.graph;
+    const selectionChanged = !previousSig || previousSig.selection !== sig.selection;
+    if (!graphChanged && !selectionChanged) return;
+    const next = toRF(snap, api, {
+      nodeDecorators: nodeDecoratorsRef.current,
+      edgeDecorators: edgeDecoratorsRef.current
+    });
+    beginAdapterSelectionSync();
+    setRF((prev) => {
+      const merged = mergeWithRuntime(prev, next);
+      if (modelEquivalent(prev, merged)) return prev;
+      return merged;
+    });
+    lastAppliedSigRef.current = sig;
+  }, [api, beginAdapterSelectionSync]);
+  const applyDecoratorSync = useCallback5(() => {
+    beginAdapterSelectionSync();
+    setRF((prev) => {
+      let nodeChanged = false;
+      let edgeChanged = false;
+      const nextNodes = prev.nodes.map((node) => {
+        if (!nodeDecoratorsRef.current || isCommentId(String(node.id))) return node;
+        const decorator = nodeDecoratorsRef.current(String(node.id)) ?? void 0;
+        const decorated = applyNodeDecorator(node, decorator);
+        if (decorated !== node) nodeChanged = true;
+        return decorated;
+      });
+      const nextEdges = prev.edges.map((edge) => {
+        if (!edgeDecoratorsRef.current) return edge;
+        const decorator = edgeDecoratorsRef.current(String(edge.id)) ?? void 0;
+        const decorated = applyEdgeDecorator(edge, decorator);
+        if (decorated !== edge) edgeChanged = true;
+        return decorated;
+      });
+      if (!nodeChanged && !edgeChanged) return prev;
+      return { nodes: nextNodes, edges: nextEdges };
+    });
+  }, [beginAdapterSelectionSync]);
+  const requestStructuralSync = useCallback5(() => {
     if (interactionInProgressRef.current) {
       pendingSyncRef.current = true;
       return;
@@ -3702,11 +3911,25 @@ function useReactFlowAdapter(api, options = {}) {
     pendingSyncRef.current = false;
     syncFromSnapshot();
   }, [syncFromSnapshot]);
+  const requestDecoratorSync = useCallback5(() => {
+    if (interactionInProgressRef.current) {
+      pendingDecoratorSyncRef.current = true;
+      return;
+    }
+    pendingDecoratorSyncRef.current = false;
+    applyDecoratorSync();
+  }, [applyDecoratorSync]);
   const flushDeferredSync = useCallback5(() => {
-    if (interactionInProgressRef.current || !pendingSyncRef.current) return;
-    pendingSyncRef.current = false;
-    syncFromSnapshot();
-  }, [syncFromSnapshot]);
+    if (interactionInProgressRef.current) return;
+    if (pendingSyncRef.current) {
+      pendingSyncRef.current = false;
+      syncFromSnapshot();
+    }
+    if (pendingDecoratorSyncRef.current) {
+      pendingDecoratorSyncRef.current = false;
+      applyDecoratorSync();
+    }
+  }, [applyDecoratorSync, syncFromSnapshot]);
   const startInteraction = useCallback5(() => {
     interactionInProgressRef.current = true;
   }, []);
@@ -3748,38 +3971,45 @@ function useReactFlowAdapter(api, options = {}) {
   }, [options.afterConnect]);
   useEffect6(() => {
     nodeDecoratorsRef.current = nodeDecorators;
-  }, [nodeDecorators]);
+    requestDecoratorSync();
+  }, [nodeDecorators, requestDecoratorSync]);
   useEffect6(() => {
     edgeDecoratorsRef.current = edgeDecorators;
-  }, [edgeDecorators]);
+    requestDecoratorSync();
+  }, [edgeDecorators, requestDecoratorSync]);
   useEffect6(() => {
-    requestSync();
-  }, [api, nodeDecorators, edgeDecorators, requestSync]);
-  const [rf, setRF] = useState5(
-    () => toRF(api.snapshot(), api, {
-      nodeDecorators: nodeDecoratorsRef.current,
-      edgeDecorators: edgeDecoratorsRef.current
-    })
-  );
+    requestStructuralSync();
+  }, [api, requestStructuralSync]);
   const snapVector = useMemo5(() => {
     if (!options.snapToGrid) return void 0;
     if (options.snapToGrid === true) return [8, 8];
     return [options.snapToGrid.x || 8, options.snapToGrid.y || 8];
   }, [options.snapToGrid]);
   useEffect6(() => {
-    const offGraph = api.on("graph:update", requestSync);
-    const offSelection = api.on("selection:change", requestSync);
-    const offState = api.on("state:change", requestSync);
-    const offCommentCreate = api.on("comment:thread:create", requestSync);
-    const offCommentUpdate = api.on("comment:thread:update", requestSync);
-    const offCommentDelete = api.on("comment:thread:delete", requestSync);
-    const offCommentMove = api.on("comment:move", requestSync);
-    const offCommentResolve = api.on("comment:resolve", requestSync);
+    const offGraph = api.on("graph:update", requestStructuralSync);
+    const offSelection = api.on("selection:change", requestStructuralSync);
+    const offState = api.on("state:change", requestStructuralSync);
+    const offCommentCreate = api.on("comment:thread:create", requestStructuralSync);
+    const offCommentUpdate = api.on("comment:thread:update", requestStructuralSync);
+    const offCommentDelete = api.on("comment:thread:delete", requestStructuralSync);
+    const offCommentMove = api.on("comment:move", requestStructuralSync);
+    const offCommentResolve = api.on("comment:resolve", requestStructuralSync);
     return () => {
       interactionInProgressRef.current = false;
       pendingSyncRef.current = false;
+      pendingDecoratorSyncRef.current = false;
       pendingNodeHistoryRef.current = {};
       dragStartPositionsRef.current = {};
+      if (suppressSelectionRafRef.current !== null && typeof cancelAnimationFrame === "function") {
+        cancelAnimationFrame(suppressSelectionRafRef.current);
+        suppressSelectionRafRef.current = null;
+      }
+      if (suppressSelectionTimerRef.current !== null) {
+        clearTimeout(suppressSelectionTimerRef.current);
+        suppressSelectionTimerRef.current = null;
+      }
+      suppressSelectionTokenRef.current += 1;
+      suppressSelectionSyncRef.current = false;
       offGraph();
       offSelection();
       offState();
@@ -3789,7 +4019,7 @@ function useReactFlowAdapter(api, options = {}) {
       offCommentMove();
       offCommentResolve();
     };
-  }, [api, requestSync]);
+  }, [api, requestStructuralSync]);
   const applySnap = useCallback5(
     (pos) => {
       if (!snapVector) return pos;
@@ -3867,7 +4097,7 @@ function useReactFlowAdapter(api, options = {}) {
         }
       }
       if (Object.keys(posUpdates).length > 0) setPositionsThrottled(posUpdates);
-      if (selectionDirty) {
+      if (selectionDirty && !suppressSelectionSyncRef.current) {
         const next = nextNodesSnapshot.filter((node) => !isCommentId(node.id) && node.selected).map((node) => String(node.id));
         const current = api.getSelection().map(String);
         if (!sameIdSet(next, current)) api.select(next);
@@ -6680,62 +6910,27 @@ var Header = ({ menu = [] }) => {
 var header_default = Header;
 
 // src/components/ui/scroll-area.tsx
-import "react";
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
-function ScrollArea({
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs20(
-    ScrollAreaPrimitive.Root,
-    {
-      "data-slot": "scroll-area",
-      className: cn("relative", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx27(
-          ScrollAreaPrimitive.Viewport,
-          {
-            "data-slot": "scroll-area-viewport",
-            className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1",
-            children
-          }
-        ),
-        /* @__PURE__ */ jsx27(ScrollBar, {}),
-        /* @__PURE__ */ jsx27(ScrollAreaPrimitive.Corner, {})
-      ]
-    }
-  );
-}
-function ScrollBar({
-  className,
-  orientation = "vertical",
-  ...props
-}) {
+import * as React11 from "react";
+import { jsx as jsx27 } from "react/jsx-runtime";
+var ScrollArea = React11.forwardRef(function ScrollArea2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx27("div", { "data-slot": "scroll-area", ref, className: cn("relative size-full overflow-auto", className), ...props, children });
+});
+var ScrollBar = React11.forwardRef(function ScrollBar2({ className, orientation = "vertical", ...props }, ref) {
   return /* @__PURE__ */ jsx27(
-    ScrollAreaPrimitive.ScrollAreaScrollbar,
+    "div",
     {
       "data-slot": "scroll-area-scrollbar",
-      orientation,
+      ref,
+      "aria-hidden": "true",
       className: cn(
-        "flex touch-none p-px transition-colors select-none",
-        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
-        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
+        "pointer-events-none absolute opacity-0",
+        orientation === "vertical" ? "right-0 top-0 h-full w-0" : "bottom-0 left-0 h-0 w-full",
         className
       ),
-      ...props,
-      children: /* @__PURE__ */ jsx27(
-        ScrollAreaPrimitive.ScrollAreaThumb,
-        {
-          "data-slot": "scroll-area-thumb",
-          className: "bg-border relative flex-1 rounded-full"
-        }
-      )
+      ...props
     }
   );
-}
+});
 
 // src/panels/left/assets/index.tsx
 import { useInputs } from "@timeax/digital-service-engine/react";
@@ -6743,7 +6938,7 @@ import { useWorkspace as useWorkspace8 } from "@timeax/digital-service-engine/wo
 import { useMemo as useMemo11, useState as useState12 } from "react";
 import { CiSearch } from "react-icons/ci";
 import { LuBox, LuShapes } from "react-icons/lu";
-import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
 function toTitle(value) {
   return value.split(/[-_:]/g).filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
 }
@@ -6775,8 +6970,8 @@ function AssetsPanel() {
   const filteredTemplates = lower ? templates2.filter(
     (item) => item.name.toLowerCase().includes(lower) || String(item.kind ?? "").toLowerCase().includes(lower)
   ) : templates2;
-  return /* @__PURE__ */ jsxs21("div", { className: "flex h-full min-h-0 flex-col rounded-2xl border border-slate-200/80 bg-white/90 p-3 shadow-sm dark:border-slate-800 dark:bg-slate-950/80", children: [
-    /* @__PURE__ */ jsxs21("label", { className: "relative", children: [
+  return /* @__PURE__ */ jsxs20("div", { className: "flex h-full min-h-0 flex-col rounded-2xl border border-slate-200/80 bg-white/90 p-3 shadow-sm dark:border-slate-800 dark:bg-slate-950/80", children: [
+    /* @__PURE__ */ jsxs20("label", { className: "relative", children: [
       /* @__PURE__ */ jsx28(CiSearch, { className: "pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-slate-400" }),
       /* @__PURE__ */ jsx28(
         "input",
@@ -6788,13 +6983,13 @@ function AssetsPanel() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs21(ScrollArea, { className: "mt-3 min-h-0 flex-1 pr-1", children: [
-      /* @__PURE__ */ jsxs21("section", { children: [
-        /* @__PURE__ */ jsxs21("h4", { className: "mb-2 flex items-center gap-2 text-xs font-semibold tracking-wide text-slate-500 uppercase dark:text-slate-400", children: [
+    /* @__PURE__ */ jsxs20(ScrollArea, { className: "mt-3 min-h-0 flex-1 pr-1", children: [
+      /* @__PURE__ */ jsxs20("section", { children: [
+        /* @__PURE__ */ jsxs20("h4", { className: "mb-2 flex items-center gap-2 text-xs font-semibold tracking-wide text-slate-500 uppercase dark:text-slate-400", children: [
           /* @__PURE__ */ jsx28(LuShapes, {}),
           "Built-in Inputs"
         ] }),
-        /* @__PURE__ */ jsx28("div", { className: "grid grid-cols-2 gap-2", children: filteredBuiltins.length ? filteredBuiltins.map((item) => /* @__PURE__ */ jsxs21(
+        /* @__PURE__ */ jsx28("div", { className: "grid grid-cols-2 gap-2", children: filteredBuiltins.length ? filteredBuiltins.map((item) => /* @__PURE__ */ jsxs20(
           "button",
           {
             type: "button",
@@ -6819,13 +7014,13 @@ function AssetsPanel() {
           item.key
         )) : /* @__PURE__ */ jsx28(EmptyState, { title: "No built-ins", description: "No registry input entries matched your search.", className: "min-h-36" }) })
       ] }),
-      /* @__PURE__ */ jsxs21("section", { className: "mt-5", children: [
-        /* @__PURE__ */ jsxs21("h4", { className: "mb-2 flex items-center gap-2 text-xs font-semibold tracking-wide text-slate-500 uppercase dark:text-slate-400", children: [
+      /* @__PURE__ */ jsxs20("section", { className: "mt-5", children: [
+        /* @__PURE__ */ jsxs20("h4", { className: "mb-2 flex items-center gap-2 text-xs font-semibold tracking-wide text-slate-500 uppercase dark:text-slate-400", children: [
           /* @__PURE__ */ jsx28(LuBox, {}),
           "Saved Templates"
         ] }),
         /* @__PURE__ */ jsx28(WorkspaceBootInlineNotice, { boot: ws.boot, sections: ["templates"], className: "mb-3" }),
-        /* @__PURE__ */ jsx28("div", { className: "grid grid-cols-2 gap-2", children: filteredTemplates.length ? filteredTemplates.map((item) => /* @__PURE__ */ jsxs21(
+        /* @__PURE__ */ jsx28("div", { className: "grid grid-cols-2 gap-2", children: filteredTemplates.length ? filteredTemplates.map((item) => /* @__PURE__ */ jsxs20(
           "button",
           {
             type: "button",
@@ -8035,7 +8230,7 @@ import { VscChevronRight } from "react-icons/vsc";
 
 // src/components/sort-tree/node.tsx
 import * as React21 from "react";
-import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
 function Node({ node, matched, isEditing, onCommit, onCancel }) {
   const spanRef = React21.useRef(null);
   React21.useEffect(() => {
@@ -8066,7 +8261,7 @@ function Node({ node, matched, isEditing, onCommit, onCancel }) {
       onCancel?.();
     }
   };
-  return /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2 truncate " + (matched ? "rounded bg-yellow-200/50 px-1" : ""), children: [
+  return /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2 truncate " + (matched ? "rounded bg-yellow-200/50 px-1" : ""), children: [
     node.icon ? /* @__PURE__ */ jsx32("span", { className: "inline-flex items-center", children: node.icon }) : null,
     /* @__PURE__ */ jsx32(
       "span",
@@ -8084,7 +8279,7 @@ function Node({ node, matched, isEditing, onCommit, onCancel }) {
 }
 
 // src/components/sort-tree/node-row.tsx
-import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
 function NodeRow({
   node,
   path,
@@ -8115,7 +8310,7 @@ function NodeRow({
     e.stopPropagation();
     callback?.(e);
   };
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       className: ["tree-row", rowClassName || "", isDragging ? "is-dragging" : ""].join(" "),
@@ -8129,7 +8324,7 @@ function NodeRow({
       children: [
         showBinding ? /* @__PURE__ */ jsx33("div", { className: "tree-rail", style: { width: pad }, children: binding.guides.map((g, i) => /* @__PURE__ */ jsx33("span", { className: "tree-col", "data-show": g ? "1" : "0", style: { width: indent } }, i)) }) : /* @__PURE__ */ jsx33("div", { style: { width: pad } }),
         showBinding && /* @__PURE__ */ jsx33("div", { className: "tree-elbow", style: { width: indent } }),
-        /* @__PURE__ */ jsx33("div", { className: "min-w-0 flex-1", children: isDragging ? /* @__PURE__ */ jsxs23(
+        /* @__PURE__ */ jsx33("div", { className: "min-w-0 flex-1", children: isDragging ? /* @__PURE__ */ jsxs22(
           "div",
           {
             "aria-hidden": "true",
@@ -8201,7 +8396,7 @@ function NodeRow({
 }
 
 // src/components/sort-tree/internal/render-row.tsx
-import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
 var ZONE_HEIGHT = 6;
 function useRenderRow(args) {
   const {
@@ -8292,7 +8487,7 @@ function useRenderRow(args) {
             // fallback
           },
           onMouseDown: (e) => onRowPointerDown(e, rIndex, r.node),
-          children: /* @__PURE__ */ jsxs24("div", { className: cn(skinClass, activeClassString), style: { borderRadius: "inherit" }, children: [
+          children: /* @__PURE__ */ jsxs23("div", { className: cn(skinClass, activeClassString), style: { borderRadius: "inherit" }, children: [
             /* @__PURE__ */ jsx34(DropZone, { id: zoneId(r.path, "before"), height: ZONE_HEIGHT, onNativeDrop: handleExternalDrop, disabled: disableZones }),
             /* @__PURE__ */ jsx34(OnDroppableWrap, { id: zoneId(r.path, "on"), onNativeDrop: handleExternalDrop, disabled: disableZones, children: /* @__PURE__ */ jsx34(DraggableRow, { id: draggableId, disabled: disabledDrag, children: /* @__PURE__ */ jsx34(
               NodeRow,
@@ -8400,7 +8595,7 @@ function useRenderRow(args) {
 }
 
 // src/components/sort-tree/sort-tree.tsx
-import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
 function SortTreeInner(props, ref) {
   const {
     data,
@@ -8693,7 +8888,7 @@ function SortTreeInner(props, ref) {
       loadChildren
     ]
   );
-  return /* @__PURE__ */ jsxs25(DndContext, { sensors, onDragStart: handleDragStart, onDragEnd: handleDragEnd, collisionDetection, children: [
+  return /* @__PURE__ */ jsxs24(DndContext, { sensors, onDragStart: handleDragStart, onDragEnd: handleDragEnd, collisionDetection, children: [
     /* @__PURE__ */ jsx35("div", { className, style, tabIndex: 0, onKeyDown, children: height ? /* @__PURE__ */ jsx35(
       List,
       {
@@ -8987,7 +9182,7 @@ import { LuTags as LuTags3 } from "react-icons/lu";
 import { MdOutlineAdd } from "react-icons/md";
 import { RxInput as RxInput3 } from "react-icons/rx";
 import { VscNewFolder } from "react-icons/vsc";
-import { jsx as jsx38, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs25 } from "react/jsx-runtime";
 function filterTree(nodes, query) {
   if (!query.trim()) return nodes;
   const lower = query.toLowerCase();
@@ -9041,6 +9236,10 @@ var Layers = () => {
       detail.preventDefault();
       canvas.api.editor.editLabel(detail.node.id, detail.node.title);
     }
+    if (detail.type === "insert" && detail.context.via == "ui.create") {
+      const parent = detail.to.parent.id;
+      canvas.api.editor.addOption(parent, { label: detail.node.title });
+    }
   };
   const tags = useMemo17(() => filterTree(canvas.layers.tags, tagSearch), [canvas.layers.tags, tagSearch]);
   const fields = useMemo17(() => filterTree(canvas.layers.fields, fieldSearch), [canvas.layers.fields, fieldSearch]);
@@ -9061,7 +9260,7 @@ var Layers = () => {
   const handleFieldSearchBlur = () => {
     if (!fieldSearch.trim()) setIsFieldSearchOpen(false);
   };
-  return /* @__PURE__ */ jsxs26("div", { className: "flex h-full min-h-0 flex-1 flex-col overflow-hidden rounded-2xl border border-slate-200/80 bg-white/90 shadow-sm dark:border-slate-800 dark:bg-slate-950/80", children: [
+  return /* @__PURE__ */ jsxs25("div", { className: "flex h-full min-h-0 flex-1 flex-col overflow-hidden rounded-2xl border border-slate-200/80 bg-white/90 shadow-sm dark:border-slate-800 dark:bg-slate-950/80", children: [
     /* @__PURE__ */ jsx38(
       Panel,
       {
@@ -9070,13 +9269,13 @@ var Layers = () => {
         minHeight: 180,
         maxHeight: 520,
         className: "flex min-h-45 flex-col rounded-none! border-b border-slate-200/80 bg-transparent dark:border-slate-800",
-        children: /* @__PURE__ */ jsxs26("section", { className: "flex min-h-0 flex-1 flex-col px-4 pt-4 pb-3", children: [
-          /* @__PURE__ */ jsxs26("div", { className: "flex items-start justify-between gap-3", children: [
-            /* @__PURE__ */ jsxs26("div", { className: "min-w-0", children: [
+        children: /* @__PURE__ */ jsxs25("section", { className: "flex min-h-0 flex-1 flex-col px-4 pt-4 pb-3", children: [
+          /* @__PURE__ */ jsxs25("div", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs25("div", { className: "min-w-0", children: [
               /* @__PURE__ */ jsx38("h3", { className: "text-sm font-semibold text-slate-900 dark:text-slate-100", children: "Tag hierarchy" }),
               /* @__PURE__ */ jsx38("p", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: "Structure the visible groups and inheritance tree." })
             ] }),
-            /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-1", children: [
               /* @__PURE__ */ jsx38(
                 "button",
                 {
@@ -9097,7 +9296,7 @@ var Layers = () => {
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsxs26("div", { className: "mt-3 flex min-h-0 flex-1 flex-col gap-3", children: [
+          /* @__PURE__ */ jsxs25("div", { className: "mt-3 flex min-h-0 flex-1 flex-col gap-3", children: [
             isTagSearchOpen || hasTagSearch ? /* @__PURE__ */ jsx38(
               PanelSearch,
               {
@@ -9155,13 +9354,13 @@ var Layers = () => {
         ] })
       }
     ),
-    /* @__PURE__ */ jsxs26("section", { className: "flex min-h-0 flex-1 flex-col px-4 pt-3 pb-4", children: [
-      /* @__PURE__ */ jsxs26("div", { className: "flex items-start justify-between gap-3", children: [
-        /* @__PURE__ */ jsxs26("div", { className: "min-w-0", children: [
+    /* @__PURE__ */ jsxs25("section", { className: "flex min-h-0 flex-1 flex-col px-4 pt-3 pb-4", children: [
+      /* @__PURE__ */ jsxs25("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs25("div", { className: "min-w-0", children: [
           /* @__PURE__ */ jsx38("h3", { className: "text-sm font-semibold text-slate-900 dark:text-slate-100", children: "Fields in view" }),
           /* @__PURE__ */ jsx38("p", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: `Under ${activeTagLabel}` })
         ] }),
-        /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-1", children: [
           /* @__PURE__ */ jsx38(
             "button",
             {
@@ -9203,7 +9402,7 @@ var Layers = () => {
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxs26("div", { className: "mt-3 flex min-h-0 flex-1 flex-col gap-3", children: [
+      /* @__PURE__ */ jsxs25("div", { className: "mt-3 flex min-h-0 flex-1 flex-col gap-3", children: [
         isFieldSearchOpen || hasFieldSearch ? /* @__PURE__ */ jsx38(
           PanelSearch,
           {
@@ -9346,7 +9545,7 @@ function TabsContent({
 // src/panels/left/index.tsx
 import { CiGrid32 } from "react-icons/ci";
 import { MdOutlineLayers } from "react-icons/md";
-import { jsx as jsx40, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
 var Left = ({ menu }) => {
   const tabClassName = cn(
     "rounded-xl! py-2! shadow-none!",
@@ -9360,15 +9559,15 @@ var Left = ({ menu }) => {
       edges: ["right"],
       maxWidth: 420,
       minWidth: 320,
-      children: /* @__PURE__ */ jsxs27("div", { className: "flex h-full flex-col", children: [
+      children: /* @__PURE__ */ jsxs26("div", { className: "flex h-full flex-col", children: [
         /* @__PURE__ */ jsx40(header_default, { menu }),
-        /* @__PURE__ */ jsx40("div", { className: "flex min-h-0 flex-1 flex-col gap-2 py-2", children: /* @__PURE__ */ jsxs27(Tabs, { defaultValue: "layers", className: "flex min-h-0 flex-1 flex-col px-3", children: [
-          /* @__PURE__ */ jsxs27(TabsList, { className: "grid h-auto grid-cols-2 rounded-2xl bg-slate-100 p-1 dark:bg-slate-900", children: [
-            /* @__PURE__ */ jsx40(TabsTrigger, { className: tabClassName, value: "layers", children: /* @__PURE__ */ jsxs27("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx40("div", { className: "flex min-h-0 flex-1 flex-col gap-2 py-2", children: /* @__PURE__ */ jsxs26(Tabs, { defaultValue: "layers", className: "flex min-h-0 flex-1 flex-col px-3", children: [
+          /* @__PURE__ */ jsxs26(TabsList, { className: "grid h-auto grid-cols-2 rounded-2xl bg-slate-100 p-1 dark:bg-slate-900", children: [
+            /* @__PURE__ */ jsx40(TabsTrigger, { className: tabClassName, value: "layers", children: /* @__PURE__ */ jsxs26("span", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx40(MdOutlineLayers, {}),
               /* @__PURE__ */ jsx40("span", { children: "Layers" })
             ] }) }),
-            /* @__PURE__ */ jsx40(TabsTrigger, { className: tabClassName, value: "assets", children: /* @__PURE__ */ jsxs27("span", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx40(TabsTrigger, { className: tabClassName, value: "assets", children: /* @__PURE__ */ jsxs26("span", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx40(CiGrid32, {}),
               /* @__PURE__ */ jsx40("span", { children: "Assets" })
             ] }) })
@@ -9388,7 +9587,7 @@ import { useMemo as useMemo18 } from "react";
 import { GoChevronDown } from "react-icons/go";
 import { HiOutlineDotsHorizontal } from "react-icons/hi";
 import { PiUserPlusThin } from "react-icons/pi";
-import { jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
 function getInitials(name) {
   const parts = name.trim().split(/\s+/).filter(Boolean);
   if (!parts.length) return "?";
@@ -9450,22 +9649,22 @@ var Users = ({ users, onViewUser, onSetMain, onToggleAdmin, onRemoveUser, onInvi
       return bScore - aScore || a.name.localeCompare(b.name);
     });
   }, [users]);
-  return /* @__PURE__ */ jsxs28(Popover, { children: [
-    /* @__PURE__ */ jsx41(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs27(Popover, { children: [
+    /* @__PURE__ */ jsx41(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs27(
       "button",
       {
         type: "button",
         className: "flex items-center gap-2 rounded-xl border border-transparent px-1 py-1 transition hover:border-slate-200 hover:bg-white dark:hover:border-slate-800 dark:hover:bg-slate-950",
         children: [
-          /* @__PURE__ */ jsxs28("div", { className: "flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-white dark:*:data-[slot=avatar]:ring-slate-950", children: [
-            visibleUsers.map((user) => /* @__PURE__ */ jsxs28("div", { className: "relative", children: [
-              /* @__PURE__ */ jsxs28(Avatar, { className: "h-8 w-8", children: [
+          /* @__PURE__ */ jsxs27("div", { className: "flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-white dark:*:data-[slot=avatar]:ring-slate-950", children: [
+            visibleUsers.map((user) => /* @__PURE__ */ jsxs27("div", { className: "relative", children: [
+              /* @__PURE__ */ jsxs27(Avatar, { className: "h-8 w-8", children: [
                 /* @__PURE__ */ jsx41(AvatarImage, { src: user.avatar, alt: user.name }),
                 /* @__PURE__ */ jsx41(AvatarFallback, { children: getInitials(user.name) })
               ] }),
               user.isOnline ? /* @__PURE__ */ jsx41("span", { className: "absolute right-0 bottom-0 h-2 w-2 rounded-full bg-emerald-500 ring-2 ring-white dark:ring-slate-950" }) : null
             ] }, user.id)),
-            extra > 0 ? /* @__PURE__ */ jsxs28("div", { className: "flex h-8 w-8 items-center justify-center rounded-full border border-dashed border-slate-300 bg-slate-100 text-xs font-medium text-slate-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300", children: [
+            extra > 0 ? /* @__PURE__ */ jsxs27("div", { className: "flex h-8 w-8 items-center justify-center rounded-full border border-dashed border-slate-300 bg-slate-100 text-xs font-medium text-slate-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300", children: [
               "+",
               extra
             ] }) : null
@@ -9474,14 +9673,14 @@ var Users = ({ users, onViewUser, onSetMain, onToggleAdmin, onRemoveUser, onInvi
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxs28(PopoverContent, { align: "start", className: "w-[380px] rounded-3xl border-slate-200 bg-white/98 p-0 shadow-2xl dark:border-slate-800 dark:bg-slate-950/98", children: [
-      /* @__PURE__ */ jsx41("div", { className: "border-b border-slate-200 px-4 py-4 dark:border-slate-800", children: /* @__PURE__ */ jsxs28("div", { className: "flex items-start justify-between gap-3", children: [
-        /* @__PURE__ */ jsxs28("div", { children: [
+    /* @__PURE__ */ jsxs27(PopoverContent, { align: "start", className: "w-[380px] rounded-3xl border-slate-200 bg-white/98 p-0 shadow-2xl dark:border-slate-800 dark:bg-slate-950/98", children: [
+      /* @__PURE__ */ jsx41("div", { className: "border-b border-slate-200 px-4 py-4 dark:border-slate-800", children: /* @__PURE__ */ jsxs27("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs27("div", { children: [
           /* @__PURE__ */ jsx41("div", { className: "text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-400 dark:text-slate-500", children: "Collaborators" }),
           /* @__PURE__ */ jsx41("h3", { className: "mt-1 text-base font-semibold text-slate-900 dark:text-slate-100", children: "Branch authors" }),
           /* @__PURE__ */ jsx41("p", { className: "mt-1 text-sm text-slate-500 dark:text-slate-400", children: "Presence, roles, and access for the active branch." })
         ] }),
-        /* @__PURE__ */ jsxs28(
+        /* @__PURE__ */ jsxs27(
           Button,
           {
             type: "button",
@@ -9503,9 +9702,9 @@ var Users = ({ users, onViewUser, onSetMain, onToggleAdmin, onRemoveUser, onInvi
           "div",
           {
             className: "rounded-2xl border border-slate-200/80 bg-slate-50/80 p-3 shadow-sm dark:border-slate-800 dark:bg-slate-900/70",
-            children: /* @__PURE__ */ jsxs28("div", { className: "flex items-start gap-3", children: [
-              /* @__PURE__ */ jsxs28("div", { className: "relative", children: [
-                /* @__PURE__ */ jsxs28(Avatar, { className: "h-11 w-11 border border-white shadow-sm dark:border-slate-950", children: [
+            children: /* @__PURE__ */ jsxs27("div", { className: "flex items-start gap-3", children: [
+              /* @__PURE__ */ jsxs27("div", { className: "relative", children: [
+                /* @__PURE__ */ jsxs27(Avatar, { className: "h-11 w-11 border border-white shadow-sm dark:border-slate-950", children: [
                   /* @__PURE__ */ jsx41(AvatarImage, { src: user.avatar, alt: user.name }),
                   /* @__PURE__ */ jsx41(AvatarFallback, { children: getInitials(user.name) })
                 ] }),
@@ -9519,9 +9718,9 @@ var Users = ({ users, onViewUser, onSetMain, onToggleAdmin, onRemoveUser, onInvi
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs28("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsxs28("div", { className: "flex items-start justify-between gap-3", children: [
-                  /* @__PURE__ */ jsxs28("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsxs27("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxs27("div", { className: "flex items-start justify-between gap-3", children: [
+                  /* @__PURE__ */ jsxs27("div", { className: "min-w-0", children: [
                     /* @__PURE__ */ jsx41("div", { className: "truncate text-sm font-semibold text-slate-900 dark:text-slate-100", children: user.name }),
                     /* @__PURE__ */ jsx41("div", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: statusLabel })
                   ] }),
@@ -9547,7 +9746,7 @@ var Users = ({ users, onViewUser, onSetMain, onToggleAdmin, onRemoveUser, onInvi
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs28("div", { className: "mt-3 flex flex-wrap gap-2", children: [
+                /* @__PURE__ */ jsxs27("div", { className: "mt-3 flex flex-wrap gap-2", children: [
                   (user.roles?.length ? user.roles : ["viewer"]).map((role) => /* @__PURE__ */ jsx41("span", { className: cn("rounded-full border px-2.5 py-1 text-[11px] font-semibold capitalize", roleClass(role)), children: formatRole(role) }, `${user.id}-${role}`)),
                   /* @__PURE__ */ jsx41("span", { className: "rounded-full border border-slate-200 bg-white px-2.5 py-1 text-[11px] font-medium text-slate-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-300", children: permissionsLabel })
                 ] })
@@ -9567,7 +9766,7 @@ import { useCanvas as useCanvas6, useWorkspace as useWorkspace9 } from "@timeax/
 import { useMemo as useMemo19 } from "react";
 import { MdOutlinePlayArrow } from "react-icons/md";
 import { PiShareFatThin } from "react-icons/pi";
-import { jsx as jsx42, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
 var Header2 = ({ onShare, onPlay }) => {
   const ws = useWorkspace9();
   const canvas = useCanvas6();
@@ -9602,8 +9801,8 @@ var Header2 = ({ onShare, onPlay }) => {
   const onShareClick = () => {
     onShare?.(ws.snapshot.data);
   };
-  return /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between gap-3 border-b border-slate-200 px-3 py-3 dark:border-slate-800", children: [
-    /* @__PURE__ */ jsxs29("div", { className: "min-w-0 flex items-center gap-3", children: [
+  return /* @__PURE__ */ jsxs28("div", { className: "flex items-center justify-between gap-3 border-b border-slate-200 px-3 py-3 dark:border-slate-800", children: [
+    /* @__PURE__ */ jsxs28("div", { className: "min-w-0 flex items-center gap-3", children: [
       /* @__PURE__ */ jsx42(users_default, { users }),
       /* @__PURE__ */ jsx42(
         BuilderIconButton,
@@ -9665,7 +9864,7 @@ function CollapsibleContent2({
 import { InputField as InputField3 } from "@timeax/form-palette";
 import * as React28 from "react";
 import { createCache as createCache2, createIndexedDBDriver as createIndexedDBDriver2, createMemoryDriver as createMemoryDriver2 } from "@timeax/cache-store";
-import { jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
 var OPEN_DB_NAME = "dgp-cache";
 var OPEN_STORE_NAME = "kv";
 var OPEN_NS = "comment-thread-open";
@@ -9748,7 +9947,7 @@ function PersonAvatar({
   sizeClass = "h-8 w-8",
   fallback
 }) {
-  return /* @__PURE__ */ jsxs30(Avatar, { className: sizeClass, children: [
+  return /* @__PURE__ */ jsxs29(Avatar, { className: sizeClass, children: [
     person.avatar?.src ? /* @__PURE__ */ jsx44(AvatarImage, { src: person.avatar.src, alt: person.avatar.alt ?? `Avatar of ${person.name}` }) : null,
     /* @__PURE__ */ jsx44(AvatarFallback, { children: fallback ?? initials(person.name) })
   ] });
@@ -9760,7 +9959,7 @@ function ReplyInputRow({
   onSubmit,
   className
 }) {
-  return /* @__PURE__ */ jsxs30("div", { className: cx("flex items-center gap-3", className), children: [
+  return /* @__PURE__ */ jsxs29("div", { className: cx("flex items-center gap-3", className), children: [
     /* @__PURE__ */ jsx44(PersonAvatar, { person: { name: you.name, avatar: you.avatar }, fallback: initials(you.name) }),
     /* @__PURE__ */ jsx44(
       InputField3,
@@ -9781,10 +9980,10 @@ function ReplyInputRow({
 }
 function CommentItem({ msg, identities, formatTime }) {
   const author = resolveAuthor(msg, identities);
-  return /* @__PURE__ */ jsxs30("div", { className: "flex items-start gap-3", children: [
+  return /* @__PURE__ */ jsxs29("div", { className: "flex items-start gap-3", children: [
     /* @__PURE__ */ jsx44(PersonAvatar, { person: author }),
-    /* @__PURE__ */ jsxs30("div", { className: "flex-1", children: [
-      /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxs29("div", { className: "flex-1", children: [
+      /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsx44("p", { className: "text-sm font-semibold text-gray-800 dark:text-white", children: author.name }),
         /* @__PURE__ */ jsx44("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: formatTime(msg.createdAt) })
       ] }),
@@ -9806,7 +10005,7 @@ function CommentThreadView({ thread, identities, you, highlight, formatTime, onR
   };
   if (!main) return null;
   const [open, setOpen] = useThreadOpenState(thread.id, true);
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs29(
     "div",
     {
       className: cx(
@@ -9814,11 +10013,11 @@ function CommentThreadView({ thread, identities, you, highlight, formatTime, onR
       ),
       children: [
         isHighlighted ? /* @__PURE__ */ jsx44(ActiveDot, {}) : null,
-        /* @__PURE__ */ jsxs30(Collapsible, { open, onOpenChange: setOpen, children: [
+        /* @__PURE__ */ jsxs29(Collapsible, { open, onOpenChange: setOpen, children: [
           /* @__PURE__ */ jsx44(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsx44("div", { className: "px-3 py-4", children: /* @__PURE__ */ jsx44(CommentItem, { msg: main, identities, formatTime: fmt }) }) }),
-          /* @__PURE__ */ jsx44(CollapsibleContent2, { children: /* @__PURE__ */ jsx44("div", { className: "border-t border-gray-200 bg-gray-50 p-4 pl-6 dark:border-gray-700 dark:bg-gray-800/50", children: /* @__PURE__ */ jsxs30("div", { className: "flex items-start gap-4", children: [
+          /* @__PURE__ */ jsx44(CollapsibleContent2, { children: /* @__PURE__ */ jsx44("div", { className: "border-t border-gray-200 bg-gray-50 p-4 pl-6 dark:border-gray-700 dark:bg-gray-800/50", children: /* @__PURE__ */ jsxs29("div", { className: "flex items-start gap-4", children: [
             /* @__PURE__ */ jsx44("div", { className: "ml-1 w-px shrink-0 self-stretch bg-gray-300 dark:bg-gray-600" }),
-            /* @__PURE__ */ jsxs30("div", { className: "flex-1 space-y-4", children: [
+            /* @__PURE__ */ jsxs29("div", { className: "flex-1 space-y-4", children: [
               replies.map((r) => /* @__PURE__ */ jsx44(CommentItem, { msg: r, identities, formatTime: fmt }, r.id)),
               /* @__PURE__ */ jsx44(ReplyInputRow, { id: thread.id, you, value, setValue, onSubmit: submit })
             ] })
@@ -9829,7 +10028,7 @@ function CommentThreadView({ thread, identities, you, highlight, formatTime, onR
   );
 }
 function ActiveDot() {
-  return /* @__PURE__ */ jsxs30("span", { className: "absolute -top-1.5 -left-1.5 flex h-3 w-3", children: [
+  return /* @__PURE__ */ jsxs29("span", { className: "absolute -top-1.5 -left-1.5 flex h-3 w-3", children: [
     /* @__PURE__ */ jsx44("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-75" }),
     /* @__PURE__ */ jsx44("span", { className: "relative inline-flex h-3 w-3 rounded-full bg-primary" })
   ] });
@@ -9840,7 +10039,7 @@ import { useWorkspace as useWorkspace10 } from "@timeax/digital-service-engine/w
 import { InputField as InputField4 } from "@timeax/form-palette";
 import { useMemo as useMemo21, useState as useState22 } from "react";
 import { MdOutlineSend } from "react-icons/md";
-import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
 var Comments = () => {
   const ws = useWorkspace10();
   const [value, setValue] = useState22("");
@@ -9853,12 +10052,12 @@ var Comments = () => {
       (thread) => thread.messages.some((message) => `${message.authorName ?? ""} ${message.body}`.toLowerCase().includes(lower))
     );
   }, [ws.comments.threads.data, query]);
-  return /* @__PURE__ */ jsxs31("div", { className: "flex h-full min-h-0 flex-col overflow-hidden", children: [
-    /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-between px-4 pt-4", children: [
+  return /* @__PURE__ */ jsxs30("div", { className: "flex h-full min-h-0 flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-between px-4 pt-4", children: [
       /* @__PURE__ */ jsx45("div", { children: /* @__PURE__ */ jsx45("h3", { className: "text-sm font-semibold text-slate-900 dark:text-slate-100", children: "All comments" }) }),
       /* @__PURE__ */ jsx45("button", { className: "text-xs font-semibold text-blue-600 hover:underline dark:text-blue-300", children: "Mark as read" })
     ] }),
-    /* @__PURE__ */ jsxs31("div", { className: "px-4 pt-3", children: [
+    /* @__PURE__ */ jsxs30("div", { className: "px-4 pt-3", children: [
       /* @__PURE__ */ jsx45(PanelSearch, { value: query, onChange: setQuery, placeholder: "Search comments or authors" }),
       /* @__PURE__ */ jsx45(WorkspaceBootInlineNotice, { boot: ws.boot, sections: ["comments"], className: "mt-3" })
     ] }),
@@ -9966,7 +10165,7 @@ function FieldLabel(props) {
 import * as React31 from "react";
 import { MdOutlineOpenInNew, MdOutlineRemoveCircleOutline } from "react-icons/md";
 import { TiWarning } from "react-icons/ti";
-import { jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs31 } from "react/jsx-runtime";
 var SectionCtx = React31.createContext(null);
 function useSectionCtx() {
   const ctx = React31.useContext(SectionCtx);
@@ -10022,7 +10221,7 @@ var Section = Object.assign(SectionRoot, {
 });
 function buildSectionActionButton({ className, icon, tooltip, iconOnly = false, badge, children, ...props }, ref) {
   const derivedAriaLabel = props["aria-label"] ?? (typeof tooltip === "string" ? tooltip : typeof children === "string" ? children : typeof props.title === "string" ? props.title : void 0);
-  const button = /* @__PURE__ */ jsxs32(
+  const button = /* @__PURE__ */ jsxs31(
     "button",
     {
       ref,
@@ -10044,7 +10243,7 @@ function buildSectionActionButton({ className, icon, tooltip, iconOnly = false,
     }
   );
   if (!tooltip) return button;
-  return /* @__PURE__ */ jsxs32(Tooltip, { children: [
+  return /* @__PURE__ */ jsxs31(Tooltip, { children: [
     /* @__PURE__ */ jsx48(TooltipTrigger, { asChild: true, children: button }),
     /* @__PURE__ */ jsx48(TooltipContent, { side: "bottom", children: tooltip })
   ] });
@@ -10059,8 +10258,8 @@ function IncludesList({ className, children }) {
   return /* @__PURE__ */ jsx48("div", { className: cn("space-y-2", className), children });
 }
 function IncludesItem({ title, badge, actions, className }) {
-  return /* @__PURE__ */ jsxs32("div", { className: cn("flex items-center justify-between rounded-md p-2", "bg-gray-50 dark:bg-gray-800/50", className), children: [
-    /* @__PURE__ */ jsxs32("div", { className: "flex min-w-0 items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs31("div", { className: cn("flex items-center justify-between rounded-md p-2", "bg-gray-50 dark:bg-gray-800/50", className), children: [
+    /* @__PURE__ */ jsxs31("div", { className: "flex min-w-0 items-center gap-2", children: [
       /* @__PURE__ */ jsx48("span", { className: "truncate text-sm text-gray-800 dark:text-gray-200", children: title }),
       badge
     ] }),
@@ -10073,8 +10272,8 @@ function IncludesItemMissing({
   className,
   icon
 }) {
-  return /* @__PURE__ */ jsxs32("div", { className: cn("flex items-center justify-between rounded-md p-2", "bg-red-50 dark:bg-red-900/20", className), children: [
-    /* @__PURE__ */ jsxs32("div", { className: "flex min-w-0 items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs31("div", { className: cn("flex items-center justify-between rounded-md p-2", "bg-red-50 dark:bg-red-900/20", className), children: [
+    /* @__PURE__ */ jsxs31("div", { className: "flex min-w-0 items-center gap-2", children: [
       /* @__PURE__ */ jsx48("span", { className: "shrink-0 text-base text-red-500 dark:text-red-400", children: icon ?? /* @__PURE__ */ jsx48("span", { className: "material-symbols-outlined", children: /* @__PURE__ */ jsx48(TiWarning, {}) }) }),
       /* @__PURE__ */ jsx48("span", { className: "truncate text-sm text-red-700 dark:text-red-300", children: message })
     ] }),
@@ -10139,7 +10338,7 @@ import { useCanvas as useCanvas7, useWorkspace as useWorkspace11 } from "@timeax
 import { InputField as InputField5 } from "@timeax/form-palette";
 import { useMemo as useMemo23, useState as useState24 } from "react";
 import { BsPlus } from "react-icons/bs";
-import { Fragment as Fragment9, jsx as jsx50, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx50, jsxs as jsxs32 } from "react/jsx-runtime";
 function AddService({ className, data, disabled, disabledMessage, readOnly, readOnlyMessage, emptyMessage }) {
   const ws = useWorkspace11();
   const canvas = useCanvas7();
@@ -10147,19 +10346,19 @@ function AddService({ className, data, disabled, disabledMessage, readOnly, read
   const connectedService = data.raw.service_id != null ? services2[data.raw.service_id] : void 0;
   const isReadOnly = Boolean(disabled || readOnly);
   const helperMessage = readOnlyMessage ?? disabledMessage;
-  return /* @__PURE__ */ jsxs33(Section, { className, children: [
-    /* @__PURE__ */ jsxs33(Section.Header, { children: [
+  return /* @__PURE__ */ jsxs32(Section, { className, children: [
+    /* @__PURE__ */ jsxs32(Section.Header, { children: [
       /* @__PURE__ */ jsx50(Section.Title, { children: "Service" }),
       /* @__PURE__ */ jsx50(Section.Actions, { children: !isReadOnly ? /* @__PURE__ */ jsx50(AddServicePopover, { data, services: Object.values(services2) }) : null })
     ] }),
-    /* @__PURE__ */ jsxs33(Section.Content, { children: [
+    /* @__PURE__ */ jsxs32(Section.Content, { children: [
       helperMessage ? /* @__PURE__ */ jsx50("p", { className: "mb-3 text-xs text-slate-500 dark:text-slate-400", children: helperMessage }) : null,
       /* @__PURE__ */ jsx50(RenderIf, { data: connectedService, emptyMessage: isReadOnly ? emptyMessage ?? null : emptyMessage ?? "None", children: (service) => /* @__PURE__ */ jsx50(Fragment9, { children: /* @__PURE__ */ jsx50(
         IncludesItem,
         {
           title: service.name ?? `Service ${service.id}`,
           className: "items-start!",
-          badge: /* @__PURE__ */ jsxs33("span", { className: "rounded-full bg-slate-200 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-600 dark:bg-slate-800 dark:text-slate-300", children: [
+          badge: /* @__PURE__ */ jsxs32("span", { className: "rounded-full bg-slate-200 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-600 dark:bg-slate-800 dark:text-slate-300", children: [
             "#",
             service.id
           ] }),
@@ -10178,19 +10377,19 @@ function AddService({ className, data, disabled, disabledMessage, readOnly, read
 }
 function ServiceSummary({ service, nodeId, disabled }) {
   const canvas = useCanvas7();
-  return /* @__PURE__ */ jsxs33("div", { className: "mt-2 rounded-md bg-gray-50 p-3 text-sm dark:bg-gray-800/50", children: [
-    /* @__PURE__ */ jsxs33("div", { className: "space-y-1 text-xs text-gray-600 dark:text-gray-300", children: [
-      /* @__PURE__ */ jsxs33("p", { children: [
+  return /* @__PURE__ */ jsxs32("div", { className: "mt-2 rounded-md bg-gray-50 p-3 text-sm dark:bg-gray-800/50", children: [
+    /* @__PURE__ */ jsxs32("div", { className: "space-y-1 text-xs text-gray-600 dark:text-gray-300", children: [
+      /* @__PURE__ */ jsxs32("p", { children: [
         /* @__PURE__ */ jsx50("span", { className: "font-medium text-gray-800 dark:text-gray-200", children: "Category:" }),
         " ",
         service.category ?? "Uncategorised"
       ] }),
-      /* @__PURE__ */ jsxs33("p", { children: [
+      /* @__PURE__ */ jsxs32("p", { children: [
         /* @__PURE__ */ jsx50("span", { className: "font-medium text-gray-800 dark:text-gray-200", children: "Rate:" }),
         " ",
         service.rate
       ] }),
-      /* @__PURE__ */ jsxs33("p", { children: [
+      /* @__PURE__ */ jsxs32("p", { children: [
         /* @__PURE__ */ jsx50("span", { className: "font-medium text-gray-800 dark:text-gray-200", children: "Range:" }),
         " ",
         service.min ?? 0,
@@ -10226,11 +10425,11 @@ function AddServicePopover({ data, services: services2 }) {
       service
     }));
   }, [services2, query]);
-  return /* @__PURE__ */ jsxs33(Popover, { open, onOpenChange: setOpen, children: [
+  return /* @__PURE__ */ jsxs32(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx50(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx50(SectionActionTriggerButton, { icon: /* @__PURE__ */ jsx50(BsPlus, {}), children: "Add" }) }),
-    /* @__PURE__ */ jsx50(PopoverContent, { className: "w-96", children: /* @__PURE__ */ jsxs33("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx50(PopoverContent, { className: "w-96", children: /* @__PURE__ */ jsxs32("div", { className: "flex flex-col gap-3", children: [
       /* @__PURE__ */ jsx50(InputField5, { variant: "text", value: query, onChange: (e) => setQuery(e.value ?? ""), placeholder: "Search services..." }),
-      /* @__PURE__ */ jsx50(ScrollArea, { className: "h-72 pr-1", children: /* @__PURE__ */ jsx50("div", { className: "space-y-2 pr-2", children: options.length ? options.map((option) => /* @__PURE__ */ jsxs33(
+      /* @__PURE__ */ jsx50(ScrollArea, { className: "h-72 pr-1", children: /* @__PURE__ */ jsx50("div", { className: "space-y-2 pr-2", children: options.length ? options.map((option) => /* @__PURE__ */ jsxs32(
         "button",
         {
           type: "button",
@@ -10238,7 +10437,7 @@ function AddServicePopover({ data, services: services2 }) {
           className: `w-full rounded-md border px-3 py-2 text-left transition ${selected === option.value ? "border-blue-300 bg-blue-50 dark:border-blue-500/40 dark:bg-blue-500/10" : "border-slate-200 hover:border-slate-300 hover:bg-slate-50 dark:border-slate-700 dark:hover:border-slate-600 dark:hover:bg-slate-900"}`,
           children: [
             /* @__PURE__ */ jsx50("div", { className: "text-sm font-medium text-slate-900 dark:text-slate-100", children: option.label }),
-            /* @__PURE__ */ jsxs33("div", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: [
+            /* @__PURE__ */ jsxs32("div", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: [
               option.description ?? "Uncategorised",
               " \u2022 Rate ",
               option.service.rate
@@ -10320,7 +10519,7 @@ function buildQuantityRule(valueBy, base = {}) {
 }
 
 // src/panels/right/partials/properties/components/descriptor-settings.tsx
-import { jsx as jsx51, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs33 } from "react/jsx-runtime";
 var RESERVED_DESCRIPTOR_KEYS = /* @__PURE__ */ new Set([
   "options",
   "label",
@@ -10472,7 +10671,7 @@ function FieldDescription({
   onReset
 }) {
   if (!description && !canReset) return null;
-  return /* @__PURE__ */ jsxs34("div", { className: "flex items-start justify-between gap-3", children: [
+  return /* @__PURE__ */ jsxs33("div", { className: "flex items-start justify-between gap-3", children: [
     /* @__PURE__ */ jsx51("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: description }),
     canReset ? /* @__PURE__ */ jsx51(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 px-2 text-xs", onClick: onReset, children: "Reset" }) : null
   ] });
@@ -10481,7 +10680,7 @@ function DescriptorPrimitiveField({ schema, value, hasOverride, onSet, onClear,
   switch (schema.type) {
     case "string": {
       const options = schema.enum?.map((item) => ({ label: item, value: item }));
-      return /* @__PURE__ */ jsxs34("div", { className: "space-y-2", children: [
+      return /* @__PURE__ */ jsxs33("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsx51(FieldDescription, { description: schema.description, canReset: hasOverride, onReset: () => onClear(path) }),
         /* @__PURE__ */ jsx51(
           InputField6,
@@ -10504,7 +10703,7 @@ function DescriptorPrimitiveField({ schema, value, hasOverride, onSet, onClear,
       ] });
     }
     case "number":
-      return /* @__PURE__ */ jsxs34("div", { className: "space-y-2", children: [
+      return /* @__PURE__ */ jsxs33("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsx51(FieldDescription, { description: schema.description, canReset: hasOverride, onReset: () => onClear(path) }),
         /* @__PURE__ */ jsx51(
           InputField6,
@@ -10525,7 +10724,7 @@ function DescriptorPrimitiveField({ schema, value, hasOverride, onSet, onClear,
         )
       ] });
     case "boolean":
-      return /* @__PURE__ */ jsxs34("div", { className: "space-y-2", children: [
+      return /* @__PURE__ */ jsxs33("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsx51(FieldDescription, { description: schema.description, canReset: hasOverride, onReset: () => onClear(path) }),
         /* @__PURE__ */ jsx51(
           InputField6,
@@ -10543,7 +10742,7 @@ function DescriptorPrimitiveField({ schema, value, hasOverride, onSet, onClear,
         value: item.value,
         description: item.description
       }));
-      return /* @__PURE__ */ jsxs34("div", { className: "space-y-2", children: [
+      return /* @__PURE__ */ jsxs33("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsx51(FieldDescription, { description: schema.description, canReset: hasOverride, onReset: () => onClear(path) }),
         /* @__PURE__ */ jsx51(
           InputField6,
@@ -10612,15 +10811,15 @@ function DescriptorObjectField({ schema, value, hasOverride, onSet, onClear, pat
     setActiveShapes((current) => ({ ...current, [nextKey]: draftShape }));
     setDraftKey("");
   };
-  return /* @__PURE__ */ jsx51("div", { className: "rounded-xl border border-slate-200/80 p-3 dark:border-slate-800", children: /* @__PURE__ */ jsxs34("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxs34("div", { className: "flex items-start justify-between gap-3", children: [
-      /* @__PURE__ */ jsxs34("div", { children: [
+  return /* @__PURE__ */ jsx51("div", { className: "rounded-xl border border-slate-200/80 p-3 dark:border-slate-800", children: /* @__PURE__ */ jsxs33("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs33("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs33("div", { children: [
         /* @__PURE__ */ jsx51("h4", { className: "text-sm font-semibold text-slate-900 dark:text-slate-100", children: schema.label }),
         /* @__PURE__ */ jsx51("p", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: schema.description })
       ] }),
       allowClear && hasOverride ? /* @__PURE__ */ jsx51(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 px-2 text-xs", onClick: () => onClear(path), children: "Reset" }) : null
     ] }),
-    /* @__PURE__ */ jsxs34("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs33("div", { className: "space-y-4", children: [
       orderedEntries.map(([key, childSchema]) => /* @__PURE__ */ jsx51(
         DescriptorNodeField,
         {
@@ -10637,8 +10836,8 @@ function DescriptorObjectField({ schema, value, hasOverride, onSet, onClear, pat
         const shapeKey = activeShapes[key] ?? inferShapeKey(schema.shape, objectValue[key]);
         const shapeSchema = (shapeKey && schema.shape?.[shapeKey]) ?? shapeEntries[0]?.[1];
         if (!shapeSchema) return null;
-        return /* @__PURE__ */ jsxs34("div", { className: "space-y-3 rounded-lg border border-dashed border-slate-200 p-3 dark:border-slate-700", children: [
-          /* @__PURE__ */ jsxs34("div", { className: "grid gap-3 md:grid-cols-[minmax(0,1fr)_180px_auto]", children: [
+        return /* @__PURE__ */ jsxs33("div", { className: "space-y-3 rounded-lg border border-dashed border-slate-200 p-3 dark:border-slate-700", children: [
+          /* @__PURE__ */ jsxs33("div", { className: "grid gap-3 md:grid-cols-[minmax(0,1fr)_180px_auto]", children: [
             /* @__PURE__ */ jsx51(
               InputField6,
               {
@@ -10670,7 +10869,7 @@ function DescriptorObjectField({ schema, value, hasOverride, onSet, onClear, pat
                   });
                 }
               }
-            ) : /* @__PURE__ */ jsxs34("div", { className: "flex items-end text-xs text-slate-500 dark:text-slate-400", children: [
+            ) : /* @__PURE__ */ jsxs33("div", { className: "flex items-end text-xs text-slate-500 dark:text-slate-400", children: [
               "Shape: ",
               shapeKey ?? shapeEntries[0]?.[0] ?? "Custom"
             ] }),
@@ -10704,7 +10903,7 @@ function DescriptorObjectField({ schema, value, hasOverride, onSet, onClear, pat
           )
         ] }, key);
       }),
-      schema.editable && shapeEntries.length ? /* @__PURE__ */ jsxs34("div", { className: "grid gap-3 rounded-lg border border-dashed border-slate-200 p-3 md:grid-cols-[minmax(0,1fr)_180px_auto] dark:border-slate-700", children: [
+      schema.editable && shapeEntries.length ? /* @__PURE__ */ jsxs33("div", { className: "grid gap-3 rounded-lg border border-dashed border-slate-200 p-3 md:grid-cols-[minmax(0,1fr)_180px_auto] dark:border-slate-700", children: [
         /* @__PURE__ */ jsx51(
           InputField6,
           {
@@ -10752,15 +10951,15 @@ function DescriptorArrayField({ schema, value, hasOverride, onSet, onClear, path
       setActiveShapes((current) => ({ ...current, [nextIndex]: draftShape }));
     }
   };
-  return /* @__PURE__ */ jsx51("div", { className: "rounded-xl border border-slate-200/80 p-3 dark:border-slate-800", children: /* @__PURE__ */ jsxs34("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxs34("div", { className: "flex items-start justify-between gap-3", children: [
-      /* @__PURE__ */ jsxs34("div", { children: [
+  return /* @__PURE__ */ jsx51("div", { className: "rounded-xl border border-slate-200/80 p-3 dark:border-slate-800", children: /* @__PURE__ */ jsxs33("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs33("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs33("div", { children: [
         /* @__PURE__ */ jsx51("h4", { className: "text-sm font-semibold text-slate-900 dark:text-slate-100", children: schema.label }),
         /* @__PURE__ */ jsx51("p", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: schema.description })
       ] }),
       allowClear && hasOverride ? /* @__PURE__ */ jsx51(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 px-2 text-xs", onClick: () => onClear(path), children: "Reset" }) : null
     ] }),
-    /* @__PURE__ */ jsxs34("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs33("div", { className: "space-y-4", children: [
       schema.items ? schema.items.map((childSchema, index) => /* @__PURE__ */ jsx51(
         DescriptorNodeField,
         {
@@ -10777,9 +10976,9 @@ function DescriptorArrayField({ schema, value, hasOverride, onSet, onClear, path
         const shapeKey = activeShapes[index] ?? inferShapeKey(schema.shape, item);
         const itemSchema = schema.item ?? (shapeKey ? schema.shape?.[shapeKey] : void 0) ?? shapeEntries[0]?.[1];
         if (!itemSchema) return null;
-        return /* @__PURE__ */ jsxs34("div", { className: "space-y-3 rounded-lg border border-dashed border-slate-200 p-3 dark:border-slate-700", children: [
-          /* @__PURE__ */ jsxs34("div", { className: "grid gap-3 md:grid-cols-[minmax(0,1fr)_180px_auto]", children: [
-            /* @__PURE__ */ jsxs34("div", { className: "flex items-end text-xs text-slate-500 dark:text-slate-400", children: [
+        return /* @__PURE__ */ jsxs33("div", { className: "space-y-3 rounded-lg border border-dashed border-slate-200 p-3 dark:border-slate-700", children: [
+          /* @__PURE__ */ jsxs33("div", { className: "grid gap-3 md:grid-cols-[minmax(0,1fr)_180px_auto]", children: [
+            /* @__PURE__ */ jsxs33("div", { className: "flex items-end text-xs text-slate-500 dark:text-slate-400", children: [
               formatLabel(schema.label),
               " item ",
               index + 1
@@ -10833,8 +11032,8 @@ function DescriptorArrayField({ schema, value, hasOverride, onSet, onClear, path
           )
         ] }, `${path.join(".")}:${index}`);
       }),
-      !schema.items && (schema.editable ?? true) ? /* @__PURE__ */ jsxs34("div", { className: "grid gap-3 rounded-lg border border-dashed border-slate-200 p-3 md:grid-cols-[minmax(0,1fr)_180px_auto] dark:border-slate-700", children: [
-        /* @__PURE__ */ jsxs34("div", { className: "flex items-end text-xs text-slate-500 dark:text-slate-400", children: [
+      !schema.items && (schema.editable ?? true) ? /* @__PURE__ */ jsxs33("div", { className: "grid gap-3 rounded-lg border border-dashed border-slate-200 p-3 md:grid-cols-[minmax(0,1fr)_180px_auto] dark:border-slate-700", children: [
+        /* @__PURE__ */ jsxs33("div", { className: "flex items-end text-xs text-slate-500 dark:text-slate-400", children: [
           "Add another ",
           schema.label.toLowerCase()
         ] }),
@@ -10909,7 +11108,7 @@ import { InputField as InputField7 } from "@timeax/form-palette";
 import { useMemo as useMemo25 } from "react";
 import { BsPlus as BsPlus2 } from "react-icons/bs";
 import { MdDeleteOutline } from "react-icons/md";
-import { jsx as jsx52, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs34 } from "react/jsx-runtime";
 var ruleOptions = [
   { label: "Value", value: "value" },
   { label: "Length", value: "length" },
@@ -10969,10 +11168,10 @@ function QuantitySection({ node }) {
   const hasQuantityDefault = capabilities.quantity.canEditDefault && quantityDefault !== void 0;
   const canAddRule = capabilities.quantity.canEditRule && !hasFieldRule;
   const canAddDefault = capabilities.quantity.canEditDefault && !hasQuantityDefault;
-  return /* @__PURE__ */ jsxs35(Section, { children: [
-    /* @__PURE__ */ jsxs35(Section.Header, { children: [
+  return /* @__PURE__ */ jsxs34(Section, { children: [
+    /* @__PURE__ */ jsxs34(Section.Header, { children: [
       /* @__PURE__ */ jsx52(Section.Title, { children: "Quantity" }),
-      canAddRule || canAddDefault || hasFieldRule || hasQuantityDefault ? /* @__PURE__ */ jsxs35(Section.Actions, { children: [
+      canAddRule || canAddDefault || hasFieldRule || hasQuantityDefault ? /* @__PURE__ */ jsxs34(Section.Actions, { children: [
         canAddRule ? /* @__PURE__ */ jsx52(
           SectionActionButton,
           {
@@ -11018,9 +11217,9 @@ function QuantitySection({ node }) {
         ) : null
       ] }) : null
     ] }),
-    /* @__PURE__ */ jsx52(Section.Content, { children: node.kind === "field" ? /* @__PURE__ */ jsxs35("div", { className: "space-y-4", children: [
-      hasFieldRule ? /* @__PURE__ */ jsxs35("div", { className: "space-y-3 rounded-xl border border-slate-200 p-3 dark:border-slate-800", children: [
-        /* @__PURE__ */ jsxs35("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx52(Section.Content, { children: node.kind === "field" ? /* @__PURE__ */ jsxs34("div", { className: "space-y-4", children: [
+      hasFieldRule ? /* @__PURE__ */ jsxs34("div", { className: "space-y-3 rounded-xl border border-slate-200 p-3 dark:border-slate-800", children: [
+        /* @__PURE__ */ jsxs34("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsx52("div", { className: "grid grid-cols-3 gap-2 rounded-lg bg-slate-100 p-1 dark:bg-slate-900", children: ruleOptions.map((option) => {
             const active = fieldRule?.valueBy === option.value;
             return /* @__PURE__ */ jsx52(
@@ -11049,7 +11248,7 @@ function QuantitySection({ node }) {
             onChange: (e) => updateRule({ code: String(e.value ?? "") })
           }
         ) : null,
-        /* @__PURE__ */ jsxs35("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs34("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
           /* @__PURE__ */ jsx52(
             InputField7,
             {
@@ -11102,7 +11301,7 @@ function QuantitySection({ node }) {
           )
         ] })
       ] }) : null,
-      capabilities.quantity.canEditDefault ? hasQuantityDefault ? /* @__PURE__ */ jsxs35("div", { className: "space-y-2 rounded-xl border border-slate-200 p-3 dark:border-slate-800", children: [
+      capabilities.quantity.canEditDefault ? hasQuantityDefault ? /* @__PURE__ */ jsxs34("div", { className: "space-y-2 rounded-xl border border-slate-200 p-3 dark:border-slate-800", children: [
         /* @__PURE__ */ jsx52(
           InputField7,
           {
@@ -11115,7 +11314,7 @@ function QuantitySection({ node }) {
         ),
         capabilities.quantity.defaultHelp ? /* @__PURE__ */ jsx52("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: capabilities.quantity.defaultHelp }) : null
       ] }) : null : null
-    ] }) : hasQuantityDefault ? /* @__PURE__ */ jsxs35("div", { className: "space-y-2", children: [
+    ] }) : hasQuantityDefault ? /* @__PURE__ */ jsxs34("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsx52(
         InputField7,
         {
@@ -11137,7 +11336,7 @@ import { useCanvas as useCanvas9 } from "@timeax/digital-service-engine/workspac
 import { InputField as InputField8 } from "@timeax/form-palette";
 import { BsPencil, BsPlus as BsPlus3 } from "react-icons/bs";
 import { MdDeleteOutline as MdDeleteOutline2 } from "react-icons/md";
-import { Fragment as Fragment10, jsx as jsx53, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx53, jsxs as jsxs35 } from "react/jsx-runtime";
 var utilityModes = [
   { label: "Flat", value: "flat" },
   { label: "Per quantity", value: "per_quantity" },
@@ -11189,10 +11388,10 @@ function UtilitySection({ node }) {
       canvas.api.editor.updateOption(node.id, { meta: nextMeta });
     });
   };
-  return /* @__PURE__ */ jsxs36(Section, { children: [
-    /* @__PURE__ */ jsxs36(Section.Header, { children: [
+  return /* @__PURE__ */ jsxs35(Section, { children: [
+    /* @__PURE__ */ jsxs35(Section.Header, { children: [
       /* @__PURE__ */ jsx53(Section.Title, { children: "Utility" }),
-      /* @__PURE__ */ jsxs36(Section.Actions, { children: [
+      /* @__PURE__ */ jsxs35(Section.Actions, { children: [
         !hasStoredUtility && !isActiveUtility ? /* @__PURE__ */ jsx53(
           SectionActionButton,
           {
@@ -11225,10 +11424,10 @@ function UtilitySection({ node }) {
         ) : null
       ] })
     ] }),
-    /* @__PURE__ */ jsx53(Section.Content, { children: hasUtilityConfiguration ? /* @__PURE__ */ jsxs36("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx53(Section.Content, { children: hasUtilityConfiguration ? /* @__PURE__ */ jsxs35("div", { className: "space-y-3", children: [
       !hasStoredUtility ? /* @__PURE__ */ jsx53("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: "This node is marked as utility-priced, but its utility marker is missing. Fill in the values below to repair it." }) : null,
       hasStoredUtility && !isActiveUtility ? /* @__PURE__ */ jsx53("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: "This node still has utility marker values stored, but its pricing role is base. Activate utility to apply these charges, or clear the marker." }) : null,
-      /* @__PURE__ */ jsxs36(Fragment10, { children: [
+      /* @__PURE__ */ jsxs35(Fragment10, { children: [
         /* @__PURE__ */ jsx53(
           InputField8,
           {
@@ -11307,7 +11506,7 @@ import { InputField as InputField9 } from "@timeax/form-palette";
 import { useMemo as useMemo26 } from "react";
 import { BsPlus as BsPlus4 } from "react-icons/bs";
 import { MdDeleteOutline as MdDeleteOutline3 } from "react-icons/md";
-import { jsx as jsx54, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs36 } from "react/jsx-runtime";
 var opOptions = [
   { label: "Equals", value: "eq" },
   { label: "Not equal", value: "neq" },
@@ -11380,7 +11579,7 @@ function TypedScalarEditor({
   onChange
 }) {
   const scalarType = inferScalarType(value);
-  return /* @__PURE__ */ jsx54("div", { className: "space-y-3 rounded-lg border border-slate-200/80 p-3 dark:border-slate-800", children: /* @__PURE__ */ jsxs37("div", { className: "grid gap-3 md:grid-cols-[160px_minmax(0,1fr)]", children: [
+  return /* @__PURE__ */ jsx54("div", { className: "space-y-3 rounded-lg border border-slate-200/80 p-3 dark:border-slate-800", children: /* @__PURE__ */ jsxs36("div", { className: "grid gap-3 md:grid-cols-[160px_minmax(0,1fr)]", children: [
     /* @__PURE__ */ jsx54(
       InputField9,
       {
@@ -11426,17 +11625,17 @@ function TypedScalarListEditor({
   onChange
 }) {
   const items = (values ?? []).filter((value) => ["string", "number", "boolean"].includes(typeof value));
-  return /* @__PURE__ */ jsxs37("div", { className: "space-y-3 rounded-lg border border-slate-200/80 p-3 dark:border-slate-800", children: [
-    /* @__PURE__ */ jsxs37("div", { className: "flex items-center justify-between gap-3", children: [
-      /* @__PURE__ */ jsxs37("div", { children: [
+  return /* @__PURE__ */ jsxs36("div", { className: "space-y-3 rounded-lg border border-slate-200/80 p-3 dark:border-slate-800", children: [
+    /* @__PURE__ */ jsxs36("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs36("div", { children: [
         /* @__PURE__ */ jsx54("h4", { className: "text-sm font-semibold text-slate-900 dark:text-slate-100", children: "Allowed values" }),
         /* @__PURE__ */ jsx54("p", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: "Rule values are checked in the order shown here." })
       ] }),
       /* @__PURE__ */ jsx54(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onChange([...items, ""]), children: "Add value" })
     ] }),
-    items.length ? /* @__PURE__ */ jsx54("div", { className: "space-y-3", children: items.map((item, index) => /* @__PURE__ */ jsxs37("div", { className: "space-y-3 rounded-lg border border-dashed border-slate-200 p-3 dark:border-slate-700", children: [
-      /* @__PURE__ */ jsxs37("div", { className: "flex items-center justify-between gap-3", children: [
-        /* @__PURE__ */ jsxs37("div", { className: "text-xs font-medium tracking-[0.16em] text-slate-500 uppercase dark:text-slate-400", children: [
+    items.length ? /* @__PURE__ */ jsx54("div", { className: "space-y-3", children: items.map((item, index) => /* @__PURE__ */ jsxs36("div", { className: "space-y-3 rounded-lg border border-dashed border-slate-200 p-3 dark:border-slate-700", children: [
+      /* @__PURE__ */ jsxs36("div", { className: "flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs36("div", { className: "text-xs font-medium tracking-[0.16em] text-slate-500 uppercase dark:text-slate-400", children: [
           "Value ",
           index + 1
         ] }),
@@ -11470,10 +11669,10 @@ function ValidationRuleCard({
   onRemove
 }) {
   const valueBy = rule.valueBy ?? "value";
-  return /* @__PURE__ */ jsxs37("div", { className: "space-y-4 rounded-xl border border-slate-200 p-4 dark:border-slate-800", children: [
-    /* @__PURE__ */ jsxs37("div", { className: "flex items-start justify-between gap-3", children: [
-      /* @__PURE__ */ jsxs37("div", { children: [
-        /* @__PURE__ */ jsxs37("div", { className: "text-xs font-medium tracking-[0.16em] text-slate-500 uppercase dark:text-slate-400", children: [
+  return /* @__PURE__ */ jsxs36("div", { className: "space-y-4 rounded-xl border border-slate-200 p-4 dark:border-slate-800", children: [
+    /* @__PURE__ */ jsxs36("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs36("div", { children: [
+        /* @__PURE__ */ jsxs36("div", { className: "text-xs font-medium tracking-[0.16em] text-slate-500 uppercase dark:text-slate-400", children: [
           "Rule ",
           index + 1
         ] }),
@@ -11490,7 +11689,7 @@ function ValidationRuleCard({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs37("div", { className: "grid gap-3 md:grid-cols-2", children: [
+    /* @__PURE__ */ jsxs36("div", { className: "grid gap-3 md:grid-cols-2", children: [
       /* @__PURE__ */ jsx54(
         InputField9,
         {
@@ -11550,7 +11749,7 @@ function ValidationRuleCard({
         )
       }
     ) : null,
-    rule.op === "between" ? /* @__PURE__ */ jsxs37("div", { className: "grid gap-3 md:grid-cols-2", children: [
+    rule.op === "between" ? /* @__PURE__ */ jsxs36("div", { className: "grid gap-3 md:grid-cols-2", children: [
       /* @__PURE__ */ jsx54(
         InputField9,
         {
@@ -11594,7 +11793,7 @@ function ValidationRuleCard({
         )
       }
     ) : null,
-    rule.op === "match" ? /* @__PURE__ */ jsxs37("div", { className: "grid gap-3 md:grid-cols-2", children: [
+    rule.op === "match" ? /* @__PURE__ */ jsxs36("div", { className: "grid gap-3 md:grid-cols-2", children: [
       /* @__PURE__ */ jsx54(
         InputField9,
         {
@@ -11668,10 +11867,10 @@ function ValidationSection({ node }) {
   const removeRuleAt = (index) => {
     persistRules(rules.filter((_, ruleIndex) => ruleIndex !== index));
   };
-  return /* @__PURE__ */ jsxs37(Section, { children: [
-    /* @__PURE__ */ jsxs37(Section.Header, { children: [
+  return /* @__PURE__ */ jsxs36(Section, { children: [
+    /* @__PURE__ */ jsxs36(Section.Header, { children: [
       /* @__PURE__ */ jsx54(Section.Title, { children: "Validation" }),
-      /* @__PURE__ */ jsxs37(Section.Actions, { children: [
+      /* @__PURE__ */ jsxs36(Section.Actions, { children: [
         !rules.length ? /* @__PURE__ */ jsx54(SectionActionButton, { icon: /* @__PURE__ */ jsx54(BsPlus4, {}), iconOnly: true, tooltip: "Add validation", "aria-label": "Add validation", onClick: addRule }) : null,
         rules.length ? /* @__PURE__ */ jsx54(
           SectionActionButton,
@@ -11685,7 +11884,7 @@ function ValidationSection({ node }) {
         ) : null
       ] })
     ] }),
-    /* @__PURE__ */ jsx54(Section.Content, { children: rules.length ? /* @__PURE__ */ jsxs37("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx54(Section.Content, { children: rules.length ? /* @__PURE__ */ jsxs36("div", { className: "space-y-4", children: [
       rules.map((rule, index) => /* @__PURE__ */ jsx54(
         ValidationRuleCard,
         {
@@ -11697,7 +11896,7 @@ function ValidationSection({ node }) {
         `${index}-${rule.op}-${rule.valueBy ?? "value"}`
       )),
       /* @__PURE__ */ jsx54(Button, { type: "button", variant: "outline", size: "sm", onClick: addRule, children: "Add another rule" })
-    ] }) : /* @__PURE__ */ jsxs37("div", { className: "space-y-3 rounded-xl border border-dashed border-slate-200 p-4 dark:border-slate-800", children: [
+    ] }) : /* @__PURE__ */ jsxs36("div", { className: "space-y-3 rounded-xl border border-dashed border-slate-200 p-4 dark:border-slate-800", children: [
       /* @__PURE__ */ jsx54("p", { className: "text-sm font-medium text-slate-900 dark:text-slate-100", children: "No validation rules yet" }),
       /* @__PURE__ */ jsx54("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: "Add ordered rules to validate this field value, its length, or an eval-derived subject. The first failing rule supplies the field message." }),
       /* @__PURE__ */ jsx54(Button, { type: "button", variant: "outline", size: "sm", onClick: addRule, children: "Add validation" })
@@ -11715,12 +11914,12 @@ import { useMemo as useMemo27, useState as useState27 } from "react";
 import { InputField as InputField10 } from "@timeax/form-palette";
 import { useState as useState26 } from "react";
 import { BsPlus as BsPlus5 } from "react-icons/bs";
-import { jsx as jsx55, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs37 } from "react/jsx-runtime";
 function AddIncludesPopover({ open, onOpenChange, onSelect, options }) {
   const [value, setValue] = useState26();
-  return /* @__PURE__ */ jsxs38(Popover, { open, onOpenChange, children: [
+  return /* @__PURE__ */ jsxs37(Popover, { open, onOpenChange, children: [
     /* @__PURE__ */ jsx55(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx55(SectionActionTriggerButton, { icon: /* @__PURE__ */ jsx55(BsPlus5, {}), children: "Add" }) }),
-    /* @__PURE__ */ jsx55(PopoverContent, { children: /* @__PURE__ */ jsxs38("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx55(PopoverContent, { children: /* @__PURE__ */ jsxs37("div", { className: "flex flex-col gap-2", children: [
       /* @__PURE__ */ jsx55(
         InputField10,
         {
@@ -11751,7 +11950,7 @@ function AddIncludesPopover({ open, onOpenChange, onSelect, options }) {
 }
 
 // src/panels/right/partials/properties/components/Union.tsx
-import { jsx as jsx56, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs38 } from "react/jsx-runtime";
 function IncExcludeSection({ node, mode, capability }) {
   const canvas = useCanvas11();
   const [open, setOpen] = useState27(false);
@@ -11787,8 +11986,8 @@ function IncExcludeSection({ node, mode, capability }) {
     }));
   }, [canvas.props.fields, node]);
   const name = mode.slice(0, -1);
-  return /* @__PURE__ */ jsxs39(Section, { children: [
-    /* @__PURE__ */ jsxs39(Section.Header, { children: [
+  return /* @__PURE__ */ jsxs38(Section, { children: [
+    /* @__PURE__ */ jsxs38(Section.Header, { children: [
       /* @__PURE__ */ jsx56(Section.Title, { children: mode == "includes" ? "Includes" : "Excludes" }),
       /* @__PURE__ */ jsx56(Section.Actions, { children: canEdit ? /* @__PURE__ */ jsx56(
         AddIncludesPopover,
@@ -11800,7 +11999,7 @@ function IncExcludeSection({ node, mode, capability }) {
         }
       ) : null })
     ] }),
-    /* @__PURE__ */ jsxs39(Section.Content, { children: [
+    /* @__PURE__ */ jsxs38(Section.Content, { children: [
       helperMessage ? /* @__PURE__ */ jsx56("p", { className: "mb-3 text-xs text-slate-500 dark:text-slate-400", children: helperMessage }) : null,
       /* @__PURE__ */ jsx56(RenderIf, { data: (node[mode]?.size ?? 0) > 0, emptyMessage: "None", children: /* @__PURE__ */ jsx56(IncludesList, { children: Array.from(node[mode] ?? []).map((id) => {
         const field = fields[id];
@@ -11832,7 +12031,7 @@ function IncExcludeSection({ node, mode, capability }) {
 }
 
 // src/panels/right/partials/properties/field-properties.tsx
-import { Fragment as Fragment11, jsx as jsx57, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx57, jsxs as jsxs39 } from "react/jsx-runtime";
 var getVariant = (node) => {
   const variant = node.raw.meta?.variant;
   return typeof variant === "string" && variant.trim() ? variant.trim() : void 0;
@@ -11924,12 +12123,12 @@ function FieldProperties({ className, node }) {
     const nextVariant = String(rawVariant ?? "default");
     applyDescriptorTransition(currentType, nextVariant === "default" ? void 0 : nextVariant);
   };
-  return /* @__PURE__ */ jsx57("div", { className, children: /* @__PURE__ */ jsxs40("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs40(Section, { children: [
+  return /* @__PURE__ */ jsx57("div", { className, children: /* @__PURE__ */ jsxs39("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs39(Section, { children: [
       /* @__PURE__ */ jsx57(Section.Header, { children: /* @__PURE__ */ jsx57(Section.Title, { children: "Field identity" }) }),
-      /* @__PURE__ */ jsxs40(Section.Content, { children: [
+      /* @__PURE__ */ jsxs39(Section.Content, { children: [
         /* @__PURE__ */ jsx57("p", { className: "mb-3 text-xs text-slate-500 dark:text-slate-400", children: "Core field metadata used by the service engine and preview form." }),
-        /* @__PURE__ */ jsxs40("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs39("div", { className: "space-y-3", children: [
           /* @__PURE__ */ jsx57(
             InputField11,
             {
@@ -11985,11 +12184,11 @@ function FieldProperties({ className, node }) {
       ] })
     ] }),
     /* @__PURE__ */ jsx57(Separator2, {}),
-    /* @__PURE__ */ jsxs40(Section, { children: [
+    /* @__PURE__ */ jsxs39(Section, { children: [
       /* @__PURE__ */ jsx57(Section.Header, { children: /* @__PURE__ */ jsx57(Section.Title, { children: "Defaults and help" }) }),
-      /* @__PURE__ */ jsxs40(Section.Content, { children: [
+      /* @__PURE__ */ jsxs39(Section.Content, { children: [
         /* @__PURE__ */ jsx57("p", { className: "mb-3 text-xs text-slate-500 dark:text-slate-400", children: "Preview-oriented defaults passed to the form palette." }),
-        /* @__PURE__ */ jsxs40("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs39("div", { className: "space-y-3", children: [
           /* @__PURE__ */ jsx57(
             InputField11,
             {
@@ -12014,11 +12213,11 @@ function FieldProperties({ className, node }) {
       ] })
     ] }),
     /* @__PURE__ */ jsx57(Separator2, {}),
-    /* @__PURE__ */ jsxs40(Section, { defaultOpen: false, children: [
+    /* @__PURE__ */ jsxs39(Section, { defaultOpen: false, children: [
       /* @__PURE__ */ jsx57(Section.Header, { children: /* @__PURE__ */ jsx57(Section.Title, { children: "Input appearance and behavior" }) }),
-      /* @__PURE__ */ jsxs40(Section.Content, { children: [
+      /* @__PURE__ */ jsxs39(Section.Content, { children: [
         /* @__PURE__ */ jsx57("p", { className: "mb-3 text-xs text-slate-500 dark:text-slate-400", children: "Descriptor-owned runtime props. The schema comes from the input registry and overrides are stored in field defaults." }),
-        descriptor ? /* @__PURE__ */ jsx57(DescriptorSettings, { schema: descriptorUi, defaults, onChange: updateDefaults }) : /* @__PURE__ */ jsxs40("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: [
+        descriptor ? /* @__PURE__ */ jsx57(DescriptorSettings, { schema: descriptorUi, defaults, onChange: updateDefaults }) : /* @__PURE__ */ jsxs39("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: [
           "No input descriptor was found for this field type",
           currentVariant ? ` / ${currentVariant}` : "",
           "."
@@ -12032,9 +12231,9 @@ function FieldProperties({ className, node }) {
     /* @__PURE__ */ jsx57(Separator2, {}),
     /* @__PURE__ */ jsx57(utility_section_default, { node }),
     /* @__PURE__ */ jsx57(Separator2, {}),
-    /* @__PURE__ */ jsxs40(Section, { children: [
+    /* @__PURE__ */ jsxs39(Section, { children: [
       /* @__PURE__ */ jsx57(Section.Header, { children: /* @__PURE__ */ jsx57(Section.Title, { children: "Binding summary" }) }),
-      /* @__PURE__ */ jsxs40(Section.Content, { children: [
+      /* @__PURE__ */ jsxs39(Section.Content, { children: [
         /* @__PURE__ */ jsx57("p", { className: "mb-3 text-xs text-slate-500 dark:text-slate-400", children: "Where this field appears and how it behaves in the active branch." }),
         /* @__PURE__ */ jsx57(
           PropertyList,
@@ -12049,12 +12248,12 @@ function FieldProperties({ className, node }) {
       ] })
     ] }),
     /* @__PURE__ */ jsx57(Separator2, {}),
-    options.length ? /* @__PURE__ */ jsxs40(Fragment11, { children: [
-      /* @__PURE__ */ jsxs40(Section, { children: [
+    options.length ? /* @__PURE__ */ jsxs39(Fragment11, { children: [
+      /* @__PURE__ */ jsxs39(Section, { children: [
         /* @__PURE__ */ jsx57(Section.Header, { children: /* @__PURE__ */ jsx57(Section.Title, { children: "Options" }) }),
-        /* @__PURE__ */ jsxs40(Section.Content, { children: [
+        /* @__PURE__ */ jsxs39(Section.Content, { children: [
           /* @__PURE__ */ jsx57("p", { className: "mb-3 text-xs text-slate-500 dark:text-slate-400", children: "Current option labels available on this field." }),
-          /* @__PURE__ */ jsx57("div", { className: "space-y-2", children: options.map((option) => /* @__PURE__ */ jsxs40(
+          /* @__PURE__ */ jsx57("div", { className: "space-y-2", children: options.map((option) => /* @__PURE__ */ jsxs39(
             "div",
             {
               className: "flex items-center justify-between rounded-xl bg-slate-50 px-3 py-2 text-sm dark:bg-slate-900",
@@ -12077,11 +12276,11 @@ function FieldProperties({ className, node }) {
       ] }),
       /* @__PURE__ */ jsx57(Separator2, {})
     ] }) : null,
-    capabilities.triggerMappings.canEdit ? /* @__PURE__ */ jsxs40(Fragment11, { children: [
+    capabilities.triggerMappings.canEdit ? /* @__PURE__ */ jsxs39(Fragment11, { children: [
       /* @__PURE__ */ jsx57(IncExcludeSection, { node, mode: "includes", capability: capabilities.triggerMappings }),
       /* @__PURE__ */ jsx57(Separator2, {}),
       /* @__PURE__ */ jsx57(IncExcludeSection, { node, mode: "excludes", capability: capabilities.triggerMappings })
-    ] }) : /* @__PURE__ */ jsxs40(Section, { children: [
+    ] }) : /* @__PURE__ */ jsxs39(Section, { children: [
       /* @__PURE__ */ jsx57(Section.Header, { children: /* @__PURE__ */ jsx57(Section.Title, { children: "Trigger mappings" }) }),
       /* @__PURE__ */ jsx57(Section.Content, { children: /* @__PURE__ */ jsx57("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: capabilities.triggerMappings.message }) })
     ] }),
@@ -12094,18 +12293,18 @@ var field_properties_default = FieldProperties;
 // src/panels/right/partials/properties/option-properties.tsx
 import { useCanvas as useCanvas13 } from "@timeax/digital-service-engine/workspace";
 import { InputField as InputField12 } from "@timeax/form-palette";
-import { jsx as jsx58, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs40 } from "react/jsx-runtime";
 function OptionProperties({ className, node }) {
   const canvas = useCanvas13();
   const capabilities = getOptionPropertyCapabilities(node);
   const field = node.field();
   const options = field.raw.options ?? [];
-  return /* @__PURE__ */ jsx58("div", { className, children: /* @__PURE__ */ jsxs41("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs41(Section, { children: [
+  return /* @__PURE__ */ jsx58("div", { className, children: /* @__PURE__ */ jsxs40("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs40(Section, { children: [
       /* @__PURE__ */ jsx58(Section.Header, { children: /* @__PURE__ */ jsx58(Section.Title, { children: "Option identity" }) }),
-      /* @__PURE__ */ jsxs41(Section.Content, { children: [
+      /* @__PURE__ */ jsxs40(Section.Content, { children: [
         /* @__PURE__ */ jsx58("p", { className: "mb-3 text-xs text-slate-500 dark:text-slate-400", children: "Edit the currently focused option node." }),
-        /* @__PURE__ */ jsxs41("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs40("div", { className: "space-y-3", children: [
           /* @__PURE__ */ jsx58(
             InputField12,
             {
@@ -12143,9 +12342,9 @@ function OptionProperties({ className, node }) {
     /* @__PURE__ */ jsx58(Separator2, {}),
     /* @__PURE__ */ jsx58(utility_section_default, { node }),
     /* @__PURE__ */ jsx58(Separator2, {}),
-    /* @__PURE__ */ jsxs41(Section, { children: [
+    /* @__PURE__ */ jsxs40(Section, { children: [
       /* @__PURE__ */ jsx58(Section.Header, { children: /* @__PURE__ */ jsx58(Section.Title, { children: "Option mapping" }) }),
-      /* @__PURE__ */ jsxs41(Section.Content, { children: [
+      /* @__PURE__ */ jsxs40(Section.Content, { children: [
         /* @__PURE__ */ jsx58("p", { className: "mb-3 text-xs text-slate-500 dark:text-slate-400", children: "How this option participates in visible field mappings." }),
         /* @__PURE__ */ jsx58(
           PropertyList,
@@ -12184,11 +12383,11 @@ import { TiDelete } from "react-icons/ti";
 import { Form, InputField as InputField13 } from "@timeax/form-palette";
 import "react";
 import { BsPlus as BsPlus6 } from "react-icons/bs";
-import { jsx as jsx59, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs41 } from "react/jsx-runtime";
 function AddConstraintsPopover({ open, onOpenChange, constraints, allConstraints, onSubmit }) {
-  return /* @__PURE__ */ jsxs42(Popover, { open, onOpenChange, children: [
+  return /* @__PURE__ */ jsxs41(Popover, { open, onOpenChange, children: [
     /* @__PURE__ */ jsx59(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx59(SectionActionTriggerButton, { icon: /* @__PURE__ */ jsx59(BsPlus6, {}), children: "Add" }) }),
-    /* @__PURE__ */ jsx59(PopoverContent, { children: /* @__PURE__ */ jsx59(RenderIf, { data: allConstraints, children: /* @__PURE__ */ jsxs42(
+    /* @__PURE__ */ jsx59(PopoverContent, { children: /* @__PURE__ */ jsx59(RenderIf, { data: allConstraints, children: /* @__PURE__ */ jsxs41(
       Form,
       {
         wrapped: true,
@@ -12219,20 +12418,20 @@ function AddConstraintsPopover({ open, onOpenChange, constraints, allConstraints
 
 // src/panels/right/partials/properties/tag/ConstraintOriginPopover.tsx
 import "react";
-import { jsx as jsx60, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs42 } from "react/jsx-runtime";
 function ConstraintOriginPopover({ constraint, onClearSelf, onClearSubtree }) {
-  return /* @__PURE__ */ jsxs43(Popover, { children: [
+  return /* @__PURE__ */ jsxs42(Popover, { children: [
     /* @__PURE__ */ jsx60(PopoverTrigger, { className: "flex items-center gap-1", children: "Owner" }),
-    /* @__PURE__ */ jsx60(PopoverContent, { className: "w-fit p-0", children: /* @__PURE__ */ jsxs43("div", { className: "max-w-[320px] p-3 text-sm", children: [
+    /* @__PURE__ */ jsx60(PopoverContent, { className: "w-fit p-0", children: /* @__PURE__ */ jsxs42("div", { className: "max-w-[320px] p-3 text-sm", children: [
       /* @__PURE__ */ jsx60("div", { className: "font-medium", children: "Clear constraint?" }),
-      /* @__PURE__ */ jsxs43("div", { className: "mt-1 text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs42("div", { className: "mt-1 text-muted-foreground", children: [
         "You're about to clear ",
         /* @__PURE__ */ jsx60("span", { className: "font-medium", children: constraint }),
         " on this tag. Descendants may inherit a different value (or none) after this change."
       ] }),
-      /* @__PURE__ */ jsxs43("div", { className: "mt-3 space-y-2", children: [
+      /* @__PURE__ */ jsxs42("div", { className: "mt-3 space-y-2", children: [
         /* @__PURE__ */ jsx60("div", { className: "text-muted-foreground", children: "Do you want to also clear it for the whole subtree (\xE2\u20AC\u0153shake the tree\xE2\u20AC\x9D)?" }),
-        /* @__PURE__ */ jsxs43("div", { className: "flex items-center justify-end gap-2", children: [
+        /* @__PURE__ */ jsxs42("div", { className: "flex items-center justify-end gap-2", children: [
           /* @__PURE__ */ jsx60(
             "button",
             {
@@ -12260,24 +12459,24 @@ function ConstraintOriginPopover({ constraint, onClearSelf, onClearSubtree }) {
 // src/panels/right/partials/properties/tag/ConstraintOverridePopover.tsx
 import { AlertTriangle } from "lucide-react";
 import "react";
-import { jsx as jsx61, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs43 } from "react/jsx-runtime";
 function ConstraintOverridePopover({ constraint, onClear }) {
-  return /* @__PURE__ */ jsxs44(Popover, { children: [
-    /* @__PURE__ */ jsxs44(PopoverTrigger, { className: "flex items-center gap-1", children: [
+  return /* @__PURE__ */ jsxs43(Popover, { children: [
+    /* @__PURE__ */ jsxs43(PopoverTrigger, { className: "flex items-center gap-1", children: [
       /* @__PURE__ */ jsx61(AlertTriangle, { className: "size-3 text-yellow-400" }),
       "Overridden"
     ] }),
-    /* @__PURE__ */ jsx61(PopoverContent, { className: "w-fit p-0", children: /* @__PURE__ */ jsxs44("div", { className: "max-w-[320px] p-3 text-sm", children: [
+    /* @__PURE__ */ jsx61(PopoverContent, { className: "w-fit p-0", children: /* @__PURE__ */ jsxs43("div", { className: "max-w-[320px] p-3 text-sm", children: [
       /* @__PURE__ */ jsx61("div", { className: "font-medium", children: "Constraint override detected" }),
-      /* @__PURE__ */ jsxs44("div", { className: "mt-1 text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs43("div", { className: "mt-1 text-muted-foreground", children: [
         "This tag tries to set ",
         /* @__PURE__ */ jsx61("span", { className: "font-medium", children: constraint }),
         ", but an ancestor tag already decided it. Overrides don't apply \xE2\u20AC\u201D the ancestor value wins."
       ] }),
-      /* @__PURE__ */ jsxs44("div", { className: "mt-3 space-y-1", children: [
+      /* @__PURE__ */ jsxs43("div", { className: "mt-3 space-y-1", children: [
         /* @__PURE__ */ jsx61("div", { className: "font-medium", children: "How to fix" }),
-        /* @__PURE__ */ jsxs44("ul", { className: "list-disc pl-4 text-muted-foreground", children: [
-          /* @__PURE__ */ jsxs44("li", { children: [
+        /* @__PURE__ */ jsxs43("ul", { className: "list-disc pl-4 text-muted-foreground", children: [
+          /* @__PURE__ */ jsxs43("li", { children: [
             "Click ",
             /* @__PURE__ */ jsx61("span", { className: "font-medium", children: "Origin" }),
             " to jump to the ancestor that set the rule, then make the value match there (or remove it)."
@@ -12299,14 +12498,14 @@ function ConstraintOverridePopover({ constraint, onClear }) {
 }
 
 // src/panels/right/partials/properties/tag/TagConstraintsSection.tsx
-import { Fragment as Fragment12, jsx as jsx62, jsxs as jsxs45 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx62, jsxs as jsxs44 } from "react/jsx-runtime";
 function TagConstraintsSection({ node }) {
   const constraints = Object.keys(node.raw.constraints ?? {});
   const canvas = useCanvas14();
   const [open, setOpen] = useState29(false);
   const allConstraints = useMemo29(() => canvas.api.getConstraints() ?? [], [canvas.props]);
-  return /* @__PURE__ */ jsx62(Fragment12, { children: /* @__PURE__ */ jsxs45(Section, { children: [
-    /* @__PURE__ */ jsxs45(Section.Header, { children: [
+  return /* @__PURE__ */ jsx62(Fragment12, { children: /* @__PURE__ */ jsxs44(Section, { children: [
+    /* @__PURE__ */ jsxs44(Section.Header, { children: [
       /* @__PURE__ */ jsx62(Section.Title, { children: "Constraints" }),
       /* @__PURE__ */ jsx62(Section.Actions, { children: /* @__PURE__ */ jsx62(
         AddConstraintsPopover,
@@ -12401,10 +12600,10 @@ function TagExcludesSection({ node }) {
 }
 
 // src/panels/right/partials/properties/tag.tsx
-import { Fragment as Fragment13, jsx as jsx65, jsxs as jsxs46 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx65, jsxs as jsxs45 } from "react/jsx-runtime";
 function TagProperties({ node }) {
   const capabilities = getTagPropertyCapabilities();
-  return /* @__PURE__ */ jsxs46(Fragment13, { children: [
+  return /* @__PURE__ */ jsxs45(Fragment13, { children: [
     /* @__PURE__ */ jsx65(TagConstraintsSection, { node }),
     /* @__PURE__ */ jsx65(Separator2, {}),
     /* @__PURE__ */ jsx65(quantity_section_default, { node }),
@@ -12423,7 +12622,7 @@ import { InputField as InputField15 } from "@timeax/form-palette";
 import { useMemo as useMemo30, useState as useState30 } from "react";
 import { AiOutlineLoading3Quarters } from "react-icons/ai";
 import { MdOutlineContentCopy } from "react-icons/md";
-import { jsx as jsx66, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs46 } from "react/jsx-runtime";
 var kinds = {
   tag: TagProperties,
   option: option_properties_default,
@@ -12441,20 +12640,20 @@ var Properties = () => {
   if (!Kind) {
     return /* @__PURE__ */ jsx66("div", { className: "p-4", children: /* @__PURE__ */ jsx66(EmptyState, { title: "No active node selected", description: "Pick a tag, field, or option from the layers panel or canvas to inspect its core settings." }) });
   }
-  return /* @__PURE__ */ jsx66("div", { className: "flex h-full flex-col overflow-hidden", children: /* @__PURE__ */ jsx66(ScrollArea, { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsxs47("div", { className: "flex flex-col gap-4 px-4 py-4", children: [
+  return /* @__PURE__ */ jsx66("div", { className: "flex h-full flex-col overflow-hidden", children: /* @__PURE__ */ jsx66(ScrollArea, { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsxs46("div", { className: "flex flex-col gap-4 px-4 py-4", children: [
     /* @__PURE__ */ jsx66(WorkspaceBootInlineNotice, { boot: ws.boot, sections: ["snapshotBody", "policies"] }),
-    /* @__PURE__ */ jsxs47(Section, { children: [
+    /* @__PURE__ */ jsxs46(Section, { children: [
       /* @__PURE__ */ jsx66(Section.Header, { children: /* @__PURE__ */ jsx66(Section.Title, { children: "Selection overview" }) }),
-      /* @__PURE__ */ jsxs47(Section.Content, { children: [
+      /* @__PURE__ */ jsxs46(Section.Content, { children: [
         /* @__PURE__ */ jsx66("p", { className: "mb-3 text-xs text-slate-500 dark:text-slate-400", children: "The inspector stays synced with the active canvas and layers selection." }),
-        /* @__PURE__ */ jsxs47("div", { className: "flex items-start justify-between gap-3", children: [
-          /* @__PURE__ */ jsxs47("div", { children: [
+        /* @__PURE__ */ jsxs46("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs46("div", { children: [
             /* @__PURE__ */ jsx66("div", { className: "text-sm font-semibold capitalize text-slate-900 dark:text-slate-100", children: node.kind }),
             /* @__PURE__ */ jsx66("p", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: getNodeSummary(node) })
           ] }),
           /* @__PURE__ */ jsx66(SelectionBadge, { active: true, selected: true })
         ] }),
-        /* @__PURE__ */ jsxs47("div", { className: "mt-3 space-y-3", children: [
+        /* @__PURE__ */ jsxs46("div", { className: "mt-3 space-y-3", children: [
           /* @__PURE__ */ jsx66(
             InputField15,
             {
@@ -12511,7 +12710,7 @@ var Properties = () => {
 
 // src/panels/right/components/wireframe-tags-widget.tsx
 import { IoClose } from "react-icons/io5";
-import { Fragment as Fragment14, jsx as jsx67, jsxs as jsxs48 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx67, jsxs as jsxs47 } from "react/jsx-runtime";
 function noticeToneClass(notice) {
   const color = (notice.color ?? "").toLowerCase();
   if (color.includes("red") || color.includes("rose") || color.includes("danger")) {
@@ -12544,7 +12743,7 @@ function WireframeTagsWidget({
   onTagDragOver,
   onTagDrop
 }) {
-  return /* @__PURE__ */ jsxs48("div", { className: "flex flex-wrap items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs47("div", { className: "flex flex-wrap items-center gap-2", children: [
     /* @__PURE__ */ jsx67(
       "small",
       {
@@ -12554,8 +12753,8 @@ function WireframeTagsWidget({
         children: "Tags:"
       }
     ),
-    /* @__PURE__ */ jsx67("div", { className: "flex flex-wrap items-center gap-1.5", children: visibleTag ? /* @__PURE__ */ jsxs48(Fragment14, { children: [
-      parents.map((item) => /* @__PURE__ */ jsxs48(
+    /* @__PURE__ */ jsx67("div", { className: "flex flex-wrap items-center gap-1.5", children: visibleTag ? /* @__PURE__ */ jsxs47(Fragment14, { children: [
+      parents.map((item) => /* @__PURE__ */ jsxs47(
         "button",
         {
           type: "button",
@@ -12579,7 +12778,7 @@ function WireframeTagsWidget({
         },
         item.id
       )),
-      /* @__PURE__ */ jsxs48(
+      /* @__PURE__ */ jsxs47(
         "button",
         {
           type: "button",
@@ -12602,7 +12801,7 @@ function WireframeTagsWidget({
         }
       ),
       children.map((item) => {
-        return /* @__PURE__ */ jsxs48(
+        return /* @__PURE__ */ jsxs47(
           "button",
           {
             type: "button",
@@ -12627,7 +12826,7 @@ function WireframeTagsWidget({
         );
       })
     ] }) : children.length ? children.map((item) => {
-      return /* @__PURE__ */ jsxs48(
+      return /* @__PURE__ */ jsxs47(
         "button",
         {
           type: "button",
@@ -12652,7 +12851,8 @@ var wireframe_tags_widget_default = WireframeTagsWidget;
 import { useOrderFlow, Wrapper } from "@timeax/digital-service-engine/react";
 import { useCanvas as useCanvas16, useWorkspace as useWorkspace13 } from "@timeax/digital-service-engine/workspace";
 import { useCallback as useCallback16, useMemo as useMemo31 } from "react";
-import { jsx as jsx68, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs48 } from "react/jsx-runtime";
+var CHECKBOX_SINGLE_EXTRA_PROPS = Object.freeze({ single: true });
 function Wireframe() {
   const canvas = useCanvas16();
   const ws = useWorkspace13();
@@ -12718,8 +12918,8 @@ function Wireframe() {
     },
     [canvas.api, canvas.setActive]
   );
-  return /* @__PURE__ */ jsxs49("div", { className: "flex h-full min-h-0 flex-col", children: [
-    /* @__PURE__ */ jsx68("div", { className: "min-h-0 flex-1 overflow-auto p-4", children: /* @__PURE__ */ jsx68("div", { className: "mx-auto max-w-md", children: /* @__PURE__ */ jsxs49("div", { className: "flex flex-col gap-4", children: [
+  return /* @__PURE__ */ jsxs48("div", { className: "flex h-full min-h-0 flex-col", children: [
+    /* @__PURE__ */ jsx68("div", { className: "min-h-0 flex-1 overflow-auto p-4", children: /* @__PURE__ */ jsx68("div", { className: "mx-auto max-w-md", children: /* @__PURE__ */ jsxs48("div", { className: "flex flex-col gap-4", children: [
       /* @__PURE__ */ jsx68(WorkspaceBootInlineNotice, { boot: ws.boot, sections: ["snapshotBody", "policies"] }),
       /* @__PURE__ */ jsx68(
         wireframe_tags_widget_default,
@@ -12758,7 +12958,7 @@ function Wireframe() {
           }
         }
       ),
-      /* @__PURE__ */ jsx68("div", { className: "border-t border-slate-200 pt-3 dark:border-slate-800", children: visibleFields.length ? visibleFields.map((field) => {
+      /* @__PURE__ */ jsx68("div", { className: "border-t border-slate-200 pt-3 flex flex-col gap-2 dark:border-slate-800", children: visibleFields.length ? visibleFields.map((field) => {
         return /* @__PURE__ */ jsx68("div", { onClick: () => select(field.id), className: "cursor-pointer pb-2", children: /* @__PURE__ */ jsx68(
           "div",
           {
@@ -12792,10 +12992,9 @@ function Wireframe() {
             children: /* @__PURE__ */ jsx68(
               Wrapper,
               {
-                extraProps: { ...field.type == "checkbox" && !field.options ? { single: true } : {} },
+                extraProps: field.type === "checkbox" && !field.options ? CHECKBOX_SINGLE_EXTRA_PROPS : void 0,
                 field
-              },
-              field.id
+              }
             )
           }
         ) }, field.id);
@@ -12816,7 +13015,7 @@ var wireframe_default = Wireframe;
 // src/panels/right/index.tsx
 import { OrderFlowProvider, useInputs as useInputs3 } from "@timeax/digital-service-engine/react";
 import { useCanvas as useCanvas17 } from "@timeax/digital-service-engine/workspace";
-import { jsx as jsx69, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs49 } from "react/jsx-runtime";
 var RightPanel = ({ onShare, onPlay }) => {
   const tabClassName = cn(
     "m-0! rounded-none! border-t-0! border-r-0! border-b-2! border-l-0! border-transparent! py-2.5! shadow-none!",
@@ -12833,10 +13032,10 @@ var RightPanel = ({ onShare, onPlay }) => {
       maxWidth: 420,
       minWidth: 320,
       className: "flex h-dvh max-h-dvh w-100 flex-col rounded-none! border-l border-slate-200 bg-[linear-gradient(180deg,rgba(255,255,255,0.98),rgba(248,250,252,0.98))] dark:border-slate-800 dark:bg-[linear-gradient(180deg,rgba(2,6,23,0.98),rgba(15,23,42,0.98))]",
-      children: /* @__PURE__ */ jsxs50("div", { className: "flex h-full flex-col", children: [
+      children: /* @__PURE__ */ jsxs49("div", { className: "flex h-full flex-col", children: [
         /* @__PURE__ */ jsx69(header_default2, { onShare, onPlay }),
-        /* @__PURE__ */ jsxs50(Tabs, { className: "grow gap-0 overflow-hidden", defaultValue: "wireframe", children: [
-          /* @__PURE__ */ jsxs50(TabsList, { className: "grid h-fit w-full grid-cols-3 rounded-none! border-b border-slate-200 bg-transparent p-0 dark:border-slate-800", children: [
+        /* @__PURE__ */ jsxs49(Tabs, { className: "grow gap-0 overflow-hidden", defaultValue: "wireframe", children: [
+          /* @__PURE__ */ jsxs49(TabsList, { className: "grid h-fit w-full grid-cols-3 rounded-none! border-b border-slate-200 bg-transparent p-0 dark:border-slate-800", children: [
             /* @__PURE__ */ jsx69(TabsTrigger, { className: tabClassName, value: "comments", children: "Comments" }),
             /* @__PURE__ */ jsx69(TabsTrigger, { className: tabClassName, value: "properties", children: "Properties" }),
             /* @__PURE__ */ jsx69(TabsTrigger, { className: tabClassName, value: "wireframe", children: "Wireframe" })
@@ -13012,7 +13211,7 @@ import cloneDeep2 from "lodash/cloneDeep";
 import { Suspense, lazy, createContext as createContext4, useCallback as useCallback17, useContext as useContext4, useEffect as useEffect18, useMemo as useMemo32, useState as useState31 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { FiX as FiX3 } from "react-icons/fi";
-import { jsx as jsx70, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs50 } from "react/jsx-runtime";
 var LazyFallbackEditor = lazy(async () => {
   const mod = await import("@timeax/digital-service-engine/react");
   return { default: mod.FallbackEditor };
@@ -13139,7 +13338,7 @@ function FallbackEditorModalProvider({ children }) {
     }),
     [close, launch, openForNode, openForService]
   );
-  return /* @__PURE__ */ jsxs51(FallbackEditorModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ jsxs50(FallbackEditorModalContext.Provider, { value, children: [
     children,
     typeof document !== "undefined" && launch ? createPortal3(
       /* @__PURE__ */ jsx70(
@@ -13149,15 +13348,15 @@ function FallbackEditorModalProvider({ children }) {
           onMouseDown: (event) => {
             if (event.target === event.currentTarget) close();
           },
-          children: /* @__PURE__ */ jsxs51(
+          children: /* @__PURE__ */ jsxs50(
             "div",
             {
               className: cn(
                 "flex h-[min(90vh,56rem)] w-[min(96vw,88rem)] flex-col overflow-hidden rounded-[28px] border border-slate-200 bg-white shadow-2xl dark:border-slate-800 dark:bg-slate-950"
               ),
               children: [
-                /* @__PURE__ */ jsxs51("div", { className: "flex items-start justify-between gap-4 border-b border-slate-200 px-6 py-4 dark:border-slate-800", children: [
-                  /* @__PURE__ */ jsxs51("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsxs50("div", { className: "flex items-start justify-between gap-4 border-b border-slate-200 px-6 py-4 dark:border-slate-800", children: [
+                  /* @__PURE__ */ jsxs50("div", { className: "min-w-0", children: [
                     /* @__PURE__ */ jsx70("h2", { className: "text-lg font-semibold text-slate-900 dark:text-slate-100", children: launchTitle }),
                     /* @__PURE__ */ jsx70("p", { className: "mt-1 text-sm text-slate-500 dark:text-slate-400", children: launchDescription })
                   ] }),
@@ -13411,7 +13610,7 @@ function toNodeChip(canvas, id) {
 }
 
 // src/workspace/bottom-panel/console-tab.tsx
-import { Fragment as Fragment15, jsx as jsx72, jsxs as jsxs52 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx72, jsxs as jsxs51 } from "react/jsx-runtime";
 function ConsoleTab({
   errors,
   notices,
@@ -13440,20 +13639,20 @@ function ConsoleTab({
   ];
   const activeIntro = introState[subTab];
   const introCopy = getConsoleIntroCopy(subTab);
-  return /* @__PURE__ */ jsxs52("div", { className: "space-y-4", children: [
-    !activeIntro.closed ? /* @__PURE__ */ jsx72("div", { className: "rounded-2xl border border-sky-200/80 bg-sky-50/70 p-3 dark:border-sky-500/20 dark:bg-sky-500/10", children: /* @__PURE__ */ jsxs52("div", { className: "flex items-start justify-between gap-3", children: [
-      /* @__PURE__ */ jsxs52("div", { className: "min-w-0", children: [
+  return /* @__PURE__ */ jsxs51("div", { className: "space-y-4", children: [
+    !activeIntro.closed ? /* @__PURE__ */ jsx72("div", { className: "rounded-2xl border border-sky-200/80 bg-sky-50/70 p-3 dark:border-sky-500/20 dark:bg-sky-500/10", children: /* @__PURE__ */ jsxs51("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs51("div", { className: "min-w-0", children: [
         /* @__PURE__ */ jsx72("p", { className: "text-sm font-semibold text-slate-900 dark:text-slate-100", children: introCopy.title }),
-        !activeIntro.minimized ? /* @__PURE__ */ jsxs52(Fragment15, { children: [
+        !activeIntro.minimized ? /* @__PURE__ */ jsxs51(Fragment15, { children: [
           /* @__PURE__ */ jsx72("p", { className: "mt-1 text-xs text-slate-600 dark:text-slate-300", children: introCopy.description }),
-          /* @__PURE__ */ jsxs52("div", { className: "mt-2 flex flex-wrap items-center gap-2 text-[11px] text-slate-500 dark:text-slate-400", children: [
+          /* @__PURE__ */ jsxs51("div", { className: "mt-2 flex flex-wrap items-center gap-2 text-[11px] text-slate-500 dark:text-slate-400", children: [
             /* @__PURE__ */ jsx72("span", { className: "rounded-full bg-white/80 px-2 py-0.5 dark:bg-slate-900/70", children: validating ? "Validating..." : "Console idle" }),
             /* @__PURE__ */ jsx72("span", { className: "rounded-full bg-white/80 px-2 py-0.5 dark:bg-slate-900/70", children: shortcutLabel }),
             /* @__PURE__ */ jsx72("span", { className: "rounded-full bg-white/80 px-2 py-0.5 dark:bg-slate-900/70", children: "Press Escape to close" })
           ] })
         ] }) : null
       ] }),
-      /* @__PURE__ */ jsxs52("div", { className: "flex items-center gap-2 text-xs", children: [
+      /* @__PURE__ */ jsxs51("div", { className: "flex items-center gap-2 text-xs", children: [
         /* @__PURE__ */ jsx72(
           "button",
           {
@@ -13474,9 +13673,9 @@ function ConsoleTab({
         )
       ] })
     ] }) }) : null,
-    /* @__PURE__ */ jsxs52("div", { className: "rounded-2xl border border-slate-200 bg-white/70 p-3 dark:border-slate-800 dark:bg-slate-950/40", children: [
-      /* @__PURE__ */ jsxs52("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
-        /* @__PURE__ */ jsx72("div", { className: "flex flex-wrap items-center gap-2", children: subTabs.map((tab) => /* @__PURE__ */ jsxs52(
+    /* @__PURE__ */ jsxs51("div", { className: "rounded-2xl border border-slate-200 bg-white/70 p-3 dark:border-slate-800 dark:bg-slate-950/40", children: [
+      /* @__PURE__ */ jsxs51("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx72("div", { className: "flex flex-wrap items-center gap-2", children: subTabs.map((tab) => /* @__PURE__ */ jsxs51(
           "button",
           {
             type: "button",
@@ -13492,12 +13691,12 @@ function ConsoleTab({
           },
           tab.id
         )) }),
-        subTab === "logs" && logRows.length ? /* @__PURE__ */ jsxs52(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => errors.clear("logs"), className: "h-8 rounded-xl px-3 text-xs", children: [
+        subTab === "logs" && logRows.length ? /* @__PURE__ */ jsxs51(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => errors.clear("logs"), className: "h-8 rounded-xl px-3 text-xs", children: [
           /* @__PURE__ */ jsx72(FiTrash2, {}),
           "Clear logs"
         ] }) : null
       ] }),
-      /* @__PURE__ */ jsxs52("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsxs51("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: [
         /* @__PURE__ */ jsx72("span", { className: "text-[11px] font-semibold tracking-[0.16em] text-slate-500 uppercase dark:text-slate-400", children: "Scope" }),
         /* @__PURE__ */ jsx72(
           "button",
@@ -13523,7 +13722,7 @@ function ConsoleTab({
             children: "Active node"
           }
         ),
-        subTab !== "logs" ? /* @__PURE__ */ jsxs52(Fragment15, { children: [
+        subTab !== "logs" ? /* @__PURE__ */ jsxs51(Fragment15, { children: [
           /* @__PURE__ */ jsx72("span", { className: "ml-2 text-[11px] font-semibold tracking-[0.16em] text-slate-500 uppercase dark:text-slate-400", children: "Severity" }),
           ["all", "error", "warning", "info"].map((option) => /* @__PURE__ */ jsx72(
             "button",
@@ -13569,20 +13768,20 @@ function NoticeCard({ notice, onNodeClick }) {
   const canvas = useCanvas20();
   const targetNodeId = notice.target.scope === "node" ? notice.target.node_id : null;
   const targetChip = notice.target.scope === "node" ? toNodeChip(canvas, notice.target.node_id) : "Global notice";
-  return /* @__PURE__ */ jsx72("div", { className: "rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-950/90", children: /* @__PURE__ */ jsxs52("div", { className: "flex items-start gap-3", children: [
+  return /* @__PURE__ */ jsx72("div", { className: "rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-950/90", children: /* @__PURE__ */ jsxs51("div", { className: "flex items-start gap-3", children: [
     /* @__PURE__ */ jsx72("div", { className: "mt-0.5", children: iconForSeverity(notice.severity) }),
-    /* @__PURE__ */ jsxs52("div", { className: "min-w-0 flex-1 space-y-2", children: [
-      /* @__PURE__ */ jsxs52("div", { className: "flex flex-wrap items-center gap-2", children: [
+    /* @__PURE__ */ jsxs51("div", { className: "min-w-0 flex-1 space-y-2", children: [
+      /* @__PURE__ */ jsxs51("div", { className: "flex flex-wrap items-center gap-2", children: [
         /* @__PURE__ */ jsx72("span", { className: severityBadgeClassName(notice.severity), children: notice.kind }),
         /* @__PURE__ */ jsx72("span", { className: "rounded-full bg-slate-100 px-2.5 py-1 text-[10px] font-semibold tracking-[0.16em] text-slate-600 uppercase dark:bg-slate-900 dark:text-slate-300", children: notice.type }),
         /* @__PURE__ */ jsx72("span", { className: "text-sm font-semibold text-slate-900 dark:text-slate-100", children: notice.title })
       ] }),
       notice.description ? /* @__PURE__ */ jsx72("p", { className: "text-sm text-slate-600 dark:text-slate-300", children: notice.description }) : null,
-      notice.reason ? /* @__PURE__ */ jsxs52("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: [
+      notice.reason ? /* @__PURE__ */ jsxs51("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: [
         "Reason: ",
         notice.reason
       ] }) : null,
-      /* @__PURE__ */ jsxs52("div", { className: "flex flex-wrap items-center gap-2 text-xs text-slate-500 dark:text-slate-400", children: [
+      /* @__PURE__ */ jsxs51("div", { className: "flex flex-wrap items-center gap-2 text-xs text-slate-500 dark:text-slate-400", children: [
         notice.target.scope === "node" ? /* @__PURE__ */ jsx72(
           "button",
           {
@@ -13593,11 +13792,11 @@ function NoticeCard({ notice, onNodeClick }) {
           }
         ) : /* @__PURE__ */ jsx72("span", { className: "rounded-full bg-slate-100 px-2.5 py-1 text-xs text-slate-700 dark:bg-slate-900 dark:text-slate-300", children: targetChip }),
         notice.marked_at ? /* @__PURE__ */ jsx72("span", { children: new Date(notice.marked_at).toLocaleString() }) : null,
-        notice.icon ? /* @__PURE__ */ jsxs52("span", { children: [
+        notice.icon ? /* @__PURE__ */ jsxs51("span", { children: [
           "Icon: ",
           notice.icon
         ] }) : null,
-        notice.color ? /* @__PURE__ */ jsxs52("span", { children: [
+        notice.color ? /* @__PURE__ */ jsxs51("span", { children: [
           "Color: ",
           notice.color
         ] }) : null
@@ -13613,10 +13812,10 @@ function ValidationCard({ row, onNodeClick }) {
     {
       className: "rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-950/90",
       onClick: () => scope.length && canvas.api.setHighlighted(scope),
-      children: /* @__PURE__ */ jsxs52("div", { className: "flex items-start gap-3", children: [
+      children: /* @__PURE__ */ jsxs51("div", { className: "flex items-start gap-3", children: [
         /* @__PURE__ */ jsx72("div", { className: "mt-0.5", children: iconForSeverity(row.severity) }),
-        /* @__PURE__ */ jsxs52("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsxs52("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsxs51("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs51("div", { className: "flex flex-wrap items-center gap-2", children: [
             /* @__PURE__ */ jsx72("span", { className: severityBadgeClassName(row.severity), children: row.code.replaceAll("_", " ") }),
             /* @__PURE__ */ jsx72("span", { className: "text-sm font-semibold text-slate-900 dark:text-slate-100", children: row.message })
           ] }),
@@ -13635,16 +13834,16 @@ function ValidationCard({ row, onNodeClick }) {
   );
 }
 function LogCard({ row, onRemove }) {
-  return /* @__PURE__ */ jsx72("div", { className: "rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-950/90", children: /* @__PURE__ */ jsxs52("div", { className: "flex items-start gap-3", children: [
+  return /* @__PURE__ */ jsx72("div", { className: "rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-950/90", children: /* @__PURE__ */ jsxs51("div", { className: "flex items-start gap-3", children: [
     /* @__PURE__ */ jsx72("div", { className: "mt-0.5", children: /* @__PURE__ */ jsx72(FiInfo2, { className: "text-lg text-sky-500" }) }),
-    /* @__PURE__ */ jsxs52("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsxs52("div", { className: "flex flex-wrap items-center gap-2", children: [
+    /* @__PURE__ */ jsxs51("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs51("div", { className: "flex flex-wrap items-center gap-2", children: [
         /* @__PURE__ */ jsx72("span", { className: "rounded-full bg-sky-100 px-2.5 py-1 text-[10px] font-semibold tracking-[0.16em] text-sky-700 uppercase dark:bg-sky-500/15 dark:text-sky-200", children: row.code ?? "log" }),
         /* @__PURE__ */ jsx72("span", { className: "text-sm font-semibold text-slate-900 dark:text-slate-100", children: row.message })
       ] }),
-      /* @__PURE__ */ jsxs52("div", { className: "mt-3 flex items-center justify-between gap-3 text-xs text-slate-500 dark:text-slate-400", children: [
+      /* @__PURE__ */ jsxs51("div", { className: "mt-3 flex items-center justify-between gap-3 text-xs text-slate-500 dark:text-slate-400", children: [
         /* @__PURE__ */ jsx72("span", { children: new Date(row.createdAt).toLocaleTimeString() }),
-        /* @__PURE__ */ jsxs52(Button, { type: "button", variant: "ghost", size: "sm", onClick: onRemove, className: "h-7 rounded-xl px-2 text-xs", children: [
+        /* @__PURE__ */ jsxs51(Button, { type: "button", variant: "ghost", size: "sm", onClick: onRemove, className: "h-7 rounded-xl px-2 text-xs", children: [
           /* @__PURE__ */ jsx72(FiX4, {}),
           "Dismiss"
         ] })
@@ -13773,7 +13972,7 @@ function isScalar(value) {
 }
 
 // src/workspace/bottom-panel/service-picker-dialog.tsx
-import { jsx as jsx73, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs52 } from "react/jsx-runtime";
 function ServicePickerDialog({
   open,
   groupLabel,
@@ -13819,7 +14018,7 @@ function ServicePickerDialog({
   const selectedCount = selectedIds.size;
   const canConfirm = selectedCount > 0;
   return createPortal4(
-    /* @__PURE__ */ jsx73("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-slate-950/45 p-4", children: /* @__PURE__ */ jsxs53(
+    /* @__PURE__ */ jsx73("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-slate-950/45 p-4", children: /* @__PURE__ */ jsxs52(
       "div",
       {
         role: "dialog",
@@ -13827,15 +14026,15 @@ function ServicePickerDialog({
         "aria-label": "Service picker",
         className: "flex h-[min(80vh,42rem)] w-[min(72rem,calc(100vw-2rem))] flex-col overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-2xl dark:border-slate-800 dark:bg-slate-950",
         children: [
-          /* @__PURE__ */ jsx73("div", { className: "border-b border-slate-200 px-5 py-4 dark:border-slate-800", children: /* @__PURE__ */ jsxs53("div", { className: "flex items-start justify-between gap-4", children: [
-            /* @__PURE__ */ jsxs53("div", { children: [
+          /* @__PURE__ */ jsx73("div", { className: "border-b border-slate-200 px-5 py-4 dark:border-slate-800", children: /* @__PURE__ */ jsxs52("div", { className: "flex items-start justify-between gap-4", children: [
+            /* @__PURE__ */ jsxs52("div", { children: [
               /* @__PURE__ */ jsx73("h3", { className: "text-lg font-semibold text-slate-900 dark:text-slate-100", children: "Assign services to group" }),
               /* @__PURE__ */ jsx73("p", { className: "mt-1 text-sm text-slate-500 dark:text-slate-400", children: groupLabel ? `Pick one or more services to append into ${groupLabel}.` : "Pick one or more services to append into the selected catalog group." })
             ] }),
             /* @__PURE__ */ jsx73(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onOpenChange(false), className: "rounded-xl", children: "Close" })
           ] }) }),
-          /* @__PURE__ */ jsxs53("div", { className: "grid h-full min-h-0 flex-1 overflow-hidden md:grid-cols-[18rem_minmax(0,1fr)]", children: [
-            /* @__PURE__ */ jsx73("div", { className: "min-h-0 border-r border-slate-200 dark:border-slate-800", children: /* @__PURE__ */ jsx73(ScrollArea, { className: "h-full min-h-0", children: /* @__PURE__ */ jsxs53("div", { className: "space-y-4 p-4", children: [
+          /* @__PURE__ */ jsxs52("div", { className: "grid h-full min-h-0 flex-1 overflow-hidden md:grid-cols-[18rem_minmax(0,1fr)]", children: [
+            /* @__PURE__ */ jsx73("div", { className: "min-h-0 border-r border-slate-200 dark:border-slate-800", children: /* @__PURE__ */ jsx73(ScrollArea, { className: "h-full min-h-0", children: /* @__PURE__ */ jsxs52("div", { className: "space-y-4 p-4", children: [
               /* @__PURE__ */ jsx73(FilterField, { label: "Search", children: /* @__PURE__ */ jsx73(
                 InputField16,
                 {
@@ -13886,7 +14085,7 @@ function ServicePickerDialog({
                   }))
                 }
               ) }),
-              /* @__PURE__ */ jsxs53("div", { className: "grid grid-cols-2 gap-2", children: [
+              /* @__PURE__ */ jsxs52("div", { className: "grid grid-cols-2 gap-2", children: [
                 /* @__PURE__ */ jsx73(FilterField, { label: "Min rate", children: /* @__PURE__ */ jsx73(
                   InputField16,
                   {
@@ -13910,7 +14109,7 @@ function ServicePickerDialog({
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsx73(FilterField, { label: "Name keyword", children: /* @__PURE__ */ jsxs53("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx73(FilterField, { label: "Name keyword", children: /* @__PURE__ */ jsxs52("div", { className: "space-y-2", children: [
                 /* @__PURE__ */ jsx73(
                   InputField16,
                   {
@@ -13981,8 +14180,8 @@ function ServicePickerDialog({
                 }
               ) })
             ] }) }) }),
-            /* @__PURE__ */ jsxs53("div", { className: "flex min-h-0 flex-col overflow-hidden", children: [
-              /* @__PURE__ */ jsxs53("div", { className: "border-b border-slate-200 px-4 py-3 text-sm text-slate-500 dark:border-slate-800 dark:text-slate-400", children: [
+            /* @__PURE__ */ jsxs52("div", { className: "flex min-h-0 flex-col overflow-hidden", children: [
+              /* @__PURE__ */ jsxs52("div", { className: "border-b border-slate-200 px-4 py-3 text-sm text-slate-500 dark:border-slate-800 dark:text-slate-400", children: [
                 filteredServices.length,
                 " service",
                 filteredServices.length === 1 ? "" : "s",
@@ -13992,7 +14191,7 @@ function ServicePickerDialog({
                 const id = String(service.id);
                 const selected = selectedIds.has(id);
                 const alreadyAssigned = existingGroupServiceIds.has(id);
-                return /* @__PURE__ */ jsxs53(
+                return /* @__PURE__ */ jsxs52(
                   "label",
                   {
                     className: cn(
@@ -14014,12 +14213,12 @@ function ServicePickerDialog({
                           })
                         }
                       ),
-                      /* @__PURE__ */ jsxs53("div", { className: "min-w-0 flex-1", children: [
-                        /* @__PURE__ */ jsxs53("div", { className: "flex items-center justify-between gap-3", children: [
-                          /* @__PURE__ */ jsxs53("div", { className: "min-w-0", children: [
+                      /* @__PURE__ */ jsxs52("div", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsxs52("div", { className: "flex items-center justify-between gap-3", children: [
+                          /* @__PURE__ */ jsxs52("div", { className: "min-w-0", children: [
                             /* @__PURE__ */ jsx73("div", { className: "truncate text-sm font-semibold text-slate-900 dark:text-slate-100", children: service.name }),
-                            /* @__PURE__ */ jsxs53("div", { className: "mt-1 flex flex-wrap gap-2 text-xs text-slate-500 dark:text-slate-400", children: [
-                              /* @__PURE__ */ jsxs53("span", { children: [
+                            /* @__PURE__ */ jsxs52("div", { className: "mt-1 flex flex-wrap gap-2 text-xs text-slate-500 dark:text-slate-400", children: [
+                              /* @__PURE__ */ jsxs52("span", { children: [
                                 "#",
                                 service.id
                               ] }),
@@ -14029,8 +14228,8 @@ function ServicePickerDialog({
                           ] }),
                           alreadyAssigned ? /* @__PURE__ */ jsx73("span", { className: "rounded-full bg-emerald-50 px-2.5 py-1 text-[11px] text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-200", children: "Already in group" }) : null
                         ] }),
-                        /* @__PURE__ */ jsxs53("div", { className: "mt-3 flex flex-wrap gap-2", children: [
-                          service.rate != null ? /* @__PURE__ */ jsxs53("span", { className: "rounded-full bg-slate-100 px-2.5 py-1 text-[11px] text-slate-600 dark:bg-slate-900 dark:text-slate-300", children: [
+                        /* @__PURE__ */ jsxs52("div", { className: "mt-3 flex flex-wrap gap-2", children: [
+                          service.rate != null ? /* @__PURE__ */ jsxs52("span", { className: "rounded-full bg-slate-100 px-2.5 py-1 text-[11px] text-slate-600 dark:bg-slate-900 dark:text-slate-300", children: [
                             "Rate ",
                             service.rate
                           ] }) : null,
@@ -14044,14 +14243,14 @@ function ServicePickerDialog({
               }) : /* @__PURE__ */ jsx73("div", { className: "rounded-2xl border border-dashed border-slate-300 px-4 py-10 text-center text-sm text-slate-500 dark:border-slate-700 dark:text-slate-400", children: "No services match the current filters." }) }) })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs53("div", { className: "flex items-center justify-between gap-3 border-t border-slate-200 px-5 py-4 dark:border-slate-800", children: [
-            /* @__PURE__ */ jsxs53("div", { className: "text-sm text-slate-500 dark:text-slate-400", children: [
+          /* @__PURE__ */ jsxs52("div", { className: "flex items-center justify-between gap-3 border-t border-slate-200 px-5 py-4 dark:border-slate-800", children: [
+            /* @__PURE__ */ jsxs52("div", { className: "text-sm text-slate-500 dark:text-slate-400", children: [
               selectedCount,
               " service",
               selectedCount === 1 ? "" : "s",
               " selected"
             ] }),
-            /* @__PURE__ */ jsxs53("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs52("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx73(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), className: "rounded-xl", children: "Cancel" }),
               /* @__PURE__ */ jsx73(
                 Button,
@@ -14075,7 +14274,7 @@ function ServicePickerDialog({
   );
 }
 function FilterField({ label, children }) {
-  return /* @__PURE__ */ jsxs53("label", { className: "block space-y-1.5", children: [
+  return /* @__PURE__ */ jsxs52("label", { className: "block space-y-1.5", children: [
     /* @__PURE__ */ jsx73("span", { className: "text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400", children: label }),
     children
   ] });
@@ -14131,7 +14330,7 @@ import { FaFolderOpen } from "react-icons/fa";
 import { FiEdit2, FiFilter, FiFolderPlus, FiPlus as FiPlus2, FiTrash2 as FiTrash22 } from "react-icons/fi";
 
 // src/workspace/bottom-panel/service-detail-card.tsx
-import { jsx as jsx75, jsxs as jsxs54 } from "react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs53 } from "react/jsx-runtime";
 function ServiceDetailCard({
   mode,
   row,
@@ -14142,16 +14341,16 @@ function ServiceDetailCard({
 }) {
   const summary = row.summary;
   const service = row.service;
-  return /* @__PURE__ */ jsxs54("div", { className: "space-y-5", children: [
-    /* @__PURE__ */ jsxs54("div", { className: "rounded-3xl border border-slate-200 bg-slate-50/80 p-5 dark:border-slate-800 dark:bg-slate-900/40", children: [
-      /* @__PURE__ */ jsxs54("div", { className: "flex flex-wrap items-start justify-between gap-4", children: [
-        /* @__PURE__ */ jsxs54("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsxs54("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs53("div", { className: "space-y-5", children: [
+    /* @__PURE__ */ jsxs53("div", { className: "rounded-3xl border border-slate-200 bg-slate-50/80 p-5 dark:border-slate-800 dark:bg-slate-900/40", children: [
+      /* @__PURE__ */ jsxs53("div", { className: "flex flex-wrap items-start justify-between gap-4", children: [
+        /* @__PURE__ */ jsxs53("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsxs53("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx75(StatusDot, { tone: row.statusTone, className: "mt-0.5" }),
             /* @__PURE__ */ jsx75("h5", { className: "truncate text-lg font-semibold text-slate-900 dark:text-slate-100", children: summary.name })
           ] }),
-          /* @__PURE__ */ jsxs54("div", { className: "mt-2 flex flex-wrap gap-2 text-xs text-slate-500 dark:text-slate-400", children: [
-            /* @__PURE__ */ jsxs54("span", { children: [
+          /* @__PURE__ */ jsxs53("div", { className: "mt-2 flex flex-wrap gap-2 text-xs text-slate-500 dark:text-slate-400", children: [
+            /* @__PURE__ */ jsxs53("span", { children: [
               "#",
               summary.id
             ] }),
@@ -14159,7 +14358,7 @@ function ServiceDetailCard({
             summary.platformId ? /* @__PURE__ */ jsx75("span", { children: summary.platformId }) : null
           ] })
         ] }),
-        /* @__PURE__ */ jsxs54("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs53("div", { className: "flex items-center gap-2", children: [
           mode === "active" && onOpenFallbackQuickAdd ? /* @__PURE__ */ jsx75(
             "button",
             {
@@ -14181,14 +14380,14 @@ function ServiceDetailCard({
           /* @__PURE__ */ jsx75("span", { className: statusBadgeClassName(row.statusTone), children: row.statusLabel })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs54("div", { className: "mt-4 grid gap-3 sm:grid-cols-2", children: [
+      /* @__PURE__ */ jsxs53("div", { className: "mt-4 grid gap-3 sm:grid-cols-2", children: [
         /* @__PURE__ */ jsx75(DetailMetric, { label: "Rate", value: summary.rate != null ? String(summary.rate) : "Not set" }),
         /* @__PURE__ */ jsx75(DetailMetric, { label: "Estimate", value: summary.estimate ?? "No estimate" }),
         /* @__PURE__ */ jsx75(DetailMetric, { label: "Min", value: summary.min != null ? String(summary.min) : "0" }),
         /* @__PURE__ */ jsx75(DetailMetric, { label: "Max", value: summary.max != null ? String(summary.max) : "Unlimited" })
       ] })
     ] }),
-    mode !== "active" ? /* @__PURE__ */ jsxs54("section", { className: "space-y-3", children: [
+    mode !== "active" ? /* @__PURE__ */ jsxs53("section", { className: "space-y-3", children: [
       /* @__PURE__ */ jsx75(
         SectionTitle2,
         {
@@ -14196,8 +14395,8 @@ function ServiceDetailCard({
           description: mode === "catalog" ? "This summary shows how the service fits the current visible-group context while browsing catalog groups." : "This summary shows how the service fits the current visible-group context."
         }
       ),
-      /* @__PURE__ */ jsxs54("div", { className: "rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-950/80", children: [
-        /* @__PURE__ */ jsxs54("div", { className: "flex flex-wrap gap-2", children: [
+      /* @__PURE__ */ jsxs53("div", { className: "rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-950/80", children: [
+        /* @__PURE__ */ jsxs53("div", { className: "flex flex-wrap gap-2", children: [
           /* @__PURE__ */ jsx75(FilterChip, { label: row.check?.fitsConstraints ? "Constraints fit" : "Constraint mismatch", tone: row.check?.fitsConstraints ? "success" : "danger" }),
           /* @__PURE__ */ jsx75(FilterChip, { label: row.check?.passesRate ? "Rate ok" : "Rate blocked", tone: row.check?.passesRate ? "success" : "warning" }),
           /* @__PURE__ */ jsx75(
@@ -14211,14 +14410,14 @@ function ServiceDetailCard({
         row.reasonLabels.length ? /* @__PURE__ */ jsx75("div", { className: "mt-3 flex flex-wrap gap-2", children: row.reasonLabels.map((reason) => /* @__PURE__ */ jsx75("span", { className: "rounded-full bg-amber-50 px-2.5 py-1 text-xs text-amber-700 dark:bg-amber-500/10 dark:text-amber-200", children: reason }, `${row.id}:${reason}`)) }) : /* @__PURE__ */ jsx75("p", { className: "mt-3 text-sm text-slate-500 dark:text-slate-400", children: "This service is a clean fit for the current visible-group and selected-trigger context." })
       ] })
     ] }) : null,
-    /* @__PURE__ */ jsxs54("section", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs53("section", { className: "space-y-3", children: [
       /* @__PURE__ */ jsx75(SectionTitle2, { title: "Capabilities", description: "Flags and pricing hints attached to this service." }),
-      /* @__PURE__ */ jsx75("div", { className: "rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-950/80", children: summary.flags.length || service?.meta ? /* @__PURE__ */ jsxs54("div", { className: "flex flex-wrap gap-2", children: [
+      /* @__PURE__ */ jsx75("div", { className: "rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-950/80", children: summary.flags.length || service?.meta ? /* @__PURE__ */ jsxs53("div", { className: "flex flex-wrap gap-2", children: [
         summary.flags.map((flag) => /* @__PURE__ */ jsx75("span", { className: "rounded-full bg-emerald-50 px-2.5 py-1 text-xs text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-200", children: flag }, flag)),
         Object.keys(service?.meta ?? {}).slice(0, 3).map((key) => /* @__PURE__ */ jsx75("span", { className: "rounded-full bg-slate-100 px-2.5 py-1 text-xs text-slate-600 dark:bg-slate-900 dark:text-slate-300", children: key }, key))
       ] }) : /* @__PURE__ */ jsx75("p", { className: "text-sm text-slate-500 dark:text-slate-400", children: "No capability flags were published for this service." }) })
     ] }),
-    /* @__PURE__ */ jsxs54("section", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs53("section", { className: "space-y-3", children: [
       /* @__PURE__ */ jsx75(SectionTitle2, { title: "Bindings", description: "Nodes currently connected to this service. Click any node to jump back into the canvas." }),
       /* @__PURE__ */ jsx75("div", { className: "rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-950/80", children: summary.attachedNodeIds.length ? /* @__PURE__ */ jsx75("div", { className: "flex flex-wrap gap-2", children: summary.attachedNodeIds.map((nodeId, index) => /* @__PURE__ */ jsx75(
         "button",
@@ -14234,13 +14433,13 @@ function ServiceDetailCard({
   ] });
 }
 function SectionTitle2({ title, description }) {
-  return /* @__PURE__ */ jsxs54("div", { children: [
+  return /* @__PURE__ */ jsxs53("div", { children: [
     /* @__PURE__ */ jsx75("p", { className: "text-sm font-semibold text-slate-900 dark:text-slate-100", children: title }),
     /* @__PURE__ */ jsx75("p", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: description })
   ] });
 }
 function DetailMetric({ label, value }) {
-  return /* @__PURE__ */ jsxs54("div", { className: "rounded-2xl bg-white px-4 py-3 dark:bg-slate-950", children: [
+  return /* @__PURE__ */ jsxs53("div", { className: "rounded-2xl bg-white px-4 py-3 dark:bg-slate-950", children: [
     /* @__PURE__ */ jsx75("p", { className: "text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400 dark:text-slate-500", children: label }),
     /* @__PURE__ */ jsx75("p", { className: "mt-2 text-sm font-semibold text-slate-900 dark:text-slate-100", children: value })
   ] });
@@ -14250,22 +14449,22 @@ function FilterChip({ label, tone = "default" }) {
 }
 
 // src/workspace/bottom-panel/services-split-pane.tsx
-import { jsx as jsx76, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx76, jsxs as jsxs54 } from "react/jsx-runtime";
 var UNGROUPED_TREE_VALUE = "__catalog_ungrouped__";
 function ServicesSplitPane(props) {
   const emptyTitle = props.mode === "active" ? "No active services yet" : "No services match this view";
   const emptyDescription = props.mode === "active" ? "Connect a service to a tag, field, or option and it will appear here with its bindings." : props.mode === "catalog" ? "Select a catalog group or create one to organize source services for faster assignment." : "Try changing the search or toggles to bring more services into view.";
-  return /* @__PURE__ */ jsx76("div", { className: "min-h-90 p-4", children: /* @__PURE__ */ jsxs55(ResizablePanelGroup, { direction: "horizontal", className: "min-h-90", children: [
-    /* @__PURE__ */ jsx76(ResizablePanel, { defaultSize: 44, minSize: 30, children: /* @__PURE__ */ jsxs55("section", { className: "flex h-full min-h-0 flex-col overflow-hidden", children: [
-      /* @__PURE__ */ jsxs55("div", { className: "space-y-3 border-b border-slate-100 pr-4 dark:border-slate-800", children: [
-        /* @__PURE__ */ jsxs55("div", { className: "flex items-center justify-between gap-3", children: [
+  return /* @__PURE__ */ jsx76("div", { className: "min-h-90 p-4", children: /* @__PURE__ */ jsxs54(ResizablePanelGroup, { direction: "horizontal", className: "min-h-90", children: [
+    /* @__PURE__ */ jsx76(ResizablePanel, { defaultSize: 44, minSize: 30, children: /* @__PURE__ */ jsxs54("section", { className: "flex h-full min-h-0 flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsxs54("div", { className: "space-y-3 border-b border-slate-100 pr-4 dark:border-slate-800", children: [
+        /* @__PURE__ */ jsxs54("div", { className: "flex items-center justify-between gap-3", children: [
           /* @__PURE__ */ jsx76("div", { children: /* @__PURE__ */ jsx76("h4", { className: "mt-1 text-base font-semibold text-slate-900 dark:text-slate-100", children: props.mode === "active" ? "Attached services" : props.mode === "catalog" ? "Catalog workspace" : "All services" }) }),
-          /* @__PURE__ */ jsxs55("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs54("div", { className: "flex items-center gap-2", children: [
             props.mode === "catalog" ? /* @__PURE__ */ jsx76("span", { className: "rounded-full bg-blue-50 px-2.5 py-1 text-[10px] font-semibold tracking-[0.16em] text-blue-700 uppercase dark:bg-blue-500/10 dark:text-blue-200", children: props.selectedCatalogGroupLabel ?? "Ungrouped" }) : null,
             /* @__PURE__ */ jsx76("span", { className: "rounded-full bg-slate-100 px-2.5 py-1 text-[10px] font-semibold tracking-[0.16em] text-slate-600 uppercase dark:bg-slate-900 dark:text-slate-300", children: props.rows.length })
           ] })
         ] }),
-        props.mode === "all" && props.appliedSnapshot?.selectedTag ? /* @__PURE__ */ jsxs55("div", { className: "flex flex-wrap gap-2 pb-3", children: [
+        props.mode === "all" && props.appliedSnapshot?.selectedTag ? /* @__PURE__ */ jsxs54("div", { className: "flex flex-wrap gap-2 pb-3", children: [
           /* @__PURE__ */ jsx76(FilterChip2, { label: `Context tag: ${props.appliedSnapshot.selectedTag.label}` }),
           /* @__PURE__ */ jsx76(
             FilterChip2,
@@ -14302,7 +14501,7 @@ function ServicesSplitPane(props) {
           }
         ) }) : null
       ] }),
-      /* @__PURE__ */ jsx76(ScrollArea, { className: "h-[calc(var(--bottom-panel-height)-15rem)] max-h-[calc(var(--bottom-panel-height)-15rem)] min-h-0 flex-1", children: /* @__PURE__ */ jsx76("div", { className: "space-y-2 p-3 pl-0", children: props.rows.length === 0 ? /* @__PURE__ */ jsx76(EmptyState, { title: emptyTitle, description: emptyDescription }) : props.rows.map((row) => /* @__PURE__ */ jsxs55(
+      /* @__PURE__ */ jsx76(ScrollArea, { className: "h-[calc(var(--bottom-panel-height)-15rem)] max-h-[calc(var(--bottom-panel-height)-15rem)] min-h-0 flex-1", children: /* @__PURE__ */ jsx76("div", { className: "space-y-2 p-3 pl-0", children: props.rows.length === 0 ? /* @__PURE__ */ jsx76(EmptyState, { title: emptyTitle, description: emptyDescription }) : props.rows.map((row) => /* @__PURE__ */ jsxs54(
         "button",
         {
           type: "button",
@@ -14315,14 +14514,14 @@ function ServicesSplitPane(props) {
             props.selectedRowId === row.id ? "border-blue-300 bg-blue-50 shadow-sm dark:border-blue-500/40 dark:bg-blue-500/10" : "border-slate-200 bg-white hover:border-slate-300 hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-950/60 dark:hover:border-slate-700"
           ),
           children: [
-            /* @__PURE__ */ jsxs55("div", { className: "flex items-start justify-between gap-3", children: [
-              /* @__PURE__ */ jsxs55("div", { className: "min-w-0", children: [
-                /* @__PURE__ */ jsxs55("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs54("div", { className: "flex items-start justify-between gap-3", children: [
+              /* @__PURE__ */ jsxs54("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsxs54("div", { className: "flex items-center gap-2", children: [
                   /* @__PURE__ */ jsx76(StatusDot, { tone: row.statusTone }),
                   /* @__PURE__ */ jsx76("span", { className: "truncate text-sm font-semibold text-slate-900 dark:text-slate-100", children: row.summary.name })
                 ] }),
-                /* @__PURE__ */ jsxs55("div", { className: "mt-1 flex flex-wrap items-center gap-2 text-xs text-slate-500 dark:text-slate-400", children: [
-                  /* @__PURE__ */ jsxs55("span", { children: [
+                /* @__PURE__ */ jsxs54("div", { className: "mt-1 flex flex-wrap items-center gap-2 text-xs text-slate-500 dark:text-slate-400", children: [
+                  /* @__PURE__ */ jsxs54("span", { children: [
                     "#",
                     row.summary.id
                   ] }),
@@ -14332,13 +14531,13 @@ function ServicesSplitPane(props) {
               ] }),
               /* @__PURE__ */ jsx76("span", { className: statusBadgeClassName(row.statusTone), children: row.statusLabel })
             ] }),
-            /* @__PURE__ */ jsxs55("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: [
-              /* @__PURE__ */ jsxs55("span", { className: "rounded-full bg-slate-100 px-2.5 py-1 text-[11px] text-slate-600 dark:bg-slate-900 dark:text-slate-300", children: [
+            /* @__PURE__ */ jsxs54("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: [
+              /* @__PURE__ */ jsxs54("span", { className: "rounded-full bg-slate-100 px-2.5 py-1 text-[11px] text-slate-600 dark:bg-slate-900 dark:text-slate-300", children: [
                 row.summary.attachmentCount,
                 " node",
                 row.summary.attachmentCount === 1 ? "" : "s"
               ] }),
-              row.summary.rate != null ? /* @__PURE__ */ jsxs55("span", { className: "rounded-full bg-slate-100 px-2.5 py-1 text-[11px] text-slate-600 dark:bg-slate-900 dark:text-slate-300", children: [
+              row.summary.rate != null ? /* @__PURE__ */ jsxs54("span", { className: "rounded-full bg-slate-100 px-2.5 py-1 text-[11px] text-slate-600 dark:bg-slate-900 dark:text-slate-300", children: [
                 "Rate ",
                 row.summary.rate
               ] }) : null,
@@ -14357,8 +14556,8 @@ function ServicesSplitPane(props) {
       )) }) })
     ] }) }),
     /* @__PURE__ */ jsx76(ResizableHandle, { withHandle: true }),
-    /* @__PURE__ */ jsx76(ResizablePanel, { defaultSize: 56, minSize: 36, children: /* @__PURE__ */ jsxs55("section", { className: "flex h-full min-h-0 flex-col overflow-hidden", children: [
-      /* @__PURE__ */ jsxs55("div", { className: "border-b border-slate-100 px-4 dark:border-slate-800", children: [
+    /* @__PURE__ */ jsx76(ResizablePanel, { defaultSize: 56, minSize: 36, children: /* @__PURE__ */ jsxs54("section", { className: "flex h-full min-h-0 flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsxs54("div", { className: "border-b border-slate-100 px-4 dark:border-slate-800", children: [
         /* @__PURE__ */ jsx76("p", { className: "text-xs font-semibold tracking-[0.18em] text-slate-400 uppercase dark:text-slate-500", children: "Service detail" }),
         /* @__PURE__ */ jsx76("h4", { className: "mt-1 text-base font-semibold text-slate-900 dark:text-slate-100", children: props.detailRow ? props.detailRow.summary.name : "Select a service" }),
         /* @__PURE__ */ jsx76("p", { className: "mt-1 text-sm text-slate-500 dark:text-slate-400", children: props.mode === "active" ? "Highlight connected nodes, inspect usage, and jump back into the canvas." : props.mode === "catalog" ? "Inspect compatibility, pricing, and bindings while browsing manual catalog groups." : "Inspect compatibility, pricing, and bindings before assigning the service to a node." })
@@ -14395,7 +14594,7 @@ function CatalogContextPopover({
   onDraftContextChange
 }) {
   const context = draftContext;
-  return /* @__PURE__ */ jsxs55(Popover, { open, onOpenChange, children: [
+  return /* @__PURE__ */ jsxs54(Popover, { open, onOpenChange, children: [
     /* @__PURE__ */ jsx76(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx76(
       "button",
       {
@@ -14408,7 +14607,7 @@ function CatalogContextPopover({
         children: /* @__PURE__ */ jsx76(FiFilter, {})
       }
     ) }),
-    /* @__PURE__ */ jsxs55(
+    /* @__PURE__ */ jsxs54(
       PopoverContent,
       {
         align: "end",
@@ -14416,30 +14615,30 @@ function CatalogContextPopover({
         collisionPadding: 16,
         className: "max-h-[min(32rem,var(--radix-popover-content-available-height))] w-[min(24rem,calc(100vw-2rem))] overflow-hidden rounded-2xl p-0",
         children: [
-          /* @__PURE__ */ jsxs55("div", { className: "border-b border-slate-200 px-4 py-3 dark:border-slate-800", children: [
+          /* @__PURE__ */ jsxs54("div", { className: "border-b border-slate-200 px-4 py-3 dark:border-slate-800", children: [
             /* @__PURE__ */ jsx76("div", { className: "text-sm font-semibold text-slate-900 dark:text-slate-100", children: "Catalog context" }),
             /* @__PURE__ */ jsx76("p", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: "Control compatibility checks here, or link them to the current workspace context." })
           ] }),
-          /* @__PURE__ */ jsx76(ScrollArea, { className: "h-[calc(var(--radix-popover-content-available-height)-4.5rem)] max-h-[calc(var(--radix-popover-content-available-height)-4.5rem)]", children: /* @__PURE__ */ jsxs55("div", { className: "space-y-4 p-4", children: [
-            /* @__PURE__ */ jsxs55("label", { className: "flex items-start justify-between gap-3 text-sm text-slate-900 dark:text-slate-100", children: [
-              /* @__PURE__ */ jsxs55("span", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx76(ScrollArea, { className: "h-[calc(var(--radix-popover-content-available-height)-4.5rem)] max-h-[calc(var(--radix-popover-content-available-height)-4.5rem)]", children: /* @__PURE__ */ jsxs54("div", { className: "space-y-4 p-4", children: [
+            /* @__PURE__ */ jsxs54("label", { className: "flex items-start justify-between gap-3 text-sm text-slate-900 dark:text-slate-100", children: [
+              /* @__PURE__ */ jsxs54("span", { className: "min-w-0", children: [
                 /* @__PURE__ */ jsx76("span", { className: "block font-medium", children: "Compatible only" }),
                 /* @__PURE__ */ jsx76("span", { className: "mt-1 block text-xs text-slate-500 dark:text-slate-400", children: "Show only services that fit this catalog context safely." })
               ] }),
               /* @__PURE__ */ jsx76("input", { type: "checkbox", checked: compatibleOnly, onChange: (event) => onCompatibleOnlyChange(event.target.checked) })
             ] }),
-            /* @__PURE__ */ jsxs55("label", { className: "flex items-start justify-between gap-3 text-sm text-slate-900 dark:text-slate-100", children: [
-              /* @__PURE__ */ jsxs55("span", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxs54("label", { className: "flex items-start justify-between gap-3 text-sm text-slate-900 dark:text-slate-100", children: [
+              /* @__PURE__ */ jsxs54("span", { className: "min-w-0", children: [
                 /* @__PURE__ */ jsx76("span", { className: "block font-medium", children: "Link to current context" }),
                 /* @__PURE__ */ jsx76("span", { className: "mt-1 block text-xs text-slate-500 dark:text-slate-400", children: "Mirror the current canvas tag and selected buttons while linked." })
               ] }),
               /* @__PURE__ */ jsx76("input", { type: "checkbox", checked: contextLinked, onChange: (event) => onContextLinkedChange(event.target.checked) })
             ] }),
-            /* @__PURE__ */ jsxs55("div", { className: "space-y-2 rounded-2xl border border-slate-200 bg-slate-50/70 p-3 dark:border-slate-800 dark:bg-slate-900/40", children: [
+            /* @__PURE__ */ jsxs54("div", { className: "space-y-2 rounded-2xl border border-slate-200 bg-slate-50/70 p-3 dark:border-slate-800 dark:bg-slate-900/40", children: [
               /* @__PURE__ */ jsx76("div", { className: "text-xs font-semibold tracking-[0.16em] text-slate-500 uppercase dark:text-slate-400", children: "Tags" }),
               /* @__PURE__ */ jsx76("div", { className: "space-y-2", children: (draftSnapshot?.tags ?? []).map((tag) => {
                 const selected = context?.selectedTagId === tag.id;
-                return /* @__PURE__ */ jsxs55("label", { className: "flex items-start gap-3 text-sm text-slate-900 dark:text-slate-100", children: [
+                return /* @__PURE__ */ jsxs54("label", { className: "flex items-start gap-3 text-sm text-slate-900 dark:text-slate-100", children: [
                   /* @__PURE__ */ jsx76(
                     "input",
                     {
@@ -14458,20 +14657,20 @@ function CatalogContextPopover({
                       })
                     }
                   ),
-                  /* @__PURE__ */ jsxs55("span", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsxs54("span", { className: "min-w-0", children: [
                     /* @__PURE__ */ jsx76("span", { className: "block font-medium", children: tag.label }),
                     tag.description ? /* @__PURE__ */ jsx76("span", { className: "block text-xs text-slate-500 dark:text-slate-400", children: tag.description }) : null
                   ] })
                 ] }, tag.id);
               }) })
             ] }),
-            /* @__PURE__ */ jsxs55("div", { className: "space-y-2 rounded-2xl border border-slate-200 bg-slate-50/70 p-3 dark:border-slate-800 dark:bg-slate-900/40", children: [
+            /* @__PURE__ */ jsxs54("div", { className: "space-y-2 rounded-2xl border border-slate-200 bg-slate-50/70 p-3 dark:border-slate-800 dark:bg-slate-900/40", children: [
               /* @__PURE__ */ jsx76("div", { className: "text-xs font-semibold tracking-[0.16em] text-slate-500 uppercase dark:text-slate-400", children: "Selected buttons" }),
-              draftSnapshot?.buttonGroups?.length ? /* @__PURE__ */ jsx76("div", { className: "space-y-3", children: draftSnapshot.buttonGroups.map((group) => /* @__PURE__ */ jsxs55("div", { className: "space-y-2", children: [
+              draftSnapshot?.buttonGroups?.length ? /* @__PURE__ */ jsx76("div", { className: "space-y-3", children: draftSnapshot.buttonGroups.map((group) => /* @__PURE__ */ jsxs54("div", { className: "space-y-2", children: [
                 /* @__PURE__ */ jsx76("div", { className: "text-sm font-medium text-slate-900 dark:text-slate-100", children: group.label }),
                 /* @__PURE__ */ jsx76("div", { className: "space-y-1", children: group.options.map((option) => {
                   const checked = context?.selectedButtons.includes(option.id) ?? false;
-                  return /* @__PURE__ */ jsxs55(
+                  return /* @__PURE__ */ jsxs54(
                     "label",
                     {
                       className: "flex items-start gap-3 text-sm text-slate-900 dark:text-slate-100",
@@ -14493,7 +14692,7 @@ function CatalogContextPopover({
                             })
                           }
                         ),
-                        /* @__PURE__ */ jsxs55("span", { className: "min-w-0", children: [
+                        /* @__PURE__ */ jsxs54("span", { className: "min-w-0", children: [
                           /* @__PURE__ */ jsx76("span", { className: "block", children: option.label }),
                           option.description ? /* @__PURE__ */ jsx76("span", { className: "block text-xs text-slate-500 dark:text-slate-400", children: option.description }) : null
                         ] })
@@ -14504,9 +14703,9 @@ function CatalogContextPopover({
                 }) })
               ] }, group.id)) }) : /* @__PURE__ */ jsx76("div", { className: "text-sm text-slate-500 dark:text-slate-400", children: "No visible trigger options for the selected tag." })
             ] }),
-            /* @__PURE__ */ jsxs55("div", { className: "space-y-2 rounded-2xl border border-slate-200 bg-slate-50/70 p-3 dark:border-slate-800 dark:bg-slate-900/40", children: [
+            /* @__PURE__ */ jsxs54("div", { className: "space-y-2 rounded-2xl border border-slate-200 bg-slate-50/70 p-3 dark:border-slate-800 dark:bg-slate-900/40", children: [
               /* @__PURE__ */ jsx76("div", { className: "text-xs font-semibold tracking-[0.16em] text-slate-500 uppercase dark:text-slate-400", children: "Safety" }),
-              /* @__PURE__ */ jsxs55("label", { className: "flex items-center justify-between gap-3 text-sm text-slate-900 dark:text-slate-100", children: [
+              /* @__PURE__ */ jsxs54("label", { className: "flex items-center justify-between gap-3 text-sm text-slate-900 dark:text-slate-100", children: [
                 /* @__PURE__ */ jsx76("span", { children: "Strict safety" }),
                 /* @__PURE__ */ jsx76(
                   "input",
@@ -14521,7 +14720,7 @@ function CatalogContextPopover({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs55("label", { className: "flex items-center justify-between gap-3 text-sm text-slate-900 dark:text-slate-100", children: [
+              /* @__PURE__ */ jsxs54("label", { className: "flex items-center justify-between gap-3 text-sm text-slate-900 dark:text-slate-100", children: [
                 /* @__PURE__ */ jsx76("span", { children: "Enforce policies" }),
                 /* @__PURE__ */ jsx76(
                   "input",
@@ -14557,8 +14756,8 @@ function CatalogToolbar({
 }) {
   const treeValue = selectedGroupId ?? (ungroupedSelected ? UNGROUPED_TREE_VALUE : void 0);
   const treeOptions = buildCatalogGroupTreeOptions(groups);
-  return /* @__PURE__ */ jsxs55("div", { className: "flex items-center justify-between gap-3", children: [
-    /* @__PURE__ */ jsxs55("div", { className: "flex flex-wrap items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs54("div", { className: "flex items-center justify-between gap-3", children: [
+    /* @__PURE__ */ jsxs54("div", { className: "flex flex-wrap items-center gap-2", children: [
       /* @__PURE__ */ jsx76(
         GroupInputPopoverButton,
         {
@@ -14640,7 +14839,7 @@ function GroupInputPopoverButton({
   useEffect20(() => {
     if (open) setValue(initialValue);
   }, [initialValue, open]);
-  return /* @__PURE__ */ jsxs55(Popover, { open, onOpenChange: setOpen, children: [
+  return /* @__PURE__ */ jsxs54(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx76(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx76(
       "button",
       {
@@ -14655,8 +14854,8 @@ function GroupInputPopoverButton({
         children: icon
       }
     ) }),
-    /* @__PURE__ */ jsx76(PopoverContent, { align: "start", side: "bottom", sideOffset: 8, collisionPadding: 16, className: "w-80 rounded-2xl", children: /* @__PURE__ */ jsxs55("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsxs55("div", { children: [
+    /* @__PURE__ */ jsx76(PopoverContent, { align: "start", side: "bottom", sideOffset: 8, collisionPadding: 16, className: "w-80 rounded-2xl", children: /* @__PURE__ */ jsxs54("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxs54("div", { children: [
         /* @__PURE__ */ jsx76("div", { className: "text-sm font-semibold text-slate-900 dark:text-slate-100", children: title }),
         /* @__PURE__ */ jsx76("p", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: "Names are editor-side catalog labels only." })
       ] }),
@@ -14671,7 +14870,7 @@ function GroupInputPopoverButton({
           autoComplete: "off"
         }
       ),
-      /* @__PURE__ */ jsxs55("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsxs54("div", { className: "flex justify-end gap-2", children: [
         /* @__PURE__ */ jsx76(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setOpen(false), className: "rounded-xl", children: "Cancel" }),
         /* @__PURE__ */ jsx76(
           Button,
@@ -14703,7 +14902,7 @@ function ConfirmPopoverButton({
   onConfirm
 }) {
   const [open, setOpen] = useState33(false);
-  return /* @__PURE__ */ jsxs55(Popover, { open, onOpenChange: setOpen, children: [
+  return /* @__PURE__ */ jsxs54(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx76(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx76(
       "button",
       {
@@ -14718,12 +14917,12 @@ function ConfirmPopoverButton({
         children: icon
       }
     ) }),
-    /* @__PURE__ */ jsx76(PopoverContent, { align: "start", side: "bottom", sideOffset: 8, collisionPadding: 16, className: "w-80 rounded-2xl", children: /* @__PURE__ */ jsxs55("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsxs55("div", { children: [
+    /* @__PURE__ */ jsx76(PopoverContent, { align: "start", side: "bottom", sideOffset: 8, collisionPadding: 16, className: "w-80 rounded-2xl", children: /* @__PURE__ */ jsxs54("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxs54("div", { children: [
         /* @__PURE__ */ jsx76("div", { className: "text-sm font-semibold text-slate-900 dark:text-slate-100", children: title }),
         /* @__PURE__ */ jsx76("p", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: description })
       ] }),
-      /* @__PURE__ */ jsxs55("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsxs54("div", { className: "flex justify-end gap-2", children: [
         /* @__PURE__ */ jsx76(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setOpen(false), className: "rounded-xl", children: "Cancel" }),
         /* @__PURE__ */ jsx76(
           Button,
@@ -14748,7 +14947,7 @@ function ToolbarIconButton({
   disabled = false,
   onClick
 }) {
-  return /* @__PURE__ */ jsxs55(Tooltip, { children: [
+  return /* @__PURE__ */ jsxs54(Tooltip, { children: [
     /* @__PURE__ */ jsx76(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx76(
       "button",
       {
@@ -14782,7 +14981,7 @@ function buildCatalogGroupTreeOptions(groups, parentId = null) {
 }
 
 // src/workspace/bottom-panel/index.tsx
-import { Fragment as Fragment16, jsx as jsx77, jsxs as jsxs56 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx77, jsxs as jsxs55 } from "react/jsx-runtime";
 var DRAG_MIME = "application/x-service-builder-service";
 function BottomConsolePanel({ controller, errors, activeServices, allServices, onServiceDragStateChange }) {
   const canvas = useCanvas21();
@@ -14898,6 +15097,7 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
   useEffect21(() => {
     const editor = canvas.api.editor;
     const ensured = editor.getCatalog?.() ?? editor.ensureCatalog?.();
+    console.log(ensured);
     if (ensured) setCatalogState(ensured);
     const offCatalogChange = canvas.api.on("catalog:change", ({ catalog }) => {
       const next = catalog ?? editor.getCatalog?.() ?? editor.ensureCatalog?.();
@@ -15115,7 +15315,7 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
       }
     ) });
   }, [controller.activeTab, activeSearch, allSearch, setActiveSearch, setAllSearch]);
-  return /* @__PURE__ */ jsxs56("div", { ref: panelContainerRef, className: "pointer-events-none absolute inset-0", children: [
+  return /* @__PURE__ */ jsxs55("div", { ref: panelContainerRef, className: "pointer-events-none absolute inset-0", children: [
     /* @__PURE__ */ jsx77(
       ServicePickerDialog,
       {
@@ -15129,7 +15329,7 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
         onConfirm: handleConfirmAssignServices
       }
     ),
-    /* @__PURE__ */ jsxs56(
+    /* @__PURE__ */ jsxs55(
       Panel,
       {
         ref: panelRef,
@@ -15160,8 +15360,8 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
           ["--bottom-panel-height"]: controller.height + "px"
         },
         children: [
-          /* @__PURE__ */ jsxs56("div", { className: "flex items-center justify-between gap-3 border-b border-slate-200/80 px-3 py-2 dark:border-slate-800/80", children: [
-            /* @__PURE__ */ jsx77("div", { className: "flex min-w-0 items-center gap-1", children: tabs.map((tab) => /* @__PURE__ */ jsxs56(
+          /* @__PURE__ */ jsxs55("div", { className: "flex items-center justify-between gap-3 border-b border-slate-200/80 px-3 py-2 dark:border-slate-800/80", children: [
+            /* @__PURE__ */ jsx77("div", { className: "flex min-w-0 items-center gap-1", children: tabs.map((tab) => /* @__PURE__ */ jsxs55(
               "button",
               {
                 type: "button",
@@ -15187,8 +15387,8 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
               },
               tab.id
             )) }),
-            /* @__PURE__ */ jsxs56("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsxs56(
+            /* @__PURE__ */ jsxs55("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxs55(
                 "button",
                 {
                   type: "button",
@@ -15203,7 +15403,7 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs56("div", { className: "hidden items-center gap-2 rounded-xl border border-slate-200/80 px-2 py-1 text-xs text-slate-500 md:flex dark:border-slate-800 dark:text-slate-400", children: [
+              /* @__PURE__ */ jsxs55("div", { className: "hidden items-center gap-2 rounded-xl border border-slate-200/80 px-2 py-1 text-xs text-slate-500 md:flex dark:border-slate-800 dark:text-slate-400", children: [
                 /* @__PURE__ */ jsx77(LuGripHorizontal, {}),
                 /* @__PURE__ */ jsx77("span", { children: "Resize from top or side edges" })
               ] }),
@@ -15220,13 +15420,13 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsxs56("div", { className: "flex min-h-0 flex-1 flex-col bg-slate-50/70 dark:bg-slate-950/40", children: [
-            controller.activeTab !== "console" ? /* @__PURE__ */ jsxs56("div", { className: "flex items-center justify-between gap-3 border-b border-slate-200/70 px-4 py-3 dark:border-slate-800/70", children: [
-              /* @__PURE__ */ jsxs56("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsxs55("div", { className: "flex min-h-0 flex-1 flex-col bg-slate-50/70 dark:bg-slate-950/40", children: [
+            controller.activeTab !== "console" ? /* @__PURE__ */ jsxs55("div", { className: "flex items-center justify-between gap-3 border-b border-slate-200/70 px-4 py-3 dark:border-slate-800/70", children: [
+              /* @__PURE__ */ jsxs55("div", { className: "min-w-0", children: [
                 /* @__PURE__ */ jsx77("p", { className: "text-sm font-semibold text-slate-900 dark:text-slate-100", children: controller.activeTab === "activeServices" ? "Connected services" : "Service catalog" }),
                 /* @__PURE__ */ jsx77("p", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: controller.activeTab === "activeServices" ? "Bound services can be highlighted back onto the canvas from here." : catalogPanelMode === "catalog" ? "Browse source services through manual editor-side catalog groups while keeping detail and compatibility visible." : "Browse every source service, filter by current visible-group compatibility, and drag it onto nodes." })
               ] }),
-              /* @__PURE__ */ jsx77("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxs56("div", { className: "relative flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx77("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxs55("div", { className: "relative flex items-center gap-2", children: [
                 searchOpen ? Search : null,
                 /* @__PURE__ */ jsx77(
                   HeaderIconButton,
@@ -15237,7 +15437,7 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
                     children: /* @__PURE__ */ jsx77(FiSearch, {})
                   }
                 ),
-                controller.activeTab === "allServices" ? /* @__PURE__ */ jsxs56(Fragment16, { children: [
+                controller.activeTab === "allServices" ? /* @__PURE__ */ jsxs55(Fragment16, { children: [
                   /* @__PURE__ */ jsx77(
                     CatalogContextPopover,
                     {
@@ -15365,7 +15565,7 @@ function HeaderIconButton({
   active = false,
   onClick
 }) {
-  return /* @__PURE__ */ jsxs56(Tooltip, { children: [
+  return /* @__PURE__ */ jsxs55(Tooltip, { children: [
     /* @__PURE__ */ jsx77(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx77(
       "button",
       {
@@ -15383,7 +15583,7 @@ function HeaderIconButton({
   ] });
 }
 function CatalogModeSwitch({ mode, onChange }) {
-  return /* @__PURE__ */ jsxs56("div", { className: "inline-flex items-center rounded-xl border border-slate-200 bg-white p-1 dark:border-slate-800 dark:bg-slate-950", children: [
+  return /* @__PURE__ */ jsxs55("div", { className: "inline-flex items-center rounded-xl border border-slate-200 bg-white p-1 dark:border-slate-800 dark:bg-slate-950", children: [
     /* @__PURE__ */ jsx77(
       "button",
       {
@@ -16039,7 +16239,7 @@ var workspaceBackend = createMemoryWorkspaceBackend({
 });
 
 // src/index.tsx
-import { jsx as jsx78, jsxs as jsxs57 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx78, jsxs as jsxs56 } from "react/jsx-runtime";
 var inputRegistry = createInputRegistry();
 registerEntries(inputRegistry);
 function WorkspaceLayout({ onShare, onPlay, menu }) {
@@ -16049,9 +16249,9 @@ function WorkspaceLayout({ onShare, onPlay, menu }) {
   const bottomPanel = useBottomConsolePanel();
   const [draggingServiceId, setDraggingServiceId] = useState35(null);
   const serviceSummary = useMemo35(() => buildServiceSummaries(canvas, ws), [canvas.props, canvas.selectionInfo, canvas.activeId, ws.services.data]);
-  return /* @__PURE__ */ jsx78(FallbackQuickAddProvider, { children: /* @__PURE__ */ jsx78(NodeContextMenuProvider, { children: /* @__PURE__ */ jsx78(FallbackEditorModalProvider, { children: /* @__PURE__ */ jsxs57("div", { className: "relative flex h-screen flex-col overflow-hidden *:font-display", children: [
+  return /* @__PURE__ */ jsx78(FallbackQuickAddProvider, { children: /* @__PURE__ */ jsx78(NodeContextMenuProvider, { children: /* @__PURE__ */ jsx78(FallbackEditorModalProvider, { children: /* @__PURE__ */ jsxs56("div", { className: "relative flex h-screen flex-col overflow-hidden *:font-display", children: [
     /* @__PURE__ */ jsx78("div", { className: "pointer-events-none absolute top-4 left-1/2 z-30 w-full max-w-2xl -translate-x-1/2 px-4", children: /* @__PURE__ */ jsx78("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx78(WorkspaceBootStatusSurface, { boot: ws.boot }) }) }),
-    /* @__PURE__ */ jsxs57("div", { className: "flex grow overflow-hidden", children: [
+    /* @__PURE__ */ jsxs56("div", { className: "flex grow overflow-hidden", children: [
       /* @__PURE__ */ jsx78(left_default, { menu }),
       /* @__PURE__ */ jsx78(
         CanvasPanel,
@@ -16076,8 +16276,86 @@ function WorkspaceLayout({ onShare, onPlay, menu }) {
     ) })
   ] }) }) }) });
 }
+var Styles = `
+/* line theming via CSS vars (can be overridden upstream) */
+:root {
+    --tree-line-color: #d1d5db; /* gray-300 */
+    --tree-line-width: 1px;
+    --tree-line-style: solid; /* solid | dashed | dotted */
+    --elbow-v-h: 100%
+}
+
+/* container for each row */
+.tree-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem; /* matches your gap-2 */
+    /*padding: 0.25rem 0.5rem; !* py-1 px-2 *!*/
+}
+
+/* left rail: N ancestor columns (width given inline) */
+.tree-rail {
+    display: flex;
+    position: relative;
+}
+
+/* a single ancestor column; width is set inline to \`indent\` */
+.tree-col {
+    position: relative;
+}
+
+/* draw vertical guideline IF data-show="1" */
+.tree-col[data-show="1"]::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    border-left: var(--tree-line-width) var(--tree-line-style) var(--tree-line-color);
+}
+
+/* the elbow cell for the current node (one per row) */
+.tree-elbow {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* vertical segment (full for mid siblings, half for last) */
+.tree-elbow::before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 0;
+    height: var(--elbow-v-h, 100%); /* "50%" for last sibling, else "100%" */
+    border-left: var(--tree-line-width) var(--tree-line-style) var(--tree-line-color);
+}
+
+/* horizontal segment (elbow) from center to the content area */
+.tree-elbow::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateY(-50%);
+    width: 50%;
+    border-top: var(--tree-line-width) var(--tree-line-style) var(--tree-line-color);
+}
+
+/* apply to the element that receives selectedRowClassName / rowClassName */
+.tree-row-clip {
+    background-clip: content-box; /* don\u2019t paint under the left padding (indent) */
+}
+
+`;
 function ServiceBuilder({ backend, actor, onShare, onPlay, menu }) {
-  return /* @__PURE__ */ jsx78(InputsProvider, { initialRegistry: inputRegistry, children: /* @__PURE__ */ jsx78(Workspace, { backend, actor, children: () => /* @__PURE__ */ jsx78(WorkspaceLayout, { onShare, onPlay, menu }) }) });
+  return /* @__PURE__ */ jsxs56(Fragment17, { children: [
+    /* @__PURE__ */ jsx78("style", { children: Styles }),
+    /* @__PURE__ */ jsx78(InputsProvider, { initialRegistry: inputRegistry, children: /* @__PURE__ */ jsx78(Workspace, { backend, actor, children: () => /* @__PURE__ */ jsx78(WorkspaceLayout, { onShare, onPlay, menu }) }) })
+  ] });
 }
 function ServiceBuilderWorkspace({ onShare, onPlay, menu }) {
   return /* @__PURE__ */ jsx78(ServiceBuilder, { backend: workspaceBackend, actor: workspaceActor, onShare, onPlay, menu });