saha-ui 1.22.5 → 1.22.7

package/dist/components/DragDrop/DebugOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DebugOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/DragDrop/DebugOverlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAS3D,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;IACrE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAMD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAwWpD,CAAC"}
+{"version":3,"file":"DebugOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/DragDrop/DebugOverlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAU3D,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;IACrE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAMD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyZpD,CAAC"}

package/dist/components/DragDrop/DebugOverlay.js

@@ -1,51 +1,63 @@
 import { jsxs as t, Fragment as v, jsx as e } from "react/jsx-runtime";
-import { useState as f, useRef as w, useEffect as p } from "react";
-import { useDragDropContext as P } from "./DragDropContext.js";
-import { cn as C } from "../../lib/utils.js";
-import { ChevronUp as z, ChevronDown as G } from "lucide-react";
-const T = ({
-  enabled: u = !0,
-  position: I = "top-right",
-  showCollisionRects: E = !0,
+import { useState as l, useRef as w, useEffect as c } from "react";
+import { createPortal as T } from "react-dom";
+import { useDragDropContext as L } from "./DragDropContext.js";
+import { cn as D } from "../../lib/utils.js";
+import { ChevronUp as Y, ChevronDown as M } from "lucide-react";
+const U = ({
+  enabled: x = !0,
+  position: O = "top-right",
+  showCollisionRects: q = !0,
   showDragPath: g = !0,
-  showPerformanceMetrics: h = !0
+  showPerformanceMetrics: y = !0
 }) => {
-  const j = P(), [i, D] = f(!0), [d, y] = f([]), [x, O] = f(0), [S, k] = f(0), n = w({ frames: 0, lastTime: performance.now() }), N = w(0), {
-    activeId: R,
-    activeItem: b,
-    activeIndex: F,
-    sourceContainerId: A,
-    dragPosition: a,
-    isDragging: r,
-    selectionState: l,
-    historyState: c
-  } = j;
-  return p(() => {
-    y(r && a ? (s) => [
-      ...s.slice(-50),
-      // Keep last 50 points
-      { x: a.x, y: a.y, timestamp: Date.now() }
-    ] : []);
-  }, [r, a]), p(() => {
-    if (!u || !h) return;
-    const s = () => {
-      const o = performance.now();
-      n.current.frames++, o >= n.current.lastTime + 1e3 && (O(
+  const R = L(), [m, S] = l(!0), [p, N] = l([]), [b, k] = l(0), [P, A] = l(0), o = w({ frames: 0, lastTime: performance.now() }), C = w(0), {
+    activeId: F,
+    activeItem: I,
+    activeIndex: E,
+    sourceContainerId: z,
+    dragPosition: i,
+    isDragging: u,
+    selectionState: f,
+    historyState: h
+  } = R, [d, j] = l(null), r = w(null);
+  return c(() => {
+    const n = document.createElement("div");
+    return n.setAttribute("data-saha-debug-overlay-portal", ""), document.body.appendChild(n), r.current = n, () => {
+      r.current && r.current.parentNode && r.current.parentNode.removeChild(r.current), r.current = null;
+    };
+  }, []), c(() => {
+    if (!u || !g) {
+      N([]);
+      return;
+    }
+    const n = (a) => {
+      const s = { x: a.clientX, y: a.clientY, timestamp: Date.now() };
+      j(s), N((G) => [...G.slice(-50), s]);
+    };
+    return window.addEventListener("pointermove", n), () => {
+      window.removeEventListener("pointermove", n), j(null), N([]);
+    };
+  }, [u, g]), c(() => {
+    if (!x || !y) return;
+    const n = () => {
+      const s = performance.now();
+      o.current.frames++, s >= o.current.lastTime + 1e3 && (k(
         Math.round(
-          n.current.frames * 1e3 / (o - n.current.lastTime)
+          o.current.frames * 1e3 / (s - o.current.lastTime)
         )
-      ), n.current.frames = 0, n.current.lastTime = o), requestAnimationFrame(s);
-    }, m = requestAnimationFrame(s);
-    return () => cancelAnimationFrame(m);
-  }, [u, h]), p(() => {
-    N.current = performance.now();
-  }), p(() => {
-    k(performance.now() - N.current);
-  }), u ? /* @__PURE__ */ t(v, { children: [
+      ), o.current.frames = 0, o.current.lastTime = s), requestAnimationFrame(n);
+    }, a = requestAnimationFrame(n);
+    return () => cancelAnimationFrame(a);
+  }, [x, y]), c(() => {
+    C.current = performance.now();
+  }), c(() => {
+    A(performance.now() - C.current);
+  }), x ? /* @__PURE__ */ t(v, { children: [
     /* @__PURE__ */ t(
       "div",
       {
-        className: C(
+        className: D(
           "fixed z-[9999] bg-background border rounded-lg shadow-lg",
           "max-w-md transition-all duration-200",
           {
@@ -53,8 +65,8 @@ const T = ({
             "top-right": "top-4 right-4",
             "bottom-left": "bottom-4 left-4",
             "bottom-right": "bottom-4 right-4"
-          }[I],
-          !i && "w-auto"
+          }[O],
+          !m && "w-auto"
         ),
         children: [
           /* @__PURE__ */ t("div", { className: "flex items-center justify-between px-3 py-2 border-b bg-muted/50", children: [
@@ -65,14 +77,14 @@ const T = ({
             /* @__PURE__ */ e("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ e(
               "button",
               {
-                onClick: () => D(!i),
+                onClick: () => S(!m),
                 className: "p-1 hover:bg-background rounded transition-colors",
-                children: i ? /* @__PURE__ */ e(z, { className: "w-4 h-4" }) : /* @__PURE__ */ e(G, { className: "w-4 h-4" })
+                children: m ? /* @__PURE__ */ e(Y, { className: "w-4 h-4" }) : /* @__PURE__ */ e(M, { className: "w-4 h-4" })
               }
             ) })
           ] }),
-          i && /* @__PURE__ */ t("div", { className: "p-3 space-y-3 text-xs max-h-[500px] overflow-auto", children: [
-            h && /* @__PURE__ */ t("div", { className: "space-y-1", children: [
+          m && /* @__PURE__ */ t("div", { className: "p-3 space-y-3 text-xs max-h-[500px] overflow-auto", children: [
+            y && /* @__PURE__ */ t("div", { className: "space-y-1", children: [
               /* @__PURE__ */ e("h4", { className: "font-semibold text-foreground mb-2", children: "Performance" }),
               /* @__PURE__ */ t("div", { className: "grid grid-cols-2 gap-2", children: [
                 /* @__PURE__ */ t("div", { className: "bg-muted/50 rounded px-2 py-1", children: [
@@ -80,18 +92,18 @@ const T = ({
                   /* @__PURE__ */ e(
                     "span",
                     {
-                      className: C(
+                      className: D(
                         "ml-2 font-mono font-medium",
-                        x >= 50 ? "text-green-500" : x >= 30 ? "text-yellow-500" : "text-red-500"
+                        b >= 50 ? "text-green-500" : b >= 30 ? "text-yellow-500" : "text-red-500"
                       ),
-                      children: x
+                      children: b
                     }
                   )
                 ] }),
                 /* @__PURE__ */ t("div", { className: "bg-muted/50 rounded px-2 py-1", children: [
                   /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "Render:" }),
                   /* @__PURE__ */ t("span", { className: "ml-2 font-mono font-medium", children: [
-                    S.toFixed(2),
+                    P.toFixed(2),
                     "ms"
                   ] })
                 ] })
@@ -102,185 +114,200 @@ const T = ({
               /* @__PURE__ */ t("div", { className: "bg-muted/50 rounded px-2 py-1 space-y-1", children: [
                 /* @__PURE__ */ t("div", { className: "flex justify-between", children: [
                   /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "Is Dragging:" }),
-                  /* @__PURE__ */ e("span", { className: "font-medium", children: r ? "Yes" : "No" })
+                  /* @__PURE__ */ e("span", { className: "font-medium", children: u ? "Yes" : "No" })
                 ] }),
                 /* @__PURE__ */ t("div", { className: "flex justify-between", children: [
                   /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "Active ID:" }),
-                  /* @__PURE__ */ e("span", { className: "font-mono font-medium truncate max-w-[120px]", children: R || "—" })
+                  /* @__PURE__ */ e("span", { className: "font-mono font-medium truncate max-w-[120px]", children: F || "—" })
                 ] }),
                 /* @__PURE__ */ t("div", { className: "flex justify-between", children: [
                   /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "Active Index:" }),
-                  /* @__PURE__ */ e("span", { className: "font-medium", children: F ?? "—" })
+                  /* @__PURE__ */ e("span", { className: "font-medium", children: E ?? "—" })
                 ] }),
                 /* @__PURE__ */ t("div", { className: "flex justify-between", children: [
                   /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "Container:" }),
-                  /* @__PURE__ */ e("span", { className: "font-mono font-medium truncate max-w-[120px]", children: A || "—" })
+                  /* @__PURE__ */ e("span", { className: "font-mono font-medium truncate max-w-[120px]", children: z || "—" })
                 ] }),
-                a && /* @__PURE__ */ t("div", { className: "flex justify-between", children: [
+                i && /* @__PURE__ */ t("div", { className: "flex justify-between", children: [
                   /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "Position:" }),
                   /* @__PURE__ */ t("span", { className: "font-mono font-medium", children: [
                     "x: ",
-                    Math.round(a.x),
+                    Math.round(i.x),
                     ", y:",
                     " ",
-                    Math.round(a.y)
+                    Math.round(i.y)
                   ] })
                 ] })
               ] })
             ] }),
-            l && /* @__PURE__ */ t("div", { className: "space-y-1", children: [
+            f && /* @__PURE__ */ t("div", { className: "space-y-1", children: [
               /* @__PURE__ */ e("h4", { className: "font-semibold text-foreground mb-2", children: "Multi-Selection" }),
               /* @__PURE__ */ t("div", { className: "bg-muted/50 rounded px-2 py-1 space-y-1", children: [
                 /* @__PURE__ */ t("div", { className: "flex justify-between", children: [
                   /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "Selected:" }),
                   /* @__PURE__ */ t("span", { className: "font-medium", children: [
-                    l.selectedIds.size,
+                    f.selectedIds.size,
                     " items"
                   ] })
                 ] }),
-                l.selectedIds.size > 0 && /* @__PURE__ */ t("div", { className: "mt-1 pt-1 border-t border-border", children: [
+                f.selectedIds.size > 0 && /* @__PURE__ */ t("div", { className: "mt-1 pt-1 border-t border-border", children: [
                   /* @__PURE__ */ e("div", { className: "text-muted-foreground mb-1", children: "IDs:" }),
-                  /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1", children: Array.from(l.selectedIds).map((s) => /* @__PURE__ */ e(
+                  /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1", children: Array.from(f.selectedIds).map((n) => /* @__PURE__ */ e(
                     "span",
                     {
                       className: "px-1.5 py-0.5 bg-primary/20 text-primary rounded text-[10px] font-mono",
-                      children: s
+                      children: n
                     },
-                    s
+                    n
                   )) })
                 ] })
               ] })
             ] }),
-            c && /* @__PURE__ */ t("div", { className: "space-y-1", children: [
+            h && /* @__PURE__ */ t("div", { className: "space-y-1", children: [
               /* @__PURE__ */ e("h4", { className: "font-semibold text-foreground mb-2", children: "Undo/Redo" }),
               /* @__PURE__ */ t("div", { className: "bg-muted/50 rounded px-2 py-1 space-y-1", children: [
                 /* @__PURE__ */ t("div", { className: "flex justify-between", children: [
                   /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "Can Undo:" }),
-                  /* @__PURE__ */ e("span", { className: "font-medium", children: c.past.length > 0 ? "Yes" : "No" })
+                  /* @__PURE__ */ e("span", { className: "font-medium", children: h.past.length > 0 ? "Yes" : "No" })
                 ] }),
                 /* @__PURE__ */ t("div", { className: "flex justify-between", children: [
                   /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "Can Redo:" }),
-                  /* @__PURE__ */ e("span", { className: "font-medium", children: c.future.length > 0 ? "Yes" : "No" })
+                  /* @__PURE__ */ e("span", { className: "font-medium", children: h.future.length > 0 ? "Yes" : "No" })
                 ] }),
                 /* @__PURE__ */ t("div", { className: "flex justify-between", children: [
                   /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "History Size:" }),
-                  /* @__PURE__ */ e("span", { className: "font-medium", children: c.past.length })
+                  /* @__PURE__ */ e("span", { className: "font-medium", children: h.past.length })
                 ] })
               ] })
             ] }),
-            b && /* @__PURE__ */ t("div", { className: "space-y-1", children: [
+            I && /* @__PURE__ */ t("div", { className: "space-y-1", children: [
               /* @__PURE__ */ e("h4", { className: "font-semibold text-foreground mb-2", children: "Active Item" }),
-              /* @__PURE__ */ e("pre", { className: "bg-muted/50 rounded px-2 py-1 overflow-auto max-h-32 text-[10px] font-mono", children: JSON.stringify(b, null, 2) })
+              /* @__PURE__ */ e("pre", { className: "bg-muted/50 rounded px-2 py-1 overflow-auto max-h-32 text-[10px] font-mono", children: JSON.stringify(I, null, 2) })
             ] })
           ] })
         ]
       }
     ),
-    g && r && d.length > 1 && /* @__PURE__ */ t(
-      "svg",
-      {
-        className: "fixed inset-0 pointer-events-none z-[9998]",
-        style: { width: "100vw", height: "100vh" },
-        children: [
-          /* @__PURE__ */ t("defs", { children: [
-            /* @__PURE__ */ t("linearGradient", { id: "dragPathGrad", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
-              /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "#6366f1", stopOpacity: "0.6" }),
-              /* @__PURE__ */ e("stop", { offset: "50%", stopColor: "#8b5cf6", stopOpacity: "0.9" }),
-              /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "#6366f1", stopOpacity: "1" })
-            ] }),
-            /* @__PURE__ */ t("radialGradient", { id: "dotGrad", cx: "30%", cy: "30%", r: "70%", children: [
-              /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "#ffffff", stopOpacity: "1" }),
-              /* @__PURE__ */ e("stop", { offset: "30%", stopColor: "#6366f1", stopOpacity: "1" }),
-              /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "#8b5cf6", stopOpacity: "0.6" })
-            ] })
-          ] }),
-          /* @__PURE__ */ e(
-            "polyline",
+    r.current && u && g && T(
+      /* @__PURE__ */ t(v, { children: [
+        p.length > 1 && /* @__PURE__ */ t(
+          "svg",
+          {
+            className: "fixed inset-0 pointer-events-none z-[9998]",
+            style: { width: "100vw", height: "100vh" },
+            children: [
+              /* @__PURE__ */ t("defs", { children: [
+                /* @__PURE__ */ t(
+                  "linearGradient",
+                  {
+                    id: "dragPathGrad",
+                    x1: "0%",
+                    y1: "0%",
+                    x2: "100%",
+                    y2: "0%",
+                    children: [
+                      /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "#6366f1", stopOpacity: "0.6" }),
+                      /* @__PURE__ */ e("stop", { offset: "50%", stopColor: "#8b5cf6", stopOpacity: "0.9" }),
+                      /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "#6366f1", stopOpacity: "1" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ t("radialGradient", { id: "dotGrad", cx: "30%", cy: "30%", r: "70%", children: [
+                  /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "#ffffff", stopOpacity: "1" }),
+                  /* @__PURE__ */ e("stop", { offset: "30%", stopColor: "#6366f1", stopOpacity: "1" }),
+                  /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "#8b5cf6", stopOpacity: "0.6" })
+                ] })
+              ] }),
+              /* @__PURE__ */ e(
+                "polyline",
+                {
+                  points: p.map((n) => `${n.x},${n.y}`).join(" "),
+                  fill: "none",
+                  stroke: "url(#dragPathGrad)",
+                  strokeWidth: 2,
+                  strokeOpacity: 0.95,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ),
+              p.map((n, a) => {
+                const s = 0.18 + a / p.length * 0.82;
+                return /* @__PURE__ */ e(
+                  "circle",
+                  {
+                    cx: n.x,
+                    cy: n.y,
+                    r: 2.25,
+                    fill: "url(#dotGrad)",
+                    fillOpacity: s
+                  },
+                  a
+                );
+              })
+            ]
+          }
+        ),
+        (d || i) && /* @__PURE__ */ t(v, { children: [
+          /* @__PURE__ */ e("style", { children: "@keyframes sahaPulse { 0% { transform: scale(1); opacity: 0.95 } 50% { transform: scale(1.12); opacity: 0.75 } 100% { transform: scale(1); opacity: 0.95 } }" }),
+          /* @__PURE__ */ t(
+            "div",
             {
-              points: d.map((s) => `${s.x},${s.y}`).join(" "),
-              fill: "none",
-              stroke: "url(#dragPathGrad)",
-              strokeWidth: 2,
-              strokeOpacity: 0.95,
-              strokeLinecap: "round",
-              strokeLinejoin: "round"
-            }
-          ),
-          d.map((s, m) => {
-            const o = 0.18 + m / d.length * 0.82;
-            return /* @__PURE__ */ e(
-              "circle",
-              {
-                cx: s.x,
-                cy: s.y,
-                r: 2.25,
-                fill: "url(#dotGrad)",
-                fillOpacity: o
+              "aria-hidden": !0,
+              style: {
+                position: "fixed",
+                left: d ? d.x : i.x,
+                top: d ? d.y : i.y,
+                transform: "translate(-50%, -50%)",
+                pointerEvents: "none",
+                zIndex: 1e4,
+                width: 40,
+                height: 40,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
               },
-              m
-            );
-          })
-        ]
-      }
-    ),
-    g && r && a && /* @__PURE__ */ t(v, { children: [
-      /* @__PURE__ */ e("style", { children: "@keyframes sahaPulse { 0% { transform: scale(1); opacity: 0.95 } 50% { transform: scale(1.12); opacity: 0.75 } 100% { transform: scale(1); opacity: 0.95 } }" }),
-      /* @__PURE__ */ t(
-        "div",
-        {
-          "aria-hidden": !0,
-          style: {
-            position: "fixed",
-            left: a.x,
-            top: a.y,
-            transform: "translate(-50%, -50%)",
-            pointerEvents: "none",
-            zIndex: 1e4,
-            width: 40,
-            height: 40,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          },
-          children: [
-            /* @__PURE__ */ e(
-              "div",
-              {
-                style: {
-                  width: 40,
-                  height: 40,
-                  borderRadius: 9999,
-                  background: "radial-gradient(circle at 35% 30%, rgba(139,92,246,0.20), rgba(99,102,241,0.06))",
-                  border: "1px solid rgba(99,102,241,0.18)",
-                  boxShadow: "0 8px 22px rgba(15,23,42,0.14)",
-                  animation: "sahaPulse 1.6s ease-in-out infinite",
-                  transformOrigin: "center"
-                }
-              }
-            ),
-            /* @__PURE__ */ e(
-              "div",
-              {
-                style: {
-                  position: "absolute",
-                  left: "50%",
-                  top: "50%",
-                  transform: "translate(-50%, -50%)",
-                  width: 10,
-                  height: 10,
-                  borderRadius: 9999,
-                  background: "linear-gradient(135deg,#8b5cf6,#6366f1)",
-                  boxShadow: "0 6px 18px rgba(139,92,246,0.24)"
-                }
-              }
-            )
-          ]
-        }
-      )
-    ] })
+              children: [
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    style: {
+                      width: 40,
+                      height: 40,
+                      borderRadius: 9999,
+                      background: "radial-gradient(circle at 35% 30%, rgba(139,92,246,0.20), rgba(99,102,241,0.06))",
+                      border: "1px solid rgba(99,102,241,0.18)",
+                      boxShadow: "0 8px 22px rgba(15,23,42,0.14)",
+                      animation: "sahaPulse 1.6s ease-in-out infinite",
+                      transformOrigin: "center"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      left: "50%",
+                      top: "50%",
+                      transform: "translate(-50%, -50%)",
+                      width: 10,
+                      height: 10,
+                      borderRadius: 9999,
+                      background: "linear-gradient(135deg,#8b5cf6,#6366f1)",
+                      boxShadow: "0 6px 18px rgba(139,92,246,0.24)"
+                    }
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ] }),
+      r.current
+    )
   ] }) : null;
 };
-T.displayName = "DebugOverlay";
+U.displayName = "DebugOverlay";
 export {
-  T as DebugOverlay
+  U as DebugOverlay
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saha-ui",
-  "version": "1.22.5",
+  "version": "1.22.7",
   "description": "Ultra-modern React component library built with TypeScript, Tailwind CSS v4, and OKLCH colors",
   "type": "module",
   "license": "MIT",