@eventcatalog/visualiser 5.2.1 → 5.2.2

package/dist/studio.mjs

@@ -834,17 +834,7 @@ var deleteNodes = (doc, ids) => doc.transact(() => {
     thread.delete("offset");
   });
   hotspots.forEach((hotspot, id) => {
-    const node = hotspot.nodeId && removed.has(hotspot.nodeId) ? nodes.get(hotspot.nodeId) : void 0;
-    if (!node) return;
-    const position = getAbsolutePosition(node, lookup);
-    const { nodeId: _, ...rest } = hotspot;
-    hotspots.set(id, {
-      ...rest,
-      position: {
-        x: position.x + (node.measured?.width ?? node.width ?? 0),
-        y: position.y
-      }
-    });
+    if (hotspot.nodeId && removed.has(hotspot.nodeId)) hotspots.delete(id);
   });
   removed.forEach((id) => {
     nodes.delete(id);
@@ -3181,6 +3171,21 @@ var EditingContext = createContext(
 );
 var DropTargetContext = createContext(null);
 var StartWritingContext = createContext(null);
+var START_WRITING_EVENT = "studio:start-writing";
+var startWriting = (id) => window.dispatchEvent(
+  new CustomEvent(START_WRITING_EVENT, { detail: id })
+);
+function useStartWriting(id, start) {
+  const latest = useRef3(start);
+  latest.current = start;
+  useEffect4(() => {
+    const listener = (event) => {
+      if (event.detail === id) latest.current();
+    };
+    window.addEventListener(START_WRITING_EVENT, listener);
+    return () => window.removeEventListener(START_WRITING_EVENT, listener);
+  }, [id]);
+}
 var LockedContext = createContext(false);
 var SystemGroupComponent = SystemGroupNode_default;
 function WidthHandles() {
@@ -3289,6 +3294,7 @@ var StickyNote = memo3(function StickyNote2({ id, data, selected }) {
     useContext(StartWritingContext) === id
   );
   const locked = useContext(LockedContext);
+  useStartWriting(id, () => !locked && setEditing(true));
   const colorName = typeof data.color === "string" && NOTE_COLORS[data.color] ? data.color : "yellow";
   const color = NOTE_COLORS[colorName];
   return /* @__PURE__ */ jsxs3(
@@ -3444,6 +3450,7 @@ var TextNode = memo3(function TextNode2({ id, data, selected }) {
     if (!text.trim()) void deleteElements({ nodes: [{ id }] });
   };
   const locked = useContext(LockedContext);
+  useStartWriting(id, () => !locked && setEditing(true));
   const framed = (selected || scaling !== null || turning !== null) && !editing && !locked;
   return /* @__PURE__ */ jsxs3(
     "div",
@@ -4461,7 +4468,9 @@ function CommentList({
 
 // src/studio/components/ContextMenu.tsx
 import {
+  Fragment as Fragment5,
   memo as memo5,
+  useContext as useContext3,
   useEffect as useEffect6,
   useLayoutEffect as useLayoutEffect2,
   useRef as useRef5,
@@ -4473,18 +4482,75 @@ import {
   CopyPlus,
   MessageCircle,
   MessageCircleQuestion,
+  Palette,
   Pencil,
+  Scissors,
   SendToBack,
   StickyNote as StickyNote3,
   Trash2 as Trash22,
   TriangleAlert
 } from "lucide-react";
-import { Fragment as Fragment5, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var EDGE = 8;
+var itemClass = "flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-left text-[13px] leading-5 transition-colors hover:bg-[rgb(var(--ec-page-border)/0.5)]";
+var iconClass = "flex-none text-[rgb(var(--ec-icon-color))]";
+function Item({
+  icon,
+  label,
+  onClick,
+  shortcut,
+  danger
+}) {
+  return /* @__PURE__ */ jsxs5(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      className: `${itemClass} ${danger ? `${STATUS.danger.text} ${STATUS.danger.hover}` : ""}`,
+      onClick,
+      children: [
+        /* @__PURE__ */ jsx7("span", { className: danger ? "flex-none" : iconClass, children: icon }),
+        /* @__PURE__ */ jsx7("span", { className: "min-w-0 flex-1 truncate", children: label }),
+        shortcut && /* @__PURE__ */ jsx7("kbd", { className: "ml-4 flex-none font-sans text-[11px] text-[rgb(var(--ec-page-text-muted))]", children: shortcut })
+      ]
+    }
+  );
+}
+function NoteColours({ node, onPicked }) {
+  const updateNodeData2 = useContext3(UpdateNodeDataContext);
+  const current = typeof node.data.color === "string" && NOTE_COLORS[node.data.color] ? node.data.color : "yellow";
+  return /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2.5 px-2 py-1.5 text-[13px] leading-5", children: [
+    /* @__PURE__ */ jsx7(Palette, { size: 14, className: iconClass }),
+    /* @__PURE__ */ jsx7("span", { className: "flex-1", children: "Colour" }),
+    /* @__PURE__ */ jsx7("span", { role: "radiogroup", "aria-label": "Note colour", className: "flex gap-1", children: Object.entries(NOTE_COLORS).map(([name, { fill, border }]) => /* @__PURE__ */ jsx7(
+      "button",
+      {
+        type: "button",
+        role: "radio",
+        "aria-checked": name === current,
+        title: name.charAt(0).toUpperCase() + name.slice(1),
+        onClick: () => {
+          updateNodeData2(node.id, (data) => ({ ...data, color: name }));
+          onPicked();
+        },
+        className: "h-4 w-4 rounded-full border transition-transform hover:scale-110",
+        style: {
+          background: fill,
+          borderColor: border,
+          ...name === current && {
+            boxShadow: "0 0 0 1.5px rgb(var(--ec-card-bg)), 0 0 0 3px rgb(var(--ec-page-text))"
+          }
+        }
+      },
+      name
+    )) })
+  ] });
+}
 var ContextMenu = memo5(function ContextMenu2({
   menu,
   questions,
   onCopy,
+  onCut,
   onDuplicate,
   onPaste,
   onAddNote,
@@ -4495,6 +4561,7 @@ var ContextMenu = memo5(function ContextMenu2({
   onDeleteNode,
   onClose
 }) {
+  const locked = useContext3(LockedContext);
   useEffect6(() => {
     if (!menu) return;
     const close = (event) => {
@@ -4525,70 +4592,211 @@ var ContextMenu = memo5(function ContextMenu2({
     });
   }, [menu]);
   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__ */ jsxs5("button", { className: `${itemClass} ${className}`, onClick, children: [
-    icon,
-    label,
-    shortcut && /* @__PURE__ */ jsx7("span", { className: shortcutClass, children: shortcut })
-  ] });
-  const separator = /* @__PURE__ */ jsx7("div", { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" });
-  return /* @__PURE__ */ jsxs5(
+  const node = menu.node;
+  const written = !!node && isWrittenOnCanvas(node.type);
+  const editable = !locked;
+  const clipboard = [
+    editable && onCut && /* @__PURE__ */ jsx7(
+      Item,
+      {
+        icon: /* @__PURE__ */ jsx7(Scissors, { size: 14 }),
+        label: "Cut",
+        onClick: onCut,
+        shortcut: "\u2318X"
+      },
+      "cut"
+    ),
+    /* @__PURE__ */ jsx7(
+      Item,
+      {
+        icon: /* @__PURE__ */ jsx7(Copy, { size: 14 }),
+        label: "Copy",
+        onClick: onCopy,
+        shortcut: "\u2318C"
+      },
+      "copy"
+    ),
+    editable && onPaste && /* @__PURE__ */ jsx7(
+      Item,
+      {
+        icon: /* @__PURE__ */ jsx7(ClipboardPaste, { size: 14 }),
+        label: "Paste",
+        onClick: onPaste,
+        shortcut: "\u2318V"
+      },
+      "paste"
+    ),
+    editable && /* @__PURE__ */ jsx7(
+      Item,
+      {
+        icon: /* @__PURE__ */ jsx7(CopyPlus, { size: 14 }),
+        label: "Duplicate",
+        onClick: onDuplicate,
+        shortcut: "\u2318D"
+      },
+      "duplicate"
+    )
+  ];
+  const comment = onAddComment && /* @__PURE__ */ jsx7(
+    Item,
+    {
+      icon: /* @__PURE__ */ jsx7(MessageCircle, { size: 14 }),
+      label: "Add comment",
+      onClick: onAddComment,
+      shortcut: "C"
+    },
+    "comment"
+  );
+  const remove = editable && /* @__PURE__ */ jsx7(
+    Item,
+    {
+      icon: /* @__PURE__ */ jsx7(Trash22, { size: 14 }),
+      label: "Delete",
+      onClick: onDeleteNode,
+      shortcut: "\u232B",
+      danger: true
+    },
+    "delete"
+  );
+  const groups = node ? written ? [
+    [
+      editable && /* @__PURE__ */ jsx7(
+        Item,
+        {
+          icon: /* @__PURE__ */ jsx7(Pencil, { size: 14 }),
+          label: "Edit text",
+          onClick: () => {
+            startWriting(node.id);
+            onClose();
+          }
+        },
+        "edit"
+      )
+    ],
+    clipboard,
+    [
+      editable && node.type === "note" && /* @__PURE__ */ jsx7(NoteColours, { node, onPicked: onClose }, "colour")
+    ],
+    [comment],
+    [remove]
+  ] : [
+    (questions ?? []).map((question) => /* @__PURE__ */ jsx7(
+      Item,
+      {
+        icon: /* @__PURE__ */ jsx7(MessageCircleQuestion, { size: 14 }),
+        label: question.label,
+        onClick: question.onSelect
+      },
+      question.label
+    )),
+    [
+      onEditDetails && /* @__PURE__ */ jsx7(
+        Item,
+        {
+          icon: /* @__PURE__ */ jsx7(Pencil, { size: 14 }),
+          label: "Edit details",
+          onClick: onEditDetails
+        },
+        "details"
+      )
+    ],
+    clipboard,
+    [
+      comment,
+      onAddHotspot && /* @__PURE__ */ jsx7(
+        Item,
+        {
+          icon: /* @__PURE__ */ jsx7(TriangleAlert, { size: 14 }),
+          label: "Add hotspot",
+          onClick: onAddHotspot,
+          shortcut: "A"
+        },
+        "hotspot"
+      ),
+      editable && /* @__PURE__ */ jsx7(
+        Item,
+        {
+          icon: /* @__PURE__ */ jsx7(StickyNote3, { size: 14 }),
+          label: "Add note",
+          onClick: onAddNote
+        },
+        "note"
+      )
+    ],
+    [remove]
+  ] : [
+    [
+      editable && onPaste && /* @__PURE__ */ jsx7(
+        Item,
+        {
+          icon: /* @__PURE__ */ jsx7(ClipboardPaste, { size: 14 }),
+          label: "Paste here",
+          onClick: onPaste,
+          shortcut: "\u2318V"
+        },
+        "paste"
+      )
+    ],
+    [
+      editable && /* @__PURE__ */ jsx7(
+        Item,
+        {
+          icon: /* @__PURE__ */ jsx7(StickyNote3, { size: 14 }),
+          label: "Add sticky note",
+          onClick: onAddNote,
+          shortcut: "N"
+        },
+        "note"
+      ),
+      comment,
+      onAddHotspot && /* @__PURE__ */ jsx7(
+        Item,
+        {
+          icon: /* @__PURE__ */ jsx7(TriangleAlert, { size: 14 }),
+          label: "Add hotspot",
+          onClick: onAddHotspot,
+          shortcut: "A"
+        },
+        "hotspot"
+      )
+    ],
+    [
+      onReorder && /* @__PURE__ */ jsx7(
+        Item,
+        {
+          icon: /* @__PURE__ */ jsx7(SendToBack, { size: 14 }),
+          label: "Reorder diagram",
+          onClick: onReorder
+        },
+        "reorder"
+      )
+    ]
+  ];
+  const sections = groups.map((group) => group.filter(Boolean)).filter((group) => group.length > 0);
+  return /* @__PURE__ */ jsx7(
     "div",
     {
+      role: "menu",
       onPointerDown: (event) => event.stopPropagation(),
       onContextMenu: (event) => event.preventDefault(),
       ref: menuRef,
-      className: "fixed z-50 w-56 overflow-y-auto rounded-lg border p-1 shadow-xl bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))]",
+      className: "fixed z-50 w-60 overflow-y-auto rounded-xl 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: placed?.left ?? menu.x,
         top: placed?.top ?? menu.y,
         maxHeight: `calc(100vh - ${EDGE * 2}px)`,
         visibility: placed ? "visible" : "hidden"
       },
-      children: [
-        menu.node && questions?.length ? /* @__PURE__ */ jsxs5(Fragment5, { children: [
-          questions.map((question) => /* @__PURE__ */ jsxs5(
-            "button",
-            {
-              className: itemClass,
-              onClick: question.onSelect,
-              children: [
-                /* @__PURE__ */ jsx7(MessageCircleQuestion, { size: 14 }),
-                question.label
-              ]
-            },
-            question.label
-          )),
-          separator
-        ] }) : null,
-        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__ */ jsx7(Trash22, { size: 14 }),
-            "Delete",
-            onDeleteNode,
-            "\u232B",
-            STATUS.danger.text
-          )
-        ] }),
-        !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__ */ jsx7(SendToBack, { size: 14 }), "Reorder diagram", onReorder)
-          ] })
-        ] })
-      ]
+      children: sections.map((section, index) => /* @__PURE__ */ jsxs5(Fragment5, { children: [
+        index > 0 && /* @__PURE__ */ jsx7(
+          "div",
+          {
+            role: "separator",
+            className: "-mx-1.5 my-1.5 h-px bg-[rgb(var(--ec-page-border))]"
+          }
+        ),
+        section
+      ] }, index))
     }
   );
 });
@@ -4704,6 +4912,7 @@ function DragGhost({ ghost, onEnd }) {
 // src/studio/components/Hotspots.tsx
 import {
   memo as memo6,
+  useEffect as useEffect8,
   useLayoutEffect as useLayoutEffect3,
   useRef as useRef7,
   useState as useState9
@@ -4715,6 +4924,7 @@ import {
 } from "@xyflow/react";
 import {
   Info,
+  LocateFixed,
   OctagonAlert,
   Pencil as Pencil2,
   Trash2 as Trash23,
@@ -4738,7 +4948,6 @@ var topSeverity = (hotspots) => [...hotspots].sort(bySeverity)[0]?.severity;
 var MARKER_SCALE = "--studio-hotspot-scale";
 var PANEL_SCALE = "--studio-hotspot-panel-scale";
 var MIN_SCREEN_SCALE = 0.5;
-var ICONS_ONLY_BELOW_ZOOM = 0.6;
 function useMarkerScale(ref) {
   const store = useStoreApi4();
   useLayoutEffect3(() => {
@@ -4748,7 +4957,6 @@ function useMarkerScale(ref) {
       const scale = zoom >= 1 ? 1 / zoom : Math.max(1, MIN_SCREEN_SCALE / zoom);
       element.style.setProperty(MARKER_SCALE, String(scale));
       element.style.setProperty(PANEL_SCALE, String(1 / zoom / scale));
-      element.classList.toggle("is-icons-only", zoom < ICONS_ONLY_BELOW_ZOOM);
     };
     apply(store.getState().transform[2]);
     return store.subscribe((state, previous) => {
@@ -4795,6 +5003,48 @@ function SeverityIcon({
 }
 var DRAG_THRESHOLD_PX2 = 4;
 var ICON_CENTRE_PX = 14;
+function useMarkerDrag(onClick, onDrag) {
+  const drag = useRef7(null);
+  const pointOf = (event, grab) => ({ x: event.clientX - grab.x, y: event.clientY - grab.y });
+  return {
+    onKeyDown: (event) => (event.key === "Enter" || event.key === " ") && onClick(),
+    onPointerDown: (event) => {
+      if (event.button !== 0) return;
+      try {
+        event.currentTarget.setPointerCapture(event.pointerId);
+      } catch {
+      }
+      const rect = event.currentTarget.getBoundingClientRect();
+      drag.current = {
+        start: { x: event.clientX, y: event.clientY },
+        grab: {
+          x: event.clientX - rect.left - ICON_CENTRE_PX * (rect.height / 28),
+          y: event.clientY - rect.top - rect.height / 2
+        },
+        moved: false
+      };
+    },
+    onPointerMove: (event) => {
+      const current = drag.current;
+      if (!current || !onDrag) return;
+      if (!current.moved && Math.hypot(
+        event.clientX - current.start.x,
+        event.clientY - current.start.y
+      ) < DRAG_THRESHOLD_PX2)
+        return;
+      current.moved = true;
+      onDrag(pointOf(event, current.grab), "move");
+    },
+    onPointerUp: (event) => {
+      const current = drag.current;
+      drag.current = null;
+      if (!current) return;
+      if (current.moved) onDrag?.(pointOf(event, current.grab), "end");
+      else onClick();
+    },
+    onPointerCancel: () => drag.current = null
+  };
+}
 function Marker({
   spot,
   open,
@@ -4802,67 +5052,22 @@ function Marker({
   onClick,
   onDrag
 }) {
-  const drag = useRef7(null);
-  const pointOf = (event) => ({
-    x: event.clientX - drag.current.grab.x,
-    y: event.clientY - drag.current.grab.y
-  });
+  const handlers = useMarkerDrag(onClick, onDrag);
   const sorted = [...spot.hotspots].sort(bySeverity);
   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;
+  const label = count > 1 || spot.inside ? `${count} hotspot${count === 1 ? "" : "s"}` : sorted[0].title;
   return /* @__PURE__ */ jsxs6(
     "button",
     {
       type: "button",
       "aria-expanded": open,
+      "aria-label": label,
       title: sorted.map(
         (hotspot) => `${SEVERITIES[hotspot.severity].label}: ${hotspot.title}`
       ).join("\n"),
-      onKeyDown: (event) => (event.key === "Enter" || event.key === " ") && onClick(),
-      onPointerDown: (event) => {
-        if (event.button !== 0) return;
-        try {
-          event.currentTarget.setPointerCapture(event.pointerId);
-        } catch {
-        }
-        const rect = event.currentTarget.getBoundingClientRect();
-        drag.current = {
-          start: { x: event.clientX, y: event.clientY },
-          grab: {
-            x: event.clientX - rect.left - ICON_CENTRE_PX * (rect.height / 28),
-            y: event.clientY - rect.top - rect.height / 2
-          },
-          moved: false
-        };
-      },
-      onPointerMove: (event) => {
-        const current = drag.current;
-        if (!current || !onDrag) return;
-        if (!current.moved && Math.hypot(
-          event.clientX - current.start.x,
-          event.clientY - current.start.y
-        ) < DRAG_THRESHOLD_PX2)
-          return;
-        current.moved = true;
-        onDrag(pointOf(event), "move");
-      },
-      onPointerUp: (event) => {
-        const current = drag.current;
-        drag.current = null;
-        if (!current) return;
-        if (current.moved)
-          onDrag?.(
-            {
-              x: event.clientX - current.grab.x,
-              y: event.clientY - current.grab.y
-            },
-            "end"
-          );
-        else onClick();
-      },
-      onPointerCancel: () => drag.current = null,
-      className: `studio-hotspot-marker flex h-7 max-w-[240px] items-center gap-1.5 rounded-full pl-1 pr-2.5 text-[11px] font-semibold text-white ${onDrag ? "cursor-grab active:cursor-grabbing" : ""}`,
+      ...handlers,
+      className: `studio-hotspot-marker relative flex h-7 w-7 items-center justify-center rounded-full text-white ${onDrag ? "cursor-grab active:cursor-grabbing" : ""}`,
       style: {
         background: SEVERITIES[severity].color,
         touchAction: "none",
@@ -4872,18 +5077,37 @@ function Marker({
       },
       children: [
         /* @__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 })
+        count > 1 && /* @__PURE__ */ jsx9(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "absolute -right-1.5 -top-1.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-[rgb(var(--ec-card-bg))] px-1 text-[10px] font-bold leading-none shadow-sm",
+            style: { color: SEVERITIES[severity].color },
+            children: count
+          }
+        )
       ]
     }
   );
 }
-var panelClass2 = "studio-hotspot-panel absolute left-0 top-[34px] w-80 rounded-xl border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg))] text-[rgb(var(--ec-page-text))] shadow-xl";
+var panelClass2 = "studio-hotspot-panel absolute left-[40px] top-[-8px] w-80 rounded-xl border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg))] text-[rgb(var(--ec-page-text))] shadow-xl";
+var PanelArrow = ({ tint }) => /* @__PURE__ */ jsx9(
+  "span",
+  {
+    "aria-hidden": true,
+    className: "absolute left-[-6.5px] top-[16px] h-3 w-3 rotate-45 rounded-bl-[2px] border-b border-l border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg))]",
+    style: tint ? {
+      background: `linear-gradient(${tint}14, ${tint}14), rgb(var(--ec-card-bg))`
+    } : void 0
+  }
+);
 var inputClass = "block w-full rounded-md border border-[rgb(var(--ec-input-border))] bg-[rgb(var(--ec-input-bg))] px-2.5 py-1.5 text-sm text-[rgb(var(--ec-input-text))] outline-none focus:border-[rgb(var(--ec-accent))]";
 function HotspotForm({
   initial,
   submitLabel,
   onSubmit,
-  onCancel
+  onCancel,
+  onSeverityChange
 }) {
   const [severity, setSeverity] = useState9(
     initial?.severity ?? "warning"
@@ -4919,7 +5143,10 @@ function HotspotForm({
               type: "button",
               role: "radio",
               "aria-checked": picked,
-              onClick: () => setSeverity(value),
+              onClick: () => {
+                setSeverity(value);
+                onSeverityChange?.(value);
+              },
               className: "flex flex-1 items-center justify-center gap-1 rounded-md border px-2 py-1.5 text-xs font-semibold transition-colors",
               style: picked ? {
                 background: SEVERITIES[value].color,
@@ -4953,14 +5180,14 @@ function HotspotForm({
           {
             value: description,
             maxLength: 1e3,
-            rows: 3,
+            rows: 5,
             onChange: (event) => setDescription(event.target.value),
             onKeyDown: (event) => {
               if (event.key === "Enter" && (event.metaKey || event.ctrlKey))
                 submit();
             },
             placeholder: "Why it matters, and what to do about it (optional)",
-            className: `${inputClass} resize-none`
+            className: `${inputClass} min-h-20 max-h-[60vh] resize-y`
           }
         ),
         /* @__PURE__ */ jsxs6("div", { className: "flex justify-end gap-2", children: [
@@ -4978,7 +5205,7 @@ function HotspotForm({
             {
               type: "submit",
               disabled: !title.trim(),
-              className: "rounded-md bg-[rgb(var(--ec-primary-bg))] px-3 py-1.5 text-xs font-semibold text-[rgb(var(--ec-primary-text))] disabled:opacity-40",
+              className: "rounded-md bg-[rgb(var(--ec-button-bg))] px-3 py-1.5 text-xs font-semibold text-[rgb(var(--ec-button-text))] disabled:opacity-40",
               children: submitLabel
             }
           )
@@ -4987,41 +5214,28 @@ function HotspotForm({
     }
   );
 }
-function SeverityTag({ severity }) {
-  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__ */ jsx9(SeverityIcon, { severity, size: 10 }),
-        SEVERITIES[severity].label
-      ]
-    }
-  );
+function HotspotItem({ hotspot }) {
+  return /* @__PURE__ */ jsxs6("div", { children: [
+    /* @__PURE__ */ jsx9("p", { className: "text-[15px] font-semibold leading-snug text-[rgb(var(--ec-page-text))]", children: hotspot.title }),
+    hotspot.description && /* @__PURE__ */ jsx9("p", { className: "mt-1.5 whitespace-pre-wrap text-[13px] leading-relaxed text-[rgb(var(--ec-page-text-muted))]", children: hotspot.description })
+  ] });
 }
-function HotspotItem({
+function Flagged({
   hotspot,
-  actions
+  className = ""
 }) {
   return /* @__PURE__ */ jsxs6(
     "div",
     {
-      className: "border-l-[3px] pl-2.5",
-      style: { borderColor: SEVERITIES[hotspot.severity].color },
+      className: `flex items-center gap-1.5 text-[11px] text-[rgb(var(--ec-page-text-muted))] ${className}`,
       children: [
-        /* @__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__ */ jsx9("span", { className: "ml-auto flex flex-none items-center gap-0.5", children: actions })
-        ] }),
-        /* @__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 })
+        hotspot.author.agent && /* @__PURE__ */ jsx9(AgentMark, { name: hotspot.author.name, size: 12 }),
+        /* @__PURE__ */ jsxs6("span", { className: "min-w-0 truncate", children: [
+          "Flagged by ",
+          hotspot.author.name,
+          " \xB7 ",
+          timeAgo(hotspot.createdAt)
+        ] })
       ]
     }
   );
@@ -5043,6 +5257,32 @@ function IconButton2({
     }
   );
 }
+function SeverityHeader({
+  severity,
+  actions,
+  className = ""
+}) {
+  const { label, color } = SEVERITIES[severity];
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: `flex items-center gap-2 border-b px-3 py-2.5 ${className}`,
+      style: { background: `${color}14`, borderColor: `${color}33` },
+      children: [
+        /* @__PURE__ */ jsx9(
+          "span",
+          {
+            className: "flex h-6 w-6 flex-none items-center justify-center rounded-full text-white",
+            style: { background: color },
+            children: /* @__PURE__ */ jsx9(SeverityIcon, { severity, size: 13 })
+          }
+        ),
+        /* @__PURE__ */ jsx9("span", { className: "text-xs font-semibold", style: { color }, children: label }),
+        actions && /* @__PURE__ */ jsx9("span", { className: "ml-auto flex items-center gap-0.5", children: actions })
+      ]
+    }
+  );
+}
 function SpotPanel({
   spot,
   locked,
@@ -5051,64 +5291,108 @@ function SpotPanel({
   onDelete,
   onGo
 }) {
-  const [editing, setEditing] = useState9(null);
+  const [editing, setEditingId] = useState9(null);
+  const [picked, setPicked] = useState9(null);
+  const setEditing = (id) => {
+    setEditingId(id);
+    setPicked(null);
+  };
   const sorted = [...spot.hotspots].sort(bySeverity);
-  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__ */ 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,
-          submitLabel: "Save",
-          onCancel: () => setEditing(null),
-          onSubmit: (fields) => {
-            onUpdate(hotspot.id, fields);
-            setEditing(null);
-          }
+  const single = sorted.length === 1 && !spot.inside;
+  const close = /* @__PURE__ */ jsx9(IconButton2, { label: "Close", onClick: onClose, children: /* @__PURE__ */ jsx9(X3, { size: 14 }) });
+  const severityOf = (hotspot) => editing === hotspot.id && picked || hotspot.severity;
+  const section = (hotspot, first) => {
+    const changing = editing === hotspot.id;
+    const actions = /* @__PURE__ */ jsxs6(Fragment6, { children: [
+      !locked && !spot.inside && !changing && /* @__PURE__ */ jsxs6(Fragment6, { children: [
+        /* @__PURE__ */ jsx9(IconButton2, { label: "Edit", onClick: () => setEditing(hotspot.id), children: /* @__PURE__ */ jsx9(Pencil2, { size: 13 }) }),
+        /* @__PURE__ */ jsx9(IconButton2, { label: "Remove", onClick: () => onDelete(hotspot.id), children: /* @__PURE__ */ jsx9(Trash23, { size: 13 }) })
+      ] }),
+      single && close
+    ] });
+    const body = changing ? /* @__PURE__ */ jsx9(
+      HotspotForm,
+      {
+        initial: hotspot,
+        submitLabel: "Save",
+        onSeverityChange: setPicked,
+        onCancel: () => setEditing(null),
+        onSubmit: (fields) => {
+          onUpdate(hotspot.id, fields);
+          setEditing(null);
         }
-      ) }, hotspot.id) : spot.inside ? (
-        // Inside a node on L1 or L2: goes to it on L3, where it is
-        /* @__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__ */ jsx9(HotspotItem, { hotspot })
-          },
-          hotspot.id
-        )
-      ) : /* @__PURE__ */ jsx9(
-        HotspotItem,
+      }
+    ) : /* @__PURE__ */ jsxs6(Fragment6, { children: [
+      /* @__PURE__ */ jsx9("div", { className: "px-4 pb-3.5 pt-3", children: /* @__PURE__ */ jsx9(HotspotItem, { hotspot }) }),
+      /* @__PURE__ */ jsx9(
+        Flagged,
         {
           hotspot,
-          actions: !locked && /* @__PURE__ */ jsxs6(Fragment6, { children: [
-            /* @__PURE__ */ jsx9(
-              IconButton2,
-              {
-                label: "Edit",
-                onClick: () => setEditing(hotspot.id),
-                children: /* @__PURE__ */ jsx9(Pencil2, { size: 13 })
-              }
-            ),
-            /* @__PURE__ */ jsx9(
-              IconButton2,
-              {
-                label: "Remove",
-                onClick: () => onDelete(hotspot.id),
-                children: /* @__PURE__ */ jsx9(Trash23, { size: 13 })
-              }
-            )
-          ] })
-        },
-        hotspot.id
+          className: "border-t border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.02)] px-4 py-2.5"
+        }
       )
-    ) }),
-    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." })
+    ] });
+    return /* @__PURE__ */ jsx9(
+      HotspotSection,
+      {
+        header: /* @__PURE__ */ jsx9(
+          SeverityHeader,
+          {
+            severity: severityOf(hotspot),
+            actions,
+            className: single && first ? "rounded-t-[11px]" : ""
+          }
+        ),
+        onGo: spot.inside ? () => onGo(hotspot) : void 0,
+        children: body
+      },
+      hotspot.id
+    );
+  };
+  return /* @__PURE__ */ jsxs6("div", { className: panelClass2, children: [
+    /* @__PURE__ */ jsx9(
+      PanelArrow,
+      {
+        tint: single ? SEVERITIES[severityOf(sorted[0])].color : void 0
+      }
+    ),
+    !single && /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between border-b border-[rgb(var(--ec-page-border))] px-3 py-2.5", children: [
+      /* @__PURE__ */ jsxs6("span", { className: "text-xs font-semibold", children: [
+        sorted.length,
+        " hotspot",
+        sorted.length === 1 ? "" : "s"
+      ] }),
+      close
+    ] }),
+    /* @__PURE__ */ jsx9(
+      "div",
+      {
+        className: `max-h-[min(70vh,640px)] divide-y divide-[rgb(var(--ec-page-border))] overflow-y-auto ${spot.inside ? "" : "rounded-b-[11px]"} ${single ? "rounded-t-[11px]" : ""}`,
+        children: sorted.map((hotspot, index) => section(hotspot, index === 0))
+      }
+    ),
+    spot.inside && /* @__PURE__ */ jsx9("p", { className: "rounded-b-[11px] border-t border-[rgb(var(--ec-page-border))] px-4 py-2 text-[11px] text-[rgb(var(--ec-page-text-muted))]", children: "Inside this: click one to go to it." })
+  ] });
+}
+function HotspotSection({
+  header,
+  onGo,
+  children
+}) {
+  return onGo ? /* @__PURE__ */ jsxs6(
+    "button",
+    {
+      type: "button",
+      onClick: onGo,
+      className: "block w-full text-left transition-colors hover:bg-[rgb(var(--ec-accent)/0.06)]",
+      children: [
+        header,
+        children
+      ]
+    }
+  ) : /* @__PURE__ */ jsxs6("div", { children: [
+    header,
+    children
   ] });
 }
 var HotspotLayer = memo6(function HotspotLayer2({
@@ -5126,11 +5410,13 @@ var HotspotLayer = memo6(function HotspotLayer2({
   onUpdate,
   onDelete,
   onGo,
+  onMoveDraft,
   live
 }) {
   const layer = useRef7(null);
   useMarkerScale(layer);
   const { screenToFlowPosition } = useReactFlow4();
+  const store = useStoreApi4();
   const [moving, setMoving] = useState9(null);
   const remote = useRemoteMoves(live, "hotspot");
   const remoteAt = (spot) => {
@@ -5162,6 +5448,50 @@ var HotspotLayer = memo6(function HotspotLayer2({
     );
     sendMove(live, "hotspot", spot.hotspots[0].id, null);
   } : void 0;
+  const [draftSeverity, setDraftSeverity] = useState9("warning");
+  useEffect8(() => {
+    if (!draft) setDraftSeverity("warning");
+  }, [draft]);
+  const [draftMoving, setDraftMoving] = useState9(null);
+  const draftDrag = onMoveDraft && !locked ? (point, phase) => {
+    const position = screenToFlowPosition(point);
+    const over = nodeUnder(point);
+    if (phase === "move") {
+      if (over !== draftMoving?.over)
+        onDropTarget(
+          over ? { nodeId: over, severity: draftSeverity } : null
+        );
+      return setDraftMoving({ position, over });
+    }
+    setDraftMoving(null);
+    onDropTarget(null);
+    onMoveDraft(over ? { nodeId: over, position } : { position });
+  } : void 0;
+  const openSpot = useRef7(void 0);
+  openSpot.current = spots.find((spot) => spot.key === openKey);
+  const deleteOpen = useRef7(onDelete);
+  deleteOpen.current = onDelete;
+  const closeOpen = useRef7(onOpen);
+  closeOpen.current = onOpen;
+  useEffect8(() => {
+    if (!openKey || locked) return;
+    const onKey = (event) => {
+      if (event.key !== "Delete" && event.key !== "Backspace") return;
+      const target = event.target instanceof Element ? event.target : null;
+      if (target?.closest("input, textarea, select, [contenteditable]")) return;
+      const spot = openSpot.current;
+      if (!spot || spot.inside) return;
+      const { nodes, edges } = store.getState();
+      if (nodes.some((node) => node.selected) || edges.some((edge) => edge.selected))
+        return;
+      event.preventDefault();
+      event.stopPropagation();
+      spot.hotspots.forEach((hotspot) => deleteOpen.current(hotspot.id));
+      closeOpen.current(null);
+    };
+    window.addEventListener("keydown", onKey, true);
+    return () => window.removeEventListener("keydown", onKey, true);
+  }, [openKey, locked, store]);
   return /* @__PURE__ */ jsx9(CanvasPortal, { children: /* @__PURE__ */ jsxs6(
     "div",
     {
@@ -5186,11 +5516,14 @@ var HotspotLayer = memo6(function HotspotLayer2({
                     spot,
                     open,
                     selected: !!selectedIds && spot.hotspots.some((hotspot) => selectedIds.has(hotspot.id)),
-                    onClick: () => onOpen(open ? null : spot.key),
+                    onClick: () => {
+                      if (!open) store.getState().unselectNodesAndEdges();
+                      onOpen(open ? null : spot.key);
+                    },
                     onDrag: dragHandler(spot)
                   }
                 ),
-                open && !dragged && /* @__PURE__ */ jsx9(
+                open && (!dragged || moving?.key === spot.key) && /* @__PURE__ */ jsx9(
                   SpotPanel,
                   {
                     spot,
@@ -5209,26 +5542,23 @@ var HotspotLayer = memo6(function HotspotLayer2({
         draft && /* @__PURE__ */ jsxs6(
           SpotAt,
           {
-            nodeId: draft.nodeId,
-            position: draft.nodeId ? void 0 : draft.position,
+            nodeId: draftMoving ? void 0 : draft.nodeId,
+            position: draftMoving ? draftMoving.position : draft.nodeId ? void 0 : draft.position,
             zIndex: 4,
             children: [
-              /* @__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__ */ jsx9(SeverityIcon, { severity: "warning" })
-                }
-              ),
-              /* @__PURE__ */ jsx9("div", { className: panelClass2, children: /* @__PURE__ */ jsx9(
-                HotspotForm,
-                {
-                  submitLabel: "Add hotspot",
-                  onSubmit: onCreate,
-                  onCancel: onCancelDraft
-                }
-              ) })
+              /* @__PURE__ */ jsx9(DraftMarker, { severity: draftSeverity, onDrag: draftDrag }),
+              /* @__PURE__ */ jsxs6("div", { className: panelClass2, children: [
+                /* @__PURE__ */ jsx9(PanelArrow, {}),
+                /* @__PURE__ */ jsx9(
+                  HotspotForm,
+                  {
+                    onSeverityChange: setDraftSeverity,
+                    submitLabel: "Add hotspot",
+                    onSubmit: onCreate,
+                    onCancel: onCancelDraft
+                  }
+                )
+              ] })
             ]
           }
         )
@@ -5236,33 +5566,101 @@ var HotspotLayer = memo6(function HotspotLayer2({
     }
   ) });
 });
+function DraftMarker({
+  severity,
+  onDrag
+}) {
+  const handlers = useMarkerDrag(() => {
+  }, onDrag);
+  return /* @__PURE__ */ jsx9(
+    "span",
+    {
+      ...handlers,
+      title: onDrag ? "Drag to move it" : void 0,
+      className: `studio-hotspot-marker flex h-7 w-7 items-center justify-center rounded-full text-white ${onDrag ? "cursor-grab active:cursor-grabbing" : ""}`,
+      style: { background: SEVERITIES[severity].color, touchAction: "none" },
+      children: /* @__PURE__ */ jsx9(SeverityIcon, { severity })
+    }
+  );
+}
 function HotspotList({
   hotspots,
   nameOf,
-  onOpen
+  onOpen,
+  goOnHover = true
 }) {
   const sorted = [...hotspots].sort(bySeverity);
   if (!sorted.length)
     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__ */ 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__ */ jsx9(HotspotItem, { hotspot }),
-          on && /* @__PURE__ */ jsxs6("p", { className: "mt-1.5 pl-[13px] text-[11px] text-[rgb(var(--ec-page-text-muted))]", children: [
+  return /* @__PURE__ */ jsx9("ul", { className: "divide-y divide-[rgb(var(--ec-page-border))]", children: sorted.map((hotspot) => /* @__PURE__ */ jsx9(
+    HotspotRow,
+    {
+      hotspot,
+      on: hotspot.nodeId && nameOf(hotspot.nodeId),
+      onOpen,
+      goOnHover
+    },
+    hotspot.id
+  )) });
+}
+var GO_ON_HOVER_MS = 250;
+function HotspotRow({
+  hotspot,
+  on,
+  onOpen,
+  goOnHover
+}) {
+  const hover = useRef7(null);
+  const cancel = () => {
+    if (hover.current !== null) clearTimeout(hover.current);
+    hover.current = null;
+  };
+  useEffect8(() => cancel, []);
+  const { label, color, icon: Icon } = SEVERITIES[hotspot.severity];
+  return /* @__PURE__ */ jsx9("li", { children: /* @__PURE__ */ jsxs6(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        cancel();
+        onOpen(hotspot);
+      },
+      onMouseEnter: () => {
+        cancel();
+        if (goOnHover)
+          hover.current = setTimeout(() => onOpen(hotspot), GO_ON_HOVER_MS);
+      },
+      onMouseLeave: cancel,
+      title: "Show me on the canvas",
+      className: "flex w-full cursor-pointer items-center gap-2.5 px-3 py-2 text-left text-xs text-[rgb(var(--ec-page-text))] transition-colors hover:bg-[rgb(var(--ec-accent)/0.06)]",
+      children: [
+        /* @__PURE__ */ jsx9(
+          Icon,
+          {
+            size: 14,
+            className: "flex-none",
+            style: { color },
+            "aria-label": label
+          }
+        ),
+        /* @__PURE__ */ jsxs6("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx9("span", { className: "block", children: hotspot.title }),
+          on && /* @__PURE__ */ jsxs6("span", { className: "mt-0.5 block truncate text-[11px] text-[rgb(var(--ec-page-text-muted))]", children: [
             "On ",
             on
           ] })
-        ]
-      },
-      hotspot.id
-    );
-  }) });
+        ] }),
+        /* @__PURE__ */ jsx9(
+          LocateFixed,
+          {
+            size: 12,
+            className: "flex-none text-[rgb(var(--ec-icon-color))]",
+            "aria-hidden": true
+          }
+        )
+      ]
+    }
+  ) });
 }
 
 // src/studio/components/CanvasControls.tsx
@@ -5572,7 +5970,7 @@ var ViewControls = memo7(function ViewControls2({
 });
 
 // src/studio/components/ContainerChooser.tsx
-import { useEffect as useEffect8, useState as useState10 } from "react";
+import { useEffect as useEffect9, 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"}`;
@@ -5728,7 +6126,7 @@ function ContainerChooser({
     contents.systems > 0 && plural(contents.systems, "system"),
     contents.services > 0 && plural(contents.services, "service")
   ].filter(Boolean).join(" and ") : "";
-  useEffect8(() => {
+  useEffect9(() => {
     const onKeyDown = (event) => event.key === "Escape" && onCancel();
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
@@ -5853,9 +6251,11 @@ var EditButton_default = memo8(function EditButton({
 import {
   memo as memo9,
   useCallback as useCallback5,
-  useEffect as useEffect9,
+  useEffect as useEffect10,
+  useLayoutEffect as useLayoutEffect4,
   useRef as useRef8,
-  useState as useState11
+  useState as useState11,
+  useSyncExternalStore
 } from "react";
 import { ChevronDown, GripVertical as GripVertical2 } from "lucide-react";
 import { Fragment as Fragment9, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
@@ -5891,6 +6291,21 @@ var readCollapsed = () => {
     return false;
   }
 };
+var shownCollapsed = false;
+var collapsedListeners = /* @__PURE__ */ new Set();
+var showCollapsed = (collapsed) => {
+  if (collapsed === shownCollapsed) return;
+  shownCollapsed = collapsed;
+  collapsedListeners.forEach((listener) => listener());
+};
+var usePaletteCollapsed = () => useSyncExternalStore(
+  (listener) => {
+    collapsedListeners.add(listener);
+    return () => collapsedListeners.delete(listener);
+  },
+  () => shownCollapsed,
+  () => false
+);
 function PaletteItem({
   icon: Icon,
   iconClassName,
@@ -5949,7 +6364,7 @@ function PaletteSection({
   );
 }
 var COMPONENTS_TAB = "components";
-var Palette = memo9(function Palette2({
+var Palette2 = memo9(function Palette3({
   level,
   onAddComponent,
   footer,
@@ -5969,6 +6384,8 @@ var Palette = memo9(function Palette2({
     } catch {
     }
   };
+  useLayoutEffect4(() => showCollapsed(collapsed), [collapsed]);
+  useLayoutEffect4(() => () => showCollapsed(false), []);
   const toggle = useCallback5(() => {
     setCollapsed((current) => {
       remember(!current);
@@ -5986,7 +6403,7 @@ var Palette = memo9(function Palette2({
     }
   };
   const chosen = useRef8(tab);
-  useEffect9(() => {
+  useEffect10(() => {
     if (tab === chosen.current) return;
     chosen.current = tab;
     if (tab === void 0 || !collapsed) return;
@@ -6187,7 +6604,7 @@ function ShortcutsList({ omit = [] }) {
 }
 
 // src/studio/components/EmptyCanvas.tsx
-import { useEffect as useEffect10, useState as useState12 } from "react";
+import { useEffect as useEffect11, useState as useState12 } from "react";
 import { CircleHelp, FolderOpen, Plug } from "lucide-react";
 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)]";
@@ -6199,8 +6616,16 @@ var arrow = {
   strokeLinejoin: "round"
 };
 function Hints({ palette, live }) {
+  const paletteCollapsed = usePaletteCollapsed();
   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: [
+    palette && paletteCollapsed && /* @__PURE__ */ jsxs12("div", { className: "absolute left-[284px] top-[75px] 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 30 C 45 34, 22 28, 6 12" }),
+        /* @__PURE__ */ jsx15("path", { d: "M6 12 L15.7 14.6 M6 12 L8.6 21.7" })
+      ] }),
+      /* @__PURE__ */ jsx15("p", { className: "mt-4 max-w-[160px]", children: "Drag resources onto the canvas, then connect them" })
+    ] }),
+    palette && !paletteCollapsed && /* @__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" })
@@ -6245,7 +6670,7 @@ function EmptyCanvas({
 }) {
   const [dragging, setDragging] = useState12(false);
   const [dropped, setDropped] = useState12(false);
-  useEffect10(() => {
+  useEffect11(() => {
     const start = () => setDragging(true);
     const end = () => setDragging(false);
     const drop = () => {
@@ -6306,7 +6731,7 @@ function EmptyCanvas({
 }
 
 // src/studio/components/RemeasureHandles.tsx
-import { memo as memo10, useEffect as useEffect11 } from "react";
+import { memo as memo10, useEffect as useEffect12 } from "react";
 import {
   useStore as useStore2,
   useUpdateNodeInternals as useUpdateNodeInternals2
@@ -6315,7 +6740,7 @@ var selectDomNode = (state) => state.domNode;
 var RemeasureHandles = memo10(function RemeasureHandles2() {
   const domNode = useStore2(selectDomNode);
   const updateNodeInternals = useUpdateNodeInternals2();
-  useEffect11(() => {
+  useEffect12(() => {
     if (!domNode) return;
     const pending = /* @__PURE__ */ new Set();
     let frame = 0;
@@ -6398,9 +6823,10 @@ export {
   MESSAGE_COLLECTIONS,
   NODE_CATEGORIES,
   NODE_ICONS,
+  NOTE_COLORS,
   NodeCard,
   OpenAILogo,
-  Palette,
+  Palette2 as Palette,
   PaletteItem,
   PaletteSection,
   Picture,
@@ -6534,6 +6960,7 @@ export {
   shortId,
   sizeOf,
   sortByHierarchy,
+  startWriting,
   timeAgo,
   toDiagramFile,
   toRelativePosition,
@@ -6546,6 +6973,7 @@ export {
   useCounterScale,
   useDragGhost,
   useNodeAnchor,
+  usePaletteCollapsed,
   useRemoteMoves,
   useSavedFlash,
   withDescendants,