Add device dock search, IDs drag-to-assign tab, and label drop-target highlight

- Add search filter to Devices tab in right dock
- Add IDs tab: flat list of unassigned device IDs, drag onto placed symbol to assign label
- Highlight drop target symbol with cyan glow during label drag
- Add labelDropTarget state and dropTarget theme entry

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

svelte-app/src/components/DeviceDock.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { layout } from '$lib/stores/layout.svelte.js';
   import { SYMBOLS } from '$lib/symbols.js';
-  import { startPaletteDrag } from '$lib/canvas/interactions.js';
+  import { startPaletteDrag, startLabelDrag } from '$lib/canvas/interactions.js';
 
   interface DeviceEntry {
     id: string;
@@ -12,6 +12,8 @@
   let allDevices = $state<Record<string, DeviceEntry[]>>({});
   let collapsed = $state(false);
   let collapsedZones = $state<Set<string>>(new Set());
+  let activeTab = $state<'devices' | 'ids'>('devices');
+  let searchQuery = $state('');
 
   // Load manifest
   async function loadManifest() {
@@ -29,10 +31,17 @@
     return list.filter(d => !placedLabels.has(d.id));
   });
 
+  // Apply search filter
+  let filteredDevices = $derived.by(() => {
+    if (!searchQuery.trim()) return mcmDevices;
+    const q = searchQuery.trim().toLowerCase();
+    return mcmDevices.filter(d => d.id.toLowerCase().includes(q) || d.svg.toLowerCase().includes(q));
+  });
+
   // Group by SVG type
   let svgGroups = $derived.by(() => {
     const map = new Map<string, DeviceEntry[]>();
-    for (const d of mcmDevices) {
+    for (const d of filteredDevices) {
       const name = SYMBOLS.find(s => s.id === d.svg)?.name || d.svg;
       if (!map.has(name)) map.set(name, []);
       map.get(name)!.push(d);
@@ -62,6 +71,26 @@
     return SYMBOLS.find(s => s.id === svgId)?.file || '';
   }
 
+  // --- IDs tab ---
+  let idSearchQuery = $state('');
+
+  // Unassigned device IDs: all MCM device IDs minus already-used labels
+  let unassignedIds = $derived.by(() => {
+    const list = allDevices[layout.currentMcm] || [];
+    const placedLabels = new Set(layout.symbols.map(s => s.label).filter(Boolean));
+    let ids = list.filter(d => !placedLabels.has(d.id));
+    if (idSearchQuery.trim()) {
+      const q = idSearchQuery.trim().toLowerCase();
+      ids = ids.filter(d => d.id.toLowerCase().includes(q));
+    }
+    return ids;
+  });
+
+  function onLabelMousedown(e: MouseEvent, deviceId: string) {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    startLabelDrag(e, deviceId);
+  }
 </script>
 
 <div class="device-dock" class:collapsed>
@@ -71,13 +100,37 @@
 
   {#if !collapsed}
     <div class="dock-content">
-      <div class="dock-header">
+      <!-- Tabs -->
-        Devices
+      <div class="tabs">
-        <span class="dock-count">{totalAll - totalCount}/{totalAll}</span>
+        <button
+          class="tab" class:active={activeTab === 'devices'}
+          onclick={() => activeTab = 'devices'}
+        >Devices</button>
+        <button
+          class="tab" class:active={activeTab === 'ids'}
+          onclick={() => activeTab = 'ids'}
+        >IDs</button>
       </div>
 
-      {#if totalCount === 0}
+      <!-- ============ DEVICES TAB ============ -->
-        <div class="dock-empty">All placed</div>
+      {#if activeTab === 'devices'}
+        <div class="dock-header">
+          <span class="dock-count">{totalAll - totalCount}/{totalAll} placed</span>
+        </div>
+
+        <div class="search-box">
+          <input
+            type="text"
+            placeholder="Search devices..."
+            bind:value={searchQuery}
+          />
+          {#if searchQuery}
+            <button class="clear-search" onclick={() => searchQuery = ''}>x</button>
+          {/if}
+        </div>
+
+        {#if filteredDevices.length === 0}
+          <div class="dock-empty">{searchQuery ? 'No matches' : 'All placed'}</div>
         {/if}
 
         <div class="dock-list">
@@ -107,6 +160,42 @@
             {/if}
           {/each}
         </div>
+
+      <!-- ============ IDS TAB ============ -->
+      {:else}
+        <div class="dock-header">
+          <span class="dock-count">{unassignedIds.length} unassigned</span>
+        </div>
+
+        <div class="search-box">
+          <input
+            type="text"
+            placeholder="Search IDs..."
+            bind:value={idSearchQuery}
+          />
+          {#if idSearchQuery}
+            <button class="clear-search" onclick={() => idSearchQuery = ''}>x</button>
+          {/if}
+        </div>
+
+        <div class="ids-hint">Drag onto a symbol to assign</div>
+
+        {#if unassignedIds.length === 0}
+          <div class="dock-empty">{idSearchQuery ? 'No matches' : 'All IDs assigned'}</div>
+        {/if}
+
+        <div class="dock-list">
+          {#each unassignedIds as device (device.id)}
+            <button
+              class="id-drag-item"
+              title="Drag onto a symbol to assign: {device.id}"
+              onmousedown={(e) => onLabelMousedown(e, device.id)}
+            >
+              {device.id}
+            </button>
+          {/each}
+        </div>
+      {/if}
     </div>
   {/if}
 </div>
@@ -154,6 +243,7 @@
 
   .dock-content {
     padding: 6px;
+    padding-top: 38px;
     overflow: hidden;
     flex: 1;
     display: flex;
@@ -161,16 +251,45 @@
     min-height: 0;
   }
 
+  /* Tabs */
+  .tabs {
+    display: flex;
+    gap: 2px;
+    flex-shrink: 0;
+    margin-bottom: 4px;
+  }
+
+  .tab {
+    flex: 1;
+    padding: 5px 0;
+    background: #0d2847;
+    border: 1px solid #1a1a5e;
+    border-radius: 4px 4px 0 0;
+    color: #667;
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+
+  .tab:hover {
+    color: #aaa;
+  }
+
+  .tab.active {
+    background: #0f3460;
+    color: #e94560;
+    border-bottom-color: #0f3460;
+  }
+
   .dock-header {
     font-size: 10px;
-    color: #e94560;
+    padding: 2px 6px 4px;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    font-weight: 600;
-    padding: 5px 6px 6px 30px;
     flex-shrink: 0;
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-end;
     align-items: center;
   }
 
@@ -180,6 +299,57 @@
     font-weight: 400;
   }
 
+  /* Search */
+  .search-box {
+    position: relative;
+    flex-shrink: 0;
+    margin-bottom: 4px;
+  }
+
+  .search-box input {
+    width: 100%;
+    padding: 5px 22px 5px 8px;
+    background: #0f3460;
+    border: 1px solid #1a1a5e;
+    color: #e0e0e0;
+    border-radius: 4px;
+    font-size: 11px;
+    outline: none;
+    transition: border-color 0.15s;
+    box-sizing: border-box;
+  }
+
+  .search-box input:focus {
+    border-color: #e94560;
+  }
+
+  .search-box input::placeholder {
+    color: #556;
+  }
+
+  .clear-search {
+    position: absolute;
+    right: 3px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    background: none;
+    border: none;
+    color: #667;
+    font-size: 11px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 2px;
+  }
+
+  .clear-search:hover {
+    color: #e94560;
+  }
+
   .dock-empty {
     font-size: 11px;
     color: #556;
@@ -286,4 +456,43 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
+  /* IDs tab */
+  .ids-hint {
+    font-size: 9px;
+    color: #556;
+    padding: 0 6px 4px;
+    flex-shrink: 0;
+  }
+
+  .id-drag-item {
+    display: block;
+    width: 100%;
+    padding: 4px 8px;
+    margin-bottom: 1px;
+    background: #0f3460;
+    border: 1px solid #1a1a5e;
+    border-radius: 3px;
+    cursor: grab;
+    user-select: none;
+    transition: all 0.15s ease;
+    color: #e0e0e0;
+    font-size: 10px;
+    font-weight: 500;
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .id-drag-item:hover {
+    background: #1a1a5e;
+    border-color: #e94560;
+    transform: translateX(-2px);
+  }
+
+  .id-drag-item:active {
+    cursor: grabbing;
+    transform: scale(0.98);
+  }
 </style>

svelte-app/src/lib/canvas/hit-testing.ts

@@ -4,15 +4,19 @@ import { isResizable, isCurvedType, isSpurType, isEpcType, isInductionType, EPC_
 import { THEME } from './render-theme.js';
 import type { PlacedSymbol } from '../types.js';
 
-/** Transform a point into a symbol's unrotated local space */
+/** Transform a point into a symbol's unrotated, unmirrored local space */
 export function toSymbolLocal(px: number, py: number, sym: PlacedSymbol): { x: number; y: number } {
-  if (!sym.rotation) return { x: px, y: py };
+  if (!sym.rotation && !sym.mirrored) return { x: px, y: py };
   const scx = sym.x + sym.w / 2;
   const scy = sym.y + sym.h / 2;
-  const rad = (-sym.rotation * Math.PI) / 180;
+  const rad = (-(sym.rotation || 0) * Math.PI) / 180;
   const cos = Math.cos(rad), sin = Math.sin(rad);
   const dx = px - scx, dy = py - scy;
-  return { x: dx * cos - dy * sin + scx, y: dx * sin + dy * cos + scy };
+  // Inverse of render transform: un-rotate then un-mirror
+  let rx = dx * cos - dy * sin;
+  const ry = dx * sin + dy * cos;
+  if (sym.mirrored) rx = -rx;
+  return { x: rx + scx, y: ry + scy };
 }
 
 export function pointInRect(px: number, py: number, rx: number, ry: number, rw: number, rh: number): boolean {
@@ -56,11 +60,37 @@ export function hitEpcSegmentMidpoint(cx: number, cy: number, sym: PlacedSymbol)
   return -1;
 }
 
+/** Find nearest EPC segment to a point. Returns insert index or -1.
+ *  Used for right-click add-waypoint — matches any point near a segment, not just midpoints. */
+export function hitEpcSegmentNearest(cx: number, cy: number, sym: PlacedSymbol): number {
+  if (!isEpcType(sym.symbolId)) return -1;
+  const waypoints = sym.epcWaypoints || EPC_CONFIG.defaultWaypoints;
+  const { x: lx, y: ly } = toSymbolLocal(cx, cy, sym);
+  const maxDist = 12;
+  let bestIdx = -1;
+  let bestDist = maxDist;
+  for (let i = 0; i < waypoints.length - 1; i++) {
+    const ax = sym.x + waypoints[i].x, ay = sym.y + waypoints[i].y;
+    const bx = sym.x + waypoints[i + 1].x, by = sym.y + waypoints[i + 1].y;
+    const dx = bx - ax, dy = by - ay;
+    const len2 = dx * dx + dy * dy;
+    if (len2 === 0) continue;
+    const t = Math.max(0, Math.min(1, ((lx - ax) * dx + (ly - ay) * dy) / len2));
+    const nx = ax + t * dx, ny = ay + t * dy;
+    const dist = Math.sqrt((lx - nx) ** 2 + (ly - ny) ** 2);
+    if (dist < bestDist) {
+      bestDist = dist;
+      bestIdx = i + 1;
+    }
+  }
+  return bestIdx;
+}
+
 /** Hit test resize handles. Caller must verify single-selection. */
 export function hitResizeHandle(cx: number, cy: number, sym: PlacedSymbol): 'left' | 'right' | 'spur-top' | 'spur-bottom' | null {
   if (!isResizable(sym.symbolId)) return null;
 
-  const hs = THEME.resizeHandle.size;
+  const hs = THEME.resizeHandle.hitSize;
   const { x: lx, y: ly } = toSymbolLocal(cx, cy, sym);
 
   if (isCurvedType(sym.symbolId)) {

svelte-app/src/lib/canvas/interactions.ts

@@ -3,7 +3,7 @@ import { isCurvedType, isEpcType, SYMBOLS, EPC_CONFIG } from '../symbols.js';
 import type { EpcWaypoint } from '../types.js';
 import { getAABB, snapToGrid, clamp, findValidPosition } from './collision.js';
 import { orientedBoxCorners, pastDragThreshold } from './geometry.js';
-import { toSymbolLocal, pointInRect, pointInTrapezoid, hitEpcWaypoint, hitEpcSegmentMidpoint, hitResizeHandle, hitTestSymbols } from './hit-testing.js';
+import { toSymbolLocal, pointInRect, pointInTrapezoid, hitEpcWaypoint, hitEpcSegmentMidpoint, hitEpcSegmentNearest, hitResizeHandle, hitTestSymbols } from './hit-testing.js';
 
 /** Ensure an EPC symbol has its waypoints array initialized */
 function ensureEpcWaypoints(sym: { epcWaypoints?: import('../types.js').EpcWaypoint[] }) {
@@ -22,7 +22,7 @@ const CONVEYOR_MIN_W = 40;
 const DRAG_THRESHOLD = 4; // pixels before drag actually starts
 
 interface DragState {
-  type: 'palette' | 'move' | 'multi-move' | 'resize-left' | 'resize-right' | 'resize-spur-top' | 'resize-spur-bottom' | 'epc-waypoint' | 'pdf';
+  type: 'palette' | 'move' | 'multi-move' | 'resize-left' | 'resize-right' | 'resize-spur-top' | 'resize-spur-bottom' | 'epc-waypoint' | 'pdf' | 'assign-label';
   placedId?: number;
   offsetX?: number;
   offsetY?: number;
@@ -254,6 +254,31 @@ function onCanvasMousedown(e: MouseEvent) {
 function onContextMenu(e: MouseEvent) {
   e.preventDefault();
   const pos = screenToCanvas(e.clientX, e.clientY);
+
+  // Right-click on selected EPC: add waypoint at nearest segment
+  if (layout.selectedIds.size === 1) {
+    const selId = [...layout.selectedIds][0];
+    const sel = layout.symbols.find(s => s.id === selId);
+    if (sel && isEpcType(sel.symbolId)) {
+      const insertIdx = hitEpcSegmentNearest(pos.x, pos.y, sel);
+      if (insertIdx >= 0) {
+        layout.pushUndo();
+        ensureEpcWaypoints(sel);
+        const prev = sel.epcWaypoints![insertIdx - 1];
+        const next = sel.epcWaypoints![insertIdx];
+        const local = toSymbolLocal(pos.x, pos.y, sel);
+        sel.epcWaypoints!.splice(insertIdx, 0, {
+          x: local.x - sel.x,
+          y: local.y - sel.y,
+        });
+        recalcEpcBounds(sel);
+        layout.markDirty();
+        layout.saveMcmState();
+        return;
+      }
+    }
+  }
+
   const hitId = hitTest(pos.x, pos.y);
   if (hitId !== null && contextMenuCallback) {
     contextMenuCallback(e.clientX, e.clientY, hitId);
@@ -419,37 +444,13 @@ function onMousemove(e: MouseEvent) {
     let localX = local.x - sym.x;
     let localY = local.y - sym.y;
 
-    // Snap to grid (in local coords, grid aligns with symbol origin in world)
+    // Snap to grid
-    if (layout.snapEnabled && !e.ctrlKey) {
-      // Snap the world position, then convert back to local
-      const worldSnappedX = Math.round((sym.x + localX) / layout.gridSize) * layout.gridSize;
-      const worldSnappedY = Math.round((sym.y + localY) / layout.gridSize) * layout.gridSize;
-      localX = worldSnappedX - sym.x;
-      localY = worldSnappedY - sym.y;
-    }
-
-    // Constrain to 0/45/90 degree angles relative to adjacent waypoint
-    const anchor = wpIdx > 0 ? wps[wpIdx - 1] : (wpIdx < wps.length - 1 ? wps[wpIdx + 1] : null);
-    if (anchor) {
-      const dx = localX - anchor.x;
-      const dy = localY - anchor.y;
-      const dist = Math.sqrt(dx * dx + dy * dy);
-      if (dist > 0.1) {
-        // Snap angle to nearest 15-degree increment
-        const rawAngle = Math.atan2(dy, dx);
-        const snappedAngle = Math.round(rawAngle / (Math.PI / 12)) * (Math.PI / 12);
-        localX = anchor.x + dist * Math.cos(snappedAngle);
-        localY = anchor.y + dist * Math.sin(snappedAngle);
-
-        // Re-snap to grid after angle constraint
     if (layout.snapEnabled && !e.ctrlKey) {
       const worldSnappedX = Math.round((sym.x + localX) / layout.gridSize) * layout.gridSize;
       const worldSnappedY = Math.round((sym.y + localY) / layout.gridSize) * layout.gridSize;
       localX = worldSnappedX - sym.x;
       localY = worldSnappedY - sym.y;
     }
-      }
-    }
 
     wps[wpIdx] = { x: localX, y: localY };
     // Recalculate bounding box
@@ -463,6 +464,17 @@ function onMousemove(e: MouseEvent) {
     dragState.ghost.style.top = (e.clientY - sym.h / 2) + 'px';
   }
 
+  if (dragState.type === 'assign-label' && dragState.ghost) {
+    dragState.ghost.style.left = (e.clientX + 8) + 'px';
+    dragState.ghost.style.top = (e.clientY - 10) + 'px';
+    const pos = screenToCanvas(e.clientX, e.clientY);
+    const hoverId = hitTest(pos.x, pos.y);
+    if (layout.labelDropTarget !== hoverId) {
+      layout.labelDropTarget = hoverId;
+      layout.markDirty();
+    }
+  }
+
   if (dragState.type === 'move' && dragState.placedId != null) {
     const pos = screenToCanvas(e.clientX, e.clientY);
     if (!dragState.dragActivated) {
@@ -544,6 +556,24 @@ function onMouseup(e: MouseEvent) {
     return;
   }
 
+  if (dragState.type === 'assign-label' && dragState.ghost && dragState.deviceLabel) {
+    dragState.ghost.remove();
+    layout.labelDropTarget = null;
+    const pos = screenToCanvas(e.clientX, e.clientY);
+    const hitId = hitTest(pos.x, pos.y);
+    if (hitId !== null) {
+      const sym = layout.symbols.find(s => s.id === hitId);
+      if (sym) {
+        layout.pushUndo();
+        sym.label = dragState.deviceLabel;
+        layout.markDirty();
+        layout.saveMcmState();
+      }
+    }
+    dragState = null;
+    return;
+  }
+
   if (dragState.type === 'palette' && dragState.ghost && dragState.symbolDef) {
     dragState.ghost.remove();
     const sym = dragState.symbolDef;
@@ -679,3 +709,27 @@ export function startPaletteDrag(e: MouseEvent, symbolDef: (typeof SYMBOLS)[numb
 
   dragState = { type: 'palette', symbolDef, ghost, deviceLabel };
 }
+
+// Called from DeviceDock IDs tab to drag a label onto a placed symbol
+export function startLabelDrag(e: MouseEvent, label: string) {
+  const ghost = document.createElement('div');
+  ghost.style.cssText = `
+    position: fixed;
+    pointer-events: none;
+    z-index: 9999;
+    background: #e94560;
+    color: #fff;
+    padding: 2px 8px;
+    border-radius: 3px;
+    font-size: 11px;
+    font-weight: 600;
+    white-space: nowrap;
+    opacity: 0.85;
+  `;
+  ghost.textContent = label;
+  ghost.style.left = (e.clientX + 8) + 'px';
+  ghost.style.top = (e.clientY - 10) + 'px';
+  document.body.appendChild(ghost);
+
+  dragState = { type: 'assign-label', ghost, deviceLabel: label };
+}

svelte-app/src/lib/canvas/render-theme.ts

@@ -7,19 +7,29 @@ export const THEME = {
   },
   selection: {
     strokeColor: '#00ff88',
-    lineWidth: 2,
+    lineWidth: 0.5,
-    shadowColor: 'rgba(0, 255, 136, 0.4)',
+    pad: 1,
-    shadowBlur: 6,
+    shadowColor: 'rgba(0, 255, 136, 0.3)',
+    shadowBlur: 2,
   },
   collision: {
     strokeColor: '#ff0000',
-    lineWidth: 2,
+    lineWidth: 0.5,
-    shadowColor: 'rgba(255, 0, 0, 0.6)',
+    pad: 1,
-    shadowBlur: 8,
+    shadowColor: 'rgba(255, 0, 0, 0.4)',
+    shadowBlur: 3,
   },
   hover: {
-    strokeColor: 'rgba(233, 69, 96, 0.3)',
+    strokeColor: 'rgba(233, 69, 96, 0.2)',
-    lineWidth: 1,
+    lineWidth: 0.5,
+  },
+  dropTarget: {
+    strokeColor: '#00ccff',
+    lineWidth: 1.5,
+    pad: 3,
+    shadowColor: 'rgba(0, 204, 255, 0.5)',
+    shadowBlur: 6,
+    fillColor: 'rgba(0, 204, 255, 0.08)',
   },
   label: {
     color: '#e94560',
@@ -27,10 +37,11 @@ export const THEME = {
     offsetY: -3,
   },
   resizeHandle: {
-    size: 10,
+    size: 6,
+    hitSize: 14,
     fillColor: '#00ff88',
     strokeColor: '#009955',
-    lineWidth: 1,
+    lineWidth: 0.5,
   },
   epcWaypoint: {
     size: 6,

svelte-app/src/lib/canvas/renderer.ts

@@ -407,6 +407,20 @@ function drawSymbolBody(ctx: CanvasRenderingContext2D, sym: PlacedSymbol): boole
     drawInductionSymbol(ctx, sym);
   } else if (isCurvedType(sym.symbolId)) {
     drawCurvedSymbol(ctx, sym);
+  } else if (isSpurType(sym.symbolId)) {
+    // Draw trapezoid programmatically so w and w2 are respected during resize
+    const w2 = sym.w2 ?? sym.w;
+    ctx.beginPath();
+    ctx.moveTo(sym.x, sym.y);
+    ctx.lineTo(sym.x + w2, sym.y);
+    ctx.lineTo(sym.x + sym.w, sym.y + sym.h);
+    ctx.lineTo(sym.x, sym.y + sym.h);
+    ctx.closePath();
+    ctx.fillStyle = '#000000';
+    ctx.strokeStyle = '#000000';
+    ctx.lineWidth = 0.5;
+    ctx.fill();
+    ctx.stroke();
   } else {
     const img = getSymbolImage(sym.file);
     if (!img) return false;
@@ -429,7 +443,7 @@ function drawSymbolOverlays(ctx: CanvasRenderingContext2D, sym: PlacedSymbol) {
     ctx.lineWidth = THEME.selection.lineWidth;
     ctx.shadowColor = THEME.selection.shadowColor;
     ctx.shadowBlur = THEME.selection.shadowBlur;
-    strokeOutline(ctx, sym, 2);
+    strokeOutline(ctx, sym, THEME.selection.pad);
     ctx.shadowBlur = 0;
     if (layout.selectedIds.size === 1) {
       if (isEpcType(sym.symbolId)) {
@@ -446,12 +460,28 @@ function drawSymbolOverlays(ctx: CanvasRenderingContext2D, sym: PlacedSymbol) {
     ctx.lineWidth = THEME.collision.lineWidth;
     ctx.shadowColor = THEME.collision.shadowColor;
     ctx.shadowBlur = THEME.collision.shadowBlur;
-    strokeOutline(ctx, sym, 2);
+    strokeOutline(ctx, sym, THEME.collision.pad);
+    ctx.shadowBlur = 0;
+  }
+
+  // Label drop-target highlight
+  if (layout.labelDropTarget === sym.id) {
+    ctx.fillStyle = THEME.dropTarget.fillColor;
+    ctx.strokeStyle = THEME.dropTarget.strokeColor;
+    ctx.lineWidth = THEME.dropTarget.lineWidth;
+    ctx.shadowColor = THEME.dropTarget.shadowColor;
+    ctx.shadowBlur = THEME.dropTarget.shadowBlur;
+    // Fill + stroke the outline
+    ctx.beginPath();
+    ctx.rect(sym.x - THEME.dropTarget.pad, sym.y - THEME.dropTarget.pad,
+             sym.w + THEME.dropTarget.pad * 2, sym.h + THEME.dropTarget.pad * 2);
+    ctx.fill();
+    ctx.stroke();
     ctx.shadowBlur = 0;
   }
 
   // Hover border (non-selected)
-  if (!isSelected) {
+  if (!isSelected && layout.labelDropTarget !== sym.id) {
     ctx.strokeStyle = THEME.hover.strokeColor;
     ctx.lineWidth = THEME.hover.lineWidth;
     strokeOutline(ctx, sym, 0);

svelte-app/src/lib/export.ts

@@ -1,5 +1,5 @@
 import { layout } from './stores/layout.svelte.js';
-import { isEpcType, isInductionType, EPC_CONFIG, INDUCTION_CONFIG } from './symbols.js';
+import { isEpcType, isInductionType, isSpurType, isCurvedType, EPC_CONFIG, INDUCTION_CONFIG, getCurveGeometry } from './symbols.js';
 import { deserializeSymbol } from './serialization.js';
 import type { PlacedSymbol } from './types.js';
 
@@ -112,6 +112,32 @@ export async function exportSVG() {
       lines.push(`  <g${idAttr}>`);
       lines.push(`    <path d="${d}" fill="#000000"${rotAttr} />`);
       lines.push('  </g>');
+    } else if (isCurvedType(sym.symbolId)) {
+      const angle = sym.curveAngle || 90;
+      const { arcCx, arcCy, outerR, innerR } = getCurveGeometry(sym.symbolId, sym.x, sym.y, sym.w, sym.h);
+      const sweepRad = (angle * Math.PI) / 180;
+      // Outer arc: from angle=0 to angle=-sweep (CCW in SVG = large-arc with sweep-flag 0)
+      const outerEndX = arcCx + outerR * Math.cos(sweepRad);
+      const outerEndY = arcCy - outerR * Math.sin(sweepRad);
+      const innerEndX = arcCx + innerR * Math.cos(sweepRad);
+      const innerEndY = arcCy - innerR * Math.sin(sweepRad);
+      const largeArc = angle > 180 ? 1 : 0;
+      const d = [
+        `M ${arcCx + outerR},${arcCy}`,
+        `A ${outerR},${outerR} 0 ${largeArc},0 ${outerEndX},${outerEndY}`,
+        `L ${innerEndX},${innerEndY}`,
+        `A ${innerR},${innerR} 0 ${largeArc},1 ${arcCx + innerR},${arcCy}`,
+        'Z',
+      ].join(' ');
+      lines.push(`  <g${idAttr}${rotAttr}>`);
+      lines.push(`    <path d="${d}" fill="#000000" stroke="#000000" stroke-width="0.5" />`);
+      lines.push('  </g>');
+    } else if (isSpurType(sym.symbolId)) {
+      const w2 = sym.w2 ?? sym.w;
+      const points = `${sym.x},${sym.y} ${sym.x + w2},${sym.y} ${sym.x + sym.w},${sym.y + sym.h} ${sym.x},${sym.y + sym.h}`;
+      lines.push(`  <g${idAttr}${rotAttr}>`);
+      lines.push(`    <polygon points="${points}" fill="#000000" stroke="#000000" stroke-width="0.5" />`);
+      lines.push('  </g>');
     } else {
       try {
         const svgText = await (await fetch(sym.file)).text();

svelte-app/src/lib/stores/layout.svelte.ts

@@ -32,6 +32,9 @@ class LayoutStore {
   pdfLoaded = $state(false);
   editingBackground = $state(false);
 
+  // Label-drag drop target highlight (symbol id or null)
+  labelDropTarget = $state<number | null>(null);
+
   // Dirty flag for canvas re-render
   dirty = $state(0);