@elixpo/lixsketch 5.4.7 → 5.5.0

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

@@ -0,0 +1,177 @@
+"use client"
+
+import { useState, useEffect, useRef, useCallback } from 'react'
+import useUIStore from '../../store/useUIStore'
+
+export default function FindBar() {
+  const open = useUIStore((s) => s.findBarOpen)
+  const closeFindBar = useUIStore((s) => s.closeFindBar)
+  const [query, setQuery] = useState('')
+  const [results, setResults] = useState([])
+  const [activeIndex, setActiveIndex] = useState(-1)
+  const inputRef = useRef(null)
+  const highlightRef = useRef(null)
+
+  useEffect(() => {
+    if (open) {
+      setQuery('')
+      setResults([])
+      setActiveIndex(-1)
+      setTimeout(() => inputRef.current?.focus(), 50)
+    } else {
+      // Clean up highlight when closing
+      removeHighlight()
+    }
+  }, [open])
+
+  const removeHighlight = useCallback(() => {
+    if (highlightRef.current && highlightRef.current.parentNode) {
+      highlightRef.current.parentNode.removeChild(highlightRef.current)
+      highlightRef.current = null
+    }
+  }, [])
+
+  const highlightShape = useCallback((result) => {
+    removeHighlight()
+    if (!result || !window.svg) return
+
+    const shape = result.shape
+    const x = shape.x || 0
+    const y = shape.y || 0
+    const w = shape.width || 100
+    const h = shape.height || 30
+
+    // Create highlight rect
+    const ns = 'http://www.w3.org/2000/svg'
+    const rect = document.createElementNS(ns, 'rect')
+    rect.setAttribute('x', x - 4)
+    rect.setAttribute('y', y - 4)
+    rect.setAttribute('width', w + 8)
+    rect.setAttribute('height', h + 8)
+    rect.setAttribute('fill', 'rgba(91, 87, 209, 0.15)')
+    rect.setAttribute('stroke', '#5B57D1')
+    rect.setAttribute('stroke-width', '2')
+    rect.setAttribute('stroke-dasharray', '4,2')
+    rect.setAttribute('rx', '4')
+    rect.setAttribute('pointer-events', 'none')
+    rect.classList.add('find-highlight')
+    window.svg.appendChild(rect)
+    highlightRef.current = rect
+
+    // Pan to the shape
+    const svgEl = window.svg
+    const vb = svgEl.viewBox.baseVal
+    const centerX = x + w / 2
+    const centerY = y + h / 2
+    const newX = centerX - vb.width / 2
+    const newY = centerY - vb.height / 2
+    svgEl.setAttribute('viewBox', `${newX} ${newY} ${vb.width} ${vb.height}`)
+    if (window.currentViewBox) {
+      window.currentViewBox.x = newX
+      window.currentViewBox.y = newY
+    }
+  }, [removeHighlight])
+
+  const doSearch = useCallback((q) => {
+    const finder = window.__sceneSerializer?.findText
+    if (!finder || !q.trim()) {
+      setResults([])
+      setActiveIndex(-1)
+      removeHighlight()
+      return
+    }
+    const found = finder(q)
+    setResults(found)
+    if (found.length > 0) {
+      setActiveIndex(0)
+      highlightShape(found[0])
+    } else {
+      setActiveIndex(-1)
+      removeHighlight()
+    }
+  }, [highlightShape, removeHighlight])
+
+  const goToResult = useCallback((idx) => {
+    if (idx < 0 || idx >= results.length) return
+    setActiveIndex(idx)
+    highlightShape(results[idx])
+  }, [results, highlightShape])
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Escape') {
+      closeFindBar()
+      return
+    }
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      if (results.length === 0) {
+        doSearch(query)
+      } else {
+        // Go to next result
+        const next = (activeIndex + 1) % results.length
+        goToResult(next)
+      }
+      return
+    }
+  }
+
+  const handleChange = (e) => {
+    const q = e.target.value
+    setQuery(q)
+    doSearch(q)
+  }
+
+  if (!open) return null
+
+  return (
+    <div className="fixed top-14 right-4 z-[1000] font-[lixFont]">
+      <div className="flex items-center gap-2 bg-surface-card/95 backdrop-blur-lg border border-border-light rounded-xl px-3 py-2 shadow-xl min-w-[300px]">
+        <i className="bx bx-search text-text-muted text-sm" />
+        <input
+          ref={inputRef}
+          type="text"
+          value={query}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          placeholder="Find text on canvas..."
+          className="flex-1 bg-transparent text-text-primary text-xs outline-none placeholder:text-text-dim font-[lixFont]"
+        />
+
+        {results.length > 0 && (
+          <span className="text-text-dim text-xs whitespace-nowrap">
+            {activeIndex + 1}/{results.length}
+          </span>
+        )}
+        {query && results.length === 0 && (
+          <span className="text-red-400/70 text-xs whitespace-nowrap">
+            No results
+          </span>
+        )}
+
+        {results.length > 1 && (
+          <div className="flex items-center gap-0.5">
+            <button
+              onClick={() => goToResult((activeIndex - 1 + results.length) % results.length)}
+              className="w-5 h-5 flex items-center justify-center rounded text-text-muted hover:text-white hover:bg-white/10 transition-colors"
+            >
+              <i className="bx bx-chevron-up text-sm" />
+            </button>
+            <button
+              onClick={() => goToResult((activeIndex + 1) % results.length)}
+              className="w-5 h-5 flex items-center justify-center rounded text-text-muted hover:text-white hover:bg-white/10 transition-colors"
+            >
+              <i className="bx bx-chevron-down text-sm" />
+            </button>
+          </div>
+        )}
+
+        <button
+          onClick={closeFindBar}
+          className="w-5 h-5 flex items-center justify-center rounded text-text-muted hover:text-white hover:bg-white/10 transition-colors"
+        >
+          <i className="bx bx-x text-sm" />
+        </button>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,133 @@
+"use client"
+
+import { useState, useEffect, useCallback, useRef } from 'react'
+import useUIStore from '../../store/useUIStore'
+import useSketchStore from '../../store/useSketchStore'
+
+export default function ImageSourcePicker() {
+  const ref = useRef(null)
+  const toggleImageGenerateModal = useUIStore((s) => s.toggleImageGenerateModal)
+  const activeTool = useSketchStore((s) => s.activeTool)
+  const setActiveTool = useSketchStore((s) => s.setActiveTool)
+
+  // Derive visibility directly from Zustand — no intermediate state
+  const visible = activeTool === 'image'
+
+  const handleGenerateAI = useCallback(() => {
+    setActiveTool('select')
+    toggleImageGenerateModal()
+  }, [setActiveTool, toggleImageGenerateModal])
+
+  const handleUpload = useCallback(() => {
+    setActiveTool('select')
+    if (window.openImageFilePicker) {
+      window.openImageFilePicker()
+    }
+  }, [setActiveTool])
+
+  // Keep the global bridge for engine calls
+  useEffect(() => {
+    window.__showImageSourcePicker = () => {
+      // The picker now shows automatically via Zustand activeTool,
+      // but keep this bridge so the engine call doesn't error
+    }
+    return () => {
+      delete window.__showImageSourcePicker
+    }
+  }, [])
+
+  // Close on outside click & keybinds
+  useEffect(() => {
+    if (!visible) return
+
+    const handleClick = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setActiveTool('select')
+      }
+    }
+
+    const handleKeyDown = (e) => {
+      if (e.key === 'Escape') {
+        setActiveTool('select')
+      }
+      if (e.key === 'g' || e.key === 'G') {
+        e.preventDefault()
+        e.stopPropagation()
+        handleGenerateAI()
+      }
+      if (e.key === 'u' || e.key === 'U') {
+        e.preventDefault()
+        e.stopPropagation()
+        handleUpload()
+      }
+    }
+
+    // Delay to avoid catching the click that opened it
+    const timer = setTimeout(() => {
+      document.addEventListener('mousedown', handleClick)
+      document.addEventListener('keydown', handleKeyDown, true)
+    }, 100)
+    return () => {
+      clearTimeout(timer)
+      document.removeEventListener('mousedown', handleClick)
+      document.removeEventListener('keydown', handleKeyDown, true)
+    }
+  }, [visible, setActiveTool, handleGenerateAI, handleUpload])
+
+  if (!visible) return null
+
+  // Compute position on each render when visible
+  let posX = 65
+  let posY = typeof window !== 'undefined' ? window.innerHeight / 2 - 50 : 300
+  if (typeof document !== 'undefined') {
+    const imageBtn = document.querySelector('button[title="Image (9)"]')
+    if (imageBtn) {
+      const rect = imageBtn.getBoundingClientRect()
+      posX = rect.right + 10
+      posY = rect.top - 10
+    }
+  }
+
+  return (
+    <div
+      ref={ref}
+      className="fixed z-[1100] font-[lixFont]"
+      style={{ left: posX, top: posY }}
+    >
+      <div className="bg-surface-card border border-border-light rounded-xl p-1.5 shadow-2xl shadow-black/40 flex flex-col gap-1 min-w-[200px]">
+        <button
+          onClick={handleGenerateAI}
+          className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted hover:text-accent-blue hover:bg-surface-hover transition-all group"
+        >
+          <div className="w-8 h-8 rounded-lg bg-accent-blue/10 flex items-center justify-center group-hover:bg-accent-blue/20 transition-all">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-accent-blue">
+              <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>
+          </div>
+          <div className="flex-1 text-left">
+            <div className="text-sm font-medium">Generate with AI</div>
+            <div className="text-[10px] text-text-dim">10 generations &middot; 5 edits free</div>
+          </div>
+          <kbd className="text-[10px] text-text-dim bg-surface-dark px-1.5 py-0.5 rounded">G</kbd>
+        </button>
+
+        <div className="h-px bg-white/[0.06] mx-2" />
+
+        <button
+          onClick={handleUpload}
+          className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted hover:text-text-primary hover:bg-surface-hover transition-all group"
+        >
+          <div className="w-8 h-8 rounded-lg bg-surface-hover flex items-center justify-center group-hover:bg-surface-active transition-all">
+            <i className="bx bx-upload text-lg" />
+          </div>
+          <div className="flex-1 text-left">
+            <div className="text-sm font-medium">Upload from device</div>
+            <div className="text-[10px] text-text-dim">PNG, JPG, SVG, WebP</div>
+          </div>
+          <kbd className="text-[10px] text-text-dim bg-surface-dark px-1.5 py-0.5 rounded">U</kbd>
+        </button>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,120 @@
+"use client"
+
+import { useState, useEffect } from 'react'
+import { showToast } from '../../utils/toast'
+
+export default function MultiSelectActions() {
+  const [count, setCount] = useState(0)
+  const [groupState, setGroupState] = useState('none') // 'none' | 'partial' | 'all'
+
+  useEffect(() => {
+    // Poll multi-selection state. Cheap — Set size + a single
+    // groupId pass over selectedShapes.
+    const interval = setInterval(() => {
+      const ms = window.multiSelection
+      const sel = ms?.selectedShapes
+      const n = sel ? sel.size : 0
+      setCount((prev) => (prev !== n ? n : prev))
+
+      if (n < 2) {
+        setGroupState('none')
+        return
+      }
+      let withId = 0
+      let groupIds = new Set()
+      sel.forEach((s) => {
+        if (s.groupId) {
+          withId++
+          groupIds.add(s.groupId)
+        }
+      })
+      // "all" = every shape has a groupId AND they all share the same one
+      if (withId === n && groupIds.size === 1) setGroupState('all')
+      else if (withId > 0) setGroupState('partial')
+      else setGroupState('none')
+    }, 200)
+    return () => clearInterval(interval)
+  }, [])
+
+  if (count < 2) return null
+
+  const handleFrame = () => {
+    if (window.frameSelectedShapes) {
+      window.frameSelectedShapes()
+      setCount(0)
+    }
+  }
+
+  const handleGroup = () => {
+    const ms = window.multiSelection
+    const sel = ms?.selectedShapes
+    if (!sel || sel.size < 2) return
+    const newId = `g-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 7)}`
+    sel.forEach((s) => { s.groupId = newId })
+    if (typeof ms.updateControls === 'function') ms.updateControls()
+    showToast(`Grouped ${sel.size} shapes`, { tone: 'success' })
+  }
+
+  const handleUngroup = () => {
+    const ms = window.multiSelection
+    const sel = ms?.selectedShapes
+    if (!sel || sel.size === 0) return
+    const groupIds = new Set()
+    sel.forEach((s) => { if (s.groupId) groupIds.add(s.groupId) })
+    if (groupIds.size === 0 || !Array.isArray(window.shapes)) return
+    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' })
+  }
+
+  const grouped = groupState === 'all'
+
+  return (
+    <div className="absolute top-14 left-1/2 -translate-x-1/2 z-[1000] font-[lixFont]">
+      <div className="flex items-center gap-2 bg-surface/90 backdrop-blur-lg border border-border-light rounded-xl px-3 py-1.5 shadow-lg">
+        <span className="text-text-muted text-xs">
+          {count} selected{grouped && <span className="ml-1 text-accent-blue">· grouped</span>}
+        </span>
+        <div className="w-px h-4 bg-border-light" />
+
+        {/* Frame is only useful when shapes aren't already grouped — a
+            grouped set is conceptually a "frameless frame" already. */}
+        {!grouped && (
+          <button
+            onClick={handleFrame}
+            className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs text-accent-blue hover:bg-accent-blue/10 transition-all duration-150"
+            title="Wrap selection in a frame"
+          >
+            <i className="bx bx-crop text-sm" />
+            Frame it
+          </button>
+        )}
+
+        {/* Group / Ungroup toggle. Group is shown when nothing in the
+            selection is grouped yet; Ungroup once they're a single group. */}
+        {grouped ? (
+          <button
+            onClick={handleUngroup}
+            className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs text-yellow-400 hover:bg-yellow-500/10 transition-all duration-150"
+            title="Ungroup (Ctrl+Shift+G)"
+          >
+            <i className="bx bx-unlink text-sm" />
+            Ungroup
+          </button>
+        ) : (
+          <button
+            onClick={handleGroup}
+            className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs text-text-secondary hover:bg-surface-hover transition-all duration-150"
+            title="Group (Ctrl+G)"
+          >
+            <i className="bx bx-link text-sm" />
+            Group
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,145 @@
+"use client"
+
+import { useRef, useState, useEffect } from 'react'
+import useSketchStore, { TOOLS } from '../../store/useSketchStore'
+import useSketchEngine from '../../hooks/useSketchEngine'
+
+const GRID_SIZE = 20
+
+export default function SVGCanvas() {
+  const [svgReady, setSvgReady] = useState(false)
+  const svgRef = useRef(null)
+  const canvasBackground = useSketchStore((s) => s.canvasBackground)
+  const gridEnabled = useSketchStore((s) => s.gridEnabled)
+  const getCursor = useSketchStore((s) => s.getCursor)
+  const cursor = getCursor()
+
+  // viewBox is owned imperatively by the lixsketch engine (zoom/pan call
+  // svg.setAttribute('viewBox', …) directly). React must NOT re-render
+  // the viewBox prop or it'll snap back over engine writes — which is
+  // what was causing zoom deformity and the pan-release jump in split
+  // mode. The initial value is set in the effect below; React never
+  // rewrites it after that.
+  useEffect(() => {
+    const applyImperative = (w, h) => {
+      const zoom = window.currentZoom || 1
+      const cv = window.currentViewBox || { x: 0, y: 0 }
+      const vbW = w / zoom
+      const vbH = h / zoom
+      const x = cv.x || 0
+      const y = cv.y || 0
+      window.currentViewBox = { x, y, width: vbW, height: vbH }
+      const el = svgRef.current
+      if (el) el.setAttribute('viewBox', `${x} ${y} ${vbW} ${vbH}`)
+    }
+
+    const sync = () => {
+      const el = svgRef.current
+      if (!el) return
+      const rect = el.getBoundingClientRect()
+      const w = Math.max(1, Math.round(rect.width))
+      const h = Math.max(1, Math.round(rect.height))
+      applyImperative(w, h)
+    }
+
+    sync()
+    setSvgReady(true)
+
+    window.addEventListener('resize', sync)
+
+    let ro
+    if (typeof ResizeObserver !== 'undefined' && svgRef.current) {
+      ro = new ResizeObserver(sync)
+      ro.observe(svgRef.current)
+    }
+
+    return () => {
+      window.removeEventListener('resize', sync)
+      if (ro) ro.disconnect()
+    }
+  }, [])
+
+  // Close icon sidebar when clicking on canvas without an icon ready to place
+  useEffect(() => {
+    const svg = svgRef.current
+    if (!svg) return
+
+    const handleCanvasClick = () => {
+      const activeTool = useSketchStore.getState().activeTool
+      // If icon tool is active but no icon is queued for placement, close the sidebar
+      if (activeTool === TOOLS.ICON && !window.isIconToolActive) {
+        useSketchStore.getState().setActiveTool(TOOLS.SELECT)
+      }
+    }
+
+    svg.addEventListener('pointerdown', handleCanvasClick)
+    return () => svg.removeEventListener('pointerdown', handleCanvasClick)
+  }, [svgReady])
+
+  // Initialize the imperative sketch engine on this SVG element
+  useSketchEngine(svgRef, svgReady)
+
+  // Expose grid state to engine
+  useEffect(() => {
+    window.__gridEnabled = gridEnabled
+  }, [gridEnabled])
+
+  return (
+    <svg
+      id="freehand-canvas"
+      ref={svgRef}
+      className="absolute inset-0 w-full h-full"
+      style={{
+        background: canvasBackground,
+        cursor,
+        userSelect: 'none',
+        WebkitUserSelect: 'none',
+        touchAction: 'none',
+      }}
+      preserveAspectRatio="none"
+      suppressHydrationWarning
+    >
+      {gridEnabled && (
+        <defs>
+          <pattern
+            id="grid-small"
+            width={GRID_SIZE}
+            height={GRID_SIZE}
+            patternUnits="userSpaceOnUse"
+          >
+            <path
+              d={`M ${GRID_SIZE} 0 L 0 0 0 ${GRID_SIZE}`}
+              fill="none"
+              stroke="rgba(255,255,255,0.06)"
+              strokeWidth="0.5"
+            />
+          </pattern>
+          <pattern
+            id="grid-large"
+            width={GRID_SIZE * 5}
+            height={GRID_SIZE * 5}
+            patternUnits="userSpaceOnUse"
+          >
+            <rect width={GRID_SIZE * 5} height={GRID_SIZE * 5} fill="url(#grid-small)" />
+            <path
+              d={`M ${GRID_SIZE * 5} 0 L 0 0 0 ${GRID_SIZE * 5}`}
+              fill="none"
+              stroke="rgba(255,255,255,0.12)"
+              strokeWidth="0.8"
+            />
+          </pattern>
+        </defs>
+      )}
+      {gridEnabled && (
+        <rect
+          x="-100000"
+          y="-100000"
+          width="200000"
+          height="200000"
+          fill="url(#grid-large)"
+          style={{ pointerEvents: 'none' }}
+        />
+      )}
+    </svg>
+  )
+}

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

@@ -0,0 +1,29 @@
+'use client'
+
+import useUIStore from '../../store/useUIStore'
+
+const STATUS_CONFIG = {
+  cloud: { color: 'bg-green-400', label: 'Synced to cloud' },
+  local: { color: 'bg-yellow-400', label: 'Saved locally' },
+  failed: { color: 'bg-red-400', label: 'Sync failed' },
+}
+
+export default function SaveStatusIndicator() {
+  const saveStatus = useUIStore((s) => s.saveStatus)
+
+  if (saveStatus === 'idle') return null
+
+  const config = STATUS_CONFIG[saveStatus]
+  if (!config) return null
+
+  return (
+    <div className="fixed bottom-3 left-1/2 -translate-x-1/2 z-[999] flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-card/80 backdrop-blur-md border border-border-light font-[lixFont] pointer-events-none select-none">
+      <span
+        className={`w-2 h-2 rounded-full shrink-0 ${config.color}`}
+      />
+      <span className="text-text-dim text-[10px] tracking-wide">
+        {config.label}
+      </span>
+    </div>
+  )
+}