@elixpo/lixsketch 5.4.7 → 5.5.1

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

@@ -0,0 +1,287 @@
+"use client"
+
+import { useState, useEffect, useRef, useCallback } from 'react'
+import useUIStore from '../../store/useUIStore'
+
+const SCALES = [1, 2, 3]
+
+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'
+  ).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
+  })
+}
+
+export default function ExportImageModal() {
+  const open = useUIStore((s) => s.exportImageModalOpen)
+  const toggleModal = useUIStore((s) => s.toggleExportImageModal)
+
+  const [scale, setScale] = useState(2)
+  const [bgMode, setBgMode] = useState('dark') // 'dark' | 'light' | 'none'
+  const [previewUrl, setPreviewUrl] = useState(null)
+  const previewRef = useRef(null)
+
+  const getBgColor = useCallback(() => {
+    if (bgMode === 'dark') return '#121212'
+    if (bgMode === 'light') return '#ffffff'
+    return null // transparent
+  }, [bgMode])
+
+  // Generate preview whenever settings change
+  useEffect(() => {
+    if (!open) return
+    let cancelled = false
+
+    const generate = async () => {
+      const clone = getCleanSVG()
+      if (!clone) return
+      // Preview at 1x for speed
+      const canvas = await renderToCanvas(clone, 1, getBgColor())
+      if (cancelled || !canvas) return
+      setPreviewUrl(canvas.toDataURL('image/png'))
+    }
+    generate()
+
+    return () => { cancelled = true }
+  }, [open, bgMode, getBgColor])
+
+  if (!open) return null
+
+  const handleExportPNG = async () => {
+    const clone = getCleanSVG()
+    if (!clone) return
+    const canvas = await renderToCanvas(clone, scale, getBgColor())
+    if (!canvas) return
+
+    canvas.toBlob((blob) => {
+      const a = document.createElement('a')
+      a.href = URL.createObjectURL(blob)
+      a.download = `lixsketch-export-${scale}x.png`
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+    }, 'image/png')
+    toggleModal()
+  }
+
+  const handleExportSVG = () => {
+    const clone = getCleanSVG()
+    if (!clone) return
+    // Apply background as a rect if needed
+    const bg = getBgColor()
+    if (bg) {
+      const ns = 'http://www.w3.org/2000/svg'
+      const rect = document.createElementNS(ns, 'rect')
+      const vb = window.svg.viewBox.baseVal
+      rect.setAttribute('width', vb.width)
+      rect.setAttribute('height', vb.height)
+      rect.setAttribute('fill', bg)
+      clone.insertBefore(rect, clone.firstChild)
+    }
+    const svgData = new XMLSerializer().serializeToString(clone)
+    const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' })
+    const a = document.createElement('a')
+    a.href = URL.createObjectURL(blob)
+    a.download = 'lixsketch-export.svg'
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    toggleModal()
+  }
+
+  const handleCopyPNG = async () => {
+    const clone = getCleanSVG()
+    if (!clone) return
+    const canvas = await renderToCanvas(clone, scale, getBgColor())
+    if (!canvas) return
+
+    canvas.toBlob((blob) => {
+      if (!blob) return
+      navigator.clipboard
+        .write([new ClipboardItem({ 'image/png': blob })])
+        .catch((err) => console.warn('Clipboard write failed:', err))
+    }, 'image/png')
+    toggleModal()
+  }
+
+  const handleCopySVG = () => {
+    const clone = getCleanSVG()
+    if (!clone) return
+    const svgData = new XMLSerializer().serializeToString(clone)
+    navigator.clipboard.writeText(svgData).catch((err) =>
+      console.warn('Clipboard write failed:', err)
+    )
+    toggleModal()
+  }
+
+  return (
+    <div
+      className="fixed inset-0 z-[9999] flex items-center justify-center font-[lixFont]"
+      onClick={toggleModal}
+    >
+      <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-[720px] mx-4 overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 pt-5 pb-3">
+          <h2 className="text-text-primary text-base font-medium">Export Image</h2>
+          <button
+            onClick={toggleModal}
+            className="w-7 h-7 flex items-center justify-center rounded-lg text-text-muted hover:text-text-primary hover:bg-surface-hover transition-all duration-200"
+          >
+            <i className="bx bx-x text-xl" />
+          </button>
+        </div>
+
+        <hr className="border-border-light mx-6" />
+
+        {/* Body - two columns */}
+        <div className="flex gap-0">
+          {/* Left - Preview */}
+          <div className="flex-1 p-6 flex items-center justify-center min-h-[300px]">
+            <div
+              ref={previewRef}
+              className="w-full max-h-[320px] rounded-xl overflow-hidden border border-border-light flex items-center justify-center"
+              style={{ background: bgMode === 'none' ? 'repeating-conic-gradient(#2a2a35 0% 25%, #1e1e28 0% 50%) 0 0 / 16px 16px' : getBgColor() }}
+            >
+              {previewUrl ? (
+                <img
+                  src={previewUrl}
+                  alt="Export preview"
+                  className="w-full h-full object-contain max-h-[320px]"
+                />
+              ) : (
+                <span className="text-text-dim text-xs">Generating preview...</span>
+              )}
+            </div>
+          </div>
+
+          {/* Right - Controls */}
+          <div className="w-[240px] border-l border-border-light p-5 flex flex-col gap-5">
+            {/* Background */}
+            <div>
+              <p className="text-text-dim text-xs uppercase tracking-wider mb-2">Background</p>
+              <div className="flex items-center gap-1">
+                {[
+                  { value: 'dark', label: 'Dark', icon: 'bxs-moon' },
+                  { value: 'light', label: 'Light', icon: 'bxs-sun' },
+                  { value: 'none', label: 'None', icon: 'bx-hide' },
+                ].map((opt) => (
+                  <button
+                    key={opt.value}
+                    onClick={() => setBgMode(opt.value)}
+                    className={`flex-1 flex items-center justify-center gap-1 py-1.5 rounded-lg text-xs transition-all duration-200 ${
+                      bgMode === opt.value
+                        ? 'bg-accent text-text-primary'
+                        : 'text-text-muted hover:bg-surface-hover'
+                    }`}
+                  >
+                    <i className={`bx ${opt.icon} text-xs`} />
+                    {opt.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Scale */}
+            <div>
+              <p className="text-text-dim text-xs uppercase tracking-wider mb-2">Scale</p>
+              <div className="flex items-center gap-1">
+                {SCALES.map((s) => (
+                  <button
+                    key={s}
+                    onClick={() => setScale(s)}
+                    className={`flex-1 py-1.5 rounded-lg text-xs transition-all duration-200 ${
+                      scale === s
+                        ? 'bg-accent text-text-primary'
+                        : 'text-text-muted hover:bg-surface-hover'
+                    }`}
+                  >
+                    {s}x
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            <hr className="border-border-light" />
+
+            {/* Export buttons */}
+            <div className="flex flex-col gap-2">
+              <button
+                onClick={handleExportPNG}
+                className="w-full flex items-center gap-2 px-3 py-2.5 rounded-lg bg-accent-blue hover:bg-accent-blue-hover text-text-primary text-xs transition-all duration-200"
+              >
+                <i className="bx bx-image text-sm" />
+                Export as PNG
+              </button>
+              <button
+                onClick={handleExportSVG}
+                className="w-full flex items-center gap-2 px-3 py-2.5 rounded-lg bg-surface hover:bg-surface-hover border border-border text-text-secondary text-xs transition-all duration-200"
+              >
+                <i className="bx bx-code-alt text-sm" />
+                Export as SVG
+              </button>
+            </div>
+
+            <hr className="border-border-light" />
+
+            {/* Clipboard buttons */}
+            <div className="flex flex-col gap-2">
+              <button
+                onClick={handleCopyPNG}
+                className="w-full flex items-center gap-2 px-3 py-2 rounded-lg text-text-secondary text-xs hover:bg-surface-hover border border-border transition-all duration-200"
+              >
+                <i className="bx bx-clipboard text-sm" />
+                Copy as PNG
+              </button>
+              <button
+                onClick={handleCopySVG}
+                className="w-full flex items-center gap-2 px-3 py-2 rounded-lg text-text-secondary text-xs hover:bg-surface-hover border border-border transition-all duration-200"
+              >
+                <i className="bx bx-copy text-sm" />
+                Copy as SVG
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,174 @@
+"use client"
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import useUIStore from '../../store/useUIStore'
+
+const SAMPLE = `# One equation per line. Comments start with #.
+# Hit Cmd/Ctrl+Enter to render onto the canvas.
+
+y = x^2
+y = sin(x) * 3
+y = -x + 2
+`
+
+const DEFAULT_SETTINGS = { xMin: -10, xMax: 10, yMin: -10, yMax: 10, showGrid: true }
+
+function parseEquations(text) {
+  return text
+    .split(/\r?\n/)
+    .map((s) => s.trim())
+    .filter((s) => s && !s.startsWith('#'))
+}
+
+/**
+ * Graph modal — plots client-side via the engine's GraphRenderer. No
+ * inference; the math is parsed by GraphMathParser.parseExpression.
+ * Inserts the rendered graph onto the canvas through the bridge
+ * SketchEngine.init() exposes as `window.__graphRenderer`.
+ */
+export default function GraphModal() {
+  const open = useUIStore((s) => s.graphModalOpen)
+  const toggle = useUIStore((s) => s.toggleGraphModal)
+  const [source, setSource] = useState(SAMPLE)
+  const [settings, setSettings] = useState(DEFAULT_SETTINGS)
+  const [busy, setBusy] = useState(false)
+  const [status, setStatus] = useState(null)
+  const taRef = useRef(null)
+
+  useEffect(() => {
+    if (!open) return
+    requestAnimationFrame(() => taRef.current?.focus())
+    const onKey = (e) => {
+      if (e.key === 'Escape') toggle()
+    }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [open, toggle])
+
+  const render = useCallback(async () => {
+    if (busy) return
+    setBusy(true)
+    setStatus(null)
+    try {
+      const equations = parseEquations(source)
+      if (equations.length === 0) {
+        setStatus({ tone: 'error', message: 'Add at least one equation.' })
+        return
+      }
+      // Validate via the engine's parser before handing to the renderer.
+      const { parseExpression } = await import('../../../core/GraphMathParser.js')
+      const bad = equations.find((eq) => !parseExpression(eq))
+      if (bad) {
+        setStatus({ tone: 'error', message: `Could not parse: ${bad}` })
+        return
+      }
+      if (typeof window.__graphRenderer === 'function') {
+        window.__graphRenderer(equations, settings)
+        setStatus({ tone: 'success', message: `Plotted ${equations.length} equation(s).` })
+        setTimeout(() => { toggle() }, 700)
+      } else {
+        setStatus({ tone: 'error', message: 'Graph engine not ready yet — wait a moment and retry.' })
+      }
+    } catch (err) {
+      console.warn('[GraphModal] render failed:', err)
+      setStatus({ tone: 'error', message: err?.message || 'Render failed.' })
+    } finally {
+      setBusy(false)
+    }
+  }, [source, settings, busy, toggle])
+
+  const handleKeyDown = useCallback((e) => {
+    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+      e.preventDefault()
+      render()
+    }
+  }, [render])
+
+  const setRange = (key) => (e) => {
+    const v = parseFloat(e.target.value)
+    if (Number.isFinite(v)) setSettings((s) => ({ ...s, [key]: v }))
+  }
+
+  if (!open) return null
+
+  return (
+    <div
+      className="fixed inset-0 z-[1100] flex items-center justify-center bg-black/60 backdrop-blur-sm font-[lixFont]"
+      onClick={toggle}
+      role="dialog"
+      aria-modal="true"
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        className="relative w-[560px] max-w-[94vw] bg-surface border border-border-light rounded-2xl p-5 shadow-2xl flex flex-col gap-3"
+      >
+        <button
+          onClick={toggle}
+          className="absolute top-3 right-3 w-7 h-7 flex items-center justify-center rounded-md text-text-muted hover:text-text-primary hover:bg-surface-hover transition-colors"
+          title="Close (Esc)"
+        >
+          <i className="bx bx-x text-lg" />
+        </button>
+
+        <div className="flex items-center gap-2">
+          <div className="w-8 h-8 rounded-lg bg-accent-blue/10 border border-accent-blue/30 flex items-center justify-center">
+            <i className="bx bx-line-chart text-accent-blue" />
+          </div>
+          <div className="flex-1">
+            <h2 className="text-text-primary text-sm font-medium">Graph</h2>
+            <p className="text-text-dim text-[11px]">One equation per line — plotted on the canvas. No AI involved.</p>
+          </div>
+        </div>
+
+        <textarea
+          ref={taRef}
+          value={source}
+          onChange={(e) => setSource(e.target.value)}
+          onKeyDown={handleKeyDown}
+          spellCheck={false}
+          className="w-full h-[200px] resize-none bg-surface-card border border-border-light rounded-lg px-3 py-2 text-[12px] text-text-primary font-[lixCode] outline-none focus:border-accent-blue/50"
+        />
+
+        <div className="grid grid-cols-4 gap-2 text-[11px]">
+          <label className="flex flex-col gap-0.5">
+            <span className="text-text-dim">xMin</span>
+            <input type="number" value={settings.xMin} onChange={setRange('xMin')}
+              className="bg-surface-card border border-border-light rounded px-2 py-1 text-text-primary outline-none focus:border-accent-blue/50" />
+          </label>
+          <label className="flex flex-col gap-0.5">
+            <span className="text-text-dim">xMax</span>
+            <input type="number" value={settings.xMax} onChange={setRange('xMax')}
+              className="bg-surface-card border border-border-light rounded px-2 py-1 text-text-primary outline-none focus:border-accent-blue/50" />
+          </label>
+          <label className="flex flex-col gap-0.5">
+            <span className="text-text-dim">yMin</span>
+            <input type="number" value={settings.yMin} onChange={setRange('yMin')}
+              className="bg-surface-card border border-border-light rounded px-2 py-1 text-text-primary outline-none focus:border-accent-blue/50" />
+          </label>
+          <label className="flex flex-col gap-0.5">
+            <span className="text-text-dim">yMax</span>
+            <input type="number" value={settings.yMax} onChange={setRange('yMax')}
+              className="bg-surface-card border border-border-light rounded px-2 py-1 text-text-primary outline-none focus:border-accent-blue/50" />
+          </label>
+        </div>
+
+        <div className="flex items-center justify-between">
+          {status ? (
+            <span className={`text-[11px] ${status.tone === 'error' ? 'text-red-400' : 'text-green-400'}`}>
+              {status.message}
+            </span>
+          ) : (
+            <span className="text-text-dim text-[11px]">Cmd/Ctrl+Enter to render · Esc to close</span>
+          )}
+          <button
+            onClick={render}
+            disabled={busy}
+            className="px-3 py-1.5 rounded-lg bg-accent-blue text-text-primary text-[12px] font-medium hover:bg-accent-blue-hover transition-colors disabled:opacity-50 disabled:pointer-events-none"
+          >
+            {busy ? 'Plotting…' : 'Plot'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,208 @@
+"use client"
+
+import { useState } from 'react'
+import useUIStore from '../../store/useUIStore'
+
+const TOOL_SHORTCUTS = [
+  { keys: 'H', action: 'Pan' },
+  { keys: 'V / 1', action: 'Selection' },
+  { keys: 'R / 2', action: 'Rectangle' },
+  { keys: '3', action: 'Diamond' },
+  { keys: 'O / 4', action: 'Circle' },
+  { keys: 'A / 5', action: 'Arrow' },
+  { keys: 'L / 6', action: 'Line' },
+  { keys: 'P / 7', action: 'Freehand' },
+  { keys: 'T / 8', action: 'Text' },
+  { keys: '9', action: 'Image' },
+  { keys: 'E / 0', action: 'Eraser' },
+  { keys: 'F', action: 'Frame' },
+  { keys: 'K', action: 'Laser' },
+]
+
+const ACTION_SHORTCUTS = [
+  { keys: 'Ctrl+A', action: 'Select All' },
+  { keys: 'Ctrl+G', action: 'Group' },
+  { keys: 'Ctrl+Shift+G', action: 'Ungroup' },
+  { keys: 'Ctrl+D', action: 'Duplicate' },
+  { keys: 'Ctrl+S', action: 'Quick Save (canvas + doc)' },
+  { keys: 'Ctrl+C', action: 'Copy' },
+  { keys: 'Ctrl+V', action: 'Paste' },
+  { keys: 'Ctrl+Z', action: 'Undo' },
+  { keys: 'Ctrl+Shift+Z', action: 'Redo' },
+  { keys: 'Esc', action: 'Deselect' },
+  { keys: 'Del / Backspace', action: 'Delete' },
+  { keys: 'Space (hold)', action: 'Pan' },
+  { keys: 'Shift (hold)', action: 'Straight Draw' },
+]
+
+const VIEW_SHORTCUTS = [
+  { keys: 'Ctrl++', action: 'Zoom In' },
+  { keys: 'Ctrl+-', action: 'Zoom Out' },
+  { keys: 'Ctrl+0', action: 'Reset Zoom' },
+  { keys: "Ctrl+'", action: 'Toggle Grid' },
+  { keys: 'Ctrl+/', action: 'Command Palette' },
+]
+
+// ── Doc editor shortcuts ──────────────────────────────────────────
+// Markdown shortcuts auto-convert when typed at the start of a line.
+const DOC_BLOCK_SHORTCUTS = [
+  { keys: '# Space', action: 'Heading 1' },
+  { keys: '## Space', action: 'Heading 2' },
+  { keys: '### Space', action: 'Heading 3' },
+  { keys: '> Space', action: 'Quote' },
+  { keys: '- Space', action: 'Bulleted list' },
+  { keys: '1. Space', action: 'Numbered list' },
+  { keys: '[] Space', action: 'Checklist' },
+  { keys: '``` Space', action: 'Code block' },
+  { keys: '--- Enter', action: 'Divider' },
+  { keys: '/', action: 'Block menu' },
+]
+
+const DOC_INLINE_SHORTCUTS = [
+  { keys: 'Ctrl+B', action: 'Bold' },
+  { keys: 'Ctrl+I', action: 'Italic' },
+  { keys: 'Ctrl+U', action: 'Underline' },
+  { keys: 'Ctrl+Shift+S', action: 'Strikethrough' },
+  { keys: 'Ctrl+E', action: 'Inline code' },
+  { keys: 'Tab', action: 'Indent block' },
+  { keys: 'Shift+Tab', action: 'Outdent block' },
+  { keys: 'Ctrl+Z', action: 'Undo' },
+  { keys: 'Ctrl+Shift+Z', action: 'Redo' },
+]
+
+const TABS = [
+  { id: 'canvas', label: 'Canvas', icon: 'bx-pen' },
+  { id: 'docs', label: 'Document', icon: 'bxs-notepad' },
+]
+
+function ShortcutRow({ keys, action }) {
+  return (
+    <div className="flex items-center justify-between py-1.5">
+      <span className="text-text-secondary text-xs">{action}</span>
+      <div className="flex items-center gap-1">
+        {keys.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-muted text-xs border border-border font-[lixFont]">
+              {key.trim()}
+            </kbd>
+          </span>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function ShortcutSection({ title, shortcuts }) {
+  return (
+    <div>
+      <h3 className="text-text-dim text-xs uppercase tracking-wider mb-2">{title}</h3>
+      {shortcuts.map((s) => (
+        <ShortcutRow key={s.action} keys={s.keys} action={s.action} />
+      ))}
+    </div>
+  )
+}
+
+export default function HelpModal() {
+  const open = useUIStore((s) => s.helpModalOpen)
+  const toggleHelpModal = useUIStore((s) => s.toggleHelpModal)
+  const [activeTab, setActiveTab] = useState('canvas')
+
+  if (!open) return null
+
+  return (
+    <div
+      className="fixed inset-0 z-[9999] flex items-center justify-center font-[lixFont]"
+      onClick={toggleHelpModal}
+    >
+      <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-[800px] mx-4 max-h-[85vh] flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 pt-5 pb-3">
+          <h2 className="text-text-primary text-base font-medium">Shortcuts</h2>
+          <button
+            onClick={toggleHelpModal}
+            className="w-7 h-7 flex items-center justify-center rounded-lg text-text-muted hover:text-text-primary hover:bg-surface-hover transition-all duration-200"
+          >
+            <i className="bx bx-x text-xl" />
+          </button>
+        </div>
+
+        {/* Tabs */}
+        <div className="flex items-center gap-1 px-6 pb-3">
+          {TABS.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`px-3 py-1.5 rounded-lg text-xs flex items-center gap-1.5 transition-all duration-200 ${
+                activeTab === tab.id
+                  ? 'bg-surface-hover text-text-primary'
+                  : 'text-text-muted hover:text-text-secondary hover:bg-surface-hover/50'
+              }`}
+            >
+              <i className={`bx ${tab.icon} text-sm`} />
+              {tab.label}
+            </button>
+          ))}
+        </div>
+
+        <hr className="border-border-light mx-6" />
+
+        {/* Content - scrollable */}
+        <div className="flex-1 overflow-y-auto no-scrollbar px-6 py-4">
+          {activeTab === 'canvas' && (
+            <div className="grid grid-cols-2 gap-6">
+              <ShortcutSection title="Tools" shortcuts={TOOL_SHORTCUTS} />
+              <div className="flex flex-col gap-4">
+                <ShortcutSection title="Actions" shortcuts={ACTION_SHORTCUTS} />
+                <ShortcutSection title="View" shortcuts={VIEW_SHORTCUTS} />
+              </div>
+            </div>
+          )}
+
+          {activeTab === 'docs' && (
+            <div className="grid grid-cols-2 gap-6">
+              <ShortcutSection title="Block markdown" shortcuts={DOC_BLOCK_SHORTCUTS} />
+              <ShortcutSection title="Formatting" shortcuts={DOC_INLINE_SHORTCUTS} />
+            </div>
+          )}
+        </div>
+
+        {/* Footer links */}
+        <hr className="border-border-light mx-6" />
+        <div className="flex items-center gap-3 px-6 py-4 flex-wrap">
+          <a
+            href="/docs"
+            className="flex items-center gap-2 px-3 py-2 rounded-lg bg-accent-blue/10 hover:bg-accent-blue/20 border border-accent-blue/20 text-accent-blue text-xs transition-all duration-200"
+          >
+            <i className="bx bx-book-open text-sm" />
+            Documentation
+          </a>
+          <a
+            href="https://github.com/elixpo/sketch.elixpo"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2 px-3 py-2 rounded-lg bg-surface hover:bg-surface-hover border border-border text-text-secondary text-xs transition-all duration-200"
+          >
+            <i className="bx bxl-github text-sm" />
+            View Repository
+          </a>
+          <a
+            href="https://github.com/elixpo/sketch.elixpo/issues"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2 px-3 py-2 rounded-lg bg-surface hover:bg-surface-hover border border-border text-text-secondary text-xs transition-all duration-200"
+          >
+            <i className="bx bx-bug text-sm" />
+            Report An Issue
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+}