@onodocs/canvas 0.2.0

package/index.js

@@ -0,0 +1,2428 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// packages/foundation/src/path-bounds.ts
+function pathBounds(path) {
+  let left = Number.POSITIVE_INFINITY;
+  let right = Number.NEGATIVE_INFINITY;
+  let top = Number.POSITIVE_INFINITY;
+  let bottom = Number.NEGATIVE_INFINITY;
+  const include = /* @__PURE__ */ __name((x, y) => {
+    left = Math.min(left, x);
+    right = Math.max(right, x);
+    top = Math.min(top, y);
+    bottom = Math.max(bottom, y);
+  }, "include");
+  let current;
+  let start;
+  for (const operation of path) {
+    if (operation.kind === "nativeText") {
+      for (const x of [-operation.inkLeft, operation.inkRight]) for (const y of [-operation.ascent, operation.descent]) include(operation.x + operation.a * x + operation.c * y, operation.y + operation.b * x + operation.d * y);
+    } else if (operation.kind === "moveTo") {
+      current = operation;
+      start = operation;
+      include(operation.x, operation.y);
+    } else if (operation.kind === "closePath") {
+      current = start;
+    } else if (operation.kind === "lineTo") {
+      include(operation.x, operation.y);
+      current = operation;
+    } else if (operation.kind === "quadraticCurveTo") {
+      curveExtrema(current, operation.controlX, operation.controlY, operation.x, operation.y, include);
+      current = operation;
+    } else if (operation.kind === "bezierCurveTo") {
+      cubicExtrema(current, operation.control1X, operation.control1Y, operation.control2X, operation.control2Y, operation.x, operation.y, include);
+      current = operation;
+    }
+  }
+  return Number.isFinite(left) && Number.isFinite(right) && Number.isFinite(top) && Number.isFinite(bottom) ? { left, top, width: right - left, height: bottom - top } : void 0;
+}
+__name(pathBounds, "pathBounds");
+function curveExtrema(from, controlX, controlY, x, y, include) {
+  include(from.x, from.y);
+  include(x, y);
+  const coordinate = /* @__PURE__ */ __name((start, control, end) => {
+    const denominator = start - 2 * control + end;
+    return denominator === 0 ? void 0 : (start - control) / denominator;
+  }, "coordinate");
+  const at = /* @__PURE__ */ __name((start, control, end, t) => (1 - t) ** 2 * start + 2 * (1 - t) * t * control + t ** 2 * end, "at");
+  for (const t of [coordinate(from.x, controlX, x), coordinate(from.y, controlY, y)]) if (t !== void 0 && t > 0 && t < 1) include(at(from.x, controlX, x, t), at(from.y, controlY, y, t));
+}
+__name(curveExtrema, "curveExtrema");
+function cubicExtrema(from, control1X, control1Y, control2X, control2Y, x, y, include) {
+  include(from.x, from.y);
+  include(x, y);
+  const roots = /* @__PURE__ */ __name((start, control1, control2, end) => {
+    const a = -start + 3 * control1 - 3 * control2 + end;
+    const b = 2 * (start - 2 * control1 + control2);
+    const c = control1 - start;
+    if (a === 0) return b === 0 ? [] : [-c / b];
+    const discriminant = b * b - 4 * a * c;
+    return discriminant < 0 ? [] : [(-b + Math.sqrt(discriminant)) / (2 * a), (-b - Math.sqrt(discriminant)) / (2 * a)];
+  }, "roots");
+  const at = /* @__PURE__ */ __name((start, control1, control2, end, t) => {
+    const inverse = 1 - t;
+    return inverse ** 3 * start + 3 * inverse ** 2 * t * control1 + 3 * inverse * t ** 2 * control2 + t ** 3 * end;
+  }, "at");
+  for (const t of [...roots(from.x, control1X, control2X, x), ...roots(from.y, control1Y, control2Y, y)]) if (t > 0 && t < 1) include(at(from.x, control1X, control2X, x, t), at(from.y, control1Y, control2Y, y, t));
+}
+__name(cubicExtrema, "cubicExtrema");
+
+// packages/foundation/src/device-rounding.ts
+function roundHalfAwayFromZero(value) {
+  return value < 0 ? -Math.round(-value) : Math.round(value);
+}
+__name(roundHalfAwayFromZero, "roundHalfAwayFromZero");
+
+// packages/foundation/src/page-interaction.ts
+function geometryPoint(point, transform) {
+  return { x: transform.a * point.x + transform.c * point.y + transform.e, y: transform.b * point.x + transform.d * point.y + transform.f };
+}
+__name(geometryPoint, "geometryPoint");
+function hitTestPage(interaction, point) {
+  for (let index = interaction.lines.length - 1; index >= 0; index--) {
+    const line = interaction.lines[index], fragment = line.fragment;
+    const local = inversePoint(point, fragment.transform);
+    if (!local || !insideRectangle(local, fragment.rectangle) || !fragment.clips.every((clip) => {
+      const p = inversePoint(point, clip.transform);
+      return p !== void 0 && insideRectangle(p, clip.rectangle);
+    })) continue;
+    const carets = line.carets;
+    if (!carets.length) continue;
+    let nearest = carets[0];
+    for (const caret of carets) {
+      const distance = Math.abs(local.x - caret.x), previous = Math.abs(local.x - nearest.x);
+      if (distance < previous || distance === previous && caret.order < nearest.order) nearest = caret;
+    }
+    let scalar = nearest.scalarOffset;
+    for (let i = 1; i < carets.length; i++) {
+      const a = carets[i - 1], b = carets[i];
+      if (local.x >= a.x && local.x < b.x && a.scalarOffset !== b.scalarOffset) {
+        scalar = (a.scalarOffset + b.scalarOffset) / 2;
+        break;
+      }
+    }
+    let span = line.spans.find((span2) => scalar >= span2.start && scalar < span2.end);
+    if (!span) {
+      for (let i = line.spans.length - 1; i >= 0; i--) if (line.spans[i].end === nearest.scalarOffset) {
+        span = line.spans[i];
+        break;
+      }
+    }
+    const caretPoint = geometryPoint({ x: nearest.x, y: fragment.rectangle.y }, fragment.transform);
+    if (span) {
+      const offset = span.offsets.find(([scalar2]) => scalar2 === nearest.scalarOffset)?.[1];
+      return { elementId: span.elementId, fragment: span.fragments.find((value) => insideRectangle(local, value.rectangle)) ?? fragment, ...span.paragraphId !== void 0 && offset !== void 0 ? { caret: { paragraphId: span.paragraphId, offset, point: caretPoint } } : {} };
+    }
+    if (line.elementId !== void 0) return { elementId: line.elementId, fragment, ...line.emptyParagraph ? { caret: { paragraphId: line.elementId, offset: 0, point: caretPoint } } : {} };
+  }
+  for (let index = interaction.areas.length - 1; index >= 0; index--) {
+    const area = interaction.areas[index];
+    if (insideRectangle(point, area.fragment.rectangle)) return area;
+  }
+  return void 0;
+}
+__name(hitTestPage, "hitTestPage");
+function insideRectangle(point, rectangle) {
+  return point.x >= rectangle.x && point.x <= rectangle.x + rectangle.width && point.y >= rectangle.y && point.y <= rectangle.y + rectangle.height;
+}
+__name(insideRectangle, "insideRectangle");
+function inversePoint(point, transform) {
+  const determinant = transform.a * transform.d - transform.b * transform.c;
+  if (determinant === 0) return void 0;
+  const x = point.x - transform.e, y = point.y - transform.f;
+  return { x: (transform.d * x - transform.c * y) / determinant, y: (transform.a * y - transform.b * x) / determinant };
+}
+__name(inversePoint, "inversePoint");
+
+// packages/foundation/src/image-resources.ts
+async function materializeImageResources(data, signal, onDispose = () => {
+}) {
+  const gate = { checkpoint: /* @__PURE__ */ __name(() => signal?.throwIfAborted(), "checkpoint") };
+  gate.checkpoint();
+  return materializeImages(new Map(data.sources.map(({ id, source }) => [id, source])), data.selections, gate, onDispose);
+}
+__name(materializeImageResources, "materializeImageResources");
+async function materializeImages(sources, selections, gate, onDispose) {
+  const images = /* @__PURE__ */ new Map();
+  const unavailable = /* @__PURE__ */ new Set();
+  const composites = /* @__PURE__ */ new Map();
+  try {
+    for (const selection of selections) {
+      gate?.checkpoint();
+      if (selection.resource.type === "ResourceId") {
+        await materializeOptional(selection.resource, sources, images, unavailable, gate);
+        continue;
+      }
+      if (selection.rasterFallbackOnly) {
+        if (selection.resource.rasterFallbackResourceId !== void 0) await materializeOptional(selection.resource.rasterFallbackResourceId, sources, images, unavailable, gate);
+        continue;
+      }
+      const svg = await materializeOptional(selection.resource.svgResourceId, sources, images, unavailable, gate);
+      const fallback = svg === void 0 && selection.resource.rasterFallbackResourceId !== void 0 ? await materializeOptional(selection.resource.rasterFallbackResourceId, sources, images, unavailable, gate) : void 0;
+      composites.set(compositeKey(selection.resource), svg ?? fallback);
+    }
+    return new RasterImageMaterializerOwner(images, composites, unavailable, onDispose);
+  } catch (error) {
+    for (const image of images.values()) image.close?.();
+    throw error;
+  }
+}
+__name(materializeImages, "materializeImages");
+var RasterImageMaterializerOwner = class {
+  static {
+    __name(this, "RasterImageMaterializerOwner");
+  }
+  #images;
+  #composites;
+  #unavailableImages;
+  #preparedImages = /* @__PURE__ */ new Map();
+  #sourcePixels = /* @__PURE__ */ new Map();
+  #disposed = false;
+  #onDispose;
+  constructor(images, composites, unavailableImages, onDispose) {
+    this.#onDispose = onDispose;
+    this.#images = new Map(images);
+    this.#composites = new Map(composites);
+    this.#unavailableImages = unavailableImages;
+  }
+  resolveRasterImage(resource, colorEffect) {
+    return this.resolveImage(resource, colorEffect)?.image;
+  }
+  resolveRasterImageIntrinsicPixelSize(resource, colorEffect) {
+    return this.resolveImage(resource, colorEffect)?.intrinsicPixelSize;
+  }
+  resolvePreparedRasterImage(resource, devicePixelSize, colorEffect, flipHorizontal, flipVertical) {
+    if (this.#disposed) throw new TypeError("The raster-image resource materialization request is invalid.");
+    const image = this.resolveImage(resource, colorEffect);
+    if (image === void 0 || image.mediaType === "image/svg+xml") return void 0;
+    const effectKey = rasterColorEffectPlanKey(colorEffect);
+    const key = `${resourceKey(resource, colorEffect)}:${devicePixelSize.width}x${devicePixelSize.height}:${effectKey}:${flipHorizontal === true}:${flipVertical === true}`;
+    if (this.#preparedImages.has(key)) return this.#preparedImages.get(key) ?? void 0;
+    const pixels = this.resolveSourcePixels(image, colorEffect, effectKey);
+    const prepared = pixels === void 0 ? void 0 : prepareRasterImage(pixels, image.intrinsicPixelSize, devicePixelSize, flipHorizontal, flipVertical);
+    this.#preparedImages.set(key, prepared ?? null);
+    return prepared;
+  }
+  dispose() {
+    if (this.#disposed) return;
+    for (const image of this.#images.values()) image.close?.();
+    this.#images.clear();
+    this.#composites.clear();
+    this.#preparedImages.clear();
+    this.#sourcePixels.clear();
+    this.#disposed = true;
+    this.#onDispose();
+  }
+  /** Spec: pipeline.parsing.package.raster-image.prepared-sampling#shared-source-pixels */
+  resolveSourcePixels(image, colorEffect, effectKey) {
+    let variants = this.#sourcePixels.get(image);
+    const existing = variants?.get(effectKey);
+    if (existing !== void 0) return existing;
+    try {
+      let source = variants?.get("none");
+      if (source === void 0) {
+        source = readRasterImagePixels(image);
+        if (source === void 0) return void 0;
+        if (variants === void 0) this.#sourcePixels.set(image, variants = /* @__PURE__ */ new Map());
+        variants.set("none", source);
+      }
+      if (colorEffect === void 0) return source;
+      const pixels = source.slice();
+      applyRasterColorEffectPlan(pixels, colorEffect, image.mediaType, image.hasAlpha);
+      variants.set(effectKey, pixels);
+      return pixels;
+    } catch {
+      return void 0;
+    }
+  }
+  resolveImage(resource, colorEffect) {
+    if (this.#disposed) throw new TypeError("The raster-image resource materialization request is invalid.");
+    if (resource.type === "ResourceId") {
+      const image = this.#images.get(resource.serialized);
+      if (image === void 0 && this.#unavailableImages.has(resource.serialized)) return void 0;
+      if (image === void 0) throw new TypeError("The raster image is not available for materialization.");
+      return image;
+    }
+    if (colorEffect !== void 0) return resource.rasterFallbackResourceId === void 0 ? void 0 : this.#images.get(resource.rasterFallbackResourceId.serialized);
+    return this.#composites.get(compositeKey(resource));
+  }
+};
+async function materializeOptional(resource, resources, images, unavailable, gate) {
+  const existing = images.get(resource.serialized);
+  if (existing !== void 0) return existing;
+  if (unavailable.has(resource.serialized)) return void 0;
+  const source = resources.get(resource.serialized);
+  if (source === void 0) return void 0;
+  gate?.checkpoint();
+  try {
+    const image = source.mediaType === "image/svg+xml" ? await materializeSvgImage(source) : await materializeRasterImage(source);
+    try {
+      gate?.checkpoint();
+    } catch (error) {
+      image.close?.();
+      throw error;
+    }
+    images.set(resource.serialized, image);
+    return image;
+  } catch (error) {
+    gate?.checkpoint();
+    unavailable.add(resource.serialized);
+    return void 0;
+  }
+}
+__name(materializeOptional, "materializeOptional");
+async function materializeRasterImage(source) {
+  if (typeof globalThis.createImageBitmap !== "function") throw new TypeError("Raster-image resource materialization requires createImageBitmap.");
+  const image = await globalThis.createImageBitmap(imageBlob(source));
+  try {
+    return { image, intrinsicPixelSize: intrinsicPixelSize(image), mediaType: source.mediaType, ...source.mediaType === "image/png" ? { hasAlpha: pngHasAlpha(source.bytes) } : {}, close: /* @__PURE__ */ __name(() => image.close(), "close") };
+  } catch (error) {
+    image.close();
+    throw error;
+  }
+}
+__name(materializeRasterImage, "materializeRasterImage");
+function pngHasAlpha(bytes) {
+  const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+  if (bytes[25] === 4 || bytes[25] === 6) return true;
+  for (let offset = 8; offset + 12 <= bytes.length; ) {
+    const type = view.getUint32(offset + 4);
+    if (type === 1951551059) return true;
+    if (type === 1229209940 || type === 1229278788) break;
+    offset += view.getUint32(offset) + 12;
+  }
+  return false;
+}
+__name(pngHasAlpha, "pngHasAlpha");
+async function materializeSvgImage(source) {
+  if (typeof globalThis.Image !== "function" || typeof globalThis.URL?.createObjectURL !== "function" || typeof globalThis.URL.revokeObjectURL !== "function") throw new TypeError("SVG resource materialization requires browser image URLs.");
+  const url = globalThis.URL.createObjectURL(imageBlob(source));
+  try {
+    const image = await new Promise((resolve, reject) => {
+      const element = new globalThis.Image();
+      element.onload = () => resolve(element);
+      element.onerror = () => reject(new TypeError("The SVG image could not be decoded."));
+      element.src = url;
+    });
+    if (!Number.isSafeInteger(image.naturalWidth) || !Number.isSafeInteger(image.naturalHeight) || image.naturalWidth <= 0 || image.naturalHeight <= 0) throw new TypeError("The SVG decoder produced an invalid intrinsic pixel size.");
+    return { image, intrinsicPixelSize: { width: image.naturalWidth, height: image.naturalHeight }, mediaType: source.mediaType };
+  } finally {
+    globalThis.URL.revokeObjectURL(url);
+  }
+}
+__name(materializeSvgImage, "materializeSvgImage");
+function compositeKey(resource) {
+  return `${resource.svgResourceId.serialized}:${resource.rasterFallbackResourceId?.serialized ?? "none"}`;
+}
+__name(compositeKey, "compositeKey");
+function resourceKey(resource, colorEffect) {
+  return resource.type === "ResourceId" ? resource.serialized : colorEffect === void 0 ? compositeKey(resource) : resource.rasterFallbackResourceId?.serialized ?? "none";
+}
+__name(resourceKey, "resourceKey");
+function intrinsicPixelSize(image) {
+  if (!Number.isSafeInteger(image.width) || !Number.isSafeInteger(image.height) || image.width <= 0 || image.height <= 0) throw new TypeError("The raster-image decoder produced an invalid intrinsic pixel size.");
+  return { width: image.width, height: image.height };
+}
+__name(intrinsicPixelSize, "intrinsicPixelSize");
+function readRasterImagePixels(image) {
+  if (typeof globalThis.OffscreenCanvas !== "function") return void 0;
+  const canvas = new OffscreenCanvas(image.intrinsicPixelSize.width, image.intrinsicPixelSize.height);
+  const context = canvas.getContext("2d", { willReadFrequently: true });
+  if (context === null) return void 0;
+  context.imageSmoothingEnabled = false;
+  context.drawImage(image.image, 0, 0);
+  return context.getImageData(0, 0, canvas.width, canvas.height).data;
+}
+__name(readRasterImagePixels, "readRasterImagePixels");
+function prepareRasterImage(pixels, sourceSize, devicePixelSize, flipHorizontal, flipVertical) {
+  if (typeof globalThis.OffscreenCanvas !== "function") return void 0;
+  try {
+    const preparedCanvas = new OffscreenCanvas(devicePixelSize.width, devicePixelSize.height);
+    const preparedContext = preparedCanvas.getContext("2d");
+    if (preparedContext === null) return void 0;
+    const source = {
+      pixels,
+      offset: ((flipVertical ? (sourceSize.height - 1) * sourceSize.width : 0) + (flipHorizontal ? sourceSize.width - 1 : 0)) * 4,
+      columnStep: flipHorizontal ? -4 : 4,
+      rowStep: (flipVertical ? -1 : 1) * sourceSize.width * 4
+    };
+    const preparedImageData = preparedContext.createImageData(devicePixelSize.width, devicePixelSize.height);
+    if (usesOneAxisIntrinsicMagnification(sourceSize, devicePixelSize)) nearestNeighborRasterPixels(source, sourceSize, devicePixelSize, preparedImageData.data);
+    else if (devicePixelSize.width < sourceSize.width && devicePixelSize.height < sourceSize.height) averageReducedRasterPixels(source, sourceSize, devicePixelSize, preparedImageData.data);
+    else bilinearRasterPixels(source, sourceSize, devicePixelSize, preparedImageData.data);
+    preparedContext.putImageData(preparedImageData, 0, 0);
+    return preparedCanvas;
+  } catch {
+    return void 0;
+  }
+}
+__name(prepareRasterImage, "prepareRasterImage");
+function applyRasterColorEffectPlan(pixels, plan, mediaType, hasAlpha) {
+  if (plan.colorChange !== void 0) applyRasterColorChange(pixels, plan.colorChange, mediaType, hasAlpha);
+  if (plan.duotone !== void 0) applyRasterDuotone(pixels, plan.duotone.color1, plan.duotone.color2);
+  if (plan.colorMode !== void 0) applyRasterColorEffect(pixels, plan.colorMode);
+  if (plan.luminance !== void 0) applyRasterLuminance(pixels, plan.luminance.brightness, plan.luminance.contrast);
+}
+__name(applyRasterColorEffectPlan, "applyRasterColorEffectPlan");
+function applyRasterColorEffect(pixels, effect) {
+  const threshold = effect.kind === "biLevel" ? effect.threshold === 50000n ? 128 : Number(effect.threshold * 255n / 100000n) : 0;
+  for (let offset = 0; offset < pixels.length; offset += 4) {
+    const luminance = 77 * pixels[offset] + 151 * pixels[offset + 1] + 28 * pixels[offset + 2] >> 8;
+    const value = effect.kind === "grayscale" ? luminance : luminance >= threshold ? 255 : 0;
+    pixels[offset] = value;
+    pixels[offset + 1] = value;
+    pixels[offset + 2] = value;
+  }
+}
+__name(applyRasterColorEffect, "applyRasterColorEffect");
+function applyRasterColorChange(pixels, effect, mediaType, hasAlpha) {
+  const { from, to } = effect;
+  const sourceHasAlpha = hasAlpha ?? pixels.some((value, index) => index % 4 === 3 && value !== 255);
+  const replacementAlpha = colorChangeDestinationAlphaByte(effect.useAlpha ? effect.destinationAlpha ?? 100000n : 100000n);
+  if (from.red === to.red && from.green === to.green && from.blue === to.blue && (!effect.useAlpha || effect.destinationAlpha === void 0 || effect.destinationAlpha === 100000n)) return;
+  const destinationAlpha = !sourceHasAlpha && replacementAlpha === 0 ? 0 : void 0;
+  const tolerance = mediaType === "image/jpeg" ? 15 : mediaType === "image/png" ? 1 : mediaType === "image/bmp" ? 0 : 9;
+  const minRed = Math.max(0, from.red - tolerance);
+  const maxRed = Math.min(255, from.red + tolerance);
+  const minGreen = Math.max(0, from.green - tolerance);
+  const maxGreen = Math.min(255, from.green + tolerance);
+  const minBlue = Math.max(0, from.blue - tolerance);
+  const maxBlue = Math.min(255, from.blue + tolerance);
+  const destinationRed = destinationAlpha === 0 ? 0 : to.red;
+  const destinationGreen = destinationAlpha === 0 ? 0 : to.green;
+  const destinationBlue = destinationAlpha === 0 ? 0 : to.blue;
+  for (let offset = 0; offset < pixels.length; offset += 4) {
+    if (sourceHasAlpha && pixels[offset + 3] === from.blue) pixels[offset + 3] = replacementAlpha;
+    if (pixels[offset] >= minRed && pixels[offset] <= maxRed && pixels[offset + 1] >= minGreen && pixels[offset + 1] <= maxGreen && pixels[offset + 2] >= minBlue && pixels[offset + 2] <= maxBlue) {
+      pixels[offset] = destinationRed;
+      pixels[offset + 1] = destinationGreen;
+      pixels[offset + 2] = destinationBlue;
+      if (destinationAlpha !== void 0) pixels[offset + 3] = destinationAlpha;
+    }
+    if (pixels[offset + 3] === 0) pixels.fill(0, offset, offset + 3);
+  }
+}
+__name(applyRasterColorChange, "applyRasterColorChange");
+function colorChangeDestinationAlphaByte(value) {
+  const transparency = (100000n - value + 500n) / 1000n;
+  return Math.trunc(Number(100n - transparency) * 2.55);
+}
+__name(colorChangeDestinationAlphaByte, "colorChangeDestinationAlphaByte");
+function applyRasterDuotone(pixels, color1, color2) {
+  for (let offset = 0; offset < pixels.length; offset += 4) {
+    const luminance = 76 * pixels[offset] + 151 * pixels[offset + 1] + 29 * pixels[offset + 2] >> 8;
+    pixels[offset] = Math.floor(color2.red * luminance / 255) + Math.floor(color1.red * (255 - luminance) / 255);
+    pixels[offset + 1] = Math.floor(color2.green * luminance / 255) + Math.floor(color1.green * (255 - luminance) / 255);
+    pixels[offset + 2] = Math.floor(color2.blue * luminance / 255) + Math.floor(color1.blue * (255 - luminance) / 255);
+  }
+}
+__name(applyRasterDuotone, "applyRasterDuotone");
+function applyRasterLuminance(pixels, brightness, contrast) {
+  const lookup = rasterLuminanceLookupTable(brightness, contrast);
+  for (let offset = 0; offset < pixels.length; offset += 4) {
+    pixels[offset] = lookup[pixels[offset]];
+    pixels[offset + 1] = lookup[pixels[offset + 1]];
+    pixels[offset + 2] = lookup[pixels[offset + 2]];
+  }
+}
+__name(applyRasterLuminance, "applyRasterLuminance");
+function rasterLuminanceLookupTable(brightness, contrast) {
+  const brightnessPercent = Math.trunc(Number(brightness) / 1e3);
+  const contrastPercent = Math.trunc(Number(contrast) / 1e3);
+  const multiplier = contrastPercent >= 0 ? 128 / (128 - 1.27 * contrastPercent) : (128 + 1.27 * contrastPercent) / 128;
+  const offset = 2.55 * brightnessPercent;
+  const watermark = brightnessPercent === 70 && contrastPercent === -70;
+  const lookup = new Uint8Array(256);
+  for (let value = 0; value < lookup.length; value++) {
+    const raw = watermark ? value * multiplier + 50 * 2.55 + 128 - multiplier * 128 : (value + offset / 2 - 128) * multiplier + 128 + offset / 2;
+    lookup[value] = Math.min(255, Math.max(0, Math.floor(raw + 0.5)));
+  }
+  return lookup;
+}
+__name(rasterLuminanceLookupTable, "rasterLuminanceLookupTable");
+function rasterColorEffectPlanKey(value) {
+  if (value === void 0) return "none";
+  return [
+    value.colorChange === void 0 ? "" : `colorChange:${value.colorChange.from.red},${value.colorChange.from.green},${value.colorChange.from.blue}:${value.colorChange.to.red},${value.colorChange.to.green},${value.colorChange.to.blue}:${value.colorChange.destinationAlpha === void 0 ? "absent" : value.colorChange.destinationAlpha}:${value.colorChange.useAlpha}`,
+    value.duotone === void 0 ? "" : `duotone:${value.duotone.color1.red},${value.duotone.color1.green},${value.duotone.color1.blue}:${value.duotone.color2.red},${value.duotone.color2.green},${value.duotone.color2.blue}`,
+    value.colorMode === void 0 ? "" : value.colorMode.kind === "grayscale" ? "grayscale" : `biLevel:${value.colorMode.threshold}`,
+    value.luminance === void 0 ? "" : `luminance:${value.luminance.brightness}:${value.luminance.contrast}`
+  ].join("|");
+}
+__name(rasterColorEffectPlanKey, "rasterColorEffectPlanKey");
+function usesOneAxisIntrinsicMagnification(sourceSize, devicePixelSize) {
+  return devicePixelSize.width === sourceSize.width && devicePixelSize.height > sourceSize.height || devicePixelSize.height === sourceSize.height && devicePixelSize.width > sourceSize.width;
+}
+__name(usesOneAxisIntrinsicMagnification, "usesOneAxisIntrinsicMagnification");
+function nearestNeighborRasterPixels(source, sourceSize, devicePixelSize, scaled) {
+  for (let y = 0; y < devicePixelSize.height; y++) {
+    const sourceY = Math.min(Math.floor((y + 0.5) * sourceSize.height / devicePixelSize.height), sourceSize.height - 1);
+    for (let x = 0; x < devicePixelSize.width; x++) {
+      const sourceX = Math.min(Math.floor((x + 0.5) * sourceSize.width / devicePixelSize.width), sourceSize.width - 1);
+      const sourceOffset = source.offset + sourceY * source.rowStep + sourceX * source.columnStep;
+      const targetOffset = (y * devicePixelSize.width + x) * 4;
+      scaled[targetOffset] = source.pixels[sourceOffset];
+      scaled[targetOffset + 1] = source.pixels[sourceOffset + 1];
+      scaled[targetOffset + 2] = source.pixels[sourceOffset + 2];
+      scaled[targetOffset + 3] = source.pixels[sourceOffset + 3];
+    }
+  }
+}
+__name(nearestNeighborRasterPixels, "nearestNeighborRasterPixels");
+function averageReducedRasterPixels(source, sourceSize, devicePixelSize, scaled) {
+  for (let y = 0; y < devicePixelSize.height; y++) {
+    const top = Math.floor(y * sourceSize.height / devicePixelSize.height);
+    const bottom = Math.floor((y + 1) * sourceSize.height / devicePixelSize.height);
+    for (let x = 0; x < devicePixelSize.width; x++) {
+      const left = Math.floor(x * sourceSize.width / devicePixelSize.width);
+      const right = Math.floor((x + 1) * sourceSize.width / devicePixelSize.width);
+      const count = (right - left) * (bottom - top);
+      const destination = (y * devicePixelSize.width + x) * 4;
+      for (let channel = 0; channel < 4; channel++) {
+        let sum = 0;
+        for (let row = top; row < bottom; row++) {
+          for (let column = left; column < right; column++) sum += source.pixels[source.offset + row * source.rowStep + column * source.columnStep + channel];
+        }
+        scaled[destination + channel] = Math.floor(sum / count);
+      }
+    }
+  }
+}
+__name(averageReducedRasterPixels, "averageReducedRasterPixels");
+function bilinearRasterPixels(source, sourceSize, devicePixelSize, scaled) {
+  const rowBytes = devicePixelSize.width * 4;
+  let primaryRow = new Uint8ClampedArray(rowBytes);
+  let secondaryRow = new Uint8ClampedArray(rowBytes);
+  let primaryY = -1;
+  let secondaryY = -1;
+  const verticalStep = sourceSize.height / devicePixelSize.height;
+  let coordinate = 0;
+  for (let y = 0; y < devicePixelSize.height; y++) {
+    const primary = Math.floor(coordinate);
+    const secondary = Math.min(primary + 1, sourceSize.height - 1);
+    const fraction = coordinate - primary;
+    if (primary !== primaryY) {
+      if (primary === secondaryY) {
+        const previousRow = primaryRow;
+        primaryRow = secondaryRow;
+        secondaryRow = previousRow;
+        secondaryY = primaryY;
+      } else {
+        horizontallySampleRasterRow(source, sourceSize.width, primary, primaryRow);
+      }
+      primaryY = primary;
+    }
+    if (secondary !== primary && secondary !== secondaryY) {
+      horizontallySampleRasterRow(source, sourceSize.width, secondary, secondaryRow);
+      secondaryY = secondary;
+    }
+    const adjacentRow = secondary === primary ? primaryRow : secondaryRow;
+    const targetOffset = y * rowBytes;
+    for (let offset = 0; offset < rowBytes; offset++) scaled[targetOffset + offset] = Math.trunc(primaryRow[offset] * (1 - fraction) + adjacentRow[offset] * fraction);
+    coordinate += verticalStep;
+  }
+}
+__name(bilinearRasterPixels, "bilinearRasterPixels");
+function horizontallySampleRasterRow(source, sourceWidth, sourceY, scaled) {
+  const horizontalStep = sourceWidth / (scaled.length / 4);
+  let coordinate = 0;
+  for (let offset = 0; offset < scaled.length; offset += 4) {
+    const primary = Math.floor(coordinate);
+    const secondary = Math.min(primary + 1, sourceWidth - 1);
+    const fraction = coordinate - primary;
+    const sourceOffset = source.offset + sourceY * source.rowStep + primary * source.columnStep;
+    const adjacentOffset = source.offset + sourceY * source.rowStep + secondary * source.columnStep;
+    for (let channel = 0; channel < 4; channel++) scaled[offset + channel] = Math.trunc(source.pixels[sourceOffset + channel] * (1 - fraction) + source.pixels[adjacentOffset + channel] * fraction);
+    coordinate += horizontalStep;
+  }
+}
+__name(horizontallySampleRasterRow, "horizontallySampleRasterRow");
+function imageBlob(source) {
+  const copy = new Uint8Array(source.bytes.byteLength);
+  copy.set(source.bytes);
+  return new Blob([copy.buffer], { type: source.mediaType });
+}
+__name(imageBlob, "imageBlob");
+
+// packages/canvas/src/canvas-axis-aligned-transform.ts
+function positiveAxisAlignedTransform(target) {
+  const transform = target.getTransform?.();
+  if (transform === void 0 || transform.a <= 0 || transform.d <= 0 || transform.b !== 0 || transform.c !== 0 || !Number.isFinite(transform.a) || !Number.isFinite(transform.d) || !Number.isFinite(transform.e) || !Number.isFinite(transform.f)) return void 0;
+  return transform;
+}
+__name(positiveAxisAlignedTransform, "positiveAxisAlignedTransform");
+function rectangleForDeviceBounds(transform, left, top, deviceWidth, deviceHeight) {
+  const x = (left - transform.e) / transform.a;
+  const y = (top - transform.f) / transform.d;
+  const width = deviceWidth / transform.a;
+  const height = deviceHeight / transform.d;
+  if (!Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) return void 0;
+  return { x, y, width, height };
+}
+__name(rectangleForDeviceBounds, "rectangleForDeviceBounds");
+
+// packages/canvas/src/canvas-physical-clips.ts
+function replayPhysicalClips(target, clips) {
+  for (const clip of clips ?? []) {
+    target.beginPath();
+    const r = clip.rectangle, t = clip.transform;
+    if (t === void 0) target.rect(r.x, r.y, r.width, r.height);
+    else {
+      const x = t.a * r.x + t.c * r.y + t.e, y = t.b * r.x + t.d * r.y + t.f;
+      target.moveTo(x, y);
+      target.lineTo(x + t.a * r.width, y + t.b * r.width);
+      target.lineTo(x + t.a * r.width + t.c * r.height, y + t.b * r.width + t.d * r.height);
+      target.lineTo(x + t.c * r.height, y + t.d * r.height);
+      target.closePath();
+    }
+    target.clip();
+  }
+}
+__name(replayPhysicalClips, "replayPhysicalClips");
+
+// packages/canvas/src/canvas-native-text.ts
+var rasters = /* @__PURE__ */ new WeakMap();
+var rasterPoolSize = 4;
+function drawNativeText(target, operation, color) {
+  const device = target.getTransform();
+  const t = { a: device.a, b: device.b, c: device.c, d: device.d, e: device.e, f: operation.strokeWidth === void 0 ? Math.floor(device.f) : device.f };
+  const determinant = t.a * t.d - t.b * t.c;
+  if (determinant === 0) return;
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (let corner = 0; corner < 4; corner++) {
+    const x = corner & 1 ? operation.inkRight : -operation.inkLeft;
+    const y = corner & 2 ? operation.descent : -operation.ascent;
+    const transformedX = t.a * x + t.c * y + t.e;
+    const transformedY = t.b * x + t.d * y + t.f;
+    minX = Math.min(minX, transformedX);
+    minY = Math.min(minY, transformedY);
+    maxX = Math.max(maxX, transformedX);
+    maxY = Math.max(maxY, transformedY);
+  }
+  const left = Math.floor(minX) - 1;
+  const top = Math.floor(minY) - 1;
+  const width = Math.ceil(maxX) - left + 1;
+  const height = Math.ceil(maxY) - top + 1;
+  let pool = rasters.get(target);
+  if (pool === void 0) {
+    pool = [];
+    rasters.set(target, pool);
+  }
+  const rasterWidth = width * 4;
+  const rasterHeight = height * 4;
+  let index = 0;
+  while (index < pool.length && (pool[index].canvas.width !== rasterWidth || pool[index].canvas.height !== rasterHeight)) index++;
+  let retained;
+  if (index < pool.length) retained = pool[index];
+  else if (pool.length < rasterPoolSize) {
+    const canvas2 = document.createElement("canvas");
+    retained = { canvas: canvas2, context: canvas2.getContext("2d") };
+    pool.push(retained);
+  } else {
+    index = pool.length - 1;
+    retained = pool[index];
+  }
+  for (; index > 0; index--) pool[index] = pool[index - 1];
+  pool[0] = retained;
+  const { canvas, context: raster } = retained;
+  const resized = canvas.width !== rasterWidth || canvas.height !== rasterHeight;
+  if (canvas.width !== rasterWidth) canvas.width = rasterWidth;
+  if (canvas.height !== rasterHeight) canvas.height = rasterHeight;
+  raster.setTransform(1, 0, 0, 1, 0, 0);
+  if (!resized) raster.clearRect(0, 0, rasterWidth, rasterHeight);
+  raster.setTransform(t.a * 4, t.b * 4, t.c * 4, t.d * 4, (t.e - left) * 4, (t.f - top) * 4);
+  raster.font = operation.font;
+  raster.fontKerning = operation.kerning;
+  raster.letterSpacing = operation.letterSpacing;
+  raster.direction = operation.direction;
+  raster.textAlign = "left";
+  raster.textBaseline = "alphabetic";
+  canvas.lang = operation.language;
+  raster.fillStyle = color;
+  raster.fillText(operation.text, 0, 0);
+  if (operation.strokeWidth !== void 0) {
+    raster.strokeStyle = color;
+    raster.lineWidth = operation.strokeWidth;
+    raster.lineJoin = "round";
+    raster.strokeText(operation.text, 0, 0);
+  }
+  target.transform(device.d / determinant, -device.b / determinant, -device.c / determinant, device.a / determinant, (device.c * device.f - device.d * device.e) / determinant, (device.b * device.e - device.a * device.f) / determinant);
+  target.imageSmoothingEnabled = true;
+  target.imageSmoothingQuality = "high";
+  target.drawImage(canvas, left, top, width, height);
+}
+__name(drawNativeText, "drawNativeText");
+
+// packages/canvas/src/canvas-target-pixel-alignment.ts
+function fillTargetPixelAlignedRectangle(target, rectangle) {
+  const aligned = targetPixelAlignedRectangleFor(target, rectangle);
+  target.fillRect(aligned?.x ?? rectangle.x, aligned?.y ?? rectangle.y, aligned?.width ?? rectangle.width, aligned?.height ?? rectangle.height);
+}
+__name(fillTargetPixelAlignedRectangle, "fillTargetPixelAlignedRectangle");
+function targetPixelAlignedRectangleFor(target, rectangle) {
+  const transform = positiveAxisAlignedTransform(target);
+  if (transform === void 0 || !Number.isFinite(rectangle.x) || !Number.isFinite(rectangle.y) || !Number.isFinite(rectangle.width) || !Number.isFinite(rectangle.height) || rectangle.width <= 0 || rectangle.height <= 0) return void 0;
+  const deviceLeft = rectangle.x * transform.a + transform.e;
+  const deviceTop = rectangle.y * transform.d + transform.f;
+  const deviceRight = (rectangle.x + rectangle.width) * transform.a + transform.e;
+  const deviceBottom = (rectangle.y + rectangle.height) * transform.d + transform.f;
+  if (!Number.isFinite(deviceLeft) || !Number.isFinite(deviceTop) || !Number.isFinite(deviceRight) || !Number.isFinite(deviceBottom)) return void 0;
+  const left = roundHalfAwayFromZero(deviceLeft);
+  const top = roundHalfAwayFromZero(deviceTop);
+  const right = roundHalfAwayFromZero(deviceRight);
+  const bottom = roundHalfAwayFromZero(deviceBottom);
+  if (!Number.isSafeInteger(left) || !Number.isSafeInteger(top) || !Number.isSafeInteger(right) || !Number.isSafeInteger(bottom)) return void 0;
+  return rectangleForDeviceBounds(transform, left, top, right - left, bottom - top);
+}
+__name(targetPixelAlignedRectangleFor, "targetPixelAlignedRectangleFor");
+
+// packages/canvas/src/canvas-positioned-text-replay.ts
+function drawPositionedText(target, command) {
+  if (command.clip !== null || command.transform !== void 0 || command.physicalClips !== void 0) target.save();
+  try {
+    replayPhysicalClips(target, command.physicalClips);
+    if (command.transform !== void 0) target.transform(command.transform.a, command.transform.b, command.transform.c, command.transform.d, command.transform.e, command.transform.f);
+    if (command.clip !== null) {
+      target.beginPath();
+      target.rect(command.clip.x, command.clip.y, command.clip.width, command.clip.height);
+      target.clip();
+    }
+    for (const shading of command.shadings) {
+      target.fillStyle = shading.color;
+      target.fillRect(shading.rectangle.x, shading.rectangle.y, shading.rectangle.width, shading.rectangle.height);
+    }
+    for (const highlight of command.highlights) {
+      target.fillStyle = highlight.color;
+      fillTargetPixelAlignedRectangle(target, highlight.rectangle);
+    }
+    for (const shadow of command.shadows ?? []) {
+      target.fillStyle = shadow.color;
+      target.fillRect(shadow.rectangle.x, shadow.rectangle.y, shadow.rectangle.width, shadow.rectangle.height);
+    }
+    for (const border of command.borders) {
+      target.fillStyle = border.color;
+      target.fillRect(border.rectangle.x, border.rectangle.y, border.rectangle.width, border.rectangle.height);
+    }
+    if (command.effectPasses !== void 0) {
+      for (const pass of command.effectPasses) {
+        target.save();
+        try {
+          if (pass.clip !== void 0) {
+            target.beginPath();
+            target.rect(pass.clip.x, pass.clip.y, pass.clip.width, pass.clip.height);
+            target.clip();
+          }
+          target.fillStyle = pass.color;
+          fillGlyphRun(target, pass.glyphRun, pass.layoutOffset, pass.color);
+          for (const underline of pass.underlines) fillUnderline(target, underline, pass.color, pass.layoutOffset);
+          for (const strike of pass.strikes) fillStrike(target, strike, pass.color, pass.layoutOffset);
+        } finally {
+          target.restore();
+        }
+      }
+    }
+    for (const run of command.glyphRuns) {
+      target.fillStyle = run.color;
+      fillGlyphRun(target, run, noPaintOffset, run.color);
+    }
+    for (const underline of command.underlines) {
+      fillUnderline(target, underline, underline.color, noPaintOffset);
+    }
+    for (const strike of command.strikes) {
+      fillStrike(target, strike, strike.color, noPaintOffset);
+    }
+    for (const emphasisMark of command.emphasisMarks) {
+      target.fillStyle = emphasisMark.color;
+      target.beginPath();
+      for (const operation of emphasisMark.path) replayPathOperation(target, operation, noPaintOffset);
+      target.fill();
+    }
+  } finally {
+    if (command.clip !== null || command.transform !== void 0 || command.physicalClips !== void 0) target.restore();
+  }
+}
+__name(drawPositionedText, "drawPositionedText");
+var noPaintOffset = { x: 0, y: 0 };
+function fillGlyphRun(target, run, offset, color) {
+  for (const glyph of run.glyphs) {
+    for (const operation of glyph.path) {
+      target.save();
+      try {
+        target.transform(operation.a, operation.b, operation.c, operation.d, operation.x + offset.x, operation.y + offset.y);
+        drawNativeText(target, operation, color);
+      } finally {
+        target.restore();
+      }
+    }
+  }
+}
+__name(fillGlyphRun, "fillGlyphRun");
+function fillUnderline(target, underline, color, offset) {
+  target.fillStyle = color;
+  if (underline.path === void 0) {
+    target.fillRect(underline.rectangle.x + offset.x, underline.rectangle.y + offset.y, underline.rectangle.width, underline.rectangle.height);
+    return;
+  }
+  target.beginPath();
+  for (const operation of underline.path) replayPathOperation(target, operation, offset);
+  if (underline.strokeWidth === void 0) target.fill();
+  else {
+    target.strokeStyle = color;
+    target.lineWidth = underline.strokeWidth;
+    target.lineJoin = "miter";
+    target.lineCap = "butt";
+    target.stroke();
+  }
+}
+__name(fillUnderline, "fillUnderline");
+function fillStrike(target, strike, color, offset) {
+  target.fillStyle = color;
+  target.fillRect(strike.rectangle.x + offset.x, strike.rectangle.y + offset.y, strike.rectangle.width, strike.rectangle.height);
+}
+__name(fillStrike, "fillStrike");
+function replayPathOperation(target, operation, offset) {
+  switch (operation.kind) {
+    case "moveTo":
+      target.moveTo(operation.x + offset.x, operation.y + offset.y);
+      break;
+    case "lineTo":
+      target.lineTo(operation.x + offset.x, operation.y + offset.y);
+      break;
+    case "quadraticCurveTo":
+      target.quadraticCurveTo(operation.controlX + offset.x, operation.controlY + offset.y, operation.x + offset.x, operation.y + offset.y);
+      break;
+    case "bezierCurveTo":
+      target.bezierCurveTo(operation.control1X + offset.x, operation.control1Y + offset.y, operation.control2X + offset.x, operation.control2Y + offset.y, operation.x + offset.x, operation.y + offset.y);
+      break;
+    case "closePath":
+      target.closePath();
+      break;
+  }
+}
+__name(replayPathOperation, "replayPathOperation");
+
+// packages/canvas/src/canvas-effect-surface.ts
+var surfaces = /* @__PURE__ */ new WeakMap();
+function effectSurfaceFor(target, width, height) {
+  let surface = surfaces.get(target);
+  if (surface === void 0) {
+    const canvas2 = document.createElement("canvas");
+    surface = { canvas: canvas2, context: canvas2.getContext("2d") };
+    surfaces.set(target, surface);
+  }
+  const { canvas, context } = surface;
+  const resized = canvas.width !== width || canvas.height !== height;
+  if (canvas.width !== width) canvas.width = width;
+  if (canvas.height !== height) canvas.height = height;
+  if (!resized) context.reset();
+  return surface;
+}
+__name(effectSurfaceFor, "effectSurfaceFor");
+
+// packages/canvas/src/canvas-soft-edge-replay.ts
+var retainedWorkspace;
+function drawSoftEdgeRaster(target, rectangle, radius, paint) {
+  const transform = target.getTransform();
+  const sx = 2 * Math.hypot(transform.a, transform.b), sy = 2 * Math.hypot(transform.c, transform.d);
+  const width = Math.ceil(rectangle.width * sx), height = Math.ceil(rectangle.height * sy);
+  if (width < 1 || height < 1) return;
+  const { canvas, context: raster } = effectSurfaceFor(target, width, height);
+  raster.setTransform(sx, 0, 0, sy, -rectangle.x * sx, -rectangle.y * sy);
+  paint(raster);
+  const pixels = raster.getImageData(0, 0, width, height);
+  const workspace = maskWorkspaceFor(width * height, Math.max(width, height) + 1);
+  const rx = Math.ceil(radius * sx), ry = Math.ceil(radius * sy);
+  erodedMask(pixels.data, width, height, rx, ry, workspace.horizontal, workspace.mask);
+  blurMask(workspace.mask, workspace.blur, width, height, rx, false, workspace.sums, workspace.weighted);
+  blurMask(workspace.blur, workspace.mask, width, height, ry, true, workspace.sums, workspace.weighted);
+  for (let index = 0; index < width * height; index++) pixels.data[index * 4 + 3] = Math.round(pixels.data[index * 4 + 3] * workspace.mask[index]);
+  raster.putImageData(pixels, 0, 0);
+  target.drawImage(canvas, rectangle.x, rectangle.y, rectangle.width, rectangle.height);
+}
+__name(drawSoftEdgeRaster, "drawSoftEdgeRaster");
+function maskWorkspaceFor(pixels, prefix) {
+  const previous = retainedWorkspace;
+  if (previous !== void 0 && previous.mask.length >= pixels && previous.sums.length >= prefix) return previous;
+  const growPixels = previous === void 0 || previous.mask.length < pixels;
+  const growPrefix = previous === void 0 || previous.sums.length < prefix;
+  const workspace = {
+    horizontal: growPixels ? new Uint8Array(pixels) : previous.horizontal,
+    mask: growPixels ? new Float64Array(pixels) : previous.mask,
+    blur: growPixels ? new Float64Array(pixels) : previous.blur,
+    sums: growPrefix ? new Float64Array(prefix) : previous.sums,
+    weighted: growPrefix ? new Float64Array(prefix) : previous.weighted
+  };
+  retainedWorkspace = workspace;
+  return workspace;
+}
+__name(maskWorkspaceFor, "maskWorkspaceFor");
+function erodedMask(pixels, width, height, rx, ry, horizontal, result) {
+  for (let y = 0; y < height; y++) {
+    let nearest = -1;
+    for (let x = 0; x < width; x++) {
+      const index = y * width + x;
+      if (pixels[index * 4 + 3] === 0) nearest = x;
+      horizontal[index] = x - nearest > rx ? 1 : 0;
+    }
+    nearest = width;
+    for (let x = width - 1; x >= 0; x--) {
+      const index = y * width + x;
+      if (pixels[index * 4 + 3] === 0) nearest = x;
+      if (nearest - x <= rx) horizontal[index] = 0;
+    }
+  }
+  for (let x = 0; x < width; x++) {
+    let nearest = -1;
+    for (let y = 0; y < height; y++) {
+      const index = y * width + x;
+      if (horizontal[index] === 0) nearest = y;
+      result[index] = y - nearest > ry ? 1 : 0;
+    }
+    nearest = height;
+    for (let y = height - 1; y >= 0; y--) {
+      const index = y * width + x;
+      if (horizontal[index] === 0) nearest = y;
+      if (nearest - y <= ry) result[index] = 0;
+    }
+  }
+}
+__name(erodedMask, "erodedMask");
+function blurMask(source, result, width, height, radius, vertical, sums, weighted) {
+  const length = vertical ? height : width, lines = vertical ? width : height;
+  const divisor = (radius + 1) ** 2;
+  for (let line = 0; line < lines; line++) {
+    const offset = vertical ? line : line * width, stride = vertical ? width : 1;
+    for (let i = 0; i < length; i++) {
+      const value = source[offset + i * stride];
+      sums[i + 1] = sums[i] + value;
+      weighted[i + 1] = weighted[i] + i * value;
+    }
+    for (let i = 0; i < length; i++) {
+      const left = Math.max(0, i - radius), right = Math.min(length, i + radius + 1);
+      const before = (radius + 1 - i) * (sums[i + 1] - sums[left]) + weighted[i + 1] - weighted[left];
+      const after = (radius + 1 + i) * (sums[right] - sums[i + 1]) - weighted[right] + weighted[i + 1];
+      result[offset + i * stride] = (before + after) / divisor;
+    }
+  }
+}
+__name(blurMask, "blurMask");
+
+// packages/canvas/src/canvas-shadow-replay.ts
+var ShadowBounds = class {
+  constructor(device, transform) {
+    this.device = device;
+    this.transform = transform;
+  }
+  device;
+  transform;
+  static {
+    __name(this, "ShadowBounds");
+  }
+  #left = Infinity;
+  #top = Infinity;
+  #right = -Infinity;
+  #bottom = -Infinity;
+  includeRectangle(left, top, width, height, padding = 0) {
+    const { device, transform } = this;
+    for (let corner = 0; corner < 4; corner++) {
+      const x = corner & 1 ? left + width + padding : left - padding;
+      const y = corner & 2 ? top + height + padding : top - padding;
+      const sx = transform === void 0 ? x : transform.a * x + transform.c * y + transform.e;
+      const sy = transform === void 0 ? y : transform.b * x + transform.d * y + transform.f;
+      const dx = device.a * sx + device.c * sy + device.e;
+      const dy = device.b * sx + device.d * sy + device.f;
+      this.#left = Math.min(this.#left, dx);
+      this.#top = Math.min(this.#top, dy);
+      this.#right = Math.max(this.#right, dx);
+      this.#bottom = Math.max(this.#bottom, dy);
+    }
+  }
+  get rectangle() {
+    if (this.#left === Infinity) return void 0;
+    const left = Math.floor(this.#left) - 2, top = Math.floor(this.#top) - 2;
+    return { left, top, width: Math.ceil(this.#right) - left + 2, height: Math.ceil(this.#bottom) - top + 2 };
+  }
+};
+function drawShadowedContent(target, shadow, bounds, clip, paint) {
+  const { device } = bounds;
+  const determinant = device.a * device.d - device.b * device.c;
+  if (determinant === 0) return;
+  const rectangle = bounds.rectangle;
+  if (rectangle === void 0) return;
+  const { left, top, width, height } = rectangle;
+  const { canvas, context: raster } = effectSurfaceFor(target, width, height);
+  raster.setTransform(device.a, device.b, device.c, device.d, device.e - left, device.f - top);
+  paint(raster);
+  target.save();
+  try {
+    if (clip !== null) {
+      target.beginPath();
+      target.rect(clip.x, clip.y, clip.width, clip.height);
+      target.clip();
+    }
+    target.transform(device.d / determinant, -device.b / determinant, -device.c / determinant, device.a / determinant, (device.c * device.f - device.d * device.e) / determinant, (device.b * device.e - device.a * device.f) / determinant);
+    target.shadowColor = `${shadow.color}${Math.round(shadow.opacity * 255).toString(16).padStart(2, "0")}`;
+    target.shadowBlur = shadow.blurRadius * Math.max(Math.hypot(device.a, device.b), Math.hypot(device.c, device.d)) * Math.sqrt(2 / 3);
+    target.shadowOffsetX = device.a * shadow.offsetX + device.c * shadow.offsetY;
+    target.shadowOffsetY = device.b * shadow.offsetX + device.d * shadow.offsetY;
+    target.drawImage(canvas, left, top, width, height);
+  } finally {
+    target.restore();
+  }
+}
+__name(drawShadowedContent, "drawShadowedContent");
+
+// packages/canvas/src/canvas-raster-replay.ts
+function drawInlineRasterImage(target, command, resources) {
+  if (command.shadow !== void 0) {
+    drawShadowedRaster(target, command, resources);
+    return;
+  }
+  const clip = command.clip ?? null;
+  const transform = command.transform;
+  const opacity = command.opacity;
+  const scoped = clip !== null || transform !== void 0 || opacity !== 1 || command.physicalClips !== void 0;
+  const quality = target.imageSmoothingQuality;
+  if (scoped) target.save();
+  try {
+    replayPhysicalClips(target, command.physicalClips);
+    if (opacity !== 1) target.globalAlpha *= opacity;
+    if (clip !== null) {
+      target.beginPath();
+      target.rect(clip.x, clip.y, clip.width, clip.height);
+      target.clip();
+    }
+    if (transform !== void 0) target.transform(transform.a, transform.b, transform.c, transform.d, transform.e, transform.f);
+    if (quality !== void 0 && usesRasterMinification(target, command)) target.imageSmoothingQuality = "high";
+    if (command.softEdgeRadius === void 0) drawInlineRasterImageUnclipped(target, command, resources);
+    else {
+      const { sampling, ...softened } = command;
+      drawSoftEdgeRaster(target, command.rectangle, command.softEdgeRadius, (raster) => drawInlineRasterImageUnclipped(raster, softened, resources));
+    }
+  } finally {
+    if (quality !== void 0) target.imageSmoothingQuality = quality;
+    if (scoped) target.restore();
+  }
+}
+__name(drawInlineRasterImage, "drawInlineRasterImage");
+function usesRasterMinification(target, command) {
+  const source = command.sampling?.intrinsicPixelSize;
+  const transform = target.getTransform?.();
+  if (source === void 0 || transform === void 0) return false;
+  const crop = command.sourceCrop;
+  const sourceWidth = source.width * (crop === void 0 ? 1 : Number(100000n - crop.left - crop.right) / 1e5);
+  const sourceHeight = source.height * (crop === void 0 ? 1 : Number(100000n - crop.top - crop.bottom) / 1e5);
+  const width = command.rectangle.width * Math.hypot(transform.a, transform.b);
+  const height = command.rectangle.height * Math.hypot(transform.c, transform.d);
+  return width <= sourceWidth && height <= sourceHeight && (width < sourceWidth * 0.6 || height < sourceHeight * 0.6);
+}
+__name(usesRasterMinification, "usesRasterMinification");
+function drawInlineRasterImageUnclipped(target, command, resources) {
+  const colorEffect = command.colorEffect;
+  const sourceCrop = command.sourceCrop;
+  if (sourceCrop !== void 0 && (sourceCrop.left !== 0n || sourceCrop.right !== 0n || sourceCrop.top !== 0n || sourceCrop.bottom !== 0n)) {
+    const crop = croppedRasterRectangleFor(command, resources);
+    if (crop === void 0) return;
+    const previousImageSmoothing2 = target.imageSmoothingEnabled;
+    const useIntrinsicPixelGrid = intrinsicPixelGridMagnification(rasterReplayProjection(target, command), command);
+    if (useIntrinsicPixelGrid) target.imageSmoothingEnabled = false;
+    try {
+      const image = resolveReplayRasterImage(command, resources);
+      if (image === void 0) return;
+      target.drawImage(image, crop.source.x, crop.source.y, crop.source.width, crop.source.height, crop.destination.x, crop.destination.y, crop.destination.width, crop.destination.height);
+    } finally {
+      if (useIntrinsicPixelGrid) target.imageSmoothingEnabled = previousImageSmoothing2;
+    }
+    return;
+  }
+  const projection = rasterReplayProjection(target, command);
+  const intrinsicRectangle = intrinsicPixelGridMagnification(projection, command);
+  if (intrinsicRectangle !== void 0) {
+    const previousImageSmoothing2 = target.imageSmoothingEnabled;
+    target.imageSmoothingEnabled = false;
+    try {
+      const image = resolveReplayRasterImage(command, resources);
+      if (image === void 0) return;
+      target.drawImage(image, intrinsicRectangle.x, intrinsicRectangle.y, intrinsicRectangle.width, intrinsicRectangle.height);
+    } finally {
+      target.imageSmoothingEnabled = previousImageSmoothing2;
+    }
+    return;
+  }
+  const preparedReplay = preparedMixedAxisRasterReplay(projection) ?? preparedFractionalRasterReplay(projection);
+  if (preparedReplay === void 0) {
+    const image = resolveReplayRasterImage(command, resources);
+    if (image === void 0) return;
+    target.drawImage(image, command.rectangle.x, command.rectangle.y, command.rectangle.width, command.rectangle.height);
+    return;
+  }
+  let prepared = colorEffect === void 0 ? void 0 : resources.resolvePreparedRasterImage(command.resource, preparedReplay.devicePixelSize, colorEffect, preparedReplay.flipHorizontal, preparedReplay.flipVertical);
+  if (colorEffect !== void 0 && prepared === void 0) return;
+  const previousImageSmoothing = target.imageSmoothingEnabled;
+  let smoothingChanged = false;
+  target.save();
+  try {
+    if (preparedReplay.clipToRectangle) {
+      target.beginPath();
+      target.rect(command.rectangle.x, command.rectangle.y, command.rectangle.width, command.rectangle.height);
+      target.clip();
+    }
+    if (colorEffect === void 0) prepared = resources.resolvePreparedRasterImage(command.resource, preparedReplay.devicePixelSize, void 0, preparedReplay.flipHorizontal, preparedReplay.flipVertical);
+    if (prepared !== void 0) {
+      target.imageSmoothingEnabled = false;
+      smoothingChanged = true;
+      drawPreparedRasterImage(target, prepared, preparedReplay);
+    }
+  } finally {
+    if (smoothingChanged) target.imageSmoothingEnabled = previousImageSmoothing;
+    target.restore();
+  }
+  if (prepared === void 0) {
+    const image = resources.resolveRasterImage(command.resource);
+    if (image === void 0) return;
+    target.drawImage(image, command.rectangle.x, command.rectangle.y, command.rectangle.width, command.rectangle.height);
+  }
+}
+__name(drawInlineRasterImageUnclipped, "drawInlineRasterImageUnclipped");
+function resolveReplayRasterImage(command, resources) {
+  if (command.colorEffect === void 0) return resources.resolveRasterImage(command.resource);
+  const size = command.sampling?.intrinsicPixelSize ?? resources.resolveRasterImageIntrinsicPixelSize?.(command.resource, command.colorEffect);
+  return size === void 0 ? void 0 : resources.resolvePreparedRasterImage(command.resource, size, command.colorEffect);
+}
+__name(resolveReplayRasterImage, "resolveReplayRasterImage");
+function drawPreparedRasterImage(target, image, replay) {
+  const { rectangle, flipHorizontal, flipVertical } = replay;
+  if (flipHorizontal || flipVertical) target.transform(flipHorizontal ? -1 : 1, 0, 0, flipVertical ? -1 : 1, flipHorizontal ? 2 * rectangle.x + rectangle.width : 0, flipVertical ? 2 * rectangle.y + rectangle.height : 0);
+  target.drawImage(image, rectangle.x, rectangle.y, rectangle.width, rectangle.height);
+}
+__name(drawPreparedRasterImage, "drawPreparedRasterImage");
+function croppedRasterRectangleFor(command, resources) {
+  const crop = command.sourceCrop;
+  if (crop === void 0) return void 0;
+  const size = command.sampling?.intrinsicPixelSize ?? resources.resolveRasterImageIntrinsicPixelSize?.(command.resource, command.colorEffect);
+  if (size === void 0 || !Number.isSafeInteger(size.width) || !Number.isSafeInteger(size.height) || size.width <= 0 || size.height <= 0) return void 0;
+  const horizontal = croppedAxis(crop.left, 100000n - crop.right, size.width, command.rectangle.x, command.rectangle.width);
+  const vertical = croppedAxis(crop.top, 100000n - crop.bottom, size.height, command.rectangle.y, command.rectangle.height);
+  if (horizontal === void 0 || vertical === void 0) return void 0;
+  return {
+    source: { x: horizontal.sourceStart, y: vertical.sourceStart, width: horizontal.sourceLength, height: vertical.sourceLength },
+    destination: { x: horizontal.destinationStart, y: vertical.destinationStart, width: horizontal.destinationLength, height: vertical.destinationLength }
+  };
+}
+__name(croppedRasterRectangleFor, "croppedRasterRectangleFor");
+function croppedAxis(start, end, intrinsicLength, destinationStart, destinationLength) {
+  if (end <= start || !Number.isFinite(destinationStart) || !Number.isFinite(destinationLength) || destinationLength <= 0) return void 0;
+  const clippedStart = start < 0n ? 0n : start;
+  const clippedEnd = end > 100000n ? 100000n : end;
+  if (clippedEnd <= clippedStart) return void 0;
+  const sourceStart = intrinsicLength * boundedRatio(clippedStart, 100000n);
+  const sourceLength = intrinsicLength * boundedRatio(clippedEnd - clippedStart, 100000n);
+  if (!Number.isFinite(sourceStart) || !Number.isFinite(sourceLength) || sourceLength <= 0) return void 0;
+  if (clippedStart === start && clippedEnd === end) return { sourceStart, sourceLength, destinationStart, destinationLength };
+  const requestedLength = end - start;
+  const destinationOffset = destinationLength * boundedRatio(clippedStart - start, requestedLength);
+  const clippedDestinationLength = positiveFiniteProduct(destinationLength, boundedRatio(clippedEnd - clippedStart, requestedLength));
+  const clippedDestinationStart = destinationStart + destinationOffset;
+  if (!Number.isFinite(clippedDestinationStart) || clippedDestinationLength === void 0) return void 0;
+  return { sourceStart, sourceLength, destinationStart: clippedDestinationStart, destinationLength: clippedDestinationLength };
+}
+__name(croppedAxis, "croppedAxis");
+function positiveFiniteProduct(value, ratio) {
+  const product = value * ratio;
+  if (!Number.isFinite(product)) return void 0;
+  return product > 0 ? product : Number.MIN_VALUE;
+}
+__name(positiveFiniteProduct, "positiveFiniteProduct");
+function boundedRatio(numerator, denominator) {
+  if (numerator === 0n) return 0;
+  if (numerator === denominator) return 1;
+  const shift = Math.max(0, denominator.toString(2).length - 53);
+  const scaledNumerator = Number(numerator >> BigInt(shift));
+  const scaledDenominator = Number(denominator >> BigInt(shift));
+  const ratio = scaledNumerator / scaledDenominator;
+  return ratio === 0 ? Number.MIN_VALUE : ratio;
+}
+__name(boundedRatio, "boundedRatio");
+function rasterReplayProjection(target, command) {
+  const sampling = command.sampling;
+  const transform = target.getTransform?.();
+  if (sampling?.type !== "intrinsicPixelGrid" || transform === void 0) return void 0;
+  const swapped = transform.a === 0 && transform.d === 0;
+  if (!swapped && (transform.b !== 0 || transform.c !== 0)) return void 0;
+  const horizontalScale = swapped ? transform.b : transform.a;
+  const verticalScale = swapped ? transform.c : transform.d;
+  const horizontalOffset = swapped ? transform.f : transform.e;
+  const verticalOffset = swapped ? transform.e : transform.f;
+  if (horizontalScale === 0 || verticalScale === 0 || !Number.isFinite(horizontalScale) || !Number.isFinite(verticalScale) || !Number.isFinite(horizontalOffset) || !Number.isFinite(verticalOffset)) return void 0;
+  const source = sampling.intrinsicPixelSize;
+  if (!Number.isSafeInteger(source.width) || !Number.isSafeInteger(source.height) || source.width <= 0 || source.height <= 0) return void 0;
+  const rectangle = command.rectangle;
+  if (!Number.isFinite(rectangle.x) || !Number.isFinite(rectangle.y) || !Number.isFinite(rectangle.width) || !Number.isFinite(rectangle.height) || rectangle.width <= 0 || rectangle.height <= 0) return void 0;
+  return {
+    rectangle,
+    sampling,
+    source,
+    horizontal: { scale: horizontalScale, offset: horizontalOffset, start: rectangle.x * horizontalScale + horizontalOffset, end: (rectangle.x + rectangle.width) * horizontalScale + horizontalOffset },
+    vertical: { scale: verticalScale, offset: verticalOffset, start: rectangle.y * verticalScale + verticalOffset, end: (rectangle.y + rectangle.height) * verticalScale + verticalOffset },
+    swapped
+  };
+}
+__name(rasterReplayProjection, "rasterReplayProjection");
+function preparedMixedAxisRasterReplay(projection) {
+  if (projection === void 0 || projection.swapped) return void 0;
+  const { source, horizontal, vertical } = projection;
+  if (!hasSafeRasterPixelBufferSize(source)) return void 0;
+  const left = horizontal.start, right = horizontal.end, top = vertical.start, bottom = vertical.end;
+  if (!isDeviceInteger(left) || !isDeviceInteger(right) || !isDeviceInteger(bottom - top)) return void 0;
+  const deviceLeft = Math.round(left);
+  const deviceRight = Math.round(right);
+  const deviceWidth = Math.abs(deviceRight - deviceLeft);
+  const deviceHeight = Math.abs(Math.round(bottom - top));
+  if (!hasSafeRasterPixelBufferSize({ width: deviceWidth, height: deviceHeight }) || deviceWidth <= source.width || deviceHeight >= source.height || deviceHeight / source.height < 0.6) return void 0;
+  const preparedPixelSize = { width: deviceWidth, height: source.height };
+  if (!hasSafeRasterPixelBufferSize(preparedPixelSize) || preparedPixelSize.width * preparedPixelSize.height >= source.width * source.height * 16) return void 0;
+  const x = (deviceLeft - horizontal.offset) / horizontal.scale;
+  const y = ((vertical.scale < 0 ? bottom + preparedPixelSize.height : top) - vertical.offset) / vertical.scale;
+  const width = preparedPixelSize.width / Math.abs(horizontal.scale);
+  const height = preparedPixelSize.height / Math.abs(vertical.scale);
+  if (!Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) return void 0;
+  return { clipToRectangle: true, devicePixelSize: preparedPixelSize, flipHorizontal: horizontal.scale < 0, flipVertical: vertical.scale < 0, rectangle: { x, y, width, height } };
+}
+__name(preparedMixedAxisRasterReplay, "preparedMixedAxisRasterReplay");
+function intrinsicPixelGridMagnification(projection, command) {
+  if (projection === void 0) return void 0;
+  const { rectangle, source, horizontal, vertical } = projection;
+  const left = horizontal.start, right = horizontal.end, top = vertical.start, bottom = vertical.end;
+  const horizontalScale = rectangle.width * Math.abs(horizontal.scale) / source.width;
+  const verticalScale = rectangle.height * Math.abs(vertical.scale) / source.height;
+  const largeMagnification = horizontalScale >= 1 && verticalScale >= 1 && (horizontalScale >= 4 || verticalScale >= 4);
+  if (!largeMagnification) {
+    if (!isDeviceInteger(horizontalScale) || !isDeviceInteger(verticalScale)) return void 0;
+    const horizontalScaleInteger = Math.round(horizontalScale), verticalScaleInteger = Math.round(verticalScale);
+    if (horizontalScaleInteger < 1 || verticalScaleInteger < 1 || horizontalScaleInteger === 1 && verticalScaleInteger === 1) return void 0;
+  }
+  if (command.sampling?.shapeFill) {
+    const x = Math.round(Math.min(left, right)), y = Math.round(Math.min(top, bottom));
+    const width = Math.round(Math.max(left, right)) - x, height = Math.round(Math.max(top, bottom)) - y;
+    return { x: ((horizontal.scale < 0 ? x + width : x) - horizontal.offset) / horizontal.scale, y: ((vertical.scale < 0 ? y + height : y) - vertical.offset) / vertical.scale, width: width / Math.abs(horizontal.scale), height: height / Math.abs(vertical.scale) };
+  }
+  if (command.sourceCrop !== void 0 || source.width === 1 || source.height === 1) return rectangle;
+  if (isDeviceInteger(left) && isDeviceInteger(right) && isDeviceInteger(top) && isDeviceInteger(bottom)) return rectangle;
+  const deviceLeft = Math.floor(Math.min(left, right)), deviceTop = Math.floor(Math.min(top, bottom));
+  const deviceRight = Math.floor(Math.max(left, right)) + 1, deviceBottom = Math.floor(Math.max(top, bottom)) + 1;
+  return { x: ((horizontal.scale < 0 ? deviceRight : deviceLeft) - horizontal.offset) / horizontal.scale, y: ((vertical.scale < 0 ? deviceBottom : deviceTop) - vertical.offset) / vertical.scale, width: (deviceRight - deviceLeft) / Math.abs(horizontal.scale), height: (deviceBottom - deviceTop) / Math.abs(vertical.scale) };
+}
+__name(intrinsicPixelGridMagnification, "intrinsicPixelGridMagnification");
+function preparedFractionalRasterReplay(projection) {
+  if (projection === void 0 || projection.swapped) return void 0;
+  const { sampling, source, rectangle, horizontal, vertical } = projection;
+  const reduction = rectangle.width * Math.abs(horizontal.scale) < source.width && rectangle.height * Math.abs(vertical.scale) < source.height;
+  const verticalOriginOffset = reduction ? sampling.verticalOriginOffset ?? 0 : 0;
+  const left = horizontal.start;
+  const top = (rectangle.y + verticalOriginOffset) * vertical.scale + vertical.offset;
+  const right = horizontal.end;
+  const bottom = (rectangle.y + verticalOriginOffset + rectangle.height) * vertical.scale + vertical.offset;
+  const deviceLeft = Math.floor(Math.min(left, right));
+  const deviceTop = Math.floor(Math.min(top, bottom));
+  const deviceRight = Math.floor(Math.max(left, right)) + 1;
+  const deviceBottom = Math.floor(Math.max(top, bottom)) + 1;
+  if (!Number.isSafeInteger(deviceLeft) || !Number.isSafeInteger(deviceTop) || !Number.isSafeInteger(deviceRight) || !Number.isSafeInteger(deviceBottom)) return void 0;
+  const deviceWidth = Math.abs(deviceRight - deviceLeft);
+  const deviceHeight = deviceBottom - deviceTop;
+  if (!Number.isSafeInteger(deviceWidth) || !Number.isSafeInteger(deviceHeight)) return void 0;
+  if (reduction ? deviceWidth >= source.width || deviceHeight >= source.height : deviceWidth <= source.width || deviceHeight <= source.height || deviceWidth >= source.width * 4 || deviceHeight >= source.height * 4) return void 0;
+  const horizontalScale = rectangle.width * Math.abs(horizontal.scale) / source.width;
+  const verticalScale = rectangle.height * Math.abs(vertical.scale) / source.height;
+  if (!Number.isFinite(horizontalScale) || !Number.isFinite(verticalScale) || !reduction && (horizontalScale <= 1 || verticalScale <= 1 || isDeviceInteger(horizontalScale) && isDeviceInteger(verticalScale))) return void 0;
+  const x = ((horizontal.scale < 0 ? deviceRight : deviceLeft) - horizontal.offset) / horizontal.scale;
+  const y = ((vertical.scale < 0 ? deviceBottom : deviceTop) - vertical.offset) / vertical.scale;
+  const width = deviceWidth / Math.abs(horizontal.scale);
+  const height = deviceHeight / Math.abs(vertical.scale);
+  if (!Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) return void 0;
+  return { clipToRectangle: !reduction || sampling.clipToRectangle !== false, devicePixelSize: { width: deviceWidth, height: deviceHeight }, flipHorizontal: horizontal.scale < 0, flipVertical: vertical.scale < 0, rectangle: { x, y, width, height } };
+}
+__name(preparedFractionalRasterReplay, "preparedFractionalRasterReplay");
+function isDeviceInteger(value) {
+  const rounded = Math.round(value);
+  return Number.isSafeInteger(rounded) && Math.abs(value - rounded) <= Math.max(1, Math.abs(value)) * 5e-8;
+}
+__name(isDeviceInteger, "isDeviceInteger");
+function hasSafeRasterPixelBufferSize(size) {
+  return Number.isSafeInteger(size.width) && Number.isSafeInteger(size.height) && size.width > 0 && size.height > 0 && Number.isSafeInteger(size.width * size.height) && size.width * size.height <= Math.floor(Number.MAX_SAFE_INTEGER / 4);
+}
+__name(hasSafeRasterPixelBufferSize, "hasSafeRasterPixelBufferSize");
+function drawShadowedRaster(target, command, resources) {
+  const { shadow, ...plain } = command;
+  const rectangle = command.rectangle;
+  const bounds = new ShadowBounds(target.getTransform(), command.transform);
+  bounds.includeRectangle(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
+  target.save();
+  try {
+    replayPhysicalClips(target, command.physicalClips);
+    drawShadowedContent(target, shadow, bounds, command.clip, (raster) => drawInlineRasterImage(raster, { ...plain, clip: null, physicalClips: void 0 }, resources));
+  } finally {
+    target.restore();
+  }
+}
+__name(drawShadowedRaster, "drawShadowedRaster");
+
+// packages/canvas/src/canvas-table-border-replay.ts
+function fillTableBorderRectangle(target, command) {
+  const marker = command.tableBorderDeviceMinimum;
+  if (marker.compound !== void 0) {
+    fillCompoundTableBorderRectangle(target, command);
+    return;
+  }
+  const thickness = Number(marker.authoredThickness.numerator) / Number(marker.authoredThickness.denominator);
+  const startExtension = marker.startJunction === void 0 ? 0 : fractionNumber(marker.startJunction) / 2;
+  const endExtension = marker.endJunction === void 0 ? 0 : fractionNumber(marker.endJunction) / 2;
+  const rectangle = command.rectangle;
+  const x = Number(rectangle.x);
+  const y = Number(rectangle.y);
+  const length = marker.orientation === "horizontal" ? Number(rectangle.width) : Number(rectangle.height);
+  if (!Number.isFinite(thickness) || thickness <= 0 || !Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(length) || length <= 0) {
+    target.fillRect(x, y, marker.orientation === "horizontal" ? length : 0, marker.orientation === "horizontal" ? 0 : length);
+    return;
+  }
+  const transform = positiveAxisAlignedTransform(target);
+  if (transform === void 0) {
+    fillExactTableBorderRectangle(target, marker.orientation, x - startExtension, y, length + startExtension + endExtension, thickness);
+    return;
+  }
+  const scale = marker.orientation === "horizontal" ? transform.d : transform.a;
+  const deviceThickness = thickness * scale;
+  const deviceBoundary = marker.orientation === "horizontal" ? y * transform.d + transform.f : x * transform.a + transform.e;
+  if (!Number.isFinite(deviceThickness) || deviceThickness <= 0 || !Number.isFinite(deviceBoundary)) {
+    fillExactTableBorderRectangle(target, marker.orientation, x - startExtension, y, length + startExtension + endExtension, thickness);
+    return;
+  }
+  const deviceStart = marker.orientation === "horizontal" ? x * transform.a + transform.e : y * transform.d + transform.f;
+  const deviceEnd = marker.orientation === "horizontal" ? (x + length) * transform.a + transform.e : (y + length) * transform.d + transform.f;
+  const start = marker.startJunction === void 0 ? Math.floor(deviceStart) : Math.floor(Math.fround(deviceStart - startExtension * transform.a) + 0.5);
+  const end = marker.endJunction === void 0 ? Math.max(start + 1, Math.floor(deviceEnd) + (marker.endExclusive === true ? 0 : 1)) : Math.max(Math.floor(Math.fround(deviceEnd - endExtension * transform.a) + 0.5) + 1, Math.floor(Math.fround(deviceEnd + endExtension * transform.a) + 0.5));
+  const leading = deviceBoundary - (marker.orientation === "vertical" ? deviceThickness / 2 : 0);
+  const perpendicular = Math.floor(Math.fround(leading) + 0.5);
+  const perpendicularEnd = Math.max(perpendicular + 1, Math.floor(Math.fround(leading + deviceThickness) + 0.5));
+  if (![start, end, perpendicular, perpendicularEnd].every(Number.isSafeInteger)) {
+    fillExactTableBorderRectangle(target, marker.orientation, x - startExtension, y, length + startExtension + endExtension, thickness);
+    return;
+  }
+  const adjusted = marker.orientation === "horizontal" ? rectangleForDeviceBounds(transform, start, perpendicular, end - start, perpendicularEnd - perpendicular) : rectangleForDeviceBounds(transform, perpendicular, start, perpendicularEnd - perpendicular, end - start);
+  if (adjusted === void 0) {
+    fillExactTableBorderRectangle(target, marker.orientation, x - startExtension, y, length + startExtension + endExtension, thickness);
+    return;
+  }
+  target.fillRect(adjusted.x, adjusted.y, adjusted.width, adjusted.height);
+}
+__name(fillTableBorderRectangle, "fillTableBorderRectangle");
+function fillCompoundTableBorderRectangle(target, command) {
+  const marker = command.tableBorderDeviceMinimum;
+  const compound = marker.compound;
+  const rectangle = command.rectangle;
+  const x = Number(rectangle.x);
+  const y = Number(rectangle.y);
+  const length = marker.orientation === "horizontal" ? Number(rectangle.width) : Number(rectangle.height);
+  const outer = fractionNumber(compound.outer);
+  const gap = fractionNumber(compound.gap);
+  const inner = fractionNumber(compound.inner);
+  const thickness = fractionNumber(marker.authoredThickness);
+  if (!Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(length) || length <= 0 || !Number.isFinite(outer) || outer <= 0 || !Number.isFinite(gap) || gap < 0 || !Number.isFinite(inner) || inner < 0 || !Number.isFinite(thickness) || thickness <= 0) {
+    fillExactTableBorderRectangle(target, marker.orientation, x, y, length, thickness);
+    return;
+  }
+  const parts = compound.mirrored ? [inner, gap, outer] : [outer, gap, inner];
+  const stripeIndex = compound.mirrored ? compound.stripe === "outer" ? 2 : 0 : compound.stripe === "outer" ? 0 : 2;
+  const offset = parts.slice(0, stripeIndex).reduce((sum, value) => sum + value, 0);
+  const total = outer + gap + inner;
+  const transform = positiveAxisAlignedTransform(target);
+  if (transform === void 0) {
+    fillExactCompoundTableBorderRectangle(target, marker.orientation, x, y, length, total, offset, thickness);
+    return;
+  }
+  const scale = marker.orientation === "horizontal" ? transform.d : transform.a;
+  const deviceParts = parts.map((value) => value * scale);
+  const authoredDeviceThickness = deviceParts[stripeIndex];
+  const deviceOffset = deviceParts.slice(0, stripeIndex).reduce((sum, value) => sum + value, 0);
+  const deviceTotal = deviceParts.reduce((sum, value) => sum + value, 0);
+  const deviceBoundary = marker.orientation === "horizontal" ? y * transform.d + transform.f : x * transform.a + transform.e;
+  const deviceStart = marker.orientation === "horizontal" ? x * transform.a + transform.e : y * transform.d + transform.f;
+  const deviceEnd = marker.orientation === "horizontal" ? (x + length) * transform.a + transform.e : (y + length) * transform.d + transform.f;
+  const parallelStart = Math.floor(deviceStart);
+  const parallelEnd = Math.floor(deviceEnd) + 1;
+  const stripeStart = deviceBoundary + deviceOffset - (marker.orientation === "vertical" ? deviceTotal / 2 : 0);
+  const perpendicularStart = Math.floor(Math.fround(stripeStart) + 0.5);
+  const deviceThickness = Math.max(1, Math.floor(Math.fround(stripeStart + authoredDeviceThickness) + 0.5) - perpendicularStart);
+  if (!Number.isFinite(deviceThickness) || deviceThickness <= 0 || !Number.isFinite(perpendicularStart) || !Number.isSafeInteger(parallelStart) || !Number.isSafeInteger(parallelEnd) || parallelEnd <= parallelStart) {
+    fillExactCompoundTableBorderRectangle(target, marker.orientation, x, y, length, total, offset, thickness);
+    return;
+  }
+  const adjusted = marker.orientation === "horizontal" ? rectangleForDeviceBounds(transform, parallelStart, perpendicularStart, parallelEnd - parallelStart, deviceThickness) : rectangleForDeviceBounds(transform, perpendicularStart, parallelStart, deviceThickness, parallelEnd - parallelStart);
+  if (adjusted === void 0) {
+    fillExactCompoundTableBorderRectangle(target, marker.orientation, x, y, length, total, offset, thickness);
+    return;
+  }
+  target.fillRect(adjusted.x, adjusted.y, adjusted.width, adjusted.height);
+}
+__name(fillCompoundTableBorderRectangle, "fillCompoundTableBorderRectangle");
+function fillExactCompoundTableBorderRectangle(target, orientation, x, y, length, total, offset, thickness) {
+  if (orientation === "horizontal") target.fillRect(x, y + offset, length, thickness);
+  else target.fillRect(x - total / 2 + offset, y, thickness, length);
+}
+__name(fillExactCompoundTableBorderRectangle, "fillExactCompoundTableBorderRectangle");
+function fractionNumber(value) {
+  return Number(value.numerator) / Number(value.denominator);
+}
+__name(fractionNumber, "fractionNumber");
+function fillExactTableBorderRectangle(target, orientation, x, y, length, thickness) {
+  if (orientation === "horizontal") target.fillRect(x, y, length, thickness);
+  else target.fillRect(x - thickness / 2, y, thickness, length);
+}
+__name(fillExactTableBorderRectangle, "fillExactTableBorderRectangle");
+
+// packages/canvas/src/canvas-vector-shape-replay.ts
+function drawVectorShape(target, command) {
+  if (command.shadow !== void 0) {
+    drawShadowedVectorShape(target, command);
+    return;
+  }
+  target.save();
+  try {
+    if (command.clip !== null) {
+      target.beginPath();
+      target.rect(command.clip.x, command.clip.y, command.clip.width, command.clip.height);
+      target.clip();
+    }
+    if (command.transform !== void 0) target.transform(command.transform.a, command.transform.b, command.transform.c, command.transform.d, command.transform.e, command.transform.f);
+    for (const record of command.paths) {
+      target.beginPath();
+      for (const operation of record.operations) replayVectorShapePathOperation(target, operation);
+      const pathFill = record.fill;
+      if (pathFill.kind === "solidSrgb") {
+        target.fillStyle = pathFill.color;
+        const alpha = target.globalAlpha;
+        target.globalAlpha = alpha * (pathFill.opacity ?? 1);
+        target.fill(record.fillRule);
+        target.globalAlpha = alpha;
+      } else if (pathFill.kind === "linearGradient" || pathFill.kind === "radialGradient") {
+        const gradient = pathFill.kind === "radialGradient" ? target.createRadialGradient(pathFill.center.x, pathFill.center.y, 0, pathFill.center.x, pathFill.center.y, pathFill.radius) : target.createLinearGradient(pathFill.start.x, pathFill.start.y, pathFill.end.x, pathFill.end.y);
+        for (const stop of pathFill.stops) gradient.addColorStop(stop.offset, `${stop.color}${Math.round(stop.opacity * 255).toString(16).padStart(2, "0")}`);
+        target.fillStyle = gradient;
+        target.fill(record.fillRule);
+      } else if (pathFill.kind === "gradientPolygons") {
+        target.save();
+        target.clip(record.fillRule);
+        for (const polygon of pathFill.polygons) {
+          const gradient = target.createLinearGradient(polygon.start.x, polygon.start.y, polygon.end.x, polygon.end.y);
+          for (const stop of polygon.stops) gradient.addColorStop(stop.offset, `${stop.color}${Math.round(stop.opacity * 255).toString(16).padStart(2, "0")}`);
+          target.fillStyle = gradient;
+          target.beginPath();
+          target.moveTo(polygon.points[0].x, polygon.points[0].y);
+          for (const point of polygon.points.slice(1)) target.lineTo(point.x, point.y);
+          target.closePath();
+          target.fill();
+        }
+        target.restore();
+        target.beginPath();
+        for (const operation of record.operations) replayVectorShapePathOperation(target, operation);
+      }
+      if (record.stroke && command.stroke !== void 0) {
+        target.strokeStyle = command.stroke.color;
+        target.lineWidth = command.stroke.deviceHairline === true ? deviceHairlineWidth(target) : command.stroke.width;
+        target.lineCap = command.stroke.cap;
+        target.lineJoin = command.stroke.join;
+        const alpha = target.globalAlpha;
+        target.globalAlpha = alpha * (command.stroke.opacity ?? 1);
+        target.stroke();
+        target.globalAlpha = alpha;
+      }
+    }
+  } finally {
+    target.restore();
+  }
+}
+__name(drawVectorShape, "drawVectorShape");
+function replayVectorShapePathOperation(target, operation) {
+  if (operation.kind === "moveTo") target.moveTo(operation.x, operation.y);
+  else if (operation.kind === "lineTo") target.lineTo(operation.x, operation.y);
+  else if (operation.kind === "bezierCurveTo") target.bezierCurveTo(operation.control1X, operation.control1Y, operation.control2X, operation.control2Y, operation.x, operation.y);
+  else target.closePath();
+}
+__name(replayVectorShapePathOperation, "replayVectorShapePathOperation");
+function deviceHairlineWidth(target) {
+  const transform = target.getTransform?.();
+  if (transform === void 0) return 1;
+  const scale = Math.max(Math.hypot(transform.a, transform.b), Math.hypot(transform.c, transform.d));
+  const width = 1 / scale;
+  return Number.isFinite(width) && width > 0 ? width : 1;
+}
+__name(deviceHairlineWidth, "deviceHairlineWidth");
+function drawShadowedVectorShape(target, command) {
+  const { shadow, ...plain } = command;
+  const shadowBounds = new ShadowBounds(target.getTransform(), command.transform);
+  for (const path of command.paths) {
+    const bounds = pathBounds(path.operations);
+    if (bounds === void 0) continue;
+    const stroke = path.stroke ? (command.stroke?.width ?? 0) / 2 : 0;
+    shadowBounds.includeRectangle(bounds.left, bounds.top, bounds.width, bounds.height, stroke);
+  }
+  drawShadowedContent(target, shadow, shadowBounds, command.clip, (raster) => drawVectorShape(raster, { ...plain, clip: null }));
+}
+__name(drawShadowedVectorShape, "drawShadowedVectorShape");
+
+// packages/canvas/src/canvas-materializer.ts
+function materializePageDisplayListToCanvas(displayList, target, resources) {
+  for (const command of displayList.commands) {
+    switch (command.kind) {
+      case "fillRectangle":
+        target.fillStyle = command.color;
+        fillRectangle(target, command);
+        break;
+      case "fillPolygon":
+        if (command.clip !== void 0) target.save();
+        try {
+          if (command.clip !== void 0) {
+            target.beginPath();
+            target.rect(Number(command.clip.x), Number(command.clip.y), Number(command.clip.width), Number(command.clip.height));
+            target.clip();
+          }
+          target.fillStyle = command.color;
+          target.beginPath();
+          target.moveTo(Number(command.points[0].x), Number(command.points[0].y));
+          for (const point of command.points.slice(1)) target.lineTo(Number(point.x), Number(point.y));
+          target.closePath();
+          target.fill();
+        } finally {
+          if (command.clip !== void 0) target.restore();
+        }
+        break;
+      case "positionedText":
+        drawPositionedText(target, command);
+        break;
+      case "inlineRasterImage":
+        if (resources === void 0) throw new TypeError("Inline raster-image Canvas materialization requires an explicit resource materializer.");
+        drawInlineRasterImage(target, command, resources);
+        break;
+      case "vectorShape":
+        drawVectorShape(target, command);
+        break;
+      case "commentAnnotation":
+        for (const part of command.indicatorParts) {
+          target.fillStyle = part.color;
+          target.fillRect(part.rectangle.x, part.rectangle.y, part.rectangle.width, part.rectangle.height);
+        }
+        break;
+    }
+  }
+}
+__name(materializePageDisplayListToCanvas, "materializePageDisplayListToCanvas");
+function fillRectangle(target, command) {
+  const rectangle = command.rectangle;
+  if (command.tableBorderDeviceMinimum !== void 0) {
+    fillTableBorderRectangle(target, command);
+    return;
+  }
+  if (command.sectionColumnSeparatorDeviceMinimum !== void 0) {
+    fillSectionColumnSeparatorRectangle(target, command);
+    return;
+  }
+  if (command.targetPixelAligned !== true) {
+    target.fillRect(Number(rectangle.x), Number(rectangle.y), Number(rectangle.width), Number(rectangle.height));
+    return;
+  }
+  fillTargetPixelAlignedRectangle(target, { x: Number(rectangle.x), y: Number(rectangle.y), width: Number(rectangle.width), height: Number(rectangle.height) });
+}
+__name(fillRectangle, "fillRectangle");
+function fillSectionColumnSeparatorRectangle(target, command) {
+  const thickness = Number(command.sectionColumnSeparatorDeviceMinimum.authoredThickness.numerator) / Number(command.sectionColumnSeparatorDeviceMinimum.authoredThickness.denominator);
+  const rectangle = command.rectangle;
+  const x = Number(rectangle.x);
+  const y = Number(rectangle.y);
+  const height = Number(rectangle.height);
+  if (!Number.isFinite(thickness) || thickness <= 0 || !Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(height) || height <= 0) {
+    target.fillRect(x, y, 0, height);
+    return;
+  }
+  const transform = positiveAxisAlignedTransform(target);
+  if (transform === void 0) {
+    fillExactSectionColumnSeparator(target, x, y, height, thickness);
+    return;
+  }
+  const deviceThickness = thickness * transform.a;
+  const deviceBoundary = x * transform.a + transform.e;
+  if (!Number.isFinite(deviceThickness) || deviceThickness <= 0 || !Number.isFinite(deviceBoundary)) {
+    fillExactSectionColumnSeparator(target, x, y, height, thickness);
+    return;
+  }
+  if (deviceThickness > 1) {
+    fillExactSectionColumnSeparator(target, x, y, height, thickness);
+    return;
+  }
+  const deviceStart = roundHalfAwayFromZero(deviceBoundary - 0.5);
+  const adjustedX = (deviceStart - transform.e) / transform.a;
+  const adjustedWidth = 1 / transform.a;
+  if (!Number.isFinite(adjustedX) || !Number.isFinite(adjustedWidth) || adjustedWidth <= 0) {
+    fillExactSectionColumnSeparator(target, x, y, height, thickness);
+    return;
+  }
+  target.fillRect(adjustedX, y, adjustedWidth, height);
+}
+__name(fillSectionColumnSeparatorRectangle, "fillSectionColumnSeparatorRectangle");
+function fillExactSectionColumnSeparator(target, x, y, height, thickness) {
+  target.fillRect(x - thickness / 2, y, thickness, height);
+}
+__name(fillExactSectionColumnSeparator, "fillExactSectionColumnSeparator");
+
+// packages/canvas/src/text-selection.ts
+var nextView = 0;
+function mountTextSelection(pageText, viewport, shells, pageBounds, nearby, signal) {
+  const document2 = viewport.ownerDocument;
+  const window = document2.defaultView;
+  const svg = "http://www.w3.org/2000/svg";
+  const viewId = nextView++;
+  const matrix = /* @__PURE__ */ __name((value) => value ? new window.DOMMatrix([value.a, value.b, value.c, value.d, value.e, value.f]) : new window.DOMMatrix(), "matrix");
+  const lines = [...pageText].sort((a, b) => {
+    const left = a.selection, right = b.selection;
+    const leftOrder = left.sourceOrder ?? 0n, rightOrder = right.sourceOrder ?? 0n;
+    return leftOrder < rightOrder ? -1 : leftOrder > rightOrder ? 1 : a.pageIndex - b.pageIndex || left.scalarStart - right.scalarStart;
+  });
+  const pages = shells.map(() => []);
+  const stops = [];
+  const chunks = [];
+  let length = 0;
+  let previous;
+  for (const item of lines) {
+    const value = item.selection;
+    if (previous && previous.paragraphId !== value.paragraphId) {
+      chunks.push("\n");
+      length++;
+    }
+    const offsets = [0];
+    for (const scalar of value.scalars) offsets.push(offsets.at(-1) + scalar.length);
+    const transform = matrix(item.transform).multiply(matrix(value.transform));
+    const line = { item, transform, start: length, end: length + offsets.at(-1), stops: [], index: pages[item.pageIndex].length };
+    for (const caret of value.carets) {
+      const offset = offsets[caret.scalarOffset - value.scalarStart];
+      if (offset === void 0) continue;
+      const stop = { line, offset: length + offset, x: caret.x, index: stops.length };
+      line.stops.push(stop);
+      stops.push(stop);
+    }
+    line.stops.sort((a, b) => a.x - b.x || a.offset - b.offset);
+    pages[item.pageIndex].push(line);
+    chunks.push(value.scalars.join(""));
+    length = line.end;
+    previous = value;
+  }
+  const text = chunks.join("");
+  const logical = [...stops].sort((a, b) => a.offset - b.offset || a.index - b.index);
+  const logicalIndex = new Map(logical.map((stop, index) => [stop, index]));
+  const layers = /* @__PURE__ */ new Map();
+  function layerFor(index) {
+    const existing = layers.get(index);
+    if (existing) return existing;
+    const layer = document2.createElementNS("http://www.w3.org/2000/svg", "svg");
+    const bounds = pageBounds[index];
+    layer.setAttribute("viewBox", `0 0 ${bounds.width} ${bounds.height}`);
+    layer.setAttribute("aria-hidden", "true");
+    Object.assign(layer.style, { position: "absolute", inset: "0", width: "100%", height: "100%", pointerEvents: "none" });
+    layers.set(index, layer);
+    return layer;
+  }
+  __name(layerFor, "layerFor");
+  let anchor, focus, pointer, preferredX;
+  let frame = 0;
+  let pointerPosition = { x: 0, y: 0 };
+  let menu;
+  viewport.tabIndex = 0;
+  viewport.style.userSelect = "none";
+  for (const shell of shells) shell.style.cursor = "text";
+  function paint() {
+    for (const [index, layer] of layers) {
+      layer.remove();
+      layer.replaceChildren();
+      if (!nearby.has(index)) layers.delete(index);
+    }
+    if (!anchor || !focus || document2.activeElement !== viewport && !menu?.contains(document2.activeElement)) return;
+    const start = Math.min(anchor.offset, focus.offset), end = Math.max(anchor.offset, focus.offset);
+    for (const index of nearby) for (const line of pages[index] ?? []) {
+      let rectangle2 = function(x, width, caret = false) {
+        const rect = document2.createElementNS(svg, "rect");
+        rect.setAttribute("x", String(x));
+        rect.setAttribute("y", String(value.top));
+        rect.setAttribute("width", String(width));
+        rect.setAttribute("height", String(value.height));
+        rect.setAttribute("fill", caret ? "#1769c2" : "#4285f4");
+        rect.setAttribute("fill-opacity", caret ? "1" : "0.28");
+        group.append(rect);
+      };
+      var rectangle = rectangle2;
+      __name(rectangle2, "rectangle");
+      if (line.end < start || line.start > end) continue;
+      const value = line.item.selection;
+      const layer = layerFor(line.item.pageIndex);
+      const group = document2.createElementNS(svg, "g");
+      const transform = line.transform;
+      if (transform) group.setAttribute("transform", `matrix(${transform.a} ${transform.b} ${transform.c} ${transform.d} ${transform.e} ${transform.f})`);
+      if (start === end && focus.line === line) rectangle2(focus.x, Number(pageBounds[line.item.pageIndex].width) / shells[line.item.pageIndex].getBoundingClientRect().width * 1.5, true);
+      else {
+        let left, right = 0;
+        for (let index2 = 1; index2 < line.stops.length; index2++) {
+          const a = line.stops[index2 - 1], b = line.stops[index2];
+          if (Math.min(a.offset, b.offset) >= start && Math.max(a.offset, b.offset) <= end && a.offset !== b.offset) {
+            left ??= a.x;
+            right = b.x;
+          } else if (left !== void 0) {
+            rectangle2(left, right - left);
+            left = void 0;
+          }
+        }
+        if (left !== void 0) rectangle2(left, right - left);
+      }
+      let clipped = group;
+      const clips = [...line.item.clip ? [{ rectangle: line.item.clip, transform: line.item.transform }] : [], ...line.item.physicalClips ?? []];
+      for (let index2 = 0; index2 < clips.length; index2++) {
+        const clip = clips[index2], rectangle3 = clip.rectangle, transform2 = matrix(clip.transform);
+        const path = document2.createElementNS(svg, "clipPath");
+        path.id = `selection-${viewId}-${line.item.pageIndex}-${line.index}-${index2}`;
+        const polygon = document2.createElementNS(svg, "polygon");
+        polygon.setAttribute("points", [[rectangle3.x, rectangle3.y], [rectangle3.x + rectangle3.width, rectangle3.y], [rectangle3.x + rectangle3.width, rectangle3.y + rectangle3.height], [rectangle3.x, rectangle3.y + rectangle3.height]].map(([x, y]) => {
+          const point = transform2.transformPoint({ x, y });
+          return `${point.x},${point.y}`;
+        }).join(" "));
+        path.append(polygon);
+        const wrapper = document2.createElementNS(svg, "g");
+        wrapper.setAttribute("clip-path", `url(#${path.id})`);
+        wrapper.append(clipped);
+        layer.append(path);
+        clipped = wrapper;
+      }
+      layer.append(clipped);
+      shells[line.item.pageIndex].append(layer);
+    }
+  }
+  __name(paint, "paint");
+  function nearest(clientX, clientY) {
+    if (!logical.length) return;
+    let result, best = Infinity;
+    let first = 0, last = shells.length - 1;
+    while (first < last) {
+      const middle = first + last >>> 1;
+      if (shells[middle].getBoundingClientRect().bottom < clientY) first = middle + 1;
+      else last = middle;
+    }
+    let pageIndex = first;
+    if (!pages[first]?.length) pageIndex = pages.findIndex((lines2, index) => index >= first && lines2.length > 0);
+    if (pageIndex === -1) pageIndex = logical.at(-1).line.item.pageIndex;
+    {
+      const index = pageIndex;
+      const box = shells[index].getBoundingClientRect();
+      const width = Number(pageBounds[index].width), height = Number(pageBounds[index].height);
+      const px = (clientX - box.left) * width / box.width, py = (clientY - box.top) * height / box.height;
+      for (const line of pages[index]) {
+        const transform = line.transform;
+        const determinant = transform ? transform.a * transform.d - transform.b * transform.c : 1;
+        if (!determinant) continue;
+        const x = transform ? (transform.d * (px - transform.e) - transform.c * (py - transform.f)) / determinant : px;
+        const y = transform ? (-transform.b * (px - transform.e) + transform.a * (py - transform.f)) / determinant : py;
+        const value = line.item.selection;
+        const dy = Math.max(value.top - y, 0, y - value.top - value.height) * box.height / height;
+        for (const stop of line.stops) {
+          const dx = Math.abs(stop.x - x) * box.width / width;
+          const distance = dy * dy * 16 + dx * dx;
+          if (distance < best) {
+            best = distance;
+            result = stop;
+          }
+        }
+      }
+    }
+    return result;
+  }
+  __name(nearest, "nearest");
+  function select(stop, extend, scroll = false) {
+    if (!stop) return;
+    focus = stop;
+    if (!extend || !anchor) anchor = stop;
+    paint();
+    if (scroll) {
+      const shell = shells[stop.line.item.pageIndex];
+      const point = stop.line.transform.transformPoint({ x: stop.x, y: stop.line.item.selection.top });
+      const marker = document2.createElement("span");
+      Object.assign(marker.style, { position: "absolute", left: `${point.x / pageBounds[stop.line.item.pageIndex].width * 100}%`, top: `${point.y / pageBounds[stop.line.item.pageIndex].height * 100}%`, height: "1em", pointerEvents: "none" });
+      shell.append(marker);
+      marker.scrollIntoView({ block: "nearest", inline: "nearest" });
+      marker.remove();
+    }
+  }
+  __name(select, "select");
+  let scroller = viewport.parentElement;
+  while (scroller && !/(auto|scroll)/.test(window.getComputedStyle(scroller).overflowY)) scroller = scroller.parentElement;
+  const scrollElement = scroller ?? document2.scrollingElement;
+  function drag() {
+    if (pointer === void 0) return;
+    const bounds = scroller?.getBoundingClientRect() ?? { top: 0, bottom: window.innerHeight };
+    scrollElement.scrollTop += Math.min(30, Math.max(-30, pointerPosition.y < bounds.top + 20 ? pointerPosition.y - bounds.top - 20 : pointerPosition.y > bounds.bottom - 20 ? pointerPosition.y - bounds.bottom + 20 : 0));
+    select(nearest(pointerPosition.x, pointerPosition.y), true);
+    frame = window.requestAnimationFrame(drag);
+  }
+  __name(drag, "drag");
+  viewport.addEventListener("pointerdown", (event) => {
+    if (event.button !== 0 || event.target.closest("button,input,textarea,select,a,[contenteditable], [data-onodocs-attachment]")) return;
+    const stop = nearest(event.clientX, event.clientY);
+    if (!stop) return;
+    event.preventDefault();
+    viewport.focus({ preventScroll: true });
+    preferredX = void 0;
+    select(stop, event.shiftKey);
+    pointer = event.pointerId;
+    pointerPosition = { x: event.clientX, y: event.clientY };
+    viewport.setPointerCapture(pointer);
+    frame = window.requestAnimationFrame(drag);
+  }, { signal });
+  viewport.addEventListener("pointermove", (event) => {
+    if (event.pointerId !== pointer) return;
+    pointerPosition = { x: event.clientX, y: event.clientY };
+    select(nearest(event.clientX, event.clientY), true);
+  }, { signal });
+  for (const type of ["pointerup", "pointercancel", "lostpointercapture"]) viewport.addEventListener(type, (event) => {
+    if (event.pointerId !== pointer) return;
+    pointer = void 0;
+    window.cancelAnimationFrame(frame);
+  }, { signal });
+  viewport.addEventListener("keydown", (event) => {
+    if (event.target !== viewport || !logical.length) return;
+    const command = event.ctrlKey || event.metaKey;
+    if (command && event.key.toLowerCase() === "a") {
+      event.preventDefault();
+      anchor = logical[0];
+      select(logical.at(-1), true);
+      return;
+    }
+    if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(event.key) || event.altKey) return;
+    event.preventDefault();
+    if (!focus) {
+      select(logical[0], false);
+      return;
+    }
+    let next;
+    if (event.key === "Home" || event.key === "End") next = command ? event.key === "Home" ? logical[0] : logical.at(-1) : event.key === "Home" ? focus.line.stops[0] : focus.line.stops.at(-1);
+    else if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+      const delta = event.key === "ArrowLeft" ? -1 : 1;
+      if (!event.shiftKey && anchor.offset !== focus.offset) next = delta < 0 ? anchor.offset < focus.offset ? anchor : focus : anchor.offset > focus.offset ? anchor : focus;
+      else {
+        let index = logicalIndex.get(focus) + delta;
+        while (logical[index]?.offset === focus.offset) index += delta;
+        next = logical[Math.max(0, Math.min(logical.length - 1, index))];
+      }
+    } else {
+      preferredX ??= focus.x;
+      const delta = event.key === "ArrowUp" ? -1 : 1;
+      let index = logicalIndex.get(focus) + delta;
+      while (logical[index]?.line === focus.line) index += delta;
+      const line = logical[index]?.line;
+      next = line?.stops.reduce((best, stop) => Math.abs(stop.x - preferredX) < Math.abs(best.x - preferredX) ? stop : best);
+    }
+    if (event.key !== "ArrowUp" && event.key !== "ArrowDown") preferredX = void 0;
+    select(next, event.shiftKey, true);
+  }, { signal });
+  document2.addEventListener("copy", (event) => {
+    if (document2.activeElement !== viewport && !menu?.contains(document2.activeElement) || !focus || anchor.offset === focus.offset) return;
+    event.clipboardData?.setData("text/plain", selectedText());
+    event.preventDefault();
+  }, { signal });
+  function selectedText() {
+    return focus ? text.slice(Math.min(anchor.offset, focus.offset), Math.max(anchor.offset, focus.offset)) : "";
+  }
+  __name(selectedText, "selectedText");
+  function closeMenu(restoreFocus = false) {
+    if (!menu) return;
+    menu.remove();
+    menu = void 0;
+    if (restoreFocus) viewport.focus({ preventScroll: true });
+    paint();
+  }
+  __name(closeMenu, "closeMenu");
+  viewport.addEventListener("contextmenu", (event) => {
+    if (event.target.closest("button,input,textarea,select,a,[contenteditable], [data-onodocs-attachment]")) return;
+    event.preventDefault();
+    closeMenu();
+    viewport.focus({ preventScroll: true });
+    menu = document2.createElement("div");
+    menu.setAttribute("role", "menu");
+    menu.setAttribute("aria-label", "Document");
+    menu.setAttribute("popover", "manual");
+    Object.assign(menu.style, { position: "fixed", margin: "0", padding: "4px", border: "1px solid #d0d0d0", borderRadius: "6px", background: "white", boxShadow: "0 4px 16px #0002", minWidth: "140px" });
+    const copy = document2.createElement("button");
+    copy.type = "button";
+    copy.textContent = "Copy";
+    copy.setAttribute("role", "menuitem");
+    copy.setAttribute("aria-disabled", String(!selectedText()));
+    Object.assign(copy.style, { display: "block", width: "100%", margin: "0", padding: "6px 12px", border: "0", borderRadius: "3px", textAlign: "left", font: "14px system-ui", color: selectedText() ? "#222" : "#888", background: "transparent", cursor: selectedText() ? "pointer" : "default" });
+    copy.addEventListener("click", async () => {
+      const value = selectedText();
+      if (!value) return;
+      const opened = menu;
+      viewport.focus({ preventScroll: true });
+      if (!document2.execCommand("copy")) {
+        try {
+          await window.navigator.clipboard.writeText(value);
+        } catch {
+          if (menu === opened && !signal.aborted) {
+            copy.title = "Unable to copy. Use your keyboard copy shortcut.";
+            copy.focus();
+          }
+          return;
+        }
+      }
+      if (menu === opened) closeMenu(true);
+    });
+    menu.addEventListener("keydown", (event2) => {
+      if (event2.key === "Escape" || event2.key === "Tab") {
+        event2.preventDefault();
+        closeMenu(true);
+      } else if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event2.key)) {
+        event2.preventDefault();
+        copy.focus();
+      }
+    });
+    menu.append(copy);
+    document2.body.append(menu);
+    menu.showPopover();
+    const caret = (focus ? layers.get(focus.line.item.pageIndex) : void 0)?.querySelector("rect")?.getBoundingClientRect() ?? viewport.getBoundingClientRect();
+    const x = event.clientX || caret.left, y = event.clientY || caret.bottom;
+    const bounds = menu.getBoundingClientRect();
+    menu.style.left = `${Math.max(0, Math.min(x, window.innerWidth - bounds.width))}px`;
+    menu.style.top = `${Math.max(0, Math.min(y, window.innerHeight - bounds.height))}px`;
+    copy.focus({ preventScroll: true });
+    paint();
+  }, { signal });
+  document2.addEventListener("pointerdown", (event) => {
+    if (menu && !menu.contains(event.target)) closeMenu();
+  }, { signal });
+  document2.addEventListener("focusin", (event) => {
+    if (menu && event.target !== viewport && !menu.contains(event.target)) closeMenu();
+  }, { signal });
+  document2.addEventListener("scroll", () => closeMenu(), { capture: true, signal });
+  window.addEventListener("resize", () => closeMenu(), { signal });
+  viewport.addEventListener("focus", () => {
+    if (!focus) select(logical[0], false);
+    else paint();
+  }, { signal });
+  viewport.addEventListener("blur", paint, { signal });
+  signal.addEventListener("abort", () => {
+    menu?.remove();
+    window.cancelAnimationFrame(frame);
+    for (const layer of layers.values()) layer.remove();
+  }, { once: true });
+  return { paint };
+}
+__name(mountTextSelection, "mountTextSelection");
+
+// packages/canvas/src/presentation.ts
+var cssScale = 96 / 1440;
+var attachedElements = /* @__PURE__ */ new WeakMap();
+var placementPoints = {
+  overlay: [0, 0, 0, 0],
+  "inside-top-left": [0, 0, 0, 0],
+  "inside-top-center": [0.5, 0, 0.5, 0],
+  "inside-top-right": [1, 0, 1, 0],
+  "inside-center-left": [0, 0.5, 0, 0.5],
+  "inside-center-center": [0.5, 0.5, 0.5, 0.5],
+  "inside-center-right": [1, 0.5, 1, 0.5],
+  "inside-bottom-left": [0, 1, 0, 1],
+  "inside-bottom-center": [0.5, 1, 0.5, 1],
+  "inside-bottom-right": [1, 1, 1, 1],
+  "outside-top": [0.5, 0, 0.5, 1],
+  "outside-right": [1, 0.5, 0, 0.5],
+  "outside-bottom": [0.5, 1, 0.5, 0],
+  "outside-left": [0, 0.5, 1, 0.5]
+};
+function mountDocument(document2, container, options = {}, onDispose) {
+  const dom = container.ownerDocument;
+  const window = dom.defaultView;
+  let zoom = options.zoom ?? "fit-width";
+  checkZoom(zoom);
+  const gap = options.gap ?? 16;
+  if (!Number.isFinite(gap) || gap < 0) throw new RangeError("gap must be a nonnegative number.");
+  const element = dom.createElement("div");
+  element.setAttribute("role", "region");
+  element.setAttribute("aria-label", options.title ?? "Document");
+  element.tabIndex = 0;
+  Object.assign(element.style, { display: "flex", flexDirection: "column", alignItems: "center", gap: `${gap}px`, width: "100%" });
+  const attachments = /* @__PURE__ */ new Set();
+  let disposed = false;
+  let frame = 0;
+  let painting = false;
+  let visibilityReady = false;
+  let paintError;
+  let pendingPaint;
+  let paintingIndex;
+  const lifetime = new AbortController();
+  let selection;
+  let selectionLifetime;
+  function prepareSelection(event) {
+    if (event.target.closest("[data-onodocs-attachment]")) return;
+    if (selection) return;
+    selectionLifetime = new AbortController();
+    selection = mountTextSelection(document2.pages.flatMap((page) => page.interaction.text), element, shells.map((entry) => entry.shell), document2.pages.map((page) => page.size), nearby, AbortSignal.any([lifetime.signal, selectionLifetime.signal]));
+  }
+  __name(prepareSelection, "prepareSelection");
+  for (const type of ["pointerdown", "keydown", "contextmenu", "focus"]) element.addEventListener(type, prepareSelection, { capture: true, signal: lifetime.signal });
+  const waiters = /* @__PURE__ */ new Set();
+  const nearby = /* @__PURE__ */ new Set();
+  const intersections = /* @__PURE__ */ new Set();
+  const painted = /* @__PURE__ */ new Set();
+  let shells = createShells();
+  function createShells(previous = []) {
+    return document2.pages.map((page) => {
+      const prior = previous[page.index];
+      if (prior) {
+        if (prior.page.size.width !== page.size.width || prior.page.size.height !== page.size.height) {
+          prior.width = 0;
+          Object.assign(prior.layer.style, { width: `${page.size.width * cssScale}px`, height: `${page.size.height * cssScale}px` });
+        }
+        prior.page = page;
+        prior.paintedWidth = 0;
+        return prior;
+      }
+      const shell = dom.createElement("section");
+      shell.setAttribute("aria-label", `Page ${page.index + 1}`);
+      Object.assign(shell.style, { position: "relative", flex: "none", background: "white" });
+      const canvas = dom.createElement("canvas");
+      canvas.width = 0;
+      canvas.height = 0;
+      Object.assign(canvas.style, { width: "100%", height: "100%", display: "block" });
+      const layer = dom.createElement("div");
+      Object.assign(layer.style, { position: "absolute", left: "0", top: "0", transformOrigin: "0 0", width: `${page.size.width * cssScale}px`, height: `${page.size.height * cssScale}px`, pointerEvents: "none" });
+      shell.append(canvas, layer);
+      element.append(shell);
+      return { shell, canvas, layer, page, width: 0, paintedWidth: 0, pixelRatio: 0 };
+    });
+  }
+  __name(createShells, "createShells");
+  const observer = new window.ResizeObserver(resize);
+  const visibility = new window.IntersectionObserver((entries) => {
+    visibilityReady = true;
+    for (const entry of entries) {
+      const index = Number(entry.target.dataset.pageIndex);
+      if (entry.target !== shells[index]?.shell) continue;
+      if (entry.isIntersecting) intersections.add(index);
+      else intersections.delete(index);
+    }
+    nearby.clear();
+    for (const index of intersections) for (let neighbor = Math.max(0, index - 1); neighbor <= Math.min(shells.length - 1, index + 1); neighbor++) nearby.add(neighbor);
+    if (paintingIndex !== void 0 && !nearby.has(paintingIndex)) pendingPaint?.abort();
+    schedulePaint();
+    selection?.paint();
+  }, { rootMargin: "100% 0px" });
+  function observePages() {
+    for (const entry of shells) {
+      entry.shell.dataset.pageIndex = String(entry.page.index);
+      visibility.observe(entry.shell);
+    }
+  }
+  __name(observePages, "observePages");
+  try {
+    container.append(element);
+    resize();
+    observer.observe(container);
+    observePages();
+    window.addEventListener("resize", resize);
+  } catch (error) {
+    observer.disconnect();
+    visibility.disconnect();
+    window.cancelAnimationFrame(frame);
+    element.remove();
+    throw error;
+  }
+  const view = {
+    element,
+    get disposed() {
+      return disposed;
+    },
+    whenRendered() {
+      checkOpen();
+      if (paintError) return Promise.reject(paintError);
+      const result = new Promise((resolve, reject) => waiters.add({ resolve, reject }));
+      schedulePaint();
+      return result;
+    },
+    refresh() {
+      checkOpen();
+      selectionLifetime?.abort();
+      selection = void 0;
+      pendingPaint?.abort();
+      paintError = void 0;
+      for (const attachment of attachments) attachment.dispose();
+      for (const entry of shells.slice(document2.pages.length)) {
+        visibility.unobserve(entry.shell);
+        nearby.delete(entry.page.index);
+        intersections.delete(entry.page.index);
+        painted.delete(entry.page.index);
+        entry.canvas.width = 0;
+        entry.canvas.height = 0;
+        entry.shell.remove();
+      }
+      shells = createShells(shells);
+      resize();
+      observePages();
+    },
+    setZoom(value) {
+      checkOpen();
+      checkZoom(value);
+      pendingPaint?.abort();
+      paintError = void 0;
+      zoom = value;
+      resize();
+    },
+    toClient(pageIndex, point) {
+      checkOpen();
+      const entry = shells[pageIndex];
+      if (!entry || !Number.isSafeInteger(pageIndex)) throw new RangeError("Page index is outside the document.");
+      const rectangle = entry.shell.getBoundingClientRect();
+      return { x: rectangle.left + point.x / entry.page.size.width * rectangle.width, y: rectangle.top + point.y / entry.page.size.height * rectangle.height };
+    },
+    fromClient(point) {
+      checkOpen();
+      let first = 0, last = shells.length - 1;
+      while (first <= last) {
+        const middle = first + last >>> 1;
+        const entry = shells[middle];
+        const rectangle = entry.shell.getBoundingClientRect();
+        if (rectangle.width > 0 && point.x >= rectangle.left && point.x <= rectangle.right && point.y >= rectangle.top && point.y <= rectangle.bottom) return { pageIndex: entry.page.index, point: { x: (point.x - rectangle.left) / rectangle.width * entry.page.size.width, y: (point.y - rectangle.top) / rectangle.height * entry.page.size.height } };
+        if (point.y < rectangle.top) last = middle - 1;
+        else first = middle + 1;
+      }
+      return void 0;
+    },
+    hitTest(point) {
+      const location = view.fromClient(point);
+      return location && hitTestPage(document2.pages[location.pageIndex].interaction, location.point);
+    },
+    scrollTo(anchor, options2 = {}) {
+      checkOpen();
+      const fragment = fragmentsFor(anchor)[0];
+      if (!fragment) return false;
+      const marker = dom.createElement("span");
+      const attachment = view.attach(marker, { anchor: fragment });
+      try {
+        marker.scrollIntoView({ block: "nearest", inline: "nearest", ...options2 });
+      } finally {
+        attachment.dispose();
+      }
+      return true;
+    },
+    attach(node, options2) {
+      checkOpen();
+      const fragments = fragmentsFor(options2.anchor);
+      if (fragments.length !== 1) throw new RangeError(`Anchor has ${fragments.length} fragments. Pass one document fragment explicitly.`);
+      const fragment = fragments[0];
+      const entry = shells[fragment.pageIndex];
+      const outer = dom.createElement("div");
+      outer.dataset.onodocsAttachment = "";
+      Object.assign(outer.style, { position: "absolute", inset: "0", pointerEvents: "none" });
+      let parent = outer;
+      for (const clip of fragment.clips) {
+        const wrapper = dom.createElement("div");
+        const { x: x2, y: y2, width, height } = clip.rectangle;
+        const t2 = clip.transform;
+        const points = [[x2, y2], [x2 + width, y2], [x2 + width, y2 + height], [x2, y2 + height]].map(([x3, y3]) => `${(t2.a * x3 + t2.c * y3 + t2.e) * cssScale}px ${(t2.b * x3 + t2.d * y3 + t2.f) * cssScale}px`);
+        Object.assign(wrapper.style, { position: "absolute", inset: "0", clipPath: `polygon(${points.join(",")})` });
+        parent.append(wrapper);
+        parent = wrapper;
+      }
+      const box = dom.createElement("div");
+      const r = fragment.rectangle, t = fragment.transform;
+      const inset = options2.inset ?? 0, gap2 = options2.gap ?? 0;
+      const size = options2.size ?? { width: Math.max(0, r.width - 2 * inset), height: Math.max(0, r.height - 2 * inset) };
+      const [anchorX, anchorY, elementX, elementY] = placementPoints[options2.placement ?? "overlay"];
+      const x = r.x + anchorX * r.width - elementX * size.width + (1 - 2 * anchorX) * inset + (anchorX - elementX) * gap2 + (options2.offset?.x ?? 0);
+      const y = r.y + anchorY * r.height - elementY * size.height + (1 - 2 * anchorY) * inset + (anchorY - elementY) * gap2 + (options2.offset?.y ?? 0);
+      Object.assign(box.style, { position: "absolute", left: "0", top: "0", width: `${size.width * cssScale}px`, height: `${size.height * cssScale}px`, transformOrigin: "0 0", transform: `matrix(${t.a},${t.b},${t.c},${t.d},${(t.a * x + t.c * y + t.e) * cssScale},${(t.b * x + t.d * y + t.f) * cssScale})`, pointerEvents: "auto" });
+      attachedElements.get(node)?.dispose();
+      const oldStyle = node.getAttribute("style");
+      Object.assign(node.style, { width: "100%", height: "100%", boxSizing: "border-box", margin: "0" });
+      box.append(node);
+      parent.append(box);
+      entry.layer.append(outer);
+      let detached = false;
+      const attachment = { element: node, get disposed() {
+        return detached;
+      }, dispose() {
+        if (detached) return;
+        detached = true;
+        outer.remove();
+        node.remove();
+        if (oldStyle === null) node.removeAttribute("style");
+        else node.setAttribute("style", oldStyle);
+        attachments.delete(attachment);
+        attachedElements.delete(node);
+      } };
+      attachments.add(attachment);
+      attachedElements.set(node, attachment);
+      return attachment;
+    },
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      lifetime.abort();
+      for (const waiter of waiters) waiter.reject(new DOMException("View is disposed.", "AbortError"));
+      waiters.clear();
+      observer.disconnect();
+      visibility.disconnect();
+      window.removeEventListener("resize", resize);
+      window.cancelAnimationFrame(frame);
+      nearby.clear();
+      intersections.clear();
+      painted.clear();
+      for (const attachment of attachments) attachment.dispose();
+      element.remove();
+      for (const { canvas } of shells) {
+        canvas.width = 0;
+        canvas.height = 0;
+      }
+      element.replaceChildren();
+      onDispose();
+    }
+  };
+  return view;
+  function fragmentsFor(anchor) {
+    if ("index" in anchor) {
+      const rectangle = { x: 0, y: 0, ...anchor.size };
+      return [{ pageIndex: anchor.index, rectangle, bounds: rectangle, transform: { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 }, clips: [] }];
+    }
+    return [anchor];
+  }
+  __name(fragmentsFor, "fragmentsFor");
+  function resize() {
+    if (disposed) return;
+    const available = container.clientWidth;
+    for (const entry of shells) {
+      const width = zoom === "fit-width" ? available : entry.page.size.width * cssScale * zoom;
+      if (width <= 0 || width === entry.width) continue;
+      entry.width = width;
+      Object.assign(entry.shell.style, { width: `${width}px`, height: `${width * entry.page.size.height / entry.page.size.width}px` });
+      entry.layer.style.transform = `scale(${width / (entry.page.size.width * cssScale)})`;
+    }
+    element.style.minWidth = `${shells.reduce((width, entry) => Math.max(width, entry.width), available)}px`;
+    selection?.paint();
+    schedulePaint();
+  }
+  __name(resize, "resize");
+  function schedulePaint() {
+    if (!disposed && !painting && !frame) frame = window.requestAnimationFrame(() => {
+      void paint();
+    });
+  }
+  __name(schedulePaint, "schedulePaint");
+  async function paint() {
+    frame = 0;
+    if (disposed || !visibilityReady) return;
+    painting = true;
+    try {
+      for (const index of painted) if (!nearby.has(index)) {
+        const entry = shells[index];
+        entry.canvas.width = 0;
+        entry.canvas.height = 0;
+        entry.paintedWidth = 0;
+        painted.delete(index);
+      }
+      const pixelRatio = window.devicePixelRatio || 1;
+      const pending = [...nearby].map((index) => shells[index]).filter((entry) => entry.width > 0 && (entry.paintedWidth !== entry.width || entry.pixelRatio !== pixelRatio));
+      const center = window.innerHeight / 2;
+      pending.sort((a, b) => Math.abs(a.shell.getBoundingClientRect().top - center) - Math.abs(b.shell.getBoundingClientRect().top - center));
+      const start = window.performance.now();
+      for (const entry of pending) {
+        const width = entry.width;
+        const page = entry.page;
+        paintingIndex = page.index;
+        pendingPaint = new AbortController();
+        await page.render(entry.canvas, { dpi: width / page.size.width * 1440 * pixelRatio, signal: AbortSignal.any([lifetime.signal, pendingPaint.signal]) });
+        if (shells[page.index] !== entry) {
+          entry.canvas.width = 0;
+          entry.canvas.height = 0;
+          continue;
+        }
+        entry.paintedWidth = page === entry.page ? width : 0;
+        entry.pixelRatio = pixelRatio;
+        painted.add(entry.page.index);
+        if (window.performance.now() - start >= 8) break;
+      }
+    } catch (error) {
+      if (!disposed && !pendingPaint?.signal.aborted) {
+        paintError = error;
+        for (const waiter of waiters) waiter.reject(error);
+        waiters.clear();
+        element.dispatchEvent(new ErrorEvent("error", { error, message: String(error), bubbles: true }));
+      }
+    } finally {
+      painting = false;
+      pendingPaint = void 0;
+      paintingIndex = void 0;
+    }
+    if (disposed || paintError) return;
+    if ([...nearby].some((index) => {
+      const entry = shells[index];
+      return entry.width > 0 && (entry.paintedWidth !== entry.width || entry.pixelRatio !== (window.devicePixelRatio || 1));
+    }) || [...painted].some((index) => !nearby.has(index))) schedulePaint();
+    else {
+      for (const waiter of waiters) waiter.resolve();
+      waiters.clear();
+    }
+  }
+  __name(paint, "paint");
+  function checkOpen() {
+    if (disposed) throw new Error("View is disposed.");
+  }
+  __name(checkOpen, "checkOpen");
+}
+__name(mountDocument, "mountDocument");
+function checkZoom(zoom) {
+  if (zoom !== "fit-width" && (typeof zoom !== "number" || !Number.isFinite(zoom) || zoom <= 0)) throw new RangeError("zoom must be positive or 'fit-width'.");
+}
+__name(checkZoom, "checkZoom");
+
+// packages/canvas/src/evaluation-watermark.ts
+function paintEvaluationWatermark(context, width, height) {
+  context.save();
+  context.resetTransform();
+  const scale = Math.min(width / 600, height / 200);
+  context.translate(width / 2, height - 18 * scale);
+  context.scale(scale, scale);
+  context.fillStyle = "#555555";
+  context.font = "12px sans-serif";
+  context.textAlign = "center";
+  context.textBaseline = "middle";
+  context.fillText("OnoDocs evaluation \u2014 not for production use", 0, 0);
+  context.restore();
+}
+__name(paintEvaluationWatermark, "paintEvaluationWatermark");
+
+// packages/canvas/src/transport.ts
+function encode(page) {
+  return JSON.stringify(page, (_key, value) => typeof value === "bigint" ? { $integer: value.toString() } : value instanceof Uint8Array ? { $bytes: base64(value) } : value);
+}
+__name(encode, "encode");
+function decode(value) {
+  return JSON.parse(value, (_key, value2) => value2 && typeof value2 === "object" ? "$integer" in value2 ? BigInt(value2.$integer) : "$bytes" in value2 ? Uint8Array.from(atob(value2.$bytes), (value3) => value3.charCodeAt(0)) : value2 : value2);
+}
+__name(decode, "decode");
+function base64(bytes) {
+  const parts = [];
+  for (let index = 0; index < bytes.length; index += 32768) parts.push(String.fromCharCode(...bytes.subarray(index, index + 32768)));
+  return btoa(parts.join(""));
+}
+__name(base64, "base64");
+
+// packages/canvas/src/index.ts
+function createDocument(source, options = {}) {
+  const lifetime = new AbortController();
+  const views = /* @__PURE__ */ new Set();
+  const faces = /* @__PURE__ */ new Map();
+  const ownedFaces = /* @__PURE__ */ new Set();
+  let pages = [];
+  let disposed = false;
+  let mounted;
+  let unsubscribe;
+  const result = {
+    get pages() {
+      return pages;
+    },
+    get disposed() {
+      return disposed;
+    },
+    get view() {
+      return mounted;
+    },
+    mount(container, options2) {
+      checkOpen();
+      const view = mountDocument(result, container, options2, () => views.delete(view));
+      views.add(view);
+      return view;
+    },
+    refresh() {
+      checkOpen();
+      pages = source.pages.map((page) => ({ index: page.index, size: page.size, get interaction() {
+        return page.interaction;
+      }, async render(canvas, options2 = {}) {
+        checkOpen();
+        const signal = options2.signal ? AbortSignal.any([options2.signal, lifetime.signal]) : lifetime.signal;
+        signal.throwIfAborted();
+        const dpi = options2.dpi ?? 96;
+        if (!Number.isFinite(dpi) || dpi <= 0) throw new RangeError("dpi must be positive and finite.");
+        const data = await page.load(signal);
+        signal.throwIfAborted();
+        await Promise.all((data.fonts ?? []).map(loadFont));
+        signal.throwIfAborted();
+        const images = data.images && await materializeImageResources(data.images, signal);
+        try {
+          signal.throwIfAborted();
+          const ratio = dpi / 1440;
+          canvas.width = Math.ceil(page.size.width * ratio);
+          canvas.height = Math.ceil(page.size.height * ratio);
+          const context = canvas.getContext("2d");
+          if (!context) throw new Error("Canvas 2D context is unavailable.");
+          context.fillStyle = "white";
+          context.fillRect(0, 0, canvas.width, canvas.height);
+          context.scale(ratio, ratio);
+          materializePageDisplayListToCanvas(data, context, images);
+          if (data.evaluation) paintEvaluationWatermark(context, canvas.width, canvas.height);
+        } finally {
+          images?.dispose();
+        }
+      } }));
+      for (const view of views) view.refresh();
+    },
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      lifetime.abort();
+      unsubscribe?.();
+      for (const view of views) view.dispose();
+      for (const face of ownedFaces) document.fonts.delete(face);
+      views.clear();
+      ownedFaces.clear();
+      faces.clear();
+    }
+  };
+  unsubscribe = source.subscribe?.(() => source.disposed ? result.dispose() : result.refresh());
+  try {
+    result.refresh();
+    if (options.container) mounted = result.mount(options.container, options.viewOptions);
+  } catch (error) {
+    result.dispose();
+    throw error;
+  }
+  return result;
+  function checkOpen() {
+    if (disposed || source.disposed) throw new Error("Canvas document is disposed.");
+  }
+  __name(checkOpen, "checkOpen");
+  function loadFont(resource) {
+    const key = JSON.stringify([resource.family, resource.descriptors]);
+    let pending = faces.get(key);
+    if (!pending) {
+      const face = new FontFace(resource.family, typeof resource.source === "string" ? resource.source : resource.source.slice().buffer, resource.descriptors);
+      pending = face.load().then(() => {
+        checkOpen();
+        document.fonts.add(face);
+        ownedFaces.add(face);
+      });
+      faces.set(key, pending);
+      void pending.catch(() => faces.delete(key));
+    }
+    return pending;
+  }
+  __name(loadFont, "loadFont");
+}
+__name(createDocument, "createDocument");
+export {
+  createDocument,
+  decode,
+  encode,
+  materializePageDisplayListToCanvas
+};