feat: instance-specific hotspots and connections (additive)

mcp-server/src/tools/hotspot-tools.js

@@ -23,7 +23,7 @@ const accessibilitySchema = {
 export const hotspotTools = [
   {
     name: "create_hotspot",
-    description: "Add a hotspot (tap area) to a screen. Coordinates are percentages (0-100) of the screen image dimensions. If action is 'navigate' or 'modal' and targetScreenId is provided, a connection is automatically created.",
+    description: "Add a hotspot (tap area) to a screen. Coordinates are percentages (0-100) of the screen image dimensions. If action is 'navigate' or 'modal' and targetScreenId is provided, a connection is automatically created. Hotspots on a canonical component apply to every placement; hotspots on an instance are placement-specific additive interactions that do not modify or hide the canonical's hotspots.",
     inputSchema: {
       type: "object",
       properties: {
@@ -120,7 +120,7 @@ export const hotspotTools = [
   },
   {
     name: "list_hotspots",
-    description: "List all hotspots on a specific screen.",
+    description: "List all hotspots on a specific screen. On a canonical component, this returns the hotspots that apply to every placement. On an instance, this returns only the placement-specific (additive) hotspots — to see the canonical's hotspots, call this against the canonical screen.",
     inputSchema: {
       type: "object",
       properties: {

src/components/CanvasArea.jsx

@@ -3,7 +3,7 @@ import { DEFAULT_SCREEN_WIDTH, DEFAULT_SCREEN_HEIGHT } from "../constants";
 import { copyScreenForFigma, copyScreensForFigma, copyScreensForFigmaEditable, downloadScreenSvg } from "../utils/copyToFigma";
 import { copyScreensAsImage } from "../utils/copyAsImage";
 import { ScreenNode } from "./ScreenNode";
-import { resolveInstanceVisuals, isResolvedInstance } from "../utils/resolveInstanceVisuals";
+import { resolveInstanceVisuals } from "../utils/resolveInstanceVisuals";
 import { ConnectionLines } from "./ConnectionLines";
 import { ConditionalPrompt } from "./ConditionalPrompt";
 import { ConnectionTypePrompt } from "./ConnectionTypePrompt";
@@ -163,12 +163,10 @@ export function CanvasArea({
         ))}
         {screens.map((screen) => {
           const visualScreen = resolveInstanceVisuals(screen, screens);
-          const instanceVisual = isResolvedInstance(screen) && visualScreen !== screen;
           return (
           <ScreenNode
             key={screen.id}
             screen={visualScreen}
-            isInstanceVisual={instanceVisual}
             selected={selectedScreen === screen.id}
             onSelect={(id) => { clearSelection(); setSelectedScreen(id); setSelectedStickyNote(null); }}
             onDragStart={onDragStart}

src/components/ScreenNode.jsx

@@ -21,10 +21,6 @@ export function ScreenNode({
   selectedCommentId,
   onCommentPinClick,
   onDeselectComment,
-  // True when this is an instance whose image/hotspots are inherited from
-  // its canonical at render time. Hotspot edits are read-only here — users
-  // must edit the canonical instead.
-  isInstanceVisual,
 }) {
   const [imgLoaded, setImgLoaded] = useState(false);
   const [isEditingDesc, setIsEditingDesc] = useState(false);
@@ -370,7 +366,7 @@ export function ScreenNode({
           >
             S+
           </button>
-          {!isInstanceVisual && <button
+          <button
             className="screen-btn"
             onClick={(e) => { e.stopPropagation(); onAddHotspot(screen.id); }}
             title="Add tap area / button link"
@@ -386,7 +382,7 @@ export function ScreenNode({
             }}
           >
             + Link
-          </button>}
+          </button>
           <button
             className="screen-btn"
             onClick={(e) => { e.stopPropagation(); onRemoveScreen(screen.id); }}
@@ -434,7 +430,7 @@ export function ScreenNode({
             }
           }
           onSelect(screen.id);
-          if (screen.imageData && !isInstanceVisual && onImageAreaMouseDown) {
+          if (screen.imageData && onImageAreaMouseDown) {
             onImageAreaMouseDown(e, screen.id);
           }
         }}
@@ -463,12 +459,10 @@ export function ScreenNode({
                   className="hotspot-area"
                   onMouseDown={(e) => {
                     e.stopPropagation();
-                    if (isInstanceVisual) return;
                     if (onHotspotMouseDown) onHotspotMouseDown(e, screen.id, hs.id);
                   }}
                   onDoubleClick={(e) => {
                     e.stopPropagation();
-                    if (isInstanceVisual) return;
                     if (onHotspotDoubleClick) onHotspotDoubleClick(e, screen.id, hs.id);
                   }}
                   style={{
@@ -505,7 +499,7 @@ export function ScreenNode({
                 >
                   {hs.label || "TAP"}
                   {/* Drag handle for hotspot-to-screen connect */}
-                  {isSelected && !isInstanceVisual && (
+                  {isSelected && (
                     <div
                       className="hotspot-drag-handle"
                       onMouseDown={(e) => {
@@ -532,7 +526,7 @@ export function ScreenNode({
                     />
                   )}
                   {/* Resize handles */}
-                  {isSelected && !isInstanceVisual && ["nw","n","ne","e","se","s","sw","w"].map((handle) => {
+                  {isSelected && ["nw","n","ne","e","se","s","sw","w"].map((handle) => {
                     const pos = {
                       nw: { left: -4, top: -4, cursor: "nwse-resize" },
                       n:  { left: "50%", top: -4, cursor: "ns-resize", transform: "translateX(-50%)" },