@elixpo/lixsketch 5.6.8 → 5.6.10

package/dist/react/index.js

@@ -20,7 +20,7 @@ import { create } from "zustand";
 // src/react/utils/canvasBackgrounds.js
 var CANVAS_BACKGROUNDS = {
   light: [
-    { color: "#FBE4DB", label: "menu.canvasBg.white" },
+    { color: "#FFFFFF", label: "menu.canvasBg.white" },
     { color: "#F6DBC0", label: "menu.canvasBg.cream" },
     { color: "#F5EED2", label: "menu.canvasBg.paper" },
     { color: "#F5F2ED", label: "menu.canvasBg.skyTint" },
@@ -34,12 +34,21 @@ var CANVAS_BACKGROUNDS = {
     { color: "#1B1615", label: "menu.canvasBg.darkBrown" }
   ]
 };
-var DEFAULT_CANVAS_BACKGROUNDS = { dark: "#15111f", light: "#F5F2ED" };
+var DEFAULT_CANVAS_BACKGROUNDS = { dark: "#15111f", light: "#FFFFFF" };
+var LEGACY_LIGHT_DEFAULT = "#F5F2ED";
+var LIGHT_DEFAULT_MIGRATION_KEY = "lixsketch-canvas-light-default-v2";
 var canvasBackgroundStorageKey = (theme) => `lixsketch-canvas-background-${theme}`;
 function readCanvasBackground(theme, storage) {
   const resolved = theme === "light" ? "light" : "dark";
   try {
     const stored = storage?.getItem(canvasBackgroundStorageKey(resolved));
+    if (resolved === "light" && storage?.getItem(LIGHT_DEFAULT_MIGRATION_KEY) !== "1") {
+      storage?.setItem?.(LIGHT_DEFAULT_MIGRATION_KEY, "1");
+      if (stored?.toLowerCase() === LEGACY_LIGHT_DEFAULT.toLowerCase()) {
+        storage?.setItem?.(canvasBackgroundStorageKey(resolved), DEFAULT_CANVAS_BACKGROUNDS.light);
+        return DEFAULT_CANVAS_BACKGROUNDS.light;
+      }
+    }
     const match = CANVAS_BACKGROUNDS[resolved].find(({ color }) => color.toLowerCase() === stored?.toLowerCase());
     if (match) return match.color;
   } catch {
@@ -450,7 +459,7 @@ function applyTheme(theme) {
   body.classList.remove("theme-dark", "theme-light");
   body.classList.add(`theme-${resolved}`);
   const svgEl = window.svg;
-  if (svgEl) svgEl.style.background = resolved === "light" ? "#fbf9fd" : "#15111f";
+  if (svgEl) svgEl.style.background = resolved === "light" ? "#ffffff" : "#15111f";
 }
 var useUIStore = create2((set, get) => ({
   // --- Modals ---
@@ -625,7 +634,7 @@ function useSketchEngine(svgRef, ready = true) {
           setZoom: (zoom) => useSketchStore_default.setState({ zoom }),
           getState: () => useSketchStore_default.getState()
         };
-        const { SketchEngine } = await import("./SketchEngine-UFLZJQXS.js");
+        const { SketchEngine } = await import("./SketchEngine-PCMCE63L.js");
         if (cancelled) return;
         const engine = new SketchEngine(svgRef.current);
         await engine.init();
@@ -2610,7 +2619,7 @@ function PaintbrushSidebar() {
 // src/react/components/sidebars/TextSidebar.jsx
 import { useState as useState12, useCallback as useCallback8, useEffect as useEffect8 } from "react";
 import { Fragment as Fragment6, jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
-var TEXT_COLORS = ["#1a1a20", "#ffffff", "#FF8383", "#3A994C", "#56A2E8", "#FFD700", "#FF69B4", "#A855F7"];
+var TEXT_COLORS = ["#000000", "#ffffff", "#FF8383", "#3A994C", "#56A2E8", "#FFD700", "#FF69B4", "#A855F7"];
 var FONTS = [
   { value: "lixFont", label: "Lix" },
   { value: "lixCode", label: "Code" },
@@ -2644,7 +2653,10 @@ function TextSidebar() {
   const { t } = useTranslation();
   const activeTool = useSketchStore_default((s) => s.activeTool);
   const selectedShapeSidebar = useSketchStore_default((s) => s.selectedShapeSidebar);
-  const [textColor, setTextColor] = useState12("#fff");
+  const theme = useUIStore_default((s) => s.theme);
+  const resolvedTheme = theme === "system" && typeof window !== "undefined" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : theme;
+  const [textColor, setTextColor] = useState12(null);
+  const displayedTextColor = textColor ?? (resolvedTheme === "light" ? "#000000" : "#ffffff");
   const [fontSize, setFontSize] = useState12("S");
   const [font, setFont] = useState12("lixFont");
   const [codeMode, setCodeMode] = useState12(false);
@@ -2691,14 +2703,14 @@ function TextSidebar() {
         ToolbarButton,
         {
           tooltip: t("sidebar.textColor"),
-          preview: /* @__PURE__ */ jsx13("span", { className: "w-4 h-4 rounded-md border border-white/20", style: { backgroundColor: textColor } }),
+          preview: /* @__PURE__ */ jsx13("span", { className: "w-4 h-4 rounded-md border border-white/20", style: { backgroundColor: displayedTextColor } }),
           children: [
             /* @__PURE__ */ jsx13("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.color") }),
             /* @__PURE__ */ jsx13("div", { className: "grid grid-cols-4 gap-1.5", children: TEXT_COLORS.map((c) => /* @__PURE__ */ jsx13(
               "button",
               {
                 onClick: () => updateColor(c),
-                className: `w-7 h-7 rounded-md border-[1.5px] transition-all duration-100 ${textColor === c ? "border-[#7667a8] scale-110" : "border-white/[0.08] hover:border-white/20"}`,
+                className: `w-7 h-7 rounded-md border-[1.5px] transition-all duration-100 ${displayedTextColor.toLowerCase() === c.toLowerCase() ? "border-[#7667a8] scale-110" : "border-white/[0.08] hover:border-white/20"}`,
                 style: { backgroundColor: c }
               },
               c
@@ -5106,7 +5118,7 @@ var _saveScene = null;
 var _loadScene = null;
 async function ensureSceneSerializer() {
   if (_saveScene && _loadScene) return;
-  const m = await import("./SceneSerializer-H6KMQCO2.js");
+  const m = await import("./SceneSerializer-Y6QABGZY.js");
   _saveScene = m.saveScene;
   _loadScene = m.loadScene;
 }