@startdownnotez404/ui 1.0.0 → 1.3.5

package/dist/chunk-RXBQ7KXF.mjs

@@ -0,0 +1,652 @@
+import {
+  default as default8
+} from "./chunk-EW4DTFH3.mjs";
+import {
+  ReactDropzone_default
+} from "./chunk-XIMFP6RB.mjs";
+import {
+  IconButton_default
+} from "./chunk-JIU5GVM7.mjs";
+import {
+  default106 as default6,
+  default108 as default7,
+  default69 as default5
+} from "./chunk-ZVFYOXDE.mjs";
+import {
+  default as default4
+} from "./chunk-4RPFRNXG.mjs";
+import {
+  default as default2,
+  default2 as default3,
+  mergeSx
+} from "./chunk-S6EZVRZC.mjs";
+
+// src/components/elemental/Image/src/MuiImageList/MuiImageList.tsx
+import ImageList from "@mui/material/ImageList";
+import ImageListItem from "@mui/material/ImageListItem";
+import { jsx } from "react/jsx-runtime";
+var MuiImageList = ({ imageList, cols = 3, rowHeight = 164, width = "100%", height = "auto" }) => {
+  return /* @__PURE__ */ jsx(ImageList, { sx: { width, height }, cols, rowHeight, children: imageList.map((item) => /* @__PURE__ */ jsx(ImageListItem, { children: /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: `${item.url}?w=${rowHeight * 2}&h=${rowHeight * 2}&fit=crop&auto=format`,
+      alt: item.title ?? "",
+      loading: "lazy",
+      width: rowHeight,
+      height: rowHeight,
+      style: { objectFit: "cover" }
+    }
+  ) }, item.id)) });
+};
+var MuiImageList_default = MuiImageList;
+
+// src/components/elemental/Image/src/Cropper/Cropper.tsx
+import "react-image-crop/dist/ReactCrop.css";
+
+// src/components/elemental/Image/src/Cropper/theme.ts
+var cropperRootSx = {
+  "--image-border-radius": "var(--mui-shape-borderRadius)",
+  "--image-border": "2px solid var(--mui-palette-secondary-main)",
+  // react-image-crop selection theming
+  "--rc-border-color": "var(--mui-palette-border-1)",
+  "--rc-focus-color": "var(--mui-palette-primary-main)",
+  "--rc-drag-handle-bg-colour": "var(--mui-palette-focus-1)",
+  "& .ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection)": {
+    "--animated-dash-light-color": "var(--mui-palette-border-1)",
+    "--animated-dash-dark-color": "var(--mui-palette-grey-300)",
+    backgroundImage: `
+      linear-gradient(to right,var(--animated-dash-light-color) 50%,var(--animated-dash-dark-color) 50%),
+      linear-gradient(to right,var(--animated-dash-light-color) 50%,var(--animated-dash-dark-color) 50%),
+      linear-gradient(to bottom,var(--animated-dash-light-color) 50%,var(--animated-dash-dark-color) 50%),
+      linear-gradient(to bottom,var(--animated-dash-light-color) 50%,var(--animated-dash-dark-color) 50%)`
+  },
+  [`& .ReactCrop__rule-of-thirds-vt:before, 
+    .ReactCrop__rule-of-thirds-vt:after, 
+    .ReactCrop__rule-of-thirds-hz:before, 
+    .ReactCrop__rule-of-thirds-hz:after`]: {
+    background: "#fff6"
+  }
+};
+
+// src/components/elemental/Image/src/Cropper/layout/CropperLayout.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function CropperLayout({
+  left,
+  right,
+  leftFooter,
+  footer
+}) {
+  return /* @__PURE__ */ jsx2(default2, { sx: mergeSx({ display: "flex", flexDirection: "column", gap: 2, height: "100%" }, cropperRootSx), children: /* @__PURE__ */ jsxs(
+    default2,
+    {
+      sx: {
+        // stack children vertically on small screens, switch to two‑column grid at md
+        display: { xs: "table-row-group", md: "grid" },
+        flexDirection: { xs: "column", md: void 0 },
+        gridTemplateColumns: { xs: "1fr", md: "1fr 280px" },
+        gap: 2,
+        alignItems: "start",
+        minHeight: 0,
+        flex: "1 1 auto",
+        overflow: "auto"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(default2, { sx: { display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: 0, height: "100%", alignItems: "center", width: "-webkit-fill-available" }, children: [
+          left,
+          leftFooter
+        ] }),
+        /* @__PURE__ */ jsxs(default2, { sx: { display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: 0, height: "100%" }, children: [
+          right,
+          footer
+        ] })
+      ]
+    }
+  ) });
+}
+
+// src/components/elemental/Image/src/Cropper/sections/CropperSourceSection.tsx
+import ReactCrop from "react-image-crop";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function CropperSourceSection({
+  activeBlobUrl,
+  crop,
+  setCrop,
+  setCompletedCrop,
+  circularCrop,
+  defaultRatio,
+  resizeCropEnabled,
+  rotate,
+  scale,
+  imageRef,
+  onImageLoad
+}) {
+  return /* @__PURE__ */ jsx3(
+    default2,
+    {
+      sx: {
+        minHeight: 0,
+        overflow: "hidden",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        "& .ReactCrop": {
+          borderRadius: "var(--image-border-radius)",
+          border: "var(--image-border)"
+        }
+      },
+      children: !!activeBlobUrl && /* @__PURE__ */ jsx3(
+        ReactCrop,
+        {
+          crop,
+          onChange: (nextCrop) => setCrop(nextCrop),
+          onComplete: (nextCrop) => setCompletedCrop(nextCrop),
+          circularCrop,
+          aspect: defaultRatio,
+          keepSelection: true,
+          ruleOfThirds: true,
+          disabled: !resizeCropEnabled,
+          style: { maxWidth: "100%", maxHeight: 420, overflow: "hidden" },
+          children: /* @__PURE__ */ jsx3(
+            "img",
+            {
+              ref: imageRef,
+              alt: "Crop source",
+              src: activeBlobUrl,
+              style: {
+                display: "block",
+                width: "100%",
+                maxWidth: "100%",
+                maxHeight: 420,
+                objectFit: "contain",
+                transform: `rotate(${rotate}deg) scale(${scale})`,
+                transformOrigin: "center center"
+              },
+              onLoad: onImageLoad
+            }
+          )
+        }
+      )
+    }
+  );
+}
+
+// src/components/elemental/Image/src/Cropper/sections/CropperControlsSection.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var scaleMarks = [
+  { value: 0.5, label: "0.5x" },
+  { value: 1, label: "1x" },
+  { value: 1.5, label: "1.5x" },
+  { value: 2, label: "2x" },
+  { value: 2.5, label: "2.5x" },
+  { value: 3, label: "3x" }
+];
+var rotationMarks = [
+  { value: -180, label: "-180\xB0" },
+  { value: -90, label: "-90\xB0" },
+  { value: 0, label: "0\xB0" },
+  { value: 90, label: "90\xB0" },
+  { value: 180, label: "180\xB0" }
+];
+function CropperControlsSection({
+  PreviewRenderer,
+  canvasRef,
+  rotate,
+  setRotate,
+  scale,
+  setScale
+}) {
+  return /* @__PURE__ */ jsxs2(default3, { spacing: 2, sx: { minWidth: 0, px: 2 }, children: [
+    /* @__PURE__ */ jsx4(default2, { display: "flex", justifyContent: "center", children: PreviewRenderer ? /* @__PURE__ */ jsx4(PreviewRenderer, { ref: canvasRef }) : /* @__PURE__ */ jsx4(
+      "canvas",
+      {
+        ref: canvasRef,
+        style: {
+          width: "100%",
+          maxWidth: 260,
+          border: "var(--image-border)",
+          borderRadius: "var(--image-border-radius)"
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs2(default2, { children: [
+      /* @__PURE__ */ jsxs2(default4, { variant: "body2", sx: { mb: 1 }, children: [
+        "Rotation (",
+        rotate,
+        "\xB0)"
+      ] }),
+      /* @__PURE__ */ jsx4(
+        default8,
+        {
+          min: -180,
+          max: 180,
+          step: 1,
+          marks: rotationMarks,
+          value: rotate,
+          onChange: (_, value) => setRotate(Array.isArray(value) ? value[0] : value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2(default2, { children: [
+      /* @__PURE__ */ jsxs2(default4, { variant: "body2", sx: { mb: 1 }, children: [
+        "Resize scale (",
+        scale.toFixed(2),
+        "x)"
+      ] }),
+      /* @__PURE__ */ jsx4(
+        default8,
+        {
+          min: 0.5,
+          max: 3,
+          step: 0.05,
+          marks: scaleMarks,
+          value: scale,
+          onChange: (_, value) => setScale(Array.isArray(value) ? value[0] : value)
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/elemental/Image/src/Cropper/sections/CropperActionSection.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function CropperActionSection({
+  onSave,
+  onResetTransforms,
+  onClear,
+  saveDisabled
+}) {
+  return /* @__PURE__ */ jsx5(
+    default2,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        gap: 1,
+        flexWrap: "wrap"
+      },
+      children: /* @__PURE__ */ jsxs3(default2, { sx: { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsx5(IconButton_default, { onClick: onResetTransforms, title: "Reset Scale & Rotation", children: /* @__PURE__ */ jsx5(default6, { fontSize: "small" }) }),
+        /* @__PURE__ */ jsx5(IconButton_default, { onClick: onClear, color: "error", title: "Remove image", children: /* @__PURE__ */ jsx5(default7, { fontSize: "small" }) }),
+        /* @__PURE__ */ jsx5(IconButton_default, { onClick: onSave, color: "success", disabled: saveDisabled, title: "Save", children: /* @__PURE__ */ jsx5(default5, { fontSize: "small" }) })
+      ] })
+    }
+  );
+}
+
+// src/components/elemental/Image/src/Cropper/sections/CropperFileSelector.tsx
+import React from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function CropperFileSelector({ accept = "image/*", buttonLabel = "Select Image", onPick }) {
+  const [files, setFiles] = React.useState([]);
+  React.useEffect(() => {
+  }, [files]);
+  const lastForwardedRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!files.length) {
+      if (lastForwardedRef.current) {
+        lastForwardedRef.current = null;
+        onPick?.(null);
+      }
+      return;
+    }
+    const pf = files[0];
+    if (!pf.blobUrl) return;
+    if (lastForwardedRef.current === pf.blobUrl) {
+      return;
+    }
+    let cancelled = false;
+    (async () => {
+      try {
+        const res = await fetch(pf.blobUrl);
+        const blob = await res.blob();
+        const file = new File([blob], pf.filename || "file", { type: pf.mimeType || void 0 });
+        if (!cancelled) {
+          lastForwardedRef.current = pf.blobUrl;
+          onPick?.(file);
+        }
+      } catch {
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [files, onPick]);
+  const acceptProp = typeof accept === "string" ? { [accept]: [] } : accept;
+  return /* @__PURE__ */ jsx6(default2, { sx: { display: "flex", alignItems: "center", pt: 0, width: "100%", justifyContent: "center" }, children: /* @__PURE__ */ jsx6(ReactDropzone_default, { filesProps: [files, setFiles], accept: acceptProp, maxFiles: 1, dropzoneType: "button", label: buttonLabel }) });
+}
+
+// src/components/elemental/Image/src/Cropper/hooks/useCropperState.ts
+import React2 from "react";
+import {
+  centerCrop,
+  convertToPixelCrop,
+  makeAspectCrop
+} from "react-image-crop";
+function toRad(degrees) {
+  return degrees * Math.PI / 180;
+}
+function defaultCrop() {
+  return {
+    unit: "%",
+    x: 10,
+    y: 10,
+    width: 80,
+    height: 80
+  };
+}
+function makeCenteredAspectCrop(mediaWidth, mediaHeight, aspect) {
+  return centerCrop(
+    makeAspectCrop(
+      {
+        unit: "%",
+        width: 90
+      },
+      aspect,
+      mediaWidth,
+      mediaHeight
+    ),
+    mediaWidth,
+    mediaHeight
+  );
+}
+function initialCrop(mediaWidth, mediaHeight, defaultRatio, cropConfig) {
+  if (defaultRatio) {
+    return makeCenteredAspectCrop(mediaWidth, mediaHeight, defaultRatio);
+  }
+  return { ...defaultCrop(), ...cropConfig };
+}
+function drawPreviewToCanvas(image, canvas, crop, scale, rotate, circularCrop) {
+  const context = canvas.getContext("2d");
+  if (!context) return;
+  if (!crop.width || !crop.height) return;
+  const scaleX = image.naturalWidth / image.width;
+  const scaleY = image.naturalHeight / image.height;
+  const pixelRatio = window.devicePixelRatio || 1;
+  canvas.width = Math.floor(crop.width * scaleX * pixelRatio);
+  canvas.height = Math.floor(crop.height * scaleY * pixelRatio);
+  context.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+  context.imageSmoothingQuality = "high";
+  context.clearRect(0, 0, canvas.width, canvas.height);
+  const cropX = crop.x * scaleX;
+  const cropY = crop.y * scaleY;
+  const rotateRads = toRad(rotate);
+  const centerX = image.naturalWidth / 2;
+  const centerY = image.naturalHeight / 2;
+  context.save();
+  if (circularCrop) {
+    const width = crop.width * scaleX;
+    const height = crop.height * scaleY;
+    const radius = Math.min(width, height) / 2;
+    context.beginPath();
+    context.arc(width / 2, height / 2, radius, 0, Math.PI * 2);
+    context.closePath();
+    context.clip();
+  }
+  context.translate(-cropX, -cropY);
+  context.translate(centerX, centerY);
+  context.rotate(rotateRads);
+  context.scale(scale, scale);
+  context.translate(-centerX, -centerY);
+  context.drawImage(
+    image,
+    0,
+    0,
+    image.naturalWidth,
+    image.naturalHeight,
+    0,
+    0,
+    image.naturalWidth,
+    image.naturalHeight
+  );
+  context.restore();
+}
+function useCropperState({
+  blobUrl,
+  onSave,
+  setImgNull,
+  circularCrop,
+  defaultRatio,
+  cropConfig
+}) {
+  const imageRef = React2.useRef(null);
+  const canvasRef = React2.useRef(null);
+  const cropConfigRef = React2.useRef(cropConfig);
+  cropConfigRef.current = cropConfig;
+  const scaleRef = React2.useRef(1);
+  const rotateRef = React2.useRef(0);
+  const [activeBlobUrl, setActiveBlobUrl] = React2.useState(blobUrl);
+  const [crop, setCrop] = React2.useState({ ...defaultCrop(), ...cropConfig });
+  const [completedCrop, setCompletedCrop] = React2.useState();
+  const [scale, setScale] = React2.useState(1);
+  const [rotate, setRotate] = React2.useState(0);
+  scaleRef.current = scale;
+  rotateRef.current = rotate;
+  const applyCropFromImage = React2.useCallback((image) => {
+    const { width, height } = image;
+    if (!width || !height) return;
+    const nextCrop = initialCrop(width, height, defaultRatio, cropConfigRef.current);
+    const pixelCrop = convertToPixelCrop(nextCrop, width, height);
+    if (!pixelCrop.width || !pixelCrop.height) return;
+    setCrop(nextCrop);
+    setCompletedCrop(pixelCrop);
+    const canvas = canvasRef.current;
+    if (canvas) {
+      drawPreviewToCanvas(
+        image,
+        canvas,
+        pixelCrop,
+        scaleRef.current,
+        rotateRef.current,
+        circularCrop
+      );
+    }
+  }, [circularCrop, defaultRatio]);
+  React2.useEffect(() => {
+    setActiveBlobUrl(blobUrl);
+  }, [blobUrl]);
+  React2.useLayoutEffect(() => {
+    if (!activeBlobUrl) {
+      setCrop({ ...defaultCrop(), ...cropConfigRef.current });
+      setCompletedCrop(void 0);
+      setScale(1);
+      setRotate(0);
+      return;
+    }
+    setScale(1);
+    setRotate(0);
+    const tryApply = () => {
+      const image = imageRef.current;
+      if (image?.complete && image.width > 0 && image.height > 0) {
+        applyCropFromImage(image);
+        return true;
+      }
+      return false;
+    };
+    if (tryApply()) return;
+    const frame = requestAnimationFrame(() => {
+      tryApply();
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [activeBlobUrl, applyCropFromImage]);
+  React2.useEffect(() => {
+    if (!completedCrop || !imageRef.current || !canvasRef.current) return;
+    drawPreviewToCanvas(
+      imageRef.current,
+      canvasRef.current,
+      completedCrop,
+      scale,
+      rotate,
+      circularCrop
+    );
+  }, [completedCrop, scale, rotate, circularCrop]);
+  const onImageLoad = (e) => {
+    applyCropFromImage(e.currentTarget);
+  };
+  const handleCompletedCrop = (nextCrop) => {
+    if (!nextCrop.width || !nextCrop.height) return;
+    setCompletedCrop(nextCrop);
+  };
+  const handleSave = async () => {
+    if (!completedCrop || !imageRef.current) return;
+    const previewCanvas = document.createElement("canvas");
+    drawPreviewToCanvas(
+      imageRef.current,
+      previewCanvas,
+      completedCrop,
+      scale,
+      rotate,
+      circularCrop
+    );
+    const blob = await new Promise((resolve) => {
+      previewCanvas.toBlob((nextBlob) => resolve(nextBlob), "image/png");
+    });
+    if (!blob) return;
+    const resultUrl = URL.createObjectURL(blob);
+    await onSave(resultUrl);
+  };
+  const handleClear = () => {
+    setActiveBlobUrl("");
+    setImgNull();
+    imageRef.current = null;
+    const canvas = canvasRef.current;
+    if (canvas) {
+      const context = canvas.getContext("2d");
+      if (context) {
+        context.clearRect(0, 0, canvas.width, canvas.height);
+      }
+    }
+    setCrop({ ...defaultCrop(), ...cropConfigRef.current });
+    setScale(1);
+    setRotate(0);
+    setCompletedCrop(void 0);
+  };
+  const handleResetTransforms = () => {
+    setScale(1);
+    setRotate(0);
+  };
+  return {
+    imageRef,
+    canvasRef,
+    activeBlobUrl,
+    crop,
+    setCrop,
+    completedCrop,
+    setCompletedCrop: handleCompletedCrop,
+    scale,
+    setScale,
+    rotate,
+    setRotate,
+    onImageLoad,
+    handleSave,
+    handleClear,
+    handleResetTransforms
+  };
+}
+
+// src/components/elemental/Image/src/Cropper/Cropper.tsx
+import { Fragment, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var Cropper = ({
+  blobUrl,
+  onSave,
+  setImgNull,
+  onClear,
+  // optional parent callback when the image is removed
+  circularCrop = false,
+  defaultRatio,
+  resizeCropEnabled = true,
+  cropConfig,
+  PreviewRenderer,
+  footerExtra,
+  showFileSelector = false,
+  fileSelectorAccept = "image/*",
+  fileSelectorButtonLabel = "Select Image",
+  onFileSelect
+}) => {
+  const {
+    imageRef,
+    canvasRef,
+    activeBlobUrl,
+    crop,
+    setCrop,
+    completedCrop,
+    setCompletedCrop,
+    scale,
+    setScale,
+    rotate,
+    setRotate,
+    onImageLoad,
+    handleSave,
+    handleClear,
+    handleResetTransforms
+  } = useCropperState({
+    blobUrl,
+    onSave,
+    setImgNull,
+    circularCrop,
+    defaultRatio,
+    cropConfig
+  });
+  return /* @__PURE__ */ jsx7(
+    CropperLayout,
+    {
+      left: /* @__PURE__ */ jsx7(
+        CropperSourceSection,
+        {
+          activeBlobUrl,
+          crop,
+          setCrop,
+          setCompletedCrop,
+          circularCrop,
+          defaultRatio,
+          resizeCropEnabled,
+          rotate,
+          scale,
+          imageRef,
+          onImageLoad
+        }
+      ),
+      right: /* @__PURE__ */ jsx7(
+        CropperControlsSection,
+        {
+          PreviewRenderer,
+          canvasRef,
+          rotate,
+          setRotate,
+          scale,
+          setScale
+        }
+      ),
+      leftFooter: /* @__PURE__ */ jsxs4(Fragment, { children: [
+        footerExtra,
+        showFileSelector && /* @__PURE__ */ jsx7(
+          CropperFileSelector,
+          {
+            accept: fileSelectorAccept,
+            buttonLabel: fileSelectorButtonLabel,
+            onPick: (f) => onFileSelect?.(f)
+          }
+        )
+      ] }),
+      footer: /* @__PURE__ */ jsx7(
+        CropperActionSection,
+        {
+          onSave: handleSave,
+          onResetTransforms: handleResetTransforms,
+          onClear: () => {
+            handleClear();
+            onClear?.();
+          },
+          saveDisabled: !completedCrop || !activeBlobUrl
+        }
+      )
+    }
+  );
+};
+var Cropper_default = Cropper;
+
+export {
+  MuiImageList_default,
+  Cropper_default
+};
+//# sourceMappingURL=chunk-RXBQ7KXF.mjs.map