@elixpo/lixsketch 5.4.7 → 5.5.0

package/src/react/store/useUIStore.js

@@ -0,0 +1,196 @@
+import { create } from 'zustand'
+
+/**
+ * Swap black↔white colors on all shapes when theme changes.
+ * prevTheme / nextTheme are resolved ('dark' | 'light').
+ */
+function invertShapeColors(prevResolved, nextResolved) {
+  if (prevResolved === nextResolved) return
+  const shapes = window.shapes
+  if (!shapes || shapes.length === 0) return
+
+  // Going light → dark: #000 → #fff.  Going dark → light: #fff → #000.
+  const from = nextResolved === 'light' ? '#ffffff' : '#000000'
+  const to   = nextResolved === 'light' ? '#000000' : '#ffffff'
+
+  const normalize = (c) => {
+    if (!c || c === 'transparent' || c === 'none') return c
+    const lower = c.toLowerCase().trim()
+    if (lower === '#fff' || lower === '#ffffff' || lower === 'white') return '#ffffff'
+    if (lower === '#000' || lower === '#000000' || lower === 'black') return '#000000'
+    return lower
+  }
+
+  for (const shape of shapes) {
+    let changed = false
+    if (shape.options) {
+      if (normalize(shape.options.stroke) === from) {
+        shape.options.stroke = to
+        changed = true
+      }
+      if (normalize(shape.options.fill) === from) {
+        shape.options.fill = to
+        changed = true
+      }
+    }
+    // Text shapes store color directly
+    if (shape.color !== undefined && normalize(shape.color) === from) {
+      shape.color = to
+      changed = true
+    }
+    if (shape.strokeColor !== undefined && normalize(shape.strokeColor) === from) {
+      shape.strokeColor = to
+      changed = true
+    }
+    if (changed && typeof shape.draw === 'function') {
+      shape.draw()
+    }
+  }
+}
+
+function applyTheme(theme) {
+  // Issue #38 bug #1: scope theme to body classes so light mode only
+  // affects the canvas, not the landing/blog pages. Token values live
+  // in `body.canvas-mode` (light default) and `body.canvas-mode.theme-
+  // dark` (toggle) rules in src/app/globals.css.
+  const body = document.body
+  if (!body) return
+  const resolved = theme === 'system'
+    ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+    : theme
+  body.classList.remove('theme-dark', 'theme-light')
+  if (resolved === 'dark') body.classList.add('theme-dark')
+
+  const svgEl = window.svg
+  if (svgEl) svgEl.style.background = resolved === 'light' ? '#f4f3ee' : ''
+}
+
+const useUIStore = create((set, get) => ({
+  // --- Modals ---
+  shortcutsModalOpen: false,
+  saveModalOpen: false,
+  aiModalOpen: false,
+  graphModalOpen: false,
+  commandPaletteOpen: false,
+  helpModalOpen: false,
+  exportImageModalOpen: false,
+  findBarOpen: false,
+  canvasPropertiesOpen: false,
+  imageGenerateModalOpen: false,
+
+  toggleShortcutsModal: () =>
+    set((s) => ({ shortcutsModalOpen: !s.shortcutsModalOpen })),
+  toggleSaveModal: () =>
+    set((s) => ({ saveModalOpen: !s.saveModalOpen })),
+  toggleAIModal: () =>
+    set((s) => ({ aiModalOpen: !s.aiModalOpen })),
+  toggleGraphModal: () =>
+    set((s) => ({ graphModalOpen: !s.graphModalOpen })),
+  toggleCommandPalette: () =>
+    set((s) => ({ commandPaletteOpen: !s.commandPaletteOpen })),
+  toggleHelpModal: () =>
+    set((s) => ({ helpModalOpen: !s.helpModalOpen })),
+  toggleExportImageModal: () =>
+    set((s) => ({ exportImageModalOpen: !s.exportImageModalOpen })),
+  toggleFindBar: () =>
+    set((s) => ({ findBarOpen: !s.findBarOpen })),
+  closeFindBar: () =>
+    set({ findBarOpen: false }),
+  toggleCanvasProperties: () =>
+    set((s) => ({ canvasPropertiesOpen: !s.canvasPropertiesOpen })),
+  toggleImageGenerateModal: () =>
+    set((s) => ({ imageGenerateModalOpen: !s.imageGenerateModalOpen })),
+  closeImageGenerateModal: () =>
+    set({ imageGenerateModalOpen: false }),
+  closeAllModals: () =>
+    set({ shortcutsModalOpen: false, saveModalOpen: false, aiModalOpen: false, graphModalOpen: false, commandPaletteOpen: false, helpModalOpen: false, exportImageModalOpen: false, findBarOpen: false, canvasPropertiesOpen: false, imageGenerateModalOpen: false }),
+
+  // --- Menu ---
+  menuOpen: false,
+  toggleMenu: () => set((s) => ({ menuOpen: !s.menuOpen })),
+  closeMenu: () => set({ menuOpen: false }),
+
+  // --- Workspace ---
+  workspaceName: '',
+  setWorkspaceName: (name) => {
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('lixsketch-workspace-name', name)
+    }
+    set({ workspaceName: name })
+  },
+
+  // --- Save Status ---
+  // 'idle' | 'local' | 'cloud' | 'failed'
+  saveStatus: 'idle',
+  setSaveStatus: (status) => set({ saveStatus: status }),
+
+  // --- Session / Encryption ---
+  // Key is persisted in localStorage keyed by session ID so it survives page refreshes.
+  // This ensures re-saving a workspace uses the same key, keeping old share links valid.
+  sessionEncryptionKey: null,
+  setSessionEncryptionKey: (key, sessionId) => {
+    if (typeof window !== 'undefined' && sessionId) {
+      localStorage.setItem(`lixsketch-enc-key-${sessionId}`, key)
+    }
+    set({ sessionEncryptionKey: key })
+  },
+  loadEncryptionKeyForSession: (sessionId) => {
+    if (typeof window !== 'undefined' && sessionId) {
+      const stored = localStorage.getItem(`lixsketch-enc-key-${sessionId}`)
+      if (stored) {
+        set({ sessionEncryptionKey: stored })
+        return stored
+      }
+    }
+    return null
+  },
+  clearEncryptionKeyForSession: (sessionId) => {
+    if (typeof window !== 'undefined' && sessionId) {
+      localStorage.removeItem(`lixsketch-enc-key-${sessionId}`)
+    }
+    set({ sessionEncryptionKey: null })
+  },
+
+  // --- Canvas Loading ---
+  canvasLoading: false,
+  canvasLoadingMessage: 'Loading canvas...',
+  setCanvasLoading: (loading, message) => set({ canvasLoading: loading, canvasLoadingMessage: message || 'Loading canvas...' }),
+
+  // --- Theme ---
+  // Issue #38 bug #1: light by default. Dark stays available via toggle.
+  theme: 'light',
+  setTheme: (newTheme) => {
+    const prev = get().theme
+    const resolve = (t) => t === 'system'
+      ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+      : t
+    invertShapeColors(resolve(prev), resolve(newTheme))
+    applyTheme(newTheme)
+    set({ theme: newTheme })
+  },
+
+  // --- Language / i18n ---
+  language: 'en',
+  setLanguage: (lang) => {
+    set({ language: lang })
+  },
+  persistUIPrefs: (prefs) => {
+    if (typeof window !== 'undefined') {
+      const existing = localStorage.getItem('lix_ui_prefs')
+      let parsed = {}
+      try {
+        if (existing) parsed = JSON.parse(existing)
+      } catch (e) {}
+      
+      const updated = { ...parsed, ...prefs }
+      localStorage.setItem('lix_ui_prefs', JSON.stringify(updated))
+      
+      if (prefs.language) {
+        set({ language: prefs.language })
+        window.dispatchEvent(new CustomEvent('lix-language-changed', { detail: { language: prefs.language } }))
+      }
+    }
+  }
+}))
+
+export default useUIStore

package/src/react/styles/arrowSidebar.css

@@ -0,0 +1,263 @@
+.arrowSideBar {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: auto;
+    border-radius: 15px;
+    height: auto;
+    background-color: #232329;
+    overflow: visible;
+    padding: 5px 10px;
+    transition: 0.5s;
+    z-index: 100;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    filter: blur(0px);
+    opacity: 1;
+}
+
+.arrowSideBar.hidden {
+    opacity: 0;
+    pointer-events: none;
+    filter: blur(10px);
+    transform: translateX(-50%) translateY(20px);
+    transition: 0.5s;
+    z-index: -1;
+}
+
+/*  Combined Labels  */
+.arrowColorLabel,
+.arrowThicknessLabel,
+.arrowStyleLabel,
+.arrowTypeLabel,
+.arrowHeadLabel,
+.arrowCurveLabel {
+    display: none;
+}
+
+/* Combined containers */
+.arrowColorsarrow,
+.arrowThickness,
+.arrowStyle,
+.arrowType,
+.arrowHead,
+.arrowCurve {
+    position: static;
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+    height: 40px;
+    gap: 5px;
+    align-items: center;
+    padding: 0 8px;
+    box-sizing: border-box;
+    border-right: 1px solid rgba(255,255,255,0.15);
+}
+
+.arrowCurve {
+    border-right: none;
+}
+
+
+/* Combined styles for color, background and fill spans */
+.arrowColorsarrow span {
+    position: relative;
+    width: 30px;
+    height: 30px;
+    border-radius: 10px;
+    margin: 0 2px;
+    cursor: pointer;
+    box-sizing: border-box;
+    transition: 0.25s;
+    flex-shrink: 0;
+}
+
+/* Curve presets */
+.arrowCurve span {
+    width: 35px;
+    height: 35px;
+    border-radius: 10px;
+    cursor: pointer;
+    color: #fff;
+    background: #31303B;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    transition: 0.25s;
+    border: 2px solid transparent;
+    flex-shrink: 0;
+}
+.arrowCurve span.selected {
+    background: #444480;
+    border: 2px solid #3c09d6;
+    transition: 0.25s;
+    transform: scale(1.1);
+}
+.arrowCurve span svg {
+    width: 28px;
+    height: 28px;
+    stroke: #fff;
+}
+
+/* Combined selected styles for color background and fill spans */
+.arrowColorsarrow span.selected
+ {
+    border: 2px solid #3c09d6;
+    transform: scale(1.3); /* Using transform instead of scale */
+    transition: 0.25s;
+}
+
+/* Color-specific styles */
+.arrowColorsarrow span:nth-child(1) { background-color: #fff; }
+.arrowColorsarrow span:nth-child(2) { background: #FF8383; }
+.arrowColorsarrow span:nth-child(3) { background-color: #3A994C; }
+.arrowColorsarrow span:nth-child(4) { background-color: #56A2E8; }
+.arrowColorsarrow span:nth-child(5) { background: #FFD700; }
+
+/* Background-specific styles */
+.arrowBackground span:nth-child(1) { background-color: #fff; }
+.arrowBackground span:nth-child(2) { background-color: #5B2D2D; }
+.arrowBackground span:nth-child(3) { background-color: #043B0C; }
+.arrowBackground span:nth-child(4) { background-color: #154163; }
+.arrowBackground span:nth-child(5) { background-color: #362600; }
+
+
+/* Thickness styles */
+.arrowThickness span {
+    width: 40px;
+    height: 40px;
+    position: relative;
+    left: 0;
+    border-radius: 10px;
+    margin: 0 5px;
+    cursor: pointer;
+    color: #fff;
+    background: #31303B;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    font-size: 30px;
+    transition: 0.25s;
+    flex-shrink: 0; /* Prevent shrinking */
+}
+
+.arrowThickness span.selected {
+    background: #444480;
+    transition: 0.25s;
+}
+
+.arrowThickness span:nth-child(1) { font-weight: 100; }
+.arrowThickness span:nth-child(2) { font-weight: 500; }
+.arrowThickness span:nth-child(3) { font-weight: 700; }
+
+/* Fill styles */
+
+
+.arrowStyle
+{
+    gap: 20px;
+}
+/* Style styles */
+.arrowStyle span {
+    width: 35px;
+    height: 35px;
+    left: 10%;
+    border-radius: 10px;
+    margin: 0; /* Remove left-right margins */
+    cursor: pointer;
+    color: #fff;
+    background: #31303B;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    transition: 0.25s;
+    border: 2px solid transparent;
+    flex-shrink: 0; /* Prevent shrinking */
+}
+
+.arrowStyle span.selected {
+    background: #444480;
+    border: 2px solid #3c09d6;
+    transition: 0.25s;
+    transform: scale(1.1); /* Using transform instead of scale */
+}
+
+.arrowStyle span svg {
+    width: 30px;
+    height: 30px;
+    stroke: #fff;
+    transition: 0.25s;
+}
+
+.arrowStyle span.selected svg {
+    stroke: #FFD700;
+}
+
+.arrowType 
+{
+    gap: 20px;
+}
+.arrowType span 
+{
+    width: 35px;
+    height: 35px;
+    left: 10%;
+    border-radius: 10px;
+    margin: 0; /* Remove left-right margins */
+    cursor: pointer;
+    color: #fff;
+    background: #31303B;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    transition: 0.25s;
+    border: 2px solid transparent;
+    flex-shrink: 0; /* Prevent shrinking */
+}
+
+.arrowType span.selected 
+{
+    background: #444480;
+    border: 2px solid #3c09d6;
+    transition: 0.25s;
+    transform: scale(1.1); 
+}
+.arrowType span svg {
+    width: 30px;
+    height: 30px;
+    stroke: #fff;
+    transition: 0.25s;
+}
+
+.arrowHead 
+{
+    gap: 10px;
+}
+
+.arrowHead span.selected 
+{
+    background: #444480;
+    border: 2px solid #3c09d6;
+    transition: 0.25s;
+    transform: scale(1.1);
+}
+
+.arrowHead span
+{
+    width: 35px;
+    height: 35px;
+    left: 10%;
+    border-radius: 10px;
+    margin: 0; /* Remove left-right margins */
+    cursor: pointer;
+    color: #fff;
+    background: #31303B;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    transition: 0.25s;
+    border: 2px solid transparent;
+    flex-shrink: 0; /* Prevent shrinking */
+}

package/src/react/styles/canvasStroke.css

@@ -0,0 +1,47 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+html, body {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: #f0f0f0;
+}
+
+.container 
+{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background: #121212;
+    position: relative;
+}
+
+
+svg {
+    width: 100vw;
+    height: 100vh;
+    touch-action: none;
+}
+
+path {
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+#freehand-canvas
+{
+    overflow: hidden;
+    max-height: 100%;
+    max-width: 100%;
+}
+#freehand-canvas g,
+#freehand-canvas path {
+    pointer-events: all;
+    z-index: 1000;
+
+}   
+
+