@eventcatalog/visualiser 5.1.1 → 5.2.0

package/dist/studio.mjs

@@ -1,22 +1,52 @@
 import {
+  CATALOG_COLLECTIONS,
+  CATALOG_GROUPS,
+  COMPONENT_TYPES,
   CanvasPortal,
+  DEFAULT_NODE_SIZE,
   DIAGRAM_FIT_VIEW_OPTIONS,
   DomainCard_default,
   ENTITY_TARGET_HANDLE_ID,
   EdgeLabelPortal,
+  EditStatus,
+  EditableText,
   Entity_default,
+  Field,
+  GROUP_TYPES,
+  NODE_CATEGORIES,
+  NODE_ICONS,
+  NodeCard,
   SystemGroupNode_default,
   Toolbar,
   ToolbarButton,
   ToolbarDivider,
   ZoomLevel,
   addExportBranding,
+  canGoInContainer,
+  canHold,
+  componentKey,
   diagramNodeComponents,
   eventcatalog_logo_default,
   getExportImageDimensions,
+  getNodeDefinition,
+  getNodeLabel,
+  getNodeName,
+  getNodeSize as getNodeSize2,
+  getNoteLevel,
+  getResource,
   injectExportStyles,
-  memoNode
-} from "./chunk-ZHXUMAPK.mjs";
+  isCatalogCollection,
+  isGroupType,
+  isOnLevel,
+  isShownOnLevel,
+  isVersioned,
+  isWrittenOnCanvas,
+  memoNode,
+  nodeDefinitions,
+  updateResource,
+  useNodeAnchor,
+  useSavedFlash
+} from "./chunk-QQUJTD6O.mjs";
 import "./chunk-STJQWGKW.mjs";
 import {
   getMessagesLabel,
@@ -105,317 +135,6 @@ var createEdge = (connection, sourceType, targetType) => {
   };
 };
 
-// src/studio/node-types.ts
-var NODE_CATEGORIES = [
-  { id: "boundaries", label: "Boundaries" },
-  // What's deployed (services, UIs, agents) and what's outside it: drawn first, then what flows between them
-  { id: "architecture", label: "Services" },
-  { id: "messages", label: "Messages" },
-  // Where data lives: all data nodes, of EventCatalog's kinds (container_type)
-  { id: "data", label: "Data" },
-  // Who's involved: who uses the architecture (actors) and who owns it (teams)
-  { id: "people", label: "People" },
-  { id: "other", label: "Other" }
-];
-var CATALOG_COLLECTIONS = [
-  "domains",
-  "systems",
-  "services",
-  "events",
-  "commands",
-  "queries",
-  "channels",
-  "containers"
-];
-var isCatalogCollection = (collection) => CATALOG_COLLECTIONS.includes(collection);
-var GROUP_TYPES = {
-  domain: "domain-group",
-  system: "system-group"
-};
-var isGroupType = (type) => type === GROUP_TYPES.domain || type === GROUP_TYPES.system;
-var resource = (name, summary) => ({
-  name,
-  version: "0.0.1",
-  summary,
-  owners: []
-});
-var DATA_KINDS = [
-  {
-    containerType: "database",
-    label: "Database",
-    name: "New Database",
-    summary: "Tables, e.g. PostgreSQL"
-  },
-  {
-    containerType: "cache",
-    label: "Cache",
-    name: "New Cache",
-    summary: "Fast data, e.g. Redis"
-  },
-  {
-    containerType: "searchIndex",
-    label: "Search index",
-    name: "New Search Index",
-    summary: "Search, e.g. Elasticsearch"
-  },
-  {
-    containerType: "objectStore",
-    label: "Object store",
-    name: "New Object Store",
-    summary: "Files and blobs, e.g. S3"
-  }
-];
-var nodeDefinitions = [
-  {
-    type: GROUP_TYPES.domain,
-    firstLevel: 1,
-    label: "Domain",
-    summary: "A business area, e.g. Sales",
-    category: "boundaries",
-    resourceKey: "domain",
-    defaultSize: { width: 720, height: 460 },
-    createData: () => ({ domain: { name: "New Domain", version: "0.0.1" } })
-  },
-  {
-    type: GROUP_TYPES.system,
-    firstLevel: 1,
-    label: "System",
-    summary: "Services doing one job",
-    category: "boundaries",
-    resourceKey: "system",
-    defaultSize: { width: 560, height: 360 },
-    createData: () => ({ system: { name: "New System", version: "0.0.1" } })
-  },
-  {
-    type: "service",
-    firstLevel: 2,
-    category: "architecture",
-    label: "Service",
-    summary: "An API, worker or function",
-    resourceKey: "service",
-    createData: () => ({
-      mode: "full",
-      service: {
-        ...resource("New Service", "Describe what this service does."),
-        sends: [],
-        receives: []
-      }
-    })
-  },
-  {
-    type: "event",
-    firstLevel: 3,
-    category: "messages",
-    label: "Event",
-    summary: "Something that happened",
-    resourceKey: "message",
-    createData: () => ({
-      mode: "full",
-      message: resource("NewEvent", "Something happened.")
-    })
-  },
-  {
-    type: "command",
-    firstLevel: 3,
-    category: "messages",
-    label: "Command",
-    summary: "A request to do something",
-    resourceKey: "message",
-    createData: () => ({
-      mode: "full",
-      message: resource("NewCommand", "Asks a service to do something.")
-    })
-  },
-  {
-    type: "query",
-    firstLevel: 3,
-    category: "messages",
-    label: "Query",
-    summary: "A request for data",
-    resourceKey: "message",
-    createData: () => ({
-      mode: "full",
-      message: resource("NewQuery", "Asks for some information.")
-    })
-  },
-  {
-    type: "channel",
-    firstLevel: 3,
-    // With the messages it carries
-    category: "messages",
-    label: "Channel",
-    summary: "A topic, queue or bus",
-    resourceKey: "channel",
-    createData: () => ({
-      mode: "full",
-      channel: {
-        ...resource("new.channel", "Where messages are routed."),
-        protocols: []
-      }
-    })
-  },
-  {
-    type: "view",
-    firstLevel: 2,
-    category: "architecture",
-    label: "View",
-    summary: "A screen or app people use",
-    resourceKey: "view",
-    createData: () => ({
-      mode: "full",
-      view: resource("New View", "What the user sees.")
-    })
-  },
-  {
-    type: "externalSystem",
-    firstLevel: 1,
-    category: "architecture",
-    label: "External System",
-    summary: "A third party you use",
-    resourceKey: "externalSystem",
-    createData: () => ({
-      mode: "full",
-      externalSystem: resource("External System", "A third party system.")
-    })
-  },
-  {
-    type: "agent",
-    // The detail of how things work, like messages: shown on L3 (L1 and L2 draw past it)
-    firstLevel: 3,
-    category: "architecture",
-    label: "Agent",
-    summary: "An AI agent at work",
-    resourceKey: "agent",
-    createData: () => ({
-      mode: "full",
-      agent: {
-        ...resource("New Agent", "What this agent does."),
-        sends: [],
-        receives: []
-      }
-    })
-  },
-  {
-    type: "actor",
-    firstLevel: 1,
-    // Who uses the architecture: customers, operators, partners (Studio's actors)
-    category: "people",
-    label: "Actor",
-    summary: "Someone who uses it",
-    // Drawn like the visualiser's actors (by name only); the summary is for agents and the properties panel
-    createData: () => ({ mode: "full", name: "Customer", summary: "" })
-  },
-  {
-    type: "team",
-    firstLevel: 1,
-    // Who owns what: connected to a domain, system or service, it's its owner (EventCatalog's owners)
-    category: "people",
-    label: "Team",
-    summary: "Who owns what",
-    resourceKey: "team",
-    createData: () => ({
-      mode: "full",
-      team: resource("New Team", "What this team looks after.")
-    })
-  },
-  {
-    type: "text",
-    // On the bar at the top (T, N), not in the palette
-    unlisted: true,
-    firstLevel: 2,
-    category: "other",
-    label: "Text",
-    defaultSize: { width: 240, height: 40 },
-    autoSize: true,
-    createData: () => ({ text: "Add some text" })
-  },
-  {
-    type: "note",
-    // On the bar at the top (T, N), not in the palette
-    unlisted: true,
-    firstLevel: 1,
-    category: "other",
-    label: "Sticky Note",
-    // About square, like a post-it (taller if more is written on it)
-    defaultSize: { width: 200, height: 176 },
-    autoHeight: true,
-    createData: () => ({ text: "", color: "yellow" })
-  },
-  // The kinds of data store: all data nodes (EventCatalog's containers), told apart by their container_type
-  ...DATA_KINDS.map(
-    ({ containerType, label, name, summary }) => ({
-      type: "data",
-      ...containerType !== "database" && { id: `data:${containerType}` },
-      firstLevel: 2,
-      category: "data",
-      label,
-      summary,
-      resourceKey: "data",
-      createData: () => ({
-        mode: "full",
-        data: {
-          ...resource(name, "Stores data."),
-          container_type: containerType
-        }
-      })
-    })
-  ),
-  {
-    type: "entity",
-    // The domain model: detail, like messages (L3)
-    firstLevel: 3,
-    // The domain's data model, with the stores it's kept in
-    category: "data",
-    label: "Entity",
-    summary: "Part of the domain model",
-    resourceKey: "entity",
-    createData: () => ({
-      mode: "full",
-      entity: {
-        ...resource("NewEntity", "Something the domain keeps track of."),
-        properties: [
-          { name: "id", type: "string", required: true },
-          { name: "createdAt", type: "string" }
-        ]
-      }
-    })
-  }
-];
-var componentKey = (definition) => definition.id ?? definition.type;
-var COMPONENT_TYPES = [
-  ...new Set(
-    nodeDefinitions.filter((definition) => !definition.unlisted).map((definition) => definition.type)
-  )
-];
-var definitionsByType = new Map(
-  nodeDefinitions.map((definition) => [componentKey(definition), definition])
-);
-var catalogNodeTypes = {
-  system: { label: "System", resourceKey: "system", firstLevel: 1 },
-  "context-domain": { label: "Domain", resourceKey: "domain", firstLevel: 1 }
-};
-var getNodeDefinition = (type) => type ? definitionsByType.get(type) : void 0;
-var getNodeLabel = (type) => getNodeDefinition(type)?.label ?? catalogNodeTypes[type ?? ""]?.label ?? "Node";
-var DEFAULT_NODE_SIZE = { width: 240, height: 112 };
-var getNodeSize2 = (type) => getNodeDefinition(type)?.defaultSize ?? DEFAULT_NODE_SIZE;
-var getResourceKey = (type) => getNodeDefinition(type)?.resourceKey ?? catalogNodeTypes[type ?? ""]?.resourceKey;
-var getResource = (type, data) => {
-  const key = getResourceKey(type);
-  return key ? data[key] ?? {} : data;
-};
-var canGoInContainer = (type) => !isWrittenOnCanvas(type);
-var canHold = (containerType, type) => canGoInContainer(type) && (containerType === GROUP_TYPES.domain || containerType === GROUP_TYPES.system && type !== GROUP_TYPES.domain && type !== "context-domain");
-var getNoteLevel = (node) => isWrittenOnCanvas(node.type) ? node.data.level ?? 3 : void 0;
-var isOnLevel = (node, level) => !isWrittenOnCanvas(node.type) || getNoteLevel(node) === level;
-var isShownOnLevel = (type, level) => level >= (getNodeDefinition(type)?.firstLevel ?? catalogNodeTypes[type ?? ""]?.firstLevel ?? 3);
-var isVersioned = (type) => !!getResourceKey(type);
-var isWrittenOnCanvas = (type) => type === "note" || type === "text";
-var updateResource = (type, data, fields) => {
-  const key = getResourceKey(type);
-  return key ? { ...data, [key]: { ...getResource(type, data), ...fields } } : { ...data, ...fields };
-};
-var getNodeName = (type, data, fallback = "node") => String(getResource(type, data).name ?? data.text ?? fallback);
-
 // src/studio/grouping.ts
 var GROUP_PADDING = { top: 80, right: 40, bottom: 40, left: 40 };
 var byId = (nodes) => new Map(nodes.map((node) => [node.id, node]));
@@ -1350,6 +1069,228 @@ var offsetToCentre = (roots, at) => {
   return { x: at.x - (left + right) / 2, y: at.y - (top + bottom) / 2 };
 };
 
+// src/studio/connect-new.ts
+var CONNECT_PLACEHOLDER = "connect-placeholder";
+var CONNECT_PLACEHOLDER_EDGE = "connect-placeholder-edge";
+var CONNECT_PLACEHOLDER_SIZE = { width: 200, height: 66 };
+var notPlaceholder = (change) => change.type === "add" || change.id !== CONNECT_PLACEHOLDER;
+var linkConnection = (newId, link) => link.newIs === "target" ? {
+  source: link.nodeId,
+  sourceHandle: link.handleId,
+  target: newId,
+  targetHandle: null
+} : {
+  source: newId,
+  sourceHandle: null,
+  target: link.nodeId,
+  targetHandle: link.handleId
+};
+var DOMAIN_CARD = "context-domain";
+var SYSTEM_CARD = "system";
+var connectedType = (type) => type === GROUP_TYPES.domain ? DOMAIN_CARD : type === GROUP_TYPES.system ? SYSTEM_CARD : type;
+var isCardType = (type) => type === DOMAIN_CARD || type === SYSTEM_CARD;
+var newCardData = (type) => ({
+  mode: "full",
+  navigable: false,
+  ...getNodeDefinition(
+    type === DOMAIN_CARD ? GROUP_TYPES.domain : GROUP_TYPES.system
+  ).createData()
+});
+var categoryOrder = new Map(
+  NODE_CATEGORIES.map((category, index) => [category.id, index])
+);
+var getConnectOptions = (fromType, newIs, level) => nodeDefinitions.filter(
+  (definition) => !definition.unlisted && !isWrittenOnCanvas(definition.type) && isShownOnLevel(definition.type, level)
+).map((definition) => {
+  const type = connectedType(definition.type);
+  const says = newIs === "target" ? getEdgeLabel(fromType, type) : getEdgeLabel(type, fromType);
+  return {
+    key: componentKey(definition),
+    type,
+    label: definition.label,
+    summary: definition.summary,
+    category: definition.category,
+    says: says.replace(/\s+/g, " ").trim()
+  };
+}).sort(
+  (a, b) => Number(!a.says) - Number(!b.says) || (categoryOrder.get(a.category) ?? 0) - (categoryOrder.get(b.category) ?? 0)
+);
+var filterConnectOptions = (options, query) => {
+  const words = query.toLowerCase().split(/\s+/).filter(Boolean);
+  if (!words.length) return options;
+  return options.filter((option) => {
+    const text = `${option.label} ${option.summary ?? ""} ${option.says}`.toLowerCase();
+    return words.every((word) => text.includes(word));
+  });
+};
+var CONNECT_MIN_DISTANCE = 40;
+var isAwayFrom = (from, to) => Math.hypot(to.x - from.x, to.y - from.y) >= CONNECT_MIN_DISTANCE;
+var isEmptyCanvasAt = (point, canvas) => {
+  const under = document.elementFromPoint(point.x, point.y);
+  return !!under?.closest(".react-flow__pane") && !under.closest(".react-flow__node") && !!canvas?.contains(under);
+};
+var centreBeyond = (from, to, size) => {
+  const dx = to.x - from.x;
+  const dy = to.y - from.y;
+  if (Math.abs(dx) >= Math.abs(dy))
+    return { x: to.x + Math.sign(dx || 1) * (size.width / 2), y: to.y };
+  return { x: to.x, y: to.y + Math.sign(dy) * (size.height / 2) };
+};
+
+// src/studio/use-connect-new.ts
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  useReactFlow
+} from "@xyflow/react";
+var PLACEHOLDER_EDGE_STYLE = {
+  stroke: "rgb(var(--ec-accent))",
+  strokeWidth: 1.5,
+  strokeDasharray: "6 4"
+};
+var placeholderPosition = ({ from, to }) => {
+  const center = centreBeyond(from, to, CONNECT_PLACEHOLDER_SIZE);
+  return {
+    x: center.x - CONNECT_PLACEHOLDER_SIZE.width / 2,
+    y: center.y - CONNECT_PLACEHOLDER_SIZE.height / 2
+  };
+};
+function useConnectNew({
+  canvasRef,
+  getNode,
+  getLevel,
+  locked,
+  onMake
+}) {
+  const { screenToFlowPosition, flowToScreenPosition } = useReactFlow();
+  const [connecting, setConnecting] = useState(null);
+  const latest = useRef({ getNode, getLevel, locked, onMake, connecting });
+  latest.current = { getNode, getLevel, locked, onMake, connecting };
+  const reconnecting = useRef(false);
+  const onReconnectStart = useCallback(() => {
+    reconnecting.current = true;
+  }, []);
+  const onReconnectEnd = useCallback(() => {
+    reconnecting.current = false;
+  }, []);
+  const onConnectEnd = useCallback(
+    (event, state) => {
+      const { fromNode, fromHandle } = state;
+      if (latest.current.locked || reconnecting.current || state.isValid || state.toNode || !fromNode || !fromHandle)
+        return;
+      const from = latest.current.getNode(fromNode.id);
+      if (!from) return;
+      const { clientX, clientY } = "changedTouches" in event ? event.changedTouches[0] : event;
+      const to = screenToFlowPosition({ x: clientX, y: clientY });
+      if (!isAwayFrom(state.from, to) || !isEmptyCanvasAt({ x: clientX, y: clientY }, canvasRef.current))
+        return;
+      const newIs = fromHandle.type === "source" ? "target" : "source";
+      const options = getConnectOptions(
+        from.type,
+        newIs,
+        latest.current.getLevel()
+      );
+      if (!options.length) return;
+      setConnecting({
+        link: { nodeId: from.id, handleId: fromHandle.id ?? null, newIs },
+        fromName: getNodeName(from.type, from.data),
+        options,
+        from: state.from,
+        to
+      });
+    },
+    [screenToFlowPosition, canvasRef]
+  );
+  const placeholder = useMemo(() => {
+    if (!connecting) return null;
+    const { choice } = connecting;
+    const data = {
+      choice: choice && {
+        key: choice.key,
+        label: choice.label,
+        summary: choice.summary
+      }
+    };
+    const node = {
+      id: CONNECT_PLACEHOLDER,
+      type: CONNECT_PLACEHOLDER,
+      position: placeholderPosition(connecting),
+      data,
+      draggable: false,
+      selectable: false,
+      connectable: false,
+      focusable: false,
+      deletable: false,
+      zIndex: 1e3
+    };
+    const edge = {
+      id: CONNECT_PLACEHOLDER_EDGE,
+      ...linkConnection(CONNECT_PLACEHOLDER, connecting.link),
+      type: "smoothstep",
+      style: PLACEHOLDER_EDGE_STYLE,
+      selectable: false,
+      focusable: false,
+      deletable: false
+    };
+    return { node, edge };
+  }, [connecting]);
+  const highlight = useCallback(
+    (choice) => setConnecting(
+      (current) => current && current.choice?.key !== choice?.key ? { ...current, choice } : current
+    ),
+    []
+  );
+  const cancel = useCallback(() => setConnecting(null), []);
+  const choose = useCallback((option) => {
+    const { connecting: at, locked: isLocked, onMake: make } = latest.current;
+    setConnecting(null);
+    if (!at || isLocked) return;
+    make(
+      option,
+      centreBeyond(at.from, at.to, getNodeSize2(option.type)),
+      at.link
+    );
+  }, []);
+  useEffect(() => {
+    if (locked) setConnecting(null);
+  }, [locked]);
+  let chooser = null;
+  if (connecting && placeholder) {
+    const { x, y } = placeholder.node.position;
+    const start = flowToScreenPosition({ x, y });
+    const end = flowToScreenPosition({
+      x: x + CONNECT_PLACEHOLDER_SIZE.width,
+      y: y + CONNECT_PLACEHOLDER_SIZE.height
+    });
+    chooser = {
+      options: connecting.options,
+      fromName: connecting.fromName,
+      anchor: {
+        x: start.x,
+        y: start.y,
+        width: end.x - start.x,
+        height: end.y - start.y
+      },
+      onHighlight: highlight,
+      onChoose: choose,
+      onCancel: cancel
+    };
+  }
+  return {
+    placeholder,
+    chooser,
+    onConnectEnd,
+    onReconnectStart,
+    onReconnectEnd,
+    cancel
+  };
+}
+
 // src/studio/entity-handles.ts
 var ENTITY_SOURCE_HANDLE = "__entity-source";
 
@@ -2081,7 +2022,7 @@ var getLevelUnavailableReason = (nodes, level) => {
 };
 
 // src/studio/live-moves.ts
-import { useEffect, useState } from "react";
+import { useEffect as useEffect2, useState as useState2 } from "react";
 
 // src/studio/smooth.ts
 var EASE_MS = 45;
@@ -2157,10 +2098,10 @@ var sendMove = (live, kind, id, at) => live?.send(
 );
 var NONE = /* @__PURE__ */ new Map();
 function useRemoteMoves(live, kind) {
-  const [moves, setMoves] = useState(NONE);
+  const [moves, setMoves] = useState2(NONE);
   const source = live?.source;
   const level = live?.level;
-  useEffect(() => {
+  useEffect2(() => {
     if (!source) return;
     let shown = "";
     const glide = createSmoother((at) => setMoves(at.size ? at : NONE));
@@ -2222,9 +2163,9 @@ var NODE_TYPE = {
 };
 var RESOURCE_TYPE = {
   ...Object.fromEntries(
-    Object.entries(NODE_TYPE).map(([resource2, node]) => [
+    Object.entries(NODE_TYPE).map(([resource, node]) => [
       node,
-      resource2
+      resource
     ])
   ),
   // Catalog domains and systems as cards (Studio's catalog adds them; kept if a canvas has them)
@@ -2247,42 +2188,42 @@ var toCanvasHotspots = (hotspots) => hotspots.map((hotspot) => ({
   author: hotspot.author ?? AGENT_AUTHOR,
   createdAt: hotspot.createdAt ?? Date.now()
 }));
-function resourceNodeData(resource2) {
-  const type = NODE_TYPE[resource2.type];
+function resourceNodeData(resource) {
+  const type = NODE_TYPE[resource.type];
   const fields = {
-    name: resource2.name,
-    version: resource2.version ?? "0.0.1",
-    summary: resource2.summary ?? "",
-    owners: resource2.owners ?? []
+    name: resource.name,
+    version: resource.version ?? "0.0.1",
+    summary: resource.summary ?? "",
+    owners: resource.owners ?? []
   };
   const defaults = getNodeDefinition(type)?.createData() ?? {};
-  const shared = { resource: resource2 };
-  switch (resource2.type) {
+  const shared = { resource };
+  switch (resource.type) {
     case "domain":
-      return resource2.card ? {
+      return resource.card ? {
         ...shared,
         mode: "full",
         navigable: false,
-        domain: { id: resource2.id, ...fields }
+        domain: { id: resource.id, ...fields }
       } : {
         ...shared,
         domain: {
-          id: resource2.id,
-          name: resource2.name,
+          id: resource.id,
+          name: resource.name,
           version: fields.version
         }
       };
     case "system":
-      return resource2.card ? {
+      return resource.card ? {
         ...shared,
         mode: "full",
         navigable: false,
-        system: { id: resource2.id, ...fields }
+        system: { id: resource.id, ...fields }
       } : {
         ...shared,
         system: {
-          id: resource2.id,
-          name: resource2.name,
+          id: resource.id,
+          name: resource.name,
           version: fields.version
         }
       };
@@ -2290,8 +2231,8 @@ function resourceNodeData(resource2) {
       return {
         ...defaults,
         ...shared,
-        name: resource2.name,
-        summary: resource2.summary ?? ""
+        name: resource.name,
+        summary: resource.summary ?? ""
       };
     case "channel":
       return {
@@ -2299,7 +2240,7 @@ function resourceNodeData(resource2) {
         ...shared,
         channel: {
           ...fields,
-          protocols: resource2.technology ? [resource2.technology] : []
+          protocols: resource.technology ? [resource.technology] : []
         }
       };
     case "container":
@@ -2308,15 +2249,15 @@ function resourceNodeData(resource2) {
         ...shared,
         data: {
           ...fields,
-          container_type: resource2.containerType ?? "database",
-          technology: resource2.technology
+          container_type: resource.containerType ?? "database",
+          technology: resource.technology
         }
       };
     case "entity":
       return {
         ...defaults,
         ...shared,
-        entity: { ...fields, properties: resource2.properties ?? [] }
+        entity: { ...fields, properties: resource.properties ?? [] }
       };
     default: {
       const key = getNodeDefinition(type)?.resourceKey ?? type;
@@ -2400,22 +2341,22 @@ var placeOf2 = (place) => ({
   x: place.x,
   y: place.y
 });
-var nodeTypeOf = (resource2) => resource2.card && resource2.type === "domain" ? "context-domain" : resource2.card && resource2.type === "system" ? "system" : NODE_TYPE[resource2.type];
-var isCardType = (type) => type === "context-domain" || type === "system";
+var nodeTypeOf = (resource) => resource.card && resource.type === "domain" ? "context-domain" : resource.card && resource.type === "system" ? "system" : NODE_TYPE[resource.type];
+var isCardType2 = (type) => type === "context-domain" || type === "system";
 async function modelToCanvas(model, seed) {
   const byId2 = new Map(model.resources.map((r) => [r.id, r]));
   const saved = model.layout?.messages ?? {};
   let nodes = sortByHierarchy(
-    model.resources.map((resource2) => {
-      const parent = resource2.parent ? byId2.get(resource2.parent) : void 0;
-      const place = saved[resource2.id];
-      const group = !resource2.card && (resource2.type === "domain" || resource2.type === "system");
-      const size = group ? place?.width && place.height ? { width: place.width, height: place.height } : getNodeDefinition(NODE_TYPE[resource2.type])?.defaultSize : void 0;
+    model.resources.map((resource) => {
+      const parent = resource.parent ? byId2.get(resource.parent) : void 0;
+      const place = saved[resource.id];
+      const group = !resource.card && (resource.type === "domain" || resource.type === "system");
+      const size = group ? place?.width && place.height ? { width: place.width, height: place.height } : getNodeDefinition(NODE_TYPE[resource.type])?.defaultSize : void 0;
       return {
-        id: resource2.id,
-        type: nodeTypeOf(resource2),
+        id: resource.id,
+        type: nodeTypeOf(resource),
         position: place ? placeOf2(place) : { x: 0, y: 0 },
-        data: resourceNodeData(resource2),
+        data: resourceNodeData(resource),
         ...size && { width: size.width, height: size.height },
         ...parent && !parent.card && (parent.type === "domain" || parent.type === "system") && {
           parentId: parent.id
@@ -2641,7 +2582,7 @@ function canvasToModel(nodes, edges, levelLayouts, base, threads = [], hotspots
       ...type === "container" && {
         containerType: fields.container_type && fields.container_type !== "database" ? fields.container_type : void 0
       },
-      ...isCardType(node.type) && { card: true },
+      ...isCardType2(node.type) && { card: true },
       ...parent && resourceTypeOf(parent.type) && { parent: parent.id }
     };
   });
@@ -2692,12 +2633,12 @@ function canvasToModel(nodes, edges, levelLayouts, base, threads = [], hotspots
   const notes = nodes.filter((node) => isWrittenOnCanvas(node.type)).map((node) => {
     const at = getAbsolutePosition(node, lookup);
     const level = node.data.level ?? void 0;
-    const resource2 = typeof node.data.resource === "string" && byId2.has(node.data.resource) ? node.data.resource : void 0;
+    const resource = typeof node.data.resource === "string" && byId2.has(node.data.resource) ? node.data.resource : void 0;
     return {
       text: String(node.data.text ?? "").slice(0, 1e3),
       ...node.type === "text" && { kind: "text" },
       ...node.type === "note" && node.data.color ? { color: node.data.color } : {},
-      ...resource2 && { resource: resource2 },
+      ...resource && { resource },
       ...typeof node.data.author === "string" && {
         author: node.data.author
       },
@@ -2728,16 +2669,16 @@ function canvasToModel(nodes, edges, levelLayouts, base, threads = [], hotspots
         team.name
       ]);
     }
-    for (const resource2 of resources) {
-      if (resource2.type === "team") continue;
+    for (const resource of resources) {
+      if (resource.type === "team") continue;
       const owners = [
         .../* @__PURE__ */ new Set([
-          ...(resource2.owners ?? []).filter((owner) => !teamNames.has(owner)),
-          ...ownedBy.get(resource2.id) ?? []
+          ...(resource.owners ?? []).filter((owner) => !teamNames.has(owner)),
+          ...ownedBy.get(resource.id) ?? []
         ])
       ];
-      if (owners.length) resource2.owners = owners;
-      else delete resource2.owners;
+      if (owners.length) resource.owners = owners;
+      else delete resource.owners;
     }
   }
   const ids = new Set(resources.map((r) => r.id));
@@ -2937,21 +2878,21 @@ async function canvasImage(container) {
 // src/studio/components/canvas-nodes.tsx
 import {
   createContext,
-  memo as memo2,
-  useCallback,
+  memo as memo3,
+  useCallback as useCallback2,
   useContext,
-  useEffect as useEffect2,
-  useMemo,
-  useRef,
-  useState as useState2
+  useEffect as useEffect4,
+  useMemo as useMemo3,
+  useRef as useRef3,
+  useState as useState4
 } from "react";
 import {
-  Handle as Handle2,
+  Handle as Handle3,
   NodeResizeControl,
   NodeResizer,
-  Position as Position2,
+  Position as Position3,
   ResizeControlVariant,
-  useReactFlow,
+  useReactFlow as useReactFlow2,
   useStoreApi as useStoreApi2,
   useUpdateNodeInternals
 } from "@xyflow/react";
@@ -3006,8 +2947,232 @@ var TeamNode = memo(function TeamNode2({ data, selected }) {
 });
 var TeamNode_default = TeamNode;
 
+// src/studio/components/ConnectChooser.tsx
+import {
+  Fragment,
+  memo as memo2,
+  useEffect as useEffect3,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState as useState3
+} from "react";
+import { Handle as Handle2, Position as Position2 } from "@xyflow/react";
+import { Plus, X } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var HIDDEN_HANDLE = {
+  opacity: 0,
+  pointerEvents: "none"
+};
+var PLACEHOLDER_CLASS = "relative rounded-xl border-2 border-dashed border-current bg-[rgb(var(--ec-card-bg))] px-3 pt-3.5 pb-2.5 opacity-50";
+var DEFAULT_COLOUR = "text-[rgb(var(--ec-accent))]";
+function PlaceholderContent({ choice }) {
+  const icon = choice ? NODE_ICONS[choice.key] : void 0;
+  const Icon = icon?.icon ?? Plus;
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("span", { className: "absolute -top-2.5 left-2.5 rounded bg-current px-1.5 py-0.5 shadow-sm", children: /* @__PURE__ */ jsxs2("span", { className: "flex items-center gap-1 text-[7px] font-bold uppercase tracking-widest text-white", children: [
+      /* @__PURE__ */ jsx2(Icon, { className: "h-2.5 w-2.5", strokeWidth: 2.5 }),
+      choice?.label ?? "New"
+    ] }) }),
+    /* @__PURE__ */ jsx2("div", { className: "truncate text-[13px] font-semibold leading-snug text-[rgb(var(--ec-page-text))]", children: choice ? `New ${choice.label}` : "New node" }),
+    /* @__PURE__ */ jsx2("div", { className: "mt-1.5 truncate text-[9px] leading-relaxed text-[rgb(var(--ec-page-text-muted))]", children: choice ? choice.summary : "Choose what it is from the list" })
+  ] });
+}
+var ConnectPlaceholderNode = memo2(function ConnectPlaceholderNode2({
+  data
+}) {
+  const { choice } = data;
+  const colour = choice && NODE_ICONS[choice.key]?.className || DEFAULT_COLOUR;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: `${PLACEHOLDER_CLASS} ${colour}`,
+      style: CONNECT_PLACEHOLDER_SIZE,
+      children: [
+        /* @__PURE__ */ jsx2(
+          Handle2,
+          {
+            type: "target",
+            position: Position2.Left,
+            isConnectable: false,
+            style: HIDDEN_HANDLE
+          }
+        ),
+        /* @__PURE__ */ jsx2(PlaceholderContent, { choice }),
+        /* @__PURE__ */ jsx2(
+          Handle2,
+          {
+            type: "source",
+            position: Position2.Right,
+            isConnectable: false,
+            style: HIDDEN_HANDLE
+          }
+        )
+      ]
+    }
+  );
+});
+var LIST_WIDTH = 288;
+var LIST_HEIGHT = 360;
+function ConnectChooser({
+  options,
+  fromName,
+  anchor,
+  onHighlight,
+  onChoose,
+  onCancel
+}) {
+  const [query, setQuery] = useState3("");
+  const [index, setIndex] = useState3(0);
+  const [picking, setPicking] = useState3(false);
+  const shown = useMemo2(
+    () => filterConnectOptions(options, query),
+    [options, query]
+  );
+  const highlighted = shown[Math.min(index, shown.length - 1)];
+  const listRef = useRef2(null);
+  useEffect3(() => setIndex(0), [query]);
+  useEffect3(
+    () => onHighlight(picking ? highlighted : void 0),
+    [picking, highlighted?.key]
+  );
+  useEffect3(() => {
+    if (!highlighted) return;
+    listRef.current?.querySelector(`[data-key="${CSS.escape(highlighted.key)}"]`)?.scrollIntoView({ block: "nearest" });
+  }, [highlighted?.key]);
+  const onKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      return onCancel();
+    }
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      setPicking(true);
+      if (!shown.length) return;
+      const step = event.key === "ArrowDown" ? 1 : -1;
+      setIndex(
+        (current) => (Math.min(current, shown.length - 1) + step + shown.length) % shown.length
+      );
+    }
+    if (event.key === "Enter" && highlighted) {
+      event.preventDefault();
+      onChoose(highlighted);
+    }
+  };
+  const left = Math.min(
+    Math.max(anchor.x, 12),
+    window.innerWidth - LIST_WIDTH - 12
+  );
+  const below2 = anchor.y + anchor.height + 8;
+  const top = below2 + LIST_HEIGHT > window.innerHeight - 12 ? Math.max(anchor.y - LIST_HEIGHT - 8, 12) : below2;
+  const suggested = shown.filter((option) => option.says);
+  const others = shown.filter((option) => !option.says);
+  const row = (option) => {
+    const { icon: Icon, className } = NODE_ICONS[option.key] ?? NODE_ICONS[option.type] ?? { icon: Plus, className: "" };
+    const active = option.key === highlighted?.key;
+    return /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        role: "option",
+        tabIndex: -1,
+        onMouseDown: (event) => event.preventDefault(),
+        "aria-selected": active,
+        "data-key": option.key,
+        onPointerMove: () => {
+          setPicking(true);
+          if (!active) setIndex(shown.indexOf(option));
+        },
+        onClick: () => onChoose(option),
+        className: `flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-left ${active ? "bg-[rgb(var(--ec-accent)/0.1)]" : ""}`,
+        children: [
+          /* @__PURE__ */ jsx2("span", { className: "flex h-7 w-7 flex-none items-center justify-center rounded-md bg-[rgb(var(--ec-content-hover))]", children: /* @__PURE__ */ jsx2(Icon, { size: 15, className }) }),
+          /* @__PURE__ */ jsxs2("span", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx2("span", { className: "block truncate text-[13px] font-medium leading-tight", children: option.label }),
+            /* @__PURE__ */ jsx2("span", { className: "block truncate text-[11px] leading-snug text-[rgb(var(--ec-page-text-muted))]", children: option.says || option.summary })
+          ] })
+        ]
+      },
+      option.key
+    );
+  };
+  const section = (title, list) => list.length > 0 && /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2(
+      "p",
+      {
+        role: "presentation",
+        className: "px-2 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-wider text-[rgb(var(--ec-page-text-muted))]",
+        children: title
+      }
+    ),
+    list.map(row)
+  ] }, title);
+  return /* @__PURE__ */ jsx2("div", { className: "fixed inset-0 z-50", onPointerDown: onCancel, children: /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      role: "dialog",
+      "aria-label": "Connect to something new",
+      onPointerDown: (event) => event.stopPropagation(),
+      className: "absolute flex flex-col rounded-lg border shadow-xl bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))]",
+      style: { left, top, width: LIST_WIDTH, maxHeight: LIST_HEIGHT },
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex flex-none items-center gap-1 border-b border-[rgb(var(--ec-page-border))] p-1.5", children: [
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              autoFocus: true,
+              value: query,
+              onChange: (event) => {
+                setPicking(true);
+                setQuery(event.target.value);
+              },
+              onKeyDown,
+              placeholder: fromName ? `Connect ${fromName} to\u2026` : "Connect to\u2026",
+              "aria-label": "What to connect to",
+              role: "combobox",
+              "aria-expanded": true,
+              "aria-controls": "studio-connect-options",
+              className: "min-w-0 flex-1 rounded-md bg-transparent px-2 py-1 text-[13px] outline-none placeholder:text-[rgb(var(--ec-page-text-muted))]"
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              onClick: onCancel,
+              "aria-label": "Cancel",
+              className: "rounded p-1 text-[rgb(var(--ec-icon-color))] hover:bg-[rgb(var(--ec-page-border)/0.5)]",
+              children: /* @__PURE__ */ jsx2(X, { size: 14 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            ref: listRef,
+            id: "studio-connect-options",
+            role: "listbox",
+            className: "min-h-0 flex-1 overflow-y-auto p-1",
+            children: shown.length ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+              section("Suggested", suggested),
+              section(
+                suggested.length ? "Everything else" : "Components",
+                others
+              )
+            ] }) : /* @__PURE__ */ jsxs2("p", { className: "px-2 py-3 text-center text-xs text-[rgb(var(--ec-page-text-muted))]", children: [
+              "Nothing called \u201C",
+              query,
+              "\u201D"
+            ] })
+          }
+        )
+      ]
+    }
+  ) });
+}
+
 // src/studio/components/canvas-nodes.tsx
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var UpdateNodeDataContext = createContext(() => {
 });
 var EditingContext = createContext(
@@ -3019,8 +3184,8 @@ var StartWritingContext = createContext(null);
 var LockedContext = createContext(false);
 var SystemGroupComponent = SystemGroupNode_default;
 function WidthHandles() {
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    /* @__PURE__ */ jsx3(
       NodeResizeControl,
       {
         position: "left",
@@ -3030,7 +3195,7 @@ function WidthHandles() {
         className: "studio-width-handle"
       }
     ),
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx3(
       NodeResizeControl,
       {
         position: "right",
@@ -3054,8 +3219,8 @@ function Writing({
 }) {
   const updateNodeData2 = useContext(UpdateNodeDataContext);
   const liveEdit = useContext(EditingContext);
-  const areaRef = useRef(null);
-  useEffect2(() => {
+  const areaRef = useRef3(null);
+  useEffect4(() => {
     if (!editing) return;
     let frame = 0;
     let tries = 0;
@@ -3078,8 +3243,8 @@ function Writing({
     area.style.height = `${area.scrollHeight}px`;
   };
   if (!editing)
-    return /* @__PURE__ */ jsx2("p", { className, style, children: text || placeholder && /* @__PURE__ */ jsx2("span", { className: "opacity-50", children: placeholder }) });
-  return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx3("p", { className, style, children: text || placeholder && /* @__PURE__ */ jsx3("span", { className: "opacity-50", children: placeholder }) });
+  return /* @__PURE__ */ jsx3(
     "textarea",
     {
       ref: (area) => {
@@ -3118,30 +3283,30 @@ var NOTE_COLORS = {
   purple: { fill: "#ede9fe", border: "#c4b5fd" },
   gray: { fill: "#f3f4f6", border: "#d1d5db" }
 };
-var StickyNote = memo2(function StickyNote2({ id, data, selected }) {
+var StickyNote = memo3(function StickyNote2({ id, data, selected }) {
   const updateNodeData2 = useContext(UpdateNodeDataContext);
-  const [editing, setEditing] = useState2(
+  const [editing, setEditing] = useState4(
     useContext(StartWritingContext) === id
   );
   const locked = useContext(LockedContext);
   const colorName = typeof data.color === "string" && NOTE_COLORS[data.color] ? data.color : "yellow";
   const color = NOTE_COLORS[colorName];
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       className: "studio-note",
       style: { background: color.fill, borderColor: color.border },
       onDoubleClick: () => !locked && setEditing(true),
       children: [
-        selected && !editing && !locked && /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx2(WidthHandles, {}),
-          /* @__PURE__ */ jsx2(
+        selected && !editing && !locked && /* @__PURE__ */ jsxs3(Fragment3, { children: [
+          /* @__PURE__ */ jsx3(WidthHandles, {}),
+          /* @__PURE__ */ jsx3(
             "div",
             {
               className: "nodrag nopan studio-note-colors",
               role: "radiogroup",
               "aria-label": "Note colour",
-              children: Object.entries(NOTE_COLORS).map(([name, { fill, border }]) => /* @__PURE__ */ jsx2(
+              children: Object.entries(NOTE_COLORS).map(([name, { fill, border }]) => /* @__PURE__ */ jsx3(
                 "button",
                 {
                   role: "radio",
@@ -3159,7 +3324,7 @@ var StickyNote = memo2(function StickyNote2({ id, data, selected }) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx3(
           Writing,
           {
             id,
@@ -3170,12 +3335,12 @@ var StickyNote = memo2(function StickyNote2({ id, data, selected }) {
             className: "studio-note-body"
           }
         ),
-        /* @__PURE__ */ jsxs2("span", { className: "studio-note-level", children: [
+        /* @__PURE__ */ jsxs3("span", { className: "studio-note-level", children: [
           "L",
           getNoteLevel({ type: "note", data }),
           " note"
         ] }),
-        typeof data.createdAt === "number" && /* @__PURE__ */ jsx2("span", { className: "studio-note-date", children: new Date(data.createdAt).toLocaleDateString(void 0, {
+        typeof data.createdAt === "number" && /* @__PURE__ */ jsx3("span", { className: "studio-note-date", children: new Date(data.createdAt).toLocaleDateString(void 0, {
           day: "numeric",
           month: "short"
         }) })
@@ -3203,18 +3368,18 @@ var followPointer = (onMove, onEnd) => {
   window.addEventListener("pointerup", end);
   window.addEventListener("pointercancel", end);
 };
-var TextNode = memo2(function TextNode2({ id, data, selected }) {
-  const [editing, setEditing] = useState2(
+var TextNode = memo3(function TextNode2({ id, data, selected }) {
+  const [editing, setEditing] = useState4(
     useContext(StartWritingContext) === id
   );
-  const { deleteElements } = useReactFlow();
+  const { deleteElements } = useReactFlow2();
   const updateNodeData2 = useContext(UpdateNodeDataContext);
   const liveEdit = useContext(EditingContext);
-  const boxRef = useRef(null);
+  const boxRef = useRef3(null);
   const savedFont = typeof data.fontSize === "number" ? data.fontSize : TEXT_FONT_SIZE;
   const savedAngle = typeof data.angle === "number" ? data.angle : 0;
-  const [scaling, setScaling] = useState2(null);
-  const [turning, setTurning] = useState2(null);
+  const [scaling, setScaling] = useState4(null);
+  const [turning, setTurning] = useState4(null);
   const fontSize = scaling ?? savedFont;
   const angle = turning ?? savedAngle;
   const startScaling = (corner) => (event) => {
@@ -3280,7 +3445,7 @@ var TextNode = memo2(function TextNode2({ id, data, selected }) {
   };
   const locked = useContext(LockedContext);
   const framed = (selected || scaling !== null || turning !== null) && !editing && !locked;
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       ref: boxRef,
@@ -3288,8 +3453,8 @@ var TextNode = memo2(function TextNode2({ id, data, selected }) {
       style: angle ? { transform: `rotate(${angle}deg)` } : void 0,
       onDoubleClick: () => !locked && setEditing(true),
       children: [
-        framed && /* @__PURE__ */ jsxs2(Fragment, { children: [
-          TEXT_CORNERS.map((corner) => /* @__PURE__ */ jsx2(
+        framed && /* @__PURE__ */ jsxs3(Fragment3, { children: [
+          TEXT_CORNERS.map((corner) => /* @__PURE__ */ jsx3(
             "span",
             {
               className: `nodrag nopan studio-text-corner is-${corner}`,
@@ -3297,7 +3462,7 @@ var TextNode = memo2(function TextNode2({ id, data, selected }) {
             },
             corner
           )),
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx3(
             "span",
             {
               className: "nodrag nopan studio-text-turn",
@@ -3306,7 +3471,7 @@ var TextNode = memo2(function TextNode2({ id, data, selected }) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx3(
           Writing,
           {
             id,
@@ -3327,42 +3492,42 @@ var useDomainData = ({
   type,
   data,
   parentId
-}) => useMemo(() => {
+}) => useMemo3(() => {
   const isDomain2 = type === GROUP_TYPES.domain || type === "context-domain";
   return isDomain2 && parentId && data.subdomain === void 0 ? { ...data, subdomain: true } : data;
 }, [type, data, parentId]);
-var EntityCard = memo2(function EntityCard2(props) {
-  const data = useMemo(
+var EntityCard = memo3(function EntityCard2(props) {
+  const data = useMemo3(
     () => ({ ...props.data, entity: { data: props.data.entity ?? {} } }),
     [props.data]
   );
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsx2(Entity_default, { ...props, data }),
-    /* @__PURE__ */ jsx2(
-      Handle2,
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    /* @__PURE__ */ jsx3(Entity_default, { ...props, data }),
+    /* @__PURE__ */ jsx3(
+      Handle3,
       {
         type: "source",
-        position: Position2.Right,
+        position: Position3.Right,
         id: ENTITY_SOURCE_HANDLE,
         className: "studio-entity-source"
       }
     )
   ] });
 });
-var DomainCard = memo2(function DomainCard2(props) {
-  return /* @__PURE__ */ jsx2(DomainCard_default, { ...props, data: useDomainData(props) });
+var DomainCard = memo3(function DomainCard2(props) {
+  return /* @__PURE__ */ jsx3(DomainCard_default, { ...props, data: useDomainData(props) });
 });
-var GroupNode = memo2(function GroupNode2(props) {
+var GroupNode = memo3(function GroupNode2(props) {
   const isDropTarget = useContext(DropTargetContext) === props.id;
   const locked = useContext(LockedContext);
   const data = useDomainData(props);
   const store = useStoreApi2();
   const updateNodeInternals = useUpdateNodeInternals();
-  useEffect2(() => {
+  useEffect4(() => {
     updateNodeInternals(props.id);
   }, [updateNodeInternals, props.id, props.width, props.height]);
-  const contents = useRef(null);
-  const onResizeStart = useCallback(() => {
+  const contents = useRef3(null);
+  const onResizeStart = useCallback2(() => {
     const { nodeLookup } = store.getState();
     const container = nodeLookup.get(props.id);
     const children = [...nodeLookup.values()].filter(
@@ -3401,7 +3566,7 @@ var GroupNode = memo2(function GroupNode2(props) {
       )
     };
   }, [store, props.id]);
-  const shouldResize = useCallback(
+  const shouldResize = useCallback2(
     (_, {
       x,
       y,
@@ -3413,8 +3578,8 @@ var GroupNode = memo2(function GroupNode2(props) {
     },
     []
   );
-  return /* @__PURE__ */ jsxs2("div", { style: { width: "100%", height: "100%", position: "relative" }, children: [
-    /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs3("div", { style: { width: "100%", height: "100%", position: "relative" }, children: [
+    /* @__PURE__ */ jsx3(
       NodeResizer,
       {
         isVisible: props.selected && !locked,
@@ -3426,16 +3591,16 @@ var GroupNode = memo2(function GroupNode2(props) {
         handleClassName: "!h-2.5 !w-2.5 !rounded-sm !border-2 !bg-[rgb(var(--ec-card-bg))] !border-[rgb(var(--ec-accent))]"
       }
     ),
-    /* @__PURE__ */ jsx2(SystemGroupComponent, { ...props, data }),
-    /* @__PURE__ */ jsx2("div", { className: "ec-group-grip absolute inset-x-0 -top-3 h-[60px] cursor-grab" }),
+    /* @__PURE__ */ jsx3(SystemGroupComponent, { ...props, data }),
+    /* @__PURE__ */ jsx3("div", { className: "ec-group-grip absolute inset-x-0 -top-3 h-[60px] cursor-grab" }),
     isDropTarget ? (
       // What's dragged over it goes in it when it's dropped
-      /* @__PURE__ */ jsx2("div", { className: "ec-drop-target", children: /* @__PURE__ */ jsxs2("span", { className: "ec-drop-target-label", children: [
+      /* @__PURE__ */ jsx3("div", { className: "ec-drop-target", children: /* @__PURE__ */ jsxs3("span", { className: "ec-drop-target-label", children: [
         "Drop to add to",
         " ",
         getNodeName(props.type, props.data, "this container")
       ] }) })
-    ) : props.selected && /* @__PURE__ */ jsx2("div", { className: "ec-group-selected" })
+    ) : props.selected && /* @__PURE__ */ jsx3("div", { className: "ec-group-selected" })
   ] });
 });
 var components = {
@@ -3453,7 +3618,9 @@ var components = {
   team: TeamNode,
   // Domains and systems as containers
   [GROUP_TYPES.domain]: GroupNode,
-  [GROUP_TYPES.system]: GroupNode
+  [GROUP_TYPES.system]: GroupNode,
+  // Where a connection let go of on empty canvas makes something new, until what it is is chosen
+  [CONNECT_PLACEHOLDER]: ConnectPlaceholderNode
 };
 var nodeTypes = Object.fromEntries(
   Object.entries(components).map(([type, component]) => [
@@ -3465,17 +3632,17 @@ var nodeTypes = Object.fromEntries(
 // src/studio/components/Comments.tsx
 import {
   createContext as createContext2,
-  memo as memo3,
-  useCallback as useCallback2,
+  memo as memo4,
+  useCallback as useCallback3,
   useContext as useContext2,
-  useEffect as useEffect3,
-  useRef as useRef2,
-  useState as useState4
+  useEffect as useEffect5,
+  useRef as useRef4,
+  useState as useState6
 } from "react";
 import { createPortal } from "react-dom";
 import {
   useInternalNode,
-  useReactFlow as useReactFlow2
+  useReactFlow as useReactFlow3
 } from "@xyflow/react";
 import {
   Check,
@@ -3483,7 +3650,7 @@ import {
   Maximize2,
   RotateCcw,
   Trash2,
-  X
+  X as X2
 } from "lucide-react";
 
 // src/studio/components/status.ts
@@ -3532,15 +3699,15 @@ var CANVAS_STATUS_LOOK = {
 };
 
 // src/studio/components/Picture.tsx
-import { useState as useState3 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { useState as useState5 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function Picture({
   src,
   className = "absolute inset-0 h-full w-full"
 }) {
-  const [failed, setFailed] = useState3();
+  const [failed, setFailed] = useState5();
   if (!src || failed === src) return null;
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "img",
     {
       src,
@@ -3555,15 +3722,15 @@ function Picture({
 
 // src/studio/components/ClientLogos.tsx
 import { Bot } from "lucide-react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var ClaudeLogo = (props) => /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", "aria-hidden": true, ...props, children: /* @__PURE__ */ jsx4(
+import { jsx as jsx5 } from "react/jsx-runtime";
+var ClaudeLogo = (props) => /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", "aria-hidden": true, ...props, children: /* @__PURE__ */ jsx5(
   "path",
   {
     fill: "#D97757",
     d: "M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z"
   }
 ) });
-var ClaudeCodeLogo = (props) => /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", "aria-hidden": true, ...props, children: /* @__PURE__ */ jsx4(
+var ClaudeCodeLogo = (props) => /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", "aria-hidden": true, ...props, children: /* @__PURE__ */ jsx5(
   "path",
   {
     fill: "#D97757",
@@ -3572,14 +3739,14 @@ var ClaudeCodeLogo = (props) => /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 2
     d: "M20.998 10.949H24v3.102h-3v3.028h-1.487V20H18v-2.921h-1.487V20H15v-2.921H9V20H7.488v-2.921H6V20H4.487v-2.921H3V14.05H0V10.95h3V5h17.998v5.949zM6 10.949h1.488V8.102H6v2.847zm10.51 0H18V8.102h-1.49v2.847z"
   }
 ) });
-var OpenAILogo = (props) => /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", "aria-hidden": true, ...props, children: /* @__PURE__ */ jsx4(
+var OpenAILogo = (props) => /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", "aria-hidden": true, ...props, children: /* @__PURE__ */ jsx5(
   "path",
   {
     fill: "currentColor",
     d: "M9.205 8.658v-2.26c0-.19.072-.333.238-.428l4.543-2.616c.619-.357 1.356-.523 2.117-.523 2.854 0 4.662 2.212 4.662 4.566 0 .167 0 .357-.024.547l-4.71-2.759a.797.797 0 00-.856 0l-5.97 3.473zm10.609 8.8V12.06c0-.333-.143-.57-.429-.737l-5.97-3.473 1.95-1.118a.433.433 0 01.476 0l4.543 2.617c1.309.76 2.189 2.378 2.189 3.948 0 1.808-1.07 3.473-2.76 4.163zM7.802 12.703l-1.95-1.142c-.167-.095-.239-.238-.239-.428V5.899c0-2.545 1.95-4.472 4.591-4.472 1 0 1.927.333 2.712.928L8.23 5.067c-.285.166-.428.404-.428.737v6.898zM12 15.128l-2.795-1.57v-3.33L12 8.658l2.795 1.57v3.33L12 15.128zm1.796 7.23c-1 0-1.927-.332-2.712-.927l4.686-2.712c.285-.166.428-.404.428-.737v-6.898l1.974 1.142c.167.095.238.238.238.428v5.233c0 2.545-1.974 4.472-4.614 4.472zm-5.637-5.303l-4.544-2.617c-1.308-.761-2.188-2.378-2.188-3.948A4.482 4.482 0 014.21 6.327v5.423c0 .333.143.571.428.738l5.947 3.449-1.95 1.118a.432.432 0 01-.476 0zm-.262 3.9c-2.688 0-4.662-2.021-4.662-4.519 0-.19.024-.38.047-.57l4.686 2.71c.286.167.571.167.856 0l5.97-3.448v2.26c0 .19-.07.333-.237.428l-4.543 2.616c-.619.357-1.356.523-2.117.523zm5.899 2.83a5.947 5.947 0 005.827-4.756C22.287 18.339 24 15.84 24 13.296c0-1.665-.713-3.282-1.998-4.448.119-.5.19-.999.19-1.498 0-3.401-2.759-5.947-5.946-5.947-.642 0-1.26.095-1.88.31A5.962 5.962 0 0010.205 0a5.947 5.947 0 00-5.827 4.757C1.713 5.447 0 7.945 0 10.49c0 1.666.713 3.283 1.998 4.448-.119.5-.19 1-.19 1.499 0 3.401 2.759 5.946 5.946 5.946.642 0 1.26-.095 1.88-.309a5.96 5.96 0 004.162 1.713z"
   }
 ) });
-var CursorLogo = (props) => /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", "aria-hidden": true, ...props, children: /* @__PURE__ */ jsx4(
+var CursorLogo = (props) => /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", "aria-hidden": true, ...props, children: /* @__PURE__ */ jsx5(
   "path",
   {
     fill: "currentColor",
@@ -3599,18 +3766,18 @@ function AgentMark({
   size = 14
 }) {
   const Logo = agentLogoFor(name);
-  return Logo ? /* @__PURE__ */ jsx4(
+  return Logo ? /* @__PURE__ */ jsx5(
     "span",
     {
       className: "flex flex-none items-center justify-center rounded-full bg-white",
       style: { width: size + 4, height: size + 4, color: "#111827" },
-      children: /* @__PURE__ */ jsx4(Logo, { width: size - 2, height: size - 2 })
+      children: /* @__PURE__ */ jsx5(Logo, { width: size - 2, height: size - 2 })
     }
-  ) : /* @__PURE__ */ jsx4(Bot, { size });
+  ) : /* @__PURE__ */ jsx5(Bot, { size });
 }
 
 // src/studio/components/Comments.tsx
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var initials = (name) => {
   const words = name.trim().split(/\s+/).filter(Boolean);
   return (words.length > 1 ? words.map((word) => word[0]).join("") : name.trim()).slice(0, 2).toUpperCase();
@@ -3659,7 +3826,7 @@ function Avatar({
   muted,
   size = "h-6 w-6"
 }) {
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "span",
     {
       title: author.name,
@@ -3668,8 +3835,8 @@ function Avatar({
         backgroundColor: muted ? "rgb(var(--ec-page-text-muted))" : author.color
       },
       children: [
-        author.agent ? /* @__PURE__ */ jsx5(AgentMark, { name: author.name, size: 13 }) : initials(author.name),
-        /* @__PURE__ */ jsx5(
+        author.agent ? /* @__PURE__ */ jsx6(AgentMark, { name: author.name, size: 13 }) : initials(author.name),
+        /* @__PURE__ */ jsx6(
           Picture,
           {
             src: author.picture,
@@ -3689,11 +3856,11 @@ function Pin({
   onClick,
   onDrag
 }) {
-  const drag = useRef2(null);
-  const [hovered, setHovered] = useState4(false);
-  const hoverTimer = useRef2(void 0);
-  useEffect3(() => () => clearTimeout(hoverTimer.current), []);
-  const [pressed, setPressed] = useState4(false);
+  const drag = useRef4(null);
+  const [hovered, setHovered] = useState6(false);
+  const hoverTimer = useRef4(void 0);
+  useEffect5(() => () => clearTimeout(hoverTimer.current), []);
+  const [pressed, setPressed] = useState6(false);
   const tipOf = (event) => ({
     x: event.clientX - drag.current.grab.x,
     y: event.clientY - drag.current.grab.y
@@ -3701,7 +3868,7 @@ function Pin({
   const people = thread ? participantsOf(thread) : [author];
   const [first, ...rest] = thread?.messages ?? [];
   const expanded = !!thread && !!first && hovered && !active && !pressed;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "button",
     {
       onPointerEnter: () => {
@@ -3761,9 +3928,9 @@ function Pin({
       style: selected ? {
         boxShadow: "0 0 0 2px rgb(var(--ec-card-bg)), 0 0 0 4px rgb(var(--ec-button-bg))"
       } : void 0,
-      children: expanded ? /* @__PURE__ */ jsxs3("span", { className: "block space-y-1 px-1.5 py-1", children: [
-        /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx5("span", { className: "flex -space-x-0.5", children: people.slice(0, MAX_PIN_AVATARS).map((person) => /* @__PURE__ */ jsx5(
+      children: expanded ? /* @__PURE__ */ jsxs4("span", { className: "block space-y-1 px-1.5 py-1", children: [
+        /* @__PURE__ */ jsxs4("span", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx6("span", { className: "flex -space-x-0.5", children: people.slice(0, MAX_PIN_AVATARS).map((person) => /* @__PURE__ */ jsx6(
             Avatar,
             {
               author: person,
@@ -3772,26 +3939,26 @@ function Pin({
             },
             person.name
           )) }),
-          /* @__PURE__ */ jsx5("span", { className: "min-w-0 truncate text-xs font-semibold", children: thread.author.name }),
-          /* @__PURE__ */ jsx5("span", { className: "shrink-0 text-[11px] text-[rgb(var(--ec-page-text-muted))]", children: timeAgo(first.createdAt) })
+          /* @__PURE__ */ jsx6("span", { className: "min-w-0 truncate text-xs font-semibold", children: thread.author.name }),
+          /* @__PURE__ */ jsx6("span", { className: "shrink-0 text-[11px] text-[rgb(var(--ec-page-text-muted))]", children: timeAgo(first.createdAt) })
         ] }),
-        /* @__PURE__ */ jsx5("span", { className: "line-clamp-3 block whitespace-pre-wrap break-words text-xs", children: first.text }),
-        (rest.length > 0 || resolved) && /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-2 text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))]", children: [
-          rest.length > 0 && /* @__PURE__ */ jsx5("span", { children: repliesLabel(rest.length) }),
-          resolved && /* @__PURE__ */ jsxs3(
+        /* @__PURE__ */ jsx6("span", { className: "line-clamp-3 block whitespace-pre-wrap break-words text-xs", children: first.text }),
+        (rest.length > 0 || resolved) && /* @__PURE__ */ jsxs4("span", { className: "flex items-center gap-2 text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))]", children: [
+          rest.length > 0 && /* @__PURE__ */ jsx6("span", { children: repliesLabel(rest.length) }),
+          resolved && /* @__PURE__ */ jsxs4(
             "span",
             {
               className: `flex items-center gap-0.5 ${STATUS.success.text}`,
               children: [
-                /* @__PURE__ */ jsx5(Check, { size: 11 }),
+                /* @__PURE__ */ jsx6(Check, { size: 11 }),
                 " Resolved"
               ]
             }
           )
         ] })
-      ] }) : /* @__PURE__ */ jsxs3("span", { className: "flex -space-x-1", children: [
-        people.slice(0, MAX_PIN_AVATARS).map((person) => /* @__PURE__ */ jsx5(Avatar, { author: person, muted: resolved }, person.name)),
-        people.length > MAX_PIN_AVATARS && /* @__PURE__ */ jsxs3("span", { className: "flex h-6 w-6 items-center justify-center rounded-full text-[10px] font-semibold ring-2 ring-[rgb(var(--ec-card-bg))] bg-[rgb(var(--ec-page-border))]", children: [
+      ] }) : /* @__PURE__ */ jsxs4("span", { className: "flex -space-x-1", children: [
+        people.slice(0, MAX_PIN_AVATARS).map((person) => /* @__PURE__ */ jsx6(Avatar, { author: person, muted: resolved }, person.name)),
+        people.length > MAX_PIN_AVATARS && /* @__PURE__ */ jsxs4("span", { className: "flex h-6 w-6 items-center justify-center rounded-full text-[10px] font-semibold ring-2 ring-[rgb(var(--ec-card-bg))] bg-[rgb(var(--ec-page-border))]", children: [
           "+",
           people.length - MAX_PIN_AVATARS
         ] })
@@ -3804,14 +3971,14 @@ function Composer({
   onSubmit,
   onCancel
 }) {
-  const [text, setText] = useState4("");
+  const [text, setText] = useState6("");
   const submit = () => {
     if (!text.trim()) return;
     onSubmit(text.trim());
     setText("");
   };
-  return /* @__PURE__ */ jsxs3("div", { className: "flex items-end gap-2 p-2", children: [
-    /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs4("div", { className: "flex items-end gap-2 p-2", children: [
+    /* @__PURE__ */ jsx6(
       "textarea",
       {
         autoFocus: true,
@@ -3829,7 +3996,7 @@ function Composer({
         className: "max-h-32 min-h-[34px] flex-1 resize-none rounded-md border px-2 py-1.5 text-sm bg-[rgb(var(--ec-input-bg))] border-[rgb(var(--ec-input-border))] text-[rgb(var(--ec-input-text))]"
       }
     ),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       "button",
       {
         onClick: submit,
@@ -3845,7 +4012,7 @@ function IconButton({
   onClick,
   children
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "button",
     {
       title,
@@ -3862,14 +4029,14 @@ function FloatingPanel({
   children,
   onClickOutside
 }) {
-  const ref = useRef2(null);
-  const [offset, setOffset] = useState4({ x: 0, y: 0 });
-  const offsetRef = useRef2(offset);
+  const ref = useRef4(null);
+  const [offset, setOffset] = useState6({ x: 0, y: 0 });
+  const offsetRef = useRef4(offset);
   offsetRef.current = offset;
-  const clickedOutside = useRef2(onClickOutside);
+  const clickedOutside = useRef4(onClickOutside);
   clickedOutside.current = onClickOutside;
   const closesOnClickOutside = !!onClickOutside;
-  useEffect3(() => {
+  useEffect5(() => {
     if (!closesOnClickOutside) return;
     const onPointerDown = (event) => {
       const element = ref.current;
@@ -3882,7 +4049,7 @@ function FloatingPanel({
     document.addEventListener("pointerdown", onPointerDown, true);
     return () => document.removeEventListener("pointerdown", onPointerDown, true);
   }, [closesOnClickOutside]);
-  useEffect3(() => {
+  useEffect5(() => {
     const element = ref.current;
     if (!element) return;
     const fit = () => {
@@ -3898,7 +4065,7 @@ function FloatingPanel({
     observer.observe(element);
     return () => observer.disconnect();
   }, []);
-  const startDrag = useCallback2((event) => {
+  const startDrag = useCallback3((event) => {
     if (event.button !== 0 || event.target.closest("button"))
       return;
     event.preventDefault();
@@ -3919,7 +4086,7 @@ function FloatingPanel({
     element.addEventListener("pointerup", end);
     element.addEventListener("pointercancel", end);
   }, []);
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       ref,
@@ -3929,7 +4096,7 @@ function FloatingPanel({
         top: offset.y,
         maxHeight: PANEL_MAX_HEIGHT_PX
       },
-      children: /* @__PURE__ */ jsx5(DragPanelContext.Provider, { value: startDrag, children })
+      children: /* @__PURE__ */ jsx6(DragPanelContext.Provider, { value: startDrag, children })
     }
   );
 }
@@ -3941,21 +4108,21 @@ function ThreadPopover({
   onClose,
   onExpand
 }) {
-  const listRef = useRef2(null);
+  const listRef = useRef4(null);
   const startDrag = useContext2(DragPanelContext);
-  useEffect3(() => {
+  useEffect5(() => {
     listRef.current?.scrollTo({ top: listRef.current.scrollHeight });
   }, [thread.messages.length]);
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(Fragment4, { children: [
+    /* @__PURE__ */ jsxs4(
       "div",
       {
         onPointerDown: startDrag ?? void 0,
         title: startDrag ? "Drag to move" : void 0,
         className: `flex shrink-0 select-none items-center justify-between border-b px-3 py-2 border-[rgb(var(--ec-page-border))] ${startDrag ? "cursor-move" : ""}`,
         children: [
-          /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-1 text-xs font-semibold", children: [
-            startDrag && /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsxs4("span", { className: "flex items-center gap-1 text-xs font-semibold", children: [
+            startDrag && /* @__PURE__ */ jsx6(
               GripVertical,
               {
                 size: 14,
@@ -3965,51 +4132,51 @@ function ThreadPopover({
             ),
             thread.resolved ? "Resolved thread" : "Thread"
           ] }),
-          /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-0.5", children: [
-            /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsxs4("span", { className: "flex items-center gap-0.5", children: [
+            /* @__PURE__ */ jsx6(
               IconButton,
               {
                 title: thread.resolved ? "Reopen" : "Resolve",
                 onClick: () => onResolve(!thread.resolved),
-                children: thread.resolved ? /* @__PURE__ */ jsx5(RotateCcw, { size: 14 }) : /* @__PURE__ */ jsx5(Check, { size: 14 })
+                children: thread.resolved ? /* @__PURE__ */ jsx6(RotateCcw, { size: 14 }) : /* @__PURE__ */ jsx6(Check, { size: 14 })
               }
             ),
-            /* @__PURE__ */ jsx5(IconButton, { title: "Delete thread", onClick: onDelete, children: /* @__PURE__ */ jsx5(Trash2, { size: 14 }) }),
-            onExpand && /* @__PURE__ */ jsx5(IconButton, { title: "Open bigger", onClick: onExpand, children: /* @__PURE__ */ jsx5(Maximize2, { size: 14 }) }),
-            /* @__PURE__ */ jsx5(IconButton, { title: "Close", onClick: onClose, children: /* @__PURE__ */ jsx5(X, { size: 14 }) })
+            /* @__PURE__ */ jsx6(IconButton, { title: "Delete thread", onClick: onDelete, children: /* @__PURE__ */ jsx6(Trash2, { size: 14 }) }),
+            onExpand && /* @__PURE__ */ jsx6(IconButton, { title: "Open bigger", onClick: onExpand, children: /* @__PURE__ */ jsx6(Maximize2, { size: 14 }) }),
+            /* @__PURE__ */ jsx6(IconButton, { title: "Close", onClick: onClose, children: /* @__PURE__ */ jsx6(X2, { size: 14 }) })
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       "div",
       {
         ref: listRef,
         className: "min-h-0 flex-1 space-y-3 overflow-y-auto px-3 py-3",
-        children: thread.messages.map((message) => /* @__PURE__ */ jsxs3("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsxs3(
+        children: thread.messages.map((message) => /* @__PURE__ */ jsxs4("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsxs4(
             "span",
             {
               className: "relative flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[10px] font-semibold text-white",
               style: { backgroundColor: message.author.color },
               children: [
-                message.author.agent ? /* @__PURE__ */ jsx5(AgentMark, { name: message.author.name, size: 13 }) : initials(message.author.name),
-                /* @__PURE__ */ jsx5(Picture, { src: message.author.picture })
+                message.author.agent ? /* @__PURE__ */ jsx6(AgentMark, { name: message.author.name, size: 13 }) : initials(message.author.name),
+                /* @__PURE__ */ jsx6(Picture, { src: message.author.picture })
               ]
             }
           ),
-          /* @__PURE__ */ jsxs3("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsxs3("p", { className: "text-xs", children: [
-              /* @__PURE__ */ jsx5("span", { className: "font-semibold", children: message.author.name }),
+          /* @__PURE__ */ jsxs4("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxs4("p", { className: "text-xs", children: [
+              /* @__PURE__ */ jsx6("span", { className: "font-semibold", children: message.author.name }),
               " ",
-              /* @__PURE__ */ jsx5("span", { className: "text-[rgb(var(--ec-page-text-muted))]", children: timeAgo(message.createdAt) })
+              /* @__PURE__ */ jsx6("span", { className: "text-[rgb(var(--ec-page-text-muted))]", children: timeAgo(message.createdAt) })
             ] }),
-            /* @__PURE__ */ jsx5("p", { className: "whitespace-pre-wrap break-words text-sm", children: message.text })
+            /* @__PURE__ */ jsx6("p", { className: "whitespace-pre-wrap break-words text-sm", children: message.text })
           ] })
         ] }, message.id))
       }
     ),
-    /* @__PURE__ */ jsx5("div", { className: "shrink-0 border-t border-[rgb(var(--ec-page-border))]", children: /* @__PURE__ */ jsx5(Composer, { placeholder: "Reply", onSubmit: onReply, onCancel: onClose }) })
+    /* @__PURE__ */ jsx6("div", { className: "shrink-0 border-t border-[rgb(var(--ec-page-border))]", children: /* @__PURE__ */ jsx6(Composer, { placeholder: "Reply", onSubmit: onReply, onCancel: onClose }) })
   ] });
 }
 function ThreadDialog({
@@ -4020,12 +4187,12 @@ function ThreadDialog({
   onShrink,
   onClose
 }) {
-  useEffect3(() => {
+  useEffect5(() => {
     const onKeyDown = (event) => event.key === "Escape" && onShrink();
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [onShrink]);
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4",
@@ -4038,14 +4205,14 @@ function ThreadDialog({
       onDoubleClick: (event) => event.stopPropagation(),
       onContextMenu: (event) => event.stopPropagation(),
       onWheel: (event) => event.stopPropagation(),
-      children: /* @__PURE__ */ jsx5(
+      children: /* @__PURE__ */ jsx6(
         "div",
         {
           role: "dialog",
           "aria-label": "Comment thread",
           onClick: (event) => event.stopPropagation(),
           className: "flex max-h-[80vh] w-full max-w-xl flex-col rounded-xl border shadow-2xl bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))]",
-          children: /* @__PURE__ */ jsx5(
+          children: /* @__PURE__ */ jsx6(
             ThreadPopover,
             {
               thread,
@@ -4068,7 +4235,7 @@ function PinAt({
   const node = useInternalNode(anchor.nodeId ?? "");
   const origin = anchor.nodeId && anchor.offset ? node?.internals.positionAbsolute : void 0;
   const { x, y } = origin && anchor.offset ? { x: origin.x + anchor.offset.x, y: origin.y + anchor.offset.y } : anchor.position;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       className: "absolute",
@@ -4079,11 +4246,11 @@ function PinAt({
         transformOrigin: "0 0",
         zIndex
       },
-      children: /* @__PURE__ */ jsx5("div", { className: "nopan nodrag nowheel pointer-events-auto absolute bottom-0 left-0", children })
+      children: /* @__PURE__ */ jsx6("div", { className: "nopan nodrag nowheel pointer-events-auto absolute bottom-0 left-0", children })
     }
   );
 }
-var CommentLayer = memo3(function CommentLayer2({
+var CommentLayer = memo4(function CommentLayer2({
   threads,
   author,
   openThreadId,
@@ -4101,12 +4268,12 @@ var CommentLayer = memo3(function CommentLayer2({
   selectionOffset,
   live
 }) {
-  const layer = useRef2(null);
+  const layer = useRef4(null);
   useCounterScale(layer);
-  const { screenToFlowPosition, getInternalNode } = useReactFlow2();
-  const [moving, setMoving] = useState4(null);
+  const { screenToFlowPosition, getInternalNode } = useReactFlow3();
+  const [moving, setMoving] = useState6(null);
   const remote = useRemoteMoves(live, "comment");
-  const [expandedId, setExpandedId] = useState4(null);
+  const [expandedId, setExpandedId] = useState6(null);
   const expanded = expandedId && expandedId === openThreadId ? threads.find((thread) => thread.id === expandedId) : void 0;
   const nodeUnder = (point) => {
     for (const element of document.elementsFromPoint(point.x, point.y)) {
@@ -4131,7 +4298,7 @@ var CommentLayer = memo3(function CommentLayer2({
   const visible = threads.filter(
     (thread) => showResolved || !thread.resolved || thread.id === openThreadId
   );
-  return /* @__PURE__ */ jsx5(CanvasPortal, { children: /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsx6(CanvasPortal, { children: /* @__PURE__ */ jsxs4(
     "div",
     {
       ref: layer,
@@ -4140,7 +4307,7 @@ var CommentLayer = memo3(function CommentLayer2({
       children: [
         visible.map((thread) => {
           const isOpen = thread.id === openThreadId;
-          return /* @__PURE__ */ jsxs3(
+          return /* @__PURE__ */ jsxs4(
             PinAt,
             {
               anchor: moving?.threadId === thread.id ? moving.anchor : remote.has(thread.id) ? { position: remote.get(thread.id) } : selectionOffset && !thread.nodeId && selectedIds.has(thread.id) ? {
@@ -4151,7 +4318,7 @@ var CommentLayer = memo3(function CommentLayer2({
               } : thread,
               zIndex: isOpen ? 2 : 1,
               children: [
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx6(
                   Pin,
                   {
                     author: thread.author,
@@ -4172,7 +4339,7 @@ var CommentLayer = memo3(function CommentLayer2({
                     }
                   }
                 ),
-                isOpen && expanded?.id !== thread.id && /* @__PURE__ */ jsx5(FloatingPanel, { onClickOutside: () => onOpen(null), children: /* @__PURE__ */ jsx5(
+                isOpen && expanded?.id !== thread.id && /* @__PURE__ */ jsx6(FloatingPanel, { onClickOutside: () => onOpen(null), children: /* @__PURE__ */ jsx6(
                   ThreadPopover,
                   {
                     thread,
@@ -4189,7 +4356,7 @@ var CommentLayer = memo3(function CommentLayer2({
           );
         }),
         expanded && createPortal(
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             ThreadDialog,
             {
               thread: expanded,
@@ -4208,8 +4375,8 @@ var CommentLayer = memo3(function CommentLayer2({
           ),
           document.body
         ),
-        draft && /* @__PURE__ */ jsxs3(PinAt, { anchor: draft, zIndex: 3, children: [
-          /* @__PURE__ */ jsx5(
+        draft && /* @__PURE__ */ jsxs4(PinAt, { anchor: draft, zIndex: 3, children: [
+          /* @__PURE__ */ jsx6(
             Pin,
             {
               author,
@@ -4217,7 +4384,7 @@ var CommentLayer = memo3(function CommentLayer2({
               onDrag: (tip, phase) => onMoveDraft(anchorFor(tip, phase))
             }
           ),
-          /* @__PURE__ */ jsx5(FloatingPanel, { children: /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(FloatingPanel, { children: /* @__PURE__ */ jsx6(
             Composer,
             {
               placeholder: "Add a comment",
@@ -4237,9 +4404,9 @@ function CommentList({
   onOpen
 }) {
   const shown = threads.filter((thread) => showResolved || !thread.resolved).reverse();
-  return /* @__PURE__ */ jsxs3("div", { className: "flex min-h-0 flex-1 flex-col", children: [
-    /* @__PURE__ */ jsxs3("label", { className: "mx-3 mb-2 flex items-center gap-2 text-xs text-[rgb(var(--ec-page-text-muted))]", children: [
-      /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs4("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+    /* @__PURE__ */ jsxs4("label", { className: "mx-3 mb-2 flex items-center gap-2 text-xs text-[rgb(var(--ec-page-text-muted))]", children: [
+      /* @__PURE__ */ jsx6(
         "input",
         {
           type: "checkbox",
@@ -4249,27 +4416,27 @@ function CommentList({
       ),
       "Show resolved"
     ] }),
-    /* @__PURE__ */ jsxs3("div", { className: "min-h-0 flex-1 space-y-1.5 overflow-y-auto px-3 pb-3", children: [
-      shown.length === 0 && /* @__PURE__ */ jsx5("p", { className: "py-6 text-center text-xs text-[rgb(var(--ec-page-text-muted))]", children: "No comments yet. Right click the canvas, or press C, to add one." }),
+    /* @__PURE__ */ jsxs4("div", { className: "min-h-0 flex-1 space-y-1.5 overflow-y-auto px-3 pb-3", children: [
+      shown.length === 0 && /* @__PURE__ */ jsx6("p", { className: "py-6 text-center text-xs text-[rgb(var(--ec-page-text-muted))]", children: "No comments yet. Right click the canvas, or press C, to add one." }),
       shown.map((thread) => {
         const [first, ...replies] = thread.messages;
-        return /* @__PURE__ */ jsxs3(
+        return /* @__PURE__ */ jsxs4(
           "button",
           {
             onClick: () => onOpen(thread),
             className: `w-full space-y-1 rounded-md border px-2.5 py-2 text-left bg-[rgb(var(--ec-page-bg))] border-[rgb(var(--ec-page-border))] hover:border-[rgb(var(--ec-accent))] ${thread.resolved ? "opacity-60" : ""}`,
             children: [
-              /* @__PURE__ */ jsxs3("p", { className: "flex items-center gap-1.5 text-xs", children: [
-                /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsxs4("p", { className: "flex items-center gap-1.5 text-xs", children: [
+                /* @__PURE__ */ jsx6(
                   "span",
                   {
                     className: "h-2 w-2 shrink-0 rounded-full",
                     style: { backgroundColor: thread.author.color }
                   }
                 ),
-                /* @__PURE__ */ jsx5("span", { className: "font-semibold", children: thread.author.name }),
-                /* @__PURE__ */ jsx5("span", { className: "text-[rgb(var(--ec-page-text-muted))]", children: timeAgo(thread.createdAt) }),
-                thread.resolved && /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx6("span", { className: "font-semibold", children: thread.author.name }),
+                /* @__PURE__ */ jsx6("span", { className: "text-[rgb(var(--ec-page-text-muted))]", children: timeAgo(thread.createdAt) }),
+                thread.resolved && /* @__PURE__ */ jsx6(
                   Check,
                   {
                     size: 12,
@@ -4277,8 +4444,8 @@ function CommentList({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx5("p", { className: "line-clamp-2 text-xs", children: first?.text }),
-              replies.length > 0 && /* @__PURE__ */ jsxs3("p", { className: "text-[11px] text-[rgb(var(--ec-page-text-muted))]", children: [
+              /* @__PURE__ */ jsx6("p", { className: "line-clamp-2 text-xs", children: first?.text }),
+              replies.length > 0 && /* @__PURE__ */ jsxs4("p", { className: "text-[11px] text-[rgb(var(--ec-page-text-muted))]", children: [
                 replies.length,
                 " ",
                 replies.length === 1 ? "reply" : "replies"
@@ -4294,11 +4461,11 @@ function CommentList({
 
 // src/studio/components/ContextMenu.tsx
 import {
-  memo as memo4,
-  useEffect as useEffect4,
+  memo as memo5,
+  useEffect as useEffect6,
   useLayoutEffect as useLayoutEffect2,
-  useRef as useRef3,
-  useState as useState5
+  useRef as useRef5,
+  useState as useState7
 } from "react";
 import {
   ClipboardPaste,
@@ -4312,9 +4479,9 @@ import {
   Trash2 as Trash22,
   TriangleAlert
 } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var EDGE = 8;
-var ContextMenu = memo4(function ContextMenu2({
+var ContextMenu = memo5(function ContextMenu2({
   menu,
   questions,
   onCopy,
@@ -4328,7 +4495,7 @@ var ContextMenu = memo4(function ContextMenu2({
   onDeleteNode,
   onClose
 }) {
-  useEffect4(() => {
+  useEffect6(() => {
     if (!menu) return;
     const close = (event) => {
       if (event instanceof KeyboardEvent && event.key !== "Escape") return;
@@ -4343,8 +4510,8 @@ var ContextMenu = memo4(function ContextMenu2({
       window.removeEventListener("wheel", close);
     };
   }, [menu, onClose]);
-  const menuRef = useRef3(null);
-  const [placed, setPlaced] = useState5(
+  const menuRef = useRef5(null);
+  const [placed, setPlaced] = useState7(
     null
   );
   useLayoutEffect2(() => {
@@ -4360,13 +4527,13 @@ var ContextMenu = memo4(function ContextMenu2({
   if (!menu) return null;
   const itemClass = "flex w-full items-center gap-2 rounded px-2.5 py-1.5 text-left text-xs hover:bg-[rgb(var(--ec-page-border)/0.5)]";
   const shortcutClass = "ml-auto text-[rgb(var(--ec-page-text-muted))]";
-  const item = (icon, label, onClick, shortcut, className = "") => /* @__PURE__ */ jsxs4("button", { className: `${itemClass} ${className}`, onClick, children: [
+  const item = (icon, label, onClick, shortcut, className = "") => /* @__PURE__ */ jsxs5("button", { className: `${itemClass} ${className}`, onClick, children: [
     icon,
     label,
-    shortcut && /* @__PURE__ */ jsx6("span", { className: shortcutClass, children: shortcut })
+    shortcut && /* @__PURE__ */ jsx7("span", { className: shortcutClass, children: shortcut })
   ] });
-  const separator = /* @__PURE__ */ jsx6("div", { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" });
-  return /* @__PURE__ */ jsxs4(
+  const separator = /* @__PURE__ */ jsx7("div", { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" });
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       onPointerDown: (event) => event.stopPropagation(),
@@ -4380,14 +4547,14 @@ var ContextMenu = memo4(function ContextMenu2({
         visibility: placed ? "visible" : "hidden"
       },
       children: [
-        menu.node && questions?.length ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
-          questions.map((question) => /* @__PURE__ */ jsxs4(
+        menu.node && questions?.length ? /* @__PURE__ */ jsxs5(Fragment5, { children: [
+          questions.map((question) => /* @__PURE__ */ jsxs5(
             "button",
             {
               className: itemClass,
               onClick: question.onSelect,
               children: [
-                /* @__PURE__ */ jsx6(MessageCircleQuestion, { size: 14 }),
+                /* @__PURE__ */ jsx7(MessageCircleQuestion, { size: 14 }),
                 question.label
               ]
             },
@@ -4395,30 +4562,30 @@ var ContextMenu = memo4(function ContextMenu2({
           )),
           separator
         ] }) : null,
-        menu.node && /* @__PURE__ */ jsxs4(Fragment3, { children: [
-          onAddComment && item(/* @__PURE__ */ jsx6(MessageCircle, { size: 14 }), "Add comment", onAddComment, "C"),
-          onAddHotspot && !isWrittenOnCanvas(menu.node.type) && item(/* @__PURE__ */ jsx6(TriangleAlert, { size: 14 }), "Add hotspot", onAddHotspot, "A"),
-          !isWrittenOnCanvas(menu.node.type) && item(/* @__PURE__ */ jsx6(StickyNote3, { size: 14 }), "Add a note", onAddNote),
-          onEditDetails && !isWrittenOnCanvas(menu.node.type) && item(/* @__PURE__ */ jsx6(Pencil, { size: 14 }), "Edit details", onEditDetails),
-          item(/* @__PURE__ */ jsx6(Copy, { size: 14 }), "Copy", onCopy, "\u2318C"),
-          item(/* @__PURE__ */ jsx6(CopyPlus, { size: 14 }), "Duplicate", onDuplicate, "\u2318D"),
+        menu.node && /* @__PURE__ */ jsxs5(Fragment5, { children: [
+          onAddComment && item(/* @__PURE__ */ jsx7(MessageCircle, { size: 14 }), "Add comment", onAddComment, "C"),
+          onAddHotspot && !isWrittenOnCanvas(menu.node.type) && item(/* @__PURE__ */ jsx7(TriangleAlert, { size: 14 }), "Add hotspot", onAddHotspot, "A"),
+          !isWrittenOnCanvas(menu.node.type) && item(/* @__PURE__ */ jsx7(StickyNote3, { size: 14 }), "Add a note", onAddNote),
+          onEditDetails && !isWrittenOnCanvas(menu.node.type) && item(/* @__PURE__ */ jsx7(Pencil, { size: 14 }), "Edit details", onEditDetails),
+          item(/* @__PURE__ */ jsx7(Copy, { size: 14 }), "Copy", onCopy, "\u2318C"),
+          item(/* @__PURE__ */ jsx7(CopyPlus, { size: 14 }), "Duplicate", onDuplicate, "\u2318D"),
           separator,
           item(
-            /* @__PURE__ */ jsx6(Trash22, { size: 14 }),
+            /* @__PURE__ */ jsx7(Trash22, { size: 14 }),
             "Delete",
             onDeleteNode,
             "\u232B",
             STATUS.danger.text
           )
         ] }),
-        !menu.node && /* @__PURE__ */ jsxs4(Fragment3, { children: [
-          onAddComment && item(/* @__PURE__ */ jsx6(MessageCircle, { size: 14 }), "Add comment", onAddComment, "C"),
-          onAddHotspot && item(/* @__PURE__ */ jsx6(TriangleAlert, { size: 14 }), "Add hotspot", onAddHotspot, "A"),
-          item(/* @__PURE__ */ jsx6(StickyNote3, { size: 14 }), "Add a sticky note", onAddNote, "N"),
-          onPaste && item(/* @__PURE__ */ jsx6(ClipboardPaste, { size: 14 }), "Paste here", onPaste, "\u2318V"),
-          onReorder && /* @__PURE__ */ jsxs4(Fragment3, { children: [
+        !menu.node && /* @__PURE__ */ jsxs5(Fragment5, { children: [
+          onAddComment && item(/* @__PURE__ */ jsx7(MessageCircle, { size: 14 }), "Add comment", onAddComment, "C"),
+          onAddHotspot && item(/* @__PURE__ */ jsx7(TriangleAlert, { size: 14 }), "Add hotspot", onAddHotspot, "A"),
+          item(/* @__PURE__ */ jsx7(StickyNote3, { size: 14 }), "Add a sticky note", onAddNote, "N"),
+          onPaste && item(/* @__PURE__ */ jsx7(ClipboardPaste, { size: 14 }), "Paste here", onPaste, "\u2318V"),
+          onReorder && /* @__PURE__ */ jsxs5(Fragment5, { children: [
             separator,
-            item(/* @__PURE__ */ jsx6(SendToBack, { size: 14 }), "Reorder diagram", onReorder)
+            item(/* @__PURE__ */ jsx7(SendToBack, { size: 14 }), "Reorder diagram", onReorder)
           ] })
         ] })
       ]
@@ -4428,18 +4595,18 @@ var ContextMenu = memo4(function ContextMenu2({
 
 // src/studio/components/DragGhost.tsx
 import {
-  useCallback as useCallback3,
-  useEffect as useEffect5,
-  useMemo as useMemo2,
-  useRef as useRef4,
-  useState as useState6
+  useCallback as useCallback4,
+  useEffect as useEffect7,
+  useMemo as useMemo4,
+  useRef as useRef6,
+  useState as useState8
 } from "react";
 import {
   ReactFlow,
   ReactFlowProvider,
   useStoreApi as useStoreApi3
 } from "@xyflow/react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var NO_DRAG_IMAGE = typeof Image === "undefined" ? void 0 : Object.assign(new Image(), {
   src: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
 });
@@ -4447,8 +4614,8 @@ var MARGIN = 16;
 var PRO_OPTIONS = { hideAttribution: true };
 function useDragGhost() {
   const store = useStoreApi3();
-  const [ghost, setGhost] = useState6(null);
-  const startDrag = useCallback3(
+  const [ghost, setGhost] = useState8(null);
+  const startDrag = useCallback4(
     (dragType, value, preview) => (event) => {
       event.dataTransfer.setData(dragType, value);
       event.dataTransfer.effectAllowed = "move";
@@ -4461,11 +4628,11 @@ function useDragGhost() {
     },
     [store]
   );
-  const element = ghost && /* @__PURE__ */ jsx7(DragGhost, { ghost, onEnd: () => setGhost(null) });
+  const element = ghost && /* @__PURE__ */ jsx8(DragGhost, { ghost, onEnd: () => setGhost(null) });
   return { startDrag, ghost: element };
 }
 function DragGhost({ ghost, onEnd }) {
-  const ref = useRef4(null);
+  const ref = useRef6(null);
   const { preview, zoom } = ghost;
   const container = isGroupType(preview.type);
   const size = getNodeSize2(preview.type);
@@ -4473,7 +4640,7 @@ function DragGhost({ ghost, onEnd }) {
     x: size.width / 2 * zoom + MARGIN,
     y: size.height / 2 * zoom + MARGIN
   };
-  useEffect5(() => {
+  useEffect7(() => {
     const move = (x, y) => {
       if (ref.current)
         ref.current.style.transform = `translate(${x - offset.x}px, ${y - offset.y}px)`;
@@ -4491,7 +4658,7 @@ function DragGhost({ ghost, onEnd }) {
       document.removeEventListener("dragend", onEnd);
     };
   }, [ghost]);
-  const nodes = useMemo2(
+  const nodes = useMemo4(
     () => [
       {
         id: "drag-ghost",
@@ -4503,8 +4670,8 @@ function DragGhost({ ghost, onEnd }) {
     ],
     [preview, container, size]
   );
-  const viewport = useMemo2(() => ({ x: MARGIN, y: MARGIN, zoom }), [zoom]);
-  return /* @__PURE__ */ jsx7(
+  const viewport = useMemo4(() => ({ x: MARGIN, y: MARGIN, zoom }), [zoom]);
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       ref,
@@ -4514,7 +4681,7 @@ function DragGhost({ ghost, onEnd }) {
         width: size.width * zoom + MARGIN * 2,
         height: size.height * zoom + MARGIN * 2
       },
-      children: /* @__PURE__ */ jsx7(ReactFlowProvider, { children: /* @__PURE__ */ jsx7(
+      children: /* @__PURE__ */ jsx8(ReactFlowProvider, { children: /* @__PURE__ */ jsx8(
         ReactFlow,
         {
           nodes,
@@ -4536,14 +4703,14 @@ function DragGhost({ ghost, onEnd }) {
 
 // src/studio/components/Hotspots.tsx
 import {
-  memo as memo5,
+  memo as memo6,
   useLayoutEffect as useLayoutEffect3,
-  useRef as useRef5,
-  useState as useState7
+  useRef as useRef7,
+  useState as useState9
 } from "react";
 import {
   useInternalNode as useInternalNode2,
-  useReactFlow as useReactFlow3,
+  useReactFlow as useReactFlow4,
   useStoreApi as useStoreApi4
 } from "@xyflow/react";
 import {
@@ -4552,9 +4719,9 @@ import {
   Pencil as Pencil2,
   Trash2 as Trash23,
   TriangleAlert as TriangleAlert2,
-  X as X2
+  X as X3
 } from "lucide-react";
-import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var SEVERITIES = {
   critical: {
     label: "Critical",
@@ -4604,7 +4771,7 @@ function SpotAt({
     at = { x: x + (node.measured.width ?? node.width ?? 0), y };
   }
   if (!at) return null;
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       className: "absolute",
@@ -4615,7 +4782,7 @@ function SpotAt({
         transformOrigin: "0 0",
         zIndex
       },
-      children: /* @__PURE__ */ jsx8("div", { className: "nopan nodrag nowheel pointer-events-auto absolute left-[-14px] top-[-14px]", children })
+      children: /* @__PURE__ */ jsx9("div", { className: "nopan nodrag nowheel pointer-events-auto absolute left-[-14px] top-[-14px]", children })
     }
   );
 }
@@ -4624,7 +4791,7 @@ function SeverityIcon({
   size = 13
 }) {
   const { icon: Icon } = SEVERITIES[severity];
-  return /* @__PURE__ */ jsx8(Icon, { size, strokeWidth: 2.5, "aria-hidden": true });
+  return /* @__PURE__ */ jsx9(Icon, { size, strokeWidth: 2.5, "aria-hidden": true });
 }
 var DRAG_THRESHOLD_PX2 = 4;
 var ICON_CENTRE_PX = 14;
@@ -4635,7 +4802,7 @@ function Marker({
   onClick,
   onDrag
 }) {
-  const drag = useRef5(null);
+  const drag = useRef7(null);
   const pointOf = (event) => ({
     x: event.clientX - drag.current.grab.x,
     y: event.clientY - drag.current.grab.y
@@ -4644,7 +4811,7 @@ function Marker({
   const severity = sorted[0].severity;
   const count = sorted.length;
   const label = spot.inside ? `${count} hotspot${count === 1 ? "" : "s"}` : count > 1 ? `${sorted[0].title} +${count - 1}` : sorted[0].title;
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "button",
     {
       type: "button",
@@ -4704,8 +4871,8 @@ function Marker({
         }
       },
       children: [
-        /* @__PURE__ */ jsx8("span", { className: "flex h-5 w-5 flex-none items-center justify-center rounded-full bg-white/20", children: /* @__PURE__ */ jsx8(SeverityIcon, { severity }) }),
-        /* @__PURE__ */ jsx8("span", { className: "studio-hotspot-label truncate", children: label })
+        /* @__PURE__ */ jsx9("span", { className: "flex h-5 w-5 flex-none items-center justify-center rounded-full bg-white/20", children: /* @__PURE__ */ jsx9(SeverityIcon, { severity }) }),
+        /* @__PURE__ */ jsx9("span", { className: "studio-hotspot-label truncate", children: label })
       ]
     }
   );
@@ -4718,11 +4885,11 @@ function HotspotForm({
   onSubmit,
   onCancel
 }) {
-  const [severity, setSeverity] = useState7(
+  const [severity, setSeverity] = useState9(
     initial?.severity ?? "warning"
   );
-  const [title, setTitle] = useState7(initial?.title ?? "");
-  const [description, setDescription] = useState7(initial?.description ?? "");
+  const [title, setTitle] = useState9(initial?.title ?? "");
+  const [description, setDescription] = useState9(initial?.description ?? "");
   const submit = (event) => {
     event?.preventDefault();
     if (!title.trim()) return;
@@ -4732,7 +4899,7 @@ function HotspotForm({
       ...description.trim() && { description: description.trim() }
     });
   };
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "form",
     {
       onSubmit: submit,
@@ -4744,9 +4911,9 @@ function HotspotForm({
       },
       className: "space-y-2.5 p-3",
       children: [
-        /* @__PURE__ */ jsx8("div", { role: "radiogroup", "aria-label": "How important", className: "flex gap-1", children: SEVERITY_ORDER.map((value) => {
+        /* @__PURE__ */ jsx9("div", { role: "radiogroup", "aria-label": "How important", className: "flex gap-1", children: SEVERITY_ORDER.map((value) => {
           const picked = value === severity;
-          return /* @__PURE__ */ jsxs5(
+          return /* @__PURE__ */ jsxs6(
             "button",
             {
               type: "button",
@@ -4763,14 +4930,14 @@ function HotspotForm({
                 color: SEVERITIES[value].color
               },
               children: [
-                /* @__PURE__ */ jsx8(SeverityIcon, { severity: value, size: 12 }),
+                /* @__PURE__ */ jsx9(SeverityIcon, { severity: value, size: 12 }),
                 SEVERITIES[value].label
               ]
             },
             value
           );
         }) }),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "input",
           {
             autoFocus: true,
@@ -4781,7 +4948,7 @@ function HotspotForm({
             className: inputClass
           }
         ),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "textarea",
           {
             value: description,
@@ -4796,8 +4963,8 @@ function HotspotForm({
             className: `${inputClass} resize-none`
           }
         ),
-        /* @__PURE__ */ jsxs5("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsxs6("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx9(
             "button",
             {
               type: "button",
@@ -4806,7 +4973,7 @@ function HotspotForm({
               children: "Cancel"
             }
           ),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             "button",
             {
               type: "submit",
@@ -4821,13 +4988,13 @@ function HotspotForm({
   );
 }
 function SeverityTag({ severity }) {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "span",
     {
       className: "inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-white",
       style: { background: SEVERITIES[severity].color },
       children: [
-        /* @__PURE__ */ jsx8(SeverityIcon, { severity, size: 10 }),
+        /* @__PURE__ */ jsx9(SeverityIcon, { severity, size: 10 }),
         SEVERITIES[severity].label
       ]
     }
@@ -4837,24 +5004,24 @@ function HotspotItem({
   hotspot,
   actions
 }) {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       className: "border-l-[3px] pl-2.5",
       style: { borderColor: SEVERITIES[hotspot.severity].color },
       children: [
-        /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx8(SeverityTag, { severity: hotspot.severity }),
-          /* @__PURE__ */ jsxs5("span", { className: "flex min-w-0 items-center gap-1 truncate text-[11px] text-[rgb(var(--ec-page-text-muted))]", children: [
-            hotspot.author.agent && /* @__PURE__ */ jsx8(AgentMark, { name: hotspot.author.name, size: 11 }),
+        /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx9(SeverityTag, { severity: hotspot.severity }),
+          /* @__PURE__ */ jsxs6("span", { className: "flex min-w-0 items-center gap-1 truncate text-[11px] text-[rgb(var(--ec-page-text-muted))]", children: [
+            hotspot.author.agent && /* @__PURE__ */ jsx9(AgentMark, { name: hotspot.author.name, size: 11 }),
             hotspot.author.name,
             " \xB7 ",
             timeAgo(hotspot.createdAt)
           ] }),
-          actions && /* @__PURE__ */ jsx8("span", { className: "ml-auto flex flex-none items-center gap-0.5", children: actions })
+          actions && /* @__PURE__ */ jsx9("span", { className: "ml-auto flex flex-none items-center gap-0.5", children: actions })
         ] }),
-        /* @__PURE__ */ jsx8("p", { className: "mt-1.5 text-sm font-semibold leading-snug", children: hotspot.title }),
-        hotspot.description && /* @__PURE__ */ jsx8("p", { className: "mt-1 whitespace-pre-wrap text-xs leading-relaxed text-[rgb(var(--ec-page-text-muted))]", children: hotspot.description })
+        /* @__PURE__ */ jsx9("p", { className: "mt-1.5 text-sm font-semibold leading-snug", children: hotspot.title }),
+        hotspot.description && /* @__PURE__ */ jsx9("p", { className: "mt-1 whitespace-pre-wrap text-xs leading-relaxed text-[rgb(var(--ec-page-text-muted))]", children: hotspot.description })
       ]
     }
   );
@@ -4864,7 +5031,7 @@ function IconButton2({
   onClick,
   children
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "button",
     {
       type: "button",
@@ -4884,15 +5051,15 @@ function SpotPanel({
   onDelete,
   onGo
 }) {
-  const [editing, setEditing] = useState7(null);
+  const [editing, setEditing] = useState9(null);
   const sorted = [...spot.hotspots].sort(bySeverity);
-  return /* @__PURE__ */ jsxs5("div", { className: panelClass2, children: [
-    /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between border-b border-[rgb(var(--ec-page-border))] px-3 py-2", children: [
-      /* @__PURE__ */ jsx8("span", { className: "text-xs font-semibold", children: sorted.length === 1 ? "Hotspot" : `${sorted.length} hotspots` }),
-      /* @__PURE__ */ jsx8(IconButton2, { label: "Close", onClick: onClose, children: /* @__PURE__ */ jsx8(X2, { size: 14 }) })
+  return /* @__PURE__ */ jsxs6("div", { className: panelClass2, children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between border-b border-[rgb(var(--ec-page-border))] px-3 py-2", children: [
+      /* @__PURE__ */ jsx9("span", { className: "text-xs font-semibold", children: sorted.length === 1 ? "Hotspot" : `${sorted.length} hotspots` }),
+      /* @__PURE__ */ jsx9(IconButton2, { label: "Close", onClick: onClose, children: /* @__PURE__ */ jsx9(X3, { size: 14 }) })
     ] }),
-    /* @__PURE__ */ jsx8("div", { className: "max-h-80 space-y-3 overflow-y-auto p-3", children: sorted.map(
-      (hotspot) => editing === hotspot.id ? /* @__PURE__ */ jsx8("div", { className: "-m-3", children: /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9("div", { className: "max-h-80 space-y-3 overflow-y-auto p-3", children: sorted.map(
+      (hotspot) => editing === hotspot.id ? /* @__PURE__ */ jsx9("div", { className: "-m-3", children: /* @__PURE__ */ jsx9(
         HotspotForm,
         {
           initial: hotspot,
@@ -4905,35 +5072,35 @@ function SpotPanel({
         }
       ) }, hotspot.id) : spot.inside ? (
         // Inside a node on L1 or L2: goes to it on L3, where it is
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "button",
           {
             type: "button",
             onClick: () => onGo(hotspot),
             className: "block w-full rounded-md text-left hover:bg-[rgb(var(--ec-content-hover))]!",
-            children: /* @__PURE__ */ jsx8(HotspotItem, { hotspot })
+            children: /* @__PURE__ */ jsx9(HotspotItem, { hotspot })
           },
           hotspot.id
         )
-      ) : /* @__PURE__ */ jsx8(
+      ) : /* @__PURE__ */ jsx9(
         HotspotItem,
         {
           hotspot,
-          actions: !locked && /* @__PURE__ */ jsxs5(Fragment4, { children: [
-            /* @__PURE__ */ jsx8(
+          actions: !locked && /* @__PURE__ */ jsxs6(Fragment6, { children: [
+            /* @__PURE__ */ jsx9(
               IconButton2,
               {
                 label: "Edit",
                 onClick: () => setEditing(hotspot.id),
-                children: /* @__PURE__ */ jsx8(Pencil2, { size: 13 })
+                children: /* @__PURE__ */ jsx9(Pencil2, { size: 13 })
               }
             ),
-            /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx9(
               IconButton2,
               {
                 label: "Remove",
                 onClick: () => onDelete(hotspot.id),
-                children: /* @__PURE__ */ jsx8(Trash23, { size: 13 })
+                children: /* @__PURE__ */ jsx9(Trash23, { size: 13 })
               }
             )
           ] })
@@ -4941,10 +5108,10 @@ function SpotPanel({
         hotspot.id
       )
     ) }),
-    spot.inside && /* @__PURE__ */ jsx8("p", { className: "border-t border-[rgb(var(--ec-page-border))] px-3 py-2 text-[11px] text-[rgb(var(--ec-page-text-muted))]", children: "Inside this: click one to go to it." })
+    spot.inside && /* @__PURE__ */ jsx9("p", { className: "border-t border-[rgb(var(--ec-page-border))] px-3 py-2 text-[11px] text-[rgb(var(--ec-page-text-muted))]", children: "Inside this: click one to go to it." })
   ] });
 }
-var HotspotLayer = memo5(function HotspotLayer2({
+var HotspotLayer = memo6(function HotspotLayer2({
   spots,
   openKey,
   draft,
@@ -4961,10 +5128,10 @@ var HotspotLayer = memo5(function HotspotLayer2({
   onGo,
   live
 }) {
-  const layer = useRef5(null);
+  const layer = useRef7(null);
   useMarkerScale(layer);
-  const { screenToFlowPosition } = useReactFlow3();
-  const [moving, setMoving] = useState7(null);
+  const { screenToFlowPosition } = useReactFlow4();
+  const [moving, setMoving] = useState9(null);
   const remote = useRemoteMoves(live, "hotspot");
   const remoteAt = (spot) => {
     for (const hotspot of spot.hotspots)
@@ -4995,7 +5162,7 @@ var HotspotLayer = memo5(function HotspotLayer2({
     );
     sendMove(live, "hotspot", spot.hotspots[0].id, null);
   } : void 0;
-  return /* @__PURE__ */ jsx8(CanvasPortal, { children: /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsx9(CanvasPortal, { children: /* @__PURE__ */ jsxs6(
     "div",
     {
       ref: layer,
@@ -5006,14 +5173,14 @@ var HotspotLayer = memo5(function HotspotLayer2({
           const open = spot.key === openKey;
           const remotely = remoteAt(spot);
           const dragged = moving?.key === spot.key ? moving : remotely ? { position: remotely } : void 0;
-          return /* @__PURE__ */ jsxs5(
+          return /* @__PURE__ */ jsxs6(
             SpotAt,
             {
               nodeId: dragged ? void 0 : spot.nodeId,
               position: dragged ? dragged.position : spot.position,
               zIndex: dragged ? 5 : open ? 3 : 1,
               children: [
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx9(
                   Marker,
                   {
                     spot,
@@ -5023,7 +5190,7 @@ var HotspotLayer = memo5(function HotspotLayer2({
                     onDrag: dragHandler(spot)
                   }
                 ),
-                open && !dragged && /* @__PURE__ */ jsx8(
+                open && !dragged && /* @__PURE__ */ jsx9(
                   SpotPanel,
                   {
                     spot,
@@ -5039,22 +5206,22 @@ var HotspotLayer = memo5(function HotspotLayer2({
             spot.key
           );
         }),
-        draft && /* @__PURE__ */ jsxs5(
+        draft && /* @__PURE__ */ jsxs6(
           SpotAt,
           {
             nodeId: draft.nodeId,
             position: draft.nodeId ? void 0 : draft.position,
             zIndex: 4,
             children: [
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx9(
                 "span",
                 {
                   className: "studio-hotspot-marker flex h-7 w-7 items-center justify-center rounded-full text-white",
                   style: { background: SEVERITIES.warning.color },
-                  children: /* @__PURE__ */ jsx8(SeverityIcon, { severity: "warning" })
+                  children: /* @__PURE__ */ jsx9(SeverityIcon, { severity: "warning" })
                 }
               ),
-              /* @__PURE__ */ jsx8("div", { className: panelClass2, children: /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx9("div", { className: panelClass2, children: /* @__PURE__ */ jsx9(
                 HotspotForm,
                 {
                   submitLabel: "Add hotspot",
@@ -5076,18 +5243,18 @@ function HotspotList({
 }) {
   const sorted = [...hotspots].sort(bySeverity);
   if (!sorted.length)
-    return /* @__PURE__ */ jsx8("p", { className: "px-4 py-6 text-center text-xs leading-relaxed text-[rgb(var(--ec-page-text-muted))]", children: "No hotspots yet. Press A, or right-click a node, to flag what people should know: a risk, a problem, or the key part." });
-  return /* @__PURE__ */ jsx8("div", { className: "space-y-1.5 p-3", children: sorted.map((hotspot) => {
+    return /* @__PURE__ */ jsx9("p", { className: "px-4 py-6 text-center text-xs leading-relaxed text-[rgb(var(--ec-page-text-muted))]", children: "No hotspots yet. Press A, or right-click a node, to flag what people should know: a risk, a problem, or the key part." });
+  return /* @__PURE__ */ jsx9("div", { className: "space-y-1.5 p-3", children: sorted.map((hotspot) => {
     const on = hotspot.nodeId && nameOf(hotspot.nodeId);
-    return /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsxs6(
       "button",
       {
         type: "button",
         onClick: () => onOpen(hotspot),
         className: "w-full rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg))] px-2.5 py-2 text-left hover:border-[rgb(var(--ec-accent))]!",
         children: [
-          /* @__PURE__ */ jsx8(HotspotItem, { hotspot }),
-          on && /* @__PURE__ */ jsxs5("p", { className: "mt-1.5 pl-[13px] text-[11px] text-[rgb(var(--ec-page-text-muted))]", children: [
+          /* @__PURE__ */ jsx9(HotspotItem, { hotspot }),
+          on && /* @__PURE__ */ jsxs6("p", { className: "mt-1.5 pl-[13px] text-[11px] text-[rgb(var(--ec-page-text-muted))]", children: [
             "On ",
             on
           ] })
@@ -5098,76 +5265,9 @@ function HotspotList({
   }) });
 }
 
-// src/studio/components/icons.ts
-import {
-  ArrowRightLeft,
-  Bot as Bot2,
-  Boxes,
-  Archive,
-  Database,
-  DatabaseZap,
-  Globe,
-  Group,
-  Mail,
-  MonitorSmartphone,
-  ScanSearch,
-  Search,
-  ServerIcon,
-  StickyNote as StickyNote4,
-  TableProperties,
-  Type,
-  User,
-  Users as Users2,
-  Zap
-} from "lucide-react";
-var NODE_ICONS = {
-  [GROUP_TYPES.domain]: { icon: Boxes, className: "text-yellow-500" },
-  [GROUP_TYPES.system]: { icon: Group, className: "text-violet-600" },
-  // Catalog domains and systems added as cards
-  "context-domain": { icon: Boxes, className: "text-yellow-500" },
-  system: { icon: Group, className: "text-violet-600" },
-  service: { icon: ServerIcon, className: "text-pink-600" },
-  event: { icon: Zap, className: "text-orange-600" },
-  command: { icon: Mail, className: "text-blue-600" },
-  query: { icon: Search, className: "text-green-600" },
-  channel: { icon: ArrowRightLeft, className: "text-gray-600" },
-  data: { icon: Database, className: "text-blue-600" },
-  // The other kinds of data store, in the components list
-  "data:cache": { icon: DatabaseZap, className: "text-blue-600" },
-  "data:searchIndex": { icon: ScanSearch, className: "text-blue-600" },
-  "data:objectStore": { icon: Archive, className: "text-blue-600" },
-  view: { icon: MonitorSmartphone, className: "text-sky-600" },
-  externalSystem: { icon: Globe, className: "text-purple-600" },
-  agent: { icon: Bot2, className: "text-violet-600" },
-  actor: { icon: User, className: "text-yellow-500" },
-  team: { icon: Users2, className: "text-emerald-600" },
-  // A table of its properties, as the node shows it
-  entity: { icon: TableProperties, className: "text-blue-600" },
-  note: { icon: StickyNote4, className: "text-yellow-500" },
-  text: { icon: Type, className: "text-[rgb(var(--ec-icon-color))]" }
-};
-var CATALOG_GROUPS = [
-  {
-    collection: "domains",
-    label: "Domains",
-    ...NODE_ICONS[GROUP_TYPES.domain]
-  },
-  {
-    collection: "systems",
-    label: "Systems",
-    ...NODE_ICONS[GROUP_TYPES.system]
-  },
-  { collection: "services", label: "Services", ...NODE_ICONS.service },
-  { collection: "events", label: "Events", ...NODE_ICONS.event },
-  { collection: "commands", label: "Commands", ...NODE_ICONS.command },
-  { collection: "queries", label: "Queries", ...NODE_ICONS.query },
-  { collection: "channels", label: "Channels", ...NODE_ICONS.channel },
-  { collection: "containers", label: "Data Stores", ...NODE_ICONS.data }
-];
-
 // src/studio/components/CanvasControls.tsx
-import { memo as memo6 } from "react";
-import { useReactFlow as useReactFlow4 } from "@xyflow/react";
+import { memo as memo7 } from "react";
+import { useReactFlow as useReactFlow5 } from "@xyflow/react";
 import {
   Hand,
   Lock,
@@ -5176,24 +5276,24 @@ import {
   MessageCircle as MessageCircle2,
   MessageSquareText,
   MousePointer2,
-  Type as Type2,
+  Type,
   Redo,
   SendToBack as SendToBack2,
-  StickyNote as StickyNote5,
+  StickyNote as StickyNote4,
   TriangleAlert as TriangleAlert3,
   Undo,
   ZoomIn,
   ZoomOut
 } from "lucide-react";
-import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var FIT_VIEW_OPTIONS = DIAGRAM_FIT_VIEW_OPTIONS;
 function WithKey({
   shortcut,
   children
 }) {
-  return /* @__PURE__ */ jsxs6("span", { className: "relative flex h-8 w-8 items-center justify-center", children: [
-    /* @__PURE__ */ jsx9("span", { className: "-translate-x-[3px] -translate-y-[2px]", children }),
-    /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs7("span", { className: "relative flex h-8 w-8 items-center justify-center", children: [
+    /* @__PURE__ */ jsx10("span", { className: "-translate-x-[3px] -translate-y-[2px]", children }),
+    /* @__PURE__ */ jsx10(
       "span",
       {
         "aria-hidden": true,
@@ -5214,13 +5314,13 @@ function LevelSwitch({
   onChange,
   unavailable
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "div",
     {
       role: "group",
       "aria-label": "Level of detail",
       className: "flex items-center gap-0.5",
-      children: LEVELS2.map(({ level: value, description }) => /* @__PURE__ */ jsx9(
+      children: LEVELS2.map(({ level: value, description }) => /* @__PURE__ */ jsx10(
         ToolbarButton,
         {
           label: `Level ${value}: ${description} (${value})`,
@@ -5228,7 +5328,7 @@ function LevelSwitch({
           active: value === level,
           disabled: !!unavailable?.[value],
           onClick: () => onChange(value),
-          children: /* @__PURE__ */ jsx9(WithKey, { shortcut: String(value), children: /* @__PURE__ */ jsxs6("span", { className: "text-xs font-semibold", children: [
+          children: /* @__PURE__ */ jsx10(WithKey, { shortcut: String(value), children: /* @__PURE__ */ jsxs7("span", { className: "text-xs font-semibold", children: [
             "L",
             value
           ] }) })
@@ -5238,7 +5338,7 @@ function LevelSwitch({
     }
   );
 }
-var CanvasControls_default = memo6(function CanvasControls({
+var CanvasControls_default = memo7(function CanvasControls({
   level,
   onLevelChange,
   unavailableLevels,
@@ -5262,38 +5362,38 @@ var CanvasControls_default = memo6(function CanvasControls({
 }) {
   return (
     // At the top, as drawing tools have their tools
-    /* @__PURE__ */ jsxs6("div", { className: "absolute left-1/2 top-3 z-10 -translate-x-1/2", children: [
-      /* @__PURE__ */ jsxs6(Toolbar, { children: [
-        /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsxs7("div", { className: "absolute left-1/2 top-3 z-10 -translate-x-1/2", children: [
+      /* @__PURE__ */ jsxs7(Toolbar, { children: [
+        /* @__PURE__ */ jsx10(
           ToolbarButton,
           {
             label: locked ? `Locked${lockedBy ? ` by ${lockedBy}` : ""}: unlock it to change it (for everyone on it)` : "Lock the canvas (it can be looked at, not changed, by everyone on it)",
             active: locked,
             onClick: onToggleLock,
-            children: locked ? /* @__PURE__ */ jsx9(Lock, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx9(LockOpen, { className: "h-4 w-4" })
+            children: locked ? /* @__PURE__ */ jsx10(Lock, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx10(LockOpen, { className: "h-4 w-4" })
           }
         ),
-        /* @__PURE__ */ jsx9(ToolbarDivider, {}),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(ToolbarDivider, {}),
+        /* @__PURE__ */ jsx10(
           ToolbarButton,
           {
             label: "Select (V)",
             active: selectMode,
             onClick: onSelectMode,
-            children: /* @__PURE__ */ jsx9(WithKey, { shortcut: "V", children: /* @__PURE__ */ jsx9(MousePointer2, { className: "h-4 w-4" }) })
+            children: /* @__PURE__ */ jsx10(WithKey, { shortcut: "V", children: /* @__PURE__ */ jsx10(MousePointer2, { className: "h-4 w-4" }) })
           }
         ),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(
           ToolbarButton,
           {
             label: "Hand (H): drag to move around",
             active: handMode,
             onClick: onHandMode,
-            children: /* @__PURE__ */ jsx9(WithKey, { shortcut: "H", children: /* @__PURE__ */ jsx9(Hand, { className: "h-4 w-4" }) })
+            children: /* @__PURE__ */ jsx10(WithKey, { shortcut: "H", children: /* @__PURE__ */ jsx10(Hand, { className: "h-4 w-4" }) })
           }
         ),
-        /* @__PURE__ */ jsx9(ToolbarDivider, {}),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(ToolbarDivider, {}),
+        /* @__PURE__ */ jsx10(
           LevelSwitch,
           {
             level,
@@ -5301,8 +5401,8 @@ var CanvasControls_default = memo6(function CanvasControls({
             unavailable: unavailableLevels
           }
         ),
-        /* @__PURE__ */ jsx9(ToolbarDivider, {}),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(ToolbarDivider, {}),
+        /* @__PURE__ */ jsx10(
           ToolbarButton,
           {
             label: editable ? "Sticky note (N): click where it goes" : `Sticky note (N): on L${level}, where it's clicked`,
@@ -5310,10 +5410,10 @@ var CanvasControls_default = memo6(function CanvasControls({
             disabled: locked,
             hint: locked ? "The canvas is locked" : void 0,
             onClick: onToggleNoteMode,
-            children: /* @__PURE__ */ jsx9(WithKey, { shortcut: "N", children: /* @__PURE__ */ jsx9(StickyNote5, { className: "h-4 w-4 text-yellow-500" }) })
+            children: /* @__PURE__ */ jsx10(WithKey, { shortcut: "N", children: /* @__PURE__ */ jsx10(StickyNote4, { className: "h-4 w-4 text-yellow-500" }) })
           }
         ),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(
           ToolbarButton,
           {
             label: editable ? "Text (T): click anywhere and type" : `Text (T): on L${level}, where it's clicked`,
@@ -5321,19 +5421,19 @@ var CanvasControls_default = memo6(function CanvasControls({
             disabled: locked,
             hint: locked ? "The canvas is locked" : void 0,
             onClick: onToggleTextMode,
-            children: /* @__PURE__ */ jsx9(WithKey, { shortcut: "T", children: /* @__PURE__ */ jsx9(Type2, { className: "h-4 w-4" }) })
+            children: /* @__PURE__ */ jsx10(WithKey, { shortcut: "T", children: /* @__PURE__ */ jsx10(Type, { className: "h-4 w-4" }) })
           }
         ),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(
           ToolbarButton,
           {
             label: "Comment (C): click where it goes, or on a node",
             active: commentMode,
             onClick: onToggleCommentMode,
-            children: /* @__PURE__ */ jsx9(WithKey, { shortcut: "C", children: /* @__PURE__ */ jsx9(MessageCircle2, { className: "h-4 w-4" }) })
+            children: /* @__PURE__ */ jsx10(WithKey, { shortcut: "C", children: /* @__PURE__ */ jsx10(MessageCircle2, { className: "h-4 w-4" }) })
           }
         ),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(
           ToolbarButton,
           {
             label: "Hotspot (A): click a node, or anywhere, to flag it",
@@ -5341,24 +5441,24 @@ var CanvasControls_default = memo6(function CanvasControls({
             disabled: locked,
             hint: locked ? "The canvas is locked" : void 0,
             onClick: onToggleHotspotMode,
-            children: /* @__PURE__ */ jsx9(WithKey, { shortcut: "A", children: /* @__PURE__ */ jsx9(TriangleAlert3, { className: "h-4 w-4 text-amber-600" }) })
+            children: /* @__PURE__ */ jsx10(WithKey, { shortcut: "A", children: /* @__PURE__ */ jsx10(TriangleAlert3, { className: "h-4 w-4 text-amber-600" }) })
           }
         ),
         extras
       ] }),
-      (noteMode || textMode || commentMode || hotspotMode) && /* @__PURE__ */ jsxs6("p", { className: "pointer-events-none mt-2 text-center text-xs text-[rgb(var(--ec-page-text-muted))]", children: [
+      (noteMode || textMode || commentMode || hotspotMode) && /* @__PURE__ */ jsxs7("p", { className: "pointer-events-none mt-2 text-center text-xs text-[rgb(var(--ec-page-text-muted))]", children: [
         TOOL_HINTS[noteMode ? "note" : commentMode ? "comment" : hotspotMode ? "hotspot" : "text"],
         " ",
         "\xB7",
         " ",
-        /* @__PURE__ */ jsx9("kbd", { className: "rounded border border-[rgb(var(--ec-page-border))] px-1 font-sans text-[11px]", children: "Esc" }),
+        /* @__PURE__ */ jsx10("kbd", { className: "rounded border border-[rgb(var(--ec-page-border))] px-1 font-sans text-[11px]", children: "Esc" }),
         " ",
         "to cancel"
       ] })
     ] })
   );
 });
-var ViewControls = memo6(function ViewControls2({
+var ViewControls = memo7(function ViewControls2({
   canUndo,
   canRedo,
   onUndo,
@@ -5370,91 +5470,91 @@ var ViewControls = memo6(function ViewControls2({
   comments,
   hotspots
 }) {
-  const { zoomIn, zoomOut, fitView } = useReactFlow4();
-  return /* @__PURE__ */ jsxs6(Fragment5, { children: [
-    /* @__PURE__ */ jsxs6(Toolbar, { children: [
-      /* @__PURE__ */ jsx9(
+  const { zoomIn, zoomOut, fitView } = useReactFlow5();
+  return /* @__PURE__ */ jsxs7(Fragment7, { children: [
+    /* @__PURE__ */ jsxs7(Toolbar, { children: [
+      /* @__PURE__ */ jsx10(
         ToolbarButton,
         {
           label: "Zoom out",
           onClick: () => void zoomOut({ duration: 200 }),
-          children: /* @__PURE__ */ jsx9(ZoomOut, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx10(ZoomOut, { className: "h-4 w-4" })
         }
       ),
-      /* @__PURE__ */ jsx9(ZoomLevel, {}),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx10(ZoomLevel, {}),
+      /* @__PURE__ */ jsx10(
         ToolbarButton,
         {
           label: "Zoom in",
           onClick: () => void zoomIn({ duration: 200 }),
-          children: /* @__PURE__ */ jsx9(ZoomIn, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx10(ZoomIn, { className: "h-4 w-4" })
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs6(Toolbar, { children: [
-      /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsxs7(Toolbar, { children: [
+      /* @__PURE__ */ jsx10(
         ToolbarButton,
         {
           label: "Undo (\u2318Z)",
           hint: canUndo ? void 0 : "Nothing to undo",
           disabled: !canUndo,
           onClick: onUndo,
-          children: /* @__PURE__ */ jsx9(Undo, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx10(Undo, { className: "h-4 w-4" })
         }
       ),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx10(
         ToolbarButton,
         {
           label: "Redo (\u21E7\u2318Z)",
           hint: canRedo ? void 0 : "Nothing to redo",
           disabled: !canRedo,
           onClick: onRedo,
-          children: /* @__PURE__ */ jsx9(Redo, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx10(Redo, { className: "h-4 w-4" })
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs6(Toolbar, { children: [
-      /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsxs7(Toolbar, { children: [
+      /* @__PURE__ */ jsx10(
         ToolbarButton,
         {
           label: "Fit view (\u21E71)",
           onClick: () => void fitView({ ...fitOptions, duration: 500 }),
-          children: /* @__PURE__ */ jsx9(Maximize, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx10(Maximize, { className: "h-4 w-4" })
         }
       ),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx10(
         ToolbarButton,
         {
           label: reorderLabel,
           hint: locked ? "The canvas is locked" : void 0,
           disabled: locked,
           onClick: onReorder,
-          children: /* @__PURE__ */ jsx9(SendToBack2, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx10(SendToBack2, { className: "h-4 w-4" })
         }
       )
     ] }),
-    comments && /* @__PURE__ */ jsxs6(Toolbar, { children: [
-      /* @__PURE__ */ jsx9(
+    comments && /* @__PURE__ */ jsxs7(Toolbar, { children: [
+      /* @__PURE__ */ jsx10(
         ToolbarButton,
         {
           label: comments.open ? `Comments (${comments.open} open)` : "Comments",
           active: comments.active,
           onClick: comments.onToggle,
-          children: /* @__PURE__ */ jsxs6("span", { className: "relative", children: [
-            /* @__PURE__ */ jsx9(MessageSquareText, { className: "h-4 w-4" }),
-            comments.open > 0 && /* @__PURE__ */ jsx9("span", { className: "absolute -right-2 -top-2 min-w-4 rounded-full bg-[rgb(var(--ec-accent))] px-1 text-center text-[9px] font-semibold leading-4 text-white", children: comments.open })
+          children: /* @__PURE__ */ jsxs7("span", { className: "relative", children: [
+            /* @__PURE__ */ jsx10(MessageSquareText, { className: "h-4 w-4" }),
+            comments.open > 0 && /* @__PURE__ */ jsx10("span", { className: "absolute -right-2 -top-2 min-w-4 rounded-full bg-[rgb(var(--ec-accent))] px-1 text-center text-[9px] font-semibold leading-4 text-white", children: comments.open })
           ] })
         }
       ),
-      hotspots && /* @__PURE__ */ jsx9(
+      hotspots && /* @__PURE__ */ jsx10(
         ToolbarButton,
         {
           label: hotspots.count ? `Hotspots (${hotspots.count})` : "Hotspots",
           active: hotspots.active,
           onClick: hotspots.onToggle,
-          children: /* @__PURE__ */ jsxs6("span", { className: "relative", children: [
-            /* @__PURE__ */ jsx9(TriangleAlert3, { className: "h-4 w-4" }),
-            hotspots.count > 0 && /* @__PURE__ */ jsx9(
+          children: /* @__PURE__ */ jsxs7("span", { className: "relative", children: [
+            /* @__PURE__ */ jsx10(TriangleAlert3, { className: "h-4 w-4" }),
+            hotspots.count > 0 && /* @__PURE__ */ jsx10(
               "span",
               {
                 className: "absolute -right-2 -top-2 min-w-4 rounded-full px-1 text-center text-[9px] font-semibold leading-4 text-white",
@@ -5472,12 +5572,12 @@ var ViewControls = memo6(function ViewControls2({
 });
 
 // src/studio/components/ContainerChooser.tsx
-import { useEffect as useEffect6, useState as useState8 } from "react";
-import { X as X3 } from "lucide-react";
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useEffect as useEffect8, useState as useState10 } from "react";
+import { X as X4 } from "lucide-react";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var plural = (count, noun) => `${count} ${noun}${count === 1 ? "" : "s"}`;
-var CardPreview = () => /* @__PURE__ */ jsxs7("svg", { viewBox: "0 0 64 36", className: "h-9 w-16", "aria-hidden": true, children: [
-  /* @__PURE__ */ jsx10(
+var CardPreview = () => /* @__PURE__ */ jsxs8("svg", { viewBox: "0 0 64 36", className: "h-9 w-16", "aria-hidden": true, children: [
+  /* @__PURE__ */ jsx11(
     "rect",
     {
       x: "18",
@@ -5492,7 +5592,7 @@ var CardPreview = () => /* @__PURE__ */ jsxs7("svg", { viewBox: "0 0 64 36", cla
       strokeWidth: "1.5"
     }
   ),
-  /* @__PURE__ */ jsx10(
+  /* @__PURE__ */ jsx11(
     "rect",
     {
       x: "23",
@@ -5504,7 +5604,7 @@ var CardPreview = () => /* @__PURE__ */ jsxs7("svg", { viewBox: "0 0 64 36", cla
       fillOpacity: "0.6"
     }
   ),
-  /* @__PURE__ */ jsx10(
+  /* @__PURE__ */ jsx11(
     "rect",
     {
       x: "23",
@@ -5516,7 +5616,7 @@ var CardPreview = () => /* @__PURE__ */ jsxs7("svg", { viewBox: "0 0 64 36", cla
       fillOpacity: "0.35"
     }
   ),
-  /* @__PURE__ */ jsx10(
+  /* @__PURE__ */ jsx11(
     "path",
     {
       d: "M46 18h12",
@@ -5526,7 +5626,7 @@ var CardPreview = () => /* @__PURE__ */ jsxs7("svg", { viewBox: "0 0 64 36", cla
       strokeDasharray: "2 2"
     }
   ),
-  /* @__PURE__ */ jsx10(
+  /* @__PURE__ */ jsx11(
     "rect",
     {
       x: "57",
@@ -5539,8 +5639,8 @@ var CardPreview = () => /* @__PURE__ */ jsxs7("svg", { viewBox: "0 0 64 36", cla
     }
   )
 ] });
-var ContainerPreview = () => /* @__PURE__ */ jsxs7("svg", { viewBox: "0 0 64 36", className: "h-9 w-16", "aria-hidden": true, children: [
-  /* @__PURE__ */ jsx10(
+var ContainerPreview = () => /* @__PURE__ */ jsxs8("svg", { viewBox: "0 0 64 36", className: "h-9 w-16", "aria-hidden": true, children: [
+  /* @__PURE__ */ jsx11(
     "rect",
     {
       x: "4",
@@ -5555,7 +5655,7 @@ var ContainerPreview = () => /* @__PURE__ */ jsxs7("svg", { viewBox: "0 0 64 36"
       strokeWidth: "1.5"
     }
   ),
-  /* @__PURE__ */ jsx10(
+  /* @__PURE__ */ jsx11(
     "path",
     {
       d: "M4 10h56",
@@ -5564,7 +5664,7 @@ var ContainerPreview = () => /* @__PURE__ */ jsxs7("svg", { viewBox: "0 0 64 36"
       strokeWidth: "1"
     }
   ),
-  /* @__PURE__ */ jsx10(
+  /* @__PURE__ */ jsx11(
     "rect",
     {
       x: "8",
@@ -5576,7 +5676,7 @@ var ContainerPreview = () => /* @__PURE__ */ jsxs7("svg", { viewBox: "0 0 64 36"
       fillOpacity: "0.6"
     }
   ),
-  /* @__PURE__ */ jsx10(
+  /* @__PURE__ */ jsx11(
     "rect",
     {
       x: "10",
@@ -5588,7 +5688,7 @@ var ContainerPreview = () => /* @__PURE__ */ jsxs7("svg", { viewBox: "0 0 64 36"
       fillOpacity: "0.5"
     }
   ),
-  /* @__PURE__ */ jsx10(
+  /* @__PURE__ */ jsx11(
     "rect",
     {
       x: "36",
@@ -5623,12 +5723,12 @@ function ContainerChooser({
   onChoose,
   onCancel
 }) {
-  const [withContents, setWithContents] = useState8(true);
+  const [withContents, setWithContents] = useState10(true);
   const contentsLabel = contents ? [
     contents.systems > 0 && plural(contents.systems, "system"),
     contents.services > 0 && plural(contents.services, "service")
   ].filter(Boolean).join(" and ") : "";
-  useEffect6(() => {
+  useEffect8(() => {
     const onKeyDown = (event) => event.key === "Escape" && onCancel();
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
@@ -5641,7 +5741,7 @@ function ContainerChooser({
     Math.max(position.y - 20, 12),
     window.innerHeight - (contentsLabel ? 260 : 200)
   );
-  return /* @__PURE__ */ jsx10("div", { className: "fixed inset-0 z-50", onPointerDown: onCancel, children: /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsx11("div", { className: "fixed inset-0 z-50", onPointerDown: onCancel, children: /* @__PURE__ */ jsxs8(
     "div",
     {
       role: "dialog",
@@ -5650,26 +5750,26 @@ function ContainerChooser({
       className: "absolute w-80 rounded-lg border p-1.5 shadow-xl bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))]",
       style: { left, top },
       children: [
-        /* @__PURE__ */ jsxs7("div", { className: "flex items-start justify-between gap-2 px-2 pb-1.5 pt-1", children: [
-          /* @__PURE__ */ jsxs7("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsxs7("p", { className: "text-[10px] font-semibold uppercase tracking-wider text-[rgb(var(--ec-page-text-muted))]", children: [
+        /* @__PURE__ */ jsxs8("div", { className: "flex items-start justify-between gap-2 px-2 pb-1.5 pt-1", children: [
+          /* @__PURE__ */ jsxs8("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxs8("p", { className: "text-[10px] font-semibold uppercase tracking-wider text-[rgb(var(--ec-page-text-muted))]", children: [
               "Add this ",
               kind,
               " as"
             ] }),
-            name && /* @__PURE__ */ jsx10("p", { className: "truncate text-xs font-semibold", children: name })
+            name && /* @__PURE__ */ jsx11("p", { className: "truncate text-xs font-semibold", children: name })
           ] }),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             "button",
             {
               onClick: onCancel,
               "aria-label": "Cancel",
               className: "rounded p-0.5 text-[rgb(var(--ec-icon-color))] hover:bg-[rgb(var(--ec-page-border)/0.5)]",
-              children: /* @__PURE__ */ jsx10(X3, { size: 14 })
+              children: /* @__PURE__ */ jsx11(X4, { size: 14 })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx10("div", { className: "grid grid-cols-2 gap-1.5 px-0.5 pb-0.5", children: OPTIONS.map(({ as, label, hint, Preview }) => /* @__PURE__ */ jsxs7(
+        /* @__PURE__ */ jsx11("div", { className: "grid grid-cols-2 gap-1.5 px-0.5 pb-0.5", children: OPTIONS.map(({ as, label, hint, Preview }) => /* @__PURE__ */ jsxs8(
           "button",
           {
             autoFocus: as === "container",
@@ -5678,15 +5778,15 @@ function ContainerChooser({
             ),
             className: "flex flex-col items-center gap-1 rounded-md border px-2 pb-1.5 pt-2 text-xs outline-none transition-colors border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text-muted))] hover:border-[rgb(var(--ec-accent))] hover:bg-[color-mix(in_srgb,rgb(var(--ec-accent))_8%,transparent)] hover:text-[rgb(var(--ec-accent))] focus-visible:border-[rgb(var(--ec-accent))] focus-visible:text-[rgb(var(--ec-accent))]",
             children: [
-              /* @__PURE__ */ jsx10(Preview, {}),
-              /* @__PURE__ */ jsx10("span", { className: "font-semibold", children: label }),
-              /* @__PURE__ */ jsx10("span", { className: "text-center text-[10px] leading-tight text-[rgb(var(--ec-page-text-muted))]", children: hint })
+              /* @__PURE__ */ jsx11(Preview, {}),
+              /* @__PURE__ */ jsx11("span", { className: "font-semibold", children: label }),
+              /* @__PURE__ */ jsx11("span", { className: "text-center text-[10px] leading-tight text-[rgb(var(--ec-page-text-muted))]", children: hint })
             ]
           },
           as
         )) }),
-        contentsLabel && /* @__PURE__ */ jsxs7("label", { className: "mt-1 flex items-center gap-2 rounded-md px-2 py-1.5 text-[11px] text-[rgb(var(--ec-page-text-muted))]", children: [
-          /* @__PURE__ */ jsx10(
+        contentsLabel && /* @__PURE__ */ jsxs8("label", { className: "mt-1 flex items-center gap-2 rounded-md px-2 py-1.5 text-[11px] text-[rgb(var(--ec-page-text-muted))]", children: [
+          /* @__PURE__ */ jsx11(
             "input",
             {
               type: "checkbox",
@@ -5704,29 +5804,29 @@ function ContainerChooser({
 }
 
 // src/studio/components/EditButton.tsx
-import { memo as memo7 } from "react";
-import { NodeToolbar, Position as Position3, useStore } from "@xyflow/react";
+import { memo as memo8 } from "react";
+import { NodeToolbar, Position as Position4, useStore } from "@xyflow/react";
 import { Info as Info2, Pencil as Pencil3 } from "lucide-react";
-import { Fragment as Fragment6, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var MIN_SCALE = 0.4;
 var MAX_SCALE = 1.6;
 var OFFSET = 8;
-var EditButton_default = memo7(function EditButton({
+var EditButton_default = memo8(function EditButton({
   nodeId,
   locked,
   onClick
 }) {
   const zoom = useStore((state) => state.transform[2]);
   const scale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, zoom));
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     NodeToolbar,
     {
       nodeId,
       isVisible: true,
-      position: Position3.Top,
+      position: Position4.Top,
       align: "end",
       offset: OFFSET * scale,
-      children: /* @__PURE__ */ jsx11(
+      children: /* @__PURE__ */ jsx12(
         "button",
         {
           type: "button",
@@ -5736,11 +5836,11 @@ var EditButton_default = memo7(function EditButton({
             transformOrigin: "bottom right"
           },
           onClick,
-          children: locked ? /* @__PURE__ */ jsxs8(Fragment6, { children: [
-            /* @__PURE__ */ jsx11(Info2, { "aria-hidden": true }),
+          children: locked ? /* @__PURE__ */ jsxs9(Fragment8, { children: [
+            /* @__PURE__ */ jsx12(Info2, { "aria-hidden": true }),
             " Details"
-          ] }) : /* @__PURE__ */ jsxs8(Fragment6, { children: [
-            /* @__PURE__ */ jsx11(Pencil3, { "aria-hidden": true }),
+          ] }) : /* @__PURE__ */ jsxs9(Fragment8, { children: [
+            /* @__PURE__ */ jsx12(Pencil3, { "aria-hidden": true }),
             " Edit"
           ] })
         }
@@ -5751,14 +5851,14 @@ var EditButton_default = memo7(function EditButton({
 
 // src/studio/components/Palette.tsx
 import {
-  memo as memo8,
-  useCallback as useCallback4,
-  useEffect as useEffect7,
-  useRef as useRef6,
-  useState as useState9
+  memo as memo9,
+  useCallback as useCallback5,
+  useEffect as useEffect9,
+  useRef as useRef8,
+  useState as useState11
 } from "react";
 import { ChevronDown, GripVertical as GripVertical2 } from "lucide-react";
-import { Fragment as Fragment7, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var COMPONENT_DRAG_TYPE = "application/eventcatalog-studio";
 var listedDefinitions = NODE_CATEGORIES.map((category) => ({
   ...category,
@@ -5802,7 +5902,7 @@ function PaletteItem({
   title,
   trailing
 }) {
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "button",
     {
       type: "button",
@@ -5814,13 +5914,13 @@ function PaletteItem({
       title,
       className: `group flex w-full items-center gap-2.5 rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg))] py-1 pl-1 pr-2 text-left text-[rgb(var(--ec-page-text))] shadow-[0_1px_2px_rgb(0_0_0/0.05)] transition-[transform,box-shadow,border-color] duration-150 ${usable ? "cursor-grab hover:-translate-y-px hover:border-[color-mix(in_srgb,rgb(var(--ec-accent))_45%,transparent)]! hover:shadow-[0_4px_12px_rgb(0_0_0/0.08)] active:translate-y-0 active:cursor-grabbing" : "cursor-not-allowed opacity-40 grayscale"}`,
       children: [
-        /* @__PURE__ */ jsx12("span", { className: "flex h-8 w-8 flex-none items-center justify-center rounded-md bg-[rgb(var(--ec-content-hover))]", children: /* @__PURE__ */ jsx12(Icon, { size: 16, className: iconClassName }) }),
-        /* @__PURE__ */ jsxs9("span", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx12("span", { className: "block truncate text-[13px] font-medium leading-tight", children: label }),
-          description && /* @__PURE__ */ jsx12("span", { className: "block truncate text-[11px] leading-snug text-[rgb(var(--ec-page-text-muted))]", children: description })
+        /* @__PURE__ */ jsx13("span", { className: "flex h-8 w-8 flex-none items-center justify-center rounded-md bg-[rgb(var(--ec-content-hover))]", children: /* @__PURE__ */ jsx13(Icon, { size: 16, className: iconClassName }) }),
+        /* @__PURE__ */ jsxs10("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx13("span", { className: "block truncate text-[13px] font-medium leading-tight", children: label }),
+          description && /* @__PURE__ */ jsx13("span", { className: "block truncate text-[11px] leading-snug text-[rgb(var(--ec-page-text-muted))]", children: description })
         ] }),
         trailing ?? (usable && onDragStart && // It's picked up and dragged on (a click adds it in the middle): a small handle says so
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13(
           GripVertical2,
           {
             "aria-hidden": true,
@@ -5837,19 +5937,19 @@ function PaletteSection({
   divided = false,
   children
 }) {
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "section",
     {
       className: divided ? "border-t border-[rgb(var(--ec-page-border))] pt-3" : "",
       children: [
-        /* @__PURE__ */ jsx12("h3", { className: "mb-1.5 text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))]", children: title }),
-        /* @__PURE__ */ jsx12("div", { className: "space-y-1.5", children })
+        /* @__PURE__ */ jsx13("h3", { className: "mb-1.5 text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))]", children: title }),
+        /* @__PURE__ */ jsx13("div", { className: "space-y-1.5", children })
       ]
     }
   );
 }
 var COMPONENTS_TAB = "components";
-var Palette = memo8(function Palette2({
+var Palette = memo9(function Palette2({
   level,
   onAddComponent,
   footer,
@@ -5859,7 +5959,7 @@ var Palette = memo8(function Palette2({
   startCollapsed
 }) {
   const { startDrag, ghost } = useDragGhost();
-  const [collapsed, setCollapsed] = useState9(
+  const [collapsed, setCollapsed] = useState11(
     () => startCollapsed ?? readCollapsed()
   );
   const remember = (next) => {
@@ -5869,13 +5969,13 @@ var Palette = memo8(function Palette2({
     } catch {
     }
   };
-  const toggle = useCallback4(() => {
+  const toggle = useCallback5(() => {
     setCollapsed((current) => {
       remember(!current);
       return !current;
     });
   }, []);
-  const [ownTab, setOwnTab] = useState9(COMPONENTS_TAB);
+  const [ownTab, setOwnTab] = useState11(COMPONENTS_TAB);
   const shown = tab ?? (tabs?.some((candidate) => candidate.id === ownTab) ? ownTab : COMPONENTS_TAB);
   const choose = (next) => {
     setOwnTab(next);
@@ -5885,8 +5985,8 @@ var Palette = memo8(function Palette2({
       remember(false);
     }
   };
-  const chosen = useRef6(tab);
-  useEffect7(() => {
+  const chosen = useRef8(tab);
+  useEffect9(() => {
     if (tab === chosen.current) return;
     chosen.current = tab;
     if (tab === void 0 || !collapsed) return;
@@ -5902,7 +6002,7 @@ var Palette = memo8(function Palette2({
     const { label, summary, firstLevel } = definition;
     const key = componentKey(definition);
     const { icon, className } = NODE_ICONS[key] ?? NODE_ICONS[definition.type];
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       PaletteItem,
       {
         icon,
@@ -5921,18 +6021,18 @@ var Palette = memo8(function Palette2({
       key
     );
   };
-  const components2 = /* @__PURE__ */ jsxs9(Fragment7, { children: [
+  const components2 = /* @__PURE__ */ jsxs10(Fragment9, { children: [
     listedDefinitions.map((category) => {
       const definitions = category.definitions.filter(
         (definition) => isShownOnLevel(definition.type, level)
       );
       if (!definitions.length) return null;
-      return /* @__PURE__ */ jsx12(PaletteSection, { title: category.label, children: definitions.map((definition) => tile(definition)) }, category.id);
+      return /* @__PURE__ */ jsx13(PaletteSection, { title: category.label, children: definitions.map((definition) => tile(definition)) }, category.id);
     }),
-    unavailable.length > 0 && /* @__PURE__ */ jsx12(PaletteSection, { title: `Not on Level ${level}`, divided: true, children: unavailable.map((definition) => tile(definition, false)) })
+    unavailable.length > 0 && /* @__PURE__ */ jsx13(PaletteSection, { title: `Not on Level ${level}`, divided: true, children: unavailable.map((definition) => tile(definition, false)) })
   ] });
   const extra = tabs?.find((candidate) => candidate.id === shown);
-  const tabButton = (id, label, badge) => /* @__PURE__ */ jsxs9(
+  const tabButton = (id, label, badge) => /* @__PURE__ */ jsxs10(
     "button",
     {
       type: "button",
@@ -5942,18 +6042,18 @@ var Palette = memo8(function Palette2({
       className: `flex flex-1 items-center justify-center gap-1 whitespace-nowrap rounded-md px-1.5 py-1 text-xs font-medium ${shown === id && !collapsed ? "bg-[rgb(var(--ec-card-bg))] text-[rgb(var(--ec-page-text))] shadow-sm" : "text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]"}`,
       children: [
         label,
-        !!badge && /* @__PURE__ */ jsx12("span", { className: "rounded-full bg-[rgb(var(--ec-accent))] px-1.5 text-[10px] leading-4 text-white", children: badge })
+        !!badge && /* @__PURE__ */ jsx13("span", { className: "rounded-full bg-[rgb(var(--ec-accent))] px-1.5 text-[10px] leading-4 text-white", children: badge })
       ]
     },
     id
   );
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       className: `absolute left-3 top-[62px] z-10 flex w-[264px] flex-col ${collapsed ? "" : "bottom-[68px]"} rounded-xl border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg))] text-[rgb(var(--ec-page-text))] shadow-[0_8px_24px_rgb(0_0_0/0.08),0_1px_3px_rgb(0_0_0/0.05)]`,
       children: [
-        tabs?.length ? /* @__PURE__ */ jsxs9("div", { className: "flex flex-none items-center gap-1 p-2", children: [
-          /* @__PURE__ */ jsxs9(
+        tabs?.length ? /* @__PURE__ */ jsxs10("div", { className: "flex flex-none items-center gap-1 p-2", children: [
+          /* @__PURE__ */ jsxs10(
             "div",
             {
               role: "tablist",
@@ -5964,7 +6064,7 @@ var Palette = memo8(function Palette2({
               ]
             }
           ),
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13(
             "button",
             {
               type: "button",
@@ -5972,7 +6072,7 @@ var Palette = memo8(function Palette2({
               "aria-expanded": !collapsed,
               "aria-label": collapsed ? "Show the palette" : "Fold the palette away",
               className: "flex-none rounded-md p-1 text-[rgb(var(--ec-page-text-muted))] hover:bg-[rgb(var(--ec-page-border)/0.5)]",
-              children: /* @__PURE__ */ jsx12(
+              children: /* @__PURE__ */ jsx13(
                 ChevronDown,
                 {
                   "aria-hidden": true,
@@ -5981,7 +6081,7 @@ var Palette = memo8(function Palette2({
               )
             }
           )
-        ] }) : /* @__PURE__ */ jsxs9(
+        ] }) : /* @__PURE__ */ jsxs10(
           "button",
           {
             type: "button",
@@ -5989,8 +6089,8 @@ var Palette = memo8(function Palette2({
             "aria-expanded": !collapsed,
             className: "flex flex-none items-center justify-between rounded-xl px-3.5 py-2.5 text-left text-[13px] font-semibold hover:bg-[rgb(var(--ec-content-hover))]!",
             children: [
-              /* @__PURE__ */ jsx12("span", { children: "Resources" }),
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx13("span", { children: "Resources" }),
+              /* @__PURE__ */ jsx13(
                 ChevronDown,
                 {
                   "aria-hidden": true,
@@ -6000,8 +6100,8 @@ var Palette = memo8(function Palette2({
             ]
           }
         ),
-        !collapsed && /* @__PURE__ */ jsx12("div", { className: "min-h-0 flex-1 space-y-3 overflow-y-auto px-3 pb-3", children: extra ? extra.render(startDrag) : components2 }),
-        !collapsed && footer && /* @__PURE__ */ jsx12("div", { className: "flex-none border-t border-[rgb(var(--ec-page-border))] px-3 py-2.5", children: footer }),
+        !collapsed && /* @__PURE__ */ jsx13("div", { className: "min-h-0 flex-1 space-y-3 overflow-y-auto px-3 pb-3", children: extra ? extra.render(startDrag) : components2 }),
+        !collapsed && footer && /* @__PURE__ */ jsx13("div", { className: "flex-none border-t border-[rgb(var(--ec-page-border))] px-3 py-2.5", children: footer }),
         ghost
       ]
     }
@@ -6009,7 +6109,7 @@ var Palette = memo8(function Palette2({
 });
 
 // src/studio/components/Shortcuts.tsx
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
 var MOD = isMac ? "\u2318" : "Ctrl";
 var SHORTCUTS = [
@@ -6060,18 +6160,18 @@ var SHORTCUTS = [
   }
 ];
 function ShortcutsList({ omit = [] }) {
-  return /* @__PURE__ */ jsx13("div", { className: "grid min-h-0 gap-x-8 gap-y-5 overflow-y-auto px-5 py-4 md:grid-cols-2!", children: SHORTCUTS.map(({ group, items }) => ({
+  return /* @__PURE__ */ jsx14("div", { className: "grid min-h-0 gap-x-8 gap-y-5 overflow-y-auto px-5 py-4 md:grid-cols-2!", children: SHORTCUTS.map(({ group, items }) => ({
     group,
     items: items.filter(([label]) => !omit.includes(label))
-  })).map(({ group, items }) => /* @__PURE__ */ jsxs10("section", { children: [
-    /* @__PURE__ */ jsx13("h3", { className: "mb-2 text-[11px] font-semibold uppercase tracking-wide text-[rgb(var(--ec-page-text-muted))]", children: group }),
-    /* @__PURE__ */ jsx13("ul", { className: "divide-y divide-[rgb(var(--ec-page-border))]", children: items.map(([label, keys]) => /* @__PURE__ */ jsxs10(
+  })).map(({ group, items }) => /* @__PURE__ */ jsxs11("section", { children: [
+    /* @__PURE__ */ jsx14("h3", { className: "mb-2 text-[11px] font-semibold uppercase tracking-wide text-[rgb(var(--ec-page-text-muted))]", children: group }),
+    /* @__PURE__ */ jsx14("ul", { className: "divide-y divide-[rgb(var(--ec-page-border))]", children: items.map(([label, keys]) => /* @__PURE__ */ jsxs11(
       "li",
       {
         className: "flex items-center justify-between gap-3 py-1.5 text-sm",
         children: [
-          /* @__PURE__ */ jsx13("span", { children: label }),
-          /* @__PURE__ */ jsx13("span", { className: "flex gap-1", children: keys.map((key) => /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14("span", { children: label }),
+          /* @__PURE__ */ jsx14("span", { className: "flex gap-1", children: keys.map((key) => /* @__PURE__ */ jsx14(
             "kbd",
             {
               className: "min-w-6 rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-content-hover))] px-1.5 py-0.5 text-center font-sans text-xs text-[rgb(var(--ec-page-text-muted))]",
@@ -6087,9 +6187,9 @@ function ShortcutsList({ omit = [] }) {
 }
 
 // src/studio/components/EmptyCanvas.tsx
-import { useEffect as useEffect8, useState as useState10 } from "react";
+import { useEffect as useEffect10, useState as useState12 } from "react";
 import { CircleHelp, FolderOpen, Plug } from "lucide-react";
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 var hintText = "font-[Excalifont,Inter,sans-serif] text-[14px] leading-snug text-[color-mix(in_srgb,rgb(var(--ec-page-text))_22%,transparent)]";
 var arrow = {
   fill: "none",
@@ -6099,24 +6199,24 @@ var arrow = {
   strokeLinejoin: "round"
 };
 function Hints({ palette, live }) {
-  return /* @__PURE__ */ jsxs11("div", { "aria-hidden": true, className: `hidden md:block! ${hintText}`, children: [
-    palette && /* @__PURE__ */ jsxs11("div", { className: "absolute bottom-[120px] left-[290px] flex items-start gap-1", children: [
-      /* @__PURE__ */ jsxs11("svg", { width: "56", height: "32", viewBox: "0 0 70 40", ...arrow, children: [
-        /* @__PURE__ */ jsx14("path", { d: "M66 8 C 45 4, 22 10, 6 26" }),
-        /* @__PURE__ */ jsx14("path", { d: "M6 26 L15.7 23.4 M6 26 L8.6 16.3" })
+  return /* @__PURE__ */ jsxs12("div", { "aria-hidden": true, className: `hidden md:block! ${hintText}`, children: [
+    palette && /* @__PURE__ */ jsxs12("div", { className: "absolute bottom-[120px] left-[290px] flex items-start gap-1", children: [
+      /* @__PURE__ */ jsxs12("svg", { width: "56", height: "32", viewBox: "0 0 70 40", ...arrow, children: [
+        /* @__PURE__ */ jsx15("path", { d: "M66 8 C 45 4, 22 10, 6 26" }),
+        /* @__PURE__ */ jsx15("path", { d: "M6 26 L15.7 23.4 M6 26 L8.6 16.3" })
       ] }),
-      /* @__PURE__ */ jsx14("p", { className: "-mt-0.5 max-w-[160px]", children: "Drag resources onto the canvas, then connect them" })
+      /* @__PURE__ */ jsx15("p", { className: "-mt-0.5 max-w-[160px]", children: "Drag resources onto the canvas, then connect them" })
     ] }),
-    /* @__PURE__ */ jsxs11("div", { className: "absolute left-[calc(50%+6px)] top-[66px] flex -translate-x-1/2 flex-col items-center", children: [
-      /* @__PURE__ */ jsxs11("svg", { width: "32", height: "45", viewBox: "0 0 40 56", ...arrow, children: [
-        /* @__PURE__ */ jsx14("path", { d: "M14 54 C 6 38, 10 18, 20 4" }),
-        /* @__PURE__ */ jsx14("path", { d: "M20 4 L11.8 7.7 M20 4 L19.1 13" })
+    /* @__PURE__ */ jsxs12("div", { className: "absolute left-[calc(50%+6px)] top-[66px] flex -translate-x-1/2 flex-col items-center", children: [
+      /* @__PURE__ */ jsxs12("svg", { width: "32", height: "45", viewBox: "0 0 40 56", ...arrow, children: [
+        /* @__PURE__ */ jsx15("path", { d: "M14 54 C 6 38, 10 18, 20 4" }),
+        /* @__PURE__ */ jsx15("path", { d: "M20 4 L11.8 7.7 M20 4 L19.1 13" })
       ] }),
-      /* @__PURE__ */ jsx14("p", { className: "mt-1 whitespace-nowrap", children: "Switch between levels of detail" })
+      /* @__PURE__ */ jsx15("p", { className: "mt-1 whitespace-nowrap", children: "Switch between levels of detail" })
     ] }),
-    live && /* @__PURE__ */ jsxs11("div", { className: "absolute right-[52px] top-[66px] flex items-end gap-1", children: [
-      /* @__PURE__ */ jsx14("p", { className: "mb-[-5px] max-w-[200px] text-right", children: "Start live collaboration with your team or agents" }),
-      /* @__PURE__ */ jsxs11(
+    live && /* @__PURE__ */ jsxs12("div", { className: "absolute right-[52px] top-[66px] flex items-end gap-1", children: [
+      /* @__PURE__ */ jsx15("p", { className: "mb-[-5px] max-w-[200px] text-right", children: "Start live collaboration with your team or agents" }),
+      /* @__PURE__ */ jsxs12(
         "svg",
         {
           width: "40",
@@ -6125,8 +6225,8 @@ function Hints({ palette, live }) {
           className: "flex-none",
           ...arrow,
           children: [
-            /* @__PURE__ */ jsx14("path", { d: "M6 56 C 30 52, 42 30, 40 4" }),
-            /* @__PURE__ */ jsx14("path", { d: "M40 4 L36.1 12.1 M40 4 L45.1 11.4" })
+            /* @__PURE__ */ jsx15("path", { d: "M6 56 C 30 52, 42 30, 40 4" }),
+            /* @__PURE__ */ jsx15("path", { d: "M40 4 L36.1 12.1 M40 4 L45.1 11.4" })
           ]
         }
       )
@@ -6143,9 +6243,9 @@ function EmptyCanvas({
   palette,
   live
 }) {
-  const [dragging, setDragging] = useState10(false);
-  const [dropped, setDropped] = useState10(false);
-  useEffect8(() => {
+  const [dragging, setDragging] = useState12(false);
+  const [dropped, setDropped] = useState12(false);
+  useEffect10(() => {
     const start = () => setDragging(true);
     const end = () => setDragging(false);
     const drop = () => {
@@ -6162,353 +6262,60 @@ function EmptyCanvas({
     };
   }, []);
   if (dragging || dropped) return null;
-  const item = (icon, label, onClick, hint) => /* @__PURE__ */ jsxs11(
+  const item = (icon, label, onClick, hint) => /* @__PURE__ */ jsxs12(
     "button",
     {
       type: "button",
       onClick,
       className: "group flex h-11 w-full items-center gap-3.5 rounded-lg px-3 text-left text-[15px] text-[rgb(var(--ec-page-text-muted))] transition-colors hover:bg-[rgb(var(--ec-content-hover))]! hover:text-[rgb(var(--ec-page-text))]! [&_svg]:h-[18px] [&_svg]:w-[18px] [&_svg]:stroke-[1.75]",
       children: [
-        /* @__PURE__ */ jsx14("span", { className: "flex flex-none", children: icon }),
-        /* @__PURE__ */ jsx14("span", { className: "min-w-0 flex-1 truncate", children: label }),
-        hint && /* @__PURE__ */ jsx14("span", { className: "flex-none text-[13px] opacity-80", children: hint })
+        /* @__PURE__ */ jsx15("span", { className: "flex flex-none", children: icon }),
+        /* @__PURE__ */ jsx15("span", { className: "min-w-0 flex-1 truncate", children: label }),
+        hint && /* @__PURE__ */ jsx15("span", { className: "flex-none text-[13px] opacity-80", children: hint })
       ]
     }
   );
   return (
     // On the canvas itself: what's dragged in from the left still lands on it
-    /* @__PURE__ */ jsxs11("div", { className: "pointer-events-none absolute inset-0 z-[5] flex items-center justify-center px-4 pb-16 pt-40", children: [
-      /* @__PURE__ */ jsx14(Hints, { palette, live }),
-      welcome && /* @__PURE__ */ jsxs11("div", { className: "pointer-events-auto flex w-full max-w-[440px] flex-col items-center", children: [
-        /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-3 text-[rgb(var(--ec-page-text))]", children: [
-          /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsxs12("div", { className: "pointer-events-none absolute inset-0 z-[5] flex items-center justify-center px-4 pb-16 pt-40", children: [
+      /* @__PURE__ */ jsx15(Hints, { palette, live }),
+      welcome && /* @__PURE__ */ jsxs12("div", { className: "pointer-events-auto flex w-full max-w-[440px] flex-col items-center", children: [
+        /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-3 text-[rgb(var(--ec-page-text))]", children: [
+          /* @__PURE__ */ jsx15(
             "span",
             {
               className: "h-11 w-11 [&_svg]:h-full [&_svg]:w-full",
               dangerouslySetInnerHTML: { __html: eventcatalog_logo_default }
             }
           ),
-          /* @__PURE__ */ jsxs11("span", { className: "text-[34px] font-bold tracking-tight", children: [
+          /* @__PURE__ */ jsxs12("span", { className: "text-[34px] font-bold tracking-tight", children: [
             "EventCatalog",
             " ",
-            /* @__PURE__ */ jsx14("span", { className: "font-light text-[rgb(var(--ec-page-text-muted))]", children: "Studio" })
+            /* @__PURE__ */ jsx15("span", { className: "font-light text-[rgb(var(--ec-page-text-muted))]", children: "Studio" })
           ] })
         ] }),
-        /* @__PURE__ */ jsx14("p", { className: "mt-5 text-center font-[Excalifont,Inter,sans-serif] text-[22px] leading-snug text-[color-mix(in_srgb,rgb(var(--ec-page-text))_38%,transparent)]", children: "Sketch, design and share architecture with your team and AI agents." }),
-        /* @__PURE__ */ jsxs11("div", { className: "mt-10 w-full", children: [
-          onOpen && item(/* @__PURE__ */ jsx14(FolderOpen, { "aria-hidden": true }), "Open", onOpen, `${MOD2}+O`),
-          onConnect && item(/* @__PURE__ */ jsx14(Plug, { "aria-hidden": true }), "Connect to MCP Server", onConnect),
-          item(/* @__PURE__ */ jsx14(CircleHelp, { "aria-hidden": true }), "Help", onHelp, "?")
+        /* @__PURE__ */ jsx15("p", { className: "mt-5 text-center font-[Excalifont,Inter,sans-serif] text-[22px] leading-snug text-[color-mix(in_srgb,rgb(var(--ec-page-text))_38%,transparent)]", children: "Sketch, design and share architecture with your team and AI agents." }),
+        /* @__PURE__ */ jsxs12("div", { className: "mt-10 w-full", children: [
+          onOpen && item(/* @__PURE__ */ jsx15(FolderOpen, { "aria-hidden": true }), "Open", onOpen, `${MOD2}+O`),
+          onConnect && item(/* @__PURE__ */ jsx15(Plug, { "aria-hidden": true }), "Connect to MCP Server", onConnect),
+          item(/* @__PURE__ */ jsx15(CircleHelp, { "aria-hidden": true }), "Help", onHelp, "?")
         ] })
       ] })
     ] })
   );
 }
 
-// src/studio/components/NodeCard.tsx
-import {
-  useCallback as useCallback5,
-  useEffect as useEffect9,
-  useRef as useRef7,
-  useState as useState11
-} from "react";
-import { Check as Check2, X as X4 } from "lucide-react";
-import { Fragment as Fragment8, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
-var MODAL_WIDTH = 300;
-var GAP2 = 12;
-var EDGE2 = 8;
-var ARROW_DOWN = 32;
-function useNodeAnchor(nodeId, containerRef, modalRef, bottomInset = EDGE2) {
-  const [anchor, setAnchor] = useState11(null);
-  useEffect9(() => {
-    let frame = 0;
-    const update = () => {
-      const container = containerRef.current;
-      const element = container?.querySelector(
-        `.react-flow__node[data-id="${CSS.escape(nodeId)}"]`
-      );
-      if (container && element) {
-        const bounds = container.getBoundingClientRect();
-        const rect = element.getBoundingClientRect();
-        const height = modalRef.current?.offsetHeight ?? 200;
-        const width = modalRef.current?.offsetWidth || MODAL_WIDTH;
-        const side = rect.right + GAP2 + width <= bounds.right - EDGE2 ? "right" : "left";
-        const left = side === "right" ? rect.right - bounds.left + GAP2 : rect.left - bounds.left - GAP2 - width;
-        const clamp = (value, max) => Math.min(Math.max(value, EDGE2), Math.max(max, EDGE2));
-        const top = clamp(
-          Math.min(rect.top, rect.top + rect.height / 2 - ARROW_DOWN) - bounds.top,
-          bounds.height - height - bottomInset
-        );
-        const placed = clamp(left, bounds.width - width - EDGE2);
-        const middle = rect.top + rect.height / 2 - bounds.top - top;
-        const pointsAt = placed === left && middle >= 14 && middle <= height - 14 ? Math.round(middle) : void 0;
-        const next = { side, left: placed, top, pointsAt };
-        setAnchor(
-          (previous) => previous?.left === next.left && previous?.top === next.top && previous?.side === next.side && previous?.pointsAt === next.pointsAt ? previous : next
-        );
-      }
-      frame = requestAnimationFrame(update);
-    };
-    update();
-    return () => cancelAnimationFrame(frame);
-  }, [nodeId, containerRef, modalRef, bottomInset]);
-  return anchor;
-}
-function useSavedFlash() {
-  const [saved, setSaved] = useState11(false);
-  const timer = useRef7(void 0);
-  const showSaved = useCallback5(() => {
-    setSaved(true);
-    clearTimeout(timer.current);
-    timer.current = setTimeout(() => setSaved(false), 1600);
-  }, []);
-  useEffect9(() => () => clearTimeout(timer.current), []);
-  return { saved, showSaved };
-}
-function EditStatus({ saved }) {
-  return /* @__PURE__ */ jsx15(
-    "p",
-    {
-      className: `ec-edit-status ${saved ? "is-saved" : ""}`,
-      "aria-live": "polite",
-      children: saved ? /* @__PURE__ */ jsxs12(Fragment8, { children: [
-        /* @__PURE__ */ jsx15(Check2, { "aria-hidden": true }),
-        " Saved"
-      ] }) : "Changes save as you type"
-    }
-  );
-}
-function NodeCard({
-  nodeId,
-  containerRef,
-  label,
-  kicker,
-  header,
-  children,
-  width = 340,
-  bottomInset = 76,
-  onClose
-}) {
-  const cardRef = useRef7(null);
-  const anchor = useNodeAnchor(nodeId, containerRef, cardRef, bottomInset);
-  const onCloseRef = useRef7(onClose);
-  onCloseRef.current = onClose;
-  useEffect9(() => {
-    const close = () => {
-      const active = document.activeElement;
-      if (active instanceof HTMLElement && cardRef.current?.contains(active))
-        active.blur();
-      onCloseRef.current();
-    };
-    const onPointerDown = (event) => {
-      if (!cardRef.current?.contains(event.target)) close();
-    };
-    const onKeyDown = (event) => event.key === "Escape" && close();
-    document.addEventListener("pointerdown", onPointerDown, true);
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("pointerdown", onPointerDown, true);
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, []);
-  const shown = !!anchor;
-  const focusedFirst = useRef7(false);
-  useEffect9(() => {
-    if (!shown || focusedFirst.current) return;
-    focusedFirst.current = true;
-    const field = cardRef.current?.querySelector(
-      "input:not([readonly]):not([disabled]), textarea:not([readonly]):not([disabled])"
-    );
-    if (!field) return;
-    field.focus({ preventScroll: true });
-    try {
-      field.setSelectionRange(field.value.length, field.value.length);
-    } catch {
-    }
-  }, [shown]);
-  return /* @__PURE__ */ jsxs12(Fragment8, { children: [
-    anchor?.pointsAt !== void 0 && /* @__PURE__ */ jsx15(
-      "span",
-      {
-        "aria-hidden": true,
-        className: `ec-doc-card-arrow is-${anchor.side}`,
-        style: {
-          top: anchor.top + anchor.pointsAt - 7,
-          left: anchor.side === "right" ? anchor.left - 6 : anchor.left + width - 8
-        }
-      }
-    ),
-    /* @__PURE__ */ jsxs12(
-      "div",
-      {
-        ref: cardRef,
-        className: "ec-doc-card",
-        role: "dialog",
-        "aria-label": label,
-        style: {
-          width,
-          top: anchor?.top ?? 8,
-          left: anchor?.left ?? 8,
-          visibility: anchor ? "visible" : "hidden"
-        },
-        children: [
-          /* @__PURE__ */ jsxs12("header", { className: "ec-doc-card-header", children: [
-            /* @__PURE__ */ jsxs12("div", { className: "ec-doc-card-kicker", children: [
-              kicker,
-              /* @__PURE__ */ jsx15(
-                "button",
-                {
-                  type: "button",
-                  className: "ec-icon-button ec-doc-card-close",
-                  "aria-label": "Close",
-                  onClick: onClose,
-                  children: /* @__PURE__ */ jsx15(X4, { "aria-hidden": true })
-                }
-              )
-            ] }),
-            header
-          ] }),
-          children
-        ]
-      }
-    )
-  ] });
-}
-var SAVE_DELAY = 250;
-function EditableText({
-  value,
-  onSave,
-  multiline = false,
-  placeholder,
-  className = "",
-  label,
-  required = false,
-  onSaved
-}) {
-  const [draft, setDraft] = useState11(value);
-  const focused = useRef7(false);
-  const before = useRef7(value);
-  const pending = useRef7(null);
-  const timer = useRef7(void 0);
-  const latest = useRef7({ value, onSave, onSaved, required });
-  latest.current = { value, onSave, onSaved, required };
-  useEffect9(() => {
-    if (!focused.current) setDraft(value);
-  }, [value]);
-  const flush = () => {
-    clearTimeout(timer.current);
-    const next = pending.current;
-    pending.current = null;
-    if (next === null) return;
-    const {
-      value: saved,
-      onSave: save,
-      onSaved: said,
-      required: needed
-    } = latest.current;
-    if (needed && !next.trim() || next === saved) return;
-    save(next);
-    said?.();
-  };
-  useEffect9(() => flush, []);
-  const change = (next) => {
-    setDraft(next);
-    pending.current = next;
-    clearTimeout(timer.current);
-    timer.current = setTimeout(flush, SAVE_DELAY);
-  };
-  const reverted = useRef7(false);
-  const leave = () => {
-    focused.current = false;
-    if (reverted.current) {
-      reverted.current = false;
-      return;
-    }
-    const trimmed = draft.trim();
-    if (required && !trimmed) {
-      setDraft(before.current);
-      pending.current = before.current;
-    } else {
-      if (trimmed !== draft) setDraft(trimmed);
-      pending.current = trimmed;
-    }
-    flush();
-  };
-  const keys = (event) => {
-    if (event.key === "Escape") {
-      event.stopPropagation();
-      setDraft(before.current);
-      pending.current = before.current;
-      flush();
-      reverted.current = true;
-      event.target.blur();
-    } else if (event.key === "Enter" && (!multiline || event.metaKey || event.ctrlKey)) {
-      event.preventDefault();
-      event.target.blur();
-    }
-  };
-  const focus = () => {
-    focused.current = true;
-    before.current = value;
-  };
-  const fit = (area) => {
-    if (!area) return;
-    area.style.height = "auto";
-    area.style.height = `${area.scrollHeight + 2}px`;
-  };
-  return multiline ? /* @__PURE__ */ jsx15(
-    "textarea",
-    {
-      ref: fit,
-      "aria-label": label,
-      value: draft,
-      rows: 2,
-      placeholder,
-      onChange: (event) => {
-        change(event.target.value);
-        fit(event.target);
-      },
-      onFocus: focus,
-      onBlur: leave,
-      onKeyDown: keys,
-      className: `ec-editable ${className}`
-    }
-  ) : /* @__PURE__ */ jsx15(
-    "input",
-    {
-      "aria-label": label,
-      value: draft,
-      placeholder,
-      onChange: (event) => change(event.target.value),
-      onFocus: focus,
-      onBlur: leave,
-      onKeyDown: keys,
-      className: `ec-editable ${className}`
-    }
-  );
-}
-function Field({
-  label,
-  children,
-  className = ""
-}) {
-  return /* @__PURE__ */ jsxs12("label", { className: `ec-field ${className}`, children: [
-    /* @__PURE__ */ jsx15("span", { className: "ec-field-label", children: label }),
-    children
-  ] });
-}
-
 // src/studio/components/RemeasureHandles.tsx
-import { memo as memo9, useEffect as useEffect10 } from "react";
+import { memo as memo10, useEffect as useEffect11 } from "react";
 import {
   useStore as useStore2,
   useUpdateNodeInternals as useUpdateNodeInternals2
 } from "@xyflow/react";
 var selectDomNode = (state) => state.domNode;
-var RemeasureHandles = memo9(function RemeasureHandles2() {
+var RemeasureHandles = memo10(function RemeasureHandles2() {
   const domNode = useStore2(selectDomNode);
   const updateNodeInternals = useUpdateNodeInternals2();
-  useEffect10(() => {
+  useEffect11(() => {
     if (!domNode) return;
     const pending = /* @__PURE__ */ new Set();
     let frame = 0;
@@ -6547,6 +6354,10 @@ export {
   CLIPBOARD_TYPE,
   COMPONENT_DRAG_TYPE,
   COMPONENT_TYPES,
+  CONNECT_MIN_DISTANCE,
+  CONNECT_PLACEHOLDER,
+  CONNECT_PLACEHOLDER_EDGE,
+  CONNECT_PLACEHOLDER_SIZE,
   COUNTER_SCALE,
   CanvasControls_default as CanvasControls,
   CanvasPortal,
@@ -6555,6 +6366,8 @@ export {
   ClaudeLogo,
   CommentLayer,
   CommentList,
+  ConnectChooser,
+  ConnectPlaceholderNode,
   ContainerChooser,
   ContextMenu,
   CursorLogo,
@@ -6615,10 +6428,12 @@ export {
   canPickWhereToSave,
   canvasImage,
   canvasToModel,
+  centreBeyond,
   changesNodesOrEdges,
   cleanFileName,
   componentKey,
   connectNodes,
+  connectedType,
   containerFor,
   copyNodes,
   createEdge,
@@ -6632,6 +6447,7 @@ export {
   deleteThreads,
   downloadFile,
   fileNameFor,
+  filterConnectOptions,
   findDropTarget,
   findDropTargets,
   findGroupAtPoint,
@@ -6643,6 +6459,7 @@ export {
   getAnchorPosition,
   getCanvasMaps,
   getCanvasStatus,
+  getConnectOptions,
   getDiagramLevel,
   getDiagramLevelUnavailable,
   getEdgeLabel,
@@ -6659,8 +6476,11 @@ export {
   getNoteLevel,
   getResource,
   getStructureKey,
+  isAwayFrom,
+  isCardType,
   isCatalogCollection,
   isDecided,
+  isEmptyCanvasAt,
   isGroupType,
   isOnLevel,
   isShownOnLevel,
@@ -6670,12 +6490,15 @@ export {
   keepUnchanged,
   layoutGraph,
   levelPlaces,
+  linkConnection,
   modelToCanvas,
   moveNode,
   moveThread,
   moveThreads,
+  newCardData,
   nodeDefinitions,
   nodeTypes,
+  notPlaceholder,
   pasteNodes,
   patchShared,
   pickDiagramFile,
@@ -6719,6 +6542,7 @@ export {
   updateHotspot,
   updateNodeData,
   updateResource,
+  useConnectNew,
   useCounterScale,
   useDragGhost,
   useNodeAnchor,