@elixpo/lixsketch 5.4.7 → 5.5.0

package/src/react/components/modals/CanvasPropertiesModal.jsx

@@ -0,0 +1,358 @@
+"use client"
+
+import { useState, useEffect } from 'react'
+import useUIStore from '../../store/useUIStore'
+import useSketchStore from '../../store/useSketchStore'
+import useAuthStore from '../../hooks/inertStores'
+import useCollabStore from '../../hooks/inertStores'
+import { useProfileStore } from '../../hooks/inertStores'
+import { getSessionID } from '../../hooks/inertStores'
+import { triggerDocCloudSync, persistLayoutMode } from '../../hooks/inertStores'
+
+function formatBytes(bytes) {
+  if (!bytes || bytes === 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
+}
+
+function InfoRow({ label, value, icon, color }) {
+  return (
+    <div className="flex items-center justify-between py-2 px-1">
+      <div className="flex items-center gap-2 text-text-dim text-xs">
+        <i className={`bx ${icon} text-sm ${color || 'text-text-muted'}`} />
+        {label}
+      </div>
+      <span className="text-text-secondary text-xs font-medium">{value}</span>
+    </div>
+  )
+}
+
+export default function CanvasPropertiesModal() {
+  const isOpen = useUIStore((s) => s.canvasPropertiesOpen)
+  const toggle = useUIStore((s) => s.toggleCanvasProperties)
+  const workspaceName = useUIStore((s) => s.workspaceName)
+  const saveStatus = useUIStore((s) => s.saveStatus)
+
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated)
+  const authUser = useAuthStore((s) => s.user)
+  const guestProfile = useProfileStore((s) => s.profile)
+
+  const collabConnected = useCollabStore((s) => s.connected)
+  const collabUsers = useCollabStore((s) => s.users)
+  const adminUserId = useCollabStore((s) => s.adminUserId)
+  const ws = useCollabStore((s) => s.ws)
+
+  const layoutMode = useSketchStore((s) => s.layoutMode)
+  const setLayoutMode = useSketchStore((s) => s.setLayoutMode)
+  const handleSetLayout = (mode) => {
+    if (mode === layoutMode) return
+    setLayoutMode(mode)
+    persistLayoutMode(mode)
+  }
+
+  // Determine if current user is admin
+  const myUserId = isAuthenticated ? authUser?.id : guestProfile?.id
+  const isAdmin = myUserId && adminUserId && myUserId === adminUserId
+
+  const handleKickUser = (userId) => {
+    if (!ws || ws.readyState !== WebSocket.OPEN) return
+    ws.send(JSON.stringify({ type: 'kick', userId }))
+  }
+
+  const [stats, setStats] = useState({
+    shapeCount: 0,
+    canvasSize: '0 x 0',
+    zoom: 1,
+    dataSize: '0 B',
+    sessionId: '',
+  })
+
+  useEffect(() => {
+    if (!isOpen) return
+
+    const shapes = window.shapes || []
+    const vb = window.svg?.viewBox?.baseVal
+    const zoom = window.currentZoom || 1
+    const sessionId = getSessionID() || ''
+
+    // Estimate canvas data size from localStorage (per-session key, fall
+    // back to the legacy single-key entry).
+    const sceneSavedKey = sessionId ? `lixsketch-autosave-${sessionId}` : 'lixsketch-autosave'
+    const sceneSaved = localStorage.getItem(sceneSavedKey) || localStorage.getItem('lixsketch-autosave')
+    const dataSize = sceneSaved ? new Blob([sceneSaved]).size : 0
+
+    // Doc stats: pulled from the doc-autosave localStorage buffer.
+    const docKey = sessionId ? `lixsketch-doc-autosave-${sessionId}` : 'lixsketch-doc-autosave'
+    const docMetaKey = sessionId ? `lixsketch-doc-autosave-meta-${sessionId}` : 'lixsketch-doc-autosave-meta'
+    const docSaved = localStorage.getItem(docKey)
+    let docBlockCount = 0
+    let docSize = 0
+    let docSavedAt = null
+    if (docSaved) {
+      docSize = new Blob([docSaved]).size
+      try {
+        const parsed = JSON.parse(docSaved)
+        if (Array.isArray(parsed?.blocks)) docBlockCount = parsed.blocks.length
+        if (parsed?.savedAt) docSavedAt = parsed.savedAt
+      } catch {}
+    }
+    let docCloudUpdatedAt = null
+    try {
+      const meta = JSON.parse(localStorage.getItem(docMetaKey) || '{}')
+      docCloudUpdatedAt = meta?.lastSeenUpdatedAt || null
+    } catch {}
+
+    // Count shape types
+    const typeCounts = {}
+    shapes.forEach(s => {
+      const name = s.shapeName || 'unknown'
+      typeCounts[name] = (typeCounts[name] || 0) + 1
+    })
+
+    setStats({
+      shapeCount: shapes.length,
+      canvasSize: vb ? `${Math.round(vb.width)} x ${Math.round(vb.height)}` : 'N/A',
+      zoom: Math.round(zoom * 100),
+      dataSize: formatBytes(dataSize),
+      sessionId,
+      typeCounts,
+      docBlockCount,
+      docSize: formatBytes(docSize),
+      docSavedAt,
+      docCloudUpdatedAt,
+    })
+  }, [isOpen])
+
+  useEffect(() => {
+    if (!isOpen) return
+    const handleKey = (e) => {
+      if (e.key === 'Escape') toggle()
+    }
+    document.addEventListener('keydown', handleKey)
+    return () => document.removeEventListener('keydown', handleKey)
+  }, [isOpen, toggle])
+
+  if (!isOpen) return null
+
+  const ownerName = isAuthenticated
+    ? (authUser?.displayName || authUser?.email || 'You')
+    : (guestProfile?.displayName || 'Guest')
+
+  const ownerType = isAuthenticated ? 'Authenticated' : 'Guest'
+
+  return (
+    <div
+      className="fixed inset-0 z-[9999] flex items-center justify-center font-[lixFont]"
+      onClick={toggle}
+    >
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
+
+      <div
+        className="relative bg-surface-card border border-border-light rounded-2xl w-[380px] mx-4 max-h-[85vh] overflow-y-auto docs-scroll"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 pt-4 pb-2">
+          <div className="flex items-center gap-2">
+            <i className="bx bx-info-circle text-lg text-accent-blue" />
+            <h2 className="text-text-primary text-sm font-medium">Canvas Properties</h2>
+          </div>
+          <button
+            onClick={toggle}
+            className="w-7 h-7 flex items-center justify-center rounded-lg text-text-muted hover:text-text-primary hover:bg-surface-hover cursor-pointer transition-all duration-200"
+          >
+            <i className="bx bx-x text-xl" />
+          </button>
+        </div>
+
+        <div className="px-5 pb-5 flex flex-col gap-3">
+          {/* Workspace Info */}
+          <div className="p-3 rounded-xl border border-border-light bg-surface/50">
+            <p className="text-text-dim text-[10px] uppercase tracking-wider mb-2">Workspace</p>
+            <InfoRow label="Name" value={workspaceName || 'Untitled'} icon="bx-rename" />
+            <InfoRow label="Owner" value={ownerName} icon="bx-user" />
+            <InfoRow label="Account" value={ownerType} icon="bx-shield" color={isAuthenticated ? 'text-green-400' : 'text-yellow-400'} />
+            <InfoRow
+              label="Session ID"
+              value={
+                <span className="font-mono text-[10px] text-text-dim max-w-[140px] truncate inline-block" title={stats.sessionId}>
+                  {stats.sessionId}
+                </span>
+              }
+              icon="bx-hash"
+            />
+          </div>
+
+          {/* Canvas Stats */}
+          <div className="p-3 rounded-xl border border-border-light bg-surface/50">
+            <p className="text-text-dim text-[10px] uppercase tracking-wider mb-2">Canvas</p>
+            <InfoRow label="Shapes" value={stats.shapeCount} icon="bx-shape-square" color="text-blue-400" />
+            <InfoRow label="Viewport" value={stats.canvasSize} icon="bx-expand" />
+            <InfoRow label="Zoom" value={`${stats.zoom}%`} icon="bx-zoom-in" />
+            <InfoRow label="Local data" value={stats.dataSize} icon="bx-data" />
+
+            {/* Shape breakdown */}
+            {stats.typeCounts && Object.keys(stats.typeCounts).length > 0 && (
+              <div className="mt-2 pt-2 border-t border-border-light">
+                <p className="text-text-dim text-[10px] uppercase tracking-wider mb-1.5">Shape Breakdown</p>
+                <div className="flex flex-wrap gap-1.5">
+                  {Object.entries(stats.typeCounts).map(([type, count]) => (
+                    <span
+                      key={type}
+                      className="px-2 py-0.5 rounded-md bg-surface text-text-muted text-[10px] border border-border-light"
+                    >
+                      {type}: {count}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Document */}
+          <div className="p-3 rounded-xl border border-border-light bg-surface/50">
+            <div className="flex items-center justify-between mb-2">
+              <p className="text-text-dim text-[10px] uppercase tracking-wider">Document</p>
+              <button
+                onClick={() => triggerDocCloudSync()}
+                title="Force sync the doc to cloud"
+                className="text-[10px] text-accent-blue hover:text-accent-blue-hover px-1.5 py-0.5 rounded hover:bg-accent-blue/10 cursor-pointer transition-all duration-200"
+              >
+                Sync now
+              </button>
+            </div>
+
+            {/* Layout mode pill toggle */}
+            <div className="flex items-center gap-1 bg-surface/60 border border-border-light rounded-lg p-0.5 mb-2">
+              {[
+                { key: 'canvas', icon: 'bx-pen', label: 'Canvas' },
+                { key: 'split', icon: 'bx-layout', label: 'Split' },
+                { key: 'docs', icon: 'bxs-notepad', label: 'Docs' },
+              ].map((m) => {
+                const active = layoutMode === m.key
+                return (
+                  <button
+                    key={m.key}
+                    onClick={() => handleSetLayout(m.key)}
+                    className={`flex-1 flex items-center justify-center gap-1 h-6 rounded-md text-[10.5px] transition-all duration-150 ${
+                      active
+                        ? 'bg-accent-blue text-text-primary'
+                        : 'text-text-muted hover:text-text-primary hover:bg-surface-hover'
+                    }`}
+                  >
+                    <i className={`bx ${m.icon} text-[11px]`} />
+                    {m.label}
+                  </button>
+                )
+              })}
+            </div>
+
+            <InfoRow label="Blocks" value={stats.docBlockCount || 0} icon="bx-list-ul" color="text-purple-400" />
+            <InfoRow label="Local size" value={stats.docSize || '0 B'} icon="bx-data" />
+            <InfoRow
+              label="Last local save"
+              value={
+                stats.docSavedAt
+                  ? new Date(stats.docSavedAt).toLocaleTimeString()
+                  : '—'
+              }
+              icon="bx-time"
+            />
+            <InfoRow
+              label="Last cloud sync"
+              value={
+                stats.docCloudUpdatedAt
+                  ? new Date(stats.docCloudUpdatedAt).toLocaleString()
+                  : '—'
+              }
+              icon="bx-cloud"
+              color={stats.docCloudUpdatedAt ? 'text-green-400' : 'text-text-muted'}
+            />
+          </div>
+
+          {/* Save & Sync Status */}
+          <div className="p-3 rounded-xl border border-border-light bg-surface/50">
+            <p className="text-text-dim text-[10px] uppercase tracking-wider mb-2">Sync Status</p>
+            <div className="flex items-center gap-2 py-1.5">
+              <span className={`w-2 h-2 rounded-full ${
+                saveStatus === 'cloud' ? 'bg-green-400' :
+                saveStatus === 'local' ? 'bg-yellow-400' :
+                'bg-text-dim'
+              }`} />
+              <span className="text-text-secondary text-xs">
+                {saveStatus === 'cloud' ? 'Synced to cloud' :
+                 saveStatus === 'local' ? 'Saved locally (pending cloud sync)' :
+                 'Not saved yet'}
+              </span>
+            </div>
+          </div>
+
+          {/* Collaboration Status */}
+          <div className="p-3 rounded-xl border border-border-light bg-surface/50">
+            <div className="flex items-center justify-between mb-2">
+              <p className="text-text-dim text-[10px] uppercase tracking-wider">Collaboration</p>
+              {collabConnected && collabUsers && (
+                <span className="text-text-dim text-[10px]">
+                  {collabUsers.length} participant{collabUsers.length !== 1 ? 's' : ''}
+                </span>
+              )}
+            </div>
+            {collabConnected ? (
+              <>
+                <div className="flex items-center gap-2 py-1.5">
+                  <span className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
+                  <span className="text-green-400 text-xs">Live session active</span>
+                  {isAdmin && (
+                    <span className="ml-auto px-1.5 py-0.5 rounded bg-accent-blue/15 text-accent-blue text-[9px]">Admin</span>
+                  )}
+                </div>
+                {collabUsers && collabUsers.length > 0 && (
+                  <div className="mt-2 flex flex-col gap-1">
+                    {collabUsers.map((user, i) => {
+                      const isMe = user.userId === myUserId
+                      const isUserAdmin = user.userId === adminUserId
+                      return (
+                        <div
+                          key={user.userId || i}
+                          className="flex items-center gap-2 px-2 py-1.5 rounded-lg bg-surface/80 border border-border-light"
+                        >
+                          <span
+                            className="w-2.5 h-2.5 rounded-full shrink-0"
+                            style={{ background: user.color || '#5B57D1' }}
+                          />
+                          <span className="text-text-secondary text-[11px] flex-1 truncate">
+                            {user.displayName || user.name || `User ${i + 1}`}
+                            {isMe && <span className="text-text-dim ml-1">(you)</span>}
+                          </span>
+                          {isUserAdmin && (
+                            <span className="text-[9px] text-accent-blue px-1 py-0.5 rounded bg-accent-blue/10">admin</span>
+                          )}
+                          {isAdmin && !isMe && (
+                            <button
+                              onClick={() => handleKickUser(user.userId)}
+                              className="text-red-400/60 hover:text-red-400 text-[10px] px-1.5 py-0.5 rounded hover:bg-red-500/10 transition-all duration-200 cursor-pointer"
+                              title={`Remove ${user.displayName || 'user'} from session`}
+                            >
+                              <i className="bx bx-x text-sm" />
+                            </button>
+                          )}
+                        </div>
+                      )
+                    })}
+                  </div>
+                )}
+              </>
+            ) : (
+              <div className="flex items-center gap-2 py-1.5">
+                <span className="w-2 h-2 rounded-full bg-text-dim" />
+                <span className="text-text-dim text-xs">No active session</span>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/react/components/modals/CommandPalette.jsx

@@ -0,0 +1,307 @@
+"use client"
+
+import { useState, useEffect, useRef } from 'react'
+import useUIStore from '../../store/useUIStore'
+import useSketchStore, { TOOLS } from '../../store/useSketchStore'
+
+const COMMANDS = [
+  // --- App ---
+  { label: 'Library', icon: 'bx-library', section: 'App' },
+  { label: 'Find on canvas', icon: 'bx-search', section: 'App', shortcut: 'Ctrl+F', action: 'findOnCanvas' },
+  { label: 'Live collaboration...', icon: 'bx-group', section: 'App' },
+  { label: 'Share', icon: 'bx-share-alt', section: 'App' },
+  { label: 'Toggle theme', icon: 'bx-sun', section: 'App', action: 'toggleTheme' },
+
+  // --- Export ---
+  { label: 'Export image...', icon: 'bx-image', section: 'Export', shortcut: 'Ctrl+Shift+E', action: 'exportImage' },
+  { label: 'Save to disk', icon: 'bx-download', section: 'Export', shortcut: 'Ctrl+S', action: 'save' },
+  { label: 'Copy to clipboard as PNG', icon: 'bx-clipboard', section: 'Export', shortcut: 'Shift+Alt+C', action: 'copyPNG' },
+  { label: 'Copy to clipboard as SVG', icon: 'bx-code-alt', section: 'Export', shortcut: null, action: 'copySVG' },
+  { label: 'Open scene file', icon: 'bx-folder-open', section: 'Export', shortcut: 'Ctrl+O', action: 'load' },
+
+  // --- Editor ---
+  { label: 'Undo', icon: 'bx-undo', section: 'Editor', action: 'undo' },
+  { label: 'Redo', icon: 'bx-redo', section: 'Editor', action: 'redo' },
+  { label: 'Zoom in', icon: 'bx-plus', section: 'Editor', shortcut: 'Ctrl++' },
+  { label: 'Zoom out', icon: 'bx-minus', section: 'Editor', shortcut: 'Ctrl+-' },
+  { label: 'Reset zoom', icon: 'bx-reset', section: 'Editor', shortcut: 'Ctrl+0' },
+  { label: 'Zoom to fit all elements', icon: 'bx-fullscreen', section: 'Editor', shortcut: 'Shift+1' },
+  { label: 'Toggle grid', icon: 'bx-grid-alt', section: 'Editor', shortcut: "Ctrl+'", action: 'toggleGrid' },
+  { label: 'Shortcuts & help', icon: 'bx-help-circle', section: 'Editor', shortcut: '?', action: 'help' },
+  { label: 'Select all', icon: 'bx-select-multiple', section: 'Editor', shortcut: 'Ctrl+A', action: 'selectAll' },
+  { label: 'Reset canvas', icon: 'bx-trash', section: 'Editor', shortcut: 'Ctrl+Delete', action: 'resetCanvas' },
+  { label: 'Canvas background', icon: 'bx-palette', section: 'Editor', action: 'openMenu' },
+
+  // --- Tools ---
+  { label: 'Hand (panning tool)', icon: 'bx-hand', section: 'Tools', shortcut: 'H', action: 'tool:pan' },
+  { label: 'Selection', icon: 'bx-pointer', section: 'Tools', shortcut: 'V', action: 'tool:select' },
+  { label: 'Rectangle', icon: 'bx-rectangle', section: 'Tools', shortcut: 'R', action: 'tool:rectangle' },
+  { label: 'Diamond', icon: 'bx-diamond', section: 'Tools', shortcut: 'D', action: 'tool:diamond' },
+  { label: 'Circle', icon: 'bx-circle', section: 'Tools', shortcut: 'O', action: 'tool:circle' },
+  { label: 'Arrow', icon: 'bx-right-arrow-alt', section: 'Tools', shortcut: 'A', action: 'tool:arrow' },
+  { label: 'Line', icon: 'bx-minus', section: 'Tools', shortcut: 'L', action: 'tool:line' },
+  { label: 'Draw', icon: 'bx-pencil', section: 'Tools', shortcut: 'P', action: 'tool:freehand' },
+  { label: 'Text', icon: 'bx-text', section: 'Tools', shortcut: 'T', action: 'tool:text' },
+  { label: 'Insert image', icon: 'bx-image-add', section: 'Tools', shortcut: '9', action: 'tool:image' },
+  { label: 'Eraser', icon: 'bx-eraser', section: 'Tools', shortcut: 'E', action: 'tool:eraser' },
+  { label: 'Laser pointer', icon: 'bxs-magic-wand', section: 'Tools', shortcut: 'K', action: 'tool:laser' },
+  { label: 'Frame tool', icon: 'bx-border-all', section: 'Tools', shortcut: 'F', action: 'tool:frame' },
+  // AI entries removed — feature is hidden behind a coming-soon screen.
+  // Restore "Text to diagram..." / "Mermaid to diagram..." here when the
+  // assistant ships.
+
+  // --- Links ---
+  { label: 'GitHub', icon: 'bxl-github', section: 'Links', action: 'link:github' },
+  { label: 'Report an issue', icon: 'bx-bug', section: 'Links', action: 'link:issues' },
+]
+
+const TOOL_ACTION_MAP = {
+  'tool:pan': TOOLS.PAN,
+  'tool:select': TOOLS.SELECT,
+  'tool:rectangle': TOOLS.RECTANGLE,
+  'tool:diamond': TOOLS.RECTANGLE, // diamond is a rectangle variant
+  'tool:circle': TOOLS.CIRCLE,
+  'tool:arrow': TOOLS.ARROW,
+  'tool:line': TOOLS.LINE,
+  'tool:freehand': TOOLS.FREEHAND,
+  'tool:text': TOOLS.TEXT,
+  'tool:image': TOOLS.IMAGE,
+  'tool:eraser': TOOLS.ERASER,
+  'tool:laser': TOOLS.LASER,
+  'tool:frame': TOOLS.FRAME,
+}
+
+export default function CommandPalette() {
+  const open = useUIStore((s) => s.commandPaletteOpen)
+  const toggleCommandPalette = useUIStore((s) => s.toggleCommandPalette)
+  const [query, setQuery] = useState('')
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const inputRef = useRef(null)
+  const listRef = useRef(null)
+
+  useEffect(() => {
+    if (open) {
+      setQuery('')
+      setSelectedIndex(0)
+      setTimeout(() => inputRef.current?.focus(), 50)
+    }
+  }, [open])
+
+  // Scroll selected item into view
+  useEffect(() => {
+    if (!open) return
+    const el = listRef.current?.querySelector(`[data-index="${selectedIndex}"]`)
+    if (el) el.scrollIntoView({ block: 'nearest' })
+  }, [selectedIndex, open])
+
+  // Reset selection on query change
+  useEffect(() => {
+    setSelectedIndex(0)
+  }, [query])
+
+  if (!open) return null
+
+  const filtered = query
+    ? COMMANDS.filter((c) =>
+        c.label.toLowerCase().includes(query.toLowerCase())
+      )
+    : COMMANDS
+
+  // Group into sections preserving order
+  const sectionOrder = []
+  const sections = {}
+  filtered.forEach((c) => {
+    if (!sections[c.section]) {
+      sections[c.section] = []
+      sectionOrder.push(c.section)
+    }
+    sections[c.section].push(c)
+  })
+
+  const handleCommand = (cmd) => {
+    toggleCommandPalette()
+    const action = cmd.action
+
+    if (!action) return
+
+    // Tool switching
+    if (action.startsWith('tool:')) {
+      const tool = TOOL_ACTION_MAP[action]
+      if (tool) useSketchStore.getState().setActiveTool(tool)
+      return
+    }
+
+    // Links
+    if (action === 'link:github') {
+      window.open('https://github.com/elixpo/sketch.elixpo', '_blank')
+      return
+    }
+    if (action === 'link:issues') {
+      window.open('https://github.com/elixpo/sketch.elixpo/issues', '_blank')
+      return
+    }
+
+    const serializer = window.__sceneSerializer
+
+    switch (action) {
+      case 'toggleTheme': {
+        const store = useUIStore.getState()
+        store.setTheme(store.theme === 'dark' ? 'light' : 'dark')
+        break
+      }
+      case 'toggleGrid':
+        useSketchStore.getState().toggleGrid()
+        break
+      case 'save': {
+        const name = useUIStore.getState().workspaceName || 'Untitled'
+        serializer?.download(name)
+        break
+      }
+      case 'load':
+        serializer?.upload()
+        break
+      case 'exportImage':
+        useUIStore.getState().toggleExportImageModal()
+        break
+      case 'copyPNG':
+        serializer?.copyAsPNG()
+        break
+      case 'copySVG':
+        serializer?.copyAsSVG()
+        break
+      case 'undo':
+        if (typeof window.undo === 'function') window.undo()
+        break
+      case 'redo':
+        if (typeof window.redo === 'function') window.redo()
+        break
+      case 'selectAll':
+        useSketchStore.getState().setActiveTool(TOOLS.SELECT)
+        if (window.multiSelection && window.shapes) {
+          window.multiSelection.clearSelection()
+          window.shapes.forEach(shape => window.multiSelection.addShape(shape))
+        }
+        break
+      case 'resetCanvas': {
+        const serializer = window.__sceneSerializer
+        if (serializer?.resetCanvas) {
+          serializer.resetCanvas()
+        }
+        useSketchStore.getState().clearShapes()
+        useSketchStore.getState().clearHistory()
+        break
+      }
+      case 'findOnCanvas':
+        useUIStore.getState().toggleFindBar()
+        break
+      case 'help':
+        useUIStore.getState().toggleHelpModal()
+        break
+      case 'aiModal':
+        useUIStore.getState().toggleAIModal()
+        break
+      case 'openMenu':
+        useUIStore.getState().toggleMenu()
+        break
+    }
+  }
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Escape') {
+      toggleCommandPalette()
+      return
+    }
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setSelectedIndex((i) => Math.min(i + 1, filtered.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setSelectedIndex((i) => Math.max(i - 1, 0))
+    } else if (e.key === 'Enter' && filtered[selectedIndex]) {
+      e.preventDefault()
+      handleCommand(filtered[selectedIndex])
+    }
+  }
+
+  let flatIndex = -1
+
+  return (
+    <div
+      className="fixed inset-0 z-[9999] flex items-start justify-center pt-[12vh] font-[lixFont]"
+      onClick={toggleCommandPalette}
+    >
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
+
+      <div
+        className="relative bg-surface-card border border-border-light rounded-2xl w-full max-w-[540px] mx-4 overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Search */}
+        <div className="flex items-center gap-3 px-4 py-3 border-b border-border-light">
+          <i className="bx bx-search text-text-muted text-lg" />
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search commands..."
+            className="flex-1 bg-transparent text-text-primary text-sm outline-none placeholder:text-text-dim font-[lixFont]"
+            onKeyDown={handleKeyDown}
+          />
+        </div>
+
+        {/* Results */}
+        <div ref={listRef} className="max-h-[55vh] overflow-y-auto no-scrollbar py-2">
+          {filtered.length === 0 && (
+            <div className="px-4 py-6 text-center text-text-dim text-xs">
+              No commands found
+            </div>
+          )}
+
+          {sectionOrder.map((section) => (
+            <div key={section}>
+              <div className="px-4 pt-3 pb-1">
+                <span className="text-text-dim text-xs uppercase tracking-wider">
+                  {section}
+                </span>
+              </div>
+              {sections[section].map((cmd) => {
+                flatIndex++
+                const idx = flatIndex
+                return (
+                  <button
+                    key={cmd.label}
+                    data-index={idx}
+                    onClick={() => handleCommand(cmd)}
+                    className={`w-full flex items-center justify-between px-4 py-2 text-text-secondary text-xs transition-all duration-100 ${
+                      idx === selectedIndex
+                        ? 'bg-surface-hover text-text-primary'
+                        : 'hover:bg-surface-hover/60'
+                    }`}
+                  >
+                    <span className="flex items-center gap-3">
+                      <i className={`bx ${cmd.icon} text-base text-text-muted`} />
+                      {cmd.label}
+                    </span>
+                    {cmd.shortcut && (
+                      <div className="flex items-center gap-0.5">
+                        {cmd.shortcut.split('+').map((key, i) => (
+                          <span key={i}>
+                            {i > 0 && <span className="text-text-dim text-xs mx-0.5">+</span>}
+                            <kbd className="px-1.5 py-0.5 bg-surface-dark rounded text-text-dim text-xs border border-border">
+                              {key.trim()}
+                            </kbd>
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                  </button>
+                )
+              })}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}