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

package/dist/FormLayer.vue_vue_type_script_setup_true_lang-DUqft-xs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormLayer.vue_vue_type_script_setup_true_lang-DUqft-xs.js","sources":["../src/form/composables.ts","../src/form/widget-box.ts","../src/form/ButtonControl.vue","../src/form/FormFocusRing.vue","../src/form/ComboControl.vue","../src/form/FieldPictures.vue","../src/form/NativeListBox.vue","../src/form/ListControl.vue","../src/form/SignatureControl.vue","../src/form/TextControl.vue","../src/form/ToggleControl.vue","../src/form/FormLayer.vue"],"sourcesContent":["/**\n * The form composables for app code: `useForm()` (the API), `useFormEvent()`,\n * the state and the settings as refs, and `useFormValue()` for one field. And\n * what the controls of `<FormLayer>` share: the colors the viewer draws fields\n * with, and a widget's click running its action.\n */\nimport { computed, toValue } from 'vue';\nimport type { MaybeRefOrGetter, Ref } from 'vue';\nimport type { EventHook } from '@embedpdf/core';\nimport type { AnnotationRef } from '@embedpdf/plugin-annotation/contract';\nimport { FormToken, formState } from '@embedpdf/plugin-form';\nimport type { FormCapability, FormFieldRef, FormFieldValue } from '@embedpdf/plugin-form';\n// Activating a widget from the layer is a host call.\nimport { FormToken as FormHostToken } from '@embedpdf/plugin-form/contract/host';\nimport { formColorsOf } from '@embedpdf/web';\nimport type { FormColors } from '@embedpdf/web';\nimport { useCapability, useCapabilityEvent, useOptionalSelector } from '../runtime/capabilities';\nimport { useViewerSettings } from '../runtime/documents';\nimport { settingsComposable, stateComposable } from '../state';\n\n/**\n * The form API for the document in scope: reading, filling, form data and\n * building. The object never changes, so it's safe to keep in a closure; keep\n * it whole (`form.setValue(…)`), since a member taken out of it once stays the\n * one of that moment.\n */\nexport function useForm(): FormCapability {\n  return useCapability(FormToken);\n}\n\n/** Subscribe to one form event while the component lives: `useFormEvent((form) => form.onValueChanged, handler)`. */\nexport function useFormEvent<Event>(\n  select: (form: FormCapability) => EventHook<Event>,\n  handler: (event: Event) => void,\n): void {\n  useCapabilityEvent(FormToken, select, handler);\n}\n\n/**\n * The form's state as refs: every field (`fields`), whether it's read\n * (`status`), what kind of form the document has (`formKind`), and the field\n * of the selected widget in design mode (`selectedField`), declared once in\n * `formState`. With a selector, one ref that updates only when the value it\n * picks changes. Empty without a document.\n */\nexport const useFormState = stateComposable(formState);\n\n/**\n * The form settings (`validation`, `focus`, `fields`) as refs, or one ref for\n * the value `select` picks. They belong to the plugin, so they read without a\n * document; change them with `useForm().updateSettings()`.\n */\nexport const useFormSettings = settingsComposable(FormToken);\n\n/**\n * One field's value, in the shape `setValue()` takes, or `null`: a ref that\n * updates only when that field's value changes (the plugin keeps one value\n * object per field while it stays the same). `field` may be a ref or a\n * getter, and the ref follows it. `null` without a document.\n */\nexport function useFormValue(\n  field: MaybeRefOrGetter<FormFieldRef>,\n): Readonly<Ref<FormFieldValue | null>> {\n  return useOptionalSelector(FormToken, (form) => form.getValue(toValue(field)), null);\n}\n\n// ── what the controls of <FormLayer> share ───────────────────────────────────\n\n/**\n * The colors the viewer draws fields with: the form settings over the\n * viewer's accent, each behind its `--epdf-form-*` CSS variable.\n */\nexport function useFormColors(): Readonly<Ref<FormColors>> {\n  const accent = useViewerSettings((settings) => settings.accent);\n  const focus = useFormSettings((settings) => settings.focus);\n  const fields = useFormSettings((settings) => settings.fields);\n  return computed(() => formColorsOf({ focus: focus.value, fields: fields.value }, accent.value));\n}\n\n/**\n * A click on a widget runs its `/A` action. ISO 32000 puts the activate\n * action on the widget, whatever its field, and many forms ship \"buttons\" as\n * read-only text fields with an `/A` that Acrobat runs; a widget without one\n * is inert. `widget` is read at the click, so it is the item's current one.\n */\nexport function useWidgetActivation(widget: () => AnnotationRef | null): () => void {\n  const form = useCapability(FormHostToken);\n  return () => {\n    const target = widget();\n    if (target) void form.activateWidget(target);\n  };\n}\n","/**\n * The positioned box every control of `<FormLayer>` sits in: where the widget\n * is on the page, the widget's event surface, and the edge a field without a\n * border of its own gets, so people see where to fill in. A composable rather\n * than a component, so each control's template shows its whole box: the\n * toggle's box is its control (a role, a tab stop, keys), the others hold a\n * native control.\n */\nimport { computed, ref, watch } from 'vue';\nimport type { CSSProperties, Ref } from 'vue';\nimport type { FormWidgetItem } from '@embedpdf/plugin-form';\n// The widget's PDF events go to the plugin's host lens.\nimport { FormToken as FormHostToken } from '@embedpdf/plugin-form/contract/host';\nimport {\n  bindWidgetEvents,\n  isolatePointerDown,\n  rectInPixels,\n  widgetBoxStyleOf,\n} from '@embedpdf/web';\nimport type { FormColors, PixelRect } from '@embedpdf/web';\nimport { useCapability } from '../runtime/capabilities';\nimport { usePage } from '../runtime/page';\n\n/** A control's box: bind `element` with `ref`, and `style` on the same element. */\nexport interface WidgetBox {\n  /** The box element, for the template's `ref`. */\n  readonly element: Ref<HTMLDivElement | null>;\n  /** Where the widget is on the page, in view px. */\n  readonly frame: Readonly<Ref<PixelRect>>;\n  /** The box's place, and its edge when the field has no border of its own. */\n  readonly style: Readonly<Ref<CSSProperties>>;\n}\n\n/**\n * The box of one widget. `edge: false` leaves out the edge for controls that\n * draw their own (a list box) or never have one (a button).\n *\n * The box keeps every press that starts in it from the page below: the Stage\n * listens natively on an ancestor, and a press reaching it would start the\n * active tool's gesture or end an edit as a click outside. Vue's listeners are\n * native too, but the box stops it with `isolatePointerDown`, the same call\n * every framework's form layer makes. The widget's pointer and focus events\n * (its `/AA` actions: enter, exit, down, up, focus, blur) go to the form\n * plugin from native listeners on the box (`bindWidgetEvents`), never the\n * control inside: \"may edit this field\" and \"may receive PDF action events\"\n * are different rights, and a session that may not fill still sees hover\n * tooltips. Its own `pointerdown` listener sits on the same element as the\n * isolation, so the stopped press still reaches the field's \"mouse down\"\n * action. Focus is `focusin`/`focusout`, so a control's own blur (where a\n * text field starts its commit) runs before the box sends \"blur\", and a blur\n * script sees the committed value.\n */\nexport function useWidgetBox(\n  item: () => FormWidgetItem,\n  colors: () => FormColors,\n  options: { edge?: boolean } = {},\n): WidgetBox {\n  const page = usePage();\n  const form = useCapability(FormHostToken);\n  const element = ref<HTMLDivElement | null>(null);\n  const edge = options.edge ?? true;\n\n  watch(\n    element,\n    (box, _previous, onCleanup) => {\n      if (!box) return;\n      const release = isolatePointerDown(box);\n      const unbind = bindWidgetEvents(box, (event) => {\n        // Read at the event: a widget the engine has just placed gets its address later.\n        const { fieldRef, annotationRef } = item();\n        if (annotationRef) form.notifyWidgetEvent(fieldRef, annotationRef, event);\n      });\n      onCleanup(() => {\n        release();\n        unbind();\n      });\n    },\n    { immediate: true, flush: 'post' },\n  );\n\n  const frame = computed(() => rectInPixels(item().box, page.value.transform));\n  const style = computed(\n    (): CSSProperties => widgetBoxStyleOf(item(), frame.value, colors(), { edge }),\n  );\n\n  return { element, frame, style };\n}\n","<!--\n  A push button: a native click target over its picture that runs its action.\n  A button never has an edge.\n-->\n<script setup lang=\"ts\">\nimport type { FormWidgetItem } from '@embedpdf/plugin-form';\nimport { FORM_CONTROL_FILL } from '@embedpdf/web';\nimport type { FormColors } from '@embedpdf/web';\nimport { useWidgetActivation } from './composables';\nimport { useWidgetBox } from './widget-box';\n\nconst props = defineProps<{\n  item: Extract<FormWidgetItem, { control: 'button' }>;\n  colors: FormColors;\n}>();\n\nconst activate = useWidgetActivation(() => props.item.annotationRef);\nconst { element: box, style: boxStyle } = useWidgetBox(\n  () => props.item,\n  () => props.colors,\n  { edge: false },\n);\n</script>\n\n<template>\n  <div ref=\"box\" :style=\"[boxStyle, { cursor: item.disabled ? 'default' : 'pointer' }]\">\n    <!-- The box is the event surface; a disabled button must not swallow the pointer. -->\n    <button\n      type=\"button\"\n      :aria-label=\"item.label\"\n      :disabled=\"item.disabled\"\n      :style=\"{\n        ...FORM_CONTROL_FILL,\n        padding: '0',\n        border: '0',\n        background: 'transparent',\n        cursor: 'inherit',\n        pointerEvents: item.disabled ? 'none' : 'auto',\n      }\"\n      @click=\"activate\"\n    />\n  </div>\n</template>\n","<!--\n  The focus ring of a field, painted above the field's picture and its\n  see-through native control. An inset outline on the box itself would sit\n  under an opaque child, so rectangular checkboxes and dropdowns would look\n  unfocused while they are active in the native Tab order.\n-->\n<script setup lang=\"ts\">\nimport { formFocusRingStyleOf } from '@embedpdf/web';\n\ndefineProps<{\n  visible: boolean;\n  /** The ring's CSS color: the form's `focus.color` setting, behind its CSS variable. */\n  color: string;\n}>();\n</script>\n\n<template>\n  <span\n    v-if=\"visible\"\n    aria-hidden=\"true\"\n    data-embedpdf-form-focus-ring=\"\"\n    :style=\"formFocusRingStyleOf(color)\"\n  />\n</template>\n","<!--\n  A dropdown: an invisible native <select> over the field's picture. The\n  browser owns the dropdown, the engine the resting pixels. The select is made\n  again whenever the field's selection changes (its `key`), so it opens on the\n  field's value.\n-->\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue';\nimport type { FormWidgetItem } from '@embedpdf/plugin-form';\n// Writes from the layer go through the host lens, like every control's.\nimport { FormToken as FormHostToken } from '@embedpdf/plugin-form/contract/host';\nimport { FORM_CONTROL_FILL } from '@embedpdf/web';\nimport type { FormColors } from '@embedpdf/web';\nimport { useCapability } from '../runtime/capabilities';\nimport FormFocusRing from './FormFocusRing.vue';\nimport { useWidgetActivation } from './composables';\nimport { useWidgetBox } from './widget-box';\n\nconst props = defineProps<{\n  item: Extract<FormWidgetItem, { control: 'choice' }>;\n  colors: FormColors;\n}>();\n\nconst form = useCapability(FormHostToken);\nconst activate = useWidgetActivation(() => props.item.annotationRef);\nconst { element: box, style: boxStyle } = useWidgetBox(\n  () => props.item,\n  () => props.colors,\n);\nconst focused = ref(false);\n\nconst selectionKey = computed(() => props.item.selected.join('\\0'));\n\nfunction onChange(event: Event): void {\n  const value = (event.currentTarget as HTMLSelectElement).value;\n  void form.setValue(props.item.fieldRef, { value: value || null });\n}\n</script>\n\n<template>\n  <div ref=\"box\" :style=\"boxStyle\" @click=\"activate\">\n    <select\n      :key=\"selectionKey\"\n      :value=\"item.selected[0] ?? ''\"\n      :aria-label=\"item.label\"\n      :disabled=\"item.disabled\"\n      :style=\"{\n        ...FORM_CONTROL_FILL,\n        opacity: 0,\n        cursor: item.disabled ? 'default' : 'pointer',\n        ...(item.disabled ? { pointerEvents: 'none' as const } : {}),\n      }\"\n      @focus=\"focused = true\"\n      @blur=\"focused = false\"\n      @change=\"onChange\"\n    >\n      <option v-if=\"item.selected.length === 0\" value=\"\" />\n      <option v-for=\"(option, index) in item.options\" :key=\"index\" :value=\"option.value\">\n        {{ option.label }}\n      </option>\n    </select>\n    <FormFocusRing :visible=\"focused\" :color=\"colors.focus\" />\n  </div>\n</template>\n","<!--\n  The page's fields as they look now. Each widget shows its picture, as the engine draws it (the\n  form plugin's, every state loaded, so a check box shows its new state at once), or the painter's\n  drawing while its look is pending or its picture is of an older version (`pictureOrPainting`): a\n  value, a calculation, a restyle shows at once. Hidden widgets aren't drawn.\n-->\n<script setup lang=\"ts\">\nimport { computed, onUnmounted, shallowRef, watch } from 'vue';\nimport { annotationKey, shallowEqual } from '@embedpdf/core';\nimport { MITER_LIMIT } from '@embedpdf/core-annotation';\nimport { FormToken as FormHostToken } from '@embedpdf/plugin-form/contract/host';\nimport type { ShownWidget } from '@embedpdf/plugin-form/contract/host';\nimport { RenderToken } from '@embedpdf/plugin-render/contract/host';\nimport {\n  createShownUrls,\n  loadAppearanceUrls,\n  pictureOrPainting,\n  rectInPixels,\n  shownAppearance,\n  svgShapesOf,\n  type AppearanceUrl,\n  type PixelRect,\n  type SvgShape,\n} from '@embedpdf/web';\nimport { useOptionalCapability, useOptionalSelector } from '../runtime/capabilities';\nimport { usePage } from '../runtime/page';\nimport SvgShapes from '../runtime/SvgShapes.vue';\n\nconst NO_WIDGETS: readonly ShownWidget[] = Object.freeze([]);\n\n/** A widget as the template draws it: its picture, or the painter's shapes in its box. */\ntype ShownLook = { key: string; frame: PixelRect } & (\n  | { kind: 'picture'; url: string }\n  | { kind: 'painting'; viewBox: string; shapes: SvgShape[] }\n);\n\nconst page = usePage();\nconst form = useOptionalCapability(FormHostToken);\n// The same list until a widget on this page changes.\nconst widgets = useOptionalSelector(\n  FormHostToken,\n  (form) => form.listShownWidgets(page.value.ref),\n  NO_WIDGETS,\n  shallowEqual,\n);\n// Loaded again when one of the page's widgets is drawn again, and at appearance-scale crossings.\nconst epoch = useOptionalSelector(\n  FormHostToken,\n  (form) => form.getAppearanceEpoch(page.value.ref),\n  '',\n);\nconst scale = useOptionalSelector(\n  RenderToken,\n  (lens) => lens.getAppearanceScale(page.value.transform.renderScale),\n  0,\n);\n\n// `null` until the page's first pictures arrive.\nconst urls = shallowRef<Record<string, AppearanceUrl> | null>(null);\n// The pictures shown stay valid until the next ones are shown.\nconst shown = createShownUrls();\nonUnmounted(() => shown.release());\nwatch(\n  [form, () => page.value.ref, scale, epoch],\n  ([host, pageRef, at], _previous, onCleanup) => {\n    if (!host || !at) return;\n    onCleanup(\n      loadAppearanceUrls(\n        shown,\n        (signal) => host.renderAppearances(pageRef, at, signal),\n        annotationKey,\n        (loaded) => (urls.value = loaded),\n      ),\n    );\n  },\n  { immediate: true },\n);\n\nconst looks = computed(() =>\n  widgets.value.flatMap((widget): ShownLook[] => {\n    const key = annotationKey(widget.ref);\n    const look = pictureOrPainting({\n      pending: widget.pending,\n      picture: urls.value && shownAppearance(urls.value, key, widget.appearanceState),\n      version: widget.pictureVersion,\n      loaded: urls.value !== null,\n      paint: () => form.value?.getWidgetPainting(widget.ref) ?? null,\n    });\n    if (!look) return [];\n    if (look.kind === 'picture') {\n      return [\n        {\n          kind: 'picture',\n          key,\n          url: look.picture.url,\n          frame: rectInPixels(look.picture.box, page.value.transform),\n        },\n      ];\n    }\n    const { x, y, width, height } = widget.rect;\n    return [\n      {\n        kind: 'painting',\n        key,\n        viewBox: `${x} ${y} ${width} ${height}`,\n        shapes: svgShapesOf(look.painting.scene, { miterLimit: MITER_LIMIT }),\n        frame: rectInPixels(widget.rect, page.value.transform),\n      },\n    ];\n  }),\n);\n</script>\n\n<template>\n  <template v-for=\"look in looks\" :key=\"look.key\">\n    <img\n      v-if=\"look.kind === 'picture'\"\n      :src=\"look.url\"\n      alt=\"\"\n      draggable=\"false\"\n      :style=\"{\n        position: 'absolute',\n        left: `${look.frame.left}px`,\n        top: `${look.frame.top}px`,\n        width: `${look.frame.width}px`,\n        height: `${look.frame.height}px`,\n        // A global `img { max-width: 100% }` reset would clamp it.\n        maxWidth: 'none',\n        maxHeight: 'none',\n        pointerEvents: 'none',\n      }\"\n    />\n    <svg\n      v-else\n      :viewBox=\"look.viewBox\"\n      :style=\"{\n        position: 'absolute',\n        left: `${look.frame.left}px`,\n        top: `${look.frame.top}px`,\n        width: `${look.frame.width}px`,\n        height: `${look.frame.height}px`,\n        overflow: 'visible',\n        pointerEvents: 'none',\n      }\"\n    >\n      <SvgShapes :shapes=\"look.shapes\" />\n    </svg>\n  </template>\n</template>\n","<!--\n  A PDF list box as a visible native <select>. A list box needs one owner for\n  its pixels, hit-testing and scrolling: a baked picture under an invisible\n  select can't give that, since the browser and the PDF would each keep their\n  own top row. This control is never re-created, so its scroll position stays\n  where the user left it. While a write is on its way it shows the user's\n  choice (`@embedpdf/web`'s `createOptimisticSelection`), and it follows the\n  engine's selection when that changes. Its `style` falls through to the\n  <select>.\n-->\n<script setup lang=\"ts\">\nimport { onUnmounted, ref, shallowRef, watch } from 'vue';\nimport { createOptimisticSelection, isolateWheel, showSelectedOptions } from '@embedpdf/web';\n\nexport interface NativeListBoxOption {\n  label: string;\n  value: string;\n}\n\nconst props = defineProps<{\n  /** The accessible name: the field's tooltip, else its full name. */\n  label: string;\n  disabled: boolean;\n  multi: boolean;\n  options: readonly NativeListBoxOption[];\n  /** The engine's selection. */\n  selected: readonly string[];\n  /**\n   * Writes a choice. A function rather than an event, because its promise\n   * matters: a write that fails puts the engine's selection back.\n   */\n  onSelect: (values: string[]) => void | Promise<unknown>;\n}>();\n\nconst emit = defineEmits<{ focus: []; blur: [] }>();\n\nconst selection = createOptimisticSelection(props.selected);\nconst shown = shallowRef(selection.get());\nonUnmounted(selection.subscribe(() => (shown.value = selection.get())));\nwatch(\n  () => props.selected,\n  (values) => selection.setConfirmed(values),\n);\n\nconst control = ref<HTMLSelectElement | null>(null);\n\n// The Stage's wheel handler lives on an ancestor and prevents the default to\n// pan or zoom the page. Stop at the list, so the browser scrolls it instead.\nwatch(\n  control,\n  (element, _previous, onCleanup) => {\n    if (element) onCleanup(isolateWheel(element));\n  },\n  { immediate: true, flush: 'post' },\n);\n\n// What the control shows, set on its options (`showSelectedOptions`): a\n// `:value` binding can't hold several values.\nwatch(\n  [control, shown, () => props.options],\n  ([element, values]) => {\n    if (element) showSelectedOptions(element, values);\n  },\n  { immediate: true, flush: 'post' },\n);\n\nfunction onChange(event: Event): void {\n  const element = event.currentTarget as HTMLSelectElement;\n  selection.choose(\n    Array.from(element.selectedOptions).map((option) => option.value),\n    props.onSelect,\n  );\n}\n</script>\n\n<template>\n  <select\n    ref=\"control\"\n    :aria-label=\"label\"\n    :multiple=\"multi\"\n    :size=\"Math.max(2, options.length)\"\n    :disabled=\"disabled\"\n    @focus=\"emit('focus')\"\n    @blur=\"emit('blur')\"\n    @change=\"onChange\"\n  >\n    <option v-for=\"(option, index) in options\" :key=\"index\" :value=\"option.value\">\n      {{ option.label }}\n    </option>\n  </select>\n</template>\n","<!--\n  A list: a visible native list box in the field's own look, the form\n  settings' colors where it has none (`@embedpdf/web`'s `listBoxStyleOf`). It\n  draws its own border, so the box adds no edge.\n-->\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue';\nimport type { FormWidgetItem } from '@embedpdf/plugin-form';\n// Writes from the layer go through the host lens, like every control's.\nimport { FormToken as FormHostToken } from '@embedpdf/plugin-form/contract/host';\nimport { listBoxControlStyleOf } from '@embedpdf/web';\nimport type { FormColors } from '@embedpdf/web';\nimport { useCapability } from '../runtime/capabilities';\nimport FormFocusRing from './FormFocusRing.vue';\nimport NativeListBox from './NativeListBox.vue';\nimport { useWidgetActivation } from './composables';\nimport { useWidgetBox } from './widget-box';\n\nconst props = defineProps<{\n  item: Extract<FormWidgetItem, { control: 'choice' }>;\n  colors: FormColors;\n}>();\n\nconst form = useCapability(FormHostToken);\nconst activate = useWidgetActivation(() => props.item.annotationRef);\nconst {\n  element: box,\n  frame,\n  style: boxStyle,\n} = useWidgetBox(\n  () => props.item,\n  () => props.colors,\n  { edge: false },\n);\nconst focused = ref(false);\n\nconst select = (values: string[]) =>\n  form.setValue(props.item.fieldRef, { selectedValues: values });\n\nconst listStyle = computed(() => listBoxControlStyleOf(props.item, frame.value, props.colors));\n</script>\n\n<template>\n  <div ref=\"box\" :style=\"boxStyle\" @click=\"activate\">\n    <NativeListBox\n      :label=\"item.label\"\n      :disabled=\"item.disabled\"\n      :multi=\"item.multi\"\n      :options=\"item.options\"\n      :selected=\"item.selected\"\n      :on-select=\"select\"\n      :style=\"listStyle\"\n      @focus=\"focused = true\"\n      @blur=\"focused = false\"\n    />\n    <FormFocusRing :visible=\"focused\" :color=\"colors.focus\" />\n  </div>\n</template>\n","<!--\n  A signature field. With the signature plugin, an empty field is \"sign here\"\n  (a click makes it the target the next mark goes to), and a signed one asks\n  your UI to show its details. Without it, the field is only its picture.\n-->\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { FormWidgetItem } from '@embedpdf/plugin-form';\nimport { SignatureToken } from '@embedpdf/plugin-signature/contract';\nimport { FORM_CONTROL_FILL } from '@embedpdf/web';\nimport type { FormColors } from '@embedpdf/web';\nimport { useOptionalCapability, useOptionalSelector } from '../runtime/capabilities';\nimport { useWidgetBox } from './widget-box';\n\nconst props = defineProps<{\n  item: Extract<FormWidgetItem, { control: 'signature' }>;\n  colors: FormColors;\n}>();\n\nconst { element: box, style: boxStyle } = useWidgetBox(\n  () => props.item,\n  () => props.colors,\n);\nconst signature = useOptionalCapability(SignatureToken);\n// The signature plugin knows best whether it's signed (it reads again after\n// every new version); the field's own value is the fallback.\nconst known = useOptionalSelector(\n  SignatureToken,\n  (capability) => capability.getSignature(props.item.fieldRef)?.signed ?? null,\n  null,\n);\nconst signed = computed(() => known.value ?? props.item.signed);\nconst actionable = computed(\n  () => signature.value !== null && (signed.value || !props.item.disabled),\n);\n\nfunction onClick(): void {\n  const plugin = signature.value;\n  if (!plugin) return;\n  if (signed.value) plugin.requestInspection(props.item.fieldRef);\n  else plugin.setTarget(props.item.fieldRef);\n}\n</script>\n\n<template>\n  <div ref=\"box\" :style=\"[boxStyle, { cursor: actionable ? 'pointer' : 'default' }]\">\n    <button\n      v-if=\"actionable\"\n      type=\"button\"\n      :aria-label=\"item.label\"\n      :data-signed=\"signed ? '' : undefined\"\n      :style=\"{\n        ...FORM_CONTROL_FILL,\n        padding: '0',\n        border: '0',\n        background: 'transparent',\n        cursor: 'inherit',\n      }\"\n      @click=\"onClick\"\n    />\n  </div>\n</template>\n","<!--\n  A text box: the field's picture at rest, an editor in the field's own font\n  while focused. The editor is always mounted, see-through at rest: the DOM is\n  the focus manager, so Tab reaches every field. Typing drafts (the plugin\n  keeps the draft, so a download writes it), blur or Enter commits, Escape\n  puts the value back: `@embedpdf/web`'s `createTextFieldEditor`.\n-->\n<script setup lang=\"ts\">\nimport { computed, onUnmounted, shallowRef, watch, watchEffect } from 'vue';\nimport type { FormWidgetItem } from '@embedpdf/plugin-form';\n// The draft calls are the host lens's.\nimport { FormToken as FormHostToken } from '@embedpdf/plugin-form/contract/host';\nimport { createFontMounts, createTextFieldEditor, textFieldEditorStyleOf } from '@embedpdf/web';\nimport type { FormColors } from '@embedpdf/web';\nimport { useCapability } from '../runtime/capabilities';\nimport { useWidgetActivation } from './composables';\nimport { useWidgetBox } from './widget-box';\n\nconst props = defineProps<{\n  item: Extract<FormWidgetItem, { control: 'text' }>;\n  colors: FormColors;\n}>();\n\nconst form = useCapability(FormHostToken);\nconst activate = useWidgetActivation(() => props.item.annotationRef);\nconst { element: box, frame, style: boxStyle } = useWidgetBox(\n  () => props.item,\n  () => props.colors,\n);\n\n// One editing policy per field: the layer keys this control by the field and\n// its widget, so the field stays the same for the control's life.\nconst editor = createTextFieldEditor(form, props.item.fieldRef, props.item.value);\nconst state = shallowRef(editor.getState());\nonUnmounted(editor.subscribe(() => (state.value = editor.getState())));\n// Take the field's value whenever it changes under us; the editor keeps what's\n// typed until the edit ends.\nwatch(\n  () => props.item.value,\n  (value) => editor.setValue(value),\n);\n\n// The text being typed, where the engine will draw it, in its face.\nconst layout = computed(() =>\n  props.item.annotationRef\n    ? form.getTextEditorLayout(props.item.annotationRef, state.value.draft)\n    : null,\n);\nconst mounts = createFontMounts();\nonUnmounted(() => mounts.release());\nwatchEffect(() => {\n  if (layout.value) mounts.mount([layout.value.program]);\n});\n\nconst editorStyle = computed(() =>\n  textFieldEditorStyleOf(props.item, frame.value, props.colors, state.value.focused, layout.value),\n);\n\nconst onInput = (event: Event) =>\n  editor.input((event.target as HTMLInputElement | HTMLTextAreaElement).value);\n\nfunction onKeydown(event: KeyboardEvent): void {\n  if (editor.keyDown(event.key, props.item.multiline)) {\n    (event.currentTarget as HTMLElement).blur();\n  }\n}\n</script>\n\n<template>\n  <!--\n    A click runs the widget's action too, as in Acrobat: the editor's focus\n    click bubbles here, a read-only field's lands here directly.\n  -->\n  <div ref=\"box\" :style=\"boxStyle\" @click=\"activate\">\n    <textarea\n      v-if=\"item.multiline\"\n      :value=\"state.draft\"\n      :maxlength=\"item.maxLength ?? undefined\"\n      :aria-label=\"item.label\"\n      :disabled=\"item.disabled\"\n      :style=\"editorStyle\"\n      @focus=\"editor.focus\"\n      @input=\"onInput\"\n      @blur=\"editor.blur\"\n      @keydown=\"onKeydown\"\n    />\n    <input\n      v-else\n      :type=\"item.password ? 'password' : 'text'\"\n      :value=\"state.draft\"\n      :maxlength=\"item.maxLength ?? undefined\"\n      :aria-label=\"item.label\"\n      :disabled=\"item.disabled\"\n      :style=\"editorStyle\"\n      @focus=\"editor.focus\"\n      @input=\"onInput\"\n      @blur=\"editor.blur\"\n      @keydown=\"onKeydown\"\n    />\n  </div>\n</template>\n","<!--\n  A checkbox or a radio button: the field's picture is the control, so the box\n  itself is the checkbox (its role, its tab stop, its keys). A click, Space or\n  Enter writes the toggled value, then runs the widget's action (Acrobat's\n  order): `@embedpdf/web`'s `pressToggle`.\n-->\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport type { FormWidgetItem } from '@embedpdf/plugin-form';\n// Writes from the layer go through the host lens, like every control's.\nimport { FormToken as FormHostToken } from '@embedpdf/plugin-form/contract/host';\nimport { pressToggle } from '@embedpdf/web';\nimport type { FormColors } from '@embedpdf/web';\nimport { useCapability } from '../runtime/capabilities';\nimport FormFocusRing from './FormFocusRing.vue';\nimport { useWidgetActivation } from './composables';\nimport { useWidgetBox } from './widget-box';\n\nconst props = defineProps<{\n  item: Extract<FormWidgetItem, { control: 'toggle' }>;\n  colors: FormColors;\n}>();\n\nconst form = useCapability(FormHostToken);\nconst activate = useWidgetActivation(() => props.item.annotationRef);\nconst { element: box, style: boxStyle } = useWidgetBox(\n  () => props.item,\n  () => props.colors,\n);\nconst focused = ref(false);\n\nconst press = () => pressToggle(form, props.item, activate);\n\nfunction onKeydown(event: KeyboardEvent): void {\n  if (event.key !== ' ' && event.key !== 'Enter') return;\n  event.preventDefault();\n  press();\n}\n</script>\n\n<template>\n  <div\n    ref=\"box\"\n    :role=\"item.kind === 'checkbox' ? 'checkbox' : 'radio'\"\n    :aria-checked=\"item.checked\"\n    :aria-label=\"item.label\"\n    :tabindex=\"item.disabled ? -1 : 0\"\n    :style=\"[boxStyle, { cursor: item.disabled ? 'default' : 'pointer', outline: 'none' }]\"\n    @click=\"press\"\n    @keydown=\"onKeydown\"\n    @focus=\"focused = true\"\n    @blur=\"focused = false\"\n  >\n    <FormFocusRing :visible=\"focused\" :color=\"colors.focus\" />\n  </div>\n</template>\n","<!--\n  <FormLayer>: the form's fields on one page, painted as the engine draws them\n  (their values, borders and fonts), with real HTML controls people fill them\n  in with, with or without the annotation plugin. While it's on the page, the\n  <RenderLayer> leaves the fields out of the page's picture. The controls add\n  what people interact with on top of the pictures:\n\n    text   → the picture at rest; focus shows an editor in the field's font.\n    toggle → the picture is the control; a click writes the toggled value.\n    combo  → an invisible native <select> over the picture.\n    list   → a visible native <select>: one surface owns the rows, the\n             keyboard and the scrolling.\n    button → a native click target over the picture that runs its action.\n    signature → \"sign here\", or the signed field's details, with the\n             signature plugin.\n\n  The controls show while the active tool fills forms (the `pointer` and `pan`\n  tools do), and stand down in design mode, where fields are boxes you select\n  and move. What the viewer draws itself (the focus ring, the edge of a field\n  without a border, the editor) takes its colors from the form settings, which\n  the `--epdf-form-*` CSS variables override. The colors, the field looks, the\n  boxes' and controls' styles, and the toggle, text-field and list-box\n  policies are `@embedpdf/web`'s, the same for every framework.\n-->\n<script setup lang=\"ts\">\nimport { computed, watch } from 'vue';\nimport { shallowEqual } from '@embedpdf/core';\nimport type { FormWidgetItem } from '@embedpdf/plugin-form';\n// Loading a page's widgets and listing them as controls are host reads.\nimport { FormToken as FormHostToken } from '@embedpdf/plugin-form/contract/host';\nimport { InteractionToken } from '@embedpdf/plugin-interaction/contract/host';\nimport { usePaintsPagePart } from '../page-layers';\nimport { useOptionalCapability, useOptionalSelector } from '../runtime/capabilities';\nimport { usePage } from '../runtime/page';\nimport ButtonControl from './ButtonControl.vue';\nimport ComboControl from './ComboControl.vue';\nimport FieldPictures from './FieldPictures.vue';\nimport ListControl from './ListControl.vue';\nimport SignatureControl from './SignatureControl.vue';\nimport TextControl from './TextControl.vue';\nimport ToggleControl from './ToggleControl.vue';\nimport { useFormColors } from './composables';\n\nconst NO_WIDGETS: readonly FormWidgetItem[] = Object.freeze([]);\n\nconst page = usePage();\nconst form = useOptionalCapability(FormHostToken);\n// While it's here with the form plugin, the page's picture leaves the fields to it.\nusePaintsPagePart(\n  computed(() => (form.value ? page.value.ref : null)),\n  'formFields',\n);\nconst colors = useFormColors();\nconst active = useOptionalSelector(\n  InteractionToken,\n  (interaction) => interaction.activeToolEnables('form-fill'),\n  false,\n);\n// The same list until a widget on this page changes.\nconst items = useOptionalSelector(\n  FormHostToken,\n  (lens) => lens.listWidgets(page.value.ref),\n  NO_WIDGETS,\n  shallowEqual,\n);\n\n// The page's widgets are read when the layer comes to it.\nwatch(\n  [form, () => page.value.ref],\n  ([lens, pageRef]) => {\n    if (lens) void lens.ensureLoaded(pageRef);\n  },\n  { immediate: true },\n);\n\n/** One control per widget of a field: a radio group has a widget per button. */\nconst keyOf = (item: FormWidgetItem) => `${item.key}:${item.annotObjectNumber}`;\n</script>\n\n<template>\n  <div :style=\"{ position: 'absolute', inset: '0', pointerEvents: 'none' }\">\n    <FieldPictures />\n    <template v-for=\"item in active ? items : []\" :key=\"keyOf(item)\">\n      <TextControl v-if=\"item.control === 'text'\" :item=\"item\" :colors=\"colors\" />\n      <ToggleControl v-else-if=\"item.control === 'toggle'\" :item=\"item\" :colors=\"colors\" />\n      <ListControl\n        v-else-if=\"item.control === 'choice' && item.kind === 'list'\"\n        :item=\"item\"\n        :colors=\"colors\"\n      />\n      <ComboControl v-else-if=\"item.control === 'choice'\" :item=\"item\" :colors=\"colors\" />\n      <ButtonControl v-else-if=\"item.control === 'button'\" :item=\"item\" :colors=\"colors\" />\n      <SignatureControl v-else-if=\"item.control === 'signature'\" :item=\"item\" :colors=\"colors\" />\n    </template>\n  </div>\n</template>\n"],"names":["FormHostToken","_createElementBlock","_normalizeStyle","_unref","_createElementVNode","_openBlock","_hoisted_2","_Fragment","_toDisplayString","_createVNode","FormFocusRing","form","_renderList","SvgShapes","NativeListBox","FieldPictures","_createBlock","TextControl","ToggleControl","ListControl","ComboControl","ButtonControl","SignatureControl"],"mappings":"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"}

package/dist/LinkLayer.vue_vue_type_script_setup_true_lang-C5-eQD34.cjs

@@ -0,0 +1,174 @@
+"use strict";
+const vue = require("vue");
+const core = require("@embedpdf/core");
+const contract = require("@embedpdf/plugin-actions/contract");
+const host$1 = require("@embedpdf/plugin-interaction/contract/host");
+const pluginLink = require("@embedpdf/plugin-link");
+const host = require("@embedpdf/plugin-link/contract/host");
+const web = require("@embedpdf/web");
+const capabilities = require("./capabilities-DVNJmgy7.cjs");
+const page = require("./page-Doy4_Sdz.cjs");
+const scope = require("./scope-BQA4toWB.cjs");
+const _hoisted_1$1 = ["href", "title", "aria-label"];
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  __name: "LinkAnchor",
+  props: {
+    item: {},
+    layer: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const page$1 = page.usePage();
+    const anchor = vue.computed(
+      () => web.linkAnchorOf(props.item, page$1.value.transform, (item) => props.layer.link.getLabel(item))
+    );
+    const box = vue.computed(() => anchor.value.box);
+    const href = vue.computed(() => anchor.value.href);
+    const label = vue.computed(() => anchor.value.label);
+    const follow = () => props.layer.link.activate(
+      props.item,
+      web.linkActivateContextOf(props.item, page$1.value.ref, props.layer.stage)
+    );
+    function onClick(event) {
+      if (href.value && web.isModifiedClick(event)) return;
+      event.preventDefault();
+      follow();
+    }
+    function onKeydown(event) {
+      if (event.key !== "Enter" && event.key !== " ") return;
+      event.preventDefault();
+      follow();
+    }
+    const notify = (event) => web.sendLinkEvent(props.layer.actions, props.item, page$1.value.ref, event);
+    const onEnter = () => web.hoverLink(props.layer.pump, props.item, page$1.value.ref);
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("a", {
+        href: href.value ?? void 0,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        role: "link",
+        tabindex: "0",
+        title: label.value,
+        "aria-label": label.value,
+        style: vue.normalizeStyle({
+          position: "absolute",
+          left: `${box.value.left}px`,
+          top: `${box.value.top}px`,
+          width: `${box.value.width}px`,
+          height: `${box.value.height}px`,
+          cursor: "pointer",
+          pointerEvents: "auto"
+        }),
+        onClick,
+        onKeydown,
+        onPointerdown: _cache[0] || (_cache[0] = vue.withModifiers(($event) => notify("mouseDown"), ["stop"])),
+        onPointerup: _cache[1] || (_cache[1] = ($event) => notify("mouseUp")),
+        onPointerenter: onEnter,
+        onPointerleave: _cache[2] || (_cache[2] = ($event) => {
+          var _a;
+          return (_a = __props.layer.pump) == null ? void 0 : _a.hover(null);
+        }),
+        onFocus: _cache[3] || (_cache[3] = ($event) => notify("focus")),
+        onBlur: _cache[4] || (_cache[4] = ($event) => notify("blur"))
+      }, null, 44, _hoisted_1$1);
+    };
+  }
+});
+function useUriOpener() {
+  const host$12 = capabilities.useOptionalCapability(host.LinkToken);
+  vue.watch(
+    host$12,
+    (link, _previous, onCleanup) => {
+      if (link) onCleanup(link.registerUriOpener(web.openExternalUri));
+    },
+    { immediate: true }
+  );
+}
+function useLink() {
+  useUriOpener();
+  return capabilities.useCapability(pluginLink.LinkToken);
+}
+function useLinkEvent(select, handler) {
+  capabilities.useCapabilityEvent(pluginLink.LinkToken, select, handler);
+}
+const _hoisted_1 = {
+  key: 0,
+  style: { position: "absolute", inset: 0, pointerEvents: "none" }
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "LinkLayer",
+  setup(__props) {
+    const slots = vue.useSlots();
+    const NO_LINKS = Object.freeze([]);
+    const page$1 = page.usePage();
+    const link = capabilities.useCapability(pluginLink.LinkToken);
+    const resolved = capabilities.useOptionalCapability(pluginLink.LinkToken);
+    useUriOpener();
+    const stage = capabilities.useOptionalCapability(scope.useStageToken());
+    const actions = capabilities.useOptionalCapability(contract.ActionsToken);
+    const pump = vue.computed(() => actions.value ? contract.createHoverPump(actions.value.dispatch) : null);
+    const items = capabilities.useOptionalSelector(
+      pluginLink.LinkToken,
+      (lens) => lens.listLinks(page$1.value.ref),
+      NO_LINKS,
+      core.shallowEqual
+    );
+    const engaged = capabilities.useOptionalSelector(host.LinkToken, (lens) => lens.isNavigationEngaged(), false);
+    const editEnabled = capabilities.useOptionalSelector(
+      host$1.InteractionToken,
+      (interaction) => interaction.activeToolEnables("annotation-edit"),
+      false
+    );
+    vue.watch(
+      [resolved, () => page$1.value.ref],
+      ([lens, pageRef]) => {
+        if (lens) void lens.ensureLoaded(pageRef);
+      },
+      { immediate: true }
+    );
+    const visible = vue.computed(
+      () => engaged.value && items.value.length > 0 ? web.navigableLinksOf(items.value, editEnabled.value) : []
+    );
+    const layer = vue.computed(
+      () => ({ link, stage: stage.value, actions: actions.value, pump: pump.value })
+    );
+    const visibleById = vue.computed(() => new Map(visible.value.map((item) => [item.id, item])));
+    const natives = /* @__PURE__ */ new Map();
+    function nativeOf(id) {
+      let native = natives.get(id);
+      if (!native) {
+        native = vue.markRaw(() => {
+          const item = visibleById.value.get(id);
+          return item ? vue.h(_sfc_main$1, { item, layer: layer.value }) : null;
+        });
+        natives.set(id, native);
+      }
+      return native;
+    }
+    vue.watch(visibleById, (shown) => {
+      for (const id of natives.keys()) if (!shown.has(id)) natives.delete(id);
+    });
+    return (_ctx, _cache) => {
+      return visible.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(visible.value, (item) => {
+          return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+            key: item.id
+          }, [
+            slots.link ? vue.renderSlot(_ctx.$slots, "link", {
+              link: item,
+              native: nativeOf(item.id)
+            }, void 0, void 0, 0) : (vue.openBlock(), vue.createBlock(_sfc_main$1, {
+              key: 1,
+              item,
+              layer: layer.value
+            }, null, 8, ["item", "layer"]))
+          ], 64);
+        }), 128))
+      ])) : vue.createCommentVNode("", true);
+    };
+  }
+});
+exports._sfc_main = _sfc_main;
+exports.useLink = useLink;
+exports.useLinkEvent = useLinkEvent;
+//# sourceMappingURL=LinkLayer.vue_vue_type_script_setup_true_lang-C5-eQD34.cjs.map

package/dist/LinkLayer.vue_vue_type_script_setup_true_lang-C5-eQD34.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkLayer.vue_vue_type_script_setup_true_lang-C5-eQD34.cjs","sources":["../src/link/LinkAnchor.vue","../src/link/composables.ts","../src/link/LinkLayer.vue"],"sourcesContent":["<!--\n  One link's clickable area: a real <a>, on purpose. A website gets an `href`,\n  so middle-click, \"copy link\", the status-bar preview and keyboard focus come\n  for free. A click or a key follows the link through the plugin's\n  `activate()`, so every way of following one fires `onActivated`. With the\n  actions plugin, the link's own PDF events (enter, exit, down, up, focus,\n  blur) go to it from here: these anchors are the link's pixels.\n-->\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { Link } from '@embedpdf/plugin-link';\nimport {\n  hoverLink,\n  isModifiedClick,\n  linkActivateContextOf,\n  linkAnchorOf,\n  sendLinkEvent,\n  type LinkAnchorEvent,\n} from '@embedpdf/web';\nimport { usePage } from '../runtime/page';\nimport type { LinkLayerContext } from './composables';\n\nconst props = defineProps<{\n  item: Link;\n  layer: LinkLayerContext;\n}>();\n\nconst page = usePage();\n\n// Its box, its label, and a native `href` only for a website with nothing chained after it.\nconst anchor = computed(() =>\n  linkAnchorOf(props.item, page.value.transform, (item) => props.layer.link.getLabel(item)),\n);\nconst box = computed(() => anchor.value.box);\nconst href = computed(() => anchor.value.href);\nconst label = computed(() => anchor.value.label);\n\nconst follow = () =>\n  props.layer.link.activate(\n    props.item,\n    linkActivateContextOf(props.item, page.value.ref, props.layer.stage),\n  );\n\nfunction onClick(event: MouseEvent): void {\n  // A modified click on a real href keeps the browser's own behavior (a\n  // background tab, a new window).\n  if (href.value && isModifiedClick(event)) return;\n  // Every other click follows the link through the plugin, which opens a\n  // website through this binding's opener.\n  event.preventDefault();\n  follow();\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  if (event.key !== 'Enter' && event.key !== ' ') return;\n  event.preventDefault();\n  follow();\n}\n\n/** The link's own PDF event, through the actions plugin: only a link that is an annotation has one. */\nconst notify = (event: LinkAnchorEvent): void =>\n  sendLinkEvent(props.layer.actions, props.item, page.value.ref, event);\n\nconst onEnter = (): void => hoverLink(props.layer.pump, props.item, page.value.ref);\n</script>\n\n<template>\n  <!--\n    A press on a link must not reach the Stage (it would start the active\n    tool's gesture, or end an edit as a click outside): Vue's listener is native\n    and on the anchor itself, so `.stop` keeps it here, and it sends the link's\n    \"mouse down\" event.\n  -->\n  <a\n    :href=\"href ?? undefined\"\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n    role=\"link\"\n    tabindex=\"0\"\n    :title=\"label\"\n    :aria-label=\"label\"\n    :style=\"{\n      position: 'absolute',\n      left: `${box.left}px`,\n      top: `${box.top}px`,\n      width: `${box.width}px`,\n      height: `${box.height}px`,\n      cursor: 'pointer',\n      pointerEvents: 'auto',\n    }\"\n    @click=\"onClick\"\n    @keydown=\"onKeydown\"\n    @pointerdown.stop=\"notify('mouseDown')\"\n    @pointerup=\"notify('mouseUp')\"\n    @pointerenter=\"onEnter\"\n    @pointerleave=\"layer.pump?.hover(null)\"\n    @focus=\"notify('focus')\"\n    @blur=\"notify('blur')\"\n  />\n</template>\n","/**\n * The link composables: `useLink()` (the API, and the website opener while a\n * component uses it) and `useLinkEvent()`; and what the anchors of one\n * `<LinkLayer>` share.\n */\nimport { watch } from 'vue';\nimport type { EventHook } from '@embedpdf/core';\nimport type { ActionsCapability, HoverPump } from '@embedpdf/plugin-actions/contract';\nimport { LinkToken } from '@embedpdf/plugin-link';\nimport type { LinkCapability } from '@embedpdf/plugin-link';\n// The binding opens websites for the plugin: a host fact.\nimport { LinkToken as LinkHostToken } from '@embedpdf/plugin-link/contract/host';\nimport type { StageCapability } from '@embedpdf/plugin-stage/contract';\nimport { openExternalUri } from '@embedpdf/web';\nimport { useCapability, useCapabilityEvent, useOptionalCapability } from '../runtime/capabilities';\n\n/** What every anchor of one `<LinkLayer>` shares. */\nexport interface LinkLayerContext {\n  link: LinkCapability;\n  /** The view a page destination moves, when the page is on a Stage. */\n  stage: StageCapability | null;\n  /** The actions plugin, for the links' own PDF events; null without it. */\n  actions: ActionsCapability | null;\n  /** One per layer, so leaving one link and entering the next stay in order. */\n  pump: HoverPump | null;\n}\n\n/**\n * Hand the link plugin this binding's website opener (`openExternalUri`)\n * while the component lives: an allowed address opens in a new tab, anything\n * else is refused and the plugin reports it. Registered again for another\n * document.\n */\nexport function useUriOpener(): void {\n  const host = useOptionalCapability(LinkHostToken);\n  watch(\n    host,\n    (link, _previous, onCleanup) => {\n      if (link) onCleanup(link.registerUriOpener(openExternalUri));\n    },\n    { immediate: true },\n  );\n}\n\n/**\n * The link API (`listLinks`, `activate`, …) for app code. The object never\n * changes. While a component uses it, `activate()` opens a website in a new\n * tab.\n */\nexport function useLink(): LinkCapability {\n  useUriOpener();\n  return useCapability(LinkToken);\n}\n\n/** Subscribe to one link event while the component lives: `useLinkEvent((link) => link.onActivated, handler)`. */\nexport function useLinkEvent<Event>(\n  select: (link: LinkCapability) => EventHook<Event>,\n  handler: (event: Event) => void,\n): void {\n  useCapabilityEvent(LinkToken, select, handler);\n}\n","<!--\n  <LinkLayer>: the page's links, as clickable areas. One <a> per link: a click\n  or a key follows it through the plugin, which opens websites through the\n  opener this binding registers. The layer stands down entirely while the\n  active tool doesn't navigate links: the annotation layer owns them then\n  (select, move, resize, retarget). The `#link` slot draws a link yourself,\n  around the layer's own anchor (`native`).\n-->\n<script setup lang=\"ts\">\nimport { computed, h, markRaw, watch } from 'vue';\nimport type { FunctionalComponent } from 'vue';\nimport { shallowEqual } from '@embedpdf/core';\nimport { ActionsToken, createHoverPump } from '@embedpdf/plugin-actions/contract';\nimport { InteractionToken } from '@embedpdf/plugin-interaction/contract/host';\nimport { LinkToken } from '@embedpdf/plugin-link';\nimport type { Link } from '@embedpdf/plugin-link';\n// The layer paints anchors only while a navigation tool is active: a host fact.\nimport { LinkToken as LinkHostToken } from '@embedpdf/plugin-link/contract/host';\nimport { navigableLinksOf } from '@embedpdf/web';\nimport { useCapability, useOptionalCapability, useOptionalSelector } from '../runtime/capabilities';\nimport { usePage } from '../runtime/page';\nimport { useStageToken } from '../stage/scope';\nimport LinkAnchor from './LinkAnchor.vue';\nimport { useUriOpener } from './composables';\nimport type { LinkLayerContext } from './composables';\n\nconst slots = defineSlots<{\n  /**\n   * Draw a link yourself, usually around `native`, the layer's own clickable\n   * area: `<component :is=\"native\" />` keeps what a click does. For a link you\n   * don't want to change, show `native` alone.\n   */\n  link?(props: { link: Link; native: FunctionalComponent }): unknown;\n}>();\n\nconst NO_LINKS: readonly Link[] = Object.freeze([]);\n\nconst page = usePage();\nconst link = useCapability(LinkToken);\n// The same capability as a ref, for the watch below: it changes with the document.\nconst resolved = useOptionalCapability(LinkToken);\nuseUriOpener();\n// A page destination moves the view this page is shown in.\nconst stage = useOptionalCapability(useStageToken());\n// The link plane's own PDF events (enter, exit, down, up, focus, blur): while\n// links navigate, their pixels are these anchors, so the events can only come\n// from here. One hover pump per layer.\nconst actions = useOptionalCapability(ActionsToken);\nconst pump = computed(() => (actions.value ? createHoverPump(actions.value.dispatch) : null));\n\n// The same list until a link on this page changes.\nconst items = useOptionalSelector(\n  LinkToken,\n  (lens) => lens.listLinks(page.value.ref),\n  NO_LINKS,\n  shallowEqual,\n);\nconst engaged = useOptionalSelector(LinkHostToken, (lens) => lens.isNavigationEngaged(), false);\n// One owner per pixel: a link attached to an annotation belongs to it while the\n// active tool edits annotations, so its anchor stands down (select, move and\n// resize work). Links of their own navigate under any navigation tool.\nconst editEnabled = useOptionalSelector(\n  InteractionToken,\n  (interaction) => interaction.activeToolEnables('annotation-edit'),\n  false,\n);\n\nwatch(\n  [resolved, () => page.value.ref],\n  ([lens, pageRef]) => {\n    if (lens) void lens.ensureLoaded(pageRef);\n  },\n  { immediate: true },\n);\n\n// An authoring tool is active: the annotation layer owns links, and no anchor\n// swallows the pointer.\nconst visible = computed(() =>\n  engaged.value && items.value.length > 0 ? navigableLinksOf(items.value, editEnabled.value) : [],\n);\n\nconst layer = computed(\n  (): LinkLayerContext => ({ link, stage: stage.value, actions: actions.value, pump: pump.value }),\n);\n\n// `native` for the `#link` slot: one component per link, kept by its id, that\n// draws the link's current anchor. The same component across renders, so a\n// zoom moves the anchor instead of replacing it (and its focus).\nconst visibleById = computed(() => new Map(visible.value.map((item) => [item.id, item])));\nconst natives = new Map<string, FunctionalComponent>();\nfunction nativeOf(id: string): FunctionalComponent {\n  let native = natives.get(id);\n  if (!native) {\n    native = markRaw(() => {\n      const item = visibleById.value.get(id);\n      return item ? h(LinkAnchor, { item, layer: layer.value }) : null;\n    });\n    natives.set(id, native);\n  }\n  return native;\n}\n// Forget the anchors of links that are gone.\nwatch(visibleById, (shown) => {\n  for (const id of natives.keys()) if (!shown.has(id)) natives.delete(id);\n});\n</script>\n\n<template>\n  <div v-if=\"visible.length > 0\" :style=\"{ position: 'absolute', inset: 0, pointerEvents: 'none' }\">\n    <template v-for=\"item in visible\" :key=\"item.id\">\n      <slot v-if=\"slots.link\" name=\"link\" :link=\"item\" :native=\"nativeOf(item.id)\" />\n      <LinkAnchor v-else :item=\"item\" :layer=\"layer\" />\n    </template>\n  </div>\n</template>\n"],"names":["page","usePage","computed","linkAnchorOf","linkActivateContextOf","isModifiedClick","sendLinkEvent","hoverLink","_createElementBlock","_normalizeStyle","host","useOptionalCapability","LinkHostToken","watch","openExternalUri","useCapability","LinkToken","useCapabilityEvent","_useSlots","useStageToken","ActionsToken","createHoverPump","useOptionalSelector","shallowEqual","InteractionToken","navigableLinksOf","markRaw","h","LinkAnchor","_openBlock","_Fragment","_renderList","_renderSlot","_createBlock"],"mappings":"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"}

package/dist/LinkLayer.vue_vue_type_script_setup_true_lang-EzLaOP3g.js

@@ -0,0 +1,175 @@
+import { defineComponent, computed, openBlock, createElementBlock, withModifiers, normalizeStyle, watch, useSlots, Fragment, renderList, renderSlot, createBlock, createCommentVNode, markRaw, h } from "vue";
+import { shallowEqual } from "@embedpdf/core";
+import { createHoverPump, ActionsToken } from "@embedpdf/plugin-actions/contract";
+import { InteractionToken } from "@embedpdf/plugin-interaction/contract/host";
+import { LinkToken } from "@embedpdf/plugin-link";
+import { LinkToken as LinkToken$1 } from "@embedpdf/plugin-link/contract/host";
+import { linkAnchorOf, isModifiedClick, sendLinkEvent, hoverLink, linkActivateContextOf, openExternalUri, navigableLinksOf } from "@embedpdf/web";
+import { h as useOptionalCapability, a as useCapability, b as useCapabilityEvent, i as useOptionalSelector } from "./capabilities-C7YzgPCX.js";
+import { u as usePage } from "./page-D9XIuLSj.js";
+import { u as useStageToken } from "./scope-BgdCqnYb.js";
+const _hoisted_1$1 = ["href", "title", "aria-label"];
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "LinkAnchor",
+  props: {
+    item: {},
+    layer: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const page = usePage();
+    const anchor = computed(
+      () => linkAnchorOf(props.item, page.value.transform, (item) => props.layer.link.getLabel(item))
+    );
+    const box = computed(() => anchor.value.box);
+    const href = computed(() => anchor.value.href);
+    const label = computed(() => anchor.value.label);
+    const follow = () => props.layer.link.activate(
+      props.item,
+      linkActivateContextOf(props.item, page.value.ref, props.layer.stage)
+    );
+    function onClick(event) {
+      if (href.value && isModifiedClick(event)) return;
+      event.preventDefault();
+      follow();
+    }
+    function onKeydown(event) {
+      if (event.key !== "Enter" && event.key !== " ") return;
+      event.preventDefault();
+      follow();
+    }
+    const notify = (event) => sendLinkEvent(props.layer.actions, props.item, page.value.ref, event);
+    const onEnter = () => hoverLink(props.layer.pump, props.item, page.value.ref);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("a", {
+        href: href.value ?? void 0,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        role: "link",
+        tabindex: "0",
+        title: label.value,
+        "aria-label": label.value,
+        style: normalizeStyle({
+          position: "absolute",
+          left: `${box.value.left}px`,
+          top: `${box.value.top}px`,
+          width: `${box.value.width}px`,
+          height: `${box.value.height}px`,
+          cursor: "pointer",
+          pointerEvents: "auto"
+        }),
+        onClick,
+        onKeydown,
+        onPointerdown: _cache[0] || (_cache[0] = withModifiers(($event) => notify("mouseDown"), ["stop"])),
+        onPointerup: _cache[1] || (_cache[1] = ($event) => notify("mouseUp")),
+        onPointerenter: onEnter,
+        onPointerleave: _cache[2] || (_cache[2] = ($event) => {
+          var _a;
+          return (_a = __props.layer.pump) == null ? void 0 : _a.hover(null);
+        }),
+        onFocus: _cache[3] || (_cache[3] = ($event) => notify("focus")),
+        onBlur: _cache[4] || (_cache[4] = ($event) => notify("blur"))
+      }, null, 44, _hoisted_1$1);
+    };
+  }
+});
+function useUriOpener() {
+  const host = useOptionalCapability(LinkToken$1);
+  watch(
+    host,
+    (link, _previous, onCleanup) => {
+      if (link) onCleanup(link.registerUriOpener(openExternalUri));
+    },
+    { immediate: true }
+  );
+}
+function useLink() {
+  useUriOpener();
+  return useCapability(LinkToken);
+}
+function useLinkEvent(select, handler) {
+  useCapabilityEvent(LinkToken, select, handler);
+}
+const _hoisted_1 = {
+  key: 0,
+  style: { position: "absolute", inset: 0, pointerEvents: "none" }
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LinkLayer",
+  setup(__props) {
+    const slots = useSlots();
+    const NO_LINKS = Object.freeze([]);
+    const page = usePage();
+    const link = useCapability(LinkToken);
+    const resolved = useOptionalCapability(LinkToken);
+    useUriOpener();
+    const stage = useOptionalCapability(useStageToken());
+    const actions = useOptionalCapability(ActionsToken);
+    const pump = computed(() => actions.value ? createHoverPump(actions.value.dispatch) : null);
+    const items = useOptionalSelector(
+      LinkToken,
+      (lens) => lens.listLinks(page.value.ref),
+      NO_LINKS,
+      shallowEqual
+    );
+    const engaged = useOptionalSelector(LinkToken$1, (lens) => lens.isNavigationEngaged(), false);
+    const editEnabled = useOptionalSelector(
+      InteractionToken,
+      (interaction) => interaction.activeToolEnables("annotation-edit"),
+      false
+    );
+    watch(
+      [resolved, () => page.value.ref],
+      ([lens, pageRef]) => {
+        if (lens) void lens.ensureLoaded(pageRef);
+      },
+      { immediate: true }
+    );
+    const visible = computed(
+      () => engaged.value && items.value.length > 0 ? navigableLinksOf(items.value, editEnabled.value) : []
+    );
+    const layer = computed(
+      () => ({ link, stage: stage.value, actions: actions.value, pump: pump.value })
+    );
+    const visibleById = computed(() => new Map(visible.value.map((item) => [item.id, item])));
+    const natives = /* @__PURE__ */ new Map();
+    function nativeOf(id) {
+      let native = natives.get(id);
+      if (!native) {
+        native = markRaw(() => {
+          const item = visibleById.value.get(id);
+          return item ? h(_sfc_main$1, { item, layer: layer.value }) : null;
+        });
+        natives.set(id, native);
+      }
+      return native;
+    }
+    watch(visibleById, (shown) => {
+      for (const id of natives.keys()) if (!shown.has(id)) natives.delete(id);
+    });
+    return (_ctx, _cache) => {
+      return visible.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_1, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(visible.value, (item) => {
+          return openBlock(), createElementBlock(Fragment, {
+            key: item.id
+          }, [
+            slots.link ? renderSlot(_ctx.$slots, "link", {
+              link: item,
+              native: nativeOf(item.id)
+            }, void 0, void 0, 0) : (openBlock(), createBlock(_sfc_main$1, {
+              key: 1,
+              item,
+              layer: layer.value
+            }, null, 8, ["item", "layer"]))
+          ], 64);
+        }), 128))
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as _,
+  useLinkEvent as a,
+  useLink as u
+};
+//# sourceMappingURL=LinkLayer.vue_vue_type_script_setup_true_lang-EzLaOP3g.js.map

package/dist/LinkLayer.vue_vue_type_script_setup_true_lang-EzLaOP3g.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkLayer.vue_vue_type_script_setup_true_lang-EzLaOP3g.js","sources":["../src/link/LinkAnchor.vue","../src/link/composables.ts","../src/link/LinkLayer.vue"],"sourcesContent":["<!--\n  One link's clickable area: a real <a>, on purpose. A website gets an `href`,\n  so middle-click, \"copy link\", the status-bar preview and keyboard focus come\n  for free. A click or a key follows the link through the plugin's\n  `activate()`, so every way of following one fires `onActivated`. With the\n  actions plugin, the link's own PDF events (enter, exit, down, up, focus,\n  blur) go to it from here: these anchors are the link's pixels.\n-->\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { Link } from '@embedpdf/plugin-link';\nimport {\n  hoverLink,\n  isModifiedClick,\n  linkActivateContextOf,\n  linkAnchorOf,\n  sendLinkEvent,\n  type LinkAnchorEvent,\n} from '@embedpdf/web';\nimport { usePage } from '../runtime/page';\nimport type { LinkLayerContext } from './composables';\n\nconst props = defineProps<{\n  item: Link;\n  layer: LinkLayerContext;\n}>();\n\nconst page = usePage();\n\n// Its box, its label, and a native `href` only for a website with nothing chained after it.\nconst anchor = computed(() =>\n  linkAnchorOf(props.item, page.value.transform, (item) => props.layer.link.getLabel(item)),\n);\nconst box = computed(() => anchor.value.box);\nconst href = computed(() => anchor.value.href);\nconst label = computed(() => anchor.value.label);\n\nconst follow = () =>\n  props.layer.link.activate(\n    props.item,\n    linkActivateContextOf(props.item, page.value.ref, props.layer.stage),\n  );\n\nfunction onClick(event: MouseEvent): void {\n  // A modified click on a real href keeps the browser's own behavior (a\n  // background tab, a new window).\n  if (href.value && isModifiedClick(event)) return;\n  // Every other click follows the link through the plugin, which opens a\n  // website through this binding's opener.\n  event.preventDefault();\n  follow();\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  if (event.key !== 'Enter' && event.key !== ' ') return;\n  event.preventDefault();\n  follow();\n}\n\n/** The link's own PDF event, through the actions plugin: only a link that is an annotation has one. */\nconst notify = (event: LinkAnchorEvent): void =>\n  sendLinkEvent(props.layer.actions, props.item, page.value.ref, event);\n\nconst onEnter = (): void => hoverLink(props.layer.pump, props.item, page.value.ref);\n</script>\n\n<template>\n  <!--\n    A press on a link must not reach the Stage (it would start the active\n    tool's gesture, or end an edit as a click outside): Vue's listener is native\n    and on the anchor itself, so `.stop` keeps it here, and it sends the link's\n    \"mouse down\" event.\n  -->\n  <a\n    :href=\"href ?? undefined\"\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n    role=\"link\"\n    tabindex=\"0\"\n    :title=\"label\"\n    :aria-label=\"label\"\n    :style=\"{\n      position: 'absolute',\n      left: `${box.left}px`,\n      top: `${box.top}px`,\n      width: `${box.width}px`,\n      height: `${box.height}px`,\n      cursor: 'pointer',\n      pointerEvents: 'auto',\n    }\"\n    @click=\"onClick\"\n    @keydown=\"onKeydown\"\n    @pointerdown.stop=\"notify('mouseDown')\"\n    @pointerup=\"notify('mouseUp')\"\n    @pointerenter=\"onEnter\"\n    @pointerleave=\"layer.pump?.hover(null)\"\n    @focus=\"notify('focus')\"\n    @blur=\"notify('blur')\"\n  />\n</template>\n","/**\n * The link composables: `useLink()` (the API, and the website opener while a\n * component uses it) and `useLinkEvent()`; and what the anchors of one\n * `<LinkLayer>` share.\n */\nimport { watch } from 'vue';\nimport type { EventHook } from '@embedpdf/core';\nimport type { ActionsCapability, HoverPump } from '@embedpdf/plugin-actions/contract';\nimport { LinkToken } from '@embedpdf/plugin-link';\nimport type { LinkCapability } from '@embedpdf/plugin-link';\n// The binding opens websites for the plugin: a host fact.\nimport { LinkToken as LinkHostToken } from '@embedpdf/plugin-link/contract/host';\nimport type { StageCapability } from '@embedpdf/plugin-stage/contract';\nimport { openExternalUri } from '@embedpdf/web';\nimport { useCapability, useCapabilityEvent, useOptionalCapability } from '../runtime/capabilities';\n\n/** What every anchor of one `<LinkLayer>` shares. */\nexport interface LinkLayerContext {\n  link: LinkCapability;\n  /** The view a page destination moves, when the page is on a Stage. */\n  stage: StageCapability | null;\n  /** The actions plugin, for the links' own PDF events; null without it. */\n  actions: ActionsCapability | null;\n  /** One per layer, so leaving one link and entering the next stay in order. */\n  pump: HoverPump | null;\n}\n\n/**\n * Hand the link plugin this binding's website opener (`openExternalUri`)\n * while the component lives: an allowed address opens in a new tab, anything\n * else is refused and the plugin reports it. Registered again for another\n * document.\n */\nexport function useUriOpener(): void {\n  const host = useOptionalCapability(LinkHostToken);\n  watch(\n    host,\n    (link, _previous, onCleanup) => {\n      if (link) onCleanup(link.registerUriOpener(openExternalUri));\n    },\n    { immediate: true },\n  );\n}\n\n/**\n * The link API (`listLinks`, `activate`, …) for app code. The object never\n * changes. While a component uses it, `activate()` opens a website in a new\n * tab.\n */\nexport function useLink(): LinkCapability {\n  useUriOpener();\n  return useCapability(LinkToken);\n}\n\n/** Subscribe to one link event while the component lives: `useLinkEvent((link) => link.onActivated, handler)`. */\nexport function useLinkEvent<Event>(\n  select: (link: LinkCapability) => EventHook<Event>,\n  handler: (event: Event) => void,\n): void {\n  useCapabilityEvent(LinkToken, select, handler);\n}\n","<!--\n  <LinkLayer>: the page's links, as clickable areas. One <a> per link: a click\n  or a key follows it through the plugin, which opens websites through the\n  opener this binding registers. The layer stands down entirely while the\n  active tool doesn't navigate links: the annotation layer owns them then\n  (select, move, resize, retarget). The `#link` slot draws a link yourself,\n  around the layer's own anchor (`native`).\n-->\n<script setup lang=\"ts\">\nimport { computed, h, markRaw, watch } from 'vue';\nimport type { FunctionalComponent } from 'vue';\nimport { shallowEqual } from '@embedpdf/core';\nimport { ActionsToken, createHoverPump } from '@embedpdf/plugin-actions/contract';\nimport { InteractionToken } from '@embedpdf/plugin-interaction/contract/host';\nimport { LinkToken } from '@embedpdf/plugin-link';\nimport type { Link } from '@embedpdf/plugin-link';\n// The layer paints anchors only while a navigation tool is active: a host fact.\nimport { LinkToken as LinkHostToken } from '@embedpdf/plugin-link/contract/host';\nimport { navigableLinksOf } from '@embedpdf/web';\nimport { useCapability, useOptionalCapability, useOptionalSelector } from '../runtime/capabilities';\nimport { usePage } from '../runtime/page';\nimport { useStageToken } from '../stage/scope';\nimport LinkAnchor from './LinkAnchor.vue';\nimport { useUriOpener } from './composables';\nimport type { LinkLayerContext } from './composables';\n\nconst slots = defineSlots<{\n  /**\n   * Draw a link yourself, usually around `native`, the layer's own clickable\n   * area: `<component :is=\"native\" />` keeps what a click does. For a link you\n   * don't want to change, show `native` alone.\n   */\n  link?(props: { link: Link; native: FunctionalComponent }): unknown;\n}>();\n\nconst NO_LINKS: readonly Link[] = Object.freeze([]);\n\nconst page = usePage();\nconst link = useCapability(LinkToken);\n// The same capability as a ref, for the watch below: it changes with the document.\nconst resolved = useOptionalCapability(LinkToken);\nuseUriOpener();\n// A page destination moves the view this page is shown in.\nconst stage = useOptionalCapability(useStageToken());\n// The link plane's own PDF events (enter, exit, down, up, focus, blur): while\n// links navigate, their pixels are these anchors, so the events can only come\n// from here. One hover pump per layer.\nconst actions = useOptionalCapability(ActionsToken);\nconst pump = computed(() => (actions.value ? createHoverPump(actions.value.dispatch) : null));\n\n// The same list until a link on this page changes.\nconst items = useOptionalSelector(\n  LinkToken,\n  (lens) => lens.listLinks(page.value.ref),\n  NO_LINKS,\n  shallowEqual,\n);\nconst engaged = useOptionalSelector(LinkHostToken, (lens) => lens.isNavigationEngaged(), false);\n// One owner per pixel: a link attached to an annotation belongs to it while the\n// active tool edits annotations, so its anchor stands down (select, move and\n// resize work). Links of their own navigate under any navigation tool.\nconst editEnabled = useOptionalSelector(\n  InteractionToken,\n  (interaction) => interaction.activeToolEnables('annotation-edit'),\n  false,\n);\n\nwatch(\n  [resolved, () => page.value.ref],\n  ([lens, pageRef]) => {\n    if (lens) void lens.ensureLoaded(pageRef);\n  },\n  { immediate: true },\n);\n\n// An authoring tool is active: the annotation layer owns links, and no anchor\n// swallows the pointer.\nconst visible = computed(() =>\n  engaged.value && items.value.length > 0 ? navigableLinksOf(items.value, editEnabled.value) : [],\n);\n\nconst layer = computed(\n  (): LinkLayerContext => ({ link, stage: stage.value, actions: actions.value, pump: pump.value }),\n);\n\n// `native` for the `#link` slot: one component per link, kept by its id, that\n// draws the link's current anchor. The same component across renders, so a\n// zoom moves the anchor instead of replacing it (and its focus).\nconst visibleById = computed(() => new Map(visible.value.map((item) => [item.id, item])));\nconst natives = new Map<string, FunctionalComponent>();\nfunction nativeOf(id: string): FunctionalComponent {\n  let native = natives.get(id);\n  if (!native) {\n    native = markRaw(() => {\n      const item = visibleById.value.get(id);\n      return item ? h(LinkAnchor, { item, layer: layer.value }) : null;\n    });\n    natives.set(id, native);\n  }\n  return native;\n}\n// Forget the anchors of links that are gone.\nwatch(visibleById, (shown) => {\n  for (const id of natives.keys()) if (!shown.has(id)) natives.delete(id);\n});\n</script>\n\n<template>\n  <div v-if=\"visible.length > 0\" :style=\"{ position: 'absolute', inset: 0, pointerEvents: 'none' }\">\n    <template v-for=\"item in visible\" :key=\"item.id\">\n      <slot v-if=\"slots.link\" name=\"link\" :link=\"item\" :native=\"nativeOf(item.id)\" />\n      <LinkAnchor v-else :item=\"item\" :layer=\"layer\" />\n    </template>\n  </div>\n</template>\n"],"names":["_createElementBlock","_normalizeStyle","LinkHostToken","_useSlots","LinkAnchor","_openBlock","_Fragment","_renderList","_renderSlot","_createBlock"],"mappings":"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"}

package/dist/PagePointerSource.vue_vue_type_script_setup_true_lang-CJt3vdBW.js

@@ -0,0 +1,33 @@
+import { defineComponent, ref, watch, openBlock, createElementBlock, normalizeStyle, unref } from "vue";
+import { InteractionToken } from "@embedpdf/plugin-interaction/contract/host";
+import { attachPagePointer } from "@embedpdf/web";
+import { h as useOptionalCapability, i as useOptionalSelector } from "./capabilities-C7YzgPCX.js";
+import { u as usePage } from "./page-D9XIuLSj.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "PagePointerSource",
+  setup(__props) {
+    const page = usePage();
+    const interaction = useOptionalCapability(InteractionToken);
+    const cursor = useOptionalSelector(InteractionToken, (hub) => hub.getCursor(), "default");
+    const element = ref(null);
+    watch(
+      [element, interaction],
+      ([surface, hub], _previous, onCleanup) => {
+        if (!surface || !hub) return;
+        onCleanup(attachPagePointer(surface, hub, () => page.value));
+      },
+      { immediate: true, flush: "post" }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "element",
+        ref: element,
+        style: normalizeStyle({ position: "absolute", inset: 0, cursor: unref(cursor), touchAction: "none" })
+      }, null, 4);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};
+//# sourceMappingURL=PagePointerSource.vue_vue_type_script_setup_true_lang-CJt3vdBW.js.map

package/dist/PagePointerSource.vue_vue_type_script_setup_true_lang-CJt3vdBW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PagePointerSource.vue_vue_type_script_setup_true_lang-CJt3vdBW.js","sources":["../src/interaction/PagePointerSource.vue"],"sourcesContent":["<!--\n  <PagePointerSource>: the one pointer listener of a page. It converts pointer\n  events to page space through the page context and hands them to the\n  interaction hub, so it works the same on any page surface. Features never\n  listen to the pointer themselves: they register handlers with the hub, and a\n  tool of your own brings its pointer methods (`registerTool`). It sits on top\n  as the page's event surface; the layers below ignore the pointer.\n-->\n<script setup lang=\"ts\">\nimport { ref, watch } from 'vue';\nimport { InteractionToken } from '@embedpdf/plugin-interaction/contract/host';\nimport { attachPagePointer } from '@embedpdf/web';\nimport { useOptionalCapability, useOptionalSelector } from '../runtime/capabilities';\nimport { usePage } from '../runtime/page';\n\nconst page = usePage();\n// The pointer source is a host of the hub: it dispatches samples.\nconst interaction = useOptionalCapability(InteractionToken);\nconst cursor = useOptionalSelector(InteractionToken, (hub) => hub.getCursor(), 'default');\nconst element = ref<HTMLDivElement | null>(null);\n\n// The listener is `@embedpdf/web`'s, shared with every framework. It reads the\n// page when an event arrives: a zoom changes it, and a drag carries on through it.\nwatch(\n  [element, interaction],\n  ([surface, hub], _previous, onCleanup) => {\n    if (!surface || !hub) return;\n    onCleanup(attachPagePointer(surface, hub, () => page.value));\n  },\n  { immediate: true, flush: 'post' },\n);\n</script>\n\n<template>\n  <div ref=\"element\" :style=\"{ position: 'absolute', inset: 0, cursor, touchAction: 'none' }\" />\n</template>\n"],"names":["_createElementBlock","_unref"],"mappings":";;;;;;;;AAeA,UAAM,OAAO,QAAA;AAEb,UAAM,cAAc,sBAAsB,gBAAgB;AAC1D,UAAM,SAAS,oBAAoB,kBAAkB,CAAC,QAAQ,IAAI,UAAA,GAAa,SAAS;AACxF,UAAM,UAAU,IAA2B,IAAI;AAI/C;AAAA,MACE,CAAC,SAAS,WAAW;AAAA,MACrB,CAAC,CAAC,SAAS,GAAG,GAAG,WAAW,cAAc;AACxC,YAAI,CAAC,WAAW,CAAC,IAAK;AACtB,kBAAU,kBAAkB,SAAS,KAAK,MAAM,KAAK,KAAK,CAAC;AAAA,MAC7D;AAAA,MACA,EAAE,WAAW,MAAM,OAAO,OAAA;AAAA,IAAO;;0BAKjCA,mBAA8F,OAAA;AAAA,iBAArF;AAAA,QAAJ,KAAI;AAAA,QAAW,gEAAyCC,MAAA,MAAA,GAAM,aAAA,QAAA;AAAA,MAAA;;;;"}

package/dist/PagePointerSource.vue_vue_type_script_setup_true_lang-Cw29c8Oa.cjs

@@ -0,0 +1,32 @@
+"use strict";
+const vue = require("vue");
+const host = require("@embedpdf/plugin-interaction/contract/host");
+const web = require("@embedpdf/web");
+const capabilities = require("./capabilities-DVNJmgy7.cjs");
+const page = require("./page-Doy4_Sdz.cjs");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "PagePointerSource",
+  setup(__props) {
+    const page$1 = page.usePage();
+    const interaction = capabilities.useOptionalCapability(host.InteractionToken);
+    const cursor = capabilities.useOptionalSelector(host.InteractionToken, (hub) => hub.getCursor(), "default");
+    const element = vue.ref(null);
+    vue.watch(
+      [element, interaction],
+      ([surface, hub], _previous, onCleanup) => {
+        if (!surface || !hub) return;
+        onCleanup(web.attachPagePointer(surface, hub, () => page$1.value));
+      },
+      { immediate: true, flush: "post" }
+    );
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "element",
+        ref: element,
+        style: vue.normalizeStyle({ position: "absolute", inset: 0, cursor: vue.unref(cursor), touchAction: "none" })
+      }, null, 4);
+    };
+  }
+});
+exports._sfc_main = _sfc_main;
+//# sourceMappingURL=PagePointerSource.vue_vue_type_script_setup_true_lang-Cw29c8Oa.cjs.map

package/dist/PagePointerSource.vue_vue_type_script_setup_true_lang-Cw29c8Oa.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PagePointerSource.vue_vue_type_script_setup_true_lang-Cw29c8Oa.cjs","sources":["../src/interaction/PagePointerSource.vue"],"sourcesContent":["<!--\n  <PagePointerSource>: the one pointer listener of a page. It converts pointer\n  events to page space through the page context and hands them to the\n  interaction hub, so it works the same on any page surface. Features never\n  listen to the pointer themselves: they register handlers with the hub, and a\n  tool of your own brings its pointer methods (`registerTool`). It sits on top\n  as the page's event surface; the layers below ignore the pointer.\n-->\n<script setup lang=\"ts\">\nimport { ref, watch } from 'vue';\nimport { InteractionToken } from '@embedpdf/plugin-interaction/contract/host';\nimport { attachPagePointer } from '@embedpdf/web';\nimport { useOptionalCapability, useOptionalSelector } from '../runtime/capabilities';\nimport { usePage } from '../runtime/page';\n\nconst page = usePage();\n// The pointer source is a host of the hub: it dispatches samples.\nconst interaction = useOptionalCapability(InteractionToken);\nconst cursor = useOptionalSelector(InteractionToken, (hub) => hub.getCursor(), 'default');\nconst element = ref<HTMLDivElement | null>(null);\n\n// The listener is `@embedpdf/web`'s, shared with every framework. It reads the\n// page when an event arrives: a zoom changes it, and a drag carries on through it.\nwatch(\n  [element, interaction],\n  ([surface, hub], _previous, onCleanup) => {\n    if (!surface || !hub) return;\n    onCleanup(attachPagePointer(surface, hub, () => page.value));\n  },\n  { immediate: true, flush: 'post' },\n);\n</script>\n\n<template>\n  <div ref=\"element\" :style=\"{ position: 'absolute', inset: 0, cursor, touchAction: 'none' }\" />\n</template>\n"],"names":["page","usePage","useOptionalCapability","InteractionToken","useOptionalSelector","ref","watch","attachPagePointer","_createElementBlock","_unref"],"mappings":";;;;;;;;;AAeA,UAAMA,SAAOC,KAAAA,QAAA;AAEb,UAAM,cAAcC,aAAAA,sBAAsBC,qBAAgB;AAC1D,UAAM,SAASC,aAAAA,oBAAoBD,uBAAkB,CAAC,QAAQ,IAAI,UAAA,GAAa,SAAS;AACxF,UAAM,UAAUE,IAAAA,IAA2B,IAAI;AAI/CC,QAAAA;AAAAA,MACE,CAAC,SAAS,WAAW;AAAA,MACrB,CAAC,CAAC,SAAS,GAAG,GAAG,WAAW,cAAc;AACxC,YAAI,CAAC,WAAW,CAAC,IAAK;AACtB,kBAAUC,IAAAA,kBAAkB,SAAS,KAAK,MAAMP,OAAK,KAAK,CAAC;AAAA,MAC7D;AAAA,MACA,EAAE,WAAW,MAAM,OAAO,OAAA;AAAA,IAAO;;8BAKjCQ,IAAAA,mBAA8F,OAAA;AAAA,iBAArF;AAAA,QAAJ,KAAI;AAAA,QAAW,oEAAyCC,IAAAA,MAAA,MAAA,GAAM,aAAA,QAAA;AAAA,MAAA;;;;;"}