@elixpo/lixsketch 5.6.5 → 5.6.6

package/dist/react/index.js

@@ -16,8 +16,41 @@ import { useCallback as useCallback17, useEffect as useEffect20, useRef as useRe
 
 // src/react/store/useSketchStore.js
 import { create } from "zustand";
+
+// src/react/utils/canvasBackgrounds.js
+var CANVAS_BACKGROUNDS = {
+  light: [
+    { color: "#FBE4DB", label: "menu.canvasBg.white" },
+    { color: "#F6DBC0", label: "menu.canvasBg.cream" },
+    { color: "#F5EED2", label: "menu.canvasBg.paper" },
+    { color: "#F5F2ED", label: "menu.canvasBg.skyTint" },
+    { color: "#F5DABF", label: "menu.canvasBg.sageTint" }
+  ],
+  dark: [
+    { color: "#000000", label: "menu.canvasBg.black" },
+    { color: "#161718", label: "menu.canvasBg.darkGray" },
+    { color: "#15111f", label: "menu.canvasBg.blueBlack" },
+    { color: "#181605", label: "menu.canvasBg.darkYellow" },
+    { color: "#1B1615", label: "menu.canvasBg.darkBrown" }
+  ]
+};
+var DEFAULT_CANVAS_BACKGROUNDS = { dark: "#15111f", light: "#F5F2ED" };
+var canvasBackgroundStorageKey = (theme) => `lixsketch-canvas-background-${theme}`;
+function readCanvasBackground(theme, storage) {
+  const resolved = theme === "light" ? "light" : "dark";
+  try {
+    const stored = storage?.getItem(canvasBackgroundStorageKey(resolved));
+    const match = CANVAS_BACKGROUNDS[resolved].find(({ color }) => color.toLowerCase() === stored?.toLowerCase());
+    if (match) return match.color;
+  } catch {
+  }
+  return DEFAULT_CANVAS_BACKGROUNDS[resolved];
+}
+
+// src/react/store/useSketchStore.js
 var GRID_STORAGE_KEY = "lixsketch-grid-enabled";
 var RULER_STORAGE_KEY = "lixsketch-rulers-enabled";
+var RULER_UNIT_STORAGE_KEY = "lixsketch-ruler-unit";
 var TOOLS = {
   SELECT: "select",
   PAN: "pan",
@@ -174,13 +207,25 @@ var useSketchStore = create((set, get) => ({
   setIsPanning: (v) => set({ isPanning: v }),
   setPanStart: (p) => set({ panStart: p }),
   // --- Canvas background ---
-  canvasBackground: "var(--lixsketch-bg, #15111f)",
-  setCanvasBackground: (color) => {
-    set({ canvasBackground: color });
+  canvasBackground: DEFAULT_CANVAS_BACKGROUNDS.dark,
+  canvasBackgrounds: { ...DEFAULT_CANVAS_BACKGROUNDS },
+  setCanvasBackground: (color, theme = "dark") => {
+    const resolved = theme === "light" ? "light" : "dark";
+    set((state) => ({ canvasBackground: color, canvasBackgrounds: { ...state.canvasBackgrounds, [resolved]: color } }));
     if (typeof window !== "undefined") {
+      try {
+        localStorage.setItem(canvasBackgroundStorageKey(resolved), color);
+      } catch {
+      }
       requestAnimationFrame(() => window.__adaptCanvasContrast?.(color));
     }
   },
+  restoreCanvasBackground: (theme) => {
+    const resolved = theme === "light" ? "light" : "dark";
+    const color = readCanvasBackground(resolved, typeof window === "undefined" ? null : localStorage);
+    set((state) => ({ canvasBackground: color, canvasBackgrounds: { ...state.canvasBackgrounds, [resolved]: color } }));
+    if (typeof window !== "undefined") requestAnimationFrame(() => window.__adaptCanvasContrast?.(color));
+  },
   // --- Grid ---
   gridEnabled: false,
   toggleGrid: () => set((s) => {
@@ -205,6 +250,7 @@ var useSketchStore = create((set, get) => ({
   },
   // --- Rulers ---
   rulersEnabled: false,
+  rulerUnit: "px",
   toggleRulers: () => set((s) => {
     const rulersEnabled = !s.rulersEnabled;
     if (typeof window !== "undefined") {
@@ -215,6 +261,16 @@ var useSketchStore = create((set, get) => ({
     }
     return { rulersEnabled };
   }),
+  setRulerUnit: (unit) => {
+    const rulerUnit = ["px", "cm", "in"].includes(unit) ? unit : "px";
+    if (typeof window !== "undefined") {
+      try {
+        localStorage.setItem(RULER_UNIT_STORAGE_KEY, rulerUnit);
+      } catch {
+      }
+    }
+    set({ rulerUnit });
+  },
   hydrateRulers: () => {
     if (typeof window === "undefined") return;
     try {
@@ -222,6 +278,8 @@ var useSketchStore = create((set, get) => ({
       if (saved === "true" || saved === "false") {
         set({ rulersEnabled: saved === "true" });
       }
+      const savedUnit = localStorage.getItem(RULER_UNIT_STORAGE_KEY);
+      if (["px", "cm", "in"].includes(savedUnit)) set({ rulerUnit: savedUnit });
     } catch {
     }
   },
@@ -371,6 +429,20 @@ function invertShapeColors(prevResolved, nextResolved) {
     }
   }
 }
+function readStoredTheme() {
+  if (typeof window === "undefined") return "dark";
+  try {
+    const theme = localStorage.getItem("theme");
+    if (theme && ["dark", "light", "system"].includes(theme)) return theme;
+  } catch {
+  }
+  try {
+    const prefs = JSON.parse(localStorage.getItem("lix_ui_prefs") || "{}");
+    return ["dark", "light", "system"].includes(prefs.theme) ? prefs.theme : "dark";
+  } catch {
+    return "dark";
+  }
+}
 function applyTheme(theme) {
   const body = document.body;
   if (!body) return;
@@ -452,13 +524,22 @@ var useUIStore = create2((set, get) => ({
   canvasLoadingMessage: "Loading canvas...",
   setCanvasLoading: (loading, message) => set({ canvasLoading: loading, canvasLoadingMessage: message || "Loading canvas..." }),
   // --- Theme ---
-  theme: "dark",
+  theme: readStoredTheme(),
   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 });
+    useSketchStore_default.getState().restoreCanvasBackground(resolve(newTheme));
+    if (typeof window !== "undefined") {
+      try {
+        localStorage.setItem("theme", newTheme);
+        const prefs = JSON.parse(localStorage.getItem("lix_ui_prefs") || "{}");
+        localStorage.setItem("lix_ui_prefs", JSON.stringify({ ...prefs, theme: newTheme }));
+      } catch {
+      }
+    }
   },
   // --- Language / i18n ---
   language: "en",
@@ -544,7 +625,7 @@ function useSketchEngine(svgRef, ready = true) {
           setZoom: (zoom) => useSketchStore_default.setState({ zoom }),
           getState: () => useSketchStore_default.getState()
         };
-        const { SketchEngine } = await import("./SketchEngine-UD2XV2KT.js");
+        const { SketchEngine } = await import("./SketchEngine-OPJON7TD.js");
         if (cancelled) return;
         const engine = new SketchEngine(svgRef.current);
         await engine.init();
@@ -581,6 +662,34 @@ function useSketchEngine(svgRef, ready = true) {
 
 // src/react/components/canvas/CanvasRulers.jsx
 import { useEffect as useEffect2, useMemo, useState } from "react";
+
+// src/react/components/canvas/rulerUnits.js
+var RULER_UNITS = ["px", "cm", "in"];
+var PIXELS_PER_UNIT = { px: 1, cm: 96 / 2.54, in: 96 };
+function normalizeRulerUnit(unit) {
+  return RULER_UNITS.includes(unit) ? unit : "px";
+}
+function convertRulerValue(pixelValue, unit = "px") {
+  return pixelValue / PIXELS_PER_UNIT[normalizeRulerUnit(unit)];
+}
+function formatRulerValue(pixelValue, unit = "px", suffix = false) {
+  const normalized = normalizeRulerUnit(unit);
+  const converted = convertRulerValue(pixelValue, normalized);
+  let label;
+  if (normalized === "px") {
+    const rounded = Math.round(converted);
+    const absolute = Math.abs(rounded);
+    if (absolute >= 1e6) label = `${Number((rounded / 1e6).toFixed(1))}m`;
+    else if (absolute >= 1e4) label = `${Number((rounded / 1e3).toFixed(1))}k`;
+    else label = String(rounded);
+  } else {
+    const precision = Math.abs(converted) < 10 ? 2 : Math.abs(converted) < 100 ? 1 : 0;
+    label = String(Number(converted.toFixed(precision)));
+  }
+  return suffix ? `${label} ${normalized}` : label;
+}
+
+// src/react/components/canvas/CanvasRulers.jsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var GRID_SIZE = 20;
 var MIN_LABEL_GAP = 52;
@@ -594,13 +703,6 @@ function getRulerStep(zoom) {
   }
   return GRID_SIZE;
 }
-function formatDimension(value) {
-  const rounded = Math.round(value);
-  const absolute = Math.abs(rounded);
-  if (absolute >= 1e6) return `${Number((rounded / 1e6).toFixed(1))}m`;
-  if (absolute >= 1e4) return `${Number((rounded / 1e3).toFixed(1))}k`;
-  return String(rounded);
-}
 function buildTicks(start, extent, zoom, step) {
   const first = Math.floor(start / step) * step;
   const last = start + extent / zoom;
@@ -610,7 +712,8 @@ function buildTicks(start, extent, zoom, step) {
   }
   return ticks;
 }
-function CanvasRulers({ enabled, svgRef }) {
+function CanvasRulers({ enabled, svgRef, unit = "px" }) {
+  const rulerUnit = normalizeRulerUnit(unit);
   const [viewport, setViewport] = useState({ x: 0, y: 0, zoom: 1, width: 0, height: 0, rulerLeft: 64, rulerTop: 48 });
   const [pointer, setPointer] = useState({ x: 0, y: 0, visible: false });
   useEffect2(() => {
@@ -680,14 +783,15 @@ function CanvasRulers({ enabled, svgRef }) {
   const pointerWorldY = viewport.y + pointer.y / viewport.zoom;
   return /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-0 z-[900] select-none text-text-muted", "aria-hidden": "true", children: [
     /* @__PURE__ */ jsxs("div", { className: "absolute right-0 overflow-hidden border-b border-border-light bg-surface/95 shadow-sm backdrop-blur-sm", style: { height: RULER_SIZE, left: horizontalStart, top: viewport.rulerTop }, children: [
-      horizontalTicks.map(({ value, position }) => /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 h-2 border-l border-text-dim", style: { left: position - horizontalStart }, children: /* @__PURE__ */ jsx("span", { className: "absolute bottom-2 left-1 font-mono text-[9px] leading-none tabular-nums", children: formatDimension(value) }) }, value)),
-      pointerInDrawingArea && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 border-l border-accent", style: { left: pointer.x - horizontalStart }, children: /* @__PURE__ */ jsx("span", { className: "absolute left-1 top-1 rounded bg-accent px-1 font-mono text-[9px] leading-4 text-white shadow-sm", children: formatDimension(pointerWorldX) }) })
+      horizontalTicks.map(({ value, position }) => /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 h-2 border-l border-text-dim", style: { left: position - horizontalStart }, children: /* @__PURE__ */ jsx("span", { className: "absolute bottom-2 left-1 font-mono text-[9px] leading-none tabular-nums", children: formatRulerValue(value, rulerUnit) }) }, value)),
+      pointerInDrawingArea && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 border-l border-accent", style: { left: pointer.x - horizontalStart }, children: /* @__PURE__ */ jsx("span", { className: "absolute left-1 top-1 rounded bg-accent px-1 font-mono text-[9px] leading-4 text-white shadow-sm", children: formatRulerValue(pointerWorldX, rulerUnit, true) }) })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "absolute bottom-0 overflow-hidden border-r border-border-light bg-surface/95 shadow-sm backdrop-blur-sm", style: { width: RULER_SIZE, left: viewport.rulerLeft, top: verticalStart }, children: [
-      verticalTicks.map(({ value, position }) => /* @__PURE__ */ jsx("div", { className: "absolute right-0 w-2 border-t border-text-dim", style: { top: position - verticalStart }, children: /* @__PURE__ */ jsx("span", { className: "absolute right-2 top-1 font-mono text-[9px] leading-none tabular-nums", style: { transform: "rotate(-90deg)", transformOrigin: "top right" }, children: formatDimension(value) }) }, value)),
-      pointerInDrawingArea && /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 border-t border-accent", style: { top: pointer.y - verticalStart }, children: /* @__PURE__ */ jsx("span", { className: "absolute right-1 top-1 rounded bg-accent px-1 font-mono text-[9px] leading-4 text-white shadow-sm", style: { transform: "rotate(-90deg)", transformOrigin: "top right" }, children: formatDimension(pointerWorldY) }) })
+      verticalTicks.map(({ value, position }) => /* @__PURE__ */ jsx("div", { className: "absolute right-0 w-2 border-t border-text-dim", style: { top: position - verticalStart }, children: /* @__PURE__ */ jsx("span", { className: "absolute right-2 top-1 font-mono text-[9px] leading-none tabular-nums", style: { transform: "rotate(-90deg)", transformOrigin: "top right" }, children: formatRulerValue(value, rulerUnit) }) }, value)),
+      pointerInDrawingArea && /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 border-t border-accent", style: { top: pointer.y - verticalStart }, children: /* @__PURE__ */ jsx("span", { className: "absolute right-1 top-1 rounded bg-accent px-1 font-mono text-[9px] leading-4 text-white shadow-sm", style: { transform: "rotate(-90deg)", transformOrigin: "top right" }, children: formatRulerValue(pointerWorldY, rulerUnit, true) }) })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "absolute border-b border-r border-border-light bg-accent/20", style: { width: RULER_SIZE, height: RULER_SIZE, left: viewport.rulerLeft, top: viewport.rulerTop }, children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute bottom-0.5 left-1 font-mono text-[8px] uppercase text-accent", children: rulerUnit }),
       /* @__PURE__ */ jsx("span", { className: "absolute left-1/2 top-1/2 h-2.5 -translate-x-1/2 -translate-y-1/2 border-l border-accent" }),
       /* @__PURE__ */ jsx("span", { className: "absolute left-1/2 top-1/2 w-2.5 -translate-x-1/2 -translate-y-1/2 border-t border-accent" })
     ] }),
@@ -709,6 +813,7 @@ function SVGCanvas() {
   const gridEnabled = useSketchStore_default((s) => s.gridEnabled);
   const hydrateGrid = useSketchStore_default((s) => s.hydrateGrid);
   const rulersEnabled = useSketchStore_default((s) => s.rulersEnabled);
+  const rulerUnit = useSketchStore_default((s) => s.rulerUnit);
   const hydrateRulers = useSketchStore_default((s) => s.hydrateRulers);
   const getCursor = useSketchStore_default((s) => s.getCursor);
   const cursor = getCursor();
@@ -837,7 +942,7 @@ function SVGCanvas() {
         ]
       }
     ),
-    /* @__PURE__ */ jsx2(CanvasRulers, { enabled: rulersEnabled, svgRef })
+    /* @__PURE__ */ jsx2(CanvasRulers, { enabled: rulersEnabled, svgRef, unit: rulerUnit })
   ] });
 }
 
@@ -1210,20 +1315,6 @@ function useTranslation() {
 
 // src/react/components/AppMenu.jsx
 import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var CANVAS_BACKGROUNDS_LIGHT = [
-  { color: "#ffffff", label: "menu.canvasBg.white" },
-  { color: "#fbf9fd", label: "menu.canvasBg.cream" },
-  { color: "#f5f3ed", label: "menu.canvasBg.paper" },
-  { color: "#f0f5fb", label: "menu.canvasBg.skyTint" },
-  { color: "#f0f5ef", label: "menu.canvasBg.sageTint" }
-];
-var CANVAS_BACKGROUNDS_DARK = [
-  { color: "#000000", label: "menu.canvasBg.black" },
-  { color: "#161718", label: "menu.canvasBg.darkGray" },
-  { color: "#15111f", label: "menu.canvasBg.blueBlack" },
-  { color: "#181605", label: "menu.canvasBg.darkYellow" },
-  { color: "#1B1615", label: "menu.canvasBg.darkBrown" }
-];
 function DangerWarningDialog({ action, workspaceName, onCancel, onConfirm }) {
   useEffect5(() => {
     if (!action) return void 0;
@@ -1325,6 +1416,8 @@ function AppMenu() {
   const toggleGrid = useSketchStore_default((s) => s.toggleGrid);
   const rulersEnabled = useSketchStore_default((s) => s.rulersEnabled);
   const toggleRulers = useSketchStore_default((s) => s.toggleRulers);
+  const rulerUnit = useSketchStore_default((s) => s.rulerUnit);
+  const setRulerUnit = useSketchStore_default((s) => s.setRulerUnit);
   const viewMode = useSketchStore_default((s) => s.viewMode);
   const zenMode = useSketchStore_default((s) => s.zenMode);
   const toolLock = useSketchStore_default((s) => s.toolLock);
@@ -1493,7 +1586,25 @@ function AppMenu() {
                   children: [
                     /* @__PURE__ */ jsx5("option", { value: "en", children: "English" }),
                     /* @__PURE__ */ jsx5("option", { value: "bg", children: "\u0411\u044A\u043B\u0433\u0430\u0440\u0441\u043A\u0438" }),
-                    /* @__PURE__ */ jsx5("option", { value: "de", children: "Deutsch" })
+                    /* @__PURE__ */ jsx5("option", { value: "de", children: "Deutsch" }),
+                    /* @__PURE__ */ jsx5("option", { value: "hi", children: "\u0939\u093F\u0928\u094D\u0926\u0940" })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs5("div", { className: "w-full flex items-center justify-between px-3 py-2 border-b border-border-light text-text-secondary text-[11px]", children: [
+              /* @__PURE__ */ jsx5("span", { children: "Ruler unit" }),
+              /* @__PURE__ */ jsxs5(
+                "select",
+                {
+                  "aria-label": "Ruler unit",
+                  className: "cursor-pointer rounded border border-border-light bg-surface-hover px-1 text-[10px] uppercase text-text-primary outline-none",
+                  value: rulerUnit,
+                  onChange: (event) => setRulerUnit(event.target.value),
+                  children: [
+                    /* @__PURE__ */ jsx5("option", { value: "px", children: "px" }),
+                    /* @__PURE__ */ jsx5("option", { value: "cm", children: "cm" }),
+                    /* @__PURE__ */ jsx5("option", { value: "in", children: "in" })
                   ]
                 }
               )
@@ -1633,10 +1744,10 @@ function AppMenu() {
           ] }),
           /* @__PURE__ */ jsxs5("div", { className: "px-3 py-2", children: [
             /* @__PURE__ */ jsx5("p", { className: "text-text-dim text-xs uppercase tracking-wider mb-2", children: t("menu.canvasBackground") }),
-            /* @__PURE__ */ jsx5("div", { className: "flex items-center gap-1.5", children: (theme === "dark" ? CANVAS_BACKGROUNDS_DARK : CANVAS_BACKGROUNDS_LIGHT).map((bg) => /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx5("div", { className: "flex items-center gap-1.5", children: CANVAS_BACKGROUNDS[theme === "light" ? "light" : "dark"].map((bg) => /* @__PURE__ */ jsx5(
               "button",
               {
-                onClick: () => setCanvasBackground(bg.color),
+                onClick: () => setCanvasBackground(bg.color, theme === "light" ? "light" : "dark"),
                 title: t(bg.label),
                 className: `w-7 h-7 rounded-full border-2 cursor-pointer transition-all duration-200 ${canvasBackground === bg.color ? "border-accent scale-110" : "border-border hover:border-border-light"}`,
                 style: { backgroundColor: bg.color }
@@ -2081,7 +2192,7 @@ function PaintBucketSidebar() {
         fill.label
       ] }, fill.value)) })
     ] }),
-    /* @__PURE__ */ jsx9("div", { className: "max-w-[185px] px-2 text-[10px] leading-4 text-text-dim", children: "Click a rectangle or circle to apply the selected fill." })
+    /* @__PURE__ */ jsx9("div", { className: "max-w-[185px] px-2 text-[10px] leading-4 text-text-dim", children: "Fill rectangles, circles, frames, and closed freehand shapes. Lines and arrows are left unchanged." })
   ] });
 }
 
@@ -4995,7 +5106,7 @@ var _saveScene = null;
 var _loadScene = null;
 async function ensureSceneSerializer() {
   if (_saveScene && _loadScene) return;
-  const m = await import("./SceneSerializer-SG6SJN5X.js");
+  const m = await import("./SceneSerializer-JEYTYXZQ.js");
   _saveScene = m.saveScene;
   _loadScene = m.loadScene;
 }