@layers-app/shared 0.2.4 → 0.2.6

package/dist/components/ImageCropper/ImageCropper.js

@@ -0,0 +1,356 @@
+import { jsxs as X, jsx as g, Fragment as T } from "react/jsx-runtime";
+import { useRef as R, useState as E, useMemo as he, useEffect as q, useCallback as C } from "react";
+import { Box as se } from "@mantine/core";
+import { useElementSize as re } from "@mantine/hooks";
+import r from "./ImageCropper.module.css.js";
+const ge = ({
+  src: z,
+  variant: Y = "square",
+  aspectRatio: c = 1,
+  minSize: f = 50,
+  maxSize: v,
+  onCropComplete: F,
+  onCropDataChange: O
+}) => {
+  const {
+    ref: ee,
+    width: M,
+    height: L
+  } = re(), $ = R(null), j = R(null), [H, te] = E(!1), [m, ne] = E({ width: 0, height: 0 }), o = he(() => {
+    if (!H || M === 0 || L === 0 || m.width === 0)
+      return { x: 0, y: 0, width: M, height: L };
+    const i = M / L, h = m.width / m.height;
+    if (h > i) {
+      const d = M / h;
+      return {
+        x: 0,
+        y: (L - d) / 2,
+        width: M,
+        height: d
+      };
+    } else {
+      const d = L * h;
+      return {
+        x: (M - d) / 2,
+        y: 0,
+        width: d,
+        height: L
+      };
+    }
+  }, [H, M, L, m]), [t, G] = E({
+    x: 0,
+    y: 0,
+    width: 200,
+    height: 200
+  }), [W, K] = E(!1), [D, Q] = E(!1), [w, U] = E(null), [J, V] = E({ x: 0, y: 0 }), [e, Z] = E({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  });
+  q(() => {
+    if (!H || M === 0 || L === 0 || o.width === 0)
+      return;
+    let i, h, d = Math.min(o.width, o.height) * 0.8;
+    v && (d = Math.min(d, v)), c >= 1 ? (i = d, h = d / c) : (h = d, i = d * c);
+    const u = o.x + (o.width - i) / 2, b = o.y + (o.height - h) / 2;
+    G({ x: u, y: b, width: i, height: h });
+  }, [
+    H,
+    c,
+    M,
+    L,
+    o,
+    v
+  ]);
+  const ie = C(() => {
+    $.current && (ne({
+      width: $.current.naturalWidth,
+      height: $.current.naturalHeight
+    }), te(!0));
+  }, []), _ = C(
+    (i) => {
+      i.preventDefault(), i.stopPropagation();
+      const h = "touches" in i ? i.touches[0].clientX : i.clientX, d = "touches" in i ? i.touches[0].clientY : i.clientY;
+      K(!0), V({ x: h, y: d }), Z({ ...t });
+    },
+    [t]
+  ), A = C(
+    (i) => (h) => {
+      h.preventDefault(), h.stopPropagation();
+      const d = "touches" in h ? h.touches[0].clientX : h.clientX, u = "touches" in h ? h.touches[0].clientY : h.clientY;
+      Q(!0), U(i), V({ x: d, y: u }), Z({ ...t });
+    },
+    [t]
+  );
+  q(() => {
+    const i = (d) => {
+      if (!W && !D) return;
+      const u = "touches" in d ? d.touches[0].clientX : d.clientX, b = "touches" in d ? d.touches[0].clientY : d.clientY, y = u - J.x, k = b - J.y, p = o.x, x = o.y, N = o.x + o.width, I = o.y + o.height;
+      if (W) {
+        let a = e.x + y, l = e.y + k;
+        a = Math.max(p, Math.min(a, N - t.width)), l = Math.max(x, Math.min(l, I - t.height)), G((n) => ({ ...n, x: a, y: l }));
+      }
+      if (D && w) {
+        let a = e.x, l = e.y, n = e.width, s = e.height;
+        switch (w) {
+          case "se":
+            n = Math.max(f, e.width + y), s = n / c;
+            break;
+          case "sw":
+            n = Math.max(f, e.width - y), s = n / c, a = e.x + e.width - n;
+            break;
+          case "ne":
+            n = Math.max(f, e.width + y), s = n / c, l = e.y + e.height - s;
+            break;
+          case "nw":
+            n = Math.max(f, e.width - y), s = n / c, a = e.x + e.width - n, l = e.y + e.height - s;
+            break;
+          case "e":
+            n = Math.max(f, e.width + y), s = n / c, l = e.y + (e.height - s) / 2;
+            break;
+          case "w":
+            n = Math.max(f, e.width - y), s = n / c, a = e.x + e.width - n, l = e.y + (e.height - s) / 2;
+            break;
+          case "s":
+            s = Math.max(f, e.height + k), n = s * c, a = e.x + (e.width - n) / 2;
+            break;
+          case "n":
+            s = Math.max(f, e.height - k), n = s * c, a = e.x + (e.width - n) / 2, l = e.y + e.height - s;
+            break;
+        }
+        v && (c >= 1 ? n > v && (n = v, s = n / c, w.includes("w") && (a = e.x + e.width - n), w.includes("n") && (l = e.y + e.height - s), (w === "e" || w === "w") && (l = e.y + (e.height - s) / 2), (w === "n" || w === "s") && (a = e.x + (e.width - n) / 2)) : s > v && (s = v, n = s * c, w.includes("w") && (a = e.x + e.width - n), w.includes("n") && (l = e.y + e.height - s), (w === "e" || w === "w") && (l = e.y + (e.height - s) / 2), (w === "n" || w === "s") && (a = e.x + (e.width - n) / 2))), a < p && (n += a - p, s = n / c, a = p), l < x && (s += l - x, n = s * c, l = x), a + n > N && (n = N - a, s = n / c), l + s > I && (s = I - l, n = s * c), n >= f && s >= f && G({ x: a, y: l, width: n, height: s });
+      }
+    }, h = () => {
+      K(!1), Q(!1), U(null);
+    };
+    return (W || D) && (window.addEventListener("mousemove", i), window.addEventListener("mouseup", h), window.addEventListener("touchmove", i), window.addEventListener("touchend", h)), () => {
+      window.removeEventListener("mousemove", i), window.removeEventListener("mouseup", h), window.removeEventListener("touchmove", i), window.removeEventListener("touchend", h);
+    };
+  }, [
+    W,
+    D,
+    w,
+    J,
+    e,
+    o,
+    t.width,
+    t.height,
+    c,
+    f,
+    v
+  ]), q(() => {
+    if (O && H && o.width > 0) {
+      const i = m.width / o.width, h = m.height / o.height;
+      O({
+        x: (t.x - o.x) * i,
+        y: (t.y - o.y) * h,
+        width: t.width * i,
+        height: t.height * h,
+        scale: i
+      });
+    }
+  }, [t, m, o, H, O]);
+  const S = C(() => new Promise((i, h) => {
+    if (!$.current || !j.current) {
+      h(new Error("Image or canvas not ready"));
+      return;
+    }
+    const d = j.current, u = d.getContext("2d");
+    if (!u) {
+      h(new Error("Could not get canvas context"));
+      return;
+    }
+    const b = m.width / o.width, y = m.height / o.height, k = (t.x - o.x) * b, p = (t.y - o.y) * y, x = t.width * b, N = t.height * y;
+    d.width = x, d.height = N, Y === "rounded" && (u.beginPath(), u.arc(
+      x / 2,
+      N / 2,
+      Math.min(x, N) / 2,
+      0,
+      Math.PI * 2
+    ), u.closePath(), u.clip()), u.drawImage(
+      $.current,
+      k,
+      p,
+      x,
+      N,
+      0,
+      0,
+      x,
+      N
+    ), d.toBlob(
+      (I) => {
+        I ? i(I) : h(new Error("Failed to create blob"));
+      },
+      "image/png",
+      1
+    );
+  }), [t, m, o, Y]);
+  q(() => {
+    F && S().then(F).catch(() => {
+    });
+  }, [S, F]);
+  const B = (i) => {
+    const h = {
+      nw: r.handleNW,
+      ne: r.handleNE,
+      sw: r.handleSW,
+      se: r.handleSE
+    };
+    return /* @__PURE__ */ X(
+      "div",
+      {
+        className: `${r.cornerHandle} ${h[i]}`,
+        onMouseDown: A(i),
+        onTouchStart: A(i),
+        children: [
+          /* @__PURE__ */ g("div", { className: r.cornerHandleArm, "data-direction": "horizontal" }),
+          /* @__PURE__ */ g("div", { className: r.cornerHandleArm, "data-direction": "vertical" })
+        ]
+      }
+    );
+  }, P = (i) => {
+    const h = {
+      n: r.handleN,
+      s: r.handleS,
+      e: r.handleE,
+      w: r.handleW
+    };
+    return /* @__PURE__ */ g(
+      "div",
+      {
+        className: `${r.edgeHandle} ${h[i]}`,
+        onMouseDown: A(i),
+        onTouchStart: A(i),
+        children: /* @__PURE__ */ g("div", { className: r.edgeHandleBar })
+      }
+    );
+  };
+  return /* @__PURE__ */ X(se, { className: r.container, ref: ee, children: [
+    /* @__PURE__ */ g("canvas", { ref: j, style: { display: "none" } }),
+    /* @__PURE__ */ g(
+      "img",
+      {
+        ref: $,
+        src: z,
+        alt: "Crop preview",
+        className: r.image,
+        onLoad: ie,
+        draggable: !1
+      }
+    ),
+    H && /* @__PURE__ */ X(T, { children: [
+      Y === "square" ? /* @__PURE__ */ X(T, { children: [
+        /* @__PURE__ */ g(
+          "div",
+          {
+            className: r.overlay,
+            style: {
+              top: 0,
+              left: 0,
+              right: 0,
+              height: t.y
+            }
+          }
+        ),
+        /* @__PURE__ */ g(
+          "div",
+          {
+            className: r.overlay,
+            style: {
+              top: t.y + t.height,
+              left: 0,
+              right: 0,
+              bottom: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ g(
+          "div",
+          {
+            className: r.overlay,
+            style: {
+              top: t.y,
+              left: 0,
+              width: t.x,
+              height: t.height
+            }
+          }
+        ),
+        /* @__PURE__ */ g(
+          "div",
+          {
+            className: r.overlay,
+            style: {
+              top: t.y,
+              left: t.x + t.width,
+              right: 0,
+              height: t.height
+            }
+          }
+        )
+      ] }) : /* @__PURE__ */ g(
+        "div",
+        {
+          className: r.circularOverlay,
+          style: {
+            left: t.x + t.width / 2,
+            top: t.y + t.height / 2,
+            width: t.width - 4,
+            height: t.height - 4
+          }
+        }
+      ),
+      /* @__PURE__ */ X(
+        "div",
+        {
+          className: `${r.cropArea} ${Y === "rounded" ? r.cropAreaRounded : ""}`,
+          style: {
+            left: t.x,
+            top: t.y,
+            width: t.width,
+            height: t.height
+          },
+          onMouseDown: _,
+          onTouchStart: _,
+          children: [
+            Y === "square" ? /* @__PURE__ */ g("div", { className: r.dashedBorder }) : /* @__PURE__ */ X(T, { children: [
+              /* @__PURE__ */ g("div", { className: `${r.edgeLine} ${r.edgeLineTop}` }),
+              /* @__PURE__ */ g(
+                "div",
+                {
+                  className: `${r.edgeLine} ${r.edgeLineBottom}`
+                }
+              ),
+              /* @__PURE__ */ g(
+                "div",
+                {
+                  className: `${r.edgeLine} ${r.edgeLineLeft}`
+                }
+              ),
+              /* @__PURE__ */ g(
+                "div",
+                {
+                  className: `${r.edgeLine} ${r.edgeLineRight}`
+                }
+              )
+            ] }),
+            B("nw"),
+            B("ne"),
+            B("sw"),
+            B("se"),
+            Y === "square" && /* @__PURE__ */ X(T, { children: [
+              P("n"),
+              P("s"),
+              P("e"),
+              P("w")
+            ] })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  ge as ImageCropper
+};

package/dist/components/ImageCropper/ImageCropper.module.css.js

@@ -0,0 +1,51 @@
+const e = "_container_z996o_1", n = "_image_z996o_12", o = "_overlay_z996o_19", _ = "_circularOverlay_z996o_25", d = "_cropArea_z996o_33", a = "_dashedBorder_z996o_39", l = "_edgeLine_z996o_46", r = "_edgeLineTop_z996o_52", c = "_edgeLineBottom_z996o_60", t = "_edgeLineLeft_z996o_68", s = "_edgeLineRight_z996o_76", h = "_cornerHandle_z996o_84", g = "_cornerHandleArm_z996o_92", i = "_handleNW_z996o_107", z = "_handleNE_z996o_123", L = "_handleSW_z996o_139", H = "_handleSE_z996o_156", m = "_edgeHandle_z996o_172", B = "_edgeHandleBar_z996o_181", E = "_handleN_z996o_107", N = "_handleS_z996o_139", S = "_handleE_z996o_213", W = "_handleW_z996o_227", p = {
+  container: e,
+  image: n,
+  overlay: o,
+  circularOverlay: _,
+  cropArea: d,
+  dashedBorder: a,
+  edgeLine: l,
+  edgeLineTop: r,
+  edgeLineBottom: c,
+  edgeLineLeft: t,
+  edgeLineRight: s,
+  cornerHandle: h,
+  cornerHandleArm: g,
+  handleNW: i,
+  handleNE: z,
+  handleSW: L,
+  handleSE: H,
+  edgeHandle: m,
+  edgeHandleBar: B,
+  handleN: E,
+  handleS: N,
+  handleE: S,
+  handleW: W
+};
+export {
+  _ as circularOverlay,
+  e as container,
+  h as cornerHandle,
+  g as cornerHandleArm,
+  d as cropArea,
+  a as dashedBorder,
+  p as default,
+  m as edgeHandle,
+  B as edgeHandleBar,
+  l as edgeLine,
+  c as edgeLineBottom,
+  t as edgeLineLeft,
+  s as edgeLineRight,
+  r as edgeLineTop,
+  S as handleE,
+  E as handleN,
+  z as handleNE,
+  i as handleNW,
+  N as handleS,
+  H as handleSE,
+  L as handleSW,
+  W as handleW,
+  n as image,
+  o as overlay
+};

package/dist/components/ImageCropper/cropUtils.d.ts

@@ -0,0 +1,22 @@
+export interface CropBounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export type CropShape = 'square' | 'rounded';
+export interface CropImageOptions {
+    image: HTMLImageElement;
+    bounds: CropBounds;
+    shape: CropShape;
+    outputWidth?: number;
+    outputHeight?: number;
+    quality?: number;
+    mimeType?: 'image/png' | 'image/jpeg' | 'image/webp';
+}
+export declare const cropImage: ({ image, bounds, shape, outputWidth, outputHeight, quality, mimeType, }: CropImageOptions) => Promise<Blob>;
+export declare const blobToBase64: (blob: Blob) => Promise<string>;
+export declare const scaleCropBounds: (cropBounds: CropBounds, containerWidth: number, containerHeight: number, imageWidth: number, imageHeight: number) => CropBounds;
+export declare const getInitialCropBounds: (containerWidth: number, containerHeight: number, aspectRatio: number, sizePercent?: number) => CropBounds;
+export declare const constrainCropBounds: (bounds: CropBounds, containerWidth: number, containerHeight: number, minSize: number) => CropBounds;
+//# sourceMappingURL=cropUtils.d.ts.map

package/dist/components/ImageCropper/cropUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cropUtils.d.ts","sourceRoot":"","sources":["../../../src/components/ImageCropper/cropUtils.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACzB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE7C,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,gBAAgB,CAAC;IACxB,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,WAAW,GAAG,YAAY,GAAG,YAAY,CAAC;CACtD;AAED,eAAO,MAAM,SAAS,GAAU,yEAQ7B,gBAAgB,KAAG,OAAO,CAAC,IAAI,CAuDjC,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,MAAM,IAAI,KAAG,OAAO,CAAC,MAAM,CAavD,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,YAAY,UAAU,EACtB,gBAAgB,MAAM,EACtB,iBAAiB,MAAM,EACvB,YAAY,MAAM,EAClB,aAAa,MAAM,KAClB,UAUF,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,gBAAgB,MAAM,EACtB,iBAAiB,MAAM,EACvB,aAAa,MAAM,EACnB,oBAAiB,KAChB,UAkBF,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,QAAQ,UAAU,EAClB,gBAAgB,MAAM,EACtB,iBAAiB,MAAM,EACvB,SAAS,MAAM,KACd,UAiBF,CAAC"}

package/dist/components/ImageCropper/cropUtils.js

@@ -0,0 +1,42 @@
+const d = async ({
+  image: h,
+  bounds: t,
+  shape: o,
+  outputWidth: g,
+  outputHeight: l,
+  quality: m = 1,
+  mimeType: s = "image/png"
+}) => new Promise((w, c) => {
+  const a = document.createElement("canvas"), e = a.getContext("2d");
+  if (!e) {
+    c(new Error("Could not get canvas context"));
+    return;
+  }
+  const n = g ?? t.width, i = l ?? t.height;
+  a.width = n, a.height = i, o === "rounded" && (e.beginPath(), e.arc(
+    n / 2,
+    i / 2,
+    Math.min(n, i) / 2,
+    0,
+    Math.PI * 2
+  ), e.closePath(), e.clip()), e.drawImage(
+    h,
+    t.x,
+    t.y,
+    t.width,
+    t.height,
+    0,
+    0,
+    n,
+    i
+  ), a.toBlob(
+    (r) => {
+      r ? w(r) : c(new Error("Failed to create blob"));
+    },
+    s,
+    m
+  );
+});
+export {
+  d as cropImage
+};

package/dist/components/ImageCropper/index.d.ts

@@ -0,0 +1,4 @@
+export { ImageCropper, type ImageCropperProps, type CropData } from './ImageCropper';
+export { useCropInteraction } from './useCropInteraction';
+export { cropImage } from './cropUtils';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ImageCropper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ImageCropper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACrF,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/ImageCropper/useCropInteraction.d.ts

@@ -0,0 +1,28 @@
+interface CropBounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+interface ContainerSize {
+    width: number;
+    height: number;
+}
+type ResizeHandle = 'nw' | 'ne' | 'sw' | 'se' | null;
+interface UseCropInteractionOptions {
+    initialCrop: CropBounds;
+    containerSize: ContainerSize;
+    aspectRatio: number;
+    minSize: number;
+    onCropChange: (crop: CropBounds) => void;
+}
+interface UseCropInteractionReturn {
+    isDragging: boolean;
+    isResizing: boolean;
+    activeHandle: ResizeHandle;
+    handleCropMouseDown: (e: React.MouseEvent | React.TouchEvent) => void;
+    handleResizeMouseDown: (handle: Exclude<ResizeHandle, null>) => (e: React.MouseEvent | React.TouchEvent) => void;
+}
+export declare const useCropInteraction: ({ initialCrop, containerSize, aspectRatio, minSize, onCropChange, }: UseCropInteractionOptions) => UseCropInteractionReturn;
+export {};
+//# sourceMappingURL=useCropInteraction.d.ts.map

package/dist/components/ImageCropper/useCropInteraction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCropInteraction.d.ts","sourceRoot":"","sources":["../../../src/components/ImageCropper/useCropInteraction.ts"],"names":[],"mappings":"AAOA,UAAU,UAAU;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErD,UAAU,yBAAyB;IACjC,WAAW,EAAE,UAAU,CAAC;IACxB,aAAa,EAAE,aAAa,CAAC;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;CAC1C;AAED,UAAU,wBAAwB;IAChC,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,YAAY,CAAC;IAC3B,mBAAmB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACtE,qBAAqB,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAClH;AAED,eAAO,MAAM,kBAAkB,GAAI,qEAMhC,yBAAyB,KAAG,wBAwJ9B,CAAC"}

package/dist/components/ImageCropper/useCropInteraction.js

@@ -0,0 +1,76 @@
+import { useState as g, useCallback as D, useEffect as P } from "react";
+const W = ({
+  initialCrop: u,
+  containerSize: l,
+  aspectRatio: d,
+  minSize: w,
+  onCropChange: x
+}) => {
+  const [r, Y] = g(!1), [a, M] = g(!1), [f, y] = g(null), [m, E] = g({ x: 0, y: 0 }), [t, L] = g(u), b = D(
+    (n) => {
+      n.preventDefault(), n.stopPropagation();
+      const s = "touches" in n ? n.touches[0].clientX : n.clientX, i = "touches" in n ? n.touches[0].clientY : n.clientY;
+      Y(!0), E({ x: s, y: i }), L(u);
+    },
+    [u]
+  ), k = D(
+    (n) => (s) => {
+      s.preventDefault(), s.stopPropagation();
+      const i = "touches" in s ? s.touches[0].clientX : s.clientX, X = "touches" in s ? s.touches[0].clientY : s.clientY;
+      M(!0), y(n), E({ x: i, y: X }), L(u);
+    },
+    [u]
+  );
+  return P(() => {
+    const n = (i) => {
+      if (!r && !a) return;
+      const X = "touches" in i ? i.touches[0].clientX : i.clientX, H = "touches" in i ? i.touches[0].clientY : i.clientY, v = X - m.x, I = H - m.y;
+      if (r) {
+        let o = t.x + v, c = t.y + I;
+        o = Math.max(0, Math.min(o, l.width - t.width)), c = Math.max(0, Math.min(c, l.height - t.height)), x({ ...t, x: o, y: c });
+      }
+      if (a && f) {
+        let o = t.x, c = t.y, e = t.width, h = t.height;
+        switch (f) {
+          case "se":
+            e = Math.max(w, t.width + v), h = e / d;
+            break;
+          case "sw":
+            e = Math.max(w, t.width - v), h = e / d, o = t.x + t.width - e;
+            break;
+          case "ne":
+            e = Math.max(w, t.width + v), h = e / d, c = t.y + t.height - h;
+            break;
+          case "nw":
+            e = Math.max(w, t.width - v), h = e / d, o = t.x + t.width - e, c = t.y + t.height - h;
+            break;
+        }
+        o < 0 && (e += o, h = e / d, o = 0), c < 0 && (h += c, e = h * d, c = 0), o + e > l.width && (e = l.width - o, h = e / d), c + h > l.height && (h = l.height - c, e = h * d), e >= w && h >= w && x({ x: o, y: c, width: e, height: h });
+      }
+    }, s = () => {
+      Y(!1), M(!1), y(null);
+    };
+    return (r || a) && (window.addEventListener("mousemove", n), window.addEventListener("mouseup", s), window.addEventListener("touchmove", n), window.addEventListener("touchend", s)), () => {
+      window.removeEventListener("mousemove", n), window.removeEventListener("mouseup", s), window.removeEventListener("touchmove", n), window.removeEventListener("touchend", s);
+    };
+  }, [
+    r,
+    a,
+    f,
+    m,
+    t,
+    l,
+    d,
+    w,
+    x
+  ]), {
+    isDragging: r,
+    isResizing: a,
+    activeHandle: f,
+    handleCropMouseDown: b,
+    handleResizeMouseDown: k
+  };
+};
+export {
+  W as useCropInteraction
+};

package/dist/components/IntegrationFlowAnimation/IntegrationFlowAnimation.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+export interface IntegrationFlowAnimationProps {
+    /** Icon component to display on the left (source) */
+    leftIcon: ReactNode;
+    /** Icon component to display on the right (destination) */
+    rightIcon: ReactNode;
+    /** Height of the component */
+    height?: number | string;
+    /** Number of particles to animate */
+    particleCount?: number;
+    /** Custom colors for particles (defaults to blue, green, yellow-orange distribution) */
+    colors?: string[];
+    /** Background image URL */
+    backgroundImage?: string;
+}
+/**
+ * A reusable animation component showing data flow between two integration icons.
+ * Displays animated particles flowing from left icon to right icon.
+ */
+export declare const IntegrationFlowAnimation: ({ leftIcon, rightIcon, height, particleCount, colors, backgroundImage, }: IntegrationFlowAnimationProps) => ReactNode;
+//# sourceMappingURL=IntegrationFlowAnimation.d.ts.map

package/dist/components/IntegrationFlowAnimation/IntegrationFlowAnimation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntegrationFlowAnimation.d.ts","sourceRoot":"","sources":["../../../src/components/IntegrationFlowAnimation/IntegrationFlowAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAiD1D,MAAM,WAAW,6BAA6B;IAC5C,qDAAqD;IACrD,QAAQ,EAAE,SAAS,CAAC;IACpB,2DAA2D;IAC3D,SAAS,EAAE,SAAS,CAAC;IACrB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,qCAAqC;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,wFAAwF;IACxF,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,2BAA2B;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;GAGG;AACH,eAAO,MAAM,wBAAwB,GAAI,0EAOtC,6BAA6B,KAAG,SAqElC,CAAC"}