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

package/dist/components/Scene/engine.mjs

@@ -0,0 +1,141 @@
+"use client";
+import { WebGLRenderer, NeutralToneMapping, Scene, PMREMGenerator, PerspectiveCamera, Group, Vector3, Box3, Sphere, Euler } from "three";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js";
+import { sendsCredentials } from "../../core/request.mjs";
+import { FIELD_OF_VIEW, cameraPosition } from "./orbit.mjs";
+import { isDrawable, MODEL_FORMATS } from "./models.mjs";
+const MAX_PIXEL_RATIO = 2;
+function createEngine(host, { onLost }) {
+  const renderer = new WebGLRenderer({ antialias: true, alpha: true });
+  renderer.setPixelRatio(
+    Math.min(globalThis.devicePixelRatio || 1, MAX_PIXEL_RATIO)
+  );
+  renderer.toneMapping = NeutralToneMapping;
+  const canvas = renderer.domElement;
+  canvas.className = "clover-canvas-surface";
+  canvas.setAttribute("aria-hidden", "true");
+  canvas.style.cssText = "position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none";
+  const lost = (event) => {
+    event.preventDefault();
+    onLost();
+  };
+  canvas.addEventListener("webglcontextlost", lost);
+  host.prepend(canvas);
+  const scene = new Scene();
+  const environment = new PMREMGenerator(renderer);
+  const room = new RoomEnvironment();
+  scene.environment = environment.fromScene(room, 0.04).texture;
+  room.dispose();
+  environment.dispose();
+  const camera = new PerspectiveCamera(FIELD_OF_VIEW, 1, 0.01, 1e3);
+  const root = new Group();
+  scene.add(root);
+  let bounds = { center: [0, 0, 0], radius: 1 };
+  let disposed = false;
+  const resize = () => {
+    const width = host.clientWidth;
+    const height = host.clientHeight;
+    if (!width || !height) return;
+    renderer.setSize(width, height, false);
+    camera.aspect = width / height;
+    camera.updateProjectionMatrix();
+  };
+  resize();
+  return {
+    async load(models, request) {
+      const loader = new GLTFLoader();
+      if (sendsCredentials(request)) loader.setWithCredentials(true);
+      if (request == null ? void 0 : request.headers) loader.setRequestHeader(request.headers);
+      const drawable = models.filter(isDrawable);
+      if (!drawable.length) {
+        const formats = [
+          ...new Set(models.map((model) => model.format ?? model.src))
+        ];
+        throw new Error(
+          models.length ? `Clover draws glTF models (${MODEL_FORMATS.join(", ")}), not ${formats.join(", ")}.` : "The Scene paints no model."
+        );
+      }
+      const loaded = await Promise.all(
+        drawable.map((model) => loader.loadAsync(model.src))
+      );
+      if (disposed) return bounds;
+      loaded.forEach((gltf, index) => {
+        root.add(place(gltf.scene, drawable[index]));
+      });
+      const box = new Box3().setFromObject(root, true);
+      if (!box.isEmpty()) {
+        const sphere = box.getBoundingSphere(new Sphere());
+        bounds = {
+          center: sphere.center.toArray(),
+          radius: sphere.radius || 1
+        };
+      }
+      return bounds;
+    },
+    draw(orbit) {
+      if (disposed) return;
+      const [x, y, z] = cameraPosition(orbit, bounds.center);
+      camera.position.set(x, y, z);
+      camera.near = Math.max(
+        bounds.radius / 1e3,
+        orbit.distance - bounds.radius * 2
+      );
+      camera.far = orbit.distance + bounds.radius * 4;
+      camera.updateProjectionMatrix();
+      camera.lookAt(new Vector3(...bounds.center));
+      renderer.render(scene, camera);
+    },
+    resize,
+    dispose() {
+      var _a;
+      if (disposed) return;
+      disposed = true;
+      canvas.removeEventListener("webglcontextlost", lost);
+      root.traverse((object) => release(object));
+      (_a = scene.environment) == null ? void 0 : _a.dispose();
+      renderer.dispose();
+      renderer.forceContextLoss();
+      canvas.remove();
+    }
+  };
+}
+function place(model, { position, transforms }) {
+  let node = model;
+  for (const step of transforms) {
+    const group = new Group();
+    group.add(node);
+    if (step.type === "scale") group.scale.set(step.x, step.y, step.z);
+    else if (step.type === "translate")
+      group.position.set(step.x, step.y, step.z);
+    else
+      group.rotation.copy(
+        new Euler(
+          step.x * Math.PI / 180,
+          step.y * Math.PI / 180,
+          step.z * Math.PI / 180,
+          "ZYX"
+        )
+      );
+    node = group;
+  }
+  const placed = new Group();
+  placed.position.set(...position);
+  placed.add(node);
+  return placed;
+}
+function release(object) {
+  var _a;
+  const mesh = object;
+  (_a = mesh.geometry) == null ? void 0 : _a.dispose();
+  const materials = [mesh.material ?? []].flat();
+  for (const material of materials) {
+    for (const value of Object.values(material)) {
+      if (value == null ? void 0 : value.isTexture) value.dispose();
+    }
+    material.dispose();
+  }
+}
+export {
+  createEngine
+};

package/dist/components/Scene/engines.mjs

@@ -0,0 +1,23 @@
+"use client";
+const KEY = Symbol.for("@nulib/clover/scene-engines");
+const store = globalThis;
+const registered = store[KEY] ?? (store[KEY] = /* @__PURE__ */ new Map());
+function registerSceneEngine(name, load) {
+  registered.set(name, load);
+}
+const clover = () => import("./cloverEngine.mjs");
+let warned = false;
+function engineFor(name = "clover") {
+  if (name === "clover") return clover;
+  const load = registered.get(name);
+  if (load) return load;
+  if (!warned) {
+    warned = true;
+    console.warn(`Clover: no Scene engine "${name}"; drawing with Clover's.`);
+  }
+  return clover;
+}
+export {
+  engineFor,
+  registerSceneEngine
+};

package/dist/components/Scene/gestures.mjs

@@ -0,0 +1,74 @@
+"use client";
+import { isInteractive, TAP_SLOP } from "../../lib/pointer.mjs";
+const TURN_PER_HEIGHT = 2 * Math.PI;
+const WHEEL_ZOOM = 0.01;
+const wheelPixels = (event) => event.deltaMode === 1 ? event.deltaY * 16 : event.deltaMode === 2 ? event.deltaY * 400 : event.deltaY;
+function attachOrbitGestures(element, input, span = () => element.clientHeight) {
+  const pointers = /* @__PURE__ */ new Map();
+  let spread = 0;
+  let dragging = false;
+  let start = { x: 0, y: 0 };
+  const apart = () => {
+    const [a, b] = [...pointers.values()];
+    return a && b ? Math.hypot(a.x - b.x, a.y - b.y) : 0;
+  };
+  const down = (event) => {
+    if (event.pointerType === "mouse" && event.button !== 0) return;
+    if (isInteractive(event.target, element)) return;
+    pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    try {
+      element.setPointerCapture(event.pointerId);
+    } catch {
+    }
+    if (pointers.size === 1) {
+      dragging = false;
+      start = { x: event.clientX, y: event.clientY };
+    }
+    if (pointers.size === 2) spread = apart();
+  };
+  const move = (event) => {
+    const last = pointers.get(event.pointerId);
+    if (!last) return;
+    const now = { x: event.clientX, y: event.clientY };
+    pointers.set(event.pointerId, now);
+    if (pointers.size === 2) {
+      const next = apart();
+      if (spread > 0 && next > 0) input.zoom(next / spread);
+      spread = next;
+      return;
+    }
+    if (!dragging) {
+      if (Math.hypot(now.x - start.x, now.y - start.y) < TAP_SLOP) return;
+      dragging = true;
+    }
+    const height = span() || 1;
+    input.turn(
+      -(now.x - last.x) / height * TURN_PER_HEIGHT,
+      -(now.y - last.y) / height * TURN_PER_HEIGHT
+    );
+  };
+  const up = (event) => {
+    pointers.delete(event.pointerId);
+    spread = pointers.size === 2 ? apart() : 0;
+  };
+  const wheel = (event) => {
+    if (!event.ctrlKey) return;
+    event.preventDefault();
+    input.zoom(Math.exp(-wheelPixels(event) * WHEEL_ZOOM));
+  };
+  element.addEventListener("pointerdown", down);
+  element.addEventListener("pointermove", move);
+  element.addEventListener("pointerup", up);
+  element.addEventListener("pointercancel", up);
+  element.addEventListener("wheel", wheel, { passive: false });
+  return () => {
+    element.removeEventListener("pointerdown", down);
+    element.removeEventListener("pointermove", move);
+    element.removeEventListener("pointerup", up);
+    element.removeEventListener("pointercancel", up);
+    element.removeEventListener("wheel", wheel);
+  };
+}
+export {
+  attachOrbitGestures
+};

package/dist/components/Scene/models.mjs

@@ -0,0 +1,78 @@
+"use client";
+import { isPainting, bodiesOf } from "../../core/painting.mjs";
+import { asArray } from "../../lib/asArray.mjs";
+const MODEL_FORMATS = ["model/gltf-binary", "model/gltf+json"];
+const number = (value, fallback) => {
+  const read2 = Number(value);
+  return Number.isFinite(read2) ? read2 : fallback;
+};
+function isDrawable(model) {
+  if (model.format) return MODEL_FORMATS.includes(model.format.toLowerCase());
+  return /\.(glb|gltf)(\?|#|$)/i.test(model.src);
+}
+function transformsOf(resource) {
+  return asArray(resource.transform).flatMap((raw) => {
+    const step = raw;
+    const type = (step == null ? void 0 : step.type) === "ScaleTransform" ? "scale" : (step == null ? void 0 : step.type) === "RotateTransform" ? "rotate" : (step == null ? void 0 : step.type) === "TranslateTransform" ? "translate" : null;
+    if (!type || !step) return [];
+    const rest = type === "scale" ? 1 : 0;
+    return [
+      {
+        type,
+        x: number(step.x, rest),
+        y: number(step.y, rest),
+        z: number(step.z, rest)
+      }
+    ];
+  });
+}
+function positionOf(target) {
+  for (const raw of asArray(target)) {
+    const each = raw;
+    if ((each == null ? void 0 : each.type) !== "SpecificResource") continue;
+    const point = asArray(each.selector).find(
+      (selector) => (selector == null ? void 0 : selector.type) === "PointSelector"
+    );
+    if (point)
+      return [number(point.x, 0), number(point.y, 0), number(point.z, 0)];
+  }
+  return [0, 0, 0];
+}
+const read = /* @__PURE__ */ new WeakMap();
+function sceneModels(scene) {
+  const cached = read.get(scene);
+  if (cached) return cached;
+  const models = [];
+  for (const page of scene.items ?? []) {
+    for (const annotation of (page == null ? void 0 : page.items) ?? []) {
+      if (!isPainting(annotation)) continue;
+      for (let body of bodiesOf(annotation)) {
+        if ((body == null ? void 0 : body.type) === "Choice")
+          body = asArray(body.items)[0];
+        const specific = (body == null ? void 0 : body.type) === "SpecificResource" ? body : null;
+        const source = specific ? typeof specific.source === "string" ? { id: specific.source, type: "Model" } : specific.source : body;
+        if ((source == null ? void 0 : source.type) !== "Model" || typeof source.id !== "string") continue;
+        models.push({
+          id: String(annotation.id ?? source.id),
+          src: source.id,
+          ...typeof source.format === "string" ? { format: source.format } : {},
+          ...source.label ? { label: source.label } : {},
+          position: positionOf(annotation.target),
+          transforms: specific ? transformsOf(specific) : []
+        });
+      }
+    }
+  }
+  read.set(scene, models);
+  return models;
+}
+function sceneBackground(scene) {
+  const color = scene.backgroundColor;
+  return typeof color === "string" && /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(color) ? color : void 0;
+}
+export {
+  MODEL_FORMATS,
+  isDrawable,
+  sceneBackground,
+  sceneModels
+};

package/dist/components/Scene/orbit.mjs

@@ -0,0 +1,60 @@
+"use client";
+const FIELD_OF_VIEW = 45;
+const HOME_PHI = 75 * Math.PI / 180;
+const MIN_PHI = 5 * Math.PI / 180;
+const MAX_PHI = Math.PI - MIN_PHI;
+const MARGIN = 1.1;
+const NEAREST = 0.35;
+const FARTHEST = 4;
+function fitDistance(radius, aspect = 1) {
+  const vertical = FIELD_OF_VIEW * Math.PI / 180;
+  const horizontal = 2 * Math.atan(Math.tan(vertical / 2) * aspect);
+  const narrowest = Math.min(vertical, horizontal);
+  return Math.max(radius, 1e-6) / Math.sin(narrowest / 2) * MARGIN;
+}
+function homeOrbit(bounds, aspect = 1) {
+  return {
+    theta: 0,
+    phi: HOME_PHI,
+    distance: fitDistance(bounds.radius, aspect)
+  };
+}
+function turned(orbit, dTheta, dPhi) {
+  return {
+    ...orbit,
+    theta: orbit.theta + dTheta,
+    phi: Math.min(MAX_PHI, Math.max(MIN_PHI, orbit.phi + dPhi))
+  };
+}
+function zoomed(orbit, factor, home) {
+  const distance = orbit.distance / factor;
+  return {
+    ...orbit,
+    distance: Math.min(
+      home.distance * FARTHEST,
+      Math.max(home.distance * NEAREST, distance)
+    )
+  };
+}
+function cameraPosition(orbit, center) {
+  const { theta, phi, distance } = orbit;
+  return [
+    center[0] + distance * Math.sin(phi) * Math.sin(theta),
+    center[1] + distance * Math.cos(phi),
+    center[2] + distance * Math.sin(phi) * Math.cos(theta)
+  ];
+}
+function sameOrbit(a, b) {
+  const close = (x, y) => Math.abs(x - y) < 1e-6;
+  const turn = (a.theta - b.theta) % (2 * Math.PI);
+  return (close(turn, 0) || close(Math.abs(turn), 2 * Math.PI)) && close(a.phi, b.phi) && close(a.distance, b.distance);
+}
+export {
+  FIELD_OF_VIEW,
+  cameraPosition,
+  fitDistance,
+  homeOrbit,
+  sameOrbit,
+  turned,
+  zoomed
+};

package/dist/components/Search/Search.mjs

@@ -0,0 +1,246 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useSyncExternalStore, useState, useEffect, useRef } from "react";
+import { useUniqueId } from "../../ui/useUniqueId.mjs";
+import { searchServiceOf } from "../../core/search-service.mjs";
+import { selectSequence } from "../../core/selectors.mjs";
+import { localize } from "../../core/value.mjs";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { join } from "../../lib/classnames.mjs";
+import { useClover, useCloverSelector } from "../../react/context.mjs";
+import { bringIntoView, scrollerOf } from "../../ui/bringIntoView.mjs";
+import { titleTag } from "../../ui/heading.mjs";
+import { useSectionOpened } from "../../ui/Sections.mjs";
+import { FieldPill } from "../../ui/FieldPill.mjs";
+const CHUNK = 40;
+const Search = forwardRef(function Search2({
+  headingLevel = 3,
+  sticky = false,
+  size = "large",
+  as: Tag = "div",
+  className,
+  ...rest
+}, ref) {
+  const { t, langOf } = useCloverTranslation();
+  const { clover, language } = useClover("Search");
+  const service = useCloverSelector(
+    (state) => {
+      var _a;
+      return ((_a = searchServiceOf(state.manifest)) == null ? void 0 : _a.id) ?? null;
+    }
+  );
+  const search = useCloverSelector((state) => state.search);
+  const canvases = useCloverSelector(
+    (state) => selectSequence(state.manifest).canvases
+  );
+  const selected = useCloverSelector((state) => state.annotationId);
+  const highlighted = useSyncExternalStore(
+    clover.highlight.subscribe,
+    clover.highlight.get,
+    clover.highlight.get
+  );
+  const id = useUniqueId();
+  const [draft, setDraft] = useState(search.query);
+  useEffect(() => setDraft(search.query), [search.query]);
+  const field = useRef(null);
+  const opened = useSectionOpened();
+  const focused = useRef(0);
+  const stepped = useRef(false);
+  const arrived = useRef(null);
+  useEffect(() => {
+    if (search.status !== "ready" || !search.set) return;
+    if (arrived.current === search.set) return;
+    arrived.current = search.set;
+    const first = search.hits[0];
+    const chosen = search.hits.some(
+      (hit) => selected && hit.entryIds.includes(selected)
+    );
+    if (first && !chosen) clover.selectAnnotation(first.entryIds[0]);
+  }, [clover, search.status, search.set, search.hits, selected]);
+  useEffect(() => {
+    var _a;
+    const held = (_a = field.current) == null ? void 0 : _a.closest(
+      ".clover-content-search-field"
+    );
+    const part = held == null ? void 0 : held.parentElement;
+    if (!sticky || !held || !part || typeof ResizeObserver === "undefined")
+      return;
+    const observer = new ResizeObserver(
+      () => part.style.setProperty(
+        "--clover-content-search-field",
+        `${held.offsetHeight}px`
+      )
+    );
+    observer.observe(held);
+    return () => {
+      observer.disconnect();
+      part.style.removeProperty("--clover-content-search-field");
+    };
+  }, [sticky, service]);
+  useEffect(() => {
+    var _a, _b;
+    if (!stepped.current) return;
+    stepped.current = false;
+    const current = (_b = (_a = field.current) == null ? void 0 : _a.closest(".clover-content-search")) == null ? void 0 : _b.querySelector(
+      '.clover-content-search-hit[aria-current="true"]'
+    );
+    if (current) bringIntoView(current, "nearest");
+  }, [selected]);
+  const [more, setMore] = useState({
+    set: null,
+    count: CHUNK
+  });
+  const limit = more.set === search.set ? more.count : CHUNK;
+  const extend = () => setMore({ set: search.set, count: limit + CHUNK });
+  const end = useRef(null);
+  const position = selected ? search.hits.findIndex((hit) => hit.entryIds.includes(selected)) : -1;
+  const lazy = typeof IntersectionObserver !== "undefined";
+  const shown = lazy ? Math.min(search.hits.length, Math.max(limit, position + 1)) : search.hits.length;
+  const extendRef = useRef(extend);
+  extendRef.current = extend;
+  useEffect(() => {
+    const node = end.current;
+    if (!node || !lazy || shown >= search.hits.length) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) extendRef.current();
+      },
+      { root: scrollerOf(node), rootMargin: "0px 0px 400px 0px" }
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [lazy, shown, search.hits.length]);
+  useEffect(() => {
+    if (!opened || opened === focused.current || !field.current) return;
+    focused.current = opened;
+    field.current.focus();
+  }, [opened, service]);
+  if (!service) return null;
+  const steps = {
+    position,
+    total: search.hits.length,
+    step: (by) => {
+      const to = search.hits[steps.position + by];
+      if (!to) return;
+      stepped.current = true;
+      clover.selectAnnotation(to.entryIds[0]);
+    }
+  };
+  const groups = [];
+  search.hits.slice(0, shown).forEach((hit, index) => {
+    const last = groups[groups.length - 1];
+    if ((last == null ? void 0 : last.canvasId) === hit.canvasId) last.hits.push({ hit, index });
+    else groups.push({ canvasId: hit.canvasId, hits: [{ hit, index }] });
+  });
+  const Heading = titleTag(headingLevel);
+  const count = search.hits.length;
+  const statusKey = search.status === "loading" ? "contentSearchLoading" : search.status === "error" ? "contentSearchError" : search.status === "ready" ? count === 0 ? "contentSearchResultsNone" : count === 1 ? "contentSearchResult" : "contentSearchResults" : null;
+  const status = statusKey ? t(statusKey, { count }) : "";
+  const results = search.status === "ready" ? steps : null;
+  const bar = /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: "clover-content-search-status",
+      role: "status",
+      "data-status": search.status,
+      lang: statusKey ? langOf(statusKey) : void 0,
+      children: status
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      ref,
+      className: join("clover-content-search", className),
+      "data-status": search.status,
+      "data-sticky": sticky || void 0,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "clover-content-search-field", children: /* @__PURE__ */ jsx(
+          FieldPill,
+          {
+            ref: field,
+            id: `${id}-query`,
+            value: draft,
+            onChange: (value) => {
+              setDraft(value);
+              if (!value && search.query) void clover.search("");
+            },
+            onSubmit: () => void clover.search(draft),
+            onClear: () => {
+              var _a;
+              setDraft("");
+              if (search.query) void clover.search("");
+              (_a = field.current) == null ? void 0 : _a.focus();
+            },
+            results,
+            size,
+            classes: {
+              form: "clover-content-search-form",
+              query: "clover-content-search-query",
+              clear: "clover-content-search-clear",
+              submit: "clover-content-search-submit"
+            }
+          }
+        ) }),
+        bar,
+        groups.map(({ canvasId, hits }, index) => {
+          const canvas = canvases.find((item) => item.id === canvasId);
+          const label = localize(canvas == null ? void 0 : canvas.label, language);
+          return /* @__PURE__ */ jsxs(
+            "section",
+            {
+              className: "clover-content-search-group",
+              "aria-labelledby": `${id}-${index}`,
+              children: [
+                /* @__PURE__ */ jsx(
+                  Heading,
+                  {
+                    id: `${id}-${index}`,
+                    className: "clover-content-search-canvas",
+                    lang: label.text ? label.lang : void 0,
+                    children: label.text || canvasId
+                  }
+                ),
+                /* @__PURE__ */ jsx("ol", { className: "clover-content-search-hits", children: hits.map(({ hit, index: place }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: "clover-content-search-hit",
+                    "aria-current": selected && hit.entryIds.includes(selected) ? "true" : void 0,
+                    "data-highlighted": hit.entryIds.includes(highlighted ?? ""),
+                    onClick: () => clover.selectAnnotation(hit.entryIds[0]),
+                    onPointerEnter: () => clover.highlight.emit(hit.entryIds[0]),
+                    onPointerLeave: () => clover.highlight.emit(null),
+                    onFocus: () => {
+                      clover.highlight.emit(hit.entryIds[0]);
+                      if (shown < count && place >= shown - 5) extend();
+                    },
+                    onBlur: () => clover.highlight.emit(null),
+                    children: [
+                      hit.before,
+                      /* @__PURE__ */ jsx("mark", { children: hit.match }),
+                      hit.after
+                    ]
+                  }
+                ) }, hit.id)) })
+              ]
+            },
+            `${canvasId}-${index}`
+          );
+        }),
+        shown < count && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: end,
+            className: "clover-content-search-more",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  Search
+};