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

package/dist/SearchLayer.vue_vue_type_script_setup_true_lang-BlLIPH1B.js

@@ -0,0 +1,118 @@
+import { toValue, defineComponent, computed, unref, openBlock, createElementBlock, Fragment, renderList, normalizeStyle, createElementVNode, createCommentVNode } from "vue";
+import { createClickDetector, searchHighlightsOf, paint } from "@embedpdf/web";
+import { u as usePage } from "./page-D9XIuLSj.js";
+import { SearchToken, searchState } from "@embedpdf/plugin-search";
+import { i as useOptionalSelector, a as useCapability, b as useCapabilityEvent } from "./capabilities-C7YzgPCX.js";
+import { a as stateComposable, s as settingsComposable } from "./state-DZg8q3v6.js";
+function useSearch() {
+  return useCapability(SearchToken);
+}
+function useSearchEvent(select, handler) {
+  useCapabilityEvent(SearchToken, select, handler);
+}
+const useSearchState = stateComposable(searchState);
+const useSearchSettings = settingsComposable(SearchToken);
+const NO_HITS = Object.freeze([]);
+function useSearchHits(page) {
+  return useOptionalSelector(
+    SearchToken,
+    (search) => {
+      const wanted = toValue(page);
+      return search.listHits(wanted === void 0 ? void 0 : { page: wanted });
+    },
+    NO_HITS
+  );
+}
+const _hoisted_1 = {
+  key: 0,
+  style: { position: "absolute", inset: 0, pointerEvents: "none" }
+};
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = ["points", "onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SearchLayer",
+  props: {
+    onHitClick: { type: Function }
+  },
+  setup(__props) {
+    const props = __props;
+    const page = usePage();
+    const hits = useSearchHits(() => page.value.ref);
+    const active = useSearchState((state) => state.activeHit);
+    const highlight = useSearchSettings((settings) => settings.highlight);
+    const clicks = createClickDetector();
+    const pieces = computed(
+      () => searchHighlightsOf(hits.value, {
+        active: active.value,
+        page: page.value.transform,
+        // Each color is its CSS variable first, then the setting: CSS wins.
+        color: paint("search-highlight", highlight.value.color),
+        activeColor: paint("search-highlight-active", highlight.value.activeColor)
+      })
+    );
+    const blendMode = computed(
+      () => paint("search-blend-mode", highlight.value.blendMode)
+    );
+    const clickable = computed(
+      () => props.onHitClick ? { pointerEvents: "auto", cursor: "pointer" } : {}
+    );
+    function onPress(event) {
+      if (props.onHitClick) clicks.press(event);
+    }
+    function onClick(hit, event) {
+      if (props.onHitClick && clicks.isClick(event)) props.onHitClick(hit);
+    }
+    return (_ctx, _cache) => {
+      return unref(hits).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_1, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(pieces.value, (piece) => {
+          return openBlock(), createElementBlock(Fragment, {
+            key: piece.key
+          }, [
+            piece.box ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              style: normalizeStyle({
+                position: "absolute",
+                left: `${piece.box.left}px`,
+                top: `${piece.box.top}px`,
+                width: `${piece.box.width}px`,
+                height: `${piece.box.height}px`,
+                backgroundColor: piece.fill,
+                mixBlendMode: blendMode.value,
+                borderRadius: "2px",
+                ...clickable.value
+              }),
+              onPointerdown: onPress,
+              onClick: ($event) => onClick(piece.hit, $event)
+            }, null, 44, _hoisted_2)) : (openBlock(), createElementBlock("svg", {
+              key: 1,
+              style: normalizeStyle({
+                position: "absolute",
+                inset: 0,
+                width: "100%",
+                height: "100%",
+                overflow: "visible",
+                mixBlendMode: blendMode.value
+              })
+            }, [
+              createElementVNode("polygon", {
+                points: piece.points ?? "",
+                style: normalizeStyle({ fill: piece.fill, ...clickable.value }),
+                onPointerdown: onPress,
+                onClick: ($event) => onClick(piece.hit, $event)
+              }, null, 44, _hoisted_3)
+            ], 4))
+          ], 64);
+        }), 128))
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as _,
+  useSearchEvent as a,
+  useSearchHits as b,
+  useSearchSettings as c,
+  useSearchState as d,
+  useSearch as u
+};
+//# sourceMappingURL=SearchLayer.vue_vue_type_script_setup_true_lang-BlLIPH1B.js.map

package/dist/SearchLayer.vue_vue_type_script_setup_true_lang-BlLIPH1B.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchLayer.vue_vue_type_script_setup_true_lang-BlLIPH1B.js","sources":["../src/search/composables.ts","../src/search/SearchLayer.vue"],"sourcesContent":["/**\n * The search composables: `useSearch()` (the API), `useSearchState()`,\n * `useSearchSettings()`, `useSearchEvent()`, and `useSearchHits()` for a\n * results list or a count per page.\n */\nimport { toValue } from 'vue';\nimport type { MaybeRefOrGetter, Ref } from 'vue';\nimport { SearchToken, searchState } from '@embedpdf/plugin-search';\nimport type { SearchCapability, SearchHit } from '@embedpdf/plugin-search';\nimport type { EventHook, PageRef } from '@embedpdf/core';\nimport { useCapability, useCapabilityEvent, useOptionalSelector } from '../runtime/capabilities';\nimport { settingsComposable, stateComposable } from '../state';\n\n/** The search API (`search`, `clear`, `nextHit`, `goToHit`, …) for your chrome. The object never changes. */\nexport function useSearch(): SearchCapability {\n  return useCapability(SearchToken);\n}\n\n/** Subscribe to one search event while the component lives: `useSearchEvent((search) => search.onCompleted, handler)`. */\nexport function useSearchEvent<Event>(\n  select: (search: SearchCapability) => EventHook<Event>,\n  handler: (event: Event) => void,\n): void {\n  useCapabilityEvent(SearchToken, select, handler);\n}\n\n/**\n * The search's state as refs: the query, status, count, active match, progress\n * and error (the page's State table, declared once in `searchState`). With a\n * selector, one ref that updates only when the value it picks changes.\n */\nexport const useSearchState = stateComposable(searchState);\n\n/** The search settings (`reveal`, `highlight`), with or without a document, as refs. Takes a selector. */\nexport const useSearchSettings = settingsComposable(SearchToken);\n\nconst NO_HITS: readonly SearchHit[] = Object.freeze([]);\n\n/**\n * Every match found so far, or one page's (its ref or index; a getter to\n * follow a prop), as a ref: for a results list or a count per thumbnail. The\n * plugin hands out the same array until matches land on what it covers, so\n * the ref updates only then. Empty without a document, and for a page that\n * isn't in the document.\n */\nexport function useSearchHits(\n  page?: MaybeRefOrGetter<PageRef | number | undefined>,\n): Readonly<Ref<readonly SearchHit[]>> {\n  return useOptionalSelector(\n    SearchToken,\n    (search) => {\n      const wanted = toValue(page);\n      return search.listHits(wanted === undefined ? undefined : { page: wanted });\n    },\n    NO_HITS,\n  );\n}\n","<!--\n  <SearchLayer>: the matches on one page, painted from the plugin's page-space\n  hits through the page's transform, in the plugin's `highlight` colors, which\n  the `--epdf-search-*` CSS variables override. It never calls the engine:\n  search is driven from your chrome with `useSearch()`. With `@hit-click`, a\n  click on a match tells you which one.\n-->\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { CSSProperties } from 'vue';\nimport type { SearchHit } from '@embedpdf/plugin-search';\nimport { createClickDetector, paint, searchHighlightsOf } from '@embedpdf/web';\nimport { usePage } from '../runtime/page';\nimport { useSearchHits, useSearchSettings, useSearchState } from './composables';\n\nconst props = defineProps<{\n  /**\n   * `@hit-click`: makes the matches clickable, and is called with the match\n   * someone clicks, for example to make it the active one with\n   * `search.goToHit(hit)`. The press still reaches the page, so a drag that\n   * starts on a match selects text, and only a click calls it. Without it,\n   * matches are only paint and the pointer goes straight through.\n   *\n   * A prop rather than an emitted event, so the layer knows whether you\n   * listen: only then do the matches take the pointer.\n   */\n  onHitClick?: (hit: SearchHit) => void;\n}>();\n\nconst page = usePage();\n// The plugin hands out the same array per page until matches land on it, so\n// this changes only then.\nconst hits = useSearchHits(() => page.value.ref);\nconst active = useSearchState((state) => state.activeHit);\nconst highlight = useSearchSettings((settings) => settings.highlight);\n// Tells a click on a match from a drag that starts there (and selects text).\nconst clicks = createClickDetector();\n\n/** One painted piece per segment of each match: a rounded box when upright, its true quad when turned. */\nconst pieces = computed(() =>\n  searchHighlightsOf(hits.value, {\n    active: active.value,\n    page: page.value.transform,\n    // Each color is its CSS variable first, then the setting: CSS wins.\n    color: paint('search-highlight', highlight.value.color),\n    activeColor: paint('search-highlight-active', highlight.value.activeColor),\n  }),\n);\n\nconst blendMode = computed(\n  () => paint('search-blend-mode', highlight.value.blendMode) as CSSProperties['mixBlendMode'],\n);\n\n// Only a clickable match takes the pointer; a plain highlight stays inert.\nconst clickable = computed(\n  (): CSSProperties => (props.onHitClick ? { pointerEvents: 'auto', cursor: 'pointer' } : {}),\n);\n\n// Nothing here stops the press, so it reaches the page as well.\nfunction onPress(event: PointerEvent): void {\n  if (props.onHitClick) clicks.press(event);\n}\nfunction onClick(hit: SearchHit, event: MouseEvent): void {\n  if (props.onHitClick && clicks.isClick(event)) props.onHitClick(hit);\n}\n</script>\n\n<template>\n  <div v-if=\"hits.length > 0\" :style=\"{ position: 'absolute', inset: 0, pointerEvents: 'none' }\">\n    <template v-for=\"piece in pieces\" :key=\"piece.key\">\n      <div\n        v-if=\"piece.box\"\n        :style=\"{\n          position: 'absolute',\n          left: `${piece.box.left}px`,\n          top: `${piece.box.top}px`,\n          width: `${piece.box.width}px`,\n          height: `${piece.box.height}px`,\n          backgroundColor: piece.fill,\n          mixBlendMode: blendMode,\n          borderRadius: '2px',\n          ...clickable,\n        }\"\n        @pointerdown=\"onPress\"\n        @click=\"onClick(piece.hit, $event)\"\n      />\n      <svg\n        v-else\n        :style=\"{\n          position: 'absolute',\n          inset: 0,\n          width: '100%',\n          height: '100%',\n          overflow: 'visible',\n          mixBlendMode: blendMode,\n        }\"\n      >\n        <!-- The fill goes in `style`: an SVG attribute doesn't read var(). -->\n        <polygon\n          :points=\"piece.points ?? ''\"\n          :style=\"{ fill: piece.fill, ...clickable }\"\n          @pointerdown=\"onPress\"\n          @click=\"onClick(piece.hit, $event)\"\n        />\n      </svg>\n    </template>\n  </div>\n</template>\n"],"names":["_unref","_openBlock","_createElementBlock","_Fragment","_renderList","_normalizeStyle","_createElementVNode"],"mappings":";;;;;;AAcO,SAAS,YAA8B;AAC5C,SAAO,cAAc,WAAW;AAClC;AAGO,SAAS,eACd,QACA,SACM;AACN,qBAAmB,aAAa,QAAQ,OAAO;AACjD;AAOO,MAAM,iBAAiB,gBAAgB,WAAW;AAGlD,MAAM,oBAAoB,mBAAmB,WAAW;AAE/D,MAAM,UAAgC,OAAO,OAAO,EAAE;AAS/C,SAAS,cACd,MACqC;AACrC,SAAO;AAAA,IACL;AAAA,IACA,CAAC,WAAW;AACV,YAAM,SAAS,QAAQ,IAAI;AAC3B,aAAO,OAAO,SAAS,WAAW,SAAY,SAAY,EAAE,MAAM,QAAQ;AAAA,IAC5E;AAAA,IACA;AAAA,EAAA;AAEJ;;;;;;;;;;;;;ACzCA,UAAM,QAAQ;AAcd,UAAM,OAAO,QAAA;AAGb,UAAM,OAAO,cAAc,MAAM,KAAK,MAAM,GAAG;AAC/C,UAAM,SAAS,eAAe,CAAC,UAAU,MAAM,SAAS;AACxD,UAAM,YAAY,kBAAkB,CAAC,aAAa,SAAS,SAAS;AAEpE,UAAM,SAAS,oBAAA;AAGf,UAAM,SAAS;AAAA,MAAS,MACtB,mBAAmB,KAAK,OAAO;AAAA,QAC7B,QAAQ,OAAO;AAAA,QACf,MAAM,KAAK,MAAM;AAAA;AAAA,QAEjB,OAAO,MAAM,oBAAoB,UAAU,MAAM,KAAK;AAAA,QACtD,aAAa,MAAM,2BAA2B,UAAU,MAAM,WAAW;AAAA,MAAA,CAC1E;AAAA,IAAA;AAGH,UAAM,YAAY;AAAA,MAChB,MAAM,MAAM,qBAAqB,UAAU,MAAM,SAAS;AAAA,IAAA;AAI5D,UAAM,YAAY;AAAA,MAChB,MAAsB,MAAM,aAAa,EAAE,eAAe,QAAQ,QAAQ,cAAc,CAAA;AAAA,IAAC;AAI3F,aAAS,QAAQ,OAA2B;AAC1C,UAAI,MAAM,WAAY,QAAO,MAAM,KAAK;AAAA,IAC1C;AACA,aAAS,QAAQ,KAAgB,OAAyB;AACxD,UAAI,MAAM,cAAc,OAAO,QAAQ,KAAK,EAAG,OAAM,WAAW,GAAG;AAAA,IACrE;;AAIa,aAAAA,MAAA,IAAA,EAAK,SAAM,KAAtBC,aAAAC,mBAsCM,OAtCN,YAsCM;AAAA,0BArCJA,mBAoCWC,UAAA,MAAAC,WApCe,OAAA,OAAM,CAAf,UAAK;;YAAkB,KAAA,MAAM;AAAA,UAAA;YAEpC,MAAM,oBADdF,mBAeE,OAAA;AAAA;cAbC,OAAKG,eAAA;AAAA;yBAAuD,MAAM,IAAI,IAAI;AAAA,wBAAwB,MAAM,IAAI,GAAG;AAAA,0BAA0B,MAAM,IAAI,KAAK;AAAA,2BAA2B,MAAM,IAAI,MAAM;AAAA,gBAAiC,iBAAA,MAAM;AAAA,8BAA8B,UAAA;AAAA;mBAAuD,UAAA;AAAA,cAAA;cAW/T,eAAa;AAAA,cACb,qBAAO,QAAQ,MAAM,KAAK,MAAM;AAAA,YAAA,0CAEnCH,mBAkBM,OAAA;AAAA;cAhBH,OAAKG,eAAA;AAAA;;;;;8BAAkK,UAAA;AAAA,cAAA;;cAUxKC,mBAKE,WAAA;AAAA,gBAJC,QAAQ,MAAM,UAAM;AAAA,gBACpB,OAAKD,eAAA,EAAA,MAAU,MAAM,SAAS,UAAA,OAAS;AAAA,gBACvC,eAAa;AAAA,gBACb,qBAAO,QAAQ,MAAM,KAAK,MAAM;AAAA,cAAA;;;;;;;;"}

package/dist/SearchLayer.vue_vue_type_script_setup_true_lang-CQozZCvB.cjs

@@ -0,0 +1,117 @@
+"use strict";
+const vue = require("vue");
+const web = require("@embedpdf/web");
+const page = require("./page-Doy4_Sdz.cjs");
+const pluginSearch = require("@embedpdf/plugin-search");
+const capabilities = require("./capabilities-DVNJmgy7.cjs");
+const state = require("./state-M22NDJQo.cjs");
+function useSearch() {
+  return capabilities.useCapability(pluginSearch.SearchToken);
+}
+function useSearchEvent(select, handler) {
+  capabilities.useCapabilityEvent(pluginSearch.SearchToken, select, handler);
+}
+const useSearchState = state.stateComposable(pluginSearch.searchState);
+const useSearchSettings = state.settingsComposable(pluginSearch.SearchToken);
+const NO_HITS = Object.freeze([]);
+function useSearchHits(page2) {
+  return capabilities.useOptionalSelector(
+    pluginSearch.SearchToken,
+    (search) => {
+      const wanted = vue.toValue(page2);
+      return search.listHits(wanted === void 0 ? void 0 : { page: wanted });
+    },
+    NO_HITS
+  );
+}
+const _hoisted_1 = {
+  key: 0,
+  style: { position: "absolute", inset: 0, pointerEvents: "none" }
+};
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = ["points", "onClick"];
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "SearchLayer",
+  props: {
+    onHitClick: { type: Function }
+  },
+  setup(__props) {
+    const props = __props;
+    const page$1 = page.usePage();
+    const hits = useSearchHits(() => page$1.value.ref);
+    const active = useSearchState((state2) => state2.activeHit);
+    const highlight = useSearchSettings((settings) => settings.highlight);
+    const clicks = web.createClickDetector();
+    const pieces = vue.computed(
+      () => web.searchHighlightsOf(hits.value, {
+        active: active.value,
+        page: page$1.value.transform,
+        // Each color is its CSS variable first, then the setting: CSS wins.
+        color: web.paint("search-highlight", highlight.value.color),
+        activeColor: web.paint("search-highlight-active", highlight.value.activeColor)
+      })
+    );
+    const blendMode = vue.computed(
+      () => web.paint("search-blend-mode", highlight.value.blendMode)
+    );
+    const clickable = vue.computed(
+      () => props.onHitClick ? { pointerEvents: "auto", cursor: "pointer" } : {}
+    );
+    function onPress(event) {
+      if (props.onHitClick) clicks.press(event);
+    }
+    function onClick(hit, event) {
+      if (props.onHitClick && clicks.isClick(event)) props.onHitClick(hit);
+    }
+    return (_ctx, _cache) => {
+      return vue.unref(hits).length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(pieces.value, (piece) => {
+          return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+            key: piece.key
+          }, [
+            piece.box ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              style: vue.normalizeStyle({
+                position: "absolute",
+                left: `${piece.box.left}px`,
+                top: `${piece.box.top}px`,
+                width: `${piece.box.width}px`,
+                height: `${piece.box.height}px`,
+                backgroundColor: piece.fill,
+                mixBlendMode: blendMode.value,
+                borderRadius: "2px",
+                ...clickable.value
+              }),
+              onPointerdown: onPress,
+              onClick: ($event) => onClick(piece.hit, $event)
+            }, null, 44, _hoisted_2)) : (vue.openBlock(), vue.createElementBlock("svg", {
+              key: 1,
+              style: vue.normalizeStyle({
+                position: "absolute",
+                inset: 0,
+                width: "100%",
+                height: "100%",
+                overflow: "visible",
+                mixBlendMode: blendMode.value
+              })
+            }, [
+              vue.createElementVNode("polygon", {
+                points: piece.points ?? "",
+                style: vue.normalizeStyle({ fill: piece.fill, ...clickable.value }),
+                onPointerdown: onPress,
+                onClick: ($event) => onClick(piece.hit, $event)
+              }, null, 44, _hoisted_3)
+            ], 4))
+          ], 64);
+        }), 128))
+      ])) : vue.createCommentVNode("", true);
+    };
+  }
+});
+exports._sfc_main = _sfc_main;
+exports.useSearch = useSearch;
+exports.useSearchEvent = useSearchEvent;
+exports.useSearchHits = useSearchHits;
+exports.useSearchSettings = useSearchSettings;
+exports.useSearchState = useSearchState;
+//# sourceMappingURL=SearchLayer.vue_vue_type_script_setup_true_lang-CQozZCvB.cjs.map

package/dist/SearchLayer.vue_vue_type_script_setup_true_lang-CQozZCvB.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchLayer.vue_vue_type_script_setup_true_lang-CQozZCvB.cjs","sources":["../src/search/composables.ts","../src/search/SearchLayer.vue"],"sourcesContent":["/**\n * The search composables: `useSearch()` (the API), `useSearchState()`,\n * `useSearchSettings()`, `useSearchEvent()`, and `useSearchHits()` for a\n * results list or a count per page.\n */\nimport { toValue } from 'vue';\nimport type { MaybeRefOrGetter, Ref } from 'vue';\nimport { SearchToken, searchState } from '@embedpdf/plugin-search';\nimport type { SearchCapability, SearchHit } from '@embedpdf/plugin-search';\nimport type { EventHook, PageRef } from '@embedpdf/core';\nimport { useCapability, useCapabilityEvent, useOptionalSelector } from '../runtime/capabilities';\nimport { settingsComposable, stateComposable } from '../state';\n\n/** The search API (`search`, `clear`, `nextHit`, `goToHit`, …) for your chrome. The object never changes. */\nexport function useSearch(): SearchCapability {\n  return useCapability(SearchToken);\n}\n\n/** Subscribe to one search event while the component lives: `useSearchEvent((search) => search.onCompleted, handler)`. */\nexport function useSearchEvent<Event>(\n  select: (search: SearchCapability) => EventHook<Event>,\n  handler: (event: Event) => void,\n): void {\n  useCapabilityEvent(SearchToken, select, handler);\n}\n\n/**\n * The search's state as refs: the query, status, count, active match, progress\n * and error (the page's State table, declared once in `searchState`). With a\n * selector, one ref that updates only when the value it picks changes.\n */\nexport const useSearchState = stateComposable(searchState);\n\n/** The search settings (`reveal`, `highlight`), with or without a document, as refs. Takes a selector. */\nexport const useSearchSettings = settingsComposable(SearchToken);\n\nconst NO_HITS: readonly SearchHit[] = Object.freeze([]);\n\n/**\n * Every match found so far, or one page's (its ref or index; a getter to\n * follow a prop), as a ref: for a results list or a count per thumbnail. The\n * plugin hands out the same array until matches land on what it covers, so\n * the ref updates only then. Empty without a document, and for a page that\n * isn't in the document.\n */\nexport function useSearchHits(\n  page?: MaybeRefOrGetter<PageRef | number | undefined>,\n): Readonly<Ref<readonly SearchHit[]>> {\n  return useOptionalSelector(\n    SearchToken,\n    (search) => {\n      const wanted = toValue(page);\n      return search.listHits(wanted === undefined ? undefined : { page: wanted });\n    },\n    NO_HITS,\n  );\n}\n","<!--\n  <SearchLayer>: the matches on one page, painted from the plugin's page-space\n  hits through the page's transform, in the plugin's `highlight` colors, which\n  the `--epdf-search-*` CSS variables override. It never calls the engine:\n  search is driven from your chrome with `useSearch()`. With `@hit-click`, a\n  click on a match tells you which one.\n-->\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { CSSProperties } from 'vue';\nimport type { SearchHit } from '@embedpdf/plugin-search';\nimport { createClickDetector, paint, searchHighlightsOf } from '@embedpdf/web';\nimport { usePage } from '../runtime/page';\nimport { useSearchHits, useSearchSettings, useSearchState } from './composables';\n\nconst props = defineProps<{\n  /**\n   * `@hit-click`: makes the matches clickable, and is called with the match\n   * someone clicks, for example to make it the active one with\n   * `search.goToHit(hit)`. The press still reaches the page, so a drag that\n   * starts on a match selects text, and only a click calls it. Without it,\n   * matches are only paint and the pointer goes straight through.\n   *\n   * A prop rather than an emitted event, so the layer knows whether you\n   * listen: only then do the matches take the pointer.\n   */\n  onHitClick?: (hit: SearchHit) => void;\n}>();\n\nconst page = usePage();\n// The plugin hands out the same array per page until matches land on it, so\n// this changes only then.\nconst hits = useSearchHits(() => page.value.ref);\nconst active = useSearchState((state) => state.activeHit);\nconst highlight = useSearchSettings((settings) => settings.highlight);\n// Tells a click on a match from a drag that starts there (and selects text).\nconst clicks = createClickDetector();\n\n/** One painted piece per segment of each match: a rounded box when upright, its true quad when turned. */\nconst pieces = computed(() =>\n  searchHighlightsOf(hits.value, {\n    active: active.value,\n    page: page.value.transform,\n    // Each color is its CSS variable first, then the setting: CSS wins.\n    color: paint('search-highlight', highlight.value.color),\n    activeColor: paint('search-highlight-active', highlight.value.activeColor),\n  }),\n);\n\nconst blendMode = computed(\n  () => paint('search-blend-mode', highlight.value.blendMode) as CSSProperties['mixBlendMode'],\n);\n\n// Only a clickable match takes the pointer; a plain highlight stays inert.\nconst clickable = computed(\n  (): CSSProperties => (props.onHitClick ? { pointerEvents: 'auto', cursor: 'pointer' } : {}),\n);\n\n// Nothing here stops the press, so it reaches the page as well.\nfunction onPress(event: PointerEvent): void {\n  if (props.onHitClick) clicks.press(event);\n}\nfunction onClick(hit: SearchHit, event: MouseEvent): void {\n  if (props.onHitClick && clicks.isClick(event)) props.onHitClick(hit);\n}\n</script>\n\n<template>\n  <div v-if=\"hits.length > 0\" :style=\"{ position: 'absolute', inset: 0, pointerEvents: 'none' }\">\n    <template v-for=\"piece in pieces\" :key=\"piece.key\">\n      <div\n        v-if=\"piece.box\"\n        :style=\"{\n          position: 'absolute',\n          left: `${piece.box.left}px`,\n          top: `${piece.box.top}px`,\n          width: `${piece.box.width}px`,\n          height: `${piece.box.height}px`,\n          backgroundColor: piece.fill,\n          mixBlendMode: blendMode,\n          borderRadius: '2px',\n          ...clickable,\n        }\"\n        @pointerdown=\"onPress\"\n        @click=\"onClick(piece.hit, $event)\"\n      />\n      <svg\n        v-else\n        :style=\"{\n          position: 'absolute',\n          inset: 0,\n          width: '100%',\n          height: '100%',\n          overflow: 'visible',\n          mixBlendMode: blendMode,\n        }\"\n      >\n        <!-- The fill goes in `style`: an SVG attribute doesn't read var(). -->\n        <polygon\n          :points=\"piece.points ?? ''\"\n          :style=\"{ fill: piece.fill, ...clickable }\"\n          @pointerdown=\"onPress\"\n          @click=\"onClick(piece.hit, $event)\"\n        />\n      </svg>\n    </template>\n  </div>\n</template>\n"],"names":["useCapability","SearchToken","useCapabilityEvent","stateComposable","searchState","settingsComposable","page","useOptionalSelector","toValue","usePage","state","createClickDetector","computed","searchHighlightsOf","paint","_unref","_openBlock","_createElementBlock","_Fragment","_renderList","_normalizeStyle","_createElementVNode"],"mappings":";;;;;;;AAcO,SAAS,YAA8B;AAC5C,SAAOA,aAAAA,cAAcC,aAAAA,WAAW;AAClC;AAGO,SAAS,eACd,QACA,SACM;AACNC,kCAAmBD,aAAAA,aAAa,QAAQ,OAAO;AACjD;AAOO,MAAM,iBAAiBE,MAAAA,gBAAgBC,aAAAA,WAAW;AAGlD,MAAM,oBAAoBC,MAAAA,mBAAmBJ,aAAAA,WAAW;AAE/D,MAAM,UAAgC,OAAO,OAAO,EAAE;AAS/C,SAAS,cACdK,OACqC;AACrC,SAAOC,aAAAA;AAAAA,IACLN,aAAAA;AAAAA,IACA,CAAC,WAAW;AACV,YAAM,SAASO,IAAAA,QAAQF,KAAI;AAC3B,aAAO,OAAO,SAAS,WAAW,SAAY,SAAY,EAAE,MAAM,QAAQ;AAAA,IAC5E;AAAA,IACA;AAAA,EAAA;AAEJ;;;;;;;;;;;;;ACzCA,UAAM,QAAQ;AAcd,UAAMA,SAAOG,KAAAA,QAAA;AAGb,UAAM,OAAO,cAAc,MAAMH,OAAK,MAAM,GAAG;AAC/C,UAAM,SAAS,eAAe,CAACI,WAAUA,OAAM,SAAS;AACxD,UAAM,YAAY,kBAAkB,CAAC,aAAa,SAAS,SAAS;AAEpE,UAAM,SAASC,IAAAA,oBAAA;AAGf,UAAM,SAASC,IAAAA;AAAAA,MAAS,MACtBC,IAAAA,mBAAmB,KAAK,OAAO;AAAA,QAC7B,QAAQ,OAAO;AAAA,QACf,MAAMP,OAAK,MAAM;AAAA;AAAA,QAEjB,OAAOQ,IAAAA,MAAM,oBAAoB,UAAU,MAAM,KAAK;AAAA,QACtD,aAAaA,IAAAA,MAAM,2BAA2B,UAAU,MAAM,WAAW;AAAA,MAAA,CAC1E;AAAA,IAAA;AAGH,UAAM,YAAYF,IAAAA;AAAAA,MAChB,MAAME,UAAM,qBAAqB,UAAU,MAAM,SAAS;AAAA,IAAA;AAI5D,UAAM,YAAYF,IAAAA;AAAAA,MAChB,MAAsB,MAAM,aAAa,EAAE,eAAe,QAAQ,QAAQ,cAAc,CAAA;AAAA,IAAC;AAI3F,aAAS,QAAQ,OAA2B;AAC1C,UAAI,MAAM,WAAY,QAAO,MAAM,KAAK;AAAA,IAC1C;AACA,aAAS,QAAQ,KAAgB,OAAyB;AACxD,UAAI,MAAM,cAAc,OAAO,QAAQ,KAAK,EAAG,OAAM,WAAW,GAAG;AAAA,IACrE;;AAIa,aAAAG,IAAAA,MAAA,IAAA,EAAK,SAAM,KAAtBC,IAAAA,aAAAC,IAAAA,mBAsCM,OAtCN,YAsCM;AAAA,8BArCJA,IAAAA,mBAoCWC,IAAAA,UAAA,MAAAC,IAAAA,WApCe,OAAA,OAAM,CAAf,UAAK;;YAAkB,KAAA,MAAM;AAAA,UAAA;YAEpC,MAAM,wBADdF,IAAAA,mBAeE,OAAA;AAAA;cAbC,OAAKG,IAAAA,eAAA;AAAA;yBAAuD,MAAM,IAAI,IAAI;AAAA,wBAAwB,MAAM,IAAI,GAAG;AAAA,0BAA0B,MAAM,IAAI,KAAK;AAAA,2BAA2B,MAAM,IAAI,MAAM;AAAA,gBAAiC,iBAAA,MAAM;AAAA,8BAA8B,UAAA;AAAA;mBAAuD,UAAA;AAAA,cAAA;cAW/T,eAAa;AAAA,cACb,qBAAO,QAAQ,MAAM,KAAK,MAAM;AAAA,YAAA,8CAEnCH,IAAAA,mBAkBM,OAAA;AAAA;cAhBH,OAAKG,IAAAA,eAAA;AAAA;;;;;8BAAkK,UAAA;AAAA,cAAA;;cAUxKC,IAAAA,mBAKE,WAAA;AAAA,gBAJC,QAAQ,MAAM,UAAM;AAAA,gBACpB,OAAKD,IAAAA,eAAA,EAAA,MAAU,MAAM,SAAS,UAAA,OAAS;AAAA,gBACvC,eAAa;AAAA,gBACb,qBAAO,QAAQ,MAAM,KAAK,MAAM;AAAA,cAAA;;;;;;;;;;;;;;"}

package/dist/SelectionClipboard.vue_vue_type_script_setup_true_lang-C4TUDuyu.js

@@ -0,0 +1,302 @@
+import { defineComponent, watch, computed, unref, openBlock, createElementBlock, Fragment, renderList, normalizeStyle, createCommentVNode, createBlock, withCtx, renderSlot, ref, createElementVNode, toValue } from "vue";
+import { shallowEqual } from "@embedpdf/core";
+import { SelectionToken as SelectionToken$1 } from "@embedpdf/plugin-selection/contract/host";
+import { paint, mixAccent, svgPoints, quadInPixels, samePageBounds, attachSelectionHandle, sameSelectionEndpoints, wireSelectionClipboard } from "@embedpdf/web";
+import { a as useCapability, b as useCapabilityEvent, h as useOptionalCapability, i as useOptionalSelector, g as useKernelValue } from "./capabilities-C7YzgPCX.js";
+import { e as useViewerSettings } from "./documents-DUu5H4yH.js";
+import { u as usePage } from "./page-D9XIuLSj.js";
+import { SelectionToken, selectionState, selectionHandleViewOf, selectionHandleGeom, selectionHandleEndpointsOf, HANDLE_HEAD, HANDLE_PAD, HANDLE_BAR, armSelectionHandle } from "@embedpdf/plugin-selection";
+import { _ as _sfc_main$4 } from "./Anchored.vue_vue_type_script_setup_true_lang-Brhh5jyF.js";
+import { u as useOptionalProjectorBinding } from "./projector-CDZn1kh1.js";
+import { d as devWarn } from "./dev-CtMlvxjZ.js";
+import { u as useStageToken } from "./scope-BgdCqnYb.js";
+import { a as stateComposable, s as settingsComposable } from "./state-DZg8q3v6.js";
+function useSelection() {
+  return useCapability(SelectionToken);
+}
+function useSelectionEvent(select, handler) {
+  useCapabilityEvent(SelectionToken, select, handler);
+}
+const useSelectionState = stateComposable(selectionState);
+const useSelectionSettings = settingsComposable(SelectionToken);
+const _hoisted_1 = {
+  key: 0,
+  style: {
+    position: "absolute",
+    inset: 0,
+    width: "100%",
+    height: "100%",
+    overflow: "visible",
+    pointerEvents: "none"
+  }
+};
+const _hoisted_2 = ["points"];
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "SelectionLayer",
+  setup(__props) {
+    const NO_SEGMENTS = Object.freeze([]);
+    const page = usePage();
+    const selection = useOptionalCapability(SelectionToken$1);
+    const segments = useOptionalSelector(
+      SelectionToken$1,
+      (lens) => lens.listSegments(page.value.ref),
+      NO_SEGMENTS,
+      shallowEqual
+    );
+    const visible = useOptionalSelector(SelectionToken$1, (lens) => lens.isHighlightVisible(), false);
+    const color = useSelectionSettings((settings) => settings.color);
+    const accent = useViewerSettings((settings) => settings.accent);
+    watch(
+      [selection, () => page.value.ref],
+      ([lens, pageRef]) => {
+        if (lens) void lens.ensureLoaded(pageRef);
+      },
+      { immediate: true }
+    );
+    const fill = computed(
+      () => paint("text-selection", color.value ?? mixAccent("text-selection", accent.value))
+    );
+    const polygons = computed(
+      () => segments.value.map((segment) => svgPoints(quadInPixels(segment.quad, page.value.transform)))
+    );
+    return (_ctx, _cache) => {
+      return unref(visible) ? (openBlock(), createElementBlock("svg", _hoisted_1, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(polygons.value, (points, index) => {
+          return openBlock(), createElementBlock("polygon", {
+            key: index,
+            points,
+            style: normalizeStyle({ fill: fill.value })
+          }, null, 12, _hoisted_2);
+        }), 128))
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "SelectionMenu",
+  props: {
+    gap: { default: 8 },
+    placement: { default: "top" }
+  },
+  setup(__props) {
+    const selecting = useSelectionState((state) => state.isSelecting);
+    const anchor = useOptionalSelector(
+      SelectionToken,
+      (selection) => selection.getAnchor(),
+      null,
+      samePageBounds
+    );
+    return (_ctx, _cache) => {
+      return !unref(selecting) && unref(anchor) ? (openBlock(), createBlock(_sfc_main$4, {
+        key: 0,
+        anchor: unref(anchor),
+        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: "SelectionHandles",
+  props: {
+    token: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const token = useStageToken(() => props.token);
+    const host = useCapability(SelectionToken$1);
+    const stage = useOptionalCapability(token);
+    const surface = useOptionalProjectorBinding();
+    if (!surface || surface.value.projector.space !== "overlay") {
+      devWarn(
+        "selection-handles-outside-stage",
+        "<SelectionHandles> renders nothing here: mount it in the <Stage> #overlay slot (a <PageView> has no camera to project the handles through)."
+      );
+    }
+    const selecting = useSelectionState((state) => state.isSelecting);
+    const visible = useOptionalSelector(SelectionToken$1, (lens) => lens.isHighlightVisible(), false);
+    const handles = useSelectionSettings((settings) => settings.handles);
+    const accent = useViewerSettings((settings) => settings.accent);
+    const endpoints = useOptionalSelector(
+      SelectionToken$1,
+      (lens) => selectionHandleEndpointsOf(lens.getSnapshot()),
+      null,
+      sameSelectionEndpoints
+    );
+    const camera = useKernelValue(() => {
+      var _a;
+      return ((_a = stage.value) == null ? void 0 : _a.listVisiblePages()) ?? null;
+    });
+    const dragging = ref(null);
+    const geometry = computed(() => {
+      void camera.value;
+      const lens = stage.value;
+      const ends = endpoints.value;
+      if (!lens || !ends) return null;
+      const view = selectionHandleViewOf(lens);
+      return {
+        start: selectionHandleGeom(view, ends.start, "start"),
+        end: selectionHandleGeom(view, ends.end, "end")
+      };
+    });
+    const shown = computed(
+      () => geometry.value !== null && visible.value && (!selecting.value || dragging.value !== null)
+    );
+    const color = computed(() => paint("text-selection-handle", handles.value.color ?? accent.value));
+    const shadow = computed(() => paint("text-selection-handle-shadow", handles.value.shadow));
+    function gripStyles(role) {
+      var _a;
+      const grip = (_a = geometry.value) == null ? void 0 : _a[role];
+      if (!grip) return null;
+      const barTop = HANDLE_PAD + (role === "start" ? HANDLE_HEAD : 0);
+      const pivotX = HANDLE_PAD + HANDLE_BAR / 2;
+      return {
+        grip: {
+          position: "absolute",
+          left: `${grip.bar.from.x - pivotX}px`,
+          top: `${grip.bar.from.y - barTop}px`,
+          width: `${HANDLE_BAR + 2 * HANDLE_PAD}px`,
+          height: `${grip.length + HANDLE_HEAD + 2 * HANDLE_PAD}px`,
+          // Upright text carries no transform: pixel-identical to an axis-aligned box.
+          ...grip.upright ? {} : { transform: `rotate(${grip.rotation}deg)`, transformOrigin: `${pivotX}px ${barTop}px` },
+          touchAction: "none",
+          cursor: "grab",
+          pointerEvents: "auto"
+        },
+        // The caret bar: the selection's own edge, the glyph's ink height at any tilt.
+        bar: {
+          position: "absolute",
+          left: `${HANDLE_PAD}px`,
+          top: `${barTop}px`,
+          width: `${HANDLE_BAR}px`,
+          height: `${grip.length}px`,
+          background: color.value,
+          borderRadius: `${HANDLE_BAR / 2}px`
+        },
+        // The head, flush against the bar: past the ascent at the start, past the
+        // baseline at the end, in the text's frame.
+        head: {
+          position: "absolute",
+          left: `${pivotX - HANDLE_HEAD / 2}px`,
+          top: `${role === "start" ? HANDLE_PAD : HANDLE_PAD + grip.length}px`,
+          width: `${HANDLE_HEAD}px`,
+          height: `${HANDLE_HEAD}px`,
+          borderRadius: "50%",
+          background: color.value,
+          boxShadow: shadow.value
+        }
+      };
+    }
+    const startStyles = computed(() => gripStyles("start"));
+    const endStyles = computed(() => gripStyles("end"));
+    function arm(role) {
+      const lens = stage.value;
+      const ends = endpoints.value;
+      if (!lens || !ends) return null;
+      const armed = armSelectionHandle(host, selectionHandleViewOf(lens), ends, role);
+      if (!armed) return null;
+      dragging.value = role;
+      return {
+        // The point the user grabbed: the bar's midpoint.
+        base: armed.base,
+        session: {
+          move: armed.drag.move,
+          end: () => {
+            armed.drag.end();
+            dragging.value = null;
+          }
+        }
+      };
+    }
+    const startGrip = ref(null);
+    const endGrip = ref(null);
+    for (const [role, element] of [
+      ["start", startGrip],
+      ["end", endGrip]
+    ]) {
+      watch(
+        element,
+        (grip, _previous, onCleanup) => {
+          if (grip) onCleanup(attachSelectionHandle(grip, { arm: () => arm(role) }));
+        },
+        { flush: "post" }
+      );
+    }
+    return (_ctx, _cache) => {
+      return shown.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        startStyles.value ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          ref_key: "startGrip",
+          ref: startGrip,
+          style: normalizeStyle(startStyles.value.grip)
+        }, [
+          createElementVNode("div", {
+            style: normalizeStyle(startStyles.value.bar)
+          }, null, 4),
+          createElementVNode("div", {
+            style: normalizeStyle(startStyles.value.head)
+          }, null, 4)
+        ], 4)) : createCommentVNode("", true),
+        endStyles.value ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          ref_key: "endGrip",
+          ref: endGrip,
+          style: normalizeStyle(endStyles.value.grip)
+        }, [
+          createElementVNode("div", {
+            style: normalizeStyle(endStyles.value.bar)
+          }, null, 4),
+          createElementVNode("div", {
+            style: normalizeStyle(endStyles.value.head)
+          }, null, 4)
+        ], 4)) : createCommentVNode("", true)
+      ], 64)) : createCommentVNode("", true);
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SelectionClipboard",
+  props: {
+    prefetch: { type: Boolean, default: true },
+    target: {}
+  },
+  emits: ["refused"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const selection = useOptionalCapability(SelectionToken);
+    watch(
+      [selection, () => props.prefetch, () => toValue(props.target)],
+      ([lens, prefetch, target], _previous, onCleanup) => {
+        if (!lens || props.target !== void 0 && !target) return;
+        onCleanup(
+          wireSelectionClipboard(lens, {
+            prefetch,
+            target: target ?? void 0,
+            onRefused: () => emit("refused")
+          })
+        );
+      },
+      { immediate: true, flush: "post" }
+    );
+    return (_ctx, _cache) => {
+      return null;
+    };
+  }
+});
+export {
+  _sfc_main as _,
+  _sfc_main$1 as a,
+  _sfc_main$3 as b,
+  _sfc_main$2 as c,
+  useSelectionEvent as d,
+  useSelectionSettings as e,
+  useSelectionState as f,
+  useSelection as u
+};
+//# sourceMappingURL=SelectionClipboard.vue_vue_type_script_setup_true_lang-C4TUDuyu.js.map

package/dist/SelectionClipboard.vue_vue_type_script_setup_true_lang-C4TUDuyu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionClipboard.vue_vue_type_script_setup_true_lang-C4TUDuyu.js","sources":["../src/selection/composables.ts","../src/selection/SelectionLayer.vue","../src/selection/SelectionMenu.vue","../src/selection/SelectionHandles.vue","../src/selection/SelectionClipboard.vue"],"sourcesContent":["/**\n * The selection composables: `useSelection()` (the API), `useSelectionState()`,\n * `useSelectionSettings()` and `useSelectionEvent()`. App code gets the public\n * lens only; the layers in this folder resolve the host lens themselves.\n */\nimport { SelectionToken, selectionState } from '@embedpdf/plugin-selection';\nimport type { SelectionCapability } from '@embedpdf/plugin-selection';\nimport type { EventHook } from '@embedpdf/core';\nimport { useCapability, useCapabilityEvent } from '../runtime/capabilities';\nimport { settingsComposable, stateComposable } from '../state';\n\n/**\n * The selection API (`select()`, `readText()`, `canCopy()`, …) for your\n * chrome: toolbars, context menus, automation. The object never changes.\n */\nexport function useSelection(): SelectionCapability {\n  return useCapability(SelectionToken);\n}\n\n/** Subscribe to one selection event while the component lives: `useSelectionEvent((selection) => selection.onCommitted, handler)`. */\nexport function useSelectionEvent<Event>(\n  select: (selection: SelectionCapability) => EventHook<Event>,\n  handler: (event: Event) => void,\n): void {\n  useCapabilityEvent(SelectionToken, select, handler);\n}\n\n/**\n * The selection's state as refs: whether anything is selected, whether the\n * user is still selecting, the range and the pages it's on (the page's State\n * table, declared once in `selectionState`). With a selector, one ref that\n * updates only when the value it picks changes. The empty state without a\n * document.\n */\nexport const useSelectionState = stateComposable(selectionState);\n\n/** The selection settings (`dragThreshold`, `color`, `handles`), with or without a document, as refs. Takes a selector. */\nexport const useSelectionSettings = settingsComposable(SelectionToken);\n","<!--\n  <SelectionLayer>: the highlight of the selected text on one page. It warms\n  the page's text geometry when it mounts, reads the selected lines in page\n  space and maps each one's four corners to the page's pixels, in the plugin's\n  `color` setting, which the `--epdf-text-selection` CSS variable overrides.\n  It handles no pointer input: <PagePointerSource> and the interaction hub do.\n-->\n<script setup lang=\"ts\">\nimport { computed, watch } from 'vue';\nimport { shallowEqual } from '@embedpdf/core';\n// The layer is a host of the plugin (geometry warming, the highlight\n// handshake); app code gets the public lens through `useSelection()`.\nimport { SelectionToken as SelectionHostToken } from '@embedpdf/plugin-selection/contract/host';\nimport type { SelectionSegment } from '@embedpdf/plugin-selection';\nimport { mixAccent, paint, quadInPixels, svgPoints } from '@embedpdf/web';\nimport { useOptionalCapability, useOptionalSelector } from '../runtime/capabilities';\nimport { useViewerSettings } from '../runtime/documents';\nimport { usePage } from '../runtime/page';\nimport { useSelectionSettings } from './composables';\n\nconst NO_SEGMENTS: readonly SelectionSegment[] = Object.freeze([]);\n\nconst page = usePage();\nconst selection = useOptionalCapability(SelectionHostToken);\n// The same list until a line on this page changes.\nconst segments = useOptionalSelector(\n  SelectionHostToken,\n  (lens) => lens.listSegments(page.value.ref),\n  NO_SEGMENTS,\n  shallowEqual,\n);\n// Something drawing its own preview of the selection (a markup tool) can take\n// the visual over; then this layer draws nothing, so the two never overlap.\nconst visible = useOptionalSelector(SelectionHostToken, (lens) => lens.isHighlightVisible(), false);\nconst color = useSelectionSettings((settings) => settings.color);\n// An unset color follows the viewer's accent, behind the `--epdf-accent` variable.\nconst accent = useViewerSettings((settings) => settings.accent);\n\n// Warm this page's text geometry as soon as it's on screen, so the first press\n// can hit-test without waiting for the engine. Without permission to select\n// text nothing loads, and nothing is drawn.\nwatch(\n  [selection, () => page.value.ref],\n  ([lens, pageRef]) => {\n    if (lens) void lens.ensureLoaded(pageRef);\n  },\n  { immediate: true },\n);\n\n// Unset, the color is the accent at 35%, the accent's CSS variables included.\nconst fill = computed(() =>\n  paint('text-selection', color.value ?? mixAccent('text-selection', accent.value)),\n);\n\n// Page space to the page layer's pixels, which turn with the page: mapping the\n// four corners is exact, for turned text too.\nconst polygons = computed(() =>\n  segments.value.map((segment) => svgPoints(quadInPixels(segment.quad, page.value.transform))),\n);\n</script>\n\n<template>\n  <svg\n    v-if=\"visible\"\n    :style=\"{\n      position: 'absolute',\n      inset: 0,\n      width: '100%',\n      height: '100%',\n      overflow: 'visible',\n      pointerEvents: 'none',\n    }\"\n  >\n    <!-- The fill goes in `style`: an SVG attribute doesn't read var(). -->\n    <polygon v-for=\"(points, index) in polygons\" :key=\"index\" :points=\"points\" :style=\"{ fill }\" />\n  </svg>\n</template>\n","<!--\n  <SelectionMenu>: your content, floating over the selected text. One anchor\n  however many pages the selection spans: it sits on the page where the\n  selection ends. It shows once the selection settles: hidden while someone\n  drags, it appears when the pointer lifts, and a selection made from code\n  shows at once. It works in a <Stage>'s #overlay slot and inside a\n  <PageView>: the surface provides the projection. For UI that follows the\n  drag live, put `<Anchored :anchor>` with `getAnchor()` together yourself.\n-->\n<script setup lang=\"ts\">\nimport { SelectionToken } from '@embedpdf/plugin-selection';\nimport { samePageBounds } from '@embedpdf/web';\nimport type { AnchoredPlacement } from '@embedpdf/web';\nimport Anchored from '../anchored/Anchored.vue';\nimport { useOptionalSelector } from '../runtime/capabilities';\nimport { useSelectionState } from './composables';\n\nwithDefaults(\n  defineProps<{\n    /** Gap in screen px between the selection and the menu. Default 8. */\n    gap?: number;\n    /** Where the menu sits around the selection. Default `'top'`. */\n    placement?: AnchoredPlacement;\n  }>(),\n  { gap: 8, placement: 'top' },\n);\n\ndefineSlots<{\n  /** The menu: compose it from `useSelection()`, `copySelection`, an annotation call. */\n  default?(): unknown;\n}>();\n\nconst selecting = useSelectionState((state) => state.isSelecting);\n// The plugin reads a new anchor object every time: compared by value, so the\n// menu moves only when the selection did.\nconst anchor = useOptionalSelector(\n  SelectionToken,\n  (selection) => selection.getAnchor(),\n  null,\n  samePageBounds,\n);\n</script>\n\n<template>\n  <Anchored v-if=\"!selecting && anchor\" :anchor=\"anchor\" :placement=\"placement\" :gap=\"gap\">\n    <slot />\n  </Anchored>\n</template>\n","<!--\n  <SelectionHandles>: the grips at the two ends of the selected text, drawn the\n  way phones draw them: a thin caret bar that is the selection's own start or\n  end edge (so turned text and turned pages carry the grip with them), capped\n  by a circle that keeps its size on screen, above the first line at the start\n  and below the last line at the end.\n\n  On touch, where nobody drags a caret, the grips are how a selection grows or\n  shrinks: a long press selects a word, then each grip extends from the other\n  end, snapping to glyphs and crossing pages exactly like a pointer drag, so\n  highlights, menus and the commit event all behave the same. Mount it in the\n  <Stage>'s #overlay slot next to <SelectionMenu>; elsewhere it draws nothing\n  (a <PageView> has no camera to project through). Grabbing a grip never pans\n  the Stage. Painted in the plugin's `handles` setting, which the\n  `--epdf-text-selection-handle` and `--epdf-text-selection-handle-shadow` CSS\n  variables override.\n\n  What it draws is the plugin's (the view over the Stage, the endpoints,\n  `selectionHandleGeom`, the armed drag) and how a grip follows the pointer is\n  `@embedpdf/web`'s (`attachSelectionHandle`);\n  this component keeps what only Vue does: the subscriptions and the markup.\n-->\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue';\nimport type { CSSProperties } from 'vue';\nimport {\n  HANDLE_BAR,\n  HANDLE_HEAD,\n  HANDLE_PAD,\n  armSelectionHandle,\n  selectionHandleEndpointsOf,\n  selectionHandleGeom,\n  selectionHandleViewOf,\n} from '@embedpdf/plugin-selection';\nimport { SelectionToken as SelectionHostToken } from '@embedpdf/plugin-selection/contract/host';\nimport { attachSelectionHandle, paint, sameSelectionEndpoints } from '@embedpdf/web';\nimport { useOptionalProjectorBinding } from '../anchored/projector';\nimport { devWarn } from '../dev';\nimport { useCapability, useOptionalCapability, useOptionalSelector } from '../runtime/capabilities';\nimport { useViewerSettings } from '../runtime/documents';\nimport { useKernelValue } from '../runtime/kernel';\nimport { useStageToken } from '../stage/scope';\nimport type { StageTokenProp } from '../stage/scope';\nimport { useSelectionSettings, useSelectionState } from './composables';\n\ntype Role = 'start' | 'end';\n\nconst props = defineProps<{\n  /** The stage view this overlay belongs to. Default: the enclosing `<Stage>`'s. */\n  token?: StageTokenProp;\n}>();\n\nconst token = useStageToken(() => props.token);\nconst host = useCapability(SelectionHostToken);\nconst stage = useOptionalCapability(token);\n\n// Outside a Stage there is no camera to project through: say so, rather than\n// drawing nothing without a word.\nconst surface = useOptionalProjectorBinding();\nif (!surface || surface.value.projector.space !== 'overlay') {\n  devWarn(\n    'selection-handles-outside-stage',\n    '<SelectionHandles> renders nothing here: mount it in the <Stage> #overlay slot ' +\n      '(a <PageView> has no camera to project the handles through).',\n  );\n}\n\nconst selecting = useSelectionState((state) => state.isSelecting);\nconst visible = useOptionalSelector(SelectionHostToken, (lens) => lens.isHighlightVisible(), false);\nconst handles = useSelectionSettings((settings) => settings.handles);\nconst accent = useViewerSettings((settings) => settings.accent);\nconst endpoints = useOptionalSelector(\n  SelectionHostToken,\n  (lens) => selectionHandleEndpointsOf(lens.getSnapshot()),\n  null,\n  sameSelectionEndpoints,\n);\n// The grips are placed by projecting the endpoints through the camera, so they\n// follow every camera move. The visible pages are the stage's one value for\n// that (the pages move on it too, so grip and highlight move in one frame).\nconst camera = useKernelValue(() => stage.value?.listVisiblePages() ?? null);\nconst dragging = ref<Role | null>(null);\n\n/** Where each grip goes, in the overlay's pixels; null for one whose page isn't laid out. */\nconst geometry = computed(() => {\n  void camera.value;\n  const lens = stage.value;\n  const ends = endpoints.value;\n  if (!lens || !ends) return null;\n  const view = selectionHandleViewOf(lens);\n  return {\n    start: selectionHandleGeom(view, ends.start, 'start'),\n    end: selectionHandleGeom(view, ends.end, 'end'),\n  };\n});\n\n// Hidden while a pointer drag selects (like the menu), but a grip drag is a\n// selection gesture too, and keeps its grips.\nconst shown = computed(\n  () => geometry.value !== null && visible.value && (!selecting.value || dragging.value !== null),\n);\n\n// Each is its CSS variable first, then the setting; an unset color is the accent.\nconst color = computed(() => paint('text-selection-handle', handles.value.color ?? accent.value));\nconst shadow = computed(() => paint('text-selection-handle-shadow', handles.value.shadow));\n\n/**\n * One grip's three boxes. The grip is laid out upright in its own frame (a bar\n * the edge's length, the head above it at the start, below it at the end),\n * then turned onto the projected edge about the bar's ascent tip, the one\n * point that must land exactly on the glyph's corner.\n */\nfunction gripStyles(role: Role): Record<'grip' | 'bar' | 'head', CSSProperties> | null {\n  const grip = geometry.value?.[role];\n  if (!grip) return null;\n  const barTop = HANDLE_PAD + (role === 'start' ? HANDLE_HEAD : 0);\n  const pivotX = HANDLE_PAD + HANDLE_BAR / 2;\n  return {\n    grip: {\n      position: 'absolute',\n      left: `${grip.bar.from.x - pivotX}px`,\n      top: `${grip.bar.from.y - barTop}px`,\n      width: `${HANDLE_BAR + 2 * HANDLE_PAD}px`,\n      height: `${grip.length + HANDLE_HEAD + 2 * HANDLE_PAD}px`,\n      // Upright text carries no transform: pixel-identical to an axis-aligned box.\n      ...(grip.upright\n        ? {}\n        : { transform: `rotate(${grip.rotation}deg)`, transformOrigin: `${pivotX}px ${barTop}px` }),\n      touchAction: 'none',\n      cursor: 'grab',\n      pointerEvents: 'auto',\n    },\n    // The caret bar: the selection's own edge, the glyph's ink height at any tilt.\n    bar: {\n      position: 'absolute',\n      left: `${HANDLE_PAD}px`,\n      top: `${barTop}px`,\n      width: `${HANDLE_BAR}px`,\n      height: `${grip.length}px`,\n      background: color.value,\n      borderRadius: `${HANDLE_BAR / 2}px`,\n    },\n    // The head, flush against the bar: past the ascent at the start, past the\n    // baseline at the end, in the text's frame.\n    head: {\n      position: 'absolute',\n      left: `${pivotX - HANDLE_HEAD / 2}px`,\n      top: `${role === 'start' ? HANDLE_PAD : HANDLE_PAD + grip.length}px`,\n      width: `${HANDLE_HEAD}px`,\n      height: `${HANDLE_HEAD}px`,\n      borderRadius: '50%',\n      background: color.value,\n      boxShadow: shadow.value,\n    },\n  };\n}\n\nconst startStyles = computed(() => gripStyles('start'));\nconst endStyles = computed(() => gripStyles('end'));\n\n/**\n * Arm a grip drag at the press. It reads the stage and the endpoints as they\n * are now, never as they were when the listener was attached.\n */\nfunction arm(role: Role) {\n  const lens = stage.value;\n  const ends = endpoints.value;\n  if (!lens || !ends) return null;\n  const armed = armSelectionHandle(host, selectionHandleViewOf(lens), ends, role);\n  if (!armed) return null;\n  dragging.value = role;\n  return {\n    // The point the user grabbed: the bar's midpoint.\n    base: armed.base,\n    session: {\n      move: armed.drag.move,\n      end: () => {\n        armed.drag.end(); // the selection settles: the menu comes back, the commit event fires\n        dragging.value = null;\n      },\n    },\n  };\n}\n\nconst startGrip = ref<HTMLDivElement | null>(null);\nconst endGrip = ref<HTMLDivElement | null>(null);\n// The press is taken with a native listener on the grip itself, so the Stage\n// never sees it; a grip that remounts is bound again.\nfor (const [role, element] of [\n  ['start', startGrip],\n  ['end', endGrip],\n] as const) {\n  watch(\n    element,\n    (grip, _previous, onCleanup) => {\n      if (grip) onCleanup(attachSelectionHandle(grip, { arm: () => arm(role) }));\n    },\n    { flush: 'post' },\n  );\n}\n</script>\n\n<template>\n  <template v-if=\"shown\">\n    <div v-if=\"startStyles\" ref=\"startGrip\" :style=\"startStyles.grip\">\n      <div :style=\"startStyles.bar\" />\n      <div :style=\"startStyles.head\" />\n    </div>\n    <div v-if=\"endStyles\" ref=\"endGrip\" :style=\"endStyles.grip\">\n      <div :style=\"endStyles.bar\" />\n      <div :style=\"endStyles.head\" />\n    </div>\n  </template>\n</template>\n","<!--\n  <SelectionClipboard>: mount once per viewer to wire copying the selected\n  text. It fetches the text when the selection settles, answers the browser's\n  `copy` event at once, and falls back to the Clipboard API for Ctrl+C / Cmd+C\n  when the page has no selection of its own. A selection the user may not\n  copy isn't copied, and it emits `refused`. It draws nothing, and wires\n  nothing until a document is ready. For a Copy button, call\n  `copySelection(useSelection())` from its click handler instead.\n-->\n<script setup lang=\"ts\">\nimport { toValue, watch, type MaybeRefOrGetter } from 'vue';\nimport { SelectionToken } from '@embedpdf/plugin-selection';\nimport { wireSelectionClipboard } from '@embedpdf/web';\nimport { useOptionalCapability } from '../runtime/capabilities';\n\n// A boolean prop left out is `false` in Vue: the default says `true` itself.\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Fetch the selected text as soon as the selection settles (default true).\n     * The browser's `copy` event must be answered at once, so without it only\n     * Ctrl+C / Cmd+C copies, a moment later.\n     */\n    prefetch?: boolean;\n    /**\n     * Copy only while focus is inside this element (a template ref), for a\n     * page with more than one viewer. Copying works once it has mounted.\n     * Default: anywhere on the page.\n     */\n    target?: MaybeRefOrGetter<HTMLElement | null | undefined>;\n  }>(),\n  { prefetch: true },\n);\nconst emit = defineEmits<{\n  /** Ctrl+C or the Copy menu met a selection the user may not copy: say so. */\n  refused: [];\n}>();\n\nconst selection = useOptionalCapability(SelectionToken);\n// Wired again for another document, or when `prefetch` or `target` changes.\nwatch(\n  [selection, () => props.prefetch, () => toValue(props.target)],\n  ([lens, prefetch, target], _previous, onCleanup) => {\n    // A target that hasn't mounted yet wires nothing; its ref being set runs this again.\n    if (!lens || (props.target !== undefined && !target)) return;\n    onCleanup(\n      wireSelectionClipboard(lens, {\n        prefetch,\n        target: target ?? undefined,\n        onRefused: () => emit('refused'),\n      }),\n    );\n  },\n  { immediate: true, flush: 'post' },\n);\n</script>\n\n<template></template>\n"],"names":["SelectionHostToken","_unref","_openBlock","_createElementBlock","_Fragment","_renderList","_createBlock","Anchored","_renderSlot","_normalizeStyle","_createElementVNode"],"mappings":"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"}