saha-ui 1.22.5 → 1.22.6

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;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"}

package/dist/components/DragDrop/DebugOverlay.js

@@ -1,51 +1,57 @@
-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,
-  showDragPath: g = !0,
-  showPerformanceMetrics: h = !0
+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 = ({
+  enabled: x = !0,
+  position: D = "top-right",
+  showCollisionRects: M = !0,
+  showDragPath: c = !0,
+  showPerformanceMetrics: g = !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 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), {
+    activeId: F,
+    activeItem: v,
+    activeIndex: A,
+    sourceContainerId: z,
+    dragPosition: o,
+    isDragging: i,
+    selectionState: f,
+    historyState: u
+  } = O, [d, w] = l(null);
+  return h(() => {
+    if (!i || !c) {
+      y([]);
+      return;
+    }
+    const s = (r) => {
+      const n = { x: r.clientX, y: r.clientY, timestamp: Date.now() };
+      w(n), y((E) => [...E.slice(-50), n]);
+    };
+    return window.addEventListener("pointermove", s), () => {
+      window.removeEventListener("pointermove", s), w(null), y([]);
+    };
+  }, [i, c]), h(() => {
+    if (!x || !g) return;
     const s = () => {
-      const o = performance.now();
-      n.current.frames++, o >= n.current.lastTime + 1e3 && (O(
+      const n = performance.now();
+      a.current.frames++, n >= a.current.lastTime + 1e3 && (k(
         Math.round(
-          n.current.frames * 1e3 / (o - n.current.lastTime)
+          a.current.frames * 1e3 / (n - a.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: [
+      ), 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: [
     /* @__PURE__ */ t(
       "div",
       {
-        className: C(
+        className: j(
           "fixed z-[9999] bg-background border rounded-lg shadow-lg",
           "max-w-md transition-all duration-200",
           {
@@ -53,8 +59,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"
+          }[D],
+          !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 +71,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(T, { className: "w-4 h-4" }) : /* @__PURE__ */ e(L, { 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: [
+            g && /* @__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 +86,18 @@ const T = ({
                   /* @__PURE__ */ e(
                     "span",
                     {
-                      className: C(
+                      className: j(
                         "ml-2 font-mono font-medium",
-                        x >= 50 ? "text-green-500" : x >= 30 ? "text-yellow-500" : "text-red-500"
+                        N >= 50 ? "text-green-500" : N >= 30 ? "text-yellow-500" : "text-red-500"
                       ),
-                      children: x
+                      children: N
                     }
                   )
                 ] }),
                 /* @__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),
+                    R.toFixed(2),
                     "ms"
                   ] })
                 ] })
@@ -102,45 +108,45 @@ 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: i ? "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: A ?? "—" })
                 ] }),
                 /* @__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: [
+                o && /* @__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(o.x),
                     ", y:",
                     " ",
-                    Math.round(a.y)
+                    Math.round(o.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((s) => /* @__PURE__ */ e(
                     "span",
                     {
                       className: "px-1.5 py-0.5 bg-primary/20 text-primary rounded text-[10px] font-mono",
@@ -151,32 +157,32 @@ const T = ({
                 ] })
               ] })
             ] }),
-            c && /* @__PURE__ */ t("div", { className: "space-y-1", children: [
+            u && /* @__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: u.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: u.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: u.past.length })
                 ] })
               ] })
             ] }),
-            b && /* @__PURE__ */ t("div", { className: "space-y-1", children: [
+            v && /* @__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(v, null, 2) })
             ] })
           ] })
         ]
       }
     ),
-    g && r && d.length > 1 && /* @__PURE__ */ t(
+    c && i && p.length > 1 && /* @__PURE__ */ t(
       "svg",
       {
         className: "fixed inset-0 pointer-events-none z-[9998]",
@@ -197,7 +203,7 @@ const T = ({
           /* @__PURE__ */ e(
             "polyline",
             {
-              points: d.map((s) => `${s.x},${s.y}`).join(" "),
+              points: p.map((s) => `${s.x},${s.y}`).join(" "),
               fill: "none",
               stroke: "url(#dragPathGrad)",
               strokeWidth: 2,
@@ -206,8 +212,8 @@ const T = ({
               strokeLinejoin: "round"
             }
           ),
-          d.map((s, m) => {
-            const o = 0.18 + m / d.length * 0.82;
+          p.map((s, r) => {
+            const n = 0.18 + r / p.length * 0.82;
             return /* @__PURE__ */ e(
               "circle",
               {
@@ -215,15 +221,15 @@ const T = ({
                 cy: s.y,
                 r: 2.25,
                 fill: "url(#dotGrad)",
-                fillOpacity: o
+                fillOpacity: n
               },
-              m
+              r
             );
           })
         ]
       }
     ),
-    g && r && a && /* @__PURE__ */ t(v, { children: [
+    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",
@@ -231,8 +237,8 @@ const T = ({
           "aria-hidden": !0,
           style: {
             position: "fixed",
-            left: a.x,
-            top: a.y,
+            left: d ? d.x : o.x,
+            top: d ? d.y : o.y,
             transform: "translate(-50%, -50%)",
             pointerEvents: "none",
             zIndex: 1e4,
@@ -280,7 +286,7 @@ const T = ({
     ] })
   ] }) : null;
 };
-T.displayName = "DebugOverlay";
+Y.displayName = "DebugOverlay";
 export {
-  T as DebugOverlay
+  Y as DebugOverlay
 };

package/package.json

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