@elixpo/lixsketch 5.4.7 → 5.5.1

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

@@ -0,0 +1,109 @@
+"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']
+
+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 LineSidebar() {
+  const { t } = useTranslation()
+  const activeTool = useSketchStore((s) => s.activeTool)
+  const selectedShapeSidebar = useSketchStore((s) => s.selectedShapeSidebar)
+  const [strokeColor, setStrokeColor] = useState('#fff')
+  const [thickness, setThickness] = useState(2)
+  const [lineStyle, setLineStyle] = useState('solid')
+  const [sloppiness, setSloppiness] = useState(0)
+  const [edge, setEdge] = useState('smooth')
+
+  const updateStroke = useCallback((v) => { setStrokeColor(v); if (window.updateSelectedLineStyle) window.updateSelectedLineStyle({ stroke: v }) }, [])
+  const updateThickness = useCallback((v) => { setThickness(v); if (window.updateSelectedLineStyle) window.updateSelectedLineStyle({ strokeWidth: v }) }, [])
+  const updateStyle = useCallback((v) => { setLineStyle(v); if (window.updateSelectedLineStyle) window.updateSelectedLineStyle({ strokeStyle: v }) }, [])
+  const updateSloppiness = useCallback((v) => { setSloppiness(v); if (window.updateSelectedLineStyle) window.updateSelectedLineStyle({ sloppiness: v }) }, [])
+  const updateEdge = useCallback((v) => { setEdge(v); if (window.updateSelectedLineStyle) window.updateSelectedLineStyle({ edge: v === 'smooth' ? 1 : 5 }) }, [])
+
+  return (
+    <ShapeSidebar visible={activeTool === TOOLS.LINE || selectedShapeSidebar === 'line'}>
+      <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 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-shape-polygon" tooltip="Sloppiness">
+        <p className="text-xs text-text-muted uppercase tracking-wider mb-2">{t('sidebar.sectionHeader.sloppiness')}</p>
+        <div className="flex items-center gap-1">
+          {[{ v: 0, l: '0' }, { v: 2, l: '2' }, { v: 4, l: '4' }].map((s) => (
+            <button key={s.v} onClick={() => updateSloppiness(s.v)}
+              className={`w-8 h-8 flex items-center justify-center rounded-lg text-xs transition-all duration-100 ${sloppiness === s.v ? 'bg-[#5B57D1]/20 text-accent-blue' : 'text-text-muted hover:bg-white/6'}`}
+            >{s.l}</button>
+          ))}
+        </div>
+      </ToolbarButton>
+
+      <Divider />
+
+      <ToolbarButton icon="bxs-landscape" tooltip="Edge">
+        <p className="text-xs text-text-muted uppercase tracking-wider mb-2">{t('sidebar.sectionHeader.edge')}</p>
+        <div className="flex flex-col gap-0.5">
+          {[{ v: 'smooth', i: 'bxs-droplet', l: 'Smooth' }, { v: 'rough', i: 'bxs-bolt', l: 'Rough' }].map((e) => (
+            <button key={e.v} onClick={() => updateEdge(e.v)}
+              className={`flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${edge === e.v ? 'bg-accent-blue text-white' : 'text-text-secondary hover:bg-white/6'}`}
+            >
+              <i className={`bx ${e.i} text-sm`} /> {e.l}
+            </button>
+          ))}
+        </div>
+      </ToolbarButton>
+      <Divider />
+      <LayerControls />
+    </ShapeSidebar>
+  )
+}

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

@@ -0,0 +1,119 @@
+"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']
+
+// Map taper UI values to perfect-freehand thinning values
+const TAPER_MAP = { uniform: 0, pen: 0.5, brush: 0.8 }
+
+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 PaintbrushSidebar() {
+  const { t } = useTranslation()
+  const activeTool = useSketchStore((s) => s.activeTool)
+  const selectedShapeSidebar = useSketchStore((s) => s.selectedShapeSidebar)
+  const [strokeColor, setStrokeColor] = useState('#fff')
+  const [thickness, setThickness] = useState(2)
+  const [lineStyle, setLineStyle] = useState('solid')
+  const [taper, setTaper] = useState('uniform')
+  const [roughness, setRoughness] = useState('smooth')
+  const [opacity, setOpacity] = useState(1)
+
+  const updateStroke = useCallback((v) => { setStrokeColor(v); if (window.updateSelectedFreehandStyle) window.updateSelectedFreehandStyle({ stroke: v }) }, [])
+  const updateThickness = useCallback((v) => { setThickness(v); if (window.updateSelectedFreehandStyle) window.updateSelectedFreehandStyle({ strokeWidth: v }) }, [])
+  const updateTaper = useCallback((v) => { setTaper(v); if (window.updateSelectedFreehandStyle) window.updateSelectedFreehandStyle({ thinning: TAPER_MAP[v] }) }, [])
+  const updateRoughness = useCallback((v) => { setRoughness(v); if (window.updateSelectedFreehandStyle) window.updateSelectedFreehandStyle({ roughness: v }) }, [])
+  const updateOpacity = useCallback((v) => { setOpacity(v); if (window.updateSelectedFreehandStyle) window.updateSelectedFreehandStyle({ opacity: v }) }, [])
+
+  return (
+    <ShapeSidebar visible={activeTool === TOOLS.FREEHAND || selectedShapeSidebar === 'paintbrush'}>
+      <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 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-pen" tooltip="Taper">
+        <p className="text-xs text-text-muted uppercase tracking-wider mb-2">{t('sidebar.sectionHeader.taper')}</p>
+        <div className="flex flex-col gap-0.5">
+          {[
+            { v: 'uniform', i: 'bxs-minus-circle', l: 'Uniform' },
+            { v: 'pen', i: 'bxs-pen', l: 'Pen' },
+            { v: 'brush', i: 'bxs-brush', l: 'Brush' },
+          ].map((t) => (
+            <button key={t.v} onClick={() => updateTaper(t.v)}
+              className={`flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${taper === t.v ? 'bg-[#5B57D1] text-white' : 'text-text-secondary hover:bg-white/[0.06]'}`}
+            >
+              <i className={`bx ${t.i} text-sm`} /> {t.l}
+            </button>
+          ))}
+        </div>
+      </ToolbarButton>
+
+      <Divider />
+
+      <ToolbarButton icon="bxs-shape-polygon" tooltip="Roughness">
+        <p className="text-xs text-text-muted uppercase tracking-wider mb-2">{t('sidebar.sectionHeader.roughness')}</p>
+        <div className="flex flex-col gap-0.5">
+          {[
+            { v: 'smooth', i: 'bxs-droplet', l: 'Smooth' },
+            { v: 'medium', i: 'bxs-leaf', l: 'Medium' },
+            { v: 'rough', i: 'bxs-bolt', l: 'Rough' },
+          ].map((r) => (
+            <button key={r.v} onClick={() => updateRoughness(r.v)}
+              className={`flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${roughness === r.v ? 'bg-[#5B57D1] text-white' : 'text-text-secondary hover:bg-white/[0.06]'}`}
+            >
+              <i className={`bx ${r.i} text-sm`} /> {r.l}
+            </button>
+          ))}
+        </div>
+      </ToolbarButton>
+
+      <Divider />
+
+      <ToolbarButton icon="bxs-sun" tooltip={t('sidebar.opacity')}>
+        <p className="text-xs text-text-muted uppercase tracking-wider mb-2">Opacity {Math.round(opacity * 100)}%</p>
+        <input
+          type="range" min="0" max="1" step="0.05" value={opacity}
+          onChange={(e) => updateOpacity(parseFloat(e.target.value))}
+          className="w-28 h-1 bg-white/10 rounded-full appearance-none cursor-pointer accent-[#5B57D1]"
+        />
+      </ToolbarButton>
+      <Divider />
+      <LayerControls />
+    </ShapeSidebar>
+  )
+}

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

@@ -0,0 +1,165 @@
+"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-[#5B57D1] 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 RectangleSidebar() {
+  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 update = useCallback((changes, localSetters) => {
+    Object.entries(localSetters).forEach(([, fn]) => fn())
+    if (window.updateSelectedRectStyle) window.updateSelectedRectStyle(changes)
+  }, [])
+
+  const updateStroke = useCallback((v) => { setStrokeColor(v); if (window.updateSelectedRectStyle) window.updateSelectedRectStyle({ stroke: v }) }, [])
+  const updateBg = useCallback((v) => { setBgColor(v); if (window.updateSelectedRectStyle) window.updateSelectedRectStyle({ fill: v }) }, [])
+  const updateThickness = useCallback((v) => { setThickness(v); if (window.updateSelectedRectStyle) window.updateSelectedRectStyle({ strokeWidth: v }) }, [])
+  const updateStyle = useCallback((v) => { setLineStyle(v); if (window.updateSelectedRectStyle) window.updateSelectedRectStyle({ outlineStyle: v }) }, [])
+  const updateFill = useCallback((v) => { setFillStyle(v); if (window.updateSelectedRectStyle) window.updateSelectedRectStyle({ fillStyle: v }) }, [])
+
+  return (
+    <ShapeSidebar visible={activeTool === TOOLS.RECTANGLE || selectedShapeSidebar === 'rectangle'}>
+      {/* Stroke color */}
+      <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 />
+
+      {/* Background */}
+      <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 />
+
+      {/* Thickness */}
+      <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 />
+
+      {/* Stroke style */}
+      <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 />
+
+      {/* Fill pattern */}
+      <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>
+  )
+}

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

@@ -0,0 +1,130 @@
+"use client"
+
+import { useState, useRef, useEffect } from 'react'
+import useSketchStore from '../../store/useSketchStore'
+
+/**
+ * A toolbar button that opens a popover panel above it on click.
+ * Shows an icon (or custom preview) in the bar, popover shows full options.
+ */
+export function ToolbarButton({ icon, preview, children, tooltip }) {
+  const [open, setOpen] = useState(false)
+  const ref = useRef(null)
+
+  // Close on outside click
+  useEffect(() => {
+    if (!open) return
+    const handler = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false)
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open])
+
+  return (
+    <div ref={ref} className="relative flex items-center">
+      <button
+        onClick={() => setOpen(!open)}
+        title={tooltip}
+        className={`h-9 flex items-center gap-1.5 px-3 rounded-lg transition-all duration-100 ${
+          open
+            ? 'bg-surface-active text-text-primary'
+            : 'text-text-muted hover:text-text-primary hover:bg-surface-hover'
+        }`}
+      >
+        {preview || (icon && <i className={`bx ${icon} text-base`} />)}
+        <svg className={`w-2 h-2 opacity-40 transition-transform duration-100 ${open ? 'rotate-180' : ''}`} viewBox="0 0 8 5" fill="none" stroke="currentColor" strokeWidth="1.5">
+          <path d="M1 1l3 3 3-3" />
+        </svg>
+      </button>
+
+      {open && (
+        <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 z-20">
+          <div className="bg-surface-card border border-border-light rounded-xl p-3 shadow-xl shadow-black/10 min-w-max">
+            {children}
+          </div>
+          {/* Arrow pointer */}
+          <div className="absolute -bottom-[5px] left-1/2 -translate-x-1/2 w-2.5 h-2.5 rotate-45 bg-surface-card border-r border-b border-border-light" />
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Simple toolbar divider
+ */
+function Divider() {
+  return <div className="w-px h-5 bg-surface-hover mx-0.5 shrink-0" />
+}
+
+/**
+ * Bottom toolbar container - appears when tool/shape is active
+ */
+export default function ShapeSidebar({ visible, children }) {
+  const viewMode = useSketchStore((s) => s.viewMode)
+  const show = visible && !viewMode
+
+  return (
+    <div
+      className={`absolute bottom-14 left-1/2 -translate-x-1/2 bg-surface border border-border-light rounded-xl px-2 py-1.5 z-[999] font-[lixFont] transition-all duration-200 ${
+        show
+          ? 'opacity-100 pointer-events-auto translate-y-0'
+          : 'opacity-0 pointer-events-none translate-y-2'
+      }`}
+    >
+      <div className="flex items-center gap-0.5">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Layer ordering controls - add to any shape sidebar
+ */
+import { useTranslation } from '../../hooks/useTranslation'
+
+function LayerControls() {
+  const { t } = useTranslation()
+  const doLayer = (method) => {
+    const shape = window.currentShape
+    if (!shape || !window.__layerOrder) return
+    window.__layerOrder[method](shape)
+  }
+
+  return (
+    <div className="flex items-center gap-0.5">
+      <button
+        onClick={() => doLayer('sendToBack')}
+        title={t('sidebar.sendToBack', { defaultValue: 'Send to back' })}
+        className="h-9 w-8 flex items-center justify-center rounded-lg text-text-muted hover:text-text-primary hover:bg-surface-hover transition-all duration-100"
+      >
+        <i className="bx bx-chevrons-down text-base" />
+      </button>
+      <button
+        onClick={() => doLayer('sendBackward')}
+        title={t('sidebar.sendBackward')}
+        className="h-9 w-8 flex items-center justify-center rounded-lg text-text-muted hover:text-text-primary hover:bg-surface-hover transition-all duration-100"
+      >
+        <i className="bx bx-chevron-down text-base" />
+      </button>
+      <button
+        onClick={() => doLayer('bringForward')}
+        title={t('sidebar.bringForward')}
+        className="h-9 w-8 flex items-center justify-center rounded-lg text-text-muted hover:text-text-primary hover:bg-surface-hover transition-all duration-100"
+      >
+        <i className="bx bx-chevron-up text-base" />
+      </button>
+      <button
+        onClick={() => doLayer('bringToFront')}
+        title={t('sidebar.bringToFront', { defaultValue: 'Bring to front' })}
+        className="h-9 w-8 flex items-center justify-center rounded-lg text-text-muted hover:text-text-primary hover:bg-surface-hover transition-all duration-100"
+      >
+        <i className="bx bx-chevrons-up text-base" />
+      </button>
+    </div>
+  )
+}
+
+export { Divider, LayerControls }