@timeax/service-builder 0.2.1 → 0.2.2

package/dist/index.js

@@ -409,8 +409,150 @@ function AlertDialogCancel({
   );
 }
 
+// src/workspace/permissions.ts
+var BUILDER_PERMISSIONS = {
+  WORKSPACE_READ: "workspace.read",
+  WORKSPACE_WRITE: "workspace.write",
+  BRANCHES_READ: "branches.read",
+  BRANCHES_CREATE: "branches.create",
+  BRANCHES_WRITE: "branches.write",
+  BRANCHES_DELETE: "branches.delete",
+  BRANCHES_MERGE: "branches.merge",
+  BRANCHES_PUBLISH: "branches.publish",
+  BRANCHES_MANAGE: "branches.manage",
+  TEMPLATES_READ: "templates.read",
+  TEMPLATES_WRITE: "templates.write",
+  TEMPLATES_DELETE: "templates.delete",
+  TEMPLATES_MANAGE: "templates.manage",
+  COMMENTS_READ: "comments.read",
+  COMMENTS_WRITE: "comments.write",
+  COMMENTS_MODERATE: "comments.moderate",
+  POLICIES_READ: "policies.read",
+  POLICIES_WRITE: "policies.write",
+  POLICIES_MANAGE: "policies.manage",
+  PARTICIPANTS_READ: "participants.read",
+  PARTICIPANTS_WRITE: "participants.write",
+  PARTICIPANTS_MANAGE: "participants.manage",
+  SERVICES_READ: "services.read"
+};
+var BUILDER_PERMISSION_KEYS = new Set(Object.values(BUILDER_PERMISSIONS));
+function toBuilderPermissionsMap(permissions2) {
+  if (!permissions2) return {};
+  const result = {};
+  for (const [key, value] of Object.entries(permissions2)) {
+    if (!BUILDER_PERMISSION_KEYS.has(key)) continue;
+    result[key] = value === true;
+  }
+  return result;
+}
+function can(map, permission) {
+  if (!map) return false;
+  return map[permission] === true;
+}
+function canReadWorkspace(map) {
+  return can(map, BUILDER_PERMISSIONS.WORKSPACE_READ);
+}
+function canEditBranch(map) {
+  return can(map, BUILDER_PERMISSIONS.BRANCHES_WRITE);
+}
+function canCreateBranch(map) {
+  return can(map, BUILDER_PERMISSIONS.BRANCHES_CREATE);
+}
+function canMergeBranch(map) {
+  return can(map, BUILDER_PERMISSIONS.BRANCHES_MERGE);
+}
+function canPublishBranch(map) {
+  return can(map, BUILDER_PERMISSIONS.BRANCHES_PUBLISH);
+}
+function canDeleteBranch(map) {
+  return can(map, BUILDER_PERMISSIONS.BRANCHES_DELETE);
+}
+function canManageBranches(map) {
+  return can(map, BUILDER_PERMISSIONS.BRANCHES_MANAGE);
+}
+function canWriteTemplates(map) {
+  return can(map, BUILDER_PERMISSIONS.TEMPLATES_WRITE);
+}
+function canManageTemplates(map) {
+  return can(map, BUILDER_PERMISSIONS.TEMPLATES_MANAGE);
+}
+function canReadComments(map) {
+  return can(map, BUILDER_PERMISSIONS.COMMENTS_READ);
+}
+function canWriteComments(map) {
+  return can(map, BUILDER_PERMISSIONS.COMMENTS_WRITE);
+}
+
+// src/workspace/authorization.ts
+function resolveActorAuthorId(actor, authors2) {
+  if (!actor) return "unknown";
+  const fromMeta = actor?.meta && typeof actor.meta.authorId === "string" ? actor.meta.authorId : void 0;
+  if (fromMeta) return fromMeta;
+  if ((authors2 ?? []).some((author) => author.id === actor.id)) return actor.id;
+  return actor.id;
+}
+function deriveWorkspaceAuthorization(args) {
+  const { actor, permissions: permissions2 = null, participants = null, authors: authors2 = null } = args;
+  const authorId = resolveActorAuthorId(actor, authors2);
+  const participant = (participants ?? []).find((row) => row.authorId === authorId) ?? null;
+  const permissionMap = toBuilderPermissionsMap(permissions2);
+  const readWorkspace = canReadWorkspace(permissionMap);
+  const editBranch = canEditBranch(permissionMap);
+  const createBranch = canCreateBranch(permissionMap);
+  const mergeBranches = canMergeBranch(permissionMap);
+  const publishBranches = canPublishBranch(permissionMap);
+  const deleteBranches = canDeleteBranch(permissionMap);
+  const manageBranches = canManageBranches(permissionMap);
+  const writeTemplates = canWriteTemplates(permissionMap);
+  const manageTemplates = canManageTemplates(permissionMap);
+  const commentRead = canReadComments(permissionMap);
+  const commentWrite = canWriteComments(permissionMap);
+  return {
+    authorId,
+    participant,
+    permissions: permissionMap,
+    canReadWorkspace: readWorkspace,
+    canEditBranchContent: editBranch,
+    canCreateBranch: createBranch,
+    canMergeBranches: mergeBranches,
+    canPublishBranches: publishBranches,
+    canDeleteBranches: deleteBranches,
+    canManageBranches: manageBranches,
+    canWriteTemplates: writeTemplates,
+    canManageTemplates: manageTemplates,
+    canCommentRead: readWorkspace && commentRead,
+    canCommentWrite: readWorkspace && commentWrite
+  };
+}
+function getAuthorizationDecision(auth, action) {
+  switch (action) {
+    case "branch-content-edit":
+    case "snapshot-write":
+      return auth.canEditBranchContent ? { ok: true } : { ok: false, reason: "Editing is disabled. You need branches.write." };
+    case "template-write":
+      return auth.canWriteTemplates ? { ok: true } : { ok: false, reason: "Template editing requires templates.write." };
+    case "branch-create":
+      return auth.canCreateBranch ? { ok: true } : { ok: false, reason: "Branch creation requires branches.create." };
+    case "branch-merge":
+      return auth.canMergeBranches ? { ok: true } : { ok: false, reason: "Branch merge requires branches.merge." };
+    case "branch-publish":
+      return auth.canPublishBranches ? { ok: true } : { ok: false, reason: "Branch publish requires branches.publish." };
+    case "branch-delete":
+      return auth.canDeleteBranches ? { ok: true } : { ok: false, reason: "Branch deletion requires branches.delete." };
+    case "branch-manage":
+      return auth.canManageBranches ? { ok: true } : { ok: false, reason: "Branch management requires branches.manage." };
+    case "comment-read":
+      return auth.canCommentRead ? { ok: true } : { ok: false, reason: "Comment read access is disabled for this actor." };
+    case "comment-write":
+      return auth.canCommentWrite ? { ok: true } : { ok: false, reason: "Comment write access is disabled for this actor." };
+    default:
+      return { ok: false, reason: "Action is not authorized." };
+  }
+}
+
 // src/builder/node-context-menu.tsx
 import { useCanvas as useCanvas3, useWorkspace as useWorkspace3 } from "@timeax/digital-service-engine/workspace";
+import { InputField as InputField3 } from "@timeax/form-palette";
 import { createContext as createContext2, useCallback as useCallback4, useContext as useContext2, useEffect as useEffect4, useMemo as useMemo4, useRef as useRef2, useState as useState3 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
@@ -617,147 +759,6 @@ function normalizeRole(value) {
   return value === "utility" ? "utility" : "base";
 }
 
-// src/workspace/permissions.ts
-var BUILDER_PERMISSIONS = {
-  WORKSPACE_READ: "workspace.read",
-  WORKSPACE_WRITE: "workspace.write",
-  BRANCHES_READ: "branches.read",
-  BRANCHES_CREATE: "branches.create",
-  BRANCHES_WRITE: "branches.write",
-  BRANCHES_DELETE: "branches.delete",
-  BRANCHES_MERGE: "branches.merge",
-  BRANCHES_PUBLISH: "branches.publish",
-  BRANCHES_MANAGE: "branches.manage",
-  TEMPLATES_READ: "templates.read",
-  TEMPLATES_WRITE: "templates.write",
-  TEMPLATES_DELETE: "templates.delete",
-  TEMPLATES_MANAGE: "templates.manage",
-  COMMENTS_READ: "comments.read",
-  COMMENTS_WRITE: "comments.write",
-  COMMENTS_MODERATE: "comments.moderate",
-  POLICIES_READ: "policies.read",
-  POLICIES_WRITE: "policies.write",
-  POLICIES_MANAGE: "policies.manage",
-  PARTICIPANTS_READ: "participants.read",
-  PARTICIPANTS_WRITE: "participants.write",
-  PARTICIPANTS_MANAGE: "participants.manage",
-  SERVICES_READ: "services.read"
-};
-var BUILDER_PERMISSION_KEYS = new Set(Object.values(BUILDER_PERMISSIONS));
-function toBuilderPermissionsMap(permissions2) {
-  if (!permissions2) return {};
-  const result = {};
-  for (const [key, value] of Object.entries(permissions2)) {
-    if (!BUILDER_PERMISSION_KEYS.has(key)) continue;
-    result[key] = value === true;
-  }
-  return result;
-}
-function can(map, permission) {
-  if (!map) return false;
-  return map[permission] === true;
-}
-function canReadWorkspace(map) {
-  return can(map, BUILDER_PERMISSIONS.WORKSPACE_READ);
-}
-function canEditBranch(map) {
-  return can(map, BUILDER_PERMISSIONS.BRANCHES_WRITE);
-}
-function canCreateBranch(map) {
-  return can(map, BUILDER_PERMISSIONS.BRANCHES_CREATE);
-}
-function canMergeBranch(map) {
-  return can(map, BUILDER_PERMISSIONS.BRANCHES_MERGE);
-}
-function canPublishBranch(map) {
-  return can(map, BUILDER_PERMISSIONS.BRANCHES_PUBLISH);
-}
-function canDeleteBranch(map) {
-  return can(map, BUILDER_PERMISSIONS.BRANCHES_DELETE);
-}
-function canManageBranches(map) {
-  return can(map, BUILDER_PERMISSIONS.BRANCHES_MANAGE);
-}
-function canWriteTemplates(map) {
-  return can(map, BUILDER_PERMISSIONS.TEMPLATES_WRITE);
-}
-function canManageTemplates(map) {
-  return can(map, BUILDER_PERMISSIONS.TEMPLATES_MANAGE);
-}
-function canReadComments(map) {
-  return can(map, BUILDER_PERMISSIONS.COMMENTS_READ);
-}
-function canWriteComments(map) {
-  return can(map, BUILDER_PERMISSIONS.COMMENTS_WRITE);
-}
-
-// src/workspace/authorization.ts
-function resolveActorAuthorId(actor, authors2) {
-  if (!actor) return "unknown";
-  const fromMeta = actor?.meta && typeof actor.meta.authorId === "string" ? actor.meta.authorId : void 0;
-  if (fromMeta) return fromMeta;
-  if ((authors2 ?? []).some((author) => author.id === actor.id)) return actor.id;
-  return actor.id;
-}
-function deriveWorkspaceAuthorization(args) {
-  const { actor, permissions: permissions2 = null, participants = null, authors: authors2 = null } = args;
-  const authorId = resolveActorAuthorId(actor, authors2);
-  const participant = (participants ?? []).find((row) => row.authorId === authorId) ?? null;
-  const permissionMap = toBuilderPermissionsMap(permissions2);
-  const readWorkspace = canReadWorkspace(permissionMap);
-  const editBranch = canEditBranch(permissionMap);
-  const createBranch = canCreateBranch(permissionMap);
-  const mergeBranches = canMergeBranch(permissionMap);
-  const publishBranches = canPublishBranch(permissionMap);
-  const deleteBranches = canDeleteBranch(permissionMap);
-  const manageBranches = canManageBranches(permissionMap);
-  const writeTemplates = canWriteTemplates(permissionMap);
-  const manageTemplates = canManageTemplates(permissionMap);
-  const commentRead = canReadComments(permissionMap);
-  const commentWrite = canWriteComments(permissionMap);
-  return {
-    authorId,
-    participant,
-    permissions: permissionMap,
-    canReadWorkspace: readWorkspace,
-    canEditBranchContent: editBranch,
-    canCreateBranch: createBranch,
-    canMergeBranches: mergeBranches,
-    canPublishBranches: publishBranches,
-    canDeleteBranches: deleteBranches,
-    canManageBranches: manageBranches,
-    canWriteTemplates: writeTemplates,
-    canManageTemplates: manageTemplates,
-    canCommentRead: readWorkspace && commentRead,
-    canCommentWrite: readWorkspace && commentWrite
-  };
-}
-function getAuthorizationDecision(auth, action) {
-  switch (action) {
-    case "branch-content-edit":
-    case "snapshot-write":
-      return auth.canEditBranchContent ? { ok: true } : { ok: false, reason: "Editing is disabled. You need branches.write." };
-    case "template-write":
-      return auth.canWriteTemplates ? { ok: true } : { ok: false, reason: "Template editing requires templates.write." };
-    case "branch-create":
-      return auth.canCreateBranch ? { ok: true } : { ok: false, reason: "Branch creation requires branches.create." };
-    case "branch-merge":
-      return auth.canMergeBranches ? { ok: true } : { ok: false, reason: "Branch merge requires branches.merge." };
-    case "branch-publish":
-      return auth.canPublishBranches ? { ok: true } : { ok: false, reason: "Branch publish requires branches.publish." };
-    case "branch-delete":
-      return auth.canDeleteBranches ? { ok: true } : { ok: false, reason: "Branch deletion requires branches.delete." };
-    case "branch-manage":
-      return auth.canManageBranches ? { ok: true } : { ok: false, reason: "Branch management requires branches.manage." };
-    case "comment-read":
-      return auth.canCommentRead ? { ok: true } : { ok: false, reason: "Comment read access is disabled for this actor." };
-    case "comment-write":
-      return auth.canCommentWrite ? { ok: true } : { ok: false, reason: "Comment write access is disabled for this actor." };
-    default:
-      return { ok: false, reason: "Action is not authorized." };
-  }
-}
-
 // src/workspace/fallback-quick-add-helpers.ts
 import {
   getAssignedServiceIds as coreGetAssignedServiceIds,
@@ -2543,8 +2544,66 @@ function RenameNodeField({ value, onChange, onEscape }) {
   );
 }
 
+// src/components/ui/scroll-area.tsx
+import "react";
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function ScrollArea({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs6(
+    ScrollAreaPrimitive.Root,
+    {
+      "data-slot": "scroll-area",
+      className: cn("relative", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx9(
+          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__ */ jsx9(ScrollBar, {}),
+        /* @__PURE__ */ jsx9(ScrollAreaPrimitive.Corner, {})
+      ]
+    }
+  );
+}
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(
+    ScrollAreaPrimitive.ScrollAreaScrollbar,
+    {
+      "data-slot": "scroll-area-scrollbar",
+      orientation,
+      className: cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx9(
+        ScrollAreaPrimitive.ScrollAreaThumb,
+        {
+          "data-slot": "scroll-area-thumb",
+          className: "relative flex-1 rounded-full bg-border"
+        }
+      )
+    }
+  );
+}
+
 // src/builder/node-context-menu.tsx
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var NodeContextMenuContext = createContext2(null);
 function NodeContextMenuProvider({ children }) {
   const canvas = useCanvas3();
@@ -2565,6 +2624,8 @@ function NodeContextMenuProvider({ children }) {
   const [templateSaveFieldId, setTemplateSaveFieldId] = useState3(null);
   const [templateSaveMode, setTemplateSaveMode] = useState3("single");
   const [templateLabel, setTemplateLabel] = useState3("");
+  const [templateName, setTemplateName] = useState3("");
+  const [templateSaveToCurrentBranch, setTemplateSaveToCurrentBranch] = useState3(true);
   const [templateGroupSelection, setTemplateGroupSelection] = useState3({});
   const [templateFieldChecks, setTemplateFieldChecks] = useState3({});
   const [edgeTypeSubmenuOpen, setEdgeTypeSubmenuOpen] = useState3(false);
@@ -2859,6 +2920,8 @@ function NodeContextMenuProvider({ children }) {
       setTemplateSaveFieldId(fieldId);
       setTemplateSaveMode("single");
       setTemplateLabel("");
+      setTemplateName("");
+      setTemplateSaveToCurrentBranch(true);
       setTemplateGroupSelection({});
       setTemplateFieldChecks({});
       setTemplateSaveOpen(true);
@@ -2879,6 +2942,7 @@ function NodeContextMenuProvider({ children }) {
     setTemplateGroupSelection((current) => Object.keys(current).length ? current : initialGroupSelection);
     setTemplateFieldChecks((current) => Object.keys(current).length ? current : initialChecks);
     setTemplateLabel((current) => current || `${templateSaveDraft.rootLabel} group`);
+    setTemplateName((current) => current || `${templateSaveDraft.rootLabel} Template`);
   }, [templateSaveDraft, templateSaveFieldId]);
   const handleTemplateSave = useCallback4(async () => {
     if (!templateSaveDraft || !templateSaveFieldId) return;
@@ -2891,6 +2955,7 @@ function NodeContextMenuProvider({ children }) {
       if (!rootEntry) throw new Error("Selected field no longer exists.");
       if (templateSaveMode === "single") {
         const field = pickCheckedProperties(rootEntry.field, templateFieldChecks[templateSaveFieldId] ?? {});
+        const resolvedName = templateName.trim() || `${templateSaveDraft.rootLabel} Template`;
         const definition = {
           templateType: "field",
           mode: "single",
@@ -2898,15 +2963,16 @@ function NodeContextMenuProvider({ children }) {
           field
         };
         const result = await ws.createTemplate({
-          name: `${templateSaveDraft.rootLabel} Template`,
-          key: makeTemplateKey(templateSaveDraft.rootLabel ?? "field"),
+          name: resolvedName,
+          key: makeTemplateKey(resolvedName || templateSaveDraft.rootLabel || "field"),
           kind: templateSaveDraft.rootType,
-          branchId: ws.branches.currentId ?? void 0,
+          branchId: templateSaveToCurrentBranch ? ws.branches.currentId ?? void 0 : null,
           definition,
           defaults: canvas.selector.getNode(templateSaveFieldId)?.raw?.defaults,
           published: false
         });
-        if (!result.ok) throw new Error(("error" in result ? result.error.message : "Failed to create template") ?? "Failed to create template");
+        if (!result.ok)
+          throw new Error(("error" in result ? result.error.message : "Failed to create template") ?? "Failed to create template");
       } else {
         const selected = new Set(
           Object.entries(templateGroupSelection).filter(([, included]) => included).map(([fieldId]) => fieldId)
@@ -2927,16 +2993,18 @@ function NodeContextMenuProvider({ children }) {
           fields,
           relations: filteredRelations
         };
+        const resolvedName = templateName.trim() || definition.label;
         const result = await ws.createTemplate({
-          name: definition.label,
-          key: makeTemplateKey(definition.label || "field-group"),
+          name: resolvedName,
+          key: makeTemplateKey(resolvedName || "field-group"),
           kind: templateSaveDraft.rootType,
-          branchId: ws.branches.currentId ?? void 0,
+          branchId: templateSaveToCurrentBranch ? ws.branches.currentId ?? void 0 : null,
           definition,
           defaults: canvas.selector.getNode(templateSaveFieldId)?.raw?.defaults,
           published: false
         });
-        if (!result.ok) throw new Error(("error" in result ? result.error.message : "Failed to create template") ?? "Failed to create template");
+        if (!result.ok)
+          throw new Error(("error" in result ? result.error.message : "Failed to create template") ?? "Failed to create template");
       }
       await ws.refresh.templates({ branchId: ws.branches.currentId ?? void 0 });
       setTemplateSaveOpen(false);
@@ -2954,6 +3022,8 @@ function NodeContextMenuProvider({ children }) {
     templateFieldChecks,
     templateGroupSelection,
     templateLabel,
+    templateName,
+    templateSaveToCurrentBranch,
     templateSaveDraft,
     templateSaveFieldId,
     templateSaveMode,
@@ -3027,11 +3097,11 @@ function NodeContextMenuProvider({ children }) {
     ]
   );
   const hasPortalContent = Boolean(target || edgeTarget || dropIntent || renameOpen || deleteOpen || noticeManagerOpen || templateSaveOpen);
-  return /* @__PURE__ */ jsxs6(NodeContextMenuContext.Provider, { value, children: [
+  return /* @__PURE__ */ jsxs7(NodeContextMenuContext.Provider, { value, children: [
     children,
     typeof document !== "undefined" && hasPortalContent ? createPortal2(
-      /* @__PURE__ */ jsxs6(Fragment3, { children: [
-        target && anchorStyle ? /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsxs7(Fragment3, { children: [
+        target && anchorStyle ? /* @__PURE__ */ jsx10(
           ContextMenu,
           {
             target,
@@ -3046,7 +3116,7 @@ function NodeContextMenuProvider({ children }) {
             setRenameValue
           }
         ) : null,
-        edgeTarget && edgeAnchorStyle ? /* @__PURE__ */ jsxs6(
+        edgeTarget && edgeAnchorStyle ? /* @__PURE__ */ jsxs7(
           "div",
           {
             ref: menuRef,
@@ -3054,7 +3124,7 @@ function NodeContextMenuProvider({ children }) {
             style: { left: edgeAnchorStyle.left, top: edgeAnchorStyle.top },
             role: "menu",
             children: [
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10(
                 "button",
                 {
                   type: "button",
@@ -3063,53 +3133,46 @@ function NodeContextMenuProvider({ children }) {
                   children: "Disconnect"
                 }
               ),
-              /* @__PURE__ */ jsxs6(
-                "div",
-                {
-                  className: "relative",
-                  onMouseLeave: () => setEdgeTypeSubmenuOpen(false),
-                  children: [
-                    /* @__PURE__ */ jsxs6(
+              /* @__PURE__ */ jsxs7("div", { className: "relative", onMouseLeave: () => setEdgeTypeSubmenuOpen(false), children: [
+                /* @__PURE__ */ jsxs7(
+                  "button",
+                  {
+                    type: "button",
+                    className: "flex w-full items-center justify-between rounded-lg px-3 py-2 text-left text-sm text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-900",
+                    onMouseEnter: () => setEdgeTypeSubmenuOpen(true),
+                    onFocus: () => setEdgeTypeSubmenuOpen(true),
+                    onClick: () => setEdgeTypeSubmenuOpen((current) => !current),
+                    "aria-haspopup": "menu",
+                    "aria-expanded": edgeTypeSubmenuOpen,
+                    children: [
+                      /* @__PURE__ */ jsx10("span", { children: "Change type" }),
+                      /* @__PURE__ */ jsx10("span", { className: "text-slate-400", children: "\u25B8" })
+                    ]
+                  }
+                ),
+                edgeTypeSubmenuOpen ? /* @__PURE__ */ jsx10(
+                  "div",
+                  {
+                    className: "absolute top-0 left-full z-50 ml-1 min-w-40 rounded-xl border border-slate-200 bg-white p-1.5 shadow-2xl dark:border-slate-700 dark:bg-slate-950",
+                    role: "menu",
+                    children: ["bind", "include", "exclude"].map((kind) => /* @__PURE__ */ jsx10(
                       "button",
                       {
                         type: "button",
-                        className: "flex w-full items-center justify-between rounded-lg px-3 py-2 text-left text-sm text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-900",
-                        onMouseEnter: () => setEdgeTypeSubmenuOpen(true),
-                        onFocus: () => setEdgeTypeSubmenuOpen(true),
-                        onClick: () => setEdgeTypeSubmenuOpen((current) => !current),
-                        "aria-haspopup": "menu",
-                        "aria-expanded": edgeTypeSubmenuOpen,
-                        children: [
-                          /* @__PURE__ */ jsx9("span", { children: "Change type" }),
-                          /* @__PURE__ */ jsx9("span", { className: "text-slate-400", children: "\u25B8" })
-                        ]
-                      }
-                    ),
-                    edgeTypeSubmenuOpen ? /* @__PURE__ */ jsx9(
-                      "div",
-                      {
-                        className: "absolute top-0 left-full z-50 ml-1 min-w-40 rounded-xl border border-slate-200 bg-white p-1.5 shadow-2xl dark:border-slate-700 dark:bg-slate-950",
-                        role: "menu",
-                        children: ["bind", "include", "exclude"].map((kind) => /* @__PURE__ */ jsx9(
-                          "button",
-                          {
-                            type: "button",
-                            className: "w-full rounded-lg px-3 py-2 text-left text-sm text-slate-700 hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-50 dark:text-slate-200 dark:hover:bg-slate-900",
-                            onClick: () => handleEdgeTypeChange(kind),
-                            disabled: edgeTarget.kind === kind,
-                            children: kind
-                          },
-                          kind
-                        ))
-                      }
-                    ) : null
-                  ]
-                }
-              )
+                        className: "w-full rounded-lg px-3 py-2 text-left text-sm text-slate-700 hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-50 dark:text-slate-200 dark:hover:bg-slate-900",
+                        onClick: () => handleEdgeTypeChange(kind),
+                        disabled: edgeTarget.kind === kind,
+                        children: kind
+                      },
+                      kind
+                    ))
+                  }
+                ) : null
+              ] })
             ]
           }
         ) : null,
-        dropIntent && dialAnchorStyle ? /* @__PURE__ */ jsx9(
+        dropIntent && dialAnchorStyle ? /* @__PURE__ */ jsx10(
           Dial,
           {
             dialActions,
@@ -3120,7 +3183,7 @@ function NodeContextMenuProvider({ children }) {
             setDropIntent
           }
         ) : null,
-        noticeManagerOpen ? /* @__PURE__ */ jsx9(
+        noticeManagerOpen ? /* @__PURE__ */ jsx10(
           NoticeManager,
           {
             noticeManagerOpen,
@@ -3141,7 +3204,7 @@ function NodeContextMenuProvider({ children }) {
             handleNoticeSave
           }
         ) : null,
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(
           AlertDialog,
           {
             open: renameOpen,
@@ -3149,12 +3212,12 @@ function NodeContextMenuProvider({ children }) {
               setRenameOpen(open);
               if (!open) setDialogTarget(null);
             },
-            children: /* @__PURE__ */ jsxs6(AlertDialogContent, { children: [
-              /* @__PURE__ */ jsxs6(AlertDialogHeader, { children: [
-                /* @__PURE__ */ jsx9(AlertDialogTitle, { children: "Rename node" }),
-                /* @__PURE__ */ jsx9(AlertDialogDescription, { children: "Update the node label across canvas, layers, and wireframe." })
+            children: /* @__PURE__ */ jsxs7(AlertDialogContent, { children: [
+              /* @__PURE__ */ jsxs7(AlertDialogHeader, { children: [
+                /* @__PURE__ */ jsx10(AlertDialogTitle, { children: "Rename node" }),
+                /* @__PURE__ */ jsx10(AlertDialogDescription, { children: "Update the node label across canvas, layers, and wireframe." })
               ] }),
-              /* @__PURE__ */ jsxs6(
+              /* @__PURE__ */ jsxs7(
                 "form",
                 {
                   onSubmit: (event) => {
@@ -3163,17 +3226,10 @@ function NodeContextMenuProvider({ children }) {
                   },
                   className: "space-y-4",
                   children: [
-                    /* @__PURE__ */ jsx9(
-                      RenameNodeField,
-                      {
-                        value: renameValue,
-                        onChange: setRenameValue,
-                        onEscape: () => setRenameOpen(false)
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs6(AlertDialogFooter, { children: [
-                      /* @__PURE__ */ jsx9(AlertDialogCancel, { type: "button", children: "Cancel" }),
-                      /* @__PURE__ */ jsx9(AlertDialogAction, { type: "submit", children: "Save" })
+                    /* @__PURE__ */ jsx10(RenameNodeField, { value: renameValue, onChange: setRenameValue, onEscape: () => setRenameOpen(false) }),
+                    /* @__PURE__ */ jsxs7(AlertDialogFooter, { children: [
+                      /* @__PURE__ */ jsx10(AlertDialogCancel, { type: "button", children: "Cancel" }),
+                      /* @__PURE__ */ jsx10(AlertDialogAction, { type: "submit", children: "Save" })
                     ] })
                   ]
                 }
@@ -3181,7 +3237,7 @@ function NodeContextMenuProvider({ children }) {
             ] })
           }
         ),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(
           AlertDialog,
           {
             open: deleteOpen,
@@ -3189,19 +3245,19 @@ function NodeContextMenuProvider({ children }) {
               setDeleteOpen(open);
               if (!open) setDialogTarget(null);
             },
-            children: /* @__PURE__ */ jsxs6(AlertDialogContent, { children: [
-              /* @__PURE__ */ jsxs6(AlertDialogHeader, { children: [
-                /* @__PURE__ */ jsx9(AlertDialogTitle, { children: "Delete node" }),
-                /* @__PURE__ */ jsx9(AlertDialogDescription, { children: "This action removes the selected node from the builder graph." })
+            children: /* @__PURE__ */ jsxs7(AlertDialogContent, { children: [
+              /* @__PURE__ */ jsxs7(AlertDialogHeader, { children: [
+                /* @__PURE__ */ jsx10(AlertDialogTitle, { children: "Delete node" }),
+                /* @__PURE__ */ jsx10(AlertDialogDescription, { children: "This action removes the selected node from the builder graph." })
               ] }),
-              /* @__PURE__ */ jsxs6(AlertDialogFooter, { children: [
-                /* @__PURE__ */ jsx9(AlertDialogCancel, { type: "button", children: "Cancel" }),
-                /* @__PURE__ */ jsx9(AlertDialogAction, { type: "button", className: "bg-rose-600 hover:bg-rose-700", onClick: handleDelete, children: "Delete" })
+              /* @__PURE__ */ jsxs7(AlertDialogFooter, { children: [
+                /* @__PURE__ */ jsx10(AlertDialogCancel, { type: "button", children: "Cancel" }),
+                /* @__PURE__ */ jsx10(AlertDialogAction, { type: "button", className: "bg-rose-600 hover:bg-rose-700", onClick: handleDelete, children: "Delete" })
               ] })
             ] })
           }
         ),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(
           AlertDialog,
           {
             open: templateSaveOpen,
@@ -3209,46 +3265,38 @@ function NodeContextMenuProvider({ children }) {
               setTemplateSaveOpen(open);
               if (!open) setTemplateSaveFieldId(null);
             },
-            children: /* @__PURE__ */ jsxs6(AlertDialogContent, { children: [
-              /* @__PURE__ */ jsxs6(AlertDialogHeader, { children: [
-                /* @__PURE__ */ jsx9(AlertDialogTitle, { children: "Save Field Template" }),
-                /* @__PURE__ */ jsx9(AlertDialogDescription, { children: "Choose how to save this field and review copied properties." })
+            children: /* @__PURE__ */ jsxs7(AlertDialogContent, { children: [
+              /* @__PURE__ */ jsxs7(AlertDialogHeader, { children: [
+                /* @__PURE__ */ jsx10(AlertDialogTitle, { children: "Save Field Template" }),
+                /* @__PURE__ */ jsx10(AlertDialogDescription, { children: "Choose how to save this field and review copied properties." })
               ] }),
-              templateSaveDraft ? /* @__PURE__ */ jsxs6("div", { className: "space-y-4", children: [
-                /* @__PURE__ */ jsxs6("div", { className: "flex gap-2", children: [
-                  /* @__PURE__ */ jsx9(
-                    "button",
-                    {
-                      type: "button",
-                      className: `rounded-lg border px-3 py-1 text-sm ${templateSaveMode === "single" ? "border-blue-500 bg-blue-50" : "border-slate-300"}`,
-                      onClick: () => setTemplateSaveMode("single"),
-                      children: "Single field"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx9(
-                    "button",
-                    {
-                      type: "button",
-                      className: `rounded-lg border px-3 py-1 text-sm ${templateSaveMode === "group" ? "border-blue-500 bg-blue-50" : "border-slate-300"}`,
-                      onClick: () => setTemplateSaveMode("group"),
-                      children: "Field group/tree"
-                    }
-                  )
-                ] }),
-                templateSaveMode === "group" ? /* @__PURE__ */ jsxs6("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsx9("label", { className: "block text-sm font-medium", children: "Template label" }),
-                  /* @__PURE__ */ jsx9(
-                    "input",
+              templateSaveDraft ? /* @__PURE__ */ jsxs7("div", { className: "space-y-4", children: [
+                /* @__PURE__ */ jsx10("div", { className: "flex gap-2", children: /* @__PURE__ */ jsx10(
+                  InputField3,
+                  {
+                    variant: "toggle-group",
+                    options: [
+                      { label: "Single Field", value: "single" },
+                      { label: "Field Group/Tree", value: "group" }
+                    ],
+                    value: templateSaveMode,
+                    onChange: (e) => setTemplateSaveMode(e.value)
+                  }
+                ) }),
+                templateSaveMode === "group" ? /* @__PURE__ */ jsxs7("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsx10("label", { className: "block text-sm font-medium", children: "Template label" }),
+                  /* @__PURE__ */ jsx10(
+                    InputField3,
                     {
+                      variant: "text",
                       value: templateLabel,
-                      onChange: (event) => setTemplateLabel(event.target.value),
-                      className: "w-full rounded-md border border-slate-300 px-3 py-2 text-sm"
+                      onChange: (event) => setTemplateLabel(event.value)
                     }
                   ),
-                  /* @__PURE__ */ jsxs6("div", { className: "space-y-1", children: [
-                    /* @__PURE__ */ jsx9("p", { className: "text-sm font-medium", children: "Fields in group" }),
-                    templateSaveDraft.discoveredFields.map((entry) => /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-2 text-sm", children: [
-                      /* @__PURE__ */ jsx9(
+                  /* @__PURE__ */ jsxs7("div", { className: "space-y-1", children: [
+                    /* @__PURE__ */ jsx10("p", { className: "text-sm font-medium", children: "Fields in group" }),
+                    templateSaveDraft.discoveredFields.map((entry) => /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-2 text-sm", children: [
+                      /* @__PURE__ */ jsx10(
                         "input",
                         {
                           type: "checkbox",
@@ -3259,19 +3307,43 @@ function NodeContextMenuProvider({ children }) {
                           }))
                         }
                       ),
-                      /* @__PURE__ */ jsx9("span", { children: String(entry.field.label ?? entry.originalId) })
+                      /* @__PURE__ */ jsx10("span", { children: String(entry.field.label ?? entry.originalId) })
                     ] }, entry.originalId))
                   ] })
                 ] }) : null,
-                /* @__PURE__ */ jsx9("div", { className: "max-h-72 space-y-2 overflow-auto rounded-lg border border-slate-200 p-2", children: (templateSaveMode === "single" ? templateSaveDraft.discoveredFields.filter((entry) => entry.originalId === templateSaveFieldId) : templateSaveDraft.discoveredFields.filter((entry) => templateGroupSelection[entry.originalId] !== false)).map((entry) => /* @__PURE__ */ jsxs6("details", { open: true, className: "rounded border border-slate-200 p-2", children: [
-                  /* @__PURE__ */ jsxs6("summary", { className: "cursor-pointer text-sm font-medium", children: [
+                /* @__PURE__ */ jsxs7("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsx10("label", { className: "block text-sm font-medium", children: "Template name" }),
+                  /* @__PURE__ */ jsx10(
+                    InputField3,
+                    {
+                      variant: "text",
+                      value: templateName,
+                      onChange: (event) => setTemplateName(String(event.value ?? ""))
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-2 text-sm", children: [
+                    /* @__PURE__ */ jsx10(
+                      "input",
+                      {
+                        type: "checkbox",
+                        checked: templateSaveToCurrentBranch,
+                        onChange: (event) => setTemplateSaveToCurrentBranch(event.target.checked)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx10("span", { children: "Save to current branch" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx10(ScrollArea, { className: "max-h-72 space-y-2 h-full", children: (templateSaveMode === "single" ? templateSaveDraft.discoveredFields.filter((entry) => entry.originalId === templateSaveFieldId) : templateSaveDraft.discoveredFields.filter(
+                  (entry) => templateGroupSelection[entry.originalId] !== false
+                )).map((entry) => /* @__PURE__ */ jsxs7("details", { open: true, className: "rounded border border-slate-200 dark:border-slate-700 p-2", children: [
+                  /* @__PURE__ */ jsxs7("summary", { className: "cursor-pointer text-sm font-medium", children: [
                     String(entry.field.label ?? entry.originalId),
                     " (",
                     entry.originalId,
                     ")"
                   ] }),
-                  /* @__PURE__ */ jsx9("div", { className: "mt-2 grid grid-cols-1 gap-1", children: Object.keys(entry.field).map((key) => /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-2 text-xs", children: [
-                    /* @__PURE__ */ jsx9(
+                  /* @__PURE__ */ jsx10("div", { className: "mt-2 grid grid-cols-1 gap-1", children: Object.keys(entry.field).map((key) => /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-2 text-xs", children: [
+                    /* @__PURE__ */ jsx10(
                       "input",
                       {
                         type: "checkbox",
@@ -3285,12 +3357,12 @@ function NodeContextMenuProvider({ children }) {
                         }))
                       }
                     ),
-                    /* @__PURE__ */ jsx9("span", { className: "font-mono", children: key })
+                    /* @__PURE__ */ jsx10("span", { className: "font-mono", children: key })
                   ] }, key)) })
                 ] }, entry.originalId)) }),
-                /* @__PURE__ */ jsxs6(AlertDialogFooter, { children: [
-                  /* @__PURE__ */ jsx9(AlertDialogCancel, { type: "button", children: "Cancel" }),
-                  /* @__PURE__ */ jsx9(AlertDialogAction, { type: "button", onClick: () => void handleTemplateSave(), children: "Save template" })
+                /* @__PURE__ */ jsxs7(AlertDialogFooter, { children: [
+                  /* @__PURE__ */ jsx10(AlertDialogCancel, { type: "button", children: "Cancel" }),
+                  /* @__PURE__ */ jsx10(AlertDialogAction, { type: "button", disabled: !templateName.trim(), onClick: () => void handleTemplateSave(), children: "Save template" })
                 ] })
               ] }) : null
             ] })
@@ -3310,12 +3382,12 @@ function useNodeContextMenu() {
 // src/components/ui/avatar.tsx
 import "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function Avatar({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     AvatarPrimitive.Root,
     {
       "data-slot": "avatar",
@@ -3331,7 +3403,7 @@ function AvatarImage({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     AvatarPrimitive.Image,
     {
       "data-slot": "avatar-image",
@@ -3344,7 +3416,7 @@ function AvatarFallback({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     AvatarPrimitive.Fallback,
     {
       "data-slot": "avatar-fallback",
@@ -3362,14 +3434,14 @@ import { forwardRef as forwardRef2 } from "react";
 import { FiMoreHorizontal } from "react-icons/fi";
 import { HiOutlineSparkles } from "react-icons/hi2";
 import { LuSearch } from "react-icons/lu";
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 function BuilderIconButton({
   className,
   active,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "button",
     {
       type: "button",
@@ -3386,7 +3458,7 @@ function BuilderIconButton({
   );
 }
 var PanelSearch = forwardRef2(function PanelSearch2({ className, value, onChange, placeholder = "Search", ...inputProps }, ref) {
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "label",
     {
       className: cn(
@@ -3396,8 +3468,8 @@ var PanelSearch = forwardRef2(function PanelSearch2({ className, value, onChange
         className
       ),
       children: [
-        /* @__PURE__ */ jsx11(LuSearch, { className: "text-base" }),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(LuSearch, { className: "text-base" }),
+        /* @__PURE__ */ jsx12(
           "input",
           {
             ref,
@@ -3415,7 +3487,7 @@ var PanelSearch = forwardRef2(function PanelSearch2({ className, value, onChange
 function SelectionBadge({ active, selected, className }) {
   const label = active ? "Active" : selected ? "Selected" : "Idle";
   const tone = active ? "bg-blue-600 text-white" : selected ? "bg-blue-100 text-blue-700 dark:bg-blue-500/15 dark:text-blue-200" : "bg-slate-100 text-slate-500 dark:bg-slate-800 dark:text-slate-400";
-  return /* @__PURE__ */ jsx11("span", { className: cn("rounded-full px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.18em]", tone, className), children: label });
+  return /* @__PURE__ */ jsx12("span", { className: cn("rounded-full px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.18em]", tone, className), children: label });
 }
 function EmptyState({
   title,
@@ -3423,7 +3495,7 @@ function EmptyState({
   action,
   className
 }) {
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       className: cn(
@@ -3432,23 +3504,23 @@ function EmptyState({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx11("div", { className: "mb-3 rounded-full bg-white p-3 text-blue-500 shadow-sm dark:bg-slate-950", children: /* @__PURE__ */ jsx11(HiOutlineSparkles, { className: "text-xl" }) }),
-        /* @__PURE__ */ jsx11("h4", { className: "text-sm font-semibold text-slate-900 dark:text-slate-100", children: title }),
-        /* @__PURE__ */ jsx11("p", { className: "mt-2 max-w-sm text-sm text-slate-500 dark:text-slate-400", children: description }),
-        action ? /* @__PURE__ */ jsx11("div", { className: "mt-4", children: action }) : null
+        /* @__PURE__ */ jsx12("div", { className: "mb-3 rounded-full bg-white p-3 text-blue-500 shadow-sm dark:bg-slate-950", children: /* @__PURE__ */ jsx12(HiOutlineSparkles, { className: "text-xl" }) }),
+        /* @__PURE__ */ jsx12("h4", { className: "text-sm font-semibold text-slate-900 dark:text-slate-100", children: title }),
+        /* @__PURE__ */ jsx12("p", { className: "mt-2 max-w-sm text-sm text-slate-500 dark:text-slate-400", children: description }),
+        action ? /* @__PURE__ */ jsx12("div", { className: "mt-4", children: action }) : null
       ]
     }
   );
 }
 function PropertyList({ items, className }) {
-  return /* @__PURE__ */ jsx11("div", { className: cn("space-y-2", className), children: items.map((item, index) => /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between gap-3 rounded-xl bg-slate-50 px-3 py-2 text-sm dark:bg-slate-900", children: [
-    /* @__PURE__ */ jsx11("span", { className: "text-slate-500 dark:text-slate-400", children: item.label }),
-    /* @__PURE__ */ jsx11("span", { className: "truncate font-medium text-slate-900 dark:text-slate-100", children: item.value })
+  return /* @__PURE__ */ jsx12("div", { className: cn("space-y-2", className), children: items.map((item, index) => /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between gap-3 rounded-xl bg-slate-50 px-3 py-2 text-sm dark:bg-slate-900", children: [
+    /* @__PURE__ */ jsx12("span", { className: "text-slate-500 dark:text-slate-400", children: item.label }),
+    /* @__PURE__ */ jsx12("span", { className: "truncate font-medium text-slate-900 dark:text-slate-100", children: item.value })
   ] }, index)) });
 }
 function StatusDot({ tone = "default", className }) {
   const palette = tone === "success" ? "bg-emerald-500" : tone === "warning" ? "bg-amber-500" : tone === "danger" ? "bg-rose-500" : "bg-slate-400";
-  return /* @__PURE__ */ jsx11("span", { className: cn("inline-flex h-2.5 w-2.5 rounded-full", palette, className) });
+  return /* @__PURE__ */ jsx12("span", { className: cn("inline-flex h-2.5 w-2.5 rounded-full", palette, className) });
 }
 
 // src/builder/service-context.ts
@@ -3896,21 +3968,21 @@ import { FiAlertCircle as FiAlertCircle2 } from "react-icons/fi";
 import "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 function DropdownMenu({
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+  return /* @__PURE__ */ jsx13(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
 }
 function DropdownMenuPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+  return /* @__PURE__ */ jsx13(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
 }
 function DropdownMenuTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     DropdownMenuPrimitive.Trigger,
     {
       "data-slot": "dropdown-menu-trigger",
@@ -3923,7 +3995,7 @@ function DropdownMenuContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx13(
     DropdownMenuPrimitive.Content,
     {
       "data-slot": "dropdown-menu-content",
@@ -3939,7 +4011,7 @@ function DropdownMenuContent({
 function DropdownMenuGroup({
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
+  return /* @__PURE__ */ jsx13(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
 }
 function DropdownMenuItem({
   className,
@@ -3947,7 +4019,7 @@ function DropdownMenuItem({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     DropdownMenuPrimitive.Item,
     {
       "data-slot": "dropdown-menu-item",
@@ -3967,7 +4039,7 @@ function DropdownMenuCheckboxItem({
   checked,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     DropdownMenuPrimitive.CheckboxItem,
     {
       "data-slot": "dropdown-menu-checkbox-item",
@@ -3978,7 +4050,7 @@ function DropdownMenuCheckboxItem({
       checked,
       ...props,
       children: [
-        /* @__PURE__ */ jsx12("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx12(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx12(CheckIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx13("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx13(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx13(CheckIcon, { className: "size-4" }) }) }),
         children
       ]
     }
@@ -3987,7 +4059,7 @@ function DropdownMenuCheckboxItem({
 function DropdownMenuRadioGroup({
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     DropdownMenuPrimitive.RadioGroup,
     {
       "data-slot": "dropdown-menu-radio-group",
@@ -4000,7 +4072,7 @@ function DropdownMenuRadioItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     DropdownMenuPrimitive.RadioItem,
     {
       "data-slot": "dropdown-menu-radio-item",
@@ -4010,7 +4082,7 @@ function DropdownMenuRadioItem({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx12("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx12(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx12(CircleIcon, { className: "size-2 fill-current" }) }) }),
+        /* @__PURE__ */ jsx13("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx13(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx13(CircleIcon, { className: "size-2 fill-current" }) }) }),
         children
       ]
     }
@@ -4021,7 +4093,7 @@ function DropdownMenuLabel({
   inset,
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     DropdownMenuPrimitive.Label,
     {
       "data-slot": "dropdown-menu-label",
@@ -4038,7 +4110,7 @@ function DropdownMenuSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     DropdownMenuPrimitive.Separator,
     {
       "data-slot": "dropdown-menu-separator",
@@ -4050,7 +4122,7 @@ function DropdownMenuSeparator({
 function DropdownMenuSub({
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+  return /* @__PURE__ */ jsx13(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
 }
 function DropdownMenuSubTrigger({
   className,
@@ -4058,7 +4130,7 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     DropdownMenuPrimitive.SubTrigger,
     {
       "data-slot": "dropdown-menu-sub-trigger",
@@ -4070,7 +4142,7 @@ function DropdownMenuSubTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx12(ChevronRightIcon, { className: "ml-auto size-4" })
+        /* @__PURE__ */ jsx13(ChevronRightIcon, { className: "ml-auto size-4" })
       ]
     }
   );
@@ -4079,7 +4151,7 @@ function DropdownMenuSubContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     DropdownMenuPrimitive.SubContent,
     {
       "data-slot": "dropdown-menu-sub-content",
@@ -4108,7 +4180,7 @@ function toolbarIconButtonClass(active = false, className) {
 }
 
 // src/panels/canvas/app-toolbar.tsx
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 function AppToolbar({
   bootActionReason,
   editDisabledReason,
@@ -4138,9 +4210,9 @@ function AppToolbar({
   setShowErrorBadges,
   pendingAction
 }) {
-  return /* @__PURE__ */ jsxs9("div", { className: "pointer-events-none absolute top-4 right-4 z-20 flex items-center gap-2", children: [
-    /* @__PURE__ */ jsxs9("div", { className: toolbarSplitSurfaceClass(), children: [
-      /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs10("div", { className: "pointer-events-none absolute top-4 right-4 z-20 flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxs10("div", { className: toolbarSplitSurfaceClass(), children: [
+      /* @__PURE__ */ jsx14(
         Button,
         {
           size: "icon",
@@ -4150,11 +4222,11 @@ function AppToolbar({
           onClick: onSave,
           disabled: pendingAction === "save" || !canSave,
           title: (bootActionReason && !canSave ? bootActionReason : void 0) ?? (!canSave ? editDisabledReason : void 0) ?? "Save snapshot",
-          children: /* @__PURE__ */ jsx13(FiSave, {})
+          children: /* @__PURE__ */ jsx14(FiSave, {})
         }
       ),
-      /* @__PURE__ */ jsx13("div", { className: "h-5 w-px bg-slate-200 dark:bg-slate-800" }),
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx14("div", { className: "h-5 w-px bg-slate-200 dark:bg-slate-800" }),
+      /* @__PURE__ */ jsx14(
         Button,
         {
           size: "icon",
@@ -4164,22 +4236,22 @@ function AppToolbar({
           onClick: onPublish,
           disabled: pendingAction === "publish" || !canPublish,
           title: (bootActionReason && !canPublish ? bootActionReason : void 0) ?? (!canPublish ? publishDisabledReason : void 0) ?? "Publish commit",
-          children: /* @__PURE__ */ jsx13(LuGitCommitHorizontal, {})
+          children: /* @__PURE__ */ jsx14(LuGitCommitHorizontal, {})
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs9("div", { className: toolbarSurfaceClass(), children: [
-      /* @__PURE__ */ jsxs9(DropdownMenu, { children: [
-        /* @__PURE__ */ jsx13(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx13(Button, { size: "icon", variant: "ghost", className: toolbarIconButtonClass(), title: "Import JSON", "aria-label": "Import JSON", children: /* @__PURE__ */ jsx13(LuImport, {}) }) }),
-        /* @__PURE__ */ jsxs9(DropdownMenuContent, { align: "end", className: "w-44", children: [
-          /* @__PURE__ */ jsx13(DropdownMenuItem, { onClick: onImportProps, disabled: !canImport, title: !canImport ? editDisabledReason : void 0, children: "Import props" }),
-          /* @__PURE__ */ jsx13(DropdownMenuItem, { onClick: onImportCatalog, disabled: !canImport, title: !canImport ? editDisabledReason : void 0, children: "Import catalog" })
+    /* @__PURE__ */ jsxs10("div", { className: toolbarSurfaceClass(), children: [
+      /* @__PURE__ */ jsxs10(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx14(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx14(Button, { size: "icon", variant: "ghost", className: toolbarIconButtonClass(), title: "Import JSON", "aria-label": "Import JSON", children: /* @__PURE__ */ jsx14(LuImport, {}) }) }),
+        /* @__PURE__ */ jsxs10(DropdownMenuContent, { align: "end", className: "w-44", children: [
+          /* @__PURE__ */ jsx14(DropdownMenuItem, { onClick: onImportProps, disabled: !canImport, title: !canImport ? editDisabledReason : void 0, children: "Import props" }),
+          /* @__PURE__ */ jsx14(DropdownMenuItem, { onClick: onImportCatalog, disabled: !canImport, title: !canImport ? editDisabledReason : void 0, children: "Import catalog" })
         ] })
       ] }),
-      /* @__PURE__ */ jsx13(Button, { size: "icon", variant: "ghost", className: toolbarIconButtonClass(), title: "Undo", onClick: onUndo, disabled: !canUndo, children: /* @__PURE__ */ jsx13(LuUndo2, {}) }),
-      /* @__PURE__ */ jsx13(Button, { size: "icon", variant: "ghost", className: toolbarIconButtonClass(), title: "Redo", onClick: onRedo, disabled: !canRedo, children: /* @__PURE__ */ jsx13(LuRedo2, {}) }),
-      /* @__PURE__ */ jsx13(Button, { size: "icon", variant: "ghost", className: toolbarIconButtonClass(), title: "Relayout (coming soon)", onClick: onRelayout, children: /* @__PURE__ */ jsx13(LuHistory, {}) }),
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx14(Button, { size: "icon", variant: "ghost", className: toolbarIconButtonClass(), title: "Undo", onClick: onUndo, disabled: !canUndo, children: /* @__PURE__ */ jsx14(LuUndo2, {}) }),
+      /* @__PURE__ */ jsx14(Button, { size: "icon", variant: "ghost", className: toolbarIconButtonClass(), title: "Redo", onClick: onRedo, disabled: !canRedo, children: /* @__PURE__ */ jsx14(LuRedo2, {}) }),
+      /* @__PURE__ */ jsx14(Button, { size: "icon", variant: "ghost", className: toolbarIconButtonClass(), title: "Relayout (coming soon)", onClick: onRelayout, children: /* @__PURE__ */ jsx14(LuHistory, {}) }),
+      /* @__PURE__ */ jsx14(
         Button,
         {
           size: "icon",
@@ -4188,10 +4260,10 @@ function AppToolbar({
           className: toolbarIconButtonClass(commentPlacementActive),
           title: !canPlaceComment ? commentDisabledReason : commentPlacementActive ? "Cancel add comment" : "Add comment on canvas",
           onClick: onToggleCommentPlacement,
-          children: /* @__PURE__ */ jsx13(FiMessageSquare, {})
+          children: /* @__PURE__ */ jsx14(FiMessageSquare, {})
         }
       ),
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx14(
         Button,
         {
           size: "icon",
@@ -4199,10 +4271,10 @@ function AppToolbar({
           className: toolbarIconButtonClass(showErrorBadges),
           title: "Toggle error markers",
           onClick: () => setShowErrorBadges(!showErrorBadges),
-          children: showErrorBadges ? /* @__PURE__ */ jsx13(FiEye, {}) : /* @__PURE__ */ jsx13(FiEyeOff, {})
+          children: showErrorBadges ? /* @__PURE__ */ jsx14(FiEye, {}) : /* @__PURE__ */ jsx14(FiEyeOff, {})
         }
       ),
-      /* @__PURE__ */ jsxs9(
+      /* @__PURE__ */ jsxs10(
         Button,
         {
           size: "icon",
@@ -4211,12 +4283,12 @@ function AppToolbar({
           title: "Toggle console",
           onClick: onConsoleToggle,
           children: [
-            /* @__PURE__ */ jsx13(FiTerminal, {}),
-            errors.merged.counts.total > 0 ? /* @__PURE__ */ jsx13("span", { className: "absolute top-1.5 right-1.5 inline-flex h-2.5 w-2.5 rounded-full bg-rose-500" }) : null
+            /* @__PURE__ */ jsx14(FiTerminal, {}),
+            errors.merged.counts.total > 0 ? /* @__PURE__ */ jsx14("span", { className: "absolute top-1.5 right-1.5 inline-flex h-2.5 w-2.5 rounded-full bg-rose-500" }) : null
           ]
         }
       ),
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx14(
         Button,
         {
           size: "icon",
@@ -4224,7 +4296,7 @@ function AppToolbar({
           className: toolbarIconButtonClass(noticesOpen),
           title: "Toggle notices manager",
           onClick: onNoticesToggle,
-          children: /* @__PURE__ */ jsx13(FiAlertCircle, {})
+          children: /* @__PURE__ */ jsx14(FiAlertCircle, {})
         }
       )
     ] })
@@ -4982,7 +5054,7 @@ import { BsChatSquareQuote as BsChatSquareQuote2 } from "react-icons/bs";
 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 Fragment4, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 var SELECTED_NODE_RING_CLASS = "ring-2 ring-sky-300 shadow-lg shadow-sky-300/20 dark:ring-sky-400";
 var ACTIVE_NODE_OUTLINE_CLASS = "outline-2 outline-solid outline-emerald-500 dark:outline-emerald-400";
 var HIGHLIGHT_NODE_OUTLINE_CLASS = "outline-2 outline-solid outline-amber-300 dark:outline-amber-200";
@@ -5005,7 +5077,7 @@ function NodeShell({
   focusDimLevel
 }) {
   const dimClass = focusDimLevel === "soft" ? "opacity-80 " : focusDimLevel === "medium" ? "opacity-[0.55] " : focusDimLevel === "strong" ? "opacity-35 " : "";
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       "data-node-state": [
@@ -5024,25 +5096,25 @@ function NodeShell({
       },
       onDrop,
       children: [
-        /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx14("span", { className: "text-slate-400 group-hover:text-blue-500", children: icon }),
-          /* @__PURE__ */ jsx14("span", { className: "max-w-52 truncate text-sm font-medium text-slate-800 dark:text-slate-100", children: label })
+        /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx15("span", { className: "text-slate-400 group-hover:text-blue-500", children: icon }),
+          /* @__PURE__ */ jsx15("span", { className: "max-w-52 truncate text-sm font-medium text-slate-800 dark:text-slate-100", children: label })
         ] }),
-        showCurrentTagDot ? /* @__PURE__ */ jsx14("span", { className: "absolute top-2 left-2 h-2.5 w-2.5 rounded-full bg-emerald-500 shadow-[0_0_0_2px_rgba(255,255,255,0.85)] dark:shadow-[0_0_0_2px_rgba(15,23,42,0.8)]" }) : null,
-        showErrorBadge && hasError ? /* @__PURE__ */ jsx14("span", { className: "absolute -top-1.5 -right-1.5 inline-flex h-3 w-3 rounded-full bg-rose-500" }) : null
+        showCurrentTagDot ? /* @__PURE__ */ jsx15("span", { className: "absolute top-2 left-2 h-2.5 w-2.5 rounded-full bg-emerald-500 shadow-[0_0_0_2px_rgba(255,255,255,0.85)] dark:shadow-[0_0_0_2px_rgba(15,23,42,0.8)]" }) : null,
+        showErrorBadge && hasError ? /* @__PURE__ */ jsx15("span", { className: "absolute -top-1.5 -right-1.5 inline-flex h-3 w-3 rounded-full bg-rose-500" }) : null
       ]
     }
   );
 }
 function TagNode(props) {
   const id = props.data.node?.id ?? props.id;
-  return /* @__PURE__ */ jsxs10(Fragment4, { children: [
-    /* @__PURE__ */ jsx14(Handle, { type: "target", position: Position.Left, className: "!h-2 !w-2 !bg-slate-400" }),
-    /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs11(Fragment4, { children: [
+    /* @__PURE__ */ jsx15(Handle, { type: "target", position: Position.Left, className: "!h-2 !w-2 !bg-slate-400" }),
+    /* @__PURE__ */ jsx15(
       NodeShell,
       {
         label: props.data.node?.label ?? props.id,
-        icon: /* @__PURE__ */ jsx14(LuTags2, {}),
+        icon: /* @__PURE__ */ jsx15(LuTags2, {}),
         selected: props.selected,
         hasError: props.data.hasError,
         showErrorBadge: props.data.showErrorBadge,
@@ -5063,18 +5135,18 @@ function TagNode(props) {
         focusDimLevel: props.data.focusDimLevel
       }
     ),
-    /* @__PURE__ */ jsx14(Handle, { type: "source", position: Position.Right, className: "!h-2 !w-2 !bg-slate-400" })
+    /* @__PURE__ */ jsx15(Handle, { type: "source", position: Position.Right, className: "!h-2 !w-2 !bg-slate-400" })
   ] });
 }
 function FieldNode(props) {
   const id = props.data.node?.id ?? props.id;
-  return /* @__PURE__ */ jsxs10(Fragment4, { children: [
-    /* @__PURE__ */ jsx14(Handle, { type: "target", position: Position.Left, className: "!h-2 !w-2 !bg-slate-400" }),
-    /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs11(Fragment4, { children: [
+    /* @__PURE__ */ jsx15(Handle, { type: "target", position: Position.Left, className: "!h-2 !w-2 !bg-slate-400" }),
+    /* @__PURE__ */ jsx15(
       NodeShell,
       {
         label: props.data.node?.label ?? props.id,
-        icon: /* @__PURE__ */ jsx14(RxInput2, {}),
+        icon: /* @__PURE__ */ jsx15(RxInput2, {}),
         selected: props.selected,
         hasError: props.data.hasError,
         showErrorBadge: props.data.showErrorBadge,
@@ -5095,14 +5167,14 @@ function FieldNode(props) {
         focusDimLevel: props.data.focusDimLevel
       }
     ),
-    /* @__PURE__ */ jsx14(Handle, { type: "source", position: Position.Right, className: "!h-2 !w-2 !bg-slate-400" })
+    /* @__PURE__ */ jsx15(Handle, { type: "source", position: Position.Right, className: "!h-2 !w-2 !bg-slate-400" })
   ] });
 }
 function OptionNode(props) {
   const id = props.data.node?.id ?? props.id;
-  return /* @__PURE__ */ jsxs10(Fragment4, { children: [
-    /* @__PURE__ */ jsx14(Handle, { type: "target", position: Position.Left, className: "!h-2 !w-2 !bg-slate-400" }),
-    /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(Fragment4, { children: [
+    /* @__PURE__ */ jsx15(Handle, { type: "target", position: Position.Left, className: "!h-2 !w-2 !bg-slate-400" }),
+    /* @__PURE__ */ jsxs11(
       "div",
       {
         "data-node-state": [
@@ -5125,32 +5197,32 @@ function OptionNode(props) {
           props.data.onNodeDrop?.({ nodeId: id, clientX: event.clientX, clientY: event.clientY, dataTransfer: event.dataTransfer });
         },
         children: [
-          /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx14(MdOutlineRadioButtonChecked2, { className: "text-slate-400" }),
-            /* @__PURE__ */ jsx14("span", { className: "max-w-36 truncate", children: props.data.node?.label ?? props.id })
+          /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx15(MdOutlineRadioButtonChecked2, { className: "text-slate-400" }),
+            /* @__PURE__ */ jsx15("span", { className: "max-w-36 truncate", children: props.data.node?.label ?? props.id })
           ] }),
-          props.data.showCurrentTagDot ? /* @__PURE__ */ jsx14("span", { className: "absolute top-1 left-1 h-2 w-2 rounded-full bg-emerald-500 shadow-[0_0_0_2px_rgba(255,255,255,0.85)] dark:shadow-[0_0_0_2px_rgba(15,23,42,0.8)]" }) : null,
-          props.data.showErrorBadge && props.data.hasError ? /* @__PURE__ */ jsx14("span", { className: "absolute -top-1 -right-1 inline-flex h-3 w-3 rounded-full bg-rose-500" }) : null
+          props.data.showCurrentTagDot ? /* @__PURE__ */ jsx15("span", { className: "absolute top-1 left-1 h-2 w-2 rounded-full bg-emerald-500 shadow-[0_0_0_2px_rgba(255,255,255,0.85)] dark:shadow-[0_0_0_2px_rgba(15,23,42,0.8)]" }) : null,
+          props.data.showErrorBadge && props.data.hasError ? /* @__PURE__ */ jsx15("span", { className: "absolute -top-1 -right-1 inline-flex h-3 w-3 rounded-full bg-rose-500" }) : null
         ]
       }
     ),
-    /* @__PURE__ */ jsx14(Handle, { type: "source", position: Position.Right, className: "!h-2 !w-2 !bg-slate-400" })
+    /* @__PURE__ */ jsx15(Handle, { type: "source", position: Position.Right, className: "!h-2 !w-2 !bg-slate-400" })
   ] });
 }
 function CommentNode(props) {
   const thread = props.data.thread;
   const main = thread?.messages?.find((message) => message.isMain) ?? thread?.messages?.[0];
-  return /* @__PURE__ */ jsxs10(
+  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 ? `${SELECTED_NODE_RING_CLASS} ` : ""),
       children: [
-        /* @__PURE__ */ jsxs10("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__ */ jsx14(BsChatSquareQuote2, {}),
-          /* @__PURE__ */ jsx14("span", { children: main?.authorName ?? "Comment" })
+        /* @__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__ */ jsx14("div", { className: "px-3 py-2 text-sm leading-5 text-slate-700 dark:text-slate-200", children: main?.body ?? "" }),
-        /* @__PURE__ */ jsx14("div", { className: "absolute bottom-2 right-2 text-[10px] uppercase tracking-[0.14em] text-slate-400", children: thread?.resolved ? "Resolved" : "Open" })
+        /* @__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" })
       ]
     }
   );
@@ -5158,27 +5230,27 @@ function CommentNode(props) {
 function ServiceContextSystemNode(props) {
   const context = props.data.serviceContext;
   const services2 = context?.services ?? [];
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       className: "min-w-80 max-w-96 rounded-xl border border-slate-200 bg-white/95 p-3 shadow-xl backdrop-blur-sm dark:border-slate-800 dark:bg-slate-950/95 " + (props.selected ? `${SELECTED_NODE_RING_CLASS} ` : ""),
       children: [
-        /* @__PURE__ */ jsx14("div", { className: "text-base font-semibold text-slate-900 dark:text-slate-100", children: "Service context" }),
-        /* @__PURE__ */ jsxs10("div", { className: "mt-2 text-sm text-slate-500 dark:text-slate-400", children: [
+        /* @__PURE__ */ jsx15("div", { className: "text-base font-semibold text-slate-900 dark:text-slate-100", children: "Service context" }),
+        /* @__PURE__ */ jsxs11("div", { className: "mt-2 text-sm text-slate-500 dark:text-slate-400", children: [
           "Active tag: ",
           context?.selectedTagLabel ?? "No tag selected"
         ] }),
-        /* @__PURE__ */ jsxs10("div", { className: "text-sm text-slate-500 dark:text-slate-400", children: [
+        /* @__PURE__ */ jsxs11("div", { className: "text-sm text-slate-500 dark:text-slate-400", children: [
           "Selected buttons: ",
           context?.selectedButtonsCount ?? 0
         ] }),
-        /* @__PURE__ */ jsx14("div", { className: "mt-3 space-y-2", children: services2.length === 0 ? /* @__PURE__ */ jsx14("div", { className: "rounded-lg bg-slate-50 px-2 py-2 text-sm text-slate-500 dark:bg-slate-900 dark:text-slate-400", children: "No active services in current context" }) : services2.slice(0, 4).map((service) => /* @__PURE__ */ jsxs10("div", { className: "rounded-lg bg-slate-50 px-2 py-2 dark:bg-slate-900", children: [
-          /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between gap-2", children: [
-            /* @__PURE__ */ jsx14("span", { className: "truncate text-sm font-medium text-slate-800 dark:text-slate-100", children: service.name }),
-            /* @__PURE__ */ jsx14("span", { className: "text-xs text-slate-500 dark:text-slate-400", children: service.rateLabel })
+        /* @__PURE__ */ jsx15("div", { className: "mt-3 space-y-2", children: services2.length === 0 ? /* @__PURE__ */ jsx15("div", { className: "rounded-lg bg-slate-50 px-2 py-2 text-sm text-slate-500 dark:bg-slate-900 dark:text-slate-400", children: "No active services in current context" }) : services2.slice(0, 4).map((service) => /* @__PURE__ */ jsxs11("div", { className: "rounded-lg bg-slate-50 px-2 py-2 dark:bg-slate-900", children: [
+          /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx15("span", { className: "truncate text-sm font-medium text-slate-800 dark:text-slate-100", children: service.name }),
+            /* @__PURE__ */ jsx15("span", { className: "text-xs text-slate-500 dark:text-slate-400", children: service.rateLabel })
           ] }),
-          /* @__PURE__ */ jsx14("div", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: service.statusLabel }),
-          service.reasonLabels.length ? /* @__PURE__ */ jsx14("div", { className: "mt-1 truncate text-[11px] text-slate-400 dark:text-slate-500", children: service.reasonLabels.join(", ") }) : null
+          /* @__PURE__ */ jsx15("div", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: service.statusLabel }),
+          service.reasonLabels.length ? /* @__PURE__ */ jsx15("div", { className: "mt-1 truncate text-[11px] text-slate-400 dark:text-slate-500", children: service.reasonLabels.join(", ") }) : null
         ] }, service.id)) })
       ]
     }
@@ -5201,16 +5273,16 @@ import { useReactFlow } from "@xyflow/react";
 // src/components/ui/popover.tsx
 import "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function Popover({
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+  return /* @__PURE__ */ jsx16(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
 }
 function PopoverTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+  return /* @__PURE__ */ jsx16(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
 }
 function PopoverContent({
   className,
@@ -5218,7 +5290,7 @@ function PopoverContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx16(
     PopoverPrimitive.Content,
     {
       "data-slot": "popover-content",
@@ -5295,27 +5367,27 @@ function sortWithAnchors(list) {
 import { FiEye as FiEye2, FiGrid, FiLink, FiMap, FiMinus, FiPlus, FiTarget } from "react-icons/fi";
 import { LuAlignCenterVertical, LuBetweenHorizontalStart, LuGitCompareArrows, LuMoveUpRight } from "react-icons/lu";
 import { MdOutlineFitScreen, MdOutlineKeyboardArrowDown } from "react-icons/md";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var Icons = {
-  bind: (active = false) => /* @__PURE__ */ jsx16(LuGitCompareArrows, { className: active ? "text-blue-600" : "" }),
-  include: (active = false) => /* @__PURE__ */ jsx16(LuMoveUpRight, { className: active ? "text-blue-600" : "" }),
-  exclude: (active = false) => /* @__PURE__ */ jsx16(LuBetweenHorizontalStart, { className: active ? "text-blue-600" : "" }),
-  bindVisible: (active = false) => /* @__PURE__ */ jsx16(FiLink, { className: active ? "text-blue-600" : "" }),
-  includeVisible: (active = false) => /* @__PURE__ */ jsx16(LuMoveUpRight, { className: active ? "text-blue-600" : "opacity-80" }),
-  excludeVisible: (active = false) => /* @__PURE__ */ jsx16(LuBetweenHorizontalStart, { className: active ? "text-rose-600" : "opacity-80" }),
-  focusContext: (active = false) => /* @__PURE__ */ jsx16(FiTarget, { className: active ? "text-emerald-600" : "" }),
-  visibilityMenu: (active = false) => /* @__PURE__ */ jsx16(FiEye2, { className: active ? "text-blue-600" : "" }),
-  grid: (active = false) => /* @__PURE__ */ jsx16(FiGrid, { className: active ? "text-blue-600" : "" }),
-  minimap: (active = false) => /* @__PURE__ */ jsx16(FiMap, { className: active ? "text-blue-600" : "" }),
-  zoomIn: () => /* @__PURE__ */ jsx16(FiPlus, {}),
-  zoomOut: () => /* @__PURE__ */ jsx16(FiMinus, {}),
-  fit: () => /* @__PURE__ */ jsx16(MdOutlineFitScreen, {}),
-  viewport: () => /* @__PURE__ */ jsx16(LuAlignCenterVertical, {}),
-  chevronDown: () => /* @__PURE__ */ jsx16(MdOutlineKeyboardArrowDown, {})
+  bind: (active = false) => /* @__PURE__ */ jsx17(LuGitCompareArrows, { className: active ? "text-blue-600" : "" }),
+  include: (active = false) => /* @__PURE__ */ jsx17(LuMoveUpRight, { className: active ? "text-blue-600" : "" }),
+  exclude: (active = false) => /* @__PURE__ */ jsx17(LuBetweenHorizontalStart, { className: active ? "text-blue-600" : "" }),
+  bindVisible: (active = false) => /* @__PURE__ */ jsx17(FiLink, { className: active ? "text-blue-600" : "" }),
+  includeVisible: (active = false) => /* @__PURE__ */ jsx17(LuMoveUpRight, { className: active ? "text-blue-600" : "opacity-80" }),
+  excludeVisible: (active = false) => /* @__PURE__ */ jsx17(LuBetweenHorizontalStart, { className: active ? "text-rose-600" : "opacity-80" }),
+  focusContext: (active = false) => /* @__PURE__ */ jsx17(FiTarget, { className: active ? "text-emerald-600" : "" }),
+  visibilityMenu: (active = false) => /* @__PURE__ */ jsx17(FiEye2, { className: active ? "text-blue-600" : "" }),
+  grid: (active = false) => /* @__PURE__ */ jsx17(FiGrid, { className: active ? "text-blue-600" : "" }),
+  minimap: (active = false) => /* @__PURE__ */ jsx17(FiMap, { className: active ? "text-blue-600" : "" }),
+  zoomIn: () => /* @__PURE__ */ jsx17(FiPlus, {}),
+  zoomOut: () => /* @__PURE__ */ jsx17(FiMinus, {}),
+  fit: () => /* @__PURE__ */ jsx17(MdOutlineFitScreen, {}),
+  viewport: () => /* @__PURE__ */ jsx17(LuAlignCenterVertical, {}),
+  chevronDown: () => /* @__PURE__ */ jsx17(MdOutlineKeyboardArrowDown, {})
 };
 
 // src/panels/canvas/toolbar/index.tsx
-import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 function Toolbar({
   api,
   mode = "dev",
@@ -5441,11 +5513,11 @@ function Toolbar({
   const groups = groupBy(items, (item) => item.group ?? "view");
   const relationTools = groups.relation ?? [];
   const viewMenu = items.find((item) => item.id === "view:menu");
-  return /* @__PURE__ */ jsx17("div", { className: className ?? "pointer-events-none absolute top-4 left-4 z-20", children: /* @__PURE__ */ jsxs11("div", { className: orientation === "horizontal" ? "flex items-center gap-2" : "grid gap-2", children: [
-    relationTools.length ? /* @__PURE__ */ jsx17("div", { className: toolbarSurfaceClass(orientation === "vertical" ? "flex flex-col items-stretch" : void 0), children: relationTools.map(
-      (button) => renderButton ? renderButton(button, button.id) : /* @__PURE__ */ jsx17(DefaultTool, { ...button, labelPlacement, orientation }, button.id)
+  return /* @__PURE__ */ jsx18("div", { className: className ?? "pointer-events-none absolute top-4 left-4 z-20", children: /* @__PURE__ */ jsxs12("div", { className: orientation === "horizontal" ? "flex items-center gap-2" : "grid gap-2", children: [
+    relationTools.length ? /* @__PURE__ */ jsx18("div", { className: toolbarSurfaceClass(orientation === "vertical" ? "flex flex-col items-stretch" : void 0), children: relationTools.map(
+      (button) => renderButton ? renderButton(button, button.id) : /* @__PURE__ */ jsx18(DefaultTool, { ...button, labelPlacement, orientation }, button.id)
     ) }) : null,
-    viewMenu ? /* @__PURE__ */ jsx17(
+    viewMenu ? /* @__PURE__ */ jsx18(
       ViewMenuTool,
       {
         tool: viewMenu,
@@ -5453,7 +5525,7 @@ function Toolbar({
         renderButton
       }
     ) : null,
-    /* @__PURE__ */ jsx17("div", { className: toolbarSurfaceClass(), children: /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx18("div", { className: toolbarSurfaceClass(), children: /* @__PURE__ */ jsx18(
       Button,
       {
         type: "button",
@@ -5463,7 +5535,7 @@ function Toolbar({
         "aria-label": orientation === "horizontal" ? "Switch to vertical toolbar" : "Switch to horizontal toolbar",
         className: toolbarIconButtonClass(),
         title: orientation === "horizontal" ? "Switch to vertical toolbar" : "Switch to horizontal toolbar",
-        children: orientation === "horizontal" ? /* @__PURE__ */ jsx17(LuPanelRight, {}) : /* @__PURE__ */ jsx17(LuPanelBottom, {})
+        children: orientation === "horizontal" ? /* @__PURE__ */ jsx18(LuPanelRight, {}) : /* @__PURE__ */ jsx18(LuPanelBottom, {})
       }
     ) })
   ] }) });
@@ -5597,14 +5669,14 @@ function DefaultTool({
 }) {
   const title = labelPlacement === "tooltip" ? disabled ? disabledReason ?? label : label : void 0;
   const buttonClass = toolbarIconButtonClass(active) + (orientation === "vertical" && labelPlacement !== "tooltip" ? " w-full justify-start px-2" : "") + (labelPlacement === "below" ? " flex-col" : "");
-  const content = /* @__PURE__ */ jsxs11(Fragment5, { children: [
+  const content = /* @__PURE__ */ jsxs12(Fragment5, { children: [
     icon ?? null,
-    labelPlacement === "inline" && label ? /* @__PURE__ */ jsx17("span", { className: "ml-1", children: label }) : null,
-    labelPlacement === "below" && label ? /* @__PURE__ */ jsx17("span", { className: "mt-0.5 block text-[10px] leading-3 text-slate-500 dark:text-slate-400", children: label }) : null,
-    hasMenu ? /* @__PURE__ */ jsx17("span", { className: "ml-1", children: Icons.chevronDown() }) : null
+    labelPlacement === "inline" && label ? /* @__PURE__ */ jsx18("span", { className: "ml-1", children: label }) : null,
+    labelPlacement === "below" && label ? /* @__PURE__ */ jsx18("span", { className: "mt-0.5 block text-[10px] leading-3 text-slate-500 dark:text-slate-400", children: label }) : null,
+    hasMenu ? /* @__PURE__ */ jsx18("span", { className: "ml-1", children: Icons.chevronDown() }) : null
   ] });
   if (!hasMenu) {
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx18(
       Button,
       {
         type: "button",
@@ -5619,8 +5691,8 @@ function DefaultTool({
       }
     );
   }
-  return /* @__PURE__ */ jsxs11("div", { className: "relative", children: [
-    /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx18(
       Button,
       {
         type: "button",
@@ -5634,7 +5706,7 @@ function DefaultTool({
         children: content
       }
     ),
-    open ? /* @__PURE__ */ jsx17("div", { className: "absolute left-0 z-20 mt-1 min-w-[10rem] overflow-hidden rounded-md border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900", role: "menu", children: /* @__PURE__ */ jsx17("ul", { className: "divide-y divide-slate-200 dark:divide-slate-800", children: children?.map((child) => /* @__PURE__ */ jsx17("li", { children: /* @__PURE__ */ jsxs11(
+    open ? /* @__PURE__ */ jsx18("div", { className: "absolute left-0 z-20 mt-1 min-w-[10rem] overflow-hidden rounded-md border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900", role: "menu", children: /* @__PURE__ */ jsx18("ul", { className: "divide-y divide-slate-200 dark:divide-slate-800", children: children?.map((child) => /* @__PURE__ */ jsx18("li", { children: /* @__PURE__ */ jsxs12(
       "button",
       {
         type: "button",
@@ -5646,8 +5718,8 @@ function DefaultTool({
         className: "flex w-full items-center gap-2 px-3 py-2 text-sm hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-100 " + (child.active ? "bg-slate-100 text-slate-900 dark:bg-slate-800 dark:text-slate-100 " : "") + (child.disabled ? "cursor-not-allowed opacity-50" : ""),
         children: [
           child.icon ?? null,
-          /* @__PURE__ */ jsx17("span", { children: child.label }),
-          child.active ? /* @__PURE__ */ jsx17("span", { className: "ml-auto text-[11px] font-medium text-blue-600 dark:text-blue-300", children: "On" }) : null
+          /* @__PURE__ */ jsx18("span", { children: child.label }),
+          child.active ? /* @__PURE__ */ jsx18("span", { className: "ml-auto text-[11px] font-medium text-blue-600 dark:text-blue-300", children: "On" }) : null
         ]
       }
     ) }, child.id)) }) }) : null
@@ -5662,8 +5734,8 @@ function ViewMenuTool({
     return renderButton(tool, tool.id);
   }
   const indicatorCount = tool.children?.filter((child) => child.active).length ?? 0;
-  return /* @__PURE__ */ jsxs11(Popover, { open: tool.open, onOpenChange: () => tool.onToggleMenu?.(), children: [
-    /* @__PURE__ */ jsx17(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx17("div", { className: toolbarSurfaceClass(), children: /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(Popover, { open: tool.open, onOpenChange: () => tool.onToggleMenu?.(), children: [
+    /* @__PURE__ */ jsx18(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx18("div", { className: toolbarSurfaceClass(), children: /* @__PURE__ */ jsxs12(
       Button,
       {
         type: "button",
@@ -5675,24 +5747,24 @@ function ViewMenuTool({
         className: toolbarIconButtonClass(tool.active, "relative"),
         children: [
           tool.icon,
-          tool.active ? /* @__PURE__ */ jsx17("span", { className: "absolute top-1.5 right-1.5 inline-flex h-2.5 w-2.5 rounded-full bg-rose-500" }) : null,
-          indicatorCount > 0 ? /* @__PURE__ */ jsxs11("span", { className: "sr-only", children: [
+          tool.active ? /* @__PURE__ */ jsx18("span", { className: "absolute top-1.5 right-1.5 inline-flex h-2.5 w-2.5 rounded-full bg-rose-500" }) : null,
+          indicatorCount > 0 ? /* @__PURE__ */ jsxs12("span", { className: "sr-only", children: [
             indicatorCount,
             " active view options"
           ] }) : null
         ]
       }
     ) }) }),
-    /* @__PURE__ */ jsxs11(PopoverContent, { align: "start", className: "w-64 rounded-2xl border-slate-200/90 bg-white/98 p-2 shadow-[0_18px_40px_rgba(15,23,42,0.18)] dark:border-slate-800 dark:bg-slate-950/98", children: [
-      /* @__PURE__ */ jsx17(ViewSection, { title: "Edge Layers", items: tool.children?.filter((child) => child.id.startsWith("view:") && child.id.includes("edges")) ?? [] }),
-      /* @__PURE__ */ jsx17(ViewSection, { title: "Canvas", items: tool.children?.filter((child) => !child.id.includes("edges")) ?? [], className: "mt-2 border-t border-slate-200 pt-2 dark:border-slate-800" })
+    /* @__PURE__ */ jsxs12(PopoverContent, { align: "start", className: "w-64 rounded-2xl border-slate-200/90 bg-white/98 p-2 shadow-[0_18px_40px_rgba(15,23,42,0.18)] dark:border-slate-800 dark:bg-slate-950/98", children: [
+      /* @__PURE__ */ jsx18(ViewSection, { title: "Edge Layers", items: tool.children?.filter((child) => child.id.startsWith("view:") && child.id.includes("edges")) ?? [] }),
+      /* @__PURE__ */ jsx18(ViewSection, { title: "Canvas", items: tool.children?.filter((child) => !child.id.includes("edges")) ?? [], className: "mt-2 border-t border-slate-200 pt-2 dark:border-slate-800" })
     ] })
   ] });
 }
 function ViewSection({ title, items, className }) {
-  return /* @__PURE__ */ jsxs11("div", { className, children: [
-    /* @__PURE__ */ jsx17("div", { className: "px-2 pb-1 text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-400 dark:text-slate-500", children: title }),
-    /* @__PURE__ */ jsx17("div", { className: "grid gap-1", children: items.map((item) => /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12("div", { className, children: [
+    /* @__PURE__ */ jsx18("div", { className: "px-2 pb-1 text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-400 dark:text-slate-500", children: title }),
+    /* @__PURE__ */ jsx18("div", { className: "grid gap-1", children: items.map((item) => /* @__PURE__ */ jsxs12(
       "button",
       {
         type: "button",
@@ -5703,9 +5775,9 @@ function ViewSection({ title, items, className }) {
         onClick: item.onClick,
         className: "flex w-full items-center gap-3 rounded-xl px-2.5 py-2 text-left text-sm text-slate-700 transition hover:bg-slate-100 hover:text-slate-950 dark:text-slate-200 dark:hover:bg-slate-900 dark:hover:text-slate-50 " + (item.active ? "bg-slate-100 dark:bg-slate-900 " : "") + (item.disabled ? "cursor-not-allowed opacity-50" : ""),
         children: [
-          /* @__PURE__ */ jsx17("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-300", children: item.icon }),
-          /* @__PURE__ */ jsx17("span", { className: "min-w-0 flex-1 truncate font-medium", children: compactLabel(item.label) }),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx18("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-300", children: item.icon }),
+          /* @__PURE__ */ jsx18("span", { className: "min-w-0 flex-1 truncate font-medium", children: compactLabel(item.label) }),
+          /* @__PURE__ */ jsx18(
             "span",
             {
               "aria-hidden": "true",
@@ -5752,7 +5824,7 @@ function mapIcon(token, active) {
     case "minimap":
       return Icons.minimap(active);
     default:
-      return /* @__PURE__ */ jsx17("span", { className: "text-xs text-slate-500", children: token });
+      return /* @__PURE__ */ jsx18("span", { className: "text-xs text-slate-500", children: token });
   }
 }
 function groupBy(arr, key) {
@@ -5766,7 +5838,7 @@ function groupBy(arr, key) {
 }
 
 // src/panels/canvas/canvas-surface.tsx
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 function hasPersistedViewport(viewport) {
   if (!viewport) return false;
   return Math.abs(viewport.x) > 0.5 || Math.abs(viewport.y) > 0.5 || Math.abs(viewport.zoom - 1) > 1e-4;
@@ -5862,7 +5934,7 @@ function CanvasSurface({
     if (!persistToolbarOrientation || typeof window === "undefined") return;
     window.localStorage.setItem(orientationStorageKey, orientation);
   }, [orientation, orientationStorageKey, persistToolbarOrientation]);
-  return /* @__PURE__ */ jsx18("div", { className: "relative h-full w-full", children: /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsx19("div", { className: "relative h-full w-full", children: /* @__PURE__ */ jsxs13(
     ReactFlow,
     {
       nodes,
@@ -5925,8 +5997,8 @@ function CanvasSurface({
         });
       },
       children: [
-        /* @__PURE__ */ jsx18(InitialFitController, { enabled: shouldInitialFit, nodeCount: nodes.length }),
-        showToolbar ? /* @__PURE__ */ jsx18("div", { className: `pointer-events-none absolute z-10 ${toolbarPositionClassName}`, children: /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(InitialFitController, { enabled: shouldInitialFit, nodeCount: nodes.length }),
+        showToolbar ? /* @__PURE__ */ jsx19("div", { className: `pointer-events-none absolute z-10 ${toolbarPositionClassName}`, children: /* @__PURE__ */ jsx19(
           Toolbar,
           {
             api,
@@ -5953,8 +6025,8 @@ function CanvasSurface({
             className: "pointer-events-none"
           }
         ) }) : null,
-        showMiniMap ? /* @__PURE__ */ jsx18(MiniMap, {}) : null,
-        showGrid ? /* @__PURE__ */ jsx18(Background, { gap: 32, size: 1, color: "rgba(148,163,184,0.25)" }) : null,
+        showMiniMap ? /* @__PURE__ */ jsx19(MiniMap, {}) : null,
+        showGrid ? /* @__PURE__ */ jsx19(Background, { gap: 32, size: 1, color: "rgba(148,163,184,0.25)" }) : null,
         children
       ]
     }
@@ -5962,7 +6034,7 @@ function CanvasSurface({
 }
 
 // src/panels/canvas/flow-canvas.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function FlowCanvas({
   tools,
   showToolbar = true,
@@ -5990,7 +6062,7 @@ function FlowCanvas({
   children
 }) {
   const api = useCanvasAPI();
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     CanvasSurface,
     {
       api,
@@ -6025,7 +6097,7 @@ function FlowCanvas({
 // src/components/ui/alert.tsx
 import "react";
 import { cva as cva2 } from "class-variance-authority";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var alertVariants = cva2(
   "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
   {
@@ -6045,7 +6117,7 @@ function Alert({
   variant,
   ...props
 }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       "data-slot": "alert",
@@ -6056,7 +6128,7 @@ function Alert({
   );
 }
 function AlertTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       "data-slot": "alert-title",
@@ -6072,7 +6144,7 @@ function AlertDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       "data-slot": "alert-description",
@@ -6090,7 +6162,7 @@ import cloneDeep2 from "lodash/cloneDeep";
 import { useEffect as useEffect7, useMemo as useMemo8, useState as useState7 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { FiUpload, FiX as FiX2 } from "react-icons/fi";
-import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
 function ImportJsonModal({ open, target, onClose, onImportProps, onImportCatalog }) {
   const [rawInput, setRawInput] = useState7("");
   const [source, setSource] = useState7("paste");
@@ -6174,39 +6246,39 @@ function ImportJsonModal({ open, target, onClose, onImportProps, onImportCatalog
     }
   };
   return createPortal3(
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(
       "div",
       {
         className: "fixed inset-0 z-50 flex items-center justify-center bg-slate-950/60 p-4 backdrop-blur-sm",
         onMouseDown: (event) => {
           if (event.target === event.currentTarget && !pending) onClose();
         },
-        children: /* @__PURE__ */ jsxs13("div", { className: "flex h-[min(90vh,52rem)] w-[min(96vw,56rem)] flex-col overflow-hidden rounded-[28px] border border-slate-200 bg-white shadow-2xl dark:border-slate-800 dark:bg-slate-950", children: [
-          /* @__PURE__ */ jsxs13("div", { className: "flex items-start justify-between gap-4 border-b border-slate-200 px-6 py-4 dark:border-slate-800", children: [
-            /* @__PURE__ */ jsxs13("div", { className: "min-w-0", children: [
-              /* @__PURE__ */ jsx21("h2", { className: "text-lg font-semibold text-slate-900 dark:text-slate-100", children: title }),
-              /* @__PURE__ */ jsx21("p", { className: "mt-1 text-sm text-slate-500 dark:text-slate-400", children: subtitle })
+        children: /* @__PURE__ */ jsxs14("div", { className: "flex h-[min(90vh,52rem)] w-[min(96vw,56rem)] flex-col overflow-hidden rounded-[28px] border border-slate-200 bg-white shadow-2xl dark:border-slate-800 dark:bg-slate-950", children: [
+          /* @__PURE__ */ jsxs14("div", { className: "flex items-start justify-between gap-4 border-b border-slate-200 px-6 py-4 dark:border-slate-800", children: [
+            /* @__PURE__ */ jsxs14("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx22("h2", { className: "text-lg font-semibold text-slate-900 dark:text-slate-100", children: title }),
+              /* @__PURE__ */ jsx22("p", { className: "mt-1 text-sm text-slate-500 dark:text-slate-400", children: subtitle })
             ] }),
-            /* @__PURE__ */ jsx21(Button, { type: "button", variant: "ghost", size: "sm", onClick: onClose, disabled: pending, className: "h-9 rounded-xl px-2", children: /* @__PURE__ */ jsx21(FiX2, {}) })
+            /* @__PURE__ */ jsx22(Button, { type: "button", variant: "ghost", size: "sm", onClick: onClose, disabled: pending, className: "h-9 rounded-xl px-2", children: /* @__PURE__ */ jsx22(FiX2, {}) })
           ] }),
-          /* @__PURE__ */ jsx21("div", { className: "min-h-0 flex-1 overflow-auto px-6 py-5", children: /* @__PURE__ */ jsxs13("div", { className: "grid gap-5 lg:grid-cols-[minmax(0,1.7fr)_minmax(18rem,1fr)]", children: [
-            /* @__PURE__ */ jsxs13("div", { className: "space-y-4", children: [
-              /* @__PURE__ */ jsxs13("section", { className: "rounded-2xl border border-slate-200/80 bg-slate-50/80 p-4 dark:border-slate-800 dark:bg-slate-900/60", children: [
-                /* @__PURE__ */ jsx21("div", { className: "mb-2 text-sm font-semibold text-slate-900 dark:text-slate-100", children: "Input" }),
-                /* @__PURE__ */ jsx21("label", { className: "block text-sm font-medium text-slate-700 dark:text-slate-300", htmlFor: "import-json-file", children: "Load JSON file" }),
-                /* @__PURE__ */ jsxs13("div", { className: "mt-2 flex flex-wrap items-center gap-3", children: [
-                  /* @__PURE__ */ jsxs13(
+          /* @__PURE__ */ jsx22("div", { className: "min-h-0 flex-1 overflow-auto px-6 py-5", children: /* @__PURE__ */ jsxs14("div", { className: "grid gap-5 lg:grid-cols-[minmax(0,1.7fr)_minmax(18rem,1fr)]", children: [
+            /* @__PURE__ */ jsxs14("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsxs14("section", { className: "rounded-2xl border border-slate-200/80 bg-slate-50/80 p-4 dark:border-slate-800 dark:bg-slate-900/60", children: [
+                /* @__PURE__ */ jsx22("div", { className: "mb-2 text-sm font-semibold text-slate-900 dark:text-slate-100", children: "Input" }),
+                /* @__PURE__ */ jsx22("label", { className: "block text-sm font-medium text-slate-700 dark:text-slate-300", htmlFor: "import-json-file", children: "Load JSON file" }),
+                /* @__PURE__ */ jsxs14("div", { className: "mt-2 flex flex-wrap items-center gap-3", children: [
+                  /* @__PURE__ */ jsxs14(
                     "label",
                     {
                       htmlFor: "import-json-file",
                       className: "inline-flex cursor-pointer items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm font-medium text-slate-700 shadow-sm transition hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-200 dark:hover:bg-slate-900",
                       children: [
-                        /* @__PURE__ */ jsx21(FiUpload, {}),
+                        /* @__PURE__ */ jsx22(FiUpload, {}),
                         "Choose file"
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx21(
+                  /* @__PURE__ */ jsx22(
                     "input",
                     {
                       id: "import-json-file",
@@ -6226,13 +6298,13 @@ function ImportJsonModal({ open, target, onClose, onImportProps, onImportCatalog
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsx21("span", { className: "text-xs text-slate-500 dark:text-slate-400", children: fileName ?? "No file selected" })
+                  /* @__PURE__ */ jsx22("span", { className: "text-xs text-slate-500 dark:text-slate-400", children: fileName ?? "No file selected" })
                 ] }),
-                /* @__PURE__ */ jsx21("p", { className: "mt-3 text-xs text-slate-500 dark:text-slate-400", children: "You can also paste JSON directly below." })
+                /* @__PURE__ */ jsx22("p", { className: "mt-3 text-xs text-slate-500 dark:text-slate-400", children: "You can also paste JSON directly below." })
               ] }),
-              /* @__PURE__ */ jsxs13("section", { children: [
-                /* @__PURE__ */ jsx21("label", { className: "mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300", htmlFor: "import-json-textarea", children: "JSON payload" }),
-                /* @__PURE__ */ jsx21(
+              /* @__PURE__ */ jsxs14("section", { children: [
+                /* @__PURE__ */ jsx22("label", { className: "mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300", htmlFor: "import-json-textarea", children: "JSON payload" }),
+                /* @__PURE__ */ jsx22(
                   "textarea",
                   {
                     id: "import-json-textarea",
@@ -6252,22 +6324,22 @@ function ImportJsonModal({ open, target, onClose, onImportProps, onImportCatalog
                 )
               ] })
             ] }),
-            /* @__PURE__ */ jsxs13("aside", { className: "space-y-4", children: [
-              /* @__PURE__ */ jsxs13("section", { className: "rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-950", children: [
-                /* @__PURE__ */ jsx21("div", { className: "mb-2 text-sm font-semibold text-slate-900 dark:text-slate-100", children: "Preview" }),
-                /* @__PURE__ */ jsx21(PreviewContent, { parseState })
+            /* @__PURE__ */ jsxs14("aside", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsxs14("section", { className: "rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-950", children: [
+                /* @__PURE__ */ jsx22("div", { className: "mb-2 text-sm font-semibold text-slate-900 dark:text-slate-100", children: "Preview" }),
+                /* @__PURE__ */ jsx22(PreviewContent, { parseState })
               ] }),
-              applyError ? /* @__PURE__ */ jsxs13(Alert, { variant: "destructive", children: [
-                /* @__PURE__ */ jsx21(AlertTitle, { children: "Import failed" }),
-                /* @__PURE__ */ jsx21(AlertDescription, { children: applyError })
+              applyError ? /* @__PURE__ */ jsxs14(Alert, { variant: "destructive", children: [
+                /* @__PURE__ */ jsx22(AlertTitle, { children: "Import failed" }),
+                /* @__PURE__ */ jsx22(AlertDescription, { children: applyError })
               ] }) : null
             ] })
           ] }) }),
-          /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between gap-3 border-t border-slate-200 px-6 py-4 dark:border-slate-800", children: [
-            /* @__PURE__ */ jsx21("div", { className: "text-xs text-slate-500 dark:text-slate-400", children: parseState.status === "ready" ? `Ready to import from ${parseState.source === "file" ? fileName ?? "file" : "pasted JSON"}.` : "Import will stay disabled until the JSON is valid." }),
-            /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx21(Button, { type: "button", variant: "ghost", onClick: onClose, disabled: pending, children: "Cancel" }),
-              /* @__PURE__ */ jsx21(Button, { type: "button", onClick: () => void handleApply(), disabled: parseState.status !== "ready" || pending, children: pending ? "Importing..." : target === "props" ? "Import props" : "Import catalog" })
+          /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-between gap-3 border-t border-slate-200 px-6 py-4 dark:border-slate-800", children: [
+            /* @__PURE__ */ jsx22("div", { className: "text-xs text-slate-500 dark:text-slate-400", children: parseState.status === "ready" ? `Ready to import from ${parseState.source === "file" ? fileName ?? "file" : "pasted JSON"}.` : "Import will stay disabled until the JSON is valid." }),
+            /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx22(Button, { type: "button", variant: "ghost", onClick: onClose, disabled: pending, children: "Cancel" }),
+              /* @__PURE__ */ jsx22(Button, { type: "button", onClick: () => void handleApply(), disabled: parseState.status !== "ready" || pending, children: pending ? "Importing..." : target === "props" ? "Import props" : "Import catalog" })
             ] })
           ] })
         ] })
@@ -6278,32 +6350,32 @@ function ImportJsonModal({ open, target, onClose, onImportProps, onImportCatalog
 }
 function PreviewContent({ parseState }) {
   if (parseState.status === "idle") {
-    return /* @__PURE__ */ jsx21("p", { className: "text-sm text-slate-500 dark:text-slate-400", children: "Paste JSON or load a file to preview what will be imported." });
+    return /* @__PURE__ */ jsx22("p", { className: "text-sm text-slate-500 dark:text-slate-400", children: "Paste JSON or load a file to preview what will be imported." });
   }
   if (parseState.status === "error") {
-    return /* @__PURE__ */ jsxs13(Alert, { variant: "destructive", children: [
-      /* @__PURE__ */ jsx21(AlertTitle, { children: "Validation error" }),
-      /* @__PURE__ */ jsx21(AlertDescription, { children: parseState.message })
+    return /* @__PURE__ */ jsxs14(Alert, { variant: "destructive", children: [
+      /* @__PURE__ */ jsx22(AlertTitle, { children: "Validation error" }),
+      /* @__PURE__ */ jsx22(AlertDescription, { children: parseState.message })
     ] });
   }
-  return /* @__PURE__ */ jsxs13("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsxs13("div", { className: "rounded-xl bg-slate-50 px-3 py-2 text-xs font-medium text-slate-600 dark:bg-slate-900 dark:text-slate-300", children: [
+  return /* @__PURE__ */ jsxs14("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "rounded-xl bg-slate-50 px-3 py-2 text-xs font-medium text-slate-600 dark:bg-slate-900 dark:text-slate-300", children: [
       "Source: ",
       parseState.source === "file" ? "File upload" : "Pasted JSON"
     ] }),
-    parseState.summary.kind === "props" ? /* @__PURE__ */ jsxs13("dl", { className: "grid grid-cols-2 gap-3 text-sm", children: [
-      /* @__PURE__ */ jsx21(Metric, { label: "Name", value: parseState.summary.name ?? "Unnamed", className: "col-span-2" }),
-      /* @__PURE__ */ jsx21(Metric, { label: "Tags", value: String(parseState.summary.tagCount) }),
-      /* @__PURE__ */ jsx21(Metric, { label: "Fields", value: String(parseState.summary.fieldCount) }),
-      /* @__PURE__ */ jsx21(Metric, { label: "Notices", value: String(parseState.summary.noticeCount) }),
-      /* @__PURE__ */ jsx21(Metric, { label: "Fallbacks", value: String(parseState.summary.fallbackCount) })
-    ] }) : /* @__PURE__ */ jsxs13("dl", { className: "grid grid-cols-2 gap-3 text-sm", children: [
-      /* @__PURE__ */ jsx21(Metric, { label: "Groups", value: String(parseState.summary.groupCount) }),
-      /* @__PURE__ */ jsx21(Metric, { label: "Smart groups", value: String(parseState.summary.smartGroupCount) }),
-      /* @__PURE__ */ jsx21(Metric, { label: "Active node", value: parseState.summary.activeNodeId ?? "None", className: "col-span-2" }),
-      /* @__PURE__ */ jsx21(Metric, { label: "View mode", value: parseState.summary.viewMode ?? "Default", className: "col-span-2" })
+    parseState.summary.kind === "props" ? /* @__PURE__ */ jsxs14("dl", { className: "grid grid-cols-2 gap-3 text-sm", children: [
+      /* @__PURE__ */ jsx22(Metric, { label: "Name", value: parseState.summary.name ?? "Unnamed", className: "col-span-2" }),
+      /* @__PURE__ */ jsx22(Metric, { label: "Tags", value: String(parseState.summary.tagCount) }),
+      /* @__PURE__ */ jsx22(Metric, { label: "Fields", value: String(parseState.summary.fieldCount) }),
+      /* @__PURE__ */ jsx22(Metric, { label: "Notices", value: String(parseState.summary.noticeCount) }),
+      /* @__PURE__ */ jsx22(Metric, { label: "Fallbacks", value: String(parseState.summary.fallbackCount) })
+    ] }) : /* @__PURE__ */ jsxs14("dl", { className: "grid grid-cols-2 gap-3 text-sm", children: [
+      /* @__PURE__ */ jsx22(Metric, { label: "Groups", value: String(parseState.summary.groupCount) }),
+      /* @__PURE__ */ jsx22(Metric, { label: "Smart groups", value: String(parseState.summary.smartGroupCount) }),
+      /* @__PURE__ */ jsx22(Metric, { label: "Active node", value: parseState.summary.activeNodeId ?? "None", className: "col-span-2" }),
+      /* @__PURE__ */ jsx22(Metric, { label: "View mode", value: parseState.summary.viewMode ?? "Default", className: "col-span-2" })
     ] }),
-    /* @__PURE__ */ jsxs13("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: [
+    /* @__PURE__ */ jsxs14("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: [
       "Applying this will replace the current ",
       parseState.summary.kind,
       " as a single undoable change."
@@ -6311,9 +6383,9 @@ function PreviewContent({ parseState }) {
   ] });
 }
 function Metric({ label, value, className }) {
-  return /* @__PURE__ */ jsxs13("div", { className: cn("rounded-xl border border-slate-200/80 bg-slate-50 px-3 py-2 dark:border-slate-800 dark:bg-slate-900", className), children: [
-    /* @__PURE__ */ jsx21("dt", { className: "text-[11px] font-semibold uppercase tracking-[0.12em] text-slate-400 dark:text-slate-500", children: label }),
-    /* @__PURE__ */ jsx21("dd", { className: "mt-1 truncate text-sm font-medium text-slate-900 dark:text-slate-100", children: value })
+  return /* @__PURE__ */ jsxs14("div", { className: cn("rounded-xl border border-slate-200/80 bg-slate-50 px-3 py-2 dark:border-slate-800 dark:bg-slate-900", className), children: [
+    /* @__PURE__ */ jsx22("dt", { className: "text-[11px] font-semibold uppercase tracking-[0.12em] text-slate-400 dark:text-slate-500", children: label }),
+    /* @__PURE__ */ jsx22("dd", { className: "mt-1 truncate text-sm font-medium text-slate-900 dark:text-slate-100", children: value })
   ] });
 }
 function isObjectRecord(value) {
@@ -6417,7 +6489,7 @@ function toStableValue(value) {
 }
 
 // src/panels/canvas/index.tsx
-import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
 var EDITOR_GUARD_ORIGINALS = /* @__PURE__ */ Symbol("service-builder.editor-guard-originals");
 var EDITOR_GUARD_WRAPPED = /* @__PURE__ */ Symbol("service-builder.editor-guard-wrapped");
 function CanvasPanel({
@@ -6916,7 +6988,7 @@ function CanvasPanel({
     [canCommentWrite, canvas, commentWriteDecision.reason, emitPermissionDenied, ws]
   );
   if (!canvas.graph.nodes.length) {
-    return /* @__PURE__ */ jsx22("div", { className: "relative flex min-h-0 flex-1 overflow-hidden bg-[radial-gradient(circle_at_top,rgba(19,91,236,0.08),transparent_35%),linear-gradient(180deg,#f8fafc_0%,#eef2ff_100%)] dark:bg-[radial-gradient(circle_at_top,rgba(19,91,236,0.12),transparent_35%),linear-gradient(180deg,#0f172a_0%,#020617_100%)]", children: /* @__PURE__ */ jsx22("div", { className: "m-auto w-full max-w-xl px-6", children: /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx23("div", { className: "relative flex min-h-0 flex-1 overflow-hidden bg-[radial-gradient(circle_at_top,rgba(19,91,236,0.08),transparent_35%),linear-gradient(180deg,#f8fafc_0%,#eef2ff_100%)] dark:bg-[radial-gradient(circle_at_top,rgba(19,91,236,0.12),transparent_35%),linear-gradient(180deg,#0f172a_0%,#020617_100%)]", children: /* @__PURE__ */ jsx23("div", { className: "m-auto w-full max-w-xl px-6", children: /* @__PURE__ */ jsx23(
       EmptyState,
       {
         title: "Your service map is ready for components",
@@ -6924,7 +6996,7 @@ function CanvasPanel({
       }
     ) }) });
   }
-  return /* @__PURE__ */ jsx22("div", { className: "relative min-h-0 flex-1 overflow-hidden bg-[radial-gradient(circle_at_top,rgba(19,91,236,0.08),transparent_35%),linear-gradient(180deg,#f8fafc_0%,#eef2ff_100%)] dark:bg-[radial-gradient(circle_at_top,rgba(19,91,236,0.12),transparent_35%),linear-gradient(180deg,#0f172a_0%,#020617_100%)]", children: /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsx23("div", { className: "relative min-h-0 flex-1 overflow-hidden bg-[radial-gradient(circle_at_top,rgba(19,91,236,0.08),transparent_35%),linear-gradient(180deg,#f8fafc_0%,#eef2ff_100%)] dark:bg-[radial-gradient(circle_at_top,rgba(19,91,236,0.12),transparent_35%),linear-gradient(180deg,#0f172a_0%,#020617_100%)]", children: /* @__PURE__ */ jsxs15(
     FlowCanvas,
     {
       tools,
@@ -7002,7 +7074,7 @@ function CanvasPanel({
       },
       toolbarPositionClassName: "left-4 top-4",
       children: [
-        showAppTools ? /* @__PURE__ */ jsx22(
+        showAppTools ? /* @__PURE__ */ jsx23(
           AppToolbar,
           {
             bootActionReason,
@@ -7097,7 +7169,7 @@ function CanvasPanel({
             pendingAction: actionPending
           }
         ) : null,
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23(
           ImportJsonModal,
           {
             open: activeImportTarget != null,
@@ -7107,11 +7179,11 @@ function CanvasPanel({
             onImportCatalog: importCatalog
           }
         ),
-        failedBlockingSections.length ? /* @__PURE__ */ jsx22("div", { className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center px-6", children: /* @__PURE__ */ jsx22("div", { className: "pointer-events-auto w-full max-w-xl rounded-[28px] border border-rose-200 bg-white/96 p-5 shadow-2xl backdrop-blur dark:border-rose-500/30 dark:bg-slate-950/96", children: /* @__PURE__ */ jsxs14("div", { className: "flex items-start gap-3", children: [
-          /* @__PURE__ */ jsx22(FiAlertCircle2, { className: "mt-0.5 text-xl text-rose-500" }),
-          /* @__PURE__ */ jsxs14("div", { children: [
-            /* @__PURE__ */ jsx22("h3", { className: "text-base font-semibold text-slate-900 dark:text-slate-100", children: "Editor waiting for required workspace data" }),
-            /* @__PURE__ */ jsxs14("p", { className: "mt-2 text-sm text-slate-600 dark:text-slate-300", children: [
+        failedBlockingSections.length ? /* @__PURE__ */ jsx23("div", { className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center px-6", children: /* @__PURE__ */ jsx23("div", { className: "pointer-events-auto w-full max-w-xl rounded-[28px] border border-rose-200 bg-white/96 p-5 shadow-2xl backdrop-blur dark:border-rose-500/30 dark:bg-slate-950/96", children: /* @__PURE__ */ jsxs15("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsx23(FiAlertCircle2, { className: "mt-0.5 text-xl text-rose-500" }),
+          /* @__PURE__ */ jsxs15("div", { children: [
+            /* @__PURE__ */ jsx23("h3", { className: "text-base font-semibold text-slate-900 dark:text-slate-100", children: "Editor waiting for required workspace data" }),
+            /* @__PURE__ */ jsxs15("p", { className: "mt-2 text-sm text-slate-600 dark:text-slate-300", children: [
               "The canvas stays visible, but editing should wait until these required sections recover:",
               " ",
               failedBlockingSections.map((section) => BOOT_SECTION_LABELS[section]).join(", "),
@@ -7127,12 +7199,12 @@ function CanvasPanel({
 // src/components/ui/tooltip.tsx
 import "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
 function TooltipProvider({
   delayDuration = 0,
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     TooltipPrimitive.Provider,
     {
       "data-slot": "tooltip-provider",
@@ -7144,12 +7216,12 @@ function TooltipProvider({
 function Tooltip({
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(TooltipProvider, { children: /* @__PURE__ */ jsx23(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+  return /* @__PURE__ */ jsx24(TooltipProvider, { children: /* @__PURE__ */ jsx24(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
 }
 function TooltipTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+  return /* @__PURE__ */ jsx24(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipContent({
   className,
@@ -7157,7 +7229,7 @@ function TooltipContent({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsx24(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs16(
     TooltipPrimitive.Content,
     {
       "data-slot": "tooltip-content",
@@ -7169,7 +7241,7 @@ function TooltipContent({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx23(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+        /* @__PURE__ */ jsx24(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
       ]
     }
   ) });
@@ -7177,24 +7249,24 @@ function TooltipContent({
 
 // src/components/dropdown/index.tsx
 import { Loader2 } from "lucide-react";
-import * as React11 from "react";
-import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
+import * as React12 from "react";
+import { Fragment as Fragment6, jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
 var IconNode = ({ icon, className }) => {
   if (!icon) return null;
   if (typeof icon === "function") {
     const C = icon;
-    return /* @__PURE__ */ jsx24(C, { className: cn("mr-2 size-4 shrink-0", className) });
+    return /* @__PURE__ */ jsx25(C, { className: cn("mr-2 size-4 shrink-0", className) });
   }
-  return /* @__PURE__ */ jsx24("span", { className: cn("mr-2 inline-flex items-center", className), children: icon });
+  return /* @__PURE__ */ jsx25("span", { className: cn("mr-2 inline-flex items-center", className), children: icon });
 };
 var RightSide = ({ badge, suffix, shortcut, loading }) => {
   if (loading) {
-    return /* @__PURE__ */ jsx24(Loader2, { className: "ml-auto size-4 animate-spin text-muted-foreground" });
+    return /* @__PURE__ */ jsx25(Loader2, { className: "ml-auto size-4 animate-spin text-muted-foreground" });
   }
-  if (suffix) return /* @__PURE__ */ jsx24("span", { className: "ml-auto", children: suffix });
-  return /* @__PURE__ */ jsxs16(Fragment6, { children: [
-    badge ? /* @__PURE__ */ jsx24("span", { className: "ml-auto", children: badge }) : null,
-    shortcut ? /* @__PURE__ */ jsx24("span", { className: "ml-2 text-xs text-muted-foreground tabular-nums", children: shortcut }) : null
+  if (suffix) return /* @__PURE__ */ jsx25("span", { className: "ml-auto", children: suffix });
+  return /* @__PURE__ */ jsxs17(Fragment6, { children: [
+    badge ? /* @__PURE__ */ jsx25("span", { className: "ml-auto", children: badge }) : null,
+    shortcut ? /* @__PURE__ */ jsx25("span", { className: "ml-2 text-xs text-muted-foreground tabular-nums", children: shortcut }) : null
   ] });
 };
 var rowClass = (size, node) => cn(
@@ -7286,7 +7358,7 @@ var Dropdown = ({
   renderGroupHeader,
   renderSeparator
 }) => {
-  const [loadingIds, setLoadingIds] = React11.useState(/* @__PURE__ */ new Set());
+  const [loadingIds, setLoadingIds] = React12.useState(/* @__PURE__ */ new Set());
   const setLoading = (id, state) => {
     if (id == null) return;
     setLoadingIds((prev) => {
@@ -7295,9 +7367,9 @@ var Dropdown = ({
       return next;
     });
   };
-  const [confirmNode, setConfirmNode] = React11.useState(null);
-  const [confirmEvent, setConfirmEvent] = React11.useState(null);
-  const filterTree2 = React11.useCallback(
+  const [confirmNode, setConfirmNode] = React12.useState(null);
+  const [confirmEvent, setConfirmEvent] = React12.useState(null);
+  const filterTree2 = React12.useCallback(
     (nodes) => {
       const visible = nodes.filter((n) => {
         if ("hidden" in n && n.hidden) return false;
@@ -7318,8 +7390,8 @@ var Dropdown = ({
     },
     [visibilityCtx]
   );
-  const prunedMenu = React11.useMemo(() => filterTree2(menu), [menu, filterTree2]);
-  const flat = React11.useMemo(() => {
+  const prunedMenu = React12.useMemo(() => filterTree2(menu), [menu, filterTree2]);
+  const flat = React12.useMemo(() => {
     const acc = [];
     const walk = (nodes) => {
       for (const n of nodes) {
@@ -7333,7 +7405,7 @@ var Dropdown = ({
     walk(prunedMenu);
     return acc;
   }, [prunedMenu]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     const bindings = flat.map((n) => ({ n, hot: parseShortcut(n.shortcut) })).filter((x) => x.hot);
     if (!bindings.length) return;
     const onKey = async (ev) => {
@@ -7435,10 +7507,10 @@ var Dropdown = ({
     ...matchTriggerWidth ? { ["--dropdown-min-w"]: "var(--radix-dropdown-menu-trigger-width)" } : {}
   };
   const contentWidthClass = matchTriggerWidth ? "min-w-[--dropdown-min-w]" : "min-w-44";
-  return /* @__PURE__ */ jsxs16(Fragment6, { children: [
-    /* @__PURE__ */ jsxs16(DropdownMenu, { onOpenChange, open, defaultOpen, children: [
-      /* @__PURE__ */ jsx24(DropdownMenuTrigger, { asChild: true, children: children ?? trigger }),
-      /* @__PURE__ */ jsx24(DropdownMenuPortal, { container: container ?? void 0, children: /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsxs17(Fragment6, { children: [
+    /* @__PURE__ */ jsxs17(DropdownMenu, { onOpenChange, open, defaultOpen, children: [
+      /* @__PURE__ */ jsx25(DropdownMenuTrigger, { asChild: true, children: children ?? trigger }),
+      /* @__PURE__ */ jsx25(DropdownMenuPortal, { container: container ?? void 0, children: /* @__PURE__ */ jsx25(
         DropdownMenuContent,
         {
           side,
@@ -7448,8 +7520,8 @@ var Dropdown = ({
           collisionPadding,
           className: cn(contentWidthClass, contentClassName, "p-0"),
           style: contentStyle,
-          children: /* @__PURE__ */ jsxs16("div", { className: "relative", children: [
-            /* @__PURE__ */ jsx24(
+          children: /* @__PURE__ */ jsxs17("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx25(
               "div",
               {
                 className: cn(
@@ -7457,7 +7529,7 @@ var Dropdown = ({
                   // Provide a CSS var for numeric or string heights
                 ),
                 style: { ["--menu-max-h"]: typeof maxHeight === "number" ? `${maxHeight}px` : String(maxHeight) },
-                children: /* @__PURE__ */ jsx24(TooltipProvider, { delayDuration: 250, children: prunedMenu.map((node, idx) => /* @__PURE__ */ jsx24(
+                children: /* @__PURE__ */ jsx25(TooltipProvider, { delayDuration: 250, children: prunedMenu.map((node, idx) => /* @__PURE__ */ jsx25(
                   RenderNode,
                   {
                     node,
@@ -7478,38 +7550,38 @@ var Dropdown = ({
                 )) })
               }
             ),
-            /* @__PURE__ */ jsx24("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-3 bg-linear-to-b from-black/5 to-transparent" }),
-            /* @__PURE__ */ jsx24("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-3 bg-linear-to-t from-black/5 to-transparent" })
+            /* @__PURE__ */ jsx25("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-3 bg-linear-to-b from-black/5 to-transparent" }),
+            /* @__PURE__ */ jsx25("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-3 bg-linear-to-t from-black/5 to-transparent" })
           ] })
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx24(AlertDialog, { open: !!confirmNode, onOpenChange: (o) => !o && (setConfirmNode(null), setConfirmEvent(null)), children: /* @__PURE__ */ jsxs16(AlertDialogContent, { children: [
-      /* @__PURE__ */ jsxs16(AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsx24(AlertDialogTitle, { children: "Are you sure?" }),
-        /* @__PURE__ */ jsx24(AlertDialogDescription, { children: typeof confirmNode?.["confirm"] === "string" ? confirmNode.confirm : confirmNode?.confirm ?? "Please confirm this action." })
+    /* @__PURE__ */ jsx25(AlertDialog, { open: !!confirmNode, onOpenChange: (o) => !o && (setConfirmNode(null), setConfirmEvent(null)), children: /* @__PURE__ */ jsxs17(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxs17(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsx25(AlertDialogTitle, { children: "Are you sure?" }),
+        /* @__PURE__ */ jsx25(AlertDialogDescription, { children: typeof confirmNode?.["confirm"] === "string" ? confirmNode.confirm : confirmNode?.confirm ?? "Please confirm this action." })
       ] }),
-      /* @__PURE__ */ jsxs16(AlertDialogFooter, { children: [
-        /* @__PURE__ */ jsx24(AlertDialogCancel, { children: "Cancel" }),
-        /* @__PURE__ */ jsx24(AlertDialogAction, { onClick: confirmProceed, children: "Continue" })
+      /* @__PURE__ */ jsxs17(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsx25(AlertDialogCancel, { children: "Cancel" }),
+        /* @__PURE__ */ jsx25(AlertDialogAction, { onClick: confirmProceed, children: "Continue" })
       ] })
     ] }) })
   ] });
 };
-var MaybeTooltip = ({ tooltip, children, disabled }) => tooltip && !disabled ? /* @__PURE__ */ jsxs16(Tooltip, { children: [
-  /* @__PURE__ */ jsx24(TooltipTrigger, { asChild: true, children }),
-  /* @__PURE__ */ jsx24(TooltipContent, { side: "right", children: tooltip })
-] }) : /* @__PURE__ */ jsx24(Fragment6, { children });
+var MaybeTooltip = ({ tooltip, children, disabled }) => tooltip && !disabled ? /* @__PURE__ */ jsxs17(Tooltip, { children: [
+  /* @__PURE__ */ jsx25(TooltipTrigger, { asChild: true, children }),
+  /* @__PURE__ */ jsx25(TooltipContent, { side: "right", children: tooltip })
+] }) : /* @__PURE__ */ jsx25(Fragment6, { children });
 var RowInner = ({ node, size, renderItem, right }) => {
-  const defaultContent = /* @__PURE__ */ jsxs16("div", { className: "flex min-w-0 flex-col", children: [
-    /* @__PURE__ */ jsxs16("div", { className: "flex min-w-0 items-center gap-0.5", children: [
-      /* @__PURE__ */ jsx24(IconNode, { icon: node.icon }),
-      /* @__PURE__ */ jsx24("span", { className: "truncate", children: node.label }),
+  const defaultContent = /* @__PURE__ */ jsxs17("div", { className: "flex min-w-0 flex-col", children: [
+    /* @__PURE__ */ jsxs17("div", { className: "flex min-w-0 items-center gap-0.5", children: [
+      /* @__PURE__ */ jsx25(IconNode, { icon: node.icon }),
+      /* @__PURE__ */ jsx25("span", { className: "truncate", children: node.label }),
       right
     ] }),
-    node.description ? /* @__PURE__ */ jsx24("span", { className: "mt-0.5 line-clamp-2 text-xs text-muted-foreground", children: node.description }) : null
+    node.description ? /* @__PURE__ */ jsx25("span", { className: "mt-0.5 line-clamp-2 text-xs text-muted-foreground", children: node.description }) : null
   ] });
-  return /* @__PURE__ */ jsx24(Fragment6, { children: renderItem?.({ node, defaultContent, size }) ?? defaultContent });
+  return /* @__PURE__ */ jsx25(Fragment6, { children: renderItem?.({ node, defaultContent, size }) ?? defaultContent });
 };
 var RenderNode = ({
   node,
@@ -7527,13 +7599,13 @@ var RenderNode = ({
   renderSeparator
 }) => {
   if (node.type === "separator") {
-    return renderSeparator ? /* @__PURE__ */ jsx24(Fragment6, { children: renderSeparator() }) : /* @__PURE__ */ jsx24(DropdownMenuSeparator, {});
+    return renderSeparator ? /* @__PURE__ */ jsx25(Fragment6, { children: renderSeparator() }) : /* @__PURE__ */ jsx25(DropdownMenuSeparator, {});
   }
   if (isGroup(node)) {
     if (!node.items?.length) return null;
-    return /* @__PURE__ */ jsxs16("div", { className: cn(node.className), children: [
-      renderGroupHeader ? renderGroupHeader(node.label) : node.label ? /* @__PURE__ */ jsx24(DropdownMenuLabel, { children: node.label }) : null,
-      /* @__PURE__ */ jsx24(DropdownMenuGroup, { children: node.items.map((child, i) => /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsxs17("div", { className: cn(node.className), children: [
+      renderGroupHeader ? renderGroupHeader(node.label) : node.label ? /* @__PURE__ */ jsx25(DropdownMenuLabel, { children: node.label }) : null,
+      /* @__PURE__ */ jsx25(DropdownMenuGroup, { children: node.items.map((child, i) => /* @__PURE__ */ jsx25(
         RenderNode,
         {
           node: child,
@@ -7556,9 +7628,9 @@ var RenderNode = ({
   }
   if (isSubmenu(node)) {
     if (!node.items?.length) return null;
-    const right2 = /* @__PURE__ */ jsx24(RightSide, { badge: node.badge, suffix: node.suffix, shortcut: node.shortcut, loading });
-    const inner2 = /* @__PURE__ */ jsx24(RowInner, { node, size, renderItem, right: right2 });
-    const subTrigger = /* @__PURE__ */ jsx24(
+    const right2 = /* @__PURE__ */ jsx25(RightSide, { badge: node.badge, suffix: node.suffix, shortcut: node.shortcut, loading });
+    const inner2 = /* @__PURE__ */ jsx25(RowInner, { node, size, renderItem, right: right2 });
+    const subTrigger = /* @__PURE__ */ jsx25(
       DropdownMenuSubTrigger,
       {
         "aria-label": node.ariaLabel,
@@ -7568,9 +7640,9 @@ var RenderNode = ({
         children: inner2
       }
     );
-    return /* @__PURE__ */ jsxs16(DropdownMenuSub, { children: [
-      /* @__PURE__ */ jsx24(MaybeTooltip, { tooltip: node.tooltip, disabled: node.disabled, children: subTrigger }),
-      /* @__PURE__ */ jsx24(DropdownMenuSubContent, { children: node.items.map((child, i) => /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsxs17(DropdownMenuSub, { children: [
+      /* @__PURE__ */ jsx25(MaybeTooltip, { tooltip: node.tooltip, disabled: node.disabled, children: subTrigger }),
+      /* @__PURE__ */ jsx25(DropdownMenuSubContent, { children: node.items.map((child, i) => /* @__PURE__ */ jsx25(
         RenderNode,
         {
           node: child,
@@ -7592,9 +7664,9 @@ var RenderNode = ({
     ] });
   }
   if (isCheckbox(node)) {
-    const right2 = /* @__PURE__ */ jsx24(RightSide, { badge: node.badge, suffix: node.suffix, shortcut: node.shortcut, loading });
-    const inner2 = /* @__PURE__ */ jsx24(RowInner, { node, size, renderItem, right: right2 });
-    return /* @__PURE__ */ jsx24(MaybeTooltip, { tooltip: node.tooltip, disabled: node.disabled, children: /* @__PURE__ */ jsx24(
+    const right2 = /* @__PURE__ */ jsx25(RightSide, { badge: node.badge, suffix: node.suffix, shortcut: node.shortcut, loading });
+    const inner2 = /* @__PURE__ */ jsx25(RowInner, { node, size, renderItem, right: right2 });
+    return /* @__PURE__ */ jsx25(MaybeTooltip, { tooltip: node.tooltip, disabled: node.disabled, children: /* @__PURE__ */ jsx25(
       DropdownMenuCheckboxItem,
       {
         "aria-label": node.ariaLabel,
@@ -7618,7 +7690,7 @@ var RenderNode = ({
   }
   if (isRadioGroup(node)) {
     if (!node.items?.length) return null;
-    return /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx25(
       DropdownMenuRadioGroup,
       {
         value: node.value,
@@ -7631,9 +7703,9 @@ var RenderNode = ({
           }
         },
         children: node.items.map((opt, i) => {
-          const right2 = /* @__PURE__ */ jsx24(RightSide, { badge: opt.badge, suffix: opt.suffix, shortcut: opt.shortcut, loading });
-          const inner2 = /* @__PURE__ */ jsx24(RowInner, { node: opt, size, renderItem, right: right2 });
-          return /* @__PURE__ */ jsx24(MaybeTooltip, { tooltip: opt.tooltip, disabled: opt.disabled, children: /* @__PURE__ */ jsx24(
+          const right2 = /* @__PURE__ */ jsx25(RightSide, { badge: opt.badge, suffix: opt.suffix, shortcut: opt.shortcut, loading });
+          const inner2 = /* @__PURE__ */ jsx25(RowInner, { node: opt, size, renderItem, right: right2 });
+          return /* @__PURE__ */ jsx25(MaybeTooltip, { tooltip: opt.tooltip, disabled: opt.disabled, children: /* @__PURE__ */ jsx25(
             DropdownMenuRadioItem,
             {
               "aria-label": opt.ariaLabel,
@@ -7652,8 +7724,8 @@ var RenderNode = ({
   }
   if (isLink(node)) {
     const dest = node[linkKey];
-    const right2 = /* @__PURE__ */ jsx24(RightSide, { badge: node.badge, suffix: node.suffix, shortcut: node.shortcut, loading });
-    const inner2 = /* @__PURE__ */ jsx24(RowInner, { node, size, renderItem, right: right2 });
+    const right2 = /* @__PURE__ */ jsx25(RightSide, { badge: node.badge, suffix: node.suffix, shortcut: node.shortcut, loading });
+    const inner2 = /* @__PURE__ */ jsx25(RowInner, { node, size, renderItem, right: right2 });
     const commit2 = async () => {
       setLoading(node.id, true);
       try {
@@ -7662,7 +7734,7 @@ var RenderNode = ({
         setLoading(node.id, false);
       }
     };
-    return /* @__PURE__ */ jsx24(MaybeTooltip, { tooltip: node.tooltip, disabled: node.disabled, children: /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx25(MaybeTooltip, { tooltip: node.tooltip, disabled: node.disabled, children: /* @__PURE__ */ jsx25(
       DropdownMenuItem,
       {
         "aria-current": node.ariaCurrent,
@@ -7672,7 +7744,7 @@ var RenderNode = ({
         onPointerMove: () => onItemHover?.(node),
         onSelect: (ev) => handleSelect(node, ev, commit2),
         "data-testid": node.testId,
-        children: LinkComponent && (typeof dest === "string" || dest instanceof URL) ? /* @__PURE__ */ jsx24(LinkComponent, { ...{ [linkKey]: dest, className: "flex min-w-0 items-center gap-0.5" }, children: inner2 }) : /* @__PURE__ */ jsx24(
+        children: LinkComponent && (typeof dest === "string" || dest instanceof URL) ? /* @__PURE__ */ jsx25(LinkComponent, { ...{ [linkKey]: dest, className: "flex min-w-0 items-center gap-0.5" }, children: inner2 }) : /* @__PURE__ */ jsx25(
           "a",
           {
             href: typeof dest === "string" ? dest : String(dest ?? ""),
@@ -7686,8 +7758,8 @@ var RenderNode = ({
     ) });
   }
   const item = node;
-  const right = /* @__PURE__ */ jsx24(RightSide, { badge: item.badge, suffix: item.suffix, shortcut: item.shortcut, loading });
-  const inner = /* @__PURE__ */ jsx24(RowInner, { node: item, size, renderItem, right });
+  const right = /* @__PURE__ */ jsx25(RightSide, { badge: item.badge, suffix: item.suffix, shortcut: item.shortcut, loading });
+  const inner = /* @__PURE__ */ jsx25(RowInner, { node: item, size, renderItem, right });
   const commit = async (ev) => {
     setLoading(item.id, true);
     try {
@@ -7696,7 +7768,7 @@ var RenderNode = ({
       setLoading(item.id, false);
     }
   };
-  return /* @__PURE__ */ jsx24(MaybeTooltip, { tooltip: item.tooltip, disabled: item.disabled, children: /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(MaybeTooltip, { tooltip: item.tooltip, disabled: item.disabled, children: /* @__PURE__ */ jsx25(
     DropdownMenuItem,
     {
       "aria-label": item.ariaLabel,
@@ -7716,7 +7788,7 @@ import { useWorkspace as useWorkspace6 } from "@timeax/digital-service-engine/wo
 import { useEffect as useEffect10, useMemo as useMemo11, useState as useState10 } from "react";
 import { MdCheck, MdOutlineFileCopy, MdOutlineRefresh } from "react-icons/md";
 import { RiGitBranchLine, RiGitMergeLine, RiLoader4Line } from "react-icons/ri";
-import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
 function normalizeKey(input) {
   return input.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
 }
@@ -7727,7 +7799,7 @@ function ActionIconButton({
   disabled,
   reason
 }) {
-  const button = /* @__PURE__ */ jsx25(
+  const button = /* @__PURE__ */ jsx26(
     "button",
     {
       type: "button",
@@ -7744,9 +7816,9 @@ function ActionIconButton({
     }
   );
   if (!reason) return button;
-  return /* @__PURE__ */ jsxs17(Tooltip, { children: [
-    /* @__PURE__ */ jsx25(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx25("span", { children: button }) }),
-    /* @__PURE__ */ jsx25(TooltipContent, { children: reason })
+  return /* @__PURE__ */ jsxs18(Tooltip, { children: [
+    /* @__PURE__ */ jsx26(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx26("span", { children: button }) }),
+    /* @__PURE__ */ jsx26(TooltipContent, { children: reason })
   ] });
 }
 var Drafts = ({ trigger }) => {
@@ -7948,7 +8020,7 @@ var Drafts = ({ trigger }) => {
     ];
   };
   if (!workspaceRead) return null;
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     Popover,
     {
       open,
@@ -7957,24 +8029,24 @@ var Drafts = ({ trigger }) => {
         if (!nextOpen) setCreateOpen(false);
       },
       children: [
-        /* @__PURE__ */ jsx25(PopoverTrigger, { asChild: true, children: trigger }),
-        /* @__PURE__ */ jsxs17(
+        /* @__PURE__ */ jsx26(PopoverTrigger, { asChild: true, children: trigger }),
+        /* @__PURE__ */ jsxs18(
           PopoverContent,
           {
             align: "start",
             sideOffset: 10,
             className: "w-[420px] rounded-[28px] border-slate-200 bg-white/98 p-0 shadow-2xl dark:border-slate-800 dark:bg-slate-950/98",
             children: [
-              /* @__PURE__ */ jsxs17("div", { className: "border-b border-slate-200 px-4 py-4 dark:border-slate-800", children: [
-                /* @__PURE__ */ jsxs17("div", { className: "flex items-start justify-between gap-3", children: [
-                  /* @__PURE__ */ jsxs17("div", { children: [
-                    /* @__PURE__ */ jsx25("div", { className: "text-[10px] font-semibold tracking-[0.18em] text-slate-400 uppercase dark:text-slate-500", children: "Branch manager" }),
-                    /* @__PURE__ */ jsx25("h3", { className: "mt-1 text-base font-semibold text-slate-900 dark:text-slate-100", children: "Workspace drafts" }),
-                    /* @__PURE__ */ jsx25("p", { className: "mt-1 text-sm text-slate-500 dark:text-slate-400", children: "Switch, merge, delete, and refresh branches." })
+              /* @__PURE__ */ jsxs18("div", { className: "border-b border-slate-200 px-4 py-4 dark:border-slate-800", children: [
+                /* @__PURE__ */ jsxs18("div", { className: "flex items-start justify-between gap-3", children: [
+                  /* @__PURE__ */ jsxs18("div", { children: [
+                    /* @__PURE__ */ jsx26("div", { className: "text-[10px] font-semibold tracking-[0.18em] text-slate-400 uppercase dark:text-slate-500", children: "Branch manager" }),
+                    /* @__PURE__ */ jsx26("h3", { className: "mt-1 text-base font-semibold text-slate-900 dark:text-slate-100", children: "Workspace drafts" }),
+                    /* @__PURE__ */ jsx26("p", { className: "mt-1 text-sm text-slate-500 dark:text-slate-400", children: "Switch, merge, delete, and refresh branches." })
                   ] }),
-                  /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsxs17(Popover, { modal: false, open: createOpen, onOpenChange: setCreateOpen, children: [
-                      /* @__PURE__ */ jsx25(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs17(
+                  /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsxs18(Popover, { modal: false, open: createOpen, onOpenChange: setCreateOpen, children: [
+                      /* @__PURE__ */ jsx26(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs18(
                         Button,
                         {
                           type: "button",
@@ -7982,12 +8054,12 @@ var Drafts = ({ trigger }) => {
                           size: "sm",
                           className: "rounded-xl border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900",
                           children: [
-                            /* @__PURE__ */ jsx25(MdOutlineFileCopy, {}),
+                            /* @__PURE__ */ jsx26(MdOutlineFileCopy, {}),
                             "Create branch"
                           ]
                         }
                       ) }),
-                      /* @__PURE__ */ jsx25(
+                      /* @__PURE__ */ jsx26(
                         PopoverContent,
                         {
                           align: "end",
@@ -7995,14 +8067,14 @@ var Drafts = ({ trigger }) => {
                           sideOffset: 8,
                           collisionPadding: 16,
                           className: "w-[320px] rounded-2xl border-slate-200 bg-white/98 p-4 shadow-2xl dark:border-slate-800 dark:bg-slate-950/98",
-                          children: /* @__PURE__ */ jsxs17("div", { className: "space-y-3", children: [
-                            /* @__PURE__ */ jsxs17("div", { children: [
-                              /* @__PURE__ */ jsx25("h4", { className: "text-sm font-semibold text-slate-900 dark:text-slate-100", children: "Create branch" }),
-                              /* @__PURE__ */ jsx25("p", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: "Branch names are normalized to lowercase slug format." })
+                          children: /* @__PURE__ */ jsxs18("div", { className: "space-y-3", children: [
+                            /* @__PURE__ */ jsxs18("div", { children: [
+                              /* @__PURE__ */ jsx26("h4", { className: "text-sm font-semibold text-slate-900 dark:text-slate-100", children: "Create branch" }),
+                              /* @__PURE__ */ jsx26("p", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: "Branch names are normalized to lowercase slug format." })
                             ] }),
-                            /* @__PURE__ */ jsxs17("label", { className: "space-y-2", children: [
-                              /* @__PURE__ */ jsx25("span", { className: "text-xs font-medium text-slate-500 dark:text-slate-400", children: "Branch name" }),
-                              /* @__PURE__ */ jsx25(
+                            /* @__PURE__ */ jsxs18("label", { className: "space-y-2", children: [
+                              /* @__PURE__ */ jsx26("span", { className: "text-xs font-medium text-slate-500 dark:text-slate-400", children: "Branch name" }),
+                              /* @__PURE__ */ jsx26(
                                 "input",
                                 {
                                   value: createName,
@@ -8012,19 +8084,19 @@ var Drafts = ({ trigger }) => {
                                 }
                               )
                             ] }),
-                            /* @__PURE__ */ jsxs17("label", { className: "space-y-2", children: [
-                              /* @__PURE__ */ jsx25("span", { className: "text-xs font-medium text-slate-500 dark:text-slate-400", children: "Create from" }),
-                              /* @__PURE__ */ jsx25(
+                            /* @__PURE__ */ jsxs18("label", { className: "space-y-2", children: [
+                              /* @__PURE__ */ jsx26("span", { className: "text-xs font-medium text-slate-500 dark:text-slate-400", children: "Create from" }),
+                              /* @__PURE__ */ jsx26(
                                 "select",
                                 {
                                   value: createFromId,
                                   onChange: (event) => setCreateFromId(event.target.value),
                                   className: "w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 transition outline-none focus:border-blue-300 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100 dark:focus:border-blue-500/40",
-                                  children: createSourceBranches.map((item) => /* @__PURE__ */ jsx25("option", { value: item.branch.id, children: item.branch.name }, item.branch.id))
+                                  children: createSourceBranches.map((item) => /* @__PURE__ */ jsx26("option", { value: item.branch.id, children: item.branch.name }, item.branch.id))
                                 }
                               )
                             ] }),
-                            /* @__PURE__ */ jsxs17(
+                            /* @__PURE__ */ jsxs18(
                               Button,
                               {
                                 type: "button",
@@ -8032,69 +8104,69 @@ var Drafts = ({ trigger }) => {
                                 disabled: !createPermission.allowed || !normalizeKey(createName) || !!actionKey,
                                 className: "w-full rounded-xl",
                                 children: [
-                                  actionKey?.startsWith("create:") ? /* @__PURE__ */ jsx25(RiLoader4Line, { className: "animate-spin" }) : /* @__PURE__ */ jsx25(MdOutlineFileCopy, {}),
+                                  actionKey?.startsWith("create:") ? /* @__PURE__ */ jsx26(RiLoader4Line, { className: "animate-spin" }) : /* @__PURE__ */ jsx26(MdOutlineFileCopy, {}),
                                   "Create branch"
                                 ]
                               }
                             ),
-                            !createPermission.allowed && createPermission.reason ? /* @__PURE__ */ jsx25("p", { className: "text-xs text-amber-600 dark:text-amber-300", children: createPermission.reason }) : null
+                            !createPermission.allowed && createPermission.reason ? /* @__PURE__ */ jsx26("p", { className: "text-xs text-amber-600 dark:text-amber-300", children: createPermission.reason }) : null
                           ] })
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsx25(
+                    /* @__PURE__ */ jsx26(
                       ActionIconButton,
                       {
-                        icon: actionKey === "refresh" ? /* @__PURE__ */ jsx25(RiLoader4Line, { className: "animate-spin" }) : /* @__PURE__ */ jsx25(MdOutlineRefresh, {}),
+                        icon: actionKey === "refresh" ? /* @__PURE__ */ jsx26(RiLoader4Line, { className: "animate-spin" }) : /* @__PURE__ */ jsx26(MdOutlineRefresh, {}),
                         label: "Refresh branch data",
                         onClick: () => void refreshEverything()
                       }
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx25("div", { className: "mt-4", children: /* @__PURE__ */ jsx25(PanelSearch, { value: query, onChange: setQuery, placeholder: "Search readable branches" }) })
+                /* @__PURE__ */ jsx26("div", { className: "mt-4", children: /* @__PURE__ */ jsx26(PanelSearch, { value: query, onChange: setQuery, placeholder: "Search readable branches" }) })
               ] }),
-              /* @__PURE__ */ jsxs17("div", { className: "max-h-[430px] space-y-3 overflow-y-auto px-4 py-4", children: [
+              /* @__PURE__ */ jsxs18("div", { className: "max-h-[430px] space-y-3 overflow-y-auto px-4 py-4", children: [
                 visibleBranches.map((item) => {
                   const isCurrent = item.branch.id === ws.branches.currentId;
                   const isBusy = actionKey === `switch:${item.branch.id}` || actionKey === `main:${item.branch.id}` || actionKey === `delete:${item.branch.id}` || actionKey?.startsWith(`merge:${item.branch.id}:`);
-                  return /* @__PURE__ */ jsx25(
+                  return /* @__PURE__ */ jsx26(
                     "div",
                     {
                       className: cn(
                         "rounded-2xl border p-3 shadow-sm transition",
                         isCurrent ? "border-blue-200 bg-blue-50/70 dark:border-blue-500/30 dark:bg-blue-500/10" : "border-slate-200/80 bg-white dark:border-slate-800 dark:bg-slate-900/70"
                       ),
-                      children: /* @__PURE__ */ jsxs17("div", { className: "flex items-start gap-3", children: [
-                        /* @__PURE__ */ jsx25(
+                      children: /* @__PURE__ */ jsxs18("div", { className: "flex items-start gap-3", children: [
+                        /* @__PURE__ */ jsx26(
                           "div",
                           {
                             className: cn(
                               "flex h-10 w-10 items-center justify-center rounded-xl",
                               isCurrent ? "bg-blue-600 text-white" : "bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300"
                             ),
-                            children: isBusy ? /* @__PURE__ */ jsx25(RiLoader4Line, { className: "animate-spin text-lg" }) : /* @__PURE__ */ jsx25(RiGitBranchLine, { className: "text-lg" })
+                            children: isBusy ? /* @__PURE__ */ jsx26(RiLoader4Line, { className: "animate-spin text-lg" }) : /* @__PURE__ */ jsx26(RiGitBranchLine, { className: "text-lg" })
                           }
                         ),
-                        /* @__PURE__ */ jsxs17("div", { className: "min-w-0 flex-1", children: [
-                          /* @__PURE__ */ jsxs17("div", { className: "flex flex-wrap items-center gap-2", children: [
-                            /* @__PURE__ */ jsx25("div", { className: "truncate text-sm font-semibold text-slate-900 dark:text-slate-100", children: item.branch.name }),
-                            isCurrent ? /* @__PURE__ */ jsx25("span", { className: "rounded-full border border-blue-200 bg-white px-2 py-0.5 text-[10px] font-semibold tracking-[0.16em] text-blue-700 uppercase dark:border-blue-500/30 dark:bg-blue-500/10 dark:text-blue-200", children: "Current" }) : null,
-                            item.branch.isMain ? /* @__PURE__ */ jsx25("span", { className: "rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-[10px] font-semibold tracking-[0.16em] text-amber-700 uppercase dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-200", children: "Main" }) : null
+                        /* @__PURE__ */ jsxs18("div", { className: "min-w-0 flex-1", children: [
+                          /* @__PURE__ */ jsxs18("div", { className: "flex flex-wrap items-center gap-2", children: [
+                            /* @__PURE__ */ jsx26("div", { className: "truncate text-sm font-semibold text-slate-900 dark:text-slate-100", children: item.branch.name }),
+                            isCurrent ? /* @__PURE__ */ jsx26("span", { className: "rounded-full border border-blue-200 bg-white px-2 py-0.5 text-[10px] font-semibold tracking-[0.16em] text-blue-700 uppercase dark:border-blue-500/30 dark:bg-blue-500/10 dark:text-blue-200", children: "Current" }) : null,
+                            item.branch.isMain ? /* @__PURE__ */ jsx26("span", { className: "rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-[10px] font-semibold tracking-[0.16em] text-amber-700 uppercase dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-200", children: "Main" }) : null
                           ] }),
-                          /* @__PURE__ */ jsxs17("div", { className: "mt-2 flex flex-wrap items-center gap-2 text-xs text-slate-500 dark:text-slate-400", children: [
-                            /* @__PURE__ */ jsxs17("span", { className: "inline-flex items-center gap-1 rounded-full border border-slate-200 bg-slate-50 px-2 py-1 dark:border-slate-700 dark:bg-slate-950", children: [
-                              item.canWrite ? /* @__PURE__ */ jsx25(StatusDot, { tone: "success" }) : /* @__PURE__ */ jsx25(StatusDot, { tone: "warning" }),
+                          /* @__PURE__ */ jsxs18("div", { className: "mt-2 flex flex-wrap items-center gap-2 text-xs text-slate-500 dark:text-slate-400", children: [
+                            /* @__PURE__ */ jsxs18("span", { className: "inline-flex items-center gap-1 rounded-full border border-slate-200 bg-slate-50 px-2 py-1 dark:border-slate-700 dark:bg-slate-950", children: [
+                              item.canWrite ? /* @__PURE__ */ jsx26(StatusDot, { tone: "success" }) : /* @__PURE__ */ jsx26(StatusDot, { tone: "warning" }),
                               item.canWrite ? "Can edit" : "Read only"
                             ] }),
-                            item.branch.headVersionId ? /* @__PURE__ */ jsxs17("span", { className: "rounded-full border border-slate-200 bg-slate-50 px-2 py-1 dark:border-slate-700 dark:bg-slate-950", children: [
+                            item.branch.headVersionId ? /* @__PURE__ */ jsxs18("span", { className: "rounded-full border border-slate-200 bg-slate-50 px-2 py-1 dark:border-slate-700 dark:bg-slate-950", children: [
                               "Head ",
                               item.branch.headVersionId
                             ] }) : null
                           ] })
                         ] }),
-                        /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
-                          !isCurrent ? /* @__PURE__ */ jsxs17(
+                        /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
+                          !isCurrent ? /* @__PURE__ */ jsxs18(
                             Button,
                             {
                               type: "button",
@@ -8104,17 +8176,17 @@ var Drafts = ({ trigger }) => {
                               onClick: () => void switchBranch(item.branch.id),
                               disabled: !!actionKey,
                               children: [
-                                actionKey === `switch:${item.branch.id}` ? /* @__PURE__ */ jsx25(RiLoader4Line, { className: "animate-spin" }) : /* @__PURE__ */ jsx25(MdCheck, {}),
+                                actionKey === `switch:${item.branch.id}` ? /* @__PURE__ */ jsx26(RiLoader4Line, { className: "animate-spin" }) : /* @__PURE__ */ jsx26(MdCheck, {}),
                                 "Switch"
                               ]
                             }
-                          ) : /* @__PURE__ */ jsx25("span", { className: "rounded-xl border border-blue-200 bg-white px-3 py-1.5 text-xs font-semibold text-blue-700 dark:border-blue-500/30 dark:bg-blue-500/10 dark:text-blue-200", children: "Active branch" }),
-                          /* @__PURE__ */ jsx25(dropdown_default, { menu: branchActionMenu(item), align: "end", children: /* @__PURE__ */ jsx25(
+                          ) : /* @__PURE__ */ jsx26("span", { className: "rounded-xl border border-blue-200 bg-white px-3 py-1.5 text-xs font-semibold text-blue-700 dark:border-blue-500/30 dark:bg-blue-500/10 dark:text-blue-200", children: "Active branch" }),
+                          /* @__PURE__ */ jsx26(dropdown_default, { menu: branchActionMenu(item), align: "end", children: /* @__PURE__ */ jsx26(
                             "button",
                             {
                               type: "button",
                               className: "flex h-9 w-9 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-600 transition hover:border-slate-300 hover:text-slate-900 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-300 dark:hover:border-slate-600 dark:hover:text-slate-100",
-                              children: /* @__PURE__ */ jsx25(RiGitMergeLine, {})
+                              children: /* @__PURE__ */ jsx26(RiGitMergeLine, {})
                             }
                           ) })
                         ] })
@@ -8123,9 +8195,9 @@ var Drafts = ({ trigger }) => {
                     item.branch.id
                   );
                 }),
-                !visibleBranches.length ? /* @__PURE__ */ jsx25("div", { className: "rounded-2xl border border-dashed border-slate-300 bg-slate-50/70 px-4 py-8 text-center text-sm text-slate-500 dark:border-slate-700 dark:bg-slate-900/50 dark:text-slate-400", children: "No readable branches matched your search." }) : null,
-                pendingAccessCount > 0 ? /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2 rounded-2xl border border-slate-200/80 bg-slate-50/80 px-4 py-3 text-sm text-slate-500 dark:border-slate-800 dark:bg-slate-900/60 dark:text-slate-400", children: [
-                  /* @__PURE__ */ jsx25(RiLoader4Line, { className: "animate-spin" }),
+                !visibleBranches.length ? /* @__PURE__ */ jsx26("div", { className: "rounded-2xl border border-dashed border-slate-300 bg-slate-50/70 px-4 py-8 text-center text-sm text-slate-500 dark:border-slate-700 dark:bg-slate-900/50 dark:text-slate-400", children: "No readable branches matched your search." }) : null,
+                pendingAccessCount > 0 ? /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2 rounded-2xl border border-slate-200/80 bg-slate-50/80 px-4 py-3 text-sm text-slate-500 dark:border-slate-800 dark:bg-slate-900/60 dark:text-slate-400", children: [
+                  /* @__PURE__ */ jsx26(RiLoader4Line, { className: "animate-spin" }),
                   "Checking branch access for ",
                   pendingAccessCount,
                   " branch",
@@ -8147,20 +8219,20 @@ import { useWorkspace as useWorkspace7 } from "@timeax/digital-service-engine/wo
 import { useState as useState11 } from "react";
 import { BsChevronDown, BsChevronRight } from "react-icons/bs";
 import { MdMenuOpen, MdOutlineSpaceDashboard } from "react-icons/md";
-import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
 var MenuRenderer = ({ items, workspace, depth = 0 }) => {
   const [openSubmenus, setOpenSubmenus] = useState11({});
   const toggleSubmenu = (name) => {
     setOpenSubmenus((prev) => ({ ...prev, [name]: !prev[name] }));
   };
-  return /* @__PURE__ */ jsx26("ul", { className: "flex flex-col gap-1", children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx27("ul", { className: "flex flex-col gap-1", children: items.map((item, index) => {
     const hasChildren = item.children && item.children.length > 0;
     const isOpen = openSubmenus[item.name];
     if (item.render) {
-      return /* @__PURE__ */ jsx26("li", { children: item.render() }, index);
+      return /* @__PURE__ */ jsx27("li", { children: item.render() }, index);
     }
-    return /* @__PURE__ */ jsxs18("li", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsxs18(
+    return /* @__PURE__ */ jsxs19("li", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxs19(
         "button",
         {
           type: "button",
@@ -8173,13 +8245,13 @@ var MenuRenderer = ({ items, workspace, depth = 0 }) => {
           },
           className: "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-slate-700 transition hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800",
           children: [
-            item.icon && /* @__PURE__ */ jsx26("span", { className: "flex h-4 w-4 items-center justify-center text-slate-500", children: item.icon }),
-            /* @__PURE__ */ jsx26("span", { className: "flex-1 text-left", children: item.name }),
-            hasChildren && /* @__PURE__ */ jsx26("span", { className: `transition-transform ${isOpen ? "rotate-90" : ""}`, children: /* @__PURE__ */ jsx26(BsChevronRight, { className: "h-3 w-3" }) })
+            item.icon && /* @__PURE__ */ jsx27("span", { className: "flex h-4 w-4 items-center justify-center text-slate-500", children: item.icon }),
+            /* @__PURE__ */ jsx27("span", { className: "flex-1 text-left", children: item.name }),
+            hasChildren && /* @__PURE__ */ jsx27("span", { className: `transition-transform ${isOpen ? "rotate-90" : ""}`, children: /* @__PURE__ */ jsx27(BsChevronRight, { className: "h-3 w-3" }) })
           ]
         }
       ),
-      hasChildren && isOpen && /* @__PURE__ */ jsx26("div", { className: "mt-1 ml-4 border-l border-slate-200 pl-2 dark:border-slate-800", children: /* @__PURE__ */ jsx26(MenuRenderer, { items: item.children, workspace, depth: depth + 1 }) })
+      hasChildren && isOpen && /* @__PURE__ */ jsx27("div", { className: "mt-1 ml-4 border-l border-slate-200 pl-2 dark:border-slate-800", children: /* @__PURE__ */ jsx27(MenuRenderer, { items: item.children, workspace, depth: depth + 1 }) })
     ] }, index);
   }) });
 };
@@ -8190,29 +8262,29 @@ var Header = ({ menu = [] }) => {
   const fullMenu = [
     {
       name: "Status",
-      render: () => /* @__PURE__ */ jsx26("div", { className: "px-2 py-1.5 text-xs font-medium tracking-wider text-slate-500 uppercase", children: workspaceStatus })
+      render: () => /* @__PURE__ */ jsx27("div", { className: "px-2 py-1.5 text-xs font-medium tracking-wider text-slate-500 uppercase", children: workspaceStatus })
     },
     ...menu
   ];
-  return /* @__PURE__ */ jsx26("div", { className: "border-b border-slate-200 px-4 py-3 dark:border-slate-800", children: /* @__PURE__ */ jsxs18("div", { className: "flex items-start justify-between gap-3", children: [
-    /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsx26("span", { className: "flex h-9 w-9 items-center justify-center rounded-xl bg-blue-600 text-white shadow-sm", children: /* @__PURE__ */ jsx26(MdOutlineSpaceDashboard, { className: "text-base" }) }),
-      /* @__PURE__ */ jsxs18("div", { className: "flex flex-col justify-center gap-0", children: [
-        /* @__PURE__ */ jsx26("h1", { className: "text-base leading-tight font-semibold text-slate-900 dark:text-slate-100", children: "Service Builder" }),
-        /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27("div", { className: "border-b border-slate-200 px-4 py-3 dark:border-slate-800", children: /* @__PURE__ */ jsxs19("div", { className: "flex items-start justify-between gap-3", children: [
+    /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx27("span", { className: "flex h-9 w-9 items-center justify-center rounded-xl bg-blue-600 text-white shadow-sm", children: /* @__PURE__ */ jsx27(MdOutlineSpaceDashboard, { className: "text-base" }) }),
+      /* @__PURE__ */ jsxs19("div", { className: "flex flex-col justify-center gap-0", children: [
+        /* @__PURE__ */ jsx27("h1", { className: "text-base leading-tight font-semibold text-slate-900 dark:text-slate-100", children: "Service Builder" }),
+        /* @__PURE__ */ jsx27(
           drafts_default,
           {
-            trigger: /* @__PURE__ */ jsxs18(
+            trigger: /* @__PURE__ */ jsxs19(
               "button",
               {
                 type: "button",
                 className: "inline-flex cursor-pointer items-center gap-1 rounded-md text-xs text-slate-500 transition hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200",
                 children: [
-                  /* @__PURE__ */ jsxs18("span", { children: [
+                  /* @__PURE__ */ jsxs19("span", { children: [
                     "Active branch - ",
-                    /* @__PURE__ */ jsx26("b", { children: currentBranch?.name ?? "Main branch" })
+                    /* @__PURE__ */ jsx27("b", { children: currentBranch?.name ?? "Main branch" })
                   ] }),
-                  /* @__PURE__ */ jsx26(BsChevronDown, {})
+                  /* @__PURE__ */ jsx27(BsChevronDown, {})
                 ]
               }
             )
@@ -8220,79 +8292,14 @@ var Header = ({ menu = [] }) => {
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs18(Popover, { children: [
-      /* @__PURE__ */ jsx26(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx26("span", { children: /* @__PURE__ */ jsx26(BuilderIconButton, { title: "Menu", children: /* @__PURE__ */ jsx26(MdMenuOpen, {}) }) }) }),
-      /* @__PURE__ */ jsx26(PopoverContent, { className: "w-56 p-2", align: "end", children: /* @__PURE__ */ jsx26(MenuRenderer, { items: fullMenu, workspace: ws }) })
+    /* @__PURE__ */ jsxs19(Popover, { children: [
+      /* @__PURE__ */ jsx27(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx27("span", { children: /* @__PURE__ */ jsx27(BuilderIconButton, { title: "Menu", children: /* @__PURE__ */ jsx27(MdMenuOpen, {}) }) }) }),
+      /* @__PURE__ */ jsx27(PopoverContent, { className: "w-56 p-2", align: "end", children: /* @__PURE__ */ jsx27(MenuRenderer, { items: fullMenu, workspace: ws }) })
     ] })
   ] }) });
 };
 var header_default = Header;
 
-// src/components/ui/scroll-area.tsx
-import "react";
-import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
-import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
-function ScrollArea({
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs19(
-    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(
-    ScrollAreaPrimitive.ScrollAreaScrollbar,
-    {
-      "data-slot": "scroll-area-scrollbar",
-      orientation,
-      className: cn(
-        "flex touch-none p-px transition-colors select-none",
-        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
-        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
-        className
-      ),
-      ...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";
-import { useWorkspace as useWorkspace8 } from "@timeax/digital-service-engine/workspace";
-import { useMemo as useMemo12, useState as useState13 } from "react";
-import { CiSearch } from "react-icons/ci";
-import { LuBox, LuShapes } from "react-icons/lu";
-
 // src/workspace/boot-status.tsx
 import { useEffect as useEffect11, useState as useState12 } from "react";
 import { FiAlertCircle as FiAlertCircle3, FiCheckCircle, FiLoader, FiRefreshCw, FiX as FiX3 } from "react-icons/fi";
@@ -8489,6 +8496,13 @@ function getStatusClassName(sectionState) {
 }
 
 // src/panels/left/assets/index.tsx
+import { useInputs } from "@timeax/digital-service-engine/react";
+import { useWorkspace as useWorkspace8 } from "@timeax/digital-service-engine/workspace";
+import { InputField as InputField4 } from "@timeax/form-palette";
+import { useCallback as useCallback9, useEffect as useEffect12, useMemo as useMemo12, useRef as useRef6, useState as useState13 } from "react";
+import { AiOutlineReload } from "react-icons/ai";
+import { CiSearch } from "react-icons/ci";
+import { LuBox, LuShapes } from "react-icons/lu";
 import { jsx as jsx29, 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(" ");
@@ -8497,6 +8511,14 @@ function AssetsPanel() {
   const ws = useWorkspace8();
   const { registry } = useInputs();
   const [query, setQuery] = useState13("");
+  const [menuTarget, setMenuTarget] = useState13(null);
+  const [actionTarget, setActionTarget] = useState13(null);
+  const [renameOpen, setRenameOpen] = useState13(false);
+  const [cloneOpen, setCloneOpen] = useState13(false);
+  const [deleteOpen, setDeleteOpen] = useState13(false);
+  const [templateName, setTemplateName] = useState13("");
+  const [saveToCurrentBranch, setSaveToCurrentBranch] = useState13(true);
+  const menuRef = useRef6(null);
   const normalizedBuiltins = useMemo12(() => {
     const items = [];
     for (const [kind, variants] of registry._store.entries()) {
@@ -8521,19 +8543,122 @@ function AssetsPanel() {
   const filteredTemplates = lower ? templates2.filter(
     (item) => item.name.toLowerCase().includes(lower) || String(item.kind ?? "").toLowerCase().includes(lower)
   ) : templates2;
+  const closeTemplateContextMenu = useCallback9(() => setMenuTarget(null), []);
+  const openTemplateContextMenu = useCallback9((item, clientX, clientY) => {
+    setMenuTarget({
+      id: item.id,
+      name: item.name,
+      clientX,
+      clientY
+    });
+  }, []);
+  useEffect12(() => {
+    if (!menuTarget) return;
+    const onPointerDown = (event) => {
+      const el = menuRef.current;
+      if (!el || el.contains(event.target)) return;
+      setMenuTarget(null);
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") setMenuTarget(null);
+    };
+    window.addEventListener("pointerdown", onPointerDown);
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.removeEventListener("pointerdown", onPointerDown);
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [menuTarget]);
+  const templateMenuAnchorStyle = useMemo12(() => {
+    if (!menuTarget || typeof window === "undefined") return null;
+    const width = 220;
+    const height = 164;
+    const padding = 12;
+    const left = Math.max(padding, Math.min(menuTarget.clientX, window.innerWidth - width - padding));
+    const top = Math.max(padding, Math.min(menuTarget.clientY, window.innerHeight - height - padding));
+    return { left, top };
+  }, [menuTarget]);
+  const applyBranchScope = useCallback9(() => {
+    if (saveToCurrentBranch) return ws.branches.currentId ?? void 0;
+    return null;
+  }, [saveToCurrentBranch, ws.branches.currentId]);
+  const refreshTemplates = useCallback9(async () => {
+    await ws.refresh.templates({ branchId: ws.branches.currentId ?? void 0 });
+  }, [ws]);
+  const openRenameDialog = useCallback9(() => {
+    if (!menuTarget) return;
+    setActionTarget({ id: menuTarget.id, name: menuTarget.name });
+    setTemplateName(menuTarget.name);
+    setSaveToCurrentBranch(true);
+    setRenameOpen(true);
+    closeTemplateContextMenu();
+  }, [closeTemplateContextMenu, menuTarget]);
+  const openCloneDialog = useCallback9(() => {
+    if (!menuTarget) return;
+    setActionTarget({ id: menuTarget.id, name: menuTarget.name });
+    setTemplateName(`Copy of ${menuTarget.name}`);
+    setSaveToCurrentBranch(true);
+    setCloneOpen(true);
+    closeTemplateContextMenu();
+  }, [closeTemplateContextMenu, menuTarget]);
+  const openDeleteDialog = useCallback9(() => {
+    if (!menuTarget) return;
+    setActionTarget({ id: menuTarget.id, name: menuTarget.name });
+    setDeleteOpen(true);
+    closeTemplateContextMenu();
+  }, [closeTemplateContextMenu, menuTarget]);
+  const handleRenameTemplate = useCallback9(async () => {
+    if (!actionTarget || !templateName.trim()) return;
+    const result = await ws.updateTemplate(actionTarget.id, {
+      name: templateName.trim(),
+      branchId: applyBranchScope()
+    });
+    if (!result.ok) return;
+    setRenameOpen(false);
+    setActionTarget(null);
+    await refreshTemplates();
+  }, [actionTarget, applyBranchScope, refreshTemplates, templateName, ws]);
+  const handleCloneTemplate = useCallback9(async () => {
+    if (!actionTarget || !templateName.trim()) return;
+    const result = await ws.cloneTemplate(
+      { id: actionTarget.id },
+      {
+        name: templateName.trim(),
+        branchId: applyBranchScope()
+      }
+    );
+    if (!result.ok) return;
+    setCloneOpen(false);
+    setActionTarget(null);
+    await refreshTemplates();
+  }, [actionTarget, applyBranchScope, refreshTemplates, templateName, ws]);
+  const handleDeleteTemplate = useCallback9(async () => {
+    if (!actionTarget) return;
+    const result = await ws.deleteTemplate(actionTarget.id);
+    if (!result.ok) return;
+    setDeleteOpen(false);
+    setActionTarget(null);
+    await refreshTemplates();
+  }, [actionTarget, refreshTemplates, ws]);
   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__ */ jsx29(CiSearch, { className: "pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-slate-400" }),
-      /* @__PURE__ */ jsx29(
-        "input",
-        {
-          value: query,
-          onChange: (event) => setQuery(event.target.value),
-          placeholder: "Search assets",
-          className: "w-full rounded-xl border border-slate-200 bg-slate-50 py-2.5 pr-3 pl-9 text-sm transition outline-none focus:border-blue-300 focus:bg-white dark:border-slate-700 dark:bg-slate-900 dark:focus:border-blue-500/40"
-        }
-      )
-    ] }),
+    /* @__PURE__ */ jsx29("label", { className: "relative", children: /* @__PURE__ */ jsx29(
+      InputField4,
+      {
+        value: query,
+        onChange: (event) => setQuery(event.value),
+        placeholder: "Search assets",
+        variant: "text",
+        icon: /* @__PURE__ */ jsx29(CiSearch, { className: "pointer-events-none text-slate-400" }),
+        trailingControl: /* @__PURE__ */ jsx29(
+          "span",
+          {
+            className: "px-2",
+            onClick: () => void ws.refresh.templates({ branchId: ws.branches.currentId ?? void 0, since: 0 }),
+            children: /* @__PURE__ */ jsx29(AiOutlineReload, {})
+          }
+        )
+      }
+    ) }),
     /* @__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: [
@@ -8587,7 +8712,25 @@ function AssetsPanel() {
               );
               event.dataTransfer.effectAllowed = "copy";
             },
-            className: "w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-left transition hover:border-slate-300 hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-950/50 dark:hover:border-slate-700",
+            onPointerDownCapture: (event) => {
+              const isSecondaryClick = event.button === 2 || event.button === 0 && event.ctrlKey;
+              if (!isSecondaryClick) return;
+              event.preventDefault();
+              event.stopPropagation();
+              openTemplateContextMenu(item, event.clientX, event.clientY);
+            },
+            onContextMenu: (event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              openTemplateContextMenu(item, event.clientX, event.clientY);
+            },
+            onAuxClick: (event) => {
+              if (event.button !== 2) return;
+              event.preventDefault();
+              event.stopPropagation();
+              openTemplateContextMenu(item, event.clientX, event.clientY);
+            },
+            className: "w-full *:pointer-events-none rounded-xl border border-slate-200 bg-white px-3 py-2 text-left transition hover:border-slate-300 hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-950/50 dark:hover:border-slate-700",
             children: [
               /* @__PURE__ */ jsx29("p", { className: "text-sm font-medium text-slate-900 dark:text-slate-100", children: item.name }),
               /* @__PURE__ */ jsx29("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: item?.definition?.mode === "group" ? "Group" : String(item?.definition?.type ?? item.kind ?? "template") })
@@ -8596,7 +8739,136 @@ function AssetsPanel() {
           item.id
         )) : /* @__PURE__ */ jsx29(EmptyState, { title: "No templates", description: "No saved templates matched your search.", className: "min-h-36" }) })
       ] })
-    ] })
+    ] }),
+    menuTarget && templateMenuAnchorStyle ? /* @__PURE__ */ jsxs21(
+      "div",
+      {
+        ref: menuRef,
+        className: "fixed z-40 min-w-52 rounded-xl border border-slate-200 bg-white p-1.5 shadow-2xl dark:border-slate-700 dark:bg-slate-950",
+        style: { left: templateMenuAnchorStyle.left, top: templateMenuAnchorStyle.top },
+        role: "menu",
+        children: [
+          /* @__PURE__ */ jsx29(
+            "button",
+            {
+              type: "button",
+              className: "w-full rounded-lg px-3 py-2 text-left text-sm text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-900",
+              onClick: openRenameDialog,
+              children: "Rename template"
+            }
+          ),
+          /* @__PURE__ */ jsx29(
+            "button",
+            {
+              type: "button",
+              className: "w-full rounded-lg px-3 py-2 text-left text-sm text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-900",
+              onClick: openCloneDialog,
+              children: "Clone template"
+            }
+          ),
+          /* @__PURE__ */ jsx29("div", { className: "my-1 h-px bg-slate-200 dark:bg-slate-800" }),
+          /* @__PURE__ */ jsx29(
+            "button",
+            {
+              type: "button",
+              className: "w-full rounded-lg px-3 py-2 text-left text-sm text-rose-600 hover:bg-rose-50 dark:text-rose-300 dark:hover:bg-rose-500/10",
+              onClick: openDeleteDialog,
+              children: "Delete template"
+            }
+          )
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ jsx29(
+      AlertDialog,
+      {
+        open: renameOpen,
+        onOpenChange: (open) => {
+          setRenameOpen(open);
+          if (!open) setActionTarget(null);
+        },
+        children: /* @__PURE__ */ jsxs21(AlertDialogContent, { children: [
+          /* @__PURE__ */ jsxs21(AlertDialogHeader, { children: [
+            /* @__PURE__ */ jsx29(AlertDialogTitle, { children: "Rename template" }),
+            /* @__PURE__ */ jsx29(AlertDialogDescription, { children: "Update template name and scope." })
+          ] }),
+          /* @__PURE__ */ jsxs21("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsx29(
+              InputField4,
+              {
+                variant: "text",
+                value: templateName,
+                onChange: (event) => setTemplateName(String(event.value ?? "")),
+                placeholder: "Template name"
+              }
+            ),
+            /* @__PURE__ */ jsxs21("label", { className: "flex items-center gap-2 text-sm", children: [
+              /* @__PURE__ */ jsx29("input", { type: "checkbox", checked: saveToCurrentBranch, onChange: (event) => setSaveToCurrentBranch(event.target.checked) }),
+              /* @__PURE__ */ jsx29("span", { children: "Save to current branch" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs21(AlertDialogFooter, { children: [
+            /* @__PURE__ */ jsx29(AlertDialogCancel, { type: "button", children: "Cancel" }),
+            /* @__PURE__ */ jsx29(AlertDialogAction, { type: "button", disabled: !templateName.trim(), onClick: () => void handleRenameTemplate(), children: "Save" })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx29(
+      AlertDialog,
+      {
+        open: cloneOpen,
+        onOpenChange: (open) => {
+          setCloneOpen(open);
+          if (!open) setActionTarget(null);
+        },
+        children: /* @__PURE__ */ jsxs21(AlertDialogContent, { children: [
+          /* @__PURE__ */ jsxs21(AlertDialogHeader, { children: [
+            /* @__PURE__ */ jsx29(AlertDialogTitle, { children: "Clone template" }),
+            /* @__PURE__ */ jsx29(AlertDialogDescription, { children: "Create a copy with a new name and scope." })
+          ] }),
+          /* @__PURE__ */ jsxs21("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsx29(
+              InputField4,
+              {
+                variant: "text",
+                value: templateName,
+                onChange: (event) => setTemplateName(String(event.value ?? "")),
+                placeholder: "Template name"
+              }
+            ),
+            /* @__PURE__ */ jsxs21("label", { className: "flex items-center gap-2 text-sm", children: [
+              /* @__PURE__ */ jsx29("input", { type: "checkbox", checked: saveToCurrentBranch, onChange: (event) => setSaveToCurrentBranch(event.target.checked) }),
+              /* @__PURE__ */ jsx29("span", { children: "Save to current branch" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs21(AlertDialogFooter, { children: [
+            /* @__PURE__ */ jsx29(AlertDialogCancel, { type: "button", children: "Cancel" }),
+            /* @__PURE__ */ jsx29(AlertDialogAction, { type: "button", disabled: !templateName.trim(), onClick: () => void handleCloneTemplate(), children: "Clone" })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx29(
+      AlertDialog,
+      {
+        open: deleteOpen,
+        onOpenChange: (open) => {
+          setDeleteOpen(open);
+          if (!open) setActionTarget(null);
+        },
+        children: /* @__PURE__ */ jsxs21(AlertDialogContent, { children: [
+          /* @__PURE__ */ jsxs21(AlertDialogHeader, { children: [
+            /* @__PURE__ */ jsx29(AlertDialogTitle, { children: "Delete template" }),
+            /* @__PURE__ */ jsx29(AlertDialogDescription, { children: "This action permanently removes the selected template." })
+          ] }),
+          /* @__PURE__ */ jsxs21(AlertDialogFooter, { children: [
+            /* @__PURE__ */ jsx29(AlertDialogCancel, { type: "button", children: "Cancel" }),
+            /* @__PURE__ */ jsx29(AlertDialogAction, { type: "button", className: "bg-rose-600 hover:bg-rose-700", onClick: () => void handleDeleteTemplate(), children: "Delete" })
+          ] })
+        ] })
+      }
+    )
   ] });
 }
 
@@ -10736,7 +11008,7 @@ Panel.displayName = "Panel";
 
 // src/panels/left/layers/index.tsx
 import { useCanvas as useCanvas5 } from "@timeax/digital-service-engine/workspace";
-import { useMemo as useMemo18, useRef as useRef10, useState as useState21 } from "react";
+import { useMemo as useMemo18, useRef as useRef11, useState as useState21 } from "react";
 import { BsXDiamondFill } from "react-icons/bs";
 import { CiSearch as CiSearch2 } from "react-icons/ci";
 import { LuTags as LuTags3 } from "react-icons/lu";
@@ -10824,10 +11096,10 @@ function filterTree(nodes, query) {
 var Layers = () => {
   const canvas = useCanvas5();
   const { openNodeContextMenu, canAcceptDropPayload, handleNodeDrop } = useNodeContextMenu();
-  const tagsRef = useRef10(null);
-  const fieldsRef = useRef10(null);
-  const tagSearchInputRef = useRef10(null);
-  const fieldSearchInputRef = useRef10(null);
+  const tagsRef = useRef11(null);
+  const fieldsRef = useRef11(null);
+  const tagSearchInputRef = useRef11(null);
+  const fieldSearchInputRef = useRef11(null);
   const [tagSearch, setTagSearch] = useState21("");
   const [fieldSearch, setFieldSearch] = useState21("");
   const [isTagSearchOpen, setIsTagSearchOpen] = useState21(false);
@@ -11494,7 +11766,7 @@ function CollapsibleContent2({
 }
 
 // src/panels/right/components/comments/comments.tsx
-import { InputField as InputField3 } from "@timeax/form-palette";
+import { InputField as InputField5 } from "@timeax/form-palette";
 import * as React29 from "react";
 import { createCache as createCache2, createIndexedDBDriver as createIndexedDBDriver2, createMemoryDriver as createMemoryDriver2 } from "@timeax/cache-store";
 import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
@@ -11595,7 +11867,7 @@ function ReplyInputRow({
   return /* @__PURE__ */ jsxs30("div", { className: cx("flex items-center gap-3", className), children: [
     /* @__PURE__ */ jsx45(PersonAvatar, { person: { name: you.name, avatar: you.avatar }, fallback: initials(you.name) }),
     /* @__PURE__ */ jsx45(
-      InputField3,
+      InputField5,
       {
         variant: "textarea",
         placeholder: "Add a reply...",
@@ -11669,7 +11941,7 @@ function ActiveDot() {
 
 // src/panels/right/tabs/comments.tsx
 import { useWorkspace as useWorkspace10 } from "@timeax/digital-service-engine/workspace";
-import { InputField as InputField4 } from "@timeax/form-palette";
+import { InputField as InputField6 } from "@timeax/form-palette";
 import { useMemo as useMemo22, useState as useState23 } from "react";
 import { MdOutlineSend } from "react-icons/md";
 import { jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
@@ -11719,7 +11991,7 @@ var Comments = () => {
       thread.id
     )) : /* @__PURE__ */ jsx46(EmptyState, { title: "No matching comments", description: "Try a broader search or add a new thread to the current branch.", className: "mt-4" }) }) }),
     /* @__PURE__ */ jsx46("div", { className: "border-t border-slate-200 px-4 py-3 dark:border-slate-800", children: /* @__PURE__ */ jsx46(
-      InputField4,
+      InputField6,
       {
         variant: "textarea",
         value,
@@ -12024,7 +12296,7 @@ function areServiceContextStatesEqual(left, right) {
 }
 
 // src/components/service-meta-popover.tsx
-import { useEffect as useEffect18, useMemo as useMemo24, useRef as useRef11, useState as useState25 } from "react";
+import { useEffect as useEffect19, useMemo as useMemo24, useRef as useRef12, useState as useState25 } from "react";
 import { FiInfo } from "react-icons/fi";
 
 // src/components/service-meta.ts
@@ -12064,8 +12336,8 @@ function ServiceMetaPopover({
 }) {
   const rows = useMemo24(() => flattenServiceMeta(meta), [meta]);
   const [open, setOpen] = useState25(false);
-  const openTimerRef = useRef11(null);
-  const closeTimerRef = useRef11(null);
+  const openTimerRef = useRef12(null);
+  const closeTimerRef = useRef12(null);
   const clearTimers = () => {
     if (openTimerRef.current != null) {
       window.clearTimeout(openTimerRef.current);
@@ -12076,7 +12348,7 @@ function ServiceMetaPopover({
       closeTimerRef.current = null;
     }
   };
-  useEffect18(() => () => clearTimers(), []);
+  useEffect19(() => () => clearTimers(), []);
   const scheduleOpen = () => {
     if (open) return;
     clearTimers();
@@ -12153,10 +12425,10 @@ function ServiceMetaPopover({
 }
 
 // src/hooks/use-service-catalog-state.ts
-import { useEffect as useEffect19, useState as useState26 } from "react";
+import { useEffect as useEffect20, useState as useState26 } from "react";
 function useServiceCatalogState(canvasApi, editor) {
   const [catalogState, setCatalogState] = useState26(null);
-  useEffect19(() => {
+  useEffect20(() => {
     const resolveCatalog = (catalog) => catalog ?? editor.getCatalog?.() ?? editor.ensureCatalog?.() ?? null;
     setCatalogState(resolveCatalog());
     const offCatalogChange = canvasApi.on("catalog:change", (payload) => {
@@ -12200,8 +12472,8 @@ 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 { useCallback as useCallback18, useEffect as useEffect20, useMemo as useMemo25, useRef as useRef12, useState as useState27 } from "react";
+import { InputField as InputField7 } from "@timeax/form-palette";
+import { useCallback as useCallback19, useEffect as useEffect21, useMemo as useMemo25, useRef as useRef13, useState as useState27 } from "react";
 import { BsPlus } from "react-icons/bs";
 import { FaFolderOpen } from "react-icons/fa";
 import { FiFilter } from "react-icons/fi";
@@ -12294,8 +12566,8 @@ function AddServicePopover({
   const [manualPrimaryRate, setManualPrimaryRate] = useState27("");
   const [primaryServiceId, setPrimaryServiceId] = useState27(null);
   const [compatibleIds, setCompatibleIds] = useState27(null);
-  const compatibleRequestRef = useRef12(0);
-  const compatibleCacheRef = useRef12(/* @__PURE__ */ new Map());
+  const compatibleRequestRef = useRef13(0);
+  const compatibleCacheRef = useRef13(/* @__PURE__ */ new Map());
   const catalogState = useServiceCatalogState(canvas.api, canvas.api.editor);
   const policies2 = ws.policies.policies.data ?? [];
   const policiesKey = useMemo25(() => JSON.stringify(policies2 ?? []), [policies2]);
@@ -12316,7 +12588,7 @@ function AddServicePopover({
     [preferredTagId, selectedButtons]
   );
   const [liveSnapshot, setLiveSnapshot] = useState27(() => createEmptyServiceContextSnapshot(liveSelectionContext, canvas.props));
-  useEffect20(() => {
+  useEffect21(() => {
     let active = true;
     const fallback = createEmptyServiceContextSnapshot(liveSelectionContext, canvas.props);
     setLiveSnapshot(fallback);
@@ -12357,7 +12629,7 @@ function AddServicePopover({
     if (rateContextSource === "manual") return parsedManualPrimaryRate != null;
     return Boolean(primaryServiceId);
   }, [parsedManualPrimaryRate, primaryServiceId, rateContextMode, rateContextSource]);
-  useEffect20(() => {
+  useEffect21(() => {
     if (primaryServiceId && contextServiceOptions.some((option) => option.value === primaryServiceId)) return;
     setPrimaryServiceId(contextServiceOptions[0]?.value ?? null);
   }, [contextServiceOptions, primaryServiceId]);
@@ -12389,7 +12661,7 @@ function AddServicePopover({
     }
     return new Set(selectedGroup.serviceIds.map((id) => String(id)));
   }, [catalogGroups, catalogMode, groupedServiceIds, selectedCatalogGroupId, services2]);
-  useEffect20(() => {
+  useEffect21(() => {
     const requestId = ++compatibleRequestRef.current;
     if (!contextFilterEnabled || !liveSnapshot.selectedTag) {
       setCompatibleIds(null);
@@ -12456,7 +12728,7 @@ function AddServicePopover({
     rateContextMode,
     rateContextSource
   ]);
-  const setCatalogMode = useCallback18(
+  const setCatalogMode = useCallback19(
     (mode) => {
       const editor = canvas.api.editor;
       editor.ensureCatalog?.();
@@ -12477,7 +12749,7 @@ function AddServicePopover({
       service
     }));
   }, [allowedCatalogIds, compatibleIds, services2, query]);
-  useEffect20(() => {
+  useEffect21(() => {
     if (selected && !options.some((option) => option.value === selected)) {
       setSelected("");
     }
@@ -12489,7 +12761,7 @@ function AddServicePopover({
     /* @__PURE__ */ jsx52(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx52(SectionActionTriggerButton, { icon: /* @__PURE__ */ jsx52(BsPlus, {}), children: "Add" }) }),
     /* @__PURE__ */ jsx52(PopoverContent, { className: "w-96", children: /* @__PURE__ */ jsxs34("div", { className: "flex flex-col gap-3", children: [
       /* @__PURE__ */ jsx52(
-        InputField5,
+        InputField7,
         {
           variant: "text",
           value: query,
@@ -12522,7 +12794,7 @@ function AddServicePopover({
                   /* @__PURE__ */ jsxs34("div", { className: "space-y-2 rounded-lg border border-slate-200 p-3 dark:border-slate-800", children: [
                     /* @__PURE__ */ jsx52("div", { className: "text-xs font-semibold tracking-[0.16em] text-slate-500 uppercase dark:text-slate-400", children: "Catalog scope" }),
                     /* @__PURE__ */ jsx52(
-                      InputField5,
+                      InputField7,
                       {
                         variant: "radio",
                         value: catalogMode,
@@ -12539,7 +12811,7 @@ function AddServicePopover({
                       }
                     ),
                     /* @__PURE__ */ jsx52(
-                      InputField5,
+                      InputField7,
                       {
                         variant: "treeselect",
                         placeholder: "Select group",
@@ -12583,7 +12855,7 @@ function AddServicePopover({
                   /* @__PURE__ */ jsxs34("div", { className: "space-y-2 rounded-lg border border-slate-200 p-3 dark:border-slate-800", children: [
                     /* @__PURE__ */ jsx52("div", { className: "text-xs font-semibold tracking-[0.16em] text-slate-500 uppercase dark:text-slate-400", children: "Rate compatibility" }),
                     /* @__PURE__ */ jsx52(
-                      InputField5,
+                      InputField7,
                       {
                         variant: "radio",
                         value: rateContextMode,
@@ -12605,7 +12877,7 @@ function AddServicePopover({
                     ),
                     rateContextMode === "custom_primary_rate" ? /* @__PURE__ */ jsxs34("div", { className: "space-y-2", children: [
                       /* @__PURE__ */ jsx52(
-                        InputField5,
+                        InputField7,
                         {
                           variant: "radio",
                           value: rateContextSource,
@@ -12626,7 +12898,7 @@ function AddServicePopover({
                         }
                       ),
                       rateContextSource === "service" ? /* @__PURE__ */ jsx52(
-                        InputField5,
+                        InputField7,
                         {
                           variant: "select",
                           label: "Primary context service",
@@ -12636,7 +12908,7 @@ function AddServicePopover({
                           placeholder: "Select service"
                         }
                       ) : /* @__PURE__ */ jsx52(
-                        InputField5,
+                        InputField7,
                         {
                           variant: "number",
                           label: "Primary rate",
@@ -12704,11 +12976,11 @@ 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 useCanvas13 } from "@timeax/digital-service-engine/workspace";
-import { InputField as InputField12 } from "@timeax/form-palette";
-import { useEffect as useEffect21, useMemo as useMemo31, useState as useState31 } from "react";
+import { InputField as InputField14 } from "@timeax/form-palette";
+import { useEffect as useEffect22, useMemo as useMemo31, useState as useState31 } from "react";
 
 // src/panels/right/partials/properties/components/descriptor-settings.tsx
-import { InputField as InputField6 } from "@timeax/form-palette";
+import { InputField as InputField8 } from "@timeax/form-palette";
 import { useMemo as useMemo26, useState as useState28 } from "react";
 
 // src/panels/right/partials/properties/components/meta.ts
@@ -12917,7 +13189,7 @@ function DescriptorPrimitiveField({ schema, value, hasOverride, onSet, onClear,
       return /* @__PURE__ */ jsxs35("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsx53(FieldDescription, { description: schema.description, canReset: hasOverride, onReset: () => onClear(path) }),
         /* @__PURE__ */ jsx53(
-          InputField6,
+          InputField8,
           {
             variant: options?.length ? "select" : "text",
             label: schema.label,
@@ -12940,7 +13212,7 @@ function DescriptorPrimitiveField({ schema, value, hasOverride, onSet, onClear,
       return /* @__PURE__ */ jsxs35("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsx53(FieldDescription, { description: schema.description, canReset: hasOverride, onReset: () => onClear(path) }),
         /* @__PURE__ */ jsx53(
-          InputField6,
+          InputField8,
           {
             variant: "text",
             label: schema.label,
@@ -12961,7 +13233,7 @@ function DescriptorPrimitiveField({ schema, value, hasOverride, onSet, onClear,
       return /* @__PURE__ */ jsxs35("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsx53(FieldDescription, { description: schema.description, canReset: hasOverride, onReset: () => onClear(path) }),
         /* @__PURE__ */ jsx53(
-          InputField6,
+          InputField8,
           {
             variant: "toggle",
             label: schema.label,
@@ -12979,7 +13251,7 @@ function DescriptorPrimitiveField({ schema, value, hasOverride, onSet, onClear,
       return /* @__PURE__ */ jsxs35("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsx53(FieldDescription, { description: schema.description, canReset: hasOverride, onReset: () => onClear(path) }),
         /* @__PURE__ */ jsx53(
-          InputField6,
+          InputField8,
           {
             variant: schema.multiple ? "multi-select" : "select",
             label: schema.label,
@@ -13073,7 +13345,7 @@ function DescriptorObjectField({ schema, value, hasOverride, onSet, onClear, pat
         return /* @__PURE__ */ jsxs35("div", { className: "space-y-3 rounded-lg border border-dashed border-slate-200 p-3 dark:border-slate-700", children: [
           /* @__PURE__ */ jsxs35("div", { className: "grid gap-3 md:grid-cols-[minmax(0,1fr)_180px_auto]", children: [
             /* @__PURE__ */ jsx53(
-              InputField6,
+              InputField8,
               {
                 variant: "text",
                 label: "Key",
@@ -13086,7 +13358,7 @@ function DescriptorObjectField({ schema, value, hasOverride, onSet, onClear, pat
               }
             ),
             shapeEntries.length > 1 ? /* @__PURE__ */ jsx53(
-              InputField6,
+              InputField8,
               {
                 variant: "select",
                 label: "Shape",
@@ -13139,7 +13411,7 @@ function DescriptorObjectField({ schema, value, hasOverride, onSet, onClear, pat
       }),
       schema.editable && shapeEntries.length ? /* @__PURE__ */ jsxs35("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__ */ jsx53(
-          InputField6,
+          InputField8,
           {
             variant: "text",
             label: "New key",
@@ -13149,7 +13421,7 @@ function DescriptorObjectField({ schema, value, hasOverride, onSet, onClear, pat
           }
         ),
         /* @__PURE__ */ jsx53(
-          InputField6,
+          InputField8,
           {
             variant: "select",
             label: "Shape",
@@ -13218,7 +13490,7 @@ function DescriptorArrayField({ schema, value, hasOverride, onSet, onClear, path
               index + 1
             ] }),
             !schema.item && shapeEntries.length > 1 ? /* @__PURE__ */ jsx53(
-              InputField6,
+              InputField8,
               {
                 variant: "select",
                 label: "Shape",
@@ -13272,7 +13544,7 @@ function DescriptorArrayField({ schema, value, hasOverride, onSet, onClear, path
           schema.label.toLowerCase()
         ] }),
         !schema.item && shapeEntries.length > 1 ? /* @__PURE__ */ jsx53(
-          InputField6,
+          InputField8,
           {
             variant: "select",
             label: "Shape",
@@ -13338,7 +13610,7 @@ function DescriptorSettings({ schema, defaults, onChange }) {
 
 // src/panels/right/partials/properties/components/order-kind-section.tsx
 import { useCanvas as useCanvas8 } from "@timeax/digital-service-engine/workspace";
-import { InputField as InputField7 } from "@timeax/form-palette";
+import { InputField as InputField9 } from "@timeax/form-palette";
 import { useMemo as useMemo27 } from "react";
 import { MdOutlineRemoveCircleOutline as MdOutlineRemoveCircleOutline2 } from "react-icons/md";
 import { jsx as jsx54, jsxs as jsxs36 } from "react/jsx-runtime";
@@ -13381,7 +13653,7 @@ function OrderKindSection({
       ] }),
       /* @__PURE__ */ jsxs36("div", { className: "space-y-3", children: [
         /* @__PURE__ */ jsx54(
-          InputField7,
+          InputField9,
           {
             variant: "select",
             disabled: !canEditSelect,
@@ -13416,7 +13688,7 @@ var order_kind_section_default = OrderKindSection;
 
 // src/panels/right/partials/properties/components/quantity-section.tsx
 import { useCanvas as useCanvas9 } from "@timeax/digital-service-engine/workspace";
-import { InputField as InputField8 } from "@timeax/form-palette";
+import { InputField as InputField10 } from "@timeax/form-palette";
 import { useMemo as useMemo28 } from "react";
 import { BsPatchPlus, BsPlus as BsPlus2 } from "react-icons/bs";
 import { MdDeleteOutline } from "react-icons/md";
@@ -13551,7 +13823,7 @@ function QuantitySection({ node }) {
           capabilities.quantity.ruleHelp ? /* @__PURE__ */ jsx55("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: capabilities.quantity.ruleHelp }) : null
         ] }),
         fieldRule?.valueBy === "eval" ? /* @__PURE__ */ jsx55(
-          InputField8,
+          InputField10,
           {
             variant: "textarea",
             label: "Eval code",
@@ -13562,7 +13834,7 @@ function QuantitySection({ node }) {
         ) : null,
         /* @__PURE__ */ jsxs37("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
           /* @__PURE__ */ jsx55(
-            InputField8,
+            InputField10,
             {
               variant: "text",
               label: "Multiply",
@@ -13572,7 +13844,7 @@ function QuantitySection({ node }) {
             }
           ),
           /* @__PURE__ */ jsx55(
-            InputField8,
+            InputField10,
             {
               variant: "text",
               label: "Fallback",
@@ -13582,7 +13854,7 @@ function QuantitySection({ node }) {
             }
           ),
           /* @__PURE__ */ jsx55(
-            InputField8,
+            InputField10,
             {
               variant: "text",
               label: "Clamp min",
@@ -13597,7 +13869,7 @@ function QuantitySection({ node }) {
             }
           ),
           /* @__PURE__ */ jsx55(
-            InputField8,
+            InputField10,
             {
               variant: "text",
               label: "Clamp max",
@@ -13615,7 +13887,7 @@ function QuantitySection({ node }) {
       ] }) : null,
       capabilities.quantity.canEditDefault ? hasQuantityDefault ? /* @__PURE__ */ jsxs37("div", { className: "space-y-2 rounded-xl border border-slate-200 p-3 dark:border-slate-800", children: [
         /* @__PURE__ */ jsx55(
-          InputField8,
+          InputField10,
           {
             variant: "text",
             label: "Quantity default",
@@ -13628,7 +13900,7 @@ function QuantitySection({ node }) {
       ] }) : null : null
     ] }) : hasQuantityDefault ? /* @__PURE__ */ jsxs37("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsx55(
-        InputField8,
+        InputField10,
         {
           variant: "text",
           label: "Quantity default",
@@ -13645,7 +13917,7 @@ var quantity_section_default = QuantitySection;
 
 // src/panels/right/partials/properties/components/utility-section.tsx
 import { useCanvas as useCanvas10 } from "@timeax/digital-service-engine/workspace";
-import { InputField as InputField9 } from "@timeax/form-palette";
+import { InputField as InputField11 } from "@timeax/form-palette";
 import { BsPencil, BsPlus as BsPlus3 } from "react-icons/bs";
 import { MdDeleteOutline as MdDeleteOutline2 } from "react-icons/md";
 import { Fragment as Fragment9, jsx as jsx56, jsxs as jsxs38 } from "react/jsx-runtime";
@@ -13741,7 +14013,7 @@ function UtilitySection({ node }) {
       hasStoredUtility && !isActiveUtility ? /* @__PURE__ */ jsx56("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__ */ jsxs38(Fragment9, { children: [
         /* @__PURE__ */ jsx56(
-          InputField9,
+          InputField11,
           {
             variant: "text",
             label: "Rate",
@@ -13751,7 +14023,7 @@ function UtilitySection({ node }) {
           }
         ),
         /* @__PURE__ */ jsx56(
-          InputField9,
+          InputField11,
           {
             variant: "select",
             label: "Mode",
@@ -13768,7 +14040,7 @@ function UtilitySection({ node }) {
           }
         ),
         (resolvedUtility.mode ?? "flat") === "per_value" ? /* @__PURE__ */ jsx56(
-          InputField9,
+          InputField11,
           {
             variant: "select",
             label: "Value source",
@@ -13781,7 +14053,7 @@ function UtilitySection({ node }) {
           }
         ) : null,
         (resolvedUtility.mode ?? "flat") === "percent" ? /* @__PURE__ */ jsx56(
-          InputField9,
+          InputField11,
           {
             variant: "select",
             label: "Percent base",
@@ -13797,7 +14069,7 @@ function UtilitySection({ node }) {
           }
         ) : null,
         /* @__PURE__ */ jsx56(
-          InputField9,
+          InputField11,
           {
             variant: "text",
             label: "Label",
@@ -13814,7 +14086,7 @@ var utility_section_default = UtilitySection;
 
 // src/panels/right/partials/properties/components/validation-section.tsx
 import { useCanvas as useCanvas11 } from "@timeax/digital-service-engine/workspace";
-import { InputField as InputField10 } from "@timeax/form-palette";
+import { InputField as InputField12 } from "@timeax/form-palette";
 import { useMemo as useMemo29 } from "react";
 import { BsPlus as BsPlus4 } from "react-icons/bs";
 import { MdDeleteOutline as MdDeleteOutline3 } from "react-icons/md";
@@ -13893,7 +14165,7 @@ function TypedScalarEditor({
   const scalarType = inferScalarType(value);
   return /* @__PURE__ */ jsx57("div", { className: "space-y-3 rounded-lg border border-slate-200/80 p-3 dark:border-slate-800", children: /* @__PURE__ */ jsxs39("div", { className: "grid gap-3 md:grid-cols-[160px_minmax(0,1fr)]", children: [
     /* @__PURE__ */ jsx57(
-      InputField10,
+      InputField12,
       {
         variant: "select",
         label: `${label} type`,
@@ -13907,7 +14179,7 @@ function TypedScalarEditor({
       }
     ),
     scalarType === "boolean" ? /* @__PURE__ */ jsx57(
-      InputField10,
+      InputField12,
       {
         variant: "toggle",
         label,
@@ -13915,7 +14187,7 @@ function TypedScalarEditor({
         onChange: (event) => onChange(Boolean(event.value))
       }
     ) : /* @__PURE__ */ jsx57(
-      InputField10,
+      InputField12,
       {
         variant: "text",
         label,
@@ -14003,7 +14275,7 @@ function ValidationRuleCard({
     ] }),
     /* @__PURE__ */ jsxs39("div", { className: "grid gap-3 md:grid-cols-2", children: [
       /* @__PURE__ */ jsx57(
-        InputField10,
+        InputField12,
         {
           variant: "select",
           label: "Operation",
@@ -14018,7 +14290,7 @@ function ValidationRuleCard({
         }
       ),
       /* @__PURE__ */ jsx57(
-        InputField10,
+        InputField12,
         {
           variant: "select",
           label: "Value source",
@@ -14034,7 +14306,7 @@ function ValidationRuleCard({
       )
     ] }),
     /* @__PURE__ */ jsx57(
-      InputField10,
+      InputField12,
       {
         variant: "text",
         label: "Message",
@@ -14063,7 +14335,7 @@ function ValidationRuleCard({
     ) : null,
     rule.op === "between" ? /* @__PURE__ */ jsxs39("div", { className: "grid gap-3 md:grid-cols-2", children: [
       /* @__PURE__ */ jsx57(
-        InputField10,
+        InputField12,
         {
           variant: "text",
           label: "Minimum",
@@ -14078,7 +14350,7 @@ function ValidationRuleCard({
         }
       ),
       /* @__PURE__ */ jsx57(
-        InputField10,
+        InputField12,
         {
           variant: "text",
           label: "Maximum",
@@ -14107,7 +14379,7 @@ function ValidationRuleCard({
     ) : null,
     rule.op === "match" ? /* @__PURE__ */ jsxs39("div", { className: "grid gap-3 md:grid-cols-2", children: [
       /* @__PURE__ */ jsx57(
-        InputField10,
+        InputField12,
         {
           variant: "text",
           label: "Pattern",
@@ -14122,7 +14394,7 @@ function ValidationRuleCard({
         }
       ),
       /* @__PURE__ */ jsx57(
-        InputField10,
+        InputField12,
         {
           variant: "text",
           label: "Flags",
@@ -14138,7 +14410,7 @@ function ValidationRuleCard({
       )
     ] }) : null,
     valueBy === "eval" ? /* @__PURE__ */ jsx57(
-      InputField10,
+      InputField12,
       {
         variant: "textarea",
         label: "Eval code",
@@ -14223,7 +14495,7 @@ import { keyBy } from "lodash";
 import { useMemo as useMemo30, useState as useState30 } from "react";
 
 // src/panels/right/partials/properties/components/AddIncludesPopover.tsx
-import { InputField as InputField11 } from "@timeax/form-palette";
+import { InputField as InputField13 } from "@timeax/form-palette";
 import { useState as useState29 } from "react";
 import { BsPlus as BsPlus5 } from "react-icons/bs";
 import { jsx as jsx58, jsxs as jsxs40 } from "react/jsx-runtime";
@@ -14233,7 +14505,7 @@ function AddIncludesPopover({ open, onOpenChange, onSelect, options }) {
     /* @__PURE__ */ jsx58(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx58(SectionActionTriggerButton, { icon: /* @__PURE__ */ jsx58(BsPlus5, {}), children: "Add" }) }),
     /* @__PURE__ */ jsx58(PopoverContent, { children: /* @__PURE__ */ jsxs40("div", { className: "flex flex-col gap-2", children: [
       /* @__PURE__ */ jsx58(
-        InputField11,
+        InputField13,
         {
           value,
           onChange: (e) => {
@@ -14376,13 +14648,13 @@ function FieldProperties({ className, node, kinds, defaultKind }) {
   const descriptor = useMemo31(() => resolveInputDescriptor(registry, currentType, currentVariant), [currentType, currentVariant, registry]);
   const descriptorUi = descriptor?.ui ?? {};
   const descriptorKeySet = useMemo31(() => new Set(getDescriptorUiKeys(descriptorUi)), [descriptorUi]);
-  useEffect21(() => {
+  useEffect22(() => {
     setNameDraft(nameValue);
   }, [node.id, nameValue]);
-  useEffect21(() => {
+  useEffect22(() => {
     setPlaceholderDraft(placeholderValue);
   }, [node.id, placeholderValue]);
-  useEffect21(() => {
+  useEffect22(() => {
     setHelpTextDraft(helpTextValue);
   }, [node.id, helpTextValue]);
   const fieldTypeOptions = useMemo31(() => {
@@ -14447,7 +14719,7 @@ function FieldProperties({ className, node, kinds, defaultKind }) {
         /* @__PURE__ */ jsx60("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__ */ jsxs42("div", { className: "space-y-3", children: [
           /* @__PURE__ */ jsx60(
-            InputField12,
+            InputField14,
             {
               variant: "text",
               label: "Name",
@@ -14458,7 +14730,7 @@ function FieldProperties({ className, node, kinds, defaultKind }) {
             }
           ),
           /* @__PURE__ */ jsx60(
-            InputField12,
+            InputField14,
             {
               variant: "select",
               label: "Type",
@@ -14468,7 +14740,7 @@ function FieldProperties({ className, node, kinds, defaultKind }) {
             }
           ),
           canEditVariant ? /* @__PURE__ */ jsx60(
-            InputField12,
+            InputField14,
             {
               variant: "select",
               label: "Input variant",
@@ -14478,7 +14750,7 @@ function FieldProperties({ className, node, kinds, defaultKind }) {
             }
           ) : null,
           /* @__PURE__ */ jsx60(
-            InputField12,
+            InputField14,
             {
               variant: "toggle",
               label: "Required",
@@ -14487,7 +14759,7 @@ function FieldProperties({ className, node, kinds, defaultKind }) {
             }
           ),
           /* @__PURE__ */ jsx60(
-            InputField12,
+            InputField14,
             {
               variant: "toggle",
               label: "Button mode",
@@ -14497,7 +14769,7 @@ function FieldProperties({ className, node, kinds, defaultKind }) {
             }
           ),
           options.length ? /* @__PURE__ */ jsx60(
-            InputField12,
+            InputField14,
             {
               variant: "toggle",
               label: "Is multiple",
@@ -14532,7 +14804,7 @@ function FieldProperties({ className, node, kinds, defaultKind }) {
         /* @__PURE__ */ jsx60("p", { className: "mb-3 text-xs text-slate-500 dark:text-slate-400", children: "Preview-oriented defaults passed to the form palette." }),
         /* @__PURE__ */ jsxs42("div", { className: "space-y-3", children: [
           /* @__PURE__ */ jsx60(
-            InputField12,
+            InputField14,
             {
               variant: "text",
               label: "Placeholder",
@@ -14542,7 +14814,7 @@ function FieldProperties({ className, node, kinds, defaultKind }) {
             }
           ),
           /* @__PURE__ */ jsx60(
-            InputField12,
+            InputField14,
             {
               variant: "textarea",
               label: "Help text",
@@ -14634,7 +14906,7 @@ var field_properties_default = FieldProperties;
 
 // src/panels/right/partials/properties/option-properties.tsx
 import { useCanvas as useCanvas14 } from "@timeax/digital-service-engine/workspace";
-import { InputField as InputField13 } from "@timeax/form-palette";
+import { InputField as InputField15 } from "@timeax/form-palette";
 import { jsx as jsx61, jsxs as jsxs43 } from "react/jsx-runtime";
 function OptionProperties({ className, node, kinds, defaultKind }) {
   const canvas = useCanvas14();
@@ -14648,7 +14920,7 @@ function OptionProperties({ className, node, kinds, defaultKind }) {
         /* @__PURE__ */ jsx61("p", { className: "mb-3 text-xs text-slate-500 dark:text-slate-400", children: "Edit the currently focused option node." }),
         /* @__PURE__ */ jsxs43("div", { className: "space-y-3", children: [
           /* @__PURE__ */ jsx61(
-            InputField13,
+            InputField15,
             {
               variant: "text",
               label: "Label",
@@ -14660,7 +14932,7 @@ function OptionProperties({ className, node, kinds, defaultKind }) {
             }
           ),
           /* @__PURE__ */ jsx61(
-            InputField13,
+            InputField15,
             {
               variant: "text",
               label: "Value",
@@ -14718,13 +14990,13 @@ import "@timeax/digital-service-engine/core";
 // src/panels/right/partials/properties/tag/TagConstraintsSection.tsx
 import "@timeax/digital-service-engine/core";
 import { useCanvas as useCanvas15 } from "@timeax/digital-service-engine/workspace";
-import { InputField as InputField15 } from "@timeax/form-palette";
+import { InputField as InputField17 } from "@timeax/form-palette";
 import { ArrowUpRight } from "lucide-react";
 import { useMemo as useMemo32, useState as useState32 } from "react";
 import { TiDelete } from "react-icons/ti";
 
 // src/panels/right/partials/properties/tag/AddConstraintsPopover.tsx
-import { Form, InputField as InputField14 } from "@timeax/form-palette";
+import { Form, InputField as InputField16 } from "@timeax/form-palette";
 import "react";
 import { BsPlus as BsPlus6 } from "react-icons/bs";
 import { jsx as jsx62, jsxs as jsxs44 } from "react/jsx-runtime";
@@ -14742,7 +15014,7 @@ function AddConstraintsPopover({ open, onOpenChange, constraints, allConstraints
         },
         children: [
           /* @__PURE__ */ jsx62(
-            InputField14,
+            InputField16,
             {
               name: "constraints",
               variant: "checkbox",
@@ -14906,7 +15178,7 @@ function TagConstraintsSection({ node }) {
       }
       const value = constraints2?.[constraint];
       return /* @__PURE__ */ jsx65(
-        InputField15,
+        InputField17,
         {
           labelPlacement: "left",
           tags,
@@ -14964,7 +15236,7 @@ function TagProperties({ node, kinds, defaultKind }) {
 
 // src/panels/right/tabs/properties.tsx
 import { useCanvas as useCanvas16, useWorkspace as useWorkspace12 } from "@timeax/digital-service-engine/workspace";
-import { InputField as InputField16 } from "@timeax/form-palette";
+import { InputField as InputField18 } from "@timeax/form-palette";
 import { useMemo as useMemo33, useState as useState33 } from "react";
 import { AiOutlineLoading3Quarters } from "react-icons/ai";
 import { MdOutlineContentCopy } from "react-icons/md";
@@ -15001,7 +15273,7 @@ var Properties = ({ kinds = [], defaultKind = "" }) => {
         ] }),
         /* @__PURE__ */ jsxs49("div", { className: "mt-3 space-y-3", children: [
           /* @__PURE__ */ jsx69(
-            InputField16,
+            InputField18,
             {
               variant: "text",
               label: /* @__PURE__ */ jsx69(FieldLabel, { children: "Label" }),
@@ -15013,7 +15285,7 @@ var Properties = ({ kinds = [], defaultKind = "" }) => {
             }
           ),
           /* @__PURE__ */ jsx69(
-            InputField16,
+            InputField18,
             {
               variant: "text",
               label: /* @__PURE__ */ jsx69(FieldLabel, { children: "ID" }),
@@ -15196,7 +15468,7 @@ var wireframe_tags_widget_default = WireframeTagsWidget;
 // src/panels/right/tabs/wireframe.tsx
 import { useOrderFlow, Wrapper } from "@timeax/digital-service-engine/react";
 import { useCanvas as useCanvas17, useWorkspace as useWorkspace13 } from "@timeax/digital-service-engine/workspace";
-import { useCallback as useCallback19, useMemo as useMemo34, useState as useState34 } from "react";
+import { useCallback as useCallback20, useMemo as useMemo34, useState as useState34 } from "react";
 import { BsChevronDown as BsChevronDown2 } from "react-icons/bs";
 import { jsx as jsx71, jsxs as jsxs51 } from "react/jsx-runtime";
 var CHECKBOX_SINGLE_EXTRA_PROPS = Object.freeze({ single: true });
@@ -15271,7 +15543,7 @@ function Wireframe({ kinds: _kinds = [], defaultKind: _defaultKind = "" }) {
       };
     });
   }, [flow.services, ws.services.data]);
-  const renderPillDetails = useCallback19(
+  const renderPillDetails = useCallback20(
     (kind) => {
       if (kind === "services") {
         return /* @__PURE__ */ jsxs51("div", { className: "space-y-2", children: [
@@ -15380,14 +15652,14 @@ function Wireframe({ kinds: _kinds = [], defaultKind: _defaultKind = "" }) {
     }
     return map;
   }, [canvas.props, canvas.selectionInfo, canvas.activeId]);
-  const select = useCallback19(
+  const select = useCallback20(
     (id) => {
       canvas.setActive(id);
       canvas.api.select([id]);
     },
     [canvas.api, canvas.setActive]
   );
-  return /* @__PURE__ */ jsxs51("div", { className: "flex h-full min-h-0 flex-col", children: [
+  return /* @__PURE__ */ jsxs51("div", { className: "flex h-full min-h-0 flex-col flex-1 w-full", children: [
     /* @__PURE__ */ jsx71("div", { className: "min-h-0 flex-1 overflow-auto p-4", children: /* @__PURE__ */ jsx71("div", { className: "mx-auto max-w-md", children: /* @__PURE__ */ jsxs51("div", { className: "flex flex-col gap-4", children: [
       /* @__PURE__ */ jsx71(WorkspaceBootInlineNotice, { boot: ws.boot, sections: ["snapshotBody", "policies"] }),
       /* @__PURE__ */ jsx71(
@@ -15548,7 +15820,15 @@ var RightPanel = ({ onShare, onPlay, kinds = [], defaultKind = "" }) => {
           ] }),
           /* @__PURE__ */ jsx72(TabsContent, { className: "grow overflow-hidden", value: "comments", children: /* @__PURE__ */ jsx72(comments_default, {}) }),
           /* @__PURE__ */ jsx72(TabsContent, { className: "min-h-0 grow overflow-hidden", value: "properties", children: /* @__PURE__ */ jsx72(Properties, { kinds, defaultKind }) }),
-          /* @__PURE__ */ jsx72(TabsContent, { className: "min-h-0 grow overflow-hidden", value: "wireframe", forceMount: true, children: /* @__PURE__ */ jsx72(OrderFlowProvider, { serviceProps: props, builder: api.builder, selection: api.selection, registry, children: /* @__PURE__ */ jsx72(wireframe_default, { kinds, defaultKind }) }) })
+          /* @__PURE__ */ jsx72(
+            TabsContent,
+            {
+              className: "[&_form]:grow-col flex min-h-0 grow flex-col overflow-hidden [&_form]:flex [&_form]:h-full [&_form]:overflow-hidden",
+              value: "wireframe",
+              forceMount: true,
+              children: /* @__PURE__ */ jsx72(OrderFlowProvider, { serviceProps: props, builder: api.builder, selection: api.selection, registry, children: /* @__PURE__ */ jsx72(wireframe_default, { kinds, defaultKind }) })
+            }
+          )
         ] })
       ] })
     }
@@ -15853,13 +16133,13 @@ function FallbackEditorHeader({
 // src/workspace/fallback-editor/fallback-registrations-panel.tsx
 import { useActiveFallbackRegistrations as useActiveFallbackRegistrations3, useEligibleServiceList as useEligibleServiceList2, useFallbackEditor as useFallbackEditor3 } from "@timeax/digital-service-engine/react";
 import { Plus, Trash2, X as X2 } from "lucide-react";
-import { useCallback as useCallback20, useState as useState36 } from "react";
+import { useCallback as useCallback21, useState as useState36 } from "react";
 
 // src/workspace/fallback-editor/fallback-dialogs.tsx
-import { InputField as InputField17 } from "@timeax/form-palette";
+import { InputField as InputField19 } from "@timeax/form-palette";
 import { useActiveFallbackRegistrations as useActiveFallbackRegistrations2, useEligibleServiceList, useFallbackEditor as useFallbackEditor2 } from "@timeax/digital-service-engine/react";
 import { Check, Search } from "lucide-react";
-import { useEffect as useEffect22, useMemo as useMemo36, useState as useState35 } from "react";
+import { useEffect as useEffect23, useMemo as useMemo36, useState as useState35 } from "react";
 import { jsx as jsx77, jsxs as jsxs56 } from "react/jsx-runtime";
 function FallbackAddRegistrationDialog({
   open,
@@ -15875,7 +16155,7 @@ function FallbackAddRegistrationDialog({
     if (serviceProps) return "props";
     return "none";
   }, [snapshot, serviceProps]);
-  useEffect22(() => {
+  useEffect23(() => {
     if (open) {
       setScope("global");
       setNodeId("");
@@ -15933,12 +16213,12 @@ function FallbackAddRegistrationDialog({
     }
     return [];
   }, [activeServiceId, mode, serviceProps, snapshot]);
-  useEffect22(() => {
+  useEffect23(() => {
     if (hasGlobal && scope === "global") {
       setScope("node");
     }
   }, [hasGlobal, scope]);
-  useEffect22(() => {
+  useEffect23(() => {
     if (!nodeId) return;
     if (nodeTargets.some((entry) => entry.id === nodeId)) return;
     setNodeId("");
@@ -15981,7 +16261,7 @@ function FallbackAddRegistrationDialog({
         /* @__PURE__ */ jsxs56("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsx77("label", { className: "text-sm font-medium text-slate-900 dark:text-slate-100", children: "Scope" }),
           /* @__PURE__ */ jsx77(
-            InputField17,
+            InputField19,
             {
               variant: "radio",
               label: "Scope",
@@ -15998,7 +16278,7 @@ function FallbackAddRegistrationDialog({
         scope === "node" ? /* @__PURE__ */ jsxs56("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsx77("label", { className: "text-sm font-medium text-slate-900 dark:text-slate-100", children: "Node id" }),
           /* @__PURE__ */ jsx77(
-            InputField17,
+            InputField19,
             {
               variant: "select",
               label: "Node id",
@@ -16032,7 +16312,7 @@ function FallbackAddCandidatesDialog({
   const [filterEligibleOnly, setFilterEligibleOnly] = useState35(true);
   const [selected, setSelected] = useState35(/* @__PURE__ */ new Set());
   const [submitting, setSubmitting] = useState35(false);
-  useEffect22(() => {
+  useEffect23(() => {
     if (!open) {
       setQuery("");
       setFilterEligibleOnly(true);
@@ -16093,7 +16373,7 @@ function FallbackAddCandidatesDialog({
       children: /* @__PURE__ */ jsxs56("div", { className: "space-y-4", children: [
         /* @__PURE__ */ jsxs56("div", { className: "grid gap-3 md:grid-cols-[minmax(0,1fr)_220px]", children: [
           /* @__PURE__ */ jsx77(
-            InputField17,
+            InputField19,
             {
               variant: "text",
               label: "Search eligible services",
@@ -16107,7 +16387,7 @@ function FallbackAddCandidatesDialog({
             }
           ),
           /* @__PURE__ */ jsx77("div", { className: "rounded-md border border-slate-200 bg-slate-50/70 px-4 py-3 dark:border-slate-800 dark:bg-slate-900/70", children: /* @__PURE__ */ jsx77(
-            InputField17,
+            InputField19,
             {
               variant: "toggle",
               label: "Filter eligible only",
@@ -16267,7 +16547,7 @@ function FallbackRegistrationsPanel() {
   const [candidateContext, setCandidateContext] = useState36(null);
   const [candidatePrimaryId, setCandidatePrimaryId] = useState36(void 0);
   const [registrationDialogOpen, setRegistrationDialogOpen] = useState36(false);
-  const openCandidatePicker = useCallback20((context, primaryId) => {
+  const openCandidatePicker = useCallback21((context, primaryId) => {
     setCandidateContext(context);
     setCandidatePrimaryId(primaryId);
     setCandidatePickerOpen(true);
@@ -16393,7 +16673,7 @@ function FallbackRegistrationsPanel() {
 
 // src/workspace/fallback-editor/fallback-service-sidebar.tsx
 import { useFallbackEditor as useFallbackEditor4, usePrimaryServiceList as usePrimaryServiceList2 } from "@timeax/digital-service-engine/react";
-import { InputField as InputField18 } from "@timeax/form-palette";
+import { InputField as InputField20 } from "@timeax/form-palette";
 import { Search as Search2 } from "lucide-react";
 import { useMemo as useMemo37, useState as useState37 } from "react";
 import { jsx as jsx79, jsxs as jsxs58 } from "react/jsx-runtime";
@@ -16412,7 +16692,7 @@ function FallbackServiceSidebar() {
     /* @__PURE__ */ jsxs58("div", { className: "border-b border-slate-200 px-4 py-4 dark:border-slate-800 space-y-2", children: [
       /* @__PURE__ */ jsx79(SectionHeader2, { title: "Primary services", description: "Choose the primary service whose fallback registrations you want to edit." }),
       /* @__PURE__ */ jsx79(
-        InputField18,
+        InputField20,
         {
           variant: "text",
           value: query,
@@ -16459,15 +16739,15 @@ function FallbackServiceSidebar() {
 
 // src/workspace/fallback-editor/fallback-settings-panel.tsx
 import { useFallbackEditor as useFallbackEditor5 } from "@timeax/digital-service-engine/react";
-import { InputField as InputField19 } from "@timeax/form-palette";
-import { useEffect as useEffect23, useState as useState38 } from "react";
+import { InputField as InputField21 } from "@timeax/form-palette";
+import { useEffect as useEffect24, useState as useState38 } from "react";
 import { jsx as jsx80, jsxs as jsxs59 } from "react/jsx-runtime";
 function FallbackSettingsPanel() {
   const { settings, saveSettings, settingsSaving } = useFallbackEditor5();
   const [draft, setDraft] = useState38(settings);
   const [error, setError] = useState38(null);
   const [saved, setSaved] = useState38(false);
-  useEffect23(() => {
+  useEffect24(() => {
     setDraft(settings);
     setSaved(false);
     setError(null);
@@ -16501,7 +16781,7 @@ function FallbackSettingsPanel() {
     ) }),
     /* @__PURE__ */ jsx80(ScrollArea, { className: "min-h-0 flex-1 p-5", "data-testid": "fallback-editor-settings-scroll", children: /* @__PURE__ */ jsxs59("div", { className: "space-y-5", children: [
       /* @__PURE__ */ jsx80(SettingRow, { title: "Require constraint fit", hint: "Reject or warn when a candidate does not match effective tag constraints.", children: /* @__PURE__ */ jsx80(
-        InputField19,
+        InputField21,
         {
           variant: "toggle",
           value: Boolean(draft.requireConstraintFit),
@@ -16514,7 +16794,7 @@ function FallbackSettingsPanel() {
         }
       ) }),
       /* @__PURE__ */ jsx80(SettingRow, { title: "Rate policy", hint: "Controls how fallback service rates are compared against the primary service.", children: /* @__PURE__ */ jsx80("div", { className: "flex flex-col gap-2 md:items-end", children: /* @__PURE__ */ jsx80(
-        InputField19,
+        InputField21,
         {
           variant: "select",
           value: ratePolicy.kind,
@@ -16545,7 +16825,7 @@ function FallbackSettingsPanel() {
         }
       ) }) }),
       ratePolicy.kind !== "eq_primary" ? /* @__PURE__ */ jsx80(SettingRow, { title: "Rate Percentage", hint: "Rate percentage the policy is guarded by", children: /* @__PURE__ */ jsx80("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx80("div", { className: "w-32", children: /* @__PURE__ */ jsx80(
-        InputField19,
+        InputField21,
         {
           variant: "number",
           value: ratePolicy.pct,
@@ -16564,7 +16844,7 @@ function FallbackSettingsPanel() {
         }
       ) }) }) }) : null,
       /* @__PURE__ */ jsx80(SettingRow, { title: "Selection strategy", hint: "How valid fallback candidates are ordered in previews.", children: /* @__PURE__ */ jsx80(
-        InputField19,
+        InputField21,
         {
           variant: "select",
           label: "Selection strategy",
@@ -16581,7 +16861,7 @@ function FallbackSettingsPanel() {
         }
       ) }),
       /* @__PURE__ */ jsx80(SettingRow, { title: "Mode", hint: "Use strict for enforced filtering, dev for advisory feedback.", children: /* @__PURE__ */ jsx80(
-        InputField19,
+        InputField21,
         {
           variant: "select",
           label: "Mode",
@@ -16718,7 +16998,7 @@ function NativeFallbackEditorInner({ className }) {
 // src/workspace/fallback-editor-modal.tsx
 import { useCanvas as useCanvas19, useWorkspace as useWorkspace14 } from "@timeax/digital-service-engine/workspace";
 import cloneDeep4 from "lodash/cloneDeep";
-import { createContext as createContext4, useCallback as useCallback21, useContext as useContext4, useEffect as useEffect24, useMemo as useMemo39, useState as useState39 } from "react";
+import { createContext as createContext4, useCallback as useCallback22, useContext as useContext4, useEffect as useEffect25, useMemo as useMemo39, useState as useState39 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 import { FiX as FiX4 } from "react-icons/fi";
 import { jsx as jsx82, jsxs as jsxs61 } from "react/jsx-runtime";
@@ -16737,11 +17017,11 @@ function FallbackEditorModalProvider({ children }) {
   const [launch, setLaunch] = useState39(null);
   const [sessionId, setSessionId] = useState39(0);
   const [surfaceError, setSurfaceError] = useState39(null);
-  const close = useCallback21(() => {
+  const close = useCallback22(() => {
     setLaunch(null);
     setSurfaceError(null);
   }, []);
-  const openForNode = useCallback21((input) => {
+  const openForNode = useCallback22((input) => {
     setSurfaceError(null);
     setSessionId((current) => current + 1);
     setLaunch({
@@ -16752,7 +17032,7 @@ function FallbackEditorModalProvider({ children }) {
       nodeLabel: input.nodeLabel ?? input.nodeId
     });
   }, []);
-  const openForService = useCallback21((input) => {
+  const openForService = useCallback22((input) => {
     setSurfaceError(null);
     setSessionId((current) => current + 1);
     setLaunch({
@@ -16761,7 +17041,7 @@ function FallbackEditorModalProvider({ children }) {
       serviceName: input.serviceName
     });
   }, []);
-  const persistProps = useCallback21(
+  const persistProps = useCallback22(
     (label, mutate) => {
       const editorAny = canvas.api.editor;
       if (typeof editorAny.transact !== "function" || typeof editorAny.replaceProps !== "function") {
@@ -16775,7 +17055,7 @@ function FallbackEditorModalProvider({ children }) {
     },
     [canvas.api.builder, canvas.api.editor, canvas.props]
   );
-  const handleSave = useCallback21(
+  const handleSave = useCallback22(
     async (nextFallbacks) => {
       setSurfaceError(null);
       try {
@@ -16792,7 +17072,7 @@ function FallbackEditorModalProvider({ children }) {
     },
     [close, persistProps]
   );
-  const handleSettingsChange = useCallback21(
+  const handleSettingsChange = useCallback22(
     async (nextSettings) => {
       setSurfaceError(null);
       try {
@@ -16827,7 +17107,7 @@ function FallbackEditorModalProvider({ children }) {
     () => canvas.props?.fallbackSettings ?? {},
     [canvas.props]
   );
-  useEffect24(() => {
+  useEffect25(() => {
     if (!launch) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") close();
@@ -16899,7 +17179,7 @@ function useFallbackEditorModal() {
 
 // src/workspace/bottom-panel/index.tsx
 import { useCanvas as useCanvas22, useWorkspace as useWorkspace15 } from "@timeax/digital-service-engine/workspace";
-import { useCallback as useCallback22, useEffect as useEffect27, useMemo as useMemo41, useRef as useRef14, useState as useState42 } from "react";
+import { useCallback as useCallback23, useEffect as useEffect28, useMemo as useMemo41, useRef as useRef15, useState as useState42 } from "react";
 import { FiEye as FiEye3, FiEyeOff as FiEyeOff2, FiSearch, FiTerminal as FiTerminal2, FiX as FiX6 } from "react-icons/fi";
 import { LuGripHorizontal, LuLayers3 } from "react-icons/lu";
 import { MdOutlineSync } from "react-icons/md";
@@ -17353,8 +17633,8 @@ function LogCard({ row, onRemove }) {
 }
 
 // src/workspace/bottom-panel/service-picker-dialog.tsx
-import { InputField as InputField20 } from "@timeax/form-palette";
-import { useEffect as useEffect25, useMemo as useMemo40, useRef as useRef13, useState as useState40 } from "react";
+import { InputField as InputField22 } from "@timeax/form-palette";
+import { useEffect as useEffect26, useMemo as useMemo40, useRef as useRef14, useState as useState40 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
 
 // src/workspace/bottom-panel/service-picker.ts
@@ -17485,13 +17765,13 @@ function ServicePickerDialog({
 }) {
   const [filters, setFilters] = useState40(() => createDefaultServicePickerFilters());
   const [selectedIds, setSelectedIds] = useState40(/* @__PURE__ */ new Set());
-  const selectAllRef = useRef13(null);
-  useEffect25(() => {
+  const selectAllRef = useRef14(null);
+  useEffect26(() => {
     if (!open) return;
     setFilters(createDefaultServicePickerFilters());
     setSelectedIds(/* @__PURE__ */ new Set());
   }, [open]);
-  useEffect25(() => {
+  useEffect26(() => {
     if (!open) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") onOpenChange(false);
@@ -17524,7 +17804,7 @@ function ServicePickerDialog({
   const partiallyFilteredSelected = filteredSelectedCount > 0 && filteredSelectedCount < filteredServiceIds.length;
   const selectedCount = selectedIds.size;
   const canConfirm = selectedCount > 0;
-  useEffect25(() => {
+  useEffect26(() => {
     if (!selectAllRef.current) return;
     selectAllRef.current.indeterminate = partiallyFilteredSelected;
   }, [partiallyFilteredSelected]);
@@ -17548,7 +17828,7 @@ function ServicePickerDialog({
           /* @__PURE__ */ jsxs63("div", { className: "grid h-full min-h-0 flex-1 overflow-hidden md:grid-cols-[18rem_minmax(0,1fr)]", children: [
             /* @__PURE__ */ jsx85("div", { className: "min-h-0 border-r border-slate-200 dark:border-slate-800", children: /* @__PURE__ */ jsx85(ScrollArea, { className: "h-full min-h-0", children: /* @__PURE__ */ jsxs63("div", { className: "space-y-4 p-4", children: [
               /* @__PURE__ */ jsx85(FilterField, { label: "Search", children: /* @__PURE__ */ jsx85(
-                InputField20,
+                InputField22,
                 {
                   variant: "text",
                   label: "Picker search",
@@ -17559,7 +17839,7 @@ function ServicePickerDialog({
                 }
               ) }),
               /* @__PURE__ */ jsx85(FilterField, { label: "Category", children: /* @__PURE__ */ jsx85(
-                InputField20,
+                InputField22,
                 {
                   variant: "select",
                   label: "Category filter",
@@ -17570,7 +17850,7 @@ function ServicePickerDialog({
                 }
               ) }),
               /* @__PURE__ */ jsx85(FilterField, { label: "Flag", children: /* @__PURE__ */ jsx85(
-                InputField20,
+                InputField22,
                 {
                   variant: "select",
                   label: "Flag filter",
@@ -17581,7 +17861,7 @@ function ServicePickerDialog({
                 }
               ) }),
               /* @__PURE__ */ jsx85(FilterField, { label: "Activity", children: /* @__PURE__ */ jsx85(
-                InputField20,
+                InputField22,
                 {
                   variant: "select",
                   label: "Activity filter",
@@ -17599,7 +17879,7 @@ function ServicePickerDialog({
               ) }),
               /* @__PURE__ */ jsxs63("div", { className: "grid grid-cols-2 gap-2", children: [
                 /* @__PURE__ */ jsx85(FilterField, { label: "Min rate", children: /* @__PURE__ */ jsx85(
-                  InputField20,
+                  InputField22,
                   {
                     variant: "number",
                     label: "Minimum rate filter",
@@ -17610,7 +17890,7 @@ function ServicePickerDialog({
                   }
                 ) }),
                 /* @__PURE__ */ jsx85(FilterField, { label: "Max rate", children: /* @__PURE__ */ jsx85(
-                  InputField20,
+                  InputField22,
                   {
                     variant: "number",
                     label: "Maximum rate filter",
@@ -17623,7 +17903,7 @@ function ServicePickerDialog({
               ] }),
               /* @__PURE__ */ jsx85(FilterField, { label: "Name keyword", children: /* @__PURE__ */ jsxs63("div", { className: "space-y-2", children: [
                 /* @__PURE__ */ jsx85(
-                  InputField20,
+                  InputField22,
                   {
                     variant: "select",
                     label: "Keyword mode",
@@ -17639,7 +17919,7 @@ function ServicePickerDialog({
                   }
                 ),
                 /* @__PURE__ */ jsx85(
-                  InputField20,
+                  InputField22,
                   {
                     variant: "text",
                     label: "Keyword filter",
@@ -17651,7 +17931,7 @@ function ServicePickerDialog({
                 )
               ] }) }),
               /* @__PURE__ */ jsx85(FilterField, { label: "Meta key", children: /* @__PURE__ */ jsx85(
-                InputField20,
+                InputField22,
                 {
                   variant: "select",
                   label: "Meta key filter",
@@ -17666,7 +17946,7 @@ function ServicePickerDialog({
                 }
               ) }),
               /* @__PURE__ */ jsx85(FilterField, { label: "Meta value", children: /* @__PURE__ */ jsx85(
-                InputField20,
+                InputField22,
                 {
                   variant: "select",
                   label: "Meta value filter",
@@ -17837,8 +18117,8 @@ function toPickerSelectOptions(values) {
 }
 
 // src/workspace/bottom-panel/services-split-pane.tsx
-import { InputField as InputField21 } from "@timeax/form-palette";
-import { useEffect as useEffect26, useState as useState41 } from "react";
+import { InputField as InputField23 } from "@timeax/form-palette";
+import { useEffect as useEffect27, useState as useState41 } 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";
 
@@ -18186,7 +18466,7 @@ function CatalogContextPopover({
             /* @__PURE__ */ jsxs65("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__ */ jsx87("div", { className: "text-xs font-semibold tracking-[0.16em] text-slate-500 uppercase dark:text-slate-400", children: "Rate compatibility mode" }),
               /* @__PURE__ */ jsx87(
-                InputField21,
+                InputField23,
                 {
                   variant: "radio",
                   value: rateContextMode,
@@ -18208,7 +18488,7 @@ function CatalogContextPopover({
               ),
               rateContextMode === "custom_primary_rate" ? /* @__PURE__ */ jsxs65("div", { className: "space-y-2 rounded-xl border border-slate-200 bg-white p-2 dark:border-slate-700 dark:bg-slate-950/40", children: [
                 /* @__PURE__ */ jsx87(
-                  InputField21,
+                  InputField23,
                   {
                     variant: "radio",
                     value: rateContextSource,
@@ -18221,7 +18501,7 @@ function CatalogContextPopover({
                   }
                 ),
                 rateContextSource === "service" ? /* @__PURE__ */ jsx87(
-                  InputField21,
+                  InputField23,
                   {
                     variant: "select",
                     label: "Primary context service",
@@ -18231,7 +18511,7 @@ function CatalogContextPopover({
                     placeholder: "Select service"
                   }
                 ) : /* @__PURE__ */ jsx87(
-                  InputField21,
+                  InputField23,
                   {
                     variant: "number",
                     label: "Primary rate",
@@ -18422,7 +18702,7 @@ function CatalogToolbar({
       /* @__PURE__ */ jsx87(ToolbarIconButton, { label: "Assign services to selected group", disabled: !selectedGroupId, onClick: onAssignServices, children: /* @__PURE__ */ jsx87(FiPlus2, {}) })
     ] }),
     /* @__PURE__ */ jsx87(
-      InputField21,
+      InputField23,
       {
         variant: "treeselect",
         mode: "button",
@@ -18453,7 +18733,7 @@ function GroupInputPopoverButton({
 }) {
   const [open, setOpen] = useState41(false);
   const [value, setValue] = useState41(initialValue);
-  useEffect26(() => {
+  useEffect27(() => {
     if (open) setValue(initialValue);
   }, [initialValue, open]);
   return /* @__PURE__ */ jsxs65(Popover, { open, onOpenChange: setOpen, children: [
@@ -18477,7 +18757,7 @@ function GroupInputPopoverButton({
         /* @__PURE__ */ jsx87("p", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: "Names are editor-side catalog labels only." })
       ] }),
       /* @__PURE__ */ jsx87(
-        InputField21,
+        InputField23,
         {
           variant: "text",
           label: title,
@@ -18638,15 +18918,15 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
     logs: { minimized: false, closed: false },
     notices: { minimized: false, closed: false }
   });
-  const lastHighlightedIdsRef = useRef14([]);
-  const panelContainerRef = useRef14(null);
-  const panelRef = useRef14(null);
-  const searchInputRef = useRef14(null);
-  const dragStartRef = useRef14(null);
-  const appliedSnapshotRequestRef = useRef14(0);
-  const draftSnapshotRequestRef = useRef14(0);
-  const allChecksByIdRequestRef = useRef14(0);
-  const allChecksCacheRef = useRef14(/* @__PURE__ */ new Map());
+  const lastHighlightedIdsRef = useRef15([]);
+  const panelContainerRef = useRef15(null);
+  const panelRef = useRef15(null);
+  const searchInputRef = useRef15(null);
+  const dragStartRef = useRef15(null);
+  const appliedSnapshotRequestRef = useRef15(0);
+  const draftSnapshotRequestRef = useRef15(0);
+  const allChecksByIdRequestRef = useRef15(0);
+  const allChecksCacheRef = useRef15(/* @__PURE__ */ new Map());
   const selectedButtons = useMemo41(
     () => (canvas.api.selection.selectedButtons?.() ?? []).map((value) => String(value)),
     [canvas.api.selection, canvas.selectionInfo.ids, canvas.selectionInfo.optionIds]
@@ -18663,7 +18943,7 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
   const effectiveCatalogContext = contextLinked ? liveSelectionContext : catalogContextDraft;
   const [appliedSnapshot, setAppliedSnapshot] = useState42(() => createEmptyServiceContextSnapshot(effectiveCatalogContext, canvas.props));
   const [draftSnapshot, setDraftSnapshot] = useState42(() => createEmptyServiceContextSnapshot(catalogContextDraft, canvas.props));
-  useEffect27(() => {
+  useEffect28(() => {
     const requestId = ++appliedSnapshotRequestRef.current;
     const fallback = createEmptyServiceContextSnapshot(effectiveCatalogContext, canvas.props);
     setAppliedSnapshot(fallback);
@@ -18675,7 +18955,7 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
       setAppliedSnapshot(fallback);
     });
   }, [canvas.props, effectiveCatalogContext, servicesMap]);
-  useEffect27(() => {
+  useEffect28(() => {
     const requestId = ++draftSnapshotRequestRef.current;
     const fallback = createEmptyServiceContextSnapshot(catalogContextDraft, canvas.props);
     setDraftSnapshot(fallback);
@@ -18710,11 +18990,11 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
     if (rateContextSource === "manual") return parsedManualPrimaryRate != null;
     return Boolean(primaryServiceId);
   }, [parsedManualPrimaryRate, primaryServiceId, rateContextMode, rateContextSource]);
-  useEffect27(() => {
+  useEffect28(() => {
     if (primaryServiceId && contextServiceOptions.some((option) => option.value === primaryServiceId)) return;
     setPrimaryServiceId(contextServiceOptions[0]?.value ?? null);
   }, [contextServiceOptions, primaryServiceId]);
-  useEffect27(() => {
+  useEffect28(() => {
     const requestId = ++allChecksByIdRequestRef.current;
     if (!appliedSnapshot.selectedTag) {
       setAllChecksById(/* @__PURE__ */ new Map());
@@ -18805,18 +19085,18 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
       servicesMap
     ]
   );
-  useEffect27(() => {
+  useEffect28(() => {
     const next = createDefaultServiceContext(canvas.props, preferredTagId);
     setCatalogContextDraft((current) => {
       if (contextLinked) return current;
       return current.selectedTagId ? current : next;
     });
   }, [canvas.props, contextLinked, preferredTagId]);
-  useEffect27(() => {
+  useEffect28(() => {
     if (!contextLinked) return;
     setCatalogContextDraft(liveSelectionContext);
   }, [contextLinked, liveSelectionContext]);
-  useEffect27(() => {
+  useEffect28(() => {
     if (contextLinked) return;
     const next = sanitizeServiceContext(draftSnapshot, catalogContextDraft);
     if (!areServiceContextStatesEqual(next, catalogContextDraft)) {
@@ -18852,24 +19132,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;
-  useEffect27(() => {
+  useEffect28(() => {
     setSelectedActiveServiceId((current) => ensureSelectedRow(current, activeRows));
   }, [activeRows]);
-  useEffect27(() => {
+  useEffect28(() => {
     if (catalogState?.selectedServiceId == null) return;
     setSelectedAllServiceId(String(catalogState.selectedServiceId));
   }, [catalogState?.selectedServiceId]);
-  useEffect27(() => {
+  useEffect28(() => {
     setSelectedAllServiceId((current) => ensureSelectedRow(current, visibleAllRows));
   }, [visibleAllRows]);
-  useEffect27(() => {
+  useEffect28(() => {
     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]);
-  useEffect27(() => {
+  useEffect28(() => {
     return () => {
       if (lastHighlightedIdsRef.current.length) {
         canvas.api.setHighlighted([]);
@@ -18877,10 +19157,10 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
       }
     };
   }, [canvas.api]);
-  useEffect27(() => {
+  useEffect28(() => {
     if (searchOpen) searchInputRef.current?.focus();
   }, [searchOpen]);
-  useEffect27(() => {
+  useEffect28(() => {
     setPanelPosition((current) => {
       const resolved = resolvePanelPosition(current, panelRef.current, panelContainerRef.current);
       persistPanelPosition(resolved);
@@ -18902,7 +19182,7 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
     }
     event.preventDefault();
   };
-  useEffect27(() => {
+  useEffect28(() => {
     if (!draggingPanel) return;
     const onPointerMove = (event) => {
       const start = dragStartRef.current;
@@ -18930,7 +19210,7 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
       window.removeEventListener("pointercancel", onPointerUp);
     };
   }, [draggingPanel, panelPosition]);
-  const setCatalogMode = useCallback22(
+  const setCatalogMode = useCallback23(
     (mode) => {
       const editor = canvas.api.editor;
       editor.ensureCatalog?.();
@@ -18938,27 +19218,27 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
     },
     [canvas.api.editor]
   );
-  const handleSelectCatalogService = useCallback22(
+  const handleSelectCatalogService = useCallback23(
     (id) => {
       setSelectedAllServiceId(id);
       canvas.api.editor.setSelectedCatalogService?.(id ?? void 0);
     },
     [canvas.api.editor]
   );
-  const handleSelectCatalogGroup = useCallback22(
+  const handleSelectCatalogGroup = useCallback23(
     (groupId) => {
       canvas.api.editor.setActiveCatalogNode?.(groupId ?? void 0);
     },
     [canvas.api.editor]
   );
-  const handleCreateRootGroup = useCallback22(
+  const handleCreateRootGroup = useCallback23(
     (label) => {
       if (!label.trim()) return;
       canvas.api.editor.createCatalogGroup?.({ label: label.trim() });
     },
     [canvas.api.editor]
   );
-  const handleCreateChildGroup = useCallback22(
+  const handleCreateChildGroup = useCallback23(
     (label) => {
       if (!selectedCatalogGroupId) return;
       const editor = canvas.api.editor;
@@ -18967,7 +19247,7 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
     },
     [canvas.api.editor, selectedCatalogGroupId]
   );
-  const handleRenameGroup = useCallback22(
+  const handleRenameGroup = useCallback23(
     (label) => {
       if (!selectedCatalogGroupId) return;
       const group = catalogGroups.find((item) => item.id === selectedCatalogGroupId);
@@ -18977,15 +19257,15 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
     },
     [canvas.api.editor, catalogGroups, selectedCatalogGroupId]
   );
-  const handleDeleteGroup = useCallback22(() => {
+  const handleDeleteGroup = useCallback23(() => {
     if (!selectedCatalogGroupId) return;
     canvas.api.editor.removeCatalogNode?.(selectedCatalogGroupId, { cascade: true });
   }, [canvas.api.editor, selectedCatalogGroupId]);
-  const handleAssignServices = useCallback22(() => {
+  const handleAssignServices = useCallback23(() => {
     if (!selectedCatalogGroupId) return;
     setServicePickerOpen(true);
   }, [selectedCatalogGroupId]);
-  const handleConfirmAssignServices = useCallback22(
+  const handleConfirmAssignServices = useCallback23(
     (serviceIds) => {
       if (!selectedCatalogGroupId || !serviceIds.length) return;
       canvas.api.editor.assignServicesToCatalogGroup?.(selectedCatalogGroupId, serviceIds, "append");
@@ -58702,10 +58982,29 @@ var workspaceBackend = {
   },
   templates: {
     ...baseBackend.templates,
+    list: async (params) => {
+      const listResult = await baseBackend.templates.list(params);
+      console.log(listResult, "this is the list result from the base backend");
+      if (!listResult.ok) return listResult;
+      const branchId = params.branchId;
+      if (!branchId) return listResult;
+      const merged = listResult.value.filter((template) => template.branchId == null || template.branchId === branchId);
+      return { ok: true, value: merged };
+    },
+    refresh: async (params) => {
+      console.log("this is being refreshed...", params, await baseBackend.templates.list(params));
+      const refreshResult = await baseBackend.templates.refresh(params);
+      if (!refreshResult.ok) return refreshResult;
+      const branchId = params.branchId;
+      if (!branchId) return refreshResult;
+      const merged = refreshResult.value.filter((template) => template.branchId == null || template.branchId === branchId);
+      return { ok: true, value: merged };
+    },
     create: async (workspaceId, input) => {
-      const check = await authorize("template-write", input.branchId);
+      const branchId = input.branchId ?? void 0;
+      const check = await authorize("template-write", branchId);
       if (!check.ok) return check;
-      return baseBackend.templates.create(workspaceId, input);
+      return baseBackend.templates.create(workspaceId, { ...input, branchId });
     },
     update: async (id, patch) => {
       const check = await authorize("template-write", patch.branchId ?? void 0);
@@ -58713,9 +59012,10 @@ var workspaceBackend = {
       return baseBackend.templates.update(id, patch);
     },
     clone: async (source, options) => {
-      const check = await authorize("template-write", options?.branchId);
+      const branchId = options?.branchId ?? void 0;
+      const check = await authorize("template-write", branchId);
       if (!check.ok) return check;
-      return baseBackend.templates.clone(source, options);
+      return baseBackend.templates.clone(source, { ...options, branchId });
     },
     publish: async (id) => {
       const check = await authorize("template-write", void 0);
@@ -58729,6 +59029,7 @@ var workspaceBackend = {
     },
     delete: async (id) => {
       const check = await authorize("template-write", void 0);
+      console.log("This is a delete action...");
       if (!check.ok) return check;
       return baseBackend.templates.delete(id);
     }