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

package/dist/lib/renderer/math/affine.mjs

@@ -0,0 +1,68 @@
+"use client";
+const IDENTITY = Object.freeze({
+  a: 1,
+  b: 0,
+  c: 0,
+  d: 1,
+  e: 0,
+  f: 0
+});
+function translate(x, y) {
+  return { a: 1, b: 0, c: 0, d: 1, e: x, f: y };
+}
+function scale(x, y = x) {
+  return { a: x, b: 0, c: 0, d: y, e: 0, f: 0 };
+}
+function rotate(radians) {
+  const cos = Math.cos(radians);
+  const sin = Math.sin(radians);
+  return { a: cos, b: sin, c: -sin, d: cos, e: 0, f: 0 };
+}
+function multiply(m, n) {
+  return {
+    a: m.a * n.a + m.c * n.b,
+    b: m.b * n.a + m.d * n.b,
+    c: m.a * n.c + m.c * n.d,
+    d: m.b * n.c + m.d * n.d,
+    e: m.a * n.e + m.c * n.f + m.e,
+    f: m.b * n.e + m.d * n.f + m.f
+  };
+}
+function compose(...transforms) {
+  return transforms.reduce((acc, t) => multiply(acc, t), IDENTITY);
+}
+function apply(m, p) {
+  return { x: m.a * p.x + m.c * p.y + m.e, y: m.b * p.x + m.d * p.y + m.f };
+}
+function toCssMatrix(m) {
+  return `matrix(${[m.a, m.b, m.c, m.d, m.e, m.f].map(roundCss).join(",")})`;
+}
+function toClipMat3(m, width, height, out = new Float32Array(9)) {
+  const sx = 2 / width;
+  const sy = -2 / height;
+  out[0] = m.a * sx;
+  out[1] = m.b * sy;
+  out[2] = 0;
+  out[3] = m.c * sx;
+  out[4] = m.d * sy;
+  out[5] = 0;
+  out[6] = m.e * sx - 1;
+  out[7] = m.f * sy + 1;
+  out[8] = 1;
+  return out;
+}
+function roundCss(value) {
+  const rounded = Math.round(value * 1e6) / 1e6;
+  return Object.is(rounded, -0) ? "0" : String(rounded);
+}
+export {
+  IDENTITY,
+  apply,
+  compose,
+  multiply,
+  rotate,
+  scale,
+  toClipMat3,
+  toCssMatrix,
+  translate
+};

package/dist/lib/renderer/math/rect.mjs

@@ -0,0 +1,45 @@
+"use client";
+import { apply } from "./affine.mjs";
+function rectCenter(rect) {
+  return { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };
+}
+function union(rects) {
+  if (!rects.length) return null;
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const r of rects) {
+    minX = Math.min(minX, r.x);
+    minY = Math.min(minY, r.y);
+    maxX = Math.max(maxX, r.x + r.width);
+    maxY = Math.max(maxY, r.y + r.height);
+  }
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+function intersects(a, b) {
+  return a.x < b.x + b.width && b.x < a.x + a.width && a.y < b.y + b.height && b.y < a.y + a.height;
+}
+function transformRect(m, rect) {
+  const corners = [
+    apply(m, { x: rect.x, y: rect.y }),
+    apply(m, { x: rect.x + rect.width, y: rect.y }),
+    apply(m, { x: rect.x, y: rect.y + rect.height }),
+    apply(m, { x: rect.x + rect.width, y: rect.y + rect.height })
+  ];
+  const xs = corners.map((p) => p.x);
+  const ys = corners.map((p) => p.y);
+  const x = Math.min(...xs);
+  const y = Math.min(...ys);
+  return { x, y, width: Math.max(...xs) - x, height: Math.max(...ys) - y };
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+export {
+  clamp,
+  intersects,
+  rectCenter,
+  transformRect,
+  union
+};

package/dist/lib/renderer/overlays/Navigator.mjs

@@ -0,0 +1,141 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { Canvas2DBackend } from "../backends/canvas2d/Canvas2DBackend.mjs";
+import { fitCamera, worldPointToScreen, screenPointToWorld } from "../camera/Camera.mjs";
+import { planFrame } from "../scene/planFrame.mjs";
+class Navigator {
+  constructor(element, onNavigate) {
+    __publicField(this, "canvas");
+    __publicField(this, "region");
+    __publicField(this, "painter");
+    __publicField(this, "camera", null);
+    __publicField(this, "size", { width: 0, height: 0 });
+    __publicField(this, "drawnVersion", -1);
+    __publicField(this, "resized", true);
+    __publicField(this, "dragging", null);
+    __publicField(this, "observer", null);
+    __publicField(this, "onPointerDown", (event) => {
+      var _a, _b;
+      if (event.pointerType === "mouse" && event.button !== 0) return;
+      event.preventDefault();
+      event.stopPropagation();
+      this.dragging = event.pointerId;
+      (_b = (_a = this.element).setPointerCapture) == null ? void 0 : _b.call(_a, event.pointerId);
+      const world = this.worldAt(event);
+      if (world) this.onNavigate(world, false);
+    });
+    __publicField(this, "onPointerMove", (event) => {
+      if (this.dragging !== event.pointerId) return;
+      const world = this.worldAt(event);
+      if (world) this.onNavigate(world, true);
+    });
+    __publicField(this, "onPointerUp", (event) => {
+      var _a, _b;
+      if (this.dragging !== event.pointerId) return;
+      this.dragging = null;
+      (_b = (_a = this.element).releasePointerCapture) == null ? void 0 : _b.call(_a, event.pointerId);
+    });
+    this.element = element;
+    this.onNavigate = onNavigate;
+    this.canvas = document.createElement("canvas");
+    this.canvas.className = "clover-canvas-navigator-image";
+    this.canvas.setAttribute("aria-hidden", "true");
+    this.region = document.createElement("div");
+    this.region.className = "clover-canvas-navigator-region";
+    element.append(this.canvas, this.region);
+    this.painter = Canvas2DBackend.create(this.canvas);
+    this.measure();
+    if (typeof ResizeObserver !== "undefined") {
+      this.observer = new ResizeObserver(() => this.measure());
+      this.observer.observe(element);
+    }
+    element.addEventListener("pointerdown", this.onPointerDown);
+    element.addEventListener("pointermove", this.onPointerMove);
+    element.addEventListener("pointerup", this.onPointerUp);
+    element.addEventListener("pointercancel", this.onPointerUp);
+  }
+  /**
+   * @param version bumps whenever the scene or its loaded tiles change
+   */
+  render(items, world, visible, pixelRatio, getTile, version) {
+    if (!world) return;
+    const { width, height } = this.size;
+    this.camera = fitCamera(world, this.size);
+    if (this.painter && (this.resized || version !== this.drawnVersion)) {
+      this.drawnVersion = version;
+      this.resized = false;
+      this.painter.resize(width, height, pixelRatio);
+      const plan = planFrame({
+        items,
+        camera: this.camera,
+        viewport: this.size,
+        pixelRatio,
+        getTile
+      });
+      this.painter.begin();
+      for (const draw of plan.draws) {
+        this.painter.draw({
+          key: draw.url,
+          source: draw.image.source,
+          width: draw.image.width,
+          height: draw.image.height,
+          transform: draw.transform,
+          crop: draw.crop,
+          opacity: 1,
+          bleed: draw.bleed
+        });
+      }
+      this.painter.end();
+    }
+    const a = worldPointToScreen(this.camera, this.size, {
+      x: visible.x,
+      y: visible.y
+    });
+    const b = worldPointToScreen(this.camera, this.size, {
+      x: visible.x + visible.width,
+      y: visible.y + visible.height
+    });
+    const left = Math.max(0, Math.min(a.x, b.x));
+    const top = Math.max(0, Math.min(a.y, b.y));
+    const right = Math.min(width, Math.max(a.x, b.x));
+    const bottom = Math.min(height, Math.max(a.y, b.y));
+    Object.assign(this.region.style, {
+      transform: `translate(${left}px, ${top}px)`,
+      width: `${Math.max(0, right - left)}px`,
+      height: `${Math.max(0, bottom - top)}px`
+    });
+  }
+  measure() {
+    const rect = this.element.getBoundingClientRect();
+    const width = Math.max(1, rect.width);
+    const height = Math.max(1, rect.height);
+    if (width === this.size.width && height === this.size.height) return;
+    this.size = { width, height };
+    this.resized = true;
+  }
+  dispose() {
+    var _a, _b;
+    (_a = this.observer) == null ? void 0 : _a.disconnect();
+    const el = this.element;
+    el.removeEventListener("pointerdown", this.onPointerDown);
+    el.removeEventListener("pointermove", this.onPointerMove);
+    el.removeEventListener("pointerup", this.onPointerUp);
+    el.removeEventListener("pointercancel", this.onPointerUp);
+    (_b = this.painter) == null ? void 0 : _b.dispose();
+    this.canvas.remove();
+    this.region.remove();
+  }
+  worldAt(event) {
+    if (!this.camera) return null;
+    const rect = this.element.getBoundingClientRect();
+    return screenPointToWorld(this.camera, this.size, {
+      x: event.clientX - rect.left,
+      y: event.clientY - rect.top
+    });
+  }
+}
+export {
+  Navigator
+};

package/dist/lib/renderer/overlays/OverlayLayer.mjs

@@ -0,0 +1,94 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { worldPointToScreen } from "../camera/Camera.mjs";
+const overlaysOf = (renderer) => renderer.overlays ?? (renderer.overlays = new OverlayLayer(renderer.host));
+class OverlayLayer {
+  constructor(parent) {
+    __publicField(this, "container");
+    __publicField(this, "overlays", /* @__PURE__ */ new Map());
+    /** The view last positioned in, so one element can be moved between frames. */
+    __publicField(this, "view");
+    const container = document.createElement("div");
+    container.className = "clover-canvas-overlays";
+    Object.assign(container.style, {
+      position: "absolute",
+      inset: "0",
+      overflow: "clip",
+      pointerEvents: "none"
+    });
+    parent.appendChild(container);
+    this.container = container;
+  }
+  /** Pin `element` to `rect` (world units). Returns a function that unpins it. */
+  add(element, rect) {
+    this.overlays.set(element, rect);
+    element.classList.add("clover-canvas-overlay");
+    Object.assign(element.style, {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      pointerEvents: "auto"
+    });
+    if (element.parentElement !== this.container) {
+      this.container.appendChild(element);
+    }
+    return () => {
+      this.overlays.delete(element);
+    };
+  }
+  /**
+   * Pin `element`, already added, to another `rect` and place it there now, in the view
+   * last drawn: a hotspot following a recording, moved frame by frame with no frame of
+   * the renderer's. Nothing, for an element not pinned.
+   */
+  move(element, rect) {
+    if (!this.overlays.has(element)) return;
+    this.overlays.set(element, rect);
+    if (this.view) this.position(...this.view, element);
+  }
+  /** Place every element pinned, or `only` that one, in the view. */
+  position(camera, viewport, only) {
+    this.view = [camera, viewport];
+    const degrees = camera.rotation * 180 / Math.PI;
+    const upright = Math.cos(camera.rotation) > 0.9999;
+    const ratio = upright ? window.devicePixelRatio || 1 : 0;
+    const snap = (value) => ratio ? Math.round(value * ratio) / ratio : value;
+    for (const [element, rect] of this.overlays) {
+      if (only && element !== only) continue;
+      const center = worldPointToScreen(camera, viewport, {
+        x: rect.x + rect.width / 2,
+        y: rect.y + rect.height / 2
+      });
+      const left = snap(center.x - rect.width * camera.zoom / 2);
+      const top = snap(center.y - rect.height * camera.zoom / 2);
+      const width = snap(rect.width * camera.zoom);
+      const height = snap(rect.height * camera.zoom);
+      element.style.width = `${width}px`;
+      element.style.height = `${height}px`;
+      element.style.transform = `translate(${left}px, ${top}px)` + (degrees ? ` rotate(${degrees}deg)` : "");
+      const { style, dataset } = element;
+      if (upright) {
+        style.setProperty("--clover-overlay-x", `${center.x}px`);
+        style.setProperty("--clover-overlay-top", `${top}px`);
+        style.setProperty("--clover-overlay-bottom", `${top + height}px`);
+        const room = center.y > viewport.height / 2 ? "above" : "below";
+        if (dataset.overlayRoom !== room) dataset.overlayRoom = room;
+      } else {
+        style.removeProperty("--clover-overlay-x");
+        style.removeProperty("--clover-overlay-top");
+        style.removeProperty("--clover-overlay-bottom");
+        delete dataset.overlayRoom;
+      }
+    }
+  }
+  dispose() {
+    this.overlays.clear();
+    this.container.remove();
+  }
+}
+export {
+  OverlayLayer,
+  overlaysOf
+};

package/dist/lib/renderer/scene/planFrame.mjs

@@ -0,0 +1,168 @@
+"use client";
+import { worldToScreen, visibleWorldRect } from "../camera/Camera.mjs";
+import { compose, translate, scale } from "../math/affine.mjs";
+import { intersects } from "../math/rect.mjs";
+import { pixelsToWorld } from "./sceneItem.mjs";
+import { tilesInRegion, chooseLevel } from "../sources/tilePyramid.mjs";
+const TARGET_BAND = 1e7;
+const IN_FLIGHT_BAND = 15e6;
+const OVERVIEW_BAND = 2e7;
+const IN_FLIGHT_LEVELS = 2;
+function planFrame(input) {
+  const { items, camera, viewport, pixelRatio, getTile, destination } = input;
+  const view = worldToScreen(camera, viewport);
+  const draws = [];
+  const wants = [];
+  const levels = [];
+  const want = (pyramid, address, priority) => {
+    const tile = pyramid.tile(address);
+    wants.push({ url: tile.url, fallbackUrl: tile.fallbackUrl, priority });
+  };
+  for (const item of items) {
+    const { pyramid, clip, rect } = item;
+    const k = pixelsToWorld(item);
+    if (input.wantOverview) {
+      for (const address of tilesInRegion(pyramid, 0, clip)) {
+        want(pyramid, address, OVERVIEW_BAND);
+      }
+    }
+    const here = itemView(item, camera, viewport, pixelRatio);
+    const there = destination ? itemView(item, destination, viewport, pixelRatio) : here;
+    levels.push((here == null ? void 0 : here.target) ?? -1);
+    if (!here && !there) continue;
+    const distanceFrom = (center) => (address) => {
+      const r = pyramid.tile(address).region;
+      return Math.hypot(
+        r.x + r.width / 2 - center.x,
+        r.y + r.height / 2 - center.y
+      );
+    };
+    if (there) {
+      const distance2 = distanceFrom(there.center);
+      for (const address of tilesInRegion(pyramid, 0, there.area)) {
+        want(pyramid, address, distance2(address) / 1e3);
+      }
+      if (there.target > 0) {
+        for (const address of tilesInRegion(
+          pyramid,
+          there.target,
+          there.area
+        )) {
+          want(pyramid, address, TARGET_BAND + distance2(address));
+        }
+      }
+    }
+    if (!here) continue;
+    const { area, target } = here;
+    const distance = distanceFrom(here.center);
+    const coarse = tilesInRegion(pyramid, 0, area);
+    const fine = target === 0 ? [] : tilesInRegion(pyramid, target, area);
+    if (there !== here) {
+      for (const address of coarse) {
+        want(pyramid, address, distance(address) / 1e3);
+      }
+      const inFlight = target - IN_FLIGHT_LEVELS;
+      if (inFlight > 0) {
+        for (const address of tilesInRegion(pyramid, inFlight, area)) {
+          want(pyramid, address, IN_FLIGHT_BAND + distance(address));
+        }
+      }
+    }
+    if (item.spec.hidden) continue;
+    const targetTiles = target === 0 ? coarse : fine;
+    const complete = targetTiles.every(
+      (a) => getTile(pyramid.tile(a).url) !== void 0
+    );
+    const paintLevels = complete ? [target] : Array.from({ length: target + 1 }, (_, i) => i);
+    const itemToScreen = compose(
+      view,
+      translate(rect.x, rect.y),
+      scale(k.x, k.y),
+      translate(-clip.x, -clip.y)
+    );
+    for (const level of paintLevels) {
+      const addresses = level === 0 ? coarse : level === target ? fine : tilesInRegion(pyramid, level, area);
+      const multiTile = pyramid.levels[level].cols * pyramid.levels[level].rows > 1;
+      for (const address of addresses) {
+        const tile = pyramid.tile(address);
+        const image = getTile(tile.url);
+        if (!image) continue;
+        const draw = placeTile(
+          item,
+          tile.region,
+          image,
+          itemToScreen,
+          multiTile
+        );
+        if (draw) draws.push({ ...draw, url: tile.url });
+      }
+    }
+  }
+  wants.sort((a, b) => a.priority - b.priority);
+  return { draws, wants: dedupeWants(wants), levels };
+}
+function itemView(item, camera, viewport, pixelRatio) {
+  const { pyramid, clip, rect } = item;
+  const visible = visibleWorldRect(camera, viewport);
+  if (!intersects(visible, rect)) return null;
+  const k = pixelsToWorld(item);
+  const x0 = Math.max(visible.x, rect.x);
+  const y0 = Math.max(visible.y, rect.y);
+  const x1 = Math.min(visible.x + visible.width, rect.x + rect.width);
+  const y1 = Math.min(visible.y + visible.height, rect.y + rect.height);
+  const imagePerDevice = 1 / (k.x * camera.zoom * pixelRatio);
+  return {
+    area: {
+      x: clip.x + (x0 - rect.x) / k.x,
+      y: clip.y + (y0 - rect.y) / k.y,
+      width: (x1 - x0) / k.x,
+      height: (y1 - y0) / k.y
+    },
+    center: {
+      x: clip.x + (camera.x - rect.x) / k.x,
+      y: clip.y + (camera.y - rect.y) / k.y
+    },
+    target: chooseLevel(pyramid, imagePerDevice)
+  };
+}
+function placeTile(item, region, image, itemToScreen, multiTile) {
+  const { clip } = item;
+  const ix0 = Math.max(region.x, clip.x);
+  const iy0 = Math.max(region.y, clip.y);
+  const ix1 = Math.min(region.x + region.width, clip.x + clip.width);
+  const iy1 = Math.min(region.y + region.height, clip.y + clip.height);
+  if (ix1 <= ix0 || iy1 <= iy0) return null;
+  const sx = image.width / region.width;
+  const sy = image.height / region.height;
+  const eps = 1e-6;
+  return {
+    item,
+    image,
+    transform: compose(
+      itemToScreen,
+      translate(region.x, region.y),
+      scale(1 / sx, 1 / sy)
+    ),
+    crop: {
+      x: (ix0 - region.x) * sx,
+      y: (iy0 - region.y) * sy,
+      width: (ix1 - ix0) * sx,
+      height: (iy1 - iy0) * sy
+    },
+    bleed: {
+      right: multiTile && ix1 < clip.x + clip.width - eps,
+      bottom: multiTile && iy1 < clip.y + clip.height - eps
+    }
+  };
+}
+function dedupeWants(wants) {
+  const seen = /* @__PURE__ */ new Set();
+  return wants.filter((want) => {
+    if (seen.has(want.url)) return false;
+    seen.add(want.url);
+    return true;
+  });
+}
+export {
+  planFrame
+};

package/dist/lib/renderer/scene/regions.mjs

@@ -0,0 +1,30 @@
+"use client";
+function parseRegion(region, width, height) {
+  if (!region) return null;
+  let value = region.trim().replace(/^xywh=/, "");
+  let percent = false;
+  if (value.startsWith("pct:")) {
+    percent = true;
+    value = value.slice(4);
+  } else if (value.startsWith("pixel:")) {
+    value = value.slice(6);
+  }
+  const parts = value.split(",").map(Number);
+  if (parts.length !== 4 || parts.some((n) => !Number.isFinite(n))) return null;
+  let [x, y, w, h] = parts;
+  if (percent) {
+    x = x / 100 * width;
+    y = y / 100 * height;
+    w = w / 100 * width;
+    h = h / 100 * height;
+  }
+  const x0 = Math.max(0, x);
+  const y0 = Math.max(0, y);
+  const x1 = Math.min(width, x + w);
+  const y1 = Math.min(height, y + h);
+  if (x1 <= x0 || y1 <= y0) return null;
+  return { x: x0, y: y0, width: x1 - x0, height: y1 - y0 };
+}
+export {
+  parseRegion
+};

package/dist/lib/renderer/scene/sceneItem.mjs

@@ -0,0 +1,114 @@
+"use client";
+import { union } from "../math/rect.mjs";
+import { parseRegion } from "./regions.mjs";
+import { fetchInfo } from "../sources/imageService.mjs";
+import { servicePyramid, staticPyramid, tilesInRegion } from "../sources/tilePyramid.mjs";
+async function prepareItem(spec, context) {
+  if (spec.media) return prepareMedia(spec, spec.media);
+  let pyramid = null;
+  let serviceError = null;
+  if (spec.service) {
+    try {
+      pyramid = servicePyramid(
+        await fetchInfo(spec.service, context.infoOptions)
+      );
+    } catch (error) {
+      serviceError = error;
+    }
+  }
+  if (!pyramid) {
+    if (!spec.url) throw serviceError ?? new Error("Image has no source");
+    const image = await context.loadStatic(spec.url);
+    context.cache.seed(spec.url, image);
+    pyramid = staticPyramid(spec.url, image.naturalWidth, image.naturalHeight);
+  }
+  const size = spec.width && spec.height && spec.width > 0 && spec.height > 0 ? { width: spec.width, height: spec.height } : { width: pyramid.width, height: pyramid.height };
+  const contentClip = parseRegion(spec.region, size.width, size.height) ?? {
+    x: 0,
+    y: 0,
+    width: size.width,
+    height: size.height
+  };
+  const toPixelsX = pyramid.width / size.width;
+  const toPixelsY = pyramid.height / size.height;
+  const clip = {
+    x: contentClip.x * toPixelsX,
+    y: contentClip.y * toPixelsY,
+    width: contentClip.width * toPixelsX,
+    height: contentClip.height * toPixelsY
+  };
+  const item = {
+    id: spec.id,
+    spec,
+    pyramid,
+    size,
+    clip,
+    contentClip,
+    rect: { x: 0, y: 0, width: contentClip.width, height: contentClip.height }
+  };
+  await context.cache.prefetch(
+    tilesInRegion(pyramid, 0, clip).map((address) => {
+      const tile = pyramid.tile(address);
+      return { url: tile.url, fallbackUrl: tile.fallbackUrl };
+    })
+  );
+  return item;
+}
+const MEDIA_KEY_PREFIX = "media:";
+function prepareMedia(spec, media) {
+  var _a, _b;
+  const width = spec.width || ((_a = spec.placement) == null ? void 0 : _a.width) || media.element.videoWidth || 1600;
+  const height = spec.height || ((_b = spec.placement) == null ? void 0 : _b.height) || media.element.videoHeight || 900;
+  const key = `${MEDIA_KEY_PREFIX}${spec.id}`;
+  const size = { width, height };
+  const clip = { x: 0, y: 0, width, height };
+  return {
+    id: spec.id,
+    spec,
+    pyramid: staticPyramid(key, width, height),
+    media: {
+      kind: "media",
+      source: media.element,
+      width,
+      height,
+      naturalWidth: width,
+      naturalHeight: height
+    },
+    size,
+    clip,
+    contentClip: clip,
+    rect: { ...clip }
+  };
+}
+function layoutItems(items) {
+  if (!items.length) return null;
+  if (items.every((item) => item.spec.placement)) {
+    for (const item of items) item.rect = { ...item.spec.placement };
+    return union(items.map((item) => item.rect));
+  }
+  const height = items[0].contentClip.height;
+  let x = 0;
+  for (const item of items) {
+    const width = item.contentClip.width * height / item.contentClip.height;
+    item.rect = { x, y: 0, width, height };
+    x += width;
+  }
+  return { x: 0, y: 0, width: x, height };
+}
+function pixelsToWorld(item) {
+  return {
+    x: item.rect.width / item.clip.width,
+    y: item.rect.height / item.clip.height
+  };
+}
+function sameSpec(a, b) {
+  var _a, _b;
+  return a.service === b.service && a.url === b.url && a.width === b.width && a.height === b.height && a.region === b.region && ((_a = a.media) == null ? void 0 : _a.element) === ((_b = b.media) == null ? void 0 : _b.element) && JSON.stringify(a.placement) === JSON.stringify(b.placement);
+}
+export {
+  MEDIA_KEY_PREFIX,
+  layoutItems,
+  pixelsToWorld,
+  prepareItem,
+  sameSpec
+};

package/dist/lib/renderer/scene/uploadBudget.mjs

@@ -0,0 +1,30 @@
+"use client";
+const UPLOAD_BUDGET_BYTES = 2 * 1024 * 1024;
+function uploadBudget(getTile, isResident, bytes = UPLOAD_BUDGET_BYTES) {
+  const admitted = /* @__PURE__ */ new Set();
+  let remaining = bytes;
+  let deferred = false;
+  return {
+    get deferred() {
+      return deferred;
+    },
+    getTile(url) {
+      const image = getTile(url);
+      if (!image || image.kind === "media" || image.opaque || admitted.has(url) || isResident(url)) {
+        return image;
+      }
+      const size = image.width * image.height * 4;
+      if (admitted.size > 0 && size > remaining) {
+        deferred = true;
+        return void 0;
+      }
+      remaining -= size;
+      admitted.add(url);
+      return image;
+    }
+  };
+}
+export {
+  UPLOAD_BUDGET_BYTES,
+  uploadBudget
+};