@elixpo/lixsketch 5.4.7 → 5.5.1

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

@@ -0,0 +1,130 @@
+"use client"
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import useUIStore from '../../store/useUIStore'
+
+const SAMPLE = `# LixScript — paste shapes / arrows in a simple DSL.
+# Hit Cmd/Ctrl+Enter to render onto the canvas.
+
+rect A "Idea" 100 100 220 90
+rect B "Plan"  400 100 220 90
+rect C "Ship"  700 100 220 90
+
+arrow A -> B
+arrow B -> C
+`
+
+/**
+ * LixScript modal — takes a script the user types and parses it directly
+ * into engine shapes via @elixpo/lixsketch's LixScriptParser. No AI
+ * inference, no worker round-trip. Strictly client-side parsing.
+ */
+export default function LixScriptModal() {
+  const open = useUIStore((s) => s.aiModalOpen)
+  const toggle = useUIStore((s) => s.toggleAIModal)
+  const [source, setSource] = useState(SAMPLE)
+  const [busy, setBusy] = useState(false)
+  const [status, setStatus] = useState(null) // { tone, message }
+  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 {
+      // Lazy-import the parser. Pulling it eagerly would bring the whole
+      // shape graph into the entry chunk (see SceneSerializer comment
+      // in LixSketchCanvas) and crash with "svg is not defined" before
+      // engine.init() has wired the engine globals.
+      const mod = await import('../../../core/LixScriptParser.js')
+      const parsed = mod.parseLixScript(source)
+      const resolved = mod.resolveShapeRefs ? mod.resolveShapeRefs(parsed) : parsed
+      mod.renderLixScript(resolved)
+      setStatus({ tone: 'success', message: `Rendered ${Array.isArray(resolved) ? resolved.length : '?'} elements.` })
+      // Auto-close shortly after a successful render.
+      setTimeout(() => { toggle() }, 700)
+    } catch (err) {
+      console.warn('[LixScriptModal] parse failed:', err)
+      setStatus({ tone: 'error', message: err?.message || 'Parse failed.' })
+    } finally {
+      setBusy(false)
+    }
+  }, [source, busy, toggle])
+
+  const handleKeyDown = useCallback((e) => {
+    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+      e.preventDefault()
+      render()
+    }
+  }, [render])
+
+  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-code-alt text-accent-blue" />
+          </div>
+          <div className="flex-1">
+            <h2 className="text-text-primary text-sm font-medium">LixScript</h2>
+            <p className="text-text-dim text-[11px]">Type shapes + arrows, render directly. 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-[260px] 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="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 ? 'Rendering…' : 'Render'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,125 @@
+"use client"
+
+import useUIStore from '../../store/useUIStore'
+import { useTranslation } from '../../hooks/useTranslation'
+import { useMemo } from 'react'
+
+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 ShortcutsModal() {
+  const { t } = useTranslation()
+  const shortcutsModalOpen = useUIStore((s) => s.shortcutsModalOpen)
+  const toggleShortcutsModal = useUIStore((s) => s.toggleShortcutsModal)
+
+  const TOOL_SHORTCUTS = useMemo(() => [
+    { keys: 'H', action: t('shortcuts.pan') },
+    { keys: 'V / 1', action: t('shortcuts.selection') },
+    { keys: 'R / 2', action: t('shortcuts.rectangle') },
+    { keys: '3', action: t('shortcuts.diamond') },
+    { keys: 'O / 4', action: t('shortcuts.circle') },
+    { keys: 'A / 5', action: t('shortcuts.arrow') },
+    { keys: 'L / 6', action: t('shortcuts.line') },
+    { keys: 'P / 7', action: t('shortcuts.freehand') },
+    { keys: 'T / 8', action: t('shortcuts.text') },
+    { keys: '9', action: t('shortcuts.image') },
+    { keys: 'E / 0', action: t('shortcuts.eraser') },
+    { keys: 'F', action: t('shortcuts.frame') },
+    { keys: 'K', action: t('shortcuts.laser') },
+  ], [t])
+
+  const ACTION_SHORTCUTS = useMemo(() => [
+    { keys: 'Ctrl+A', action: t('shortcuts.selectAll') },
+    { keys: 'Ctrl+G', action: t('shortcuts.group') },
+    { keys: 'Ctrl+Shift+G', action: t('shortcuts.ungroup') },
+    { keys: 'Ctrl+D', action: t('shortcuts.duplicate') },
+    { keys: 'Ctrl+S', action: t('shortcuts.quickSave') },
+    { keys: 'Ctrl+Shift+S', action: t('shortcuts.saveShare') },
+    { keys: 'Ctrl+F', action: t('shortcuts.findOnCanvas') },
+    { keys: 'Ctrl+C', action: t('shortcuts.copy') },
+    { keys: 'Ctrl+V', action: t('shortcuts.paste') },
+    { keys: 'Ctrl+Z', action: t('shortcuts.undo') },
+    { keys: 'Ctrl+Shift+Z', action: t('shortcuts.redo') },
+    { keys: 'Esc', action: t('shortcuts.deselect') },
+    { keys: 'Del', action: t('shortcuts.delete') },
+    { keys: 'Space', action: t('shortcuts.holdToPan') },
+    { keys: 'Shift', action: t('shortcuts.straightDraw') },
+  ], [t])
+
+  const VIEW_SHORTCUTS = useMemo(() => [
+    { keys: 'Ctrl++', action: t('shortcuts.zoomIn') },
+    { keys: 'Ctrl+-', action: t('shortcuts.zoomOut') },
+    { keys: 'Ctrl+0', action: t('shortcuts.resetZoom') },
+    { keys: "Ctrl+'", action: t('shortcuts.toggleGrid') },
+    { keys: 'Ctrl+/', action: t('shortcuts.shortcutsHelp') },
+  ], [t])
+
+  if (!shortcutsModalOpen) return null
+
+  return (
+    <div
+      className="fixed inset-0 z-[9999] flex items-center justify-center font-[lixFont]"
+      onClick={toggleShortcutsModal}
+    >
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
+
+      {/* Modal */}
+      <div
+        className="relative bg-surface-card border border-border-light rounded-2xl p-6 max-w-[600px] w-full mx-4 max-h-[80vh] overflow-y-auto no-scrollbar"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between mb-5">
+          <h2 className="text-text-primary text-base font-medium">
+            {t('shortcuts.title')}
+          </h2>
+          <button
+            onClick={toggleShortcutsModal}
+            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>
+
+        {/* Two columns */}
+        <div className="grid grid-cols-2 gap-6">
+          {/* Left column - Tools */}
+          <ShortcutSection title={t('shortcuts.tools')} shortcuts={TOOL_SHORTCUTS} />
+
+          {/* Right column - Actions + View */}
+          <div className="flex flex-col gap-4">
+            <ShortcutSection title={t('shortcuts.actions')} shortcuts={ACTION_SHORTCUTS} />
+            <ShortcutSection title={t('shortcuts.view')} shortcuts={VIEW_SHORTCUTS} />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/react/components/sidebars/ArrowSidebar.jsx

@@ -0,0 +1,173 @@
+"use client"
+
+import useSketchStore, { TOOLS } from '../../store/useSketchStore'
+import ShapeSidebar, { ToolbarButton, Divider, LayerControls } from './ShapeSidebar'
+import { useState, useCallback } from 'react'
+import { useTranslation } from '../../hooks/useTranslation'
+
+const STROKE_COLORS = ['#1a1a20', '#ffffff', '#FF8383', '#3A994C', '#56A2E8', '#FFD700', '#FF69B4', '#A855F7']
+
+const HEAD_STYLES = [
+  { value: 'default', svg: '<svg width="22" height="12" viewBox="0 0 24 14"><line x1="2" y1="7" x2="16" y2="7" stroke="#fff" stroke-width="2"/><polyline points="13,2 19,7 13,12" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/></svg>' },
+  { value: 'square', svg: '<svg width="22" height="12" viewBox="0 0 24 14"><line x1="2" y1="7" x2="14" y2="7" stroke="#fff" stroke-width="2"/><rect x="14" y="3" width="6" height="8" fill="none" stroke="#fff" stroke-width="1.5"/></svg>' },
+  { value: 'outline', svg: '<svg width="22" height="12" viewBox="0 0 24 14"><line x1="2" y1="7" x2="13" y2="7" stroke="#fff" stroke-width="2"/><polygon points="13,2 21,7 13,12" fill="none" stroke="#fff" stroke-width="1.5"/></svg>' },
+  { value: 'solid', svg: '<svg width="22" height="12" viewBox="0 0 24 14"><line x1="2" y1="7" x2="13" y2="7" stroke="#fff" stroke-width="2"/><polygon points="13,2 21,7 13,12" fill="#fff"/></svg>' },
+]
+
+function SvgIcon({ svg }) {
+  return <span dangerouslySetInnerHTML={{ __html: svg }} />
+}
+
+function ColorGrid({ colors, selected, onSelect }) {
+  return (
+    <div className="grid grid-cols-4 gap-1.5">
+      {colors.map((c) => (
+        <button key={c} onClick={() => onSelect(c)}
+          className={`w-7 h-7 rounded-md border-[1.5px] transition-all duration-100 ${selected === c ? 'border-[#5B57D1] scale-110' : 'border-white/[0.08] hover:border-white/20'}`}
+          style={{ backgroundColor: c }}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default function ArrowSidebar() {
+  const { t } = useTranslation()
+  const activeTool = useSketchStore((s) => s.activeTool)
+  const selectedShapeSidebar = useSketchStore((s) => s.selectedShapeSidebar)
+  const [headStyle, setHeadStyle] = useState('default')
+  const [strokeColor, setStrokeColor] = useState('#fff')
+  const [thickness, setThickness] = useState(2)
+  const [outlineStyle, setOutlineStyle] = useState('solid')
+  const [arrowType, setArrowType] = useState('straight')
+  const [curvature, setCurvature] = useState(20)
+
+  // Bridge helpers: update React state + engine state + selected arrow
+  const updateHead = useCallback((v) => {
+    setHeadStyle(v)
+    if (window.arrowToolSettings) window.arrowToolSettings.headStyle = v
+    if (window.updateSelectedArrowStyle) window.updateSelectedArrowStyle({ arrowHeadStyle: v })
+  }, [])
+
+  const updateStroke = useCallback((v) => {
+    setStrokeColor(v)
+    if (window.arrowToolSettings) window.arrowToolSettings.strokeColor = v
+    if (window.updateSelectedArrowStyle) window.updateSelectedArrowStyle({ stroke: v })
+  }, [])
+
+  const updateThickness = useCallback((v) => {
+    setThickness(v)
+    if (window.arrowToolSettings) window.arrowToolSettings.strokeWidth = v
+    if (window.updateSelectedArrowStyle) window.updateSelectedArrowStyle({ strokeWidth: v })
+  }, [])
+
+  const updateOutline = useCallback((v) => {
+    setOutlineStyle(v)
+    if (window.arrowToolSettings) window.arrowToolSettings.outlineStyle = v
+    if (window.updateSelectedArrowStyle) window.updateSelectedArrowStyle({ arrowOutlineStyle: v })
+  }, [])
+
+  const updateType = useCallback((v) => {
+    setArrowType(v)
+    if (window.arrowToolSettings) window.arrowToolSettings.arrowCurved = v
+    if (window.updateSelectedArrowStyle) window.updateSelectedArrowStyle({ arrowCurved: v })
+  }, [])
+
+  const updateCurvature = useCallback((v) => {
+    setCurvature(v)
+    if (window.arrowToolSettings) window.arrowToolSettings.curveAmount = v
+    if (window.updateSelectedArrowStyle) window.updateSelectedArrowStyle({ arrowCurveAmount: v })
+  }, [])
+
+  return (
+    <ShapeSidebar visible={activeTool === TOOLS.ARROW || selectedShapeSidebar === 'arrow'}>
+      {/* Head style */}
+      <ToolbarButton icon="bxs-right-arrow" tooltip="Arrow head">
+        <p className="text-xs text-text-secondary uppercase tracking-wider mb-2">{t('sidebar.sectionHeader.head')}</p>
+        <div className="flex items-center gap-1">
+          {HEAD_STYLES.map((h) => (
+            <button key={h.value} onClick={() => updateHead(h.value)}
+              className={`w-10 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${headStyle === h.value ? 'bg-[#5B57D1]/20 text-[#5B57D1]' : 'text-text-secondary hover:bg-white/[0.06]'}`}
+            >
+              <SvgIcon svg={h.svg} />
+            </button>
+          ))}
+        </div>
+      </ToolbarButton>
+
+      <Divider />
+
+      <ToolbarButton tooltip={t('sidebar.strokeColor')}
+        preview={<span className="w-4 h-4 rounded-md border border-white/20" style={{ backgroundColor: strokeColor }} />}
+      >
+        <p className="text-xs text-text-secondary uppercase tracking-wider mb-2">{t('sidebar.sectionHeader.stroke')}</p>
+        <ColorGrid colors={STROKE_COLORS} selected={strokeColor} onSelect={updateStroke} />
+      </ToolbarButton>
+
+      <Divider />
+
+      <ToolbarButton icon="bxs-edit-alt" tooltip={t('sidebar.strokeWidth')}>
+        <p className="text-xs text-text-secondary uppercase tracking-wider mb-2">{t('sidebar.sectionHeader.width')}</p>
+        <div className="flex items-center gap-1">
+          {[1, 2, 4, 7].map((w) => (
+            <button key={w} onClick={() => updateThickness(w)}
+              className={`w-9 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${thickness === w ? 'bg-[#5B57D1]/20 text-[#5B57D1]' : 'text-text-secondary hover:bg-white/[0.06]'}`}
+            >
+              <div className="w-5 rounded-full bg-current" style={{ height: Math.max(1, w) }} />
+            </button>
+          ))}
+        </div>
+      </ToolbarButton>
+
+      <Divider />
+
+      <ToolbarButton icon="bxs-minus-circle" tooltip="Stroke style">
+        <p className="text-xs text-text-secondary uppercase tracking-wider mb-2">{t('sidebar.style')}</p>
+        <div className="flex items-center gap-1">
+          {[{ v: 'solid', d: '' }, { v: 'dashed', d: '6 4' }, { v: 'dotted', d: '2 3' }].map((s) => (
+            <button key={s.v} onClick={() => updateOutline(s.v)}
+              className={`w-11 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${outlineStyle === s.v ? 'bg-[#5B57D1]/20' : 'hover:bg-white/[0.06]'}`}
+            >
+              <svg width="28" height="4" viewBox="0 0 28 4"><line x1="0" y1="2" x2="28" y2="2" stroke="#fff" strokeWidth="2" strokeDasharray={s.d} strokeLinecap="round" /></svg>
+            </button>
+          ))}
+        </div>
+      </ToolbarButton>
+
+      <Divider />
+
+      {/* Arrow type */}
+      <ToolbarButton icon="bxs-share-alt" tooltip="Arrow type">
+        <p className="text-xs text-text-secondary uppercase tracking-wider mb-2">{t('sidebar.sectionHeader.type')}</p>
+        <div className="flex flex-col gap-0.5">
+          {[
+            { v: 'straight', i: 'bxs-right-arrow-alt', l: 'Straight' },
+            { v: 'curved', i: 'bxs-analyse', l: 'Curved' },
+            { v: 'elbow', i: 'bxs-network-chart', l: 'Elbow' },
+          ].map((a) => (
+            <button key={a.v} onClick={() => updateType(a.v)}
+              className={`flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${arrowType === a.v ? 'bg-[#5B57D1] text-white' : 'text-text-secondary hover:bg-white/[0.06]'}`}
+            >
+              <i className={`bx ${a.i} text-sm`} /> {a.l}
+            </button>
+          ))}
+          {arrowType === 'curved' && (
+            <>
+              <div className="w-full h-px bg-white/[0.08] my-1" />
+              <p className="text-[9px] text-text-dim uppercase tracking-wider mb-1">Curvature</p>
+              <div className="flex items-center gap-1">
+                {[{ v: 8, l: 'Lo' }, { v: 20, l: 'Md' }, { v: 40, l: 'Hi' }].map((c) => (
+                  <button key={c.v} onClick={() => updateCurvature(c.v)}
+                    className={`flex-1 py-1 rounded-md text-xs text-center transition-all duration-100 ${curvature === c.v ? 'bg-[#5B57D1]/20 text-[#5B57D1]' : 'text-text-secondary hover:bg-white/[0.06]'}`}
+                  >{c.l}</button>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+      </ToolbarButton>
+      <Divider />
+      <LayerControls />
+    </ShapeSidebar>
+  )
+}

package/src/react/components/sidebars/CircleSidebar.jsx

@@ -0,0 +1,134 @@
+"use client"
+
+import useSketchStore, { TOOLS } from '../../store/useSketchStore'
+import ShapeSidebar, { ToolbarButton, Divider, LayerControls } from './ShapeSidebar'
+import { useState, useCallback } from 'react'
+import { useTranslation } from '../../hooks/useTranslation'
+
+const STROKE_COLORS = ['#1a1a20', '#ffffff', '#FF8383', '#3A994C', '#56A2E8', '#FFD700', '#FF69B4', '#A855F7']
+const BG_COLORS = ['transparent', '#f0f0f0', '#ffcccb', '#90ee90', '#add8e6', '#FFE4B5', '#DDA0DD', '#2d2d2d']
+
+const FILLS = [
+  { value: 'hachure', label: 'sidebar.fill.hachure' },
+  { value: 'solid', label: 'sidebar.fill.solid' },
+  { value: 'dots', label: 'sidebar.fill.dots' },
+  { value: 'cross-hatch', label: 'sidebar.fill.cross' },
+  { value: 'transparent', label: 'sidebar.fill.none' },
+]
+
+function ColorGrid({ colors, selected, onSelect }) {
+  return (
+    <div className="grid grid-cols-4 gap-1.5">
+      {colors.map((c) => {
+        const isTrans = c === 'transparent'
+        return (
+          <button
+            key={c}
+            onClick={() => onSelect(c)}
+            className={`w-7 h-7 rounded-md border-[1.5px] transition-all duration-100 ${
+              selected === c ? 'border-accent-blue scale-110' : 'border-white/[0.08] hover:border-white/20'
+            }`}
+            style={!isTrans ? { backgroundColor: c } : undefined}
+          >
+            {isTrans && (
+              <svg className="w-full h-full text-text-dim" viewBox="0 0 20 20">
+                <line x1="4" y1="16" x2="16" y2="4" stroke="currentColor" strokeWidth="2" />
+              </svg>
+            )}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export default function CircleSidebar() {
+  const { t } = useTranslation()
+  const activeTool = useSketchStore((s) => s.activeTool)
+  const selectedShapeSidebar = useSketchStore((s) => s.selectedShapeSidebar)
+  const [strokeColor, setStrokeColor] = useState('#fff')
+  const [bgColor, setBgColor] = useState('transparent')
+  const [thickness, setThickness] = useState(2)
+  const [lineStyle, setLineStyle] = useState('solid')
+  const [fillStyle, setFillStyle] = useState('hachure')
+
+  const updateStroke = useCallback((v) => { setStrokeColor(v); if (window.updateSelectedCircleStyle) window.updateSelectedCircleStyle({ stroke: v }) }, [])
+  const updateBg = useCallback((v) => { setBgColor(v); if (window.updateSelectedCircleStyle) window.updateSelectedCircleStyle({ fill: v }) }, [])
+  const updateThickness = useCallback((v) => { setThickness(v); if (window.updateSelectedCircleStyle) window.updateSelectedCircleStyle({ strokeWidth: v }) }, [])
+  const updateStyle = useCallback((v) => { setLineStyle(v); if (window.updateSelectedCircleStyle) window.updateSelectedCircleStyle({ outlineStyle: v }) }, [])
+  const updateFill = useCallback((v) => { setFillStyle(v); if (window.updateSelectedCircleStyle) window.updateSelectedCircleStyle({ fillStyle: v }) }, [])
+
+  return (
+    <ShapeSidebar visible={activeTool === TOOLS.CIRCLE || selectedShapeSidebar === 'circle'}>
+      <ToolbarButton
+        tooltip={t('sidebar.strokeColor')}
+        preview={<span className="w-4 h-4 rounded-md border border-white/20" style={{ backgroundColor: strokeColor }} />}
+      >
+        <p className="text-xs text-text-muted uppercase tracking-wider mb-2">{t('sidebar.sectionHeader.stroke')}</p>
+        <ColorGrid colors={STROKE_COLORS} selected={strokeColor} onSelect={updateStroke} />
+      </ToolbarButton>
+
+      <Divider />
+
+      <ToolbarButton
+        tooltip={t('sidebar.fillColor')}
+        preview={
+          <span className="w-4 h-4 rounded-md border border-white/20" style={{ backgroundColor: bgColor === 'transparent' ? 'transparent' : bgColor }}>
+            {bgColor === 'transparent' && <svg className="w-full h-full text-text-dim" viewBox="0 0 16 16"><line x1="2" y1="14" x2="14" y2="2" stroke="currentColor" strokeWidth="1.5" /></svg>}
+          </span>
+        }
+      >
+        <p className="text-xs text-text-muted uppercase tracking-wider mb-2">{t('sidebar.sectionHeader.background')}</p>
+        <ColorGrid colors={BG_COLORS} selected={bgColor} onSelect={updateBg} />
+      </ToolbarButton>
+
+      <Divider />
+
+      <ToolbarButton icon="bxs-edit-alt" tooltip={t('sidebar.strokeWidth')}>
+        <p className="text-xs text-text-muted uppercase tracking-wider mb-2">{t('sidebar.sectionHeader.width')}</p>
+        <div className="flex items-center gap-1">
+          {[1, 2, 4, 7].map((w) => (
+            <button key={w} onClick={() => updateThickness(w)}
+              className={`w-9 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${thickness === w ? 'bg-[#5B57D1]/20 text-[#5B57D1]' : 'text-text-muted hover:bg-white/[0.06]'}`}
+            >
+              <div className="w-5 rounded-full bg-current" style={{ height: Math.max(1, w) }} />
+            </button>
+          ))}
+        </div>
+      </ToolbarButton>
+
+      <Divider />
+
+      <ToolbarButton icon="bxs-minus-circle" tooltip="Stroke style">
+        <p className="text-xs text-text-muted uppercase tracking-wider mb-2">{t('sidebar.style')}</p>
+        <div className="flex items-center gap-1">
+          {[{ v: 'solid', d: '' }, { v: 'dashed', d: '6 4' }, { v: 'dotted', d: '2 3' }].map((s) => (
+            <button key={s.v} onClick={() => updateStyle(s.v)}
+              className={`w-11 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${lineStyle === s.v ? 'bg-[#5B57D1]/20' : 'hover:bg-white/[0.06]'}`}
+            >
+              <svg width="28" height="4" viewBox="0 0 28 4"><line x1="0" y1="2" x2="28" y2="2" stroke="#fff" strokeWidth="2" strokeDasharray={s.d} strokeLinecap="round" /></svg>
+            </button>
+          ))}
+        </div>
+      </ToolbarButton>
+
+      <Divider />
+
+      <ToolbarButton icon="bxs-brush" tooltip="Fill style">
+        <p className="text-xs text-text-muted uppercase tracking-wider mb-2">{t('sidebar.sectionHeader.fill')}</p>
+        <div className="flex flex-col gap-0.5">
+          {FILLS.map((f) => (
+            <button key={f.value} onClick={() => updateFill(f.value)}
+              className={`flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${fillStyle === f.value ? 'bg-[#5B57D1] text-white' : 'text-text-secondary hover:bg-white/[0.06]'}`}
+            >
+              <span className="w-1.5 h-1.5 rounded-full bg-current" />
+              {t(f.label)}
+            </button>
+          ))}
+        </div>
+      </ToolbarButton>
+      <Divider />
+      <LayerControls />
+    </ShapeSidebar>
+  )
+}