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

package/dist/composables-Bi6QvJpj.cjs

@@ -0,0 +1,978 @@
+"use strict";
+const vue = require("vue");
+const core = require("@embedpdf/core");
+const host = require("@embedpdf/plugin-annotation/contract/host");
+const contract$1 = require("@embedpdf/plugin-interaction/contract");
+const host$1 = require("@embedpdf/plugin-render/contract/host");
+const web = require("@embedpdf/web");
+const dev = require("./dev-eeIS2B4c.cjs");
+const pageLayers = require("./page-layers-c-CJYAUO.cjs");
+const capabilities = require("./capabilities-DVNJmgy7.cjs");
+const page = require("./page-Doy4_Sdz.cjs");
+const documents = require("./documents-TQ1fMdWI.cjs");
+const coreAnnotation = require("@embedpdf/core-annotation");
+const SvgShapes_vue_vue_type_script_setup_true_lang = require("./SvgShapes.vue_vue_type_script_setup_true_lang-D_c-wINF.cjs");
+const Anchored_vue_vue_type_script_setup_true_lang = require("./Anchored.vue_vue_type_script_setup_true_lang-BEImlFso.cjs");
+const projector = require("./projector-Cf7879sx.cjs");
+const pluginAnnotation = require("@embedpdf/plugin-annotation");
+const contract = require("@embedpdf/plugin-annotation/contract");
+const state = require("./state-M22NDJQo.cjs");
+const useAnnotationState = state.stateComposable(contract.annotationState);
+const useAnnotationSettings = state.settingsComposable(contract.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__ */ vue.defineComponent({
+  __name: "AnnotationChrome",
+  props: {
+    page: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = vue.useSlots();
+    const NO_NODES = Object.freeze([]);
+    const nodes = capabilities.useOptionalSelector(
+      host.AnnotationToken,
+      (host2) => {
+        const { transform, ref } = props.page;
+        return host2.listChromeNodes(ref, transform.viewScale, transform.rotation, transform.zoom);
+      },
+      NO_NODES,
+      core.shallowEqual
+    );
+    const chrome = useAnnotationSettings((settings) => settings.chrome);
+    const accent = documents.useViewerSettings((settings) => settings.accent);
+    const painted = vue.computed(() => {
+      const paint = web.annotationChromePaint(chrome.value, accent.value);
+      const style = (part) => ({ ...part });
+      return {
+        outline: style(paint.outline),
+        handle: style(paint.handle),
+        rotationHandle: style(paint.rotationHandle),
+        rotationStalk: style({ stroke: paint.rotationHandle.stroke }),
+        guide: style(paint.guide),
+        rotationGuide: style(paint.rotationGuide),
+        marquee: style(paint.marquee)
+      };
+    });
+    const pixels = vue.computed(() => web.chromeInPixels(nodes.value, props.page.transform));
+    const hasHandles = vue.computed(
+      () => pixels.value.some((node) => node.kind === "handle" || node.kind === "rotation-handle")
+    );
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+        (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$5, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(pixels.value, (node, index) => {
+            return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: index }, [
+              node.kind === "handle" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                !slots.handle ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                  vue.unref(chrome).handles.shape === "circle" ? (vue.openBlock(), vue.createElementBlock("circle", {
+                    key: 0,
+                    cx: node.at.x,
+                    cy: node.at.y,
+                    r: vue.unref(chrome).handles.size / 2,
+                    "stroke-width": "1.5",
+                    style: vue.normalizeStyle(painted.value.handle)
+                  }, null, 12, _hoisted_2)) : (vue.openBlock(), vue.createElementBlock("rect", {
+                    key: 1,
+                    x: node.at.x - vue.unref(chrome).handles.size / 2,
+                    y: node.at.y - vue.unref(chrome).handles.size / 2,
+                    width: vue.unref(chrome).handles.size,
+                    height: vue.unref(chrome).handles.size,
+                    "stroke-width": "1.5",
+                    style: vue.normalizeStyle(painted.value.handle),
+                    transform: node.rotation ? `rotate(${node.rotation} ${node.at.x} ${node.at.y})` : void 0
+                  }, null, 12, _hoisted_3))
+                ], 64)) : vue.createCommentVNode("", true)
+              ], 64)) : node.kind === "guide" ? (vue.openBlock(), vue.createElementBlock("line", {
+                key: 1,
+                x1: node.from.x,
+                y1: node.from.y,
+                x2: node.to.x,
+                y2: node.to.y,
+                "shape-rendering": "crispEdges",
+                style: vue.normalizeStyle(painted.value.guide)
+              }, null, 12, _hoisted_4)) : node.kind === "turned-outline" ? (vue.openBlock(), vue.createElementBlock("polygon", {
+                key: 2,
+                points: node.points,
+                fill: "none",
+                style: vue.normalizeStyle(painted.value.outline)
+              }, null, 12, _hoisted_5)) : node.kind === "rotation-guides" ? (vue.openBlock(), vue.createElementBlock("g", _hoisted_6, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(node.lines, (line, lineIndex) => {
+                  return vue.openBlock(), vue.createElementBlock("line", {
+                    key: lineIndex,
+                    x1: line.from.x,
+                    y1: line.from.y,
+                    x2: line.to.x,
+                    y2: line.to.y,
+                    opacity: line.opacity,
+                    style: vue.normalizeStyle(painted.value.rotationGuide)
+                  }, null, 12, _hoisted_7);
+                }), 128))
+              ])) : node.kind === "rotation-handle" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 4 }, [
+                !slots["rotation-handle"] ? (vue.openBlock(), vue.createElementBlock("g", _hoisted_8, [
+                  vue.unref(chrome).rotationHandle.stalk ? (vue.openBlock(), vue.createElementBlock("line", {
+                    key: 0,
+                    x1: node.from.x,
+                    y1: node.from.y,
+                    x2: node.at.x,
+                    y2: node.at.y,
+                    "stroke-width": "1",
+                    style: vue.normalizeStyle(painted.value.rotationStalk)
+                  }, null, 12, _hoisted_9)) : vue.createCommentVNode("", true),
+                  vue.createElementVNode("circle", {
+                    cx: node.at.x,
+                    cy: node.at.y,
+                    r: vue.unref(chrome).rotationHandle.size / 2,
+                    "stroke-width": "1.5",
+                    style: vue.normalizeStyle(painted.value.rotationHandle)
+                  }, null, 12, _hoisted_10)
+                ])) : vue.createCommentVNode("", true)
+              ], 64)) : node.kind === "marquee" ? (vue.openBlock(), vue.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: vue.normalizeStyle(painted.value.marquee)
+              }, null, 12, _hoisted_11)) : node.kind === "outline" ? (vue.openBlock(), vue.createElementBlock("rect", {
+                key: 6,
+                x: node.box.left,
+                y: node.box.top,
+                width: node.box.width,
+                height: node.box.height,
+                fill: "none",
+                style: vue.normalizeStyle(painted.value.outline)
+              }, null, 12, _hoisted_12)) : vue.createCommentVNode("", true)
+            ], 64);
+          }), 128))
+        ])),
+        hasHandles.value && (slots.handle || slots["rotation-handle"]) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(pixels.value, (node, index) => {
+            return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: index }, [
+              node.kind === "handle" && slots.handle ? vue.renderSlot(_ctx.$slots, "handle", {
+                at: node.at,
+                size: vue.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"] ? vue.renderSlot(_ctx.$slots, "rotation-handle", {
+                at: node.at,
+                from: node.from,
+                size: vue.unref(chrome).rotationHandle.size,
+                rotation: 0,
+                active: false
+              }, void 0, void 0, 1) : vue.createCommentVNode("", true)
+            ], 64);
+          }), 128))
+        ])) : vue.createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
+const _hoisted_1$4 = ["inert"];
+const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+  __name: "AnnotationFrame",
+  props: {
+    item: {},
+    page: {},
+    interactive: { type: Boolean, default: false },
+    inert: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const style = vue.computed(() => {
+      const box = web.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 vue.openBlock(), vue.createElementBlock("div", {
+        inert: __props.inert || void 0,
+        style: vue.normalizeStyle(style.value)
+      }, [
+        vue.renderSlot(_ctx.$slots, "default")
+      ], 12, _hoisted_1$4);
+    };
+  }
+});
+function useTextBoxEditor(item, scale) {
+  const element = vue.shallowRef(null);
+  const annotation = capabilities.useOptionalCapability(host.AnnotationToken);
+  const follower = web.createTextBoxEditorFollower();
+  vue.watch(
+    [annotation, element, () => vue.toValue(item), () => vue.toValue(scale)],
+    ([capability, target, current, pixelsPerPoint]) => follower.follow(target, capability, current, pixelsPerPoint),
+    { immediate: true, flush: "post" }
+  );
+  vue.onScopeDispose(() => follower.detach());
+  return element;
+}
+const LookScaleKey = Symbol("embedpdf annotation look scale");
+const UNSCALED = vue.computed(() => 1);
+function provideLookScale(scale) {
+  vue.provide(LookScaleKey, scale);
+}
+const NO_STYLE = Object.freeze({});
+function useRichTextEditor(annotation) {
+  const page$1 = page.usePage();
+  const item = capabilities.useOptionalSelector(
+    host.AnnotationToken,
+    (host2) => {
+      const { transform } = page$1.value;
+      return host2.getTextItem(vue.toValue(annotation).ref, {
+        zoom: transform.zoom,
+        rotation: transform.rotation
+      });
+    },
+    null
+  );
+  const lookScale = vue.inject(LookScaleKey, UNSCALED);
+  const scale = vue.computed(
+    () => web.textBoxEditorScaleOf(item.value, page$1.value.transform, lookScale.value)
+  );
+  const own = vue.computed(() => item.value ? web.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 = vue.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: vue.computed(() => {
+      var _a;
+      return ((_a = item.value) == null ? void 0 : _a.editing) ?? false;
+    })
+  };
+}
+const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+  __name: "AnnotationLook",
+  props: {
+    component: {},
+    scaled: { type: Boolean },
+    annotation: {},
+    item: {},
+    page: {},
+    native: {},
+    appearance: {},
+    interactive: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const pixels = vue.computed(() => web.frameInPixels(props.item.frame, props.page.transform));
+    const frame = vue.computed(() => web.lookFrameOf(pixels.value, props.scaled));
+    provideLookScale(vue.computed(() => props.scaled ? pixels.value.scale : 1));
+    const scaledBox = vue.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 ? (vue.openBlock(), vue.createElementBlock("div", {
+        key: 0,
+        style: vue.normalizeStyle(scaledBox.value)
+      }, [
+        (vue.openBlock(), vue.createBlock(vue.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)) : (vue.openBlock(), vue.createBlock(vue.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__ */ vue.defineComponent({
+  __name: "FreeTextBox",
+  props: {
+    item: {},
+    page: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const chrome = useAnnotationSettings((settings) => settings.chrome);
+    const accent = documents.useViewerSettings((settings) => settings.accent);
+    const outline = vue.computed(() => web.annotationChromePaint(chrome.value, accent.value).textOutline);
+    const box = vue.computed(() => web.freeTextBoxOf(props.item, props.page.transform, outline.value));
+    const element = useTextBoxEditor(
+      () => props.item,
+      () => box.value.scale
+    );
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "element",
+        ref: element,
+        style: vue.normalizeStyle(box.value.style)
+      }, null, 4);
+    };
+  }
+});
+const _hoisted_1$3 = ["viewBox"];
+const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+  __name: "AnnotationScene",
+  props: {
+    item: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const viewBox = vue.computed(() => web.sceneViewBox(props.item.box));
+    const shapes = vue.computed(() => web.svgShapesOf(coreAnnotation.scene(props.item), { miterLimit: coreAnnotation.MITER_LIMIT }));
+    const style = vue.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: web.ghostOpacity(props.item.ghostOpacity ?? 0.5) } : {}
+      })
+    );
+    return (_ctx, _cache) => {
+      return viewBox.value ? (vue.openBlock(), vue.createElementBlock("svg", {
+        key: 0,
+        viewBox: viewBox.value,
+        style: vue.normalizeStyle(style.value)
+      }, [
+        vue.createVNode(SvgShapes_vue_vue_type_script_setup_true_lang._sfc_main, { shapes: shapes.value }, null, 8, ["shapes"])
+      ], 12, _hoisted_1$3)) : vue.createCommentVNode("", true);
+    };
+  }
+});
+const _hoisted_1$2 = ["src"];
+const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+  __name: "NativeDrawing",
+  props: {
+    item: {},
+    urls: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const shows = vue.computed(() => {
+      var _a;
+      const { item, urls } = props;
+      return web.pictureOrPainting({
+        pending: item.source !== "baked",
+        picture: urls && web.shownAppearance(urls, item.id, ((_a = item.annotation) == null ? void 0 : _a.appearanceState) ?? null),
+        version: item.pictureVersion ?? 0,
+        loaded: urls !== null,
+        paint: () => coreAnnotation.hasLiveDrawing(item) ? item : null
+      });
+    });
+    const baked = vue.computed(() => {
+      const { item } = props;
+      const look = shows.value;
+      if ((look == null ? void 0 : look.kind) !== "picture" || !item.raster) return null;
+      const box = web.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 ? (vue.openBlock(), vue.createElementBlock("img", {
+        key: 0,
+        src: baked.value.url,
+        alt: "",
+        draggable: "false",
+        style: vue.normalizeStyle(baked.value.style)
+      }, null, 12, _hoisted_1$2)) : ((_a = shows.value) == null ? void 0 : _a.kind) === "painting" ? (vue.openBlock(), vue.createBlock(_sfc_main$6, {
+        key: 1,
+        item: __props.item
+      }, null, 8, ["item"])) : vue.createCommentVNode("", true);
+    };
+  }
+});
+const _hoisted_1$1 = ["src"];
+const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+  __name: "StampGhost",
+  props: {
+    page: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const annotation = capabilities.useOptionalCapability(host.AnnotationToken);
+    const ghost = capabilities.useOptionalSelector(
+      host.AnnotationToken,
+      (host2) => host2.getImageGhost(props.page.ref),
+      null
+    );
+    const armed = capabilities.useOptionalSelector(host.AnnotationToken, (host2) => host2.getArmedStamp(), null);
+    const bucket = vue.computed(
+      () => ghost.value ? host.previewBucket(ghost.value.box.width * props.page.transform.renderScale) : 0
+    );
+    const url = vue.ref(null);
+    vue.watch(
+      [annotation, armed, bucket],
+      ([host2, _armed, size], _previous, onCleanup) => {
+        if (!host2 || !size) {
+          url.value = null;
+          return;
+        }
+        onCleanup(
+          web.loadObjectUrl(
+            () => host2.renderArmedStampPreview(size),
+            (next) => url.value = next
+          )
+        );
+      },
+      { immediate: true }
+    );
+    const style = vue.computed(() => {
+      const current = ghost.value;
+      if (!current) return null;
+      const frame = web.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: web.ghostOpacity(current.opacity),
+        ...current.rot ? { transform: `rotate(${current.rot}deg)`, transformOrigin: "center" } : {}
+      };
+    });
+    return (_ctx, _cache) => {
+      return style.value && url.value ? (vue.openBlock(), vue.createElementBlock("img", {
+        key: 0,
+        src: url.value,
+        alt: "",
+        draggable: "false",
+        style: vue.normalizeStyle(style.value)
+      }, null, 12, _hoisted_1$1)) : vue.createCommentVNode("", true);
+    };
+  }
+});
+const _hoisted_1 = { style: { position: "absolute", inset: 0, pointerEvents: "none" } };
+const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+  __name: "AnnotationLayer",
+  props: {
+    renderers: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = vue.useSlots();
+    const NO_ITEMS = Object.freeze([]);
+    const NO_TEXTS = Object.freeze([]);
+    const page$1 = page.usePage();
+    pageLayers.usePaintsPagePart(
+      vue.computed(() => page$1.value.ref),
+      "annotations"
+    );
+    const annotation = capabilities.useOptionalCapability(host.AnnotationToken);
+    const interaction = capabilities.useOptionalCapability(contract$1.InteractionToken);
+    const activeToolId = capabilities.useOptionalSelector(
+      contract$1.InteractionToken,
+      (hub) => hub.getActiveToolId(),
+      ""
+    );
+    const items = capabilities.useOptionalSelector(
+      host.AnnotationToken,
+      (host2) => {
+        const { transform, ref } = page$1.value;
+        return host2.listPageItems(ref, { zoom: transform.zoom, rotation: transform.rotation });
+      },
+      NO_ITEMS,
+      core.shallowEqual
+    );
+    const texts = capabilities.useOptionalSelector(
+      host.AnnotationToken,
+      (host2) => {
+        const { transform, ref } = page$1.value;
+        return host2.listTextItems(ref, { zoom: transform.zoom, rotation: transform.rotation });
+      },
+      NO_TEXTS,
+      core.shallowEqual
+    );
+    const registrations = vue.shallowRef(0);
+    vue.watch(
+      [annotation, () => props.renderers],
+      ([host2, renderers], previous, onCleanup) => {
+        const before = previous == null ? void 0 : previous[1];
+        if (renderers && before && renderers !== before && core.shallowEqual(renderers, before)) {
+          dev.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 (host2 && renderers) {
+          onCleanup(
+            web.registerRendererBehaviors(
+              host2,
+              renderers,
+              () => {
+                var _a;
+                return String(((_a = interaction.value) == null ? void 0 : _a.getActiveToolId()) ?? "");
+              }
+            )
+          );
+        }
+        registrations.value += 1;
+      },
+      { immediate: true }
+    );
+    const urls = vue.shallowRef(null);
+    const shown = web.createShownUrls();
+    vue.onUnmounted(() => shown.release());
+    const bakedKey = capabilities.useOptionalSelector(
+      host.AnnotationToken,
+      (host2) => host2.getAppearanceEpoch(page$1.value.ref),
+      ""
+    );
+    const bakeScale = capabilities.useOptionalSelector(
+      host$1.RenderToken,
+      (render) => render.getAppearanceScale(page$1.value.transform.renderScale),
+      page$1.value.transform.renderScale
+    );
+    vue.watch(
+      [annotation, () => page$1.value.ref, bakeScale, bakedKey],
+      ([host2, pageRef, scale], _previous, onCleanup) => {
+        if (!host2 || !scale) return;
+        onCleanup(
+          web.loadAppearanceUrls(
+            shown,
+            (signal) => host2.renderAppearances(pageRef, scale, signal),
+            core.annotationKey,
+            (loaded) => urls.value = loaded
+          )
+        );
+      },
+      { immediate: true }
+    );
+    const editingKey = vue.computed(() => web.editingTextKeyOf(texts.value, core.annotationKey));
+    const NATIVE = { kind: "native", inert: false };
+    const drawn = vue.computed(() => {
+      void activeToolId.value;
+      void registrations.value;
+      const host2 = annotation.value;
+      const renderers = props.renderers;
+      return items.value.map((item) => {
+        const record = item.annotation ?? null;
+        if (!record || !host2) return { item, annotation: null, drawing: NATIVE };
+        const typing = editingKey.value !== null && core.annotationKey(record.ref) === editingKey.value;
+        return { item, annotation: record, drawing: web.annotationDrawingOf(record, host2, renderers, typing) };
+      });
+    });
+    const ownTexts = vue.computed(
+      () => web.layerTextBoxesOf(texts.value, items.value, props.renderers, core.annotationKey)
+    );
+    const itemsById = vue.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 = vue.markRaw(() => {
+          const item = itemsById.value.get(id);
+          return item ? vue.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 = vue.markRaw(() => {
+          const item = itemsById.value.get(id);
+          return item ? vue.h(_sfc_main$9, { item, page: page$1.value }, () => vue.h(nativeOf(id))) : null;
+        });
+        framedNatives.set(id, native);
+      }
+      return native;
+    }
+    vue.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) => vue.toRaw(component);
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(drawn.value, ({ item, annotation: record, drawing }) => {
+          return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+            key: item.id
+          }, [
+            drawing.kind === "owned" && record ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(componentOf(drawing.entry.component)), {
+              key: 0,
+              annotation: record,
+              item,
+              page: vue.unref(page$1),
+              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 ? (vue.openBlock(), vue.createBlock(_sfc_main$9, {
+              key: 1,
+              item,
+              page: vue.unref(page$1),
+              interactive: drawing.interactive,
+              inert: drawing.inert
+            }, {
+              default: vue.withCtx(() => {
+                var _a;
+                return [
+                  vue.createVNode(_sfc_main$8, {
+                    component: componentOf(drawing.entry.component),
+                    scaled: drawing.entry.scale !== false,
+                    annotation: record,
+                    item,
+                    page: vue.unref(page$1),
+                    native: nativeOf(item.id),
+                    appearance: urls.value && vue.unref(web.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"])) : (vue.openBlock(), vue.createBlock(_sfc_main$9, {
+              key: 2,
+              item,
+              page: vue.unref(page$1),
+              inert: drawing.kind === "native" && drawing.inert
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_sfc_main$5, {
+                  item,
+                  urls: urls.value
+                }, null, 8, ["item", "urls"])
+              ]),
+              _: 2
+            }, 1032, ["item", "page", "inert"]))
+          ], 64);
+        }), 128)),
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(ownTexts.value, (text) => {
+          return vue.openBlock(), vue.createBlock(_sfc_main$7, {
+            key: text.id,
+            item: text,
+            page: vue.unref(page$1)
+          }, null, 8, ["item", "page"]);
+        }), 128)),
+        vue.createVNode(_sfc_main$4, { page: vue.unref(page$1) }, null, 8, ["page"]),
+        vue.createVNode(_sfc_main$a, { page: vue.unref(page$1) }, vue.createSlots({ _: 2 }, [
+          slots.handle ? {
+            name: "handle",
+            fn: vue.withCtx((handle) => [
+              vue.renderSlot(_ctx.$slots, "handle", vue.normalizeProps(vue.guardReactiveProps(handle)))
+            ]),
+            key: "0"
+          } : void 0,
+          slots["rotation-handle"] ? {
+            name: "rotation-handle",
+            fn: vue.withCtx((handle) => [
+              vue.renderSlot(_ctx.$slots, "rotation-handle", vue.normalizeProps(vue.guardReactiveProps(handle)))
+            ]),
+            key: "1"
+          } : void 0
+        ]), 1032, ["page"])
+      ]);
+    };
+  }
+});
+const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+  __name: "AnnotationMenu",
+  props: {
+    gap: { default: 15 },
+    placement: { default: "top" }
+  },
+  setup(__props) {
+    const binding = projector.useProjectorBinding();
+    const anchor = capabilities.useOptionalSelector(
+      host.AnnotationToken,
+      (host2) => {
+        const selection = host2.selection.getAnchor();
+        if (!selection) return null;
+        const view = binding.value.projector.viewEnv(selection.page);
+        return view ? host2.getSelectionAnchorIn(view) : selection;
+      },
+      null,
+      web.sameSelectionAnchor
+    );
+    return (_ctx, _cache) => {
+      return vue.unref(anchor) ? (vue.openBlock(), vue.createBlock(Anchored_vue_vue_type_script_setup_true_lang._sfc_main, {
+        key: 0,
+        anchor: {
+          page: vue.unref(anchor).page,
+          bounds: vue.unref(anchor).bounds,
+          ...vue.unref(anchor).rotationHandle ? { avoid: [vue.unref(anchor).rotationHandle] } : {}
+        },
+        placement: __props.placement,
+        gap: __props.gap
+      }, {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["anchor", "placement", "gap"])) : vue.createCommentVNode("", true);
+    };
+  }
+});
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  __name: "AnnotationDraftMenu",
+  props: {
+    gap: { default: 8 },
+    placement: { default: "top" }
+  },
+  setup(__props) {
+    const draft = capabilities.useOptionalSelector(
+      pluginAnnotation.AnnotationToken,
+      (annotation) => annotation.draft.get(),
+      null,
+      web.sameCreationDraftAnchor
+    );
+    return (_ctx, _cache) => {
+      return vue.unref(draft) ? (vue.openBlock(), vue.createBlock(Anchored_vue_vue_type_script_setup_true_lang._sfc_main, {
+        key: 0,
+        anchor: vue.unref(draft),
+        placement: __props.placement,
+        gap: __props.gap
+      }, {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default", { draft: vue.unref(draft) })
+        ]),
+        _: 3
+      }, 8, ["anchor", "placement", "gap"])) : vue.createCommentVNode("", true);
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "AnnotationRotationBadge",
+  props: {
+    gap: { default: 16 },
+    placement: { default: "right" }
+  },
+  setup(__props) {
+    const slots = vue.useSlots();
+    const rotation = capabilities.useOptionalSelector(
+      pluginAnnotation.AnnotationToken,
+      (annotation) => annotation.selection.getRotationAnchor(),
+      null,
+      web.sameRotationAnchor
+    );
+    const readout = useAnnotationSettings((settings) => settings.chrome.readout);
+    const badge = vue.computed(
+      () => ({
+        pointerEvents: "none",
+        whiteSpace: "nowrap",
+        borderRadius: "4px",
+        padding: "2px 6px",
+        fontFamily: web.paintDefault("font-mono"),
+        fontSize: "12px",
+        background: web.paint("readout-background", readout.value.background),
+        color: web.paint("readout-color", readout.value.color)
+      })
+    );
+    return (_ctx, _cache) => {
+      return vue.unref(rotation) && (slots.default || vue.unref(readout).enabled) ? (vue.openBlock(), vue.createBlock(Anchored_vue_vue_type_script_setup_true_lang._sfc_main, {
+        key: 0,
+        anchor: { page: vue.unref(rotation).page, bounds: { ...vue.unref(rotation).at, width: 0, height: 0 } },
+        placement: __props.placement,
+        gap: __props.gap
+      }, {
+        default: vue.withCtx(() => [
+          slots.default ? vue.renderSlot(_ctx.$slots, "default", { rotation: vue.unref(rotation) }, void 0, void 0, 0) : (vue.openBlock(), vue.createElementBlock("div", {
+            key: 1,
+            style: vue.normalizeStyle(badge.value)
+          }, vue.toDisplayString(vue.unref(rotation).angle) + "°", 5))
+        ]),
+        _: 3
+      }, 8, ["anchor", "placement", "gap"])) : vue.createCommentVNode("", true);
+    };
+  }
+});
+function useAnnotation() {
+  return capabilities.useCapability(pluginAnnotation.AnnotationToken);
+}
+function useAnnotationEvent(select, handler) {
+  capabilities.useCapabilityEvent(pluginAnnotation.AnnotationToken, select, handler);
+}
+const NO_ANNOTATIONS = Object.freeze([]);
+function useAnnotationList(filter) {
+  return capabilities.useOptionalSelector(
+    pluginAnnotation.AnnotationToken,
+    (annotation) => annotation.list(vue.toValue(filter)),
+    NO_ANNOTATIONS,
+    core.shallowEqual
+  );
+}
+const NO_DEFAULTS = Object.freeze({});
+function useAnnotationDefaults(toolId) {
+  return capabilities.useOptionalSelector(
+    pluginAnnotation.AnnotationToken,
+    (annotation) => annotation.tools.getDefaults(vue.toValue(toolId)),
+    NO_DEFAULTS
+  );
+}
+const NO_PROPERTIES = Object.freeze({
+  properties: [],
+  values: {},
+  mixed: []
+});
+function useAnnotationProperties(toolId) {
+  return capabilities.useOptionalSelector(
+    pluginAnnotation.AnnotationToken,
+    (annotation) => {
+      const tool = vue.toValue(toolId);
+      return tool === void 0 ? annotation.selection.getProperties() : annotation.tools.getProperties(tool);
+    },
+    NO_PROPERTIES
+  );
+}
+function useAnnotationAnchor(ref) {
+  return capabilities.useOptionalSelector(
+    host.AnnotationToken,
+    (annotation) => {
+      const wanted = vue.toValue(ref);
+      return wanted ? annotation.getAnnotationAnchor(wanted) : null;
+    },
+    null,
+    web.sameAnnotationAnchor
+  );
+}
+function useComments() {
+  const annotation = useAnnotation();
+  const target = vue.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 = capabilities.useDocumentId();
+  const threads = capabilities.useOptionalSelector(
+    pluginAnnotation.AnnotationToken,
+    (annotation) => annotation.comments.listThreads(),
+    NO_THREADS
+  );
+  const pages = capabilities.useKernelValue(
+    (kernel) => documentId.value ? kernel.documents.listPages(documentId.value) : NO_PAGES
+  );
+  return vue.computed(() => web.enrichCommentThreads(threads.value, pages.value));
+}
+function useCommentThread(ref) {
+  const views = useCommentThreads();
+  const annotation = capabilities.useOptionalCapability(pluginAnnotation.AnnotationToken);
+  return vue.computed(() => {
+    const wanted = vue.toValue(ref);
+    const api = annotation.value;
+    if (wanted == null || !api) return null;
+    const thread = api.comments.getThread(wanted);
+    if (!thread) return null;
+    const root = core.annotationKey(thread.root.ref);
+    return views.value.find((view) => core.annotationKey(view.root.ref) === root) ?? null;
+  });
+}
+const filePickerProvider = web.pickRequestedFile;
+function useFilePickerProvider(provider = filePickerProvider) {
+  const annotation = capabilities.useOptionalCapability(pluginAnnotation.AnnotationToken);
+  vue.watch(
+    [annotation, () => vue.unref(provider)],
+    ([capability, current], _previous, onCleanup) => {
+      if (!capability) return;
+      onCleanup(
+        web.installFilePickerProvider(
+          capability,
+          current,
+          () => dev.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 }
+  );
+}
+exports._sfc_main = _sfc_main$1;
+exports._sfc_main$1 = _sfc_main$3;
+exports._sfc_main$2 = _sfc_main$2;
+exports._sfc_main$3 = _sfc_main;
+exports.filePickerProvider = filePickerProvider;
+exports.useAnnotation = useAnnotation;
+exports.useAnnotationAnchor = useAnnotationAnchor;
+exports.useAnnotationDefaults = useAnnotationDefaults;
+exports.useAnnotationEvent = useAnnotationEvent;
+exports.useAnnotationList = useAnnotationList;
+exports.useAnnotationProperties = useAnnotationProperties;
+exports.useAnnotationSettings = useAnnotationSettings;
+exports.useAnnotationState = useAnnotationState;
+exports.useCommentThread = useCommentThread;
+exports.useCommentThreads = useCommentThreads;
+exports.useComments = useComments;
+exports.useFilePickerProvider = useFilePickerProvider;
+exports.useRichTextEditor = useRichTextEditor;
+//# sourceMappingURL=composables-Bi6QvJpj.cjs.map