@timeax/service-builder 0.0.6 → 0.0.8

package/dist/index.js

@@ -2934,11 +2934,6 @@ function deriveCanvasPresentation(args) {
   };
 }
 
-// src/panels/canvas/index.tsx
-import { useCanvas as useCanvas4, useWorkspace as useWorkspace5 } from "@timeax/digital-service-engine/workspace";
-import { useEffect as useEffect8, useMemo as useMemo8, useRef as useRef5, useState as useState8 } from "react";
-import { FiAlertCircle as FiAlertCircle3 } from "react-icons/fi";
-
 // src/workspace/boot.ts
 var WORKSPACE_BOOT_SECTIONS = [
   "authors",
@@ -2992,7 +2987,7 @@ function getBootSectionTone(sectionState) {
 }
 function getWorkspaceBootHeadline(boot) {
   if (boot.isReady && boot.hasPartialFailure) return "Workspace loaded with issues";
-  if (boot.isReady) return "Workspace ready";
+  if (boot.isReady) return "ready";
   if (boot.hasErrors && !boot.isBooting) return "Workspace load needs attention";
   if (boot.isSeededView) return "Syncing live workspace data";
   return "Loading workspace";
@@ -3029,6 +3024,11 @@ function getActiveBootSections(boot) {
   return WORKSPACE_BOOT_SECTIONS.filter((section) => boot.sections[section].status === "loading");
 }
 
+// src/panels/canvas/index.tsx
+import { useCanvas as useCanvas4, useWorkspace as useWorkspace5 } from "@timeax/digital-service-engine/workspace";
+import { useEffect as useEffect8, useMemo as useMemo8, useRef as useRef5, useState as useState8 } from "react";
+import { FiAlertCircle as FiAlertCircle3 } from "react-icons/fi";
+
 // src/panels/canvas/app-toolbar.tsx
 import { FiAlertCircle, FiEye, FiEyeOff, FiSave, FiTerminal } from "react-icons/fi";
 import { LuGitCommitHorizontal, LuHistory, LuRedo2, LuUndo2 } from "react-icons/lu";
@@ -5043,16 +5043,20 @@ function CanvasPanel({
       offGraph();
     };
   }, [canvas.api]);
+  function setSnapshot(event) {
+    const nextSnapshot = event?.snapshot;
+    if (!nextSnapshot) return;
+    const nextHash = hashSnapshot(nextSnapshot);
+    setCurrentSnapshotHash((current) => current === nextHash ? current : nextHash);
+    if (nextHash !== lastSyncedSnapshotHashRef.current) {
+      lastSyncedSnapshotHashRef.current = nextHash;
+      ws.snapshot.set(() => nextSnapshot);
+    }
+  }
   useEffect8(() => {
+    const catalogChange = canvas.api.on("catalog:change", setSnapshot);
     const offEditorChange = canvas.api.on("editor:change", (event) => {
-      const nextSnapshot = event?.snapshot;
-      if (!nextSnapshot) return;
-      const nextHash = hashSnapshot(nextSnapshot);
-      setCurrentSnapshotHash((current) => current === nextHash ? current : nextHash);
-      if (nextHash !== lastSyncedSnapshotHashRef.current) {
-        lastSyncedSnapshotHashRef.current = nextHash;
-        ws.snapshot.set(() => nextSnapshot);
-      }
+      setSnapshot(event);
       if (event?.reason === "mutation" || event?.reason === "transaction") {
         setHistoryState({ canUndo: true, canRedo: false });
       }
@@ -5077,11 +5081,12 @@ function CanvasPanel({
       offEditorChange?.();
       offUndo?.();
       offRedo?.();
+      catalogChange?.();
     };
   }, [canvas.api, ws.snapshot]);
   const hasChanges = currentSnapshotHash !== persistedBaselineHash;
-  const canSave = hasChanges || !!ws.snapshot.draft;
-  const canPublish = hasChanges || !!ws.snapshot.draft;
+  const canSave = hasChanges;
+  const canPublish = !!ws.snapshot.draft && !hasChanges;
   const bootActionReason = getBootActionReason(ws.boot);
   const failedBlockingSections = getFailedBlockingSections(ws.boot);
   const resolvedCurrentTagId = useMemo8(() => {
@@ -6590,19 +6595,61 @@ var drafts_default = Drafts;
 
 // src/panels/left/components/header.tsx
 import { useWorkspace as useWorkspace7 } from "@timeax/digital-service-engine/workspace";
-import { GoChevronDown } from "react-icons/go";
+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 jsxs19 } from "react/jsx-runtime";
-var Header = () => {
+var MenuRenderer = ({ items, 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) => {
+    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__ */ jsxs19("li", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxs19(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            if (hasChildren) {
+              toggleSubmenu(item.name);
+            } else if (item.command) {
+              item.command();
+            }
+          },
+          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" }) })
+          ]
+        }
+      ),
+      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, depth: depth + 1 }) })
+    ] }, index);
+  }) });
+};
+var Header = ({ menu = [] }) => {
   const ws = useWorkspace7();
   const currentBranch = ws.branches.data?.find((branch) => branch.id === ws.branches.currentId);
   const workspaceStatus = getWorkspaceBootHeadline(ws.boot);
+  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 })
+    },
+    ...menu
+  ];
   return /* @__PURE__ */ jsx26("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__ */ 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__ */ jsxs19("div", { children: [
-        /* @__PURE__ */ jsx26("div", { className: "text-[10px] uppercase tracking-[0.24em] text-slate-400 dark:text-slate-500", children: "Workspace" }),
-        /* @__PURE__ */ jsx26("h1", { className: "text-base font-semibold text-slate-900 dark:text-slate-100", children: "Service Builder" }),
+      /* @__PURE__ */ jsxs19("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(
           drafts_default,
           {
@@ -6610,14 +6657,13 @@ var Header = () => {
               "button",
               {
                 type: "button",
-                className: "mt-0.5 inline-flex items-center gap-1 rounded-md px-1 text-xs text-slate-500 transition hover:bg-slate-100 hover:text-slate-700 dark:text-slate-400 dark:hover:bg-slate-900 dark:hover:text-slate-200",
+                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__ */ jsxs19("span", { children: [
-                    currentBranch?.name ?? "Main branch",
-                    " \xB7 ",
-                    workspaceStatus
+                    "Active branch - ",
+                    /* @__PURE__ */ jsx26("b", { children: currentBranch?.name ?? "Main branch" })
                   ] }),
-                  /* @__PURE__ */ jsx26(GoChevronDown, { className: "text-sm" })
+                  /* @__PURE__ */ jsx26(BsChevronDown, {})
                 ]
               }
             )
@@ -6625,7 +6671,10 @@ var Header = () => {
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx26(BuilderIconButton, { title: "Collapse left panel", children: /* @__PURE__ */ jsx26(MdMenuOpen, {}) })
+    /* @__PURE__ */ jsxs19(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 }) })
+    ] })
   ] }) });
 };
 var header_default = Header;
@@ -6691,7 +6740,7 @@ function ScrollBar({
 // 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 useMemo11, useState as useState11 } from "react";
+import { useMemo as useMemo11, useState as useState12 } from "react";
 import { CiSearch } from "react-icons/ci";
 import { LuBox, LuShapes } from "react-icons/lu";
 import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
@@ -6701,7 +6750,7 @@ function toTitle(value) {
 function AssetsPanel() {
   const ws = useWorkspace8();
   const { registry } = useInputs();
-  const [query, setQuery] = useState11("");
+  const [query, setQuery] = useState12("");
   const normalizedBuiltins = useMemo11(() => {
     const items = [];
     for (const [kind, variants] of registry._store.entries()) {
@@ -8931,7 +8980,7 @@ Panel.displayName = "Panel";
 
 // src/panels/left/layers/index.tsx
 import { useCanvas as useCanvas5 } from "@timeax/digital-service-engine/workspace";
-import { useMemo as useMemo17, useRef as useRef10, useState as useState19 } from "react";
+import { useMemo as useMemo17, useRef as useRef10, useState as useState20 } from "react";
 import { BsXDiamondFill } from "react-icons/bs";
 import { CiSearch as CiSearch2 } from "react-icons/ci";
 import { LuTags as LuTags3 } from "react-icons/lu";
@@ -8961,10 +9010,10 @@ var Layers = () => {
   const fieldsRef = useRef10(null);
   const tagSearchInputRef = useRef10(null);
   const fieldSearchInputRef = useRef10(null);
-  const [tagSearch, setTagSearch] = useState19("");
-  const [fieldSearch, setFieldSearch] = useState19("");
-  const [isTagSearchOpen, setIsTagSearchOpen] = useState19(false);
-  const [isFieldSearchOpen, setIsFieldSearchOpen] = useState19(false);
+  const [tagSearch, setTagSearch] = useState20("");
+  const [fieldSearch, setFieldSearch] = useState20("");
+  const [isTagSearchOpen, setIsTagSearchOpen] = useState20(false);
+  const [isFieldSearchOpen, setIsFieldSearchOpen] = useState20(false);
   const handleSelection = (ids, meta) => {
     if (meta?.via === "api") return;
     const primary = ids[0];
@@ -8992,6 +9041,10 @@ var Layers = () => {
       detail.preventDefault();
       canvas.api.editor.editLabel(detail.node.id, detail.node.title);
     }
+    if (detail.type === "insert" && detail.context.via == "ui.create") {
+      const parent = detail.to.parent.id;
+      canvas.api.editor.addOption(parent, { label: detail.node.title });
+    }
   };
   const tags = useMemo17(() => filterTree(canvas.layers.tags, tagSearch), [canvas.layers.tags, tagSearch]);
   const fields = useMemo17(() => filterTree(canvas.layers.fields, fieldSearch), [canvas.layers.fields, fieldSearch]);
@@ -9298,7 +9351,7 @@ function TabsContent({
 import { CiGrid32 } from "react-icons/ci";
 import { MdOutlineLayers } from "react-icons/md";
 import { jsx as jsx40, jsxs as jsxs27 } from "react/jsx-runtime";
-var Left = () => {
+var Left = ({ menu }) => {
   const tabClassName = cn(
     "rounded-xl! py-2! shadow-none!",
     "text-slate-500 data-[state=active]:bg-white data-[state=active]:text-slate-900 data-[state=active]:shadow-sm",
@@ -9312,7 +9365,7 @@ var Left = () => {
       maxWidth: 420,
       minWidth: 320,
       children: /* @__PURE__ */ jsxs27("div", { className: "flex h-full flex-col", children: [
-        /* @__PURE__ */ jsx40(header_default, {}),
+        /* @__PURE__ */ jsx40(header_default, { menu }),
         /* @__PURE__ */ jsx40("div", { className: "flex min-h-0 flex-1 flex-col gap-2 py-2", children: /* @__PURE__ */ jsxs27(Tabs, { defaultValue: "layers", className: "flex min-h-0 flex-1 flex-col px-3", children: [
           /* @__PURE__ */ jsxs27(TabsList, { className: "grid h-auto grid-cols-2 rounded-2xl bg-slate-100 p-1 dark:bg-slate-900", children: [
             /* @__PURE__ */ jsx40(TabsTrigger, { className: tabClassName, value: "layers", children: /* @__PURE__ */ jsxs27("span", { className: "flex items-center gap-2", children: [
@@ -9336,7 +9389,7 @@ var left_default = Left;
 // src/panels/right/components/users.tsx
 import "@timeax/digital-service-engine/workspace";
 import { useMemo as useMemo18 } from "react";
-import { GoChevronDown as GoChevronDown2 } from "react-icons/go";
+import { GoChevronDown } from "react-icons/go";
 import { HiOutlineDotsHorizontal } from "react-icons/hi";
 import { PiUserPlusThin } from "react-icons/pi";
 import { jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
@@ -9421,7 +9474,7 @@ var Users = ({ users, onViewUser, onSetMain, onToggleAdmin, onRemoveUser, onInvi
               extra
             ] }) : null
           ] }),
-          /* @__PURE__ */ jsx41(GoChevronDown2, { className: "shrink-0 text-slate-500" })
+          /* @__PURE__ */ jsx41(GoChevronDown, { className: "shrink-0 text-slate-500" })
         ]
       }
     ) }),
@@ -9789,13 +9842,13 @@ 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 { useMemo as useMemo21, useState as useState21 } from "react";
+import { useMemo as useMemo21, useState as useState22 } from "react";
 import { MdOutlineSend } from "react-icons/md";
 import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
 var Comments = () => {
   const ws = useWorkspace10();
-  const [value, setValue] = useState21("");
-  const [query, setQuery] = useState21("");
+  const [value, setValue] = useState22("");
+  const [query, setQuery] = useState22("");
   const threads = useMemo21(() => {
     const items = ws.comments.threads.data ?? [];
     const lower = query.trim().toLowerCase();
@@ -10088,7 +10141,7 @@ function RenderIf({ data, emptyMessage = null, children, when }) {
 // src/panels/right/partials/global/add-service.tsx
 import { useCanvas as useCanvas7, useWorkspace as useWorkspace11 } from "@timeax/digital-service-engine/workspace";
 import { InputField as InputField5 } from "@timeax/form-palette";
-import { useMemo as useMemo23, useState as useState23 } from "react";
+import { useMemo as useMemo23, useState as useState24 } from "react";
 import { BsPlus } from "react-icons/bs";
 import { Fragment as Fragment9, jsx as jsx50, jsxs as jsxs33 } from "react/jsx-runtime";
 function AddService({ className, data, disabled, disabledMessage, readOnly, readOnlyMessage, emptyMessage }) {
@@ -10162,9 +10215,9 @@ function ServiceSummary({ service, nodeId, disabled }) {
 }
 function AddServicePopover({ data, services: services2 }) {
   const canvas = useCanvas7();
-  const [open, setOpen] = useState23(false);
-  const [query, setQuery] = useState23("");
-  const [selected, setSelected] = useState23("");
+  const [open, setOpen] = useState24(false);
+  const [query, setQuery] = useState24("");
+  const [selected, setSelected] = useState24("");
   const options = useMemo23(() => {
     const lower = query.trim().toLowerCase();
     return services2.filter((service) => {
@@ -10222,11 +10275,11 @@ var add_service_default = AddService;
 import { resolveInputDescriptor, useInputs as useInputs2 } from "@timeax/digital-service-engine/react";
 import { useCanvas as useCanvas12 } from "@timeax/digital-service-engine/workspace";
 import { InputField as InputField11 } from "@timeax/form-palette";
-import { useEffect as useEffect17, useMemo as useMemo28, useState as useState27 } from "react";
+import { useEffect as useEffect17, useMemo as useMemo28, useState as useState28 } from "react";
 
 // src/panels/right/partials/properties/components/descriptor-settings.tsx
 import { InputField as InputField6 } from "@timeax/form-palette";
-import { useMemo as useMemo24, useState as useState24 } from "react";
+import { useMemo as useMemo24, useState as useState25 } from "react";
 
 // src/panels/right/partials/properties/components/meta.ts
 function mergeNodeMeta(meta, patch) {
@@ -10524,9 +10577,9 @@ function DescriptorPrimitiveField({ schema, value, hasOverride, onSet, onClear,
 function DescriptorObjectField({ schema, value, hasOverride, onSet, onClear, path, allowClear = true }) {
   const objectValue = asRecord(value);
   const shapeEntries = useMemo24(() => Object.entries(schema.shape ?? {}), [schema.shape]);
-  const [draftKey, setDraftKey] = useState24("");
-  const [draftShape, setDraftShape] = useState24(shapeEntries[0]?.[0] ?? "");
-  const [activeShapes, setActiveShapes] = useState24({});
+  const [draftKey, setDraftKey] = useState25("");
+  const [draftShape, setDraftShape] = useState25(shapeEntries[0]?.[0] ?? "");
+  const [activeShapes, setActiveShapes] = useState25({});
   const orderedEntries = useMemo24(() => getOrderedObjectEntries(schema), [schema]);
   const dynamicKeys = Object.keys(objectValue).filter((key) => !hasOwn(schema.fields, key));
   const commitObject = (nextObject) => {
@@ -10684,8 +10737,8 @@ function DescriptorObjectField({ schema, value, hasOverride, onSet, onClear, pat
 function DescriptorArrayField({ schema, value, hasOverride, onSet, onClear, path, allowClear = true }) {
   const arrayValue = asArray(value);
   const shapeEntries = useMemo24(() => Object.entries(schema.shape ?? {}), [schema.shape]);
-  const [draftShape, setDraftShape] = useState24(shapeEntries[0]?.[0] ?? "");
-  const [activeShapes, setActiveShapes] = useState24({});
+  const [draftShape, setDraftShape] = useState25(shapeEntries[0]?.[0] ?? "");
+  const [activeShapes, setActiveShapes] = useState25({});
   const commitArray = (nextArray) => {
     if (!nextArray.length) {
       onClear(path);
@@ -11660,15 +11713,15 @@ function ValidationSection({ node }) {
 import "@timeax/digital-service-engine/core";
 import { useCanvas as useCanvas11 } from "@timeax/digital-service-engine/workspace";
 import { keyBy } from "lodash";
-import { useMemo as useMemo27, useState as useState26 } from "react";
+import { useMemo as useMemo27, useState as useState27 } from "react";
 
 // src/panels/right/partials/properties/components/AddIncludesPopover.tsx
 import { InputField as InputField10 } from "@timeax/form-palette";
-import { useState as useState25 } from "react";
+import { useState as useState26 } from "react";
 import { BsPlus as BsPlus5 } from "react-icons/bs";
 import { jsx as jsx55, jsxs as jsxs38 } from "react/jsx-runtime";
 function AddIncludesPopover({ open, onOpenChange, onSelect, options }) {
-  const [value, setValue] = useState25();
+  const [value, setValue] = useState26();
   return /* @__PURE__ */ jsxs38(Popover, { open, onOpenChange, children: [
     /* @__PURE__ */ jsx55(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx55(SectionActionTriggerButton, { icon: /* @__PURE__ */ jsx55(BsPlus5, {}), children: "Add" }) }),
     /* @__PURE__ */ jsx55(PopoverContent, { children: /* @__PURE__ */ jsxs38("div", { className: "flex flex-col gap-2", children: [
@@ -11705,7 +11758,7 @@ function AddIncludesPopover({ open, onOpenChange, onSelect, options }) {
 import { jsx as jsx56, jsxs as jsxs39 } from "react/jsx-runtime";
 function IncExcludeSection({ node, mode, capability }) {
   const canvas = useCanvas11();
-  const [open, setOpen] = useState26(false);
+  const [open, setOpen] = useState27(false);
   const canEdit = capability?.canEdit ?? true;
   const helperMessage = capability?.message;
   const fields = useMemo27(() => keyBy(canvas.props.fields, "id"), [canvas.props]);
@@ -11806,9 +11859,9 @@ function FieldProperties({ className, node }) {
   const nameValue = node.raw.name ?? "";
   const placeholderValue = defaults.placeholder ?? "";
   const helpTextValue = defaults.helpText ?? "";
-  const [nameDraft, setNameDraft] = useState27(nameValue);
-  const [placeholderDraft, setPlaceholderDraft] = useState27(placeholderValue);
-  const [helpTextDraft, setHelpTextDraft] = useState27(helpTextValue);
+  const [nameDraft, setNameDraft] = useState28(nameValue);
+  const [placeholderDraft, setPlaceholderDraft] = useState28(placeholderValue);
+  const [helpTextDraft, setHelpTextDraft] = useState28(helpTextValue);
   const descriptor = useMemo28(() => resolveInputDescriptor(registry, currentType, currentVariant), [currentType, currentVariant, registry]);
   const descriptorUi = descriptor?.ui ?? {};
   const descriptorKeySet = useMemo28(() => new Set(getDescriptorUiKeys(descriptorUi)), [descriptorUi]);
@@ -12128,7 +12181,7 @@ import "@timeax/digital-service-engine/core";
 import { useCanvas as useCanvas14 } from "@timeax/digital-service-engine/workspace";
 import { InputField as InputField14 } from "@timeax/form-palette";
 import { ArrowUpRight } from "lucide-react";
-import { useMemo as useMemo29, useState as useState28 } from "react";
+import { useMemo as useMemo29, useState as useState29 } from "react";
 import { TiDelete } from "react-icons/ti";
 
 // src/panels/right/partials/properties/tag/AddConstraintsPopover.tsx
@@ -12254,7 +12307,7 @@ import { Fragment as Fragment12, jsx as jsx62, jsxs as jsxs45 } from "react/jsx-
 function TagConstraintsSection({ node }) {
   const constraints = Object.keys(node.raw.constraints ?? {});
   const canvas = useCanvas14();
-  const [open, setOpen] = useState28(false);
+  const [open, setOpen] = useState29(false);
   const allConstraints = useMemo29(() => canvas.api.getConstraints() ?? [], [canvas.props]);
   return /* @__PURE__ */ jsx62(Fragment12, { children: /* @__PURE__ */ jsxs45(Section, { children: [
     /* @__PURE__ */ jsxs45(Section.Header, { children: [
@@ -12371,7 +12424,7 @@ function TagProperties({ node }) {
 // src/panels/right/tabs/properties.tsx
 import { useCanvas as useCanvas15, useWorkspace as useWorkspace12 } from "@timeax/digital-service-engine/workspace";
 import { InputField as InputField15 } from "@timeax/form-palette";
-import { useMemo as useMemo30, useState as useState29 } from "react";
+import { useMemo as useMemo30, useState as useState30 } from "react";
 import { AiOutlineLoading3Quarters } from "react-icons/ai";
 import { MdOutlineContentCopy } from "react-icons/md";
 import { jsx as jsx66, jsxs as jsxs47 } from "react/jsx-runtime";
@@ -12387,7 +12440,7 @@ var Properties = () => {
     if (!canvas.activeId) return { kind: "none" };
     return canvas.selector.getNode(canvas.activeId);
   }, [canvas.activeId, canvas.props, canvas.selection]);
-  const [copying, setCopying] = useState29(false);
+  const [copying, setCopying] = useState30(false);
   const Kind = kinds[node.kind];
   if (!Kind) {
     return /* @__PURE__ */ jsx66("div", { className: "p-4", children: /* @__PURE__ */ jsx66(EmptyState, { title: "No active node selected", description: "Pick a tag, field, or option from the layers panel or canvas to inspect its core settings." }) });
@@ -12960,7 +13013,7 @@ function describeCheck(check, state) {
 // src/workspace/fallback-editor-modal.tsx
 import { useCanvas as useCanvas18, useWorkspace as useWorkspace14 } from "@timeax/digital-service-engine/workspace";
 import cloneDeep2 from "lodash/cloneDeep";
-import { Suspense, lazy, createContext as createContext4, useCallback as useCallback17, useContext as useContext4, useEffect as useEffect18, useMemo as useMemo32, useState as useState30 } from "react";
+import { Suspense, lazy, createContext as createContext4, useCallback as useCallback17, useContext as useContext4, useEffect as useEffect18, useMemo as useMemo32, useState as useState31 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { FiX as FiX3 } from "react-icons/fi";
 import { jsx as jsx70, jsxs as jsxs51 } from "react/jsx-runtime";
@@ -12980,9 +13033,9 @@ var FallbackEditorModalContext = createContext4(defaultContextValue2);
 function FallbackEditorModalProvider({ children }) {
   const canvas = useCanvas18();
   const ws = useWorkspace14();
-  const [launch, setLaunch] = useState30(null);
-  const [sessionId, setSessionId] = useState30(0);
-  const [surfaceError, setSurfaceError] = useState30(null);
+  const [launch, setLaunch] = useState31(null);
+  const [sessionId, setSessionId] = useState31(0);
+  const [surfaceError, setSurfaceError] = useState31(null);
   const close = useCallback17(() => {
     setLaunch(null);
     setSurfaceError(null);
@@ -13151,7 +13204,7 @@ function useFallbackEditorModal() {
 
 // src/workspace/bottom-panel/index.tsx
 import { useCanvas as useCanvas21, useWorkspace as useWorkspace15 } from "@timeax/digital-service-engine/workspace";
-import { useCallback as useCallback18, useEffect as useEffect21, useMemo as useMemo34, useRef as useRef11, useState as useState33 } from "react";
+import { useCallback as useCallback18, useEffect as useEffect21, useMemo as useMemo34, useRef as useRef11, useState as useState34 } from "react";
 import { FiEye as FiEye3, FiEyeOff as FiEyeOff2, FiSearch, FiTerminal as FiTerminal2, FiX as FiX5 } from "react-icons/fi";
 import { LuGripHorizontal, LuLayers3 } from "react-icons/lu";
 import { MdOutlineSync } from "react-icons/md";
@@ -13606,7 +13659,7 @@ function LogCard({ row, onRemove }) {
 
 // src/workspace/bottom-panel/service-picker-dialog.tsx
 import { InputField as InputField16 } from "@timeax/form-palette";
-import { useEffect as useEffect19, useMemo as useMemo33, useState as useState31 } from "react";
+import { useEffect as useEffect19, useMemo as useMemo33, useState as useState32 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
 // src/workspace/bottom-panel/service-picker.ts
@@ -13735,8 +13788,8 @@ function ServicePickerDialog({
   onOpenChange,
   onConfirm
 }) {
-  const [filters, setFilters] = useState31(() => createDefaultServicePickerFilters());
-  const [selectedIds, setSelectedIds] = useState31(/* @__PURE__ */ new Set());
+  const [filters, setFilters] = useState32(() => createDefaultServicePickerFilters());
+  const [selectedIds, setSelectedIds] = useState32(/* @__PURE__ */ new Set());
   useEffect19(() => {
     if (!open) return;
     setFilters(createDefaultServicePickerFilters());
@@ -14077,7 +14130,7 @@ function ResizableHandle({
 
 // src/workspace/bottom-panel/services-split-pane.tsx
 import { InputField as InputField17 } from "@timeax/form-palette";
-import { useEffect as useEffect20, useState as useState32 } from "react";
+import { useEffect as useEffect20, useState as useState33 } from "react";
 import { FaFolderOpen } from "react-icons/fa";
 import { FiEdit2, FiFilter, FiFolderPlus, FiPlus as FiPlus2, FiTrash2 as FiTrash22 } from "react-icons/fi";
 
@@ -14562,7 +14615,6 @@ function CatalogToolbar({
       {
         variant: "treeselect",
         mode: "button",
-        label: "Catalog group selector",
         className: "w-fit!",
         multiple: false,
         value: treeValue,
@@ -14587,8 +14639,8 @@ function GroupInputPopoverButton({
   disabled = false,
   onSubmit
 }) {
-  const [open, setOpen] = useState32(false);
-  const [value, setValue] = useState32(initialValue);
+  const [open, setOpen] = useState33(false);
+  const [value, setValue] = useState33(initialValue);
   useEffect20(() => {
     if (open) setValue(initialValue);
   }, [initialValue, open]);
@@ -14654,7 +14706,7 @@ function ConfirmPopoverButton({
   disabled = false,
   onConfirm
 }) {
-  const [open, setOpen] = useState32(false);
+  const [open, setOpen] = useState33(false);
   return /* @__PURE__ */ jsxs55(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx76(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx76(
       "button",
@@ -14745,26 +14797,26 @@ function BottomConsolePanel({ controller, errors, activeServices, allServices, o
   const policies2 = ws.policies.policies.data ?? [];
   const currentTagId = canvas.api.selection.currentTag?.();
   const preferredTagId = currentTagId != null ? String(currentTagId) : canvas.layers.tags[0]?.id != null ? String(canvas.layers.tags[0]?.id) : null;
-  const [activeSearch, setActiveSearch] = useState33("");
-  const [allSearch, setAllSearch] = useState33("");
-  const [compatibleOnly, setCompatibleOnly] = useState33(false);
-  const [hideActiveServices, setHideActiveServices] = useState33(false);
-  const [filterOpen, setFilterOpen] = useState33(false);
-  const [searchOpen, setSearchOpen] = useState33(false);
-  const [contextLinked, setContextLinked] = useState33(false);
-  const [servicePickerOpen, setServicePickerOpen] = useState33(false);
-  const [selectedActiveServiceId, setSelectedActiveServiceId] = useState33(null);
-  const [selectedAllServiceId, setSelectedAllServiceId] = useState33(null);
-  const [catalogContextDraft, setCatalogContextDraft] = useState33(
+  const [activeSearch, setActiveSearch] = useState34("");
+  const [allSearch, setAllSearch] = useState34("");
+  const [compatibleOnly, setCompatibleOnly] = useState34(false);
+  const [hideActiveServices, setHideActiveServices] = useState34(false);
+  const [filterOpen, setFilterOpen] = useState34(false);
+  const [searchOpen, setSearchOpen] = useState34(false);
+  const [contextLinked, setContextLinked] = useState34(false);
+  const [servicePickerOpen, setServicePickerOpen] = useState34(false);
+  const [selectedActiveServiceId, setSelectedActiveServiceId] = useState34(null);
+  const [selectedAllServiceId, setSelectedAllServiceId] = useState34(null);
+  const [catalogContextDraft, setCatalogContextDraft] = useState34(
     () => createDefaultServiceContext(canvas.props, preferredTagId)
   );
-  const [catalogState, setCatalogState] = useState33(null);
-  const [panelPosition, setPanelPosition] = useState33(() => readStoredPanelPosition());
-  const [draggingPanel, setDraggingPanel] = useState33(false);
-  const [consoleSubTab, setConsoleSubTab] = useState33("validation");
-  const [consoleScopeFilter, setConsoleScopeFilter] = useState33("all");
-  const [consoleSeverityFilter, setConsoleSeverityFilter] = useState33("all");
-  const [consoleIntroState, setConsoleIntroState] = useState33({
+  const [catalogState, setCatalogState] = useState34(null);
+  const [panelPosition, setPanelPosition] = useState34(() => readStoredPanelPosition());
+  const [draggingPanel, setDraggingPanel] = useState34(false);
+  const [consoleSubTab, setConsoleSubTab] = useState34("validation");
+  const [consoleScopeFilter, setConsoleScopeFilter] = useState34("all");
+  const [consoleSeverityFilter, setConsoleSeverityFilter] = useState34("all");
+  const [consoleIntroState, setConsoleIntroState] = useState34({
     validation: { minimized: false, closed: false },
     logs: { minimized: false, closed: false },
     notices: { minimized: false, closed: false }
@@ -15366,7 +15418,7 @@ function CatalogModeSwitch({ mode, onChange }) {
 // src/index.tsx
 import { createInputRegistry, Provider as InputsProvider, registerEntries } from "@timeax/digital-service-engine/react";
 import { useCanvas as useCanvas22, useErrors, useWorkspace as useWorkspace16, Workspace } from "@timeax/digital-service-engine/workspace";
-import { useMemo as useMemo35, useState as useState34 } from "react";
+import { useMemo as useMemo35, useState as useState35 } from "react";
 
 // backend/memory/create-backend.ts
 import { createMemoryWorkspaceBackend } from "@timeax/digital-service-engine/workspace";
@@ -15991,20 +16043,20 @@ var workspaceBackend = createMemoryWorkspaceBackend({
 });
 
 // src/index.tsx
-import { jsx as jsx78, jsxs as jsxs57 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx78, jsxs as jsxs57 } from "react/jsx-runtime";
 var inputRegistry = createInputRegistry();
 registerEntries(inputRegistry);
-function WorkspaceLayout({ onShare, onPlay }) {
+function WorkspaceLayout({ onShare, onPlay, menu }) {
   const canvas = useCanvas22();
   const ws = useWorkspace16();
   const errors = useErrors();
   const bottomPanel = useBottomConsolePanel();
-  const [draggingServiceId, setDraggingServiceId] = useState34(null);
+  const [draggingServiceId, setDraggingServiceId] = useState35(null);
   const serviceSummary = useMemo35(() => buildServiceSummaries(canvas, ws), [canvas.props, canvas.selectionInfo, canvas.activeId, ws.services.data]);
   return /* @__PURE__ */ jsx78(FallbackQuickAddProvider, { children: /* @__PURE__ */ jsx78(NodeContextMenuProvider, { children: /* @__PURE__ */ jsx78(FallbackEditorModalProvider, { children: /* @__PURE__ */ jsxs57("div", { className: "relative flex h-screen flex-col overflow-hidden *:font-display", children: [
     /* @__PURE__ */ jsx78("div", { className: "pointer-events-none absolute top-4 left-1/2 z-30 w-full max-w-2xl -translate-x-1/2 px-4", children: /* @__PURE__ */ jsx78("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx78(WorkspaceBootStatusSurface, { boot: ws.boot }) }) }),
     /* @__PURE__ */ jsxs57("div", { className: "flex grow overflow-hidden", children: [
-      /* @__PURE__ */ jsx78(left_default, {}),
+      /* @__PURE__ */ jsx78(left_default, { menu }),
       /* @__PURE__ */ jsx78(
         CanvasPanel,
         {
@@ -16028,11 +16080,89 @@ function WorkspaceLayout({ onShare, onPlay }) {
     ) })
   ] }) }) }) });
 }
-function ServiceBuilder({ backend, actor, onShare, onPlay }) {
-  return /* @__PURE__ */ jsx78(InputsProvider, { initialRegistry: inputRegistry, children: /* @__PURE__ */ jsx78(Workspace, { backend, actor, children: () => /* @__PURE__ */ jsx78(WorkspaceLayout, { onShare, onPlay }) }) });
+var Styles = `
+/* line theming via CSS vars (can be overridden upstream) */
+:root {
+    --tree-line-color: #d1d5db; /* gray-300 */
+    --tree-line-width: 1px;
+    --tree-line-style: solid; /* solid | dashed | dotted */
+    --elbow-v-h: 100%
+}
+
+/* container for each row */
+.tree-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem; /* matches your gap-2 */
+    /*padding: 0.25rem 0.5rem; !* py-1 px-2 *!*/
+}
+
+/* left rail: N ancestor columns (width given inline) */
+.tree-rail {
+    display: flex;
+    position: relative;
+}
+
+/* a single ancestor column; width is set inline to \`indent\` */
+.tree-col {
+    position: relative;
+}
+
+/* draw vertical guideline IF data-show="1" */
+.tree-col[data-show="1"]::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    border-left: var(--tree-line-width) var(--tree-line-style) var(--tree-line-color);
+}
+
+/* the elbow cell for the current node (one per row) */
+.tree-elbow {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* vertical segment (full for mid siblings, half for last) */
+.tree-elbow::before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 0;
+    height: var(--elbow-v-h, 100%); /* "50%" for last sibling, else "100%" */
+    border-left: var(--tree-line-width) var(--tree-line-style) var(--tree-line-color);
+}
+
+/* horizontal segment (elbow) from center to the content area */
+.tree-elbow::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateY(-50%);
+    width: 50%;
+    border-top: var(--tree-line-width) var(--tree-line-style) var(--tree-line-color);
+}
+
+/* apply to the element that receives selectedRowClassName / rowClassName */
+.tree-row-clip {
+    background-clip: content-box; /* don\u2019t paint under the left padding (indent) */
+}
+
+`;
+function ServiceBuilder({ backend, actor, onShare, onPlay, menu }) {
+  return /* @__PURE__ */ jsxs57(Fragment17, { children: [
+    /* @__PURE__ */ jsx78("style", { children: Styles }),
+    /* @__PURE__ */ jsx78(InputsProvider, { initialRegistry: inputRegistry, children: /* @__PURE__ */ jsx78(Workspace, { backend, actor, children: () => /* @__PURE__ */ jsx78(WorkspaceLayout, { onShare, onPlay, menu }) }) })
+  ] });
 }
-function ServiceBuilderWorkspace({ onShare, onPlay }) {
-  return /* @__PURE__ */ jsx78(ServiceBuilder, { backend: workspaceBackend, actor: workspaceActor, onShare, onPlay });
+function ServiceBuilderWorkspace({ onShare, onPlay, menu }) {
+  return /* @__PURE__ */ jsx78(ServiceBuilder, { backend: workspaceBackend, actor: workspaceActor, onShare, onPlay, menu });
 }
 export {
   ServiceBuilder,