@elixpo/lixsketch 5.5.11 → 5.5.13

package/dist/react/styles.css

@@ -6487,15 +6487,22 @@
 
 /* src/react/styles.css */
 .lixsketch-canvas-root {
+  --lix-icon-filter: brightness(0) invert(1);
   position: relative;
   width: 100%;
   height: 100%;
-  background: var(--lixsketch-bg, #0e1014);
-  color: var(--lixsketch-fg, #e6e8ec);
+  background: var(--lixsketch-bg, #15111f);
+  color: var(--lixsketch-fg, #f5effb);
   font-family: var(--lixsketch-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
   overflow: hidden;
   isolation: isolate;
 }
+.theme-light .lixsketch-canvas-root {
+  --lix-icon-filter: none;
+}
+.theme-dark .lixsketch-canvas-root {
+  --lix-icon-filter: brightness(0) invert(1);
+}
 .lixsketch-canvas-svg {
   position: absolute;
   inset: 0;
@@ -6511,7 +6518,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--lixsketch-bg, #0e1014);
+  background: var(--lixsketch-bg, #15111f);
   z-index: 50;
 }
 .lixsketch-canvas-spinner {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elixpo/lixsketch",
-  "version": "5.5.11",
+  "version": "5.5.13",
   "description": "Open-source SVG whiteboard engine + React canvas component with hand-drawn aesthetics — the core of LixSketch",
   "type": "module",
   "main": "src/index.js",

package/src/core/AIRenderer.js

@@ -45,12 +45,12 @@ export function parseMermaid(src) {
     const classAssigns = [];        // { nodeIds: [...], className }
     const nodeStyles = new Map();   // Mermaid `style A fill:...,stroke:...`
     const palette = [
-        { fill: '#e8f3ec', stroke: '#5f836c' },
-        { fill: '#f6eadf', stroke: '#a97852' },
-        { fill: '#eee9f4', stroke: '#7e6b91' },
-        { fill: '#f5efcf', stroke: '#9a8745' },
-        { fill: '#e5f0f1', stroke: '#5d7f82' },
-        { fill: '#f4e5e3', stroke: '#9a6863' },
+        { fill: '#eee9f7', stroke: '#7667a8' },
+        { fill: '#e6def2', stroke: '#8875b5' },
+        { fill: '#ddd2eb', stroke: '#6f5f9c' },
+        { fill: '#f2edf8', stroke: '#9a88bf' },
+        { fill: '#e2daf0', stroke: '#806cab' },
+        { fill: '#ebe4f5', stroke: '#705d9c' },
     ];
 
     function parseStyleProps(value) {
@@ -1349,6 +1349,103 @@ export function generateFramePreviewSVG(frame, width = 500, height = 350) {
 </svg>`;
 }
 
+// ============================================================
+// CANVAS BACKGROUND CONTRAST
+// ============================================================
+
+function colorRgb(value) {
+    if (!value || typeof value !== 'string') return null;
+    const rgbMatch = value.trim().match(/^rgba?\(\s*(\d+(?:\.\d+)?)\s*[, ]\s*(\d+(?:\.\d+)?)\s*[, ]\s*(\d+(?:\.\d+)?)/i);
+    if (rgbMatch) {
+        return {
+            r: Math.min(255, Number(rgbMatch[1])),
+            g: Math.min(255, Number(rgbMatch[2])),
+            b: Math.min(255, Number(rgbMatch[3])),
+        };
+    }
+    let hex = value.trim().replace('#', '');
+    if (hex.length === 3) hex = hex.split('').map(char => char + char).join('');
+    if (!/^[0-9a-f]{6}$/i.test(hex)) return null;
+    return {
+        r: parseInt(hex.slice(0, 2), 16),
+        g: parseInt(hex.slice(2, 4), 16),
+        b: parseInt(hex.slice(4, 6), 16),
+    };
+}
+
+function relativeLuminance(value) {
+    const rgb = colorRgb(value);
+    if (!rgb) return null;
+    const channel = component => {
+        const normalized = component / 255;
+        return normalized <= .03928 ? normalized / 12.92 : Math.pow((normalized + .055) / 1.055, 2.4);
+    };
+    return .2126 * channel(rgb.r) + .7152 * channel(rgb.g) + .0722 * channel(rgb.b);
+}
+
+function contrastRatio(a, b) {
+    const first = relativeLuminance(a);
+    const second = relativeLuminance(b);
+    if (first == null || second == null) return 1;
+    return (Math.max(first, second) + .05) / (Math.min(first, second) + .05);
+}
+
+function readableForeground(background) {
+    return contrastRatio('#34304a', background) >= contrastRatio('#f6f2fb', background)
+        ? '#34304a'
+        : '#f6f2fb';
+}
+
+function readableColor(color, background, minimum = 3) {
+    if (!colorRgb(color) || contrastRatio(color, background) >= minimum) return color;
+    return readableForeground(background);
+}
+
+export function adaptCanvasContrast(background) {
+    if (typeof window === 'undefined' || !Array.isArray(window.shapes)) return;
+    const foreground = readableForeground(background);
+    const muted = foreground === '#34304a' ? '#716a7d' : '#c8bddb';
+
+    window.__canvasContrastColor = foreground;
+    window.__ensureCanvasContrast = readableColor;
+
+    for (const shape of window.shapes) {
+        if (!shape) continue;
+        if (typeof shape.adaptToBackground === 'function') {
+            shape.adaptToBackground(background, foreground, muted);
+            continue;
+        }
+
+        const owner = shape.parentFrame;
+        const generated = !!(shape._diagramType || shape._frameType === 'graph' || owner?._diagramType || owner?._frameType === 'graph');
+        const fill = shape.options?.fill;
+        const solidFill = fill && fill !== 'transparent' && fill !== 'none';
+
+        if (shape.options?.closedFill) {
+            shape.options.outlineStroke = background;
+            if (typeof shape.draw === 'function') shape.draw();
+            continue;
+        }
+
+        if (shape.options?.stroke && (generated || ['#fff', '#ffffff', '#000', '#000000', '#1a1a2e'].includes(shape.options.stroke.toLowerCase()))) {
+            shape.options.stroke = readableColor(shape.options.stroke, background, 3);
+        }
+        if (shape.shapeName === 'frame' && generated && shape.options) {
+            shape.options.stroke = muted;
+        }
+        if ('labelColor' in shape && generated) {
+            shape.labelColor = solidFill ? readableColor(shape.labelColor || foreground, fill, 4.5) : foreground;
+        }
+        if (shape.group && generated) {
+            shape.group.querySelectorAll('text').forEach(text => {
+                const current = text.getAttribute('fill') || foreground;
+                text.setAttribute('fill', solidFill ? readableColor(current, fill, 4.5) : readableColor(current, background, 4.5));
+            });
+        }
+        if (typeof shape.draw === 'function') shape.draw();
+    }
+}
+
 // ============================================================
 // INIT
 // ============================================================
@@ -1358,6 +1455,7 @@ export function initAIRenderer() {
     // Graph, LixScript) can wire arrow endpoints into shapes without
     // import-cycling through this large module.
     window.__autoAttach = autoAttach;
+    window.__adaptCanvasContrast = adaptCanvasContrast;
 
     // Lazy-load sequence renderer
     let _seqParser = null;

package/src/core/GraphEngine.js

@@ -140,6 +140,48 @@ function renderGraphOnCanvas(equations, settings) {
                     window.updateAttachedArrows(this);
                 }
             },
+            adaptToBackground(background, foreground, muted) {
+                const ensureContrast = window.__ensureCanvasContrast || ((color) => color);
+
+                this.group.querySelectorAll('rect').forEach((rect) => {
+                    const fill = rect.getAttribute('fill');
+                    const stroke = rect.getAttribute('stroke');
+                    if (fill && fill !== 'none') rect.setAttribute('fill', background);
+                    if (stroke && stroke !== 'none') {
+                        rect.setAttribute('stroke', muted);
+                        rect.setAttribute('stroke-opacity', '0.45');
+                    }
+                });
+
+                this.group.querySelectorAll('line').forEach((line) => {
+                    const width = Number.parseFloat(line.getAttribute('stroke-width') || '1');
+                    line.setAttribute('stroke', foreground);
+                    line.setAttribute('stroke-opacity', width <= 0.5 ? '0.18' : '0.5');
+                });
+
+                this.group.querySelectorAll('path[stroke]').forEach((path) => {
+                    const original = path.dataset.graphColor || path.getAttribute('stroke');
+                    if (!original || original === 'none') return;
+                    path.dataset.graphColor = original;
+                    path.setAttribute('stroke', ensureContrast(original, background, 3));
+                });
+
+                this.group.querySelectorAll('circle[fill]').forEach((circle) => {
+                    const original = circle.dataset.graphColor || circle.getAttribute('fill');
+                    if (!original || original === 'none') return;
+                    circle.dataset.graphColor = original;
+                    circle.setAttribute('fill', ensureContrast(original, background, 3));
+                });
+
+                this.group.querySelectorAll('text').forEach((text) => {
+                    const original = text.dataset.graphColor || text.getAttribute('fill');
+                    if (original) text.dataset.graphColor = original;
+                    const isAxisLabel = !original || ['#8b949e', '#62627a'].includes(original.toLowerCase());
+                    text.setAttribute('fill', isAxisLabel
+                        ? muted
+                        : ensureContrast(original, background, 4.5));
+                });
+            },
         };
 
         window.shapes.push(graphShape);
@@ -148,6 +190,9 @@ function renderGraphOnCanvas(equations, settings) {
         // Auto-select so the user sees something landed.
         window.currentShape = graphShape;
         graphShape.selectShape();
+        window.__adaptCanvasContrast?.(
+            window.getComputedStyle(window.svg).backgroundColor || '#13171C'
+        );
     } catch (err) {
         console.error('[GraphEngine] SVG insertion failed:', err);
         return false;

package/src/core/MermaidStructuredRenderer.js

@@ -9,12 +9,12 @@
 
 const NS = 'http://www.w3.org/2000/svg';
 const PALETTE = [
-    { fill: '#dfeee4', stroke: '#5f836c' },
-    { fill: '#f4e3d4', stroke: '#a97852' },
-    { fill: '#e9e1ef', stroke: '#7e6b91' },
-    { fill: '#f3edc9', stroke: '#9a8745' },
-    { fill: '#dcebed', stroke: '#5d7f82' },
-    { fill: '#f1dedc', stroke: '#9a6863' },
+    { fill: '#8b7abb', stroke: '#665793' },
+    { fill: '#a992cf', stroke: '#7762a6' },
+    { fill: '#c2addc', stroke: '#8974aa' },
+    { fill: '#7765a6', stroke: '#584883' },
+    { fill: '#9d83c1', stroke: '#725b9a' },
+    { fill: '#d1c3e7', stroke: '#927daf' },
 ];
 
 function escapeXml(value) {
@@ -25,6 +25,17 @@ function escapeXml(value) {
         .replace(/"/g, '"');
 }
 
+function contrastText(fill) {
+    const raw = String(fill || '').replace('#', '');
+    const hex = raw.length === 3 ? raw.split('').map(char => char + char).join('') : raw;
+    if (!/^[0-9a-f]{6}$/i.test(hex)) return theme().text;
+    const red = parseInt(hex.slice(0, 2), 16);
+    const green = parseInt(hex.slice(2, 4), 16);
+    const blue = parseInt(hex.slice(4, 6), 16);
+    const luminance = .299 * red + .587 * green + .114 * blue;
+    return luminance > 145 ? '#34304a' : '#ffffff';
+}
+
 function isDark() {
     return typeof document !== 'undefined' && document.body?.classList.contains('theme-dark');
 }
@@ -149,7 +160,7 @@ export function renderERPreviewSVG(diagram) {
     for (const entity of entities) {
         content += `<g><rect x="${entity.x}" y="${entity.y}" width="${entity.width}" height="${entity.height}" rx="8" fill="${TK.panel}" stroke="${entity.color.stroke}" stroke-width="1.5"/>`;
         content += `<rect x="${entity.x}" y="${entity.y}" width="${entity.width}" height="${entity.headerHeight}" rx="8" fill="${entity.color.fill}" stroke="${entity.color.stroke}" stroke-width="1.5"/>`;
-        content += `<text x="${entity.x + entity.width / 2}" y="${entity.y + 27}" text-anchor="middle" fill="#343832" font-size="14" font-weight="600" font-family="lixFont">${escapeXml(entity.name)}</text>`;
+        content += `<text x="${entity.x + entity.width / 2}" y="${entity.y + 27}" text-anchor="middle" fill="${contrastText(entity.color.fill)}" font-size="14" font-weight="600" font-family="lixFont">${escapeXml(entity.name)}</text>`;
         const attributes = entity.attributes.length ? entity.attributes : [{ type: '', name: 'No attributes', key: '' }];
         attributes.forEach((attribute, row) => {
             const y = entity.y + entity.headerHeight + row * entity.rowHeight;
@@ -205,6 +216,34 @@ export function renderChartPreviewSVG(chart) {
     const TK = theme();
     const width = 720;
     const height = 450;
+
+    if (chart.kind === 'pie') {
+        const values = chart.series[0].values.map(value => Math.max(0, value));
+        const total = values.reduce((sum, value) => sum + value, 0);
+        if (total <= 0) return '';
+        const cx = 255;
+        const cy = 235;
+        const radius = 145;
+        let startAngle = -Math.PI / 2;
+        let content = `<rect width="${width}" height="${height}" rx="10" fill="${TK.bg}"/><text x="${width / 2}" y="32" text-anchor="middle" fill="${TK.text}" font-size="18" font-family="lixFont">${escapeXml(chart.title)}</text>`;
+
+        values.forEach((value, index) => {
+            const endAngle = startAngle + value / total * Math.PI * 2;
+            const x1 = cx + Math.cos(startAngle) * radius;
+            const y1 = cy + Math.sin(startAngle) * radius;
+            const x2 = cx + Math.cos(endAngle) * radius;
+            const y2 = cy + Math.sin(endAngle) * radius;
+            const largeArc = endAngle - startAngle > Math.PI ? 1 : 0;
+            const color = PALETTE[index % PALETTE.length];
+            content += `<path d="M ${cx} ${cy} L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2} Z" fill="${color.fill}" stroke="${TK.bg}" stroke-width="3"/>`;
+            const percent = Math.round(value / total * 100);
+            const legendY = 125 + index * 42;
+            content += `<rect x="460" y="${legendY - 14}" width="18" height="18" rx="4" fill="${color.fill}" stroke="${color.stroke}"/><text x="488" y="${legendY}" fill="${TK.text}" font-size="12" font-family="lixFont">${escapeXml(chart.categories[index] || index + 1)} — ${value} (${percent}%)</text>`;
+            startAngle = endAngle;
+        });
+        return `<svg xmlns="${NS}" width="600" height="450" viewBox="0 0 ${width} ${height}">${content}</svg>`;
+    }
+
     const left = 70;
     const top = 60;
     const plotWidth = 580;
@@ -250,6 +289,30 @@ function push(shape, frame) {
     return shape;
 }
 
+function pushText(text, x, y, fontSize, fill, frame) {
+    if (!window.TextShape || !window.svg) return null;
+    const group = document.createElementNS(NS, 'g');
+    group.setAttribute('data-type', 'text-group');
+    group.setAttribute('transform', `translate(${x}, ${y})`);
+    group.setAttribute('data-x', x);
+    group.setAttribute('data-y', y);
+
+    const element = document.createElementNS(NS, 'text');
+    element.setAttribute('x', 0);
+    element.setAttribute('y', 0);
+    element.setAttribute('dominant-baseline', 'central');
+    element.setAttribute('fill', fill);
+    element.setAttribute('font-size', fontSize);
+    element.setAttribute('font-family', 'lixFont, sans-serif');
+    element.setAttribute('data-initial-font', 'lixFont');
+    element.setAttribute('data-initial-color', fill);
+    element.setAttribute('data-initial-size', `${fontSize}px`);
+    element.textContent = text;
+    group.appendChild(element);
+    window.svg.appendChild(group);
+    return push(new window.TextShape(group), frame);
+}
+
 function canvasOrigin(width, height) {
     const vb = window.currentViewBox || { x: 0, y: 0, width: window.innerWidth, height: window.innerHeight };
     return { x: vb.x + vb.width / 2 - width / 2, y: vb.y + vb.height / 2 - height / 2 };
@@ -265,6 +328,17 @@ function createFrame(x, y, width, height, name, type) {
     return frame;
 }
 
+function selectOnlyFrame(frame) {
+    if (!frame) return;
+    if (window.multiSelection?.clearSelection) window.multiSelection.clearSelection();
+    if (window.currentShape && window.currentShape !== frame && typeof window.currentShape.removeSelection === 'function') {
+        window.currentShape.removeSelection();
+    }
+    if (window.__deselectTextElement) window.__deselectTextElement();
+    window.currentShape = frame;
+    if (typeof frame.selectFrame === 'function') frame.selectFrame();
+}
+
 export function renderEROnCanvas(diagram) {
     if (!diagram?.entities?.length || !window.Rectangle || !window.Arrow || !window.Frame) return false;
     const TK = theme();
@@ -281,7 +355,7 @@ export function renderEROnCanvas(diagram) {
         const y = origin.y + entity.y;
         const header = push(new window.Rectangle(x, y, entity.width, entity.headerHeight, {
             stroke: entity.color.stroke, strokeWidth: 1.5, fill: entity.color.fill, fillStyle: 'solid', roughness: 1,
-            label: entity.name, labelColor: '#343832', labelFontSize: 15,
+            label: entity.name, labelColor: contrastText(entity.color.fill), labelFontSize: 15,
         }), frame);
         if (!first) first = header;
         entityShapes.set(entity.name, { shape: header, x, y, width: entity.width, height: entity.headerHeight });
@@ -313,7 +387,8 @@ export function renderEROnCanvas(diagram) {
 }
 
 export function renderChartOnCanvas(chart) {
-    if (!chart?.series?.length || !window.Rectangle || !window.Circle || !window.Line || !window.Frame) return false;
+    if (!chart?.series?.length || !window.Rectangle || !window.Circle || !window.Line || !window.FreehandStroke || !window.Frame) return false;
+    if (chart.kind === 'pie') return renderPieOnCanvas(chart);
     const TK = theme();
     const width = 720;
     const height = 450;
@@ -326,38 +401,103 @@ export function renderChartOnCanvas(chart) {
     const values = chart.series.flatMap(series => series.values);
     const maximum = Math.max(1, ...values.map(Math.abs));
     const slot = plotWidth / Math.max(1, chart.categories.length);
-    let first = null;
-
     push(new window.Line({ x: left, y: top }, { x: left, y: top + plotHeight }, { stroke: TK.line, strokeWidth: 1.5, roughness: 0 }), frame);
     push(new window.Line({ x: left, y: top + plotHeight }, { x: left + plotWidth, y: top + plotHeight }, { stroke: TK.line, strokeWidth: 1.5, roughness: 0 }), frame);
 
     chart.series.forEach((series, seriesIndex) => {
         const color = PALETTE[seriesIndex % PALETTE.length];
         if (series.kind === 'line') {
-            let previous = null;
-            series.values.forEach((value, index) => {
+            const linePoints = series.values.map((value, index) => {
                 const point = { x: left + slot * (index + .5), y: top + plotHeight - Math.abs(value) / maximum * plotHeight };
-                const dot = push(new window.Circle(point.x, point.y, 8, 8, {
+                push(new window.Circle(point.x, point.y, 8, 8, {
                     stroke: color.stroke, strokeWidth: 2, fill: color.fill, fillStyle: 'solid', roughness: .5,
-                    label: String(value), labelColor: TK.text, labelFontSize: 9,
+                    label: String(value), labelColor: contrastText(color.fill), labelFontSize: 9,
                 }), frame);
-                if (!first) first = dot;
-                if (previous) push(new window.Line(previous, point, { stroke: color.stroke, strokeWidth: 3, roughness: .5 }), frame);
-                previous = point;
+                return [point.x, point.y, .5];
             });
+            if (linePoints.length > 1) {
+                push(new window.FreehandStroke(linePoints, {
+                    stroke: color.stroke,
+                    strokeWidth: 3,
+                    thinning: 0,
+                    roughness: 0,
+                    strokeStyle: 'solid',
+                }), frame);
+            }
         } else {
             const barWidth = Math.max(18, slot * .7 / chart.series.length);
             series.values.forEach((value, index) => {
                 const barHeight = Math.max(8, Math.abs(value) / maximum * plotHeight);
                 const x = left + slot * index + slot * .15 + seriesIndex * barWidth;
-                const bar = push(new window.Rectangle(x, top + plotHeight - barHeight, barWidth, barHeight, {
+                push(new window.Rectangle(x, top + plotHeight - barHeight, barWidth, barHeight, {
                     stroke: color.stroke, strokeWidth: 1.5, fill: color.fill, fillStyle: 'solid', roughness: .7,
-                    label: `${chart.categories[index] || index + 1}\n${value}`, labelColor: '#343832', labelFontSize: 11,
+                    label: `${chart.categories[index] || index + 1}\n${value}`, labelColor: contrastText(color.fill), labelFontSize: 11,
                 }), frame);
-                if (!first) first = bar;
             });
         }
     });
-    if (first?.selectShape) { window.currentShape = first; first.selectShape(); }
+    selectOnlyFrame(frame);
+    return true;
+}
+
+function renderPieOnCanvas(chart) {
+    if (!window.FreehandStroke || !window.TextShape) return false;
+    const width = 720;
+    const height = 450;
+    const origin = canvasOrigin(width, height);
+    const frame = createFrame(origin.x, origin.y, width, height, chart.title, 'mermaid-pie');
+    const values = chart.series[0].values.map(value => Math.max(0, value));
+    const total = values.reduce((sum, value) => sum + value, 0);
+    if (total <= 0) return false;
+
+    const cx = origin.x + 255;
+    const cy = origin.y + 235;
+    const radius = 145;
+    let startAngle = -Math.PI / 2;
+
+    values.forEach((value, index) => {
+        const sweep = value / total * Math.PI * 2;
+        const endAngle = startAngle + sweep;
+        const steps = Math.max(6, Math.ceil(sweep / (Math.PI / 60)));
+        const points = [[cx, cy, .5]];
+        for (let step = 0; step <= steps; step++) {
+            const angle = startAngle + sweep * (step / steps);
+            points.push([
+                cx + Math.cos(angle) * radius,
+                cy + Math.sin(angle) * radius,
+                .5,
+            ]);
+        }
+        const color = PALETTE[index % PALETTE.length];
+        push(new window.FreehandStroke(points, {
+            stroke: color.fill,
+            strokeWidth: 3,
+            outlineStroke: theme().bg,
+            outlineWidth: 3,
+            closedFill: true,
+            roughness: 0,
+            strokeStyle: 'solid',
+        }), frame);
+        const percent = Math.round(value / total * 100);
+        const legendY = origin.y + 125 + index * 42;
+        push(new window.Rectangle(origin.x + 460, legendY - 14, 18, 18, {
+            stroke: color.stroke,
+            strokeWidth: 1,
+            fill: color.fill,
+            fillStyle: 'solid',
+            roughness: .5,
+        }), frame);
+        pushText(
+            `${chart.categories[index] || index + 1} — ${value} (${percent}%)`,
+            origin.x + 488,
+            legendY,
+            12,
+            theme().text,
+            frame,
+        );
+        startAngle = endAngle;
+    });
+
+    selectOnlyFrame(frame);
     return true;
 }

package/src/react/LixSketchCanvas.jsx

@@ -111,6 +111,10 @@ export default function LixSketchCanvas({
   // real persistence layer.
   useEffect(() => {
     function handleKey(e) {
+      if (e.key === 'Escape') {
+        useUIStore.getState().closeAllModals?.();
+        return;
+      }
       if (!(e.ctrlKey || e.metaKey)) return;
       const key = (e.key || '').toLowerCase();
       if (key !== 's' || e.shiftKey) return;

package/src/react/components/AppMenu.jsx

@@ -12,7 +12,7 @@ import { useTranslation } from '../hooks/useTranslation'
 // matching list at render time based on the active theme.
 const CANVAS_BACKGROUNDS_LIGHT = [
   { color: '#ffffff', label: 'menu.canvasBg.white' },
-  { color: '#faf9f5', label: 'menu.canvasBg.cream' },
+  { color: '#fbf9fd', label: 'menu.canvasBg.cream' },
   { color: '#f5f3ed', label: 'menu.canvasBg.paper' },
   { color: '#f0f5fb', label: 'menu.canvasBg.skyTint' },
   { color: '#f0f5ef', label: 'menu.canvasBg.sageTint' },
@@ -20,7 +20,7 @@ const CANVAS_BACKGROUNDS_LIGHT = [
 const CANVAS_BACKGROUNDS_DARK = [
   { color: '#000000', label: 'menu.canvasBg.black' },
   { color: '#161718', label: 'menu.canvasBg.darkGray' },
-  { color: '#13171C', label: 'menu.canvasBg.blueBlack' },
+  { color: '#15111f', label: 'menu.canvasBg.blueBlack' },
   { color: '#181605', label: 'menu.canvasBg.darkYellow' },
   { color: '#1B1615', label: 'menu.canvasBg.darkBrown' },
 ]

package/src/react/components/Toolbar.jsx

@@ -110,7 +110,7 @@ export default function Toolbar() {
             onClick={() => setActiveTool(item.tool)}
             className={`relative w-[33px] h-[31px] flex items-center justify-center rounded-lg transition-all duration-200 ${
               isActive
-                ? 'bg-surface-active text-text-primary'
+                ? 'bg-accent-blue/20 text-accent-blue'
                 : 'text-text-muted hover:text-text-primary hover:bg-surface-hover'
             }`}
           >

package/src/react/components/canvas/FindBar.jsx

@@ -49,7 +49,7 @@ export default function FindBar() {
     rect.setAttribute('width', w + 8)
     rect.setAttribute('height', h + 8)
     rect.setAttribute('fill', 'rgba(91, 87, 209, 0.15)')
-    rect.setAttribute('stroke', '#5B57D1')
+    rect.setAttribute('stroke', '#7667a8')
     rect.setAttribute('stroke-width', '2')
     rect.setAttribute('stroke-dasharray', '4,2')
     rect.setAttribute('rx', '4')

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

@@ -320,7 +320,7 @@ export default function CanvasPropertiesModal() {
                         >
                           <span
                             className="w-2.5 h-2.5 rounded-full shrink-0"
-                            style={{ background: user.color || '#5B57D1' }}
+                            style={{ background: user.color || '#7667a8' }}
                           />
                           <span className="text-text-secondary text-[11px] flex-1 truncate">
                             {user.displayName || user.name || `User ${i + 1}`}

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

@@ -227,13 +227,13 @@ export default function CommandPalette() {
 
   return (
     <div
-      className="fixed inset-0 z-[9999] flex items-start justify-center pt-[12vh] font-[lixFont]"
+      className="fixed inset-0 z-[9999] flex items-center justify-center font-[lixFont]"
       onClick={toggleCommandPalette}
     >
       <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-[540px] mx-4 overflow-hidden"
+        className="relative bg-surface-card border border-border-light rounded-2xl w-[92vw] max-w-[1200px] h-[88vh] max-h-[88vh] mx-4 overflow-hidden flex flex-col"
         onClick={(e) => e.stopPropagation()}
       >
         {/* Search */}
@@ -251,7 +251,7 @@ export default function CommandPalette() {
         </div>
 
         {/* Results */}
-        <div ref={listRef} className="max-h-[55vh] overflow-y-auto no-scrollbar py-2">
+        <div ref={listRef} className="flex-1 min-h-0 overflow-y-auto no-scrollbar py-2">
           {filtered.length === 0 && (
             <div className="px-4 py-6 text-center text-text-dim text-xs">
               No commands found

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

@@ -23,7 +23,7 @@ function ColorGrid({ colors, selected, onSelect }) {
     <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'}`}
+          className={`w-7 h-7 rounded-md border-[1.5px] transition-all duration-100 ${selected === c ? 'border-[#7667a8] scale-110' : 'border-white/[0.08] hover:border-white/20'}`}
           style={{ backgroundColor: c }}
         />
       ))}
@@ -87,7 +87,7 @@ export default function ArrowSidebar() {
         <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]'}`}
+              className={`w-10 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${headStyle === h.value ? 'bg-[#7667a8]/20 text-[#7667a8]' : 'text-text-secondary hover:bg-white/[0.06]'}`}
             >
               <SvgIcon svg={h.svg} />
             </button>
@@ -111,7 +111,7 @@ export default function ArrowSidebar() {
         <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]'}`}
+              className={`w-9 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${thickness === w ? 'bg-[#7667a8]/20 text-[#7667a8]' : 'text-text-secondary hover:bg-white/[0.06]'}`}
             >
               <div className="w-5 rounded-full bg-current" style={{ height: Math.max(1, w) }} />
             </button>
@@ -126,7 +126,7 @@ export default function ArrowSidebar() {
         <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]'}`}
+              className={`w-11 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${outlineStyle === s.v ? 'bg-[#7667a8]/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>
@@ -146,7 +146,7 @@ export default function ArrowSidebar() {
             { 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]'}`}
+              className={`flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${arrowType === a.v ? 'bg-[#7667a8] text-white' : 'text-text-secondary hover:bg-white/[0.06]'}`}
             >
               <i className={`bx ${a.i} text-sm`} /> {a.l}
             </button>
@@ -158,7 +158,7 @@ export default function ArrowSidebar() {
               <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]'}`}
+                    className={`flex-1 py-1 rounded-md text-xs text-center transition-all duration-100 ${curvature === c.v ? 'bg-[#7667a8]/20 text-[#7667a8]' : 'text-text-secondary hover:bg-white/[0.06]'}`}
                   >{c.l}</button>
                 ))}
               </div>