saha-ui 1.22.6 → 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,CAyXpD,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,57 +1,63 @@
-import { jsxs as t, Fragment as C, jsx as e } from "react/jsx-runtime";
-import { useState as l, useRef as I, useEffect as h } from "react";
-import { useDragDropContext as G } from "./DragDropContext.js";
-import { cn as j } from "../../lib/utils.js";
-import { ChevronUp as T, ChevronDown as L } from "lucide-react";
-const Y = ({
+import { jsxs as t, Fragment as v, jsx as e } from "react/jsx-runtime";
+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: D = "top-right",
-  showCollisionRects: M = !0,
-  showDragPath: c = !0,
-  showPerformanceMetrics: g = !0
+  position: O = "top-right",
+  showCollisionRects: q = !0,
+  showDragPath: g = !0,
+  showPerformanceMetrics: y = !0
 }) => {
-  const O = G(), [m, S] = l(!0), [p, y] = l([]), [N, k] = l(0), [R, P] = l(0), a = I({ frames: 0, lastTime: performance.now() }), b = I(0), {
+  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: v,
-    activeIndex: A,
+    activeItem: I,
+    activeIndex: E,
     sourceContainerId: z,
-    dragPosition: o,
-    isDragging: i,
+    dragPosition: i,
+    isDragging: u,
     selectionState: f,
-    historyState: u
-  } = O, [d, w] = l(null);
-  return h(() => {
-    if (!i || !c) {
-      y([]);
+    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 s = (r) => {
-      const n = { x: r.clientX, y: r.clientY, timestamp: Date.now() };
-      w(n), y((E) => [...E.slice(-50), n]);
+    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", s), () => {
-      window.removeEventListener("pointermove", s), w(null), y([]);
+    return window.addEventListener("pointermove", n), () => {
+      window.removeEventListener("pointermove", n), j(null), N([]);
     };
-  }, [i, c]), h(() => {
-    if (!x || !g) return;
-    const s = () => {
-      const n = performance.now();
-      a.current.frames++, n >= a.current.lastTime + 1e3 && (k(
+  }, [u, g]), c(() => {
+    if (!x || !y) return;
+    const n = () => {
+      const s = performance.now();
+      o.current.frames++, s >= o.current.lastTime + 1e3 && (k(
         Math.round(
-          a.current.frames * 1e3 / (n - a.current.lastTime)
+          o.current.frames * 1e3 / (s - o.current.lastTime)
         )
-      ), a.current.frames = 0, a.current.lastTime = n), requestAnimationFrame(s);
-    }, r = requestAnimationFrame(s);
-    return () => cancelAnimationFrame(r);
-  }, [x, g]), h(() => {
-    b.current = performance.now();
-  }), h(() => {
-    P(performance.now() - b.current);
-  }), x ? /* @__PURE__ */ t(C, { 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: j(
+        className: D(
           "fixed z-[9999] bg-background border rounded-lg shadow-lg",
           "max-w-md transition-all duration-200",
           {
@@ -59,7 +65,7 @@ const Y = ({
             "top-right": "top-4 right-4",
             "bottom-left": "bottom-4 left-4",
             "bottom-right": "bottom-4 right-4"
-          }[D],
+          }[O],
           !m && "w-auto"
         ),
         children: [
@@ -73,12 +79,12 @@ const Y = ({
               {
                 onClick: () => S(!m),
                 className: "p-1 hover:bg-background rounded transition-colors",
-                children: m ? /* @__PURE__ */ e(T, { className: "w-4 h-4" }) : /* @__PURE__ */ e(L, { className: "w-4 h-4" })
+                children: m ? /* @__PURE__ */ e(Y, { className: "w-4 h-4" }) : /* @__PURE__ */ e(M, { className: "w-4 h-4" })
               }
             ) })
           ] }),
           m && /* @__PURE__ */ t("div", { className: "p-3 space-y-3 text-xs max-h-[500px] overflow-auto", children: [
-            g && /* @__PURE__ */ t("div", { className: "space-y-1", 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: [
@@ -86,18 +92,18 @@ const Y = ({
                   /* @__PURE__ */ e(
                     "span",
                     {
-                      className: j(
+                      className: D(
                         "ml-2 font-mono font-medium",
-                        N >= 50 ? "text-green-500" : N >= 30 ? "text-yellow-500" : "text-red-500"
+                        b >= 50 ? "text-green-500" : b >= 30 ? "text-yellow-500" : "text-red-500"
                       ),
-                      children: N
+                      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: [
-                    R.toFixed(2),
+                    P.toFixed(2),
                     "ms"
                   ] })
                 ] })
@@ -108,7 +114,7 @@ const Y = ({
               /* @__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: i ? "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:" }),
@@ -116,20 +122,20 @@ const Y = ({
                 ] }),
                 /* @__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: A ?? "—" })
+                  /* @__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: z || "—" })
                 ] }),
-                o && /* @__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(o.x),
+                    Math.round(i.x),
                     ", y:",
                     " ",
-                    Math.round(o.y)
+                    Math.round(i.y)
                   ] })
                 ] })
               ] })
@@ -146,147 +152,162 @@ const Y = ({
                 ] }),
                 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(f.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
                   )) })
                 ] })
               ] })
             ] }),
-            u && /* @__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: u.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: u.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: u.past.length })
+                  /* @__PURE__ */ e("span", { className: "font-medium", children: h.past.length })
                 ] })
               ] })
             ] }),
-            v && /* @__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(v, 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) })
             ] })
           ] })
         ]
       }
     ),
-    c && i && 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",
+    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: p.map((s) => `${s.x},${s.y}`).join(" "),
-              fill: "none",
-              stroke: "url(#dragPathGrad)",
-              strokeWidth: 2,
-              strokeOpacity: 0.95,
-              strokeLinecap: "round",
-              strokeLinejoin: "round"
-            }
-          ),
-          p.map((s, r) => {
-            const n = 0.18 + r / p.length * 0.82;
-            return /* @__PURE__ */ e(
-              "circle",
-              {
-                cx: s.x,
-                cy: s.y,
-                r: 2.25,
-                fill: "url(#dotGrad)",
-                fillOpacity: n
+              "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"
               },
-              r
-            );
-          })
-        ]
-      }
-    ),
-    c && i && (d || o) && /* @__PURE__ */ t(C, { 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: d ? d.x : o.x,
-            top: d ? d.y : o.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;
 };
-Y.displayName = "DebugOverlay";
+U.displayName = "DebugOverlay";
 export {
-  Y as DebugOverlay
+  U as DebugOverlay
 };

package/package.json

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