@enigmax/primitives 0.25.0 → 0.26.0

package/dist/chunk-ISXB5RUH.js

@@ -0,0 +1,380 @@
+import { IDENTITY, prefersReducedMotion, ZOOM_LIMITS, flightFrom, nextIndex, fittedSize, clampPan, zoomAt, pinchDistance, flightMs, ZOOM_STEP, ZOOM_DOUBLE, wheelFactor } from './chunk-QIIV2QSV.js';
+import { injectImageStyles } from './chunk-EYZ366LP.js';
+import { createPortal } from 'react-dom';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { lazy, useLayoutEffect, useRef, useState, useMemo, useCallback, useEffect, Suspense } from 'react';
+
+function Glyph({ children }) {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.125em", height: "1.125em", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children });
+}
+function Close() {
+  return /* @__PURE__ */ jsx(Glyph, { children: /* @__PURE__ */ jsx("path", { d: "M6 6 18 18M18 6 6 18" }) });
+}
+function Plus() {
+  return /* @__PURE__ */ jsx(Glyph, { children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14" }) });
+}
+function Minus() {
+  return /* @__PURE__ */ jsx(Glyph, { children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" }) });
+}
+function ChevronLeft() {
+  return /* @__PURE__ */ jsx(Glyph, { children: /* @__PURE__ */ jsx("path", { d: "m15 5-7 7 7 7" }) });
+}
+function ChevronRight() {
+  return /* @__PURE__ */ jsx(Glyph, { children: /* @__PURE__ */ jsx("path", { d: "m9 5 7 7-7 7" }) });
+}
+function Trash() {
+  return /* @__PURE__ */ jsx(Glyph, { children: /* @__PURE__ */ jsx("path", { d: "M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13" }) });
+}
+function Dots() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "1.125em", height: "1.125em", fill: "currentColor", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "5", r: "1.75" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1.75" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "19", r: "1.75" })
+  ] });
+}
+function Download() {
+  return /* @__PURE__ */ jsx(Glyph, { children: /* @__PURE__ */ jsx("path", { d: "M12 3v12M7 11l5 5 5-5M4 20h16" }) });
+}
+var ImageMenu = lazy(() => import('./menu-MSQSE6U5.js').then((module) => ({ default: module.ImageMenu })));
+function ImageViewer({
+  items,
+  index,
+  onIndex,
+  onClose,
+  zoom,
+  navigation,
+  thumbnails,
+  menu,
+  discardable,
+  onDiscard,
+  loop,
+  caption,
+  origin,
+  animate,
+  styles,
+  labels
+}) {
+  useLayoutEffect(() => {
+    if (styles) injectImageStyles();
+  }, [styles]);
+  const frameRef = useRef(null);
+  const stripRef = useRef(null);
+  const imageRef = useRef(null);
+  const [transform, setTransform] = useState(IDENTITY);
+  const [loading, setLoading] = useState(true);
+  const [panning, setPanning] = useState(false);
+  const [phase, setPhase] = useState(() => animate && origin && !prefersReducedMotion() ? "measuring" : "open");
+  const [flight, setFlight] = useState(null);
+  const [discarded, setDiscarded] = useState(() => /* @__PURE__ */ new Set());
+  const limits = useMemo(() => ({ min: zoom?.min ?? ZOOM_LIMITS.min, max: zoom?.max ?? ZOOM_LIMITS.max }), [zoom]);
+  const item = items[index];
+  const zoomed = transform.scale > limits.min;
+  const remaining = items.length - discarded.size;
+  const position = useMemo(() => {
+    let seen = 0;
+    for (let at = 0; at <= index && at < items.length; at += 1) if (!discarded.has(at)) seen += 1;
+    return seen;
+  }, [index, items.length, discarded]);
+  const layoutBox = useCallback(() => {
+    const frame = frameRef.current;
+    const element = imageRef.current;
+    if (!frame || !element?.offsetWidth) return null;
+    const box = frame.getBoundingClientRect();
+    return { left: box.left + element.offsetLeft, top: box.top + element.offsetTop, width: element.offsetWidth, height: element.offsetHeight };
+  }, []);
+  const requestClose = useCallback(() => {
+    if (phase === "closing" || phase === "measuring") return onClose();
+    const from = origin?.();
+    const to = layoutBox();
+    const back = animate && !prefersReducedMotion() && from && to ? flightFrom(from, to) : null;
+    if (!back) return onClose();
+    setPhase("closing");
+    setFlight(back);
+  }, [phase, origin, layoutBox, animate, onClose]);
+  const go = useCallback((step) => {
+    const next = nextIndex(index, items.length, step, { loop, skip: discarded });
+    if (next === -1 || next === index) return;
+    onIndex(next);
+  }, [index, items.length, loop, discarded, onIndex]);
+  const showAt = useCallback((next) => {
+    if (next === index || discarded.has(next)) return;
+    onIndex(next);
+  }, [index, discarded, onIndex]);
+  const discard = useCallback(() => {
+    if (!discardable || !item) return;
+    const next = nextIndex(index, items.length, 1, { loop: true, skip: /* @__PURE__ */ new Set([...discarded, index]) });
+    setDiscarded((current) => new Set(current).add(index));
+    onDiscard?.(item, index);
+    if (next === -1) requestClose();
+    else onIndex(next);
+  }, [discardable, item, index, items.length, discarded, onDiscard, onIndex, requestClose]);
+  const reset = useCallback(() => setTransform(IDENTITY), []);
+  useEffect(() => {
+    setTransform(IDENTITY);
+    setLoading(true);
+  }, [item?.src]);
+  const frameBox = useCallback(() => {
+    const box = frameRef.current?.getBoundingClientRect();
+    return box ? { left: box.left, top: box.top, width: box.width, height: box.height } : null;
+  }, []);
+  const bounded = useCallback((next) => {
+    const box = frameBox();
+    const element = imageRef.current;
+    if (!box || !element) return next;
+    const fitted = fittedSize({ width: element.naturalWidth, height: element.naturalHeight }, box);
+    return clampPan(next, box, fitted);
+  }, [frameBox]);
+  const zoomBy = useCallback((factor, point) => {
+    const box = frameBox();
+    if (!box) return;
+    const at = point ?? { x: box.left + box.width / 2, y: box.top + box.height / 2 };
+    setTransform((current) => bounded(zoomAt(current, factor, at, box, limits)));
+  }, [frameBox, bounded, limits]);
+  useEffect(() => {
+    const element = frameRef.current;
+    if (!element || !zoom?.wheel) return;
+    const onWheel = (event) => {
+      event.preventDefault();
+      zoomBy(wheelFactor(event.deltaY, event.deltaMode), { x: event.clientX, y: event.clientY });
+    };
+    element.addEventListener("wheel", onWheel, { passive: false });
+    return () => element.removeEventListener("wheel", onWheel);
+  }, [zoom?.wheel, zoomBy]);
+  const pointers = useRef(/* @__PURE__ */ new Map());
+  const pinch = useRef(null);
+  const backdropPress = useRef(null);
+  const onPointerDown = useCallback((event) => {
+    if (event.button !== 0 && event.pointerType === "mouse") return;
+    const element = event.currentTarget;
+    backdropPress.current = event.target === element && !zoomed ? { x: event.clientX, y: event.clientY } : null;
+    pointers.current.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    if (pointers.current.size === 2) {
+      const [a, b] = [...pointers.current.values()];
+      pinch.current = { distance: pinchDistance(a, b), scale: transform.scale };
+      setPanning(false);
+      return;
+    }
+    if (!zoomed) return;
+    event.preventDefault();
+    setPanning(true);
+    try {
+      element.setPointerCapture(event.pointerId);
+    } catch {
+    }
+  }, [zoomed, transform.scale]);
+  const onPointerMove = useCallback((event) => {
+    const previous = pointers.current.get(event.pointerId);
+    if (!previous) return;
+    pointers.current.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    if (pointers.current.size === 2 && pinch.current) {
+      const [a, b] = [...pointers.current.values()];
+      const distance = pinchDistance(a, b);
+      if (!pinch.current.distance) return;
+      const box = frameBox();
+      if (!box) return;
+      const factor = distance / pinch.current.distance * (pinch.current.scale / transform.scale);
+      setTransform((current) => bounded(zoomAt(current, factor, { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }, box, limits)));
+      return;
+    }
+    if (!panning) return;
+    setTransform((current) => bounded({ ...current, x: current.x + (event.clientX - previous.x), y: current.y + (event.clientY - previous.y) }));
+  }, [panning, bounded, frameBox, limits, transform.scale]);
+  const endPointer = useCallback((event) => {
+    pointers.current.delete(event.pointerId);
+    if (pointers.current.size < 2) pinch.current = null;
+    if (pointers.current.size === 0) setPanning(false);
+    const started = backdropPress.current;
+    backdropPress.current = null;
+    if (!started || event.target !== event.currentTarget) return;
+    if (Math.abs(event.clientX - started.x) < 4 && Math.abs(event.clientY - started.y) < 4) requestClose();
+  }, [requestClose]);
+  useLayoutEffect(() => {
+    if (phase !== "measuring") return;
+    const element = imageRef.current;
+    const from = origin?.();
+    if (!element || !from) {
+      setPhase("open");
+      return;
+    }
+    if (!element.complete) return;
+    const to = layoutBox();
+    const start = to ? flightFrom(from, to) : null;
+    if (!start) {
+      setPhase("open");
+      return;
+    }
+    setFlight(start);
+    let second = 0;
+    const first = requestAnimationFrame(() => {
+      second = requestAnimationFrame(() => {
+        setFlight(null);
+        setPhase("flying");
+      });
+    });
+    return () => {
+      cancelAnimationFrame(first);
+      cancelAnimationFrame(second);
+    };
+  }, [phase, origin, layoutBox, loading]);
+  useEffect(() => {
+    if (phase !== "flying" && phase !== "closing") return;
+    const element = imageRef.current;
+    const done = (event) => {
+      if (event && event.propertyName !== "transform") return;
+      if (phase === "closing") onClose();
+      else setPhase("open");
+    };
+    element?.addEventListener("transitionend", done);
+    const timer = window.setTimeout(() => done(), flightMs(element) + 80);
+    return () => {
+      element?.removeEventListener("transitionend", done);
+      window.clearTimeout(timer);
+    };
+  }, [phase, onClose]);
+  useEffect(() => {
+    const onKeyDown = (event) => {
+      if (event.defaultPrevented) return;
+      const key = event.key;
+      if (key === "Escape") return void (event.preventDefault(), requestClose());
+      if (navigation && (key === "ArrowRight" || key === "ArrowLeft") && !zoomed) {
+        event.preventDefault();
+        return go(key === "ArrowRight" ? 1 : -1);
+      }
+      if (zoom && (key === "+" || key === "=")) return void (event.preventDefault(), zoomBy(ZOOM_STEP));
+      if (zoom && key === "-") return void (event.preventDefault(), zoomBy(1 / ZOOM_STEP));
+      if (zoom && key === "0") return void (event.preventDefault(), reset());
+      if (zoomed && key.startsWith("Arrow")) {
+        event.preventDefault();
+        const step = event.shiftKey ? 120 : 40;
+        const by = key === "ArrowLeft" ? [step, 0] : key === "ArrowRight" ? [-step, 0] : key === "ArrowUp" ? [0, step] : [0, -step];
+        return setTransform((current) => bounded({ ...current, x: current.x + by[0], y: current.y + by[1] }));
+      }
+      if (discardable && (key === "Delete" || key === "Backspace")) return void (event.preventDefault(), discard());
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [requestClose, navigation, zoom, zoomed, go, zoomBy, reset, bounded, discardable, discard]);
+  useEffect(() => {
+    frameRef.current?.focus();
+    const { body } = document;
+    const overflow = body.style.overflow;
+    body.style.overflow = "hidden";
+    return () => {
+      body.style.overflow = overflow;
+    };
+  }, []);
+  useEffect(() => {
+    if (!thumbnails) return;
+    stripRef.current?.querySelector("[aria-current=true]")?.scrollIntoView({ block: "nearest", inline: "center" });
+  }, [thumbnails, index]);
+  if (!item) return null;
+  const drawn = flight ?? transform;
+  const style = { transform: `translate(${drawn.x}px, ${drawn.y}px) scale(${drawn.scale})` };
+  const counter = (labels.counter ?? "{index} of {total}").replace("{index}", String(position)).replace("{total}", String(remaining));
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-enigma-image-viewer": "",
+        "data-state": phase === "measuring" || phase === "flying" ? "opening" : phase,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": labels.viewer ?? "Image viewer",
+        onPointerDown: (event) => {
+          if (event.target === event.currentTarget) requestClose();
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { "data-enigma-image-bar": "", children: [
+            navigation && /* @__PURE__ */ jsx("span", { "data-enigma-image-counter": "", children: counter }),
+            !navigation && /* @__PURE__ */ jsx("span", { "data-enigma-image-counter": "" }),
+            zoom && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("button", { type: "button", "data-enigma-image-button": "", "aria-label": labels.zoomOut ?? "Zoom out", title: labels.zoomOut ?? "Zoom out", disabled: transform.scale <= limits.min, onClick: () => zoomBy(1 / ZOOM_STEP), children: /* @__PURE__ */ jsx(Minus, {}) }),
+              /* @__PURE__ */ jsx("button", { type: "button", "data-enigma-image-button": "", "aria-label": labels.zoomIn ?? "Zoom in", title: labels.zoomIn ?? "Zoom in", disabled: transform.scale >= limits.max, onClick: () => zoomBy(ZOOM_STEP), children: /* @__PURE__ */ jsx(Plus, {}) })
+            ] }),
+            discardable && /* @__PURE__ */ jsx("button", { type: "button", "data-enigma-image-button": "", "aria-label": labels.discard ?? "Discard this image", title: labels.discard ?? "Discard this image", onClick: discard, children: /* @__PURE__ */ jsx(Trash, {}) }),
+            menu && /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(MenuButton, { label: labels.menu ?? "More", onPress: void 0 }), children: /* @__PURE__ */ jsx(ImageMenu, { item, index, options: menu, labels }) }),
+            /* @__PURE__ */ jsx("button", { type: "button", "data-enigma-image-button": "", "aria-label": labels.close ?? "Close", title: labels.close ?? "Close", onClick: requestClose, children: /* @__PURE__ */ jsx(Close, {}) })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: frameRef,
+              "data-enigma-image-frame": "",
+              "data-zoom": zoom ? "" : void 0,
+              "data-flying": phase === "open" ? void 0 : phase === "measuring" ? "pending" : "moving",
+              "data-zoomed": zoomed ? "" : void 0,
+              "data-panning": panning ? "" : void 0,
+              "data-loading": loading ? "" : void 0,
+              tabIndex: -1,
+              onPointerDown,
+              onPointerMove,
+              onPointerUp: endPointer,
+              onPointerCancel: endPointer,
+              onDoubleClick: (event) => {
+                if (!zoom?.doubleClick || phase !== "open") return;
+                if (zoomed) return reset();
+                zoomBy(ZOOM_DOUBLE / transform.scale, { x: event.clientX, y: event.clientY });
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    ref: imageRef,
+                    src: item.src,
+                    alt: item.alt ?? "",
+                    style,
+                    draggable: false,
+                    onLoad: () => setLoading(false),
+                    onError: () => setLoading(false)
+                  },
+                  item.src
+                ),
+                loading && /* @__PURE__ */ jsx("span", { "data-enigma-image-spinner": "", role: "progressbar", "aria-label": labels.viewer ?? "Image viewer" }),
+                navigation && remaining > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("button", { type: "button", "data-enigma-image-button": "", "data-enigma-image-nav": "previous", "aria-label": labels.previous ?? "Previous image", title: labels.previous ?? "Previous image", onClick: () => go(-1), children: /* @__PURE__ */ jsx(ChevronLeft, {}) }),
+                  /* @__PURE__ */ jsx("button", { type: "button", "data-enigma-image-button": "", "data-enigma-image-nav": "next", "aria-label": labels.next ?? "Next image", title: labels.next ?? "Next image", onClick: () => go(1), children: /* @__PURE__ */ jsx(ChevronRight, {}) })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { "data-enigma-image-foot": "", children: [
+            (item.caption ?? caption) && /* @__PURE__ */ jsx("p", { "data-enigma-image-caption": "", children: item.caption ?? caption }),
+            thumbnails && remaining > 1 && /* @__PURE__ */ jsx("div", { ref: stripRef, "data-enigma-image-strip": "", role: "tablist", "aria-label": labels.thumbnails ?? "Images", children: items.map((entry, at) => discarded.has(at) ? null : /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "tab",
+                "data-enigma-image-thumb": "",
+                "aria-current": at === index,
+                "aria-selected": at === index,
+                "aria-label": entry.alt ?? `${at + 1}`,
+                onClick: () => showAt(at),
+                children: /* @__PURE__ */ jsx("img", { src: entry.thumbnail ?? entry.src, alt: "", loading: "lazy", draggable: false })
+              },
+              entry.src
+            )) })
+          ] })
+        ]
+      }
+    ),
+    document.body
+  );
+}
+function MenuButton({ label, onPress, expanded }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "data-enigma-image-button": "",
+      "data-enigma-image-menu": "",
+      "aria-haspopup": "menu",
+      "aria-expanded": expanded ?? false,
+      "aria-label": label,
+      title: label,
+      onClick: onPress,
+      children: /* @__PURE__ */ jsx(Dots, {})
+    }
+  );
+}
+
+export { Download, ImageViewer, MenuButton };