@embedpdf/vue 0.0.0-stage → 3.0.0-next.16

package/dist/composables-DK3lwh38.js

@@ -0,0 +1,979 @@
+import { defineComponent, useSlots, computed, openBlock, createElementBlock, Fragment, renderList, unref, normalizeStyle, createCommentVNode, createElementVNode, renderSlot, provide, shallowRef, watch, toValue, onScopeDispose, inject, createBlock, resolveDynamicComponent, createVNode, ref, onUnmounted, withCtx, createSlots, normalizeProps, guardReactiveProps, markRaw, h, toRaw, toDisplayString } from "vue";
+import { shallowEqual, annotationKey } from "@embedpdf/core";
+import { AnnotationToken as AnnotationToken$1, previewBucket } from "@embedpdf/plugin-annotation/contract/host";
+import { InteractionToken } from "@embedpdf/plugin-interaction/contract";
+import { RenderToken } from "@embedpdf/plugin-render/contract/host";
+import { annotationChromePaint, chromeInPixels, frameInPixels, createTextBoxEditorFollower, textBoxEditorScaleOf, ownTextBoxOf, lookFrameOf, freeTextBoxOf, sceneViewBox, svgShapesOf, ghostOpacity, pictureOrPainting, shownAppearance, rasterInFrame, loadObjectUrl, rectInPixels, registerRendererBehaviors, createShownUrls, loadAppearanceUrls, editingTextKeyOf, annotationDrawingOf, layerTextBoxesOf, bakedAppearanceOf, sameSelectionAnchor, sameCreationDraftAnchor, paint, paintDefault, sameRotationAnchor, pickRequestedFile, sameAnnotationAnchor, enrichCommentThreads, installFilePickerProvider } from "@embedpdf/web";
+import { d as devWarn } from "./dev-CtMlvxjZ.js";
+import { a as usePaintsPagePart } from "./page-layers-rlh4-1qr.js";
+import { i as useOptionalSelector, h as useOptionalCapability, a as useCapability, b as useCapabilityEvent, d as useDocumentId, g as useKernelValue } from "./capabilities-C7YzgPCX.js";
+import { u as usePage } from "./page-D9XIuLSj.js";
+import { e as useViewerSettings } from "./documents-DUu5H4yH.js";
+import { scene, MITER_LIMIT, hasLiveDrawing } from "@embedpdf/core-annotation";
+import { _ as _sfc_main$b } from "./SvgShapes.vue_vue_type_script_setup_true_lang-fOTs4aqv.js";
+import { _ as _sfc_main$c } from "./Anchored.vue_vue_type_script_setup_true_lang-Brhh5jyF.js";
+import { b as useProjectorBinding } from "./projector-CDZn1kh1.js";
+import { AnnotationToken as AnnotationToken$2 } from "@embedpdf/plugin-annotation";
+import { annotationState, AnnotationToken } from "@embedpdf/plugin-annotation/contract";
+import { s as settingsComposable, a as stateComposable } from "./state-DZg8q3v6.js";
+const useAnnotationState = stateComposable(annotationState);
+const useAnnotationSettings = settingsComposable(AnnotationToken);
+const _hoisted_1$5 = { style: { position: "absolute", inset: 0, overflow: "visible", pointerEvents: "none" } };
+const _hoisted_2 = ["cx", "cy", "r"];
+const _hoisted_3 = ["x", "y", "width", "height", "transform"];
+const _hoisted_4 = ["x1", "y1", "x2", "y2"];
+const _hoisted_5 = ["points"];
+const _hoisted_6 = { key: 3 };
+const _hoisted_7 = ["x1", "y1", "x2", "y2", "opacity"];
+const _hoisted_8 = { key: 0 };
+const _hoisted_9 = ["x1", "y1", "x2", "y2"];
+const _hoisted_10 = ["cx", "cy", "r"];
+const _hoisted_11 = ["x", "y", "width", "height"];
+const _hoisted_12 = ["x", "y", "width", "height"];
+const _hoisted_13 = {
+  key: 0,
+  style: { position: "absolute", inset: 0, pointerEvents: "none" }
+};
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  __name: "AnnotationChrome",
+  props: {
+    page: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = useSlots();
+    const NO_NODES = Object.freeze([]);
+    const nodes = useOptionalSelector(
+      AnnotationToken$1,
+      (host) => {
+        const { transform, ref: ref2 } = props.page;
+        return host.listChromeNodes(ref2, transform.viewScale, transform.rotation, transform.zoom);
+      },
+      NO_NODES,
+      shallowEqual
+    );
+    const chrome = useAnnotationSettings((settings) => settings.chrome);
+    const accent = useViewerSettings((settings) => settings.accent);
+    const painted = computed(() => {
+      const paint2 = annotationChromePaint(chrome.value, accent.value);
+      const style = (part) => ({ ...part });
+      return {
+        outline: style(paint2.outline),
+        handle: style(paint2.handle),
+        rotationHandle: style(paint2.rotationHandle),
+        rotationStalk: style({ stroke: paint2.rotationHandle.stroke }),
+        guide: style(paint2.guide),
+        rotationGuide: style(paint2.rotationGuide),
+        marquee: style(paint2.marquee)
+      };
+    });
+    const pixels = computed(() => chromeInPixels(nodes.value, props.page.transform));
+    const hasHandles = computed(
+      () => pixels.value.some((node) => node.kind === "handle" || node.kind === "rotation-handle")
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        (openBlock(), createElementBlock("svg", _hoisted_1$5, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(pixels.value, (node, index) => {
+            return openBlock(), createElementBlock(Fragment, { key: index }, [
+              node.kind === "handle" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                !slots.handle ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                  unref(chrome).handles.shape === "circle" ? (openBlock(), createElementBlock("circle", {
+                    key: 0,
+                    cx: node.at.x,
+                    cy: node.at.y,
+                    r: unref(chrome).handles.size / 2,
+                    "stroke-width": "1.5",
+                    style: normalizeStyle(painted.value.handle)
+                  }, null, 12, _hoisted_2)) : (openBlock(), createElementBlock("rect", {
+                    key: 1,
+                    x: node.at.x - unref(chrome).handles.size / 2,
+                    y: node.at.y - unref(chrome).handles.size / 2,
+                    width: unref(chrome).handles.size,
+                    height: unref(chrome).handles.size,
+                    "stroke-width": "1.5",
+                    style: normalizeStyle(painted.value.handle),
+                    transform: node.rotation ? `rotate(${node.rotation} ${node.at.x} ${node.at.y})` : void 0
+                  }, null, 12, _hoisted_3))
+                ], 64)) : createCommentVNode("", true)
+              ], 64)) : node.kind === "guide" ? (openBlock(), createElementBlock("line", {
+                key: 1,
+                x1: node.from.x,
+                y1: node.from.y,
+                x2: node.to.x,
+                y2: node.to.y,
+                "shape-rendering": "crispEdges",
+                style: normalizeStyle(painted.value.guide)
+              }, null, 12, _hoisted_4)) : node.kind === "turned-outline" ? (openBlock(), createElementBlock("polygon", {
+                key: 2,
+                points: node.points,
+                fill: "none",
+                style: normalizeStyle(painted.value.outline)
+              }, null, 12, _hoisted_5)) : node.kind === "rotation-guides" ? (openBlock(), createElementBlock("g", _hoisted_6, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(node.lines, (line, lineIndex) => {
+                  return openBlock(), createElementBlock("line", {
+                    key: lineIndex,
+                    x1: line.from.x,
+                    y1: line.from.y,
+                    x2: line.to.x,
+                    y2: line.to.y,
+                    opacity: line.opacity,
+                    style: normalizeStyle(painted.value.rotationGuide)
+                  }, null, 12, _hoisted_7);
+                }), 128))
+              ])) : node.kind === "rotation-handle" ? (openBlock(), createElementBlock(Fragment, { key: 4 }, [
+                !slots["rotation-handle"] ? (openBlock(), createElementBlock("g", _hoisted_8, [
+                  unref(chrome).rotationHandle.stalk ? (openBlock(), createElementBlock("line", {
+                    key: 0,
+                    x1: node.from.x,
+                    y1: node.from.y,
+                    x2: node.at.x,
+                    y2: node.at.y,
+                    "stroke-width": "1",
+                    style: normalizeStyle(painted.value.rotationStalk)
+                  }, null, 12, _hoisted_9)) : createCommentVNode("", true),
+                  createElementVNode("circle", {
+                    cx: node.at.x,
+                    cy: node.at.y,
+                    r: unref(chrome).rotationHandle.size / 2,
+                    "stroke-width": "1.5",
+                    style: normalizeStyle(painted.value.rotationHandle)
+                  }, null, 12, _hoisted_10)
+                ])) : createCommentVNode("", true)
+              ], 64)) : node.kind === "marquee" ? (openBlock(), createElementBlock("rect", {
+                key: 5,
+                x: node.box.left,
+                y: node.box.top,
+                width: node.box.width,
+                height: node.box.height,
+                "stroke-width": "1",
+                "stroke-dasharray": "4 3",
+                style: normalizeStyle(painted.value.marquee)
+              }, null, 12, _hoisted_11)) : node.kind === "outline" ? (openBlock(), createElementBlock("rect", {
+                key: 6,
+                x: node.box.left,
+                y: node.box.top,
+                width: node.box.width,
+                height: node.box.height,
+                fill: "none",
+                style: normalizeStyle(painted.value.outline)
+              }, null, 12, _hoisted_12)) : createCommentVNode("", true)
+            ], 64);
+          }), 128))
+        ])),
+        hasHandles.value && (slots.handle || slots["rotation-handle"]) ? (openBlock(), createElementBlock("div", _hoisted_13, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(pixels.value, (node, index) => {
+            return openBlock(), createElementBlock(Fragment, { key: index }, [
+              node.kind === "handle" && slots.handle ? renderSlot(_ctx.$slots, "handle", {
+                at: node.at,
+                size: unref(chrome).handles.size,
+                rotation: node.rotation,
+                kind: node.role,
+                active: node.active
+              }, void 0, void 0, 0) : node.kind === "rotation-handle" && slots["rotation-handle"] ? renderSlot(_ctx.$slots, "rotation-handle", {
+                at: node.at,
+                from: node.from,
+                size: unref(chrome).rotationHandle.size,
+                rotation: 0,
+                active: false
+              }, void 0, void 0, 1) : createCommentVNode("", true)
+            ], 64);
+          }), 128))
+        ])) : createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
+const _hoisted_1$4 = ["inert"];
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  __name: "AnnotationFrame",
+  props: {
+    item: {},
+    page: {},
+    interactive: { type: Boolean, default: false },
+    inert: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const style = computed(() => {
+      const box = frameInPixels(props.item.frame, props.page.transform);
+      return {
+        position: "absolute",
+        left: `${box.left}px`,
+        top: `${box.top}px`,
+        width: `${box.width}px`,
+        height: `${box.height}px`,
+        transform: box.transform,
+        transformOrigin: "center",
+        // On the frame: a turned frame groups what is inside it, so blending on
+        // an inner element would stop blending with the page.
+        mixBlendMode: props.item.blend,
+        pointerEvents: props.interactive ? "auto" : "none"
+      };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        inert: __props.inert || void 0,
+        style: normalizeStyle(style.value)
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 12, _hoisted_1$4);
+    };
+  }
+});
+function useTextBoxEditor(item, scale) {
+  const element = shallowRef(null);
+  const annotation = useOptionalCapability(AnnotationToken$1);
+  const follower = createTextBoxEditorFollower();
+  watch(
+    [annotation, element, () => toValue(item), () => toValue(scale)],
+    ([capability, target, current, pixelsPerPoint]) => follower.follow(target, capability, current, pixelsPerPoint),
+    { immediate: true, flush: "post" }
+  );
+  onScopeDispose(() => follower.detach());
+  return element;
+}
+const LookScaleKey = Symbol("embedpdf annotation look scale");
+const UNSCALED = computed(() => 1);
+function provideLookScale(scale) {
+  provide(LookScaleKey, scale);
+}
+const NO_STYLE = Object.freeze({});
+function useRichTextEditor(annotation) {
+  const page = usePage();
+  const item = useOptionalSelector(
+    AnnotationToken$1,
+    (host) => {
+      const { transform } = page.value;
+      return host.getTextItem(toValue(annotation).ref, {
+        zoom: transform.zoom,
+        rotation: transform.rotation
+      });
+    },
+    null
+  );
+  const lookScale = inject(LookScaleKey, UNSCALED);
+  const scale = computed(
+    () => textBoxEditorScaleOf(item.value, page.value.transform, lookScale.value)
+  );
+  const own = computed(() => item.value ? ownTextBoxOf(item.value, scale.value) : null);
+  const element = useTextBoxEditor(item, () => {
+    var _a;
+    return ((_a = own.value) == null ? void 0 : _a.scale) ?? scale.value;
+  });
+  const style = computed(() => {
+    var _a;
+    return ((_a = own.value) == null ? void 0 : _a.style) ?? NO_STYLE;
+  });
+  return {
+    ref: (target) => {
+      element.value = target instanceof HTMLElement ? target : null;
+    },
+    style,
+    editing: computed(() => {
+      var _a;
+      return ((_a = item.value) == null ? void 0 : _a.editing) ?? false;
+    })
+  };
+}
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "AnnotationLook",
+  props: {
+    component: {},
+    scaled: { type: Boolean },
+    annotation: {},
+    item: {},
+    page: {},
+    native: {},
+    appearance: {},
+    interactive: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const pixels = computed(() => frameInPixels(props.item.frame, props.page.transform));
+    const frame = computed(() => lookFrameOf(pixels.value, props.scaled));
+    provideLookScale(computed(() => props.scaled ? pixels.value.scale : 1));
+    const scaledBox = computed(
+      () => ({
+        position: "absolute",
+        left: 0,
+        top: 0,
+        width: `${pixels.value.design.width}px`,
+        height: `${pixels.value.design.height}px`,
+        transform: `scale(${pixels.value.scale})`,
+        transformOrigin: "0 0"
+      })
+    );
+    return (_ctx, _cache) => {
+      return __props.scaled ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        style: normalizeStyle(scaledBox.value)
+      }, [
+        (openBlock(), createBlock(resolveDynamicComponent(__props.component), {
+          annotation: __props.annotation,
+          frame: frame.value,
+          native: __props.native,
+          appearance: __props.appearance,
+          hovered: __props.item.hovered ?? false,
+          selected: __props.item.selected,
+          interactive: __props.interactive
+        }, null, 8, ["annotation", "frame", "native", "appearance", "hovered", "selected", "interactive"]))
+      ], 4)) : (openBlock(), createBlock(resolveDynamicComponent(__props.component), {
+        key: 1,
+        annotation: __props.annotation,
+        frame: frame.value,
+        native: __props.native,
+        appearance: __props.appearance,
+        hovered: __props.item.hovered ?? false,
+        selected: __props.item.selected,
+        interactive: __props.interactive
+      }, null, 8, ["annotation", "frame", "native", "appearance", "hovered", "selected", "interactive"]));
+    };
+  }
+});
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  __name: "FreeTextBox",
+  props: {
+    item: {},
+    page: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const chrome = useAnnotationSettings((settings) => settings.chrome);
+    const accent = useViewerSettings((settings) => settings.accent);
+    const outline = computed(() => annotationChromePaint(chrome.value, accent.value).textOutline);
+    const box = computed(() => freeTextBoxOf(props.item, props.page.transform, outline.value));
+    const element = useTextBoxEditor(
+      () => props.item,
+      () => box.value.scale
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "element",
+        ref: element,
+        style: normalizeStyle(box.value.style)
+      }, null, 4);
+    };
+  }
+});
+const _hoisted_1$3 = ["viewBox"];
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "AnnotationScene",
+  props: {
+    item: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const viewBox = computed(() => sceneViewBox(props.item.box));
+    const shapes = computed(() => svgShapesOf(scene(props.item), { miterLimit: MITER_LIMIT }));
+    const style = computed(
+      () => ({
+        position: "absolute",
+        left: 0,
+        top: 0,
+        width: "100%",
+        height: "100%",
+        overflow: "visible",
+        pointerEvents: "none",
+        // A ghost is see-through as a whole, so its fill and stroke don't stack.
+        ...props.item.source === "ghost" ? { opacity: ghostOpacity(props.item.ghostOpacity ?? 0.5) } : {}
+      })
+    );
+    return (_ctx, _cache) => {
+      return viewBox.value ? (openBlock(), createElementBlock("svg", {
+        key: 0,
+        viewBox: viewBox.value,
+        style: normalizeStyle(style.value)
+      }, [
+        createVNode(_sfc_main$b, { shapes: shapes.value }, null, 8, ["shapes"])
+      ], 12, _hoisted_1$3)) : createCommentVNode("", true);
+    };
+  }
+});
+const _hoisted_1$2 = ["src"];
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "NativeDrawing",
+  props: {
+    item: {},
+    urls: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const shows = computed(() => {
+      var _a;
+      const { item, urls } = props;
+      return pictureOrPainting({
+        pending: item.source !== "baked",
+        picture: urls && shownAppearance(urls, item.id, ((_a = item.annotation) == null ? void 0 : _a.appearanceState) ?? null),
+        version: item.pictureVersion ?? 0,
+        loaded: urls !== null,
+        paint: () => hasLiveDrawing(item) ? item : null
+      });
+    });
+    const baked = computed(() => {
+      const { item } = props;
+      const look = shows.value;
+      if ((look == null ? void 0 : look.kind) !== "picture" || !item.raster) return null;
+      const box = rasterInFrame(item.raster, item.frame);
+      return {
+        url: look.picture.url,
+        style: {
+          position: "absolute",
+          left: box.left,
+          top: box.top,
+          width: box.width,
+          height: box.height,
+          // The appearance box is sized in content units; a global
+          // `img { max-width: 100% }` reset would otherwise clamp it to the
+          // containing block and distort the aspect (a landscape stamp on a turned,
+          // portrait page), so honour the explicit size.
+          maxWidth: "none",
+          maxHeight: "none",
+          pointerEvents: "none",
+          // The turn the engine took out of the raster, put back about its middle.
+          transform: box.transform,
+          transformOrigin: "center"
+        }
+      };
+    });
+    return (_ctx, _cache) => {
+      var _a;
+      return baked.value ? (openBlock(), createElementBlock("img", {
+        key: 0,
+        src: baked.value.url,
+        alt: "",
+        draggable: "false",
+        style: normalizeStyle(baked.value.style)
+      }, null, 12, _hoisted_1$2)) : ((_a = shows.value) == null ? void 0 : _a.kind) === "painting" ? (openBlock(), createBlock(_sfc_main$6, {
+        key: 1,
+        item: __props.item
+      }, null, 8, ["item"])) : createCommentVNode("", true);
+    };
+  }
+});
+const _hoisted_1$1 = ["src"];
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "StampGhost",
+  props: {
+    page: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const annotation = useOptionalCapability(AnnotationToken$1);
+    const ghost = useOptionalSelector(
+      AnnotationToken$1,
+      (host) => host.getImageGhost(props.page.ref),
+      null
+    );
+    const armed = useOptionalSelector(AnnotationToken$1, (host) => host.getArmedStamp(), null);
+    const bucket = computed(
+      () => ghost.value ? previewBucket(ghost.value.box.width * props.page.transform.renderScale) : 0
+    );
+    const url = ref(null);
+    watch(
+      [annotation, armed, bucket],
+      ([host, _armed, size], _previous, onCleanup) => {
+        if (!host || !size) {
+          url.value = null;
+          return;
+        }
+        onCleanup(
+          loadObjectUrl(
+            () => host.renderArmedStampPreview(size),
+            (next) => url.value = next
+          )
+        );
+      },
+      { immediate: true }
+    );
+    const style = computed(() => {
+      const current = ghost.value;
+      if (!current) return null;
+      const frame = rectInPixels(current.box, props.page.transform);
+      return {
+        position: "absolute",
+        left: `${frame.left}px`,
+        top: `${frame.top}px`,
+        width: `${frame.width}px`,
+        height: `${frame.height}px`,
+        // Never let a global `img` reset clamp the box and distort the aspect.
+        maxWidth: "none",
+        maxHeight: "none",
+        pointerEvents: "none",
+        opacity: ghostOpacity(current.opacity),
+        ...current.rot ? { transform: `rotate(${current.rot}deg)`, transformOrigin: "center" } : {}
+      };
+    });
+    return (_ctx, _cache) => {
+      return style.value && url.value ? (openBlock(), createElementBlock("img", {
+        key: 0,
+        src: url.value,
+        alt: "",
+        draggable: "false",
+        style: normalizeStyle(style.value)
+      }, null, 12, _hoisted_1$1)) : createCommentVNode("", true);
+    };
+  }
+});
+const _hoisted_1 = { style: { position: "absolute", inset: 0, pointerEvents: "none" } };
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "AnnotationLayer",
+  props: {
+    renderers: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = useSlots();
+    const NO_ITEMS = Object.freeze([]);
+    const NO_TEXTS = Object.freeze([]);
+    const page = usePage();
+    usePaintsPagePart(
+      computed(() => page.value.ref),
+      "annotations"
+    );
+    const annotation = useOptionalCapability(AnnotationToken$1);
+    const interaction = useOptionalCapability(InteractionToken);
+    const activeToolId = useOptionalSelector(
+      InteractionToken,
+      (hub) => hub.getActiveToolId(),
+      ""
+    );
+    const items = useOptionalSelector(
+      AnnotationToken$1,
+      (host) => {
+        const { transform, ref: ref2 } = page.value;
+        return host.listPageItems(ref2, { zoom: transform.zoom, rotation: transform.rotation });
+      },
+      NO_ITEMS,
+      shallowEqual
+    );
+    const texts = useOptionalSelector(
+      AnnotationToken$1,
+      (host) => {
+        const { transform, ref: ref2 } = page.value;
+        return host.listTextItems(ref2, { zoom: transform.zoom, rotation: transform.rotation });
+      },
+      NO_TEXTS,
+      shallowEqual
+    );
+    const registrations = shallowRef(0);
+    watch(
+      [annotation, () => props.renderers],
+      ([host, renderers], previous, onCleanup) => {
+        const before = previous == null ? void 0 : previous[1];
+        if (renderers && before && renderers !== before && shallowEqual(renderers, before)) {
+          devWarn(
+            "annotation-renderers-inline",
+            "<AnnotationLayer :renderers> was given a new array with the same entries — define it once in <script setup>, because entry identity keys the behavior registration."
+          );
+        }
+        if (host && renderers) {
+          onCleanup(
+            registerRendererBehaviors(
+              host,
+              renderers,
+              () => {
+                var _a;
+                return String(((_a = interaction.value) == null ? void 0 : _a.getActiveToolId()) ?? "");
+              }
+            )
+          );
+        }
+        registrations.value += 1;
+      },
+      { immediate: true }
+    );
+    const urls = shallowRef(null);
+    const shown = createShownUrls();
+    onUnmounted(() => shown.release());
+    const bakedKey = useOptionalSelector(
+      AnnotationToken$1,
+      (host) => host.getAppearanceEpoch(page.value.ref),
+      ""
+    );
+    const bakeScale = useOptionalSelector(
+      RenderToken,
+      (render) => render.getAppearanceScale(page.value.transform.renderScale),
+      page.value.transform.renderScale
+    );
+    watch(
+      [annotation, () => page.value.ref, bakeScale, bakedKey],
+      ([host, pageRef, scale], _previous, onCleanup) => {
+        if (!host || !scale) return;
+        onCleanup(
+          loadAppearanceUrls(
+            shown,
+            (signal) => host.renderAppearances(pageRef, scale, signal),
+            annotationKey,
+            (loaded) => urls.value = loaded
+          )
+        );
+      },
+      { immediate: true }
+    );
+    const editingKey = computed(() => editingTextKeyOf(texts.value, annotationKey));
+    const NATIVE = { kind: "native", inert: false };
+    const drawn = computed(() => {
+      void activeToolId.value;
+      void registrations.value;
+      const host = annotation.value;
+      const renderers = props.renderers;
+      return items.value.map((item) => {
+        const record = item.annotation ?? null;
+        if (!record || !host) return { item, annotation: null, drawing: NATIVE };
+        const typing = editingKey.value !== null && annotationKey(record.ref) === editingKey.value;
+        return { item, annotation: record, drawing: annotationDrawingOf(record, host, renderers, typing) };
+      });
+    });
+    const ownTexts = computed(
+      () => layerTextBoxesOf(texts.value, items.value, props.renderers, annotationKey)
+    );
+    const itemsById = computed(() => new Map(items.value.map((item) => [item.id, item])));
+    const natives = /* @__PURE__ */ new Map();
+    const framedNatives = /* @__PURE__ */ new Map();
+    function nativeOf(id) {
+      let native = natives.get(id);
+      if (!native) {
+        native = markRaw(() => {
+          const item = itemsById.value.get(id);
+          return item ? h(_sfc_main$5, { item, urls: urls.value }) : null;
+        });
+        natives.set(id, native);
+      }
+      return native;
+    }
+    function framedNativeOf(id) {
+      let native = framedNatives.get(id);
+      if (!native) {
+        native = markRaw(() => {
+          const item = itemsById.value.get(id);
+          return item ? h(_sfc_main$9, { item, page: page.value }, () => h(nativeOf(id))) : null;
+        });
+        framedNatives.set(id, native);
+      }
+      return native;
+    }
+    watch(itemsById, (shown2) => {
+      for (const id of natives.keys()) if (!shown2.has(id)) natives.delete(id);
+      for (const id of framedNatives.keys()) if (!shown2.has(id)) framedNatives.delete(id);
+    });
+    const componentOf = (component) => toRaw(component);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(drawn.value, ({ item, annotation: record, drawing }) => {
+          return openBlock(), createElementBlock(Fragment, {
+            key: item.id
+          }, [
+            drawing.kind === "owned" && record ? (openBlock(), createBlock(resolveDynamicComponent(componentOf(drawing.entry.component)), {
+              key: 0,
+              annotation: record,
+              item,
+              page: unref(page),
+              native: framedNativeOf(item.id),
+              hovered: item.hovered ?? false,
+              selected: item.selected,
+              interactive: true
+            }, null, 8, ["annotation", "item", "page", "native", "hovered", "selected"])) : drawing.kind === "look" && record ? (openBlock(), createBlock(_sfc_main$9, {
+              key: 1,
+              item,
+              page: unref(page),
+              interactive: drawing.interactive,
+              inert: drawing.inert
+            }, {
+              default: withCtx(() => {
+                var _a;
+                return [
+                  createVNode(_sfc_main$8, {
+                    component: componentOf(drawing.entry.component),
+                    scaled: drawing.entry.scale !== false,
+                    annotation: record,
+                    item,
+                    page: unref(page),
+                    native: nativeOf(item.id),
+                    appearance: urls.value && unref(bakedAppearanceOf)(urls.value, item.id, ((_a = item.annotation) == null ? void 0 : _a.appearanceState) ?? null),
+                    interactive: drawing.interactive
+                  }, null, 8, ["component", "scaled", "annotation", "item", "page", "native", "appearance", "interactive"])
+                ];
+              }),
+              _: 2
+            }, 1032, ["item", "page", "interactive", "inert"])) : (openBlock(), createBlock(_sfc_main$9, {
+              key: 2,
+              item,
+              page: unref(page),
+              inert: drawing.kind === "native" && drawing.inert
+            }, {
+              default: withCtx(() => [
+                createVNode(_sfc_main$5, {
+                  item,
+                  urls: urls.value
+                }, null, 8, ["item", "urls"])
+              ]),
+              _: 2
+            }, 1032, ["item", "page", "inert"]))
+          ], 64);
+        }), 128)),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(ownTexts.value, (text) => {
+          return openBlock(), createBlock(_sfc_main$7, {
+            key: text.id,
+            item: text,
+            page: unref(page)
+          }, null, 8, ["item", "page"]);
+        }), 128)),
+        createVNode(_sfc_main$4, { page: unref(page) }, null, 8, ["page"]),
+        createVNode(_sfc_main$a, { page: unref(page) }, createSlots({ _: 2 }, [
+          slots.handle ? {
+            name: "handle",
+            fn: withCtx((handle) => [
+              renderSlot(_ctx.$slots, "handle", normalizeProps(guardReactiveProps(handle)))
+            ]),
+            key: "0"
+          } : void 0,
+          slots["rotation-handle"] ? {
+            name: "rotation-handle",
+            fn: withCtx((handle) => [
+              renderSlot(_ctx.$slots, "rotation-handle", normalizeProps(guardReactiveProps(handle)))
+            ]),
+            key: "1"
+          } : void 0
+        ]), 1032, ["page"])
+      ]);
+    };
+  }
+});
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "AnnotationMenu",
+  props: {
+    gap: { default: 15 },
+    placement: { default: "top" }
+  },
+  setup(__props) {
+    const binding = useProjectorBinding();
+    const anchor = useOptionalSelector(
+      AnnotationToken$1,
+      (host) => {
+        const selection = host.selection.getAnchor();
+        if (!selection) return null;
+        const view = binding.value.projector.viewEnv(selection.page);
+        return view ? host.getSelectionAnchorIn(view) : selection;
+      },
+      null,
+      sameSelectionAnchor
+    );
+    return (_ctx, _cache) => {
+      return unref(anchor) ? (openBlock(), createBlock(_sfc_main$c, {
+        key: 0,
+        anchor: {
+          page: unref(anchor).page,
+          bounds: unref(anchor).bounds,
+          ...unref(anchor).rotationHandle ? { avoid: [unref(anchor).rotationHandle] } : {}
+        },
+        placement: __props.placement,
+        gap: __props.gap
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["anchor", "placement", "gap"])) : createCommentVNode("", true);
+    };
+  }
+});
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "AnnotationDraftMenu",
+  props: {
+    gap: { default: 8 },
+    placement: { default: "top" }
+  },
+  setup(__props) {
+    const draft = useOptionalSelector(
+      AnnotationToken$2,
+      (annotation) => annotation.draft.get(),
+      null,
+      sameCreationDraftAnchor
+    );
+    return (_ctx, _cache) => {
+      return unref(draft) ? (openBlock(), createBlock(_sfc_main$c, {
+        key: 0,
+        anchor: unref(draft),
+        placement: __props.placement,
+        gap: __props.gap
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", { draft: unref(draft) })
+        ]),
+        _: 3
+      }, 8, ["anchor", "placement", "gap"])) : createCommentVNode("", true);
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "AnnotationRotationBadge",
+  props: {
+    gap: { default: 16 },
+    placement: { default: "right" }
+  },
+  setup(__props) {
+    const slots = useSlots();
+    const rotation = useOptionalSelector(
+      AnnotationToken$2,
+      (annotation) => annotation.selection.getRotationAnchor(),
+      null,
+      sameRotationAnchor
+    );
+    const readout = useAnnotationSettings((settings) => settings.chrome.readout);
+    const badge = computed(
+      () => ({
+        pointerEvents: "none",
+        whiteSpace: "nowrap",
+        borderRadius: "4px",
+        padding: "2px 6px",
+        fontFamily: paintDefault("font-mono"),
+        fontSize: "12px",
+        background: paint("readout-background", readout.value.background),
+        color: paint("readout-color", readout.value.color)
+      })
+    );
+    return (_ctx, _cache) => {
+      return unref(rotation) && (slots.default || unref(readout).enabled) ? (openBlock(), createBlock(_sfc_main$c, {
+        key: 0,
+        anchor: { page: unref(rotation).page, bounds: { ...unref(rotation).at, width: 0, height: 0 } },
+        placement: __props.placement,
+        gap: __props.gap
+      }, {
+        default: withCtx(() => [
+          slots.default ? renderSlot(_ctx.$slots, "default", { rotation: unref(rotation) }, void 0, void 0, 0) : (openBlock(), createElementBlock("div", {
+            key: 1,
+            style: normalizeStyle(badge.value)
+          }, toDisplayString(unref(rotation).angle) + "°", 5))
+        ]),
+        _: 3
+      }, 8, ["anchor", "placement", "gap"])) : createCommentVNode("", true);
+    };
+  }
+});
+function useAnnotation() {
+  return useCapability(AnnotationToken$2);
+}
+function useAnnotationEvent(select, handler) {
+  useCapabilityEvent(AnnotationToken$2, select, handler);
+}
+const NO_ANNOTATIONS = Object.freeze([]);
+function useAnnotationList(filter) {
+  return useOptionalSelector(
+    AnnotationToken$2,
+    (annotation) => annotation.list(toValue(filter)),
+    NO_ANNOTATIONS,
+    shallowEqual
+  );
+}
+const NO_DEFAULTS = Object.freeze({});
+function useAnnotationDefaults(toolId) {
+  return useOptionalSelector(
+    AnnotationToken$2,
+    (annotation) => annotation.tools.getDefaults(toValue(toolId)),
+    NO_DEFAULTS
+  );
+}
+const NO_PROPERTIES = Object.freeze({
+  properties: [],
+  values: {},
+  mixed: []
+});
+function useAnnotationProperties(toolId) {
+  return useOptionalSelector(
+    AnnotationToken$2,
+    (annotation) => {
+      const tool = toValue(toolId);
+      return tool === void 0 ? annotation.selection.getProperties() : annotation.tools.getProperties(tool);
+    },
+    NO_PROPERTIES
+  );
+}
+function useAnnotationAnchor(ref2) {
+  return useOptionalSelector(
+    AnnotationToken$1,
+    (annotation) => {
+      const wanted = toValue(ref2);
+      return wanted ? annotation.getAnnotationAnchor(wanted) : null;
+    },
+    null,
+    sameAnnotationAnchor
+  );
+}
+function useComments() {
+  const annotation = useAnnotation();
+  const target = markRaw({});
+  return new Proxy(target, {
+    get: (_target, key) => typeof key === "string" && key.startsWith("__v_") ? Reflect.get(target, key) : Reflect.get(annotation.comments, key),
+    has: (_target, key) => Reflect.has(annotation.comments, key)
+  });
+}
+const NO_PAGES = Object.freeze([]);
+const NO_THREADS = Object.freeze([]);
+function useCommentThreads() {
+  const documentId = useDocumentId();
+  const threads = useOptionalSelector(
+    AnnotationToken$2,
+    (annotation) => annotation.comments.listThreads(),
+    NO_THREADS
+  );
+  const pages = useKernelValue(
+    (kernel) => documentId.value ? kernel.documents.listPages(documentId.value) : NO_PAGES
+  );
+  return computed(() => enrichCommentThreads(threads.value, pages.value));
+}
+function useCommentThread(ref2) {
+  const views = useCommentThreads();
+  const annotation = useOptionalCapability(AnnotationToken$2);
+  return computed(() => {
+    const wanted = toValue(ref2);
+    const api = annotation.value;
+    if (wanted == null || !api) return null;
+    const thread = api.comments.getThread(wanted);
+    if (!thread) return null;
+    const root = annotationKey(thread.root.ref);
+    return views.value.find((view) => annotationKey(view.root.ref) === root) ?? null;
+  });
+}
+const filePickerProvider = pickRequestedFile;
+function useFilePickerProvider(provider = filePickerProvider) {
+  const annotation = useOptionalCapability(AnnotationToken$2);
+  watch(
+    [annotation, () => unref(provider)],
+    ([capability, current], _previous, onCleanup) => {
+      if (!capability) return;
+      onCleanup(
+        installFilePickerProvider(
+          capability,
+          current,
+          () => devWarn(
+            "file-picker-provider-twice",
+            "useFilePickerProvider() is called from two mounted components for the same document — the later one wins. Call it once, at a document-scoped spot."
+          )
+        )
+      );
+    },
+    { immediate: true }
+  );
+}
+export {
+  _sfc_main$1 as _,
+  _sfc_main$3 as a,
+  _sfc_main$2 as b,
+  _sfc_main as c,
+  useAnnotationAnchor as d,
+  useAnnotationDefaults as e,
+  filePickerProvider as f,
+  useAnnotationEvent as g,
+  useAnnotationList as h,
+  useAnnotationProperties as i,
+  useAnnotationSettings as j,
+  useAnnotationState as k,
+  useCommentThread as l,
+  useCommentThreads as m,
+  useComments as n,
+  useFilePickerProvider as o,
+  useRichTextEditor as p,
+  useAnnotation as u
+};
+//# sourceMappingURL=composables-DK3lwh38.js.map