@elixpo/lixsketch 5.4.7 → 5.5.1

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

@@ -0,0 +1,174 @@
+"use client"
+
+import useSketchStore, { TOOLS } from '../../store/useSketchStore'
+import ShapeSidebar, { ToolbarButton, Divider, LayerControls } from './ShapeSidebar'
+import { useState, useCallback, useEffect } from 'react'
+import { useTranslation } from '../../hooks/useTranslation'
+
+const TEXT_COLORS = ['#1a1a20', '#ffffff', '#FF8383', '#3A994C', '#56A2E8', '#FFD700', '#FF69B4', '#A855F7']
+
+const FONTS = [
+  { value: 'lixFont', label: 'Lix' },
+  { value: 'lixCode', label: 'Code' },
+  { value: 'lixDefault', label: 'Default' },
+  { value: 'lixFancy', label: 'Fancy' },
+]
+
+const SIZE_MAP = { S: '20px', M: '30px', L: '48px', XL: '72px' }
+
+const LANGUAGES = [
+  'javascript', 'typescript', 'python', 'java', 'c', 'cpp', 'csharp',
+  'go', 'rust', 'ruby', 'php', 'swift', 'kotlin', 'html', 'css',
+  'sql', 'bash', 'json', 'yaml', 'markdown',
+]
+
+export default function TextSidebar() {
+  const { t } = useTranslation()
+  const activeTool = useSketchStore((s) => s.activeTool)
+  const selectedShapeSidebar = useSketchStore((s) => s.selectedShapeSidebar)
+  const [textColor, setTextColor] = useState('#fff')
+  const [fontSize, setFontSize] = useState('M')
+  const [font, setFont] = useState('lixFont')
+  const [codeMode, setCodeMode] = useState(false)
+  const [language, setLanguage] = useState('javascript')
+
+  // Sync code mode state from engine when a shape is selected
+  useEffect(() => {
+    window.__onCodeModeChanged = (isCode) => {
+      setCodeMode(isCode)
+      window.isTextInCodeMode = isCode
+    }
+    return () => { window.__onCodeModeChanged = null }
+  }, [])
+
+  const updateColor = useCallback((c) => {
+    setTextColor(c)
+    if (window.updateSelectedTextStyle) window.updateSelectedTextStyle({ color: c })
+  }, [])
+
+  const updateFont = useCallback((f) => {
+    setFont(f)
+    if (window.updateSelectedTextStyle) window.updateSelectedTextStyle({ font: f })
+  }, [])
+
+  const updateSize = useCallback((s) => {
+    setFontSize(s)
+    if (window.updateSelectedTextStyle) window.updateSelectedTextStyle({ fontSize: SIZE_MAP[s] })
+  }, [])
+
+  const toggleCodeMode = useCallback(() => {
+    const next = !codeMode
+    setCodeMode(next)
+    window.isTextInCodeMode = next
+    if (next) {
+      // Convert selected text → code
+      if (window.__convertTextToCode) window.__convertTextToCode()
+    } else {
+      // Convert selected code → text
+      if (window.__convertCodeToText) window.__convertCodeToText()
+    }
+  }, [codeMode])
+
+  const updateLanguage = useCallback((lang) => {
+    setLanguage(lang)
+    if (window.__setCodeLanguage) window.__setCodeLanguage(lang)
+  }, [])
+
+  const visible = activeTool === TOOLS.TEXT || activeTool === TOOLS.CODE || selectedShapeSidebar === 'text'
+
+  return (
+    <>
+    <ShapeSidebar visible={visible}>
+      {/* Color */}
+      <ToolbarButton tooltip={t('sidebar.textColor')}
+        preview={<span className="w-4 h-4 rounded-md border border-white/20" style={{ backgroundColor: textColor }} />}
+      >
+        <p className="text-xs text-text-muted uppercase tracking-wider mb-2">{t('sidebar.color')}</p>
+        <div className="grid grid-cols-4 gap-1.5">
+          {TEXT_COLORS.map((c) => (
+            <button key={c} onClick={() => updateColor(c)}
+              className={`w-7 h-7 rounded-md border-[1.5px] transition-all duration-100 ${textColor === c ? 'border-[#5B57D1] scale-110' : 'border-white/[0.08] hover:border-white/20'}`}
+              style={{ backgroundColor: c }}
+            />
+          ))}
+        </div>
+      </ToolbarButton>
+
+      {!codeMode && (
+        <>
+          <Divider />
+
+          {/* Font */}
+          <ToolbarButton icon="bxs-font-family" tooltip={t('sidebar.font')}>
+            <p className="text-xs text-text-muted uppercase tracking-wider mb-2">{t('sidebar.font')}</p>
+            <div className="flex flex-col gap-0.5">
+              {FONTS.map((f) => (
+                <button key={f.value} onClick={() => updateFont(f.value)}
+                  className={`flex items-center px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${font === f.value ? 'bg-[#5B57D1] text-white' : 'text-text-secondary hover:bg-white/[0.06]'}`}
+                  style={{ fontFamily: f.value }}
+                >
+                  {f.label}
+                </button>
+              ))}
+            </div>
+          </ToolbarButton>
+        </>
+      )}
+
+      <Divider />
+
+      {/* Size */}
+      <ToolbarButton icon="bxs-chevrons-up" tooltip={t('sidebar.size')}>
+        <p className="text-xs text-text-muted uppercase tracking-wider mb-2">{t('sidebar.size')}</p>
+        <div className="flex items-center gap-1">
+          {['S', 'M', 'L', 'XL'].map((s) => (
+            <button key={s} onClick={() => updateSize(s)}
+              className={`w-8 h-8 flex items-center justify-center rounded-lg text-xs transition-all duration-100 ${fontSize === s ? 'bg-[#5B57D1]/20 text-[#5B57D1]' : 'text-text-muted hover:bg-white/[0.06]'}`}
+            >{s}</button>
+          ))}
+        </div>
+      </ToolbarButton>
+
+      <Divider />
+
+      {/* Code mode */}
+      <ToolbarButton icon="bxs-terminal" tooltip={t('sidebar.codeMode')}>
+        <p className="text-xs text-text-muted uppercase tracking-wider mb-2">{t('sidebar.code')}</p>
+        <div className="flex flex-col gap-2">
+          <button onClick={toggleCodeMode}
+            className={`flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${codeMode ? 'bg-[#5B57D1] text-white' : 'text-text-secondary hover:bg-white/[0.06]'}`}
+          >
+            <div className={`w-6 h-3 rounded-full transition-all duration-150 relative ${codeMode ? 'bg-white/30' : 'bg-white/10'}`}>
+              <div className={`absolute top-0.5 w-2 h-2 rounded-full bg-white transition-all duration-150 ${codeMode ? 'left-3.5' : 'left-0.5'}`} />
+            </div>
+            {codeMode ? t('sidebar.on') : t('sidebar.off')}
+          </button>
+          {codeMode && (
+            <div className="flex flex-wrap gap-1 max-w-[180px]">
+              {LANGUAGES.map((lang) => (
+                <button key={lang} onClick={() => updateLanguage(lang)}
+                  className={`px-1.5 py-0.5 rounded text-[9px] transition-all duration-100 ${language === lang ? 'bg-[#5B57D1]/20 text-[#5B57D1]' : 'text-text-dim hover:bg-white/[0.06] hover:text-text-secondary'}`}
+                >{lang}</button>
+              ))}
+            </div>
+          )}
+        </div>
+      </ToolbarButton>
+      <Divider />
+      <LayerControls />
+    </ShapeSidebar>
+
+    {/* Keyboard shortcut hint — positioned below the property bar */}
+    <div
+      className={`absolute bottom-7 left-1/2 -translate-x-1/2 z-[998] font-[lixFont] transition-all duration-200 ${
+        visible ? 'opacity-100 translate-y-0' : 'opacity-0 pointer-events-none translate-y-2'
+      }`}
+    >
+      <p className="text-[10px] text-white/30 leading-relaxed text-center whitespace-nowrap">
+        <span className="text-white/50">Ctrl+Enter</span> / <span className="text-white/50">Enter</span> — {t('sidebar.renderText')} &nbsp;&nbsp;
+        <span className="text-white/50">Shift+Enter</span> — {t('sidebar.newLine')}
+      </p>
+    </div>
+    </>
+  )
+}

package/src/react/hooks/inertStores.js

@@ -0,0 +1,58 @@
+// Inert replacements for the standalone product's auth / cloud / collab
+// state. These let us copy components that reference cloud-coupled hooks
+// without hauling the whole product backend along. Each export mirrors
+// the shape the consumer expects but with no-op implementations.
+
+const noop = () => {};
+
+const inertAuth = {
+  isAuthenticated: false,
+  user: null,
+  setUser: noop,
+  setAuthenticated: noop,
+  logout: noop,
+};
+
+const inertCollab = {
+  roomId: null,
+  connected: false,
+  setRoom: noop,
+  setConnected: noop,
+};
+
+const inertProfile = {
+  profile: null,
+  setProfile: noop,
+};
+
+function makeStore(state) {
+  // Match the zustand call signature used in selectors:
+  //   const x = useStore((s) => s.foo)
+  //   const x = useStore.getState().foo
+  function useStore(selector) {
+    return typeof selector === 'function' ? selector(state) : state;
+  }
+  useStore.getState = () => state;
+  useStore.setState = noop;
+  useStore.subscribe = () => () => {};
+  return useStore;
+}
+
+export const useAuthStore = makeStore(inertAuth);
+export const useCollabStore = makeStore(inertCollab);
+export const useProfileStore = makeStore(inertProfile);
+
+export const WORKER_URL = '';
+export function getSessionID() {
+  if (typeof window !== 'undefined' && window.__sessionID) return window.__sessionID;
+  return null;
+}
+
+export async function triggerDocCloudSync() { /* offline mode: no-op */ }
+export function persistLayoutMode() { /* offline mode: no-op */ }
+
+// Cloud-sync trigger used by the standalone product's AppMenu / keyboard
+// shortcuts. The package's offline build should never hit a server, so we
+// resolve immediately. The host's onSceneChange callback (passed to
+// LixSketchCanvas) handles real persistence.
+export async function triggerCloudSync() { return false; }

package/src/react/hooks/useSketchEngine.js

@@ -0,0 +1,76 @@
+"use client"
+
+import { useEffect, useRef } from 'react'
+import useSketchStore from '../store/useSketchStore'
+import { WORKER_URL } from './inertStores'
+
+/**
+ * Hook that initializes the SketchEngine on the provided SVG element
+ * and bridges Zustand activeTool changes to the engine's window flags.
+ */
+export default function useSketchEngine(svgRef, ready = true) {
+  const engineRef = useRef(null)
+
+  useEffect(() => {
+    if (!ready || !svgRef.current) return
+
+    let cancelled = false
+
+    async function initEngine() {
+      try {
+        // Expose Zustand store API on window BEFORE engine init
+        // so SketchEngine globals can call into React state
+        const storeState = useSketchStore.getState()
+        window.__sketchStoreApi = {
+          setSelectedShapeSidebar: (sidebar) => useSketchStore.getState().setSelectedShapeSidebar(sidebar),
+          clearSelectedShapeSidebar: () => useSketchStore.getState().clearSelectedShapeSidebar(),
+          setActiveTool: (tool, opts) => useSketchStore.getState().setActiveTool(tool, opts),
+          setZoom: (zoom) => useSketchStore.setState({ zoom }),
+          getState: () => useSketchStore.getState(),
+        }
+
+        // Import the engine class directly (not via ../../index.js) so the
+        // chunk doesn't pull SceneSerializer + the shape graph in before
+        // engine.init() has had a chance to wire window.svg / window.rough.
+        const { SketchEngine } = await import('../../SketchEngine.js')
+        if (cancelled) return
+
+        const engine = new SketchEngine(svgRef.current)
+        await engine.init()
+        engineRef.current = engine
+        window.__sketchEngine = engine
+        window.__WORKER_URL = WORKER_URL
+
+        // Sync current tool immediately after init
+        const currentTool = useSketchStore.getState().activeTool
+        engine.setActiveTool(currentTool)
+      } catch (err) {
+        console.error('[useSketchEngine] Failed to initialize:', err)
+      }
+    }
+
+    initEngine()
+
+    return () => {
+      cancelled = true
+      if (engineRef.current) {
+        engineRef.current.cleanup()
+        engineRef.current = null
+      }
+    }
+  }, [svgRef, ready])
+
+  // Subscribe to Zustand activeTool changes and bridge to engine
+  useEffect(() => {
+    const unsub = useSketchStore.subscribe(
+      (state, prevState) => {
+        if (state.activeTool !== prevState?.activeTool && engineRef.current) {
+          engineRef.current.setActiveTool(state.activeTool)
+        }
+      }
+    )
+    return unsub
+  }, [])
+
+  return engineRef
+}

package/src/react/hooks/useTranslation.js

@@ -0,0 +1,92 @@
+// Lightweight i18n stub for the offline package. Converts dotted keys
+// into readable labels so consumers don't have to ship a full translation
+// table just to get nice button names. A real `t()` from the host can be
+// passed in via `options.t` if needed (LixSketchCanvas can wire it up
+// later).
+//
+//   t('sidebar.sectionHeader.stroke')           → 'Stroke'
+//   t('sidebar.bringForward')                   → 'Bring forward'
+//   t('menu.canvasBackground')                  → 'Canvas background'
+//   t('shortcuts.deselect', 'Deselect')         → 'Deselect' (fallback wins)
+
+// Hand-written overrides for keys that don't reduce cleanly from the
+// last segment alone (acronyms, hyphens, multi-word phrases).
+const OVERRIDES = {
+  'sidebar.sectionHeader.stroke': 'Stroke',
+  'sidebar.sectionHeader.fill': 'Fill',
+  'sidebar.sectionHeader.background': 'Background',
+  'sidebar.sectionHeader.backgroundImage': 'Background image',
+  'sidebar.sectionHeader.width': 'Width',
+  'sidebar.sectionHeader.edge': 'Edge style',
+  'sidebar.sectionHeader.head': 'Arrow head',
+  'sidebar.sectionHeader.type': 'Type',
+  'sidebar.sectionHeader.name': 'Name',
+  'sidebar.sectionHeader.color': 'Color',
+  'sidebar.sectionHeader.fit': 'Fit',
+  'sidebar.sectionHeader.roughness': 'Roughness',
+  'sidebar.sectionHeader.sloppiness': 'Sloppiness',
+  'sidebar.sectionHeader.taper': 'Taper',
+  'menu.canvasBackground': 'Canvas background',
+  'menu.canvasProperties': 'Canvas properties',
+  'menu.exportImage': 'Export as image',
+  'menu.findText': 'Find text',
+  'menu.quickSave': 'Quick save',
+  'menu.resetCanvas': 'Reset canvas',
+  'menu.saveShare': 'Save & share',
+  'menu.showGrid': 'Show grid',
+  'menu.signIn': 'Sign in',
+  'menu.signOut': 'Sign out',
+  'prefs.toolLock': 'Tool lock',
+  'prefs.toggleGrid': 'Toggle grid',
+  'prefs.snapObjects': 'Snap to objects',
+  'prefs.snapMidpoints': 'Snap to midpoints',
+  'prefs.zenMode': 'Zen mode',
+  'prefs.viewMode': 'View mode',
+  'prefs.canvasShapeProps': 'Canvas & shape properties',
+  'prefs.arrowBinding': 'Arrow binding',
+  'prefs.language': 'Language',
+  'sidebar.bringForward': 'Bring forward',
+  'sidebar.bringToFront': 'Bring to front',
+  'sidebar.sendBackward': 'Send backward',
+  'sidebar.sendToBack': 'Send to back',
+  'sidebar.fillColor': 'Fill color',
+  'sidebar.strokeColor': 'Stroke color',
+  'sidebar.codeMode': 'Code mode',
+  'sidebar.renderText': 'Render text',
+  'sidebar.newLine': 'New line',
+};
+
+function camelToWords(s) {
+  return s.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/-/g, ' ');
+}
+
+function autoFormat(key) {
+  const last = key.split('.').pop() || key;
+  const words = camelToWords(last);
+  return words.charAt(0).toUpperCase() + words.slice(1);
+}
+
+function tImpl(key, fallbackOrOpts) {
+  if (typeof key !== 'string') return fallbackOrOpts ?? '';
+  // The product calls t() with various signatures: (key), (key, fallback),
+  // (key, { defaultValue }). Handle all of them.
+  let fallback = '';
+  if (typeof fallbackOrOpts === 'string') {
+    fallback = fallbackOrOpts;
+  } else if (fallbackOrOpts && typeof fallbackOrOpts === 'object') {
+    fallback = fallbackOrOpts.defaultValue || '';
+  }
+  if (fallback) return fallback;
+  if (OVERRIDES[key]) return OVERRIDES[key];
+  return autoFormat(key);
+}
+
+export function useTranslation() {
+  return {
+    t: tImpl,
+    locale: 'en',
+    setLocale: () => {},
+  };
+}
+
+export default useTranslation;

package/src/react/index.js

@@ -0,0 +1,41 @@
+/**
+ * @elixpo/lixsketch/react — React component bindings for the LixSketch
+ * engine. Mountable in any React app (e.g. blogs.elixpo) without running a
+ * second server.
+ *
+ * Usage:
+ *   import { LixSketchCanvas } from '@elixpo/lixsketch/react';
+ *   import '@elixpo/lixsketch/react/styles';
+ *
+ *   <LixSketchCanvas
+ *     initialScene={scene}
+ *     onSceneChange={(scene, metadata) => save(scene, metadata)}
+ *     onUploadImage={async (dataUrl) => {
+ *       const r = await fetch('/api/media/upload', { … });
+ *       return { url: r.url, sizeBytes: r.sizeBytes };
+ *     }}
+ *     onExit={() => router.back()}
+ *   />
+ *
+ * The component is offline-first: it does not touch any cloud sync, AI, or
+ * auth code paths. The host owns persistence and image upload via the two
+ * callbacks above.
+ */
+
+export { default as LixSketchCanvas } from './LixSketchCanvas.jsx';
+
+// Re-exports — we import each from its specific source file rather than
+// going through `../index.js`, which would pull SceneSerializer.js (and
+// the entire shape graph that references engine globals) into the entry
+// chunk. The engine entry stays available for hosts that explicitly want
+// raw scene IO (`import { saveScene } from '@elixpo/lixsketch'`).
+export { TOOLS } from './toolsEnum.js';
+export { compressImage } from '../utils/imageCompressor.js';
+export {
+  ALLOWED_IMAGE_MIME_TYPES,
+  IMAGE_ACCEPT_ATTR,
+  ALLOWED_IMAGE_EXTENSIONS,
+  isAllowedImage,
+  isAllowedImageDataUrl,
+} from '../utils/allowedImageTypes.js';
+export { installEngineShortcuts, SHORTCUT_MAP } from '../EngineShortcuts.js';

package/src/react/store/useSketchStore.js

@@ -0,0 +1,234 @@
+import { create } from 'zustand'
+
+// Tool enum replaces 15 boolean flags
+export const TOOLS = {
+  SELECT: 'select',
+  PAN: 'pan',
+  RECTANGLE: 'rectangle',
+  CIRCLE: 'circle',
+  LINE: 'line',
+  ARROW: 'arrow',
+  FREEHAND: 'freehand',
+  TEXT: 'text',
+  CODE: 'code',
+  ERASER: 'eraser',
+  LASER: 'laser',
+  IMAGE: 'image',
+  FRAME: 'frame',
+  ICON: 'icon',
+}
+
+// Action types for undo/redo
+export const ACTION = {
+  CREATE: 'create',
+  DELETE: 'delete',
+  MODIFY: 'modify',
+  PASTE: 'paste',
+}
+
+// Tool -> cursor mapping
+const TOOL_CURSORS = {
+  [TOOLS.SELECT]: 'default',
+  [TOOLS.PAN]: 'grab',
+  [TOOLS.RECTANGLE]: 'crosshair',
+  [TOOLS.CIRCLE]: 'crosshair',
+  [TOOLS.LINE]: 'crosshair',
+  [TOOLS.ARROW]: 'crosshair',
+  [TOOLS.FREEHAND]: 'crosshair',
+  [TOOLS.TEXT]: 'text',
+  [TOOLS.CODE]: 'text',
+  [TOOLS.LASER]: 'crosshair',
+  [TOOLS.IMAGE]: 'crosshair',
+  [TOOLS.FRAME]: 'crosshair',
+  [TOOLS.ICON]: 'crosshair',
+}
+
+// Tool -> sidebar mapping
+const TOOL_SIDEBARS = {
+  [TOOLS.FREEHAND]: 'paintbrush',
+  [TOOLS.RECTANGLE]: 'rectangle',
+  [TOOLS.CIRCLE]: 'circle',
+  [TOOLS.LINE]: 'line',
+  [TOOLS.ARROW]: 'arrow',
+  [TOOLS.TEXT]: 'text',
+  [TOOLS.CODE]: 'text',
+  [TOOLS.FRAME]: 'frame',
+}
+
+// Keyboard shortcut -> tool mapping
+export const SHORTCUT_MAP = {
+  h: TOOLS.PAN,
+  v: TOOLS.SELECT,
+  1: TOOLS.SELECT,
+  r: TOOLS.RECTANGLE,
+  2: TOOLS.RECTANGLE,
+  o: TOOLS.CIRCLE,
+  4: TOOLS.CIRCLE,
+  a: TOOLS.ARROW,
+  5: TOOLS.ARROW,
+  l: TOOLS.LINE,
+  6: TOOLS.LINE,
+  p: TOOLS.FREEHAND,
+  7: TOOLS.FREEHAND,
+  t: TOOLS.TEXT,
+  8: TOOLS.TEXT,
+  9: TOOLS.IMAGE,
+  e: TOOLS.ERASER,
+  0: TOOLS.ERASER,
+  i: TOOLS.ICON,
+  f: TOOLS.FRAME,
+  k: TOOLS.LASER,
+}
+
+const useSketchStore = create((set, get) => ({
+  // --- Active tool (replaces 15 boolean flags) ---
+  activeTool: TOOLS.SELECT,
+  activeSidebar: null, // which sidebar to show
+  selectedShapeSidebar: null, // sidebar shown when a shape is selected (overrides activeSidebar)
+
+  setActiveTool: (tool, { afterDraw } = {}) => {
+    // In view mode, only pan is allowed
+    if (get().viewMode && tool !== TOOLS.PAN) return
+    // Tool lock: don't switch to SELECT after drawing
+    if (afterDraw && tool === TOOLS.SELECT && get().toolLock) return
+    set({
+      activeTool: tool,
+      activeSidebar: TOOL_SIDEBARS[tool] || null,
+      selectedShapeSidebar: null,
+    })
+  },
+
+  // Called by engine when a shape is selected/deselected
+  setSelectedShapeSidebar: (sidebar) => set({ selectedShapeSidebar: sidebar }),
+  clearSelectedShapeSidebar: () => set({ selectedShapeSidebar: null }),
+
+  getCursor: () => {
+    const tool = get().activeTool
+    if (tool === TOOLS.ERASER) {
+      return `url("data:image/svg+xml;base64,${typeof btoa !== 'undefined' ? btoa('<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" fill="#222" stroke="white" stroke-width="2"/></svg>') : ''}") 10 10, auto`
+    }
+    if (tool === TOOLS.LASER) {
+      return `url("data:image/svg+xml;base64,${typeof btoa !== 'undefined' ? btoa('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1971c2" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>') : ''}") 0 0, auto`
+    }
+    return TOOL_CURSORS[tool] || 'crosshair'
+  },
+
+  // --- Shapes ---
+  shapes: [],
+  currentShape: null,
+  lastMousePos: null,
+
+  addShape: (shape) =>
+    set((s) => ({ shapes: [...s.shapes, shape] })),
+
+  removeShape: (shape) =>
+    set((s) => ({ shapes: s.shapes.filter((sh) => sh !== shape) })),
+
+  setCurrentShape: (shape) => set({ currentShape: shape }),
+  setLastMousePos: (pos) => set({ lastMousePos: pos }),
+
+  clearShapes: () => set({ shapes: [], currentShape: null }),
+
+  // --- Undo/Redo ---
+  undoStack: [],
+  redoStack: [],
+
+  pushUndo: (action) =>
+    set((s) => ({
+      undoStack: [...s.undoStack, action],
+      redoStack: [], // clear redo on new action
+    })),
+
+  popUndo: () => {
+    const { undoStack } = get()
+    if (undoStack.length === 0) return null
+    const action = undoStack[undoStack.length - 1]
+    set((s) => ({
+      undoStack: s.undoStack.slice(0, -1),
+      redoStack: [...s.redoStack, action],
+    }))
+    return action
+  },
+
+  popRedo: () => {
+    const { redoStack } = get()
+    if (redoStack.length === 0) return null
+    const action = redoStack[redoStack.length - 1]
+    set((s) => ({
+      redoStack: s.redoStack.slice(0, -1),
+      undoStack: [...s.undoStack, action],
+    }))
+    return action
+  },
+
+  clearHistory: () => set({ undoStack: [], redoStack: [] }),
+
+  // --- Viewport / Zoom ---
+  zoom: 1,
+  viewBox: { x: 0, y: 0, width: 0, height: 0 },
+  translation: { x: 0, y: 0 },
+  isPanning: false,
+  panStart: null,
+
+  setZoom: (zoom) => set({ zoom: Math.max(0.4, Math.min(30, zoom)) }),
+  setViewBox: (vb) => set({ viewBox: vb }),
+  setTranslation: (t) => set({ translation: t }),
+  setIsPanning: (v) => set({ isPanning: v }),
+  setPanStart: (p) => set({ panStart: p }),
+
+  // --- Canvas background ---
+  canvasBackground: 'var(--lixsketch-bg, #ffffff)',
+  setCanvasBackground: (color) => set({ canvasBackground: color }),
+
+  // --- Grid ---
+  gridEnabled: false,
+  toggleGrid: () => set((s) => ({ gridEnabled: !s.gridEnabled })),
+
+  // --- Modes ---
+  viewMode: false,
+  zenMode: false,
+  toolLock: false,
+  snapToObjects: false,
+
+  toggleViewMode: () => {
+    const entering = !get().viewMode
+    if (entering) {
+      set({ viewMode: true, zenMode: false, activeTool: TOOLS.PAN, activeSidebar: null, selectedShapeSidebar: null })
+    } else {
+      set({ viewMode: false, activeTool: TOOLS.SELECT, activeSidebar: null })
+    }
+  },
+  toggleZenMode: () => set((s) => ({ zenMode: !s.zenMode, viewMode: false })),
+
+  // --- Canvas/Docs split layout ---
+  // 'canvas' = sketch only, 'split' = side-by-side, 'docs' = doc only
+  // Hydrated from localStorage on first store consumption (see
+  // hydrateLayoutMode below). Persisted on every change.
+  layoutMode: 'canvas',
+  setLayoutMode: (mode) => {
+    if (!['canvas', 'split', 'docs'].includes(mode)) return
+    set({ layoutMode: mode })
+    if (typeof window !== 'undefined') {
+      try { localStorage.setItem('lixsketch-layout-mode', mode) } catch {}
+    }
+  },
+  hydrateLayoutMode: () => {
+    if (typeof window === 'undefined') return
+    try {
+      const saved = localStorage.getItem('lixsketch-layout-mode')
+      if (saved && ['canvas', 'split', 'docs'].includes(saved)) {
+        set({ layoutMode: saved })
+      }
+    } catch {}
+  },
+  toggleToolLock: () => set((s) => ({ toolLock: !s.toolLock })),
+  toggleSnapToObjects: () => set((s) => ({ snapToObjects: !s.snapToObjects })),
+
+  // --- RoughJS refs (set once after mount) ---
+  roughCanvas: null,
+  roughGenerator: null,
+  setRoughRefs: (canvas, generator) =>
+    set({ roughCanvas: canvas, roughGenerator: generator }),
+}))
+
+export default useSketchStore