@timeax/service-builder 0.0.10 → 0.0.12

package/dist/index.js

@@ -4234,6 +4234,8 @@ import { LuTags as LuTags2 } from "react-icons/lu";
 import { MdOutlineRadioButtonChecked as MdOutlineRadioButtonChecked2 } from "react-icons/md";
 import { RxInput as RxInput2 } from "react-icons/rx";
 import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+var ACTIVE_NODE_RING_CLASS = "ring-2 ring-sky-300 shadow-lg shadow-sky-300/20 dark:ring-sky-400";
+var HIGHLIGHT_NODE_OUTLINE_CLASS = "outline-2 outline-solid outline-amber-300 dark:outline-amber-200";
 function NodeShell({
   label,
   icon,
@@ -4264,7 +4266,7 @@ function NodeShell({
         isManualHighlighted ? "manual-highlighted" : "",
         focusDimLevel && focusDimLevel !== "none" ? `dim-${focusDimLevel}` : ""
       ].filter(Boolean).join(" "),
-      className: "group relative min-w-44 rounded-lg bg-white p-3 ring-1 ring-slate-200 shadow-[0_4px_12px_rgba(0,0,0,0.05)] transition-all duration-200 dark:bg-slate-900 dark:ring-slate-700 " + (selected ? "ring-2 ring-blue-500 shadow-lg shadow-blue-500/20 " : "hover:shadow-lg ") + (isActiveNode ? "ring-2 ring-blue-500 shadow-lg shadow-blue-500/25 " : "") + (isCurrentTag ? "ring-2 ring-emerald-500 bg-emerald-50/70 shadow-lg shadow-emerald-500/25 dark:bg-emerald-500/10 " : "") + (isVisibleGroupField ? "ring-2 ring-emerald-300 bg-emerald-50/35 dark:bg-emerald-500/5 " : "") + (isRelatedTag ? "ring-1 ring-teal-300 bg-teal-50/25 dark:bg-teal-500/8 " : "") + (isManualHighlighted ? "outline-2 outline-amber-400 outline-solid " : "") + (draggingService && canAssignService2 ? "border border-dashed border-emerald-400 " : "") + (!canAssignService2 && draggingService ? "opacity-70 " : "") + dimClass,
+      className: "group relative min-w-44 rounded-lg bg-white p-3 ring-1 ring-slate-200 shadow-[0_4px_12px_rgba(0,0,0,0.05)] transition-all duration-200 dark:bg-slate-900 dark:ring-slate-700 " + (selected ? `${ACTIVE_NODE_RING_CLASS} ` : "hover:shadow-lg ") + (isActiveNode ? `${ACTIVE_NODE_RING_CLASS} ` : "") + (isCurrentTag ? "ring-2 ring-emerald-500 bg-emerald-50/70 shadow-lg shadow-emerald-500/25 dark:bg-emerald-500/10 " : "") + (isVisibleGroupField ? "ring-2 ring-emerald-300 bg-emerald-50/35 dark:bg-emerald-500/5 " : "") + (isRelatedTag ? "ring-1 ring-teal-300 bg-teal-50/25 dark:bg-teal-500/8 " : "") + (isManualHighlighted ? `${HIGHLIGHT_NODE_OUTLINE_CLASS} ` : "") + (draggingService && canAssignService2 ? "border border-dashed border-emerald-400 " : "") + (!canAssignService2 && draggingService ? "opacity-70 " : "") + dimClass,
       onDragOver: (event) => {
         if (!canAcceptDropPayload?.(event.dataTransfer)) return;
         event.preventDefault();
@@ -4361,7 +4363,7 @@ function OptionNode(props) {
           props.data.isManualHighlighted ? "manual-highlighted" : "",
           props.data.focusDimLevel && props.data.focusDimLevel !== "none" ? `dim-${props.data.focusDimLevel}` : ""
         ].filter(Boolean).join(" "),
-        className: "relative rounded-full border px-4 py-1.5 text-sm bg-white text-slate-800 transition dark:bg-slate-900 dark:text-slate-200 " + (props.selected ? "border-blue-500 bg-blue-50 text-blue-700 dark:bg-blue-500/15 " : "border-slate-300 dark:border-slate-700 ") + (props.data.isActiveNode ? "ring-2 ring-blue-500 shadow-lg shadow-blue-500/25 " : "") + (props.data.isCurrentTag ? "ring-2 ring-emerald-500 bg-emerald-50/70 dark:bg-emerald-500/10 " : "") + (props.data.isVisibleGroupField ? "ring-2 ring-emerald-300 bg-emerald-50/35 dark:bg-emerald-500/5 " : "") + (props.data.isRelatedTag ? "ring-1 ring-teal-300 bg-teal-50/25 dark:bg-teal-500/8 " : "") + (props.data.isManualHighlighted ? "outline-2 outline-solid outline-amber-400 " : "") + (props.data.focusDimLevel === "soft" ? "opacity-80 " : props.data.focusDimLevel === "medium" ? "opacity-[0.55] " : props.data.focusDimLevel === "strong" ? "opacity-35 " : ""),
+        className: "relative rounded-full border px-4 py-1.5 text-sm bg-white text-slate-800 transition dark:bg-slate-900 dark:text-slate-200 " + (props.selected ? "border-sky-300 bg-sky-50 text-sky-700 dark:bg-sky-500/15 dark:border-sky-400 " : "border-slate-300 dark:border-slate-700 ") + (props.data.isActiveNode ? `${ACTIVE_NODE_RING_CLASS} ` : "") + (props.data.isCurrentTag ? "ring-2 ring-emerald-500 bg-emerald-50/70 dark:bg-emerald-500/10 " : "") + (props.data.isVisibleGroupField ? "ring-2 ring-emerald-300 bg-emerald-50/35 dark:bg-emerald-500/5 " : "") + (props.data.isRelatedTag ? "ring-1 ring-teal-300 bg-teal-50/25 dark:bg-teal-500/8 " : "") + (props.data.isManualHighlighted ? `${HIGHLIGHT_NODE_OUTLINE_CLASS} ` : "") + (props.data.focusDimLevel === "soft" ? "opacity-80 " : props.data.focusDimLevel === "medium" ? "opacity-[0.55] " : props.data.focusDimLevel === "strong" ? "opacity-35 " : ""),
         onDragOver: (event) => {
           if (!props.data.canAcceptDropPayload?.(event.dataTransfer)) return;
           event.preventDefault();
@@ -4388,14 +4390,20 @@ function OptionNode(props) {
 function CommentNode(props) {
   const thread = props.data.thread;
   const main = thread?.messages?.find((message) => message.isMain) ?? thread?.messages?.[0];
-  return /* @__PURE__ */ jsxs11("div", { className: "h-48 w-64 rounded-lg border border-[#E0E0E0] bg-[#FEFBEA] shadow-md transition-all hover:shadow-lg dark:border-[#555] dark:bg-[#4a4a38]", children: [
-    /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 border-b border-[#E0E0E0]/70 px-3 py-2 text-xs font-medium text-slate-600 dark:border-[#555] dark:text-slate-300", children: [
-      /* @__PURE__ */ jsx15(BsChatSquareQuote2, {}),
-      /* @__PURE__ */ jsx15("span", { children: main?.authorName ?? "Comment" })
-    ] }),
-    /* @__PURE__ */ jsx15("div", { className: "px-3 py-2 text-sm leading-5 text-slate-700 dark:text-slate-200", children: main?.body ?? "" }),
-    /* @__PURE__ */ jsx15("div", { className: "absolute bottom-2 right-2 text-[10px] uppercase tracking-[0.14em] text-slate-400", children: thread?.resolved ? "Resolved" : "Open" })
-  ] });
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: "h-48 w-64 rounded-lg border border-[#E0E0E0] bg-[#FEFBEA] shadow-md transition-all hover:shadow-lg dark:border-[#555] dark:bg-[#4a4a38] " + (props.selected ? `${ACTIVE_NODE_RING_CLASS} ` : ""),
+      children: [
+        /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 border-b border-[#E0E0E0]/70 px-3 py-2 text-xs font-medium text-slate-600 dark:border-[#555] dark:text-slate-300", children: [
+          /* @__PURE__ */ jsx15(BsChatSquareQuote2, {}),
+          /* @__PURE__ */ jsx15("span", { children: main?.authorName ?? "Comment" })
+        ] }),
+        /* @__PURE__ */ jsx15("div", { className: "px-3 py-2 text-sm leading-5 text-slate-700 dark:text-slate-200", children: main?.body ?? "" }),
+        /* @__PURE__ */ jsx15("div", { className: "absolute bottom-2 right-2 text-[10px] uppercase tracking-[0.14em] text-slate-400", children: thread?.resolved ? "Resolved" : "Open" })
+      ]
+    }
+  );
 }
 var nodeTypes = {
   tag: TagNode,
@@ -5275,7 +5283,6 @@ function CanvasPanel({
   }, [canvas.api]);
   function setSnapshot(event) {
     const nextSnapshot = event?.snapshot;
-    console.log("this is the changed...");
     if (!nextSnapshot) return;
     const nextHash = hashSnapshot(nextSnapshot);
     setCurrentSnapshotHash((current) => current === nextHash ? current : nextHash);
@@ -5287,7 +5294,6 @@ function CanvasPanel({
   useEffect8(() => {
     const catalogChange = canvas.api.on("catalog:change", setSnapshot);
     const offEditorChange = canvas.api.on("editor:change", (event) => {
-      console.log("this snapshot changed via the editor...");
       setSnapshot(event);
       if (event?.reason === "mutation" || event?.reason === "transaction") {
         setHistoryState({ canUndo: true, canRedo: false });
@@ -6912,27 +6918,62 @@ var Header = ({ menu = [] }) => {
 var header_default = Header;
 
 // src/components/ui/scroll-area.tsx
-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) {
+import "react";
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
+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: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx27(ScrollBar, {}),
+        /* @__PURE__ */ jsx27(ScrollAreaPrimitive.Corner, {})
+      ]
+    }
+  );
+}
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
   return /* @__PURE__ */ jsx27(
-    "div",
+    ScrollAreaPrimitive.ScrollAreaScrollbar,
     {
       "data-slot": "scroll-area-scrollbar",
-      ref,
-      "aria-hidden": "true",
+      orientation,
       className: cn(
-        "pointer-events-none absolute opacity-0",
-        orientation === "vertical" ? "right-0 top-0 h-full w-0" : "bottom-0 left-0 h-0 w-full",
+        "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",
         className
       ),
-      ...props
+      ...props,
+      children: /* @__PURE__ */ jsx27(
+        ScrollAreaPrimitive.ScrollAreaThumb,
+        {
+          "data-slot": "scroll-area-thumb",
+          className: "relative flex-1 rounded-full bg-border"
+        }
+      )
     }
   );
-});
+}
 
 // src/panels/left/assets/index.tsx
 import { useInputs } from "@timeax/digital-service-engine/react";
@@ -6940,7 +6981,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 jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
 function toTitle(value) {
   return value.split(/[-_:]/g).filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
 }
@@ -6972,8 +7013,8 @@ function AssetsPanel() {
   const filteredTemplates = lower ? templates2.filter(
     (item) => item.name.toLowerCase().includes(lower) || String(item.kind ?? "").toLowerCase().includes(lower)
   ) : templates2;
-  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: [
+  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: [
       /* @__PURE__ */ jsx28(CiSearch, { className: "pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-slate-400" }),
       /* @__PURE__ */ jsx28(
         "input",
@@ -6985,13 +7026,13 @@ function AssetsPanel() {
         }
       )
     ] }),
-    /* @__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__ */ 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__ */ jsx28(LuShapes, {}),
           "Built-in Inputs"
         ] }),
-        /* @__PURE__ */ jsx28("div", { className: "grid grid-cols-2 gap-2", children: filteredBuiltins.length ? filteredBuiltins.map((item) => /* @__PURE__ */ jsxs20(
+        /* @__PURE__ */ jsx28("div", { className: "grid grid-cols-2 gap-2", children: filteredBuiltins.length ? filteredBuiltins.map((item) => /* @__PURE__ */ jsxs21(
           "button",
           {
             type: "button",
@@ -7016,13 +7057,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__ */ 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__ */ 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__ */ 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__ */ jsxs20(
+        /* @__PURE__ */ jsx28("div", { className: "grid grid-cols-2 gap-2", children: filteredTemplates.length ? filteredTemplates.map((item) => /* @__PURE__ */ jsxs21(
           "button",
           {
             type: "button",
@@ -8232,7 +8273,7 @@ import { VscChevronRight } from "react-icons/vsc";
 
 // src/components/sort-tree/node.tsx
 import * as React21 from "react";
-import { jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
 function Node({ node, matched, isEditing, onCommit, onCancel }) {
   const spanRef = React21.useRef(null);
   React21.useEffect(() => {
@@ -8263,7 +8304,7 @@ function Node({ node, matched, isEditing, onCommit, onCancel }) {
       onCancel?.();
     }
   };
-  return /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2 truncate " + (matched ? "rounded bg-yellow-200/50 px-1" : ""), children: [
+  return /* @__PURE__ */ jsxs22("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",
@@ -8281,7 +8322,7 @@ function Node({ node, matched, isEditing, onCommit, onCancel }) {
 }
 
 // src/components/sort-tree/node-row.tsx
-import { jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
 function NodeRow({
   node,
   path,
@@ -8312,7 +8353,7 @@ function NodeRow({
     e.stopPropagation();
     callback?.(e);
   };
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "div",
     {
       className: ["tree-row", rowClassName || "", isDragging ? "is-dragging" : ""].join(" "),
@@ -8326,7 +8367,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__ */ jsxs22(
+        /* @__PURE__ */ jsx33("div", { className: "min-w-0 flex-1", children: isDragging ? /* @__PURE__ */ jsxs23(
           "div",
           {
             "aria-hidden": "true",
@@ -8398,7 +8439,7 @@ function NodeRow({
 }
 
 // src/components/sort-tree/internal/render-row.tsx
-import { jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
 var ZONE_HEIGHT = 6;
 function useRenderRow(args) {
   const {
@@ -8489,7 +8530,7 @@ function useRenderRow(args) {
             // fallback
           },
           onMouseDown: (e) => onRowPointerDown(e, rIndex, r.node),
-          children: /* @__PURE__ */ jsxs23("div", { className: cn(skinClass, activeClassString), style: { borderRadius: "inherit" }, children: [
+          children: /* @__PURE__ */ jsxs24("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,
@@ -8597,7 +8638,7 @@ function useRenderRow(args) {
 }
 
 // src/components/sort-tree/sort-tree.tsx
-import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
 function SortTreeInner(props, ref) {
   const {
     data,
@@ -8890,7 +8931,7 @@ function SortTreeInner(props, ref) {
       loadChildren
     ]
   );
-  return /* @__PURE__ */ jsxs24(DndContext, { sensors, onDragStart: handleDragStart, onDragEnd: handleDragEnd, collisionDetection, children: [
+  return /* @__PURE__ */ jsxs25(DndContext, { sensors, onDragStart: handleDragStart, onDragEnd: handleDragEnd, collisionDetection, children: [
     /* @__PURE__ */ jsx35("div", { className, style, tabIndex: 0, onKeyDown, children: height ? /* @__PURE__ */ jsx35(
       List,
       {
@@ -9184,7 +9225,69 @@ 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 jsxs25 } from "react/jsx-runtime";
+
+// src/panels/left/layers/reorder.ts
+function isOptionId(id) {
+  return id.startsWith("o:");
+}
+function parentPathKey(path) {
+  if (!path?.length) return "";
+  return path.map(String).join("/");
+}
+function canDropSameParentOnly(args) {
+  if (!args.from) return true;
+  return parentPathKey(args.from.parentPath) === parentPathKey(args.to.parentPath);
+}
+function canDropFieldsSameParentOnly(args) {
+  if (!canDropSameParentOnly(args)) return false;
+  if (!args.dragged) return true;
+  const draggedId = String(args.dragged.id);
+  const parentId = args.to.parent ? String(args.to.parent.id) : "";
+  if (isOptionId(draggedId)) {
+    return parentId.startsWith("f:");
+  }
+  return parentId === "";
+}
+function isReorderLike(detail) {
+  return detail.type === "move" || detail.type === "reorder";
+}
+function applyTagTreeReorder(detail, editor) {
+  if (!isReorderLike(detail)) return false;
+  detail.preventDefault();
+  editor.placeNode(String(detail.node.id), { index: detail.to.index });
+  return true;
+}
+function applyFieldTreeReorder(detail, args) {
+  if (!isReorderLike(detail)) return false;
+  detail.preventDefault();
+  const nodeId = String(detail.node.id);
+  if (isOptionId(nodeId)) {
+    args.editor.placeOption(nodeId, { index: detail.to.index });
+    return true;
+  }
+  const writeAndPlace = () => {
+    args.editor.patchProps?.((props) => {
+      const map = props.order_for_tags ??= {};
+      map[args.currentTagId] = [...args.contextFieldOrder];
+    });
+    args.editor.placeNode(nodeId, {
+      scopeTagId: args.currentTagId,
+      index: detail.to.index
+    });
+  };
+  if (typeof args.editor.transact === "function" && typeof args.editor.patchProps === "function") {
+    args.editor.transact("Reorder field in context", writeAndPlace);
+    return true;
+  }
+  args.editor.placeNode(nodeId, {
+    scopeTagId: args.currentTagId,
+    index: detail.to.index
+  });
+  return true;
+}
+
+// src/panels/left/layers/index.tsx
+import { jsx as jsx38, jsxs as jsxs26 } from "react/jsx-runtime";
 function filterTree(nodes, query) {
   if (!query.trim()) return nodes;
   const lower = query.toLowerCase();
@@ -9223,6 +9326,7 @@ var Layers = () => {
     canvas.api.addToSelection(ids);
   };
   const handleTagChange = (_next, detail) => {
+    if (applyTagTreeReorder(detail, canvas.api.editor)) return;
     detail.preventDefault?.();
     if (detail.type === "update") {
       canvas.api.editor.editLabel(detail.node.id, detail.node.title);
@@ -9234,6 +9338,13 @@ var Layers = () => {
     }
   };
   const handleFieldChange = (_next, detail) => {
+    if (applyFieldTreeReorder(detail, {
+      editor: canvas.api.editor,
+      currentTagId: canvas.api.selection.currentTag?.() ?? "t:root",
+      contextFieldOrder: canvas.layers.fields.map((node) => String(node.id)).filter((id) => !id.startsWith("o:"))
+    })) {
+      return;
+    }
     if (detail.type === "update") {
       detail.preventDefault();
       canvas.api.editor.editLabel(detail.node.id, detail.node.title);
@@ -9262,7 +9373,7 @@ var Layers = () => {
   const handleFieldSearchBlur = () => {
     if (!fieldSearch.trim()) setIsFieldSearchOpen(false);
   };
-  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: [
+  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: [
     /* @__PURE__ */ jsx38(
       Panel,
       {
@@ -9271,13 +9382,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__ */ 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: [
+        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: [
               /* @__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__ */ jsxs25("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-1", children: [
               /* @__PURE__ */ jsx38(
                 "button",
                 {
@@ -9298,7 +9409,7 @@ var Layers = () => {
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsxs25("div", { className: "mt-3 flex min-h-0 flex-1 flex-col gap-3", children: [
+          /* @__PURE__ */ jsxs26("div", { className: "mt-3 flex min-h-0 flex-1 flex-col gap-3", children: [
             isTagSearchOpen || hasTagSearch ? /* @__PURE__ */ jsx38(
               PanelSearch,
               {
@@ -9328,6 +9439,7 @@ var Layers = () => {
                 value: canvas.selectionInfo.tagIds,
                 rowClassName: "mb-1 rounded-xl border border-transparent px-1 hover:border-slate-200 hover:bg-slate-50 dark:hover:border-slate-800 dark:hover:bg-slate-900/70",
                 data: tags,
+                canDrop: canDropSameParentOnly,
                 activeClassName: (e) => e.node.id === canvas.activeId ? "border-blue-300! bg-blue-50/80 dark:border-blue-500/40! dark:bg-blue-500/10!" : "",
                 onChange: handleTagChange,
                 onContextMenu: (detail) => {
@@ -9356,13 +9468,13 @@ var Layers = () => {
         ] })
       }
     ),
-    /* @__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__ */ 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__ */ 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__ */ jsxs25("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-1", children: [
           /* @__PURE__ */ jsx38(
             "button",
             {
@@ -9404,7 +9516,7 @@ var Layers = () => {
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxs25("div", { className: "mt-3 flex min-h-0 flex-1 flex-col gap-3", children: [
+      /* @__PURE__ */ jsxs26("div", { className: "mt-3 flex min-h-0 flex-1 flex-col gap-3", children: [
         isFieldSearchOpen || hasFieldSearch ? /* @__PURE__ */ jsx38(
           PanelSearch,
           {
@@ -9448,6 +9560,7 @@ var Layers = () => {
             value: [...canvas.selectionInfo.fieldIds, ...canvas.selectionInfo.optionIds],
             rowClassName: "mb-1 rounded-xl border border-transparent px-1 hover:border-slate-200 hover:bg-slate-50 dark:hover:border-slate-800 dark:hover:bg-slate-900/70",
             data: fields,
+            canDrop: canDropFieldsSameParentOnly,
             onChange: handleFieldChange,
             onContextMenu: (detail) => {
               const nodeId = String(detail.node.id);
@@ -9547,7 +9660,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 jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs27 } from "react/jsx-runtime";
 var Left = ({ menu }) => {
   const tabClassName = cn(
     "rounded-xl! py-2! shadow-none!",
@@ -9561,15 +9674,15 @@ var Left = ({ menu }) => {
       edges: ["right"],
       maxWidth: 420,
       minWidth: 320,
-      children: /* @__PURE__ */ jsxs26("div", { className: "flex h-full flex-col", children: [
+      children: /* @__PURE__ */ jsxs27("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__ */ 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("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(MdOutlineLayers, {}),
               /* @__PURE__ */ jsx40("span", { children: "Layers" })
             ] }) }),
-            /* @__PURE__ */ jsx40(TabsTrigger, { className: tabClassName, value: "assets", children: /* @__PURE__ */ jsxs26("span", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx40(TabsTrigger, { className: tabClassName, value: "assets", children: /* @__PURE__ */ jsxs27("span", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx40(CiGrid32, {}),
               /* @__PURE__ */ jsx40("span", { children: "Assets" })
             ] }) })
@@ -9589,7 +9702,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 jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
 function getInitials(name) {
   const parts = name.trim().split(/\s+/).filter(Boolean);
   if (!parts.length) return "?";
@@ -9651,22 +9764,22 @@ var Users = ({ users, onViewUser, onSetMain, onToggleAdmin, onRemoveUser, onInvi
       return bScore - aScore || a.name.localeCompare(b.name);
     });
   }, [users]);
-  return /* @__PURE__ */ jsxs27(Popover, { children: [
-    /* @__PURE__ */ jsx41(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(Popover, { children: [
+    /* @__PURE__ */ jsx41(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs28(
       "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__ */ 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__ */ 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__ */ 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__ */ 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 > 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
             ] }) : null
@@ -9675,14 +9788,14 @@ var Users = ({ users, onViewUser, onSetMain, onToggleAdmin, onRemoveUser, onInvi
         ]
       }
     ) }),
-    /* @__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__ */ 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__ */ 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__ */ jsxs27(
+        /* @__PURE__ */ jsxs28(
           Button,
           {
             type: "button",
@@ -9704,9 +9817,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__ */ 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: [
+            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: [
                   /* @__PURE__ */ jsx41(AvatarImage, { src: user.avatar, alt: user.name }),
                   /* @__PURE__ */ jsx41(AvatarFallback, { children: getInitials(user.name) })
                 ] }),
@@ -9720,9 +9833,9 @@ var Users = ({ users, onViewUser, onSetMain, onToggleAdmin, onRemoveUser, onInvi
                   }
                 )
               ] }),
-              /* @__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__ */ 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__ */ 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 })
                   ] }),
@@ -9748,7 +9861,7 @@ var Users = ({ users, onViewUser, onSetMain, onToggleAdmin, onRemoveUser, onInvi
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs27("div", { className: "mt-3 flex flex-wrap gap-2", children: [
+                /* @__PURE__ */ jsxs28("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 })
                 ] })
@@ -9768,7 +9881,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 jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs29 } from "react/jsx-runtime";
 var Header2 = ({ onShare, onPlay }) => {
   const ws = useWorkspace9();
   const canvas = useCanvas6();
@@ -9803,8 +9916,8 @@ var Header2 = ({ onShare, onPlay }) => {
   const onShareClick = () => {
     onShare?.(ws.snapshot.data);
   };
-  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: [
+  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: [
       /* @__PURE__ */ jsx42(users_default, { users }),
       /* @__PURE__ */ jsx42(
         BuilderIconButton,
@@ -9866,7 +9979,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 jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
 var OPEN_DB_NAME = "dgp-cache";
 var OPEN_STORE_NAME = "kv";
 var OPEN_NS = "comment-thread-open";
@@ -9949,7 +10062,7 @@ function PersonAvatar({
   sizeClass = "h-8 w-8",
   fallback
 }) {
-  return /* @__PURE__ */ jsxs29(Avatar, { className: sizeClass, children: [
+  return /* @__PURE__ */ jsxs30(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) })
   ] });
@@ -9961,7 +10074,7 @@ function ReplyInputRow({
   onSubmit,
   className
 }) {
-  return /* @__PURE__ */ jsxs29("div", { className: cx("flex items-center gap-3", className), children: [
+  return /* @__PURE__ */ jsxs30("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,
@@ -9982,10 +10095,10 @@ function ReplyInputRow({
 }
 function CommentItem({ msg, identities, formatTime }) {
   const author = resolveAuthor(msg, identities);
-  return /* @__PURE__ */ jsxs29("div", { className: "flex items-start gap-3", children: [
+  return /* @__PURE__ */ jsxs30("div", { className: "flex items-start gap-3", children: [
     /* @__PURE__ */ jsx44(PersonAvatar, { person: author }),
-    /* @__PURE__ */ jsxs29("div", { className: "flex-1", children: [
-      /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxs30("div", { className: "flex-1", children: [
+      /* @__PURE__ */ jsxs30("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) })
       ] }),
@@ -10007,7 +10120,7 @@ function CommentThreadView({ thread, identities, you, highlight, formatTime, onR
   };
   if (!main) return null;
   const [open, setOpen] = useThreadOpenState(thread.id, true);
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       className: cx(
@@ -10015,11 +10128,11 @@ function CommentThreadView({ thread, identities, you, highlight, formatTime, onR
       ),
       children: [
         isHighlighted ? /* @__PURE__ */ jsx44(ActiveDot, {}) : null,
-        /* @__PURE__ */ jsxs29(Collapsible, { open, onOpenChange: setOpen, children: [
+        /* @__PURE__ */ jsxs30(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__ */ jsxs29("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__ */ jsxs30("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__ */ jsxs29("div", { className: "flex-1 space-y-4", children: [
+            /* @__PURE__ */ jsxs30("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 })
             ] })
@@ -10030,7 +10143,7 @@ function CommentThreadView({ thread, identities, you, highlight, formatTime, onR
   );
 }
 function ActiveDot() {
-  return /* @__PURE__ */ jsxs29("span", { className: "absolute -top-1.5 -left-1.5 flex h-3 w-3", children: [
+  return /* @__PURE__ */ jsxs30("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" })
   ] });
@@ -10041,7 +10154,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 jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
 var Comments = () => {
   const ws = useWorkspace10();
   const [value, setValue] = useState22("");
@@ -10054,12 +10167,12 @@ var Comments = () => {
       (thread) => thread.messages.some((message) => `${message.authorName ?? ""} ${message.body}`.toLowerCase().includes(lower))
     );
   }, [ws.comments.threads.data, query]);
-  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: [
+  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: [
       /* @__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__ */ jsxs30("div", { className: "px-4 pt-3", children: [
+    /* @__PURE__ */ jsxs31("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" })
     ] }),
@@ -10098,7 +10211,7 @@ var Comments = () => {
                 branchId: ws.branches.currentId
               }).finally(() => setValue(""));
             },
-            className: "cursor-pointer rounded-xl bg-blue-600 px-3 py-2 text-white transition hover:bg-blue-700",
+            className: "cursor-pointer rounded-full bg-blue-600 px-2 py-2 text-white transition hover:bg-blue-700",
             disabled: !ws.boot.isReady,
             children: /* @__PURE__ */ jsx45(MdOutlineSend, {})
           }
@@ -10167,7 +10280,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 jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
 var SectionCtx = React31.createContext(null);
 function useSectionCtx() {
   const ctx = React31.useContext(SectionCtx);
@@ -10223,7 +10336,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__ */ jsxs31(
+  const button = /* @__PURE__ */ jsxs32(
     "button",
     {
       ref,
@@ -10245,7 +10358,7 @@ function buildSectionActionButton({ className, icon, tooltip, iconOnly = false,
     }
   );
   if (!tooltip) return button;
-  return /* @__PURE__ */ jsxs31(Tooltip, { children: [
+  return /* @__PURE__ */ jsxs32(Tooltip, { children: [
     /* @__PURE__ */ jsx48(TooltipTrigger, { asChild: true, children: button }),
     /* @__PURE__ */ jsx48(TooltipContent, { side: "bottom", children: tooltip })
   ] });
@@ -10260,8 +10373,8 @@ function IncludesList({ className, children }) {
   return /* @__PURE__ */ jsx48("div", { className: cn("space-y-2", className), children });
 }
 function IncludesItem({ title, badge, actions, className }) {
-  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: [
+  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: [
       /* @__PURE__ */ jsx48("span", { className: "truncate text-sm text-gray-800 dark:text-gray-200", children: title }),
       badge
     ] }),
@@ -10274,8 +10387,8 @@ function IncludesItemMissing({
   className,
   icon
 }) {
-  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: [
+  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: [
       /* @__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 })
     ] }),
@@ -10310,6 +10423,161 @@ function IncludesIconAction({ kind, onClick, disabled, title, icon, className })
   );
 }
 
+// src/builder/service-context.ts
+import { createBuilder } from "@timeax/digital-service-engine/core";
+function createDefaultServiceContext(props, preferredTagId) {
+  const tagIds = (props?.filters ?? []).map((tag) => tag.id);
+  return {
+    selectedTagId: preferredTagId && tagIds.includes(preferredTagId) ? preferredTagId : tagIds[0] ?? null,
+    selectedButtons: [],
+    strictSafety: true,
+    enforcePolicies: true
+  };
+}
+function sanitizeServiceContext(snapshot, state) {
+  const allowed = new Set(snapshot.buttonGroups.flatMap((group) => group.options.map((option) => option.id)));
+  const selectedButtons = state.selectedButtons.filter((id) => allowed.has(id));
+  if (selectedButtons.length === state.selectedButtons.length) return state;
+  return { ...state, selectedButtons };
+}
+function buildServiceContextSnapshot(args) {
+  const props = args.props ?? void 0;
+  const serviceMap = args.services ?? {};
+  const tags = (props?.filters ?? []).map((tag) => ({
+    id: tag.id,
+    label: tag.label,
+    description: describeTag(tag)
+  }));
+  const selectedTag = (props?.filters ?? []).find((tag) => tag.id === args.state.selectedTagId) ?? null;
+  if (!props || !selectedTag) {
+    return {
+      state: args.state,
+      tags,
+      selectedTag,
+      buttonGroups: [],
+      visibleFieldIds: [],
+      usedServiceIds: []
+    };
+  }
+  const sandbox = createBuilder({ serviceMap });
+  sandbox.load(props);
+  const visibleFieldIds = sandbox.visibleFields(selectedTag.id, args.state.selectedButtons);
+  const buttonGroups = buildButtonGroups(props.fields ?? [], visibleFieldIds);
+  const usedServiceIds = collectUsedServiceIds({
+    props,
+    tagId: selectedTag.id,
+    visibleFieldIds,
+    selectedButtons: args.state.selectedButtons
+  });
+  return {
+    state: args.state,
+    tags,
+    selectedTag,
+    buttonGroups,
+    visibleFieldIds,
+    usedServiceIds
+  };
+}
+function buildServiceRowVM(args) {
+  const service = args.services?.[args.summary.id] ?? null;
+  const check = args.check;
+  const searchText = [args.summary.name, args.summary.category, args.summary.platformId, String(args.summary.id)].filter(Boolean).join(" ").toLowerCase();
+  const search = args.search?.trim().toLowerCase() ?? "";
+  const matchesSearch = !search || searchText.includes(search);
+  const isCompatible = !check || servicePassesCurrentFilter(check, args.state);
+  const status = describeCheck(check, args.state);
+  return {
+    id: String(args.summary.id),
+    summary: args.summary,
+    service,
+    check,
+    matchesSearch,
+    isCompatible,
+    passesCurrentFilter: matchesSearch,
+    statusTone: status.tone,
+    statusLabel: status.label,
+    reasonLabels: status.reasons,
+    searchText
+  };
+}
+function buildButtonGroups(fields, visibleFieldIds) {
+  const visibleSet = new Set(visibleFieldIds);
+  return fields.filter((field) => visibleSet.has(field.id)).map((field) => {
+    const options = field.options?.length ? field.options.filter((option) => option.id).map((option) => ({
+      id: String(option.id),
+      label: option.label,
+      description: `Option in ${field.label}`,
+      fieldId: field.id,
+      fieldLabel: field.label
+    })) : field.button ? [
+      {
+        id: field.id,
+        label: field.label,
+        description: "Button field",
+        fieldId: field.id,
+        fieldLabel: field.label
+      }
+    ] : [];
+    return {
+      id: field.id,
+      label: field.label,
+      options
+    };
+  }).filter((group) => group.options.length > 0);
+}
+function collectUsedServiceIds(args) {
+  const visibleSet = new Set(args.visibleFieldIds);
+  const used = /* @__PURE__ */ new Set();
+  const tag = args.props.filters?.find((item) => item.id === args.tagId);
+  if (tag?.service_id != null) used.add(String(tag.service_id));
+  for (const field of args.props.fields ?? []) {
+    if (!visibleSet.has(field.id)) continue;
+    if (field.service_id != null) {
+      used.add(String(field.service_id));
+    }
+    for (const option of field.options ?? []) {
+      if (option.service_id != null) {
+        used.add(String(option.service_id));
+      }
+    }
+  }
+  return Array.from(used);
+}
+function describeTag(tag) {
+  const constraints = Object.entries(tag.constraints ?? {}).filter(([, enabled]) => enabled).map(([key]) => key);
+  return constraints.length ? constraints.join(", ") : "All visible services";
+}
+function servicePassesCurrentFilter(check, state) {
+  const passesPolicies = state?.enforcePolicies === false ? true : check.passesPolicies;
+  const safetyPass = check.fitsConstraints && check.passesRate && passesPolicies;
+  return state?.strictSafety === false ? true : safetyPass;
+}
+function describeCheck(check, state) {
+  if (!check) {
+    return {
+      tone: "default",
+      label: "No context",
+      reasons: []
+    };
+  }
+  const reasons = [
+    !check.fitsConstraints ? "Constraint mismatch" : null,
+    !check.passesRate ? "Rate policy mismatch" : null,
+    state?.enforcePolicies !== false && !check.passesPolicies ? "Policy blocked" : null,
+    check.reasons.includes("missing_capability") ? "Missing capability" : null
+  ].filter(Boolean);
+  if (servicePassesCurrentFilter(check, state) && check.ok) {
+    return { tone: "success", label: "Safe fit", reasons };
+  }
+  if (servicePassesCurrentFilter(check, state)) {
+    return { tone: "warning", label: state?.enforcePolicies === false ? "Policy checks relaxed" : "Usable", reasons };
+  }
+  if (reasons.length) {
+    return { tone: "danger", label: "Hidden by context", reasons };
+  }
+  return { tone: "default", label: "Available", reasons };
+}
+
 // src/panels/right/components/renderif.tsx
 import "react";
 import { Fragment as Fragment8, jsx as jsx49 } from "react/jsx-runtime";
@@ -10338,29 +10606,32 @@ function RenderIf({ data, emptyMessage = null, children, when }) {
 // src/panels/right/partials/global/add-service.tsx
 import { useCanvas as useCanvas7, useWorkspace as useWorkspace11 } from "@timeax/digital-service-engine/workspace";
 import { InputField as InputField5 } from "@timeax/form-palette";
-import { useMemo as useMemo23, useState as useState24 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect17, useMemo as useMemo23, useState as useState24 } from "react";
 import { BsPlus } from "react-icons/bs";
-import { Fragment as Fragment9, jsx as jsx50, jsxs as jsxs32 } from "react/jsx-runtime";
+import { FaFolderOpen } from "react-icons/fa";
+import { FiFilter } from "react-icons/fi";
+import { Fragment as Fragment9, jsx as jsx50, jsxs as jsxs33 } from "react/jsx-runtime";
+var UNGROUPED_TREE_VALUE = "__catalog_ungrouped__";
 function AddService({ className, data, disabled, disabledMessage, readOnly, readOnlyMessage, emptyMessage }) {
   const ws = useWorkspace11();
   const canvas = useCanvas7();
-  const services2 = useMemo23(() => ws.services.data ?? {}, [ws.services.data]);
-  const connectedService = data.raw.service_id != null ? services2[data.raw.service_id] : void 0;
+  const servicesMap = useMemo23(() => ws.services.data ?? {}, [ws.services.data]);
+  const connectedService = data.raw.service_id != null ? servicesMap[data.raw.service_id] : void 0;
   const isReadOnly = Boolean(disabled || readOnly);
   const helperMessage = readOnlyMessage ?? disabledMessage;
-  return /* @__PURE__ */ jsxs32(Section, { className, children: [
-    /* @__PURE__ */ jsxs32(Section.Header, { children: [
+  return /* @__PURE__ */ jsxs33(Section, { className, children: [
+    /* @__PURE__ */ jsxs33(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__ */ jsx50(Section.Actions, { children: !isReadOnly ? /* @__PURE__ */ jsx50(AddServicePopover, { data, services: Object.values(servicesMap), servicesMap }) : null })
     ] }),
-    /* @__PURE__ */ jsxs32(Section.Content, { children: [
+    /* @__PURE__ */ jsxs33(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__ */ 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: [
+          badge: /* @__PURE__ */ jsxs33("span", { className: "rounded-full bg-slate-200 px-2 py-0.5 text-[10px] font-semibold tracking-[0.16em] text-slate-600 uppercase dark:bg-slate-800 dark:text-slate-300", children: [
             "#",
             service.id
           ] }),
@@ -10379,19 +10650,19 @@ function AddService({ className, data, disabled, disabledMessage, readOnly, read
 }
 function ServiceSummary({ service, nodeId, disabled }) {
   const canvas = useCanvas7();
-  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: [
+  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: [
         /* @__PURE__ */ jsx50("span", { className: "font-medium text-gray-800 dark:text-gray-200", children: "Category:" }),
         " ",
         service.category ?? "Uncategorised"
       ] }),
-      /* @__PURE__ */ jsxs32("p", { children: [
+      /* @__PURE__ */ jsxs33("p", { children: [
         /* @__PURE__ */ jsx50("span", { className: "font-medium text-gray-800 dark:text-gray-200", children: "Rate:" }),
         " ",
         service.rate
       ] }),
-      /* @__PURE__ */ jsxs32("p", { children: [
+      /* @__PURE__ */ jsxs33("p", { children: [
         /* @__PURE__ */ jsx50("span", { className: "font-medium text-gray-800 dark:text-gray-200", children: "Range:" }),
         " ",
         service.min ?? 0,
@@ -10410,55 +10681,256 @@ function ServiceSummary({ service, nodeId, disabled }) {
     ) }) : null
   ] });
 }
-function AddServicePopover({ data, services: services2 }) {
+function AddServicePopover({
+  data,
+  services: services2,
+  servicesMap
+}) {
+  const ws = useWorkspace11();
   const canvas = useCanvas7();
   const [open, setOpen] = useState24(false);
+  const [filterOpen, setFilterOpen] = useState24(false);
   const [query, setQuery] = useState24("");
   const [selected, setSelected] = useState24("");
-  const options = useMemo23(() => {
-    const lower = query.trim().toLowerCase();
-    return services2.filter((service) => {
-      if (!lower) return true;
-      return `${service.name ?? ""} ${service.category ?? ""} ${String(service.id)}`.toLowerCase().includes(lower);
-    }).map((service) => ({
-      label: service.name ?? `Service ${service.id}`,
-      value: String(service.id),
-      description: service.category,
-      service
-    }));
-  }, [services2, query]);
-  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__ */ 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__ */ jsxs32(
-        "button",
-        {
-          type: "button",
-          onClick: () => setSelected(option.value),
-          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__ */ jsxs32("div", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: [
-              option.description ?? "Uncategorised",
-              " \u2022 Rate ",
-              option.service.rate
-            ] })
-          ]
-        },
-        option.value
-      )) : /* @__PURE__ */ jsx50("div", { className: "rounded-md border border-dashed border-slate-300 px-3 py-6 text-center text-sm text-slate-500 dark:border-slate-700 dark:text-slate-400", children: "No services found." }) }) }),
-      /* @__PURE__ */ jsx50(
-        Button,
-        {
-          onClick: () => {
-            if (!selected) return;
-            canvas.api.editor.setService(data.id, { service_id: Number(selected) });
-            setOpen(false);
-            setSelected("");
-            setQuery("");
-          },
-          type: "button",
+  const [contextFilterEnabled, setContextFilterEnabled] = useState24(false);
+  const [catalogState, setCatalogState] = useState24(null);
+  const policies2 = ws.policies.policies.data ?? [];
+  const currentTagId = canvas.api.selection.currentTag?.();
+  const preferredTagId = currentTagId != null ? String(currentTagId) : canvas.layers.tags[0]?.id != null ? String(canvas.layers.tags[0]?.id) : null;
+  const selectedButtons = useMemo23(
+    () => (canvas.api.selection.selectedButtons?.() ?? []).map((value) => String(value)),
+    [canvas.api.selection, canvas.selectionInfo.ids, canvas.selectionInfo.optionIds]
+  );
+  const liveSelectionContext = useMemo23(
+    () => ({
+      selectedTagId: preferredTagId,
+      selectedButtons,
+      strictSafety: true,
+      enforcePolicies: true
+    }),
+    [preferredTagId, selectedButtons]
+  );
+  const liveSnapshot = useMemo23(
+    () => buildServiceContextSnapshot({ props: canvas.props, services: servicesMap, state: liveSelectionContext }),
+    [canvas.props, liveSelectionContext, servicesMap]
+  );
+  useEffect17(() => {
+    const editor = canvas.api.editor;
+    const ensured = editor.getCatalog?.() ?? editor.ensureCatalog?.();
+    if (ensured) setCatalogState(ensured);
+    const offCatalogChange = canvas.api.on("catalog:change", ({ catalog }) => {
+      const next = catalog ?? editor.getCatalog?.() ?? editor.ensureCatalog?.();
+      setCatalogState(next ?? null);
+    });
+    const offCatalogActiveChange = canvas.api.on("catalog:active-change", () => {
+      const next = editor.getCatalog?.() ?? editor.ensureCatalog?.();
+      setCatalogState(next ?? null);
+    });
+    return () => {
+      offCatalogChange?.();
+      offCatalogActiveChange?.();
+    };
+  }, [canvas.api]);
+  const catalogMode = catalogState?.viewMode === "grouped" ? "catalog" : "all";
+  const catalogGroups = useMemo23(
+    () => (catalogState?.nodes ?? []).filter((node) => node.kind === "group").sort((a, b) => (a.order ?? 0) - (b.order ?? 0) || a.label.localeCompare(b.label)),
+    [catalogState]
+  );
+  const selectedCatalogGroupId = catalogGroups.some((node) => node.id === catalogState?.activeNodeId) ? String(catalogState?.activeNodeId) : null;
+  const groupedServiceIds = useMemo23(() => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const group of catalogGroups) {
+      for (const serviceId of group.serviceIds) ids.add(String(serviceId));
+    }
+    return ids;
+  }, [catalogGroups]);
+  const allowedCatalogIds = useMemo23(() => {
+    if (catalogMode !== "catalog") return null;
+    if (!selectedCatalogGroupId) {
+      const ids = /* @__PURE__ */ new Set();
+      for (const service of services2) {
+        const id = String(service.id);
+        if (!groupedServiceIds.has(id)) ids.add(id);
+      }
+      return ids;
+    }
+    const selectedGroup = catalogGroups.find((group) => group.id === selectedCatalogGroupId);
+    if (!selectedGroup) {
+      const ids = /* @__PURE__ */ new Set();
+      for (const service of services2) {
+        const id = String(service.id);
+        if (!groupedServiceIds.has(id)) ids.add(id);
+      }
+      return ids;
+    }
+    return new Set(selectedGroup.serviceIds.map((id) => String(id)));
+  }, [catalogGroups, catalogMode, groupedServiceIds, selectedCatalogGroupId, services2]);
+  const compatibleIds = useMemo23(() => {
+    if (!contextFilterEnabled) return null;
+    if (!liveSnapshot.selectedTag) return null;
+    const checks = canvas.api.editor.filterServicesForVisibleGroup?.(
+      services2.map((service) => service.id),
+      {
+        tagId: liveSnapshot.selectedTag.id,
+        selectedButtons: liveSnapshot.state.selectedButtons,
+        usedServiceIds: liveSnapshot.usedServiceIds,
+        effectiveConstraints: liveSnapshot.selectedTag.constraints,
+        policies: policies2
+      }
+    );
+    if (!Array.isArray(checks)) return null;
+    const ids = /* @__PURE__ */ new Set();
+    for (const check of checks) {
+      if (check?.fitsConstraints && check?.passesRate && check?.passesPolicies) {
+        ids.add(String(check.id));
+      }
+    }
+    return ids;
+  }, [canvas.api.editor, contextFilterEnabled, liveSnapshot, policies2, services2]);
+  const setCatalogMode = useCallback16(
+    (mode) => {
+      const editor = canvas.api.editor;
+      editor.ensureCatalog?.();
+      editor.setCatalogViewMode?.(mode === "catalog" ? "grouped" : "all");
+    },
+    [canvas.api.editor]
+  );
+  const filterActive = contextFilterEnabled || catalogMode === "catalog";
+  const options = useMemo23(() => {
+    const lower = query.trim().toLowerCase();
+    return services2.filter((service) => {
+      if (!lower) return true;
+      return `${service.name ?? ""} ${service.category ?? ""} ${String(service.id)}`.toLowerCase().includes(lower);
+    }).filter((service) => allowedCatalogIds ? allowedCatalogIds.has(String(service.id)) : true).filter((service) => compatibleIds ? compatibleIds.has(String(service.id)) : true).map((service) => ({
+      label: service.name ?? `Service ${service.id}`,
+      value: String(service.id),
+      description: service.category,
+      service
+    }));
+  }, [allowedCatalogIds, compatibleIds, services2, query]);
+  useEffect17(() => {
+    if (selected && !options.some((option) => option.value === selected)) {
+      setSelected("");
+    }
+  }, [options, selected]);
+  const treeValue = selectedCatalogGroupId ?? (catalogMode === "catalog" ? UNGROUPED_TREE_VALUE : void 0);
+  const treeOptions = buildCatalogGroupTreeOptions(catalogGroups);
+  const selectedCatalogGroup = catalogGroups.find((group) => group.id === selectedCatalogGroupId) ?? null;
+  return /* @__PURE__ */ jsxs33(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(
+        InputField5,
+        {
+          variant: "text",
+          value: query,
+          onChange: (e) => setQuery(e.value ?? ""),
+          placeholder: "Search services...",
+          extendBoxToControls: true,
+          joinControls: true,
+          trailingControl: /* @__PURE__ */ jsxs33(Popover, { open: filterOpen, onOpenChange: setFilterOpen, children: [
+            /* @__PURE__ */ jsx50(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx50(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Service list filter",
+                className: `flex h-full w-8 cursor-pointer items-center justify-center text-sm transition ${filterActive ? "text-blue-700 dark:text-blue-200" : "text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-900"}`,
+                children: /* @__PURE__ */ jsx50(FiFilter, {})
+              }
+            ) }),
+            /* @__PURE__ */ jsxs33(PopoverContent, { align: "end", sideOffset: 8, collisionPadding: 12, className: "w-80 space-y-3 rounded-xl", children: [
+              /* @__PURE__ */ jsxs33("div", { children: [
+                /* @__PURE__ */ jsx50("div", { className: "text-sm font-semibold text-slate-900 dark:text-slate-100", children: "Service filters" }),
+                /* @__PURE__ */ jsx50("p", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: "Combine catalog grouping with current context compatibility." })
+              ] }),
+              /* @__PURE__ */ jsxs33("div", { className: "space-y-2 rounded-lg border border-slate-200 p-3 dark:border-slate-800", children: [
+                /* @__PURE__ */ jsx50("div", { className: "text-xs font-semibold tracking-[0.16em] text-slate-500 uppercase dark:text-slate-400", children: "Catalog scope" }),
+                /* @__PURE__ */ jsx50(
+                  InputField5,
+                  {
+                    variant: "radio",
+                    value: catalogMode,
+                    options: [
+                      { key: "all", label: "All services" },
+                      { key: "catalog", label: "Catalog group" }
+                    ],
+                    onChange: (event) => setCatalogMode(event.value)
+                  }
+                ),
+                /* @__PURE__ */ jsx50(
+                  InputField5,
+                  {
+                    variant: "treeselect",
+                    mode: "button",
+                    label: "Select group",
+                    className: "w-fit!",
+                    disabled: catalogMode !== "catalog",
+                    multiple: false,
+                    value: treeValue,
+                    options: [{ key: UNGROUPED_TREE_VALUE, label: "Ungrouped" }, ...treeOptions],
+                    searchable: true,
+                    clearable: true,
+                    onChange: (event) => {
+                      const next = event.value == null ? null : String(event.value);
+                      canvas.api.editor.setActiveCatalogNode?.(
+                        next === UNGROUPED_TREE_VALUE || next == null ? void 0 : next
+                      );
+                    },
+                    button: /* @__PURE__ */ jsx50(FaFolderOpen, {})
+                  }
+                ),
+                catalogMode === "catalog" ? /* @__PURE__ */ jsxs33("div", { className: "text-xs text-slate-500 dark:text-slate-400", children: [
+                  "Showing ",
+                  selectedCatalogGroup?.label ?? "Ungrouped",
+                  " services."
+                ] }) : null
+              ] }),
+              /* @__PURE__ */ jsxs33("label", { className: "flex items-start justify-between gap-3 rounded-lg border border-slate-200 p-3 text-sm text-slate-900 dark:border-slate-800 dark:text-slate-100", children: [
+                /* @__PURE__ */ jsxs33("span", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx50("span", { className: "block font-medium", children: "Current context" }),
+                  /* @__PURE__ */ jsx50("span", { className: "mt-1 block text-xs text-slate-500 dark:text-slate-400", children: "Filter services based on the current visible-group context." })
+                ] }),
+                /* @__PURE__ */ jsx50(
+                  "input",
+                  {
+                    "aria-label": "Current context",
+                    type: "checkbox",
+                    checked: contextFilterEnabled,
+                    onChange: (event) => setContextFilterEnabled(event.target.checked)
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        }
+      ),
+      /* @__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(
+        "button",
+        {
+          type: "button",
+          onClick: () => setSelected(option.value),
+          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: [
+              option.description ?? "Uncategorised",
+              " \u2022 Rate ",
+              option.service.rate
+            ] })
+          ]
+        },
+        option.value
+      )) : /* @__PURE__ */ jsx50("div", { className: "rounded-md border border-dashed border-slate-300 px-3 py-6 text-center text-sm text-slate-500 dark:border-slate-700 dark:text-slate-400", children: "No services found." }) }) }),
+      /* @__PURE__ */ jsx50(
+        Button,
+        {
+          onClick: () => {
+            if (!selected) return;
+            canvas.api.editor.setService(data.id, { service_id: Number(selected) });
+            setOpen(false);
+            setSelected("");
+          },
+          type: "button",
           size: "sm",
           children: "Save"
         }
@@ -10466,13 +10938,24 @@ function AddServicePopover({ data, services: services2 }) {
     ] }) })
   ] });
 }
+function buildCatalogGroupTreeOptions(groups, parentId = null) {
+  return groups.filter((group) => (group.parentId ?? null) === parentId).sort((a, b) => (a.order ?? 0) - (b.order ?? 0) || a.label.localeCompare(b.label)).map((group) => {
+    const children = buildCatalogGroupTreeOptions(groups, group.id);
+    return {
+      key: group.id,
+      label: group.label,
+      description: `${group.serviceIds.length} service${group.serviceIds.length === 1 ? "" : "s"}`,
+      children: children.length ? children : void 0
+    };
+  });
+}
 var add_service_default = AddService;
 
 // src/panels/right/partials/properties/field-properties.tsx
 import { resolveInputDescriptor, useInputs as useInputs2 } from "@timeax/digital-service-engine/react";
 import { useCanvas as useCanvas12 } from "@timeax/digital-service-engine/workspace";
 import { InputField as InputField11 } from "@timeax/form-palette";
-import { useEffect as useEffect17, useMemo as useMemo28, useState as useState28 } from "react";
+import { useEffect as useEffect18, useMemo as useMemo28, useState as useState28 } from "react";
 
 // src/panels/right/partials/properties/components/descriptor-settings.tsx
 import { InputField as InputField6 } from "@timeax/form-palette";
@@ -10521,7 +11004,7 @@ function buildQuantityRule(valueBy, base = {}) {
 }
 
 // src/panels/right/partials/properties/components/descriptor-settings.tsx
-import { jsx as jsx51, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs34 } from "react/jsx-runtime";
 var RESERVED_DESCRIPTOR_KEYS = /* @__PURE__ */ new Set([
   "options",
   "label",
@@ -10673,7 +11156,7 @@ function FieldDescription({
   onReset
 }) {
   if (!description && !canReset) return null;
-  return /* @__PURE__ */ jsxs33("div", { className: "flex items-start justify-between gap-3", children: [
+  return /* @__PURE__ */ jsxs34("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
   ] });
@@ -10682,7 +11165,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__ */ jsxs33("div", { className: "space-y-2", children: [
+      return /* @__PURE__ */ jsxs34("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsx51(FieldDescription, { description: schema.description, canReset: hasOverride, onReset: () => onClear(path) }),
         /* @__PURE__ */ jsx51(
           InputField6,
@@ -10705,7 +11188,7 @@ function DescriptorPrimitiveField({ schema, value, hasOverride, onSet, onClear,
       ] });
     }
     case "number":
-      return /* @__PURE__ */ jsxs33("div", { className: "space-y-2", children: [
+      return /* @__PURE__ */ jsxs34("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsx51(FieldDescription, { description: schema.description, canReset: hasOverride, onReset: () => onClear(path) }),
         /* @__PURE__ */ jsx51(
           InputField6,
@@ -10726,7 +11209,7 @@ function DescriptorPrimitiveField({ schema, value, hasOverride, onSet, onClear,
         )
       ] });
     case "boolean":
-      return /* @__PURE__ */ jsxs33("div", { className: "space-y-2", children: [
+      return /* @__PURE__ */ jsxs34("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsx51(FieldDescription, { description: schema.description, canReset: hasOverride, onReset: () => onClear(path) }),
         /* @__PURE__ */ jsx51(
           InputField6,
@@ -10744,7 +11227,7 @@ function DescriptorPrimitiveField({ schema, value, hasOverride, onSet, onClear,
         value: item.value,
         description: item.description
       }));
-      return /* @__PURE__ */ jsxs33("div", { className: "space-y-2", children: [
+      return /* @__PURE__ */ jsxs34("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsx51(FieldDescription, { description: schema.description, canReset: hasOverride, onReset: () => onClear(path) }),
         /* @__PURE__ */ jsx51(
           InputField6,
@@ -10813,15 +11296,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__ */ jsxs33("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxs33("div", { className: "flex items-start justify-between gap-3", children: [
-      /* @__PURE__ */ jsxs33("div", { children: [
+  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: [
         /* @__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__ */ jsxs33("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs34("div", { className: "space-y-4", children: [
       orderedEntries.map(([key, childSchema]) => /* @__PURE__ */ jsx51(
         DescriptorNodeField,
         {
@@ -10838,8 +11321,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__ */ 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: [
+        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__ */ jsx51(
               InputField6,
               {
@@ -10871,7 +11354,7 @@ function DescriptorObjectField({ schema, value, hasOverride, onSet, onClear, pat
                   });
                 }
               }
-            ) : /* @__PURE__ */ jsxs33("div", { className: "flex items-end text-xs text-slate-500 dark:text-slate-400", children: [
+            ) : /* @__PURE__ */ jsxs34("div", { className: "flex items-end text-xs text-slate-500 dark:text-slate-400", children: [
               "Shape: ",
               shapeKey ?? shapeEntries[0]?.[0] ?? "Custom"
             ] }),
@@ -10905,7 +11388,7 @@ function DescriptorObjectField({ schema, value, hasOverride, onSet, onClear, pat
           )
         ] }, key);
       }),
-      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: [
+      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: [
         /* @__PURE__ */ jsx51(
           InputField6,
           {
@@ -10953,15 +11436,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__ */ jsxs33("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxs33("div", { className: "flex items-start justify-between gap-3", children: [
-      /* @__PURE__ */ jsxs33("div", { children: [
+  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: [
         /* @__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__ */ jsxs33("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs34("div", { className: "space-y-4", children: [
       schema.items ? schema.items.map((childSchema, index) => /* @__PURE__ */ jsx51(
         DescriptorNodeField,
         {
@@ -10978,9 +11461,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__ */ 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: [
+        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: [
               formatLabel(schema.label),
               " item ",
               index + 1
@@ -11034,8 +11517,8 @@ function DescriptorArrayField({ schema, value, hasOverride, onSet, onClear, path
           )
         ] }, `${path.join(".")}:${index}`);
       }),
-      !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: [
+      !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: [
           "Add another ",
           schema.label.toLowerCase()
         ] }),
@@ -11110,7 +11593,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 jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs35 } from "react/jsx-runtime";
 var ruleOptions = [
   { label: "Value", value: "value" },
   { label: "Length", value: "length" },
@@ -11170,10 +11653,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__ */ jsxs34(Section, { children: [
-    /* @__PURE__ */ jsxs34(Section.Header, { children: [
+  return /* @__PURE__ */ jsxs35(Section, { children: [
+    /* @__PURE__ */ jsxs35(Section.Header, { children: [
       /* @__PURE__ */ jsx52(Section.Title, { children: "Quantity" }),
-      canAddRule || canAddDefault || hasFieldRule || hasQuantityDefault ? /* @__PURE__ */ jsxs34(Section.Actions, { children: [
+      canAddRule || canAddDefault || hasFieldRule || hasQuantityDefault ? /* @__PURE__ */ jsxs35(Section.Actions, { children: [
         canAddRule ? /* @__PURE__ */ jsx52(
           SectionActionButton,
           {
@@ -11219,9 +11702,9 @@ function QuantitySection({ node }) {
         ) : null
       ] }) : null
     ] }),
-    /* @__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(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("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(
@@ -11250,7 +11733,7 @@ function QuantitySection({ node }) {
             onChange: (e) => updateRule({ code: String(e.value ?? "") })
           }
         ) : null,
-        /* @__PURE__ */ jsxs34("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs35("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
           /* @__PURE__ */ jsx52(
             InputField7,
             {
@@ -11303,7 +11786,7 @@ function QuantitySection({ node }) {
           )
         ] })
       ] }) : null,
-      capabilities.quantity.canEditDefault ? hasQuantityDefault ? /* @__PURE__ */ jsxs34("div", { className: "space-y-2 rounded-xl border border-slate-200 p-3 dark:border-slate-800", children: [
+      capabilities.quantity.canEditDefault ? hasQuantityDefault ? /* @__PURE__ */ jsxs35("div", { className: "space-y-2 rounded-xl border border-slate-200 p-3 dark:border-slate-800", children: [
         /* @__PURE__ */ jsx52(
           InputField7,
           {
@@ -11316,7 +11799,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__ */ jsxs34("div", { className: "space-y-2", children: [
+    ] }) : hasQuantityDefault ? /* @__PURE__ */ jsxs35("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsx52(
         InputField7,
         {
@@ -11338,7 +11821,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 jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx53, jsxs as jsxs36 } from "react/jsx-runtime";
 var utilityModes = [
   { label: "Flat", value: "flat" },
   { label: "Per quantity", value: "per_quantity" },
@@ -11390,10 +11873,10 @@ function UtilitySection({ node }) {
       canvas.api.editor.updateOption(node.id, { meta: nextMeta });
     });
   };
-  return /* @__PURE__ */ jsxs35(Section, { children: [
-    /* @__PURE__ */ jsxs35(Section.Header, { children: [
+  return /* @__PURE__ */ jsxs36(Section, { children: [
+    /* @__PURE__ */ jsxs36(Section.Header, { children: [
       /* @__PURE__ */ jsx53(Section.Title, { children: "Utility" }),
-      /* @__PURE__ */ jsxs35(Section.Actions, { children: [
+      /* @__PURE__ */ jsxs36(Section.Actions, { children: [
         !hasStoredUtility && !isActiveUtility ? /* @__PURE__ */ jsx53(
           SectionActionButton,
           {
@@ -11426,10 +11909,10 @@ function UtilitySection({ node }) {
         ) : null
       ] })
     ] }),
-    /* @__PURE__ */ jsx53(Section.Content, { children: hasUtilityConfiguration ? /* @__PURE__ */ jsxs35("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx53(Section.Content, { children: hasUtilityConfiguration ? /* @__PURE__ */ jsxs36("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__ */ jsxs35(Fragment10, { children: [
+      /* @__PURE__ */ jsxs36(Fragment10, { children: [
         /* @__PURE__ */ jsx53(
           InputField8,
           {
@@ -11508,7 +11991,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 jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs37 } from "react/jsx-runtime";
 var opOptions = [
   { label: "Equals", value: "eq" },
   { label: "Not equal", value: "neq" },
@@ -11581,7 +12064,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__ */ jsxs36("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__ */ jsxs37("div", { className: "grid gap-3 md:grid-cols-[160px_minmax(0,1fr)]", children: [
     /* @__PURE__ */ jsx54(
       InputField9,
       {
@@ -11627,17 +12110,17 @@ function TypedScalarListEditor({
   onChange
 }) {
   const items = (values ?? []).filter((value) => ["string", "number", "boolean"].includes(typeof value));
-  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: [
+  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: [
         /* @__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__ */ 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: [
+    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: [
           "Value ",
           index + 1
         ] }),
@@ -11671,10 +12154,10 @@ function ValidationRuleCard({
   onRemove
 }) {
   const valueBy = rule.valueBy ?? "value";
-  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: [
+  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: [
           "Rule ",
           index + 1
         ] }),
@@ -11691,7 +12174,7 @@ function ValidationRuleCard({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs36("div", { className: "grid gap-3 md:grid-cols-2", children: [
+    /* @__PURE__ */ jsxs37("div", { className: "grid gap-3 md:grid-cols-2", children: [
       /* @__PURE__ */ jsx54(
         InputField9,
         {
@@ -11751,7 +12234,7 @@ function ValidationRuleCard({
         )
       }
     ) : null,
-    rule.op === "between" ? /* @__PURE__ */ jsxs36("div", { className: "grid gap-3 md:grid-cols-2", children: [
+    rule.op === "between" ? /* @__PURE__ */ jsxs37("div", { className: "grid gap-3 md:grid-cols-2", children: [
       /* @__PURE__ */ jsx54(
         InputField9,
         {
@@ -11795,7 +12278,7 @@ function ValidationRuleCard({
         )
       }
     ) : null,
-    rule.op === "match" ? /* @__PURE__ */ jsxs36("div", { className: "grid gap-3 md:grid-cols-2", children: [
+    rule.op === "match" ? /* @__PURE__ */ jsxs37("div", { className: "grid gap-3 md:grid-cols-2", children: [
       /* @__PURE__ */ jsx54(
         InputField9,
         {
@@ -11869,10 +12352,10 @@ function ValidationSection({ node }) {
   const removeRuleAt = (index) => {
     persistRules(rules.filter((_, ruleIndex) => ruleIndex !== index));
   };
-  return /* @__PURE__ */ jsxs36(Section, { children: [
-    /* @__PURE__ */ jsxs36(Section.Header, { children: [
+  return /* @__PURE__ */ jsxs37(Section, { children: [
+    /* @__PURE__ */ jsxs37(Section.Header, { children: [
       /* @__PURE__ */ jsx54(Section.Title, { children: "Validation" }),
-      /* @__PURE__ */ jsxs36(Section.Actions, { children: [
+      /* @__PURE__ */ jsxs37(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,
@@ -11886,7 +12369,7 @@ function ValidationSection({ node }) {
         ) : null
       ] })
     ] }),
-    /* @__PURE__ */ jsx54(Section.Content, { children: rules.length ? /* @__PURE__ */ jsxs36("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx54(Section.Content, { children: rules.length ? /* @__PURE__ */ jsxs37("div", { className: "space-y-4", children: [
       rules.map((rule, index) => /* @__PURE__ */ jsx54(
         ValidationRuleCard,
         {
@@ -11898,7 +12381,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__ */ jsxs36("div", { className: "space-y-3 rounded-xl border border-dashed border-slate-200 p-4 dark:border-slate-800", children: [
+    ] }) : /* @__PURE__ */ jsxs37("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" })
@@ -11916,12 +12399,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 jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs38 } from "react/jsx-runtime";
 function AddIncludesPopover({ open, onOpenChange, onSelect, options }) {
   const [value, setValue] = useState26();
-  return /* @__PURE__ */ jsxs37(Popover, { open, onOpenChange, children: [
+  return /* @__PURE__ */ jsxs38(Popover, { open, onOpenChange, children: [
     /* @__PURE__ */ jsx55(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx55(SectionActionTriggerButton, { icon: /* @__PURE__ */ jsx55(BsPlus5, {}), children: "Add" }) }),
-    /* @__PURE__ */ jsx55(PopoverContent, { children: /* @__PURE__ */ jsxs37("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx55(PopoverContent, { children: /* @__PURE__ */ jsxs38("div", { className: "flex flex-col gap-2", children: [
       /* @__PURE__ */ jsx55(
         InputField10,
         {
@@ -11952,7 +12435,7 @@ function AddIncludesPopover({ open, onOpenChange, onSelect, options }) {
 }
 
 // src/panels/right/partials/properties/components/Union.tsx
-import { jsx as jsx56, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs39 } from "react/jsx-runtime";
 function IncExcludeSection({ node, mode, capability }) {
   const canvas = useCanvas11();
   const [open, setOpen] = useState27(false);
@@ -11988,8 +12471,8 @@ function IncExcludeSection({ node, mode, capability }) {
     }));
   }, [canvas.props.fields, node]);
   const name = mode.slice(0, -1);
-  return /* @__PURE__ */ jsxs38(Section, { children: [
-    /* @__PURE__ */ jsxs38(Section.Header, { children: [
+  return /* @__PURE__ */ jsxs39(Section, { children: [
+    /* @__PURE__ */ jsxs39(Section.Header, { children: [
       /* @__PURE__ */ jsx56(Section.Title, { children: mode == "includes" ? "Includes" : "Excludes" }),
       /* @__PURE__ */ jsx56(Section.Actions, { children: canEdit ? /* @__PURE__ */ jsx56(
         AddIncludesPopover,
@@ -12001,7 +12484,7 @@ function IncExcludeSection({ node, mode, capability }) {
         }
       ) : null })
     ] }),
-    /* @__PURE__ */ jsxs38(Section.Content, { children: [
+    /* @__PURE__ */ jsxs39(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];
@@ -12033,7 +12516,7 @@ function IncExcludeSection({ node, mode, capability }) {
 }
 
 // src/panels/right/partials/properties/field-properties.tsx
-import { Fragment as Fragment11, jsx as jsx57, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx57, jsxs as jsxs40 } from "react/jsx-runtime";
 var getVariant = (node) => {
   const variant = node.raw.meta?.variant;
   return typeof variant === "string" && variant.trim() ? variant.trim() : void 0;
@@ -12062,13 +12545,13 @@ function FieldProperties({ className, node }) {
   const descriptor = useMemo28(() => resolveInputDescriptor(registry, currentType, currentVariant), [currentType, currentVariant, registry]);
   const descriptorUi = descriptor?.ui ?? {};
   const descriptorKeySet = useMemo28(() => new Set(getDescriptorUiKeys(descriptorUi)), [descriptorUi]);
-  useEffect17(() => {
+  useEffect18(() => {
     setNameDraft(nameValue);
   }, [node.id, nameValue]);
-  useEffect17(() => {
+  useEffect18(() => {
     setPlaceholderDraft(placeholderValue);
   }, [node.id, placeholderValue]);
-  useEffect17(() => {
+  useEffect18(() => {
     setHelpTextDraft(helpTextValue);
   }, [node.id, helpTextValue]);
   const fieldTypeOptions = useMemo28(() => {
@@ -12125,12 +12608,12 @@ function FieldProperties({ className, node }) {
     const nextVariant = String(rawVariant ?? "default");
     applyDescriptorTransition(currentType, nextVariant === "default" ? void 0 : nextVariant);
   };
-  return /* @__PURE__ */ jsx57("div", { className, children: /* @__PURE__ */ jsxs39("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs39(Section, { children: [
+  return /* @__PURE__ */ jsx57("div", { className, children: /* @__PURE__ */ jsxs40("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs40(Section, { children: [
       /* @__PURE__ */ jsx57(Section.Header, { children: /* @__PURE__ */ jsx57(Section.Title, { children: "Field identity" }) }),
-      /* @__PURE__ */ jsxs39(Section.Content, { children: [
+      /* @__PURE__ */ jsxs40(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__ */ jsxs39("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs40("div", { className: "space-y-3", children: [
           /* @__PURE__ */ jsx57(
             InputField11,
             {
@@ -12186,11 +12669,11 @@ function FieldProperties({ className, node }) {
       ] })
     ] }),
     /* @__PURE__ */ jsx57(Separator2, {}),
-    /* @__PURE__ */ jsxs39(Section, { children: [
+    /* @__PURE__ */ jsxs40(Section, { children: [
       /* @__PURE__ */ jsx57(Section.Header, { children: /* @__PURE__ */ jsx57(Section.Title, { children: "Defaults and help" }) }),
-      /* @__PURE__ */ jsxs39(Section.Content, { children: [
+      /* @__PURE__ */ jsxs40(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__ */ jsxs39("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs40("div", { className: "space-y-3", children: [
           /* @__PURE__ */ jsx57(
             InputField11,
             {
@@ -12215,11 +12698,11 @@ function FieldProperties({ className, node }) {
       ] })
     ] }),
     /* @__PURE__ */ jsx57(Separator2, {}),
-    /* @__PURE__ */ jsxs39(Section, { defaultOpen: false, children: [
+    /* @__PURE__ */ jsxs40(Section, { defaultOpen: false, children: [
       /* @__PURE__ */ jsx57(Section.Header, { children: /* @__PURE__ */ jsx57(Section.Title, { children: "Input appearance and behavior" }) }),
-      /* @__PURE__ */ jsxs39(Section.Content, { children: [
+      /* @__PURE__ */ jsxs40(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__ */ jsxs39("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: [
+        descriptor ? /* @__PURE__ */ jsx57(DescriptorSettings, { schema: descriptorUi, defaults, onChange: updateDefaults }) : /* @__PURE__ */ jsxs40("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: [
           "No input descriptor was found for this field type",
           currentVariant ? ` / ${currentVariant}` : "",
           "."
@@ -12233,9 +12716,9 @@ function FieldProperties({ className, node }) {
     /* @__PURE__ */ jsx57(Separator2, {}),
     /* @__PURE__ */ jsx57(utility_section_default, { node }),
     /* @__PURE__ */ jsx57(Separator2, {}),
-    /* @__PURE__ */ jsxs39(Section, { children: [
+    /* @__PURE__ */ jsxs40(Section, { children: [
       /* @__PURE__ */ jsx57(Section.Header, { children: /* @__PURE__ */ jsx57(Section.Title, { children: "Binding summary" }) }),
-      /* @__PURE__ */ jsxs39(Section.Content, { children: [
+      /* @__PURE__ */ jsxs40(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,
@@ -12250,12 +12733,12 @@ function FieldProperties({ className, node }) {
       ] })
     ] }),
     /* @__PURE__ */ jsx57(Separator2, {}),
-    options.length ? /* @__PURE__ */ jsxs39(Fragment11, { children: [
-      /* @__PURE__ */ jsxs39(Section, { children: [
+    options.length ? /* @__PURE__ */ jsxs40(Fragment11, { children: [
+      /* @__PURE__ */ jsxs40(Section, { children: [
         /* @__PURE__ */ jsx57(Section.Header, { children: /* @__PURE__ */ jsx57(Section.Title, { children: "Options" }) }),
-        /* @__PURE__ */ jsxs39(Section.Content, { children: [
+        /* @__PURE__ */ jsxs40(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__ */ jsxs39(
+          /* @__PURE__ */ jsx57("div", { className: "space-y-2", children: options.map((option) => /* @__PURE__ */ jsxs40(
             "div",
             {
               className: "flex items-center justify-between rounded-xl bg-slate-50 px-3 py-2 text-sm dark:bg-slate-900",
@@ -12278,11 +12761,11 @@ function FieldProperties({ className, node }) {
       ] }),
       /* @__PURE__ */ jsx57(Separator2, {})
     ] }) : null,
-    capabilities.triggerMappings.canEdit ? /* @__PURE__ */ jsxs39(Fragment11, { children: [
+    capabilities.triggerMappings.canEdit ? /* @__PURE__ */ jsxs40(Fragment11, { children: [
       /* @__PURE__ */ jsx57(IncExcludeSection, { node, mode: "includes", capability: capabilities.triggerMappings }),
       /* @__PURE__ */ jsx57(Separator2, {}),
       /* @__PURE__ */ jsx57(IncExcludeSection, { node, mode: "excludes", capability: capabilities.triggerMappings })
-    ] }) : /* @__PURE__ */ jsxs39(Section, { children: [
+    ] }) : /* @__PURE__ */ jsxs40(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 }) })
     ] }),
@@ -12295,18 +12778,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 jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs41 } 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__ */ jsxs40("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs40(Section, { children: [
+  return /* @__PURE__ */ jsx58("div", { className, children: /* @__PURE__ */ jsxs41("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs41(Section, { children: [
       /* @__PURE__ */ jsx58(Section.Header, { children: /* @__PURE__ */ jsx58(Section.Title, { children: "Option identity" }) }),
-      /* @__PURE__ */ jsxs40(Section.Content, { children: [
+      /* @__PURE__ */ jsxs41(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__ */ jsxs40("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs41("div", { className: "space-y-3", children: [
           /* @__PURE__ */ jsx58(
             InputField12,
             {
@@ -12344,9 +12827,9 @@ function OptionProperties({ className, node }) {
     /* @__PURE__ */ jsx58(Separator2, {}),
     /* @__PURE__ */ jsx58(utility_section_default, { node }),
     /* @__PURE__ */ jsx58(Separator2, {}),
-    /* @__PURE__ */ jsxs40(Section, { children: [
+    /* @__PURE__ */ jsxs41(Section, { children: [
       /* @__PURE__ */ jsx58(Section.Header, { children: /* @__PURE__ */ jsx58(Section.Title, { children: "Option mapping" }) }),
-      /* @__PURE__ */ jsxs40(Section.Content, { children: [
+      /* @__PURE__ */ jsxs41(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,
@@ -12385,11 +12868,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 jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs42 } from "react/jsx-runtime";
 function AddConstraintsPopover({ open, onOpenChange, constraints, allConstraints, onSubmit }) {
-  return /* @__PURE__ */ jsxs41(Popover, { open, onOpenChange, children: [
+  return /* @__PURE__ */ jsxs42(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__ */ jsxs41(
+    /* @__PURE__ */ jsx59(PopoverContent, { children: /* @__PURE__ */ jsx59(RenderIf, { data: allConstraints, children: /* @__PURE__ */ jsxs42(
       Form,
       {
         wrapped: true,
@@ -12420,20 +12903,20 @@ function AddConstraintsPopover({ open, onOpenChange, constraints, allConstraints
 
 // src/panels/right/partials/properties/tag/ConstraintOriginPopover.tsx
 import "react";
-import { jsx as jsx60, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs43 } from "react/jsx-runtime";
 function ConstraintOriginPopover({ constraint, onClearSelf, onClearSubtree }) {
-  return /* @__PURE__ */ jsxs42(Popover, { children: [
+  return /* @__PURE__ */ jsxs43(Popover, { children: [
     /* @__PURE__ */ jsx60(PopoverTrigger, { className: "flex items-center gap-1", children: "Owner" }),
-    /* @__PURE__ */ jsx60(PopoverContent, { className: "w-fit p-0", children: /* @__PURE__ */ jsxs42("div", { className: "max-w-[320px] p-3 text-sm", children: [
+    /* @__PURE__ */ jsx60(PopoverContent, { className: "w-fit p-0", children: /* @__PURE__ */ jsxs43("div", { className: "max-w-[320px] p-3 text-sm", children: [
       /* @__PURE__ */ jsx60("div", { className: "font-medium", children: "Clear constraint?" }),
-      /* @__PURE__ */ jsxs42("div", { className: "mt-1 text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs43("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__ */ jsxs42("div", { className: "mt-3 space-y-2", children: [
+      /* @__PURE__ */ jsxs43("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__ */ jsxs42("div", { className: "flex items-center justify-end gap-2", children: [
+        /* @__PURE__ */ jsxs43("div", { className: "flex items-center justify-end gap-2", children: [
           /* @__PURE__ */ jsx60(
             "button",
             {
@@ -12461,24 +12944,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 jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs44 } from "react/jsx-runtime";
 function ConstraintOverridePopover({ constraint, onClear }) {
-  return /* @__PURE__ */ jsxs43(Popover, { children: [
-    /* @__PURE__ */ jsxs43(PopoverTrigger, { className: "flex items-center gap-1", children: [
+  return /* @__PURE__ */ jsxs44(Popover, { children: [
+    /* @__PURE__ */ jsxs44(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__ */ jsxs43("div", { className: "max-w-[320px] p-3 text-sm", children: [
+    /* @__PURE__ */ jsx61(PopoverContent, { className: "w-fit p-0", children: /* @__PURE__ */ jsxs44("div", { className: "max-w-[320px] p-3 text-sm", children: [
       /* @__PURE__ */ jsx61("div", { className: "font-medium", children: "Constraint override detected" }),
-      /* @__PURE__ */ jsxs43("div", { className: "mt-1 text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs44("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__ */ jsxs43("div", { className: "mt-3 space-y-1", children: [
+      /* @__PURE__ */ jsxs44("div", { className: "mt-3 space-y-1", children: [
         /* @__PURE__ */ jsx61("div", { className: "font-medium", children: "How to fix" }),
-        /* @__PURE__ */ jsxs43("ul", { className: "list-disc pl-4 text-muted-foreground", children: [
-          /* @__PURE__ */ jsxs43("li", { children: [
+        /* @__PURE__ */ jsxs44("ul", { className: "list-disc pl-4 text-muted-foreground", children: [
+          /* @__PURE__ */ jsxs44("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)."
@@ -12500,14 +12983,14 @@ function ConstraintOverridePopover({ constraint, onClear }) {
 }
 
 // src/panels/right/partials/properties/tag/TagConstraintsSection.tsx
-import { Fragment as Fragment12, jsx as jsx62, jsxs as jsxs44 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx62, jsxs as jsxs45 } 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__ */ jsxs44(Section, { children: [
-    /* @__PURE__ */ jsxs44(Section.Header, { children: [
+  return /* @__PURE__ */ jsx62(Fragment12, { children: /* @__PURE__ */ jsxs45(Section, { children: [
+    /* @__PURE__ */ jsxs45(Section.Header, { children: [
       /* @__PURE__ */ jsx62(Section.Title, { children: "Constraints" }),
       /* @__PURE__ */ jsx62(Section.Actions, { children: /* @__PURE__ */ jsx62(
         AddConstraintsPopover,
@@ -12602,10 +13085,10 @@ function TagExcludesSection({ node }) {
 }
 
 // src/panels/right/partials/properties/tag.tsx
-import { Fragment as Fragment13, jsx as jsx65, jsxs as jsxs45 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx65, jsxs as jsxs46 } from "react/jsx-runtime";
 function TagProperties({ node }) {
   const capabilities = getTagPropertyCapabilities();
-  return /* @__PURE__ */ jsxs45(Fragment13, { children: [
+  return /* @__PURE__ */ jsxs46(Fragment13, { children: [
     /* @__PURE__ */ jsx65(TagConstraintsSection, { node }),
     /* @__PURE__ */ jsx65(Separator2, {}),
     /* @__PURE__ */ jsx65(quantity_section_default, { node }),
@@ -12624,7 +13107,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 jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs47 } from "react/jsx-runtime";
 var kinds = {
   tag: TagProperties,
   option: option_properties_default,
@@ -12642,20 +13125,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__ */ jsxs46("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__ */ jsxs47("div", { className: "flex flex-col gap-4 px-4 py-4", children: [
     /* @__PURE__ */ jsx66(WorkspaceBootInlineNotice, { boot: ws.boot, sections: ["snapshotBody", "policies"] }),
-    /* @__PURE__ */ jsxs46(Section, { children: [
+    /* @__PURE__ */ jsxs47(Section, { children: [
       /* @__PURE__ */ jsx66(Section.Header, { children: /* @__PURE__ */ jsx66(Section.Title, { children: "Selection overview" }) }),
-      /* @__PURE__ */ jsxs46(Section.Content, { children: [
+      /* @__PURE__ */ jsxs47(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__ */ jsxs46("div", { className: "flex items-start justify-between gap-3", children: [
-          /* @__PURE__ */ jsxs46("div", { children: [
+        /* @__PURE__ */ jsxs47("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs47("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__ */ jsxs46("div", { className: "mt-3 space-y-3", children: [
+        /* @__PURE__ */ jsxs47("div", { className: "mt-3 space-y-3", children: [
           /* @__PURE__ */ jsx66(
             InputField15,
             {
@@ -12712,7 +13195,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 jsxs47 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx67, jsxs as jsxs48 } from "react/jsx-runtime";
 function noticeToneClass(notice) {
   const color = (notice.color ?? "").toLowerCase();
   if (color.includes("red") || color.includes("rose") || color.includes("danger")) {
@@ -12745,7 +13228,7 @@ function WireframeTagsWidget({
   onTagDragOver,
   onTagDrop
 }) {
-  return /* @__PURE__ */ jsxs47("div", { className: "flex flex-wrap items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs48("div", { className: "flex flex-wrap items-center gap-2", children: [
     /* @__PURE__ */ jsx67(
       "small",
       {
@@ -12755,8 +13238,8 @@ function WireframeTagsWidget({
         children: "Tags:"
       }
     ),
-    /* @__PURE__ */ jsx67("div", { className: "flex flex-wrap items-center gap-1.5", children: visibleTag ? /* @__PURE__ */ jsxs47(Fragment14, { children: [
-      parents.map((item) => /* @__PURE__ */ jsxs47(
+    /* @__PURE__ */ jsx67("div", { className: "flex flex-wrap items-center gap-1.5", children: visibleTag ? /* @__PURE__ */ jsxs48(Fragment14, { children: [
+      parents.map((item) => /* @__PURE__ */ jsxs48(
         "button",
         {
           type: "button",
@@ -12780,7 +13263,7 @@ function WireframeTagsWidget({
         },
         item.id
       )),
-      /* @__PURE__ */ jsxs47(
+      /* @__PURE__ */ jsxs48(
         "button",
         {
           type: "button",
@@ -12803,7 +13286,7 @@ function WireframeTagsWidget({
         }
       ),
       children.map((item) => {
-        return /* @__PURE__ */ jsxs47(
+        return /* @__PURE__ */ jsxs48(
           "button",
           {
             type: "button",
@@ -12828,7 +13311,7 @@ function WireframeTagsWidget({
         );
       })
     ] }) : children.length ? children.map((item) => {
-      return /* @__PURE__ */ jsxs47(
+      return /* @__PURE__ */ jsxs48(
         "button",
         {
           type: "button",
@@ -12852,8 +13335,8 @@ var wireframe_tags_widget_default = WireframeTagsWidget;
 // src/panels/right/tabs/wireframe.tsx
 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 jsxs48 } from "react/jsx-runtime";
+import { useCallback as useCallback17, useMemo as useMemo31 } from "react";
+import { jsx as jsx68, jsxs as jsxs49 } from "react/jsx-runtime";
 var CHECKBOX_SINGLE_EXTRA_PROPS = Object.freeze({ single: true });
 function Wireframe() {
   const canvas = useCanvas16();
@@ -12913,15 +13396,15 @@ function Wireframe() {
     }
     return map;
   }, [canvas.props, canvas.selectionInfo, canvas.activeId]);
-  const select = useCallback16(
+  const select = useCallback17(
     (id) => {
       canvas.setActive(id);
       canvas.api.select([id]);
     },
     [canvas.api, canvas.setActive]
   );
-  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: [
+  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: [
       /* @__PURE__ */ jsx68(WorkspaceBootInlineNotice, { boot: ws.boot, sections: ["snapshotBody", "policies"] }),
       /* @__PURE__ */ jsx68(
         wireframe_tags_widget_default,
@@ -13017,7 +13500,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 jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs50 } 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!",
@@ -13034,10 +13517,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__ */ jsxs49("div", { className: "flex h-full flex-col", children: [
+      children: /* @__PURE__ */ jsxs50("div", { className: "flex h-full flex-col", children: [
         /* @__PURE__ */ jsx69(header_default2, { onShare, onPlay }),
-        /* @__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__ */ 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__ */ 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" })
@@ -13052,168 +13535,13 @@ var RightPanel = ({ onShare, onPlay }) => {
 };
 var right_default = RightPanel;
 
-// src/builder/service-context.ts
-import { createBuilder } from "@timeax/digital-service-engine/core";
-function createDefaultServiceContext(props, preferredTagId) {
-  const tagIds = (props?.filters ?? []).map((tag) => tag.id);
-  return {
-    selectedTagId: preferredTagId && tagIds.includes(preferredTagId) ? preferredTagId : tagIds[0] ?? null,
-    selectedButtons: [],
-    strictSafety: true,
-    enforcePolicies: true
-  };
-}
-function sanitizeServiceContext(snapshot, state) {
-  const allowed = new Set(snapshot.buttonGroups.flatMap((group) => group.options.map((option) => option.id)));
-  const selectedButtons = state.selectedButtons.filter((id) => allowed.has(id));
-  if (selectedButtons.length === state.selectedButtons.length) return state;
-  return { ...state, selectedButtons };
-}
-function buildServiceContextSnapshot(args) {
-  const props = args.props ?? void 0;
-  const serviceMap = args.services ?? {};
-  const tags = (props?.filters ?? []).map((tag) => ({
-    id: tag.id,
-    label: tag.label,
-    description: describeTag(tag)
-  }));
-  const selectedTag = (props?.filters ?? []).find((tag) => tag.id === args.state.selectedTagId) ?? null;
-  if (!props || !selectedTag) {
-    return {
-      state: args.state,
-      tags,
-      selectedTag,
-      buttonGroups: [],
-      visibleFieldIds: [],
-      usedServiceIds: []
-    };
-  }
-  const sandbox = createBuilder({ serviceMap });
-  sandbox.load(props);
-  const visibleFieldIds = sandbox.visibleFields(selectedTag.id, args.state.selectedButtons);
-  const buttonGroups = buildButtonGroups(props.fields ?? [], visibleFieldIds);
-  const usedServiceIds = collectUsedServiceIds({
-    props,
-    tagId: selectedTag.id,
-    visibleFieldIds,
-    selectedButtons: args.state.selectedButtons
-  });
-  return {
-    state: args.state,
-    tags,
-    selectedTag,
-    buttonGroups,
-    visibleFieldIds,
-    usedServiceIds
-  };
-}
-function buildServiceRowVM(args) {
-  const service = args.services?.[args.summary.id] ?? null;
-  const check = args.check;
-  const searchText = [args.summary.name, args.summary.category, args.summary.platformId, String(args.summary.id)].filter(Boolean).join(" ").toLowerCase();
-  const search = args.search?.trim().toLowerCase() ?? "";
-  const matchesSearch = !search || searchText.includes(search);
-  const isCompatible = !check || servicePassesCurrentFilter(check, args.state);
-  const status = describeCheck(check, args.state);
-  return {
-    id: String(args.summary.id),
-    summary: args.summary,
-    service,
-    check,
-    matchesSearch,
-    isCompatible,
-    passesCurrentFilter: matchesSearch,
-    statusTone: status.tone,
-    statusLabel: status.label,
-    reasonLabels: status.reasons,
-    searchText
-  };
-}
-function buildButtonGroups(fields, visibleFieldIds) {
-  const visibleSet = new Set(visibleFieldIds);
-  return fields.filter((field) => visibleSet.has(field.id)).map((field) => {
-    const options = field.options?.length ? field.options.filter((option) => option.id).map((option) => ({
-      id: String(option.id),
-      label: option.label,
-      description: `Option in ${field.label}`,
-      fieldId: field.id,
-      fieldLabel: field.label
-    })) : field.button ? [
-      {
-        id: field.id,
-        label: field.label,
-        description: "Button field",
-        fieldId: field.id,
-        fieldLabel: field.label
-      }
-    ] : [];
-    return {
-      id: field.id,
-      label: field.label,
-      options
-    };
-  }).filter((group) => group.options.length > 0);
-}
-function collectUsedServiceIds(args) {
-  const visibleSet = new Set(args.visibleFieldIds);
-  const used = /* @__PURE__ */ new Set();
-  const tag = args.props.filters?.find((item) => item.id === args.tagId);
-  if (tag?.service_id != null) used.add(String(tag.service_id));
-  for (const field of args.props.fields ?? []) {
-    if (!visibleSet.has(field.id)) continue;
-    if (field.service_id != null) {
-      used.add(String(field.service_id));
-    }
-    for (const option of field.options ?? []) {
-      if (option.service_id != null) {
-        used.add(String(option.service_id));
-      }
-    }
-  }
-  return Array.from(used);
-}
-function describeTag(tag) {
-  const constraints = Object.entries(tag.constraints ?? {}).filter(([, enabled]) => enabled).map(([key]) => key);
-  return constraints.length ? constraints.join(", ") : "All visible services";
-}
-function servicePassesCurrentFilter(check, state) {
-  const passesPolicies = state?.enforcePolicies === false ? true : check.passesPolicies;
-  const safetyPass = check.fitsConstraints && check.passesRate && passesPolicies;
-  return state?.strictSafety === false ? true : safetyPass;
-}
-function describeCheck(check, state) {
-  if (!check) {
-    return {
-      tone: "default",
-      label: "No context",
-      reasons: []
-    };
-  }
-  const reasons = [
-    !check.fitsConstraints ? "Constraint mismatch" : null,
-    !check.passesRate ? "Rate policy mismatch" : null,
-    state?.enforcePolicies !== false && !check.passesPolicies ? "Policy blocked" : null,
-    check.reasons.includes("missing_capability") ? "Missing capability" : null
-  ].filter(Boolean);
-  if (servicePassesCurrentFilter(check, state) && check.ok) {
-    return { tone: "success", label: "Safe fit", reasons };
-  }
-  if (servicePassesCurrentFilter(check, state)) {
-    return { tone: "warning", label: state?.enforcePolicies === false ? "Policy checks relaxed" : "Usable", reasons };
-  }
-  if (reasons.length) {
-    return { tone: "danger", label: "Hidden by context", reasons };
-  }
-  return { tone: "default", label: "Available", reasons };
-}
-
 // src/workspace/fallback-editor-modal.tsx
 import { useCanvas as useCanvas18, useWorkspace as useWorkspace14 } from "@timeax/digital-service-engine/workspace";
 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 { Suspense, lazy, createContext as createContext4, useCallback as useCallback18, useContext as useContext4, useEffect as useEffect19, 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 jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs51 } from "react/jsx-runtime";
 var LazyFallbackEditor = lazy(async () => {
   const mod = await import("@timeax/digital-service-engine/react");
   return { default: mod.FallbackEditor };
@@ -13233,11 +13561,11 @@ function FallbackEditorModalProvider({ children }) {
   const [launch, setLaunch] = useState31(null);
   const [sessionId, setSessionId] = useState31(0);
   const [surfaceError, setSurfaceError] = useState31(null);
-  const close = useCallback17(() => {
+  const close = useCallback18(() => {
     setLaunch(null);
     setSurfaceError(null);
   }, []);
-  const openForNode = useCallback17((input) => {
+  const openForNode = useCallback18((input) => {
     setSurfaceError(null);
     setSessionId((current) => current + 1);
     setLaunch({
@@ -13248,7 +13576,7 @@ function FallbackEditorModalProvider({ children }) {
       nodeLabel: input.nodeLabel ?? input.nodeId
     });
   }, []);
-  const openForService = useCallback17((input) => {
+  const openForService = useCallback18((input) => {
     setSurfaceError(null);
     setSessionId((current) => current + 1);
     setLaunch({
@@ -13257,7 +13585,7 @@ function FallbackEditorModalProvider({ children }) {
       serviceName: input.serviceName
     });
   }, []);
-  const persistProps = useCallback17(
+  const persistProps = useCallback18(
     (label, mutate) => {
       const editorAny = canvas.api.editor;
       if (typeof editorAny.transact !== "function" || typeof editorAny.replaceProps !== "function") {
@@ -13271,7 +13599,7 @@ function FallbackEditorModalProvider({ children }) {
     },
     [canvas.api.builder, canvas.api.editor, canvas.props]
   );
-  const handleSave = useCallback17(
+  const handleSave = useCallback18(
     async (nextFallbacks) => {
       setSurfaceError(null);
       try {
@@ -13288,7 +13616,7 @@ function FallbackEditorModalProvider({ children }) {
     },
     [close, persistProps]
   );
-  const handleSettingsChange = useCallback17(
+  const handleSettingsChange = useCallback18(
     async (nextSettings) => {
       setSurfaceError(null);
       try {
@@ -13323,7 +13651,7 @@ function FallbackEditorModalProvider({ children }) {
     () => canvas.props?.fallbackSettings ?? {},
     [canvas.props]
   );
-  useEffect18(() => {
+  useEffect19(() => {
     if (!launch) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") close();
@@ -13340,7 +13668,7 @@ function FallbackEditorModalProvider({ children }) {
     }),
     [close, launch, openForNode, openForService]
   );
-  return /* @__PURE__ */ jsxs50(FallbackEditorModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ jsxs51(FallbackEditorModalContext.Provider, { value, children: [
     children,
     typeof document !== "undefined" && launch ? createPortal3(
       /* @__PURE__ */ jsx70(
@@ -13350,15 +13678,15 @@ function FallbackEditorModalProvider({ children }) {
           onMouseDown: (event) => {
             if (event.target === event.currentTarget) close();
           },
-          children: /* @__PURE__ */ jsxs50(
+          children: /* @__PURE__ */ jsxs51(
             "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__ */ 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__ */ 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__ */ 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 })
                   ] }),
@@ -13401,7 +13729,7 @@ function useFallbackEditorModal() {
 
 // src/workspace/bottom-panel/index.tsx
 import { useCanvas as useCanvas21, useWorkspace as useWorkspace15 } from "@timeax/digital-service-engine/workspace";
-import { useCallback as useCallback18, useEffect as useEffect21, useMemo as useMemo34, useRef as useRef11, useState as useState34 } from "react";
+import { useCallback as useCallback19, useEffect as useEffect22, useMemo as useMemo34, useRef as useRef11, useState as useState34 } from "react";
 import { FiEye as FiEye3, FiEyeOff as FiEyeOff2, FiSearch, FiTerminal as FiTerminal2, FiX as FiX5 } from "react-icons/fi";
 import { LuGripHorizontal, LuLayers3 } from "react-icons/lu";
 import { MdOutlineSync } from "react-icons/md";
@@ -13612,7 +13940,7 @@ function toNodeChip(canvas, id) {
 }
 
 // src/workspace/bottom-panel/console-tab.tsx
-import { Fragment as Fragment15, jsx as jsx72, jsxs as jsxs51 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx72, jsxs as jsxs52 } from "react/jsx-runtime";
 function ConsoleTab({
   errors,
   notices,
@@ -13641,20 +13969,20 @@ function ConsoleTab({
   ];
   const activeIntro = introState[subTab];
   const introCopy = getConsoleIntroCopy(subTab);
-  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: [
+  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: [
         /* @__PURE__ */ jsx72("p", { className: "text-sm font-semibold text-slate-900 dark:text-slate-100", children: introCopy.title }),
-        !activeIntro.minimized ? /* @__PURE__ */ jsxs51(Fragment15, { children: [
+        !activeIntro.minimized ? /* @__PURE__ */ jsxs52(Fragment15, { children: [
           /* @__PURE__ */ jsx72("p", { className: "mt-1 text-xs text-slate-600 dark:text-slate-300", children: introCopy.description }),
-          /* @__PURE__ */ jsxs51("div", { className: "mt-2 flex flex-wrap items-center gap-2 text-[11px] text-slate-500 dark:text-slate-400", children: [
+          /* @__PURE__ */ jsxs52("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__ */ jsxs51("div", { className: "flex items-center gap-2 text-xs", children: [
+      /* @__PURE__ */ jsxs52("div", { className: "flex items-center gap-2 text-xs", children: [
         /* @__PURE__ */ jsx72(
           "button",
           {
@@ -13675,9 +14003,9 @@ function ConsoleTab({
         )
       ] })
     ] }) }) : null,
-    /* @__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(
+    /* @__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(
           "button",
           {
             type: "button",
@@ -13693,12 +14021,12 @@ function ConsoleTab({
           },
           tab.id
         )) }),
-        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: [
+        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: [
           /* @__PURE__ */ jsx72(FiTrash2, {}),
           "Clear logs"
         ] }) : null
       ] }),
-      /* @__PURE__ */ jsxs51("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsxs52("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",
@@ -13724,7 +14052,7 @@ function ConsoleTab({
             children: "Active node"
           }
         ),
-        subTab !== "logs" ? /* @__PURE__ */ jsxs51(Fragment15, { children: [
+        subTab !== "logs" ? /* @__PURE__ */ jsxs52(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",
@@ -13770,20 +14098,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__ */ jsxs51("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__ */ jsxs52("div", { className: "flex items-start gap-3", children: [
     /* @__PURE__ */ jsx72("div", { className: "mt-0.5", children: iconForSeverity(notice.severity) }),
-    /* @__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__ */ 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__ */ 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__ */ jsxs51("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: [
+      notice.reason ? /* @__PURE__ */ jsxs52("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: [
         "Reason: ",
         notice.reason
       ] }) : null,
-      /* @__PURE__ */ jsxs51("div", { className: "flex flex-wrap items-center gap-2 text-xs text-slate-500 dark:text-slate-400", children: [
+      /* @__PURE__ */ jsxs52("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",
           {
@@ -13794,11 +14122,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__ */ jsxs51("span", { children: [
+        notice.icon ? /* @__PURE__ */ jsxs52("span", { children: [
           "Icon: ",
           notice.icon
         ] }) : null,
-        notice.color ? /* @__PURE__ */ jsxs51("span", { children: [
+        notice.color ? /* @__PURE__ */ jsxs52("span", { children: [
           "Color: ",
           notice.color
         ] }) : null
@@ -13814,10 +14142,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__ */ jsxs51("div", { className: "flex items-start gap-3", children: [
+      children: /* @__PURE__ */ jsxs52("div", { className: "flex items-start gap-3", children: [
         /* @__PURE__ */ jsx72("div", { className: "mt-0.5", children: iconForSeverity(row.severity) }),
-        /* @__PURE__ */ jsxs51("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsxs51("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsxs52("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs52("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 })
           ] }),
@@ -13836,16 +14164,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__ */ jsxs51("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__ */ jsxs52("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__ */ jsxs51("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsxs51("div", { className: "flex flex-wrap items-center gap-2", children: [
+    /* @__PURE__ */ jsxs52("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs52("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__ */ jsxs51("div", { className: "mt-3 flex items-center justify-between gap-3 text-xs text-slate-500 dark:text-slate-400", children: [
+      /* @__PURE__ */ jsxs52("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__ */ jsxs51(Button, { type: "button", variant: "ghost", size: "sm", onClick: onRemove, className: "h-7 rounded-xl px-2 text-xs", children: [
+        /* @__PURE__ */ jsxs52(Button, { type: "button", variant: "ghost", size: "sm", onClick: onRemove, className: "h-7 rounded-xl px-2 text-xs", children: [
           /* @__PURE__ */ jsx72(FiX4, {}),
           "Dismiss"
         ] })
@@ -13856,7 +14184,7 @@ function LogCard({ row, onRemove }) {
 
 // src/workspace/bottom-panel/service-picker-dialog.tsx
 import { InputField as InputField16 } from "@timeax/form-palette";
-import { useEffect as useEffect19, useMemo as useMemo33, useState as useState32 } from "react";
+import { useEffect as useEffect20, useMemo as useMemo33, useState as useState32 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
 // src/workspace/bottom-panel/service-picker.ts
@@ -13974,7 +14302,7 @@ function isScalar(value) {
 }
 
 // src/workspace/bottom-panel/service-picker-dialog.tsx
-import { jsx as jsx73, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs53 } from "react/jsx-runtime";
 function ServicePickerDialog({
   open,
   groupLabel,
@@ -13987,12 +14315,12 @@ function ServicePickerDialog({
 }) {
   const [filters, setFilters] = useState32(() => createDefaultServicePickerFilters());
   const [selectedIds, setSelectedIds] = useState32(/* @__PURE__ */ new Set());
-  useEffect19(() => {
+  useEffect20(() => {
     if (!open) return;
     setFilters(createDefaultServicePickerFilters());
     setSelectedIds(/* @__PURE__ */ new Set());
   }, [open]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (!open) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") onOpenChange(false);
@@ -14020,7 +14348,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__ */ jsxs52(
+    /* @__PURE__ */ jsx73("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-slate-950/45 p-4", children: /* @__PURE__ */ jsxs53(
       "div",
       {
         role: "dialog",
@@ -14028,15 +14356,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__ */ jsxs52("div", { className: "flex items-start justify-between gap-4", children: [
-            /* @__PURE__ */ jsxs52("div", { 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("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__ */ 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__ */ 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__ */ jsx73(FilterField, { label: "Search", children: /* @__PURE__ */ jsx73(
                 InputField16,
                 {
@@ -14087,7 +14415,7 @@ function ServicePickerDialog({
                   }))
                 }
               ) }),
-              /* @__PURE__ */ jsxs52("div", { className: "grid grid-cols-2 gap-2", children: [
+              /* @__PURE__ */ jsxs53("div", { className: "grid grid-cols-2 gap-2", children: [
                 /* @__PURE__ */ jsx73(FilterField, { label: "Min rate", children: /* @__PURE__ */ jsx73(
                   InputField16,
                   {
@@ -14111,7 +14439,7 @@ function ServicePickerDialog({
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsx73(FilterField, { label: "Name keyword", children: /* @__PURE__ */ jsxs52("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx73(FilterField, { label: "Name keyword", children: /* @__PURE__ */ jsxs53("div", { className: "space-y-2", children: [
                 /* @__PURE__ */ jsx73(
                   InputField16,
                   {
@@ -14182,8 +14510,8 @@ function ServicePickerDialog({
                 }
               ) })
             ] }) }) }),
-            /* @__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: [
+            /* @__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: [
                 filteredServices.length,
                 " service",
                 filteredServices.length === 1 ? "" : "s",
@@ -14193,7 +14521,7 @@ function ServicePickerDialog({
                 const id = String(service.id);
                 const selected = selectedIds.has(id);
                 const alreadyAssigned = existingGroupServiceIds.has(id);
-                return /* @__PURE__ */ jsxs52(
+                return /* @__PURE__ */ jsxs53(
                   "label",
                   {
                     className: cn(
@@ -14215,12 +14543,12 @@ function ServicePickerDialog({
                           })
                         }
                       ),
-                      /* @__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__ */ 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__ */ jsx73("div", { className: "truncate text-sm font-semibold text-slate-900 dark:text-slate-100", children: service.name }),
-                            /* @__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: [
+                            /* @__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: [
                                 "#",
                                 service.id
                               ] }),
@@ -14230,8 +14558,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__ */ 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: [
+                        /* @__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: [
                             "Rate ",
                             service.rate
                           ] }) : null,
@@ -14245,14 +14573,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__ */ 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: [
+          /* @__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: [
               selectedCount,
               " service",
               selectedCount === 1 ? "" : "s",
               " selected"
             ] }),
-            /* @__PURE__ */ jsxs52("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs53("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,
@@ -14276,7 +14604,7 @@ function ServicePickerDialog({
   );
 }
 function FilterField({ label, children }) {
-  return /* @__PURE__ */ jsxs52("label", { className: "block space-y-1.5", children: [
+  return /* @__PURE__ */ jsxs53("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
   ] });
@@ -14327,12 +14655,12 @@ function ResizableHandle({
 
 // src/workspace/bottom-panel/services-split-pane.tsx
 import { InputField as InputField17 } from "@timeax/form-palette";
-import { useEffect as useEffect20, useState as useState33 } from "react";
-import { FaFolderOpen } from "react-icons/fa";
-import { FiEdit2, FiFilter, FiFolderPlus, FiPlus as FiPlus2, FiTrash2 as FiTrash22 } from "react-icons/fi";
+import { useEffect as useEffect21, useState as useState33 } from "react";
+import { FaFolderOpen as FaFolderOpen2 } from "react-icons/fa";
+import { FiEdit2, FiFilter as FiFilter2, 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 jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs54 } from "react/jsx-runtime";
 function ServiceDetailCard({
   mode,
   row,
@@ -14343,16 +14671,16 @@ function ServiceDetailCard({
 }) {
   const summary = row.summary;
   const service = row.service;
-  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: [
+  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: [
             /* @__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__ */ jsxs53("div", { className: "mt-2 flex flex-wrap gap-2 text-xs text-slate-500 dark:text-slate-400", children: [
-            /* @__PURE__ */ jsxs53("span", { children: [
+          /* @__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: [
               "#",
               summary.id
             ] }),
@@ -14360,7 +14688,7 @@ function ServiceDetailCard({
             summary.platformId ? /* @__PURE__ */ jsx75("span", { children: summary.platformId }) : null
           ] })
         ] }),
-        /* @__PURE__ */ jsxs53("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs54("div", { className: "flex items-center gap-2", children: [
           mode === "active" && onOpenFallbackQuickAdd ? /* @__PURE__ */ jsx75(
             "button",
             {
@@ -14382,14 +14710,14 @@ function ServiceDetailCard({
           /* @__PURE__ */ jsx75("span", { className: statusBadgeClassName(row.statusTone), children: row.statusLabel })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs53("div", { className: "mt-4 grid gap-3 sm:grid-cols-2", children: [
+      /* @__PURE__ */ jsxs54("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__ */ jsxs53("section", { className: "space-y-3", children: [
+    mode !== "active" ? /* @__PURE__ */ jsxs54("section", { className: "space-y-3", children: [
       /* @__PURE__ */ jsx75(
         SectionTitle2,
         {
@@ -14397,8 +14725,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__ */ 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__ */ 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__ */ 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(
@@ -14412,14 +14740,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__ */ jsxs53("section", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs54("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__ */ jsxs53("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__ */ jsxs54("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__ */ jsxs53("section", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs54("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",
@@ -14435,13 +14763,13 @@ function ServiceDetailCard({
   ] });
 }
 function SectionTitle2({ title, description }) {
-  return /* @__PURE__ */ jsxs53("div", { children: [
+  return /* @__PURE__ */ jsxs54("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__ */ jsxs53("div", { className: "rounded-2xl bg-white px-4 py-3 dark:bg-slate-950", children: [
+  return /* @__PURE__ */ jsxs54("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 })
   ] });
@@ -14451,22 +14779,22 @@ function FilterChip({ label, tone = "default" }) {
 }
 
 // src/workspace/bottom-panel/services-split-pane.tsx
-import { jsx as jsx76, jsxs as jsxs54 } from "react/jsx-runtime";
-var UNGROUPED_TREE_VALUE = "__catalog_ungrouped__";
+import { jsx as jsx76, jsxs as jsxs55 } from "react/jsx-runtime";
+var UNGROUPED_TREE_VALUE2 = "__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__ */ 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: [
+  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: [
           /* @__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__ */ jsxs54("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs55("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__ */ jsxs54("div", { className: "flex flex-wrap gap-2 pb-3", children: [
+        props.mode === "all" && props.appliedSnapshot?.selectedTag ? /* @__PURE__ */ jsxs55("div", { className: "flex flex-wrap gap-2 pb-3", children: [
           /* @__PURE__ */ jsx76(FilterChip2, { label: `Context tag: ${props.appliedSnapshot.selectedTag.label}` }),
           /* @__PURE__ */ jsx76(
             FilterChip2,
@@ -14503,7 +14831,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__ */ jsxs54(
+      /* @__PURE__ */ jsx76(ScrollArea, { className: "h-[calc(var(--bottom-panel-height)-14.5rem)] max-h-[calc(var(--bottom-panel-height)-14.5rem)] 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(
         "button",
         {
           type: "button",
@@ -14516,14 +14844,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__ */ 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__ */ 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__ */ 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__ */ 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: [
+                /* @__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: [
                     "#",
                     row.summary.id
                   ] }),
@@ -14533,13 +14861,13 @@ function ServicesSplitPane(props) {
               ] }),
               /* @__PURE__ */ jsx76("span", { className: statusBadgeClassName(row.statusTone), children: row.statusLabel })
             ] }),
-            /* @__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: [
+            /* @__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: [
                 row.summary.attachmentCount,
                 " node",
                 row.summary.attachmentCount === 1 ? "" : "s"
               ] }),
-              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: [
+              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: [
                 "Rate ",
                 row.summary.rate
               ] }) : null,
@@ -14558,13 +14886,13 @@ function ServicesSplitPane(props) {
       )) }) })
     ] }) }),
     /* @__PURE__ */ jsx76(ResizableHandle, { withHandle: true }),
-    /* @__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(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("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." })
       ] }),
-      /* @__PURE__ */ jsx76(ScrollArea, { className: "h-[calc(var(--bottom-panel-height)-15rem)] min-h-0 flex-1", children: /* @__PURE__ */ jsx76("div", { className: "p-5", children: props.detailRow ? /* @__PURE__ */ jsx76(
+      /* @__PURE__ */ jsx76(ScrollArea, { className: "h-[calc(var(--bottom-panel-height)-14.5rem)] max-h-[calc(var(--bottom-panel-height)-14.5rem)] min-h-0 flex-1", children: /* @__PURE__ */ jsx76("div", { className: "p-5", children: props.detailRow ? /* @__PURE__ */ jsx76(
         ServiceDetailCard,
         {
           mode: props.mode,
@@ -14596,7 +14924,7 @@ function CatalogContextPopover({
   onDraftContextChange
 }) {
   const context = draftContext;
-  return /* @__PURE__ */ jsxs54(Popover, { open, onOpenChange, children: [
+  return /* @__PURE__ */ jsxs55(Popover, { open, onOpenChange, children: [
     /* @__PURE__ */ jsx76(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx76(
       "button",
       {
@@ -14606,10 +14934,10 @@ function CatalogContextPopover({
           "inline-flex h-9 w-9 items-center justify-center rounded-xl border text-sm transition",
           compatibleOnly ? "border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-500/30 dark:bg-blue-500/10 dark:text-blue-200" : "border-slate-200 bg-white text-slate-600 hover:bg-slate-100 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-300 dark:hover:bg-slate-900"
         ),
-        children: /* @__PURE__ */ jsx76(FiFilter, {})
+        children: /* @__PURE__ */ jsx76(FiFilter2, {})
       }
     ) }),
-    /* @__PURE__ */ jsxs54(
+    /* @__PURE__ */ jsxs55(
       PopoverContent,
       {
         align: "end",
@@ -14617,30 +14945,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__ */ jsxs54("div", { className: "border-b border-slate-200 px-4 py-3 dark:border-slate-800", children: [
+          /* @__PURE__ */ jsxs55("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__ */ 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(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("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__ */ 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__ */ 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("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__ */ 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__ */ 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__ */ 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__ */ jsxs54("label", { className: "flex items-start gap-3 text-sm text-slate-900 dark:text-slate-100", children: [
+                return /* @__PURE__ */ jsxs55("label", { className: "flex items-start gap-3 text-sm text-slate-900 dark:text-slate-100", children: [
                   /* @__PURE__ */ jsx76(
                     "input",
                     {
@@ -14659,20 +14987,20 @@ function CatalogContextPopover({
                       })
                     }
                   ),
-                  /* @__PURE__ */ jsxs54("span", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsxs55("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__ */ 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__ */ 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__ */ 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__ */ jsxs54("div", { className: "space-y-2", children: [
+              draftSnapshot?.buttonGroups?.length ? /* @__PURE__ */ jsx76("div", { className: "space-y-3", children: draftSnapshot.buttonGroups.map((group) => /* @__PURE__ */ jsxs55("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__ */ jsxs54(
+                  return /* @__PURE__ */ jsxs55(
                     "label",
                     {
                       className: "flex items-start gap-3 text-sm text-slate-900 dark:text-slate-100",
@@ -14694,7 +15022,7 @@ function CatalogContextPopover({
                             })
                           }
                         ),
-                        /* @__PURE__ */ jsxs54("span", { className: "min-w-0", children: [
+                        /* @__PURE__ */ jsxs55("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
                         ] })
@@ -14705,9 +15033,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__ */ 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__ */ 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__ */ jsx76("div", { className: "text-xs font-semibold tracking-[0.16em] text-slate-500 uppercase dark:text-slate-400", children: "Safety" }),
-              /* @__PURE__ */ jsxs54("label", { className: "flex items-center justify-between gap-3 text-sm text-slate-900 dark:text-slate-100", children: [
+              /* @__PURE__ */ jsxs55("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",
@@ -14722,7 +15050,7 @@ function CatalogContextPopover({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs54("label", { className: "flex items-center justify-between gap-3 text-sm text-slate-900 dark:text-slate-100", children: [
+              /* @__PURE__ */ jsxs55("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",
@@ -14756,10 +15084,10 @@ function CatalogToolbar({
   onDeleteGroup,
   onAssignServices
 }) {
-  const treeValue = selectedGroupId ?? (ungroupedSelected ? UNGROUPED_TREE_VALUE : void 0);
-  const treeOptions = buildCatalogGroupTreeOptions(groups);
-  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: [
+  const treeValue = selectedGroupId ?? (ungroupedSelected ? UNGROUPED_TREE_VALUE2 : void 0);
+  const treeOptions = buildCatalogGroupTreeOptions2(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: [
       /* @__PURE__ */ jsx76(
         GroupInputPopoverButton,
         {
@@ -14815,14 +15143,14 @@ function CatalogToolbar({
         className: "w-fit!",
         multiple: false,
         value: treeValue,
-        options: [{ key: UNGROUPED_TREE_VALUE, label: "Ungrouped" }, ...treeOptions],
+        options: [{ key: UNGROUPED_TREE_VALUE2, label: "Ungrouped" }, ...treeOptions],
         searchable: true,
         clearable: true,
         onChange: (event) => {
           const next = event.value == null ? null : String(event.value);
-          onSelectGroup(next === UNGROUPED_TREE_VALUE ? null : next);
+          onSelectGroup(next === UNGROUPED_TREE_VALUE2 ? null : next);
         },
-        button: /* @__PURE__ */ jsx76(FaFolderOpen, {})
+        button: /* @__PURE__ */ jsx76(FaFolderOpen2, {})
       }
     )
   ] });
@@ -14838,10 +15166,10 @@ function GroupInputPopoverButton({
 }) {
   const [open, setOpen] = useState33(false);
   const [value, setValue] = useState33(initialValue);
-  useEffect20(() => {
+  useEffect21(() => {
     if (open) setValue(initialValue);
   }, [initialValue, open]);
-  return /* @__PURE__ */ jsxs54(Popover, { open, onOpenChange: setOpen, children: [
+  return /* @__PURE__ */ jsxs55(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx76(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx76(
       "button",
       {
@@ -14856,8 +15184,8 @@ function GroupInputPopoverButton({
         children: icon
       }
     ) }),
-    /* @__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(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("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." })
       ] }),
@@ -14872,7 +15200,7 @@ function GroupInputPopoverButton({
           autoComplete: "off"
         }
       ),
-      /* @__PURE__ */ jsxs54("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsxs55("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,
@@ -14904,7 +15232,7 @@ function ConfirmPopoverButton({
   onConfirm
 }) {
   const [open, setOpen] = useState33(false);
-  return /* @__PURE__ */ jsxs54(Popover, { open, onOpenChange: setOpen, children: [
+  return /* @__PURE__ */ jsxs55(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx76(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx76(
       "button",
       {
@@ -14919,12 +15247,12 @@ function ConfirmPopoverButton({
         children: icon
       }
     ) }),
-    /* @__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(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("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__ */ jsxs54("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsxs55("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,
@@ -14949,7 +15277,7 @@ function ToolbarIconButton({
   disabled = false,
   onClick
 }) {
-  return /* @__PURE__ */ jsxs54(Tooltip, { children: [
+  return /* @__PURE__ */ jsxs55(Tooltip, { children: [
     /* @__PURE__ */ jsx76(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx76(
       "button",
       {
@@ -14970,9 +15298,9 @@ function ToolbarIconButton({
 function FilterChip2({ label, tone = "default" }) {
   return /* @__PURE__ */ jsx76("span", { className: cn("rounded-full px-2.5 py-1 text-[11px] font-medium", filterChipClassName(tone)), children: label });
 }
-function buildCatalogGroupTreeOptions(groups, parentId = null) {
+function buildCatalogGroupTreeOptions2(groups, parentId = null) {
   return groups.filter((group) => (group.parentId ?? null) === parentId).sort((a, b) => (a.order ?? 0) - (b.order ?? 0) || a.label.localeCompare(b.label)).map((group) => {
-    const children = buildCatalogGroupTreeOptions(groups, group.id);
+    const children = buildCatalogGroupTreeOptions2(groups, group.id);
     return {
       key: group.id,
       label: group.label,
@@ -14983,7 +15311,7 @@ function buildCatalogGroupTreeOptions(groups, parentId = null) {
 }
 
 // src/workspace/bottom-panel/index.tsx
-import { Fragment as Fragment16, jsx as jsx77, jsxs as jsxs55 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx77, jsxs as jsxs56 } from "react/jsx-runtime";
 var DRAG_MIME = "application/x-service-builder-service";
 function BottomConsolePanel({ controller, errors, activeServices, allServices, onServiceDragStateChange }) {
   const canvas = useCanvas21();
@@ -15078,25 +15406,25 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
     ).filter((row) => row.matchesSearch).filter((row) => !compatibleOnly || row.isCompatible).filter((row) => !hideActiveServices || !hiddenServiceIds.has(row.id)),
     [allChecksById, allSearch, allServices, compatibleOnly, effectiveCatalogContext, hiddenServiceIds, hideActiveServices, servicesMap]
   );
-  useEffect21(() => {
+  useEffect22(() => {
     const next = createDefaultServiceContext(canvas.props, preferredTagId);
     setCatalogContextDraft((current) => {
       if (contextLinked) return current;
       return current.selectedTagId ? current : next;
     });
   }, [canvas.props, contextLinked, preferredTagId]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (!contextLinked) return;
     setCatalogContextDraft(liveSelectionContext);
   }, [contextLinked, liveSelectionContext]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (contextLinked) return;
     const next = sanitizeServiceContext(draftSnapshot, catalogContextDraft);
     if (JSON.stringify(next) !== JSON.stringify(catalogContextDraft)) {
       setCatalogContextDraft(next);
     }
   }, [catalogContextDraft, contextLinked, draftSnapshot]);
-  useEffect21(() => {
+  useEffect22(() => {
     const editor = canvas.api.editor;
     const ensured = editor.getCatalog?.() ?? editor.ensureCatalog?.();
     console.log(ensured);
@@ -15143,24 +15471,24 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
     return ids;
   }, [canvas.activeId, canvas.selectionInfo.ids]);
   const consoleIssueCount = errors.validation.length + errors.logs.length + notices.length;
-  useEffect21(() => {
+  useEffect22(() => {
     setSelectedActiveServiceId((current) => ensureSelectedRow(current, activeRows));
   }, [activeRows]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (catalogState?.selectedServiceId == null) return;
     setSelectedAllServiceId(String(catalogState.selectedServiceId));
   }, [catalogState?.selectedServiceId]);
-  useEffect21(() => {
+  useEffect22(() => {
     setSelectedAllServiceId((current) => ensureSelectedRow(current, visibleAllRows));
   }, [visibleAllRows]);
-  useEffect21(() => {
+  useEffect22(() => {
     const desiredIds = controller.isOpen && controller.activeTab === "activeServices" && selectedActiveServiceId ? activeRows.find((row) => row.id === selectedActiveServiceId)?.summary.attachedNodeIds ?? [] : [];
     if (!sameIds(lastHighlightedIdsRef.current, desiredIds)) {
       canvas.api.setHighlighted(desiredIds);
       lastHighlightedIdsRef.current = [...desiredIds];
     }
   }, [activeRows, canvas.api, controller.activeTab, controller.isOpen, selectedActiveServiceId]);
-  useEffect21(() => {
+  useEffect22(() => {
     return () => {
       if (lastHighlightedIdsRef.current.length) {
         canvas.api.setHighlighted([]);
@@ -15168,10 +15496,10 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
       }
     };
   }, [canvas.api]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (searchOpen) searchInputRef.current?.focus();
   }, [searchOpen]);
-  useEffect21(() => {
+  useEffect22(() => {
     setPanelPosition((current) => {
       const resolved = resolvePanelPosition(current, panelRef.current, panelContainerRef.current);
       persistPanelPosition(resolved);
@@ -15193,7 +15521,7 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
     }
     event.preventDefault();
   };
-  useEffect21(() => {
+  useEffect22(() => {
     if (!draggingPanel) return;
     const onPointerMove = (event) => {
       const start = dragStartRef.current;
@@ -15221,7 +15549,7 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
       window.removeEventListener("pointercancel", onPointerUp);
     };
   }, [draggingPanel, panelPosition]);
-  const setCatalogMode = useCallback18(
+  const setCatalogMode = useCallback19(
     (mode) => {
       const editor = canvas.api.editor;
       editor.ensureCatalog?.();
@@ -15229,27 +15557,27 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
     },
     [canvas.api.editor]
   );
-  const handleSelectCatalogService = useCallback18(
+  const handleSelectCatalogService = useCallback19(
     (id) => {
       setSelectedAllServiceId(id);
       canvas.api.editor.setSelectedCatalogService?.(id ?? void 0);
     },
     [canvas.api.editor]
   );
-  const handleSelectCatalogGroup = useCallback18(
+  const handleSelectCatalogGroup = useCallback19(
     (groupId) => {
       canvas.api.editor.setActiveCatalogNode?.(groupId ?? void 0);
     },
     [canvas.api.editor]
   );
-  const handleCreateRootGroup = useCallback18(
+  const handleCreateRootGroup = useCallback19(
     (label) => {
       if (!label.trim()) return;
       canvas.api.editor.createCatalogGroup?.({ label: label.trim() });
     },
     [canvas.api.editor]
   );
-  const handleCreateChildGroup = useCallback18(
+  const handleCreateChildGroup = useCallback19(
     (label) => {
       if (!selectedCatalogGroupId) return;
       const editor = canvas.api.editor;
@@ -15258,7 +15586,7 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
     },
     [canvas.api.editor, selectedCatalogGroupId]
   );
-  const handleRenameGroup = useCallback18(
+  const handleRenameGroup = useCallback19(
     (label) => {
       if (!selectedCatalogGroupId) return;
       const group = catalogGroups.find((item) => item.id === selectedCatalogGroupId);
@@ -15268,15 +15596,15 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
     },
     [canvas.api.editor, catalogGroups, selectedCatalogGroupId]
   );
-  const handleDeleteGroup = useCallback18(() => {
+  const handleDeleteGroup = useCallback19(() => {
     if (!selectedCatalogGroupId) return;
     canvas.api.editor.removeCatalogNode?.(selectedCatalogGroupId, { cascade: true });
   }, [canvas.api.editor, selectedCatalogGroupId]);
-  const handleAssignServices = useCallback18(() => {
+  const handleAssignServices = useCallback19(() => {
     if (!selectedCatalogGroupId) return;
     setServicePickerOpen(true);
   }, [selectedCatalogGroupId]);
-  const handleConfirmAssignServices = useCallback18(
+  const handleConfirmAssignServices = useCallback19(
     (serviceIds) => {
       if (!selectedCatalogGroupId || !serviceIds.length) return;
       canvas.api.editor.assignServicesToCatalogGroup?.(selectedCatalogGroupId, serviceIds, "append");
@@ -15317,7 +15645,7 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
       }
     ) });
   }, [controller.activeTab, activeSearch, allSearch, setActiveSearch, setAllSearch]);
-  return /* @__PURE__ */ jsxs55("div", { ref: panelContainerRef, className: "pointer-events-none absolute inset-0", children: [
+  return /* @__PURE__ */ jsxs56("div", { ref: panelContainerRef, className: "pointer-events-none absolute inset-0", children: [
     /* @__PURE__ */ jsx77(
       ServicePickerDialog,
       {
@@ -15331,7 +15659,7 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
         onConfirm: handleConfirmAssignServices
       }
     ),
-    /* @__PURE__ */ jsxs55(
+    /* @__PURE__ */ jsxs56(
       Panel,
       {
         ref: panelRef,
@@ -15362,8 +15690,8 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
           ["--bottom-panel-height"]: controller.height + "px"
         },
         children: [
-          /* @__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(
+          /* @__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(
               "button",
               {
                 type: "button",
@@ -15389,8 +15717,8 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
               },
               tab.id
             )) }),
-            /* @__PURE__ */ jsxs55("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsxs55(
+            /* @__PURE__ */ jsxs56("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxs56(
                 "button",
                 {
                   type: "button",
@@ -15405,7 +15733,7 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
                   ]
                 }
               ),
-              /* @__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__ */ 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__ */ jsx77(LuGripHorizontal, {}),
                 /* @__PURE__ */ jsx77("span", { children: "Resize from top or side edges" })
               ] }),
@@ -15422,13 +15750,13 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
               )
             ] })
           ] }),
-          /* @__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__ */ 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__ */ 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__ */ jsxs55("div", { className: "relative flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx77("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxs56("div", { className: "relative flex items-center gap-2", children: [
                 searchOpen ? Search : null,
                 /* @__PURE__ */ jsx77(
                   HeaderIconButton,
@@ -15439,7 +15767,7 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
                     children: /* @__PURE__ */ jsx77(FiSearch, {})
                   }
                 ),
-                controller.activeTab === "allServices" ? /* @__PURE__ */ jsxs55(Fragment16, { children: [
+                controller.activeTab === "allServices" ? /* @__PURE__ */ jsxs56(Fragment16, { children: [
                   /* @__PURE__ */ jsx77(
                     CatalogContextPopover,
                     {
@@ -15567,7 +15895,7 @@ function HeaderIconButton({
   active = false,
   onClick
 }) {
-  return /* @__PURE__ */ jsxs55(Tooltip, { children: [
+  return /* @__PURE__ */ jsxs56(Tooltip, { children: [
     /* @__PURE__ */ jsx77(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx77(
       "button",
       {
@@ -15585,7 +15913,7 @@ function HeaderIconButton({
   ] });
 }
 function CatalogModeSwitch({ mode, onChange }) {
-  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: [
+  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: [
     /* @__PURE__ */ jsx77(
       "button",
       {
@@ -16241,7 +16569,7 @@ var workspaceBackend = createMemoryWorkspaceBackend({
 });
 
 // src/index.tsx
-import { Fragment as Fragment17, jsx as jsx78, jsxs as jsxs56 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx78, jsxs as jsxs57 } from "react/jsx-runtime";
 var inputRegistry = createInputRegistry();
 registerEntries(inputRegistry);
 function WorkspaceLayout({ onShare, onPlay, menu }) {
@@ -16251,9 +16579,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__ */ jsxs56("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__ */ jsxs57("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__ */ jsxs56("div", { className: "flex grow overflow-hidden", children: [
+    /* @__PURE__ */ jsxs57("div", { className: "flex grow overflow-hidden", children: [
       /* @__PURE__ */ jsx78(left_default, { menu }),
       /* @__PURE__ */ jsx78(
         CanvasPanel,
@@ -16354,7 +16682,7 @@ var Styles = `
 
 `;
 function ServiceBuilder({ backend, actor, onShare, onPlay, menu }) {
-  return /* @__PURE__ */ jsxs56(Fragment17, { children: [
+  return /* @__PURE__ */ jsxs57(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 }) }) })
   ] });