@nulib/clover 0.0.0-stage → 4.0.0-beta.1

package/dist/components/Split/Split.mjs

@@ -0,0 +1,210 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, useEffect, useCallback, useMemo, createContext, useContext } from "react";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { Tip } from "../../ui/Tip.mjs";
+import { readSizes, writeSizes, limitsOf, handleGestures, paneElements, cssLength, toPixels, nextStop } from "./splitting.mjs";
+const SplitContext = createContext(null);
+function assign(ref, node) {
+  if (typeof ref === "function") ref(node);
+  else if (ref) ref.current = node;
+}
+const Split = forwardRef(function Split2({ as: Tag = "div", storageKey, className, style, children, ...rest }, ref) {
+  const element = useRef(null);
+  const specs = useRef({});
+  const [sizes, setSizes] = useState({});
+  useEffect(() => setSizes(readSizes(storageKey)), [storageKey]);
+  const setSize = useCallback(
+    (key, px) => setSizes((current) => {
+      const next = { ...current };
+      if (px === void 0) delete next[key];
+      else next[key] = Math.round(px);
+      writeSizes(storageKey, next);
+      return next;
+    }),
+    [storageKey]
+  );
+  const value = useMemo(
+    () => ({ sizes, setSize, specs, element }),
+    [sizes, setSize]
+  );
+  return /* @__PURE__ */ jsx(SplitContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref: (node) => {
+        element.current = node;
+        assign(ref, node);
+      },
+      className: ["clover-split", className].filter(Boolean).join(" "),
+      style: { display: "flex", ...style },
+      ...rest,
+      children
+    }
+  ) });
+});
+const SplitPane = forwardRef(
+  function SplitPane2({
+    as: Tag = "div",
+    size,
+    min,
+    max,
+    name,
+    className,
+    style,
+    children,
+    ...rest
+  }, ref) {
+    const split = useContext(SplitContext);
+    const self = useRef(null);
+    const [key, setKey] = useState(name ?? "");
+    useEffect(() => {
+      if (name) return setKey(name);
+      const panes = paneElements(split == null ? void 0 : split.element.current);
+      setKey(String(panes.indexOf(self.current)));
+    }, [name, split]);
+    if (split && key) split.specs.current[key] = { min, max, size };
+    const dragged = split && key ? split.sizes[key] : void 0;
+    return /* @__PURE__ */ jsx(
+      Tag,
+      {
+        ref: (node) => {
+          self.current = node;
+          assign(ref, node);
+        },
+        className: ["clover-split-pane", className].filter(Boolean).join(" "),
+        "data-split-key": key || void 0,
+        "data-sized": size !== void 0 ? "" : void 0,
+        style: {
+          /*
+           * Its minimum holds in the layout as well as while dragging: inline, so it
+           * holds without the stylesheet, and 0 without one, so a pane can shrink past
+           * its content. Beside a sized pane, it is the sized pane that gives way.
+           */
+          minWidth: cssLength(min) ?? 0,
+          "--clover-split-size": dragged !== void 0 ? `${dragged}px` : cssLength(size),
+          "--clover-split-max": cssLength(max),
+          ...style
+        },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+const SplitHandle = forwardRef(
+  function SplitHandle2({ className, children, onPointerDown, onClick, onKeyDown, ...rest }, ref) {
+    const split = useContext(SplitContext);
+    const { t, langOf } = useCloverTranslation();
+    const self = useRef(null);
+    const [value, setValue] = useState();
+    const limits = useCallback(() => {
+      const handle = self.current;
+      const container = split == null ? void 0 : split.element.current;
+      if (!handle || !container || !split) return null;
+      return limitsOf(handle, container, split.specs.current);
+    }, [split]);
+    const resize = useCallback(
+      (px) => {
+        const found = limits();
+        if (!found || !split) return;
+        const clamped = Math.min(found.max, Math.max(found.min, px));
+        split.setSize(found.key, clamped);
+        setValue({ now: clamped, min: found.min, max: found.max });
+      },
+      [limits, split]
+    );
+    const update = useCallback(() => {
+      const found = limits();
+      if (found)
+        setValue({
+          now: found.sized.getBoundingClientRect().width,
+          min: found.min,
+          max: found.max
+        });
+    }, [limits]);
+    useEffect(() => {
+      const container = split == null ? void 0 : split.element.current;
+      update();
+      if (!container || typeof ResizeObserver === "undefined") return;
+      let frame = 0;
+      const observer = new ResizeObserver(() => {
+        cancelAnimationFrame(frame);
+        frame = requestAnimationFrame(update);
+      });
+      observer.observe(container);
+      return () => {
+        cancelAnimationFrame(frame);
+        observer.disconnect();
+      };
+    }, [update, split, split == null ? void 0 : split.sizes]);
+    const percent = (px) => {
+      var _a;
+      return Math.round(px / (((_a = split == null ? void 0 : split.element.current) == null ? void 0 : _a.clientWidth) || 1) * 100);
+    };
+    const step = () => {
+      var _a, _b;
+      const found = limits();
+      if (!found || !split) return;
+      const across = ((_a = split.element.current) == null ? void 0 : _a.clientWidth) ?? 0;
+      const own = toPixels((_b = split.specs.current[found.key]) == null ? void 0 : _b.size, across);
+      const next = nextStop(found, own, split.sizes[found.key]);
+      if (!next.own) return resize(next.to);
+      split.setSize(found.key, void 0);
+      setValue({ now: own, min: found.min, max: found.max });
+    };
+    const actions = useRef({ limits, resize, step });
+    actions.current = { limits, resize, step };
+    const [gestures] = useState(
+      () => handleGestures(
+        () => self.current,
+        () => actions.current
+      )
+    );
+    useEffect(() => () => gestures.dispose(), [gestures]);
+    const label = rest["aria-label"] ?? t("splitHandle");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: (node) => {
+          self.current = node;
+          assign(ref, node);
+        },
+        role: "separator",
+        "aria-orientation": "vertical",
+        "aria-label": label,
+        lang: rest["aria-label"] === void 0 ? langOf("splitHandle") : void 0,
+        "aria-valuenow": value ? percent(value.now) : void 0,
+        "aria-valuemin": value ? percent(value.min) : void 0,
+        "aria-valuemax": value ? percent(value.max) : void 0,
+        tabIndex: 0,
+        className: ["clover-split-handle", className].filter(Boolean).join(" "),
+        onPointerDown: (event) => {
+          onPointerDown == null ? void 0 : onPointerDown(event);
+          gestures.down(event);
+        },
+        onPointerMove: (event) => gestures.move(event),
+        onPointerUp: (event) => gestures.up(event),
+        onPointerCancel: (event) => gestures.up(event),
+        onClick: (event) => {
+          onClick == null ? void 0 : onClick(event);
+          gestures.click(event);
+        },
+        onKeyDown: (event) => {
+          onKeyDown == null ? void 0 : onKeyDown(event);
+          gestures.key(event);
+        },
+        ...rest,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(Tip, { label })
+        ]
+      }
+    );
+  }
+);
+export {
+  Split,
+  SplitHandle,
+  SplitPane,
+  toPixels
+};

package/dist/components/Split/splitting.mjs

@@ -0,0 +1,203 @@
+"use client";
+const KEY_STEP_REM = 1;
+const CLICK_SLOP_PX = 4;
+const TAP_SLOP_PX = 8;
+const DOUBLE_CLICK_MS = 500;
+const DOUBLE_CLICK_SLOPS = 4;
+const PRESS_EVENTS = [
+  "pointerdown",
+  "mousedown",
+  "pointerup",
+  "mouseup",
+  "click",
+  "dblclick"
+];
+const rootFontSize = () => typeof document === "undefined" ? 16 : parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+function toPixels(length, across) {
+  if (length === void 0) return void 0;
+  if (typeof length === "number") return length;
+  const value = parseFloat(length);
+  if (Number.isNaN(value)) return void 0;
+  if (length.endsWith("rem")) return value * rootFontSize();
+  if (length.endsWith("%")) return value / 100 * across;
+  return value;
+}
+const cssLength = (length) => typeof length === "number" ? `${length}px` : length;
+const readSizes = (storageKey) => {
+  if (!storageKey || typeof localStorage === "undefined") return {};
+  try {
+    const stored = JSON.parse(localStorage.getItem(storageKey) ?? "{}");
+    return stored && typeof stored === "object" ? stored : {};
+  } catch {
+    return {};
+  }
+};
+const writeSizes = (storageKey, sizes) => {
+  if (!storageKey) return;
+  try {
+    localStorage.setItem(storageKey, JSON.stringify(sizes));
+  } catch {
+  }
+};
+const paneElements = (split) => split ? Array.from(split.children).filter(
+  (node) => node.classList.contains("clover-split-pane")
+) : [];
+function neighbors(handle) {
+  const sibling = (step) => {
+    let node = handle[step];
+    while (node && !node.classList.contains("clover-split-pane")) {
+      node = node[step];
+    }
+    return node;
+  };
+  const before = sibling("previousElementSibling");
+  const after = sibling("nextElementSibling");
+  const sized = (after == null ? void 0 : after.hasAttribute("data-sized")) ? after : (before == null ? void 0 : before.hasAttribute("data-sized")) ? before : null;
+  const other = sized === after ? before : after;
+  return { sized, other };
+}
+function limitsOf(handle, container, specs) {
+  const { sized, other } = neighbors(handle);
+  if (!sized) return null;
+  const across = container.clientWidth;
+  const key = sized.dataset.splitKey ?? "";
+  const spec = specs[key] ?? {};
+  const otherSpec = specs[(other == null ? void 0 : other.dataset.splitKey) ?? ""] ?? {};
+  const min = toPixels(spec.min, across) ?? 0;
+  const shared = sized.getBoundingClientRect().width + ((other == null ? void 0 : other.getBoundingClientRect().width) ?? 0);
+  const room = shared - (toPixels(otherSpec.min, across) ?? 0);
+  const max = Math.max(min, Math.min(toPixels(spec.max, across) ?? room, room));
+  const after = sized.getBoundingClientRect().left >= handle.getBoundingClientRect().left - 1;
+  return { sized, key, min, max, after };
+}
+function nextStop(found, own, given) {
+  const stops = own !== void 0 && own > found.min + 1 && own < found.max - 1 ? [found.min, own, found.max] : [found.min, found.max];
+  const now = given ?? own ?? found.sized.getBoundingClientRect().width;
+  const to = stops.find((stop) => stop > now + 1) ?? stops[0];
+  return { to, own: own !== void 0 && Math.abs(to - own) <= 1 };
+}
+function keyTarget(event, found) {
+  const now = found.sized.getBoundingClientRect().width;
+  const by = KEY_STEP_REM * rootFontSize() * (event.shiftKey ? 4 : 1);
+  const grow = found.after ? "ArrowLeft" : "ArrowRight";
+  const shrink = found.after ? "ArrowRight" : "ArrowLeft";
+  if (event.key === grow) return now + by;
+  if (event.key === shrink) return now - by;
+  if (event.key === "Home") return found.min;
+  if (event.key === "End") return found.max;
+  return void 0;
+}
+function onTip(event) {
+  var _a, _b, _c;
+  const tip = (_b = (_a = event.target) == null ? void 0 : _a.closest) == null ? void 0 : _b.call(_a, ".clover-tip");
+  return Boolean(tip && ((_c = event.currentTarget) == null ? void 0 : _c.contains(tip)));
+}
+function handleGestures(bar, actions) {
+  let press = null;
+  let dragged = false;
+  let clicked = null;
+  let guard = null;
+  const holdOff = (at) => {
+    guard == null ? void 0 : guard();
+    const handle = bar();
+    const win = handle == null ? void 0 : handle.ownerDocument.defaultView;
+    if (!handle || !win) return;
+    const far = (event) => Math.hypot(
+      event.clientX - at.x,
+      event.clientY - at.y
+    ) > at.reach;
+    const stop = () => {
+      PRESS_EVENTS.forEach(
+        (type) => win.removeEventListener(type, swallow, true)
+      );
+      win.removeEventListener("pointermove", away, true);
+      clearTimeout(timer);
+      guard = null;
+    };
+    const swallow = (event) => {
+      if (handle.contains(event.target)) return;
+      if (event.type === "pointerdown" && far(event)) return stop();
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    const away = (event) => far(event) && stop();
+    PRESS_EVENTS.forEach((type) => win.addEventListener(type, swallow, true));
+    win.addEventListener("pointermove", away, true);
+    const timer = setTimeout(stop, DOUBLE_CLICK_MS);
+    guard = stop;
+  };
+  return {
+    down(event) {
+      var _a;
+      dragged = false;
+      clicked = null;
+      if (event.defaultPrevented || event.button !== 0 || onTip(event)) return;
+      const found = actions().limits();
+      if (!found) return;
+      event.preventDefault();
+      press = {
+        found,
+        x: event.clientX,
+        from: found.sized.getBoundingClientRect().width,
+        slop: event.pointerType === "touch" ? TAP_SLOP_PX : CLICK_SLOP_PX,
+        moved: false
+      };
+      const handle = event.currentTarget;
+      handle.dataset.dragging = "";
+      (_a = handle.setPointerCapture) == null ? void 0 : _a.call(handle, event.pointerId);
+    },
+    move(event) {
+      const held = press;
+      if (!held) return;
+      const moved = event.clientX - held.x;
+      if (!held.moved && Math.abs(moved) < held.slop) return;
+      held.moved = true;
+      actions().resize(held.from + (held.found.after ? -moved : moved));
+    },
+    up(event) {
+      const held = press;
+      dragged = (held == null ? void 0 : held.moved) ?? false;
+      clicked = held && !held.moved && event.type === "pointerup" ? {
+        x: event.clientX,
+        y: event.clientY,
+        reach: held.slop * DOUBLE_CLICK_SLOPS
+      } : null;
+      press = null;
+      delete event.currentTarget.dataset.dragging;
+    },
+    click(event) {
+      const drag = dragged;
+      const at = clicked;
+      dragged = false;
+      clicked = null;
+      if (event.defaultPrevented || drag || onTip(event)) return;
+      actions().step();
+      if (at) holdOff(at);
+    },
+    key(event) {
+      if (event.defaultPrevented) return;
+      const found = actions().limits();
+      if (!found) return;
+      const to = keyTarget(event, found);
+      if (to === void 0) return;
+      actions().resize(to);
+      event.preventDefault();
+    },
+    dispose() {
+      guard == null ? void 0 : guard();
+    }
+  };
+}
+export {
+  cssLength,
+  handleGestures,
+  keyTarget,
+  limitsOf,
+  neighbors,
+  nextStop,
+  paneElements,
+  readSizes,
+  rootFontSize,
+  toPixels,
+  writeSizes
+};

package/dist/components/Status/Status.mjs

@@ -0,0 +1,47 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { join } from "../../lib/classnames.mjs";
+import { useStatus } from "../../react/hooks.mjs";
+import { Loading } from "../../ui/Loading.mjs";
+import { visuallyHidden } from "../../ui/visuallyHidden.mjs";
+function Status({
+  className,
+  loading,
+  error: renderError
+}) {
+  const { t, langOf } = useCloverTranslation();
+  const { status, error } = useStatus();
+  const busy = status === "loading";
+  const own = loading !== void 0 && loading !== false;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "p",
+      {
+        className: join("clover-status", className),
+        "data-status": busy ? status : void 0,
+        role: "status",
+        style: busy && loading !== false ? void 0 : visuallyHidden,
+        children: [
+          busy && (own ? loading : loading === void 0 && /* @__PURE__ */ jsx(Loading, {})),
+          busy && !own && /* @__PURE__ */ jsx("span", { style: visuallyHidden, lang: langOf("statusLoading"), children: t("statusLoading") })
+        ]
+      }
+    ),
+    status === "error" && error && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: join("clover-status", className),
+        "data-status": status,
+        role: "alert",
+        children: renderError ? renderError(error) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("p", { lang: langOf("statusError"), children: t("statusError") }),
+          /* @__PURE__ */ jsx("p", { className: "clover-status-detail", lang: "en", children: error.message })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  Status
+};

package/dist/components/Timeline/Connected.mjs

@@ -0,0 +1,25 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { playerSurface } from "./playerSurface.mjs";
+import ConnectedCanvas from "../Canvas/Connected.mjs";
+import { join } from "../../lib/classnames.mjs";
+import { useVisibleCanvases } from "../../react/hooks.mjs";
+function ConnectedTimeline({
+  className,
+  ...props
+}) {
+  const view = useVisibleCanvases();
+  if (!view.some((container) => container.type === "Timeline")) return null;
+  return /* @__PURE__ */ jsx(
+    ConnectedCanvas,
+    {
+      ...props,
+      className: join("clover-timeline", className),
+      navigator: false,
+      surface: playerSurface
+    }
+  );
+}
+export {
+  ConnectedTimeline as default
+};

package/dist/components/Timeline/Timeline.mjs

@@ -0,0 +1,40 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Suspense, lazy } from "react";
+import CanvasView from "../Canvas/CanvasView.mjs";
+import { playerSurface } from "./playerSurface.mjs";
+import { CanvasPending } from "../Body/Pending.mjs";
+import { join } from "../../lib/classnames.mjs";
+import { useOptionalClover } from "../../react/context.mjs";
+const ConnectedTimeline = lazy(() => import("./Connected.mjs"));
+const LoadedCanvas = lazy(() => import("../Canvas/LoadedCanvas.mjs"));
+function Timeline({ timeline, className, ...props }) {
+  const root = useOptionalClover();
+  const classes = join("clover-timeline", className);
+  if (props.iiifContent !== void 0 && timeline === void 0)
+    return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(CanvasPending, {}), children: /* @__PURE__ */ jsx(
+      LoadedCanvas,
+      {
+        ...props,
+        className: classes,
+        of: "Timeline",
+        surface: playerSurface
+      }
+    ) });
+  if (!timeline)
+    return root ? /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(CanvasPending, {}), children: /* @__PURE__ */ jsx(ConnectedTimeline, { ...props, className }) }) : null;
+  return /* @__PURE__ */ jsx(
+    CanvasView,
+    {
+      ...props,
+      className: classes,
+      canvases: [timeline],
+      navigator: false,
+      surface: playerSurface
+    }
+  );
+}
+export {
+  Timeline,
+  Timeline as default
+};

package/dist/components/Timeline/playerSurface.mjs

@@ -0,0 +1,84 @@
+"use client";
+import { isHovering, isDirect, TAP_MS, TAP_SLOP } from "../../lib/pointer.mjs";
+const playerSurface = (host) => {
+  const listeners = /* @__PURE__ */ new Map();
+  const emit = (event) => {
+    var _a;
+    return (_a = listeners.get(event)) == null ? void 0 : _a.forEach((listener) => listener());
+  };
+  let open = false;
+  let dismiss = null;
+  let video = null;
+  let hovers = false;
+  let down = null;
+  const onMove = (event) => {
+    if (isHovering(event)) hovers = true;
+  };
+  const onDown = (event) => {
+    down = event.isPrimary && event.button === 0 && (event.target === host || event.target === video) ? {
+      x: event.clientX,
+      y: event.clientY,
+      t: event.timeStamp,
+      direct: isDirect(event.pointerType, hovers)
+    } : null;
+  };
+  const onUp = (event) => {
+    const pressed = down;
+    down = null;
+    if (!pressed || event.timeStamp - pressed.t >= TAP_MS || Math.hypot(event.clientX - pressed.x, event.clientY - pressed.y) > TAP_SLOP)
+      return;
+    if (!(dismiss == null ? void 0 : dismiss()) && !pressed.direct) emit("tap");
+  };
+  const show = (next) => {
+    if (next === video) return;
+    video == null ? void 0 : video.remove();
+    video = next;
+    if (!video) return;
+    Object.assign(video.style, {
+      position: "absolute",
+      inset: "0",
+      width: "100%",
+      height: "100%",
+      objectFit: "contain"
+    });
+    video.classList.add("clover-canvas-dom-media");
+    host.append(video);
+  };
+  host.addEventListener("pointermove", onMove);
+  host.addEventListener("pointerdown", onDown);
+  host.addEventListener("pointerup", onUp);
+  return {
+    host,
+    get isOpen() {
+      return open;
+    },
+    on(event, listener) {
+      const set = listeners.get(event) ?? /* @__PURE__ */ new Set();
+      listeners.set(event, set.add(listener));
+      return () => set.delete(listener);
+    },
+    async setImages(images, { world } = {}) {
+      var _a, _b;
+      show(((_b = (_a = images.find((image) => image.media)) == null ? void 0 : _a.media) == null ? void 0 : _b.element) ?? null);
+      if (!world && !images.length) return;
+      emit(open ? "change" : "open");
+      open = true;
+    },
+    clear: () => show(null),
+    setDismiss(handler) {
+      dismiss = handler;
+    },
+    setGestures() {
+    },
+    dispose() {
+      show(null);
+      listeners.clear();
+      host.removeEventListener("pointermove", onMove);
+      host.removeEventListener("pointerdown", onDown);
+      host.removeEventListener("pointerup", onUp);
+    }
+  };
+};
+export {
+  playerSurface
+};