@inkbar/vue 0.0.0-stage → 0.1.1

package/dist/components/InkViewport.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,148 @@
+import { injectInkContext as e } from "../context.js";
+import t from "./InkPage.js";
+import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createSlots as c, createTextVNode as l, defineComponent as u, mergeProps as d, onBeforeUnmount as f, onBeforeUpdate as p, onMounted as m, openBlock as h, renderList as g, renderSlot as _, shallowRef as v, toDisplayString as y, useSlots as b, useTemplateRef as x, watch as S, withCtx as C } from "vue";
+import { mountViewer as w } from "@inkbar/core/dom";
+//#region src/components/InkViewport.vue?vue&type=script&setup=true&lang.ts
+var T = ["data-state"], E = {
+	key: 0,
+	class: "ink-status",
+	role: "status",
+	"aria-live": "polite"
+}, D = {
+	key: 1,
+	class: "ink-status ink-error",
+	role: "alert"
+}, O = ["title"], k = {
+	key: 2,
+	class: "ink-status ink-empty"
+}, A = /*@__PURE__*/ u({
+	__name: "InkViewport",
+	props: {
+		mode: { default: "continuous" },
+		rotation: { default: 0 },
+		gap: { default: 16 },
+		buffer: { default: 2 }
+	},
+	setup(u) {
+		let A = u, j = b(), M = e(), N = x("scroll"), P = v([]), F = r(() => M.status.value.state), I = r(() => M.status.value.state === "error" ? M.status.value.error : null), L = v(null), R = 0, z = !1, B = [], V, H;
+		function U() {
+			for (let e of B) e();
+			B = [], L.value?.destroy(), L.value = null, M.viewport.value && (M.viewport.value = null), M.tools.value && (M.tools.value = null), P.value = [];
+		}
+		function W(e) {
+			let t = L.value;
+			t && (R += 1, e.customAnnotations !== void 0 && (z = e.customAnnotations), t.rebuild(e));
+		}
+		function G() {
+			U(), V = void 0, H = void 0;
+			let e = M.document.value, t = N.value;
+			if (!e || !t || M.status.value.state !== "ready") return;
+			let n = !0;
+			R += 1, z = !!j.annotation, L.value = w({
+				container: t,
+				document: e,
+				zoom: M.zoomModel.value ?? "fit-width",
+				...M.pageModel.value === void 0 ? {} : { page: M.pageModel.value },
+				mode: A.mode,
+				rotation: A.rotation,
+				gap: A.gap,
+				buffer: A.buffer,
+				tool: M.tool.value,
+				customAnnotations: z,
+				onActivate: (e) => M.setActivated(e),
+				onBuild: (e, t) => {
+					M.viewport.value = e, M.tools.value = t, n && (n = !1, V = e.zoom.get(), H = 0);
+					for (let e of B) e();
+					let r = (e) => {
+						e !== V && (V = e, M.reportZoom(e));
+					}, i = (e) => {
+						e !== H && (H = e, M.reportPage(e));
+					};
+					B = [e.zoom.subscribe(r), e.currentPage.subscribe(i)], r(e.zoom.get()), i(e.currentPage.get());
+				},
+				onPageMount: (e, t, n) => {
+					P.value = [...P.value, {
+						build: R,
+						page: e,
+						host: n,
+						mount: t,
+						error: null,
+						custom: z
+					}];
+				},
+				onPageUnmount: (e) => {
+					P.value = P.value.filter((t) => t.page !== e);
+				},
+				onPageError: (e, t) => {
+					P.value = P.value.map((n) => n.page === e ? {
+						...n,
+						error: t
+					} : n);
+				}
+			});
+		}
+		return m(() => {
+			S([() => M.document.value, () => M.status.value.state], G, { immediate: !0 });
+		}), S(() => M.zoomModel.value, (e) => {
+			let t = L.value?.viewport;
+			t && e !== void 0 && e !== t.zoom.get() && t.setZoom(e);
+		}), S(() => M.pageModel.value, (e) => {
+			let t = L.value?.viewport;
+			t && e !== void 0 && e !== H && e !== t.currentPage.get() && t.scrollToPage(e);
+		}), S(() => M.tool.value, (e) => {
+			let t = L.value?.tools;
+			t && t.active.get() !== e && t.set(e);
+		}), S(() => A.mode, (e) => L.value?.viewport.setMode(e)), S(() => A.rotation, (e) => L.value?.viewport.setRotation(e)), S([() => A.gap, () => A.buffer], ([e, t]) => W({
+			gap: e,
+			buffer: t,
+			customAnnotations: !!j.annotation
+		})), p(() => {
+			let e = !!j.annotation;
+			L.value && e !== z && W({ customAnnotations: e });
+		}), f(U), (e, r) => (h(), o("div", {
+			class: "ink-viewport-root",
+			"data-ink-viewport-root": "",
+			"data-state": F.value
+		}, [
+			F.value === "loading" ? (h(), o("div", E, [_(e.$slots, "loading", {}, () => [r[0] ||= l("Loading document…", -1)])])) : I.value ? (h(), o("div", D, [_(e.$slots, "error", { error: I.value }, () => [r[1] ||= s("p", { class: "ink-error-title" }, "This document could not be opened.", -1), s("p", null, [s("code", {
+				class: "ink-error-code",
+				title: I.value.message
+			}, y(I.value.code), 9, O)])])])) : F.value === "idle" ? (h(), o("div", k, [_(e.$slots, "empty")])) : a("", !0),
+			s("div", {
+				ref_key: "scroll",
+				ref: N,
+				class: "ink-scroll",
+				"data-ink-scroll": "",
+				tabindex: "0",
+				role: "document",
+				"aria-label": "Document"
+			}, null, 512),
+			(h(!0), o(n, null, g(P.value, (n) => (h(), i(t, {
+				key: `${n.build}:${n.page}`,
+				page: n.page,
+				host: n.host,
+				mount: n.mount,
+				error: n.error,
+				"custom-annotations": n.custom
+			}, c({ _: 2 }, [j.annotation ? {
+				name: "annotation",
+				fn: C((t) => [_(e.$slots, "annotation", d({ ref_for: !0 }, t))]),
+				key: "0"
+			} : void 0, j["page-error"] ? {
+				name: "page-error",
+				fn: C((t) => [_(e.$slots, "page-error", d({ ref_for: !0 }, t))]),
+				key: "1"
+			} : void 0]), 1032, [
+				"page",
+				"host",
+				"mount",
+				"error",
+				"custom-annotations"
+			]))), 128))
+		], 8, T));
+	}
+});
+//#endregion
+export { A as default };
+
+//# sourceMappingURL=InkViewport.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/InkViewport.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkViewport.vue_vue_type_script_setup_true_lang.js","names":["_useSlots","_openBlock","_createElementBlock","_renderSlot","_createTextVNode","_createElementVNode","_toDisplayString","_createCommentVNode","_Fragment","_renderList","_createBlock","InkPage","_createSlots","_withCtx","_mergeProps","InkPage_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","InkViewport_vue_vue_type_script_setup_true_lang_default","props","__props","slots","useSlots","ctx","injectInkContext","scroll","useTemplateRef","pages","shallowRef","state","computed","error","engine","build","custom","stops","lastReportedZoom","lastReportedPage","teardown","stop","rebuild","e","opts","setup","doc","el","first","mountViewer","id","vp","tc","reportZoom","z","reportPage","p","page","err","onMounted","watch","t","m","r","gap","buffer","onBeforeUpdate","next","onBeforeUnmount","openBlock","createElementBlock","renderSlot","_ctx","_cache","createTextVNode","createElementVNode","toDisplayString","createCommentVNode","Fragment","renderList","createBlock","createSlots","withCtx","mergeProps","slotProps"],"sources":["../../src/components/InkViewport.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * The scroll element is handed to core's `mountViewer`, which builds the viewport, the page\n * layers, the tool controller and the keyboard shortcuts in it; Vue never renders children\n * into it. The engine reports each page host it mounts, and InkPage components rendered here\n * (they render nothing in place) teleport the page-error and custom-annotation slots into them.\n *\n * Two-way zoom and page: the viewport's own changes are reported through the context, and\n * the host's v-model values are applied only when they differ from the viewport's state, so\n * the echo of a reported value does nothing.\n */\nimport { mountViewer } from '@inkbar/core/dom'\nimport {\n  computed,\n  onBeforeUnmount,\n  onBeforeUpdate,\n  onMounted,\n  shallowRef,\n  useTemplateRef,\n  watch,\n} from 'vue'\n\nimport { injectInkContext } from '../context'\n\nimport InkPage from './InkPage.vue'\n\nimport type { AnnotationSlotProps } from './annotation-slot'\nimport type { InkError } from '@inkbar/core'\nimport type {\n  LayoutMode,\n  PageMount,\n  ViewerEngine,\n  ViewRotation,\n  ZoomValue,\n} from '@inkbar/core/dom'\n\nconst props = withDefaults(\n  defineProps<{\n    mode?: LayoutMode\n    rotation?: ViewRotation\n    /** Gap between pages, CSS px. */\n    gap?: number\n    /** Pages kept mounted either side of the visible ones. */\n    buffer?: number\n  }>(),\n  { mode: 'continuous', rotation: 0, gap: 16, buffer: 2 }\n)\n\nconst slots = defineSlots<{\n  loading?(): unknown\n  error?(props: { error: InkError }): unknown\n  empty?(): unknown\n  annotation?(props: AnnotationSlotProps): unknown\n  /** Shown inside a page that failed to render. The rest of the document stays usable. */\n  'page-error'?(props: { error: InkError; page: number }): unknown\n}>()\n\nconst ctx = injectInkContext()\nconst scroll = useTemplateRef<HTMLElement>('scroll')\n\ninterface MountedPage {\n  /** The engine build the host belongs to; part of the InkPage key. */\n  build: number\n  page: number\n  host: HTMLElement\n  mount: PageMount\n  error: InkError | null\n  /** Whether the build that mounted the page renders the annotation slot. */\n  custom: boolean\n}\n/** Page hosts, mounts and errors the engine reported; InkPage renders Teleports for them. */\nconst pages = shallowRef<MountedPage[]>([])\n\nconst state = computed(() => ctx.status.value.state)\nconst error = computed<InkError | null>(() =>\n  ctx.status.value.state === 'error' ? ctx.status.value.error : null\n)\n\nconst engine = shallowRef<ViewerEngine | null>(null)\n/**\n * Numbered before each build starts, so the pages a build mounts carry its own number. A\n * rebuild gives each page a new host and mount, so pages from an earlier build must remount,\n * not be reused.\n */\nlet build = 0\n/** Whether the current build renders the annotation slot. */\nlet custom = false\nlet stops: (() => void)[] = []\n/** The zoom and page last reported to the host. */\nlet lastReportedZoom: ZoomValue | undefined\nlet lastReportedPage: number | undefined\n\nfunction teardown(): void {\n  for (const stop of stops) stop()\n  stops = []\n  // Unmounts every page, which empties `pages` through `onPageUnmount`.\n  engine.value?.destroy()\n  engine.value = null\n  if (ctx.viewport.value) ctx.viewport.value = null\n  if (ctx.tools.value) ctx.tools.value = null\n  pages.value = []\n}\n\nfunction rebuild(opts: Parameters<ViewerEngine['rebuild']>[0]): void {\n  const e = engine.value\n  if (!e) return\n  build += 1\n  if (opts.customAnnotations !== undefined) custom = opts.customAnnotations\n  e.rebuild(opts)\n}\n\n// Build for a new document or status; the previous engine is torn down first.\nfunction setup(): void {\n  teardown()\n  lastReportedZoom = undefined\n  lastReportedPage = undefined\n  const doc = ctx.document.value\n  const el = scroll.value\n  if (!doc || !el || ctx.status.value.state !== 'ready') return\n  let first = true\n  build += 1\n  custom = !!slots.annotation\n  engine.value = mountViewer({\n    container: el,\n    document: doc,\n    zoom: ctx.zoomModel.value ?? 'fit-width',\n    ...(ctx.pageModel.value === undefined ? {} : { page: ctx.pageModel.value }),\n    mode: props.mode,\n    rotation: props.rotation,\n    gap: props.gap,\n    buffer: props.buffer,\n    tool: ctx.tool.value,\n    customAnnotations: custom,\n    onActivate: (id) => ctx.setActivated(id),\n    onBuild: (vp, tc) => {\n      ctx.viewport.value = vp\n      ctx.tools.value = tc\n      if (first) {\n        // A new document starts from where the viewport opens (its zoom, on the first page:\n        // `createViewport` always starts at page 0); only later changes are reported, the\n        // restored page among them, since the engine has already scrolled to it.\n        first = false\n        lastReportedZoom = vp.zoom.get()\n        lastReportedPage = 0\n      }\n      for (const stop of stops) stop()\n      const reportZoom = (z: ZoomValue): void => {\n        if (z === lastReportedZoom) return\n        lastReportedZoom = z\n        ctx.reportZoom(z)\n      }\n      const reportPage = (p: number): void => {\n        if (p === lastReportedPage) return\n        lastReportedPage = p\n        ctx.reportPage(p)\n      }\n      stops = [vp.zoom.subscribe(reportZoom), vp.currentPage.subscribe(reportPage)]\n      // Whatever the build restored is reported once; nothing is when it matched.\n      reportZoom(vp.zoom.get())\n      reportPage(vp.currentPage.get())\n    },\n    onPageMount: (page, mount, host) => {\n      pages.value = [...pages.value, { build, page, host, mount, error: null, custom }]\n    },\n    onPageUnmount: (page) => {\n      pages.value = pages.value.filter((p) => p.page !== page)\n    },\n    onPageError: (page, err) => {\n      pages.value = pages.value.map((p) => (p.page === page ? { ...p, error: err } : p))\n    },\n  })\n}\n\nonMounted(() => {\n  watch([() => ctx.document.value, () => ctx.status.value.state], setup, {\n    immediate: true,\n  })\n})\n\nwatch(\n  () => ctx.zoomModel.value,\n  (z: ZoomValue | undefined) => {\n    const vp = engine.value?.viewport\n    if (vp && z !== undefined && z !== vp.zoom.get()) vp.setZoom(z)\n  }\n)\nwatch(\n  () => ctx.pageModel.value,\n  (p) => {\n    const vp = engine.value?.viewport\n    if (!vp || p === undefined || p === lastReportedPage) return\n    if (p !== vp.currentPage.get()) vp.scrollToPage(p)\n  }\n)\nwatch(\n  () => ctx.tool.value,\n  (t) => {\n    const tc = engine.value?.tools\n    if (tc && tc.active.get() !== t) tc.set(t)\n  }\n)\nwatch(\n  () => props.mode,\n  (m) => engine.value?.viewport.setMode(m)\n)\nwatch(\n  () => props.rotation,\n  (r) => engine.value?.viewport.setRotation(r)\n)\n// Gap and buffer are construction options: rebuild for the same document, keeping zoom and page.\n// The slots are already updated when this runs, so it carries the annotation slot too: a slot\n// toggle in the same tick is then recorded here and `onBeforeUpdate` finds nothing left to do.\nwatch([() => props.gap, () => props.buffer], ([gap, buffer]) =>\n  rebuild({ gap, buffer, customAnnotations: !!slots.annotation })\n)\n\n// Slots are not reactive, so a change to whether the annotation slot is given is caught here.\n// `onBeforeUpdate` runs after the new slots are in place and before this render: the rebuild\n// swaps `pages` for the new build's pages synchronously, so the render that follows never pairs\n// the annotation slot with an overlay built without it (or the reverse). The rebuild keeps the\n// scroll position.\nonBeforeUpdate(() => {\n  const next = !!slots.annotation\n  if (engine.value && next !== custom) rebuild({ customAnnotations: next })\n})\n\nonBeforeUnmount(teardown)\n</script>\n\n<template>\n  <div class=\"ink-viewport-root\" data-ink-viewport-root :data-state=\"state\">\n    <div v-if=\"state === 'loading'\" class=\"ink-status\" role=\"status\" aria-live=\"polite\">\n      <slot name=\"loading\">Loading document…</slot>\n    </div>\n    <div v-else-if=\"error\" class=\"ink-status ink-error\" role=\"alert\">\n      <slot name=\"error\" :error=\"error\">\n        <p class=\"ink-error-title\">This document could not be opened.</p>\n        <!-- The message comes from the PDF engine and is not written for readers: it stays\n             off the page, on the code's tooltip. -->\n        <p>\n          <code class=\"ink-error-code\" :title=\"error.message\">{{ error.code }}</code>\n        </p>\n      </slot>\n    </div>\n    <div v-else-if=\"state === 'idle'\" class=\"ink-status ink-empty\">\n      <slot name=\"empty\" />\n    </div>\n    <div\n      ref=\"scroll\"\n      class=\"ink-scroll\"\n      data-ink-scroll\n      tabindex=\"0\"\n      role=\"document\"\n      aria-label=\"Document\"\n    />\n    <InkPage\n      v-for=\"p in pages\"\n      :key=\"`${p.build}:${p.page}`\"\n      :page=\"p.page\"\n      :host=\"p.host\"\n      :mount=\"p.mount\"\n      :error=\"p.error\"\n      :custom-annotations=\"p.custom\"\n    >\n      <template v-if=\"slots.annotation\" #annotation=\"slotProps\">\n        <slot name=\"annotation\" v-bind=\"slotProps\" />\n      </template>\n      <template v-if=\"slots['page-error']\" #page-error=\"slotProps\">\n        <slot name=\"page-error\" v-bind=\"slotProps\" />\n      </template>\n    </InkPage>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/InkZoomIn.js

@@ -0,0 +1,7 @@
+import e from "./InkZoomIn.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/InkZoomIn.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=InkZoomIn.js.map

package/dist/components/InkZoomIn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkZoomIn.js","names":["_sfc_main","InkZoomIn_vue_vue_type_script_setup_true_lang_default","InkZoomIn_default"],"sources":["../../src/components/InkZoomIn.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ToolbarButton } from 'reka-ui'\n\nimport { useZoom } from '../composables/useZoom'\n\nwithDefaults(defineProps<{ asChild?: boolean }>(), { asChild: false })\nconst { zoomIn } = useZoom()\n// Reka's typed props stop at its own; ARIA and listeners go through a bound object.\nconst attrs = {\n  'aria-label': 'Zoom in',\n  title: 'Zoom in',\n  onClick: () => zoomIn(),\n}\n</script>\n\n<template>\n  <ToolbarButton :as-child=\"asChild\" class=\"ink-zoom-in\" data-ink-zoom-in v-bind=\"attrs\">\n    <slot>+</slot>\n  </ToolbarButton>\n</template>\n"],"mappings":""}

package/dist/components/InkZoomIn.vue.d.ts

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    asChild?: boolean;
+};
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    asChild: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=InkZoomIn.vue.d.ts.map

package/dist/components/InkZoomIn.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkZoomIn.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkZoomIn.vue"],"names":[],"mappings":"AA2BA,KAAK,WAAW,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AA6CzC,QAAA,IAAI,OAAO,IAAW,CAAC;AACvB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAG/C,QAAA,MAAM,UAAU;;6EAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/InkZoomIn.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,30 @@
+import { useZoom as e } from "../composables/useZoom.js";
+import { createBlock as t, createTextVNode as n, defineComponent as r, mergeProps as i, openBlock as a, renderSlot as o, unref as s, withCtx as c } from "vue";
+import { ToolbarButton as l } from "reka-ui";
+//#region src/components/InkZoomIn.vue?vue&type=script&setup=true&lang.ts
+var u = /*@__PURE__*/ r({
+	__name: "InkZoomIn",
+	props: { asChild: {
+		type: Boolean,
+		default: !1
+	} },
+	setup(r) {
+		let { zoomIn: u } = e(), d = {
+			"aria-label": "Zoom in",
+			title: "Zoom in",
+			onClick: () => u()
+		};
+		return (e, u) => (a(), t(s(l), i({
+			"as-child": r.asChild,
+			class: "ink-zoom-in",
+			"data-ink-zoom-in": ""
+		}, d), {
+			default: c(() => [o(e.$slots, "default", {}, () => [u[0] ||= n("+", -1)])]),
+			_: 3
+		}, 16, ["as-child"]));
+	}
+});
+//#endregion
+export { u as default };
+
+//# sourceMappingURL=InkZoomIn.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/InkZoomIn.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkZoomIn.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","_mergeProps","_withCtx","_renderSlot","_createTextVNode","InkZoomIn_vue_vue_type_script_setup_true_lang_default","useZoom","attrs","zoomIn","openBlock","createBlock","unref","ToolbarButton","mergeProps","__props","withCtx","renderSlot","_ctx","_cache","createTextVNode"],"sources":["../../src/components/InkZoomIn.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ToolbarButton } from 'reka-ui'\n\nimport { useZoom } from '../composables/useZoom'\n\nwithDefaults(defineProps<{ asChild?: boolean }>(), { asChild: false })\nconst { zoomIn } = useZoom()\n// Reka's typed props stop at its own; ARIA and listeners go through a bound object.\nconst attrs = {\n  'aria-label': 'Zoom in',\n  title: 'Zoom in',\n  onClick: () => zoomIn(),\n}\n</script>\n\n<template>\n  <ToolbarButton :as-child=\"asChild\" class=\"ink-zoom-in\" data-ink-zoom-in v-bind=\"attrs\">\n    <slot>+</slot>\n  </ToolbarButton>\n</template>\n"],"mappings":";;;;;;;;;;;EAMA,IAAM,EAAE,cAAWQ,EAAQ,GAErBC,IAAQ;GACZ,cAAc;GACd,OAAO;GACP,eAAeC,EAAO;EACxB;oBAIEV,EAAA,GAAAC,EAEgBC,EAAAY,CAAA,GAFhBX,EAEgB;GAFA,YAAUa,EAAA;GAAS,OAAM;GAAc,oBAAA;EAAyB,GAAAP,CAAK,GAAA;GACnF,SAAAL,QAAc,CAAdC,EAAcc,EAAA,QAAA,WAAA,CAAA,SAAA,CAAR,AAAAC,EAAA,OAAAd,EAAA,KAAC,EAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/InkZoomOut.js

@@ -0,0 +1,7 @@
+import e from "./InkZoomOut.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/InkZoomOut.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=InkZoomOut.js.map

package/dist/components/InkZoomOut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkZoomOut.js","names":["_sfc_main","InkZoomOut_vue_vue_type_script_setup_true_lang_default","InkZoomOut_default"],"sources":["../../src/components/InkZoomOut.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ToolbarButton } from 'reka-ui'\n\nimport { useZoom } from '../composables/useZoom'\n\nwithDefaults(defineProps<{ asChild?: boolean }>(), { asChild: false })\nconst { zoomOut } = useZoom()\n// Reka's typed props stop at its own; ARIA and listeners go through a bound object.\nconst attrs = {\n  'aria-label': 'Zoom out',\n  title: 'Zoom out',\n  onClick: () => zoomOut(),\n}\n</script>\n\n<template>\n  <ToolbarButton\n    :as-child=\"asChild\"\n    class=\"ink-zoom-out\"\n    data-ink-zoom-out\n    v-bind=\"attrs\"\n  >\n    <slot>−</slot>\n  </ToolbarButton>\n</template>\n"],"mappings":""}

package/dist/components/InkZoomOut.vue.d.ts

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    asChild?: boolean;
+};
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    asChild: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=InkZoomOut.vue.d.ts.map

package/dist/components/InkZoomOut.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkZoomOut.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkZoomOut.vue"],"names":[],"mappings":"AAgCA,KAAK,WAAW,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AA6CzC,QAAA,IAAI,OAAO,IAAW,CAAC;AACvB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAG/C,QAAA,MAAM,UAAU;;6EAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/InkZoomOut.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,30 @@
+import { useZoom as e } from "../composables/useZoom.js";
+import { createBlock as t, createTextVNode as n, defineComponent as r, mergeProps as i, openBlock as a, renderSlot as o, unref as s, withCtx as c } from "vue";
+import { ToolbarButton as l } from "reka-ui";
+//#region src/components/InkZoomOut.vue?vue&type=script&setup=true&lang.ts
+var u = /*@__PURE__*/ r({
+	__name: "InkZoomOut",
+	props: { asChild: {
+		type: Boolean,
+		default: !1
+	} },
+	setup(r) {
+		let { zoomOut: u } = e(), d = {
+			"aria-label": "Zoom out",
+			title: "Zoom out",
+			onClick: () => u()
+		};
+		return (e, u) => (a(), t(s(l), i({
+			"as-child": r.asChild,
+			class: "ink-zoom-out",
+			"data-ink-zoom-out": ""
+		}, d), {
+			default: c(() => [o(e.$slots, "default", {}, () => [u[0] ||= n("−", -1)])]),
+			_: 3
+		}, 16, ["as-child"]));
+	}
+});
+//#endregion
+export { u as default };
+
+//# sourceMappingURL=InkZoomOut.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/InkZoomOut.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkZoomOut.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","_mergeProps","_withCtx","_renderSlot","_createTextVNode","InkZoomOut_vue_vue_type_script_setup_true_lang_default","useZoom","attrs","zoomOut","openBlock","createBlock","unref","ToolbarButton","mergeProps","__props","withCtx","renderSlot","_ctx","_cache","createTextVNode"],"sources":["../../src/components/InkZoomOut.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ToolbarButton } from 'reka-ui'\n\nimport { useZoom } from '../composables/useZoom'\n\nwithDefaults(defineProps<{ asChild?: boolean }>(), { asChild: false })\nconst { zoomOut } = useZoom()\n// Reka's typed props stop at its own; ARIA and listeners go through a bound object.\nconst attrs = {\n  'aria-label': 'Zoom out',\n  title: 'Zoom out',\n  onClick: () => zoomOut(),\n}\n</script>\n\n<template>\n  <ToolbarButton\n    :as-child=\"asChild\"\n    class=\"ink-zoom-out\"\n    data-ink-zoom-out\n    v-bind=\"attrs\"\n  >\n    <slot>−</slot>\n  </ToolbarButton>\n</template>\n"],"mappings":";;;;;;;;;;;EAMA,IAAM,EAAE,eAAYQ,EAAQ,GAEtBC,IAAQ;GACZ,cAAc;GACd,OAAO;GACP,eAAeC,EAAQ;EACzB;oBAIEV,EAAA,GAAAC,EAOgBC,EAAAY,CAAA,GAPhBX,EAOgB;GANb,YAAUa,EAAA;GACX,OAAM;GACN,qBAAA;EACQ,GAAAP,CAAK,GAAA;GAEb,SAAAL,QAAc,CAAdC,EAAcc,EAAA,QAAA,WAAA,CAAA,SAAA,CAAR,AAAAC,EAAA,OAAAd,EAAA,KAAC,EAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/InkZoomSelect.js

@@ -0,0 +1,7 @@
+import e from "./InkZoomSelect.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/InkZoomSelect.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=InkZoomSelect.js.map

package/dist/components/InkZoomSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkZoomSelect.js","names":["_sfc_main","InkZoomSelect_vue_vue_type_script_setup_true_lang_default","InkZoomSelect_default"],"sources":["../../src/components/InkZoomSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ZOOM_LEVELS } from '@inkbar/core/dom'\nimport { computed } from 'vue'\n\nimport { useZoom } from '../composables/useZoom'\n\nimport type { ZoomValue } from '@inkbar/core/dom'\n\nconst CUSTOM = 'custom:'\n\nconst { zoom, scale, setZoom } = useZoom()\n\nconst level = (z: number) => ZOOM_LEVELS.find((l) => Math.abs(l - z) < 0.001)\n/** A numeric zoom that is not one of the levels (zoom in and out multiply). */\nconst custom = computed(() =>\n  typeof zoom.value === 'number' && level(zoom.value) === undefined ? zoom.value : null\n)\nconst value = computed(() => {\n  const z = zoom.value\n  if (typeof z !== 'number') return z\n  return custom.value === null ? String(level(z)) : `${CUSTOM}${z}`\n})\n\nfunction onChange(e: Event): void {\n  const v = (e.target as HTMLSelectElement).value\n  const next: ZoomValue =\n    v === 'fit-width' || v === 'fit-page' ? v : Number(v.replace(CUSTOM, ''))\n  setZoom(next)\n}\n</script>\n\n<template>\n  <select\n    class=\"ink-zoom-select\"\n    data-ink-zoom-select\n    aria-label=\"Zoom\"\n    :value=\"value\"\n    @change=\"onChange\"\n  >\n    <option value=\"fit-width\">Fit width</option>\n    <option value=\"fit-page\">Fit page</option>\n    <option v-for=\"l in ZOOM_LEVELS\" :key=\"l\" :value=\"String(l)\">\n      {{ Math.round(l * 100) }}%\n    </option>\n    <option v-if=\"custom !== null\" :value=\"`${CUSTOM}${custom}`\">\n      {{ Math.round(scale * 100) }}%\n    </option>\n  </select>\n</template>\n"],"mappings":""}

package/dist/components/InkZoomSelect.vue.d.ts

@@ -0,0 +1,4 @@
+declare const __VLS_export: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=InkZoomSelect.vue.d.ts.map

package/dist/components/InkZoomSelect.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkZoomSelect.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkZoomSelect.vue"],"names":[],"mappings":"AAwHA,QAAA,MAAM,YAAY,+QAChB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/InkZoomSelect.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,39 @@
+import { useZoom as e } from "../composables/useZoom.js";
+import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, openBlock as s, renderList as c, toDisplayString as l, unref as u } from "vue";
+import { ZOOM_LEVELS as d } from "@inkbar/core/dom";
+//#region src/components/InkZoomSelect.vue?vue&type=script&setup=true&lang.ts
+var f = ["value"], p = ["value"], m = ["value"], h = "custom:", g = /*@__PURE__*/ o({
+	__name: "InkZoomSelect",
+	setup(o) {
+		let { zoom: g, scale: _, setZoom: v } = e(), y = (e) => d.find((t) => Math.abs(t - e) < .001), b = n(() => typeof g.value == "number" && y(g.value) === void 0 ? g.value : null), x = n(() => {
+			let e = g.value;
+			return typeof e == "number" ? b.value === null ? String(y(e)) : `${h}${e}` : e;
+		});
+		function S(e) {
+			let t = e.target.value, n = t === "fit-width" || t === "fit-page" ? t : Number(t.replace(h, ""));
+			v(n);
+		}
+		return (e, n) => (s(), i("select", {
+			class: "ink-zoom-select",
+			"data-ink-zoom-select": "",
+			"aria-label": "Zoom",
+			value: x.value,
+			onChange: S
+		}, [
+			n[0] ||= a("option", { value: "fit-width" }, "Fit width", -1),
+			n[1] ||= a("option", { value: "fit-page" }, "Fit page", -1),
+			(s(!0), i(t, null, c(u(d), (e) => (s(), i("option", {
+				key: e,
+				value: String(e)
+			}, l(Math.round(e * 100)) + "% ", 9, p))), 128)),
+			b.value === null ? r("", !0) : (s(), i("option", {
+				key: 0,
+				value: `${h}${b.value}`
+			}, l(Math.round(u(_) * 100)) + "% ", 9, m))
+		], 40, f));
+	}
+});
+//#endregion
+export { g as default };
+
+//# sourceMappingURL=InkZoomSelect.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/InkZoomSelect.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkZoomSelect.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createElementVNode","_Fragment","_renderList","_unref","_toDisplayString","_createCommentVNode","_hoisted_1","_hoisted_2","_hoisted_3","CUSTOM","InkZoomSelect_vue_vue_type_script_setup_true_lang_default","useZoom","level","ZOOM_LEVELS","l","z","custom","computed","zoom","value","onChange","v","next","openBlock","createElementBlock","_cache","createElementVNode","Fragment","renderList","unref","toDisplayString","createCommentVNode","scale"],"sources":["../../src/components/InkZoomSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ZOOM_LEVELS } from '@inkbar/core/dom'\nimport { computed } from 'vue'\n\nimport { useZoom } from '../composables/useZoom'\n\nimport type { ZoomValue } from '@inkbar/core/dom'\n\nconst CUSTOM = 'custom:'\n\nconst { zoom, scale, setZoom } = useZoom()\n\nconst level = (z: number) => ZOOM_LEVELS.find((l) => Math.abs(l - z) < 0.001)\n/** A numeric zoom that is not one of the levels (zoom in and out multiply). */\nconst custom = computed(() =>\n  typeof zoom.value === 'number' && level(zoom.value) === undefined ? zoom.value : null\n)\nconst value = computed(() => {\n  const z = zoom.value\n  if (typeof z !== 'number') return z\n  return custom.value === null ? String(level(z)) : `${CUSTOM}${z}`\n})\n\nfunction onChange(e: Event): void {\n  const v = (e.target as HTMLSelectElement).value\n  const next: ZoomValue =\n    v === 'fit-width' || v === 'fit-page' ? v : Number(v.replace(CUSTOM, ''))\n  setZoom(next)\n}\n</script>\n\n<template>\n  <select\n    class=\"ink-zoom-select\"\n    data-ink-zoom-select\n    aria-label=\"Zoom\"\n    :value=\"value\"\n    @change=\"onChange\"\n  >\n    <option value=\"fit-width\">Fit width</option>\n    <option value=\"fit-page\">Fit page</option>\n    <option v-for=\"l in ZOOM_LEVELS\" :key=\"l\" :value=\"String(l)\">\n      {{ Math.round(l * 100) }}%\n    </option>\n    <option v-if=\"custom !== null\" :value=\"`${CUSTOM}${custom}`\">\n      {{ Math.round(scale * 100) }}%\n    </option>\n  </select>\n</template>\n"],"mappings":";;;;iDAQMW,IAAS;;;EAEf,IAAM,EAAE,SAAM,UAAO,eAAYE,EAAQ,GAEnCC,KAAS,MAAcC,EAAY,MAAM,MAAM,KAAK,IAAIC,IAAIC,CAAC,IAAI,IAAK,GAEtEC,IAASC,QACb,OAAOC,EAAK,SAAU,YAAYN,EAAMM,EAAK,KAAK,MAAM,KAAA,IAAYA,EAAK,QAAQ,IACnF,GACMC,IAAQF,QAAe;GAC3B,IAAMF,IAAIG,EAAK;GAEf,OADI,OAAOH,KAAM,WACVC,EAAO,UAAU,OAAO,OAAOJ,EAAMG,CAAC,CAAC,IAAI,GAAGN,IAASM,MAD5BA;EAEpC,CAAC;EAED,SAASK,EAAS,GAAgB;GAChC,IAAMC,IAAK,EAAE,OAA6B,OACpCC,IACJD,MAAM,eAAeA,MAAM,aAAaA,IAAI,OAAOA,EAAE,QAAQZ,GAAQ,EAAE,CAAC;GAC1E,EAAQa,CAAI;EACd;oBAIExB,EAAA,GAAAC,EAeS,UAAA;GAdP,OAAM;GACN,wBAAA;GACA,cAAW;GACV,OAAOoB,EAAA;GACC;;GAET,AAAAM,EAAA,OAAAzB,EAA4C,UAAA,EAApC,OAAM,YAAW,GAAC,aAAS,EAAA;GACnC,AAAAyB,EAAA,OAAAzB,EAA0C,UAAA,EAAlC,OAAM,WAAU,GAAC,YAAQ,EAAA;IACjCF,EAAA,EAAA,GAAAC,EAESE,GAAA,MAAAC,EAFWC,EAAAU,CAAA,IAAL,OAAff,EAAA,GAAAC,EAES,UAAA;IAFyB,KAAKe;IAAI,OAAO,OAAOA,CAAC;GACrD,GAAAV,EAAA,KAAK,MAAMU,IAAC,GAAA,CAAA,IAAU,MAC3B,GAAAP,CAAA;GACcS,EAAA,UAAM,OAEpBe,EAAA,IAAA,EAAA,KAFAjC,EAAA,GAAAC,EAES,UAAA;;IAFuB,OAAK,GAAKU,IAASO,EAAA;GAC9C,GAAAZ,EAAA,KAAK,MAAMD,EAAA6B,CAAA,IAAK,GAAA,CAAA,IAAU,MAC/B,GAAAxB,CAAA"}

package/dist/components/annotation-element.d.ts

@@ -0,0 +1,5 @@
+import { InkContext } from '../context';
+import { Ref, ShallowRef } from 'vue';
+/** The overlay element core draws for an annotation, for anchoring a popover to it. */
+export declare function useAnnotationElement(ctx: InkContext, id: Readonly<Ref<string | null>>): Readonly<ShallowRef<HTMLElement | null>>;
+//# sourceMappingURL=annotation-element.d.ts.map

package/dist/components/annotation-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"annotation-element.d.ts","sourceRoot":"","sources":["../../src/components/annotation-element.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAE1C,uFAAuF;AACvF,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,UAAU,EACf,EAAE,EAAE,QAAQ,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,GAC/B,QAAQ,CAAC,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,CAoB1C"}

package/dist/components/annotation-element.js

@@ -0,0 +1,18 @@
+import { onBeforeUnmount as e, shallowRef as t, watch as n } from "vue";
+import { observeAnnotationElement as r } from "@inkbar/core/dom";
+//#region src/components/annotation-element.ts
+function i(i, a) {
+	let o = t(null), s;
+	return n([a, () => i.rootEl.value], ([e, t]) => {
+		s?.(), s = void 0, !e || !t ? o.value = null : s = r(t, e, (e) => {
+			o.value = e;
+		});
+	}, {
+		immediate: !0,
+		flush: "post"
+	}), e(() => s?.()), o;
+}
+//#endregion
+export { i as useAnnotationElement };
+
+//# sourceMappingURL=annotation-element.js.map

package/dist/components/annotation-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"annotation-element.js","names":["useAnnotationElement","element","shallowRef","stop","watch","id","ctx","want","root","observeAnnotationElement","el","onBeforeUnmount"],"sources":["../../src/components/annotation-element.ts"],"sourcesContent":["import { observeAnnotationElement } from '@inkbar/core/dom'\nimport { onBeforeUnmount, shallowRef, watch } from 'vue'\n\nimport type { InkContext } from '../context'\nimport type { Ref, ShallowRef } from 'vue'\n\n/** The overlay element core draws for an annotation, for anchoring a popover to it. */\nexport function useAnnotationElement(\n  ctx: InkContext,\n  id: Readonly<Ref<string | null>>\n): Readonly<ShallowRef<HTMLElement | null>> {\n  const element = shallowRef<HTMLElement | null>(null)\n  let stop: (() => void) | undefined\n  watch(\n    [id, () => ctx.rootEl.value],\n    ([want, root]) => {\n      stop?.()\n      stop = undefined\n      if (!want || !root) {\n        element.value = null\n        return\n      }\n      stop = observeAnnotationElement(root, want, (el) => {\n        element.value = el\n      })\n    },\n    { immediate: true, flush: 'post' }\n  )\n  onBeforeUnmount(() => stop?.())\n  return element\n}\n"],"mappings":";;;AAOA,SAAgBA,EACd,GACA,GAC0C;CAC1C,IAAMC,IAAUC,EAA+B,IAAI,GAC/CC;CAiBJ,OAhBAC,EACE,CAACC,SAAUC,EAAI,OAAO,KAAK,IAC1B,CAACC,GAAMC,OAAU;EAGhB,AAFAL,IAAO,GACP,IAAO,KAAA,GACH,CAACI,KAAQ,CAACC,IACZ,EAAQ,QAAQ,OAGlB,IAAOC,EAAyBD,GAAMD,IAAO,MAAO;GAClD,EAAQ,QAAQG;EAClB,CAAC;CACH,GACA;EAAE,WAAW;EAAM,OAAO;CAAO,CACnC,GACAC,QAAsBR,IAAO,CAAC,GACvBF;AACT"}

package/dist/components/annotation-slot.d.ts

@@ -0,0 +1,2 @@
+export type { AnnotationSlotProps, AnnotationState } from '@inkbar/core/dom';
+//# sourceMappingURL=annotation-slot.d.ts.map

package/dist/components/annotation-slot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"annotation-slot.d.ts","sourceRoot":"","sources":["../../src/components/annotation-slot.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/components/popover-focus.d.ts

@@ -0,0 +1,9 @@
+import { FocusReturn } from '@inkbar/core/dom';
+import { InkContext } from '../context';
+export type { FocusReturn };
+/** Reka's `interact-outside` handler: a press that will activate an annotation keeps the popover open. */
+export declare function keepOpenOnAnnotation(event: CustomEvent<{
+    originalEvent: Event;
+}>): void;
+export declare function useFocusReturn(ctx: InkContext): FocusReturn;
+//# sourceMappingURL=popover-focus.d.ts.map

package/dist/components/popover-focus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-focus.d.ts","sourceRoot":"","sources":["../../src/components/popover-focus.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,kBAAkB,CAAA;AAEzB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAE5C,YAAY,EAAE,WAAW,EAAE,CAAA;AAE3B,0GAA0G;AAC1G,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,WAAW,CAAC;IAAE,aAAa,EAAE,KAAK,CAAA;CAAE,CAAC,GAAG,IAAI,CAGvF;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,UAAU,GAAG,WAAW,CAK3D"}

package/dist/components/popover-focus.js

@@ -0,0 +1,15 @@
+import { createFocusReturn as e, shouldKeepOpenOnAnnotation as t } from "@inkbar/core/dom";
+//#region src/components/popover-focus.ts
+function n(e) {
+	t(e.detail.originalEvent.target) && e.preventDefault();
+}
+function r(t) {
+	return e({
+		root: () => t.rootEl.value,
+		activated: () => t.activated.value
+	});
+}
+//#endregion
+export { n as keepOpenOnAnnotation, r as useFocusReturn };
+
+//# sourceMappingURL=popover-focus.js.map

package/dist/components/popover-focus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-focus.js","names":["keepOpenOnAnnotation","shouldKeepOpenOnAnnotation","event","useFocusReturn","createFocusReturn","ctx"],"sources":["../../src/components/popover-focus.ts"],"sourcesContent":["import {\n  createFocusReturn,\n  shouldKeepOpenOnAnnotation,\n  type FocusReturn,\n} from '@inkbar/core/dom'\n\nimport type { InkContext } from '../context'\n\nexport type { FocusReturn }\n\n/** Reka's `interact-outside` handler: a press that will activate an annotation keeps the popover open. */\nexport function keepOpenOnAnnotation(event: CustomEvent<{ originalEvent: Event }>): void {\n  if (shouldKeepOpenOnAnnotation(event.detail.originalEvent.target))\n    event.preventDefault()\n}\n\nexport function useFocusReturn(ctx: InkContext): FocusReturn {\n  return createFocusReturn({\n    root: () => ctx.rootEl.value,\n    activated: () => ctx.activated.value,\n  })\n}\n"],"mappings":";;AAWA,SAAgBA,EAAqB,GAAoD;CACvF,AAAIC,EAA2BC,EAAM,OAAO,cAAc,MAAM,KAC9DA,EAAM,eAAe;AACzB;AAEA,SAAgBC,EAAe,GAA8B;CAC3D,OAAOC,EAAkB;EACvB,YAAYC,EAAI,OAAO;EACvB,iBAAiBA,EAAI,UAAU;CACjC,CAAC;AACH"}