@elixpo/lixsketch 5.5.19 → 5.5.21

package/dist/react/index.js

@@ -278,24 +278,78 @@ function invertShapeColors(prevResolved, nextResolved) {
   };
   for (const shape of shapes) {
     let changed = false;
-    if (shape.options) {
-      if (normalize(shape.options.stroke) === from) {
-        shape.options.stroke = to;
+    if (shape.shapeName === "icon" || shape.type === "icon") {
+      const isDark = nextResolved === "dark";
+      const targetDarkColor = "#1a1a2e";
+      const bgDarkColor = "#15111f";
+      if (shape.group) {
+        shape.group.querySelectorAll("*").forEach((element) => {
+          if (element.nodeType === 1) {
+            const fill = element.getAttribute("fill");
+            const stroke = element.getAttribute("stroke");
+            if (fill && fill !== "none" && fill !== "transparent") {
+              const normFill = fill.toLowerCase().trim();
+              if (isDark) {
+                if (normFill === targetDarkColor || normFill === "#000000" || normFill === "#000") {
+                  element.setAttribute("fill", "#ffffff");
+                  changed = true;
+                } else if (normFill === "#ffffff" || normFill === "#fff") {
+                  element.setAttribute("fill", bgDarkColor);
+                  changed = true;
+                }
+              } else {
+                if (normFill === "#ffffff" || normFill === "#fff") {
+                  element.setAttribute("fill", targetDarkColor);
+                  changed = true;
+                } else if (normFill === bgDarkColor) {
+                  element.setAttribute("fill", "#ffffff");
+                  changed = true;
+                }
+              }
+            }
+            if (stroke && stroke !== "none" && stroke !== "transparent") {
+              const normStroke = stroke.toLowerCase().trim();
+              if (isDark) {
+                if (normStroke === targetDarkColor || normStroke === "#000000" || normStroke === "#000") {
+                  element.setAttribute("stroke", "#ffffff");
+                  changed = true;
+                } else if (normStroke === "#ffffff" || normStroke === "#fff") {
+                  element.setAttribute("stroke", bgDarkColor);
+                  changed = true;
+                }
+              } else {
+                if (normStroke === "#ffffff" || normStroke === "#fff") {
+                  element.setAttribute("stroke", targetDarkColor);
+                  changed = true;
+                } else if (normStroke === bgDarkColor) {
+                  element.setAttribute("stroke", "#ffffff");
+                  changed = true;
+                }
+              }
+            }
+          }
+        });
+      }
+    } else {
+      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;
+        }
+      }
+      if (shape.color !== void 0 && normalize(shape.color) === from) {
+        shape.color = to;
         changed = true;
       }
-      if (normalize(shape.options.fill) === from) {
-        shape.options.fill = to;
+      if (shape.strokeColor !== void 0 && normalize(shape.strokeColor) === from) {
+        shape.strokeColor = to;
         changed = true;
       }
     }
-    if (shape.color !== void 0 && normalize(shape.color) === from) {
-      shape.color = to;
-      changed = true;
-    }
-    if (shape.strokeColor !== void 0 && normalize(shape.strokeColor) === from) {
-      shape.strokeColor = to;
-      changed = true;
-    }
     if (changed && typeof shape.draw === "function") {
       shape.draw();
     }
@@ -474,7 +528,7 @@ function useSketchEngine(svgRef, ready = true) {
           setZoom: (zoom) => useSketchStore_default.setState({ zoom }),
           getState: () => useSketchStore_default.getState()
         };
-        const { SketchEngine } = await import("./SketchEngine-ZGYBIZG7.js");
+        const { SketchEngine } = await import("./SketchEngine-BFLHJPCG.js");
         if (cancelled) return;
         const engine = new SketchEngine(svgRef.current);
         await engine.init();
@@ -2798,6 +2852,13 @@ function IconSidebar() {
   const [icons, setIcons] = useState12([]);
   const [loading, setLoading] = useState12(false);
   const debounceRef = useRef5(null);
+  const searchInputRef = useRef5(null);
+  const requestSequenceRef = useRef5(0);
+  useEffect8(() => {
+    if (!visible) return;
+    const frame = requestAnimationFrame(() => searchInputRef.current?.focus());
+    return () => cancelAnimationFrame(frame);
+  }, [visible]);
   useEffect8(() => {
     if (!visible) return;
     const handler = (e) => {
@@ -2818,6 +2879,7 @@ function IconSidebar() {
     return () => svgEl.removeEventListener("mousedown", handleCanvasClick);
   }, [visible, setActiveTool]);
   const fetchIcons = useCallback9(async (searchQuery, cat) => {
+    const requestSequence = ++requestSequenceRef.current;
     const params = new URLSearchParams();
     if (searchQuery) params.set("q", searchQuery);
     if (cat) params.set("category", cat);
@@ -2825,6 +2887,7 @@ function IconSidebar() {
     const cacheKey = params.toString();
     if (iconResultCache.has(cacheKey)) {
       setIcons(iconResultCache.get(cacheKey));
+      setLoading(false);
       return;
     }
     setLoading(true);
@@ -2834,38 +2897,21 @@ function IconSidebar() {
         const data = await res.json();
         const results = data.results || [];
         iconResultCache.set(cacheKey, results);
-        setIcons(results);
+        if (requestSequence === requestSequenceRef.current) setIcons(results);
       }
     } catch (err) {
       console.error("Icon fetch failed:", err);
     }
-    setLoading(false);
+    if (requestSequence === requestSequenceRef.current) setLoading(false);
   }, []);
   useEffect8(() => {
     if (!visible) return;
     if (debounceRef.current) clearTimeout(debounceRef.current);
     debounceRef.current = setTimeout(() => {
       fetchIcons(query, category);
-    }, query ? 300 : 0);
+    }, query ? 80 : 0);
     return () => clearTimeout(debounceRef.current);
   }, [query, visible, category, fetchIcons]);
-  const hasPreloaded = useRef5(false);
-  useEffect8(() => {
-    if (!visible || hasPreloaded.current) return;
-    hasPreloaded.current = true;
-    CATEGORIES.forEach((cat) => {
-      const params = new URLSearchParams();
-      if (cat.value) params.set("category", cat.value);
-      params.set("inline", "1");
-      const key = params.toString();
-      if (!iconResultCache.has(key)) {
-        fetch(`${getIconsBaseUrl()}/api/icons/search?${key}`).then((r) => r.ok ? r.json() : null).then((data) => {
-          if (data?.results) iconResultCache.set(key, data.results);
-        }).catch(() => {
-        });
-      }
-    });
-  }, [visible]);
   const handleIconClick = useCallback9((icon) => {
     if (typeof window === "undefined") return;
     const place = (svgContent) => {
@@ -2905,6 +2951,7 @@ function IconSidebar() {
             /* @__PURE__ */ jsx14(
               "input",
               {
+                ref: searchInputRef,
                 id: "iconSearchInput",
                 type: "text",
                 value: query,
@@ -2967,11 +3014,19 @@ function IconSidebar() {
 
 // src/react/components/sidebars/ImageSidebar.jsx
 import { useCallback as useCallback10 } from "react";
-import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
 function ImageSidebar() {
   const { t } = useTranslation();
   const selectedShapeSidebar = useSketchStore_default((s) => s.selectedShapeSidebar);
   const toggleImageGenerateModal = useUIStore_default((s) => s.toggleImageGenerateModal);
+  const toggleAIModal = useUIStore_default((s) => s.toggleAIModal);
+  const isGraph = typeof window !== "undefined" && window.currentShape?._frameType === "graph";
+  const handleEditGraph = useCallback10(() => {
+    const shape = window.currentShape;
+    if (!shape || shape._frameType !== "graph") return;
+    window.__aiEditTargetFrame = shape;
+    toggleAIModal();
+  }, [toggleAIModal]);
   const handleEditWithAI = useCallback10(() => {
     const shape = window.currentShape;
     if (!shape || shape.shapeName !== "image") return;
@@ -2989,32 +3044,49 @@ function ImageSidebar() {
     }
   }, []);
   return /* @__PURE__ */ jsxs15(ShapeSidebar, { visible: selectedShapeSidebar === "image", children: [
-    /* @__PURE__ */ jsxs15(
-      "button",
-      {
-        onClick: handleEditWithAI,
-        title: "Edit with AI",
-        className: "h-9 flex items-center gap-1.5 px-3 rounded-lg text-text-muted hover:text-purple-400 hover:bg-purple-500/10 transition-all duration-100",
-        children: [
-          /* @__PURE__ */ jsx15("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", stroke: "none", children: /* @__PURE__ */ jsx15("path", { d: "M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8L12 2z" }) }),
-          /* @__PURE__ */ jsx15("span", { className: "text-xs", children: "AI Edit" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx15(Divider, {}),
-    /* @__PURE__ */ jsxs15(
-      "button",
-      {
-        onClick: handleReplace,
-        title: "Replace image",
-        className: "h-9 flex items-center gap-1.5 px-3 rounded-lg text-text-muted hover:text-white hover:bg-white/[0.06] transition-all duration-100",
-        children: [
-          /* @__PURE__ */ jsx15("i", { className: "bx bx-upload text-base" }),
-          /* @__PURE__ */ jsx15("span", { className: "text-xs", children: "Replace" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx15(Divider, {}),
+    isGraph && /* @__PURE__ */ jsxs15(Fragment8, { children: [
+      /* @__PURE__ */ jsxs15(
+        "button",
+        {
+          onClick: handleEditGraph,
+          title: "Edit graph",
+          className: "h-9 flex cursor-pointer items-center gap-1.5 px-3 rounded-lg text-text-muted hover:text-accent hover:bg-accent/10 transition-all duration-100",
+          children: [
+            /* @__PURE__ */ jsx15("i", { className: "bx bx-line-chart text-base" }),
+            /* @__PURE__ */ jsx15("span", { className: "text-xs", children: "Edit graph" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx15(Divider, {})
+    ] }),
+    !isGraph && /* @__PURE__ */ jsxs15(Fragment8, { children: [
+      /* @__PURE__ */ jsxs15(
+        "button",
+        {
+          onClick: handleEditWithAI,
+          title: "Edit with AI",
+          className: "h-9 flex items-center gap-1.5 px-3 rounded-lg text-text-muted hover:text-purple-400 hover:bg-purple-500/10 transition-all duration-100",
+          children: [
+            /* @__PURE__ */ jsx15("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", stroke: "none", children: /* @__PURE__ */ jsx15("path", { d: "M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8L12 2z" }) }),
+            /* @__PURE__ */ jsx15("span", { className: "text-xs", children: "AI Edit" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx15(Divider, {}),
+      /* @__PURE__ */ jsxs15(
+        "button",
+        {
+          onClick: handleReplace,
+          title: "Replace image",
+          className: "h-9 flex items-center gap-1.5 px-3 rounded-lg text-text-muted hover:text-white hover:bg-white/[0.06] transition-all duration-100",
+          children: [
+            /* @__PURE__ */ jsx15("i", { className: "bx bx-upload text-base" }),
+            /* @__PURE__ */ jsx15("span", { className: "text-xs", children: "Replace" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx15(Divider, {})
+    ] }),
     /* @__PURE__ */ jsx15(LayerControls, {})
   ] });
 }
@@ -3050,6 +3122,7 @@ import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
 function MultiSelectActions() {
   const [count, setCount] = useState13(0);
   const [groupState, setGroupState] = useState13("none");
+  const [frameEligible, setFrameEligible] = useState13(false);
   useEffect9(() => {
     const interval = setInterval(() => {
       const ms = window.multiSelection;
@@ -3058,6 +3131,7 @@ function MultiSelectActions() {
       setCount((prev) => prev !== n ? n : prev);
       if (n < 2) {
         setGroupState("none");
+        setFrameEligible(false);
         return;
       }
       let withId = 0;
@@ -3068,6 +3142,7 @@ function MultiSelectActions() {
           groupIds.add(s.groupId);
         }
       });
+      setFrameEligible(Array.from(sel).every((s) => s.shapeName !== "frame" && !s.parentFrame));
       if (withId === n && groupIds.size === 1) setGroupState("all");
       else if (withId > 0) setGroupState("partial");
       else setGroupState("none");
@@ -3119,7 +3194,7 @@ function MultiSelectActions() {
       grouped && /* @__PURE__ */ jsx16("span", { className: "ml-1 text-accent-blue", children: "\xB7 grouped" })
     ] }),
     /* @__PURE__ */ jsx16("div", { className: "w-px h-4 bg-border-light" }),
-    !grouped && /* @__PURE__ */ jsxs16(
+    !grouped && frameEligible && /* @__PURE__ */ jsxs16(
       "button",
       {
         onClick: handleFrame,
@@ -3159,7 +3234,7 @@ function MultiSelectActions() {
 
 // src/react/components/canvas/ContextMenu.jsx
 import { useState as useState14, useEffect as useEffect10, useCallback as useCallback11, useRef as useRef6 } from "react";
-import { Fragment as Fragment8, jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
 function getCleanSVG() {
   const svgEl = window.svg;
   if (!svgEl) return null;
@@ -3504,7 +3579,7 @@ function ContextMenu() {
       onClick: (e) => e.stopPropagation(),
       children: isShape ? (
         /* ── Shape context menu ── */
-        /* @__PURE__ */ jsxs17(Fragment8, { children: [
+        /* @__PURE__ */ jsxs17(Fragment9, { children: [
           /* @__PURE__ */ jsx17(MenuItem, { label: "Cut", shortcut: "Ctrl+X", onClick: handleCut }),
           /* @__PURE__ */ jsx17(MenuItem, { label: "Copy", shortcut: "Ctrl+C", onClick: handleCopy }),
           /* @__PURE__ */ jsx17(MenuItem, { label: "Paste", shortcut: "Ctrl+V", onClick: handlePaste }),
@@ -3529,7 +3604,7 @@ function ContextMenu() {
         ] })
       ) : (
         /* ── Canvas context menu ── */
-        /* @__PURE__ */ jsxs17(Fragment8, { children: [
+        /* @__PURE__ */ jsxs17(Fragment9, { children: [
           /* @__PURE__ */ jsx17(MenuItem, { label: "Paste", shortcut: "Ctrl+V", onClick: handlePaste }),
           /* @__PURE__ */ jsx17(MenuItem, { label: "Copy to clipboard as PNG", shortcut: "Shift+Alt+C", onClick: handleCopyPNG }),
           /* @__PURE__ */ jsx17(MenuItem, { label: "Copy to clipboard as SVG", onClick: handleCopySVG }),
@@ -4713,7 +4788,7 @@ var _saveScene = null;
 var _loadScene = null;
 async function ensureSceneSerializer() {
   if (_saveScene && _loadScene) return;
-  const m = await import("./SceneSerializer-ARTKPZVR.js");
+  const m = await import("./SceneSerializer-GSJR7ZHC.js");
   _saveScene = m.saveScene;
   _loadScene = m.loadScene;
 }