@enigmax/primitives 0.25.0 → 0.26.0

package/dist/chunk-4SZ5N7BA.js

@@ -0,0 +1,121 @@
+import { injectImageStyles } from './chunk-EYZ366LP.js';
+import { lazy, useLayoutEffect, useState, useMemo, useEffect, useRef, useCallback, Suspense } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/react/image/types.ts
+function toItem(source) {
+  return typeof source === "string" ? { src: source } : source;
+}
+var ImageViewer = lazy(() => import('./viewer-73LSE6RR.js').then((module) => ({ default: module.ImageViewer })));
+var prefetched = false;
+function prefetchViewer() {
+  if (prefetched) return;
+  prefetched = true;
+  void import('./viewer-73LSE6RR.js');
+}
+var ZOOM_DEFAULTS = { min: 1, max: 8, wheel: true, doubleClick: true };
+function Image(props) {
+  const {
+    src,
+    alt,
+    images,
+    index,
+    lightbox = true,
+    zoom = true,
+    animate = true,
+    navigation = false,
+    thumbnails = false,
+    menu = false,
+    discardable = false,
+    onDiscard,
+    loop = true,
+    caption,
+    onOpenChange,
+    onIndexChange,
+    styles = true,
+    labels = {},
+    wrapperProps,
+    ...rest
+  } = props;
+  useLayoutEffect(() => {
+    if (styles) injectImageStyles();
+  }, [styles]);
+  const [open, setOpen] = useState(false);
+  const items = useMemo(() => {
+    const set = (images ?? [src]).map(toItem);
+    return set.some((entry) => entry.src === src) ? set : [{ src, alt }, ...set];
+  }, [images, src, alt]);
+  const initial = useMemo(() => {
+    if (typeof index === "number" && index >= 0 && index < items.length) return index;
+    const found = items.findIndex((entry) => entry.src === src);
+    return found === -1 ? 0 : found;
+  }, [index, items, src]);
+  const [current, setCurrent] = useState(initial);
+  useEffect(() => setCurrent(initial), [initial]);
+  const triggerRef = useRef(null);
+  const thumbnailRef = useRef(null);
+  const shown = useRef(current);
+  shown.current = current;
+  const origin = useCallback(() => shown.current === initial ? thumbnailRef.current?.getBoundingClientRect() ?? null : null, [initial]);
+  const zoomOptions = useMemo(() => {
+    if (zoom === false) return null;
+    const given = zoom === true ? {} : zoom;
+    return { ...ZOOM_DEFAULTS, ...given, doubleClick: given.doubleClick !== false, wheel: given.wheel !== false };
+  }, [zoom]);
+  const menuOptions = useMemo(() => menu === false ? null : menu === true ? {} : menu, [menu]);
+  const show = useCallback(() => {
+    if (!lightbox) return;
+    setOpen(true);
+    onOpenChange?.(true);
+  }, [lightbox, onOpenChange]);
+  const close = useCallback(() => {
+    setOpen(false);
+    onOpenChange?.(false);
+    triggerRef.current?.focus();
+  }, [onOpenChange]);
+  const goTo = useCallback((next) => {
+    setCurrent(next);
+    const item = items[next];
+    if (item) onIndexChange?.(next, item);
+  }, [items, onIndexChange]);
+  const image = /* @__PURE__ */ jsx("img", { ref: thumbnailRef, src, alt, ...rest });
+  return /* @__PURE__ */ jsxs("span", { ...wrapperProps, "data-enigma-image": "", "data-clickable": lightbox ? "" : void 0, children: [
+    lightbox ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        "data-enigma-image-trigger": "",
+        "aria-label": labels.open ? `${labels.open}: ${alt}` : alt,
+        "aria-haspopup": "dialog",
+        onClick: show,
+        onPointerEnter: prefetchViewer,
+        onFocus: prefetchViewer,
+        children: image
+      }
+    ) : image,
+    open && /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+      ImageViewer,
+      {
+        items,
+        index: current,
+        onIndex: goTo,
+        onClose: close,
+        zoom: zoomOptions,
+        navigation,
+        thumbnails,
+        menu: menuOptions,
+        discardable,
+        onDiscard,
+        loop,
+        caption,
+        origin,
+        animate,
+        styles,
+        labels
+      }
+    ) })
+  ] });
+}
+
+export { Image };

package/dist/chunk-EYZ366LP.js

@@ -0,0 +1,189 @@
+// src/react/image/styles.ts
+var IMAGE_STYLES = `
+:root {
+    --enigma-image-backdrop: rgba(0, 0, 0, 0.92);
+    --enigma-image-text: #f5f5f5;
+    --enigma-image-muted: #a3a3a3;
+    --enigma-image-control-bg: rgba(23, 23, 23, 0.72);
+    --enigma-image-control-hover: rgba(64, 64, 64, 0.82);
+    --enigma-image-control-size: 2.25rem;
+    --enigma-image-radius: 0.625rem;
+    --enigma-image-gap: 0.75rem;
+    --enigma-image-thumb-size: 3.5rem;
+    --enigma-image-focus: #f5f5f5;
+    /* Above the page's own chrome, not merely above its content: a header or a sticky sidebar
+       with a z-index of its own would otherwise paint over the dialog covering it. */
+    --enigma-image-z: 9999;
+    /* How long the picture takes to fly out of the page and back into it, and the curve it
+       flies on. They are the numbers core/image-viewer.ts waits for, so a project that
+       changes one here changes it there - see the note above the keyframes. */
+    --enigma-image-flight: 300ms;
+    --enigma-image-flight-ease: cubic-bezier(0.2, 0, 0.2, 1);
+}
+
+/* The thumbnail in the page. Only what the behaviour needs: the pointer says it opens, and
+   the box is the caller's to size. */
+[data-enigma-image] { display: inline-flex; max-width: 100%; }
+[data-enigma-image][data-clickable] { cursor: zoom-in; }
+/* Stated on the picture as well as inherited: a project that restyles the trigger button is
+   one cursor: pointer away from a thumbnail that no longer says it enlarges. */
+[data-enigma-image][data-clickable] img { cursor: zoom-in; }
+[data-enigma-image] img { display: block; max-width: 100%; height: auto; }
+/* A real box, never display:contents: an element without one cannot be focused in Chromium,
+   so a viewer closed with Escape would hand focus to the body instead of back to the picture
+   it was opened from, and the next Tab would start at the top of the page. */
+[data-enigma-image-trigger] {
+    display: inline-flex; max-width: 100%; padding: 0; margin: 0;
+    background: none; border: 0; color: inherit; font: inherit; cursor: inherit;
+}
+[data-enigma-image-trigger]:focus-visible img { outline: 2px solid var(--enigma-image-focus); outline-offset: 3px; }
+
+/* The viewer. Fixed and portalled: a lightbox inside the page's own stacking context is a
+   lightbox some ancestor's overflow or transform will clip. */
+[data-enigma-image-viewer] {
+    position: fixed; inset: 0; z-index: var(--enigma-image-z);
+    display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
+    background: var(--enigma-image-backdrop);
+    color: var(--enigma-image-text);
+}
+
+/* The opening: the backdrop arrives while the picture flies out of the page, and the toolbar
+   and the strip arrive with it rather than being there first over a picture that is still on
+   its way. data-state is only ever "opening" or "closing" while an animation is meant to be
+   running, so a viewer that skipped the flight - reduced motion, animate={false} - matches
+   none of these rules and simply exists. */
+@keyframes enigma-image-in { from { background-color: transparent; } to { background-color: var(--enigma-image-backdrop); } }
+@keyframes enigma-image-chrome { from { opacity: 0; } to { opacity: 1; } }
+[data-enigma-image-viewer][data-state="opening"] { animation: enigma-image-in var(--enigma-image-flight) ease-out; }
+[data-enigma-image-viewer][data-state="opening"] [data-enigma-image-bar],
+[data-enigma-image-viewer][data-state="opening"] [data-enigma-image-foot],
+[data-enigma-image-viewer][data-state="opening"] [data-enigma-image-nav] {
+    animation: enigma-image-chrome var(--enigma-image-flight) ease-out;
+}
+/* On the way out the backdrop drains, and the dialog stops taking presses: it is over the
+   page again, so a click through it would land on whatever is now under the pointer. */
+[data-enigma-image-viewer][data-state="closing"] {
+    background-color: transparent; pointer-events: none;
+    transition: background-color var(--enigma-image-flight) var(--enigma-image-flight-ease);
+}
+[data-enigma-image-viewer][data-state="closing"] [data-enigma-image-bar],
+[data-enigma-image-viewer][data-state="closing"] [data-enigma-image-foot],
+[data-enigma-image-viewer][data-state="closing"] [data-enigma-image-nav] {
+    opacity: 0; transition: opacity calc(var(--enigma-image-flight) / 2) ease-in;
+}
+
+[data-enigma-image-bar] {
+    display: flex; align-items: center; gap: 0.5rem;
+    padding: var(--enigma-image-gap);
+}
+[data-enigma-image-counter] {
+    font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--enigma-image-muted);
+    margin-inline-end: auto;
+}
+
+[data-enigma-image-button] {
+    display: grid; place-items: center; flex: none;
+    width: var(--enigma-image-control-size); height: var(--enigma-image-control-size);
+    padding: 0; color: var(--enigma-image-text);
+    background: var(--enigma-image-control-bg); border: 0; border-radius: 999px;
+    cursor: pointer;
+}
+[data-enigma-image-button]:hover { background: var(--enigma-image-control-hover); }
+[data-enigma-image-button]:focus-visible { outline: 2px solid var(--enigma-image-focus); outline-offset: 2px; }
+[data-enigma-image-button][disabled] { opacity: 0.35; cursor: not-allowed; }
+
+/* The frame the picture is fitted into, and the surface every gesture is measured against. */
+[data-enigma-image-frame] {
+    position: relative; overflow: hidden;
+    display: grid; place-items: center;
+    /* Room for the arrows down each side, so they sit beside the picture rather than on it. */
+    padding: 0 calc(var(--enigma-image-control-size) + var(--enigma-image-gap) * 1.5);
+    /* The drag IS the control once zoomed, so the page must not scroll under it. */
+    touch-action: none;
+    -webkit-user-select: none; user-select: none;
+}
+[data-enigma-image-frame] img {
+    max-width: 100%; max-height: 100%;
+    -webkit-user-drag: none;
+    will-change: transform;
+}
+/* Only while it is MOVING, which is not the same as "during the flight".
+   A transition left on permanently would put 300ms of lag between the wheel and the zoom, and
+   turn every pan into a drag the picture follows late. And one left on during "pending" is
+   worse than useless: putting the picture on the thumbnail is itself a transform change, so it
+   animated there over 300ms - behind a hidden element - and by the time anybody could see it
+   the flight was nearly over. */
+[data-enigma-image-frame][data-flying="moving"] img { transition: transform var(--enigma-image-flight) var(--enigma-image-flight-ease); }
+/* Not drawn until there is somewhere to fly from - see the note on the attribute. The spinner
+   is what stands in for it, the same one a slow picture gets. */
+[data-enigma-image-frame][data-flying="pending"] img { visibility: hidden; }
+@media (prefers-reduced-motion: reduce) {
+    [data-enigma-image-frame][data-flying="moving"] img { transition: none; }
+}
+
+/* The cursor says what a press does, which in a lightbox is three different things. The empty
+   part of the frame IS the backdrop and closes it; the picture at rest takes a double press to
+   enlarge; once it is enlarged the gesture is a drag. */
+[data-enigma-image-frame] { cursor: zoom-out; }
+[data-enigma-image-frame][data-zoom] img { cursor: zoom-in; }
+[data-enigma-image-frame][data-zoomed],
+[data-enigma-image-frame][data-zoomed] img { cursor: grab; }
+[data-enigma-image-frame][data-panning],
+[data-enigma-image-frame][data-panning] img { cursor: grabbing; }
+[data-enigma-image-frame][data-loading] img { opacity: 0.35; }
+
+/* Left and right sit over the picture rather than beside it: the frame is the biggest thing
+   on screen and the arrows have to be reachable without hunting for an edge. */
+[data-enigma-image-nav] {
+    position: absolute; top: 50%; translate: 0 -50%;
+    width: var(--enigma-image-control-size); height: var(--enigma-image-control-size);
+}
+[data-enigma-image-nav="previous"] { left: var(--enigma-image-gap); }
+[data-enigma-image-nav="next"] { right: var(--enigma-image-gap); }
+
+[data-enigma-image-spinner] {
+    position: absolute; width: 1.75rem; height: 1.75rem;
+    border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: var(--enigma-image-text);
+    border-radius: 999px; animation: enigma-image-spin 700ms linear infinite;
+}
+@keyframes enigma-image-spin { to { rotate: 360deg; } }
+@media (prefers-reduced-motion: reduce) {
+    [data-enigma-image-spinner] { animation-duration: 2s; }
+}
+
+[data-enigma-image-foot] { display: grid; gap: 0.5rem; padding: var(--enigma-image-gap); }
+[data-enigma-image-caption] {
+    margin: 0; text-align: center; font-size: 0.8125rem; line-height: 1.5;
+    color: var(--enigma-image-muted);
+}
+
+/* The strip. Scrolls on its own rather than wrapping: a gallery of forty is one row you drag
+   through, not five rows that push the picture off the screen. */
+[data-enigma-image-strip] {
+    display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: thin;
+    justify-content: safe center;
+    padding-bottom: 0.25rem;
+}
+[data-enigma-image-thumb] {
+    flex: none; width: var(--enigma-image-thumb-size); height: var(--enigma-image-thumb-size);
+    padding: 0; overflow: hidden;
+    background: none; border: 0; border-radius: 0.375rem;
+    opacity: 0.55; cursor: pointer;
+}
+[data-enigma-image-thumb] img { width: 100%; height: 100%; object-fit: cover; }
+[data-enigma-image-thumb]:hover { opacity: 0.85; }
+[data-enigma-image-thumb][aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--enigma-image-focus); }
+[data-enigma-image-thumb]:focus-visible { outline: 2px solid var(--enigma-image-focus); outline-offset: 2px; }
+`;
+var injected = false;
+function injectImageStyles() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  if (document.querySelector("[data-enigma-image-styles]")) return;
+  const element = document.createElement("style");
+  element.setAttribute("data-enigma-image-styles", "");
+  element.textContent = IMAGE_STYLES;
+  document.head.prepend(element);
+}
+
+export { injectImageStyles };