@elixpo/lixsketch 5.4.7 → 5.5.0

package/src/react/components/Toolbar.jsx

@@ -0,0 +1,140 @@
+"use client"
+
+import useSketchStore, { TOOLS } from '../store/useSketchStore'
+import useUIStore from '../store/useUIStore'
+
+// Items are built lazily inside the component body so esbuild's lazy ESM
+// wrapper can't evaluate them before the store module finishes init.
+function getViewModeItems() {
+  return [
+    { tool: TOOLS.PAN, icon: 'bxs-hand', title: 'Pan (H)', key: 'H' },
+  ]
+}
+
+function getToolItems() {
+  return [
+  { tool: TOOLS.PAN, icon: 'bxs-hand', title: 'Pan (H)', key: 'H' },
+  { tool: TOOLS.SELECT, icon: 'bxs-pointer', title: 'Select (V)', key: 'V' },
+  'spacer',
+  { tool: TOOLS.RECTANGLE, icon: 'bx-square', title: 'Rectangle (R)', key: 'R' },
+  { tool: TOOLS.CIRCLE, icon: 'bx-circle', title: 'Circle (O)', key: 'O' },
+  { tool: TOOLS.LINE, icon: 'bx-minus', title: 'Line (L)', key: 'L' },
+  { tool: TOOLS.ARROW, icon: 'bx-right-arrow-alt', title: 'Arrow (A)', rotate: true, key: 'A' },
+  { tool: TOOLS.TEXT, icon: 'bx-text', title: 'Text (T)', key: 'T' },
+  { tool: TOOLS.FREEHAND, icon: 'bx-pen', title: 'Freehand (P)', key: 'P' },
+  { tool: TOOLS.IMAGE, icon: 'bx-image-alt', title: 'Image (9)', key: '9' },
+  { tool: TOOLS.ICON, icon: 'bx-wink-smile', title: 'Icon (I)', key: 'I' },
+  'spacer',
+  { tool: TOOLS.FRAME, icon: 'bx-crop', title: 'Frame (F)', key: 'F' },
+  { tool: TOOLS.LASER, icon: 'bxs-magic-wand', title: 'Laser (K)', key: 'K' },
+  { tool: TOOLS.ERASER, icon: 'bxs-eraser', title: 'Eraser (E)', key: 'E' },
+  // AI tool entry removed while the assistant is coming-soon.
+  // Restore `{ tool: 'ai', icon: null, title: 'AI', isAI: true }` here
+  // when the modal becomes a real feature again.
+  ]
+}
+
+export default function Toolbar() {
+  const activeTool = useSketchStore((s) => s.activeTool)
+  const setActiveTool = useSketchStore((s) => s.setActiveTool)
+  const viewMode = useSketchStore((s) => s.viewMode)
+  const toolLock = useSketchStore((s) => s.toolLock)
+  const toggleToolLock = useSketchStore((s) => s.toggleToolLock)
+  const toggleAIModal = useUIStore((s) => s.toggleAIModal)
+
+  const items = viewMode ? getViewModeItems() : getToolItems()
+
+  return (
+    <>
+    <div className={`absolute left-2.5 top-1/2 -translate-y-1/2 w-[46px] rounded-xl bg-surface z-[1000] flex flex-col items-center py-1.5 gap-0.5 font-[lixFont] max-h-[calc(100vh-120px)] overflow-y-auto no-scrollbar`}>
+      {/* Tool lock button at the top */}
+      {!viewMode && (
+        <>
+          <button
+            title="Tool Lock (Q)"
+            onClick={toggleToolLock}
+            className={`relative w-[33px] h-[30px] flex items-center justify-center rounded-lg transition-all duration-200 ${
+              toolLock
+                ? 'bg-accent-blue/20 text-accent-blue'
+                : 'text-text-dim hover:text-text-muted hover:bg-surface-hover'
+            }`}
+          >
+            <i className={`bx ${toolLock ? 'bxs-lock-alt' : 'bx-lock-alt'} text-lg`} />
+            <span className="absolute bottom-0.5 right-[-1px] text-[10px] leading-none opacity-50">Q</span>
+          </button>
+          <div className="w-6 h-px bg-border-light my-0.5" />
+        </>
+      )}
+
+      {items.map((item, idx) => {
+        if (item === 'spacer') {
+          return (
+            <div
+              key={`spacer-${idx}`}
+              className="w-6 h-px bg-border-light my-0.5"
+            />
+          )
+        }
+
+        const isActive = activeTool === item.tool
+
+        if (item.isAI) {
+          return (
+            <button
+              key="ai"
+              title={item.title}
+              onClick={toggleAIModal}
+              className="w-[33px] h-[31px] flex items-center justify-center rounded-lg text-text-muted hover:text-accent hover:bg-surface-hover transition-all duration-200"
+            >
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z" />
+                <path d="M18 14l1 3 3 1-3 1-1 3-1-3-3-1 3-1 1-3z" />
+              </svg>
+            </button>
+          )
+        }
+
+        return (
+          <button
+            key={item.tool}
+            title={item.title}
+            onClick={() => setActiveTool(item.tool)}
+            className={`relative w-[33px] h-[31px] flex items-center justify-center rounded-lg transition-all duration-200 ${
+              isActive
+                ? 'bg-surface-active text-text-primary'
+                : 'text-text-muted hover:text-text-primary hover:bg-surface-hover'
+            }`}
+          >
+            <i
+              className={`bx ${item.icon} text-xl`}
+              style={item.rotate ? { transform: 'rotate(-45deg)' } : undefined}
+            />
+            {item.key && (
+              <span className={`absolute bottom-0.5 right-[-1px] text-[10px] leading-none ${isActive ? 'opacity-60' : 'opacity-35'}`}>
+                {item.key}
+              </span>
+            )}
+          </button>
+        )
+      })}
+    </div>
+    {viewMode && (
+      <div className="absolute top-16 left-2.5 w-[46px] z-[1000] flex justify-center font-[lixFont]">
+        <span className="text-text-dim text-[9px] text-center leading-tight">
+          View<br/>Mode<br/>
+          <kbd className="text-[8px] text-text-muted">Esc</kbd>
+        </span>
+      </div>
+    )}
+    </>
+  )
+}

package/src/react/components/canvas/CanvasLoadingOverlay.jsx

@@ -0,0 +1,76 @@
+"use client"
+
+import useUIStore from '../../store/useUIStore'
+
+export default function CanvasLoadingOverlay() {
+  const loading = useUIStore((s) => s.canvasLoading)
+  const message = useUIStore((s) => s.canvasLoadingMessage)
+
+  if (!loading) return null
+
+  return (
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/80 backdrop-blur-sm font-[lixFont] pointer-events-all">
+      <div className="flex flex-col items-center gap-5">
+        <style>{`
+          @keyframes cl-glob {
+            0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
+            25% { transform: translate(10px, -6px) scale(1.12); opacity: 0.9; }
+            50% { transform: translate(-5px, 8px) scale(0.9); opacity: 0.6; }
+            75% { transform: translate(-8px, -4px) scale(1.08); opacity: 0.85; }
+          }
+          @keyframes cl-glob-2 {
+            0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
+            25% { transform: translate(-8px, 5px) scale(1.1); opacity: 0.85; }
+            50% { transform: translate(6px, -8px) scale(0.95); opacity: 0.7; }
+            75% { transform: translate(5px, 6px) scale(1.12); opacity: 0.9; }
+          }
+          @keyframes cl-float {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-3px); }
+          }
+        `}</style>
+
+        <div className="relative w-20 h-20">
+          <div className="absolute rounded-full" style={{
+            width: 38, height: 38, top: 2, left: 4,
+            background: 'radial-gradient(circle, rgba(59,130,246,0.5) 0%, transparent 70%)',
+            filter: 'blur(10px)',
+            animation: 'cl-glob 3.5s ease-in-out infinite',
+            willChange: 'transform, opacity',
+          }} />
+          <div className="absolute rounded-full" style={{
+            width: 34, height: 34, top: 14, right: 2,
+            background: 'radial-gradient(circle, rgba(168,85,247,0.45) 0%, transparent 70%)',
+            filter: 'blur(10px)',
+            animation: 'cl-glob-2 4s ease-in-out infinite',
+            willChange: 'transform, opacity',
+          }} />
+          <div className="absolute rounded-full" style={{
+            width: 30, height: 30, bottom: 2, left: 12,
+            background: 'radial-gradient(circle, rgba(52,211,153,0.4) 0%, transparent 70%)',
+            filter: 'blur(10px)',
+            animation: 'cl-glob 4.2s ease-in-out infinite reverse',
+            willChange: 'transform, opacity',
+          }} />
+          <div className="absolute inset-0 flex items-center justify-center" style={{ animation: 'cl-float 2.5s ease-in-out infinite' }}>
+            <div className="w-9 h-9 rounded-lg bg-white/[0.06] backdrop-blur-sm border border-white/[0.08] flex items-center justify-center">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="opacity-70">
+                <rect x="3" y="3" width="7" height="7" rx="1" />
+                <rect x="14" y="3" width="7" height="7" rx="1" />
+                <rect x="3" y="14" width="7" height="7" rx="1" />
+                <rect x="14" y="14" width="7" height="7" rx="1" />
+              </svg>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-1.5">
+          <span className="w-1.5 h-1.5 rounded-full bg-blue-400 animate-bounce" style={{ animationDelay: '0ms' }} />
+          <span className="w-1.5 h-1.5 rounded-full bg-purple-400 animate-bounce" style={{ animationDelay: '150ms' }} />
+          <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-bounce" style={{ animationDelay: '300ms' }} />
+        </div>
+        <p className="text-text-dim text-sm">{message}</p>
+      </div>
+    </div>
+  )
+}

package/src/react/components/canvas/ContextMenu.jsx

@@ -0,0 +1,466 @@
+"use client"
+
+import { useState, useEffect, useCallback, useRef } from 'react'
+import useSketchStore from '../../store/useSketchStore'
+import useUIStore from '../../store/useUIStore'
+import { showToast } from '../../utils/toast'
+
+// ── Helpers ──────────────────────────────────────────────────
+
+function getCleanSVG() {
+  const svgEl = window.svg
+  if (!svgEl) return null
+  const clone = svgEl.cloneNode(true)
+  clone.querySelectorAll(
+    '[data-selection], .selection-handle, .resize-handle, .rotation-handle, .anchor, .rotate-anchor, .resize-anchor, .rotation-anchor, .selection-outline'
+  ).forEach((el) => el.remove())
+  return clone
+}
+
+function renderToCanvas(clone, scale, bgColor) {
+  return new Promise((resolve) => {
+    const svgData = new XMLSerializer().serializeToString(clone)
+    const vb = window.svg.viewBox.baseVal
+    const canvas = document.createElement('canvas')
+    canvas.width = vb.width * scale
+    canvas.height = vb.height * scale
+    const ctx = canvas.getContext('2d')
+    ctx.scale(scale, scale)
+    const img = new Image()
+    const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' })
+    const url = URL.createObjectURL(blob)
+    img.onload = () => {
+      if (bgColor) {
+        ctx.fillStyle = bgColor
+        ctx.fillRect(0, 0, vb.width, vb.height)
+      }
+      ctx.drawImage(img, 0, 0, vb.width, vb.height)
+      URL.revokeObjectURL(url)
+      resolve(canvas)
+    }
+    img.onerror = () => { URL.revokeObjectURL(url); resolve(null) }
+    img.src = url
+  })
+}
+
+function getShapeAtPoint(x, y) {
+  const shapes = window.shapes
+  if (!shapes) return null
+  // Walk backwards (topmost first)
+  for (let i = shapes.length - 1; i >= 0; i--) {
+    const shape = shapes[i]
+    const el = shape.group || shape.element
+    if (!el) continue
+    const rect = el.getBoundingClientRect()
+    if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+      return shape
+    }
+  }
+  return null
+}
+
+// ── Menu item components ─────────────────────────────────────
+
+function MenuItem({ label, shortcut, onClick, disabled, danger }) {
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={`w-full flex items-center justify-between px-3 py-1.5 text-xs transition-colors duration-100 ${
+        disabled
+          ? 'text-text-dim cursor-default'
+          : danger
+            ? 'text-red-400 hover:bg-red-500/15 cursor-pointer'
+            : 'text-text-secondary hover:bg-surface-hover cursor-pointer'
+      }`}
+    >
+      <span>{label}</span>
+      {shortcut && <span className="text-text-dim text-[10px] ml-6">{shortcut}</span>}
+    </button>
+  )
+}
+
+function CheckMenuItem({ label, shortcut, checked, onClick }) {
+  return (
+    <button
+      onClick={onClick}
+      className="w-full flex items-center justify-between px-3 py-1.5 text-xs text-text-secondary hover:bg-surface-hover cursor-pointer transition-colors duration-100"
+    >
+      <span className="flex items-center gap-2">
+        {checked && <i className="bx bx-check text-sm text-accent-blue -ml-0.5" />}
+        {!checked && <span className="w-[14px]" />}
+        {label}
+      </span>
+      {shortcut && <span className="text-text-dim text-[10px] ml-6">{shortcut}</span>}
+    </button>
+  )
+}
+
+function Separator() {
+  return <hr className="border-border-light my-1" />
+}
+
+// ── Main component ───────────────────────────────────────────
+
+export default function ContextMenu() {
+  const [visible, setVisible] = useState(false)
+  const [position, setPosition] = useState({ x: 0, y: 0 })
+  const [targetShape, setTargetShape] = useState(null)
+  const menuRef = useRef(null)
+
+  const gridEnabled = useSketchStore((s) => s.gridEnabled)
+  const snapToObjects = useSketchStore((s) => s.snapToObjects)
+  const zenMode = useSketchStore((s) => s.zenMode)
+  const viewMode = useSketchStore((s) => s.viewMode)
+
+  const close = useCallback(() => {
+    setVisible(false)
+    setTargetShape(null)
+  }, [])
+
+  // Context menu handler
+  useEffect(() => {
+    const handleContextMenu = (e) => {
+      const svg = document.getElementById('freehand-canvas')
+      if (!svg) return
+
+      // Only handle right-clicks on or within the SVG canvas
+      if (!svg.contains(e.target) && e.target !== svg) return
+
+      e.preventDefault()
+      const shape = getShapeAtPoint(e.clientX, e.clientY)
+
+      // Also check if there's a currentShape selected
+      const current = window.currentShape || null
+
+      setTargetShape(shape || current)
+      setPosition({ x: e.clientX, y: e.clientY })
+      setVisible(true)
+    }
+
+    const handleClick = () => close()
+    const handleKeyDown = (e) => { if (e.key === 'Escape') close() }
+
+    document.addEventListener('contextmenu', handleContextMenu)
+    document.addEventListener('click', handleClick)
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('contextmenu', handleContextMenu)
+      document.removeEventListener('click', handleClick)
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [close])
+
+  // Adjust position so menu doesn't overflow viewport
+  useEffect(() => {
+    if (!visible || !menuRef.current) return
+    const rect = menuRef.current.getBoundingClientRect()
+    const vw = window.innerWidth
+    const vh = window.innerHeight
+    let { x, y } = position
+    if (x + rect.width > vw - 8) x = vw - rect.width - 8
+    if (y + rect.height > vh - 8) y = vh - rect.height - 8
+    if (x !== position.x || y !== position.y) setPosition({ x, y })
+  }, [visible, position])
+
+  if (!visible) return null
+
+  // ── Action handlers ────────────────────────────────────────
+
+  const handlePaste = () => {
+    if (typeof window.pasteClipboard === 'function') window.pasteClipboard()
+    else document.dispatchEvent(new KeyboardEvent('keydown', { key: 'v', ctrlKey: true }))
+    close()
+  }
+
+  const handleCopy = () => {
+    if (typeof window.copySelected === 'function') window.copySelected()
+    else document.dispatchEvent(new KeyboardEvent('keydown', { key: 'c', ctrlKey: true }))
+    close()
+  }
+
+  const handleCut = () => {
+    handleCopy()
+    handleDeleteShape()
+  }
+
+  const handleSelectAll = () => {
+    useSketchStore.getState().setActiveTool('select')
+    if (window.multiSelection && window.shapes) {
+      window.multiSelection.clearSelection()
+      window.shapes.forEach((s) => window.multiSelection.addShape(s))
+    }
+    close()
+  }
+
+  const handleCopyPNG = async () => {
+    const clone = getCleanSVG()
+    if (!clone) { close(); return }
+    const canvas = await renderToCanvas(clone, 2, '#121212')
+    if (!canvas) { close(); return }
+    canvas.toBlob((blob) => {
+      if (blob) navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]).catch(() => {})
+    }, 'image/png')
+    close()
+  }
+
+  const handleCopySVG = () => {
+    const clone = getCleanSVG()
+    if (!clone) { close(); return }
+    const svgData = new XMLSerializer().serializeToString(clone)
+    navigator.clipboard.writeText(svgData).catch(() => {})
+    close()
+  }
+
+  const handleToggleGrid = () => {
+    useSketchStore.getState().toggleGrid()
+    close()
+  }
+
+  const handleToggleSnap = () => {
+    useSketchStore.getState().toggleSnapToObjects()
+    close()
+  }
+
+  const handleZenMode = () => {
+    useSketchStore.getState().toggleZenMode()
+    close()
+  }
+
+  const handleViewMode = () => {
+    useSketchStore.getState().toggleViewMode()
+    close()
+  }
+
+  const handleDeleteShape = () => {
+    // Multi-selection delete
+    if (window.multiSelection?.selectedShapes?.size > 0) {
+      if (typeof window.deleteSelectedShapes === 'function') window.deleteSelectedShapes()
+      close()
+      return
+    }
+    const shape = targetShape || window.currentShape
+    if (!shape) { close(); return }
+    const shapes = window.shapes
+
+    // Issue #24 bug #7: frame → orphan children + snapshot for undo
+    // (mirrors deleteSelectedShapes / EngineShortcuts).
+    const isFrame = shape.shapeName === 'frame'
+    const isDiagramFrame = isFrame && !!shape._diagramType
+    let childSnapshot = null
+    if (isFrame && !isDiagramFrame) {
+      childSnapshot = [...(shape.containedShapes || [])]
+      for (const child of childSnapshot) {
+        if (!child || child === shape) continue
+        const el = child.group || child.element
+        if (el) {
+          if (shape.clipGroup && el.parentNode === shape.clipGroup) shape.clipGroup.removeChild(el)
+          if (window.svg && el.parentNode !== window.svg) window.svg.appendChild(el)
+        }
+        child.parentFrame = null
+        delete child.isBeingMovedByFrame
+      }
+      shape.containedShapes = []
+    }
+
+    if (shapes) {
+      const idx = shapes.indexOf(shape)
+      if (idx !== -1) shapes.splice(idx, 1)
+    }
+    if (typeof window.cleanupAttachments === 'function') window.cleanupAttachments(shape)
+    if (shape.parentFrame && typeof shape.parentFrame.removeShapeFromFrame === 'function') {
+      shape.parentFrame.removeShapeFromFrame(shape)
+    }
+
+    if (isFrame && !isDiagramFrame) {
+      if (shape.group && shape.group.parentNode) shape.group.parentNode.removeChild(shape.group)
+      if (shape.clipGroup && shape.clipGroup.parentNode) shape.clipGroup.parentNode.removeChild(shape.clipGroup)
+      if (shape.clipPath && shape.clipPath.parentNode) shape.clipPath.parentNode.removeChild(shape.clipPath)
+    } else {
+      const el = shape.group || shape.element
+      if (el && el.parentNode) el.parentNode.removeChild(el)
+    }
+
+    if (typeof window.pushDeleteAction === 'function') {
+      if (childSnapshot) window.pushDeleteAction(shape, { childSnapshot })
+      else window.pushDeleteAction(shape)
+    }
+    window.currentShape = null
+    if (typeof window.disableAllSideBars === 'function') window.disableAllSideBars()
+    close()
+  }
+
+  const handleDuplicate = () => {
+    // Copy then paste
+    if (typeof window.copySelected === 'function') window.copySelected()
+    setTimeout(() => {
+      if (typeof window.pasteClipboard === 'function') window.pasteClipboard()
+    }, 50)
+    close()
+  }
+
+  // Layer order
+  const handleLayerAction = (action) => {
+    const shape = targetShape || window.currentShape
+    if (!shape || !window.__layerOrder) { close(); return }
+    window.__layerOrder[action](shape)
+    close()
+  }
+
+  // Flip (transform via scale)
+  const handleFlip = (axis) => {
+    const shape = targetShape || window.currentShape
+    if (!shape) { close(); return }
+    const el = shape.group || shape.element
+    if (!el) { close(); return }
+    const current = el.getAttribute('transform') || ''
+    const bbox = el.getBBox()
+    const cx = bbox.x + bbox.width / 2
+    const cy = bbox.y + bbox.height / 2
+    const scaleStr = axis === 'h'
+      ? `translate(${cx * 2}, 0) scale(-1, 1)`
+      : `translate(0, ${cy * 2}) scale(1, -1)`
+    el.setAttribute('transform', current + ' ' + scaleStr)
+    close()
+  }
+
+  // Wrap selection in frame
+  const handleWrapInFrame = () => {
+    // Simulate the frame wrap if engine supports it
+    close()
+  }
+
+  // ── Group / ungroup helpers ─────────────────────────────────
+  // Mirror the Ctrl+G / Ctrl+Shift+G behavior so the right-click menu
+  // is a discoverable alternative.
+  const handleGroup = () => {
+    const ms = window.multiSelection
+    const sel = ms?.selectedShapes
+    const targets = sel && sel.size > 1
+      ? Array.from(sel)
+      : (window.currentShape ? [window.currentShape] : [])
+    if (targets.length > 1) {
+      const newId = `g-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 7)}`
+      for (const s of targets) s.groupId = newId
+      if (typeof ms?.updateControls === 'function') ms.updateControls()
+      showToast(`Grouped ${targets.length} shapes`, { tone: 'success' })
+    }
+    close()
+  }
+
+  const handleUngroup = () => {
+    const ms = window.multiSelection
+    const sel = ms?.selectedShapes
+    const targets = sel && sel.size > 0
+      ? Array.from(sel)
+      : (window.currentShape ? [window.currentShape] : [])
+    const groupIds = new Set(targets.map(s => s.groupId).filter(Boolean))
+    if (groupIds.size > 0 && Array.isArray(window.shapes)) {
+      let cleared = 0
+      for (const s of window.shapes) {
+        if (s.groupId && groupIds.has(s.groupId)) { s.groupId = null; cleared++ }
+      }
+      if (typeof ms?.updateControls === 'function') ms.updateControls()
+      showToast(`Ungrouped ${cleared} shapes`, { tone: 'success' })
+    }
+    close()
+  }
+
+  // Compute selection state for the menu rendering below.
+  const selectionShapes = (() => {
+    const sel = window.multiSelection?.selectedShapes
+    if (sel && sel.size > 0) return Array.from(sel)
+    if (targetShape) return [targetShape]
+    return []
+  })()
+  const canGroup = selectionShapes.length > 1
+  const groupIdsInSelection = new Set(selectionShapes.map(s => s.groupId).filter(Boolean))
+  const canUngroup = groupIdsInSelection.size > 0
+  const fullyGrouped = selectionShapes.length > 1 &&
+    selectionShapes.every(s => s.groupId) &&
+    groupIdsInSelection.size === 1
+
+  const handleCanvasProperties = () => {
+    // Toggle shape sidebar / properties via Alt+/
+    close()
+  }
+
+  // ── Render ─────────────────────────────────────────────────
+
+  const isShape = !!targetShape
+
+  return (
+    <div
+      ref={menuRef}
+      className="fixed z-9999 min-w-[220px] py-1.5 bg-surface/90 backdrop-blur-xl rounded-xl border border-border-light shadow-2xl font-[lixFont] select-none"
+      style={{ left: position.x, top: position.y }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {isShape ? (
+        /* ── Shape context menu ── */
+        <>
+          <MenuItem label="Cut" shortcut="Ctrl+X" onClick={handleCut} />
+          <MenuItem label="Copy" shortcut="Ctrl+C" onClick={handleCopy} />
+          <MenuItem label="Paste" shortcut="Ctrl+V" onClick={handlePaste} />
+
+          <Separator />
+          {/* Frame wrap doesn't make sense when the selection is already
+              grouped — the group itself is the implicit container. */}
+          {!fullyGrouped && (
+            <MenuItem label="Wrap selection in frame" onClick={handleWrapInFrame} />
+          )}
+          {canGroup && !fullyGrouped && (
+            <MenuItem label="Group" shortcut="Ctrl+G" onClick={handleGroup} />
+          )}
+          {canUngroup && (
+            <MenuItem label="Ungroup" shortcut="Ctrl+Shift+G" onClick={handleUngroup} />
+          )}
+
+          <Separator />
+          <MenuItem label="Copy to clipboard as PNG" shortcut="Shift+Alt+C" onClick={handleCopyPNG} />
+          <MenuItem label="Copy to clipboard as SVG" onClick={handleCopySVG} />
+
+          <Separator />
+          <MenuItem label="Send backward" shortcut="Ctrl+[" onClick={() => handleLayerAction('sendBackward')} />
+          <MenuItem label="Bring forward" shortcut="Ctrl+]" onClick={() => handleLayerAction('bringForward')} />
+          <MenuItem label="Send to back" shortcut="Ctrl+Shift+[" onClick={() => handleLayerAction('sendToBack')} />
+          <MenuItem label="Bring to front" shortcut="Ctrl+Shift+]" onClick={() => handleLayerAction('bringToFront')} />
+
+          <Separator />
+          <MenuItem label="Flip horizontal" shortcut="Shift+H" onClick={() => handleFlip('h')} />
+          <MenuItem label="Flip vertical" shortcut="Shift+V" onClick={() => handleFlip('v')} />
+
+          <Separator />
+          <MenuItem label="Duplicate" shortcut="Ctrl+D" onClick={handleDuplicate} />
+          <MenuItem label="Delete" danger onClick={handleDeleteShape} />
+        </>
+      ) : (
+        /* ── Canvas context menu ── */
+        <>
+          <MenuItem label="Paste" shortcut="Ctrl+V" onClick={handlePaste} />
+          <MenuItem label="Copy to clipboard as PNG" shortcut="Shift+Alt+C" onClick={handleCopyPNG} />
+          <MenuItem label="Copy to clipboard as SVG" onClick={handleCopySVG} />
+
+          <Separator />
+          <MenuItem label="Select all" shortcut="Ctrl+A" onClick={handleSelectAll} />
+
+          <Separator />
+          <CheckMenuItem label="Toggle grid" shortcut="Ctrl+'" checked={gridEnabled} onClick={handleToggleGrid} />
+          <CheckMenuItem label="Snap to objects" shortcut="Alt+S" checked={snapToObjects} onClick={handleToggleSnap} />
+
+          <Separator />
+          <MenuItem label="Find on canvas" shortcut="Ctrl+F" onClick={() => { useUIStore.getState().toggleFindBar(); close() }} />
+          <MenuItem label="Zen mode" shortcut="Alt+Z" onClick={handleZenMode} />
+          <MenuItem label="View mode" shortcut="Alt+R" onClick={handleViewMode} />
+
+          <Separator />
+          <MenuItem label="Reset canvas" danger onClick={() => {
+            const serializer = window.__sceneSerializer
+            if (serializer?.resetCanvas) serializer.resetCanvas()
+            close()
+          }} />
+        </>
+      )}
+    </div>
+  )
+}