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

package/dist/components/Annotations/EntryBodies.mjs

@@ -0,0 +1,52 @@
+"use client";
+import { jsx, Fragment } from "react/jsx-runtime";
+import { localize } from "../../core/value.mjs";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { Markup } from "../../ui/Markup.mjs";
+const hasText = (bodies) => bodies.some((body) => {
+  var _a;
+  return (_a = body.value) == null ? void 0 : _a.trim();
+});
+function EntryBodies({
+  bodies,
+  language,
+  headingLevel
+}) {
+  const { t, langOf } = useCloverTranslation();
+  const altOf = (body) => {
+    if (hasText(bodies)) return { text: "" };
+    const label = localize(body.label, language);
+    return label.text ? label : { text: t("annotationsImage"), lang: langOf("annotationsImage") };
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: bodies.map((body, index) => {
+    if (!body.image)
+      return /* @__PURE__ */ jsx(
+        Markup,
+        {
+          as: "div",
+          markup: { [body.language ?? "none"]: [body.value ?? ""] },
+          format: body.format,
+          headingLevel,
+          language,
+          className: "clover-annotations-text"
+        },
+        index
+      );
+    const alt = altOf(body);
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: body.image,
+        alt: alt.text,
+        lang: alt.text ? alt.lang : void 0,
+        width: 200,
+        loading: "lazy",
+        className: "clover-annotations-image"
+      },
+      index
+    );
+  }) });
+}
+export {
+  EntryBodies
+};

package/dist/components/Annotations/languages.mjs

@@ -0,0 +1,43 @@
+"use client";
+import { localize } from "../../core/value.mjs";
+function entryLanguages(entry) {
+  const tags = entry.bodies.filter((body) => {
+    var _a;
+    return !body.image && ((_a = body.value) == null ? void 0 : _a.trim());
+  }).map((body) => body.language).filter((tag) => Boolean(tag) && tag !== "none");
+  return [...new Set(tags)];
+}
+function languagesOf(entries) {
+  const each = entries.map(entryLanguages);
+  const all = [...new Set(each.flat())];
+  if (all.length < 2) return [];
+  const split = each.some(
+    (tags) => tags.length && all.some((tag) => !tags.includes(tag))
+  );
+  return split ? all : [];
+}
+function startingLanguage(languages, language, picked) {
+  if (picked && languages.includes(picked)) return picked;
+  if (!languages.length) return void 0;
+  const map = Object.fromEntries(languages.map((tag) => [tag, [tag]]));
+  return localize(map, language).lang ?? languages[0];
+}
+function inLanguage(entry, chosen) {
+  if (!chosen) return true;
+  const tags = entryLanguages(entry);
+  return !tags.length || tags.includes(chosen);
+}
+function autonym(tag) {
+  try {
+    return new Intl.DisplayNames([tag], { type: "language" }).of(tag) ?? tag;
+  } catch {
+    return tag;
+  }
+}
+export {
+  autonym,
+  entryLanguages,
+  inLanguage,
+  languagesOf,
+  startingLanguage
+};

package/dist/components/Body/Body.mjs

@@ -0,0 +1,51 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo, Suspense, lazy } from "react";
+import { paintingBodies, pickRenderer } from "./renderers.mjs";
+import ConnectedCanvas from "../Canvas/Connected.mjs";
+import { rendererSurface } from "../Canvas/rendererSurface.mjs";
+import { join } from "../../lib/classnames.mjs";
+import { useClover, useCloverSelector } from "../../react/context.mjs";
+import { useVisibleCanvases } from "../../react/hooks.mjs";
+import { Loading } from "../../ui/Loading.mjs";
+const ConnectedTimeline = lazy(() => import("../Timeline/Connected.mjs"));
+const ConnectedScene = lazy(() => import("../Scene/Connected.mjs"));
+function Body({
+  className,
+  style,
+  renderers,
+  children,
+  ...canvas
+}) {
+  var _a;
+  const root = useClover("Body");
+  const canvases = useVisibleCanvases();
+  const bodies = useMemo(() => paintingBodies(canvases), [canvases]);
+  const renderer = pickRenderer(renderers ?? root.renderers, {
+    canvases,
+    bodies
+  });
+  const Renderer = renderer == null ? void 0 : renderer.component;
+  const kind = ((_a = canvases.find(({ type }) => type === "Scene" || type === "Timeline")) == null ? void 0 : _a.type) ?? "Canvas";
+  const busy = useCloverSelector((state) => state.status === "loading");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-busy": busy,
+      className: join("clover-body", className),
+      "data-renderer": Renderer ? "custom" : kind.toLowerCase(),
+      style: {
+        position: "relative",
+        height: "var(--clover-body-height, 60vh)",
+        ...style
+      },
+      children: [
+        Renderer ? /* @__PURE__ */ jsx(Renderer, { canvases, bodies, children }) : kind === "Scene" ? /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Loading, { overlay: true }), children: /* @__PURE__ */ jsx(ConnectedScene, { ...canvas, children }) }) : kind === "Timeline" ? /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Loading, { overlay: true }), children: /* @__PURE__ */ jsx(ConnectedTimeline, { ...canvas, children }) }) : /* @__PURE__ */ jsx(ConnectedCanvas, { ...canvas, surface: rendererSurface, children }),
+        busy && /* @__PURE__ */ jsx(Loading, { overlay: true })
+      ]
+    }
+  );
+}
+export {
+  Body
+};

package/dist/components/Body/BodyAlert.mjs

@@ -0,0 +1,25 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { join } from "../../lib/classnames.mjs";
+function BodyAlert({
+  error,
+  className
+}) {
+  const { t, langOf } = useCloverTranslation();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: join("clover-status", className),
+      "data-status": "error",
+      role: "alert",
+      children: [
+        /* @__PURE__ */ jsx("p", { lang: langOf("statusError"), children: t("statusError") }),
+        /* @__PURE__ */ jsx("p", { className: "clover-status-detail", lang: "en", children: error.message })
+      ]
+    }
+  );
+}
+export {
+  BodyAlert
+};

package/dist/components/Body/Caption.mjs

@@ -0,0 +1,90 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect, Suspense, lazy } from "react";
+import { Close } from "./glyphs.mjs";
+import Button from "../../ui/Button.mjs";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { localize } from "../../core/value.mjs";
+import { useOneOpen } from "../../ui/useOneOpen.mjs";
+const CaptionDetails = lazy(() => import("./CaptionDetails.mjs"));
+function hasInformation(canvas) {
+  var _a;
+  return Boolean(canvas.summary) || Boolean((_a = canvas.metadata) == null ? void 0 : _a.length);
+}
+const captionLabelId = (id, index) => `${id}-label-${index}`;
+const Caption = ({
+  id,
+  canvases,
+  comments,
+  open,
+  onClose,
+  language
+}) => {
+  const { t, langOf } = useCloverTranslation();
+  const ref = useRef(null);
+  const [opened, setOpened] = useState(open);
+  if (open && !opened) setOpened(true);
+  useOneOpen(open, () => onClose(false));
+  useEffect(() => {
+    var _a;
+    if (open) (_a = ref.current) == null ? void 0 : _a.focus();
+  }, [open]);
+  return /* @__PURE__ */ jsxs(
+    "figcaption",
+    {
+      className: "clover-canvas-caption",
+      "data-open": open,
+      "data-testid": "clover-canvas-caption",
+      id,
+      onKeyDown: (event) => {
+        if (event.key !== "Escape") return;
+        event.preventDefault();
+        event.stopPropagation();
+        onClose(true);
+      },
+      ref,
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: "clover-canvas-caption-close",
+            id: `close-${id}`,
+            label: t("commonClose"),
+            lang: langOf("commonClose"),
+            onClick: () => onClose(true),
+            children: /* @__PURE__ */ jsx(Close, {})
+          }
+        ),
+        canvases.map((canvas, index) => {
+          const label = localize(canvas.label, language);
+          return /* @__PURE__ */ jsxs("section", { className: "clover-canvas-caption-canvas", children: [
+            label.text && /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "clover-canvas-caption-label",
+                id: captionLabelId(id, index),
+                lang: label.lang,
+                children: label.text
+              }
+            ),
+            opened && /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+              CaptionDetails,
+              {
+                summary: canvas.summary,
+                metadata: canvas.metadata,
+                comments: comments == null ? void 0 : comments.get(canvas.id),
+                language
+              }
+            ) })
+          ] }, canvas.id);
+        })
+      ]
+    }
+  );
+};
+export {
+  captionLabelId,
+  Caption as default,
+  hasInformation
+};

package/dist/components/Body/CaptionDetails.mjs

@@ -0,0 +1,50 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { readBodies } from "../../core/annotation-bodies.mjs";
+import { localize } from "../../core/value.mjs";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { Markup, MetadataList } from "../../ui/Markup.mjs";
+import { ReadMore } from "../../ui/ReadMore.mjs";
+import { EntryBodies } from "../Annotations/EntryBodies.mjs";
+const CaptionDetails = ({ summary, metadata, comments, language }) => {
+  const { t, langOf } = useCloverTranslation();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    localize(summary, language).text && /* @__PURE__ */ jsx(ReadMore, { children: /* @__PURE__ */ jsx(
+      Markup,
+      {
+        as: "p",
+        markup: summary,
+        language,
+        className: "clover-summary clover-canvas-caption-summary"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      MetadataList,
+      {
+        metadata,
+        language,
+        className: "clover-metadata clover-canvas-caption-metadata"
+      }
+    ),
+    (comments == null ? void 0 : comments.length) ? /* @__PURE__ */ jsxs("div", { className: "clover-canvas-caption-annotations", children: [
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "clover-canvas-caption-annotations-label",
+          lang: langOf("informationPanelTabsAnnotations"),
+          children: t("informationPanelTabsAnnotations")
+        }
+      ),
+      /* @__PURE__ */ jsx("ul", { children: comments.map((annotation, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        EntryBodies,
+        {
+          bodies: readBodies(annotation),
+          language
+        }
+      ) }, annotation.id ?? index)) })
+    ] }) : null
+  ] });
+};
+export {
+  CaptionDetails as default
+};

package/dist/components/Body/Pending.mjs

@@ -0,0 +1,9 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Loading } from "../../ui/Loading.mjs";
+function CanvasPending({ children }) {
+  return children ? /* @__PURE__ */ jsx("div", { className: "clover-canvas", "data-status": "error", children }) : /* @__PURE__ */ jsx("div", { className: "clover-canvas", "data-status": "loading", "aria-busy": "true", children: /* @__PURE__ */ jsx(Loading, { overlay: true }) });
+}
+export {
+  CanvasPending
+};

package/dist/components/Body/glyphs.mjs

@@ -0,0 +1,66 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+const Comment = () => /* @__PURE__ */ jsx(
+  "path",
+  {
+    fillRule: "evenodd",
+    stroke: "none",
+    d: "M144 72H368A96 96 0 0 1 464 168V296A96 96 0 0 1 368 392H200L104 460L144 392A96 96 0 0 1 48 296V168A96 96 0 0 1 144 72Z M168 184H344A16 16 0 0 1 344 216H168A16 16 0 0 1 168 184Z M168 264H280A16 16 0 0 1 280 296H168A16 16 0 0 1 168 264Z"
+  }
+);
+const Information = () => /* @__PURE__ */ jsx(
+  "path",
+  {
+    stroke: "none",
+    d: "M256 72A48 48 0 1 1 256 168A48 48 0 1 1 256 72Z M192 216H296V384H328V432H184V384H216V264H192Z"
+  }
+);
+const Play = () => /* @__PURE__ */ jsx("path", { strokeLinejoin: "round", strokeWidth: "40", d: "M184 128V384L392 256Z" });
+const Close = () => /* @__PURE__ */ jsx(
+  "path",
+  {
+    strokeLinecap: "round",
+    strokeWidth: "45",
+    d: "M154 154L358 358M358 154L154 358"
+  }
+);
+const OpenViewer = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      stroke: "none",
+      d: "m456.69,421.39l-94.09-94.09c22.65-30.16,34.88-66.86,34.84-104.58,0-96.34-78.38-174.72-174.72-174.72S48,126.38,48,222.72s78.38,174.72,174.72,174.72c37.72.04,74.42-12.19,104.58-34.84l94.09,94.09c10.29,9.2,26.1,8.32,35.3-1.98,8.48-9.49,8.48-23.83,0-33.32Zm-233.97-73.87c-68.89-.08-124.72-55.91-124.8-124.8h0c0-68.93,55.87-124.8,124.8-124.8s124.8,55.87,124.8,124.8-55.87,124.8-124.8,124.8Z"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      stroke: "none",
+      d: "m279.5,197.76h-3.35s-28.47,0-28.47,0v-31.82c-.77-13.79-12.57-24.33-26.36-23.56-12.71.71-22.85,10.86-23.56,23.56v3.35h0v28.47h-31.82c-13.79.77-24.33,12.57-23.56,26.36.71,12.71,10.86,22.85,23.56,23.56h3.35s28.47,0,28.47,0v31.82c.77,13.79,12.57,24.33,26.36,23.56,12.71-.71,22.85-10.86,23.56-23.56v-3.35h0v-28.47h31.82c13.79-.77,24.33-12.57,23.56-26.36-.71-12.71-10.86-22.85-23.56-23.56Z"
+    }
+  )
+] });
+const CloseViewer = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      stroke: "none",
+      d: "m456.69,421.39l-94.09-94.09c22.65-30.16,34.88-66.86,34.84-104.58,0-96.34-78.38-174.72-174.72-174.72S48,126.38,48,222.72s78.38,174.72,174.72,174.72c37.72.04,74.42-12.19,104.58-34.84l94.09,94.09c10.29,9.2,26.1,8.32,35.3-1.98,8.48-9.49,8.48-23.83,0-33.32Zm-233.97-73.87c-68.89-.08-124.72-55.91-124.8-124.8h0c0-68.93,55.87-124.8,124.8-124.8s124.8,55.87,124.8,124.8-55.87,124.8-124.8,124.8Z"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      stroke: "none",
+      d: "M167.26 197.76H278.1a24.96 24.96 0 0 1 0 49.92H167.26a24.96 24.96 0 0 1 0-49.92Z"
+    }
+  )
+] });
+export {
+  Close,
+  CloseViewer,
+  Comment,
+  Information,
+  OpenViewer,
+  Play
+};

package/dist/components/Body/renderers.mjs

@@ -0,0 +1,30 @@
+"use client";
+import { paintedBodies } from "../../core/painted-bodies.mjs";
+function paintingBodies(canvases) {
+  return canvases.flatMap(
+    (canvas) => paintedBodies(canvas).map(({ body }) => body)
+  );
+}
+function pickRenderer(renderers, view) {
+  if (!(renderers == null ? void 0 : renderers.length) || !view.canvases.length) return null;
+  const ids = view.canvases.map((canvas) => canvas.id);
+  const formats = view.bodies.map((body) => body == null ? void 0 : body.format).filter(Boolean);
+  return renderers.find(
+    (renderer) => {
+      var _a, _b, _c;
+      return ((_a = renderer.canvasId) == null ? void 0 : _a.some((id) => ids.includes(id))) || ((_b = renderer.format) == null ? void 0 : _b.some((format) => formats.includes(format))) || Boolean((_c = renderer.match) == null ? void 0 : _c.call(renderer, view));
+    }
+  ) ?? null;
+}
+function sameRenderers(a, b) {
+  if (a === b) return true;
+  if (!a || !b || a.length !== b.length) return false;
+  return a.every(
+    (renderer, index) => renderer.component === b[index].component && renderer.match === b[index].match && JSON.stringify([renderer.canvasId, renderer.format]) === JSON.stringify([b[index].canvasId, b[index].format])
+  );
+}
+export {
+  paintingBodies,
+  pickRenderer,
+  sameRenderers
+};

package/dist/components/Body/useControlsVisibility.mjs

@@ -0,0 +1,204 @@
+"use client";
+import { useState, useEffect } from "react";
+import { isDirect, TAP_MS, isHovering, TAP_SLOP, isInteractive, DOUBLE_TAP_SLOP } from "../../lib/pointer.mjs";
+const DEFAULT_HIDE_DELAY = 2e3;
+const LEAVE_DELAY = 1e3;
+const PRESS_FOCUS_MS = 1e3;
+const FADING_CONTROLS = [
+  ":scope > .clover-canvas-controls > *",
+  ":scope > .clover-canvas-navigator",
+  ":scope > .clover-canvas-media > .clover-canvas-transport > *"
+].join(", ");
+function useControlsVisibility(element, hideDelay = DEFAULT_HIDE_DELAY, picture) {
+  const [visible, setVisible] = useState(false);
+  useEffect(() => {
+    if (!element) return;
+    const page = element.ownerDocument;
+    let timer;
+    let shown = false;
+    let keyboard = false;
+    let focusHeld = false;
+    let penHovers = false;
+    let pressedAt = -Infinity;
+    let held = null;
+    let swallowClick = false;
+    let clickTimer;
+    let press = null;
+    let tap = null;
+    const set = (value) => {
+      shown = value;
+      setVisible(value);
+    };
+    const hide = () => {
+      if (!focusHeld) set(false);
+    };
+    const stop = () => {
+      if (timer) clearTimeout(timer);
+      timer = void 0;
+    };
+    const forgetTap = () => {
+      if (tap) clearTimeout(tap.timer);
+      tap = null;
+    };
+    const direct = (event) => isDirect(event.pointerType, penHovers);
+    const show = (event) => {
+      keyboard = event.type === "keydown";
+      if (keyboard) return;
+      set(true);
+      stop();
+      if (Number.isFinite(hideDelay)) timer = setTimeout(hide, hideDelay);
+    };
+    const linger = () => {
+      set(true);
+      stop();
+      timer = setTimeout(hide, LEAVE_DELAY);
+    };
+    const later = (at) => {
+      forgetTap();
+      tap = {
+        ...at,
+        timer: setTimeout(() => {
+          tap = null;
+          set(at.onPicture ? !shown : true);
+        }, TAP_MS)
+      };
+    };
+    const move = (event) => {
+      if (isHovering(event)) penHovers = true;
+      if (!direct(event)) return show(event);
+      if ((press == null ? void 0 : press.id) === event.pointerId && Math.hypot(event.clientX - press.x, event.clientY - press.y) > TAP_SLOP) {
+        press = null;
+      }
+    };
+    const down = (event) => {
+      if (!direct(event)) return show(event);
+      keyboard = false;
+      stop();
+      press = event.isPrimary === false ? null : {
+        id: event.pointerId,
+        x: event.clientX,
+        y: event.clientY,
+        target: event.target
+      };
+    };
+    const up = (event) => {
+      if (!direct(event) || (press == null ? void 0 : press.id) !== event.pointerId) return;
+      const { target } = press;
+      press = null;
+      if (event.type !== "pointerup") return;
+      if (isInteractive(target, element)) return;
+      const pictureElement = picture == null ? void 0 : picture.current;
+      const onPicture = Boolean(
+        pictureElement && target instanceof Node && pictureElement.contains(target)
+      );
+      if (onPicture && (tap == null ? void 0 : tap.onPicture) && Math.hypot(event.clientX - tap.x, event.clientY - tap.y) < DOUBLE_TAP_SLOP) {
+        forgetTap();
+        return;
+      }
+      later({ x: event.clientX, y: event.clientY, onPicture });
+    };
+    const underFadedControls = (event) => {
+      const pictureElement = picture == null ? void 0 : picture.current;
+      const target = event.target;
+      if (!pictureElement || !target || !pictureElement.contains(target))
+        return false;
+      return Array.from(element.querySelectorAll(FADING_CONTROLS)).some(
+        (piece) => {
+          const box = piece.getBoundingClientRect();
+          return box.width > 0 && box.height > 0 && event.clientX >= box.left && event.clientX <= box.right && event.clientY >= box.top && event.clientY <= box.bottom;
+        }
+      );
+    };
+    const hold = (event) => {
+      if (event.type === "pointerdown") {
+        if (held !== null) return;
+        clearTimeout(clickTimer);
+        swallowClick = false;
+        if (!underFadedControls(event)) return;
+        held = event.pointerId;
+        swallowClick = true;
+        if (direct(event)) {
+          keyboard = false;
+          stop();
+        } else show(event);
+      } else if (event.pointerId !== held) return;
+      event.stopPropagation();
+      event.preventDefault();
+      if (event.type === "pointercancel") {
+        held = null;
+        swallowClick = false;
+      } else if (event.type === "pointerup") {
+        held = null;
+        if (direct(event)) {
+          later({ x: event.clientX, y: event.clientY, onPicture: false });
+        }
+        clearTimeout(clickTimer);
+        clickTimer = setTimeout(() => swallowClick = false, TAP_MS);
+      }
+    };
+    const swallow = (event) => {
+      if (!swallowClick) return;
+      swallowClick = false;
+      event.stopPropagation();
+      event.preventDefault();
+    };
+    const pressed = (event) => {
+      pressedAt = Date.now();
+      if (event.type === "pointerdown") focusHeld = false;
+    };
+    const focus = () => {
+      if (Date.now() - pressedAt < PRESS_FOCUS_MS) return;
+      focusHeld = true;
+      stop();
+      set(true);
+    };
+    const leave = (event) => {
+      if (direct(event)) return;
+      if (shown) linger();
+    };
+    const blur = (event) => {
+      if (element.contains(event.relatedTarget)) return;
+      focusHeld = false;
+      if (shown || keyboard) linger();
+    };
+    page.addEventListener("pointerdown", pressed, true);
+    page.addEventListener("pointerup", pressed, true);
+    for (const type of ["pointerdown", "pointermove", "pointerup"])
+      element.addEventListener(type, hold, true);
+    element.addEventListener("pointercancel", hold, true);
+    element.addEventListener("click", swallow, true);
+    element.addEventListener("pointermove", move);
+    element.addEventListener("pointerdown", down);
+    element.addEventListener("pointerup", up);
+    element.addEventListener("pointercancel", up);
+    element.addEventListener("pointerleave", leave);
+    element.addEventListener("focusin", focus);
+    element.addEventListener("focusout", blur);
+    element.addEventListener("keydown", show);
+    return () => {
+      stop();
+      forgetTap();
+      clearTimeout(clickTimer);
+      page.removeEventListener("pointerdown", pressed, true);
+      page.removeEventListener("pointerup", pressed, true);
+      for (const type of ["pointerdown", "pointermove", "pointerup"])
+        element.removeEventListener(type, hold, true);
+      element.removeEventListener("pointercancel", hold, true);
+      element.removeEventListener("click", swallow, true);
+      element.removeEventListener("pointermove", move);
+      element.removeEventListener("pointerdown", down);
+      element.removeEventListener("pointerup", up);
+      element.removeEventListener("pointercancel", up);
+      element.removeEventListener("pointerleave", leave);
+      element.removeEventListener("focusin", focus);
+      element.removeEventListener("focusout", blur);
+      element.removeEventListener("keydown", show);
+    };
+  }, [element, hideDelay, picture]);
+  return visible;
+}
+export {
+  DEFAULT_HIDE_DELAY,
+  LEAVE_DELAY,
+  useControlsVisibility
+};

package/dist/components/Body/useNearViewport.mjs

@@ -0,0 +1,27 @@
+"use client";
+import { useState, useEffect } from "react";
+const NEAR_VIEWPORT_MARGIN = "50%";
+function useNearViewport(element, rootMargin = NEAR_VIEWPORT_MARGIN, root = null) {
+  const [near, setNear] = useState(
+    () => typeof IntersectionObserver === "undefined"
+  );
+  useEffect(() => {
+    if (near || !element) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          setNear(true);
+          observer.disconnect();
+        }
+      },
+      { root, rootMargin }
+    );
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [element, near, rootMargin, root]);
+  return near;
+}
+export {
+  NEAR_VIEWPORT_MARGIN,
+  useNearViewport
+};