@inkbar/vue 0.4.0 → 0.6.0

package/dist/components/InkHighlightMenu.vue_vue_type_script_setup_true_lang.js

@@ -1,140 +1,150 @@
-import { useTool as e } from "../composables/useTool.js";
-import { useToolOptions as t } from "../composables/useToolOptions.js";
-import n from "./InkIcon.js";
-import r from "./InkColorMenu.js";
-import { Fragment as i, computed as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, guardReactiveProps as d, mergeProps as f, normalizeProps as p, openBlock as m, ref as h, renderList as g, renderSlot as _, toDisplayString as v, unref as y, withCtx as b } from "vue";
-import { MARKUP_ICONS as x, MARKUP_KINDS as S, focusInitialMenuItem as C, handleMenuKeys as w, highlightMenuModel as T, menuItems as E } from "@inkbar/core/dom";
-import { PopoverContent as D, PopoverPortal as O, PopoverRoot as k, PopoverTrigger as A, ToolbarButton as j } from "reka-ui";
-import { ChevronDown as M } from "@inkbar/icons";
+import { useDocument as e } from "../composables/useDocument.js";
+import { useTool as t } from "../composables/useTool.js";
+import { useToolOptions as n } from "../composables/useToolOptions.js";
+import r from "./InkIcon.js";
+import i from "./InkColorMenu.js";
+import { Fragment as a, computed as o, createBlock as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, guardReactiveProps as p, mergeProps as m, normalizeProps as h, openBlock as g, ref as _, renderList as v, renderSlot as y, toDisplayString as b, unref as x, withCtx as S } from "vue";
+import { MARKUP_ICONS as C, MARKUP_KINDS as w, focusInitialMenuItem as T, handleMenuKeys as E, highlightMenuModel as D, menuItems as O } from "@inkbar/core/dom";
+import { PopoverAnchor as k, PopoverContent as A, PopoverPortal as j, PopoverRoot as M, PopoverTrigger as N, ToolbarButton as P } from "reka-ui";
+import { ChevronDown as F } from "@inkbar/icons";
 //#region src/components/InkHighlightMenu.vue?vue&type=script&setup=true&lang.ts
-var N = {
-	role: "group",
-	"aria-label": "Highlight",
-	class: "ink-split-button ink-highlight-menu",
-	"data-ink-highlight-menu": ""
-}, P = ["data-state"], F = {
+var ee = ["data-state"], I = {
 	role: "group",
 	"aria-label": "Kinds",
 	class: "ink-highlight-kinds"
-}, ee = [
+}, L = [
 	"data-key",
 	"aria-checked",
 	"data-state",
 	"onClick"
-], I = {
+], R = {
 	role: "group",
 	"aria-label": "Colour",
 	class: "ink-highlight-colour"
-}, L = /*@__PURE__*/ u({
+}, z = /*@__PURE__*/ f({
+	inheritAttrs: !1,
 	__name: "InkHighlightMenu",
-	setup(u) {
-		let { tool: L, setTool: R } = e(), { options: z, setOptions: B } = t("highlight"), V = h(!1), H = a(() => T(z.value, S)), U = a(() => L.value === "highlight"), W = a(() => x[H.value.kind]), G = !1;
-		function K(e) {
-			e.key !== "ArrowDown" || e.defaultPrevented || V.value || (e.preventDefault(), G = !0, V.value = !0);
+	setup(f) {
+		let { tool: z, setTool: B } = t(), { options: V, setOptions: H } = n("highlight"), { document: U } = e(), W = _(!1), G = o(() => D(V.value, w)), K = o(() => z.value === "highlight"), q = o(() => U.value?.annotations.defaults.color(G.value.kind)), J = o(() => C[G.value.kind]), Y = !1;
+		function X(e) {
+			e.key !== "ArrowDown" || e.defaultPrevented || W.value || (e.preventDefault(), Y = !0, W.value = !0);
 		}
-		function q(e) {
+		function Z(e) {
 			e.preventDefault();
 			let t = document.querySelector("[data-ink-menu=\"highlight\"] [role=\"menu\"]");
-			t && (G ? E(t)[0]?.focus({ preventScroll: !0 }) : C(t)), G = !1;
+			t && (Y ? O(t)[0]?.focus({ preventScroll: !0 }) : T(t)), Y = !1;
 		}
-		function J(e) {
-			B({ kind: e }), R("highlight"), V.value = !1;
+		function Q(e) {
+			H({ kind: e }), B("highlight"), W.value = !1;
 		}
-		let Y = a(() => ({
-			"aria-pressed": String(U.value),
-			"aria-label": H.value.label,
-			title: H.value.label,
-			onClick: () => R("highlight")
-		})), X = {
+		let $ = o(() => ({
+			"aria-pressed": String(K.value),
+			"aria-label": G.value.label,
+			title: G.value.label,
+			onClick: () => B("highlight")
+		})), te = {
 			"aria-label": "Choose highlight",
 			title: "Choose highlight",
 			"aria-haspopup": "menu",
-			onKeydown: K
-		}, Z = { "aria-label": "Highlights" }, Q = {
+			onKeydown: X
+		}, ne = { "aria-label": "Highlights" }, re = {
 			role: "menuitem",
 			tabindex: -1
-		}, $ = {
+		}, ie = {
 			role: "menu",
 			"aria-label": "Highlights",
-			onKeydownCapture: (e) => w(e, e.currentTarget)
+			onKeydownCapture: (e) => E(e, e.currentTarget)
 		};
-		return (e, t) => (m(), o("div", N, [l(y(j), f({
-			class: "ink-tool-button ink-highlight-button",
-			"data-ink-tool-button": "",
-			"data-ink-highlight-button": "",
-			"data-tool": "highlight",
-			"data-kind": H.value.kind,
-			"data-state": U.value ? "on" : "off"
-		}, Y.value), {
-			default: b(() => [_(e.$slots, "default", {
-				active: U.value,
-				kind: H.value.kind
-			}, () => [l(n, { icon: W.value }, null, 8, ["icon"])])]),
-			_: 3
-		}, 16, ["data-kind", "data-state"]), l(y(k), {
-			open: V.value,
-			"onUpdate:open": t[0] ||= (e) => V.value = e
+		return (e, t) => (g(), s(x(M), {
+			open: W.value,
+			"onUpdate:open": t[0] ||= (e) => W.value = e
 		}, {
-			default: b(() => [l(y(j), { "as-child": "" }, {
-				default: b(() => [l(y(A), { "as-child": "" }, {
-					default: b(() => [s("button", f({
-						type: "button",
-						class: "ink-menu-trigger ink-highlight-menu-trigger",
-						"data-ink-highlight-menu-trigger": "",
-						"data-state": V.value ? "open" : "closed"
-					}, X), [l(n, { icon: y(M) }, null, 8, ["icon"])], 16, P)]),
-					_: 1
-				})]),
-				_: 1
-			}), l(y(O), null, {
-				default: b(() => [l(y(D), f({
-					class: "ink-select-content ink-menu-content",
-					"data-ink-select-content": "",
-					"data-ink-menu": "highlight",
-					side: "bottom",
-					align: "start",
-					"side-offset": 4,
-					"collision-padding": 8
-				}, Z, { onOpenAutoFocus: q }), {
-					default: b(() => [s("div", p(d($)), [
-						s("div", F, [(m(!0), o(i, null, g(H.value.items, (e) => (m(), o("button", {
-							key: e.kind,
-							type: "button",
-							role: "menuitemradio",
-							class: "ink-select-item ink-menu-item ink-highlight-item",
-							"data-ink-select-item": "",
-							tabindex: "-1",
-							"data-key": e.kind,
-							"aria-checked": e.checked,
-							"data-state": e.checked ? "checked" : "unchecked",
-							onClick: (t) => J(e.kind)
-						}, [l(n, {
-							icon: y(x)[e.kind],
-							size: 16
-						}, null, 8, ["icon"]), c(" " + v(e.label), 1)], 8, ee))), 128))]),
-						t[2] ||= s("div", {
-							role: "separator",
-							class: "ink-select-separator"
-						}, null, -1),
-						s("div", I, [t[1] ||= s("span", {
-							class: "ink-highlight-colour-label",
-							"aria-hidden": "true"
-						}, "Colour", -1), l(r, f({
-							property: "border",
-							group: "markup",
-							label: "Highlight colour",
-							standalone: ""
-						}, Q), null, 16)])
-					], 16)]),
-					_: 1
-				}, 16)]),
-				_: 1
+			default: S(() => [d(x(k), { "as-child": "" }, {
+				default: S(() => [l("div", m({
+					role: "group",
+					"aria-label": "Highlight",
+					class: "ink-split-button ink-highlight-menu",
+					"data-ink-highlight-menu": ""
+				}, e.$attrs), [
+					d(x(P), m({
+						class: "ink-tool-button ink-highlight-button",
+						"data-ink-tool-button": "",
+						"data-ink-highlight-button": "",
+						"data-tool": "highlight",
+						"data-kind": G.value.kind,
+						"data-state": K.value ? "on" : "off"
+					}, $.value), {
+						default: S(() => [y(e.$slots, "default", {
+							active: K.value,
+							kind: G.value.kind
+						}, () => [d(r, { icon: J.value }, null, 8, ["icon"])])]),
+						_: 3
+					}, 16, ["data-kind", "data-state"]),
+					d(x(P), { "as-child": "" }, {
+						default: S(() => [d(x(N), { "as-child": "" }, {
+							default: S(() => [l("button", m({
+								type: "button",
+								class: "ink-menu-trigger ink-highlight-menu-trigger",
+								"data-ink-highlight-menu-trigger": "",
+								"data-state": W.value ? "open" : "closed"
+							}, te), [d(r, { icon: x(F) }, null, 8, ["icon"])], 16, ee)]),
+							_: 1
+						})]),
+						_: 1
+					}),
+					d(x(j), null, {
+						default: S(() => [d(x(A), m({
+							class: "ink-select-content ink-menu-content",
+							"data-ink-select-content": "",
+							"data-ink-menu": "highlight",
+							side: "bottom",
+							align: "start",
+							"side-offset": 4,
+							"collision-padding": 8
+						}, ne, { onOpenAutoFocus: Z }), {
+							default: S(() => [l("div", h(p(ie)), [
+								l("div", I, [(g(!0), c(a, null, v(G.value.items, (e) => (g(), c("button", {
+									key: e.kind,
+									type: "button",
+									role: "menuitemradio",
+									class: "ink-select-item ink-menu-item ink-highlight-item",
+									"data-ink-select-item": "",
+									tabindex: "-1",
+									"data-key": e.kind,
+									"aria-checked": e.checked,
+									"data-state": e.checked ? "checked" : "unchecked",
+									onClick: (t) => Q(e.kind)
+								}, [d(r, {
+									icon: x(C)[e.kind],
+									size: 16
+								}, null, 8, ["icon"]), u(" " + b(e.label), 1)], 8, L))), 128))]),
+								t[2] ||= l("div", {
+									role: "separator",
+									class: "ink-select-separator"
+								}, null, -1),
+								l("div", R, [t[1] ||= l("span", {
+									class: "ink-highlight-colour-label",
+									"aria-hidden": "true"
+								}, "Colour", -1), d(i, m({
+									property: "border",
+									group: "markup",
+									label: "Highlight colour",
+									standalone: "",
+									fallback: q.value
+								}, re), null, 16, ["fallback"])])
+							], 16)]),
+							_: 1
+						}, 16)]),
+						_: 1
+					})
+				], 16)]),
+				_: 3
 			})]),
-			_: 1
-		}, 8, ["open"])]));
+			_: 3
+		}, 8, ["open"]));
 	}
 });
 //#endregion
-export { L as default };
+export { z as default };
 
 //# sourceMappingURL=InkHighlightMenu.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InkHighlightMenu.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createVNode","_unref","_mergeProps","_withCtx","_renderSlot","InkIcon","_createElementVNode","_normalizeProps","_guardReactiveProps","_Fragment","_renderList","_createTextVNode","_toDisplayString","InkColorMenu","InkIcon_default","InkColorMenu_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","InkHighlightMenu_vue_vue_type_script_setup_true_lang_default","useTool","useToolOptions","open","ref","model","computed","highlightMenuModel","options","MARKUP_KINDS","active","tool","icon","MARKUP_ICONS","focusFirst","onTriggerKeydown","onOpenAutoFocus","menu","menuItems","focusInitialMenuItem","choose","setOptions","setTool","mainAttrs","triggerAttrs","menuAttrs","colourAttrs","innerAttrs","handleMenuKeys","openBlock","createElementBlock","createVNode","unref","ToolbarButton","mergeProps","withCtx","renderSlot","_ctx","PopoverRoot","_cache","$event","PopoverTrigger","createElementVNode","ChevronDown","PopoverPortal","PopoverContent","normalizeProps","guardReactiveProps","Fragment","renderList","item","createTextVNode","toDisplayString"],"sources":["../../src/components/InkHighlightMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * A split button for the highlight tool. The main part activates the tool with the current\n * markup kind and draws that kind's icon; the chevron opens a menu of the four kinds plus\n * the markup colour. Choosing a kind switches to the tool with it. The colour is a nested\n * `InkColorMenu` scoped to the `markup` style group, so it works whatever tool is active.\n */\nimport {\n  focusInitialMenuItem,\n  handleMenuKeys,\n  highlightMenuModel,\n  MARKUP_ICONS,\n  MARKUP_KINDS,\n  menuItems,\n  type HighlightOptions,\n  type MarkupKind,\n} from '@inkbar/core/dom'\nimport { ChevronDown } from '@inkbar/icons'\nimport {\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot,\n  PopoverTrigger,\n  ToolbarButton,\n} from 'reka-ui'\nimport { computed, ref } from 'vue'\n\nimport { useTool } from '../composables/useTool'\nimport { useToolOptions } from '../composables/useToolOptions'\n\nimport InkColorMenu from './InkColorMenu.vue'\nimport InkIcon from './InkIcon.vue'\n\nconst { tool, setTool } = useTool()\nconst { options, setOptions } = useToolOptions<HighlightOptions>('highlight')\nconst open = ref(false)\n\nconst model = computed(() => highlightMenuModel(options.value, MARKUP_KINDS))\nconst active = computed(() => tool.value === 'highlight')\nconst icon = computed(() => MARKUP_ICONS[model.value.kind])\n\n/** ArrowDown opens on the first item; a click opens on the checked one. */\nlet focusFirst = false\nfunction onTriggerKeydown(e: KeyboardEvent): void {\n  if (e.key !== 'ArrowDown' || e.defaultPrevented || open.value) return\n  e.preventDefault()\n  focusFirst = true\n  open.value = true\n}\n\nfunction onOpenAutoFocus(e: Event): void {\n  e.preventDefault()\n  // One highlight menu is open at a time.\n  const menu = document.querySelector('[data-ink-menu=\"highlight\"] [role=\"menu\"]')\n  if (menu) {\n    if (focusFirst) menuItems(menu)[0]?.focus({ preventScroll: true })\n    else focusInitialMenuItem(menu)\n  }\n  focusFirst = false\n}\n\nfunction choose(kind: MarkupKind): void {\n  setOptions({ kind })\n  setTool('highlight')\n  open.value = false\n}\n\n// Reka's typed props stop at its own; ARIA and listeners go through bound objects.\nconst mainAttrs = computed(() => ({\n  'aria-pressed': String(active.value),\n  'aria-label': model.value.label,\n  title: model.value.label,\n  onClick: () => setTool('highlight'),\n}))\nconst triggerAttrs = {\n  'aria-label': 'Choose highlight',\n  title: 'Choose highlight',\n  'aria-haspopup': 'menu' as const,\n  onKeydown: onTriggerKeydown,\n}\nconst menuAttrs = { 'aria-label': 'Highlights' }\n/** The colour trigger is an item of this menu, reached with the arrow keys. */\nconst colourAttrs = { role: 'menuitem', tabindex: -1 }\nconst innerAttrs = {\n  role: 'menu',\n  'aria-label': 'Highlights',\n  // Capture, so the arrow keys move on from the colour item before its own ArrowDown\n  // opens the nested menu.\n  onKeydownCapture: (e: KeyboardEvent) =>\n    handleMenuKeys(e, e.currentTarget as HTMLElement),\n}\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    aria-label=\"Highlight\"\n    class=\"ink-split-button ink-highlight-menu\"\n    data-ink-highlight-menu\n  >\n    <ToolbarButton\n      class=\"ink-tool-button ink-highlight-button\"\n      data-ink-tool-button\n      data-ink-highlight-button\n      data-tool=\"highlight\"\n      :data-kind=\"model.kind\"\n      :data-state=\"active ? 'on' : 'off'\"\n      v-bind=\"mainAttrs\"\n    >\n      <slot :active=\"active\" :kind=\"model.kind\"><InkIcon :icon=\"icon\" /></slot>\n    </ToolbarButton>\n    <PopoverRoot v-model:open=\"open\">\n      <ToolbarButton as-child>\n        <PopoverTrigger as-child>\n          <button\n            type=\"button\"\n            class=\"ink-menu-trigger ink-highlight-menu-trigger\"\n            data-ink-highlight-menu-trigger\n            :data-state=\"open ? 'open' : 'closed'\"\n            v-bind=\"triggerAttrs\"\n          >\n            <InkIcon :icon=\"ChevronDown\" />\n          </button>\n        </PopoverTrigger>\n      </ToolbarButton>\n      <PopoverPortal>\n        <PopoverContent\n          class=\"ink-select-content ink-menu-content\"\n          data-ink-select-content\n          data-ink-menu=\"highlight\"\n          side=\"bottom\"\n          align=\"start\"\n          :side-offset=\"4\"\n          :collision-padding=\"8\"\n          v-bind=\"menuAttrs\"\n          @open-auto-focus=\"onOpenAutoFocus\"\n        >\n          <div v-bind=\"innerAttrs\">\n            <div role=\"group\" aria-label=\"Kinds\" class=\"ink-highlight-kinds\">\n              <button\n                v-for=\"item in model.items\"\n                :key=\"item.kind\"\n                type=\"button\"\n                role=\"menuitemradio\"\n                class=\"ink-select-item ink-menu-item ink-highlight-item\"\n                data-ink-select-item\n                tabindex=\"-1\"\n                :data-key=\"item.kind\"\n                :aria-checked=\"item.checked\"\n                :data-state=\"item.checked ? 'checked' : 'unchecked'\"\n                @click=\"choose(item.kind)\"\n              >\n                <InkIcon :icon=\"MARKUP_ICONS[item.kind]\" :size=\"16\" />\n                {{ item.label }}\n              </button>\n            </div>\n            <div role=\"separator\" class=\"ink-select-separator\" />\n            <div role=\"group\" aria-label=\"Colour\" class=\"ink-highlight-colour\">\n              <span class=\"ink-highlight-colour-label\" aria-hidden=\"true\">Colour</span>\n              <InkColorMenu\n                property=\"border\"\n                group=\"markup\"\n                label=\"Highlight colour\"\n                standalone\n                v-bind=\"colourAttrs\"\n              />\n            </div>\n          </div>\n        </PopoverContent>\n      </PopoverPortal>\n    </PopoverRoot>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"InkHighlightMenu.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_createElementVNode","_mergeProps","_renderSlot","InkIcon","_normalizeProps","_guardReactiveProps","_createElementBlock","_Fragment","_renderList","_createTextVNode","_toDisplayString","InkColorMenu","InkIcon_default","InkColorMenu_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","InkHighlightMenu_vue_vue_type_script_setup_true_lang_default","useTool","useToolOptions","doc","useDocument","open","ref","model","computed","highlightMenuModel","options","MARKUP_KINDS","active","tool","fallback","icon","MARKUP_ICONS","focusFirst","onTriggerKeydown","onOpenAutoFocus","menu","menuItems","focusInitialMenuItem","choose","setOptions","setTool","mainAttrs","triggerAttrs","menuAttrs","colourAttrs","innerAttrs","handleMenuKeys","openBlock","createBlock","unref","PopoverRoot","_cache","$event","withCtx","createVNode","PopoverAnchor","createElementVNode","mergeProps","_ctx","ToolbarButton","renderSlot","PopoverTrigger","ChevronDown","PopoverPortal","PopoverContent","normalizeProps","guardReactiveProps","createElementBlock","Fragment","renderList","item","createTextVNode","toDisplayString"],"sources":["../../src/components/InkHighlightMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * A split button for the highlight tool. The main part activates the tool with the current\n * markup kind and draws that kind's icon; the chevron opens a menu of the four kinds plus\n * the markup colour. Choosing a kind switches to the tool with it. The colour is a nested\n * `InkColorMenu` scoped to the `markup` style group, so it works whatever tool is active.\n */\nimport {\n  focusInitialMenuItem,\n  handleMenuKeys,\n  highlightMenuModel,\n  MARKUP_ICONS,\n  MARKUP_KINDS,\n  menuItems,\n  type HighlightOptions,\n  type MarkupKind,\n} from '@inkbar/core/dom'\nimport { ChevronDown } from '@inkbar/icons'\nimport {\n  PopoverAnchor,\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot,\n  PopoverTrigger,\n  ToolbarButton,\n} from 'reka-ui'\nimport { computed, ref } from 'vue'\n\nimport { useDocument } from '../composables/useDocument'\nimport { useTool } from '../composables/useTool'\nimport { useToolOptions } from '../composables/useToolOptions'\n\nimport InkColorMenu from './InkColorMenu.vue'\nimport InkIcon from './InkIcon.vue'\n\ndefineOptions({ inheritAttrs: false })\nconst { tool, setTool } = useTool()\nconst { options, setOptions } = useToolOptions<HighlightOptions>('highlight')\nconst { document: doc } = useDocument()\nconst open = ref(false)\n\nconst model = computed(() => highlightMenuModel(options.value, MARKUP_KINDS))\nconst active = computed(() => tool.value === 'highlight')\n/** The colour the chosen kind gets while the markup style leaves it unset. */\nconst fallback = computed(() => doc.value?.annotations.defaults.color(model.value.kind))\nconst icon = computed(() => MARKUP_ICONS[model.value.kind])\n\n/** ArrowDown opens on the first item; a click opens on the checked one. */\nlet focusFirst = false\nfunction onTriggerKeydown(e: KeyboardEvent): void {\n  if (e.key !== 'ArrowDown' || e.defaultPrevented || open.value) return\n  e.preventDefault()\n  focusFirst = true\n  open.value = true\n}\n\nfunction onOpenAutoFocus(e: Event): void {\n  e.preventDefault()\n  // One highlight menu is open at a time.\n  const menu = document.querySelector('[data-ink-menu=\"highlight\"] [role=\"menu\"]')\n  if (menu) {\n    if (focusFirst) menuItems(menu)[0]?.focus({ preventScroll: true })\n    else focusInitialMenuItem(menu)\n  }\n  focusFirst = false\n}\n\nfunction choose(kind: MarkupKind): void {\n  setOptions({ kind })\n  setTool('highlight')\n  open.value = false\n}\n\n// Reka's typed props stop at its own; ARIA and listeners go through bound objects.\nconst mainAttrs = computed(() => ({\n  'aria-pressed': String(active.value),\n  'aria-label': model.value.label,\n  title: model.value.label,\n  onClick: () => setTool('highlight'),\n}))\nconst triggerAttrs = {\n  'aria-label': 'Choose highlight',\n  title: 'Choose highlight',\n  'aria-haspopup': 'menu' as const,\n  onKeydown: onTriggerKeydown,\n}\nconst menuAttrs = { 'aria-label': 'Highlights' }\n/** The colour trigger is an item of this menu, reached with the arrow keys. */\nconst colourAttrs = { role: 'menuitem', tabindex: -1 }\nconst innerAttrs = {\n  role: 'menu',\n  'aria-label': 'Highlights',\n  // Capture, so the arrow keys move on from the colour item before its own ArrowDown\n  // opens the nested menu.\n  onKeydownCapture: (e: KeyboardEvent) =>\n    handleMenuKeys(e, e.currentTarget as HTMLElement),\n}\n</script>\n\n<template>\n  <PopoverRoot v-model:open=\"open\">\n    <PopoverAnchor as-child>\n      <div\n        role=\"group\"\n        aria-label=\"Highlight\"\n        class=\"ink-split-button ink-highlight-menu\"\n        data-ink-highlight-menu\n        v-bind=\"$attrs\"\n      >\n        <ToolbarButton\n          class=\"ink-tool-button ink-highlight-button\"\n          data-ink-tool-button\n          data-ink-highlight-button\n          data-tool=\"highlight\"\n          :data-kind=\"model.kind\"\n          :data-state=\"active ? 'on' : 'off'\"\n          v-bind=\"mainAttrs\"\n        >\n          <slot :active=\"active\" :kind=\"model.kind\"><InkIcon :icon=\"icon\" /></slot>\n        </ToolbarButton>\n        <ToolbarButton as-child>\n          <PopoverTrigger as-child>\n            <button\n              type=\"button\"\n              class=\"ink-menu-trigger ink-highlight-menu-trigger\"\n              data-ink-highlight-menu-trigger\n              :data-state=\"open ? 'open' : 'closed'\"\n              v-bind=\"triggerAttrs\"\n            >\n              <InkIcon :icon=\"ChevronDown\" />\n            </button>\n          </PopoverTrigger>\n        </ToolbarButton>\n        <PopoverPortal>\n          <PopoverContent\n            class=\"ink-select-content ink-menu-content\"\n            data-ink-select-content\n            data-ink-menu=\"highlight\"\n            side=\"bottom\"\n            align=\"start\"\n            :side-offset=\"4\"\n            :collision-padding=\"8\"\n            v-bind=\"menuAttrs\"\n            @open-auto-focus=\"onOpenAutoFocus\"\n          >\n            <div v-bind=\"innerAttrs\">\n              <div role=\"group\" aria-label=\"Kinds\" class=\"ink-highlight-kinds\">\n                <button\n                  v-for=\"item in model.items\"\n                  :key=\"item.kind\"\n                  type=\"button\"\n                  role=\"menuitemradio\"\n                  class=\"ink-select-item ink-menu-item ink-highlight-item\"\n                  data-ink-select-item\n                  tabindex=\"-1\"\n                  :data-key=\"item.kind\"\n                  :aria-checked=\"item.checked\"\n                  :data-state=\"item.checked ? 'checked' : 'unchecked'\"\n                  @click=\"choose(item.kind)\"\n                >\n                  <InkIcon :icon=\"MARKUP_ICONS[item.kind]\" :size=\"16\" />\n                  {{ item.label }}\n                </button>\n              </div>\n              <div role=\"separator\" class=\"ink-select-separator\" />\n              <div role=\"group\" aria-label=\"Colour\" class=\"ink-highlight-colour\">\n                <span class=\"ink-highlight-colour-label\" aria-hidden=\"true\">Colour</span>\n                <InkColorMenu\n                  property=\"border\"\n                  group=\"markup\"\n                  label=\"Highlight colour\"\n                  standalone\n                  :fallback=\"fallback\"\n                  v-bind=\"colourAttrs\"\n                />\n              </div>\n            </div>\n          </PopoverContent>\n        </PopoverPortal>\n      </div>\n    </PopoverAnchor>\n  </PopoverRoot>\n</template>\n"],"mappings":"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"}

package/dist/components/InkPageInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"InkPageInput.js","names":["_sfc_main","InkPageInput_vue_vue_type_script_setup_true_lang_default","InkPageInput_default"],"sources":["../../src/components/InkPageInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch } from 'vue'\n\nimport { usePage } from '../composables/usePage'\n\nconst { current, count, goTo } = usePage()\n// `v-model` on a number input hands back a number once the user types.\nconst draft = ref<string | number>(String(current.value + 1))\nwatch(current, (c) => (draft.value = String(c + 1)))\n\n/** 1-based in the input, 0-based in the viewport. Out of range resets to the current page. */\nfunction commit(): void {\n  const n = Number(draft.value)\n  if (Number.isInteger(n) && n >= 1 && n <= count.value) goTo(n - 1)\n  else draft.value = String(current.value + 1)\n}\n</script>\n\n<template>\n  <input\n    v-model=\"draft\"\n    class=\"ink-page-input\"\n    data-ink-page-input\n    type=\"number\"\n    inputmode=\"numeric\"\n    aria-label=\"Page\"\n    :min=\"1\"\n    :max=\"count\"\n    @change=\"commit\"\n    @keydown.enter.prevent=\"commit\"\n  />\n</template>\n"],"mappings":""}
+{"version":3,"file":"InkPageInput.js","names":["_sfc_main","InkPageInput_vue_vue_type_script_setup_true_lang_default","InkPageInput_default"],"sources":["../../src/components/InkPageInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch } from 'vue'\n\nimport { usePage } from '../composables/usePage'\n\nconst { current, count, goTo } = usePage()\n// `v-model` on a number input hands back a number once the user types.\nconst draft = ref<string | number>(String(current.value + 1))\nwatch(current, (c) => (draft.value = String(c + 1)))\n\n/**\n * 1-based in the input, 0-based in the viewport. Out of range resets to the current page. The\n * page on show is left alone, so the `change` that a blur fires never scrolls back to its top.\n */\nfunction commit(): void {\n  const n = Number(draft.value)\n  if (Number.isInteger(n) && n >= 1 && n <= count.value) {\n    if (n - 1 !== current.value) goTo(n - 1)\n  } else draft.value = String(current.value + 1)\n}\n</script>\n\n<template>\n  <input\n    v-model=\"draft\"\n    class=\"ink-page-input\"\n    data-ink-page-input\n    type=\"number\"\n    inputmode=\"numeric\"\n    aria-label=\"Page\"\n    :min=\"1\"\n    :max=\"count\"\n    @change=\"commit\"\n    @keydown.enter.prevent=\"commit\"\n  />\n</template>\n"],"mappings":""}

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

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

package/dist/components/InkPageInput.vue_vue_type_script_setup_true_lang.js

@@ -8,7 +8,7 @@ var d = ["max", "onKeydown"], f = /*@__PURE__*/ n({
 		s(f, (e) => h.value = String(e + 1));
 		function g() {
 			let e = Number(h.value);
-			Number.isInteger(e) && e >= 1 && e <= p.value ? m(e - 1) : h.value = String(f.value + 1);
+			Number.isInteger(e) && e >= 1 && e <= p.value ? e - 1 !== f.value && m(e - 1) : h.value = String(f.value + 1);
 		}
 		return (e, n) => c((r(), t("input", {
 			"onUpdate:modelValue": n[0] ||= (e) => h.value = e,

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

@@ -1 +1 @@
-{"version":3,"file":"InkPageInput.vue_vue_type_script_setup_true_lang.js","names":["_withDirectives","_openBlock","_createElementBlock","_unref","_withKeys","_withModifiers","_vModelText","_hoisted_1","InkPageInput_vue_vue_type_script_setup_true_lang_default","usePage","draft","ref","current","c","commit","n","count","goTo","withDirectives","openBlock","createElementBlock","_cache","$event","unref","withKeys","withModifiers","vModelText"],"sources":["../../src/components/InkPageInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch } from 'vue'\n\nimport { usePage } from '../composables/usePage'\n\nconst { current, count, goTo } = usePage()\n// `v-model` on a number input hands back a number once the user types.\nconst draft = ref<string | number>(String(current.value + 1))\nwatch(current, (c) => (draft.value = String(c + 1)))\n\n/** 1-based in the input, 0-based in the viewport. Out of range resets to the current page. */\nfunction commit(): void {\n  const n = Number(draft.value)\n  if (Number.isInteger(n) && n >= 1 && n <= count.value) goTo(n - 1)\n  else draft.value = String(current.value + 1)\n}\n</script>\n\n<template>\n  <input\n    v-model=\"draft\"\n    class=\"ink-page-input\"\n    data-ink-page-input\n    type=\"number\"\n    inputmode=\"numeric\"\n    aria-label=\"Page\"\n    :min=\"1\"\n    :max=\"count\"\n    @change=\"commit\"\n    @keydown.enter.prevent=\"commit\"\n  />\n</template>\n"],"mappings":";;;;;;EAKA,IAAM,EAAE,YAAS,UAAO,YAASS,EAAQ,GAEnCC,IAAQC,EAAqB,OAAOC,EAAQ,QAAQ,CAAC,CAAC;EAC5D,EAAMA,IAAU,MAAO,EAAM,QAAQ,OAAOC,IAAI,CAAC,CAAE;EAGnD,SAASC,IAAe;GACtB,IAAMC,IAAI,OAAOL,EAAM,KAAK;GAC5B,AAAI,OAAO,UAAUK,CAAC,KAAKA,KAAK,KAAKA,KAAKC,EAAM,QAAOC,EAAKF,IAAI,CAAC,IAC5D,EAAM,QAAQ,OAAOH,EAAQ,QAAQ,CAAC;EAC7C;mBAIEZ,GAAAC,EAAA,GAAAC,EAWE,SAAA;GAVS,uBAAA,AAAAmB,EAAA,QAAA,MAAA,EAAK,QAAAC;GACd,OAAM;GACN,uBAAA;GACA,MAAK;GACL,WAAU;GACV,cAAW;GACV,KAAK;GACL,KAAKnB,EAAAa,CAAA;GACL,UAAQF;GACR,WAAOV,EAAAC,EAAgBS,GAAM,CAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;EATrB,GAAA,MAAA,IAAAP,CAAA,IAAA,CAAA,CAAAD,GAAAI,EAAA,KAAK,CAAA,CAAA"}
+{"version":3,"file":"InkPageInput.vue_vue_type_script_setup_true_lang.js","names":["_withDirectives","_openBlock","_createElementBlock","_unref","_withKeys","_withModifiers","_vModelText","_hoisted_1","InkPageInput_vue_vue_type_script_setup_true_lang_default","usePage","draft","ref","current","c","commit","n","count","goTo","withDirectives","openBlock","createElementBlock","_cache","$event","unref","withKeys","withModifiers","vModelText"],"sources":["../../src/components/InkPageInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch } from 'vue'\n\nimport { usePage } from '../composables/usePage'\n\nconst { current, count, goTo } = usePage()\n// `v-model` on a number input hands back a number once the user types.\nconst draft = ref<string | number>(String(current.value + 1))\nwatch(current, (c) => (draft.value = String(c + 1)))\n\n/**\n * 1-based in the input, 0-based in the viewport. Out of range resets to the current page. The\n * page on show is left alone, so the `change` that a blur fires never scrolls back to its top.\n */\nfunction commit(): void {\n  const n = Number(draft.value)\n  if (Number.isInteger(n) && n >= 1 && n <= count.value) {\n    if (n - 1 !== current.value) goTo(n - 1)\n  } else draft.value = String(current.value + 1)\n}\n</script>\n\n<template>\n  <input\n    v-model=\"draft\"\n    class=\"ink-page-input\"\n    data-ink-page-input\n    type=\"number\"\n    inputmode=\"numeric\"\n    aria-label=\"Page\"\n    :min=\"1\"\n    :max=\"count\"\n    @change=\"commit\"\n    @keydown.enter.prevent=\"commit\"\n  />\n</template>\n"],"mappings":";;;;;;EAKA,IAAM,EAAE,YAAS,UAAO,YAASS,EAAQ,GAEnCC,IAAQC,EAAqB,OAAOC,EAAQ,QAAQ,CAAC,CAAC;EAC5D,EAAMA,IAAU,MAAO,EAAM,QAAQ,OAAOC,IAAI,CAAC,CAAE;EAMnD,SAASC,IAAe;GACtB,IAAMC,IAAI,OAAOL,EAAM,KAAK;GAC5B,AAAI,OAAO,UAAUK,CAAC,KAAKA,KAAK,KAAKA,KAAKC,EAAM,QAC1CD,IAAI,MAAMH,EAAQ,SAAOK,EAAKF,IAAI,CAAC,IAClC,EAAM,QAAQ,OAAOH,EAAQ,QAAQ,CAAC;EAC/C;mBAIEZ,GAAAC,EAAA,GAAAC,EAWE,SAAA;GAVS,uBAAA,AAAAmB,EAAA,QAAA,MAAA,EAAK,QAAAC;GACd,OAAM;GACN,uBAAA;GACA,MAAK;GACL,WAAU;GACV,cAAW;GACV,KAAK;GACL,KAAKnB,EAAAa,CAAA;GACL,UAAQF;GACR,WAAOV,EAAAC,EAAgBS,GAAM,CAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;EATrB,GAAA,MAAA,IAAAP,CAAA,IAAA,CAAA,CAAAD,GAAAI,EAAA,KAAK,CAAA,CAAA"}

package/dist/components/InkRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"InkRoot.js","names":["_sfc_main","InkRoot_vue_vue_type_script_setup_true_lang_default","InkRoot_default"],"sources":["../../src/components/InkRoot.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  createMemorySignatureStore,\n  createSignatureLibrary,\n  InkError,\n  openDocument,\n} from '@inkbar/core'\nimport {\n  createToolOptions,\n  cssVariableDefaults,\n  FONT_FAMILIES,\n  SIGNATURE_FONTS,\n  trackToolStyle,\n} from '@inkbar/core/dom'\nimport { Primitive } from 'reka-ui'\nimport {\n  computed,\n  onBeforeUnmount,\n  onMounted,\n  onUpdated,\n  ref,\n  shallowRef,\n  useTemplateRef,\n  watch,\n} from 'vue'\n\nimport { provideInkContext, type InkHistory, type InkStatus } from '../context'\nimport { createRefHistory } from '../ref-history'\nimport { useReadable } from '../use-readable'\n\nimport type {\n  Annotation,\n  AnnotationChange,\n  AnnotationDefaults,\n  DocumentSource,\n  InkDocument,\n  PdfAssets,\n  SignatureStore,\n} from '@inkbar/core'\nimport type {\n  Tool,\n  ToolController,\n  ToolId,\n  ToolStyle,\n  Viewport,\n  ZoomValue,\n} from '@inkbar/core/dom'\n\nconst props = withDefaults(\n  defineProps<{\n    src: DocumentSource | null\n    assets: PdfAssets\n    password?: string | undefined\n    /** Colour defaults. Without it, the theme's CSS variables on the root element apply. */\n    defaults?: AnnotationDefaults | undefined\n    /**\n     * Pass (with v-model) to put annotations under the host's control. The mode is fixed when a\n     * document opens: passing or dropping this prop later takes effect on the next open.\n     */\n    annotations?: Annotation[] | undefined\n    tool?: ToolId | undefined\n    /**\n     * Host tools, added to the built-ins; one with a built-in's id replaces it. Read when a\n     * document opens.\n     */\n    tools?: Tool[] | undefined\n    /**\n     * The font families text boxes offer, replacing the PDF standard families\n     * (`FONT_FAMILIES`). Fonts beyond those are the PDF writer's to embed.\n     */\n    fonts?: string[] | undefined\n    /**\n     * Where saved signatures live. Default: memory, gone on reload.\n     * `createLocalSignatureStore` keeps them in the browser; a host can keep them anywhere.\n     * A new store takes effect at once, for the menus and the `signature` tool alike.\n     */\n    signatures?: SignatureStore | undefined\n    /** The handwriting fonts a typed signature offers; the host loads them. */\n    signatureFonts?: string[] | undefined\n    page?: number | undefined\n    zoom?: ZoomValue | undefined\n    /** Undo history. Defaults to on for uncontrolled, off for controlled. */\n    history?: boolean | undefined\n    asChild?: boolean\n  }>(),\n  {\n    password: undefined,\n    defaults: undefined,\n    annotations: undefined,\n    tool: undefined,\n    tools: undefined,\n    fonts: undefined,\n    signatures: undefined,\n    signatureFonts: undefined,\n    page: undefined,\n    zoom: undefined,\n    history: undefined,\n    asChild: false,\n  }\n)\n\nconst emit = defineEmits<{\n  'update:annotations': [next: Annotation[]]\n  change: [change: AnnotationChange]\n  'update:tool': [tool: ToolId]\n  'update:page': [page: number]\n  'update:zoom': [zoom: ZoomValue]\n  ready: [doc: InkDocument]\n  error: [error: InkError]\n  activate: [id: string]\n}>()\n\ntype TestHookElement = HTMLElement & { __inkDocument?: InkDocument | undefined }\n\n// A template ref on Primitive is a component instance; the context needs its element.\nconst primitive = useTemplateRef<{ $el: unknown }>('primitive')\nconst rootEl = shallowRef<HTMLElement | null>(null)\nfunction syncRootEl(): void {\n  const el = primitive.value?.$el\n  rootEl.value = el instanceof HTMLElement ? el : null\n}\n\nconst document = shallowRef<InkDocument | null>(null)\n/** Overrides the document's status while opening, and when opening itself failed. */\nconst override = shallowRef<InkStatus | null>(null)\nconst idle: InkStatus = { state: 'idle' }\nconst documentStatus = useReadable<InkStatus>(() => document.value?.status ?? null, idle)\nconst status = computed<InkStatus>(() => override.value ?? documentStatus.value)\nconst annotationList = useReadable<readonly Annotation[]>(\n  () => document.value?.annotations.list ?? null,\n  []\n)\nconst selection = useReadable<readonly string[]>(\n  () => document.value?.annotations.selection ?? null,\n  []\n)\nconst viewport = shallowRef<Viewport | null>(null)\nconst toolController = shallowRef<ToolController | null>(null)\nconst internalTool = ref<ToolId>(props.tool ?? 'select-text')\nconst activated = ref<string | null>(null)\n\nconst controlled = computed(() => props.annotations !== undefined)\n\n/** Signed URLs change; the key does not. Bytes and Blobs are their own identity. */\nfunction identity(src: DocumentSource | null): unknown {\n  if (src === null) return null\n  if (typeof src === 'string') return src\n  if ('key' in src) return src.key\n  return src\n}\n\nfunction setTestHook(doc: InkDocument | undefined): void {\n  if (import.meta.env.DEV && rootEl.value)\n    (rootEl.value as TestHookElement).__inkDocument = doc\n}\n\nlet generation = 0\nfunction release(): void {\n  document.value?.destroy()\n  document.value = null\n  setTestHook(undefined)\n}\n\nasync function open(): Promise<void> {\n  const gen = ++generation\n  const src = props.src\n  release()\n  refHistory.clear()\n  if (src === null) {\n    override.value = null\n    return\n  }\n  override.value = { state: 'loading' }\n  syncRootEl()\n  let doc: InkDocument\n  try {\n    doc = await openDocument(src, {\n      assets: props.assets,\n      password: props.password,\n      defaults:\n        props.defaults ?? (rootEl.value ? cssVariableDefaults(rootEl.value) : undefined),\n      // Controlled hosts get the ref history below; core's own stack stays off.\n      history: controlled.value ? false : (props.history ?? true),\n      annotations: controlled.value\n        ? {\n            mode: 'controlled',\n            initial: props.annotations ?? [],\n            onChange: (next, change) => {\n              emit('update:annotations', next)\n              emit('change', change)\n            },\n          }\n        : { mode: 'uncontrolled' },\n    })\n  } catch (cause) {\n    if (gen !== generation) return\n    const error =\n      cause instanceof InkError\n        ? cause\n        : new InkError(\n            'InvalidPdf',\n            cause instanceof Error ? cause.message : String(cause),\n            {},\n            cause\n          )\n    override.value = { state: 'error', error }\n    emit('error', error)\n    return\n  }\n  if (gen !== generation) {\n    doc.destroy()\n    return\n  }\n  // The prop may have changed while the file loaded, when there was no store to apply it to.\n  if (doc.annotations.mode === 'controlled' && props.annotations !== undefined)\n    doc.annotations.setControlledValue(props.annotations)\n  document.value = doc\n  override.value = null\n  setTestHook(doc)\n  const s = doc.status.get()\n  if (s.state === 'ready') emit('ready', doc)\n  else if (s.state === 'error') emit('error', s.error)\n}\n\nconst refHistory = createRefHistory({\n  source: () => props.annotations,\n  apply: (list) => document.value?.annotations.replaceAll(list, 'history'),\n  enabled: computed(() => controlled.value && props.history === true),\n})\nconst coreCanUndo = useReadable(() => document.value?.history.canUndo ?? null, false)\nconst coreCanRedo = useReadable(() => document.value?.history.canRedo ?? null, false)\nconst inkHistory: InkHistory = {\n  canUndo: computed(() =>\n    controlled.value ? refHistory.canUndo.value : coreCanUndo.value\n  ),\n  canRedo: computed(() =>\n    controlled.value ? refHistory.canRedo.value : coreCanRedo.value\n  ),\n  undo: () => (controlled.value ? refHistory.undo() : document.value?.history.undo()),\n  redo: () => (controlled.value ? refHistory.redo() : document.value?.history.redo()),\n  clear: () => (controlled.value ? refHistory.clear() : document.value?.history.clear()),\n  batch: (fn) => {\n    if (controlled.value) refHistory.batch(fn)\n    else if (document.value) document.value.history.batch(fn)\n    else fn()\n  },\n}\n\n/** The document's tool style; it batches through `inkHistory`, whichever mode is on. */\nconst toolStyle = shallowRef<ToolStyle | null>(null)\nlet setStyleTool: ((id: ToolId) => void) | undefined\nwatch(\n  document,\n  (doc) => {\n    if (!doc) {\n      toolStyle.value = null\n      setStyleTool = undefined\n      return\n    }\n    const tracker = trackToolStyle({\n      store: doc.annotations,\n      history: { batch: (fn) => inkHistory.batch(fn) },\n      tools: props.tools,\n      tool: internalTool.value,\n    })\n    setStyleTool = (id) => tracker.setTool(id)\n    toolStyle.value = tracker.toolStyle\n  },\n  // Sync: the style is in place before InkViewport's watcher mounts the engine with it.\n  { immediate: true, flush: 'sync' }\n)\nwatch(internalTool, (id) => setStyleTool?.(id))\n\n// Open on the client only: on the server InkRoot renders its empty slot.\nonMounted(() => {\n  syncRootEl()\n  void open()\n})\nonUpdated(syncRootEl)\n\n// Separate sources, so a new `{ url, key }` object with the same key compares equal.\nwatch([() => identity(props.src), () => props.password], () => void open())\n\nwatch(\n  () => props.annotations,\n  (next) => {\n    if (next && document.value?.annotations.mode === 'controlled')\n      document.value.annotations.setControlledValue(next)\n  }\n)\n\nwatch(\n  () => props.tool,\n  (t) => {\n    if (t) internalTool.value = t\n  }\n)\n\nfunction setTool(id: ToolId): void {\n  internalTool.value = id\n  emit('update:tool', id)\n}\n\nonBeforeUnmount(() => {\n  generation++\n  release()\n})\n\nconst signatures = computed(() =>\n  createSignatureLibrary(props.signatures ?? createMemorySignatureStore())\n)\nwatch(signatures, (lib) => void lib.refresh(), { immediate: true })\n/** Tool options last as long as the root; the tool style is per document. */\nconst toolOptions = createToolOptions()\n\nprovideInkContext({\n  assets: computed(() => props.assets),\n  document,\n  status,\n  annotations: annotationList,\n  selection,\n  viewport,\n  tools: toolController,\n  tool: internalTool,\n  setTool,\n  hostTools: computed(() => props.tools),\n  fonts: computed(() => props.fonts ?? FONT_FAMILIES),\n  toolOptions,\n  signatures,\n  signatureFonts: computed(() => props.signatureFonts ?? SIGNATURE_FONTS),\n  toolStyle,\n  zoomModel: computed(() => props.zoom),\n  pageModel: computed(() => props.page),\n  reportZoom: (z) => emit('update:zoom', z),\n  reportPage: (p) => emit('update:page', p),\n  activated,\n  setActivated(id) {\n    activated.value = id\n    if (id) emit('activate', id)\n  },\n  history: inkHistory,\n  rootEl,\n})\n\n// `history` is what `useHistory()` returns inside the root, for hosts that hold a template ref:\n// a controlled host calls `history.clear()` after loading its saved list.\ndefineExpose({ document, status, rootEl, history: inkHistory })\n</script>\n\n<template>\n  <Primitive\n    ref=\"primitive\"\n    :as-child=\"props.asChild\"\n    as=\"div\"\n    data-ink-root\n    :data-state=\"status.state\"\n  >\n    <slot :status=\"status\" :document=\"document\" />\n  </Primitive>\n</template>\n"],"mappings":""}
+{"version":3,"file":"InkRoot.js","names":["_sfc_main","InkRoot_vue_vue_type_script_setup_true_lang_default","InkRoot_default"],"sources":["../../src/components/InkRoot.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  createMemorySignatureStore,\n  createSignatureLibrary,\n  InkError,\n  openDocument,\n  readonly,\n  writable,\n} from '@inkbar/core'\nimport {\n  createPluginHost,\n  createToolOptions,\n  cssVariableDefaults,\n  FONT_FAMILIES,\n  SIGNATURE_FONTS,\n  trackToolStyle,\n} from '@inkbar/core/dom'\nimport { Primitive } from 'reka-ui'\nimport {\n  computed,\n  onBeforeUnmount,\n  onUnmounted,\n  onMounted,\n  onUpdated,\n  ref,\n  shallowRef,\n  useTemplateRef,\n  watch,\n} from 'vue'\n\nimport { provideInkContext, type InkHistory, type InkStatus } from '../context'\nimport { createRefHistory } from '../ref-history'\nimport { useReadable } from '../use-readable'\n\nimport type {\n  Annotation,\n  AnnotationChange,\n  AnnotationDefaults,\n  DocumentSource,\n  InkDocument,\n  PdfAssets,\n  SignatureStore,\n} from '@inkbar/core'\nimport type {\n  DecorateAnnotation,\n  InkPlugin,\n  PluginHost,\n  Tool,\n  ToolController,\n  ToolId,\n  ToolStyle,\n  Viewport,\n  ZoomValue,\n} from '@inkbar/core/dom'\n\nconst props = withDefaults(\n  defineProps<{\n    src: DocumentSource | null\n    assets: PdfAssets\n    password?: string | undefined\n    /** Colour defaults. Without it, the theme's CSS variables on the root element apply. */\n    defaults?: AnnotationDefaults | undefined\n    /**\n     * Pass (with v-model) to put annotations under the host's control. The mode is fixed when a\n     * document opens: passing or dropping this prop later takes effect on the next open.\n     */\n    annotations?: Annotation[] | undefined\n    tool?: ToolId | undefined\n    /**\n     * Host tools, added to the built-ins; one with a built-in's id replaces it. Read when a\n     * document opens.\n     */\n    tools?: Tool[] | undefined\n    /**\n     * Plugins, set up once when the root is created; a later change to this prop is not\n     * applied. Their tools join `tools`, their decoration and page layers apply to every\n     * document, and their commands are placed with `InkCommand` or `useCommand`.\n     */\n    plugins?: InkPlugin[] | undefined\n    /**\n     * Adds `data-*` attributes, classes and a screen-reader description to each annotation's\n     * element (see `DecorateAnnotation`). Decorations re-apply whenever the annotations change\n     * and when this prop changes, without rebuilding the viewer. Pass a new function when its\n     * output would change for any other reason.\n     */\n    decorateAnnotation?: DecorateAnnotation | undefined\n    /**\n     * The font families text boxes offer, replacing the PDF standard families\n     * (`FONT_FAMILIES`). Fonts beyond those are the PDF writer's to embed.\n     */\n    fonts?: string[] | undefined\n    /**\n     * Where saved signatures live. Default: memory, gone on reload.\n     * `createLocalSignatureStore` keeps them in the browser; a host can keep them anywhere.\n     * A new store takes effect at once, for the menus and the `signature` tool alike.\n     */\n    signatures?: SignatureStore | undefined\n    /** The handwriting fonts a typed signature offers; the host loads them. */\n    signatureFonts?: string[] | undefined\n    page?: number | undefined\n    zoom?: ZoomValue | undefined\n    /** Undo history. Defaults to on for uncontrolled, off for controlled. */\n    history?: boolean | undefined\n    asChild?: boolean\n  }>(),\n  {\n    password: undefined,\n    defaults: undefined,\n    annotations: undefined,\n    tool: undefined,\n    tools: undefined,\n    plugins: undefined,\n    decorateAnnotation: undefined,\n    fonts: undefined,\n    signatures: undefined,\n    signatureFonts: undefined,\n    page: undefined,\n    zoom: undefined,\n    history: undefined,\n    asChild: false,\n  }\n)\n\nconst emit = defineEmits<{\n  'update:annotations': [next: Annotation[]]\n  change: [change: AnnotationChange]\n  'update:tool': [tool: ToolId]\n  'update:page': [page: number]\n  'update:zoom': [zoom: ZoomValue]\n  ready: [doc: InkDocument]\n  error: [error: InkError]\n  activate: [id: string]\n}>()\n\ntype TestHookElement = HTMLElement & { __inkDocument?: InkDocument | undefined }\n\n// A template ref on Primitive is a component instance; the context needs its element.\nconst primitive = useTemplateRef<{ $el: unknown }>('primitive')\nconst rootEl = shallowRef<HTMLElement | null>(null)\nfunction syncRootEl(): void {\n  const el = primitive.value?.$el\n  rootEl.value = el instanceof HTMLElement ? el : null\n}\n\nconst document = shallowRef<InkDocument | null>(null)\n/** Overrides the document's status while opening, and when opening itself failed. */\nconst override = shallowRef<InkStatus | null>(null)\nconst idle: InkStatus = { state: 'idle' }\nconst documentStatus = useReadable<InkStatus>(() => document.value?.status ?? null, idle)\nconst status = computed<InkStatus>(() => override.value ?? documentStatus.value)\nconst annotationList = useReadable<readonly Annotation[]>(\n  () => document.value?.annotations.list ?? null,\n  []\n)\nconst selection = useReadable<readonly string[]>(\n  () => document.value?.annotations.selection ?? null,\n  []\n)\nconst viewport = shallowRef<Viewport | null>(null)\nconst toolController = shallowRef<ToolController | null>(null)\nconst internalTool = ref<ToolId>(props.tool ?? 'select-text')\nconst activated = ref<string | null>(null)\n\nconst controlled = computed(() => props.annotations !== undefined)\n\nfunction setActivated(id: string | null): void {\n  activated.value = id\n  if (id) emit('activate', id)\n}\n\nconst noop = () => {}\n\n/** Signed URLs change; the key does not. Bytes and Blobs are their own identity. */\nfunction identity(src: DocumentSource | null): unknown {\n  if (src === null) return null\n  if (typeof src === 'string') return src\n  if ('key' in src) return src.key\n  return src\n}\n\nfunction setTestHook(doc: InkDocument | undefined): void {\n  if (import.meta.env.DEV && rootEl.value)\n    (rootEl.value as TestHookElement).__inkDocument = doc\n}\n\nlet generation = 0\nfunction release(): void {\n  // Cleared first, so the plugins close their stores while the document is still alive.\n  const doc = document.value\n  document.value = null\n  doc?.destroy()\n  setTestHook(undefined)\n}\n\nasync function open(): Promise<void> {\n  const gen = ++generation\n  const src = props.src\n  release()\n  refHistory.clear()\n  if (src === null) {\n    override.value = null\n    return\n  }\n  override.value = { state: 'loading' }\n  syncRootEl()\n  let doc: InkDocument\n  try {\n    doc = await openDocument(src, {\n      assets: props.assets,\n      password: props.password,\n      defaults:\n        props.defaults ?? (rootEl.value ? cssVariableDefaults(rootEl.value) : undefined),\n      // Controlled hosts get the ref history below; core's own stack stays off.\n      history: controlled.value ? false : (props.history ?? true),\n      annotations: controlled.value\n        ? {\n            mode: 'controlled',\n            initial: props.annotations ?? [],\n            onChange: (next, change) => {\n              emit('update:annotations', next)\n              emit('change', change)\n            },\n          }\n        : { mode: 'uncontrolled' },\n    })\n  } catch (cause) {\n    if (gen !== generation) return\n    const error =\n      cause instanceof InkError\n        ? cause\n        : new InkError(\n            'InvalidPdf',\n            cause instanceof Error ? cause.message : String(cause),\n            {},\n            cause\n          )\n    override.value = { state: 'error', error }\n    emit('error', error)\n    return\n  }\n  if (gen !== generation) {\n    doc.destroy()\n    return\n  }\n  // The prop may have changed while the file loaded, when there was no store to apply it to.\n  if (doc.annotations.mode === 'controlled' && props.annotations !== undefined)\n    doc.annotations.setControlledValue(props.annotations)\n  document.value = doc\n  override.value = null\n  setTestHook(doc)\n  const s = doc.status.get()\n  if (s.state === 'ready') emit('ready', doc)\n  else if (s.state === 'error') emit('error', s.error)\n}\n\nconst refHistory = createRefHistory({\n  source: () => props.annotations,\n  apply: (list) => document.value?.annotations.replaceAll(list, 'history'),\n  enabled: computed(() => controlled.value && props.history === true),\n  store: () =>\n    document.value?.annotations.mode === 'controlled' ? document.value.annotations : null,\n})\nconst coreCanUndo = useReadable(() => document.value?.history.canUndo ?? null, false)\nconst coreCanRedo = useReadable(() => document.value?.history.canRedo ?? null, false)\nconst inkHistory: InkHistory = {\n  canUndo: computed(() =>\n    controlled.value ? refHistory.canUndo.value : coreCanUndo.value\n  ),\n  canRedo: computed(() =>\n    controlled.value ? refHistory.canRedo.value : coreCanRedo.value\n  ),\n  undo: () => (controlled.value ? refHistory.undo() : document.value?.history.undo()),\n  redo: () => (controlled.value ? refHistory.redo() : document.value?.history.redo()),\n  clear: () => (controlled.value ? refHistory.clear() : document.value?.history.clear()),\n  batch: (fn) => {\n    if (controlled.value) refHistory.batch(fn)\n    else if (document.value) document.value.history.batch(fn)\n    else fn()\n  },\n  track: (store) =>\n    controlled.value\n      ? refHistory.track(store)\n      : (document.value?.history.track(store) ?? noop),\n  react: (fn) =>\n    controlled.value ? refHistory.react(fn) : (document.value?.history.react(fn) ?? noop),\n}\n\n/*\n * One plugin host for the root's life, built once mounted so that no `setup` runs on the\n * server, where nothing would clean it up. Until then `pluginHost` is null, and InkCommand\n * renders its command disabled. The host follows `hostDocument`, which is set after `document`\n * (a sync watch): when the host reads `inkHistory` for a new document, it is that document's\n * history.\n */\nconst hostDocument = writable<InkDocument | null>(null)\nwatch(document, (doc) => hostDocument.set(doc), { flush: 'sync' })\nconst viewportEl = shallowRef<HTMLElement | null>(null)\nconst hostRoot = writable<HTMLElement | null>(null)\nwatch(viewportEl, (el) => hostRoot.set(el), { flush: 'sync' })\nconst hostActivated = writable<string | null>(null)\nwatch(activated, (id) => hostActivated.set(id), { flush: 'sync' })\nconst pluginHost = shallowRef<PluginHost | null>(null)\nfunction setUpPlugins(): void {\n  pluginHost.value = createPluginHost({\n    plugins: props.plugins ?? [],\n    document: readonly(hostDocument),\n    history: () => inkHistory,\n    activated: readonly(hostActivated),\n    // As in `createViewer`: an id not in the open document is ignored.\n    setActivated: (id) => {\n      if (id === null || document.value?.annotations.get(id)) setActivated(id)\n    },\n    root: readonly(hostRoot),\n    decorate: () => props.decorateAnnotation,\n    viewport: () => viewport.value,\n  })\n}\n\n/** The document's tool style; it batches through `inkHistory`, whichever mode is on. */\nconst toolStyle = shallowRef<ToolStyle | null>(null)\nlet setStyleTool: ((id: ToolId) => void) | undefined\nwatch(\n  document,\n  (doc) => {\n    if (!doc) {\n      toolStyle.value = null\n      setStyleTool = undefined\n      return\n    }\n    const tracker = trackToolStyle({\n      store: doc.annotations,\n      history: { batch: (fn) => inkHistory.batch(fn) },\n      // The plugins' tools too, so a plugin tool's style group applies (the host is set by now:\n      // it is built on mount, before the first document opens).\n      tools: [...(props.tools ?? []), ...(pluginHost.value?.tools ?? [])],\n      tool: internalTool.value,\n    })\n    setStyleTool = (id) => tracker.setTool(id)\n    toolStyle.value = tracker.toolStyle\n  },\n  // Sync: the style is in place before InkViewport's watcher mounts the engine with it.\n  { immediate: true, flush: 'sync' }\n)\nwatch(internalTool, (id) => setStyleTool?.(id))\n\n// Plugins and the document on the client only: on the server InkRoot renders its empty slot.\n// The plugins first, so the first document opens with their stores and reactions.\nonMounted(() => {\n  syncRootEl()\n  // A plugin whose setup throws still leaves the document to open; the error then goes to\n  // Vue's error handling (`onErrorCaptured`, `app.config.errorHandler`).\n  try {\n    setUpPlugins()\n  } finally {\n    void open()\n  }\n})\nonUpdated(syncRootEl)\n\n// Separate sources, so a new `{ url, key }` object with the same key compares equal.\nwatch([() => identity(props.src), () => props.password], () => void open())\n\nwatch(\n  () => props.annotations,\n  (next) => {\n    if (next && document.value?.annotations.mode === 'controlled')\n      document.value.annotations.setControlledValue(next)\n  }\n)\n\nwatch(\n  () => props.tool,\n  (t) => {\n    if (t) internalTool.value = t\n  }\n)\n\nfunction setTool(id: ToolId): void {\n  // Picking the active tool again starts it afresh, as after a one-shot tool's use.\n  const tc = toolController.value\n  if (internalTool.value === id && tc?.active.get() === id) tc.set(id)\n  internalTool.value = id\n  emit('update:tool', id)\n}\n\nonBeforeUnmount(() => {\n  generation++\n  release()\n})\n\n// After the children: InkViewport's engine, and the plugin layers with it, are gone by now, as\n// in `createViewer`, so no layer `destroy` runs after the plugins' cleanups.\nonUnmounted(() => {\n  pluginHost.value?.destroy()\n  pluginHost.value = null\n})\n\nconst signatures = computed(() =>\n  createSignatureLibrary(props.signatures ?? createMemorySignatureStore())\n)\nwatch(signatures, (lib) => void lib.refresh(), { immediate: true })\n/** Tool options last as long as the root; the tool style is per document. */\nconst toolOptions = createToolOptions()\n\nprovideInkContext({\n  assets: computed(() => props.assets),\n  document,\n  status,\n  annotations: annotationList,\n  selection,\n  viewport,\n  tools: toolController,\n  tool: internalTool,\n  setTool,\n  hostTools: computed(() => props.tools),\n  decorateAnnotation: computed(() => props.decorateAnnotation),\n  fonts: computed(() => props.fonts ?? FONT_FAMILIES),\n  toolOptions,\n  signatures,\n  signatureFonts: computed(() => props.signatureFonts ?? SIGNATURE_FONTS),\n  toolStyle,\n  zoomModel: computed(() => props.zoom),\n  pageModel: computed(() => props.page),\n  reportZoom: (z) => emit('update:zoom', z),\n  reportPage: (p) => emit('update:page', p),\n  activated,\n  setActivated,\n  pluginHost,\n  viewportEl,\n  history: inkHistory,\n  rootEl,\n})\n\n// `history` is what `useHistory()` returns inside the root, for hosts that hold a template ref:\n// a controlled host calls `history.clear()` after loading its saved list.\ndefineExpose({ document, status, rootEl, history: inkHistory })\n</script>\n\n<template>\n  <Primitive\n    ref=\"primitive\"\n    :as-child=\"props.asChild\"\n    as=\"div\"\n    data-ink-root\n    :data-state=\"status.state\"\n  >\n    <slot :status=\"status\" :document=\"document\" />\n  </Primitive>\n</template>\n"],"mappings":""}